扑克牌设计管理系统

一个基于 Django + Vue.js 的扑克牌设计管理系统，支持个人从零开始设计完整的54张扑克牌系列。

功能特性

• 模板系列库 - 提供经典、现代、卡通、复古等预设模板，快速开始设计
• 素材管理 - 上传自定义花色图案、JQK人像、大小王、背面图案等
• 实时预览 - 基于 Fabric.js 的可视化编辑器，实时预览54张牌面
• 自动对称化 - JQK人像上传后自动生成中心对称版本
• 多图层支持 - 支持背景、边框、人像、装饰等多层次图像叠加
• 批量导出 - 一键导出整套扑克牌为PNG格式，支持多种分辨率

技术栈

后端

• Django 5.x
• Django REST Framework
• SQLite
• Pillow (图像处理)

前端

• Vue.js 3.x
• Fabric.js 6.x (Canvas图形库)
• Pinia (状态管理)
• Element Plus (UI组件库)
• Vite (构建工具)

项目结构

poker-design-system/
├── backend/                    # Django后端
│   ├── poker_api/              # Django项目配置
│   ├── apps/
│   │   ├── projects/           # 项目管理
│   │   ├── templates/          # 模板管理
│   │   └── exports/            # 导出服务
│   ├── media/                  # 上传的素材文件
│   ├── db.sqlite3              # SQLite数据库
│   └── requirements.txt
│
├── frontend/                   # Vue前端
│   ├── src/
│   │   ├── components/         # Vue组件
│   │   ├── views/              # 页面视图
│   │   ├── stores/             # Pinia状态管理
│   │   ├── api/                # Django API调用
│   │   └── utils/              # 工具函数
│   ├── public/
│   └── package.json
│
└── docs/
    └── specs/                  # 设计规格文档

快速开始

后端启动

cd backend
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver

后端服务将运行在 http://localhost:8000

前端启动

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}/ - 删除项目

素材管理

• GET /api/projects/{id}/assets/ - 获取项目素材
• POST /api/projects/{id}/assets/ - 上传素材
• DELETE /api/projects/{id}/assets/{asset_id}/ - 删除素材

导出服务

• POST /api/projects/{id}/export/ - 批量导出
• GET /api/projects/{id}/export/{card_key}/ - 导出单张牌

开发计划

详细的设计规格文档请查看：docs/superpowers/specs/2026-05-31-poker-card-design-system.md

许可证

MIT License