perf: add tagsViewIcon setting

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},
       // 菜单手风琴

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" />

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%;
   }

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, // 显示页脚

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)]':

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',

src/locales/zh-CN.ts

@@ -73,7 +73,8 @@ export default {
     copySuccess: '拷贝成功',
     copyFailed: '拷贝失败',
     footer: '页脚',
-    uniqueOpened: '菜单手风琴'
+    uniqueOpened: '菜单手风琴',
+    tagsViewIcon: '标签页图标'
   },
   size: {
     default: '默认',

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
     },