]> acesimba.cloud Git - StationBuilder.git/commitdiff
docs: 设计文档补充左侧导航菜单完整结构与各菜单项说明
authorwang.yu <wang.yu@advantech.com>
Mon, 17 Aug 2026 08:54:42 +0000 (16:54 +0800)
committerwang.yu <wang.yu@advantech.com>
Mon, 17 Aug 2026 08:54:42 +0000 (16:54 +0800)
- 4.2 新增左侧导航整体结构(side-nav)树形图,覆盖三大模块上下文的全部菜单项
- 4.2 表格逐条说明每个导航元素的功能/数据来源/交互效果
- 原模块切换与站点列表/详情小节顺延为 4.3 / 4.4

public/design-doc.html

index 7da01e060f910643ccccd34a37dcc41cc55b65a7..753604e431dde7bb27dfe5bc9047f80acaf3b49f 100644 (file)
     <tr><td>登录者头像 W / 邮箱</td><td>当前登录身份展示;返回登录页</td><td>静态演示</td><td>点击头像回到内部登录页 <span class="todo">登录态尚未实现</span></td></tr>
   </table>
 
-  <h3>4.2 左侧模块切换(module-switch)</h3>
+  <h3>4.2 左侧导航整体结构(side-nav)</h3>
+  <p>左侧导航由固定顶部的「模块切换」+ 随当前模块/页面动态渲染的「分组与菜单项」组成。同一时刻仅一个模块高亮,菜单项按当前所在模块展示不同内容。完整结构如下:</p>
+  <pre>side-nav
+├─ 模块切换 module-switch(互斥,仅一个高亮)
+│   ├─ StationBuilder        → 站点项目(站点列表)
+│   ├─ 领域方案库             → 领域方案库页
+│   └─ 页面样式库             → 页面样式库页
+│
+├─ 【StationBuilder 模块时】(当前页非 方案库/样式库)
+│   ├─ 站点列表
+│   │   └─ 站点项目           → projects
+│   └─ 站点详情
+│       ├─ 站点切换器 &lt;select&gt;(列出全部站点)
+│       ├─ 生成向导
+│       │   ├─ 1 基本属性     → basic
+│       │   ├─ 2 资产         → assets
+│       │   ├─ 3 功能与菜单   → functions
+│       │   └─ 4 生成确认     → generate
+│       └─ 方案交付
+│           ├─ 站点结果        → result
+│           └─ 页面预览        → preview
+│
+├─ 【领域方案库模块时】(domains / domainDetail)
+│   ├─ 方案库导航
+│   │   ├─ 全部领域方案        → domains
+│   │   └─ 方案详情            → domainDetail
+│   └─ 领域分类(当前以「水务 · 自来水厂」为示例激活项)
+│       ├─ 燃气                → 提示(占位)
+│       ├─ 水务 · 自来水厂     → domainDetail
+│       ├─ 新能源              → 提示(占位)
+│       └─ 数据中心            → 提示(占位)
+│
+└─ 【页面样式库模块时】(styleLibrary)
+    └─ 样式库导航
+        └─ 全部页面样式        → styleLibrary</pre>
+
+  <table>
+    <tr><th>导航元素</th><th>所属模块 / 分组</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
+    <tr><td>模块切换三个按钮</td><td>module-switch</td><td>切换三大模块</td><td>前端 state(page)</td><td>互斥高亮;点击切换至模块首页(见 4.3)</td></tr>
+    <tr><td>站点项目</td><td>StationBuilder / 站点列表</td><td>进入站点列表</td><td>—</td><td>点击 go("projects");当前页高亮</td></tr>
+    <tr><td>站点切换器 &lt;select&gt;</td><td>StationBuilder / 站点详情</td><td>在已建站点间快速切换</td><td>GET /api/db/sites</td><td>选择后加载该站点并跳转(在列表页则进基本属性,在详情页则停留在当前子页)</td></tr>
+    <tr><td>1 基本属性 / 2 资产 / 3 功能与菜单 / 4 生成确认</td><td>StationBuilder / 生成向导</td><td>生成向导分步导航</td><td>前端 state</td><td>点击 go 对应页;当前步骤高亮;已完成步骤可回跳</td></tr>
+    <tr><td>站点结果 / 页面预览</td><td>StationBuilder / 方案交付</td><td>查看生成结果与预览</td><td>—</td><td>点击 go("result" / "preview");当前页高亮</td></tr>
+    <tr><td>全部领域方案 / 方案详情</td><td>领域方案库 / 方案库导航</td><td>方案库列表与详情</td><td>前端硬编码演示</td><td>点击 go("domains" / "domainDetail");当前页高亮 <span class="todo">真实方案库尚未接入</span></td></tr>
+    <tr><td>领域分类四类</td><td>领域方案库 / 领域分类</td><td>按领域筛选方案</td><td>前端硬编码(燃气/水务/新能源/数据中心)</td><td>水务进详情、其余提示占位;当前示例高亮「水务 · 自来水厂」</td></tr>
+    <tr><td>全部页面样式</td><td>页面样式库 / 样式库导航</td><td>样式库列表</td><td>GET /api/db/page-styles</td><td>点击 go("styleLibrary");当前页高亮</td></tr>
+  </table>
+
+  <h3>4.3 模块切换(module-switch)</h3>
   <p>三个互斥模块,同一时刻仅一个高亮:</p>
   <table>
     <tr><th>模块</th><th>功能</th><th>点击效果</th></tr>
     <tr><td>页面样式库</td><td>可复用的 Cube 视觉样式</td><td>进入「页面样式库」页</td></tr>
   </table>
 
-  <h3>4.3 站点列表 / 站点详情 分组与站点切换器</h3>
+  <h3>4.4 站点列表 / 站点详情 分组与站点切换器</h3>
   <p>StationBuilder 模块下分两类:</p>
   <ul>
     <li><b>站点列表</b>:站点项目页,负责站点的查看、搜索、编辑与删除(含批量删除)。</li>