refactor: i18n in sfc style

Author: kermanx

.vscode/settings.json

@@ -73,10 +73,9 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "i18n-ally.enabledFrameworks": [
-    "vue"
+    "vue-sfc"
   ],
   "i18n-ally.localesPaths": [
-    "frontend/src/locales"
-  ],
-  "i18n-ally.keystyle": "nested"
+    "frontend/src/**/*.vue"
+  ]
 }

frontend/package.json

@@ -34,6 +34,7 @@
     "vue-sonner": "^2.0.2"
   },
   "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@types/node": "^22.16.5",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.0.1",

frontend/src/App.vue

@@ -75,7 +75,7 @@ onUIOpened()
       <div class="text-center space-y-4">
         <div class="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto" />
         <p class="text-muted-foreground">
-          {{ t('common.loading') }}
+          {{ t('loading') }}
         </p>
       </div>
     </div>
@@ -94,7 +94,7 @@ onUIOpened()
                   <Zap class="h-3 w-3" />
                 </div>
                 <h1 class="text-base font-semibold">
-                  {{ t('app.name') }}
+                  {{ t('appName') }}
                 </h1>
               </div>
             </div>
@@ -109,6 +109,15 @@ onUIOpened()
   </div>
 </template>
 
+<i18n lang="yaml">
+zh-CN:
+  loading: 加载中...
+  appName: UniToken
+en-US:
+  loading: Loading...
+  appName: UniToken
+</i18n>
+
 <style>
 /* Global styles using UnoCSS */
 </style>

frontend/src/components/AddKeyDialog.vue

@@ -22,9 +22,9 @@ async function handleConfigured(key: string) {
   <Dialog v-model:open="open">
     <DialogContent class="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
       <DialogHeader>
-        <DialogTitle>{{ t('keys.addKeyDialog.title') }}</DialogTitle>
+        <DialogTitle>{{ t('title') }}</DialogTitle>
         <DialogDescription>
-          {{ t('keys.addKeyDialog.description') }}
+          {{ t('description') }}
         </DialogDescription>
       </DialogHeader>
 
@@ -35,3 +35,12 @@ async function handleConfigured(key: string) {
     </DialogContent>
   </Dialog>
 </template>
+
+<i18n lang="yaml">
+zh-CN:
+  title: 添加 API Key
+  description: 选择一个提供商来添加 API Key
+en-US:
+  title: Add API Key
+  description: Choose a provider to add API Key
+</i18n>

frontend/src/components/AppDetailDialog.vue

@@ -21,12 +21,12 @@ async function handleDeleteApp() {
   loading.value = true
   try {
     await appStore.deleteApp(props.app.id)
-    toast.success(t('appDetailDialog.deleteSuccess'))
+    toast.success(t('deleteSuccess'))
     open.value = false
   }
   catch (error) {
     console.error('Delete Failed:', error)
-    toast.error(t('appDetailDialog.deleteFailed'))
+    toast.error(t('deleteFailed'))
   }
   finally {
     loading.value = false
@@ -35,12 +35,12 @@ async function handleDeleteApp() {
 
 function formatDate(dateString: string) {
   if (!dateString)
-    return t('appDetailDialog.unknown')
+    return t('unknown')
   try {
     return new Date(dateString).toLocaleString()
   }
   catch {
-    return t('appDetailDialog.invalidDate')
+    return t('invalidDate')
   }
 }
 </script>
@@ -49,7 +49,7 @@ function formatDate(dateString: string) {
   <Dialog v-model:open="open">
     <DialogContent class="max-w-md">
       <DialogHeader>
-        <DialogTitle>{{ t('appDetailDialog.title') }}</DialogTitle>
+        <DialogTitle>{{ t('title') }}</DialogTitle>
       </DialogHeader>
 
       <div class="space-y-4">
@@ -61,14 +61,14 @@ function formatDate(dateString: string) {
           </div>
 
           <p class="text-muted-foreground text-sm">
-            {{ app.description || t('appDetailDialog.noDescription') }}
+            {{ app.description || t('noDescription') }}
           </p>
         </div>
 
         <div class="space-y-3 border-t pt-4">
           <div class="text-sm">
             <div>
-              <span class="text-gray-500 dark:text-gray-200">{{ t('appDetailDialog.appId') }}:</span>
+              <span class="text-gray-500 dark:text-gray-200">{{ t('appId') }}:</span>
               <p class="font-mono text-xs bg-gray-100 dark:bg-white/10 p-1 rounded mt-1 break-all">
                 {{ app.id }}
               </p>
@@ -77,13 +77,13 @@ function formatDate(dateString: string) {
 
           <div class="grid grid-cols-2 gap-4 text-sm">
             <div>
-              <span class="text-gray-500">{{ t('appDetailDialog.createdAt') }}:</span>
+              <span class="text-gray-500">{{ t('createdAt') }}:</span>
               <p class="mt-1">
                 {{ formatDate(app.createdAt) }}
               </p>
             </div>
             <div v-if="app.lastActiveAt">
-              <span class="text-gray-500">{{ t('appDetailDialog.lastActiveAt') }}:</span>
+              <span class="text-gray-500">{{ t('lastActiveAt') }}:</span>
               <p class="mt-1">
                 {{ formatDate(app.lastActiveAt) }}
               </p>
@@ -93,25 +93,25 @@ function formatDate(dateString: string) {
 
         <div class="border-t border-red-200 dark:border-red-800 pt-4">
           <h4 class="text-sm font-medium text-red-800 dark:text-red-500 mb-2">
-            {{ t('appDetailDialog.dangerZone') }}
+            {{ t('dangerZone') }}
           </h4>
           <AlertDialog>
             <AlertDialogTrigger as-child>
               <Button variant="destructive" size="sm" class="w-full bg-red-600/70! hover:bg-red-600/60!" :disabled="loading">
-                {{ t('appDetailDialog.deleteApp') }}
+                {{ t('deleteApp') }}
               </Button>
             </AlertDialogTrigger>
             <AlertDialogContent>
               <AlertDialogHeader>
-                <AlertDialogTitle>{{ t('appDetailDialog.confirmDeleteTitle') }}</AlertDialogTitle>
+                <AlertDialogTitle>{{ t('confirmDeleteTitle') }}</AlertDialogTitle>
                 <AlertDialogDescription>
-                  {{ t('appDetailDialog.confirmDeleteDescription', { appName: app.name }) }}
+                  {{ t('confirmDeleteDescription', { appName: app.name }) }}
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
-                <AlertDialogCancel>{{ t('common.cancel') }}</AlertDialogCancel>
+                <AlertDialogCancel>{{ t('cancel') }}</AlertDialogCancel>
                 <AlertDialogAction @click="handleDeleteApp">
-                  {{ t('common.delete') }}
+                  {{ t('delete') }}
                 </AlertDialogAction>
               </AlertDialogFooter>
             </AlertDialogContent>
@@ -121,3 +121,40 @@ function formatDate(dateString: string) {
     </DialogContent>
   </Dialog>
 </template>
+
+<i18n lang="yaml">
+en-US:
+  title: Application Details
+  noDescription: No description
+  appId: Application ID
+  createdAt: Created At
+  lastActiveAt: Last Active
+  unknown: Unknown
+  invalidDate: Invalid Date
+  dangerZone: Danger Zone
+  deleteApp: Delete Application
+  confirmDeleteTitle: Confirm Delete Application
+  confirmDeleteDescription: |
+    Are you sure you want to delete application "{appName}"? This action cannot
+    be undone and all application data will be permanently deleted.
+  deleteSuccess: Application deleted successfully
+  deleteFailed: Failed to delete application
+  delete: Delete
+  cancel: Cancel
+zh-CN:
+  title: 应用详细信息
+  noDescription: 暂无描述
+  appId: 应用ID
+  createdAt: 创建时间
+  lastActiveAt: 最后活跃
+  unknown: 未知
+  invalidDate: 无效日期
+  dangerZone: 危险操作
+  deleteApp: 删除应用
+  confirmDeleteTitle: 确认删除应用
+  confirmDeleteDescription: '您确定要删除应用 "{appName}" 吗？此操作不可撤销，应用的所有数据将被永久删除。'
+  deleteSuccess: 应用删除成功
+  deleteFailed: 删除应用失败
+  delete: 删除
+  cancel: 取消
+</i18n>

frontend/src/components/AppSidebar.vue

@@ -29,25 +29,25 @@ const { t } = useI18n()
         </div>
         <div>
           <h1 class="text-lg font-semibold">
-            {{ t('app.name') }}
+            {{ t('appName') }}
           </h1>
           <p class="text-xs text-sidebar-foreground/70">
-            {{ t('app.description') }}
+            {{ t('appDescription') }}
           </p>
         </div>
       </div>
     </SidebarHeader>
 
     <SidebarContent>
       <SidebarGroup>
-        <SidebarGroupLabel>{{ t('navigation.title') }}</SidebarGroupLabel>
+        <SidebarGroupLabel>{{ t('navigation') }}</SidebarGroupLabel>
         <SidebarGroupContent>
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton as-child :is-active="$route.path === '/apps'">
                 <router-link to="/apps" class="flex items-center gap-2">
                   <Grid3X3 class="h-4 w-4" />
-                  <span>{{ t('navigation.appManagement') }}</span>
+                  <span>{{ t('appManagement') }}</span>
                 </router-link>
               </SidebarMenuButton>
             </SidebarMenuItem>
@@ -56,7 +56,7 @@ const { t } = useI18n()
               <SidebarMenuButton as-child :is-active="$route.path === '/models'">
                 <router-link to="/models" class="flex items-center gap-2">
                   <Brain class="h-4 w-4" />
-                  <span>{{ t('navigation.models') }}</span>
+                  <span>{{ t('models') }}</span>
                 </router-link>
               </SidebarMenuButton>
             </SidebarMenuItem>
@@ -65,7 +65,7 @@ const { t } = useI18n()
               <SidebarMenuButton as-child :is-active="$route.path === '/usage'">
                 <router-link to="/usage" class="flex items-center gap-2">
                   <BarChart3 class="h-4 w-4" />
-                  <span>{{ t('navigation.usage') }}</span>
+                  <span>{{ t('usage') }}</span>
                 </router-link>
               </SidebarMenuButton>
             </SidebarMenuItem>
@@ -74,14 +74,14 @@ const { t } = useI18n()
       </SidebarGroup>
 
       <SidebarGroup>
-        <SidebarGroupLabel>{{ t('navigation.tools') }}</SidebarGroupLabel>
+        <SidebarGroupLabel>{{ t('tools') }}</SidebarGroupLabel>
         <SidebarGroupContent>
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton as-child :is-active="$route.path === '/settings'">
                 <router-link to="/settings" class="flex items-center gap-2">
                   <Settings class="h-4 w-4" />
-                  <span>{{ t('navigation.settings') }}</span>
+                  <span>{{ t('settings') }}</span>
                 </router-link>
               </SidebarMenuButton>
             </SidebarMenuItem>
@@ -90,7 +90,7 @@ const { t } = useI18n()
               <SidebarMenuButton as-child :is-active="$route.path === '/about'">
                 <router-link to="/about" class="flex items-center gap-2">
                   <InfoIcon class="h-4 w-4" />
-                  <span>{{ t('navigation.about') }}</span>
+                  <span>{{ t('about') }}</span>
                 </router-link>
               </SidebarMenuButton>
             </SidebarMenuItem>
@@ -110,3 +110,26 @@ const { t } = useI18n()
     </SidebarFooter>
   </Sidebar>
 </template>
+
+<i18n lang="yaml">
+zh-CN:
+  appName: UniToken
+  appDescription: AI Token 聚合服务
+  navigation: 导航
+  appManagement: 应用管理
+  models: 模型提供商
+  usage: 用量统计
+  tools: 工具
+  settings: 设置
+  about: 关于
+en-US:
+  appName: UniToken
+  appDescription: AI Token Aggregation Service
+  navigation: Navigation
+  appManagement: App Management
+  models: Model Providers
+  usage: Usage Statistics
+  tools: Tools
+  settings: Settings
+  about: About
+</i18n>

frontend/src/components/Captcha.vue

@@ -74,10 +74,10 @@ function onClick() {
 }
 
 const statusText = computed(() => ({
-  loading: t('common.loading'),
-  init: t('captcha.getCode'),
-  pending: t('captcha.getCode'),
-  success: t('captcha.smsSent'),
+  loading: t('loading'),
+  init: t('getCode'),
+  pending: t('getCode'),
+  success: t('smsSent'),
 })[state.value])
 </script>
 
@@ -86,3 +86,15 @@ const statusText = computed(() => ({
     {{ statusText }}
   </button>
 </template>
+
+<i18n lang="yaml">
+en-US:
+  loading: Authenticating...
+  getCode: Get Verification Code
+  smsSent: Code Sent
+
+zh-CN:
+  loading: 加载中...
+  getCode: 获取验证码
+  smsSent: 已发送
+</i18n>