拼豆图转换器 · Pindou Converter

将真实照片转换为拼豆像素图的全栈 Web 应用。支持多种颜色板系统（MARD-221、优肯、漫漫家等），提供精确的色彩映射和导出功能。

English | 中文

---

✨ 功能特性

• 🎨 多颜色板系统支持

  • MARD-221 色号（标准拼豆颜色）
  • 优肯 197 色（均衡照片向）
  • 漫漫家精选色（奶油粉彩风）
  • 小舞家精选色（高饱和动漫风）
  • 盼盼家精选色（暖调自然风）
  • 标准 72 色 / 迷你 48 色

• 🖼️ 精确颜色映射

  • CIE76 Lab 色差算法，精准色彩还原
  • 智能格子尺寸（8×8 ~ 60×60）
  • 支持裁剪和缩放

• 📱 手机优化体验

  • 移动优先设计（Tailwind CSS）
  • 支持相机拍照上传
  • 触控友好的界面（≥44px 可触区）

• 📥 多格式导出

  • 超清 PNG（32px/格）
  • 超高清 PDF（40px/格）
  • 完整用色图例（白底拼接）
  • Web Share 分享

• 🏷️ 智能色号系统

  • 自动识别颜色板并生成对应色号
  • 每格显示缩略色号标签
  • 导出包含完整色号图例

---

🚀 快速开始

前置条件

• Node.js 18+ 与 pnpm
• Python 3.11+ 与 pip/uv
• 现代浏览器（Chrome/Edge/Safari）

后端启动

cd backend

# 安装依赖
pip install -r requirements.txt

# 运行开发服务器（默认 http://127.0.0.1:8000）
uvicorn app.main:app --reload --port 8000

# 运行测试
pytest tests/ -v

前端启动

cd frontend

# 安装依赖
pnpm install

# 开发服务器（http://localhost:5173）
pnpm dev

# 生产构建
pnpm build

# TypeScript 类型检查
pnpm type-check

首次运行

1. 启动后端服务器（http://localhost:8000）
2. 启动前端开发服务器（http://localhost:5173）
3. 在浏览器中打开 http://localhost:5173
4. 上传图片 → 选择颜色板 → 调整参数 → 开始转换 → 下载结果

---

📁 项目结构

pindou/
├── README.md
├── package.json                    # 工作区配置（可选）
│
├── frontend/                       # Vue 3 前端应用
│   ├── src/
│   │   ├── components/
│   │   │   ├── ImageUploader.vue   # 图片上传器
│   │   │   ├── OptionPanel.vue     # 参数选择面板
│   │   │   ├── PreviewCanvas.vue   # 预览与导出
│   │   │   └── *.vue
│   │   ├── stores/
│   │   │   ├── useConvertStore.ts  # 转换结果状态
│   │   │   ├── usePaletteStore.ts  # 颜色板列表
│   │   │   └── useOptionStore.ts   # 参数状态
│   │   ├── api/
│   │   │   ├── convert.ts          # 转换 API
│   │   │   ├── palette.ts          # 颜色板 API
│   │   │   └── index.ts            # Axios 配置
│   │   ├── types/
│   │   │   └── index.ts            # TypeScript 类型定义
│   │   ├── assets/
│   │   │   └── palettes/           # 颜色板 JSON（前端展示）
│   │   └── App.vue / main.ts
│   ├── vite.config.ts
│   ├── tsconfig.json
│   └── package.json
│
├── backend/                        # FastAPI 后端
│   ├── app/
│   │   ├── main.py                 # FastAPI 应用入口
│   │   ├── routers/
│   │   │   ├── convert.py          # POST /api/v1/convert
│   │   │   └── palettes.py         # GET /api/v1/palettes[/{id}]
│   │   ├── services/
│   │   │   ├── image_processor.py  # 核心算法（缩放、色差、生成）
│   │   │   ├── palette_loader.py   # 颜色板加载
│   │   │   └── color_mapper.py     # 色差计算（可选扩展）
│   │   ├── models/
│   │   │   └── schemas.py          # Pydantic 模型
│   │   └── data/palettes/          # 颜色板 JSON（后端数据源）
│   │       ├── mard-221.json
│   │       ├── standard-72.json
│   │       ├── yoken-197.json
│   │       ├── manmanjia-soft.json
│   │       ├── xiaowujia-vivid.json
│   │       └── panpanjia-warm.json
│   ├── tests/
│   │   └── test_api.py             # 集成测试（14 个测试用例）
│   ├── requirements.txt
│   ├── pytest.ini
│   └── pyproject.toml
│
├── scripts/
│   ├── regenerate_mard_221.py      # MARD-221 色板重新生成
│   └── generate_vendor_palettes.py # 多品牌色板生成脚本
│
└── .github/instructions/           # 开发规范
    ├── backend.instructions.md
    └── frontend.instructions.md

最后更新：2026-05-13
版本：1.0.0-stable