feat(platform): save reusable customer views

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<string, string>;
+  customerViews?: CustomerView[];
   onCustomerTimeWindowChange?: (filters: Record<string, string>) => 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({
               >
                 复制范围
               </Button>
+              <Button
+                size="small"
+                aria-label="顶部保存客户视图"
+                onClick={onSaveCustomerView}
+              >
+                保存视图
+              </Button>
+              {savedViews.length > 0 ? (
+                <div className="vp-topbar-saved-views" aria-label="客户视图">
+                  {savedViews.slice(0, 3).map((view) => {
+                    const rangeText = view.dateFrom || view.dateTo ? `${view.dateFrom || '未指定'} 至 ${view.dateTo || '未指定'}` : '实时范围';
+                    return (
+                      <button
+                        key={view.id}
+                        type="button"
+                        aria-label={`客户视图 ${view.label} ${rangeText}`}
+                        onClick={() => onOpenCustomerView?.(view)}
+                      >
+                        {view.label}
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : null}
               <Button
                 size="small"
                 aria-label={`顶部${alertLabel}`}