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:
186
docs/GALLERY_QUICKSTART.md
Normal file
186
docs/GALLERY_QUICKSTART.md
Normal 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)
|
||||
- ✅ 图库网格视图
|
||||
- ✅ 图片预览功能
|
||||
- ✅ 搜索与筛选
|
||||
- ✅ 批量操作
|
||||
- ✅ 导出功能
|
||||
- ✅ 完整文档
|
||||
Reference in New Issue
Block a user