perf: 优化Tag组件样式

baimingxuan · Mar 3, 2024 · 55ee696 · 55ee696
1 parent cc69715
commit 55ee696
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/layout/tags/components/TagItem/index.module.less b/src/layout/tags/components/TagItem/index.module.less
@@ -10,6 +10,14 @@
   overflow: hidden;
   cursor: pointer;
 
+  &.is-dark-bg {
+    color: rgba(255, 255, 255, .65);
+
+    svg {
+      color: rgba(255, 255, 255, .65);
+    }
+  }
+
   &__dot {
     display: inline-block;
     width: 8px;

diff --git a/src/layout/tags/components/TagItem/index.tsx b/src/layout/tags/components/TagItem/index.tsx
@@ -8,7 +8,8 @@ export default defineComponent({
   props: {
     fixed: propTypes.bool,
     name: propTypes.string,
-    active: propTypes.bool
+    active: propTypes.bool,
+    isDarkBg: propTypes.bool
   },
   setup(props, { emit }) {
     function handleClose() {
@@ -17,7 +18,11 @@ export default defineComponent({
 
     return () => (
       <Tag
-        class={[styles['tag-item'], { ['ant-tag-checkable-checked']: props.active }]}
+        class={[
+          styles['tag-item'],
+          { [styles['is-dark-bg']]: props.isDarkBg },
+          { ['ant-tag-checkable-checked']: props.active }
+        ]}
         closable={!props.fixed}
         onClose={handleClose}
       >

diff --git a/src/layout/tags/index.tsx b/src/layout/tags/index.tsx
@@ -65,6 +65,13 @@ export default defineComponent({
       return {}
     })
 
+    const isDarkBg = computed(
+      () =>
+        unref(getAppMode) === AppModeEnum.LIGHT &&
+        unref(getMenuTheme) === ThemeEnum.DARK &&
+        unref(getMenuType) === MenuTypeEnum.HEADER_MENU
+    )
+
     initAffixTags()
 
     listenerRouteChange(route => {
@@ -183,6 +190,7 @@ export default defineComponent({
                     name={item.meta.title}
                     active={unref(activeKeyRef) === item.path}
                     fixed={item.meta?.affix}
+                    isDarkBg={unref(isDarkBg)}
                     onClick={() => handleClickTag(item.path)}
                     onCloseTag={() => handleCloseTag(item.path)}
                   />