feat(faults): add severity dimension and detail column

feat(energy): add vehicle scope and station search to hydrogen daily
refactor(ui): share date range picker across asset and energy views
2026-10-24 13:37:09 +08:00 · 2026-10-24 13:37:09 +08:00 · 2026-10-24 13:37:09 +08:00 · 2026-10-24 13:29:13 +08:00 · 2026-10-24 13:16:59 +08:00 · 2026-10-24 13:16:53 +08:00
20 changed files with 428 additions and 247 deletions
@@ -1,12 +1,12 @@
 {
  "name": "ln-bi",
-  "version": "1.1.19",
+  "version": "1.1.21",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ln-bi",
-      "version": "1.1.19",
+      "version": "1.1.21",
      "dependencies": {
        "@amap/amap-jsapi-loader": "^1.0.1",
        "@hono/node-server": "^1.13.0",
@@ -1,7 +1,7 @@
 {
  "name": "ln-bi",
  "private": true,
-  "version": "1.1.19",
+  "version": "1.1.21",
  "type": "module",
  "scripts": {
    "dev": "concurrently -n server,client -c blue,green \"npm run dev:server\" \"npm run dev:client\"",
@@ -0,0 +1,120 @@
+import { useId, useRef, useState } from 'react';
+import { ArrowRight, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
+export interface DateRange { start: string; end: string }
+interface DateRangePickerProps {
+  value: DateRange;
+  onChange: (range: DateRange) => void;
+  quickPicks: Array<{ label: string; range: DateRange }>;
+  label?: string;
+  testId?: string;
+  className?: string;
+  maxDays?: number;
+}
+
+const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
+const ymd = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+const parseDate = (value: string) => new Date(`${value}T12:00:00`);
+const dayCount = (start: string, end: string) => Math.round((Date.parse(`${end}T00:00:00Z`) - Date.parse(`${start}T00:00:00Z`)) / 86400000) + 1;
+
+export function DateRangePicker({ value, onChange, quickPicks, label = '统计日期', testId, className = '', maxDays = Infinity }: DateRangePickerProps) {
+  const titleId = useId();
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [draft, setDraft] = useState(value);
+  const [selecting, setSelecting] = useState<'start' | 'end'>('start');
+  const [month, setMonth] = useState(() => parseDate(value.start));
+  const [hovered, setHovered] = useState('');
+  const today = ymd(new Date());
+  const count = draft.end ? dayCount(draft.start, draft.end) : 0;
+  const valid = count > 0 && count <= maxDays;
+  const monthStart = new Date(month.getFullYear(), month.getMonth(), 1);
+  const previewEnd = draft.end || hovered || draft.start;
+  const rangeStart = draft.start < previewEnd ? draft.start : previewEnd;
+  const rangeEnd = draft.start > previewEnd ? draft.start : previewEnd;
+  const open = () => {
+    setDraft(value); setSelecting('start'); setMonth(parseDate(value.start)); setHovered('');
+    dialog.current?.showModal();
+  };
+  const choose = (date: string) => {
+    if (selecting === 'start') {
+      setDraft({ start: date, end: '' }); setSelecting('end');
+    } else {
+      setDraft(date < draft.start ? { start: date, end: draft.start } : { start: draft.start, end: date });
+      setSelecting('start');
+    }
+    setHovered('');
+  };
+  const calendar = (offset: number) => {
+    const current = new Date(monthStart.getFullYear(), monthStart.getMonth() + offset, 1);
+    const year = current.getFullYear(), m = current.getMonth();
+    const padding = (current.getDay() + 6) % 7;
+    const length = new Date(year, m + 1, 0).getDate();
+    return <div className={offset ? 'hidden sm:block' : ''} key={offset}>
+      <div className="mb-3 text-center text-sm font-bold text-slate-700">{year} 年 {m + 1} 月</div>
+      <div className="grid grid-cols-7 text-center">
+        {weekdays.map(day => <div key={day} className="py-2 text-[11px] font-medium text-slate-400">{day}</div>)}
+        {Array.from({ length: padding }, (_, i) => <div key={`blank-${i}`} />)}
+        {Array.from({ length }, (_, i) => {
+          const date = ymd(new Date(year, m, i + 1));
+          const endpoint = date === draft.start || date === draft.end;
+          const inRange = date >= rangeStart && date <= rangeEnd;
+          return <button key={date} type="button" aria-label={date} aria-pressed={endpoint}
+            onClick={() => choose(date)} onMouseEnter={() => { if (!draft.end) setHovered(date); }}
+            className={`relative my-0.5 h-10 text-xs font-semibold transition focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-blue-500 ${endpoint ? 'rounded-xl bg-blue-600 text-white shadow-sm' : inRange ? 'bg-blue-50 text-blue-700' : 'rounded-xl text-slate-600 hover:bg-slate-100'} ${date === today && !endpoint ? 'font-black text-blue-600' : ''}`}>
+            {i + 1}{date === today && <span className={`absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full ${endpoint ? 'bg-white' : 'bg-blue-500'}`} />}
+          </button>;
+        })}
+      </div>
+    </div>;
+  };
+  return <>
+    <button type="button" data-testid={testId} aria-haspopup="dialog" onClick={open}
+      className={`flex w-full items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-left shadow-sm transition hover:border-blue-300 hover:bg-blue-50/40 focus-visible:outline-2 focus-visible:outline-blue-500 ${className}`}>
+      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-600"><CalendarDays size={18} /></span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-[10px] font-medium text-slate-400">{label}</span>
+        <span className="mt-1 flex items-center gap-2 text-[13px] font-bold text-slate-700"><span>{value.start.replaceAll('-', '/')}</span><ArrowRight size={13} className="shrink-0 text-slate-300" /><span>{value.end.replaceAll('-', '/')}</span></span>
+      </span>
+      <span className="hidden rounded-lg bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-500 sm:block">{dayCount(value.start, value.end)} 天</span>
+      <ChevronDown size={16} className="shrink-0 text-slate-400" />
+    </button>
+    <dialog ref={dialog} aria-labelledby={titleId} onClick={e => { if (e.target === e.currentTarget) dialog.current?.close(); }}
+      className="fixed inset-0 m-auto max-h-[90dvh] w-[calc(100%-24px)] max-w-[680px] overflow-y-auto rounded-3xl border-0 bg-white p-0 text-slate-700 shadow-2xl backdrop:bg-slate-950/30 backdrop:backdrop-blur-sm">
+      <div className="p-5 sm:p-6">
+        <div className="flex items-start justify-between gap-3">
+          <div><h3 id={titleId} className="text-base font-bold text-slate-900">选择统计日期</h3><p className="mt-1 text-xs text-slate-400">先选开始日期，再选结束日期</p></div>
+          <button type="button" aria-label="关闭日期选择" onClick={() => dialog.current?.close()} className="rounded-full p-2 text-slate-400 hover:bg-slate-100"><X size={18} /></button>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          {quickPicks.map(pick => <button key={pick.label} type="button" onClick={() => { setDraft(pick.range); setMonth(parseDate(pick.range.start)); setSelecting('start'); setHovered(''); }}
+            className={`rounded-lg border px-3 py-2 text-xs font-medium transition ${draft.start === pick.range.start && draft.end === pick.range.end ? 'border-blue-200 bg-blue-50 text-blue-600' : 'border-slate-100 text-slate-500 hover:border-blue-200 hover:bg-blue-50'}`}>{pick.label}</button>)}
+        </div>
+        <div className="mt-4 grid grid-cols-2 gap-3">
+          {(['start', 'end'] as const).map(field => <button key={field} type="button" onClick={() => { setSelecting(field); setHovered(''); setMonth(parseDate(draft[field] || draft.start)); }}
+            className={`rounded-xl border px-3 py-2.5 text-left transition ${selecting === field ? 'border-blue-400 bg-blue-50/60 ring-2 ring-blue-50' : 'border-slate-200 bg-slate-50/50'}`}>
+            <span className="block text-[10px] text-slate-400">{field === 'start' ? '开始日期' : '结束日期'}</span><span className="mt-1 block text-sm font-bold">{draft[field] || '请选择结束日期'}</span>
+          </button>)}
+        </div>
+        <div className="mt-5 flex items-center justify-between gap-2">
+          <button type="button" aria-label="上个月" onClick={() => setMonth(new Date(monthStart.getFullYear(), monthStart.getMonth() - 1, 1))} className="rounded-lg p-2 hover:bg-slate-100"><ChevronLeft size={18} /></button>
+          <div className="flex gap-2">
+            <select aria-label="年份" value={monthStart.getFullYear()} onChange={e => setMonth(new Date(Number(e.target.value), monthStart.getMonth(), 1))} className="rounded-lg bg-slate-50 px-2 py-1.5 text-xs font-semibold">
+              {Array.from({ length: Math.max(new Date().getFullYear() + 1, monthStart.getFullYear()) - Math.min(2016, monthStart.getFullYear()) + 1 }, (_, i) => Math.min(2016, monthStart.getFullYear()) + i).map(year => <option key={year} value={year}>{year} 年</option>)}
+            </select>
+            <select aria-label="月份" value={monthStart.getMonth()} onChange={e => setMonth(new Date(monthStart.getFullYear(), Number(e.target.value), 1))} className="rounded-lg bg-slate-50 px-2 py-1.5 text-xs font-semibold">
+              {Array.from({ length: 12 }, (_, i) => <option key={i} value={i}>{i + 1} 月</option>)}
+            </select>
+          </div>
+          <button type="button" aria-label="下个月" onClick={() => setMonth(new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 1))} className="rounded-lg p-2 hover:bg-slate-100"><ChevronRight size={18} /></button>
+        </div>
+        <div className="mt-3 grid gap-6 sm:grid-cols-2" onMouseLeave={() => setHovered('')}>{calendar(0)}{calendar(1)}</div>
+      </div>
+      <div className="sticky bottom-0 flex items-center justify-between gap-3 border-t border-slate-100 bg-white px-5 py-4 sm:px-6">
+        <span role="status" className={`text-xs ${count > maxDays ? 'text-red-500' : 'text-slate-400'}`}>{!draft.end ? '请选择结束日期' : count > maxDays ? `最多选择 ${maxDays} 天` : `已选 ${count} 天（包含首尾）`}</span>
+        <div className="flex shrink-0 gap-2">
+          <button type="button" onClick={() => dialog.current?.close()} className="rounded-xl px-3 py-2.5 text-xs font-semibold text-slate-500 hover:bg-slate-100">取消</button>
+          <button type="button" disabled={!valid} onClick={() => { onChange(draft); dialog.current?.close(); }} className="flex items-center gap-1 rounded-xl bg-blue-600 px-4 py-2.5 text-xs font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-40"><Check size={14} />应用日期</button>
+        </div>
+      </div>
+    </dialog>
+  </>;
+}
@@ -8,15 +8,17 @@ import type { OverviewViewProps } from './overview/types';
 export function OverviewView(props: OverviewViewProps) {
  return (
    <>
-      <SummaryMetrics
-        summary={props.summary}
-        operatingRate={props.operatingRate}
-        inventoryRate={props.inventoryRate}
-        pendingRate={props.pendingRate}
-        setVehicleSelection={props.setVehicleSelection}
-      />
+      <div className="flex flex-col gap-2">
+        <SummaryMetrics
+          summary={props.summary}
+          operatingRate={props.operatingRate}
+          inventoryRate={props.inventoryRate}
+          pendingRate={props.pendingRate}
+          setVehicleSelection={props.setVehicleSelection}
+        />

-      <AssetHistorySection subject={props.selectedSubject} onSubjects={props.onHistorySubjects} />
+        <AssetHistorySection subject={props.selectedSubject} onSubjects={props.onHistorySubjects} />
+      </div>

      <FlowStatisticsCard
        flowRange={props.flowRange}
@@ -1,118 +1,18 @@
-import { useRef, useState } from 'react';
-import { ArrowRight, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { DateRangePicker } from '../../../../components/ui/DateRangePicker';
 import { getRecentFlowRange, getWeeklyFlowRange, type DateRange } from '../../model';

-const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
 const ymd = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-const parseDate = (value: string) => new Date(`${value}T12:00:00`);
 const shiftDay = (date: Date, offset: number) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset);
-const dayCount = (start: string, end: string) => Math.round((Date.parse(`${end}T00:00:00Z`) - Date.parse(`${start}T00:00:00Z`)) / 86400000) + 1;

 export function FlowDateRangePicker({ value, onChange, dateLabel = '运维签章时间' }: { value: DateRange; onChange: (range: DateRange) => void; dateLabel?: string }) {
-  const dialog = useRef<HTMLDialogElement>(null);
-  const [draft, setDraft] = useState(value);
-  const [selecting, setSelecting] = useState<'start' | 'end'>('start');
-  const [month, setMonth] = useState(() => parseDate(value.start));
-  const [hovered, setHovered] = useState('');
  const today = ymd(new Date());
-  const count = draft.end ? dayCount(draft.start, draft.end) : 0;
-  const valid = count > 0 && count <= 370;
-  const monthStart = new Date(month.getFullYear(), month.getMonth(), 1);
-  const previewEnd = draft.end || hovered || draft.start;
-  const rangeStart = draft.start < previewEnd ? draft.start : previewEnd;
-  const rangeEnd = draft.start > previewEnd ? draft.start : previewEnd;
-  const quickPicks = [
-    { label: '今天', range: { start: today, end: today } },
-    { label: '昨天', range: { start: ymd(shiftDay(new Date(), -1)), end: ymd(shiftDay(new Date(), -1)) } },
-    { label: '业务周', range: getWeeklyFlowRange() },
-    { label: '近 7 天', range: getRecentFlowRange() },
-    { label: '近 30 天', range: { start: ymd(shiftDay(new Date(), -29)), end: today } },
-  ];
-  const open = () => {
-    setDraft(value); setSelecting('start'); setMonth(parseDate(value.start)); setHovered('');
-    dialog.current?.showModal();
-  };
-  const choose = (date: string) => {
-    if (selecting === 'start') {
-      setDraft({ start: date, end: '' }); setSelecting('end');
-    } else {
-      setDraft(date < draft.start ? { start: date, end: draft.start } : { start: draft.start, end: date });
-      setSelecting('start');
-    }
-    setHovered('');
-  };
-  const calendar = (offset: number) => {
-    const current = new Date(monthStart.getFullYear(), monthStart.getMonth() + offset, 1);
-    const year = current.getFullYear(), m = current.getMonth();
-    const padding = (current.getDay() + 6) % 7;
-    const length = new Date(year, m + 1, 0).getDate();
-    return <div className={offset ? 'hidden sm:block' : ''} key={offset}>
-      <div className="mb-3 text-center text-sm font-bold text-slate-700">{year} 年 {m + 1} 月</div>
-      <div className="grid grid-cols-7 text-center">
-        {weekdays.map(day => <div key={day} className="py-2 text-[11px] font-medium text-slate-400">{day}</div>)}
-        {Array.from({ length: padding }, (_, i) => <div key={`blank-${i}`} />)}
-        {Array.from({ length }, (_, i) => {
-          const date = ymd(new Date(year, m, i + 1));
-          const endpoint = date === draft.start || date === draft.end;
-          const inRange = date >= rangeStart && date <= rangeEnd;
-          return <button key={date} type="button" aria-label={date} aria-pressed={endpoint}
-            onClick={() => choose(date)} onMouseEnter={() => { if (!draft.end) setHovered(date); }}
-            className={`relative my-0.5 h-10 text-xs font-semibold transition focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-blue-500 ${endpoint ? 'rounded-xl bg-blue-600 text-white shadow-sm' : inRange ? 'bg-blue-50 text-blue-700' : 'rounded-xl text-slate-600 hover:bg-slate-100'} ${date === today && !endpoint ? 'font-black text-blue-600' : ''}`}>
-            {i + 1}{date === today && <span className={`absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full ${endpoint ? 'bg-white' : 'bg-blue-500'}`} />}
-          </button>;
-        })}
-      </div>
-    </div>;
-  };
-  return <>
-    <button type="button" data-testid="asset-flow-date-range" aria-haspopup="dialog" onClick={open}
-      className="mt-3 flex w-full items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-left shadow-sm transition hover:border-blue-300 hover:bg-blue-50/40 focus-visible:outline-2 focus-visible:outline-blue-500">
-      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-600"><CalendarDays size={18} /></span>
-      <span className="min-w-0 flex-1">
-        <span className="block text-[10px] font-medium text-slate-400">统计日期 · {dateLabel}</span>
-        <span className="mt-1 flex items-center gap-2 text-[13px] font-bold text-slate-700"><span>{value.start.replaceAll('-', '/')}</span><ArrowRight size={13} className="shrink-0 text-slate-300" /><span>{value.end.replaceAll('-', '/')}</span></span>
-      </span>
-      <span className="hidden rounded-lg bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-500 sm:block">{dayCount(value.start, value.end)} 天</span>
-      <ChevronDown size={16} className="shrink-0 text-slate-400" />
-    </button>
-    <dialog ref={dialog} aria-labelledby="flow-date-title" onClick={e => { if (e.target === e.currentTarget) dialog.current?.close(); }}
-      className="fixed inset-0 m-auto max-h-[90dvh] w-[calc(100%-24px)] max-w-[680px] overflow-y-auto rounded-3xl border-0 bg-white p-0 text-slate-700 shadow-2xl backdrop:bg-slate-950/30 backdrop:backdrop-blur-sm">
-      <div className="p-5 sm:p-6">
-        <div className="flex items-start justify-between gap-3">
-          <div><h3 id="flow-date-title" className="text-base font-bold text-slate-900">选择统计日期</h3><p className="mt-1 text-xs text-slate-400">先选开始日期，再选结束日期</p></div>
-          <button type="button" aria-label="关闭日期选择" onClick={() => dialog.current?.close()} className="rounded-full p-2 text-slate-400 hover:bg-slate-100"><X size={18} /></button>
-        </div>
-        <div className="mt-4 flex flex-wrap gap-2">
-          {quickPicks.map(pick => <button key={pick.label} type="button" onClick={() => { setDraft(pick.range); setMonth(parseDate(pick.range.start)); setSelecting('start'); setHovered(''); }}
-            className={`rounded-lg border px-3 py-2 text-xs font-medium transition ${draft.start === pick.range.start && draft.end === pick.range.end ? 'border-blue-200 bg-blue-50 text-blue-600' : 'border-slate-100 text-slate-500 hover:border-blue-200 hover:bg-blue-50'}`}>{pick.label}</button>)}
-        </div>
-        <div className="mt-4 grid grid-cols-2 gap-3">
-          {(['start', 'end'] as const).map(field => <button key={field} type="button" onClick={() => { setSelecting(field); setHovered(''); setMonth(parseDate(draft[field] || draft.start)); }}
-            className={`rounded-xl border px-3 py-2.5 text-left transition ${selecting === field ? 'border-blue-400 bg-blue-50/60 ring-2 ring-blue-50' : 'border-slate-200 bg-slate-50/50'}`}>
-            <span className="block text-[10px] text-slate-400">{field === 'start' ? '开始日期' : '结束日期'}</span><span className="mt-1 block text-sm font-bold">{draft[field] || '请选择结束日期'}</span>
-          </button>)}
-        </div>
-        <div className="mt-5 flex items-center justify-between gap-2">
-          <button type="button" aria-label="上个月" onClick={() => setMonth(new Date(monthStart.getFullYear(), monthStart.getMonth() - 1, 1))} className="rounded-lg p-2 hover:bg-slate-100"><ChevronLeft size={18} /></button>
-          <div className="flex gap-2">
-            <select aria-label="年份" value={monthStart.getFullYear()} onChange={e => setMonth(new Date(Number(e.target.value), monthStart.getMonth(), 1))} className="rounded-lg bg-slate-50 px-2 py-1.5 text-xs font-semibold">
-              {Array.from({ length: Math.max(new Date().getFullYear() + 1, monthStart.getFullYear()) - Math.min(2016, monthStart.getFullYear()) + 1 }, (_, i) => Math.min(2016, monthStart.getFullYear()) + i).map(year => <option key={year} value={year}>{year} 年</option>)}
-            </select>
-            <select aria-label="月份" value={monthStart.getMonth()} onChange={e => setMonth(new Date(monthStart.getFullYear(), Number(e.target.value), 1))} className="rounded-lg bg-slate-50 px-2 py-1.5 text-xs font-semibold">
-              {Array.from({ length: 12 }, (_, i) => <option key={i} value={i}>{i + 1} 月</option>)}
-            </select>
-          </div>
-          <button type="button" aria-label="下个月" onClick={() => setMonth(new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 1))} className="rounded-lg p-2 hover:bg-slate-100"><ChevronRight size={18} /></button>
-        </div>
-        <div className="mt-3 grid gap-6 sm:grid-cols-2" onMouseLeave={() => setHovered('')}>{calendar(0)}{calendar(1)}</div>
-      </div>
-      <div className="sticky bottom-0 flex items-center justify-between gap-3 border-t border-slate-100 bg-white px-5 py-4 sm:px-6">
-        <span role="status" className={`text-xs ${count > 370 ? 'text-red-500' : 'text-slate-400'}`}>{!draft.end ? '请选择结束日期' : count > 370 ? '最多选择 370 天' : `已选 ${count} 天（包含首尾）`}</span>
-        <div className="flex shrink-0 gap-2">
-          <button type="button" onClick={() => dialog.current?.close()} className="rounded-xl px-3 py-2.5 text-xs font-semibold text-slate-500 hover:bg-slate-100">取消</button>
-          <button type="button" disabled={!valid} onClick={() => { onChange(draft); dialog.current?.close(); }} className="flex items-center gap-1 rounded-xl bg-blue-600 px-4 py-2.5 text-xs font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-40"><Check size={14} />应用日期</button>
-        </div>
-      </div>
-    </dialog>
-  </>;
+  return <DateRangePicker value={value} onChange={onChange}
+    label={`统计日期 · ${dateLabel}`} testId="asset-flow-date-range" className="mt-3" maxDays={370}
+    quickPicks={[
+      { label: '今天', range: { start: today, end: today } },
+      { label: '昨天', range: { start: ymd(shiftDay(new Date(), -1)), end: ymd(shiftDay(new Date(), -1)) } },
+      { label: '业务周', range: getWeeklyFlowRange() },
+      { label: '近 7 天', range: getRecentFlowRange() },
+      { label: '近 30 天', range: { start: ymd(shiftDay(new Date(), -29)), end: today } },
+    ]} />;
 }
@@ -10,7 +10,7 @@ export function SummaryMetrics({
  return (
    <>
      {/* Header Summary - Ultra Compact */}
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mb-2">
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
        {/* Total Assets */}
        <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm flex items-center gap-2 cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md"
             onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', source: 'asset', title: '资产概览' })}>
@@ -66,7 +66,7 @@ export function SummaryMetrics({

      </div>

-      <div data-testid="asset-operation-ratio-strip" className="mb-3 rounded-2xl border border-slate-100 bg-white/85 px-3 py-2 shadow-sm">
+      <div data-testid="asset-operation-ratio-strip" className="rounded-xl border border-slate-100 bg-white/85 px-3 py-1 shadow-sm">
        <div className="flex items-center justify-between gap-3">
          <div className="shrink-0 text-[11px] font-black text-slate-400">运营概览</div>
          <div className="grid min-w-0 flex-1 grid-cols-2 divide-x divide-slate-100 text-center">
@@ -43,7 +43,7 @@ export function FaultAnalysisModal({ metric, onClose, source }: { metric: FaultO
  }, [metric, revision, source?.url]);
  const records = useMemo(() => data?.rows || [], [data]);
  const handlerLabels = useMemo(() => new Map(records.flatMap(row => row.handlers.map(h => [h.value, h.label] as const))), [records]);
-  const label = (d: FaultAnalysisDimension, value: string) => d === 'plate' ? value : d === 'faultStatus' ? FAULT_CLOSURE_LABELS[value] || value : d === 'handler' ? handlerLabels.get(value) || '未指派' : d === 'customer' ? data?.customerLabels[value] || '未关联客户' : getDimensionValueLabel(d, value);
+  const label = (d: FaultAnalysisDimension, value: string) => d === 'plate' ? value : d === 'faultStatus' ? FAULT_CLOSURE_LABELS[value] || value : d === 'handler' ? handlerLabels.get(value) || '未指派' : d === 'level' ? value || '未标注' : d === 'customer' ? data?.customerLabels[value] || '未关联客户' : getDimensionValueLabel(d, value);
  const options = available.map(key => {
    const otherFilters = { ...filters }; delete otherFilters[key];
    const counts = new Map<string, number>();
@@ -78,7 +78,7 @@ export function FaultAnalysisModal({ metric, onClose, source }: { metric: FaultO
      <div className="analysis-scroll">
        {error ? <div className="fault-message" role="alert">{error}<button onClick={() => setRevision(v => v + 1)}>重试</button></div> : !data ? <FaultAnalysisLoading /> : group ? <>
          <div className="analysis-table-tools"><button className="analysis-button" onClick={() => { setGroup(null); setLimit(50); }}><ArrowLeft size={14} />返回分组</button><span>{groupLabel(group)} · {details.length.toLocaleString()} 单</span><label className="fault-detail-search"><Search size={14} /><input aria-label="搜索故障明细" placeholder="搜索单号、车牌、描述、处置人" value={search} onChange={e => { setSearch(e.target.value); setLimit(50); }} /></label></div>
-          <div className="analysis-group-table is-merged fault-detail-table"><table><thead><tr>{['车牌 / 故障单号', '运维处置人', '故障描述', '状态', '提报时间', '解决时间', '运营城市', '客户 / 部门'].map(h => <th key={h}>{h}</th>)}</tr></thead><tbody>{details.slice(0, limit).map(row => <tr key={row.id}><td><strong>{row.plate || '未关联车辆'}</strong><small>{row.code || '未编号'}</small></td><td>{row.handlers.map(h => h.label).join('、') || '未指派'}</td><td>{row.description || '—'}</td><td>{row.status}</td><td>{row.reportedAt || '—'}</td><td>{row.archivedAt || '—'}</td><td>{row.city}</td><td>{row.customerLabel}<small>{row.department}</small></td></tr>)}</tbody></table></div>
+          <div className="analysis-group-table is-merged fault-detail-table"><table><thead><tr>{['车牌 / 故障单号', '故障程度', '运维处置人', '故障描述', '状态', '提报时间', '解决时间', '运营城市', '客户 / 部门'].map(h => <th key={h}>{h}</th>)}</tr></thead><tbody>{details.slice(0, limit).map(row => <tr key={row.id}><td><strong>{row.plate || '未关联车辆'}</strong><small>{row.code || '未编号'}</small></td><td>{row.level || '未标注'}</td><td>{row.handlers.map(h => h.label).join('、') || '未指派'}</td><td>{row.description || '—'}</td><td>{row.status}</td><td>{row.reportedAt || '—'}</td><td>{row.archivedAt || '—'}</td><td>{row.city}</td><td>{row.customerLabel}<small>{row.department}</small></td></tr>)}</tbody></table></div>
          {!details.length && <p className="fault-empty">没有符合条件的故障明细</p>}
          {details.length > limit && <button className="analysis-button fault-more" onClick={() => setLimit(v => v + 50)}>加载更多明细（已显示 {limit} / {details.length}）</button>}
        </> : <>
@@ -50,7 +50,7 @@ export default function FaultManagement(){
    </section>
    <div className="fd-today-stats"><span>实时统计</span><button onClick={()=>drill('今日新增','reported')}>今日新增 <b>{t?.todayReported}</b></button><button onClick={()=>drill('本日解决','closed')}>本日解决 <b>{t?.todayClosed}</b></button></div>
    <div className="fd-insight"><Info size={18}/><strong>{data.distributions.region[0]?`本期关注：${data.distributions.region[0].label}故障量最高，共 ${data.distributions.region[0].reported} 单；当前 ${t?.overdue} 单在办故障已逾期。`:'所选条件下暂无本期故障，可调整日期或筛选范围。'}</strong><span>按数量描述，不代表故障发生率。</span><button disabled={!t?.open} onClick={showAllOpen}>查看关联故障 <ArrowUpRight size={13}/></button></div>
-    {tab==='多维分析'&&<div className="fd-analysis-banner"><div><h2>组合维度，追溯故障</h2><p>支持运维处置人、车牌、工单状态、车型、区域、客户等 12 个维度，多选筛选与明细下钻。</p></div><button className="fd-query" onClick={()=>drill('本期故障多维分析')}>打开多维分析</button></div>}
+    {tab==='多维分析'&&<div className="fd-analysis-banner"><div><h2>组合维度，追溯故障</h2><p>支持运维处置人、车牌、故障程度、工单状态、车型、区域、客户等 13 个维度，多选筛选与明细下钻。</p></div><button className="fd-query" onClick={()=>drill('本期故障多维分析')}>打开多维分析</button></div>}
    <DashboardPanels data={data} drill={drill}/>
    <section className="fd-panel fd-focus" aria-label="重点故障跟进">
     <div className="fd-panel-title">
@@ -2,10 +2,10 @@ import type { AssetAnalysisDimension } from '../../../shared/assets/analytics';
 import type { FaultAnalysisRecord } from '../../../shared/assets/faults';
 import { DIMENSION_LABELS, getAvailableDimensions } from '../analytics-model';

-export type FaultAnalysisDimension = AssetAnalysisDimension | 'handler' | 'plate' | 'faultStatus';
+export type FaultAnalysisDimension = AssetAnalysisDimension | 'handler' | 'plate' | 'faultStatus' | 'level';
 export type FaultAnalysisFilters = Partial<Record<FaultAnalysisDimension, string[]>>;
-export const FAULT_ANALYSIS_DIMENSIONS: FaultAnalysisDimension[] = getAvailableDimensions('assets').flatMap(d => d === 'type' ? [d, 'handler', 'plate', 'faultStatus'] : [d]);
-export const FAULT_ANALYSIS_LABELS = { ...DIMENSION_LABELS, handler: '运维处置人', plate: '车牌', faultStatus: '故障工单状态' };
+export const FAULT_ANALYSIS_DIMENSIONS: FaultAnalysisDimension[] = getAvailableDimensions('assets').flatMap(d => d === 'type' ? [d, 'handler', 'plate', 'faultStatus', 'level'] : [d]);
+export const FAULT_ANALYSIS_LABELS = { ...DIMENSION_LABELS, handler: '运维处置人', plate: '车牌', faultStatus: '故障工单状态', level: '故障程度' };
 export const FAULT_CLOSURE_LABELS: Record<string, string> = { closed: '已闭环', unclosed: '未闭环' };
 export interface FaultAnalysisGroup {
  key: string; values: Partial<Record<FaultAnalysisDimension, string>>;
@@ -14,6 +14,7 @@ export interface FaultAnalysisGroup {
 export function faultDimensionValues(row: FaultAnalysisRecord, dimension: FaultAnalysisDimension): string[] {
  if (dimension === 'plate') return [row.plate?.trim() || '未关联车辆'];
  if (dimension === 'faultStatus') return [row.status === '已归档' ? 'closed' : 'unclosed'];
+  if (dimension === 'level') return [row.level?.trim() || '未标注'];
  return dimension === 'handler' ? [...new Set(row.handlers.length ? row.handlers.map(h => h.value) : ['unassigned'])] : [row.cell[dimension]];
 }
 export function filterFaultRecords(rows: FaultAnalysisRecord[], filters: FaultAnalysisFilters = {}): FaultAnalysisRecord[] {
@@ -69,18 +69,17 @@ export function AssetHistorySection({ subject, onSubjects }: { subject: string |
    <div className="asset-history-toolbar">
      {mode === 'monthly' && <HistorySelect label="历史年份" value={String(year)} options={(data?.years || [year]).map(y => ({ value: String(y), label: `${y}年` }))} onChange={value => { setYear(Number(value)); setDetails(null); }} />}
      {data && <HistorySelect label="统计期间" value={selected || ''} onChange={value => { setSelected(value); setDetails(null); }} options={data.points.map(p => ({ value: p.period, label: p.label, detail: p.state === 'RECONSTRUCTED' ? '估算' : p.state === 'LIVE' ? '实时' : p.state === 'ARCHIVED' ? '归档' : p.state === 'FUTURE' ? '未来' : p.state === 'MISSING' ? '缺失' : HISTORY_STATE_LABELS[p.state] }))} />}
-      <span title="每月最后一天北京时间17:00采集；年度复用12月快照">月末 17:00</span>
+      <span className="asset-history-cutoff" title="每月最后一天北京时间17:00采集；年度复用12月快照">月末 17:00</span>
      <button type="button" className="asset-history-refresh" aria-label="刷新资产历史趋势" disabled={loading} onClick={() => setRetry(x => x + 1)}><RefreshCw size={15} /></button>
    </div>
    </div>
    {loading && !data ? <p className="asset-history-empty" role="status">正在加载资产历史趋势…</p> : !data ? <p className="asset-history-empty" role="alert">{error || '暂无可用数据'} <button type="button" onClick={() => setRetry(x => x + 1)}>重试</button></p> : <>
      {error && <p className="asset-history-warning" role="alert">{error} · 保留上次查询结果 <button type="button" onClick={() => setRetry(x => x + 1)}>重试</button></p>}
-      <p className="asset-history-unit">数量（台）</p>
      <div className="asset-history-chart" role="img" aria-label="运营数与库存数堆叠柱，资产总数折线；精确数值和缺失状态可通过上方统计期间选择框查看">
        <ResponsiveContainer width="100%" height="100%" minWidth={0} initialDimension={{ width: 480, height: 200 }}>
-          <ComposedChart data={chart} margin={{ top: 10, right: 14, bottom: 0, left: 0 }} onClick={state => { const p = chart.find(p => p.label === String(state?.activeLabel)); if (p) setSelected(p.period); }}>
+          <ComposedChart data={chart} margin={{ top: 18, right: 10, bottom: 0, left: 0 }} onClick={state => { const p = chart.find(p => p.label === String(state?.activeLabel)); if (p) setSelected(p.period); }}>
            <CartesianGrid stroke="#e9eff7" vertical={false} /><XAxis dataKey="label" tick={{ fontSize: 10, fill: '#64748b' }} axisLine={{ stroke: '#dbe4ef' }} tickLine={false} interval={mode === 'monthly' ? 0 : 'preserveStartEnd'} minTickGap={4} />
-            <YAxis allowDecimals={false} width={44} tick={{ fontSize: 11, fill: '#64748b' }} axisLine={false} tickLine={false} />
+            <YAxis allowDecimals={false} tickCount={4} width={36} tick={{ fontSize: 11, fill: '#64748b' }} axisLine={false} tickLine={false} />
            <Tooltip content={({ active, payload }) => {
              const item = payload?.[0]?.payload as HistoryPoint | undefined;
              const values = item && displayHistoryCounts(item);
@@ -92,16 +91,19 @@ export function AssetHistorySection({ subject, onSubjects }: { subject: string |
          </ComposedChart>
        </ResponsiveContainer>
      </div>
-      <div className="asset-history-legend" aria-hidden="true"><span><i className="operating" />运营数</span><span><i className="inventory" />库存数</span><span><i className="total" />资产总数</span></div>
+      <div className="asset-history-legend" aria-hidden="true"><span><i className="operating" />运营数</span><span><i className="inventory" />库存数</span><span><i className="total" />资产总数</span><span className="asset-history-unit">台</span></div>
      {point && <div className="asset-history-selected" aria-live="polite">
-        <div className="asset-history-selected-heading"><strong>{mode === 'annual' || point.state === 'LIVE' ? point.label : `${point.label}末`}</strong><span>{HISTORY_STATE_LABELS[point.state]}</span>{point.asOf && <time dateTime={point.asOf} aria-label={`截至 ${historyTime(point.asOf)}`}>{historyTime(point.asOf)}</time>}</div>
-        <div className="asset-history-counts">{([['total', '总数'], ['inventory', '库存'], ['operating', '运营']] as const).map(([key, label]) => <div key={key}><span aria-label={`${label}（台）`}>{label}（台）</span><strong>{displayHistoryCounts(point)?.[key]?.toLocaleString() ?? (point.reconstruction && key === 'total' ? '待核实' : '—')}</strong></div>)}</div>
+        <div className="asset-history-selected-heading"><strong>{mode === 'annual' || point.state === 'LIVE' ? point.label : `${point.label}末`}</strong><span>{HISTORY_STATE_LABELS[point.state]}</span></div>
+        <div className="asset-history-counts">{([['total', '总数'], ['inventory', '库存'], ['operating', '运营']] as const).map(([key, label]) => <div key={key}><span aria-label={`${label}（台）`}>{label}</span><strong>{displayHistoryCounts(point)?.[key]?.toLocaleString() ?? (point.reconstruction && key === 'total' ? '待核实' : '—')}</strong></div>)}</div>
        {hasComparison ? <div className="asset-history-comparison"><span>{point.comparisonLabel}</span><div>{(['total', 'inventory', 'operating'] as const).map(key => {
          const difference = displayHistoryDifference(point, key);
          return <span key={key} className={difference != null && difference > 0 ? 'asset-history-increase' : difference != null && difference < 0 ? 'asset-history-decrease' : ''}>{difference != null ? signedCount(difference) : '—'}</span>;
-        })}</div></div> : <p>{point.comparisonLabel}</p>}
+        })}</div></div> : null}
+        <div className="asset-history-selected-footer">
+          <div className="asset-history-point-meta">{point.asOf && <time dateTime={point.asOf} aria-label={`截至 ${historyTime(point.asOf)}`}>{historyTime(point.asOf)}</time>}{!hasComparison && <span>{point.comparisonLabel}</span>}</div>
+          {mode === 'monthly' && <button type="button" className="asset-history-detail-button" disabled={!point.detailAvailable} onClick={() => setDetails(point)}><span>{point.reconstruction ? '查看月度回溯明细' : '查看月度明细'}</span><ChevronRight size={16} aria-hidden="true" /></button>}
+        </div>
      </div>}
-      {point && mode === 'monthly' && <button type="button" className="asset-history-detail-button" disabled={!point.detailAvailable} onClick={() => setDetails(point)}><span>{point.reconstruction ? '查看月度回溯明细' : '查看月度明细'}</span><ChevronRight size={18} /></button>}
      <p className="asset-history-footnote">历史库存状态快照缺失，核对中，暂不展示。</p>
    </>}
    {details && <HistoryDetailsDialog point={details} subject={subject} close={closeDetails} />}
@@ -1,41 +1,43 @@
-.asset-history { --history-blue:#1559e8; margin:8px 0 16px; padding:16px; border:1px solid #e6edf5; border-radius:20px; background:#fff; color:#142b4e; box-shadow:0 5px 24px rgb(22 53 90 / 3%); }
-.asset-history button,.asset-history-dialog button { cursor:pointer; }
+.asset-history { --history-blue:#1559e8; --history-ink:#142b4e; --history-muted:#62748b; --history-border:#e3ebf5; margin:0; padding:16px; border:1px solid var(--history-border); border-radius:16px; background:#fff; color:var(--history-ink); box-shadow:0 2px 12px rgb(22 53 90 / 3%); }
+.asset-history button,.asset-history-dialog button { cursor:pointer; touch-action:manipulation; }
 .asset-history button:disabled,.asset-history-dialog button:disabled { cursor:default; opacity:.45; }
-.asset-history button:focus-visible,.asset-history select:focus-visible,.asset-history-dialog :is(button,input,select):focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
-.asset-history-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
-.asset-history-header h2 { margin:0; font-size:20px; font-weight:750; letter-spacing:-.5px; }
-.asset-history-modes { display:flex; gap:2px; background:#eef3fa; border:1px solid #e7edf6; border-radius:11px; padding:3px; }
-.asset-history-modes button { padding:7px 20px; min-height:34px; border-radius:8px; font-size:13px; font-weight:600; transition:background .15s,color .15s,box-shadow .15s; color:#64748b; }
-.asset-history-modes button[aria-pressed=true] { background:#fff; color:#1559e8; box-shadow:0 1px 4px #193c6920, inset 0 0 0 1px #dce7f5; }
-.asset-history-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 4px; font-size:12px; color:#64748b; }
+.asset-history button:focus-visible,.asset-history-dialog :is(button,input,select):focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
+.asset-history-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
+.asset-history-header h2 { margin:0; font-size:18px; font-weight:700; letter-spacing:-.4px; }
+.asset-history-modes { display:flex; gap:2px; background:#f0f4f9; border-radius:10px; padding:0 3px; }
+.asset-history-modes button { position:relative; isolation:isolate; min-width:52px; min-height:44px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--history-muted); transition:color .16s; }
+.asset-history-modes button::before { content:""; position:absolute; inset:5px 0; z-index:-1; border-radius:7px; transition:background .16s,box-shadow .16s; }
+.asset-history-modes button[aria-pressed=true] { color:var(--history-blue); }
+.asset-history-modes button[aria-pressed=true]::before { background:#fff; box-shadow:0 1px 4px #193c691a,0 0 0 1px #e0e8f3; }
+.asset-history-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 0; color:var(--history-muted); font-size:12px; }
 .asset-history-toolbar>span { margin-left:auto; }
-.asset-history-toolbar .asset-history-annual-note { margin-left:0; margin-right:auto; }
-.asset-history-refresh { display:grid; place-items:center; padding:8px; border-radius:8px; color:#7c8da5; transition:background .15s,color .15s; }
+.asset-history-refresh { display:grid; place-items:center; min-width:44px; min-height:44px; padding:8px; border-radius:8px; color:var(--history-muted); transition:background .16s,color .16s; }
 .asset-history-warning { margin:8px 0; font-size:12px; line-height:1.7; color:#74613a; background:#fff9ec; padding:9px 12px; border-radius:9px; }
-.asset-history-warning button,.asset-history-empty button { color:#1559e8; text-decoration:underline; padding:6px; }
-.asset-history-unit { font-size:12px; color:#64748b; margin:6px 0 0; }
-.asset-history-chart { height:200px; width:100%; min-width:0; }
-.asset-history-tooltip { background:#fff; border:1px solid #dce5ef; border-radius:10px; padding:10px 12px; box-shadow:0 4px 16px #142b4e15; font-size:12px; }
+.asset-history-warning button,.asset-history-empty button { color:var(--history-blue); text-decoration:underline; padding:6px; }
+.asset-history-chart { height:180px; width:100%; min-width:0; }
+.asset-history-tooltip { background:#fff; border:1px solid var(--history-border); border-radius:10px; padding:10px 12px; box-shadow:0 4px 16px #142b4e15; font-size:12px; }
 .asset-history-tooltip p { margin-top:4px; }
-.asset-history-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:22px; color:#64748b; font-size:12px; margin:6px 0; }
-.asset-history-legend span { display:flex; align-items:center; gap:7px; }
-.asset-history-legend i { display:inline-block; height:11px; width:11px; border-radius:2px; }
+.asset-history-legend { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px; color:var(--history-muted); font-size:12px; line-height:18px; margin:2px 0 8px; }
+.asset-history-legend span { display:flex; align-items:center; gap:6px; }
+.asset-history-legend i { display:inline-block; height:8px; width:8px; border-radius:2px; }
 .asset-history-legend .operating { background:#347df5; }.asset-history-legend .inventory { background:#9ed1fa; }
-.asset-history-legend .total { width:20px; height:2px; background:#132e57; }
-.asset-history-selected { margin-top:8px; display:grid; grid-template-columns:90px minmax(0,1fr); align-items:center; gap:0 10px; padding:10px 14px; background:linear-gradient(115deg,#f3f7fe,#edf5ff); border:1px solid #e7effb; border-radius:12px; }
+.asset-history-legend .total { position:relative; width:16px; height:2px; background:#132e57; }
+.asset-history-legend .total::after { content:""; position:absolute; top:-2px; left:6px; width:6px; height:6px; border:2px solid #132e57; border-radius:50%; background:white; }
+.asset-history-legend .asset-history-unit { padding-left:8px; border-left:1px solid var(--history-border); }
+.asset-history-selected { display:grid; grid-template-columns:94px minmax(0,1fr); align-items:center; gap:0 8px; padding:10px 12px 0; background:#f2f7ff; border:1px solid #e4edfa; border-radius:10px; }
 .asset-history-selected-heading { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
-.asset-history-selected-heading>strong { color:#1559e8; font-size:17px; font-weight:750; }
-.asset-history-selected-heading>span,.asset-history-selected-heading>time { color:#64748b; font-size:11px; }
+.asset-history-selected-heading>strong { color:var(--history-blue); font-size:18px; line-height:24px; font-weight:700; }
+.asset-history-selected-heading>span { color:var(--history-muted); font-size:12px; line-height:18px; }
 .asset-history-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
-.asset-history-counts>div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; border-right:1px solid #d4e2f4; }
-.asset-history-counts>div:last-child { border:0; }
-.asset-history-counts>div>span { color:#64748b; font-size:12px; }
-.asset-history-counts strong { font-size:23px; font-weight:750; line-height:1.2; font-variant-numeric:tabular-nums; }
+.asset-history-counts>div { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; border-left:1px solid #dce7f6; }
+.asset-history-counts>div>span { color:var(--history-muted); font-size:12px; line-height:18px; }
+.asset-history-counts strong { font-size:24px; font-weight:700; line-height:28px; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
 .asset-history-increase { color:#bf2f30; }.asset-history-decrease { color:#14864a; }
-.asset-history-selected>p { grid-column:1 / -1; color:#64748b; font-size:11px; text-align:center; padding-top:6px; }
-.asset-history-detail-button { display:flex; width:100%; align-items:center; justify-content:space-between; min-height:44px; padding:8px 12px; margin-top:8px; border:1px solid #dce8f8; border-radius:10px; background:#f7faff; color:#18385d; font-size:14px; font-weight:600; }
-.asset-history-footnote { display:flex; align-items:center; flex-wrap:wrap; gap:6px; color:#64748b; font-size:11px; margin-top:8px; }
-.asset-history-empty { padding:32px 12px; text-align:center; font-size:13px; color:#64748b; }
+.asset-history-selected-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; border-top:1px solid #e0eaf8; min-height:44px; }
+.asset-history-point-meta { display:flex; flex-wrap:wrap; gap:2px 12px; color:var(--history-muted); font-size:12px; line-height:18px; }
+.asset-history-detail-button { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:4px; min-height:44px; padding:8px 0 8px 8px; color:var(--history-blue); font-size:12px; font-weight:600; border-radius:6px; transition:color .16s,background .16s; }
+.asset-history-footnote { color:var(--history-muted); font-size:12px; line-height:18px; margin-top:8px; }
+.asset-history-empty { padding:32px 12px; text-align:center; font-size:13px; color:var(--history-muted); }
 .asset-history-overlay { position:fixed; inset:0; z-index:120; background:#0c1e3b66; display:flex; justify-content:center; align-items:center; padding:24px; }
 .asset-history-dialog { display:flex; flex-direction:column; width:min(980px,100%); max-height:88dvh; border-radius:18px; background:white; color:#183454; box-shadow:0 24px 64px #142b4e30; overflow:hidden; outline:none; }
 .asset-history-dialog>header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid #e6edf5; }
@@ -58,12 +60,12 @@
 .asset-history-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 22px; border-top:1px solid #e6edf5; color:#64748b; font-size:12px; }
 .asset-history-dialog footer>div { display:flex; gap:8px; }.asset-history-dialog footer button { padding:9px; border:1px solid #dce5f0; border-radius:7px; }
@media(max-width:640px) {
-  .asset-history { padding:12px; border-radius:16px; }
-  .asset-history-header h2 { font-size:18px; }.asset-history-modes button { padding:7px 15px; min-height:38px; }
-  .asset-history-toolbar { gap:6px; }.asset-history-toolbar>span { font-size:10px; }
-  .asset-history-chart { height:170px; }
-  .asset-history-selected { grid-template-columns:72px minmax(0,1fr); gap:0 6px; padding:8px 10px; }.asset-history-selected-heading { gap:2px; }.asset-history-selected-heading>span,.asset-history-selected-heading>time { font-size:10px; }
-  .asset-history-counts strong { font-size:21px; }.asset-history-counts>div>span { font-size:11px; }
+  .asset-history { padding:12px; border-radius:14px; }
+  .asset-history-header h2 { font-size:17px; }
+  .asset-history-chart { height:140px; }
+  .asset-history-selected { grid-template-columns:84px minmax(0,1fr); padding:8px 10px 0; gap:0 6px; }
+  .asset-history-counts strong { font-size:22px; line-height:26px; }
+  .asset-history-point-meta { flex-direction:column; gap:0; }
  .asset-history-overlay { padding:10px; }.asset-history-dialog { max-height:94dvh; border-radius:14px; }
  .asset-history-dialog>header { padding:14px; }.asset-history-dialog h2 { font-size:16px; }.asset-history-detail-tools { padding:12px 14px; }
  .asset-history-detail-note { padding:10px 14px; }.asset-history-dialog :is(input,select) { font-size:16px; }.asset-history-dialog footer { padding:12px 14px; }
@@ -79,31 +81,18 @@
 }

@media(min-width:900px) {
-  .asset-history-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; }
+  .asset-history-controls { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
  .asset-history-header { flex:1; gap:16px; }
  .asset-history-toolbar { margin:0; }
-  .asset-history-selected { display:grid; grid-template-columns:minmax(150px,1fr) 3fr; align-items:center; gap:0 18px; }
-  .asset-history-selected-heading { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 12px; margin:0; }
-  .asset-history-selected-heading>strong { grid-row:span 2; }
-  .asset-history-selected-heading>span,.asset-history-selected-heading>time { grid-column:2; }
-  .asset-history-selected>p { grid-column:1 / -1; }
+  .asset-history-selected { grid-template-columns:minmax(150px,1fr) 3fr; gap:0 16px; }
+  .asset-history-selected-heading { flex-direction:row; align-items:center; gap:12px; }
 }
-@media(max-width:640px) {
-  .asset-history-modes button,.asset-history-refresh { min-height:44px; }
-  .asset-history-refresh { min-width:44px; }
-  .asset-history-toolbar { gap:4px; }
-}
-
-.asset-history-comparison { grid-column:1 / -1; display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; align-items:center; margin-top:6px; padding-top:6px; border-top:1px solid #d4e2f4; font-size:11px; color:#64748b; }
+.asset-history-comparison { grid-column:1/-1; display:grid; grid-template-columns:94px minmax(0,1fr); gap:8px; align-items:center; margin-top:8px; padding-top:6px; border-top:1px solid #dce7f6; font-size:12px; color:var(--history-muted); }
 .asset-history-comparison>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:center; font-size:13px; font-weight:600; }
-@media(min-width:900px) {
-  .asset-history-comparison { grid-template-columns:minmax(150px,1fr) 3fr; gap:18px; }
-}
-@media(max-width:640px) {
-  .asset-history-comparison { grid-template-columns:72px minmax(0,1fr); gap:6px; }
-}
+@media(min-width:900px) { .asset-history-comparison { grid-template-columns:minmax(150px,1fr) 3fr; gap:16px; } }
+@media(max-width:640px) { .asset-history-comparison { grid-template-columns:84px minmax(0,1fr); gap:6px; } }

-.asset-history-select { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; min-width:76px; min-height:36px; padding:7px 11px; border:1px solid #dce5f1; border-radius:9px; background:#fff; color:#254365; font-size:13px; font-weight:550; box-shadow:0 1px 2px #173c6310; transition:border-color .15s,box-shadow .15s; }
+.asset-history-select { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; min-width:76px; min-height:44px; padding:7px 11px; border:1px solid #dce5f1; border-radius:8px; background:#fff; color:#254365; font-size:13px; font-weight:550; box-shadow:0 1px 2px #173c6310; transition:border-color .15s,box-shadow .15s; }
 .asset-history-select[data-state=open] { border-color:#8fb4f2; box-shadow:0 0 0 3px #dbeaff80; }
 .asset-history-select-icon { color:#8b9db5; display:flex; transition:transform .15s; }
 .asset-history-select[data-state=open] .asset-history-select-icon { transform:rotate(180deg); }
@@ -115,17 +104,19 @@
 .asset-history-option-detail { margin-left:auto; color:#7b8da5; font-size:11px; font-weight:400; }
 .asset-history-option-check { position:absolute; right:9px; display:flex; color:#2563eb; }
 .asset-history-select-scroll { display:flex; align-items:center; justify-content:center; height:24px; color:#7b8da5; }
-.asset-history-detail-button>svg { padding:3px; width:24px; height:24px; border-radius:7px; background:#eaf2ff; color:#527eb7; }
+.asset-history-detail-button>svg { flex-shrink:0; }
@media(hover:hover) {
-  .asset-history-modes button:not([aria-pressed=true]):hover { color:#1559e8; background:#e5edf9; }
+  .asset-history-modes button:not([aria-pressed=true]):hover::before { background:#e5edf9; }
  .asset-history-select:hover { border-color:#adc5e8; }
  .asset-history-refresh:hover { color:#2563eb; background:#eef5ff; }
-  .asset-history-detail-button:hover { background:#eef5ff; border-color:#bcd3f3; }
+  .asset-history-detail-button:hover { color:#103eaa; background:#e9f1ff; }
 }
@media(max-width:640px) {
  .asset-history-select { min-height:44px; padding:8px 10px; font-size:12px; gap:10px; }
  .asset-history-select-option { min-height:44px; }
 }
@media(prefers-reduced-motion:reduce) {
-  .asset-history-modes button,.asset-history-select,.asset-history-select-icon,.asset-history-refresh { transition:none; }
+  .asset-history-modes button,.asset-history-modes button::before,.asset-history-select,.asset-history-select-icon,.asset-history-refresh,.asset-history-detail-button { transition:none; }
 }
+
+.asset-history :is(.asset-history-select,.asset-history-refresh,.asset-history-detail-button):active { background:#e6effe; }
@@ -1,11 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ChevronRight, Fuel, Plug, TrendingUp, Truck } from 'lucide-react';
+import { Check, ChevronRight, Fuel, Layers, Plug, Search, TrendingUp, Truck, X } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip, ReferenceLine } from 'recharts';
 import TrendBadge from './TrendBadge';
 import { fetchHydrogenDaily } from './api';
 import type { CustomerType, DateQuickPick, HydrogenDailyRow } from './types';
 import {
+  filterHydrogenRows,
  getQuickRange,
  getRangeModeLabel,
  normalizeRange,
@@ -13,12 +14,14 @@ import {
  type RangeMode,
 } from './hydrogen-daily/model';
 import DailyRangeControls from './daily-range/DailyRangeControls';
+import { DateRangePicker } from '../../components/ui/DateRangePicker';
 import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

 export default function HydrogenDaily() {
  const [pick, setPick] = useState<RangeMode>('last15');
  const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
-  const [customer, setCustomer] = useState<CustomerType>('lingniu');
+  const [customer, setCustomer] = useState<CustomerType>('all');
+  const [stationSearch, setStationSearch] = useState('');
  const [expanded, setExpanded] = useState<Set<string>>(new Set());
  const [rows, setRows] = useState<HydrogenDailyRow[] | null>(null);
  const [error, setError] = useState<string | null>(null);
@@ -28,6 +31,7 @@ export default function HydrogenDaily() {
  useEffect(() => {
    let cancelled = false;
    setError(null);
+    setRows(null);
    const query = pick === 'custom'
      ? { startDate: effectiveRange.start, endDate: effectiveRange.end }
      : { range: pick };
@@ -37,6 +41,8 @@ export default function HydrogenDaily() {
    return () => { cancelled = true; };
  }, [pick, customer, effectiveRange.start, effectiveRange.end]);

+  const filteredRows = useMemo(() => filterHydrogenRows(rows, stationSearch), [rows, stationSearch]);
+
  const {
    trendData,
    totalKg,
@@ -46,7 +52,7 @@ export default function HydrogenDaily() {
    peakDay,
    lowDay,
    zeroDays,
-  } = useMemo(() => summarizeHydrogenRows(rows), [rows]);
+  } = useMemo(() => summarizeHydrogenRows(filteredRows), [filteredRows]);
  const scopeLabel = getRangeModeLabel(pick);
  const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;

@@ -77,38 +83,87 @@ export default function HydrogenDaily() {
        onCustomPick={() => setPick('custom')}
        onDateRangeChange={updateDateRange}
        onCustomerChange={setCustomer}
-      />
+        dateControl={
+          <DateRangePicker
+            value={effectiveRange}
+            label="加氢日期"
+            testId="hydrogen-date-range"
+            quickPicks={([
+              { id: 'thisWeek', label: '本周' },
+              { id: 'thisMonth', label: '本月' },
+              { id: 'last15', label: '近 15 天' },
+            ] as const).map(option => ({ label: option.label, range: getQuickRange(option.id) }))}
+            onChange={range => {
+              setDateRange(range);
+              const matching = (['thisWeek', 'thisMonth', 'last15'] as const).find(option => {
+                const preset = getQuickRange(option);
+                return preset.start === range.start && preset.end === range.end;
+              });
+              setPick(matching ?? 'custom');
+            }}
+          />
+        }
+      >
+        <div className="mt-3 space-y-3">
+          <fieldset>
+            <legend className="mb-2 px-1 text-[11px] font-semibold text-slate-500">车辆归属</legend>
+            <div className="grid grid-cols-3 gap-2">
+              {([
+                { value: 'all', label: '全部车辆', description: '内外部汇总', icon: Layers },
+                { value: 'lingniu', label: '内部车辆', description: '羚牛车辆', icon: Truck },
+                { value: 'external', label: '外部车辆', description: '佛山站外部订单', icon: Truck },
+              ] as const).map(option => {
+                const Icon = option.icon;
+                return (
+                  <label key={option.value} className="relative min-w-0 cursor-pointer">
+                    <input type="radio" name="hydrogen-customer" aria-label={option.label} value={option.value} checked={customer === option.value}
+                      onChange={() => setCustomer(option.value)} className="peer sr-only" />
+                    <span className="flex h-full min-h-[94px] flex-col gap-2 rounded-2xl border border-slate-200 bg-white p-3 transition hover:border-blue-300 hover:bg-blue-50/40 peer-checked:border-blue-400 peer-checked:bg-blue-50/70 peer-checked:shadow-sm peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-500">
+                      <span className="flex items-center justify-between">
+                        <Icon size={17} aria-hidden="true" className={customer === option.value ? 'text-blue-600' : 'text-slate-400'} />
+                        <span aria-hidden="true" className={`flex h-4 w-4 items-center justify-center rounded-full ${customer === option.value ? 'bg-blue-600 text-white' : 'border border-slate-200 bg-white'}`}>
+                          {customer === option.value && <Check size={11} strokeWidth={3} />}
+                        </span>
+                      </span>
+                      <span className={`text-[12px] font-bold ${customer === option.value ? 'text-blue-700' : 'text-slate-700'}`}>{option.label}</span>
+                      <span className="text-[10px] leading-tight text-slate-500">{option.description}</span>
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+          </fieldset>
+          <div className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2 focus-within:ring-2 focus-within:ring-blue-200">
+            <label htmlFor="hydrogen-station-search" className="block text-[10px] font-black text-slate-400">搜索加氢站</label>
+            <div className="mt-1 flex h-7 items-center gap-2">
+              <Search size={15} className="shrink-0 text-slate-400" aria-hidden="true" />
+              <input
+                id="hydrogen-station-search"
+                type="search"
+                value={stationSearch}
+                onChange={event => setStationSearch(event.target.value)}
+                placeholder="输入加氢站名称，例如：佛山"
+                className="min-w-0 flex-1 bg-transparent text-[12px] font-bold text-slate-800 outline-none placeholder:font-normal placeholder:text-slate-400 [&::-webkit-search-cancel-button]:hidden"
+              />
+              {stationSearch && (
+                <button type="button" aria-label="清除加氢站搜索" onClick={() => setStationSearch('')} className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-200 hover:text-slate-700">
+                  <X size={14} />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </DailyRangeControls>

      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <MetricTile icon={Fuel} label={`${scopeLabel}加氢量`} value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="Kg" helper={rangeText} />
-        <MetricTile icon={Truck} label="车辆归属" value={customer === 'external' ? '外部' : '羚牛'} helper="当前筛选口径" tone="emerald" />
+        <MetricTile icon={Truck} label="车辆归属" value={{ all: '全部', lingniu: '内部', external: '外部' }[customer]} helper={customer === 'external' ? '佛山南海羚牛加氢站 · 未关联车辆的订单' : '当前筛选口径'} tone="emerald" />
        <MetricTile icon={TrendingUp} label="有效天数" value={`${activeDays}/${rows?.length ?? 0}`} helper={`日均 ${avgKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`} tone="amber" />
-        <MetricTile icon={Plug} label="涉及加氢站" value={stationCount} unit="站" helper="按明细站点去重" tone="slate" />
+        <MetricTile icon={Plug} label="涉及加氢站" value={stationCount} unit="站" helper={stationSearch.trim() ? `搜索：${stationSearch.trim()}` : '按明细站点去重'} tone="slate" />
      </div>

-      {/* 外部车辆：新系统数据还没准备好 */}
-      {customer === 'external' && rows !== null && totalKg === 0 && (
-        <motion.div
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
-        >
-          <div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
-            <Plug size={22} className="text-blue-500" />
-            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
-            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
-          </div>
-          <div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
-          <div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
-            新系统的外部车辆加氢数据还在准备中
-            <br />
-            上线后此处将展示完整明细
-          </div>
-        </motion.div>
-      )}
-
-      {/* 时段加氢量柱图（外部车辆无数据时不渲染） */}
-      {!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
+      {/* 时段加氢量柱图 */}
+      {!error && trendData.length > 0 && totalKg > 0 && (
        <SurfaceCard>
          <div className="flex items-center justify-between px-4 pt-4 mb-2">
            <span className="text-sm font-bold text-slate-700">每日加氢量</span>
@@ -184,8 +239,7 @@ export default function HydrogenDaily() {
        </SurfaceCard>
      )}

-      {/* 表格（外部车辆 + 全 0 时不渲染，由上方友好空状态替代） */}
-      {!(customer === 'external' && rows !== null && totalKg === 0) && (
+      {/* 日明细：加载失败、无订单与正常数据分别展示。 */}
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        {/* 表头 */}
        <div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
@@ -204,11 +258,11 @@ export default function HydrogenDaily() {
        {/* 主行 + 子行 */}
        {error ? (
          <div className="p-3"><ErrorState message={error} /></div>
-        ) : rows === null ? (
+        ) : filteredRows === null ? (
          <div className="p-3"><LoadingState label="正在加载加氢明细" /></div>
-        ) : rows.length === 0 ? (
-          <div className="p-3"><EmptyState title="暂无加氢数据" description="请切换时间范围或车辆归属" /></div>
-        ) : rows.map(r => {
+        ) : filteredRows.length === 0 || totalKg === 0 ? (
+          <div className="p-3"><EmptyState title="所选时段暂无加氢数据" description={stationSearch.trim() ? '当前时段和车辆归属下没有匹配的加氢站数据，请调整关键词或清除搜索' : customer === 'external' ? '佛山南海羚牛加氢站在该时段没有未关联车辆的加氢订单，请切换时间范围' : '请切换时间范围或车辆归属'} /></div>
+        ) : filteredRows.map(r => {
          const open = expanded.has(r.date);
          const isAbnormal = Math.abs(r.chainPct) >= 0.3;
          const abnormalBg = isAbnormal
@@ -270,7 +324,6 @@ export default function HydrogenDaily() {
          );
        })}
      </div>
-      )}

    </div>
  );
@@ -1,4 +1,5 @@
 import { Truck } from 'lucide-react';
+import type { ReactNode } from 'react';
 import { SurfaceCard } from '../../../components/ui/surface';
 import type { CustomerType, DateQuickPick } from '../types';
 import { QUICK_PICK_OPTIONS, type RangeMode } from './model';
@@ -11,6 +12,8 @@ interface DailyRangeControlsProps {
  onCustomPick: () => void;
  onDateRangeChange: (field: 'start' | 'end', value: string) => void;
  onCustomerChange: (customer: CustomerType) => void;
+  children?: ReactNode;
+  dateControl?: ReactNode;
 }

 export default function DailyRangeControls({
@@ -21,9 +24,12 @@ export default function DailyRangeControls({
  onCustomPick,
  onDateRangeChange,
  onCustomerChange,
+  children,
+  dateControl,
 }: DailyRangeControlsProps) {
  return (
    <SurfaceCard className="p-2 md:p-3">
+      {dateControl ?? <>
      <div className="flex items-center gap-2 overflow-x-auto pb-1">
        {QUICK_PICK_OPTIONS.map(opt => (
          <button
@@ -73,7 +79,9 @@ export default function DailyRangeControls({
        </label>
      </div>

-      <div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
+      </>}
+
+      {children ?? <div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
        {(['lingniu', 'external'] as const).map(option => (
          <button
            key={option}
@@ -86,7 +94,7 @@ export default function DailyRangeControls({
            {option === 'external' ? '外部车辆' : '羚牛车辆'}
          </button>
        ))}
-      </div>
+      </div>}
    </SurfaceCard>
  );
 }
@@ -2,6 +2,7 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 import type { HydrogenDailyRow } from '../types.js';
 import {
+  filterHydrogenRows,
  getQuickRange,
  getRangeModeLabel,
  normalizeRange,
@@ -82,3 +83,53 @@ test('空数据保持零值且没有峰谷日', () => {
    zeroDays: 0,
  });
 });
+
+const searchRows: HydrogenDailyRow[] = [
+  { date: '2026-09-17', totalKg: 50, chainPct: -0.75, customerType: 'all', stations: [
+    { name: '嘉兴站', kg: 50, pricePerKg: 30, chainPct: 0 },
+  ] },
+  { date: '2026-09-16', totalKg: 200, chainPct: 1, customerType: 'all', stations: [
+    { name: '佛山南海羚牛加氢站', kg: 30, pricePerKg: 38, chainPct: 2 },
+    { name: '佛山豪汇石油加氢站', kg: 10, pricePerKg: 35, chainPct: 0 },
+    { name: '嘉兴站', kg: 160, pricePerKg: 30, chainPct: 1 },
+  ] },
+  { date: '2026-09-15', totalKg: 100, chainPct: 0, customerType: 'all', stations: [
+    { name: '佛山南海羚牛加氢站', kg: 10, pricePerKg: 38, chainPct: 0 },
+    { name: '嘉兴站', kg: 90, pricePerKg: 30, chainPct: 0 },
+  ] },
+];
+
+test('站名搜索同步更新日明细、总量、趋势和环比，保留完整日期及原始数据', () => {
+  const before = structuredClone(searchRows);
+  const filtered = filterHydrogenRows(searchRows, ' 佛山 ')!;
+  assert.deepEqual(filtered.map(row => row.date), searchRows.map(row => row.date));
+  assert.deepEqual(filtered.map(row => row.totalKg), [0, 40, 10]);
+  assert.deepEqual(filtered.map(row => row.chainPct), [-1, 3, 0]);
+  assert.equal(filtered[1].stations.length, 2);
+  assert.equal(filtered[1].stations[0].pricePerKg, 38);
+  assert.equal(filtered[1].stations[0].chainPct, 2);
+  const summary = summarizeHydrogenRows(filtered);
+  assert.equal(summary.totalKg, 50);
+  assert.equal(summary.stationCount, 2);
+  assert.equal(summary.activeDays, 2);
+  assert.equal(summary.avgKg, 25);
+  assert.equal(summary.zeroDays, 1);
+  assert.deepEqual(summary.trendData.map(row => row.totalKg), [10, 40, 0]);
+  assert.deepEqual(searchRows, before);
+});
+
+test('无匹配关键词显示零结果，清除或空白搜索恢复全量，加载中保持加载状态', () => {
+  const missing = filterHydrogenRows(searchRows, '不存在的站点')!;
+  assert.equal(missing.length, 3);
+  assert.ok(missing.every(row => row.totalKg === 0 && row.chainPct === 0 && row.stations.length === 0));
+  assert.strictEqual(filterHydrogenRows(searchRows, ''), searchRows);
+  assert.strictEqual(filterHydrogenRows(searchRows, '  '), searchRows);
+  assert.equal(summarizeHydrogenRows(filterHydrogenRows(searchRows, '')).totalKg, 350);
+  assert.equal(filterHydrogenRows(null, '佛山'), null);
+  assert.deepEqual(filterHydrogenRows([], '佛山'), []);
+});
+
+test('完整站名可定位单站，搜索将特殊字符按普通文字匹配', () => {
+  assert.equal(summarizeHydrogenRows(filterHydrogenRows(searchRows, '佛山南海羚牛加氢站')).totalKg, 40);
+  assert.equal(summarizeHydrogenRows(filterHydrogenRows(searchRows, '%')).totalKg, 0);
+});
@@ -9,6 +9,28 @@ export {
  type RangeMode,
 } from '../daily-range/model';

+// 接口已返回所选车辆范围内的全部日/站点数据；搜索后统一重算日合计与环比。
+export function filterHydrogenRows(rows: HydrogenDailyRow[] | null, stationSearch: string): HydrogenDailyRow[] | null {
+  const keyword = stationSearch.trim().toLocaleLowerCase();
+  if (!rows || !keyword) return rows;
+
+  const filtered = rows.map(row => {
+    const stations = row.stations.filter(station => station.name.toLocaleLowerCase().includes(keyword));
+    return {
+      ...row,
+      stations,
+      totalKg: Math.round(stations.reduce((sum, station) => sum + station.kg, 0) * 100) / 100,
+      chainPct: 0,
+    };
+  });
+  let previousKg = 0;
+  for (const row of [...filtered].sort((a, b) => a.date.localeCompare(b.date))) {
+    row.chainPct = previousKg > 0 ? (row.totalKg - previousKg) / previousKg : 0;
+    previousKg = row.totalKg;
+  }
+  return filtered;
+}
+
 export function summarizeHydrogenRows(rows: HydrogenDailyRow[] | null) {
  const source = rows ?? [];
  // 图表固定按日期升序；复制数组避免改变接口返回及表格原始顺序。
@@ -1,4 +1,4 @@
-export type CustomerType = 'external' | 'lingniu';
+export type CustomerType = 'external' | 'lingniu' | 'all';
 export type DateQuickPick = 'thisWeek' | 'thisMonth' | 'last15';

 export interface HydrogenKpi {
@@ -39,7 +39,7 @@ export function registerHydrogenDailyRoute(
      HYDROGEN_BASE_WHERE_B,
      `b.${HYDROGEN_LOCAL} >= '${HYDROGEN_MIN_DATE}'`,
      dateRangeClause(`b.${HYDROGEN_LOCAL}`),
-      customerClause(customer).replaceAll('customer_price', 'b.customer_price').replaceAll('fee_total', 'b.fee_total'),
+      customerClause(customer),
    ].join(' AND ');

    // 站点级聚合（每日 × 每站）。前端组装成 day → stations
@@ -1,5 +1,6 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
+import { DatabaseSync } from 'node:sqlite';
 import {
  customerClause,
  dateRangeClause,
@@ -7,10 +8,31 @@ import {
  resolveDateRange,
 } from './query-model.js';

-test('客户范围继续让外部车辆返回空数据', () => {
-  assert.equal(customerClause('external'), '1=0');
-  assert.equal(customerClause('lingniu'), '1=1');
-  assert.equal(customerClause('all'), '1=1');
+test('外部车辆只取佛山羚牛站未关联车辆的订单，车牌文字和收费不影响分类', () => {
+  const db = new DatabaseSync(':memory:');
+  try {
+    db.exec(`CREATE TABLE orders (
+      id INTEGER, station_id INTEGER, vehicle_id INTEGER,
+      license_plate TEXT, customer_price REAL, del_flag TEXT
+    );
+    INSERT INTO orders VALUES
+      (1, 341, NULL, '粤A外部', 38, '0'),
+      (2, 341, NULL, '', 0, '0'),
+      (3, 341, 123, '粤A羚牛', 38, '0'),
+      (4, 52, NULL, '粤A其他站', 38, '0'),
+      (5, NULL, NULL, '', 0, '0'),
+      (6, NULL, 456, '粤A未关联站点', 0, '0'),
+      (7, 341, NULL, '粤A已删除', 38, '1');`);
+    const ids = (kind: 'external' | 'lingniu' | 'all') => db
+      .prepare(`SELECT b.id FROM orders b WHERE b.del_flag = '0' AND ${customerClause(kind)} ORDER BY b.id`)
+      .all().map(row => row.id);
+    assert.deepEqual(ids('external'), [1, 2]);
+    assert.deepEqual(ids('lingniu'), [3, 4, 5, 6]);
+    assert.deepEqual(ids('all'), [1, 2, 3, 4, 5, 6]);
+    assert.deepEqual([...ids('external'), ...ids('lingniu')].sort(), ids('all'));
+  } finally {
+    db.close();
+  }
 });

 test('能源日期快捷区间继续按本地自然日计算', () => {
@@ -8,10 +8,14 @@ export interface EnergyDateRange {

 const YMD_RE = /^\d{4}-\d{2}-\d{2}$/;

-// 新账本目前只承载羚牛车辆订单；外部车辆仍需返回空集合而不是混用羚牛数据。
+// 主数据 ID 341：佛山南海羚牛加氢站。车牌文字存在不代表已关联车辆。
+const FOSHAN_LINGNIU_STATION_ID = 341;
+
+// 日明细账本使用别名 b；两类互斥，其他订单继续保留在原羚牛范围内。
 export function customerClause(customer: CustomerKind): string {
-  if (customer === 'external') return '1=0';
-  if (customer === 'lingniu') return '1=1';
+  const external = `(COALESCE(b.station_id, 0) = ${FOSHAN_LINGNIU_STATION_ID} AND b.vehicle_id IS NULL)`;
+  if (customer === 'external') return external;
+  if (customer === 'lingniu') return `NOT ${external}`;
  return '1=1';
 }

@@ -105,6 +105,11 @@ test('四个处理器保持缓存和参数契约，加氢站点使用新主数
    '/hydrogen/daily?startDate=2025-01-01&endDate=2025-01-02&customer=external&force=1',
  );
  assert.equal(dailyResponse.status, 200);
+  assert.deepEqual(await dailyResponse.json(), [
+    { date: '2025-01-02', totalKg: 10, chainPct: 0, customerType: 'external',
+      stations: [{ name: '测试站', pricePerKg: 35, kg: 10, chainPct: 0 }] },
+    { date: '2025-01-01', totalKg: 0, chainPct: 0, customerType: 'external', stations: [] },
+  ]);

  const electricApp = new Hono();
  const electricDependencies = {
@@ -127,7 +132,7 @@ test('四个处理器保持缓存和参数契约，加氢站点使用新主数
    { key: 'electric/monthly?customer=external&start=2025-01-01&end=2025-01-02', force: true },
  ]);

-  // 指纹来自拆分前的 13 条 SQL，连空白符变化也会使测试失败。
+  // 保留查询契约指纹；日明细已更新为佛山羚牛站未关联车辆的外部订单筛选。
  assert.deepEqual(
    [...hydrogenCalls, ...electricCalls].map(call => sqlHash(call.sql)),
    [
@@ -138,7 +143,7 @@ test('四个处理器保持缓存和参数契约，加氢站点使用新主数
      '256ac8309d5a',
      'dac9e86fc527',
      'a71da8f05765',
-      '24b23780a259',
+      'd1620280f520',
      '226fd8f950a1',
      '6e4031b10926',
      '4fc77463294c',
Author	SHA1	Message	Date
shishengliang	4214dca4af	feat(faults): add severity dimension and detail column ci/woodpecker/push/woodpecker Pipeline was successful Details	2026-10-24 13:37:09 +08:00
shishengliang	462b2ecff3	feat(energy): add vehicle scope and station search to hydrogen daily	2026-10-24 13:37:09 +08:00
shishengliang	a7693b8591	refactor(ui): share date range picker across asset and energy views	2026-10-24 13:37:09 +08:00
shishengliang	a237df8b75	style(assets): compact history trends and overview spacing ci/woodpecker/push/woodpecker Pipeline was successful Details	2026-10-24 13:29:13 +08:00
shishengliang	d8871964a4	chore(release): bump version to 1.1.21 ci/woodpecker/push/woodpecker Pipeline failed Details	2026-10-24 13:16:59 +08:00
shishengliang	1e57586a35	Merge asset history trends into feature/asset-statistics	2026-10-24 13:16:53 +08:00
shishengliang	187a72d6b0	chore(release): bump version to 1.1.20 ci/woodpecker/push/woodpecker Pipeline was successful Details	2026-10-22 11:06:43 +08:00
shishengliang	3657661fa7	Merge fault_1013_improve into feature/asset-statistics	2026-10-22 11:06:41 +08:00
shishengliang	00c09d7452	fix(mileage): skip missing daily mileage in interval totals ci/woodpecker/push/woodpecker Pipeline was successful Details	2026-10-13 13:20:14 +08:00
shishengliang	5751d1af15	fix(assets): emphasize daily flow details and sort newest first ci/woodpecker/push/woodpecker Pipeline was successful Details	2026-10-10 21:56:06 +08:00
shishengliang	24984fe033	fix(assets): show inventory operations managers and bump v1.1.19	2026-10-10 21:56:06 +08:00
shishengliang	7dd7e67602	fix(energy): connect Foshan external vehicle hydrogen orders ci/woodpecker/push/woodpecker Pipeline was successful Details	2026-09-29 10:03:45 +08:00