init

2025-11-26 09:50:49 +08:00
commit 8155c9f95d
43 changed files with 7687 additions and 0 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,14 @@
+#root {
+  min-height: 100vh;
+  /*文字无法选中*/
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-overflow-scrolling: touch;
+  -webkit-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,12 @@
+import './App.css';
+import { RouterProvider } from 'react-router-dom';
+
+import { router } from './router';
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;
+
+
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/booking/BookingModal.tsx
+++ b/src/components/booking/BookingModal.tsx
@@ -0,0 +1,61 @@
+import { BOOKING_DOCTORS } from '../../data/mockData';
+import { Button, Input } from '../ui';
+
+interface BookingModalProps {
+  doctor: (typeof BOOKING_DOCTORS)[number];
+  onClose: () => void;
+}
+
+export const BookingModal = ({ doctor, onClose }: BookingModalProps) => (
+  <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
+    <div className='w-[520px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
+      <div className='px-4 py-3 border-b flex items-center justify-between'>
+        <div className='font-semibold'>预约申请 · {doctor.name}</div>
+        <button className='text-xs text-gray-500' onClick={onClose}>
+          关闭
+        </button>
+      </div>
+      <div className='px-4 py-4 bg-gray-50/60 space-y-3 text-xs text-gray-700'>
+        <div className='grid grid-cols-2 gap-3'>
+          <div>
+            付费方式
+            <select className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
+              <option>自费</option>
+              <option>单位结算</option>
+            </select>
+          </div>
+          <div>
+            产品名称
+            <Input placeholder='如：专家门诊咨询' className='mt-1' />
+          </div>
+          <div>
+            是否定制
+            <select className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
+              <option>否</option>
+              <option>是</option>
+            </select>
+          </div>
+          <div>
+            期望预约时间
+            <Input placeholder='例如：2025-11-20 上午' className='mt-1' />
+          </div>
+        </div>
+        <div>
+          备注
+          <textarea
+            className='w-full mt-1 rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[72px]'
+            placeholder='可填写病情简要、既往史、特殊需求等信息'
+          />
+        </div>
+        <div className='flex items-center justify-between text-[11px] text-gray-500'>
+          <span>
+            医生：{doctor.name}（{doctor.dept}）
+          </span>
+          <Button>提交预约申请</Button>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+
--- a/src/components/booking/BookingSection.tsx
+++ b/src/components/booking/BookingSection.tsx
@@ -0,0 +1,104 @@
+import { BOOKING_DOCTORS } from '../../data/mockData';
+import { Card, CardContent, CardHeader } from '../ui';
+import { BookingModal } from './BookingModal';
+import { cls } from '../../utils/cls';
+
+interface BookingSectionProps {
+  selectedDay: number;
+  onSelectDay: (day: number) => void;
+  bookingDoctor: (typeof BOOKING_DOCTORS)[number] | null;
+  onSelectDoctor: (doctor: (typeof BOOKING_DOCTORS)[number]) => void;
+  onCloseModal: () => void;
+}
+
+export const BookingSection = ({
+  selectedDay,
+  onSelectDay,
+  bookingDoctor,
+  onSelectDoctor,
+  onCloseModal,
+}: BookingSectionProps) => (
+  <div className='grid grid-cols-12 gap-6'>
+    <div className='col-span-4 space-y-4'>
+      <Card>
+        <CardHeader>预约日历</CardHeader>
+        <CardContent>
+          <div className='grid grid-cols-6 gap-2 text-sm'>
+            {Array.from({ length: 30 }, (_, i) => i + 1).map((day) => (
+              <button
+                key={day}
+                onClick={() => onSelectDay(day)}
+                className={cls(
+                  'h-9 rounded-2xl border flex items-center justify-center',
+                  selectedDay === day ? 'bg-gray-900 text-white border-gray-900' : 'bg-white hover:bg-gray-50',
+                )}
+              >
+                {day}
+              </button>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent>
+          <div className='flex items-center justify-between text-sm'>
+            <span>当日预约数</span>
+            <span className='text-lg font-semibold'>{BOOKING_DOCTORS.length}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <div className='col-span-8 space-y-4'>
+      <Card>
+        <CardHeader>
+          <span>预约医生 · {selectedDay} 日</span>
+          <div className='flex items-center gap-2 text-xs'>
+            <span className='text-gray-500'>按科室筛选</span>
+            <select className='border rounded-2xl px-3 py-1 bg-white outline-none text-xs'>
+              <option>全部科室</option>
+              <option>内科</option>
+              <option>外科</option>
+            </select>
+          </div>
+        </CardHeader>
+      </Card>
+
+      <div className='grid grid-cols-2 gap-4'>
+        {BOOKING_DOCTORS.map((doctor) => {
+          const ratio = doctor.total ? (doctor.total - doctor.remain) / doctor.total : 0;
+          const percent = Math.round(Math.max(0, Math.min(1, ratio)) * 100);
+          return (
+            <button key={doctor.id} onClick={() => onSelectDoctor(doctor)} className='text-left w-full'>
+              <Card className='bg-gray-50/40'>
+                <CardContent>
+                  <div className='flex items-start justify-between mb-3'>
+                    <div>
+                      <div className='font-semibold mb-1'>{doctor.name}</div>
+                      <div className='text-xs text-gray-500'>{doctor.dept}</div>
+                    </div>
+                    <span className='px-3 py-1 rounded-2xl border text-xs text-gray-600 bg-white'>{doctor.period}</span>
+                  </div>
+                  <div className='text-xs text-gray-600 space-y-1 mb-2'>
+                    <div>当日号源：{doctor.total} 个</div>
+                    <div>
+                      剩余预约号 <span className='font-semibold text-gray-900'>{doctor.remain}</span>
+                    </div>
+                  </div>
+                  <div className='h-2 rounded-full bg-gray-200 overflow-hidden'>
+                    <div className='h-full bg-gray-900' style={{ width: `${percent}%` }} />
+                  </div>
+                </CardContent>
+              </Card>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+
+    {bookingDoctor && <BookingModal doctor={bookingDoctor} onClose={onCloseModal} />}
+  </div>
+);
+
+
--- a/src/components/exam/ExamModal.tsx
+++ b/src/components/exam/ExamModal.tsx
@@ -0,0 +1,375 @@
+import { useState } from 'react';
+
+import type { ExamClient, ExamModalTab } from '../../data/mockData';
+import { Badge, Button } from '../ui';
+
+interface ExamModalProps {
+  client: ExamClient;
+  tab: ExamModalTab;
+  onTabChange: (key: ExamModalTab) => void;
+  onClose: () => void;
+}
+
+export const ExamModal = ({ client, tab, onTabChange, onClose }: ExamModalProps) => {
+  const tabs: { key: ExamModalTab; label: string }[] = [
+    { key: 'detail', label: '详情' },
+    { key: 'sign', label: '签到' },
+    { key: 'addon', label: '加项' },
+    { key: 'print', label: '打印导检单' },
+  ];
+
+  const signDone = client.signStatus === '已登记' || client.checkedItems.includes('签到');
+  const addonDone = (client.addonCount || 0) > 0;
+  const printDone = !!client.guidePrinted;
+
+  const tabDone: Record<ExamModalTab, boolean> = {
+    detail: false,
+    sign: signDone,
+    addon: addonDone,
+    print: printDone,
+  };
+
+  return (
+    <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
+      <div className='w-[720px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
+        <div className='px-4 py-3 border-b flex items-center justify-between'>
+          <div className='flex items-center gap-3'>
+            <span className='font-semibold'>{client.name}</span>
+            <span className='text-xs text-gray-500'>体检号：{client.id}</span>
+            <Badge>{client.level}</Badge>
+          </div>
+          <button className='text-xs text-gray-500' onClick={onClose}>
+            关闭
+          </button>
+        </div>
+        <div className='px-4 py-2 border-b flex items-center gap-2 text-xs'>
+          {tabs.map((t) => {
+            const isActive = tab === t.key;
+            const isDone = tabDone[t.key];
+            return (
+              <button
+                key={t.key}
+                onClick={() => onTabChange(t.key)}
+                className={`px-3 py-1 rounded-2xl border text-xs ${
+                  isActive
+                    ? 'bg-gray-900 text-white border-gray-900'
+                    : isDone
+                    ? 'bg-gray-100 text-gray-400 border-gray-200'
+                    : 'bg-white text-gray-700'
+                }`}
+              >
+                {t.label}
+                {t.key === 'addon' && (client.addonCount || 0) > 0 && (
+                  <span className='ml-1 text-[10px] opacity-80'>({client.addonCount})</span>
+                )}
+                {((t.key === 'sign' && signDone) || (t.key === 'print' && printDone)) && <span className='ml-1'>✅</span>}
+              </button>
+            );
+          })}
+        </div>
+        <div className='px-4 py-4 bg-gray-50/60'>
+          {tab === 'detail' && <ExamDetailInfo client={client} />}
+          {tab === 'sign' && <ExamSignPanel />}
+          {tab === 'addon' && <ExamAddonPanel client={client} />}
+          {tab === 'print' && <ExamPrintPanel client={client} />}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ExamSignPanel = () => (
+  <div className='grid grid-cols-2 gap-4 text-sm'>
+    <div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
+      <div className='font-medium'>身份证上传</div>
+      <div className='text-xs text-gray-500'>支持身份证正反面拍照或读取设备，自动识别姓名、证件号等信息。</div>
+      <div className='flex gap-2 text-xs'>
+        <Button className='py-1.5 px-3'>上传身份证正面</Button>
+        <Button className='py-1.5 px-3'>上传身份证反面</Button>
+      </div>
+      <div className='text-[11px] text-gray-400'>上传后进入预览界面，确认无误后返回签到界面。</div>
+    </div>
+    <div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
+      <div className='font-medium'>体检知情同意书</div>
+      <div className='text-xs text-gray-500'>点击后弹出知情同意书全文及签名区域，签署完成后回到签到页面。</div>
+      <div className='flex gap-2 text-xs text-gray-600'>
+        <Badge>阅读记录</Badge>
+        <Badge>签名图片</Badge>
+      </div>
+      <Button className='py-1.5 px-3'>打开知情同意书并签署</Button>
+    </div>
+  </div>
+);
+
+const ExamAddonPanel = ({ client }: { client: ExamClient }) => (
+  <div className='grid grid-cols-2 gap-6 text-sm'>
+    <div>
+      <div className='font-medium mb-2'>当前套餐项目</div>
+      <ul className='space-y-1 text-xs text-gray-600'>
+        {client.checkedItems.concat(client.pendingItems).map((item, idx) => (
+          <li key={idx} className='flex items-center justify-between'>
+            <span>{item}</span>
+            <span className='text-gray-400 text-[11px]'>{client.checkedItems.includes(item) ? '已检查' : '未检查'}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+    <div>
+      <div className='font-medium mb-2'>可选加项</div>
+      <div className='space-y-2 text-xs text-gray-600'>
+        {['肿瘤标志物筛查', '甲状腺彩超', '骨密度检测'].map((label) => (
+          <label key={label} className='flex items-center gap-2'>
+            <input type='checkbox' className='rounded' /> {label}
+          </label>
+        ))}
+      </div>
+      <Button className='mt-3'>确认加项并生成费用</Button>
+    </div>
+  </div>
+);
+
+const ExamDetailInfo = ({ client }: { client: ExamClient }) => {
+  const [phone, setPhone] = useState((client['mobile' as keyof ExamClient] as string | undefined) || '137****9988');
+  const [marital, setMarital] = useState(
+    (client['maritalStatus' as keyof ExamClient] as string | undefined) || '未婚',
+  );
+  const [phoneEditing, setPhoneEditing] = useState(false);
+  const [maritalEditing, setMaritalEditing] = useState(false);
+
+  const customerChannel = client.customerType === '团客' ? '团体客户' : '散客客户';
+  const familyDoctor = (client['familyDoctor' as keyof ExamClient] as string | undefined) || '—';
+  const groupTag = client['groupTag' as keyof ExamClient] || (client.customerType === '团客' ? '团检' : '—');
+  const bookingTime = client['bookingTime' as keyof ExamClient] || '—';
+  const signTime = client['signTime' as keyof ExamClient] || '—';
+  const addonSummary = client['addonSummary' as keyof ExamClient] || '—';
+
+  return (
+    <div className='space-y-4 text-sm'>
+      <div className='flex items-center gap-4'>
+        <div className='w-14 h-14 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden'>
+          <div className='w-full h-full rounded-full bg-gray-300 flex items-center justify-center text-[10px] text-gray-500'>
+            头像
+          </div>
+        </div>
+        <div className='text-xs text-gray-500'>基础信息：头像、姓名、证件号、手机号等（点击图标可进行编辑）</div>
+      </div>
+
+      <div className='space-y-2 text-xs text-gray-700'>
+        <div className='font-medium text-gray-900'>基础信息</div>
+        <div className='grid grid-cols-2 gap-x-8 gap-y-1'>
+          <div>
+            姓名：<span className='text-gray-900'>{client.name}</span>
+          </div>
+          <div>
+            证件号：<span className='text-gray-900'>4401********1234</span>
+          </div>
+          <div className='flex items-center'>
+            <span>手机号：</span>
+            {!phoneEditing ? (
+              <span className='text-gray-900 flex items-center'>
+                {phone}
+                <button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setPhoneEditing(true)}>
+                  ✏️ 编辑
+                </button>
+              </span>
+            ) : (
+              <span className='flex items-center gap-1'>
+                <input
+                  className='w-28 rounded-xl border px-2 py-0.5 text-[11px] outline-none'
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                />
+                <button className='px-2 py-0.5 rounded-xl border text-[11px]' onClick={() => setPhoneEditing(false)}>
+                  保存
+                </button>
+              </span>
+            )}
+          </div>
+          <div>
+            性别/年龄：
+            <span className='text-gray-900'>
+              {client.gender} / {client.age}
+            </span>
+          </div>
+          <div>
+            客户级别：<span className='text-gray-900'>{client.level}</span>
+          </div>
+          <div>
+            所属渠道：<span className='text-gray-900'>{customerChannel}</span>
+          </div>
+          <div className='flex items-center'>
+            <span>婚姻状况：</span>
+            {!maritalEditing ? (
+              <span className='text-gray-900 flex items-center'>
+                {marital}
+                <button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setMaritalEditing(true)}>
+                  ✏️ 编辑
+                </button>
+              </span>
+            ) : (
+              <span className='flex items-center gap-1'>
+                <input
+                  className='w-20 rounded-xl border px-2 py-0.5 text-[11px] outline-none'
+                  value={marital}
+                  onChange={(e) => setMarital(e.target.value)}
+                />
+                <button className='px-2 py-0.5 rounded-xl border text-[11px]' onClick={() => setMaritalEditing(false)}>
+                  保存
+                </button>
+              </span>
+            )}
+          </div>
+          <div>
+            家医：<span className='text-gray-900'>{familyDoctor}</span>
+          </div>
+          <div>
+            团标签：<span className='text-gray-900'>{groupTag as string}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className='space-y-2 text-xs text-gray-700'>
+        <div className='font-medium text-gray-900'>预约信息</div>
+        <div className='grid grid-cols-2 gap-x-8 gap-y-1'>
+          <div>
+            预约时间：<span className='text-gray-900'>{bookingTime as string}</span>
+          </div>
+          <div>
+            签到时间：<span className='text-gray-900'>{signTime as string}</span>
+          </div>
+          <div>
+            已消耗时长：<span className='text-gray-900'>{client.elapsed}</span>
+          </div>
+          <div className='col-span-2'>
+            体检套餐名称：<span className='text-gray-900'>{client.packageName}</span>
+          </div>
+          <div className='col-span-2'>
+            加项内容：<span className='text-gray-900'>{addonSummary as string}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className='grid grid-cols-2 gap-4 text-xs'>
+        <div className='p-3 rounded-2xl bg-green-50 border'>
+          <div className='font-medium mb-2'>已查项目 共 {client.checkedItems.length} 项</div>
+          <div className='flex flex-wrap gap-2'>
+            {client.checkedItems.map((i) => (
+              <span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
+                {i}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className='p-3 rounded-2xl bg-red-50 border'>
+          <div className='font-medium mb-2'>弃检项目 共 0 项</div>
+          <div className='flex flex-wrap gap-2'>
+            <span className='text-gray-400 text-[11px]'>暂无弃检项目</span>
+          </div>
+        </div>
+        <div className='p-3 rounded-2xl bg-yellow-50 border'>
+          <div className='font-medium mb-2'>未查项目 共 {client.pendingItems.length} 项</div>
+          <div className='flex flex-wrap gap-2'>
+            {client.pendingItems.map((i) => (
+              <span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
+                {i}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className='p-3 rounded-2xl bg-blue-50 border'>
+          <div className='font-medium mb-2'>延期项目 共 0 项</div>
+          <div className='flex flex-wrap gap-2'>
+            <span className='text-gray-400 text-[11px]'>暂无延期项目</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ExamPrintPanel = ({ client }: { client: ExamClient }) => (
+  <div className='flex justify-center'>
+    <div className='w-[520px] max-w-[95%] bg-white rounded-2xl border shadow-sm px-6 py-4 text-xs text-gray-800'>
+      <div className='flex items-center justify-between border-b pb-3 mb-3'>
+        <div>
+          <div className='text-sm font-semibold'>圆和医疗体检中心 · 导检单预览</div>
+          <div className='text-[11px] text-gray-500 mt-1'>此为预览页面，实际打印效果以院内打印机为准。</div>
+        </div>
+        <div className='text-right text-[11px] text-gray-500'>
+          <div>体检号：{client.id}</div>
+          <div>日期：2025-11-18</div>
+        </div>
+      </div>
+
+      <div className='grid grid-cols-2 gap-y-1 gap-x-6 mb-3'>
+        <div>
+          姓名：<span className='font-medium'>{client.name}</span>
+        </div>
+        <div>
+          性别/年龄：
+          <span className='font-medium'>
+            {client.gender} / {client.age}
+          </span>
+        </div>
+        <div>
+          体检套餐：<span className='font-medium'>{client.packageName}</span>
+        </div>
+        <div>
+          客户类型：<span className='font-medium'>{client.customerType}</span>
+        </div>
+      </div>
+
+      <div className='mb-2 font-medium'>检查项目列表（预览）</div>
+      <table className='w-full border text-[11px] mb-3'>
+        <thead>
+          <tr className='bg-gray-50'>
+            <th className='border px-2 py-1 text-left'>序号</th>
+            <th className='border px-2 py-1 text-left'>检查项目</th>
+            <th className='border px-2 py-1 text-left'>科室</th>
+            <th className='border px-2 py-1 text-left'>备注</th>
+          </tr>
+        </thead>
+        <tbody>
+          {client.checkedItems.map((item, idx) => (
+            <tr key={`c-${idx}`}>
+              <td className='border px-2 py-1'>{idx + 1}</td>
+              <td className='border px-2 py-1'>{item}</td>
+              <td className='border px-2 py-1'>—</td>
+              <td className='border px-2 py-1'>已预约</td>
+            </tr>
+          ))}
+          {client.pendingItems.map((item, idx) => (
+            <tr key={`p-${idx}`}>
+              <td className='border px-2 py-1'>{client.checkedItems.length + idx + 1}</td>
+              <td className='border px-2 py-1'>{item}</td>
+              <td className='border px-2 py-1'>—</td>
+              <td className='border px-2 py-1'>待检查</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div className='grid grid-cols-2 gap-4 text-[11px] text-gray-600'>
+        <div>
+          <div className='mb-1 font-medium text-gray-800'>导检提示</div>
+          <ul className='list-disc ml-4 space-y-0.5'>
+            <li>请按导检单顺序前往相应科室检查。</li>
+            <li>如有不适或特殊情况，请及时告知导检护士。</li>
+            <li>部分检查项目需空腹或憋尿，请遵从现场指引。</li>
+          </ul>
+        </div>
+        <div className='flex flex-col items-end justify-between'>
+          <div className='text-right'>
+            <div>导检护士签名：________________</div>
+            <div className='mt-2'>打印时间：2025-11-18 09:30</div>
+          </div>
+          <div className='mt-4 w-24 h-24 border border-dashed flex items-center justify-center text-[10px] text-gray-400'>
+            条码 / 二维码
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+
--- a/src/components/exam/ExamSection.tsx
+++ b/src/components/exam/ExamSection.tsx
@@ -0,0 +1,131 @@
+import type { ExamClient, ExamModalTab } from '../../data/mockData';
+import { EXAM_STATS, EXAM_TAGS } from '../../data/mockData';
+import { Badge, Card, CardContent, CardHeader, InfoCard } from '../ui';
+import { cls } from '../../utils/cls';
+
+interface ExamSectionProps {
+  filteredClients: ExamClient[];
+  selectedExamClient: ExamClient;
+  examFilterTag: (typeof EXAM_TAGS)[number];
+  onFilterChange: (tag: (typeof EXAM_TAGS)[number]) => void;
+  onOpenModal: (id: string, tab: ExamModalTab) => void;
+}
+
+export const ExamSection = ({
+  filteredClients,
+  selectedExamClient,
+  examFilterTag,
+  onFilterChange,
+  onOpenModal,
+}: ExamSectionProps) => (
+  <div className='space-y-4'>
+    <Card>
+      <CardHeader>今日体检进度</CardHeader>
+      <CardContent>
+        <div className='grid grid-cols-4 gap-3'>
+          {EXAM_STATS.map(([label, value]) => (
+            <InfoCard key={label} label={label} value={value} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader>
+        <span>体检客户列表</span>
+        <div className='flex items-center gap-2 text-xs'>
+          {EXAM_TAGS.map((tag) => (
+            <button
+              key={tag}
+              onClick={() => onFilterChange(tag)}
+              className={cls(
+                'px-3 py-1 rounded-2xl border',
+                examFilterTag === tag ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-700',
+              )}
+            >
+              {tag}
+            </button>
+          ))}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className='grid grid-cols-3 gap-3 text-sm'>
+          {filteredClients.map((client) => {
+            const signDone = client.signStatus === '已登记' || client.checkedItems.includes('签到');
+            const addonCount = client.addonCount || 0;
+            const printDone = !!client.guidePrinted;
+            const openModal = (tab: ExamModalTab) => onOpenModal(client.id, tab);
+
+            return (
+              <button
+                key={client.id}
+                onClick={() => openModal('detail')}
+                className={cls(
+                  'text-left p-3 rounded-2xl border bg-white hover:bg-gray-50 flex flex-col gap-1',
+                  selectedExamClient.id === client.id && 'border-gray-900 bg-gray-50',
+                )}
+              >
+                <div className='flex items-center justify-between mb-1'>
+                  <span className='font-medium'>{client.name}</span>
+                  <Badge>{client.level}</Badge>
+                </div>
+                <div className='text-xs text-gray-500 truncate'>套餐：{client.packageName}</div>
+                <div className='flex items-center justify-between text-xs text-gray-500 mt-1'>
+                  <span>状态：{client.status}</span>
+                  <span>已耗时：{client.elapsed}</span>
+                </div>
+                <div className='mt-2 flex flex-wrap gap-1 text-[11px]'>
+                  <button
+                    type='button'
+                    className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openModal('detail');
+                    }}
+                  >
+                    <span>详情</span>
+                  </button>
+                  <button
+                    type='button'
+                    className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openModal('sign');
+                    }}
+                  >
+                    <span>签到</span>
+                    {signDone && <span>✅</span>}
+                  </button>
+                  <button
+                    type='button'
+                    className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openModal('addon');
+                    }}
+                  >
+                    <span>加项</span>
+                    {addonCount > 0 && <span className='opacity-80'>({addonCount})</span>}
+                  </button>
+                  <button
+                    type='button'
+                    className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openModal('print');
+                    }}
+                  >
+                    <span>打印导检单</span>
+                    {printDone && <span>✅</span>}
+                  </button>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+);
+
+
--- a/src/components/home/HomeSection.tsx
+++ b/src/components/home/HomeSection.tsx
@@ -0,0 +1,104 @@
+import { B1_ROWS, B1_SUMMARY, HOME_STATS, NORTH3_ROWS, NORTH3_SUMMARY, REVENUE_STATS } from '../../data/mockData';
+import { Card, CardContent, CardHeader, InfoCard } from '../ui';
+
+export const HomeSection = () => (
+  <div className='space-y-6'>
+    <Card>
+      <CardHeader>今日体检统计</CardHeader>
+      <CardContent>
+        <div className='grid grid-cols-5 gap-3'>
+          {HOME_STATS.map(([label, value]) => (
+            <InfoCard key={label} label={label} value={value} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader>营收数据统计</CardHeader>
+      <CardContent>
+        <div className='grid grid-cols-3 gap-3'>
+          {REVENUE_STATS.map(([label, value]) => (
+            <InfoCard key={label} label={label} value={value} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+
+    <div className='grid grid-cols-2 gap-4'>
+      <Card>
+        <CardHeader>B1 服务看板</CardHeader>
+        <CardContent>
+          <div className='grid grid-cols-3 gap-3 mb-3'>
+            <InfoCard label='当前客户总数' value={B1_SUMMARY.totalClients} />
+            <InfoCard label='待检人数' value={B1_SUMMARY.waiting} />
+            <InfoCard label='在检人数' value={B1_SUMMARY.inExam} />
+          </div>
+          <table className='w-full text-xs'>
+            <thead>
+              <tr className='text-gray-500 border-b'>
+                <th className='py-2 text-left'>科室</th>
+                <th className='py-2 text-left'>医生</th>
+                <th className='py-2 text-right'>已检人数</th>
+                <th className='py-2 text-right'>已检部位数</th>
+                <th className='py-2 text-right'>总时长</th>
+                <th className='py-2 text-right'>平均时长</th>
+                <th className='py-2 text-right'>在检</th>
+                <th className='py-2 text-right'>待检</th>
+              </tr>
+            </thead>
+            <tbody>
+              {B1_ROWS.map(([dept, doctor, done, inExam, waiting, avg]) => {
+                const parts = done * 3;
+                const totalTime = done * avg;
+                return (
+                  <tr key={dept} className='border-b last:border-b-0'>
+                    <td className='py-2'>{dept}</td>
+                    <td className='py-2'>{doctor}</td>
+                    <td className='py-2 text-right'>{done}</td>
+                    <td className='py-2 text-right'>{parts}</td>
+                    <td className='py-2 text-right'>{totalTime}</td>
+                    <td className='py-2 text-right'>{avg}</td>
+                    <td className='py-2 text-right'>{inExam}</td>
+                    <td className='py-2 text-right'>{waiting}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>北3服务看板</CardHeader>
+        <CardContent>
+          <div className='grid grid-cols-3 gap-3 mb-3'>
+            <InfoCard label='今日家医数' value={NORTH3_SUMMARY.totalDoctor} />
+            <InfoCard label='分配客户数' value={NORTH3_SUMMARY.totalAssigned} />
+            <InfoCard label='面诊数' value={NORTH3_SUMMARY.consult} />
+          </div>
+          <table className='w-full text-xs'>
+            <thead>
+              <tr className='text-gray-500 border-b'>
+                <th className='py-2 text-left'>家医</th>
+                <th className='py-2 text-right'>分配客户数</th>
+                <th className='py-2 text-right'>面诊数</th>
+              </tr>
+            </thead>
+            <tbody>
+              {NORTH3_ROWS.map(([name, total, consult]) => (
+                <tr key={name} className='border-b last:border-b-0'>
+                  <td className='py-2'>{name}</td>
+                  <td className='py-2 text-right'>{total}</td>
+                  <td className='py-2 text-right'>{consult}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+);
+
+
--- a/src/components/layout/Sidebar.tsx
+++ b/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>
+);
+
+
--- a/src/components/layout/TopBar.tsx
+++ b/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>
+);
+
+
--- a/src/components/modals/LoginModal.tsx
+++ b/src/components/modals/LoginModal.tsx
@@ -0,0 +1,169 @@
+import { useState, useEffect } from 'react';
+import { Button, Input } from '../ui';
+
+interface LoginModalProps {
+  onClose: () => void;
+  onLoginSuccess?: (phone: string) => void;
+}
+
+export const LoginModal = ({ onClose, onLoginSuccess }: LoginModalProps) => {
+  const [phone, setPhone] = useState('');
+  const [code, setCode] = useState('');
+  const [countdown, setCountdown] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // 验证码倒计时
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [countdown]);
+
+  // 验证手机号格式
+  const validatePhone = (phoneNumber: string): boolean => {
+    return /^1[3-9]\d{9}$/.test(phoneNumber);
+  };
+
+  // 发送验证码
+  const handleSendCode = async () => {
+    if (!phone) {
+      setError('请输入手机号');
+      return;
+    }
+    if (!validatePhone(phone)) {
+      setError('请输入正确的手机号');
+      return;
+    }
+
+    setError('');
+    setLoading(true);
+
+    // 模拟发送验证码 API 调用
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    setLoading(false);
+    setCountdown(60); // 60秒倒计时
+    // 实际项目中，这里应该调用后端 API 发送验证码
+    // 开发环境可以显示验证码（例如：123456）
+    // eslint-disable-next-line no-console
+    console.log('验证码已发送（开发环境：123456）');
+  };
+
+  // 登录
+  const handleLogin = async () => {
+    if (!phone) {
+      setError('请输入手机号');
+      return;
+    }
+    if (!validatePhone(phone)) {
+      setError('请输入正确的手机号');
+      return;
+    }
+    if (!code) {
+      setError('请输入验证码');
+      return;
+    }
+    if (code.length !== 6) {
+      setError('验证码应为6位数字');
+      return;
+    }
+
+    setError('');
+    setLoading(true);
+
+    // 模拟登录 API 调用
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    // 开发环境：验证码为 123456 时通过
+    if (code === '123456') {
+      setLoading(false);
+      onLoginSuccess?.(phone);
+      onClose();
+    } else {
+      setLoading(false);
+      setError('验证码错误，请重新输入');
+    }
+  };
+
+  const canSendCode = countdown === 0 && !loading && phone.length === 11;
+  const canLogin = phone && code && !loading;
+
+  return (
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/30' onClick={onClose}>
+      <div
+        className='w-[480px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className='px-4 py-3 border-b flex items-center justify-between'>
+          <div className='font-semibold'>操作员登录</div>
+          <button className='text-xs text-gray-500 hover:text-gray-700' onClick={onClose}>
+            关闭
+          </button>
+        </div>
+
+        <div className='px-4 py-6 bg-gray-50/60 space-y-4'>
+          <div className='space-y-2'>
+            <label className='text-xs text-gray-700 font-medium'>手机号</label>
+            <Input
+              type='tel'
+              placeholder='请输入手机号'
+              value={phone}
+              onChange={(e) => {
+                const value = e.target.value.replace(/\D/g, '').slice(0, 11);
+                setPhone(value);
+                setError('');
+              }}
+              maxLength={11}
+              className='text-base'
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <label className='text-xs text-gray-700 font-medium'>验证码</label>
+            <div className='flex gap-2'>
+              <Input
+                type='text'
+                placeholder='请输入6位验证码'
+                value={code}
+                onChange={(e) => {
+                  const value = e.target.value.replace(/\D/g, '').slice(0, 6);
+                  setCode(value);
+                  setError('');
+                }}
+                maxLength={6}
+                className='text-base flex-1'
+              />
+              <Button
+                onClick={handleSendCode}
+                disabled={!canSendCode}
+                className={!canSendCode ? 'opacity-50 cursor-not-allowed' : ''}
+              >
+                {countdown > 0 ? `${countdown}秒` : loading ? '发送中...' : '发送验证码'}
+              </Button>
+            </div>
+            <div className='text-[11px] text-gray-500'>
+              开发环境：验证码为 <span className='font-mono font-semibold'>123456</span>
+            </div>
+          </div>
+
+          {error && (
+            <div className='px-3 py-2 rounded-xl bg-red-50 border border-red-200 text-xs text-red-600'>{error}</div>
+          )}
+
+          <div className='pt-2'>
+            <Button
+              onClick={handleLogin}
+              disabled={!canLogin}
+              className={`w-full justify-center ${!canLogin ? 'opacity-50 cursor-not-allowed' : 'bg-gray-900 hover:bg-gray-800'}`}
+            >
+              {loading ? '· · ·' : '登录'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
--- a/src/components/modals/QuickActionModal.tsx
+++ b/src/components/modals/QuickActionModal.tsx
@@ -0,0 +1,144 @@
+import type { ExamClient, QuickActionType } from '../../data/mockData';
+import { EXAM_CLIENTS } from '../../data/mockData';
+import { Button, InfoCard, Input } from '../ui';
+
+interface QuickActionModalProps {
+  action: QuickActionType;
+  noteText: string;
+  onNoteChange: (v: string) => void;
+  onClose: () => void;
+  totalExamCount: number;
+  mealCount: number;
+  notMealCount: number;
+  mealDoneIds: string[];
+  onMealDone: (id: string) => void;
+}
+
+export const QuickActionModal = ({
+  action,
+  noteText,
+  onNoteChange,
+  onClose,
+  totalExamCount,
+  mealCount,
+  notMealCount,
+  mealDoneIds,
+  onMealDone,
+}: QuickActionModalProps) => {
+  const titleMap: Record<Exclude<QuickActionType, 'none'>, string> = {
+    meal: '用餐登记',
+    vip: '太平 VIP 认证说明',
+    delivery: '报告寄送登记',
+    note: '备注窗',
+  };
+
+  if (action === 'none') {
+    return null;
+  }
+
+  return (
+    <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
+      <div className='w-[560px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
+        <div className='px-4 py-3 border-b flex items-center justify-between'>
+          <div className='font-semibold'>{titleMap[action]}</div>
+          <button className='text-xs text-gray-500' onClick={onClose}>
+            关闭
+          </button>
+        </div>
+        <div className='px-4 py-4 bg-gray-50/60'>
+          {action === 'meal' && (
+            <div className='space-y-3'>
+              <div className='grid grid-cols-3 gap-3 text-xs'>
+                <InfoCard label='今日体检人数' value={totalExamCount} />
+                <InfoCard label='已用餐人数' value={mealCount} />
+                <InfoCard label='未用餐人数' value={notMealCount} />
+              </div>
+              <div className='text-xs text-gray-600 mt-2 mb-1'>选择已用餐客户进行登记：</div>
+              <div className='max-h-60 overflow-auto border rounded-2xl bg-white p-2 text-xs'>
+                {EXAM_CLIENTS.map((c: ExamClient) => {
+                  const checked = mealDoneIds.includes(c.id);
+                  return (
+                    <label
+                      key={c.id}
+                      className='flex items-center justify-between px-3 py-1.5 rounded-2xl hover:bg-gray-50 cursor-pointer'
+                    >
+                      <span>
+                        {c.name} <span className='text-gray-400 text-[11px]'>({c.id})</span>
+                      </span>
+                      <span className='flex items-center gap-2'>
+                        <span className='text-gray-400'>{c.status}</span>
+                        <input type='checkbox' checked={checked} onChange={() => onMealDone(c.id)} />
+                      </span>
+                    </label>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {action === 'vip' && (
+            <div className='flex gap-4 items-center'>
+              <div className='flex-1 text-xs text-gray-700 space-y-2'>
+                <p>通过「太平 VIP 认证」二维码，可完成太平渠道客户的身份绑定与权益确认。</p>
+                <ul className='list-disc ml-5 space-y-1'>
+                  <li>客户出示太平 APP 内会员二维码，由工作人员扫码完成认证。</li>
+                  <li>认证成功后，系统会自动标记为「太平 VIP 客户」，并记录在体检档案中。</li>
+                  <li>支持后续报告寄送、复查预约等专属服务。</li>
+                </ul>
+              </div>
+              <div className='w-40 h-40 rounded-3xl bg-white border flex items-center justify-center text-xs text-gray-500'>
+                太平认证二维码占位
+              </div>
+            </div>
+          )}
+
+          {action === 'delivery' && (
+            <div className='space-y-3 text-xs text-gray-700'>
+              <div className='grid grid-cols-2 gap-3'>
+                <div>
+                  收件人姓名
+                  <Input placeholder='请输入收件人姓名' className='mt-1' />
+                </div>
+                <div>
+                  联系电话
+                  <Input placeholder='用于快递联系' className='mt-1' />
+                </div>
+                <div className='col-span-2'>
+                  寄送地址
+                  <Input placeholder='请输入详细寄送地址' className='mt-1' />
+                </div>
+              </div>
+              <div>
+                备注说明
+                <textarea
+                  className='w-full mt-1 rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[72px]'
+                  placeholder='如需多份报告、加急寄送等，请在此备注'
+                />
+              </div>
+              <div className='text-right'>
+                <Button>保存寄送信息</Button>
+              </div>
+            </div>
+          )}
+
+          {action === 'note' && (
+            <div className='space-y-3 text-xs text-gray-700'>
+              <div>体检客户服务备注（仅内部可见）</div>
+              <textarea
+                className='w-full rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[96px]'
+                placeholder='例如：客户有既往疾病史、沟通偏好、特殊关怀需求等，可在此记录。'
+                value={noteText}
+                onChange={(e) => onNoteChange(e.target.value)}
+              />
+              <div className='text-right text-[11px] text-gray-500'>
+                备注内容会同步至客户详情页，供前台和导检护士查看。
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
--- a/src/components/support/SupportSection.tsx
+++ b/src/components/support/SupportSection.tsx
@@ -0,0 +1,42 @@
+import { Card, CardContent, CardHeader } from '../ui';
+
+export const SupportSection = () => (
+  <Card>
+    <CardHeader>客服咨询 · 圆圆客服台卡</CardHeader>
+    <CardContent>
+      <div className='grid grid-cols-[1.2fr_1fr] gap-6 items-center'>
+        <div className='space-y-3 text-sm text-gray-700'>
+          <p>通过「圆圆客服」二维码，客户可获得一站式健康服务：包含体检预约、报告查询、报告解读等。</p>
+          <ul className='list-disc ml-5 space-y-1 text-xs text-gray-600'>
+            <li>支持体检当天现场扫码添加，绑定客户信息</li>
+            <li>扫码后可在线查看体检进度、报告结果</li>
+            <li>提供一对一健康咨询与报告解读服务</li>
+          </ul>
+          <div className='text-xs text-gray-500'>注：实际系统中可上传设计好的「圆圆客服二维码台卡」图片，用于前台展示与打印。</div>
+        </div>
+
+        <div className='h-64 rounded-3xl overflow-hidden shadow-inner flex items-center justify-center bg-gradient-to-b from-[#152749] to-[#c73545]'>
+          <div className='flex flex-col items-center gap-3 text-white'>
+            <div className='text-[11px] tracking-[0.2em] opacity-80'>CIRCLE HARMONY · 圆和医疗</div>
+            <div className='text-sm font-medium'>圆圆客服 · 一站式健康服务</div>
+            <div className='w-28 h-28 rounded-full bg-white flex items-center justify-center'>
+              <div className='w-20 h-20 rounded-md bg-gray-200 flex items-center justify-center text-[10px] text-gray-500'>
+                二维码占位
+              </div>
+            </div>
+            <div className='text-sm font-semibold'>一对一专属服务</div>
+            <div className='px-4 py-1.5 rounded-full border border-white/70 text-[11px] flex gap-2'>
+              <span>服务预约</span>
+              <span>/</span>
+              <span>报告查询</span>
+              <span>/</span>
+              <span>报告解读</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+);
+
+
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+export const Badge = ({ children }: PropsWithChildren) => (
+  <span className='px-2 py-0.5 rounded-full border text-xs bg-gray-50'>{children}</span>
+);
+
+
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+import { cls } from '../../utils/cls';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, PropsWithChildren {
+  className?: string;
+}
+
+export const Button = ({ className = '', children, ...rest }: ButtonProps) => (
+  <button
+    className={cls(
+      'inline-flex items-center gap-2 px-4 py-2 rounded-2xl border text-sm bg-white hover:bg-gray-50 transition-colors',
+      className,
+    )}
+    {...rest}
+  >
+    {children}
+  </button>
+);
+
+
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from 'react';
+
+import { cls } from '../../utils/cls';
+
+interface CardProps extends PropsWithChildren {
+  className?: string;
+}
+
+export const Card = ({ className = '', children }: CardProps) => (
+  <div className={cls('rounded-2xl border bg-white shadow-sm', className)}>{children}</div>
+);
+
+export const CardHeader = ({ children }: PropsWithChildren) => (
+  <div className='px-5 pt-4 pb-2 font-medium flex items-center justify-between'>{children}</div>
+);
+
+export const CardContent = ({ children }: PropsWithChildren) => (
+  <div className='px-5 pb-5'>{children}</div>
+);
+
+
--- a/src/components/ui/InfoCard.tsx
+++ b/src/components/ui/InfoCard.tsx
@@ -0,0 +1,13 @@
+interface InfoCardProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}
+
+export const InfoCard = ({ label, value }: InfoCardProps) => (
+  <div className='p-3 rounded-xl border flex items-center justify-between text-sm'>
+    <span>{label}</span>
+    <span className='text-lg font-semibold'>{value}</span>
+  </div>
+);
+
+
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes } from 'react';
+
+import { cls } from '../../utils/cls';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export const Input = ({ className = '', ...rest }: InputProps) => (
+  <input
+    className={cls(
+      'w-full rounded-2xl border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-gray-200',
+      className,
+    )}
+    {...rest}
+  />
+);
+
+
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -0,0 +1,7 @@
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './InfoCard';
+export * from './Input';
+
+
--- a/src/data/mockData.ts
+++ b/src/data/mockData.ts
@@ -0,0 +1,138 @@
+export interface ExamClient {
+  id: string;
+  name: string;
+  gender: '男' | '女';
+  age: number;
+  level: string;
+  packageName: string;
+  status: '体检中' | '已签到' | '用餐';
+  elapsed: string;
+  checkedItems: string[];
+  pendingItems: string[];
+  timeSlot: '上午' | '下午';
+  vipType: '高客' | '普客';
+  signStatus: '已登记' | '未登记';
+  customerType: '团客' | '散客';
+  guidePrinted?: boolean;
+  addonCount?: number;
+  [key: string]: unknown;
+}
+
+export type ExamModalTab = 'detail' | 'sign' | 'addon' | 'print';
+export type QuickActionType = 'none' | 'meal' | 'vip' | 'delivery' | 'note';
+
+export const HOME_STATS: [string, number][] = [
+  ['今日预约', 80],
+  ['签到人数', 60],
+  ['在检人数', 25],
+  ['打印导检单', 40],
+  ['已完成人数', 30],
+];
+
+export const REVENUE_STATS: [string, string][] = [
+  ['体检收入', '¥ 86,000'],
+  ['加项收入', '¥ 12,400'],
+  ['整体收入', '¥ 98,400'],
+  ['目标收入', '¥ 120,000'],
+  ['完成百分比', '82%'],
+  ['缺口', '¥ 21,600'],
+];
+
+export const B1_ROWS: [string, string, number, number, number, number][] = [
+  ['B超1', '张医生', 6, 2, 2, 15],
+  ['B超2', '李医生', 5, 2, 1, 14],
+  ['B超3', '王医生', 4, 2, 2, 16],
+  ['耳鼻喉', '王医生', 10, 3, 2, 10],
+  ['外科', '周医生', 8, 3, 2, 20],
+];
+
+export const B1_SUMMARY = {
+  totalClients: B1_ROWS.reduce((s, r) => s + r[2] + r[3] + r[4], 0),
+  waiting: B1_ROWS.reduce((s, r) => s + r[4], 0),
+  inExam: B1_ROWS.reduce((s, r) => s + r[3], 0),
+};
+
+export const NORTH3_ROWS: [string, number, number][] = [
+  ['刘医生', 15, 9],
+  ['高医生', 12, 7],
+  ['马医生', 18, 10],
+];
+
+export const NORTH3_SUMMARY = {
+  totalDoctor: NORTH3_ROWS.length,
+  totalAssigned: NORTH3_ROWS.reduce((s, r) => s + r[1], 0),
+  consult: NORTH3_ROWS.reduce((s, r) => s + r[2], 0),
+};
+
+export const EXAM_CLIENTS: ExamClient[] = [
+  {
+    id: 'A001',
+    name: '张伟',
+    gender: '男',
+    age: 35,
+    level: 'VIP',
+    packageName: '高端入职体检套餐',
+    status: '体检中',
+    elapsed: '00:45',
+    checkedItems: ['签到', '更衣', '预检', '抽血'],
+    pendingItems: ['家医面诊', 'B超'],
+    timeSlot: '上午',
+    vipType: '高客',
+    signStatus: '已登记',
+    customerType: '团客',
+    guidePrinted: true,
+    addonCount: 2,
+  },
+  {
+    id: 'A002',
+    name: '李静',
+    gender: '女',
+    age: 29,
+    level: '普通',
+    packageName: '基础体检套餐',
+    status: '已签到',
+    elapsed: '00:10',
+    checkedItems: ['签到'],
+    pendingItems: ['更衣', '预检', '抽血'],
+    timeSlot: '上午',
+    vipType: '普客',
+    signStatus: '已登记',
+    customerType: '散客',
+    guidePrinted: false,
+    addonCount: 0,
+  },
+  {
+    id: 'A003',
+    name: '孙丽',
+    gender: '女',
+    age: 31,
+    level: 'VIP',
+    packageName: '健康管理套餐',
+    status: '用餐',
+    elapsed: '00:50',
+    checkedItems: ['签到', '更衣', '预检', '抽血', '家医面诊'],
+    pendingItems: ['B超'],
+    timeSlot: '下午',
+    vipType: '高客',
+    signStatus: '已登记',
+    customerType: '团客',
+    guidePrinted: true,
+    addonCount: 1,
+  },
+];
+
+export const EXAM_STATS: [string, number][] = [
+  ['预约人数', EXAM_CLIENTS.length],
+  ['已签到', EXAM_CLIENTS.filter((c) => c.status === '已签到').length],
+  ['体检中', EXAM_CLIENTS.filter((c) => c.status === '体检中').length],
+  ['用餐', EXAM_CLIENTS.filter((c) => c.status === '用餐').length],
+];
+
+export const EXAM_TAGS = ['全部', '上午', '下午', '高客', '普客', '已登记', '未登记', '散客', '团客'] as const;
+
+export const BOOKING_DOCTORS = [
+  { id: 'zhang', name: '张主任', dept: '内科 · 主任医师', period: '上午', total: 20, remain: 8 },
+  { id: 'wang', name: '王教授', dept: '外科 · 主任医师', period: '下午', total: 16, remain: 10 },
+];
+
+
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
+  color: #0f172a;
+  background-color: #f8fafc;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: #f8fafc;
+}
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -0,0 +1,120 @@
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
+
+import type { QuickActionType } from '../data/mockData';
+import { EXAM_CLIENTS } from '../data/mockData';
+import { QuickActionModal } from '../components/modals/QuickActionModal';
+import { LoginModal } from '../components/modals/LoginModal';
+import { Sidebar, type SectionKey } from '../components/layout/Sidebar';
+import { TopBar } from '../components/layout/TopBar';
+
+export interface MainLayoutContext {
+  search: string;
+  setSearch: (value: string) => void;
+}
+
+const sectionToRoute: Record<SectionKey, string> = {
+  home: '/home',
+  exam: '/exam',
+  booking: '/booking',
+  support: '/support',
+};
+
+const routeToSection = Object.entries(sectionToRoute).reduce<Record<string, SectionKey>>(
+  (acc, [section, route]) => {
+    acc[route] = section as SectionKey;
+    return acc;
+  },
+  {},
+);
+
+export const MainLayout = () => {
+  const [search, setSearch] = useState('');
+  const [quickAction, setQuickAction] = useState<QuickActionType>('none');
+  const [noteText, setNoteText] = useState('');
+  const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const [operatorName, setOperatorName] = useState<string>('');
+  const [mealDoneIds, setMealDoneIds] = useState<string[]>(
+    EXAM_CLIENTS.filter((c) => c.status === '用餐').map((c) => c.id),
+  );
+
+  const totalExamCount = EXAM_CLIENTS.length;
+  const mealCount = mealDoneIds.length;
+  const notMealCount = totalExamCount - mealCount;
+
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const activeSection: SectionKey = useMemo(() => {
+    const matched = Object.entries(routeToSection).find(([path]) => location.pathname.startsWith(path));
+    return (matched?.[1] || 'home') as SectionKey;
+  }, [location.pathname]);
+
+  const handleNavigate = (section: SectionKey) => {
+    navigate(sectionToRoute[section]);
+  };
+
+  const handleMealDone = (id: string) => {
+    setMealDoneIds((prev) => (prev.includes(id) ? prev : prev.concat(id)));
+  };
+
+  const handleLoginSuccess = (phone: string) => {
+    // 实际项目中应该从后端获取用户信息
+    // 这里暂时使用手机号后4位作为操作员名称
+    const displayName = phone.slice(-4);
+    setOperatorName(displayName);
+    // 可以存储到 localStorage 或状态管理中
+    localStorage.setItem('operatorPhone', phone);
+    localStorage.setItem('operatorName', displayName);
+  };
+
+  // 初始化时检查是否有已登录的操作员
+  useEffect(() => {
+    const savedName = localStorage.getItem('operatorName');
+    if (savedName) {
+      setOperatorName(savedName);
+    }
+  }, []);
+
+  return (
+    <div className='min-h-screen bg-gray-50 text-gray-900 grid grid-cols-[240px_1fr]'>
+      <Sidebar active={activeSection} onNavigate={handleNavigate} onQuickAction={setQuickAction} />
+
+      <div className='flex flex-col min-h-screen'>
+        <TopBar
+          search={search}
+          onSearch={setSearch}
+          enableSearch={activeSection === 'exam'}
+          operatorName={operatorName}
+          onLoginClick={() => setLoginModalOpen(true)}
+        />
+        <main className='p-6 space-y-6 flex-1 overflow-auto'>
+          <Outlet context={{ search, setSearch }} />
+        </main>
+      </div>
+
+      {loginModalOpen && (
+        <LoginModal
+          onClose={() => setLoginModalOpen(false)}
+          onLoginSuccess={handleLoginSuccess}
+        />
+      )}
+
+      {quickAction !== 'none' && (
+        <QuickActionModal
+          action={quickAction}
+          noteText={noteText}
+          onNoteChange={setNoteText}
+          onClose={() => setQuickAction('none')}
+          totalExamCount={totalExamCount}
+          mealCount={mealCount}
+          notMealCount={notMealCount}
+          mealDoneIds={mealDoneIds}
+          onMealDone={handleMealDone}
+        />
+      )}
+    </div>
+  );
+};
+
+
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/pages/BookingPage.tsx
+++ b/src/pages/BookingPage.tsx
@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import { BOOKING_DOCTORS } from '../data/mockData';
+import { BookingSection } from '../components/booking/BookingSection';
+
+export const BookingPage = () => {
+  const [selectedDay, setSelectedDay] = useState(1);
+  const [bookingDoctor, setBookingDoctor] = useState<(typeof BOOKING_DOCTORS)[number] | null>(null);
+
+  return (
+    <BookingSection
+      selectedDay={selectedDay}
+      onSelectDay={setSelectedDay}
+      bookingDoctor={bookingDoctor}
+      onSelectDoctor={setBookingDoctor}
+      onCloseModal={() => setBookingDoctor(null)}
+    />
+  );
+};
+
+
--- a/src/pages/ExamPage.tsx
+++ b/src/pages/ExamPage.tsx
@@ -0,0 +1,74 @@
+import { useMemo, useState } from 'react';
+import { useOutletContext } from 'react-router-dom';
+
+import type { ExamClient, ExamModalTab } from '../data/mockData';
+import { EXAM_CLIENTS, EXAM_TAGS } from '../data/mockData';
+import { ExamSection } from '../components/exam/ExamSection';
+import { ExamModal } from '../components/exam/ExamModal';
+import type { MainLayoutContext } from '../layouts/MainLayout';
+
+export const ExamPage = () => {
+  const { search } = useOutletContext<MainLayoutContext>();
+  const [examSelectedId, setExamSelectedId] = useState<string>('A001');
+  const [examPanelTab, setExamPanelTab] = useState<ExamModalTab>('detail');
+  const [examModalOpen, setExamModalOpen] = useState(false);
+  const [examFilterTag, setExamFilterTag] = useState<(typeof EXAM_TAGS)[number]>('全部');
+
+  const filteredClients = useMemo(() => {
+    return EXAM_CLIENTS.filter((c) => (c.name + c.packageName + c.id).toLowerCase().includes(search.trim().toLowerCase())).filter(
+      (c) => {
+        switch (examFilterTag) {
+          case '上午':
+            return c.timeSlot === '上午';
+          case '下午':
+            return c.timeSlot === '下午';
+          case '高客':
+            return c.vipType === '高客';
+          case '普客':
+            return c.vipType === '普客';
+          case '已登记':
+            return c.signStatus === '已登记';
+          case '未登记':
+            return c.signStatus !== '已登记';
+          case '散客':
+            return c.customerType === '散客';
+          case '团客':
+            return c.customerType === '团客';
+          default:
+            return true;
+        }
+      },
+    );
+  }, [search, examFilterTag]);
+
+  const selectedExamClient: ExamClient = EXAM_CLIENTS.find((c) => c.id === examSelectedId) || EXAM_CLIENTS[0];
+
+  const handleOpenModal = (id: string, tab: ExamModalTab) => {
+    setExamSelectedId(id);
+    setExamPanelTab(tab);
+    setExamModalOpen(true);
+  };
+
+  return (
+    <>
+      <ExamSection
+        filteredClients={filteredClients}
+        selectedExamClient={selectedExamClient}
+        examFilterTag={examFilterTag}
+        onFilterChange={setExamFilterTag}
+        onOpenModal={handleOpenModal}
+      />
+
+      {examModalOpen && (
+        <ExamModal
+          client={selectedExamClient}
+          tab={examPanelTab}
+          onTabChange={setExamPanelTab}
+          onClose={() => setExamModalOpen(false)}
+        />
+      )}
+    </>
+  );
+};
+
+
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,5 @@
+import { HomeSection } from '../components/home/HomeSection';
+
+export const HomePage = () => <HomeSection />;
+
+
--- a/src/pages/SupportPage.tsx
+++ b/src/pages/SupportPage.tsx
@@ -0,0 +1,5 @@
+import { SupportSection } from '../components/support/SupportSection';
+
+export const SupportPage = () => <SupportSection />;
+
+
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -0,0 +1,24 @@
+import { createBrowserRouter, Navigate } from 'react-router-dom';
+
+import { MainLayout } from './layouts/MainLayout';
+import { HomePage } from './pages/HomePage';
+import { ExamPage } from './pages/ExamPage';
+import { BookingPage } from './pages/BookingPage';
+import { SupportPage } from './pages/SupportPage';
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      { index: true, element: <Navigate to='/home' replace /> },
+      { path: 'home', element: <HomePage /> },
+      { path: 'exam', element: <ExamPage /> },
+      { path: 'booking', element: <BookingPage /> },
+      { path: 'support', element: <SupportPage /> },
+    ],
+  },
+  { path: '*', element: <Navigate to='/home' replace /> },
+]);
+
+
--- a/src/utils/cls.ts
+++ b/src/utils/cls.ts
@@ -0,0 +1,4 @@
+export const cls = (...xs: Array<string | false | null | undefined>) =>
+  xs.filter(Boolean).join(' ');
+
+
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>