feat(i18n): add translation files and integrate i18n in AI page

- Add English and Chinese translation JSON files with comprehensive app translations
- Update i18n config to use relative import paths for locale files
- Integrate i18n in AI page to display translated error messages and UI labels
- Add desktop shortcut button to widget search item with translation support

Author: rtugeek

.eslintcache

@@ -1,8 +1,8 @@
 import i18n from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
-import enTranslation from '../locales/en/translation.json'
-import zhTranslation from '../locales/zh/translation.json'
+import enTranslation from './locales/en/translation.json'
+import zhTranslation from './locales/zh/translation.json'
 
 i18n
   .use(LanguageDetector)

src/i18n/config.ts

@@ -221,7 +221,8 @@
     "overlap": "Overlap",
     "tray": "Tray",
     "upgrade": "Upgrade",
-    "installOffline": "Install Offline Widget"
+    "installOffline": "Install Offline Widget",
+    "desktopShortcut": "Shortcut"
   },
   "tags": {
     "all": "All",
@@ -253,5 +254,24 @@
     "unexpected": "Sorry, an unexpected error has occurred.",
     "unknown": "Unknown error",
     "backToHome": "Back to Home"
+  },
+  "aiPage": {
+    "loadPackagesFailed": "Failed to load packages",
+    "loadHistoryFailed": "Failed to load history",
+    "tokenPackages": "Token Packages",
+    "purchasePackage": "Purchase Package",
+    "expirationDate": "Expiration Date:",
+    "lifetime": "Lifetime",
+    "used": "Used:",
+    "total": "Total:",
+    "noPackages": "No packages available",
+    "usageHistory": "Usage History",
+    "time": "Time",
+    "model": "Model",
+    "type": "Type",
+    "tokens": "Tokens",
+    "remark": "Remark",
+    "loading": "Loading...",
+    "noHistory": "No history records"
   }
 }

src/locales/en/translation.json src/i18n/locales/en/translation.jsonsrc/locales/en/translation.json renamed to src/i18n/locales/en/translation.json

@@ -221,7 +221,8 @@
     "overlap": "悬浮窗",
     "tray": "托盘",
     "upgrade": "升级",
-    "installOffline": "安装离线组件"
+    "installOffline": "安装离线组件",
+    "desktopShortcut": "桌面图标"
   },
   "tags": {
     "all": "全部",
@@ -253,5 +254,24 @@
     "unexpected": "抱歉，发生了意外错误。",
     "unknown": "未知错误",
     "backToHome": "返回首页"
+  },
+  "aiPage": {
+    "loadPackagesFailed": "加载套餐失败",
+    "loadHistoryFailed": "加载历史记录失败",
+    "tokenPackages": "Token套餐",
+    "purchasePackage": "购买套餐",
+    "expirationDate": "过期时间:",
+    "lifetime": "永久有效",
+    "used": "已用:",
+    "total": "总量:",
+    "noPackages": "暂无可用套餐",
+    "usageHistory": "使用记录",
+    "time": "时间",
+    "model": "模型",
+    "type": "类型",
+    "tokens": "Token数",
+    "remark": "备注",
+    "loading": "加载中...",
+    "noHistory": "暂无历史记录"
   }
 }

src/locales/zh/translation.json src/i18n/locales/zh/translation.jsonsrc/locales/zh/translation.json renamed to src/i18n/locales/zh/translation.json

@@ -177,6 +177,9 @@ export function SearchItem({ widget }: SearchItemProps) {
                       DevTools
                     </Button>
                   )}
+                  <Button variant="outline" onClick={() => DeployedWidgetApi.createDesktopShortcut(widget.name)} className="rounded-full">
+                    {t('search.desktopShortcut', '桌面图标')}
+                  </Button>
                 </>
               )
             : (

src/pages/add/components/search-item.tsx

@@ -2,6 +2,7 @@ import type { AiTokenHistory, AiTokenPackage } from '@/api/ai'
 import { History, Package, ShoppingCart } from 'lucide-react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { AiApi } from '@/api/ai'
 import { LoginCheck } from '@/components/login-check'
@@ -32,6 +33,7 @@ import {
 import { useUser } from '@/hooks/use-user'
 
 export default function AiPage() {
+  const { t } = useTranslation()
   const { user } = useUser()
   const [packages, setPackages] = useState<AiTokenPackage[]>([])
   const [history, setHistory] = useState<AiTokenHistory[]>([])
@@ -50,7 +52,7 @@ export default function AiPage() {
     }
     catch (error) {
       console.error(error)
-      toast.error('加载套餐失败')
+      toast.error(t('aiPage.loadPackagesFailed', '加载套餐失败'))
     }
   }
 
@@ -69,7 +71,7 @@ export default function AiPage() {
     }
     catch (error) {
       console.error(error)
-      toast.error('加载历史记录失败')
+      toast.error(t('aiPage.loadHistoryFailed', '加载历史记录失败'))
     }
     finally {
       setLoading(false)
@@ -91,7 +93,7 @@ export default function AiPage() {
         <section>
           <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
             <Package className="h-6 w-6" />
-            Token套餐
+            {t('aiPage.tokenPackages', 'Token套餐')}
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             <Card
@@ -100,7 +102,7 @@ export default function AiPage() {
             >
               <div className="flex flex-col items-center gap-2 text-muted-foreground hover:text-primary">
                 <ShoppingCart className="h-8 w-8" />
-                <span className="font-medium">购买套餐</span>
+                <span className="font-medium">{t('aiPage.purchasePackage', '购买套餐')}</span>
               </div>
             </Card>
 
@@ -109,19 +111,19 @@ export default function AiPage() {
                 <CardHeader className="pb-2">
                   <CardTitle className="text-lg">{pkg.name}</CardTitle>
                   <CardDescription>
-                    过期时间:
+                    {t('aiPage.expirationDate', '过期时间:')}
                     {' '}
-                    {pkg.expireTime ? new Date(pkg.expireTime).toLocaleDateString() : '永久有效'}
+                    {pkg.expireTime ? new Date(pkg.expireTime).toLocaleDateString() : t('aiPage.lifetime', '永久有效')}
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="flex flex-col gap-1">
                     <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">已用:</span>
+                      <span className="text-muted-foreground">{t('aiPage.used', '已用:')}</span>
                       <span>{pkg.usedToken.toLocaleString()}</span>
                     </div>
                     <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">总量:</span>
+                      <span className="text-muted-foreground">{t('aiPage.total', '总量:')}</span>
                       <span>{pkg.maxToken.toLocaleString()}</span>
                     </div>
                     <div className="w-full bg-secondary h-2 rounded-full mt-2 overflow-hidden">
@@ -136,7 +138,7 @@ export default function AiPage() {
             ))}
             {packages.length === 0 && (
               <div className="col-span-3 flex text-center justify-center items-center text-muted-foreground py-8 border rounded-lg border-dashed">
-                暂无可用套餐
+                {t('aiPage.noPackages', '暂无可用套餐')}
               </div>
             )}
           </div>
@@ -152,26 +154,26 @@ export default function AiPage() {
         <section>
           <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
             <History className="h-6 w-6" />
-            使用记录
+            {t('aiPage.usageHistory', '使用记录')}
           </h2>
           <Card>
             <CardContent className="p-0">
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>时间</TableHead>
-                    <TableHead>模型</TableHead>
-                    <TableHead>类型</TableHead>
-                    <TableHead>Token数</TableHead>
-                    <TableHead>备注</TableHead>
+                    <TableHead>{t('aiPage.time', '时间')}</TableHead>
+                    <TableHead>{t('aiPage.model', '模型')}</TableHead>
+                    <TableHead>{t('aiPage.type', '类型')}</TableHead>
+                    <TableHead>{t('aiPage.tokens', 'Token数')}</TableHead>
+                    <TableHead>{t('aiPage.remark', '备注')}</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {loading
                     ? (
                         <TableRow>
                           <TableCell colSpan={5} className="text-center py-8">
-                            加载中...
+                            {t('aiPage.loading', '加载中...')}
                           </TableCell>
                         </TableRow>
                       )
@@ -190,7 +192,7 @@ export default function AiPage() {
                       : (
                           <TableRow>
                             <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
-                              暂无历史记录
+                              {t('aiPage.noHistory', '暂无历史记录')}
                             </TableCell>
                           </TableRow>
                         )}