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>
This commit is contained in:
Claude
2026-02-12 18:58:40 +08:00
commit e2ea309ee6
142 changed files with 38818 additions and 0 deletions

186
docs/GALLERY_QUICKSTART.md Normal file
View File

@@ -0,0 +1,186 @@
# 图库视图快速开始
## 安装依赖
```bash
npm install jszip
npm install --save-dev @types/jszip
```
## 基础使用
```vue
<script setup lang="ts">
import { GalleryView } from '@/components/views/gallery';
</script>
<template>
<GalleryView />
</template>
<style>
/* 全局样式变量(可选) */
:root {
--primary-color: #2563eb;
--primary-light: #eff6ff;
--danger-color: #ef4444;
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--border-color: #e5e7eb;
--text-primary: #111827;
--text-secondary: #6b7280;
}
</style>
```
## 主要功能
### 1. 图片浏览
- 网格/列表视图切换
- 懒加载 + 无限滚动
- 多种排序方式
### 2. 图片预览
- 全屏预览模式
- 缩放0.1x - 5x
- 旋转90°步进
- 键盘快捷键支持
### 3. 搜索筛选
- 快速搜索Cmd/Ctrl + K
- 高级筛选面板
- 多条件组合
### 4. 批量操作
- 多选模式
- 批量上传/下载/删除
- 批量编辑标签
- 批量移动分类
### 5. 数据导出
- JSON 格式(完整元数据)
- CSV 格式(电子表格)
- ZIP 格式(打包文件)
- HTML 报告(统计分析)
## 键盘快捷键
| 快捷键 | 功能 |
|--------|------|
| `Cmd/Ctrl + K` | 聚焦搜索框 |
| `←` / `→` | 上一张/下一张 |
| `+` / `-` | 放大/缩小 |
| `0` | 重置缩放 |
| `F` | 适应屏幕 |
| `R` | 旋转图片 |
| `I` | 显示信息 |
| `ESC` | 关闭预览 |
## 文档
- [完整使用指南](./GALLERY_USAGE.md)
- [Phase 6 完成总结](./PHASE6_SUMMARY.md)
## 示例代码
### 导出功能
```typescript
import { exportData } from '@/utils/export';
// 导出为 JSON
await exportData(records, 'json', {
includeMetadata: true,
includeOCR: true,
includeTags: true,
});
// 导出为 CSV
await exportData(records, 'csv', {
delimiter: ',',
});
// 导出为 ZIP
await exportData(records, 'zip', {});
// 生成报告
await exportData(records, 'report');
```
### 搜索筛选
```vue
<script setup lang="ts">
import { ref } from 'vue';
import { SearchFilter } from '@/components/views/gallery';
const handleSearch = (query: string, filters: any) => {
console.log('搜索:', query, filters);
// 实现搜索逻辑
};
</script>
<template>
<SearchFilter @search="handleSearch" />
</template>
```
### 自定义网格
```vue
<script setup lang="ts">
import { ref } from 'vue';
import { GalleryGrid } from '@/components/views/gallery';
import type { Record } from '@/api';
const items = ref<Record[]>([]);
const selectedIds = ref<Set<string>>(new Set());
const handleSelectionChange = (ids: Set<string>) => {
selectedIds.value = ids;
console.log('已选择:', ids.size, '项');
};
</script>
<template>
<GalleryGrid
:items="items"
:selection-mode="true"
@selection-change="handleSelectionChange"
/>
</template>
```
## 常见问题
**Q: 图片无法显示?**
A: 检查文件路径和访问权限,确保图片 URL 可访问。
**Q: 搜索无结果?**
A: 尝试清除筛选条件,确认搜索关键词拼写正确。
**Q: 导出失败?**
A: 确认已安装 `jszip` 依赖,检查浏览器下载权限。
**Q: 性能问题?**
A: 对于大数据集,组件已内置懒加载和虚拟滚动优化。
## 技术支持
- 查看完整文档: [GALLERY_USAGE.md](./GALLERY_USAGE.md)
- 查看 API 参考: [GALLERY_USAGE.md#api-接口](./GALLERY_USAGE.md#api-接口)
- 查看故障排除: [GALLERY_USAGE.md#故障排除](./GALLERY_USAGE.md#故障排除)
## 更新日志
### v1.0.0 (2025-02-12)
- ✅ 图库网格视图
- ✅ 图片预览功能
- ✅ 搜索与筛选
- ✅ 批量操作
- ✅ 导出功能
- ✅ 完整文档