深浅模式
编辑器界面说明
路径:UI管理 → 页面配置 → 进入某页面的 设计 界面。
整体布局
电脑宽屏
| 区域 | 功能 |
|---|---|
| 顶栏工具栏 | 返回、撤销/重做、清空、导入导出、预览、保存 |
| 左侧组件库 | 按分类展示可添加的组件,点击即插入画布 |
| 中间画布 | 750rpx 宽手机预览框,含状态栏与导航栏模拟 |
| 右侧属性面板 | 「属性」「样式」两个 Tab;未选中组件时为页面配置 |
| AI 面板(可选) | 右侧或独立栏,描述需求生成布局 |
手机管理端
底部四个 Tab 切换:组件 | 画布 | AI | 属性,功能与宽屏一致。
顶栏工具栏
| 按钮 | 作用 |
|---|---|
| 返回 | 回到页面配置列表(未保存会提示) |
| 撤销 / 重做 | 回退或恢复编辑操作 |
| 清空 | 删除画布上全部组件(需确认) |
| 导出 JSON | 下载当前页面配置,用于备份或迁移 |
| 导入 JSON | 从文件恢复布局(覆盖当前画布) |
| 预览 | 截取手机框截图,弹层查看效果(不发布) |
| 保存 | 写入服务器;可选更新列表封面图 |
画布操作
| 操作 | 方法 |
|---|---|
| 选中组件 | 点击画布上的组件块 |
| 取消选中 | 点击画布空白或导航栏下方空白 |
| 调整顺序 | 选中后使用 上移 / 下移 |
| 复制 | 复制 生成一份相同配置的组件 |
| 删除 | 删除 移除该组件 |
选中时组件周围有高亮边框,右侧同步显示其属性。
右侧属性面板
未选中组件时 — 页面配置
根据页面类型不同,面板标题为 页面配置、圈子配置 或 服务表单:
通用页面配置(首页、自定义页等):
| 分组 | 可配置项 |
|---|---|
| 页面背景 | 背景颜色 |
| 顶部背景图 | 图片、背景图高度 |
| 导航栏 | 是否显示标题/返回按钮、标题文字与对齐、导航栏样式(默认/胶囊/自定义/无) |
| 胶囊导航 | 胶囊颜色、圆角、阴影等(选胶囊样式时) |
| 分享 | 分享标题、分享图片 |
圈子页 额外有头区布局、动态列表是否跟随首页等,见 页面类型 — 社区圈子。
服务表单页 额外有履约模式、计价公式等,见 页面类型 — 服务表单。
选中组件时
| Tab | 内容 |
|---|---|
| 属性 | 该组件的业务内容(文案、图片、数据源、跳转等) |
| 样式 | 尺寸、内外边距、背景、圆角、边框、透明度、阴影 |
列表 section 类组件有特殊说明,见 样式与点击动作。
左侧组件库
组件按 6 大类折叠展示:
- 基础元素、布局导航、信息展示、社区内容、运营模块、表单/服务
灰色不可点 的组件表示当前页面类型不允许使用(例如首页不能添加表单组件)。
圈子页 左侧还会出现 头区布局、笔记卡片模板 等圈子专属配置项,不属于画布组件。
页面列表面板
在 UI管理 → 页面配置 列表页:
| 元素 | 说明 |
|---|---|
| 封面图 | 保存时生成的截图;无图时显示占位 |
| 类型标签 | 首页 / 功能页 / 自定义页 等 |
| 状态 | 启用(绿色)或 禁用 |
| 设计 | 进入可视化编辑器 |
| 启用 / 禁用 | 切换对用户生效的版本 |
| 复制 | 复制为新的配置草稿 |
| 删除 | 删除该条配置 |
顶部 区域筛选 决定当前列表与新建页面所属区域。
导入导出使用场景
| 场景 | 做法 |
|---|---|
| 测试环境 → 生产环境 | 测试环境导出 JSON,生产环境同类型页面导入 |
| 备份 | 重大改版前导出一份 JSON 存档 |
| 多区域快速复用 | 平台默认导出 → 目标区域新建同类型 → 导入 → 微调 → 启用 |
导入会 覆盖 当前画布全部内容,操作前请确认或先导出备份。
