Use i18n of element-plus

Author: sheepzh

src/app/index.ts

@@ -4,8 +4,8 @@ import 'element-plus/lib/theme-chalk/index.css'
 import './styles' // global css
 import installRouter from './router'
 import '../common/console-logger'
+import '../common/element-plus'
 
 const app: App = createApp(Main)
-
 installRouter(app)
 app.mount('#app')

src/app/layout/menu.ts

@@ -1,6 +1,5 @@
-import { computed, defineComponent, h, onMounted } from "@vue/runtime-core"
+import { defineComponent, h, onMounted } from "vue"
 import { ElMenu, ElMenuItem, ElSubmenu } from "element-plus"
-import { Ref, ref } from "vue"
 import { RouteLocationNormalizedLoaded, useRoute, useRouter } from "vue-router"
 import { t } from "../../common/vue-i18n"
 
@@ -41,12 +40,12 @@ const ALL_MENU: MenuItem[] = [
 
 const _default = defineComponent<{}, {}>(() => {
     const router = useRouter()
-    const currentRoute = useRoute().path
+    const currentRoute: RouteLocationNormalizedLoaded = useRoute()
 
     onMounted(() => document.title = t('menu.data'))
 
     const openMenu = (route: string, title: string) => {
-        if (currentRoute !== route) {
+        if (currentRoute.path !== route) {
             router.push(route)
             document.title = t(title)
         }
@@ -76,7 +75,7 @@ const _default = defineComponent<{}, {}>(() => {
 
     const menuItems = () => ALL_MENU.map(renderMenu)
 
-    return () => h(ElMenu, { defaultActive: currentRoute }, { default: menuItems })
+    return () => h(ElMenu, { defaultActive: currentRoute.path }, { default: menuItems })
 })
 
 export default _default

src/common/element-plus.ts

@@ -0,0 +1,11 @@
+// Process locale
+import { locale, Locale } from '../common/vue-i18n'
+import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
+import enLang from 'element-plus/lib/locale/lang/en'
+import { locale as eleLocale } from 'element-plus'
+
+if (locale === Locale.EN) {
+    eleLocale(enLang)
+} else if (locale === Locale.ZH_CN) {
+    eleLocale(zhLocale)
+}

src/common/vue-i18n.ts

@@ -1,13 +1,17 @@
 import { VNode } from 'vue'
 import { vueMessages, defaultLocale } from '../locale'
 
+export enum Locale {
+  ZH_CN = 'zh_CN',
+  EN = 'en'
+}
 
 // Standardize the locale code according to the Chrome locale code
-const chrome2I18n = {
-  'zh-CN': 'zh_CN',
-  'zh-TW': 'zh_TW',
-  'en-US': 'en',
-  'en-GB': 'en'
+const chrome2I18n: { [key: string]: Locale } = {
+  'zh-CN': Locale.ZH_CN,
+  'zh-TW': Locale.ZH_CN,
+  'en-US': Locale.EN,
+  'en-GB': Locale.EN
 }
 
 /**
@@ -25,7 +29,9 @@ const chromeLocale2ExtensionLocale = (chromeLocale: string) => {
   return chrome2I18n[chromeLocale] || chromeLocale
 }
 
-const message: any = vueMessages[chromeLocale2ExtensionLocale(chrome.i18n.getUILanguage())] || {}
+export const locale = chromeLocale2ExtensionLocale(chrome.i18n.getUILanguage())
+
+const message: any = vueMessages[locale] || {}
 
 export declare type I18nResultItem = VNode | string
 

src/locale/components/item.js

@@ -7,7 +7,6 @@ module.exports = {
         time: '打开次数',
         operation: {
             label: '操作',
-            minWidth: '220px',
             delete: '删除',
             add2Whitelist: '白名单',
             removeFromWhitelist: '启用',
@@ -27,7 +26,6 @@ module.exports = {
         time: 'Visit Count',
         operation: {
             label: 'Operations',
-            minWidth: '240px',
             delete: 'Delete',
             add2Whitelist: 'Whitelist',
             removeFromWhitelist: 'Enable',
@@ -47,7 +45,6 @@ module.exports = {
         time: '訪問回数',
         operation: {
             label: '操作',
-            minWidth: '240px',
             delete: '削除',
             add2Whitelist: 'ホワイトリスト',
             removeFromWhitelist: '有効にする',

src/popup/app.ts

@@ -34,7 +34,6 @@ const dataRef: Ref<SiteInfo[]> = ref([])
 const queryDataAndUpdate = () => {
     const param = { date: new Date(), mergeDomain: mergeDomainRef.value, sort: typeRef.value }
     timerDatabase.select(rows => {
-        console.log(rows)
         const result = []
         const other: SiteInfo = { host: t('popup.otherLabel'), focus: 0, total: 0, date: '0000-00-00', time: 0 }
         for (let i = 0; i < rows.length; i++) {