初始化
This commit is contained in:
+182
@@ -0,0 +1,182 @@
|
||||
# Pixiv Manager Frontend
|
||||
|
||||
一个优雅的 Pixiv 作品管理前端应用，基于 Vue 3 + TypeScript + Vite + Pinia 构建。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- 🎨 **作品搜索与浏览** - 支持关键词搜索、标签筛选、排序等功能
|
||||
- 👨🎨 **作者管理** - 关注喜欢的作者，查看作品列表和统计信息
|
||||
- 📥 **下载管理** - 支持单个作品、批量作品、作者作品下载
|
||||
- 🔐 **用户认证** - 基于 Pixiv OAuth 2.0 的安全登录系统
|
||||
- 📱 **响应式设计** - 完美适配桌面端和移动端
|
||||
- ⚡ **现代化技术栈** - Vue 3 + TypeScript + Vite + Pinia
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **框架**: Vue 3 (Composition API)
|
||||
- **语言**: TypeScript
|
||||
- **构建工具**: Vite
|
||||
- **状态管理**: Pinia
|
||||
- **路由**: Vue Router 4
|
||||
- **HTTP 客户端**: Axios
|
||||
- **样式**: CSS3 + 响应式设计
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # 组件目录
|
||||
│ ├── common/ # 通用组件
|
||||
│ │ ├── LoadingSpinner.vue
|
||||
│ │ └── ErrorMessage.vue
|
||||
│ └── artwork/ # 作品相关组件
|
||||
│ └── ArtworkCard.vue
|
||||
├── views/ # 页面组件
|
||||
│ ├── HomeView.vue # 首页
|
||||
│ ├── LoginView.vue # 登录页
|
||||
│ ├── SearchView.vue # 搜索页
|
||||
│ ├── ArtworkView.vue # 作品详情页
|
||||
│ ├── ArtistView.vue # 作者详情页
|
||||
│ ├── DownloadsView.vue # 下载管理页
|
||||
│ └── ArtistsView.vue # 作者管理页
|
||||
├── services/ # API 服务层
|
||||
│ ├── api.ts # 基础 API 服务
|
||||
│ ├── auth.ts # 认证相关 API
|
||||
│ ├── artwork.ts # 作品相关 API
|
||||
│ ├── artist.ts # 作者相关 API
|
||||
│ └── download.ts # 下载相关 API
|
||||
├── stores/ # Pinia 状态管理
|
||||
│ └── auth.ts # 认证状态管理
|
||||
├── types/ # TypeScript 类型定义
|
||||
│ └── index.ts # 全局类型定义
|
||||
├── router/ # 路由配置
|
||||
│ └── index.ts # 路由定义
|
||||
├── assets/ # 静态资源
|
||||
│ └── main.css # 全局样式
|
||||
├── App.vue # 根组件
|
||||
└── main.ts # 应用入口
|
||||
```
|
||||
|
||||
## 开发指南
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 16
|
||||
- pnpm >= 7
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 开发模式
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### 构建生产版本
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### 代码检查
|
||||
|
||||
```bash
|
||||
pnpm lint
|
||||
```
|
||||
|
||||
## 设计原则
|
||||
|
||||
### 组件设计
|
||||
- **单一职责**: 每个组件只负责一个特定功能
|
||||
- **可复用性**: 组件设计时考虑复用性，避免过度耦合
|
||||
- **类型安全**: 全面使用 TypeScript 确保类型安全
|
||||
|
||||
### 状态管理
|
||||
- **集中管理**: 使用 Pinia 进行集中状态管理
|
||||
- **响应式**: 状态变化自动触发 UI 更新
|
||||
- **持久化**: 关键状态支持本地持久化
|
||||
|
||||
### API 设计
|
||||
- **服务层**: 所有 API 调用封装在服务层
|
||||
- **错误处理**: 统一的错误处理机制
|
||||
- **类型安全**: API 响应类型定义完整
|
||||
|
||||
### 样式设计
|
||||
- **响应式**: 支持多种屏幕尺寸
|
||||
- **一致性**: 统一的设计语言和组件库
|
||||
- **可维护性**: 模块化的 CSS 结构
|
||||
|
||||
## 主要功能模块
|
||||
|
||||
### 1. 认证模块
|
||||
- Pixiv OAuth 2.0 登录
|
||||
- 登录状态管理
|
||||
- 自动刷新 Token
|
||||
|
||||
### 2. 作品搜索
|
||||
- 关键词搜索
|
||||
- 标签筛选
|
||||
- 排序选项
|
||||
- 分页加载
|
||||
|
||||
### 3. 作品详情
|
||||
- 作品信息展示
|
||||
- 多页作品支持
|
||||
- 下载功能
|
||||
- 作者信息
|
||||
|
||||
### 4. 作者管理
|
||||
- 作者信息展示
|
||||
- 作品列表
|
||||
- 关注/取消关注
|
||||
- 批量下载
|
||||
|
||||
### 5. 下载管理
|
||||
- 下载任务创建
|
||||
- 进度跟踪
|
||||
- 历史记录
|
||||
- 任务取消
|
||||
|
||||
## 部署说明
|
||||
|
||||
### 环境变量
|
||||
|
||||
创建 `.env` 文件：
|
||||
|
||||
```env
|
||||
VITE_API_BASE_URL=http://localhost:3000
|
||||
```
|
||||
|
||||
### 构建部署
|
||||
|
||||
```bash
|
||||
# 构建生产版本
|
||||
pnpm build
|
||||
|
||||
# 部署到静态服务器
|
||||
# dist/ 目录包含所有静态文件
|
||||
```
|
||||
|
||||
## 贡献指南
|
||||
|
||||
1. Fork 项目
|
||||
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||||
5. 打开 Pull Request
|
||||
|
||||
## 许可证
|
||||
|
||||
本项目仅供学习和个人使用，请遵守 Pixiv 的服务条款。
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.0.0
|
||||
- 初始版本发布
|
||||
- 基础功能实现
|
||||
- 响应式设计
|
||||
- TypeScript 支持
|
||||
Reference in New Issue
Block a user