From d395f03a57a9265f1d39b3220fc7c9b983efee30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Thu, 14 Apr 2022 10:37:13 +0800
Subject: [PATCH] perf: add tagsViewIcon setting

---
 src/components/Setting/src/Setting.vue          |  2 ++
 .../Setting/src/components/InterfaceDisplay.vue | 12 ++++++++++++
 src/components/TagsView/src/TagsView.vue        | 17 +++++++++++++++++
 src/config/app.ts                               |  2 ++
 src/layout/components/useRenderLayout.tsx       |  8 ++++----
 src/locales/en.ts                               |  3 ++-
 src/locales/zh-CN.ts                            |  3 ++-
 src/store/modules/app.ts                        |  6 ++++++
 8 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
index 94d328f..2fa2121 100644
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@@ -128,6 +128,8 @@ const copyConfig = async () => {
       locale: ${appStore.getLocale},
       // 标签页
       tagsView: ${appStore.getTagsView},
+      // 标签页图标
+      getTagsViewIcon: ${appStore.getTagsViewIcon},
       // logo
       logo: ${appStore.getLogo},
       // 菜单手风琴
diff --git a/src/components/Setting/src/components/InterfaceDisplay.vue b/src/components/Setting/src/components/InterfaceDisplay.vue
index bc3749c..8112e9a 100644
--- a/src/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/components/Setting/src/components/InterfaceDisplay.vue
@@ -65,6 +65,13 @@ const tagsViewChange = (show: boolean) => {
   appStore.setTagsView(show)
 }
 
+// 标签页图标
+const tagsViewIcon = ref(appStore.getTagsViewIcon)
+
+const tagsViewIconChange = (show: boolean) => {
+  appStore.setTagsViewIcon(show)
+}
+
 // logo
 const logo = ref(appStore.getLogo)
 
@@ -149,6 +156,11 @@ watch(
       <ElSwitch v-model="tagsView" @change="tagsViewChange" />
     </div>
 
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
+      <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
+    </div>
+
     <div class="flex justify-between items-center">
       <span class="text-14px">{{ t('setting.logo') }}</span>
       <ElSwitch v-model="logo" @change="logoChange" />
diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue
index c10a54a..5e3379d 100644
--- a/src/components/TagsView/src/TagsView.vue
+++ b/src/components/TagsView/src/TagsView.vue
@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useAppStore } from '@/store/modules/app'
 import { useI18n } from '@/hooks/web/useI18n'
 import { filterAffixTags } from './helper'
 import { ContextMenu, ContextMenuExpose } from '@/components/ContextMenu'
@@ -30,6 +31,10 @@ const visitedViews = computed(() => tagsViewStore.getVisitedViews)
 
 const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
 
+const appStore = useAppStore()
+
+const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
+
 // 初始化tag
 const initTags = () => {
   affixTagArr.value = filterAffixTags(unref(routers))
@@ -341,6 +346,17 @@ watch(
                 @click="navigate"
                 class="h-full flex justify-center items-center whitespace-nowrap pl-15px"
               >
+                <Icon
+                  v-if="
+                    item?.matched &&
+                    item?.matched[1] &&
+                    item?.matched[1]?.meta?.icon &&
+                    tagsViewIcon
+                  "
+                  :icon="item?.matched[1]?.meta?.icon"
+                  :size="12"
+                  class="mr-5px"
+                />
                 {{ t(item?.meta?.title as string) }}
                 <Icon
                   :class="`${prefixCls}__item--close`"
@@ -434,6 +450,7 @@ watch(
 @prefix-cls: ~'@{namespace}-tags-view';
 
 .@{prefix-cls} {
+  background-color: #fff;
   :deep(.@{elNamespace}-scrollbar__view) {
     height: 100%;
   }
diff --git a/src/config/app.ts b/src/config/app.ts
index 3d20f6e..3b2c6f2 100644
--- a/src/config/app.ts
+++ b/src/config/app.ts
@@ -30,6 +30,7 @@ export interface AppState {
   size: boolean
   locale: boolean
   tagsView: boolean
+  tagsViewIcon: boolean
   logo: boolean
   fixedHeader: boolean
   greyMode: boolean
@@ -61,6 +62,7 @@ export const appModules: AppState = {
   size: true, // 尺寸图标
   locale: true, // 多语言图标
   tagsView: true, // 标签页
+  tagsViewIcon: true, // 是否显示标签图标
   logo: true, // logo
   fixedHeader: true, // 固定toolheader
   footer: true, // 显示页脚
diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx
index 7991ac7..430e20f 100644
--- a/src/layout/components/useRenderLayout.tsx
+++ b/src/layout/components/useRenderLayout.tsx
@@ -92,7 +92,7 @@ export const useRenderLayout = () => {
               <ToolHeader class="border-bottom-1 border-solid border-[var(--top-tool-border-color)] bg-[var(--top-header-bg-color)]"></ToolHeader>
 
               {tagsView.value ? (
-                <TagsView class="border-bottom-1 border-solid border-[var(--tags-view-border-color)]"></TagsView>
+                <TagsView class="border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]"></TagsView>
               ) : undefined}
             </div>
 
@@ -139,7 +139,7 @@ export const useRenderLayout = () => {
               {tagsView.value ? (
                 <TagsView
                   class={[
-                    'border-bottom-1 border-solid border-[var(--tags-view-border-color)]',
+                    'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
                     {
                       '!fixed top-0 left-0 z-10': fixedHeader.value,
                       'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
@@ -181,7 +181,7 @@ export const useRenderLayout = () => {
             {tagsView.value ? (
               <TagsView
                 class={[
-                  'border-bottom-1 border-solid border-[var(--tags-view-border-color)]',
+                  'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
                   {
                     '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
                   }
@@ -233,7 +233,7 @@ export const useRenderLayout = () => {
               {tagsView.value ? (
                 <TagsView
                   class={[
-                    'border-bottom-1 border-solid border-[var(--tags-view-border-color)]',
+                    'border-bottom-1 border-top-1 border-solid border-[var(--tags-view-border-color)]',
                     {
                       '!fixed top-0 left-0 z-10': fixedHeader.value,
                       'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 8505d45..f166e16 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -73,7 +73,8 @@ export default {
     copySuccess: 'Copy success',
     copyFailed: 'Copy failed',
     footer: 'Footer',
-    uniqueOpened: 'Unique opened'
+    uniqueOpened: 'Unique opened',
+    tagsViewIcon: 'Tags view icon'
   },
   size: {
     default: 'Default',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 1235726..f1f9e1f 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -73,7 +73,8 @@ export default {
     copySuccess: '拷贝成功',
     copyFailed: '拷贝失败',
     footer: '页脚',
-    uniqueOpened: '菜单手风琴'
+    uniqueOpened: '菜单手风琴',
+    tagsViewIcon: '标签页图标'
   },
   size: {
     default: '默认',
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 9ffa53a..c6fac4e 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -42,6 +42,9 @@ export const useAppStore = defineStore({
     getTagsView(): boolean {
       return this.tagsView
     },
+    getTagsViewIcon(): boolean {
+      return this.tagsViewIcon
+    },
     getLogo(): boolean {
       return this.logo
     },
@@ -110,6 +113,9 @@ export const useAppStore = defineStore({
     setTagsView(tagsView: boolean) {
       this.tagsView = tagsView
     },
+    setTagsViewIcon(tagsViewIcon: boolean) {
+      this.tagsViewIcon = tagsViewIcon
+    },
     setLogo(logo: boolean) {
       this.logo = logo
     },