From 6d928e4dc5229b7d3afbbdf9cfc41724a2fd1fed Mon Sep 17 00:00:00 2001
From: clddup <105873086+clddup@users.noreply.github.com>
Date: Thu, 12 Dec 2024 05:38:44 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E4=B8=AD=E7=9A=84=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8rgb=E6=A8=A1=E5=BC=8F=E6=97=A0?=
 =?UTF-8?q?=E6=95=88#7969?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../antdv-token-previewer/ColorPanel.tsx      | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/site/src/components/antdv-token-previewer/ColorPanel.tsx b/site/src/components/antdv-token-previewer/ColorPanel.tsx
index aa7e3fc92..b341ee99f 100644
--- a/site/src/components/antdv-token-previewer/ColorPanel.tsx
+++ b/site/src/components/antdv-token-previewer/ColorPanel.tsx
@@ -2,10 +2,11 @@ import type { InputProps } from 'ant-design-vue';
 import { ConfigProvider, Input, InputNumber, Select, theme } from 'ant-design-vue';
 import classNames from 'ant-design-vue/es/_util/classNames';
 import type { PropType } from 'vue';
-import { defineComponent, watchEffect, watch, computed, toRefs, ref } from 'vue';
+import { defineComponent, watchEffect, computed, toRefs, ref } from 'vue';
 import { HexColorPicker, RgbaColorPicker } from '../vue-colorful';
 import tinycolor from 'tinycolor2';
 import makeStyle from './utils/makeStyle';
+import type { ValueType } from 'ant-design-vue/es/input-number/src/utils/MiniDecimal';
 
 const { useToken } = theme;
 
@@ -168,24 +169,42 @@ const RgbColorInput = defineComponent({
   setup(props) {
     const { value, alpha } = toRefs(props);
 
-    watch(value, val => {
-      props.onChange(val);
-    });
-
+    const handleChange = (val: ValueType, key: 'r' | 'g' | 'b' | 'a') => {
+      value.value[key] = val;
+      props.onChange(value.value);
+    };
     return () => {
       return (
         <div class="color-panel-rgba-input">
           <ConfigProvider theme={{ components: { InputNumber: { handleWidth: 12 } } }}>
             <div class="color-panel-rgba-input-part">
-              <InputNumber min={0} max={255} size="small" v-model={[value.value.r, 'value']} />
+              <InputNumber
+                min={0}
+                max={255}
+                size="small"
+                value={value.value.r}
+                onChange={val => handleChange(val, 'r')}
+              />
               <div class="color-panel-mode-title">R</div>
             </div>
             <div class="color-panel-rgba-input-part">
-              <InputNumber min={0} max={255} size="small" v-model={[value.value.g, 'value']} />
+              <InputNumber
+                min={0}
+                max={255}
+                size="small"
+                value={value.value.g}
+                onChange={val => handleChange(val, 'g')}
+              />
               <div class="color-panel-mode-title">G</div>
             </div>
             <div class="color-panel-rgba-input-part">
-              <InputNumber min={0} max={255} size="small" v-model={[value.value.b, 'value']} />
+              <InputNumber
+                min={0}
+                max={255}
+                size="small"
+                value={value.value.b}
+                onChange={val => handleChange(val, 'b')}
+              />
               <div class="color-panel-mode-title">B</div>
             </div>
             {alpha.value && (
@@ -195,7 +214,8 @@ const RgbColorInput = defineComponent({
                   max={1}
                   step={0.01}
                   size="small"
-                  v-model={[value.value.a, 'value']}
+                  value={value.value.a}
+                  onChange={val => handleChange(val, 'a')}
                 />
                 <div class="color-panel-mode-title">A</div>
               </div>