深浅模式
灵萌的 UI 可视化编辑器 是系统核心特色之一:无需改代码,在管理后台拖拽组件、调整样式与跳转,即可为不同区域定制客户端界面。
使用环境
UI 编辑器 仅支持 H5 浏览器(电脑 Chrome / Edge 体验最佳)。请勿在小程序内打开管理后台。
入口位置
| 功能 | 菜单路径 |
|---|---|
| 页面列表与可视化设计 | UI管理 → 页面配置 |
| 底部 Tab 导航 | UI管理 → TabBar配置 |
| 笔记标签样式 | UI管理 → 自定义标签 |
前置条件:侧栏出现 UI管理(需在 系统设置 → 我的模块 中已开通 UI 配置能力)。
能做什么
- 为 首页、发现页、自定义页、圈子页、跑腿表单页 等拖拽搭建界面
- 配置 个人中心、消息中心、设置页 等面板类页面
- 按 区域 分别保存 UI(多校区/多社区各自一套)
- 配置底部 TabBar 图标、文案、跳转与发布弹窗
- 使用 AI 助手 根据描述生成页面布局(可选)
编辑器三栏布局
┌──────────────┬─────────────────────────┬──────────────┐
│ 左侧组件库 │ 中间手机预览画布 │ 右侧属性面板 │
│ 点击添加组件 │ 点击选中 / 排序 / 删除 │ 属性 + 样式 │
└──────────────┴─────────────────────────┴──────────────┘宽屏电脑为三栏;手机管理端底部切换 组件 / 画布 / AI / 属性 四个 Tab。
组件库概览(39 种)
| 分类 | 数量 | 典型组件 |
|---|---|---|
| 基础元素 | 4 | 文本、图片、按钮、模块标题 |
| 布局导航 | 5 | 轮播图、金刚区、搜索栏、筛选标签 |
| 信息展示 | 3 | 列表、通知栏、结束文本 |
| 社区内容 | 8 | 笔记列表、瀑布流、圈子列表、热门话题 |
| 运营模块 | 3 | 首页榜单、双卡行动、小程序广告 |
| 表单/服务 | 16 | 输入框、选项、地址、提交底栏(仅服务表单页) |
配置的两层逻辑
与全站其它功能一致:
| 层级 | 说明 |
|---|---|
| 平台默认(区域 ID = 0) | 各区域未单独配置时继承 |
| 区域专属 | 在页面列表顶部选择区域后编辑保存 |
同一页面类型、同一区域 只能有一条「启用」 的配置对用户生效。
推荐阅读顺序
- 快速上手 — 创建、编辑、保存、启用
- 从零搭建首页 — 完整案例(推荐)
- 编辑器界面说明 — 工具栏、撤销、导入导出
- 页面类型说明 — 首页/面板/表单页区别
- 样式与点击动作 — 通用样式面板、跳转配置
- 按需查阅 组件手册
- TabBar 配置
- AI 生成页面(可选)
