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

接入无 URL 前缀的 zh-CN/en，顶栏与外观设置可切换语言；选择写入 cookie 后刷新生效。
2026-10-12 02:06:37 +08:00 · 2026-08-16 16:49:16 +08:00
parent 64fbaa7ef1
commit 5a8722ff07
219 changed files with 21437 additions and 5212 deletions
@@ -89,11 +89,18 @@ export function mapOptionsToOpsFields(
  };
 }

-export function formatDurationLabel(value: string) {
+export type OpsMessage = (
+  key: string,
+  values?: Record<string, string | number>,
+) => string;
+
+export function formatDurationLabel(value: string, t: OpsMessage) {
  const milliseconds = Number.parseInt(value, 10);
  if (Number.isNaN(milliseconds)) return value;
-  if (milliseconds >= 60000) return `${milliseconds / 60000} 分钟`;
-  return `${milliseconds / 1000} 秒`;
+  if (milliseconds >= 60000) {
+    return t('duration.minutes', { count: milliseconds / 60000 });
+  }
+  return t('duration.seconds', { count: milliseconds / 1000 });
 }

 export function normalizeServerUrl(value: string) {
@@ -116,21 +123,24 @@ export function buildDiscoveryCommand(
  ].join('\n');
 }

-export function validateAgentFields(fields: OpenFlareOpsFields) {
+export function validateAgentFields(fields: OpenFlareOpsFields, t: OpsMessage) {
  const heartbeat = Number.parseInt(fields.agent_heartbeat_interval, 10);
  const offline = Number.parseInt(fields.node_offline_threshold, 10);
  if (Number.isNaN(heartbeat) || heartbeat < 1000) {
-    throw new Error('心跳间隔不能小于 1000 毫秒。');
+    throw new Error(t('errors.heartbeatMin'));
  }
  if (Number.isNaN(offline) || offline < 10000) {
-    throw new Error('离线阈值不能小于 10000 毫秒。');
+    throw new Error(t('errors.offlineMin'));
  }
  if (offline < heartbeat * 3) {
-    throw new Error('离线阈值建议至少为心跳间隔的 3 倍。');
+    throw new Error(t('errors.offlineRatio'));
  }
 }

-export function validateUptimeKumaFields(fields: OpenFlareOpsFields) {
+export function validateUptimeKumaFields(
+  fields: OpenFlareOpsFields,
+  t: OpsMessage,
+) {
  const syncInt = Number.parseInt(fields.uptime_kuma_sync_interval, 10);
  const interval = Number.parseInt(fields.uptime_kuma_interval, 10);
  const retry = Number.parseInt(fields.uptime_kuma_retry, 10);
@@ -138,25 +148,26 @@ export function validateUptimeKumaFields(fields: OpenFlareOpsFields) {
  const timeout = Number.parseInt(fields.uptime_kuma_timeout, 10);

  if (fields.uptime_kuma_enabled) {
-    if (!fields.uptime_kuma_url.trim())
-      throw new Error('请输入 Uptime Kuma 地址。');
+    if (!fields.uptime_kuma_url.trim()) throw new Error(t('errors.kumaUrl'));
    if (!fields.uptime_kuma_username.trim())
-      throw new Error('请输入 Uptime Kuma 用户名。');
+      throw new Error(t('errors.kumaUser'));
  }
  if (Number.isNaN(syncInt) || syncInt <= 0)
-    throw new Error('同步间隔必须为正整数。');
+    throw new Error(t('errors.syncInterval'));
  if (Number.isNaN(interval) || interval <= 0)
-    throw new Error('心跳间隔必须为正整数。');
-  if (Number.isNaN(retry) || retry < 0)
-    throw new Error('重试次数必须为非负整数。');
+    throw new Error(t('errors.interval'));
+  if (Number.isNaN(retry) || retry < 0) throw new Error(t('errors.retry'));
  if (Number.isNaN(retryInt) || retryInt <= 0)
-    throw new Error('心跳重试间隔必须为正整数。');
+    throw new Error(t('errors.retryInterval'));
  if (Number.isNaN(timeout) || timeout <= 0)
-    throw new Error('请求超时必须为正整数。');
+    throw new Error(t('errors.timeout'));
 }

-export function agentOptionEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validateAgentFields(fields);
+export function agentOptionEntries(
+  fields: OpenFlareOpsFields,
+  t: OpsMessage,
+): OptionItem[] {
+  validateAgentFields(fields, t);
  return [
    { key: 'agent_heartbeat_interval', value: fields.agent_heartbeat_interval },
    {
@@ -171,8 +182,9 @@ export function agentOptionEntries(fields: OpenFlareOpsFields): OptionItem[] {

 export function uptimeKumaOptionEntries(
  fields: OpenFlareOpsFields,
+  t: OpsMessage,
 ): OptionItem[] {
-  validateUptimeKumaFields(fields);
+  validateUptimeKumaFields(fields, t);
  return [
    { key: 'uptime_kuma_enabled', value: String(fields.uptime_kuma_enabled) },
    { key: 'uptime_kuma_url', value: fields.uptime_kuma_url.trim() },
@@ -200,21 +212,22 @@ export function uptimeKumaOptionEntries(
  ];
 }

-export function validatePagesFields(fields: OpenFlareOpsFields) {
+export function validatePagesFields(fields: OpenFlareOpsFields, t: OpsMessage) {
  const packageSize = Number.parseInt(fields.pages_max_package_size_mb, 10);
  const historyCount = Number.parseInt(fields.pages_max_history_count, 10);
  if (Number.isNaN(packageSize) || packageSize < 1 || packageSize > 2048) {
-    throw new Error('Pages 部署包大小上限必须为 1～2048 MiB。');
+    throw new Error(t('errors.pagesSize'));
  }
  if (Number.isNaN(historyCount) || historyCount < 0) {
-    throw new Error(
-      'Pages 历史保留数必须为大于等于 0 的整数（0 表示不限制）。',
-    );
+    throw new Error(t('errors.pagesHistory'));
  }
 }

-export function pagesOptionEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validatePagesFields(fields);
+export function pagesOptionEntries(
+  fields: OpenFlareOpsFields,
+  t: OpsMessage,
+): OptionItem[] {
+  validatePagesFields(fields, t);
  return [
    {
      key: 'pages_max_package_size_mb',
@@ -1,6 +1,7 @@
 'use client';

 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
@@ -63,6 +64,7 @@ async function copyText(value: string) {
 }

 export function OpenFlareOpsSettings() {
+  const t = useTranslations('openflareOps');
  const queryClient = useQueryClient();
  const [fields, setFields] = useState<OpenFlareOpsFields>(
    defaultOpenFlareOpsFields,
@@ -113,20 +115,20 @@ export function OpenFlareOpsSettings() {
      await OptionService.updateBatch(entries);
    },
    onSuccess: async () => {
-      toast.success('OpenFlare 运维设置已保存');
+      toast.success(t('saved'));
      await queryClient.invalidateQueries({ queryKey: optionsQueryKey });
      setSavingSection(null);
    },
    onError: (error) => {
      setSavingSection(null);
-      toast.error(error instanceof Error ? error.message : '保存失败');
+      toast.error(error instanceof Error ? error.message : t('saveFailed'));
    },
  });

  const rotateTokenMutation = useMutation({
    mutationFn: () => NodeService.rotateBootstrapToken(),
    onSuccess: async (data) => {
-      toast.success('Discovery Token 已重新生成');
+      toast.success(t('tokenRotated'));
      await queryClient.invalidateQueries({
        queryKey: ['openflare', 'bootstrap-token'],
      });
@@ -139,15 +141,17 @@ export function OpenFlareOpsSettings() {
      }
    },
    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : 'Token 轮换失败');
+      toast.error(
+        error instanceof Error ? error.message : t('tokenRotateFailed'),
+      );
    },
  });

  const syncUptimeKumaMutation = useMutation({
    mutationFn: () => UptimeKumaService.sync(),
-    onSuccess: () => toast.success('Uptime Kuma 同步任务已执行'),
+    onSuccess: () => toast.success(t('kumaSynced')),
    onError: (error) =>
-      toast.error(error instanceof Error ? error.message : '同步失败'),
+      toast.error(error instanceof Error ? error.message : t('syncFailed')),
  });

  const discoveryToken = bootstrapQuery.data?.discovery_token ?? '';
@@ -167,10 +171,10 @@ export function OpenFlareOpsSettings() {
    try {
      saveMutation.mutate({
        section: 'agent',
-        entries: agentOptionEntries(fields),
+        entries: agentOptionEntries(fields, t),
      });
    } catch (error) {
-      toast.error(error instanceof Error ? error.message : '参数校验失败');
+      toast.error(error instanceof Error ? error.message : t('invalidParams'));
    }
  };

@@ -178,10 +182,10 @@ export function OpenFlareOpsSettings() {
    try {
      saveMutation.mutate({
        section: 'uptimekuma',
-        entries: uptimeKumaOptionEntries(fields),
+        entries: uptimeKumaOptionEntries(fields, t),
      });
    } catch (error) {
-      toast.error(error instanceof Error ? error.message : '参数校验失败');
+      toast.error(error instanceof Error ? error.message : t('invalidParams'));
    }
  };

@@ -189,19 +193,16 @@ export function OpenFlareOpsSettings() {
    try {
      saveMutation.mutate({
        section: 'pages',
-        entries: pagesOptionEntries(fields),
+        entries: pagesOptionEntries(fields, t),
      });
    } catch (error) {
-      toast.error(error instanceof Error ? error.message : '参数校验失败');
+      toast.error(error instanceof Error ? error.message : t('invalidParams'));
    }
  };

  if (optionsQuery.isLoading) {
    return (
-      <LoadingStateWithBorder
-        icon={Server}
-        description='加载 OpenFlare 运维设置...'
-      />
+      <LoadingStateWithBorder icon={Server} description={t('loading')} />
    );
  }

@@ -211,7 +212,7 @@ export function OpenFlareOpsSettings() {
        message={
          optionsQuery.error instanceof Error
            ? optionsQuery.error.message
-            : '加载失败'
+            : t('loadFailed')
        }
        onRetry={() => void optionsQuery.refetch()}
      />
@@ -224,10 +225,8 @@ export function OpenFlareOpsSettings() {
        <Card className='border-dashed shadow-none'>
          <CardHeader className='flex flex-row items-center justify-between gap-4'>
            <div>
-              <CardTitle className='text-base'>Agent 运行参数</CardTitle>
-              <CardDescription>
-                心跳间隔与离线阈值会在下个心跳周期同步到节点。
-              </CardDescription>
+              <CardTitle className='text-base'>{t('agent.title')}</CardTitle>
+              <CardDescription>{t('agent.description')}</CardDescription>
            </div>
            <Button
              size='sm'
@@ -239,13 +238,18 @@ export function OpenFlareOpsSettings() {
              ) : (
                <Save className='size-3.5 mr-1' />
              )}
-              保存
+              {t('save')}
            </Button>
          </CardHeader>
          <CardContent className='space-y-4'>
            <div className='grid gap-4 md:grid-cols-2'>
              <FieldInput
-                label={`心跳间隔 (${formatDurationLabel(fields.agent_heartbeat_interval)})`}
+                label={t('agent.heartbeat', {
+                  duration: formatDurationLabel(
+                    fields.agent_heartbeat_interval,
+                    t,
+                  ),
+                })}
                value={fields.agent_heartbeat_interval}
                type='number'
                onChange={(value) =>
@@ -253,7 +257,12 @@ export function OpenFlareOpsSettings() {
                }
              />
              <FieldInput
-                label={`离线阈值 (${formatDurationLabel(fields.node_offline_threshold)})`}
+                label={t('agent.offline', {
+                  duration: formatDurationLabel(
+                    fields.node_offline_threshold,
+                    t,
+                  ),
+                })}
                value={fields.node_offline_threshold}
                type='number'
                onChange={(value) =>
@@ -262,15 +271,15 @@ export function OpenFlareOpsSettings() {
              />
            </div>
            <ToggleRow
-              label='开启 WS 连接升级'
-              description='HTTP 心跳成功后尝试升级为 WebSocket，配置发布可即时通知。'
+              label={t('agent.wsUpgrade')}
+              description={t('agent.wsUpgradeDesc')}
              checked={fields.agent_websocket_upgrade_enabled}
              onChange={(value) =>
                updateField('agent_websocket_upgrade_enabled', value)
              }
            />
            <FieldInput
-              label='Agent 更新仓库'
+              label={t('agent.updateRepo')}
              value={fields.agent_update_repo}
              placeholder='Rain-kl/OpenFlare'
              onChange={(value) => updateField('agent_update_repo', value)}
@@ -281,11 +290,8 @@ export function OpenFlareOpsSettings() {
        <Card className='border-dashed shadow-none'>
          <CardHeader className='flex flex-row items-center justify-between gap-4'>
            <div>
-              <CardTitle className='text-base'>IP 归属解析</CardTitle>
-              <CardDescription>
-                控制节点地图等场景的 GeoIP 来源；访客访问记录归属地固定使用
-                MaxMind mmdb。
-              </CardDescription>
+              <CardTitle className='text-base'>{t('geo.title')}</CardTitle>
+              <CardDescription>{t('geo.description')}</CardDescription>
            </div>
            <Button
              size='sm'
@@ -297,12 +303,12 @@ export function OpenFlareOpsSettings() {
              ) : (
                <Save className='size-3.5 mr-1' />
              )}
-              保存
+              {t('save')}
            </Button>
          </CardHeader>
          <CardContent className='space-y-4'>
            <div className='space-y-1.5'>
-              <Label>归属方式</Label>
+              <Label>{t('geo.mode')}</Label>
              <Select
                value={fields.geoip_provider}
                onValueChange={(value) => updateField('geoip_provider', value)}
@@ -311,7 +317,7 @@ export function OpenFlareOpsSettings() {
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
-                  <SelectItem value='disabled'>关闭</SelectItem>
+                  <SelectItem value='disabled'>{t('geo.disabled')}</SelectItem>
                  <SelectItem value='mmdb'>MaxMind mmdb</SelectItem>
                  <SelectItem value='ip-api'>ip-api.com</SelectItem>
                  <SelectItem value='geojs'>geojs.io</SelectItem>
@@ -321,7 +327,7 @@ export function OpenFlareOpsSettings() {
            </div>
            <div className='flex flex-col gap-3 rounded-lg border border-dashed p-3 sm:flex-row sm:items-end'>
              <FieldInput
-                label='测试 IP'
+                label={t('geo.testIp')}
                value={geoIPTestIP}
                onChange={setGeoIPTestIP}
                placeholder='8.8.8.8'
@@ -332,13 +338,13 @@ export function OpenFlareOpsSettings() {
                disabled={geoIPMutation.isPending}
                onClick={() => geoIPMutation.mutate()}
              >
-                {geoIPMutation.isPending ? '查询中...' : '查询归属'}
+                {geoIPMutation.isPending ? t('geo.querying') : t('geo.query')}
              </Button>
            </div>
            {geoIPMutation.data ? (
              <div className='grid gap-2 text-sm sm:grid-cols-2'>
                <InfoCell
-                  label='国家/地区'
+                  label={t('geo.country')}
                  value={geoIPMutation.data.name || '—'}
                />
                <InfoCell
@@ -354,10 +360,8 @@ export function OpenFlareOpsSettings() {
      <Card className='border-dashed shadow-none'>
        <CardHeader className='flex flex-row items-center justify-between gap-4'>
          <div>
-            <CardTitle className='text-base'>Pages 静态托管</CardTitle>
-            <CardDescription>
-              配置部署包上传体积上限与每个项目的历史部署保留数量。
-            </CardDescription>
+            <CardTitle className='text-base'>{t('pages.title')}</CardTitle>
+            <CardDescription>{t('pages.description')}</CardDescription>
          </div>
          <Button
            size='sm'
@@ -369,13 +373,13 @@ export function OpenFlareOpsSettings() {
            ) : (
              <Save className='size-3.5 mr-1' />
            )}
-            保存
+            {t('save')}
          </Button>
        </CardHeader>
        <CardContent className='space-y-4'>
          <div className='grid gap-4 md:grid-cols-2'>
            <FieldInput
-              label='部署包大小上限 (MiB)'
+              label={t('pages.maxSize')}
              value={fields.pages_max_package_size_mb}
              type='number'
              onChange={(value) =>
@@ -384,7 +388,7 @@ export function OpenFlareOpsSettings() {
              placeholder='100'
            />
            <FieldInput
-              label='历史部署保留数（0 不限制）'
+              label={t('pages.history')}
              value={fields.pages_max_history_count}
              type='number'
              onChange={(value) =>
@@ -394,9 +398,7 @@ export function OpenFlareOpsSettings() {
            />
          </div>
          <p className='text-xs text-muted-foreground'>
-            每个项目最多保留 N
-            条部署：激活部署始终保留，其余按从新到旧填充；超出的非激活部署会在上传成功后自动清理。支持
-            zip、tar.gz、tar.xz、tar.bz2、tar、7z 格式。
+            {t('pages.historyHint')}
          </p>
        </CardContent>
      </Card>
@@ -404,17 +406,16 @@ export function OpenFlareOpsSettings() {
      <Card className='border-dashed shadow-none'>
        <CardHeader className='flex flex-row items-center justify-between gap-4'>
          <div>
-            <CardTitle className='text-base'>Discovery Token 与部署</CardTitle>
-            <CardDescription>
-              新节点首次接入使用 Discovery
-              Token；轮换请前往节点管理或使用下方操作。
-            </CardDescription>
+            <CardTitle className='text-base'>
+              {t('discovery.title')}
+            </CardTitle>
+            <CardDescription>{t('discovery.description')}</CardDescription>
          </div>
          <div className='flex flex-wrap gap-2'>
            <Button variant='outline' size='sm' asChild>
              <Link href='/nodes'>
                <ExternalLink className='size-3.5 mr-1' />
-                节点管理
+                {t('discovery.manageNodes')}
              </Link>
            </Button>
            <Button
@@ -424,7 +425,7 @@ export function OpenFlareOpsSettings() {
              onClick={() => rotateTokenMutation.mutate()}
            >
              <RotateCw className='size-3.5 mr-1' />
-              轮换 Token
+              {t('discovery.rotate')}
            </Button>
          </div>
        </CardHeader>
@@ -437,21 +438,19 @@ export function OpenFlareOpsSettings() {
          />
          <div className='rounded-lg border border-dashed p-3'>
            <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
-              Discovery Token（只读）
+              {t('discovery.tokenReadonly')}
            </p>
            <p className='mt-2 break-all text-sm font-mono'>
              {bootstrapQuery.isLoading
-                ? '加载中...'
-                : discoveryToken || '未生成'}
+                ? t('discovery.loading')
+                : discoveryToken || t('discovery.notGenerated')}
            </p>
          </div>
          <div className='space-y-1.5'>
-            <Label>一键部署命令</Label>
+            <Label>{t('discovery.command')}</Label>
            <Textarea
              readOnly
-              value={
-                discoveryCommand || '请先填写可访问的 Server URL 并获取 Token。'
-              }
+              value={discoveryCommand || t('discovery.commandHint')}
              className='min-h-24 font-mono text-xs'
            />
            {discoveryCommand ? (
@@ -461,12 +460,12 @@ export function OpenFlareOpsSettings() {
                size='sm'
                onClick={() =>
                  void copyText(discoveryCommand).then(() =>
-                    toast.success('命令已复制'),
+                    toast.success(t('discovery.copied')),
                  )
                }
              >
                <Copy className='size-3.5 mr-1' />
-                复制命令
+                {t('discovery.copy')}
              </Button>
            ) : null}
          </div>
@@ -476,10 +475,8 @@ export function OpenFlareOpsSettings() {
      <Card className='border-dashed shadow-none'>
        <CardHeader className='flex flex-row items-center justify-between gap-4'>
          <div>
-            <CardTitle className='text-base'>Uptime Kuma 集成</CardTitle>
-            <CardDescription>
-              将反代站点差分同步至 Uptime Kuma 监控实例。
-            </CardDescription>
+            <CardTitle className='text-base'>{t('kuma.title')}</CardTitle>
+            <CardDescription>{t('kuma.description')}</CardDescription>
          </div>
          <div className='flex flex-wrap gap-2'>
            <Button
@@ -491,20 +488,20 @@ export function OpenFlareOpsSettings() {
              onClick={() => syncUptimeKumaMutation.mutate()}
            >
              <RefreshCw className='size-3.5 mr-1' />
-              立即同步
+              {t('kuma.syncNow')}
            </Button>
            <Button
              size='sm'
              disabled={savingSection === 'uptimekuma'}
              onClick={saveUptimeKumaSettings}
            >
-              保存
+              {t('save')}
            </Button>
          </div>
        </CardHeader>
        <CardContent className='space-y-4'>
          <ToggleRow
-            label='开启 Uptime Kuma'
+            label={t('kuma.enable')}
            checked={fields.uptime_kuma_enabled}
            onChange={(value) => updateField('uptime_kuma_enabled', value)}
          />
@@ -512,29 +509,29 @@ export function OpenFlareOpsSettings() {
            <>
              <div className='grid gap-4 md:grid-cols-2'>
                <FieldInput
-                  label='Uptime Kuma 地址'
+                  label={t('kuma.url')}
                  value={fields.uptime_kuma_url}
                  onChange={(value) => updateField('uptime_kuma_url', value)}
                  placeholder='http://localhost:3001'
                />
                <FieldInput
-                  label='用户名'
+                  label={t('kuma.username')}
                  value={fields.uptime_kuma_username}
                  onChange={(value) =>
                    updateField('uptime_kuma_username', value)
                  }
                />
                <FieldInput
-                  label='密码'
+                  label={t('kuma.password')}
                  value={fields.uptime_kuma_password}
                  type='password'
                  onChange={(value) =>
                    updateField('uptime_kuma_password', value)
                  }
-                  placeholder='留空表示不更新'
+                  placeholder={t('kuma.passwordKeep')}
                />
                <FieldInput
-                  label='同步间隔 (分钟)'
+                  label={t('kuma.syncInterval')}
                  value={fields.uptime_kuma_sync_interval}
                  type='number'
                  onChange={(value) =>
@@ -542,7 +539,7 @@ export function OpenFlareOpsSettings() {
                  }
                />
                <div className='space-y-1.5'>
-                  <Label>监控范围</Label>
+                  <Label>{t('kuma.scope')}</Label>
                  <Select
                    value={fields.uptime_kuma_monitor_scope}
                    onValueChange={(value) =>
@@ -553,8 +550,10 @@ export function OpenFlareOpsSettings() {
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
-                      <SelectItem value='all'>全部站点</SelectItem>
-                      <SelectItem value='selected'>选择站点</SelectItem>
+                      <SelectItem value='all'>{t('kuma.allSites')}</SelectItem>
+                      <SelectItem value='selected'>
+                        {t('kuma.selectedSites')}
+                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>
@@ -562,26 +561,28 @@ export function OpenFlareOpsSettings() {
              {fields.uptime_kuma_monitor_scope === 'selected' ? (
                <div className='rounded-lg border border-dashed p-3'>
                  <div className='flex items-center justify-between gap-2'>
-                    <p className='text-sm font-medium'>已选站点</p>
+                    <p className='text-sm font-medium'>
+                      {t('kuma.selectedLabel')}
+                    </p>
                    <Button
                      type='button'
                      variant='outline'
                      size='sm'
                      onClick={() => setUptimeKumaModalOpen(true)}
                    >
-                      选择监控站点
+                      {t('kuma.pickSites')}
                    </Button>
                  </div>
                  <p className='mt-2 break-all text-xs text-muted-foreground'>
                    {fields.uptime_kuma_selected_sites
                      ? fields.uptime_kuma_selected_sites.split(',').join(', ')
-                      : '未选择任何站点'}
+                      : t('kuma.noneSelected')}
                  </p>
                </div>
              ) : null}
              <div className='grid gap-4 md:grid-cols-2'>
                <FieldInput
-                  label='检测频率 (秒)'
+                  label={t('kuma.interval')}
                  value={fields.uptime_kuma_interval}
                  type='number'
                  onChange={(value) =>
@@ -589,13 +590,13 @@ export function OpenFlareOpsSettings() {
                  }
                />
                <FieldInput
-                  label='重试次数'
+                  label={t('kuma.retry')}
                  value={fields.uptime_kuma_retry}
                  type='number'
                  onChange={(value) => updateField('uptime_kuma_retry', value)}
                />
                <FieldInput
-                  label='重试间隔 (秒)'
+                  label={t('kuma.retryInterval')}
                  value={fields.uptime_kuma_retry_interval}
                  type='number'
                  onChange={(value) =>
@@ -603,7 +604,7 @@ export function OpenFlareOpsSettings() {
                  }
                />
                <FieldInput
-                  label='请求超时 (秒)'
+                  label={t('kuma.timeout')}
                  value={fields.uptime_kuma_timeout}
                  type='number'
                  onChange={(value) =>
@@ -1,6 +1,7 @@
 'use client';

 import * as React from 'react';
+import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import {
@@ -45,6 +46,7 @@ const formatNumber = (num: number | string) => {
 * 运行时系统状态展示与管理组件
 */
 export function SystemStatusManager() {
+  const t = useTranslations('openflareOps.status');
  const [status, setStatus] = useState<SystemStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [wavelet, setWavelet] = useState(false);
@@ -82,14 +84,14 @@ export function SystemStatusManager() {
      setStatus(data);
      prevStatusRef.current = data;
    } catch (err) {
-      toast.error('获取系统状态失败', {
-        description: err instanceof Error ? err.message : '请求时发生未知错误',
+      toast.error(t('loadFailed'), {
+        description: err instanceof Error ? err.message : t('unknownError'),
      });
    } finally {
      setLoading(false);
      setWavelet(false);
    }
-  }, []);
+  }, [t]);

  // 轮询逻辑
  useEffect(() => {
@@ -196,7 +198,9 @@ export function SystemStatusManager() {
        <div className='flex items-center gap-2'>
          <Activity className='size-5 text-primary' />
          <div>
-            <h1 className='text-2xl font-semibold tracking-tight'>系统状态</h1>
+            <h1 className='text-2xl font-semibold tracking-tight'>
+              {t('title')}
+            </h1>
          </div>
        </div>

@@ -211,7 +215,7 @@ export function SystemStatusManager() {
              htmlFor='auto-refresh'
              className='text-xs font-medium cursor-pointer select-none'
            >
-              自动刷新
+              {t('autoRefresh')}
            </label>
          </div>

@@ -237,7 +241,7 @@ export function SystemStatusManager() {
            disabled={wavelet}
          >
            <RefreshCw className={`size-3 ${wavelet ? 'animate-spin' : ''}`} />
-            刷新
+            {t('refresh')}
          </Button>
        </div>
      </div>
@@ -251,10 +255,10 @@ export function SystemStatusManager() {
              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
                <div className='space-y-0.5'>
                  <CardTitle className='text-sm font-semibold'>
-                    服务概览
+                    {t('overview')}
                  </CardTitle>
                  <CardDescription className='text-[10px]'>
-                    服务的基础生命指标
+                    {t('overviewDesc')}
                  </CardDescription>
                </div>
                <Badge
@@ -266,17 +270,17 @@ export function SystemStatusManager() {
              </CardHeader>
              <CardContent className='space-y-1'>
                <RenderMetricRow
-                  label='服务运行时间'
+                  label={t('uptime')}
                  value={status.uptime}
                  field='uptime'
                />
                <RenderMetricRow
-                  label='当前 Goroutines 数量'
+                  label={t('goroutines')}
                  value={status.num_goroutine}
                  field='num_goroutine'
                />
                <RenderMetricRow
-                  label='Heap 对象数量'
+                  label={t('heapObjects')}
                  value={status.heap_objects}
                  field='heap_objects'
                />
@@ -288,10 +292,10 @@ export function SystemStatusManager() {
              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
                <div className='space-y-0.5'>
                  <CardTitle className='text-sm font-semibold'>
-                    内存统计
+                    {t('memory')}
                  </CardTitle>
                  <CardDescription className='text-[10px]'>
-                    主内存消耗概览
+                    {t('memoryDesc')}
                  </CardDescription>
                </div>
                <Badge
@@ -304,22 +308,22 @@ export function SystemStatusManager() {
              <CardContent className='space-y-3'>
                <div className='space-y-1'>
                  <RenderMetricRow
-                    label='当前内存使用量'
+                    label={t('alloc')}
                    value={status.alloc}
                    field='alloc'
                  />
                  <RenderMetricRow
-                    label='所有已分配的内存'
+                    label={t('totalAlloc')}
                    value={status.total_alloc}
                    field='total_alloc'
                  />
                  <RenderMetricRow
-                    label='内存占用量'
+                    label={t('sys')}
                    value={status.sys}
                    field='sys'
                  />
                  <RenderMetricRow
-                    label='下次 GC 内存回收量'
+                    label={t('nextGc')}
                    value={status.next_gc}
                    field='next_gc'
                  />
@@ -327,7 +331,7 @@ export function SystemStatusManager() {
                {/* 物理内存水位比例 */}
                <div className='space-y-1 px-1 pt-1'>
                  <div className='flex justify-between text-[10px] text-muted-foreground'>
-                    <span>当前使用率 (Alloc / Sys)</span>
+                    <span>{t('usageRatio')}</span>
                    <span className='font-mono'>
                      {getMemoryUsagePercent()}%
                    </span>
@@ -342,10 +346,10 @@ export function SystemStatusManager() {
              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
                <div className='space-y-0.5'>
                  <CardTitle className='text-sm font-semibold'>
-                    堆/栈详情
+                    {t('heapStack')}
                  </CardTitle>
                  <CardDescription className='text-[10px]'>
-                    运行时堆栈内存空间细节
+                    {t('heapStackDesc')}
                  </CardDescription>
                </div>
                <Badge
@@ -357,37 +361,37 @@ export function SystemStatusManager() {
              </CardHeader>
              <CardContent className='space-y-1'>
                <RenderMetricRow
-                  label='当前 Heap 内存使用量'
+                  label={t('heapAlloc')}
                  value={status.heap_alloc}
                  field='heap_alloc'
                />
                <RenderMetricRow
-                  label='Heap 内存占用量'
+                  label={t('heapSys')}
                  value={status.heap_sys}
                  field='heap_sys'
                />
                <RenderMetricRow
-                  label='Heap 内存空闲量'
+                  label={t('heapIdle')}
                  value={status.heap_idle}
                  field='heap_idle'
                />
                <RenderMetricRow
-                  label='正在使用的 Heap 内存'
+                  label={t('heapInuse')}
                  value={status.heap_inuse}
                  field='heap_inuse'
                />
                <RenderMetricRow
-                  label='已释放的 Heap 内存'
+                  label={t('heapReleased')}
                  value={status.heap_released}
                  field='heap_released'
                />
                <RenderMetricRow
-                  label='启动 Stack 使用量'
+                  label={t('stackInuse')}
                  value={status.stack_inuse}
                  field='stack_inuse'
                />
                <RenderMetricRow
-                  label='已分配的 Stack 内存'
+                  label={t('stackSys')}
                  value={status.stack_sys}
                  field='stack_sys'
                />
@@ -399,10 +403,10 @@ export function SystemStatusManager() {
              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
                <div className='space-y-0.5'>
                  <CardTitle className='text-sm font-semibold'>
-                    底层及结构体内存
+                    {t('structs')}
                  </CardTitle>
                  <CardDescription className='text-[10px]'>
-                    运行时底层管理结构体开销
+                    {t('structsDesc')}
                  </CardDescription>
                </div>
                <Badge
@@ -414,37 +418,37 @@ export function SystemStatusManager() {
              </CardHeader>
              <CardContent className='space-y-1'>
                <RenderMetricRow
-                  label='MSpan 结构内存使用量'
+                  label={t('mspanInuse')}
                  value={status.mspan_inuse}
                  field='mspan_inuse'
                />
                <RenderMetricRow
-                  label='已分配的 MSpan 结构内存'
+                  label={t('mspanSys')}
                  value={status.mspan_sys}
                  field='mspan_sys'
                />
                <RenderMetricRow
-                  label='MCache 结构内存使用量'
+                  label={t('mcacheInuse')}
                  value={status.mcache_inuse}
                  field='mcache_inuse'
                />
                <RenderMetricRow
-                  label='已分配的 MCache 结构内存'
+                  label={t('mcacheSys')}
                  value={status.mcache_sys}
                  field='mcache_sys'
                />
                <RenderMetricRow
-                  label='已分配的剖析哈希表内存'
+                  label={t('buckHashSys')}
                  value={status.buck_hash_sys}
                  field='buck_hash_sys'
                />
                <RenderMetricRow
-                  label='已分配的 GC 元数据内存'
+                  label={t('gcSys')}
                  value={status.gc_sys}
                  field='gc_sys'
                />
                <RenderMetricRow
-                  label='其它已分配的系统内存'
+                  label={t('otherSys')}
                  value={status.other_sys}
                  field='other_sys'
                />
@@ -456,10 +460,10 @@ export function SystemStatusManager() {
              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
                <div className='space-y-0.5'>
                  <CardTitle className='text-sm font-semibold'>
-                    垃圾回收与分配计数
+                    {t('gc')}
                  </CardTitle>
                  <CardDescription className='text-[10px]'>
-                    GC 历史数据与分配频次
+                    {t('gcDesc')}
                  </CardDescription>
                </div>
                <Badge
@@ -473,39 +477,39 @@ export function SystemStatusManager() {
                <div className='grid grid-cols-1 sm:grid-cols-2 gap-x-6'>
                  <div>
                    <RenderMetricRow
-                      label='GC 执行次数'
+                      label={t('numGc')}
                      value={status.num_gc}
                      field='num_gc'
                    />
                    <RenderMetricRow
-                      label='距离上次 GC 时间'
+                      label={t('lastGc')}
                      value={status.last_gc_time}
                      field='last_gc_time'
                    />
                    <RenderMetricRow
-                      label='GC 暂停时间总量'
+                      label={t('pauseTotal')}
                      value={status.pause_total_ns}
                      field='pause_total_ns'
                    />
                    <RenderMetricRow
-                      label='上次 GC 暂停时间'
+                      label={t('lastPause')}
                      value={status.last_pause}
                      field='last_pause'
                    />
                  </div>
                  <div>
                    <RenderMetricRow
-                      label='内存分配次数'
+                      label={t('mallocs')}
                      value={status.mallocs}
                      field='mallocs'
                    />
                    <RenderMetricRow
-                      label='内存释放次数'
+                      label={t('frees')}
                      value={status.frees}
                      field='frees'
                    />
                    <RenderMetricRow
-                      label='指针查找次数'
+                      label={t('lookups')}
                      value={status.lookups}
                      field='lookups'
                    />
@@ -1,5 +1,6 @@
 'use client';

+import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';

@@ -29,6 +30,8 @@ export function UptimeKumaSiteSelectModal({
  onOpenChange,
  onSave,
 }: UptimeKumaSiteSelectModalProps) {
+  const t = useTranslations('openflareOps.siteModal');
+  const tCommon = useTranslations('common');
  const [searchTerm, setSearchTerm] = useState('');
  const [tempSelected, setTempSelected] = useState<Set<string>>(new Set());

@@ -90,19 +93,17 @@ export function UptimeKumaSiteSelectModal({
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className='max-w-2xl'>
        <DialogHeader>
-          <DialogTitle>选择监控站点</DialogTitle>
-          <DialogDescription>
-            选择要同步到 Uptime Kuma 的反代站点，支持按站点名称和域名搜索。
-          </DialogDescription>
+          <DialogTitle>{t('title')}</DialogTitle>
+          <DialogDescription>{t('description')}</DialogDescription>
        </DialogHeader>

        <div className='space-y-4'>
          <div className='space-y-1.5'>
-            <Label>搜索站点</Label>
+            <Label>{t('search')}</Label>
            <Input
              value={searchTerm}
              onChange={(event) => setSearchTerm(event.target.value)}
-              placeholder='按名称或域名搜索...'
+              placeholder={t('searchPlaceholder')}
            />
          </div>

@@ -113,7 +114,7 @@ export function UptimeKumaSiteSelectModal({
              size='sm'
              onClick={handleSelectAll}
            >
-              全选过滤项
+              {t('selectFiltered')}
            </Button>
            <Button
              type='button'
@@ -121,30 +122,32 @@ export function UptimeKumaSiteSelectModal({
              size='sm'
              onClick={handleDeselectAll}
            >
-              清空过滤项
+              {t('clearFiltered')}
            </Button>
          </div>

          <div className='max-h-72 overflow-y-auto rounded-lg border'>
            {routesQuery.isLoading ? (
              <p className='p-4 text-sm text-muted-foreground'>
-                加载站点列表...
+                {t('loading')}
              </p>
            ) : routesQuery.isError ? (
              <p className='p-4 text-sm text-destructive'>
                {routesQuery.error instanceof Error
                  ? routesQuery.error.message
-                  : '加载站点失败'}
+                  : t('loadFailed')}
              </p>
            ) : filteredRoutes.length === 0 ? (
-              <p className='p-4 text-sm text-muted-foreground'>无匹配的站点</p>
+              <p className='p-4 text-sm text-muted-foreground'>
+                {t('noMatch')}
+              </p>
            ) : (
              <table className='w-full text-left text-sm'>
                <thead className='sticky top-0 bg-muted/60 text-xs uppercase text-muted-foreground'>
                  <tr>
-                    <th className='w-12 px-3 py-2'>选择</th>
-                    <th className='px-3 py-2'>站点名称</th>
-                    <th className='px-3 py-2'>主域名</th>
+                    <th className='w-12 px-3 py-2'>{t('select')}</th>
+                    <th className='px-3 py-2'>{t('siteName')}</th>
+                    <th className='px-3 py-2'>{t('primaryDomain')}</th>
                  </tr>
                </thead>
                <tbody className='divide-y'>
@@ -184,7 +187,7 @@ export function UptimeKumaSiteSelectModal({
          </div>

          <p className='text-right text-xs text-muted-foreground'>
-            已选择 {tempSelected.size} 个监控站点
+            {t('selectedCount', { count: tempSelected.size })}
          </p>
        </div>

@@ -194,7 +197,7 @@ export function UptimeKumaSiteSelectModal({
            variant='outline'
            onClick={() => onOpenChange(false)}
          >
-            取消
+            {tCommon('cancel')}
          </Button>
          <Button
            type='button'
@@ -203,7 +206,7 @@ export function UptimeKumaSiteSelectModal({
              onOpenChange(false);
            }}
          >
-            保存选择
+            {t('save')}
          </Button>
        </DialogFooter>
      </DialogContent>