.flow{ background:#fafbfc; border:1px solid var(--line); border-radius:4px; padding:12px 14px; }
.flow ol{ counter-reset:step; }
.kbd{ border:1px solid #ccc; border-bottom-width:2px; border-radius:3px; padding:0 5px; font-size:12px; background:#fafafa; }
- .doc-layout{ display:flex; align-items:flex-start; max-width:1180px; margin:0 auto; }
+ .doc-layout{ display:flex; align-items:flex-start; max-width:1180px; margin:0; padding-left:12px; }
.doc-nav{ position:sticky; top:56px; flex:0 0 230px; align-self:flex-start; max-height:calc(100vh - 56px);
overflow:auto; padding:18px 10px 40px 6px; border-right:1px solid var(--line); }
.doc-nav .doc-nav-inner{ display:flex; flex-direction:column; }
/* 页面截图（参考 MachineCube 手册撰写方式：小节标题 + 说明 + 下图 + 配图 + 图注）*/
body{ counter-reset: fig; }
.figure{ margin:14px 0; border:1px solid var(--line); background:#fbfcfd; }
- .figure img{ display:block; width:100%; height:auto; border-bottom:1px solid var(--line); }
+ .figure img{ display:block; max-width:360px; width:auto; height:auto; border-bottom:1px solid var(--line); margin:0 auto; }
.figure figcaption{ counter-increment: fig; padding:9px 12px; font-size:11px; color:#555; line-height:1.6; }
.figure figcaption::before{ content:"图 " counter(fig) " "; font-weight:bold; color:#333; }
.figure.placeholder img{ min-height:180px; object-fit:cover; background:repeating-linear-gradient(45deg,#f1f3f5,#f1f3f5 12px,#e7eaed 12px,#e7eaed 24px); }
<nav class="doc-nav"><div class="doc-nav-inner" id="toc"></div></nav>
<main id="doc">
- <p class="muted">文档版本：v0.9 最后更新：2026-08-18 修改人：wang.yu 状态：开发中（演示数据已标注）</p>
+ <p class="muted">文档版本：v0.14 最后更新：2026-08-19 修改人：wang.yu 状态：开发中（演示数据已标注）</p>
<h1>StationBuilder 产品与交互设计方案</h1>
<h2>1. 文档说明</h2>
<tr><td>「使用公司账号登录」按钮</td><td>模拟登录进入主界面</td><td>静态</td><td>点击进入站点项目页 <span class="todo">真实账号体系尚未实现</span></td></tr>
</table>
+ <h4>5.1.1 交互细节</h4>
+ <figure><img src="design-doc-assets/login.png" alt="登录页"/><figcaption>登录页：iStation StationBuilder 统一登录入口。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b>：本页无可编辑字段，仅一个登录动作入口。</p>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>使用公司账号登录（SSO）</td><td>调用 <code>onLogin()</code> → <code>go("projects")</code>，进入「站点项目」页</td><td>无表单、无弹窗</td><td>无确认/取消/关闭步骤（真实账号体系 <span class="todo">尚未实现</span>）</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：点击右上角头像（<code>.avatar-button</code>，标题"查看内部登录页"）→ <code>go("login")</code>；应用启动默认页为 projects，非强制经过本页。</li>
+ <li><b>上一步</b>：无（登录为根入口）。</li>
+ <li><b>下一步</b>：站点项目（projects）。</li>
+ </ul>
+
<h3>5.2 站点项目 / 站点列表（projects）</h3>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
<tr><td>↻ 刷新</td><td>刷新列表</td><td>—</td><td>提示「列表已刷新」（实际未重新拉取） <span class="todo">尚未实现</span></td></tr>
</table>
+ <h4>5.2.1 交互细节</h4>
+ <figure><img src="design-doc-assets/projects.png" alt="站点项目"/><figcaption>站点项目：全部站点列表、统计概览、筛选与新建入口。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b>（列表表格，仅展示 + 选择，不可就地文本编辑）：</p>
+ <table>
+ <tr><th>列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>全选 / 行勾选框</td><td>本地 state <code>selected</code></td><td>可勾选</td><td>checkbox</td><td>仅用于「批量删除」的选中集合，不影响生成数据</td></tr>
+ <tr><td>站点名称 ↕</td><td>GET /api/db/sites（<code>name</code>）</td><td>不可编辑（点击为链接）</td><td>链接 → 进入详情</td><td>生成后作为站点标题、菜单根名称、结果页标题、生成提示词上下文</td></tr>
+ <tr><td>所属领域</td><td>sites.<code>domain</code></td><td>只读</td><td>文本</td><td>领域方案库分类维度、生成提示词领域上下文</td></tr>
+ <tr><td>设备数量 / MU 页面 / Cube 页面</td><td>sites 聚合（<code>device_count / mu_count / cube_count</code>）</td><td>只读</td><td>数字</td><td>结果页 / 生成范围统计口径</td></tr>
+ <tr><td>状态</td><td>sites.<code>status</code>（draft/running/generated/partial）</td><td>只读</td><td>Status 标签</td><td>决定是否从本页进入「站点结果」还是「基本属性」</td></tr>
+ <tr><td>最近修改</td><td>sites.<code>updated_at</code></td><td>只读</td><td>文本</td><td>展示</td></tr>
+ <tr><td>操作 / 删除</td><td>DELETE /api/db/sites/:id</td><td>触发动作</td><td>按钮（二次确认）</td><td>删除站点记录</td></tr>
+ </table>
+ <p>统计条（全部 / 草稿 / 生成中 / 生成完成 / 部分失败）由 sites 列表本地聚合，纯展示。</p>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>搜索框</td><td>输入即按名称前端过滤</td><td>文本输入</td><td>无弹窗（服务端查询 <span class="todo">尚未实现</span>）</td></tr>
+ <tr><td>领域 / 状态 下拉</td><td>选择即前端过滤</td><td>select（当前仅"全部"占位项）</td><td>无弹窗</td></tr>
+ <tr><td>Search</td><td>触发前端过滤提示</td><td>—</td><td>—</td></tr>
+ <tr><td>批量删除（勾选后出现）</td><td>DELETE 批量并刷新列表</td><td>多选后触发</td><td>二次确认后执行</td></tr>
+ <tr><td>视图切换 ☷ / ▦</td><td>切换表格 / 卡片展示</td><td>本地 state <code>view</code></td><td>无弹窗</td></tr>
+ <tr><td>↻ 刷新</td><td>提示"列表已刷新"</td><td>—</td><td>实际未重新拉取（<span class="todo">尚未实现</span>）</td></tr>
+ <tr><td>站点名称链接</td><td><code>go(status==="generated"?"result":"basic", id)</code></td><td>—</td><td>已生成→站点结果(result)；否则→基本属性(basic)</td></tr>
+ <tr><td>行「删除」</td><td>DELETE /api/db/sites/:id</td><td>—</td><td>二次确认后删除</td></tr>
+ <tr><td>＋ 新建站点</td><td><code>go("basic","new")</code> → 创建空白站点 → basic</td><td>—</td><td>直接进入基本属性新建态</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：登录后默认页 / 侧栏「站点项目」。</li>
+ <li><b>上一步</b>：无（站点模块顶层）。</li>
+ <li><b>下一步</b>：点击站点 → 基本属性(basic) 或 站点结果(result)；点击「＋ 新建站点」→ 基本属性(新建)。</li>
+ </ul>
+
<h3>5.3 站点基本属性（basic）</h3>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
<tr><td>AI 智能补全</td><td>根据站点名称 / 所属领域 / 站点基本情况描述，由 AI 分析并自动补全「补充要求」</td><td>POST /api/db/sites/:id/complete（流式 NDJSON）</td><td>「开始补全」后控制台流式输出思考过程，结束将结果写入「补充要求」并自动保存；「查看提示词」可查看本次使用的完整提示词 <span class="todo">补充描述质量将按反馈持续优化</span></td></tr>
</table>
+ <h4>5.3.1 交互细节</h4>
+ <figure><img src="design-doc-assets/basic.png" alt="站点基本属性"/><figcaption>站点基本属性：站点名称、域名、业务描述、关键词、文件上传等基本信息维护。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b>（左栏「站点基本信息」表单 + 右栏建议/AI 面板）：</p>
+ <table>
+ <tr><th>字段</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>站点名称（必填，最多 20 字）</td><td>PUT /api/db/sites（<code>name</code>）</td><td>可编辑（输入即保存）</td><td>文本输入，<code>maxLength=20</code>；超限标红 <code>invalid</code></td><td>生成后站点标题、菜单根名、结果页标题、生成提示词上下文</td></tr>
+ <tr><td>所属领域（必填）</td><td>GET/POST /api/db/domains</td><td>可编辑</td><td>文本 + <code>datalist</code> 历史建议；「＋ 新增领域」展开输入（最多 6 字）</td><td>领域方案库分类维度、生成提示词领域上下文</td></tr>
+ <tr><td>站点基本情况描述（必填）</td><td>PUT /api/db/sites（<code>description</code>）</td><td>可编辑（输入即保存）</td><td>多行文本域</td><td>生成提示词<b>核心上下文</b>（最关键）</td></tr>
+ <tr><td>补充要求</td><td>PUT /api/db/sites（<code>supplement</code>）</td><td>可编辑</td><td>文本域</td><td>生成提示词补充上下文；可被 AI 智能补全写入</td></tr>
+ <tr><td>参考资料</td><td>POST /api/db/sites/:id/files（base64）</td><td>可编辑（上传）</td><td>文件选择（PDF/DOCX/XLSX/PNG，≤20MB）</td><td>作为站点附件上下文（是否进入提示词取决于后端拼装）</td></tr>
+ </table>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>＋ 新增领域</td><td>展开领域输入框</td><td>输入（最多 6 字）</td><td>「保存」→ POST /api/domains 并刷新本地领域列表；再点收起</td></tr>
+ <tr><td>AI 智能补全「开始补全」</td><td>POST /api/db/sites/:id/complete（流式 NDJSON）</td><td>无需填参</td><td>控制台流式输出思考过程，结束自动写「补充要求」并保存；无独立确认弹窗</td></tr>
+ <tr><td>查看提示词</td><td>打开 <code>completePrompt</code> 模态</td><td>只读</td><td>模态关闭 = × / 「关闭」按钮</td></tr>
+ <tr><td>顶部「保存草稿」</td><td><code>notify("草稿已保存")</code></td><td>—</td><td>提示（字段已即时自动保存）</td></tr>
+ <tr><td>sticky「上一步」</td><td><code>go("projects")</code></td><td>—</td><td>返回站点项目</td></tr>
+ <tr><td>sticky「下一步」</td><td><code>go("assets")</code></td><td>—</td><td>进入 Asset 资产设置</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：站点项目点击站点（未生成）/「＋ 新建站点」。</li>
+ <li><b>上一步</b>：站点项目（projects）。</li>
+ <li><b>下一步</b>：Asset 资产设置（assets）。</li>
+ </ul>
+
<h3>5.4 Asset 资产设置（assets）</h3>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
<tr><td>AI 智能补全</td><td>根据站点名称 / 领域 / 描述 / 补充要求，分析并补充设备类型、数量与命名规则到资产配置列表（位于用户已填项下方，不改动已填项）</td><td>POST /api/db/sites/:id/complete-assets（流式 NDJSON）</td><td>「开始补全」后控制台流式输出思考过程；结果追加到资产配置列表（按模型给出的数量预设与命名规则）；资产层级预览随之重算；「查看提示词」可看完整提示词 <span class="todo">设备补充质量将按反馈持续优化</span></td></tr>
</table>
+ <h4>5.4.1 交互细节</h4>
+ <figure><img src="design-doc-assets/assets.png" alt="Asset 资产设置"/><figcaption>Asset 资产设置：设备类型、数量、命名规则与资产层级预览。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b>（设备资产配置表格，行内编辑即保存）：</p>
+ <table>
+ <tr><th>列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>设备类型 *</td><td>PUT /api/db/sites/:id/assets</td><td>可编辑</td><td>文本输入</td><td>资产层级树节点、模拟数据设备实例类型</td></tr>
+ <tr><td>数量 *</td><td>同上</td><td>可编辑</td><td>数字 <code>min=0</code></td><td>资产层级实例数量、模拟数据设备数</td></tr>
+ <tr><td>命名规则</td><td>同上</td><td>可编辑</td><td>文本（<code>#</code> 序号 / 纯前缀）</td><td>生成时设备实例命名（如 <code>CH-01</code>、<code>beng-01</code>）</td></tr>
+ <tr><td>操作 / ⌫</td><td>同上（本地移除行）</td><td>触发动作</td><td>删除按钮</td><td>移除该设备类型</td></tr>
+ </table>
+ <p>KPI 行（设备类型 / 设备实例 / 资产层级）与「资产层级预览」树由本地计算，随表格实时变化（3 层结构为展示占位，<span class="todo">资产层级建模尚未实现</span>）。</p>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>＋ 添加设备类型</td><td>追加一行空白设备类型</td><td>—</td><td>无弹窗</td></tr>
+ <tr><td>⌫ 删除</td><td>移除该行</td><td>—</td><td>无二次确认（即时移除）</td></tr>
+ <tr><td>AI 资产补全「开始补全」</td><td>POST /api/db/sites/:id/complete-assets（流式）</td><td>无需填参</td><td>结果追加到列表下方并自动保存；控制台流式输出</td></tr>
+ <tr><td>查看提示词</td><td>打开 <code>completePrompt</code> 模态</td><td>只读</td><td>× / 关闭</td></tr>
+ <tr><td>sticky「上一步」</td><td><code>go("basic")</code></td><td>—</td><td>返回基本属性</td></tr>
+ <tr><td>sticky「下一步」</td><td><code>go("functions")</code></td><td>—</td><td>进入功能与菜单</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：基本属性「下一步」/ 侧栏「Asset 资产设置」。</li>
+ <li><b>上一步</b>：基本属性（basic）。</li>
+ <li><b>下一步</b>：功能与菜单（functions）。</li>
+ </ul>
+
<h3>5.5 功能与菜单（functions）</h3>
<p>三个子页签：</p>
<table>
<tr><td>菜单结构（只读默认预览）</td><td>展示默认菜单结构</td><td>本地计算（MU + Cube）</td><td>MU 标准页面在上；所有 Cube 页面归入「综合监控」一级菜单，二级为各 Cube 页面名称；本页仅为展示，无编辑/保存 <span class="tag">默认结构</span></td></tr>
</table>
+ <h4>5.5.1 交互细节</h4>
+ <figure><img src="design-doc-assets/functions.png" alt="功能与菜单"/><figcaption>功能与菜单：MU 页面选择、Cube 扩展页面编辑、页面样式选择、菜单结构预览。</figcaption></figure>
+ <p>三个页签：MU 标准页面 / Cube 扩展页面 / 菜单结构。</p>
+ <p><b>① 字段 / 表格逐列</b></p>
+ <table>
+ <tr><th>区域 / 列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>MU 标准页面（树状复选）</td><td>GET /api/db/mu-tree</td><td>可编辑（勾选）</td><td>checkbox，默认全选（<code>site.mu</code> 空时按全部叶子键，首次取消才落地）</td><td>生成菜单的 MU 页面（当前"直接复用并配置菜单（未开发）"）</td></tr>
+ <tr><td>Cube 页面名称（最多 6 字）</td><td>GET/POST/PUT/DELETE /api/db/sites/:id/cubes</td><td>可编辑</td><td>文本输入 <code>maxLength=6</code></td><td>生成的 Cube 页面名、菜单"综合监控"下二级项</td></tr>
+ <tr><td>Cube 页面内容</td><td>同上</td><td>可编辑</td><td>文本输入</td><td>该页生成提示词要求 / 页面主题</td></tr>
+ <tr><td>生成文件</td><td>cube.<code>status</code></td><td>只读</td><td>已生成→「下载」按钮；否则"未生成"</td><td>交付物</td></tr>
+ <tr><td>站点页面样式</td><td>GET /api/db/page-styles；PUT /api/db/sites（<code>style_id</code>）</td><td>可编辑（单选）</td><td>样式卡片点击（"无" 或 选中某样式）</td><td>全站 Cube 页面视觉主题（生成时参考其 JSON 主题）</td></tr>
+ <tr><td>菜单结构（只读预览）</td><td>本地计算（MU + Cube）</td><td>不可编辑</td><td>展示</td><td>默认：MU 在上，所有 Cube 归「综合监控」一级菜单</td></tr>
+ </table>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>MU 复选框</td><td>勾选/取消 → <code>saveMu</code> PUT /sites/:id/mu</td><td>—</td><td>即时保存（失败提示）</td></tr>
+ <tr><td>Cube「预览」</td><td><code>notify("预览 X")</code></td><td>—</td><td>占位（<span class="todo">真实预览尚未实现</span>）</td></tr>
+ <tr><td>Cube「生成」</td><td><code>generateCube</code> POST /cubes/:id/generate（单页，非流式，无实时日志）</td><td>—</td><td>生成后刷新该页状态</td></tr>
+ <tr><td>Cube「保存」</td><td><code>saveCube</code> PUT/POST /cubes</td><td>—</td><td>已保存提示</td></tr>
+ <tr><td>Cube「删除」</td><td><code>removeCube</code> DELETE（有 id 才删后端）</td><td>—</td><td>即时移除</td></tr>
+ <tr><td>＋ 添加 Cube 页面</td><td>追加空白 Cube</td><td>—</td><td>无弹窗</td></tr>
+ <tr><td>样式卡片（无 / 各样式）</td><td><code>selectStyle</code> PUT /sites/:id（style_id）</td><td>—</td><td>应用 / 清除样式提示</td></tr>
+ <tr><td>AI Cube 补全「开始补全」</td><td>POST complete-cubes（流式）</td><td>无需填参</td><td>结果追加到已建页面下方并保存；控制台流式</td></tr>
+ <tr><td>查看提示词</td><td>打开 <code>completePrompt</code> 模态</td><td>只读</td><td>× / 关闭</td></tr>
+ <tr><td>sticky「上一步」</td><td><code>go("assets")</code></td><td>—</td><td>返回 Asset</td></tr>
+ <tr><td>sticky「下一步」</td><td><code>go("generate")</code></td><td>—</td><td>进入生成确认</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：Asset「下一步」/ 侧栏「功能与菜单」。</li>
+ <li><b>上一步</b>：Asset 资产设置（assets）。</li>
+ <li><b>下一步</b>：生成确认（generate）。（generate 之后无 UI 入口进入站点结果/页面预览，见 5.7 / 5.8）</li>
+ </ul>
+
<h3>5.6 生成确认（generate）</h3>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
<tr><td>「下载 ZIP」</td><td>下载全部交付物</td><td>GET /api/db/sites/:id/package</td><td>新标签页下载 station-package.zip</td></tr>
</table>
+ <h4>5.6.1 交互细节</h4>
+ <figure><img src="design-doc-assets/generate.png" alt="生成确认"/><figcaption>生成确认：选择生成范围、执行 AI 生成，并实时查看生成进度。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b></p>
+ <table>
+ <tr><th>区域 / 列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>生成范围确认卡片（站点 / Asset / MU / Cube）</td><td>当前 site 本地计算</td><td>只读展示</td><td>卡片 + 「返回修改」占位按钮（<span class="todo">返回修改未实现</span>）</td><td>本次生成交付物范围提示</td></tr>
+ <tr><td>页面生成提示词列表（站点级 + 每 Cube 行）</td><td>前端拼装（与后端 buildCubePrompt 同源）</td><td>只读</td><td>每行「查看提示词 →」</td><td>生成前核对的完整组合提示词</td></tr>
+ <tr><td>生成选项（复选）</td><td>静态选项</td><td>可勾选</td><td>checkbox；仅「生成 Asset Excel」置灰（<span class="todo">未实现</span>），其余默认勾选</td><td>决定 generate-all 交付物范围</td></tr>
+ <tr><td>生成任务面板（进度条 / 任务列表）</td><td>POST generate-all 流式</td><td>只读</td><td>NDJSON 逐事件更新</td><td>生成进度</td></tr>
+ </table>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>生成范围卡「返回修改」</td><td>占位</td><td>—</td><td><span class="todo">尚未实现</span></td></tr>
+ <tr><td>查看提示词 →（站点级）</td><td>打开 <code>prompt</code> 模态（<code>viewSitePrompt</code>）</td><td>只读</td><td>× / 关闭</td></tr>
+ <tr><td>查看提示词 →（每页）</td><td>打开 <code>prompt</code> 模态（<code>viewPrompt(cubeId,name,content)</code>）</td><td>只读</td><td>× / 关闭</td></tr>
+ <tr><td>开始生成 / 重新生成</td><td><code>start</code> POST generate-all 流式 → 更新任务/进度 → 完成后 <code>zipUrl</code></td><td>—</td><td>生成期间禁用；完成出现「下载 ZIP」</td></tr>
+ <tr><td>下载 ZIP</td><td><code>window.open(zipUrl)</code> 新标签</td><td>—</td><td>下载 station-package.zip</td></tr>
+ <tr><td>AI 生成工作流终端</td><td>实时滚动模型/Skill 输出</td><td>只读</td><td>点开始生成时清空</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：功能与菜单「下一步」/ 侧栏「生成确认」。</li>
+ <li><b>上一步</b>：无显式按钮（为向导末步）。</li>
+ <li><b>下一步</b>：生成完成后无 UI 自动跳转（站点结果/页面预览当前无入口，见 5.7 / 5.8）。</li>
+ </ul>
+
<h3>5.7 站点结果（result）</h3>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
</table>
<p class="note">页面结果卡片默认<b>纵向单列</b>排列（上下结构），每张卡片占满整行，便于在多个 Cube 页面间逐张查看与操作；每张卡片底部并排展示「预览 / JSON / 提示词 / 修改意见」四个按钮。</p>
+ <h4>5.7.1 交互细节</h4>
+ <figure><img src="design-doc-assets/result.png" alt="站点结果"/><figcaption>站点结果：生成完成后查看各 Cube 页面缩略图、预览、JSON 下载、提示词与修改意见。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b>（均为结果只读展示，无表单编辑）：</p>
+ <table>
+ <tr><th>区域</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>结果头（状态 / 修改配置 / 下载全部 / 版本历史）</td><td>当前 site</td><td>不可编辑</td><td>状态展示 + 操作按钮</td><td>操作入口</td></tr>
+ <tr><td>KPI 行（Asset / MU / Cube / 交付文件）</td><td>本地计算</td><td>只读</td><td>数字</td><td>统计</td></tr>
+ <tr><td>页面结果卡片（缩略图 / 状态 / 名称 / 内容 / 预览·JSON·提示词·修改意见）</td><td>GET /cubes/:id/file（DashboardThumb 真实渲染生成 JSON）</td><td>只读（修改意见除外）</td><td>卡片 + 四个按钮</td><td>逐页交付物查看与反馈</td></tr>
+ </table>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>版本历史</td><td><code>setModal("history")</code></td><td>只读模态</td><td>× / 关闭</td></tr>
+ <tr><td>修改配置</td><td><code>go("assets")</code></td><td>—</td><td>返回资产配置编辑</td></tr>
+ <tr><td>下载全部</td><td><code>window.open(/api/db/sites/:id/package)</code></td><td>—</td><td>新标签下载</td></tr>
+ <tr><td>预览</td><td><code>openPreview</code> 新标签打开渲染 HTML（真实 JSON）</td><td>—</td><td>新标签</td></tr>
+ <tr><td>JSON</td><td>下载该页生成 JSON</td><td>—</td><td>下载</td></tr>
+ <tr><td>提示词</td><td><code>viewPrompt</code> 打开 <code>prompt</code> 模态</td><td>只读</td><td>× / 关闭</td></tr>
+ <tr><td>✎ 修改意见</td><td><code>openFeedback</code> 打开 <code>feedback</code> 模态</td><td>填写修改意见</td><td>提交 → <code>refineCube</code> 流式重生成，模态内「AI 生成工作流」终端实时滚动，完成后刷新并关闭；× / 关闭 = 取消（不重生成）</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：站点项目点击<b>已生成</b>站点（<code>go("result", id)</code>）。（注：5.6 生成完成后<b>不会</b>自动跳转至此，需回站点项目点击该站点进入。）</li>
+ <li><b>上一步</b>：修改配置 → Asset 资产设置（assets）。</li>
+ <li><b>下一步</b>：无（末页）。</li>
+ </ul>
+
<h3>5.8 页面预览（preview）</h3>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
<tr><td>实际 Cube 渲染（info/json/feedback 标签）</td><td>真实渲染已生成 JSON</td><td>GET .../file + dashboard-renderer</td><td>展示真实生成结果（与 result 缩略图同源）</td></tr>
</table>
+ <h4>5.8.1 交互细节</h4>
+ <p class="note">本页当前无 UI 入口，故无对应截图；功能说明见下文。</p>
+ <p><b>① 字段 / 表格逐列</b>（当前为静态演示外壳，未接入真实生成数据）：</p>
+ <table>
+ <tr><th>区域 / 列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>页面选择下拉</td><td>当前 site.cubes</td><td>可切换（本地）</td><td>select</td><td>仅切换演示画布展示的 Cube</td></tr>
+ <tr><td>「站点监控」演示画布</td><td>内置演示数据</td><td>只读</td><td>KPI（92% / 12,480kWh / 7 / 68%）与图表为<b>静态</b></td><td>演示占位（<span class="todo">未接入真实生成数据</span>）</td></tr>
+ <tr><td>1440×900 / 浅色 / 刷新数据 / 全屏</td><td>—</td><td>占位按钮</td><td>按钮</td><td>除提示外无实际行为（<span class="todo">尚未实现</span>）</td></tr>
+ <tr><td>实际 Cube 渲染（info/json/feedback 标签）</td><td>GET .../file + dashboard-renderer</td><td>只读</td><td>真实渲染已生成 JSON</td><td>与 result 缩略图同源</td></tr>
+ </table>
+ <p><b>② 按钮与操作</b>：演示画布内的「刷新数据 / 全屏」等仅触发提示，无业务副作用。实际 Cube 渲染区可展示真实生成结果。</p>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：<span class="todo">当前无 UI 入口</span>——代码中无 <code>go("preview")</code> 调用，无法从任何页面进入（与 5.7 站点结果不同）。</li>
+ <li><b>上一步 / 下一步</b>：均不可达。</li>
+ </ul>
+
<h3>5.9 领域方案库（domains）</h3>
<p>领域方案库已从硬编码演示改为<strong>真实数据库驱动</strong>。列表与详情编辑器同一页面内通过 <code>openDomainTemplateId</code> state 切换：<code>null</code>=列表，<code>"create"</code>=新增表单，<code>number</code>=该方案详情编辑器。列表支持<strong>列表 / 卡片两种视图</strong>切换（右上角视图切换按钮，<code>view</code> state 控制）；点击左侧「领域分类」下的某个领域会按 <code>domainFilter</code> 自动筛选该领域方案。</p>
- <p>下图展示了领域方案库列表与「＋ 新增领域方案」入口：</p>
- <figure><img src="design-doc-assets/domains.png" alt="领域方案库列表"/><figcaption>领域方案库：列表视图，支持列表/卡片切换、按领域分类筛选，点击「编辑」进入方案详情。</figcaption></figure>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
<tr><td>领域方案列表表格</td><td>展示全部领域方案（模板名称 / 所属领域 / 版本 / 状态 / 创建人 / 设备·页面·文档数 / 操作）</td><td>GET /api/db/domain-templates（含 domain_name、device_count、page_count、doc_count）</td><td>每行「编辑」→ 打开该方案详情编辑器；「删除」→ 确认后 DELETE /api/db/domain-templates/:id（级联删除 device_template_domain_templates）并刷新；空列表提示「点击右上角新增」</td></tr>
<tr><td>搜索 / 筛选 / 同步方案库</td><td>（历史功能）</td><td>—</td><td>已按计划 Phase 0 移除整行（含「同步方案库」占位按钮） <span class="todo">已移除</span></td></tr>
</table>
+ <h4>5.9.1 交互细节</h4>
+ <figure><img src="design-doc-assets/domains.png" alt="领域方案库"/><figcaption>领域方案库：列表视图，支持列表/卡片切换、按领域分类筛选，点击「编辑」进入方案详情。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b>（列表表格，仅展示 + 操作）：</p>
+ <table>
+ <tr><th>列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>方案名称</td><td>GET /api/db/domain-templates（<code>name</code>）</td><td>只读（列表态）</td><td>文本</td><td>方案标识</td></tr>
+ <tr><td>所属领域</td><td><code>domain_name</code></td><td>只读</td><td>文本</td><td>侧栏领域分类维度</td></tr>
+ <tr><td>版本</td><td><code>version</code></td><td>只读</td><td>文本</td><td>方案版本</td></tr>
+ <tr><td>状态</td><td><code>status</code></td><td>只读</td><td>Status 标签（可用/不可用）</td><td>是否可选入站点方案</td></tr>
+ <tr><td>创建人</td><td><code>creator</code></td><td>只读</td><td>文本</td><td>—</td></tr>
+ <tr><td>设备 / 页面 / 文档</td><td>聚合 <code>device_count / page_count / doc_count</code></td><td>只读</td><td>数字</td><td>方案体量概览</td></tr>
+ <tr><td>操作 / 编辑·删除</td><td>编辑→<code>onOpen(id)</code>；删除→DELETE（级联删关联）</td><td>触发动作</td><td>按钮（删除二次确认）</td><td>打开详情 / 删除方案</td></tr>
+ </table>
+ <p>顶部 <code>domain-hero-stats</code> 按领域统计方案数（本地计算），纯展示；侧栏「领域分类」按钮设置 <code>domainFilter</code> 筛选。</p>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>视图切换 列表 ▤ / 卡片 ▦</td><td><code>setView</code> 本地</td><td>—</td><td>无弹窗（卡片态点卡片即打开详情）</td></tr>
+ <tr><td>侧栏领域分类按钮</td><td><code>setDomainFilter(d.id)</code> 筛选</td><td>—</td><td>无弹窗</td></tr>
+ <tr><td>编辑</td><td><code>onOpen(id)</code> → 方案详情</td><td>—</td><td>—</td></tr>
+ <tr><td>删除</td><td>DELETE /api/db/domain-templates/:id（级联 device_template_domain_templates）</td><td>—</td><td>二次确认后删除并刷新</td></tr>
+ <tr><td>＋ 新增领域方案</td><td><code>setOpenDomainTemplateId("create")</code> → 同页 CreateTemplate 表单</td><td>表单填写</td><td>保存(POST)后自动打开详情；取消收起</td></tr>
+ <tr><td>清除领域筛选</td><td><code>setDomainFilter(null)</code></td><td>—</td><td>无弹窗</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：侧栏「领域方案库」/「领域方案」。</li>
+ <li><b>上一步</b>：无（领域模块顶层）。</li>
+ <li><b>下一步</b>：点击「编辑」/ 卡片 → 方案详情（domainDetail）；点击「＋ 新增领域方案」→ CreateTemplate（保存后 → domainDetail）。</li>
+ </ul>
+
<h3>5.10 方案详情（domainDetail / 内嵌编辑器）</h3>
<p>详情为同一页面内嵌编辑器，所有内容均可编辑，数据持久化到领域方案库相关表。各面板如下：</p>
- <p>下图展示了一个领域方案的详情编辑器（模板信息 + 设备模板 + 领域页面等面板）：</p>
- <figure><img src="design-doc-assets/domain-detail.png" alt="方案详情编辑器"/><figcaption>领域方案详情编辑器：模板信息、选用设备模版、领域页面、模板菜单、知识文档、运维流程等面板。</figcaption></figure>
<table>
<tr><th>面板 / 元素</th><th>功能</th><th>数据来源 / 接口</th><th>交互效果</th></tr>
<tr><td>模板信息</td><td>编辑所属领域 / 名称 / 版本 / 状态 / 创建人 / 描述</td><td>GET /api/db/domain-templates/:id 详情；PUT /api/db/domain-templates/:id 保存</td><td>「保存模板信息」写回并重新加载</td></tr>
<tr><td>运维流程（OpsFlowsViewer）</td><td>查看运维流程（流程名称 + 内容 JSON 串）</td><td>GET /api/ops-flows</td><td>仅展示占位记录，本功能 <span class="todo">尚未实现</span></td></tr>
</table>
+ <h4>5.10.1 交互细节</h4>
+ <figure><img src="design-doc-assets/domain-detail.png" alt="方案详情编辑器"/><figcaption>领域方案详情编辑器：模板信息、选用设备模版、领域页面、模板菜单、知识文档、运维流程等面板。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b></p>
+ <table>
+ <tr><th>面板 / 区域</th><th>数据来源 / 接口</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>模板信息</td><td>GET/PUT /api/db/domain-templates/:id</td><td>可编辑</td><td>所属领域(select) / 模板名称 / 版本 / 状态(select) / 创建人 / 领域描述(textarea)</td><td>方案元信息，被站点方案引用</td></tr>
+ <tr><td>选用设备模版（DeviceTemplatePicker）</td><td>详情 <code>devices[]</code>；GET /api/db/device-templates；PUT /api/db/domain-templates/:id（<code>device_template_ids</code>，服务端重写关联）</td><td>可编辑（勾选即保存）</td><td>复选框列表</td><td>该方案选用的设备模版集合（供站点方案引用）</td></tr>
+ <tr><td>领域页面（PageRow）</td><td>详情 <code>pages[]</code>；POST /api/db/domain-templates/:id/pages；PUT/DELETE /api/db/domain-pages/:id</td><td>可编辑</td><td>名称 / 说明 / Cube JSON（保存前校验合法 JSON）</td><td>方案内置页面（=StationBuilder 的 Cube）</td></tr>
+ <tr><td>模板菜单</td><td>详情 <code>menu[]</code>；POST /api/db/domain-templates/:id/menu；DELETE /api/db/template-menu-items/:id</td><td>可编辑（新增占位项）</td><td>表格（菜单项/类型/父级/关联）+ 删除</td><td>方案菜单结构</td></tr>
+ <tr><td>知识文档</td><td>详情 <code>docs[]</code>；POST /api/db/domain-templates/:id/docs；GET /api/db/knowledge-docs/:id/file；DELETE</td><td>可编辑</td><td>新增选「超链」(填 URL) 或「文件」(上传 base64)；列表可下载/删</td><td>方案知识库</td></tr>
+ <tr><td>运维流程（OpsFlowsViewer）</td><td>GET /api/ops-flows</td><td>只读</td><td>占位展示</td><td><span class="todo">尚未实现</span></td></tr>
+ </table>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>保存模板信息</td><td>PUT /api/db/domain-templates/:id</td><td>表单填写</td><td>写回并重新加载（提示"已保存模板信息"）</td></tr>
+ <tr><td>选用设备模版 复选框</td><td>toggle → PUT <code>device_template_ids</code>（先 DELETE 旧关联再重建）</td><td>—</td><td>即时保存（失败回滚）；「＋ 新增设备模版」→ <code>go("deviceTemplates")</code> 跳转新建</td></tr>
+ <tr><td>领域页面 编辑 / 取消 / 保存 / 删除</td><td>PageRow 内编辑态切换；保存前校验 JSON</td><td>—</td><td>保存 PUT / 删除 DELETE；取消退出编辑态</td></tr>
+ <tr><td>＋ 新增页面 / 菜单项 / 文档</td><td>POST 对应接口（默认空/占位）</td><td>—</td><td>新增后刷新</td></tr>
+ <tr><td>知识文档 下载 / 删</td><td>GET file / DELETE</td><td>—</td><td>下载二进制 / 删除</td></tr>
+ <tr><td>← 返回列表</td><td><code>onBack</code> → 领域方案库列表</td><td>—</td><td>返回列表态</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：领域方案库点击「编辑」/ 卡片，或「＋ 新增领域方案」保存后。</li>
+ <li><b>上一步</b>：← 返回列表 → 领域方案库（domains）。</li>
+ <li><b>下一步</b>：无（详情为末层）；可通过「选用设备模版 → ＋ 新增设备模版」跳到设备模版页（deviceTemplates）。</li>
+ </ul>
+
<h3>5.11 页面样式库（styleLibrary）</h3>
- <p>下图为页面样式库的实际界面，展示缩略图卡片网格与「＋ 新增样式」入口：</p>
- <figure><img src="design-doc-assets/style-library.png" alt="页面样式库"/><figcaption>页面样式库：16:9 缩略图卡片网格，可新增 / 编辑 / 删除样式。</figcaption></figure>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源</th><th>交互效果</th></tr>
<tr><td>样式卡片网格（缩略图 + 名称 + 编辑/删除）</td><td>浏览已有样式</td><td>GET /api/db/page-styles</td><td>3 列布局，缩略图按 16:9 比例自适应高度（object-fit:contain，整页完整可见、不被截断）；缩略图点开大图预览；编辑/删除生效</td></tr>
<tr><td>样式大图预览（StylePreview）</td><td>查看样式原图</td><td>GET /api/db/page-styles/:id/image</td><td>模态展示</td></tr>
</table>
+ <h4>5.11.1 交互细节</h4>
+ <figure><img src="design-doc-assets/style-library.png" alt="页面样式库"/><figcaption>页面样式库：16:9 缩略图卡片网格，可新增 / 编辑 / 删除样式。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b></p>
+ <table>
+ <tr><th>区域 / 列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>样式卡片网格（缩略图 / 名称 / 创建时间 / 编辑·删除）</td><td>GET /api/db/page-styles</td><td>卡片只读；编辑/删除可触发</td><td>缩略图 = GET /page-styles/:id/image；3 列网格</td><td>样式浏览与维护</td></tr>
+ <tr><td>StyleEditorModal · 样式名称（必填）</td><td>POST/PUT /api/db/page-styles</td><td>可编辑</td><td>文本输入</td><td>样式库展示名</td></tr>
+ <tr><td>StyleEditorModal · 预览图（新建必填）</td><td>同上（image base64）</td><td>可编辑</td><td>图片上传（建议 16:10 PNG/JPG）</td><td>样式缩略图与大图预览源</td></tr>
+ <tr><td>StyleEditorModal · 仪表盘 JSON（必填，需合法 JSON）</td><td>同上（<code>jsonText</code>）</td><td>可编辑</td><td>textarea 粘贴 或 上传 .json 文件</td><td>Cube 页面视觉主题（生成时参考）</td></tr>
+ </table>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>卡片缩略图点击</td><td>打开 <code>StylePreview</code> 大图模态</td><td>只读</td><td>× / 点击遮罩关闭</td></tr>
+ <tr><td>卡片「✎ 编辑」</td><td><code>openEdit</code> → StyleEditorModal（预填）</td><td>表单</td><td>保存 PUT / 取消收起</td></tr>
+ <tr><td>卡片「🗑 删除」</td><td>DELETE /api/db/page-styles/:id</td><td>—</td><td>二次确认后删除并刷新</td></tr>
+ <tr><td>＋ 新增样式</td><td><code>setEditor({open:true})</code> → 新建模态</td><td>表单</td><td>保存 POST（需图+合法JSON）/ 取消关闭</td></tr>
+ <tr><td>编辑模态「保存」</td><td>新建需图+JSON 合法 → POST；编辑 → PUT</td><td>—</td><td>失败提示（如 JSON 非法 / 新建未传图）；成功提示并关闭</td></tr>
+ <tr><td>编辑模态「取消」/「×」</td><td><code>onClose</code></td><td>—</td><td>关闭，不保存</td></tr>
+ <tr><td>编辑模态「删除」（仅编辑态）</td><td>DELETE → 刷新</td><td>—</td><td>二次确认后删除</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：侧栏「页面样式库」。</li>
+ <li><b>上一步</b>：无（独立模块）。</li>
+ <li><b>下一步</b>：无；样式被站点「功能与菜单」页的「站点页面样式」选择器引用。</li>
+ </ul>
+
<h3>5.12 设备模版（deviceTemplates）</h3>
<p>独立的「设备模版」页，维护可复用的设备模版与采集点，供领域方案在详情中「选用设备模版」引用。设备模版数量可能成百上千，因此采用<strong>默认展开列表、点击进入详情</strong>的方式（而非整页卡片栅格）：列表为紧凑表格（<code>.device-tpl-list</code>），含缩略图 / 名称 / 说明 / 采集点数 / 操作，并支持按名称或说明实时搜索；点击任意行进入该设备模版的详情编辑区，详情内「← 返回列表」回到列表。列表上方「＋ 新增设备模版」进入新建表单（创建后定位到新建设备的详情）。</p>
- <figure><img src="design-doc-assets/device-templates.png" alt="设备模版列表"/><figcaption>设备模版列表：默认展开表格视图，支持搜索，点击行进入详情编辑。</figcaption></figure>
- <figure><img src="design-doc-assets/device-detail.png" alt="设备模版详情"/><figcaption>设备模版详情：名称 / 说明 / 设备图片、长方形预览区、采集点表格编辑（新增 / 批量删除 / 保存 / 数值范围下拉）。</figcaption></figure>
<table>
<tr><th>元素</th><th>功能</th><th>数据来源 / 接口</th><th>交互效果</th></tr>
<tr><td>设备图片</td><td>以长方形预览区展示设备图片，点击预览区即上传 / 更换</td><td>GET /api/db/device-templates/:id/image（服务端按 image_path 落盘 <code>data/db/uploads/devices/</code>）；PUT /api/db/device-templates/:id（image base64）</td><td>预览区固定高度、<code>object-fit:cover</code> 不再溢出；上传后即时本地预览，保存时写回；删除图片 <span class="todo">尚未实现</span></td></tr>
<tr><td>新增设备模版</td><td>新建设备模版（名称 / 说明 / 图片）</td><td>POST /api/db/device-templates</td><td>列表上方「＋ 新增设备模版」进入新建表单，创建后自动打开该设备模版的详情编辑区</td></tr>
</table>
+ <h4>5.12.1 交互细节</h4>
+ <figure><img src="design-doc-assets/device-templates.png" alt="设备模版列表"/><figcaption>设备模版列表：默认展开表格视图，支持搜索，点击行进入详情编辑。</figcaption></figure>
+ <figure><img src="design-doc-assets/device-detail.png" alt="设备模版详情"/><figcaption>设备模版详情：名称 / 说明 / 设备图片、长方形预览区、采集点表格编辑（新增 / 批量删除 / 保存 / 数值范围下拉）。</figcaption></figure>
+ <p><b>① 字段 / 表格逐列</b>（列表表格，仅展示 + 操作；详情为编辑区）：</p>
+ <table>
+ <tr><th>列表列</th><th>数据来源</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>图片</td><td><code>image_path</code> → GET /device-templates/:id/image</td><td>只读（列表态）</td><td>缩略图 / 无图显示 —</td><td>设备模版缩略图</td></tr>
+ <tr><td>名称 / 说明</td><td>name / description</td><td>只读（列表态）</td><td>文本</td><td>方案选用设备时展示</td></tr>
+ <tr><td>采集点</td><td><code>collection_points.length</code></td><td>只读</td><td>数字</td><td>采集点数量概览</td></tr>
+ <tr><td>操作 / 编辑·删除</td><td>编辑→<code>openId(id)</code>；删除→DELETE</td><td>触发动作</td><td>按钮（删除二次确认）</td><td>打开详情 / 删除设备</td></tr>
+ </table>
+ <p>详情编辑区（DeviceTemplateCard）字段：</p>
+ <table>
+ <tr><th>详情字段</th><th>数据来源 / 接口</th><th>是否可编辑</th><th>编辑类型</th><th>上线范围</th></tr>
+ <tr><td>设备名称</td><td>GET/PUT /api/db/device-templates/:id</td><td>可编辑</td><td>文本输入</td><td>设备模版名</td></tr>
+ <tr><td>设备图片</td><td>同上（image base64）</td><td>可编辑</td><td>点击预览区上传（<code>accept="image/*"</code>），<code>object-fit:cover</code> 长方形预览</td><td>方案选用设备缩略图</td></tr>
+ <tr><td>说明</td><td>同上</td><td>可编辑</td><td>多行文本</td><td>设备描述</td></tr>
+ <tr><td>采集点（表格：复选/名称/说明/单位/数值范围/描述）</td><td>GET 详情 <code>collection_points</code>；POST /device-templates/:id/collection-points；PUT/DELETE /api/db/collection-points/:id</td><td>可编辑</td><td>名称/说明/单位/描述 = 文本输入；<b>数值范围</b> = 下拉选择器（预设 0~100 / 0~1000 / -20~80 / -40~85 / 0~50 / 0~5 / 0~1 / 0~100%，或「自定义…」文本输入）</td><td>设备采集点定义（供设备实例监控；当前生成未直接消费）</td></tr>
+ </table>
+ <p><b>② 按钮与操作</b></p>
+ <table>
+ <tr><th>按钮</th><th>点击效果</th><th>编辑方式</th><th>确定 / 取消 / 关闭</th></tr>
+ <tr><td>搜索框</td><td>输入即按名称/说明前端过滤</td><td>文本</td><td>无弹窗</td></tr>
+ <tr><td>＋ 新增设备模版</td><td><code>openId("create")</code> → CreateTemplate 表单</td><td>表单</td><td>创建 POST 后打开该设备详情；取消 → 返回列表</td></tr>
+ <tr><td>列表行点击 / 编辑</td><td><code>openId(id)</code> → 详情</td><td>—</td><td>—</td></tr>
+ <tr><td>列表删除</td><td>DELETE /api/db/device-templates/:id</td><td>—</td><td>二次确认后删除并刷新列表</td></tr>
+ <tr><td>详情「保存设备」</td><td>PUT /api/db/device-templates/:id（name/description/image）</td><td>表单</td><td>写回并提示"设备已保存"</td></tr>
+ <tr><td>详情「＋ 新增一行」</td><td>追加空白采集点行（临时负 key）</td><td>—</td><td>无弹窗</td></tr>
+ <tr><td>详情「删除选中」</td><td>勾选 → DELETE 已有 id（<code>collection-points/:id</code>）</td><td>多选</td><td>二次确认后批量删除</td></tr>
+ <tr><td>详情「保存采集点」</td><td>已有行 PUT /collection-points/:id；新建行 POST /device-templates/:id/collection-points</td><td>—</td><td>写回并提示"采集点已保存"</td></tr>
+ <tr><td>详情「删除设备」</td><td>DELETE 设备</td><td>—</td><td>二次确认后删除并 → 返回列表</td></tr>
+ <tr><td>← 返回列表</td><td><code>openId(null)</code></td><td>—</td><td>返回列表态</td></tr>
+ </table>
+ <p><b>③ 导航流</b></p>
+ <ul>
+ <li><b>入口</b>：侧栏「设备模版」。</li>
+ <li><b>上一步</b>：← 返回列表 → 设备模版列表。</li>
+ <li><b>下一步</b>：无（详情为末层）；亦可由领域方案详情「选用设备模版 → ＋ 新增设备模版」跳转至此新建。</li>
+ </ul>
+
<h3>5.13 界面截图（UI 总览）</h3>
- <p>以下截图覆盖了当前 StationBuilder 原型中可访问的主要页面。截图在 1440×900 视口下使用 Playwright + Chromium 自动抓取，图片存放于 <code>public/design-doc-assets/</code>。</p>
+ <p>以下截图覆盖了当前 StationBuilder 原型的主要页面。截图在 1440×900 视口下使用 Playwright + Chromium 自动抓取，图片存放于 <code>public/design-doc-assets/</code>。各页的字段、按钮与导航流逐项说明见 5.1–5.12 的「交互细节」子章。</p>
+ <p class="note">可达性说明：登录、站点项目、基本属性、Asset、功能与菜单、生成确认、站点结果（站点项目点击<b>已生成</b>站点进入）、领域方案库、方案详情、页面样式库、设备模版均可正常访问；<b>页面预览（5.8）当前无 UI 入口</b>（代码中无 <code>go("preview")</code> 调用），故未单独截图，其演示外壳见 5.8.1。</p>
<figure><img src="design-doc-assets/login.png" alt="登录页"/><figcaption>登录页：iStation StationBuilder 统一登录入口。</figcaption></figure>
<figure><img src="design-doc-assets/projects.png" alt="站点项目"/><figcaption>站点项目：全部站点列表、统计概览、筛选与新建入口。</figcaption></figure>
<figure><img src="design-doc-assets/assets.png" alt="Asset 资产设置"/><figcaption>Asset 资产设置：设备类型、数量、命名规则与资产层级预览。</figcaption></figure>
<figure><img src="design-doc-assets/functions.png" alt="功能与菜单"/><figcaption>功能与菜单：MU 页面选择、Cube 扩展页面编辑、页面样式选择、菜单结构预览。</figcaption></figure>
<figure><img src="design-doc-assets/generate.png" alt="生成确认"/><figcaption>生成确认：选择生成范围、执行 AI 生成，并实时查看生成进度。</figcaption></figure>
+ <figure><img src="design-doc-assets/result.png" alt="站点结果"/><figcaption>站点结果：生成完成后查看各 Cube 页面缩略图、预览、JSON 下载、提示词与修改意见。</figcaption></figure>
<figure><img src="design-doc-assets/domains.png" alt="领域方案库"/><figcaption>领域方案库：列表/卡片视图切换、按领域分类筛选。</figcaption></figure>
<figure><img src="design-doc-assets/domain-detail.png" alt="领域方案详情"/><figcaption>领域方案详情：模板信息、选用设备模版、领域页面、模板菜单、知识文档、运维流程占位。</figcaption></figure>
<figure><img src="design-doc-assets/device-templates.png" alt="设备模版列表"/><figcaption>设备模版列表：紧凑表格、搜索、点击进入详情。</figcaption></figure>
<h3>11.1 版本变更记录（Changelog）</h3>
<table class="changelog">
<tr><th>版本</th><th>日期</th><th>修改人</th><th>说明</th></tr>
+ <tr><td>v0.14</td><td>2026-08-19</td><td>wang.yu</td><td>左侧目录（TOC）贴齐浏览器最左侧：<code>.doc-layout</code> 取消 <code>margin:0 auto</code> 自动居中（改为 <code>margin:0; padding-left:12px</code>），宽屏下不再左右留白，目录紧贴视口左缘。</td></tr>
+ <tr><td>v0.13</td><td>2026-08-18</td><td>wang.yu</td><td>截图显示宽度由 500px 调整为 360px（<code>.figure img</code> 的 <code>max-width</code>），等比例缩放并居中，适配常见浏览宽度。</td></tr>
+ <tr><td>v0.12</td><td>2026-08-18</td><td>wang.yu</td><td>统一文档内所有截图显示尺寸：修改 <code>.figure img</code> 为 <code>max-width:500px; height:auto</code> 并居中，所有页面截图等比例压缩至 500px 宽，宽度一致。</td></tr>
+ <tr><td>v0.11</td><td>2026-08-18</td><td>wang.yu</td><td>补齐每个交互细节小节（5.1.1–5.12.1）的对应截图：新增 result.png（由 generated 站点「北方污水厂」进入结果页截取），将 5.9–5.12 的截图移入对应子节，5.13 截图总览同步加入 result.png。5.8 页面预览因无 UI 入口保留文字说明；5.1–5.7 子节补嵌实图。</td></tr>
+ <tr><td>v0.10</td><td>2026-08-18</td><td>wang.yu</td><td>细化设计文档：为每个页面（5.1–5.12）新增「交互细节」子章（5.x.1），统一按「① 字段 / 表格逐列（数据来源 / 是否可编辑 / 编辑类型 / 上线范围）② 按钮与操作（点击效果 / 编辑方式 / 确定·取消·关闭）③ 导航流（入口 / 上一步 / 下一步）」三段式逐项描述，覆盖表格每一列、每个按钮与弹窗的确认/取消/关闭语义及前后页跳转。修正可达性说明：站点结果可由站点项目点击已生成站点进入；页面预览当前无 UI 入口。</td></tr>
<tr><td>v0.9</td><td>2026-08-18</td><td>wang.yu</td><td>使用 Chromium + Playwright 自动抓取全站可访问页面截图，统一嵌入设计文档：新增 5.13「界面截图（UI 总览）」，覆盖登录页、站点项目、站点基本属性、Asset 资产、功能与菜单、生成确认、领域方案库、领域方案详情、设备模版列表/详情、页面样式库（共 11 张）。替换 5.9 / 5.10 中两张 placeholder.svg 为真实截图；在 5.11 / 5.12 补充真实界面图。截图文件置于 public/design-doc-assets/。</td></tr>
<tr><td>v0.8</td><td>2026-08-18</td><td>wang.yu</td><td>设备模版改为「默认展开列表、点击进入详情」：列表为紧凑表格（缩略图 / 名称 / 说明 / 采集点数 / 操作），支持按名称或说明实时搜索；点击行进入该设备模版的详情编辑区（名称 / 说明 / 图片 / 采集点），可「← 返回列表」；「＋ 新增设备模版」进入新建表单，创建后定位到新建设备的详情。面向成百上千设备模版的可扩展性。同步更新 4.2 导航表、5.12 章节。</td></tr>
<tr><td>v0.7</td><td>2026-08-18</td><td>wang.yu</td><td>设备模版页交互优化：设备图片改为长方形预览区（点击上传，不再溢出）；移除设备侧「所属领域」多选（改为由领域/方案侧选用设备）；采集点改为整宽表格编辑，支持新增一行、勾选批量删除、保存，数值范围改为下拉选择器（预设 + 自定义）；修复打开卡片时 collection_points 未加载导致的 runtime error，列表接口补充返回 collection_points。后端新增 GET /api/db/device-templates/:id/image 图片服务。新增 5.12 章节。</td></tr>
projects / StationBuilder.git / commitdiff
