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/snmp-monitor/SnmpDeviceChartsPanel.tsx

@@ -15,7 +15,7 @@ import {
   SNMP_TIME_RANGE_HOURS, fmtMetricValue, isSnmpCounterMetric, metricColor, pickSeriesByCategory,
 } from './helpers';
 import { SnmpMetricTrendChart } from './SnmpMetricTrendChart';
-import i18n from '@/i18n';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   device: SnmpDevice | null;
@@ -30,6 +30,7 @@ interface ChartBlock {
 }
 
 export function SnmpDeviceChartsPanel({ device, templateName }: Props) {
+  const { t } = useTranslation();
   const [timeRange, setTimeRange] = useState<SnmpTimeRange>('24h');
   const [series, setSeries] = useState<SnmpMetricSeries[]>([]);
   const [charts, setCharts] = useState<ChartBlock[]>([]);
@@ -115,9 +116,9 @@ export function SnmpDeviceChartsPanel({ device, templateName }: Props) {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="6h"> {i18n.t('monitor.siteProtocol.rangeDefault')} </SelectItem>
-                <SelectItem value="24h"> {i18n.t('选择模板')} </SelectItem>
-                <SelectItem value="7d"> {i18n.t('选择模板')} </SelectItem>
+                <SelectItem value="6h"> {t('monitor.siteProtocol.rangeDefault')} </SelectItem>
+                <SelectItem value="24h"> {t('monitor.lbl.selectTemplate')} </SelectItem>
+                <SelectItem value="7d"> {t('monitor.lbl.selectTemplate')} </SelectItem>
               </SelectContent>
             </Select>
             <Button variant="outline" size="sm" className="h-7 text-xs" onClick={loadCharts} disabled={loading}>
@@ -129,9 +130,9 @@ export function SnmpDeviceChartsPanel({ device, templateName }: Props) {
 
         <div className="grid grid-cols-3 gap-3 mb-4">
           {[
-            { label: i18n.t('设备总数'), value: latestCpu ? fmtMetricValue(latestCpu.latest_value, latestCpu.unit || '%') : '--' },
-            { label: i18n.t('设备总数'), value: latestMem ? fmtMetricValue(latestMem.latest_value, latestMem.unit || '%') : '--' },
-            { label: i18n.t('设备总数'), value: i18n.t('设备总数') },
+            { label: t('monitor.lbl.totalDevices'), value: latestCpu ? fmtMetricValue(latestCpu.latest_value, latestCpu.unit || '%') : '--' },
+            { label: t('monitor.lbl.totalDevices'), value: latestMem ? fmtMetricValue(latestMem.latest_value, latestMem.unit || '%') : '--' },
+            { label: t('monitor.lbl.totalDevices'), value: t('monitor.lbl.totalDevices') },
           ].map((item) => (
             <div key={item.label} className="rounded-lg bg-[var(--dg-bg-tertiary)] p-3 text-center">
               <p className="text-[10px] text-[var(--dg-text-muted)]">{item.label}</p>