e2ea309ee6
完整实现 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>
551 lines
19 KiB
Markdown
551 lines
19 KiB
Markdown
# 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 提供商列表 |
|
||
|
||
**用户流程**：
|
||
1. 用户首次点击 OCR → 检测本地插件未安装
|
||
2. 弹窗提示下载离线插件（约 15MB）
|
||
3. 用户选择下载/跳过
|
||
4. 下载完成后自动执行 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
|
||
|
||
```sql
|
||
-- 截图记录表
|
||
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](../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 参考资料
|
||
|
||
- [Tauri 官方文档](https://tauri.app/)
|
||
- [Tauri Examples](https://github.com/tauri-apps/tauri/tree/dev/examples)
|
||
- [Rusqlite](https://github.com/rusqlite/rusqlite)
|
||
- [RapidOCR](https://github.com/RapidAI/RapidOCR)
|
||
|
||
### 12.2 UI 预览
|
||
|
||
打开 [preview-ui.html](../preview-ui.html) 查看完整的 UI 设计效果。
|
||
|
||
---
|
||
|
||
**文档版本**: v1.0
|
||
**最后更新**: 2025-02-12
|
||
**状态**: 设计完成，待实施
|