From 19ac1b34467114e31453886d81dd7b9b21e33609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 2 Feb 2024 17:48:21 +0800
Subject: [PATCH 01/45] fix(input-number): fix change event triggering
 mechanism (#2915)

---
 .../components/input-number/input-number.tsx  | 58 ++++---------------
 1 file changed, 12 insertions(+), 46 deletions(-)

diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx
index a7d662c36..aef93e8aa 100644
--- a/packages/web-vue/components/input-number/input-number.tsx
+++ b/packages/web-vue/components/input-number/input-number.tsx
@@ -336,40 +336,15 @@ export default defineComponent({
       const stringValue = getStringValue(finalValue);
       if (finalValue !== valueNumber.value || _value.value !== stringValue) {
         _value.value = stringValue;
+        emit('update:modelValue', finalValue);
       }
-
-      emit('update:modelValue', finalValue);
     };
-    watch(
-      () => props.min,
-      (newVal) => {
-        const _isMin =
-          isNumber(valueNumber.value) && valueNumber.value <= newVal;
-        if (isMin.value !== _isMin) {
-          isMin.value = _isMin;
-        }
 
-        const isExceedMinValue =
-          isNumber(valueNumber.value) && valueNumber.value < newVal;
-        if (isExceedMinValue) {
-          handleExceedRange();
-        }
-      }
-    );
     watch(
-      () => props.max,
-      (newVal) => {
-        const _isMax =
-          isNumber(valueNumber.value) && valueNumber.value >= newVal;
-        if (isMax.value !== _isMax) {
-          isMax.value = _isMax;
-        }
-
-        const isExceedMaxValue =
-          isNumber(valueNumber.value) && valueNumber.value > newVal;
-        if (isExceedMaxValue) {
-          handleExceedRange();
-        }
+      () => [props.max, props.min],
+      () => {
+        handleExceedRange();
+        updateNumberStatus(valueNumber.value);
       }
     );
 
@@ -421,10 +396,12 @@ export default defineComponent({
       if (isNumber(Number(value)) || /^(\.|-)$/.test(value)) {
         _value.value = props.formatter?.(value) ?? value;
         updateNumberStatus(valueNumber.value);
+
+        emit('input', valueNumber.value, _value.value, ev);
         if (props.modelEvent === 'input') {
           emit('update:modelValue', valueNumber.value);
+          emit('change', valueNumber.value, ev);
         }
-        emit('input', valueNumber.value, _value.value, ev);
       }
     };
 
@@ -433,23 +410,12 @@ export default defineComponent({
     };
 
     const handleChange = (value: string, ev: Event) => {
-      const finalValue = getLegalValue(valueNumber.value);
-      const stringValue = getStringValue(finalValue);
-      if (finalValue !== valueNumber.value || _value.value !== stringValue) {
-        _value.value = stringValue;
-        updateNumberStatus(finalValue);
+      if (ev instanceof MouseEvent && !value) {
+        return;
       }
 
-      nextTick(() => {
-        if (isNumber(props.modelValue) && props.modelValue !== finalValue) {
-          // TODO: verify number
-          _value.value = getStringValue(props.modelValue);
-          updateNumberStatus(props.modelValue);
-        }
-      });
-
-      emit('update:modelValue', finalValue);
-      emit('change', finalValue, ev);
+      handleExceedRange();
+      emit('change', valueNumber.value, ev);
     };
 
     const handleBlur = (ev: FocusEvent) => {

From da9613a65dcbfcff2fc314bbf4cba04ddceb81d8 Mon Sep 17 00:00:00 2001
From: MacroBen <42233756+ben1289@users.noreply.github.com>
Date: Fri, 2 Feb 2024 18:44:56 +0800
Subject: [PATCH 02/45] fix(watermark): fix font color does not take effect
 (#2942)

Closes #2941
---
 packages/web-vue/components/watermark/watermark.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/web-vue/components/watermark/watermark.tsx b/packages/web-vue/components/watermark/watermark.tsx
index 09f0b3440..e6b659c1c 100644
--- a/packages/web-vue/components/watermark/watermark.tsx
+++ b/packages/web-vue/components/watermark/watermark.tsx
@@ -144,10 +144,12 @@ export default defineComponent({
     const contents = computed(() =>
       isArray(props.content) ? props.content : [props.content]
     );
-    const color = computed(() =>
-      props.font?.color ?? theme.value === 'dark'
-        ? 'rgba(255, 255, 255, 0.15)'
-        : 'rgba(0, 0, 0, 0.15)'
+    const color = computed(
+      () =>
+        props.font?.color ??
+        (theme.value === 'dark'
+          ? 'rgba(255, 255, 255, 0.15)'
+          : 'rgba(0, 0, 0, 0.15)')
     );
 
     // Watermark position related

From 3f0f3b6180d9677c586052d4162a1e2c4a06f29b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 2 Feb 2024 18:45:59 +0800
Subject: [PATCH 03/45] fix(table): fix virtual table list not displaying empty
 state (#2949)

---
 packages/web-vue/components/table/table.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/components/table/table.tsx b/packages/web-vue/components/table/table.tsx
index 4cbe14458..056739aa8 100644
--- a/packages/web-vue/components/table/table.tsx
+++ b/packages/web-vue/components/table/table.tsx
@@ -2102,7 +2102,7 @@ export default defineComponent({
               </Component>
             )}
             <ResizeObserver onResize={handleTbodyResize}>
-              {isVirtualList.value ? (
+              {isVirtualList.value && flattenData.value.length ? (
                 <VirtualList
                   v-slots={{
                     item: ({
@@ -2128,6 +2128,7 @@ export default defineComponent({
                     style: contentStyle.value,
                   }}
                   paddingPosition="list"
+                  height="auto"
                   {...props.virtualListProps}
                   onScroll={onTbodyScroll}
                 />

From a13b612aed4f726eefc326c168ffb85f22e2cce0 Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Fri, 2 Feb 2024 19:04:12 +0800
Subject: [PATCH 04/45] release version

---
 packages/web-vue/CHANGELOG.md                         | 11 +++++++++++
 packages/web-vue/CHANGELOG.zh-CN.md                   | 11 +++++++++++
 packages/web-vue/components/input-number/CHANGELOG.md |  9 +++++++++
 .../components/input-number/CHANGELOG.zh-CN.md        |  9 +++++++++
 packages/web-vue/components/table/CHANGELOG.md        |  9 +++++++++
 packages/web-vue/components/table/CHANGELOG.zh-CN.md  |  9 +++++++++
 packages/web-vue/components/watermark/CHANGELOG.md    |  9 +++++++++
 .../web-vue/components/watermark/CHANGELOG.zh-CN.md   |  9 +++++++++
 packages/web-vue/package.json                         |  2 +-
 9 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index 7744dd3a3..193a9aa5d 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,17 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 BugFix
+
+- **table:** fix virtual table list not displaying empty state ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))
+- **watermark:** Fix font color does not take effect ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))
+- **input-number:** Fix change event triggering mechanism ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))
+
+
 ## 2.54.3
 
 `2024-01-19`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index b07458d88..e2b8932ca 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,17 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 问题修复
+
+- **table:** 修复表格虚拟列表下不显示 empty  问题 ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))
+- **watermark:** 修复字体颜色不生效问题 ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))
+- **input-number:** 修复 change 事件触发逻辑 ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))
+
+
 ## 2.54.3
 
 `2024-01-19`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.md b/packages/web-vue/components/input-number/CHANGELOG.md
index 62d0414a9..338c0bdad 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 BugFix
+
+- Fix change event triggering mechanism ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))
+
+
 ## 2.52.0
 
 `2023-09-22`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
index e93bacdb7..81cc65f49 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 问题修复
+
+- 修复 change 事件触发逻辑 ([#2915](https://github.com/arco-design/arco-design-vue/pull/2915))
+
+
 ## 2.52.0
 
 `2023-09-22`
diff --git a/packages/web-vue/components/table/CHANGELOG.md b/packages/web-vue/components/table/CHANGELOG.md
index 47b6352db..8afa1ebcf 100644
--- a/packages/web-vue/components/table/CHANGELOG.md
+++ b/packages/web-vue/components/table/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 BugFix
+
+- fix virtual table list not displaying empty state ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))
+
+
 ## 2.54.2
 
 `2024-01-11`
diff --git a/packages/web-vue/components/table/CHANGELOG.zh-CN.md b/packages/web-vue/components/table/CHANGELOG.zh-CN.md
index ec7a50792..63e7aed27 100644
--- a/packages/web-vue/components/table/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/table/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 问题修复
+
+- 修复表格虚拟列表下不显示 empty  问题 ([#2949](https://github.com/arco-design/arco-design-vue/pull/2949))
+
+
 ## 2.54.2
 
 `2024-01-11`
diff --git a/packages/web-vue/components/watermark/CHANGELOG.md b/packages/web-vue/components/watermark/CHANGELOG.md
index d6e8970dc..4f0635891 100644
--- a/packages/web-vue/components/watermark/CHANGELOG.md
+++ b/packages/web-vue/components/watermark/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 BugFix
+
+- Fix font color does not take effect ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))
+
+
 ## 2.54.1
 
 `2023-12-28`
diff --git a/packages/web-vue/components/watermark/CHANGELOG.zh-CN.md b/packages/web-vue/components/watermark/CHANGELOG.zh-CN.md
index 99cdfd62c..7241ec316 100644
--- a/packages/web-vue/components/watermark/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/watermark/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.4
+
+`2024-02-02`
+
+### 🐛 问题修复
+
+- 修复字体颜色不生效问题 ([#2942](https://github.com/arco-design/arco-design-vue/pull/2942))
+
+
 ## 2.54.1
 
 `2023-12-28`
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index 2da04f78a..b13beeaba 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.54.3",
+  "version": "2.54.4",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",

From 4c25475e3e7dbb474d10b1fac75bb00ca9ced49b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Wed, 21 Feb 2024 16:22:40 +0800
Subject: [PATCH 05/45] fix(input-number): fix lack of validation after value
 change (#2961)

---
 packages/web-vue/components/input-number/input-number.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx
index aef93e8aa..a6c5ae73d 100644
--- a/packages/web-vue/components/input-number/input-number.tsx
+++ b/packages/web-vue/components/input-number/input-number.tsx
@@ -336,8 +336,8 @@ export default defineComponent({
       const stringValue = getStringValue(finalValue);
       if (finalValue !== valueNumber.value || _value.value !== stringValue) {
         _value.value = stringValue;
-        emit('update:modelValue', finalValue);
       }
+      emit('update:modelValue', finalValue);
     };
 
     watch(

From 749804c2f50e1fb9801a34701cadc32057c0a367 Mon Sep 17 00:00:00 2001
From: Hex <hex@codeigniter.org.cn>
Date: Wed, 21 Feb 2024 16:53:02 +0800
Subject: [PATCH 06/45] fix(menu): Fix warning: Invalid prop name: "key" is a
 reserved property (#2978)

Co-authored-by: Hex <zhaochang@openatom.org>
---
 packages/web-vue/components/menu/interface.ts | 2 --
 packages/web-vue/components/menu/item.tsx     | 7 -------
 packages/web-vue/components/menu/sub-menu.tsx | 7 -------
 3 files changed, 16 deletions(-)

diff --git a/packages/web-vue/components/menu/interface.ts b/packages/web-vue/components/menu/interface.ts
index 1816baaa3..b108843e9 100644
--- a/packages/web-vue/components/menu/interface.ts
+++ b/packages/web-vue/components/menu/interface.ts
@@ -45,7 +45,6 @@ export interface InternalMenuProps extends MenuProps {
 }
 
 export interface SubMenuProps {
-  key: string | undefined;
   title: string | undefined;
   selectable: boolean;
   popup: boolean | ((level: number) => boolean);
@@ -57,7 +56,6 @@ export interface MenuItemGroupProps {
 }
 
 export interface MenuItemProps {
-  key: string | undefined;
   disabled?: boolean;
 }
 
diff --git a/packages/web-vue/components/menu/item.tsx b/packages/web-vue/components/menu/item.tsx
index c7e7116af..7dde63bed 100644
--- a/packages/web-vue/components/menu/item.tsx
+++ b/packages/web-vue/components/menu/item.tsx
@@ -20,13 +20,6 @@ export default defineComponent({
   name: 'MenuItem',
   inheritAttrs: false,
   props: {
-    /**
-     * @zh 唯一标志
-     * @en Unique key
-     */
-    key: {
-      type: String,
-    },
     /**
      * @zh 是否禁用
      * @en Whether to disable
diff --git a/packages/web-vue/components/menu/sub-menu.tsx b/packages/web-vue/components/menu/sub-menu.tsx
index 4b1408b94..612d6d435 100644
--- a/packages/web-vue/components/menu/sub-menu.tsx
+++ b/packages/web-vue/components/menu/sub-menu.tsx
@@ -12,13 +12,6 @@ import useMenuDataCollector from './hooks/use-menu-data-collector';
 export default defineComponent({
   name: 'SubMenu',
   props: {
-    /**
-     * @zh 唯一标志
-     * @en Unique key
-     */
-    key: {
-      type: String,
-    },
     /**
      * @zh 子菜单的标题
      * @en The title of the submenu

From 22755e10dd036c864cd4a184ffa998eba6cd5c9e Mon Sep 17 00:00:00 2001
From: Yunfei Shen <1563407190@qq.com>
Date: Wed, 21 Feb 2024 17:20:21 +0800
Subject: [PATCH 07/45] fix(date-picker): refactor date utility functions and
 week picker to correctly show selected week (#2970)

* fix(date-picker): refactor date utility functions and week picker to correctly show selected week

* docs(date-picker): update WeekPicker usage with `dayStartOfWeek` in demo

* test(date-picker): update WeekPicker snapshot
---
 packages/web-vue/components/_utils/date.ts    | 31 +++++++++++++------
 .../components/date-picker/__demo__/week.md   | 10 ++++--
 .../__test__/__snapshots__/demo.test.ts.snap  | 11 ++++++-
 .../date-picker/panels/week/index.vue         | 17 +++++-----
 4 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/packages/web-vue/components/_utils/date.ts b/packages/web-vue/components/_utils/date.ts
index aedbd2842..fbf718135 100644
--- a/packages/web-vue/components/_utils/date.ts
+++ b/packages/web-vue/components/_utils/date.ts
@@ -51,21 +51,34 @@ export const methods = {
   startOf(time: Dayjs, unit: OpUnitType) {
     return time.startOf(unit);
   },
+  /**
+   * Similar to `startOf`, returns start date of a week; used in week pickers
+   * @param time Selected date
+   * @param weekStart Start day of a week
+   * @returns Start date of the week containing the selected date
+   */
+  startOfWeek(time: Dayjs, weekStart: number) {
+    const currentDay = time.day();
+    let startOfWeek = time.subtract(currentDay - weekStart, 'day');
+    if (startOfWeek.isAfter(time)) {
+      startOfWeek = startOfWeek.subtract(7, 'day');
+    }
+    return startOfWeek;
+  },
   endOf(time: Dayjs, unit: OpUnitType) {
     return time.endOf(unit);
   },
   set(time: Dayjs, unit: UnitType, value: number) {
     return time.set(unit, value);
   },
-  isSameWeek(
-    date1: Dayjs,
-    date2: Dayjs,
-    weekStart: number,
-    localeName: string
-  ) {
-    return date1
-      .locale({ ...dayjs.Ls[localeName.toLocaleLowerCase()], weekStart })
-      .isSame(date2, 'week');
+  isSameWeek(date1: Dayjs, date2: Dayjs, weekStart: number) {
+    // calculate week number of the given date considering the given start of week
+    const getWeek = (date: Dayjs) => {
+      const day = date.day();
+      const diff = day - weekStart + (day < weekStart ? 7 : 0);
+      return date.subtract(diff, 'day').week();
+    };
+    return getWeek(date1) === getWeek(date2);
   },
 };
 
diff --git a/packages/web-vue/components/date-picker/__demo__/week.md b/packages/web-vue/components/date-picker/__demo__/week.md
index a6c57c6c5..b8979b342 100644
--- a/packages/web-vue/components/date-picker/__demo__/week.md
+++ b/packages/web-vue/components/date-picker/__demo__/week.md
@@ -6,18 +6,22 @@ title:
 
 ## zh-CN
 
-周输入器的基础使用。
+周选择器提供了一种选择星期的简单方法。也可以指定一周的起始日。
 
 ---
 
 ## en-US
 
-The basic usage of WeekPicker.
+WeekPicker provides a simple way to select weeks. It also allows you to specify the starting day of the week.
 
 ---
 
 ```vue
 <template>
-  <a-week-picker style="width: 200px;" />
+  <a-week-picker style="width: 200px; margin: 0 24px 24px 0;" />
+  <a-week-picker
+    style="width: 200px; margin: 0 24px 24px 0;"
+    day-start-of-week="1"
+  />
 </template>
 ```
diff --git a/packages/web-vue/components/date-picker/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/date-picker/__test__/__snapshots__/demo.test.ts.snap
index 0726d2e40..8bdfc91c5 100644
--- a/packages/web-vue/components/date-picker/__test__/__snapshots__/demo.test.ts.snap
+++ b/packages/web-vue/components/date-picker/__test__/__snapshots__/demo.test.ts.snap
@@ -1316,7 +1316,16 @@ exports[`<date-picker> demo: render [trigger-element] correctly 1`] = `
 `;
 
 exports[`<date-picker> demo: render [week] correctly 1`] = `
-"<div class=\\"arco-picker arco-picker-size-medium\\" style=\\"width: 200px;\\" visible=\\"false\\">
+"<div class=\\"arco-picker arco-picker-size-medium\\" style=\\"width: 200px; margin: 0px 24px 24px 0px;\\" visible=\\"false\\">
+  <!--v-if-->
+  <div class=\\"arco-picker-input\\"><input placeholder=\\"请选择周\\" class=\\"arco-picker-start-time\\"></div>
+  <div class=\\"arco-picker-suffix\\">
+    <!--v-if--><span class=\\"arco-picker-suffix-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-calendar\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M7 22h34M14 5v8m20-8v8M8 41h32a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v30a1 1 0 0 0 1 1Z\\"></path></svg></span>
+    <!--v-if-->
+  </div>
+</div>
+<!---->
+<div class=\\"arco-picker arco-picker-size-medium\\" style=\\"width: 200px; margin: 0px 24px 24px 0px;\\" visible=\\"false\\">
   <!--v-if-->
   <div class=\\"arco-picker-input\\"><input placeholder=\\"请选择周\\" class=\\"arco-picker-start-time\\"></div>
   <div class=\\"arco-picker-suffix\\">
diff --git a/packages/web-vue/components/date-picker/panels/week/index.vue b/packages/web-vue/components/date-picker/panels/week/index.vue
index 3ae040acf..dda47f089 100644
--- a/packages/web-vue/components/date-picker/panels/week/index.vue
+++ b/packages/web-vue/components/date-picker/panels/week/index.vue
@@ -33,21 +33,22 @@ export default defineComponent({
   setup(props, { emit }) {
     const { locale } = useI18n();
     const isSameTime: IsSameTime = (current, target) => {
-      return methods.isSameWeek(
-        current,
-        target,
-        props.dayStartOfWeek,
-        locale.value
-      );
+      return methods.isSameWeek(current, target, props.dayStartOfWeek);
     };
     return {
       isSameTime,
       onSelect: (value: Dayjs) => {
-        const startDateOfWeek = methods.startOf(value, 'week');
+        const startDateOfWeek = methods.startOfWeek(
+          value,
+          props.dayStartOfWeek
+        );
         emit('select', startDateOfWeek);
       },
       onCellMouseEnter: (value: Dayjs) => {
-        const startDateOfWeek = methods.startOf(value, 'week');
+        const startDateOfWeek = methods.startOfWeek(
+          value,
+          props.dayStartOfWeek
+        );
         emit('cell-mouse-enter', startDateOfWeek);
       },
     };

From dda3c06d9a1eeea5af2420143960933b57c35fa9 Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Wed, 21 Feb 2024 20:24:43 +0800
Subject: [PATCH 08/45] release version

---
 packages/web-vue/CHANGELOG.md                   | 11 +++++++++++
 packages/web-vue/CHANGELOG.zh-CN.md             | 11 +++++++++++
 .../web-vue/components/date-picker/CHANGELOG.md |  9 +++++++++
 .../components/date-picker/CHANGELOG.zh-CN.md   |  8 ++++++++
 .../components/input-number/CHANGELOG.md        |  9 +++++++++
 .../components/input-number/CHANGELOG.zh-CN.md  |  9 +++++++++
 packages/web-vue/components/menu/CHANGELOG.md   |  9 +++++++++
 .../web-vue/components/menu/CHANGELOG.zh-CN.md  |  9 +++++++++
 .../web-vue/components/menu/README.en-US.md     | 10 ++++++++--
 .../web-vue/components/menu/README.zh-CN.md     | 10 ++++++++--
 packages/web-vue/components/menu/TEMPLATE.md    | 17 +++++++++++++++++
 packages/web-vue/components/menu/base-menu.vue  |  3 +--
 packages/web-vue/components/menu/interface.ts   |  5 ++++-
 packages/web-vue/components/menu/item.tsx       |  3 +--
 .../web-vue/components/menu/sub-menu-pop.vue    |  3 ++-
 packages/web-vue/components/menu/sub-menu.tsx   |  3 +--
 packages/web-vue/package.json                   |  2 +-
 17 files changed, 118 insertions(+), 13 deletions(-)

diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index 193a9aa5d..a3c6e9e3e 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,17 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 BugFix
+
+- **menu:** Fix warning “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))
+- **date-picker:** refactor date utility functions and week picker to correctly show selected week ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))
+- **input-number:** fix v-model not working ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))
+
+
 ## 2.54.4
 
 `2024-02-02`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index e2b8932ca..5b7900862 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,17 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 问题修复
+
+- **menu:** 修复警告 “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))
+- **date-picker:** 重构日期 utility 函数和 WeekPicker，以正确显示所选星期 ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))
+- **input-number:** 修复双向绑定失效 ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))
+
+
 ## 2.54.4
 
 `2024-02-02`
diff --git a/packages/web-vue/components/date-picker/CHANGELOG.md b/packages/web-vue/components/date-picker/CHANGELOG.md
index 19ebf50a8..aef9370a5 100644
--- a/packages/web-vue/components/date-picker/CHANGELOG.md
+++ b/packages/web-vue/components/date-picker/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 BugFix
+
+- refactor date utility functions and week picker to correctly show selected week ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))
+
+
 ## 2.54.0
 
 `2023-12-15`
diff --git a/packages/web-vue/components/date-picker/CHANGELOG.zh-CN.md b/packages/web-vue/components/date-picker/CHANGELOG.zh-CN.md
index 5a8db2f39..4305d16f3 100644
--- a/packages/web-vue/components/date-picker/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/date-picker/CHANGELOG.zh-CN.md
@@ -2,6 +2,14 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 问题修复
+
+- 重构日期 utility 函数和 WeekPicker，以正确显示所选星期 ([#2970](https://github.com/arco-design/arco-design-vue/pull/2970))
+
 ## 2.54.0
 
 `2023-12-15`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.md b/packages/web-vue/components/input-number/CHANGELOG.md
index 338c0bdad..0f653b7bf 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 BugFix
+
+- fix v-model not working ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))
+
+
 ## 2.54.4
 
 `2024-02-02`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
index 81cc65f49..9cee45bff 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 问题修复
+
+- 修复双向绑定失效 ([#2961](https://github.com/arco-design/arco-design-vue/pull/2961))
+
+
 ## 2.54.4
 
 `2024-02-02`
diff --git a/packages/web-vue/components/menu/CHANGELOG.md b/packages/web-vue/components/menu/CHANGELOG.md
index ffbb94064..b3ff7e89a 100644
--- a/packages/web-vue/components/menu/CHANGELOG.md
+++ b/packages/web-vue/components/menu/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 BugFix
+
+- Fix warning “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))
+
+
 ## 2.43.0
 
 `2023-02-10`
diff --git a/packages/web-vue/components/menu/CHANGELOG.zh-CN.md b/packages/web-vue/components/menu/CHANGELOG.zh-CN.md
index a0e4b8d4e..6a3ffd1e7 100644
--- a/packages/web-vue/components/menu/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/menu/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.5
+
+`2024-02-21`
+
+### 🐛 问题修复
+
+- 修复警告 “Invalid prop name: key is a reserved property.” ([#2978](https://github.com/arco-design/arco-design-vue/pull/2978))
+
+
 ## 2.43.0
 
 `2023-02-10`
diff --git a/packages/web-vue/components/menu/README.en-US.md b/packages/web-vue/components/menu/README.en-US.md
index 7b8cfe458..a6ce9bd09 100644
--- a/packages/web-vue/components/menu/README.en-US.md
+++ b/packages/web-vue/components/menu/README.en-US.md
@@ -73,7 +73,6 @@ description: Organize, arrange, and display a list of options.
 
 |Attribute|Description|Type|Default|version|
 |---|---|---|:---:|:---|
-|key|Unique key|`string`|`-`||
 |title|The title of the submenu|`string`|`-`||
 |selectable|In the pop-up mode, whether the multi-level menu header is also used as a menu item to support the state such as click to select|`boolean`|`false`||
 |popup|Whether to force the use of pop-up mode, `level` indicates the level of the current submenu|`boolean \| ((level: number) => boolean)`|`false`||
@@ -108,7 +107,6 @@ description: Organize, arrange, and display a list of options.
 
 |Attribute|Description|Type|Default|
 |---|---|---|:---:|
-|key|Unique key|`string`|`-`|
 |disabled|Whether to disable|`boolean`|`false`|
 ### `<menu-item>` Slots
 
@@ -117,3 +115,11 @@ description: Organize, arrange, and display a list of options.
 |icon|the icon of menu item|-|2.11.0|
 
 
+
+
+## FAQ
+
+
+### The `key` attribute of `<MenuItem>` and `<SubMenu>` components is required
+When using `<MenuItem>` and `<SubMenu>` components in the `<Menu>` component, please pass in the unique `key` attribute.
+The component will rely on this value when calculating internally. If no value is assigned, some Abnormality in the scene
diff --git a/packages/web-vue/components/menu/README.zh-CN.md b/packages/web-vue/components/menu/README.zh-CN.md
index c5b90ee56..2a79c7ee7 100644
--- a/packages/web-vue/components/menu/README.zh-CN.md
+++ b/packages/web-vue/components/menu/README.zh-CN.md
@@ -71,7 +71,6 @@ description: 收纳、排列并展示一系列选项的列表。
 
 |参数名|描述|类型|默认值|版本|
 |---|---|---|:---:|:---|
-|key|唯一标志|`string`|`-`||
 |title|子菜单的标题|`string`|`-`||
 |selectable|弹出模式下，是否将多级菜单头也作为一个菜单项，支持点击选中等状态|`boolean`|`false`||
 |popup|是否强制使用弹出模式，`level` 表示当前子菜单的层级|`boolean \| ((level: number) => boolean)`|`false`||
@@ -106,7 +105,6 @@ description: 收纳、排列并展示一系列选项的列表。
 
 |参数名|描述|类型|默认值|
 |---|---|---|:---:|
-|key|唯一标志|`string`|`-`|
 |disabled|是否禁用|`boolean`|`false`|
 ### `<menu-item>` Slots
 
@@ -115,3 +113,11 @@ description: 收纳、排列并展示一系列选项的列表。
 |icon|菜单的图标|-|2.11.0|
 
 
+
+
+## FAQ
+
+### `<MenuItem>` 和 `<SubMenu>` 组件的 `key` 属性为必填
+在 `<Menu>` 组件中使用 `<MenuItem>` 和 `<SubMenu>` 组件时，请传入唯一的 `key` 属性。
+组件内部在进行计算时会依赖此值，如果没有赋值会导致部分场景下异常
+
diff --git a/packages/web-vue/components/menu/TEMPLATE.md b/packages/web-vue/components/menu/TEMPLATE.md
index 6a4ffe28f..98cd9932d 100644
--- a/packages/web-vue/components/menu/TEMPLATE.md
+++ b/packages/web-vue/components/menu/TEMPLATE.md
@@ -42,3 +42,20 @@ description: Organize, arrange, and display a list of options.
 %%API(item-group.vue)%%
 
 %%API(item.tsx)%%
+
+
+## FAQ
+
+## zh-CN
+### `<MenuItem>` 和 `<SubMenu>` 组件的 `key` 属性为必填
+在 `<Menu>` 组件中使用 `<MenuItem>` 和 `<SubMenu>` 组件时，请传入唯一的 `key` 属性。
+组件内部在进行计算时会依赖此值，如果没有赋值会导致部分场景下异常
+
+---
+
+## en-US
+### The `key` attribute of `<MenuItem>` and `<SubMenu>` components is required
+When using `<MenuItem>` and `<SubMenu>` components in the `<Menu>` component, please pass in the unique `key` attribute.
+The component will rely on this value when calculating internally. If no value is assigned, some Abnormality in the scene
+
+---
diff --git a/packages/web-vue/components/menu/base-menu.vue b/packages/web-vue/components/menu/base-menu.vue
index 9aaee4b2a..af06b8039 100644
--- a/packages/web-vue/components/menu/base-menu.vue
+++ b/packages/web-vue/components/menu/base-menu.vue
@@ -32,7 +32,6 @@ import IconMenuUnfold from '../icon/icon-menu-unfold';
 import useMergeState from '../_hooks/use-merge-state';
 import { provideLevel } from './hooks/use-level';
 import { MenuInjectionKey } from './context';
-import { InternalMenuProps } from './interface';
 import usePickSlots from '../_hooks/use-pick-slots';
 import { omit } from '../_utils/omit';
 import useMenuDataCollector from './hooks/use-menu-data-collector';
@@ -262,7 +261,7 @@ export default defineComponent({
    * @en Icon expand right
    * @slot expand-icon-right
    */
-  setup(props: InternalMenuProps, { emit, slots }) {
+  setup(props, { emit, slots }) {
     const {
       style,
       mode,
diff --git a/packages/web-vue/components/menu/interface.ts b/packages/web-vue/components/menu/interface.ts
index b108843e9..0ff7a2f81 100644
--- a/packages/web-vue/components/menu/interface.ts
+++ b/packages/web-vue/components/menu/interface.ts
@@ -1,6 +1,7 @@
 import { StyleValue } from 'vue';
 import { Breakpoint } from '../_utils/responsive-observe';
 import { Data } from '../_utils/types';
+import { TriggerProps } from '../trigger';
 
 export type MenuTheme = 'light' | 'dark';
 
@@ -30,7 +31,7 @@ export interface MenuProps {
   openKeys: string[] | undefined;
   defaultOpenKeys: string[];
   scrollConfig: { [key: string]: any } | undefined;
-  triggerProps: Data | undefined;
+  triggerProps: TriggerProps | undefined;
   tooltipProps: Data | undefined;
   autoOpenSelected: boolean;
   breakpoint: Breakpoint | undefined;
@@ -45,6 +46,7 @@ export interface InternalMenuProps extends MenuProps {
 }
 
 export interface SubMenuProps {
+  key: string | undefined;
   title: string | undefined;
   selectable: boolean;
   popup: boolean | ((level: number) => boolean);
@@ -56,6 +58,7 @@ export interface MenuItemGroupProps {
 }
 
 export interface MenuItemProps {
+  key: string | undefined;
   disabled?: boolean;
 }
 
diff --git a/packages/web-vue/components/menu/item.tsx b/packages/web-vue/components/menu/item.tsx
index 7dde63bed..678c12013 100644
--- a/packages/web-vue/components/menu/item.tsx
+++ b/packages/web-vue/components/menu/item.tsx
@@ -8,7 +8,6 @@ import {
 } from 'vue';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import Tooltip from '../tooltip';
-import { MenuItemProps } from './interface';
 import useMenu from './hooks/use-menu';
 import useLevel from './hooks/use-level';
 import { omit } from '../_utils/omit';
@@ -36,7 +35,7 @@ export default defineComponent({
    * @slot icon
    * @version 2.11.0
    */
-  setup(props: MenuItemProps, { emit }) {
+  setup(props, { emit }) {
     const { key } = useMenu();
     const { level } = useLevel();
     const menuContext = useMenuContext();
diff --git a/packages/web-vue/components/menu/sub-menu-pop.vue b/packages/web-vue/components/menu/sub-menu-pop.vue
index c7ee98912..62cc5039b 100644
--- a/packages/web-vue/components/menu/sub-menu-pop.vue
+++ b/packages/web-vue/components/menu/sub-menu-pop.vue
@@ -110,7 +110,7 @@ export default defineComponent({
       default: undefined,
     },
   },
-  setup(props: SubMenuPopProps) {
+  setup(props) {
     const { key } = useMenu();
     const { level } = useLevel();
     const { selectable, isChildrenSelected, popupMaxHeight } = toRefs(props);
@@ -147,6 +147,7 @@ export default defineComponent({
       {
         [`${prefixCls.value}-trigger-dark`]: menuContext.theme === 'dark',
       },
+      // @ts-ignore
       menuContext.triggerProps?.class,
     ]);
     const triggerProps = computed(() =>
diff --git a/packages/web-vue/components/menu/sub-menu.tsx b/packages/web-vue/components/menu/sub-menu.tsx
index 612d6d435..4ac59bcdd 100644
--- a/packages/web-vue/components/menu/sub-menu.tsx
+++ b/packages/web-vue/components/menu/sub-menu.tsx
@@ -1,5 +1,4 @@
 import { computed, defineComponent, PropType, toRef, toRefs } from 'vue';
-import { SubMenuProps } from './interface';
 import SubMenuInline from './sub-menu-inline.vue';
 import SubMenuPop from './sub-menu-pop.vue';
 import useMenu from './hooks/use-menu';
@@ -68,7 +67,7 @@ export default defineComponent({
    * @en Title
    * @slot title
    */
-  setup(props: SubMenuProps, { attrs }) {
+  setup(props, { attrs }) {
     const { key } = useMenu();
     const { level } = useLevel();
     const { popup } = toRefs(props);
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index b13beeaba..113a46d16 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.54.4",
+  "version": "2.54.5",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",

From 27fd32bfe7bcfc15a246c6443de505a7ec65ae87 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Fri, 1 Mar 2024 14:38:33 +0800
Subject: [PATCH 09/45] fix(tree): key is a reserved property (#2995)

---
 packages/web-vue/components/tree/base-node.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/web-vue/components/tree/base-node.vue b/packages/web-vue/components/tree/base-node.vue
index 944fee61f..9d5f3150c 100644
--- a/packages/web-vue/components/tree/base-node.vue
+++ b/packages/web-vue/components/tree/base-node.vue
@@ -150,10 +150,6 @@ export default defineComponent({
     IconDragDotVertical,
   },
   props: {
-    /** 唯一标示 */
-    key: {
-      type: [String, Number] as PropType<string | number>,
-    },
     /** 标题 */
     title: {
       type: String,

From ccc71fb2a2923c58a018a3c0c33b4039a8d5a9d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 1 Mar 2024 14:39:33 +0800
Subject: [PATCH 10/45] fix(transfer): fix disabled props not working (#2996)

---
 packages/web-vue/components/transfer/transfer-view.vue | 6 +++++-
 packages/web-vue/components/transfer/transfer.vue      | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/components/transfer/transfer-view.vue b/packages/web-vue/components/transfer/transfer-view.vue
index 75b4167eb..09aaa4108 100644
--- a/packages/web-vue/components/transfer/transfer-view.vue
+++ b/packages/web-vue/components/transfer/transfer-view.vue
@@ -22,6 +22,7 @@
             v-else
             :model-value="checked"
             :indeterminate="indeterminate"
+            :disabled="disabled"
             uninject-group-context
             @change="handleSelectAllChange"
           >
@@ -30,6 +31,7 @@
         </span>
         <icon-hover
           v-if="allowClear"
+          :disabled="disabled"
           :class="`${prefixCls}-header-clear-btn`"
           @click="handleClear"
         >
@@ -43,6 +45,7 @@
     <div v-if="showSearch" :class="`${prefixCls}-search`">
       <input-search
         v-model="filter"
+        :disabled="disabled"
         v-bind="inputSearchProps"
         @change="handleSearch"
       />
@@ -66,7 +69,7 @@
               :data="item"
               :simple="simple"
               :allow-clear="allowClear"
-              :disabled="item.disabled"
+              :disabled="disabled || item.disabled"
             />
           </list>
         </slot>
@@ -115,6 +118,7 @@ export default defineComponent({
       type: Array as PropType<TransferItem[]>,
       required: true,
     },
+    disabled: Boolean,
     allowClear: Boolean,
     selected: {
       type: Array as PropType<string[]>,
diff --git a/packages/web-vue/components/transfer/transfer.vue b/packages/web-vue/components/transfer/transfer.vue
index da224a371..4820ff0d5 100644
--- a/packages/web-vue/components/transfer/transfer.vue
+++ b/packages/web-vue/components/transfer/transfer.vue
@@ -6,6 +6,7 @@
       :title="sourceTitle"
       :data-info="dataInfo.sourceInfo"
       :data="dataInfo.sourceInfo.data"
+      :disabled="mergedDisabled"
       :selected="computedSelected"
       :show-search="showSearch"
       :show-select-all="showSelectAll"
@@ -53,6 +54,7 @@
       :title="targetTitle"
       :data-info="dataInfo.targetInfo"
       :data="dataInfo.targetInfo.data"
+      :disabled="mergedDisabled"
       :selected="computedSelected"
       :allow-clear="oneWay"
       :show-search="showSearch"
@@ -410,6 +412,7 @@ export default defineComponent({
       cls,
       dataInfo,
       computedSelected,
+      mergedDisabled,
       sourceTitle,
       targetTitle,
       handleClick,

From 933b02bb94d07af8d446fa1fd7880ba277099c2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 1 Mar 2024 14:40:12 +0800
Subject: [PATCH 11/45] fix(collapse): resolve reserved property warning
 (#2997)

---
 .../web-vue/components/collapse/README.en-US.md    |  7 ++++++-
 .../web-vue/components/collapse/README.zh-CN.md    |  7 ++++++-
 packages/web-vue/components/collapse/TEMPLATE.md   | 14 ++++++++++++++
 .../web-vue/components/collapse/collapse-item.tsx  |  5 -----
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/web-vue/components/collapse/README.en-US.md b/packages/web-vue/components/collapse/README.en-US.md
index 0d122cfa6..624f812c9 100644
--- a/packages/web-vue/components/collapse/README.en-US.md
+++ b/packages/web-vue/components/collapse/README.en-US.md
@@ -53,7 +53,6 @@ description: The content area that can be collapsed/expanded.
 
 |Attribute|Description|Type|Default|version|
 |---|---|---|:---:|:---|
-|key|The id of the panel, corresponding to the value in `activeKey`|`string\|number`|`-`||
 |header|The title of the panel|`string`|`-`||
 |disabled|Whether to disable|`boolean`|`false`||
 |show-expand-icon|Whether to show the expand icon|`boolean`|`true`||
@@ -67,3 +66,9 @@ description: The content area that can be collapsed/expanded.
 |header|The title of the panel|-||
 
 
+
+## FAQ
+
+
+### The `key` attribute of `<CollapseItem>` components is required
+In the `<Collapse>` component, each `<CollapseItem>` needs to specify a unique `key` attribute, and the `key` corresponding to the value in `activeKey`.
diff --git a/packages/web-vue/components/collapse/README.zh-CN.md b/packages/web-vue/components/collapse/README.zh-CN.md
index 3acaaf0ac..8754de71a 100644
--- a/packages/web-vue/components/collapse/README.zh-CN.md
+++ b/packages/web-vue/components/collapse/README.zh-CN.md
@@ -51,7 +51,6 @@ description: 可以折叠 / 展开的内容区域。
 
 |参数名|描述|类型|默认值|版本|
 |---|---|---|:---:|:---|
-|key|面板的 id，对应 `activeKey` 中的值|`string\|number`|`-`||
 |header|面板的标题|`string`|`-`||
 |disabled|是否禁用|`boolean`|`false`||
 |show-expand-icon|是否显示展开图标|`boolean`|`true`||
@@ -65,3 +64,9 @@ description: 可以折叠 / 展开的内容区域。
 |header|面板的标题|-||
 
 
+
+## FAQ
+
+### `<CollapseItem>` 组件的 `key` 属性为必填
+在 `<Collapse>` 组件中每个 `<CollapseItem>` 都需要指定唯一的 `key` 属性，`key` 对应 `activeKey` 中的值。
+
diff --git a/packages/web-vue/components/collapse/TEMPLATE.md b/packages/web-vue/components/collapse/TEMPLATE.md
index 51032d129..2164fa328 100644
--- a/packages/web-vue/components/collapse/TEMPLATE.md
+++ b/packages/web-vue/components/collapse/TEMPLATE.md
@@ -40,3 +40,17 @@ description: The content area that can be collapsed/expanded.
 %%API(collapse.vue)%%
 
 %%API(collapse-item.tsx)%%
+
+## FAQ
+
+## zh-CN
+### `<CollapseItem>` 组件的 `key` 属性为必填
+在 `<Collapse>` 组件中每个 `<CollapseItem>` 都需要指定唯一的 `key` 属性，`key` 对应 `activeKey` 中的值。
+
+---
+
+## en-US
+### The `key` attribute of `<CollapseItem>` components is required
+In the `<Collapse>` component, each `<CollapseItem>` needs to specify a unique `key` attribute, and the `key` corresponding to the value in `activeKey`.
+
+---
diff --git a/packages/web-vue/components/collapse/collapse-item.tsx b/packages/web-vue/components/collapse/collapse-item.tsx
index f80751535..0877bc7fa 100644
--- a/packages/web-vue/components/collapse/collapse-item.tsx
+++ b/packages/web-vue/components/collapse/collapse-item.tsx
@@ -19,11 +19,6 @@ export default defineComponent({
   name: 'CollapseItem',
   components: { IconHover, IconCaretRight, IconCaretLeft },
   props: {
-    /**
-     * @zh 面板的 id，对应 `activeKey` 中的值
-     * @en The id of the panel, corresponding to the value in `activeKey`
-     */
-    key: [String, Number],
     /**
      * @zh 面板的标题
      * @en The title of the panel

From 64cafb4c561187c1757c14f530c70425d027f92f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 1 Mar 2024 15:00:59 +0800
Subject: [PATCH 12/45] fix(modal): fix fade-modal transition effect works on
 enter state (#3007)

---
 packages/web-vue/components/modal/style/index.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-vue/components/modal/style/index.less b/packages/web-vue/components/modal/style/index.less
index c33d4ebc1..1b787d203 100644
--- a/packages/web-vue/components/modal/style/index.less
+++ b/packages/web-vue/components/modal/style/index.less
@@ -113,8 +113,8 @@
   }
 
   &-footer {
-    box-sizing: border-box;
     flex-shrink: 0;
+    box-sizing: border-box;
     width: 100%;
     padding: @modal-default-padding-footer-vertical
       @modal-default-padding-horizontal;
@@ -263,7 +263,7 @@
   opacity: 1;
 }
 
-.fad-modal-enter-active,
+.fade-modal-enter-active,
 .fade-modal-appear-active {
   transition: opacity @transition-duration-4
     @transition-timing-function-overshoot;

From 9e01577fea3edf381a8839fa09651ccac415c2f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 1 Mar 2024 16:12:39 +0800
Subject: [PATCH 13/45] fix(input-number): fix overlap between step button and
 suffix/append (#3005)

---
 .../components/input-number/input-number.tsx    |  4 +++-
 .../components/input-number/style/index.less    | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx
index a6c5ae73d..e5c34bcda 100644
--- a/packages/web-vue/components/input-number/input-number.tsx
+++ b/packages/web-vue/components/input-number/input-number.tsx
@@ -466,7 +466,9 @@ export default defineComponent({
       }
       return (
         <>
-          {slots.suffix?.()}
+          {slots.suffix && (
+            <div class={`${prefixCls}-suffix`}>{slots.suffix?.()}</div>
+          )}
           <div class={`${prefixCls}-step`}>
             <button
               class={[
diff --git a/packages/web-vue/components/input-number/style/index.less b/packages/web-vue/components/input-number/style/index.less
index 8e4744671..6bcbe270d 100644
--- a/packages/web-vue/components/input-number/style/index.less
+++ b/packages/web-vue/components/input-number/style/index.less
@@ -49,6 +49,10 @@
     }
   }
 
+  .@{input-prefix-cls}-wrapper {
+    position: relative;
+  }
+
   &-prefix,
   &-suffix {
     .transition();
@@ -92,13 +96,18 @@
     &:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-outer-disabled) {
       &:hover,
       &:focus-within {
+        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题
+        .@{input-prefix-cls}-suffix:has(.@{input-number-prefix-cls}-suffix) {
+          padding-left: @spacing-2;
+        }
+
         & .@{input-number-prefix-cls}-step {
           opacity: 1;
+        }
 
-          & ~ .@{input-prefix-cls}-suffix {
-            opacity: 0;
-            pointer-events: none;
-          }
+        & .@{input-number-prefix-cls}-suffix {
+          opacity: 0;
+          pointer-events: none;
         }
       }
     }

From 526ad9e44fd755f9cf25c1397e5c662dd61b377b Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Fri, 1 Mar 2024 17:15:38 +0800
Subject: [PATCH 14/45] release version

---
 packages/web-vue/CHANGELOG.md                    | 16 ++++++++++++++++
 packages/web-vue/CHANGELOG.zh-CN.md              | 16 ++++++++++++++++
 .../web-vue/components/collapse/CHANGELOG.md     |  9 +++++++++
 .../components/collapse/CHANGELOG.zh-CN.md       |  9 +++++++++
 .../web-vue/components/input-number/CHANGELOG.md |  9 +++++++++
 .../components/input-number/CHANGELOG.zh-CN.md   |  9 +++++++++
 packages/web-vue/components/modal/CHANGELOG.md   |  9 +++++++++
 .../web-vue/components/modal/CHANGELOG.zh-CN.md  |  9 +++++++++
 .../web-vue/components/transfer/CHANGELOG.md     |  9 +++++++++
 .../components/transfer/CHANGELOG.zh-CN.md       |  9 +++++++++
 packages/web-vue/components/tree/CHANGELOG.md    |  9 +++++++++
 .../web-vue/components/tree/CHANGELOG.zh-CN.md   |  9 +++++++++
 packages/web-vue/package.json                    |  2 +-
 13 files changed, 123 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index a3c6e9e3e..86f1ebdc3 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,22 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 BugFix
+
+- **input-number:** fix overlap between step button and suffix/append ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))
+- **collapse:** resolve reserved property warning ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))
+- **transfer:** fix disabled props not working ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))
+- **tree:** resolve invalid property name console warning issue ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))
+
+### 💅 Style
+
+- **modal:** fix fade-modal transition effect works on enter state ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))
+
+
 ## 2.54.5
 
 `2024-02-21`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index 5b7900862..8600d143c 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,22 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 问题修复
+
+- **input-number:** 修复步进按钮与 suffix/append 的样式重叠 ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))
+- **collapse:** 解决 `vue` 保留属性警告 ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))
+- **transfer:** 修复 disabled 属性不生效问题 ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))
+- **tree:** 解决无效的属性名称控制台警告问题 ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))
+
+### 💅 样式更新
+
+- **modal:** 修复遮罩层 fade-modal 过渡动画在进入时不生效问题 ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))
+
+
 ## 2.54.5
 
 `2024-02-21`
diff --git a/packages/web-vue/components/collapse/CHANGELOG.md b/packages/web-vue/components/collapse/CHANGELOG.md
index 631da5b46..1b7b88e35 100644
--- a/packages/web-vue/components/collapse/CHANGELOG.md
+++ b/packages/web-vue/components/collapse/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 BugFix
+
+- resolve reserved property warning ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))
+
+
 ## 2.38.0-beta.1
 
 `2022-10-14`
diff --git a/packages/web-vue/components/collapse/CHANGELOG.zh-CN.md b/packages/web-vue/components/collapse/CHANGELOG.zh-CN.md
index bf75bd2cb..2be3fe3ec 100644
--- a/packages/web-vue/components/collapse/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/collapse/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 问题修复
+
+- 解决 `vue` 保留属性警告 ([#2997](https://github.com/arco-design/arco-design-vue/pull/2997))
+
+
 ## 2.38.0-beta.1
 
 `2022-10-14`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.md b/packages/web-vue/components/input-number/CHANGELOG.md
index 0f653b7bf..7d994ca77 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 BugFix
+
+- fix overlap between step button and suffix/append ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))
+
+
 ## 2.54.5
 
 `2024-02-21`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
index 9cee45bff..24dbe2596 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 问题修复
+
+- 修复步进按钮与 suffix/append 的样式重叠 ([#3005](https://github.com/arco-design/arco-design-vue/pull/3005))
+
+
 ## 2.54.5
 
 `2024-02-21`
diff --git a/packages/web-vue/components/modal/CHANGELOG.md b/packages/web-vue/components/modal/CHANGELOG.md
index 58cc8e926..68495ec2f 100644
--- a/packages/web-vue/components/modal/CHANGELOG.md
+++ b/packages/web-vue/components/modal/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 💅 Style
+
+- fix fade-modal transition effect works on enter state ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))
+
+
 ## 2.50.0
 
 `2023-08-11`
diff --git a/packages/web-vue/components/modal/CHANGELOG.zh-CN.md b/packages/web-vue/components/modal/CHANGELOG.zh-CN.md
index fa1764f05..1e53bf148 100644
--- a/packages/web-vue/components/modal/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/modal/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 💅 样式更新
+
+- 修复遮罩层 fade-modal 过渡动画在进入时不生效问题 ([#3007](https://github.com/arco-design/arco-design-vue/pull/3007))
+
+
 ## 2.50.0
 
 `2023-08-11`
diff --git a/packages/web-vue/components/transfer/CHANGELOG.md b/packages/web-vue/components/transfer/CHANGELOG.md
index 879ff4342..27616d204 100644
--- a/packages/web-vue/components/transfer/CHANGELOG.md
+++ b/packages/web-vue/components/transfer/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 BugFix
+
+- fix disabled props not working ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))
+
+
 ## 2.52.0
 
 `2023-09-22`
diff --git a/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md b/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md
index 6a0d84ffd..c0617afd4 100644
--- a/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 问题修复
+
+- 修复 disabled 属性不生效问题 ([#2996](https://github.com/arco-design/arco-design-vue/pull/2996))
+
+
 ## 2.52.0
 
 `2023-09-22`
diff --git a/packages/web-vue/components/tree/CHANGELOG.md b/packages/web-vue/components/tree/CHANGELOG.md
index 399bd1e4b..c59e37474 100644
--- a/packages/web-vue/components/tree/CHANGELOG.md
+++ b/packages/web-vue/components/tree/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 BugFix
+
+- resolve invalid property name console warning issue ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))
+
+
 ## 2.54.3
 
 `2024-01-19`
diff --git a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
index 6e2cd8b27..386f9d50d 100644
--- a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.54.6
+
+`2024-03-01`
+
+### 🐛 问题修复
+
+- 解决无效的属性名称控制台警告问题 ([#2995](https://github.com/arco-design/arco-design-vue/pull/2995))
+
+
 ## 2.54.3
 
 `2024-01-19`
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index 113a46d16..4d8b49d6c 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.54.5",
+  "version": "2.54.6",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",

From d28f04663f349f2011fcfb2d16e0be483233ca87 Mon Sep 17 00:00:00 2001
From: Flsion <wangchen.flsion@bytedance.com>
Date: Fri, 15 Mar 2024 17:50:21 +0800
Subject: [PATCH 15/45] feat: add tree slot data (#3024)

---
 .../components/tree-select/tree-select.vue    | 68 +++++++++++++++----
 .../web-vue/components/tree/base-node.vue     |  2 +-
 packages/web-vue/components/tree/tree.vue     |  1 +
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/packages/web-vue/components/tree-select/tree-select.vue b/packages/web-vue/components/tree-select/tree-select.vue
index 4ddde27eb..138c9f84b 100644
--- a/packages/web-vue/components/tree-select/tree-select.vue
+++ b/packages/web-vue/components/tree-select/tree-select.vue
@@ -425,6 +425,24 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
     },
+    /**
+     * @zh 输入框的值
+     * @en The value of the input
+     * @vModel
+     * @version 2.55.0
+     */
+    inputValue: {
+      type: String,
+    },
+    /**
+     * @zh 输入框的默认值（非受控模式）
+     * @en The default value of the input (uncontrolled mode)
+     * @version 2.55.0
+     */
+    defaultInputValue: {
+      type: String,
+      default: '',
+    },
   },
   emits: {
     /**
@@ -450,6 +468,7 @@ export default defineComponent({
         | LabelValue[]
         | undefined
     ) => true,
+    'update:inputValue': (inputValue: string) => true,
     /**
      * @zh 下拉框显示状态改变时触发
      * @en Triggered when the status of the drop-down box changes
@@ -468,6 +487,13 @@ export default defineComponent({
      * @en Triggered when clear is clicked
      * */
     'clear': () => true,
+    /**
+     * @zh 输入框的值发生改变时触发
+     * @en Triggered when the value of the input changes
+     * @param {string} inputValue
+     * @version 2.55.0
+     */
+    'inputValueChange': (inputValue: string) => true,
   },
   /**
    * @zh 自定义触发元素
@@ -512,6 +538,7 @@ export default defineComponent({
    * @zh 定制 tree 组件的节点标题
    * @en Custom the node title of the tree component
    * @slot tree-slot-title
+   * @binding {string} title
    */
   /**
    * @zh 定制 tree 组件的渲染额外节点内容
@@ -641,7 +668,26 @@ export default defineComponent({
       });
     };
 
-    const searchValue = ref('');
+    const _inputValue = ref(props.defaultInputValue);
+    const computedInputValue = computed(
+      () => props.inputValue ?? _inputValue.value
+    );
+
+    const updateInputValue = (inputValue: string) => {
+      _inputValue.value = inputValue;
+      emit('update:inputValue', inputValue);
+      emit('inputValueChange', inputValue);
+    };
+
+    const handleInputValueChange = (inputValue: string) => {
+      if (inputValue !== computedInputValue.value) {
+        setPanelVisible(true);
+        updateInputValue(inputValue);
+        if (props.allowSearch) {
+          emit('search', inputValue);
+        }
+      }
+    };
 
     const [panelVisible, setLocalPanelVisible] = useMergeState(
       defaultPopupVisible.value,
@@ -666,7 +712,7 @@ export default defineComponent({
     const { isEmptyFilterResult, filterTreeNode: computedFilterTreeNode } =
       useFilterTreeNode(
         reactive({
-          searchValue,
+          searchValue: computedInputValue,
           flattenTreeData,
           filterMethod: filterTreeNode,
           disableFilter,
@@ -686,8 +732,8 @@ export default defineComponent({
     ]);
 
     const onBlur = () => {
-      if (!retainInputValue.value && searchValue.value) {
-        searchValue.value = '';
+      if (!retainInputValue.value && computedInputValue.value) {
+        updateInputValue('');
       }
     };
 
@@ -698,23 +744,19 @@ export default defineComponent({
       selectedValue,
       selectedKeys,
       mergedDisabled,
-      searchValue,
+      searchValue: computedInputValue,
       panelVisible,
       isEmpty,
       computedFilterTreeNode,
       isMultiple,
       selectViewValue,
       computedDropdownStyle,
-      onSearchValueChange(newVal: string) {
-        if (newVal !== searchValue.value) {
-          setPanelVisible(true);
-          searchValue.value = newVal;
-          emit('search', newVal);
-        }
-      },
+      onSearchValueChange: handleInputValueChange,
       onSelectChange(newVal: string[]) {
         setSelectedKeys(newVal);
-        searchValue.value = '';
+        if (!retainInputValue.value && computedInputValue.value) {
+          updateInputValue('');
+        }
 
         if (!isMultiple.value) {
           setPanelVisible(false);
diff --git a/packages/web-vue/components/tree/base-node.vue b/packages/web-vue/components/tree/base-node.vue
index 9d5f3150c..87f641652 100644
--- a/packages/web-vue/components/tree/base-node.vue
+++ b/packages/web-vue/components/tree/base-node.vue
@@ -87,7 +87,7 @@
       <span :class="`${prefixCls}-title-text`">
         <RenderFunction v-if="treeTitle" :render-func="treeTitle" />
         <!-- 标题，treeTitle 优先级高于节点的 title -->
-        <slot v-else name="title">{{ title }}</slot>
+        <slot v-else name="title" :title="title">{{ title }}</slot>
 
         <span
           v-if="draggable"
diff --git a/packages/web-vue/components/tree/tree.vue b/packages/web-vue/components/tree/tree.vue
index e3d4ec7ed..8ec211b2d 100644
--- a/packages/web-vue/components/tree/tree.vue
+++ b/packages/web-vue/components/tree/tree.vue
@@ -441,6 +441,7 @@ export default defineComponent({
    * @zh 标题
    * @en Title
    * @slot title
+   * @binding {string} title
    */
   setup(props, { emit, slots }) {
     const {

From d8ae3f9a5b79a68c8d969d64b4da5798aa490199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 15 Mar 2024 17:51:27 +0800
Subject: [PATCH 16/45] feat(color-picker): add color-picker component (#2958)

* feat(color-picker): add color-picker component

* feat(color-picker): add logic for disabledAlpha
---
 packages/arco-vue-docs/locale/en-us.js        |   1 +
 packages/arco-vue-docs/locale/zh-cn.js        |   1 +
 packages/arco-vue-docs/router.ts              |   9 +
 packages/web-vue/components/_utils/color.ts   | 215 +++++++++++
 packages/web-vue/components/arco-vue.ts       |   2 +
 .../components/color-picker/README.en-US.md   |  47 +++
 .../components/color-picker/README.zh-CN.md   |  45 +++
 .../components/color-picker/TEMPLATE.md       |  31 ++
 .../components/color-picker/__demo__/basic.md |  31 ++
 .../color-picker/__demo__/colors.md           |  44 +++
 .../color-picker/__demo__/disabled.md         |  26 ++
 .../color-picker/__demo__/format.md           |  35 ++
 .../color-picker/__demo__/only-panel.md       |  26 ++
 .../components/color-picker/__demo__/size.md  |  28 ++
 .../color-picker/__demo__/trigger-element.md  |  38 ++
 .../color-picker/__demo__/trigger.md          |  40 ++
 .../__test__/__snapshots__/demo.test.ts.snap  | 355 ++++++++++++++++++
 .../color-picker/__test__/demo.test.ts        |   3 +
 .../color-picker/__test__/index.test.ts       |  28 ++
 .../components/color-picker/color-picker.tsx  | 260 +++++++++++++
 .../web-vue/components/color-picker/colors.ts |  24 ++
 .../components/color-picker/control-bar.tsx   |  75 ++++
 .../color-picker/hooks/use-control-block.ts   |  62 +++
 .../web-vue/components/color-picker/index.ts  |  18 +
 .../components/color-picker/input-alpha.tsx   |  31 ++
 .../components/color-picker/input-hex.tsx     |  85 +++++
 .../components/color-picker/input-rgb.tsx     |  59 +++
 .../components/color-picker/interface.ts      |  17 +
 .../components/color-picker/palette.tsx       |  48 +++
 .../web-vue/components/color-picker/panel.tsx | 178 +++++++++
 .../components/color-picker/style/index.less  | 308 +++++++++++++++
 .../components/color-picker/style/index.ts    |   2 +
 .../components/color-picker/style/token.less  |  68 ++++
 packages/web-vue/components/components.ts     |   1 +
 packages/web-vue/components/index.less        |   1 +
 packages/web-vue/components/index.ts          |   2 +
 .../web-vue/components/locale/interface.ts    |   5 +
 .../web-vue/components/locale/lang/ar-eg.ts   |   5 +
 .../web-vue/components/locale/lang/de-de.ts   |   5 +
 .../web-vue/components/locale/lang/en-us.ts   |   5 +
 .../web-vue/components/locale/lang/es-es.ts   |   5 +
 .../web-vue/components/locale/lang/fr-fr.ts   |   5 +
 .../web-vue/components/locale/lang/id-id.ts   |   5 +
 .../web-vue/components/locale/lang/it-it.ts   |   5 +
 .../web-vue/components/locale/lang/ja-jp.ts   |   5 +
 .../web-vue/components/locale/lang/km-kh.ts   |   5 +
 .../web-vue/components/locale/lang/ko-kr.ts   |   5 +
 .../web-vue/components/locale/lang/ms-my.ts   |   5 +
 .../web-vue/components/locale/lang/pt-pt.ts   |   5 +
 .../web-vue/components/locale/lang/th-th.ts   |   5 +
 .../web-vue/components/locale/lang/vi-vn.ts   |   5 +
 .../web-vue/components/locale/lang/zh-cn.ts   |   5 +
 .../web-vue/components/locale/lang/zh-tw.ts   |   5 +
 53 files changed, 2329 insertions(+)
 create mode 100644 packages/web-vue/components/_utils/color.ts
 create mode 100644 packages/web-vue/components/color-picker/README.en-US.md
 create mode 100644 packages/web-vue/components/color-picker/README.zh-CN.md
 create mode 100644 packages/web-vue/components/color-picker/TEMPLATE.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/basic.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/colors.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/disabled.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/format.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/only-panel.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/size.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/trigger-element.md
 create mode 100644 packages/web-vue/components/color-picker/__demo__/trigger.md
 create mode 100644 packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
 create mode 100644 packages/web-vue/components/color-picker/__test__/demo.test.ts
 create mode 100644 packages/web-vue/components/color-picker/__test__/index.test.ts
 create mode 100644 packages/web-vue/components/color-picker/color-picker.tsx
 create mode 100644 packages/web-vue/components/color-picker/colors.ts
 create mode 100644 packages/web-vue/components/color-picker/control-bar.tsx
 create mode 100644 packages/web-vue/components/color-picker/hooks/use-control-block.ts
 create mode 100644 packages/web-vue/components/color-picker/index.ts
 create mode 100644 packages/web-vue/components/color-picker/input-alpha.tsx
 create mode 100644 packages/web-vue/components/color-picker/input-hex.tsx
 create mode 100644 packages/web-vue/components/color-picker/input-rgb.tsx
 create mode 100644 packages/web-vue/components/color-picker/interface.ts
 create mode 100644 packages/web-vue/components/color-picker/palette.tsx
 create mode 100644 packages/web-vue/components/color-picker/panel.tsx
 create mode 100644 packages/web-vue/components/color-picker/style/index.less
 create mode 100644 packages/web-vue/components/color-picker/style/index.ts
 create mode 100644 packages/web-vue/components/color-picker/style/token.less

diff --git a/packages/arco-vue-docs/locale/en-us.js b/packages/arco-vue-docs/locale/en-us.js
index 3489462e1..b9f0c9dc0 100644
--- a/packages/arco-vue-docs/locale/en-us.js
+++ b/packages/arco-vue-docs/locale/en-us.js
@@ -94,6 +94,7 @@ export default {
     scrollbar: 'Scrollbar',
     watermark: 'Watermark',
     verificationCode: 'VerificationCode',
+    colorPicker: 'ColorPicker',
   },
   footer: {
     design: 'Design',
diff --git a/packages/arco-vue-docs/locale/zh-cn.js b/packages/arco-vue-docs/locale/zh-cn.js
index 9ff713667..f12fde02f 100644
--- a/packages/arco-vue-docs/locale/zh-cn.js
+++ b/packages/arco-vue-docs/locale/zh-cn.js
@@ -94,6 +94,7 @@ export default {
     scrollbar: '滚动条 Scrollbar',
     watermark: '水印 Watermark',
     verificationCode: '验证码输入框 VerificationCode',
+    colorPicker: '颜色选择器 ColorPicker',
   },
   footer: {
     design: '设计',
diff --git a/packages/arco-vue-docs/router.ts b/packages/arco-vue-docs/router.ts
index 71ae186e4..d3c72f762 100644
--- a/packages/arco-vue-docs/router.ts
+++ b/packages/arco-vue-docs/router.ts
@@ -191,6 +191,10 @@ const VerificationCode = () =>
   import('@web-vue/components/verification-code/README.zh-CN.md');
 const VerificationCodeEn = () =>
   import('@web-vue/components/verification-code/README.en-US.md');
+const ColorPicker = () =>
+  import('@web-vue/components/color-picker/README.zh-CN.md');
+const ColorPickerEn = () =>
+  import('@web-vue/components/color-picker/README.en-US.md');
 
 const docs = [
   {
@@ -459,6 +463,11 @@ const components = [
         component: Checkbox,
         componentEn: CheckboxEn,
       },
+      {
+        name: 'colorPicker',
+        component: ColorPicker,
+        componentEn: ColorPickerEn,
+      },
       {
         name: 'datePicker',
         component: DatePicker,
diff --git a/packages/web-vue/components/_utils/color.ts b/packages/web-vue/components/_utils/color.ts
new file mode 100644
index 000000000..feff96517
--- /dev/null
+++ b/packages/web-vue/components/_utils/color.ts
@@ -0,0 +1,215 @@
+// https://github.com/scttcper/tinycolor
+export const hsvToRgb = (h: number, s: number, v: number) => {
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  };
+};
+
+export const rgbToHsv = (r: number, g: number, b: number) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  const v = max;
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+
+  if (max === min) {
+    h = 0;
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+      default:
+        break;
+    }
+
+    h /= 6;
+  }
+
+  return { h, s, v };
+};
+
+// <http://www.w3.org/TR/css3-values/#integers>
+const CSS_INTEGER = '[-\\+]?\\d+%?';
+
+// <http://www.w3.org/TR/css3-values/#number-value>
+const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
+
+// Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+const CSS_UNIT = `(?:${CSS_NUMBER})|(?:${CSS_INTEGER})`;
+
+// Actual matching.
+// Parentheses and commas are optional, but not required.
+// Whitespace can take the place of commas or opening paren
+const PERMISSIVE_MATCH3 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
+const PERMISSIVE_MATCH4 = `[\\s|\\(]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})[,|\\s]+(${CSS_UNIT})\\s*\\)?`;
+
+const matchers = {
+  rgb: new RegExp(`rgb${PERMISSIVE_MATCH3}`),
+  rgba: new RegExp(`rgba${PERMISSIVE_MATCH4}`),
+  hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+  hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+  hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+};
+
+export const parseIntFromHex = (val: string): number => {
+  return parseInt(val, 16);
+};
+
+export const convertHexToDecimal = (h: string): number => {
+  return parseIntFromHex(h) / 255;
+};
+
+export const formatInputToRgb = (
+  color: string
+): { r: number; g: number; b: number; a?: number } | false => {
+  let match = matchers.rgb.exec(color);
+  if (match) {
+    return {
+      r: parseInt(match[1], 10),
+      g: parseInt(match[2], 10),
+      b: parseInt(match[3], 10),
+    };
+  }
+
+  match = matchers.rgba.exec(color);
+  if (match) {
+    return {
+      r: parseInt(match[1], 10),
+      g: parseInt(match[2], 10),
+      b: parseInt(match[3], 10),
+      a: parseFloat(match[4]),
+    };
+  }
+
+  match = matchers.hex8.exec(color);
+  if (match) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+      a: convertHexToDecimal(match[4]),
+    };
+  }
+
+  match = matchers.hex6.exec(color);
+  if (match) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+    };
+  }
+
+  match = matchers.hex4.exec(color);
+  if (match) {
+    return {
+      r: parseIntFromHex(match[1] + match[1]),
+      g: parseIntFromHex(match[2] + match[2]),
+      b: parseIntFromHex(match[3] + match[3]),
+      a: convertHexToDecimal(match[4] + match[4]),
+    };
+  }
+
+  match = matchers.hex3.exec(color);
+  if (match) {
+    return {
+      r: parseIntFromHex(match[1] + match[1]),
+      g: parseIntFromHex(match[2] + match[2]),
+      b: parseIntFromHex(match[3] + match[3]),
+    };
+  }
+
+  return false;
+};
+
+export const formatInputToHSVA = (color: string) => {
+  const rgba = formatInputToRgb(color);
+  if (rgba) {
+    const hsv = rgbToHsv(rgba.r, rgba.g, rgba.b);
+    return {
+      ...hsv,
+      a: rgba.a ?? 1,
+    };
+  }
+  return {
+    h: 0,
+    s: 1,
+    v: 1,
+    a: 1,
+  };
+};
+
+export const hexToRgb = (color: string): any => {
+  color = color.trim().toLowerCase();
+  if (color.length === 0) {
+    return false;
+  }
+
+  let match = matchers.hex6.exec(color);
+  if (match) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+    };
+  }
+
+  match = matchers.hex3.exec(color);
+  if (match) {
+    return {
+      r: parseIntFromHex(match[1] + match[1]),
+      g: parseIntFromHex(match[2] + match[2]),
+      b: parseIntFromHex(match[3] + match[3]),
+    };
+  }
+
+  return false;
+};
+
+export const rgbToHex = (r: number, g: number, b: number) => {
+  const hex = [
+    Math.round(r).toString(16).padStart(2, '0'),
+    Math.round(g).toString(16).padStart(2, '0'),
+    Math.round(b).toString(16).padStart(2, '0'),
+  ];
+
+  return hex.join('').toUpperCase();
+};
+
+export const rgbaToHex = (r: number, g: number, b: number, a: number) => {
+  const hex = [
+    Math.round(r).toString(16).padStart(2, '0'),
+    Math.round(g).toString(16).padStart(2, '0'),
+    Math.round(b).toString(16).padStart(2, '0'),
+    Math.round(a * 255)
+      .toString(16)
+      .padStart(2, '0'),
+  ];
+
+  return hex.join('').toUpperCase();
+};
diff --git a/packages/web-vue/components/arco-vue.ts b/packages/web-vue/components/arco-vue.ts
index 78935a4ff..a45020b85 100644
--- a/packages/web-vue/components/arco-vue.ts
+++ b/packages/web-vue/components/arco-vue.ts
@@ -16,6 +16,7 @@ import Carousel, { CarouselItem } from './carousel';
 import Cascader, { CascaderPanel } from './cascader';
 import Checkbox, { CheckboxGroup } from './checkbox';
 import Collapse, { CollapseItem } from './collapse';
+import ColorPicker from './color-picker';
 import Comment from './comment';
 import ConfigProvider from './config-provider';
 import DatePicker, {
@@ -116,6 +117,7 @@ const components: Record<string, Plugin> = {
   Carousel,
   Collapse,
   Comment,
+  ColorPicker,
   Descriptions,
   Empty,
   Image,
diff --git a/packages/web-vue/components/color-picker/README.en-US.md b/packages/web-vue/components/color-picker/README.en-US.md
new file mode 100644
index 000000000..cba15faf7
--- /dev/null
+++ b/packages/web-vue/components/color-picker/README.en-US.md
@@ -0,0 +1,47 @@
+```yaml
+meta:
+  type: Component
+  category: Data Entry
+title: ColorPicker
+description: Used for select and display colors.
+```
+
+*Auto translate by google.*
+
+@import ./__demo__/basic.md
+@import ./__demo__/size.md
+@import ./__demo__/disabled.md
+@import ./__demo__/format.md
+@import ./__demo__/colors.md
+@import ./__demo__/trigger.md
+@import ./__demo__/trigger-element.md
+@import ./__demo__/only-panel.md
+
+## API
+
+
+### `<color-picker>` Props
+
+|Attribute|Description|Type|Default|
+|---|---|---|:---:|
+|model-value **(v-model)**|Value|`string`|`-`|
+|default-value|Default value (uncontrolled state)|`string`|`-`|
+|format|Color value format|`'hex' \| 'rgb'`|`-`|
+|size|Size|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|show-text|Show color value|`boolean`|`false`|
+|show-history|Show history colors|`boolean`|`false`|
+|show-preset|Show preset colors|`boolean`|`false`|
+|disabled|disabled|`boolean`|`false`|
+|disabled-alpha|Disable transparency channel|`boolean`|`false`|
+|hide-trigger|There is no trigger element, only the color panel is displayed|`boolean`|`false`|
+|trigger-props|Can accept Props of all [Trigger](/vue/component/trigger) components|`Partial<TriggerProps>`|`-`|
+|history-colors|Color array of historical colors|`string[]`|`-`|
+|preset-colors|Color array of preset colors|`string[]`|`() => colors`|
+### `<color-picker>` Events
+
+|Event Name|Description|Parameters|
+|---|---|---|
+|change|Triggered when the color value changes|value: `string`|
+|popup-visible-change|Triggered when the color panel is expanded and collapsed|visible: `boolean`<br>value: `string`|
+
+
diff --git a/packages/web-vue/components/color-picker/README.zh-CN.md b/packages/web-vue/components/color-picker/README.zh-CN.md
new file mode 100644
index 000000000..b460395b7
--- /dev/null
+++ b/packages/web-vue/components/color-picker/README.zh-CN.md
@@ -0,0 +1,45 @@
+```yaml
+meta:
+  type: 组件
+  category: 数据输入
+title: 颜色选择器 ColorPicker
+description: 用于选择和展示颜色
+```
+
+@import ./__demo__/basic.md
+@import ./__demo__/size.md
+@import ./__demo__/disabled.md
+@import ./__demo__/format.md
+@import ./__demo__/colors.md
+@import ./__demo__/trigger.md
+@import ./__demo__/trigger-element.md
+@import ./__demo__/only-panel.md
+
+## API
+
+
+### `<color-picker>` Props
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|model-value **(v-model)**|绑定值|`string`|`-`|
+|default-value|默认值（非受控状态）|`string`|`-`|
+|format|颜色值的格式|`'hex' \| 'rgb'`|`-`|
+|size|尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
+|show-text|显示颜色值|`boolean`|`false`|
+|show-history|显示历史颜色|`boolean`|`false`|
+|show-preset|显示预设颜色|`boolean`|`false`|
+|disabled|禁用|`boolean`|`false`|
+|disabled-alpha|禁用透明通道|`boolean`|`false`|
+|hide-trigger|没有触发元素，只显示颜色面板|`boolean`|`false`|
+|trigger-props|接受所有 [Trigger](/vue/component/trigger) 组件的Props|`Partial<TriggerProps>`|`-`|
+|history-colors|历史颜色的颜色数组|`string[]`|`-`|
+|preset-colors|预设颜色的颜色数组|`string[]`|`() => colors`|
+### `<color-picker>` Events
+
+|事件名|描述|参数|
+|---|---|---|
+|change|颜色值改变时触发|value: `string`|
+|popup-visible-change|颜色面板展开和收起时触发|visible: `boolean`<br>value: `string`|
+
+
diff --git a/packages/web-vue/components/color-picker/TEMPLATE.md b/packages/web-vue/components/color-picker/TEMPLATE.md
new file mode 100644
index 000000000..79f7151b0
--- /dev/null
+++ b/packages/web-vue/components/color-picker/TEMPLATE.md
@@ -0,0 +1,31 @@
+## zh-CN
+```yaml
+meta:
+  type: 组件
+  category: 数据输入
+title: 颜色选择器 ColorPicker
+description: 用于选择和展示颜色
+```
+---
+## en-US
+```yaml
+meta:
+  type: Component
+  category: Data Entry
+title: ColorPicker
+description: Used for select and display colors.
+```
+---
+
+@import ./__demo__/basic.md
+@import ./__demo__/size.md
+@import ./__demo__/disabled.md
+@import ./__demo__/format.md
+@import ./__demo__/colors.md
+@import ./__demo__/trigger.md
+@import ./__demo__/trigger-element.md
+@import ./__demo__/only-panel.md
+
+## API
+
+%%API(color-picker.tsx)%%
diff --git a/packages/web-vue/components/color-picker/__demo__/basic.md b/packages/web-vue/components/color-picker/__demo__/basic.md
new file mode 100644
index 000000000..45e1473c5
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/basic.md
@@ -0,0 +1,31 @@
+```yaml
+title:
+  zh-CN: 基本使用
+  en-US: Basic Usage
+```
+
+## zh-CN
+
+基本用法
+
+---
+
+## en-US
+
+Basic usage
+
+---
+
+```vue
+<template>
+  <a-space>
+    <a-color-picker  v-model="value" />
+    <a-color-picker defaultValue="#165DFF" showText disabledAlpha/>
+  </a-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const value = ref('#165DFF')
+</script>
+```
diff --git a/packages/web-vue/components/color-picker/__demo__/colors.md b/packages/web-vue/components/color-picker/__demo__/colors.md
new file mode 100644
index 000000000..9fcafcdcb
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/colors.md
@@ -0,0 +1,44 @@
+```yaml
+title:
+  zh-CN: 预设颜色和历史颜色
+  en-US: Preset & History
+```
+
+## zh-CN
+
+通过 `showPreset` 和 `showHistory` 开启预设颜色和历史颜色区域。历史颜色需要用户自行控制展示内容。
+
+---
+
+## en-US
+
+The preset color and history color areas can be opened through `showPreset` and `showHistory`. Historical colors require users to control the display content themselves.
+
+---
+
+```vue
+<template>
+  <a-color-picker
+    defaultValue="#165DFF"
+    :historyColors="history"
+    showHistory
+    showPreset
+    @popup-visible-change="addHistory"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const history = ref(['#165DFF'])
+const addHistory = (visible, color) => {
+  if (!visible) {
+    const index = history.value.indexOf(color);
+    if (index !== -1) {
+      history.value.splice(index, 1);
+    }
+    history.value.unshift(color);
+  }
+}
+</script>
+```
diff --git a/packages/web-vue/components/color-picker/__demo__/disabled.md b/packages/web-vue/components/color-picker/__demo__/disabled.md
new file mode 100644
index 000000000..6bde44b19
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/disabled.md
@@ -0,0 +1,26 @@
+```yaml
+title:
+  zh-CN: 禁用
+  en-US: Disabled
+```
+
+## zh-CN
+
+设置 `disabled` 禁用选择器。
+
+---
+
+## en-US
+
+Set `disabled` to disable the selector.
+
+---
+
+```vue
+<template>
+  <a-space>
+    <a-color-picker defaultValue="#165DFF" disabled />
+    <a-color-picker defaultValue="#165DFF" showText disabled />
+  </a-space>
+</template>
+```
diff --git a/packages/web-vue/components/color-picker/__demo__/format.md b/packages/web-vue/components/color-picker/__demo__/format.md
new file mode 100644
index 000000000..570c54602
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/format.md
@@ -0,0 +1,35 @@
+```yaml
+title:
+  zh-CN: 颜色格式
+  en-US: Color format
+```
+
+## zh-CN
+
+通过 `format` 设置颜色值的格式，支持 `hex` 和 `rgb`。
+
+---
+
+## en-US
+
+Set the format of the color value through `format`, supporting `hex` and `rgb`.
+
+---
+
+```vue
+<template>
+  <a-space direction="vertical">
+    <a-radio-group type="button" v-model="format">
+      <a-radio v-for="item in formatList" :value="item">{{item}}</a-radio>
+    </a-radio-group>
+    <a-color-picker defaultValue="#165DFF" :format="format" showText />
+  </a-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const format = ref('hex')
+const formatList = ['hex', 'rgb']
+</script>
+```
diff --git a/packages/web-vue/components/color-picker/__demo__/only-panel.md b/packages/web-vue/components/color-picker/__demo__/only-panel.md
new file mode 100644
index 000000000..06b14488c
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/only-panel.md
@@ -0,0 +1,26 @@
+```yaml
+title:
+  zh-CN: 只使用面板
+  en-US: Only Panel
+```
+
+## zh-CN
+
+只用颜色选择面板。
+
+---
+
+## en-US
+
+Only use the color selection panel.
+
+---
+
+```vue
+<template>
+  <a-space :size="32">
+    <a-color-picker defaultValue="#165DFF" hideTrigger showHistory showPreset/>
+    <a-color-picker defaultValue="#12D2AC" disabled hideTrigger showPreset/>
+  </a-space>
+</template>
+```
diff --git a/packages/web-vue/components/color-picker/__demo__/size.md b/packages/web-vue/components/color-picker/__demo__/size.md
new file mode 100644
index 000000000..16a908de2
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/size.md
@@ -0,0 +1,28 @@
+```yaml
+title:
+  zh-CN: 尺寸
+  en-US: Size
+```
+
+## zh-CN
+
+颜色选择器定义了四种尺寸（`mini`,`small`, `medium`, `large`），分别为 24px，28px，32px，36px。
+
+---
+
+## en-US
+
+ColorPicker defines four sizes (`mini`, `small`, `medium`, `large`), which are 24px, 28px, 32px, and 36px.
+
+---
+
+```vue
+<template>
+  <a-space>
+    <a-color-picker defaultValue="#165DFF" size="mini" />
+    <a-color-picker defaultValue="#165DFF" size="small" />
+    <a-color-picker defaultValue="#165DFF" size="medium" />
+    <a-color-picker defaultValue="#165DFF" size="large" />
+  </a-space>
+</template>
+```
diff --git a/packages/web-vue/components/color-picker/__demo__/trigger-element.md b/packages/web-vue/components/color-picker/__demo__/trigger-element.md
new file mode 100644
index 000000000..a37495002
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/trigger-element.md
@@ -0,0 +1,38 @@
+```yaml
+title:
+  zh-CN: 自定义触发元素
+  en-US: Customize trigger element
+```
+
+## zh-CN
+
+自定义触发元素。
+
+---
+
+## en-US
+
+Customize trigger element.
+
+---
+
+```vue
+<template>
+  <a-space>
+    <a-color-picker v-model="value" size="mini" >
+      <a-tag :color="value">
+        <template #icon>
+          <icon-bg-colors style="color: #fff" />
+        </template>
+        {{value}}
+      </a-tag>
+    </a-color-picker>
+  </a-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('#165DFF');
+</script>
+```
diff --git a/packages/web-vue/components/color-picker/__demo__/trigger.md b/packages/web-vue/components/color-picker/__demo__/trigger.md
new file mode 100644
index 000000000..5b910372e
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__demo__/trigger.md
@@ -0,0 +1,40 @@
+```yaml
+title:
+  zh-CN: 触发器
+  en-US: Trigger
+```
+
+## zh-CN
+
+可以通过 `trigger-props` 设置触发器的所有属性。
+
+---
+
+## en-US
+
+You can set the properties of the trigger through `trigger-props`.
+
+---
+
+```vue
+<template>
+  <a-space direction="vertical">
+    <a-switch v-model="triggerProps.popupVisible">
+      <template #checked> ON </template>
+      <template #unchecked>OFF</template>
+    </a-switch>
+    <a-color-picker defaultValue="#165DFF" :trigger-props="triggerProps" />
+  </a-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const triggerProps = ref({
+  popupVisible: false,
+  unmountOnClose: true,
+  renderToBody: false,
+  position: 'rt'
+})
+</script>
+```
diff --git a/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 000000000..c11272c13
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,355 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<color-picker> demo: render [basic] correctly 1`] = `
+"<div class=\\"arco-space arco-space-horizontal arco-space-align-center\\">
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-right: 8px;\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-medium\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <!----><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+  <!---->
+  <div class=\\"arco-space-item\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-medium\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <div class=\\"arco-color-picker-value\\">#165DFF</div><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+</div>"
+`;
+
+exports[`<color-picker> demo: render [colors] correctly 1`] = `
+"<div class=\\"arco-color-picker arco-color-picker-size-medium\\">
+  <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+  <!----><input class=\\"arco-color-picker-input\\">
+</div>
+<!---->"
+`;
+
+exports[`<color-picker> demo: render [disabled] correctly 1`] = `
+"<div class=\\"arco-space arco-space-horizontal arco-space-align-center\\">
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-right: 8px;\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-medium arco-color-picker-disabled\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <!----><input class=\\"arco-color-picker-input\\" disabled=\\"\\">
+    </div>
+    <!---->
+  </div>
+  <!---->
+  <div class=\\"arco-space-item\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-medium arco-color-picker-disabled\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <div class=\\"arco-color-picker-value\\">#165DFF</div><input class=\\"arco-color-picker-input\\" disabled=\\"\\">
+    </div>
+    <!---->
+  </div>
+</div>"
+`;
+
+exports[`<color-picker> demo: render [format] correctly 1`] = `
+"<div class=\\"arco-space arco-space-vertical\\">
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-bottom: 8px;\\"><span class=\\"arco-radio-group-button arco-radio-group-size-undefined arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"hex\\"><span class=\\"arco-radio-button-content\\">hex</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"rgb\\"><span class=\\"arco-radio-button-content\\">rgb</span></label></span></div>
+  <!---->
+  <div class=\\"arco-space-item\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-medium\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <div class=\\"arco-color-picker-value\\">#165DFF</div><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+</div>"
+`;
+
+exports[`<color-picker> demo: render [only-panel] correctly 1`] = `
+"<div class=\\"arco-space arco-space-horizontal arco-space-align-center\\">
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-right: 32px;\\">
+    <div class=\\"arco-color-picker-panel\\">
+      <div class=\\"arco-color-picker-palette\\" style=\\"background-color: rgb(0, 78, 255);\\">
+        <div class=\\"arco-color-picker-handler\\" style=\\"top: 0%; left: 91.37254901960785%;\\"></div>
+      </div>
+      <div class=\\"arco-color-picker-panel-control\\">
+        <div class=\\"arco-color-picker-control-wrapper\\">
+          <div>
+            <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-hue\\">
+              <div class=\\"arco-color-picker-handler\\" style=\\"left: 61.587982832618025%; color: rgb(22, 93, 255);\\"></div>
+            </div>
+            <div class=\\"arco-color-picker-control-bar-bg\\">
+              <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha arco-color-picker-control-bar-alpha\\">
+                <div class=\\"arco-color-picker-handler\\" style=\\"left: 100%; color: rgb(22, 93, 255);\\"></div>
+              </div>
+            </div>
+          </div>
+          <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+        </div>
+        <div class=\\"arco-color-picker-input-wrapper\\"><span class=\\"arco-select-view-single arco-select arco-color-picker-select arco-select-view arco-select-view-size-mini\\" title=\\"Hex\\"><!----><input class=\\"arco-select-view-input arco-select-view-input-hidden\\" readonly=\\"\\"><span class=\\"arco-select-view-value\\">Hex</span><span class=\\"arco-select-view-suffix\\"><!----><span class=\\"arco-select-view-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></span>
+          <!----></span></span>
+          <!---->
+          <div class=\\"arco-color-picker-group-wrapper\\">
+            <div class=\\"arco-input-group arco-color-picker-input-group\\"><span class=\\"arco-input-wrapper arco-color-picker-input-hex\\"><span class=\\"arco-input-prefix\\">#</span><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\">
+              <!---->
+              <!----></span><span class=\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\"><!----><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" role=\\"spinbutton\\" aria-valuemax=\\"100\\" aria-valuemin=\\"0\\" aria-valuenow=\\"100\\"><!----><span class=\\"arco-input-suffix\\"><!---->%<div class=\\"arco-input-number-step\\"><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-up\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 30.557 24.043 15 8.487 30.557\\"></path></svg></button><button class=\\"arco-input-number-step-button\\" type=\\"button\\" tabindex=\\"-1\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></button></div><!----></span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"arco-color-picker-panel-colors\\">
+        <div class=\\"arco-color-picker-colors-section\\">
+          <div class=\\"arco-color-picker-colors-text\\">最近使用顏色</div>
+          <div class=\\"arco-color-picker-colors-wrapper\\"><span class=\\"arco-color-picker-colors-empty\\">暂无</span></div>
+        </div>
+        <div class=\\"arco-color-picker-colors-section\\">
+          <div class=\\"arco-color-picker-colors-text\\">系统预设颜色</div>
+          <div class=\\"arco-color-picker-colors-wrapper\\">
+            <div class=\\"arco-color-picker-colors-list\\">
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(0, 180, 42);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(0, 180, 42);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(60, 126, 255);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(60, 126, 255);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(255, 125, 0);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(255, 125, 0);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(247, 105, 101);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(247, 105, 101);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(247, 186, 30);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(247, 186, 30);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(245, 49, 157);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(245, 49, 157);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(217, 26, 217);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(217, 26, 217);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(159, 219, 29);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(159, 219, 29);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(250, 220, 25);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(250, 220, 25);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(114, 46, 209);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(114, 46, 209);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(52, 145, 250);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(52, 145, 250);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(123, 225, 136);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(123, 225, 136);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(147, 190, 255);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(147, 190, 255);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(255, 207, 139);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(255, 207, 139);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(251, 176, 167);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(251, 176, 167);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(252, 233, 150);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(252, 233, 150);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(251, 157, 199);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(251, 157, 199);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(240, 142, 230);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(240, 142, 230);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(220, 241, 144);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(220, 241, 144);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(253, 250, 148);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(253, 250, 148);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(195, 150, 237);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(195, 150, 237);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(159, 212, 253);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(159, 212, 253);\\"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!---->
+  <div class=\\"arco-space-item\\">
+    <div class=\\"arco-color-picker-panel arco-color-picker-panel-disabled\\">
+      <div class=\\"arco-color-picker-palette\\" style=\\"background-color: rgb(0, 255, 205);\\">
+        <div class=\\"arco-color-picker-handler\\" style=\\"top: 17.647058823529417%; left: 91.42857142857143%;\\"></div>
+      </div>
+      <div class=\\"arco-color-picker-panel-control\\">
+        <div class=\\"arco-color-picker-control-wrapper\\">
+          <div>
+            <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-hue\\">
+              <div class=\\"arco-color-picker-handler\\" style=\\"left: 46.70138888888889%; color: rgb(18, 210, 172);\\"></div>
+            </div>
+            <div class=\\"arco-color-picker-control-bar-bg\\">
+              <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha arco-color-picker-control-bar-alpha\\">
+                <div class=\\"arco-color-picker-handler\\" style=\\"left: 100%; color: rgb(18, 210, 172);\\"></div>
+              </div>
+            </div>
+          </div>
+          <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(18, 210, 172);\\"></div>
+        </div>
+        <div class=\\"arco-color-picker-input-wrapper\\"><span class=\\"arco-select-view-single arco-select arco-color-picker-select arco-select-view arco-select-view-size-mini\\" title=\\"Hex\\"><!----><input class=\\"arco-select-view-input arco-select-view-input-hidden\\" readonly=\\"\\"><span class=\\"arco-select-view-value\\">Hex</span><span class=\\"arco-select-view-suffix\\"><!----><span class=\\"arco-select-view-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></span>
+          <!----></span></span>
+          <!---->
+          <div class=\\"arco-color-picker-group-wrapper\\">
+            <div class=\\"arco-input-group arco-color-picker-input-group\\"><span class=\\"arco-input-wrapper arco-input-disabled arco-color-picker-input-hex\\"><span class=\\"arco-input-prefix\\">#</span><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" disabled=\\"\\">
+              <!---->
+              <!----></span><span class=\\"arco-input-wrapper arco-input-disabled arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\"><!----><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" disabled=\\"\\" role=\\"spinbutton\\" aria-valuemax=\\"100\\" aria-valuemin=\\"0\\" aria-valuenow=\\"100\\"><!----><span class=\\"arco-input-suffix\\"><!---->%<div class=\\"arco-input-number-step\\"><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-up\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 30.557 24.043 15 8.487 30.557\\"></path></svg></button><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></button></div><!----></span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"arco-color-picker-panel-colors\\">
+        <!---->
+        <div class=\\"arco-color-picker-colors-section\\">
+          <div class=\\"arco-color-picker-colors-text\\">系统预设颜色</div>
+          <div class=\\"arco-color-picker-colors-wrapper\\">
+            <div class=\\"arco-color-picker-colors-list\\">
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(0, 180, 42);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(0, 180, 42);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(60, 126, 255);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(60, 126, 255);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(255, 125, 0);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(255, 125, 0);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(247, 105, 101);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(247, 105, 101);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(247, 186, 30);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(247, 186, 30);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(245, 49, 157);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(245, 49, 157);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(217, 26, 217);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(217, 26, 217);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(159, 219, 29);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(159, 219, 29);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(250, 220, 25);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(250, 220, 25);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(114, 46, 209);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(114, 46, 209);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(52, 145, 250);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(52, 145, 250);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(123, 225, 136);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(123, 225, 136);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(147, 190, 255);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(147, 190, 255);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(255, 207, 139);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(255, 207, 139);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(251, 176, 167);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(251, 176, 167);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(252, 233, 150);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(252, 233, 150);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(251, 157, 199);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(251, 157, 199);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(240, 142, 230);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(240, 142, 230);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(220, 241, 144);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(220, 241, 144);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(253, 250, 148);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(253, 250, 148);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(195, 150, 237);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(195, 150, 237);\\"></div>
+              </div>
+              <div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(159, 212, 253);\\">
+                <div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(159, 212, 253);\\"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`<color-picker> demo: render [size] correctly 1`] = `
+"<div class=\\"arco-space arco-space-horizontal arco-space-align-center\\">
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-right: 8px;\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-mini\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <!----><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-right: 8px;\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-small\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <!----><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-right: 8px;\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-medium\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <!----><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+  <!---->
+  <div class=\\"arco-space-item\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-large\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <!----><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+</div>"
+`;
+
+exports[`<color-picker> demo: render [trigger] correctly 1`] = `
+"<div class=\\"arco-space arco-space-vertical\\">
+  <!---->
+  <div class=\\"arco-space-item\\" style=\\"margin-bottom: 8px;\\"><button type=\\"button\\" role=\\"switch\\" aria-checked=\\"false\\" class=\\"arco-switch arco-switch-type-circle\\"><span class=\\"arco-switch-handle\\"><span class=\\"arco-switch-handle-icon\\"></span></span><!--  prettier-ignore  --><span class=\\"arco-switch-text-holder\\">OFF</span><span class=\\"arco-switch-text\\">OFF</span></button></div>
+  <!---->
+  <div class=\\"arco-space-item\\">
+    <div class=\\"arco-color-picker arco-color-picker-size-medium\\">
+      <div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(22, 93, 255);\\"></div>
+      <!----><input class=\\"arco-color-picker-input\\">
+    </div>
+    <!---->
+  </div>
+</div>"
+`;
+
+exports[`<color-picker> demo: render [trigger-element] correctly 1`] = `
+"<div class=\\"arco-space arco-space-horizontal arco-space-align-center\\">
+  <!---->
+  <div class=\\"arco-space-item\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked arco-tag-custom-color\\" style=\\"background-color: rgb(22, 93, 255);\\"><span class=\\"arco-tag-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-bg-colors\\" style=\\"color: rgb(255, 255, 255);\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"m9.442 25.25 10.351 10.765a1 1 0 0 0 1.428.014L32 25.25H9.442Z\\" fill=\\"currentColor\\" stroke=\\"none\\"></path><path d=\\"M19 5.25 22.75 9m0 0 12.043 12.043a1 1 0 0 1 0 1.414L32 25.25M22.75 9 8.693 23.057a1 1 0 0 0-.013 1.4l.762.793m0 0 10.351 10.765a1 1 0 0 0 1.428.014L32 25.25m-22.558 0H32M6 42h36\\"></path><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M40.013 29.812 37.201 27l-2.812 2.812a4 4 0 1 0 5.624 0Z\\" fill=\\"currentColor\\" stroke=\\"none\\"></path></svg></span> #165DFF
+    <!--v-if-->
+    <!--v-if--></span>
+    <!---->
+  </div>
+</div>"
+`;
diff --git a/packages/web-vue/components/color-picker/__test__/demo.test.ts b/packages/web-vue/components/color-picker/__test__/demo.test.ts
new file mode 100644
index 000000000..8aad704a0
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__test__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../scripts/demo-test';
+
+demoTest('color-picker');
diff --git a/packages/web-vue/components/color-picker/__test__/index.test.ts b/packages/web-vue/components/color-picker/__test__/index.test.ts
new file mode 100644
index 000000000..3f19e2368
--- /dev/null
+++ b/packages/web-vue/components/color-picker/__test__/index.test.ts
@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import ColorPicker from '../index';
+
+describe('ColorPicker', () => {
+  test('Whether the size is rendered correctly', () => {
+    const wrapper = mount(ColorPicker, {
+      props: {
+        size: 'mini',
+      },
+    });
+    const colorPickerElement = wrapper.find('.arco-color-picker');
+    expect(colorPickerElement.classes()).toContain(
+      `arco-color-picker-size-mini`
+    );
+  });
+
+  test('Whether the disabled is rendered correctly', () => {
+    const wrapper = mount(ColorPicker, {
+      props: {
+        disabled: true,
+      },
+    });
+    const colorPickerElement = wrapper.find('.arco-color-picker');
+    expect(colorPickerElement.classes()).toContain(
+      `arco-color-picker-disabled`
+    );
+  });
+});
diff --git a/packages/web-vue/components/color-picker/color-picker.tsx b/packages/web-vue/components/color-picker/color-picker.tsx
new file mode 100644
index 000000000..eacc46347
--- /dev/null
+++ b/packages/web-vue/components/color-picker/color-picker.tsx
@@ -0,0 +1,260 @@
+import { defineComponent, PropType, computed, reactive, watch } from 'vue';
+import { Size } from '../_utils/constant';
+import { getPrefixCls } from '../_utils/global-config';
+import { colors } from './colors';
+import { HSV } from './interface';
+import Panel from './panel';
+import Trigger, { TriggerProps } from '../trigger';
+import useMergeState from '../_hooks/use-merge-state';
+import useState from '../_hooks/use-state';
+import {
+  formatInputToHSVA,
+  hsvToRgb,
+  rgbaToHex,
+  rgbToHex,
+} from '../_utils/color';
+
+export default defineComponent({
+  name: 'ColorPicker',
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     */
+    modelValue: String,
+    /**
+     * @zh 默认值（非受控状态）
+     * @en Default value (uncontrolled state)
+     */
+    defaultValue: {
+      type: String,
+    },
+    /**
+     * @zh 颜色值的格式
+     * @en Color value format
+     */
+    format: {
+      type: String as PropType<'hex' | 'rgb'>,
+    },
+    /**
+     * @zh 尺寸
+     * @en Size
+     * @values 'mini','small','medium','large'
+     */
+    size: {
+      type: String as PropType<Size>,
+      default: 'medium',
+    },
+    /**
+     * @zh 显示颜色值
+     * @en Show color value
+     */
+    showText: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * @zh 显示历史颜色
+     * @en Show history colors
+     */
+    showHistory: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * @zh 显示预设颜色
+     * @en Show preset colors
+     */
+    showPreset: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * @zh 禁用
+     * @en disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * @zh 禁用透明通道
+     * @en Disable transparency channel
+     */
+    disabledAlpha: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * @zh 没有触发元素，只显示颜色面板
+     * @en There is no trigger element, only the color panel is displayed
+     * */
+    hideTrigger: {
+      type: Boolean,
+    },
+    /**
+     * @zh 接受所有 [Trigger](/vue/component/trigger) 组件的Props
+     * @en Can accept Props of all [Trigger](/vue/component/trigger) components
+     * */
+    triggerProps: {
+      type: Object as PropType<Partial<TriggerProps>>,
+    },
+    /**
+     * @zh 历史颜色的颜色数组
+     * @en Color array of historical colors
+     */
+    historyColors: {
+      type: Array as PropType<string[]>,
+    },
+    /**
+     * @zh 预设颜色的颜色数组
+     * @en Color array of preset colors
+     */
+    presetColors: {
+      type: Array as PropType<string[]>,
+      default: () => colors,
+    },
+  },
+  emits: {
+    'update:modelValue': (value: string) => true,
+    /**
+     * @zh 颜色值改变时触发
+     * @en Triggered when the color value changes
+     * @param {string} value
+     */
+    'change': (value: string) => true,
+    /**
+     * @zh 颜色面板展开和收起时触发
+     * @en Triggered when the color panel is expanded and collapsed
+     * @param {boolean} visible
+     * @param {string} value
+     */
+    'popup-visible-change': (visible: boolean, value: string) => true,
+  },
+  setup(props, { emit, slots }) {
+    const prefixCls = getPrefixCls('color-picker');
+    const [mergeValue, setMergeValue] = useMergeState(
+      props.defaultValue,
+      reactive({ value: props.modelValue })
+    );
+
+    const formatInput = computed(() => {
+      return formatInputToHSVA(mergeValue.value || '');
+    });
+
+    const [alpha, setAlpha] = useState(formatInput.value.a);
+    const [hsv, setHsv] = useState({
+      h: formatInput.value.h,
+      s: formatInput.value.s,
+      v: formatInput.value.v,
+    });
+
+    const color = computed(() => {
+      const rgb = hsvToRgb(hsv.value.h, hsv.value.s, hsv.value.v);
+      const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+      return {
+        hsv: hsv.value,
+        rgb,
+        hex,
+      };
+    });
+
+    const colorString = computed(() => {
+      const { r, g, b } = color.value.rgb;
+      return `rgba(${r}, ${g}, ${b}, ${alpha.value.toFixed(2)})`;
+    });
+
+    const formatValue = computed(() => {
+      const { r, g, b } = color.value.rgb;
+      if (props.format === 'rgb') {
+        return alpha.value < 1 && !props.disabledAlpha
+          ? `rgba(${r}, ${g}, ${b}, ${alpha.value.toFixed(2)})`
+          : `rgb(${r}, ${g}, ${b})`;
+      }
+      return alpha.value < 1 && !props.disabledAlpha
+        ? `#${rgbaToHex(r, g, b, alpha.value)}`
+        : `#${rgbToHex(r, g, b)}`;
+    });
+
+    watch(formatValue, (value) => {
+      setMergeValue(value);
+      emit('update:modelValue', value);
+      emit('change', value);
+    });
+
+    const onHsvChange = (_value: HSV) => {
+      !props.disabled && setHsv(_value);
+    };
+
+    const onAlphaChange = (_value: number) => {
+      !props.disabled && setAlpha(_value);
+    };
+
+    const onPopupVisibleChange = (visible: boolean) => {
+      emit('popup-visible-change', visible, formatValue.value);
+    };
+
+    const renderInput = () => {
+      return (
+        <div
+          class={{
+            [prefixCls]: true,
+            [`${prefixCls}-size-${props.size}`]: props.size,
+            [`${prefixCls}-disabled`]: props.disabled,
+          }}
+        >
+          <div
+            class={`${prefixCls}-preview`}
+            style={{ backgroundColor: formatValue.value }}
+          />
+          {props.showText && (
+            <div class={`${prefixCls}-value`}>{formatValue.value}</div>
+          )}
+          <input
+            class={`${prefixCls}-input`}
+            value={formatValue.value}
+            disabled={props.disabled}
+          />
+        </div>
+      );
+    };
+
+    const renderPanel = () => {
+      return (
+        <Panel
+          color={color.value}
+          alpha={alpha.value}
+          colorString={colorString.value}
+          historyColors={props.historyColors}
+          presetColors={props.presetColors}
+          showHistory={props.showHistory}
+          showPreset={props.showPreset}
+          disabled={props.disabled}
+          disabledAlpha={props.disabledAlpha}
+          format={props.format}
+          onHsvChange={onHsvChange}
+          onAlphaChange={onAlphaChange}
+        />
+      );
+    };
+
+    return () => {
+      return props.hideTrigger ? (
+        renderPanel()
+      ) : (
+        <Trigger
+          v-slots={{ content: renderPanel }}
+          trigger="click"
+          position="bl"
+          animationName="slide-dynamic-origin"
+          popupOffset={4}
+          disabled={props.disabled}
+          onPopupVisibleChange={onPopupVisibleChange}
+          {...props.triggerProps}
+        >
+          {slots.default ? slots.default() : renderInput()}
+        </Trigger>
+      );
+    };
+  },
+});
diff --git a/packages/web-vue/components/color-picker/colors.ts b/packages/web-vue/components/color-picker/colors.ts
new file mode 100644
index 000000000..a8fa5bb01
--- /dev/null
+++ b/packages/web-vue/components/color-picker/colors.ts
@@ -0,0 +1,24 @@
+export const colors = [
+  '#00B42A',
+  '#3C7EFF',
+  '#FF7D00',
+  '#F76965',
+  '#F7BA1E',
+  '#F5319D',
+  '#D91AD9',
+  '#9FDB1D',
+  '#FADC19',
+  '#722ED1',
+  '#3491FA',
+  '#7BE188',
+  '#93BEFF',
+  '#FFCF8B',
+  '#FBB0A7',
+  '#FCE996',
+  '#FB9DC7',
+  '#F08EE6',
+  '#DCF190',
+  '#FDFA94',
+  '#C396ED',
+  '#9FD4FD',
+];
diff --git a/packages/web-vue/components/color-picker/control-bar.tsx b/packages/web-vue/components/color-picker/control-bar.tsx
new file mode 100644
index 000000000..dfa1b13e4
--- /dev/null
+++ b/packages/web-vue/components/color-picker/control-bar.tsx
@@ -0,0 +1,75 @@
+import { defineComponent, PropType, toRefs, computed } from 'vue';
+import { getPrefixCls } from '../_utils/global-config';
+import { Color } from './interface';
+import { useControlBlock } from './hooks/use-control-block';
+
+export default defineComponent({
+  name: 'ControlBar',
+  props: {
+    x: {
+      type: Number,
+      required: true,
+    },
+    color: {
+      type: Object as PropType<Color>,
+      required: true,
+    },
+    colorString: String,
+    type: String as PropType<'hue' | 'alpha'>,
+    onChange: Function as PropType<(x: number) => void>,
+  },
+  setup(props) {
+    const prefixCls = getPrefixCls('color-picker');
+    const rgb = computed(() => props.color.rgb);
+
+    const { blockRef, handlerRef, onMouseDown } = useControlBlock({
+      value: [props.x, 0],
+      onChange: (pos) => props.onChange?.(pos[0]),
+    });
+
+    const renderHandler = () => {
+      return (
+        <div
+          ref={handlerRef}
+          class={`${prefixCls}-handler`}
+          style={{
+            left: `${props.x * 100}%`,
+            color: props.colorString,
+          }}
+        />
+      );
+    };
+
+    return () => {
+      if (props.type === 'alpha') {
+        return (
+          <div class={`${prefixCls}-control-bar-bg`}>
+            <div
+              ref={blockRef}
+              class={[
+                `${prefixCls}-control-bar`,
+                `${prefixCls}-control-bar-alpha`,
+                `${prefixCls}-control-bar-alpha`,
+              ]}
+              style={{
+                background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}))`,
+              }}
+              onMousedown={onMouseDown}
+            >
+              {renderHandler()}
+            </div>
+          </div>
+        );
+      }
+      return (
+        <div
+          ref={blockRef}
+          class={[`${prefixCls}-control-bar`, `${prefixCls}-control-bar-hue`]}
+          onMousedown={onMouseDown}
+        >
+          {renderHandler()}
+        </div>
+      );
+    };
+  },
+});
diff --git a/packages/web-vue/components/color-picker/hooks/use-control-block.ts b/packages/web-vue/components/color-picker/hooks/use-control-block.ts
new file mode 100644
index 000000000..442d10d98
--- /dev/null
+++ b/packages/web-vue/components/color-picker/hooks/use-control-block.ts
@@ -0,0 +1,62 @@
+import { ref } from 'vue';
+
+interface ControlBlockParams {
+  value: [number, number];
+  onChange: (value: [number, number]) => void;
+}
+
+export const useControlBlock = ({ value, onChange }: ControlBlockParams) => {
+  const active = ref(false);
+  const blockRef = ref<HTMLDivElement>();
+  const handlerRef = ref<HTMLDivElement>();
+
+  const getPercentNumber = (value: number, max: number) => {
+    if (value < 0) return 0;
+    if (value > max) return 1;
+    return value / max;
+  };
+
+  const setCurrentPosition = (ev: MouseEvent) => {
+    if (!blockRef.value) return;
+    const { clientX, clientY } = ev;
+    const rect = blockRef.value.getBoundingClientRect();
+    const newValue: [number, number] = [
+      getPercentNumber(clientX - rect.x, rect.width),
+      getPercentNumber(clientY - rect.y, rect.height),
+    ];
+    if (newValue[0] !== value[0] || newValue[1] !== value[1]) {
+      onChange?.(newValue);
+    }
+  };
+
+  const removeListener = () => {
+    active.value = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', removeListener);
+    window.removeEventListener('contextmenu', removeListener);
+  };
+
+  const onMouseDown = (ev: MouseEvent) => {
+    active.value = true;
+    setCurrentPosition(ev);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', removeListener);
+    window.addEventListener('contextmenu', removeListener);
+  };
+
+  function onMouseMove(ev: MouseEvent) {
+    ev.preventDefault();
+    if (ev.buttons > 0) {
+      setCurrentPosition(ev);
+    } else {
+      removeListener();
+    }
+  }
+
+  return {
+    active,
+    blockRef,
+    handlerRef,
+    onMouseDown,
+  };
+};
diff --git a/packages/web-vue/components/color-picker/index.ts b/packages/web-vue/components/color-picker/index.ts
new file mode 100644
index 000000000..038dae9da
--- /dev/null
+++ b/packages/web-vue/components/color-picker/index.ts
@@ -0,0 +1,18 @@
+import type { App } from 'vue';
+import type { ArcoOptions } from '../_utils/types';
+import { setGlobalConfig, getComponentPrefix } from '../_utils/global-config';
+import _ColorPicker from './color-picker';
+
+const ColorPicker = Object.assign(_ColorPicker, {
+  install: (app: App, options?: ArcoOptions) => {
+    setGlobalConfig(app, options);
+    const componentPrefix = getComponentPrefix(options);
+
+    app.component(componentPrefix + _ColorPicker.name, _ColorPicker);
+  },
+});
+
+export type { RGB, HSV, Color } from './interface';
+export type ColorPickerInstance = InstanceType<typeof _ColorPicker>;
+
+export default ColorPicker;
diff --git a/packages/web-vue/components/color-picker/input-alpha.tsx b/packages/web-vue/components/color-picker/input-alpha.tsx
new file mode 100644
index 000000000..15b6ae8d5
--- /dev/null
+++ b/packages/web-vue/components/color-picker/input-alpha.tsx
@@ -0,0 +1,31 @@
+import { defineComponent, PropType } from 'vue';
+import { getPrefixCls } from '../_utils/global-config';
+import InputNumber from '../input-number';
+
+export default defineComponent({
+  name: 'InputAlpha',
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+    disabled: Boolean,
+    onChange: Function as PropType<(value: number) => void>,
+  },
+  setup(props) {
+    const prefixCls = getPrefixCls('color-picker');
+
+    return () => (
+      <InputNumber
+        class={`${prefixCls}-input-alpha`}
+        size="mini"
+        v-slots={{ suffix: () => '%' }}
+        min={0}
+        max={100}
+        disabled={props.disabled}
+        modelValue={Math.round(props.value * 100)}
+        onChange={(a = 100) => props.onChange?.(a / 100)}
+      />
+    );
+  },
+});
diff --git a/packages/web-vue/components/color-picker/input-hex.tsx b/packages/web-vue/components/color-picker/input-hex.tsx
new file mode 100644
index 000000000..0ae3eb771
--- /dev/null
+++ b/packages/web-vue/components/color-picker/input-hex.tsx
@@ -0,0 +1,85 @@
+import { defineComponent, PropType, toRefs, watch } from 'vue';
+import { getPrefixCls } from '../_utils/global-config';
+import { Color, HSV } from './interface';
+import { hexToRgb, rgbToHsv } from '../_utils/color';
+import useState from '../_hooks/use-state';
+import Input, { InputGroup } from '../input';
+import InputAlpha from './input-alpha';
+
+export default defineComponent({
+  name: 'InputHex',
+  props: {
+    color: {
+      type: Object as PropType<Color>,
+      required: true,
+    },
+    alpha: {
+      type: Number,
+      required: true,
+    },
+    disabled: Boolean,
+    disabledAlpha: Boolean,
+    onHsvChange: Function as PropType<(value: HSV) => void>,
+    onAlphaChange: Function as PropType<(value: number) => void>,
+  },
+  setup(props) {
+    const prefixCls = getPrefixCls('color-picker');
+    const { color } = toRefs(props);
+    const [hex, setHex] = useState(color.value.hex);
+
+    const handlerChange = (value: string) => {
+      const _rgb = hexToRgb(value) || { r: 255, g: 0, b: 0 };
+      const hsv = rgbToHsv(_rgb.r, _rgb.g, _rgb.b);
+      props.onHsvChange?.(hsv);
+    };
+
+    const onInputChange = (value: string) => {
+      const matchValue = value.match(/[a-fA-F0-9]*/g)?.join('') ?? '';
+      if (matchValue !== color.value.hex) {
+        handlerChange(matchValue.toUpperCase());
+      }
+    };
+
+    const onPaste = (ev: ClipboardEvent) => {
+      if (!ev.clipboardData) return;
+      let text = ev.clipboardData.getData('Text');
+      if (text.startsWith('#')) {
+        text = text.slice(1);
+      }
+      onInputChange(text);
+      ev.preventDefault();
+    };
+
+    watch(color, () => {
+      if (color.value.hex !== hex.value) {
+        setHex(color.value.hex);
+      }
+    });
+
+    return () => (
+      <InputGroup class={`${prefixCls}-input-group`}>
+        <Input
+          class={`${prefixCls}-input-hex`}
+          v-slots={{ prefix: () => '#' }}
+          size="mini"
+          maxLength={6}
+          disabled={props.disabled}
+          modelValue={hex.value}
+          onInput={setHex}
+          onChange={onInputChange}
+          onBlur={() => handlerChange}
+          onPressEnter={() => handlerChange}
+          // @ts-ignore
+          onPaste={onPaste}
+        />
+        {!props.disabledAlpha && (
+          <InputAlpha
+            disabled={props.disabled}
+            value={props.alpha}
+            onChange={props.onAlphaChange}
+          />
+        )}
+      </InputGroup>
+    );
+  },
+});
diff --git a/packages/web-vue/components/color-picker/input-rgb.tsx b/packages/web-vue/components/color-picker/input-rgb.tsx
new file mode 100644
index 000000000..9eae2afa9
--- /dev/null
+++ b/packages/web-vue/components/color-picker/input-rgb.tsx
@@ -0,0 +1,59 @@
+import { defineComponent, PropType, toRefs } from 'vue';
+import { getPrefixCls } from '../_utils/global-config';
+import { Color, HSV, RGB } from './interface';
+import { rgbToHsv } from '../_utils/color';
+import { InputGroup } from '../input';
+import InputNumber from '../input-number';
+import InputAlpha from './input-alpha';
+
+export default defineComponent({
+  name: 'InputRgb',
+  props: {
+    color: {
+      type: Object as PropType<Color>,
+      required: true,
+    },
+    alpha: {
+      type: Number,
+      required: true,
+    },
+    disabled: Boolean,
+    disabledAlpha: Boolean,
+    onHsvChange: Function as PropType<(value: HSV) => void>,
+    onAlphaChange: Function as PropType<(value: number) => void>,
+  },
+  setup(props) {
+    const prefixCls = getPrefixCls('color-picker');
+    const { color } = toRefs(props);
+
+    const handleChange = (value: Partial<RGB>) => {
+      const newRGB = { ...color.value.rgb, ...value };
+      const hsv = rgbToHsv(newRGB.r, newRGB.g, newRGB.b);
+      props.onHsvChange?.(hsv);
+    };
+
+    return () => (
+      <InputGroup class={`${prefixCls}-input-group`}>
+        {(['r', 'g', 'b'] as Array<keyof RGB>).map((channel) => (
+          <InputNumber
+            key={channel}
+            size="mini"
+            min={0}
+            max={255}
+            disabled={props.disabled}
+            modelValue={color.value.rgb[channel]}
+            hideButton
+            onChange={(val = 0) => handleChange({ [channel]: val })}
+          />
+        ))}
+        {!props.disabledAlpha && (
+          <InputAlpha
+            disabled={props.disabled}
+            value={props.alpha}
+            onChange={props.onAlphaChange}
+          />
+        )}
+      </InputGroup>
+    );
+  },
+});
diff --git a/packages/web-vue/components/color-picker/interface.ts b/packages/web-vue/components/color-picker/interface.ts
new file mode 100644
index 000000000..5b2f0480e
--- /dev/null
+++ b/packages/web-vue/components/color-picker/interface.ts
@@ -0,0 +1,17 @@
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export interface HSV {
+  h: number;
+  s: number;
+  v: number;
+}
+
+export interface Color {
+  hsv: HSV;
+  rgb: RGB;
+  hex: string;
+}
diff --git a/packages/web-vue/components/color-picker/palette.tsx b/packages/web-vue/components/color-picker/palette.tsx
new file mode 100644
index 000000000..d7218dbe5
--- /dev/null
+++ b/packages/web-vue/components/color-picker/palette.tsx
@@ -0,0 +1,48 @@
+import { defineComponent, computed, PropType, toRefs, watch } from 'vue';
+import { getPrefixCls } from '../_utils/global-config';
+import { hsvToRgb } from '../_utils/color';
+import { Color } from './interface';
+import { useControlBlock } from './hooks/use-control-block';
+
+export default defineComponent({
+  name: 'Palette',
+  props: {
+    color: {
+      type: Object as PropType<Color>,
+      required: true,
+    },
+    onChange: Function as PropType<(s: number, v: number) => void>,
+  },
+  setup(props) {
+    const prefixCls = getPrefixCls('color-picker');
+    const hsv = computed(() => props.color.hsv);
+
+    const { blockRef, handlerRef, onMouseDown } = useControlBlock({
+      value: [hsv.value.s, 1 - hsv.value.v],
+      onChange: (value) => props.onChange?.(value[0], 1 - value[1]),
+    });
+
+    const hueColor = computed(() => {
+      const rgb = hsvToRgb(hsv.value.h, 1, 1);
+      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    });
+
+    return () => (
+      <div
+        ref={blockRef}
+        class={`${prefixCls}-palette`}
+        style={{ backgroundColor: hueColor.value }}
+        onMousedown={onMouseDown}
+      >
+        <div
+          ref={handlerRef}
+          class={`${prefixCls}-handler`}
+          style={{
+            top: `${(1 - hsv.value.v) * 100}%`,
+            left: `${hsv.value.s * 100}%`,
+          }}
+        />
+      </div>
+    );
+  },
+});
diff --git a/packages/web-vue/components/color-picker/panel.tsx b/packages/web-vue/components/color-picker/panel.tsx
new file mode 100644
index 000000000..0ec53c519
--- /dev/null
+++ b/packages/web-vue/components/color-picker/panel.tsx
@@ -0,0 +1,178 @@
+import { PropType, computed, defineComponent, ref } from 'vue';
+import { getPrefixCls } from '../_utils/global-config';
+import { hexToRgb, rgbToHsv } from '../_utils/color';
+import { Color, HSV } from './interface';
+import { useI18n } from '../locale';
+import useState from '../_hooks/use-state';
+import ControlBar from './control-bar';
+import Palette from './palette';
+import Select from '../select';
+import InputRgb from './input-rgb';
+import InputHex from './input-hex';
+
+export default defineComponent({
+  name: 'Panel',
+  props: {
+    color: {
+      type: Object as PropType<Color>,
+      required: true,
+    },
+    alpha: {
+      type: Number,
+      required: true,
+    },
+    colorString: String,
+    disabled: Boolean,
+    disabledAlpha: Boolean,
+    showHistory: Boolean,
+    showPreset: Boolean,
+    format: String as PropType<'hex' | 'rgb'>,
+    historyColors: Array as PropType<string[]>,
+    presetColors: Array as PropType<string[]>,
+    onAlphaChange: Function as PropType<(alpha: number) => void>,
+    onHsvChange: Function as PropType<(hsv: HSV) => void>,
+  },
+  setup(props) {
+    const { t } = useI18n();
+    const prefixCls = getPrefixCls('color-picker');
+    const hsv = computed(() => props.color.hsv);
+    const [format, setFormat] = useState<'hex' | 'rgb'>(props.format || 'hex');
+
+    const onChange = (value: any) => {
+      setFormat(value);
+    };
+
+    const showCopy = ref(false);
+
+    const onHexInputChange = (value: string) => {
+      const _rgb = hexToRgb(value) || { r: 255, g: 0, b: 0 };
+      const _hsv = rgbToHsv(_rgb.r, _rgb.g, _rgb.b);
+      props.onHsvChange?.(_hsv);
+    };
+
+    const renderInput = () => {
+      const commonProps = {
+        color: props.color,
+        alpha: props.alpha,
+        disabled: props.disabled,
+        disabledAlpha: props.disabledAlpha,
+        onHsvChange: props.onHsvChange,
+        onAlphaChange: props.onAlphaChange,
+      };
+      if (format.value === 'rgb') {
+        return <InputRgb {...commonProps} />;
+      }
+      return <InputHex {...commonProps} />;
+    };
+
+    const renderColorBlock = (color: string) => {
+      return (
+        <div
+          key={color}
+          class={`${prefixCls}-color-block`}
+          style={{ backgroundColor: color }}
+          onClick={() => onHexInputChange(color)}
+        >
+          <div
+            class={`${prefixCls}-block`}
+            style={{ backgroundColor: color }}
+          />
+        </div>
+      );
+    };
+
+    const renderColorSection = (text: string, colors: string[] | undefined) => (
+      <div class={`${prefixCls}-colors-section`}>
+        <div class={`${prefixCls}-colors-text`}>{text}</div>
+        <div class={`${prefixCls}-colors-wrapper`}>
+          {colors?.length ? (
+            <div class={`${prefixCls}-colors-list`}>
+              {colors.map(renderColorBlock)}
+            </div>
+          ) : (
+            <span class={`${prefixCls}-colors-empty`}>
+              {t('colorPicker.empty')}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+
+    const renderColorSec = () => {
+      if (props.showHistory || props.showPreset) {
+        return (
+          <div class={`${prefixCls}-panel-colors`}>
+            {props.showHistory &&
+              renderColorSection(t('colorPicker.history'), props.historyColors)}
+            {props.showPreset &&
+              renderColorSection(t('colorPicker.preset'), props.presetColors)}
+          </div>
+        );
+      }
+      return null;
+    };
+
+    return () => (
+      <div
+        class={{
+          [`${prefixCls}-panel`]: true,
+          [`${prefixCls}-panel-disabled`]: props.disabled,
+        }}
+      >
+        <Palette
+          color={props.color}
+          onChange={(s, v) => props.onHsvChange?.({ h: hsv.value.h, s, v })}
+        />
+        <div class={`${prefixCls}-panel-control`}>
+          <div class={`${prefixCls}-control-wrapper`}>
+            <div>
+              <ControlBar
+                type="hue"
+                x={hsv.value.h}
+                color={props.color}
+                colorString={props.colorString}
+                onChange={(h) =>
+                  props.onHsvChange?.({ h, s: hsv.value.s, v: hsv.value.v })
+                }
+              />
+              {!props.disabledAlpha && (
+                <ControlBar
+                  type="alpha"
+                  x={props.alpha}
+                  color={props.color}
+                  colorString={props.colorString}
+                  onChange={props.onAlphaChange}
+                />
+              )}
+            </div>
+            <div
+              class={`${prefixCls}-preview`}
+              style={{ backgroundColor: props.colorString }}
+            />
+          </div>
+          <div class={`${prefixCls}-input-wrapper`}>
+            <Select
+              class={`${prefixCls}-select`}
+              size="mini"
+              trigger-props={{ class: `${prefixCls}-select-popup` }}
+              options={[
+                {
+                  value: 'hex',
+                  label: 'Hex',
+                },
+                {
+                  value: 'rgb',
+                  label: 'RGB',
+                },
+              ]}
+              modelValue={format.value}
+              onChange={onChange}
+            />
+            <div class={`${prefixCls}-group-wrapper`}>{renderInput()}</div>
+          </div>
+        </div>
+        {renderColorSec()}
+      </div>
+    );
+  },
+});
diff --git a/packages/web-vue/components/color-picker/style/index.less b/packages/web-vue/components/color-picker/style/index.less
new file mode 100644
index 000000000..e64bf6dda
--- /dev/null
+++ b/packages/web-vue/components/color-picker/style/index.less
@@ -0,0 +1,308 @@
+@import './token.less';
+
+@color-picker-prefix-cls: ~'@{prefix}-color-picker';
+
+.@{color-picker-prefix-cls} {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: @color-input-bg-color;
+  border-radius: @color-input-border-radius;
+
+  &-preview {
+    box-sizing: border-box;
+    border: @color-preview-border-size solid @color-preview-border-color;
+  }
+
+  &-value {
+    margin-left: @color-value-margin-left;
+    color: @color-value-font-color;
+    font-weight: @color-value-font-size;
+  }
+
+  &-input {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--color-fill-3);
+    cursor: pointer;
+  }
+
+  .size-mixin(@size) {
+    height: ~'@{input-size-@{size}-height}';
+    padding: ~'@{color-input-size-@{size}-padding}';
+
+    .@{color-picker-prefix-cls}-preview {
+      width: ~'@{color-preview-size-@{size}}';
+      height: ~'@{color-preview-size-@{size}}';
+    }
+
+    .@{color-picker-prefix-cls}-value {
+      font-size: ~'@{color-value-size-@{size}-font-size}';
+    }
+  }
+
+  &-size-medium {
+    .size-mixin(medium);
+  }
+
+  &-size-mini {
+    .size-mixin(mini);
+  }
+
+  &-size-small {
+    .size-mixin(small);
+  }
+
+  &-size-large {
+    .size-mixin(large);
+  }
+
+  &&-disabled {
+    background-color: @color-input-bg-color;
+    cursor: not-allowed;
+
+    .@{color-picker-prefix-cls}-value {
+      color: @color-value-font-color_disabled;
+    }
+  }
+}
+
+.@{color-picker-prefix-cls}-panel {
+  width: @color-panel-width;
+  background-color: @color-panel-bg-color;
+  border-radius: @color-panel-border-radius;
+  box-shadow: @color-panel-box-shadow;
+
+  .@{color-picker-prefix-cls}-palette {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: @color-palette-height;
+    overflow: hidden;
+    background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
+      linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0%));
+    border-top: 1px solid @color-panel-border-color;
+    border-right: 1px solid @color-panel-border-color;
+    border-left: 1px solid @color-panel-border-color;
+    cursor: pointer;
+
+    .@{color-picker-prefix-cls}-handler {
+      position: absolute;
+      box-sizing: border-box;
+      width: @color-palette-handle-size;
+      height: @color-palette-handle-size;
+      background-color: transparent;
+      border: @color-palette-handle-border-size solid var(--color-bg-white);
+      border-radius: @border-radius-circle;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .@{color-picker-prefix-cls}-panel-control {
+    padding: @color-panel-padding;
+
+    .@{color-picker-prefix-cls}-control-wrapper {
+      display: flex;
+      align-items: center;
+
+      .@{color-picker-prefix-cls}-preview {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: @color-panel-preview-size;
+        height: @color-panel-preview-size;
+        margin-left: auto;
+        color: #fff;
+        font-size: (@color-panel-preview-size / 2);
+        border: 1px solid @color-panel-border-color;
+        border-radius: @border-radius-medium;
+      }
+
+      .@{color-picker-prefix-cls}-control-bar-alpha {
+        margin-top: @color-control-bar-alpha-margin-top;
+      }
+    }
+
+    .@{color-picker-prefix-cls}-input-wrapper {
+      display: flex;
+      margin-top: @color-panel-input-margin-top;
+
+      .@{color-picker-prefix-cls}-group-wrapper {
+        display: flex;
+        flex: 1;
+        margin-left: @color-panel-input-group-margin-left;
+      }
+
+      .@{prefix}-select-view,
+      .@{prefix}-input-wrapper {
+        margin-right: @spacing-none;
+        padding: 0 @spacing-3;
+      }
+
+      .@{prefix}-input-suffix,
+      .@{prefix}-input-prefix,
+      .@{prefix}-select-view-suffix {
+        padding: @spacing-none;
+        font-size: @size-3;
+      }
+    }
+  }
+
+  .@{color-picker-prefix-cls}-panel-colors {
+    padding: @color-panel-padding;
+    border-top: 1px solid var(--color-fill-3);
+
+    .@{color-picker-prefix-cls}-colors-section:not(:first-child) {
+      margin-top: @spacing-6;
+    }
+
+    .@{color-picker-prefix-cls}-colors-text {
+      color: var(--color-text-1);
+      font-weight: @font-weight-400;
+      font-size: @color-panel-section-title-font-size;
+    }
+
+    .@{color-picker-prefix-cls}-colors-empty {
+      margin: @spacing-6 0;
+      color: var(--color-text-3);
+      font-size: @color-panel-empty-font-size;
+    }
+
+    .@{color-picker-prefix-cls}-colors-wrapper {
+      margin-top: @spacing-4;
+    }
+
+    .@{color-picker-prefix-cls}-colors-list {
+      display: flex;
+      flex-wrap: wrap;
+      margin: -8px -4px 0;
+    }
+
+    .@{color-picker-prefix-cls}-color-block {
+      width: @color-panel-block-size;
+      height: @color-panel-block-size;
+      margin: @color-panel-block-margin (@color-panel-block-margin / 2) 0;
+      overflow: hidden;
+      background-image: conic-gradient(
+        rgba(0, 0, 0, 6%) 0 25%,
+        transparent 0 50%,
+        rgba(0, 0, 0, 6%) 0 75%,
+        transparent 0
+      );
+      background-size: 8px 8px;
+      border-radius: @color-panel-block-border-radius;
+      cursor: pointer;
+      transition: transform ease-out 60ms;
+
+      .@{color-picker-prefix-cls}-block {
+        width: 100%;
+        height: 100%;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .@{color-picker-prefix-cls}-control-bar-bg {
+    background-image: conic-gradient(
+      rgba(0, 0, 0, 6%) 0 25%,
+      transparent 0 50%,
+      rgba(0, 0, 0, 6%) 0 75%,
+      transparent 0
+    );
+    background-size: 8px 8px;
+  }
+
+  .@{color-picker-prefix-cls}-control-bar {
+    position: relative;
+    box-sizing: border-box;
+    width: @color-control-bar-width;
+    height: @color-control-bar-height;
+    border: 1px solid @color-panel-border-color;
+    border-radius: 10px;
+    cursor: pointer;
+
+    .@{color-picker-prefix-cls}-handler {
+      position: absolute;
+      top: -2px;
+      box-sizing: border-box;
+      width: @color-control-bar-handle-size;
+      height: @color-control-bar-handle-size;
+      background-color: var(--color-bg-white);
+      border: 1px solid var(--color-border-2);
+      border-radius: @border-radius-circle;
+      transform: translateX(-50%);
+
+      &::before {
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: var(--color-bg-white);
+        border-radius: @border-radius-circle;
+        content: '';
+      }
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: @color-control-bar-handle-size - 8;
+        height: @color-control-bar-handle-size - 8;
+        background: currentColor;
+        border-radius: @border-radius-circle;
+        transform: translate(-50%, -50%);
+        content: '';
+      }
+    }
+
+    &-hue {
+      background: linear-gradient(
+        90deg,
+        #f00 0,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        #f00
+      );
+    }
+  }
+
+  .@{color-picker-prefix-cls}-select {
+    width: @color-panel-format-select-width;
+  }
+
+  .@{color-picker-prefix-cls}-input-alpha {
+    flex: 0 0 auto;
+    width: @color-panel-alpha-input-width;
+  }
+
+  .@{color-picker-prefix-cls}-input-hex {
+    .@{prefix}-input {
+      padding-left: @spacing-2;
+    }
+  }
+
+  &&-disabled {
+    .@{color-picker-prefix-cls}-palette,
+    .@{color-picker-prefix-cls}-control-bar,
+    .@{color-picker-prefix-cls}-color-block,
+    .@{color-picker-prefix-cls}-preview {
+      cursor: not-allowed;
+      opacity: 0.8;
+    }
+  }
+}
+
+.@{color-picker-prefix-cls}-select-popup {
+  & .@{prefix}-select-option {
+    font-size: @font-size-body-1 !important;
+    line-height: @size-mini !important;
+  }
+}
diff --git a/packages/web-vue/components/color-picker/style/index.ts b/packages/web-vue/components/color-picker/style/index.ts
new file mode 100644
index 000000000..3a3ab0de5
--- /dev/null
+++ b/packages/web-vue/components/color-picker/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
diff --git a/packages/web-vue/components/color-picker/style/token.less b/packages/web-vue/components/color-picker/style/token.less
new file mode 100644
index 000000000..229960947
--- /dev/null
+++ b/packages/web-vue/components/color-picker/style/token.less
@@ -0,0 +1,68 @@
+@import '../../style/theme/index.less';
+
+@color-preview-size-mini: @size-4;
+@color-preview-size-small: 22px;
+@color-preview-size-medium: @size-6;
+@color-preview-size-large: 26px;
+
+@color-input-size-mini-padding: (
+    (@input-size-mini-height - @color-preview-size-mini) / 2
+  )
+  @spacing-2;
+@color-input-size-small-padding: (
+    (@input-size-small-height - @color-preview-size-small) / 2
+  )
+  @spacing-2;
+@color-input-size-medium-padding: (
+    (@input-size-medium-height - @color-preview-size-medium) / 2
+  )
+  @spacing-2;
+@color-input-size-large-padding: (
+    (@input-size-large-height - @color-preview-size-large) / 2
+  )
+  5px;
+
+@color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@color-value-margin-left: @spacing-2;
+@color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
+@color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+@color-value-size-mini-font-size: @font-size-body-1;
+@color-value-size-small-font-size: @font-size-body-3;
+@color-value-size-medium-font-size: @font-size-body-3;
+@color-value-size-large-font-size: @font-size-body-3;
+
+@color-input-border-radius: @border-radius-small;
+@color-preview-border-size: @border-1;
+@color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
+@color-value-font-size: @font-weight-400;
+
+@color-panel-width: 260px;
+@color-panel-padding: @spacing-6;
+@color-panel-border-radius: @border-radius-small;
+@color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');
+@color-panel-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 10%);
+
+@color-palette-height: 178px;
+@color-palette-handle-size: @size-4;
+@color-palette-handle-border-size: @border-2;
+
+@color-control-bar-width: 182px;
+@color-control-bar-height: 14px;
+@color-control-bar-handle-size: @size-4;
+@color-control-bar-alpha-margin-top: @spacing-6;
+
+@color-panel-input-margin-top: @spacing-6;
+@color-panel-input-group-margin-left: @spacing-6;
+@color-panel-preview-size: 40px;
+@color-panel-format-select-width: 58px;
+@color-panel-alpha-input-width: 52px;
+
+@color-panel-section-title-font-size: @font-size-caption;
+@color-panel-empty-font-size: @font-size-body-1;
+
+@color-panel-block-size: @size-4;
+@color-panel-block-margin: @spacing-3;
+@color-panel-block-border-radius: @border-2;
+
+@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
diff --git a/packages/web-vue/components/components.ts b/packages/web-vue/components/components.ts
index ff79473fd..61fac14ef 100644
--- a/packages/web-vue/components/components.ts
+++ b/packages/web-vue/components/components.ts
@@ -31,6 +31,7 @@ declare module '@vue/runtime-core' {
     ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup'];
     ACollapse: typeof import('@arco-design/web-vue')['Collapse'];
     ACollapseItem: typeof import('@arco-design/web-vue')['CollapseItem'];
+    AColorPicker: typeof import('@arco-design/web-vue')['ColorPicker'];
     AComment: typeof import('@arco-design/web-vue')['Comment'];
     AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider'];
     ADatePicker: typeof import('@arco-design/web-vue')['DatePicker'];
diff --git a/packages/web-vue/components/index.less b/packages/web-vue/components/index.less
index e3c8f9ca7..bb8d01c5e 100644
--- a/packages/web-vue/components/index.less
+++ b/packages/web-vue/components/index.less
@@ -19,6 +19,7 @@
 @import './cascader/style/index.less';
 @import './checkbox/style/index.less';
 @import './collapse/style/index.less';
+@import './color-picker/style/index.less';
 @import './comment/style/index.less';
 @import './date-picker/style/index.less';
 @import './descriptions/style/index.less';
diff --git a/packages/web-vue/components/index.ts b/packages/web-vue/components/index.ts
index 5acb1d379..2abe9acdd 100644
--- a/packages/web-vue/components/index.ts
+++ b/packages/web-vue/components/index.ts
@@ -49,6 +49,8 @@ export { default as Collapse, CollapseItem } from './collapse';
 export type { CollapseInstance, CollapseItemInstance } from './collapse';
 export { default as Comment } from './comment';
 export type { CommentInstance } from './comment';
+export { default as ColorPicker } from './color-picker';
+export type { ColorPickerInstance } from './color-picker';
 export { default as ConfigProvider } from './config-provider';
 export type { ConfigProviderInstance } from './config-provider';
 export {
diff --git a/packages/web-vue/components/locale/interface.ts b/packages/web-vue/components/locale/interface.ts
index 8db5b82a3..af7d3d9bb 100644
--- a/packages/web-vue/components/locale/interface.ts
+++ b/packages/web-vue/components/locale/interface.ts
@@ -195,6 +195,11 @@ export interface ArcoLang {
   form?: {
     validateMessages: ValidateMessage;
   };
+  colorPicker: {
+    history: string;
+    preset: string;
+    empty: string;
+  };
 }
 
 export type ArcoI18nMessages = Record<string, ArcoLang>;
diff --git a/packages/web-vue/components/locale/lang/ar-eg.ts b/packages/web-vue/components/locale/lang/ar-eg.ts
index 5884726c5..324f10325 100644
--- a/packages/web-vue/components/locale/lang/ar-eg.ts
+++ b/packages/web-vue/components/locale/lang/ar-eg.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     collapse: 'يطوى',
     expand: 'وسعت',
   },
+  colorPicker: {
+    history: 'ألوان تاريخية',
+    preset: 'ألوان النظام المضبوطة مسبقاً',
+    empty: 'غير متوفرة',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/de-de.ts b/packages/web-vue/components/locale/lang/de-de.ts
index 977d06560..62a6ce3aa 100644
--- a/packages/web-vue/components/locale/lang/de-de.ts
+++ b/packages/web-vue/components/locale/lang/de-de.ts
@@ -147,6 +147,11 @@ const lang: ArcoLang = {
     collapse: 'Falten',
     expand: 'Erweitern',
   },
+  colorPicker: {
+    history: 'Historische Farben',
+    preset: 'Standardfarbe des Systems',
+    empty: 'Noch keine',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/en-us.ts b/packages/web-vue/components/locale/lang/en-us.ts
index 4fa2d58fb..1dffbd19c 100644
--- a/packages/web-vue/components/locale/lang/en-us.ts
+++ b/packages/web-vue/components/locale/lang/en-us.ts
@@ -151,6 +151,11 @@ const lang: ArcoLang = {
   form: {
     validateMessages: DefaultValidateMessage,
   },
+  colorPicker: {
+    history: 'History Colors',
+    preset: 'Preset Colors',
+    empty: 'Empty',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/es-es.ts b/packages/web-vue/components/locale/lang/es-es.ts
index 4947d01d6..484640fd9 100644
--- a/packages/web-vue/components/locale/lang/es-es.ts
+++ b/packages/web-vue/components/locale/lang/es-es.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     expand: 'Expandir',
     collapse: 'Pliegue',
   },
+  colorPicker: {
+    history: 'Colores históricos',
+    preset: 'Colores predefinidos del sistema',
+    empty: 'No hay datos',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/fr-fr.ts b/packages/web-vue/components/locale/lang/fr-fr.ts
index e5bb45d1a..bf6bf42e5 100644
--- a/packages/web-vue/components/locale/lang/fr-fr.ts
+++ b/packages/web-vue/components/locale/lang/fr-fr.ts
@@ -148,6 +148,11 @@ const lang: ArcoLang = {
     collapse: 'Plier',
     expand: 'Étendre',
   },
+  colorPicker: {
+    history: 'Couleurs historiques',
+    preset: 'Couleurs prédéfinies par le système',
+    empty: 'Aucune donnée',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/id-id.ts b/packages/web-vue/components/locale/lang/id-id.ts
index 210e4795a..f19b13dd8 100644
--- a/packages/web-vue/components/locale/lang/id-id.ts
+++ b/packages/web-vue/components/locale/lang/id-id.ts
@@ -147,6 +147,11 @@ const lang: ArcoLang = {
     collapse: 'Melipat',
     expand: 'Membuka',
   },
+  colorPicker: {
+    history: 'Warna sejarah',
+    preset: 'Sistem preset warna',
+    empty: 'Tidak ada data',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/it-it.ts b/packages/web-vue/components/locale/lang/it-it.ts
index bb8f3acab..6afd3e97d 100644
--- a/packages/web-vue/components/locale/lang/it-it.ts
+++ b/packages/web-vue/components/locale/lang/it-it.ts
@@ -147,6 +147,11 @@ const lang: ArcoLang = {
     collapse: 'Piega',
     expand: 'Espandi',
   },
+  colorPicker: {
+    history: 'Colori storici',
+    preset: 'Colori preimpostati dal sistema',
+    empty: 'Nessun dato',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/ja-jp.ts b/packages/web-vue/components/locale/lang/ja-jp.ts
index 51661c22a..a0ddb5565 100644
--- a/packages/web-vue/components/locale/lang/ja-jp.ts
+++ b/packages/web-vue/components/locale/lang/ja-jp.ts
@@ -194,6 +194,11 @@ const lang: ArcoLang = {
       },
     },
   },
+  colorPicker: {
+    history: '最近使用した色',
+    preset: 'システムのデフォルトの色',
+    empty: '空の',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/km-kh.ts b/packages/web-vue/components/locale/lang/km-kh.ts
index d9dfa0f9a..e7e42288e 100644
--- a/packages/web-vue/components/locale/lang/km-kh.ts
+++ b/packages/web-vue/components/locale/lang/km-kh.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     collapse: 'បង្រួម',
     edit: 'កែសម្រួល',
   },
+  colorPicker: {
+    history: 'ពណ៌ ប្រវត្តិសាស្ត្រ',
+    preset: 'ប្រព័ន្ធ កំណត់ ពណ៌',
+    empty: 'គ្មាន​ទិន្នន័យ',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/ko-kr.ts b/packages/web-vue/components/locale/lang/ko-kr.ts
index 38322f5e3..be5636f95 100644
--- a/packages/web-vue/components/locale/lang/ko-kr.ts
+++ b/packages/web-vue/components/locale/lang/ko-kr.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     collapse: '겹',
     expand: '전개 하 다',
   },
+  colorPicker: {
+    history: '최근 색상 사용',
+    preset: '시스템 기본 색상',
+    empty: '데이터 없음',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/ms-my.ts b/packages/web-vue/components/locale/lang/ms-my.ts
index 5e43a52ab..04f343d3d 100644
--- a/packages/web-vue/components/locale/lang/ms-my.ts
+++ b/packages/web-vue/components/locale/lang/ms-my.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     expand: 'lipat',
     collapse: 'mengembang',
   },
+  colorPicker: {
+    history: 'Warna yang digunakan baru-baru ini',
+    preset: 'Warna lalai sistem',
+    empty: 'Tiada data',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/pt-pt.ts b/packages/web-vue/components/locale/lang/pt-pt.ts
index 87650cea6..189d8f9c1 100644
--- a/packages/web-vue/components/locale/lang/pt-pt.ts
+++ b/packages/web-vue/components/locale/lang/pt-pt.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     collapse: 'dobrar',
     edit: 'Editar',
   },
+  colorPicker: {
+    history: 'Cores usadas recentemente',
+    preset: 'Cor padrão do sistema',
+    empty: 'Sem dados',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/th-th.ts b/packages/web-vue/components/locale/lang/th-th.ts
index a72a7bb71..5925a0bab 100644
--- a/packages/web-vue/components/locale/lang/th-th.ts
+++ b/packages/web-vue/components/locale/lang/th-th.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     collapse: 'พับ',
     expand: 'แฉ',
   },
+  colorPicker: {
+    history: 'สีที่ใช้ล่าสุด',
+    preset: 'สี ที่ตั้งไว้สำหรับระบบ',
+    empty: 'ไม่มีข้อมูล',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/vi-vn.ts b/packages/web-vue/components/locale/lang/vi-vn.ts
index 45b400e4c..c5eb46cd8 100644
--- a/packages/web-vue/components/locale/lang/vi-vn.ts
+++ b/packages/web-vue/components/locale/lang/vi-vn.ts
@@ -146,6 +146,11 @@ const lang: ArcoLang = {
     collapse: 'Thu gọn',
     edit: 'Chỉnh sửa',
   },
+  colorPicker: {
+    history: 'Màu sắc được sử dụng gần đây',
+    preset: 'Màu mặc định của hệ thống',
+    empty: 'Không có dữ liệu',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/zh-cn.ts b/packages/web-vue/components/locale/lang/zh-cn.ts
index 5c9418cc3..f6c466c66 100644
--- a/packages/web-vue/components/locale/lang/zh-cn.ts
+++ b/packages/web-vue/components/locale/lang/zh-cn.ts
@@ -194,6 +194,11 @@ const lang: ArcoLang = {
       },
     },
   },
+  colorPicker: {
+    history: '最近使用顏色',
+    preset: '系统预设颜色',
+    empty: '暂无',
+  },
 };
 
 export default lang;
diff --git a/packages/web-vue/components/locale/lang/zh-tw.ts b/packages/web-vue/components/locale/lang/zh-tw.ts
index e05dd6bb6..108d1789c 100644
--- a/packages/web-vue/components/locale/lang/zh-tw.ts
+++ b/packages/web-vue/components/locale/lang/zh-tw.ts
@@ -194,6 +194,11 @@ const lang: ArcoLang = {
       },
     },
   },
+  colorPicker: {
+    history: '最近使用顏色',
+    preset: '系統預設顏色',
+    empty: '暫無',
+  },
 };
 
 export default lang;

From 4268927138abf225c674e4ddfab8a2e7fcb942f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 15 Mar 2024 17:52:17 +0800
Subject: [PATCH 17/45] fix(tabs): fix transition animation for tab title
 (#3008)

---
 packages/web-vue/components/tabs/style/index.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/components/tabs/style/index.less b/packages/web-vue/components/tabs/style/index.less
index 38dfb461d..0efc6f4b3 100644
--- a/packages/web-vue/components/tabs/style/index.less
+++ b/packages/web-vue/components/tabs/style/index.less
@@ -211,7 +211,8 @@
         background-color: @tabs-line-color-title-bg;
         border-radius: @tabs-line-border-radius;
         opacity: 1;
-        transition: background-color,
+        transition: background-color @transition-duration-2
+            @transition-timing-function-linear,
           opacity @transition-duration-2 @transition-timing-function-linear;
         content: '';
       }

From faf3ce8cdb10bdda25b5217d6c13c0d7ce2e95c7 Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Fri, 15 Mar 2024 18:46:33 +0800
Subject: [PATCH 18/45] release version

---
 .../src/scripts/changelog/utils.ts              |  1 +
 packages/web-vue/CHANGELOG.md                   | 15 +++++++++++++++
 packages/web-vue/CHANGELOG.zh-CN.md             | 15 +++++++++++++++
 .../components/color-picker/CHANGELOG.md        | 12 ++++++++++++
 .../components/color-picker/CHANGELOG.zh-CN.md  | 12 ++++++++++++
 .../__test__/__snapshots__/demo.test.ts.snap    |  4 ++--
 packages/web-vue/components/tabs/CHANGELOG.md   |  9 +++++++++
 .../web-vue/components/tabs/CHANGELOG.zh-CN.md  |  9 +++++++++
 .../web-vue/components/tree-select/CHANGELOG.md |  9 +++++++++
 .../components/tree-select/CHANGELOG.zh-CN.md   |  9 +++++++++
 .../components/tree-select/README.en-US.md      | 17 ++++++++++-------
 .../components/tree-select/README.zh-CN.md      | 17 ++++++++++-------
 packages/web-vue/components/tree/CHANGELOG.md   |  9 +++++++++
 .../web-vue/components/tree/CHANGELOG.zh-CN.md  |  9 +++++++++
 .../web-vue/components/tree/README.en-US.md     |  2 +-
 .../web-vue/components/tree/README.zh-CN.md     |  2 +-
 packages/web-vue/package.json                   |  2 +-
 17 files changed, 134 insertions(+), 19 deletions(-)
 create mode 100644 packages/web-vue/components/color-picker/CHANGELOG.md
 create mode 100644 packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md

diff --git a/packages/arco-vue-scripts/src/scripts/changelog/utils.ts b/packages/arco-vue-scripts/src/scripts/changelog/utils.ts
index 2aa2cbbea..98fc92ff1 100644
--- a/packages/arco-vue-scripts/src/scripts/changelog/utils.ts
+++ b/packages/arco-vue-scripts/src/scripts/changelog/utils.ts
@@ -71,6 +71,7 @@ const componentList = [
   'overflow-list',
   'scrollbar',
   'watermark',
+  'color-picker',
 ];
 
 export const isValidComponent = (component: string) => {
diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index 86f1ebdc3..97ccacc6f 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,21 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 Feature
+
+- **tree-select:** Added `input-value` related properties ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+- **tree:** The `title` slot has a new `title` parameter ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+- **color-picker:** add color-picker component ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))
+
+### 💅 Style
+
+- **tabs:** fix transition animation for tab title ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index 8600d143c..e8312672c 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,21 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 新增功能
+
+- **tree-select:** 新增 `input-value` 相关属性 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+- **tree:** `title` 插槽新增 `title` 参数 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+- **color-picker:** 新增颜色选择器 ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))
+
+### 💅 样式更新
+
+- **tabs:** 修复 title 过渡动画效果 ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.md b/packages/web-vue/components/color-picker/CHANGELOG.md
new file mode 100644
index 000000000..8eb1c9e6d
--- /dev/null
+++ b/packages/web-vue/components/color-picker/CHANGELOG.md
@@ -0,0 +1,12 @@
+```yaml
+changelog: true
+```
+
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 Feature
+
+- add color-picker component ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))
+
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
new file mode 100644
index 000000000..995d131a7
--- /dev/null
+++ b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
@@ -0,0 +1,12 @@
+```yaml
+changelog: true
+```
+
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 新增功能
+
+- 新增颜色选择器 ([#2958](https://github.com/arco-design/arco-design-vue/pull/2958))
+
diff --git a/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
index c11272c13..4b3e72836 100644
--- a/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
+++ b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
@@ -93,7 +93,7 @@ exports[`<color-picker> demo: render [only-panel] correctly 1`] = `
           <div class=\\"arco-color-picker-group-wrapper\\">
             <div class=\\"arco-input-group arco-color-picker-input-group\\"><span class=\\"arco-input-wrapper arco-color-picker-input-hex\\"><span class=\\"arco-input-prefix\\">#</span><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\">
               <!---->
-              <!----></span><span class=\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\"><!----><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" role=\\"spinbutton\\" aria-valuemax=\\"100\\" aria-valuemin=\\"0\\" aria-valuenow=\\"100\\"><!----><span class=\\"arco-input-suffix\\"><!---->%<div class=\\"arco-input-number-step\\"><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-up\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 30.557 24.043 15 8.487 30.557\\"></path></svg></button><button class=\\"arco-input-number-step-button\\" type=\\"button\\" tabindex=\\"-1\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></button></div><!----></span></span>
+              <!----></span><span class=\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\"><!----><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" role=\\"spinbutton\\" aria-valuemax=\\"100\\" aria-valuemin=\\"0\\" aria-valuenow=\\"100\\"><!----><span class=\\"arco-input-suffix\\"><!----><div class=\\"arco-input-number-suffix\\">%</div><div class=\\"arco-input-number-step\\"><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-up\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 30.557 24.043 15 8.487 30.557\\"></path></svg></button><button class=\\"arco-input-number-step-button\\" type=\\"button\\" tabindex=\\"-1\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></button></div><!----></span></span>
             </div>
           </div>
         </div>
@@ -205,7 +205,7 @@ exports[`<color-picker> demo: render [only-panel] correctly 1`] = `
           <div class=\\"arco-color-picker-group-wrapper\\">
             <div class=\\"arco-input-group arco-color-picker-input-group\\"><span class=\\"arco-input-wrapper arco-input-disabled arco-color-picker-input-hex\\"><span class=\\"arco-input-prefix\\">#</span><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" disabled=\\"\\">
               <!---->
-              <!----></span><span class=\\"arco-input-wrapper arco-input-disabled arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\"><!----><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" disabled=\\"\\" role=\\"spinbutton\\" aria-valuemax=\\"100\\" aria-valuemin=\\"0\\" aria-valuenow=\\"100\\"><!----><span class=\\"arco-input-suffix\\"><!---->%<div class=\\"arco-input-number-step\\"><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-up\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 30.557 24.043 15 8.487 30.557\\"></path></svg></button><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></button></div><!----></span></span>
+              <!----></span><span class=\\"arco-input-wrapper arco-input-disabled arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\"><!----><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" disabled=\\"\\" role=\\"spinbutton\\" aria-valuemax=\\"100\\" aria-valuemin=\\"0\\" aria-valuenow=\\"100\\"><!----><span class=\\"arco-input-suffix\\"><!----><div class=\\"arco-input-number-suffix\\">%</div><div class=\\"arco-input-number-step\\"><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-up\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 30.557 24.043 15 8.487 30.557\\"></path></svg></button><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></button></div><!----></span></span>
             </div>
           </div>
         </div>
diff --git a/packages/web-vue/components/tabs/CHANGELOG.md b/packages/web-vue/components/tabs/CHANGELOG.md
index ffa9fcad6..b8ec2346e 100644
--- a/packages/web-vue/components/tabs/CHANGELOG.md
+++ b/packages/web-vue/components/tabs/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 💅 Style
+
+- fix transition animation for tab title ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))
+
+
 ## 2.45.1
 
 `2023-04-14`
diff --git a/packages/web-vue/components/tabs/CHANGELOG.zh-CN.md b/packages/web-vue/components/tabs/CHANGELOG.zh-CN.md
index d367c8964..cf22bca81 100644
--- a/packages/web-vue/components/tabs/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/tabs/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 💅 样式更新
+
+- 修复 title 过渡动画效果 ([#3008](https://github.com/arco-design/arco-design-vue/pull/3008))
+
+
 ## 2.45.1
 
 `2023-04-14`
diff --git a/packages/web-vue/components/tree-select/CHANGELOG.md b/packages/web-vue/components/tree-select/CHANGELOG.md
index 7b491d285..e756449e4 100644
--- a/packages/web-vue/components/tree-select/CHANGELOG.md
+++ b/packages/web-vue/components/tree-select/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 Feature
+
+- Added `input-value` related properties ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+
+
 ## 2.49.1
 
 `2023-07-24`
diff --git a/packages/web-vue/components/tree-select/CHANGELOG.zh-CN.md b/packages/web-vue/components/tree-select/CHANGELOG.zh-CN.md
index 761966bb1..55bc19472 100644
--- a/packages/web-vue/components/tree-select/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/tree-select/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 新增功能
+
+- 新增 `input-value` 相关属性 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+
+
 ## 2.49.1
 
 `2023-07-24`
diff --git a/packages/web-vue/components/tree-select/README.en-US.md b/packages/web-vue/components/tree-select/README.en-US.md
index 1faab0583..115f69b9b 100644
--- a/packages/web-vue/components/tree-select/README.en-US.md
+++ b/packages/web-vue/components/tree-select/README.en-US.md
@@ -80,14 +80,17 @@ description: The tree structure data can be selected.
 |scrollbar|Whether to enable virtual scroll bar|`boolean \| ScrollbarProps`|`true`|2.39.0|
 |show-header-on-empty|Whether to display the header in the empty state|`boolean`|`false`||
 |show-footer-on-empty|Whether to display the footer in the empty state|`boolean`|`false`||
+|input-value **(v-model)**|The value of the input|`string`|`-`|2.55.0|
+|default-input-value|The default value of the input (uncontrolled mode)|`string`|`''`|2.55.0|
 ### `<tree-select>` Events
 
-|Event Name|Description|Parameters|
-|---|---|---|
-|change|Trigger when the value changes|value: `string \| number \| LabelValue \| Array<string \| number> \| LabelValue[] \| undefined`|
-|popup-visible-change|Triggered when the status of the drop-down box changes|visible: `boolean`|
-|search|Triggered when the search value changes|searchKey: `string`|
-|clear|Triggered when clear is clicked|-|
+|Event Name|Description|Parameters|version|
+|---|---|---|:---|
+|change|Trigger when the value changes|value: `string \| number \| LabelValue \| Array<string \| number> \| LabelValue[] \| undefined`||
+|popup-visible-change|Triggered when the status of the drop-down box changes|visible: `boolean`||
+|search|Triggered when the search value changes|searchKey: `string`||
+|clear|Triggered when clear is clicked|-||
+|input-value-change|Triggered when the value of the input changes|inputValue: `string`|2.55.0|
 ### `<tree-select>` Slots
 
 |Slot Name|Description|Parameters|version|
@@ -100,7 +103,7 @@ description: The tree structure data can be selected.
 |empty|Custom empty data display|-||
 |footer|The footer of the drop-down box|-||
 |tree-slot-extra|Render additional node content of the tree component|-||
-|tree-slot-title|Custom the node title of the tree component|-||
+|tree-slot-title|Custom the node title of the tree component|title: `string`||
 |tree-slot-icon|Custom node icon for the tree component|node: `TreeNodeData`|2.18.0|
 |tree-slot-switcher-icon|Custom switcher icon for the tree component|-||
 
diff --git a/packages/web-vue/components/tree-select/README.zh-CN.md b/packages/web-vue/components/tree-select/README.zh-CN.md
index 189f8b078..153252dcd 100644
--- a/packages/web-vue/components/tree-select/README.zh-CN.md
+++ b/packages/web-vue/components/tree-select/README.zh-CN.md
@@ -78,14 +78,17 @@ description: 可以对树形结构数据进行选择。
 |scrollbar|是否开启虚拟滚动条|`boolean \| ScrollbarProps`|`true`|2.39.0|
 |show-header-on-empty|空状态时是否显示header|`boolean`|`false`||
 |show-footer-on-empty|空状态时是否显示footer|`boolean`|`false`||
+|input-value **(v-model)**|输入框的值|`string`|`-`|2.55.0|
+|default-input-value|输入框的默认值（非受控模式）|`string`|`''`|2.55.0|
 ### `<tree-select>` Events
 
-|事件名|描述|参数|
-|---|---|---|
-|change|值改变时触发|value: `string \| number \| LabelValue \| Array<string \| number> \| LabelValue[] \| undefined`|
-|popup-visible-change|下拉框显示状态改变时触发|visible: `boolean`|
-|search|搜索值变化时触发|searchKey: `string`|
-|clear|点击清除时触发|-|
+|事件名|描述|参数|版本|
+|---|---|---|:---|
+|change|值改变时触发|value: `string \| number \| LabelValue \| Array<string \| number> \| LabelValue[] \| undefined`||
+|popup-visible-change|下拉框显示状态改变时触发|visible: `boolean`||
+|search|搜索值变化时触发|searchKey: `string`||
+|clear|点击清除时触发|-||
+|input-value-change|输入框的值发生改变时触发|inputValue: `string`|2.55.0|
 ### `<tree-select>` Slots
 
 |插槽名|描述|参数|版本|
@@ -98,7 +101,7 @@ description: 可以对树形结构数据进行选择。
 |empty|定制空数据展示|-||
 |footer|自定义下拉框页脚|-||
 |tree-slot-extra|定制 tree 组件的渲染额外节点内容|-||
-|tree-slot-title|定制 tree 组件的节点标题|-||
+|tree-slot-title|定制 tree 组件的节点标题|title: `string`||
 |tree-slot-icon|定制 tree 组件的节点图标|node: `TreeNodeData`|2.18.0|
 |tree-slot-switcher-icon|定制 tree 组件的 switcher 图标|-||
 
diff --git a/packages/web-vue/components/tree/CHANGELOG.md b/packages/web-vue/components/tree/CHANGELOG.md
index c59e37474..8f4e14124 100644
--- a/packages/web-vue/components/tree/CHANGELOG.md
+++ b/packages/web-vue/components/tree/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 Feature
+
+- The `title` slot has a new `title` parameter ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
index 386f9d50d..0ac7b2e01 100644
--- a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.0
+
+`2024-03-15`
+
+### 🆕 新增功能
+
+- `title` 插槽新增 `title` 参数 ([#3024](https://github.com/arco-design/arco-design-vue/pull/3024))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/components/tree/README.en-US.md b/packages/web-vue/components/tree/README.en-US.md
index 03c4e5b40..9c3b2d59f 100644
--- a/packages/web-vue/components/tree/README.en-US.md
+++ b/packages/web-vue/components/tree/README.en-US.md
@@ -106,7 +106,7 @@ description: For content with many levels, such as folders, catalogs, and organi
 
 |Slot Name|Description|Parameters|version|
 |---|---|---|:---|
-|title|Title|-||
+|title|Title|title: `string`||
 |extra|Render additional node content|-||
 |drag-icon|Custom drag icon|node: `TreeNodeData`||
 |loading-icon|Custom loading icon|-||
diff --git a/packages/web-vue/components/tree/README.zh-CN.md b/packages/web-vue/components/tree/README.zh-CN.md
index f08db8fce..9045e4d8e 100644
--- a/packages/web-vue/components/tree/README.zh-CN.md
+++ b/packages/web-vue/components/tree/README.zh-CN.md
@@ -104,7 +104,7 @@ description: 对于文件夹、分类目录、组织架构等层级较多的内
 
 |插槽名|描述|参数|版本|
 |---|:---:|---|:---|
-|title|标题|-||
+|title|标题|title: `string`||
 |extra|渲染额外的节点内容|-||
 |drag-icon|定制 drag 图标|node: `TreeNodeData`||
 |loading-icon|定制 loading 图标|-||
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index 4d8b49d6c..575df2ec2 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.54.6",
+  "version": "2.55.0",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",

From 62de68500f20b1a1d31552f34e85a5c3ef6157fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 29 Mar 2024 16:32:00 +0800
Subject: [PATCH 19/45] fix(empty): fix automatically inherited warn (#3048)

---
 packages/web-vue/components/empty/empty.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-vue/components/empty/empty.tsx b/packages/web-vue/components/empty/empty.tsx
index 11ee816c0..ab2aca75e 100644
--- a/packages/web-vue/components/empty/empty.tsx
+++ b/packages/web-vue/components/empty/empty.tsx
@@ -6,6 +6,7 @@ import { configProviderInjectionKey } from '../config-provider/context';
 
 export default defineComponent({
   name: 'Empty',
+  inheritAttrs: false,
   props: {
     /**
      * @zh 描述内容
@@ -32,7 +33,7 @@ export default defineComponent({
    * @en Image/Icon
    * @slot image
    */
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const prefixCls = getPrefixCls('empty');
     const { t } = useI18n();
     const configCtx = inject(configProviderInjectionKey, undefined);
@@ -47,7 +48,7 @@ export default defineComponent({
       }
 
       return (
-        <div class={prefixCls}>
+        <div class={prefixCls} {...attrs}>
           <div class={`${prefixCls}-image`}>
             {slots.image?.() ??
               (props.imgSrc ? (

From cbcbe674e150eafda0a53de01e2b99b111b4ebb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 29 Mar 2024 16:34:17 +0800
Subject: [PATCH 20/45] fix(trigger): fix animation direction for position
 popup (#3045)

---
 packages/web-vue/components/trigger/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-vue/components/trigger/utils.ts b/packages/web-vue/components/trigger/utils.ts
index 362ecc159..b2914a068 100644
--- a/packages/web-vue/components/trigger/utils.ts
+++ b/packages/web-vue/components/trigger/utils.ts
@@ -368,7 +368,7 @@ export const getTransformOrigin = (position: TriggerPosition) => {
   let originY = '0';
   if (['left', 'right'].includes(position)) {
     originY = '50%';
-  } else if (['top', 'tl', 'tr', 'lt', 'rt'].includes(position)) {
+  } else if (['top', 'tl', 'tr', 'lb', 'rb'].includes(position)) {
     originY = '100%';
   }
   return `${originX} ${originY}`;

From 6f2e371e70cb764437c66d376833d960b9e5db78 Mon Sep 17 00:00:00 2001
From: vhikZhangchao <zhangchao564265135@hotmail.com>
Date: Fri, 29 Mar 2024 16:52:47 +0800
Subject: [PATCH 21/45] Update zh-cn.ts (#3028)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

顏 to 颜
---
 packages/web-vue/components/locale/lang/zh-cn.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-vue/components/locale/lang/zh-cn.ts b/packages/web-vue/components/locale/lang/zh-cn.ts
index f6c466c66..f0baa5eff 100644
--- a/packages/web-vue/components/locale/lang/zh-cn.ts
+++ b/packages/web-vue/components/locale/lang/zh-cn.ts
@@ -195,7 +195,7 @@ const lang: ArcoLang = {
     },
   },
   colorPicker: {
-    history: '最近使用顏色',
+    history: '最近使用颜色',
     preset: '系统预设颜色',
     empty: '暂无',
   },

From d8866609576baa2b251e16285b154d88f089bca1 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Fri, 29 Mar 2024 17:56:15 +0800
Subject: [PATCH 22/45] fix(upload): example code exception (#3037)

---
 .../web-vue/components/upload/__demo__/submit.md     | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/web-vue/components/upload/__demo__/submit.md b/packages/web-vue/components/upload/__demo__/submit.md
index 858cc5336..a1f73e085 100644
--- a/packages/web-vue/components/upload/__demo__/submit.md
+++ b/packages/web-vue/components/upload/__demo__/submit.md
@@ -49,10 +49,8 @@ export default {
 
     const submitOne = (e) => {
       e.stopPropagation();
-      console.log(files.value)
-      uploadRef.value.submit(
-        files.value.find((x) => x.status === 'init')
-      );
+      console.log(files.value);
+      uploadRef.value.submit(files.value.find((x) => x.status === 'init'));
     };
 
     const submit = (e) => {
@@ -65,12 +63,12 @@ export default {
     };
 
     return {
+      uploadRef,
       files,
       submitOne,
       submit,
-      onChange
-    }
-
+      onChange,
+    };
   },
 };
 </script>

From ce24e71392596fe18f47630a06710038d1d136bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 29 Mar 2024 18:08:13 +0800
Subject: [PATCH 23/45] fix(color-picker): fix v-model not working (#3030)

---
 .../components/color-picker/color-picker.tsx  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/web-vue/components/color-picker/color-picker.tsx b/packages/web-vue/components/color-picker/color-picker.tsx
index eacc46347..9d3bf51a7 100644
--- a/packages/web-vue/components/color-picker/color-picker.tsx
+++ b/packages/web-vue/components/color-picker/color-picker.tsx
@@ -5,7 +5,6 @@ import { colors } from './colors';
 import { HSV } from './interface';
 import Panel from './panel';
 import Trigger, { TriggerProps } from '../trigger';
-import useMergeState from '../_hooks/use-merge-state';
 import useState from '../_hooks/use-state';
 import {
   formatInputToHSVA,
@@ -133,10 +132,9 @@ export default defineComponent({
   },
   setup(props, { emit, slots }) {
     const prefixCls = getPrefixCls('color-picker');
-    const [mergeValue, setMergeValue] = useMergeState(
-      props.defaultValue,
-      reactive({ value: props.modelValue })
-    );
+    const mergeValue = computed(() => {
+      return props.modelValue ?? props.defaultValue;
+    });
 
     const formatInput = computed(() => {
       return formatInputToHSVA(mergeValue.value || '');
@@ -149,6 +147,18 @@ export default defineComponent({
       v: formatInput.value.v,
     });
 
+    watch(
+      () => formatInput.value,
+      (value) => {
+        setAlpha(value.a);
+        setHsv({
+          h: value.h,
+          s: value.s,
+          v: value.v,
+        });
+      }
+    );
+
     const color = computed(() => {
       const rgb = hsvToRgb(hsv.value.h, hsv.value.s, hsv.value.v);
       const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
@@ -177,7 +187,6 @@ export default defineComponent({
     });
 
     watch(formatValue, (value) => {
-      setMergeValue(value);
       emit('update:modelValue', value);
       emit('change', value);
     });

From f4717b6851c3b12c12afd6313f28792dc252b800 Mon Sep 17 00:00:00 2001
From: A_Bo <li_student@163.com>
Date: Fri, 29 Mar 2024 18:08:56 +0800
Subject: [PATCH 24/45] style(tree): fix scrollheight calculation of
 inline-block element (#3044)

Co-authored-by: liwenbo <liwenbo@kanzhun.com>
---
 packages/web-vue/components/tree/style/index.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-vue/components/tree/style/index.less b/packages/web-vue/components/tree/style/index.less
index 471541574..df2a62a70 100644
--- a/packages/web-vue/components/tree/style/index.less
+++ b/packages/web-vue/components/tree/style/index.less
@@ -187,6 +187,7 @@
     width: @tree-size-default-icon-size;
     height: 100%;
     margin-right: @tree-margin-switcher-icon-right;
+    vertical-align: top;
   }
 
   &-node-draggable {

From fd5f01fac176a555b62622dd3b0e95579fa56e5d Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Fri, 29 Mar 2024 18:25:39 +0800
Subject: [PATCH 25/45] release version

---
 packages/web-vue/CHANGELOG.md                 | 16 ++++++
 packages/web-vue/CHANGELOG.zh-CN.md           | 16 ++++++
 .../components/color-picker/CHANGELOG.md      | 10 ++++
 .../color-picker/CHANGELOG.zh-CN.md           | 10 ++++
 .../__test__/__snapshots__/demo.test.ts.snap  |  2 +-
 .../web-vue/components/empty/CHANGELOG.md     |  9 ++++
 .../components/empty/CHANGELOG.zh-CN.md       |  9 ++++
 .../tree-select/__demo__/virtual.md           | 54 +++++++++++--------
 .../__test__/__snapshots__/demo.test.ts.snap  |  6 ++-
 packages/web-vue/components/tree/CHANGELOG.md |  9 ++++
 .../components/tree/CHANGELOG.zh-CN.md        |  9 ++++
 .../web-vue/components/trigger/CHANGELOG.md   |  9 ++++
 .../components/trigger/CHANGELOG.zh-CN.md     |  9 ++++
 .../web-vue/components/upload/CHANGELOG.md    |  5 ++
 .../components/upload/CHANGELOG.zh-CN.md      |  5 ++
 packages/web-vue/package.json                 |  2 +-
 16 files changed, 154 insertions(+), 26 deletions(-)

diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index 97ccacc6f..fc949f32b 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,22 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 BugFix
+
+- **empty:** fix automatically inherited warn ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))
+- **trigger:** fix animation direction for position popup ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))
+- **color-picker:** fix v-model not working ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))
+- **color-picker:** Fix copywriting errors ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))
+
+### 💅 Style
+
+- **tree:** fix scrollHeight calculation exception problem ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))
+
+
 ## 2.55.0
 
 `2024-03-15`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index e8312672c..55c28c0fd 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,22 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 问题修复
+
+- **empty:** 修复属性自动继承的错误 ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))
+- **trigger:** 修正位置的弹出动画方向 ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))
+- **color-picker:** 修复双向绑定不生效问题 ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))
+- **color-picker:** 修复文案错误 ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))
+
+### 💅 样式更新
+
+- **tree:** 修复scrollHeight计算异常问题 ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))
+
+
 ## 2.55.0
 
 `2024-03-15`
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.md b/packages/web-vue/components/color-picker/CHANGELOG.md
index 8eb1c9e6d..1b9818275 100644
--- a/packages/web-vue/components/color-picker/CHANGELOG.md
+++ b/packages/web-vue/components/color-picker/CHANGELOG.md
@@ -2,6 +2,16 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 BugFix
+
+- fix v-model not working ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))
+- Fix copywriting errors ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))
+
+
 ## 2.55.0
 
 `2024-03-15`
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
index 995d131a7..8c818a47a 100644
--- a/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
@@ -2,6 +2,16 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 问题修复
+
+- 修复双向绑定不生效问题 ([#3030](https://github.com/arco-design/arco-design-vue/pull/3030))
+- 修复文案错误 ([#3028](https://github.com/arco-design/arco-design-vue/pull/3028))
+
+
 ## 2.55.0
 
 `2024-03-15`
diff --git a/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
index 4b3e72836..73476617c 100644
--- a/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
+++ b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
@@ -100,7 +100,7 @@ exports[`<color-picker> demo: render [only-panel] correctly 1`] = `
       </div>
       <div class=\\"arco-color-picker-panel-colors\\">
         <div class=\\"arco-color-picker-colors-section\\">
-          <div class=\\"arco-color-picker-colors-text\\">最近使用顏色</div>
+          <div class=\\"arco-color-picker-colors-text\\">最近使用颜色</div>
           <div class=\\"arco-color-picker-colors-wrapper\\"><span class=\\"arco-color-picker-colors-empty\\">暂无</span></div>
         </div>
         <div class=\\"arco-color-picker-colors-section\\">
diff --git a/packages/web-vue/components/empty/CHANGELOG.md b/packages/web-vue/components/empty/CHANGELOG.md
index cd85df4c9..915d857ea 100644
--- a/packages/web-vue/components/empty/CHANGELOG.md
+++ b/packages/web-vue/components/empty/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 BugFix
+
+- fix automatically inherited warn ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))
+
+
 ## 2.47.0
 
 `2023-06-02`
diff --git a/packages/web-vue/components/empty/CHANGELOG.zh-CN.md b/packages/web-vue/components/empty/CHANGELOG.zh-CN.md
index 3b018f27e..6922fe567 100644
--- a/packages/web-vue/components/empty/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/empty/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 问题修复
+
+- 修复属性自动继承的错误 ([#3048](https://github.com/arco-design/arco-design-vue/pull/3048))
+
+
 ## 2.47.0
 
 `2023-06-02`
diff --git a/packages/web-vue/components/tree-select/__demo__/virtual.md b/packages/web-vue/components/tree-select/__demo__/virtual.md
index 50d7614a1..564f8b6d3 100644
--- a/packages/web-vue/components/tree-select/__demo__/virtual.md
+++ b/packages/web-vue/components/tree-select/__demo__/virtual.md
@@ -12,45 +12,53 @@ title:
 
 ## en-US
 
-By specifying `treeProps.virtualListProps` to turn on the virtual list, high performance can be obtained when a large amount of data is used.
+By specifying `treeProps.virtualListProps` to turn on the virtual list, high performance can be obtained when a large
+amount of data is used.
 
 ```vue
 <template>
   <a-tree-select
     :data="treeData"
+    :allow-search="{
+      retainInputValue: true
+    }"
+    multiple
+    tree-checkable
+    :scrollbar="false"
+    tree-checked-strategy="parent"
     :treeProps="{
       virtualListProps: {
-        height: 200
+        height: 200,
       },
     }"
-  ></a-tree-select>
+  />
 </template>
 <script>
-  export default {
-    setup() {
-      const treeData = loop();
-      return {
-        treeData
-      }
+export default {
+  setup() {
+    const treeData = loop();
+    return {
+      treeData
     }
   }
+}
 
-  function loop(path = '0', level = 2) {
-    const list = [];
-    for (let i = 0; i < 10; i += 1) {
-      const key = `${path}-${i}`;
-      const treeNode = {
-        title: key,
-        key,
-      };
-
-      if (level > 0) {
-        treeNode.children = loop(key, level - 1);
-      }
+function loop(path = '0', level = 2) {
+  const list = [];
+  for (let i = 0; i < 10; i += 1) {
+    const key = `${path}-${i}`;
+    const treeNode = {
+      title: key,
+      key,
+    };
 
-      list.push(treeNode);
+    if (level > 0) {
+      treeNode.children = loop(key, level - 1);
     }
-    return list;
+
+    list.push(treeNode);
   }
+  return list;
+}
 </script>
 ```
diff --git a/packages/web-vue/components/tree-select/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/tree-select/__test__/__snapshots__/demo.test.ts.snap
index 622034f21..bd5246171 100644
--- a/packages/web-vue/components/tree-select/__test__/__snapshots__/demo.test.ts.snap
+++ b/packages/web-vue/components/tree-select/__test__/__snapshots__/demo.test.ts.snap
@@ -229,7 +229,11 @@ exports[`<tree-select> demo: render [trigger-element] correctly 1`] = `
 `;
 
 exports[`<tree-select> demo: render [virtual] correctly 1`] = `
-"<span class=\\"arco-select-view-single arco-select-view arco-select-view-size-medium\\" title=\\"\\"><!----><input class=\\"arco-select-view-input\\" readonly=\\"\\"><span class=\\"arco-select-view-value arco-select-view-value-hidden\\"><!----></span><span class=\\"arco-select-view-suffix\\"><!----><span class=\\"arco-select-view-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></span>
+"<span class=\\"arco-select-view arco-select-view-size-medium arco-select-view-has-suffix arco-select-view-has-placeholder arco-select-view-multiple\\"><span class=\\"arco-select-view-mirror\\"><!----></span>
+<!---->
+<transition-group-stub><input class=\\"arco-select-view-input\\" style=\\"width: 12px;\\"></transition-group-stub>
+<!----><span class=\\"arco-select-view-suffix\\"><!----><span class=\\"arco-select-view-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></span>
+<!---->
 <!----></span></span>
 <!---->"
 `;
diff --git a/packages/web-vue/components/tree/CHANGELOG.md b/packages/web-vue/components/tree/CHANGELOG.md
index 8f4e14124..c0498c14d 100644
--- a/packages/web-vue/components/tree/CHANGELOG.md
+++ b/packages/web-vue/components/tree/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 💅 Style
+
+- fix scrollHeight calculation exception problem ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))
+
+
 ## 2.55.0
 
 `2024-03-15`
diff --git a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
index 0ac7b2e01..7a131738c 100644
--- a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 💅 样式更新
+
+- 修复scrollHeight计算异常问题 ([#3044](https://github.com/arco-design/arco-design-vue/pull/3044))
+
+
 ## 2.55.0
 
 `2024-03-15`
diff --git a/packages/web-vue/components/trigger/CHANGELOG.md b/packages/web-vue/components/trigger/CHANGELOG.md
index fa57061cb..fde72a096 100644
--- a/packages/web-vue/components/trigger/CHANGELOG.md
+++ b/packages/web-vue/components/trigger/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 BugFix
+
+- fix animation direction for position popup ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))
+
+
 ## 2.46.0
 
 `2023-05-12`
diff --git a/packages/web-vue/components/trigger/CHANGELOG.zh-CN.md b/packages/web-vue/components/trigger/CHANGELOG.zh-CN.md
index 6b1a81e82..3a6dbed21 100644
--- a/packages/web-vue/components/trigger/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/trigger/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+### 🐛 问题修复
+
+- 修正位置的弹出动画方向 ([#3045](https://github.com/arco-design/arco-design-vue/pull/3045))
+
+
 ## 2.46.0
 
 `2023-05-12`
diff --git a/packages/web-vue/components/upload/CHANGELOG.md b/packages/web-vue/components/upload/CHANGELOG.md
index abd153f69..817930d89 100644
--- a/packages/web-vue/components/upload/CHANGELOG.md
+++ b/packages/web-vue/components/upload/CHANGELOG.md
@@ -2,6 +2,11 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+
 ## 2.44.6
 
 `2023-03-31`
diff --git a/packages/web-vue/components/upload/CHANGELOG.zh-CN.md b/packages/web-vue/components/upload/CHANGELOG.zh-CN.md
index 75d06f610..2ba653e46 100644
--- a/packages/web-vue/components/upload/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/upload/CHANGELOG.zh-CN.md
@@ -2,6 +2,11 @@
 changelog: true
 ```
 
+## 2.55.1
+
+`2024-03-29`
+
+
 ## 2.44.6
 
 `2023-03-31`
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index 575df2ec2..62c6b1afb 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.55.0",
+  "version": "2.55.1",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",

From 3b84ac3bdef3606f3e34051d4215992ed5cf69e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Thu, 9 May 2024 19:45:22 +0800
Subject: [PATCH 26/45] fix(transfer): fix disabled behavior in transfer simple
 mode (#3067)

---
 .../components/transfer/transfer-list-item.tsx       | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/web-vue/components/transfer/transfer-list-item.tsx b/packages/web-vue/components/transfer/transfer-list-item.tsx
index 6117b7df2..e6a5ee3cb 100644
--- a/packages/web-vue/components/transfer/transfer-list-item.tsx
+++ b/packages/web-vue/components/transfer/transfer-list-item.tsx
@@ -32,14 +32,12 @@ export default defineComponent({
     const transferCtx = inject(transferInjectionKey, undefined);
 
     const handleClick = () => {
-      if (!props.simple) {
-        return;
+      if (props.simple && !props.disabled) {
+        transferCtx?.moveTo(
+          [props.data.value],
+          props.type === 'target' ? 'source' : 'target'
+        );
       }
-
-      transferCtx?.moveTo(
-        [props.data.value],
-        props.type === 'target' ? 'source' : 'target'
-      );
     };
 
     const cls = computed(() => [

From 151ae62eaec84035d759ce0189983b7e8519719c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Thu, 9 May 2024 19:46:25 +0800
Subject: [PATCH 27/45] fix(upload): import missing image styles for upload
 component (#3101)

---
 packages/web-vue/components/upload/style/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-vue/components/upload/style/index.ts b/packages/web-vue/components/upload/style/index.ts
index efa120ab7..1728a2106 100644
--- a/packages/web-vue/components/upload/style/index.ts
+++ b/packages/web-vue/components/upload/style/index.ts
@@ -2,4 +2,5 @@ import '../../style/index.less';
 import '../../button/style';
 import '../../trigger/style';
 import '../../progress/style';
+import '../../image/style';
 import './index.less';

From ac444e58b9279e8470f31499db7a0e0d23cb2660 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Thu, 9 May 2024 20:04:50 +0800
Subject: [PATCH 28/45] fix(color-picker): Optimize background overflow for
 color control bar (#3116)

---
 packages/web-vue/components/color-picker/style/index.less | 3 ++-
 packages/web-vue/components/color-picker/style/token.less | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/components/color-picker/style/index.less b/packages/web-vue/components/color-picker/style/index.less
index e64bf6dda..d160e2926 100644
--- a/packages/web-vue/components/color-picker/style/index.less
+++ b/packages/web-vue/components/color-picker/style/index.less
@@ -216,6 +216,7 @@
       transparent 0
     );
     background-size: 8px 8px;
+    border-radius: @color-control-bar-border-radius;
   }
 
   .@{color-picker-prefix-cls}-control-bar {
@@ -224,7 +225,7 @@
     width: @color-control-bar-width;
     height: @color-control-bar-height;
     border: 1px solid @color-panel-border-color;
-    border-radius: 10px;
+    border-radius: @color-control-bar-border-radius;
     cursor: pointer;
 
     .@{color-picker-prefix-cls}-handler {
diff --git a/packages/web-vue/components/color-picker/style/token.less b/packages/web-vue/components/color-picker/style/token.less
index 229960947..0cca0dc90 100644
--- a/packages/web-vue/components/color-picker/style/token.less
+++ b/packages/web-vue/components/color-picker/style/token.less
@@ -51,6 +51,7 @@
 @color-control-bar-height: 14px;
 @color-control-bar-handle-size: @size-4;
 @color-control-bar-alpha-margin-top: @spacing-6;
+@color-control-bar-border-radius: 10px;
 
 @color-panel-input-margin-top: @spacing-6;
 @color-panel-input-group-margin-left: @spacing-6;

From 03a661de821191e43ee3daed254507d5a397a8f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=BC=B9?= <810335188@qq.com>
Date: Thu, 9 May 2024 20:12:40 +0800
Subject: [PATCH 29/45] fix(docs): should be 1 instead of 2 in form FAQ (#3078)

---
 packages/web-vue/components/form/README.en-US.md | 2 +-
 packages/web-vue/components/form/README.zh-CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-vue/components/form/README.en-US.md b/packages/web-vue/components/form/README.en-US.md
index c4693acbc..93f2395f7 100644
--- a/packages/web-vue/components/form/README.en-US.md
+++ b/packages/web-vue/components/form/README.en-US.md
@@ -218,7 +218,7 @@ const data = reactive({
    ]
 })
 ````
-At this point, if you want to specify the value corresponding to the current `form-item` as `id: '2222'`, you need to set `field="people.2.id"`, and the separator in the value needs to use `.`
+At this point, if you want to specify the value corresponding to the current `form-item` as `id: '2222'`, you need to set `field="people.1.id"`, and the separator in the value needs to use `.`
 
 ### About using clickable elements in the label slot
 
diff --git a/packages/web-vue/components/form/README.zh-CN.md b/packages/web-vue/components/form/README.zh-CN.md
index 8d7747c0f..f1be6bee2 100644
--- a/packages/web-vue/components/form/README.zh-CN.md
+++ b/packages/web-vue/components/form/README.zh-CN.md
@@ -216,7 +216,7 @@ const data = reactive({
   ]
 })
 ```
-此时，如果想要指定当前 `form-item` 对应的值为 `id: '2222'`，需要设置 `field="people.2.id"`，值中的分隔符需要使用 `.`。数组分割也可以使用 `[]`，例如 `field="people[2].id"`
+此时，如果想要指定当前 `form-item` 对应的值为 `id: '2222'`，需要设置 `field="people.1.id"`，值中的分隔符需要使用 `.`。数组分割也可以使用 `[]`，例如 `field="people[1].id"`
 
 ### 关于在 label 插槽中使用可点击元素
 

From 2a49db52fa4f6fab8384ae2076b31b48297202ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Thu, 9 May 2024 20:20:36 +0800
Subject: [PATCH 30/45] fix(color-picker): fix color-picker style import
 (#3052)

---
 packages/web-vue/components/color-picker/style/index.ts   | 3 +++
 packages/web-vue/components/color-picker/style/token.less | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/web-vue/components/color-picker/style/index.ts b/packages/web-vue/components/color-picker/style/index.ts
index 3a3ab0de5..e773a60f4 100644
--- a/packages/web-vue/components/color-picker/style/index.ts
+++ b/packages/web-vue/components/color-picker/style/index.ts
@@ -1,2 +1,5 @@
 import '../../style/index.less';
+import '../../input/style';
+import '../../input-number/style';
+import '../../select/style';
 import './index.less';
diff --git a/packages/web-vue/components/color-picker/style/token.less b/packages/web-vue/components/color-picker/style/token.less
index 0cca0dc90..19675f4c2 100644
--- a/packages/web-vue/components/color-picker/style/token.less
+++ b/packages/web-vue/components/color-picker/style/token.less
@@ -1,4 +1,5 @@
 @import '../../style/theme/index.less';
+@import '../../input/style/token.less';
 
 @color-preview-size-mini: @size-4;
 @color-preview-size-small: 22px;

From 5aa887c2118cfc8dd2d2ee9e6a6eb207ac84ddda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 10 May 2024 16:10:53 +0800
Subject: [PATCH 31/45] fix(verification-code): fix formatter not being applied
 during paste (#3110)

---
 .../verification-code/verification-code.tsx   | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/web-vue/components/verification-code/verification-code.tsx b/packages/web-vue/components/verification-code/verification-code.tsx
index e8bb18cd1..78b61630f 100644
--- a/packages/web-vue/components/verification-code/verification-code.tsx
+++ b/packages/web-vue/components/verification-code/verification-code.tsx
@@ -2,7 +2,7 @@ import { PropType, VNode, computed, defineComponent, ref, watch } from 'vue';
 import { Size } from '../_utils/constant';
 import { getPrefixCls } from '../_utils/global-config';
 import ArcoInput from '../input';
-import { isExist, isFunction } from '../_utils/is';
+import { isExist, isFunction, isString } from '../_utils/is';
 import { Backspace, ArrowLeft, ArrowRight } from '../_utils/keycode';
 
 export default defineComponent({
@@ -135,6 +135,7 @@ export default defineComponent({
       if (value.length === props.length) {
         emit('finish', value);
       }
+      focusFirstEmptyInput();
     };
 
     const handleFocus = (index: number) => inputRefList?.value[index].focus();
@@ -154,11 +155,29 @@ export default defineComponent({
       e.preventDefault();
       const { clipboardData } = e;
       const text = clipboardData?.getData('text');
-      if (text) {
-        const pasteValues = text.split('').slice(0, props.length - index);
-        innerValue.value.splice(index, pasteValues.length, ...pasteValues);
-        updateValue();
-      }
+      if (!text) return;
+
+      text.split('').forEach((char, i) => {
+        if (index + i >= props.length) return;
+
+        if (isFunction(props.formatter)) {
+          const result = props.formatter(
+            char,
+            index + i,
+            innerValue.value.join('')
+          );
+          if (result === false) {
+            index -= 1;
+            return;
+          }
+          if (isString(result)) {
+            char = result.charAt(0);
+          }
+        }
+
+        innerValue.value[index + i] = char;
+      });
+      updateValue();
     };
 
     const handleKeydown = (index: number, e: KeyboardEvent) => {
@@ -168,7 +187,6 @@ export default defineComponent({
         e.preventDefault();
         innerValue.value[Math.max(index - 1, 0)] = '';
         updateValue();
-        focusFirstEmptyInput();
       } else if (keyCode === ArrowLeft.code && index > 0) {
         e.preventDefault();
         handleFocus(index - 1);
@@ -189,12 +207,13 @@ export default defineComponent({
       if (isFunction(props.formatter)) {
         const result = props.formatter(char, index, innerValue.value.join(''));
         if (result === false) return;
-        char = result as string;
+        if (isString(result)) {
+          char = result.charAt(0);
+        }
       }
 
       innerValue.value[index] = char;
       updateValue();
-      focusFirstEmptyInput();
     };
 
     return () => {

From a2a98d609bf2b21911c37134b65ffd38c95659d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 10 May 2024 16:21:26 +0800
Subject: [PATCH 32/45] refactor: correct the type definition for
 popupContainer (#2998)

---
 packages/web-vue/components/cascader/cascader.vue        | 4 +---
 packages/web-vue/components/date-picker/picker.vue       | 4 +---
 packages/web-vue/components/date-picker/range-picker.vue | 4 +---
 packages/web-vue/components/dropdown/dropdown-button.vue | 4 +---
 packages/web-vue/components/image/preview-group.vue      | 2 +-
 packages/web-vue/components/popconfirm/popconfirm.vue    | 2 +-
 packages/web-vue/components/popover/popover.vue          | 4 +---
 packages/web-vue/components/tooltip/tooltip.vue          | 4 +---
 packages/web-vue/components/tree-select/interface.ts     | 2 +-
 packages/web-vue/components/tree-select/tree-select.vue  | 2 +-
 10 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/web-vue/components/cascader/cascader.vue b/packages/web-vue/components/cascader/cascader.vue
index 4f72b110c..6766fbc81 100644
--- a/packages/web-vue/components/cascader/cascader.vue
+++ b/packages/web-vue/components/cascader/cascader.vue
@@ -300,9 +300,7 @@ export default defineComponent({
      * @en Mount container for popup
      */
     popupContainer: {
-      type: [String, Object] as PropType<
-        string | HTMLElement | null | undefined
-      >,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
     /**
      * @zh 多选模式下，最多显示的标签数量。0 表示不限制
diff --git a/packages/web-vue/components/date-picker/picker.vue b/packages/web-vue/components/date-picker/picker.vue
index 1b9c98514..4555139db 100644
--- a/packages/web-vue/components/date-picker/picker.vue
+++ b/packages/web-vue/components/date-picker/picker.vue
@@ -264,9 +264,7 @@ export default defineComponent({
      * @en Mount container for pop-up box
      */
     popupContainer: {
-      type: [String, Object] as PropType<
-        string | HTMLElement | null | undefined
-      >,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
     mode: {
       type: String as PropType<'date' | 'year' | 'quarter' | 'month' | 'week'>,
diff --git a/packages/web-vue/components/date-picker/range-picker.vue b/packages/web-vue/components/date-picker/range-picker.vue
index de9d922c5..e73e5c743 100644
--- a/packages/web-vue/components/date-picker/range-picker.vue
+++ b/packages/web-vue/components/date-picker/range-picker.vue
@@ -250,9 +250,7 @@ export default defineComponent({
       default: true,
     },
     popupContainer: {
-      type: [String, Object] as PropType<
-        string | HTMLElement | null | undefined
-      >,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
     locale: {
       type: Object as PropType<Record<string, any>>,
diff --git a/packages/web-vue/components/dropdown/dropdown-button.vue b/packages/web-vue/components/dropdown/dropdown-button.vue
index 31caf48a7..7a983eecd 100644
--- a/packages/web-vue/components/dropdown/dropdown-button.vue
+++ b/packages/web-vue/components/dropdown/dropdown-button.vue
@@ -92,9 +92,7 @@ export default defineComponent({
      * @en Mount container for popup
      */
     popupContainer: {
-      type: [String, Object] as PropType<
-        string | HTMLElement | null | undefined
-      >,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
     /**
      * @zh 是否禁用
diff --git a/packages/web-vue/components/image/preview-group.vue b/packages/web-vue/components/image/preview-group.vue
index a0b8639cc..8213e8857 100644
--- a/packages/web-vue/components/image/preview-group.vue
+++ b/packages/web-vue/components/image/preview-group.vue
@@ -129,7 +129,7 @@ export default defineComponent({
      * @en Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body
      */
     popupContainer: {
-      type: [Object, String] as PropType<HTMLElement | string>,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
   },
   emits: [
diff --git a/packages/web-vue/components/popconfirm/popconfirm.vue b/packages/web-vue/components/popconfirm/popconfirm.vue
index 5c5c41965..eb226b79f 100644
--- a/packages/web-vue/components/popconfirm/popconfirm.vue
+++ b/packages/web-vue/components/popconfirm/popconfirm.vue
@@ -183,7 +183,7 @@ export default defineComponent({
      * @en Mount container for popup
      */
     popupContainer: {
-      type: [String, Object] as PropType<string | HTMLElement | undefined>,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
     /**
      * @zh 触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。
diff --git a/packages/web-vue/components/popover/popover.vue b/packages/web-vue/components/popover/popover.vue
index 390ebf84b..3485ee719 100644
--- a/packages/web-vue/components/popover/popover.vue
+++ b/packages/web-vue/components/popover/popover.vue
@@ -119,9 +119,7 @@ export default defineComponent({
      * @en Mount container for pop-up box
      */
     popupContainer: {
-      type: [String, Object] as PropType<
-        string | HTMLElement | null | undefined
-      >,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
   },
   emits: {
diff --git a/packages/web-vue/components/tooltip/tooltip.vue b/packages/web-vue/components/tooltip/tooltip.vue
index 4f13eabd9..f5f986548 100644
--- a/packages/web-vue/components/tooltip/tooltip.vue
+++ b/packages/web-vue/components/tooltip/tooltip.vue
@@ -116,9 +116,7 @@ export default defineComponent({
      * @en Mount container for popup
      */
     popupContainer: {
-      type: [String, Object] as PropType<
-        string | HTMLElement | null | undefined
-      >,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
   },
   emits: {
diff --git a/packages/web-vue/components/tree-select/interface.ts b/packages/web-vue/components/tree-select/interface.ts
index ac180ed4e..1d417e13b 100644
--- a/packages/web-vue/components/tree-select/interface.ts
+++ b/packages/web-vue/components/tree-select/interface.ts
@@ -69,7 +69,7 @@ export interface TreeSelectProps {
   filterTreeNode: FilterTreeNode | undefined;
   loadMore: LoadMore | undefined;
   disableFilter: boolean;
-  popupContainer: string | HTMLElement | null | undefined;
+  popupContainer?: string | HTMLElement;
   fallbackOption: FallbackOption;
   showHeaderOnEmpty?: boolean;
   showFooterOnEmpty?: boolean;
diff --git a/packages/web-vue/components/tree-select/tree-select.vue b/packages/web-vue/components/tree-select/tree-select.vue
index 138c9f84b..b4a3230b1 100644
--- a/packages/web-vue/components/tree-select/tree-select.vue
+++ b/packages/web-vue/components/tree-select/tree-select.vue
@@ -371,7 +371,7 @@ export default defineComponent({
      * @en Mount container for pop-up box
      */
     popupContainer: {
-      type: [String, Object] as PropType<string | HTMLElement | undefined>,
+      type: [String, Object] as PropType<string | HTMLElement>,
     },
     /**
      * @zh 为 value 中找不到匹配项的 key 定义节点数据

From 94d229cca6fa93a541a3cb925cede964ac381479 Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Fri, 10 May 2024 18:52:27 +0800
Subject: [PATCH 33/45] release version

---
 .../src/scripts/changelog/utils.ts            |  1 +
 packages/web-vue/CHANGELOG.md                 | 20 +++++++++++++++++++
 packages/web-vue/CHANGELOG.zh-CN.md           | 20 +++++++++++++++++++
 .../components/cascader/README.en-US.md       |  2 +-
 .../components/cascader/README.zh-CN.md       |  2 +-
 .../components/color-picker/CHANGELOG.md      | 13 ++++++++++++
 .../color-picker/CHANGELOG.zh-CN.md           | 13 ++++++++++++
 .../components/date-picker/README.en-US.md    |  2 +-
 .../components/date-picker/README.zh-CN.md    |  2 +-
 .../components/dropdown/README.en-US.md       |  2 +-
 .../components/dropdown/README.zh-CN.md       |  2 +-
 .../web-vue/components/form/README.en-US.md   |  2 +-
 .../web-vue/components/form/README.zh-CN.md   |  2 +-
 .../web-vue/components/image/README.en-US.md  |  2 +-
 .../web-vue/components/image/README.zh-CN.md  |  2 +-
 .../components/popconfirm/README.en-US.md     |  2 +-
 .../components/popconfirm/README.zh-CN.md     |  2 +-
 .../components/popover/README.en-US.md        |  2 +-
 .../components/popover/README.zh-CN.md        |  2 +-
 .../components/tooltip/README.en-US.md        |  2 +-
 .../components/tooltip/README.zh-CN.md        |  2 +-
 .../web-vue/components/transfer/CHANGELOG.md  |  9 +++++++++
 .../components/transfer/CHANGELOG.zh-CN.md    |  9 +++++++++
 .../components/tree-select/README.en-US.md    |  2 +-
 .../components/tree-select/README.zh-CN.md    |  2 +-
 .../web-vue/components/upload/CHANGELOG.md    |  9 +++++++++
 .../components/upload/CHANGELOG.zh-CN.md      |  9 +++++++++
 .../components/verification-code/CHANGELOG.md | 12 +++++++++++
 .../verification-code/CHANGELOG.zh-CN.md      | 12 +++++++++++
 packages/web-vue/package.json                 |  2 +-
 30 files changed, 146 insertions(+), 19 deletions(-)
 create mode 100644 packages/web-vue/components/verification-code/CHANGELOG.md
 create mode 100644 packages/web-vue/components/verification-code/CHANGELOG.zh-CN.md

diff --git a/packages/arco-vue-scripts/src/scripts/changelog/utils.ts b/packages/arco-vue-scripts/src/scripts/changelog/utils.ts
index 98fc92ff1..3c6aafac5 100644
--- a/packages/arco-vue-scripts/src/scripts/changelog/utils.ts
+++ b/packages/arco-vue-scripts/src/scripts/changelog/utils.ts
@@ -72,6 +72,7 @@ const componentList = [
   'scrollbar',
   'watermark',
   'color-picker',
+  'verification-code',
 ];
 
 export const isValidComponent = (component: string) => {
diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index fc949f32b..5b07bb437 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,26 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 BugFix
+
+- **verification-code:** fix formatter not being applied during paste ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))
+- **upload:** import missing image styles for upload component ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))
+- **transfer:** fix disabled behavior in transfer simple mode ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))
+- **color-picker:** fix color-picker style import ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))
+
+### 💅 Style
+
+- **color-picker:** Optimize color control bar background fillet style ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))
+
+### 🆎 TypeScript
+
+- undefined ([#2998](https://github.com/arco-design/arco-design-vue/pull/2998))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index 55c28c0fd..1a6d736ce 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,26 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 问题修复
+
+- **verification-code:** 修复粘贴时`formatter`未生效 ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))
+- **upload:** 修复上传组件预览样式引入缺失 ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))
+- **transfer:** 修复 simple 模式下禁用失效 ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))
+- **color-picker:** 修复样式按需导入错误 ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))
+
+### 💅 样式更新
+
+- **color-picker:** 优化颜色控制条背景圆角样式 ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))
+
+### 🆎 类型修正
+
+- correct the type definition for popupContainer ([#2998](https://github.com/arco-design/arco-design-vue/pull/2998))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/components/cascader/README.en-US.md b/packages/web-vue/components/cascader/README.en-US.md
index 40ad42e82..7a4120283 100644
--- a/packages/web-vue/components/cascader/README.en-US.md
+++ b/packages/web-vue/components/cascader/README.en-US.md
@@ -62,7 +62,7 @@ description: Refers to the use of multi-level classification to separate the opt
 |default-popup-visible|Whether to display the dropdown by default (uncontrolled state)|`boolean`|`false`||
 |placeholder|Placeholder|`string`|`-`||
 |filter-option|Custom options filter method|`(inputValue: string, option: CascaderOption) => boolean`|`-`||
-|popup-container|Mount container for popup|`string \| HTMLElement \| null \| undefined`|`-`||
+|popup-container|Mount container for popup|`string \| HTMLElement`|`-`||
 |max-tag-count|In multi-select mode, the maximum number of labels displayed. 0 means unlimited|`number`|`0`||
 |format-label|Format display content|`(options: CascaderOption[]) => string`|`-`||
 |trigger-props|Trigger props of the drop-down menu|`TriggerProps`|`-`||
diff --git a/packages/web-vue/components/cascader/README.zh-CN.md b/packages/web-vue/components/cascader/README.zh-CN.md
index a65f20427..886f0ac1a 100644
--- a/packages/web-vue/components/cascader/README.zh-CN.md
+++ b/packages/web-vue/components/cascader/README.zh-CN.md
@@ -60,7 +60,7 @@ description: 指在选择器选项数量较多时，采用多级分类的方式
 |default-popup-visible|是否默认显示下拉框（非受控状态）|`boolean`|`false`||
 |placeholder|占位符|`string`|`-`||
 |filter-option|自定义选项过滤方法|`(inputValue: string, option: CascaderOption) => boolean`|`-`||
-|popup-container|弹出框的挂载容器|`string \| HTMLElement \| null \| undefined`|`-`||
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`||
 |max-tag-count|多选模式下，最多显示的标签数量。0 表示不限制|`number`|`0`||
 |format-label|格式化展示内容|`(options: CascaderOption[]) => string`|`-`||
 |trigger-props|下拉菜单的触发器属性|`TriggerProps`|`-`||
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.md b/packages/web-vue/components/color-picker/CHANGELOG.md
index 1b9818275..f3754b242 100644
--- a/packages/web-vue/components/color-picker/CHANGELOG.md
+++ b/packages/web-vue/components/color-picker/CHANGELOG.md
@@ -2,6 +2,19 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 BugFix
+
+- fix color-picker style import ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))
+
+### 💅 Style
+
+- Optimize color control bar background fillet style ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
index 8c818a47a..087656bed 100644
--- a/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
@@ -2,6 +2,19 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 问题修复
+
+- 修复样式按需导入错误 ([#3052](https://github.com/arco-design/arco-design-vue/pull/3052))
+
+### 💅 样式更新
+
+- 优化颜色控制条背景圆角样式 ([#3116](https://github.com/arco-design/arco-design-vue/pull/3116))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/components/date-picker/README.en-US.md b/packages/web-vue/components/date-picker/README.en-US.md
index 150836c3c..c58389d68 100644
--- a/packages/web-vue/components/date-picker/README.en-US.md
+++ b/packages/web-vue/components/date-picker/README.en-US.md
@@ -73,7 +73,7 @@ description: Choose a date. Support year, month, week, day type, support range s
 |disabled-time|Unselectable time|`(current: Date) => DisabledTimeProps`|`-`||
 |picker-value **(v-model)**|Date displayed on the panel|`Date \| string \| number`|`-`||
 |default-picker-value|The date displayed on the panel by default|`Date \| string \| number`|`-`||
-|popup-container|Mount container for pop-up box|`string \| HTMLElement \| null \| undefined`|`-`||
+|popup-container|Mount container for pop-up box|`string \| HTMLElement`|`-`||
 |value-format|The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to [String parsing format](#string-parsing-format) ). If not specified, it will be formatted as a string, in the same format as `format`.|`'timestamp' \| 'Date' \| string`|`-`|2.16.0|
 |preview-shortcut|Whether to preview the result of the shortcut|`boolean`|`true`|2.28.0|
 |show-confirm-btn|Whether to show the confirm button, always show when `showTime = true`.|`boolean`|`false`|2.29.0|
diff --git a/packages/web-vue/components/date-picker/README.zh-CN.md b/packages/web-vue/components/date-picker/README.zh-CN.md
index c7f1f91e4..a87f9070a 100644
--- a/packages/web-vue/components/date-picker/README.zh-CN.md
+++ b/packages/web-vue/components/date-picker/README.zh-CN.md
@@ -71,7 +71,7 @@ description: 选择日期。支持年、月、周、日类型，支持范围选
 |disabled-time|不可选取的时间|`(current: Date) => DisabledTimeProps`|`-`||
 |picker-value **(v-model)**|面板显示的日期|`Date \| string \| number`|`-`||
 |default-picker-value|面板默认显示的日期|`Date \| string \| number`|`-`||
-|popup-container|弹出框的挂载容器|`string \| HTMLElement \| null \| undefined`|`-`||
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`||
 |value-format|值的格式，对 `value` `defaultValue` `pickerValue` `defaultPickerValue` 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考[字符串解析格式](#字符串解析格式)）。如果没有指定，将格式化为字符串，格式同 `format`。|`'timestamp' \| 'Date' \| string`|`-`|2.16.0|
 |preview-shortcut|是否要预览快捷选择的结果|`boolean`|`true`|2.28.0|
 |show-confirm-btn|是否显示确认按钮，`showTime = true` 的时候始终显示。|`boolean`|`false`|2.29.0|
diff --git a/packages/web-vue/components/dropdown/README.en-US.md b/packages/web-vue/components/dropdown/README.en-US.md
index f35c6afa8..90cf6e483 100644
--- a/packages/web-vue/components/dropdown/README.en-US.md
+++ b/packages/web-vue/components/dropdown/README.en-US.md
@@ -124,7 +124,7 @@ description: When there are too many commands on the page, the alternative comma
 |default-popup-visible|Whether the popup is visible by default (uncontrolled mode)|`boolean`|`false`|
 |trigger|Trigger method|`'hover' \| 'click' \| 'focus' \| 'contextMenu'`|`'click'`|
 |position|Popup position|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`|`'br'`|
-|popup-container|Mount container for popup|`string \| HTMLElement \| null \| undefined`|`-`|
+|popup-container|Mount container for popup|`string \| HTMLElement`|`-`|
 |disabled|Whether to disable|`boolean`|`false`|
 |type|Button type|`string`|`-`|
 |size|Button size|`string`|`-`|
diff --git a/packages/web-vue/components/dropdown/README.zh-CN.md b/packages/web-vue/components/dropdown/README.zh-CN.md
index 81784a482..b1c47f890 100644
--- a/packages/web-vue/components/dropdown/README.zh-CN.md
+++ b/packages/web-vue/components/dropdown/README.zh-CN.md
@@ -122,7 +122,7 @@ description: 页面上的命令过多时，可将备选命令收纳到向下展
 |default-popup-visible|弹出框默认是否可见（非受控模式）|`boolean`|`false`|
 |trigger|触发方式|`'hover' \| 'click' \| 'focus' \| 'contextMenu'`|`'click'`|
 |position|弹出位置|`'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'`|`'br'`|
-|popup-container|弹出框的挂载容器|`string \| HTMLElement \| null \| undefined`|`-`|
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
 |disabled|是否禁用|`boolean`|`false`|
 |type|按钮类型|`string`|`-`|
 |size|按钮大小|`string`|`-`|
diff --git a/packages/web-vue/components/form/README.en-US.md b/packages/web-vue/components/form/README.en-US.md
index 93f2395f7..c4693acbc 100644
--- a/packages/web-vue/components/form/README.en-US.md
+++ b/packages/web-vue/components/form/README.en-US.md
@@ -218,7 +218,7 @@ const data = reactive({
    ]
 })
 ````
-At this point, if you want to specify the value corresponding to the current `form-item` as `id: '2222'`, you need to set `field="people.1.id"`, and the separator in the value needs to use `.`
+At this point, if you want to specify the value corresponding to the current `form-item` as `id: '2222'`, you need to set `field="people.2.id"`, and the separator in the value needs to use `.`
 
 ### About using clickable elements in the label slot
 
diff --git a/packages/web-vue/components/form/README.zh-CN.md b/packages/web-vue/components/form/README.zh-CN.md
index f1be6bee2..8d7747c0f 100644
--- a/packages/web-vue/components/form/README.zh-CN.md
+++ b/packages/web-vue/components/form/README.zh-CN.md
@@ -216,7 +216,7 @@ const data = reactive({
   ]
 })
 ```
-此时，如果想要指定当前 `form-item` 对应的值为 `id: '2222'`，需要设置 `field="people.1.id"`，值中的分隔符需要使用 `.`。数组分割也可以使用 `[]`，例如 `field="people[1].id"`
+此时，如果想要指定当前 `form-item` 对应的值为 `id: '2222'`，需要设置 `field="people.2.id"`，值中的分隔符需要使用 `.`。数组分割也可以使用 `[]`，例如 `field="people[2].id"`
 
 ### 关于在 label 插槽中使用可点击元素
 
diff --git a/packages/web-vue/components/image/README.en-US.md b/packages/web-vue/components/image/README.en-US.md
index 7794d42a4..a833ed401 100644
--- a/packages/web-vue/components/image/README.en-US.md
+++ b/packages/web-vue/components/image/README.en-US.md
@@ -112,7 +112,7 @@ description: Used to show and preview pictures.
 |mask-closable|Whether to close the modal when mask is clicked|`boolean`|`true`|
 |closable|Whether to show close button|`boolean`|`true`|
 |actions-layout|Layout of action list|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
-|popup-container|Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body|`HTMLElement \| string`|`-`|
+|popup-container|Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body|`string \| HTMLElement`|`-`|
 ### `<image-preview-group>` Events
 
 |Event Name|Description|Parameters|
diff --git a/packages/web-vue/components/image/README.zh-CN.md b/packages/web-vue/components/image/README.zh-CN.md
index 02c178bcc..3344ceaa2 100644
--- a/packages/web-vue/components/image/README.zh-CN.md
+++ b/packages/web-vue/components/image/README.zh-CN.md
@@ -110,7 +110,7 @@ description: 展示和预览图片。
 |mask-closable|点击 mask 是否触发关闭|`boolean`|`true`|
 |closable|是否显示关闭按钮|`boolean`|`true`|
 |actions-layout|控制条的布局|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
-|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`HTMLElement \| string`|`-`|
+|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`string \| HTMLElement`|`-`|
 ### `<image-preview-group>` Events
 
 |事件名|描述|参数|
diff --git a/packages/web-vue/components/popconfirm/README.en-US.md b/packages/web-vue/components/popconfirm/README.en-US.md
index ab25d3f14..4b5b597a6 100644
--- a/packages/web-vue/components/popconfirm/README.en-US.md
+++ b/packages/web-vue/components/popconfirm/README.en-US.md
@@ -39,7 +39,7 @@ description: Click on the element and a popconfirm will pop up.
 |content-style|The style of the popup content|`CSSProperties`|`-`|
 |arrow-class|The class name of the popup arrow|`ClassName`|`-`|
 |arrow-style|The style of the popup arrow|`CSSProperties`|`-`|
-|popup-container|Mount container for popup|`string \| HTMLElement \| undefined`|`-`|
+|popup-container|Mount container for popup|`string \| HTMLElement`|`-`|
 |on-before-ok|The callback function before the ok event is triggered. If false is returned, subsequent events will not be triggered, and done can also be used to close asynchronously.|`(  done: (closed: boolean) => void) => void \| boolean \| Promise<void \| boolean>`|`-`|
 |on-before-cancel|The callback function before the cancel event is triggered. If it returns false, no subsequent events will be triggered.|`() => boolean`|`-`|
 ### `<popconfirm>` Events
diff --git a/packages/web-vue/components/popconfirm/README.zh-CN.md b/packages/web-vue/components/popconfirm/README.zh-CN.md
index f40dd72dc..9126b341a 100644
--- a/packages/web-vue/components/popconfirm/README.zh-CN.md
+++ b/packages/web-vue/components/popconfirm/README.zh-CN.md
@@ -37,7 +37,7 @@ description: 点击元素，弹出气泡式的确认框。
 |content-style|弹出框内容的样式|`CSSProperties`|`-`|
 |arrow-class|弹出框箭头的类名|`ClassName`|`-`|
 |arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|
-|popup-container|弹出框的挂载点|`string \| HTMLElement \| undefined`|`-`|
+|popup-container|弹出框的挂载点|`string \| HTMLElement`|`-`|
 |on-before-ok|触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。|`(  done: (closed: boolean) => void) => void \| boolean \| Promise<void \| boolean>`|`-`|
 |on-before-cancel|触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。|`() => boolean`|`-`|
 ### `<popconfirm>` Events
diff --git a/packages/web-vue/components/popover/README.en-US.md b/packages/web-vue/components/popover/README.en-US.md
index 5c738a0bf..eca03d69d 100644
--- a/packages/web-vue/components/popover/README.en-US.md
+++ b/packages/web-vue/components/popover/README.en-US.md
@@ -33,7 +33,7 @@ description: When the mouse hovers, focus, or click on a component, a bubble-lik
 |content-style|The style of the popup content|`CSSProperties`|`-`|
 |arrow-class|The class name of the popup arrow|`ClassName`|`-`|
 |arrow-style|The style of the popup arrow|`CSSProperties`|`-`|
-|popup-container|Mount container for pop-up box|`string \| HTMLElement \| null \| undefined`|`-`|
+|popup-container|Mount container for pop-up box|`string \| HTMLElement`|`-`|
 ### `<popover>` Events
 
 |Event Name|Description|Parameters|
diff --git a/packages/web-vue/components/popover/README.zh-CN.md b/packages/web-vue/components/popover/README.zh-CN.md
index 4f784d3d6..27c880372 100644
--- a/packages/web-vue/components/popover/README.zh-CN.md
+++ b/packages/web-vue/components/popover/README.zh-CN.md
@@ -31,7 +31,7 @@ description: 鼠标悬停、聚焦或点击在某个组件时，弹出的气泡
 |content-style|弹出框内容的样式|`CSSProperties`|`-`|
 |arrow-class|弹出框箭头的类名|`ClassName`|`-`|
 |arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|
-|popup-container|弹出框的挂载容器|`string \| HTMLElement \| null \| undefined`|`-`|
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
 ### `<popover>` Events
 
 |事件名|描述|参数|
diff --git a/packages/web-vue/components/tooltip/README.en-US.md b/packages/web-vue/components/tooltip/README.en-US.md
index c940f6737..af6fd8214 100644
--- a/packages/web-vue/components/tooltip/README.en-US.md
+++ b/packages/web-vue/components/tooltip/README.en-US.md
@@ -35,7 +35,7 @@ description: A tooltip that popup when the mouse hovers, focus, or click on a co
 |content-style|The style of the popup content|`CSSProperties`|`-`|
 |arrow-class|The class name of the popup arrow|`ClassName`|`-`|
 |arrow-style|The style of the popup arrow|`CSSProperties`|`-`|
-|popup-container|Mount container for popup|`string \| HTMLElement \| null \| undefined`|`-`|
+|popup-container|Mount container for popup|`string \| HTMLElement`|`-`|
 ### `<tooltip>` Events
 
 |Event Name|Description|Parameters|
diff --git a/packages/web-vue/components/tooltip/README.zh-CN.md b/packages/web-vue/components/tooltip/README.zh-CN.md
index 9d8633004..d7ea17e4f 100644
--- a/packages/web-vue/components/tooltip/README.zh-CN.md
+++ b/packages/web-vue/components/tooltip/README.zh-CN.md
@@ -33,7 +33,7 @@ description: 鼠标悬停、聚焦或点击在某个组件时，弹出的文字
 |content-style|弹出框内容的样式|`CSSProperties`|`-`|
 |arrow-class|弹出框箭头的类名|`ClassName`|`-`|
 |arrow-style|弹出框箭头的样式|`CSSProperties`|`-`|
-|popup-container|弹出框的挂载容器|`string \| HTMLElement \| null \| undefined`|`-`|
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
 ### `<tooltip>` Events
 
 |事件名|描述|参数|
diff --git a/packages/web-vue/components/transfer/CHANGELOG.md b/packages/web-vue/components/transfer/CHANGELOG.md
index 27616d204..126ef4da6 100644
--- a/packages/web-vue/components/transfer/CHANGELOG.md
+++ b/packages/web-vue/components/transfer/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 BugFix
+
+- fix disabled behavior in transfer simple mode ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md b/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md
index c0617afd4..58eead860 100644
--- a/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/transfer/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 问题修复
+
+- 修复 simple 模式下禁用失效 ([#3067](https://github.com/arco-design/arco-design-vue/pull/3067))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/components/tree-select/README.en-US.md b/packages/web-vue/components/tree-select/README.en-US.md
index 115f69b9b..4fed50d4c 100644
--- a/packages/web-vue/components/tree-select/README.en-US.md
+++ b/packages/web-vue/components/tree-select/README.en-US.md
@@ -74,7 +74,7 @@ description: The tree structure data can be selected.
 |filter-tree-node|Custom node filter function|`(searchKey: string, nodeData: TreeNodeData) => boolean`|`-`||
 |load-more|Load data dynamically|`(nodeData: TreeNodeData) => Promise<void>`|`-`||
 |disable-filter|Disable internal filtering logic|`boolean`|`false`||
-|popup-container|Mount container for pop-up box|`string \| HTMLElement \| undefined`|`-`||
+|popup-container|Mount container for pop-up box|`string \| HTMLElement`|`-`||
 |fallback-option|Customize node data for keys that do not match options|`boolean \| ((key: number \| string) => TreeNodeData \| boolean)`|`true`|2.22.0|
 |selectable|Set the nodes that can be selected, all can be selected by default|`boolean\| 'leaf'\| ((    node: TreeNodeData,    info: { isLeaf: boolean; level: number }  ) => boolean)`|`true`|2.27.0|
 |scrollbar|Whether to enable virtual scroll bar|`boolean \| ScrollbarProps`|`true`|2.39.0|
diff --git a/packages/web-vue/components/tree-select/README.zh-CN.md b/packages/web-vue/components/tree-select/README.zh-CN.md
index 153252dcd..9b546a0d3 100644
--- a/packages/web-vue/components/tree-select/README.zh-CN.md
+++ b/packages/web-vue/components/tree-select/README.zh-CN.md
@@ -72,7 +72,7 @@ description: 可以对树形结构数据进行选择。
 |filter-tree-node|自定义节点过滤函数|`(searchKey: string, nodeData: TreeNodeData) => boolean`|`-`||
 |load-more|动态加载数据|`(nodeData: TreeNodeData) => Promise<void>`|`-`||
 |disable-filter|禁用内部过滤逻辑|`boolean`|`false`||
-|popup-container|弹出框的挂载容器|`string \| HTMLElement \| undefined`|`-`||
+|popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`||
 |fallback-option|为 value 中找不到匹配项的 key 定义节点数据|`boolean \| ((key: number \| string) => TreeNodeData \| boolean)`|`true`|2.22.0|
 |selectable|设置可选择的节点，默认全部可选|`boolean\| 'leaf'\| ((    node: TreeNodeData,    info: { isLeaf: boolean; level: number }  ) => boolean)`|`true`|2.27.0|
 |scrollbar|是否开启虚拟滚动条|`boolean \| ScrollbarProps`|`true`|2.39.0|
diff --git a/packages/web-vue/components/upload/CHANGELOG.md b/packages/web-vue/components/upload/CHANGELOG.md
index 817930d89..48ff7bf94 100644
--- a/packages/web-vue/components/upload/CHANGELOG.md
+++ b/packages/web-vue/components/upload/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 BugFix
+
+- import missing image styles for upload component ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/components/upload/CHANGELOG.zh-CN.md b/packages/web-vue/components/upload/CHANGELOG.zh-CN.md
index 2ba653e46..4784c297c 100644
--- a/packages/web-vue/components/upload/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/upload/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 问题修复
+
+- 修复上传组件预览样式引入缺失 ([#3101](https://github.com/arco-design/arco-design-vue/pull/3101))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/components/verification-code/CHANGELOG.md b/packages/web-vue/components/verification-code/CHANGELOG.md
new file mode 100644
index 000000000..548893465
--- /dev/null
+++ b/packages/web-vue/components/verification-code/CHANGELOG.md
@@ -0,0 +1,12 @@
+```yaml
+changelog: true
+```
+
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 BugFix
+
+- fix formatter not being applied during paste ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))
+
diff --git a/packages/web-vue/components/verification-code/CHANGELOG.zh-CN.md b/packages/web-vue/components/verification-code/CHANGELOG.zh-CN.md
new file mode 100644
index 000000000..023de3669
--- /dev/null
+++ b/packages/web-vue/components/verification-code/CHANGELOG.zh-CN.md
@@ -0,0 +1,12 @@
+```yaml
+changelog: true
+```
+
+## 2.55.2
+
+`2024-05-10`
+
+### 🐛 问题修复
+
+- 修复粘贴时`formatter`未生效 ([#3110](https://github.com/arco-design/arco-design-vue/pull/3110))
+
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index 62c6b1afb..4cca4aaaa 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.55.1",
+  "version": "2.55.2",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",

From d67843db265ccd4e33d6787105028be7b2d625bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 7 Jun 2024 16:32:09 +0800
Subject: [PATCH 34/45] fix(time-picker): fix issue with read-only mode still
 being editable (#3173)

---
 packages/web-vue/components/time-picker/README.en-US.md | 2 +-
 packages/web-vue/components/time-picker/README.zh-CN.md | 2 +-
 packages/web-vue/components/time-picker/time-picker.vue | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-vue/components/time-picker/README.en-US.md b/packages/web-vue/components/time-picker/README.en-US.md
index 4241c404b..4950aa1bc 100644
--- a/packages/web-vue/components/time-picker/README.en-US.md
+++ b/packages/web-vue/components/time-picker/README.en-US.md
@@ -47,7 +47,7 @@ description: Select the time on the pop-up panel to conveniently complete the ti
 |readonly|Whether it is read-only mode|`boolean`|`false`|
 |error|Whether it is an error state|`boolean`|`false`|
 |format|Display the format of the date, refer to [String Parsing Format](#String Parsing Format)|`string`|`'HH:mm:ss'`|
-|placeholder|Prompt copy|`string`|`-`|
+|placeholder|Prompt copy|`string \| string[]`|`-`|
 |size|Input box size|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
 |popup-container|Mount container for pop-up box|`string \| HTMLElement`|`-`|
 |use12-hours|12 hour clock|`boolean`|`false`|
diff --git a/packages/web-vue/components/time-picker/README.zh-CN.md b/packages/web-vue/components/time-picker/README.zh-CN.md
index c6eb8b669..226ed1cc7 100644
--- a/packages/web-vue/components/time-picker/README.zh-CN.md
+++ b/packages/web-vue/components/time-picker/README.zh-CN.md
@@ -45,7 +45,7 @@ description: 在弹出面板上选择时间，以便捷完成时间输入的控
 |readonly|是否为只读模式|`boolean`|`false`|
 |error|是否为错误状态|`boolean`|`false`|
 |format|展示日期的格式，参考[字符串解析格式](#字符串解析格式)|`string`|`'HH:mm:ss'`|
-|placeholder|提示文案|`string`|`-`|
+|placeholder|提示文案|`string \| string[]`|`-`|
 |size|输入框尺寸|`'mini' \| 'small' \| 'medium' \| 'large'`|`'medium'`|
 |popup-container|弹出框的挂载容器|`string \| HTMLElement`|`-`|
 |use12-hours|12 小时制|`boolean`|`false`|
diff --git a/packages/web-vue/components/time-picker/time-picker.vue b/packages/web-vue/components/time-picker/time-picker.vue
index 354d9fd56..5266650bd 100644
--- a/packages/web-vue/components/time-picker/time-picker.vue
+++ b/packages/web-vue/components/time-picker/time-picker.vue
@@ -28,6 +28,7 @@
       :visible="panelVisible"
       :disabled="mergedDisabled"
       :error="error"
+      :readonly="readonly"
       :editable="!readonly"
       :allow-clear="allowClear && !readonly"
       :placeholder="computedPlaceholder"
@@ -93,7 +94,6 @@ import Trigger, { TriggerProps } from '../trigger';
 import DateInput from '../_components/picker/input.vue';
 import DateRangeInput from '../_components/picker/input-range.vue';
 import IconClockCircle from '../icon/icon-clock-circle';
-import { TimePickerProps } from './interface';
 import useState from '../_hooks/use-state';
 import useTimeFormat from './hooks/use-time-format';
 import useTimeState from './hooks/use-time-state';
@@ -190,7 +190,7 @@ export default defineComponent({
      * @en Prompt copy
      * */
     placeholder: {
-      type: String,
+      type: [String, Array] as PropType<string | string[]>,
     },
     /**
      * @zh 输入框尺寸

From 5b9905a3dc00aee5ee412164067c172fe10fda4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 7 Jun 2024 16:32:54 +0800
Subject: [PATCH 35/45] fix(input): fix display of allow-clear input button in
 read-only state (#3172)

---
 packages/web-vue/components/input/input.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-vue/components/input/input.tsx b/packages/web-vue/components/input/input.tsx
index 69755a708..bd322015d 100644
--- a/packages/web-vue/components/input/input.tsx
+++ b/packages/web-vue/components/input/input.tsx
@@ -215,6 +215,7 @@ export default defineComponent({
     const showClearBtn = computed(
       () =>
         props.allowClear &&
+        !props.readonly &&
         !mergedDisabled.value &&
         Boolean(computedValue.value)
     );

From 55eff67a5694a2d43d94296fbcf7c2d771f1a0fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 7 Jun 2024 16:44:13 +0800
Subject: [PATCH 36/45] fix(table): fix table sticky-header failure with
 scrollbar (#3170)

---
 .../components/table/__demo__/sticky.md       |  2 +-
 .../__test__/__snapshots__/demo.test.ts.snap  |  4 +-
 packages/web-vue/components/table/table.tsx   | 57 +++++++------------
 3 files changed, 22 insertions(+), 41 deletions(-)

diff --git a/packages/web-vue/components/table/__demo__/sticky.md b/packages/web-vue/components/table/__demo__/sticky.md
index 760ca2a87..f7ffea51b 100644
--- a/packages/web-vue/components/table/__demo__/sticky.md
+++ b/packages/web-vue/components/table/__demo__/sticky.md
@@ -18,7 +18,7 @@ Set the header suction via `sticky-header`. The calculation container for the to
 
 ```vue
 <template>
-  <a-table :columns="columns" :data="data" :sticky-header="100"/>
+  <a-table :columns="columns" :data="data" :sticky-header="60"/>
 </template>
 
 <script>
diff --git a/packages/web-vue/components/table/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/table/__test__/__snapshots__/demo.test.ts.snap
index ca2371679..1551ebe7c 100644
--- a/packages/web-vue/components/table/__test__/__snapshots__/demo.test.ts.snap
+++ b/packages/web-vue/components/table/__test__/__snapshots__/demo.test.ts.snap
@@ -3193,8 +3193,8 @@ exports[`<table> demo: render [sticky] correctly 1`] = `
     <div class=\\"arco-table-container arco-table-scroll-y\\">
       <div class=\\"arco-scrollbar arco-scrollbar-type-embed\\" style=\\"height: 100%;\\">
         <div class=\\"arco-scrollbar-container arco-table-content\\">
-          <div class=\\"arco-scrollbar arco-scrollbar-type-embed\\">
-            <div class=\\"arco-scrollbar-container arco-table-header arco-table-header-sticky\\" style=\\"top: 100px;\\">
+          <div class=\\"arco-scrollbar arco-scrollbar-type-embed arco-table-header-sticky\\" style=\\"top: 60px;\\">
+            <div class=\\"arco-scrollbar-container arco-table-header\\">
               <table class=\\"arco-table-element\\" cellpadding=\\"0\\" cellspacing=\\"0\\">
                 <colgroup>
                   <col>
diff --git a/packages/web-vue/components/table/table.tsx b/packages/web-vue/components/table/table.tsx
index 056739aa8..a9c0632d0 100644
--- a/packages/web-vue/components/table/table.tsx
+++ b/packages/web-vue/components/table/table.tsx
@@ -1708,36 +1708,6 @@ export default defineComponent({
       return null;
     };
 
-    const renderVirtualListBody = () => {
-      return (
-        <ClientOnly>
-          <VirtualList
-            v-slots={{
-              item: ({
-                item,
-                index,
-              }: {
-                item: TableDataWithRaw;
-                index: number;
-              }) => renderRecord(item, index),
-            }}
-            ref={virtualComRef}
-            class={`${prefixCls}-body`}
-            data={flattenData.value}
-            itemKey="_key"
-            type="table"
-            outerAttrs={{
-              class: `${prefixCls}-element`,
-              style: contentStyle.value,
-            }}
-            {...props.virtualListProps}
-            onResize={handleTbodyResize}
-            onScroll={handleScroll}
-          />
-        </ClientOnly>
-      );
-    };
-
     const renderExpandBtn = (
       record: TableDataWithRaw,
       stopPropagation = true
@@ -2058,14 +2028,17 @@ export default defineComponent({
 
     const renderContent = () => {
       if (splitTable.value) {
-        const style: CSSProperties = {};
-        if (hasScrollBar.value) {
-          style.overflowY = 'scroll';
-        }
-        if (isNumber(props.stickyHeader)) {
-          style.top = `${props.stickyHeader}px`;
+        const top = isNumber(props.stickyHeader)
+          ? `${props.stickyHeader}px`
+          : undefined;
+
+        const mergeOuterClass = [scrollbarProps.value?.outerClass];
+        if (props.stickyHeader) {
+          mergeOuterClass.push(`${prefixCls}-header-sticky`);
         }
 
+        const mergeOuterStyle = { top, ...scrollbarProps.value?.outerStyle };
+
         const Component = displayScrollbar.value ? Scrollbar : 'div';
 
         return (
@@ -2075,14 +2048,22 @@ export default defineComponent({
                 ref={theadComRef}
                 class={[
                   `${prefixCls}-header`,
-                  { [`${prefixCls}-header-sticky`]: props.stickyHeader },
+                  {
+                    [`${prefixCls}-header-sticky`]:
+                      props.stickyHeader && !displayScrollbar.value,
+                  },
                 ]}
-                style={style}
+                style={{
+                  overflowY: hasScrollBar.value ? 'scroll' : undefined,
+                  top: !displayScrollbar.value ? top : undefined,
+                }}
                 {...(scrollbar.value
                   ? {
                       hide: flattenData.value.length !== 0,
                       disableVertical: true,
                       ...scrollbarProps.value,
+                      outerClass: mergeOuterClass,
+                      outerStyle: mergeOuterStyle,
                     }
                   : undefined)}
               >

From 48e35e7e4e0e7e3ce071a2f1ec0cce865de75dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <184555556@qq.com>
Date: Fri, 7 Jun 2024 17:41:57 +0800
Subject: [PATCH 37/45] fix(table): Fixed table row-selection table selection
 style not being hidden after dynamic change (#3155)

---
 packages/web-vue/components/table/table.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/components/table/table.tsx b/packages/web-vue/components/table/table.tsx
index a9c0632d0..84a731977 100644
--- a/packages/web-vue/components/table/table.tsx
+++ b/packages/web-vue/components/table/table.tsx
@@ -1848,7 +1848,9 @@ export default defineComponent({
             ]}
             rowIndex={rowIndex}
             record={record}
-            checked={selectedRowKeys.value?.includes(currentKey)}
+            checked={
+              props.rowSelection && selectedRowKeys.value?.includes(currentKey)
+            }
             // @ts-ignore
             onClick={(ev: Event) => handleRowClick(record, ev)}
             onDblclick={(ev: Event) => handleRowDblclick(record, ev)}

From 5301be9b195dbac7ad1eac9542c71d55bc6323b6 Mon Sep 17 00:00:00 2001
From: chenguanyin <15294692443@163.com>
Date: Fri, 7 Jun 2024 17:51:35 +0800
Subject: [PATCH 38/45] feat(table): colum added the minWidth attribute (#3157)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 陈关印 <chenguanyin@digitforce.com>
---
 packages/web-vue/components/table/README.zh-CN.md     |  2 ++
 packages/web-vue/components/table/__demo__/resize.md  |  2 ++
 packages/web-vue/components/table/interface.ts        |  5 +++++
 packages/web-vue/components/table/table-col-group.vue | 11 ++++++++---
 packages/web-vue/components/table/table-column.tsx    |  8 +++++++-
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/web-vue/components/table/README.zh-CN.md b/packages/web-vue/components/table/README.zh-CN.md
index 6202956a8..c6c196fb1 100644
--- a/packages/web-vue/components/table/README.zh-CN.md
+++ b/packages/web-vue/components/table/README.zh-CN.md
@@ -162,6 +162,7 @@ description: 用于数据收集展示、分析整理、操作处理。
 |data-index|列信息的标识，对应TableData中的数据|`string`|`-`||
 |title|列标题|`string`|`-`||
 |width|列宽度|`number`|`-`||
+|min-width|最小列宽|`number`|`-`||
 |align|对齐方向|`TableColumnData['align']`|`-`||
 |fixed|固定位置|`TableColumnData['fixed']`|`-`||
 |ellipsis|是否显示为省略|`boolean`|`false`||
@@ -252,6 +253,7 @@ type Sorter = { filed: string; direction: 'ascend' | 'descend' } | Record<string
 |dataIndex|列信息的标识，对应 `TableData` 中的数据|`string`|`-`||
 |title|列标题|`string \| RenderFunction`|`-`||
 |width|列宽度|`number`|`-`||
+|minWidth|最小列宽|`number`|`-`||
 |align|对齐方向|`'left' \| 'center' \| 'right'`|`-`||
 |fixed|固定位置|`'left' \| 'right'`|`-`||
 |ellipsis|是否显示省略号|`boolean`|`false`||
diff --git a/packages/web-vue/components/table/__demo__/resize.md b/packages/web-vue/components/table/__demo__/resize.md
index 3637739c6..3bbc5574b 100644
--- a/packages/web-vue/components/table/__demo__/resize.md
+++ b/packages/web-vue/components/table/__demo__/resize.md
@@ -31,11 +31,13 @@ export default {
         title: 'Name',
         dataIndex: 'name',
         width: 150,
+        minWidth: 100,
       },
       {
         title: 'Salary',
         dataIndex: 'salary',
         width: 120,
+        minWidth: 80,
       },
       {
         title: 'Address',
diff --git a/packages/web-vue/components/table/interface.ts b/packages/web-vue/components/table/interface.ts
index 747741c72..dc3a9851c 100644
--- a/packages/web-vue/components/table/interface.ts
+++ b/packages/web-vue/components/table/interface.ts
@@ -167,6 +167,11 @@ export interface TableColumnData {
    * @en Column width
    */
   width?: number;
+  /**
+   * @zh 最小列宽
+   * @en Minimum column width
+   */
+  minWidth?: number;
   /**
    * @zh 对齐方向
    * @en Alignment direction
diff --git a/packages/web-vue/components/table/table-col-group.vue b/packages/web-vue/components/table/table-col-group.vue
index 00c17ab9e..cb6b7da10 100644
--- a/packages/web-vue/components/table/table-col-group.vue
+++ b/packages/web-vue/components/table/table-col-group.vue
@@ -12,7 +12,8 @@
       :style="
         fixedWidth(
           (columnWidth && item.dataIndex && columnWidth[item.dataIndex]) ||
-            item.width
+            item.width,
+          item.minWidth
         )
       "
     />
@@ -39,14 +40,18 @@ export default defineComponent({
     },
   },
   setup() {
-    const fixedWidth = (width?: number) => {
+    const fixedWidth = (width?: number, minWidth?: number) => {
       if (width) {
+        const min = Math.max(width, minWidth || 0);
         return {
           width: `${width}px`,
-          minWidth: `${width}px`,
+          minWidth: `${min}px`,
           maxWidth: `${width}px`,
         };
       }
+      if (minWidth) {
+        return { minWidth: `${minWidth}px` };
+      }
       return undefined;
     };
     return {
diff --git a/packages/web-vue/components/table/table-column.tsx b/packages/web-vue/components/table/table-column.tsx
index a650d402b..474282612 100644
--- a/packages/web-vue/components/table/table-column.tsx
+++ b/packages/web-vue/components/table/table-column.tsx
@@ -45,6 +45,11 @@ export default defineComponent({
      * @en Column width
      */
     width: Number,
+    /**
+     * @zh 最小列宽
+     * @en Minimum column width
+     */
+    minWidth: Number,
     /**
      * @zh 对齐方向
      * @en Alignment direction
@@ -203,7 +208,7 @@ export default defineComponent({
    * @version 2.23.0
    */
   setup(props, { slots }) {
-    const { dataIndex, title, width, align, fixed, ellipsis, index } =
+    const { dataIndex, title, width, align, fixed, ellipsis, index, minWidth } =
       toRefs(props);
     const sortable = usePureProp(props, 'sortable');
     const filterable = usePureProp(props, 'filterable');
@@ -266,6 +271,7 @@ export default defineComponent({
       dataIndex,
       title,
       width,
+      minWidth,
       align,
       fixed,
       ellipsis,

From 6e7269c2b02a26c61b763482ce5f5f672362ecdc Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Fri, 7 Jun 2024 18:12:38 +0800
Subject: [PATCH 39/45] release version

---
 packages/web-vue/CHANGELOG.md                   | 17 +++++++++++++++++
 packages/web-vue/CHANGELOG.zh-CN.md             | 17 +++++++++++++++++
 packages/web-vue/components/input/CHANGELOG.md  |  9 +++++++++
 .../web-vue/components/input/CHANGELOG.zh-CN.md |  9 +++++++++
 packages/web-vue/components/table/CHANGELOG.md  | 14 ++++++++++++++
 .../web-vue/components/table/CHANGELOG.zh-CN.md | 14 ++++++++++++++
 .../web-vue/components/table/README.en-US.md    |  2 ++
 .../web-vue/components/time-picker/CHANGELOG.md | 10 ++++++++++
 .../components/time-picker/CHANGELOG.zh-CN.md   | 10 ++++++++++
 packages/web-vue/package.json                   |  2 +-
 10 files changed, 103 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index 5b07bb437..300aca60e 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,23 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🆕 Feature
+
+- **table:** colum added the minWidth attribute ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))
+
+### 🐛 BugFix
+
+- **time-picker:** Fix issue with read-only mode still being editable ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+- **time-picker:** Added `placeholder` type definition ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+- **input:** fix display of allow-clear input button in read-only state ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))
+- **table:** fix table sticky-header failure with scrollbar ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))
+- **table:** Restore default style when table dynamically switches row-selection ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))
+
+
 ## 2.55.2
 
 `2024-05-10`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index 1a6d736ce..5dc41f93c 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,23 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🆕 新增功能
+
+- **table:** column 增加 minWidth 属性 ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))
+
+### 🐛 问题修复
+
+- **time-picker:** 修复只读模式仍可编辑问题 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+- **time-picker:** 补充 `placeholder` 类型定义 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+- **input:** 修复只读状态下显示清空输入框按钮 ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))
+- **table:** 修复虚拟滚动条开启时 sticky-header 吸顶失效 ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))
+- **table:** table动态切换row-selection时恢复默认样式 ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))
+
+
 ## 2.55.2
 
 `2024-05-10`
diff --git a/packages/web-vue/components/input/CHANGELOG.md b/packages/web-vue/components/input/CHANGELOG.md
index a10593dbd..121dc6d0c 100644
--- a/packages/web-vue/components/input/CHANGELOG.md
+++ b/packages/web-vue/components/input/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🐛 BugFix
+
+- fix display of allow-clear input button in read-only state ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))
+
+
 ## 2.54.3
 
 `2024-01-19`
diff --git a/packages/web-vue/components/input/CHANGELOG.zh-CN.md b/packages/web-vue/components/input/CHANGELOG.zh-CN.md
index da1d44f70..1f37cd531 100644
--- a/packages/web-vue/components/input/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/input/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🐛 问题修复
+
+- 修复只读状态下显示清空输入框按钮 ([#3172](https://github.com/arco-design/arco-design-vue/pull/3172))
+
+
 ## 2.54.3
 
 `2024-01-19`
diff --git a/packages/web-vue/components/table/CHANGELOG.md b/packages/web-vue/components/table/CHANGELOG.md
index 8afa1ebcf..2f1e3f8e1 100644
--- a/packages/web-vue/components/table/CHANGELOG.md
+++ b/packages/web-vue/components/table/CHANGELOG.md
@@ -2,6 +2,20 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🆕 Feature
+
+- colum added the minWidth attribute ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))
+
+### 🐛 BugFix
+
+- fix table sticky-header failure with scrollbar ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))
+- Restore default style when table dynamically switches row-selection ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))
+
+
 ## 2.54.4
 
 `2024-02-02`
diff --git a/packages/web-vue/components/table/CHANGELOG.zh-CN.md b/packages/web-vue/components/table/CHANGELOG.zh-CN.md
index 63e7aed27..99f1fe067 100644
--- a/packages/web-vue/components/table/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/table/CHANGELOG.zh-CN.md
@@ -2,6 +2,20 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🆕 新增功能
+
+- column 增加 minWidth 属性 ([#3157](https://github.com/arco-design/arco-design-vue/pull/3157))
+
+### 🐛 问题修复
+
+- 修复虚拟滚动条开启时 sticky-header 吸顶失效 ([#3170](https://github.com/arco-design/arco-design-vue/pull/3170))
+- table动态切换row-selection时恢复默认样式 ([#3155](https://github.com/arco-design/arco-design-vue/pull/3155))
+
+
 ## 2.54.4
 
 `2024-02-02`
diff --git a/packages/web-vue/components/table/README.en-US.md b/packages/web-vue/components/table/README.en-US.md
index bf7ee303a..38643a2b6 100644
--- a/packages/web-vue/components/table/README.en-US.md
+++ b/packages/web-vue/components/table/README.en-US.md
@@ -164,6 +164,7 @@ description: It is used for data collection, display, analysis and processing, a
 |data-index|Identifies the column information, corresponding to the data in TableData|`string`|`-`||
 |title|Column title|`string`|`-`||
 |width|Column width|`number`|`-`||
+|min-width|Minimum column width|`number`|`-`||
 |align|Alignment direction|`TableColumnData['align']`|`-`||
 |fixed|Fixed position|`TableColumnData['fixed']`|`-`||
 |ellipsis|Whether to display as omitted|`boolean`|`false`||
@@ -254,6 +255,7 @@ type Sorter = { filed: string; direction: 'ascend' | 'descend' } | Record<string
 |dataIndex|The identifier of the column information, corresponding to the data in `TableData`|`string`|`-`||
 |title|Column header|`string \| RenderFunction`|`-`||
 |width|Column width|`number`|`-`||
+|minWidth|Minimum column width|`number`|`-`||
 |align|Alignment direction|`'left' \| 'center' \| 'right'`|`-`||
 |fixed|Fixed position|`'left' \| 'right'`|`-`||
 |ellipsis|Whether to show ellipsis|`boolean`|`false`||
diff --git a/packages/web-vue/components/time-picker/CHANGELOG.md b/packages/web-vue/components/time-picker/CHANGELOG.md
index 4c3decab0..085fb2982 100644
--- a/packages/web-vue/components/time-picker/CHANGELOG.md
+++ b/packages/web-vue/components/time-picker/CHANGELOG.md
@@ -2,6 +2,16 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🐛 BugFix
+
+- Fix issue with read-only mode still being editable ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+- Added `placeholder` type definition ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+
+
 ## 2.44.6
 
 `2023-03-31`
diff --git a/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md b/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md
index d9ffcbb41..c78937366 100644
--- a/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md
@@ -2,6 +2,16 @@
 changelog: true
 ```
 
+## 2.55.3
+
+`2024-06-07`
+
+### 🐛 问题修复
+
+- 修复只读模式仍可编辑问题 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+- 补充 `placeholder` 类型定义 ([#3173](https://github.com/arco-design/arco-design-vue/pull/3173))
+
+
 ## 2.44.6
 
 `2023-03-31`
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index 4cca4aaaa..03a62b33c 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.55.2",
+  "version": "2.55.3",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",

From 2e54ebd776c14c0a73599684924df6f715f141f9 Mon Sep 17 00:00:00 2001
From: A_Bo <li_student@163.com>
Date: Fri, 26 Jul 2024 15:33:41 +0800
Subject: [PATCH 40/45] fix: fix tree node folding animation (#3234)

Co-authored-by: liwenbo <liwenbo@kanzhun.com>
---
 packages/web-vue/components/tree/expand-transition.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-vue/components/tree/expand-transition.vue b/packages/web-vue/components/tree/expand-transition.vue
index 161e8d1c3..b2a84cba8 100644
--- a/packages/web-vue/components/tree/expand-transition.vue
+++ b/packages/web-vue/components/tree/expand-transition.vue
@@ -1,6 +1,5 @@
 <template>
   <transition
-    @before-enter="onBeforeEnter"
     @enter="onEnter"
     @after-enter="onAfterEnter"
     @before-leave="onBeforeLeave"
@@ -20,11 +19,12 @@ export default defineComponent({
   emits: ['end'],
   setup(props, { emit }) {
     return {
-      onBeforeEnter(el: HTMLDivElement) {
-        el.style.height = props.expanded ? '0' : `${el.scrollHeight}px`;
-      },
       onEnter(el: HTMLDivElement) {
-        el.style.height = props.expanded ? `${el.scrollHeight}px` : '0';
+        const endHeight = `${el.scrollHeight}px`;
+        el.style.height = props.expanded ? '0' : endHeight;
+        // eslint-disable-next-line no-unused-expressions
+        el.offsetHeight;
+        el.style.height = props.expanded ? endHeight : '0';
       },
       onAfterEnter(el: HTMLDivElement) {
         el.style.height = props.expanded ? '' : '0';

From 438c42a169c66e00ab486a8ca8225f06b59bdaf5 Mon Sep 17 00:00:00 2001
From: Flsion <wangchen.flsion@bytedance.com>
Date: Fri, 26 Jul 2024 18:03:07 +0800
Subject: [PATCH 41/45] feat(input-number): add keydown event (#3248)

---
 .../components/input-number/input-number.tsx  | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx
index e5c34bcda..73dc09a06 100644
--- a/packages/web-vue/components/input-number/input-number.tsx
+++ b/packages/web-vue/components/input-number/input-number.tsx
@@ -1,12 +1,4 @@
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue';
+import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';
 import NP from 'number-precision';
 import { getPrefixCls } from '../_utils/global-config';
 import { isNumber, isUndefined } from '../_utils/is';
@@ -202,6 +194,13 @@ export default defineComponent({
      * @version 2.27.0
      */
     'input': (value: number | undefined, inputValue: string, ev: Event) => true,
+    /**
+     * @zh 按下键盘时触发
+     * @en Triggered on keydown
+     * @param {MouseEvent} ev
+     * @version 2.56.0
+     */
+    'keydown': (ev: KeyboardEvent) => true,
   },
   /**
    * @zh 前缀
@@ -430,7 +429,7 @@ export default defineComponent({
       emit('clear', ev);
     };
 
-    const onKeyDown = getKeyDownHandler(
+    const keyDownHandler = getKeyDownHandler(
       new Map([
         [
           KEYBOARD_KEY.ARROW_UP,
@@ -449,6 +448,13 @@ export default defineComponent({
       ])
     );
 
+    const onKeyDown = (event: KeyboardEvent) => {
+      emit('keydown', event);
+      if (!event.defaultPrevented) {
+        keyDownHandler(event);
+      }
+    };
+
     watch(
       () => props.modelValue,
       (value: number | undefined) => {

From 191615e4064c3683bcc091483ca7d496f17996c8 Mon Sep 17 00:00:00 2001
From: fuxichen <632951357@qq.com>
Date: Fri, 26 Jul 2024 18:04:12 +0800
Subject: [PATCH 42/45] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dtime-picker?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20triggerProps=20=E5=B1=9E=E6=80=A7=E6=9C=AA?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E9=80=8F=E4=BC=A0=E8=87=B3=20Tarigger=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E9=97=AE=E9=A2=98=20(#3178)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/web-vue/components/time-picker/time-picker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-vue/components/time-picker/time-picker.vue b/packages/web-vue/components/time-picker/time-picker.vue
index 5266650bd..9329634e4 100644
--- a/packages/web-vue/components/time-picker/time-picker.vue
+++ b/packages/web-vue/components/time-picker/time-picker.vue
@@ -11,6 +11,7 @@
     :prevent-focus="true"
     :unmount-on-close="unmountOnClose"
     :popup-container="popupContainer"
+    v-bind="{ ...triggerProps }"
     @popupVisibleChange="onPanelVisibleChange"
   >
     <component

From 89456f155859ca0e77ef357617b5e59db4b076e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 26 Jul 2024 18:09:54 +0800
Subject: [PATCH 43/45] enhance(menu): menu color transition of selected items
 (#3192)

---
 .../web-vue/components/menu/style/index.less  | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/web-vue/components/menu/style/index.less b/packages/web-vue/components/menu/style/index.less
index 03a834483..4c80a7b25 100644
--- a/packages/web-vue/components/menu/style/index.less
+++ b/packages/web-vue/components/menu/style/index.less
@@ -14,6 +14,16 @@
   }
 }
 
+@keyframes ~'@{prefix}-menu-selected-item-label-enter' {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .@{menu-prefix-cls} {
   position: relative;
   box-sizing: border-box;
@@ -32,6 +42,10 @@
     width: @menu-item-indent-spacing;
   }
 
+  .text-color-transition() {
+    transition: color @transition-duration-2 @transition-timing-function-linear;
+  }
+
   // menu-item 一些与 theme 和 mode 无关的样式
   .item-base() {
     @style: {
@@ -46,8 +60,11 @@
 
       &.@{menu-prefix-cls}-selected {
         font-weight: @menu-font-weight-item-selected;
-        transition: color @transition-duration-2
-          @transition-timing-function-linear;
+        .text-color-transition();
+
+        svg {
+          .text-color-transition();
+        }
       }
 
       .@{prefix}-icon,
@@ -196,8 +213,7 @@
         @item-selected-style: {
           &.@{menu-prefix-cls}-selected {
             background: none;
-            transition: color @transition-duration-2
-              @transition-timing-function-linear;
+            .text-color-transition();
 
             &:hover {
               background-color: ~'@{menu-@{theme}-color-bg-item_hover}';
@@ -331,6 +347,8 @@
     left: @menu-horizontal-item-padding-horizontal;
     height: @menu-height-label-item-selected;
     background-color: @menu-color-label-item-selected;
+    animation: ~'@{prefix}-menu-selected-item-label-enter' @transition-duration-2
+      @transition-timing-function-linear;
   }
 
   &-pop-button {

From 57a98343874793270e76ff7e63a6bc08e1733766 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <SpaceCode@foxmail.com>
Date: Fri, 26 Jul 2024 18:11:25 +0800
Subject: [PATCH 44/45] fix(color-picker): fix shaking issue when selecting
 color with v-model (#3180)

* fix(color-picker): fix shaking issue when selecting color with v-model

* chore: update test snap
---
 .../__test__/__snapshots__/demo.test.ts.snap     |  4 ++--
 .../components/color-picker/color-picker.tsx     | 16 +++++++++-------
 .../components/color-picker/control-bar.tsx      |  1 -
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
index 73476617c..0e8f34b14 100644
--- a/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
+++ b/packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
@@ -80,7 +80,7 @@ exports[`<color-picker> demo: render [only-panel] correctly 1`] = `
               <div class=\\"arco-color-picker-handler\\" style=\\"left: 61.587982832618025%; color: rgb(22, 93, 255);\\"></div>
             </div>
             <div class=\\"arco-color-picker-control-bar-bg\\">
-              <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha arco-color-picker-control-bar-alpha\\">
+              <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha\\">
                 <div class=\\"arco-color-picker-handler\\" style=\\"left: 100%; color: rgb(22, 93, 255);\\"></div>
               </div>
             </div>
@@ -192,7 +192,7 @@ exports[`<color-picker> demo: render [only-panel] correctly 1`] = `
               <div class=\\"arco-color-picker-handler\\" style=\\"left: 46.70138888888889%; color: rgb(18, 210, 172);\\"></div>
             </div>
             <div class=\\"arco-color-picker-control-bar-bg\\">
-              <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha arco-color-picker-control-bar-alpha\\">
+              <div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha\\">
                 <div class=\\"arco-color-picker-handler\\" style=\\"left: 100%; color: rgb(18, 210, 172);\\"></div>
               </div>
             </div>
diff --git a/packages/web-vue/components/color-picker/color-picker.tsx b/packages/web-vue/components/color-picker/color-picker.tsx
index 9d3bf51a7..21a81c6c9 100644
--- a/packages/web-vue/components/color-picker/color-picker.tsx
+++ b/packages/web-vue/components/color-picker/color-picker.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType, computed, reactive, watch } from 'vue';
+import { defineComponent, PropType, computed, watch } from 'vue';
 import { Size } from '../_utils/constant';
 import { getPrefixCls } from '../_utils/global-config';
 import { colors } from './colors';
@@ -150,12 +150,14 @@ export default defineComponent({
     watch(
       () => formatInput.value,
       (value) => {
-        setAlpha(value.a);
-        setHsv({
-          h: value.h,
-          s: value.s,
-          v: value.v,
-        });
+        if (mergeValue.value !== formatValue.value) {
+          setAlpha(value.a);
+          setHsv({
+            h: value.h,
+            s: value.s,
+            v: value.v,
+          });
+        }
       }
     );
 
diff --git a/packages/web-vue/components/color-picker/control-bar.tsx b/packages/web-vue/components/color-picker/control-bar.tsx
index dfa1b13e4..864063295 100644
--- a/packages/web-vue/components/color-picker/control-bar.tsx
+++ b/packages/web-vue/components/color-picker/control-bar.tsx
@@ -49,7 +49,6 @@ export default defineComponent({
               class={[
                 `${prefixCls}-control-bar`,
                 `${prefixCls}-control-bar-alpha`,
-                `${prefixCls}-control-bar-alpha`,
               ]}
               style={{
                 background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}))`,

From 867cca01a49a994178bf8434a8beccfcc1ee8930 Mon Sep 17 00:00:00 2001
From: wangchen <wangchen.flsion@bytedance.com>
Date: Fri, 26 Jul 2024 18:36:52 +0800
Subject: [PATCH 45/45] release version

---
 packages/web-vue/CHANGELOG.md                 | 19 +++++++++++++++++++
 packages/web-vue/CHANGELOG.zh-CN.md           | 19 +++++++++++++++++++
 .../components/color-picker/CHANGELOG.md      |  9 +++++++++
 .../color-picker/CHANGELOG.zh-CN.md           |  9 +++++++++
 .../components/input-number/CHANGELOG.md      |  9 +++++++++
 .../input-number/CHANGELOG.zh-CN.md           |  9 +++++++++
 .../components/input-number/README.en-US.md   |  1 +
 .../components/input-number/README.zh-CN.md   |  1 +
 packages/web-vue/components/menu/CHANGELOG.md |  9 +++++++++
 .../components/menu/CHANGELOG.zh-CN.md        |  9 +++++++++
 .../components/time-picker/CHANGELOG.md       |  9 +++++++++
 .../components/time-picker/CHANGELOG.zh-CN.md |  9 +++++++++
 packages/web-vue/components/tree/CHANGELOG.md |  9 +++++++++
 .../components/tree/CHANGELOG.zh-CN.md        |  9 +++++++++
 packages/web-vue/package.json                 |  2 +-
 15 files changed, 131 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md
index 300aca60e..2d5be5742 100644
--- a/packages/web-vue/CHANGELOG.md
+++ b/packages/web-vue/CHANGELOG.md
@@ -2,6 +2,25 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🆕 Feature
+
+- **input-number:** Added 'keydown' event to disable default behavior ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))
+
+### 🐛 BugFix
+
+- **tree:** fix tree node folding animation ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))
+- **color-picker:** fix shaking issue when selecting color with v-model ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))
+- **time-picker:** TriggerProps property not correctly passed through ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))
+
+### 💎 Enhancement
+
+- **menu:** fix color transition effect in selected menu item ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))
+
+
 ## 2.55.3
 
 `2024-06-07`
diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md
index 5dc41f93c..7c311656b 100644
--- a/packages/web-vue/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/CHANGELOG.zh-CN.md
@@ -2,6 +2,25 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🆕 新增功能
+
+- **input-number:** 增加 'keydown' 事件，可以禁止默认行为 ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))
+
+### 🐛 问题修复
+
+- **tree:** 修复树折叠动画不生效问题 ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))
+- **color-picker:** 修复在 v-model 下选择颜色时出现的抖动问题 ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))
+- **time-picker:** triggerProps 属性未正确透传问题 ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))
+
+### 💎 功能优化
+
+- **menu:** 修复已选中菜单项中的颜色动画过渡效果 ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))
+
+
 ## 2.55.3
 
 `2024-06-07`
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.md b/packages/web-vue/components/color-picker/CHANGELOG.md
index f3754b242..eff6f9ba8 100644
--- a/packages/web-vue/components/color-picker/CHANGELOG.md
+++ b/packages/web-vue/components/color-picker/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🐛 BugFix
+
+- fix shaking issue when selecting color with v-model ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))
+
+
 ## 2.55.2
 
 `2024-05-10`
diff --git a/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
index 087656bed..30d799a60 100644
--- a/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/color-picker/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🐛 问题修复
+
+- 修复在 v-model 下选择颜色时出现的抖动问题 ([#3180](https://github.com/arco-design/arco-design-vue/pull/3180))
+
+
 ## 2.55.2
 
 `2024-05-10`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.md b/packages/web-vue/components/input-number/CHANGELOG.md
index 7d994ca77..307d9ffff 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🆕 Feature
+
+- Added 'keydown' event to disable default behavior ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
index 24dbe2596..9a2140a77 100644
--- a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🆕 新增功能
+
+- 增加 'keydown' 事件，可以禁止默认行为 ([#3248](https://github.com/arco-design/arco-design-vue/pull/3248))
+
+
 ## 2.54.6
 
 `2024-03-01`
diff --git a/packages/web-vue/components/input-number/README.en-US.md b/packages/web-vue/components/input-number/README.en-US.md
index a63863e68..ee0124105 100644
--- a/packages/web-vue/components/input-number/README.en-US.md
+++ b/packages/web-vue/components/input-number/README.en-US.md
@@ -58,6 +58,7 @@ description: Only input boxes in numeric format are allowed.
 |blur|Triggered when the input box loses focus|ev: `FocusEvent`||
 |clear|Triggered when the user clicks the clear button|ev: `Event`|2.23.0|
 |input|Triggered on input|value: ` number \| undefined `<br>inputValue: `string`<br>ev: `Event`|2.27.0|
+|keydown|Triggered on keydown|ev: `MouseEvent`|2.56.0|
 ### `<input-number>` Methods
 
 |Method|Description|Parameters|Return|
diff --git a/packages/web-vue/components/input-number/README.zh-CN.md b/packages/web-vue/components/input-number/README.zh-CN.md
index ce05ac808..a307d4b95 100644
--- a/packages/web-vue/components/input-number/README.zh-CN.md
+++ b/packages/web-vue/components/input-number/README.zh-CN.md
@@ -56,6 +56,7 @@ description: 仅允许输入数字格式的输入框。
 |blur|输入框失去焦点时触发|ev: `FocusEvent`||
 |clear|用户点击清除按钮时触发|ev: `Event`|2.23.0|
 |input|输入时触发|value: ` number \| undefined `<br>inputValue: `string`<br>ev: `Event`|2.27.0|
+|keydown|按下键盘时触发|ev: `MouseEvent`|2.56.0|
 ### `<input-number>` Methods
 
 |方法名|描述|参数|返回值|
diff --git a/packages/web-vue/components/menu/CHANGELOG.md b/packages/web-vue/components/menu/CHANGELOG.md
index b3ff7e89a..3fc29c1dc 100644
--- a/packages/web-vue/components/menu/CHANGELOG.md
+++ b/packages/web-vue/components/menu/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 💎 Enhancement
+
+- fix color transition effect in selected menu item ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))
+
+
 ## 2.54.5
 
 `2024-02-21`
diff --git a/packages/web-vue/components/menu/CHANGELOG.zh-CN.md b/packages/web-vue/components/menu/CHANGELOG.zh-CN.md
index 6a3ffd1e7..0c3449a2d 100644
--- a/packages/web-vue/components/menu/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/menu/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 💎 功能优化
+
+- 修复已选中菜单项中的颜色动画过渡效果 ([#3192](https://github.com/arco-design/arco-design-vue/pull/3192))
+
+
 ## 2.54.5
 
 `2024-02-21`
diff --git a/packages/web-vue/components/time-picker/CHANGELOG.md b/packages/web-vue/components/time-picker/CHANGELOG.md
index 085fb2982..3147813e6 100644
--- a/packages/web-vue/components/time-picker/CHANGELOG.md
+++ b/packages/web-vue/components/time-picker/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🐛 BugFix
+
+- TriggerProps property not correctly passed through ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))
+
+
 ## 2.55.3
 
 `2024-06-07`
diff --git a/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md b/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md
index c78937366..8d62da6ad 100644
--- a/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/time-picker/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🐛 问题修复
+
+- triggerProps 属性未正确透传问题 ([#3178](https://github.com/arco-design/arco-design-vue/pull/3178))
+
+
 ## 2.55.3
 
 `2024-06-07`
diff --git a/packages/web-vue/components/tree/CHANGELOG.md b/packages/web-vue/components/tree/CHANGELOG.md
index c0498c14d..1e5348787 100644
--- a/packages/web-vue/components/tree/CHANGELOG.md
+++ b/packages/web-vue/components/tree/CHANGELOG.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🐛 BugFix
+
+- fix tree node folding animation ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
index 7a131738c..9540e62cc 100644
--- a/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
+++ b/packages/web-vue/components/tree/CHANGELOG.zh-CN.md
@@ -2,6 +2,15 @@
 changelog: true
 ```
 
+## 2.56.0
+
+`2024-07-26`
+
+### 🐛 问题修复
+
+- 修复树折叠动画不生效问题 ([#3234](https://github.com/arco-design/arco-design-vue/pull/3234))
+
+
 ## 2.55.1
 
 `2024-03-29`
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
index 03a62b33c..88ea14592 100644
--- a/packages/web-vue/package.json
+++ b/packages/web-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arco-design/web-vue",
-  "version": "2.55.3",
+  "version": "2.56.0",
   "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library",
   "keywords": [
     "arco",