From: wang.yu <wang.yu@advantech.com>
Date: Mon, 17 Aug 2026 08:54:42 +0000 (+0800)
Subject: docs: 设计文档补充左侧导航菜单完整结构与各菜单项说明
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=790f81dd50596638e141f18f795cc56a56ccd95d;p=StationBuilder.git

docs: 设计文档补充左侧导航菜单完整结构与各菜单项说明

- 4.2 新增左侧导航整体结构（side-nav）树形图，覆盖三大模块上下文的全部菜单项
- 4.2 表格逐条说明每个导航元素的功能/数据来源/交互效果
- 原模块切换与站点列表/详情小节顺延为 4.3 / 4.4
---

diff --git a/public/design-doc.html b/public/design-doc.html
index 7da01e0..753604e 100644
--- a/public/design-doc.html
+++ b/public/design-doc.html
@@ -97,7 +97,55 @@
     <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>
@@ -106,7 +154,7 @@
     <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>