手术图文病历报告系统
基于 React 19 + TypeScript + Vite + Tailwind CSS 开发的医疗图文报告管理前端应用。
适用于医院场景，支持手术记录图文报告的撰写、视频关键帧抽取、模板管理以及基于角色的用户权限控制。
功能特性
- 图文报告生成：富文本编辑器撰写手术记录，支持本地上传图片或从手术视频中截取关键帧插入报告。
- 报告管理：搜索、筛选、查看、编辑、打印和删除报告。
- 模板管理：创建和维护报告标准模板，新建报告时可自动加载默认模板。
- 用户管理：超级管理员可创建/编辑/删除用户，分配角色和可视模板权限。
- 系统设置：配置视频抽帧百分比位置、AI API 接口地址、默认模板等全局参数。
- 数据持久化：所有数据存储在浏览器
localStorage中，无需后端服务即可独立运行。
技术栈
- React 19
- React Router DOM 7
- TypeScript 5.8
- Vite 6
- Tailwind CSS 4
- Lucide React（图标）
快速开始
本地开发
# 安装依赖
npm install
# 启动开发服务器（端口 3000）
npm run dev
环境变量
复制 .env.example 为 .env.local 并填入实际值：
cp .env.example .env.local
GEMINI_API_KEY：Google Gemini API 密钥（预留 AI 功能）APP_URL：应用部署后的访问地址
Docker 部署
项目已内置 Dockerfile、nginx.conf 和 docker-compose.yaml，可直接构建并运行：
# 构建镜像并启动容器
docker-compose up -d --build
# 访问应用
# http://localhost:8080
停止服务
docker-compose down
构建说明
- 构建阶段：使用
node:20-alpine执行npm ci和npm run build - 运行阶段：使用
nginx:alpine托管dist/静态文件 - SPA 支持：
nginx.conf已配置try_files路由回退，刷新页面不 404
默认测试账号
| 账号 | 密码 | 角色 |
|---|---|---|
| admin | 123456 | 超级管理员 |
| manager | 123456 | 管理员 |
| doctor | 123456 | 医生 |
项目结构
.
├── docker-compose.yaml # Docker Compose 配置
├── Dockerfile # 多阶段构建镜像
├── nginx.conf # Nginx SPA 路由配置
├── package.json # 项目依赖与脚本
├── public/ # 静态资源（logo、favicon）
├── src/
│ ├── components/ # 公共组件
│ ├── pages/ # 页面组件
│ ├── utils/ # 工具函数（storage、print、defaultContent）
│ ├── App.tsx # 根组件与路由
│ ├── main.tsx # 应用入口
│ ├── index.css # 全局样式与 Tailwind 主题
│ └── types.ts # TypeScript 类型定义
└── index.html # Vite 入口 HTML
安全提示
- 本应用为纯前端应用，所有认证和授权逻辑在客户端执行。
- 用户密码以明文形式保存在浏览器
localStorage中（无后端哈希处理）。 - 若用于生产环境，请确保部署在内网或受信任环境中。