feat(platform): save reusable customer views

vehicle-data-platform/apps/web/src/App.tsx

@@ -3,7 +3,7 @@ import { Toast } from '@douyinfe/semi-ui';
 import { api } from './api/client';
 import type { QualityNotificationPlan, VehicleSourceConsistency, VehicleServiceOverview, VehicleServiceStatus } from './api/types';
 import { buildAppHash, parseAppHash } from './domain/appRoute';
-import { AppShell, type PageKey } from './layout/AppShell';
+import { AppShell, type CustomerView, type PageKey } from './layout/AppShell';
 import { Dashboard } from './pages/Dashboard';
 import { History } from './pages/History';
 import { Mileage } from './pages/Mileage';
@@ -14,6 +14,8 @@ import { Realtime } from './pages/Realtime';
 import { VehicleDetail } from './pages/VehicleDetail';
 import { Vehicles } from './pages/Vehicles';
 
+const customerViewsStorageKey = 'lingniu.customerViews.v1';
+
 export default function App() {
   const initialRoute = parseAppHash(window.location.hash);
   const initialVehicleKey = initialRoute.keyword || '';
@@ -38,6 +40,7 @@ export default function App() {
     initialRoute.page === 'quality' || initialRoute.page === 'alert-events' ? qualityFiltersFromRoute(initialRoute) : {}
   );
   const [customerTimeWindow, setCustomerTimeWindow] = useState<Record<string, string>>(timeWindowFiltersFromRoute(initialRoute));
+  const [customerViews, setCustomerViews] = useState<CustomerView[]>(readCustomerViews);
   const [linkIssueCount, setLinkIssueCount] = useState<number | null>(null);
   const [activeAlertRuleCount, setActiveAlertRuleCount] = useState<number | null>(null);
   const [p0AlertRuleCount, setP0AlertRuleCount] = useState<number | null>(null);
@@ -543,6 +546,48 @@ export default function App() {
     }
   };
 
+  const saveCustomerView = () => {
+    const keyword = (activeVin || analysisVin).trim();
+    if (!keyword) {
+      Toast.warning('请先查询一辆车');
+      return;
+    }
+    const protocol = activeProtocol.trim();
+    const timeWindow = currentCustomerTaskTimeWindow();
+    const view: CustomerView = {
+      id: [keyword, protocol, timeWindow.dateFrom ?? '', timeWindow.dateTo ?? ''].join('|'),
+      label: currentVehicleLabel || keyword,
+      keyword,
+      protocol,
+      ...timeWindow
+    };
+    setCustomerViews((prev) => {
+      const next = [view, ...prev.filter((item) => item.id !== view.id)].slice(0, 5);
+      writeCustomerViews(next);
+      return next;
+    });
+    Toast.success('已保存客户视图');
+  };
+
+  const openCustomerView = (view: CustomerView) => {
+    const keyword = view.keyword.trim();
+    if (!keyword) {
+      return;
+    }
+    const protocol = view.protocol?.trim() ?? '';
+    const timeWindow = {
+      ...(view.dateFrom ? { dateFrom: view.dateFrom } : {}),
+      ...(view.dateTo ? { dateTo: view.dateTo } : {})
+    };
+    setActiveVin(keyword);
+    setAnalysisVin(keyword);
+    setActiveProtocol(protocol);
+    setCurrentVehicleLabel(view.label || keyword);
+    setCustomerTimeWindow(timeWindow);
+    setActivePage('detail');
+    replaceHash('detail', keyword, protocol);
+  };
+
   const updateVehicleDetailQuery = (keyword: string, protocol?: string) => {
     const nextKeyword = keyword.trim();
     const nextProtocol = protocol?.trim() ?? '';
@@ -576,12 +621,27 @@ export default function App() {
   };
 
   return (
-    <AppShell activePage={activePage} linkIssueCount={linkIssueCount} activeAlertRuleCount={activeAlertRuleCount} p0AlertRuleCount={p0AlertRuleCount} platformRelease={platformRelease} currentVehicleStatus={currentVehicleStatus} currentVehicleLabel={currentVehicleLabel} currentVehicleConsistency={currentVehicleConsistency} customerTimeWindow={customerTimeWindow} onCustomerTimeWindowChange={setCustomerTimeWindow} onCopyCustomerScope={copyCustomerScope} onChange={navigatePage} onCustomerTask={openCustomerTask} onVehicleSearch={openVehicle}>
+    <AppShell activePage={activePage} linkIssueCount={linkIssueCount} activeAlertRuleCount={activeAlertRuleCount} p0AlertRuleCount={p0AlertRuleCount} platformRelease={platformRelease} currentVehicleStatus={currentVehicleStatus} currentVehicleLabel={currentVehicleLabel} currentVehicleConsistency={currentVehicleConsistency} customerTimeWindow={customerTimeWindow} customerViews={customerViews} onCustomerTimeWindowChange={setCustomerTimeWindow} onSaveCustomerView={saveCustomerView} onOpenCustomerView={openCustomerView} onCopyCustomerScope={copyCustomerScope} onChange={navigatePage} onCustomerTask={openCustomerTask} onVehicleSearch={openVehicle}>
       {pages[activePage]}
     </AppShell>
   );
 }
 
+function readCustomerViews(): CustomerView[] {
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(customerViewsStorageKey) || '[]');
+    return Array.isArray(parsed)
+      ? parsed.filter((item): item is CustomerView => Boolean(item?.id && item?.label && item?.keyword)).slice(0, 5)
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeCustomerViews(views: CustomerView[]) {
+  window.localStorage.setItem(customerViewsStorageKey, JSON.stringify(views.slice(0, 5)));
+}
+
 function timeWindowFiltersFromRoute(route: ReturnType<typeof parseAppHash>): Record<string, string> {
   return timeWindowFiltersFromValues(route.filters ?? {});
 }