From 197fc1ba57e81b00f23c92be545279dafa613fa9 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Thu, 14 Mar 2024 14:29:37 +0800
Subject: [PATCH] feat(tag): add color api

---
 db/TDesign.db                                 | Bin 884736 -> 884736 bytes
 .../tdesign-react/src/tag/defaultProps.ts     |   4 +-
 .../tdesign-react/src/tag/tag.en-US.md        |  40 ++++++---
 .../products/tdesign-react/src/tag/tag.md     |  26 +++++-
 .../products/tdesign-react/src/tag/type.ts    |  73 ++++++++++++++++-
 .../src/tag/check-tag-group-props.ts          |  41 ++++++++++
 .../src/tag/check-tag-props.ts                |  12 +++
 .../tdesign-vue-next/src/tag/props.ts         |   5 ++
 .../tdesign-vue-next/src/tag/tag.en-US.md     |  38 +++++++--
 .../products/tdesign-vue-next/src/tag/tag.md  |  32 +++++++-
 .../products/tdesign-vue-next/src/tag/type.ts |  76 +++++++++++++++++-
 .../src/tag/check-tag-group-props.ts          |  37 +++++++++
 .../tdesign-vue/src/tag/check-tag-props.ts    |  12 +++
 .../products/tdesign-vue/src/tag/props.ts     |   5 ++
 .../products/tdesign-vue/src/tag/tag.en-US.md |  38 +++++++--
 packages/products/tdesign-vue/src/tag/tag.md  |  32 +++++++-
 packages/products/tdesign-vue/src/tag/type.ts |  71 +++++++++++++++-
 packages/scripts/api.json                     |  41 ++++++++++
 18 files changed, 543 insertions(+), 40 deletions(-)
 create mode 100644 packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts
 create mode 100644 packages/products/tdesign-vue/src/tag/check-tag-group-props.ts

diff --git a/db/TDesign.db b/db/TDesign.db
index 4ec289c2f8fb4f96efbc3d58ab536f2217e9baa6..955f057ab216ee2bdee216c2ba04506109fc3159 100644
GIT binary patch
delta 251
zcmZo@Fl%Tqn;^}oIZ?)$QL{0jHG#1;fvGitxix{MHG#D?fvq)xy)}WOHG#7=fvYuv
zyETDlYXa|*c;-!<a@*Mxc#|2KfDFY0Je%0LIGI_PQa{bO&cnN1Ba`<I8y7S0c?Q1M
zd|tfgK`O*Kwi^hruVSsQn87Q_!YIrs&dJMbZq31KY|OyGz{$bO!OOq_($5}}n4X-U
zlV9|rebv)-v!3kie72zd`PzLi7tMLmxv4lcCrvjcH7zqQHASH$F<k+yRKdu=$VAt`
dSl7@*!NAPQ$lS`<6pK)!><pgmes#Q?7y(1DPPza9

delta 107
zcmZo@Fl%Tqn;^}oF;T{uQKK=THG#1;fvGitxix{MHG#D?fvq)xy)}WOHG#7=fvYuv
zyETDlYXa|*c;=0q8r#_uc#|2oD<0t4$G%-7llKlA2NRzc1K(>tFOZ-($997a9O`V_
Kz3O<kF#-Sy(jfx?

diff --git a/packages/products/tdesign-react/src/tag/defaultProps.ts b/packages/products/tdesign-react/src/tag/defaultProps.ts
index 0ba55a0ee..8a9cebe30 100644
--- a/packages/products/tdesign-react/src/tag/defaultProps.ts
+++ b/packages/products/tdesign-react/src/tag/defaultProps.ts
@@ -2,7 +2,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdTagProps, TdCheckTagProps } from './type';
+import { TdTagProps, TdCheckTagProps, TdCheckTagGroupProps } from './type';
 
 export const tagDefaultProps: TdTagProps = {
   closable: false,
@@ -15,3 +15,5 @@ export const tagDefaultProps: TdTagProps = {
 };
 
 export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: 'medium' };
+
+export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] };
diff --git a/packages/products/tdesign-react/src/tag/tag.en-US.md b/packages/products/tdesign-react/src/tag/tag.en-US.md
index 9f860270b..9540a520b 100644
--- a/packages/products/tdesign-react/src/tag/tag.en-US.md
+++ b/packages/products/tdesign-react/src/tag/tag.en-US.md
@@ -6,32 +6,52 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closable | Boolean | false | \- | N
+color | String | - | self-defined tag color  | N
 content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
 icon | TElement | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 maxWidth | String / Number | - | \- | N
-shape | String | square | options：square/round/mark | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-theme | String | default | options：default/primary/warning/danger/success | N
-variant | String | dark | options：dark/light/outline/light-outline | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+theme | String | default | options: default/primary/warning/danger/success | N
+variant | String | dark | options: dark/light/outline/light-outline | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
+
 ### CheckTag Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 checked | Boolean | - | \- | N
 defaultChecked | Boolean | - | uncontrolled property | N
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onChange | Function |  | Typescript：`(checked: boolean) => void`<br/> | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | String / Number | - | tag unique key | N
+onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+
+
+### CheckTagGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
+multiple | Boolean | false | allow to select multiple tags | N
+options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | Array | [] | selected tag value list。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+onChange | Function |  | Typescript：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
diff --git a/packages/products/tdesign-react/src/tag/tag.md b/packages/products/tdesign-react/src/tag/tag.md
index a8aa27949..2c065b96d 100644
--- a/packages/products/tdesign-react/src/tag/tag.md
+++ b/packages/products/tdesign-react/src/tag/tag.md
@@ -4,12 +4,13 @@
 
 ### Tag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 children | TNode | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closable | Boolean | false | 标签是否可关闭 | N
+color | String | - | 自定义标签颜色 | N
 content | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -21,17 +22,36 @@ variant | String | dark | 标签风格变体。可选项：dark/light/outline/li
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
 onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
 
+
 ### CheckTag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态 | N
 defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
 children | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onChange | Function |  | TS 类型：`(checked: boolean) => void`<br/>状态切换时触发 | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N
+onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
+
+
+### CheckTagGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
+multiple | Boolean | false | 是否支持选中多个标签 | N
+options | Array | - | 标签选项列表。TS 类型：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | Array | [] | 选中标签值。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+onChange | Function |  | TS 类型：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
diff --git a/packages/products/tdesign-react/src/tag/type.ts b/packages/products/tdesign-react/src/tag/type.ts
index bb3438e74..db009a705 100644
--- a/packages/products/tdesign-react/src/tag/type.ts
+++ b/packages/products/tdesign-react/src/tag/type.ts
@@ -5,7 +5,7 @@
  * */
 
 import { TNode, TElement, SizeEnum } from '../common';
-import { MouseEvent } from 'react';
+import { MouseEvent, KeyboardEvent } from 'react';
 
 export interface TdTagProps {
   /**
@@ -17,6 +17,11 @@ export interface TdTagProps {
    * @default false
    */
   closable?: boolean;
+  /**
+   * 自定义标签颜色
+   * @default ''
+   */
+  color?: string;
   /**
    * 组件子元素
    */
@@ -73,6 +78,10 @@ export interface TdCheckTagProps {
    * 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性
    */
   defaultChecked?: boolean;
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
   /**
    * 组件子元素
    */
@@ -91,12 +100,72 @@ export interface TdCheckTagProps {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置
+   */
+  value?: string | number;
   /**
    * 状态切换时触发
    */
-  onChange?: (checked: boolean) => void;
+  onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
   /**
    * 点击标签时触发
    */
   onClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
 }
+
+export interface TdCheckTagGroupProps {
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
+  /**
+   * 是否支持选中多个标签
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 标签选项列表
+   */
+  options?: CheckTagGroupOption[];
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 选中标签值
+   * @default []
+   */
+  value?: CheckTagGroupValue;
+  /**
+   * 选中标签值，非受控属性
+   * @default []
+   */
+  defaultValue?: CheckTagGroupValue;
+  /**
+   * null
+   */
+  onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+  e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+  value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+  label: string | TNode;
+  value: string | number;
+}
+
+export type CheckTagGroupValue = Array<string | number>;
+
+export interface CheckTagGroupChangeContext {
+  type: 'check' | 'uncheck';
+  e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+  value: string | number;
+}
diff --git a/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts b/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts
new file mode 100644
index 000000000..f0d8dafac
--- /dev/null
+++ b/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCheckTagGroupProps } from '../tag/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 透传标签选中态属性 */
+  checkedProps: {
+    type: Object as PropType<TdCheckTagGroupProps['checkedProps']>,
+  },
+  /** 是否支持选中多个标签 */
+  multiple: Boolean,
+  /** 标签选项列表 */
+  options: {
+    type: Array as PropType<TdCheckTagGroupProps['options']>,
+  },
+  /** 透传标签未选态属性 */
+  uncheckedProps: {
+    type: Object as PropType<TdCheckTagGroupProps['uncheckedProps']>,
+  },
+  /** 选中标签值 */
+  value: {
+    type: Array as PropType<TdCheckTagGroupProps['value']>,
+    default: undefined as TdCheckTagGroupProps['value'],
+  },
+  modelValue: {
+    type: Array as PropType<TdCheckTagGroupProps['value']>,
+    default: undefined as TdCheckTagGroupProps['value'],
+  },
+  /** 选中标签值，非受控属性 */
+  defaultValue: {
+    type: Array as PropType<TdCheckTagGroupProps['defaultValue']>,
+    default: (): TdCheckTagGroupProps['defaultValue'] => [],
+  },
+  /** null */
+  onChange: Function as PropType<TdCheckTagGroupProps['onChange']>,
+};
diff --git a/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts b/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts
index a1e391c6f..c3e943dae 100644
--- a/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts
+++ b/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts
@@ -19,6 +19,10 @@ export default {
   },
   /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */
   defaultChecked: Boolean,
+  /** 透传标签选中态属性 */
+  checkedProps: {
+    type: Object as PropType<TdCheckTagProps['checkedProps']>,
+  },
   /** 组件子元素；传入数组时：[选中内容，非选中内容] */
   content: {
     type: [String, Number, Array, Function] as PropType<TdCheckTagProps['content']>,
@@ -38,6 +42,14 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 透传标签未选态属性 */
+  uncheckedProps: {
+    type: Object as PropType<TdCheckTagProps['uncheckedProps']>,
+  },
+  /** 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 */
+  value: {
+    type: [String, Number] as PropType<TdCheckTagProps['value']>,
+  },
   /** 状态切换时触发 */
   onChange: Function as PropType<TdCheckTagProps['onChange']>,
   /** 点击标签时触发 */
diff --git a/packages/products/tdesign-vue-next/src/tag/props.ts b/packages/products/tdesign-vue-next/src/tag/props.ts
index 501789dcb..02b65a9d6 100644
--- a/packages/products/tdesign-vue-next/src/tag/props.ts
+++ b/packages/products/tdesign-vue-next/src/tag/props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
 export default {
   /** 标签是否可关闭 */
   closable: Boolean,
+  /** 自定义标签颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
   /** 组件子元素 */
   content: {
     type: [String, Function] as PropType<TdTagProps['content']>,
diff --git a/packages/products/tdesign-vue-next/src/tag/tag.en-US.md b/packages/products/tdesign-vue-next/src/tag/tag.en-US.md
index 1503fe3b6..3a1a82322 100644
--- a/packages/products/tdesign-vue-next/src/tag/tag.en-US.md
+++ b/packages/products/tdesign-vue-next/src/tag/tag.en-US.md
@@ -7,15 +7,16 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 closable | Boolean | false | \- | N
+color | String | - | self-defined tag color  | N
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
 icon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 maxWidth | String / Number | - | \- | N
-shape | String | square | options：square/round/mark | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-theme | String | default | options：default/primary/warning/danger/success | N
-variant | String | dark | options：dark/light/outline/light-outline | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | default | options: default/primary/warning/danger/success | N
+variant | String | dark | options: dark/light/outline/light-outline | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
@@ -26,22 +27,45 @@ name | params | description
 click | `(context: { e: MouseEvent })` | \-
 close | `(context: { e: MouseEvent })` | \-
 
+
 ### CheckTag Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 checked | Boolean | - | `v-model` and `v-model:checked` is supported | N
 defaultChecked | Boolean | - | uncontrolled property | N
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
 content | String / Number / Array / Slot / Function | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-onChange | Function |  | Typescript：`(checked: boolean) => void`<br/> | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | String / Number | - | tag unique key | N
+onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 ### CheckTag Events
 
 name | params | description
 -- | -- | --
-change | `(checked: boolean)` | \-
+change | `(checked: boolean, context: CheckTagChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
 click | `(context: { e: MouseEvent })` | \-
+
+
+### CheckTagGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
+multiple | Boolean | false | allow to select multiple tags | N
+options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | Array | [] | selected tag value list。`v-model` and `v-model:value` is supported。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+onChange | Function |  | Typescript：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+
+### CheckTagGroup Events
+
+name | params | description
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
diff --git a/packages/products/tdesign-vue-next/src/tag/tag.md b/packages/products/tdesign-vue-next/src/tag/tag.md
index d4dbbd432..4cb888074 100644
--- a/packages/products/tdesign-vue-next/src/tag/tag.md
+++ b/packages/products/tdesign-vue-next/src/tag/tag.md
@@ -4,9 +4,10 @@
 
 ### Tag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 closable | Boolean | false | 标签是否可关闭 | N
+color | String | - | 自定义标签颜色 | N
 content | String / Slot / Function | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
@@ -26,22 +27,45 @@ onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 click | `(context: { e: MouseEvent })` | 点击时触发
 close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发
 
+
 ### CheckTag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` 或 `v-model:checked` | N
 defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
 content | String / Number / Array / Slot / Function | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 组件子元素，默认插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-onChange | Function |  | TS 类型：`(checked: boolean) => void`<br/>状态切换时触发 | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N
+onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
 
 ### CheckTag Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(checked: boolean)` | 状态切换时触发
+change | `(checked: boolean, context: CheckTagChangeContext)` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
 click | `(context: { e: MouseEvent })` | 点击标签时触发
+
+
+### CheckTagGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
+multiple | Boolean | false | 是否支持选中多个标签 | N
+options | Array | - | 标签选项列表。TS 类型：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | Array | [] | 选中标签值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts) | N
+onChange | Function |  | TS 类型：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+
+### CheckTagGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
diff --git a/packages/products/tdesign-vue-next/src/tag/type.ts b/packages/products/tdesign-vue-next/src/tag/type.ts
index c36ccf637..dde25102b 100644
--- a/packages/products/tdesign-vue-next/src/tag/type.ts
+++ b/packages/products/tdesign-vue-next/src/tag/type.ts
@@ -12,6 +12,11 @@ export interface TdTagProps {
    * @default false
    */
   closable?: boolean;
+  /**
+   * 自定义标签颜色
+   * @default ''
+   */
+  color?: string;
   /**
    * 组件子元素
    */
@@ -76,6 +81,10 @@ export interface TdCheckTagProps {
    * 标签选中的状态，默认风格（theme=default）才有选中态
    */
   modelValue?: boolean;
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
   /**
    * 组件子元素；传入数组时：[选中内容，非选中内容]
    */
@@ -94,12 +103,77 @@ export interface TdCheckTagProps {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置
+   */
+  value?: string | number;
   /**
    * 状态切换时触发
    */
-  onChange?: (checked: boolean) => void;
+  onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
   /**
    * 点击标签时触发
    */
   onClick?: (context: { e: MouseEvent }) => void;
 }
+
+export interface TdCheckTagGroupProps {
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
+  /**
+   * 是否支持选中多个标签
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 标签选项列表
+   */
+  options?: CheckTagGroupOption[];
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 选中标签值
+   * @default []
+   */
+  value?: CheckTagGroupValue;
+  /**
+   * 选中标签值，非受控属性
+   * @default []
+   */
+  defaultValue?: CheckTagGroupValue;
+  /**
+   * 选中标签值
+   * @default []
+   */
+  modelValue?: CheckTagGroupValue;
+  /**
+   * null
+   */
+  onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+  e: MouseEvent | KeyboardEvent;
+  value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+  label: string | TNode;
+  value: string | number;
+}
+
+export type CheckTagGroupValue = Array<string | number>;
+
+export interface CheckTagGroupChangeContext {
+  type: 'check' | 'uncheck';
+  e: MouseEvent | KeyboardEvent;
+  value: string | number;
+}
diff --git a/packages/products/tdesign-vue/src/tag/check-tag-group-props.ts b/packages/products/tdesign-vue/src/tag/check-tag-group-props.ts
new file mode 100644
index 000000000..f735d2599
--- /dev/null
+++ b/packages/products/tdesign-vue/src/tag/check-tag-group-props.ts
@@ -0,0 +1,37 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCheckTagGroupProps } from '../tag/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 透传标签选中态属性 */
+  checkedProps: {
+    type: Object as PropType<TdCheckTagGroupProps['checkedProps']>,
+  },
+  /** 是否支持选中多个标签 */
+  multiple: Boolean,
+  /** 标签选项列表 */
+  options: {
+    type: Array as PropType<TdCheckTagGroupProps['options']>,
+  },
+  /** 透传标签未选态属性 */
+  uncheckedProps: {
+    type: Object as PropType<TdCheckTagGroupProps['uncheckedProps']>,
+  },
+  /** 选中标签值 */
+  value: {
+    type: Array as PropType<TdCheckTagGroupProps['value']>,
+    default: (): TdCheckTagGroupProps['value'] => [],
+  },
+  /** 选中标签值，非受控属性 */
+  defaultValue: {
+    type: Array as PropType<TdCheckTagGroupProps['defaultValue']>,
+    default: (): TdCheckTagGroupProps['defaultValue'] => [],
+  },
+  /** null */
+  onChange: Function as PropType<TdCheckTagGroupProps['onChange']>,
+};
diff --git a/packages/products/tdesign-vue/src/tag/check-tag-props.ts b/packages/products/tdesign-vue/src/tag/check-tag-props.ts
index 47a187aa6..d08eb4455 100644
--- a/packages/products/tdesign-vue/src/tag/check-tag-props.ts
+++ b/packages/products/tdesign-vue/src/tag/check-tag-props.ts
@@ -12,6 +12,10 @@ export default {
   checked: Boolean,
   /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */
   defaultChecked: Boolean,
+  /** 透传标签选中态属性 */
+  checkedProps: {
+    type: Object as PropType<TdCheckTagProps['checkedProps']>,
+  },
   /** 组件子元素；传入数组时：[选中内容，非选中内容] */
   content: {
     type: [String, Number, Array, Function] as PropType<TdCheckTagProps['content']>,
@@ -31,6 +35,14 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 透传标签未选态属性 */
+  uncheckedProps: {
+    type: Object as PropType<TdCheckTagProps['uncheckedProps']>,
+  },
+  /** 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 */
+  value: {
+    type: [String, Number] as PropType<TdCheckTagProps['value']>,
+  },
   /** 状态切换时触发 */
   onChange: Function as PropType<TdCheckTagProps['onChange']>,
   /** 点击标签时触发 */
diff --git a/packages/products/tdesign-vue/src/tag/props.ts b/packages/products/tdesign-vue/src/tag/props.ts
index 501789dcb..02b65a9d6 100644
--- a/packages/products/tdesign-vue/src/tag/props.ts
+++ b/packages/products/tdesign-vue/src/tag/props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
 export default {
   /** 标签是否可关闭 */
   closable: Boolean,
+  /** 自定义标签颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
   /** 组件子元素 */
   content: {
     type: [String, Function] as PropType<TdTagProps['content']>,
diff --git a/packages/products/tdesign-vue/src/tag/tag.en-US.md b/packages/products/tdesign-vue/src/tag/tag.en-US.md
index a1962f60c..04a34b22b 100644
--- a/packages/products/tdesign-vue/src/tag/tag.en-US.md
+++ b/packages/products/tdesign-vue/src/tag/tag.en-US.md
@@ -7,15 +7,16 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 closable | Boolean | false | \- | N
+color | String | - | self-defined tag color  | N
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
 icon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 maxWidth | String / Number | - | \- | N
-shape | String | square | options：square/round/mark | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-theme | String | default | options：default/primary/warning/danger/success | N
-variant | String | dark | options：dark/light/outline/light-outline | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+theme | String | default | options: default/primary/warning/danger/success | N
+variant | String | dark | options: dark/light/outline/light-outline | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
@@ -26,22 +27,45 @@ name | params | description
 click | `(context: { e: MouseEvent })` | \-
 close | `(context: { e: MouseEvent })` | \-
 
+
 ### CheckTag Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 checked | Boolean | - | `v-model` is supported | N
 defaultChecked | Boolean | - | uncontrolled property | N
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
 content | String / Number / Array / Slot / Function | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-onChange | Function |  | Typescript：`(checked: boolean) => void`<br/> | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | String / Number | - | tag unique key | N
+onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 ### CheckTag Events
 
 name | params | description
 -- | -- | --
-change | `(checked: boolean)` | \-
+change | `(checked: boolean, context: CheckTagChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
 click | `(context: { e: MouseEvent })` | \-
+
+
+### CheckTagGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
+multiple | Boolean | false | allow to select multiple tags | N
+options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | Array | [] | selected tag value list。`v-model` is supported。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+onChange | Function |  | Typescript：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+
+### CheckTagGroup Events
+
+name | params | description
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
diff --git a/packages/products/tdesign-vue/src/tag/tag.md b/packages/products/tdesign-vue/src/tag/tag.md
index 264c2523c..20faa6ef4 100644
--- a/packages/products/tdesign-vue/src/tag/tag.md
+++ b/packages/products/tdesign-vue/src/tag/tag.md
@@ -4,9 +4,10 @@
 
 ### Tag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 closable | Boolean | false | 标签是否可关闭 | N
+color | String | - | 自定义标签颜色 | N
 content | String / Slot / Function | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
@@ -26,22 +27,45 @@ onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 click | `(context: { e: MouseEvent })` | 点击时触发
 close | `(context: { e: MouseEvent })` | 如果关闭按钮存在，点击关闭按钮时触发
 
+
 ### CheckTag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。支持语法糖 `v-model` | N
 defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
 content | String / Number / Array / Slot / Function | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 组件子元素，默认插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-onChange | Function |  | TS 类型：`(checked: boolean) => void`<br/>状态切换时触发 | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N
+onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
 
 ### CheckTag Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(checked: boolean)` | 状态切换时触发
+change | `(checked: boolean, context: CheckTagChangeContext)` | 状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
 click | `(context: { e: MouseEvent })` | 点击标签时触发
+
+
+### CheckTagGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
+multiple | Boolean | false | 是否支持选中多个标签 | N
+options | Array | - | 标签选项列表。TS 类型：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | Array | [] | 选中标签值。支持语法糖 `v-model`。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts) | N
+onChange | Function |  | TS 类型：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+
+### CheckTagGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: CheckTagGroupValue, context: CheckTagGroupChangeContext)` | [详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/>
diff --git a/packages/products/tdesign-vue/src/tag/type.ts b/packages/products/tdesign-vue/src/tag/type.ts
index 4f49d0b41..13655a6f2 100644
--- a/packages/products/tdesign-vue/src/tag/type.ts
+++ b/packages/products/tdesign-vue/src/tag/type.ts
@@ -12,6 +12,11 @@ export interface TdTagProps {
    * @default false
    */
   closable?: boolean;
+  /**
+   * 自定义标签颜色
+   * @default ''
+   */
+  color?: string;
   /**
    * 组件子元素
    */
@@ -72,6 +77,10 @@ export interface TdCheckTagProps {
    * 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性
    */
   defaultChecked?: boolean;
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
   /**
    * 组件子元素；传入数组时：[选中内容，非选中内容]
    */
@@ -90,12 +99,72 @@ export interface TdCheckTagProps {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置
+   */
+  value?: string | number;
   /**
    * 状态切换时触发
    */
-  onChange?: (checked: boolean) => void;
+  onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
   /**
    * 点击标签时触发
    */
   onClick?: (context: { e: MouseEvent }) => void;
 }
+
+export interface TdCheckTagGroupProps {
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
+  /**
+   * 是否支持选中多个标签
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 标签选项列表
+   */
+  options?: CheckTagGroupOption[];
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 选中标签值
+   * @default []
+   */
+  value?: CheckTagGroupValue;
+  /**
+   * 选中标签值，非受控属性
+   * @default []
+   */
+  defaultValue?: CheckTagGroupValue;
+  /**
+   * null
+   */
+  onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+  e: MouseEvent | KeyboardEvent;
+  value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+  label: string | TNode;
+  value: string | number;
+}
+
+export type CheckTagGroupValue = Array<string | number>;
+
+export interface CheckTagGroupChangeContext {
+  type: 'check' | 'uncheck';
+  e: MouseEvent | KeyboardEvent;
+  value: string | number;
+}
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
index 08168d328..854189219 100644
--- a/packages/scripts/api.json
+++ b/packages/scripts/api.json
@@ -102398,6 +102398,47 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1710397655,
+      "platform_framework": [
+        "1",
+        "2",
+        "4"
+      ],
+      "component": "Tag",
+      "field_category": 1,
+      "field_name": "color",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "自定义标签颜色",
+      "field_desc_en": "self-defined tag color ",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-03-14 06:27:35",
+      "update_time": "2024-03-14 06:27:35",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
     {
       "id": 733,
       "platform_framework": [