From: root <root@localhost.localdomain>
Date: Wed, 9 Sep 2026 06:53:22 +0000 (+0800)
Subject: feat: 扩展页面补充 6 张示意图（仪表板报表/文档报表/基础组件库/功能组件库/筛选器/数据源），压缩后懒加载
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=7933a873cfcc123fa2e14c87218903fb59a310e5;p=StationBuilder.git

feat: 扩展页面补充 6 张示意图（仪表板报表/文档报表/基础组件库/功能组件库/筛选器/数据源），压缩后懒加载
---

diff --git a/app/page.tsx b/app/page.tsx
index 5cb53cd..16af6a0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -647,6 +647,12 @@ export default function Home(){
     <main className="workspace"><div className="crumb">iStation StationBuilder　/　<b>{["domains","domainDetail","styleLibrary","deviceTemplates","toolSettings","domainSettings"].includes(page)?meta[page].label:page==="projects"?"站点列表":page==="siteEdit"?`站点管理 / 站点编辑 / ${siteEditMeta.label}`:`站点详情 / ${meta[page].label}`}</b></div><div className="page-heading"><div><h1>{page==="siteEdit"?siteEditMeta.label:meta[page].label}</h1><p>{page==="siteEdit"?siteEditMeta.subtitle:meta[page].subtitle}</p></div><div>{page==="projects"&&<Button onClick={()=>go("basic","new")}>＋ 新建站点</Button>}{page==="siteEdit"&&<label className="site-edit-switcher"><span>当前站点</span><select value={siteId??""} onChange={async e=>{const id=Number(e.target.value);await loadSite(id);window.history.replaceState({},"",`?page=siteEdit&id=${id}`);}}>{sites.map(item=><option key={item.id} value={item.id}>{item.name||"未命名站点"}</option>)}</select></label>}{page==="domains"&&openDomainTemplateId==null&&<Button onClick={()=>setOpenDomainTemplateId("create")}>＋ 新增领域方案</Button>}{page==="domains"&&openDomainTemplateId!=null&&<Button secondary onClick={()=>setOpenDomainTemplateId(null)}>← 返回方案列表</Button>}{domainFilter!=null&&page==="domains"&&openDomainTemplateId==null&&<Button secondary onClick={()=>{setDomainFilter(null);}}>清除领域筛选：{domainOptions.find(d=>d.id===domainFilter)?.name||""}</Button>}{page==="domainSettings"&&<Button onClick={()=>{setNewDomainName("");setAddingDomain(true);}}>＋ 新增领域</Button>}</div></div>{page==="siteEdit"&&<SiteEditTabs section={siteEditSection} onChange={setSiteEditSection}/>} {SITE_EDIT_STEPS.includes(page as SiteEditSection)&&<Steps page={page} go={go}/>}<div className="content">
       {page==="projects"&&<Projects view={view} setView={setView} sites={sites} loading={loading} go={go} loadSite={loadSite} notify={notify} onDelete={deleteSites}/>}
       {page==="dashboard"&&<Dashboard/>}
+      {page==="report-dashboard"&&<ImagePage src="/t/stationbuilder/ext-pages/report-dashboard.jpg"/>}
+      {page==="report-doc"&&<ImagePage src="/t/stationbuilder/ext-pages/report-doc.jpg"/>}
+      {page==="basic-components"&&<ImagePage src="/t/stationbuilder/ext-pages/basic-components.jpg"/>}
+      {page==="func-components"&&<ImagePage src="/t/stationbuilder/ext-pages/func-components.jpg"/>}
+      {page==="filters"&&<ImagePage src="/t/stationbuilder/ext-pages/filters.jpg"/>}
+      {page==="datasource"&&<ImagePage src="/t/stationbuilder/ext-pages/datasource.jpg"/>}
       {(page==="domains"||page==="domainDetail")&&(openDomainTemplateId!=null
         ? <DomainDetail id={openDomainTemplateId==="create"?null:openDomainTemplateId} go={go} notify={notify} onBack={()=>setOpenDomainTemplateId(null)} onCreated={setOpenDomainTemplateId} viewCompletePrompt={viewDtCompletePrompt} viewCompleteAssetsPrompt={viewDtCompleteAssetsPrompt} viewCompleteCubesPrompt={viewDtCompleteCubesPrompt} pageStyles={pageStyles}/>
         : <CompanyDomainLibrary go={go} notify={notify} onOpen={(id:number)=>setOpenDomainTemplateId(id)} domainFilter={domainFilter} domainOptions={domainOptions}/>)}
@@ -2518,6 +2524,10 @@ function Dashboard(){
   return <div className="content dashboard-page"><img src="/t/stationbuilder/dashboard-preview.jpg" alt="仪表盘示意" loading="lazy"/></div>;
 }
 
+function ImagePage({src}:{src:string}){
+  return <div className="content dashboard-page"><img src={src} alt="" loading="lazy"/></div>;
+}
+
 function Modal({type,close,notify,promptData,feedbackCube,refineCube,refining,refineLog}:{type:Exclude<ModalKey,"">;close:()=>void;notify:(m:string)=>void;promptData?:{name:string;text:string}|null;feedbackCube?:Cube|null;refineCube?:(cube:Cube, feedback:string)=>void;refining?:boolean;refineLog?:string;}){
   const [feedbackText,setFeedbackText]=useState("");
   const refineConsoleRef=useRef<HTMLPreElement>(null);
diff --git a/public/design-doc-assets/ext-basic-components.png b/public/design-doc-assets/ext-basic-components.png
new file mode 100644
index 0000000..7ec1efe
Binary files /dev/null and b/public/design-doc-assets/ext-basic-components.png differ
diff --git a/public/design-doc-assets/ext-datasource.png b/public/design-doc-assets/ext-datasource.png
new file mode 100644
index 0000000..584e2d3
Binary files /dev/null and b/public/design-doc-assets/ext-datasource.png differ
diff --git a/public/design-doc-assets/ext-filters.png b/public/design-doc-assets/ext-filters.png
new file mode 100644
index 0000000..4dce3c7
Binary files /dev/null and b/public/design-doc-assets/ext-filters.png differ
diff --git a/public/design-doc-assets/ext-func-components.png b/public/design-doc-assets/ext-func-components.png
new file mode 100644
index 0000000..cce3178
Binary files /dev/null and b/public/design-doc-assets/ext-func-components.png differ
diff --git a/public/design-doc-assets/ext-report-dashboard.png b/public/design-doc-assets/ext-report-dashboard.png
new file mode 100644
index 0000000..8471313
Binary files /dev/null and b/public/design-doc-assets/ext-report-dashboard.png differ
diff --git a/public/design-doc-assets/ext-report-doc.png b/public/design-doc-assets/ext-report-doc.png
new file mode 100644
index 0000000..a5b81d4
Binary files /dev/null and b/public/design-doc-assets/ext-report-doc.png differ
diff --git a/public/design-doc.html b/public/design-doc.html
index 5caac39..15eaeed 100644
--- a/public/design-doc.html
+++ b/public/design-doc.html
@@ -698,9 +698,21 @@
   <figure><img src="design-doc-assets/device-detail.png" alt="设备模版详情"/><figcaption>设备模版详情：设备基本信息、图片、采集点表格编辑。</figcaption></figure>
   <figure><img src="design-doc-assets/style-library.png" alt="页面样式库"/><figcaption>页面样式库：样式缩略图网格与新增/编辑入口。</figcaption></figure>
 
-  <h3>4.14 仪表盘（dashboard）</h3>
-  <p>位于左侧「扩展页面」分组下的「仪表盘」菜单项（点击进入，当前页高亮）。该页定位为<b>示意展示页</b>：打开后仅居中展示一张仪表盘示意图片（已压缩至约 66KB，宽 1440，避免影响加载速度），不含其它交互元素。图片随页面懒加载（<code>loading="lazy"</code>）。</p>
-  <figure><img src="design-doc-assets/dashboard.png" alt="仪表盘示意页"/><figcaption>仪表盘页：仅居中展示仪表盘示意图片。</figcaption></figure>
+  <h3>4.14 扩展页面（dashboard / 报表 / 组件库 / 筛选器 / 数据源）</h3>
+  <p>左侧「扩展页面」分组下的菜单项（点击进入，当前页高亮；「报表」为分组容器，其下「仪表板报表」「文档报表」为可点击子页）。这些页面定位为<b>示意展示页</b>：打开后均仅居中展示对应示意图片（均经 sharp 压至约 13~81KB、宽 1440、渐进式 JPEG，<code>loading="lazy"</code> 懒加载，保障快速打开），不含其它交互元素。</p>
+  <ul>
+    <li><b>仪表板</b>（dashboard）：居中展示仪表盘示意图片。</li>
+    <li><b>报表 → 仪表板报表</b>（report-dashboard）、<b>报表 → 文档报表</b>（report-doc）：分别展示对应报表示意图片。</li>
+    <li><b>基础组件库</b>（basic-components）、<b>功能组件库</b>（func-components）：分别展示组件库示意图片。</li>
+    <li><b>筛选器</b>（filters）、<b>数据源</b>（datasource）：分别展示对应示意图片。</li>
+  </ul>
+  <figure><img src="design-doc-assets/dashboard.png" alt="仪表板页"/><figcaption>仪表板页：仅居中展示仪表盘示意图片。</figcaption></figure>
+  <figure><img src="design-doc-assets/ext-report-dashboard.png" alt="仪表板报表页"/><figcaption>仪表板报表页示意。</figcaption></figure>
+  <figure><img src="design-doc-assets/ext-report-doc.png" alt="文档报表页"/><figcaption>文档报表页示意。</figcaption></figure>
+  <figure><img src="design-doc-assets/ext-basic-components.png" alt="基础组件库页"/><figcaption>基础组件库页示意。</figcaption></figure>
+  <figure><img src="design-doc-assets/ext-func-components.png" alt="功能组件库页"/><figcaption>功能组件库页示意。</figcaption></figure>
+  <figure><img src="design-doc-assets/ext-filters.png" alt="筛选器页"/><figcaption>筛选器页示意。</figcaption></figure>
+  <figure><img src="design-doc-assets/ext-datasource.png" alt="数据源页"/><figcaption>数据源页示意。</figcaption></figure>
 
   <h2>5. 生成流程（端到端）</h2>
   <div class="flow">
@@ -769,6 +781,7 @@
   <h3>10.1 版本变更记录（Changelog）</h3>
   <table class="changelog">
     <tr><th>版本</th><th>日期</th><th>修改人</th><th>说明</th></tr>
+    <tr><td>v0.35</td><td>2026-09-09</td><td>wang.yu</td><td>扩展页面补齐示意内容：① 菜单「仪表盘」更名为「仪表板」（原 dashboard 页展示仪表盘示意图不变）。② 菜单结构定稿为：仪表板 / 报表（子页 仪表板报表、文档报表）/ 基础组件库 / 功能组件库 / 筛选器 / 数据源。③ 为其中 6 个页面（report-dashboard / report-doc / basic-components / func-components / filters / datasource）新增 <code>ImagePage</code> 展示组件，居中展示对应示意图片（源图经 sharp 压至 13~81KB、宽 1440、渐进式 JPEG、<code>loading="lazy"</code>），「报表」自身为分组容器不入页。④ 图片存于 <code>public/ext-pages/</code> 并随 basePath 提供。⑤ 设计文档 4.14 节扩充为扩展页面总览并附 7 张截图，Changelog 记 v0.35。</td></tr>
     <tr><td>v0.34</td><td>2026-09-09</td><td>wang.yu</td><td>新增「仪表盘」页面：① 左侧「扩展页面」分组下的「仪表盘」由占位文本改为可点击菜单项（<code>.extension-menu-item.clickable</code>），点击进入新页 <code>dashboard</code>（当前页高亮、分组自动展开）。② 页面定位为<b>示意展示页</b>：<code>Dashboard</code> 组件仅居中展示一张仪表盘示意图片（<code>public/dashboard-preview.jpg</code>，源图经 sharp 压至 1440×729 / 66KB、渐进式 JPEG，<code>loading="lazy"</code> 懒加载，避免影响打开速度），不含其它交互。③ 图片存放于 <code>public/</code> 并随 Vite public 资源在 basePath <code>/t/stationbuilder/</code> 下提供。④ 设计文档新增 4.14 节并附截图（<code>dashboard.png</code>），Changelog 记 v0.34。</td></tr>
     <tr><td>v0.33</td><td>2026-09-09</td><td>wang.yu</td><td>「设计方案」入口与导航栏对齐：① <b>入口位置变更</b>：由早期顶栏/页脚链接改为固定在<b>左侧菜单最底部</b>（`.company-side-nav` 最后一个 flex 子项，<code>margin-top:auto</code> 推至底），成为常驻的菜单项而非浮层，避免遮挡正文。② <b>按钮样式</b>：鲜明紫渐变（<code>#7e57c2 → #ab47bc</code>）、10 号字、圆角小按钮（<code>.design-doc-link</code>），点击 <code>target="_blank"</code> 新标签打开 <code>https://aidemo.istation.cloud/t/stationbuilder/design-doc.html</code>。③ <b>设计文档同步</b>：第 3 章新增 3.5「设计方案入口（左侧菜单底部）」并附菜单截图（<code>menu-design-doc.png</code>）；第 6 章「AI 问答」附 AI 助手对话框截图（<code>ai-dialog.png</code>）；第 7 章「模态框」附「新增领域」对话框截图（<code>dialog-add-domain.png</code>）；第 4 章各页面说明截图全部重新抓取（projects/basic/assets/functions/generate/result/preview/domains/domain-detail/styleLibrary/deviceTemplates/toolSettings/domainSettings），并对页面全量截图做样式加载校验（0 控制台 404）。④ 维护说明注释同步更新入口位置。</td></tr>
     <tr><td>v0.32</td><td>2026-08-21</td><td>wang.yu</td><td>领域方案「生成保存」步骤重构为「方案打包」：① <b>步骤改名</b>：<code>DOMAIN_STEPS</code> 末步标签「生成保存」→「方案打包」；该步骤不再提供「下一步」，仅保留「保存草稿」与本步专属「📦 打包下载」按钮（末步另保留「提交确认」以提交专家确认）。② <b>「生成范围确认」→「方案概览」多标签总览</b>：<code>DomainGenerateReview</code> 重写为单 Panel「方案概览」+ 六标签（标签上带数量徽标）：<b>设备模板 N</b>（方案去重用到的设备模板列表，点击行内展开详情——调 <code>GET /api/db/device-templates/:id</code> 显示说明与采集点清单）、<b>资产结构 N</b>（按设备模板聚合的默认资产组树状预览，使用 <code>formatInstances(rule,count)</code> 展开实例）、<b>MU页面 N</b>（复用功能与菜单的 MU 树，禁用态勾选框展示已选页面）、<b>扩展页面 N</b>（已生成 Cube 页面卡片，点击整卡经 <code>onPreviewPage</code> 打开全屏预览）、<b>领域知识 N</b>（列举本方案上传的知识文档与 URL 站点）、<b>运维流程</b>（占位「待开发」+ 固定文案「运维流程编辑功能待开发，后续版本将支持在方案中配置标准运维 SOP 与告警处理流程。」）。概览头部固定展示所属领域 / 方案名称 / 方案描述 / 补充描述。③ <b>修复扩展页面预览「只能看到上半部分」</b>：<code>DomainPageThumb</code> 新增 <code>fit</code> 模式——由「仅按宽度缩放」改为「按宽高较小比例缩放」<code>s = min(w/pw, availH/rh)</code>（availH 取预览 canvas 父容器高度），canvas 高度由固定 430px 改为 <code>height:64vh; overflow:auto</code>，整页一次可见不再裁切。④ <b>「📦 打包下载」示意弹窗</b>：新增 <code>PackageModal</code>——SVG 立体包装箱（堆叠文档矩形，带投影）＋ 5 张打包组成卡片（设备模板 / 资产结构 / 扩展页面文件 / 默认菜单 / 领域知识），「确认打包下载」提示「方案已打包（示意），可交付给实施团队」后关闭（本期为示意，真实文件导出待后续）。<code>globals.css</code> 增补 <code>.gen-overview / .overview-info / .overview-tabs / .dev-list / .dev-detail / .asset-tree-preview / .mu-tree / .doc-list / .ops-placeholder / .pkg-modal / .pkg-svg / .pkg-items</code> 等样式。Playwright E2E（污水厂方案，34 设备 / 11 页面）：步骤标签=方案打包、Panel=方案概览、6 标签徽标正确、设备行展开显示 12 个采集点、资产树 / MU 树 / 页面卡片渲染、预览 canvas 渲染高度 576px = 缩放后整页高度（证明整页可见，不再上半部裁切）、知识 / 运维标签文案正确、本步无「下一步」、打包弹窗含 SVG + 5 组成项，0 控制台报错；另以数字机房方案验证领域知识列表确实展示已上传文档。</td></tr>
diff --git a/public/ext-pages/basic-components.jpg b/public/ext-pages/basic-components.jpg
new file mode 100644
index 0000000..be5b939
Binary files /dev/null and b/public/ext-pages/basic-components.jpg differ
diff --git a/public/ext-pages/datasource.jpg b/public/ext-pages/datasource.jpg
new file mode 100644
index 0000000..0a2b3c4
Binary files /dev/null and b/public/ext-pages/datasource.jpg differ
diff --git a/public/ext-pages/filters.jpg b/public/ext-pages/filters.jpg
new file mode 100644
index 0000000..b92f54c
Binary files /dev/null and b/public/ext-pages/filters.jpg differ
diff --git a/public/ext-pages/func-components.jpg b/public/ext-pages/func-components.jpg
new file mode 100644
index 0000000..5709ab1
Binary files /dev/null and b/public/ext-pages/func-components.jpg differ
diff --git a/public/ext-pages/report-dashboard.jpg b/public/ext-pages/report-dashboard.jpg
new file mode 100644
index 0000000..ccc5f57
Binary files /dev/null and b/public/ext-pages/report-dashboard.jpg differ
diff --git a/public/ext-pages/report-doc.jpg b/public/ext-pages/report-doc.jpg
new file mode 100644
index 0000000..ee34914
Binary files /dev/null and b/public/ext-pages/report-doc.jpg differ
diff --git a/scripts/shot-ext.mjs b/scripts/shot-ext.mjs
new file mode 100644
index 0000000..1f1e7ef
--- /dev/null
+++ b/scripts/shot-ext.mjs
@@ -0,0 +1,16 @@
+import { chromium } from 'playwright';
+const BASE='https://aidemo.istation.cloud/t/stationbuilder';
+const pages=[['report-dashboard','ext-report-dashboard'],['report-doc','ext-report-doc'],['basic-components','ext-basic-components'],['func-components','ext-func-components'],['filters','ext-filters'],['datasource','ext-datasource']];
+const b=await chromium.launch();
+const p=await b.newPage({viewport:{width:1440,height:900}});
+const errs=[];
+p.on('console',m=>{if(m.type()==='error')errs.push(m.text());});
+for (const [key,out] of pages){
+  await p.goto(`${BASE}/?page=${key}`,{waitUntil:'networkidle'});
+  await p.waitForSelector('.dashboard-page img',{timeout:15000});
+  await p.waitForTimeout(800);
+  await p.screenshot({path:`public/design-doc-assets/${out}.png`,fullPage:true});
+  console.log('saved',out);
+}
+console.log('ERRORS',errs.slice(0,5));
+await b.close();