From 557672ba9f5e980646cb4a828b76711f9cc08851 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期四, 10 六月 2021 18:05:27 +0800
Subject: [PATCH] 系统布局配置支持动态标题开关
---
ruoyi-ui/src/permission.js | 1
ruoyi-ui/.env.production | 3 +
ruoyi-ui/.env.staging | 3 +
ruoyi-ui/package.json | 1
ruoyi-ui/src/settings.js | 7 ++-
ruoyi-ui/.env.development | 3 +
ruoyi-ui/src/main.js | 3 +
ruoyi-ui/src/App.vue | 10 ++++
ruoyi-ui/vue.config.js | 3 -
ruoyi-ui/src/layout/components/Settings/index.vue | 17 ++++++++
ruoyi-ui/src/store/modules/settings.js | 11 ++++-
11 files changed, 55 insertions(+), 7 deletions(-)
diff --git a/ruoyi-ui/.env.development b/ruoyi-ui/.env.development
index 0cb1c61..18b2a3e 100644
--- a/ruoyi-ui/.env.development
+++ b/ruoyi-ui/.env.development
@@ -1,3 +1,6 @@
+# 页面标题
+VUE_APP_TITLE = 若依管理系统
+
# 开发环境配置
ENV = 'development'
diff --git a/ruoyi-ui/.env.production b/ruoyi-ui/.env.production
index a8e4af3..cb064ec 100644
--- a/ruoyi-ui/.env.production
+++ b/ruoyi-ui/.env.production
@@ -1,3 +1,6 @@
+# 页面标题
+VUE_APP_TITLE = 若依管理系统
+
# 生产环境配置
ENV = 'production'
diff --git a/ruoyi-ui/.env.staging b/ruoyi-ui/.env.staging
index 41d4817..a47af9a 100644
--- a/ruoyi-ui/.env.staging
+++ b/ruoyi-ui/.env.staging
@@ -1,3 +1,6 @@
+# 页面标题
+VUE_APP_TITLE = 若依管理系统
+
NODE_ENV = production
# 测试环境配置
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index c7e888c..1e20f13 100644
--- a/ruoyi-ui/package.json
+++ b/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"
diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index 1d0634c..60325ff 100644
--- a/ruoyi-ui/src/App.vue
+++ b/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>
diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue
index efdc0fd..0a6beca 100644
--- a/ruoyi-ui/src/layout/components/Settings/index.vue
+++ b/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}"
}`
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 82f8806..0e9639d 100644
--- a/ruoyi-ui/src/main.js
+++ b/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
diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index ae0bda2..bde5293 100644
--- a/ruoyi-ui/src/permission.js
+++ b/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: '/' })
diff --git a/ruoyi-ui/src/settings.js b/ruoyi-ui/src/settings.js
index 0e74c71..059c74d 100644
--- a/ruoyi-ui/src/settings.js
+++ b/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
diff --git a/ruoyi-ui/src/store/modules/settings.js b/ruoyi-ui/src/store/modules/settings.js
index aeedaba..285c93e 100644
--- a/ruoyi-ui/src/store/modules/settings.js
+++ b/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
}
}
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index c8e87d4..f119c43 100644
--- a/ruoyi-ui/vue.config.js
+++ b/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 // 端口
--
Gitblit v1.9.2