Merge asset UI rollback into main, retaining inventory details and AI

components.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/index.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "menuColor": "default",
-  "menuAccent": "subtle",
-  "registries": {}
-}

docs/asset-ui-migration.md

@@ -1,4 +1,6 @@
-# 资产管理组件库迁移
+# 资产管理组件库迁移（历史记录）
+
+> 2026-09-23：本次组件库与视觉改造已按用户要求撤销。资产页面恢复到 9b0980e 的布局和样式，保留 AI 问数入口及库存统计、权限和下钻逻辑修复。以下为撤销前的实施与验收记录。
 
 ## 范围与约束
 

package.json

@@ -18,15 +18,11 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@fontsource-variable/geist": "^5.3.0",
     "@hono/node-server": "^1.13.0",
     "@types/jsonwebtoken": "^9.0.10",
-    "ag-grid-community": "^36.2.0",
-    "ag-grid-react": "^36.2.0",
     "ali-oss": "^6.23.0",
     "class-variance-authority": "^0.7.1",
     "cn": "^0.4.0",
-    "date-fns": "^4.4.0",
     "dotenv": "^16.4.0",
     "echarts": "^6.1.0",
     "hono": "^4.7.0",
@@ -37,12 +33,9 @@
     "pg": "^8.22.0",
     "radix-ui": "^1.6.7",
     "react": "^19.0.0",
-    "react-day-picker": "^10.0.1",
     "react-dom": "^19.0.0",
     "recharts": "^3.8.1",
-    "shadcn": "^4.21.0",
     "tsx": "^4.21.0",
-    "tw-animate-css": "^1.4.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/components/SearchSelect.tsx

@@ -1,33 +1,71 @@
-import { useState, useEffect, useMemo, useRef, useId } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { ChevronDown } from 'lucide-react';
 
 export function SearchSelect({ value, onChange, options, placeholder, className }: {
-  value: string; onChange: (value: string) => void; options: string[]; placeholder: string; className?: string;
+  value: string;
+  onChange: (v: string) => void;
+  options: string[];
+  placeholder: string;
+  className?: string;
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
-  const [active,setActive]=useState(0);
   const ref = useRef<HTMLDivElement>(null);
-  const inputRef=useRef<HTMLInputElement>(null);
+
-  const id=useId();
+  useEffect(() => {
-  const filtered=useMemo(()=>options.filter(option=>option.toLowerCase().includes(query.toLowerCase())),[options,query]);
+    const handler = (e: MouseEvent) => {
-  const choices=['',...filtered];
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-  const choose=(option:string)=>{onChange(option);setQuery('');setOpen(false);};
+    };
-  useEffect(()=>{const outside=(event:MouseEvent)=>{if(ref.current && !ref.current.contains(event.target as Node))setOpen(false);};document.addEventListener('mousedown',outside);return()=>document.removeEventListener('mousedown',outside);},[]);
+    document.addEventListener('mousedown', handler);
-  useEffect(()=>{if(open)document.getElementById(`${id}-${active}`)?.scrollIntoView({block:'nearest'});},[open,active,id]);
+    return () => document.removeEventListener('mousedown', handler);
-  return <div ref={ref} className="relative">
+  }, []);
-    <div className={`flex items-center rounded-lg border border-slate-200 bg-white shadow-sm focus-within:ring-2 focus-within:ring-blue-500/20 ${className || 'px-3 py-2 text-sm'}`}>
+
-      <input ref={inputRef} type="text" role="combobox" aria-label={placeholder} aria-expanded={open} aria-controls={`${id}-list`} aria-autocomplete="list" aria-activedescendant={open?`${id}-${active}`:undefined}
+  const filtered = useMemo(() => {
-        className="min-w-0 flex-1 bg-transparent text-inherit outline-none" placeholder={placeholder} value={open?query:value}
+    if (!query) return options;
-        onClick={()=>setOpen(true)} onFocus={()=>{setOpen(true);setQuery('');setActive(0);}}
+    const q = query.toLowerCase();
-        onChange={e=>{setQuery(e.target.value);setActive(0);setOpen(true);}}
+    return options.filter((o) => o.toLowerCase().includes(q));
-        onKeyDown={e=>{if(e.key==='Escape'){e.stopPropagation();setOpen(false);}else if(e.key==='ArrowDown'||e.key==='ArrowUp'){e.preventDefault();setOpen(true);setActive(i=>(i+(e.key==='ArrowDown'?1:-1)+choices.length)%choices.length);}else if(e.key==='Enter'&&open){e.preventDefault();choose(choices[active]??'');}else if(e.key==='Tab')setOpen(false);}}
+  }, [options, query]);
+
+  const displayValue = value || '';
+
+  return (
+    <div ref={ref} className="relative">
+      <div
+        className={`flex items-center bg-white border border-gray-200 rounded-lg shadow-sm cursor-pointer transition-all focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500 ${className || 'text-xs py-1.5 px-2'}`}
+        onClick={() => setOpen(!open)}
+      >
+        <input
+          type="text"
+          className="flex-1 outline-none bg-transparent min-w-0 text-inherit"
+          placeholder={displayValue || placeholder}
+          value={open ? query : displayValue}
+          onChange={(e) => { setQuery(e.target.value); if (!open) setOpen(true); }}
+          onFocus={() => { setOpen(true); setQuery(''); }}
         />
-      <button type="button" tabIndex={-1} aria-label={open?'收起选项':'展开选项'} onMouseDown={e=>e.preventDefault()} onClick={()=>{setQuery('');setActive(0);setOpen(v=>!v);}} className="p-1 text-slate-500"><ChevronDown size={15} className={open?'rotate-180':''}/></button>
+        <ChevronDown size={14} className={`text-gray-400 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
       </div>
-    {open && <div id={`${id}-list`} role="listbox" aria-label={placeholder} className="absolute left-0 right-0 z-50 mt-1 max-h-56 overflow-auto rounded-xl border border-slate-200 bg-white p-1 shadow-xl">
+      {open && (
-      {choices.map((option,index)=><button key={option} type="button" id={`${id}-${index}`} role="option" aria-selected={option===value} tabIndex={-1} onMouseDown={e=>e.preventDefault()} onClick={()=>choose(option)} className={`block min-h-10 w-full rounded-lg px-3 py-2 text-left text-xs ${index===active?'bg-blue-50 text-blue-700':'text-slate-700 hover:bg-slate-50'}`}>{option||'全部'}</button>)}
+        <div className="absolute z-50 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-48 overflow-auto">
-      {filtered.length===0 && <p className="p-3 text-center text-xs text-slate-500">无匹配项</p>}
+          <div
-    </div>}
+            className="px-2 py-1.5 text-xs text-gray-400 cursor-pointer hover:bg-gray-50"
-  </div>;
+            onClick={() => { onChange(''); setQuery(''); setOpen(false); }}
+          >
+            {placeholder}
+          </div>
+          {filtered.map((o) => (
+            <div
+              key={o}
+              className={`px-2 py-1.5 text-xs cursor-pointer hover:bg-blue-50 transition-colors ${o === value ? 'bg-blue-50 text-blue-600 font-bold' : 'text-gray-700'}`}
+              onClick={() => { onChange(o); setQuery(''); setOpen(false); }}
+            >
+              {o}
+            </div>
+          ))}
+          {filtered.length === 0 && (
+            <div className="px-2 py-3 text-xs text-gray-400 text-center">无匹配项</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
 }

src/components/Shell.tsx

@@ -161,13 +161,19 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
               <image href="/lingniu-logo-light.svg" width="150" height="36" style={{ filter: 'brightness(0) invert(1)' }} />
             </svg>
           </div>
-          <div className="max-w-16 truncate text-center text-[10px] font-bold text-slate-400">{user?.userName || '未登录'}</div>
+          <div className="max-w-16 truncate text-center text-[9px] font-bold text-slate-400">{user?.userName || '未登录'}</div>
         </div>
       </nav>
 
       {/* 内容区 */}
       <main className="min-w-0 flex-1 pb-16 md:ml-20 md:pb-0" style={{ overflowX: 'clip' }}>
-
+        {!isHydrogenPrototype && (
+        <div className="pointer-events-none fixed left-20 right-0 top-0 z-20 hidden h-12 items-center border-b border-white/60 bg-white/55 px-6 text-xs font-bold text-slate-400 backdrop-blur-xl md:flex">
+          <span className="text-slate-600">羚牛氢能 BI</span>
+          <span className="mx-2 text-slate-300">/</span>
+          <span>{activeLabel}</span>
+        </div>
+        )}
         <Suspense fallback={<div className="p-3 md:p-6"><LoadingState label="正在加载业务模块" /></div>}>
           {ActiveComponent && <ActiveComponent />}
         </Suspense>

src/components/ui/accordion.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-import { Accordion as AccordionPrimitive } from "radix-ui"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-function Accordion({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      className={cn("flex w-full flex-col", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("not-last:border-b", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
-      {...props}
-    >
-      <div
-        className={cn(
-          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert.tsx

@@ -1,75 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-
-const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription, AlertAction }

src/components/ui/badge.tsx

@@ -1,48 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-import { Slot } from "radix-ui"
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }

src/components/ui/calendar.tsx

@@ -1,222 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "cn"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-  type Locale,
-} from "react-day-picker"
-
-import { Button, buttonVariants } from "@/components/ui/button"
-import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  locale,
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      locale={locale}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString(locale?.code, { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative rounded-(--cell-radius)",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute inset-0 bg-popover opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "font-medium select-none",
-          captionLayout === "label"
-            ? "text-sm"
-            : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
-          defaultClassNames.caption_label
-        ),
-        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
-          props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn(
-          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
-          defaultClassNames.range_end
-        ),
-        today: cn(
-          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: ({ ...props }) => (
-          <CalendarDayButton locale={locale} {...props} />
-        ),
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  locale,
-  ...props
-}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString(locale?.code)}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

@@ -1,102 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-  return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-(--card-spacing)", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

src/components/ui/checkbox.tsx

@@ -1,32 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "cn"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
-import { CheckIcon } from "lucide-react"
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
-      >
-        <CheckIcon
-        />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }

src/components/ui/field.tsx

@@ -1,236 +0,0 @@
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
-
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const fieldVariants = cva(
-  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
-  {
-    variants: {
-      orientation: {
-        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
-        horizontal:
-          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        responsive:
-          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-content"
-      className={cn(
-        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
-        "last:mt-0 nth-last-2:-mt-1",
-        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      )}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  )
-}
-
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
-    }
-
-    if (!errors?.length) {
-      return null
-    }
-
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
-
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
-      </ul>
-    )
-  }, [children, errors])
-
-  if (!content) {
-    return null
-  }
-
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-sm font-normal text-destructive", className)}
-      {...props}
-    >
-      {content}
-    </div>
-  )
-}
-
-export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-}

src/components/ui/input.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }

src/components/ui/label.tsx

@@ -1,23 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "cn"
-import { Label as LabelPrimitive } from "radix-ui"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }

src/components/ui/popover.tsx

@@ -1,86 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-import { Popover as PopoverPrimitive } from "radix-ui"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="popover-header"
-      className={cn("flex flex-col gap-0.5 text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
-  return (
-    <div
-      data-slot="popover-title"
-      className={cn("font-medium", className)}
-      {...props}
-    />
-  )
-}
-
-function PopoverDescription({
-  className,
-  ...props
-}: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="popover-description"
-      className={cn("text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}

src/components/ui/select.tsx

@@ -1,191 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "cn"
-import { Select as SelectPrimitive } from "radix-ui"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          data-position={position}
-          className={cn(
-            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
-            position === "popper" && ""
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="pointer-events-none" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon
-      />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon
-      />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

src/components/ui/separator.tsx

@@ -1,25 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-import { Separator as SeparatorPrimitive } from "radix-ui"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }

src/components/ui/sheet.tsx

@@ -1,145 +0,0 @@
-import * as React from "react"
-import { cn } from "cn"
-import { Dialog as SheetPrimitive } from "radix-ui"
-
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
-
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
-}
-
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-}
-
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        data-side={side}
-        className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetPrimitive.Close data-slot="sheet-close" asChild>
-            <Button
-              variant="ghost"
-              className="absolute top-3 right-3"
-              size="icon-sm"
-            >
-              <XIcon
-              />
-              <span className="sr-only">关闭</span>
-            </Button>
-          </SheetPrimitive.Close>
-        )}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-0.5 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn(
-        "font-heading text-base font-medium text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}

src/components/ui/surface.tsx

@@ -1,4 +1,4 @@
-import { useId, useState, type ComponentType, type ReactNode } from 'react';
+import { useState, type ComponentType, type ReactNode } from 'react';
 import { AlertCircle, Info, Loader2, SearchX, X } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import { cn } from '../../lib/cn';
@@ -31,14 +31,14 @@ export function PageFrame({
   const [infoOpen, setInfoOpen] = useState(false);
 
   return (
-    <div className="desktop-page-frame min-h-screen bg-[var(--app-bg)] text-slate-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
+    <div className="min-h-screen bg-[var(--app-bg)] text-slate-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
       <div className={cn(maxWidth, 'mx-auto flex flex-col gap-4 pb-20 md:pb-6')}>
         {!hideHeader ? <motion.header
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.28, ease: 'easeOut' }}
           className={cn(
-            'desktop-page-header relative rounded-2xl border border-white/70 bg-white/86 shadow-[0_18px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl',
+            'relative rounded-2xl border border-white/70 bg-white/86 shadow-[0_18px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl',
             compactInfo ? 'overflow-visible' : 'overflow-hidden',
           )}
         >
@@ -129,7 +129,7 @@ export function SurfaceCard({
   className?: string;
 }) {
   return (
-    <section className={cn('desktop-surface-card rounded-2xl border border-slate-100 bg-white shadow-sm', className)}>
+    <section className={cn('rounded-2xl border border-slate-100 bg-white shadow-sm', className)}>
       {(title || subtitle || actions) && (
         <div className="flex flex-wrap items-start justify-between gap-3 border-b border-slate-100 px-4 py-3">
           <div>
@@ -173,7 +173,7 @@ export function MetricTile({
 
   return (
     <div className={cn(
-      'desktop-metric-tile rounded-2xl border border-slate-100 bg-white shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md',
+      'rounded-2xl border border-slate-100 bg-white shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md',
       compact ? 'p-3' : 'p-4',
       className,
     )}>
@@ -210,9 +210,8 @@ export function SegmentedNav<T extends string>({
   onChange: (id: T) => void;
   className?: string;
 }) {
-  const indicatorId = useId();
   return (
-    <div className={cn('desktop-segmented rounded-2xl border border-white/70 bg-white/90 p-1 shadow-sm backdrop-blur-xl', className)}>
+    <div className={cn('rounded-2xl border border-white/70 bg-white/90 p-1 shadow-sm backdrop-blur-xl', className)}>
       <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))` }}>
         {tabs.map(({ id, label, icon: Icon }) => {
           const isActive = active === id;
@@ -228,7 +227,7 @@ export function SegmentedNav<T extends string>({
             >
               {isActive ? (
                 <motion.span
-                  layoutId={indicatorId}
+                  layoutId="segmented-active-pill"
                   className="absolute inset-0 rounded-xl bg-blue-50 shadow-sm ring-1 ring-blue-100"
                   transition={{ type: 'spring', stiffness: 430, damping: 34 }}
                 />

src/components/ui/tabs.tsx

@@ -1,87 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "cn"
-import { Tabs as TabsPrimitive } from "radix-ui"
-
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      data-orientation={orientation}
-      className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function TabsList({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List> &
-  VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 text-sm outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

src/index.css

@@ -1,51 +1,12 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
-@import "./shared/styles/apple-tokens.css";
-
-@custom-variant dark (&:is(.dark *));
 
 :root {
   --app-bg: #f4f7fb;
   --panel-bg: rgba(255, 255, 255, 0.9);
   --hairline: rgba(148, 163, 184, 0.18);
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: var(--blue);
-  --primary-foreground: var(--bg);
-  --secondary: var(--gray-6);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: var(--blue);
-  --chart-1: var(--blue);
-  --chart-2: var(--indigo);
-  --chart-3: var(--teal);
-  --chart-4: var(--orange);
-  --chart-5: var(--green);
-  --radius: 1rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
 }
 
-html,
+html, body {
-body {
   overscroll-behavior: none;
   -webkit-overflow-scrolling: touch;
   background: var(--app-bg);
@@ -61,11 +22,10 @@ body {
   height: 100%;
   color: #0f172a;
   background: #fff;
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
-button,
+button, input, select {
-input,
-select {
   font-family: inherit;
 }
 
@@ -89,32 +49,18 @@ select {
 }
 
 @keyframes marquee {
-  from {
+  from { transform: translateX(0); }
-    transform: translateX(0);
+  to   { transform: translateX(-50%); }
-  }
-  to {
-    transform: translateX(-50%);
-  }
 }
 
 @keyframes shimmer {
-  0% {
+  0% { transform: translateX(-100%); }
-    transform: translateX(-100%);
+  100% { transform: translateX(100%); }
-  }
-  100% {
-    transform: translateX(100%);
-  }
 }
 
 @keyframes floatUp {
-  from {
+  from { opacity: 0; transform: translateY(8px); }
-    opacity: 0;
+  to { opacity: 1; transform: translateY(0); }
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
 }
 
 @utility animate-marquee {
@@ -124,9 +70,7 @@ select {
 @utility no-scrollbar {
   scrollbar-width: none;
   -ms-overflow-style: none;
-  &::-webkit-scrollbar {
+  &::-webkit-scrollbar { display: none; }
-    display: none;
-  }
 }
 
 .shimmer {
@@ -137,27 +81,14 @@ select {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.72),
-    transparent
-  );
   animation: shimmer 1.4s infinite;
 }
 
 .enterprise-grid-bg {
   background:
-    radial-gradient(
+    radial-gradient(circle at 16% 0%, rgba(59, 130, 246, 0.08), transparent 28%),
-      circle at 16% 0%,
+    radial-gradient(circle at 90% 12%, rgba(20, 184, 166, 0.08), transparent 26%),
-      rgba(59, 130, 246, 0.08),
-      transparent 28%
-    ),
-    radial-gradient(
-      circle at 90% 12%,
-      rgba(20, 184, 166, 0.08),
-      transparent 26%
-    ),
     linear-gradient(180deg, #f8fbff 0%, var(--app-bg) 42%, #f7f9fc 100%);
 }
 
@@ -165,170 +96,3 @@ select {
   cursor: pointer;
   opacity: 0;
 }
-
-/* AG Grid 数字列：列头 label 是 flex，需要单独右对齐；单元格由 cellStyle 控制。 */
-.ag-numeric-header .ag-header-cell-label {
-  justify-content: flex-end;
-}
-
-/* Desktop information density: shared page primitives only; touch layouts stay intact. */
-@media (min-width: 1024px) {
-  .desktop-page-frame {
-    padding: 16px 20px;
-  }
-  .desktop-page-frame > div {
-    gap: 12px;
-  }
-  .desktop-page-header {
-    border-radius: 12px;
-    box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
-  }
-  .desktop-page-header > div.absolute {
-    display: none;
-  }
-  .desktop-page-header > div:not(.absolute) {
-    padding: 12px 16px;
-    gap: 12px;
-  }
-  .desktop-page-header h1 {
-    font-size: 20px;
-    font-weight: 650;
-  }
-  .desktop-page-header p {
-    margin-top: 4px;
-    font-size: 12px;
-    font-weight: 400;
-  }
-  .desktop-surface-card {
-    border-radius: 12px;
-    box-shadow: none;
-  }
-  .desktop-surface-card > div:first-child {
-    gap: 8px;
-  }
-  .desktop-metric-tile {
-    padding: 12px 14px;
-    border-radius: 12px;
-    box-shadow: none;
-  }
-  .desktop-metric-tile:hover {
-    transform: none;
-  }
-  .desktop-metric-tile > div:nth-child(2) {
-    margin-top: 8px;
-  }
-  .desktop-metric-tile > div:nth-child(2) > span:first-child {
-    font-size: 24px;
-    font-weight: 650;
-  }
-  .desktop-segmented {
-    width: fit-content;
-    max-width: 100%;
-    border-radius: 10px;
-    box-shadow: none;
-  }
-  .desktop-segmented > div {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .desktop-segmented button {
-    min-height: 32px;
-    padding: 5px 18px;
-    font-weight: 600;
-    border-radius: 7px;
-  }
-  .desktop-segmented button > span.absolute {
-    border-radius: 7px;
-  }
-}
-
-@theme inline {
-  --font-heading: var(--font-sans);
-  --font-sans:
-    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
-    "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  html {
-    @apply font-sans;
-  }
-}

src/lib/utils.ts

@@ -1 +0,0 @@
-export { cn } from "cn"

src/modules/assets/assistant/ResultView.tsx

@@ -16,7 +16,7 @@ import type {
   AssistantRow,
 } from "../../../shared/assets/assistant";
 import { GROUP_LABELS } from "../../../shared/assets/assistant";
-import { Chart } from "../library/Chart";
+import { Chart } from "./Chart";
 
 function downloadCsv(rows: string[][], title: string) {
   const content = rows

src/modules/assets/components/AbnormalVehicleDetails.tsx

@@ -0,0 +1,51 @@
+import type { VehicleListItem } from '../types';
+
+type DetailsProps = { vehicles: VehicleListItem[] };
+
+function InventoryVehicleDetails({ vehicles, kind }: DetailsProps & { kind: 'abnormal' | 'pending' }) {
+  const pending = kind === 'pending';
+  const labels = pending ? ['合同编号', '客户名称（已脱敏）'] : ['异动类型', '预计结束时间'];
+  const details = (vehicle: VehicleListItem) => pending
+    ? [vehicle.pendingDelivery?.contractNo || '未提供', vehicle.pendingDelivery?.customerName || '未提供']
+    : [vehicle.abnormalMove?.type || '未提供', vehicle.abnormalMove?.targetCompletionTime || '未提供'];
+
+  if (vehicles.length === 0) return <div className="py-14 text-center text-sm text-slate-500">暂无符合筛选条件的{pending ? '待交车' : '异动车辆'}</div>;
+
+  return <>
+    <p className="px-4 py-3 text-xs leading-5 text-slate-500">{pending ? '展示当前待交车任务的合同信息，客户名称已脱敏。' : '展示当前异动类型与预计结束时间。'}</p>
+    <div className="space-y-3 px-3 pb-3 md:hidden">
+      {vehicles.map(vehicle => <article key={vehicle.id} className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+        <h4 className="break-all font-mono text-base font-bold text-blue-700"><>{vehicle.plateNumber || vehicle.vin || '—'}</></h4>
+        <p className="mt-1 text-xs text-slate-500">{vehicle.brandLabel || '—'} · {vehicle.type} · {vehicle.location === '其他' ? '对接中' : vehicle.location}</p>
+        <dl className="mt-4 space-y-3 text-xs">
+          {details(vehicle).map((value, index) => <div key={labels[index]} className="grid grid-cols-[7.5rem_minmax(0,1fr)] gap-2">
+            <dt className="text-slate-500">{labels[index]}</dt>
+            <dd className="break-words font-medium text-slate-800 [overflow-wrap:anywhere]"><>{value}</></dd>
+          </div>)}
+        </dl>
+      </article>)}
+    </div>
+    <div className="hidden md:block">
+      <table className="w-full min-w-[700px] border-collapse text-left text-xs">
+        <thead className="sticky top-0 z-20 bg-slate-700 text-white"><tr>
+          {['车牌', '品牌', '车型', '所在地', ...labels].map(label => <th key={label} className="whitespace-nowrap p-3">{label}</th>)}
+        </tr></thead>
+        <tbody>{vehicles.map(vehicle => <tr key={vehicle.id} className="border-b border-slate-200 bg-white align-top">
+          <td className="p-3 font-mono font-bold text-blue-700"><>{vehicle.plateNumber || vehicle.vin || '—'}</></td>
+          <td className="p-3 text-slate-600">{vehicle.brandLabel || '—'}</td>
+          <td className="p-3 text-slate-600">{vehicle.type}</td>
+          <td className="p-3 text-slate-600">{vehicle.location === '其他' ? '对接中' : vehicle.location}</td>
+          {details(vehicle).map((value, index) => <td key={labels[index]} className="max-w-64 break-words p-3 text-slate-700 [overflow-wrap:anywhere]"><>{value}</></td>)}
+        </tr>)}</tbody>
+      </table>
+    </div>
+  </>;
+}
+
+export function AbnormalVehicleDetails(props: DetailsProps) {
+  return <InventoryVehicleDetails {...props} kind="abnormal" />;
+}
+
+export function PendingVehicleDetails(props: DetailsProps) {
+  return <InventoryVehicleDetails {...props} kind="pending" />;
+}

src/modules/assets/components/AssetsHeader.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { ChevronDown, Filter, Loader2, Search, Sparkles } from 'lucide-react';
+import { motion } from 'motion/react';
+import type { SubjectOption } from '../api';
+
+export type AssetsTab = 'overview' | 'department' | 'region' | 'customer';
+export type AssetsTheme = 'soft' | 'minimal' | 'vibrant';
+
+interface AssetsHeaderProps {
+  onOpenAssistant: () => void;
+  assistantTrigger: React.RefObject<HTMLButtonElement | null>;
+  activeTab: AssetsTab;
+  setActiveTab: React.Dispatch<React.SetStateAction<AssetsTab>>;
+  theme: AssetsTheme;
+  setTheme: React.Dispatch<React.SetStateAction<AssetsTheme>>;
+  lastUpdate: string;
+  loading: boolean;
+  selectedSubject: string | null;
+  setSelectedSubject: React.Dispatch<React.SetStateAction<string | null>>;
+  subjects: SubjectOption[];
+  subjectDropdownOpen: boolean;
+  setSubjectDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  subjectSearch: string;
+  setSubjectSearch: React.Dispatch<React.SetStateAction<string>>;
+  subjectDropdownRef: React.RefObject<HTMLDivElement | null>;
+}
+// --- Constants ---
+const TABS = [
+  { id: 'overview', label: '总览' },
+  { id: 'department', label: '按部门' },
+  { id: 'region', label: '按区域' },
+  { id: 'customer', label: '按客户' },
+];
+
+export function AssetsHeader({
+  onOpenAssistant,
+  assistantTrigger,
+  activeTab,
+  setActiveTab,
+  theme,
+  setTheme,
+  lastUpdate,
+  loading,
+  selectedSubject,
+  setSelectedSubject,
+  subjects,
+  subjectDropdownOpen,
+  setSubjectDropdownOpen,
+  subjectSearch,
+  setSubjectSearch,
+  subjectDropdownRef,
+}: AssetsHeaderProps) {
+  return (
+    <>
+      {/* Compact Header Bar */}
+      <div className="sticky top-0 z-40 -mx-3 -mt-3 mb-4 bg-white/95 backdrop-blur-sm border-b border-gray-100/80 md:-mx-6 md:-mt-6">
+        {/* Title row */}
+        <div className="relative flex items-center justify-center px-4 pt-3 pb-1">
+          <h1 className="hidden sm:block text-base font-semibold text-gray-800 tracking-wide">羚牛氢能-资产BI</h1>
+          {/* Right: status + theme */}
+          <div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
+            <div className="hidden sm:flex items-center gap-1 text-[10px] text-gray-400">
+              <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse inline-block" />
+              <span>{lastUpdate}</span>
+            </div>
+            {loading && (
+              <div className="flex items-center gap-1 text-[10px] text-gray-400">
+                <Loader2 className="animate-spin" size={10} />
+              </div>
+            )}
+            <div className="hidden sm:flex bg-gray-100 p-0.5 rounded-lg text-[10px]">
+              {(['soft','minimal','vibrant'] as const).map((t) => (
+                <button
+                  key={t}
+                  onClick={() => setTheme(t)}
+                  className={`px-2 py-0.5 rounded-md transition-all ${theme === t ? 'bg-white text-blue-600 shadow-sm font-semibold' : 'text-gray-400 hover:text-gray-600'}`}
+                >
+                  {t === 'soft' ? '柔和' : t === 'minimal' ? '简约' : '经典'}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-end px-4 pb-1">
+          <button ref={assistantTrigger} type="button" onClick={onOpenAssistant} className="inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-blue-100 bg-blue-50 px-3 text-xs font-semibold text-blue-600 hover:bg-blue-100">
+            <Sparkles size={14} aria-hidden="true" />AI 问数
+          </button>
+        </div>
+        {/* 归属公司作用域筛选 (Scope Chip) */}
+        <div className="flex items-center justify-center px-4 pt-1">
+          <div className="relative" ref={subjectDropdownRef}>
+            <button
+              type="button"
+              onClick={() => {
+                setSubjectDropdownOpen((o) => !o);
+                setSubjectSearch('');
+              }}
+              className={`group inline-flex items-center gap-1.5 h-7 pl-2.5 pr-2 rounded-full border text-[11px] font-normal transition-all cursor-pointer ${
+                selectedSubject
+                  ? 'bg-blue-50 border-blue-300 text-blue-700 hover:bg-blue-100'
+                  : 'bg-white border-gray-200 text-gray-500 hover:border-gray-300 hover:text-gray-700'
+              }`}
+              title={selectedSubject || '全部公司'}
+            >
+              <Filter size={11} className={selectedSubject ? 'text-blue-500' : 'text-gray-400'} />
+              <span className="max-w-[180px] truncate">
+                所属公司：{selectedSubject || '全部公司'}
+              </span>
+              {selectedSubject ? (
+                <span
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSelectedSubject(null);
+                  }}
+                  className="ml-0.5 w-3.5 h-3.5 inline-flex items-center justify-center rounded-full text-blue-500 hover:bg-blue-200 hover:text-blue-700 cursor-pointer"
+                  aria-label="清除归属公司筛选"
+                >
+                  ×
+                </span>
+              ) : (
+                <ChevronDown size={11} className="text-gray-400" />
+              )}
+            </button>
+            {subjectDropdownOpen && (
+              <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1.5 w-[320px] max-h-[380px] bg-white border border-gray-200 rounded-lg shadow-lg z-50 flex flex-col">
+                <div className="p-2 border-b border-gray-100">
+                  <div className="relative">
+                    <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400" />
+                    <input
+                      autoFocus
+                      value={subjectSearch}
+                      onChange={(e) => setSubjectSearch(e.target.value)}
+                      placeholder="搜索公司名"
+                      className="w-full h-7 pl-6 pr-2 text-[11px] bg-gray-50 border border-gray-100 rounded focus:outline-none focus:border-blue-300 focus:bg-white"
+                    />
+                  </div>
+                </div>
+                <div className="overflow-y-auto flex-1 py-1">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedSubject(null);
+                      setSubjectDropdownOpen(false);
+                    }}
+                    className={`w-full flex items-center justify-between px-3 py-1.5 text-[11px] hover:bg-gray-50 cursor-pointer ${
+                      !selectedSubject ? 'text-blue-600 font-medium' : 'text-gray-700'
+                    }`}
+                  >
+                    <span className="flex items-center gap-1.5">
+                      <span className={`w-1.5 h-1.5 rounded-full ${!selectedSubject ? 'bg-blue-500' : 'bg-gray-300'}`} />
+                      全部公司
+                    </span>
+                    <span className="text-[10px] text-gray-400">
+                      {subjects.reduce((s, x) => s + x.total, 0)} 台
+                    </span>
+                  </button>
+                  <div className="my-1 mx-3 border-t border-gray-100" />
+                  {subjects
+                    .filter((s) => !subjectSearch || s.name.toLowerCase().includes(subjectSearch.toLowerCase()))
+                    .map((s) => {
+                      const active = selectedSubject === s.name;
+                      return (
+                        <button
+                          key={s.name}
+                          type="button"
+                          onClick={() => {
+                            setSelectedSubject(s.name);
+                            setSubjectDropdownOpen(false);
+                          }}
+                          className={`w-full flex items-center justify-between gap-2 px-3 py-1.5 text-[11px] hover:bg-gray-50 cursor-pointer ${
+                            active ? 'text-blue-600 font-medium bg-blue-50/40' : 'text-gray-700'
+                          }`}
+                          title={s.name}
+                        >
+                          <span className="flex items-center gap-1.5 min-w-0">
+                            <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${active ? 'bg-blue-500' : 'bg-gray-300'}`} />
+                            <span className="truncate">{s.name}</span>
+                          </span>
+                          <span className="text-[10px] text-gray-400 flex-shrink-0 tabular-nums">
+                            {s.total} 台
+                            <span className="mx-1 text-gray-200">·</span>
+                            <span className="text-green-500">运营 {s.operating}</span>
+                          </span>
+                        </button>
+                      );
+                    })}
+                  {subjects.filter((s) => !subjectSearch || s.name.toLowerCase().includes(subjectSearch.toLowerCase())).length === 0 && (
+                    <div className="px-3 py-6 text-center text-[11px] text-gray-400">未找到匹配公司</div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Tab row */}
+        <div className="flex items-center justify-center gap-1 px-4 pb-0 overflow-x-auto no-scrollbar">
+          {TABS.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as typeof activeTab)}
+              className={`relative px-4 py-2 text-[13px] font-normal transition-all whitespace-nowrap ${
+                activeTab === tab.id
+                  ? 'text-blue-600 font-medium'
+                  : 'text-gray-400 hover:text-gray-500'
+              }`}
+            >
+              {tab.label}
+              {activeTab === tab.id && (
+                <motion.div
+                  layoutId="activeTab"
+                  className="absolute bottom-0 left-2 right-2 h-[1.5px] bg-blue-600 rounded-full"
+                  transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                />
+              )}
+            </button>
+          ))}
+        </div>
+        {/* Status row */}
+        <div className="flex flex-wrap items-center justify-center gap-x-1 gap-y-0.5 px-3 py-1.5 text-[10px] text-gray-400">
+          <div className="flex items-center gap-1">
+            <span className="w-1 h-1 rounded-full bg-blue-400 inline-block" />
+            数据更新时间：{lastUpdate.slice(0, 16)}
+          </div>
+          <span aria-hidden="true">｜</span>
+          <span className="whitespace-nowrap">运维台账每日统计口径：当日17:00</span>
+        </div>
+      </div>
+
+    </>
+  );
+}

src/modules/assets/components/FlowDetailModal.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { Download, X } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { FlowDetailItem, FlowType } from '../api';
+import type { FlowSelection } from '../model';
+
+export const FLOW_META: Record<FlowType, { label: string; tone: string; chip: string }> = {
+  delivered: { label: '交车', tone: 'text-blue-600 bg-blue-50 border-blue-100', chip: 'bg-blue-50 text-blue-700 border-blue-100' },
+  returned: { label: '还车', tone: 'text-orange-600 bg-orange-50 border-orange-100', chip: 'bg-orange-50 text-orange-700 border-orange-100' },
+  replaced: { label: '替换交车', tone: 'text-violet-600 bg-violet-50 border-violet-100', chip: 'bg-violet-50 text-violet-700 border-violet-100' },
+};
+
+interface FlowDetailModalProps {
+  selectedFlow: FlowSelection | null;
+  selectedFlowDetails: FlowDetailItem[];
+  setSelectedFlow: React.Dispatch<React.SetStateAction<FlowSelection | null>>;
+  exportFlowDetails: (rows?: FlowDetailItem[], title?: string) => void;
+}
+export function FlowDetailModal({
+  selectedFlow,
+  selectedFlowDetails,
+  setSelectedFlow,
+  exportFlowDetails,
+}: FlowDetailModalProps) {
+  const dateLabel = selectedFlow
+    ? ('date' in selectedFlow ? selectedFlow.date : `${selectedFlow.start} 至 ${selectedFlow.end}`)
+    : '';
+  return (
+    <>
+        {/* Flow Detail Modal */}
+        <AnimatePresence>
+          {selectedFlow && (
+            <div className="fixed inset-0 z-[1000] flex items-end justify-center bg-slate-950/45 p-0 backdrop-blur-sm sm:items-center sm:p-4">
+              <motion.div
+                data-testid="asset-flow-detail-modal"
+                initial={{ opacity: 0, y: 28, scale: 0.98 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 20, scale: 0.98 }}
+                className="flex max-h-[88vh] w-full flex-col overflow-hidden rounded-t-3xl bg-white shadow-2xl sm:max-w-5xl sm:rounded-3xl"
+              >
+                <div className="border-b border-slate-100 bg-slate-950 px-4 py-4 text-white sm:px-5">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <div className="text-[11px] font-black uppercase tracking-wide text-slate-400">运维签章时间口径 · 单位：车次</div>
+                      <h3 className="mt-1 text-lg font-black">
+                        {dateLabel} · {FLOW_META[selectedFlow.type].label}明细
+                      </h3>
+                      <div className="mt-1 text-[12px] font-bold text-slate-300">
+                        共 {selectedFlowDetails.length} 车次，包含车牌、运维签章时间、建单时间、部门、负责人和客户
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      aria-label="关闭流转明细"
+                      onClick={() => setSelectedFlow(null)}
+                      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
+                    >
+                      <X size={18} />
+                    </button>
+                  </div>
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      onClick={() => exportFlowDetails(selectedFlowDetails, `${dateLabel}-${FLOW_META[selectedFlow.type].label}明细`)}
+                      disabled={selectedFlowDetails.length === 0}
+                      className="inline-flex h-8 items-center gap-1 rounded-xl bg-white px-3 text-[11px] font-black text-slate-900 transition hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <Download size={13} />
+                      导出当前明细
+                    </button>
+                  </div>
+                </div>
+
+                <div className="overflow-auto bg-slate-50 p-3 sm:p-4">
+                  <div className="hidden overflow-hidden rounded-2xl border border-slate-100 bg-white lg:block">
+                    <table className="w-full table-fixed text-left">
+                      <thead className="bg-slate-50 text-[11px] font-black text-slate-400">
+                        <tr>
+                          <th className="w-28 px-3 py-3">车牌</th>
+                          <th className="w-40 px-3 py-3">运维签章时间</th>
+                          <th className="w-40 px-3 py-3">建单时间</th>
+                          <th className="w-36 px-3 py-3">部门</th>
+                          <th className="w-28 px-3 py-3">业务负责人</th>
+                          <th className="px-3 py-3">客户</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-slate-100 text-[12px] font-bold text-slate-700">
+                        {selectedFlowDetails.map((item) => (
+                          <tr key={item.id} className="hover:bg-blue-50/40">
+                            <td className="px-3 py-3 font-black text-slate-950">{item.plateNumber}{item.type === 'replaced' && <span className="mt-1 block text-[10px] text-violet-600">替换交车</span>}</td>
+                            <td className="px-3 py-3 text-slate-500">{item.eventTime || '-'}</td>
+                            <td className="px-3 py-3 text-blue-600">{item.submitTime || '-'}</td>
+                            <td className="px-3 py-3">{item.department || '-'}</td>
+                            <td className="px-3 py-3">{item.manager || '-'}</td>
+                            <td className="px-3 py-3">{item.customerName || '-'}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+
+                  <div className="space-y-2 lg:hidden">
+                    {selectedFlowDetails.map((item) => (
+                      <div key={item.id} className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+                        <div className="flex items-start justify-between gap-3">
+                          <div>
+                            <div className="text-base font-black text-slate-950">{item.plateNumber}</div>
+                            <div className={`mt-1 inline-flex rounded-full border px-2 py-0.5 text-[10px] font-black ${FLOW_META[item.type].chip}`}>
+                              {item.typeLabel}
+                            </div>
+                          </div>
+                          <div className="text-right text-[10px] font-bold text-slate-400">
+                            <div>建单</div>
+                            <div className="mt-0.5 text-[11px] text-blue-600">{item.submitTime?.slice(5, 16) || '-'}</div>
+                          </div>
+                        </div>
+                        <div className="mt-3 grid grid-cols-2 gap-2 text-[11px]">
+                          <div className="rounded-xl bg-slate-50 p-2">
+                            <div className="font-black text-slate-400">运维签章时间</div>
+                            <div className="mt-1 font-bold text-slate-700">{item.eventTime || '-'}</div>
+                          </div>
+                          <div className="rounded-xl bg-slate-50 p-2">
+                            <div className="font-black text-slate-400">负责人</div>
+                            <div className="mt-1 font-bold text-slate-700">{item.manager || '-'}</div>
+                          </div>
+                          <div className="rounded-xl bg-slate-50 p-2">
+                            <div className="font-black text-slate-400">部门</div>
+                            <div className="mt-1 font-bold text-slate-700">{item.department || '-'}</div>
+                          </div>
+                          <div className="rounded-xl bg-slate-50 p-2">
+                            <div className="font-black text-slate-400">客户</div>
+                            <div className="mt-1 line-clamp-2 font-bold text-slate-700">{item.customerName || '-'}</div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {selectedFlowDetails.length === 0 && (
+                    <div className="rounded-2xl bg-white px-4 py-10 text-center text-sm font-bold text-slate-400">当前日期暂无明细</div>
+                  )}
+                </div>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>
+    </>
+  );
+}

src/modules/assets/components/OverviewView.tsx

@@ -0,0 +1,64 @@
+import { AssetSummarySection } from './overview/AssetSummarySection';
+import { FlowStatisticsCard } from './overview/FlowStatisticsCard';
+import { InventoryStatisticsSection } from './overview/InventoryStatisticsSection';
+import { SummaryMetrics } from './overview/SummaryMetrics';
+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}
+      />
+
+      <FlowStatisticsCard
+        flowRange={props.flowRange}
+        setFlowRange={props.setFlowRange}
+        flowLoading={props.flowLoading}
+        flowStats={props.flowStats}
+        exportFlowDetails={props.exportFlowDetails}
+        flowDailyExpanded={props.flowDailyExpanded}
+        setFlowDailyExpanded={props.setFlowDailyExpanded}
+        setSelectedFlow={props.setSelectedFlow}
+      />
+
+      <AssetSummarySection
+        processedData={props.processedData}
+        theme={props.theme}
+        expandedAssetTypes={props.expandedAssetTypes}
+        toggleAssetType={props.toggleAssetType}
+        expandedModels={props.expandedModels}
+        toggleModel={props.toggleModel}
+        setVehicleSelection={props.setVehicleSelection}
+      />
+
+      <InventoryStatisticsSection
+        inventoryFilters={props.inventoryFilters}
+        setInventoryFilters={props.setInventoryFilters}
+        draftInventoryFilters={props.draftInventoryFilters}
+        setDraftInventoryFilters={props.setDraftInventoryFilters}
+        isInventoryFilterOpen={props.isInventoryFilterOpen}
+        setIsInventoryFilterOpen={props.setIsInventoryFilterOpen}
+        uniqueInventoryRegions={props.uniqueInventoryRegions}
+        uniqueInventoryCities={props.uniqueInventoryCities}
+        uniqueInventoryBrands={props.uniqueInventoryBrands}
+        uniqueInventoryTypes={props.uniqueInventoryTypes}
+        uniqueInventoryModelsForType={props.uniqueInventoryModelsForType}
+        filteredInventoryStats={props.filteredInventoryStats}
+        inventoryTab={props.inventoryTab}
+        setInventoryTab={props.setInventoryTab}
+        inventoryByRegion={props.inventoryByRegion}
+        expandedInventoryRegions={props.expandedInventoryRegions}
+        toggleInventoryRegion={props.toggleInventoryRegion}
+        inventoryByModel={props.inventoryByModel}
+        expandedInventoryTypes={props.expandedInventoryTypes}
+        toggleInventoryType={props.toggleInventoryType}
+        setVehicleSelection={props.setVehicleSelection}
+      />
+    </>
+  );
+}

src/modules/assets/components/VehicleDetailModal.tsx

@@ -0,0 +1,291 @@
+import React, { useCallback, useRef } from 'react';
+import { AbnormalVehicleDetails, PendingVehicleDetails } from './AbnormalVehicleDetails';
+import { useDialogFocus } from './useDialogFocus';
+import { ChevronDown, Filter, Loader2, PlusCircle, Truck } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import { SearchSelect } from '../../../components/SearchSelect';
+import type { WeeklyDetailItem } from '../api';
+import type { ModalVehicleFilters, VehicleModalSelection } from '../model';
+import type { VehicleListItem } from '../types';
+
+interface VehicleDetailModalProps {
+  selection: VehicleModalSelection | null;
+  setSelection: React.Dispatch<React.SetStateAction<VehicleModalSelection | null>>;
+  isFilterExpanded: boolean;
+  setIsFilterExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+  filters: ModalVehicleFilters;
+  setFilters: React.Dispatch<React.SetStateAction<ModalVehicleFilters>>;
+  plates: string[];
+  models: string[];
+  brands: string[];
+  locations: string[];
+  loading: boolean;
+  weeklyDetails: WeeklyDetailItem[];
+  filteredWeeklyDetails: WeeklyDetailItem[];
+  filteredVehicles: VehicleListItem[];
+}
+export function VehicleDetailModal({
+  selection: showPlateNumbers,
+  setSelection: setShowPlateNumbers,
+  isFilterExpanded: isModalFilterExpanded,
+  setIsFilterExpanded: setIsModalFilterExpanded,
+  filters: modalFilters,
+  setFilters: setModalFilters,
+  plates: uniqueModalPlates,
+  models: uniqueModalModels,
+  brands: uniqueModalBrands,
+  locations: uniqueModalLocations,
+  loading: modalLoading,
+  weeklyDetails: modalWeeklyDetail,
+  filteredWeeklyDetails: filteredModalWeeklyDetail,
+  filteredVehicles: filteredModalVehicles,
+}: VehicleDetailModalProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const close = useCallback(() => setShowPlateNumbers(null), [setShowPlateNumbers]);
+  useDialogFocus(Boolean(showPlateNumbers), dialogRef, close);
+  return (
+    <>
+        {/* Vehicle Detail Modal */}
+        <AnimatePresence>
+          {showPlateNumbers && (
+            <div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+              <motion.div
+                ref={dialogRef} role="dialog" aria-modal="true" aria-label={showPlateNumbers.title || "车辆明细"} tabIndex={-1}
+                initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                animate={{ scale: 1, opacity: 1, y: 0 }}
+                className={`bg-white rounded-xl shadow-2xl w-full max-w-[95vw] ${showPlateNumbers.source === 'customer' ? 'lg:max-w-6xl' : 'lg:max-w-4xl'} overflow-hidden flex flex-col max-h-[85vh] sm:max-h-[90vh] min-h-[40vh]`}
+              >
+                <div className="p-4 border-b border-gray-100 flex justify-between items-center bg-slate-800 text-white shrink-0">
+                  <div>
+                    <h3 className="font-bold text-base flex items-center gap-2">
+                      <Truck size={18} className="text-blue-400" />
+                      {showPlateNumbers.title || (
+                        (showPlateNumbers.manager ? `${showPlateNumbers.manager} 的${showPlateNumbers.type || ''}车辆` :
+                         showPlateNumbers.customer ? `${showPlateNumbers.customer} 的${showPlateNumbers.type || ''}车辆` :
+                         showPlateNumbers.batch === 'All' ? '全量批次' : `${showPlateNumbers.batch} 批次`) + ' - 运营明细'
+                      )}
+                    </h3>
+                    <p className="text-[10px] opacity-60 mt-0.5">
+                      {showPlateNumbers.model === 'All' ? '全量型号' : showPlateNumbers.model} |
+                      {showPlateNumbers.category === 'Pending' ? '待交车' :
+                       showPlateNumbers.category === 'Delivered' ? '本周已交车' :
+                       showPlateNumbers.category === 'Returned' ? '已还车' :
+                       showPlateNumbers.category === 'Replaced' ? '已替换' :
+                       showPlateNumbers.category === 'Abnormal' ? '异动' :
+                       showPlateNumbers.category === 'Inventory' ? `${showPlateNumbers.location}库存` :
+                       showPlateNumbers.category === 'Operating' ? '正在运营' : '全部状态'}
+                    </p>
+                  </div>
+                  <button aria-label="关闭车辆明细" onClick={close} className="hover:bg-white/10 p-2 rounded-full transition-colors">
+                    <PlusCircle className="rotate-45" size={24} />
+                  </button>
+                </div>
+
+                {/* Modal Filters */}
+                <div className="px-4 py-2 bg-slate-50 border-b border-gray-200 shrink-0">
+                  <div
+                    className="flex justify-between items-center cursor-pointer py-1"
+                    onClick={() => setIsModalFilterExpanded(!isModalFilterExpanded)}
+                  >
+                    <div className="flex items-center gap-2 text-slate-600">
+                      <Filter size={14} />
+                      <span className="text-xs font-bold">筛选条件</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      {/* Quick Search always visible when collapsed */}
+                      {!isModalFilterExpanded && (
+                        <div className="w-40 sm:w-64" onClick={(e) => e.stopPropagation()}>
+                          <SearchSelect value={modalFilters.plateNumber} onChange={(v) => setModalFilters({...modalFilters, plateNumber: v})} options={uniqueModalPlates} placeholder="快速搜索车牌..." className="text-[11px] py-1 px-2" />
+                        </div>
+                      )}
+                      <motion.div
+                        animate={{ rotate: isModalFilterExpanded ? 180 : 0 }}
+                        transition={{ duration: 0.2 }}
+                      >
+                        <ChevronDown size={16} className="text-slate-400" />
+                      </motion.div>
+                    </div>
+                  </div>
+
+                  <AnimatePresence>
+                    {isModalFilterExpanded && (
+                      <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        className="overflow-hidden"
+                      >
+                        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 py-3 border-t border-gray-100 mt-1">
+                          <div className="space-y-1">
+                            <label className="block text-[10px] text-gray-500 font-medium">车牌号码</label>
+                            <SearchSelect value={modalFilters.plateNumber} onChange={(v) => setModalFilters({...modalFilters, plateNumber: v})} options={uniqueModalPlates} placeholder="全部车牌" className="text-[11px] py-1.5 px-2" />
+                          </div>
+                          <div className="space-y-1">
+                            <label className="block text-[10px] text-gray-500 font-medium">车型型号</label>
+                            <select value={modalFilters.model} onChange={(e) => setModalFilters({...modalFilters, model: e.target.value})} className="w-full text-[11px] px-2 py-1.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                              <option value="">全部车型</option>
+                              {uniqueModalModels.map(m => <option key={m} value={m}>{m}</option>)}
+                            </select>
+                          </div>
+                          <div className="space-y-1">
+                            <label className="block text-[10px] text-gray-500 font-medium">品牌名称</label>
+                            <select value={modalFilters.brand} onChange={(e) => setModalFilters({...modalFilters, brand: e.target.value})} className="w-full text-[11px] px-2 py-1.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                              <option value="">全部品牌</option>
+                              {uniqueModalBrands.map(b => <option key={b} value={b}>{b}</option>)}
+                            </select>
+                          </div>
+                          <div className="space-y-1">
+                            <label className="block text-[10px] text-gray-500 font-medium">运营所在地</label>
+                            <select value={modalFilters.location} onChange={(e) => setModalFilters({...modalFilters, location: e.target.value})} className="w-full text-[11px] px-2 py-1.5 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                              <option value="">全部地区</option>
+                              {uniqueModalLocations.map(l => <option key={l} value={l}>{l}</option>)}
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex justify-end pb-2">
+                          <button
+                            onClick={() => setModalFilters({ plateNumber: '', model: '', brand: '', location: '' })}
+                            className="text-[10px] text-blue-500 hover:text-blue-600 font-medium"
+                          >
+                            重置筛选
+                          </button>
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+
+                <div className="flex-1 overflow-auto p-0 sm:p-4 bg-gray-50 min-h-0 overscroll-contain">
+                  {modalLoading ? (
+                    <div className="flex items-center justify-center py-16">
+                      <Loader2 className="animate-spin text-blue-500" size={32} />
+                    </div>
+                  ) : showPlateNumbers.category === 'Abnormal' ? (
+                    <AbnormalVehicleDetails vehicles={filteredModalVehicles} />
+                  ) : showPlateNumbers.category === 'Pending' ? (
+                    <PendingVehicleDetails vehicles={filteredModalVehicles} />
+                  ) : modalWeeklyDetail.length > 0 ? (
+                    <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden w-full">
+                      <table className="w-full text-left border-collapse">
+                        <thead>
+                          <tr className="bg-slate-700 text-white text-[10px] uppercase tracking-wider sticky top-0 z-20 shadow-sm">
+                            <th className="p-2 font-semibold border-r border-slate-600 text-center">车牌</th>
+                            <th className="p-2 font-semibold border-r border-slate-600 text-center">客户名称</th>
+                            <th className="p-2 font-semibold text-center">日期</th>
+                          </tr>
+                        </thead>
+                        <tbody className="text-[11px]">
+                          {filteredModalWeeklyDetail.map((v, i) => (
+                            <tr key={`${v.truck_id}-${i}`} className={`border-b border-gray-100 hover:bg-blue-50/50 transition-colors ${i % 2 === 0 ? 'bg-white' : 'bg-gray-50/30'}`}>
+                              <td className="p-2 border-r border-gray-100 font-mono font-bold text-blue-700 text-center"><>{v.plate_number}</></td>
+                              <td className="p-2 border-r border-gray-100 text-gray-600 text-center"><>{v.customer_name || '—'}</></td>
+                              <td className="p-2 text-gray-500 text-center">{v.handover_date ? v.handover_date.slice(0, 10) : '—'}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <div className="bg-white rounded-lg border border-gray-200 shadow-sm w-full">
+                      <table className="min-w-full w-max text-left border-collapse">
+                        <thead className="sticky top-0 z-20 shadow-sm">
+                          <tr className="bg-slate-700 text-white text-[10px] uppercase tracking-wider whitespace-nowrap">
+                            {showPlateNumbers.source === 'customer' ? (
+                              <>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-24">业务部门</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-24">业务负责人</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-16">品牌</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-16">车型</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-48">资产归属</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-48">客户名称</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-24">车牌</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-16 text-center">状态</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-24 text-center">提车时间</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-24 text-center">合同到期时间</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-24">运营区域</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 w-20 text-center">离到期</th>
+                                <th className="p-2 font-semibold w-48">签约公司</th>
+                              </>
+                            ) : (
+                              <>
+                                <th className="p-2 font-semibold border-r border-slate-600 text-center">车牌</th>
+                                {showPlateNumbers.source !== 'asset' && showPlateNumbers.category !== 'Inventory' && (
+                                  <th className="p-2 font-semibold border-r border-slate-600 text-center">客户名称</th>
+                                )}
+                                <th className="p-2 font-semibold border-r border-slate-600 text-center">品牌</th>
+                                <th className="p-2 font-semibold border-r border-slate-600 text-center">车型</th>
+                                <th className="p-2 font-semibold text-center">所在地</th>
+                              </>
+                            )}
+                          </tr>
+                        </thead>
+                        <tbody className="text-[11px]">
+                          {filteredModalVehicles.map((v, idx) => (
+                            <tr key={v.id} className={`border-b border-gray-100 hover:bg-blue-50/50 transition-colors whitespace-nowrap ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/30'}`}>
+                              {showPlateNumbers.source === 'customer' ? (
+                                <>
+                                  <td className="p-2 border-r border-gray-100 text-gray-600">{v.departmentName || '—'}</td>
+                                  <td className="p-2 border-r border-gray-100 font-medium text-gray-700"><>{v.customerManager || '—'}</></td>
+                                  <td className="p-2 border-r border-gray-100 text-gray-600">{v.brandLabel || '—'}</td>
+                                  <td className="p-2 border-r border-gray-100 text-gray-600">{v.type}</td>
+                                  <td className="p-2 border-r border-gray-100 text-gray-500 text-[10px]"><>{v.subjectOrg || '—'}</></td>
+                                  <td className="p-2 border-r border-gray-100 font-bold text-gray-800"><>{v.customerName || '—'}</></td>
+                                  <td className={`p-2 border-r border-gray-100 font-mono font-bold ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}><>{v.plateNumber || v.vin || '—'}</></td>
+                                  <td className="p-2 border-r border-gray-100 text-center">
+                                    <span className={`px-1.5 py-0.5 rounded-full text-[9px] font-bold ${
+                                      v.status === 'Operating' ? 'bg-green-100 text-green-700' :
+                                      v.status === 'Inventory' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700'
+                                    }`}>
+                                      {v.status === 'Operating' ? '在租' : v.status === 'Inventory' ? '库存' : '异常'}
+                                    </span>
+                                  </td>
+                                  <td className="p-2 border-r border-gray-100 text-center text-gray-500">{'—'}</td>
+                                  <td className="p-2 border-r border-gray-100 text-center text-gray-500">{'—'}</td>
+                                  <td className="p-2 border-r border-gray-100 text-gray-600">{v.location === '其他' ? '对接中' : v.location}</td>
+                                  <td className="p-2 border-r border-gray-100 text-center font-bold text-orange-600">{'—'}</td>
+                                  <td className="p-2 text-gray-500 text-[10px]"><>{v.orgName || '—'}</></td>
+                                </>
+                              ) : (
+                                <>
+                                  <td className={`p-2 border-r border-gray-100 font-mono font-bold text-center ${v.plateNumber ? 'text-blue-700' : 'text-orange-500'}`}><>{v.plateNumber || v.vin || '—'}</></td>
+                                  {showPlateNumbers.source !== 'asset' && showPlateNumbers.category !== 'Inventory' && (
+                                    <td className="p-2 border-r border-gray-100 font-bold text-gray-800 text-center"><>{v.customerName || '—'}</></td>
+                                  )}
+                                  <td className="p-2 border-r border-gray-100 text-gray-600 text-center">{v.brandLabel || '—'}</td>
+                                  <td className="p-2 border-r border-gray-100 text-gray-600 text-center">{v.type}</td>
+                                  <td className="p-2 text-gray-600 text-center">{v.location === '其他' ? '对接中' : v.location}</td>
+                                </>
+                              )}
+                            </tr>
+                          ))}
+                          {filteredModalVehicles.length === 0 && (
+                            <tr>
+                              <td colSpan={showPlateNumbers.source === 'customer' ? 13 : ((showPlateNumbers.source === 'asset' || showPlateNumbers.category === 'Inventory') ? 4 : 5)} className="p-8 text-center text-gray-400 italic">
+                                暂无符合条件的车辆数据
+                              </td>
+                            </tr>
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </div>
+
+                <div className="p-4 bg-white border-t border-gray-100 flex justify-between items-center shrink-0">
+                  <div className="text-xs text-gray-500">
+                    共计 <span className="font-bold text-blue-600">{filteredModalWeeklyDetail.length > 0 ? filteredModalWeeklyDetail.length : filteredModalVehicles.length}</span> 台车辆
+                  </div>
+                  <button
+                    onClick={() => setShowPlateNumbers(null)}
+                    className="px-6 py-2 bg-slate-800 text-white rounded-lg text-xs font-bold hover:bg-slate-700 transition-colors shadow-sm"
+                  >
+                    确认并关闭
+                  </button>
+                </div>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>
+    </>
+  );
+}

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

@@ -0,0 +1,203 @@
+import React from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { AssetSummarySectionProps } from './types';
+
+export function AssetSummaryDesktopTable({
+  processedData,
+  theme,
+  expandedAssetTypes,
+  toggleAssetType,
+  expandedModels,
+  toggleModel,
+  setVehicleSelection: setShowPlateNumbers,
+}: AssetSummarySectionProps) {
+  return (
+    <div className="hidden lg:block overflow-x-auto">
+      <table className="w-full text-left border-collapse table-fixed min-w-[1300px]">
+        <thead>
+          <tr className="bg-gray-50 text-[11px] text-gray-500 uppercase tracking-wider border-b border-gray-100">
+            <th className="p-3 font-semibold border-r border-gray-100 w-24">车型</th>
+            <th className="p-3 font-semibold border-r border-gray-100 w-48">品牌型号</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center bg-blue-50/30 w-24">车辆总资产</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存总数</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-江浙沪</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-广东</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-北京</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-新疆</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">库存-其他</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center text-amber-600 w-24">异动</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center w-24">待交车</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center bg-green-50/30 w-24">当前在运营</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center bg-blue-50/20 w-24">本周交车</th>
+            <th className="p-3 font-semibold border-r border-gray-100 text-center bg-orange-50/20 w-24">本周还车</th>
+            <th className="p-3 font-semibold text-center bg-purple-50/20 w-24">本周替换</th>
+          </tr>
+        </thead>
+        <tbody className="text-xs">
+          {processedData.map((typeGroup) => (
+            <React.Fragment key={typeGroup.type}>
+              {/* Category Header Row */}
+              <tr className={`border-b border-gray-100 cursor-pointer transition-all ${
+                theme === 'vibrant' ? 'bg-blue-600 text-white hover:bg-blue-700' :
+                theme === 'minimal' ? 'bg-white border-l-4 border-blue-500 hover:bg-gray-50' :
+                'bg-blue-50/50 hover:bg-blue-50 transition-colors'
+              }`}
+                  onClick={() => toggleAssetType(typeGroup.type)}>
+                <td colSpan={15} className={`p-3 font-bold ${theme === 'vibrant' ? 'text-white' : 'text-blue-700'}`}>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      {expandedAssetTypes.has(typeGroup.type) ?
+                        <ChevronDown size={16} className={theme === 'vibrant' ? 'text-white' : 'text-blue-500'} /> :
+                        <ChevronRight size={16} className={theme === 'vibrant' ? 'text-white/70' : 'text-gray-400'} />
+                      }
+                      <span>{typeGroup.type}</span>
+                    </div>
+                    <div className={`flex gap-6 text-[11px] font-normal mr-4 ${theme === 'vibrant' ? 'text-white/80' : 'text-gray-500'}`}>
+                      <span>资产 <span className={theme === 'vibrant' ? 'font-bold text-white' : 'font-bold text-gray-700'}>{typeGroup.totalAssets}</span></span>
+                      <span>库存 <span className={theme === 'vibrant' ? 'font-bold text-white' : 'font-bold text-blue-600'}>{typeGroup.totalInventory}</span></span>
+                      <span>异动 <span className="font-bold">{typeGroup.totalAbnormal}</span></span>
+                      <span>运营 <span className={theme === 'vibrant' ? 'font-bold text-white' : 'font-bold text-green-600'}>{typeGroup.totalOperating}</span></span>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+
+              <AnimatePresence>
+                {expandedAssetTypes.has(typeGroup.type) && typeGroup.models.map((model) => (
+                  <React.Fragment key={model.model}>
+                    <motion.tr
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      className={`border-b border-gray-50 hover:bg-gray-50/50 transition-colors cursor-pointer ${expandedModels.has(model.model) ? 'bg-blue-50/10' : ''}`}
+                      onClick={() => toggleModel(model.model)}
+                    >
+                      <td className="p-3 border-r border-gray-100 text-gray-300 text-center italic">{typeGroup.type}</td>
+                      <td className="p-3 border-r border-gray-100 flex items-center justify-between gap-2">
+                        <div className="flex items-center gap-2">
+                          {expandedModels.has(model.model) ? <ChevronDown size={14} className="text-blue-500" /> : <ChevronRight size={14} className="text-gray-300" />}
+                          <span className={expandedModels.has(model.model) ? 'font-bold text-blue-700' : ''}>{model.model}</span>
+                        </div>
+                        <div className="flex gap-3 text-[9px] font-normal text-gray-400">
+                          <span>资产 <span className="font-bold text-gray-600">{model.total}</span></span>
+                          <span>库存 <span className="font-bold text-blue-500">{model.inventory}</span></span>
+                          <span>运营 <span className="font-bold text-green-500">{model.operating}</span></span>
+                        </div>
+                      </td>
+                      <td className="p-3 text-center border-r border-gray-100 font-medium">
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', source: 'asset', title: model.model });
+                          }}
+                          className="text-blue-500 hover:underline font-medium"
+                        >
+                          {model.total}
+                        </button>
+                      </td>
+                      <td className="p-3 text-center border-r border-gray-100 font-medium">
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Inventory', source: 'asset', title: `${model.model} - 库存` });
+                          }}
+                          className="text-blue-500 hover:underline font-medium"
+                        >
+                          {model.inventory}
+                        </button>
+                      </td>
+                      {['嘉兴', '广东', '北京', '新疆', '其他'].map(reg => (
+                        <td key={reg} className="p-3 text-center border-r border-gray-100">
+                          {model.inventoryRegions[reg] > 0 ? (
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setShowPlateNumbers({ batch: 'All', model: model.model, location: reg, category: 'Inventory', source: 'asset', title: `${model.model} - ${reg} 库存` });
+                              }}
+                              className="text-blue-500 hover:underline font-medium"
+                            >
+                              {model.inventoryRegions[reg]}
+                            </button>
+                          ) : ''}
+                        </td>
+                      ))}
+                      <td className="p-3 text-center border-r border-gray-100">
+                        <button type="button" className="font-bold text-amber-600 hover:underline"
+                          onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Abnormal', source: 'asset', title: `${model.model} - 异动` }); }}>
+                          {model.abnormal}
+                        </button>
+                      </td>
+                      <td className="p-3 text-center border-r border-gray-100">
+                        {model.pending > 0 ? (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Pending', source: 'asset', title: `${model.model} - 待交车` });
+                            }}
+                            className="text-blue-500 hover:underline font-medium"
+                          >
+                            {model.pending}
+                          </button>
+                        ) : model.pending}
+                      </td>
+                      <td className="p-3 text-center border-r border-gray-100 text-green-600 font-bold bg-green-50/10">
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Operating', source: 'asset', title: `${model.model} - 在运营` });
+                          }}
+                          className="text-green-600 hover:underline font-bold"
+                        >
+                          {model.operating}
+                        </button>
+                      </td>
+                      <td className="p-3 text-center border-r border-gray-100 text-blue-600 bg-blue-50/5">
+                        {model.weeklyDelivered > 0 ? (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Delivered', source: 'asset', title: `${model.model} - 本周交车` });
+                            }}
+                            className="text-blue-500 hover:underline font-medium"
+                          >
+                            {model.weeklyDelivered}
+                          </button>
+                        ) : model.weeklyDelivered}
+                      </td>
+                      <td className="p-3 text-center border-r border-gray-100 text-orange-600 bg-orange-50/5">
+                        {model.weeklyReturned > 0 ? (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Returned', source: 'asset', title: `${model.model} - 本周还车` });
+                            }}
+                            className="text-blue-500 hover:underline font-medium"
+                          >
+                            {model.weeklyReturned}
+                          </button>
+                        ) : model.weeklyReturned}
+                      </td>
+                      <td className="p-3 text-center text-purple-600 bg-purple-50/5 font-medium">
+                        {model.weeklyReplaced > 0 ? (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Replaced', source: 'asset', title: `${model.model} - 本周替换` });
+                            }}
+                            className="text-blue-500 hover:underline font-medium"
+                          >
+                            {model.weeklyReplaced}
+                          </button>
+                        ) : model.weeklyReplaced}
+                      </td>
+                    </motion.tr>
+                  </React.Fragment>
+                ))}
+              </AnimatePresence>
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { AssetSummarySectionProps } from './types';
+
+export function AssetSummaryMobileCards({
+  processedData,
+  theme,
+  expandedAssetTypes,
+  toggleAssetType,
+  expandedModels,
+  toggleModel,
+  setVehicleSelection: setShowPlateNumbers,
+}: AssetSummarySectionProps) {
+  return (
+    <div className="lg:hidden p-4 space-y-4">
+      {processedData.map((typeGroup) => (
+        <div key={typeGroup.type} className="space-y-3">
+          <div
+            className={`px-3 py-2 rounded flex justify-between items-center shadow-sm cursor-pointer transition-all ${
+              theme === 'vibrant' ? 'bg-blue-600 text-white active:bg-blue-700' :
+              theme === 'minimal' ? 'bg-white border-l-4 border-blue-500 text-gray-800 active:bg-gray-50' :
+              'bg-blue-50 border border-blue-100 text-blue-700 active:bg-blue-100'
+            }`}
+            onClick={() => toggleAssetType(typeGroup.type)}
+          >
+            <div className="flex items-center gap-2">
+              {expandedAssetTypes.has(typeGroup.type) ?
+                <ChevronDown size={16} className={theme === 'vibrant' ? 'text-white' : 'text-blue-500'} /> :
+                <ChevronRight size={16} className={theme === 'vibrant' ? 'text-white/70' : 'text-blue-300'} />
+              }
+              <span className="text-xs font-bold">{typeGroup.type}</span>
+            </div>
+            <div className={`flex gap-3 text-[9px] font-normal ${theme === 'vibrant' ? 'opacity-90' : 'text-gray-500'}`}>
+              <span>资产 <span className={theme === 'vibrant' ? 'font-bold' : 'font-bold text-gray-700'}>{typeGroup.totalAssets}</span></span>
+              <span>库存 <span className={theme === 'vibrant' ? 'font-bold' : 'font-bold text-blue-600'}>{typeGroup.totalInventory}</span></span>
+              <span>异动 <span className="font-bold">{typeGroup.totalAbnormal}</span></span>
+              <span>运营 <span className={theme === 'vibrant' ? 'font-bold' : 'font-bold text-green-600'}>{typeGroup.totalOperating}</span></span>
+            </div>
+          </div>
+
+          <AnimatePresence>
+            {expandedAssetTypes.has(typeGroup.type) && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                className="space-y-3 overflow-hidden"
+              >
+                {typeGroup.models.map((model) => (
+                  <div key={model.model} className="bg-white rounded-lg border border-gray-100 shadow-sm overflow-hidden">
+                    <div
+                      className="p-3 flex justify-between items-center cursor-pointer active:bg-gray-50"
+                      onClick={() => toggleModel(model.model)}
+                    >
+                      <div className="flex items-center gap-2">
+                        {expandedModels.has(model.model) ? <ChevronDown size={14} className="text-blue-500" /> : <ChevronRight size={14} className="text-gray-300" />}
+                        <span className="text-xs font-bold text-gray-700">{model.model}</span>
+                      </div>
+                      <div className="flex flex-wrap justify-end gap-2">
+                        <span className="text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-bold cursor-pointer active:bg-blue-100" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', source: 'asset', title: model.model }); }}>资产 {model.total}</span>
+                        <span className="text-[10px] bg-orange-50 text-orange-600 px-1.5 py-0.5 rounded font-bold cursor-pointer active:bg-orange-100" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Inventory', source: 'asset', title: `${model.model} - 库存` }); }}>库存 {model.inventory}</span>
+                        <button type="button" className="text-[10px] bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-bold" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Abnormal', source: 'asset', title: `${model.model} - 异动` }); }}>异动 {model.abnormal}</button>
+                        <span className="text-[10px] bg-green-50 text-green-600 px-1.5 py-0.5 rounded font-bold cursor-pointer active:bg-green-100" onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Operating', source: 'asset', title: `${model.model} - 在运营` }); }}>运营 {model.operating}</span>
+                      </div>
+                    </div>
+
+                    {expandedModels.has(model.model) && (
+                      <div className="px-3 pb-3 pt-1 border-t border-gray-50 bg-gray-50/30">
+                        <div className="grid grid-cols-2 gap-y-3 gap-x-4 mt-2">
+                          <div className="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-1 rounded transition-colors"
+                               onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Inventory', source: 'asset', title: `${model.model} - 库存` })}>
+                            <span className="text-[10px] text-gray-400">总库存</span>
+                            <span className="text-xs font-bold text-blue-600">{model.inventory}</span>
+                          </div>
+                          <div className="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-1 rounded transition-colors"
+                               onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Pending', source: 'asset', title: `${model.model} - 待交车` })}>
+                            <span className="text-[10px] text-gray-400">待交车</span>
+                            <span className="text-xs font-bold text-gray-600">{model.pending}</span>
+                          </div>
+                          <div className="col-span-2 grid grid-cols-5 gap-1 py-2 border-y border-gray-100">
+                            {['嘉兴', '广东', '北京', '新疆', '其他'].map(reg => (
+                              <div key={reg} className="text-center">
+                                <div className="text-[8px] text-gray-400 mb-0.5">{reg === '嘉兴' ? '浙' : reg === '广东' ? '粤' : reg === '北京' ? '京' : reg === '新疆' ? '新' : '其'}</div>
+                                {model.inventoryRegions[reg] > 0 ? (
+                                  <button
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      setShowPlateNumbers({ batch: 'All', model: model.model, location: reg, category: 'Inventory', source: 'asset', title: `${model.model} - ${reg} 库存` });
+                                    }}
+                                    className="text-[10px] font-bold text-blue-500 hover:underline"
+                                  >
+                                    {model.inventoryRegions[reg]}
+                                  </button>
+                                ) : (
+                                  <div className="text-[10px] font-bold text-gray-300">-</div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                          <div className="col-span-2 grid grid-cols-3 gap-2 pt-1">
+                            <div className="bg-blue-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-blue-100/50 transition-colors"
+                                 onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Delivered', source: 'asset', title: `${model.model} - 本周交车` })}>
+                              <span className="text-[8px] text-gray-400 mb-1">本周已交车</span>
+                              <span className="text-xs font-bold text-blue-600">{model.weeklyDelivered}</span>
+                            </div>
+                            <div className="bg-orange-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-orange-100/50 transition-colors"
+                                 onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Returned', source: 'asset', title: `${model.model} - 本周还车` })}>
+                              <span className="text-[8px] text-gray-400 mb-1">已还车</span>
+                              <span className="text-xs font-bold text-orange-600">{model.weeklyReturned}</span>
+                            </div>
+                            <div className="bg-purple-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-purple-100/50 transition-colors"
+                                 onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Replaced', source: 'asset', title: `${model.model} - 本周替换` })}>
+                              <span className="text-[8px] text-gray-400 mb-1">已替换</span>
+                              <span className="text-xs font-bold text-purple-600">{model.weeklyReplaced}</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Info } from 'lucide-react';
+import { AssetSummaryDesktopTable } from './AssetSummaryDesktopTable';
+import { AssetSummaryMobileCards } from './AssetSummaryMobileCards';
+import type { AssetSummarySectionProps } from './types';
+
+export function AssetSummarySection(props: AssetSummarySectionProps) {
+  return (
+    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden mb-6">
+      <div className="p-4 border-b border-gray-50 bg-gray-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+        <div className="flex flex-wrap items-center gap-4 sm:gap-6">
+          <h2 className="text-sm font-bold text-gray-700">资产数据实时汇总</h2>
+          <div className="hidden md:flex items-center gap-1 text-[10px] text-blue-500 bg-blue-50 px-2 py-0.5 rounded">
+            <Info size={10} />
+            点击型号展开详情
+          </div>
+        </div>
+      </div>
+
+      {/* Desktop View Table */}
+      <AssetSummaryDesktopTable {...props} />
+
+      {/* Mobile View Cards for Asset Summary */}
+      <AssetSummaryMobileCards {...props} />
+    </div>
+  );
+}

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

@@ -0,0 +1,118 @@
+import { useRef, useState } from 'react';
+import { ArrowRight, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
+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 }: { value: DateRange; onChange: (range: DateRange) => void }) {
+  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">统计日期 · 运维签章时间</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>
+  </>;
+}

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

@@ -0,0 +1,129 @@
+import { CalendarDays, ChevronDown, Download, Loader2 } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { FlowType } from '../../api';
+import { FLOW_META } from '../FlowDetailModal';
+import type { FlowStatisticsCardProps } from './types';
+import { FlowDateRangePicker } from './FlowDateRangePicker';
+
+const FLOW_TYPES: FlowType[] = ['delivered', 'returned', 'replaced'];
+
+export function FlowStatisticsCard({
+  flowRange,
+  setFlowRange,
+  flowLoading,
+  flowStats,
+  exportFlowDetails,
+  flowDailyExpanded,
+  setFlowDailyExpanded,
+  setSelectedFlow,
+}: FlowStatisticsCardProps) {
+  return (
+    <div className="grid grid-cols-1 gap-3 mb-4">
+      <div data-testid="asset-flow-card" className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 text-[13px] font-black text-slate-700">
+              <CalendarDays size={14} className="text-blue-500" />
+              <span>交还车统计（车次）</span>
+              {flowLoading && <Loader2 size={12} className="animate-spin text-slate-400" />}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => exportFlowDetails()}
+              disabled={!flowStats?.details.length}
+              className="inline-flex h-8 items-center justify-center gap-1 rounded-xl border border-slate-200 bg-slate-50 px-2.5 text-[11px] font-black text-slate-600 transition hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <Download size={13} />
+              导出
+            </button>
+          </div>
+        </div>
+        <p className="mt-1 text-[11px] text-slate-400">按运维签章时间统计；交车包含替换交车，合计＝交车＋还车，同车多笔业务分别计次。</p>
+        <FlowDateRangePicker value={flowRange} onChange={setFlowRange} />
+        <div className="mt-2 rounded-2xl border border-slate-100 bg-slate-50/70 px-2 py-2.5">
+          <div className="grid grid-cols-4 items-center text-center">
+            <div className="px-2">
+              <div className="text-lg font-black leading-none text-slate-950">{flowStats?.totals.total ?? 0}</div>
+              <div className="mt-1 text-[10px] font-black text-slate-400">合计</div>
+            </div>
+            {FLOW_TYPES.map((type) => (
+              <button key={type} type="button"
+                data-testid={`asset-flow-total-${type}`}
+                disabled={flowLoading || !flowStats?.totals[type]}
+                onClick={() => flowStats && setSelectedFlow({ start: flowStats.start, end: flowStats.end, type })}
+                className="border-l border-slate-200/70 px-2 transition hover:bg-slate-100 focus-visible:outline-blue-500 disabled:cursor-not-allowed disabled:opacity-35">
+                <div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>
+                  {flowStats?.totals[type] ?? 0}
+                </div>
+                <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+        <button
+          type="button"
+          data-testid="asset-flow-daily-toggle"
+          onClick={() => setFlowDailyExpanded((prev) => !prev)}
+          className="mt-2 flex w-full items-center justify-between rounded-xl border border-slate-100 bg-white px-3 py-1.5 text-[12px] font-black text-slate-500 transition hover:border-blue-100 hover:bg-blue-50/50 hover:text-blue-600"
+        >
+          <span>{flowDailyExpanded ? '收起每日明细' : '展开每日明细'}</span>
+          <span className="flex items-center gap-2 text-[11px] text-slate-400">
+            {flowStats?.daily.length ?? 0} 天
+            <ChevronDown size={15} className={`transition-transform ${flowDailyExpanded ? 'rotate-180' : ''}`} />
+          </span>
+        </button>
+        <AnimatePresence initial={false}>
+          {flowDailyExpanded && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              className="overflow-hidden"
+            >
+              <div className="mt-3 max-h-[280px] space-y-2 overflow-y-auto pr-1">
+                {flowLoading && (
+                  <div className="rounded-xl bg-slate-50 px-3 py-4 text-center text-[11px] font-bold text-slate-400">正在加载交还车统计...</div>
+                )}
+                {!flowLoading && flowStats?.daily.slice().sort((a, b) => b.date.localeCompare(a.date)).map((day) => (
+                  <div key={day.date} className="rounded-2xl border border-slate-100 bg-white px-3 py-3 shadow-sm">
+                    <div className="flex items-center justify-between">
+                      <div className="text-[11px] font-black text-slate-400">{day.date}</div>
+                      <div className="text-[10px] font-bold italic text-slate-300">运维签章时间</div>
+                    </div>
+                    <div className="mt-2 grid grid-cols-4 items-center text-center">
+                      <div className="px-2">
+                        <div className="text-lg font-black leading-none text-slate-900">{day.total}</div>
+                        <div className="mt-1 text-[10px] font-black text-slate-400">合计</div>
+                      </div>
+                      {FLOW_TYPES.map((type) => {
+                        const count = day[type];
+                        return (
+                          <button
+                            key={type}
+                            type="button"
+                            data-testid={`asset-flow-cell-${day.date}-${type}`}
+                            disabled={count === 0}
+                            onClick={() => setSelectedFlow({ date: day.date, type })}
+                            className="border-l border-slate-100 px-2 text-center transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-35"
+                          >
+                            <div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>{count}</div>
+                            <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+                {!flowLoading && !flowStats?.daily.length && (
+                  <div className="rounded-xl bg-slate-50 px-3 py-4 text-center text-[11px] font-bold text-slate-400">暂无交换车数据</div>
+                )}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,158 @@
+import { InventoryStatusCounts } from './InventoryStatusCounts';
+import React from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { InventoryStatisticsSectionProps } from './types';
+
+type InventoryDesktopTableProps = Pick<
+  InventoryStatisticsSectionProps,
+  | 'inventoryTab'
+  | 'inventoryByRegion'
+  | 'expandedInventoryRegions'
+  | 'toggleInventoryRegion'
+  | 'inventoryByModel'
+  | 'expandedInventoryTypes'
+  | 'toggleInventoryType'
+  | 'setVehicleSelection'
+>;
+
+export function InventoryDesktopTable({
+  inventoryTab,
+  inventoryByRegion,
+  expandedInventoryRegions,
+  toggleInventoryRegion,
+  inventoryByModel,
+  expandedInventoryTypes,
+  toggleInventoryType,
+  setVehicleSelection: setShowPlateNumbers,
+}: InventoryDesktopTableProps) {
+  return (
+    <div className="hidden lg:block overflow-x-auto">
+      <table className="w-full text-left border-collapse">
+        <thead>
+          <tr className="bg-slate-50 text-[11px] text-slate-500 uppercase tracking-wider border-b border-slate-100">
+            <th className="p-3 font-semibold w-64">{inventoryTab === 'region' ? '区域 / 城市' : '车型分类 / 型号'}</th>
+            <th className="p-3 font-semibold">{inventoryTab === 'region' ? '品牌' : '品牌'}</th>
+            <th className="p-3 font-semibold">{inventoryTab === 'region' ? '车型' : '所在区域/城市'}</th>
+            <th className="p-3 font-semibold text-center w-32">库存数量</th>
+          </tr>
+        </thead>
+        <tbody className="text-xs">
+          {inventoryTab === 'region' ? (
+            Object.entries(inventoryByRegion).map(([region, cities]) => (
+              <React.Fragment key={region}>
+                <tr
+                  className="bg-slate-50/30 border-b border-slate-100 cursor-pointer hover:bg-slate-50 transition-colors"
+                  onClick={() => toggleInventoryRegion(region)}
+                >
+                  <td colSpan={4} className="p-3 font-bold text-slate-700">
+                    <div className="flex items-center gap-2">
+                      {expandedInventoryRegions.has(region) ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
+                      <span>{region}</span>
+                      <span className="text-[10px] font-normal text-slate-400 ml-2 cursor-pointer hover:text-blue-500 transition-colors"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setShowPlateNumbers({ batch: 'All', model: 'All', location: region, category: 'Inventory', source: 'asset', title: `库存统计 - ${region}` });
+                            }}>
+                        (共 {Object.values(cities).flat().reduce((acc, s) => acc + s.quantity, 0)} 台)
+                      </span>
+                      <InventoryStatusCounts rows={Object.values(cities).flat()} />
+                    </div>
+                  </td>
+                </tr>
+                <AnimatePresence>
+                  {expandedInventoryRegions.has(region) && Object.entries(cities).map(([city, stats]) => (
+                    <React.Fragment key={city}>
+                      {stats.map((stat, idx) => (
+                        <motion.tr
+                          key={`${city}-${stat.model}-${idx}`}
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          className="border-b border-slate-50 hover:bg-slate-50/20 transition-colors"
+                        >
+                          <td className="p-3 pl-8 text-slate-500 border-r border-slate-50">
+                            {idx === 0 ? <span className="font-medium text-slate-600">{city}</span> : ''}
+                          </td>
+                          <td className="p-3 text-slate-600 border-r border-slate-50">{stat.brand}</td>
+                          <td className="p-3 text-slate-600 border-r border-slate-50">{stat.model}</td>
+                          <td className="p-3 text-center font-bold text-blue-600">
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setShowPlateNumbers({ batch: 'All', model: stat.model, brand: stat.brand, vehicleType: stat.type, location: stat.city, category: 'Inventory', source: 'asset', title: `库存统计 - ${stat.model} - ${stat.city}` });
+                              }}
+                              className="text-blue-600 hover:underline font-bold"
+                            >
+                              {stat.quantity}
+                            </button>
+                            <div className="mt-1"><InventoryStatusCounts rows={[stat]} /></div>
+                          </td>
+                        </motion.tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </AnimatePresence>
+              </React.Fragment>
+            ))
+          ) : (
+            Object.entries(inventoryByModel).map(([type, models]) => (
+              <React.Fragment key={type}>
+                <tr
+                  className="bg-slate-50/30 border-b border-slate-100 cursor-pointer hover:bg-slate-50 transition-colors"
+                  onClick={() => toggleInventoryType(type)}
+                >
+                  <td colSpan={4} className="p-3 font-bold text-slate-700">
+                    <div className="flex items-center gap-2">
+                      {expandedInventoryTypes.has(type) ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
+                      <span>{type}</span>
+                      <span className="text-[10px] font-normal text-slate-400 ml-2 cursor-pointer hover:text-blue-500 transition-colors"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', type: type, category: 'Inventory', source: 'asset', title: `库存统计 - ${type}` });
+                            }}>
+                        (共 {Object.values(models).flat().reduce((acc, s) => acc + s.quantity, 0)} 台)
+                      </span>
+                      <InventoryStatusCounts rows={Object.values(models).flat()} />
+                    </div>
+                  </td>
+                </tr>
+                <AnimatePresence>
+                  {expandedInventoryTypes.has(type) && Object.entries(models).map(([model, stats]) => (
+                    <React.Fragment key={model}>
+                      {stats.map((stat, idx) => (
+                        <motion.tr
+                          key={`${model}-${stat.region}-${stat.city}-${idx}`}
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          className="border-b border-slate-50 hover:bg-slate-50/20 transition-colors"
+                        >
+                          <td className="p-3 pl-8 text-slate-500 border-r border-slate-50">
+                            {idx === 0 ? <span className="font-medium text-slate-600">{model}</span> : ''}
+                          </td>
+                          <td className="p-3 text-slate-600 border-r border-slate-50">{stat.brand}</td>
+                          <td className="p-3 text-slate-600 border-r border-slate-50">{stat.region} / {stat.city}</td>
+                          <td className="p-3 text-center font-bold text-blue-600">
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setShowPlateNumbers({ batch: 'All', model: stat.model, brand: stat.brand, vehicleType: stat.type, location: stat.city, category: 'Inventory', source: 'asset', title: `库存统计 - ${stat.model} - ${stat.city}` });
+                              }}
+                              className="text-blue-600 hover:underline font-bold"
+                            >
+                              {stat.quantity}
+                            </button>
+                            <div className="mt-1"><InventoryStatusCounts rows={[stat]} /></div>
+                          </td>
+                        </motion.tr>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </AnimatePresence>
+              </React.Fragment>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,122 @@
+import { InventoryStatusCounts } from './InventoryStatusCounts';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import type { InventoryStatisticsSectionProps } from './types';
+
+type InventoryMobileListProps = Pick<
+  InventoryStatisticsSectionProps,
+  | 'inventoryTab'
+  | 'inventoryByRegion'
+  | 'expandedInventoryRegions'
+  | 'toggleInventoryRegion'
+  | 'inventoryByModel'
+  | 'expandedInventoryTypes'
+  | 'toggleInventoryType'
+  | 'setVehicleSelection'
+>;
+
+export function InventoryMobileList({
+  inventoryTab,
+  inventoryByRegion,
+  expandedInventoryRegions,
+  toggleInventoryRegion,
+  inventoryByModel,
+  expandedInventoryTypes,
+  toggleInventoryType,
+  setVehicleSelection: setShowPlateNumbers,
+}: InventoryMobileListProps) {
+  return (
+    <div className="lg:hidden p-3 space-y-3">
+      {inventoryTab === 'region' ? (
+        Object.entries(inventoryByRegion).map(([region, cities]) => (
+          <div key={region} className="border border-slate-100 rounded overflow-hidden">
+            <div
+              className="bg-slate-50 p-3 flex flex-wrap gap-2 justify-between items-center cursor-pointer"
+              onClick={() => toggleInventoryRegion(region)}
+            >
+              <div className="flex items-center gap-2">
+                {expandedInventoryRegions.has(region) ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
+                <span className="text-xs font-bold text-slate-700">{region}</span>
+              </div>
+              <span className="text-[10px] font-bold text-blue-600">
+                {Object.values(cities).flat().reduce((acc, s) => acc + s.quantity, 0)} 台
+              </span>
+              <InventoryStatusCounts rows={Object.values(cities).flat()} />
+            </div>
+
+            {expandedInventoryRegions.has(region) && (
+              <div className="p-2 space-y-2 bg-white">
+                {Object.entries(cities).map(([city, stats]) => (
+                  <div key={city} className="border-l-2 border-slate-200 pl-3 py-1">
+                    <div className="text-[10px] font-bold text-slate-500 mb-2">{city}</div>
+                    <div className="space-y-2">
+                      {stats.map((stat, idx) => (
+                        <div key={idx} className="flex flex-wrap gap-2 justify-between items-center text-[11px] bg-slate-50/50 p-2 rounded">
+                          <div className="flex flex-col">
+                            <span className="text-slate-400 text-[9px]">{stat.brand}</span>
+                            <span className="text-slate-700 font-medium">{stat.model}</span>
+                          </div>
+                          <button
+                            onClick={() => setShowPlateNumbers({ batch: 'All', model: stat.model, brand: stat.brand, vehicleType: stat.type, location: stat.city, category: 'Inventory', source: 'asset', title: `库存统计 - ${stat.model} - ${stat.city}` })}
+                            className="font-bold text-blue-600 hover:underline"
+                          >
+                            {stat.quantity} 台
+                          </button>
+                          {(stat.abnormal || stat.pending) ? <div className="w-full"><InventoryStatusCounts rows={[stat]} /></div> : null}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))
+      ) : (
+        Object.entries(inventoryByModel).map(([type, models]) => (
+          <div key={type} className="border border-slate-100 rounded overflow-hidden">
+            <div
+              className="bg-slate-50 p-3 flex flex-wrap gap-2 justify-between items-center cursor-pointer"
+              onClick={() => toggleInventoryType(type)}
+            >
+              <div className="flex items-center gap-2">
+                {expandedInventoryTypes.has(type) ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
+                <span className="text-xs font-bold text-slate-700">{type}</span>
+              </div>
+              <span className="text-[10px] font-bold text-blue-600">
+                {Object.values(models).flat().reduce((acc, s) => acc + s.quantity, 0)} 台
+              </span>
+              <InventoryStatusCounts rows={Object.values(models).flat()} />
+            </div>
+
+            {expandedInventoryTypes.has(type) && (
+              <div className="p-2 space-y-2 bg-white">
+                {Object.entries(models).map(([model, stats]) => (
+                  <div key={model} className="border-l-2 border-slate-200 pl-3 py-1">
+                    <div className="text-[10px] font-bold text-slate-500 mb-2">{model}</div>
+                    <div className="space-y-2">
+                      {stats.map((stat, idx) => (
+                        <div key={idx} className="flex flex-wrap gap-2 justify-between items-center text-[11px] bg-slate-50/50 p-2 rounded">
+                          <div className="flex flex-col">
+                            <span className="text-slate-400 text-[9px]">{stat.brand}</span>
+                            <span className="text-slate-700 font-medium">{stat.region} / {stat.city}</span>
+                          </div>
+                          <button
+                            onClick={() => setShowPlateNumbers({ batch: 'All', model: stat.model, brand: stat.brand, vehicleType: stat.type, location: stat.city, category: 'Inventory', source: 'asset', title: `库存统计 - ${stat.model} - ${stat.city}` })}
+                            className="font-bold text-blue-600 hover:underline"
+                          >
+                            {stat.quantity} 台
+                          </button>
+                          {(stat.abnormal || stat.pending) ? <div className="w-full"><InventoryStatusCounts rows={[stat]} /></div> : null}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,211 @@
+import { InventoryStatusCounts } from './InventoryStatusCounts';
+import { Filter } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
+import { InventoryDesktopTable } from './InventoryDesktopTable';
+import { InventoryMobileList } from './InventoryMobileList';
+import type { InventoryStatisticsSectionProps } from './types';
+
+export function InventoryStatisticsSection({
+  inventoryFilters,
+  setInventoryFilters,
+  draftInventoryFilters,
+  setDraftInventoryFilters,
+  isInventoryFilterOpen,
+  setIsInventoryFilterOpen,
+  uniqueInventoryRegions,
+  uniqueInventoryCities,
+  uniqueInventoryBrands,
+  uniqueInventoryTypes,
+  uniqueInventoryModelsForType,
+  filteredInventoryStats,
+  inventoryTab,
+  setInventoryTab,
+  inventoryByRegion,
+  expandedInventoryRegions,
+  toggleInventoryRegion,
+  inventoryByModel,
+  expandedInventoryTypes,
+  toggleInventoryType,
+  setVehicleSelection: setShowPlateNumbers,
+}: InventoryStatisticsSectionProps) {
+  const listProps = {
+    inventoryTab,
+    inventoryByRegion,
+    expandedInventoryRegions,
+    toggleInventoryRegion,
+    inventoryByModel,
+    expandedInventoryTypes,
+    toggleInventoryType,
+    setVehicleSelection: setShowPlateNumbers,
+  };
+
+  return (
+    <div data-testid="inventory-statistics" className="bg-white rounded-2xl border border-gray-100 shadow-sm mb-6 overflow-hidden min-h-[420px]">
+      <div className="p-3 sm:p-4 border-b border-gray-50 bg-white flex items-center justify-between relative">
+        <div className="flex items-center gap-3">
+          <div className="w-1.5 h-6 bg-blue-600 rounded-full"></div>
+          <div className="flex flex-col">
+            <h2 className="text-lg font-bold text-gray-800 leading-tight">库存统计</h2>
+            <span className="text-[10px] text-gray-400 font-medium">实时更新库存数据</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-6 ml-auto pr-2">
+          <div className="flex flex-col items-end cursor-pointer hover:opacity-80 transition-opacity"
+               onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Inventory', source: 'asset', title: '库存总数' })}>
+            <span className="text-[10px] text-gray-400 font-bold tracking-wider uppercase mb-0.5">总库存数据</span>
+            <span className="text-2xl font-black text-gray-900 leading-none">
+              {filteredInventoryStats.reduce((acc, s) => acc + s.quantity, 0)}
+              <span className="text-xs font-bold text-gray-400 ml-1">台</span>
+            </span>
+          </div>
+
+          <div className="relative">
+            <button
+              onClick={() => { if (!isInventoryFilterOpen) setDraftInventoryFilters({...inventoryFilters}); setIsInventoryFilterOpen(!isInventoryFilterOpen); }}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
+                isInventoryFilterOpen || (inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.type || inventoryFilters.model)
+                  ? 'bg-blue-600 text-white shadow-md'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              <Filter size={14} />
+              <span>筛选</span>
+              {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.type || inventoryFilters.model) && (
+                <span className="w-2 h-2 bg-white rounded-full animate-pulse"></span>
+              )}
+            </button>
+
+            <AnimatePresence>
+              {isInventoryFilterOpen && (
+                <>
+                  <motion.div
+                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                    className="fixed inset-x-4 top-20 max-h-[80vh] overflow-auto sm:inset-auto sm:top-20 sm:right-4 sm:w-72 bg-white rounded-xl shadow-2xl border border-slate-100 z-50 p-4"
+                  >
+                    <div className="flex justify-between items-center mb-4">
+                      <h3 className="text-xs font-bold text-slate-800">库存统计 - 数据筛选</h3>
+                      <button onClick={() => setDraftInventoryFilters({ region: '', city: '', brand: '', type: '', model: '' })} className="text-[10px] text-blue-500 hover:underline">重置所有</button>
+                    </div>
+
+                    <div className="space-y-3 text-left">
+                      <div>
+                        <label className="text-[10px] text-slate-400 block mb-1">区域</label>
+                        <select value={draftInventoryFilters.region} onChange={(e) => setDraftInventoryFilters({...draftInventoryFilters, region: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                          <option value="">全部区域</option>
+                          {uniqueInventoryRegions.map(r => <option key={r} value={r}>{r}</option>)}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-[10px] text-slate-400 block mb-1">城市</label>
+                        <select value={draftInventoryFilters.city} onChange={(e) => setDraftInventoryFilters({...draftInventoryFilters, city: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                          <option value="">全部城市</option>
+                          {uniqueInventoryCities.map(c => <option key={c} value={c}>{c}</option>)}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-[10px] text-slate-400 block mb-1">品牌</label>
+                        <select value={draftInventoryFilters.brand} onChange={(e) => setDraftInventoryFilters({...draftInventoryFilters, brand: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                          <option value="">全部品牌</option>
+                          {uniqueInventoryBrands.map(b => <option key={b} value={b}>{b}</option>)}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-[10px] text-slate-400 block mb-1">车型</label>
+                        <select value={draftInventoryFilters.type} onChange={(e) => setDraftInventoryFilters({...draftInventoryFilters, type: e.target.value, model: ''})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                          <option value="">全部车型</option>
+                          {uniqueInventoryTypes.map(t => <option key={t} value={t}>{t}</option>)}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-[10px] text-slate-400 block mb-1">批次</label>
+                        <select value={draftInventoryFilters.model} onChange={(e) => setDraftInventoryFilters({...draftInventoryFilters, model: e.target.value})} className="w-full text-xs bg-white border border-slate-200 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all shadow-sm cursor-pointer">
+                          <option value="">全部批次</option>
+                          {uniqueInventoryModelsForType.map(m => <option key={m} value={m}>{m}</option>)}
+                        </select>
+                      </div>
+                    </div>
+                    <button onClick={() => { setInventoryFilters({...draftInventoryFilters}); setIsInventoryFilterOpen(false); }} className="w-full mt-4 py-2 bg-blue-600 text-white rounded-lg text-xs font-bold hover:bg-blue-700 transition-colors">确认</button>
+                  </motion.div>
+                </>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+
+      {filteredInventoryStats.some(row => (row.abnormal || 0) > 0 || (row.pending || 0) > 0) && (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-slate-100 px-4 py-2" data-testid="inventory-status-summary">
+          <InventoryStatusCounts rows={filteredInventoryStats} />
+          <span className="text-[10px] text-gray-400">已包含在库存总数中</span>
+        </div>
+      )}
+
+      <div className="px-4 py-3 bg-gray-50/50 border-b border-gray-100">
+        <div className="flex bg-gray-200/50 p-1 rounded-lg w-fit shadow-inner">
+          <button
+            onClick={() => setInventoryTab('region')}
+            className={`px-6 py-1.5 rounded-md text-xs font-bold transition-all ${
+              inventoryTab === 'region' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            按区域
+          </button>
+          <button
+            onClick={() => setInventoryTab('model')}
+            className={`px-6 py-1.5 rounded-md text-xs font-bold transition-all ${
+              inventoryTab === 'model' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            按车型
+          </button>
+        </div>
+      </div>
+
+      {/* Active Filters Bar */}
+      {(inventoryFilters.region || inventoryFilters.city || inventoryFilters.brand || inventoryFilters.type || inventoryFilters.model) && (
+        <div className="px-4 py-2 border-b border-gray-100 flex flex-wrap gap-2 items-center">
+          {inventoryFilters.region && (
+            <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
+              区域: {inventoryFilters.region}
+              <button onClick={() => setInventoryFilters({...inventoryFilters, region: ''})} className="hover:text-red-500 ml-0.5">×</button>
+            </span>
+          )}
+          {inventoryFilters.city && (
+            <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
+              城市: {inventoryFilters.city}
+              <button onClick={() => setInventoryFilters({...inventoryFilters, city: ''})} className="hover:text-red-500 ml-0.5">×</button>
+            </span>
+          )}
+          {inventoryFilters.brand && (
+            <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
+              品牌: {inventoryFilters.brand}
+              <button onClick={() => setInventoryFilters({...inventoryFilters, brand: ''})} className="hover:text-red-500 ml-0.5">×</button>
+            </span>
+          )}
+          {inventoryFilters.type && (
+            <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
+              车型: {inventoryFilters.type}
+              <button onClick={() => setInventoryFilters({...inventoryFilters, type: '', model: ''})} className="hover:text-red-500 ml-0.5">×</button>
+            </span>
+          )}
+          {inventoryFilters.model && (
+            <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-[10px] flex items-center gap-1">
+              批次: {inventoryFilters.model}
+              <button onClick={() => setInventoryFilters({...inventoryFilters, model: ''})} className="hover:text-red-500 ml-0.5">×</button>
+            </span>
+          )}
+          <button onClick={() => setInventoryFilters({ region: '', city: '', brand: '', type: '', model: '' })} className="text-[11px] text-red-500 font-bold ml-auto hover:text-red-600">清除</button>
+        </div>
+      )}
+
+      {/* Desktop View Table */}
+      <InventoryDesktopTable {...listProps} />
+
+      {/* Mobile View */}
+      <InventoryMobileList {...listProps} />
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+import type { RegionalInventoryStats } from '../../types';
+
+/** Status counts are subsets of these filtered inventory rows, never extra stock. */
+export function InventoryStatusCounts({ rows }: { rows: RegionalInventoryStats[] }) {
+  const abnormal = rows.reduce((sum, row) => sum + (row.abnormal ?? 0), 0);
+  const pending = rows.reduce((sum, row) => sum + (row.pending ?? 0), 0);
+  if (abnormal === 0 && pending === 0) return null;
+  return <span className="inline-flex flex-wrap gap-x-3 gap-y-1 text-[11px] font-normal" data-testid="inventory-status-counts">
+    {abnormal > 0 && <span className="text-amber-700">其中异动 <strong>{abnormal}</strong> 台</span>}
+    {pending > 0 && <span className="text-blue-700">其中待交车 <strong>{pending}</strong> 台</span>}
+  </span>;
+}

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

@@ -0,0 +1,87 @@
+import { Activity, TriangleAlert, PlusCircle, Truck, Warehouse } from 'lucide-react';
+import type { SummaryMetricsProps } from './types';
+
+export function SummaryMetrics({
+  summary: SUMMARY,
+  operatingRate,
+  inventoryRate,
+  setVehicleSelection: setShowPlateNumbers,
+}: SummaryMetricsProps) {
+  return (
+    <>
+      {/* Header Summary - Ultra Compact */}
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mb-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: '资产概览' })}>
+          <div className="w-8 h-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-500">
+            <Truck size={14} />
+          </div>
+          <div>
+            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">资产总数</div>
+            <div className="text-base font-bold text-gray-800 leading-none">{SUMMARY.totalAssets.toLocaleString()}</div>
+          </div>
+        </div>
+
+        {/* Operating */}
+        <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', category: 'Operating', source: 'asset', title: '正在运营' })}>
+          <div className="w-8 h-8 rounded-xl bg-blue-50 flex items-center justify-center text-blue-500">
+            <Activity size={14} />
+          </div>
+          <div>
+            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总运营</div>
+            <div className="flex items-baseline gap-1">
+              <span className="text-base font-bold text-blue-600 leading-none">{SUMMARY.operating.total}</span>
+              <span className="text-[8px] text-gray-400 leading-none">自{SUMMARY.operating.self} 租{SUMMARY.operating.leased}{SUMMARY.operating.hanging > 0 && ` 挂${SUMMARY.operating.hanging}`}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Inventory */}
+        <div data-testid="asset-inventory-card" className="col-span-2 md:col-span-1 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', category: 'Inventory', source: 'asset', title: '库存总数' })}>
+          <div className="w-8 h-8 rounded-xl bg-slate-50 flex items-center justify-center text-slate-500">
+            <Warehouse size={14} />
+          </div>
+          <div>
+            <div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5" title="异动、待交车属于库存子集，已包含在总库存中">总库存</div>
+            <div className="flex items-baseline gap-1">
+              <span className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</span>
+            </div>
+            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]">
+              <button type="button" data-testid="asset-abnormal-card" className="inline-flex items-center gap-1 text-amber-600 hover:underline"
+                onClick={(event) => { event.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Abnormal', source: 'asset', title: '库存中的异动车辆' }); }}>
+                <TriangleAlert size={12} />其中异动 <strong>{SUMMARY.inventory.abnormal}</strong>
+              </button>
+              <button type="button" className="inline-flex items-center gap-1 text-blue-600 hover:underline"
+                onClick={(event) => { event.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Pending', source: 'asset', title: '库存中的待交车' }); }}>
+                <PlusCircle size={12} />其中待交车 <strong>{SUMMARY.pendingDelivery}</strong>
+              </button>
+
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+
+      <div data-testid="asset-operation-ratio-strip" className="mb-3 rounded-2xl border border-slate-100 bg-white/85 px-4 py-3 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">
+            <div className="px-2">
+              <div className="text-[10px] font-black text-slate-400">运营率</div>
+              <div className="mt-0.5 text-base font-black text-blue-600">{operatingRate.toFixed(1)}%</div>
+            </div>
+            <div className="px-2">
+              <div className="text-[10px] font-black text-slate-400">库存率</div>
+              <div className="mt-0.5 text-base font-black text-slate-700">{inventoryRate.toFixed(1)}%</div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/modules/assets/components/overview/types.ts

@@ -0,0 +1,72 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { FlowDetailItem, FlowStatsResponse, FlowType } from '../../api';
+import type {
+  DateRange,
+  FlowSelection,
+  InventoryFilters,
+  VehicleModalSelection,
+} from '../../model';
+import type { RegionalInventoryStats, SummaryData, TypeSummary } from '../../types';
+import type { AssetsTheme } from '../AssetsHeader';
+
+export interface SummaryMetricsProps {
+  summary: SummaryData;
+  operatingRate: number;
+  inventoryRate: number;
+  pendingRate: number;
+  setVehicleSelection: Dispatch<SetStateAction<VehicleModalSelection | null>>;
+}
+
+export interface FlowStatisticsCardProps {
+  flowRange: DateRange;
+  setFlowRange: Dispatch<SetStateAction<DateRange>>;
+  flowLoading: boolean;
+  flowStats: FlowStatsResponse | null;
+  exportFlowDetails: (rows?: FlowDetailItem[], title?: string) => void;
+  flowDailyExpanded: boolean;
+  setFlowDailyExpanded: Dispatch<SetStateAction<boolean>>;
+  setSelectedFlow: Dispatch<SetStateAction<FlowSelection | null>>;
+}
+
+export interface AssetSummarySectionProps {
+  processedData: TypeSummary[];
+  theme: AssetsTheme;
+  expandedAssetTypes: Set<string>;
+  toggleAssetType: (type: string) => void;
+  expandedModels: Set<string>;
+  toggleModel: (model: string) => void;
+  setVehicleSelection: Dispatch<SetStateAction<VehicleModalSelection | null>>;
+}
+
+export interface InventoryStatisticsSectionProps {
+  inventoryFilters: InventoryFilters;
+  setInventoryFilters: Dispatch<SetStateAction<InventoryFilters>>;
+  draftInventoryFilters: InventoryFilters;
+  setDraftInventoryFilters: Dispatch<SetStateAction<InventoryFilters>>;
+  isInventoryFilterOpen: boolean;
+  setIsInventoryFilterOpen: Dispatch<SetStateAction<boolean>>;
+  uniqueInventoryRegions: string[];
+  uniqueInventoryCities: string[];
+  uniqueInventoryBrands: string[];
+  uniqueInventoryTypes: string[];
+  uniqueInventoryModelsForType: string[];
+  filteredInventoryStats: RegionalInventoryStats[];
+  inventoryTab: 'region' | 'model';
+  setInventoryTab: Dispatch<SetStateAction<'region' | 'model'>>;
+  inventoryByRegion: Record<string, Record<string, RegionalInventoryStats[]>>;
+  expandedInventoryRegions: Set<string>;
+  toggleInventoryRegion: (region: string) => void;
+  inventoryByModel: Record<string, Record<string, RegionalInventoryStats[]>>;
+  expandedInventoryTypes: Set<string>;
+  toggleInventoryType: (type: string) => void;
+  setVehicleSelection: Dispatch<SetStateAction<VehicleModalSelection | null>>;
+}
+
+export type OverviewViewProps = SummaryMetricsProps
+  & FlowStatisticsCardProps
+  & AssetSummarySectionProps
+  & InventoryStatisticsSectionProps
+  & {
+    allTypesExpanded: boolean;
+    toggleAllAssetTypes: () => void;
+  };

src/modules/assets/components/useDialogFocus.ts

@@ -0,0 +1,22 @@
+import { useEffect, type RefObject } from 'react';
+
+export function useDialogFocus(open: boolean, ref: RefObject<HTMLDivElement | null>, close: () => void) {
+  useEffect(() => {
+    if (!open) return;
+    const previous = document.activeElement as HTMLElement | null;
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const frame = requestAnimationFrame(() => ref.current?.focus());
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') { event.preventDefault(); close(); }
+      if (event.key !== 'Tab') return;
+      const items = Array.from(ref.current?.querySelectorAll<HTMLElement>('button:not([disabled]), input, select, a[href], [tabindex="0"]') || []).filter(el=>el.getClientRects().length>0);
+      const first = items[0]; const last = items[items.length-1];
+      if (!first) { event.preventDefault(); return; }
+      if (event.shiftKey && (document.activeElement === first || document.activeElement === ref.current)) {event.preventDefault();last.focus();}
+      else if (!event.shiftKey && (document.activeElement === last || document.activeElement === ref.current)) {event.preventDefault();first.focus();}
+    };
+    document.addEventListener('keydown',onKey);
+    return () => {cancelAnimationFrame(frame);document.removeEventListener('keydown',onKey);document.body.style.overflow=overflow;previous?.focus();};
+  }, [open, ref, close]);
+}

src/modules/assets/library/AssetOverview.tsx

@@ -1,424 +0,0 @@
-import { useState } from "react";
-import { InventoryAnalysis } from "./InventoryAnalysis";
-import { inventoryTotals, type InventoryScope } from "./inventory-view";
-import { InventorySection } from "./InventorySection";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardAction,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "@/components/ui/accordion";
-import {
-  Package,
-  Truck,
-  ArrowLeftRight,
-  AlertTriangle,
-  Activity,
-  Warehouse,
-  ArrowUpRight,
-} from "lucide-react";
-import type {
-  SummaryData,
-  TypeSummary,
-  RegionalInventoryStats,
-  ModelSummary,
-  BatchSummary,
-} from "../types";
-import type { VehicleModalCategory, VehicleModalSelection } from "../model";
-import type { AssetSection } from "./useAssetHash";
-import {
-  baseSelection,
-  ProportionBar,
-  sectionTabsListClass,
-  sectionTabsTriggerClass,
-  type OpenVehicles,
-} from "./shared";
-import { DataGrid, type Column } from "./DataGrid";
-import { ExportButton } from "./export";
-import { FlowStatistics } from "./FlowStatistics";
-
-/** 运营率环形图（SVG donut）。 */
-function RateDonut({ rate, size = 48 }: { rate: number; size?: number }) {
-  const stroke = 6;
-  const r = (size - stroke) / 2;
-  const circumference = 2 * Math.PI * r;
-  const filled = (Math.min(100, Math.max(0, rate)) / 100) * circumference;
-  return (
-    <div
-      className="relative shrink-0"
-      style={{ width: size, height: size }}
-      role="img"
-      aria-label={`运营率 ${rate.toFixed(1)}%`}
-    >
-      <svg
-        width={size}
-        height={size}
-        viewBox={`0 0 ${size} ${size}`}
-        className="-rotate-90"
-        aria-hidden="true"
-      >
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={r}
-          fill="none"
-          stroke="var(--fill-3)"
-          strokeWidth={stroke}
-        />
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={r}
-          fill="none"
-          stroke="var(--blue)"
-          strokeWidth={stroke}
-          strokeLinecap="round"
-          strokeDasharray={`${filled} ${circumference}`}
-          className="transition-[stroke-dasharray] duration-700 ease-out"
-        />
-      </svg>
-      <span
-        className="absolute inset-0 grid place-items-center text-[11px] font-bold text-[var(--label)]"
-        aria-hidden="true"
-      >
-        {rate.toFixed(0)}%
-      </span>
-    </div>
-  );
-}
-export function AssetOverview({
-  summary: s,
-  types,
-  inventory,
-  subject,
-  section,
-  onSectionChange,
-  open,
-}: {
-  summary: SummaryData;
-  types: TypeSummary[];
-  inventory: RegionalInventoryStats[];
-  subject: string | null;
-  section: AssetSection;
-  onSectionChange: (section: AssetSection) => void;
-  open: OpenVehicles;
-}) {
-  const [inventoryScope, setInventoryScope] = useState<InventoryScope | null>(
-    null,
-  );
-  const inventoryCounts = inventoryTotals(inventory);
-  const operatingRate = s.totalAssets
-    ? (s.operating.total / s.totalAssets) * 100
-    : 0;
-  const show = (category?: VehicleModalCategory) => {
-    if (
-      category === "Inventory" ||
-      category === "Abnormal" ||
-      category === "Pending"
-    )
-      setInventoryScope({
-        rows: inventory,
-        label: "全部库存",
-        initialCategory: category === "Inventory" ? undefined : category,
-      });
-    else open({ ...baseSelection, category });
-  };
-  return (
-    <div className="asset-overview grid min-w-0 gap-3">
-      <div className="grid gap-2 md:grid-cols-2" aria-label="资产构成">
-        <Card size="sm" className="asset-kpi ring-0 shadow-[var(--shadow-1)]">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
-              <Activity aria-hidden="true" />
-              总运营
-            </CardTitle>
-            <CardAction>
-              <div className="flex items-center gap-2.5">
-                <RateDonut rate={operatingRate} />
-                <div className="text-right">
-                  <p className="text-xs text-[var(--label-secondary)]">
-                    运营率
-                  </p>
-                  <p className="text-sm font-semibold tabular-nums whitespace-nowrap text-[var(--label)]">
-                    {operatingRate.toFixed(1)}%
-                  </p>
-                </div>
-              </div>
-            </CardAction>
-            <CardDescription>租赁 + 自营</CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-wrap items-end justify-between gap-3">
-            <Button
-              variant="ghost"
-              className="asset-kpi-number"
-              onClick={() => show("Operating")}
-            >
-              {s.operating.total.toLocaleString()}{" "}
-              <span className="asset-kpi-unit">台</span>
-              <ArrowUpRight aria-hidden="true" />
-            </Button>
-            <div className="flex gap-2">
-              <Badge className="bg-[var(--bg-tertiary)] text-[var(--label)]">
-                租赁 {s.operating.leased}
-              </Badge>
-              <Badge className="bg-[var(--bg-tertiary)] text-[var(--label)]">
-                自营 {s.operating.self}
-              </Badge>
-            </div>
-            <ProportionBar
-              label={`租赁 ${s.operating.leased} 台，自营 ${s.operating.self} 台`}
-              segments={[
-                {
-                  value: s.operating.leased,
-                  className: "bg-[var(--blue)]",
-                  title: "租赁",
-                },
-                {
-                  value: s.operating.self,
-                  className: "bg-[var(--teal)]",
-                  title: "自营",
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-        <Card
-          size="sm"
-          className="asset-kpi inventory ring-0 shadow-[var(--shadow-1)]"
-        >
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
-              <Warehouse aria-hidden="true" />
-              总库存
-            </CardTitle>
-            <CardDescription>
-              待运营 + 可运营；异动、待交车已包含在内
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-wrap items-end justify-between gap-3">
-            <Button
-              variant="ghost"
-              className="asset-kpi-number"
-              onClick={() => show("Inventory")}
-            >
-              {s.inventory.total.toLocaleString()}{" "}
-              <span className="asset-kpi-unit">台</span>
-              <ArrowUpRight aria-hidden="true" />
-            </Button>
-            <div className="flex flex-wrap gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-200"
-                disabled={!s.inventory.abnormal}
-                onClick={() => show("Abnormal")}
-              >
-                <AlertTriangle
-                  data-icon="inline-start"
-                  className="text-[var(--orange)]"
-                />
-                异动 {s.inventory.abnormal}
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                className="border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200"
-                disabled={!s.pendingDelivery}
-                onClick={() => show("Pending")}
-              >
-                待交车 {s.pendingDelivery}
-              </Button>
-            </div>
-            <ProportionBar
-              label={`可运营 ${inventoryCounts.available} 台，待运营 ${inventoryCounts.awaiting} 台`}
-              segments={[
-                {
-                  value: inventoryCounts.available,
-                  className: "bg-[var(--blue)]",
-                  title: "可运营",
-                },
-                {
-                  value: inventoryCounts.awaiting,
-                  className: "bg-[var(--inventory-awaiting)]",
-                  title: "待运营",
-                },
-              ]}
-            />
-          </CardContent>
-        </Card>
-      </div>
-      <Tabs
-        value={section}
-        onValueChange={(value) => onSectionChange(value as AssetSection)}
-      >
-        <TabsList className={sectionTabsListClass}>
-          <TabsTrigger className={sectionTabsTriggerClass} value="inventory">
-            <Package />
-            库存统计
-          </TabsTrigger>
-          <TabsTrigger className={sectionTabsTriggerClass} value="models">
-            <Truck />
-            车型资产
-          </TabsTrigger>
-          <TabsTrigger className={sectionTabsTriggerClass} value="flow">
-            <ArrowLeftRight />
-            交还车统计
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="inventory">
-          <InventorySection
-            inventory={inventory}
-            subject={subject}
-            inspect={setInventoryScope}
-          />
-        </TabsContent>
-        <TabsContent value="models">
-          <Card
-            size="sm"
-            className="bg-[var(--bg-tertiary)] ring-0 shadow-[var(--shadow-2)]"
-          >
-            <CardHeader>
-              <CardTitle className="font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
-                车型资产
-              </CardTitle>
-              <CardDescription>
-                按车型、型号与批次逐层查看；本周交还车按车辆去重。
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Accordion type="multiple">
-                {types.map((type) => (
-                  <AccordionItem key={type.type} value={type.type}>
-                    <AccordionTrigger>
-                      {type.type} · {type.totalAssets} 台 · 库存{" "}
-                      {type.totalInventory}
-                    </AccordionTrigger>
-                    <AccordionContent>
-                      <ModelTable
-                        rows={type.models}
-                        open={open}
-                        selection={{ ...baseSelection }}
-                      />
-                      <Accordion type="multiple">
-                        {type.models.map((model) => (
-                          <AccordionItem key={model.model} value={model.model}>
-                            <AccordionTrigger>
-                              {model.model} · 查看批次
-                            </AccordionTrigger>
-                            <AccordionContent>
-                              <ModelTable
-                                rows={model.batches}
-                                open={open}
-                                selection={{
-                                  ...baseSelection,
-                                  model: model.model,
-                                }}
-                                batch
-                              />
-                            </AccordionContent>
-                          </AccordionItem>
-                        ))}
-                      </Accordion>
-                    </AccordionContent>
-                  </AccordionItem>
-                ))}
-              </Accordion>
-            </CardContent>
-          </Card>
-        </TabsContent>
-        <TabsContent value="flow">
-          <FlowStatistics subject={subject} />
-        </TabsContent>
-      </Tabs>
-      {inventoryScope && (
-        <InventoryAnalysis
-          scope={inventoryScope}
-          subject={subject}
-          close={() => setInventoryScope(null)}
-        />
-      )}
-    </div>
-  );
-}
-function ModelTable({
-  rows,
-  open,
-  selection,
-  batch = false,
-}: {
-  rows: (ModelSummary | BatchSummary)[];
-  open: OpenVehicles;
-  selection: VehicleModalSelection;
-  batch?: boolean;
-}) {
-  const data = rows.map((row) => ({
-    ...row,
-    name: "model" in row ? row.model : row.batch,
-  }));
-  type Row = (typeof data)[number];
-  const columns: Column<Row>[] = [
-    { key: "name", label: batch ? "批次" : "型号", width: 190 },
-    ...(
-      [
-        ["total", "资产", undefined],
-        ["operating", "运营", "Operating"],
-        ["inventory", "库存", "Inventory"],
-        ["abnormal", "异动", "Abnormal"],
-        ["pending", "待交车", "Pending"],
-        ["weeklyDelivered", "本周交车", "Delivered"],
-        ["weeklyReturned", "本周还车", "Returned"],
-        ["weeklyReplaced", "替换交车", "Replaced"],
-      ] as const
-    ).map(([key, label, category]) => ({
-      key,
-      label,
-      action: (row: Row) =>
-        open({
-          ...selection,
-          ...(batch ? { batch: row.name } : { model: row.name }),
-          category,
-        }),
-    })),
-    {
-      key: "inventoryRegions",
-      label: "库存分布",
-      width: 260,
-      format: (value) => formatInventoryRegions(value),
-      tooltip: (value) => formatInventoryRegions(value),
-    },
-  ];
-  return (
-    <div className="grid gap-2">
-      <ExportButton
-        rows={data}
-        columns={columns}
-        filename={batch ? "批次资产" : "型号资产"}
-        sheetName={batch ? "批次资产" : "型号资产"}
-      />
-      <DataGrid
-        rows={data}
-        columns={columns}
-        label={batch ? "批次资产" : "型号资产"}
-      />
-    </div>
-  );
-}
-
-/** 库存分布：只展示有库存的区域，避免 0 值噪声；截断时由 tooltip 展示完整内容。 */
-function formatInventoryRegions(value: unknown): string {
-  const parts = Object.entries(value as Record<string, number>)
-    .filter(([, count]) => count > 0)
-    .map(([region, count]) => `${region} ${count}`);
-  return parts.join(" · ") || "—";
-}

src/modules/assets/library/BusinessViews.tsx

@@ -1,695 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from "@/components/ui/card";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "@/components/ui/accordion";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Button } from "@/components/ui/button";
-import { Field, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
-import type {
-  DeptGroup,
-  ManagerStats,
-  RegionGroup,
-  RegionTypeBreakdown,
-  CustomerStats,
-} from "../types";
-import {
-  deriveDepartmentView,
-  deriveCustomerView,
-  type CustomerFilters,
-} from "../model";
-import { fetchRegionStats, fetchRegionChart } from "../api";
-const APPLE_CHART_COLORS = [
-  "var(--indigo)",
-  "var(--blue)",
-  "var(--teal)",
-  "var(--orange)",
-  "var(--green)",
-];
-import {
-  baseSelection,
-  FilterFields,
-  PrivateText,
-  unique,
-  Failure,
-  type OpenVehicles,
-} from "./shared";
-import { DataGrid, type Column } from "./DataGrid";
-import { ExportButton } from "./export";
-import { Chart } from "./Chart";
-const typeFields = [
-  ["t4_5", "4.5T普货"],
-  ["t4_5c", "4.5T冷链"],
-  ["t18", "18T"],
-  ["t49", "49T"],
-  ["trailer", "挂车"],
-  ["other", "其他"],
-] as const;
-export function DepartmentView({
-  data,
-  open,
-}: {
-  data: DeptGroup[];
-  open: OpenVehicles;
-}) {
-  const [mode, setMode] = useState("department");
-  const [manager, setManager] = useState("");
-  const view = deriveDepartmentView(data, manager || "All");
-  const cols: Column<DeptGroup>[] = [
-    { key: "department", label: "部门", width: 180 },
-    {
-      key: "totalAssets",
-      label: "车辆总数",
-      action: (r) =>
-        open({
-          ...baseSelection,
-          source: "department",
-          category: "Operating",
-          department: r.department,
-        }),
-    },
-    {
-      key: "operatingCount",
-      label: "出勤车辆",
-      action: (r) =>
-        open({
-          ...baseSelection,
-          source: "department",
-          category: "Operating",
-          department: r.department,
-          attendance: "active",
-        }),
-    },
-    {
-      key: "idleCount",
-      label: "未出勤车辆",
-      action: (r) =>
-        open({
-          ...baseSelection,
-          source: "department",
-          category: "Operating",
-          department: r.department,
-          attendance: "idle",
-        }),
-    },
-    {
-      key: "attendanceRate",
-      label: "出勤率",
-      numeric: true,
-      format: (v) => `${Number(v).toFixed(1)}%`,
-    },
-    {
-      key: "avgMileage",
-      label: "平均里程（km）",
-      width: 160,
-      numeric: true,
-      format: (v) => Number(v).toFixed(1),
-    },
-  ];
-  const managerCols: Column<ManagerStats>[] = [
-    { key: "manager", label: "业务负责人", private: true },
-    { key: "department", label: "部门", width: 160 },
-    ...typeFields.map(([key, type]) => ({
-      key,
-      label: type,
-      action: (r: ManagerStats) =>
-        open({
-          ...baseSelection,
-          source: "department",
-          category: "Operating",
-          department: r.department,
-          manager: r.manager,
-          type,
-        }),
-    })),
-    {
-      key: "total",
-      label: "合计",
-      action: (r) =>
-        open({
-          ...baseSelection,
-          source: "department",
-          category: "Operating",
-          department: r.department,
-          manager: r.manager,
-        }),
-    },
-  ];
-  return (
-    <Card
-      size="sm"
-      className="bg-[var(--bg-tertiary)] ring-0 shadow-[var(--shadow-2)]"
-    >
-      <CardHeader>
-        <CardTitle className="font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
-          部门运营
-        </CardTitle>
-        <CardDescription>查看部门出勤表现与负责人车辆分布。</CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="flex flex-wrap items-center justify-between gap-2">
-          <Tabs value={mode} onValueChange={setMode}>
-            <TabsList className="min-h-11">
-              <TabsTrigger className="min-h-11 px-3" value="department">按部门</TabsTrigger>
-              <TabsTrigger className="min-h-11 px-3" value="manager">按负责人</TabsTrigger>
-            </TabsList>
-          </Tabs>
-          {mode === "department" ? (
-            <ExportButton
-              rows={data}
-              columns={cols}
-              filename="部门运营-按部门"
-              sheetName="部门"
-            />
-          ) : (
-            <ExportButton
-              rows={view.managerStats}
-              columns={managerCols}
-              filename="部门运营-按负责人"
-              sheetName="负责人"
-            />
-          )}
-        </div>
-        {mode === "department" ? (
-          <>
-            <DataGrid rows={data} columns={cols} label="部门" />
-            <Accordion type="multiple">
-              {data.map((d) => (
-                <AccordionItem key={d.department} value={d.department}>
-                  <AccordionTrigger>
-                    {d.department} · 负责人明细
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <DataGrid
-                      rows={d.managers}
-                      columns={managerCols}
-                      label="负责人"
-                    />
-                  </AccordionContent>
-                </AccordionItem>
-              ))}
-            </Accordion>
-          </>
-        ) : (
-          <>
-            <FilterFields
-              fields={[
-                {
-                  label: "负责人",
-                  value: manager,
-                  values: view.managers,
-                  change: setManager,
-                },
-              ]}
-              onReset={() => setManager("")}
-            />
-            <DataGrid
-              rows={view.managerStats}
-              columns={managerCols}
-              label="负责人"
-            />
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-export function RegionView({
-  data,
-  subject,
-  open,
-}: {
-  data: RegionGroup[];
-  subject: string | null;
-  open: OpenVehicles;
-}) {
-  const [chartView, setChartView] = useState("region");
-  const [filters, setFilters] = useState({
-    region: "",
-    city: "",
-    customer: "",
-  });
-  const [filtered, setFiltered] = useState<RegionGroup[]>(data);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [retry, setRetry] = useState(0);
-  useEffect(() => {
-    let active = true;
-    if (!filters.region && !filters.city && !filters.customer) {
-      setFiltered(data);
-      setLoading(false);
-      setError("");
-      return;
-    }
-    setLoading(true);
-    setError("");
-    fetchRegionStats(filters, subject)
-      .then((v) => {
-        if (active) setFiltered(v);
-      })
-      .catch((e) => {
-        if (active) setError(String(e.message || e));
-      })
-      .finally(() => {
-        if (active) setLoading(false);
-      });
-    return () => {
-      active = false;
-    };
-  }, [filters, subject, data, retry]);
-  const option = useMemo(
-    () => ({
-      color: APPLE_CHART_COLORS,
-      textStyle: { color: "var(--label-secondary)" },
-      tooltip: { trigger: "axis" },
-      grid: { left: 45, right: 15, top: 20, bottom: 45 },
-      xAxis: {
-        type: "category",
-        data: filtered.map((r) => r.region),
-        axisLabel: { color: "var(--label-secondary)", interval: 0 },
-        axisLine: { lineStyle: { color: "var(--separator)" } },
-      },
-      yAxis: {
-        type: "value",
-        minInterval: 1,
-        axisLabel: { color: "var(--label-secondary)" },
-        splitLine: { lineStyle: { color: "var(--separator)" } },
-      },
-      series: [
-        {
-          type: "bar",
-          name: "车辆",
-          data: filtered.map((r) => r.totalAssets),
-          barMaxWidth: 48,
-          itemStyle: { borderRadius: [4, 4, 0, 0] },
-          label: {
-            show: true,
-            position: "top",
-            color: "var(--label-secondary)",
-          },
-        },
-      ],
-    }),
-    [filtered],
-  );
-  const breakdown = (rows: RegionTypeBreakdown[], location: string) => (
-    <DataGrid
-      rows={rows}
-      label={`${location}车型`}
-      columns={[
-        { key: "type", label: "车型" },
-        ...(
-          [
-            ["total", "总数", undefined],
-            ["operating", "运营", "Operating"],
-            ["inventory", "库存", "Inventory"],
-            ["abnormal", "异动", "Abnormal"],
-            ["pending", "待交车", "Pending"],
-          ] as const
-        ).map(([key, label, category]) => ({
-          key,
-          label,
-          action: (r: RegionTypeBreakdown) =>
-            open({
-              ...baseSelection,
-              source: "region",
-              location: filters.city || location,
-              customer: filters.customer || undefined,
-              vehicleType: r.type === "其他" ? "区域其他" : r.type,
-              category,
-            }),
-        })),
-      ]}
-    />
-  );
-  return (
-    <Card
-      size="sm"
-      className="bg-[var(--bg-tertiary)] ring-0 shadow-[var(--shadow-2)]"
-    >
-      <CardHeader>
-        <CardTitle className="font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
-          区域分布
-        </CardTitle>
-        <CardDescription>
-          运营与待交车车辆，按区域 → 城市 → 车型查看。
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <FilterFields
-          fields={[
-            {
-              label: "区域",
-              value: filters.region,
-              values: data.map((r) => r.region),
-              change: (v) => setFilters((f) => ({ ...f, region: v, city: "" })),
-            },
-            {
-              label: "城市",
-              value: filters.city,
-              values: unique(
-                data
-                  .filter((r) => !filters.region || r.region === filters.region)
-                  .flatMap((r) => r.cities.map((c) => c.city)),
-              ),
-              change: (v) => setFilters((f) => ({ ...f, city: v })),
-            },
-            {
-              label: "客户",
-              value: filters.customer,
-              values: unique(data.flatMap((r) => r.customers)),
-              change: (v) => setFilters((f) => ({ ...f, customer: v })),
-            },
-          ]}
-          onReset={() => setFilters({ region: "", city: "", customer: "" })}
-        />
-        {error ? (
-          <Failure message={error} retry={() => setRetry((n) => n + 1)} />
-        ) : loading ? (
-          <Skeleton className="h-64" />
-        ) : (
-          <>
-            <Tabs value={chartView} onValueChange={setChartView}>
-              <TabsList className="min-h-11">
-                <TabsTrigger className="min-h-11 px-3" value="region">区域分布</TabsTrigger>
-                <TabsTrigger className="min-h-11 px-3" value="province">实时省份</TabsTrigger>
-              </TabsList>
-            </Tabs>
-            {chartView === "region" ? (
-              <Chart option={option} label="各区域车辆数量" />
-            ) : (
-              <ProvinceChart subject={subject} source="realtime" />
-            )}
-            <Accordion type="multiple">
-              {filtered.map((r) => (
-                <AccordionItem key={r.region} value={r.region}>
-                  <AccordionTrigger>
-                    {r.region} · {r.totalAssets} 台
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    {breakdown(r.typeBreakdown, r.region)}
-                    <Accordion type="multiple">
-                      {r.cities.map((city) => (
-                        <AccordionItem key={city.city} value={city.city}>
-                          <AccordionTrigger>
-                            {city.city} · {city.totalAssets} 台
-                          </AccordionTrigger>
-                          <AccordionContent>
-                            {breakdown(city.typeBreakdown, city.city)}
-                          </AccordionContent>
-                        </AccordionItem>
-                      ))}
-                    </Accordion>
-                  </AccordionContent>
-                </AccordionItem>
-              ))}
-            </Accordion>
-            {!filtered.length && (
-              <CardDescription>暂无符合条件的区域数据</CardDescription>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-const initialCustomer: CustomerFilters = {
-  customer: [],
-  brand: "",
-  department: "",
-  manager: "",
-  region: "",
-};
-export function CustomerView({
-  data,
-  departments,
-  subject,
-  open,
-}: {
-  data: CustomerStats[];
-  subject: string | null;
-  departments: DeptGroup[];
-  open: OpenVehicles;
-}) {
-  const [filters, setFilters] = useState(initialCustomer);
-  const [customerSearch, setCustomerSearch] = useState("");
-  const [chartGroup, setChartGroup] = useState("region");
-  const view = deriveCustomerView(data, departments, filters);
-  const option = useMemo(() => {
-    const counts = new Map<string, number>();
-    for (const row of view.filtered) {
-      const name = chartGroup === "region" ? row.region : row.city;
-      counts.set(
-        name || "未归属",
-        (counts.get(name || "未归属") || 0) + row.total,
-      );
-    }
-    return {
-      color: APPLE_CHART_COLORS,
-      textStyle: { color: "var(--label-secondary)" },
-      tooltip: { trigger: "item" },
-      legend: {
-        type: "scroll",
-        bottom: 0,
-        textStyle: { color: "var(--label-secondary)" },
-      },
-      series: [
-        {
-          type: "pie",
-          radius: ["35%", "65%"],
-          label: { show: false },
-          data: [...counts].map(([name, value]) => ({ name, value })),
-        },
-      ],
-    };
-  }, [view.filtered, chartGroup]);
-  const cols: Column<CustomerStats>[] = [
-    { key: "customer", label: "客户", width: 220, private: true },
-    { key: "manager", label: "负责人", private: true },
-    { key: "department", label: "部门", width: 150 },
-    { key: "brand", label: "品牌" },
-    { key: "region", label: "区域" },
-    { key: "city", label: "城市" },
-    ...typeFields.map(([key, type]) => ({
-      key,
-      label: type,
-      action: (r: CustomerStats) =>
-        open({
-          ...baseSelection,
-          source: "customer",
-          category: "Operating",
-          customer: r.customer,
-          type,
-        }),
-    })),
-    {
-      key: "total",
-      label: "合计",
-      action: (r) =>
-        open({
-          ...baseSelection,
-          source: "customer",
-          category: "Operating",
-          customer: r.customer,
-        }),
-    },
-  ];
-  return (
-    <Card
-      size="sm"
-      className="bg-[var(--bg-tertiary)] ring-0 shadow-[var(--shadow-2)]"
-    >
-      <CardHeader>
-        <CardTitle className="font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
-          客户资产
-        </CardTitle>
-        <CardDescription>
-          按客户、负责人、品牌与区域查看车辆分布。
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="flex flex-wrap items-center justify-between gap-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline">
-              {filters.customer.length
-                ? `已选 ${filters.customer.length} 个客户`
-                : "选择客户（可多选）"}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-80">
-            <Input
-              placeholder="搜索客户"
-              aria-label="搜索客户选项"
-              value={customerSearch}
-              onChange={(e) => setCustomerSearch(e.target.value)}
-            />
-            <div className="grid max-h-64 gap-3 overflow-y-auto py-3">
-              {view.customerNames
-                .filter((c) => c.includes(customerSearch))
-                .map((c) => (
-                  <Field orientation="horizontal" key={c}>
-                    <Checkbox
-                      id={`customer-${c}`}
-                      checked={filters.customer.includes(c)}
-                      onCheckedChange={(checked) =>
-                        setFilters((f) => ({
-                          ...f,
-                          customer: checked
-                            ? [...f.customer, c]
-                            : f.customer.filter((x) => x !== c),
-                        }))
-                      }
-                    />
-                    <FieldLabel htmlFor={`customer-${c}`}>
-                      <PrivateText>{c}</PrivateText>
-                    </FieldLabel>
-                  </Field>
-                ))}
-            </div>
-          </PopoverContent>
-        </Popover>
-          <ExportButton
-            rows={view.filtered}
-            columns={cols}
-            filename="客户资产"
-            sheetName="客户资产"
-          />
-        </div>
-        <FilterFields
-          fields={[
-            {
-              label: "品牌",
-              value: filters.brand,
-              values: view.brands,
-              change: (v) => setFilters((f) => ({ ...f, brand: v })),
-            },
-            {
-              label: "部门",
-              value: filters.department,
-              values: view.departments,
-              change: (v) =>
-                setFilters((f) => ({ ...f, department: v, manager: "" })),
-            },
-            {
-              label: "负责人",
-              value: filters.manager,
-              values: unique(
-                view.managersByDepartment
-                  .filter(
-                    (d) =>
-                      !filters.department ||
-                      d.department === filters.department,
-                  )
-                  .flatMap((d) => d.managers),
-              ),
-              change: (v) => setFilters((f) => ({ ...f, manager: v })),
-            },
-            {
-              label: "区域",
-              value: filters.region,
-              values: view.regions,
-              change: (v) => setFilters((f) => ({ ...f, region: v })),
-            },
-          ]}
-          onReset={() => setFilters(initialCustomer)}
-        />
-        <Tabs value={chartGroup} onValueChange={setChartGroup}>
-          <TabsList className="min-h-11">
-            <TabsTrigger className="min-h-11 px-3" value="region">区域分布</TabsTrigger>
-            <TabsTrigger className="min-h-11 px-3" value="city">城市分布</TabsTrigger>
-            <TabsTrigger className="min-h-11 px-3" value="province">省份分布</TabsTrigger>
-          </TabsList>
-        </Tabs>
-        {chartGroup === "province" ? (
-          <ProvinceChart subject={subject} source="vehicle" />
-        ) : (
-          <Chart option={option} label="客户车辆地区分布" />
-        )}
-        <DataGrid rows={view.filtered} columns={cols} label="客户资产" />
-      </CardContent>
-    </Card>
-  );
-}
-
-function ProvinceChart({
-  subject,
-  source,
-}: {
-  subject: string | null;
-  source: "vehicle" | "realtime";
-}) {
-  const [rows, setRows] = useState<{ name: string; value: number }[] | null>(
-    null,
-  );
-  const [error, setError] = useState("");
-  const [retry, setRetry] = useState(0);
-  useEffect(() => {
-    let active = true;
-    setRows(null);
-    setError("");
-    fetchRegionChart("province", 5, source, subject)
-      .then((v) => {
-        if (active) setRows(v);
-      })
-      .catch((e) => {
-        if (active) setError(e.message || "加载失败");
-      });
-    return () => {
-      active = false;
-    };
-  }, [subject, source, retry]);
-  const option = useMemo(
-    () => ({
-      color: APPLE_CHART_COLORS,
-      textStyle: { color: "var(--label-secondary)" },
-      tooltip: { trigger: "item" },
-      legend: {
-        type: "scroll",
-        bottom: 0,
-        textStyle: { color: "var(--label-secondary)" },
-      },
-      series: [
-        {
-          type: "pie",
-          radius: ["35%", "65%"],
-          label: { show: false },
-          data: rows || [],
-        },
-      ],
-    }),
-    [rows],
-  );
-  return (
-    <div className="grid gap-2">
-      <CardDescription>
-        {source === "realtime" ? "实时定位" : "车辆档案"}省份分布 ·
-        当前公司范围，不受表格筛选影响
-      </CardDescription>
-      {error ? (
-        <Failure message={error} retry={() => setRetry((n) => n + 1)} />
-      ) : rows ? (
-        <Chart option={option} label="省份分布" />
-      ) : (
-        <Skeleton className="h-64" />
-      )}
-    </div>
-  );
-}

src/modules/assets/library/DataGrid.tsx

@@ -1,274 +0,0 @@
-import { useMemo, useState, useEffect, lazy, Suspense, useRef } from "react";
-import { ArrowUpRight, Search, SearchX, X } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Count, useMobile } from "./shared";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "@/components/ui/accordion";
-import { Skeleton } from "@/components/ui/skeleton";
-const DesktopGrid = lazy(
-  () => import("./DesktopGrid"),
-) as typeof import("./DesktopGrid").default;
-export type Column<T> = {
-  key: keyof T & string;
-  label: string;
-  width?: number;
-  private?: boolean;
-  primary?: boolean;
-  action?: (row: T) => void;
-  format?: (value: unknown, row: T) => string;
-  numeric?: boolean;
-  tooltip?: (value: unknown, row: T) => string;
-};
-export function DataGrid<T extends object>({
-  rows,
-  columns,
-  label = "明细",
-  search = true,
-}: {
-  rows: T[];
-  columns: Column<T>[];
-  label?: string;
-  search?: boolean;
-}) {
-  const mobile = useMobile();
-  const [query, setQuery] = useState("");
-  const [page, setPage] = useState(0);
-  const [compact, setCompact] = useState(true);
-  const top = useRef<HTMLDivElement>(null);
-  const pageSize = 20;
-  const display = (row: T, col: Column<T>) =>
-    col.format
-        ? col.format(row[col.key], row)
-        : String(row[col.key] ?? "—");
-  const filtered = useMemo(() => {
-    const term = query.trim().toLocaleLowerCase();
-    return rows.filter(
-      (row) =>
-        !term ||
-        columns.some((col) =>
-          display(row, col).toLocaleLowerCase().includes(term),
-        ),
-    );
-  }, [rows, columns, query]);
-  useEffect(() => setPage(0), [query, rows.length]);
-  const pages = Math.max(1, Math.ceil(filtered.length / pageSize));
-  const currentPage = Math.min(page, pages - 1);
-  const renderValue = (row: T, col: Column<T>) => {
-    if (col.action)
-      return (
-        <Count
-          value={Number(row[col.key]) || 0}
-          label={`${display(row, columns[0])} ${col.label}`}
-          onClick={() => col.action!(row)}
-        />
-      );
-    const tooltip = col.tooltip?.(row[col.key], row);
-    return tooltip ? (
-      <span title={tooltip}>{display(row, col)}</span>
-    ) : (
-      display(row, col)
-    );
-  };
-  const metrics = columns.slice(1).filter((col) => col.action || col.numeric);
-  const textColumns = columns.slice(1).filter((col) => !metrics.includes(col));
-  const primaryColumns = textColumns.filter(
-    (col, index) => index < 4 || col.primary,
-  );
-  const moreColumns = textColumns.filter(
-    (col) => !primaryColumns.includes(col),
-  );
-  const fields = (row: T, list: Column<T>[]) => (
-    <dl className="asset-record-fields">
-      {list.map((col) => (
-        <div key={col.key} className="min-w-0">
-          <dt>{col.label}</dt>
-          <dd>{renderValue(row, col)}</dd>
-        </div>
-      ))}
-    </dl>
-  );
-  const changePage = (next: number) => {
-    setPage(next);
-    top.current?.scrollIntoView({ block: "start", behavior: "instant" });
-  };
-  return (
-    <div className="grid min-w-0 gap-3 scroll-mt-4" ref={top}>
-      <div className="asset-grid-toolbar">
-        <p className="text-xs text-[var(--label-secondary)]" role="status">
-          {query
-            ? `找到 ${filtered.length} / ${rows.length} 条记录`
-            : `共 ${filtered.length} 条记录`}
-          {columns.some((col) => col.action) && (
-            <span className="ml-3 hidden md:inline">蓝色数量可查看明细</span>
-          )}
-        </p>
-        <div className="flex min-w-0 flex-wrap items-center gap-2 max-md:w-full md:flex-nowrap">
-          {search && (rows.length > 8 || query) && (
-            <div className="asset-grid-search">
-              <Search aria-hidden="true" />
-              <Input
-                aria-label={`搜索${label}`}
-                placeholder={`搜索${label}…`}
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-              />
-              {query && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  aria-label={`清空${label}搜索`}
-                  onClick={() => setQuery("")}
-                >
-                  <X />
-                </Button>
-              )}
-            </div>
-          )}
-          {!mobile && rows.length > 0 && (
-            <Button
-              variant="outline"
-              size="sm"
-              aria-pressed={compact}
-              onClick={() => setCompact((value) => !value)}
-            >
-              {compact ? "舒适行高" : "紧凑行高"}
-            </Button>
-          )}
-        </div>
-      </div>
-      {!filtered.length ? (
-        <div className="inventory-empty">
-          <SearchX aria-hidden="true" />
-          <strong>暂无符合条件的数据</strong>
-          {query && (
-            <Button variant="outline" onClick={() => setQuery("")}>
-              清空搜索
-            </Button>
-          )}
-        </div>
-      ) : mobile ? (
-        <>
-          {filtered
-            .slice(currentPage * pageSize, (currentPage + 1) * pageSize)
-            .map((row, index) => (
-              <article
-                className="asset-record"
-                key={`${String(row[columns[0].key])}-${currentPage}-${index}`}
-              >
-                <header className="asset-record-head">
-                  <div className="min-w-0">
-                    <p className="mb-1 text-xs text-[var(--label-secondary)]">
-                      {columns[0].label}
-                    </p>
-                    <h4>{renderValue(row, columns[0])}</h4>
-                  </div>
-                  <span className="text-xs text-[var(--label-secondary)]">
-                    {String(currentPage * pageSize + index + 1).padStart(
-                      2,
-                      "0",
-                    )}
-                  </span>
-                </header>
-                {primaryColumns.length > 0 && fields(row, primaryColumns)}
-                {metrics.length > 0 && (
-                  <div className="asset-record-metrics">
-                    {metrics.map((col) => {
-                      const value = Number(row[col.key]) || 0;
-                      const content = (
-                        <>
-                          <span className="text-xs text-[var(--label-secondary)]">
-                            {col.label}
-                          </span>
-                          <span className="asset-metric-value">
-                            {display(row, col)}
-                            {col.action && value > 0 && (
-                              <ArrowUpRight aria-hidden="true" />
-                            )}
-                          </span>
-                        </>
-                      );
-                      return col.action && value > 0 ? (
-                        <button
-                          type="button"
-                          className="asset-metric-cell"
-                          key={col.key}
-                          onClick={() => col.action!(row)}
-                          aria-label={`查看${display(row, columns[0])} ${col.label}：${value} 条明细`}
-                        >
-                          {content}
-                        </button>
-                      ) : (
-                        <div
-                          key={col.key}
-                          className={`asset-metric-cell ${value ? "" : "asset-metric-empty"}`}
-                        >
-                          {content}
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-                {moreColumns.length > 0 && (
-                  <Accordion
-                    type="single"
-                    collapsible
-                    className="border-t border-[var(--border)] px-4"
-                  >
-                    <AccordionItem value="details" className="border-0">
-                      <AccordionTrigger className="min-h-11 text-xs">
-                        更多车辆信息 · {moreColumns.length} 项
-                      </AccordionTrigger>
-                      <AccordionContent>
-                        {fields(row, moreColumns)}
-                      </AccordionContent>
-                    </AccordionItem>
-                  </Accordion>
-                )}
-              </article>
-            ))}
-          {filtered.length > pageSize && (
-            <nav
-              className="flex items-center justify-between gap-2"
-              aria-label={`${label}分页`}
-            >
-              <Button
-                variant="outline"
-                disabled={currentPage === 0}
-                onClick={() => changePage(currentPage - 1)}
-              >
-                上一页
-              </Button>
-              <span className="text-xs text-[var(--label-secondary)]">
-                {currentPage + 1} / {pages}
-              </span>
-              <Button
-                variant="outline"
-                disabled={currentPage + 1 >= pages}
-                onClick={() => changePage(currentPage + 1)}
-              >
-                下一页
-              </Button>
-            </nav>
-          )}
-        </>
-      ) : (
-        <div
-          className={
-            filtered.length > pageSize ? "h-[36rem] min-w-0" : "min-w-0"
-          }
-          role="region"
-          aria-label={label}
-        >
-          <Suspense fallback={<Skeleton className="h-96" />}>
-            <DesktopGrid rows={filtered} columns={columns} compact={compact} />
-          </Suspense>
-        </div>
-      )}
-    </div>
-  );
-}

src/modules/assets/library/DesktopGrid.tsx

@@ -1,118 +0,0 @@
-import { AgGridReact } from "ag-grid-react";
-import {
-  AllCommunityModule,
-  ModuleRegistry,
-  themeQuartz,
-  type ColDef,
-  type ICellRendererParams,
-} from "ag-grid-community";
-import { Count } from "./shared";
-import type { Column } from "./DataGrid";
-ModuleRegistry.registerModules([AllCommunityModule]);
-const gridTheme = themeQuartz.withParams({
-  fontFamily: "inherit",
-  fontSize: 14,
-  rowHeight: 48,
-  headerHeight: 36,
-  spacing: 6,
-  borderRadius: 8,
-  accentColor: "var(--blue)",
-  backgroundColor: "var(--bg-tertiary)",
-  foregroundColor: "var(--label)",
-  headerBackgroundColor: "var(--bg-secondary)",
-  borderColor: "var(--separator)",
-  oddRowBackgroundColor: "var(--bg-secondary)",
-});
-const localeText = {
-  noRowsToShow: "暂无数据",
-  page: "页",
-  of: "/",
-  to: "–",
-  more: "更多",
-  nextPage: "下一页",
-  previousPage: "上一页",
-  firstPage: "首页",
-  lastPage: "末页",
-  pageSizeSelectorLabel: "每页",
-  loadingOoo: "加载中…",
-  filterOoo: "筛选…",
-  equals: "等于",
-  notEqual: "不等于",
-  contains: "包含",
-  notContains: "不包含",
-  startsWith: "开头是",
-  endsWith: "结尾是",
-  blank: "空白",
-  notBlank: "非空",
-  lessThan: "小于",
-  greaterThan: "大于",
-  inRange: "范围",
-  andCondition: "且",
-  orCondition: "或",
-};
-export default function DesktopGrid<T extends object>({
-  rows,
-  columns,
-  compact = false,
-}: {
-  rows: T[];
-  columns: Column<T>[];
-  compact?: boolean;
-}) {
-  const display = (row: T, col: Column<T>) =>
-    col.format
-        ? col.format(row[col.key], row)
-        : String(row[col.key] ?? "—");
-  const defs: ColDef<T>[] = columns.map((col, index) => {
-    const numeric = Boolean(col.numeric || col.action);
-    return {
-      colId: col.key,
-      pinned: index === 0 ? "left" : col.key === "total" ? "right" : undefined,
-      headerName: col.label,
-      minWidth: col.width || 110,
-      initialFlex: 1,
-      cellStyle: numeric ? { textAlign: "right" } : undefined,
-      cellClass: numeric ? "tabular-nums" : undefined,
-      headerClass: numeric ? "tabular-nums ag-numeric-header" : undefined,
-      valueGetter: ({ data }) =>
-        data ? data[col.key] : "",
-      valueFormatter: ({ data }) => (data ? display(data, col) : ""),
-      cellRenderer: col.action
-        ? (p: ICellRendererParams<T>) =>
-            p.data && (
-              <Count
-                label={`${display(p.data, columns[0])} ${col.label}`}
-                value={Number(p.data[col.key]) || 0}
-                onClick={() => col.action!(p.data!)}
-              />
-            )
-        : col.tooltip
-          ? (p: ICellRendererParams<T>) =>
-              p.data && (
-                <span
-                  title={
-                    col.tooltip!(p.data[col.key], p.data)
-                  }
-                >
-                  {display(p.data, col)}
-                </span>
-              )
-          : undefined,
-    };
-  });
-  return (
-    <AgGridReact<T>
-      theme={gridTheme}
-      rowHeight={compact ? 36 : 48}
-      tooltipShowDelay={350}
-      rowData={rows}
-      columnDefs={defs}
-      defaultColDef={{ sortable: true, filter: true, resizable: true }}
-      domLayout={rows.length <= 20 ? "autoHeight" : "normal"}
-      pagination={rows.length > 20}
-      paginationPageSize={20}
-      paginationPageSizeSelector={[20, 50, 100]}
-      localeText={localeText}
-    />
-  );
-}

src/modules/assets/library/FlowStatistics.tsx

@@ -1,284 +0,0 @@
-import { useCallback, useEffect, useState, useMemo } from "react";
-import { zhCN } from "date-fns/locale";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Skeleton } from "@/components/ui/skeleton";
-import { CalendarDays, Download } from "lucide-react";
-import {
-  fetchFlowStats,
-  type FlowStatsResponse,
-  type FlowDetailItem,
-  type FlowDailyPoint,
-} from "../api";
-import {
-  getRecentFlowRange,
-  getWeeklyFlowRange,
-  formatLocalDate,
-  selectFlowDetails,
-  type FlowSelection,
-} from "../model";
-import { Failure, useMobile } from "./shared";
-import { DataGrid, type Column } from "./DataGrid";
-import { exportToXlsx } from "./export";
-import { Chart } from "./Chart";
-export function FlowStatistics({ subject }: { subject: string | null }) {
-  const [range, setRange] = useState(getRecentFlowRange);
-  const [calendarOpen, setCalendarOpen] = useState(false);
-  const [draft, setDraft] = useState<{ from: Date | undefined; to?: Date }>({
-    from: new Date(`${range.start}T00:00:00`),
-    to: new Date(`${range.end}T00:00:00`),
-  });
-  const [data, setData] = useState<FlowStatsResponse | null>(null);
-  const [error, setError] = useState("");
-  const [retry, setRetry] = useState(0);
-  const [selection, setSelection] = useState<FlowSelection | null>(null);
-  const mobile = useMobile();
-  useEffect(() => {
-    let active = true;
-    setData(null);
-    setError("");
-    fetchFlowStats({ ...range, subject })
-      .then((v) => {
-        if (active) setData(v);
-      })
-      .catch((e) => {
-        if (active) setError(String(e.message || e));
-      });
-    return () => {
-      active = false;
-    };
-  }, [range, subject, retry]);
-  const details = data && selection ? selectFlowDetails(data, selection) : [];
-  const columns: Column<FlowDetailItem>[] = [
-    { key: "plateNumber", label: "车牌", private: true },
-    { key: "typeLabel", label: "类型" },
-    { key: "date", label: "业务日期" },
-    { key: "eventTime", label: "运维签章时间", width: 180 },
-    { key: "submitTime", label: "建单时间", width: 180 },
-    { key: "department", label: "部门" },
-    { key: "manager", label: "负责人", private: true },
-    { key: "customerName", label: "客户", private: true, width: 180 },
-  ];
-  const exportRows = (rows: FlowDetailItem[], filename: string) =>
-    exportToXlsx(rows, columns, filename, "交还车明细");
-  const option = useMemo(
-    () => ({
-      color: ["var(--blue)", "var(--orange)", "var(--indigo)"],
-      textStyle: { color: "var(--label-secondary)" },
-      tooltip: { trigger: "axis" },
-      legend: {
-        data: ["交车", "还车", "替换交车"],
-        textStyle: { color: "var(--label-secondary)" },
-      },
-      grid: { left: 40, right: 20, bottom: 40, top: 40 },
-      xAxis: {
-        type: "category",
-        data: data?.daily.map((d) => d.date.slice(5)) || [],
-        axisLabel: { color: "var(--label-secondary)" },
-        axisLine: { lineStyle: { color: "var(--separator)" } },
-      },
-      yAxis: {
-        type: "value",
-        minInterval: 1,
-        axisLabel: { color: "var(--label-secondary)" },
-        splitLine: { lineStyle: { color: "var(--separator)" } },
-      },
-      series: ["delivered", "returned", "replaced"].map((key, i) => ({
-        name: ["交车", "还车", "替换交车"][i],
-        type: "line",
-        data: data?.daily.map((d) => d[key as "delivered"]) || [],
-      })),
-    }),
-    [data],
-  );
-  return (
-    <Card
-      size="sm"
-      className="bg-[var(--bg-tertiary)] ring-0 shadow-[var(--shadow-2)]"
-    >
-      <CardHeader>
-        <CardTitle className="font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
-          交还车统计（车次）
-        </CardTitle>
-        <CardDescription>
-          按运维签章时间统计；交车含替换交车，合计 = 交车 + 还车。
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="flex flex-wrap items-center gap-2">
-          <Popover
-            open={calendarOpen}
-            onOpenChange={(v) => {
-              setCalendarOpen(v);
-              if (v)
-                setDraft({
-                  from: new Date(`${range.start}T00:00:00`),
-                  to: new Date(`${range.end}T00:00:00`),
-                });
-            }}
-          >
-            <PopoverTrigger asChild>
-              <Button variant="outline">
-                <CalendarDays data-icon="inline-start" />
-                {range.start} — {range.end}
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-2" align="start">
-              <Calendar
-                mode="range"
-                locale={zhCN}
-                selected={draft}
-                onSelect={(v) => setDraft(v || { from: undefined })}
-                numberOfMonths={mobile ? 1 : 2}
-                disabled={{ after: new Date() }}
-              />
-              <Button
-                disabled={!draft.from || !draft.to}
-                onClick={() => {
-                  if (draft.from && draft.to)
-                    setRange({
-                      start: formatLocalDate(draft.from),
-                      end: formatLocalDate(draft.to),
-                    });
-                  setCalendarOpen(false);
-                }}
-              >
-                应用日期
-              </Button>
-            </PopoverContent>
-          </Popover>
-          <Button
-            variant="ghost"
-            onClick={() => setRange(getRecentFlowRange())}
-          >
-            近 7 天
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={() => setRange(getWeeklyFlowRange())}
-          >
-            本周
-          </Button>
-          <Button
-            variant="outline"
-            disabled={!data?.details.length}
-            onClick={() =>
-              data &&
-              void exportRows(
-                data.details,
-                `交还车-${range.start}-${range.end}`,
-              )
-            }
-          >
-            <Download data-icon="inline-start" />
-            导出
-          </Button>
-        </div>
-        {error ? (
-          <Failure message={error} retry={() => setRetry((n) => n + 1)} />
-        ) : !data ? (
-          <Skeleton className="h-64" />
-        ) : (
-          <>
-            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
-              {(
-                [
-                  ["total", "合计"],
-                  ["delivered", "交车"],
-                  ["returned", "还车"],
-                  ["replaced", "替换交车"],
-                ] as const
-              ).map(([key, title]) => (
-                <Card
-                  size="sm"
-                  key={key}
-                  className="bg-[var(--bg-secondary)] ring-0"
-                >
-                  <CardHeader>
-                    <CardDescription>{title}</CardDescription>
-                    <CardTitle className="text-xl font-semibold tracking-tight text-[var(--blue)] dark:text-[var(--cyan)]">
-                      {key === "total" ? (
-                        data.totals[key]
-                      ) : (
-                        <Button
-                          variant="link"
-                          className="h-auto p-0 text-xl font-semibold text-[var(--blue)] dark:text-[var(--cyan)]"
-                          onClick={() => setSelection({ ...range, type: key })}
-                        >
-                          {data.totals[key]}
-                        </Button>
-                      )}
-                    </CardTitle>
-                  </CardHeader>
-                </Card>
-              ))}
-            </div>
-            <Chart option={option} label="每日交还车趋势" />
-            <DataGrid
-              rows={data.daily}
-              label="每日交还车"
-              columns={[
-                { key: "date", label: "业务日期", width: 160 },
-                { key: "total", label: "合计", numeric: true },
-                ...(["delivered", "returned", "replaced"] as const).map(
-                  (key, i) => ({
-                    key,
-                    label: ["交车", "还车", "替换交车"][i],
-                    action: (row: FlowDailyPoint) =>
-                      setSelection({ date: row.date, type: key }),
-                  }),
-                ),
-              ]}
-            />
-          </>
-        )}
-      </CardContent>
-      <Dialog open={!!selection} onOpenChange={(v) => !v && setSelection(null)}>
-        <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-6xl">
-          <DialogHeader>
-            <DialogTitle>交还车明细</DialogTitle>
-            <DialogDescription>
-              {details.length} 车次 ·{" "}
-              {selection &&
-                ("date" in selection
-                  ? selection.date
-                  : `${selection.start} — ${selection.end}`)}
-            </DialogDescription>
-          </DialogHeader>
-          <Button
-            variant="outline"
-            disabled={!details.length}
-            onClick={() =>
-              void exportRows(
-                details,
-                `交还车明细-${selection && "date" in selection ? selection.date : `${selection?.start}-${selection?.end}`}`,
-              )
-            }
-          >
-            导出当前明细
-          </Button>
-          <DataGrid rows={details} columns={columns} label="交还车明细" />
-        </DialogContent>
-      </Dialog>
-    </Card>
-  );
-}

src/modules/assets/library/InventoryAnalysis.tsx

@@ -1,397 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import { ArrowLeft, ArrowUpRight, X, AlertTriangle, Truck } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  inventoryModel,
-  inventoryTotals,
-  scopedInventorySelection,
-  type InventoryScope,
-} from "./inventory-view";
-import { VehicleDetails } from "./VehicleDetails";
-import type { VehicleModalSelection } from "../model";
-import type { RegionalInventoryStats } from "../types";
-import { emptyInventoryCounts } from "../../../shared/assets/inventory";
-
-export function InventoryAnalysis({
-  scope,
-  subject,
-  close,
-}: {
-  scope: InventoryScope;
-  subject: string | null;
-  close: () => void;
-}) {
-  const [selection, setSelection] = useState<VehicleModalSelection | null>(
-    () =>
-      scope.initialCategory
-        ? scopedInventorySelection(scope, { category: scope.initialCategory })
-        : null,
-  );
-  const [query, setQuery] = useState("");
-  const originFocus = useRef(
-    document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null,
-  );
-  const scrollTop = useRef(0);
-  const total = inventoryTotals(scope.rows);
-  const open = (extra: Partial<VehicleModalSelection> = {}) =>
-    setSelection(scopedInventorySelection(scope, extra));
-  const segments = [
-    {
-      key: "available" as const,
-      label: "可运营",
-      count: total.available,
-      color: "var(--blue)",
-    },
-    {
-      key: "awaiting" as const,
-      label: "待运营",
-      count: total.awaiting,
-      color: "var(--inventory-awaiting)",
-    },
-    ...(total.unclassified
-      ? [
-          {
-            key: "unclassified" as const,
-            label: "待核实状态",
-            count: total.unclassified,
-            color: "var(--label-secondary)",
-          },
-        ]
-      : []),
-  ];
-  const variants = useMemo(() => {
-    const groups = new Map<
-      string,
-      {
-        rows: RegionalInventoryStats[];
-        color: string;
-        count: number;
-        name: string;
-        brand: string;
-        operator: string;
-      }
-    >();
-    for (const row of scope.rows) {
-      const model = inventoryModel(row.model, row.brand);
-      const colors = row.variants || {
-        未标注颜色: { ...emptyInventoryCounts(), quantity: row.quantity },
-      };
-      for (const [color, counts] of Object.entries(colors)) {
-        const key = JSON.stringify([row.brand, row.model, color]);
-        const value = groups.get(key) || {
-          rows: [],
-          color,
-          count: 0,
-          name: model.name,
-          brand: row.brand,
-          operator: model.operator,
-        };
-        value.rows.push(row);
-        value.count += counts.quantity;
-        groups.set(key, value);
-      }
-    }
-    return [...groups.entries()].sort((a, b) => b[1].count - a[1].count);
-  }, [scope.rows]);
-  const shown = variants.filter(([, item]) =>
-    [item.name, item.brand, item.operator, item.color]
-      .join(" ")
-      .toLowerCase()
-      .includes(query.trim().toLowerCase()),
-  );
-  let offset = 0;
-  return (
-    <>
-      <Dialog open={!selection} onOpenChange={(value) => !value && close()}>
-        <DialogContent
-          className="asset-ui asset-detail inventory-analysis"
-          showCloseButton={false}
-          onCloseAutoFocus={(event) => {
-            event.preventDefault();
-            if (!selection) originFocus.current?.focus({ preventScroll: true });
-          }}
-        >
-          <DialogHeader className="asset-detail-header">
-            <div className="flex items-center gap-3">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={close}
-                aria-label="返回库存统计"
-              >
-                <ArrowLeft />
-              </Button>
-              <div className="min-w-0 flex-1">
-                <p className="analysis-eyebrow">库存分析</p>
-                <DialogTitle>库存构成</DialogTitle>
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={close}
-                aria-label="关闭库存分析"
-              >
-                <X />
-              </Button>
-            </div>
-            <DialogDescription>
-              {subject || "全部公司"} · {scope.label}
-            </DialogDescription>
-          </DialogHeader>
-          <div
-            className="asset-detail-body"
-            ref={(node) => {
-              if (node) node.scrollTop = scrollTop.current;
-            }}
-            onScroll={(event) => {
-              scrollTop.current = event.currentTarget.scrollTop;
-            }}
-          >
-            <div className="analysis-overview">
-              <section
-                className="analysis-composition"
-                aria-label="运营状态构成"
-              >
-                <div className="analysis-donut">
-                  <svg
-                    viewBox="0 0 200 200"
-                    role="group"
-                    aria-label="库存运营状态占比"
-                  >
-                    <circle
-                      cx="100"
-                      cy="100"
-                      r="78"
-                      fill="none"
-                      stroke="var(--muted)"
-                      strokeWidth="20"
-                    />
-                    {segments
-                      .filter((segment) => segment.count > 0)
-                      .map((segment) => {
-                        const proportion = segment.count / total.quantity;
-                        const dashOffset = -offset;
-                        offset += proportion * 100;
-                        return (
-                          <circle
-                            key={segment.key}
-                            cx="100"
-                            cy="100"
-                            r="78"
-                            pathLength="100"
-                            fill="none"
-                            stroke={segment.color}
-                            strokeWidth="20"
-                            strokeDasharray={`${proportion * 100} ${100 - proportion * 100}`}
-                            strokeDashoffset={dashOffset}
-                            transform="rotate(-90 100 100)"
-                            role="button"
-                            tabIndex={0}
-                            aria-label={`${segment.label} ${segment.count} 台，查看明细`}
-                            onClick={() =>
-                              open({
-                                inventoryOperation: segment.key,
-                                title: `${segment.label}车辆`,
-                              })
-                            }
-                            onKeyDown={(event) => {
-                              if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                open({
-                                  inventoryOperation: segment.key,
-                                  title: `${segment.label}车辆`,
-                                });
-                              }
-                            }}
-                          >
-                            <title>
-                              {segment.label} {segment.count} 台 ·{" "}
-                              {(proportion * 100).toFixed(1)}%
-                            </title>
-                          </circle>
-                        );
-                      })}
-                  </svg>
-                  <div className="analysis-donut-center">
-                    <span>总库存</span>
-                    <strong>{total.quantity.toLocaleString()}</strong>
-                    <small>台</small>
-                  </div>
-                </div>
-                <div className="analysis-legend">
-                  <h3>运营状态</h3>
-                  {segments.map((segment) => (
-                    <button
-                      key={segment.key}
-                      disabled={!segment.count}
-                      onClick={() =>
-                        open({
-                          inventoryOperation: segment.key,
-                          title: `${segment.label}车辆`,
-                        })
-                      }
-                    >
-                      <span
-                        className="analysis-dot"
-                        style={{ background: segment.color }}
-                      />
-                      <span>{segment.label}</span>
-                      <strong>{segment.count}</strong>
-                      <span>
-                        {total.quantity
-                          ? ((segment.count / total.quantity) * 100).toFixed(1)
-                          : "0.0"}
-                        %
-                      </span>
-                      <ArrowUpRight aria-hidden="true" />
-                    </button>
-                  ))}
-                  <p>
-                    {total.unclassified
-                      ? "运营状态按原始字段分别统计"
-                      : "可运营 + 待运营 = 总库存"}
-                  </p>
-                  {total.unclassified > 0 && (
-                    <p role="status">
-                      存在旧状态，单独列示待核实，未计入可运营或待运营。
-                    </p>
-                  )}
-                </div>
-              </section>
-              <section className="analysis-workflow" aria-label="库存业务状态">
-                <div className="analysis-workflow-heading">
-                  <h3>业务状态</h3>
-                  <span>已包含在总库存内</span>
-                </div>
-                <button
-                  className="analysis-workflow-total"
-                  disabled={!total.abnormal}
-                  onClick={() => open({ category: "Abnormal" })}
-                >
-                  <span>
-                    <AlertTriangle aria-hidden="true" />
-                    异动
-                  </span>
-                  <strong>
-                    {total.abnormal}
-                    <small>台</small>
-                    <ArrowUpRight aria-hidden="true" />
-                  </strong>
-                </button>
-                <div className="analysis-abnormal-types">
-                  {Object.entries(total.abnormalTypes).map(([type, count]) => (
-                    <button
-                      key={type}
-                      onClick={() =>
-                        open({
-                          category: "Abnormal",
-                          abnormalType: type,
-                          title: `${type}异动车辆`,
-                        })
-                      }
-                    >
-                      {type}
-                      <strong>{count}</strong>
-                    </button>
-                  ))}
-                  {!total.abnormal && <span>当前范围无异动车辆</span>}
-                </div>
-                <button
-                  className="analysis-workflow-total"
-                  disabled={!total.pending}
-                  onClick={() => open({ category: "Pending" })}
-                >
-                  <span>
-                    <Truck aria-hidden="true" />
-                    待交车
-                  </span>
-                  <strong>
-                    {total.pending}
-                    <small>台</small>
-                    <ArrowUpRight aria-hidden="true" />
-                  </strong>
-                </button>
-              </section>
-            </div>
-            <section className="analysis-variants" aria-label="型号及颜色明细">
-              <div className="analysis-variants-heading">
-                <div>
-                  <h3>型号明细</h3>
-                  <p>品牌 · 所属公司 · 颜色</p>
-                </div>
-                <Button variant="outline" onClick={() => open()}>
-                  查看全部车辆
-                  <ArrowUpRight aria-hidden="true" />
-                </Button>
-              </div>
-              <Input
-                aria-label="搜索型号明细"
-                placeholder="搜索型号、品牌、所属公司或颜色"
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-              />
-              <div className="analysis-variant-list">
-                {shown.map(([key, item]) => (
-                  <button
-                    className="analysis-variant"
-                    key={key}
-                    onClick={() =>
-                      setSelection(
-                        scopedInventorySelection(
-                          {
-                            rows: item.rows,
-                            label: `${scope.label} / ${item.name} / ${item.brand}${item.operator ? ` / ${item.operator}` : ""} / ${item.color}`,
-                          },
-                          { inventoryColor: item.color },
-                        ),
-                      )
-                    }
-                  >
-                    <div>
-                      <strong>{item.name}</strong>
-                      <div className="analysis-tags">
-                        <span>{item.brand}</span>
-                        {item.operator && <span>{item.operator}</span>}
-                        <span>{item.color}</span>
-                      </div>
-                    </div>
-                    <span className="analysis-variant-count">
-                      {item.count}
-                      <small>台</small>
-                      <ArrowUpRight aria-hidden="true" />
-                    </span>
-                  </button>
-                ))}
-                {!shown.length && (
-                  <p className="matrix-empty">没有匹配的型号</p>
-                )}
-              </div>
-            </section>
-          </div>
-          <footer className="asset-detail-footer">
-            <span>点击数量查看当前范围的车辆明细</span>
-            <Button variant="outline" onClick={close}>
-              返回库存统计
-            </Button>
-          </footer>
-        </DialogContent>
-      </Dialog>
-      <VehicleDetails
-        selection={selection}
-        subject={subject}
-        close={() => setSelection(null)}
-        returnLabel="返回库存构成"
-      />
-    </>
-  );
-}

src/modules/assets/library/InventoryExplorer.tsx

@@ -1,475 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  ArrowLeft,
-  ArrowRight,
-  ChevronRight,
-  MapPin,
-  Search,
-  Truck,
-  X,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import type { RegionalInventoryStats } from "../types";
-import { Picker, unique } from "./shared";
-import { VehicleDetails } from "./VehicleDetails";
-import {
-  INVENTORY_TYPES,
-  inventoryModel,
-  inventoryTotals,
-  scopedInventorySelection,
-} from "./inventory-view";
-import {
-  inventoryBrowseRows,
-  inventoryBrowseUrl,
-  inventoryModels,
-  inventoryPlaces,
-  inventoryTypeRows,
-  readInventoryBrowse,
-  type InventoryBrowseState,
-} from "./inventory-explorer";
-
-const fmt = (value: number) => value.toLocaleString();
-const regionName = (value: string | null) => value || "未归属地区";
-const cityName = (value: string | null) => value || "未归属城市";
-
-export function InventoryExplorer({
-  inventory,
-  subject,
-}: {
-  inventory: RegionalInventoryStats[];
-  subject: string | null;
-}) {
-  const [state, setState] = useState(() =>
-    readInventoryBrowse(window.location.search),
-  );
-  const sectionRef = useRef<HTMLElement>(null);
-  const headingRef = useRef<HTMLHeadingElement>(null);
-  const positions = useRef(
-    new Map<
-      string,
-      { scroll: [Element, number][]; y: number; focus?: string }
-    >(),
-  );
-  const currentUrl = useRef(window.location.href);
-  const locationKey = JSON.stringify([state.region, state.city]);
-  const lastLocation = useRef(locationKey);
-
-  const remember = () => {
-    const scroll: [Element, number][] = [];
-    let element = sectionRef.current?.parentElement;
-    while (element) {
-      if (element.scrollHeight > element.clientHeight)
-        scroll.push([element, element.scrollTop]);
-      element = element.parentElement;
-    }
-    positions.current.set(currentUrl.current, {
-      scroll,
-      y: window.scrollY,
-      focus: (document.activeElement as HTMLElement | null)?.dataset
-        .inventoryKey,
-    });
-  };
-  useEffect(() => {
-    const onBack = () => {
-      currentUrl.current = window.location.href;
-      setState(readInventoryBrowse(window.location.search));
-    };
-    window.addEventListener("popstate", onBack);
-    return () => window.removeEventListener("popstate", onBack);
-  }, []);
-  useEffect(() => {
-    if (lastLocation.current === locationKey) return;
-    lastLocation.current = locationKey;
-    const saved = positions.current.get(currentUrl.current);
-    if (saved) {
-      const target = saved.focus
-        ? Array.from(
-            sectionRef.current?.querySelectorAll<HTMLElement>(
-              "[data-inventory-key]",
-            ) || [],
-          ).find((element) => element.dataset.inventoryKey === saved.focus)
-        : null;
-      (target || headingRef.current)?.focus({ preventScroll: true });
-      saved.scroll.forEach(([element, top]) => {
-        element.scrollTop = top;
-      });
-      window.scrollTo({ top: saved.y, behavior: "instant" });
-    } else {
-      headingRef.current?.focus({ preventScroll: true });
-      headingRef.current?.scrollIntoView({
-        block: "nearest",
-        behavior: "instant",
-      });
-    }
-  }, [locationKey]);
-
-  const navigate = (change: Partial<InventoryBrowseState>, replace = false) => {
-    remember();
-    const next = { ...state, ...change };
-    const url = inventoryBrowseUrl(window.location.href, next);
-    if (url === window.location.href) return;
-    if (replace) window.history.replaceState(window.history.state, "", url);
-    else
-      window.history.pushState(
-        { ...window.history.state, inventoryParent: window.location.href },
-        "",
-        url,
-      );
-    currentUrl.current = url;
-    setState(next);
-  };
-  const goBack = () => {
-    const next =
-      state.model !== null
-        ? { model: null }
-        : state.city !== null
-          ? { city: null, model: null }
-          : { region: null, city: null, model: null };
-    const url = inventoryBrowseUrl(window.location.href, { ...state, ...next });
-    if (window.history.state?.inventoryParent === url) window.history.back();
-    else navigate(next);
-  };
-
-  const scoped = useMemo(
-    () => inventoryBrowseRows(inventory, state),
-    [inventory, state],
-  );
-  const rows = useMemo(
-    () => inventoryTypeRows(scoped, state.type),
-    [scoped, state.type],
-  );
-  const total = inventoryTotals(rows);
-  const places = inventoryPlaces(
-    scoped,
-    state.region === null ? "region" : "city",
-    state.type,
-  );
-  const models = useMemo(() => inventoryModels(rows), [rows]);
-  const chosenModel = models.find((model) => model.key === state.model);
-  const label = [
-    state.region === null ? "全部地区" : regionName(state.region),
-    state.city === null ? "" : cityName(state.city),
-    state.type || "全部车型",
-  ]
-    .filter(Boolean)
-    .join(" / ");
-  const selection = useMemo(
-    () =>
-      chosenModel
-        ? scopedInventorySelection({
-            rows: chosenModel.rows,
-            label: `${label} / ${chosenModel.brand || "未标注品牌"} / ${chosenModel.model}`,
-          })
-        : null,
-    [chosenModel, label],
-  );
-  const level = state.region === null ? 0 : state.city === null ? 1 : 2;
-  const hasFilters = Boolean(state.query || state.brand);
-
-  return (
-    <section
-      ref={sectionRef}
-      className="inventory-matrix inventory-explorer"
-      aria-label="库存找车"
-    >
-      <header className="finder-header">
-        <div>
-          <h2>库存找车</h2>
-          <p>选地区、选城市，快速找到对应车辆</p>
-        </div>
-        <MapPin aria-hidden="true" />
-      </header>
-      <ol className="finder-steps" aria-label="找车步骤">
-        {["选地区", "选城市", "查车辆"].map((title, index) => (
-          <li key={title} aria-current={index === level ? "step" : undefined}>
-            <span>{index + 1}</span>
-            {title}
-            {index < 2 && <ChevronRight aria-hidden="true" />}
-          </li>
-        ))}
-      </ol>
-      <nav className="finder-breadcrumb" aria-label="库存位置">
-        {state.region === null ? (
-          <span aria-current="page">全部地区</span>
-        ) : (
-          <button
-            onClick={() => navigate({ region: null, city: null, model: null })}
-          >
-            全部地区
-          </button>
-        )}
-        {state.region !== null && (
-          <>
-            <ChevronRight aria-hidden="true" />
-            {state.city === null ? (
-              <span aria-current="page">{regionName(state.region)}</span>
-            ) : (
-              <button onClick={() => navigate({ city: null, model: null })}>
-                {regionName(state.region)}
-              </button>
-            )}
-          </>
-        )}
-        {state.city !== null && (
-          <>
-            <ChevronRight aria-hidden="true" />
-            <span aria-current="page">{cityName(state.city)}</span>
-          </>
-        )}
-      </nav>
-      <div className="finder-scope">
-        {level > 0 && (
-          <button
-            className="finder-back"
-            aria-label={level === 2 ? "返回城市列表" : "返回地区列表"}
-            onClick={goBack}
-          >
-            <ArrowLeft aria-hidden="true" />
-          </button>
-        )}
-        <div>
-          <h3 ref={headingRef} tabIndex={-1}>
-            {state.city !== null
-              ? cityName(state.city)
-              : state.region !== null
-                ? regionName(state.region)
-                : "地区库存"}
-          </h3>
-          <p>
-            {state.type || "全部车型"}
-            {hasFilters ? " · 已筛选" : ""} ·{" "}
-            {state.city !== null
-              ? `${models.length} 种型号`
-              : `${places.filter((place) => place.total.quantity > 0).length} 个${level === 0 ? "地区" : "城市"}有库存`}
-          </p>
-        </div>
-        <div className="finder-scope-total" aria-live="polite">
-          <strong>{fmt(total.quantity)}</strong>
-          <span>库存 / 台</span>
-        </div>
-      </div>
-      <div className="finder-type-heading">
-        <strong>找什么车型</strong>
-        <span>数量为当前范围库存</span>
-      </div>
-      <div className="matrix-mobile-types finder-types" aria-label="库存车型">
-        {["", ...INVENTORY_TYPES].map((type) => (
-          <button
-            key={type}
-            aria-pressed={state.type === type}
-            onClick={() => navigate({ type, model: null })}
-          >
-            {type || "全部车型"}
-            <span>
-              {fmt(inventoryTotals(inventoryTypeRows(scoped, type)).quantity)}
-            </span>
-          </button>
-        ))}
-      </div>
-      <div className="finder-search-row">
-        <label className="matrix-search">
-          <Search aria-hidden="true" />
-          <Input
-            value={state.query}
-            placeholder={
-              level === 0
-                ? "搜索地区、城市、品牌或型号"
-                : "搜索当前范围的城市、品牌或型号"
-            }
-            aria-label="搜索当前范围库存"
-            onChange={(event) =>
-              navigate({ query: event.target.value, model: null }, true)
-            }
-          />
-          {state.query && (
-            <button
-              aria-label="清空库存搜索"
-              onClick={() => navigate({ query: "", model: null }, true)}
-            >
-              <X aria-hidden="true" />
-            </button>
-          )}
-        </label>
-        <Picker
-          label="品牌"
-          value={state.brand}
-          values={unique(inventory.map((row) => row.brand))}
-          change={(brand) => navigate({ brand, model: null })}
-        />
-      </div>
-      <div className="finder-results-heading">
-        <strong>
-          {level === 0
-            ? "选择地区"
-            : level === 1
-              ? "选择城市"
-              : "选择型号查看车辆"}
-        </strong>
-        {hasFilters ? (
-          <button
-            onClick={() => navigate({ query: "", brand: "", model: null })}
-          >
-            清除筛选
-          </button>
-        ) : (
-          <span>{level < 2 ? "按库存从多到少" : "点击进入车辆明细"}</span>
-        )}
-      </div>
-      {total.quantity === 0 && (
-        <div className="finder-empty" role="status">
-          <Truck aria-hidden="true" />
-          <strong>
-            {hasFilters
-              ? "当前范围没有匹配车辆"
-              : state.type
-                ? `当前范围暂无${state.type}库存`
-                : "当前范围暂无库存"}
-          </strong>
-          <p>
-            {hasFilters
-              ? "试试清除搜索或品牌条件，也可以返回上级查找。"
-              : "可切换车型，或返回上级查看其他地区、城市。"}
-          </p>
-          {(state.type || hasFilters) && (
-            <Button
-              variant="outline"
-              onClick={() =>
-                navigate({ type: "", query: "", brand: "", model: null })
-              }
-            >
-              查看当前范围全部库存
-            </Button>
-          )}
-          {level > 0 && (
-            <Button variant="ghost" onClick={goBack}>
-              返回{level === 2 ? "城市" : "地区"}列表
-            </Button>
-          )}
-        </div>
-      )}
-      {level < 2 ? (
-        <div className="finder-list">
-          {places.map((place) => (
-            <button
-              key={place.key}
-              className="finder-place"
-              data-inventory-key={place.key}
-              disabled={!place.total.quantity}
-              aria-label={`${place.name}，${state.type || "全部车型"}库存 ${place.total.quantity} 台，${level === 0 ? "选择城市" : "查看车型"}`}
-              onClick={() =>
-                navigate(
-                  level === 0
-                    ? { region: place.value, city: null, model: null }
-                    : { city: place.value, model: null },
-                )
-              }
-            >
-              <span className="finder-place-top">
-                <strong>{place.name}</strong>
-                <span className="finder-place-count">
-                  {fmt(place.total.quantity)}
-                  <small>台</small>
-                  {place.total.quantity > 0 && (
-                    <ChevronRight aria-hidden="true" />
-                  )}
-                </span>
-              </span>
-              {place.total.quantity > 0 ? (
-                <>
-                  <span className="finder-place-status">
-                    {level === 0 && <span>{place.cities} 个城市有库存</span>}
-                    <span>可运营 {fmt(place.total.available)}</span>
-                    <span>待运营 {fmt(place.total.awaiting)}</span>
-                  </span>
-                  <span className="finder-type-tags">
-                    {(state.type
-                      ? place.types.filter((item) => item.name === state.type)
-                      : place.types
-                    ).map((item) => (
-                      <span key={item.name}>
-                        {item.name}
-                        <b>{fmt(item.quantity)}</b>
-                      </span>
-                    ))}
-                  </span>
-                </>
-              ) : (
-                <span className="finder-place-status">
-                  {state.type ? "该车型暂无库存" : "暂无库存"}
-                </span>
-              )}
-            </button>
-          ))}
-        </div>
-      ) : (
-        <div className="finder-list">
-          {models.map((model) => (
-            <button
-              key={model.key}
-              className="finder-place finder-model"
-              data-inventory-key={model.key}
-              onClick={() => navigate({ model: model.key })}
-            >
-              <span className="finder-place-top">
-                <strong>{inventoryModel(model.model, model.brand).name}</strong>
-                <span className="finder-place-count">
-                  {fmt(model.total.quantity)}
-                  <small>台</small>
-                </span>
-              </span>
-              <span className="finder-model-meta">
-                {model.brand || "未标注品牌"} · {model.type}
-                {inventoryModel(model.model, model.brand).operator &&
-                  ` · ${inventoryModel(model.model, model.brand).operator}`}
-              </span>
-              <span className="finder-place-status">
-                <span>可运营 {fmt(model.total.available)}</span>
-                <span>待运营 {fmt(model.total.awaiting)}</span>
-                {model.total.unclassified > 0 && (
-                  <span>待核实 {fmt(model.total.unclassified)}</span>
-                )}
-              </span>
-              <span className="finder-model-footer">
-                <span>
-                  {[
-                    model.total.pending
-                      ? `待交车 ${fmt(model.total.pending)}`
-                      : "",
-                    model.total.abnormal
-                      ? `异动 ${fmt(model.total.abnormal)}`
-                      : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" · ")}
-                </span>
-                <span>
-                  查看车辆
-                  <ArrowRight aria-hidden="true" />
-                </span>
-              </span>
-            </button>
-          ))}
-        </div>
-      )}
-      {state.model !== null && !chosenModel && (
-        <div className="finder-empty" role="status">
-          <strong>该型号已不在当前库存范围</strong>
-          <Button variant="outline" onClick={goBack}>
-            返回选择型号
-          </Button>
-        </div>
-      )}
-      <footer className="matrix-footer">
-        <span>库存包含待交车、异动车辆，不代表均可立即交付。</span>
-        <span>「其他」包含挂车及未单列车型。</span>
-      </footer>
-      <VehicleDetails
-        selection={selection}
-        subject={subject}
-        close={goBack}
-        returnLabel="返回找车结果"
-      />
-    </section>
-  );
-}

src/modules/assets/library/InventorySection.tsx

@@ -1,460 +0,0 @@
-import { Fragment, useMemo, useState } from "react";
-import {
-  ChevronDown,
-  ChevronRight,
-  ChevronsDownUp,
-  ListFilter,
-  Search,
-  X,
-  ArrowUpRight,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import type { RegionalInventoryStats } from "../types";
-import { Picker, unique, useMobile } from "./shared";
-import { ExportButton } from "./export";
-import { InventoryExplorer } from "./InventoryExplorer";
-import {
-  groupInventory,
-  INVENTORY_TYPES,
-  inventoryColumn,
-  inventoryTotals,
-  type InventoryScope,
-} from "./inventory-view";
-
-type Inspect = (scope: InventoryScope) => void;
-export function InventoryNumber({
-  rows,
-  label,
-  inspect,
-}: {
-  rows: RegionalInventoryStats[];
-  label: string;
-  inspect: Inspect;
-}) {
-  const total = inventoryTotals(rows);
-  if (!total.quantity) return <span className="matrix-zero">0</span>;
-  return (
-    <div className="matrix-number">
-      <button
-        className="matrix-value"
-        onClick={() => inspect({ rows, label })}
-        aria-label={`${label}，库存 ${total.quantity} 台，查看构成`}
-      >
-        {total.quantity.toLocaleString()}
-        <ArrowUpRight aria-hidden="true" />
-      </button>
-      {(total.pending > 0 || total.abnormal > 0) && (
-        <div className="matrix-secondary">
-          {total.pending > 0 && (
-            <button
-              onClick={() =>
-                inspect({ rows, label, initialCategory: "Pending" })
-              }
-            >
-              待交车 {total.pending}
-            </button>
-          )}
-          {total.abnormal > 0 && (
-            <button
-              className="matrix-warning"
-              onClick={() =>
-                inspect({ rows, label, initialCategory: "Abnormal" })
-              }
-            >
-              异动 {total.abnormal}
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-export function InventorySection({
-  inventory,
-  inspect,
-  subject,
-}: {
-  subject: string | null;
-  inventory: RegionalInventoryStats[];
-  inspect: Inspect;
-}) {
-  const mobile = useMobile();
-  const [query, setQuery] = useState("");
-  const [filters, setFilters] = useState({ region: "", city: "", brand: "" });
-  const [filterOpen, setFilterOpen] = useState(false);
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-  const [expandedType, setExpandedType] = useState("");
-  const filtered = useMemo(
-    () =>
-      inventory.filter(
-        (row) =>
-          Object.entries(filters).every(
-            ([key, value]) =>
-              !value || row[key as keyof typeof filters] === value,
-          ) &&
-          (!query.trim() ||
-            [
-              row.region,
-              row.city,
-              row.brand,
-              row.type,
-              row.model,
-              inventoryColumn(row.type),
-            ]
-              .join(" ")
-              .toLowerCase()
-              .includes(query.trim().toLowerCase())),
-      ),
-    [inventory, filters, query],
-  );
-  const rows = filtered;
-  const groups = groupInventory(rows, "region");
-  const brands = unique(
-    filtered
-      .filter((row) => inventoryColumn(row.type) === expandedType)
-      .map((row) => row.brand),
-  );
-  const hasBrandColumns = Boolean(expandedType) && brands.length > 0;
-  const columns = INVENTORY_TYPES.flatMap((type) => [
-    {
-      key: type,
-      title: expandedType === type && brands.length ? "小计" : type,
-      type,
-      brand: "",
-    },
-    ...(expandedType === type
-      ? brands.map((brand) => ({
-          key: `${type}-${brand}`,
-          title: brand,
-          type,
-          brand,
-        }))
-      : []),
-  ]);
-  const activeCount = Object.values(filters).filter(Boolean).length;
-  const total = inventoryTotals(rows);
-  const toggleRegion = (region: string) =>
-    setExpanded((old) => {
-      const next = new Set(old);
-      if (next.has(region)) next.delete(region);
-      else next.add(region);
-      return next;
-    });
-  const cellRows = (
-    records: RegionalInventoryStats[],
-    type: string,
-    brand: string,
-  ) =>
-    records.filter(
-      (row) =>
-        inventoryColumn(row.type) === type && (!brand || row.brand === brand),
-    );
-  const renderCells = (records: RegionalInventoryStats[], label: string) => (
-    <>
-      <td className="matrix-total">
-        <InventoryNumber rows={records} label={label} inspect={inspect} />
-      </td>
-      {columns.map((col) => (
-        <td
-          key={col.key}
-          className={[
-            col.brand ? "matrix-brand-cell" : "",
-            expandedType === col.type ? "matrix-selected-column" : "",
-          ]
-            .filter(Boolean)
-            .join(" ")}
-        >
-          <InventoryNumber
-            rows={cellRows(records, col.type, col.brand)}
-            label={[label, col.type, col.brand].filter(Boolean).join(" / ")}
-            inspect={inspect}
-          />
-        </td>
-      ))}
-    </>
-  );
-  if (mobile)
-    return <InventoryExplorer inventory={inventory} subject={subject} />;
-  return (
-    <section className="inventory-matrix" aria-label="库存统计">
-      <header className="matrix-heading">
-        <div>
-          <h2>库存统计</h2>
-          <p>地区 × 车型总览，展开城市核对库存</p>
-        </div>
-        <div className="matrix-heading-actions">
-          <div className="matrix-header-total">
-            <span>{query || activeCount ? "筛选库存" : "总库存"}</span>
-            <InventoryNumber rows={rows} label="当前库存" inspect={inspect} />
-          </div>
-          <Button
-            variant="outline"
-            aria-expanded={filterOpen}
-            onClick={() => setFilterOpen(!filterOpen)}
-          >
-            <ListFilter aria-hidden="true" />
-            筛选{activeCount ? ` ${activeCount}` : ""}
-          </Button>
-        </div>
-      </header>
-      <div className="matrix-toolbar">
-        <label className="matrix-search">
-          <Search aria-hidden="true" />
-          <Input
-            value={query}
-            onChange={(event) => setQuery(event.target.value)}
-            placeholder="搜索区域、城市、品牌或型号"
-            aria-label="搜索库存"
-          />
-          {query && (
-            <button onClick={() => setQuery("")} aria-label="清空库存搜索">
-              <X />
-            </button>
-          )}
-        </label>
-        <div className="matrix-tools">
-          <Button
-            variant="ghost"
-            onClick={() =>
-              setExpanded(
-                expanded.size
-                  ? new Set()
-                  : new Set(groups.map((group) => group.name)),
-              )
-            }
-          >
-            <ChevronsDownUp aria-hidden="true" />
-            {expanded.size ? "收起区域" : "展开区域"}
-          </Button>
-          <ExportButton
-            rows={rows}
-            columns={[
-              { key: "region", label: "区域" },
-              { key: "city", label: "城市" },
-              { key: "brand", label: "品牌" },
-              {
-                key: "type",
-                label: "车型",
-                format: (value) => inventoryColumn(String(value)),
-              },
-              { key: "model", label: "原始型号" },
-              { key: "quantity", label: "库存" },
-              { key: "available", label: "可运营" },
-              { key: "awaiting", label: "待运营" },
-              { key: "abnormal", label: "异动" },
-              { key: "pending", label: "待交车" },
-            ]}
-            filename="库存统计"
-            sheetName="库存"
-          />
-        </div>
-      </div>
-      {filterOpen && (
-        <div className="matrix-filters">
-          <Picker
-            label="区域"
-            value={filters.region}
-            values={unique(inventory.map((row) => row.region))}
-            change={(region) =>
-              setFilters((old) => ({ ...old, region, city: "" }))
-            }
-          />
-          <Picker
-            label="城市"
-            value={filters.city}
-            values={unique(
-              inventory
-                .filter(
-                  (row) => !filters.region || row.region === filters.region,
-                )
-                .map((row) => row.city),
-            )}
-            change={(city) => setFilters((old) => ({ ...old, city }))}
-          />
-          <Picker
-            label="品牌"
-            value={filters.brand}
-            values={unique(inventory.map((row) => row.brand))}
-            change={(brand) => setFilters((old) => ({ ...old, brand }))}
-          />
-          <Button
-            variant="ghost"
-            onClick={() => {
-              setFilters({ region: "", city: "", brand: "" });
-              setQuery("");
-            }}
-          >
-            重置筛选
-          </Button>
-        </div>
-      )}
-      {activeCount > 0 && (
-        <div className="matrix-filter-summary">
-          {Object.values(filters).filter(Boolean).join(" / ")}
-          <button
-            onClick={() => setFilters({ region: "", city: "", brand: "" })}
-          >
-            清除条件
-          </button>
-        </div>
-      )}
-      <div className="matrix-type-overview" aria-label="各车型库存总览">
-        {INVENTORY_TYPES.map((type) => {
-          const counts = inventoryTotals(cellRows(rows, type, ""));
-          return (
-            <button
-              key={type}
-              aria-pressed={expandedType === type}
-              onClick={() => setExpandedType(expandedType === type ? "" : type)}
-            >
-              <span>
-                {type}
-                <ChevronDown aria-hidden="true" />
-              </span>
-              <strong>
-                {counts.quantity.toLocaleString()}
-                <small>台</small>
-              </strong>
-              <span>可运营 {counts.available.toLocaleString()}</span>
-            </button>
-          );
-        })}
-      </div>
-      <div className="matrix-reading-guide">
-        <span>地区合计与车型合计均为当前筛选范围</span>
-        <span>点击车型展开品牌 · 点击数字查看明细</span>
-      </div>
-      {!rows.length ? (
-        <div className="matrix-empty">
-          <strong>暂无匹配库存</strong>
-          <p>尝试切换车型或调整筛选条件</p>
-          <Button
-            variant="outline"
-            onClick={() => {
-              setQuery("");
-              setFilters({ region: "", city: "", brand: "" });
-            }}
-          >
-            查看全部库存
-          </Button>
-        </div>
-      ) : (
-        <div
-          className="matrix-scroll"
-          tabIndex={0}
-          aria-label="库存矩阵，可横向滚动"
-        >
-          <table className="matrix-table">
-            <caption className="sr-only">
-              区域展开城市，车型展开品牌，点击库存数量查看构成与车辆明细
-            </caption>
-            <thead>
-              <tr>
-                <th
-                  rowSpan={hasBrandColumns ? 2 : 1}
-                  scope="col"
-                  className="matrix-geography"
-                >
-                  区域 / 城市
-                </th>
-                <th
-                  rowSpan={hasBrandColumns ? 2 : 1}
-                  scope="col"
-                  className="matrix-total"
-                >
-                  总库存
-                </th>
-                {INVENTORY_TYPES.map((type) => (
-                  <th
-                    key={type}
-                    colSpan={expandedType === type ? 1 + brands.length : 1}
-                    rowSpan={expandedType === type || !hasBrandColumns ? 1 : 2}
-                    scope="colgroup"
-                  >
-                    <button
-                      className="matrix-column-toggle"
-                      aria-expanded={expandedType === type}
-                      onClick={() =>
-                        setExpandedType(expandedType === type ? "" : type)
-                      }
-                    >
-                      {type}
-                      {expandedType === type ? (
-                        <ChevronDown />
-                      ) : (
-                        <ChevronRight />
-                      )}
-                    </button>
-                  </th>
-                ))}
-              </tr>
-              {hasBrandColumns && (
-                <tr>
-                  <th scope="col">小计</th>
-                  {brands.map((brand) => (
-                    <th key={brand} scope="col">
-                      {brand}
-                    </th>
-                  ))}
-                </tr>
-              )}
-            </thead>
-            <tbody>
-              {groups.map((group) => (
-                <Fragment key={group.name}>
-                  <tr className="matrix-region-row">
-                    <th scope="row" className="matrix-geography">
-                      <button
-                        className="matrix-expand"
-                        aria-expanded={expanded.has(group.name)}
-                        onClick={() => toggleRegion(group.name)}
-                      >
-                        {expanded.has(group.name) ? (
-                          <ChevronDown />
-                        ) : (
-                          <ChevronRight />
-                        )}
-                        {group.name}
-                        <small>{group.cities.length} 城市</small>
-                      </button>
-                    </th>
-                    {renderCells(
-                      group.cities.flatMap((city) => city.rows),
-                      group.name,
-                    )}
-                  </tr>
-                  {expanded.has(group.name) &&
-                    group.cities.map((city) => (
-                      <tr key={city.key} className="matrix-city-row">
-                        <th scope="row" className="matrix-geography">
-                          <span>{city.name}</span>
-                        </th>
-                        {renderCells(city.rows, `${group.name} / ${city.name}`)}
-                      </tr>
-                    ))}
-                </Fragment>
-              ))}
-            </tbody>
-            <tfoot>
-              <tr>
-                <th scope="row" className="matrix-geography">
-                  当前范围合计
-                </th>
-                {renderCells(rows, "当前库存合计")}
-              </tr>
-            </tfoot>
-          </table>
-        </div>
-      )}
-      <footer className="matrix-footer">
-        <span>
-          {groups.length} 个区域 ·{" "}
-          {groups.reduce((sum, group) => sum + group.cities.length, 0)} 个城市 ·{" "}
-          {total.quantity} 台
-        </span>
-        <span>异动、待交车已包含在库存中 ·「其他」包含挂车及未单列车型</span>
-      </footer>
-    </section>
-  );
-}

src/modules/assets/library/VehicleDetails.tsx

@@ -1,333 +0,0 @@
-import { inventoryColor } from "../../../shared/assets/inventory";
-import { matchesInventorySelection, inventoryModel } from "./inventory-view";
-import { ArrowLeft, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useEffect, useRef, useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  fetchVehicleList,
-  fetchWeeklyDetail,
-  type WeeklyDetailItem,
-} from "../api";
-import { buildVehicleModalRequest, type VehicleModalSelection } from "../model";
-import type { VehicleListItem } from "../types";
-import { DataGrid, type Column } from "./DataGrid";
-import { ExportButton } from "./export";
-import { Failure, FilterFields, PrivateText, unique } from "./shared";
-const titles = {
-  Inventory: "库存车辆",
-  Operating: "运营车辆",
-  Abnormal: "异动车辆",
-  Pending: "待交车车辆",
-  Delivered: "本周交车",
-  Returned: "本周还车",
-  Replaced: "本周替换交车",
-};
-export function VehicleDetails({
-  selection,
-  subject,
-  close,
-  returnLabel = "返回统计",
-}: {
-  selection: VehicleModalSelection | null;
-  subject: string | null;
-  close: () => void;
-  returnLabel?: string;
-}) {
-  const returnFocus = useRef<HTMLElement | null>(null);
-  const [vehicles, setVehicles] = useState<VehicleListItem[]>([]);
-  const [weekly, setWeekly] = useState<WeeklyDetailItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [retry, setRetry] = useState(0);
-  const [filters, setFilters] = useState({
-    model: "",
-    brandLabel: "",
-    location: "",
-  });
-  useEffect(() => {
-    let active = true;
-    setFilters({ model: "", brandLabel: "", location: "" });
-    setVehicles([]);
-    setWeekly([]);
-    setError("");
-    if (!selection) return;
-    setLoading(true);
-    const request = buildVehicleModalRequest(selection, subject);
-    const run = async () => {
-      try {
-        if (request.kind === "weekly") {
-          const rows = await fetchWeeklyDetail(request.type, {
-            ...request.filters,
-            subject,
-          });
-          if (active) setWeekly(rows);
-        } else {
-          const rows = await fetchVehicleList(request.params);
-          if (active)
-            setVehicles(
-              rows.filter((row) => matchesInventorySelection(row, selection)),
-            );
-        }
-      } catch (e) {
-        if (active) setError(e instanceof Error ? e.message : "加载失败");
-      } finally {
-        if (active) setLoading(false);
-      }
-    };
-    void run();
-    return () => {
-      active = false;
-    };
-  }, [selection, subject, retry]);
-  const rows = vehicles
-    .filter((r) =>
-      Object.entries(filters).every(
-        ([k, v]) => !v || r[k as keyof VehicleListItem] === v,
-      ),
-    )
-    .map((r) => ({
-      ...r,
-      color: inventoryColor(r.color),
-      displayModel: inventoryModel(r.model, r.brandLabel || "").name,
-      operator: inventoryModel(r.model, r.brandLabel || "").operator || "—",
-      pendingContract: r.pendingDelivery?.contractNo || "—",
-      pendingCustomer: r.pendingDelivery?.customerName || "—",
-      moveType: r.abnormalMove?.type || "—",
-      work: r.abnormalMove?.work || "—",
-      target: r.abnormalMove?.targetCompletionTime || "—",
-      actual: r.abnormalMove?.actualCompletionTime || "—",
-      initiating: r.abnormalMove?.initiatingDepartment || "—",
-      executing: r.abnormalMove?.executingDepartment || "—",
-      responsible: r.abnormalMove?.responsiblePerson || "—",
-      driver: r.abnormalMove?.driver || "—",
-    }));
-  type Row = (typeof rows)[number];
-  const columns: Column<Row>[] = [
-    { key: "plateNumber", label: "车牌", private: true, width: 140 },
-    { key: "brandLabel", label: "品牌" },
-    { key: "type", label: "车型" },
-    { key: "displayModel", label: "型号", width: 160 },
-    { key: "operator", label: "所属公司" },
-    { key: "color", label: "颜色" },
-    { key: "location", label: "所在地" },
-  ];
-  if (selection?.category === "Pending")
-    columns.push(
-      {
-        key: "pendingContract",
-        primary: true,
-        label: "待交车合同",
-        width: 180,
-      },
-      {
-        key: "pendingCustomer",
-        primary: true,
-        label: "客户（已脱敏）",
-        width: 180,
-        private: true,
-      },
-    );
-  if (selection?.category === "Abnormal")
-    columns.push(
-      ...([
-        { key: "moveType", primary: true, label: "异动类型" },
-        { key: "target", primary: true, label: "预计结束时间", width: 180 },
-        { key: "work", label: "具体工作", width: 220 },
-        { key: "initiating", label: "发起部门" },
-        { key: "executing", label: "执行部门" },
-        { key: "responsible", label: "负责人", private: true },
-        { key: "driver", label: "操作司机", private: true },
-        { key: "actual", label: "实际完成时间", width: 180 },
-      ] as Column<Row>[]),
-    );
-  columns.push(
-    {
-      key: "operationStatus",
-      label: "运营状态",
-      primary: true,
-      format: (value) =>
-        ({ "1": "租赁", "2": "自营", "3": "可运营", "4": "待运营" })[
-          String(value)
-        ] || String(value || "未标注"),
-    },
-    {
-      key: "status",
-      label: "业务状态",
-      primary: true,
-      format: (value) =>
-        ({
-          Inventory: "库存",
-          Operating: "运营",
-          Abnormal: "异动",
-          Pending: "待交车",
-        })[String(value)] || String(value),
-    },
-    { key: "departmentName", label: "部门" },
-    { key: "customerManager", label: "客户经理", private: true },
-    { key: "vin", label: "车架号", private: true, width: 200 },
-  );
-  const isWeekly =
-    selection &&
-    ["Delivered", "Returned", "Replaced"].includes(selection.category || "");
-  const weeklyColumns: Column<WeeklyDetailItem>[] = [
-    { key: "plate_number", label: "车牌", private: true },
-    { key: "handover_date", label: "签章日期", width: 180 },
-    { key: "contract_type", label: "合同类型" },
-    { key: "customer_name", label: "客户", private: true },
-  ];
-  const title =
-    selection?.title ||
-    (selection?.category ? titles[selection.category] : "车辆明细");
-  const context = [
-    ["城市 / 区域", selection?.location],
-    ["品牌", selection?.brand],
-    ["车型", selection?.type || selection?.vehicleType],
-    ["型号", selection?.model],
-    ["批次", selection?.batch],
-    ["部门", selection?.department],
-  ].filter(([, value]) => value && value !== "All");
-  return (
-    <Dialog open={!!selection} onOpenChange={(v) => !v && close()}>
-      <DialogContent
-        className="asset-ui asset-detail"
-        showCloseButton={false}
-        onOpenAutoFocus={() => {
-          returnFocus.current =
-            document.activeElement instanceof HTMLElement
-              ? document.activeElement
-              : null;
-        }}
-        onCloseAutoFocus={(event) => {
-          if (returnFocus.current?.isConnected) {
-            event.preventDefault();
-            returnFocus.current.focus({ preventScroll: true });
-          }
-        }}
-      >
-        <DialogHeader className="asset-detail-header">
-          <div className="flex items-center gap-3">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={close}
-              aria-label={returnLabel}
-            >
-              <ArrowLeft />
-            </Button>
-            <div className="min-w-0 flex-1">
-              <p className="mb-1 text-xs text-[var(--label-secondary)]">
-                资产管理 /{" "}
-                {selection?.source === "department"
-                  ? "部门运营"
-                  : selection?.source === "region"
-                    ? "区域分布"
-                    : selection?.source === "customer"
-                      ? "客户资产"
-                      : "资产统计"}
-              </p>
-              <DialogTitle className="text-lg font-semibold">
-                {title}
-              </DialogTitle>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="hidden md:inline-flex"
-              onClick={close}
-              aria-label="关闭车辆明细"
-            >
-              <X />
-            </Button>
-          </div>
-          <DialogDescription>
-            {subject || "全部公司"} ·{" "}
-            {loading
-              ? "正在加载车辆…"
-              : `${isWeekly ? weekly.length : vehicles.length} 条记录`}
-          </DialogDescription>
-          {selection?.scopeLabel && (
-            <p className="text-sm">{selection.scopeLabel}</p>
-          )}
-          {context.length > 0 && (
-            <div className="asset-context" aria-label="当前下钻范围">
-              {context.map(([label, value]) => (
-                <span key={label}>
-                  {label}：{value}
-                </span>
-              ))}
-            </div>
-          )}
-          {selection?.customer && (
-            <p className="text-xs text-[var(--label-secondary)]">
-              客户：<PrivateText>{selection.customer}</PrivateText>
-            </p>
-          )}
-          {selection?.manager && (
-            <p className="text-xs text-[var(--label-secondary)]">
-              负责人：<PrivateText>{selection.manager}</PrivateText>
-            </p>
-          )}
-        </DialogHeader>
-        <div className="asset-detail-body" aria-busy={loading}>
-          {error ? (
-            <Failure message={error} retry={() => setRetry((n) => n + 1)} />
-          ) : loading ? (
-            <Skeleton className="h-64" />
-          ) : isWeekly ? (
-            <>
-              <ExportButton
-                rows={weekly}
-                columns={weeklyColumns}
-                filename="交还车车辆"
-                sheetName="交还车车辆"
-              />
-              <DataGrid
-                rows={weekly}
-                label="交还车车辆"
-                columns={weeklyColumns}
-              />
-            </>
-          ) : (
-            <>
-              <FilterFields
-                fields={(["model", "brandLabel", "location"] as const).map(
-                  (key, i) => ({
-                    label: ["型号", "品牌", "所在地"][i],
-                    value: filters[key],
-                    values: unique(vehicles.map((r) => r[key])),
-                    change: (value) =>
-                      setFilters((f) => ({ ...f, [key]: value })),
-                  }),
-                )}
-                onReset={() =>
-                  setFilters({ model: "", brandLabel: "", location: "" })
-                }
-              />
-              <ExportButton
-                rows={rows}
-                columns={columns}
-                filename="车辆明细"
-                sheetName="车辆"
-              />
-              <DataGrid rows={rows} columns={columns} label="车辆" />
-            </>
-          )}
-        </div>
-        <footer className="asset-detail-footer">
-          <span>关闭后返回原来的筛选与浏览位置</span>
-          <Button variant="outline" onClick={close}>
-            {returnLabel}
-          </Button>
-        </footer>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/modules/assets/library/export.tsx

@@ -1,52 +0,0 @@
-import { Download } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import type { Column } from "./DataGrid";
-
-function cellValue<T extends object>(row: T, col: Column<T>): string | number {
-  const raw = row[col.key];
-  if (col.format) return col.format(raw, row);
-  return (raw as string | number) ?? "";
-}
-
-/** 按表格列定义导出 xlsx；xlsx 按需加载，避免进入首屏包。 */
-export async function exportToXlsx<T extends object>(
-  rows: T[],
-  columns: Column<T>[],
-  filename: string,
-  sheetName = "明细",
-): Promise<void> {
-  const { buildJsonSheet, writeWorkbook } = await import("../../../shared/xlsx");
-  const sheet = buildJsonSheet(
-    rows.map((row) =>
-      Object.fromEntries(columns.map((col) => [col.label, cellValue(row, col)])),
-    ),
-  );
-  writeWorkbook([{ name: sheetName, sheet }], filename);
-}
-
-export function ExportButton<T extends object>({
-  rows,
-  columns,
-  filename,
-  sheetName,
-  label = "导出",
-}: {
-  rows: T[];
-  columns: Column<T>[];
-  filename: string;
-  sheetName?: string;
-  label?: string;
-}) {
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      className="min-h-9 w-fit md:min-h-7"
-      disabled={!rows.length}
-      onClick={() => void exportToXlsx(rows, columns, filename, sheetName)}
-    >
-      <Download data-icon="inline-start" />
-      {label}
-    </Button>
-  );
-}

src/modules/assets/library/inventory-explorer.test.ts

@@ -1,181 +0,0 @@
-import test from "node:test";
-import assert from "node:assert/strict";
-import type { RegionalInventoryStats } from "../types";
-import {
-  inventoryBrowseRows,
-  inventoryBrowseUrl,
-  inventoryModels,
-  inventoryPlaces,
-  inventoryTypeRows,
-  readInventoryBrowse,
-} from "./inventory-explorer";
-import {
-  INVENTORY_TYPES,
-  inventoryTotals,
-  scopedInventorySelection,
-} from "./inventory-view";
-import { inventoryKey } from "../../../shared/assets/inventory";
-
-const make = (
-  changes: Partial<RegionalInventoryStats> = {},
-): RegionalInventoryStats => ({
-  region: "华东",
-  city: "嘉兴市",
-  brand: "现代",
-  type: "4.5T冷链",
-  model: "冷链（公司甲）",
-  batch: "批次甲",
-  quantity: 5,
-  available: 3,
-  awaiting: 2,
-  pending: 1,
-  abnormal: 1,
-  ...changes,
-});
-
-test("region, city and type partitions reconcile without counting pending/abnormal twice", () => {
-  const rows = [
-    make(),
-    make({ city: "杭州市", quantity: 3 }),
-    make({ region: "华南", city: "广州市", type: "49T", quantity: 7 }),
-    make({ type: "挂车", quantity: 2 }),
-  ];
-  const total = inventoryTotals(rows).quantity;
-  assert.equal(total, 17);
-  assert.equal(
-    inventoryPlaces(rows, "region", "").reduce(
-      (n, place) => n + place.total.quantity,
-      0,
-    ),
-    total,
-  );
-  assert.equal(
-    INVENTORY_TYPES.reduce(
-      (n, type) => n + inventoryTotals(inventoryTypeRows(rows, type)).quantity,
-      0,
-    ),
-    total,
-  );
-  for (const region of inventoryPlaces(rows, "region", "")) {
-    assert.equal(
-      inventoryPlaces(region.rows, "city", "").reduce(
-        (n, city) => n + city.total.quantity,
-        0,
-      ),
-      region.total.quantity,
-    );
-  }
-});
-
-test("type selection keeps zero-stock locations visible and never uses other-type totals", () => {
-  const places = inventoryPlaces(
-    [
-      make(),
-      make({ region: "华南", city: "广州市", type: "49T", quantity: 7 }),
-    ],
-    "region",
-    "49T",
-  );
-  assert.deepEqual(
-    places.map((place) => [place.name, place.total.quantity]),
-    [
-      ["华南", 7],
-      ["华东", 0],
-    ],
-  );
-  assert.equal(places[1].rows.length, 0);
-});
-
-test("city drill-down intersects geography, brand, query and type before opening exact detail keys", () => {
-  const wanted = make();
-  const rows = [
-    wanted,
-    make({ region: "华南" }),
-    make({ city: "杭州市" }),
-    make({ brand: "另一品牌" }),
-    make({ model: "普货", type: "4.5T普货" }),
-  ];
-  const state = {
-    ...readInventoryBrowse(""),
-    region: "华东",
-    city: "嘉兴市",
-    brand: "现代",
-    query: "冷链",
-    type: "4.5T冷链",
-  };
-  const filtered = inventoryTypeRows(
-    inventoryBrowseRows(rows, state),
-    state.type,
-  );
-  assert.deepEqual(filtered, [wanted]);
-  const model = inventoryModels(filtered)[0];
-  assert.deepEqual(
-    scopedInventorySelection({ rows: model.rows, label: "测试范围" })
-      .inventoryKeys,
-    [inventoryKey(wanted)],
-  );
-});
-
-test("missing geography and duplicate city/model names retain exact identity", () => {
-  const rows = [
-    make({ region: "", city: "" }),
-    make({ city: "" }),
-    make({ region: "华南", city: "" }),
-  ];
-  assert.equal(inventoryPlaces(rows, "city", "").length, 3);
-  assert.deepEqual(
-    inventoryBrowseRows(rows, {
-      ...readInventoryBrowse(""),
-      region: "",
-      city: "",
-    }),
-    [rows[0]],
-  );
-  const models = inventoryModels([
-    make({ type: "挂车" }),
-    make({ type: "35T" }),
-    make({ brand: "另一品牌" }),
-  ]);
-  assert.equal(models.length, 3);
-  assert.equal(new Set(models.map((model) => model.key)).size, 3);
-});
-
-test("deep links round-trip filters, empty geography and model identity without changing the host route", () => {
-  const state = {
-    region: "",
-    city: "",
-    type: "其他",
-    model: '["现代","挂车","A/B"]',
-    query: "A/B & C",
-    brand: "现代",
-  };
-  const url = new URL(
-    inventoryBrowseUrl(
-      "https://example.test/asset?existing=yes#assets/overview",
-      state,
-    ),
-  );
-  assert.deepEqual(readInventoryBrowse(url.search), state);
-  assert.equal(url.hash, "#assets/overview");
-  assert.equal(url.pathname, "/asset");
-  assert.equal(url.searchParams.get("existing"), "yes");
-  const cleared = new URL(
-    inventoryBrowseUrl(url.href, readInventoryBrowse("")),
-  );
-  assert.equal(cleared.search, "?existing=yes");
-});
-
-test("orphan child links and invalid type values cannot select an unrelated scope", () => {
-  assert.deepEqual(
-    readInventoryBrowse("?stockCity=嘉兴市&stockModel=x&stockType=invalid"),
-    readInventoryBrowse(""),
-  );
-  const state = readInventoryBrowse("?stockRegion=华东&stockModel=x");
-  assert.equal(state.model, null);
-  assert.equal(inventoryModels([]).length, 0);
-  assert.equal(
-    inventoryBrowseRows([make()], { ...state, query: "no matching model" })
-      .length,
-    0,
-  );
-});

src/modules/assets/library/inventory-explorer.ts

@@ -1,150 +0,0 @@
-import type { RegionalInventoryStats } from "../types";
-import {
-  INVENTORY_TYPES,
-  inventoryColumn,
-  inventoryTotals,
-} from "./inventory-view";
-
-export interface InventoryBrowseState {
-  region: string | null;
-  city: string | null;
-  type: string;
-  model: string | null;
-  query: string;
-  brand: string;
-}
-
-export function readInventoryBrowse(search: string): InventoryBrowseState {
-  const params = new URLSearchParams(search);
-  const region = params.get("stockRegion");
-  const city = region === null ? null : params.get("stockCity");
-  const type = params.get("stockType") || "";
-  return {
-    region,
-    city,
-    type: INVENTORY_TYPES.includes(type as (typeof INVENTORY_TYPES)[number])
-      ? type
-      : "",
-    model: city === null ? null : params.get("stockModel"),
-    query: params.get("stockQuery") || "",
-    brand: params.get("stockBrand") || "",
-  };
-}
-
-/** Keep the application's route and unrelated URL parameters intact. */
-export function inventoryBrowseUrl(href: string, state: InventoryBrowseState) {
-  const url = new URL(href);
-  for (const [key, value] of Object.entries({
-    stockRegion: state.region,
-    stockCity: state.region === null ? null : state.city,
-    stockType: state.type || null,
-    stockModel:
-      state.region === null || state.city === null ? null : state.model,
-    stockQuery: state.query || null,
-    stockBrand: state.brand || null,
-  })) {
-    if (value === null) url.searchParams.delete(key);
-    else url.searchParams.set(key, value);
-  }
-  return url.href;
-}
-
-export function inventoryBrowseRows(
-  rows: RegionalInventoryStats[],
-  state: InventoryBrowseState,
-) {
-  const query = state.query.trim().toLocaleLowerCase();
-  return rows.filter(
-    (row) =>
-      (state.region === null || row.region === state.region) &&
-      (state.city === null || row.city === state.city) &&
-      (!state.brand || row.brand === state.brand) &&
-      (!query ||
-        [
-          row.region,
-          row.city,
-          row.brand,
-          row.type,
-          row.model,
-          inventoryColumn(row.type),
-        ]
-          .join(" ")
-          .toLocaleLowerCase()
-          .includes(query)),
-  );
-}
-
-export function inventoryTypeRows(
-  rows: RegionalInventoryStats[],
-  type: string,
-) {
-  return type ? rows.filter((row) => inventoryColumn(row.type) === type) : rows;
-}
-
-/** Build places before applying the type filter so no-stock places remain explicit. */
-export function inventoryPlaces(
-  rows: RegionalInventoryStats[],
-  level: "region" | "city",
-  type: string,
-) {
-  const groups = new Map<string, RegionalInventoryStats[]>();
-  for (const row of rows) {
-    const key = JSON.stringify(
-      level === "region" ? [row.region] : [row.region, row.city],
-    );
-    const group = groups.get(key) || [];
-    group.push(row);
-    groups.set(key, group);
-  }
-  return [...groups]
-    .map(([key, records]) => {
-      const selected = inventoryTypeRows(records, type);
-      return {
-        key,
-        value: records[0][level],
-        name:
-          records[0][level] ||
-          (level === "region" ? "未归属地区" : "未归属城市"),
-        rows: selected,
-        total: inventoryTotals(selected),
-        cities: new Set(
-          selected.filter((row) => row.quantity > 0).map((row) => row.city),
-        ).size,
-        types: INVENTORY_TYPES.map((name) => ({
-          name,
-          quantity: inventoryTotals(inventoryTypeRows(records, name)).quantity,
-        })).filter((item) => item.quantity > 0),
-      };
-    })
-    .sort(
-      (a, b) =>
-        b.total.quantity - a.total.quantity ||
-        a.name.localeCompare(b.name, "zh-CN"),
-    );
-}
-
-/** Keep the exact type/model/brand identity even when displayed in the Other column. */
-export function inventoryModels(rows: RegionalInventoryStats[]) {
-  const groups = new Map<string, RegionalInventoryStats[]>();
-  for (const row of rows) {
-    const key = JSON.stringify([row.brand, row.type, row.model]);
-    const group = groups.get(key) || [];
-    group.push(row);
-    groups.set(key, group);
-  }
-  return [...groups]
-    .map(([key, records]) => ({
-      key,
-      rows: records,
-      brand: records[0].brand,
-      model: records[0].model,
-      type: records[0].type,
-      total: inventoryTotals(records),
-    }))
-    .filter((group) => group.total.quantity > 0)
-    .sort(
-      (a, b) =>
-        b.total.quantity - a.total.quantity ||
-        a.model.localeCompare(b.model, "zh-CN"),
-    );
-}

src/modules/assets/library/inventory-view.test.ts

@@ -1,203 +0,0 @@
-import {
-  inventoryKey,
-  inventoryOperation,
-  inventoryColor,
-} from "../../../shared/assets/inventory";
-import {
-  INVENTORY_TYPES,
-  inventoryColumn,
-  inventoryTotals,
-  inventoryModel,
-  scopedInventorySelection,
-  matchesInventorySelection,
-} from "./inventory-view";
-import type { VehicleListItem } from "../types";
-import test from "node:test";
-import assert from "node:assert/strict";
-import { groupInventory, inventorySelection } from "./inventory-view";
-import { buildVehicleModalRequest } from "../model";
-import type { RegionalInventoryStats } from "../types";
-const make = (
-  change: Partial<RegionalInventoryStats> = {},
-): RegionalInventoryStats => ({
-  region: "华东",
-  city: "嘉兴市",
-  brand: "明威",
-  type: "挂车",
-  model: "挂车",
-  batch: "挂车",
-  quantity: 2,
-  abnormal: 1,
-  pending: 1,
-  ...change,
-});
-test("inventory grouping preserves totals and does not double-count abnormal/pending subsets", () => {
-  const rows = [
-    make(),
-    make({ brand: "万风", quantity: 1 }),
-    make({ region: "华南", city: "广州市", quantity: 4 }),
-  ];
-  const original = JSON.stringify(rows);
-  const groups = groupInventory(rows, "region");
-  assert.deepEqual(
-    groups.map((group) => [group.name, group.total]),
-    [
-      ["华南", 4],
-      ["华东", 3],
-    ],
-  );
-  assert.equal(groups[1].cities[0].rows.length, 2);
-  assert.equal(
-    groups.reduce((sum, group) => sum + group.total, 0),
-    7,
-  );
-  assert.equal(JSON.stringify(rows), original);
-});
-test("type grouping keeps same-name cities in different regions separate", () => {
-  const grouped = groupInventory(
-    [make(), make({ region: "华南", brand: "万风" })],
-    "type",
-  );
-  assert.equal(grouped.length, 1);
-  assert.equal(grouped[0].cities.length, 2);
-  assert.notEqual(grouped[0].cities[0].key, grouped[0].cities[1].key);
-});
-test("sorting reverses quantities within each city and preserves the source array", () => {
-  const rows = [make(), make({ quantity: 5, model: "另一型号" })];
-  assert.deepEqual(
-    groupInventory(rows, "region")[0].cities[0].rows.map((row) => row.quantity),
-    [5, 2],
-  );
-  assert.deepEqual(
-    groupInventory(rows, "region", true)[0].cities[0].rows.map(
-      (row) => row.quantity,
-    ),
-    [2, 5],
-  );
-  assert.equal(rows[0].quantity, 2);
-  assert.deepEqual(groupInventory([], "region"), []);
-});
-test("drill-down keeps brand, model, city, type, category and company; does not mistake model for contract batch", () => {
-  const request = buildVehicleModalRequest(
-    inventorySelection(make(), "Pending"),
-    "公司甲",
-  );
-  assert.equal(request.kind, "vehicles");
-  if (request.kind !== "vehicles") return;
-  assert.deepEqual(request.params, {
-    brand: "明威",
-    model: "挂车",
-    location: "嘉兴市",
-    source: "asset",
-    category: "Pending",
-    vehicleType: "挂车",
-    subject: "公司甲",
-  });
-});
-
-test("matrix merges trailers into other while preserving all five column totals", () => {
-  const rows = [
-    make(),
-    make({ type: "35T", quantity: 3 }),
-    make({ type: "4.5T普货", quantity: 4 }),
-    make({ type: "4.5T冷链", quantity: 5 }),
-    make({ type: "18T", quantity: 6 }),
-    make({ type: "49T", quantity: 7 }),
-  ];
-  assert.deepEqual(
-    INVENTORY_TYPES.map(
-      (type) =>
-        inventoryTotals(
-          rows.filter((row) => inventoryColumn(row.type) === type),
-        ).quantity,
-    ),
-    [4, 5, 6, 7, 5],
-  );
-  assert.equal(inventoryTotals(rows).quantity, 27);
-});
-test("composition uses independent operation status; abnormal and pending remain subsets", () => {
-  const total = inventoryTotals([
-    make({
-      quantity: 5,
-      available: 3,
-      awaiting: 2,
-      abnormal: 2,
-      pending: 1,
-      abnormalTypes: { 维修: 2 },
-    }),
-    make({
-      quantity: 2,
-      available: 0,
-      awaiting: 2,
-      abnormal: 1,
-      pending: 0,
-      abnormalTypes: { 保养: 1 },
-    }),
-  ]);
-  assert.equal(total.available + total.awaiting, total.quantity);
-  assert.equal(total.quantity, 7);
-  assert.equal(total.abnormal, 3);
-  assert.deepEqual(total.abnormalTypes, { 维修: 2, 保养: 1 });
-  assert.equal(inventoryOperation("在库"), "unclassified");
-});
-test("model tags separate operator and color while retaining a model-first name", () => {
-  assert.deepEqual(inventoryModel("现代4.5T普货（恒运）", "现代"), {
-    name: "4.5T普货",
-    operator: "恒运",
-  });
-  assert.deepEqual(inventoryModel("现代18T双飞翼（羚牛）", "帕力安牌"), {
-    name: "18T双飞翼",
-    operator: "羚牛",
-  });
-  assert.deepEqual(inventoryModel("49T宇通", "宇通"), {
-    name: "49T",
-    operator: "",
-  });
-  assert.deepEqual(inventoryModel("飞驰18T（红车）", "飞驰"), {
-    name: "18T",
-    operator: "",
-  });
-  assert.deepEqual(inventoryModel("49T飞驰（浙氢-红）", "飞驰"), {
-    name: "49T",
-    operator: "浙氢",
-  });
-});
-test("drill-down intersects exact geographic/model/brand keys with color and operational status", () => {
-  const row = make();
-  const selection = scopedInventorySelection(
-    { rows: [row], label: "华东 / 嘉兴市 / 其他" },
-    { inventoryColor: "白", inventoryOperation: "available" },
-  );
-  const vehicle = {
-    inventoryKey: inventoryKey(row),
-    color: "白",
-    operationStatus: "3",
-  } as VehicleListItem;
-  assert.equal(matchesInventorySelection(vehicle, selection), true);
-  assert.equal(
-    matchesInventorySelection({ ...vehicle, color: "红" }, selection),
-    false,
-  );
-  assert.equal(
-    matchesInventorySelection({ ...vehicle, operationStatus: "4" }, selection),
-    false,
-  );
-  assert.equal(
-    matchesInventorySelection(
-      { ...vehicle, inventoryKey: inventoryKey({ ...row, region: "华南" }) },
-      selection,
-    ),
-    false,
-  );
-  assert.equal(
-    matchesInventorySelection(vehicle, { ...selection, inventoryKeys: [] }),
-    false,
-  );
-});
-
-test("known color aliases combine without merging distinct multicolor values", () => {
-  assert.equal(inventoryColor("红"), inventoryColor("红色"));
-  assert.equal(inventoryColor("白车"), "白色");
-  assert.equal(inventoryColor("蓝白绿"), "蓝白绿");
-  assert.equal(inventoryColor(null), "未标注颜色");
-});

src/modules/assets/library/inventory-view.ts

@@ -1,164 +0,0 @@
-import {
-  emptyInventoryCounts,
-  inventoryKey,
-  inventoryOperation,
-  inventoryColor,
-} from "../../../shared/assets/inventory";
-import type { VehicleListItem } from "../types";
-import type { RegionalInventoryStats } from "../types";
-import type { VehicleModalCategory, VehicleModalSelection } from "../model";
-
-export type InventoryGrouping = "region" | "type";
-export function groupInventory(
-  rows: RegionalInventoryStats[],
-  grouping: InventoryGrouping,
-  ascending = false,
-) {
-  const groups = new Map<string, RegionalInventoryStats[]>();
-  for (const row of rows) {
-    const key = row[grouping] || "未归属";
-    if (!groups.has(key)) groups.set(key, []);
-    groups.get(key)!.push(row);
-  }
-  return [...groups]
-    .map(([name, items]) => {
-      const cities = new Map<string, RegionalInventoryStats[]>();
-      for (const row of items) {
-        // A city may be missing or share a name with a city in another region.
-        const key = JSON.stringify([row.region, row.city]);
-        if (!cities.has(key)) cities.set(key, []);
-        cities.get(key)!.push(row);
-      }
-      return {
-        name,
-        total: items.reduce((sum, row) => sum + row.quantity, 0),
-        cities: [...cities]
-          .map(([key, records]) => ({
-            key,
-            name: records[0].city || "未归属城市",
-            region: records[0].region || "未归属",
-            total: records.reduce((sum, row) => sum + row.quantity, 0),
-            rows: [...records].sort(
-              (a, b) =>
-                (ascending ? 1 : -1) * (a.quantity - b.quantity) ||
-                a.model.localeCompare(b.model, "zh-CN"),
-            ),
-          }))
-          .sort(
-            (a, b) =>
-              b.total - a.total || a.name.localeCompare(b.name, "zh-CN"),
-          ),
-      };
-    })
-    .sort((a, b) => b.total - a.total || a.name.localeCompare(b.name, "zh-CN"));
-}
-export function inventorySelection(
-  row: RegionalInventoryStats,
-  category: VehicleModalCategory = "Inventory",
-): VehicleModalSelection {
-  return {
-    batch: "All",
-    source: "asset",
-    category,
-    brand: row.brand,
-    model: row.model,
-    location: row.city,
-    type: row.type,
-  };
-}
-
-export const INVENTORY_TYPES = [
-  "4.5T普货",
-  "4.5T冷链",
-  "18T",
-  "49T",
-  "其他",
-] as const;
-export function inventoryColumn(type: string) {
-  return INVENTORY_TYPES.includes(type as (typeof INVENTORY_TYPES)[number])
-    ? type
-    : "其他";
-}
-export function inventoryTotals(rows: RegionalInventoryStats[]) {
-  const result = emptyInventoryCounts();
-  for (const row of rows) {
-    for (const key of [
-      "quantity",
-      "available",
-      "awaiting",
-      "abnormal",
-      "pending",
-    ] as const)
-      result[key] += row[key] || 0;
-    result.unclassified +=
-      row.unclassified ??
-      Math.max(0, row.quantity - (row.available || 0) - (row.awaiting || 0));
-    for (const [type, count] of Object.entries(row.abnormalTypes || {}))
-      result.abnormalTypes[type] = (result.abnormalTypes[type] || 0) + count;
-  }
-  return result;
-}
-/** Display labels never replace the original model used for exact drill-down. */
-export function inventoryModel(model: string, brand: string) {
-  const parentheses = [...model.matchAll(/[（(]([^）)]+)[）)]/g)].map(
-    (match) => match[1],
-  );
-  const colorOnly = /^(?:红|白|蓝|绿|灰|黑|黄|银|蓝白绿)(?:色|车)?$/;
-  const operator = parentheses
-    .filter((value) => !colorOnly.test(value))
-    .map((value) => value.replace(/[-－](?:红|白|蓝白绿)(?:色|车)?$/, ""))
-    .join(" · ");
-  let name = model.replace(/[（(][^）)]*[）)]/g, "").trim();
-  for (const label of [
-    brand,
-    "现代",
-    "帕力安牌",
-    "宇通",
-    "飞驰",
-    "苏龙",
-    "跃进",
-    "楚风",
-  ]) {
-    if (label && name.startsWith(label))
-      name = name.slice(label.length).replace(/^-/, "");
-    if (label && name.endsWith(label)) name = name.slice(0, -label.length);
-  }
-  return { name: name || model, operator };
-}
-export interface InventoryScope {
-  rows: RegionalInventoryStats[];
-  label: string;
-  initialCategory?: "Abnormal" | "Pending";
-}
-export function scopedInventorySelection(
-  scope: InventoryScope,
-  extra: Partial<VehicleModalSelection> = {},
-): VehicleModalSelection {
-  return {
-    batch: "All",
-    model: "All",
-    location: "All",
-    source: "asset",
-    category: "Inventory",
-    inventoryKeys: scope.rows.map(inventoryKey),
-    scopeLabel: scope.label,
-    ...extra,
-  };
-}
-export function matchesInventorySelection(
-  vehicle: VehicleListItem,
-  selection: VehicleModalSelection,
-) {
-  return (
-    (!selection.inventoryKeys ||
-      selection.inventoryKeys.includes(vehicle.inventoryKey || "")) &&
-    (!selection.inventoryOperation ||
-      inventoryOperation(vehicle.operationStatus) ===
-        selection.inventoryOperation) &&
-    (!selection.inventoryColor ||
-      inventoryColor(vehicle.color) ===
-        inventoryColor(selection.inventoryColor)) &&
-    (!selection.abnormalType ||
-      (vehicle.abnormalMove?.type || "未提供") === selection.abnormalType)
-  );
-}

src/modules/assets/library/shared.tsx

@@ -1,252 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "@/components/ui/accordion";
-import { Badge } from "@/components/ui/badge";
-import { ArrowUpRight, SlidersHorizontal } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Field, FieldLabel } from "@/components/ui/field";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import type { VehicleModalSelection } from "../model";
-export type OpenVehicles = (selection: VehicleModalSelection) => void;
-export const baseSelection: VehicleModalSelection = {
-  batch: "All",
-  model: "All",
-  location: "All",
-  source: "asset",
-};
-export const unique = (values: (string | null | undefined)[]) =>
-  [...new Set(values.filter((v): v is string => !!v))].sort();
-
-/** 区块级 Tab 统一样式：模块级与卡片内嵌 Tab 共用，避免多套视觉。 */
-export const sectionTabsListClass =
-  "w-full min-h-11 bg-[var(--muted)] md:w-fit";
-export const sectionTabsTriggerClass =
-  "min-h-11 px-4 data-[state=active]:text-[var(--blue)] dark:data-[state=active]:text-[var(--cyan)]";
-
-/** 数字滚动动画：目标值变化时从当前值缓动到新值；尊重 reduced-motion。 */
-export function useCountUp(target: number, duration = 800) {
-  const [value, setValue] = useState(0);
-  const valueRef = useRef(0);
-  const rafRef = useRef(0);
-  useEffect(() => {
-    const from = valueRef.current;
-    if (from === target) return undefined;
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-      valueRef.current = target;
-      setValue(target);
-      return undefined;
-    }
-    const start = performance.now();
-    const tick = (now: number) => {
-      const t = Math.min(1, (now - start) / duration);
-      const eased = 1 - Math.pow(1 - t, 3);
-      const current = Math.round(from + (target - from) * eased);
-      valueRef.current = current;
-      setValue(current);
-      if (t < 1) rafRef.current = requestAnimationFrame(tick);
-    };
-    rafRef.current = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafRef.current);
-  }, [target, duration]);
-  return value;
-}
-
-/** 占比条：用于 KPI 卡片内的构成占比（如 租赁/自营）。 */
-export function ProportionBar({
-  segments,
-  label,
-}: {
-  segments: { value: number; className: string; title: string }[];
-  label: string;
-}) {
-  const total = segments.reduce((n, s) => n + s.value, 0);
-  return (
-    <div
-      className="flex h-1.5 w-full overflow-hidden rounded-full bg-[var(--fill-3)]"
-      role="img"
-      aria-label={label}
-    >
-      {total > 0 &&
-        segments
-          .filter((s) => s.value > 0)
-          .map((s) => (
-            <div
-              key={s.title}
-              title={`${s.title} ${s.value.toLocaleString()}`}
-              className={s.className}
-              style={{ width: `${(s.value / total) * 100}%` }}
-            />
-          ))}
-    </div>
-  );
-}
-export function PrivateText({ children }: { children: ReactNode }) {
-  return <>{children || "—"}</>;
-}
-export function Count({
-  value,
-  onClick,
-  label,
-}: {
-  value: number;
-  onClick: () => void;
-  label?: string;
-}) {
-  if (!value)
-    return (
-      <span className="asset-zero" title="暂无明细">
-        0
-      </span>
-    );
-  return (
-    <Button
-      variant="link"
-      size="sm"
-      className="asset-count"
-      onClick={onClick}
-      aria-label={
-        label ? `查看${label}：${value} 条明细` : `查看 ${value} 条明细`
-      }
-    >
-      {value.toLocaleString()}
-      <ArrowUpRight aria-hidden="true" />
-    </Button>
-  );
-}
-export function Picker({
-  label,
-  value = "",
-  values,
-  change,
-}: {
-  label: string;
-  value?: string;
-  values: string[];
-  change: (value: string) => void;
-}) {
-  return (
-    <Field>
-      <FieldLabel>{label}</FieldLabel>
-      <Select
-        value={value || "__all__"}
-        onValueChange={(v) => change(v === "__all__" ? "" : v)}
-      >
-        <SelectTrigger className="min-h-11 w-full" aria-label={label}>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectItem value="__all__">
-              全部{label === "所属公司" ? "公司" : label}
-            </SelectItem>
-            {values.map((v) => (
-              <SelectItem key={v} value={v}>
-                {v}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </Field>
-  );
-}
-export function FilterFields({
-  fields,
-  onReset,
-}: {
-  fields: Parameters<typeof Picker>[0][];
-  onReset: () => void;
-}) {
-  const active = fields.filter((field) => field.value);
-  return (
-    <Accordion
-      type="single"
-      collapsible
-      className="rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] px-3"
-    >
-      <AccordionItem value="filters" className="border-0">
-        <AccordionTrigger className="min-h-11 py-3 hover:no-underline">
-          <span className="flex min-w-0 flex-wrap items-center gap-2 text-left">
-            <SlidersHorizontal className="size-4 shrink-0 text-blue-600 dark:text-blue-300" />
-            <span className="font-semibold">筛选条件</span>
-            {active.length ? (
-              active.map((field) => (
-                <Badge
-                  key={field.label}
-                  variant="secondary"
-                  className="max-w-52 truncate bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200"
-                >
-                  {field.label}：{field.value}
-                </Badge>
-              ))
-            ) : (
-              <span className="text-sm font-normal text-muted-foreground">
-                未设条件
-              </span>
-            )}
-          </span>
-        </AccordionTrigger>
-        <AccordionContent className="pb-3">
-          <div className="grid grid-cols-2 items-end gap-3 md:grid-cols-3 xl:grid-cols-6">
-            {fields.map((field) => (
-              <Picker key={field.label} {...field} />
-            ))}
-            <Button
-              className="min-h-11"
-              variant="outline"
-              onClick={onReset}
-              disabled={!active.length}
-            >
-              重置筛选
-            </Button>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-export function Failure({
-  message,
-  retry,
-}: {
-  message: string;
-  retry?: () => void;
-}) {
-  return (
-    <Alert variant="destructive">
-      <AlertTitle>数据加载失败</AlertTitle>
-      <AlertDescription>
-        {message}
-        {retry && (
-          <Button variant="outline" onClick={retry}>
-            重试
-          </Button>
-        )}
-      </AlertDescription>
-    </Alert>
-  );
-}
-export function useMobile() {
-  const [mobile, setMobile] = useState(
-    () => window.matchMedia("(max-width: 767px)").matches,
-  );
-  useEffect(() => {
-    const query = window.matchMedia("(max-width: 767px)");
-    const update = () => setMobile(query.matches);
-    query.addEventListener("change", update);
-    return () => query.removeEventListener("change", update);
-  }, []);
-  return mobile;
-}

src/modules/assets/library/useAssetHash.ts

@@ -1,62 +0,0 @@
-import { useEffect, useState } from "react";
-
-const TAB_IDS = ["overview", "department", "region", "customer"] as const;
-const SECTION_IDS = ["inventory", "models", "flow"] as const;
-
-export type AssetTab = (typeof TAB_IDS)[number];
-export type AssetSection = (typeof SECTION_IDS)[number];
-
-interface AssetHashState {
-  tab: AssetTab;
-  section: AssetSection;
-}
-
-const DEFAULT_STATE: AssetHashState = { tab: "overview", section: "inventory" };
-
-const isTab = (value: string | undefined): value is AssetTab =>
-  Boolean(value) && (TAB_IDS as readonly string[]).includes(value as string);
-const isSection = (value: string | undefined): value is AssetSection =>
-  Boolean(value) && (SECTION_IDS as readonly string[]).includes(value as string);
-
-function parseHash(): AssetHashState {
-  const [first, second, third] = window.location.hash.slice(1).split("/");
-  if (first !== "assets") return DEFAULT_STATE;
-  return {
-    tab: isTab(second) ? second : "overview",
-    section: isSection(third) ? third : "inventory",
-  };
-}
-
-function writeHash(tab: AssetTab, section: AssetSection) {
-  const parts = ["assets", tab];
-  // 默认子页签不写入，保持 `#assets/<tab>` 简洁。
-  if (tab === "overview" && section !== "inventory") parts.push(section);
-  const hash = `#${parts.join("/")}`;
-  window.history.replaceState(
-    null,
-    "",
-    `${window.location.pathname}${window.location.search}${hash}`,
-  );
-}
-
-/**
- * 资产模块页签状态 ↔ URL hash 二级/三级段（`#assets/<tab>[/<section>]`）。
- * 默认值不写入 hash，刷新可恢复，链接可分享；与 Shell 的一级模块段兼容。
- */
-export function useAssetHash() {
-  const [state, setState] = useState<AssetHashState>(parseHash);
-
-  useEffect(() => {
-    const onChange = () => setState(parseHash());
-    window.addEventListener("hashchange", onChange);
-    return () => window.removeEventListener("hashchange", onChange);
-  }, []);
-
-  const update = (next: Partial<AssetHashState>) => {
-    const merged = { ...state, ...next };
-    writeHash(merged.tab, merged.section);
-    setState(merged);
-  };
-
-  return [state, update] as const;
-}

src/modules/energy/SubTabs.tsx

@@ -15,7 +15,7 @@ interface Props<T extends string> {
 
 export default function SubTabs<T extends string>({ tabs, active, onChange }: Props<T>) {
   return (
-    <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-0 md:px-6">
+    <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-12 md:px-6">
       <SegmentedNav tabs={tabs} active={active} onChange={onChange} />
     </div>
   );

src/modules/mileage/MileageModule.tsx

@@ -30,7 +30,7 @@ export default function MileageModule() {
       compactInfo
       hideHeader
     >
-      <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-0 md:px-6">
+      <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-12 md:px-6">
         <SegmentedNav tabs={MILEAGE_TABS} active={activeSubTab} onChange={setActiveSubTab} />
       </div>
 

src/shared/styles/apple-tokens.css

@@ -1,239 +0,0 @@
-/* ============================================================================
-   Apple Design Tokens — drop-in theme layer for the web
-   ----------------------------------------------------------------------------
-   Real Apple system values (colors, type, spacing, radii, materials, motion)
-   expressed as CSS custom properties. Import once at the root of your app:
-
-       @import "tokens.css";
-
-   Everything below is light-mode default; dark mode is applied automatically
-   via prefers-color-scheme AND an explicit [data-theme="dark"] override so you
-   can force a theme. Semantic tokens (--label, --bg, --fill-*) are what you
-   should reference in components — never hardcode a hex.
-   ============================================================================ */
-
-:root {
-  /* ---- Type: system font stacks -------------------------------------- */
-  /* -apple-system/BlinkMacSystemFont pull SF Pro on Apple platforms; the
-     rest degrade gracefully. "SF Pro Display" vs "Text" is handled by the OS
-     via optical sizing — we opt in with font-optical-sizing below. */
-  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
-    "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
-  --font-rounded: "SF Pro Rounded", -apple-system, "Nunito", system-ui, sans-serif;
-  --font-serif: "New York", ui-serif, Georgia, "Times New Roman", serif;
-  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
-
-  /* ---- Type scale: Apple's text styles, in rem (1rem = 16px base) -----
-     Each style is a *set*: size + weight + tracking + leading. See
-     references/typography.md. Tracking tightens as size grows; leading loosens
-     as size shrinks. Values are Apple's, converted pt→rem at 16px root. */
-  --text-large-title: 2.125rem;  /* 34pt */
-  --text-title-1:     1.75rem;   /* 28pt */
-  --text-title-2:     1.375rem;  /* 22pt */
-  --text-title-3:     1.25rem;   /* 20pt */
-  --text-headline:    1.0625rem; /* 17pt, semibold */
-  --text-body:        1.0625rem; /* 17pt */
-  --text-callout:     1rem;      /* 16pt */
-  --text-subhead:     0.9375rem; /* 15pt */
-  --text-footnote:    0.8125rem; /* 13pt */
-  --text-caption-1:   0.75rem;   /* 12pt */
-  --text-caption-2:   0.6875rem; /* 11pt */
-
-  --tracking-tight:  -0.022em;   /* large display text */
-  --tracking-snug:   -0.014em;   /* titles */
-  --tracking-normal:  0em;       /* body */
-  --tracking-wide:    0.01em;    /* small caps / footnotes */
-
-  --leading-tight:  1.05;        /* headlines */
-  --leading-snug:   1.2;
-  --leading-normal: 1.35;        /* body-ish */
-  --leading-relaxed: 1.5;        /* long-form reading */
-
-  --weight-regular:  400;
-  --weight-medium:   500;
-  --weight-semibold: 600;
-  --weight-bold:     700;
-
-  /* ---- Spacing: 4/8pt grid ------------------------------------------- */
-  --space-1:  0.125rem; /* 2  */
-  --space-2:  0.25rem;  /* 4  */
-  --space-3:  0.5rem;   /* 8  */
-  --space-4:  0.75rem;  /* 12 */
-  --space-5:  1rem;     /* 16 */
-  --space-6:  1.25rem;  /* 20 */
-  --space-7:  1.5rem;   /* 24 */
-  --space-8:  2rem;     /* 32 */
-  --space-9:  2.5rem;   /* 40 */
-  --space-10: 3rem;     /* 48 */
-  --space-12: 4rem;     /* 64 */
-
-  /* ---- Radii: Apple leans on generous, continuous corners ------------
-     iOS uses "continuous" curvature (a squircle), not a plain arc. On the web
-     you approximate it with a slightly larger border-radius; for hero elements
-     use the squircle recipe in references/tokens.md. Capsule = fully rounded. */
-  --radius-xs:  6px;
-  --radius-sm:  8px;
-  --radius-md:  12px;
-  --radius-lg:  16px;
-  --radius-xl:  22px;   /* iOS app-icon / large card feel */
-  --radius-2xl: 28px;
-  --radius-capsule: 999px;
-
-  /* ---- Elevation: soft, layered, low-contrast shadows ----------------
-     Apple shadows are diffuse and never harsh. Two-layer: a tight contact
-     shadow + a soft ambient one. Tune opacity down in dark mode. */
-  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.06);
-  --shadow-2: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
-  --shadow-3: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08);
-  --shadow-4: 0 16px 48px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10);
-  --shadow-glass: 0 8px 32px rgba(0,0,0,0.18); /* floating glass chrome */
-
-  /* ---- Motion: easing + duration tokens ------------------------------
-     Apple UI never uses the weak built-in ease-*. These curves are the ones
-     Apple's own interfaces and the best web recreations use. Springs cannot be
-     expressed in pure CSS — see references/motion-physics.md for the JS tokens
-     (damping/response) consumed by Motion and GSAP. NEVER use ease-in on UI:
-     it starts slow and feels laggy. */
-  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* default UI exit-of-motion */
-  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);     /* symmetric moves */
-  --ease-ios:    cubic-bezier(0.32, 0.72, 0, 1);      /* sheets/drawers (iOS) */
-  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);        /* quick, neutral */
-
-  --duration-instant: 100ms;  /* button press / tap feedback */
-  --duration-fast:    200ms;  /* tooltips, small popovers */
-  --duration-base:    300ms;  /* dropdowns, most UI (keep UI under 300ms) */
-  --duration-slow:    450ms;  /* modals, sheets, drawers */
-
-  /* ---- Semantic colors: LIGHT (defaults) ----------------------------- */
-  /* Accents (Apple system colors) */
-  --blue:   #007AFF;  --green:  #34C759;  --indigo: #5856D6;  --orange: #FF9500;
-  --pink:   #FF2D55;  --purple: #AF52DE;  --red:    #FF3B30;  --teal:   #30B0C7;
-  --cyan:   #32ADE6;  --yellow: #FFCC00;  --mint:   #00C7BE;  --brown:  #A2845E;
-  --accent: var(--blue);
-
-  /* Grays */
-  --gray-1: #8E8E93; --gray-2: #AEAEB2; --gray-3: #C7C7CC;
-  --gray-4: #D1D1D6; --gray-5: #E5E5EA; --gray-6: #F2F2F7;
-
-  /* Backgrounds (base → elevated) */
-  --bg:            #FFFFFF;
-  --bg-secondary:  #F2F2F7;
-  --bg-tertiary:   #FFFFFF;
-  --bg-grouped:    #F2F2F7;   /* settings-style grouped lists */
-
-  /* Labels (text) — Apple encodes hierarchy as opacity over a base ink */
-  --label:            rgba(0, 0, 0, 1);
-  --label-secondary:  rgba(60, 60, 67, 0.60);
-  --label-tertiary:   rgba(60, 60, 67, 0.30);
-  --label-quaternary: rgba(60, 60, 67, 0.18);
-
-  /* Separators & fills */
-  --separator:        rgba(60, 60, 67, 0.29);
-  --separator-opaque: #C6C6C8;
-  --fill-1: rgba(120, 120, 128, 0.20);  /* thick control fill */
-  --fill-2: rgba(120, 120, 128, 0.16);
-  --fill-3: rgba(120, 120, 128, 0.12);
-  --fill-4: rgba(120, 120, 128, 0.08);  /* thin, e.g. hover */
-
-  /* ---- Materials: the tint + blur pair per thickness ------------------
-     A "material" is a translucent tint color paired with a backdrop blur. Use
-     --material-*-tint as background and --material-*-blur inside backdrop-filter.
-     See references/liquid-glass.md for the full layered recipe (specular + rim). */
-  --material-ultrathin-tint: rgba(255, 255, 255, 0.44);
-  --material-thin-tint:      rgba(255, 255, 255, 0.60);
-  --material-regular-tint:   rgba(255, 255, 255, 0.72);
-  --material-thick-tint:     rgba(255, 255, 255, 0.84);
-  --material-blur:      20px;
-  --material-blur-thin: 12px;
-  --material-saturate:  180%;
-
-  color-scheme: light dark;
-}
-
-/* ============================================================================
-   DARK MODE — auto via prefers-color-scheme, plus [data-theme] overrides so
-   you can force light/dark regardless of OS setting.
-   ============================================================================ */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --blue:   #0A84FF;  --green:  #30D158;  --indigo: #5E5CE6;  --orange: #FF9F0A;
-    --pink:   #FF375F;  --purple: #BF5AF2;  --red:    #FF453A;  --teal:   #40C8E0;
-    --cyan:   #64D2FF;  --yellow: #FFD60A;  --mint:   #63E6E2;  --brown:  #AC8E68;
-
-    --gray-1: #8E8E93; --gray-2: #636366; --gray-3: #48484A;
-    --gray-4: #3A3A3C; --gray-5: #2C2C2E; --gray-6: #1C1C1E;
-
-    --bg:            #000000;
-    --bg-secondary:  #1C1C1E;
-    --bg-tertiary:   #2C2C2E;
-    --bg-grouped:    #000000;
-
-    --label:            rgba(255, 255, 255, 1);
-    --label-secondary:  rgba(235, 235, 245, 0.60);
-    --label-tertiary:   rgba(235, 235, 245, 0.30);
-    --label-quaternary: rgba(235, 235, 245, 0.16);
-
-    --separator:        rgba(84, 84, 88, 0.60);
-    --separator-opaque: #38383A;
-    --fill-1: rgba(120, 120, 128, 0.36);
-    --fill-2: rgba(120, 120, 128, 0.32);
-    --fill-3: rgba(120, 120, 128, 0.24);
-    --fill-4: rgba(120, 120, 128, 0.18);
-
-    --material-ultrathin-tint: rgba(30, 30, 32, 0.44);
-    --material-thin-tint:      rgba(30, 30, 32, 0.62);
-    --material-regular-tint:   rgba(30, 30, 32, 0.74);
-    --material-thick-tint:     rgba(30, 30, 32, 0.86);
-
-    --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
-    --shadow-2: 0 2px 8px rgba(0,0,0,0.36);
-    --shadow-3: 0 8px 24px rgba(0,0,0,0.44);
-    --shadow-4: 0 16px 48px rgba(0,0,0,0.52);
-    --shadow-glass: 0 8px 32px rgba(0,0,0,0.50);
-  }
-}
-
-/* Explicit dark override (force dark even in a light OS) */
-[data-theme="dark"] {
-  --blue:#0A84FF; --green:#30D158; --indigo:#5E5CE6; --orange:#FF9F0A;
-  --pink:#FF375F; --purple:#BF5AF2; --red:#FF453A; --teal:#40C8E0;
-  --cyan:#64D2FF; --yellow:#FFD60A; --mint:#63E6E2; --brown:#AC8E68;
-  --gray-1:#8E8E93; --gray-2:#636366; --gray-3:#48484A;
-  --gray-4:#3A3A3C; --gray-5:#2C2C2E; --gray-6:#1C1C1E;
-  --bg:#000; --bg-secondary:#1C1C1E; --bg-tertiary:#2C2C2E; --bg-grouped:#000;
-  --label:rgba(255,255,255,1); --label-secondary:rgba(235,235,245,0.6);
-  --label-tertiary:rgba(235,235,245,0.3); --label-quaternary:rgba(235,235,245,0.16);
-  --separator:rgba(84,84,88,0.6); --separator-opaque:#38383A;
-  --fill-1:rgba(120,120,128,0.36); --fill-2:rgba(120,120,128,0.32);
-  --fill-3:rgba(120,120,128,0.24); --fill-4:rgba(120,120,128,0.18);
-  --material-ultrathin-tint:rgba(30,30,32,0.44); --material-thin-tint:rgba(30,30,32,0.62);
-  --material-regular-tint:rgba(30,30,32,0.74); --material-thick-tint:rgba(30,30,32,0.86);
-}
-
-/* ============================================================================
-   BASE — sensible defaults so the tokens feel Apple-native immediately.
-   ============================================================================ */
-html { -webkit-text-size-adjust: 100%; }
-
-body {
-  margin: 0;
-  font-family: var(--font-sans);
-  font-optical-sizing: auto;            /* SF switches Text↔Display by size */
-  -webkit-font-smoothing: antialiased;  /* thinner, Apple-like rendering */
-  text-rendering: optimizeLegibility;
-  font-size: var(--text-body);
-  line-height: var(--leading-normal);
-  letter-spacing: var(--tracking-normal);
-  color: var(--label);
-  background: var(--bg);
-}
-
-/* Accessibility: respect the three reduced-* preferences everywhere. */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}