# test_specify
**Repository Path**: being1943/test_specify
## Basic Information
- **Project Name**: test_specify
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: 001-
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-19
- **Last Updated**: 2025-10-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 📸 相册管理器 (Photo Album Organizer)
一个现代化的本地相册管理应用，让照片整理变得简单而优雅。
[功能特性](#-功能特性) • [快速开始](#-快速开始) • [技术栈](#-技术栈) • [项目结构](#-项目结构)
---
## ✨ 功能特性
### 📁 相册管理
- **创建相册** - 轻松创建和组织你的照片集
- **相册封面** - 自动使用第一张照片作为相册封面
- **拖拽移动** - 通过拖拽将照片在相册间移动
- **批量操作** - 支持批量选择、移动和删除照片
### 🖼️ 照片管理
- **批量上传** - 支持一次上传多张照片
- **缩略图生成** - 自动生成缩略图，提升加载速度
- **日期分组** - 按拍摄日期智能分组显示
- **EXIF 信息** - 读取并显示照片的元数据信息
- **全屏查看** - 沉浸式照片浏览体验
### 🔍 搜索功能
- **全局搜索** - 快速搜索相册和照片
- **智能匹配** - 支持相册名称和照片文件名搜索
- **即时跳转** - 搜索结果可直接跳转到对应位置
### 💾 数据存储
- **本地存储** - 使用 IndexedDB 存储，数据完全本地化
- **隐私保护** - 所有数据保存在浏览器本地，不上传云端
- **数据导出** - 支持导出相册数据（JSON 格式）
### 🎨 用户体验
- **现代 UI** - 精美的渐变色设计和流畅动画
- **响应式布局** - 完美适配桌面和移动设备
- **拖拽交互** - 直观的拖拽操作体验
- **操作历史** - 记录所有操作，便于追踪
---
## 🚀 快速开始
### 前置要求
- Node.js 18+
- npm 或 pnpm
### 安装
```bash
# 克隆项目
git clone
cd photo-album-organizer
# 安装依赖
npm install
# 或
pnpm install
```
### 开发
```bash
# 启动开发服务器
npm run dev
# 在浏览器中打开
# http://localhost:5173
```
### 构建
```bash
# 构建生产版本
npm run build
# 预览生产构建
npm run preview
```
### 部署
```bash
# 构建静态网站
npm run build
# 构建产物在 build/ 目录中
# 可以直接部署到任何静态网站托管服务
```
### 测试
```bash
# 运行单元测试
npm run test:unit
# 运行集成测试
npm run test:integration
# 生成测试覆盖率报告
npm run test:coverage
```
---
## 🚀 部署指南
本应用是一个纯前端 SPA (Single Page Application)，可以部署到任何静态网站托管服务。
### 构建应用
```bash
# 安装依赖
npm install
# 构建生产版本
npm run build
```
构建完成后，`build/` 目录包含所有静态文件，可以直接部署。
### 部署选项
#### 1. Vercel (推荐)
[](https://vercel.com/new)
```bash
# 安装 Vercel CLI
npm i -g vercel
# 部署
vercel --prod
```
#### 2. Netlify
[](https://app.netlify.com/start)
1. 将代码推送到 GitHub
2. 在 Netlify 中连接仓库
3. 构建设置：
- **Build command**: `npm run build`
- **Publish directory**: `build`
#### 3. GitHub Pages
```bash
# 安装 gh-pages
npm install -D gh-pages
# 添加部署脚本到 package.json
"scripts": {
"deploy": "npm run build && gh-pages -d build"
}
# 部署
npm run deploy
```
#### 4. 自托管服务器
```bash
# 构建应用
npm run build
# 将 build/ 目录上传到服务器
# 配置 Web 服务器 (Nginx/Apache) 指向 build/ 目录
```
**Nginx 配置示例：**
```nginx
server {
listen 80;
server_name your-domain.com;
root /path/to/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 缓存静态资源
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
```
#### 5. Docker 部署
创建 `Dockerfile`：
```dockerfile
FROM nginx:alpine
COPY build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```
```bash
# 构建镜像
docker build -t photo-album-organizer .
# 运行容器
docker run -p 80:80 photo-album-organizer
```
### 部署注意事项
#### 🔒 HTTPS 要求
- **必须使用 HTTPS** - IndexedDB 在非安全上下文中功能受限
- 大多数现代托管服务默认提供 HTTPS
#### 📱 PWA 支持 (可选)
如需 PWA 功能，可添加 Service Worker：
```bash
# 安装 PWA 插件
npm install -D @vite-pwa/sveltekit
# 配置 vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [
sveltekit(),
VitePWA({
registerType: 'autoUpdate',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}']
}
})
]
};
```
#### 🌐 自定义域名
1. 在托管服务中配置自定义域名
2. 确保 DNS 记录正确指向
3. 启用 HTTPS 证书
#### 📊 性能优化
- 启用 Gzip/Brotli 压缩
- 配置适当的缓存头
- 使用 CDN 加速静态资源
---
## 🛠️ 技术栈
### 核心框架
- **[Svelte 5](https://svelte.dev/)** - 现代化的响应式前端框架
- **[TypeScript](https://www.typescriptlang.org/)** - 类型安全的 JavaScript 超集
- **[Vite](https://vitejs.dev/)** - 快速的前端构建工具
### 数据存储
- **[Dexie.js](https://dexie.org/)** - IndexedDB 的现代化封装库
- **IndexedDB** - 浏览器本地数据库
### 图片处理
- **[exifr](https://github.com/MikeKovarik/exifr)** - EXIF 元数据读取
- **Canvas API** - 缩略图生成
### 测试工具
- **[Vitest](https://vitest.dev/)** - 快速的单元测试框架
- **[Playwright](https://playwright.dev/)** - 端到端测试工具
- **[@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/)** - Svelte 组件测试
### 开发工具
- **ESLint** - 代码质量检查
- **Prettier** - 代码格式化
---
## 📂 项目结构
```
photo-album-organizer/
├── src/
│ ├── components/ # Svelte 组件
│ │ ├── common/ # 通用组件
│ │ ├── AlbumList.svelte
│ │ ├── PhotoGrid.svelte
│ │ └── PhotoViewer.svelte
│ ├── services/ # 业务逻辑服务
│ │ ├── StorageService.ts
│ │ ├── PhotoService.ts
│ │ └── SearchService.ts
│ ├── stores/ # Svelte stores (状态管理)
│ │ ├── albumStore.ts
│ │ ├── photoStore.ts
│ │ └── uiStore.ts
│ ├── utils/ # 工具函数
│ │ ├── dateUtils.ts
│ │ ├── imageUtils.ts
│ │ └── exportUtils.ts
│ ├── types/ # TypeScript 类型定义
│ │ └── index.ts
│ ├── styles/ # 全局样式
│ │ ├── global.css
│ │ └── components.css
│ └── App.svelte # 根组件
├── tests/ # 测试文件
│ ├── unit/ # 单元测试
│ └── integration/ # 集成测试
├── public/ # 静态资源
│ └── favicon.svg
└── package.json
```
---
## 🎯 核心功能实现
### 相册封面自动更新
当相册中的照片发生变化时（上传、删除、移动），封面会自动更新：
- 上传照片后，如果是第一张照片，自动设为封面
- 删除照片后，如果删除的是封面照片，自动使用下一张
- 移动照片后，源相册和目标相册的封面都会更新
### 拖拽移动照片
支持将照片从一个相册拖拽到另一个相册：
1. 在照片网格中选择照片
2. 拖拽选中的照片
3. 悬停在目标相册上
4. 释放鼠标完成移动
### 日期智能分组
照片按拍摄日期自动分组显示：
- 优先使用 EXIF 中的拍摄时间
- 如果没有 EXIF，使用文件修改时间
- 支持折叠/展开日期分组
---
## 🎨 设计特色
### 渐变色主题
采用现代化的蓝紫渐变色调，营造优雅的视觉体验：
- 主色调：`#667eea` → `#764ba2`
- 强调色：`#f59e0b`
- 背景色：`#f8fafc`
### 流畅动画
所有交互都配有精心设计的过渡动画：
- 悬停效果
- 拖拽反馈
- 页面切换
- 加载状态
### 响应式设计
完美适配各种屏幕尺寸：
- 桌面端：侧边栏 + 主内容区
- 移动端：堆叠布局
- 平板：自适应网格
---
## 📊 数据模型
### Album (相册)
```typescript
interface Album {
id?: number;
name: string;
description?: string;
coverPhotoId?: number;
photoCount: number;
createdAt: Date;
updatedAt: Date;
}
```
### Photo (照片)
```typescript
interface Photo {
id?: number;
albumId: number;
fileName: string;
fileBlob: Blob;
thumbnailBlob?: Blob;
fileSize: number;
mimeType: string;
width?: number;
height?: number;
takenAt?: Date;
uploadedAt: Date;
exifData?: ExifData;
}
```
---
## 🔒 隐私与安全
- ✅ **完全本地化** - 所有数据存储在浏览器的 IndexedDB 中
- ✅ **无需登录** - 不需要账号，直接使用
- ✅ **无网络请求** - 不上传任何数据到服务器
- ✅ **数据控制** - 用户完全掌控自己的数据
---
## 🤝 贡献指南
欢迎贡献代码、报告问题或提出建议！
1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request
---
## 📝 开发计划
- [ ] 支持视频文件
- [ ] 照片编辑功能（裁剪、滤镜）
- [ ] 标签系统
- [ ] 收藏功能
- [ ] 幻灯片播放
- [ ] PWA 支持
- [ ] 云端同步（可选）
---
## 📄 许可证
本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件
---
## 🙏 致谢
- [Svelte](https://svelte.dev/) - 优雅的前端框架
- [Dexie.js](https://dexie.org/) - 强大的 IndexedDB 封装
- [exifr](https://github.com/MikeKovarik/exifr) - EXIF 数据读取
- 所有开源贡献者
---
**用 ❤️ 和 Svelte 构建**
[⬆ 回到顶部](#-相册管理器-photo-album-organizer)