From 3857806786944e41c688cb6e81a5d90276720e2a Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Wed, 18 Jan 2023 00:57:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9A=97=E9=BB=91=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc-auto-import.json               |   1 -
 src/components/LangSelect/index.vue      |   2 +-
 src/components/Screenfull/index.vue      |   2 +-
 src/components/SizeSelect/index.vue      |   2 +-
 src/layout/components/TagsView/index.vue | 136 +++++++++++------------
 src/styles/dark.scss                     |  14 +--
 src/styles/index.scss                    |  26 ++++-
 src/styles/variables.module.scss         |  16 +--
 src/types/auto-imports.d.ts              |   2 -
 9 files changed, 106 insertions(+), 95 deletions(-)

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 7349931..0d99f35 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -107,7 +107,6 @@
     "useArrayMap": true,
     "useArrayReduce": true,
     "useArraySome": true,
-    "useArrayUnique": true,
     "useAsyncQueue": true,
     "useAsyncState": true,
     "useAttrs": true,
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index 52a6b13..46a34e6 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -24,7 +24,7 @@ function handleLanguageChange(lang: string) {
     @command="handleLanguageChange"
   >
     <div
-      class="cursor-pointer h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50"
+      class="cursor-pointer text-[#5a5e66] h-[50px] leading-[50px] text-center px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
     >
       <svg-icon icon-class="language" />
     </div>
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 83f19ab..0eadff9 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
+    class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
   >
     <svg-icon
       :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 72f60ad..514e1e4 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -18,7 +18,7 @@ function handleSizeChange(size: string) {
 <template>
   <el-dropdown trigger="click" @command="handleSizeChange">
     <div
-      class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50"
+      class="cursor-pointer h-[50px] leading-[50px] text-center text-[#5a5e66] px-2.5 hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
     >
       <svg-icon icon-class="size" />
     </div>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 6be3782..7ec88d0 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -210,7 +210,7 @@ function closeAllTags(view: TagView) {
 function openTagMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
 
-  console.log("test",proxy?.$el)
+  console.log('test', proxy?.$el);
 
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
@@ -242,62 +242,59 @@ onMounted(() => {
 </script>
 
 <template>
-<div  class="tags-container">
-  <scroll-pane
-    ref="scrollPaneRef"
-    @scroll="handleScroll"
-  >
-    <router-link
-      :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
-      v-for="tag in visitedViews"
-      :key="tag.path"
-      :data-path="tag.path"
-      :to="{ path: tag.path, query: tag.query }"
-      @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-      @contextmenu.prevent="openTagMenu(tag, $event)"
-    >
-      {{ translateRouteTitleI18n(tag.meta?.title) }}
-      <span
-        v-if="!isAffix(tag)"
-        class="tags-item-close"
-        @click.prevent.stop="closeSelectedTag(tag)"
+  <div class="tags-container">
+    <scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
+      <router-link
+        :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
+        v-for="tag in visitedViews"
+        :key="tag.path"
+        :data-path="tag.path"
+        :to="{ path: tag.path, query: tag.query }"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+        @contextmenu.prevent="openTagMenu(tag, $event)"
       >
-        <i-ep-close class="text-[10px]" />
-      </span>
-    </router-link>
-  </scroll-pane>
+        {{ translateRouteTitleI18n(tag.meta?.title) }}
+        <span
+          v-if="!isAffix(tag)"
+          class="tags-item-close"
+          @click.prevent.stop="closeSelectedTag(tag)"
+        >
+          <i-ep-close class="text-[10px]" />
+        </span>
+      </router-link>
+    </scroll-pane>
 
-  <!-- tag标签操作菜单 -->
-  <ul
-    v-show="tagMenuVisible"
-    class="tag-menu"
-    :style="{ left: left + 'px', top: top + 'px' }"
-  >
-    <li @click="refreshSelectedTag(selectedTag)">
-      <svg-icon icon-class="refresh" />
-      刷新
-    </li>
-    <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-      <svg-icon icon-class="close" />
-      关闭
-    </li>
-    <li @click="closeOtherTags">
-      <svg-icon icon-class="close_other" />
-      关闭其它
-    </li>
-    <li v-if="!isFirstView()" @click="closeLeftTags">
-      <svg-icon icon-class="close_left" />
-      关闭左侧
-    </li>
-    <li v-if="!isLastView()" @click="closeRightTags">
-      <svg-icon icon-class="close_right" />
-      关闭右侧
-    </li>
-    <li @click="closeAllTags(selectedTag)">
-      <svg-icon icon-class="close_all" />
-      关闭所有
-    </li>
-  </ul>
+    <!-- tag标签操作菜单 -->
+    <ul
+      v-show="tagMenuVisible"
+      class="tag-menu"
+      :style="{ left: left + 'px', top: top + 'px' }"
+    >
+      <li @click="refreshSelectedTag(selectedTag)">
+        <svg-icon icon-class="refresh" />
+        刷新
+      </li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <svg-icon icon-class="close" />
+        关闭
+      </li>
+      <li @click="closeOtherTags">
+        <svg-icon icon-class="close_other" />
+        关闭其它
+      </li>
+      <li v-if="!isFirstView()" @click="closeLeftTags">
+        <svg-icon icon-class="close_left" />
+        关闭左侧
+      </li>
+      <li v-if="!isLastView()" @click="closeRightTags">
+        <svg-icon icon-class="close_right" />
+        关闭右侧
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        <svg-icon icon-class="close_all" />
+        关闭所有
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -331,7 +328,7 @@ onMounted(() => {
       background-color: var(--el-color-primary);
       color: #fff;
       border-color: var(--el-color-primary);
-        &::before {
+      &::before {
         content: '';
         background: #fff;
         display: inline-block;
@@ -340,37 +337,36 @@ onMounted(() => {
         border-radius: 50%;
         margin-right: 5px;
       }
-       .tags-item-close{
-          &:hover{
-            background:rgb(0 0 0 / 0.16)
-          }
+      .tags-item-close {
+        &:hover {
+          background: rgb(0 0 0 / 0.16);
         }
-    }
-
-    &-close{
-      border-radius:100%;
-      &:hover{
-        color:#FFF;
-       background:rgb(0 0 0 / 0.16)
       }
     }
 
+    &-close {
+      border-radius: 100%;
+      &:hover {
+        color: #fff;
+        background: rgb(0 0 0 / 0.16);
+      }
+    }
   }
 }
 
 .tag-menu {
-  background: #fff;
+  background: var(--el-bg-color-overlay);
   z-index: 99;
   position: absolute;
   border-radius: 4px;
   font-size: 12px;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: var(--el-box-shadow-light);
 
   li {
     padding: 8px 16px;
     cursor: pointer;
     &:hover {
-      background: #eee;
+      background: var(--el-fill-color-light);
     }
   }
 }
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
index e8039b4..0a340aa 100644
--- a/src/styles/dark.scss
+++ b/src/styles/dark.scss
@@ -1,12 +1,3 @@
-// only scss variables
-
-$--colors: (
-  "primary": ("base": red),
-);
-
-@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
-
-
 html.dark {
   .navbar {
     background-color: var(--el-bg-color);
@@ -16,4 +7,7 @@ html.dark {
   .hamburger {
     fill: var(--el-text-color-regular);
   }
-}
\ No newline at end of file
+
+
+
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index eb300be..864b181 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,4 +2,28 @@
 @import './sidebar.scss';
 @import './tailwind.scss';
 @import './global.scss';
-@import './dark.scss';
\ No newline at end of file
+@import './dark.scss';
+
+// 自定义全局CSS变量
+:root{
+  --menuBg:#304156;
+  --menuText:#bfcbd9;
+  --menuActiveText:#409eff;
+  --menuHover:#263445;
+
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #f4f4f5;
+  --subMenuHover: #001528;
+
+}
+
+html.dark{
+  --menuBg:var(--el-menu-bg-color);
+  --menuText:var(----el-menu-text-color);
+  --menuActiveText:var(--el-menu-active-color);
+  --menuHover:var(--el-menu-hover-bg-color);
+
+  --subMenuBg: var(--el-menu-bg-color);
+  --subMenuActiveText:var(--el-menu-active-color);
+  --subMenuHover: var(--el-menu-hover-bg-color);
+}
diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss
index 30a94df..8423383 100644
--- a/src/styles/variables.module.scss
+++ b/src/styles/variables.module.scss
@@ -1,11 +1,11 @@
 // 全局SCSS变量
-$menuText: #bfcbd9;
-$menuActiveText: #409eff;
-$menuBg: #304156;
-$menuHover: #263445;
+$menuBg: var(--menuBg);
+$menuText: var(--menuText);
+$menuActiveText: var(--menuActiveText);
+$menuHover: var(--menuHover);
 
-$subMenuBg: #1f2d3d;
-$subMenuActiveText: #f4f4f5;
-$subMenuHover: #001528;
+$subMenuBg:var(--subMenuBg);
+$subMenuActiveText:var(--subMenuActiveText);
+$subMenuHover:var(--subMenuHover);
 
-$sideBarWidth: 210px;
\ No newline at end of file
+$sideBarWidth: 210px;
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 5ec56ed..9fd5106 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -108,7 +108,6 @@ declare global {
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
-  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -374,7 +373,6 @@ declare module 'vue' {
     readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
     readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
     readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
-    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>