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>

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

@@ -47,6 +47,8 @@ import {
 } from '@/lib/openflare/origin-error-page-templates';
 import { OptionService } from '@/lib/services/openflare';
 
+import { useTranslations } from 'next-intl';
+
 import {
   invalidateResponseQueries,
   KEY_HTML,
@@ -56,6 +58,8 @@ import {
 } from '../../components/shared';
 
 export default function ErrorPageEditPage() {
+  const t = useTranslations('responses');
+  const tc = useTranslations('common');
   const { user, loading: authLoading } = useAuth();
   const queryClient = useQueryClient();
   const [html, setHtml] = useState('');
@@ -79,33 +83,33 @@ export default function ErrorPageEditPage() {
     mutationFn: async () => {
       const bytes = new TextEncoder().encode(html).length;
       if (bytes > ORIGIN_ERROR_PAGE_HTML_MAX_BYTES) {
-        throw new Error('HTML 大小超出限制（最大 256KB）');
+        throw new Error(t('htmlTooLarge'));
       }
       await OptionService.updateBatch([{ key: KEY_HTML, value: html }]);
     },
     onSuccess: async () => {
-      toast.success('源站错误页 HTML 已保存，请前往版本发布使配置生效');
+      toast.success(t('errorHtmlSaved'));
       await invalidateResponseQueries(queryClient);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '保存失败');
+      toast.error(error instanceof Error ? error.message : t('saveFailed'));
     },
   });
 
   const loadSelectedTemplate = () => {
     const tmpl = getOriginErrorPageTemplate(templateId);
     if (!tmpl) {
-      toast.error('未找到所选模板');
+      toast.error(t('templateNotFound'));
       return;
     }
     setHtml(tmpl.html);
-    toast.success(`已加载模板「${tmpl.name}」到编辑器`);
+    toast.success(t('templateLoaded', { name: tmpl.name }));
   };
 
   const restoreDefault = () => {
     setHtml('');
     setRestoreOpen(false);
-    toast.success('已清空为使用服务端内置默认模板（需保存后生效）');
+    toast.success(t('errorRestored'));
   };
 
   if (authLoading) {
@@ -113,7 +117,7 @@ export default function ErrorPageEditPage() {
       <div className='w-full py-6 px-1'>
         <LoadingStateWithBorder
           icon={FileCode2}
-          description='加载权限信息...'
+          description={t('loadingPermission')}
         />
       </div>
     );
@@ -124,8 +128,8 @@ export default function ErrorPageEditPage() {
       <div className='w-full py-6 px-1'>
         <EmptyStateWithBorder
           icon={FileCode2}
-          title='权限不足'
-          description='只有管理员可以编辑错误页 HTML。'
+          title={t('forbidden')}
+          description={t('forbiddenEditError')}
         />
       </div>
     );
@@ -136,7 +140,7 @@ export default function ErrorPageEditPage() {
       <div className='w-full py-6 px-1'>
         <LoadingStateWithBorder
           icon={FileCode2}
-          description='加载错误页配置...'
+          description={t('loadingErrorConfig')}
         />
       </div>
     );
@@ -149,7 +153,7 @@ export default function ErrorPageEditPage() {
           message={
             optionsQuery.error instanceof Error
               ? optionsQuery.error.message
-              : '加载失败'
+              : t('loadFailed')
           }
           onRetry={() => void optionsQuery.refetch()}
         />
@@ -162,7 +166,7 @@ export default function ErrorPageEditPage() {
       <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
         <div className='flex items-center gap-3'>
           <Button variant='outline' size='icon' className='h-8 w-8' asChild>
-            <Link href='/responses?tab=error' aria-label='返回错误页'>
+            <Link href='/responses?tab=error' aria-label={t('backToError')}>
               <ArrowLeft className='size-4' />
             </Link>
           </Button>
@@ -170,7 +174,7 @@ export default function ErrorPageEditPage() {
             <FileCode2 className='size-5 text-primary' />
             <div>
               <h1 className='text-2xl font-semibold tracking-tight'>
-                编辑错误页 HTML
+                {t('editErrorHtml')}
               </h1>
             </div>
           </div>
@@ -185,11 +189,11 @@ export default function ErrorPageEditPage() {
           <>
             <div className='flex items-center gap-1.5'>
               <span className='text-[11px] text-muted-foreground hidden sm:inline'>
-                内置模板
+                {t('builtinTemplates')}
               </span>
               <Select value={templateId} onValueChange={setTemplateId}>
                 <SelectTrigger className='h-7 w-[160px] text-[11px] bg-background'>
-                  <SelectValue placeholder='选择模板' />
+                  <SelectValue placeholder={t('selectTemplate')} />
                 </SelectTrigger>
                 <SelectContent>
                   {ORIGIN_ERROR_PAGE_TEMPLATES.map((tmpl) => (
@@ -211,7 +215,7 @@ export default function ErrorPageEditPage() {
                 onClick={loadSelectedTemplate}
               >
                 <Sparkles className='size-3.5' />
-                加载模板
+                {t('loadTemplate')}
               </Button>
             </div>
             <Button
@@ -222,7 +226,7 @@ export default function ErrorPageEditPage() {
               onClick={() => setRestoreOpen(true)}
             >
               <RotateCcw className='size-3.5' />
-              恢复默认
+              {t('restoreDefault')}
             </Button>
             <Button
               size='sm'
@@ -235,7 +239,7 @@ export default function ErrorPageEditPage() {
               ) : (
                 <Save className='size-3' />
               )}
-              保存
+              {tc('save')}
             </Button>
           </>
         }
@@ -244,15 +248,15 @@ export default function ErrorPageEditPage() {
       <AlertDialog open={restoreOpen} onOpenChange={setRestoreOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>恢复默认 HTML？</AlertDialogTitle>
+            <AlertDialogTitle>{t('restoreTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
-              将清空编辑器内容，保存后使用服务端内置默认模板。此操作不会自动保存。
+              {t('restoreErrorDesc')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogCancel>{tc('cancel')}</AlertDialogCancel>
             <AlertDialogAction onClick={restoreDefault}>
-              确认恢复
+              {t('confirmRestore')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

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

@@ -13,6 +13,8 @@ import { LoadingStateWithBorder } from '@/components/layout/loading';
 import { previewOriginErrorPageHTML } from '@/lib/openflare/default-origin-error-page-html';
 import { OptionService } from '@/lib/services/openflare';
 
+import { useTranslations } from 'next-intl';
+
 import {
   mapOptionsToErrorFields,
   OPTIONS_QUERY_KEY,
@@ -20,6 +22,7 @@ import {
 } from '../../components/shared';
 
 export default function ErrorPagePreviewPage() {
+  const t = useTranslations('responses');
   const { user, loading: authLoading } = useAuth();
 
   const optionsQuery = useQuery({
@@ -38,7 +41,7 @@ export default function ErrorPagePreviewPage() {
   if (authLoading) {
     return (
       <div className='w-full py-6 px-1'>
-        <LoadingStateWithBorder description='加载权限信息...' />
+        <LoadingStateWithBorder description={t('loadingPermission')} />
       </div>
     );
   }
@@ -47,8 +50,8 @@ export default function ErrorPagePreviewPage() {
     return (
       <div className='w-full py-6 px-1'>
         <EmptyStateWithBorder
-          title='权限不足'
-          description='只有管理员可以预览错误页。'
+          title={t('forbidden')}
+          description={t('forbiddenPreviewError')}
         />
       </div>
     );
@@ -57,7 +60,7 @@ export default function ErrorPagePreviewPage() {
   if (optionsQuery.isLoading) {
     return (
       <div className='w-full py-6 px-1'>
-        <LoadingStateWithBorder description='加载错误页配置...' />
+        <LoadingStateWithBorder description={t('loadingErrorConfig')} />
       </div>
     );
   }
@@ -69,7 +72,7 @@ export default function ErrorPagePreviewPage() {
           message={
             optionsQuery.error instanceof Error
               ? optionsQuery.error.message
-              : '加载失败'
+              : t('loadFailed')
           }
           onRetry={() => void optionsQuery.refetch()}
         />
@@ -82,14 +85,14 @@ export default function ErrorPagePreviewPage() {
       <div className='flex items-center justify-between gap-3 border-b bg-background/95 px-4 py-2 backdrop-blur shrink-0'>
         <div className='flex items-center gap-2 min-w-0'>
           <Button variant='outline' size='icon' className='h-8 w-8' asChild>
-            <Link href='/responses?tab=error' aria-label='返回错误页'>
+            <Link href='/responses?tab=error' aria-label={t('backToError')}>
               <ArrowLeft className='size-4' />
             </Link>
           </Button>
           <div className='min-w-0'>
-            <p className='text-sm font-semibold truncate'>错误页预览</p>
+            <p className='text-sm font-semibold truncate'>{t('errorPreview')}</p>
             <p className='text-[11px] text-muted-foreground font-mono truncate'>
-              {'{{status}}'}→502 · {'{{host}}'}→example.com · 全屏展示
+              {'{{status}}'}→502 · {'{{host}}'}→example.com · {t('fullscreen')}
             </p>
           </div>
         </div>
@@ -97,18 +100,18 @@ export default function ErrorPagePreviewPage() {
           <Button variant='outline' size='sm' asChild>
             <Link href='/responses/error-page/edit'>
               <Pencil className='size-3.5' />
-              编辑
+              {t('edit')}
             </Link>
           </Button>
           <Button variant='ghost' size='icon' className='h-8 w-8' asChild>
-            <Link href='/responses?tab=error' aria-label='关闭预览'>
+            <Link href='/responses?tab=error' aria-label={t('closePreview')}>
               <X className='size-4' />
             </Link>
           </Button>
         </div>
       </div>
       <iframe
-        title='源站错误页预览'
+        title={t('errorPagePreview')}
         sandbox=''
         srcDoc={previewSrcDoc}
         className='flex-1 w-full border-0 bg-background min-h-0'

frontend/app/(main)/responses/offline/edit/page.tsx

@@ -44,6 +44,8 @@ import {
 } from '@/lib/openflare/offline-page-templates';
 import { OptionService } from '@/lib/services/openflare';
 
+import { useTranslations } from 'next-intl';
+
 import {
   invalidateResponseQueries,
   KEY_SW_HTML,
@@ -55,6 +57,8 @@ import {
 const OFFLINE_PAGE_HTML_MAX_BYTES = 256 * 1024;
 
 export default function OfflinePageEditPage() {
+  const t = useTranslations('responses');
+  const tc = useTranslations('common');
   const { user, loading: authLoading } = useAuth();
   const queryClient = useQueryClient();
   const [html, setHtml] = useState('');
@@ -78,33 +82,33 @@ export default function OfflinePageEditPage() {
     mutationFn: async () => {
       const bytes = new TextEncoder().encode(html).length;
       if (bytes > OFFLINE_PAGE_HTML_MAX_BYTES) {
-        throw new Error('HTML 大小超出限制（最大 256KB）');
+        throw new Error(t('htmlTooLarge'));
       }
       await OptionService.updateBatch([{ key: KEY_SW_HTML, value: html }]);
     },
     onSuccess: async () => {
-      toast.success('离线页 HTML 已保存，请前往版本发布使配置生效');
+      toast.success(t('offlineHtmlSaved'));
       await invalidateResponseQueries(queryClient);
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '保存失败');
+      toast.error(error instanceof Error ? error.message : t('saveFailed'));
     },
   });
 
   const loadSelectedTemplate = () => {
     const tmpl = getOfflinePageTemplate(templateId);
     if (!tmpl) {
-      toast.error('未找到所选模板');
+      toast.error(t('templateNotFound'));
       return;
     }
     setHtml(tmpl.html);
-    toast.success(`已加载模板「${tmpl.name}」到编辑器`);
+    toast.success(t('templateLoaded', { name: tmpl.name }));
   };
 
   const restoreDefault = () => {
     setHtml('');
     setRestoreOpen(false);
-    toast.success('已清空为使用内置默认模板（需保存后生效）');
+    toast.success(t('offlineRestored'));
   };
 
   if (authLoading) {
@@ -112,7 +116,7 @@ export default function OfflinePageEditPage() {
       <div className='w-full py-6 px-1'>
         <LoadingStateWithBorder
           icon={FileCode2}
-          description='加载权限信息...'
+          description={t('loadingPermission')}
         />
       </div>
     );
@@ -123,8 +127,8 @@ export default function OfflinePageEditPage() {
       <div className='w-full py-6 px-1'>
         <EmptyStateWithBorder
           icon={FileCode2}
-          title='权限不足'
-          description='只有管理员可以编辑离线页 HTML。'
+          title={t('forbidden')}
+          description={t('forbiddenEditOffline')}
         />
       </div>
     );
@@ -135,7 +139,7 @@ export default function OfflinePageEditPage() {
       <div className='w-full py-6 px-1'>
         <LoadingStateWithBorder
           icon={FileCode2}
-          description='加载离线页配置...'
+          description={t('loadingOfflineConfig')}
         />
       </div>
     );
@@ -148,7 +152,7 @@ export default function OfflinePageEditPage() {
           message={
             optionsQuery.error instanceof Error
               ? optionsQuery.error.message
-              : '加载失败'
+              : t('loadFailed')
           }
           onRetry={() => void optionsQuery.refetch()}
         />
@@ -161,7 +165,7 @@ export default function OfflinePageEditPage() {
       <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
         <div className='flex items-center gap-3'>
           <Button variant='outline' size='icon' className='h-8 w-8' asChild>
-            <Link href='/responses?tab=offline' aria-label='返回离线页'>
+            <Link href='/responses?tab=offline' aria-label={t('backToOffline')}>
               <ArrowLeft className='size-4' />
             </Link>
           </Button>
@@ -169,7 +173,7 @@ export default function OfflinePageEditPage() {
             <FileCode2 className='size-5 text-primary' />
             <div>
               <h1 className='text-2xl font-semibold tracking-tight'>
-                编辑离线页 HTML
+                {t('editOfflineHtml')}
               </h1>
             </div>
           </div>
@@ -182,16 +186,16 @@ export default function OfflinePageEditPage() {
         preview={effectiveOfflinePageHTML}
         footerHint={null}
         showPreviewLink={false}
-        previewTitle='离线页实时预览'
+        previewTitle={t('offlineLivePreview')}
         toolbarRight={
           <>
             <div className='flex items-center gap-1.5'>
               <span className='text-[11px] text-muted-foreground hidden sm:inline'>
-                内置模板
+                {t('builtinTemplates')}
               </span>
               <Select value={templateId} onValueChange={setTemplateId}>
                 <SelectTrigger className='h-7 w-[160px] text-[11px] bg-background'>
-                  <SelectValue placeholder='选择模板' />
+                  <SelectValue placeholder={t('selectTemplate')} />
                 </SelectTrigger>
                 <SelectContent>
                   {OFFLINE_PAGE_TEMPLATES.map((tmpl) => (
@@ -213,7 +217,7 @@ export default function OfflinePageEditPage() {
                 onClick={loadSelectedTemplate}
               >
                 <Sparkles className='size-3.5' />
-                加载模板
+                {t('loadTemplate')}
               </Button>
             </div>
             <Button
@@ -224,7 +228,7 @@ export default function OfflinePageEditPage() {
               onClick={() => setRestoreOpen(true)}
             >
               <RotateCcw className='size-3.5' />
-              恢复默认
+              {t('restoreDefault')}
             </Button>
             <Button
               size='sm'
@@ -237,7 +241,7 @@ export default function OfflinePageEditPage() {
               ) : (
                 <Save className='size-3' />
               )}
-              保存
+              {tc('save')}
             </Button>
           </>
         }
@@ -246,15 +250,15 @@ export default function OfflinePageEditPage() {
       <AlertDialog open={restoreOpen} onOpenChange={setRestoreOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>恢复默认 HTML？</AlertDialogTitle>
+            <AlertDialogTitle>{t('restoreTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
-              将清空编辑器内容，保存后使用内置默认模板。此操作不会自动保存。
+              {t('restoreOfflineDesc')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogCancel>{tc('cancel')}</AlertDialogCancel>
             <AlertDialogAction onClick={restoreDefault}>
-              确认恢复
+              {t('confirmRestore')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

frontend/app/(main)/responses/offline/preview/page.tsx

@@ -13,6 +13,8 @@ import { LoadingStateWithBorder } from '@/components/layout/loading';
 import { OptionService } from '@/lib/services/openflare';
 
 import { effectiveOfflinePageHTML } from '@/lib/openflare/offline-page-templates';
+import { useTranslations } from 'next-intl';
+
 import {
   mapOptionsToOfflineFields,
   OPTIONS_QUERY_KEY,
@@ -20,6 +22,7 @@ import {
 } from '../../components/shared';
 
 export default function OfflinePagePreviewPage() {
+  const t = useTranslations('responses');
   const { user, loading: authLoading } = useAuth();
 
   const optionsQuery = useQuery({
@@ -39,7 +42,7 @@ export default function OfflinePagePreviewPage() {
   if (authLoading) {
     return (
       <div className='w-full py-6 px-1'>
-        <LoadingStateWithBorder description='加载权限信息...' />
+        <LoadingStateWithBorder description={t('loadingPermission')} />
       </div>
     );
   }
@@ -48,8 +51,8 @@ export default function OfflinePagePreviewPage() {
     return (
       <div className='w-full py-6 px-1'>
         <EmptyStateWithBorder
-          title='权限不足'
-          description='只有管理员可以预览离线页。'
+          title={t('forbidden')}
+          description={t('forbiddenPreviewOffline')}
         />
       </div>
     );
@@ -58,7 +61,7 @@ export default function OfflinePagePreviewPage() {
   if (optionsQuery.isLoading) {
     return (
       <div className='w-full py-6 px-1'>
-        <LoadingStateWithBorder description='加载离线页配置...' />
+        <LoadingStateWithBorder description={t('loadingOfflineConfig')} />
       </div>
     );
   }
@@ -70,7 +73,7 @@ export default function OfflinePagePreviewPage() {
           message={
             optionsQuery.error instanceof Error
               ? optionsQuery.error.message
-              : '加载失败'
+              : t('loadFailed')
           }
           onRetry={() => void optionsQuery.refetch()}
         />
@@ -83,14 +86,14 @@ export default function OfflinePagePreviewPage() {
       <div className='flex items-center justify-between gap-3 border-b bg-background/95 px-4 py-2 backdrop-blur shrink-0'>
         <div className='flex items-center gap-2 min-w-0'>
           <Button variant='outline' size='icon' className='h-8 w-8' asChild>
-            <Link href='/responses?tab=offline' aria-label='返回离线页'>
+            <Link href='/responses?tab=offline' aria-label={t('backToOffline')}>
               <ArrowLeft className='size-4' />
             </Link>
           </Button>
           <div className='min-w-0'>
-            <p className='text-sm font-semibold truncate'>离线页预览</p>
+            <p className='text-sm font-semibold truncate'>{t('offlinePreview')}</p>
             <p className='text-[11px] text-muted-foreground font-mono truncate'>
-              全屏展示
+              {t('fullscreen')}
             </p>
           </div>
         </div>
@@ -98,18 +101,18 @@ export default function OfflinePagePreviewPage() {
           <Button variant='outline' size='sm' asChild>
             <Link href='/responses/offline/edit'>
               <Pencil className='size-3.5' />
-              编辑
+              {t('edit')}
             </Link>
           </Button>
           <Button variant='ghost' size='icon' className='h-8 w-8' asChild>
-            <Link href='/responses?tab=offline' aria-label='关闭预览'>
+            <Link href='/responses?tab=offline' aria-label={t('closePreview')}>
               <X className='size-4' />
             </Link>
           </Button>
         </div>
       </div>
       <iframe
-        title='离线页预览'
+        title={t('offlinePreview')}
         sandbox=''
         srcDoc={html}
         className='flex-1 w-full border-0 bg-background min-h-0'

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

@@ -14,6 +14,8 @@ import { OptionService } from '@/lib/services/openflare';
 
 import { ErrorPageTab } from './components/error-page-tab';
 import { OfflinePageTab } from './components/offline-page-tab';
+import { useTranslations } from 'next-intl';
+
 import { OPTIONS_QUERY_KEY, optionsToMap } from './components/shared';
 
 type ResponseTab = 'error' | 'offline';
@@ -26,6 +28,7 @@ function resolveTab(tabParam: string | null): ResponseTab {
 }
 
 function ResponsesPageContent() {
+  const t = useTranslations('responses');
   const { user, loading: authLoading } = useAuth();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -62,7 +65,7 @@ function ResponsesPageContent() {
       <div className='w-full py-6 px-1'>
         <LoadingStateWithBorder
           icon={MessageSquareText}
-          description='加载权限信息...'
+          description={t('loadingPermission')}
         />
       </div>
     );
@@ -73,8 +76,8 @@ function ResponsesPageContent() {
       <div className='w-full py-6 px-1'>
         <EmptyStateWithBorder
           icon={MessageSquareText}
-          title='权限不足'
-          description='只有管理员可以访问响应页面设置。'
+          title={t('forbidden')}
+          description={t('forbiddenSettings')}
         />
       </div>
     );
@@ -85,7 +88,7 @@ function ResponsesPageContent() {
       <div className='w-full py-6 px-1'>
         <LoadingStateWithBorder
           icon={MessageSquareText}
-          description='加载响应页面配置...'
+          description={t('loadingConfig')}
         />
       </div>
     );
@@ -98,7 +101,7 @@ function ResponsesPageContent() {
           message={
             optionsQuery.error instanceof Error
               ? optionsQuery.error.message
-              : '加载失败'
+              : t('loadFailed')
           }
           onRetry={() => void optionsQuery.refetch()}
         />
@@ -113,10 +116,8 @@ function ResponsesPageContent() {
       <div className='flex items-center gap-2'>
         <MessageSquareText 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>
 
@@ -130,13 +131,13 @@ function ResponsesPageContent() {
             value='error'
             className='px-0 pb-2 text-xs font-semibold'
           >
-            错误页
+            {t('errorPage')}
           </TabsTrigger>
           <TabsTrigger
             value='offline'
             className='px-0 pb-2 text-xs font-semibold'
           >
-            离线页
+            {t('offlinePage')}
           </TabsTrigger>
         </TabsList>
 
@@ -153,13 +154,14 @@ function ResponsesPageContent() {
 }
 
 export default function ResponsesPage() {
+  const t = useTranslations('responses');
   return (
     <Suspense
       fallback={
         <div className='w-full py-6 px-1'>
           <LoadingStateWithBorder
             icon={MessageSquareText}
-            description='加载响应页面...'
+            description={t('loadingPage')}
           />
         </div>
       }