feat(frontend): 控制台 next-intl 中英双语

接入无 URL 前缀的 zh-CN/en，顶栏与外观设置可切换语言；选择写入 cookie 后刷新生效。

frontend/app/(main)/origins/components/origin-editor-dialog.tsx

@@ -25,21 +25,13 @@ import {
   type OriginMutationPayload,
   OriginService,
 } from '@/lib/services/openflare';
+import { useTranslations } from 'next-intl';
 
-const originSchema = z.object({
-  name: z.string().max(255),
-  address: z
-    .string()
-    .trim()
-    .min(1, '请输入源站地址')
-    .refine(
-      (value) => !/[/?#]/.test(value) && !value.includes('://'),
-      '源站地址格式不合法',
-    ),
-  remark: z.string().max(255),
-});
-
-type OriginFormValues = z.infer<typeof originSchema>;
+type OriginFormValues = {
+  name: string;
+  address: string;
+  remark: string;
+};
 
 const originsQueryKey = ['openflare', 'origins'] as const;
 
@@ -73,7 +65,21 @@ export function OriginEditorDialog({
   origin,
   onSaved,
 }: OriginEditorDialogProps) {
+  const t = useTranslations('origins');
+  const tc = useTranslations('common');
   const queryClient = useQueryClient();
+  const originSchema = z.object({
+    name: z.string().max(255),
+    address: z
+      .string()
+      .trim()
+      .min(1, t('addressRequired'))
+      .refine(
+        (value) => !/[/?#]/.test(value) && !value.includes('://'),
+        t('addressInvalid'),
+      ),
+    remark: z.string().max(255),
+  });
   const form = useForm<OriginFormValues>({
     resolver: zodResolver(originSchema),
     defaultValues: toFormValues(origin),
@@ -91,7 +97,7 @@ export function OriginEditorDialog({
         : OriginService.create(payload);
     },
     onSuccess: async () => {
-      toast.success(origin ? '源站已更新' : '源站已创建');
+      toast.success(origin ? t('updated') : t('created'));
       await queryClient.invalidateQueries({ queryKey: originsQueryKey });
       if (origin) {
         await queryClient.invalidateQueries({
@@ -102,7 +108,7 @@ export function OriginEditorDialog({
       onOpenChange(false);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '保存失败');
+      toast.error(error instanceof Error ? error.message : t('saveFailed'));
     },
   });
 
@@ -110,10 +116,8 @@ export function OriginEditorDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{origin ? '编辑源站' : '新增源站'}</DialogTitle>
-          <DialogDescription>
-            源站作为规则里的可复用地址目录，协议和端口仍由规则决定。
-          </DialogDescription>
+          <DialogTitle>{origin ? t('editOrigin') : t('create')}</DialogTitle>
+          <DialogDescription>{t('editorDesc')}</DialogDescription>
         </DialogHeader>
 
         <form
@@ -122,7 +126,7 @@ export function OriginEditorDialog({
           onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
         >
           <div className='space-y-1.5'>
-            <Label htmlFor='address'>源站地址</Label>
+            <Label htmlFor='address'>{t('address')}</Label>
             <Input
               id='address'
               placeholder='origin.internal'
@@ -135,22 +139,22 @@ export function OriginEditorDialog({
             ) : null}
           </div>
           <div className='space-y-1.5'>
-            <Label htmlFor='name'>源站名</Label>
+            <Label htmlFor='name'>{t('name')}</Label>
             <Input
               id='name'
-              placeholder='主站源站'
+              placeholder={t('namePlaceholder')}
               {...form.register('name')}
             />
           </div>
           <div className='space-y-1.5'>
-            <Label htmlFor='remark'>备注</Label>
+            <Label htmlFor='remark'>{t('remark')}</Label>
             <Textarea id='remark' rows={2} {...form.register('remark')} />
           </div>
         </form>
 
         <DialogFooter>
           <Button variant='outline' onClick={() => onOpenChange(false)}>
-            取消
+            {tc('cancel')}
           </Button>
           <Button
             type='submit'
@@ -160,12 +164,12 @@ export function OriginEditorDialog({
             {mutation.isPending ? (
               <>
                 <Loader2 className='size-4 animate-spin mr-1' />
-                保存中...
+                {t('saving')}
               </>
             ) : origin ? (
-              '保存修改'
+              t('saveChanges')
             ) : (
-              '新增源站'
+              t('create')
             )}
           </Button>
         </DialogFooter>

frontend/app/(main)/origins/detail/page-client.tsx

@@ -33,9 +33,13 @@ import {
 import { OriginService } from '@/lib/services/openflare';
 import { formatDateTime } from '@/lib/utils';
 
+import { useTranslations } from 'next-intl';
+
 import { OriginEditorDialog } from '../components/origin-editor-dialog';
 
 export function OriginDetailPageClient() {
+  const t = useTranslations('origins');
+  const tc = useTranslations('common');
   const searchParams = useSearchParams();
   const queryClient = useQueryClient();
   const originId = searchParams.get('id')?.trim() ?? '';
@@ -54,14 +58,14 @@ export function OriginDetailPageClient() {
   const deleteMutation = useMutation({
     mutationFn: () => OriginService.deleteById(parsedId),
     onSuccess: async () => {
-      toast.success('源站已删除');
+      toast.success(t('deleted'));
       await queryClient.invalidateQueries({
         queryKey: ['openflare', 'origins'],
       });
       window.location.href = '/origins';
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '删除失败');
+      toast.error(error instanceof Error ? error.message : t('deleteFailed'));
     },
   });
 
@@ -70,7 +74,7 @@ export function OriginDetailPageClient() {
   if (!enabled) {
     return (
       <div className='py-6 px-1'>
-        <EmptyStateWithBorder description='缺少有效的源站 ID。' />
+        <EmptyStateWithBorder description={t('missingId')} />
       </div>
     );
   }
@@ -78,7 +82,7 @@ export function OriginDetailPageClient() {
   if (originQuery.isLoading) {
     return (
       <div className='py-6 px-1'>
-        <LoadingStateWithBorder icon={MapPin} description='加载源站详情...' />
+        <LoadingStateWithBorder icon={MapPin} description={t('loadingDetail')} />
       </div>
     );
   }
@@ -90,7 +94,7 @@ export function OriginDetailPageClient() {
           message={
             originQuery.error instanceof Error
               ? originQuery.error.message
-              : '加载失败'
+              : t('loadFailed')
           }
           onRetry={() => void originQuery.refetch()}
         />
@@ -104,10 +108,10 @@ export function OriginDetailPageClient() {
         <Button variant='ghost' size='sm' asChild>
           <Link href='/origins'>
             <ArrowLeft className='size-4 mr-1' />
-            返回列表
+            {t('backToList')}
           </Link>
         </Button>
-        <EmptyStateWithBorder description='源站不存在或已被删除。' />
+        <EmptyStateWithBorder description={t('notFound')} />
       </div>
     );
   }
@@ -119,7 +123,7 @@ export function OriginDetailPageClient() {
           <Button variant='ghost' size='sm' className='h-8 px-2 -ml-2' asChild>
             <Link href='/origins'>
               <ArrowLeft className='size-4 mr-1' />
-              返回列表
+              {t('backToList')}
             </Link>
           </Button>
           <div className='flex items-center gap-2'>
@@ -136,7 +140,7 @@ export function OriginDetailPageClient() {
             size='sm'
             onClick={() => setEditorOpen(true)}
           >
-            编辑源站
+            {t('editOrigin')}
           </Button>
           <Button
             variant='destructive'
@@ -144,7 +148,7 @@ export function OriginDetailPageClient() {
             onClick={() => setDeleteOpen(true)}
           >
             <Trash2 className='size-3.5 mr-1' />
-            删除源站
+            {t('deleteOrigin')}
           </Button>
         </div>
       </div>
@@ -152,57 +156,57 @@ export function OriginDetailPageClient() {
       <div className='grid gap-3 sm:grid-cols-2 xl:grid-cols-4'>
         <div className='rounded-lg border border-dashed px-4 py-3'>
           <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-            绑定规则
+            {t('boundRoutes')}
           </p>
           <Badge variant='outline' className='mt-2 text-[10px]'>
-            {origin.route_count} 条规则
+            {t('routeCount', { count: origin.route_count })}
           </Badge>
         </div>
         <div className='rounded-lg border border-dashed px-4 py-3'>
           <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-            创建时间
+            {t('createdAt')}
           </p>
           <p className='mt-2 text-sm'>{formatDateTime(origin.created_at)}</p>
         </div>
         <div className='rounded-lg border border-dashed px-4 py-3'>
           <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-            更新时间
+            {t('updatedAt')}
           </p>
           <p className='mt-2 text-sm'>{formatDateTime(origin.updated_at)}</p>
         </div>
         <div className='rounded-lg border border-dashed px-4 py-3 sm:col-span-2 xl:col-span-1'>
           <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-            备注
+            {t('remark')}
           </p>
           <p className='mt-2 text-sm text-muted-foreground'>
-            {origin.remark || '暂无备注'}
+            {origin.remark || t('noRemark')}
           </p>
         </div>
       </div>
 
       <div className='border border-dashed rounded-lg overflow-hidden bg-background'>
         <div className='px-4 py-3 border-b border-dashed'>
-          <h2 className='text-sm font-semibold'>关联规则</h2>
+          <h2 className='text-sm font-semibold'>{t('relatedRoutes')}</h2>
           <p className='text-xs text-muted-foreground mt-1'>
-            展示当前源站作为主源站绑定的规则。
+            {t('relatedRoutesDesc')}
           </p>
         </div>
         {origin.routes.length === 0 ? (
           <EmptyStateWithBorder
-            title='暂无关联规则'
-            description='当前源站还没有被任何规则引用。'
+            title={t('noRelatedRoutes')}
+            description={t('noRelatedRoutesDesc')}
           />
         ) : (
           <Table>
             <TableHeader className='bg-muted/40'>
               <TableRow className='border-dashed hover:bg-transparent'>
-                <TableHead className='text-xs font-semibold'>域名</TableHead>
+                <TableHead className='text-xs font-semibold'>{t('domain')}</TableHead>
                 <TableHead className='text-xs font-semibold'>
-                  源站地址
+                  {t('address')}
                 </TableHead>
-                <TableHead className='text-xs font-semibold'>状态</TableHead>
+                <TableHead className='text-xs font-semibold'>{t('status')}</TableHead>
                 <TableHead className='text-xs font-semibold'>
-                  更新时间
+                  {t('updatedAt')}
                 </TableHead>
               </TableRow>
             </TableHeader>
@@ -217,7 +221,7 @@ export function OriginDetailPageClient() {
                   </TableCell>
                   <TableCell>
                     <Badge variant='outline' className='text-[10px]'>
-                      {route.enabled ? '启用' : '停用'}
+                      {route.enabled ? t('enabled') : t('disabled')}
                     </Badge>
                   </TableCell>
                   <TableCell className='text-xs text-muted-foreground'>
@@ -240,18 +244,18 @@ export function OriginDetailPageClient() {
       <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>删除源站</AlertDialogTitle>
+            <AlertDialogTitle>{t('deleteTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
-              确认删除源站 {origin.name} 吗？
+              {t('deleteDesc', { name: origin.name })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogCancel>{tc('cancel')}</AlertDialogCancel>
             <AlertDialogAction
               className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
               onClick={() => deleteMutation.mutate()}
             >
-              确认删除
+              {t('confirmDelete')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

frontend/app/(main)/origins/page.tsx

@@ -24,11 +24,15 @@ import { Button } from '@/components/ui/button';
 import { type OriginItem, OriginService } from '@/lib/services/openflare';
 import { formatDateTime } from '@/lib/utils';
 
+import { useTranslations } from 'next-intl';
+
 import { OriginEditorDialog } from './components/origin-editor-dialog';
 
 const originsQueryKey = ['openflare', 'origins'] as const;
 
 export default function OriginsPage() {
+  const t = useTranslations('origins');
+  const tc = useTranslations('common');
   const queryClient = useQueryClient();
   const [editorOpen, setEditorOpen] = useState(false);
   const [editingOrigin, setEditingOrigin] = useState<OriginItem | null>(null);
@@ -44,12 +48,12 @@ export default function OriginsPage() {
   const deleteMutation = useMutation({
     mutationFn: (id: number) => OriginService.deleteById(id),
     onSuccess: async () => {
-      toast.success('源站已删除');
+      toast.success(t('deleted'));
       setDeleteTarget(null);
       await queryClient.invalidateQueries({ queryKey: originsQueryKey });
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '删除失败');
+      toast.error(error instanceof Error ? error.message : t('deleteFailed'));
     },
   });
 
@@ -59,10 +63,8 @@ export default function OriginsPage() {
         <div className='flex items-center gap-2'>
           <MapPin className='size-5 text-primary' />
           <div>
-            <h1 className='text-2xl font-semibold tracking-tight'>源站</h1>
-            <p className='text-sm text-muted-foreground'>
-              集中维护规则复用的源站地址，减少批量改地址时的重复操作。
-            </p>
+            <h1 className='text-2xl font-semibold tracking-tight'>{t('title')}</h1>
+            <p className='text-sm text-muted-foreground'>{t('subtitle')}</p>
           </div>
         </div>
         <div className='flex gap-2'>
@@ -75,7 +77,7 @@ export default function OriginsPage() {
             <RefreshCw
               className={`size-3.5 mr-1 ${originsQuery.isFetching ? 'animate-spin' : ''}`}
             />
-            刷新
+            {t('refresh')}
           </Button>
           <Button
             size='sm'
@@ -85,7 +87,7 @@ export default function OriginsPage() {
             }}
           >
             <Plus className='size-3.5 mr-1' />
-            新增源站
+            {t('create')}
           </Button>
         </div>
       </div>
@@ -95,7 +97,7 @@ export default function OriginsPage() {
           message={
             originsQuery.error instanceof Error
               ? originsQuery.error.message
-              : '加载失败'
+              : t('loadFailed')
           }
           onRetry={() => void originsQuery.refetch()}
         />
@@ -106,8 +108,8 @@ export default function OriginsPage() {
           <LoadingStateWithBorder />
         ) : origins.length === 0 ? (
           <EmptyStateWithBorder
-            title='暂无源站'
-            description='点击右上角新增源站，后续规则可直接复用这些地址。'
+            title={t('emptyTitle')}
+            description={t('emptyDesc')}
           />
         ) : (
           <div className='grid gap-0 md:grid-cols-2'>
@@ -128,20 +130,24 @@ export default function OriginsPage() {
                             : 'text-amber-600 border-amber-500/20'
                         }`}
                       >
-                        {origin.route_count} 条规则
+                        {t('routeCount', { count: origin.route_count })}
                       </Badge>
                     </div>
                     <p className='text-sm'>{origin.address}</p>
                     <p className='text-sm text-muted-foreground'>
-                      {origin.remark || '暂无备注'}
+                      {origin.remark || t('noRemark')}
                     </p>
                     <p className='text-xs text-muted-foreground'>
-                      最后更新：{formatDateTime(origin.updated_at)}
+                      {t('lastUpdated', {
+                        date: formatDateTime(origin.updated_at),
+                      })}
                     </p>
                   </div>
                   <div className='flex flex-wrap gap-2'>
                     <Button variant='outline' size='sm' asChild>
-                      <Link href={`/origins/detail?id=${origin.id}`}>详情</Link>
+                      <Link href={`/origins/detail?id=${origin.id}`}>
+                        {t('detail')}
+                      </Link>
                     </Button>
                     <Button
                       variant='outline'
@@ -151,7 +157,7 @@ export default function OriginsPage() {
                         setEditorOpen(true);
                       }}
                     >
-                      编辑
+                      {t('edit')}
                     </Button>
                     <Button
                       variant='destructive'
@@ -159,7 +165,7 @@ export default function OriginsPage() {
                       onClick={() => setDeleteTarget(origin)}
                     >
                       <Trash2 className='size-3.5 mr-1' />
-                      删除
+                      {tc('delete')}
                     </Button>
                   </div>
                 </div>
@@ -183,20 +189,20 @@ export default function OriginsPage() {
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>删除源站</AlertDialogTitle>
+            <AlertDialogTitle>{t('deleteTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
-              确认删除源站 {deleteTarget?.name} 吗？
+              {t('deleteDesc', { name: deleteTarget?.name ?? '' })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogCancel>{tc('cancel')}</AlertDialogCancel>
             <AlertDialogAction
               className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
               onClick={() => {
                 if (deleteTarget) deleteMutation.mutate(deleteTarget.id);
               }}
             >
-              确认删除
+              {t('confirmDelete')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>