系统布局配置支持动态标题开关

RuoYi

2021-06-10 557672ba9f5e980646cb4a828b76711f9cc08851

系统布局配置支持动态标题开关

 ruoyi-ui/.env.development

@@ -1,3 +1,6 @@
# 页面标题

VUE_APP_TITLE = 若依管理系统



# 开发环境配置

ENV = 'development'




 ruoyi-ui/.env.production

@@ -1,3 +1,6 @@
# 页面标题

VUE_APP_TITLE = 若依管理系统



# 生产环境配置

ENV = 'production'




 ruoyi-ui/.env.staging

@@ -1,3 +1,6 @@
# 页面标题

VUE_APP_TITLE = 若依管理系统



NODE_ENV = production



# 测试环境配置


 ruoyi-ui/package.json

@@ -55,6 +55,7 @@
    "vue": "2.6.12",

    "vue-count-to": "1.0.13",

    "vue-cropper": "0.5.5",

    "vue-meta": "^2.4.0",

    "vue-router": "3.4.9",

    "vuedraggable": "2.24.3",

    "vuex": "3.6.0"


 ruoyi-ui/src/App.vue

@@ -6,6 +6,14 @@


<script>

export default  {

  name:  'App'

  name:  'App',

    metaInfo() {

        return {

            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,

            titleTemplate: title => {

                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE

            }

        }

    }

}

</script>


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

@@ -62,6 +62,11 @@
        <el-switch v-model="sidebarLogo" class="drawer-switch" />

      </div>



      <div class="drawer-item">

        <span>动态标题</span>

        <el-switch v-model="dynamicTitle" class="drawer-switch" />

      </div>



      <el-divider/>



      <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>

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

      }

    },

    dynamicTitle: {

      get() {

        return this.$store.state.settings.dynamicTitle

      },

      set(val) {

        this.$store.dispatch('settings/changeSetting', {

          key: 'dynamicTitle',

          value: val

        })

      }

    },

  },

  methods: {

    themeChange(val) {

@@ -160,6 +176,7 @@
            "tagsView":${this.tagsView},

            "fixedHeader":${this.fixedHeader},

            "sidebarLogo":${this.sidebarLogo},

            "dynamicTitle":${this.dynamicTitle},

            "sideTheme":"${this.sideTheme}",

            "theme":"${this.theme}"

          }`


 ruoyi-ui/src/main.js

@@ -20,6 +20,8 @@
import Pagination from "@/components/Pagination";

// 自定义表格工具扩展

import RightToolbar from "@/components/RightToolbar"

// 头部标签插件

import VueMeta from 'vue-meta'



// 全局方法挂载

Vue.prototype.getDicts = getDicts

@@ -49,6 +51,7 @@
Vue.component('RightToolbar', RightToolbar)



Vue.use(permission)

Vue.use(VueMeta)



/**

 * If you don't want to use mock-server


 ruoyi-ui/src/permission.js

@@ -12,6 +12,7 @@
router.beforeEach((to, from, next) => {

  NProgress.start()

  if (getToken()) {

    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)

    /* has token*/

    if (to.path === '/login') {

      next({ path: '/' })


 ruoyi-ui/src/settings.js

@@ -1,6 +1,4 @@
module.exports = {

  title: '若依管理系统',



  /**

   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light

   */

@@ -32,6 +30,11 @@
  sidebarLogo: true,



  /**

   * 是否显示动态标题

   */

  dynamicTitle: false,



  /**

   * @type {string | array} 'production' | ['production', 'development']

   * @description Need show err logs component.

   * The default is only used in the production env


 ruoyi-ui/src/store/modules/settings.js

@@ -1,17 +1,19 @@
import variables from '@/assets/styles/element-variables.scss'

import defaultSettings from '@/settings'



const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo } = defaultSettings

const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings



const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''

const state = {

  title: '',

  theme: storageSetting.theme || variables.theme,

  sideTheme: storageSetting.sideTheme || sideTheme,

  showSettings: showSettings,

  topNav:  storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,

  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,

  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo

  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,

  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle

}

const mutations = {

  CHANGE_SETTING: (state, { key, value }) => {

@@ -22,8 +24,13 @@
}



const actions = {

  // 修改布局设置

  changeSetting({ commit }, data) {

    commit('CHANGE_SETTING', data)

  },

  // 设置网页标题

  setTitle({ commit }, title) {

    state.title = title

  }

}




 ruoyi-ui/vue.config.js

@@ -1,12 +1,11 @@
'use strict'

const path = require('path')

const defaultSettings = require('./src/settings.js')



function resolve(dir) {

  return path.join(__dirname, dir)

}



const name = defaultSettings.title || '若依管理系统' // 标题

const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题



const port = process.env.port || process.env.npm_config_port || 80 // 端口