216 lines
5.9 KiB
Markdown
216 lines
5.9 KiB
Markdown
# 扑克牌设计管理系统
|
||
|
||
一个基于 Django + Vue.js 的扑克牌设计管理系统，支持个人从零开始设计完整的54张扑克牌系列。
|
||
|
||
## 功能特性
|
||
|
||
- **模板系列库** - 提供经典、现代、卡通、复古等预设模板，快速开始设计
|
||
- **素材管理** - 上传自定义花色图案、JQK人像、大小王、背面图案等
|
||
- **实时预览** - 基于 Fabric.js 的可视化编辑器，实时预览54张牌面
|
||
- **自动对称化** - JQK人像上传后自动生成中心对称版本
|
||
- **多图层支持** - 支持背景、边框、人像、装饰等多层次图像叠加
|
||
- **批量导出** - 一键导出整套扑克牌为PNG格式，支持多种分辨率
|
||
|
||
## 技术栈
|
||
|
||
### 后端
|
||
- Django 5.x
|
||
- Django REST Framework
|
||
- SQLite
|
||
- Pillow (图像处理)
|
||
- django-cors-headers
|
||
|
||
### 前端
|
||
- Vue.js 3.x
|
||
- Fabric.js 7.x (Canvas 图形库)
|
||
- Pinia (状态管理)
|
||
- Element Plus (UI 组件库)
|
||
- Vite (构建工具)
|
||
- Sass (CSS 预处理)
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
game-cards-poker-design/
|
||
├── backend/ # Django 后端
|
||
│ ├── poker_api/ # Django 项目配置
|
||
│ │ ├── settings.py
|
||
│ │ ├── urls.py
|
||
│ │ └── wsgi.py
|
||
│ ├── apps/
|
||
│ │ ├── projects/ # 项目管理 & 素材管理
|
||
│ │ │ ├── management/commands/init_system.py # 初始化命令
|
||
│ │ │ ├── models.py
|
||
│ │ │ ├── views.py
|
||
│ │ │ └── serializers.py
|
||
│ │ ├── templates/ # 模板管理
|
||
│ │ └── exports/ # 导出服务
|
||
│ ├── media/ # 上传的素材文件 (projects/, export/)
|
||
│ ├── manage.py
|
||
│ ├── db.sqlite3 # SQLite 数据库
|
||
│ └── requirements.txt
|
||
│
|
||
├── frontend/ # Vue 前端
|
||
│ ├── src/
|
||
│ │ ├── components/ # Vue 组件
|
||
│ │ │ ├── AssetPanel.vue # 素材面板
|
||
│ │ │ ├── DesignPanel.vue # 设计面板
|
||
│ │ │ └── AssetUploadDialog.vue
|
||
│ │ ├── views/ # 页面视图
|
||
│ │ │ ├── Home.vue
|
||
│ │ │ ├── Editor.vue
|
||
│ │ │ └── Test.vue
|
||
│ │ ├── stores/ # Pinia 状态管理
|
||
│ │ │ └── projectStore.js
|
||
│ │ ├── api/ # 后端 API 调用
|
||
│ │ ├── utils/ # 工具函数
|
||
│ │ │ ├── cardLayout.js
|
||
│ │ │ ├── cardRenderer.js
|
||
│ │ │ └── symmetry.js
|
||
│ │ ├── router/
|
||
│ │ └── App.vue
|
||
│ ├── public/
|
||
│ ├── vite.config.js
|
||
│ └── package.json
|
||
│
|
||
└── docs/
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 后端启动
|
||
|
||
```bash
|
||
cd backend
|
||
pip install -r requirements.txt
|
||
python manage.py migrate
|
||
python manage.py init_system # 初始化示例模板和项目
|
||
python manage.py runserver
|
||
```
|
||
|
||
后端服务将运行在 http://localhost:8000
|
||
|
||
### 前端启动
|
||
|
||
```bash
|
||
cd frontend
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
前端服务将运行在 http://localhost:5173
|
||
|
||
## 扑克牌结构
|
||
|
||
系统支持完整的54张标准扑克牌：
|
||
|
||
| 类型 | 数量 | 说明 |
|
||
|------|------|------|
|
||
| 数字牌 | 40张 | 4花色 × 10张（A, 2-10） |
|
||
| 花牌 JQK | 12张 | 4花色 × 3张（J, Q, K） |
|
||
| 大小王 | 2张 | 大王、小王 |
|
||
|
||
**花色分类：**
|
||
- ♠ 黑桃 (Spade) - 黑色
|
||
- ♥ 红桃 (Heart) - 红色
|
||
- ♣ 梅花 (Club) - 黑色
|
||
- ♦ 方块 (Diamond) - 红色
|
||
|
||
## 核心功能
|
||
|
||
### 1. 模板系列库
|
||
|
||
系统提供多种预设模板：
|
||
- **经典风格** - 标准扑克牌设计，传统花色和字体
|
||
- **现代简约** - 扁平化设计，简洁线条
|
||
- **卡通风格** - Q版可爱人像，圆润花色图案
|
||
- **复古风格** - 复古色调和纹理
|
||
|
||
### 2. 素材上传
|
||
|
||
支持上传的素材类型：
|
||
- 花色图案 (PNG/SVG)
|
||
- JQK人像 (PNG/JPG)
|
||
- 大小王图案 (PNG/JPG)
|
||
- 背面图案 (PNG/JPG)
|
||
- 边框装饰 (SVG)
|
||
- 数字字体 (TTF/OTF)
|
||
|
||
### 3. 设计编辑器
|
||
|
||
- 实时预览和编辑
|
||
- 多图层管理
|
||
- 缩放和平移
|
||
- 中心对称生成（JQK）
|
||
- 批量应用样式
|
||
|
||
### 4. 导出功能
|
||
|
||
- 单张导出 PNG
|
||
- 批量导出整副牌（ZIP压缩包）
|
||
- 多种分辨率选择：
|
||
- 标准 (750×1050px)
|
||
- 高清 (1500×2100px)
|
||
- 超高清 (3000×4200px)
|
||
|
||
## API 文档
|
||
|
||
### 项目管理
|
||
|
||
| 方法 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| GET | `/api/projects/` | 获取所有项目 |
|
||
| POST | `/api/projects/` | 创建新项目 |
|
||
| GET | `/api/projects/{id}/` | 获取项目详情 |
|
||
| PUT | `/api/projects/{id}/` | 更新项目 |
|
||
| DELETE | `/api/projects/{id}/` | 删除项目 |
|
||
| POST | `/api/projects/{id}/design/` | 保存设计配置 |
|
||
|
||
### 素材管理
|
||
|
||
| 方法 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| GET | `/api/projects/{id}/assets/` | 获取项目素材列表 |
|
||
| POST | `/api/projects/{id}/assets/` | 上传素材 |
|
||
| GET | `/api/projects/{id}/assets/{asset_id}/` | 获取素材详情 |
|
||
| DELETE | `/api/projects/{id}/assets/{asset_id}/` | 删除素材 |
|
||
|
||
### 模板管理
|
||
|
||
| 方法 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| GET | `/api/templates/` | 获取模板列表 |
|
||
|
||
### 导出服务
|
||
|
||
| 方法 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| POST | `/api/projects/{id}/export/` | 批量导出整副牌 |
|
||
| GET | `/api/projects/{id}/export/{card_key}/` | 导出单张牌 |
|
||
|
||
## 管理命令
|
||
|
||
### 初始化系统
|
||
|
||
```bash
|
||
python manage.py init_system
|
||
```
|
||
|
||
创建 4 种预设模板（经典、现代、卡通、复古）和一个示例项目。
|
||
|
||
## 前端路由
|
||
|
||
| 路径 | 页面 | 说明 |
|
||
|------|------|------|
|
||
| `/` | Home | 项目列表首页 |
|
||
| `/editor/:projectId?` | Editor | 设计编辑器（可选项目ID） |
|
||
| `/test` | Test | 测试/预览页面 |
|
||
|
||
## 开发计划
|
||
|
||
详细的设计规格文档请查看：`docs/superpowers/specs/2026-05-31-poker-card-design-system.md`
|
||
|
||
## 许可证
|
||
|
||
MIT License
|