From a4d073bccecf2b1c9e6315c6b177c5989b5da48e Mon Sep 17 00:00:00 2001
From: Stardust <lianghaoyu@sjtu.edu.cn>
Date: Mon, 30 Mar 2026 10:01:24 +0800
Subject: [PATCH] fix: improve number input UX in config renderer (#7153)

* fix: improve number input UX in config renderer

* fix: address review comments on number input handling
---
 .../components/shared/ConfigItemRenderer.vue  | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/components/shared/ConfigItemRenderer.vue b/dashboard/src/components/shared/ConfigItemRenderer.vue
index edae891e1..ab80816a6 100644
--- a/dashboard/src/components/shared/ConfigItemRenderer.vue
+++ b/dashboard/src/components/shared/ConfigItemRenderer.vue
@@ -146,8 +146,9 @@
     >
       <v-slider
         v-if="itemMeta?.slider"
-        :model-value="toNumber(modelValue)"
-        @update:model-value="val => emitUpdate(toNumber(val))"
+        :model-value="toNumber(numericTemp ?? modelValue)"
+        @update:model-value="val => { numericTemp = val; emitUpdate(toNumber(val)) }"
+        @end="numericTemp = null"
         :min="itemMeta?.slider?.min ?? 0"
         :max="itemMeta?.slider?.max ?? 100"
         :step="itemMeta?.slider?.step ?? 1"
@@ -157,8 +158,9 @@
         style="flex: 1"
       ></v-slider>
       <v-text-field
-        :model-value="modelValue"
-        @update:model-value="val => emitUpdate(toNumber(val))"
+        :model-value="numericTemp ?? modelValue"
+        @update:model-value="val => (numericTemp = val)"
+        @blur="() => { emitUpdate(toNumber(numericTemp)); numericTemp = null }"
         density="compact"
         variant="outlined"
         class="config-field"
@@ -235,8 +237,11 @@ import PersonaSelector from './PersonaSelector.vue'
 import KnowledgeBaseSelector from './KnowledgeBaseSelector.vue'
 import PluginSetSelector from './PluginSetSelector.vue'
 import T2ITemplateEditor from './T2ITemplateEditor.vue'
+import { ref } from 'vue'
 import { useI18n, useModuleI18n } from '@/i18n/composables'
 
+const numericTemp = ref(null)
+
 const props = defineProps({
   modelValue: {
     type: [String, Number, Boolean, Array, Object],
@@ -358,4 +363,13 @@ function getSpecialSubtype(value) {
 :deep(.v-field__input) {
   font-size: 14px;
 }
+
+:deep(.config-field input[type='number']::-webkit-inner-spin-button),
+:deep(.config-field input[type='number']::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+}
+
+:deep(.config-field input[type='number']) {
+  -moz-appearance: textfield;
+}
 </style>