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

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

frontend/app/(main)/responses/components/error-page-tab.tsx

@@ -24,6 +24,8 @@ import {
 } from '@/lib/openflare/status-code-tags';
 import { OptionService } from '@/lib/services/openflare';
 
+import { useTranslations } from 'next-intl';
+
 import {
   defaultErrorPageFields,
   invalidateResponseQueries,
@@ -39,6 +41,8 @@ export function ErrorPageTab({
 }: {
   optionMap: Record<string, string>;
 }) {
+  const t = useTranslations('responses');
+  const tc = useTranslations('common');
   const queryClient = useQueryClient();
 
   const [fields, setFields] = useState<ErrorPageFields>(defaultErrorPageFields);
@@ -68,11 +72,11 @@ export function ErrorPageTab({
       ]);
     },
     onSuccess: async () => {
-      toast.success('触发策略已保存，请前往版本发布使配置生效');
+      toast.success(t('policySaved'));
       await invalidateResponseQueries(queryClient);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '保存失败');
+      toast.error(error instanceof Error ? error.message : t('saveFailed'));
     },
   });
 
@@ -92,10 +96,8 @@ export function ErrorPageTab({
       <Card className='border-dashed shadow-none'>
         <CardHeader className='flex flex-row items-start justify-between gap-4 space-y-0'>
           <div className='space-y-1.5'>
-            <CardTitle className='text-base'>触发策略</CardTitle>
-            <CardDescription>
-              配置源站错误页的启用条件与触发状态码。
-            </CardDescription>
+            <CardTitle className='text-base'>{t('triggerPolicy')}</CardTitle>
+            <CardDescription>{t('triggerPolicyDesc')}</CardDescription>
           </div>
           <Button
             size='sm'
@@ -108,15 +110,15 @@ export function ErrorPageTab({
             ) : (
               <Save className='size-3.5' />
             )}
-            保存
+            {tc('save')}
           </Button>
         </CardHeader>
         <CardContent className='space-y-0 divide-y'>
           <div className='flex items-start justify-between gap-6 pb-5'>
             <div className='space-y-1'>
-              <Label className='text-sm font-medium'>启用源站错误页</Label>
+              <Label className='text-sm font-medium'>{t('enableErrorPage')}</Label>
               <p className='text-sm text-muted-foreground'>
-                关闭后会透传源站或 Nginx 默认错误响应。
+                {t('enableErrorPageDesc')}
               </p>
             </div>
             <Switch
@@ -124,17 +126,15 @@ export function ErrorPageTab({
               onCheckedChange={(enabled) =>
                 setFields((prev) => ({ ...prev, enabled }))
               }
-              aria-label='启用源站错误页'
+              aria-label={t('enableErrorPage')}
               className='mt-0.5 shrink-0'
             />
           </div>
 
           <div className='flex items-start justify-between gap-6 py-5'>
             <div className='space-y-1'>
-              <Label className='text-sm font-medium'>仅针对 GET 请求</Label>
-              <p className='text-sm text-muted-foreground'>
-                开启后仅对 GET 请求的匹配错误状态码返回自定义错误页。
-              </p>
+              <Label className='text-sm font-medium'>{t('getOnly')}</Label>
+              <p className='text-sm text-muted-foreground'>{t('getOnlyDesc')}</p>
             </div>
             <Switch
               checked={fields.getOnly}
@@ -142,7 +142,7 @@ export function ErrorPageTab({
               onCheckedChange={(getOnly) =>
                 setFields((prev) => ({ ...prev, getOnly }))
               }
-              aria-label='仅针对 GET 请求'
+              aria-label={t('getOnly')}
               className='mt-0.5 shrink-0'
             />
           </div>
@@ -153,10 +153,10 @@ export function ErrorPageTab({
                 htmlFor='origin-error-status-codes'
                 className='text-sm font-medium'
               >
-                触发状态码
+                {t('statusCodes')}
               </Label>
               <p className='text-sm text-muted-foreground'>
-                支持单码（如 502）或闭区间（如 500-599）。
+                {t('statusCodesDesc')}
               </p>
             </div>
             <TagsInput
@@ -167,7 +167,7 @@ export function ErrorPageTab({
                 setTagError(null);
               }}
               validateTag={handleValidateTag}
-              placeholder='例如 502 或 500-599，回车添加'
+              placeholder={t('statusCodesPlaceholder')}
               aria-invalid={!!tagError}
               disabled={!fields.enabled}
             />
@@ -181,19 +181,19 @@ export function ErrorPageTab({
       <Card className='border-dashed shadow-none overflow-hidden'>
         <CardHeader className='flex flex-row items-start justify-between gap-3 space-y-0'>
           <div className='space-y-1.5'>
-            <CardTitle className='text-base'>页面预览</CardTitle>
+            <CardTitle className='text-base'>{t('pagePreview')}</CardTitle>
           </div>
           <div className='flex shrink-0 flex-wrap gap-2'>
             <Button variant='outline' size='sm' asChild>
               <Link href='/responses/error-page/preview'>
                 <Expand className='size-3.5' />
-                预览
+                {t('preview')}
               </Link>
             </Button>
             <Button size='sm' asChild>
               <Link href='/responses/error-page/edit'>
                 <Pencil className='size-3.5' />
-                编辑
+                {t('edit')}
               </Link>
             </Button>
           </div>
@@ -201,7 +201,7 @@ export function ErrorPageTab({
         <CardContent>
           <div className='overflow-hidden rounded-md border bg-muted/30'>
             <iframe
-              title='源站错误页预览'
+              title={t('errorPagePreview')}
               sandbox=''
               srcDoc={previewSrcDoc}
               className='h-[32rem] w-full bg-background'

frontend/app/(main)/responses/components/offline-page-tab.tsx

@@ -24,6 +24,8 @@ import {
   zoneQueryKey,
 } from '@/lib/services/openflare';
 
+import { useTranslations } from 'next-intl';
+
 import { ScopeDomainDialog } from './scope-domain-dialog';
 import {
   defaultOfflinePageFields,
@@ -40,6 +42,8 @@ export function OfflinePageTab({
 }: {
   optionMap: Record<string, string>;
 }) {
+  const t = useTranslations('responses');
+  const tc = useTranslations('common');
   const queryClient = useQueryClient();
   const [fields, setFields] = useState<OfflinePageFields>(
     defaultOfflinePageFields,
@@ -78,11 +82,11 @@ export function OfflinePageTab({
       ]);
     },
     onSuccess: async () => {
-      toast.success('离线页已保存，请前往版本发布使配置生效');
+      toast.success(t('offlineSaved'));
       await invalidateResponseQueries(queryClient);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '保存失败');
+      toast.error(error instanceof Error ? error.message : t('saveFailed'));
     },
   });
 
@@ -91,11 +95,8 @@ export function OfflinePageTab({
       <Card className='border-dashed shadow-none'>
         <CardHeader className='flex flex-row items-start justify-between gap-4 space-y-0'>
           <div className='space-y-1.5'>
-            <CardTitle className='text-base'>离线页</CardTitle>
-            <CardDescription>
-              启用后给启用 HTTPS 的网站下发 Service
-              Worker，域名无法访问时浏览器从缓存展示此离线页。
-            </CardDescription>
+            <CardTitle className='text-base'>{t('offlinePage')}</CardTitle>
+            <CardDescription>{t('offlinePageDesc')}</CardDescription>
           </div>
           <Button
             size='sm'
@@ -108,17 +109,17 @@ export function OfflinePageTab({
             ) : (
               <Save className='size-3.5' />
             )}
-            保存
+            {tc('save')}
           </Button>
         </CardHeader>
         <CardContent className='space-y-4'>
           <div className='flex items-start justify-between gap-6'>
             <div className='space-y-1'>
               <Label className='text-sm font-medium'>
-                启用 Service Worker 离线页
+                {t('enableOffline')}
               </Label>
               <p className='text-sm text-muted-foreground'>
-                仅对 HTTPS 网站生效。
+                {t('enableOfflineDesc')}
               </p>
             </div>
             <Switch
@@ -126,16 +127,16 @@ export function OfflinePageTab({
               onCheckedChange={(enabled) =>
                 setFields((prev) => ({ ...prev, enabled }))
               }
-              aria-label='启用离线页'
+              aria-label={t('enableOfflineAria')}
               className='mt-0.5 shrink-0'
             />
           </div>
           <div className='space-y-2'>
             <div className='flex items-center justify-between gap-3'>
               <div>
-                <Label className='text-sm font-medium'>生效范围</Label>
+                <Label className='text-sm font-medium'>{t('scope')}</Label>
                 <p className='text-sm text-muted-foreground'>
-                  仅对选中的 HTTPS 域名生效；留空则不注入。
+                  {t('scopeDesc')}
                 </p>
               </div>
               <Button
@@ -146,14 +147,14 @@ export function OfflinePageTab({
                 onClick={() => setScopeOpen(true)}
               >
                 <Plus className='size-3.5' />
-                添加域名
+                {t('addDomain')}
               </Button>
             </div>
             {fields.domains.length === 0 ? (
               <p className='text-sm text-muted-foreground'>
                 {fields.enabled
-                  ? '尚未选择生效域名，保存后不注入任何站点。'
-                  : '启用离线兜底后可选择生效域名。'}
+                  ? t('noScopeSelected')
+                  : t('enableThenSelectScope')}
               </p>
             ) : (
               <div className='flex flex-wrap gap-2'>
@@ -168,7 +169,7 @@ export function OfflinePageTab({
                       type='button'
                       className='hover:text-destructive'
                       disabled={!fields.enabled}
-                      aria-label={`移除 ${domain}`}
+                      aria-label={t('removeDomain', { domain })}
                       onClick={() =>
                         setFields((prev) => ({
                           ...prev,
@@ -188,19 +189,19 @@ export function OfflinePageTab({
       <Card className='border-dashed shadow-none overflow-hidden'>
         <CardHeader className='flex flex-row items-start justify-between gap-3 space-y-0'>
           <div className='space-y-1.5'>
-            <CardTitle className='text-base'>页面预览</CardTitle>
+            <CardTitle className='text-base'>{t('pagePreview')}</CardTitle>
           </div>
           <div className='flex shrink-0 flex-wrap gap-2'>
             <Button variant='outline' size='sm' asChild>
               <Link href='/responses/offline/preview'>
                 <Expand className='size-3.5' />
-                预览
+                {t('preview')}
               </Link>
             </Button>
             <Button size='sm' asChild>
               <Link href='/responses/offline/edit'>
                 <Pencil className='size-3.5' />
-                编辑
+                {t('edit')}
               </Link>
             </Button>
           </div>
@@ -208,7 +209,7 @@ export function OfflinePageTab({
         <CardContent>
           <div className='overflow-hidden rounded-md border bg-muted/30'>
             <iframe
-              title='离线页预览'
+              title={t('offlinePreview')}
               sandbox=''
               srcDoc={previewSrcDoc}
               className='h-[32rem] w-full bg-background'

frontend/app/(main)/responses/components/scope-domain-dialog.tsx

@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/dialog';
 import { Field, FieldGroup, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
+import { useTranslations } from 'next-intl';
 import { cn } from '@/lib/utils';
 
 type ScopeZoneGroup = {
@@ -43,6 +44,8 @@ export function ScopeDomainDialog({
   pending: boolean;
   onSubmit: (domains: string[]) => void;
 }) {
+  const t = useTranslations('responses');
+  const tc = useTranslations('common');
   const [keyword, setKeyword] = useState('');
   const [selectedSet, setSelectedSet] = useState<Set<string>>(() => new Set());
   const [collapsedZones, setCollapsedZones] = useState<Set<string>>(
@@ -131,14 +134,12 @@ export function ScopeDomainDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className='sm:max-w-lg'>
         <DialogHeader>
-          <DialogTitle>选择生效域名</DialogTitle>
-          <DialogDescription>
-            仅对选中的 HTTPS 域名注入离线兜底；搜索筛选与批量勾选。
-          </DialogDescription>
+          <DialogTitle>{t('selectScopeTitle')}</DialogTitle>
+          <DialogDescription>{t('selectScopeDesc')}</DialogDescription>
         </DialogHeader>
         <FieldGroup>
           <Field>
-            <FieldLabel htmlFor='sw-scope-search'>域名</FieldLabel>
+            <FieldLabel htmlFor='sw-scope-search'>{t('domain')}</FieldLabel>
             <div className='space-y-2'>
               <div className='relative'>
                 <Search className='pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground' />
@@ -146,7 +147,7 @@ export function ScopeDomainDialog({
                   id='sw-scope-search'
                   value={keyword}
                   onChange={(event) => setKeyword(event.target.value)}
-                  placeholder='搜索域名或顶级域…'
+                  placeholder={t('searchDomainOrZone')}
                   className='pl-8'
                   disabled={pending}
                 />
@@ -154,9 +155,9 @@ export function ScopeDomainDialog({
               <div className='flex flex-wrap items-center justify-between gap-2'>
                 <div className='flex items-center gap-2 text-xs text-muted-foreground'>
                   <Badge variant='secondary' className='font-normal'>
-                    已选 {selectedSet.size}
+                    {t('selectedCount', { count: selectedSet.size })}
                   </Badge>
-                  <span>可见 {visibleDomains.length}</span>
+                  <span>{t('visibleCount', { count: visibleDomains.length })}</span>
                 </div>
                 <div className='flex items-center gap-1'>
                   <Button
@@ -167,7 +168,9 @@ export function ScopeDomainDialog({
                     disabled={pending || visibleDomains.length === 0}
                     onClick={toggleAllVisible}
                   >
-                    {allVisibleSelected ? '取消全选' : '全选可见'}
+                    {allVisibleSelected
+                      ? t('unselectVisible')
+                      : t('selectVisible')}
                   </Button>
                   <Button
                     type='button'
@@ -177,17 +180,17 @@ export function ScopeDomainDialog({
                     disabled={pending || selectedSet.size === 0}
                     onClick={() => setSelectedSet(new Set())}
                   >
-                    清空
+                    {t('clear')}
                   </Button>
                 </div>
               </div>
               {zones.length === 0 ? (
                 <div className='rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground'>
-                  暂无可用域名，请先在 Zone 管理中注册域名。
+                  {t('noAvailableDomains')}
                 </div>
               ) : filtered.length === 0 ? (
                 <div className='rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground'>
-                  没有匹配的域名
+                  {t('noMatchingDomains')}
                 </div>
               ) : (
                 <div className='max-h-72 space-y-1 overflow-y-auto rounded-lg border p-2'>
@@ -223,7 +226,9 @@ export function ScopeDomainDialog({
                               }
                               disabled={pending}
                               onCheckedChange={() => toggleGroup(group.domains)}
-                              aria-label={`选择顶级域 ${group.zoneDomain}`}
+                              aria-label={t('selectZone', {
+                                domain: group.zoneDomain,
+                              })}
                               className='ml-1'
                             />
                             <CollapsibleTrigger asChild>
@@ -275,7 +280,7 @@ export function ScopeDomainDialog({
                                         variant='secondary'
                                         className='shrink-0 text-[10px] font-normal'
                                       >
-                                        顶级域
+                                        {t('apex')}
                                       </Badge>
                                     ) : null}
                                     {checked ? (
@@ -301,13 +306,13 @@ export function ScopeDomainDialog({
             disabled={pending}
             onClick={() => onOpenChange(false)}
           >
-            取消
+            {tc('cancel')}
           </Button>
           <Button
             disabled={pending}
             onClick={() => onSubmit([...selectedSet].sort())}
           >
-            确定
+            {t('confirm')}
           </Button>
         </DialogFooter>
       </DialogContent>