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>
187 lines
3.6 KiB
Markdown
187 lines
3.6 KiB
Markdown
# 图库视图快速开始
|
||
|
||
## 安装依赖
|
||
|
||
```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)
|
||
- ✅ 图库网格视图
|
||
- ✅ 图片预览功能
|
||
- ✅ 搜索与筛选
|
||
- ✅ 批量操作
|
||
- ✅ 导出功能
|
||
- ✅ 完整文档
|