深浅模式
TabBar 配置
路径：UI管理 → TabBar配置
底部 Tab 导航 独立于页面画布 存储。改 TabBar 不会自动改首页 UI，两者需分别保存。
页面说明
| 区域 | 功能 |
|---|---|
| 左侧（宽屏） | 区域选择 + TabBar 效果预览 |
| 右侧 | Tab 项列表与样式配置 |
| 顶栏 | 保存配置 按钮 |
手机端底部切换 预览 / 配置编辑。
配置步骤
1. 选择区域
顶部 配置区域：
- 平台默认（0）：未单独配置的区域继承此 TabBar
- 具体区域：覆盖平台默认，仅该区域用户生效
2. 总开关
| 项 | 说明 |
|---|---|
| 显示 TabBar | 关闭后客户端隐藏整个底部导航（慎用） |
3. 编辑 Tab 项
每个 Tab 可配置：
| 项 | 说明 |
|---|---|
| 文字 | 底部显示文案 |
| 图标 | 未选中 / 选中两套图标（图标字体或图片） |
| 点击动作 | 一般为 切换 Tab 到某个页面路径 |
| 角标 | 可选数字角标（部分场景） |
常见 Tab 对应关系：
| Tab 名称 | 通常跳转 | 对应 UI 页面类型 |
|---|---|---|
| 首页 | 首页路由 | 应用首页（home） |
| 发现/圈子 | 发现页路由 | 功能页面（feature） |
| 消息 | 消息 Tab | 消息中心（news） 面板 |
| 我的 | 个人中心 Tab | 个人中心（profile） 面板 |
4. 中间「发布」按钮（可选）
部分站点 TabBar 中间为 凸起发布按钮，点击打开发布弹窗而非切换页面。
可配置：
- 是否启用中间按钮
- 发布弹窗 主题样式（颜色、圆角）
- 弹窗内 菜单项（发笔记、发闲置、跑腿等）
在 TabBar 配置面板内编辑，保存后客户端点击中间按钮生效。
5. TabBar 外观
| 项 | 说明 |
|---|---|
| 背景色 | Tab 栏底色 |
| 边框色 | 顶部分割线 |
| 胶囊模式 | 底部 Tab 呈悬浮胶囊形态 |
| 液态玻璃 | 毛玻璃模糊效果（可调校 blur、饱和度、高光） |
| 圆角 | 顶部左右圆角 |
| 点击震动 | 切换 Tab 时震动反馈 |
右侧预览区可实时查看效果。
6. 保存
点击 保存配置。未保存离开页面会丢失修改。
与页面配置的配合
text
TabBar 决定「点哪个 Tab」
↓
页面配置决定「进入 Tab 后看到什么」检查清单：
- [ ] Tab 点击动作指向的路由存在且可访问
- [ ] 对应 页面类型 已在 页面配置 中 启用
- [ ] 新业务 Tab（外卖、闲置）仅在模块开通后添加，避免用户点进空白页
多区域 TabBar
- 先做 平台默认 TabBar
- 某区域需减少 Tab（如未开外卖）→ 切换到该区域 → 删除或隐藏对应 Tab → 保存
- 客户端切换区域后 Tab 数量可能变化
验证
- 修改某 Tab 文案（如「首页」→「广场」）并保存
- 客户端切换至 同一区域
- 杀进程重进，底部文案已更新
常见问题
Tab 点击无反应或空白页
- 点击动作路径错误
- 目标页面 UI 未 启用
- 业务模块未开通
改了 TabBar 首页内容没变
- 首页内容由 应用首页（home） 页面配置控制，不是 TabBar
预览与客户端不一致
- 确认区域一致；部分样式仅小程序/App 完整呈现