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

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

frontend/app/(main)/config-versions/components/cleanup-dialog.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -19,11 +20,13 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-const cleanupSchema = z.object({
-  keepCount: z.number().int().min(3, '最少保留 3 个历史快照'),
-});
+function buildCleanupSchema(t: (key: string) => string) {
+  return z.object({
+    keepCount: z.number().int().min(3, t('keepMin')),
+  });
+}
 
-type CleanupFormValues = z.infer<typeof cleanupSchema>;
+type CleanupFormValues = z.infer<ReturnType<typeof buildCleanupSchema>>;
 
 interface CleanupDialogProps {
   open: boolean;
@@ -38,8 +41,10 @@ export function CleanupDialog({
   onConfirm,
   loading,
 }: CleanupDialogProps) {
+  const t = useTranslations('configVersions');
+  const tc = useTranslations('common');
   const form = useForm<CleanupFormValues>({
-    resolver: zodResolver(cleanupSchema),
+    resolver: zodResolver(buildCleanupSchema(t)),
     defaultValues: { keepCount: 10 },
   });
 
@@ -57,14 +62,12 @@ export function CleanupDialog({
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>清理历史快照</AlertDialogTitle>
-          <AlertDialogDescription>
-            删除旧的历史快照配置，系统将始终保护当前已激活的版本不被删除。
-          </AlertDialogDescription>
+          <AlertDialogTitle>{t('cleanupTitle')}</AlertDialogTitle>
+          <AlertDialogDescription>{t('cleanupDesc')}</AlertDialogDescription>
         </AlertDialogHeader>
 
         <div className='space-y-2'>
-          <Label htmlFor='keepCount'>保留最近快照个数</Label>
+          <Label htmlFor='keepCount'>{t('keepCount')}</Label>
           <Input
             id='keepCount'
             type='number'
@@ -73,7 +76,7 @@ export function CleanupDialog({
             {...form.register('keepCount', { valueAsNumber: true })}
           />
           <p className='text-xs text-muted-foreground'>
-            默认为 10 个，最少需保留 3 个。
+            {t('keepHint')}
           </p>
           {form.formState.errors.keepCount ? (
             <p className='text-xs text-destructive'>
@@ -83,7 +86,7 @@ export function CleanupDialog({
         </div>
 
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
+          <AlertDialogCancel disabled={loading}>{tc('cancel')}</AlertDialogCancel>
           <Button
             variant='destructive'
             onClick={() => void handleConfirm()}
@@ -92,10 +95,10 @@ export function CleanupDialog({
             {loading ? (
               <>
                 <Loader2 className='size-4 animate-spin mr-1' />
-                清理中...
+                {t('cleaning')}
               </>
             ) : (
-              '确认清理'
+              t('confirmCleanup')
             )}
           </Button>
         </AlertDialogFooter>

frontend/app/(main)/config-versions/components/diff-dialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { Badge } from '@/components/ui/badge';
 import {
@@ -29,12 +30,13 @@ interface DiffDialogProps {
 }
 
 function DiffChipList({ title, items }: { title: string; items: string[] }) {
+  const t = useTranslations('configVersions');
   return (
     <div className='space-y-2'>
       <div className='flex items-center justify-between gap-2'>
         <p className='text-xs font-semibold'>{title}</p>
         <Badge variant='outline' className='text-[10px] rounded-full'>
-          {items.length} 项
+          {t('itemCount', { count: items.length })}
         </Badge>
       </div>
       {items.length > 0 ? (
@@ -50,16 +52,12 @@ function DiffChipList({ title, items }: { title: string; items: string[] }) {
           ))}
         </div>
       ) : (
-        <p className='text-xs text-muted-foreground'>无变更</p>
+        <p className='text-xs text-muted-foreground'>{t('noChange')}</p>
       )}
     </div>
   );
 }
 
-function renderOptionValue(value: string) {
-  return value === '' ? '空' : value;
-}
-
 export function DiffDialog({
   open,
   onOpenChange,
@@ -67,20 +65,19 @@ export function DiffDialog({
   loading,
   error,
 }: DiffDialogProps) {
+  const t = useTranslations('configVersions');
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className='sm:max-w-3xl max-h-[85vh] overflow-y-auto'>
         <DialogHeader>
-          <DialogTitle>配置差异</DialogTitle>
-          <DialogDescription>
-            对比当前待发布配置与已激活版本之间的差异。
-          </DialogDescription>
+          <DialogTitle>{t('diffTitle')}</DialogTitle>
+          <DialogDescription>{t('diffDesc')}</DialogDescription>
         </DialogHeader>
 
         {loading ? (
           <div className='flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground'>
             <Loader2 className='size-4 animate-spin' />
-            正在加载差异数据...
+            {t('loadingDiff')}
           </div>
         ) : error ? (
           <p className='text-sm text-destructive'>{error}</p>
@@ -89,15 +86,15 @@ export function DiffDialog({
             <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-4'>
               <div className='rounded-lg border border-dashed p-3'>
                 <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-                  激活版本
+                  {t('activeVersion')}
                 </p>
                 <p className='mt-1 text-sm font-medium'>
-                  {diff.active_version || '无'}
+                  {diff.active_version || t('none')}
                 </p>
               </div>
               <div className='rounded-lg border border-dashed p-3'>
                 <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-                  新增域名
+                  {t('addedDomains')}
                 </p>
                 <p className='mt-1 text-lg font-semibold text-emerald-600'>
                   {diff.added_domains.length}
@@ -105,7 +102,7 @@ export function DiffDialog({
               </div>
               <div className='rounded-lg border border-dashed p-3'>
                 <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-                  删除域名
+                  {t('removedDomains')}
                 </p>
                 <p className='mt-1 text-lg font-semibold text-amber-600'>
                   {diff.removed_domains.length}
@@ -113,7 +110,7 @@ export function DiffDialog({
               </div>
               <div className='rounded-lg border border-dashed p-3'>
                 <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-                  修改域名
+                  {t('modifiedDomains')}
                 </p>
                 <p className='mt-1 text-lg font-semibold text-blue-600'>
                   {diff.modified_domains.length}
@@ -122,25 +119,38 @@ export function DiffDialog({
             </div>
 
             <div className='grid gap-4 md:grid-cols-3'>
-              <DiffChipList title='新增域名' items={diff.added_domains} />
-              <DiffChipList title='删除域名' items={diff.removed_domains} />
-              <DiffChipList title='修改域名' items={diff.modified_domains} />
+              <DiffChipList
+                title={t('addedDomains')}
+                items={diff.added_domains}
+              />
+              <DiffChipList
+                title={t('removedDomains')}
+                items={diff.removed_domains}
+              />
+              <DiffChipList
+                title={t('modifiedDomains')}
+                items={diff.modified_domains}
+              />
             </div>
 
             <div className='flex flex-wrap gap-2'>
               <Badge
                 variant={diff.main_config_changed ? 'destructive' : 'outline'}
               >
-                主配置 {diff.main_config_changed ? '已变化' : '无变化'}
+                {diff.main_config_changed
+                  ? t('mainChanged')
+                  : t('mainUnchanged')}
               </Badge>
               <Badge
                 variant={diff.waf_config_changed ? 'destructive' : 'outline'}
               >
-                WAF {diff.waf_config_changed ? '已变化' : '无变化'}
+                {diff.waf_config_changed ? t('wafChanged') : t('wafUnchanged')}
               </Badge>
               <Badge variant='outline'>
-                网站数 {diff.active_website_count} →{' '}
-                {diff.current_website_count}
+                {t('websiteDelta', {
+                  from: diff.active_website_count,
+                  to: diff.current_website_count,
+                })}
               </Badge>
             </div>
 
@@ -150,13 +160,13 @@ export function DiffDialog({
                   <TableHeader className='bg-muted/40'>
                     <TableRow className='border-dashed hover:bg-transparent'>
                       <TableHead className='text-xs font-semibold'>
-                        参数
+                        {t('optionKey')}
                       </TableHead>
                       <TableHead className='text-xs font-semibold'>
-                        激活值
+                        {t('activeValue')}
                       </TableHead>
                       <TableHead className='text-xs font-semibold'>
-                        待发布值
+                        {t('pendingValue')}
                       </TableHead>
                     </TableRow>
                   </TableHeader>
@@ -167,10 +177,14 @@ export function DiffDialog({
                           {item.key}
                         </TableCell>
                         <TableCell className='text-xs font-mono text-muted-foreground'>
-                          {renderOptionValue(item.previous_value)}
+                          {item.previous_value === ''
+                            ? t('emptyValue')
+                            : item.previous_value}
                         </TableCell>
                         <TableCell className='text-xs font-mono text-muted-foreground'>
-                          {renderOptionValue(item.current_value)}
+                          {item.current_value === ''
+                            ? t('emptyValue')
+                            : item.current_value}
                         </TableCell>
                       </TableRow>
                     ))}
@@ -179,7 +193,7 @@ export function DiffDialog({
               </div>
             ) : (
               <p className='text-xs text-muted-foreground'>
-                当前无 OpenResty 参数变化。
+                {t('noOptionChanges')}
               </p>
             )}
           </div>

frontend/app/(main)/config-versions/components/preview-sheet.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -36,21 +37,20 @@ export function PreviewSheet({
   canPublish,
   onPublish,
 }: PreviewSheetProps) {
+  const t = useTranslations('configVersions');
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent className='sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0'>
         <SheetHeader className='px-5 py-4 border-b'>
-          <SheetTitle>发布预览</SheetTitle>
-          <SheetDescription>
-            查看待发布配置的渲染结果与支持文件。
-          </SheetDescription>
+          <SheetTitle>{t('previewTitle')}</SheetTitle>
+          <SheetDescription>{t('previewDesc')}</SheetDescription>
         </SheetHeader>
 
         <div className='flex-1 min-h-0 overflow-y-auto px-5 py-4'>
           {loading ? (
             <div className='flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground'>
               <Loader2 className='size-4 animate-spin' />
-              正在加载预览...
+              {t('loadingPreview')}
             </div>
           ) : error ? (
             <p className='text-sm text-destructive'>{error}</p>
@@ -58,10 +58,10 @@ export function PreviewSheet({
             <div className='space-y-5 pb-4'>
               <div className='flex flex-wrap gap-2'>
                 <Badge variant='outline' className='rounded-full text-[10px]'>
-                  规则 {preview.route_count} 条
+                  {t('routeCount', { count: preview.route_count })}
                 </Badge>
                 <Badge variant='outline' className='rounded-full text-[10px]'>
-                  网站 {preview.website_count} 个
+                  {t('websiteCount', { count: preview.website_count })}
                 </Badge>
                 <Badge
                   variant='outline'
@@ -72,7 +72,7 @@ export function PreviewSheet({
               </div>
 
               <div className='space-y-2'>
-                <p className='text-xs font-semibold'>主配置</p>
+                <p className='text-xs font-semibold'>{t('mainConfig')}</p>
                 <CodeBlock
                   code={preview.main_config}
                   language='nginx'
@@ -81,7 +81,7 @@ export function PreviewSheet({
               </div>
 
               <div className='space-y-2'>
-                <p className='text-xs font-semibold'>路由配置</p>
+                <p className='text-xs font-semibold'>{t('routeConfig')}</p>
                 <CodeBlock
                   code={preview.rendered_config}
                   language='nginx'
@@ -92,7 +92,9 @@ export function PreviewSheet({
               {preview.support_files.length > 0 ? (
                 <div className='space-y-2'>
                   <p className='text-xs font-semibold'>
-                    支持文件 ({preview.support_files.length})
+                    {t('supportFiles', {
+                      count: preview.support_files.length,
+                    })}
                   </p>
                   {preview.support_files.map((file) => (
                     <details
@@ -112,13 +114,13 @@ export function PreviewSheet({
                 </div>
               ) : (
                 <p className='text-xs text-muted-foreground'>
-                  当前发布不需要额外支持文件。
+                  {t('noSupportFiles')}
                 </p>
               )}
 
               {!canPublish ? (
                 <p className='text-xs text-muted-foreground'>
-                  当前规则与已激活版本一致，无法重复发布。
+                  {t('noChanges')}
                 </p>
               ) : null}
             </div>
@@ -131,7 +133,7 @@ export function PreviewSheet({
             onClick={() => onOpenChange(false)}
             disabled={publishing}
           >
-            关闭
+            {t('close')}
           </Button>
           <Button
             onClick={onPublish}
@@ -140,10 +142,10 @@ export function PreviewSheet({
             {publishing ? (
               <>
                 <Loader2 className='size-4 animate-spin mr-1' />
-                发布中...
+                {t('publishing')}
               </>
             ) : (
-              '确认发布'
+              t('confirmPublish')
             )}
           </Button>
         </SheetFooter>

frontend/app/(main)/config-versions/components/version-snapshot-sheet.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 
 import { Badge } from '@/components/ui/badge';
@@ -33,6 +34,7 @@ export function VersionSnapshotSheet({
   open,
   onOpenChange,
 }: VersionSnapshotSheetProps) {
+  const t = useTranslations('configVersions');
   const [detail, setDetail] = useState<ConfigVersionDetail | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -51,8 +53,9 @@ export function VersionSnapshotSheet({
       })
       .catch((err) => {
         if (!cancelled) {
-          toast.error('加载版本快照失败', {
-            description: err instanceof Error ? err.message : '未知错误',
+          toast.error(t('snapshotLoadFailed'), {
+            description:
+              err instanceof Error ? err.message : t('unknownError'),
           });
         }
       })
@@ -63,32 +66,36 @@ export function VersionSnapshotSheet({
     return () => {
       cancelled = true;
     };
-  }, [open, version]);
+  }, [open, version, t]);
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent className='sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0'>
         <SheetHeader className='px-5 py-4 border-b'>
           <SheetTitle>
-            {version ? `版本 ${version.version}` : '版本快照'}
+            {version
+              ? t('snapshotVersion', { version: version.version })
+              : t('snapshotTitle')}
           </SheetTitle>
-          <SheetDescription>查看历史配置版本的完整快照内容。</SheetDescription>
+          <SheetDescription>{t('snapshotDesc')}</SheetDescription>
         </SheetHeader>
 
         <div className='flex-1 min-h-0 overflow-y-auto px-5 py-4'>
           {loading ? (
             <div className='flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground'>
               <Loader2 className='size-4 animate-spin' />
-              正在加载快照...
+              {t('loadingSnapshot')}
             </div>
           ) : detail ? (
             <div className='space-y-5 pb-4'>
               <div className='flex flex-wrap gap-2'>
                 {detail.is_active ? (
-                  <Badge className='rounded-full text-[10px]'>当前激活</Badge>
+                  <Badge className='rounded-full text-[10px]'>
+                    {t('active')}
+                  </Badge>
                 ) : (
                   <Badge variant='outline' className='rounded-full text-[10px]'>
-                    历史版本
+                    {t('history')}
                   </Badge>
                 )}
                 <Badge
@@ -101,11 +108,13 @@ export function VersionSnapshotSheet({
 
               <div className='grid gap-3 sm:grid-cols-2 text-xs'>
                 <div>
-                  <p className='text-muted-foreground'>创建人</p>
-                  <p className='font-medium'>{detail.created_by || '系统'}</p>
+                  <p className='text-muted-foreground'>{t('createdBy')}</p>
+                  <p className='font-medium'>
+                    {detail.created_by || t('system')}
+                  </p>
                 </div>
                 <div>
-                  <p className='text-muted-foreground'>创建时间</p>
+                  <p className='text-muted-foreground'>{t('createdAt')}</p>
                   <p className='font-medium'>
                     {formatDateTime(detail.created_at)}
                   </p>
@@ -113,7 +122,7 @@ export function VersionSnapshotSheet({
               </div>
 
               <div className='space-y-2'>
-                <p className='text-xs font-semibold'>主配置</p>
+                <p className='text-xs font-semibold'>{t('mainConfig')}</p>
                 <CodeBlock
                   code={detail.main_config}
                   language='nginx'
@@ -122,7 +131,7 @@ export function VersionSnapshotSheet({
               </div>
 
               <div className='space-y-2'>
-                <p className='text-xs font-semibold'>路由配置</p>
+                <p className='text-xs font-semibold'>{t('routeConfig')}</p>
                 <CodeBlock
                   code={detail.rendered_config}
                   language='nginx'
@@ -135,7 +144,7 @@ export function VersionSnapshotSheet({
 
         <SheetFooter className='px-5 py-4 border-t'>
           <Button variant='outline' onClick={() => onOpenChange(false)}>
-            关闭
+            {t('close')}
           </Button>
         </SheetFooter>
       </SheetContent>