DTStack · liuxy0551 · Sep 4, 2024 · Mar 6, 2024 · Mar 11, 2024 · Mar 12, 2024
diff --git a/src/statusTag/__tests__/__snapshots__/index.test.tsx.snap b/src/statusTag/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,11 +6,15 @@ exports[`test StatusTag suite should support StatusTag success render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="dtc-statusTag dtc-statusTag__border"
+        class="dtc-statusTag"
       >
         <div
-          class="dtc-statusTag__default dtc-statusTag__success"
-        />
+          class="dtc-statusTag__icon"
+        >
+          <span
+            class="dtc-statusTag__icon--default dtc-statusTag__green--iconBg"
+          />
+        </div>
         <span
           class="dtc-statusTag__text"
         >
@@ -21,11 +25,15 @@ exports[`test StatusTag suite should support StatusTag success render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="dtc-statusTag dtc-statusTag__border"
+      class="dtc-statusTag"
     >
       <div
-        class="dtc-statusTag__default dtc-statusTag__success"
-      />
+        class="dtc-statusTag__icon"
+      >
+        <span
+          class="dtc-statusTag__icon--default dtc-statusTag__green--iconBg"
+        />
+      </div>
       <span
         class="dtc-statusTag__text"
       >

diff --git a/src/statusTag/__tests__/index.test.tsx b/src/statusTag/__tests__/index.test.tsx
@@ -10,27 +10,49 @@ describe('test StatusTag suite', () => {
         const wrapper = render(<StatusTag>完成</StatusTag>);
         expect(wrapper).toMatchSnapshot();
     });
-    test('should support StatusTag render the default className in StatusTag', () => {
-        const { container } = render(<StatusTag>完成</StatusTag>);
-        expect(container.firstChild).toHaveClass(...[`${prefixCls}`, `${prefixCls}__border`]);
+    test('should support StatusTag render correct', () => {
+        const { container, rerender } = render(<StatusTag>完成</StatusTag>);
+        expect(container.firstChild).toHaveClass(...[`${prefixCls}`]);
+        rerender(<StatusTag type="outline">完成</StatusTag>);
+        expect(container.firstChild).toHaveClass(...[`${prefixCls}`, `${prefixCls}--border`]);
+        rerender(<StatusTag type="fill">完成</StatusTag>);
+        expect(container.firstChild).toHaveClass(...[`${prefixCls}`, `${prefixCls}--fill`]);
     });
-    test('should render StatusTag render correct type', () => {
-        const { container } = render(<StatusTag type="run">完成</StatusTag>);
-        expect(container.querySelector(`.${prefixCls}__run`)).toBeInTheDocument();
+    test('should render StatusTag render correct inner color', () => {
+        const { container, rerender } = render(<StatusTag color="green">完成</StatusTag>);
+        expect(container.querySelector(`.${prefixCls}__green--iconBg`)).toBeInTheDocument();
+        rerender(
+            <StatusTag color="purple" type="fill">
+                完成
+            </StatusTag>
+        );
+        expect(container.querySelector(`.${prefixCls}__purple--fill`)).toBeInTheDocument();
     });
-    test('should render StatusTag render correct color', () => {
-        const { container } = render(<StatusTag color="#2177b8">完成</StatusTag>);
-        const textWapper = container.querySelector(`.${prefixCls}__default`);
-        expect(textWapper).toHaveStyle({ background: '#2177b8' });
+    test('should render StatusTag render correct custom color', () => {
+        const { container, rerender } = render(<StatusTag color="#2177b8">完成</StatusTag>);
+        let wrapper = container.querySelector(`.${prefixCls}__icon--default`);
+        expect(wrapper).toHaveStyle({
+            background: 'rgb(33, 119, 184)',
+        });
+        rerender(
+            <StatusTag color="#2177b8" type="fill">
+                完成
+            </StatusTag>
+        );
+        wrapper = container.querySelector(`.${prefixCls}--fill`);
+        expect(wrapper).toHaveStyle({
+            color: 'rgb(33, 119, 184)',
+            background: 'rgba(33, 119, 184, 0.15)',
+        });
     });
     test('should render StatusTag render correct text', () => {
         const { container } = render(<StatusTag>自定义文案</StatusTag>);
-        const textWapper = container.querySelector(`.${prefixCls}__text`)!;
-        expect(textWapper.innerHTML).toEqual('自定义文案');
+        const textWarper = container.querySelector(`.${prefixCls}__text`)!;
+        expect(textWarper.innerHTML).toEqual('自定义文案');
     });
     test('should render StatusTag loading', () => {
         const { container } = render(<StatusTag loading>自定义文案</StatusTag>);
-        const loadingWapper = container.querySelector(`.ant-spin-spinning`)!;
-        expect(loadingWapper).toBeInTheDocument();
+        const loadingWarper = container.querySelector(`.ant-spin-spinning`)!;
+        expect(loadingWarper).toBeInTheDocument();
     });
 });
diff --git a/src/statusTag/demos/basic.tsx b/src/statusTag/demos/basic.tsx
@@ -1,15 +1,46 @@
-import React from 'react';
-import { Space } from 'antd';
+import React, { useState } from 'react';
+import { Divider, Radio, Space } from 'antd';
 import { StatusTag } from 'dt-react-component';
+import { StatusTagType } from 'dt-react-component/statusTag';
 
 export default () => {
+    const presets = ['blue', 'yellow', 'green', 'gray', 'red', 'purple', 'cyan', 'pink'];
+
+    const [type, setType] = useState<StatusTagType>('default');
+
     return (
-        <Space direction="vertical">
-            <StatusTag type="run">运行中</StatusTag>
-            <StatusTag type="success">成功</StatusTag>
-            <StatusTag type="stopped">取消</StatusTag>
-            <StatusTag type="error">运行失败</StatusTag>
-            <StatusTag type="warning">提交中</StatusTag>
-        </Space>
+        <>
+            <Radio.Group value={type} onChange={(e) => setType(e.target.value)}>
+                <Radio.Button value="default">无外边框</Radio.Button>
+                <Radio.Button value="outline">有外边框</Radio.Button>
+                <Radio.Button value="fill">有背景色</Radio.Button>
+            </Radio.Group>
+            <Divider orientation="left">Presets</Divider>
+            <Space direction="vertical">
+                {presets.map((preset) => (
+                    <StatusTag key={preset} type={type} color={preset}>
+                        {preset}
+                    </StatusTag>
+                ))}
+            </Space>
+            <Divider orientation="left">Custom</Divider>
+            <Space direction="vertical">
+                <StatusTag type={type} color="#f50">
+                    #f50
+                </StatusTag>
+                <StatusTag type={type} color="rgb(45, 183, 245)">
+                    rgb(45, 183, 245)
+                </StatusTag>
+                <StatusTag type={type} color="#a31980">
+                    #a31980
+                </StatusTag>
+                <StatusTag type={type} color="#0fd5e8">
+                    #0fd5e8
+                </StatusTag>
+                <StatusTag type={type} color="#3D446E" background="#EBECF0">
+                    #3D446E
+                </StatusTag>
+            </Space>
+        </>
     );
 };
diff --git a/src/statusTag/demos/border.tsx b/src/statusTag/demos/border.tsx
diff --git a/src/statusTag/demos/colorful.tsx b/src/statusTag/demos/colorful.tsx
diff --git a/src/statusTag/demos/icon.tsx b/src/statusTag/demos/icon.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { SketchOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
+import { StatusTag } from 'dt-react-component';
+
+export default () => {
+    return (
+        <Space direction="vertical">
+            <StatusTag color="green" type="outline" icon={<SketchOutlined />}>
+                成功
+            </StatusTag>
+            <StatusTag color="blue" icon={<SketchOutlined />}>
+                运行中
+            </StatusTag>
+            <StatusTag color="yellow" type="fill" icon={<SketchOutlined />}>
+                运行中
+            </StatusTag>
+            <StatusTag color="#2f10fb" type="fill" icon={<SketchOutlined />}>
+                运行中
+            </StatusTag>
+        </Space>
+    );
+};
diff --git a/src/statusTag/demos/loading.tsx b/src/statusTag/demos/loading.tsx
@@ -5,10 +5,10 @@ import { StatusTag } from 'dt-react-component';
 export default () => {
     return (
         <Space direction="vertical">
-            <StatusTag type="success" showBorder={false} loading>
+            <StatusTag color="green" type="outline" loading>
                 成功
             </StatusTag>
-            <StatusTag type="run" loading>
+            <StatusTag color="blue" type="outline" loading>
                 运行中
             </StatusTag>
         </Space>

diff --git a/src/statusTag/demos/status.tsx b/src/statusTag/demos/status.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
+import { Space } from 'antd';
 import { StatusTag } from 'dt-react-component';
 
 export default () => {
     return (
-        <>
-            <StatusTag type="run" showBorder={false} />
-            <StatusTag type="success" showBorder={false} />
-            <StatusTag type="stopped" showBorder={false} />
-            <StatusTag type="warning" showBorder={false} />
-        </>
+        <Space direction="horizontal">
+            <StatusTag color="blue" />
+            <StatusTag color="green" />
+            <StatusTag color="purple" />
+            <StatusTag color="yellow" />
+        </Space>
     );
 };
diff --git a/src/statusTag/index.md b/src/statusTag/index.md
@@ -16,20 +16,19 @@ StatusTag 组件作用于任务运行状态效果展示
 
 ## 示例
 
-<code src="./demos/basic.tsx" description="内置五种不同的 `type` ">基础使用</code>
+<code src="./demos/basic.tsx" description="内置6种不同的`color`，三种类型`default | outline | fill`，同时我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">基础使用</code>
 <code src="./demos/status.tsx" description="用于表示状态的小圆点">状态点</code>
-<code src="./demos/border.tsx" description="通过设置 `showBorder={false}` 可以隐藏外边框，默认为存在外边框">外边框</code>
-<code src="./demos/colorful.tsx" description="我们添加了多种预设色彩的状态样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值">自定义状态</code>
 <code src="./demos/loading.tsx" description="通过设置 `loading` 可以设置加载中的状态标签">加载中</code>
+<code src="./demos/icon.tsx" description="可以通过`icon`自定义图标">加载中</code>
 
 ## API
 
 ### StatusTag
 
-| 参数       | 说明                                                     | 类型                                                      | 默认值      |
-| ---------- | -------------------------------------------------------- | --------------------------------------------------------- | ----------- |
-| type       | 设置状态类型                                             | `'warning' \| 'error' \| 'success' \| 'run' \| 'stopped'` | `'success'` |
-| showBorder | 是否展示外面的 border                                    | `boolean`                                                 | `true`      |
-| color      | 自定义颜色(当 type 所支持的颜色不满足时可用，优先级更高) | `string`                                                  | -           |
-| onClick    | 点击事件                                                 | `() => void`                                              | -           |
-| loading    | 设置状态标签载入状态                                     | `boolean`                                                 | `false`     |
+| 参数       | 说明                                                                | 类型                                                                           | 默认值    |
+| ---------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------- | --- |
+| color      | 状态色，内置了六种颜色，不满足时可自定义(仅支持 RGB 和十六进制颜色) | `blue \| yellow \| green \| gray \| red \| purple \| cyan \| pink` \| `string` | `success` | -   |
+| icon       | 自定义图标                                                          | `React.ReactNode`                                                              | -         |
+| loading    | 状态标签载入状态                                                    | `boolean`                                                                      | `false`   |
+| type       | 状态类型                                                            | `default \| outline \| fill`                                                   | `default` |
+| background | 背景颜色，仅在自定义颜色且为 fill 的情况下生效                      | `string`                                                                       | `--`      |