From 9be541b25a58b9799055c0bbe82ba73624bbb22e Mon Sep 17 00:00:00 2001
From: wdy01684395 <wdy01684395@alibaba-inc.com>
Date: Fri, 13 Oct 2023 16:15:33 +0800
Subject: [PATCH] fix cr and add borderless tag demo

---
 .dumirc.ts                                    |   3 +-
 .../src/select/demo/custom-tag-render.tsx     |  31 ++++
 packages/design/src/select/index.md           |  15 ++
 packages/design/src/select/index.tsx          |  26 ++--
 packages/design/src/select/style/index.ts     |  30 ++--
 packages/design/src/tag/demo/basic.tsx        |  45 +++---
 packages/design/src/tag/demo/borderless.tsx   |  69 +++++++++
 packages/design/src/tag/demo/checkable.tsx    |   2 +-
 packages/design/src/tag/demo/color.tsx        |  54 +++----
 packages/design/src/tag/demo/ellipsis.tsx     |  15 ++
 packages/design/src/tag/demo/icon.tsx         |  52 +++----
 packages/design/src/tag/demo/select.tsx       |  74 ++++-----
 packages/design/src/tag/demo/status.tsx       |  84 +++++-----
 packages/design/src/tag/index.md              |  16 +-
 packages/design/src/tag/index.tsx             |  70 +++++----
 packages/design/src/tag/style/index.ts        | 146 ++++++++----------
 16 files changed, 418 insertions(+), 314 deletions(-)
 create mode 100644 packages/design/src/select/demo/custom-tag-render.tsx
 create mode 100644 packages/design/src/select/index.md
 create mode 100644 packages/design/src/tag/demo/borderless.tsx
 create mode 100644 packages/design/src/tag/demo/ellipsis.tsx

diff --git a/.dumirc.ts b/.dumirc.ts
index ccf7f47df..0dd578982 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -111,6 +111,7 @@ export default defineConfig({
           children: [
             { title: 'Form 表单', link: '/components/form' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
+            { title: 'Select 选择器', link: '/components/select' },
           ],
         },
         {
@@ -120,7 +121,7 @@ export default defineConfig({
             { title: 'Descriptions 描述列表', link: '/components/descriptions' },
             { title: 'Table 表格', link: '/components/table' },
             { title: 'Tabs 标签页', link: '/components/tabs' },
-            {title: 'Tag 标签', link: '/components/tag'},
+            { title: 'Tag 标签', link: '/components/tag' },
             { title: 'Tooltip 文字提示', link: '/components/tooltip' },
           ],
         },
diff --git a/packages/design/src/select/demo/custom-tag-render.tsx b/packages/design/src/select/demo/custom-tag-render.tsx
new file mode 100644
index 000000000..694b04de0
--- /dev/null
+++ b/packages/design/src/select/demo/custom-tag-render.tsx
@@ -0,0 +1,31 @@
+import { Select, Tag } from '@oceanbase/design';
+import React from 'react';
+
+const options = ['gold', 'green', 'red', 'cyan'];
+
+const tagRender = props => {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag color={value} onMouseDown={onPreventMouseDown} closable={closable} onClose={onClose}>
+      {label}
+    </Tag>
+  );
+};
+
+const App: React.FC = () => (
+  <>
+    <Select
+      mode="multiple"
+      tagRender={tagRender}
+      defaultValue={['gold', 'cyan']}
+      style={{ width: '100%' }}
+      options={options.map(item => ({ label: item, value: item }))}
+    />
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/select/index.md b/packages/design/src/select/index.md
new file mode 100644
index 000000000..cd5ef6398
--- /dev/null
+++ b/packages/design/src/select/index.md
@@ -0,0 +1,15 @@
+---
+title: Select 选择器
+nav:
+  title: 基础组件
+  path: /components
+---
+
+- 🔥 完全兼容 antd [Select](https://ant.design/components/select-cn/) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<code src="./demo/custom-tag-render.tsx" title="自定义选择标签" description="允许自定义选择标签的样式"></code>
+
+- 详见 antd Select 文档: https://ant.design/components/select-cn/
diff --git a/packages/design/src/select/index.tsx b/packages/design/src/select/index.tsx
index ea59afa56..41ca06200 100644
--- a/packages/design/src/select/index.tsx
+++ b/packages/design/src/select/index.tsx
@@ -1,30 +1,30 @@
-import {Select as AntSelect} from 'antd';
-import type {SelectProps as AntSelectProps} from 'antd/es/select';
+import { Select as AntSelect } from 'antd';
+import type { SelectProps as AntSelectProps } from 'antd/es/select';
 import classNames from 'classnames';
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import ConfigProvider from '../config-provider';
 import useStyle from './style';
 
-const {Option, OptGroup} = AntSelect;
+const { Option, OptGroup } = AntSelect;
 
 export * from 'antd/es/select';
 
 export type SelectProps = AntSelectProps;
 
-const Select = ({prefixCls: customizePrefixCls, className, ...restProps}: SelectProps) => {
-    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-    const prefixCls = getPrefixCls('select', customizePrefixCls);
-    const {wrapSSR} = useStyle(prefixCls);
+const Select = ({ prefixCls: customizePrefixCls, className, ...restProps }: SelectProps) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  const { wrapSSR } = useStyle(prefixCls);
 
-    const selectCls = classNames(className);
-    return wrapSSR(<AntSelect prefixCls={customizePrefixCls} className={selectCls} {...restProps} />);
-}
+  const selectCls = classNames(className);
+  return wrapSSR(<AntSelect prefixCls={customizePrefixCls} className={selectCls} {...restProps} />);
+};
 
 Select.Option = Option;
 Select.OptGroup = OptGroup;
 
 if (process.env.NODE_ENV !== 'production') {
-    Select.displayName = AntSelect.displayName;
+  Select.displayName = AntSelect.displayName;
 }
 
-export default Select;
\ No newline at end of file
+export default Select;
diff --git a/packages/design/src/select/style/index.ts b/packages/design/src/select/style/index.ts
index 32e055429..0747a0d6f 100644
--- a/packages/design/src/select/style/index.ts
+++ b/packages/design/src/select/style/index.ts
@@ -1,24 +1,24 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
-import { genComponentStyleHook } from '../../_util/genComponentStyleHook';;
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 
 export type SelectToken = FullToken<'Select'>;
 
 export const genSelectStyle: GenerateStyle<SelectToken> = (token: SelectToken): CSSObject => {
-    const {componentCls} = token;
+  const { componentCls } = token;
 
-    return {
-        [`${componentCls}-multiple`]: {
-            [`${componentCls}-selection-item`]: {
-                border:  `1px solid ${token.colorBorder}66`,
-            }
-        }
-    };
-}
+  return {
+    [`${componentCls}-multiple`]: {
+      [`${componentCls}-selection-item`]: {
+        border: `1px solid ${token.colorBorder}66`,
+      },
+    },
+  };
+};
 
 export default (prefixCls: string) => {
-    const useStyle = genComponentStyleHook('Select', token => {
-        return [genSelectStyle(token)];
-    });
-    return useStyle(prefixCls);
-}
\ No newline at end of file
+  const useStyle = genComponentStyleHook('Select', token => {
+    return [genSelectStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
diff --git a/packages/design/src/tag/demo/basic.tsx b/packages/design/src/tag/demo/basic.tsx
index 3f35e8177..ff4cb23b9 100644
--- a/packages/design/src/tag/demo/basic.tsx
+++ b/packages/design/src/tag/demo/basic.tsx
@@ -1,31 +1,28 @@
-import {Tag, Tooltip, Typography} from '@oceanbase/design';
+import { Tag } from '@oceanbase/design';
 import React from 'react';
 
 const log = (e: React.MouseEvent<HTMLElement>) => {
-    console.log(e);
-  };
-  
-  const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    console.log('Clicked! But prevent default.');
-  };
+  console.log(e);
+};
 
+const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
+  e.preventDefault();
+  console.log('Clicked! But prevent default.');
+};
 
 const App: React.FC = () => (
-    <>
-      <Tag>Tag 1</Tag>
-      <Tag>
-        <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
-      </Tag>
-      <Tag closable onClose={log}>
-        Tag 2
-      </Tag>
-      <Tag closable onClose={preventDefault}>
-        Prevent Default
-      </Tag>
-      <Tag width='150px'>Show ellipsis for excess</Tag>
-    </>
-  );
-  
+  <>
+    <Tag>Tag 1</Tag>
+    <Tag>
+      <a href="https://github.com/oceanbase/oceanbase-design">Link</a>
+    </Tag>
+    <Tag closable onClose={log}>
+      Tag 2
+    </Tag>
+    <Tag closable onClose={preventDefault}>
+      Prevent Default
+    </Tag>
+  </>
+);
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/packages/design/src/tag/demo/borderless.tsx b/packages/design/src/tag/demo/borderless.tsx
new file mode 100644
index 000000000..be2ff5b48
--- /dev/null
+++ b/packages/design/src/tag/demo/borderless.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Divider, Space, Tag } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  return (
+    <>
+      <Space size={[0, 'small']} wrap>
+        <Tag bordered={false}>Tag 1</Tag>
+        <Tag bordered={false}>Tag 2</Tag>
+        <Tag bordered={false} closable>
+          Tag 3
+        </Tag>
+        <Tag bordered={false} closable>
+          Tag 4
+        </Tag>
+      </Space>
+      <Divider />
+      <Space size={[0, 'small']} wrap>
+        <Tag bordered={false} color="processing">
+          processing
+        </Tag>
+        <Tag bordered={false} color="success">
+          success
+        </Tag>
+        <Tag bordered={false} color="error">
+          error
+        </Tag>
+        <Tag bordered={false} color="warning">
+          warning
+        </Tag>
+        <Tag bordered={false} color="magenta">
+          magenta
+        </Tag>
+        <Tag bordered={false} color="red">
+          red
+        </Tag>
+        <Tag bordered={false} color="volcano">
+          volcano
+        </Tag>
+        <Tag bordered={false} color="orange">
+          orange
+        </Tag>
+        <Tag bordered={false} color="gold">
+          gold
+        </Tag>
+        <Tag bordered={false} color="lime">
+          lime
+        </Tag>
+        <Tag bordered={false} color="green">
+          green
+        </Tag>
+        <Tag bordered={false} color="cyan">
+          cyan
+        </Tag>
+        <Tag bordered={false} color="blue">
+          blue
+        </Tag>
+        <Tag bordered={false} color="geekblue">
+          geekblue
+        </Tag>
+        <Tag bordered={false} color="purple">
+          purple
+        </Tag>
+      </Space>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/tag/demo/checkable.tsx b/packages/design/src/tag/demo/checkable.tsx
index c2609075a..b13fd760f 100644
--- a/packages/design/src/tag/demo/checkable.tsx
+++ b/packages/design/src/tag/demo/checkable.tsx
@@ -30,4 +30,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/packages/design/src/tag/demo/color.tsx b/packages/design/src/tag/demo/color.tsx
index 7431c2957..f5f50f5d2 100644
--- a/packages/design/src/tag/demo/color.tsx
+++ b/packages/design/src/tag/demo/color.tsx
@@ -1,30 +1,30 @@
-import {Tag, Divider} from '@oceanbase/design';
+import { Tag, Divider } from '@oceanbase/design';
 import React from 'react';
 
 const App: React.FC = () => (
-    <>
-      <Divider orientation="left">Presets</Divider>
-      <div>
-        <Tag color="magenta">magenta</Tag>
-        <Tag color="red">red</Tag>
-        <Tag color="volcano">volcano</Tag>
-        <Tag color="orange">orange</Tag>
-        <Tag color="gold">gold</Tag>
-        <Tag color="lime">lime</Tag>
-        <Tag color="green">green</Tag>
-        <Tag color="cyan">cyan</Tag>
-        <Tag color="blue">blue</Tag>
-        <Tag color="geekblue">geekblue</Tag>
-        <Tag color="purple">purple</Tag>
-      </div>
-      <Divider orientation="left">Custom</Divider>
-      <div>
-        <Tag color="#f50">#f50</Tag>
-        <Tag color="#2db7f5">#2db7f5</Tag>
-        <Tag color="#87d068">#87d068</Tag>
-        <Tag color="#108ee9">#108ee9</Tag>
-      </div>
-    </>
-  );
-  
-  export default App;
\ No newline at end of file
+  <>
+    <Divider orientation="left">Presets</Divider>
+    <div>
+      <Tag color="magenta">magenta</Tag>
+      <Tag color="red">red</Tag>
+      <Tag color="volcano">volcano</Tag>
+      <Tag color="orange">orange</Tag>
+      <Tag color="gold">gold</Tag>
+      <Tag color="lime">lime</Tag>
+      <Tag color="green">green</Tag>
+      <Tag color="cyan">cyan</Tag>
+      <Tag color="blue">blue</Tag>
+      <Tag color="geekblue">geekblue</Tag>
+      <Tag color="purple">purple</Tag>
+    </div>
+    <Divider orientation="left">Custom</Divider>
+    <div>
+      <Tag color="#f50">#f50</Tag>
+      <Tag color="#2db7f5">#2db7f5</Tag>
+      <Tag color="#87d068">#87d068</Tag>
+      <Tag color="#108ee9">#108ee9</Tag>
+    </div>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/ellipsis.tsx b/packages/design/src/tag/demo/ellipsis.tsx
new file mode 100644
index 000000000..5497ea507
--- /dev/null
+++ b/packages/design/src/tag/demo/ellipsis.tsx
@@ -0,0 +1,15 @@
+import { Tag, Typography, Tooltip } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Tag>
+      Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
+      excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show
+      ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for
+      excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.
+    </Tag>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/icon.tsx b/packages/design/src/tag/demo/icon.tsx
index d70fd2e29..5f3ad3f96 100644
--- a/packages/design/src/tag/demo/icon.tsx
+++ b/packages/design/src/tag/demo/icon.tsx
@@ -1,27 +1,27 @@
 import {
-    FacebookOutlined,
-    LinkedinOutlined,
-    TwitterOutlined,
-    YoutubeOutlined,
-  } from '@oceanbase/icons';
-  import { Tag } from '@oceanbase/design';
-  import React from 'react';
-  
-  const App: React.FC = () => (
-    <>
-      <Tag icon={<TwitterOutlined />} color="#55acee">
-        Twitter
-      </Tag>
-      <Tag icon={<YoutubeOutlined />} color="#cd201f">
-        Youtube
-      </Tag>
-      <Tag icon={<FacebookOutlined />} color="#3b5999">
-        Facebook
-      </Tag>
-      <Tag icon={<LinkedinOutlined />} color="#55acee">
-        LinkedIn
-      </Tag>
-    </>
-  );
-  
-  export default App;
\ No newline at end of file
+  FacebookOutlined,
+  LinkedinOutlined,
+  TwitterOutlined,
+  YoutubeOutlined,
+} from '@oceanbase/icons';
+import { Tag } from '@oceanbase/design';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Tag icon={<TwitterOutlined />} color="#55acee">
+      Twitter
+    </Tag>
+    <Tag icon={<YoutubeOutlined />} color="#cd201f">
+      Youtube
+    </Tag>
+    <Tag icon={<FacebookOutlined />} color="#3b5999">
+      Facebook
+    </Tag>
+    <Tag icon={<LinkedinOutlined />} color="#55acee">
+      LinkedIn
+    </Tag>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/demo/select.tsx b/packages/design/src/tag/demo/select.tsx
index 53947c122..2ebae071e 100644
--- a/packages/design/src/tag/demo/select.tsx
+++ b/packages/design/src/tag/demo/select.tsx
@@ -1,48 +1,40 @@
-
-import { Select, Tag,  Divider} from "@oceanbase/design";
-import React from "react";
+import { Select, Tag, Divider } from '@oceanbase/design';
+import React from 'react';
 
 const options = ['gold', 'green', 'red', 'cyan'];
 
-const tagRender = (props) => {
-    const { label, value, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-        event.preventDefault();
-        event.stopPropagation();
-    };
-    return (
-        <Tag
-            color={value}
-            onMouseDown={onPreventMouseDown}
-            closable={closable}
-            onClose={onClose}
-            style={{ marginRight: 3 }}
-        >
-            {label}
-        </Tag>
-    );
-}
+const tagRender = props => {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag color={value} onMouseDown={onPreventMouseDown} closable={closable} onClose={onClose}>
+      {label}
+    </Tag>
+  );
+};
 
 const App: React.FC = () => (
-    <>
-        <Divider orientation="left">Custom Select</Divider>
-        <Select
-            mode="multiple"
-            tagRender={tagRender}
-            defaultValue={['gold', 'cyan']}
-            style={{width: '100%'}}
-            options={options.map(item => ({label: item, value: item}))}
-        />
-        <Divider orientation="left">Input</Divider>
-        <Select
-            mode="tags"
-            showArrow={false}
-            open={false}
-            style={{width: '100%'}}
-            defaultValue={['input']}
-        />
-    </>
-  );
-  
+  <>
+    <Divider orientation="left">Custom Select</Divider>
+    <Select
+      mode="multiple"
+      tagRender={tagRender}
+      defaultValue={['gold', 'cyan']}
+      style={{ width: '100%' }}
+      options={options.map(item => ({ label: item, value: item }))}
+    />
+    <Divider orientation="left">Input</Divider>
+    <Select
+      mode="tags"
+      showArrow={false}
+      open={false}
+      style={{ width: '100%' }}
+      defaultValue={['input']}
+    />
+  </>
+);
 
 export default App;
diff --git a/packages/design/src/tag/demo/status.tsx b/packages/design/src/tag/demo/status.tsx
index f9ab04746..486584dd3 100644
--- a/packages/design/src/tag/demo/status.tsx
+++ b/packages/design/src/tag/demo/status.tsx
@@ -1,48 +1,46 @@
-
 import {
-    CheckCircleOutlined,
-    ClockCircleOutlined,
-    CloseCircleOutlined,
-    ExclamationCircleOutlined,
-    MinusCircleOutlined,
-    SyncOutlined,
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  MinusCircleOutlined,
+  SyncOutlined,
 } from '@oceanbase/icons';
-import {Tag, Divider} from '@oceanbase/design';
+import { Tag, Divider } from '@oceanbase/design';
 import React from 'react';
 
-
 const App: React.FC = () => (
-    <>
-      <Divider orientation="left">Without icon</Divider>
-      <div>
-        <Tag color="success">success</Tag>
-        <Tag color="processing">processing</Tag>
-        <Tag color="error">error</Tag>
-        <Tag color="warning">warning</Tag>
-        <Tag color="default">default</Tag>
-      </div>
-      <Divider orientation="left">With icon</Divider>
-      <div>
-        <Tag icon={<CheckCircleOutlined />} color="success">
-          success
-        </Tag>
-        <Tag icon={<SyncOutlined spin />} color="processing">
-          processing
-        </Tag>
-        <Tag icon={<CloseCircleOutlined />} color="error">
-          error
-        </Tag>
-        <Tag icon={<ExclamationCircleOutlined />} color="warning">
-          warning
-        </Tag>
-        <Tag icon={<ClockCircleOutlined />} color="default">
-          waiting
-        </Tag>
-        <Tag icon={<MinusCircleOutlined />} color="default">
-          stop
-        </Tag>
-      </div>
-    </>
-  );
-  
-  export default App;
+  <>
+    <Divider orientation="left">Without icon</Divider>
+    <div>
+      <Tag color="success">success</Tag>
+      <Tag color="processing">processing</Tag>
+      <Tag color="error">error</Tag>
+      <Tag color="warning">warning</Tag>
+      <Tag color="default">default</Tag>
+    </div>
+    <Divider orientation="left">With icon</Divider>
+    <div>
+      <Tag icon={<CheckCircleOutlined />} color="success">
+        success
+      </Tag>
+      <Tag icon={<SyncOutlined spin />} color="processing">
+        processing
+      </Tag>
+      <Tag icon={<CloseCircleOutlined />} color="error">
+        error
+      </Tag>
+      <Tag icon={<ExclamationCircleOutlined />} color="warning">
+        warning
+      </Tag>
+      <Tag icon={<ClockCircleOutlined />} color="default">
+        waiting
+      </Tag>
+      <Tag icon={<MinusCircleOutlined />} color="default">
+        stop
+      </Tag>
+    </div>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/tag/index.md b/packages/design/src/tag/index.md
index 68c4526a7..5ca14f9a4 100644
--- a/packages/design/src/tag/index.md
+++ b/packages/design/src/tag/index.md
@@ -9,17 +9,13 @@ nav:
 - 💄 定制主题和样式，符合 OceanBase Design 设计规范。
 
 ## 代码演示
-<code src="./demo/basic.tsx" title="基本"></code>
-<code src="./demo/color.tsx" title="彩色标签" description="我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体色值"></code>
-<code src="./demo/status.tsx" title="预设状态的标签" description="预设五种状态颜色"></code>
-<code src="./demo/select.tsx" title="配合 Select 选择器使用"></code>
-<code src="./demo/checkable.tsx" title="可选择标签"></code>
-<code src="./demo/icon.tsx" title="图标按钮"></code>
+
+<code src="./demo/basic.tsx" title="基本"></code> <code src="./demo/ellipsis.tsx" title="内容超长自动省略"></code> <code src="./demo/color.tsx" title="彩色标签" description="我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体色值"></code> <code src="./demo/status.tsx" title="预设状态的标签" description="预设五种状态颜色"></code> <code src="./demo/checkable.tsx" title="可选择标签"></code> <code src="./demo/icon.tsx" title="图标按钮"></code> <code src="./demo/borderless.tsx" title="无边框模式"></code>
 
 ## API
-| 参数     | 说明                          | 类型         | 默认值       |
-| :-------| :-----------------------------| :-----------| :-----------|
-| width   | 设置标签最大宽度，超出该宽度时显示省略号 | string  | -           |
 
+| 参数     | 说明                   | 类型    | 默认值 |
+| :------- | :--------------------- | :------ | :----- |
+| ellipsis | 内容超长时是否自动省略 | boolean | true   |
 
-- 详见 antd Tag 文档: https://ant.design/components/tag-cn/
\ No newline at end of file
+- 详见 antd Tag 文档: https://ant.design/components/tag-cn/
diff --git a/packages/design/src/tag/index.tsx b/packages/design/src/tag/index.tsx
index dc92132ba..a91d98ed0 100644
--- a/packages/design/src/tag/index.tsx
+++ b/packages/design/src/tag/index.tsx
@@ -1,48 +1,60 @@
-import {Tag as AntTag} from 'antd';
+import { Tag as AntTag } from 'antd';
 import type { TagProps as AntTagProps } from 'antd/es/tag';
-import {Tooltip} from '@oceanbase/design';
+import { Tooltip, Typography } from '@oceanbase/design';
 import classNames from 'classnames';
-import React, {useContext} from 'react';
+import React, { ReactElement, useContext } from 'react';
 import ConfigProvider from '../config-provider';
 import useStyle from './style';
 
 export * from 'antd/es/tag';
 
 export interface TagProps extends AntTagProps {
-    width?: string
-};
-
-const {CheckableTag} = AntTag;
+  ellipsis?: boolean;
+}
 
+const { CheckableTag } = AntTag;
 
 const Tag = ({
-    prefixCls: customizePrefixCls,
-    className,
-    width,
-    ...restProps
+  prefixCls: customizePrefixCls,
+  className,
+  ellipsis = true,
+  ...restProps
 }: TagProps) => {
-    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-    const prefixCls = getPrefixCls('tag', customizePrefixCls);
-    const {wrapSSR} = useStyle(prefixCls);
-
-    const tagCls = classNames(
-        {
-            [`${prefixCls}-ellipsis`]: !!width
-        },
-        className
-    );
-
-    const tagRender = width ? <Tooltip title={restProps.children}>
-        <AntTag prefixCls={customizePrefixCls} className={tagCls} style={{maxWidth: width}} {...restProps} />
-    </Tooltip> : <AntTag prefixCls={customizePrefixCls} className={tagCls} {...restProps} />;
-
-    return wrapSSR(tagRender);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('tag', customizePrefixCls);
+  const { wrapSSR } = useStyle(prefixCls);
+
+  const tagCls = classNames(
+    {
+      [`${prefixCls}-ellipsis`]: ellipsis,
+    },
+    className
+  );
+  const childrenType = (restProps.children as ReactElement)?.type as any;
+  const { ellipsis: defalutEllipsis } = (restProps.children as ReactElement)?.props || {};
+
+  const ellipsisConfig =
+    typeof defalutEllipsis === 'object'
+      ? defalutEllipsis
+      : {
+          tooltip: childrenType?.__ANT_TOOLTIP ? false : restProps.children,
+        };
+
+  return ellipsis ? (
+    wrapSSR(
+      <Typography.Text ellipsis={{ ...ellipsisConfig }}>
+        <AntTag prefixCls={customizePrefixCls} className={tagCls} {...restProps} />
+      </Typography.Text>
+    )
+  ) : (
+    <AntTag prefixCls={customizePrefixCls} className={tagCls} {...restProps} />
+  );
 };
 
 if (process.env.NODE_ENV !== 'production') {
-    Tag.displayName = AntTag.displayName;
+  Tag.displayName = AntTag.displayName;
 }
 
 Tag.CheckableTag = CheckableTag;
 
-export default Tag;
\ No newline at end of file
+export default Tag;
diff --git a/packages/design/src/tag/style/index.ts b/packages/design/src/tag/style/index.ts
index d32d18161..a033169f1 100644
--- a/packages/design/src/tag/style/index.ts
+++ b/packages/design/src/tag/style/index.ts
@@ -1,98 +1,76 @@
-import { mergeToken, type FullToken, type GenerateStyle} from 'antd/es/theme/internal';
+import { type FullToken, type GenerateStyle } from 'antd/es/theme/internal';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 import { genPresetColor } from 'antd/lib/theme/internal';
-import capitalize from 'antd/lib/_util/capitalize';
+import { TinyColor } from '@ctrl/tinycolor';
+import type { CSSObject } from '@ant-design/cssinjs';
 
 export type TagToken = FullToken<'Tag'>;
 
-type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning';
-
+const getTagBorderColor = (color: string) => {
+  return new TinyColor(color).setAlpha(0.4).toHex8String();
+};
 
 const genTagPresetStatusStyle = (
-    token: TagToken,
-    status: 'success' | 'processing' | 'error' | 'warning',
-    cssVariableType: CssVariableType
+  token: TagToken,
+  status: 'success' | 'processing' | 'error' | 'warning'
 ) => {
-    const capitalizedCssVariableType = capitalize<CssVariableType>(cssVariableType);
-    return {
-        [`${token.componentCls}-${status}`]: {
-            color: token[`color${cssVariableType}`],
-            borderColor: token[`color${capitalizedCssVariableType}Border`] + 66
-        }
-    }
-}
-
-const genPresetStyle = (token: TagToken) => genPresetColor(token, (colorKey, {textColor, lightBorderColor}) => {
-    return {
-        [`${token.componentCls}-${colorKey}`]: {
-            color: textColor,
-            borderColor: `${lightBorderColor}66`
-        }
-    }
-});
+  const borderColorMap = {
+    success: token.colorSuccessBorder,
+    processing: token.colorInfoBorder,
+    error: token.colorErrorBorder,
+    warning: token.colorWarningBorder,
+  };
+  return {
+    [`${token.componentCls}${token.componentCls}-${status}`]: {
+      borderColor: getTagBorderColor(borderColorMap[status]),
+    },
+  };
+};
 
-export const genTagStyle: GenerateStyle<TagToken> = (token: TagToken) => {
-    const {
-        componentCls,
-        colorTextLabel,
-    } = token;
+const genPresetStyle = (token: TagToken) =>
+  genPresetColor(token, (colorKey, { textColor, lightBorderColor }) => {
     return {
-        [`${componentCls}`]: {
-            color: colorTextLabel,
-            borderColor: `${token.colorBorder}66`,
-            [`&-ellipsis`]: {
-                display: 'inline-block',
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-                verticalAlign: 'bottom',
-                whiteSpace: 'noWrap',
-            },
-            [`&-checkable`]: {
-                backgroundColor: 'transparent',
-                borderColor: 'transparent',
-                [`&:not(${componentCls}-checkable-checked):hover`]: {
-                    color: token.colorPrimary,
-                },
-                '&:active, &-checked': {
-                    color: token.colorTextLightSolid,
-                },
-                '&-checked': {
-                    backgroundColor: token.colorPrimary,
-                    '&:hover': {
-                      backgroundColor: token.colorPrimaryHover,
-                    },
-                },
-                  '&:active': {
-                    backgroundColor: token.colorPrimaryActive,
-                },
-            },
-            [`&-hidden`]: {
-                display: 'none'
-            }
-        },
+      [`${token.componentCls}${token.componentCls}-${colorKey}`]: {
+        color: textColor,
+        borderColor: getTagBorderColor(lightBorderColor),
+      },
     };
+  });
+
+export const genTagStyle: GenerateStyle<TagToken> = (token: TagToken): CSSObject => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      borderColor: getTagBorderColor(token.colorBorder),
+      [`&-ellipsis`]: {
+        maxWidth: '100%',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        verticalAlign: 'bottom',
+      },
+      [`&-checkable`]: {
+        borderColor: 'transparent',
+      },
+      [`&-hidden`]: {
+        display: 'none',
+      },
+      [`&-borderless`]: {
+        border: 'transparent',
+      },
+    },
+  };
 };
 
 export default (prefixCls: string) => {
-    const useStyle = genComponentStyleHook('Tag', token => {
-        const {lineWidth, fontSizeIcon} = token;
-        const tagFontSize = token.fontSizeSM;
-        const tagLineHeight = `${token.lineHeightSM * tagFontSize}px`;
-        const TagToken = mergeToken<TagToken>(token, {
-            tagFontSize,
-            tagLineHeight,
-            tagIconSize: fontSizeIcon - 2 * lineWidth,
-            tagPaddingHorizontal: 8,
-            tagBorderlessBg: token.colorFillTertiary,
-        });
-        return [
-            genTagStyle(TagToken),
-            genPresetStyle(TagToken),
-            genTagPresetStatusStyle(TagToken, 'success', 'Success'),
-            genTagPresetStatusStyle(TagToken, 'error', 'Error'),
-            genTagPresetStatusStyle(TagToken, 'processing', 'Info'),
-            genTagPresetStatusStyle(TagToken, 'warning', 'Warning')
-        ];
-    });
-    return useStyle(prefixCls);
-}
\ No newline at end of file
+  const useStyle = genComponentStyleHook('Tag', (token: TagToken) => {
+    return [
+      genTagStyle(token),
+      genPresetStyle(token),
+      genTagPresetStatusStyle(token, 'success'),
+      genTagPresetStatusStyle(token, 'error'),
+      genTagPresetStatusStyle(token, 'processing'),
+      genTagPresetStatusStyle(token, 'warning'),
+    ];
+  });
+  return useStyle(prefixCls);
+};