添加页签图标显示开关功能

RuoYi

2025-05-23 cd0ee95b9cc17be973530271f6a578952778fdb4

添加页签图标显示开关功能

 ruoyi-ui/src/layout/components/Settings/index.vue

@@ -50,6 +50,11 @@
        </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" />

        </div>

@@ -124,6 +129,17 @@
        })

      }

    },

    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 @@
        `{

            "topNav":${this.topNav},

            "tagsView":${this.tagsView},

            "tagsIcon":${this.tagsIcon},

            "fixedHeader":${this.fixedHeader},

            "sidebarLogo":${this.sidebarLogo},

            "dynamicTitle":${this.dynamicTitle},


 ruoyi-ui/src/layout/components/TagsView/index.vue

@@ -5,7 +5,7 @@
        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"

@@ -13,6 +13,7 @@
        @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 @@
    },

    theme() {

      return this.$store.state.settings.theme

    },

    tagsIcon() {

      return this.$store.state.settings.tagsIcon

    }

  },

  watch: {

@@ -277,6 +281,11 @@
      }

    }

  }



  .tags-view-item.active.has-icon::before {

    content: none !important;

  }



  .contextmenu {

    margin: 0;

    background: #fff;


 ruoyi-ui/src/settings.js

@@ -10,7 +10,7 @@
  sideTheme: 'theme-dark',



  /**

   * 是否系统布局配置

   * 系统布局配置

   */

  showSettings: true,



@@ -23,6 +23,11 @@
   * 是否显示 tagsView

   */

  tagsView: true,

  
  /**

   * 显示页签图标

   */

  tagsIcon: false,



  /**

   * 是否固定头部

@@ -37,13 +42,5 @@
  /**

   * 是否显示动态标题

   */

  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-ui/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 @@
  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