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

6.6 KiB
Raw Blame History

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)

配置结构

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 表 - 存储上传记录

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 表 - 存储应用设置

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 调用封装:

// 配置 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

上传历史查看界面,提供:

  • 网格布局展示上传记录
  • 图片预览
  • 复制链接功能
  • 删除记录功能
  • 查看记录详情

验证清单

多图床上传支持

  • GitHub 图床上传实现
  • Imgur 图床上传实现
  • 自定义图床上传实现
  • 上传进度事件
  • 重试机制

配置管理

  • 配置文件结构定义
  • 配置读写 API
  • 配置验证和默认值
  • 配置目录创建(~/.config/CutThenThink/

数据库功能

  • 数据库表结构创建
  • 基础 CRUD 操作
  • 数据库初始化
  • 数据库文件创建在配置目录

测试支持

  • 单元测试config, upload, database 模块)
  • 内存数据库测试

文件结构

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 运行时