Support change language by user (#69)

Author: sheepzh

global.d.ts

@@ -46,6 +46,12 @@ declare namespace Timer {
          * @since 0.3.3
          */
         displayBadgeText: boolean
+        /**
+         * The language of this extension
+         * 
+         * @since 0.7.2
+         */
+        locale: LocaleOption
     }
 
     type StatisticsOption = {
@@ -67,4 +73,13 @@ declare namespace Timer {
     }
 
     type Option = PopupOption & AppearanceOption & StatisticsOption
+
+    /**
+     * @since 0.7.2
+     */
+    type Locale = 'zh_CN' | 'en' | 'ja'
+    /**
+     * @since 0.7.2
+     */
+    type LocaleOption = Locale | "default"
 }

src/app/components/option/components/appearance.ts

@@ -5,33 +5,78 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { ElCard, ElDivider, ElSwitch } from "element-plus"
+import { ElCard, ElDivider, ElIcon, ElMessageBox, ElOption, ElSelect, ElSwitch, ElTooltip } from "element-plus"
 import { defineComponent, h, Ref, ref } from "vue"
 import optionService from "@service/option-service"
 import { defaultAppearance } from "@util/constant/option"
 import { t } from "@app/locale"
-import { renderHeader, renderOptionItem, tagText } from "../common"
+import { renderHeader, renderOptionItem, tagText, tooltip } from "../common"
+import localeMessages from "@util/i18n/components/locale"
+import { InfoFilled } from "@element-plus/icons"
 
 const optionRef: Ref<Timer.AppearanceOption> = ref(defaultAppearance())
 optionService.getAllOption().then(option => optionRef.value = option)
 
-function updateOptionVal(key: keyof Timer.AppearanceOption, newVal: boolean) {
-    const value = optionRef.value
-    value[key] = newVal
-    optionService.setAppearanceOption(value)
-}
-
 const displayWhitelist = () => h(ElSwitch, {
     modelValue: optionRef.value.displayWhitelistMenu,
-    onChange: (newVal: boolean) => updateOptionVal('displayWhitelistMenu', newVal)
+    onChange: (newVal: boolean) => {
+        optionRef.value.displayWhitelistMenu = newVal
+        optionService.setAppearanceOption(optionRef.value)
+    }
 })
 
 const displayBadgeText = () => h(ElSwitch, {
     modelValue: optionRef.value.displayBadgeText,
-    onChange: (newVal: boolean) => updateOptionVal('displayBadgeText', newVal)
+    onChange: (newVal: boolean) => {
+        optionRef.value.displayBadgeText = newVal
+        optionService.setAppearanceOption(optionRef.value)
+    }
+})
+
+const allLocaleOptions: Timer.LocaleOption[] = ["default", "zh_CN", "en", "ja"]
+const locale = () => h(ElSelect, {
+    modelValue: optionRef.value.locale,
+    size: 'mini',
+    style: { width: '120px' },
+    onChange: async (newVal: Timer.LocaleOption) => {
+        optionRef.value.locale = newVal
+        await optionService.setAppearanceOption(optionRef.value)
+        ElMessageBox({
+            message: t(msg => msg.option.appearance.locale.changeConfirm),
+            type: "success",
+            confirmButtonText: t(msg => msg.option.appearance.locale.reloadButton),
+            // Cant close this on press ESC
+            closeOnPressEscape: false
+        }).then(() => { location.reload?.() })
+            .catch(() => {/* do nothing */ })
+    }
+}, {
+    default: () => allLocaleOptions.map(
+        locale => h(ElOption, {
+            value: locale, label: locale === "default"
+                ? t(msg => msg.option.appearance.locale.default)
+                : localeMessages[locale].name
+        })
+    )
 })
 
 const options = () => [
+    renderOptionItem({
+        input: locale(),
+        info: h(ElTooltip, {}, {
+            default: () => h(ElIcon, { size: 15 }, () => h(InfoFilled)),
+            content: () => [
+                t(msg => msg.option.appearance.locale.infoL1),
+                h('br'),
+                h('br'),
+                t(msg => msg.option.appearance.locale.infoL2)
+            ]
+        })
+    },
+        msg => msg.appearance.locale.label,
+        t(msg => msg.option.appearance.locale.default)
+    ),
+    h(ElDivider),
     renderOptionItem({
         input: displayWhitelist(),
         whitelist: tagText(msg => msg.option.appearance.whitelistItem),

src/app/components/option/components/popup.ts

@@ -43,7 +43,7 @@ const durationOptions = () => ALL_POPUP_DURATION.map(item => h(ElOption, { value
 const durationSelect = () => h(ElSelect, {
     modelValue: optionRef.value.defaultDuration,
     size: 'mini',
-    style: { width: '80px' },
+    style: { width: t(msg => msg.option.popup.durationWidth) },
     onChange: (val: Timer.PopupDuration) => {
         optionRef.value.defaultDuration = val
         optionService.setPopupOption(optionRef.value)

src/app/components/option/components/statistics.ts

@@ -45,7 +45,7 @@ const options = () => [
     h(ElDivider),
     renderOptionItem({
         input: countLocalFiles(),
-        localFileTime: tagText(msg => msg.option.statistics.localFilesTime),
+        localFileTime: tagText(msg => msg.option.statistics.localFileTime),
         info: tooltip(msg => msg.option.statistics.localFilesInfo)
     }, msg => msg.statistics.countLocalFiles, t(msg => msg.option.no)),
     h(ElDivider),

src/app/index.ts

@@ -12,17 +12,22 @@ import './styles' // global css
 import installRouter from "./router"
 import '../common/timer'
 import ElementPlus from 'element-plus'
-import { locale as appLocale, Locale } from "@util/i18n"
+import { initLocale, locale as appLocale } from "@util/i18n"
 import { Language } from "element-plus/lib/locale"
 
-const locales: { [locale in Locale]: () => Promise<{ default: Language }> } = {
+const locales: { [locale in Timer.Locale]: () => Promise<{ default: Language }> } = {
     zh_CN: () => import('element-plus/lib/locale/lang/zh-cn'),
     en: () => import('element-plus/lib/locale/lang/en'),
     ja: () => import('element-plus/lib/locale/lang/ja')
 }
 
-const app: App = createApp(Main)
-installRouter(app)
-app.mount('#app')
+async function main() {
+    await initLocale()
+    const app: App = createApp(Main)
+    installRouter(app)
+    app.mount('#app')
 
-locales[appLocale]?.()?.then(locale => app.use(ElementPlus, { locale: locale.default }))
+    locales[appLocale]?.()?.then(locale => app.use(ElementPlus, { locale: locale.default }))
+}
+
+main()

src/app/layout/menu.ts

@@ -8,12 +8,12 @@
 import { defineComponent, h, onMounted, ref, Ref } from "vue"
 import { ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, MenuItemRegistered } from "element-plus"
 import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-router"
-import { I18nKey, t, locale } from "@app/locale"
-import { Locale } from "@util/i18n"
+import { I18nKey, t } from "@app/locale"
 import { MenuMessage } from "@app/locale/components/menu"
 import { GITHUB_ISSUE_ADD, HOME_PAGE, MEAT_URL, ZH_FEEDBACK_PAGE } from "@util/constant/url"
 import { Aim, Calendar, ChatSquare, Folder, Food, HotWater, Rank, SetUp, Stopwatch, Sugar, Tickets, Timer } from "@element-plus/icons"
 import ElementIcon from "../element-ui/icon"
+import { locale } from "@util/i18n"
 
 declare type MenuItem = {
     title: keyof MenuMessage
@@ -33,7 +33,7 @@ declare type MenuGroup = {
  * 
  * @since 0.3.2
  */
-const realFeedbackLink: string = locale === Locale.ZH_CN ? ZH_FEEDBACK_PAGE : GITHUB_ISSUE_ADD
+const realFeedbackLink: string = locale === "zh_CN" ? ZH_FEEDBACK_PAGE : GITHUB_ISSUE_ADD
 
 const OTHER_MENU_ITEMS: MenuItem[] = [{
     title: 'feedback',

src/app/locale/components/option.ts

@@ -17,6 +17,7 @@ export type OptionMessage = {
         defaultDisplay: string
         displaySiteName: string
         duration: PopupDurationMessage
+        durationWidth: string
     }
     appearance: {
         title: string
@@ -28,14 +29,22 @@ export type OptionMessage = {
         displayBadgeText: string
         icon: string
         badgeTextContent: string
+        locale: {
+            label: string
+            default: string
+            changeConfirm: string
+            reloadButton: string
+            infoL1: string
+            infoL2: string
+        }
     }
     statistics: {
         title: string
         countWhenIdle: string
         idleTime: string
         idleTimeInfo: string
         countLocalFiles: string
-        localFilesTime: string
+        localFileTime: string
         localFilesInfo: string
         collectSiteName: string
         siteNameUsage: string
@@ -55,7 +64,8 @@ const _default: Messages<OptionMessage> = {
             max: '只显示前 {input} 条今日数据，剩下的条目合并显示',
             defaultDisplay: "打开时显示 {duration} {type}",
             displaySiteName: '{input}  显示时是否使用 {siteName} 来代替域名',
-            duration: popupDurationMessages.zh_CN
+            duration: popupDurationMessages.zh_CN,
+            durationWidth: "80px"
         },
         appearance: {
             title: '外观',
@@ -64,15 +74,23 @@ const _default: Messages<OptionMessage> = {
             contextMenu: '浏览器的右键菜单',
             displayBadgeText: '{input}  是否在 {icon} 上，显示 {timeInfo}',
             icon: '扩展图标',
-            badgeTextContent: '当前网站的今日浏览时长'
+            badgeTextContent: '当前网站的今日浏览时长',
+            locale: {
+                label: "语言设置 {info}  {input}",
+                infoL1: "由于源码的结构缺陷，语言设置功能目前只对功能页有效，今日数据弹窗页的语言设置始终跟随浏览器。",
+                infoL2: "作者将在后续版本中重构代码，实现弹窗页的语言切换功能，谢谢您的包涵！❤️❤️",
+                default: "跟随浏览器",
+                changeConfirm: "语言设置成功，请刷新页面！",
+                reloadButton: "刷新"
+            }
         },
         statistics: {
             title: '统计',
             countWhenIdle: '{input}  是否统计 {idleTime} {info}',
             idleTime: '休眠时间',
             idleTimeInfo: '长时间不操作（比如全屏观看视频），浏览器会自动进入休眠状态',
             countLocalFiles: '{input}  是否统计使用浏览器 {localFileTime} {info}',
-            localFilesTime: '阅读本地文件的时间',
+            localFileTime: '阅读本地文件的时间',
             localFilesInfo: '支持 PDF、图片、txt 以及 json 等格式',
             collectSiteName: '{input}  访问网站主页时，是否自动收集 {siteName} {siteNameUsage}',
             siteName: '网站的名称',
@@ -90,7 +108,8 @@ const _default: Messages<OptionMessage> = {
             max: 'Show the first {input} data items of today',
             defaultDisplay: "Show {duration} {type} when opened",
             displaySiteName: '{input}  Whether to display {siteName} instead of host',
-            duration: popupDurationMessages.en
+            duration: popupDurationMessages.en,
+            durationWidth: "110px"
         },
         appearance: {
             title: 'Appearance',
@@ -99,16 +118,24 @@ const _default: Messages<OptionMessage> = {
             contextMenu: 'the context menu',
             displayBadgeText: '{input}  Whether to display {timeInfo} in {icon}',
             icon: 'the icon of extension',
-            badgeTextContent: 'the browse time of current website'
+            badgeTextContent: 'the browse time of current website',
+            locale: {
+                label: "Language {info} {input}",
+                infoL1: "Due to the structural defects of the source code, the language setting function is currently only valid for this page. The language setting of today's data popup page is always the same as the browser.",
+                infoL2: "I will refactor the code in subsequent versions to realize the language switching of the popup page. Thank you for your patience! ❤️❤️",
+                default: "Same as browser",
+                changeConfirm: "The language has been changed successfully, please reload this page!",
+                reloadButton: "Reload"
+            }
         },
         statistics: {
             title: 'Statistics',
             countWhenIdle: '{input}  Whether to count {idleTime} {info}',
             idleTime: 'idle time',
             idleTimeInfo: 'If you do not operate for a long time (such as watching a video in full screen), the browser will automatically enter the idle state',
-            countLocalFiles: '{input}  Whether to count the time spent {localFilesTime} {info} in the browser',
-            localFilesTime: ' reading the local file ',
-            localFilesInfo: 'Contains formats such as PDF, image, txt and json',
+            countLocalFiles: '{input}  Whether to count the time spent {localFileTime} {info} in the browser',
+            localFileTime: ' reading the local file ',
+            localFilesInfo: 'Including PDF, image, txt and json',
             collectSiteName: '{input}  Whether to automatically collect the name of the website when visiting the homepage of the website',
             siteName: 'Site Name',
             siteNameUsage: 'The data only exists locally and will be used for display instead of the host to increase recognition.'
@@ -126,31 +153,40 @@ const _default: Messages<OptionMessage> = {
             max: '今日のデータは、最初の {input} データを示しています',
             defaultDisplay: "開くと {duration} {type} が表示されます",
             // Not translated
-            displaySiteName: '{input}  Whether to display {siteName} instead of host',
-            duration: popupDurationMessages.ja
+            displaySiteName: '{input}  ホストの代わりに {siteName} を表示するかどうか',
+            duration: popupDurationMessages.ja,
+            durationWidth: "100px"
         },
         appearance: {
             title: '外観',
             // Not translated
-            displayWhitelist: '{input}  Whether to display {whitelist} in {contextMenu}',
-            whitelistItem: 'the whitelist item',
-            contextMenu: 'the context menu',
-            displayBadgeText: '{input}  Whether to display {timeInfo} in {icon}',
-            icon: 'the icon of extension',
-            badgeTextContent: 'the browse time of current website'
+            displayWhitelist: '{input}  {contextMenu} に {whitelist} を表示するかどうか',
+            whitelistItem: 'ホワイトリスト機能',
+            contextMenu: 'コンテキストメニュー',
+            displayBadgeText: '{input}  {icon} に {timeInfo} を表示するかどうか',
+            icon: '拡張機能のアイコン',
+            badgeTextContent: '現在のウェブサイトの閲覧時間',
+            locale: {
+                label: "言語設定 {info} {input}",
+                default: "ブラウザと同じ",
+                infoL1: "ソースコードの構造上の欠陥により、言語設定機能は現在このページでのみ有効です。今日のデータポップアップページの言語設定は常にブラウザと同じです。",
+                infoL2: "ポップアップページの言語切り替えを実現するために、以降のバージョンでコードをリファクタリングします。もうしばらくお待ちください。❤️❤️",
+                changeConfirm: "言語が正常に変更されました。このページをリロードしてください。",
+                reloadButton: "リロード"
+            }
         },
         statistics: {
             title: '統計',
-            countWhenIdle: '{input}  Whether to count {idleTime} {info}',
-            idleTime: 'idle time',
-            idleTimeInfo: 'If you do not operate for a long time (such as watching a video in full screen), the browser will automatically enter the idle state',
-            countLocalFiles: '{input}  Whether to count the time spent {localFilesTime} {info} in the browser',
-            localFilesTime: ' reading the local file ',
-            localFilesInfo: 'Contains formats such as PDF, image, txt and json',
-            collectSiteName: '{input}  Whether to automatically collect the name of the website when visiting the homepage of the website',
-            siteName: 'site name',
-            siteNameUsage: 'The data only exists locally and will be used for display instead of the host to increase recognition.'
-                + 'Of course you can customize the name of each website.'
+            countWhenIdle: '{input}  {idleTime} をカウントするかどうか {info}',
+            idleTime: 'アイドルタイム',
+            idleTimeInfo: '長時間操作しない場合（フルスクリーンでビデオを見るなど）、ブラウザは自動的にアイドル状態になります',
+            countLocalFiles: '{input}  ブラウザで {localFileTime} {info} に費やされた時間をカウントするかどうか',
+            localFileTime: ' ローカルファイルの読み取り ',
+            localFilesInfo: 'PDF、画像、txt、jsonを含む',
+            collectSiteName: '{input}  ウェブサイトのホームページにアクセスしたときにウェブサイトの名前を自動的に収集するかどうか',
+            siteName: 'サイト名',
+            siteNameUsage: 'データはローカルにのみ存在し、認識を高めるためにホストの代わりに表示に使用されます。'
+                + 'もちろん、各Webサイトの名前をカスタマイズできます。'
         },
         resetButton: 'リセット',
         resetSuccess: 'デフォルトに正常にリセット',

src/app/locale/components/whitelist.ts

@@ -42,11 +42,11 @@ const _default: Messages<WhitelistMessage> = {
         addConfirmMsg: '{url} がホワイトリストに追加されると、このWebサイトの統計はカウントされなくなります。',
         removeConfirmMsg: '{url} はホワイトリストから削除されます',
         duplicateMsg: '繰り返される',
-        infoAlertTitle: 'You can set the whitelist of site in this page',
-        infoAlert0: 'Sites in the whitelist will not be counted.',
-        infoAlert1: 'Sites in the whitelist will not be limited.',
+        infoAlertTitle: 'このページでサイトのホワイトリストを設定できます',
+        infoAlert0: 'ホワイトリストのサイトはカウントされません。',
+        infoAlert1: 'ホワイトリストのサイトは制限されません。',
         placeholder: 'URL',
-        errorInput: "Invalid URL"
+        errorInput: "無効なURL"
     }
 }
 

src/app/locale/index.ts

@@ -5,21 +5,17 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { I18nKey as _I18nKey, locale as _locale, t as _t } from "@util/i18n"
+import { I18nKey as _I18nKey, locale, t as _t } from "@util/i18n"
 import { tN as _tN } from "@util/i18n/i18n-vue"
 import messages, { AppMessage } from "./messages"
 
-const message = messages[_locale]
-
 export type I18nKey = _I18nKey<AppMessage>
 
 export function t(key: I18nKey, param?: any) {
     const props = { key, param }
-    return _t<AppMessage>(message, props)
+    return _t<AppMessage>(messages[locale], props)
 }
 
 export function tN(key: I18nKey, param?: any) {
-    return _tN<AppMessage>(message, { key, param })
-}
-
-export const locale = _locale
+    return _tN<AppMessage>(messages[locale], { key, param })
+}