init

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>
+);
+
+