这是一套"聊天驱动设计"的全栈项目：你在侧栏输入设计需求或选择模板，系统调用 AI 生成图片，画布即时展示结果，并支持下载、删除、自由布局与预览。下面用通俗语言解释其工作原理、配置方法与扩展方向。
项目界面展示
一图读懂架构与数据流
- 前端（浏览器）：负责聊天交互、模板与模型选择、图片上传/粘贴、生成请求发起、画布展示与拖拽排版。
- 后端（服务端）：负责认证与权限、项目与图片的记录管理、与 AI 图片服务的交互（可直连或代理）。
- 第三方 AI 图片服务：根据文本或参考图生成图片，返回 URL 或 Base64。
- 免费获取第三方AI的token
数据流（核心链路）：
- 输入需求（可选模板/模型/参考图） → 发起生成请求 → AI 服务返回图片 → 画布展示（单图/网格/自由） → 可下载/删除 → 可再次生成并追加到画布。
前端能力与体验设计
- 聊天驱动：支持模板快捷填充、模型选择、图片上传/粘贴，按回车发送需求。
- 画布模式：
- 单图模式：突出单个结果，适合精修与预览。
- 网格模式：自动排版，适合对比多个候选图。
- 自由模式：支持拖拽，带吸附与距离标注，便于对齐排版；按住 Shift 可关闭吸附，末尾自动整齐对齐网格（提升视觉整洁）。
- 预览与反馈：双击图片进入预览；顶部工具栏显示缩放比例；生成过程有加载反馈；图片卡片支持下载与删除。
- 错误提示：统一将错误信息抛到浏览器事件流，UI 轻量提示，不打断创作流程。
后端能力与业务规则
- 鉴权与权限：采用 JWT（令牌）保护受控接口；只有登录用户才能访问自己的项目与图片数据。
- 项目与图片管理：每次生成都会以记录形式落库（开发期使用内存存储，便于试用），包含 prompt、模型、尺寸、状态与结果；失败会记录错误信息。
- 生成策略：
- 文生图：设置默认模型与尺寸，生成成功后更新记录为"完成"。
- 图生图：可附带 mask（遮罩），对参考图进行编辑生成。
- 批量生成：用于故事板场景；逐条生成，失败不阻断整体流程，末尾添加轻微延迟以避免限流。
- 代理模式：后端可透明转发前端请求到 AI 服务，复用前端 Authorization 头，便于隐藏密钥或绕过跨域限制。
配置与环境变量（通俗解释）
- 前端环境变量以
VITE_或REACT_APP_开头，运行时可读；例如设置 AI 服务基地址与密钥提示。 - 后端环境变量包括端口、JWT 密钥、AI 服务基地址与密钥、运行环境等；开发期默认端口为 8080。
- CORS（跨域）：允许来自本地开发端口的请求（如 5173/6688/3000/6677 等），可按需扩展白名单。
安全与隐私
- 本地加密保存密钥：用户输入的第三方 API Key 不直接明文存储，而是加密后写入浏览器本地；读取时再解密使用，降低泄露风险。
- 账号安全：当前密码哈希逻辑是示例，生产应替换为安全算法（如 bcrypt），并完善用户状态与令牌刷新机制。
- 不在前端代码中硬编码敏感信息；优先使用环境变量与后端代理来管理密钥。
性能与工程实践
- 开发体验：使用现代前端构建工具，具备热更新与快速构建；对开发友好的调试插件与隐藏源码映射（构建时）降低线上泄漏风险。
- 交互流畅度：自由模式吸附与距离标注采用阈值判断与最近候选对齐策略，既保证快速对齐，又避免"粘手"的体验。
- 稳健回退：当第三方服务异常或超时，前端会使用占位图保障演示连贯性（便于教学与 demo）。
本地运行与快速上手
- 后端：进入后端目录并运行服务（开发期使用内存存储，无需数据库）。
- 前端：在根目录安装依赖后启动开发服务器（默认端口 6688）。
- 首次使用建议：
- 直接体验代理模式，无需设置第三方密钥；或在设置面板输入个人密钥以获得完整能力。
- 在聊天面板输入简短清晰的需求，例如"生成一张现代风格咖啡店品牌海报"。
- 尝试模板与模型切换，观察生成差异；在画布选择不同布局以便对比。
API 速查与示例
- 认证相关：
- 注册：
POST /api/v1/auth/register - 登录：
POST /api/v1/auth/login
- 注册：
- 图片生成：
- 文生图：
POST /api/v1/generate/image - 批量生成：
POST /api/v1/generate/batch - 图生图：
POST /api/v1/generate/edit
- 文生图：
- 项目与图片管理：
- 项目列表：
GET /api/v1/projects - 创建项目：
POST /api/v1/projects - 图片列表：
GET /api/v1/images?project_id=<id> - 下载图片：
GET /api/v1/images/<image-id>/download
- 项目列表：
进阶扩展建议
- 持久化与检索：将内存存储替换为数据库（如 SQLite/GORM），为项目与图片增加索引与分页。
- 并发控制与队列：为批量生成引入任务队列，设置并发上限与重试机制，提升稳定性。
- 资源管理与缓存：为图片结果接入 CDN 与缓存策略，提升加载体验与复用率。
- 模板生态与脚本解析：扩展模板库，支持脚本文本自动拆解为场景提示，增强故事板生成的智能化。
常见问题（FAQ）
- 提示"鉴权失败"：检查是否已在设置面板正确输入第三方 API Key，或改用后端代理模式。
- 无法生成或耗时过长：可能是第三方服务限流或网络问题；稍后重试或降低批量数量。
- 预览无法打开：确认双击动作是否在图片区域，或尝试在单图/网格模式下预览。
试试这样体验：启动后端与前端，在聊天面板输入"为咖啡店设计品牌物料（Logo、海报、贴纸）"，选择合适模板并发送；稍后你会在画布看到多张结果，切换到网格或自由模式进行对比与排版，双击任意图片进行放大预览。