From 19ccd378f5b3dda91c0cb3bb57c81aca83e06b8a Mon Sep 17 00:00:00 2001
From: xiaoming <1923740402@qq.com>
Date: Fri, 1 Mar 2024 16:37:15 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=87=8D=E6=9E=84=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5`UI`=EF=BC=8C=E7=82=B9=E5=87=BB=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=9B=B4=E6=96=B9=E4=BE=BF=20(#950)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: 重构标签页`UI`，点击关闭按钮更方便

* chore: update
---
 src/layout/components/tag/index.scss | 84 +++++++++-------------------
 src/layout/components/tag/index.vue  |  7 ++-
 src/layout/hooks/useTag.ts           |  1 +
 src/style/dark.scss                  |  9 +++
 4 files changed, 39 insertions(+), 62 deletions(-)

diff --git a/src/layout/components/tag/index.scss b/src/layout/components/tag/index.scss
index 28faf501c..1c0d9ab99 100644
--- a/src/layout/components/tag/index.scss
+++ b/src/layout/components/tag/index.scss
@@ -18,26 +18,6 @@
   }
 }
 
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes close {
-  from {
-    transform: translate(-50%, -50%);
-  }
-
-  to {
-    transform: translate(0, -50%);
-  }
-}
-
 .tags-view {
   position: relative;
   display: flex;
@@ -51,41 +31,35 @@
   .scroll-item {
     position: relative;
     display: inline-block;
-    height: 28px;
-    padding: 0 6px;
-    margin-right: 4px;
-    line-height: 28px;
+    height: 34px;
+    padding-left: 6px;
+    line-height: 34px;
     cursor: pointer;
-    border-radius: 3px 3px 0 0;
-    box-shadow: 0 0 1px #888;
     transition: all 0.4s;
 
+    &:not(:first-child) {
+      padding-right: 24px;
+    }
+
     .el-icon-close {
       position: absolute;
       top: 50%;
-      font-size: 10px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
       color: var(--el-color-primary);
       cursor: pointer;
-      transition: font-size 0.2s;
-      transform: translate(-50%, -50%);
+      border-radius: 4px;
+      transition:
+        background-color 0.12s,
+        color 0.12s;
+      transform: translate(0, -50%);
 
       &:hover {
-        font-size: 13px;
-        color: #fff;
-        background: #b4bccc;
-        border-radius: 50%;
-      }
-    }
-
-    &.is-closable:not(:first-child) {
-      &:hover {
-        padding-right: 18px;
-
-        &:not(.is-active) {
-          .el-icon-close {
-            animation: close 200ms ease-in forwards;
-          }
-        }
+        color: rgb(0 0 0 / 88%) !important;
+        background-color: rgb(0 0 0 / 6%);
       }
     }
   }
@@ -99,7 +73,6 @@
   .scroll-container {
     position: relative;
     flex: 1;
-    padding: 5px 0;
     overflow: hidden;
     white-space: nowrap;
 
@@ -114,7 +87,7 @@
         transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
         &:nth-child(1) {
-          margin-left: 5px;
+          padding: 0 12px;
         }
       }
     }
@@ -194,14 +167,7 @@
 .scroll-item.is-active {
   position: relative;
   color: #fff;
-
-  &:not(:first-child) {
-    padding-right: 18px;
-  }
-
-  .el-icon-close {
-    transform: translate(0, -50%);
-  }
+  box-shadow: 0 0 0.7px #888;
 
   .tag-title {
     color: var(--el-color-primary) !important;
@@ -212,16 +178,16 @@
 .arrow-right,
 .arrow-down {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 40px;
-  height: 38px;
+  height: 34px;
   color: var(--el-text-color-primary);
 
   svg {
-    position: absolute;
-    left: 50%;
     width: 20px;
     height: 20px;
-    transform: translate(-50%, 50%);
   }
 }
 
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 3406320ea..50bc99471 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -21,9 +21,9 @@ import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
 import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
 import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
 import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
-import CloseBold from "@iconify-icons/ep/close-bold";
 
 const {
+  Close,
   route,
   router,
   visible,
@@ -156,7 +156,8 @@ const handleWheel = (event: WheelEvent): void => {
 };
 
 const smoothScroll = (offset: number): void => {
-  const scrollAmount = 20; // 每帧滚动的距离
+  // 每帧滚动的距离
+  const scrollAmount = 20;
   let remaining = Math.abs(offset);
 
   const scrollStep = () => {
@@ -586,7 +587,7 @@ onBeforeUnmount(() => {
             class="el-icon-close"
             @click.stop="deleteMenu(item)"
           >
-            <IconifyIconOffline :icon="CloseBold" />
+            <IconifyIconOffline :icon="Close" />
           </span>
           <span
             v-if="showModel !== 'card'"
diff --git a/src/layout/hooks/useTag.ts b/src/layout/hooks/useTag.ts
index a2b863bec..11913fdb6 100644
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -216,6 +216,7 @@ export function useTags() {
   });
 
   return {
+    Close,
     route,
     router,
     visible,
diff --git a/src/style/dark.scss b/src/style/dark.scss
index 8ef6a2e14..5fd29ac05 100644
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -45,6 +45,15 @@ html.dark {
     .arrow-right {
       border-left: 1px solid $border-style;
     }
+
+    .scroll-item {
+      .el-icon-close {
+        &:hover {
+          color: rgb(255 255 255 / 85%) !important;
+          background-color: rgb(255 255 255 / 12%);
+        }
+      }
+    }
   }
 
   /* 项目配置面板 */