# 手术图文病历报告系统

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