'admin-21.04.01:新增国际化语言切换、修复keepAlive刷新界面数据不重新初始化的问题等诸多优化'

README.md

@@ -124,7 +124,7 @@ cnpm run build
 特别感谢群里老哥的建议、指导与帮忙，谢谢！
 
 - <a href="https://gitee.com/sz6/sa-plus" target="_blank">@省长</a>
-- @唐参
+- <a href="https://gitee.com/jskz/Jskz-SpringCloud" target="_blank">@唐参
 - <a href="https://gitee.com/chuange" target="_blank">@川歌</a>
 
 #### 其他事项

package.json

@@ -7,14 +7,14 @@
 		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
 	},
 	"dependencies": {
-		"@antv/g6": "^4.2.3",
+		"@antv/g6": "^4.2.5",
 		"axios": "^0.21.1",
 		"clipboard": "^2.0.8",
 		"countup.js": "^2.0.7",
 		"cropperjs": "^1.5.11",
 		"echarts": "^5.0.2",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.35",
+		"element-plus": "^1.0.2-beta.36",
 		"mitt": "^2.1.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -22,28 +22,29 @@
 		"screenfull": "^5.1.0",
 		"sortablejs": "^1.13.0",
 		"vue": "^3.0.5",
+		"vue-i18n": "^9.0.0",
 		"vue-router": "^4.0.2",
 		"vuex": "^4.0.0-rc.2",
-		"wangeditor": "^4.6.10"
+		"wangeditor": "^4.6.12"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^14.14.35",
+		"@types/node": "^14.14.37",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.6",
-		"@typescript-eslint/eslint-plugin": "^4.19.0",
-		"@typescript-eslint/parser": "^4.19.0",
-		"@vitejs/plugin-vue": "^1.1.5",
-		"@vue/compiler-sfc": "^3.0.7",
+		"@typescript-eslint/eslint-plugin": "^4.20.0",
+		"@typescript-eslint/parser": "^4.20.0",
+		"@vitejs/plugin-vue": "^1.2.1",
+		"@vue/compiler-sfc": "^3.0.10",
 		"dotenv": "^8.2.0",
-		"eslint": "^7.22.0",
+		"eslint": "^7.23.0",
 		"eslint-plugin-vue": "^7.8.0",
 		"prettier": "^2.2.1",
 		"sass": "^1.32.8",
 		"sass-loader": "^11.0.1",
 		"typescript": "^4.2.3",
-		"vite": "^2.1.2",
+		"vite": "^2.1.5",
 		"vue-eslint-parser": "^7.6.0"
 	}
 }

public/loading.css

@@ -1 +1 @@
-.loading-next{width:100%;height:100%;}.loading-next .loading-next-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.loading-next-box .loading-next-animation{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;}.loading-next-animation .loading-next-animation-box{display:block;font-size:0;color:#fff;position:relative;width:64px;height:64px;}.loading-next-animation-box > div:nth-child(1){top:-25%;z-index:1;height:100%;border-radius:10%;animation:loading-animation 0.6s -0.1s linear infinite;background-color:#409eff;}@keyframes loading-animation{15%{border-bottom-right-radius:10%;}25%{transform:translateY(25%) rotate(22.5deg);}50%{border-bottom-right-radius:100%;transform:translateY(50%) scale(1,0.9) rotate(45deg);}75%{transform:translateY(25%) rotate(67.5deg);}100%{transform:translateY(0) rotate(90deg);}}.loading-next-animation-box > div:nth-child(2){height:10%;background:#000;border-radius:50%;opacity:0.2;animation:loading-next-animation-shadow 0.6s -0.1s linear infinite;position:absolute;left:0;width:100%;bottom:-40%;}@keyframes loading-next-animation-shadow{50%{transform:scale(1.25,1);}}
+.loading-next{width:100%;height:100%}.loading-next .loading-next-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-next .loading-next-box-warp{width:80px;height:80px}.loading-next .loading-next-box-warp .loading-next-box-item{width:33.333333%;height:33.333333%;background-color:#409eff;float:left;animation:loading-next-animation 1.2s infinite ease;border-radius:1px}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7){animation-delay:0s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8){animation-delay:.1s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9){animation-delay:.2s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6){animation-delay:.3s}.loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3){animation-delay:.4s}@keyframes loading-next-animation{0%,70%,100%{transform:scale3D(1,1,1)}35%{transform:scale3D(0,0,1)}}

src/App.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script lang="ts">
-import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
+import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { useStore } from '/@/store/index.ts';
 import { getLocal } from '/@/utils/storage.ts';
 import setIntroduction from '/@/utils/setIconfont.ts';
@@ -15,8 +17,10 @@ export default defineComponent({
 	name: 'app',
 	components: { LockScreen, Setings },
 	setup() {
+		const { t } = useI18n();
 		const { proxy } = getCurrentInstance() as any;
 		const setingsRef = ref();
+		const route = useRoute();
 		const store = useStore();
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
@@ -51,6 +55,17 @@ export default defineComponent({
 		onUnmounted(() => {
 			proxy.mittBus.off('openSetingsDrawer', () => {});
 		});
+		// 监听路由的变化，设置网站标题
+		watch(
+			() => route.path,
+			() => {
+				nextTick(() => {
+					let webTitle = '';
+					route.path === '/login' ? (webTitle = route.meta.title) : (webTitle = t(route.meta.title));
+					document.title = `${webTitle} - ${getThemeConfig.value.globalTitle}` || getThemeConfig.value.globalTitle;
+				});
+			}
+		);
 		return {
 			setingsRef,
 			getThemeConfig,

src/i18n/index.ts

@@ -0,0 +1,56 @@
+import { createI18n } from 'vue-i18n';
+import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
+import enLocale from 'element-plus/lib/locale/lang/en';
+import zhtwLocale from 'element-plus/lib/locale/lang/zh-tw';
+import { store } from '/@/store/index.ts';
+
+import nextZhcn from '/@/i18n/lang/zh-cn.ts';
+import nextEn from '/@/i18n/lang/en.ts';
+import nextZhtw from '/@/i18n/lang/zh-tw.ts';
+
+import pagesHomeZhcn from '/@/i18n/pages/home/zh-cn.ts';
+import pagesHomeEn from '/@/i18n/pages/home/en.ts';
+import pagesHomeZhtw from '/@/i18n/pages/home/zh-tw.ts';
+import pagesLoginZhcn from '/@/i18n/pages/login/zh-cn.ts';
+import pagesLoginEn from '/@/i18n/pages/login/en.ts';
+import pagesLoginZhtw from '/@/i18n/pages/login/zh-tw.ts';
+
+// 定义语言国际化内容
+/**
+ * 说明：
+ * /src/i18n/lang 下的 ts 为框架的国际化内容
+ * /src/i18n/pages 下的 ts 为各界面的国际化内容
+ */
+const messages = {
+	[zhcnLocale.name]: {
+		el: zhcnLocale.el,
+		message: {
+			...nextZhcn,
+			...pagesHomeZhcn,
+			...pagesLoginZhcn,
+		},
+	},
+	[enLocale.name]: {
+		el: enLocale.el,
+		message: {
+			...nextEn,
+			...pagesHomeEn,
+			...pagesLoginEn,
+		},
+	},
+	[zhtwLocale.name]: {
+		el: zhtwLocale.el,
+		message: {
+			...nextZhtw,
+			...pagesHomeZhtw,
+			...pagesLoginZhtw,
+		},
+	},
+};
+
+// 导出语言国际化
+export const i18n = createI18n({
+	locale: store.state.themeConfig.themeConfig.globalI18n,
+	fallbackLocale: zhcnLocale.name,
+	messages,
+});

src/i18n/lang/en.ts

@@ -0,0 +1,140 @@
+// 定义内容
+export default {
+	router: {
+		home: 'home',
+		system: 'system',
+		systemMenu: 'systemMenu',
+		systemUser: 'systemUser',
+		limits: 'limits',
+		limitsFrontEnd: 'FrontEnd',
+		limitsFrontEndPage: 'FrontEndPage',
+		limitsFrontEndBtn: 'FrontEndBtn',
+		limitsBackEnd: 'BackEnd',
+		limitsBackEndEndPage: 'BackEndEndPage',
+		menu: 'menu',
+		menu1: 'menu1',
+		menu11: 'menu11',
+		menu12: 'menu12',
+		menu121: 'menu121',
+		menu122: 'menu122',
+		menu13: 'menu13',
+		menu2: 'menu2',
+		funIndex: 'function',
+		funTagsView: 'funTagsView',
+		funCountup: 'countup',
+		funEchartsTree: 'echartsTree',
+		funSelector: 'funSelector',
+		funWangEditor: 'wangEditor',
+		funCropper: 'cropper',
+		funMindMap: 'G6 MindMap',
+		funQrcode: 'qrcode',
+		funEchartsMap: 'EchartsMap',
+		funPrintJs: 'PrintJs',
+		funClipboard: 'Copy cut',
+		pagesIndex: 'pages',
+		pagesFiltering: 'Filtering',
+		pagesFilteringDetails: 'FilteringDetails',
+		pagesFilteringDetails1: 'FilteringDetails1',
+		pagesIocnfont: 'iconfont icon',
+		pagesElement: 'element icon',
+		pagesAwesome: 'awesome icon',
+		pagesCityLinkage: 'CityLinkage',
+		pagesFormAdapt: 'FormAdapt',
+		pagesListAdapt: 'ListAdapt',
+		pagesWaterfall: 'Waterfall',
+		pagesSteps: 'Steps',
+		chartIndex: 'chartIndex',
+		personal: 'personal',
+		tools: 'tools',
+		layoutLinkView: 'LinkView',
+		layoutIfameView: 'IfameView',
+	},
+	user: {
+		title1: 'Language switching',
+		title2: 'Menu search',
+		title3: 'Layout configuration',
+		title4: 'news',
+		title5: 'Full screen on',
+		title6: 'Full screen off',
+		dropdown1: 'home page',
+		dropdown2: 'Personal Center',
+		dropdown3: '404',
+		dropdown4: '401',
+		dropdown5: 'Log out',
+		searchPlaceholder: 'Menu search: support Chinese, routing path',
+		newTitle: 'notice',
+		newBtn: 'All read',
+		newGo: 'Go to the notification center',
+		newDesc: 'No notice',
+		logOutTitle: 'Tips',
+		logOutMessage: 'This operation will log out. Do you want to continue?',
+		logOutConfirm: 'determine',
+		logOutCancel: 'cancel',
+		logOutExit: 'Exiting',
+		logOutSuccess: 'Exit successfully!',
+	},
+	tagsView: {
+		refresh: 'refresh',
+		close: 'close',
+		closeOther: 'closeOther',
+		closeAll: 'closeAll',
+		fullscreen: 'fullscreen',
+	},
+	notFound: {
+		foundTitle: 'Wrong address input, please re-enter the address~',
+		foundMsg: 'You can check the web address first, and then re-enter or give us feedback.',
+		foundBtn: 'Back to home page',
+	},
+	noAccess: {
+		accessTitle: 'You are not authorized to operate~',
+		accessMsg: 'Contact information: add QQ group discussion 665452019',
+		accessBtn: 'Reauthorization',
+	},
+	layout: {
+		configTitle: 'Layout configuration',
+		oneTitle: 'Global Themes',
+		twoTitle: 'Menu / top bar',
+		twoTopBar: 'Top bar background',
+		twoMenuBar: 'Menu background',
+		twoColumnsMenuBar: 'Column menu background',
+		twoTopBarColor: 'Top bar default font color',
+		twoMenuBarColor: 'Menu default font color',
+		twoColumnsMenuBarColor: 'Default font color bar menu',
+		twoIsTopBarColorGradual: 'Top bar gradient',
+		twoIsMenuBarColorGradual: 'Menu gradient',
+		twoIsMenuBarColorHighlight: 'Menu font highlight',
+		threeTitle: 'Interface settings',
+		threeIsCollapse: 'Menu horizontal collapse',
+		threeIsUniqueOpened: 'Menu accordion',
+		threeIsFixedHeader: 'Fixed header',
+		threeIsClassicSplitMenu: 'Classic layout split menu',
+		threeIsLockScreen: 'Open the lock screen',
+		threeLockScreenTime: 'screen locking(s/s)',
+		fourTitle: 'Interface display',
+		fourIsShowLogo: 'Sidebar logo',
+		fourIsBreadcrumb: 'Open breadcrumb',
+		fourIsBreadcrumbIcon: 'Open breadcrumb icon',
+		fourIsTagsview: 'Open tagsview',
+		fourIsTagsviewIcon: 'Open tagsview Icon',
+		fourIsCacheTagsView: 'Enable tagsview cache',
+		fourIsSortableTagsView: 'Enable tagsview drag',
+		fourIsFooter: 'Open footer',
+		fourIsGrayscale: 'Grey model',
+		fourIsInvert: 'Color weak mode',
+		fourIsWartermark: 'Turn on watermark',
+		fourWartermarkText: 'Watermark copy',
+		fiveTitle: 'Other settings',
+		fiveTagsStyle: 'Tagsview style',
+		fiveAnimation: 'page animation',
+		fiveColumnsAsideStyle: 'Column style',
+		sixTitle: 'Layout switch',
+		sixDefaults: 'One',
+		sixClassic: 'Two',
+		sixTransverse: 'Three',
+		sixColumns: 'Four',
+		tipText: 'Click the button below to copy the layout configuration to `/src/store/modules/themeConfig.ts` It has been modified in.',
+		copyText: 'replication configuration',
+		copyTextSuccess: 'Copy succeeded!',
+		copyTextError: 'Copy failed!',
+	},
+};

src/i18n/lang/zh-cn.ts

@@ -0,0 +1,140 @@
+// 定义内容
+export default {
+	router: {
+		home: '首页',
+		system: '系统设置',
+		systemMenu: '菜单管理',
+		systemUser: '用户管理',
+		limits: '权限管理',
+		limitsFrontEnd: '前端控制',
+		limitsFrontEndPage: '页面权限',
+		limitsFrontEndBtn: '按钮权限',
+		limitsBackEnd: '后端控制',
+		limitsBackEndEndPage: '页面权限',
+		menu: '菜单嵌套',
+		menu1: '菜单1',
+		menu11: '菜单11',
+		menu12: '菜单12',
+		menu121: '菜单121',
+		menu122: '菜单121',
+		menu13: '菜单13',
+		menu2: '菜单121',
+		funIndex: '功能',
+		funTagsView: 'tagsView 操作',
+		funCountup: 'countup 数字滚动',
+		funEchartsTree: 'echartsTree 树图',
+		funSelector: '图标选择器',
+		funWangEditor: 'wangEditor 编辑器',
+		funCropper: 'cropper 图片裁剪',
+		funMindMap: 'G6 思维导图',
+		funQrcode: 'qrcode 二维码生成',
+		funEchartsMap: '地理坐标/地图',
+		funPrintJs: '页面打印',
+		funClipboard: '复制剪切',
+		pagesIndex: '页面',
+		pagesFiltering: '过滤筛选组件',
+		pagesFilteringDetails: '过滤筛选组件详情',
+		pagesFilteringDetails1: '过滤筛选组件详情111',
+		pagesIocnfont: 'iconfont 字体图标',
+		pagesElement: 'element 字体图标',
+		pagesAwesome: 'awesome 字体图标',
+		pagesCityLinkage: '城市多级联动',
+		pagesFormAdapt: '表单自适应',
+		pagesListAdapt: '列表自适应',
+		pagesWaterfall: '瀑布屏',
+		pagesSteps: '步骤条',
+		chartIndex: '大数据图表',
+		personal: '个人中心',
+		tools: '工具类集合',
+		layoutLinkView: '外链',
+		layoutIfameView: '内嵌 iframe',
+	},
+	user: {
+		title1: '语言切换',
+		title2: '菜单搜索',
+		title3: '布局配置',
+		title4: '消息',
+		title5: '开全屏',
+		title6: '关全屏',
+		dropdown1: '首页',
+		dropdown2: '个人中心',
+		dropdown3: '404',
+		dropdown4: '401',
+		dropdown5: '退出登录',
+		searchPlaceholder: '菜单搜索：支持中文、路由路径',
+		newTitle: '通知',
+		newBtn: '全部已读',
+		newGo: '前往通知中心',
+		newDesc: '暂无通知',
+		logOutTitle: '提示',
+		logOutMessage: '此操作将退出登录, 是否继续?',
+		logOutConfirm: '确定',
+		logOutCancel: '取消',
+		logOutExit: '退出中',
+		logOutSuccess: '安全退出成功！',
+	},
+	tagsView: {
+		refresh: '刷新',
+		close: '关闭',
+		closeOther: '关闭其它',
+		closeAll: '全部关闭',
+		fullscreen: '当前页全屏',
+	},
+	notFound: {
+		foundTitle: '地址输入错误，请重新输入地址~',
+		foundMsg: '您可以先检查网址，然后重新输入或给我们反馈问题。',
+		foundBtn: '返回首页',
+	},
+	noAccess: {
+		accessTitle: '您未被授权，没有操作权限~',
+		accessMsg: '联系方式：加QQ群探讨 665452019',
+		accessBtn: '重新授权',
+	},
+	layout: {
+		configTitle: '布局配置',
+		oneTitle: '全局主题',
+		twoTitle: '菜单 / 顶栏',
+		twoTopBar: '顶栏背景',
+		twoMenuBar: '菜单背景',
+		twoColumnsMenuBar: '分栏菜单背景',
+		twoTopBarColor: '顶栏默认字体颜色',
+		twoMenuBarColor: '菜单默认字体颜色',
+		twoColumnsMenuBarColor: '分栏菜单默认字体颜色',
+		twoIsTopBarColorGradual: '顶栏背景渐变',
+		twoIsMenuBarColorGradual: '菜单背景渐变',
+		twoIsMenuBarColorHighlight: '菜单字体背景高亮',
+		threeTitle: '界面设置',
+		threeIsCollapse: '菜单水平折叠',
+		threeIsUniqueOpened: '菜单手风琴',
+		threeIsFixedHeader: '固定 Header',
+		threeIsClassicSplitMenu: '经典布局分割菜单',
+		threeIsLockScreen: '开启锁屏',
+		threeLockScreenTime: '自动锁屏(s/秒)',
+		fourTitle: '界面显示',
+		fourIsShowLogo: '侧边栏 Logo',
+		fourIsBreadcrumb: '开启 Breadcrumb',
+		fourIsBreadcrumbIcon: '开启 Breadcrumb 图标',
+		fourIsTagsview: '开启 Tagsview',
+		fourIsTagsviewIcon: '开启 Tagsview 图标',
+		fourIsCacheTagsView: '开启 TagsView 缓存',
+		fourIsSortableTagsView: '开启 TagsView 拖拽',
+		fourIsFooter: '开启 Footer',
+		fourIsGrayscale: '灰色模式',
+		fourIsInvert: '色弱模式',
+		fourIsWartermark: '开启水印',
+		fourWartermarkText: '水印文案',
+		fiveTitle: '其它设置',
+		fiveTagsStyle: 'Tagsview 风格',
+		fiveAnimation: '主页面切换动画',
+		fiveColumnsAsideStyle: '分栏高亮风格',
+		sixTitle: '布局切换',
+		sixDefaults: '默认',
+		sixClassic: '经典',
+		sixTransverse: '横向',
+		sixColumns: '分栏',
+		tipText: '点击下方按钮，复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。',
+		copyText: '一键复制配置',
+		copyTextSuccess: '复制成功！',
+		copyTextError: '复制失败！',
+	},
+};

src/i18n/lang/zh-tw.ts

@@ -0,0 +1,140 @@
+// 定义内容
+export default {
+	router: {
+		home: '首頁',
+		system: '系統設置',
+		systemMenu: '選單管理',
+		systemUser: '用戶管理',
+		limits: '許可權管理',
+		limitsFrontEnd: '前端控制',
+		limitsFrontEndPage: '頁面許可權',
+		limitsFrontEndBtn: '按鈕許可權',
+		limitsBackEnd: '後端控制',
+		limitsBackEndEndPage: '頁面許可權',
+		menu: '選單嵌套',
+		menu1: '選單1',
+		menu11: '選單11',
+		menu12: '選單12',
+		menu121: '選單121',
+		menu122: '選單121',
+		menu13: '選單13',
+		menu2: '選單121',
+		funIndex: '功能',
+		funTagsView: 'tagsView 操作',
+		funCountup: 'countup 數位滾動',
+		funEchartsTree: 'echartsTree 樹圖',
+		funSelector: '圖標選擇器',
+		funWangEditor: 'wangEditor 編輯器',
+		funCropper: 'cropper 圖片裁剪',
+		funMindMap: 'G6 心智圖',
+		funQrcode: 'qrcode 二維碼生成',
+		funEchartsMap: '地理座標/地圖',
+		funPrintJs: '頁面列印',
+		funClipboard: '複製剪切',
+		pagesIndex: '頁面',
+		pagesFiltering: '過濾篩選組件',
+		pagesFilteringDetails: '過濾篩選組件詳情',
+		pagesFilteringDetails1: '過濾篩選組件詳情111',
+		pagesIocnfont: 'iconfont 字體圖標',
+		pagesElement: 'element 字體圖標',
+		pagesAwesome: 'awesome 字體圖標',
+		pagesCityLinkage: '都市多級聯動',
+		pagesFormAdapt: '表單自我調整',
+		pagesListAdapt: '清單自我調整',
+		pagesWaterfall: '瀑布屏',
+		pagesSteps: '步驟條',
+		chartIndex: '大資料圖表',
+		personal: '個人中心',
+		tools: '工具類集合',
+		layoutLinkView: '外鏈',
+		layoutIfameView: '内嵌 iframe',
+	},
+	user: {
+		title1: '語言切換',
+		title2: '選單蒐索',
+		title3: '佈局配寘',
+		title4: '消息',
+		title5: '開全屏',
+		title6: '關全屏',
+		dropdown1: '首頁',
+		dropdown2: '個人中心',
+		dropdown3: '404',
+		dropdown4: '401',
+		dropdown5: '登出',
+		searchPlaceholder: '選單蒐索：支援中文、路由路徑',
+		newTitle: '通知',
+		newBtn: '全部已讀',
+		newGo: '前往通知中心',
+		newDesc: '暫無通知',
+		logOutTitle: '提示',
+		logOutMessage: '此操作將登出，是否繼續？',
+		logOutConfirm: '確定',
+		logOutCancel: '取消',
+		logOutExit: '退出中',
+		logOutSuccess: '安全退出成功！',
+	},
+	tagsView: {
+		refresh: '重繪',
+		close: '關閉',
+		closeOther: '關閉其它',
+		closeAll: '全部關閉',
+		fullscreen: '當前頁全屏',
+	},
+	notFound: {
+		foundTitle: '地址輸入錯誤，請重新輸入地址~',
+		foundMsg: '您可以先檢查網址，然後重新輸入或給我們迴響問題。',
+		foundBtn: '返回首頁',
+	},
+	noAccess: {
+		accessTitle: '您未被授權，沒有操作許可權~',
+		accessMsg: '聯繫方式：加QQ群探討665452019',
+		accessBtn: '重新授權',
+	},
+	layout: {
+		configTitle: '佈局配寘',
+		oneTitle: '全域主題',
+		twoTitle: '選單 / 頂欄',
+		twoTopBar: '頂欄背景',
+		twoMenuBar: '選單背景',
+		twoColumnsMenuBar: '分欄選單背景',
+		twoTopBarColor: '頂欄默認字體顏色',
+		twoMenuBarColor: '選單默認字體顏色',
+		twoColumnsMenuBarColor: '分欄選單默認字體顏色',
+		twoIsTopBarColorGradual: '頂欄背景漸變',
+		twoIsMenuBarColorGradual: '選單背景漸變',
+		twoIsMenuBarColorHighlight: '選單字體背景高亮',
+		threeTitle: '介面設定',
+		threeIsCollapse: '選單水准折疊',
+		threeIsUniqueOpened: '選單手風琴',
+		threeIsFixedHeader: '固定 Header',
+		threeIsClassicSplitMenu: '經典佈局分割選單',
+		threeIsLockScreen: '開啟鎖屏',
+		threeLockScreenTime: '自動鎖屏(s/秒)',
+		fourTitle: '介面顯示',
+		fourIsShowLogo: '側邊欄 Logo',
+		fourIsBreadcrumb: '開啟 Breadcrumb',
+		fourIsBreadcrumbIcon: '開啟 Breadcrumb 圖標',
+		fourIsTagsview: '開啟 Tagsview',
+		fourIsTagsviewIcon: '開啟 Tagsview 圖標',
+		fourIsCacheTagsView: '開啟 TagsView 緩存',
+		fourIsSortableTagsView: '開啟 TagsView 拖拽',
+		fourIsFooter: '開啟 Footer',
+		fourIsGrayscale: '灰色模式',
+		fourIsInvert: '色弱模式',
+		fourIsWartermark: '開啟浮水印',
+		fourWartermarkText: '浮水印文案',
+		fiveTitle: '其它設定',
+		fiveTagsStyle: 'Tagsview 風格',
+		fiveAnimation: '主頁面切換動畫',
+		fiveColumnsAsideStyle: '分欄高亮風格',
+		sixTitle: '佈局切換',
+		sixDefaults: '默認',
+		sixClassic: '經典',
+		sixTransverse: '橫向',
+		sixColumns: '分欄',
+		tipText: '點擊下方按鈕，複製佈局配寘去`src/store/modules/themeConfig.ts`中修改。',
+		copyText: '一鍵複製配寘',
+		copyTextSuccess: '複製成功！',
+		copyTextError: '複製失敗！',
+	},
+};

src/i18n/pages/home/en.ts

@@ -0,0 +1,15 @@
+// 定义内容
+export default {
+	card: {
+		title1: 'Commodity sales',
+		title2: 'environmental monitoring',
+		title3: 'Early warning information',
+		title4: 'dynamic information',
+		title5: 'Performance overtime warning',
+	},
+	table: {
+		th1: 'time',
+		th2: 'Laboratory name',
+		th3: 'Alarm content',
+	},
+};

src/i18n/pages/home/zh-cn.ts

@@ -0,0 +1,15 @@
+// 定义内容
+export default {
+	card: {
+		title1: '商品销售情况',
+		title2: '环境监测',
+		title3: '预警信息',
+		title4: '动态信息',
+		title5: '履约超时预警',
+	},
+	table: {
+		th1: '时间',
+		th2: '实验室名称',
+		th3: '报警内容',
+	},
+};

src/i18n/pages/home/zh-tw.ts

@@ -0,0 +1,15 @@
+// 定义内容
+export default {
+	card: {
+		title1: '商品銷售情况',
+		title2: '環境監測',
+		title3: '預警資訊',
+		title4: '動態資訊',
+		title5: '履約超時預警',
+	},
+	table: {
+		th1: '時間',
+		th2: '實驗室名稱',
+		th3: '報警內容',
+	},
+};

src/i18n/pages/login/en.ts

@@ -0,0 +1,28 @@
+// 定义内容
+export default {
+	label: {
+		one1: 'Account password',
+		two2: 'Mobile number',
+	},
+	link: {
+		one3: 'Third party login',
+		two4: 'Links',
+	},
+	copyright: {
+		one5: 'Copyright: Shenzhen XXX Software Technology Co., Ltd',
+		two6: 'Copyright: Shenzhen XXX software technology Guangdong ICP preparation no.05010000',
+	},
+	account: {
+		accountPlaceholder1: 'The user name admin or not is test',
+		accountPlaceholder2: 'Password: 123456',
+		accountPlaceholder3: 'Please enter the verification code',
+		accountBtnText: 'Sign in',
+	},
+	mobile: {
+		placeholder1: 'Please input mobile phone number',
+		placeholder2: 'Please enter the verification code',
+		codeText: 'Get code',
+		btnText: 'Sign in',
+	},
+	signInText: 'welcome back!',
+};

src/i18n/pages/login/zh-cn.ts

@@ -0,0 +1,28 @@
+// 定义内容
+export default {
+	label: {
+		one1: '账号密码登录',
+		two2: '手机号登录',
+	},
+	link: {
+		one3: '第三方登录',
+		two4: '友情链接',
+	},
+	copyright: {
+		one5: '版权所有：深圳市xxx软件科技有限公司',
+		two6: 'Copyright: Shenzhen XXX Software Technology 粤ICP备05010000号',
+	},
+	account: {
+		accountPlaceholder1: '用户名 admin 或不输均为 test',
+		accountPlaceholder2: '密码：123456',
+		accountPlaceholder3: '请输入验证码',
+		accountBtnText: '登 录',
+	},
+	mobile: {
+		placeholder1: '请输入手机号',
+		placeholder2: '请输入验证码',
+		codeText: '获取验证码',
+		btnText: '登 录',
+	},
+	signInText: '欢迎回来！',
+};

src/i18n/pages/login/zh-tw.ts

@@ -0,0 +1,28 @@
+// 定义内容
+export default {
+	label: {
+		one1: '帳號密碼登入',
+		two2: '手機號登入',
+	},
+	link: {
+		one3: '協力廠商登入',
+		two4: '友情連結',
+	},
+	copyright: {
+		one5: '版權所有：深圳市xxx軟件科技有限公司',
+		two6: 'Copyright: Shenzhen XXX Software Technology 粵ICP備05010000號',
+	},
+	account: {
+		accountPlaceholder1: '用戶名admin或不輸均為test',
+		accountPlaceholder2: '密碼：123456',
+		accountPlaceholder3: '請輸入驗證碼',
+		accountBtnText: '登入',
+	},
+	mobile: {
+		placeholder1: '請輸入手機號',
+		placeholder2: '請輸入驗證碼',
+		codeText: '獲取驗證碼',
+		btnText: '登入',
+	},
+	signInText: '歡迎回來！',
+};

src/main.ts

@@ -3,15 +3,15 @@ import App from './App.vue';
 import router from './router';
 import { store, key } from './store';
 import { authDirective } from '/@/utils/authDirective.ts';
+import { i18n } from '/@/i18n/index.ts';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
 import '/@/theme/index.scss';
-import lang from 'element-plus/lib/locale/lang/zh-cn';
 import mitt from 'mitt';
 
 const app = createApp(App);
-app.use(router).use(store, key).use(ElementPlus, { locale: lang }).mount('#app');
+app.use(router).use(store, key).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).mount('#app');
 app.config.globalProperties.mittBus = mitt();
 
 authDirective(app);

src/router/index.ts

@@ -22,7 +22,7 @@ export const dynamicRoutes = [
 				name: 'home',
 				component: () => import('/@/views/home/index.vue'),
 				meta: {
-					title: '首页',
+					title: 'message.router.home',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -38,7 +38,7 @@ export const dynamicRoutes = [
 				component: () => import('/@/views/layout/routerView/parent.vue'),
 				redirect: '/system/menu',
 				meta: {
-					title: '系统设置',
+					title: 'message.router.system',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -53,7 +53,7 @@ export const dynamicRoutes = [
 						name: 'systemMenu',
 						component: () => import('/@/views/system/menu/index.vue'),
 						meta: {
-							title: '菜单管理',
+							title: 'message.router.systemMenu',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -68,7 +68,7 @@ export const dynamicRoutes = [
 						name: 'systemUser',
 						component: () => import('/@/views/system/user/index.vue'),
 						meta: {
-							title: '用户管理',
+							title: 'message.router.systemUser',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -80,13 +80,14 @@ export const dynamicRoutes = [
 					},
 				],
 			},
+
 			{
 				path: '/limits',
 				name: 'limits',
 				component: () => import('/@/views/layout/routerView/parent.vue'),
 				redirect: '/limits/frontEnd',
 				meta: {
-					title: '权限管理',
+					title: 'message.router.limits',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -102,7 +103,7 @@ export const dynamicRoutes = [
 						component: () => import('/@/views/layout/routerView/parent.vue'),
 						redirect: '/limits/frontEnd/page',
 						meta: {
-							title: '前端控制',
+							title: 'message.router.limitsFrontEnd',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -116,7 +117,7 @@ export const dynamicRoutes = [
 								name: 'limitsFrontEndPage',
 								component: () => import('/@/views/limits/frontEnd/page/index.vue'),
 								meta: {
-									title: '页面权限',
+									title: 'message.router.limitsFrontEndPage',
 									isLink: '',
 									isHide: false,
 									isKeepAlive: true,
@@ -130,7 +131,7 @@ export const dynamicRoutes = [
 								name: 'limitsFrontEndBtn',
 								component: () => import('/@/views/limits/frontEnd/btn/index.vue'),
 								meta: {
-									title: '按钮权限',
+									title: 'message.router.limitsFrontEndBtn',
 									isLink: '',
 									isHide: false,
 									isKeepAlive: true,
@@ -146,7 +147,7 @@ export const dynamicRoutes = [
 						name: 'limitsBackEnd',
 						component: () => import('/@/views/layout/routerView/parent.vue'),
 						meta: {
-							title: '后端控制',
+							title: 'message.router.limitsBackEnd',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -160,7 +161,7 @@ export const dynamicRoutes = [
 								name: 'limitsBackEndEndPage',
 								component: () => import('/@/views/limits/backEnd/page/index.vue'),
 								meta: {
-									title: '页面权限',
+									title: 'message.router.limitsBackEndEndPage',
 									isLink: '',
 									isHide: false,
 									isKeepAlive: true,
@@ -179,7 +180,7 @@ export const dynamicRoutes = [
 				component: () => import('/@/views/layout/routerView/parent.vue'),
 				redirect: '/menu/menu1',
 				meta: {
-					title: '菜单嵌套',
+					title: 'message.router.menu',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -195,7 +196,7 @@ export const dynamicRoutes = [
 						component: () => import('/@/views/layout/routerView/parent.vue'),
 						redirect: '/menu/menu1/menu11',
 						meta: {
-							title: '菜单1',
+							title: 'message.router.menu1',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -210,7 +211,7 @@ export const dynamicRoutes = [
 								name: 'menu11',
 								component: () => import('/@/views/menu/menu1/menu11/index.vue'),
 								meta: {
-									title: '菜单11',
+									title: 'message.router.menu11',
 									isLink: '',
 									isHide: false,
 									isKeepAlive: true,
@@ -226,7 +227,7 @@ export const dynamicRoutes = [
 								component: () => import('/@/views/layout/routerView/parent.vue'),
 								redirect: '/menu/menu1/menu12/menu121',
 								meta: {
-									title: '菜单12',
+									title: 'message.router.menu12',
 									isLink: '',
 									isHide: false,
 									isKeepAlive: true,
@@ -241,7 +242,7 @@ export const dynamicRoutes = [
 										name: 'menu121',
 										component: () => import('/@/views/menu/menu1/menu12/menu121/index.vue'),
 										meta: {
-											title: '菜单121',
+											title: 'message.router.menu121',
 											isLink: '',
 											isHide: false,
 											isKeepAlive: true,
@@ -256,7 +257,7 @@ export const dynamicRoutes = [
 										name: 'menu122',
 										component: () => import('/@/views/menu/menu1/menu12/menu122/index.vue'),
 										meta: {
-											title: '菜单122',
+											title: 'message.router.menu122',
 											isLink: '',
 											isHide: false,
 											isKeepAlive: true,
@@ -273,7 +274,7 @@ export const dynamicRoutes = [
 								name: 'menu13',
 								component: () => import('/@/views/menu/menu1/menu13/index.vue'),
 								meta: {
-									title: '菜单13',
+									title: 'message.router.menu13',
 									isLink: '',
 									isHide: false,
 									isKeepAlive: true,
@@ -290,7 +291,7 @@ export const dynamicRoutes = [
 						name: 'menu2',
 						component: () => import('/@/views/menu/menu2/index.vue'),
 						meta: {
-							title: '菜单2',
+							title: 'message.router.menu2',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -308,7 +309,7 @@ export const dynamicRoutes = [
 				component: () => import('/@/views/layout/routerView/parent.vue'),
 				redirect: '/fun/tagsView',
 				meta: {
-					title: '功能',
+					title: 'message.router.funIndex',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -323,7 +324,7 @@ export const dynamicRoutes = [
 						name: 'funTagsView',
 						component: () => import('/@/views/fun/tagsView/index.vue'),
 						meta: {
-							title: 'tagsView 操作',
+							title: 'message.router.funTagsView',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -335,10 +336,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/countup',
-						name: 'countup',
+						name: 'funCountup',
 						component: () => import('/@/views/fun/countup/index.vue'),
 						meta: {
-							title: 'countup 数字滚动',
+							title: 'message.router.funCountup',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -350,10 +351,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/echartsTree',
-						name: 'echartsTree',
+						name: 'funEchartsTree',
 						component: () => import('/@/views/fun/tree/index.vue'),
 						meta: {
-							title: 'echartsTree 树图',
+							title: 'message.router.funEchartsTree',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -365,10 +366,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/selector',
-						name: 'selector',
+						name: 'funSelector',
 						component: () => import('/@/views/fun/selector/index.vue'),
 						meta: {
-							title: '图标选择器',
+							title: 'message.router.funSelector',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -380,10 +381,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/wangEditor',
-						name: 'wangEditor',
+						name: 'funWangEditor',
 						component: () => import('/@/views/fun/wangEditor/index.vue'),
 						meta: {
-							title: 'wangEditor 编辑器',
+							title: 'message.router.funWangEditor',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -395,10 +396,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/cropper',
-						name: 'cropper',
+						name: 'funCropper',
 						component: () => import('/@/views/fun/cropper/index.vue'),
 						meta: {
-							title: 'cropper 图片裁剪',
+							title: 'message.router.funCropper',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -410,10 +411,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/mindMap',
-						name: 'mindMap',
+						name: 'funMindMap',
 						component: () => import('/@/views/fun/mindMap/index.vue'),
 						meta: {
-							title: 'G6 思维导图',
+							title: 'message.router.funMindMap',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -425,10 +426,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/qrcode',
-						name: 'qrcode',
+						name: 'funQrcode',
 						component: () => import('/@/views/fun/qrcode/index.vue'),
 						meta: {
-							title: 'qrcode 二维码生成',
+							title: 'message.router.funQrcode',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -440,10 +441,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/echartsMap',
-						name: 'echartsMap',
+						name: 'funEchartsMap',
 						component: () => import('/@/views/fun/echartsMap/index.vue'),
 						meta: {
-							title: '地理坐标/地图',
+							title: 'message.router.funEchartsMap',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -455,10 +456,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/fun/printJs',
-						name: 'printJs',
+						name: 'funPrintJs',
 						component: () => import('/@/views/fun/printJs/index.vue'),
 						meta: {
-							title: '页面打印',
+							title: 'message.router.funPrintJs',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -468,6 +469,21 @@ export const dynamicRoutes = [
 							icon: 'el-icon-printer',
 						},
 					},
+					{
+						path: '/fun/clipboard',
+						name: 'funClipboard',
+						component: () => import('/@/views/fun/clipboard/index.vue'),
+						meta: {
+							title: 'message.router.funClipboard',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'el-icon-document-copy',
+						},
+					},
 				],
 			},
 			{
@@ -476,7 +492,7 @@ export const dynamicRoutes = [
 				component: () => import('/@/views/layout/routerView/parent.vue'),
 				redirect: '/pages/filtering',
 				meta: {
-					title: '页面',
+					title: 'message.router.pagesIndex',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -488,10 +504,10 @@ export const dynamicRoutes = [
 				children: [
 					{
 						path: '/pages/filtering',
-						name: 'filtering',
+						name: 'pagesFiltering',
 						component: () => import('/@/views/pages/filtering/index.vue'),
 						meta: {
-							title: '过滤筛选组件',
+							title: 'message.router.pagesFiltering',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -503,10 +519,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/filteringDetails',
-						name: 'filteringDetails',
+						name: 'pagesFilteringDetails',
 						component: () => import('/@/views/pages/filtering/details.vue'),
 						meta: {
-							title: '过滤筛选组件详情',
+							title: 'message.router.pagesFilteringDetails',
 							isLink: '',
 							isHide: true,
 							isKeepAlive: false,
@@ -518,10 +534,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/filteringDetails1',
-						name: 'filteringDetails1',
+						name: 'pagesFilteringDetails1',
 						component: () => import('/@/views/pages/filtering/details1.vue'),
 						meta: {
-							title: '过滤筛选组件详情111',
+							title: 'message.router.pagesFilteringDetails1',
 							isLink: '',
 							isHide: true,
 							isKeepAlive: false,
@@ -533,10 +549,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/iocnfont',
-						name: 'iocnfont',
+						name: 'pagesIocnfont',
 						component: () => import('/@/views/pages/iocnfont/index.vue'),
 						meta: {
-							title: 'iconfont 字体图标',
+							title: 'message.router.pagesIocnfont',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -548,10 +564,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/element',
-						name: 'element',
+						name: 'pagesElement',
 						component: () => import('/@/views/pages/element/index.vue'),
 						meta: {
-							title: 'element 字体图标',
+							title: 'message.router.pagesElement',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -563,10 +579,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/awesome',
-						name: 'awesome',
+						name: 'pagesAwesome',
 						component: () => import('/@/views/pages/awesome/index.vue'),
 						meta: {
-							title: 'awesome 字体图标',
+							title: 'message.router.pagesAwesome',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -578,10 +594,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/cityLinkage',
-						name: 'cityLinkage',
+						name: 'pagesCityLinkage',
 						component: () => import('/@/views/pages/cityLinkage/index.vue'),
 						meta: {
-							title: '城市多级联动',
+							title: 'message.router.pagesCityLinkage',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -593,10 +609,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/formAdapt',
-						name: 'formAdapt',
+						name: 'pagesFormAdapt',
 						component: () => import('/@/views/pages/formAdapt/index.vue'),
 						meta: {
-							title: '表单自适应',
+							title: 'message.router.pagesFormAdapt',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -608,10 +624,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/listAdapt',
-						name: 'listAdapt',
+						name: 'pagesListAdapt',
 						component: () => import('/@/views/pages/listAdapt/index.vue'),
 						meta: {
-							title: '列表自适应',
+							title: 'message.router.pagesListAdapt',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -623,10 +639,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/waterfall',
-						name: 'waterfall',
+						name: 'pagesWaterfall',
 						component: () => import('/@/views/pages/waterfall/index.vue'),
 						meta: {
-							title: '瀑布屏',
+							title: 'message.router.pagesWaterfall',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -638,10 +654,10 @@ export const dynamicRoutes = [
 					},
 					{
 						path: '/pages/steps',
-						name: 'steps',
+						name: 'pagesSteps',
 						component: () => import('/@/views/pages/steps/index.vue'),
 						meta: {
-							title: '步骤条',
+							title: 'message.router.pagesSteps',
 							isLink: '',
 							isHide: false,
 							isKeepAlive: true,
@@ -658,7 +674,7 @@ export const dynamicRoutes = [
 				name: 'chartIndex',
 				component: () => import('/@/views/chart/index.vue'),
 				meta: {
-					title: '大数据图表',
+					title: 'message.router.chartIndex',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -673,7 +689,7 @@ export const dynamicRoutes = [
 				name: 'personal',
 				component: () => import('/@/views/personal/index.vue'),
 				meta: {
-					title: '个人中心',
+					title: 'message.router.personal',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -688,7 +704,7 @@ export const dynamicRoutes = [
 				name: 'tools',
 				component: () => import('/@/views/tools/index.vue'),
 				meta: {
-					title: '工具类集合',
+					title: 'message.router.tools',
 					isLink: '',
 					isHide: false,
 					isKeepAlive: true,
@@ -703,7 +719,7 @@ export const dynamicRoutes = [
 				name: 'layoutLinkView',
 				component: () => import('/@/views/layout/routerView/parent.vue'),
 				meta: {
-					title: '外链',
+					title: 'message.router.layoutLinkView',
 					isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
 					isHide: false,
 					isKeepAlive: false,
@@ -718,7 +734,7 @@ export const dynamicRoutes = [
 				name: 'layoutIfameView',
 				component: () => import('/@/views/layout/routerView/parent.vue'),
 				meta: {
-					title: '内嵌 iframe',
+					title: 'message.router.layoutIfameView',
 					isLink: 'https://gitee.com/lyt-top/vue-admin-wonderful',
 					isHide: false,
 					isKeepAlive: false,
@@ -975,7 +991,6 @@ if (requestRoutes)
 
 // 路由加载前
 router.beforeEach((to, from, next) => {
-	document.title = `${to.meta.title} - ${store.state.themeConfig.themeConfig.globalTitle}` || store.state.themeConfig.themeConfig.globalTitle;
 	NProgress.configure({ showSpinner: false });
 	if (to.meta.title) NProgress.start();
 	const token = getSession('token');

src/store/interface/index.ts

@@ -45,6 +45,7 @@ declare interface ThemeConfigState {
 		isRequestRoutes: boolean;
 		globalTitle: string;
 		globalViceTitle: string;
+		globalI18n: string;
 	};
 }
 

src/store/modules/themeConfig.ts

@@ -113,6 +113,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			globalTitle: 'vue-next-admin',
 			// 网站副标题（登录页顶部文字）
 			globalViceTitle: 'SMALL@小柒',
+			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
+			globalI18n: 'zh-cn',
 		},
 	},
 	mutations: {

src/theme/element.scss

@@ -919,6 +919,11 @@
 		}
 	}
 }
+.el-dialog__body {
+	max-height: 70vh !important;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
 
 /* Card 卡片
 ------------------------------- */

src/utils/loading.ts

@@ -4,12 +4,26 @@ import { nextTick } from 'vue';
 export const NextLoading = {
 	// 创建 loading
 	start: () => {
-		const body: any = document.body;
+		const bodys: any = document.body;
 		const div = document.createElement('div');
 		div.setAttribute('class', 'loading-next');
-		const html = `<div class="loading-next-box"><div class="loading-next-animation"><div class="loading-next-animation-box"><div></div><div></div></div></div></div>`;
-		div.innerHTML = html;
-		body.insertBefore(div, body.childNodes[0]);
+		const htmls = `
+			<div class="loading-next-box">
+			<div class="loading-next-box-warp">
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+				<div class="loading-next-box-item"></div>
+			</div>
+		</div>
+		`;
+		div.innerHTML = htmls;
+		bodys.insertBefore(div, bodys.childNodes[0]);
 	},
 	// 移除 loading
 	done: () => {

src/utils/setIconfont.ts

@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css',
+	'//at.alicdn.com/t/font_2298093_cl2h21rqdau.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url

src/views/error/401.vue

@@ -4,10 +4,10 @@
 			<div class="left">
 				<div class="left-item">
 					<div class="left-item-animation left-item-num">401</div>
-					<div class="left-item-animation left-item-title">您未被授权，没有操作权限~</div>
-					<div class="left-item-animation left-item-msg">联系方式：加QQ群探讨 665452019</div>
+					<div class="left-item-animation left-item-title">{{ $t('message.noAccess.accessTitle') }}</div>
+					<div class="left-item-animation left-item-msg">{{ $t('message.noAccess.accessMsg') }}</div>
 					<div class="left-item-animation left-item-btn">
-						<el-button type="primary" round @click="onSetAuth">重新授权</el-button>
+						<el-button type="primary" round @click="onSetAuth">{{ $t('message.noAccess.accessBtn') }}</el-button>
 					</div>
 				</div>
 			</div>

src/views/error/404.vue

@@ -4,10 +4,10 @@
 			<div class="left">
 				<div class="left-item">
 					<div class="left-item-animation left-item-num">404</div>
-					<div class="left-item-animation left-item-title">地址输入错误，请重新输入地址~</div>
-					<div class="left-item-animation left-item-msg">您可以先检查网址，然后重新输入或给我们反馈问题。</div>
+					<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
+					<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
 					<div class="left-item-animation left-item-btn">
-						<el-button type="primary" round @click="onGoHome">返回首页</el-button>
+						<el-button type="primary" round @click="onGoHome">{{ $t('message.notFound.foundBtn') }}</el-button>
 					</div>
 				</div>
 			</div>

src/views/fun/clipboard/index.vue

@@ -0,0 +1,62 @@
+<template>
+	<div id="printRref">
+		<el-card shadow="hover" header="复制剪切演示">
+			<el-alert
+				title="感谢优秀的 `clipboard`，项目地址：https://github.com/zenorocha/clipboard.js`"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<el-input placeholder="请输入内容" v-model="copyVal">
+				<template #append>
+					<el-button @click="onCopyClick($event.target)" ref="copyBtnRef">复制链接</el-button>
+				</template>
+			</el-input>
+			<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="shearVal" class="mt15"> </el-input>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, ref, onMounted, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import ClipboardJS from 'clipboard';
+import { useI18n } from 'vue-i18n';
+export default {
+	name: 'funClipboard',
+	setup() {
+		const { t } = useI18n();
+		const copyBtnRef = ref();
+		const state = reactive({
+			copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
+			shearVal: '',
+		});
+		// 复制链接点击
+		const onCopyClick = (target: any) => {
+			const clipboard = new ClipboardJS(target, {
+				text: () => state.copyVal,
+			});
+			clipboard.on('success', () => {
+				ElMessage.success(t('message.layout.copyTextSuccess'));
+				clipboard.destroy();
+			});
+			clipboard.on('error', () => {
+				ElMessage.error(t('message.layout.copyTextError'));
+				clipboard.destroy();
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			nextTick(() => {
+				// 初始化复制功能，防止点击两次才可以复制
+				onCopyClick(copyBtnRef.value.$el);
+			});
+		});
+		return {
+			copyBtnRef,
+			onCopyClick,
+			...toRefs(state),
+		};
+	},
+};
+</script>

src/views/fun/countup/index.vue

@@ -35,7 +35,7 @@
 import { reactive, toRefs, onMounted, nextTick } from 'vue';
 import { CountUp } from 'countup.js';
 export default {
-	name: 'countup',
+	name: 'funCountup',
 	setup() {
 		const state = reactive({
 			topCardItemList: [

src/views/fun/cropper/index.vue

@@ -22,7 +22,7 @@
 import { ref, toRefs, reactive } from 'vue';
 import CropperDialog from '/@/components/cropper/index.vue';
 export default {
-	name: 'cropper',
+	name: 'funCropper',
 	components: { CropperDialog },
 	setup() {
 		const cropperDialogRef = ref();

src/views/fun/echartsMap/index.vue

@@ -1,19 +1,19 @@
 <template>
 	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
 		<div class="layout-view-bg-white">
-      <div id="echartsMap" style="height:100%;"></div>
+			<div id="echartsMap" style="height: 100%"></div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted } from "vue";
-import * as echarts from "echarts";
-import "echarts/extension/bmap/bmap";
-import { useStore } from "/@/store/index.ts";
-import { echartsMapList, echartsMapData } from "./mock.ts";
+import { toRefs, reactive, computed, onMounted } from 'vue';
+import * as echarts from 'echarts';
+import 'echarts/extension/bmap/bmap';
+import { useStore } from '/@/store/index.ts';
+import { echartsMapList, echartsMapData } from './mock.ts';
 export default {
-  name: "echartsMap",
+	name: 'funEchartsMap',
 	setup() {
 		const store = useStore();
 		const state = reactive({
@@ -42,12 +42,12 @@ export default {
 		};
 		// 初始化 echartsMap
 		const initEchartsMap = () => {
-      const myChart = echarts.init(document.getElementById("echartsMap"));
+			const myChart = echarts.init(document.getElementById('echartsMap'));
 			const option = {
 				tooltip: {
-          trigger: "item",
+					trigger: 'item',
 				},
-        color: ["#9a60b4", "#ea7ccc"],
+				color: ['#9a60b4', '#ea7ccc'],
 				bmap: {
 					center: [104.114129, 37.550339],
 					zoom: 5,
@@ -56,9 +56,9 @@ export default {
 				},
 				series: [
 					{
-            name: "pm2.5",
-            type: "scatter",
-            coordinateSystem: "bmap",
+						name: 'pm2.5',
+						type: 'scatter',
+						coordinateSystem: 'bmap',
 						data: convertData(state.echartsMapList),
 						symbolSize: function (val) {
 							return val[2] / 10;
@@ -67,8 +67,8 @@ export default {
 							value: 2,
 						},
 						label: {
-              formatter: "{b}",
-              position: "right",
+							formatter: '{b}',
+							position: 'right',
 							show: false,
 						},
 						emphasis: {
@@ -78,9 +78,9 @@ export default {
 						},
 					},
 					{
-            name: "Top 5",
-            type: "effectScatter",
-            coordinateSystem: "bmap",
+						name: 'Top 5',
+						type: 'effectScatter',
+						coordinateSystem: 'bmap',
 						data: convertData(
 							state.echartsMapList
 								.sort(function (a, b) {
@@ -94,26 +94,26 @@ export default {
 						encode: {
 							value: 2,
 						},
-            showEffectOn: "render",
+						showEffectOn: 'render',
 						rippleEffect: {
-              brushType: "stroke",
+							brushType: 'stroke',
 						},
 						hoverAnimation: true,
 						label: {
-              formatter: "{b}",
-              position: "right",
+							formatter: '{b}',
+							position: 'right',
 							show: true,
 						},
 						itemStyle: {
 							shadowBlur: 10,
-              shadowColor: "#333",
+							shadowColor: '#333',
 						},
 						zlevel: 1,
 					},
 				],
 			};
 			myChart.setOption(option);
-      window.addEventListener("resize", () => {
+			window.addEventListener('resize', () => {
 				myChart.resize();
 			});
 		};

src/views/fun/mindMap/index.vue

@@ -11,7 +11,7 @@ import { toRefs, reactive, computed, onMounted, getCurrentInstance } from 'vue';
 import G6 from '@antv/g6';
 import { useStore } from '/@/store/index.ts';
 export default {
-	name: 'mindMap',
+	name: 'funMindMap',
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();

src/views/fun/printJs/index.vue

@@ -16,7 +16,7 @@
 import { reactive, toRefs } from 'vue';
 import printJs from 'print-js';
 export default {
-	name: 'printJs',
+	name: 'funPrintJs',
 	setup() {
 		const state = reactive({});
 		// 打印点击

src/views/fun/qrcode/index.vue

@@ -21,7 +21,7 @@
 import { toRefs, reactive, onMounted, getCurrentInstance } from 'vue';
 import QRCode from 'qrcodejs2-fixes';
 export default {
-	name: 'qrcode',
+	name: 'funQrcode',
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const state = reactive({

src/views/fun/selector/index.vue

@@ -13,7 +13,7 @@
 import { toRefs, reactive } from 'vue';
 import IconSelector from '/@/components/iconSelector/index.vue';
 export default {
-	name: 'selector',
+	name: 'funSelector',
 	components: { IconSelector },
 	setup() {
 		const state = reactive({});

src/views/fun/tree/index.vue

@@ -12,7 +12,7 @@ import * as echarts from 'echarts';
 import { useStore } from '/@/store/index.ts';
 import { echartsTreeList } from './mock.ts';
 export default {
-	name: 'echartsTree',
+	name: 'funEchartsTree',
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const store = useStore();

src/views/fun/wangEditor/index.vue

@@ -16,7 +16,7 @@
 import { toRefs, reactive, onMounted } from 'vue';
 import wangeditor from 'wangeditor';
 export default {
-	name: 'wangeditor',
+	name: 'funWangEditor',
 	setup() {
 		const state = reactive({});
 		// 初始化富文本

src/views/home/index.vue

@@ -28,12 +28,12 @@
 		</el-row>
 		<el-row :gutter="15">
 			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="mb15">
-				<el-card shadow="hover" header="商品销售情况">
+				<el-card shadow="hover" :header="$t('message.card.title1')">
 					<div style="height: 200px" ref="homeLaboratoryRef"></div>
 				</el-card>
 			</el-col>
 			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
-				<el-card shadow="hover" header="环境监测">
+				<el-card shadow="hover" :header="$t('message.card.title2')">
 					<div class="home-monitor">
 						<div class="flex-warp">
 							<div class="flex-warp-item" v-for="(v, k) in environmentList" :key="k">
@@ -50,16 +50,16 @@
 		</el-row>
 		<el-row :gutter="15">
 			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-warning-media">
-				<el-card shadow="hover" header="预警信息" class="home-warning-card">
+				<el-card shadow="hover" :header="$t('message.card.title3')" class="home-warning-card">
 					<el-table :data="tableData.data" style="width: 100%" stripe>
-						<el-table-column prop="date" label="时间"></el-table-column>
-						<el-table-column prop="name" label="实验室名称"></el-table-column>
-						<el-table-column prop="address" label="报警内容"></el-table-column>
+						<el-table-column prop="date" :label="$t('message.table.th1')"></el-table-column>
+						<el-table-column prop="name" :label="$t('message.table.th2')"></el-table-column>
+						<el-table-column prop="address" :label="$t('message.table.th3')"></el-table-column>
 					</el-table>
 				</el-card>
 			</el-col>
 			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-dynamic-media">
-				<el-card shadow="hover" header="动态信息">
+				<el-card shadow="hover" :header="$t('message.card.title4')">
 					<div class="home-dynamic">
 						<el-scrollbar>
 							<div class="home-dynamic-item" v-for="(v, k) in activitiesList" :key="k">
@@ -85,7 +85,7 @@
 		</el-row>
 		<el-row>
 			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mt15">
-				<el-card shadow="hover" header="履约超时预警">
+				<el-card shadow="hover" :header="$t('message.card.title5')">
 					<div style="height: 200px" ref="homeOvertimeRef"></div>
 				</el-card>
 			</el-col>

src/views/layout/component/columnsAside.vue

@@ -12,19 +12,19 @@
 						}
 					"
 					:class="{ 'layout-columns-active': liIndex === k }"
-					:title="v.meta.title"
+					:title="$t(v.meta.title)"
 				>
 					<div class="layout-columns-aside-li-box" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
 						<i :class="v.meta.icon"></i>
 						<div class="layout-columns-aside-li-box-title font12">
-							{{ v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0, 4) : v.meta.title }}
+							{{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
 						</div>
 					</div>
 					<div class="layout-columns-aside-li-box" v-else>
 						<a :href="v.meta.isLink" target="_blank">
 							<i :class="v.meta.icon"></i>
 							<div class="layout-columns-aside-li-box-title font12">
-								{{ v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0, 4) : v.meta.title }}
+								{{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
 							</div>
 						</a>
 					</div>

src/views/layout/navBars/breadcrumb/breadcrumb.vue

@@ -9,10 +9,10 @@
 			<transition-group name="breadcrumb" mode="out-in">
 				<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="v.meta.title">
 					<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-						<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ v.meta.title }}
+						<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ $t(v.meta.title) }}
 					</span>
 					<a v-else @click.prevent="onBreadcrumbClick(v)">
-						<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ v.meta.title }}
+						<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ $t(v.meta.title) }}
 					</a>
 				</el-breadcrumb-item>
 			</transition-group>

src/views/layout/navBars/breadcrumb/search.vue

@@ -4,14 +4,14 @@
 			<el-autocomplete
 				v-model="menuQuery"
 				:fetch-suggestions="menuSearch"
-				placeholder="菜单搜索：支持中文、路由路径"
+				:placeholder="$t('message.user.searchPlaceholder')"
 				prefix-icon="el-icon-search"
 				ref="layoutMenuAutocompleteRef"
 				@select="onHandleSelect"
 				@blur="onSearchBlur"
 			>
 				<template #default="{ item }">
-					<div><i :class="item.meta.icon" class="mr10"></i>{{ item.meta.title }}</div>
+					<div><i :class="item.meta.icon" class="mr10"></i>{{ $t(item.meta.title) }}</div>
 				</template>
 			</el-autocomplete>
 		</el-dialog>

src/views/layout/navBars/breadcrumb/setings.vue

@@ -1,9 +1,16 @@
 <template>
 	<div class="layout-breadcrumb-seting">
-		<el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px" @close="onDrawerClose">
+		<el-drawer
+			:title="$t('message.layout.configTitle')"
+			v-model="getThemeConfig.isDrawer"
+			direction="rtl"
+			destroy-on-close
+			size="240px"
+			@close="onDrawerClose"
+		>
 			<el-scrollbar class="layout-breadcrumb-seting-bar">
 				<!-- 全局主题 -->
-				<el-divider content-position="left">全局主题</el-divider>
+				<el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
@@ -36,99 +43,99 @@
 				</div>
 
 				<!-- 菜单 / 顶栏 -->
-				<el-divider content-position="left">菜单 / 顶栏</el-divider>
+				<el-divider content-position="left">{{ $t('message.layout.twoTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoTopBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.columnsMenuBar" size="small" @change="onBgColorPickerChange('columnsMenuBar')">
 						</el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoTopBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.columnsMenuBarColor" size="small" @change="onBgColorPickerChange('columnsMenuBarColor')">
 						</el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt10">
-					<div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsTopBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isTopBarColorGradual" @change="onTopBarGradualChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
-					<div class="layout-breadcrumb-seting-bar-flex-label">菜单背景渐变</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
-					<div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorHighlight') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
 					</div>
 				</div>
 
 				<!-- 界面设置 -->
-				<el-divider content-position="left">界面设置</el-divider>
+				<el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">菜单水平折叠</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isCollapse" @change="onThemeConfigChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsUniqueOpened') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isUniqueOpened" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">固定 Header</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsFixedHeader') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'classic' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsClassicSplitMenu') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isClassicSplitMenu" :disabled="getThemeConfig.layout !== 'classic'" @change="onClassicSplitMenuChange">
 						</el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsLockScreen') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isLockScreen" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt11">
-					<div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeLockScreenTime') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-input-number
 							v-model="getThemeConfig.lockScreenTime"
@@ -144,15 +151,15 @@
 				</div>
 
 				<!-- 界面显示 -->
-				<el-divider content-position="left">界面显示</el-divider>
+				<el-divider content-position="left">{{ $t('message.layout.fourTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShowLogo') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启 Breadcrumb</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumb') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isBreadcrumb"
@@ -162,70 +169,70 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启 Breadcrumb 图标</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumbIcon') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isBreadcrumbIcon" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsview') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isTagsview" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview 图标</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsviewIcon') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isTagsviewIcon" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启 TagsView 缓存</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsCacheTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isCacheTagsView" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启 TagsView 拖拽</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsFooter') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isFooter" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">灰色模式</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsGrayscale') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isGrayscale" @change="onAddFilterChange('grayscale')"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">色弱模式</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsInvert') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isInvert" @change="onAddFilterChange('invert')"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">开启水印</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsWartermark') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isWartermark" @change="onWartermarkChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
-					<div class="layout-breadcrumb-seting-bar-flex-label">水印文案</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourWartermarkText') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-input v-model="getThemeConfig.wartermarkText" size="mini" style="width: 90px" @input="onWartermarkTextInput($event)"></el-input>
 					</div>
 				</div>
 
 				<!-- 其它设置 -->
-				<el-divider content-position="left">其它设置</el-divider>
+				<el-divider content-position="left">{{ $t('message.layout.fiveTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
 							<el-option label="风格1" value="tags-style-one"></el-option>
@@ -236,7 +243,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveAnimation') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
 							<el-option label="slide-right" value="slide-right"></el-option>
@@ -246,7 +253,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
-					<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
 							<el-option label="圆角" value="columns-round"></el-option>
@@ -256,7 +263,7 @@
 				</div>
 
 				<!-- 布局切换 -->
-				<el-divider content-position="left">布局切换</el-divider>
+				<el-divider content-position="left">{{ $t('message.layout.sixTitle') }}</el-divider>
 				<div class="layout-drawer-content-flex">
 					<!-- defaults 布局 -->
 					<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
@@ -269,7 +276,7 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">默认</p>
+								<p class="layout-tips-txt">{{ $t('message.layout.sixDefaults') }}</p>
 							</div>
 						</div>
 					</div>
@@ -286,7 +293,7 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">经典</p>
+								<p class="layout-tips-txt">{{ $t('message.layout.sixClassic') }}</p>
 							</div>
 						</div>
 					</div>
@@ -302,7 +309,7 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">横向</p>
+								<p class="layout-tips-txt">{{ $t('message.layout.sixTransverse') }}</p>
 							</div>
 						</div>
 					</div>
@@ -318,13 +325,13 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">分栏</p>
+								<p class="layout-tips-txt">{{ $t('message.layout.sixColumns') }}</p>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="copy-config">
-					<el-alert title="点击下方按钮，复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。" type="warning" :closable="false"> </el-alert>
+					<el-alert :title="$t('message.layout.tipText')" type="warning" :closable="false"> </el-alert>
 					<el-button
 						size="small"
 						class="copy-config-btn"
@@ -332,7 +339,7 @@
 						type="primary"
 						ref="copyConfigBtnRef"
 						@click="onCopyConfigClick($event.target)"
-						>一键复制配置
+						>{{ $t('message.layout.copyText') }}
 					</el-button>
 				</div>
 			</el-scrollbar>
@@ -344,6 +351,7 @@
 import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import ClipboardJS from 'clipboard';
+import { useI18n } from 'vue-i18n';
 import { useStore } from '/@/store/index.ts';
 import { getLightColor } from '/@/utils/theme.ts';
 import Watermark from '/@/utils/wartermark.ts';
@@ -352,6 +360,7 @@ import { setLocal, getLocal, removeLocal } from '/@/utils/storage.ts';
 export default defineComponent({
 	name: 'layoutBreadcrumbSeting',
 	setup() {
+		const { t } = useI18n();
 		const { proxy } = getCurrentInstance() as any;
 		const copyConfigBtnRef = ref();
 		const store = useStore();
@@ -404,12 +413,17 @@ export default defineComponent({
 		const onMenuBarHighlightChange = () => {
 			nextTick(() => {
 				setTimeout(() => {
-					let els = document.querySelector('.el-menu-item.is-active');
-					if (!els) return false;
-					if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('id', `add-is-active`);
-					else els.setAttribute('id', ``);
+					let elsItems = document.querySelectorAll('.el-menu-item');
+					let elActive = document.querySelector('.el-menu-item.is-active');
+					if (!elActive) return false;
+					if (getThemeConfig.value.isMenuBarColorHighlight) {
+						elsItems.forEach((el: any) => el.setAttribute('id', ``));
+						elActive.setAttribute('id', `add-is-active`);
+						setLocal('menuBarHighlightId', elActive.getAttribute('id'));
+					} else {
+						elActive.setAttribute('id', ``);
+					}
 					setLocalThemeConfig();
-					setLocal('menuBarHighlightId', els.getAttribute('id'));
 				}, 0);
 			});
 		};
@@ -572,11 +586,11 @@ export default defineComponent({
 			});
 			clipboard.on('success', () => {
 				getThemeConfig.value.isDrawer = false;
-				ElMessage.success('复制成功！');
+				ElMessage.success(t('message.layout.copyTextSuccess'));
 				clipboard.destroy();
 			});
 			clipboard.on('error', () => {
-				ElMessage.error('复制失败！');
+				ElMessage.error(t('message.layout.copyTextError'));
 				clipboard.destroy();
 			});
 		};
@@ -599,17 +613,17 @@ export default defineComponent({
 					// 刷新页面时，设置了值，直接取缓存中的值进行初始化
 					setTimeout(() => {
 						// 顶栏背景渐变
-						if (getLocal('navbarsBgStyle')) {
+						if (getLocal('navbarsBgStyle') && getThemeConfig.value.isTopBarColorGradual) {
 							const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
 							breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
 						}
 						// 菜单背景渐变
-						if (getLocal('asideBgStyle')) {
+						if (getLocal('asideBgStyle') && getThemeConfig.value.isMenuBarColorGradual) {
 							const asideEl: any = document.querySelector('.layout-container .el-aside');
 							asideEl.style.cssText = getLocal('asideBgStyle');
 						}
 						// 菜单字体背景高亮
-						if (getLocal('menuBarHighlightId')) {
+						if (getLocal('menuBarHighlightId') && getThemeConfig.value.isMenuBarColorHighlight) {
 							let els = document.querySelector('.el-menu-item.is-active');
 							if (!els) return false;
 							els.setAttribute('id', getLocal('menuBarHighlightId'));
@@ -621,7 +635,9 @@ export default defineComponent({
 						}
 						// 开启水印
 						onWartermarkChange();
-					}, 400);
+						// 语言国际化
+						if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
+					}, 1000);
 				});
 			});
 		});

src/views/layout/navBars/breadcrumb/user.vue

@@ -1,16 +1,28 @@
 <template>
-	<div class="layout-navbars-breadcrumb-user">
+	<div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
+		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
+			<div class="layout-navbars-breadcrumb-user-icon">
+				<i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
+					<el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>
+					<el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
-			<i class="el-icon-search" title="菜单搜索"></i>
+			<i class="el-icon-search" :title="$t('message.user.title2')"></i>
 		</div>
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
-			<i class="icon-skin iconfont" title="布局配置"></i>
+			<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
 		</div>
 		<div class="layout-navbars-breadcrumb-user-icon">
 			<el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" :width="300" popper-class="el-popover-pupop-user-news">
 				<template #reference>
 					<el-badge :is-dot="true" @click="isShowUserNewsPopover = !isShowUserNewsPopover">
-						<i class="el-icon-bell" title="消息"></i>
+						<i class="el-icon-bell" :title="$t('message.user.title4')"></i>
 					</el-badge>
 				</template>
 				<transition name="el-zoom-in-top">
@@ -19,7 +31,11 @@
 			</el-popover>
 		</div>
 		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
-			<i class="iconfont" :title="isScreenfull ? '开全屏' : '关全屏'" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
+			<i
+				class="iconfont"
+				:title="isScreenfull ? $t('message.user.title5') : $t('message.user.title6')"
+				:class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
+			></i>
 		</div>
 		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
 			<span class="layout-navbars-breadcrumb-user-link">
@@ -29,11 +45,11 @@
 			</span>
 			<template #dropdown>
 				<el-dropdown-menu>
-					<el-dropdown-item command="/home">首页</el-dropdown-item>
-					<el-dropdown-item command="/personal">个人中心</el-dropdown-item>
-					<el-dropdown-item command="/404">404</el-dropdown-item>
-					<el-dropdown-item command="/401">401</el-dropdown-item>
-					<el-dropdown-item divided command="logOut">退出登录</el-dropdown-item>
+					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
+					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
+					<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
+					<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>
+					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
 		</el-dropdown>
@@ -42,19 +58,21 @@
 </template>
 
 <script lang="ts">
-import { ref, getCurrentInstance, computed, reactive, toRefs } from 'vue';
+import { ref, getCurrentInstance, computed, reactive, toRefs, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import screenfull from 'screenfull';
+import { useI18n } from 'vue-i18n';
 import { resetRoute } from '/@/router/index.ts';
 import { useStore } from '/@/store/index.ts';
-import { clearSession } from '/@/utils/storage.ts';
+import { clearSession, setLocal, getLocal, removeLocal } from '/@/utils/storage.ts';
 import UserNews from '/@/views/layout/navBars/breadcrumb/userNews.vue';
 import Search from '/@/views/layout/navBars/breadcrumb/search.vue';
 export default {
 	name: 'layoutBreadcrumbUser',
 	components: { UserNews, Search },
 	setup() {
+		const { t } = useI18n();
 		const { proxy } = getCurrentInstance() as any;
 		const router = useRouter();
 		const store = useStore();
@@ -62,11 +80,24 @@ export default {
 		const state = reactive({
 			isScreenfull: false,
 			isShowUserNewsPopover: false,
+			disabledI18n: false,
 		});
 		// 获取用户信息 vuex
 		const getUserInfos = computed(() => {
 			return store.state.userInfos.userInfos;
 		});
+		// 获取布局配置信息
+		const getThemeConfig = computed(() => {
+			return store.state.themeConfig.themeConfig;
+		});
+		// 设置分割样式
+		const layoutUserFlexNum = computed(() => {
+			let { layout, isClassicSplitMenu } = getThemeConfig.value;
+			let num = '';
+			if (layout === 'defaults' || (layout === 'classic' && !isClassicSplitMenu)) num = 1;
+			else num = null;
+			return num;
+		});
 		// 全屏点击时
 		const onScreenfullClick = () => {
 			if (!screenfull.isEnabled) {
@@ -86,15 +117,15 @@ export default {
 				ElMessageBox({
 					closeOnClickModal: false,
 					closeOnPressEscape: false,
-					title: '提示',
-					message: '此操作将退出登录, 是否继续?',
+					title: t('message.user.logOutTitle'),
+					message: t('message.user.logOutMessage'),
 					showCancelButton: true,
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
+					confirmButtonText: t('message.user.logOutConfirm'),
+					cancelButtonText: t('message.user.logOutCancel'),
 					beforeClose: (action, instance, done) => {
 						if (action === 'confirm') {
 							instance.confirmButtonLoading = true;
-							instance.confirmButtonText = '退出中';
+							instance.confirmButtonText = t('message.user.logOutExit');
 							setTimeout(() => {
 								done();
 								setTimeout(() => {
@@ -111,7 +142,7 @@ export default {
 						resetRoute(); // 删除/重置路由
 						router.push('/login');
 						setTimeout(() => {
-							ElMessage.success('安全退出成功！');
+							ElMessage.success(t('message.user.logOutSuccess'));
 						}, 300);
 					})
 					.catch(() => {});
@@ -123,13 +154,41 @@ export default {
 		const onSearchClick = () => {
 			searchRef.value.openSearch();
 		};
+		// 语言切换
+		const onLanguageChange = (lang: string) => {
+			removeLocal('themeConfig');
+			getThemeConfig.value.globalI18n = lang;
+			setLocal('themeConfig', getThemeConfig.value);
+			proxy.$i18n.locale = lang;
+			initI18n();
+		};
+		// 初始化言语国际化
+		const initI18n = () => {
+			switch (getLocal('themeConfig').globalI18n) {
+				case 'zh-cn':
+					state.disabledI18n = 'zh-cn';
+					break;
+				case 'en':
+					state.disabledI18n = 'en';
+					break;
+				case 'zh-tw':
+					state.disabledI18n = 'zh-tw';
+					break;
+			}
+		};
+		// 页面加载时
+		onMounted(() => {
+			if (getLocal('themeConfig')) initI18n();
+		});
 		return {
 			getUserInfos,
 			onLayoutSetingClick,
 			onHandleCommandClick,
 			onScreenfullClick,
 			onSearchClick,
+			onLanguageChange,
 			searchRef,
+			layoutUserFlexNum,
 			...toRefs(state),
 		};
 	},
@@ -141,7 +200,6 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
-	flex: 1;
 	&-link {
 		height: 100%;
 		display: flex;

src/views/layout/navBars/breadcrumb/userNews.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user-news">
 		<div class="head-box">
-			<div class="head-box-title">通知</div>
-			<div class="head-box-btn" v-if="newsList.length > 0" @click="onAllReadClick">全部已读</div>
+			<div class="head-box-title">{{ $t('message.user.newTitle') }}</div>
+			<div class="head-box-btn" v-if="newsList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>
 		</div>
 		<div class="content-box">
 			<template v-if="newsList.length > 0">
@@ -14,9 +14,9 @@
 					<div class="content-box-time">{{ v.time }}</div>
 				</div>
 			</template>
-			<el-empty description="暂无通知" v-else></el-empty>
+			<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
 		</div>
-		<div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">前往通知中心</div>
+		<div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">{{ $t('message.user.newGo') }}</div>
 	</div>
 </template>
 

src/views/layout/navBars/tagsView/contextmenu.vue

@@ -13,7 +13,7 @@
 				<template v-for="(v, k) in dropdownList">
 					<li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" :key="k" v-if="!v.affix" @click="onCurrentContextmenuClick(v.id)">
 						<i :class="v.icon"></i>
-						<span>{{ v.txt }}</span>
+						<span>{{ $t(v.txt) }}</span>
 					</li>
 				</template>
 			</ul>
@@ -35,13 +35,13 @@ export default defineComponent({
 		const state = reactive({
 			isShow: false,
 			dropdownList: [
-				{ id: 0, txt: '刷新', affix: false, icon: 'el-icon-refresh-right' },
-				{ id: 1, txt: '关闭', affix: false, icon: 'el-icon-close' },
-				{ id: 2, txt: '关闭其它', affix: false, icon: 'el-icon-circle-close' },
-				{ id: 3, txt: '全部关闭', affix: false, icon: 'el-icon-folder-delete' },
+				{ id: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'el-icon-refresh-right' },
+				{ id: 1, txt: 'message.tagsView.close', affix: false, icon: 'el-icon-close' },
+				{ id: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'el-icon-circle-close' },
+				{ id: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'el-icon-folder-delete' },
 				{
 					id: 4,
-					txt: '当前页全屏',
+					txt: 'message.tagsView.fullscreen',
 					affix: false,
 					icon: 'iconfont icon-fullscreen',
 				},

src/views/layout/navBars/tagsView/tagsView.vue

@@ -18,7 +18,7 @@
 				>
 					<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v.path)"></i>
 					<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon" v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
-					<span>{{ v.meta.title }}</span>
+					<span>{{ $t(v.meta.title) }}</span>
 					<template v-if="isActive(v.path)">
 						<i class="el-icon-refresh-right ml5" @click.stop="refreshCurrentTagsView(v.path)"></i>
 						<i

src/views/layout/navMenu/horizontal.vue

@@ -6,19 +6,19 @@
 					<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 						<template #title>
 							<i :class="val.meta.icon ? val.meta.icon : ''"></i>
-							<span>{{ val.meta.title }}</span>
+							<span>{{ $t(val.meta.title) }}</span>
 						</template>
 						<SubItem :chil="val.children" />
 					</el-submenu>
 					<el-menu-item :index="val.path" :key="val.path" v-else>
 						<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 							<i :class="val.meta.icon ? val.meta.icon : ''"></i>
-							{{ val.meta.title }}
+							{{ $t(val.meta.title) }}
 						</template>
 						<template #title v-else>
 							<a :href="val.meta.isLink" target="_blank">
 								<i :class="val.meta.icon ? val.meta.icon : ''"></i>
-								{{ val.meta.title }}
+								{{ $t(val.meta.title) }}
 							</a>
 						</template>
 					</el-menu-item>

src/views/layout/navMenu/subItem.vue

@@ -3,19 +3,19 @@
 		<el-submenu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
 				<i :class="val.meta.icon"></i>
-				<span>{{ val.meta.title }}</span>
+				<span>{{ $t(val.meta.title) }}</span>
 			</template>
 			<sub-item :chil="val.children" />
 		</el-submenu>
 		<el-menu-item :index="val.path" :key="val.path" v-else>
 			<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 				<i :class="val.meta.icon ? val.meta.icon : ''"></i>
-				<span>{{ val.meta.title }}</span>
+				<span>{{ $t(val.meta.title) }}</span>
 			</template>
 			<template v-else>
 				<a :href="val.meta.isLink" target="_blank">
 					<i :class="val.meta.icon ? val.meta.icon : ''"></i>
-					{{ val.meta.title }}
+					{{ $t(val.meta.title) }}
 				</a>
 			</template>
 		</el-menu-item>

src/views/layout/navMenu/vertical.vue

@@ -11,17 +11,17 @@
 			<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
 					<i :class="val.meta.icon ? val.meta.icon : ''"></i>
-					<span>{{ val.meta.title }}</span>
+					<span>{{ $t(val.meta.title) }}</span>
 				</template>
 				<SubItem :chil="val.children" />
 			</el-submenu>
 			<el-menu-item :index="val.path" :key="val.path" v-else>
 				<i :class="val.meta.icon ? val.meta.icon : ''"></i>
 				<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-					<span>{{ val.meta.title }}</span>
+					<span>{{ $t(val.meta.title) }}</span>
 				</template>
 				<template #title v-else>
-					<a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template
+					<a :href="val.meta.isLink" target="_blank">{{ $t(val.meta.title) }}</a></template
 				>
 			</el-menu-item>
 		</template>

src/views/layout/routerView/parent.vue

@@ -2,7 +2,7 @@
 	<div class="h100">
 		<router-view v-slot="{ Component }">
 			<transition :name="setTransitionName" mode="out-in">
-				<keep-alive :include="getKeepAliveNames">
+				<keep-alive :include="keepAliveNameList">
 					<component :is="Component" :key="refreshRouterViewKey" class="w100" />
 				</keep-alive>
 			</transition>
@@ -22,6 +22,8 @@ export default defineComponent({
 		const store = useStore();
 		const state: any = reactive({
 			refreshRouterViewKey: null,
+			keepAliveNameList: [],
+			keepAliveNameNewList: [],
 		});
 		// 设置主界面切换动画
 		const setTransitionName = computed(() => {
@@ -35,13 +37,16 @@ export default defineComponent({
 		const getKeepAliveNames = computed(() => {
 			return store.state.keepAliveNames.keepAliveNames;
 		});
-		// 页面加载前
+		// 页面加载前，处理缓存，页面刷新时路由缓存处理
 		onBeforeMount(() => {
+			state.keepAliveNameList = getKeepAliveNames.value;
 			proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
 				if (route.path !== path) return false;
+				state.keepAliveNameList = getKeepAliveNames.value.filter((name: string) => route.name !== name);
 				state.refreshRouterViewKey = route.path;
 				nextTick(() => {
 					state.refreshRouterViewKey = null;
+					state.keepAliveNameList = getKeepAliveNames.value;
 				});
 			});
 		});

src/views/login/component/account.vue

@@ -3,7 +3,7 @@
 		<el-form-item>
 			<el-input
 				type="text"
-				placeholder="用户名 admin 或不输均为 test"
+				:placeholder="$t('message.account.accountPlaceholder1')"
 				prefix-icon="el-icon-user"
 				v-model="ruleForm.userName"
 				clearable
@@ -12,7 +12,14 @@
 			</el-input>
 		</el-form-item>
 		<el-form-item>
-			<el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password" autocomplete="off" show-password>
+			<el-input
+				type="password"
+				:placeholder="$t('message.account.accountPlaceholder2')"
+				prefix-icon="el-icon-lock"
+				v-model="ruleForm.password"
+				autocomplete="off"
+				show-password
+			>
 			</el-input>
 		</el-form-item>
 		<el-form-item>
@@ -21,7 +28,7 @@
 					<el-input
 						type="text"
 						maxlength="4"
-						placeholder="请输入验证码"
+						:placeholder="$t('message.account.accountPlaceholder3')"
 						prefix-icon="el-icon-position"
 						v-model="ruleForm.code"
 						clearable
@@ -37,7 +44,7 @@
 		</el-form-item>
 		<el-form-item>
 			<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
-				<span>登 录</span>
+				<span>{{ $t('message.account.accountBtnText') }}</span>
 			</el-button>
 		</el-form-item>
 	</el-form>
@@ -47,6 +54,7 @@
 import { toRefs, reactive, defineComponent, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
 import { initAllFun, getBackEndControlRoutes, setBackEndControlRoutesFun } from '/@/router/index.ts';
 import { useStore } from '/@/store/index.ts';
 import { setSession } from '/@/utils/storage.ts';
@@ -54,6 +62,7 @@ import { formatAxis } from '/@/utils/formatTime.ts';
 export default defineComponent({
 	name: 'login',
 	setup() {
+		const { t } = useI18n();
 		const store = useStore();
 		const router = useRouter();
 		const state = reactive({
@@ -129,7 +138,8 @@ export default defineComponent({
 			// 登录成功提示
 			setTimeout(() => {
 				state.loading.signIn = true;
-				ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
+				const signInText = t('message.signInText');
+				ElMessage.success(`${currentTimeInfo}，${signInText}`);
 				// 关闭 loading
 			}, 300);
 		};
@@ -164,6 +174,7 @@ export default defineComponent({
 			cursor: pointer;
 			transition: all ease 0.2s;
 			border-radius: 4px;
+			user-select: none;
 			&:hover {
 				border-color: #c0c4cc;
 				transition: all ease 0.2s;

src/views/login/component/mobile.vue

@@ -1,7 +1,14 @@
 <template>
 	<el-form class="login-content-form">
 		<el-form-item>
-			<el-input type="text" placeholder="请输入手机号" prefix-icon="el-icon-user" v-model="ruleForm.userName" clearable autocomplete="off">
+			<el-input
+				type="text"
+				:placeholder="$t('message.mobile.placeholder1')"
+				prefix-icon="el-icon-user"
+				v-model="ruleForm.userName"
+				clearable
+				autocomplete="off"
+			>
 			</el-input>
 		</el-form-item>
 		<el-form-item>
@@ -10,7 +17,7 @@
 					<el-input
 						type="text"
 						maxlength="4"
-						placeholder="请输入验证码"
+						:placeholder="$t('message.mobile.placeholder2')"
 						prefix-icon="el-icon-position"
 						v-model="ruleForm.code"
 						clearable
@@ -18,13 +25,13 @@
 					></el-input>
 				</el-col>
 				<el-col :span="8">
-					<el-button class="login-content-form-btn">获取验证码</el-button>
+					<el-button>{{ $t('message.mobile.codeText') }}</el-button>
 				</el-col>
 			</el-row>
 		</el-form-item>
 		<el-form-item>
 			<el-button type="primary" class="login-content-submit" round>
-				<span>登 录</span>
+				<span>{{ $t('message.mobile.btnText') }}</span>
 			</el-button>
 		</el-form-item>
 	</el-form>

src/views/login/index.vue

@@ -7,26 +7,26 @@
 			<div class="login-content-main">
 				<h4 class="login-content-title">{{ getThemeConfig.globalTitle }}后台模板</h4>
 				<el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
-					<el-tab-pane label="账号密码登录" name="account">
+					<el-tab-pane :label="$t('message.label.one1')" name="account" :disabled="tabsActiveName === 'account'">
 						<transition name="el-zoom-in-center">
-							<Account v-show="!isTabPaneShow" />
+							<Account v-show="isTabPaneShow" />
 						</transition>
 					</el-tab-pane>
-					<el-tab-pane label="手机号登录" name="mobile">
+					<el-tab-pane :label="$t('message.label.two2')" name="mobile" :disabled="tabsActiveName === 'mobile'">
 						<transition name="el-zoom-in-center">
-							<Mobile v-show="isTabPaneShow" />
+							<Mobile v-show="!isTabPaneShow" />
 						</transition>
 					</el-tab-pane>
 				</el-tabs>
 				<div class="mt10">
-					<el-button type="text" size="small">第三方登录</el-button>
-					<el-button type="text" size="small">友情链接</el-button>
+					<el-button type="text" size="small">{{ $t('message.link.one3') }}</el-button>
+					<el-button type="text" size="small">{{ $t('message.link.two4') }}</el-button>
 				</div>
 			</div>
 		</div>
 		<div class="login-copyright">
-			<div class="mb5 login-copyright-company">版权所有：深圳市xxx软件科技有限公司</div>
-			<div class="login-copyright-msg">Copyright: Shenzhen XXX Software Technology 粤ICP备05010000号</div>
+			<div class="mb5 login-copyright-company">{{ $t('message.copyright.one5') }}</div>
+			<div class="login-copyright-msg">{{ $t('message.copyright.two6') }}</div>
 		</div>
 	</div>
 </template>
@@ -36,7 +36,6 @@ import { toRefs, reactive, computed } from 'vue';
 import Account from '/@/views/login/component/account.vue';
 import Mobile from '/@/views/login/component/mobile.vue';
 import { useStore } from '/@/store/index.ts';
-
 export default {
 	name: 'login',
 	components: { Account, Mobile },
@@ -44,7 +43,7 @@ export default {
 		const store = useStore();
 		const state = reactive({
 			tabsActiveName: 'account',
-			isTabPaneShow: false,
+			isTabPaneShow: true,
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {

src/views/pages/awesome/index.vue

@@ -21,7 +21,7 @@
 import { toRefs, reactive, onMounted } from 'vue';
 import initIconfont from '/@/utils/getStyleSheets.ts';
 export default {
-	name: 'awesome',
+	name: 'pagesAwesome',
 	setup() {
 		const state = reactive({
 			sheetsIconList: [],

src/views/pages/cityLinkage/index.vue

@@ -46,7 +46,7 @@
 import { toRefs, reactive, onMounted } from 'vue';
 import threeLevelLinkageJson from '/@/mock/threeLevelLinkage.json';
 export default {
-	name: 'cityLinkage',
+	name: 'pagesCityLinkage',
 	setup() {
 		const state = reactive({
 			threeLevelLinkage: '',

src/views/pages/element/index.vue

@@ -21,7 +21,7 @@
 import { toRefs, reactive, onMounted } from 'vue';
 import initIconfont from '/@/utils/getStyleSheets.ts';
 export default {
-	name: 'element',
+	name: 'pagesElement',
 	setup() {
 		const state = reactive({
 			sheetsIconList: [],

src/views/pages/filtering/details.vue

@@ -12,7 +12,7 @@
 import { toRefs, reactive, computed } from 'vue';
 import { useStore } from '/@/store/index.ts';
 export default {
-	name: 'filteringDetails',
+	name: 'pagesFilteringDetails',
 	setup() {
 		const store = useStore();
 		const state = reactive({

src/views/pages/filtering/details1.vue

@@ -12,7 +12,7 @@
 import { toRefs, reactive, computed } from 'vue';
 import { useStore } from '/@/store/index.ts';
 export default {
-	name: 'filteringDetails1',
+	name: 'pagesFilteringDetails1',
 	setup() {
 		const store = useStore();
 		const state = reactive({

src/views/pages/filtering/index.vue

@@ -89,7 +89,7 @@ import { ref, toRefs, reactive, onMounted, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { filtering, filterList } from './mock.ts';
 export default {
-	name: 'filtering',
+	name: 'pagesFiltering',
 	setup() {
 		const dlRefs = ref([]);
 		const router = useRouter();

src/views/pages/formAdapt/index.vue

@@ -84,7 +84,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 export default {
-	name: 'formAdapt',
+	name: 'pagesFormAdapt',
 	setup() {
 		const state = reactive({
 			form: {},

src/views/pages/iocnfont/index.vue

@@ -21,7 +21,7 @@
 import { toRefs, reactive, onMounted } from 'vue';
 import initIconfont from '/@/utils/getStyleSheets.ts';
 export default {
-	name: 'iconfont',
+	name: 'pagesIocnfont',
 	setup() {
 		const state = reactive({
 			sheetsIconList: [],

src/views/pages/listAdapt/index.vue

@@ -56,7 +56,7 @@ import { toRefs, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { filterList } from './mock.ts';
 export default {
-	name: 'listAdapt',
+	name: 'pagesListAdapt',
 	setup() {
 		const router = useRouter();
 		const state = reactive({

src/views/pages/steps/index.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 export default {
-	name: 'steps',
+	name: 'pagesSteps',
 	setup() {
 		const state = reactive({
 			stepsActive: 1,

src/views/pages/waterfall/index.vue

@@ -24,7 +24,7 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 export default {
-	name: 'waterfall',
+	name: 'pagesWaterfall',
 	setup() {
 		const state = reactive({});
 		return {

src/views/system/menu/component/addMenu.vue

@@ -1,12 +1,11 @@
 <template>
 	<div class="system-menu-container">
 		<el-dialog title="新增菜单" v-model="isShowDialog" width="769px">
-			<div class="system-menu-form">
 			<el-form :model="ruleForm" size="small" label-width="80px">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="菜单名称">
-								<el-input v-model="ruleForm.meta.title" placeholder="请输入菜单名称" clearable></el-input>
+							<el-input v-model="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -50,13 +49,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="是否外链">
-								<el-select
-									v-model="ruleForm.isLink"
-									placeholder="请选择是否外链"
-									clearable
-									class="w100"
-									:disabled="ruleForm.meta.isIframe === 'true'"
-								>
+							<el-select v-model="ruleForm.isLink" placeholder="请选择是否外链" clearable class="w100" :disabled="ruleForm.meta.isIframe === 'true'">
 								<el-option label="是" value="true"></el-option>
 								<el-option label="否" value="false"></el-option>
 							</el-select>
@@ -93,7 +86,6 @@
 					</el-col>
 				</el-row>
 			</el-form>
-			</div>
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="small">取 消</el-button>
@@ -190,13 +182,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped lang="scss">
-.system-menu-container {
-	.system-menu-form {
-		max-height: 70vh !important;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
-}
-</style>

src/views/system/menu/component/editMenu.vue

@@ -1,12 +1,11 @@
 <template>
 	<div class="system-menu-container">
 		<el-dialog title="编辑菜单" v-model="isShowDialog" width="769px">
-			<div class="system-menu-form">
 			<el-form :model="ruleForm" size="small" label-width="80px">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="菜单名称">
-								<el-input v-model="ruleForm.meta.title" placeholder="请输入菜单名称" clearable></el-input>
+							<el-input v-model="ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -50,13 +49,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="是否外链">
-								<el-select
-									v-model="ruleForm.isLink"
-									placeholder="请选择是否外链"
-									clearable
-									class="w100"
-									:disabled="ruleForm.meta.isIframe === 'true'"
-								>
+							<el-select v-model="ruleForm.isLink" placeholder="请选择是否外链" clearable class="w100" :disabled="ruleForm.meta.isIframe === 'true'">
 								<el-option label="是" value="true"></el-option>
 								<el-option label="否" value="false"></el-option>
 							</el-select>
@@ -93,7 +86,6 @@
 					</el-col>
 				</el-row>
 			</el-form>
-			</div>
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="small">取 消</el-button>
@@ -106,10 +98,12 @@
 
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
 // import { setBackEndControlRefreshRoutes } from "/@/router/index.ts";
 export default {
 	name: 'systemEditMenu',
 	setup() {
+		const { t } = useI18n();
 		const state = reactive({
 			isShowDialog: false,
 			/**
@@ -141,7 +135,7 @@ export default {
 			state.ruleForm.component = '';
 			state.ruleForm.isLink = row.meta.isLink ? 'true' : '';
 			state.ruleForm.menuSort = '';
-			state.ruleForm.meta.title = row.meta.title;
+			state.ruleForm.meta.title = t(row.meta.title);
 			state.ruleForm.meta.icon = row.meta.icon;
 			state.ruleForm.meta.isHide = row.meta.isHide ? 'true' : 'false';
 			state.ruleForm.meta.isKeepAlive = row.meta.isKeepAlive ? 'true' : 'false';
@@ -201,13 +195,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped lang="scss">
-.system-menu-container {
-	.system-menu-form {
-		max-height: 70vh !important;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
-}
-</style>

src/views/system/menu/index.vue

@@ -5,11 +5,15 @@
 				<el-table-column label="菜单名称" show-overflow-tooltip>
 					<template #default="scope">
 						<i :class="scope.row.meta.icon"></i>
-						<span class="ml10">{{ scope.row.meta.title }}</span>
+						<span class="ml10">{{ $t(scope.row.meta.title) }}</span>
 					</template>
 				</el-table-column>
 				<el-table-column prop="path" label="路由名称" show-overflow-tooltip width="150"></el-table-column>
-				<el-table-column prop="component" label="组件地址" show-overflow-tooltip></el-table-column>
+				<el-table-column label="组件地址" show-overflow-tooltip>
+					<template #default="scope">
+						<span>{{ scope.row.component }}</span>
+					</template>
+				</el-table-column>
 				<el-table-column label="隐藏" show-overflow-tooltip width="70">
 					<template #default="scope">
 						<span v-if="scope.row.meta.isHide" class="color-primary">是</span>

vite.config.ts

@@ -1,23 +1,26 @@
 import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
 import type { UserConfig } from 'vite';
 import { loadEnv } from './src/utils/viteBuild.ts';
 
+const pathResolve = (dir: string): any => {
+	return resolve(__dirname, '.', dir);
+};
+
 const { VITE_PORT, VITE_OPEN, VITE_PUBLIC_PATH } = loadEnv();
 
+const alias: Record<string, string> = {
+	'/@': pathResolve('/src/'),
+	'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
+};
+
 const viteConfig: UserConfig = {
 	plugins: [vue()],
 	root: process.cwd(),
-	resolve: {
-		alias: [
-			{
-				find: /^\/@\//,
-				replacement: '/src/',
-			},
-		],
-	},
+	resolve: { alias },
 	base: process.env.NODE_ENV === 'production' ? VITE_PUBLIC_PATH : './',
 	optimizeDeps: {
-		include: ['element-plus/lib/locale/lang/zh-cn'],
+		include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw'],
 	},
 	server: {
 		port: VITE_PORT,

yarn.lock

@@ -9,10 +9,12 @@
   dependencies:
     tinycolor2 "^1.4.1"
 
-"@antv/algorithm@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@antv/algorithm/-/algorithm-0.1.3.tgz#c10d815eabed7b832c864228a4c99f8825715831"
-  integrity sha512-kSyFNjsBa88nkpawr6ZTdzf2YWrJ59ywuJ80Ny6y7Sf+ITcsRLZA2CdBf4oYpiozVu8LmHPhXTzElUxI+niL8Q==
+"@antv/algorithm@0.1.8-beta.5":
+  version "0.1.8-beta.5"
+  resolved "https://registry.yarnpkg.com/@antv/algorithm/-/algorithm-0.1.8-beta.5.tgz#91235d91b4213c9d0656cb0537175eb963607940"
+  integrity sha512-hme+Im6OPnE0gWkkaI/666gkCWoOzFYmq2vNamtpdstfYWXRgVfCl/2m3lwS8d/ehUO5sLzCw53eXDEDoDMyEg==
+  dependencies:
+    "@antv/util" "^2.0.13"
 
 "@antv/dom-util@^2.0.1", "@antv/dom-util@^2.0.2":
   version "2.0.3"
@@ -121,12 +123,12 @@
     probe.gl "^3.1.1"
     reflect-metadata "^0.1.13"
 
-"@antv/g6-core@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@antv/g6-core/-/g6-core-0.2.0.tgz#3849515b352951cfdf2ffc9c48293173eb613d46"
-  integrity sha512-rsTkHZh+nT/sE/24u80wk64v+hsAxDqDx9vBj81fz/ClCWofuwqWVu4UCDzyLqhNTbN55ySlIip6WTUJxxVfsg==
+"@antv/g6-core@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@antv/g6-core/-/g6-core-0.2.5.tgz#e98912c5e88bf5644ff5bc530ff6560c2f6bb274"
+  integrity sha512-NZFs0NixVUcfffiXFOdQ8nZhefZ0EZwSkZJZEuhbSPheHeFZ07U/D+fBhBMowiewAbvlBVVIsA7kPVuUVSVlaw==
   dependencies:
-    "@antv/algorithm" "^0.1.3"
+    "@antv/algorithm" "0.1.8-beta.5"
     "@antv/dom-util" "^2.0.1"
     "@antv/event-emitter" "~0.1.0"
     "@antv/g-base" "^0.5.1"
@@ -138,33 +140,33 @@
     ml-matrix "^6.5.0"
     tslib "^2.1.0"
 
-"@antv/g6-element@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@antv/g6-element/-/g6-element-0.2.0.tgz#0da363dd15df5bacedc40d5138cb5512569893e0"
-  integrity sha512-TclntsZrdKPigYPPzDknpt+PdVQyl2aYBH88GJqJX1C3ynm0xI+gkHcmX+I5fFyAmg+w56u2xEF/IiuSy7hfJA==
+"@antv/g6-element@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@antv/g6-element/-/g6-element-0.2.5.tgz#d714d1c109038e2f594fa51eb72a1c67aeeb8b74"
+  integrity sha512-LJjSTGogzECpToYt+5UEZGlaUA2tbzjyvYIr5UJFAuIQ6XXqbWDGttckapIOZ8VXhE8iZ+FibhlqySXiOhhVdA==
   dependencies:
     "@antv/g-base" "^0.5.1"
-    "@antv/g6-core" "^0.2.0"
+    "@antv/g6-core" "0.2.5"
     "@antv/util" "~2.0.5"
 
-"@antv/g6-pc@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@antv/g6-pc/-/g6-pc-0.2.0.tgz#4a8b487b8df170e946938d3a7b8965da9db43e38"
-  integrity sha512-YmG9iaNLNhf5vB0uNLR/g1XKURkmDKcXR790cJdReJYfXrTF3NZlkaTPFOVHxzDpvjbv79GmW5ArIihtFGtlbw==
+"@antv/g6-pc@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@antv/g6-pc/-/g6-pc-0.2.5.tgz#668d9dee188706382ddfb66e9e144b365f291a80"
+  integrity sha512-fGUFoXQMhO8WUzn8bbL6+mT0osxZTdiwLo3tmQZhMi7Q1U+K/PVzvR0OP6WdY/hkPuKW8ePlLxoozIvqOky0Ew==
   dependencies:
     "@ant-design/colors" "^4.0.5"
-    "@antv/algorithm" "^0.1.3"
+    "@antv/algorithm" "0.1.8-beta.5"
     "@antv/dom-util" "^2.0.1"
     "@antv/event-emitter" "~0.1.0"
     "@antv/g-base" "^0.5.1"
     "@antv/g-canvas" "^0.5.2"
     "@antv/g-math" "^0.1.1"
     "@antv/g-svg" "^0.5.1"
-    "@antv/g6-core" "^0.2.0"
-    "@antv/g6-element" "^0.2.0"
-    "@antv/g6-plugin" "^0.2.0"
-    "@antv/hierarchy" "^0.6.2"
-    "@antv/layout" "^0.1.10"
+    "@antv/g6-core" "0.2.5"
+    "@antv/g6-element" "0.2.5"
+    "@antv/g6-plugin" "0.2.5"
+    "@antv/hierarchy" "^0.6.7"
+    "@antv/layout" "^0.1.12"
     "@antv/matrix-util" "^3.0.4"
     "@antv/path-util" "^2.0.3"
     "@antv/scale" "^0.3.1"
@@ -175,39 +177,39 @@
     insert-css "^2.0.0"
     ml-matrix "^6.5.0"
 
-"@antv/g6-plugin@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@antv/g6-plugin/-/g6-plugin-0.2.0.tgz#1257edf601e2c37a1857d82c91a3099a4c2a77eb"
-  integrity sha512-r1atvvx/MJ0xFmJXCn7l+KnTh4djaOhiuYJwgkCFsIIzQLxfjHm2hzFfPOxjTFdeubcjSZMnyLhuMSCo2XYIZw==
+"@antv/g6-plugin@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@antv/g6-plugin/-/g6-plugin-0.2.5.tgz#137177dbe8c93ac189a304e4e5ab277701839a01"
+  integrity sha512-htgqCr04Emsqw9cyhBky80j2dH1z6gG2dLxUY3yKSMu3fVSguPDJ/kxB+scXf2e3lqOroCw/nTlI1tSJ5qkkwA==
   dependencies:
     "@antv/dom-util" "^2.0.2"
     "@antv/g-base" "^0.5.1"
     "@antv/g-canvas" "^0.5.2"
     "@antv/g-svg" "^0.5.2"
-    "@antv/g6-core" "^0.2.0"
+    "@antv/g6-core" "0.2.5"
     "@antv/matrix-util" "^3.0.4"
     "@antv/scale" "^0.3.4"
     "@antv/util" "^2.0.9"
     insert-css "^2.0.0"
 
-"@antv/g6@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@antv/g6/-/g6-4.2.0.tgz#753ce12632f8dcf19849e8afa9b33bde94fa9c20"
-  integrity sha512-0jKXH2PUxv8/9aFfes9J7Q38v7wjCGIF84bsTdza6oF8fRY8uc0x9uoZMwgu5uKZeW3H86gNmM4S/DFCBlEtcw==
+"@antv/g6@^4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@antv/g6/-/g6-4.2.5.tgz#d733c91096f69bd7568e99eb6694c275e8a72200"
+  integrity sha512-+NG8Ji5ediVx8hzgzl3hM13MYXt57fvTHDwgrvS/a6uuxSKwpdgoEzsvrPSIlZ1eunQAeWwai02Vh8Ty6v2wCg==
   dependencies:
-    "@antv/g6-pc" "0.2.0"
+    "@antv/g6-pc" "0.2.5"
 
-"@antv/hierarchy@^0.6.2":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@antv/hierarchy/-/hierarchy-0.6.6.tgz#58459b08ef19bb34d8df0a96d52954580783aebe"
-  integrity sha512-ivb9j5aJOogjjU9k7WZXWznevMyqgBbP/Xq2rfXsQFLk4ArABt2ewU6a6jndPOiycGDxppZ8kaYjli70i4HluA==
+"@antv/hierarchy@^0.6.7":
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/@antv/hierarchy/-/hierarchy-0.6.7.tgz#bccd57a21764c5b71ed8c1cba52817b235b19c5c"
+  integrity sha512-Te2fJCq5W80990gCUiUazp1BOloushOEnbgaD+z5z/m0ntjVEhJzQJDyTNG7NT30CO4iskv4R0Jmh5u9kxAznQ==
   dependencies:
     "@antv/util" "^2.0.7"
 
-"@antv/layout@^0.1.10":
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@antv/layout/-/layout-0.1.10.tgz#013ba0cf515c7ce77600ccdc02ba9c159a052bd6"
-  integrity sha512-uqFQLAsyl2JQTvqsrzIKIPqDl5vNCNvc7iGMZm8dxA8HOAHuqcSF3u9Cb4ISWpQ4VwMHGt72RsoTt3M8kCXlPg==
+"@antv/layout@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@antv/layout/-/layout-0.1.12.tgz#a727e384956a50f9be80b95273bff04aa5830b77"
+  integrity sha512-+7VCN/2ahuJUNPtGso7y4QbEAOHnFiScuPZkk5BLZzQCU01NxkeDB7yxLG++f9n8x9Ho1xiK7xPI1g23eGqqTA==
   dependencies:
     "@antv/g-webgpu" "0.5.5"
     d3-force "^2.0.1"
@@ -249,7 +251,7 @@
     fecha "~4.2.0"
     tslib "^2.0.0"
 
-"@antv/util@^2.0.7", "@antv/util@^2.0.9", "@antv/util@~2.0.0", "@antv/util@~2.0.3", "@antv/util@~2.0.5":
+"@antv/util@^2.0.13", "@antv/util@^2.0.7", "@antv/util@^2.0.9", "@antv/util@~2.0.0", "@antv/util@~2.0.3", "@antv/util@~2.0.5":
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/@antv/util/-/util-2.0.13.tgz#7c2e701d89527116ec17cf5a400413c5c6afcb4d"
   integrity sha512-mfYL7K8XJIeDmal33K+6abr8Yb526YXKg5XQlddNo+X1Doll+gun6HxnbdySoLv21vW4bLkcbVPjqxWl7ZJAFA==
@@ -282,6 +284,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.10.tgz#8f8f9bf7b3afa3eabd061f7a5bcdf4fec3c48409"
   integrity sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==
 
+"@babel/parser@^7.13.9":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
+  integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==
+
 "@babel/runtime-corejs3@^7.11.2":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.13.10.tgz#14c3f4c85de22ba88e8e86685d13e8861a82fe86"
@@ -306,6 +313,15 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.13.0":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.14.tgz#c35a4abb15c7cd45a2746d78ab328e362cbace0d"
+  integrity sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@eslint/eslintrc@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.0.tgz#99cc0a0584d72f1df38b900fb062ba995f395547"
@@ -321,6 +337,44 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@intlify/core-base@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.0.0.tgz#3de223b8532c535d022e5be58f7d56a26d2fb12f"
+  integrity sha512-dxqakT94EV2bFshG3LENQUPWX9yJFCga1BOwJ6mz7J8LnAYVB9Kxw7NRyE2ybN31USW2IUTQH6WWR1yDbCiefQ==
+  dependencies:
+    "@intlify/message-compiler" "9.0.0"
+    "@intlify/message-resolver" "9.0.0"
+    "@intlify/runtime" "9.0.0"
+    "@intlify/shared" "9.0.0"
+
+"@intlify/message-compiler@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.0.0.tgz#8a1079f8aebcde33057ce769817691ce27ad3e0d"
+  integrity sha512-3oiLj+8z6koRYJwknazjilBsrqnJEAJywr/t39MYVy2yPmwOI1+NDfdDwM9U3ioA2RvsQEUICqW8gmjq1YIElw==
+  dependencies:
+    "@intlify/message-resolver" "9.0.0"
+    "@intlify/shared" "9.0.0"
+    source-map "0.6.1"
+
+"@intlify/message-resolver@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@intlify/message-resolver/-/message-resolver-9.0.0.tgz#0077ec24606b6486d238bdef9044e27729f4782c"
+  integrity sha512-LVK4cwu1l33yvBy0UQkEdXm6pZUcbbiparobruJXz+U8jRTmYHBprN59j59YKXEKcV43cHfzNveaQIm84bgxvQ==
+
+"@intlify/runtime@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@intlify/runtime/-/runtime-9.0.0.tgz#bf9415ff90c746a9be38a5c32f71cbbe9848eee8"
+  integrity sha512-UqCKduZezb5/qA+XPRfHVvXoLmhnQ8iKMyCh0Lg3ZwjW2vOMep/AgZU3T9cgESe67r4buPYHs7nOBSHbTdjNxg==
+  dependencies:
+    "@intlify/message-compiler" "9.0.0"
+    "@intlify/message-resolver" "9.0.0"
+    "@intlify/shared" "9.0.0"
+
+"@intlify/shared@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.0.0.tgz#d85b3b5f9033f377c5cf2202cf2459aa49948f36"
+  integrity sha512-0r4v7dnY8g/Jfx2swUWy2GyfH/WvIpWvkU4OIupvxDTWiE8RhcpbOCVvqpVh/xGi0proHQ/r2Dhc0QSItUsfDQ==
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@@ -376,10 +430,10 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
-"@types/node@^14.14.34":
-  version "14.14.34"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.34.tgz#07935194fc049069a1c56c0c274265abeddf88da"
-  integrity sha512-dBPaxocOK6UVyvhbnpFIj2W+S+1cBTkHQbFQfeeJhoKFbzYcVUGHvddeWPSucKATb3F0+pgDq0i6ghEaZjsugA==
+"@types/node@^14.14.37":
+  version "14.14.37"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.37.tgz#a3dd8da4eb84a996c36e331df98d82abd76b516e"
+  integrity sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==
 
 "@types/nprogress@^0.2.0":
   version "0.2.0"
@@ -391,13 +445,13 @@
   resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.10.6.tgz#98725ae08f1dfe28b8da0fdf302c417f5ff043c0"
   integrity sha512-QRz8Z+uw2Y4Gwrtxw8hD782zzuxxugdcq8X/FkPsXUa1kfslhGzy13+4HugO9FXNo+jlWVcE6DYmmegniIQ30A==
 
-"@typescript-eslint/eslint-plugin@^4.17.0":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.17.0.tgz#6f856eca4e6a52ce9cf127dfd349096ad936aa2d"
-  integrity sha512-/fKFDcoHg8oNan39IKFOb5WmV7oWhQe1K6CDaAVfJaNWEhmfqlA24g+u1lqU5bMH7zuNasfMId4LaYWC5ijRLw==
+"@typescript-eslint/eslint-plugin@^4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.20.0.tgz#9d8794bd99aad9153092ad13c96164e3082e9a92"
+  integrity sha512-sw+3HO5aehYqn5w177z2D82ZQlqHCwcKSMboueo7oE4KU9QiC0SAgfS/D4z9xXvpTc8Bt41Raa9fBR8T2tIhoQ==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.17.0"
-    "@typescript-eslint/scope-manager" "4.17.0"
+    "@typescript-eslint/experimental-utils" "4.20.0"
+    "@typescript-eslint/scope-manager" "4.20.0"
     debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     lodash "^4.17.15"
@@ -405,66 +459,77 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@4.17.0":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.17.0.tgz#762c44aaa1a6a3c05b6d63a8648fb89b89f84c80"
-  integrity sha512-ZR2NIUbnIBj+LGqCFGQ9yk2EBQrpVVFOh9/Kd0Lm6gLpSAcCuLLe5lUCibKGCqyH9HPwYC0GIJce2O1i8VYmWA==
+"@typescript-eslint/experimental-utils@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.20.0.tgz#a8ab2d7b61924f99042b7d77372996d5f41dc44b"
+  integrity sha512-sQNlf6rjLq2yB5lELl3gOE7OuoA/6IVXJUJ+Vs7emrQMva14CkOwyQwD7CW+TkmOJ4Q/YGmoDLmbfFrpGmbKng==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.17.0"
-    "@typescript-eslint/types" "4.17.0"
-    "@typescript-eslint/typescript-estree" "4.17.0"
+    "@typescript-eslint/scope-manager" "4.20.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/typescript-estree" "4.20.0"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^4.17.0":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.17.0.tgz#141b647ffc72ebebcbf9b0fe6087f65b706d3215"
-  integrity sha512-KYdksiZQ0N1t+6qpnl6JeK9ycCFprS9xBAiIrw4gSphqONt8wydBw4BXJi3C11ywZmyHulvMaLjWsxDjUSDwAw==
+"@typescript-eslint/parser@^4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.20.0.tgz#8dd403c8b4258b99194972d9799e201b8d083bdd"
+  integrity sha512-m6vDtgL9EABdjMtKVw5rr6DdeMCH3OA1vFb0dAyuZSa3e5yw1YRzlwFnm9knma9Lz6b2GPvoNSa8vOXrqsaglA==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.17.0"
-    "@typescript-eslint/types" "4.17.0"
-    "@typescript-eslint/typescript-estree" "4.17.0"
+    "@typescript-eslint/scope-manager" "4.20.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/typescript-estree" "4.20.0"
     debug "^4.1.1"
 
-"@typescript-eslint/scope-manager@4.17.0":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.17.0.tgz#f4edf94eff3b52a863180f7f89581bf963e3d37d"
-  integrity sha512-OJ+CeTliuW+UZ9qgULrnGpPQ1bhrZNFpfT/Bc0pzNeyZwMik7/ykJ0JHnQ7krHanFN9wcnPK89pwn84cRUmYjw==
+"@typescript-eslint/scope-manager@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.20.0.tgz#953ecbf3b00845ece7be66246608be9d126d05ca"
+  integrity sha512-/zm6WR6iclD5HhGpcwl/GOYDTzrTHmvf8LLLkwKqqPKG6+KZt/CfSgPCiybshmck66M2L5fWSF/MKNuCwtKQSQ==
   dependencies:
-    "@typescript-eslint/types" "4.17.0"
-    "@typescript-eslint/visitor-keys" "4.17.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/visitor-keys" "4.20.0"
 
-"@typescript-eslint/types@4.17.0":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.17.0.tgz#f57d8fc7f31b348db946498a43050083d25f40ad"
-  integrity sha512-RN5z8qYpJ+kXwnLlyzZkiJwfW2AY458Bf8WqllkondQIcN2ZxQowAToGSd9BlAUZDB5Ea8I6mqL2quGYCLT+2g==
+"@typescript-eslint/types@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.20.0.tgz#c6cf5ef3c9b1c8f699a9bbdafb7a1da1ca781225"
+  integrity sha512-cYY+1PIjei1nk49JAPnH1VEnu7OYdWRdJhYI5wiKOUMhLTG1qsx5cQxCUTuwWCmQoyriadz3Ni8HZmGSofeC+w==
 
-"@typescript-eslint/typescript-estree@4.17.0":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.17.0.tgz#b835d152804f0972b80dbda92477f9070a72ded1"
-  integrity sha512-lRhSFIZKUEPPWpWfwuZBH9trYIEJSI0vYsrxbvVvNyIUDoKWaklOAelsSkeh3E2VBSZiNe9BZ4E5tYBZbUczVQ==
+"@typescript-eslint/typescript-estree@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.20.0.tgz#8b3b08f85f18a8da5d88f65cb400f013e88ab7be"
+  integrity sha512-Knpp0reOd4ZsyoEJdW8i/sK3mtZ47Ls7ZHvD8WVABNx5Xnn7KhenMTRGegoyMTx6TiXlOVgMz9r0pDgXTEEIHA==
   dependencies:
-    "@typescript-eslint/types" "4.17.0"
-    "@typescript-eslint/visitor-keys" "4.17.0"
+    "@typescript-eslint/types" "4.20.0"
+    "@typescript-eslint/visitor-keys" "4.20.0"
     debug "^4.1.1"
     globby "^11.0.1"
     is-glob "^4.0.1"
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/visitor-keys@4.17.0":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.17.0.tgz#9c304cfd20287c14a31d573195a709111849b14d"
-  integrity sha512-WfuMN8mm5SSqXuAr9NM+fItJ0SVVphobWYkWOwQ1odsfC014Vdxk/92t4JwS1Q6fCA/ABfCKpa3AVtpUKTNKGQ==
+"@typescript-eslint/visitor-keys@4.20.0":
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.20.0.tgz#1e84db034da13f208325e6bfc995c3b75f7dbd62"
+  integrity sha512-NXKRM3oOVQL8yNFDNCZuieRIwZ5UtjNLYtmMx2PacEAGmbaEYtGgVHUHVyZvU/0rYZcizdrWjDo+WBtRPSgq+A==
   dependencies:
-    "@typescript-eslint/types" "4.17.0"
+    "@typescript-eslint/types" "4.20.0"
     eslint-visitor-keys "^2.0.0"
 
-"@vitejs/plugin-vue@^1.1.5":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.1.5.tgz#fa1e8e5e049c35e213672e33f73fe81706ad5dbe"
-  integrity sha512-4DV8VPYo8/OR1YsnK39QN16xhKENt2XvcmJxqfRtyz75kvbjBYh1zTSHLp7XsXqv4R2I+fOZlbEBvxosMYLcPA==
+"@vitejs/plugin-vue@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.2.1.tgz#6de49436fc346f829a56676066428e3f011522ac"
+  integrity sha512-TG+LbEUNwfFrx1VyN+iq+PsiGd9MT16hUdJY+BnMXj3MrLAF8m3VYUspTDM3aXoh48YDmAkMjG4gWFRg3lbG5A==
+
+"@vue/compiler-core@3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.10.tgz#ced92120c6b9bab7b6c44dfe5e3e5cf2ea422531"
+  integrity sha512-rayD+aODgX9CWgWv0cAI+whPLyMmtkWfNGsZpdpsaIloh8mY2hX8+SvE1Nn3755YhGWJ/7oaDEcNpOctGwZbsA==
+  dependencies:
+    "@babel/parser" "^7.12.0"
+    "@babel/types" "^7.12.0"
+    "@vue/shared" "3.0.10"
+    estree-walker "^2.0.1"
+    source-map "^0.6.1"
 
 "@vue/compiler-core@3.0.7":
   version "3.0.7"
@@ -477,6 +542,14 @@
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
+"@vue/compiler-dom@3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.10.tgz#59d3597498e7d4b0b92f3886a823f99d5b08f1fe"
+  integrity sha512-SzN1li9xAxtqkZimR1AFU2t1N0vzsAJxR/5764xoS0xedwhUU9s8s+Tks2FNMLsXiqdkP2Qd4zAM+9EwTbZmRw==
+  dependencies:
+    "@vue/compiler-core" "3.0.10"
+    "@vue/shared" "3.0.10"
+
 "@vue/compiler-dom@3.0.7":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.7.tgz#54d2e12fb9a7aff53abd19dac2c2679533f0c919"
@@ -485,17 +558,17 @@
     "@vue/compiler-core" "3.0.7"
     "@vue/shared" "3.0.7"
 
-"@vue/compiler-sfc@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.7.tgz#900414750cc726553b870490f48073451fd14f07"
-  integrity sha512-37/QILpGE+J3V+bP9Slg9e6xGqfk+MmS2Yj8ChR4fS0/qWUU/YoYHE0GPIzjmBdH0JVOOmJqunxowIXmqNiHng==
+"@vue/compiler-sfc@^3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.10.tgz#de6bc9be7f5ab1d944048a9be04c72c3571d4321"
+  integrity sha512-LLbXHwKMM72aomKsj9AySkLP1xIHREh/3w0nueenKhsWuaKTL1/XUhIPml23+Z+tX55qeJiUIHDeJuFSxfgQfg==
   dependencies:
-    "@babel/parser" "^7.12.0"
-    "@babel/types" "^7.12.0"
-    "@vue/compiler-core" "3.0.7"
-    "@vue/compiler-dom" "3.0.7"
-    "@vue/compiler-ssr" "3.0.7"
-    "@vue/shared" "3.0.7"
+    "@babel/parser" "^7.13.9"
+    "@babel/types" "^7.13.0"
+    "@vue/compiler-core" "3.0.10"
+    "@vue/compiler-dom" "3.0.10"
+    "@vue/compiler-ssr" "3.0.10"
+    "@vue/shared" "3.0.10"
     consolidate "^0.16.0"
     estree-walker "^2.0.1"
     hash-sum "^2.0.0"
@@ -507,13 +580,18 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.7.tgz#28b85d497381d75fe44234057b140b0065ca9dbf"
-  integrity sha512-nHRbHeSpfXwjypettjrA16TjgfDcPEwq3m/zHnGyLC1QqdLtklXmpSM43/CPwwTCRa/qdt0pldJf22MiCEuTSQ==
+"@vue/compiler-ssr@3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.10.tgz#6ccc647bda49c0fc1ca100219e9c71268e048120"
+  integrity sha512-skrPSp9pjZG3unqHpUaEaRRpO1yYxbCXRfJ1kZW8PTGAg5g3Y/hrUet5+Q6zCIZwr5j1mSMBSLXMDCjFuyyZLg==
   dependencies:
-    "@vue/compiler-dom" "3.0.7"
-    "@vue/shared" "3.0.7"
+    "@vue/compiler-dom" "3.0.10"
+    "@vue/shared" "3.0.10"
+
+"@vue/devtools-api@^6.0.0-beta.5":
+  version "6.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.7.tgz#1d306613c93b9a837a3776b1b9255502662f850f"
+  integrity sha512-mIfqX8ZF6s2ulelIzfxGk9sFoigpoeK/2/DlWrtBGWfvwaK3kR1P2bxNkZ0LbJeuKHfcRP6hGZtGist7nxUN9A==
 
 "@vue/reactivity@3.0.7":
   version "3.0.7"
@@ -539,6 +617,11 @@
     "@vue/shared" "3.0.7"
     csstype "^2.6.8"
 
+"@vue/shared@3.0.10":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.10.tgz#5476d5615d01bf339c65c2e804f5909bbc27844a"
+  integrity sha512-p8GJ+bGpEGiEHICwcCH/EtJnkZQllrOfm1J2J+Ep0ydMte25bPnArgrY/h2Tn1LKqqR3LXyQlOSYY6gJgiW2LQ==
+
 "@vue/shared@3.0.7":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.7.tgz#96d52988efc07444c108c7c6803ba7cc93e40045"
@@ -930,10 +1013,10 @@ echarts@^5.0.2:
     tslib "2.0.3"
     zrender "5.0.4"
 
-element-plus@^1.0.2-beta.34:
-  version "1.0.2-beta.35"
-  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.0.2-beta.35.tgz#158890bddf28f8495f261d02789bf394c5c97123"
-  integrity sha512-T12EfxbWoNOrWE2bzXFPJdOU3cl4YWuLwxE5QKM40oPw1VYPMRrRB8Uy5TwF8h3itxzsJQ5iFj2rdDO+q3Jcdg==
+element-plus@^1.0.2-beta.36:
+  version "1.0.2-beta.36"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.0.2-beta.36.tgz#78a7e1be10b9622c4fc342fdce0801650f30bb01"
+  integrity sha512-5Qc54rH0GGtFRXpfA4ilpcOzdAw6t2m4mBXMXYjs9c5RSYP+EV+gJyfhyolXqZoOtYZ35ovBcqljlIJJD6Nz7g==
   dependencies:
     "@popperjs/core" "^2.4.4"
     async-validator "^3.4.0"
@@ -960,20 +1043,20 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
-esbuild@^0.8.52:
-  version "0.8.57"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.57.tgz#a42d02bc2b57c70bcd0ef897fe244766bb6dd926"
-  integrity sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA==
+esbuild@^0.9.3:
+  version "0.9.7"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.9.7.tgz#ea0d639cbe4b88ec25fbed4d6ff00c8d788ef70b"
+  integrity sha512-VtUf6aQ89VTmMLKrWHYG50uByMF4JQlVysb8dmg6cOgW8JnFCipmz7p+HNBl+RR3LLCuBxFGVauAe2wfnF9bLg==
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-eslint-plugin-vue@^7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.7.0.tgz#a90df4595e670821bf243bd2750ededdb74948b8"
-  integrity sha512-mYz4bpLGv5jx6YG/GvKkqbGSfV7uma2u1P3mLA41Q5vQl8W1MeuTneB8tfsLq6xxxesFubcrOC0BZBJ5R+eaCQ==
+eslint-plugin-vue@^7.8.0:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.8.0.tgz#cb0e85d65b65fa8d15e783fbb03c049d2c4cfdae"
+  integrity sha512-OGrnPz+PuYL2HmVyBHxm4mRjxW2kfFCQE6Hw9G6qOHs/Pcu0srOlCCW0FMa8SLzIEqxl8WuKoBSPcMnrjUG2vw==
   dependencies:
     eslint-utils "^2.1.0"
     natural-compare "^1.4.0"
@@ -1005,10 +1088,10 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint@^7.22.0:
-  version "7.22.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.22.0.tgz#07ecc61052fec63661a2cab6bd507127c07adc6f"
-  integrity sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==
+eslint@^7.23.0:
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.23.0.tgz#8d029d252f6e8cf45894b4bee08f5493f8e94325"
+  integrity sha512-kqvNVbdkjzpFy0XOszNwjkKzZ+6TcwCQ/h+ozlcIWwaimBBuhlQ4nN6kbiM2L+OjDcznkTJxzYfRFH92sx4a0Q==
   dependencies:
     "@babel/code-frame" "7.12.11"
     "@eslint/eslintrc" "^0.4.0"
@@ -1752,6 +1835,11 @@ prettier@^2.2.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
   integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
+print-js@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/print-js/-/print-js-1.6.0.tgz#692b046cf31992b46afa6c6d8a9db1c69d431d1f"
+  integrity sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==
+
 probe.gl@^3.1.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/probe.gl/-/probe.gl-3.3.1.tgz#4d60d0e896aa7eee6a6b1bfe4d59120f7d247f7a"
@@ -1926,7 +2014,7 @@ sortablejs@^1.13.0:
   resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.13.0.tgz#3ab2473f8c69ca63569e80b1cd1b5669b51269e9"
   integrity sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg==
 
-source-map@^0.6.1:
+source-map@0.6.1, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -2084,12 +2172,12 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
-vite@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.0.5.tgz#ac46857a3fa8686d077921e61bd48a986931df1d"
-  integrity sha512-QTgEDbq1WsTtr6j+++ewjhBFEk6c8v0xz4fb/OWJQKNYU8ZZtphOshwOqAlnarSstPBtWCBR0tsugXx6ajfoUg==
+vite@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.1.5.tgz#4857da441c62f7982c83cbd5f42a00330f20c9c1"
+  integrity sha512-tYU5iaYeUgQYvK/CNNz3tiJ8vYqPWfCE9IQ7K0iuzYovWw7lzty7KRYGWwV3CQPh0NKxWjOczAqiJsCL0Xb+Og==
   dependencies:
-    esbuild "^0.8.52"
+    esbuild "^0.9.3"
     postcss "^8.2.1"
     resolve "^1.19.0"
     rollup "^2.38.5"
@@ -2108,6 +2196,15 @@ vue-eslint-parser@^7.6.0:
     esquery "^1.4.0"
     lodash "^4.17.15"
 
+vue-i18n@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.0.0.tgz#a04c41d5ed3d5a068e923517bfaa0abcbc84e174"
+  integrity sha512-iks0eJDv/4cK/7tl/ooMUroNVVIGOK4kKS1PIHmPQk7QjT/sDfFM84vjPKgpARbw0GjJsOiADL43jufNfs9e9A==
+  dependencies:
+    "@intlify/core-base" "9.0.0"
+    "@intlify/shared" "9.0.0"
+    "@vue/devtools-api" "^6.0.0-beta.5"
+
 vue-router@^4.0.2:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.5.tgz#dd0a4134bc950c37aef64b973e9ee1008428d8fa"
@@ -2127,13 +2224,14 @@ vuex@^4.0.0-rc.2:
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.0.tgz#ac877aa76a9c45368c979471e461b520d38e6cf5"
   integrity sha512-56VPujlHscP5q/e7Jlpqc40sja4vOhC4uJD1llBCWolVI8ND4+VzisDVkUMl+z5y0MpIImW6HjhNc+ZvuizgOw==
 
-wangeditor@^4.6.9:
-  version "4.6.9"
-  resolved "https://registry.yarnpkg.com/wangeditor/-/wangeditor-4.6.9.tgz#3f478d364419e0c5b8bf3150c63990af532503a4"
-  integrity sha512-csQ8rRrbTaQtsaabOPfAIZkF8m1swxVE44CTSBijIhobxypxvienlANcbO/oWFW5DRLM2ygNG4lptVeIqzFjIA==
+wangeditor@^4.6.12:
+  version "4.6.12"
+  resolved "https://registry.yarnpkg.com/wangeditor/-/wangeditor-4.6.12.tgz#ec3149c68db421e084ddbe81c46cb0e1ad1f142f"
+  integrity sha512-8fvNLexkgn1Nnj//z0tRkhXIDiYNLuHC6DkdIJ9zt/0Y/0o/6ZWTSnIQiI/Megb3v2QVcn91f7xU/5LulzHyCw==
   dependencies:
     "@babel/runtime" "^7.11.2"
     "@babel/runtime-corejs3" "^7.11.2"
+    tslib "^2.1.0"
 
 which@^2.0.1:
   version "2.0.2"