refactor: 优化 i18n 类型安全与渲染性能

- 导出 TranslationKey 类型，翻译 key 拼写错误编译期即报错 - zh.ts 使用 TranslationKey 约束，确保中英文 key 同步 - useMemo 包装 context value，避免不必要的全局重渲染 - ConfirmDialog confirmText 默认值改用 t() 而非硬编码英文 - SchemaProperties 递归组件改为 prop 传递 t，减少 useContext 调用 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-03 13:26:57 +08:00
parent 67295c22d1
commit 9b41878ae7
7 changed files with 40 additions and 32 deletions
--- a/packages/web/src/components/ConfirmDialog.tsx
+++ b/packages/web/src/components/ConfirmDialog.tsx
@@ -11,7 +11,7 @@ type ConfirmDialogProps = {
  variant?: 'danger' | 'warning';
 };

-export default function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmText = 'Confirm', variant = 'danger' }: ConfirmDialogProps) {
+export default function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmText, variant = 'danger' }: ConfirmDialogProps) {
  const { t } = useI18n();
  const iconColor = variant === 'danger' ? 'text-danger bg-danger-muted' : 'text-warning bg-warning-muted';

@@ -35,7 +35,7 @@ export default function ConfirmDialog({ open, onConfirm, onCancel, title, descri
            onClick={onConfirm}
            className={variant === 'danger' ? 'btn-danger' : 'btn-primary'}
          >
-            {confirmText}
+            {confirmText ?? t('common.confirm')}
          </button>
        </div>
      </div>
--- a/packages/web/src/components/SchemaView.tsx
+++ b/packages/web/src/components/SchemaView.tsx
@@ -3,7 +3,7 @@
 * Replaces raw JSON.stringify output with readable tables and schema trees.
 */

-import { useI18n } from '../lib/i18n';
+import { useI18n, type TFunction } from '../lib/i18n';

 /* ===== Helpers ===== */

@@ -159,8 +159,7 @@ export function ParametersView({ parameters }: { parameters: unknown }) {

 /* ===== Schema Properties Tree ===== */

-function SchemaProperties({ schema, depth = 0 }: { schema: SchemaObj; depth?: number }) {
-  const { t } = useI18n();
+function SchemaProperties({ schema, depth = 0, t }: { schema: SchemaObj; depth?: number; t: TFunction }) {
  const properties = schema.properties;
  const requiredSet = new Set(schema.required || []);

@@ -217,8 +216,8 @@ function SchemaProperties({ schema, depth = 0 }: { schema: SchemaObj; depth?: nu
                {t('dashboard.schema.default')} <code className="font-mono">{JSON.stringify(prop.default)}</code>
              </div>
            )}
-            {hasChildren && <SchemaProperties schema={prop} depth={depth + 1} />}
-            {isArray && prop.items && <SchemaProperties schema={prop.items} depth={depth + 1} />}
+            {hasChildren && <SchemaProperties schema={prop} depth={depth + 1} t={t} />}
+            {isArray && prop.items && <SchemaProperties schema={prop.items} depth={depth + 1} t={t} />}
          </div>
        );
      })}
@@ -247,7 +246,7 @@ export function RequestBodyView({ requestBody }: { requestBody: unknown }) {
          {body.required && <span className="text-danger ml-2 normal-case tracking-normal text-[11px]">{t('dashboard.schema.required')}</span>}
        </p>
        <div className="border border-border-default rounded-lg p-3">
-          <SchemaProperties schema={body.schema} />
+          <SchemaProperties schema={body.schema} t={t} />
        </div>
      </div>
    );
@@ -274,7 +273,7 @@ export function RequestBodyView({ requestBody }: { requestBody: unknown }) {
          <div className="p-3">
            {media.schema ? (
              media.schema.properties ? (
-                <SchemaProperties schema={media.schema} />
+                <SchemaProperties schema={media.schema} t={t} />
              ) : (
                <div className="flex items-center gap-2 text-[13px]">
                  <TypeBadge type={resolveType(media.schema)} />
@@ -351,13 +350,13 @@ export function ResponsesView({ responses }: { responses: unknown }) {
              {schema && (schema.properties || schema.items?.properties || schema.type) && (
                <div className="p-3">
                  {schema.properties ? (
-                    <SchemaProperties schema={schema} />
+                    <SchemaProperties schema={schema} t={t} />
                  ) : schema.type === 'array' && schema.items?.properties ? (
                    <div>
                      <div className="text-[11px] text-text-muted mb-1">
                        <TypeBadge type="array" /> {t('dashboard.schema.ofObjects')}
                      </div>
-                      <SchemaProperties schema={schema.items} />
+                      <SchemaProperties schema={schema.items} t={t} />
                    </div>
                  ) : (
                    <div className="flex items-center gap-2 text-[13px]">
--- a/packages/web/src/components/ThemeToggle.tsx
+++ b/packages/web/src/components/ThemeToggle.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from '../lib/theme';
-import { useI18n } from '../lib/i18n';
+import { useI18n, type TranslationKey } from '../lib/i18n';

 const icons = {
  light: (
@@ -31,7 +31,7 @@ export default function ThemeToggle() {
        <button
          key={key}
          onClick={() => setTheme(key)}
-          title={t(`theme.${key}`)}
+          title={t(`theme.${key}` as TranslationKey)}
          className={`flex items-center justify-center w-8 h-7 rounded-md transition-all duration-150 ${
            theme === key
              ? 'bg-bg-elevated text-text-primary shadow-sm'
--- a/packages/web/src/lib/i18n.tsx
+++ b/packages/web/src/lib/i18n.tsx
@@ -1,18 +1,23 @@
-import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react';
 import en from './i18n/en';
 import zh from './i18n/zh';

 export type Locale = 'en' | 'zh';
+export type TranslationKey = keyof typeof en;

-type Translations = Record<string, string>;
-type AllTranslations = Record<Locale, Translations>;
+type AllTranslations = Record<Locale, Record<TranslationKey, string>>;

 const translations: AllTranslations = { en, zh };

+/** Use `tk()` to cast dynamic key strings (e.g. template literals) to TranslationKey */
+export const tk = (key: string) => key as TranslationKey;
+
+export type TFunction = (key: TranslationKey, params?: Record<string, string | number>) => string;
+
 type I18nContextType = {
  locale: Locale;
  setLocale: (l: Locale) => void;
-  t: (key: string, params?: Record<string, string | number>) => string;
+  t: TFunction;
 };

 const I18nContext = createContext<I18nContextType | null>(null);
@@ -31,7 +36,7 @@ export function I18nProvider({ children }: { children: ReactNode }) {
    localStorage.setItem('agent-fox-locale', l);
  }, []);

-  const t = useCallback((key: string, params?: Record<string, string | number>): string => {
+  const t = useCallback((key: TranslationKey, params?: Record<string, string | number>): string => {
    let text = translations[locale][key] ?? key;
    if (params) {
      Object.entries(params).forEach(([k, v]) => {
@@ -41,8 +46,10 @@ export function I18nProvider({ children }: { children: ReactNode }) {
    return text;
  }, [locale]);

+  const value = useMemo(() => ({ locale, setLocale, t }), [locale, setLocale, t]);
+
  return (
-    <I18nContext.Provider value={{ locale, setLocale, t }}>
+    <I18nContext.Provider value={value}>
      {children}
    </I18nContext.Provider>
  );
--- a/packages/web/src/lib/i18n/en.ts
+++ b/packages/web/src/lib/i18n/en.ts
@@ -1,4 +1,4 @@
-const en: Record<string, string> = {
+const en = {
  // ===== Landing Page =====

  // Nav
--- a/packages/web/src/lib/i18n/zh.ts
+++ b/packages/web/src/lib/i18n/zh.ts
@@ -1,4 +1,6 @@
-const zh: Record<string, string> = {
+import type { TranslationKey } from '../i18n';
+
+const zh: Record<TranslationKey, string> = {
  // ===== Landing Page =====

  // Nav
--- a/packages/web/src/pages/landing/PricingSection.tsx
+++ b/packages/web/src/pages/landing/PricingSection.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useI18n } from '../../lib/i18n';
+import { useI18n, tk } from '../../lib/i18n';
 import { useScrollReveal } from '../../hooks/useScrollReveal';

 type PlanKey = 'free' | 'pro' | 'enterprise';
@@ -48,30 +48,30 @@ export default function PricingSection() {
              }}
            >
              {/* Popular badge */}
-              {featured && t(`pricing.${key}.badge`) && (
+              {featured && t(tk(`pricing.${key}.badge`)) && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 rounded-full text-[11px] font-semibold text-white"
                  style={{ background: 'linear-gradient(135deg, var(--fox-amber), var(--fox-orange))' }}>
-                  {t(`pricing.${key}.badge`)}
+                  {t(tk(`pricing.${key}.badge`))}
                </div>
              )}

              {/* Plan name + price */}
              <div className="mb-5">
                <h3 className="text-base font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
-                  {t(`pricing.${key}.name`)}
+                  {t(tk(`pricing.${key}.name`))}
                </h3>
                <div className="flex items-baseline gap-1">
                  <span className="text-4xl font-bold tracking-tight" style={{ fontFamily: 'var(--font-heading)', color: 'var(--text-primary)' }}>
-                    {t(`pricing.${key}.price`)}
+                    {t(tk(`pricing.${key}.price`))}
                  </span>
-                  {t(`pricing.${key}.period`) && (
+                  {t(tk(`pricing.${key}.period`)) && (
                    <span className="text-sm" style={{ color: 'var(--text-muted)' }}>
-                      {t(`pricing.${key}.period`)}
+                      {t(tk(`pricing.${key}.period`))}
                    </span>
                  )}
                </div>
                <p className="text-sm mt-2" style={{ color: 'var(--text-secondary)' }}>
-                  {t(`pricing.${key}.desc`)}
+                  {t(tk(`pricing.${key}.desc`))}
                </p>
              </div>

@@ -82,7 +82,7 @@ export default function PricingSection() {
                    <svg className="w-4 h-4 shrink-0" style={{ color: 'var(--fox-amber)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                      <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
-                    {t(`pricing.${key}.f${j + 1}`)}
+                    {t(tk(`pricing.${key}.f${j + 1}`))}
                  </li>
                ))}
              </ul>
@@ -93,7 +93,7 @@ export default function PricingSection() {
                  className={`block w-full text-center py-2.5 rounded-xl text-sm font-medium transition-all duration-200 hover:-translate-y-0.5 cursor-pointer`}
                  style={{ background: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border-default)' }}
                >
-                  {t(`pricing.${key}.cta`)}
+                  {t(tk(`pricing.${key}.cta`))}
                </button>
              ) : (
                <Link
@@ -106,7 +106,7 @@ export default function PricingSection() {
                    : { background: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border-default)' }
                  }
                >
-                  {t(`pricing.${key}.cta`)}
+                  {t(tk(`pricing.${key}.cta`))}
                </Link>
              )}
            </div>