深浅模式
AI 生成页面
UI 编辑器内置 AI 助手，可根据文字描述自动生成页面布局，再人工微调后保存。
入口
在可视化编辑器（设计 界面）中：
- 宽屏：右侧或独立栏 AI 面板
- 手机管理端：底部 Tab 切换到 AI
使用步骤
1. 描述需求
在输入框用自然语言说明想要的页面，例如：
text
做一个校园首页：顶部轮播图，下面 4 列金刚区（二手、跑腿、投票、活动），
再下面放热门话题和笔记列表描述越具体，生成结果越接近预期（组件类型、顺序、数量）。
2. 生成
点击 生成（或类似按钮），等待 AI 返回布局方案。
生成过程会调用服务端 AI 能力，需已配置 AI 中台（供应商 → 模型 → 场景路由）。
3. 预览与应用
- 生成结果以 预览 形式展示
- 确认后点击 应用到画布
- 会覆盖当前画布已有内容，重要页面请先 导出 JSON 备份
4. 人工微调
AI 生成后建议逐项检查：
- 轮播图、金刚区图片是否需替换为实际上传素材
- 点击动作 是否指向正确页面
- 列表类组件是否与 筛选标签 正确联动
- 间距、颜色在 样式 Tab 中微调
5. 保存并启用
与普通编辑相同：保存 → 列表 启用。
适用场景
| 适合 | 不太适合 |
|---|---|
| 快速搭首页框架 | 精细像素级视觉稿 |
| 新站点冷启动 | 复杂表单计价逻辑 |
| 复制相似结构到新区 | 圈子页头区专属配置 |
注意事项
- AI 使用的是 当前页面类型 允许的组件子集（例如服务表单页不会生成轮播图）
- 生成内容中的 示例图片、文案 需替换为真实运营素材
- 笔记列表等 数据组件 在编辑器中为演示数据，客户端会拉取真实 API
- AI 调用计入 AI 用量，可在 AI中台 → 用量与日志 查看
与 AI 中台的关系
| 层级 | 作用 |
|---|---|
| AI 中台 | 配置模型、密钥、场景路由（管理员一次性配置） |
| UI 编辑器 AI 面板 | 运营人员日常生成页面布局 |
未配置 AI 中台时，AI 面板不可用或报错，请先在 AI中台 → 供应商管理 添加可用模型。