完整实现 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>
19 KiB
19 KiB
CutThenThink v3.0 - 完整设计文档
项目代号: cutThink_lite 技术栈: Tauri (Rust) + Vanilla JS Web 前端 设计日期: 2025-02-12 目标版本: v3.0.0
1. 项目概述
1.1 设计目标
| 指标 | Python 版本 | v3.0 目标 |
|---|---|---|
| 打包体积 | ~214MB | 5-10MB(核心) |
| 启动速度 | 较慢 | < 500ms |
| 内存占用 | ~100MB+ | < 50MB |
| 依赖环境 | Python 运行时 | 无需运行时 |
| 更新机制 | 重新打包 | 支持热更新 |
1.2 核心功能
- ✅ 全屏/区域截图
- ✅ 多图床上传
- ✅ OCR 文字识别(云端默认,本地插件可选)
- ✅ AI 智能分类(Prompt 驱动)
- ✅ 历史记录管理
- ✅ 分类标签系统
1.3 技术选型
| 层级 | 技术选择 | 理由 |
|---|---|---|
| 后端 | Rust + Tauri 2.x | 原生性能、内存安全、打包体积小 |
| 前端 | Vanilla HTML/CSS/JS | 零框架依赖,极致轻量 |
| 构建 | Vite | 快速开发构建,支持 HMR |
| 数据库 | SQLite (rusqlite) | 轻量嵌入式,单文件存储 |
| 截图 | Tauri 插件 + 系统API | 跨平台兼容,平台原生能力 |
| OCR | 云端 API + 离线插件 | 按需下载,保持核心轻量 |
| AI | Claude/OpenAI API | Prompt 驱动的智能分类 |
2. 系统架构
┌─────────────────────────────────────────────────────────────────┐
│ CutThenThink v3.0 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Web Frontend (Vanilla JS) │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │Screenshot│ │ Gallery │ │ Upload │ │Settings │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ State Management (Store) │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↕ IPC │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Rust Core (Tauri) │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │Screenshot│ │ Upload │ │ Database│ │Prompt │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ OCR Mgr │ │ AI Svc │ │Plugin │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↕ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Plugin / External Layer │ │
│ │ ┌──────────────────┐ ┌─────────────────────────┐ │ │
│ │ │ OCR Plugin │ │ Cloud Services │ │ │
│ │ │ (Optional) │ │ OCR/AI/Storage APIs │ │ │
│ │ └──────────────────┘ └─────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ↕ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ System Integration (Tauri Plugins) │ │
│ │ Screenshot │ Clipboard │ Hotkeys │ Notify │ File │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
3. 目录结构
cutThink_lite/
├── src-tauri/ # Rust 后端
│ ├── src/
│ │ ├── main.rs # 入口
│ │ ├── commands.rs # Tauri 命令
│ │ ├── screenshot.rs # 截图模块
│ │ ├── upload.rs # 上传模块
│ │ ├── ocr/
│ │ │ ├── mod.rs # OCR 管理器
│ │ │ ├── cloud.rs # 云端 OCR
│ │ │ └── plugin.rs # 插件 OCR
│ │ ├── ai/
│ │ │ ├── mod.rs # AI 服务
│ │ │ └── prompt.rs # Prompt 模板
│ │ ├── plugin/
│ │ │ ├── mod.rs # 插件管理器
│ │ │ └── downloader.rs # 插件下载
│ │ ├── database.rs # SQLite 数据库
│ │ ├── config.rs # 配置管理
│ │ └── error.rs # 错误定义
│ ├── Cargo.toml
│ └── tauri.conf.json
│
├── src-ui/ # Web 前端
│ ├── index.html
│ ├── main.js
│ ├── style.css
│ ├── vite.config.js
│ ├── package.json
│ │
│ ├── src/
│ │ ├── api/ # API 封装
│ │ │ ├── commands.js
│ │ │ ├── screenshot.js
│ │ │ ├── upload.js
│ │ │ ├── ocr.js
│ │ │ ├── ai.js
│ │ │ └── database.js
│ │ │
│ │ ├── store/ # 状态管理
│ │ │ ├── index.js
│ │ │ └── modules/
│ │ │ ├── records.js
│ │ │ ├── settings.js
│ │ │ └── ui.js
│ │ │
│ │ ├── components/ # UI 组件
│ │ │ ├── views/ # 视图组件
│ │ │ │ ├── screenshot/
│ │ │ │ ├── gallery/
│ │ │ │ ├── upload/
│ │ │ │ └── settings/
│ │ │ └── shared/ # 共享组件
│ │ │
│ │ └── utils/ # 工具函数
│ │
│ └── assets/ # 静态资源
│
├── src-ocr-plugin/ # OCR 插件 (Go)
│ ├── main.go
│ ├── ocr.go
│ └── models/ # OCR 模型
│
├── docs/
│ └── design-v3-complete.md # 本文档
│
├── preview-ui.html # UI 预览
└── lightweight-redesign.md # 原始设计文档
4. 核心模块设计
4.1 OCR Manager(OCR 管理模块)
职责:统一管理本地插件 OCR 和云端 API OCR
| 功能 | 说明 |
|---|---|
is_local_plugin_installed() |
检测本地插件是否已安装 |
download_plugin() |
下载并安装本地 OCR 插件 |
recognize() |
执行 OCR(自动选择最优方案) |
get_available_providers() |
获取可用的 OCR 提供商列表 |
用户流程:
- 用户首次点击 OCR → 检测本地插件未安装
- 弹窗提示下载离线插件(约 15MB)
- 用户选择下载/跳过
- 下载完成后自动执行 OCR
4.2 AI Service(AI 分类服务)
职责:基于 Prompt 模板驱动 AI 对截图内容进行智能分类
| 功能 | 说明 |
|---|---|
get_builtin_templates() |
获取内置 Prompt 模板 |
render_template() |
渲染模板(替换变量) |
classify() |
执行 AI 分类 |
create_custom_template() |
创建用户自定义模板 |
内置变量:
{{ocr_text}}- OCR 识别的文字内容{{image_path}}- 图片文件路径{{datetime}}- 当前时间{{filename}}- 文件名{{file_size}}- 文件大小{{dimensions}}- 图片尺寸
内置模板:
general- 通用分类code- 代码分析invoice- 发票识别conversation- 对话分析
4.3 Plugin Manager(插件管理器)
职责:管理 OCR 插件的下载、安装、更新、卸载
| 功能 | 说明 |
|---|---|
fetch_plugin_list() |
从远程获取插件列表 |
download_plugin() |
下载插件(校验 SHA256) |
call_plugin() |
与插件通信(IPC/HTTP) |
check_update() |
检查插件更新 |
4.4 Database Schema
-- 截图记录表
CREATE TABLE records (
id INTEGER PRIMARY KEY AUTOINCREMENT,
filename TEXT NOT NULL,
filepath TEXT NOT NULL,
thumbnail_path TEXT,
upload_url TEXT,
category TEXT,
tags TEXT, -- JSON 数组
ocr_text TEXT,
ocr_provider TEXT,
ai_summary TEXT,
ai_confidence REAL,
created_at TEXT NOT NULL,
uploaded_at TEXT,
file_size INTEGER,
width INTEGER,
height INTEGER
);
-- Prompt 模板表
CREATE TABLE prompt_templates (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL UNIQUE,
description TEXT,
template_content TEXT NOT NULL,
variables TEXT, -- JSON 数组
is_builtin INTEGER DEFAULT 0,
created_at TEXT NOT NULL,
updated_at TEXT NOT NULL
);
-- 已安装插件表
CREATE TABLE plugins (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL UNIQUE,
version TEXT NOT NULL,
install_path TEXT,
enabled INTEGER DEFAULT 1,
installed_at TEXT NOT NULL
);
-- 应用设置表
CREATE TABLE settings (
key TEXT PRIMARY KEY,
value TEXT NOT NULL
);
-- 索引
CREATE INDEX idx_records_category ON records(category);
CREATE INDEX idx_records_created_at ON records(created_at DESC);
5. 用户界面设计
UI 预览文件:preview-ui.html
5.1 主要视图
| 视图 | 功能 |
|---|---|
| 截图面板 | 全屏/区域截图、预览、操作按钮、AI 结果展示 |
| 图库 | 记录网格展示、分类筛选、搜索 |
| 上传配置 | 图床选择、API 配置 |
| 设置 | OCR/AI/Prompt/插件等配置 |
5.2 快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl+Shift+A |
截全屏 |
Ctrl+Shift+R |
区域截图 |
Ctrl+Shift+O |
OCR 识别 |
Ctrl+Shift+U |
上传 |
Ctrl+Shift+S |
保存 |
6. 数据流设计
6.1 截图 → AI 分类 完整流程
用户触发截图
│
▼
┌─────────────────┐
│ Tauri 后端 │
│ 调用系统 API │
└────────┬────────┘
│
▼
返回图片路径
│
▼
┌─────────┐
│显示预览 │
└────┬────┘
│
▼
用户点击 "AI分类"
│
▼
┌─────────────────┐
│ 需要识别文字? │
└────┬────────┬───┘
是 │ │ 否
▼ ▼
┌──────┐ 直接
│ OCR │ 分类
└──┬───┘
│
▼
┌─────────┐
│检查插件 │
└────┬────┘
│
▼
┌────────────────┐
│本地插件已安装?│
└──┬────────┬───┘
是 │ │ 否
▼ ▼
调用本地 提示下载
OCR 插件 │
│ ▼
│ 用户选择
│ ┌─┴─┐
│ │是 │否
│ ▼ ▼
│ 下载 云端
│ 插件 OCR
│ │ │
└────┴───┘
│
▼
返回 OCR 文字
│
▼
┌─────────────────┐
│ 渲染 Prompt 模板 │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 调用 AI API │
└────────┬────────┘
│
▼
返回分类结果
│
▼
┌─────────────────┐
│ 保存到数据库 │
└────────┬────────┘
│
▼
更新 UI 显示
7. 安全与配置
7.1 安全设计
| 安全领域 | 设计要点 |
|---|---|
| API 密钥存储 | 系统密钥链(Credential Manager/Keychain) |
| 敏感数据 | 加密存储,不写入配置文件明文 |
| 插件签名 | 验证 SHA256 校验和 |
| 网络通信 | HTTPS only |
| 权限控制 | Tauri 权限白名单 |
7.2 配置目录
~/.config/CutThenThink/
├── config.json # 用户配置
├── secrets/ # 加密敏感信息
├── database/
│ └── cutthenthink.db
├── plugins/ # 插件目录
├── screenshots/ # 截图存储
└── logs/ # 日志
7.3 核心配置项
| 配置项 | 默认值 | 说明 |
|---|---|---|
ocr.provider |
cloud |
cloud 或 local |
ocr.auto_detect |
true |
自动检测是否需要 OCR |
ai.provider |
claude |
AI 服务提供商 |
ai.auto_classify |
true |
截图后自动分类 |
upload.auto_upload |
false |
截图后自动上传 |
ui.theme |
light |
主题选择 |
8. 错误处理
| 错误码 | 说明 | 用户提示 |
|---|---|---|
SCREENSHOT_FAILED |
截图失败 | 截图失败,请重试 |
OCR_PLUGIN_NOT_INSTALLED |
OCR 插件未安装 | 本地 OCR 插件未安装,请下载或使用云端 OCR |
OCR_RECOGNIZE_FAILED |
OCR 识别失败 | OCR 识别失败 |
AI_CLASSIFY_FAILED |
AI 分类失败 | AI 分类失败 |
NETWORK_ERROR |
网络错误 | 网络连接失败,请检查网络 |
DATABASE_ERROR |
数据库错误 | 数据库操作失败 |
9. 非功能需求
9.1 性能指标
| 指标 | 目标值 |
|---|---|
| 冷启动时间 | < 500ms |
| 截图响应 | < 100ms |
| OCR 识别(云端) | < 3s |
| AI 分类 | < 5s |
| 内存占用 | < 50MB(空闲) |
| 包体积 | < 10MB(不含插件) |
9.2 平台兼容性
| 平台 | 最低版本 |
|---|---|
| Windows | Windows 10 1809+ |
| Linux | glibc 2.17+ |
| macOS | macOS 10.15+ |
10. 发布计划
10.1 版本规划
| 版本 | 功能范围 | 预估体积 |
|---|---|---|
| v3.0.0 MVP | 截图、上传、基础 OCR(云端) | 5-10MB |
| v3.1.0 | AI 分类、Prompt 模板、历史记录 | 5-10MB |
| v3.2.0 | 本地 OCR 插件支持 | 5-10MB + 插件 |
| v3.3.0 | 高级筛选、批量操作、导出 | 5-10MB |
| v3.4.0 | 云同步、多设备同步 | 5-10MB |
10.2 打包输出
| 平台 | 输出格式 |
|---|---|
| Windows | NSIS 安装包 / MSI |
| Linux | AppImage / deb / rpm |
| macOS | DMG / PKG |
11. 开发里程碑
Phase 1: 项目搭建 ──────────────────────────── 1 周
├── Tauri 项目初始化
├── 前端项目搭建
├── 基础 UI 框架
└── 构建配置
Phase 2: 核心截图功能 ──────────────────────── 2 周
├── 全屏/区域截图
├── 预览和基础操作
├── 文件管理
└── 快捷键集成
Phase 3: 上传与存储 ────────────────────────── 1 周
├── 多图床上传支持
├── 配置管理
└── 数据库基础功能
Phase 4: OCR 集成 ────────────────────────── 2 周
├── 云端 OCR API 集成
├── 插件管理器
├── 本地 OCR 插件(Go)
└── OCR 结果处理
Phase 5: AI 分类系统 ──────────────────────── 2 周
├── AI API 集成
├── Prompt 模板引擎
├── 模板管理界面
└── 自动分类流程
Phase 6: 历史记录与管理 ──────────────────── 1 周
├── 图库视图
├── 搜索与筛选
├── 批量操作
└── 导出功能
Phase 7: 打包与发布 ──────────────────────── 1 周
├── 多平台构建配置
├── 图标与资源
├── 安装包制作
└── 测试与修复
总计: 10 周
12. 附录
12.1 参考资料
12.2 UI 预览
打开 preview-ui.html 查看完整的 UI 设计效果。
文档版本: v1.0 最后更新: 2025-02-12 状态: 设计完成,待实施