多语言手绘图生成大师系统源码-搭配市面流行生图模型image2生图模型全栈全开源

🌟 手绘图生成大师 | AI知识图解SaaS全栈系统 🌟

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📖 项目介绍

一套完整的AI手绘图/知识信息图生成平台。

用户粘贴文章、笔记或输入主题，系统自动调用AI生成精美的手绘风格知识图解。

前后端源码全开源，自带完整管理后台、用户系统、积分体系、卡密变现系统。

附一键部署脚本 + 宝塔图文教程，小白也能轻松上手部署。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

💡 产品亮点

✅ 前后端全开源，无加密无后门，可自由二开。多语言系统，使用流行交互式登录页

✅ 附完整管理后台，11个功能模块，开箱即用

✅ 积分+卡密系统，支持直接变现

✅ 多API密钥轮询容灾，不怕单个Key额度用完

✅ 4语言国际化（中/英/韩/日），面向全球用户

✅ 5种主题配色+暗色模式，用户体验拉满

✅ 一键部署脚本+宝塔教程，30分钟上线

✅ 50+精美UI组件，基于Radix UI+Tailwind CSS

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🛠️ 技术架构

前端：React 18 + Typescri-pt 5.9 + Vite 5

UI ：Tailwind CSS 3 + shadcn/ui（Radix UI）

路由：React Router 7

后端：Supabase 自托管（PostgreSQL + Auth + Edge Functions + Storage）

部署：Docker + Nginx + 宝塔面板

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🎯 核心功能详解

【功能一】AI图片生成（核心业务）

🔹 双模式生成

  - 内容模式：粘贴文章/笔记，自动提取关键信息生成知识图解

  - 主题模式：输入关键词，自由创意生成手绘风格插图

🔹 文档解析上传

  - 支持 TXT / Markdown / DOCX / PDF 四种格式

  - 拖拽上传，自动解析内容填入输入框

🔹 多比例+多分辨率

  - 后台可配置 16:9 / 4:3 / 3:4 / 9:16 / 1:1 等比例

  - 每个比例可绑定不同AI模型和分辨率

  - 管理后台拖拽配置，实时生效

🔹 智能提示词引擎

  - 自动生成专业手绘风格提示词

  - 黑色粗线条 + 封闭几何图形 + 扁平插画 + 米色纸张背景

  - 完整提示词段落展示，支持一键复制

🔹 生成结果展示

  - 双列瀑布流布局展示生成图片

  - 支持大图预览、多格式下载（PNG / JPG / WEBP）

  - 移动端长按保存，桌面端一键下载

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能二】多API站点 + 多密钥轮询容灾

🔹 多站点管理

  - 后台可配置多个API站点

  - 每个站点独立的Endpoint + 密钥 + 模型列表

🔹 多密钥轮询

  - 每个站点支持配置多个API Key

  - 随机起始索引轮询，遇401/403/429自动切换下一个Key重试

  - 单个Key额度用完不影响整体服务

🔹 双模式自动降级

  - 模式A：视频生成接口（异步轮询，最长等待150秒）

  - 模式B：图片生成接口（同步返回）

  - 模式A返回400/404/405/422时自动降级到模式B

🔹 模型热绑定

  - 后台一键拉取API站点的可用模型列表

  - 按 模型+比例+分辨率 三维度绑定计费

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能三】积分计费系统

🔹 新用户注册赠送积分（后台可配置赠送数量）

🔹 每次生成按所选比例+分辨率组合扣除对应积分

🔹 积分不足时前端拦截，无法生成

🔹 数据库原子扣减（deduct_credits RPC），防并发超扣

🔹 管理后台支持：增加 / 减少 / 设置 / 清零 用户积分

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能四】卡密兑换系统（变现利器）

🔹 批量生成卡密

  - 后台一键批量生成，格式：XXXX-XXXX-XXXX-XXXX

  - 自定义每个卡密包含的积分值

🔹 用户兑换

  - 导航栏积分徽章 → 兑换弹窗 → 输入卡密 → 积分到账

  - 支持配置购买卡密的外部链接

🔹 安全机制

  - 服务端乐观锁防并发重复兑换

  - 支持按 未使用/已使用/全部 筛选

  - 支持导出CSV

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能五】完整用户系统

🔹 用户名+密码登录（底层Supabase Auth自动映射）

🔹 熊猫动画登录页（眼球跟踪，瞳孔跟随输入移动）

🔹 记住登录（localStorage自动填充）

🔹 注册流程

  - 支持带邮箱/不带邮箱两种模式（后台可控）

  - 带邮箱时：发送6位OTP验证码，60秒倒计时重发

🔹 忘记密码

  - 用户名+邮箱双重身份验证 → OTP验证 → 设置新密码

🔹 个人资料修改（用户名/邮箱/密码）

🔹 user/admin 双角色，路由守卫自动拦截

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能六】邮件验证系统

🔹 自定义SMTP配置（主机/端口/用户/密码/发件人）

🔹 自定义HTML邮件模板，支持 {{title}} 和 {{otp_code}} 变量

🔹 频率限制：每分钟每邮箱每目的仅1封

🔹 OTP有效期10分钟，自动清理过期记录

🔹 后台一键发送测试邮件

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能七】多语言国际化

🔹 支持 4 种语言：中文 / English / 한국어 / 日本語

🔹 首次访问自动检测浏览器语言

🔹 370+ 翻译键，覆盖所有页面和提示

🔹 SEO标题、描述跟随语言动态切换

🔹 用户可手动切换，保存到localStorage

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能八】主题系统

🔹 5 种配色方案

  - Ocean 海洋蓝 / Violet 紫罗兰 / Teal 青绿 / Sunset 日落橙 / Rose 玫瑰红

🔹 3 种显示模式

  - 亮色 / 暗色 / 跟随系统

🔹 用户选择自动持久化到localStorage

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能九】生成历史记录

🔹 4列卡片网格展示（缩略图+比例+状态+时间）

🔹 生成中的记录每8秒自动轮询刷新状态

🔹 支持查看大图、下载、复制提示词、删除

🔹 分页浏览，每页12条

🔹 图片过期自动显示失效状态

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能十】管理后台（11大模块）

📊 数据总览

  - 注册用户数、总生成次数、友链数量统计卡片

👤 用户记录

  - 所有生成记录表格，含图片缩略图、搜索、用户统计

👥 用户管理

  - 用户列表搜索、积分调整（+/-/设置/清零）

  - 编辑资料（用户名/角色/积分/密码/邮箱）

  - 删除用户、批量获取真实邮箱

🔗 API配置

  - 多站点API管理

  - 每站点多密钥配置（支持密钥轮询）

  - 一键拉取模型列表

⚙️ 模型配置

  - API站点+模型+比例+分辨率三维度绑定

  - 每个组合独立计费设置

🎫 卡密管理

  - 批量生成、状态筛选、CSV导出

📱 客服二维码

  - 上传二维码图片、开关显示

⚙️ 站点设置

  - 站点标题、版权、联系方式

  - 预览图配置

  - SEO标题/描述/关键词

📧 邮件配置

  - SMTP配置、HTML模板编辑

  - 开关启停、测试发送

📢 公告管理

  - 多语言公告编辑

  - 富文本样式（字体颜色/背景色/字号/字重/对齐）

  - 独立开关控制

📜 法律条款

  - 隐私政策、服务条款内容编辑器

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【功能十一】其他亮点

🔹 响应式设计 — 完整移动端适配，桌面端固定侧边栏，移动端汉堡菜单

🔹 50+ UI组件 — 基于Radix UI的完整组件库

🔹 SEO优化 — react-helmet-async 动态页面标题和Meta描述

🔹 公告弹窗 — 多语言公告，支持「不再显示」记忆

🔹 友链管理 — 页脚动态加载，后台拖拽排序

🔹 客服入口 — 悬浮按钮 + 导航栏入口，后台可开关

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🗄️ 数据库设计

profiles（用户资料）

  └─ id / username / email / role / credits

generation_history（生成记录）

  └─ user_id / prompt / image_url / aspect_ratio / status / task_id

site_settings（站点配置）

  └─ key / value（30+配置项，JSON存储）

friend_links（友情链接）

  └─ title / url / sort_order / is_active

card_keys（卡密）

  └─ code / credits / status / used_by / used_at

email_otps（邮箱验证码）

  └─ email / code / purpose / expires_at / used

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔐 安全特性

🔸 Supabase RLS（行级安全策略）全表覆盖

🔸 JWT Token认证 + Service Role权限隔离

🔸 管理员接口双重验证（JWT + 角色检查）

🔸 OTP频率限制防邮件轰炸

🔸 卡密乐观锁防并发重复兑换

🔸 积分原子扣减防超扣

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🚀 部署说明

  配套完整HTML图文教程（宝塔部署教程.html）

  从零开始，截图级详细步骤，适合新手

环境要求：

  📌 2核4G起步，推荐4核8G

  📌 支持 CentOS 7+ / Ubuntu 22.04 / Debian 11+

  📌 需安装 Docker + Docker Compose

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📋 购买须知

📌 前后端全部源码，购买后可自由二次开发

📌 需自备一台Linux云服务器

📌 需自备AI图片生成API（支持OpenAI兼容接口）

📌 附完整部署教程，小白也能轻松上手

📌 如有部署问题可提供售后协助

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【属性】

• 框架: 其他
• 语言: 其他
• 数据库: 其他
• 规格: 整站源码
• 授权: 免授权
• 源文件: 完全开源（含全部源文件）
• 大小: 25 MB
• 移动端: Wap、App、自适应
• 安装服务: 免费【要求说明】
• 主机类型: 独立主机（服务器、VPS、VM）
• 伪静态: 无需
• 操作系统: Linux
• 安装方式: 提供管理权限
• web服务: nginx

来源: https://www.huzhan.com/code/goods487452.html