From 9362fa2b81f6f177f5669d33efaa9bec7a26b279 Mon Sep 17 00:00:00 2001 From: admin <572701190@qq.com> Date: Thu, 16 Apr 2026 16:39:42 +0800 Subject: [PATCH] backup at 2026-04-16-16-39-42 --- .env.example | 9 + .gitignore | 8 + AGENTS.md | 203 ++ Dockerfile | 14 + README.md | 118 + docker-compose.qnap.yml | 49 + docker-compose.yaml | 11 + index.html | 13 + nginx.conf | 18 + package-lock.json | 4362 ++++++++++++++++++++++++++++++++++ package.json | 35 + public/favicon.ico | Bin 0 -> 101215 bytes public/logo_square.png | Bin 0 -> 101215 bytes src/App.tsx | 27 + src/components/Sidebar.tsx | 81 + src/index.css | 127 + src/main.tsx | 10 + src/pages/Dashboard.tsx | 213 ++ src/pages/Login.tsx | 207 ++ src/pages/ReportEditor.tsx | 1327 +++++++++++ src/pages/ReportManage.tsx | 302 +++ src/pages/ReportView.tsx | 117 + src/pages/SystemSettings.tsx | 371 +++ src/pages/TemplateManage.tsx | 501 ++++ src/pages/UserManage.tsx | 652 +++++ src/types.ts | 78 + src/utils/defaultContent.ts | 160 ++ src/utils/print.ts | 53 + src/utils/storage.ts | 43 + tsconfig.json | 26 + vite.config.ts | 24 + 工程分析/工作流指南.md | 71 + 32 files changed, 9230 insertions(+) create mode 100644 .env.example create mode 100644 .gitignore create mode 100644 AGENTS.md create mode 100644 Dockerfile create mode 100644 README.md create mode 100644 docker-compose.qnap.yml create mode 100644 docker-compose.yaml create mode 100644 index.html create mode 100644 nginx.conf create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/logo_square.png create mode 100644 src/App.tsx create mode 100644 src/components/Sidebar.tsx create mode 100644 src/index.css create mode 100644 src/main.tsx create mode 100644 src/pages/Dashboard.tsx create mode 100644 src/pages/Login.tsx create mode 100644 src/pages/ReportEditor.tsx create mode 100644 src/pages/ReportManage.tsx create mode 100644 src/pages/ReportView.tsx create mode 100644 src/pages/SystemSettings.tsx create mode 100644 src/pages/TemplateManage.tsx create mode 100644 src/pages/UserManage.tsx create mode 100644 src/types.ts create mode 100644 src/utils/defaultContent.ts create mode 100644 src/utils/print.ts create mode 100644 src/utils/storage.ts create mode 100644 tsconfig.json create mode 100644 vite.config.ts create mode 100644 工程分析/工作流指南.md diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..7a550fe --- /dev/null +++ b/.env.example @@ -0,0 +1,9 @@ +# GEMINI_API_KEY: Required for Gemini AI API calls. +# AI Studio automatically injects this at runtime from user secrets. +# Users configure this via the Secrets panel in the AI Studio UI. +GEMINI_API_KEY="MY_GEMINI_API_KEY" + +# APP_URL: The URL where this applet is hosted. +# AI Studio automatically injects this at runtime with the Cloud Run service URL. +# Used for self-referential links, OAuth callbacks, and API endpoints. +APP_URL="MY_APP_URL" diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5a86d2a --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +node_modules/ +build/ +dist/ +coverage/ +.DS_Store +*.log +.env* +!.env.example diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..5215ebd --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,203 @@ +# 手术图文病历报告系统 —— AI 代理开发指南 + +> 本文档面向 AI 编码代理。若你正在阅读此文件,说明你对该项目一无所知,请仔细阅读后再修改代码。 + +--- + +## 1. 项目概述 + +**手术图文病历报告系统**(Gemini-图文报告系统-V1.1)是一款基于 **React 19 + TypeScript + Vite + Tailwind CSS 4** 开发的纯前端医疗图文报告管理应用。所有数据持久化在浏览器 `localStorage` 中,无需后端服务即可独立运行。 + +### 核心功能 +- **图文报告生成**:基于 `contentEditable` 的富文本编辑器,支持插入表格、图片占位符,可从本地或手术视频中截取关键帧插入报告。 +- **报告管理**:搜索、筛选、查看、编辑、打印、删除报告;支持历史版本回溯。 +- **模板管理**:创建和维护报告标准模板,新建报告时自动加载默认模板。 +- **用户管理**:基于角色的权限控制(超级管理员 / 管理员 / 医生)。 +- **系统设置**:配置视频自动抽帧百分比、AI API 接口地址、默认模板等全局参数。 + +### 默认测试账号 +| 账号 | 密码 | 角色 | +|---------|--------|------------| +| admin | 123456 | 超级管理员 | +| manager | 123456 | 管理员 | +| 0001 | 123456 | 医生 | + +--- + +## 2. 技术栈与运行时架构 + +### 技术栈 +- **框架**:React 19(函数组件 + Hooks) +- **路由**:React Router DOM 7(`BrowserRouter`) +- **构建工具**:Vite 6 +- **样式**:Tailwind CSS 4(使用 `@import "tailwindcss"` 和 `@theme` 语法) +- **图标**:Lucide React +- **动画**:Motion +- **语言**:TypeScript 5.8(`tsconfig.json` 中 `jsx: "react-jsx"`、`moduleResolution: "bundler"`) + +### 运行时架构 +- **纯前端 SPA**:无后端 API,所有业务逻辑在浏览器端执行。 +- **数据存储**:全部使用 `localStorage`(通过 `src/utils/storage.ts` 封装)和少量 `sessionStorage`(用于版本恢复)。 +- **安全模型**:客户端认证授权,密码以**明文**形式保存在 `localStorage` 中。项目设计用于内网或受信任环境,**切勿直接暴露到公网**。 + +--- + +## 3. 项目目录结构 + +``` +. +├── docker-compose.yaml # Docker Compose 配置(端口 8080:80) +├── docker-compose.qnap.yml # QNAP 专用 Docker Compose +├── Dockerfile # 多阶段构建:node:20-alpine -> nginx:alpine +├── nginx.conf # Nginx SPA 回退配置(try_files) +├── package.json # 依赖与脚本 +├── vite.config.ts # Vite 配置(含 GEMINI_API_KEY 注入) +├── tsconfig.json # TypeScript 配置(paths: "@/*": "./*") +├── index.html # Vite 入口 HTML +├── public/ # 静态资源(logo、favicon) +└── src/ + ├── App.tsx # 根组件与路由表 + ├── main.tsx # 应用入口(createRoot + StrictMode) + ├── index.css # 全局样式、Tailwind 主题、打印样式、编辑器专用样式 + ├── types.ts # 核心 TypeScript 类型定义 + ├── components/ + │ └── Sidebar.tsx # 左侧导航栏(按角色过滤菜单) + ├── pages/ + │ ├── Login.tsx # 登录页(初始化默认数据) + │ ├── Dashboard.tsx # 工作台概览(统计图表 + 快捷入口) + │ ├── ReportEditor.tsx # 图文报告编辑器(最复杂的页面) + │ ├── ReportManage.tsx # 报告列表管理 + │ ├── ReportView.tsx # 报告查看/打印 + │ ├── TemplateManage.tsx # 模板管理 + │ ├── UserManage.tsx # 用户管理 + │ └── SystemSettings.tsx # 系统设置 + └── utils/ + ├── storage.ts # localStorage/sessionStorage 封装 + ├── print.ts # 基于 iframe 的 A4 打印实现 + └── defaultContent.ts # 默认手术报告模板 HTML 字符串 +``` + +--- + +## 4. 构建、运行与部署 + +### 本地开发 +```bash +# 安装依赖 +npm install + +# 启动开发服务器(端口 3000,监听 0.0.0.0) +npm run dev +``` + +### 可用脚本(package.json) +| 脚本 | 作用 | +|-----------|-----------------------------------| +| `dev` | `vite --port=3000 --host=0.0.0.0` | +| `build` | `vite build`(输出到 `dist/`) | +| `preview` | `vite preview` | +| `lint` | `tsc --noEmit`(类型检查) | +| `clean` | `rm -rf dist` | + +### 环境变量 +复制 `.env.example` 为 `.env.local`(或 `.env`): +- `GEMINI_API_KEY`:Google Gemini API 密钥(预留 AI 功能,Vite 会在构建时通过 `define` 注入为 `process.env.GEMINI_API_KEY`)。 +- `APP_URL`:应用部署后的访问地址。 + +### Docker 部署 +```bash +# 构建并启动(访问 http://localhost:8080) +docker-compose up -d --build + +# 停止 +docker-compose down +``` +- **构建阶段**:`node:20-alpine` 执行 `npm ci` + `npm run build` +- **运行阶段**:`nginx:alpine` 托管 `dist/` 静态资源 +- **SPA 支持**:`nginx.conf` 已配置 `try_files $uri $uri/ /index.html;` + +--- + +## 5. 代码组织与开发约定 + +### 路由结构 +所有路由定义在 `src/App.tsx`: +- `/` → 登录页 +- `/dashboard` → 工作台 +- `/report-editor` → 新建报告(`?id=xxx` 为编辑) +- `/report-view/:id` → 查看报告 +- `/report-manage` → 报告管理 +- `/template-manage` → 模板管理 +- `/user-manage` → 用户管理 +- `/system-settings` → 系统设置 + +### 权限模型 +角色分为三种:`super`(超级管理员)、`admin`(管理员)、`user`(医生)。 +- 各页面在 `useEffect` 中读取 `storage.get('currentUser')`,未登录则 `navigate('/')`。 +- `Sidebar.tsx` 的 `navItems` 按 `roles` 数组过滤菜单。 +- `user` 角色只能查看/编辑自己创建的报告;`super`/`admin` 可查看全院报告。 + +### 数据持久化约定 +- **禁止直接调用 `localStorage`**,统一使用 `src/utils/storage.ts` 中的 `storage.get / storage.set / storage.remove`。 +- localStorage 中存储的 key 包括:`users`、`reports`、`templates`、`systemSettings`、`currentUser`、`multiSelectOptions`、`anesthesiaOptions`、`reportEditorDraft_{username}`、`restore_{reportId}`(sessionStorage)。 +- 报告编辑器会在 `beforeunload` 和 `visibilitychange` 时自动保存草稿到 `reportEditorDraft_{username}`。 + +### 样式约定 +- 全局使用 Tailwind 工具类;自定义设计变量定义在 `src/index.css` 的 `@theme` 中(如 `--color-bg`、`--color-accent`)。 +- 通用组件类在 `index.css` 的 `@layer components` 中定义:`.btn-accent`、`.card-minimal`、`.input-minimal`。 +- **编辑器样式**(`.editor-content`、`.editor-content-wrapper`、`.image-placeholder`)和 **打印样式**(`@media print`)集中在 `index.css` 中维护。 +- A4 打印尺寸为 `210mm × 297mm`,打印时通过 `visibility` 控制只显示 `.print-content` 区域。 + +### 编辑器实现细节 +- `ReportEditor.tsx` 使用原生 `contentEditable` + `document.execCommand` 实现富文本,而非第三方编辑器。 +- 图片通过 `.image-placeholder` 占位符插入,支持两种填充方式: + 1. 点击占位符上传本地图片(Base64 存入 HTML)。 + 2. 从右侧“视频分析”面板拖拽自动抽帧的截图到占位符中。 +- 视频中上传后会根据 `systemSettings.framePositions` 自动抽帧(通过 `