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

package.json

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

src/components/MaterialAdjuster.vue

@@ -40,30 +40,26 @@
 
             <label>金属度</label>
             <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="Material.matalness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
-                    max="1" step="0.01" />
+                <input v-model="metallic" type="range" min="0" max="1" step="0.01" />
+                <input v-model="metallic" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
 
             <label>粗糙度</label>
             <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="Material.roughness" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
-                    max="1" step="0.01" />
+                <input v-model="roughness" type="range" min="0" max="1" step="0.01" />
+                <input v-model="roughness" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
 
             <label>法线强度</label>
             <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="Material.bumpScale" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
-                    max="1" step="0.01" />
+                <input v-model="normalScale" type="range" min="0" max="1" step="0.01" />
+                <input v-model="normalScale" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
 
             <label>高光</label>
             <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="Material.specular" @input="ClampNumericValue" @change="UpdateMaterial" type="number" min="0"
-                    max="1" step="0.01" />
+                <input v-model="emissiveIntensity" type="range" min="0" max="1" step="0.01" />
+                <input v-model="emissiveIntensity" type="number" @change="ClampNumericValue" min="0" max="1" step="0.01" />
             </CfFlex>
         </div>
 
@@ -122,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 {
     /** 材质名 */
@@ -158,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,
@@ -292,8 +322,7 @@ function ClampNumericValue(e: InputEvent) {
 
     if (isNaN(min) || isNaN(max)) return;
 
-    if (elm.valueAsNumber < min) elm.valueAsNumber = min;
-    if (elm.valueAsNumber > max) elm.valueAsNumber = max;
+    elm.valueAsNumber = MathHelper.clamp(elm.valueAsNumber, min, max);
 }
 
 defineExpose({