> ## Documentation Index > Fetch the complete documentation index at: https://docs.superun.com/llms.txt > Use this file to discover all available pages before exploring further. # 使用技巧详解 > superun 详细使用技巧,涵盖项目规划,设计,开发,发布等各个阶段. ## 阶段1:入门规划 ### 项目规划技巧 #### 需求澄清后的页面步骤操作 在提交初始提示后,superun 会进行需求澄清,然后进入页面步骤阶段.在这个阶段,你可以根据情况选择不同的操作方式. 需求澄清后的页面步骤 **操作选项**: 1. **符合预期,直接开始生成** * 如果页面步骤符合你的预期,可以直接点击「开始生成」按钮 * 系统会根据这些步骤进行后续的生成流程 2. **不符合预期,但不知道怎么描述** * 如果觉得不符合预期,但不知道如何描述问题 * 可以点击「还没想好」按钮 * 模型会重新给你一些选项供你选择 3. **有自己的想法,想要调整** * 如果对页面步骤有自己的想法或需要调整 * 可以在对话框中直接输入你的需求 * 模型会结合你这次描述的内容,重新生成新的选项 > 💡 **提示**:充分利用需求澄清阶段,可以让后续的生成更符合你的预期.如果不满意,不要急于继续,先调整清楚再进行下一步. *** #### 风格选择与主题预览 系统生成 4 种风格选项后,你可以与它们互动,找到你喜欢的风格和主题. 风格选择与主题预览 **使用方法**: 1. **选择风格** * 点击任意一个生成的风格来选择它 * 每种风格代表不同的设计方向 2. **预览主题** * 在页面底部有主题颜色选择器 * 滑动主题颜色选择器,可以看到不同主题在选中风格下的变化效果 3. **应用主题** * 点击主题即可直接选中并应用 * 主题会立即应用到当前选中的风格上 4. **确认并继续** * 确认风格和主题都符合你的喜好后 * 点击右上角的「会用此风格继续」按钮 * 系统将使用你选择的风格和主题生成应用 确认并继续生成 > 💡 **提示**:花时间探索不同的风格和主题组合.通过鼠标悬停预览主题,可以帮助你在最终确定选择前做出明智的决定. *** #### 生成演示版本 风格生成完成后,你可以选择生成演示版本来预览应用的使用方式. 生成演示版本 **演示版本功能**: 1. **点击「知道了,开始演示吧」按钮** * 在风格生成完成后,点击此按钮即可生成演示版本 * 演示版本使用系统生成的测试数据 2. **体验应用功能** * 演示版本是最简单的 demo 版本 * 可以进行页面切换和基本操作 * 帮助你了解应用的使用方式和交互流程 3. **验证设计效果** * 通过演示版本,你可以直观地看到应用的实际效果 * 验证设计是否符合预期 * 确认功能流程是否合理 4. **查看并确认演示** * 演示生成后,对话流中会有提醒 * 点击顶部导航栏中的「查看演示 →」 * 即可进行确认演示效果 查看演示导航栏 #### 研发阶段 1. **查看演示后的下一步选择** * 查看演示后,可以选择需要的功能点 * 点击「先生成演示」,可以根据选择的功能点生成更详细的演示功能 * 点击「同时生成演示和研发」,会根据选择的功能点直接生成真实的功能,使用真实的数据,且会提供后续的功能列表 * 或者直接点击导航栏中的「下一步,研发实现」,直接生成功能列表 查看演示后的下一步选择 2. **研发阶段的功能选择** * 在研发阶段,可以根据模型推荐顺序去勾选内容实现 * 也可以直接全选去实现 * 选择符合自己需要的功能 * 可以直接在对话流中进行选择和继续 * 也可以在研发 tab 下进行选择 * 选择继续后,只要耐心等待,superun 会根据你的选择为你实现功能 研发阶段的功能选择 3. **功能验收与继续开发** * 选择的功能研发完成后,可以对已实现的功能进行使用验收 * 如果有问题,直接在对话中提出来,让 superun 修改,直到符合你的预期 * 功能没问题后,可以继续选择剩下的功能,选择继续,进行开发 * 也可以在对话中提出自己的需求,让 superun 去实现 功能验收与继续开发 4. **路由切换功能** * 在开发过程中,如果发现做了后台管理或其他单独路由的页面没法通过页面点击跳转到 * 可以在导航栏中间路由切换这里,会出现下拉列表 * 选择对应的页面路由就可以直接跳转到页面 路由切换功能 #### 上线运营 * 点击「下一步,上线运营」,可以查看发布、搜索优化、分析和效能等上线相关的功能 * 所有功能都与应用上线有关 * 可以一键上线应用 * 优化搜索内容等功能 下一步:上线运营 > 💡 **提示**:演示版本是快速验证设计和功能的好方法.在正式生成完整应用前,先通过演示版本了解应用的使用方式,可以帮助你更好地调整需求. #### 省钱:出 bug 时,别急着让它乱改 网站出差错或卡住时,先理解问题再修复,不要盲目修改. **常见情况**: * 网站出差错或卡住,多点几次检修会检修 * 刷新不会丢资料,模型有时不太稳定,活已经做了但页面未更新 **正确的 debug 流程**: 1. **理解问题**:把报错复制出来,问 AI:「这是什么意思,问题可能在哪」 2. **确认思路**:和 AI 讨论可能的解决方案 3. **再修改**:确认思路后再让它修改 **避免**: * ❌ 一看到错误就让 AI 随便改 * ❌ 不分析问题就盲目修改 * ❌ 连续多次修改导致问题更复杂 **正确做法**: * ✅ 先理解错误资讯 * ✅ 分析问题根源 * ✅ 制定修复方案 * ✅ 再执行修改 *** #### 使用历史版本回滚 如果项目出现问题或想回到之前的稳定状态,可以使用历史版本回滚功能. **适用场景**: * 最近修改导致功能异常 * 想要回到之前的稳定版本 * 对比不同版本的效果 * 测试不同实现方式 **操作步骤**: 1. 进入项目的版本历史页面 2. 查看所有历史版本的记录 3. 选择要回滚到的目标版本 4. 点击「回滚到此版本」或「恢复此版本」 5. 确认回滚操作 6. 系统会自动恢复到选定的版本状态 **注意事项**: * 回滚会丢失当前版本到目标版本之间的所有修改 * 回滚后可以继续在此基础上进行新的修改 * 如果项目连接了数据库,注意数据兼容性问题 > 💡 **提示**:经常创建版本标记,可以让你在需要时快速回滚到稳定状态. *** ### 提示编写技巧 *** #### 省钱:多用「聊天模式」想清楚,再让 AI 动手 先想再做,不要一上来就生成全部. **正确流程**: **第一步:先聊天（点击输入框右下角的「免费咨询」）**: * 讨论想法 * 想清楚结构 * 问「这样合不合理」 * 确认方向和细节 **第二步:再执行**: * 让 AI 去生成或修改 * 基于讨论的结果实施 * 确保方向正确 **好处**: * 避免生成不符合需求的内容 * 节省积分（聊天模式消耗更少） * 提前发现问题 * 思路更清晰 *** ## 阶段2:设计阶段 ### 图片使用技巧 #### 在聊天中直接上传图片 在聊天中直接上传图片,AI 会自动插入并设置样式. **操作步骤**: 1. 在聊天框中选择上传图片 2. 在提示中说明图片放置的位置和大小 3. AI 会自动插入并调整样式 **适用场景**: * 添加产品图片 * 插入品牌标识 * 上传参考设计图 > 💡 **提示**:可以同时上传多张图片,在提示中说明每张图片的用途. *** #### 使用设计编辑器替换图片 使用设计编辑器功能,可视化替换图片,所见即所得. **操作步骤**: 1. 点击顶部导航栏的「设计编辑器」按钮 2. 选择要替换的图片占位符 3. 选择新图片完成替换 **优势**: * 可视化操作,直观明了 * 即时预览效果 * 不需要修改代码 *** #### 项目图片上传到 superun storage 将项目图片上传到 superun storage,然后在提示中引用储存路径. **操作步骤**: 1. 在 superun storage 中创建储存桶（如果需要） 2. 上传图片文件 3. 获取图片的储存路径 4. 在提示中引用路径 **优势**: * 统一管理项目资源 * 便于版本控制 * 提高载入速度 **范例**: ``` 使用 superun storage 中的图片:https://1799444268974080-09e640c9337540adac62ea19f57a7f65.uxa-cdn.com/wmmgnele36.png 作为首页横幅 ``` 如需了解详细的上传步骤,文件管理和 URL 获取方式,请参考: 完整的 superun 文件存储教程,包含文件上传,管理和在应用中使用储存资源的详细说明. *** ### 界面设计技巧 #### 使用设计编辑器快速调整样式 使用设计编辑器功能,快速调整颜色,排版,间距等样式. **可调整内容**: * 文本内容和样式 * 颜色和背景 * 字体和字号 * 间距和布局 * 响应式设置 **操作方式**: 1. 点击顶部导航栏的「设计编辑器」按钮 2. 选择要修改的元素 3. 直接调整属性 4. 即时查看效果 *** #### 可视化编辑的优势 可视化编辑比改代码更快更安全. **优势**: * **速度快**:直接操作,无需写代码 * **安全性高**:不会破坏现有功能 * **即时预览**:立即看到效果 * **易于调整**:可以反复修改 **适用场景**: * 调整样式和布局 * 修改文本内容 * 替换图片资源 * 优化响应式设计 *** #### 手机端功能限制 在手机端使用 superun 时,部分功能存在限制. **手机端可以做的**: * 查看和浏览项目 * 选择风格并继续生成 * 基本项目导航 **手机端不支持的**: * 设计主题编辑 * 可视化设计编辑器 * 高级编辑功能 **建议**:为了获得最佳的创作体验,建议使用 PC 或桌面电脑.手机端更适合查看和基本互动,复杂的设计工作应在桌面端完成. *** ## 阶段3:开发阶段 ### 功能实现自动化 superun 提供了多种自动化功能,让开发更简单高效. **自动化能力**: #### AI 模型直接接入 * 把 AI 模型直接接进你的产品,不用自己研究底层 * 无需配置 API 密钥 * 开箱即用 #### 自动部署到云端 * 自动部署到云端,不用再折腾服务器 * 无需配置服务器环境 * 一键发布 #### 图片,视频自动储存 * 图片,视频自动储存,直接能用在网站里 * 统一管理资源 * 自动优化 #### 文生图工具（superun 生图） * 自带一个好用又神奇的文生图工具 * 无需外部服务 * 快速生成图片 #### 自动配置常用功能 * 注册,登录,收费这些麻烦事,一步到位自动帮你配好 * 减少重复工作 * 快速上线 *** ### 动态变量节点使用说明 在 superun 的流程图/逻辑节点中,**动态变量节点的内容由 AI 根据对话上下文自动填充**,不支持手动直接编辑. **正确做法**: * 在对话中告诉 AI 你想要的变量值或逻辑,AI 会自动更新节点内容 * 如需修改,直接在对话中描述"把某个节点的值改为……" **常见误区**: * ❌ 双击节点尝试手动输入 → 无效 * ✅ 通过对话告知 AI 修改 → 自动生效 *** ### 知识库管理技巧 #### 使用自定义知识记录项目信息 使用自定义知识功能记录产品愿景,用户旅程,核心功能等信息. **记录内容**: * **产品愿景**:产品的核心价值和目标 * **用户旅程**:用户使用产品的完整流程 * **核心功能**:主要功能模块和特性 * **设计规则**:设计规范和约束条件 **好处**: * AI 会持续引用这些知识 * 保持项目一致性 * 提高生成准确性 *** #### 定义角色和边界 定义角色和边界（管理员/用户/投资者等）,帮助 AI 生成符合权限要求的代码. **定义内容**: * **角色类型**:管理员,普通用户,访客等 * **权限边界**:每个角色可以访问的功能 * **数据隔离**:不同角色看到的数据范围 **范例**: ``` 角色定义: - 管理员:可以访问所有功能,包括用户管理,系统设置 - 普通用户:可以访问个人资料,订单管理 - 访客:只能浏览公开内容 ``` *** #### 生成项目知识库 基于已实现的功能,为项目生成知识库. **问 AI 范例**: ``` 基于已实现的功能,为我的项目生成知识库. 包括产品定位,核心功能,用户角色和设计规范. ``` **生成内容**: * 项目概述 * 功能清单 * 用户角色定义 * 设计规范 * 技术架构 #### 把好用的做法记下来,下次直接复用 每次你发现: * 某种说法特别好用 * 某个结构 AI 特别懂 * 某种步骤不容易出错 **保存方式**: * 把它存下来,下次直接用 * 记录在项目知识库中 * 整理成提示模板 * 保存在自定义知识中 **好处**: * 提高效率 * 保持一致性 * 减少错误 * 快速复用成功经验 > 💡 **提示**:定期整理和更新这些好用的做法,形成自己的最佳实践库. *** ### 提示优化技巧 #### 具体指向页面或模块 具体指向页面或模块,明确说明要实现的功能. **好的范例**: ``` 在设置页面（/settings）的通知设置区域,添加一个邮件通知开关. ``` **要点**: * 明确指出页面路径 * 说明具体位置（区域,模块） * 描述要实现的功能 *** ### 资料库集成技巧 *** ### 版本管理技巧 #### 固定每个良好状态 superun 会自动记录每个重要节点的版本历史,无需手动创建版本标记. **工作原理**: * 当你完成一个重要功能或修改后,系统会自动在版本历史中创建记录 * 每个版本都包含完整的项目状态,可以随时查看和回滚 ![版本历史](https://b.ux-cdn.com/uxarts/files/t20260116115236/swkqgi3g.png) **操作建议**: 1. 完成一个重要功能后,先测试确保功能正常 2. 系统会自动保存当前状态到版本历史 3. 在版本历史中可以看到所有关键节点的记录 **好处**: * 可以随时回滚到任意历史版本 * 便于对比不同版本的差异 * 自动记录项目进度,无需手动管理 > 💡 **提示**:版本历史会自动保存,你只需要专注于开发,系统会帮你管理所有版本记录. *** #### 使用历史版本回滚重建 当项目陷入错误循环或结构混乱时,使用版本回滚功能快速回到之前的稳定状态. **适用场景**: * 项目结构混乱,难以修复 * 错误太多,修复成本过高 * 想要尝试新的实现方式,需要从稳定版本重新开始 * 需要回到某个功能正常的版本 **操作步骤**: 1. 进入项目的版本历史页面 2. 查看所有历史版本记录,找到功能正常的稳定版本 3. 选择目标版本 4. 点击「恢复此版本」 5. 确认回滚操作 6. 系统会自动恢复到选定版本的状态 7. 在稳定版本基础上继续开发 **注意事项**: * ⚠️ **重要**:回滚会丢失当前版本到目标版本之间的所有修改,请谨慎操作 * 如果项目连接了数据库,回滚前需要检查数据兼容性,避免数据结构不匹配 * 回滚后可以继续在此基础上进行新的修改 > ⚠️ **注意**:回滚前记得检查数据库连接的兼容性. *** ### 邮件服务配置技巧（按需） #### 使用 Resend 配置邮件服务 Resend 是一个现代化的电子邮件 API,适合在项目中发送交易和营销邮件. **获取 API 密钥步骤**: 1. 前往 [resend.com](https://resend.com) 并注册账户 2. 验证您的电子邮件地址 3. 在 Resend 仪表板中点击 **API Keys** 4. 点击**创建 API 密钥** 5. 为其命名（例如,"superun App"） 6. 复制 API 密钥（以 `re_` 开头） 7. 确保其安全,切勿在客户端代码中公开它 **在 superun 中使用**: 当您需要在 superun 项目中使用 Resend 时,只需在对话中提及即可.superun 会自动提示您输入 Resend API 密钥.只需粘贴从 Resend 复制的 API 密钥,superun 会自动处理其余的配置. 如需详细的 Resend 集成说明,请参考: 完整的 Resend 集成教程,包含 API 配置和使用说明. #### 使用个人网易邮箱配置 SMTP 如果需要在项目中配置邮件服务,可以使用个人网易邮箱快速配置 SMTP. **适用场景**: * 产品验证阶段 * 内部通知 * 测试邮件功能 **优势**: * 无需企业资质 * 配置简单快速（5 分钟完成） * 成本低 如需详细的配置步骤和常见问题排查,请参考专门的配置指南. *** ### 语音引擎配置技巧（按需） 如果需要在项目中接入语音转文字（ASR）和文字转语音（TTS）功能,可以接入国内主流的语音引擎. **支持的引擎**: * 百度智能云 * 讯飞开放平台 * 火山引擎 * 阿里云 **配置方式**: 在后端密钥管理中配置相应的环境变量,每个引擎需要的配置参数不同. 如需详细的接入说明,配置参数,音色选项和技术要点,请参考专门的接入指南. #### 微信 H5 语音输入限制 在微信 H5 环境中,浏览器原生的语音输入（`getUserMedia`）**无法使用**,这是微信浏览器的限制. **解决方案**:使用**微信 JS-SDK** 提供的语音录制接口: 1. 在公众号后台配置 JS-SDK 可信域名 2. 在 superun 项目中引入微信 JS-SDK（`wx.startRecord` / `wx.stopRecord`） 3. 录音完成后上传到微信服务器,再转成文字或文件使用 在对话中告知 AI "需要在微信H5中实现语音输入,使用微信JS-SDK实现",superun 会自动完成集成. > ⚠️ **注意**:以上限制仅针对微信 H5（公众号网页）,普通 PC 浏览器和微信小程序均不受影响. *** ### 开发工具技巧 #### html2canvas 元素对齐问题解决方案 使用 html2canvas 截图时,可能出现元素对齐偏差,与浏览器实际渲染不一致的问题. **核心问题**: html2canvas 截图时元素对齐偏差,与浏览器实际渲染不一致. **解决方案:动态 CSS 注入** 通过注入临时修复样式 + 控制渲染参数,解决对齐偏差问题. ```javascript theme={null} const exportElement = async () => { // 1. 注入修复样式 const style = document.createElement('style'); style.id = 'export-fix-style'; document.head.appendChild(style); if (style.sheet) { style.sheet.insertRule('* { box-sizing: border-box !important; }', 0); style.sheet.insertRule('img { display: inline-block !important; }', 1); style.sheet.insertRule('div { box-sizing: border-box !important; line-height: 1.2 !important; }', 2); style.sheet.insertRule('span { line-height: 1.2 !important; }', 3); } try { // 2. 等待资源加载（图片+字体） await Promise.all([ ...document.images.map(img => img.complete ? Promise.resolve() : new Promise(resolve => { img.onload = img.onerror = resolve; }) ), document.fonts.ready // 等待字体加载完成 ]); // 3. 执行截图（关键配置见下文） const canvas = await html2canvas(element, { scale: 3, // 高清缩放 foreignObjectRendering: false, // 禁用 foreignObject,使用传统渲染更稳定 useCORS: true, // 允许跨域图片 allowTaint: true // 允许污染画布（配合 useCORS 处理跨域） }); return canvas.toDataURL('image/png', 1.0); // 返回 PNG 数据 } finally { // 4. 清理临时样式（确保异常时也移除） document.getElementById('export-fix-style')?.remove(); } }; ``` **关键配置说明**: | 参数 | 推荐值 | 作用说明 | | ------------------------ | -------------- | ------------------------------------------------------------- | | `foreignObjectRendering` | `false` | 禁用 `foreignObject` 渲染模式,改用传统 Canvas 绘制,避免因 SVG 渲染差异导致的对齐偏差 | | `box-sizing` | `border-box` | 统一盒模型计算方式（含内边距/边框）,避免因默认 `content-box` 导致的尺寸计算偏差 | | `line-height` | `1.2` | 固定行高,消除文字因行高动态变化导致的垂直对齐偏移 | | `img { display }` | `inline-block` | 避免 `img` 默认 `inline` 元素的 `vertical-align: baseline` 导致的基线对齐偏差 | **注意事项**: 1. **配置一致性**:所有导出场景（如单次导出,批量导出）需使用相同配置,避免不同模式下渲染逻辑差异导致对齐问题. 2. **等待充分**:切换页面状态（如动态加载内容,修改样式）后,需等待至少 `1000ms` 再执行截图,确保 DOM 和样式完全稳定. 3. **清理及时**:通过 `try...finally` 确保临时注入的修复样式（`export-fix-style`）在截图后必被移除,避免污染页面正常样式. 4. **测试全面**:需覆盖「单次导出」「批量导出」「复杂布局（含图片/文字/嵌套元素）」等场景,验证对齐效果一致性. *** ## 阶段4:发布阶段 *** ## 阶段5:问题解决 ### 资料问题解决 #### 数据自动恢复问题 数据自动恢复?使用单独后台管理数据,分离模型逻辑. **问题原因**: 模型代码在数据加载失败时会重新初始化旧数据. **解决方案**: * **使用单独后台管理数据**:将数据管理与模型逻辑分离 * **直接让模型修改数据**:确保数据修改操作由模型直接处理 **预防措施**: * 使用版本控制保存重要状态 * 定期备份数据 * 实现数据持久化机制 *** #### 让模型直接修改数据 让模型直接修改数据,减少中间环节. **好处**: * 减少数据不一致 * 降低出错概率 * 简化数据流程 **实施方式**: * 模型直接操作数据库 * 避免多层数据转换 * 统一数据修改入口 *** ### 接口错误解决 #### AI 功能报错排查 AI 功能报错?检查请求头参数与请求体序列化格式是否一致. **常见问题**: * headers 参数导致 body 序列化问题 * Content-Type 不匹配 * 数据格式错误 **解决步骤**: 1. 检查 API 请求中的请求头参数 2. 让 AI 排查多余的请求头参数 3. 确保请求头与请求体的序列化格式一致 4. 移除不必要的请求头配置 *** #### 确保内容类型匹配 移除多余的请求头参数,确保内容类型匹配. **检查要点**: * Content-Type 是否正确 * 请求体格式是否匹配 * 编码方式是否一致 **常见错误**: * JSON 数据但 Content-Type 是 text/plain * Form 数据但 Content-Type 是 application/json * 编码方式不匹配 *** ### 算力值问题解决 #### 算力值充值后会话异常 算力值充值后会话异常?查看日志 → 使用检修 → 重新测试. **解决步骤**: 1. **查看日志**:检查系统日志,确认算力值充值后的具体错误信息 2. **使用检修功能**:在 superun 中使用检修功能（检修按钮）处理异常状态 3. **重新测试**:修复后重新测试,确认会话可正常继续 **预防措施**: * 充值前检查账户状态 * 充值后等待系统同步（通常几秒钟） #### 如何节省算力值 **问题现象**: * 简单修改消耗过多算力值 * 重复修复消耗大量算力值 **解决方案**: 1. **使用手动编辑**:对于样式调整，使用"手动编辑"功能（零算力值消耗） 2. **使用咨询模式**:规划阶段使用"咨询"模式（免费） 3. **使用检修功能**:遇到问题先使用"检修"功能（免费） 4. **邀请新用户**:邀请新用户完成演示可获得20算力值奖励 5. **避免反复修改**:发现问题及时停止，避免在错误方向上消耗算力值 **算力值消耗对比**: * ❌ 对话修改样式：消耗算力值 * ✅ 手动编辑样式：零算力值 * ❌ 直接执行功能：消耗算力值 * ✅ 咨询模式规划：免费 * ❌ 手动修复问题：消耗算力值 * ✅ 检修功能修复：免费 **相关技巧**: * 关于咨询模式的使用，请参考[阶段1:省钱:多用「聊天模式」想清楚](#省钱:多用「聊天模式」想清楚,再让-ai-动手) *** ### 版本回滚与演示状态问题 #### 历史版本回滚后无法操作 **问题现象**: * 从历史记录回滚后，页面无法点击 * 右侧功能菜单消失 * 无法进行任何操作 **解决方案**: 1. **检查是否为演示版本**:演示版本是只读的，无法操作。如果回滚到了演示版本，需要继续生成研发版本 2. **使用版本历史**:如果回滚后出现问题，可以再次回滚到更早的稳定版本 > ⚠️ **注意**:演示版本的历史回滚需要继续生成研发版本才能正常操作。 **相关技巧**: * 关于版本回滚的基本操作，请参考[阶段1:使用历史版本回滚](#使用历史版本回滚) * 关于版本回滚重建，请参考[阶段3:使用历史版本回滚重建](#使用历史版本回滚重建) *** ### 对话功能问题 #### 输入框无法输入或发送按钮灰色 **问题现象**: * 输入框无法输入文字 * 发送按钮显示为灰色，无法点击 * 发送时提示算力值不足（toast提示） **解决方案**: **情况1:算力值不足** * 算力值不足时，仍然可以输入内容 * 点击发送时会显示toast提示"算力值不足" * **解决方法**:充值算力值后即可正常发送 **情况2:输入框无法输入或发送按钮灰色** 1. **完成初始演示**:如果项目还在初始阶段，需要先勾选"产生演示"，完成后才能进行对话修改 2. **咨询模式占用**:如果已有咨询进行中，发送按钮会置灰，需等待当前咨询结束后再发送主流程指令 **操作步骤**: ``` 情况1:算力值不足 1. 检查右上角算力值余额 2. 如果算力值不足，充值后即可正常发送 情况2:无法输入或按钮灰色 1. 如果项目未完成演示，点击"产生演示" 2. 等待演示完成后，即可正常对话 3. 如果还是不行，清除浏览器缓存后重试 ``` *** ### 预览窗口问题 #### 预览一直加载或无法显示 **问题现象**: * 预览窗口一直转圈，无法加载 * 选择风格阶段右侧无法展示 * 预览打不开但发布的链接可以正常访问 **解决方案**: 1. **刷新页面**:清除浏览器缓存，刷新整个页面（不是页面内的刷新） 2. **切换网络**:可能是网络环境问题，尝试切换网络 3. **新页面打开**:尝试在新页面打开预览链接 4. **检查PWA**:如果是老项目，可能是PWA导致的问题 * 先使用"咨询"模式询问："我的预览窗口无法显示，是不是PWA导致的问题？" * 如果确认是PWA问题，再在对话中输入"移除PWA支持" 5. **网络测试**:访问 `https://net-test.superun.app/` 测试网络连接 6. **等待处理完成**:如果系统正在处理任务，等待任务完成后再查看预览 **操作步骤**: ``` 1. 按 Ctrl+Shift+Delete 清除浏览器缓存 2. 关闭浏览器重新打开项目 3. 如果还是不行，尝试切换网络环境 4. 在新页面打开预览链接测试 5. 如果是老项目，先咨询确认是否是PWA问题，再决定是否移除PWA支持 ``` *** ### 登录相关问题 #### 管理员后台入口及角色自动跳转 很多包含权限体系的应用（如后台管理系统、多角色平台）在登录后会**根据账号的角色自动跳转**到不同页面，而不是通过固定 URL 访问管理后台。 **如何进入管理员后台**： 1. 打开项目后，点击页面右上角或顶部的**端切换入口**（通常显示为下拉菜单或"切换端"按钮） 2. 在下拉菜单中选择「管理端」或「管理后台」 3. 使用拥有**管理员权限的账号**登录 **如果登录后未跳转到管理后台**： * 检查当前账号是否已被赋予管理员角色 * 进入「研发 → 数据库 → users 表（或角色表）」，找到对应账号，将 `role` 字段设置为 `admin`（具体字段名以项目实际设计为准） * 也可以在咨询模式询问 AI：「我的项目里如何给一个用户设置管理员权限？」 **如果不确定管理端 URL**： * 在研发页面，点击右上角「+」按钮，进入「**云选项卡**」 * 使用咨询模式询问 AI：「我的项目有几个端？管理端的路径是什么？」 *** #### 登录按钮点击无反应 **问题现象**: * 登录按钮点击后没有任何反应 * 登录后页面空白 * 多个管理后台无法登录 **解决方案**: 1. **使用检修功能**:点击对话框下方的"检修"按钮，让系统自动修复 2. **咨询确认原因**:如果检修无效，先使用"咨询"模式询问： ``` 我的登录按钮点击无反应，可能是什么原因？是否需要使用原生 fetch 代替 Supabase SDK 调用？ ``` * 根据AI的建议确认是否需要执行修复 * 如果确认需要，再在对话中输入"使用原生 fetch 代替 Supabase SDK 调用" 3. **检查浏览器**:尝试使用不同的浏览器（推荐Chrome） 4. **清除缓存**:清除浏览器缓存后重新登录 5. **检查登录方式**:确认项目中已启用对应的登录方式（邮箱/手机/Google） **操作步骤**: ``` 1. 点击"检修"按钮 2. 等待系统自动修复 3. 如果还是不行，先咨询确认原因和解决方案 4. 根据建议决定是否执行修复指令 5. 刷新页面测试 6. 检查研发→服务→superun云服务→身份验证设置中的登录方式是否已启用 ``` *** ### 图片上传问题 #### 图片上传失败 **问题现象**: * 后台所有图片上传功能全部失败 * 上传后无法显示 **解决方案**: 1. **检查存储服务**:确认 superun 中的存储服务配置是否正确 * 进入"研发→服务→superun 文件存储" * 检查存储服务是否已启用 2. **使用替代方案**:可以先将图片上传到 superun 文件存储，然后在对话中引用图片链接 3. **使用检修功能**:点击"检修"按钮，让系统自动修复上传功能 4. **重新配置**:在对话中要求重新配置图片上传功能 **正常使用方法**: * 关于图片上传的正常使用方法，请参考[阶段2:图片使用技巧](#图片使用技巧) * 包括：在聊天中直接上传、使用设计编辑器替换、上传到 superun 文件存储 *** ### 页面显示异常 #### 页面空白或内容被遮挡 **问题现象**: * 页面显示为空白 * 内容被其他元素遮挡 * 功能按钮消失 **解决方案**: 1. **使用检修功能**:首先点击"检修"按钮自动修复 2. **回滚版本**:如果修复无效，回滚到之前正常的版本 3. **调整布局**:如果页面布局有问题，先使用"咨询"模式询问： ``` 我的页面显示异常/内容被遮挡，可能是什么原因？是否需要调整页面布局为三段式（header/选择器/内容）？ ``` * 根据AI的建议确认是否需要调整布局 * 如果确认需要，再在对话中要求调整页面布局为三段式 4. **刷新页面**:修复后刷新页面查看更新 5. **检查控制台**:按F12打开浏览器控制台，查看是否有错误信息，将错误信息告诉AI进行修复 **操作步骤**: ``` 1. 点击"检修"按钮 2. 如果还是不行，回滚到正常版本 3. 先使用"咨询"模式确认问题和解决方案 4. 根据建议决定是否需要调整布局 5. 刷新页面测试 ``` *** ### 功能修复反复失败 #### 修复后功能又失效 **问题现象**: * 修复后功能又失效 * 同一问题多次修复仍不成功 * 算力值消耗过多 **解决方案**: 1. **回滚版本**:回滚到正常工作的版本，换个思路重新修复 2. **使用咨询模式**:先使用"咨询"模式规划方案，确认后再执行 3. **避免反复对话**:不要反复对话同一个问题，容易陷入错误循环 4. **复杂功能使用AI工具**:对于海报编辑器等复杂功能，建议使用 superun 生图 等 AI 工具 5. **停止当前对话**:如果发现AI陷入错误循环，停止当前对话，重新开始 **正确的 debug 流程**: 参考[阶段1:省钱:出 bug 时,别急着让它乱改](#省钱:出-bug-时,别急着让它乱改)中的标准流程： 1. **理解问题**:把报错复制出来，问 AI:"这是什么意思，问题可能在哪" 2. **确认思路**:和 AI 讨论可能的解决方案 3. **再修改**:确认思路后再让它修改 > 💡 **提示**:模型有个特点，如果一开始错了，就容易陷入错误螺旋出不来。所以发现问题要及时停止，换个思路。 *** ### 域名绑定与SEO问题 #### 域名绑定失败 **问题现象**: * GoDaddy 一级域名无法直接绑定 CNAME * 域名解析后跳转到 superun 首页 **解决方案**: 1. **使用 Cloudflare**:将域名的 nameserver 改到 Cloudflare，然后通过后台绑定 * 在域名注册商处将 nameserver 改为 Cloudflare 提供的地址 * 在 superun 后台通过 Cloudflare 绑定域名 2. **手动告诉AI**:先使用"咨询"模式询问： ``` 我的域名绑定后跳转到superun首页，可能是什么原因？需要如何修改配置？ ``` * 根据AI的建议确认需要修改的域名 * 如果确认需要，再在对话中明确告诉AI正确的域名，让AI修改配置 **操作步骤**: ``` 1. 在域名注册商处将 nameserver 改为 Cloudflare 2. 在 superun 后台通过 Cloudflare 绑定域名 3. 等待DNS生效（通常几分钟到几小时） ``` *** ### 字体与样式修改 #### 数字字体无法修改 **问题现象**: * 数字字体无法通过对话修改 * 文字和图片不协调 **解决方案**: 1. **使用选择元素编辑**:点击"选择元素并编辑"功能，选中要修改的元素，然后对话修改 2. **上传字体文件**:上传 .ttf 字体文件，让AI使用该字体 * 在对话中上传字体文件 * 告诉AI使用这个字体替换指定元素的字体 3. **使用手动编辑**:对于样式调整，直接使用手动编辑功能 4. **提供参考图**:上传参考图片，让AI参考样式进行调整 **操作步骤**: ``` 1. 点击"选择元素编辑"按钮（光标图标） 2. 在画布上选择要修改的元素 3. 在对话中输入修改需求 4. 或者上传字体文件，让AI使用 ``` *** ### 音效播放问题 #### 音效播放不稳定 **问题现象**: * 音效有时有声音有时没有 * 播放不稳定 **解决方案**: 1. **重新上传**:重新上传音效文件 2. **本地缓存**:先使用"咨询"模式询问： ``` 我的音效播放不稳定，有时有声音有时没有，可能是什么原因？是否需要将音频文件缓存到本地？ ``` * 根据AI的建议确认是否需要实现音频预加载和缓存 * 如果确认需要，再在对话中要求实现音频预加载和缓存功能 3. **检查代码**:使用"检修"功能检查音效播放逻辑 4. **检查文件格式**:确认音频文件格式是否支持（推荐使用 MP3 或 WAV 格式） **操作步骤**: ``` 1. 重新上传音效文件 2. 先使用"咨询"模式确认是否需要实现音频缓存 3. 根据建议决定是否需要实现音频预加载和缓存 4. 使用"检修"功能检查播放逻辑 5. 测试播放功能 ``` *** ### 咨询讨论后不知道如何落地 **问题现象**: * 在咨询模式下与苏小强讨论后,项目没有发生变化 * 不清楚如何把讨论结论变成实际修改 **解决方案**: **咨询模式的作用**: 1. **只讨论不改动** – 咨询模式用于与苏小强讨论想法,方案和需求,不会触发编辑或重新生成 2. **回到主流程执行** – 确认方向后,在输入区切回主流程,描述要做的修改并发送,系统才会执行 3. **完全免费** – 咨询模式不消耗算力值 **咨询进行中无法重复发送**: * 已有一条咨询进行中时,发送按钮会置灰,避免多条咨询互相干扰 * 等待当前咨询结束后再继续 **正确流程**: ``` 1. 点击输入区右下角「免费咨询」进入咨询模式 2. 与苏小强讨论方案（可上传参考图 / 文档） 3. 确认方向后,切回主流程输入框 4. 描述要做的修改并点击发送执行 ``` **相关技巧**: * 关于咨询模式的使用，请参考[阶段1:省钱:多用「聊天模式」想清楚](#省钱:多用「聊天模式」想清楚,再让-ai-动手) * 参见 [认识苏小强](/superun/introduction/su-xiaoqiang) 了解主动提醒与等待推介 *** ### 支付问题 #### 微信支付安全检测慢 **问题现象**: * 微信支付安全检测速度很慢 **解决方案**: 1. **清除缓存**:清除浏览器缓存后重试 2. **等待处理**:支付安全检测可能需要一些时间，请耐心等待 3. **检查网络**:确保网络连接稳定 **操作步骤**: ``` 1. 清除浏览器缓存 2. 重新打开支付页面 3. 确保网络连接稳定 ``` *** ### 文件上传与替换 #### 无法替换图片 **问题现象**: * 无法替换页面中的图片 * 上传文件后无法使用 **解决方案**: 1. **使用选择元素编辑**:点击"选择元素编辑"，选中图片，在对话中提供新图片地址 2. **使用 superun 文件存储**:将图片上传到 superun 文件存储，然后在对话中引用图片链接 * 进入"研发→服务→superun 文件存储" * 上传图片文件到文件存储 * 获取图片链接后在对话中使用 3. **使用设计编辑器**:点击顶部导航栏的"设计编辑器"按钮，可视化替换图片 * 在设计编辑器中，如果选不中图片，可以右键选择正确的层级元素 * 选择图片后，直接选择新图片完成替换 4. **在对话中描述**:截图标注要替换的图片位置，在对话中描述替换需求 **正常使用方法**: * 关于图片上传和替换的正常使用方法，请参考[阶段2:图片使用技巧](#图片使用技巧) * 关于 superun 文件存储的详细使用，请参考[阶段2:项目图片上传到 superun storage](#项目图片上传到-superun-storage) *** ### 系统更新失败 #### 更新时提示系统异常 **问题现象**: * 更新时提示"系统异常"或者更新失败 **解决方案**: 1. **检查网络**:可能是网络问题，等待片刻后重试 2. **等待处理**:如果系统正在处理任务，等待任务完成 3. **已是最新版本**:如果已是最新版本，无需再次更新（不会显示"更新"按钮） 4. **使用检修功能**:点击"检修"按钮，让系统自动修复 5. **刷新页面**:刷新页面后重新尝试更新 **操作步骤**: ``` 1. 检查是否有任务正在处理 2. 等待任务完成后重试 3. 如果已是最新版本，无需更新 4. 使用"检修"功能修复 5. 刷新页面重试 ``` *** ### 移动端适配问题 #### 移动端显示异常 **问题现象**: * 移动端页面显示异常 * 页面适配不佳 **解决方案**: 1. **使用咨询模式**:在对话中使用"咨询"模式，询问移动端显示问题： ``` 我的移动端页面显示异常，页面适配不佳，可能是什么原因？需要如何优化？ ``` * 根据AI的建议确认优化方案 * 如果确认需要，再要求AI实现响应式设计，适配不同屏幕尺寸 2. **检查浏览器**:在移动设备上使用现代浏览器（Chrome、Safari等） **移动端优化方案**: 参考[移动端体验优化](#移动端体验优化)部分，包括： * 响应式设计：适配不同屏幕尺寸、优化触控互动、调整布局和字体大小 * 渐进式网页应用（PWA）：可以添加到主屏幕、支持离线访问、提供类原生体验、推送通知功能 *** ### 网络异常和任务卡住问题 #### 网络异常提示 **问题现象**: * 经常弹出"网络异常"提示 * 任务一直处于"读取控制台日志"进程中 **解决方案**: 1. **等待处理**:可能是请求量过高，等一会就好了 2. **检查网络**:访问 `https://net-test.superun.app/` 测试网络连接 3. **切换网络**:尝试切换网络环境（如使用手机热点） 4. **刷新页面**:刷新页面后重新尝试 5. **清除缓存**:清除浏览器缓存后重试 **操作步骤**: ``` 1. 等待1-2分钟，看是否自动恢复 2. 测试网络连接 3. 如果还是不行，切换网络环境 4. 清除缓存后重试 ``` *** ### 部署问题解决 #### superun 生成的是网页应用 superun 生成的是网页应用,不是原生应用. **说明**: * superun 目前只能生成网页应用 * 无法直接生成 iOS 或 Android 原生应用 * 可以通过响应式设计适配移动端 **移动端方案**: * 响应式设计 * 渐进式网页应用（PWA） * 混合应用框架 *** #### 后台管理系统部署 需要在项目中添加后台管理功能?superun 会在同一个项目中为你添加后台管理的路由,重点是要配置好访问权限. **工作原理**: * superun 会在你的项目中添加后台管理相关的路由和页面 * 后台管理功能与主应用运行在同一个项目中,共享相同的域名和部署地址 * 主要通过路由路径区分前台和后台（例如:`/admin` 或 `/dashboard`） **重要:配置访问权限**: * **设置身份验证**:确保后台管理页面需要登录才能访问 * **定义角色权限**:区分管理员和普通用户,只有管理员可以访问后台功能 * **保护敏感路由**:使用路由守卫或中间件保护后台管理相关的路由 * **限制数据访问**:确保后台只能查看和修改授权的数据 **实施步骤**: 1. 让 superun 生成后台管理系统（会添加相应的路由和页面） 2. 配置身份验证和权限控制 3. 测试访问权限,确保只有授权用户可以访问 > 💡 **提示**:后台管理系统是项目的一部分,不需要单独部署.最重要的是确保访问权限配置正确,防止未授权访问. *** #### 移动端体验优化 移动端体验?使用响应式设计或渐进式网页应用. **响应式设计**: * 适配不同屏幕尺寸 * 优化触控互动 * 调整布局和字体大小 **渐进式网页应用（PWA）**: * 可以添加到主屏幕 * 支持离线访问 * 提供类原生体验 * 推送通知功能 *** ### 通用问题解决流程 #### 遇到问题时的标准流程 **第一步:理解问题** * 把报错信息复制出来 * 问AI:"这是什么意思，问题可能在哪" * 不要一看到错误就让AI随便改 **第二步:使用检修功能** * 点击"检修"按钮 * 让系统自动修复常见问题 * 检修功能完全免费，不消耗算力值 **第三步:咨询方案** * 如果检修无效，使用"咨询"模式 * 与AI讨论可能的解决方案 * 确认思路后再执行 **第四步:回滚版本** * 如果问题复杂，回滚到之前正常的版本 * 换个思路重新修复 * 避免陷入错误循环 **第五步:检查网络和缓存** * 检查网络连接是否正常 * 清除浏览器缓存 * 尝试使用不同的浏览器 > 💡 **提示**:先理解问题再修复，不要盲目修改。使用检修功能是免费的，遇到问题先试试检修。大部分问题都可以通过检修功能、咨询模式、版本回滚和清除缓存来解决。 ***