【标签第二轮UI验收问题】默认标签样式修改，添加描边状态

ShuyunFF2E · Jan 17, 2024 · 90c0985 · 90c0985
1 parent 25e657e
commit 90c0985
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 60 deletions.
diff --git a/src/components/tag/demos/basic-tag.md b/src/components/tag/demos/basic-tag.md
@@ -17,13 +17,32 @@ class TagDemo extends Component {
 	render() {
 		return (
 			<React.Fragment>
-				<Tag>Tag Demo</Tag>
-				<Tag>超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag</Tag>
-				<Tag type="link" onClick={() => {
-                    window.open('http://www.baidu.com')
-                }}>Link Tag</Tag>
+				<div style={{ marginBottom: 15, fontSize: 14 }}>
+					<Tag>默认标签</Tag>
+					<Tag type="link" onClick={() => {
+						window.open('http://www.baidu.com')
+					}}>超链接标签</Tag>
+					<Tag type="stroke">描边标签</Tag>
 
-              <Tag type="link" disabled>disabled Link</Tag>
+					<Tag>超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag超级超级长的tag</Tag>
+				</div>
+				<div style={{ marginBottom: 15, fontSize: 14 }}>
+					<div style={{ marginBottom: 5 }}>预设状态标签</div>
+					<Tag type="success">成功</Tag>
+					<Tag type="danger">失败</Tag>
+					<Tag type="warning">未开始</Tag>
+					<Tag type="default">已完成</Tag>
+					<Tag color="blue">进行中</Tag>
+				</div>
+				<div style={{ marginBottom: 15, fontSize: 14 }}>
+					<div style={{ marginBottom: 5 }}>预设状态标签 + 图标</div>
+					<Tag type="success" icon="success-fill">成功</Tag>
+					<Tag type="danger" icon="close-fill-1">失败</Tag>
+					<Tag type="warning" icon="checkbox-indeterminate">未开始</Tag>
+					<Tag type="default" icon="success-fill">已完成</Tag>
+					<Tag color="blue" icon="time">进行中</Tag>
+				</div>
+
 			</React.Fragment>
 		);
 	}

diff --git a/src/components/tag/demos/categories.md b/src/components/tag/demos/categories.md
@@ -47,7 +47,7 @@ class TagDemo extends Component {
 		return (
 			<React.Fragment>
 				{tags.map(({ checked, disabled, text }, index) => (
-					<Tag key={index} checked={checked} disabled={disabled} onClick={() => this.handleClick(index)}>
+					<Tag key={index} checkable checked={checked} disabled={disabled} onClick={() => this.handleClick(index)}>
 						{text}
 					</Tag>
 				))}

diff --git a/src/components/tag/demos/state.md b/src/components/tag/demos/state.md
diff --git a/src/components/tag/index.js b/src/components/tag/index.js
@@ -34,7 +34,7 @@ export default class Tag extends Component {
       typeEnum.PRIMARY,
       typeEnum.LINK,
     ]),
-    size: PropTypes.oneOf([ sizeEnum.SMALL, sizeEnum.NORMAL ]),
+    size: PropTypes.oneOf([sizeEnum.SMALL, sizeEnum.NORMAL]),
     color: PropTypes.string,
     rounded: PropTypes.bool,
     closable: PropTypes.bool,
@@ -51,7 +51,7 @@ export default class Tag extends Component {
     color: '',
     rounded: false,
     closable: false,
-    checkable: true,
+    checkable: false,
     checked: false,
     disabled: false,
     onClick: noop,
@@ -117,9 +117,7 @@ export default class Tag extends Component {
   };
 
   renderContent() {
-    const {
-      closable, disabled, icon, maxWidth, style, ...others
-    } = this.props;
+    const { closable, disabled, icon, maxWidth, style, ...others } = this.props;
 
     const props = omit(others, [
       'type',

diff --git a/src/components/tag/index.less b/src/components/tag/index.less
@@ -6,6 +6,7 @@
   color: @gray-6;
   background: @gray-3;
   border: 1px solid @gray-3;
+  cursor: not-allowed !important;
 
   &:hover {
     color: @gray-6;
@@ -60,7 +61,7 @@
   padding: 2px 8px;
   margin-right: 8px;
   cursor: default;
-  background: @gray-1;
+  background: @gray-3;
   border: 1px solid @gray-4;
   border-radius: 3px;
   .text-overflow-ellipsis;
@@ -97,7 +98,9 @@
     .tag-icon {
       position: absolute;
       left: 8px;
+      top: 5px;
       font-size: 12px;
+      line-height: 12px;
     }
   }
 
@@ -110,6 +113,11 @@
         right: 8px;
       }
     }
+    &.icon {
+      .tag-icon {
+        top: 7px;
+      }
+    }
   }
 
   &.small {
@@ -128,6 +136,7 @@
 
       .tag-icon {
         left: 4px;
+        top: 3px;
       }
     }
 
@@ -138,7 +147,7 @@
 
   &.checkable {
     cursor: pointer;
-
+    background-color: @gray-1;
     &:hover {
       color: @blue-4;
       border-color: @blue-4;
@@ -191,7 +200,9 @@
     }
   }
   &.default {
-    .disabled();
+    .tag-icon {
+      color: @gray-6;
+    }
   }
   &.danger,
   &.red {
@@ -233,23 +244,35 @@
   }
 
   &.link {
-    .theme-style(#E8E8E8, @blue-4);
+    cursor: pointer;
+    .theme-style(@gray-3, @gray-9);
 
     &:hover {
       cursor: pointer;
-      border-color: #E8E8E8;
+      border-color: #e8e8e8;
+      color: @blue-4;
     }
 
     &.disabled {
       color: @gray-6;
       background: @gray-3;
-      border: 1px solid #E8E8E8;
+      border: 1px solid #e8e8e8;
 
       &:hover {
         cursor: not-allowed;
         color: @gray-6;
-        border: 1px solid #E8E8E8;
+        border: 1px solid #e8e8e8;
       }
     }
   }
+  &.stroke {
+    color: @gray-9;
+    background-color: @gray-1;
+    &.disabled {
+      .color-disabled(@blue-3, @blue-1);
+    }
+    .tag-close-icon {
+      .close-style(@blue-3, @blue-5, @blue-6);
+    }
+  }
 }
diff --git a/src/components/tag/index.md b/src/components/tag/index.md
@@ -9,36 +9,37 @@ group:
   path: /common
 ---
 
-### 何时使用
+## 何时使用
 
 1. 用于标记事物的属性和维度；
 2. 进行分类。
 
-### API
+## API
 
 | 属性     | 说明                                                   | 类型     | 默认值 |
 | -------- | ------------------------------------------------------ | -------- | ------ |
-| type     | 标签状态,可选状态值：success、warning、default、danger、link | string   | -      |
-| size     | 标签大小,可选状态值：normal、small、large                     | string   | normal      |
+| type     | 标签状态,可选值：success、warning、default、danger、link、 stroke （描边） | string   | -      |
+| size     | 标签大小,可选值：normal、small、large                     | string   | normal      |
 | rounded     | 圆形标签                  | bool   | false      |
 | maxWidth  | 标签最大宽度，超过则显示省略号及Tooltip                    | number   | 200  |
 | color     | 标签颜色,可选状态值：green、orange、red、blue、yellow、gray  | string   | -      |
 | icon     | 图标类型，在tag内内置icon可直接传入icon类型              | string   | -      |
 | closable | 标记标签是否可以被删除                                 | boolean  | false  |
-| size     | 标签大小,可选状态值：normal、small                     | string   | normal      |
 | checkable | 是否可以被选中，仅适用默认类型                                  | boolean  | true  |
 | disabled | 标签不可用                                             | boolean  | false  |
 | onClick  | 点击标签的回调                                         | function | -      |
 | onClose  | 标记标签被删除后被触发                                 | function | -      |
 
- ### 代码演示 
+ ## 代码演示 
 
+### 基础使用
 <embed src="@components/tag/demos/basic-tag.md" /> 
 
-<embed src="@components/tag/demos/categories.md" /> 
-
-<embed src="@components/tag/demos/closeable.md" /> 
+### 大小
+<embed src="@components/tag/demos/color.md" /> 
 
-<embed src="@components/tag/demos/state.md" /> 
+### 可删除
+<embed src="@components/tag/demos/closeable.md" />
 
-<embed src="@components/tag/demos/color.md" /> 
+### 可选择
+<embed src="@components/tag/demos/categories.md" />