yuanhe/ipad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
YI FANG
2025-11-26 09:50:49 +08:00
commit 8155c9f95d
43 changed files with 7687 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/booking/BookingModal.tsx Normal file
View File

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

104
src/components/booking/BookingSection.tsx Normal file
View File

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

375
src/components/exam/ExamModal.tsx Normal file
View File

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

131
src/components/exam/ExamSection.tsx Normal file
View File

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

104
src/components/home/HomeSection.tsx Normal file
View File

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

73
src/components/layout/Sidebar.tsx Normal file
View File

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

37
src/components/layout/TopBar.tsx Normal file
View File

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

169
src/components/modals/LoginModal.tsx Normal file
View File

@@ -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>
);
};

144
src/components/modals/QuickActionModal.tsx Normal file
View File

@@ -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>
);
};

42
src/components/support/SupportSection.tsx Normal file
View File

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

7
src/components/ui/Badge.tsx Normal file
View File

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

21
src/components/ui/Button.tsx Normal file
View File

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

21
src/components/ui/Card.tsx Normal file
View File

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

13
src/components/ui/InfoCard.tsx Normal file
View File

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

19
src/components/ui/Input.tsx Normal file
View File

@@ -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}
/>
);

7
src/components/ui/index.ts Normal file
View File

@@ -0,0 +1,7 @@
export * from './Badge';
export * from './Button';
export * from './Card';
export * from './InfoCard';
export * from './Input';