feat(console): i18n the system-settings hub (objectui#2851 P2) (#2859)

SettingsHub rendered its title/subtitle, category section headers, card
titles/descriptions and the "N settings" count as hardcoded English, so
the 系统设置总览 page stayed English under zh.

- Wire SettingsHub chrome to `console.settingsHub.*` i18n keys (en + zh).
- Extract a <SettingCard> that resolves each manifest's translated
  title/description via the existing `useSettingsLabel` convention, so
  already-translated namespaces (mail/branding/…) light up immediately.
- Translate category section headers by the manifest `category` value,
  falling back to the literal for plugin-authored categories.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: baozhoutao

apps/console/src/pages/settings/SettingsHub.tsx

@@ -16,21 +16,65 @@ import {
   Badge,
   Skeleton,
 } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { Settings as SettingsIcon } from 'lucide-react';
 import { getIcon } from '../../utils/getIcon';
 import { listSettingsManifests } from './api';
 import { resolveLabel, type SettingsManifest } from './types';
+import { useSettingsLabel } from './useSettingsLabel';
+
+/**
+ * One manifest card. Extracted so it can resolve the manifest's own
+ * translated title/description via {@link useSettingsLabel} (hooks can't be
+ * called inside a `.map()` callback in the parent).
+ */
+function SettingCard({ m, onOpen }: { m: SettingsManifest; onOpen: () => void }) {
+  const { t } = useObjectTranslation();
+  const labels = useSettingsLabel(m.namespace);
+  const Icon = m.icon ? getIcon(m.icon) : SettingsIcon;
+  const literalLabel = resolveLabel(m.label);
+  const title = labels.title(literalLabel);
+  const description = labels.description(m.description ?? undefined);
+
+  return (
+    <Card
+      className="cursor-pointer hover:border-primary/50 hover:shadow-sm transition-all"
+      onClick={onOpen}
+    >
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <Icon className="h-6 w-6 text-muted-foreground" />
+          {m.beta ? (
+            <Badge variant="secondary" className="text-[10px]">
+              {t('console.settingsHub.beta')}
+            </Badge>
+          ) : null}
+        </div>
+        <CardTitle className="text-base mt-2">{title}</CardTitle>
+        {description ? <CardDescription className="text-xs">{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent className="pt-0">
+        <div className="text-[11px] text-muted-foreground">
+          {t('console.settingsHub.settingsCount', { n: m.specifiers.length })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
 
 export function SettingsHub() {
   const navigate = useNavigate();
+  const { t } = useObjectTranslation();
   const [manifests, setManifests] = useState<SettingsManifest[] | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     listSettingsManifests()
       .then((r) => setManifests(r.manifests ?? []))
-      .catch((err) => setError(err?.message ?? 'Failed to load settings'));
-  }, []);
+      .catch((err) =>
+        setError(err?.message ?? t('console.settingsHub.loadError')),
+      );
+  }, [t]);
 
   const byCategory = useMemo(() => {
     if (!manifests) return null;
@@ -49,8 +93,8 @@ export function SettingsHub() {
       <div className="flex items-center gap-3 mb-6">
         <SettingsIcon className="h-7 w-7 text-muted-foreground" />
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
-          <p className="text-sm text-muted-foreground">Configure your workspace, integrations, and feature flags.</p>
+          <h1 className="text-2xl font-semibold tracking-tight">{t('console.settingsHub.title')}</h1>
+          <p className="text-sm text-muted-foreground">{t('console.settingsHub.subtitle')}</p>
         </div>
       </div>
 
@@ -72,42 +116,23 @@ export function SettingsHub() {
       ) : manifests.length === 0 ? (
         <Card>
           <CardContent className="py-12 text-center text-sm text-muted-foreground">
-            No settings registered. Plugins can register settings manifests via the SettingsService.
+            {t('console.settingsHub.empty')}
           </CardContent>
         </Card>
       ) : (
         Array.from(byCategory ?? []).map(([category, items]) => (
           <section key={category} className="mb-8">
             <h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground mb-3">
-              {category}
+              {t(`console.settingsHub.categories.${category}`, { defaultValue: category })}
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {items.map((m) => {
-                const Icon = m.icon ? getIcon(m.icon) : SettingsIcon;
-                return (
-                  <Card
-                    key={m.namespace}
-                    className="cursor-pointer hover:border-primary/50 hover:shadow-sm transition-all"
-                    onClick={() => navigate(`/system/settings/${m.namespace}`)}
-                  >
-                    <CardHeader className="pb-3">
-                      <div className="flex items-start justify-between">
-                        <Icon className="h-6 w-6 text-muted-foreground" />
-                        {m.beta ? <Badge variant="secondary" className="text-[10px]">Beta</Badge> : null}
-                      </div>
-                      <CardTitle className="text-base mt-2">{resolveLabel(m.label)}</CardTitle>
-                      {m.description ? (
-                        <CardDescription className="text-xs">{m.description}</CardDescription>
-                      ) : null}
-                    </CardHeader>
-                    <CardContent className="pt-0">
-                      <div className="text-[11px] text-muted-foreground">
-                        {m.specifiers.length} setting{m.specifiers.length === 1 ? '' : 's'}
-                      </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
+              {items.map((m) => (
+                <SettingCard
+                  key={m.namespace}
+                  m={m}
+                  onOpen={() => navigate(`/system/settings/${m.namespace}`)}
+                />
+              ))}
             </div>
           </section>
         ))

packages/i18n/src/locales/en.ts

@@ -1226,6 +1226,24 @@ const en = {
       dragToReorder: 'Drag to reorder',
       favorites: 'Favorites',
     },
+    settingsHub: {
+      title: 'Settings',
+      subtitle: 'Configure your workspace, integrations, and feature flags.',
+      loadError: 'Failed to load settings',
+      empty: 'No settings registered. Plugins can register settings manifests via the SettingsService.',
+      settingsCount: '{{n}} settings',
+      beta: 'Beta',
+      // Section headers, keyed by the manifest `category` value. Unknown
+      // (plugin-authored) categories fall back to the literal category string.
+      categories: {
+        Workspace: 'Workspace',
+        Communication: 'Communication',
+        Security: 'Security',
+        Infrastructure: 'Infrastructure',
+        Beta: 'Beta',
+        Other: 'Other',
+      },
+    },
     loadingSteps: {
       connecting: 'Connecting to data source',
       loadingConfig: 'Loading configuration',

packages/i18n/src/locales/zh.ts

@@ -1302,6 +1302,23 @@ const zh = {
       dragToReorder: '拖动以重新排序',
       favorites: '收藏',
     },
+    settingsHub: {
+      title: '设置',
+      subtitle: '配置工作区、集成与功能开关。',
+      loadError: '加载设置失败',
+      empty: '尚未注册任何设置。插件可通过 SettingsService 注册设置清单。',
+      settingsCount: '{{n}} 项设置',
+      beta: 'Beta',
+      // 分类小标题，按 manifest 的 `category` 值取键;未知(插件自定义)分类回退到原始字符串。
+      categories: {
+        Workspace: '工作区',
+        Communication: '通讯',
+        Security: '安全',
+        Infrastructure: '基础设施',
+        Beta: 'Beta',
+        Other: '其他',
+      },
+    },
     loadingSteps: {
       connecting: '正在连接数据源',
       loadingConfig: '正在加载配置',