feat: rate组件测试用例+文档多语言+props补齐 + switch&tag 组件文档多语言 (#155)

* add:tag 组件测试用例

* add:tag 组件测试用例

* add:switch 组件测试用例

* add:Rate组件测试用例

* Rate+Tag+Switch 文档多语言

* rate组件props补齐
Co-authored-by: Nlibin107 <libin107@jd.com>

src/packages/rate/__test__/rate.spec.tsx

+import * as React from 'react'
+import { useState } from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Rate } from '../rate'
+const publicCls = 'nut-rate-item__icon nut-rate-item__icon--disabled nut-icon nutui-iconfont'
+test('spacing & count & modelValue & checkedIcon & uncheckedIcon & readonly & iconSize & activeColor & voidColor & change test', () => {
+  const state = {
+    voidColor: 'rgb(250, 104, 93)',
+    activeColor: 'red',
+    spacing: '12',
+    count: 5,
+    modelValue: 1,
+    iconSize: 18,
+    checkedIcon: 'star-fill-n',
+    uncheckedIcon: 'star-n',
+  }
+
+  const RateParent: React.FunctionComponent<any> = () => {
+    const [curModelValue, setCurModelValue] = useState(state.modelValue)
+
+    const handleChange: (num: number) => void = (num: number) => {
+      setCurModelValue(num)
+    }
+    return (
+      <>
+        <div className="curModelValue">{curModelValue}</div>
+        <Rate
+          voidColor={state.voidColor}
+          activeColor={state.activeColor}
+          spacing={state.spacing}
+          count={state.count}
+          modelValue={state.modelValue}
+          iconSize={state.iconSize}
+          checkedIcon={state.checkedIcon}
+          uncheckedIcon={state.uncheckedIcon}
+          change={handleChange}
+        />
+      </>
+    )
+  }
+
+  const { getByTestId, container } = render(<RateParent />)
+  const valueEl = container.querySelector('.curModelValue')
+  const el = container.querySelectorAll('.nut-rate-item')
+  if (el && valueEl) {
+    expect(el.length).toBe(state.count) //count
+    expect(el[0].childNodes[0]).toHaveClass(
+      //modelValue
+      'nut-rate-item__icon nut-icon nutui-iconfont nut-icon-star-fill-n'
+    )
+    expect(el[0].childNodes[0]).toHaveAttribute(
+      //activeColor && iconSize
+      'style',
+      'color: red; font-size: 18px; width: 18px; height: 18px;'
+    )
+    expect(el[1].childNodes[0]).toHaveClass(`${publicCls} nut-icon-star-n`)
+    expect(el[1].childNodes[0]).toHaveAttribute(
+      //voidColor
+      'style',
+      'color: rgb(250, 104, 93); font-size: 18px; width: 18px; height: 18px;'
+    )
+    expect(el[0]).toHaveAttribute('style', 'margin-right: 12px;') //spacing
+
+    fireEvent.click(el[1])
+    expect(valueEl.innerHTML).toBe('2') //change api test
+  }
+})
+
+test('disabled test', () => {
+  const { container } = render(<Rate disabled count={1} modelValue={0} />)
+  const el = container.querySelector('.nut-rate-item')
+  if (el) {
+    fireEvent.click(el)
+    expect(el.childNodes[0]).toHaveClass(`${publicCls} nut-icon-star-n`)
+  }
+})
+
+test('readonly  test', () => {
+  const { container } = render(<Rate readonly count={1} modelValue={0} />)
+  const el = container.querySelector('.nut-rate-item')
+  if (el) {
+    fireEvent.click(el)
+    expect(el.childNodes[0]).toHaveClass(`${publicCls} nut-icon-star-n`)
+  }
+})
+
+test('allowHalf  test', () => {
+  const { container } = render(<Rate count={1} modelValue={0.5} allowHalf />)
+  const el = container.querySelector('.nut-rate-item')
+  if (el) {
+    expect(el.childNodes[1]).toHaveClass(
+      'nut-rate-item__icon nut-rate-item__icon--half nut-icon nutui-iconfont nut-icon-star-fill-n '
+    )
+  }
+})

src/packages/rate/demo.tsx

@@ -19,6 +19,13 @@ const RateDemo = () => {
         <h2>自定义数量</h2>
         <Rate count="6" modelValue="3" />
 
+        <h2>最少选中数量（支持半星）</h2>
+        <Rate
+          modelValue="2"
+          minimizeValue={3}
+          change={(num) => console.log(num)}
+        />
+
         <h2>自定义颜色</h2>
         <Rate activeColor="#FFC800" modelValue="3" />
 
@@ -29,7 +36,8 @@ const RateDemo = () => {
         <Rate modelValue="3" readonly />
 
         <h2>绑定事件</h2>
-        <Rate modelValue="3" change={() => onChange} />
+        <Rate modelValue="3" change={onChange} />
+
         <h2>自定义尺寸 35px</h2>
         <Rate modelValue="3" iconSize="35" />
       </div>

src/packages/rate/doc.en-US.md

-#  Rate 评分
+#  Rate 
 
-### 介绍
+### introduce
 
-用于快速的评级操作，或对评价进行展示。
+Use for quick rating actions, or to showcase reviews.
 
-### 安装
+### Install
 
 ```ts
 import { Rate } from '@nutui/nutui-react';
 ```
 
-## 代码演示
+## Code demonstration
 
-### 基础用法  
+### Basic usage
 
 :::demo
 ```tsx
@@ -31,7 +31,7 @@ export default App;
 ```
 :::
         
-### 半星  
+### half star  
 
 :::demo
 ```tsx
@@ -49,7 +49,7 @@ export default App;
 
 ```
 :::
-### 自定义 icon   
+### customize icon   
 
 :::demo
 ```tsx
@@ -67,7 +67,7 @@ export default App;
 
 ```
 :::
-### 自定义数量  
+### custom quantity  
 
 :::demo
 ```tsx
@@ -85,7 +85,25 @@ export default App;
 
 ```
 :::
-### 自定义颜色 
+### Select the minimum quantity (support half star)  
+
+:::demo
+```tsx
+import  React from "react";
+import { Rate } from '@nutui/nutui-react';
+
+const App = () => {
+  return ( 
+    <>   
+    <Rate count="5" modelValue="2" minimizeValue="3"/>
+    </>
+  );
+};  
+export default App;
+
+```
+:::
+### custom color 
 
 :::demo
 ```tsx
@@ -103,7 +121,7 @@ export default App;
 
 ```
 :::
-### 禁用状态  
+### disabled state  
 
 :::demo
 ```tsx
@@ -121,7 +139,7 @@ export default App;
 
 ```
 :::
-### 只读状态  
+### readonly state  
 
 :::demo
 ```tsx
@@ -139,7 +157,7 @@ export default App;
 
 ```
 :::
-### 绑定事件  
+### bind event  
 
 :::demo
 ```tsx
@@ -160,7 +178,7 @@ export default App;
 
 ```
 :::
-### 自定义尺寸 35px  
+### custom iconSize 35px  
 
 :::demo
 ```tsx
@@ -183,21 +201,22 @@ export default App;
 
 ## Prop
 
-| 字段           | 说明                                      | 类型    | 默认值      |
+| field           | explain                                 | type    | default    |
 |----------------|-------------------------------------------|---------|-------------|
-| modelValue        | 当前 star 数不能大于count | Number  | -           |
-| count          | star 总数                                 | Number  | 5           |
-| iconSize      | star 大小                                 | Number  | 18          |
-| activeColor   | 图标选中颜色                              | String  | #fa200c     |
-| voidColor     | 图标未选中颜色                            | String  | #ccc        |
-| uncheckedIcon | 使用图标(未选中)                          | String  | star-n      |
-| checkedIcon   | 使用图标(选中)                            | String  | star-fill-n |
-| allowHalf     | 是否半星                                  | Boolean | false       |
-| readonly       | 是否只读                                  | Boolean | false       |
-| disabled       | 是否禁用                                  | Boolean | false       |
-| spacing        | 间距                                      | Number  | 20          |
+| modelValue     | The current number of stars <= count     | Number    | -           |
+| count          | total number of stars                    | Number  | 5           |
+| minimizeValue  | At least the number of STAR              | Number  | 0           |
+| iconSize      | size of star                              | Number  | 18          |
+| activeColor   | Icon selection color                      | String  | #fa200c     |
+| voidColor     | Icon unselected color                    | String  | #ccc        |
+| uncheckedIcon | Use icon (unchecked)                    | String  | star-n      |
+| checkedIcon   | Use icon (checked)                       | String  | star-fill-n |
+| allowHalf     | Half star or not                         | Boolean | false       |
+| readonly       |Read only                              | Boolean | false       |
+| disabled       | Disable or not                          | Boolean | false       |
+| spacing        | spacing                                  | Number  | 20          |
 
 ## Event
-| 字段   | 说明                       | 回调参数 |
+| field   | explain                                          | Callback Arguments  |
 |--------|----------------------------|----------|
-| change | 当前分值修改时时触发的事件 | 当前值   |
+| change | Event triggered when the current score is modified | Current value   |

src/packages/rate/doc.md

@@ -83,6 +83,24 @@ const App = () => {
 };  
 export default App;
 
+```
+:::
+### 最少选中数量（支持半星）  
+
+:::demo
+```tsx
+import  React from "react";
+import { Rate } from '@nutui/nutui-react';
+
+const App = () => {
+  return ( 
+    <>   
+    <Rate count="5" modelValue="2" minimizeValue="3"/>
+    </>
+  );
+};  
+export default App;
+
 ```
 :::
 ### 自定义颜色 
@@ -187,6 +205,7 @@ export default App;
 |----------------|-------------------------------------------|---------|-------------|
 | modelValue        | 当前 star 数不能大于count | Number  | -           |
 | count          | star 总数                                 | Number  | 5           |
+| minimizeValue  | 最少选中star数量                           | Number  | 0           |
 | iconSize      | star 大小                                 | Number  | 18          |
 | activeColor   | 图标选中颜色                              | String  | #fa200c     |
 | voidColor     | 图标未选中颜色                            | String  | #ccc        |

src/packages/rate/doc.zh-TW.md

-#  Rate 评分
+#  Rate 評分
 
-### 介绍
+### 介紹
 
-用于快速的评级操作，或对评价进行展示。
+用於快速的評級操作，或對評價進行展示。
 
-### 安装
+### 安裝
 
 ```ts
 import { Rate } from '@nutui/nutui-react';
 ```
 
-## 代码演示
+## 代碼演示
 
-### 基础用法  
+### 基礎用法  
 
 :::demo
 ```tsx
@@ -49,7 +49,7 @@ export default App;
 
 ```
 :::
-### 自定义 icon   
+### 自定義 icon   
 
 :::demo
 ```tsx
@@ -67,7 +67,7 @@ export default App;
 
 ```
 :::
-### 自定义数量  
+### 自定義數量 
 
 :::demo
 ```tsx
@@ -85,7 +85,25 @@ export default App;
 
 ```
 :::
-### 自定义颜色 
+### 最少選中數量（支持半星）  
+
+:::demo
+```tsx
+import  React from "react";
+import { Rate } from '@nutui/nutui-react';
+
+const App = () => {
+  return ( 
+    <>   
+    <Rate count="5" modelValue="2" minimizeValue="3"/>
+    </>
+  );
+};  
+export default App;
+
+```
+:::
+### 自定義顏色
 
 :::demo
 ```tsx
@@ -103,7 +121,7 @@ export default App;
 
 ```
 :::
-### 禁用状态  
+### 禁用狀態  
 
 :::demo
 ```tsx
@@ -121,7 +139,7 @@ export default App;
 
 ```
 :::
-### 只读状态  
+### 只讀狀態  
 
 :::demo
 ```tsx
@@ -139,7 +157,7 @@ export default App;
 
 ```
 :::
-### 绑定事件  
+### 綁定事件
 
 :::demo
 ```tsx
@@ -160,7 +178,7 @@ export default App;
 
 ```
 :::
-### 自定义尺寸 35px  
+### 自定義尺寸 35px  
 
 :::demo
 ```tsx
@@ -183,21 +201,22 @@ export default App;
 
 ## Prop
 
-| 字段           | 说明                                      | 类型    | 默认值      |
+| 字段           | 說明                                      | 類型    | 默認值      |
 |----------------|-------------------------------------------|---------|-------------|
-| modelValue        | 当前 star 数不能大于count | Number  | -           |
-| count          | star 总数                                 | Number  | 5           |
+| modelValue        | 當前 star 數不能大於count | Number  | -           |
+| count          | star 總數                                 | Number  | 5           |
+| minimizeValue  | 最少選中star數量                          | Number  | 0           |
 | iconSize      | star 大小                                 | Number  | 18          |
-| activeColor   | 图标选中颜色                              | String  | #fa200c     |
-| voidColor     | 图标未选中颜色                            | String  | #ccc        |
-| uncheckedIcon | 使用图标(未选中)                          | String  | star-n      |
-| checkedIcon   | 使用图标(选中)                            | String  | star-fill-n |
+| activeColor   | 圖標選中顏色                              | String  | #fa200c     |
+| voidColor     | 圖標未選中顏色                          | String  | #ccc        |
+| uncheckedIcon | 使用圖標(未選中)                          | String  | star-n      |
+| checkedIcon   | 使用圖標(選中)                           | String  | star-fill-n |
 | allowHalf     | 是否半星                                  | Boolean | false       |
-| readonly       | 是否只读                                  | Boolean | false       |
+| readonly       | 是否只讀                                 | Boolean | false       |
 | disabled       | 是否禁用                                  | Boolean | false       |
-| spacing        | 间距                                      | Number  | 20          |
+| spacing        | 間距                                      | Number  | 20          |
 
 ## Event
-| 字段   | 说明                       | 回调参数 |
+| 字段   | 說明                       | 回調參數 |
 |--------|----------------------------|----------|
-| change | 当前分值修改时时触发的事件 | 当前值   |
+| change | 當前分值修改時時觸發的事件 | 當前值   |

src/packages/rate/rate.tsx

@@ -6,6 +6,7 @@ import Icon from '@/packages/icon'
 export interface RateProps {
   count: string | number
   modelValue: string | number
+  minimizeValue: string | number
   iconSize: string | number
   activeColor: string
   voidColor: string
@@ -20,6 +21,7 @@ export interface RateProps {
 const defaultProps = {
   count: 5,
   modelValue: 0,
+  minimizeValue: 0,
   iconSize: 18,
   activeColor: '',
   voidColor: '',
@@ -34,6 +36,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
   const {
     count,
     modelValue,
+    minimizeValue,
     iconSize,
     activeColor,
     voidColor,
@@ -60,7 +63,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
   }, [count])
 
   useEffect(() => {
-    setScore(Number(modelValue))
+    setScore(Math.max(Number(modelValue), Number(minimizeValue)))
   }, [modelValue])
 
   const pxCheck = (value: string | number): string => {
@@ -81,6 +84,7 @@ export const Rate: FunctionComponent<Partial<RateProps>> = (props) => {
         }
       }
     }
+    value = Math.max(value, Number(minimizeValue))
     setScore(value)
 
     change && change(value)

src/packages/switch/doc.en-US.md

-#  Switch 开关
+#  Switch 
 
-### 介绍
+### Introduction
 
-用来打开或关闭选项。
+Used to open or close the options.
 
-### 安装
+### Install
 
 ```ts
 import { Switch } from '@nutui/nutui-react';
 ```
 
-## 代码演示
+## Code demonstration
 
-### 基础用法
+### Basic usage
 
 :::demo
 ```tsx
@@ -32,7 +32,7 @@ export default App;
 :::
 
 
-### 禁用状态
+### disable status
 
 :::demo
 ```tsx
@@ -51,7 +51,7 @@ export default App;
 ```
 :::
 
-### change事件
+### change event
 
 :::demo
 ```tsx
@@ -60,7 +60,7 @@ import { Switch } from '@nutui/nutui-react';
 
 const App = () => {
   const change = (value: boolean, event: Event) => {
-    alert(`触发了change事件，开关状态：${value}`)
+    alert(`Triggering the change event, the switch status：${value}`)
   }
   return ( 
     <>   
@@ -72,7 +72,7 @@ export default App;
 
 ```
 :::
-### 异步控制
+### Asynchronous control
 
 :::demo
 ```tsx
@@ -83,7 +83,7 @@ const App = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
   
   const changeAsync = (value: boolean, event: Event) => {
-    alert(`2秒后异步触发 ${value}`)
+    alert(`Asynchronous trigger after 2 seconds ${value}`)
     setTimeout(() => {
       setCheckedAsync(value)
     }, 2000)
@@ -102,7 +102,7 @@ export default App;
 
 ```
 :::
-### 自定义颜色
+### Custom color
 
 :::demo
 ```tsx
@@ -120,7 +120,7 @@ export default App;
 
 ```
 :::
-### 支持文字
+### Support text
 
 :::demo
 ```tsx
@@ -130,7 +130,7 @@ import { Switch } from '@nutui/nutui-react';
 const App = () => {
   return ( 
     <>   
-    <Switch activeText="开" inactiveText="关" />
+    <Switch activeText="open" inactiveText="close" />
     </>
   );
 };  
@@ -146,19 +146,19 @@ export default App;
 
 ### Props
 
-| 参数           | 说明             | 类型    | 默认值                |
+| parameter            | illustrate             | type    | Defaults   |
 |----------------|------------------|---------|-----------------------|
-| checked        | 开关状态         | Boolean | `false`               |
-| disable        | 禁用状态         | Boolean | `false`               |
-| activeColor   | 打开时的背景颜色 | String  | `#fa2c19`    |
-| inactiveColor | 关闭时的背景颜色 | String  | `#ebebeb` |
-| activeText    | 打开时文字描述   | String  | -                     |
-| inactiveText  | 关闭时文字描述   | String  | -                     |
-| isAsync  | 开关状态是否异步修改   | Boolean  | `false`                     |
+| checked        | switch status              | Boolean | `false`    |
+| disable        | Disable                     | Boolean | `false`   |
+| activeColor   | Background color when opening | String  | `#fa2c19`|
+| inactiveColor | Background color when closed | String  | `#ebebeb` |
+| activeText    | Text description when opening | String  | -        |
+| inactiveText  | Text description when closed  | String  | -        |
+| isAsync  | Whether the switch state is modified asynchronous   | Boolean  | `false`                     |
 
 
 ### Events
 
-| 事件名 | 说明           | 回调参数                      |
+| Incident name | illustrate           | Callback parameter       |
 |--------|----------------|-------------------------------|
-| change | 切换开关时触发 | (value: boolean,event: Event) |
+| change | Trigger when switching switches | (value: boolean,event: Event) |

src/packages/switch/doc.zh-TW.md

-#  Switch 开关
+#  Switch 開關
 
-### 介绍
+### 介紹
 
-用来打开或关闭选项。
+用來打開或關閉選項。
 
-### 安装
+### 安裝
 
 ```ts
 import { Switch } from '@nutui/nutui-react';
 ```
 
-## 代码演示
+## 代碼演示
 
-### 基础用法
+### 基礎用法
 
 :::demo
 ```tsx
@@ -32,7 +32,7 @@ export default App;
 :::
 
 
-### 禁用状态
+### 禁用狀態
 
 :::demo
 ```tsx
@@ -60,7 +60,7 @@ import { Switch } from '@nutui/nutui-react';
 
 const App = () => {
   const change = (value: boolean, event: Event) => {
-    alert(`触发了change事件，开关状态：${value}`)
+    alert(`觸發了change事件，開關狀態：${value}`)
   }
   return ( 
     <>   
@@ -72,7 +72,7 @@ export default App;
 
 ```
 :::
-### 异步控制
+### 異步控制
 
 :::demo
 ```tsx
@@ -83,7 +83,7 @@ const App = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
   
   const changeAsync = (value: boolean, event: Event) => {
-    alert(`2秒后异步触发 ${value}`)
+    alert(`2秒後異步觸發 ${value}`)
     setTimeout(() => {
       setCheckedAsync(value)
     }, 2000)
@@ -102,7 +102,7 @@ export default App;
 
 ```
 :::
-### 自定义颜色
+### 自定義顏色
 
 :::demo
 ```tsx
@@ -130,7 +130,7 @@ import { Switch } from '@nutui/nutui-react';
 const App = () => {
   return ( 
     <>   
-    <Switch activeText="开" inactiveText="关" />
+    <Switch activeText="開" inactiveText="關" />
     </>
   );
 };  
@@ -146,19 +146,19 @@ export default App;
 
 ### Props
 
-| 参数           | 说明             | 类型    | 默认值                |
+| 參數           | 說明             | 類型    | 默認值                |
 |----------------|------------------|---------|-----------------------|
-| checked        | 开关状态         | Boolean | `false`               |
-| disable        | 禁用状态         | Boolean | `false`               |
-| activeColor   | 打开时的背景颜色 | String  | `#fa2c19`    |
-| inactiveColor | 关闭时的背景颜色 | String  | `#ebebeb` |
-| activeText    | 打开时文字描述   | String  | -                     |
-| inactiveText  | 关闭时文字描述   | String  | -                     |
-| isAsync  | 开关状态是否异步修改   | Boolean  | `false`                     |
+| checked        | 開關狀態         | Boolean | `false`               |
+| disable        | 禁用狀態         | Boolean | `false`               |
+| activeColor   | 打開時的背景顏色 | String  | `#fa2c19`    |
+| inactiveColor | 關閉時的背景顏色 | String  | `#ebebeb` |
+| activeText    | 打開時文字描述   | String  | -                     |
+| inactiveText  | 關閉時文字描述   | String  | -                     |
+| isAsync  | 開關狀態是否異步修改   | Boolean  | `false`                     |
 
 
 ### Events
 
-| 事件名 | 说明           | 回调参数                      |
+| 事件名 | 說明           | 回調參數                      |
 |--------|----------------|-------------------------------|
-| change | 切换开关时触发 | (value: boolean,event: Event) |
+| change | 切換開關時觸發 | (value: boolean,event: Event) |

src/packages/tag/doc.en-US.md

-# Tag 标签
+# Tag 
 
-### 介绍
+### introduce
 
-用于标记和分类的标签。
+Label for labeling and classification.
 
-### 安装
+### Install
 
 ``` javascript
 import { Tag } from '@nutui/nutui-react';
 ```
 
-## 代码实例
+## Code instance
 
-### 基础用法
+### Basic usage
 
 ```tsx
-<Tag type="primary">标签</Tag>
-<Tag type="success">标签</Tag>
-<Tag type="danger">标签</Tag>
-<Tag type="warning">标签</Tag>
+<Tag type="primary">Label</Tag>
+<Tag type="success">Label</Tag>
+<Tag type="danger">Label</Tag>
+<Tag type="warning">Label</Tag>
 ```
 
-### 空心样式
+### Hollow style
 
 ```tsx
-<Tag plain>标签</Tag>
+<Tag plain>Label</Tag>
 ```
 
-### 圆角样式
+### Rounded style
 
 ```tsx
-<Tag round type="primary">标签</Tag>
+<Tag round type="primary">Label</Tag>
 ```
 
-### 标记样式
+### Label style
 
 ```tsx
-<Tag mark type="primary">标签</Tag>
+<Tag mark type="primary">Label</Tag>
 ```
 
-### 可关闭标签
+### Can close label
 
 ```tsx
-<Tag isShow={isShow} closeable onClick={close} type="primary">标签</Tag>
+<Tag isShow={isShow} closeable onClick={close} type="primary">Label</Tag>
 ```
 
-### 自定义颜色
+### Custom color
 
 ```tsx
-<Tag color="#FA685D">标签</Tag>
-<Tag color="#E9E9E9" text-color="#999999">标签</Tag>
-<Tag color="#FA2400" plain>标签</Tag>
+<Tag color="#FA685D">Label</Tag>
+<Tag color="#E9E9E9" text-color="#999999">Label</Tag>
+<Tag color="#FA2400" plain>Label</Tag>
 ```
 
 ## API
 
 ### Props
 
-| 字段       | 说明                                             | 类型    | 默认值    |
+| Field       | illustrate                                      | type    | Defaults    |
 |------------|--------------------------------------------------|---------|-----------|
-| type       | 标签类型，可选值为primary success danger warning | String  | `default` |
-| color      | 标签颜色                                         | String  | -         |
-| text-color | 文本颜色，优先级高于color属性                    | String  | `white`   |
-| plain      | 是否为空心样式                                   | Boolean | `false`   |
-| round      | 是否为圆角样式                                   | Boolean | `false`   |
-| mark       | 是否为标记样式                                   | Boolean | `false`   |
-| closeable  | 是否为可关闭标签                                 | Boolean | `false`   |
+| type       | Label type, the optional value is primary success danger warning | String  | `default` |
+| color      | Label color                                         | String  | -         |
+| text-color | Text color, priority is higher than the color attribute  | String  | `white`   |
+| plain      | Whether it is hollow                               | Boolean | `false`   |
+| round      | Whether it is a rounded style                      | Boolean | `false`   |
+| mark       | Whether it is a tag style                          | Boolean | `false`   |
+| closeable  | Whether it can be closed label                     | Boolean | `false`   |
 
 
 ### Event
 
-| 事件名称 | 说明     | 回调参数 |
+| Event name | illustrate  | Callback parameter |
 |----------|----------|----------|
-| close    | 关闭事件 | event    |
+| close    | Close event | event    |
 

src/packages/tag/doc.zh-TW.md

-# Tag 标签
+# Tag 標籤
 
-### 介绍
+### 介紹
 
-用于标记和分类的标签。
+用於標記和分類的標籤。
 
-### 安装
+### 安裝
 
 ``` javascript
 import { Tag } from '@nutui/nutui-react';
 ```
 
-## 代码实例
+## 代碼實例
 
-### 基础用法
+### 基礎用法
 
 ```tsx
-<Tag type="primary">标签</Tag>
-<Tag type="success">标签</Tag>
-<Tag type="danger">标签</Tag>
-<Tag type="warning">标签</Tag>
+<Tag type="primary">標籤</Tag>
+<Tag type="success">標籤</Tag>
+<Tag type="danger">標籤</Tag>
+<Tag type="warning">標籤</Tag>
 ```
 
-### 空心样式
+### 空心樣式
 
 ```tsx
-<Tag plain>标签</Tag>
+<Tag plain>標籤</Tag>
 ```
 
-### 圆角样式
+### 圓角樣式
 
 ```tsx
-<Tag round type="primary">标签</Tag>
+<Tag round type="primary">標籤</Tag>
 ```
 
-### 标记样式
+### 標記樣式
 
 ```tsx
-<Tag mark type="primary">标签</Tag>
+<Tag mark type="primary">標籤</Tag>
 ```
 
-### 可关闭标签
+### 可关闭標籤
 
 ```tsx
-<Tag isShow={isShow} closeable onClick={close} type="primary">标签</Tag>
+<Tag isShow={isShow} closeable onClick={close} type="primary">標籤</Tag>
 ```
 
-### 自定义颜色
+### 自定義顏色
 
 ```tsx
-<Tag color="#FA685D">标签</Tag>
-<Tag color="#E9E9E9" text-color="#999999">标签</Tag>
-<Tag color="#FA2400" plain>标签</Tag>
+<Tag color="#FA685D">標籤</Tag>
+<Tag color="#E9E9E9" text-color="#999999">標籤</Tag>
+<Tag color="#FA2400" plain>標籤</Tag>
 ```
 
 ## API
 
 ### Props
 
-| 字段       | 说明                                             | 类型    | 默认值    |
+| 字段       | 說明                                             | 類型    | 默認值    |
 |------------|--------------------------------------------------|---------|-----------|
-| type       | 标签类型，可选值为primary success danger warning | String  | `default` |
-| color      | 标签颜色                                         | String  | -         |
-| text-color | 文本颜色，优先级高于color属性                    | String  | `white`   |
-| plain      | 是否为空心样式                                   | Boolean | `false`   |
-| round      | 是否为圆角样式                                   | Boolean | `false`   |
-| mark       | 是否为标记样式                                   | Boolean | `false`   |
-| closeable  | 是否为可关闭标签                                 | Boolean | `false`   |
+| type       | 標籤类型，可选值为primary success danger warning | String  | `default` |
+| color      | 標籤颜色                                         | String  | -         |
+| text-color | 文本顏色，優先級高於color屬性                    | String  | `white`   |
+| plain      | 是否為空心樣式                                   | Boolean | `false`   |
+| round      | 是否為圓角樣式                                   | Boolean | `false`   |
+| mark       | 是否為標記樣式                                   | Boolean | `false`   |
+| closeable  | 是否为可关闭標籤                                 | Boolean | `false`   |
 
 
 ### Event
 
-| 事件名称 | 说明     | 回调参数 |
+| 事件名稱| 說明     | 回調參數 |
 |----------|----------|----------|
-| close    | 关闭事件 | event    |
+| close    | 關閉事件 | event    |