119 lines
3.2 KiB
Markdown
119 lines
3.2 KiB
Markdown
# 手术图文病历报告系统
|
||
|
||
基于 **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（图标）
|
||
|
||
---
|
||
|
||
## 快速开始
|
||
|
||
### 本地开发
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器（端口 3000）
|
||
npm run dev
|
||
```
|
||
|
||
### 环境变量
|
||
|
||
复制 `.env.example` 为 `.env.local` 并填入实际值：
|
||
|
||
```bash
|
||
cp .env.example .env.local
|
||
```
|
||
|
||
- `GEMINI_API_KEY`：Google Gemini API 密钥（预留 AI 功能）
|
||
- `APP_URL`：应用部署后的访问地址
|
||
|
||
---
|
||
|
||
## Docker 部署
|
||
|
||
项目已内置 `Dockerfile`、`nginx.conf` 和 `docker-compose.yaml`，可直接构建并运行：
|
||
|
||
```bash
|
||
# 构建镜像并启动容器
|
||
docker-compose up -d --build
|
||
|
||
# 访问应用
|
||
# http://localhost:8080
|
||
```
|
||
|
||
### 停止服务
|
||
|
||
```bash
|
||
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` 中（无后端哈希处理）。
|
||
- 若用于生产环境，请确保部署在内网或受信任环境中。
|