fixbug: 修改国际化问题

src/App.vue

@@ -14,12 +14,12 @@ import { useStore } from '@/store'
 // Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
 
 const store = useStore()
-const mutation = useCurrentInstance().globalProperties.$mutation
+const { $mutation } = useCurrentInstance()
 const locstorCollapse = localStorage.getItem('appCollapseMenu')
 let locMenu: boolean
 if (locstorCollapse) locMenu = JSON.parse(locstorCollapse)
 else locMenu = false
-store.commit(mutation.SET_COLLAPSEMENU, locMenu)
+store.commit($mutation.SET_COLLAPSEMENU, locMenu)
 
 // const req = async () => {
 // 	const res = await request.post<void>({ url: '/mock_api/getUserInfo' })

src/hooks/useCurrentInstance.ts

@@ -4,13 +4,6 @@ export function useCurrentInstance() {
 	const { appContext } = getCurrentInstance() as ComponentInternalInstance
 	const globalProperties = appContext.config.globalProperties
 	return {
-		globalProperties,
-	}
-}
-
-export function getProxy() {
-	const { proxy } = getCurrentInstance() as ComponentInternalInstance
-	return {
-		proxy,
+		...globalProperties,
 	}
 }

src/hooks/useI18n.ts

@@ -0,0 +1,19 @@
+import i18n from '@/locales/index'
+import zh_Cn from 'element-plus/lib/locale/lang/zh-cn'
+import en from 'element-plus/lib/locale/lang/en'
+import { computed } from '@vue/reactivity'
+
+export const useI18n = () => i18n.global
+
+export const t = (key: string) => key
+
+export const deffElementLocale = () => {
+	const { locale } = useI18n()
+
+	const tolocale = computed(() => {
+		if (locale.value == 'en') return en
+		else return zh_Cn
+	})
+
+	return { tolocale }
+}

src/layouts/components/Breadcrumb/Breadcrumb.vue

@@ -17,11 +17,11 @@
 				<span
 					v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
 					class="no-redirect"
-					>{{ item.meta.title }}</span
+					>{{ t(`${item.meta.title}`) }}</span
 				>
-				<a v-else class="redirect" @click.prevent="handleLink(item)">{{
-					item.meta.title
-				}}</a>
+				<a v-else class="redirect" @click.prevent="handleLink(item)">
+					{{ t(`${item.meta.title}`) }}
+				</a>
 			</el-breadcrumb-item>
 		</el-breadcrumb>
 	</div>
@@ -35,6 +35,9 @@ import { useCurrentInstance } from '@/hooks/useCurrentInstance'
 import { useStore } from '@/store/index'
 import { getAppCollapseMenu } from '@/hooks/appWindow'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from '@/hooks/useI18n'
+
+const { t } = useI18n()
 
 const levelList = ref<Array<RouteLocationMatched>>([])
 // 获取路由配置
@@ -76,10 +79,10 @@ const store = useStore()
 // 当前是否折叠导航栏
 const isCollapseMenu = getAppCollapseMenu()
 // 获取Mutation 事件常量
-const mutation = useCurrentInstance().globalProperties.$mutation
+const { $mutation } = useCurrentInstance()
 // 折叠菜单事件
 const handerShowElmenu = () => {
-	store.commit(mutation.SET_COLLAPSEMENU, !store.state.app.collapseMenu)
+	store.commit($mutation.SET_COLLAPSEMENU, !store.state.app.collapseMenu)
 }
 </script>
 

src/layouts/components/Navbart/index.vue

@@ -1,5 +1,7 @@
 <template>
 	<div class="navbar">
+		<div @click="tolochos('zh-ch')">zh</div>
+		<div @click="tolochos('en')">en</div>
 		<!-- <el-select v-model="value" placeholder="请选择" @change="toggleTheme">
 			<el-option
 				v-for="item in options"
@@ -8,15 +10,16 @@
 				:value="item.value"
 			>
 			</el-option>
-		</el-select> -->
+		</el-select>-->
 		<!-- <div class="pattern">
 
-  </div> -->
+		</div>-->
 	</div>
 </template>
 
 <script setup lang="ts">
 // import { ref } from 'vue'
+import { useI18n } from '@/hooks/useI18n'
 
 // const options = ref([
 // 	{ name: '123', value: 'variables-theme-day' },
@@ -28,6 +31,10 @@
 // const toggleTheme = (scopeName = 'theme-default') => {
 // 	document.documentElement.className = scopeName
 // }
+const i18n = useI18n()
+const tolochos = (key: string) => {
+	i18n.locale.value = key
+}
 </script>
 
 <style lang="scss" scoped>

src/layouts/components/Sidebar/Item.vue

@@ -1,10 +1,11 @@
 <template>
 	<SvgIcon :class-name="className" :name="icon" color="#e3e3e3"></SvgIcon>
-	<span v-if="title">{{ title }}</span>
+	<span v-if="title">{{ t(title) }}</span>
 </template>
 
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useI18n } from '@/hooks/useI18n'
 defineProps({
 	icon: {
 		type: String,
@@ -19,6 +20,7 @@ defineProps({
 		default: '',
 	},
 })
+const { t } = useI18n()
 </script>
 
 <style scoped>

src/layouts/index.vue

@@ -10,7 +10,9 @@
 				<Breadcrumb />
 			</div>
 			<!-- 内容区 -->
-			<AppMain />
+			<el-config-provider :locale="tolocale">
+				<AppMain />
+			</el-config-provider>
 		</div>
 	</div>
 </template>
@@ -21,6 +23,10 @@ import NavBart from './components/Navbart/index.vue'
 import Sidebar from './components/Sidebar/index.vue'
 import Breadcrumb from './components/Breadcrumb/Breadcrumb.vue'
 import { getAppCollapseMenu } from '@/hooks/appWindow'
+import { ElConfigProvider } from 'element-plus'
+import { deffElementLocale } from '@/hooks/useI18n'
+
+const { tolocale } = deffElementLocale()
 
 const isCollapseMenu = getAppCollapseMenu()
 </script>

src/locales/en.ts

@@ -1,10 +1,12 @@
-import enLocale from 'element-plus/es/locale/lang/en'
-
 export const lang = {
-	el: enLocale.el,
 	login: {
 		title: 'login',
 	},
+	route: {
+		userInfo: 'UserInfo',
+		userList: 'UserList',
+		userDateil: 'UserDateil',
+	},
 	api: {
 		errMsg401: 'The user does not have permission!',
 		errMsg403: 'The user is authorized, but access is forbidden!',

src/locales/index.ts

@@ -1,3 +1,4 @@
+import { App } from 'vue'
 import { createI18n } from 'vue-i18n'
 // import ElementLocale from 'element-plus/es/locale'
 
@@ -15,4 +16,8 @@ const i18n = createI18n({
 	messages,
 })
 
+export const configMainI18n = (app: App<Element>) => {
+	app.use(i18n)
+}
+
 export default i18n

src/locales/zh-ch.ts

@@ -1,10 +1,12 @@
-import zhTWLocale from 'element-plus/es/locale/lang/zh-tw'
-
 export const lang = {
-	el: zhTWLocale.el,
 	login: {
 		title: '登陆',
 	},
+	route: {
+		userInfo: '用户管理',
+		userList: '用户列表',
+		userDateil: '用户详情',
+	},
 	api: {
 		errMsg401: '用户没有权限!',
 		errMsg403: '用户得到授权，但是访问是被禁止的。!',

src/main.ts

@@ -1,31 +1,30 @@
 import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
 
-import 'element-plus/dist/index.css'
-import 'es6-promise/auto'
-import 'virtual:svg-icons-register'
-
-import { store, key } from './store'
-import Router from './router'
-import I18n from './locales'
 import App from './App.vue'
 
 import {
-	configMainComponent,
+	configMainElementPlus,
 	configMainGlobalProperties,
 } from './utils/mainConfig'
+import { configMainStore } from './store'
+import { configMainI18n } from './locales'
+import { configMainRouter } from './router'
 
 const app = createApp(App)
 
-configMainComponent(app)
-
+// 全局钩子
 configMainGlobalProperties(app)
 
-app
-	.use(store, key)
-	.use(Router)
-	.use(ElementPlus, {
-		i18n: I18n.global.t,
-	})
-	.use(I18n)
-	.mount('#app')
+// Vuex
+configMainStore(app)
+
+// 路由
+configMainRouter(app)
+
+// 国际化
+configMainI18n(app)
+
+// ElementPlus
+configMainElementPlus(app)
+
+app.mount('#app')

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import { safeManagerRoutes } from './otherRoute'
 import { AppRouteRecordRaw } from '#/route'
+import { App } from 'vue'
 // import Layout from '@/layouts/index.vue'
 
 const routes: Array<AppRouteRecordRaw> = [
@@ -12,7 +13,11 @@ const routes: Array<AppRouteRecordRaw> = [
 	},
 ]
 
-export default createRouter({
+const route = createRouter({
 	history: createWebHistory(''),
 	routes: routes as unknown as RouteRecordRaw[],
 })
+
+export const configMainRouter = (app: App<Element>) => {
+	app.use(route)
+}

src/router/otherRoute.ts

@@ -1,6 +1,7 @@
 /* Layout */
 import Layout from '@/layouts/index.vue'
 import { AppRouteRecordRaw } from '#/route'
+import { t } from '@/hooks/useI18n'
 
 export const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 	{
@@ -9,50 +10,50 @@ export const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 		redirect: '/useradmin/userlist/',
 		name: '用户管理',
 		alwaysShow: true,
-		meta: { title: '用户管理', icon: 'daosanjiao' },
+		meta: { title: t('route.userInfo'), icon: 'daosanjiao' },
 		children: [
 			{
 				path: 'userlist',
 				name: 'userlist',
 				component: () => import('@/views/useradmin/userlist/index.vue'),
-				meta: { title: '用户列表', icon: 'daosanjiao' },
+				meta: { title: t('route.userList'), icon: 'daosanjiao' },
 			},
 			{
 				path: 'index',
 				name: 'index',
 				component: () => import('@/views/index/index.vue'),
-				meta: { title: 'index', icon: 'daosanjiao' },
+				meta: { title: t('route.userDateil'), icon: 'daosanjiao' },
 			},
 		],
 	},
-	{
-		path: '/date',
-		component: Layout,
-		redirect: '/date/dateList/',
-		name: 'date',
-		alwaysShow: true,
-		meta: { title: '详情管理', icon: 'el-icon-user-solid' },
-		children: [
-			{
-				path: 'dateList',
-				name: 'dateList',
-				component: () => import('@/views/useradmin/userlist/index.vue'),
-				meta: { title: '详情列表', icon: 'el-icon-s-tools' },
-			},
-		],
-	},
-	{
-		path: '/info',
-		name: 'info',
-		component: Layout,
-		children: [
-			{
-				path: 'infoList',
-				name: 'infoList',
-				component: () => import('@/views/index/index.vue'),
-				meta: { title: '首页列表', icon: 'el-icon-s-tools' },
-			},
-		],
-		meta: { title: '首页列表', icon: 'el-icon-s-tools' },
-	},
+	// {
+	// 	path: '/date',
+	// 	component: Layout,
+	// 	redirect: '/date/dateList/',
+	// 	name: 'date',
+	// 	alwaysShow: true,
+	// 	meta: { title: '详情管理', icon: 'el-icon-user-solid' },
+	// 	children: [
+	// 		{
+	// 			path: 'dateList',
+	// 			name: 'dateList',
+	// 			component: () => import('@/views/useradmin/userlist/index.vue'),
+	// 			meta: { title: '详情列表', icon: 'el-icon-s-tools' },
+	// 		},
+	// 	],
+	// },
+	// {
+	// 	path: '/info',
+	// 	name: 'info',
+	// 	component: Layout,
+	// 	children: [
+	// 		{
+	// 			path: 'infoList',
+	// 			name: 'infoList',
+	// 			component: () => import('@/views/index/index.vue'),
+	// 			meta: { title: '首页列表', icon: 'el-icon-s-tools' },
+	// 		},
+	// 	],
+	// 	meta: { title: '首页列表', icon: 'el-icon-s-tools' },
+	// },
 ]