feat(platform): add vehicle data management console

vehicle-data-platform/apps/web/src/layout/AppShell.tsx

@@ -0,0 +1,68 @@
+import { Badge, Button, Input, Nav, Space, Tag, Typography } from '@douyinfe/semi-ui';
+import {
+  IconActivity,
+  IconBarChartHStroked,
+  IconHistogram,
+  IconHome,
+  IconMapPin,
+  IconSearch,
+  IconServer,
+  IconSetting
+} from '@douyinfe/semi-icons';
+import type { ReactNode } from 'react';
+
+export type PageKey = 'dashboard' | 'vehicles' | 'realtime' | 'detail' | 'history' | 'mileage' | 'quality';
+
+const navItems = [
+  { itemKey: 'dashboard', text: '总览工作台', icon: <IconHome /> },
+  { itemKey: 'vehicles', text: '车辆台账', icon: <IconServer /> },
+  { itemKey: 'realtime', text: '实时状态', icon: <IconActivity /> },
+  { itemKey: 'detail', text: '车辆详情', icon: <IconSetting /> },
+  { itemKey: 'history', text: '历史查询', icon: <IconMapPin /> },
+  { itemKey: 'mileage', text: '里程分析', icon: <IconBarChartHStroked /> },
+  { itemKey: 'quality', text: '数据质量', icon: <IconHistogram /> }
+];
+
+export function AppShell({
+  activePage,
+  onChange,
+  children
+}: {
+  activePage: PageKey;
+  onChange: (page: PageKey) => void;
+  children: ReactNode;
+}) {
+  return (
+    <div className="vp-app">
+      <div className="vp-shell">
+        <aside className="vp-sidebar">
+          <div className="vp-brand">
+            <span className="vp-brand-mark" />
+            <span>车辆数据中台</span>
+          </div>
+          <Nav
+            selectedKeys={[activePage]}
+            items={navItems}
+            onSelect={({ itemKey }) => onChange(itemKey as PageKey)}
+            style={{ maxWidth: '100%' }}
+          />
+        </aside>
+        <main className="vp-main">
+          <header className="vp-topbar">
+            <Space spacing={12}>
+              <Input prefix={<IconSearch />} placeholder="搜索 VIN / 车牌 / 手机号" style={{ width: 320 }} />
+              <Button theme="solid" type="primary">查询车辆</Button>
+            </Space>
+            <Space spacing={12}>
+              <Tag color="blue">生产环境</Tag>
+              <Badge count={0} type="success">
+                <Typography.Text>链路正常</Typography.Text>
+              </Badge>
+            </Space>
+          </header>
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}