材质调节器滑块支持手工输入数值

package.json

@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "private": true,
-  "version": "1.0.23",
+  "version": "1.0.24",
   "type": "module",
   "scripts": {
     "dev": "vite",

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>