pixiv/ui

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

安装依赖

pnpm install

开发模式

pnpm dev

构建生产版本

pnpm build

代码检查

pnpm lint

设计原则

组件设计

• 单一职责: 每个组件只负责一个特定功能
• 可复用性: 组件设计时考虑复用性，避免过度耦合
• 类型安全: 全面使用 TypeScript 确保类型安全

状态管理

• 集中管理: 使用 Pinia 进行集中状态管理
• 响应式: 状态变化自动触发 UI 更新
• 持久化: 关键状态支持本地持久化

API 设计

• 服务层: 所有 API 调用封装在服务层
• 错误处理: 统一的错误处理机制
• 类型安全: API 响应类型定义完整

样式设计

• 响应式: 支持多种屏幕尺寸
• 一致性: 统一的设计语言和组件库
• 可维护性: 模块化的 CSS 结构

主要功能模块

1. 认证模块

• Pixiv OAuth 2.0 登录
• 登录状态管理
• 自动刷新 Token

2. 作品搜索

• 关键词搜索
• 标签筛选
• 排序选项
• 分页加载

3. 作品详情

• 作品信息展示
• 多页作品支持
• 下载功能
• 作者信息

4. 作者管理

• 作者信息展示
• 作品列表
• 关注/取消关注
• 批量下载

5. 下载管理

• 下载任务创建
• 进度跟踪
• 历史记录
• 任务取消

部署说明

环境变量

创建 .env 文件：

VITE_API_BASE_URL=http://localhost:3000

构建部署

# 构建生产版本
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 支持