Files
PicAnalysis/CLAUDE.md
锦麟 王 813df6c738 feat: 完善图片上传和 OCR 处理功能
- 新增注册页面 (RegisterPage) 和设置页面 (SettingsPage)
- 实现多图片上传功能,支持 FormData 文件上传
- 添加 multer 中间件处理图片文件
- 实现 OCR 异步处理服务,自动触发文字识别
- 添加 OCR 处理状态轮询,显示处理进度
- 修复图片显示问题,拼接完整的后端 URL
- 添加图片重新处理 API (POST /api/images/:id/reprocess)
- 更新 Card 组件支持 extra 属性
- 创建 CLAUDE.md 项目文档

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-24 18:18:27 +08:00

197 lines
6.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## 项目概述
**PicAnalysis** 是一个图片 OCR 与智能文档管理系统支持从截图中提取文字、AI 智能分析标签分类,并将识别结果转化为待办事项或归档文档。
### 技术栈
- **前端**: React 19 + TypeScript + Vite + Tailwind CSS + Zustand + TanStack Query + React Router v7
- **后端**: Node.js + Express + TypeScript + Prisma ORM
- **数据库**: SQLite (开发) / PostgreSQL (生产)
- **认证**: JWT + bcrypt
- **测试**: Vitest (前端单元测试), Playwright (E2E 测试), Jest (后端测试)
## 开发命令
### 后端 (端口 4000)
```bash
cd backend
npm run dev # 启动开发服务器 (tsx watch)
npm run build # TypeScript 编译
npm run start # 运行生产构建
npm run test # 运行 Jest 测试
npm run test:watch # Jest 监视模式
npm run test:coverage # 测试覆盖率报告
npm run lint # ESLint 检查
npm run lint:fix # ESLint 自动修复
npm run prisma:generate # 生成 Prisma Client
npm run prisma:migrate # 运行数据库迁移
npm run prisma:studio # 打开 Prisma Studio
```
### 前端 (端口 3000)
```bash
cd frontend
npm run dev # 启动 Vite 开发服务器
npm run build # 构建生产版本
npm run preview # 预览生产构建
npm run test # 运行 Vitest 单元测试
npm run test:ui # Vitest UI 界面
npm run test:coverage # Vitest 覆盖率报告
npm run test:e2e # 运行 Playwright E2E 测试
npm run test:e2e:ui # Playwright UI 模式
npm run lint # ESLint 检查
```
### 数据库操作
```bash
cd backend
npx prisma db push # 推送 schema 到数据库 (开发环境)
npx prisma migrate dev # 创建并应用迁移
npx prisma studio # 可视化数据库管理界面
```
## 项目架构
### 后端架构
```
backend/src/
├── index.ts # Express 应用入口,路由挂载
├── controllers/ # 请求处理器 (Auth, Document, Todo, Image)
├── services/ # 业务逻辑层
│ ├── auth.service.ts # 认证逻辑 (注册/登录/验证)
│ ├── password.service.ts # 密码验证和强度检查
│ ├── ocr.service.ts # OCR 处理逻辑(置信度验证、重试)
│ ├── document.service.ts # 文档 CRUD
│ ├── todo.service.ts # 待办事项管理(三态工作流)
│ └── image.service.ts # 图片上传和处理
├── routes/ # API 路由定义
├── middleware/ # 中间件 (JWT 认证)
└── lib/prisma.ts # Prisma 客户端单例
```
**关键设计模式**:
- **分层架构**: Controller → Service → Prisma (数据层)
- **服务类**: 使用静态方法实现无状态业务逻辑
- **中间件**: JWT 认证中间件保护需要登录的路由
### 前端架构
```
frontend/src/
├── App.tsx # 路由配置,受保护路由包装
├── main.tsx # 应用入口
├── pages/ # 页面组件 (Login, Dashboard, Documents, Todos, Images)
├── components/ # 可复用 UI 组件 (Button, Input, Card, Layout)
├── services/ # API 服务层,与后端通信
│ └── api.ts # Axios 封装,拦截器处理 token
├── hooks/ # React Hooks (useAuth, useDocuments, useTodos, useImages)
├── stores/ # Zustand 状态管理
│ ├── authStore.ts # 认证状态持久化
│ └── uiStore.ts # UI 状态(通知等)
└── types/ # TypeScript 类型定义
```
**关键设计模式**:
- **受保护路由**: `<ProtectedRoute>` 组件检查认证状态
- **状态管理**: Zustand 负责全局状态TanStack Query 负责服务器状态
- **API 客户端**: Axios 拦截器自动添加 JWT token
### 数据模型
核心实体关系:
- **User** 拥有多个 Document, Todo, Image, Category, Tag
- **Document** 可关联多个 Image可生成多个 Todo
- **Image** 的 `document_id` 可为空(支持 OCR 失败的待处理图片)
- **Todo** 有三种状态: `pending``completed``confirmed`
## 待办事项三态工作流
待办状态流转是核心业务逻辑:
1. **pending** (未完成) - 新创建的待办,进行中的任务
2. **completed** (已完成) - 用户标记完成,可撤销回 pending
3. **confirmed** (已确认) - 完成后经过确认归档,最终状态
相关 API:
- `PATCH /api/todos/:id/complete` - 标记完成
- `PATCH /api/todos/:id/confirm` - 确认归档
- `PATCH /api/todos/:id/reopen` - 撤销到未完成
## OCR 降级处理
当 OCR 置信度低于阈值 (默认 0.3) 时:
1. 图片保存到数据库,`processing_status = 'failed'`
2. 不自动创建文档
3. 用户可在"待处理图片列表"中手动处理
查询待处理图片:
```sql
SELECT * FROM images
WHERE user_id = ? AND (document_id IS NULL OR processing_status = 'failed')
```
## 测试策略
### 后端测试 (Jest)
- 单元测试覆盖所有 Service 类
- 集成测试验证 API 端点
- 目标覆盖率: 80%+
### 前端测试
- **Vitest**: 组件和服务的单元测试
- **Playwright**: E2E 测试,跨浏览器测试 (Chrome, Firefox, Safari)
- 测试文件位于 `e2e/` 目录
## API 端点
### 认证
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
### 文档
- `GET /api/documents` - 获取文档列表
- `POST /api/documents` - 创建文档
- `DELETE /api/documents/:id` - 删除文档
### 待办
- `GET /api/todos` - 获取待办列表(支持 status 参数筛选)
- `POST /api/todos` - 创建待办
- `PATCH /api/todos/:id/complete` - 标记完成
- `PATCH /api/todos/:id/confirm` - 确认归档
- `DELETE /api/todos/:id` - 删除待办
### 图片
- `POST /api/images/upload` - 上传图片
- `GET /api/images` - 获取图片列表
## 环境变量
后端需要创建 `.env` 文件:
```
DATABASE_URL="file:./dev.db"
JWT_SECRET="your-secret-key"
PORT=4000
```
## 测试账号
```
用户名: testuser
密码: Password123@
```
## 当前开发状态
已完成功能:
- ✅ 用户认证系统 (JWT)
- ✅ 文档 CRUD
- ✅ 待办三态工作流
- ✅ 图片上传和 OCR 状态追踪
- ✅ 前后端单元测试 (148 个测试全部通过)
- ✅ E2E 测试框架
待开发功能 (P1 优先级)
- ⏳ OCR 集成 (Tesseract/PaddleOCR)
- ⏳ AI 分析功能 (GLM/MiniMax/DeepSeek)
- ⏳ 图片-文档-待办关联增强