From e1126a6fccd8bb29dc636b624c24f755d4f91b34 Mon Sep 17 00:00:00 2001 From: lingniu Date: Sun, 5 Jul 2026 19:38:30 +0800 Subject: [PATCH] feat(platform): save reusable customer views --- vehicle-data-platform/apps/web/src/App.tsx | 64 ++++++++++++++++- .../apps/web/src/layout/AppShell.tsx | 40 +++++++++++ .../apps/web/src/styles/global.css | 30 ++++++++ .../apps/web/src/test/App.test.tsx | 71 +++++++++++++++++++ 4 files changed, 203 insertions(+), 2 deletions(-) diff --git a/vehicle-data-platform/apps/web/src/App.tsx b/vehicle-data-platform/apps/web/src/App.tsx index accdecb7..79a29f2d 100644 --- a/vehicle-data-platform/apps/web/src/App.tsx +++ b/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>(timeWindowFiltersFromRoute(initialRoute)); + const [customerViews, setCustomerViews] = useState(readCustomerViews); const [linkIssueCount, setLinkIssueCount] = useState(null); const [activeAlertRuleCount, setActiveAlertRuleCount] = useState(null); const [p0AlertRuleCount, setP0AlertRuleCount] = useState(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 ( - + {pages[activePage]} ); } +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): Record { return timeWindowFiltersFromValues(route.filters ?? {}); } diff --git a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx index ee0c21a4..f447987b 100644 --- a/vehicle-data-platform/apps/web/src/layout/AppShell.tsx +++ b/vehicle-data-platform/apps/web/src/layout/AppShell.tsx @@ -18,6 +18,15 @@ import { isAMapConfigured } from '../config/appConfig'; export type PageKey = 'dashboard' | 'vehicles' | 'map' | 'realtime' | 'detail' | 'history' | 'history-query' | 'mileage' | 'alert-events' | 'quality' | 'notification-rules' | 'ops-quality'; +export type CustomerView = { + id: string; + label: string; + keyword: string; + protocol?: string; + dateFrom?: string; + dateTo?: string; +}; + const navGroups = [ { title: '实时运营', @@ -141,7 +150,10 @@ export function AppShell({ currentVehicleLabel, currentVehicleConsistency, customerTimeWindow, + customerViews, onCustomerTimeWindowChange, + onSaveCustomerView, + onOpenCustomerView, onCopyCustomerScope, onChange, onCustomerTask, @@ -157,7 +169,10 @@ export function AppShell({ currentVehicleLabel?: string; currentVehicleConsistency?: VehicleSourceConsistency; customerTimeWindow?: Record; + customerViews?: CustomerView[]; onCustomerTimeWindowChange?: (filters: Record) => void; + onSaveCustomerView?: () => void; + onOpenCustomerView?: (view: CustomerView) => void; onCopyCustomerScope?: () => void; onChange: (page: PageKey) => void; onCustomerTask?: (page: PageKey) => void; @@ -172,6 +187,7 @@ export function AppShell({ const selectedPage = activePage === 'quality' ? 'alert-events' : activePage; const dateFrom = customerTimeWindow?.dateFrom ?? ''; const dateTo = customerTimeWindow?.dateTo ?? ''; + const savedViews = customerViews ?? []; const applyTimeWindowPreset = (days: number) => { onCustomerTimeWindowChange?.({ @@ -335,6 +351,30 @@ export function AppShell({ > 复制范围 + + {savedViews.length > 0 ? ( +
+ {savedViews.slice(0, 3).map((view) => { + const rangeText = view.dateFrom || view.dateTo ? `${view.dateFrom || '未指定'} 至 ${view.dateTo || '未指定'}` : '实时范围'; + return ( + + ); + })} +
+ ) : null}