feat: 新增页签图标显示开关功能

Author: insistence

ruoyi-fastapi-frontend/src/layout/components/Settings/index.vue

@@ -49,6 +49,11 @@
           <el-switch v-model="tagsView" class="drawer-switch" />
         </div>
 
+        <div class="drawer-item">
+          <span>显示页签图标</span>
+          <el-switch v-model="tagsIcon" :disabled="!tagsView" class="drawer-switch" />
+        </div>
+
         <div class="drawer-item">
           <span>固定 Header</span>
           <el-switch v-model="fixedHeader" class="drawer-switch" />
@@ -124,6 +129,17 @@ export default {
         })
       }
     },
+    tagsIcon: {
+      get() {
+        return this.$store.state.settings.tagsIcon
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'tagsIcon',
+          value: val
+        })
+      }
+    },
     sidebarLogo: {
       get() {
         return this.$store.state.settings.sidebarLogo
@@ -176,6 +192,7 @@ export default {
         `{
             "topNav":${this.topNav},
             "tagsView":${this.tagsView},
+            "tagsIcon":${this.tagsIcon},
             "fixedHeader":${this.fixedHeader},
             "sidebarLogo":${this.sidebarLogo},
             "dynamicTitle":${this.dynamicTitle},

ruoyi-fastapi-frontend/src/layout/components/TagsView/index.vue

@@ -5,14 +5,15 @@
         v-for="tag in visitedViews"
         ref="tag"
         :key="tag.path"
-        :class="isActive(tag)?'active':''"
+        :class="{ 'active': isActive(tag), 'has-icon': tagsIcon }"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
         tag="span"
         class="tags-view-item"
         :style="activeStyle(tag)"
         @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
         @contextmenu.prevent.native="openMenu(tag,$event)"
       >
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
         {{ tag.title }}
         <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
@@ -52,6 +53,9 @@ export default {
     },
     theme() {
       return this.$store.state.settings.theme;
+    },
+    tagsIcon() {
+      return this.$store.state.settings.tagsIcon
     }
   },
   watch: {
@@ -277,6 +281,11 @@ export default {
       }
     }
   }
+
+  .tags-view-item.active.has-icon::before {
+    content: none !important;
+  }
+  
   .contextmenu {
     margin: 0;
     background: #fff;

ruoyi-fastapi-frontend/src/settings.js

@@ -10,7 +10,7 @@ module.exports = {
   sideTheme: 'theme-dark',
 
   /**
-   * 是否系统布局配置
+   * 系统布局配置
    */
   showSettings: true,
 
@@ -24,6 +24,11 @@ module.exports = {
    */
   tagsView: true,
 
+  /**
+   * 显示页签图标
+   */
+  tagsIcon: false,
+
   /**
    * 是否固定头部
    */
@@ -37,13 +42,5 @@ module.exports = {
   /**
    * 是否显示动态标题
    */
-  dynamicTitle: false,
-
-  /**
-   * @type {string | array} 'production' | ['production', 'development']
-   * @description Need show err logs component.
-   * The default is only used in the production env
-   * If you want to also use it in dev, you can pass ['production', 'development']
-   */
-  errorLog: 'production'
+  dynamicTitle: false
 }

ruoyi-fastapi-frontend/src/store/modules/settings.js

@@ -1,7 +1,7 @@
 import defaultSettings from '@/settings'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
 
-const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
+const { sideTheme, showSettings, topNav, tagsView, tagsIcon, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
@@ -11,6 +11,7 @@ const state = {
   showSettings: showSettings,
   topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
   tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
+  tagsIcon: storageSetting.tagsIcon === undefined ? tagsIcon : storageSetting.tagsIcon,
   fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
   sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
   dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle