From a0f37e443c1bfffc593983b65e332ff560cf20b5 Mon Sep 17 00:00:00 2001
From: "q.chen" <q.chen.self@outlook.com>
Date: Sat, 14 May 2022 12:36:59 +0800
Subject: [PATCH 1/2] =?UTF-8?q?add=20=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89tagVIewName=E6=8B=93=E5=B1=95,=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/navBars/tagsView/tagsView.vue |   3 +-
 src/utils/other.ts                       | 110 +++++++++++++++++++++--
 src/views/params/common/index.vue        |  19 +++-
 3 files changed, 120 insertions(+), 12 deletions(-)

diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue
index 100a071..f971a7c 100644
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@@ -19,7 +19,7 @@
 					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v)"></i>
 					<SvgIcon :name="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" class="pr5" />
 					<span>
-						{{ v.meta.title.indexOf('message') > -1 ? $t(v.meta.title) : v.query ? v.query.tagsViewName : v.params.tagsViewName }}
+						{{ other.getTitle(v) }}
 					</span>
 					<template v-if="isActive(v)">
 						<SvgIcon
@@ -582,6 +582,7 @@ export default defineComponent({
 			}
 		);
 		return {
+			other,
 			isActive,
 			onContextmenu,
 			onTagsClick,
diff --git a/src/utils/other.ts b/src/utils/other.ts
index ba22605..9398f20 100644
--- a/src/utils/other.ts
+++ b/src/utils/other.ts
@@ -6,7 +6,7 @@ import pinia from '/@/stores/index';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { i18n } from '/@/i18n/index';
-import { Local } from '/@/utils/storage';
+import { Local, Session } from '/@/utils/storage';
 import SvgIcon from '/@/components/svgIcon/index.vue';
 
 /**
@@ -29,16 +29,110 @@ export function elSvg(app: App) {
 export function useTitle() {
 	const stores = useThemeConfig(pinia);
 	const { themeConfig } = storeToRefs(stores);
+	initCustomTitle();
 	nextTick(() => {
-		let webTitle = '';
-		let globalTitle: string = themeConfig.value.globalTitle;
-		router.currentRoute.value.path === '/login'
-			? (webTitle = router.currentRoute.value.meta.title as any)
-			: (webTitle = i18n.global.t(router.currentRoute.value.meta.title as any));
-		document.title = `${webTitle} - ${globalTitle}` || globalTitle;
+		const {
+			meta: { title },
+			fullPath,
+		} = router.currentRoute.value;
+		const customPath = decodeURI(fullPath);
+		const customTitle = i18n.global.te(customPath) ? i18n.global.t(customPath) : '';
+		const globalTitle: string = themeConfig.value.globalTitle;
+		const pageTitle = i18n.global.t(title as string);
+
+		const webTitle = customTitle || pageTitle;
+
+		document.title = webTitle ? `${webTitle} - ${globalTitle}` : globalTitle;
+	});
+}
+const CUSTOM_PAGE_TITLE = 'CUSTOM_PAGE_TITLE';
+
+interface ITitleI18n {
+	[key: string]: string;
+}
+interface ITitleI18nObj {
+	[routeName: string]: ITitleI18n | string;
+}
+
+/*
+ * 初始化 自定义页面标题
+ */
+export function initCustomTitle(): void {
+	const data: ITitleI18nObj = Local.get(CUSTOM_PAGE_TITLE) || {};
+	Object.entries(data).forEach(([k, v]) => {
+		const type = typeof v;
+		if (type === 'string') {
+			const currentLocale = i18n.global.locale;
+			i18n.global.setLocaleMessage(currentLocale, {
+				...i18n.global.messages[currentLocale],
+				[k]: v,
+			});
+		} else if (type === 'object') {
+			Object.entries(v).forEach(([lang, title]) => {
+				i18n.global.setLocaleMessage(lang, {
+					...i18n.global.messages[lang],
+					[k]: title,
+				});
+			});
+		}
 	});
 }
 
+/*
+ * 设置页面标题  存放再session中.
+ * @param title 支持string 和 国际化语言 对应kv值
+ * @param routeName 路由名称 可选 不传使用当前路由fullPath
+ * @example  setTitle('页面标题')  || setTitle({'zh-cn':'页面标题', 'en':'page title'})
+ */
+export function setTitle(title: ITitleI18n | string, path?: string): void {
+	let { fullPath: key } = router.currentRoute.value;
+	key = decodeURI(path || key);
+	const data: ITitleI18nObj = Session.get(CUSTOM_PAGE_TITLE) || {};
+	const type = typeof title;
+
+	if (type === 'string') {
+		const currentLocale = i18n.global.locale;
+		i18n.global.setLocaleMessage(currentLocale, {
+			...i18n.global.messages[currentLocale],
+			[key]: title,
+		});
+	} else if (type === 'object') {
+		Object.entries(title).map(([k, v]) => {
+			i18n.global.setLocaleMessage(k, {
+				...i18n.global.messages[k],
+				[key]: v,
+			});
+		});
+	}
+	data[key] = title;
+	Local.set(CUSTOM_PAGE_TITLE, data);
+}
+
+/*
+ * 获取页面标题
+ * @param route  路由对象
+ */
+export function getTitle(route: any): string {
+	// v.meta.title.indexOf('message') > -1 ? $t(v.meta.title) : v.query ? v.query.tagsViewName : v.params.tagsViewName;
+	const {
+		path,
+		query,
+		meta: { title },
+	} = route;
+	let key = path;
+	if (query) {
+		let res: string = '';
+		Object.entries(query).map(([k, v]) => {
+			res += `${k}=${v}&`;
+		});
+		res = res.replace(/&$/, '');
+		key += res ? `?${res}` : '';
+	}
+
+	const customTitle = i18n.global.te(key) ? i18n.global.t(key) : '';
+	return customTitle || i18n.global.t(title);
+}
+
 /**
  * 图片懒加载
  * @param el dom 目标元素
@@ -163,6 +257,8 @@ const other = {
 	handleEmpty: (list: any) => {
 		return handleEmpty(list);
 	},
+	setTitle,
+	getTitle,
 };
 
 // 统一批量导出
diff --git a/src/views/params/common/index.vue b/src/views/params/common/index.vue
index 48fb4de..dc28206 100644
--- a/src/views/params/common/index.vue
+++ b/src/views/params/common/index.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, defineComponent } from 'vue';
+import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
-
+import { setTitle } from '/@/utils/other';
 export default defineComponent({
 	name: 'paramsCommon',
 	setup() {
@@ -31,7 +31,7 @@ export default defineComponent({
 		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const state = reactive({
 			value: '',
-			tagsViewName: null,
+			tagsViewName: '',
 		});
 		const router = useRouter();
 		// 设置 view 的高度
@@ -50,12 +50,23 @@ export default defineComponent({
 		 * 传不同的 tagsViewName 值
 		 */
 		const onGoDetailsClick = () => {
+			setTitle(state.tagsViewName, `/params/common/details?id=${state.value}`);
 			router.push({
 				path: '/params/common/details',
-				query: { id: state.value, tagsViewName: state.tagsViewName },
+				query: { id: state.value },
 			});
 			state.value = '';
 		};
+
+		// ! 也可以在页面onMounted中设置. 因为有些自定义tagViewName 是在页面获取数据后才配置的.所以将setTitle 独立出来
+		// onMounted(() => {
+		// 	// setTitle('测试用');
+		// 	setTitle({
+		// 		'zh-cn': '测试用',
+		// 		'zh-tw': '測試用',
+		// 		en: 'test page',
+		// 	});
+		// });
 		return {
 			setViewHeight,
 			onGoDetailsClick,
-- 
Gitee


From 15c0e906674e359d01d922d240c0b3a069154f62 Mon Sep 17 00:00:00 2001
From: "q.chen" <q.chen.self@outlook.com>
Date: Tue, 17 May 2022 13:01:47 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix=20session=20=E6=94=B9=20local?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/other.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/other.ts b/src/utils/other.ts
index 9398f20..0abe652 100644
--- a/src/utils/other.ts
+++ b/src/utils/other.ts
@@ -6,7 +6,7 @@ import pinia from '/@/stores/index';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { i18n } from '/@/i18n/index';
-import { Local, Session } from '/@/utils/storage';
+import { Local } from '/@/utils/storage';
 import SvgIcon from '/@/components/svgIcon/index.vue';
 
 /**
@@ -79,7 +79,7 @@ export function initCustomTitle(): void {
 }
 
 /*
- * 设置页面标题  存放再session中.
+ * 设置页面标题  存放再Local中.
  * @param title 支持string 和 国际化语言 对应kv值
  * @param routeName 路由名称 可选 不传使用当前路由fullPath
  * @example  setTitle('页面标题')  || setTitle({'zh-cn':'页面标题', 'en':'page title'})
@@ -87,7 +87,7 @@ export function initCustomTitle(): void {
 export function setTitle(title: ITitleI18n | string, path?: string): void {
 	let { fullPath: key } = router.currentRoute.value;
 	key = decodeURI(path || key);
-	const data: ITitleI18nObj = Session.get(CUSTOM_PAGE_TITLE) || {};
+	const data: ITitleI18nObj = Local.get(CUSTOM_PAGE_TITLE) || {};
 	const type = typeof title;
 
 	if (type === 'string') {
-- 
Gitee