init

src/components/layout/Sidebar.tsx

@@ -0,0 +1,73 @@
+import type { QuickActionType } from '../../data/mockData';
+import { Button } from '../ui';
+import { cls } from '../../utils/cls';
+
+export type SectionKey = 'home' | 'exam' | 'booking' | 'support';
+
+interface SidebarProps {
+  active: SectionKey;
+  onNavigate: (key: SectionKey) => void;
+  onQuickAction: (action: Exclude<QuickActionType, 'none'>) => void;
+}
+
+const IconHome = () => <span className='text-xs'>🏠</span>;
+const IconHospital = () => <span className='text-xs'>🏥</span>;
+const IconCalendar = () => <span className='text-xs'>📅</span>;
+const IconSupport = () => <span className='text-xs'>💬</span>;
+
+const NAV_ITEMS = [
+  { key: 'home', icon: IconHome, label: '首页' },
+  { key: 'exam', icon: IconHospital, label: '体检中心' },
+  { key: 'booking', icon: IconCalendar, label: '预约中心' },
+  { key: 'support', icon: IconSupport, label: '客服咨询' },
+] as const;
+
+export const Sidebar = ({ active, onNavigate, onQuickAction }: SidebarProps) => (
+  <aside className='bg-white border-r p-4 flex flex-col gap-4'>
+    <div>
+      <div className='text-base font-semibold'>圆和医疗 · 体检中心</div>
+      <div className='text-xs text-gray-500 mt-1'>iPad 首页驾驶舱预览</div>
+    </div>
+
+    <nav className='space-y-1'>
+      {NAV_ITEMS.map((item) => (
+        <Button
+          key={item.key}
+          onClick={() => onNavigate(item.key as SectionKey)}
+          className={cls('w-full justify-start', active === item.key && 'bg-gray-100 border-gray-900 text-gray-900')}
+        >
+          <item.icon />
+          <span>{item.label}</span>
+        </Button>
+      ))}
+    </nav>
+
+    <section className='mt-2 p-3 rounded-2xl border bg-gray-50/50'>
+      <div className='text-sm text-gray-700 mb-2'>快捷操作</div>
+      <div className='grid grid-cols-2 gap-2 text-xs'>
+        <Button className='justify-center py-1.5' onClick={() => onQuickAction('meal')}>
+          用餐登记
+        </Button>
+        <Button className='justify-center py-1.5' onClick={() => onQuickAction('vip')}>
+          太平VIP认证
+        </Button>
+        <Button className='justify-center py-1.5' onClick={() => onQuickAction('delivery')}>
+          报告寄送
+        </Button>
+        <Button className='justify-center py-1.5' onClick={() => onQuickAction('note')}>
+          备注窗
+        </Button>
+      </div>
+    </section>
+
+    <section className='mt-auto p-3 rounded-2xl border bg-gray-50/70 text-xs flex flex-col gap-2'>
+      <div className='text-sm font-medium flex items-center gap-2'>
+        <span>💻</span>
+        <span>客服 / IT 支持</span>
+      </div>
+      <div className='text-gray-600'>遇到系统问题可一键联系 IT / 运营支持。</div>
+    </section>
+  </aside>
+);
+
+

src/components/layout/TopBar.tsx

@@ -0,0 +1,37 @@
+import { Input } from '../ui';
+
+interface TopBarProps {
+  search: string;
+  onSearch: (value: string) => void;
+  enableSearch?: boolean;
+  operatorName?: string;
+  onLoginClick?: () => void;
+}
+
+export const TopBar = ({ search, onSearch, enableSearch = true, operatorName, onLoginClick }: TopBarProps) => (
+  <header className='flex items-center gap-3 p-4 border-b bg-white'>
+    <div className='flex-1 flex items-center gap-3'>
+      {enableSearch ? (
+        <div className='w-[420px] max-w-[60vw]'>
+          <Input
+            placeholder='搜索姓名 / 体检号 / 套餐'
+            value={search}
+            onChange={(e) => onSearch(e.target.value)}
+          />
+        </div>
+      ) : (
+        <div className='text-sm text-gray-500'>圆和医疗 · 体检驾驶舱</div>
+      )}
+    </div>
+    <div className='flex items-center gap-3 text-xs'>
+      <button
+        onClick={onLoginClick}
+        className='px-3 py-1 rounded-2xl border bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer'
+      >
+        操作员 · {operatorName || '未登录'}
+      </button>
+    </div>
+  </header>
+);
+
+