手术图文病历报告系统

基于 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 中（无后端哈希处理）。
• 若用于生产环境，请确保部署在内网或受信任环境中。