*@UI 视角下主程序与子程序的菜单页面架构及关联设计

摘要

从 UI 设计角度，主程序与子程序构成 “顶层容器 - 业务模块” 的嵌套架构，二者通过 “共有菜单及页面” 实现统一体验，通过 “私有菜单及页面” 承载差异化业务。本文详细阐述这一架构中菜单、页面的层级关系、共有元素设计逻辑及交互规则，为多模块系统的 UI 一致性与业务独立性平衡提供参考，便于团队在设计与开发中保持统一标准，同时支持业务灵活扩展。

一、整体架构与层级关系

1. 核心层级（从 UI 容器到内容元素）

• 主程序 UI：系统最顶层容器，包含全局框架（如顶部导航栏、左侧主菜单区、底部版权栏），负责承载所有子程序，同时提供跨子程序的共有功能入口。
• 子程序 UI：在主程序框架内运行的业务模块，拥有独立的功能域（如 “物业管理”“碳排放管理”），包含私有菜单和页面，同时继承主程序的共有元素。
• 菜单体系：分为 “共有菜单”（主程序与子程序共享）和 “私有菜单”（子程序专属），均遵循 “一级主菜单→二级子菜单” 的树状结构，每个子菜单映射唯一页面。
• 页面及详情：页面是菜单的载体，包含具体 UI 元素（表单、图表、按钮等）；页面详情指元素的布局、交互逻辑（如表单验证规则、图表刷新频率）。

2. 层级关系特点

• 主程序 UI 包含子程序 UI（类似 “浏览器 - 网页” 关系），子程序 UI 无法脱离主程序独立展示。
• 共有菜单及页面属于主程序，被所有子程序共享；私有菜单及页面属于子程序，仅在对应模块内可见。