feat(assets): 完成故障维修运维 BI 与 Excel 报表导出

src/modules/assets/components/analysis/MobileAnalysisControls.tsx

@@ -0,0 +1,71 @@
+import { useId, useRef, useState } from 'react';
+import { ArrowLeft, Check, ChevronDown, Filter, Search, X } from 'lucide-react';
+
+export type MobileDimension = { key: string; label: string; options: { value: string; label: string; count?: number }[] };
+type Filters = Partial<Record<string, string[]>>;
+type Props = {
+  available: MobileDimension[];
+  dimensions: string[];
+  filters: Filters;
+  defaults: string[];
+  apply: (dimensions: string[], filters: Filters) => void;
+};
+
+/** Draft all mobile settings together; cancelling never changes the current result. */
+export function MobileAnalysisControls({ available, dimensions, filters, defaults, apply }: Props) {
+  const [mode, setMode] = useState<'group' | 'filter' | null>(null);
+  const [draftDimensions, setDraftDimensions] = useState(dimensions);
+  const [draftFilters, setDraftFilters] = useState(filters);
+  const [editing, setEditing] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+  const trigger = useRef<HTMLButtonElement | null>(null);
+  const panel = useRef<HTMLDivElement>(null);
+  const id = useId();
+  const selected = available.filter(d => filters[d.key]?.length);
+  const editor = available.find(d => d.key === editing);
+  const options = editor?.options.filter(o => o.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())) || [];
+  const close = () => { setMode(null); trigger.current?.focus(); };
+  const open = (next: 'group' | 'filter', button: HTMLButtonElement) => {
+    trigger.current = button; setDraftDimensions([...dimensions]); setDraftFilters({ ...filters });
+    setEditing(null); setQuery(''); setMode(next);
+    requestAnimationFrame(() => panel.current?.focus());
+  };
+  const toggle = (key: string, value: string) => {
+    const values = draftFilters[key] || [];
+    setDraftFilters({ ...draftFilters, [key]: values.includes(value) ? values.filter(v => v !== value) : [...values, value] });
+  };
+  return <div className="analysis-mobile-controls">
+    <div className="analysis-mobile-dimension-heading"><strong>分析维度</strong><span>可多选 · 左右滑动</span><button onClick={e => open('group', e.currentTarget)} aria-expanded={mode === 'group'} aria-controls={id}>分组设置</button></div>
+    <div className="analysis-mobile-toolbar">
+      <div className="analysis-dimension-strip" role="group" aria-label="分析维度">
+        {available.map(d => <button key={d.key} type="button" aria-pressed={dimensions.includes(d.key)} onClick={() => apply(dimensions.includes(d.key) ? dimensions.filter(key => key !== d.key) : [...dimensions, d.key], filters)}>{d.label}{dimensions.includes(d.key) && <small>{dimensions.indexOf(d.key) + 1}</small>}</button>)}
+        <button type="button" aria-pressed={!dimensions.length} onClick={() => apply([], filters)}>仅汇总</button>
+      </div>
+      <button type="button" onClick={e => open('filter', e.currentTarget)} aria-expanded={mode === 'filter'} aria-controls={id}><Filter size={16} />筛选{selected.length ? ` ${selected.length}` : ''}</button>
+    </div>
+    {!!selected.length && <div className="analysis-mobile-chips" aria-label="已选筛选条件">{selected.map(d => <button key={d.key} title={(filters[d.key] || []).map(v => d.options.find(o => o.value === v)?.label || v).join('、')} aria-label={`移除${d.label}筛选`} onClick={() => { const next = { ...filters }; delete next[d.key]; apply(dimensions, next); }}><span>{d.label}：{filters[d.key]?.length === 1 ? d.options.find(o => o.value === filters[d.key]?.[0])?.label || filters[d.key]?.[0] : `${filters[d.key]?.length}项`}</span><X size={14} /></button>)}</div>}
+    {mode && <div className="analysis-settings-backdrop" onClick={e => { if (e.target === e.currentTarget) close(); }}>
+      <div ref={panel} id={id} role="dialog" aria-modal="true" aria-label={mode === 'group' ? '分组设置' : '筛选条件'} tabIndex={-1} className="analysis-settings-panel" onKeyDown={e => {
+        if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); if (editing) { setEditing(null); setQuery(''); } else close(); }
+        if (e.key === 'Tab') {
+          e.stopPropagation();
+          const items = Array.from(panel.current?.querySelectorAll<HTMLElement>('button:not([disabled]),input') || []).filter(el => el.getClientRects().length);
+          const first = items[0], last = items.at(-1);
+          if (e.shiftKey && (document.activeElement === first || document.activeElement === panel.current)) { e.preventDefault(); last?.focus(); }
+          else if (!e.shiftKey && (document.activeElement === last || document.activeElement === panel.current)) { e.preventDefault(); first?.focus(); }
+        }
+      }}>
+        <header><button aria-label={editing ? '返回筛选条件' : '取消设置'} onClick={() => editing ? (setEditing(null), setQuery('')) : close()}><ArrowLeft size={20} /></button><h3>{editor?.label || (mode === 'group' ? '分组设置' : '筛选条件')}</h3><button aria-label="关闭设置" onClick={close}><X size={20} /></button></header>
+        {editor && <label className="analysis-settings-search"><Search size={17} /><input aria-label={`搜索${editor.label}`} placeholder={`搜索${editor.label}`} value={query} onChange={e => setQuery(e.target.value)} /></label>}
+        <div className="analysis-settings-content">
+          {mode === 'group' ? <><p>可选择多个维度，按选择顺序组合统计。</p><div className="analysis-settings-groups">{available.map(d => <button key={d.key} aria-pressed={draftDimensions.includes(d.key)} onClick={() => setDraftDimensions(draftDimensions.includes(d.key) ? draftDimensions.filter(v => v !== d.key) : [...draftDimensions, d.key])}><span>{d.label}</span>{draftDimensions.includes(d.key) && <span className="analysis-dimension-order">{draftDimensions.indexOf(d.key) + 1}</span>}</button>)}</div><button className="analysis-settings-row" aria-pressed={!draftDimensions.length} onClick={() => setDraftDimensions([])}>仅汇总，不分组{!draftDimensions.length && <Check size={18} />}</button></> : editor ? <>
+            <div className="analysis-settings-select"><button onClick={() => setDraftFilters({ ...draftFilters, [editor.key]: [...new Set([...(draftFilters[editor.key] || []), ...options.map(o => o.value)])] })}>全选{query ? '搜索结果' : ''}</button><button onClick={() => setDraftFilters({ ...draftFilters, [editor.key]: [] })}>清除选择</button><span>{draftFilters[editor.key]?.length || 0} 项已选</span></div>
+            {options.map(o => <label className="analysis-settings-option" key={o.value}><input type="checkbox" checked={draftFilters[editor.key]?.includes(o.value) || false} onChange={() => toggle(editor.key, o.value)} /><span>{o.label}</span>{o.count !== undefined && <small>{o.count.toLocaleString()}</small>}</label>)}
+            {!options.length && <p>没有匹配选项，可调整搜索。</p>}
+          </> : <><p>同一维度多选取并集，不同维度同时满足。未选择表示不限。</p>{available.map(d => <button className="analysis-settings-row" key={d.key} onClick={() => { setEditing(d.key); setQuery(''); }}><span>{d.label}</span><small>{draftFilters[d.key]?.length ? `已选 ${draftFilters[d.key]?.length} 项` : '不限'}</small><ChevronDown size={16} /></button>)}</>}
+        </div>
+        <footer><button onClick={() => mode === 'group' ? setDraftDimensions([...defaults]) : setDraftFilters({})}>重置{mode === 'group' ? '分组' : '筛选'}</button><button className="analysis-settings-apply" onClick={() => { const clean = Object.fromEntries(Object.entries(draftFilters).filter(([, values]) => values?.length)); apply(draftDimensions, clean); close(); }}>查看结果</button></footer>
+      </div>
+    </div>}
+  </div>;
+}

src/modules/assets/components/analysis/MobileGroupedTable.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { Filter } from 'lucide-react';
+
+type Row = { key: string; label: string; values: ReactNode[]; count: number; share: number; note?: ReactNode };
+type Props = {
+  dimensions: string[];
+  rows: Row[];
+  unit: string;
+  merged: boolean;
+  setMerged: (value: boolean) => void;
+  spans: number[][];
+  parentTotals: number[][];
+  onDetails: (index: number) => void;
+  onFilter?: (index: number) => void;
+};
+
+/** Retain table semantics and actual parent row spans at narrow viewport widths. */
+export function MobileGroupedTable({ dimensions, rows, unit, merged, setMerged, spans, parentTotals, onDetails, onFilter }: Props) {
+  const multiple = dimensions.length > 1;
+  return <section className={`analysis-mobile-grid${onFilter ? '' : ' without-filter'}`}>
+    <div className="analysis-mobile-grid-heading"><strong>分组统计</strong>{multiple ? <label><input type="checkbox" role="switch" checked={merged} onChange={e => setMerged(e.target.checked)} /><span>合并单元格</span></label> : <span>数量 · 占比</span>}</div>
+    {multiple && <p className="analysis-mobile-grid-hint">左右滑动查看完整表格{merged ? ' · 相同上级已合并' : ' · 每行独立显示'}</p>}
+    <div className="analysis-mobile-grid-scroll" role="region" aria-label="分组统计表，可左右滑动" tabIndex={0}>
+      <table style={{ minWidth: multiple ? `${dimensions.length * 108 + 192}px` : '100%' }}>
+        <thead><tr>{dimensions.length ? dimensions.map((label, i) => <th scope="col" key={i}>{label}</th>) : <th scope="col">范围</th>}<th scope="col" className="mobile-grid-number">数量<small>（{unit}）</small></th><th scope="col" className="mobile-grid-share">占比</th><th scope="col" className="mobile-grid-actions">操作</th></tr></thead>
+        <tbody>{rows.map((row, rowIndex) => <tr key={row.key} className={merged && spans[rowIndex]?.[0] > 0 ? 'mobile-grid-group-start' : undefined}>
+          {dimensions.length ? row.values.map((value, colIndex) => {
+            const span = merged ? spans[rowIndex]?.[colIndex] ?? 1 : 1;
+            if (!span) return null;
+            const parent = merged && colIndex < dimensions.length - 1;
+            return <td key={colIndex} rowSpan={span} className={parent ? 'mobile-grid-parent' : 'mobile-grid-label'}>{value}{parent && <small>合计 <b>{parentTotals[rowIndex]?.[colIndex]?.toLocaleString('zh-CN')}</b> {unit}</small>}</td>;
+          }) : <td className="mobile-grid-label">当前结果</td>}
+          <td className="mobile-grid-number"><strong>{row.count.toLocaleString('zh-CN')}</strong>{row.note && <small>{row.note}</small>}</td>
+          <td className="mobile-grid-share"><span>{row.share.toFixed(1)}%</span><i aria-hidden="true"><i style={{ width: `${row.share}%` }} /></i></td>
+          <td className="mobile-grid-actions"><div>{onFilter && dimensions.length > 0 && <button className="mobile-grid-filter" aria-label={`筛选分组 ${row.label}`} title="筛选此组" onClick={() => onFilter(rowIndex)}><Filter size={15} /></button>}<button aria-label={`查看明细 ${row.label}`} onClick={() => onDetails(rowIndex)}>明细</button></div></td>
+        </tr>)}</tbody>
+      </table>
+    </div>
+  </section>;
+}

src/modules/assets/components/analysis/mobile-analysis.css

@@ -0,0 +1,157 @@
+/* Shared mobile presentation for asset statistics, filters and vehicle details. */
+@media (max-width: 767px) {
+  .asset-analysis-overlay, .bi-flow-modal-backdrop { padding: 0; align-items: stretch; }
+  .asset-analysis-dialog, .bi-flow-modal { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; min-height: 0; border-radius: 0; font-size: 13px; }
+  .analysis-header, .bi-flow-modal-header { padding: max(6px, env(safe-area-inset-top)) 10px 6px; background: #fff; color: var(--color-slate-800, #1e293b); border-bottom: 1px solid var(--color-slate-200, #e2e8f0); }
+  .analysis-header { gap: 8px; }
+  .analysis-header > div { flex: 1; min-width: 0; }
+  .analysis-header h2, .bi-flow-modal-header h3 { font-size: 15px; }
+  .analysis-header h2 > svg { display: none; }
+  .analysis-header h2, .bi-flow-modal-header h3 { border-left: 3px solid var(--color-blue-600, #2563eb); padding-left: 8px; }
+  .analysis-header p, .bi-flow-modal-header p { font-size: 11px; line-height: 1.5; color: var(--color-slate-500, #64748b); }
+  .analysis-header button, .bi-flow-modal-close, .bi-flow-mobile-back { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; color: var(--color-slate-500, #64748b); background: var(--color-slate-50, #f8fafc); border-radius: 8px; }
+  .analysis-header button:hover, .bi-flow-modal-close:hover { background: var(--color-blue-50, #eff6ff); }
+  .analysis-scroll, .bi-flow-modal-body { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); background: var(--app-bg, #f4f7fb); }
+  .analysis-result-bar { padding: 10px 14px; gap: 8px; font-size: 12px; background: var(--color-blue-50, #eff6ff); border: 1px solid var(--color-blue-100, #dbeafe); border-radius: 10px; color: var(--color-slate-600, #475569); margin-bottom: 10px; }
+  .analysis-result-bar strong { font-size: 28px; margin: 0 4px; color: var(--color-blue-600, #2563eb); }
+  .analysis-result-dimensions { display: none; }
+  .analysis-inventory-subsets { gap: 5px 12px; font-size: 11px; margin: -11px 0 8px; padding: 8px 14px; background: var(--color-blue-50, #eff6ff); border: 1px solid var(--color-blue-100, #dbeafe); border-top: 0; border-radius: 0 0 10px 10px; }
+  .analysis-inventory-subsets small { width: 100%; font-size: 11px; }
+  .analysis-mobile-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
+  .analysis-mobile-toolbar > button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid #d8e0eb; border-radius: 9px; padding: 8px 12px; background: #f8fafc; color: #334155; font-size: 13px; }
+  .analysis-mobile-toolbar > button:first-child { justify-content: space-between; }
+  .analysis-mobile-toolbar > button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .analysis-mobile-toolbar svg { flex-shrink: 0; }
+  .analysis-mobile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+  .analysis-mobile-chips button { display: flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 8px; color: var(--color-blue-700, #1d4ed8); background: #eff6ff; font-size: 11px; }
+  .analysis-mobile-chips span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .analysis-mobile-chips svg { flex-shrink: 0; }
+  .analysis-overview-tools > p, .analysis-overview-tools .analysis-merge-toggle { display: none; }
+  .analysis-overview-tools.is-empty { display: none; }
+  .analysis-overview-tools .analysis-table-options { width: 100%; justify-content: space-between; gap: 6px; }
+  .analysis-table-tools { margin: 8px 0; }
+  .analysis-table-tools label, .analysis-table-tools select, .analysis-export-action button { font-size: 11px; }
+  .analysis-table-tools select, .analysis-export-action button { min-height: 44px; }
+  .analysis-table-tools h3 { font-size: 14px; }
+  .analysis-table-tools h3 small { font-size: 12px; }
+  .analysis-table-total { border: 0; border-radius: 0; background: none; padding: 8px 0; font-size: 11px; line-height: 1.6; }
+  .analysis-table-total > span:last-child { display: none; }
+  .analysis-mobile-detail-scope { font-size: 12px; color: #64748b; margin-bottom: 8px; }
+  .analysis-search { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: 8px; }
+  .analysis-search input { font-size: 16px; width: 100%; }
+  .analysis-vehicle-cards { display: grid; gap: 8px; margin-top: 10px; }
+  .analysis-vehicle-card { min-width: 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
+  .analysis-vehicle-card header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; }
+  .analysis-vehicle-card h4 { color: var(--color-blue-700, #1d4ed8); font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
+  .analysis-vehicle-card header > span { font-size: 11px; padding: 3px 6px; border-radius: 4px; color: #475569; background: #f1f5f9; }
+  .analysis-vehicle-card > p { font-size: 12px; color: #64748b; line-height: 1.6; margin-top: 6px; overflow-wrap: anywhere; }
+  .analysis-vehicle-card summary { display: flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--color-blue-600, #2563eb); cursor: pointer; }
+  .analysis-vehicle-card summary::after { content: '＋'; margin-left: auto; }
+  .analysis-vehicle-card details[open] summary::after { content: '−'; }
+  .analysis-vehicle-card dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; padding: 4px 0; font-size: 12px; line-height: 1.6; }
+  .analysis-vehicle-card dt { color: #64748b; }
+  .analysis-vehicle-card dd { color: #334155; overflow-wrap: anywhere; }
+  .analysis-footer { padding: 0 16px max(0px, env(safe-area-inset-bottom)); background: #fff; font-size: 11px; }
+  .analysis-footer details { width: 100%; max-height: 28dvh; overflow-y: auto; }
+  .analysis-footer summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
+  .analysis-footer details p { margin-bottom: 10px; line-height: 1.6; }
+  .analysis-message { font-size: 13px; min-height: 240px; }
+  .analysis-message h3 { font-size: 15px; }
+  .analysis-definition { font-size: 11px; }
+  .analysis-details .text-base { font-size: 14px; }
+  .analysis-details .text-sm { font-size: 13px; }
+  .analysis-details .text-xs { font-size: 11px; }
+  .analysis-details .space-y-3.px-3 { padding: 0; }
+  .analysis-details .space-y-3 article { box-shadow: none; }
+  .analysis-settings-backdrop { position: fixed; inset: 0; z-index: 30; background: rgb(15 23 42 / 38%); display: flex; align-items: flex-end; }
+  .analysis-settings-panel { display: flex; flex-direction: column; width: 100%; height: min(680px, 90dvh); min-height: 0; background: #fff; border-radius: 12px 12px 0 0; color: #334155; box-shadow: 0 -12px 36px #0f172a20; outline: none; }
+  .analysis-settings-panel header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; }
+  .analysis-settings-panel header h3 { flex: 1; font-size: 15px; font-weight: 600; }
+  .analysis-settings-panel header button { width: 44px; height: 44px; display: grid; place-items: center; }
+  .analysis-settings-search { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; }
+  .analysis-settings-search input { min-width: 0; width: 100%; font-size: 16px; outline: none; }
+  .analysis-settings-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; }
+  .analysis-settings-content > p { color: #64748b; font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
+  .analysis-settings-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
+  .analysis-settings-groups button { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #d8e0eb; border-radius: 8px; font-size: 13px; }
+  .analysis-settings-groups button[aria-pressed=true] { color: var(--color-blue-700, #1d4ed8); background: #eff6ff; border-color: #93c5fd; }
+  .analysis-settings-groups .analysis-dimension-order { width: 20px; height: 20px; font-size: 11px; }
+  .analysis-settings-row { display: flex; gap: 10px; width: 100%; align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 13px; }
+  .analysis-settings-row > span { flex: 1; }
+  .analysis-settings-row > small { font-size: 12px; color: #64748b; }
+  .analysis-settings-select { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; }
+  .analysis-settings-select button { min-height: 44px; color: var(--color-blue-600, #2563eb); }
+  .analysis-settings-select > span { margin-left: auto; color: #64748b; }
+  .analysis-settings-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
+  .analysis-settings-option input { width: 18px; height: 18px; accent-color: var(--color-blue-600, #2563eb); flex-shrink: 0; }
+  .analysis-settings-option span { flex: 1; overflow-wrap: anywhere; }
+  .analysis-settings-option small { color: #64748b; font-size: 12px; }
+  .analysis-settings-panel footer { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #e2e8f0; }
+  .analysis-settings-panel footer button { min-height: 46px; border-radius: 9px; background: #f1f5f9; font-size: 13px; }
+  .analysis-settings-panel footer .analysis-settings-apply { background: var(--color-blue-600, #2563eb); color: #fff; }
+}
+@media (max-width: 767px) {
+  .bi-flow-modal-header-row { align-items: center; gap: 8px; }
+  .bi-flow-modal-header-row > div { flex: 1; min-width: 0; }
+  .bi-flow-modal-summary { margin: 0 0 12px; background: var(--color-blue-50, #eff6ff); border-color: var(--color-blue-100, #dbeafe); }
+  .bi-flow-modal-summary > div { padding: 10px 8px; gap: 6px; }
+  .bi-flow-modal-summary span, .bi-flow-modal strong small { font-size: 11px; }
+  .bi-flow-modal-summary strong { font-size: 23px; }
+  .bi-flow-modal-section-heading { margin: 12px 0 4px; }
+  .bi-flow-modal-section-heading h4 { font-size: 14px; }
+  .bi-flow-modal-section-heading p { font-size: 11px; }
+  .bi-flow-modal-empty { font-size: 13px; line-height: 1.7; color: #64748b; }
+}
+@media (max-width: 767px) {
+  .analysis-details .space-y-3 dt { font-size: 11px; line-height: 1.8; }
+}
+
+@media (max-width: 767px) {
+  .analysis-mobile-controls { position: sticky; top: -12px; z-index: 5; background: var(--app-bg, #f4f7fb); padding: 0 0 6px; }
+  .analysis-mobile-dimension-heading { display: flex; align-items: center; gap: 8px; color: var(--color-slate-700, #334155); font-size: 12px; }
+  .analysis-mobile-dimension-heading > span { color: var(--color-slate-500, #64748b); font-size: 11px; }
+  .analysis-mobile-dimension-heading > button { margin-left: auto; min-height: 44px; color: var(--color-blue-600, #2563eb); font-size: 11px; }
+  .analysis-mobile-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
+  .analysis-mobile-toolbar > button { align-self: start; height: 44px; padding: 0 8px; gap: 4px; white-space: nowrap; color: var(--color-blue-600, #2563eb); border-color: var(--color-blue-100, #dbeafe); background: var(--color-blue-50, #eff6ff); }
+  .analysis-dimension-strip { display: flex; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--color-slate-300, #cbd5e1) transparent; padding-bottom: 4px; }
+  .analysis-dimension-strip button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 11px; border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 8px; background: #fff; color: var(--color-slate-600, #475569); font-size: 12px; }
+  .analysis-dimension-strip button[aria-pressed=true] { background: var(--color-blue-600, #2563eb); border-color: var(--color-blue-600, #2563eb); color: #fff; box-shadow: 0 2px 4px rgb(37 99 235 / 12%); }
+  .analysis-dimension-strip small { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #ffffff2b; font-size: 10px; }
+  .analysis-mobile-grid { border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgb(15 23 42 / 3%); }
+  .analysis-mobile-grid-heading { min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px; background: var(--color-blue-50, #eff6ff); color: var(--color-slate-700, #334155); font-size: 12px; }
+  .analysis-mobile-grid-heading > span { font-size: 11px; color: var(--color-slate-500, #64748b); }
+  .analysis-mobile-grid-heading label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 11px; cursor: pointer; }
+  .analysis-mobile-grid-heading input { appearance: none; width: 30px; height: 18px; border-radius: 10px; background: var(--color-slate-400, #94a3b8); position: relative; cursor: pointer; }
+  .analysis-mobile-grid-heading input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
+  .analysis-mobile-grid-heading input:checked { background: var(--color-blue-600, #2563eb); }
+  .analysis-mobile-grid-heading input:checked::after { left: 15px; }
+  .analysis-mobile-grid-hint { padding: 6px 12px; font-size: 11px; color: var(--color-slate-500, #64748b); border-bottom: 1px solid var(--color-slate-200, #e2e8f0); background: var(--color-slate-50, #f8fafc); }
+  .analysis-mobile-grid-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
+  .analysis-mobile-grid table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
+  .analysis-mobile-grid th { background: var(--color-slate-50, #f8fafc); color: var(--color-slate-500, #64748b); font-weight: 500; padding: 7px 6px; text-align: left; border-bottom: 1px solid var(--color-slate-200, #e2e8f0); }
+  .analysis-mobile-grid th:first-child { padding-left: 12px; }
+  .analysis-mobile-grid td { padding: 4px 6px; border-bottom: 1px solid var(--color-slate-100, #f1f5f9); vertical-align: middle; overflow-wrap: anywhere; color: var(--color-slate-700, #334155); line-height: 1.5; }
+  .analysis-mobile-grid tr:nth-child(even) td { background: var(--color-slate-50, #f8fafc); }
+  .analysis-mobile-grid tr:last-child td { border-bottom: 0; }
+  .analysis-mobile-grid td:first-child { padding-left: 12px; }
+  .analysis-mobile-grid .mobile-grid-parent { background: var(--color-blue-50, #eff6ff); border-right: 1px solid var(--color-blue-100, #dbeafe); font-weight: 600; vertical-align: top; padding-top: 14px; }
+  .analysis-mobile-grid .mobile-grid-parent small { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; color: var(--color-slate-500, #64748b); }
+  .analysis-mobile-grid .mobile-grid-group-start:not(:first-child) td { border-top: 1px solid var(--color-slate-300, #cbd5e1); }
+  .analysis-mobile-grid .mobile-grid-number { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
+  .analysis-mobile-grid th small { display: block; font-size: 10px; }
+  .analysis-mobile-grid td.mobile-grid-number strong { font-size: 17px; color: var(--color-blue-600, #2563eb); font-weight: 600; }
+  .analysis-mobile-grid td.mobile-grid-number small { display: block; font-size: 10px; color: var(--color-amber-600, #d97706); }
+  .analysis-mobile-grid .mobile-grid-share { width: 58px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
+  .mobile-grid-share > i { display: block; margin-top: 5px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--color-blue-100, #dbeafe); }
+  .mobile-grid-share > i > i { display: block; height: 100%; background: var(--color-blue-500, #3b82f6); }
+  .analysis-mobile-grid .mobile-grid-actions { width: 90px; text-align: center; padding-left: 0; padding-right: 4px; }
+  .analysis-mobile-grid.without-filter .mobile-grid-actions { width: 56px; }
+  .mobile-grid-actions > div { display: flex; justify-content: flex-end; }
+  .mobile-grid-actions button { display: grid; place-items: center; min-width: 44px; height: 44px; color: var(--color-blue-600, #2563eb); font-size: 11px; border-radius: 7px; }
+  .mobile-grid-actions button:active { background: #dbeafe; }
+  .mobile-grid-actions .mobile-grid-filter { color: var(--color-slate-400, #94a3b8); }
+  .analysis-table-tools { margin-top: 0; }
+  .analysis-mobile-detail-scope { padding: 10px 12px; border-left: 3px solid var(--color-blue-600, #2563eb); border-radius: 0 6px 6px 0; background: var(--color-blue-50, #eff6ff); color: var(--color-slate-600, #475569); }
+  .analysis-vehicle-card { border-color: var(--color-slate-200, #e2e8f0); border-top: 3px solid var(--color-blue-100, #dbeafe); }
+  .bi-flow-modal-summary strong { color: var(--color-blue-600, #2563eb); }
+}

src/modules/assets/components/overview/FlowDateRangePicker.tsx

@@ -8,7 +8,7 @@ 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 }: { value: DateRange; onChange: (range: DateRange) => void }) {
+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');
@@ -69,7 +69,7 @@ export function FlowDateRangePicker({ value, onChange }: { value: DateRange; onC
       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">统计日期 · 运维签章时间</span>
+        <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>