diff --git a/examples/color-picker/color-picker.md b/examples/color-picker/color-picker.md
index 946f24ad6..c4fa00acd 100644
--- a/examples/color-picker/color-picker.md
+++ b/examples/color-picker/color-picker.md
@@ -5,20 +5,28 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' | 'linear-gradient'>` | N
 disabled | Boolean | false | 是否禁用组件 | N
 enableAlpha | Boolean | false | 是否开启透明通道 | N
-format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA/HEX8` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/HEX8/CMYK/CSS | N
-multiple | Boolean | false | 是否允许选中多个颜色 | N
-popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` 等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
-swatchColors | Array | - | 颜色样例。TS 类型：`Array<string>` | N
+format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
+multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N
+popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
+recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean | Array<string>` | N
+defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean | Array<string>` | N
+selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
+swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string>` | N
 value | String | - | 色值。支持语法糖 `v-model` | N
 defaultValue | String | - | 色值。非受控属性 | N
-onChange | Function |  | TS 类型：`(value: string, context: { colors: string[]; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.colors` 表示当前调色板的所有色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette' | 'input'`<br/> | N
-onPaletteChange | Function |  | TS 类型：`(context: { colors: string[] }) => void`<br/>调色板变化时触发，当前色板的色值 | N
+onChange | Function |  | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' | 'palette-saturation' | 'palette-brightness' | 'palette-hue-bar' | 'palette-alpha-bar' | 'input'`<br/> | N
+onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }) => void`<br/>调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/> | N
+onRecentColorsChange | Function |  | TS 类型：`(value: Array<string>) => void`<br/>最近使用颜色发生变化时触发 | N
 
 ### ColorPicker Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: string, context: { colors: string[]; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.colors` 表示当前调色板的所有色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette' | 'input'`<br/>
-palette-change | `(context: { colors: string[] })` | 调色板变化时触发，当前色板的色值
+change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' | 'palette-saturation' | 'palette-brightness' | 'palette-hue-bar' | 'palette-alpha-bar' | 'input'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/>
+recent-colors-change | `(value: Array<string>)` | 最近使用颜色发生变化时触发
diff --git a/examples/color-picker/demos/color-mode.vue b/examples/color-picker/demos/color-mode.vue
new file mode 100644
index 000000000..b5d9c61ca
--- /dev/null
+++ b/examples/color-picker/demos/color-mode.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <div class="item">
+      <h5>默认（单色 + 线性渐变）</h5>
+      <t-color-picker v-model="color1" format="CSS" />
+    </div>
+    <div class="item">
+      <h5>仅单色模式</h5>
+      <t-color-picker v-model="color2" format="CSS" :color-modes="['monochrome']" />
+    </div>
+    <div style="width: 100%"></div>
+    <div class="item">
+      <h5>仅线性渐变模式</h5>
+      <t-color-picker v-model="color3" format="CSS" :color-modes="['linear-gradient']" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color1: 'red',
+      color2: '#0052d9',
+      color3: 'linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)',
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 20px;
+}
+.item h5 {
+  font-weight: normal;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/color-picker/demos/enable-alpha.vue b/examples/color-picker/demos/enable-alpha.vue
new file mode 100644
index 000000000..e77be5567
--- /dev/null
+++ b/examples/color-picker/demos/enable-alpha.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker-panel v-model="color" format="RGBA" :enable-alpha="true" @change="handleChange" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'red',
+    };
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+  },
+};
+</script>
diff --git a/examples/color-picker/demos/panel.vue b/examples/color-picker/demos/panel.vue
new file mode 100644
index 000000000..17d8b1d61
--- /dev/null
+++ b/examples/color-picker/demos/panel.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker-panel
+      v-model="color"
+      @change="handleChange"
+      @palette-bar-change="handlePaletteChange"
+      @recent-colors-change="handleRecentColorsChange"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+    };
+  },
+  methods: {
+    handleChange(value, context) {
+      console.log(value, context);
+    },
+    handlePaletteChange(context) {
+      console.log('色相面板改变', context);
+    },
+    handleRecentColorsChange(value) {
+      console.log('最近使用颜色改变', value);
+    },
+  },
+};
+</script>
diff --git a/examples/color-picker/demos/recent-color.vue b/examples/color-picker/demos/recent-color.vue
new file mode 100644
index 000000000..7c0313ddf
--- /dev/null
+++ b/examples/color-picker/demos/recent-color.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <div>
+      <h6>预设最近使用色</h6>
+      <t-color-picker-panel
+        v-model="color"
+        :recent-colors="[
+          'red',
+          'green',
+          'yellow',
+          'blue',
+          'purple',
+          'linear-gradient(to right, #fa709a 0%, #fee140 100%)',
+          'linear-gradient(45deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%)',
+          'linear-gradient(120deg, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)',
+        ]"
+      />
+    </div>
+    <div>
+      <h6>完全不显示最近使用色</h6>
+      <t-color-picker-panel v-model="color" :recent-colors="null" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'red',
+    };
+  },
+};
+</script>
+<style scoped>
+.tdesign-demo-block-row {
+  align-items: flex-start;
+}
+h6 {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/color-picker/demos/status-disabled.vue b/examples/color-picker/demos/status-disabled.vue
new file mode 100644
index 000000000..9e9d92140
--- /dev/null
+++ b/examples/color-picker/demos/status-disabled.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker v-model="color" disabled />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'red',
+    };
+  },
+};
+</script>
diff --git a/examples/color-picker/demos/status-readonly.vue b/examples/color-picker/demos/status-readonly.vue
new file mode 100644
index 000000000..d4aff3bfa
--- /dev/null
+++ b/examples/color-picker/demos/status-readonly.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker-panel v-model="color" disabled />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+    };
+  },
+};
+</script>
diff --git a/examples/color-picker/demos/swatch-color.vue b/examples/color-picker/demos/swatch-color.vue
new file mode 100644
index 000000000..02d19ae10
--- /dev/null
+++ b/examples/color-picker/demos/swatch-color.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <div>
+      <h6>自定义系统色</h6>
+      <t-color-picker-panel v-model="color" :swatch-colors="systemColors" />
+    </div>
+    <div>
+      <h6>完全不显示系统色</h6>
+      <t-color-picker-panel v-model="color" :swatch-colors="null" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+      systemColors: ['red', 'green', 'yellow', 'blue', 'purple'],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tdesign-demo-block-row {
+  align-items: flex-start;
+}
+h6 {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/color-picker/demos/trigger.vue b/examples/color-picker/demos/trigger.vue
new file mode 100644
index 000000000..3840affdd
--- /dev/null
+++ b/examples/color-picker/demos/trigger.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="tdesign-demo-block-row">
+    <t-color-picker v-model="color" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: '#0052d9',
+    };
+  },
+};
+</script>
diff --git a/examples/color-picker/usage/props.json b/examples/color-picker/usage/props.json
new file mode 100644
index 000000000..88f0762b5
--- /dev/null
+++ b/examples/color-picker/usage/props.json
@@ -0,0 +1,16 @@
+[
+  
+  {
+    "name": "enableAlpha",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+
+  {
+    "name": "disabled",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  }
+]
\ No newline at end of file
diff --git a/examples/dialog/demos/custom/bottom.vue b/examples/dialog/demos/custom/bottom.vue
index f1b8ea734..4f41a9082 100644
--- a/examples/dialog/demos/custom/bottom.vue
+++ b/examples/dialog/demos/custom/bottom.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    <p>底部按钮有两个控制属性：confirmBtn 和 cancelBtn。属性类型有多种：string/function/object/boolean。</p><br>
+    <p>底部按钮有两个控制属性：confirmBtn 和 cancelBtn。属性类型有多种：string/function/object/boolean。</p>
+    <br />
     <t-button theme="primary" @click="visible1 = true">自定义底部按钮（文字）</t-button>
     <t-button theme="primary" @click="visible2 = true">自定义底部按钮（任何按钮属性）</t-button>
     <t-button theme="primary" @click="visible3 = true">自定义底部按钮（自定义组件）</t-button>
@@ -38,7 +39,6 @@
       :cancelBtn="false"
     >
     </t-dialog>
-
   </div>
 </template>
 <script>
@@ -52,7 +52,11 @@ export default {
   },
   methods: {
     getConfirmBtn() {
-      return <t-button theme='primary' disabled>我知道了</t-button>;
+      return (
+        <t-button theme="primary" disabled>
+          我知道了
+        </t-button>
+      );
     },
   },
 };
diff --git a/examples/dialog/demos/plugin.vue b/examples/dialog/demos/plugin.vue
index 92ded8204..c7fb9d48e 100644
--- a/examples/dialog/demos/plugin.vue
+++ b/examples/dialog/demos/plugin.vue
@@ -40,7 +40,6 @@ export default Vue.extend({
       const dialogNode = this.$dialog({
         header: 'Dialog-Plugin',
         body: '通过 update 更新弹框内容',
-
       });
       // 更新弹框内容
       dialogNode.update({
diff --git a/examples/loading/demos/fullscreen.vue b/examples/loading/demos/fullscreen.vue
index e2bd62b14..1e858bd5c 100644
--- a/examples/loading/demos/fullscreen.vue
+++ b/examples/loading/demos/fullscreen.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="tdesign-demo-block-column">
-
     <t-loading :loading="loading" text="加载中..." fullscreen />
     <!-- <t-loading :loading="loading" text="加载中..." attach="body" fullscreen /> -->
 
diff --git a/examples/popup/demos/trigger-element.vue b/examples/popup/demos/trigger-element.vue
index d69c7ba13..ffda1507d 100644
--- a/examples/popup/demos/trigger-element.vue
+++ b/examples/popup/demos/trigger-element.vue
@@ -9,17 +9,14 @@
       </div>
       <div class="t-popup-demo-base-item">
         <t-popup content="我的触发元素通过插槽(triggerElement)渲染">
-          <t-button variant="outline" slot='triggerElement'>具名插槽定义触发元素</t-button>
+          <t-button variant="outline" slot="triggerElement">具名插槽定义触发元素</t-button>
         </t-popup>
       </div>
     </div>
-    <br>
+    <br />
     <div>
       <div class="t-popup-demo-base-item">
-        <t-popup
-          content="我的触发元素通过渲染函数 default 渲染"
-          :default="renderTriggerElement1"
-        ></t-popup>
+        <t-popup content="我的触发元素通过渲染函数 default 渲染" :default="renderTriggerElement1"></t-popup>
       </div>
       <div class="t-popup-demo-base-item">
         <t-popup
diff --git a/examples/tabs/demos/base.vue b/examples/tabs/demos/base.vue
index 5158b0067..57b567f0a 100644
--- a/examples/tabs/demos/base.vue
+++ b/examples/tabs/demos/base.vue
@@ -5,10 +5,10 @@
       <t-tabs v-model="value">
         <!-- 默认插槽 和 具名插槽（panel）都是用来渲染面板内容 -->
         <t-tab-panel value="first" label="选项卡1" :destroyOnHide="false">
-          <p style="padding: 25px;">选项卡1的内容，使用 t-tab-panel 渲染</p>
+          <p style="padding: 25px">选项卡1的内容，使用 t-tab-panel 渲染</p>
         </t-tab-panel>
         <t-tab-panel value="second" label="选项卡2" :destroyOnHide="false">
-          <p slot="panel" style="padding: 25px;">选项卡2的内容，使用 t-tab-panel 渲染</p>
+          <p slot="panel" style="padding: 25px">选项卡2的内容，使用 t-tab-panel 渲染</p>
         </t-tab-panel>
         <t-tab-panel value="third" label="选项卡3" :panel="panelRender" />
       </t-tabs>
@@ -26,12 +26,24 @@ export default {
       value: 'first',
       tab: 1,
       tabList: [
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        { label: '选项卡一', value: 1, panel: (h) => <p style="padding: 25px">这是选项卡一的内容，使用 t-tabs 渲染</p> },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        { label: '选项卡二', value: 2, panel: (h) => <p style="padding: 25px">这是选项卡二的内容，使用 t-tabs 渲染</p> },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        { label: '选项卡三', value: 3, panel: (h) => <p style="padding: 25px">这是选项卡三的内容，使用 t-tabs 渲染</p> },
+        {
+          label: '选项卡一',
+          value: 1,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          panel: (h) => <p style="padding: 25px">这是选项卡一的内容，使用 t-tabs 渲染</p>,
+        },
+        {
+          label: '选项卡二',
+          value: 2,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          panel: (h) => <p style="padding: 25px">这是选项卡二的内容，使用 t-tabs 渲染</p>,
+        },
+        {
+          label: '选项卡三',
+          value: 3,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          panel: (h) => <p style="padding: 25px">这是选项卡三的内容，使用 t-tabs 渲染</p>,
+        },
       ],
     };
   },
diff --git a/examples/transfer/demos/custom.vue b/examples/transfer/demos/custom.vue
index 1b31d435e..c98384cfc 100644
--- a/examples/transfer/demos/custom.vue
+++ b/examples/transfer/demos/custom.vue
@@ -9,7 +9,7 @@
         {{ props.direction === 'left' ? '移除' : '加入' }}
       </template>
       <template v-slot:footer="props" :name="123">
-        <div style="padding:10px 20px;">
+        <div style="padding: 10px 20px">
           <span v-if="props.type === 'source'">选中并加入</span>
           <span v-else>选中并移除</span>
         </div>
diff --git a/package.json b/package.json
index d40e40cab..6aa69e4e4 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,8 @@
     "lodash": "^4.17.21",
     "raf": "^3.4.1",
     "sortablejs": "^1.15.0",
-    "tdesign-icons-vue": "~0.1.0",
+    "tdesign-icons-vue": "~0.0.8",
+    "tinycolor2": "^1.4.2",
     "validator": "^13.5.1"
   },
   "peerDependencies": {
@@ -107,6 +108,7 @@
     "@types/lodash": "^4.14.165",
     "@types/raf": "^3.4.0",
     "@types/sortablejs": "^1.10.7",
+    "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/experimental-utils": "^5.4.0",
diff --git a/script/generate-usage/index.js b/script/generate-usage/index.js
index 5751217bd..11f876abe 100644
--- a/script/generate-usage/index.js
+++ b/script/generate-usage/index.js
@@ -8,9 +8,11 @@ const renderUsageStr = (compStrMap) => `<!-- 该脚本为自动生成，如有
 <template>
   <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
     ${Object.keys(compStrMap.render)
-    .map((key) => `<template #${key}="{ configProps }">
+    .map(
+      (key) => `<template #${key}="{ configProps }">
       ${compStrMap.render[key].trim()}
-    </template>`)
+    </template>`,
+    )
     .join('\n')}
   </base-usage>
 </template>
@@ -18,7 +20,7 @@ const renderUsageStr = (compStrMap) => `<!-- 该脚本为自动生成，如有
 <script setup lang="jsx">
 /* eslint-disable */
 import { ref, onMounted } from '@vue/composition-api';
-${compStrMap.importStr ? compStrMap.importStr.trim() : 'import configJson from \'./props.json\';'}
+${compStrMap.importStr ? compStrMap.importStr.trim() : "import configJson from './props.json';"}
 ${compStrMap.script ? compStrMap.script.trim() : ''}
 
 ${compStrMap.configStr ? compStrMap.configStr.trim() : 'const configList = ref(configJson);'}
diff --git a/site/site.config.mjs b/site/site.config.mjs
index ce25f1d21..0109a352d 100644
--- a/site/site.config.mjs
+++ b/site/site.config.mjs
@@ -209,6 +209,12 @@ const docs = [
         component: () => import('@/examples/checkbox/checkbox.md'),
         componentEn: () => import('@/examples/checkbox/checkbox.en-US.md'),
       },
+      {
+        title: 'ColorPicker 颜色选择器',
+        name: 'color-picker',
+        path: '/vue/components/color-picker',
+        component: () => import('@/examples/color-picker/color-picker.md'),
+      },
       {
         title: 'DatePicker 日期选择器',
         titleEn: 'DatePicker',
@@ -378,7 +384,7 @@ const docs = [
         docType: 'data',
         path: '/vue/components/collapse',
         component: () => import('@/examples/collapse/collapse.md'),
-        componentEn: () => import('@/examples/collapse/collapse.en-US.md')
+        componentEn: () => import('@/examples/collapse/collapse.en-US.md'),
       },
       {
         title: 'Comment 评论',
@@ -527,20 +533,20 @@ const docs = [
   },
 ];
 
-const enDocs = docs.map(doc => {
+const enDocs = docs.map((doc) => {
   return {
     ...doc,
     title: doc.titleEn,
-    children: doc?.children?.map(child => {
+    children: doc?.children?.map((child) => {
       return {
         title: child.titleEn,
         name: `${child.name}-en`,
         path: `${child.path}-en`,
         meta: { lang: 'en' },
         component: child.componentEn || child.component,
-      }
+      };
     }),
   };
-})
+});
 
 export default { docs, enDocs };
diff --git a/src/_common b/src/_common
index 8afb18564..5eef970ba 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 8afb185642e84c60900a3541c467c25c6538c5f1
+Subproject commit 5eef970ba4c1b4dfe490162fa4f6448f49898e8d
diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx
index 5839861ca..fb9b73844 100644
--- a/src/avatar/avatar.tsx
+++ b/src/avatar/avatar.tsx
@@ -34,17 +34,21 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
   },
   computed: {
     customAvatarSize(): Styles {
-      return this.isCustomSize() ? {
-        width: this.sizeValue,
-        height: this.sizeValue,
-        'font-size': `${Number.parseInt(this.sizeValue, 10) / 2}px`,
-      } : {};
+      return this.isCustomSize()
+        ? {
+          width: this.sizeValue,
+          height: this.sizeValue,
+          'font-size': `${Number.parseInt(this.sizeValue, 10) / 2}px`,
+        }
+        : {};
     },
     customImageSize(): Styles {
-      return this.isCustomSize() ? {
-        height: this.sizeValue,
-        width: this.sizeValue,
-      } : {};
+      return this.isCustomSize()
+        ? {
+          height: this.sizeValue,
+          width: this.sizeValue,
+        }
+        : {};
     },
     customCharaSize(): Styles {
       return {
@@ -74,7 +78,9 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
       const avatarWidth = avatar?.offsetWidth;
       const avatarChildWidth = avatarChild?.offsetWidth;
       if (this.gap * 2 < avatarWidth) {
-        this.scale = avatarChildWidth > avatarWidth - this.gap * 2 ? `scale(${(avatarWidth - this.gap * 2) / avatarChildWidth})` : 'scale(1)';
+        this.scale = avatarChildWidth > avatarWidth - this.gap * 2
+          ? `scale(${(avatarWidth - this.gap * 2) / avatarChildWidth})`
+          : 'scale(1)';
       }
     },
     isCustomSize() {
@@ -100,20 +106,22 @@ export default (Vue as VueConstructor<AvatarInstance>).extend({
         [`${name}__icon`]: !!isIconOnly,
       },
     ];
-    content = <span ref='avatarChild' style={{ ...this.customCharaSize }}>{ content }</span>;
+    content = (
+      <span ref="avatarChild" style={{ ...this.customCharaSize }}>
+        {content}
+      </span>
+    );
     if (icon) {
-      content = [
-        icon,
-        !isIconOnly ? content : '',
-      ];
+      content = [icon, !isIconOnly ? content : ''];
     }
 
     if (image && this.isImgExist) {
       content = <img style={{ ...this.customImageSize }} src={image} alt={alt} onError={this.handleImgLoadError}></img>;
     }
-    return (<div ref='avatar' class={avatarClass} style={{ ...this.customAvatarSize }}>
-      {content}
-    </div>);
+    return (
+      <div ref="avatar" class={avatarClass} style={{ ...this.customAvatarSize }}>
+        {content}
+      </div>
+    );
   },
-
 });
diff --git a/src/avatar/group.tsx b/src/avatar/group.tsx
index 926e6a24d..c8945126f 100644
--- a/src/avatar/group.tsx
+++ b/src/avatar/group.tsx
@@ -28,7 +28,11 @@ export default Vue.extend({
       if (children?.length > this.max) {
         const content = this.setEllipsisContent(children);
         const outAvatar = children.slice(0, this.max);
-        outAvatar.push(<Avatar size={this.size} icon={this.isIcon() ? this.collapseAvatar : null}>{content}</Avatar>);
+        outAvatar.push(
+          <Avatar size={this.size} icon={this.isIcon() ? this.collapseAvatar : null}>
+            {content}
+          </Avatar>,
+        );
         // 隐藏的avatar通过popup展示
         // const hideAvatar = children.slice(this.max - children.length);
         // const popupContent = <t-popup props={{ ...this.popupProps, placement: this.placement }} >
@@ -72,9 +76,6 @@ export default Vue.extend({
     if (max && max >= 0) {
       content = [this.renderEllipsisAvatar(children)];
     }
-    return <div class={groupClass}>
-      {content}
-    </div>;
+    return <div class={groupClass}>{content}</div>;
   },
-
 });
diff --git a/src/breadcrumb/type.ts b/src/breadcrumb/type.ts
index c5a9323a9..af86ae831 100644
--- a/src/breadcrumb/type.ts
+++ b/src/breadcrumb/type.ts
@@ -25,7 +25,7 @@ export interface TdBreadcrumbProps {
    * @default light
    */
   theme?: 'light';
-};
+}
 
 export interface TdBreadcrumbItemProps {
   /**
@@ -67,8 +67,14 @@ export interface TdBreadcrumbItemProps {
    * 路由跳转目标，当且仅当 Router 存在时，该 API 有效
    */
   to?: Route;
-};
+}
 
-export interface Route { path?: string; name?: string; hash?: string; query?: RouteData; params?: RouteData };
+export interface Route {
+  path?: string;
+  name?: string;
+  hash?: string;
+  query?: RouteData;
+  params?: RouteData;
+}
 
 export type RouteData = { [key: string]: string | string[] };
diff --git a/src/color-picker/color-picker-panel.tsx b/src/color-picker/color-picker-panel.tsx
new file mode 100644
index 000000000..98c353fe6
--- /dev/null
+++ b/src/color-picker/color-picker-panel.tsx
@@ -0,0 +1,36 @@
+import { defineComponent } from '@vue/composition-api';
+import props from './props';
+import ColorPanel from './panel';
+import { usePrefixClass } from '../config-provider';
+
+export default defineComponent({
+  name: 'TColorPickerPanel',
+  components: {
+    ColorPanel,
+  },
+  inheritAttrs: false,
+  props: {
+    ...props,
+  },
+  setup() {
+    const prefix = usePrefixClass();
+    return {
+      prefix,
+    };
+  },
+  render() {
+    const { prefix } = this;
+    return (
+      <color-panel
+        {...{
+          props: {
+            ...this.$props,
+            closeBtn: false,
+            popupProps: null,
+          },
+        }}
+        class={`${prefix}-is-inline`}
+      />
+    );
+  },
+});
diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx
new file mode 100644
index 000000000..884cc9c77
--- /dev/null
+++ b/src/color-picker/color-picker.tsx
@@ -0,0 +1,125 @@
+import {
+  ComponentPublicInstance,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRefs,
+} from '@vue/composition-api';
+import useVModel from '../hooks/useVModel';
+import { renderTNodeJSXDefault } from '../utils/render-tnode';
+import props from './props';
+import { Popup as TPopup } from '../popup';
+import { useClickOutsider } from './utils/click-outsider';
+import ColorPanel from './panel';
+import DefaultTrigger from './trigger';
+import { TdColorContext } from './interfaces';
+import { useBaseClassName } from './hooks';
+
+export default defineComponent({
+  name: 'TColorPicker',
+  components: {
+    TPopup,
+    ColorPanel,
+    DefaultTrigger,
+  },
+  props: {
+    ...props,
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const visible = ref(false);
+    const setVisible = (value: boolean) => (visible.value = value);
+
+    const { value } = toRefs(props);
+    const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange, 'change');
+
+    const handleChange = (value: string, context: TdColorContext) => {
+      setInnerValue(value, context);
+    };
+
+    const handlePaletteChange = (context: TdColorContext) => {
+      props.onPaletteBarChange(context);
+    };
+
+    const refTrigger = ref<HTMLElement>();
+    const refColorPanel = ref<ComponentPublicInstance>();
+
+    const { addClickOutsider, removeClickOutsider } = useClickOutsider();
+    onMounted(() => addClickOutsider([refTrigger.value, refColorPanel.value], () => setVisible(false)));
+    onBeforeUnmount(() => {
+      removeClickOutsider();
+    });
+
+    return {
+      baseClassName,
+      innerValue,
+      visible,
+      refTrigger,
+      refColorPanel,
+      setVisible,
+      setInnerValue,
+      handleChange,
+      handlePaletteChange,
+    };
+  },
+  render() {
+    const {
+      popupProps, disabled, innerValue, baseClassName, setVisible, handleChange, handlePaletteChange,
+    } = this;
+
+    const renderPopupContent = () => {
+      if (disabled) {
+        return null;
+      }
+      return (
+        <color-panel
+          {...{
+            props: {
+              ...this.$props,
+              value: innerValue,
+            },
+          }}
+          togglePopup={setVisible}
+          on={{ change: handleChange, handlePaletteChange }}
+          ref="refColorPanel"
+        />
+      );
+    };
+
+    const popProps = {
+      placement: 'bottom-left',
+      ...((popupProps as any) || {}),
+      trigger: 'click',
+      attach: 'body',
+      overlayClassName: [baseClassName],
+      visible: this.visible,
+      overlayStyle: {
+        padding: 0,
+      },
+    };
+    return (
+      <t-popup
+        {...{
+          props: {
+            ...popProps,
+          },
+        }}
+        content={renderPopupContent}
+      >
+        <div className={`${baseClassName}__trigger`} onClick={() => setVisible(!this.visible)} ref="refTrigger">
+          {renderTNodeJSXDefault(
+            this,
+            'default',
+            <default-trigger
+              color={this.innerValue}
+              disabled={disabled}
+              input-props={this.inputProps}
+              handleTriggerChange={this.setInnerValue}
+            />,
+          )}
+        </div>
+      </t-popup>
+    );
+  },
+});
diff --git a/src/color-picker/const.ts b/src/color-picker/const.ts
new file mode 100644
index 000000000..7749223bc
--- /dev/null
+++ b/src/color-picker/const.ts
@@ -0,0 +1,6 @@
+import { TdColorPickerProps } from '.';
+
+export * from '../_common/js/color-picker/constants';
+
+// 非透明色格式化类型
+export const FORMATS: TdColorPickerProps['format'][] = ['HEX', 'RGB', 'HSL', 'HSV', 'CMYK', 'CSS'];
diff --git a/src/color-picker/hooks.ts b/src/color-picker/hooks.ts
new file mode 100644
index 000000000..8de3e9627
--- /dev/null
+++ b/src/color-picker/hooks.ts
@@ -0,0 +1,16 @@
+import { computed } from '@vue/composition-api';
+import { usePrefixClass } from '../config-provider';
+
+const BASE_COMPONENT_NAME = 'color-picker';
+
+/**
+ * 基础样式
+ * @param className
+ * @returns
+ */
+export const useBaseClassName = (className?: string) => {
+  const baseClassName = usePrefixClass(BASE_COMPONENT_NAME);
+  return computed(() => (className ? `${baseClassName.value}-${className}` : baseClassName.value));
+};
+
+export default useBaseClassName;
diff --git a/src/color-picker/index.ts b/src/color-picker/index.ts
new file mode 100644
index 000000000..52b1d5a87
--- /dev/null
+++ b/src/color-picker/index.ts
@@ -0,0 +1,12 @@
+import VueCompositionAPI from '@vue/composition-api';
+import _ColorPickerPanel from './color-picker-panel';
+import _ColorPicker from './color-picker';
+import { withInstall } from '../utils/withInstall';
+import { TdColorPickerProps } from './type';
+import './style';
+
+export * from './type';
+export type ColorPickerProps = TdColorPickerProps;
+
+export const ColorPickerPanel = withInstall(_ColorPickerPanel, VueCompositionAPI);
+export const ColorPicker = withInstall(_ColorPicker, VueCompositionAPI);
diff --git a/src/color-picker/interfaces.ts b/src/color-picker/interfaces.ts
new file mode 100644
index 000000000..aacd0963f
--- /dev/null
+++ b/src/color-picker/interfaces.ts
@@ -0,0 +1,12 @@
+import { ColorObject, ColorPickerChangeTrigger } from './type';
+
+// color modes
+export type TdColorModes = 'monochrome' | 'linear-gradient';
+
+// color context
+export interface TdColorContext {
+  color: ColorObject;
+  trigger: ColorPickerChangeTrigger;
+}
+
+export type TdColorHandler = (...args: any) => void;
diff --git a/src/color-picker/panel/alpha.tsx b/src/color-picker/panel/alpha.tsx
new file mode 100644
index 000000000..c0048ece1
--- /dev/null
+++ b/src/color-picker/panel/alpha.tsx
@@ -0,0 +1,54 @@
+import { computed, defineComponent, PropType } from '@vue/composition-api';
+import ColorSlider from './slider';
+import { Color } from '../utils';
+import { useBaseClassName } from '../hooks';
+import { TdColorHandler } from '../interfaces';
+
+export default defineComponent({
+  name: 'AlphaSlider',
+  components: {
+    ColorSlider,
+  },
+  inheritAttrs: false,
+  props: {
+    color: {
+      type: Object as PropType<Color>,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    handleChange: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const handleValueChange = (v: number, isDragEnd?: boolean) => {
+      props.handleChange(v / 100, isDragEnd);
+    };
+    const railStyle = computed(() => ({
+      background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`,
+    }));
+    return {
+      baseClassName,
+      railStyle,
+      handleValueChange,
+    };
+  },
+  render() {
+    const { baseClassName } = this;
+    return (
+      <color-slider
+        class={[`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`]}
+        color={this.color}
+        value={this.color.alpha * 100}
+        handleChange={this.handleValueChange}
+        rail-style={this.railStyle}
+        max-value={100}
+        disabled={this.disabled}
+      />
+    );
+  },
+});
diff --git a/src/color-picker/panel/base-props.ts b/src/color-picker/panel/base-props.ts
new file mode 100644
index 000000000..e235d53ef
--- /dev/null
+++ b/src/color-picker/panel/base-props.ts
@@ -0,0 +1,16 @@
+import { PropType } from 'vue';
+import { TdColorHandler } from '../interfaces';
+import { Color } from '../utils';
+
+export default {
+  /** 是否禁用组件 */
+  disabled: Boolean,
+  /** Color Instance */
+  color: {
+    type: Object as PropType<Color>,
+  },
+  handleChange: {
+    type: Function as PropType<TdColorHandler>,
+    default: () => () => {},
+  },
+};
diff --git a/src/color-picker/panel/format/config.ts b/src/color-picker/panel/format/config.ts
new file mode 100644
index 000000000..63c31e9cb
--- /dev/null
+++ b/src/color-picker/panel/format/config.ts
@@ -0,0 +1,125 @@
+import { TdColorPickerProps } from '../../type';
+
+export interface FormatInput {
+  key: string;
+  type: 'input';
+  flex?: number;
+}
+
+export interface FormatInputNumber {
+  key: string;
+  min: number;
+  max: number;
+  type: 'inputNumber';
+  flex?: number;
+  format?: Function;
+}
+
+export type FormatInputsConfig = {
+  [propName in TdColorPickerProps['format']]?: Array<FormatInput | FormatInputNumber>;
+};
+
+export const FORMAT_INPUT_CONFIG: FormatInputsConfig = {
+  RGB: [
+    {
+      key: 'r',
+      min: 0,
+      max: 255,
+      type: 'inputNumber',
+    },
+    {
+      key: 'g',
+      min: 0,
+      max: 255,
+      type: 'inputNumber',
+    },
+    {
+      key: 'b',
+      min: 0,
+      max: 255,
+      type: 'inputNumber',
+    },
+  ],
+  HSV: [
+    {
+      key: 'h',
+      min: 0,
+      max: 360,
+      type: 'inputNumber',
+    },
+    {
+      key: 's',
+      min: 0,
+      max: 100,
+      type: 'inputNumber',
+    },
+    {
+      key: 'v',
+      min: 0,
+      max: 100,
+      type: 'inputNumber',
+    },
+  ],
+  HSL: [
+    {
+      key: 'h',
+      min: 0,
+      max: 360,
+      type: 'inputNumber',
+    },
+    {
+      key: 's',
+      min: 0,
+      max: 100,
+      type: 'inputNumber',
+    },
+    {
+      key: 'l',
+      min: 0,
+      max: 100,
+      type: 'inputNumber',
+    },
+  ],
+  CMYK: [
+    {
+      key: 'c',
+      min: 0,
+      max: 255,
+      type: 'inputNumber',
+    },
+    {
+      key: 'm',
+      min: 0,
+      max: 255,
+      type: 'inputNumber',
+    },
+    {
+      key: 'y',
+      min: 0,
+      max: 255,
+      type: 'inputNumber',
+    },
+    {
+      key: 'k',
+      min: 0,
+      max: 255,
+      type: 'inputNumber',
+    },
+  ],
+  CSS: [
+    {
+      key: 'css',
+      type: 'input',
+      flex: 3,
+    },
+  ],
+  HEX: [
+    {
+      key: 'hex',
+      type: 'input',
+      flex: 3,
+    },
+  ],
+};
+
+export default FORMAT_INPUT_CONFIG;
diff --git a/src/color-picker/panel/format/index.tsx b/src/color-picker/panel/format/index.tsx
new file mode 100644
index 000000000..fa848b323
--- /dev/null
+++ b/src/color-picker/panel/format/index.tsx
@@ -0,0 +1,95 @@
+import {
+  defineComponent, PropType, ref, watch,
+} from '@vue/composition-api';
+import upperCase from 'lodash/upperCase';
+import { TdColorHandler } from '../../../color-picker/interfaces';
+import { TdColorPickerProps } from '../../type';
+import props from '../../props';
+import { FORMATS } from '../../const';
+import { Color } from '../../utils';
+import { Select as TSelect, Option as TOption } from '../../../select';
+import { Input as TInput } from '../../../input';
+import FormatInputs from './inputs';
+import { useBaseClassName } from '../../hooks';
+
+export default defineComponent({
+  name: 'FormatPanel',
+  components: {
+    TSelect,
+    TInput,
+    TOption,
+    FormatInputs,
+  },
+  inheritAttrs: false,
+  props: {
+    ...props,
+    color: {
+      type: Object as PropType<Color>,
+    },
+    handleFormatModeChange: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+    handleFormatInputChange: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const formatModel = ref<TdColorPickerProps['format']>(props.format);
+    watch(
+      () => [props.format],
+      () => (formatModel.value = props.format),
+    );
+
+    /**
+     * 格式化类型改变触发
+     * @param v
+     */
+    const handleModeChange = (v: TdColorPickerProps['format']) => {
+      formatModel.value = v;
+      props.handleFormatModeChange(v);
+    };
+
+    return {
+      formatModel,
+      baseClassName,
+      handleModeChange,
+    };
+  },
+  render(h) {
+    const formats: TdColorPickerProps['format'][] = [...FORMATS];
+    const { baseClassName, handleModeChange } = this;
+    const newProps = {
+      ...this.$props,
+      format: this.formatModel,
+    };
+    const selectInputProps = {
+      ...((this.selectInputProps as Object) || {}),
+    };
+    return (
+      <div class={`${baseClassName}__format`}>
+        <div class={`${baseClassName}__format--item`}>
+          <t-select
+            {...selectInputProps}
+            popupProps={{
+              overlayClassName: `${baseClassName}__select-options`,
+            }}
+            v-model={this.formatModel}
+            onChange={handleModeChange}
+          >
+            {formats.map((item) => (
+              <t-option key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
+            ))}
+          </t-select>
+        </div>
+        <div class={`${baseClassName}__format--item`}>
+          {h('format-inputs', {
+            props: newProps,
+          })}
+        </div>
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/panel/format/inputs.tsx b/src/color-picker/panel/format/inputs.tsx
new file mode 100644
index 000000000..563165350
--- /dev/null
+++ b/src/color-picker/panel/format/inputs.tsx
@@ -0,0 +1,181 @@
+import {
+  computed, defineComponent, PropType, reactive, watch,
+} from '@vue/composition-api';
+import throttle from 'lodash/throttle';
+import { TdColorHandler } from '../../interfaces';
+import props from '../../props';
+import { Color } from '../../utils';
+import { Select as TSelect, Option as TOption } from '../../../select';
+import TInput from '../../../input';
+import TInputNumber from '../../../input-number';
+import { FORMAT_INPUT_CONFIG } from './config';
+
+export default defineComponent({
+  name: 'FormatInputs',
+  components: {
+    TSelect,
+    TOption,
+    TInput,
+    TInputNumber,
+  },
+  inheritAttrs: false,
+  props: {
+    ...props,
+    color: {
+      type: Object as PropType<Color>,
+    },
+    handleFormatInputChange: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+  },
+  setup(props) {
+    const inputConfigs = computed(() => {
+      const configs = [...FORMAT_INPUT_CONFIG[props.format]];
+      if (props.enableAlpha) {
+        configs.push({
+          type: 'inputNumber',
+          key: 'a',
+          min: 0,
+          max: 100,
+          format: (value: number) => `${value}%`,
+          flex: 1.15,
+        });
+      }
+      return configs;
+    });
+
+    // 这些值需要初始化一下
+    const modelValues = reactive<any>({
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      c: 0,
+      m: 0,
+      y: 0,
+      k: 0,
+      h: 0,
+      l: 0,
+      s: 0,
+      v: 0,
+      hex: '',
+      css: '',
+    });
+    const lastModelValue = reactive<any>({});
+
+    /**
+     * 获取不同格式的输入输出值
+     * @param type 'encode' | 'decode'
+     * @returns
+     */
+    const getFormatColorMap = (type: 'encode' | 'decode') => {
+      const { color } = props;
+      if (type === 'encode') {
+        return {
+          HSV: color.getHsva(),
+          HSL: color.getHsla(),
+          RGB: color.getRgba(),
+          CMYK: color.getCmyk(),
+          CSS: {
+            css: color.css,
+          },
+          HEX: {
+            hex: color.hex,
+          },
+        };
+      }
+      // decode
+      return {
+        HSV: Color.object2color(modelValues, 'HSV'),
+        HSL: Color.object2color(modelValues, 'HSL'),
+        RGB: Color.object2color(modelValues, 'RGB'),
+        CMYK: Color.object2color(modelValues, 'CMYK'),
+        CSS: modelValues.css,
+        HEX: modelValues.hex,
+      };
+    };
+
+    // 更新modelValues
+    const updateModelValue = () => {
+      const { format, color } = props;
+      const values: any = getFormatColorMap('encode')[format];
+      values.a = Math.round(color.alpha * 100);
+      Object.keys(values).forEach((key) => {
+        modelValues[key] = values[key];
+        lastModelValue[key] = values[key];
+      });
+    };
+
+    updateModelValue();
+
+    const throttleUpdate = throttle(updateModelValue, 100);
+
+    watch(() => {
+      const {
+        saturation, hue, value, alpha,
+      } = props.color;
+      return [saturation, hue, value, alpha, props.format];
+    }, throttleUpdate);
+
+    const handleChange = (key: string, v: number | string) => {
+      if (v === lastModelValue[key]) {
+        return;
+      }
+      const value = getFormatColorMap('decode')[props.format];
+      props.handleFormatInputChange(value, modelValues.a / 100, key, v);
+    };
+
+    return {
+      modelValues,
+      inputConfigs,
+      handleChange,
+    };
+  },
+  render() {
+    const inputProps = {
+      ...((this.inputProps as any) || {}),
+    };
+    return (
+      <div class="input-group">
+        {this.inputConfigs.map((config) => (
+          <div
+            class="input-group__item"
+            key={config.key}
+            style={{
+              flex: config.flex || 1,
+            }}
+          >
+            {config.type === 'input' ? (
+              <t-input
+                {...inputProps}
+                align="center"
+                disabled={this.disabled}
+                v-model={this.modelValues[config.key]}
+                maxlength={this.format === 'HEX' ? 9 : undefined}
+                title={this.modelValues[config.key]}
+                onBlur={(v: string) => this.handleChange(config.key, v)}
+                onEnter={(v: string) => this.handleChange(config.key, v)}
+              />
+            ) : (
+              <t-input-number
+                {...inputProps}
+                align="center"
+                theme="normal"
+                disabled={this.disabled}
+                v-model={this.modelValues[config.key]}
+                title={this.modelValues[config.key]}
+                min={config.min}
+                max={config.max}
+                step={1}
+                format={config.format}
+                onBlur={(v: number) => this.handleChange(config.key, v)}
+                onEnter={(v: number) => this.handleChange(config.key, v)}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/panel/format/style/css.js b/src/color-picker/panel/format/style/css.js
new file mode 100644
index 000000000..57fb6cf78
--- /dev/null
+++ b/src/color-picker/panel/format/style/css.js
@@ -0,0 +1 @@
+import '../../../style/index.css';
diff --git a/src/color-picker/panel/format/style/index.js b/src/color-picker/panel/format/style/index.js
new file mode 100644
index 000000000..3ee4d04ab
--- /dev/null
+++ b/src/color-picker/panel/format/style/index.js
@@ -0,0 +1 @@
+import '../../../style/index.js';
diff --git a/src/color-picker/panel/header.tsx b/src/color-picker/panel/header.tsx
new file mode 100644
index 000000000..46fda1812
--- /dev/null
+++ b/src/color-picker/panel/header.tsx
@@ -0,0 +1,84 @@
+import {
+  defineComponent, PropType, ref, watch,
+} from '@vue/composition-api';
+import { CloseIcon } from 'tdesign-icons-vue';
+import props from '../props';
+import { COLOR_MODES } from '../const';
+import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../radio';
+import { TdColorHandler, TdColorModes } from '../interfaces';
+import { useBaseClassName } from '../hooks';
+
+export default defineComponent({
+  name: 'PanelHeader',
+  components: {
+    CloseIcon,
+    TRadioGroup,
+    TRadioButton,
+  },
+  props: {
+    ...props,
+    mode: {
+      type: String as PropType<TdColorModes>,
+      default: 'color',
+    },
+    togglePopup: {
+      type: Function as PropType<TdColorHandler>,
+    },
+    handleModeChange: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const modeValue = ref(props.mode);
+    const handleClosePopup = () => {
+      props.togglePopup?.(false);
+    };
+    watch(
+      () => props.mode,
+      (v) => {
+        modeValue.value = v;
+      },
+    );
+    return {
+      baseClassName,
+      modeValue,
+      handleClosePopup,
+    };
+  },
+  render() {
+    const { baseClassName } = this;
+    return (
+      <div class={`${baseClassName}__head`}>
+        <div class={`${baseClassName}__mode`}>
+          {this.colorModes?.length === 1 ? (
+            COLOR_MODES[this.colorModes[0]]
+          ) : (
+            <t-radio-group
+              variant="default-filled"
+              size="small"
+              v-model={this.modeValue}
+              onChange={this.handleModeChange}
+            >
+              {Object.keys(COLOR_MODES).map((key) => (
+                <t-radio-button key={key} value={key}>
+                  {COLOR_MODES[key]}
+                </t-radio-button>
+              ))}
+            </t-radio-group>
+          )}
+        </div>
+        {this.closeBtn ? (
+          <span
+            role="button"
+            class={[`${baseClassName}__icon`, `${baseClassName}__close`]}
+            onClick={this.handleClosePopup}
+          >
+            <close-icon />
+          </span>
+        ) : null}
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/panel/hue.tsx b/src/color-picker/panel/hue.tsx
new file mode 100644
index 000000000..427ba0815
--- /dev/null
+++ b/src/color-picker/panel/hue.tsx
@@ -0,0 +1,32 @@
+import { defineComponent } from '@vue/composition-api';
+import ColorSlider from './slider';
+import { useBaseClassName } from '../hooks';
+import baseProps from './base-props';
+
+export default defineComponent({
+  name: 'HueSlider',
+  components: {
+    ColorSlider,
+  },
+  inheritAttrs: false,
+  props: {
+    ...baseProps,
+  },
+  setup() {
+    const baseClassName = useBaseClassName();
+    return {
+      baseClassName,
+    };
+  },
+  render() {
+    return (
+      <color-slider
+        class={`${this.baseClassName}__hue`}
+        color={this.color}
+        value={this.color.hue}
+        handleChange={this.handleChange}
+        disabled={this.disabled}
+      />
+    );
+  },
+});
diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
new file mode 100644
index 000000000..ab36806a9
--- /dev/null
+++ b/src/color-picker/panel/index.tsx
@@ -0,0 +1,365 @@
+import {
+  defineComponent, ref, toRefs, watch,
+} from '@vue/composition-api';
+import { useConfig } from '../../config-provider';
+import useCommonClassName from '../../hooks/useCommonClassName';
+import props from '../props';
+import {
+  DEFAULT_COLOR,
+  DEFAULT_LINEAR_GRADIENT,
+  TD_COLOR_USED_COLORS_MAX_SIZE,
+  DEFAULT_SYSTEM_SWATCH_COLORS,
+} from '../const';
+import PanelHeader from './header';
+import LinearGradient from './linear-gradient';
+import SaturationPanel from './saturation';
+import HueSlider from './hue';
+import AlphaSlider from './alpha';
+import FormatPanel from './format';
+import SwatchesPanel from './swatches';
+import { Color, getColorObject, GradientColorPoint } from '../utils';
+import { TdColorPickerProps, ColorPickerChangeTrigger } from '../type';
+import { TdColorModes } from '../interfaces';
+import { useBaseClassName } from '../hooks';
+import useVModel from '../../hooks/useVModel';
+import useDefaultValue from '../../hooks/useDefaultValue';
+
+export default defineComponent({
+  name: 'ColorPanel',
+  components: {
+    PanelHeader,
+    LinearGradient,
+    SaturationPanel,
+    HueSlider,
+    AlphaSlider,
+    FormatPanel,
+    SwatchesPanel,
+  },
+  props: {
+    ...props,
+    togglePopup: {
+      type: Function,
+    },
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const { statusClassNames } = useCommonClassName();
+    const { t, global } = useConfig('colorPicker');
+    const { value: inputValue, recentColors } = toRefs(props);
+    const [innerValue, setInnerValue] = useVModel(inputValue, props.defaultValue, props.onChange, 'change');
+    const color = ref<Color>(new Color(innerValue.value || DEFAULT_COLOR));
+    const updateColor = () => color.value.update(innerValue.value || DEFAULT_COLOR);
+    const mode = ref<TdColorModes>(color.value.isGradient ? 'linear-gradient' : 'monochrome');
+    const formatModel = ref<TdColorPickerProps['format']>(color.value.isGradient ? 'CSS' : 'RGB');
+
+    const [recentlyUsedColors, setRecentlyUsedColors] = useDefaultValue(
+      recentColors,
+      props.defaultRecentColors,
+      props.onRecentColorsChange,
+      'recentColors',
+      'recentColorsChange',
+    );
+
+    if (props.colorModes.length === 1) {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      const m = props.colorModes[0];
+      mode.value = m;
+    }
+
+    const formatValue = () => {
+      // 渐变模式下直接输出css样式
+      if (mode.value === 'linear-gradient') {
+        return color.value.linearGradient;
+      }
+      return color.value.getFormatsColorMap()[props.format] || color.value.css;
+    };
+
+    /**
+     * 添加最近使用颜色
+     * @returns void
+     */
+    const addRecentlyUsedColor = () => {
+      if (recentlyUsedColors.value === null || recentlyUsedColors.value === false) {
+        return;
+      }
+      const colors = (recentlyUsedColors.value as string[]) || [];
+      const currentColor = color.value.isGradient ? color.value.linearGradient : color.value.rgba;
+      const index = colors.indexOf(currentColor);
+      if (index > -1) {
+        colors.splice(index, 1);
+      }
+      colors.unshift(currentColor);
+      if (colors.length > TD_COLOR_USED_COLORS_MAX_SIZE) {
+        colors.length = TD_COLOR_USED_COLORS_MAX_SIZE;
+      }
+      handleRecentlyUsedColorsChange(colors);
+    };
+
+    /**
+     * 最近使用颜色变更时触发
+     * @param colors
+     */
+    const handleRecentlyUsedColorsChange = (colors: string[]) => {
+      recentlyUsedColors.value = colors;
+      setRecentlyUsedColors(colors);
+    };
+
+    /**
+     * onChange
+     * @param trigger
+     */
+    const emitColorChange = (trigger?: ColorPickerChangeTrigger) => {
+      setInnerValue(formatValue(), {
+        color: getColorObject(color.value),
+        trigger: trigger || 'palette-saturation-brightness',
+      });
+    };
+
+    watch(() => [props.defaultValue, props.enableAlpha], updateColor);
+
+    watch(
+      () => innerValue.value,
+      (newColor: string) => {
+        if (newColor !== formatValue()) {
+          updateColor();
+          mode.value = color.value.isGradient ? 'linear-gradient' : 'monochrome';
+        }
+      },
+    );
+
+    /**
+     * mode change
+     * @param value
+     * @returns
+     */
+    const handleModeChange = (value: TdColorModes) => {
+      mode.value = value;
+      if (value === 'linear-gradient') {
+        color.value.update(
+          color.value.gradientColors.length > 0 ? color.value.linearGradient : DEFAULT_LINEAR_GRADIENT,
+        );
+        return;
+      }
+      color.value.update(color.value.rgba);
+    };
+
+    /**
+     * 格式变化
+     * @param format
+     * @returns
+     */
+    const handleFormatModeChange = (format: TdColorPickerProps['format']) => (formatModel.value = format);
+
+    /**
+     * 饱和度亮度变化
+     * @param param0
+     */
+    const handleSatAndValueChange = ({ saturation, value }: { saturation: number; value: number }) => {
+      const { saturation: sat, value: val } = color.value;
+      let changeTrigger: ColorPickerChangeTrigger = 'palette-saturation-brightness';
+      if (value !== val && saturation !== sat) {
+        color.value.saturation = saturation;
+        color.value.value = value;
+        changeTrigger = 'palette-saturation-brightness';
+      } else if (saturation !== sat) {
+        color.value.saturation = saturation;
+        changeTrigger = 'palette-saturation';
+      } else if (value !== val) {
+        color.value.value = value;
+        changeTrigger = 'palette-brightness';
+      } else {
+        return;
+      }
+      emitColorChange(changeTrigger);
+    };
+
+    /**
+     * 色相变化
+     * @param hue
+     */
+    const handleHueChange = (hue: number) => {
+      color.value.hue = hue;
+      emitColorChange('palette-hue-bar');
+      props.onPaletteBarChange?.({
+        color: getColorObject(color.value),
+      });
+    };
+
+    /**
+     * 透明度变化
+     * @param alpha
+     */
+    const handleAlphaChange = (alpha: number) => {
+      color.value.alpha = alpha;
+      emitColorChange('palette-alpha-bar');
+    };
+
+    /**
+     * 输入框触发改变
+     * @param input
+     * @param alpha
+     */
+    const handleInputChange = (input: string, alpha?: number) => {
+      color.value.update(input);
+      color.value.alpha = alpha;
+      emitColorChange('input');
+    };
+
+    /**
+     * 渐变改变
+     * @param param0
+     */
+    const handleGradientChange = ({
+      key,
+      payload,
+    }: {
+      key: 'degree' | 'selectedId' | 'colors';
+      payload: number | string | GradientColorPoint[];
+    }) => {
+      let trigger: ColorPickerChangeTrigger = 'palette-saturation-brightness';
+      switch (key) {
+        case 'degree':
+          color.value.gradientDegree = payload as number;
+          trigger = 'input';
+          break;
+        case 'selectedId':
+          color.value.gradientSelectedId = payload as string;
+          break;
+        case 'colors':
+          color.value.gradientColors = payload as GradientColorPoint[];
+          break;
+      }
+      emitColorChange(trigger);
+    };
+
+    /**
+     * 色块点击
+     * @param type
+     * @param value
+     */
+    const handleSetColor = (type: 'system' | 'used', value: string) => {
+      const isGradientValue = Color.isGradientColor(value);
+      if (isGradientValue) {
+        if (props.colorModes.includes('linear-gradient')) {
+          mode.value = 'linear-gradient';
+          color.value.update(value);
+          color.value.updateCurrentGradientColor();
+        } else {
+          console.warn('该模式不支持渐变色');
+        }
+      } else if (mode.value === 'linear-gradient') {
+        color.value.updateStates(value);
+        color.value.updateCurrentGradientColor();
+      } else {
+        color.value.update(value);
+      }
+      emitColorChange();
+    };
+
+    return {
+      baseClassName,
+      statusClassNames,
+      t,
+      global,
+      color,
+      mode,
+      formatModel,
+      recentlyUsedColors,
+      addRecentlyUsedColor,
+      handleModeChange,
+      handleSatAndValueChange,
+      handleHueChange,
+      handleAlphaChange,
+      handleGradientChange,
+      handleSetColor,
+      handleFormatModeChange,
+      handleInputChange,
+      handleRecentlyUsedColorsChange,
+    };
+  },
+  render() {
+    const {
+      baseClassName, statusClassNames, t, global, recentColors, swatchColors,
+    } = this;
+
+    const showUsedColors = recentColors !== null && recentColors !== false;
+
+    let systemColors = swatchColors;
+    if (systemColors === undefined) {
+      systemColors = [...DEFAULT_SYSTEM_SWATCH_COLORS];
+    }
+    const showSystemColors = systemColors?.length > 0;
+
+    const renderSwatches = () => {
+      if (!showSystemColors && !showUsedColors) {
+        return null;
+      }
+      return (
+        <div class={`${baseClassName}__swatches-wrap`}>
+          {showUsedColors ? (
+            <swatches-panel
+              color={this.color}
+              disabled={this.disabled}
+              title={t(global.recentColorTitle)}
+              editable
+              colors={this.recentlyUsedColors}
+              handleAddColor={this.addRecentlyUsedColor}
+              handleSetColor={(color: string) => {
+                this.handleSetColor('used', color);
+              }}
+              handleChange={this.handleRecentlyUsedColorsChange}
+            />
+          ) : null}
+          {showSystemColors ? (
+            <swatches-panel
+              color={this.color}
+              disabled={this.disabled}
+              title={t(global.swatchColorTitle)}
+              colors={systemColors}
+              handleSetColor={(color: string) => this.handleSetColor('system', color)}
+            />
+          ) : null}
+        </div>
+      );
+    };
+
+    return (
+      <div
+        class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}
+        onClick={(e: MouseEvent) => e.stopPropagation()}
+      >
+        <panel-header
+          {...{
+            props: {
+              ...this.$props,
+            },
+          }}
+          mode={this.mode}
+          handleModeChange={this.handleModeChange}
+        />
+        <div class={[`${baseClassName}__body`]}>
+          {this.mode === 'linear-gradient' ? (
+            <linear-gradient color={this.color} disabled={this.disabled} handleChange={this.handleGradientChange} />
+          ) : null}
+          <saturation-panel color={this.color} disabled={this.disabled} handleChange={this.handleSatAndValueChange} />
+          <hue-slider color={this.color} disabled={this.disabled} handleChange={this.handleHueChange} />
+          {this.enableAlpha ? (
+            <alpha-slider color={this.color} disabled={this.disabled} handleChange={this.handleAlphaChange} />
+          ) : null}
+          <format-panel
+            {...{
+              props: {
+                ...this.$props,
+                format: this.formatModel,
+              },
+            }}
+            color={this.color}
+            handleFormatModeChange={this.handleFormatModeChange}
+            handleFormatInputChange={this.handleInputChange}
+          />
+          {renderSwatches()}
+        </div>
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/panel/linear-gradient.tsx b/src/color-picker/panel/linear-gradient.tsx
new file mode 100644
index 000000000..cb1bcb7cf
--- /dev/null
+++ b/src/color-picker/panel/linear-gradient.tsx
@@ -0,0 +1,296 @@
+import {
+  computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch,
+} from '@vue/composition-api';
+import cloneDeep from 'lodash/cloneDeep';
+import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../const';
+import { genGradientPoint, gradientColors2string, GradientColorPoint } from '../utils';
+import { InputNumber as TInputNumber } from '../../input-number';
+import { useBaseClassName } from '../hooks';
+import useCommonClassName from '../../hooks/useCommonClassName';
+import baseProps from './base-props';
+
+const DELETE_KEYS: string[] = ['delete', 'backspace'];
+
+export default defineComponent({
+  name: 'LinearGradient',
+  components: {
+    TInputNumber,
+  },
+  inheritAttrs: false,
+  props: {
+    ...baseProps,
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const { statusClassNames } = useCommonClassName();
+    const refSlider = ref<HTMLElement>(null);
+    const sliderRect = reactive({
+      left: 0,
+      width: GRADIENT_SLIDER_DEFAULT_WIDTH,
+    });
+    const isDragging = ref<Boolean>(false);
+    const isMoved = ref<Boolean>(false);
+    const colorInstance = computed(() => cloneDeep(props.color));
+
+    const degree = ref(colorInstance.value.gradientDegree);
+    const selectedId = ref(colorInstance.value.gradientSelectedId);
+    const colors = ref<GradientColorPoint[]>(cloneDeep(colorInstance.value.gradientColors));
+
+    watch(
+      () => props.color.gradientDegree,
+      (value) => (degree.value = value),
+    );
+    watch(
+      () => props.color.gradientSelectedId,
+      (value) => (selectedId.value = value),
+    );
+    watch(
+      () => props.color.gradientColors,
+      (value) => {
+        colors.value = cloneDeep(value);
+      },
+      {
+        deep: true,
+      },
+    );
+
+    const handleChange = (key: 'degree' | 'selectedId' | 'colors', payload: any, addUsedColor?: boolean) => {
+      if (props.disabled) {
+        return;
+      }
+      props.handleChange({
+        key,
+        payload,
+        addUsedColor,
+      });
+    };
+
+    const handleDegreeChange = (value: number) => {
+      if (props.disabled || value === colorInstance.value.gradientDegree) {
+        return;
+      }
+      degree.value = value;
+      handleChange('degree', value, true);
+    };
+
+    const handleSelectedIdChange = (value: string) => {
+      if (props.disabled) {
+        return;
+      }
+      selectedId.value = value;
+      handleChange('selectedId', value);
+    };
+
+    const handleColorsChange = (value: GradientColorPoint[], isEnded?: boolean) => {
+      if (props.disabled) {
+        return;
+      }
+      colors.value = value;
+      handleChange('colors', value, isEnded);
+    };
+
+    /**
+     * 设置bar的位置
+     * @param left
+     * @returns
+     */
+    const updateActiveThumbLeft = (left: number) => {
+      const index = colors.value.findIndex((c) => c.id === selectedId.value);
+      if (index === -1) {
+        return;
+      }
+      const point = colors.value[index];
+      // eslint-disable-next-line no-param-reassign
+      left = Math.max(0, Math.min(sliderRect.width, left));
+      const percentLeft = (left / sliderRect.width) * 100;
+      colors.value.splice(index, 1, {
+        color: point.color,
+        left: percentLeft,
+        id: point.id,
+      });
+      handleColorsChange(colors.value);
+    };
+
+    // 移动开始
+    const handleStart = (id: string, e: MouseEvent) => {
+      const rect = refSlider.value.getBoundingClientRect();
+      sliderRect.left = rect.left;
+      sliderRect.width = rect.width || GRADIENT_SLIDER_DEFAULT_WIDTH;
+      if (isDragging.value || props.disabled) {
+        return;
+      }
+      isMoved.value = false;
+      isDragging.value = true;
+      e.preventDefault();
+      e.stopPropagation();
+      handleSelectedIdChange(id);
+      // 让slider获取焦点，以便键盘事件生效。
+      refSlider.value.focus();
+      window.addEventListener('mousemove', handleMove, false);
+      window.addEventListener('mouseup', handleEnd, false);
+      window.addEventListener('contextmenu', handleEnd, false);
+    };
+
+    // 移动中
+    const handleMove = (e: MouseEvent) => {
+      if (!isDragging.value || props.disabled) {
+        return;
+      }
+      const left = e.clientX - sliderRect.left;
+      isMoved.value = true;
+      updateActiveThumbLeft(left);
+    };
+
+    // 移动结束
+    const handleEnd = () => {
+      if (!isDragging.value) {
+        return;
+      }
+      setTimeout(() => {
+        isDragging.value = false;
+      }, 0);
+      if (isMoved.value) {
+        handleColorsChange(colors.value, true);
+        isMoved.value = false;
+      }
+      window.removeEventListener('mousemove', handleMove, false);
+      window.removeEventListener('mouseup', handleEnd, false);
+      window.removeEventListener('contextmenu', handleEnd, false);
+    };
+
+    const handleKeyup = (e: KeyboardEvent) => {
+      if (props.disabled) {
+        return;
+      }
+      const points = colors.value;
+      let pos = points.findIndex((c) => c.id === selectedId.value);
+      const { length } = points;
+      // 必须保证有两个点
+      if (DELETE_KEYS.includes(e.key.toLocaleLowerCase()) && length > 2 && pos >= 0 && pos <= length - 1) {
+        points.splice(pos, 1);
+        if (!points[pos]) {
+          // eslint-disable-next-line no-nested-ternary
+          pos = points[pos + 1] ? pos + 1 : points[pos - 1] ? pos - 1 : 0;
+        }
+        const current = points[pos];
+        handleColorsChange(points, true);
+        handleSelectedIdChange(current?.id);
+      }
+    };
+
+    const handleThumbBarClick = (e: MouseEvent) => {
+      if (props.disabled) {
+        return;
+      }
+      let left = e.clientX - sliderRect.left;
+      left = Math.max(0, Math.min(sliderRect.width, left));
+      const percentLeft = (left / sliderRect.width) * 100;
+      const newPoint = genGradientPoint(percentLeft, colorInstance.value.rgba);
+      colors.value.push(newPoint);
+      handleColorsChange(colors.value, true);
+      handleSelectedIdChange(newPoint.id);
+    };
+
+    onMounted(() => {
+      const rect = refSlider.value.getBoundingClientRect();
+      sliderRect.left = rect.left;
+      sliderRect.width = rect.width || GRADIENT_SLIDER_DEFAULT_WIDTH;
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('mousemove', handleMove, false);
+      window.removeEventListener('mouseup', handleEnd, false);
+      window.removeEventListener('contextmenu', handleEnd, false);
+    });
+
+    return {
+      baseClassName,
+      statusClassNames,
+      refSlider,
+      degree,
+      selectedId,
+      colors,
+      colorInstance,
+      handleDegreeChange,
+      handleStart,
+      handleMove,
+      handleEnd,
+      handleKeyup,
+      handleThumbBarClick,
+    };
+  },
+  render() {
+    const { linearGradient, gradientColors } = this.colorInstance;
+    const {
+      colors, selectedId, degree, disabled, baseClassName, statusClassNames,
+    } = this;
+    const thumbBackground = gradientColors2string({
+      points: gradientColors,
+      degree: 90,
+    });
+    return (
+      <div class={`${baseClassName}__gradient`}>
+        <div class={`${baseClassName}__gradient-slider`}>
+          <div
+            class={[`${baseClassName}__slider`, `${baseClassName}--bg-alpha`]}
+            onKeyup={this.handleKeyup}
+            tabindex={0}
+            ref="refSlider"
+          >
+            <ul
+              class="gradient-thumbs"
+              onClick={this.handleThumbBarClick}
+              style={{
+                background: thumbBackground,
+              }}
+            >
+              {colors.map((t) => {
+                const left = `${Math.round(t.left * 100) / 100}%`;
+                return (
+                  <li
+                    class={[
+                      `${baseClassName}__thumb`,
+                      'gradient-thumbs__item',
+                      selectedId === t.id ? statusClassNames.active : '',
+                    ]}
+                    key={t.id}
+                    title={`${t.color} ${left}`}
+                    style={{
+                      color: t.color,
+                      left,
+                    }}
+                    onClick={(e: MouseEvent) => e.stopPropagation()}
+                    onMousedown={(e: MouseEvent) => this.handleStart(t.id, e)}
+                  >
+                    <span class={['gradient-thumbs__item-inner', `${baseClassName}--bg-alpha`]}></span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+        <div class={`${baseClassName}__gradient-degree`} title={`${degree}deg`}>
+          <t-input-number
+            theme="normal"
+            min={0}
+            max={360}
+            step={1}
+            format={(value: number) => `${value}°`}
+            v-model={this.degree}
+            onBlur={this.handleDegreeChange}
+            onEnter={this.handleDegreeChange}
+            disabled={disabled}
+          />
+        </div>
+        <div class={[`${baseClassName}__gradient-preview`, `${baseClassName}--bg-alpha`]}>
+          <span
+            class="preview-inner"
+            style={{
+              background: linearGradient,
+            }}
+          ></span>
+        </div>
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/panel/saturation.tsx b/src/color-picker/panel/saturation.tsx
new file mode 100644
index 000000000..7aa05062f
--- /dev/null
+++ b/src/color-picker/panel/saturation.tsx
@@ -0,0 +1,116 @@
+import {
+  computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref,
+} from '@vue/composition-api';
+import { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from '../const';
+import { Select as TSelect, Option as TOption } from '../../select';
+import { Draggable, Coordinate } from '../utils';
+import { useBaseClassName } from '../hooks';
+import baseProps from './base-props';
+
+export default defineComponent({
+  name: 'SaturationPanel',
+  components: {
+    TSelect,
+    TOption,
+  },
+  props: {
+    ...baseProps,
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const refPanel = ref<HTMLElement>(null);
+    const refThumb = ref<HTMLElement>(null);
+    const dragInstance = ref<Draggable>(null);
+    const panelRect = reactive({
+      width: SATURATION_PANEL_DEFAULT_WIDTH,
+      height: SATURATION_PANEL_DEFAULT_HEIGHT,
+    });
+
+    const styles = computed(() => {
+      const { saturation, value } = props.color;
+      const { width, height } = panelRect;
+      const top = Math.round((1 - value) * height);
+      const left = Math.round(saturation * width);
+      return {
+        color: props.color.rgb,
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    });
+
+    const getSaturationAndValueByCoordinate = (coordinate: Coordinate) => {
+      const { width, height } = panelRect;
+      const { x, y } = coordinate;
+      const saturation = Math.round((x / width) * 100);
+      const value = Math.round((1 - y / height) * 100);
+      return {
+        saturation,
+        value,
+      };
+    };
+
+    const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => {
+      if (props.disabled) {
+        return;
+      }
+      const { saturation, value } = getSaturationAndValueByCoordinate(coordinate);
+      props.handleChange({
+        saturation: saturation / 100,
+        value: value / 100,
+        addUsedColor: isEnded,
+      });
+    };
+
+    const handleDragEnd = (coordinate: Coordinate) => {
+      if (props.disabled) {
+        return;
+      }
+      nextTick(() => {
+        handleDrag(coordinate, true);
+      });
+    };
+
+    const panelBackground = computed(() => `hsl(${props.color.hue}, 100%, 50%)`);
+
+    onMounted(() => {
+      panelRect.width = refPanel.value.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;
+      panelRect.height = refPanel.value.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;
+      dragInstance.value = new Draggable(refPanel.value, {
+        start() {
+          panelRect.width = refPanel.value.offsetWidth;
+          panelRect.height = refPanel.value.offsetHeight;
+        },
+        drag: (coordinate: Coordinate) => {
+          handleDrag(coordinate);
+        },
+        end: handleDragEnd,
+      });
+    });
+
+    onBeforeUnmount(() => {
+      dragInstance.value.destroy();
+    });
+
+    return {
+      baseClassName,
+      refThumb,
+      refPanel,
+      styles,
+      panelBackground,
+    };
+  },
+  render() {
+    const { baseClassName, styles, panelBackground } = this;
+    return (
+      <div
+        class={[`${baseClassName}__saturation`]}
+        ref="refPanel"
+        style={{
+          background: panelBackground,
+        }}
+      >
+        <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/panel/slider.tsx b/src/color-picker/panel/slider.tsx
new file mode 100644
index 000000000..b14adbace
--- /dev/null
+++ b/src/color-picker/panel/slider.tsx
@@ -0,0 +1,108 @@
+import {
+  computed, defineComponent, onBeforeUnmount, onMounted, PropType, reactive, ref,
+} from '@vue/composition-api';
+import { SLIDER_DEFAULT_WIDTH } from '../const';
+import { Select as TSelect, Option as TOption } from '../../select';
+import { Draggable, Coordinate } from '../utils';
+import { useBaseClassName } from '../hooks';
+import baseProps from './base-props';
+
+export default defineComponent({
+  name: 'ColorSlider',
+  components: {
+    TSelect,
+    TOption,
+  },
+  props: {
+    ...baseProps,
+    className: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    maxValue: {
+      type: Number,
+      default: 360,
+    },
+    railStyle: {
+      type: Object as PropType<any>,
+    },
+  },
+  setup(props, { emit }) {
+    const baseClassName = useBaseClassName();
+    const refPanel = ref<HTMLElement>(null);
+    const refThumb = ref<HTMLElement>(null);
+    const dragInstance = ref<Draggable>(null);
+    const panelRect = reactive({
+      width: SLIDER_DEFAULT_WIDTH,
+    });
+    const styles = computed(() => {
+      const { width } = panelRect;
+      if (!width) {
+        return;
+      }
+      const left = Math.round((props.value / props.maxValue) * width);
+      return {
+        left: `${left}px`,
+        color: props.color.rgb,
+      };
+    });
+
+    const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => {
+      if (props.disabled) {
+        return;
+      }
+      const { width } = panelRect;
+      const { x } = coordinate;
+      const value = Math.round((x / width) * props.maxValue * 100) / 100;
+      props.handleChange(value, isEnded);
+      emit('change', value, isEnded);
+    };
+
+    const handleDragEnd = (coordinate: Coordinate) => {
+      if (props.disabled) {
+        return;
+      }
+      handleDrag(coordinate, true);
+    };
+
+    onMounted(() => {
+      panelRect.width = refPanel.value.offsetWidth || SLIDER_DEFAULT_WIDTH;
+      dragInstance.value = new Draggable(refPanel.value, {
+        start: () => {
+          // pop模式下由于是隐藏显示，这个宽度让其每次点击的时候重新计算
+          panelRect.width = refPanel.value.offsetWidth;
+        },
+        drag: (coordinate: Coordinate) => {
+          handleDrag(coordinate);
+        },
+        end: handleDragEnd,
+      });
+    });
+
+    onBeforeUnmount(() => {
+      dragInstance.value.destroy();
+    });
+
+    return {
+      baseClassName,
+      refThumb,
+      refPanel,
+      styles,
+    };
+  },
+  render() {
+    const {
+      baseClassName, className, railStyle, styles,
+    } = this;
+    return (
+      <div class={[`${baseClassName}__slider`, className]} ref="refPanel">
+        <div class={`${baseClassName}__rail`} style={railStyle}></div>
+        <span class={[`${baseClassName}__thumb`]} role="slider" tabindex={0} ref="refThumb" style={styles}></span>
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/panel/style/css.js b/src/color-picker/panel/style/css.js
new file mode 100644
index 000000000..f388879ac
--- /dev/null
+++ b/src/color-picker/panel/style/css.js
@@ -0,0 +1 @@
+import '../../style/index.css';
diff --git a/src/color-picker/panel/style/index.js b/src/color-picker/panel/style/index.js
new file mode 100644
index 000000000..4a2e7d583
--- /dev/null
+++ b/src/color-picker/panel/style/index.js
@@ -0,0 +1 @@
+import '../../style/index.js';
diff --git a/src/color-picker/panel/swatches.tsx b/src/color-picker/panel/swatches.tsx
new file mode 100644
index 000000000..66787fd41
--- /dev/null
+++ b/src/color-picker/panel/swatches.tsx
@@ -0,0 +1,154 @@
+import {
+  computed, defineComponent, PropType, ref,
+} from '@vue/composition-api';
+import { DeleteIcon, AddIcon } from 'tdesign-icons-vue';
+import { cloneDeep } from 'lodash';
+import { Select as TSelect, Option as TOption } from '../../select';
+import { Color } from '../utils';
+import { useBaseClassName } from '../hooks';
+import { useConfig, usePrefixClass } from '../../config-provider';
+import useCommonClassName from '../../hooks/useCommonClassName';
+import baseProps from './base-props';
+import { Button as TButton } from '../../button';
+import { TdColorHandler } from '../interfaces';
+
+export default defineComponent({
+  name: 'SwatchesPanel',
+  components: {
+    TSelect,
+    TOption,
+    TButton,
+  },
+  props: {
+    ...baseProps,
+    colors: {
+      type: Array as PropType<string[]>,
+      default: () => [] as PropType<string[]>,
+    },
+    title: {
+      type: String,
+      default: '系统色彩',
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    handleSetColor: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+    handleAddColor: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const { t, global } = useConfig('colorPicker');
+    const { global: confirmGlobal } = useConfig('popconfirm');
+    const classPrefix = usePrefixClass();
+    const { statusClassNames } = useCommonClassName();
+    const visiblePopConfirm = ref<boolean>(false);
+    const colorInstance = computed(() => cloneDeep(props.color));
+    const setVisiblePopConfirm = (visible: boolean) => {
+      visiblePopConfirm.value = visible;
+    };
+
+    const handleClick = (color: string) => {
+      props.handleSetColor(color);
+    };
+
+    const isEqualCurrentColor = (color: string) => Color.compare(color, colorInstance.value.css);
+
+    const selectedColorIndex = computed(() => props.colors.findIndex((color) => isEqualCurrentColor(color)));
+
+    /**
+     * 移除颜色
+     */
+    const handleRemoveColor = () => {
+      const colors = [...props.colors];
+      const selectedIndex = selectedColorIndex.value;
+      if (selectedIndex > -1) {
+        colors.splice(selectedIndex, 1);
+      } else {
+        colors.length = 0;
+      }
+      props.handleChange?.(colors);
+      setVisiblePopConfirm(false);
+    };
+
+    return {
+      t,
+      global,
+      confirmGlobal,
+      classPrefix,
+      baseClassName,
+      statusClassNames,
+      selectedColorIndex,
+      visiblePopConfirm,
+      setVisiblePopConfirm,
+      handleClick,
+      isEqualCurrentColor,
+      handleRemoveColor,
+    };
+  },
+  render() {
+    const {
+      baseClassName, statusClassNames, title, editable,
+    } = this;
+    const swatchesClass = `${baseClassName}__swatches`;
+
+    const renderActions = () => {
+      if (!editable) {
+        return null;
+      }
+      return (
+        <div class={`${swatchesClass}--actions`}>
+          <span role="button" class={`${baseClassName}__icon`} onClick={() => this.handleAddColor()}>
+            <AddIcon />
+          </span>
+          {this.colors.length > 0 ? (
+            <span role="button" class={`${baseClassName}__icon`} onClick={() => this.handleRemoveColor()}>
+              <DeleteIcon />
+            </span>
+          ) : null}
+        </div>
+      );
+    };
+
+    return (
+      <div class={swatchesClass}>
+        <h3 class={`${swatchesClass}--title`}>
+          <span>{title}</span>
+          {renderActions()}
+        </h3>
+        <ul class={[`${swatchesClass}--items`, 'narrow-scrollbar']}>
+          {this.colors.map((color) => (
+            <li
+              class={[
+                `${swatchesClass}--item`,
+                this.isEqualCurrentColor(color) && editable ? statusClassNames.active : '',
+              ]}
+              key={color}
+              onClick={() => {
+                if (this.disabled) {
+                  return;
+                }
+                this.handleClick(color);
+              }}
+            >
+              <div class={[`${swatchesClass}--color`, `${baseClassName}--bg-alpha`]}>
+                <span
+                  class={`${swatchesClass}--inner`}
+                  style={{
+                    background: color,
+                  }}
+                ></span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/style/css.js b/src/color-picker/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/src/color-picker/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/color-picker/style/index.js b/src/color-picker/style/index.js
new file mode 100644
index 000000000..180d455f6
--- /dev/null
+++ b/src/color-picker/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/web/components/color-picker/_index.less';
diff --git a/src/color-picker/trigger.tsx b/src/color-picker/trigger.tsx
new file mode 100644
index 000000000..e852c66e0
--- /dev/null
+++ b/src/color-picker/trigger.tsx
@@ -0,0 +1,96 @@
+import {
+  defineComponent, PropType, ref, watch,
+} from '@vue/composition-api';
+import { Input as TInput } from '../input';
+import { InputNumber as TInputNumber } from '../input-number';
+import { Color } from './utils';
+import { TdColorPickerProps } from './type';
+import { useBaseClassName } from './hooks';
+import { TdColorHandler } from './interfaces';
+
+export default defineComponent({
+  name: 'DefaultTrigger',
+  components: {
+    TInput,
+    TInputNumber,
+  },
+  inheritAttrs: false,
+  props: {
+    color: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    inputProps: {
+      type: Object as PropType<TdColorPickerProps['inputProps']>,
+      default: () => ({
+        autoWidth: true,
+      }),
+    },
+    handleTriggerChange: {
+      type: Function as PropType<TdColorHandler>,
+      default: () => () => {},
+    },
+  },
+  setup(props) {
+    const baseClassName = useBaseClassName();
+    const value = ref(props.color);
+
+    watch(
+      () => [props.color],
+      () => (value.value = props.color),
+    );
+
+    const handleChange = (input: string) => {
+      if (input === props.color) {
+        return;
+      }
+      if (!Color.isValid(input)) {
+        value.value = props.color;
+      } else {
+        value.value = input;
+      }
+      props.handleTriggerChange(value.value);
+    };
+
+    return {
+      baseClassName,
+      value,
+      handleChange,
+    };
+  },
+
+  render() {
+    const { baseClassName } = this;
+    const inputSlots = {
+      label: () => (
+        <div class={[`${baseClassName}__trigger--default__color`, `${baseClassName}--bg-alpha`]}>
+          <span
+            class={['color-inner']}
+            style={{
+              background: this.value,
+            }}
+          ></span>
+        </div>
+      ),
+    };
+    return (
+      <div class={`${baseClassName}__trigger--default`}>
+        <t-input
+          {...{
+            props: {
+              ...this.inputProps,
+            },
+          }}
+          scopedSlots={inputSlots}
+          v-model={this.value}
+          disabled={this.disabled}
+          onBlur={this.handleChange}
+        />
+      </div>
+    );
+  },
+});
diff --git a/src/color-picker/utils/click-outsider.ts b/src/color-picker/utils/click-outsider.ts
new file mode 100644
index 000000000..ff900fe55
--- /dev/null
+++ b/src/color-picker/utils/click-outsider.ts
@@ -0,0 +1,96 @@
+import { ComponentPublicInstance } from '@vue/composition-api';
+import { VNode } from 'vue';
+import { prefix } from '../../config';
+import { on } from '../../utils/dom';
+
+type Handler = (...args: unknown[]) => unknown;
+
+interface ElementHandler {
+  elements: HTMLElement[];
+  handler: Handler;
+}
+
+type FlushList = Map<number, ElementHandler>;
+
+const POPUP_SELECTOR = `.${prefix}-popup`;
+const nodeList: FlushList = new Map();
+
+let startClick: MouseEvent;
+
+let uid = 0;
+
+if (window && window.document) {
+  on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
+  on(document, 'mouseup', (e: MouseEvent) => {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { handler } of nodeList.values()) {
+      handler(e);
+    }
+  });
+}
+
+type NodeElement = HTMLElement | VNode | ComponentPublicInstance;
+
+const createDocumentHandler = (elements: HTMLElement[], handler: Handler, includePopup = true) => (e: MouseEvent) => {
+  if (includePopup) {
+    document.querySelectorAll(POPUP_SELECTOR).forEach((ele: Element) => {
+      elements.push(ele as HTMLElement);
+    });
+  }
+  const elementList = Array.from(new Set(elements));
+  const mouseUpTarget = e.target as Node;
+  const mouseDownTarget = startClick?.target as Node;
+  const isTargetUnExists = !mouseUpTarget || !mouseDownTarget;
+  if (isTargetUnExists) {
+    return;
+  }
+  const isContained = elementList.some((el) => {
+    const isSelf = el === mouseUpTarget;
+    const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+    return isSelf || isContainedByEl;
+  });
+  if (isContained) {
+    return;
+  }
+  handler();
+};
+
+/**
+ * 元素外面点击
+ *
+ * @example
+ *  onMounted(() => {
+ *    // 确保元素已挂载
+ *    addClickOutsider(refs.value, () => {
+ *      visible.value = false
+ *    });
+ *  });
+ *
+ *  onBeforeUnmount(() => removeClickOutsider);
+ */
+export const useClickOutsider = () => {
+  uid += 1;
+  const clickOutsiderId = uid;
+  const addClickOutsider = (els: NodeElement[], handler: Handler) => {
+    const elements = Array.from(new Set(els.filter((el) => el))).map((el: any) => {
+      const node = (el.el || el.$el || el) as HTMLElement;
+      return node;
+    });
+    const documentHandler = createDocumentHandler(elements, handler, true);
+    nodeList.set(clickOutsiderId, {
+      elements,
+      handler: documentHandler,
+    });
+  };
+
+  const removeClickOutsider = () => {
+    nodeList.has(clickOutsiderId) && nodeList.delete(clickOutsiderId);
+  };
+  return {
+    clickOutsiderId,
+    addClickOutsider,
+    removeClickOutsider,
+  };
+};
+
+export default useClickOutsider;
diff --git a/src/color-picker/utils/index.ts b/src/color-picker/utils/index.ts
new file mode 100644
index 000000000..3c47135e2
--- /dev/null
+++ b/src/color-picker/utils/index.ts
@@ -0,0 +1 @@
+export * from '../../_common/js/color-picker';
diff --git a/src/components.ts b/src/components.ts
index aa69c3566..c5489d167 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -20,6 +20,7 @@ export * from './tabs';
 // 输入
 export * from './cascader';
 export * from './checkbox';
+export * from './color-picker';
 export * from './date-picker';
 export * from './form';
 export * from './input';
diff --git a/src/input/index.ts b/src/input/index.ts
index 4da20f543..eaa5ecfb3 100644
--- a/src/input/index.ts
+++ b/src/input/index.ts
@@ -13,9 +13,11 @@ export type InputBlurEventParams = Parameters<InputProps['onBlur']>;
 export type InputFocusEventParams = Parameters<InputProps['onFocus']>;
 
 export const Addon = withInstall(_Addon);
-export const Input = withInstall(mapProps(['value'], {
-  model: { prop: 'value', event: 'change' },
-})(_Input));
+export const Input = withInstall(
+  mapProps(['value'], {
+    model: { prop: 'value', event: 'change' },
+  })(_Input),
+);
 export const InputGroup = withInstall(_InputGroup);
 
 export default Input;
diff --git a/src/tree/type.ts b/src/tree/type.ts
index 01069e582..b4a2855c5 100644
--- a/src/tree/type.ts
+++ b/src/tree/type.ts
@@ -175,7 +175,7 @@ export interface TdTreeProps<T extends TreeOptionData = TreeOptionData> {
    * 异步加载后触发，泛型 `T` 表示树节点 TS 类型
    */
   onLoad?: (context: { node: TreeNodeModel<T> }) => void;
-};
+}
 
 /** 组件实例方法 */
 export interface TreeInstanceFunctions<T extends TreeOptionData = TreeOptionData> {
@@ -285,7 +285,7 @@ export interface TreeNodeState {
    * @default false
    */
   visible?: boolean;
-};
+}
 
 export interface TreeNodeModel<T extends TreeOptionData = TreeOptionData> extends TreeNodeState {
   /**
@@ -376,8 +376,12 @@ export interface TreeNodeModel<T extends TreeOptionData = TreeOptionData> extend
    * 设置当前节点数据，数据变化可自动刷新页面，泛型 `T` 表示树节点 TS 类型
    */
   setData: (data: T) => void;
-};
+}
 
-export interface TreeKeysType { value?: string; label?: string; children?: string };
+export interface TreeKeysType {
+  value?: string;
+  label?: string;
+  children?: string;
+}
 
 export type TreeNodeValue = string | number;
diff --git a/test/e2e/color-picker/color-picker.spec.js b/test/e2e/color-picker/color-picker.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 3b75dace3..d5da5db85 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -3083,6 +3083,1196 @@ exports[`ssr snapshot test renders ./examples/collapse/demos/rightSlot.vue corre
 </div>
 `;
 
+exports[`ssr snapshot test renders ./examples/color-picker/demos/color-mode.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div class="item">
+    <h5>默认（单色 + 线性渐变）</h5>
+    <div className="t-color-picker__trigger">
+      <div class="t-color-picker__trigger--default">
+        <div class="t-input__wrap">
+          <div class="t-input t-size-m t-input--auto-width t-input--prefix">
+            <div class="t-input__prefix">
+              <div class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"><span class="color-inner" style="background:red;"></span></div>
+            </div><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="red" class="t-input__inner"><span class="t-input__input-pre">red</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="item">
+    <h5>仅单色模式</h5>
+    <div className="t-color-picker__trigger">
+      <div class="t-color-picker__trigger--default">
+        <div class="t-input__wrap">
+          <div class="t-input t-size-m t-input--auto-width t-input--prefix">
+            <div class="t-input__prefix">
+              <div class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"><span class="color-inner" style="background:#0052d9;"></span></div>
+            </div><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="#0052d9" class="t-input__inner"><span class="t-input__input-pre">#0052d9</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="width:100%;"></div>
+  <div class="item">
+    <h5>仅线性渐变模式</h5>
+    <div className="t-color-picker__trigger">
+      <div class="t-color-picker__trigger--default">
+        <div class="t-input__wrap">
+          <div class="t-input t-size-m t-input--auto-width t-input--prefix">
+            <div class="t-input__prefix">
+              <div class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"><span class="color-inner" style="background:linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);"></span></div>
+            </div><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)" class="t-input__inner"><span class="t-input__input-pre">linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/color-picker/demos/enable-alpha.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div class="t-color-picker__panel t-is-inline">
+    <div class="t-color-picker__head">
+      <div class="t-color-picker__mode">
+        <div class="t-radio-group t-size-s t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="monochrome" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">单色</span></label><label class="t-radio-button"><input type="radio" value="linear-gradient" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">渐变</span></label>
+          <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-color-picker__body">
+      <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:248px;top:0px;"></span></div>
+      <div class="t-color-picker__slider t-color-picker__hue">
+        <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+      </div>
+      <div class="t-color-picker__slider t-color-picker__alpha t-color-picker--bg-alpha">
+        <div class="t-color-picker__rail" style="background:linear-gradient(to right, rgba(0, 0, 0, 0), rgb(255, 0, 0));"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:248px;color:rgb(255, 0, 0);"></span>
+      </div>
+      <div class="t-color-picker__format">
+        <div class="t-color-picker__format--item">
+          <div class="t-select__wrap">
+            <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">RGB</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
+                <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+              </svg></div>
+          </div>
+        </div>
+        <div class="t-color-picker__format--item">
+          <div class="input-group">
+            <div class="input-group__item" style="flex:1;">
+              <div title="255" class="t-input-number t-size-m t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="255" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="input-group__item" style="flex:1;">
+              <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="input-group__item" style="flex:1;">
+              <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="input-group__item" style="flex:1.15;">
+              <div title="100" class="t-input-number t-size-m t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="100%" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="t-color-picker__swatches-wrap">
+        <div class="t-color-picker__swatches">
+          <h3 class="t-color-picker__swatches--title"><span>最近使用颜色</span>
+            <div class="t-color-picker__swatches--actions"><span role="button" class="t-color-picker__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add"><path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path></svg></span></div>
+          </h3>
+          <ul class="t-color-picker__swatches--items narrow-scrollbar"></ul>
+        </div>
+        <div class="t-color-picker__swatches">
+          <h3 class="t-color-picker__swatches--title"><span>系统预设颜色</span></h3>
+          <ul class="t-color-picker__swatches--items narrow-scrollbar">
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ECF2FE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D4E3FC;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BBD3FB;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#96BBF8;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#699EF5;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#4787F0;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#266FE8;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0052D9;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0034B5;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#001F97;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FDECEE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9D7D9;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F8B9BE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F78D94;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F36D78;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E34D59;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#C9353F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#B11F26;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#951114;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#680506;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FEF3E6;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9E0C7;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F7C797;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F2995F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ED7B2F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D35A21;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BA431B;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#9E3610;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#842B0B;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#5A1907;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E8F8F2;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BCEBDC;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#85DBBE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#48C79C;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#00A870;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#078D5C;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#067945;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#056334;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#044F2A;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#033017;"></span></div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/color-picker/demos/panel.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div class="t-color-picker__panel t-is-inline">
+    <div class="t-color-picker__head">
+      <div class="t-color-picker__mode">
+        <div class="t-radio-group t-size-s t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="monochrome" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">单色</span></label><label class="t-radio-button"><input type="radio" value="linear-gradient" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">渐变</span></label>
+          <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-color-picker__body">
+      <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
+      <div class="t-color-picker__slider t-color-picker__hue">
+        <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+      </div>
+      <div class="t-color-picker__format">
+        <div class="t-color-picker__format--item">
+          <div class="t-select__wrap">
+            <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">RGB</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
+                <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+              </svg></div>
+          </div>
+        </div>
+        <div class="t-color-picker__format--item">
+          <div class="input-group">
+            <div class="input-group__item" style="flex:1;">
+              <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="input-group__item" style="flex:1;">
+              <div title="82" class="t-input-number t-size-m t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="input-group__item" style="flex:1;">
+              <div title="217" class="t-input-number t-size-m t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="t-color-picker__swatches-wrap">
+        <div class="t-color-picker__swatches">
+          <h3 class="t-color-picker__swatches--title"><span>最近使用颜色</span>
+            <div class="t-color-picker__swatches--actions"><span role="button" class="t-color-picker__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add"><path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path></svg></span></div>
+          </h3>
+          <ul class="t-color-picker__swatches--items narrow-scrollbar"></ul>
+        </div>
+        <div class="t-color-picker__swatches">
+          <h3 class="t-color-picker__swatches--title"><span>系统预设颜色</span></h3>
+          <ul class="t-color-picker__swatches--items narrow-scrollbar">
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ECF2FE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D4E3FC;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BBD3FB;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#96BBF8;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#699EF5;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#4787F0;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#266FE8;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0052D9;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0034B5;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#001F97;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FDECEE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9D7D9;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F8B9BE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F78D94;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F36D78;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E34D59;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#C9353F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#B11F26;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#951114;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#680506;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FEF3E6;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9E0C7;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F7C797;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F2995F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ED7B2F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D35A21;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BA431B;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#9E3610;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#842B0B;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#5A1907;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E8F8F2;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BCEBDC;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#85DBBE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#48C79C;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#00A870;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#078D5C;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#067945;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#056334;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#044F2A;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#033017;"></span></div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/color-picker/demos/recent-color.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div>
+    <h6>预设最近使用色</h6>
+    <div class="t-color-picker__panel t-is-inline">
+      <div class="t-color-picker__head">
+        <div class="t-color-picker__mode">
+          <div class="t-radio-group t-size-s t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="monochrome" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">单色</span></label><label class="t-radio-button"><input type="radio" value="linear-gradient" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">渐变</span></label>
+            <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="t-color-picker__body">
+        <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:248px;top:0px;"></span></div>
+        <div class="t-color-picker__slider t-color-picker__hue">
+          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+        </div>
+        <div class="t-color-picker__format">
+          <div class="t-color-picker__format--item">
+            <div class="t-select__wrap">
+              <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">RGB</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
+                  <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+                </svg></div>
+            </div>
+          </div>
+          <div class="t-color-picker__format--item">
+            <div class="input-group">
+              <div class="input-group__item" style="flex:1;">
+                <div title="255" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="255" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-color-picker__swatches-wrap">
+          <div class="t-color-picker__swatches">
+            <h3 class="t-color-picker__swatches--title"><span>最近使用颜色</span>
+              <div class="t-color-picker__swatches--actions"><span role="button" class="t-color-picker__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add"><path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path></svg></span><span role="button" class="t-color-picker__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-delete"><path fill="currentColor" d="M6 12V6h1v6H6zM9 6v6h1V6H9z" fill-opacity="0.9"></path><path fill="currentColor" d="M10.5 3H14v1h-1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V4H2V3h3.5V1.8c0-.44.36-.8.8-.8h3.4c.44 0 .8.36.8.8V3zm-4 0h3V2h-3v1zM4 4v10h8V4H4z" fill-opacity="0.9"></path></svg></span></div>
+            </h3>
+            <ul class="t-color-picker__swatches--items narrow-scrollbar">
+              <li class="t-color-picker__swatches--item t-is-active">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:red;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:green;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:yellow;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:blue;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:purple;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:linear-gradient(to right, #fa709a 0%, #fee140 100%);"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:linear-gradient(45deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:linear-gradient(120deg, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);"></span></div>
+              </li>
+            </ul>
+          </div>
+          <div class="t-color-picker__swatches">
+            <h3 class="t-color-picker__swatches--title"><span>系统预设颜色</span></h3>
+            <ul class="t-color-picker__swatches--items narrow-scrollbar">
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ECF2FE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D4E3FC;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BBD3FB;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#96BBF8;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#699EF5;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#4787F0;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#266FE8;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0052D9;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0034B5;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#001F97;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FDECEE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9D7D9;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F8B9BE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F78D94;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F36D78;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E34D59;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#C9353F;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#B11F26;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#951114;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#680506;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FEF3E6;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9E0C7;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F7C797;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F2995F;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ED7B2F;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D35A21;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BA431B;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#9E3610;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#842B0B;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#5A1907;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E8F8F2;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BCEBDC;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#85DBBE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#48C79C;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#00A870;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#078D5C;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#067945;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#056334;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#044F2A;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#033017;"></span></div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h6>完全不显示最近使用色</h6>
+    <div class="t-color-picker__panel t-is-inline">
+      <div class="t-color-picker__head">
+        <div class="t-color-picker__mode">
+          <div class="t-radio-group t-size-s t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="monochrome" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">单色</span></label><label class="t-radio-button"><input type="radio" value="linear-gradient" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">渐变</span></label>
+            <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="t-color-picker__body">
+        <div class="t-color-picker__saturation" style="background:hsl(0, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(255, 0, 0);left:248px;top:0px;"></span></div>
+        <div class="t-color-picker__slider t-color-picker__hue">
+          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:0px;color:rgb(255, 0, 0);"></span>
+        </div>
+        <div class="t-color-picker__format">
+          <div class="t-color-picker__format--item">
+            <div class="t-select__wrap">
+              <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">RGB</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
+                  <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+                </svg></div>
+            </div>
+          </div>
+          <div class="t-color-picker__format--item">
+            <div class="input-group">
+              <div class="input-group__item" style="flex:1;">
+                <div title="255" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="255" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-color-picker__swatches-wrap">
+          <div class="t-color-picker__swatches">
+            <h3 class="t-color-picker__swatches--title"><span>系统预设颜色</span></h3>
+            <ul class="t-color-picker__swatches--items narrow-scrollbar">
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ECF2FE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D4E3FC;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BBD3FB;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#96BBF8;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#699EF5;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#4787F0;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#266FE8;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0052D9;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0034B5;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#001F97;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FDECEE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9D7D9;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F8B9BE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F78D94;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F36D78;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E34D59;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#C9353F;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#B11F26;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#951114;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#680506;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FEF3E6;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9E0C7;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F7C797;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F2995F;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ED7B2F;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D35A21;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BA431B;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#9E3610;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#842B0B;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#5A1907;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E8F8F2;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BCEBDC;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#85DBBE;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#48C79C;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#00A870;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#078D5C;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#067945;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#056334;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#044F2A;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#033017;"></span></div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/color-picker/demos/status-disabled.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div className="t-color-picker__trigger">
+    <div class="t-color-picker__trigger--default">
+      <div class="t-input__wrap">
+        <div class="t-input t-size-m t-is-disabled t-input--auto-width t-input--prefix">
+          <div class="t-input__prefix">
+            <div class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"><span class="color-inner" style="background:red;"></span></div>
+          </div><input disabled="disabled" autocomplete="" placeholder="请输入" type="text" unselectable="off" value="red" class="t-input__inner"><span class="t-input__input-pre">red</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/color-picker/demos/status-readonly.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div class="t-color-picker__panel t-is-disabled t-is-inline">
+    <div class="t-color-picker__head">
+      <div class="t-color-picker__mode">
+        <div class="t-radio-group t-size-s t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="monochrome" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">单色</span></label><label class="t-radio-button"><input type="radio" value="linear-gradient" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">渐变</span></label>
+          <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-color-picker__body">
+      <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
+      <div class="t-color-picker__slider t-color-picker__hue">
+        <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+      </div>
+      <div class="t-color-picker__format">
+        <div class="t-color-picker__format--item">
+          <div class="t-select__wrap">
+            <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">RGB</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
+                <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+              </svg></div>
+          </div>
+        </div>
+        <div class="t-color-picker__format--item">
+          <div class="input-group">
+            <div class="input-group__item" style="flex:1;">
+              <div title="0" class="t-input-number t-size-m t-is-disabled t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-is-disabled t-align-center"><input disabled="disabled" autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="input-group__item" style="flex:1;">
+              <div title="82" class="t-input-number t-size-m t-is-disabled t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-is-disabled t-align-center"><input disabled="disabled" autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="input-group__item" style="flex:1;">
+              <div title="217" class="t-input-number t-size-m t-is-disabled t-input-number--normal">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-is-disabled t-align-center"><input disabled="disabled" autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="t-color-picker__swatches-wrap">
+        <div class="t-color-picker__swatches">
+          <h3 class="t-color-picker__swatches--title"><span>最近使用颜色</span>
+            <div class="t-color-picker__swatches--actions"><span role="button" class="t-color-picker__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add"><path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path></svg></span></div>
+          </h3>
+          <ul class="t-color-picker__swatches--items narrow-scrollbar"></ul>
+        </div>
+        <div class="t-color-picker__swatches">
+          <h3 class="t-color-picker__swatches--title"><span>系统预设颜色</span></h3>
+          <ul class="t-color-picker__swatches--items narrow-scrollbar">
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ECF2FE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D4E3FC;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BBD3FB;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#96BBF8;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#699EF5;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#4787F0;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#266FE8;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0052D9;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#0034B5;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#001F97;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FDECEE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9D7D9;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F8B9BE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F78D94;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F36D78;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E34D59;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#C9353F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#B11F26;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#951114;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#680506;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#FEF3E6;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F9E0C7;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F7C797;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#F2995F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#ED7B2F;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#D35A21;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BA431B;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#9E3610;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#842B0B;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#5A1907;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#E8F8F2;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#BCEBDC;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#85DBBE;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#48C79C;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#00A870;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#078D5C;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#067945;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#056334;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#044F2A;"></span></div>
+            </li>
+            <li class="t-color-picker__swatches--item">
+              <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:#033017;"></span></div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/color-picker/demos/swatch-color.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div>
+    <h6>自定义系统色</h6>
+    <div class="t-color-picker__panel t-is-inline">
+      <div class="t-color-picker__head">
+        <div class="t-color-picker__mode">
+          <div class="t-radio-group t-size-s t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="monochrome" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">单色</span></label><label class="t-radio-button"><input type="radio" value="linear-gradient" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">渐变</span></label>
+            <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="t-color-picker__body">
+        <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
+        <div class="t-color-picker__slider t-color-picker__hue">
+          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+        </div>
+        <div class="t-color-picker__format">
+          <div class="t-color-picker__format--item">
+            <div class="t-select__wrap">
+              <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">RGB</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
+                  <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+                </svg></div>
+            </div>
+          </div>
+          <div class="t-color-picker__format--item">
+            <div class="input-group">
+              <div class="input-group__item" style="flex:1;">
+                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="82" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="217" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-color-picker__swatches-wrap">
+          <div class="t-color-picker__swatches">
+            <h3 class="t-color-picker__swatches--title"><span>最近使用颜色</span>
+              <div class="t-color-picker__swatches--actions"><span role="button" class="t-color-picker__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add"><path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path></svg></span></div>
+            </h3>
+            <ul class="t-color-picker__swatches--items narrow-scrollbar"></ul>
+          </div>
+          <div class="t-color-picker__swatches">
+            <h3 class="t-color-picker__swatches--title"><span>系统预设颜色</span></h3>
+            <ul class="t-color-picker__swatches--items narrow-scrollbar">
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:red;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:green;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:yellow;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:blue;"></span></div>
+              </li>
+              <li class="t-color-picker__swatches--item">
+                <div class="t-color-picker__swatches--color t-color-picker--bg-alpha"><span class="t-color-picker__swatches--inner" style="background:purple;"></span></div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h6>完全不显示系统色</h6>
+    <div class="t-color-picker__panel t-is-inline">
+      <div class="t-color-picker__head">
+        <div class="t-color-picker__mode">
+          <div class="t-radio-group t-size-s t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="monochrome" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">单色</span></label><label class="t-radio-button"><input type="radio" value="linear-gradient" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">渐变</span></label>
+            <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="t-color-picker__body">
+        <div class="t-color-picker__saturation" style="background:hsl(217.32718894009219, 100%, 50%);"><span role="slider" tabindex="0" class="t-color-picker__thumb" style="color:rgb(0, 82, 217);left:248px;top:21px;"></span></div>
+        <div class="t-color-picker__slider t-color-picker__hue">
+          <div class="t-color-picker__rail"></div><span role="slider" tabindex="0" class="t-color-picker__thumb" style="left:150px;color:rgb(0, 82, 217);"></span>
+        </div>
+        <div class="t-color-picker__format">
+          <div class="t-color-picker__format--item">
+            <div class="t-select__wrap">
+              <div class="t-select t-select-polyfill t-size-m t-select__popup-reference"><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><span class="t-select__single">RGB</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill">
+                  <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+                </svg></div>
+            </div>
+          </div>
+          <div class="t-color-picker__format--item">
+            <div class="input-group">
+              <div class="input-group__item" style="flex:1;">
+                <div title="0" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="0" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="82" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="82" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="input-group__item" style="flex:1;">
+                <div title="217" class="t-input-number t-size-m t-input-number--normal">
+                  <div class="t-input__wrap">
+                    <div ref="refInputElem" class="t-input t-size-m t-align-center"><input autocomplete="off" placeholder="请输入" type="text" unselectable="off" value="217" class="t-input__inner"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-color-picker__swatches-wrap">
+          <div class="t-color-picker__swatches">
+            <h3 class="t-color-picker__swatches--title"><span>最近使用颜色</span>
+              <div class="t-color-picker__swatches--actions"><span role="button" class="t-color-picker__icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add"><path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path></svg></span></div>
+            </h3>
+            <ul class="t-color-picker__swatches--items narrow-scrollbar"></ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/color-picker/demos/trigger.vue correctly 1`] = `
+<div class="tdesign-demo-block-row">
+  <div className="t-color-picker__trigger">
+    <div class="t-color-picker__trigger--default">
+      <div class="t-input__wrap">
+        <div class="t-input t-size-m t-input--auto-width t-input--prefix">
+          <div class="t-input__prefix">
+            <div class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"><span class="color-inner" style="background:#0052d9;"></span></div>
+          </div><input autocomplete="" placeholder="请输入" type="text" unselectable="off" value="#0052d9" class="t-input__inner"><span class="t-input__input-pre">#0052d9</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ssr snapshot test renders ./examples/comment/demos/base.vue correctly 1`] = `
 <div class="t-comment">
   <div class="t-comment__inner">
diff --git a/test/unit/color-picker/__snapshots__/demo.test.js.snap b/test/unit/color-picker/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..a9e8a9f52
--- /dev/null
+++ b/test/unit/color-picker/__snapshots__/demo.test.js.snap
@@ -0,0 +1,4750 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorPicker ColorPicker colorModeVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div
+    class="item"
+  >
+    <h5>
+      默认（单色 + 线性渐变）
+    </h5>
+     
+    <div
+      classname="t-color-picker__trigger"
+    >
+      <div
+        class="t-color-picker__trigger--default"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-size-m t-input--auto-width t-input--prefix"
+          >
+            <div
+              class="t-input__prefix"
+            >
+              <div
+                class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="color-inner"
+                  style="background: red;"
+                />
+              </div>
+            </div>
+            <input
+              autocomplete=""
+              class="t-input__inner"
+              placeholder="请输入"
+              type="text"
+              unselectable="off"
+            />
+            <span
+              class="t-input__input-pre"
+            >
+              red
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    class="item"
+  >
+    <h5>
+      仅单色模式
+    </h5>
+     
+    <div
+      classname="t-color-picker__trigger"
+    >
+      <div
+        class="t-color-picker__trigger--default"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-size-m t-input--auto-width t-input--prefix"
+          >
+            <div
+              class="t-input__prefix"
+            >
+              <div
+                class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="color-inner"
+                  style="background: rgb(0, 82, 217);"
+                />
+              </div>
+            </div>
+            <input
+              autocomplete=""
+              class="t-input__inner"
+              placeholder="请输入"
+              type="text"
+              unselectable="off"
+            />
+            <span
+              class="t-input__input-pre"
+            >
+              #0052d9
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div
+    style="width: 100%;"
+  />
+   
+  <div
+    class="item"
+  >
+    <h5>
+      仅线性渐变模式
+    </h5>
+     
+    <div
+      classname="t-color-picker__trigger"
+    >
+      <div
+        class="t-color-picker__trigger--default"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-size-m t-input--auto-width t-input--prefix"
+          >
+            <div
+              class="t-input__prefix"
+            >
+              <div
+                class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="color-inner"
+                />
+              </div>
+            </div>
+            <input
+              autocomplete=""
+              class="t-input__inner"
+              placeholder="请输入"
+              type="text"
+              unselectable="off"
+            />
+            <span
+              class="t-input__input-pre"
+            >
+              linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker ColorPicker enableAlphaVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div
+    class="t-color-picker__panel t-is-inline"
+  >
+    <div
+      class="t-color-picker__head"
+    >
+      <div
+        class="t-color-picker__mode"
+      >
+        <div
+          class="t-radio-group t-size-s t-radio-group--filled"
+        >
+          <label
+            class="t-radio-button t-is-checked"
+          >
+            <input
+              class="t-radio-button__former"
+              name=""
+              type="radio"
+              value="monochrome"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              单色
+            </span>
+          </label>
+          <label
+            class="t-radio-button"
+          >
+            <input
+              class="t-radio-button__former"
+              name=""
+              type="radio"
+              value="linear-gradient"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              渐变
+            </span>
+          </label>
+          <div
+            class="t-radio-group__bg-block"
+            style="width: 0px; left: 0px;"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-color-picker__body"
+    >
+      <div
+        class="t-color-picker__saturation"
+        style="background: rgb(255, 0, 0);"
+      >
+        <span
+          class="t-color-picker__thumb"
+          role="slider"
+          style="color: rgb(255, 0, 0); left: 248px; top: 0px;"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="t-color-picker__slider t-color-picker__hue"
+      >
+        <div
+          class="t-color-picker__rail"
+        />
+        <span
+          class="t-color-picker__thumb"
+          role="slider"
+          style="left: 0px; color: rgb(255, 0, 0);"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="t-color-picker__slider t-color-picker__alpha t-color-picker--bg-alpha"
+      >
+        <div
+          class="t-color-picker__rail"
+        />
+        <span
+          class="t-color-picker__thumb"
+          role="slider"
+          style="left: 248px; color: rgb(255, 0, 0);"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="t-color-picker__format"
+      >
+        <div
+          class="t-color-picker__format--item"
+        >
+          <div
+            class="t-select__wrap"
+          >
+            <div
+              class="t-select t-select-polyfill t-size-m t-select__popup-reference"
+            >
+              <span
+                class="t-tag t-tag--default t-size-m t-tag--dark"
+                style="display: none;"
+              >
+                +0
+              </span>
+              <span
+                class="t-select__single"
+              >
+                RGB
+              </span>
+              <svg
+                class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__format--item"
+        >
+          <div
+            class="input-group"
+          >
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-input-number--normal"
+                title="255"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-input-number--normal"
+                title="0"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-input-number--normal"
+                title="0"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="input-group__item"
+              style="flex: 1.15;"
+            >
+              <div
+                class="t-input-number t-size-m t-input-number--normal"
+                title="100"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__swatches-wrap"
+      >
+        <div
+          class="t-color-picker__swatches"
+        >
+          <h3
+            class="t-color-picker__swatches--title"
+          >
+            <span>
+              最近使用颜色
+            </span>
+            <div
+              class="t-color-picker__swatches--actions"
+            >
+              <span
+                class="t-color-picker__icon"
+                role="button"
+              >
+                <svg
+                  class="t-icon t-icon-add"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+            </div>
+          </h3>
+          <ul
+            class="t-color-picker__swatches--items narrow-scrollbar"
+          />
+        </div>
+        <div
+          class="t-color-picker__swatches"
+        >
+          <h3
+            class="t-color-picker__swatches--title"
+          >
+            <span>
+              系统预设颜色
+            </span>
+          </h3>
+          <ul
+            class="t-color-picker__swatches--items narrow-scrollbar"
+          >
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(236, 242, 254);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(212, 227, 252);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(187, 211, 251);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(150, 187, 248);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(105, 158, 245);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(71, 135, 240);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(38, 111, 232);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 82, 217);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 52, 181);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 31, 151);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(253, 236, 238);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(249, 215, 217);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(248, 185, 190);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(247, 141, 148);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(243, 109, 120);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(227, 77, 89);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(201, 53, 63);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(177, 31, 38);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(149, 17, 20);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(104, 5, 6);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(254, 243, 230);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(249, 224, 199);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(247, 199, 151);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(242, 153, 95);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(237, 123, 47);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(211, 90, 33);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(186, 67, 27);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(158, 54, 16);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(132, 43, 11);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(90, 25, 7);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(232, 248, 242);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(188, 235, 220);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(133, 219, 190);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(72, 199, 156);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 168, 112);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(7, 141, 92);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(6, 121, 69);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(5, 99, 52);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(4, 79, 42);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(3, 48, 23);"
+                />
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker ColorPicker panelVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div
+    class="t-color-picker__panel t-is-inline"
+  >
+    <div
+      class="t-color-picker__head"
+    >
+      <div
+        class="t-color-picker__mode"
+      >
+        <div
+          class="t-radio-group t-size-s t-radio-group--filled"
+        >
+          <label
+            class="t-radio-button t-is-checked"
+          >
+            <input
+              class="t-radio-button__former"
+              name=""
+              type="radio"
+              value="monochrome"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              单色
+            </span>
+          </label>
+          <label
+            class="t-radio-button"
+          >
+            <input
+              class="t-radio-button__former"
+              name=""
+              type="radio"
+              value="linear-gradient"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              渐变
+            </span>
+          </label>
+          <div
+            class="t-radio-group__bg-block"
+            style="width: 0px; left: 0px;"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-color-picker__body"
+    >
+      <div
+        class="t-color-picker__saturation"
+        style="background: rgb(0, 0, 0);"
+      >
+        <span
+          class="t-color-picker__thumb"
+          role="slider"
+          style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="t-color-picker__slider t-color-picker__hue"
+      >
+        <div
+          class="t-color-picker__rail"
+        />
+        <span
+          class="t-color-picker__thumb"
+          role="slider"
+          style="left: 150px; color: rgb(0, 82, 217);"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="t-color-picker__format"
+      >
+        <div
+          class="t-color-picker__format--item"
+        >
+          <div
+            class="t-select__wrap"
+          >
+            <div
+              class="t-select t-select-polyfill t-size-m t-select__popup-reference"
+            >
+              <span
+                class="t-tag t-tag--default t-size-m t-tag--dark"
+                style="display: none;"
+              >
+                +0
+              </span>
+              <span
+                class="t-select__single"
+              >
+                RGB
+              </span>
+              <svg
+                class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__format--item"
+        >
+          <div
+            class="input-group"
+          >
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-input-number--normal"
+                title="0"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-input-number--normal"
+                title="82"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-input-number--normal"
+                title="217"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__swatches-wrap"
+      >
+        <div
+          class="t-color-picker__swatches"
+        >
+          <h3
+            class="t-color-picker__swatches--title"
+          >
+            <span>
+              最近使用颜色
+            </span>
+            <div
+              class="t-color-picker__swatches--actions"
+            >
+              <span
+                class="t-color-picker__icon"
+                role="button"
+              >
+                <svg
+                  class="t-icon t-icon-add"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+            </div>
+          </h3>
+          <ul
+            class="t-color-picker__swatches--items narrow-scrollbar"
+          />
+        </div>
+        <div
+          class="t-color-picker__swatches"
+        >
+          <h3
+            class="t-color-picker__swatches--title"
+          >
+            <span>
+              系统预设颜色
+            </span>
+          </h3>
+          <ul
+            class="t-color-picker__swatches--items narrow-scrollbar"
+          >
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(236, 242, 254);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(212, 227, 252);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(187, 211, 251);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(150, 187, 248);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(105, 158, 245);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(71, 135, 240);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(38, 111, 232);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 82, 217);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 52, 181);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 31, 151);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(253, 236, 238);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(249, 215, 217);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(248, 185, 190);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(247, 141, 148);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(243, 109, 120);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(227, 77, 89);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(201, 53, 63);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(177, 31, 38);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(149, 17, 20);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(104, 5, 6);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(254, 243, 230);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(249, 224, 199);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(247, 199, 151);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(242, 153, 95);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(237, 123, 47);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(211, 90, 33);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(186, 67, 27);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(158, 54, 16);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(132, 43, 11);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(90, 25, 7);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(232, 248, 242);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(188, 235, 220);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(133, 219, 190);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(72, 199, 156);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 168, 112);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(7, 141, 92);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(6, 121, 69);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(5, 99, 52);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(4, 79, 42);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(3, 48, 23);"
+                />
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker ColorPicker recentColorVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div>
+    <h6>
+      预设最近使用色
+    </h6>
+     
+    <div
+      class="t-color-picker__panel t-is-inline"
+    >
+      <div
+        class="t-color-picker__head"
+      >
+        <div
+          class="t-color-picker__mode"
+        >
+          <div
+            class="t-radio-group t-size-s t-radio-group--filled"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="monochrome"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                单色
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="linear-gradient"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                渐变
+              </span>
+            </label>
+            <div
+              class="t-radio-group__bg-block"
+              style="width: 0px; left: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__body"
+      >
+        <div
+          class="t-color-picker__saturation"
+          style="background: rgb(255, 0, 0);"
+        >
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="color: rgb(255, 0, 0); left: 248px; top: 0px;"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__slider t-color-picker__hue"
+        >
+          <div
+            class="t-color-picker__rail"
+          />
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="left: 0px; color: rgb(255, 0, 0);"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__format"
+        >
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="t-select__wrap"
+            >
+              <div
+                class="t-select t-select-polyfill t-size-m t-select__popup-reference"
+              >
+                <span
+                  class="t-tag t-tag--default t-size-m t-tag--dark"
+                  style="display: none;"
+                >
+                  +0
+                </span>
+                <span
+                  class="t-select__single"
+                >
+                  RGB
+                </span>
+                <svg
+                  class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="input-group"
+            >
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="255"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="0"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="0"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__swatches-wrap"
+        >
+          <div
+            class="t-color-picker__swatches"
+          >
+            <h3
+              class="t-color-picker__swatches--title"
+            >
+              <span>
+                最近使用颜色
+              </span>
+              <div
+                class="t-color-picker__swatches--actions"
+              >
+                <span
+                  class="t-color-picker__icon"
+                  role="button"
+                >
+                  <svg
+                    class="t-icon t-icon-add"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="t-color-picker__icon"
+                  role="button"
+                >
+                  <svg
+                    class="t-icon t-icon-delete"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M6 12V6h1v6H6zM9 6v6h1V6H9z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                    <path
+                      d="M10.5 3H14v1h-1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V4H2V3h3.5V1.8c0-.44.36-.8.8-.8h3.4c.44 0 .8.36.8.8V3zm-4 0h3V2h-3v1zM4 4v10h8V4H4z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </h3>
+            <ul
+              class="t-color-picker__swatches--items narrow-scrollbar"
+            >
+              <li
+                class="t-color-picker__swatches--item t-is-active"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: red;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: green;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: yellow;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: blue;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: purple;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                  />
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div
+            class="t-color-picker__swatches"
+          >
+            <h3
+              class="t-color-picker__swatches--title"
+            >
+              <span>
+                系统预设颜色
+              </span>
+            </h3>
+            <ul
+              class="t-color-picker__swatches--items narrow-scrollbar"
+            >
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(236, 242, 254);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(212, 227, 252);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(187, 211, 251);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(150, 187, 248);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(105, 158, 245);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(71, 135, 240);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(38, 111, 232);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 82, 217);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 52, 181);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 31, 151);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(253, 236, 238);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(249, 215, 217);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(248, 185, 190);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(247, 141, 148);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(243, 109, 120);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(227, 77, 89);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(201, 53, 63);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(177, 31, 38);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(149, 17, 20);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(104, 5, 6);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(254, 243, 230);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(249, 224, 199);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(247, 199, 151);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(242, 153, 95);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(237, 123, 47);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(211, 90, 33);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(186, 67, 27);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(158, 54, 16);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(132, 43, 11);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(90, 25, 7);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(232, 248, 242);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(188, 235, 220);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(133, 219, 190);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(72, 199, 156);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 168, 112);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(7, 141, 92);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(6, 121, 69);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(5, 99, 52);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(4, 79, 42);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(3, 48, 23);"
+                  />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div>
+    <h6>
+      完全不显示最近使用色
+    </h6>
+     
+    <div
+      class="t-color-picker__panel t-is-inline"
+    >
+      <div
+        class="t-color-picker__head"
+      >
+        <div
+          class="t-color-picker__mode"
+        >
+          <div
+            class="t-radio-group t-size-s t-radio-group--filled"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="monochrome"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                单色
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="linear-gradient"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                渐变
+              </span>
+            </label>
+            <div
+              class="t-radio-group__bg-block"
+              style="width: 0px; left: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__body"
+      >
+        <div
+          class="t-color-picker__saturation"
+          style="background: rgb(255, 0, 0);"
+        >
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="color: rgb(255, 0, 0); left: 248px; top: 0px;"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__slider t-color-picker__hue"
+        >
+          <div
+            class="t-color-picker__rail"
+          />
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="left: 0px; color: rgb(255, 0, 0);"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__format"
+        >
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="t-select__wrap"
+            >
+              <div
+                class="t-select t-select-polyfill t-size-m t-select__popup-reference"
+              >
+                <span
+                  class="t-tag t-tag--default t-size-m t-tag--dark"
+                  style="display: none;"
+                >
+                  +0
+                </span>
+                <span
+                  class="t-select__single"
+                >
+                  RGB
+                </span>
+                <svg
+                  class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="input-group"
+            >
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="255"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="0"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="0"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__swatches-wrap"
+        >
+          <div
+            class="t-color-picker__swatches"
+          >
+            <h3
+              class="t-color-picker__swatches--title"
+            >
+              <span>
+                系统预设颜色
+              </span>
+            </h3>
+            <ul
+              class="t-color-picker__swatches--items narrow-scrollbar"
+            >
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(236, 242, 254);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(212, 227, 252);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(187, 211, 251);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(150, 187, 248);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(105, 158, 245);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(71, 135, 240);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(38, 111, 232);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 82, 217);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 52, 181);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 31, 151);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(253, 236, 238);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(249, 215, 217);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(248, 185, 190);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(247, 141, 148);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(243, 109, 120);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(227, 77, 89);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(201, 53, 63);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(177, 31, 38);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(149, 17, 20);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(104, 5, 6);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(254, 243, 230);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(249, 224, 199);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(247, 199, 151);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(242, 153, 95);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(237, 123, 47);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(211, 90, 33);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(186, 67, 27);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(158, 54, 16);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(132, 43, 11);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(90, 25, 7);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(232, 248, 242);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(188, 235, 220);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(133, 219, 190);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(72, 199, 156);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(0, 168, 112);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(7, 141, 92);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(6, 121, 69);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(5, 99, 52);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(4, 79, 42);"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: rgb(3, 48, 23);"
+                  />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker ColorPicker statusDisabledVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div
+    classname="t-color-picker__trigger"
+  >
+    <div
+      class="t-color-picker__trigger--default"
+    >
+      <div
+        class="t-input__wrap"
+      >
+        <div
+          class="t-input t-size-m t-is-disabled t-input--auto-width t-input--prefix"
+        >
+          <div
+            class="t-input__prefix"
+          >
+            <div
+              class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"
+            >
+              <span
+                class="color-inner"
+                style="background: red;"
+              />
+            </div>
+          </div>
+          <input
+            autocomplete=""
+            class="t-input__inner"
+            disabled="disabled"
+            placeholder="请输入"
+            type="text"
+            unselectable="off"
+          />
+          <span
+            class="t-input__input-pre"
+          >
+            red
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker ColorPicker statusReadonlyVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div
+    class="t-color-picker__panel t-is-disabled t-is-inline"
+  >
+    <div
+      class="t-color-picker__head"
+    >
+      <div
+        class="t-color-picker__mode"
+      >
+        <div
+          class="t-radio-group t-size-s t-radio-group--filled"
+        >
+          <label
+            class="t-radio-button t-is-checked"
+          >
+            <input
+              class="t-radio-button__former"
+              name=""
+              type="radio"
+              value="monochrome"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              单色
+            </span>
+          </label>
+          <label
+            class="t-radio-button"
+          >
+            <input
+              class="t-radio-button__former"
+              name=""
+              type="radio"
+              value="linear-gradient"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              渐变
+            </span>
+          </label>
+          <div
+            class="t-radio-group__bg-block"
+            style="width: 0px; left: 0px;"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-color-picker__body"
+    >
+      <div
+        class="t-color-picker__saturation"
+        style="background: rgb(0, 0, 0);"
+      >
+        <span
+          class="t-color-picker__thumb"
+          role="slider"
+          style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="t-color-picker__slider t-color-picker__hue"
+      >
+        <div
+          class="t-color-picker__rail"
+        />
+        <span
+          class="t-color-picker__thumb"
+          role="slider"
+          style="left: 150px; color: rgb(0, 82, 217);"
+          tabindex="0"
+        />
+      </div>
+      <div
+        class="t-color-picker__format"
+      >
+        <div
+          class="t-color-picker__format--item"
+        >
+          <div
+            class="t-select__wrap"
+          >
+            <div
+              class="t-select t-select-polyfill t-size-m t-select__popup-reference"
+            >
+              <span
+                class="t-tag t-tag--default t-size-m t-tag--dark"
+                style="display: none;"
+              >
+                +0
+              </span>
+              <span
+                class="t-select__single"
+              >
+                RGB
+              </span>
+              <svg
+                class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill"
+                fill="none"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                  stroke="black"
+                  stroke-opacity="0.9"
+                  stroke-width="1.3"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__format--item"
+        >
+          <div
+            class="input-group"
+          >
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-is-disabled t-input-number--normal"
+                title="0"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-is-disabled t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      disabled="disabled"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-is-disabled t-input-number--normal"
+                title="82"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-is-disabled t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      disabled="disabled"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="input-group__item"
+              style="flex: 1;"
+            >
+              <div
+                class="t-input-number t-size-m t-is-disabled t-input-number--normal"
+                title="217"
+              >
+                <div
+                  class="t-input__wrap"
+                >
+                  <div
+                    class="t-input t-size-m t-is-disabled t-align-center"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      disabled="disabled"
+                      placeholder="请输入"
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__swatches-wrap"
+      >
+        <div
+          class="t-color-picker__swatches"
+        >
+          <h3
+            class="t-color-picker__swatches--title"
+          >
+            <span>
+              最近使用颜色
+            </span>
+            <div
+              class="t-color-picker__swatches--actions"
+            >
+              <span
+                class="t-color-picker__icon"
+                role="button"
+              >
+                <svg
+                  class="t-icon t-icon-add"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 16 16"
+                  width="1em"
+                >
+                  <path
+                    d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                    fill="currentColor"
+                    fill-opacity="0.9"
+                  />
+                </svg>
+              </span>
+            </div>
+          </h3>
+          <ul
+            class="t-color-picker__swatches--items narrow-scrollbar"
+          />
+        </div>
+        <div
+          class="t-color-picker__swatches"
+        >
+          <h3
+            class="t-color-picker__swatches--title"
+          >
+            <span>
+              系统预设颜色
+            </span>
+          </h3>
+          <ul
+            class="t-color-picker__swatches--items narrow-scrollbar"
+          >
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(236, 242, 254);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(212, 227, 252);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(187, 211, 251);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(150, 187, 248);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(105, 158, 245);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(71, 135, 240);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(38, 111, 232);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 82, 217);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 52, 181);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 31, 151);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(253, 236, 238);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(249, 215, 217);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(248, 185, 190);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(247, 141, 148);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(243, 109, 120);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(227, 77, 89);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(201, 53, 63);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(177, 31, 38);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(149, 17, 20);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(104, 5, 6);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(254, 243, 230);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(249, 224, 199);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(247, 199, 151);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(242, 153, 95);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(237, 123, 47);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(211, 90, 33);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(186, 67, 27);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(158, 54, 16);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(132, 43, 11);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(90, 25, 7);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(232, 248, 242);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(188, 235, 220);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(133, 219, 190);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(72, 199, 156);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(0, 168, 112);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(7, 141, 92);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(6, 121, 69);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(5, 99, 52);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(4, 79, 42);"
+                />
+              </div>
+            </li>
+            <li
+              class="t-color-picker__swatches--item"
+            >
+              <div
+                class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+              >
+                <span
+                  class="t-color-picker__swatches--inner"
+                  style="background: rgb(3, 48, 23);"
+                />
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker ColorPicker swatchColorVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div>
+    <h6>
+      自定义系统色
+    </h6>
+     
+    <div
+      class="t-color-picker__panel t-is-inline"
+    >
+      <div
+        class="t-color-picker__head"
+      >
+        <div
+          class="t-color-picker__mode"
+        >
+          <div
+            class="t-radio-group t-size-s t-radio-group--filled"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="monochrome"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                单色
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="linear-gradient"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                渐变
+              </span>
+            </label>
+            <div
+              class="t-radio-group__bg-block"
+              style="width: 0px; left: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__body"
+      >
+        <div
+          class="t-color-picker__saturation"
+          style="background: rgb(0, 0, 0);"
+        >
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__slider t-color-picker__hue"
+        >
+          <div
+            class="t-color-picker__rail"
+          />
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="left: 150px; color: rgb(0, 82, 217);"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__format"
+        >
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="t-select__wrap"
+            >
+              <div
+                class="t-select t-select-polyfill t-size-m t-select__popup-reference"
+              >
+                <span
+                  class="t-tag t-tag--default t-size-m t-tag--dark"
+                  style="display: none;"
+                >
+                  +0
+                </span>
+                <span
+                  class="t-select__single"
+                >
+                  RGB
+                </span>
+                <svg
+                  class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="input-group"
+            >
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="0"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="82"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="217"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__swatches-wrap"
+        >
+          <div
+            class="t-color-picker__swatches"
+          >
+            <h3
+              class="t-color-picker__swatches--title"
+            >
+              <span>
+                最近使用颜色
+              </span>
+              <div
+                class="t-color-picker__swatches--actions"
+              >
+                <span
+                  class="t-color-picker__icon"
+                  role="button"
+                >
+                  <svg
+                    class="t-icon t-icon-add"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </h3>
+            <ul
+              class="t-color-picker__swatches--items narrow-scrollbar"
+            />
+          </div>
+          <div
+            class="t-color-picker__swatches"
+          >
+            <h3
+              class="t-color-picker__swatches--title"
+            >
+              <span>
+                系统预设颜色
+              </span>
+            </h3>
+            <ul
+              class="t-color-picker__swatches--items narrow-scrollbar"
+            >
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: red;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: green;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: yellow;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: blue;"
+                  />
+                </div>
+              </li>
+              <li
+                class="t-color-picker__swatches--item"
+              >
+                <div
+                  class="t-color-picker__swatches--color t-color-picker--bg-alpha"
+                >
+                  <span
+                    class="t-color-picker__swatches--inner"
+                    style="background: purple;"
+                  />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+   
+  <div>
+    <h6>
+      完全不显示系统色
+    </h6>
+     
+    <div
+      class="t-color-picker__panel t-is-inline"
+    >
+      <div
+        class="t-color-picker__head"
+      >
+        <div
+          class="t-color-picker__mode"
+        >
+          <div
+            class="t-radio-group t-size-s t-radio-group--filled"
+          >
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="monochrome"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                单色
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                name=""
+                type="radio"
+                value="linear-gradient"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                渐变
+              </span>
+            </label>
+            <div
+              class="t-radio-group__bg-block"
+              style="width: 0px; left: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-color-picker__body"
+      >
+        <div
+          class="t-color-picker__saturation"
+          style="background: rgb(0, 0, 0);"
+        >
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="color: rgb(0, 82, 217); left: 248px; top: 21px;"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__slider t-color-picker__hue"
+        >
+          <div
+            class="t-color-picker__rail"
+          />
+          <span
+            class="t-color-picker__thumb"
+            role="slider"
+            style="left: 150px; color: rgb(0, 82, 217);"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="t-color-picker__format"
+        >
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="t-select__wrap"
+            >
+              <div
+                class="t-select t-select-polyfill t-size-m t-select__popup-reference"
+              >
+                <span
+                  class="t-tag t-tag--default t-size-m t-tag--dark"
+                  style="display: none;"
+                >
+                  +0
+                </span>
+                <span
+                  class="t-select__single"
+                >
+                  RGB
+                </span>
+                <svg
+                  class="t-fake-arrow t-select__right-icon t-select__right-icon-polyfill"
+                  fill="none"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                    stroke="black"
+                    stroke-opacity="0.9"
+                    stroke-width="1.3"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-color-picker__format--item"
+          >
+            <div
+              class="input-group"
+            >
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="0"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="82"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="input-group__item"
+                style="flex: 1;"
+              >
+                <div
+                  class="t-input-number t-size-m t-input-number--normal"
+                  title="217"
+                >
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input t-size-m t-align-center"
+                      ref="refInputElem"
+                    >
+                      <input
+                        autocomplete="off"
+                        class="t-input__inner"
+                        placeholder="请输入"
+                        type="text"
+                        unselectable="off"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-color-picker__swatches-wrap"
+        >
+          <div
+            class="t-color-picker__swatches"
+          >
+            <h3
+              class="t-color-picker__swatches--title"
+            >
+              <span>
+                最近使用颜色
+              </span>
+              <div
+                class="t-color-picker__swatches--actions"
+              >
+                <span
+                  class="t-color-picker__icon"
+                  role="button"
+                >
+                  <svg
+                    class="t-icon t-icon-add"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+                      fill="currentColor"
+                      fill-opacity="0.9"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </h3>
+            <ul
+              class="t-color-picker__swatches--items narrow-scrollbar"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker ColorPicker triggerVue demo works fine 1`] = `
+<div
+  class="tdesign-demo-block-row"
+>
+  <div
+    classname="t-color-picker__trigger"
+  >
+    <div
+      class="t-color-picker__trigger--default"
+    >
+      <div
+        class="t-input__wrap"
+      >
+        <div
+          class="t-input t-size-m t-input--auto-width t-input--prefix"
+        >
+          <div
+            class="t-input__prefix"
+          >
+            <div
+              class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"
+            >
+              <span
+                class="color-inner"
+                style="background: rgb(0, 82, 217);"
+              />
+            </div>
+          </div>
+          <input
+            autocomplete=""
+            class="t-input__inner"
+            placeholder="请输入"
+            type="text"
+            unselectable="off"
+          />
+          <span
+            class="t-input__input-pre"
+          >
+            #0052d9
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/unit/color-picker/demo.test.js b/test/unit/color-picker/demo.test.js
new file mode 100644
index 000000000..aff655f9c
--- /dev/null
+++ b/test/unit/color-picker/demo.test.js
@@ -0,0 +1,33 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import { mount } from '@vue/test-utils';
+import colorModeVue from '@/examples/color-picker/demos/color-mode.vue';
+import enableAlphaVue from '@/examples/color-picker/demos/enable-alpha.vue';
+import panelVue from '@/examples/color-picker/demos/panel.vue';
+import recentColorVue from '@/examples/color-picker/demos/recent-color.vue';
+import statusDisabledVue from '@/examples/color-picker/demos/status-disabled.vue';
+import statusReadonlyVue from '@/examples/color-picker/demos/status-readonly.vue';
+import swatchColorVue from '@/examples/color-picker/demos/swatch-color.vue';
+import triggerVue from '@/examples/color-picker/demos/trigger.vue';
+
+const mapper = {
+  colorModeVue,
+  enableAlphaVue,
+  panelVue,
+  recentColorVue,
+  statusDisabledVue,
+  statusReadonlyVue,
+  swatchColorVue,
+  triggerVue,
+};
+
+describe('ColorPicker', () => {
+  Object.keys(mapper).forEach((demoName) => {
+    it(`ColorPicker ${demoName} demo works fine`, () => {
+      const wrapper = mount(mapper[demoName]);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});
diff --git a/test/unit/color-picker/index.test.js b/test/unit/color-picker/index.test.js
new file mode 100644
index 000000000..41c350e20
--- /dev/null
+++ b/test/unit/color-picker/index.test.js
@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils';
+import { ColorPickerPanel, ColorPicker } from '@/src/color-picker/index.ts';
+
+// every component needs four parts: props/events/slots/functions.
+describe('ColorPickerPanel', () => {
+  // test props api
+  describe(':props', () => {
+    it('', () => {
+      const wrapper = mount({
+        render() {
+          return <ColorPickerPanel></ColorPickerPanel>;
+        },
+      });
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+});
+
+describe('ColorPicker', () => {
+  // test props api
+  describe(':props', () => {
+    it('', () => {
+      const wrapper = mount({
+        render() {
+          return <ColorPicker></ColorPicker>;
+        },
+      });
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+});
diff --git a/test/unit/message/index.test.js b/test/unit/message/index.test.js
index b9f20e355..94f634cf0 100644
--- a/test/unit/message/index.test.js
+++ b/test/unit/message/index.test.js
@@ -63,7 +63,7 @@ describe('Message', () => {
     it(':closeBtn is a string, equal "关闭".', () => {
       const wrapper = mount({
         render() {
-          return <Message closeBtn='关闭'></Message>;
+          return <Message closeBtn="关闭"></Message>;
         },
       });
       const msg = wrapper.findComponent(Message);
@@ -76,11 +76,7 @@ describe('Message', () => {
     it(':closeBtn is a function, () => VNode.', () => {
       const wrapper = mount({
         render() {
-          return (
-            <Message
-              closeBtn={() => <b class='t-message-close-content'>x</b>}
-            ></Message>
-          );
+          return <Message closeBtn={() => <b class="t-message-close-content">x</b>}></Message>;
         },
       });
       const msg = wrapper.findComponent(Message);
@@ -93,7 +89,7 @@ describe('Message', () => {
     it(':icon is false', () => {
       const wrapper = mount({
         render() {
-          return <Message icon={false} ></Message>;
+          return <Message icon={false}></Message>;
         },
       });
       const msg = wrapper.findComponent(Message);
@@ -104,11 +100,7 @@ describe('Message', () => {
     it(':icon is a function, () => MoreIcon', () => {
       const wrapper = mount({
         render() {
-          return (
-            <Message
-              icon={() => <MoreIcon></MoreIcon>}
-            ></Message>
-          );
+          return <Message icon={() => <MoreIcon></MoreIcon>}></Message>;
         },
       });
       expect(wrapper.findComponent(MoreIcon).exists()).toBe(true);
@@ -118,11 +110,7 @@ describe('Message', () => {
     it(':default is a function, () => <b>这是重要信息</b>', () => {
       const wrapper = mount({
         render() {
-          return (
-            <Message
-              content={() => <b>这是重要信息</b>}
-            ></Message>
-          );
+          return <Message content={() => <b>这是重要信息</b>}></Message>;
         },
       });
       expect(wrapper).toMatchSnapshot();
@@ -131,9 +119,7 @@ describe('Message', () => {
     it(':default is a string, 这是普通信息', () => {
       const wrapper = mount({
         render() {
-          return (
-            <Message content='这是普通信息'></Message>
-          );
+          return <Message content="这是普通信息"></Message>;
         },
       });
       expect(wrapper).toMatchSnapshot();
@@ -179,7 +165,7 @@ describe('Message', () => {
             <Message
               {...{
                 scopedSlots: {
-                  default: () => <Button class='custom-message'>自定义细心内容</Button>,
+                  default: () => <Button class="custom-message">自定义细心内容</Button>,
                 },
               }}
             ></Message>
@@ -215,7 +201,7 @@ describe('Message', () => {
             <Message
               {...{
                 scopedSlots: {
-                  closeBtn: () => <div class='custom-close-btn'>x</div>,
+                  closeBtn: () => <div class="custom-close-btn">x</div>,
                 },
               }}
             ></Message>
diff --git a/test/unit/transfer/util.test.js b/test/unit/transfer/util.test.js
index a41cdce23..ffa3669ad 100644
--- a/test/unit/transfer/util.test.js
+++ b/test/unit/transfer/util.test.js
@@ -19,69 +19,96 @@ describe('Transfer', () => {
       });
 
       it('isTreeMode:true', async () => {
-        const list = [{
-          value: '1',
-          label: '1',
-          children: [{
-            value: '1.1',
-            label: '1.1',
-            children: [{
-              value: '1.1.1',
-              label: '1.1.1',
-              children: [{
-                value: '1.1.1.1',
-                label: '1.1.1.1',
-              }, {
-                value: '1.1.1.2',
-                label: '1.1.1.2',
-              }],
-            }, {
-              value: '1.1.2',
-              label: '1.1.2',
-              children: [{
-                value: '1.1.2.1',
-                label: '1.1.2.1',
-              }, {
-                value: '1.1.2.2',
-                label: '1.1.2.2',
-              }],
-            }],
-          }, {
-            value: '1.2',
-            label: '1.2',
-            children: [{
-              value: '1.2.1',
-              label: '1.2.1',
-              children: [{
-                value: '1.2.1.1',
-                label: '1.2.1.1',
-              }, {
-                value: '1.2.1.2',
-                label: '1.2.1.2',
-              }],
-            }, {
-              value: '1.2.2',
-              label: '1.2.2',
-              children: [{
-                value: '1.2.2.1',
-                label: '1.2.2.1',
-              }, {
-                value: '1.2.2.2',
-                label: '1.2.2.2',
-              }],
-            }],
-          }],
-        }, {
-          value: '2',
-          label: '2',
-          children: [{
-            value: '2.1',
-            label: '2.1',
-          }, {
-            value: '2.2',
-            label: '2.2',
-          }],
-        }];
+        const list = [
+          {
+            value: '1',
+            label: '1',
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: '2',
+            label: '2',
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ];
 
         const checked = ['1', '100', '200', '3', '5', '2.1', '1.2.2.2'];
         const result = getDataValues(list, checked, { isTreeMode: true });
@@ -89,69 +116,96 @@ describe('Transfer', () => {
       });
 
       it('isTreeMode:true keep:false', async () => {
-        const list = [{
-          value: '1',
-          label: '1',
-          children: [{
-            value: '1.1',
-            label: '1.1',
-            children: [{
-              value: '1.1.1',
-              label: '1.1.1',
-              children: [{
-                value: '1.1.1.1',
-                label: '1.1.1.1',
-              }, {
-                value: '1.1.1.2',
-                label: '1.1.1.2',
-              }],
-            }, {
-              value: '1.1.2',
-              label: '1.1.2',
-              children: [{
-                value: '1.1.2.1',
-                label: '1.1.2.1',
-              }, {
-                value: '1.1.2.2',
-                label: '1.1.2.2',
-              }],
-            }],
-          }, {
-            value: '1.2',
-            label: '1.2',
-            children: [{
-              value: '1.2.1',
-              label: '1.2.1',
-              children: [{
-                value: '1.2.1.1',
-                label: '1.2.1.1',
-              }, {
-                value: '1.2.1.2',
-                label: '1.2.1.2',
-              }],
-            }, {
-              value: '1.2.2',
-              label: '1.2.2',
-              children: [{
-                value: '1.2.2.1',
-                label: '1.2.2.1',
-              }, {
-                value: '1.2.2.2',
-                label: '1.2.2.2',
-              }],
-            }],
-          }],
-        }, {
-          value: '2',
-          label: '2',
-          children: [{
-            value: '2.1',
-            label: '2.1',
-          }, {
-            value: '2.2',
-            label: '2.2',
-          }],
-        }];
+        const list = [
+          {
+            value: '1',
+            label: '1',
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: '2',
+            label: '2',
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ];
 
         const checked = ['1.1', '1.1.2', '100', '200', '3', '5', '2.1', '1.2.2.2'];
         const result = getDataValues(list, checked, { isTreeMode: true, include: false });
@@ -162,473 +216,648 @@ describe('Transfer', () => {
     // cloneTreeWithFilter result test1
     describe('cloneTreeWithFilter', () => {
       it('needMatch:true result test1', () => {
-        const sourceTree = [{
-          value: '1',
-          label: '1',
-          children: [{
-            value: '1.1',
-            label: '1.1',
-            children: [{
-              value: '1.1.1',
-              label: '1.1.1',
-              children: [{
-                value: '1.1.1.1',
-                label: '1.1.1.1',
-              }, {
-                value: '1.1.1.2',
-                label: '1.1.1.2',
-              }],
-            }, {
-              value: '1.1.2',
-              label: '1.1.2',
-              children: [{
-                value: '1.1.2.1',
-                label: '1.1.2.1',
-              }, {
-                value: '1.1.2.2',
-                label: '1.1.2.2',
-              }],
-            }],
-          }, {
-            value: '1.2',
-            label: '1.2',
-            children: [{
-              value: '1.2.1',
-              label: '1.2.1',
-              children: [{
-                value: '1.2.1.1',
-                label: '1.2.1.1',
-              }, {
-                value: '1.2.1.2',
-                label: '1.2.1.2',
-              }],
-            }, {
-              value: '1.2.2',
-              label: '1.2.2',
-              children: [{
-                value: '1.2.2.1',
-                label: '1.2.2.1',
-              }, {
-                value: '1.2.2.2',
-                label: '1.2.2.2',
-              }],
-            }],
-          }],
-        }, {
-          value: '2',
-          label: '2',
-          children: [{
-            value: '2.1',
-            label: '2.1',
-          }, {
-            value: '2.2',
-            label: '2.2',
-          }],
-        }];
+        const sourceTree = [
+          {
+            value: '1',
+            label: '1',
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: '2',
+            label: '2',
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ];
 
         const filterValues = ['1.2.1.1', '1.2.2.1', '2.1'];
 
         const result = [];
         cloneTreeWithFilter(sourceTree, result, filterValues, true);
 
-        expect(result).toEqual(
-          [{
+        expect(result).toEqual([
+          {
             value: '1',
             label: '1',
-            children: [{
-              value: '1.2',
-              label: '1.2',
-              children: [{
-                value: '1.2.1',
-                label: '1.2.1',
-                children: [{
-                  value: '1.2.1.1',
-                  label: '1.2.1.1',
-                }],
-              }, {
-                value: '1.2.2',
-                label: '1.2.2',
-                children: [{
-                  value: '1.2.2.1',
-                  label: '1.2.2.1',
-                }],
-              }],
-            }],
-          }, {
+            children: [
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
             value: '2',
             label: '2',
-            children: [{
-              value: '2.1',
-              label: '2.1',
-            }],
-          }],
-        );
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+            ],
+          },
+        ]);
       });
 
       // result test 2
       it('needMatch:true result test2', () => {
-        const sourceTree = [{
-          value: '1',
-          label: '1',
-          children: [{
-            value: '1.1',
-            label: '1.1',
-            children: [{
-              value: '1.1.1',
-              label: '1.1.1',
-              children: [{
-                value: '1.1.1.1',
-                label: '1.1.1.1',
-              }, {
-                value: '1.1.1.2',
-                label: '1.1.1.2',
-              }],
-            }, {
-              value: '1.1.2',
-              label: '1.1.2',
-              children: [{
-                value: '1.1.2.1',
-                label: '1.1.2.1',
-              }, {
-                value: '1.1.2.2',
-                label: '1.1.2.2',
-              }],
-            }],
-          }, {
-            value: '1.2',
-            label: '1.2',
-            children: [{
-              value: '1.2.1',
-              label: '1.2.1',
-              children: [{
-                value: '1.2.1.1',
-                label: '1.2.1.1',
-              }, {
-                value: '1.2.1.2',
-                label: '1.2.1.2',
-              }],
-            }, {
-              value: '1.2.2',
-              label: '1.2.2',
-              children: [{
-                value: '1.2.2.1',
-                label: '1.2.2.1',
-              }, {
-                value: '1.2.2.2',
-                label: '1.2.2.2',
-              }],
-            }],
-          }],
-        }, {
-          value: '2',
-          label: '2',
-          children: [{
-            value: '2.1',
-            label: '2.1',
-          }, {
-            value: '2.2',
-            label: '2.2',
-          }],
-        }];
+        const sourceTree = [
+          {
+            value: '1',
+            label: '1',
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: '2',
+            label: '2',
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ];
 
         const filterValues = ['1.1', '1.2.2.1', '2.1'];
 
         const result = [];
         cloneTreeWithFilter(sourceTree, result, filterValues, true);
 
-        expect(result).toEqual(
-          [{
+        expect(result).toEqual([
+          {
             value: '1',
             label: '1',
             children: [
               {
                 value: '1.1',
                 label: '1.1',
-                children: [{
-                  value: '1.1.1',
-                  label: '1.1.1',
-                  children: [{
-                    value: '1.1.1.1',
-                    label: '1.1.1.1',
-                  }, {
-                    value: '1.1.1.2',
-                    label: '1.1.1.2',
-                  }],
-                }, {
-                  value: '1.1.2',
-                  label: '1.1.2',
-                  children: [{
-                    value: '1.1.2.1',
-                    label: '1.1.2.1',
-                  }, {
-                    value: '1.1.2.2',
-                    label: '1.1.2.2',
-                  }],
-                }],
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
               },
               {
                 value: '1.2',
                 label: '1.2',
-                children: [{
-                  value: '1.2.2',
-                  label: '1.2.2',
-                  children: [{
-                    value: '1.2.2.1',
-                    label: '1.2.2.1',
-                  }],
-                }],
-              }],
-          }, {
+                children: [
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
             value: '2',
             label: '2',
-            children: [{
-              value: '2.1',
-              label: '2.1',
-            }],
-          }],
-        );
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+            ],
+          },
+        ]);
       });
 
       it('needMatch:false result test1', () => {
-        const sourceTree = [{
-          value: '1',
-          label: '1',
-          children: [{
-            value: '1.1',
-            label: '1.1',
-            children: [{
-              value: '1.1.1',
-              label: '1.1.1',
-              children: [{
-                value: '1.1.1.1',
-                label: '1.1.1.1',
-              }, {
-                value: '1.1.1.2',
-                label: '1.1.1.2',
-              }],
-            }, {
-              value: '1.1.2',
-              label: '1.1.2',
-              children: [{
-                value: '1.1.2.1',
-                label: '1.1.2.1',
-              }, {
-                value: '1.1.2.2',
-                label: '1.1.2.2',
-              }],
-            }],
-          }, {
-            value: '1.2',
-            label: '1.2',
-            children: [{
-              value: '1.2.1',
-              label: '1.2.1',
-              children: [{
-                value: '1.2.1.1',
-                label: '1.2.1.1',
-              }, {
-                value: '1.2.1.2',
-                label: '1.2.1.2',
-              }],
-            }, {
-              value: '1.2.2',
-              label: '1.2.2',
-              children: [{
-                value: '1.2.2.1',
-                label: '1.2.2.1',
-              }, {
-                value: '1.2.2.2',
-                label: '1.2.2.2',
-              }],
-            }],
-          }],
-        }, {
-          value: '2',
-          label: '2',
-          children: [{
-            value: '2.1',
-            label: '2.1',
-          }, {
-            value: '2.2',
-            label: '2.2',
-          }],
-        }];
+        const sourceTree = [
+          {
+            value: '1',
+            label: '1',
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: '2',
+            label: '2',
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ];
 
         const filterValues = ['1.2.1.1', '1.2.2.1', '2.1'];
 
         const result = [];
         cloneTreeWithFilter(sourceTree, result, filterValues, false);
 
-        expect(result).toEqual(
-          [{
+        expect(result).toEqual([
+          {
             value: '1',
             label: '1',
-            children: [{
-              value: '1.1',
-              label: '1.1',
-              children: [{
-                value: '1.1.1',
-                label: '1.1.1',
-                children: [{
-                  value: '1.1.1.1',
-                  label: '1.1.1.1',
-                }, {
-                  value: '1.1.1.2',
-                  label: '1.1.1.2',
-                }],
-              }, {
-                value: '1.1.2',
-                label: '1.1.2',
-                children: [{
-                  value: '1.1.2.1',
-                  label: '1.1.2.1',
-                }, {
-                  value: '1.1.2.2',
-                  label: '1.1.2.2',
-                }],
-              }],
-            }, {
-              value: '1.2',
-              label: '1.2',
-              children: [{
-                value: '1.2.1',
-                label: '1.2.1',
-                children: [{
-                  value: '1.2.1.2',
-                  label: '1.2.1.2',
-                }],
-              }, {
-                value: '1.2.2',
-                label: '1.2.2',
-                children: [{
-                  value: '1.2.2.2',
-                  label: '1.2.2.2',
-                }],
-              }],
-            }],
-          }, {
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
             value: '2',
             label: '2',
-            children: [{
-              value: '2.2',
-              label: '2.2',
-            }],
-          }],
-        );
+            children: [
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ]);
       });
 
       it('needMatch:false result test2', () => {
-        const sourceTree = [{
-          value: '1',
-          label: '1',
-          children: [{
-            value: '1.1',
-            label: '1.1',
-            children: [{
-              value: '1.1.1',
-              label: '1.1.1',
-              children: [{
-                value: '1.1.1.1',
-                label: '1.1.1.1',
-              }, {
-                value: '1.1.1.2',
-                label: '1.1.1.2',
-              }],
-            }, {
-              value: '1.1.2',
-              label: '1.1.2',
-              children: [{
-                value: '1.1.2.1',
-                label: '1.1.2.1',
-              }, {
-                value: '1.1.2.2',
-                label: '1.1.2.2',
-              }],
-            }],
-          }, {
-            value: '1.2',
-            label: '1.2',
-            children: [{
-              value: '1.2.1',
-              label: '1.2.1',
-              children: [{
-                value: '1.2.1.1',
-                label: '1.2.1.1',
-              }, {
-                value: '1.2.1.2',
-                label: '1.2.1.2',
-              }],
-            }, {
-              value: '1.2.2',
-              label: '1.2.2',
-              children: [{
-                value: '1.2.2.1',
-                label: '1.2.2.1',
-              }, {
-                value: '1.2.2.2',
-                label: '1.2.2.2',
-              }],
-            }],
-          }],
-        }, {
-          value: '2',
-          label: '2',
-          children: [{
-            value: '2.1',
-            label: '2.1',
-          }, {
-            value: '2.2',
-            label: '2.2',
-          }],
-        }];
+        const sourceTree = [
+          {
+            value: '1',
+            label: '1',
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: '2',
+            label: '2',
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ];
 
         const filterValues = ['1.1.1.1', '1.2.2', '2'];
 
         const result = [];
         cloneTreeWithFilter(sourceTree, result, filterValues, false);
 
-        expect(result).toEqual(
-          [{
+        expect(result).toEqual([
+          {
             value: '1',
             label: '1',
-            children: [{
-              value: '1.1',
-              label: '1.1',
-              children: [{
-                value: '1.1.1',
-                label: '1.1.1',
-                children: [{
-                  value: '1.1.1.2',
-                  label: '1.1.1.2',
-                }],
-              }, {
-                value: '1.1.2',
-                label: '1.1.2',
-                children: [{
-                  value: '1.1.2.1',
-                  label: '1.1.2.1',
-                }, {
-                  value: '1.1.2.2',
-                  label: '1.1.2.2',
-                }],
-              }],
-            }, {
-              value: '1.2',
-              label: '1.2',
-              children: [{
-                value: '1.2.1',
-                label: '1.2.1',
-                children: [{
-                  value: '1.2.1.1',
-                  label: '1.2.1.1',
-                }, {
-                  value: '1.2.1.2',
-                  label: '1.2.1.2',
-                }],
-              }],
-            }],
-          }],
-        );
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
       });
     });
 
@@ -637,19 +866,18 @@ describe('Transfer', () => {
         const data = [
           {
             value: '1',
-            children: [
-              { value: '1.1' },
-              { value: '1.2' },
-              { value: '1.3' },
-            ],
-          }, {
+            children: [{ value: '1.1' }, { value: '1.2' }, { value: '1.3' }],
+          },
+          {
             value: '2',
             children: [
               {
                 value: '2.1',
-                children: [{
-                  value: '2.1.1',
-                }],
+                children: [
+                  {
+                    value: '2.1.1',
+                  },
+                ],
               },
             ],
           },
@@ -658,69 +886,96 @@ describe('Transfer', () => {
       });
 
       it('result test 2', () => {
-        const sourceTree = [{
-          value: '1',
-          label: '1',
-          children: [{
-            value: '1.1',
-            label: '1.1',
-            children: [{
-              value: '1.1.1',
-              label: '1.1.1',
-              children: [{
-                value: '1.1.1.1',
-                label: '1.1.1.1',
-              }, {
-                value: '1.1.1.2',
-                label: '1.1.1.2',
-              }],
-            }, {
-              value: '1.1.2',
-              label: '1.1.2',
-              children: [{
-                value: '1.1.2.1',
-                label: '1.1.2.1',
-              }, {
-                value: '1.1.2.2',
-                label: '1.1.2.2',
-              }],
-            }],
-          }, {
-            value: '1.2',
-            label: '1.2',
-            children: [{
-              value: '1.2.1',
-              label: '1.2.1',
-              children: [{
-                value: '1.2.1.1',
-                label: '1.2.1.1',
-              }, {
-                value: '1.2.1.2',
-                label: '1.2.1.2',
-              }],
-            }, {
-              value: '1.2.2',
-              label: '1.2.2',
-              children: [{
-                value: '1.2.2.1',
-                label: '1.2.2.1',
-              }, {
-                value: '1.2.2.2',
-                label: '1.2.2.2',
-              }],
-            }],
-          }],
-        }, {
-          value: '2',
-          label: '2',
-          children: [{
-            value: '2.1',
-            label: '2.1',
-          }, {
-            value: '2.2',
-            label: '2.2',
-          }],
-        }];
+        const sourceTree = [
+          {
+            value: '1',
+            label: '1',
+            children: [
+              {
+                value: '1.1',
+                label: '1.1',
+                children: [
+                  {
+                    value: '1.1.1',
+                    label: '1.1.1',
+                    children: [
+                      {
+                        value: '1.1.1.1',
+                        label: '1.1.1.1',
+                      },
+                      {
+                        value: '1.1.1.2',
+                        label: '1.1.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.1.2',
+                    label: '1.1.2',
+                    children: [
+                      {
+                        value: '1.1.2.1',
+                        label: '1.1.2.1',
+                      },
+                      {
+                        value: '1.1.2.2',
+                        label: '1.1.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                value: '1.2',
+                label: '1.2',
+                children: [
+                  {
+                    value: '1.2.1',
+                    label: '1.2.1',
+                    children: [
+                      {
+                        value: '1.2.1.1',
+                        label: '1.2.1.1',
+                      },
+                      {
+                        value: '1.2.1.2',
+                        label: '1.2.1.2',
+                      },
+                    ],
+                  },
+                  {
+                    value: '1.2.2',
+                    label: '1.2.2',
+                    children: [
+                      {
+                        value: '1.2.2.1',
+                        label: '1.2.2.1',
+                      },
+                      {
+                        value: '1.2.2.2',
+                        label: '1.2.2.2',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: '2',
+            label: '2',
+            children: [
+              {
+                value: '2.1',
+                label: '2.1',
+              },
+              {
+                value: '2.2',
+                label: '2.2',
+              },
+            ],
+          },
+        ];
 
         expect(getLeafCount(sourceTree)).toEqual(10);
       });
diff --git a/test/unit/tree/event.test.js b/test/unit/tree/event.test.js
index ae879c544..b13c7c691 100644
--- a/test/unit/tree/event.test.js
+++ b/test/unit/tree/event.test.js
@@ -6,187 +6,184 @@ describe('Tree:props:events', () => {
   jest.useRealTimers();
   describe('event:active', () => {
     it('onActive 回调可触发', (done) => {
-      const data = [
-        { value: 't1' },
-        { value: 't2' },
-      ];
-      mount(Vue.component('test', {
-        components: {
-          Tree,
-        },
-        template: [
-          '<Tree',
-          'ref="tree"',
-          ':data="items"',
-          'activable',
-          ':onActive="onActive"',
-          '></Tree>',
-        ].join(' '),
-        data() {
-          return {
-            items: data,
-          };
-        },
-        methods: {
-          onActive(actived, context) {
-            expect(actived.length).toBe(1);
-            expect(actived[0]).toBe('t2');
-            expect(context.node.value).toBe('t2');
-            done();
+      const data = [{ value: 't1' }, { value: 't2' }];
+      mount(
+        Vue.component('test', {
+          components: {
+            Tree,
           },
-        },
-        mounted() {
-          this.$refs.tree.setItem('t2', {
-            actived: true,
-          });
-        },
-      }));
+          template: ['<Tree', 'ref="tree"', ':data="items"', 'activable', ':onActive="onActive"', '></Tree>'].join(' '),
+          data() {
+            return {
+              items: data,
+            };
+          },
+          methods: {
+            onActive(actived, context) {
+              expect(actived.length).toBe(1);
+              expect(actived[0]).toBe('t2');
+              expect(context.node.value).toBe('t2');
+              done();
+            },
+          },
+          mounted() {
+            this.$refs.tree.setItem('t2', {
+              actived: true,
+            });
+          },
+        }),
+      );
     }, 10);
 
     it('active 事件可触发', (done) => {
-      const data = [
-        { value: 't1' },
-        { value: 't2' },
-      ];
-      mount(Vue.component('test', {
-        components: {
-          Tree,
-        },
-        template: [
-          '<Tree',
-          'ref="tree"',
-          ':data="items"',
-          'activable',
-          '@active="onActive"',
-          '></Tree>',
-        ].join(' '),
-        data() {
-          return {
-            items: data,
-          };
-        },
-        methods: {
-          onActive(actived, context) {
-            expect(actived.length).toBe(1);
-            expect(actived[0]).toBe('t2');
-            expect(context.node.value).toBe('t2');
-            done();
+      const data = [{ value: 't1' }, { value: 't2' }];
+      mount(
+        Vue.component('test', {
+          components: {
+            Tree,
           },
-        },
-        mounted() {
-          this.$refs.tree.setItem('t2', {
-            actived: true,
-          });
-        },
-      }));
+          template: ['<Tree', 'ref="tree"', ':data="items"', 'activable', '@active="onActive"', '></Tree>'].join(' '),
+          data() {
+            return {
+              items: data,
+            };
+          },
+          methods: {
+            onActive(actived, context) {
+              expect(actived.length).toBe(1);
+              expect(actived[0]).toBe('t2');
+              expect(context.node.value).toBe('t2');
+              done();
+            },
+          },
+          mounted() {
+            this.$refs.tree.setItem('t2', {
+              actived: true,
+            });
+          },
+        }),
+      );
     }, 10);
   });
 
   describe('event:expand', () => {
     it('onExpand 回调可触发', (done) => {
-      const data = [{
-        value: 't1',
-        children: [{
-          value: 't1.1',
-        }],
-      }, {
-        value: 't2',
-        children: [{
-          value: 't2.1',
-        }],
-      }];
-
-      mount(Vue.component('test', {
-        components: {
-          Tree,
-        },
-        template: [
-          '<Tree',
-          'ref="tree"',
-          ':data="items"',
-          ':onExpand="onExpand"',
-          '></Tree>',
-        ].join(' '),
-        data() {
-          return {
-            items: data,
-          };
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+          ],
+        },
+        {
+          value: 't2',
+          children: [
+            {
+              value: 't2.1',
+            },
+          ],
         },
-        methods: {
-          onExpand(expanded, context) {
-            expect(expanded.length).toBe(1);
-            expect(expanded[0]).toBe('t2');
-            expect(context.node.value).toBe('t2');
-            done();
+      ];
+
+      mount(
+        Vue.component('test', {
+          components: {
+            Tree,
           },
-        },
-        mounted() {
-          this.$refs.tree.setItem('t2', {
-            expanded: true,
-          });
-        },
-      }));
+          template: ['<Tree', 'ref="tree"', ':data="items"', ':onExpand="onExpand"', '></Tree>'].join(' '),
+          data() {
+            return {
+              items: data,
+            };
+          },
+          methods: {
+            onExpand(expanded, context) {
+              expect(expanded.length).toBe(1);
+              expect(expanded[0]).toBe('t2');
+              expect(context.node.value).toBe('t2');
+              done();
+            },
+          },
+          mounted() {
+            this.$refs.tree.setItem('t2', {
+              expanded: true,
+            });
+          },
+        }),
+      );
     }, 10);
 
     it('expand 事件可触发', (done) => {
-      const data = [{
-        value: 't1',
-        children: [{
-          value: 't1.1',
-        }],
-      }, {
-        value: 't2',
-        children: [{
-          value: 't2.1',
-        }],
-      }];
-
-      mount(Vue.component('test', {
-        components: {
-          Tree,
-        },
-        template: [
-          '<Tree',
-          'ref="tree"',
-          ':data="items"',
-          '@expand="onExpand"',
-          '></Tree>',
-        ].join(' '),
-        data() {
-          return {
-            items: data,
-          };
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+          ],
+        },
+        {
+          value: 't2',
+          children: [
+            {
+              value: 't2.1',
+            },
+          ],
         },
-        methods: {
-          onExpand(expanded, context) {
-            expect(expanded.length).toBe(1);
-            expect(expanded[0]).toBe('t2');
-            expect(context.node.value).toBe('t2');
-            done();
+      ];
+
+      mount(
+        Vue.component('test', {
+          components: {
+            Tree,
           },
-        },
-        mounted() {
-          this.$refs.tree.setItem('t2', {
-            expanded: true,
-          });
-        },
-      }));
+          template: ['<Tree', 'ref="tree"', ':data="items"', '@expand="onExpand"', '></Tree>'].join(' '),
+          data() {
+            return {
+              items: data,
+            };
+          },
+          methods: {
+            onExpand(expanded, context) {
+              expect(expanded.length).toBe(1);
+              expect(expanded[0]).toBe('t2');
+              expect(context.node.value).toBe('t2');
+              done();
+            },
+          },
+          mounted() {
+            this.$refs.tree.setItem('t2', {
+              expanded: true,
+            });
+          },
+        }),
+      );
     }, 10);
   });
 
   describe('event:change', () => {
     it('onChange 回调可触发', (done) => {
-      const data = [{
-        value: 't1',
-        children: [{
-          value: 't1.1',
-        }],
-      }, {
-        value: 't2',
-        children: [{
-          value: 't2.1',
-        }],
-      }];
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+          ],
+        },
+        {
+          value: 't2',
+          children: [
+            {
+              value: 't2.1',
+            },
+          ],
+        },
+      ];
       const onChange = (checked, context) => {
         expect(checked.length).toBe(1);
         expect(checked[0]).toBe('t2.1');
@@ -200,14 +197,7 @@ describe('Tree:props:events', () => {
           });
         },
         render() {
-          return (
-            <Tree
-              ref="tree"
-              data={data}
-              checkable
-              onChange={onChange}
-            ></Tree>
-          );
+          return <Tree ref="tree" data={data} checkable onChange={onChange}></Tree>;
         },
       });
     }, 10);
@@ -215,11 +205,13 @@ describe('Tree:props:events', () => {
 
   describe('event:load', () => {
     it('onLoad 回调可触发', (done) => {
-      const data = [{
-        label: '1',
-        value: 't1',
-        children: true,
-      }];
+      const data = [
+        {
+          label: '1',
+          value: 't1',
+          children: true,
+        },
+      ];
 
       const onLoad = (context) => {
         expect(context.node.value).toBe('t1');
@@ -230,11 +222,13 @@ describe('Tree:props:events', () => {
         setTimeout(() => {
           let nodes = [];
           if (node.level < 1) {
-            nodes = [{
-              value: `${node.value}.1`,
-              label: `${node.label}.1`,
-              children: true,
-            }];
+            nodes = [
+              {
+                value: `${node.value}.1`,
+                label: `${node.label}.1`,
+                children: true,
+              },
+            ];
           }
           resolve(nodes);
         }, 1);
@@ -242,16 +236,7 @@ describe('Tree:props:events', () => {
 
       mount({
         render() {
-          return (
-            <Tree
-              ref="tree"
-              data={data}
-              expand-all
-              lazy={false}
-              load={loadData}
-              onLoad={onLoad}
-            ></Tree>
-          );
+          return <Tree ref="tree" data={data} expand-all lazy={false} load={loadData} onLoad={onLoad}></Tree>;
         },
       });
     }, 10);