feat(i18n): cloud 模块全量国际化迁移 — 4 组件 + 90 新增翻译键

迁移组件: - RegionManager.tsx — providerNames→getProviderNames(t) 函数模式, 全量 t() 替换 - CloudAccountManager.tsx — providerLabels→getProviderLabels(t), 卡片/弹框/表单全量迁移 - CloudBilling.tsx — 概览/记录/预警三 Tab 全量迁移, TrendChart/StatStrip 标签国际化 - DomainManager.tsx — 域名卡片/状态徽章/创建编辑弹框全量迁移翻译键: cloud 命名空间 145→235 键 (+90), common 新增 deleteFailed/deleteSuccess 验证: tsc -b=0, npm build✅ (21.21s), 17/17 集成测试通过, 0 缺失键, 0 残留 UI 中文
2026-07-02 12:50:05 +08:00
1 parent 63e4c220d4
commit 8cbe3aadec
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -39,13 +40,15 @@ import { PageEmpty } from '@/components/layout/PageEmpty';
 import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';

-const providerNames: Record<string, string> = {
-  aws: 'AWS',
-  aliyun: '阿里云',
-  tencent: '腾讯云',
-  huawei: '华为云',
-  azure: 'Azure',
-};
+function getProviderNames(t: (key: string) => string): Record<string, string> {
+  return {
+    aws: 'AWS',
+    aliyun: t('cloud.aliyun'),
+    tencent: t('cloud.tencent'),
+    huawei: t('cloud.huawei'),
+    azure: 'Azure',
+  };
+}

 const providerColors: Record<string, string> = {
  aws: 'dg-text-orange',
@@ -56,6 +59,7 @@ const providerColors: Record<string, string> = {
 };

 export function RegionManager() {
+  const { t } = useTranslation();
  const confirm = useConfirm();
  const [regions, setRegions] = useState<JsonData[]>([]);
  const [loading, setLoading] = useState(true);
@@ -69,6 +73,8 @@ export function RegionManager() {
    status: 'active', endpoint: '',
  });

+  const providerNames = getProviderNames(t);
+
  const loadData = useCallback(async () => {
    setLoading(true);
    try {
@@ -126,20 +132,20 @@ export function RegionManager() {
  const handleDelete = async (id: number) => {
    const region = regions.find(r => r.id === id);
    const ok = await confirm({
-      title: '删除区域',
-      description: `确定删除「${region?.name || id}」吗？此操作不可撤销。`,
-      confirmText: '删除',
+      title: t('cloud.deleteRegion'),
+      description: t('cloud.deleteRegionConfirm', { name: region?.name || id }),
+      confirmText: t('common.delete'),
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await regionApi.delete(id);
-      toast.success('区域已删除');
+      toast.success(t('cloud.regionDeleted'));
      setSelectedIds(prev => prev.filter(i => i !== id));
      loadData();
    } catch (e) {
-      console.error('删除区域失败:', e);
-      toast.error('删除失败');
+      console.error(t('cloud.deleteRegion'), e);
+      toast.error(t('common.deleteFailed'));
    }
  };

@@ -147,43 +153,43 @@ export function RegionManager() {
  const handleBatchDelete = async () => {
    if (selectedIds.length === 0) return;
    const ok = await confirm({
-      title: '批量删除区域',
-      description: `确定删除选中的 ${selectedIds.length} 个区域吗？此操作不可撤销。`,
-      confirmText: '批量删除',
+      title: t('cloud.batchDeleteRegion'),
+      description: t('cloud.batchDeleteRegionConfirm', { count: selectedIds.length }),
+      confirmText: t('cloud.batchDelete'),
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await regionApi.batchDelete(selectedIds.map(Number));
-      toast.success(`已删除 ${selectedIds.length} 个区域`);
+      toast.success(t('cloud.batchDeletedRegions', { count: selectedIds.length }));
      setSelectedIds([]);
      loadData();
    } catch (e) {
-      console.error('批量删除失败:', e);
-      toast.error('批量删除失败');
+      console.error(t('cloud.batchDeleteFailed'), e);
+      toast.error(t('cloud.batchDeleteFailed'));
    }
  };

  // DataTable 列定义
  const columns: DataTableColumn<JsonData>[] = [
-    { key: 'name', header: '区域名称', sortable: true, render: (r) => <span className="font-medium text-[var(--dg-text-primary)]">{r.name}</span> },
-    { key: 'code', header: '编码', sortable: true, render: (r) => <span className="font-mono text-sm text-[var(--dg-text-secondary)]">{r.code}</span> },
+    { key: 'name', header: t('cloud.regionName'), sortable: true, render: (r) => <span className="font-medium text-[var(--dg-text-primary)]">{r.name}</span> },
+    { key: 'code', header: t('cloud.code'), sortable: true, render: (r) => <span className="font-mono text-sm text-[var(--dg-text-secondary)]">{r.code}</span> },
    {
-      key: 'provider', header: '云商', sortable: true, hideable: false,
+      key: 'provider', header: t('cloud.vendor'), sortable: true, hideable: false,
      render: (r) => <span className={providerColors[r.provider] || 'text-[var(--dg-text-secondary)]'}>{providerNames[r.provider] || r.provider}</span>,
    },
-    { key: 'location', header: '位置', render: (r) => r.location || '—' },
-    { key: 'endpoint', header: '接入端点', render: (r) => <span className="max-w-[200px] truncate block font-mono text-xs text-[var(--dg-text-secondary)]" title={r.endpoint}>{r.endpoint || '—'}</span> },
+    { key: 'location', header: t('cloud.location'), render: (r) => r.location || '—' },
+    { key: 'endpoint', header: t('cloud.regionEndpoint'), render: (r) => <span className="max-w-[200px] truncate block font-mono text-xs text-[var(--dg-text-secondary)]" title={r.endpoint}>{r.endpoint || '—'}</span> },
    {
-      key: 'status', header: '状态', sortable: true,
+      key: 'status', header: t('cloud.regionStatus'), sortable: true,
      render: (r) => r.status === 'active' ? (
-        <Badge className="dg-status-running gap-1 border-0"><CheckCircle2 className="h-3 w-3" /> 启用</Badge>
+        <Badge className="dg-status-running gap-1 border-0"><CheckCircle2 className="h-3 w-3" /> {t('cloud.enabled')}</Badge>
      ) : (
-        <Badge className="dg-status-stopped gap-1 border-0"><XCircle className="h-3 w-3" /> 禁用</Badge>
+        <Badge className="dg-status-stopped gap-1 border-0"><XCircle className="h-3 w-3" /> {t('cloud.disabled')}</Badge>
      ),
    },
    {
-      key: 'actions', header: '操作', align: 'right', hideable: false,
+      key: 'actions', header: t('common.actions'), align: 'right', hideable: false,
      render: (r) => (
        <div className="flex justify-end gap-1">
          <button onClick={() => openEdit(r)} className="p-1.5 rounded hover:bg-[var(--dg-bg-active)] text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]">
@@ -209,7 +215,7 @@ export function RegionManager() {
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
-        <SelectItem value="all">全部云商</SelectItem>
+        <SelectItem value="all">{t('cloud.allVendors')}</SelectItem>
        {Object.entries(providerNames).map(([k, v]) => (
          <SelectItem key={k} value={k}>{v}</SelectItem>
        ))}
@@ -220,14 +226,14 @@ export function RegionManager() {
  const batchToolbar = selectedIds.length > 0 ? (
    <div className="flex items-center gap-2">
      <span className="text-sm dg-text-secondary">
-        已选择 <span className="font-semibold text-[var(--text-primary)]">{selectedIds.length}</span> 个区域
+        {t('cloud.selectedRegionCount', { count: selectedIds.length })}
      </span>
      <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="dg-text-muted">
-        取消选择
+        {t('cloud.clearSelection')}
      </Button>
      <Button variant="outline" size="sm" className="dg-btn-danger" onClick={handleBatchDelete}>
        <Trash2 className="h-4 w-4 mr-1" />
-        批量删除
+        {t('cloud.batchDelete')}
      </Button>
    </div>
  ) : undefined;
@@ -235,16 +241,16 @@ export function RegionManager() {
  return (
    <PageShell
      variant="list"
-      title="区域管理"
-      subtitle="管理各云厂商的区域与接入端点"
+      title={t('cloud.regions')}
+      subtitle={t('cloud.regionsSubtitle')}
      icon={<MapPin className="h-5 w-5" />}
      metrics={
        !loading ? (
          <StatStrip
            items={[
-              { label: '总计', value: stats.total, color: 'blue' },
-              { label: '启用', value: stats.active, color: 'green' },
-              { label: '禁用', value: stats.inactive, color: 'muted' },
+              { label: t('common.total'), value: stats.total, color: 'blue' },
+              { label: t('cloud.enabled'), value: stats.active, color: 'green' },
+              { label: t('cloud.disabled'), value: stats.inactive, color: 'muted' },
            ]}
          />
        ) : undefined
@@ -254,11 +260,11 @@ export function RegionManager() {
        <>
          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
-            刷新
+            {t('common.refresh')}
          </Button>
          <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
            <Plus className="h-4 w-4 mr-1" />
-            添加区域
+            {t('cloud.addRegion')}
          </Button>
        </>
      )}
@@ -268,11 +274,11 @@ export function RegionManager() {
      ) : filtered.length === 0 ? (
        <PageEmpty
          icon={<MapPin className="h-12 w-12" />}
-          title="暂无区域数据"
+          title={t('cloud.noRegionData')}
          action={(
            <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
              <Plus className="h-4 w-4 mr-1" />
-              添加区域
+              {t('cloud.addRegion')}
            </Button>
          )}
        />
@@ -283,7 +289,7 @@ export function RegionManager() {
            data={filtered}
            rowKey={(r) => r.id}
            searchable
-            searchPlaceholder="搜索区域名称或编码..."
+            searchPlaceholder={t('cloud.searchRegion')}
            searchKeys={['name', 'code']}
            sortable
            selectable
@@ -292,7 +298,7 @@ export function RegionManager() {
            columnToggle
            exportable
            exportFilename="regions.csv"
-            emptyText="暂无匹配区域"
+            emptyText={t('cloud.noMatchRegion')}
          />
        </ContentPanel>
      )}
@@ -301,26 +307,26 @@ export function RegionManager() {
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
-            <DialogTitle>{editingItem ? '编辑区域' : '添加区域'}</DialogTitle>
-            <DialogDescription className="sr-only">描述</DialogDescription>
+            <DialogTitle>{editingItem ? t('cloud.editRegion') : t('cloud.addRegion')}</DialogTitle>
+            <DialogDescription className="sr-only">description</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
-                <Label>区域名称 *</Label>
+                <Label>{t('cloud.regionName')} *</Label>
                <Input
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  placeholder="如：华北-北京"
+                  placeholder={t('cloud.regionNamePlaceholder')}
                  className="dg-input"
                />
              </div>
              <div className="space-y-1.5">
-                <Label>编码 *</Label>
+                <Label>{t('cloud.code')} *</Label>
                <Input
                  value={formData.code}
                  onChange={(e) => setFormData({ ...formData, code: e.target.value })}
-                  placeholder="如：cn-north-1"
+                  placeholder={t('cloud.regionCodePlaceholder')}
                  className="dg-input font-mono"
                  disabled={!!editingItem}
                />
@@ -328,7 +334,7 @@ export function RegionManager() {
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
-                <Label>云商</Label>
+                <Label>{t('cloud.vendor')}</Label>
                <Select value={formData.provider} onValueChange={(v) => setFormData({ ...formData, provider: v })}>
                  <SelectTrigger className="dg-input">
                    <SelectValue />
@@ -341,42 +347,42 @@ export function RegionManager() {
                </Select>
              </div>
              <div className="space-y-1.5">
-                <Label>状态</Label>
+                <Label>{t('common.status')}</Label>
                <Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
                  <SelectTrigger className="dg-input">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
-                    <SelectItem value="active">启用</SelectItem>
-                    <SelectItem value="inactive">禁用</SelectItem>
+                    <SelectItem value="active">{t('cloud.enabled')}</SelectItem>
+                    <SelectItem value="inactive">{t('cloud.disabled')}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-1.5">
-              <Label>地理位置</Label>
+              <Label>{t('cloud.geoLocation')}</Label>
              <Input
                value={formData.location}
                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
-                placeholder="如：中国北京"
+                placeholder={t('cloud.locationPlaceholder')}
                className="dg-input"
              />
            </div>
            <div className="space-y-1.5">
-              <Label>接入端点</Label>
+              <Label>{t('cloud.regionEndpoint')}</Label>
              <Input
                value={formData.endpoint}
                onChange={(e) => setFormData({ ...formData, endpoint: e.target.value })}
-                placeholder="如：ecs.cn-north-1.aliyuncs.com"
+                placeholder={t('cloud.endpointPlaceholder')}
                className="dg-input font-mono text-sm"
              />
            </div>
          </div>
          <DialogFooter>
-            <Button variant="ghost" onClick={() => setDialogOpen(false)}>取消</Button>
+            <Button variant="ghost" onClick={() => setDialogOpen(false)}>{t('common.cancel')}</Button>
            <Button onClick={handleSubmit} disabled={submitting || !formData.name.trim() || !formData.code.trim()}>
              {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
-              {editingItem ? '保存' : '创建'}
+              {editingItem ? t('common.save') : t('common.create')}
            </Button>
          </DialogFooter>
        </DialogContent>