基于 React + TypeScript + Fabric.js 构建一个封面生成器网站
📘 CoverMaker 开发全流程说明书
目标：基于 React + TypeScript + Fabric.js 构建一个内部使用的封面生成器网站。
开发方式：通过 Claude / VibeCoding 进行全流程代码生成与实现。
部署目标：Docker 自建部署，访问端口 8090。
🧩 一、项目背景与目标
📍 项目简介
CoverMaker 是一个为内部使用而设计的在线封面生成器。
用户可通过网页直接创建、编辑和导出自定义封面图片，无需登录、无需服务器端存储。
🎯 功能目标（MVP）
| 功能模块 | 功能描述 |
|---|---|
| 画布管理 | 默认尺寸 1960×1280（3:4 比例），可缩放预览 |
| 文本编辑 | 添加文本、修改字体、字号、颜色、透明度、对齐方式 |
| 背景管理 | 选择背景颜色或上传背景图片 |
| 导出功能 | 一键导出为 PNG 图片 |
| 操作栏 | 左侧工具栏包含字体、颜色、字号、不透明度、导出按钮 |
| 样式 | 极简灰白风格 |
⚙️ 二、技术架构与规范
🧠 技术选型
| 模块 | 技术栈 |
|---|---|
| 前端框架 | React 18 + TypeScript |
| 构建工具 | Vite |
| 状态管理 | Zustand |
| 画布渲染 | Fabric.js |
| 样式系统 | Tailwind CSS（快速样式） |
| 图标库 | Lucide React |
| 部署容器 | Docker（Node 构建 + Nginx 运行） |
📁 目录结构
src/
├── components/
│ ├── CanvasEditor.tsx
│ ├── Toolbar.tsx
│ ├── BackgroundPanel.tsx
│ ├── ExportButton.tsx
│ ├── FontSelector.tsx
│ └── ColorPicker.tsx
├── store/
│ └── useCanvasStore.ts
├── utils/
│ ├── export.ts
│ └── helpers.ts
├── App.tsx
└── main.tsx
🚀 三、VibeCoding 全流程任务阶段
以下每个阶段都附有 Claude 可直接执行的 prompt。
你可以逐条复制到 Claude 中执行，让它自动生成对应的项目代码与文件。
阶段 1：项目初始化
Prompt 1
创建一个名为 "cover-maker" 的 React + TypeScript + Vite 项目。
安装 TailwindCSS 并初始化配置。
在 App.tsx 中创建一个简洁主页，页面中央放置标题 “CoverMaker”，下方留出画布区域占位。
使用浅灰背景和极简风格。
阶段 2：Fabric.js 画布初始化
Prompt 2
在项目中安装并引入 Fabric.js。
创建组件 CanvasEditor.tsx。
在该组件中初始化一个固定尺寸为 1960×1280 的画布。
支持添加一个初始文本 “双击编辑文字”。
用户可拖动、缩放、双击修改文字内容。
确保画布区域响应式居中显示。
阶段 3：样式与状态管理
Prompt 3
安装 Zustand。
创建 store/useCanvasStore.ts 管理画布状态（选中文本、样式参数等）。
创建 Toolbar.tsx，包含以下控件：
- 字体选择（FontSelector.tsx）
- 字号调节滑块
- 颜色选择（ColorPicker.tsx）
- 不透明度滑块
将这些控件与 CanvasEditor 通过 Zustand 状态联动。
阶段 4：背景管理
Prompt 4
创建 BackgroundPanel.tsx 组件。
允许用户选择背景颜色或上传图片。
上传图片后自动缩放填充整个画布（使用 Fabric.Image.fromURL）。
提供“重置背景”按钮。
阶段 5：导出功能
Prompt 5
创建 ExportButton.tsx 组件。
点击时调用 Fabric.js 的 toDataURL 方法，将画布内容导出为 PNG。
文件命名规则：covermaker_{yyyyMMdd_HHmm}.png
触发浏览器自动下载。
阶段 6：UI 布局整合
Prompt 6
使用 Tailwind 创建一个两栏布局：
左侧（320px）为 Toolbar 和 BackgroundPanel。
右侧为 CanvasEditor 居中显示。
整体页面保持极简灰白风格。
字体使用“PingFang SC”或“Inter”，所有按钮为圆角、浅灰边框。
阶段 7：Docker 打包与部署
Prompt 7
创建 Dockerfile：FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm install && npm run buildFROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 8090
CMD ["nginx", "-g", "daemon off;"]创建 docker-compose.yml：version: "3.9"
services:covermaker:build: .container_name: covermakerports:- "8090:80"restart: always在本地运行：
docker compose build
docker compose up -d完成后访问：
http://localhost:8090
🧱 四、最终交付内容
执行完上述七个 Prompt 后，你将获得一个完整可运行的网站：
✅ 特性概览
- 1960×1280 封面画布
- 拖拽文字 + 实时编辑
- 字体、颜色、不透明度、背景设置
- 一键导出 PNG
- 极简 UI、无登录、轻量运行
- Docker 打包后即可一键运行
✅ 启动命令
docker compose up -d
访问：
👉 http://localhost:8090
📄 五、后续可选拓展
| 模块 | 描述 |
|---|---|
| 模板功能 | 允许保存几个预设样式 |
| 快捷键支持 | Ctrl+Z、Ctrl+Y 撤销/重做 |
| 高分辨率导出 | 导出 2× / 4× 高清版本 |
| 多语言支持 | 可加中英切换（i18n） |
| 云端存储 | 若未来要保存作品，可加 Firebase 或自建 API |
ChatGPT 出的方案，直接发给 claude 去执行！第一版这个样，还能接受。
