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

yudao-ui-admin/.env.demo1024

@@ -3,6 +3,9 @@ NODE_ENV = development
 # 测试环境配置
 ENV = 'staging'
 
+# 页面标题
+VUE_APP_TITLE = 芋道管理系统
+
 # 芋道管理系统/测试环境
 VUE_APP_BASE_API = 'http://127.0.0.1:48080'
 

yudao-ui-admin/.env.development

@@ -1,6 +1,9 @@
 # 开发环境配置
 ENV = 'development'
 
+# 页面标题
+VUE_APP_TITLE = 芋道管理系统
+
 # 芋道管理系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
 # VUE_APP_BASE_API = '/api'

yudao-ui-admin/.env.production

@@ -1,8 +1,12 @@
 # 生产环境配置
 ENV = 'production'
 
+# 页面标题
+VUE_APP_TITLE = 芋道管理系统
+
 # 芋道管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'
+
 # 根据服务器或域名修改
 PUBLIC_PATH = 'http://my-pi.com:8888/yudao-admin/'
 # 二级部署路径

yudao-ui-admin/.env.staging

@@ -1,5 +1,8 @@
 NODE_ENV = production
 
+# 页面标题
+VUE_APP_TITLE = 芋道管理系统
+
 # 测试环境配置
 ENV = 'staging'
 

yudao-ui-admin/package.json

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

yudao-ui-admin/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>

yudao-ui-admin/src/layout/components/Settings/index.vue

@@ -38,6 +38,11 @@
         </div>
       </div>
 
+      <div class="drawer-item">
+        <span>动态标题</span>
+        <el-switch v-model="dynamicTitle" class="drawer-switch" />
+      </div>
+
       <el-divider/>
 
       <h3 class="drawer-title">系统布局配置</h3>
@@ -129,6 +134,17 @@ export default {
         })
       }
     },
+    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 @@ export default {
             "tagsView":${this.tagsView},
             "fixedHeader":${this.fixedHeader},
             "sidebarLogo":${this.sidebarLogo},
+            "dynamicTitle":${this.dynamicTitle},
             "sideTheme":"${this.sideTheme}",
             "theme":"${this.theme}"
           }`

yudao-ui-admin/src/main.js

@@ -72,8 +72,11 @@ Vue.prototype.msgInfo = function (msg) {
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
+// 头部标签插件
+import VueMeta from 'vue-meta'
 
 Vue.use(permission)
+Vue.use(VueMeta)
 // Vue.use(hljs.vuePlugin);
 
 // bpmnProcessDesigner 需要引入

yudao-ui-admin/src/permission.js

@@ -12,6 +12,7 @@ const whiteList = ['/login', '/social-login',  '/auth-redirect', '/bind', '/regi
 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: '/' })

yudao-ui-admin/src/settings.js

@@ -1,5 +1,4 @@
 module.exports = {
-  title: '若依管理系统',
 
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
@@ -31,6 +30,11 @@ module.exports = {
    */
   sidebarLogo: true,
 
+  /**
+   * 是否显示动态标题
+   */
+  dynamicTitle: false,
+
   /**
    * @type {string | array} 'production' | ['production', 'development']
    * @description Need show err logs component.

yudao-ui-admin/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 mutations = {
 }
 
 const actions = {
+  // 修改布局设置
   changeSetting({ commit }, data) {
     commit('CHANGE_SETTING', data)
+  },
+  // 设置网页标题
+  setTitle({ commit }, title) {
+    state.title = title
   }
 }
 

yudao-ui-admin/vue.config.js

@@ -6,7 +6,7 @@ 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 // 端口