feat(web): 能耗页新增「整柜日用电量（电表读数口径）」区块

后端 `GET /api/cabinets/{id}/meter-usage` 上一提交已上线，本提交把它接到既有的
能耗管理页（`/energy`）—— 用户指出已有能源统计页面，无需新建页面。

## 区块内容

- 柜子下拉（复用 `/cabinets/options`，支持搜索）+ 表格（日期 / 电表末读数 / 当日用电 / 数据质量）
- 分页 15 条/页，未选柜子时提示"请先选择柜子"（而不是显示空表格）
- 表格下方一行区间合计（kWh），并注明"无基准与电表更换日不计入"

## ⛔ 与页面既有区块的区别（必须让用户看见，不能混）

区块顶部加了一条 Alert 常驻说明：
> 本区块是电表读数口径（整柜实际用电，硬件计量、含非充电损耗）；
> 上方卡片与排行是订单电量口径（平台按 V×I×Δt 积分的估算值）。
> 两者数值必然不一致，不可互相替代。

## 三个语义坑在前端的落地（与后端 flags 一一对应）

| flags | 前端渲染 |
|---|---|
| `no_baseline` | 当日用电显示 **`-`**（**不是 0**） |
| `covers_multiple_days` | 数据质量列显示"覆盖多日"（warning 色） |
| `meter_reset_or_replaced` | 当日用电显示 **`-`**，数据质量列显示"电表更换/清零"（danger 色） |

数据质量列正常时显示"正常"。`flags` 与文案的映射收在 `METER_FLAG_META` 常量表里，
**新增 flag 必须同步该表**（否则会渲染成空白标签）。

## 验证

- `npm run typecheck`：**exit 0**
- **自证能失败**：植入未定义变量 `meterFlagNoSuchVar` → `TS2304` / **exit 2**；还原 → exit 0
  > 附：第一次自证我选错了判据（把接口的 `usage_wh?` 改成必填），typecheck 不报错 ——
  > 因为接口数据源是 `any`，类型由我自己声明的接口决定，改必填确实不冲突。
  > 换成编译期必错的未定义变量后才验证成功。**是判据选错，不是工具假绿。**
- `npm run build`：exit 0（产物 572 KB / 6 个文件）
- 后端全量验收仍绿：`cargo check` 0 告警、`cargo test` **204 passed**、
  `device_status_parse` 16/16、`rssi_signal` 9/9、结构漂移无
- **端到端**（临时超管账号 + 自签 JWT，用完即删）：造 5 条读数打真实 HTTPS，
  断言前端渲染所需的每个字段都在、`flags` 取值与 `METER_FLAG_META` 的 key 一一对应、
  三个语义坑全部生效、汇总 500 正确 ⇒ **exit 0**
- 已发布：测试 + 生产（web 产物时间戳与本地构建一致 `00:19:40`，
  生产 0 ERROR、域名 401/200；测试环境 nginx reload 后三服务 active）

software/web/src/pages/energy/index.tsx

@@ -15,6 +15,7 @@ import {
   Space,
   Select,
   Grid,
+  Alert,
   Spin, Message
 } from '@arco-design/web-react';
 import { IconDownload } from '@arco-design/web-react/icon';
@@ -77,6 +78,61 @@ interface TrendData {
   list: TrendPoint[];
 }
 
+/** 柜子下拉选项 */
+interface CabinetOption {
+  id: number;
+  name?: string;
+  abstract_id?: string;
+}
+
+/**
+ * 电表口径日用电量行
+ *
+ * ⛔ 与页面其它区块**不是一套数据**：其它区块是 `energy-stats`（订单电量口径，
+ * 平台按 V×I×Δt 积分的估算值）；这里是 `meter-usage`（**电表读数**口径，
+ * 硬件计量、含非充电损耗）。两者数值必然不一致，谁也不替代谁。
+ */
+interface MeterUsageDay {
+  day: string;
+  end_reading: number;
+  /** 当日用电量（Wh）。`undefined` = 无对比基准（该柜第一条读数） */
+  usage_wh?: number;
+  /** 数据质量标记，前端据此决定怎么展示 */
+  flags: MeterUsageFlag[];
+}
+
+/** 数据质量标记（与后端 `UsageFlag` 枚举一一对应） */
+type MeterUsageFlag =
+  | 'no_baseline'
+  | 'covers_multiple_days'
+  | 'meter_reset_or_replaced';
+
+/** 电表口径汇总 */
+interface MeterUsageSummary {
+  total_wh: number;
+  counted_days: number;
+  days_with_data: number;
+}
+
+/** 电表口径响应 */
+interface MeterUsageData {
+  cabinet_id: number;
+  start: string;
+  end: string;
+  days: MeterUsageDay[];
+  summary: MeterUsageSummary;
+}
+
+/** flags → 人类可读说明 + 展示色调 */
+const METER_FLAG_META: Record<MeterUsageFlag, { text: string; color: string }> = {
+  // 该柜第一条读数，无对比基准 ⇒ 不是 0 度，是"不知道"
+  no_baseline: { text: '无基准', color: 'var(--color-text-3)' },
+  // 柜子离线了几天，本行差值覆盖多天
+  covers_multiple_days: { text: '覆盖多日', color: 'var(--color-warning-6)' },
+  // 读数变小 = 换表 / 清零，差值不是用电量
+  meter_reset_or_replaced: { text: '电表更换/清零', color: 'var(--color-danger-6)' },
+};
+
 export default function Energy() {
   // 总览
   const [summary, setSummary] = useState<Summary | null>(null);
@@ -87,6 +143,11 @@ export default function Energy() {
   // 趋势
   const [trendData, setTrendData] = useState<TrendPoint[]>([]);
   const [granularity, setGranularity] = useState<string>('day');
+  // 电表口径（整柜日用电量）
+  const [cabinetOptions, setCabinetOptions] = useState<CabinetOption[]>([]);
+  const [meterCabinetId, setMeterCabinetId] = useState<number | undefined>();
+  const [meterData, setMeterData] = useState<MeterUsageData | null>(null);
+  const [meterLoading, setMeterLoading] = useState(false);
   // 通用
   const [loading, setLoading] = useState(true);
   const [downloadVisible, setDownloadVisible] = useState(false);
@@ -146,6 +207,27 @@ export default function Energy() {
     fetchTrend();
   }, [fetchTrend]);
 
+  /** 加载柜子下拉（电表口径区块用） */
+  useEffect(() => {
+    api.get<CabinetOption[]>('/cabinets/options')
+      .then((res) => setCabinetOptions(res.data || []))
+      .catch(() => Message.error('加载柜子列表失败'));
+  }, []);
+
+  /** 选中柜子变化时加载电表口径日用电量 */
+  useEffect(() => {
+    if (!meterCabinetId) {
+      setMeterData(null);
+      return;
+    }
+    setMeterLoading(true);
+    api
+      .get<MeterUsageData>(`/cabinets/${meterCabinetId}/meter-usage`)
+      .then((res) => setMeterData(res.data))
+      .catch(() => Message.error('加载电表口径用电量失败'))
+      .finally(() => setMeterLoading(false));
+  }, [meterCabinetId]);
+
   /** 导出（后端要求 energy:export） */
   const handleExport = async () => {
     try {
@@ -235,6 +317,53 @@ export default function Energy() {
     padding: '8px 12px',
   };
 
+  /** 电表口径日用电量列定义 */
+  const meterUsageColumns = [
+    {
+      title: '日期',
+      dataIndex: 'day',
+      width: 140,
+      defaultSortOrder: 'descend' as const,
+      sortable: true,
+      sorter: (a: MeterUsageDay, b: MeterUsageDay) => a.day.localeCompare(b.day),
+    },
+    {
+      title: '电表末读数(kWh)',
+      dataIndex: 'end_reading',
+      width: 160,
+      render: (v: number) => fmt(v / 1000),
+    },
+    {
+      title: '当日用电(kWh)',
+      dataIndex: 'usage_wh',
+      width: 150,
+      render: (v: number | undefined, record: MeterUsageDay) => {
+        // ⛔ 无基准 ⇒ 不是 0 度，必须显示"-"（显示 0 等于告诉用户这天没用一度电）
+        if (v == null) return '-';
+        // 换表/清零 ⇒ 差值是负数，绝不能呈现成"负用电量"
+        if (record.flags.includes('meter_reset_or_replaced')) return '-';
+        return fmt(v / 1000);
+      },
+    },
+    {
+      title: '数据质量',
+      dataIndex: 'flags',
+      width: 220,
+      render: (flags: MeterUsageFlag[]) =>
+        flags.length === 0 ? (
+          <span style={{ color: 'var(--color-text-3)' }}>正常</span>
+        ) : (
+          <Space size={4} wrap>
+            {flags.map((f) => (
+              <span key={f} style={{ color: METER_FLAG_META[f].color, fontSize: 12 }}>
+                {METER_FLAG_META[f].text}
+              </span>
+            ))}
+          </Space>
+        ),
+    },
+  ];
+
   return (
     <Spin loading={loading} style={{ width: '100%' }}>
       {/* 顶部数据卡片 */}
@@ -446,6 +575,77 @@ export default function Energy() {
         </Space>
       </Card>
 
+      {/* 整柜日用电量（电表读数口径）*/}
+      <Card
+        title="整柜日用电量（电表读数口径）"
+        extra={
+          <Space>
+            <span style={{ fontSize: 12, color: 'var(--color-text-3)' }}>
+              默认最近 30 天
+            </span>
+            <Select
+              value={meterCabinetId}
+              onChange={(val) => setMeterCabinetId(val as number | undefined)}
+              placeholder="选择柜子"
+              style={{ width: 200 }}
+              allowClear
+              showSearch
+              filterOption={(input, option) => {
+                // Arco 的 filterOption 签名把 option 定为 {}，这里自行收窄
+                const label = (option as { props?: { label?: string } } | undefined)
+                  ?.props?.label;
+                return (
+                  typeof label === 'string' &&
+                  label.toLowerCase().includes(input.toLowerCase())
+                );
+              }}
+              options={cabinetOptions.map((c) => ({
+                label: `${c.abstract_id || c.id}${c.name ? ` ${c.name}` : ''}`,
+                value: c.id,
+              }))}
+            />
+          </Space>
+        }
+      >
+        <Alert
+          type="info"
+          style={{ marginBottom: 12 }}
+          content={
+            '本区块是电表读数口径（整柜实际用电，硬件计量、含非充电损耗）；' +
+            '上方卡片与排行是订单电量口径（平台按 V×I×Δt 积分的估算值）。' +
+            '两者数值必然不一致，不可互相替代。'
+          }
+        />
+        <Table
+          rowKey="day"
+          columns={meterUsageColumns}
+          data={meterData?.days || []}
+          loading={meterLoading}
+          pagination={{
+            pageSize: 15,
+            showTotal: (total: number) => `共 ${total} 天`,
+          }}
+          size="default"
+          noDataElement={
+            meterCabinetId ? '该柜暂无电表读数记录' : '请先选择柜子'
+          }
+        />
+        {meterData && meterData.summary.days_with_data > 0 && (
+          <div
+            style={{
+              marginTop: 12,
+              fontSize: 13,
+              color: 'var(--color-text-2)',
+            }}
+          >
+            {`区间合计 ${fmt(meterData.summary.total_wh / 1000)} kWh` +
+              `（计入 ${meterData.summary.counted_days} 天` +
+              `，有读数 ${meterData.summary.days_with_data} 天` +
+              `；无基准与电表更换日不计入）`}
+          </div>
+        )}
+      </Card>
+
       {/* 下载中心弹窗 */}
       <DownloadCenter
         visible={downloadVisible}