Translate topbar command menu (#1784)

* Rename script

* Translate menu labels

* Update translations

* Display translated menu items

lint-staged.config.js

@@ -10,8 +10,8 @@ export default {
 
   './src/locales/en.json': () => ['lobe-i18n locale'],
 
-  './src/constants/coreSettings.ts': () => [
-    'tsx scripts/update-setting-locale.ts',
+  './src/constants/*.ts': () => [
+    'tsx scripts/update-constants-locale.ts',
     'lobe-i18n locale'
   ]
 }

scripts/update-constants-locale.ts

@@ -0,0 +1,57 @@
+import fs from 'fs'
+import { CORE_SETTINGS } from '../src/constants/coreSettings'
+import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
+
+interface SettingLocale {
+  name: string
+  tooltip?: string
+}
+
+const extractSettingLocaleStrings = (): Record<string, SettingLocale> => {
+  return Object.fromEntries(
+    CORE_SETTINGS.sort((a, b) => a.id.localeCompare(b.id)).map((setting) => [
+      // '.' is not allowed in JSON keys, so we replace it with '_'
+      setting.id.replace(/\./g, '_'),
+      {
+        name: setting.name,
+        tooltip: setting.tooltip
+      }
+    ])
+  )
+}
+
+const extractMenuCommandLocaleStrings = (): Record<string, string> => {
+  const labels = new Set<string>()
+  for (const [category, _] of CORE_MENU_COMMANDS) {
+    category.forEach((category) => labels.add(category))
+  }
+  return Object.fromEntries(Array.from(labels).map((label) => [label, label]))
+}
+
+const main = () => {
+  const settingLocaleStrings = extractSettingLocaleStrings()
+  const menuCommandLocaleStrings = extractMenuCommandLocaleStrings()
+
+  const localePath = './src/locales/en.json'
+  const globalLocale = JSON.parse(fs.readFileSync(localePath, 'utf-8'))
+  fs.writeFileSync(
+    localePath,
+    JSON.stringify(
+      {
+        ...globalLocale,
+        settingsDialog: {
+          ...(globalLocale.settingsDialog ?? {}),
+          ...settingLocaleStrings
+        },
+        menuLabels: {
+          ...(globalLocale.menuLabels ?? {}),
+          ...menuCommandLocaleStrings
+        }
+      },
+      null,
+      2
+    )
+  )
+}
+
+main()

scripts/update-setting-locale.ts

@@ -1,39 +0,0 @@
-import fs from 'fs'
-import { CORE_SETTINGS } from '../src/constants/coreSettings'
-
-interface SettingLocale {
-  name: string
-  tooltip?: string
-}
-
-const extractLocaleStrings = (): Record<string, SettingLocale> => {
-  return Object.fromEntries(
-    CORE_SETTINGS.sort((a, b) => a.id.localeCompare(b.id)).map((setting) => [
-      // '.' is not allowed in JSON keys, so we replace it with '_'
-      setting.id.replace(/\./g, '_'),
-      {
-        name: setting.name,
-        tooltip: setting.tooltip
-      }
-    ])
-  )
-}
-
-const main = () => {
-  const localeStrings = extractLocaleStrings()
-  const localePath = './src/locales/en.json'
-  const globalLocale = JSON.parse(fs.readFileSync(localePath, 'utf-8'))
-  fs.writeFileSync(
-    localePath,
-    JSON.stringify(
-      {
-        ...globalLocale,
-        settingsDialog: { ...globalLocale.settingsDialog, ...localeStrings }
-      },
-      null,
-      2
-    )
-  )
-}
-
-main()

src/components/topbar/CommandMenubar.vue

@@ -1,6 +1,6 @@
 <template>
   <Menubar
-    :model="items"
+    :model="translatedItems"
     class="top-menubar border-none p-0 bg-transparent"
     :pt="{
       rootList: 'gap-0 flex-nowrap w-auto',
@@ -32,7 +32,9 @@
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSettingStore } from '@/stores/settingStore'
 import Menubar from 'primevue/menubar'
+import type { MenuItem } from 'primevue/menuitem'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const settingStore = useSettingStore()
 const dropdownDirection = computed(() =>
@@ -40,7 +42,25 @@ const dropdownDirection = computed(() =>
 )
 
 const menuItemsStore = useMenuItemStore()
-const items = menuItemsStore.menuItems
+const { t } = useI18n()
+const translateMenuItem = (item: MenuItem): MenuItem => {
+  const translatedLabel = item.label
+    ? t(
+        `menuLabels.${item.label}`,
+        typeof item.label === 'function' ? item.label() : item.label
+      )
+    : undefined
+
+  return {
+    ...item,
+    label: translatedLabel,
+    items: item.items?.map(translateMenuItem)
+  }
+}
+
+const translatedItems = computed(() =>
+  menuItemsStore.menuItems.map(translateMenuItem)
+)
 </script>
 
 <style scoped>

src/locales/en.json

@@ -486,5 +486,10 @@
     "resume": "Resume Download",
     "cancel": "Cancel Download",
     "cancelled": "Cancelled"
+  },
+  "menuLabels": {
+    "Workflow": "Workflow",
+    "Edit": "Edit",
+    "Help": "Help"
   }
 }

src/locales/ja.json

@@ -120,6 +120,11 @@
     "showMenu": "メニューを表示",
     "toggleBottomPanel": "下部パネルを切り替え"
   },
+  "menuLabels": {
+    "Edit": "編集",
+    "Help": "ヘルプ",
+    "Workflow": "ワークフロー"
+  },
   "newFolder": "新しいフォルダー",
   "noResultsFound": "結果が見つかりませんでした",
   "noTasksFound": "タスクが見つかりませんでした",

src/locales/ru.json

@@ -120,6 +120,11 @@
     "showMenu": "Показать меню",
     "toggleBottomPanel": "Переключить нижнюю панель"
   },
+  "menuLabels": {
+    "Edit": "Редактировать",
+    "Help": "Помощь",
+    "Workflow": "Рабочий процесс"
+  },
   "newFolder": "Новая папка",
   "noResultsFound": "Ничего не найдено",
   "noTasksFound": "Задачи не найдены",

src/locales/zh.json

@@ -120,6 +120,11 @@
     "showMenu": "显示菜单",
     "toggleBottomPanel": "底部面板"
   },
+  "menuLabels": {
+    "Edit": "编辑",
+    "Help": "帮助",
+    "Workflow": "工作流"
+  },
   "newFolder": "新建文件夹",
   "noResultsFound": "未找到结果",
   "noTasksFound": "未找到任务",