Merge pull request #762 from ShuyunFF2E/fixed

inputTag适配主题色
ShuyunFF2E · Dec 9, 2024 · 064596b · 064596b
2 parents e31d7aa + 2e1116a
commit 064596b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/components/input-tag/index.js b/src/components/input-tag/index.js
@@ -182,7 +182,7 @@ export default class InputTag extends Component {
                 </span>
               </Tooltip>
               {!disabled && (
-                <Icon type="close" onClick={() => this.handleRemove(index)} />
+                <Icon type="close" onClick={() => this.handleRemove(index)} className="closed" />
               )}
             </span>
           ))
@@ -267,17 +267,17 @@ export default class InputTag extends Component {
           )}
         </div>
         <div className={`${selector}-operate`}>
-          <span style={{ color: 'red' }}>
+          <span className={`${selector}-text`}>
             {this.count}
             /
             {max}
           </span>
           <Tooltip content="一键复制，以指定分隔符拼接，默认为英文分号">
-            <Icon type="remark" onClick={this.handleCopy} />
+            <Icon type="copy" onClick={this.handleCopy} />
           </Tooltip>
           {!disabled && (
             <Tooltip content="一键清空所有内容">
-              <Icon type="close-circle-solid" onClick={this.handleClear} />
+              <Icon type="close-line" onClick={this.handleClear} />
             </Tooltip>
           )}
         </div>

diff --git a/src/components/input-tag/index.less b/src/components/input-tag/index.less
@@ -13,7 +13,8 @@
   height: auto;
   padding: 7px 10px;
   overflow: auto;
-  border: 1px solid #e8e8e8;
+  border: 1px solid @gray-4;
+  border-radius: 3px;
 
   &-config {
     height: 30px;
@@ -32,8 +33,10 @@
       min-width: 100px;
       height: 24px;
       outline: none;
+      color: @gray-9;
+
       &::placeholder {
-        color: #c9c9c9;
+        color: @gray-6;
         font-size: 12px;
       }
     }
@@ -49,31 +52,40 @@
     height: 24px;
     font-size: 12px;
     box-sizing: border-box;
-    background: #eff7ff;
-    border: 1px solid #ccdceb;
-    border-radius: 2px;
+    color: @gray-8;
+    background: @gray-3;
+    border-radius: 3px;
 
     .text {
       .text-overflow-ellipsis();
     }
-  }
 
-  .icon-close {
-    font-size: 8px;
-    cursor: pointer;
+    .closed {
+      font-size: 12px;
+      cursor: pointer;
+      color: @gray-6;
+
+      &:hover {
+        color: @gray-7;
+      }
+    }
   }
 
   &-operate {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 5px;
-    color: #666;
+    color: @color-gray2;
     font-size: 12px;
 
     i {
-      color: #00aaf1;
+      color: @gray-7;
       cursor: pointer;
     }
   }
+
+  &-text {
+    color: @gray-7;
+  }
 }
diff --git a/src/components/tooltip/demos/showArrow.md b/src/components/tooltip/demos/showArrow.md
@@ -35,7 +35,7 @@ class ToolTipDemo extends React.Component {
 					config {showArrow ? 'no arrow' : 'has arrow'} tooltip
 				</Button>
 				<Tooltip content={content} placement="top" visible={show} showArrow={showArrow} alwaysShow>
-					<span>Click button to config {showArrow ? 'has' : 'no'} arrow toolTip.</span>
+					<span>Click button to config {showArrow ? 'no' : 'has'} arrow toolTip.</span>
 				</Tooltip>
 			</div>
 		);