修复材质参数调节滑块在手动编辑时的值限制失效的问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "material-editor",
   "private": true,
-  "version": "1.0.23",
+  "version": "1.0.25",
   "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,27 @@
             <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" />
+                <input v-model="metallic" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.matalness }}</span>
+                <input v-model="metallic" type="number" @change="ClampNumericValue" 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" />
+                <input v-model="roughness" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.roughness }}</span>
+                <input v-model="roughness" type="number" @change="ClampNumericValue" 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" />
+                <input v-model="normalScale" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.bumpScale }}</span>
+                <input v-model="normalScale" type="number" @change="ClampNumericValue" 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" />
+                <input v-model="emissiveIntensity" type="range" min="0" max="1" step="0.01" />
-                <span>{{ Material.specular }}</span>
+                <input v-model="emissiveIntensity" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
         </div>
 
@@ -117,6 +118,7 @@ import { IsNullOrWhitespace } from "../helpers/helper.string";
 import { FromDeflateBase64, ToDeflatedBase64 } from "../helpers/helper.material";
 import { storeToRefs } from "pinia";
 import { DownloadFile } from "../helpers/helper.web";
+import MathHelper from "../helpers/MathHelper";
 
 export interface MaterialRequest {
     /** 材质名 */
@@ -153,6 +155,39 @@ const textureAdjustment = ref<TextureAdjustment>({
     moveX: 0,
     moveY: 0
 });
+
+const metallic = computed({
+    get: () => Material.value.matalness,
+    set: (val) => {
+        Material.value.matalness = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
+const roughness = computed({
+    get: () => Material.value.roughness,
+    set: (val) => {
+        Material.value.roughness = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
+const normalScale = computed({
+    get: () => Material.value.bumpScale,
+    set: (val) => {
+        Material.value.bumpScale = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
+const emissiveIntensity = computed({
+    get: () => Material.value.specular,
+    set: (val) => {
+        Material.value.specular = MathHelper.clamp(val, 0, 1);
+        UpdateMaterial();
+    }
+});
+
 const uploading = ref(false);
 // const model = reactive({
 //     metallic: Material.value.matalness,
@@ -280,6 +315,16 @@ 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;
+
+    elm.valueAsNumber = MathHelper.clamp(elm.valueAsNumber, min, max);
+}
+
 defineExpose({
     Upload: HandleUpload,
     Cancel: HandleCancel
@@ -322,26 +367,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 +411,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>