From 1a04bb8d20080df9a6f1e9ffbf5361d4e4822773 Mon Sep 17 00:00:00 2001
From: "2817212736@qq.com" <2817212736@qq.com>
Date: Fri, 13 Jun 2025 09:35:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=90=E8=B4=A8=E8=B0=83=E8=8A=82=E5=99=A8?=
 =?UTF-8?q?=E6=BB=91=E5=9D=97=E6=94=AF=E6=8C=81=E6=89=8B=E5=B7=A5=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=95=B0=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  2 +-
 src/components/MaterialAdjuster.vue | 90 +++++++++++++++++++----------
 2 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index a5e334e..f6aaab6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "private": true,
-  "version": "1.0.23",
+  "version": "1.0.24",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/MaterialAdjuster.vue b/src/components/MaterialAdjuster.vue
index e8c89da..66c5eea 100644
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -16,7 +16,8 @@
             <CfFlex gap="1em" v-if="debugMode">
                 <button class="btn-success" style="min-width: 110px;" @click="HandleUpload">保存</button>
                 <button class="btn-danger" style="min-width: 110px;" @click="HandleCancel">取消</button>
-                <button v-if="debugMode" class="btn-primary" style="min-width: 110px;" @click="HandleGenerateLogo">预览缩略图</button>
+                <button v-if="debugMode" class="btn-primary" style="min-width: 110px;"
+                    @click="HandleGenerateLogo">预览缩略图</button>
             </CfFlex>
         </div>
 
@@ -38,27 +39,31 @@
             <h3>材质调节</h3>
 
             <label>金属度</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.matalness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.matalness }}</span>
+                <input v-model="Material.matalness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
 
             <label>粗糙度</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.roughness" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.roughness }}</span>
+                <input v-model="Material.roughness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
 
             <label>法线强度</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.bumpScale" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.bumpScale }}</span>
+                <input v-model="Material.bumpScale" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
 
             <label>高光</label>
-            <CfFlex gap="1em">
+            <CfFlex gap="1em" class="input-range">
                 <input v-model="Material.specular" @input="UpdateMaterial" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.specular }}</span>
+                <input v-model="Material.specular" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
+                    max="1" step="0.01" />
             </CfFlex>
         </div>
 
@@ -280,6 +285,17 @@ async function HandleGenerateLogo() {
     DownloadFile("logo.png", blob);
 }
 
+function ClampNumericValue(e: InputEvent) {
+    const elm = e.target as HTMLInputElement;
+    const min = +elm.min;
+    const max = +elm.max;
+
+    if (isNaN(min) || isNaN(max)) return;
+
+    if (elm.valueAsNumber < min) elm.valueAsNumber = min;
+    if (elm.valueAsNumber > max) elm.valueAsNumber = max;
+}
+
 defineExpose({
     Upload: HandleUpload,
     Cancel: HandleCancel
@@ -322,26 +338,6 @@ select
     margin: 0.5rem 0;
 }
 
-input[type="range"]
-{
-    width: 220px;
-    margin: 0.5rem 0;
-}
-
-input[type="text"]
-{
-    width: 220px;
-    padding: 4px;
-    margin: 0.5rem 0;
-}
-
-input[type="number"]
-{
-    width: 220px;
-    padding: 4px;
-    margin: 0.5rem 0;
-}
-
 .btn-success
 {
     background-color: #4caf50;
@@ -386,4 +382,40 @@ input[type="number"]
 {
     background-color: #0a7ed2;
 }
+
+.input-range
+{
+    max-width: 300px;
+
+    input[type="range"]
+    {
+        flex: 14;
+        margin: 0.5rem 0;
+    }
+
+    input[type="text"]
+    {
+        flex: 2;
+        padding: 4px;
+        margin: 0.5rem 0;
+    }
+
+    input[type="number"]
+    {
+        flex: 2;
+        min-width: 0;
+        padding: 4px;
+        margin: 0.5rem 0;
+        appearance: textfield;
+        -moz-appearance: textfield;
+        margin: 0;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button
+    {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
 </style>
\ No newline at end of file