互联网医院挂号移动端产品系统

本项目面向普通患者及就医人群的移动端互联网医院场景。传统就医流程中，患者往往需要现场排队挂号、窗口缴费、多次往返取报告，耗时长、体验差，尤其在节假日和热门科室号源紧张时问题更为突出。本系统以手机端 Web 应用为交互载体，将用户登录、预约挂号、在线缴费、检查报告查询、个人中心等功能整合为一体，适用于患者日常门诊预约、复诊挂号、费用结算、报告查阅及个人信息管理等就医场景，帮助医院提升服务效率，帮助患者实现"少排队、少跑腿、随时查"的便捷就医体验。

系统以底部 Tab 导航为框架，包含五大核心模块：
【用户登录】支持手机号+短信验证码登录方式，含验证码倒计时发送、登录加载状态及用户协议/隐私政策提示，采用渐变医疗风格 UI 设计。
【首页】展示医院基本信息（名称、等级、评分、地址、电话）、消息通知（预约提醒、报告通知）、便民服务快捷入口（预约挂号、急诊预约、在线缴费、检查报告、体检预约、科室导航、在线咨询、在线客服）、今日数据统计（预约挂号/在线咨询/报告查询数量）及医院概况（科室数、医生数）。
【预约挂号】支持科室/医生关键词搜索；提供内科、外科、专科、儿科等一级科室及二级子科室联动选择；展示医生列表（姓名、职称、科室、从医年限、评分、专长标签、挂号费用、可预约状态）；预约弹层支持未来7天日期选择与分时段号源选择，一键确认预约。
【医疗缴费】展示待缴费总额统计与一键支付；支持支付宝、微信支付、银联、医院卡四种支付方式切换；待缴费账单明细（诊疗费/检查费/药费分类展示）及已缴费历史记录查询。
【检查报告】报告列表展示（血常规、CT、心电图等），含报告状态（已完成/处理中）、科室/医生/日期信息、结果摘要，支持在线查看与下载。
【个人中心】用户信息展示（姓名、手机号、会员等级）、功能菜单（我的预约、我的账单、设置、帮助中心）及退出登录。全系统采用响应式设计，适配各类移动端屏幕尺寸。

【技术架构】采用 React 19 + TypeScript + Vite 单页应用架构，通过 App.tsx 统一管理登录状态与 Tab 页面切换，各业务模块拆分为独立组件（LoginPage、HomePage、AppointmentPage、PaymentPage、ReportsPage、ProfilePage、BottomNav），全局样式集中于 styles/globals.css，预约模块使用独立 CSS 文件实现复杂交互布局。
【实现亮点】（1）移动端优先 UI 设计，采用医疗蓝主题色与卡片式布局，登录页渐变背景与装饰元素营造现代医疗品牌感；（2）二级科室联动选择机制，一级科室展开后展示子科室及可用医生数量，支持搜索过滤与医生详情卡片展示；（3）预约弹层交互，含日期横向滚动选择、时间段网格布局及号源可用/已满状态区分；（4）缴费模块支持多支付方式单选切换、待缴/已缴账单分类展示及一键合并支付；（5）底部 Tab 导航固定布局，Lucide React 图标统一视觉风格，全页面响应式适配。