Files
cutThink_lite/docs/PHASE3.md
Claude e2ea309ee6 feat: CutThenThink v3.0 初始版本
完整实现 Tauri + Vanilla JS 轻量级截图工具

Phase 1 - 项目搭建
- Tauri 2.x 项目初始化
- Vite 前端项目搭建
- 基础 UI 框架(CSS 变量、组件库)
- 构建配置优化

Phase 2 - 核心截图功能
- 全屏/区域/窗口截图
- 截图预览和管理
- 文件命名和缩略图
- 全局快捷键集成

Phase 3 - 上传与存储
- 多图床上传(GitHub/Imgur/自定义)
- 配置管理系统
- SQLite 数据库

Phase 4 - OCR 集成
- 云端 OCR(百度/腾讯云)
- 插件管理系统
- 本地 OCR 插件(Go)
- OCR 结果处理

Phase 5 - AI 分类系统
- Claude/OpenAI API 集成
- Prompt 模板引擎
- 模板管理界面
- 自动分类流程

Phase 6 - 历史记录与管理
- 图库视图(网格/列表)
- 搜索与筛选
- 批量操作
- 导出功能(JSON/CSV/ZIP)

Phase 7 - 打包与发布
- 多平台构建配置
- CI/CD 工作流
- 图标和资源
- 安装包配置

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

251 lines
6.6 KiB
Markdown
Raw Permalink 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.
# Phase 3 - 上传与存储实现说明
## 概述
本阶段实现了多图床上传支持、配置管理和数据库基础功能,为 CutThenThink Lite 提供了完整的图片上传和数据管理能力。
## 已实现的功能
### 3.1 多图床上传支持 (`src-tauri/src/upload.rs`)
#### 支持的图床服务
1. **GitHub**
- 通过 GitHub API 上传图片到仓库
- 支持自定义路径和分支
- 返回可直接访问的 URL 和删除 URL
2. **Imgur**
- 使用 Imgur API 上传图片
- 支持 Client ID 认证
- 获取图片链接和删除 hash
3. **自定义图床**
- 支持任意自定义的图片上传 API
- 可配置自定义 HTTP 头部
- 可配置表单字段名
- 智能解析响应中的 URL
#### 核心特性
- **重试机制**: 可配置重试次数,默认 3 次
- **超时控制**: 可配置超时时间,默认 30 秒
- **进度回调**: 支持上传进度事件通知
- **错误处理**: 完善的错误处理和日志记录
### 3.2 配置管理 (`src-tauri/src/config.rs`)
#### 配置结构
```rust
pub struct AppConfig {
// 默认图床配置
pub default_image_host: Option<ImageHostConfig>,
// 可用的图床配置列表
pub image_hosts: Vec<ImageHostConfig>,
// 上传重试次数
pub upload_retry_count: u32,
// 上传超时时间(秒)
pub upload_timeout_seconds: u64,
// 是否自动复制上传后的链接
pub auto_copy_link: bool,
// 保留的截图数量
pub keep_screenshots_count: usize,
// 数据库路径
pub database_path: Option<PathBuf>,
}
```
#### 配置存储位置
- **Linux**: `~/.config/CutThenThink/config.json`
- **macOS**: `~/Library/Application Support/CutThenThink/config.json`
- **Windows**: `%APPDATA%\CutThenThink\config.json`
#### 核心功能
- 自动创建配置目录
- 配置验证和默认值
- JSON 格式存储
- 热加载/保存支持
### 3.3 数据库功能 (`src-tauri/src/database.rs`)
#### 数据库结构
使用 SQLite 数据库,包含两个主要表:
**records 表** - 存储上传记录
```sql
CREATE TABLE records (
id TEXT PRIMARY KEY,
record_type TEXT NOT NULL, -- 'image', 'text', 'file'
content TEXT NOT NULL, -- URL 或内容
file_path TEXT, -- 本地文件路径
thumbnail TEXT, -- base64 缩略图
metadata TEXT, -- JSON 元数据
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL
)
```
**settings 表** - 存储应用设置
```sql
CREATE TABLE settings (
key TEXT PRIMARY KEY,
value TEXT NOT NULL,
updated_at TEXT NOT NULL
)
```
#### 核心功能
- **CRUD 操作**: 完整的增删改查支持
- **类型安全**: 强类型的记录和设置
- **索引优化**: 为常用查询字段创建索引
- **外键约束**: 启用 SQLite 外键约束
- **批量操作**: 支持批量删除和清空
## 前端 API 封装 (`src/api/index.ts`)
提供了完整的 TypeScript 类型定义和 API 调用封装:
```typescript
// 配置 API
getConfig(): Promise<AppConfig>
setConfig(config: AppConfig): Promise<void>
getConfigPath(): Promise<string>
// 上传 API
uploadImage(imagePath: string, imageHost: ImageHostConfig): Promise<UploadResult>
// 记录 API
insertRecord(record): Promise<Record>
getRecord(id: string): Promise<Record | null>
listRecords(options?): Promise<Record[]>
deleteRecord(id: string): Promise<boolean>
clearRecords(): Promise<number>
// 设置 API
getSetting(key: string): Promise<string | null>
setSetting(key: string, value: string): Promise<void>
listSettings(): Promise<Setting[]>
```
## Pinia Store 实现
### ConfigStore (`src/store/config.ts`)
- 配置的加载和保存
- 图床配置管理(添加、删除、设置默认)
- 上传参数管理(重试次数、超时时间)
### UploadStore (`src/store/upload.ts`)
- 上传任务管理
- 批量上传支持
- 上传进度跟踪
- 任务状态管理
### RecordsStore (`src/store/records.ts`)
- 记录的增删改查
- 按类型过滤记录
- 记录数量统计
- 批量操作支持
### SettingsStore (`src/store/settings.ts`)
- 应用设置管理
- 设置缓存
- 批量设置操作
- 常用设置的便捷方法
## UI 组件
### ConfigManager.vue
配置管理界面,提供:
- 上传参数设置(重试次数、超时时间等)
- 图床配置管理(添加、删除、设置默认)
- 支持 GitHub、Imgur、自定义图床配置
- 实时保存配置
### UploadHistory.vue
上传历史查看界面,提供:
- 网格布局展示上传记录
- 图片预览
- 复制链接功能
- 删除记录功能
- 查看记录详情
## 验证清单
### 多图床上传支持
- [x] GitHub 图床上传实现
- [x] Imgur 图床上传实现
- [x] 自定义图床上传实现
- [x] 上传进度事件
- [x] 重试机制
### 配置管理
- [x] 配置文件结构定义
- [x] 配置读写 API
- [x] 配置验证和默认值
- [x] 配置目录创建(`~/.config/CutThenThink/`
### 数据库功能
- [x] 数据库表结构创建
- [x] 基础 CRUD 操作
- [x] 数据库初始化
- [x] 数据库文件创建在配置目录
### 测试支持
- [x] 单元测试config, upload, database 模块)
- [x] 内存数据库测试
## 文件结构
```
src-tauri/src/
├── config.rs # 配置管理模块
├── upload.rs # 上传模块
├── database.rs # 数据库模块
├── screenshot.rs # 截图模块(已有)
├── hotkey.rs # 快捷键模块(已有)
└── lib.rs # 主入口,集成所有模块
src/
├── api/
│ └── index.ts # API 类型定义和调用封装
├── store/
│ ├── index.ts # Store 统一导出
│ ├── config.ts # 配置 Store
│ ├── upload.ts # 上传 Store
│ ├── records.ts # 记录 Store
│ └── settings.ts # 设置 Store
└── components/views/
├── ConfigManager.vue # 配置管理组件
└── UploadHistory.vue # 上传历史组件
```
## 依赖项
新增的 Rust 依赖:
- `reqwest`: HTTP 客户端
- `tokio`: 异步运行时
- `rusqlite`: SQLite 数据库
- `uuid`: UUID 生成
- `notify`: 文件系统监控(预留)
## 下一步
1. 实现 AI 集成功能Phase 4
2. 添加更多图床服务支持
3. 实现上传进度在前端的实时显示
4. 添加记录搜索和过滤功能
5. 实现数据导出和备份功能
## 注意事项
1. 上传功能需要配置相应的图床服务凭据
2. 数据库文件会自动创建在配置目录
3. 配置修改会立即保存到磁盘
4. 上传失败会自动重试(可配置次数)
5. 所有异步操作都使用 Tokio 运行时