refactor(i18n): U24 Monitor 模块 i18n hook 迁移 — 26 个 .tsx 文件从全局 i18n.t() 迁移到 useTranslation() hook + 89 个 phantom 中文文本键替换为 monitor.lbl.* 语义化键

- 新增 monitor.lbl 翻译子命名空间 89 键（HostMonitor/Middleware/Site/SNMP/Shared）
- 26 .tsx: import i18n → useTranslation() hook + i18n.t('中文') → t('monitor.lbl.semanticKey')
- 模块级代码(TABS/METRIC_CATEGORIES)保留 i18n.t() + 语义化键
- 1 .ts helpers 文件 phantom 键替换
- zh/en 6886→6975 +89 键对齐
- tsc -b=0, npm build✓ (17.16s), ESLint=0/53/0, go build=0, Docker healthy

frontend/src/pages/monitor/middleware-monitor/MwOverviewCharts.tsx

@@ -10,7 +10,7 @@ import type { MwTarget } from './helpers';
 import { fmtHitRate, fmtVal } from './helpers';
 import { ChartExpandShell } from '../shared/ChartExpandShell';
 import { MonitorChartTooltip, MONITOR_PIE_STROKE, MonitorPieTooltip } from '../shared/monitorChartTheme';
-import i18n from '@/i18n';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   targets: MwTarget[];
@@ -21,12 +21,13 @@ function shortName(name: string) {
 }
 
 export function MwOverviewCharts({ targets }: Props) {
+  const { t } = useTranslation();
   const statusData = useMemo(() => {
     const online = targets.filter((t) => t.status === 'online').length;
     const offline = targets.length - online;
     return [
-      { name: i18n.t('agent.agentOnline'), value: online, fill: 'var(--dg-green)' },
-      { name: i18n.t('agent.agentOffline'), value: offline, fill: 'var(--dg-red)' },
+      { name: t('agent.agentOnline'), value: online, fill: 'var(--dg-green)' },
+      { name: t('agent.agentOffline'), value: offline, fill: 'var(--dg-red)' },
     ].filter((d) => d.value > 0);
   }, [targets]);
 
@@ -53,7 +54,7 @@ export function MwOverviewCharts({ targets }: Props) {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
-      <OverviewChartCard title={i18n.t('实例状态')} icon={<PieChartIcon className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={statusData.length === 0}>
+      <OverviewChartCard title={t('monitor.lbl.instanceStatus')} icon={<PieChartIcon className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={statusData.length === 0}>
         {(h) => (
           <ResponsiveContainer width="100%" height={h}>
             <PieChart>
@@ -67,13 +68,13 @@ export function MwOverviewCharts({ targets }: Props) {
         )}
       </OverviewChartCard>
 
-      <OverviewChartCard title={i18n.t('在线')} icon={<Percent className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={redisHitData.length === 0}>
+      <OverviewChartCard title={t('common.online')} icon={<Percent className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={redisHitData.length === 0}>
         {(h) => (
           <ResponsiveContainer width="100%" height={h}>
             <BarChart data={redisHitData} layout="vertical" margin={{ left: 0, right: 8 }}>
               <XAxis type="number" domain={[0, 100]} tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} tickFormatter={(v) => `${v}%`} />
               <YAxis type="category" dataKey="name" width={64} tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} tickLine={false} axisLine={false} />
-              <Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtHitRate(v / 100)} nameFormatter={() => i18n.t('命中率')} />} />
+              <Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtHitRate(v / 100)} nameFormatter={() => t('monitor.lbl.hitRate')} />} />
               <Bar dataKey="value" radius={[0, 3, 3, 0]} maxBarSize={14} isAnimationActive={false}>
                 {redisHitData.map((e) => <Cell key={e.fullName} fill={e.fill} />)}
               </Bar>
@@ -97,13 +98,13 @@ export function MwOverviewCharts({ targets }: Props) {
         )}
       </OverviewChartCard>
 
-      <OverviewChartCard title={i18n.t('monitor.mwoverviewchart.s07d3e014')} icon={<BarChart3 className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={mysqlConnData.length === 0}>
+      <OverviewChartCard title={t('monitor.mwoverviewchart.s07d3e014')} icon={<BarChart3 className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />} empty={mysqlConnData.length === 0}>
         {(h) => (
           <ResponsiveContainer width="100%" height={h}>
             <BarChart data={mysqlConnData} layout="vertical" margin={{ left: 0, right: 8 }}>
               <XAxis type="number" tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} />
               <YAxis type="category" dataKey="name" width={64} tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} tickLine={false} axisLine={false} />
-              <Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtVal(v)} nameFormatter={() => i18n.t('连接')} />} />
+              <Tooltip content={<MonitorChartTooltip valueFormatter={(v) => fmtVal(v)} nameFormatter={() => t('monitor.lbl.connections')} />} />
               <Bar dataKey="value" radius={[0, 3, 3, 0]} maxBarSize={14} isAnimationActive={false}>
                 {mysqlConnData.map((e) => <Cell key={e.fullName} fill={e.fill} />)}
               </Bar>