🦷 口腔诊所一站式管理系统

一个现代化、专业、美观的口腔诊所管理系统，涵盖从问诊、咨询、病例管理到治疗计划和收费管理的完整流程。

项目概览

全功能

局部截取_20251220_004818

大厅大屏

局部截取_20251220_005129-1766163122718

✨ 功能特性

🏠 首页 & 工作台

首页展示完整就诊流程（登记 → 问诊 → 病例 → 治疗 → 椅位 → 排队 → 收费 → 归档）
「功能模块」宫格卡片，一键跳转各业务页面
工作台展示实时运营数据、近期活动、今日预约与快捷操作卡片（卡片可点击跳转）

🔐 登录 / 注册与个人中心

现代化登录页：展示系统核心能力、专业团队与品牌故事
支持账号注册、登录状态持久化与路由保护
顶部个人菜单：显示当前用户姓名与角色，支持个人设置与退出登录

👥 患者与问诊管理

完整的患者档案管理：基本信息、联系方式、地址等
问诊记录支持初诊 / 复诊 / 急诊分类，记录主诉、症状、诊断与问诊状态
所有编辑、新建操作均使用自定义玻璃态弹窗（非浏览器原生弹窗）

📋 病例与治疗计划

病例记录口外/口内检查、影像结果、诊断及治疗方案
治疗计划支持多种类型：洁牙、补牙、根管、拔牙、种植、正畸等
治疗状态（计划中 / 进行中 / 已完成 / 已取消）与关键日期清晰展示

💰 收费管理

收费类型：咨询费、治疗费、药费、其他
支付方式：现金、刷卡、支付宝、微信、医保
收入统计卡片（总收入 / 今日收入 / 待收款）与详细收费记录

📅 预约管理

支持按患者、类型（咨询 / 治疗 / 复诊）、状态筛选预约
预约时间轴按日期 + 时间排序展示，便于前台与医生排班

🪑 椅位 & 排队管理

椅位管理：椅位状态（空闲 / 使用中 / 维护中 / 已预约）、当前患者、医生与起止时间
排队管理：支持普通 / 紧急 / VIP 优先级、不同就诊类型与自动叫号
从排队到椅位分配、治疗中到完成，形成闭环管理

📺 大屏接诊展示

独立大屏页：适合候诊区电视展示
顶部大标题「接诊大屏」居中 + 实时时间 / 日期
等候患者 / 治疗中 / 今日完成 / 椅位状态四大区域，超过 5 条时自动平滑滚动列表，真正“大屏化”体验

💵 价目表管理

预置一线城市口腔诊所常见项目：初诊检查、洁牙套餐、树脂补牙、显微根管、复杂拔牙、种植、隐形矫正、美学修复等
分类展示（咨询 / 洁牙 / 补牙 / 根管 / 拔牙 / 种植 / 正畸 / 美白 / 其他），每项含价格、单位、预计时长与描述
顶部「数字化口腔诊所标准价目」总览卡片 + 统计（在售项目、平均价格、高价值套餐）

👨‍⚕️ 医师介绍 & 学习课程

医师介绍：卡片化展示医师头像、职称、专业领域、学历、从业经验、荣誉成就与联系方式
± 学习课程：左侧菜单新增「学习课程」页，内含 Jasper Academy 学习中心
学习中心内以卡片形式整理国内外口腔课程/文献/社区/考试资源（种植、儿牙、正畸、主治与执业考试等）

🤖 智能助手 & 护牙小贴士

右下角悬浮智能助手「Jasper.gao」，点击后侧滑出聊天面板，用于快速问答与操作指导
左下角可拖拽的「护牙小宝贝」看板娘：周期性滚动护牙小贴士，支持展开/收起，增强品牌亲和力

🧊 统一弹窗与交互体验

所有删除 / 重要操作统一使用自定义 ConfirmDialog（玻璃态卡片 + 渐变头部 + 可爱图标），彻底告别 alert/confirm
所有编辑 / 新建表单使用统一 Modal 组件，居中、圆角、阴影与动画风格统一

🚀 快速开始

环境要求

Node.js >= 16.0.0
npm >= 7.0.0 或 yarn >= 1.22.0

安装步骤

安装依赖

npm install

启动开发服务器

npm run dev

访问应用
打开浏览器访问 http://localhost:3000

构建生产版本

npm run build

构建完成后，文件将输出到 dist 目录。

预览生产构建

npm run preview

🛠️ 技术栈

前端框架: React 18
构建工具: Vite
语言: TypeScript
样式: Tailwind CSS
路由: React Router v6
状态管理: Zustand (带持久化)
图标: Lucide React
日期处理: date-fns

📁 项目结构

dental-clinic-system/
├── src/
│   ├── components/       # 可复用组件
│   │   ├── Layout.tsx    # 主布局（侧边栏 + 顶部栏）
│   │   ├── Button.tsx    # 按钮组件
│   │   ├── Card.tsx      # 卡片组件
│   │   ├── Modal.tsx     # 通用模态框
│   │   ├── ConfirmDialog.tsx # 统一确认弹窗
│   │   ├── ChatAssistant.tsx # 右下角智能助手
│   │   └── ToothMascot.tsx   # 护牙小宝贝看板娘
│   ├── pages/            # 页面组件
│   │   ├── Home.tsx           # 首页（流程图 + 功能总览 + 学习资源）
│   │   ├── Dashboard.tsx      # 工作台
│   │   ├── Patients.tsx       # 患者管理
│   │   ├── Consultations.tsx  # 问诊咨询
│   │   ├── MedicalRecords.tsx # 病例管理
│   │   ├── Treatments.tsx     # 治疗计划
│   │   ├── Payments.tsx       # 收费管理
│   │   ├── Appointments.tsx   # 预约管理
│   │   ├── Chairs.tsx         # 椅位管理
│   │   ├── Queue.tsx          # 排队管理
│   │   ├── PriceList.tsx      # 价目表管理
│   │   ├── Display.tsx        # 接诊大屏展示
│   │   ├── Doctors.tsx        # 医师介绍
│   │   ├── Academy.tsx        # 学习课程中心（Jasper Academy）
│   │   ├── Login.tsx          # 登录页
│   │   ├── Register.tsx       # 注册页
│   │   └── Settings.tsx       # 个人设置
│   ├── store/           # 状态管理
│   │   └── useStore.ts  # Zustand store
│   ├── types/           # TypeScript 类型定义
│   │   └── index.ts
│   ├── App.tsx          # 主应用组件
│   ├── main.tsx         # 应用入口
│   └── index.css        # 全局样式
├── public/              # 静态资源
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
├── vite.config.ts       # Vite 配置
├── tailwind.config.js   # Tailwind 配置
└── README.md            # 项目说明

🎨 设计特色

现代化UI: 采用渐变色彩和玻璃态效果
响应式设计: 完美适配各种屏幕尺寸
流畅动画: 平滑的过渡和交互动画
专业配色: 医疗主题的配色方案
直观导航: 清晰的侧边栏导航和面包屑

💾 数据存储

系统使用 Zustand 的持久化中间件，数据自动保存到浏览器的 localStorage 中。所有数据在本地存储，无需后端服务器。

🔒 隐私和安全

所有数据存储在本地浏览器
不会上传任何数据到外部服务器
建议定期备份数据（导出功能可后续添加）

📝 使用说明

添加患者

进入"患者管理"页面
点击"新增患者"按钮
填写患者基本信息
保存

创建问诊记录

进入"问诊咨询"页面
点击"新增问诊"
选择患者并填写问诊信息
保存记录

管理病例

进入"病例管理"页面
创建新病例或编辑现有病例
填写详细的检查结果和诊断
制定治疗方案

创建治疗计划

进入"治疗计划"页面
选择患者和关联病例
填写治疗信息
跟踪治疗进度

收费管理

进入"收费管理"页面
创建收费记录
选择支付方式
查看收入统计

预约管理

进入"预约管理"页面
创建新预约
管理预约状态
查看即将到来的预约

🚧 未来计划

📄 许可证

MIT License

👨‍💻 开发

欢迎提交 Issue 和 Pull Request！

注意: 这是一个演示系统，数据存储在浏览器本地。在生产环境中使用前，请考虑添加后端服务和数据库支持。

口腔诊所管理系统（给媳妇）