更新国际化支持：为插件卡片及相关组件添加多语言文本，提升用户体验

src/components/cards/PluginAppCard.vue

@@ -7,6 +7,7 @@ import noImage from '@images/logos/plugin.png'
 import { getDominantColor } from '@/@core/utils/image'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
+import { useI18n } from 'vue-i18n'
 
 // 输入参数
 const props = defineProps({
@@ -19,6 +20,9 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['install'])
 
+// 多语言
+const { t } = useI18n()
+
 // 背景颜色
 const backgroundColor = ref('#28A9E1')
 
@@ -59,7 +63,10 @@ async function installPlugin() {
   try {
     // 显示等待提示框
     progressDialog.value = true
-    progressText.value = `正在安装 ${props.plugin?.plugin_name} v${props?.plugin?.plugin_version} ...`
+    progressText.value = t('plugin.installing', {
+      name: props.plugin?.plugin_name,
+      version: props?.plugin?.plugin_version,
+    })
 
     const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
       params: {
@@ -72,12 +79,12 @@ async function installPlugin() {
     progressDialog.value = false
 
     if (result.success) {
-      $toast.success(`插件 ${props.plugin?.plugin_name} 安装成功！`)
+      $toast.success(t('plugin.installSuccess', { name: props.plugin?.plugin_name }))
       detailDialog.value = false
       // 通知父组件刷新
       emit('install')
     } else {
-      $toast.error(`插件 ${props.plugin?.plugin_name} 安装失败：${result.message}`)
+      $toast.error(t('plugin.installFailed', { name: props.plugin?.plugin_name, message: result.message }))
     }
   } catch (error) {
     console.error(error)
@@ -125,7 +132,7 @@ function showUpdateHistory() {
 // 弹出菜单
 const dropdownItems = ref([
   {
-    title: '项目主页',
+    title: t('plugin.projectHome'),
     value: 1,
     show: true,
     props: {
@@ -134,7 +141,7 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '更新说明',
+    title: t('plugin.updateHistory'),
     value: 2,
     show: !isNullOrEmptyObject(props.plugin?.history || {}),
     props: {
@@ -225,7 +232,7 @@ const dropdownItems = ref([
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
     <!-- 更新日志 -->
     <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
-      <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
+      <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
         <VDialogCloseBtn @click="releaseDialog = false" />
         <VDivider />
         <VersionHistory :history="props.plugin?.history" />
@@ -263,13 +270,13 @@ const dropdownItems = ref([
                   <VList lines="one">
                     <VListItem class="ps-0">
                       <VListItemTitle class="text-center text-md-left">
-                        <span class="font-weight-medium">版本：</span>
+                        <span class="font-weight-medium">{{ t('common.version') }}：</span>
                         <span class="text-body-1"> v{{ props.plugin?.plugin_version }}</span>
                       </VListItemTitle>
                     </VListItem>
                     <VListItem class="ps-0">
                       <VListItemTitle class="text-center text-md-left">
-                        <span class="font-weight-medium">作者：</span>
+                        <span class="font-weight-medium">{{ t('common.author') }}：</span>
                         <span class="text-body-1 cursor-pointer" @click="visitPluginPage">
                           {{ props.plugin?.plugin_author }}
                         </span>
@@ -277,9 +284,13 @@ const dropdownItems = ref([
                     </VListItem>
                   </VList>
                   <div class="text-center text-md-left">
-                    <VBtn color="primary" @click="installPlugin" prepend-icon="mdi-download"> 安装到本地 </VBtn>
+                    <VBtn color="primary" @click="installPlugin" prepend-icon="mdi-download">{{
+                      t('plugin.installToLocal')
+                    }}</VBtn>
                     <div class="text-xs mt-2" v-if="props.count">
-                      <VIcon icon="mdi-fire" />共 {{ props.count?.toLocaleString() }} 次下载
+                      <VIcon icon="mdi-fire" />{{
+                        t('plugin.totalDownloads', { count: props.count?.toLocaleString() })
+                      }}
                     </div>
                   </div>
                 </VCardItem>

src/components/cards/PluginCard.vue

@@ -10,6 +10,7 @@ import VersionHistory from '@/components/misc/VersionHistory.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
 import PluginDataDialog from '../dialog/PluginDataDialog.vue'
+import { useI18n } from 'vue-i18n'
 
 // 输入参数
 const props = defineProps({
@@ -23,6 +24,9 @@ const props = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['remove', 'save', 'actionDone'])
 
+// 多语言
+const { t } = useI18n()
+
 // 背景颜色
 const backgroundColor = ref('#28A9E1')
 
@@ -97,8 +101,8 @@ function showUpdateHistory() {
 // 调用API卸载插件
 async function uninstallPlugin() {
   const isConfirmed = await createConfirm({
-    title: '确认',
+    title: t('common.confirm'),
-    content: `是否确认卸载插件 ${props.plugin?.plugin_name} ?`,
+    content: t('plugin.confirmUninstall', { name: props.plugin?.plugin_name }),
   })
 
   if (!isConfirmed) return
@@ -106,17 +110,17 @@ async function uninstallPlugin() {
   try {
     // 显示等待提示框
     progressDialog.value = true
-    progressText.value = `正在卸载 ${props.plugin?.plugin_name} ...`
+    progressText.value = t('plugin.uninstalling', { name: props.plugin?.plugin_name })
     const result: { [key: string]: any } = await api.delete(`plugin/${props.plugin?.id}`)
     // 隐藏等待提示框
     progressDialog.value = false
     if (result.success) {
-      $toast.success(`插件 ${props.plugin?.plugin_name} 已卸载`)
+      $toast.success(t('plugin.uninstallSuccess', { name: props.plugin?.plugin_name }))
 
       // 通知父组件刷新
       emit('remove')
     } else {
-      $toast.error(`插件 ${props.plugin?.plugin_name} 卸载失败：${result.message}}`)
+      $toast.error(t('plugin.uninstallFailed', { name: props.plugin?.plugin_name, message: result.message }))
     }
   } catch (error) {
     console.error(error)
@@ -157,8 +161,8 @@ const authorPath: Ref<string> = computed(() => {
 // 重置插件
 async function resetPlugin() {
   const isConfirmed = await createConfirm({
-    title: '确认',
+    title: t('common.confirm'),
-    content: `此操作将恢复插件 ${props.plugin?.plugin_name} 的默认设置，并清除所有相关数据，确定要继续吗？`,
+    content: t('plugin.confirmReset', { name: props.plugin?.plugin_name }),
   })
 
   if (!isConfirmed) return
@@ -166,11 +170,11 @@ async function resetPlugin() {
   try {
     const result: { [key: string]: any } = await api.get(`plugin/reset/${props.plugin?.id}`)
     if (result.success) {
-      $toast.success(`插件 ${props.plugin?.plugin_name} 数据已重置`)
+      $toast.success(t('plugin.resetSuccess', { name: props.plugin?.plugin_name }))
       // 通知父组件刷新
       emit('save')
     } else {
-      $toast.error(`插件 ${props.plugin?.plugin_name} 重置失败：${result.message}}`)
+      $toast.error(t('plugin.resetFailed', { name: props.plugin?.plugin_name, message: result.message }))
     }
   } catch (error) {
     console.error(error)
@@ -183,7 +187,7 @@ async function updatePlugin() {
     releaseDialog.value = false
     // 显示等待提示框
     progressDialog.value = true
-    progressText.value = `正在更新 ${props.plugin?.plugin_name} ...`
+    progressText.value = t('plugin.updating', { name: props.plugin?.plugin_name })
 
     const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
       params: {
@@ -196,12 +200,12 @@ async function updatePlugin() {
     progressDialog.value = false
 
     if (result.success) {
-      $toast.success(`插件 ${props.plugin?.plugin_name} 更新成功！`)
+      $toast.success(t('plugin.updateSuccess', { name: props.plugin?.plugin_name }))
 
       // 通知父组件刷新
       emit('save')
     } else {
-      $toast.error(`插件 ${props.plugin?.plugin_name} 更新失败：${result.message}`)
+      $toast.error(t('plugin.updateFailed', { name: props.plugin?.plugin_name, message: result.message }))
     }
   } catch (error) {
     console.error(error)
@@ -236,7 +240,7 @@ function configDone() {
 // 弹出菜单
 const dropdownItems = ref([
   {
-    title: '查看数据',
+    title: t('plugin.viewData'),
     value: 1,
     show: props.plugin?.has_page,
     props: {
@@ -245,7 +249,7 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '设置',
+    title: t('plugin.settings'),
     value: 2,
     show: true,
     props: {
@@ -254,7 +258,7 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '更新',
+    title: t('plugin.update'),
     value: 3,
     show: props.plugin?.has_update,
     props: {
@@ -264,7 +268,7 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '重置',
+    title: t('plugin.reset'),
     value: 4,
     show: true,
     props: {
@@ -274,7 +278,7 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '卸载',
+    title: t('plugin.uninstall'),
     value: 5,
     show: true,
     props: {
@@ -284,7 +288,7 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '查看日志',
+    title: t('plugin.viewLogs'),
     value: 6,
     show: true,
     props: {
@@ -295,7 +299,7 @@ const dropdownItems = ref([
     },
   },
   {
-    title: '作者主页',
+    title: t('plugin.authorHome'),
     value: 7,
     show: true,
     props: {
@@ -436,7 +440,7 @@ watch(
 
     <!-- 更新日志 -->
     <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" max-height="80vh" scrollable>
-      <VCard :title="`${props.plugin?.plugin_name} 更新说明`">
+      <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
         <VDialogCloseBtn @click="releaseDialog = false" />
         <VDivider />
         <VersionHistory :history="props.plugin?.history" />
@@ -446,7 +450,7 @@ watch(
             <template #prepend>
               <VIcon icon="mdi-arrow-up-circle-outline" />
             </template>
-            更新到最新版本
+            {{ t('plugin.updateToLatest') }}
           </VBtn>
         </VCardItem>
       </VCard>

src/locales/en-US.ts

@@ -3,6 +3,9 @@ export default {
     confirm: 'Confirm',
     cancel: 'Cancel',
     save: 'Save',
+    close: 'Close',
+    version: 'Version',
+    author: 'Author',
     delete: 'Delete',
     edit: 'Edit',
     add: 'Add',
@@ -1624,7 +1627,7 @@ export default {
     uninstalling: 'Uninstalling {name} ...',
     uninstallSuccess: 'Plugin {name} uninstalled successfully!',
     uninstallFailed: 'Plugin {name} uninstallation failed: {message}',
-    updating: 'Updating {name} to v{version} ...',
+    updating: 'Updating {name} ...',
     updateSuccess: 'Plugin {name} updated successfully!',
     updateFailed: 'Plugin {name} update failed: {message}',
     noPlugins: 'No plugins installed',
@@ -1635,6 +1638,24 @@ export default {
     enable: 'Enable',
     disable: 'Disable',
     settings: 'Settings',
+    projectHome: 'Project Home',
+    updateHistory: 'Update History',
+    installToLocal: 'Install to Local',
+    totalDownloads: 'Total {count} downloads',
+    viewData: 'View Data',
+    update: 'Update',
+    reset: 'Reset',
+    uninstall: 'Uninstall',
+    viewLogs: 'View Logs',
+    authorHome: 'Author Home',
+    confirmUninstall: 'Are you sure you want to uninstall plugin {name}?',
+    confirmReset:
+      'This operation will restore plugin {name} to default settings and clear all related data. Are you sure you want to continue?',
+    resetSuccess: 'Plugin {name} data has been reset',
+    resetFailed: 'Plugin {name} reset failed: {message}',
+    updateHistoryTitle: '{name} Update History',
+    updateToLatest: 'Update to Latest Version',
+    updatingTo: 'Updating {name} to v{version} ...',
   },
   profile: {
     personalInfo: 'Personal Information',

src/locales/zh-CN.ts

@@ -3,6 +3,9 @@ export default {
     confirm: '确认',
     cancel: '取消',
     save: '保存',
+    close: '关闭',
+    version: '版本',
+    author: '作者',
     delete: '删除',
     edit: '编辑',
     add: '添加',
@@ -1601,7 +1604,7 @@ export default {
     uninstalling: '正在卸载 {name} ...',
     uninstallSuccess: '插件 {name} 卸载成功！',
     uninstallFailed: '插件 {name} 卸载失败：{message}',
-    updating: '正在更新 {name} 至 v{version} ...',
+    updating: '正在更新 {name} ...',
     updateSuccess: '插件 {name} 更新成功！',
     updateFailed: '插件 {name} 更新失败：{message}',
     noPlugins: '没有安装插件',
@@ -1612,6 +1615,23 @@ export default {
     enable: '启用',
     disable: '禁用',
     settings: '设置',
+    projectHome: '项目主页',
+    updateHistory: '更新说明',
+    installToLocal: '安装到本地',
+    totalDownloads: '共 {count} 次下载',
+    viewData: '查看数据',
+    update: '更新',
+    reset: '重置',
+    uninstall: '卸载',
+    viewLogs: '查看日志',
+    authorHome: '作者主页',
+    confirmUninstall: '是否确认卸载插件 {name}？',
+    confirmReset: '此操作将恢复插件 {name} 的默认设置，并清除所有相关数据，确定要继续吗？',
+    resetSuccess: '插件 {name} 数据已重置',
+    resetFailed: '插件 {name} 重置失败：{message}',
+    updateHistoryTitle: '{name} 更新说明',
+    updateToLatest: '更新到最新版本',
+    updatingTo: '更新 {name} 到 {version} 版本...',
   },
   profile: {
     personalInfo: '个人信息',

src/locales/zh-TW.ts

@@ -2,7 +2,10 @@ export default {
   common: {
     confirm: '確認',
     cancel: '取消',
-    save: '保存',
+    save: '儲存',
+    close: '關閉',
+    version: '版本',
+    author: '作者',
     delete: '刪除',
     edit: '編輯',
     add: '添加',
@@ -1597,19 +1600,36 @@ export default {
     installSuccess: '插件 {name} 安裝成功！',
     installFailed: '插件 {name} 安裝失敗：{message}',
     uninstalling: '正在卸載 {name} ...',
-    uninstallSuccess: '插件 {name} 卸載成功！',
+    uninstallSuccess: '插件 {name} 已卸載',
     uninstallFailed: '插件 {name} 卸載失敗：{message}',
-    updating: '正在更新 {name} 至 v{version} ...',
+    updating: '正在更新 {name} ...',
     updateSuccess: '插件 {name} 更新成功！',
     updateFailed: '插件 {name} 更新失敗：{message}',
     noPlugins: '沒有安裝插件',
     installed: '已安裝',
     notInstalled: '未安裝',
-    hasUpdate: '有更新',
+    hasUpdate: '可更新',
-    configuring: '配置',
+    configuring: '配置中',
     enable: '啟用',
     disable: '禁用',
     settings: '設置',
+    projectHome: '項目主頁',
+    updateHistory: '更新說明',
+    installToLocal: '安裝到本地',
+    totalDownloads: '共 {count} 次下載',
+    viewData: '查看數據',
+    update: '更新',
+    reset: '重置',
+    uninstall: '卸載',
+    viewLogs: '查看日誌',
+    authorHome: '作者主頁',
+    confirmUninstall: '是否確認卸載插件 {name}？',
+    confirmReset: '此操作將恢復插件 {name} 的默認設置，並清除所有相關數據，確定要繼續嗎？',
+    resetSuccess: '插件 {name} 數據已重置',
+    resetFailed: '插件 {name} 重置失敗：{message}',
+    updateHistoryTitle: '{name} 更新說明',
+    updateToLatest: '更新到最新版本',
+    updatingTo: '正在更新 {name} 至 v{version} ...',
   },
   profile: {
     personalInfo: '個人信息',