From a00c23339d9d88a7c45c66ea7e5cf92c8356bd65 Mon Sep 17 00:00:00 2001
From: c0dedance <2627702283@qq.com>
Date: Sun, 27 Mar 2022 15:48:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BA=86color?=
 =?UTF-8?q?=E4=B8=8D=E9=9A=8F=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2=E8=80=8C?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tag/src/hooks/use-class.ts          |  4 +---
 .../devui/tag/src/hooks/use-color.ts          | 12 ++++++----
 packages/devui-vue/devui/tag/src/tag.scss     | 24 +++++++------------
 packages/devui-vue/devui/tag/src/tag.tsx      |  2 +-
 4 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/devui-vue/devui/tag/src/hooks/use-class.ts b/packages/devui-vue/devui/tag/src/hooks/use-class.ts
index d5588def2d..693dfe3bc4 100644
--- a/packages/devui-vue/devui/tag/src/hooks/use-class.ts
+++ b/packages/devui-vue/devui/tag/src/hooks/use-class.ts
@@ -4,8 +4,6 @@ import { tagProps, TagProps } from '../tag-types';
 export default function (props: TagProps) {
   return computed(() => {
     const { type, color, deletable } = props;
-    return `devui-tag devui-tag-${type || (color ? 'colorful' : '') || 'default'} ${
-      deletable ? 'devui-tag-deletable' : ''
-    }`;
+    return `devui-tag-item devui-tag-${type || (color ? 'colorful' : '') || 'default'}${deletable ? ' devui-tag-deletable' : ''}`;
   });
 }
diff --git a/packages/devui-vue/devui/tag/src/hooks/use-color.ts b/packages/devui-vue/devui/tag/src/hooks/use-color.ts
index c2a1166b0b..a620effc17 100644
--- a/packages/devui-vue/devui/tag/src/hooks/use-color.ts
+++ b/packages/devui-vue/devui/tag/src/hooks/use-color.ts
@@ -5,10 +5,10 @@ export default function (props: TagProps) {
   return computed(() => {
     const { color, type } = props;
     const typeMap = {
-      primary: '#5e7ce0',
-      success: '#50d4ab',
-      warning: '#fac20a',
-      danger: '#f66f6a'
+      primary: 'var(--devui-primary, #5e7ce0)',
+      success: 'var(--devui-success, #50d4ab)',
+      warning: 'var(--devui-warning, #fac20a)',
+      danger: 'var(--devui-danger, #f66f6a)',
     };
     const colorMap = {
       'blue-w98': '#3383ff',
@@ -22,7 +22,9 @@ export default function (props: TagProps) {
       'purple-w98': '#a97af8'
     };
 
-    if (!color && type) {return typeMap[type];}
+    if (!color && type) {
+      return typeMap[type];
+    }
     // 判断传入的color是colorMap成员or颜色码
     const themeColor = colorMap[color] || color;
     return themeColor;
diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss
index a7bfc3e709..62a97a472f 100644
--- a/packages/devui-vue/devui/tag/src/tag.scss
+++ b/packages/devui-vue/devui/tag/src/tag.scss
@@ -4,51 +4,45 @@ $devui-tag-normal-config: (
   default: (
     border: 0,
     color: $devui-text,
-    background-color: $devui-default-bg
+    background-color: $devui-default-bg,
   ),
   primary: (
     color: $devui-primary,
     background-color: $devui-primary-bg,
-    border-color: $devui-primary-line
   ),
   success: (
     color: $devui-success,
     background-color: $devui-success-bg,
-    border-color: $devui-success-line
   ),
   warning: (
     color: $devui-warning,
     background-color: $devui-warning-bg,
-    border-color: $devui-warning-line
   ),
   danger: (
     color: $devui-danger,
     background-color: $devui-danger-bg,
-    border-color: $devui-danger-line
   ),
   colorful: (
-    background-color: #ffffff
+    background-color: #ffffff,
   ),
   deletable: (
-    padding-right: 32px
-  )
+    padding-right: 32px,
+  ),
 );
 
 .devui-tag {
   display: inline-block;
   margin: 4px;
 
-  .devui-tag {
+  .devui-tag-item {
+    display: block;
+    position: relative;
     padding: 0 8px;
     min-height: 20px;
-    font-size: 12px;
-    font-size: var(--devui-font-size, 12px);
-    line-height: 20px;
     border: 1px solid;
     border-radius: $devui-border-radius;
-    display: block;
-    align-items: center;
-    position: relative;
+    font-size: $devui-font-size;
+    line-height: 20px;
     cursor: default;
     @each $type in default, primary, success, warning, danger, colorful, deletable {
       &.devui-tag-#{$type} {
diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx
index fef91b36ab..6c3445de04 100644
--- a/packages/devui-vue/devui/tag/src/tag.tsx
+++ b/packages/devui-vue/devui/tag/src/tag.tsx
@@ -49,7 +49,7 @@ export default defineComponent({
             style={{
               display: 'block',
               color: checked.value ? '#fff' : themeColor.value,
-              backgroundColor: checked.value ? themeColor.value : !color.value ? '' : '#fff'
+              backgroundColor: checked.value ? themeColor.value : !color.value ? '' : 'var(--devui-base-bg, #ffffff)'
             }}
             title={tagTitle}
           >