From: wang.yu Date: Wed, 19 Aug 2026 00:43:05 +0000 (+0800) Subject: docs: 设计文档细化交互细节+每页配图+目录贴左(v0.10~v0.14) X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=bd8e6be0dc3b4204a3c8adffbb60a64028e9a279;p=StationBuilder.git docs: 设计文档细化交互细节+每页配图+目录贴左(v0.10~v0.14) - 5.1~5.12 每页新增「交互细节」小节(字段/按钮/导航流),并嵌入对应截图 - 截图宽度统一 360px 等比例缩放 - 左侧目录取消自动居中,贴齐视口最左缘 - 新增站点生成结果截图 result.png --- diff --git a/public/design-doc-assets/result.png b/public/design-doc-assets/result.png new file mode 100644 index 0000000..f37f1c6 Binary files /dev/null and b/public/design-doc-assets/result.png differ diff --git a/public/design-doc.html b/public/design-doc.html index aacaae3..46635ba 100644 --- a/public/design-doc.html +++ b/public/design-doc.html @@ -45,7 +45,7 @@ .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; } @@ -60,7 +60,7 @@ /* 页面截图（参考 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); } @@ -85,7 +85,7 @@
-

文档版本：v0.9　最后更新：2026-08-18　修改人：wang.yu　状态：开发中（演示数据已标注）

+

文档版本：v0.14　最后更新：2026-08-19　修改人：wang.yu　状态：开发中（演示数据已标注）

StationBuilder 产品与交互设计方案

1. 文档说明

@@ -190,6 +190,21 @@ 「使用公司账号登录」按钮模拟登录进入主界面静态点击进入站点项目页 真实账号体系尚未实现 +

5.1.1 交互细节

+
登录页
登录页：iStation StationBuilder 统一登录入口。
+

① 字段 / 表格逐列：本页无可编辑字段，仅一个登录动作入口。

+

② 按钮与操作

+ + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
使用公司账号登录（SSO）调用 onLogin() → go("projects")，进入「站点项目」页无表单、无弹窗无确认/取消/关闭步骤（真实账号体系 尚未实现）
+

③ 导航流

+ +

5.2 站点项目 / 站点列表（projects）

@@ -204,6 +219,40 @@
元素功能数据来源交互效果
↻ 刷新刷新列表—提示「列表已刷新」（实际未重新拉取） 尚未实现
+

5.2.1 交互细节

+
站点项目
站点项目：全部站点列表、统计概览、筛选与新建入口。
+

① 字段 / 表格逐列（列表表格，仅展示 + 选择，不可就地文本编辑）：

+ + + + + + + + + +
列数据来源是否可编辑编辑类型上线范围
全选 / 行勾选框本地 state selected可勾选checkbox仅用于「批量删除」的选中集合，不影响生成数据
站点名称 ↕GET /api/db/sites（name）不可编辑（点击为链接）链接 → 进入详情生成后作为站点标题、菜单根名称、结果页标题、生成提示词上下文
所属领域sites.domain只读文本领域方案库分类维度、生成提示词领域上下文
设备数量 / MU 页面 / Cube 页面sites 聚合（device_count / mu_count / cube_count）只读数字结果页 / 生成范围统计口径
状态sites.status（draft/running/generated/partial）只读Status 标签决定是否从本页进入「站点结果」还是「基本属性」
最近修改sites.updated_at只读文本展示
操作 / 删除DELETE /api/db/sites/:id触发动作按钮（二次确认）删除站点记录
+

统计条（全部 / 草稿 / 生成中 / 生成完成 / 部分失败）由 sites 列表本地聚合，纯展示。

+

② 按钮与操作

+ + + + + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
搜索框输入即按名称前端过滤文本输入无弹窗（服务端查询 尚未实现）
领域 / 状态 下拉选择即前端过滤select（当前仅"全部"占位项）无弹窗
Search触发前端过滤提示——
批量删除（勾选后出现）DELETE 批量并刷新列表多选后触发二次确认后执行
视图切换 ☷ / ▦切换表格 / 卡片展示本地 state view无弹窗
↻ 刷新提示"列表已刷新"—实际未重新拉取（尚未实现）
站点名称链接go(status==="generated"?"result":"basic", id)—已生成→站点结果(result)；否则→基本属性(basic)
行「删除」DELETE /api/db/sites/:id—二次确认后删除
＋ 新建站点go("basic","new") → 创建空白站点 → basic—直接进入基本属性新建态
+

③ 导航流

+ +

5.3 站点基本属性（basic）

@@ -215,6 +264,34 @@
元素功能数据来源交互效果
AI 智能补全根据站点名称 / 所属领域 / 站点基本情况描述，由 AI 分析并自动补全「补充要求」POST /api/db/sites/:id/complete（流式 NDJSON）「开始补全」后控制台流式输出思考过程，结束将结果写入「补充要求」并自动保存；「查看提示词」可查看本次使用的完整提示词 补充描述质量将按反馈持续优化
+

5.3.1 交互细节

+
站点基本属性
站点基本属性：站点名称、域名、业务描述、关键词、文件上传等基本信息维护。
+

① 字段 / 表格逐列（左栏「站点基本信息」表单 + 右栏建议/AI 面板）：

+ + + + + + + +
字段数据来源是否可编辑编辑类型上线范围
站点名称（必填，最多 20 字）PUT /api/db/sites（name）可编辑（输入即保存）文本输入，maxLength=20；超限标红 invalid生成后站点标题、菜单根名、结果页标题、生成提示词上下文
所属领域（必填）GET/POST /api/db/domains可编辑文本 + datalist 历史建议；「＋ 新增领域」展开输入（最多 6 字）领域方案库分类维度、生成提示词领域上下文
站点基本情况描述（必填）PUT /api/db/sites（description）可编辑（输入即保存）多行文本域生成提示词核心上下文（最关键）
补充要求PUT /api/db/sites（supplement）可编辑文本域生成提示词补充上下文；可被 AI 智能补全写入
参考资料POST /api/db/sites/:id/files（base64）可编辑（上传）文件选择（PDF/DOCX/XLSX/PNG，≤20MB）作为站点附件上下文（是否进入提示词取决于后端拼装）
+

② 按钮与操作

+ + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
＋ 新增领域展开领域输入框输入（最多 6 字）「保存」→ POST /api/domains 并刷新本地领域列表；再点收起
AI 智能补全「开始补全」POST /api/db/sites/:id/complete（流式 NDJSON）无需填参控制台流式输出思考过程，结束自动写「补充要求」并保存；无独立确认弹窗
查看提示词打开 completePrompt 模态只读模态关闭 = × / 「关闭」按钮
顶部「保存草稿」notify("草稿已保存")—提示（字段已即时自动保存）
sticky「上一步」go("projects")—返回站点项目
sticky「下一步」go("assets")—进入 Asset 资产设置
+

③ 导航流

+ +

5.4 Asset 资产设置（assets）

@@ -224,6 +301,34 @@
元素功能数据来源交互效果
AI 智能补全根据站点名称 / 领域 / 描述 / 补充要求，分析并补充设备类型、数量与命名规则到资产配置列表（位于用户已填项下方，不改动已填项）POST /api/db/sites/:id/complete-assets（流式 NDJSON）「开始补全」后控制台流式输出思考过程；结果追加到资产配置列表（按模型给出的数量预设与命名规则）；资产层级预览随之重算；「查看提示词」可看完整提示词 设备补充质量将按反馈持续优化
+

5.4.1 交互细节

+
Asset 资产设置
Asset 资产设置：设备类型、数量、命名规则与资产层级预览。
+

① 字段 / 表格逐列（设备资产配置表格，行内编辑即保存）：

+ + + + + + +
列数据来源是否可编辑编辑类型上线范围
设备类型 *PUT /api/db/sites/:id/assets可编辑文本输入资产层级树节点、模拟数据设备实例类型
数量 *同上可编辑数字 min=0资产层级实例数量、模拟数据设备数
命名规则同上可编辑文本（# 序号 / 纯前缀）生成时设备实例命名（如 CH-01、beng-01）
操作 / ⌫同上（本地移除行）触发动作删除按钮移除该设备类型
+

KPI 行（设备类型 / 设备实例 / 资产层级）与「资产层级预览」树由本地计算，随表格实时变化（3 层结构为展示占位，资产层级建模尚未实现）。

+

② 按钮与操作

+ + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
＋ 添加设备类型追加一行空白设备类型—无弹窗
⌫ 删除移除该行—无二次确认（即时移除）
AI 资产补全「开始补全」POST /api/db/sites/:id/complete-assets（流式）无需填参结果追加到列表下方并自动保存；控制台流式输出
查看提示词打开 completePrompt 模态只读× / 关闭
sticky「上一步」go("basic")—返回基本属性
sticky「下一步」go("functions")—进入功能与菜单
+

③ 导航流

+ +

5.5 功能与菜单（functions）

三个子页签：

@@ -236,6 +341,41 @@
菜单结构（只读默认预览）展示默认菜单结构本地计算（MU + Cube）MU 标准页面在上；所有 Cube 页面归入「综合监控」一级菜单，二级为各 Cube 页面名称；本页仅为展示，无编辑/保存 默认结构
+

5.5.1 交互细节

+
功能与菜单
功能与菜单：MU 页面选择、Cube 扩展页面编辑、页面样式选择、菜单结构预览。
+

三个页签：MU 标准页面 / Cube 扩展页面 / 菜单结构。

+

① 字段 / 表格逐列

+ + + + + + + + +
区域 / 列数据来源是否可编辑编辑类型上线范围
MU 标准页面（树状复选）GET /api/db/mu-tree可编辑（勾选）checkbox，默认全选（site.mu 空时按全部叶子键，首次取消才落地）生成菜单的 MU 页面（当前"直接复用并配置菜单（未开发）"）
Cube 页面名称（最多 6 字）GET/POST/PUT/DELETE /api/db/sites/:id/cubes可编辑文本输入 maxLength=6生成的 Cube 页面名、菜单"综合监控"下二级项
Cube 页面内容同上可编辑文本输入该页生成提示词要求 / 页面主题
生成文件cube.status只读已生成→「下载」按钮；否则"未生成"交付物
站点页面样式GET /api/db/page-styles；PUT /api/db/sites（style_id）可编辑（单选）样式卡片点击（"无" 或 选中某样式）全站 Cube 页面视觉主题（生成时参考其 JSON 主题）
菜单结构（只读预览）本地计算（MU + Cube）不可编辑展示默认：MU 在上，所有 Cube 归「综合监控」一级菜单
+

② 按钮与操作

+ + + + + + + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
MU 复选框勾选/取消 → saveMu PUT /sites/:id/mu—即时保存（失败提示）
Cube「预览」notify("预览 X")—占位（真实预览尚未实现）
Cube「生成」generateCube POST /cubes/:id/generate（单页，非流式，无实时日志）—生成后刷新该页状态
Cube「保存」saveCube PUT/POST /cubes—已保存提示
Cube「删除」removeCube DELETE（有 id 才删后端）—即时移除
＋ 添加 Cube 页面追加空白 Cube—无弹窗
样式卡片（无 / 各样式）selectStyle PUT /sites/:id（style_id）—应用 / 清除样式提示
AI Cube 补全「开始补全」POST complete-cubes（流式）无需填参结果追加到已建页面下方并保存；控制台流式
查看提示词打开 completePrompt 模态只读× / 关闭
sticky「上一步」go("assets")—返回 Asset
sticky「下一步」go("generate")—进入生成确认
+

③ 导航流

+ +

5.6 生成确认（generate）

@@ -248,6 +388,33 @@
元素功能数据来源交互效果
「下载 ZIP」下载全部交付物GET /api/db/sites/:id/package新标签页下载 station-package.zip
+

5.6.1 交互细节

+
生成确认
生成确认：选择生成范围、执行 AI 生成，并实时查看生成进度。
+

① 字段 / 表格逐列

+ + + + + + +
区域 / 列数据来源是否可编辑编辑类型上线范围
生成范围确认卡片（站点 / Asset / MU / Cube）当前 site 本地计算只读展示卡片 + 「返回修改」占位按钮（返回修改未实现）本次生成交付物范围提示
页面生成提示词列表（站点级 + 每 Cube 行）前端拼装（与后端 buildCubePrompt 同源）只读每行「查看提示词 →」生成前核对的完整组合提示词
生成选项（复选）静态选项可勾选checkbox；仅「生成 Asset Excel」置灰（未实现），其余默认勾选决定 generate-all 交付物范围
生成任务面板（进度条 / 任务列表）POST generate-all 流式只读NDJSON 逐事件更新生成进度
+

② 按钮与操作

+ + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
生成范围卡「返回修改」占位—尚未实现
查看提示词 →（站点级）打开 prompt 模态（viewSitePrompt）只读× / 关闭
查看提示词 →（每页）打开 prompt 模态（viewPrompt(cubeId,name,content)）只读× / 关闭
开始生成 / 重新生成start POST generate-all 流式 → 更新任务/进度 → 完成后 zipUrl—生成期间禁用；完成出现「下载 ZIP」
下载 ZIPwindow.open(zipUrl) 新标签—下载 station-package.zip
AI 生成工作流终端实时滚动模型/Skill 输出只读点开始生成时清空
+

③ 导航流

+ +

5.7 站点结果（result）

@@ -258,6 +425,33 @@
元素功能数据来源交互效果

页面结果卡片默认纵向单列排列（上下结构），每张卡片占满整行，便于在多个 Cube 页面间逐张查看与操作；每张卡片底部并排展示「预览 / JSON / 提示词 / 修改意见」四个按钮。

+

5.7.1 交互细节

+
站点结果
站点结果：生成完成后查看各 Cube 页面缩略图、预览、JSON 下载、提示词与修改意见。
+

① 字段 / 表格逐列（均为结果只读展示，无表单编辑）：

+ + + + + +
区域数据来源是否可编辑编辑类型上线范围
结果头（状态 / 修改配置 / 下载全部 / 版本历史）当前 site不可编辑状态展示 + 操作按钮操作入口
KPI 行（Asset / MU / Cube / 交付文件）本地计算只读数字统计
页面结果卡片（缩略图 / 状态 / 名称 / 内容 / 预览·JSON·提示词·修改意见）GET /cubes/:id/file（DashboardThumb 真实渲染生成 JSON）只读（修改意见除外）卡片 + 四个按钮逐页交付物查看与反馈
+

② 按钮与操作

+ + + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
版本历史setModal("history")只读模态× / 关闭
修改配置go("assets")—返回资产配置编辑
下载全部window.open(/api/db/sites/:id/package)—新标签下载
预览openPreview 新标签打开渲染 HTML（真实 JSON）—新标签
JSON下载该页生成 JSON—下载
提示词viewPrompt 打开 prompt 模态只读× / 关闭
✎ 修改意见openFeedback 打开 feedback 模态填写修改意见提交 → refineCube 流式重生成，模态内「AI 生成工作流」终端实时滚动，完成后刷新并关闭；× / 关闭 = 取消（不重生成）
+

③ 导航流

+ +

5.8 页面预览（preview）

@@ -267,10 +461,25 @@
元素功能数据来源交互效果
实际 Cube 渲染（info/json/feedback 标签）真实渲染已生成 JSONGET .../file + dashboard-renderer展示真实生成结果（与 result 缩略图同源）
+

5.8.1 交互细节

+

本页当前无 UI 入口，故无对应截图；功能说明见下文。

+

① 字段 / 表格逐列（当前为静态演示外壳，未接入真实生成数据）：

+ + + + + + +
区域 / 列数据来源是否可编辑编辑类型上线范围
页面选择下拉当前 site.cubes可切换（本地）select仅切换演示画布展示的 Cube
「站点监控」演示画布内置演示数据只读KPI（92% / 12,480kWh / 7 / 68%）与图表为静态演示占位（未接入真实生成数据）
1440×900 / 浅色 / 刷新数据 / 全屏—占位按钮按钮除提示外无实际行为（尚未实现）
实际 Cube 渲染（info/json/feedback 标签）GET .../file + dashboard-renderer只读真实渲染已生成 JSON与 result 缩略图同源
+

② 按钮与操作：演示画布内的「刷新数据 / 全屏」等仅触发提示，无业务副作用。实际 Cube 渲染区可展示真实生成结果。

+

③ 导航流

+ +

5.9 领域方案库（domains）

领域方案库已从硬编码演示改为真实数据库驱动。列表与详情编辑器同一页面内通过 openDomainTemplateId state 切换：null=列表，"create"=新增表单，number=该方案详情编辑器。列表支持列表 / 卡片两种视图切换（右上角视图切换按钮，view state 控制）；点击左侧「领域分类」下的某个领域会按 domainFilter 自动筛选该领域方案。

-

下图展示了领域方案库列表与「＋ 新增领域方案」入口：

-
领域方案库列表
领域方案库：列表视图，支持列表/卡片切换、按领域分类筛选，点击「编辑」进入方案详情。
@@ -278,10 +487,39 @@
元素功能数据来源交互效果
领域方案列表表格展示全部领域方案（模板名称 / 所属领域 / 版本 / 状态 / 创建人 / 设备·页面·文档数 / 操作）GET /api/db/domain-templates（含 domain_name、device_count、page_count、doc_count）每行「编辑」→ 打开该方案详情编辑器；「删除」→ 确认后 DELETE /api/db/domain-templates/:id（级联删除 device_template_domain_templates）并刷新；空列表提示「点击右上角新增」
搜索 / 筛选 / 同步方案库（历史功能）—已按计划 Phase 0 移除整行（含「同步方案库」占位按钮） 已移除
+

5.9.1 交互细节

+
领域方案库
领域方案库：列表视图，支持列表/卡片切换、按领域分类筛选，点击「编辑」进入方案详情。
+

① 字段 / 表格逐列（列表表格，仅展示 + 操作）：

+ + + + + + + + + +
列数据来源是否可编辑编辑类型上线范围
方案名称GET /api/db/domain-templates（name）只读（列表态）文本方案标识
所属领域domain_name只读文本侧栏领域分类维度
版本version只读文本方案版本
状态status只读Status 标签（可用/不可用）是否可选入站点方案
创建人creator只读文本—
设备 / 页面 / 文档聚合 device_count / page_count / doc_count只读数字方案体量概览
操作 / 编辑·删除编辑→onOpen(id)；删除→DELETE（级联删关联）触发动作按钮（删除二次确认）打开详情 / 删除方案
+

顶部 domain-hero-stats 按领域统计方案数（本地计算），纯展示；侧栏「领域分类」按钮设置 domainFilter 筛选。

+

② 按钮与操作

+ + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
视图切换 列表 ▤ / 卡片 ▦setView 本地—无弹窗（卡片态点卡片即打开详情）
侧栏领域分类按钮setDomainFilter(d.id) 筛选—无弹窗
编辑onOpen(id) → 方案详情——
删除DELETE /api/db/domain-templates/:id（级联 device_template_domain_templates）—二次确认后删除并刷新
＋ 新增领域方案setOpenDomainTemplateId("create") → 同页 CreateTemplate 表单表单填写保存(POST)后自动打开详情；取消收起
清除领域筛选setDomainFilter(null)—无弹窗
+

③ 导航流

+ +

5.10 方案详情（domainDetail / 内嵌编辑器）

详情为同一页面内嵌编辑器，所有内容均可编辑，数据持久化到领域方案库相关表。各面板如下：

-

下图展示了一个领域方案的详情编辑器（模板信息 + 设备模板 + 领域页面等面板）：

-
方案详情编辑器
领域方案详情编辑器：模板信息、选用设备模版、领域页面、模板菜单、知识文档、运维流程等面板。
@@ -293,9 +531,36 @@
面板 / 元素功能数据来源 / 接口交互效果
模板信息编辑所属领域 / 名称 / 版本 / 状态 / 创建人 / 描述GET /api/db/domain-templates/:id 详情；PUT /api/db/domain-templates/:id 保存「保存模板信息」写回并重新加载
运维流程（OpsFlowsViewer）查看运维流程（流程名称 + 内容 JSON 串）GET /api/ops-flows仅展示占位记录，本功能 尚未实现
+

5.10.1 交互细节

+
方案详情编辑器
领域方案详情编辑器：模板信息、选用设备模版、领域页面、模板菜单、知识文档、运维流程等面板。
+

① 字段 / 表格逐列

+ + + + + + + + +
面板 / 区域数据来源 / 接口是否可编辑编辑类型上线范围
模板信息GET/PUT /api/db/domain-templates/:id可编辑所属领域(select) / 模板名称 / 版本 / 状态(select) / 创建人 / 领域描述(textarea)方案元信息，被站点方案引用
选用设备模版（DeviceTemplatePicker）详情 devices[]；GET /api/db/device-templates；PUT /api/db/domain-templates/:id（device_template_ids，服务端重写关联）可编辑（勾选即保存）复选框列表该方案选用的设备模版集合（供站点方案引用）
领域页面（PageRow）详情 pages[]；POST /api/db/domain-templates/:id/pages；PUT/DELETE /api/db/domain-pages/:id可编辑名称 / 说明 / Cube JSON（保存前校验合法 JSON）方案内置页面（=StationBuilder 的 Cube）
模板菜单详情 menu[]；POST /api/db/domain-templates/:id/menu；DELETE /api/db/template-menu-items/:id可编辑（新增占位项）表格（菜单项/类型/父级/关联）+ 删除方案菜单结构
知识文档详情 docs[]；POST /api/db/domain-templates/:id/docs；GET /api/db/knowledge-docs/:id/file；DELETE可编辑新增选「超链」(填 URL) 或「文件」(上传 base64)；列表可下载/删方案知识库
运维流程（OpsFlowsViewer）GET /api/ops-flows只读占位展示尚未实现
+

② 按钮与操作

+ + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
保存模板信息PUT /api/db/domain-templates/:id表单填写写回并重新加载（提示"已保存模板信息"）
选用设备模版 复选框toggle → PUT device_template_ids（先 DELETE 旧关联再重建）—即时保存（失败回滚）；「＋ 新增设备模版」→ go("deviceTemplates") 跳转新建
领域页面 编辑 / 取消 / 保存 / 删除PageRow 内编辑态切换；保存前校验 JSON—保存 PUT / 删除 DELETE；取消退出编辑态
＋ 新增页面 / 菜单项 / 文档POST 对应接口（默认空/占位）—新增后刷新
知识文档 下载 / 删GET file / DELETE—下载二进制 / 删除
← 返回列表onBack → 领域方案库列表—返回列表态
+

③ 导航流

+ +

5.11 页面样式库（styleLibrary）

-

下图为页面样式库的实际界面，展示缩略图卡片网格与「＋ 新增样式」入口：

-
页面样式库
页面样式库：16:9 缩略图卡片网格，可新增 / 编辑 / 删除样式。
@@ -303,10 +568,36 @@
元素功能数据来源交互效果
样式卡片网格（缩略图 + 名称 + 编辑/删除）浏览已有样式GET /api/db/page-styles3 列布局，缩略图按 16:9 比例自适应高度（object-fit:contain，整页完整可见、不被截断）；缩略图点开大图预览；编辑/删除生效
样式大图预览（StylePreview）查看样式原图GET /api/db/page-styles/:id/image模态展示
+

5.11.1 交互细节

+
页面样式库
页面样式库：16:9 缩略图卡片网格，可新增 / 编辑 / 删除样式。
+

① 字段 / 表格逐列

+ + + + + + +
区域 / 列数据来源是否可编辑编辑类型上线范围
样式卡片网格（缩略图 / 名称 / 创建时间 / 编辑·删除）GET /api/db/page-styles卡片只读；编辑/删除可触发缩略图 = GET /page-styles/:id/image；3 列网格样式浏览与维护
StyleEditorModal · 样式名称（必填）POST/PUT /api/db/page-styles可编辑文本输入样式库展示名
StyleEditorModal · 预览图（新建必填）同上（image base64）可编辑图片上传（建议 16:10 PNG/JPG）样式缩略图与大图预览源
StyleEditorModal · 仪表盘 JSON（必填，需合法 JSON）同上（jsonText）可编辑textarea 粘贴 或 上传 .json 文件Cube 页面视觉主题（生成时参考）
+

② 按钮与操作

+ + + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
卡片缩略图点击打开 StylePreview 大图模态只读× / 点击遮罩关闭
卡片「✎ 编辑」openEdit → StyleEditorModal（预填）表单保存 PUT / 取消收起
卡片「🗑 删除」DELETE /api/db/page-styles/:id—二次确认后删除并刷新
＋ 新增样式setEditor({open:true}) → 新建模态表单保存 POST（需图+合法JSON）/ 取消关闭
编辑模态「保存」新建需图+JSON 合法 → POST；编辑 → PUT—失败提示（如 JSON 非法 / 新建未传图）；成功提示并关闭
编辑模态「取消」/「×」onClose—关闭，不保存
编辑模态「删除」（仅编辑态）DELETE → 刷新—二次确认后删除
+

③ 导航流

+ +

5.12 设备模版（deviceTemplates）

独立的「设备模版」页，维护可复用的设备模版与采集点，供领域方案在详情中「选用设备模版」引用。设备模版数量可能成百上千，因此采用默认展开列表、点击进入详情的方式（而非整页卡片栅格）：列表为紧凑表格（.device-tpl-list），含缩略图 / 名称 / 说明 / 采集点数 / 操作，并支持按名称或说明实时搜索；点击任意行进入该设备模版的详情编辑区，详情内「← 返回列表」回到列表。列表上方「＋ 新增设备模版」进入新建表单（创建后定位到新建设备的详情）。

-
设备模版列表
设备模版列表：默认展开表格视图，支持搜索，点击行进入详情编辑。
-
设备模版详情
设备模版详情：名称 / 说明 / 设备图片、长方形预览区、采集点表格编辑（新增 / 批量删除 / 保存 / 数值范围下拉）。
@@ -315,8 +606,49 @@
元素功能数据来源 / 接口交互效果
设备图片以长方形预览区展示设备图片，点击预览区即上传 / 更换GET /api/db/device-templates/:id/image（服务端按 image_path 落盘 data/db/uploads/devices/）；PUT /api/db/device-templates/:id（image base64）预览区固定高度、object-fit:cover 不再溢出；上传后即时本地预览，保存时写回；删除图片 尚未实现
新增设备模版新建设备模版（名称 / 说明 / 图片）POST /api/db/device-templates列表上方「＋ 新增设备模版」进入新建表单，创建后自动打开该设备模版的详情编辑区
+

5.12.1 交互细节

+
设备模版列表
设备模版列表：默认展开表格视图，支持搜索，点击行进入详情编辑。
+
设备模版详情
设备模版详情：名称 / 说明 / 设备图片、长方形预览区、采集点表格编辑（新增 / 批量删除 / 保存 / 数值范围下拉）。
+

① 字段 / 表格逐列（列表表格，仅展示 + 操作；详情为编辑区）：

+ + + + + + +
列表列数据来源是否可编辑编辑类型上线范围
图片image_path → GET /device-templates/:id/image只读（列表态）缩略图 / 无图显示 —设备模版缩略图
名称 / 说明name / description只读（列表态）文本方案选用设备时展示
采集点collection_points.length只读数字采集点数量概览
操作 / 编辑·删除编辑→openId(id)；删除→DELETE触发动作按钮（删除二次确认）打开详情 / 删除设备
+

详情编辑区（DeviceTemplateCard）字段：

+ + + + + + +
详情字段数据来源 / 接口是否可编辑编辑类型上线范围
设备名称GET/PUT /api/db/device-templates/:id可编辑文本输入设备模版名
设备图片同上（image base64）可编辑点击预览区上传（accept="image/*"），object-fit:cover 长方形预览方案选用设备缩略图
说明同上可编辑多行文本设备描述
采集点（表格：复选/名称/说明/单位/数值范围/描述）GET 详情 collection_points；POST /device-templates/:id/collection-points；PUT/DELETE /api/db/collection-points/:id可编辑名称/说明/单位/描述 = 文本输入；数值范围 = 下拉选择器（预设 0~100 / 0~1000 / -20~80 / -40~85 / 0~50 / 0~5 / 0~1 / 0~100%，或「自定义…」文本输入）设备采集点定义（供设备实例监控；当前生成未直接消费）
+

② 按钮与操作

+ + + + + + + + + + + + +
按钮点击效果编辑方式确定 / 取消 / 关闭
搜索框输入即按名称/说明前端过滤文本无弹窗
＋ 新增设备模版openId("create") → CreateTemplate 表单表单创建 POST 后打开该设备详情；取消 → 返回列表
列表行点击 / 编辑openId(id) → 详情——
列表删除DELETE /api/db/device-templates/:id—二次确认后删除并刷新列表
详情「保存设备」PUT /api/db/device-templates/:id（name/description/image）表单写回并提示"设备已保存"
详情「＋ 新增一行」追加空白采集点行（临时负 key）—无弹窗
详情「删除选中」勾选 → DELETE 已有 id（collection-points/:id）多选二次确认后批量删除
详情「保存采集点」已有行 PUT /collection-points/:id；新建行 POST /device-templates/:id/collection-points—写回并提示"采集点已保存"
详情「删除设备」DELETE 设备—二次确认后删除并 → 返回列表
← 返回列表openId(null)—返回列表态
+

③ 导航流

+ +

5.13 界面截图（UI 总览）

-

以下截图覆盖了当前 StationBuilder 原型中可访问的主要页面。截图在 1440×900 视口下使用 Playwright + Chromium 自动抓取，图片存放于 public/design-doc-assets/。

+

以下截图覆盖了当前 StationBuilder 原型的主要页面。截图在 1440×900 视口下使用 Playwright + Chromium 自动抓取，图片存放于 public/design-doc-assets/。各页的字段、按钮与导航流逐项说明见 5.1–5.12 的「交互细节」子章。

+

可达性说明：登录、站点项目、基本属性、Asset、功能与菜单、生成确认、站点结果（站点项目点击已生成站点进入）、领域方案库、方案详情、页面样式库、设备模版均可正常访问；页面预览（5.8）当前无 UI 入口（代码中无 go("preview") 调用），故未单独截图，其演示外壳见 5.8.1。

登录页
登录页：iStation StationBuilder 统一登录入口。
站点项目
站点项目：全部站点列表、统计概览、筛选与新建入口。
@@ -324,6 +656,7 @@
Asset 资产设置
Asset 资产设置：设备类型、数量、命名规则与资产层级预览。
功能与菜单
功能与菜单：MU 页面选择、Cube 扩展页面编辑、页面样式选择、菜单结构预览。
生成确认
生成确认：选择生成范围、执行 AI 生成，并实时查看生成进度。
+
站点结果
站点结果：生成完成后查看各 Cube 页面缩略图、预览、JSON 下载、提示词与修改意见。
领域方案库
领域方案库：列表/卡片视图切换、按领域分类筛选。
领域方案详情
领域方案详情：模板信息、选用设备模版、领域页面、模板菜单、知识文档、运维流程占位。
设备模版列表
设备模版列表：紧凑表格、搜索、点击进入详情。
@@ -395,6 +728,11 @@

11.1 版本变更记录（Changelog）

+ + + + +
版本日期修改人说明
v0.142026-08-19wang.yu左侧目录（TOC）贴齐浏览器最左侧：.doc-layout 取消 margin:0 auto 自动居中（改为 margin:0; padding-left:12px），宽屏下不再左右留白，目录紧贴视口左缘。
v0.132026-08-18wang.yu截图显示宽度由 500px 调整为 360px（.figure img 的 max-width），等比例缩放并居中，适配常见浏览宽度。
v0.122026-08-18wang.yu统一文档内所有截图显示尺寸：修改 .figure img 为 max-width:500px; height:auto 并居中，所有页面截图等比例压缩至 500px 宽，宽度一致。
v0.112026-08-18wang.yu补齐每个交互细节小节（5.1.1–5.12.1）的对应截图：新增 result.png（由 generated 站点「北方污水厂」进入结果页截取），将 5.9–5.12 的截图移入对应子节，5.13 截图总览同步加入 result.png。5.8 页面预览因无 UI 入口保留文字说明；5.1–5.7 子节补嵌实图。
v0.102026-08-18wang.yu细化设计文档：为每个页面（5.1–5.12）新增「交互细节」子章（5.x.1），统一按「① 字段 / 表格逐列（数据来源 / 是否可编辑 / 编辑类型 / 上线范围）② 按钮与操作（点击效果 / 编辑方式 / 确定·取消·关闭）③ 导航流（入口 / 上一步 / 下一步）」三段式逐项描述，覆盖表格每一列、每个按钮与弹窗的确认/取消/关闭语义及前后页跳转。修正可达性说明：站点结果可由站点项目点击已生成站点进入；页面预览当前无 UI 入口。
v0.92026-08-18wang.yu使用 Chromium + Playwright 自动抓取全站可访问页面截图，统一嵌入设计文档：新增 5.13「界面截图（UI 总览）」，覆盖登录页、站点项目、站点基本属性、Asset 资产、功能与菜单、生成确认、领域方案库、领域方案详情、设备模版列表/详情、页面样式库（共 11 张）。替换 5.9 / 5.10 中两张 placeholder.svg 为真实截图；在 5.11 / 5.12 补充真实界面图。截图文件置于 public/design-doc-assets/。
v0.82026-08-18wang.yu设备模版改为「默认展开列表、点击进入详情」：列表为紧凑表格（缩略图 / 名称 / 说明 / 采集点数 / 操作），支持按名称或说明实时搜索；点击行进入该设备模版的详情编辑区（名称 / 说明 / 图片 / 采集点），可「← 返回列表」；「＋ 新增设备模版」进入新建表单，创建后定位到新建设备的详情。面向成百上千设备模版的可扩展性。同步更新 4.2 导航表、5.12 章节。
v0.72026-08-18wang.yu设备模版页交互优化：设备图片改为长方形预览区（点击上传，不再溢出）；移除设备侧「所属领域」多选（改为由领域/方案侧选用设备）；采集点改为整宽表格编辑，支持新增一行、勾选批量删除、保存，数值范围改为下拉选择器（预设 + 自定义）；修复打开卡片时 collection_points 未加载导致的 runtime error，列表接口补充返回 collection_points。后端新增 GET /api/db/device-templates/:id/image 图片服务。新增 5.12 章节。