Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jiang
|
0ae0a41e61 | ||
|
jiang
|
865491cb23 |
+10
-2
@@ -78,7 +78,15 @@ Agent 选择组件、内容顺序与受控语义，前端负责实际视觉、
|
||||
|
||||
短结果及说明直接在对话内阅读；包含表格、图表、补充表单或长正文的回答提供展开入口。窗口尺寸、滚动与放大由宿主管理，不作为模型输出样式。
|
||||
|
||||
`Chart` 的页签、图例、区间摘要与数据点详情由前端固定实现，Agent 只提供标题、初始图形类型、类别、序列和来源。鼠标切换折线、柱状和数据表时使用 180ms Motion 滑块与内容过渡；键盘操作与减少动态效果模式即时完成。数据点详情只在点击图中数据点，或聚焦图形后按回车、方向键、Home/End 选点时出现，关闭后焦点回到图形；数据表页签不重复展示区间摘要和点详情，搜索与排序在视图切换后保留。
|
||||
`Chart` 的页签、位于绘图区下方的图例、区间摘要与数据点详情由前端固定实现，Agent 只提供标题、初始图形类型、类别、序列和来源。鼠标切换折线、柱状和数据表时使用 180ms Motion 滑块与内容过渡；键盘操作与减少动态效果模式即时完成。数据点详情只在点击图中数据点，或聚焦图形后按回车、方向键、Home/End 选点时出现，关闭后焦点回到图形；数据表页签不重复展示区间摘要和点详情，搜索与排序在视图切换后保留。
|
||||
|
||||
SCADA 的压力、水头（m）及流量、管流（m³/h）数值轴使用对齐的整数上下界与整数刻度，不直接显示数据极值外加余量的小数端点。序列、数据表与点详情保持原始读数精度；其他单位及通用小量程图沿用原有刻度，不自动换算单位。
|
||||
|
||||
图表发布及 Dev 示例的对象聚合、同期校验和历史读取边界统一见 [调查展示 Dev 测试](investigation-dev-tools.md#对象复合图与验证规则)。结构化 Chart 保持单图语义，对象聚合通过 open_chart 的独立对象数据集实现。
|
||||
|
||||
[图表和窗口管理](investigation-dev-tools.md#图表和窗口管理)由浏览器宿主负责：总窗口收纳过程图组与报告 Chart，子图表保留独立弹窗放大。总窗口提供单图、左右、四宫格固定槽位，全部图表沿纵向连续排列，末行按列数补齐空槽；整条位置栏提供拖拽和悬停反馈，拖放到目标位置交换内容。窄窗口使用单图，快速定位会滚动到目标位置。同一图表更新保留位置，删图留空，新图先填空槽。顶部窗口列表可定位、置顶已打开的总窗口、子图表和表格，并统一关闭。窗口缩放期间，图表按窗口实际尺寸适配并保留图表实例与筛选状态；松开后确认最终尺寸，Escape 或指针取消恢复原尺寸。
|
||||
|
||||
任务打开、切换、刷新、已完成任务载入和历史恢复只更新内容，不弹窗；运行中新收到的 open_chart 由总窗口统一处理，关闭后的实时更新不重新弹出。排列、布局和窗口操作不新增模型输出或 wire 协议字段，也不改变图表校验与证据规则。具体自动弹出与关闭边界以上述管理说明为准。
|
||||
|
||||
其余组件使用 `answer-motion.tsx` 统一交互过渡，沿用现有实体面板、字体、语义颜色和圆角。首次加载即时显示；鼠标展开、收起使用 180ms 透明度和位移，键盘与减少动态效果模式即时完成。折叠中的内容立即设为 `inert` 并退出无障碍树，动画结束后隐藏；保留原 React 内容实例，反向操作中断旧动画，避免旧退出回调隐藏重新展开的表单。
|
||||
|
||||
@@ -87,7 +95,7 @@ Agent 选择组件、内容顺序与受控语义，前端负责实际视觉、
|
||||
| `Stack`、`Section` | 保留既有布局，不为静态分区附加动画 |
|
||||
| `Text`、`Result` | 静态说明和已有结果直接阅读，不反复播放入场或宣告历史状态 |
|
||||
| `Metric` | 直接展示原始数值、单位与来源 |
|
||||
| `Table` | 搜索排序即时响应；无勾选列、选行提示或操作栏 |
|
||||
| `Table` | 搜索排序即时响应；表头悬停与排序点击覆盖整列宽度；仅当前排序列显示升序或降序箭头，未排序时不显示；无勾选列、选行提示或操作栏 |
|
||||
| `Evidence` | 正文展开收起和箭头转动使用统一过渡；保留来源、记录时间与资料编号 |
|
||||
| `MapLocation` | 关联要素详情使用统一折叠；定位中的反馈及结果短时淡入 |
|
||||
| `FollowUpForm` | 精简与外层重复的补充提示；保留标题、说明、校验及草稿，提交反馈短时淡入 |
|
||||
|
||||
@@ -20,13 +20,31 @@ Dev 分为“调查测试”“通知测试”和“地图调试”三个页签
|
||||
|
||||
Dev 与工况详情共用右侧工具位置，切换调查时先关闭 Dev 回到任务列表，再打开 Dev 检查新的选择。实时展示面板位于地图左下方，打开 Dev 后仍可看见。新图表进入其滚动区时会滚动到图表，保留标题；手动收起面板后仍接收指令，展开再查看。切换项目、调查或执行代次会清理临时效果并取消未完成的本地预览。上述清理保留本次页面会话内的动作快照，只有切换项目会同时清空历史。已绑定调查时关闭跟随也会清理该调查的当前临时展示；未选择调查的本地预览不受跟随开关影响。面板外仍可操作地图，手动拖拽或滚轮暂停镜头自动跟随。
|
||||
|
||||
调查与本地预览在展示分析图表时自动打开可拖动、缩放和最大化的独立窗口，覆盖 `open_chart` 指令和结构化界面中的 `Chart`。自动打开不抢走键盘焦点；关闭窗口仅收起放大视图，卡片中的图表和放大入口继续保留。同一图表内容未变化时，其他地图动作不会使已关闭的窗口再次弹出；图表内容更新或进入、退出历史回看时可再次自动打开。回放窗口随所选快照更新，保留已有窗口的位置和尺寸，期间收到的实时数据不替换历史图表。关闭图表指令或切换任务时移除对应窗口；普通对话图表仍由用户手动放大。
|
||||
## 图表和窗口管理
|
||||
|
||||
调查、本地预览与对话展示面板提供“图表窗口”入口，在一个可拖动、缩放、最大化的总窗口中集中查看所有子图表，包括 open_chart 形成的对象图组与报告中的 Chart。每张子图表保留自身的独立弹窗放大入口，可同时打开多个放大窗口；关闭总窗口收起其内部开启的放大窗口，关闭子窗口只收起该放大视图。普通趋势总览、柱状图和报告 Chart 保持各自的图表语义。
|
||||
|
||||
总窗口使用固定槽位布局，提供“单图布局”“左右布局”“四宫格布局”，每行分别显示 1、2、2 个固定位置，单图与左右布局每行约占一个可视区高度，四宫格每个可视区约显示两行。全部图表沿纵向连续排列，通过滚动查看；图表随槽位尺寸适配，末行按列数补齐空槽。窄窗口使用单图布局，调宽后恢复先前选择的布局。头部定位、布局和重置控件置于同一条浅底工具栏，控件保持等高，窄窗口允许自然换行。“快速定位图表”列出全部图表，选择后滚动到对应位置并聚焦目标；目标的位置栏短暂显示淡色背景和“已定位”，不使用整卡外框，避免高亮被滚动区域裁切。
|
||||
|
||||
槽内图表使用紧凑控件，绘图区下方的图例独立滚动，筛选、详情与依据通过入口展开。多对象图在宽槽右侧显示对象按钮，窄槽使用对象选择器；独立放大后使用完整控件。
|
||||
|
||||
整条图表位置栏均为拖拽手柄，悬停反馈覆盖整栏；在目标位置释放后交换两处内容，拖到空槽则移动到空槽，其他位置不推移。悬停时整张卡片显示轻量浅色高亮，拖动源与目标位置保留整卡浅色提示；位置栏使用柔和浅底和深色文字，不使用深色横幅。图表保持原有清晰度，目标位置使用细线提示，轻量标题预览沿用中性边框。原图表留在原位，不克隆或随指针重绘。不再提供“移动到”下拉菜单，下方图表通过纵向滚动和快速定位查看。
|
||||
|
||||
槽位映射依据稳定的子图表标识：同一图表实时更新时保留位置，删除图表后保留中间空槽并移除末尾空行，新图优先填补空槽，再追加位置与行。同一次任务查看期间，关闭并重新打开总窗口保留槽位与布局；任务、项目或执行代次切换后重新建立当前内容。交换位置不改变图表数据、对象选择或服务端的展示事件顺序。
|
||||
|
||||
工作台顶部的窗口列表入口列出已打开的总图表窗口、独立子图表和表格窗口，选择条目可将对应窗口置顶并定位到标题栏。列表中的“关闭全部窗口”统一收起当前打开的窗口，不删除已加载的图表、表格或任务结果；图表窗口可从原展示入口重新打开。
|
||||
|
||||
总窗口与子图表使用同一缩放交互：指针拖动窗口边缘时，图表按窗口实际尺寸适配，保持已有图表实例与筛选、序列显隐和对象选择；松开后确认最终尺寸。拖动期间按 Escape 或发生 pointercancel 时取消调整、恢复原尺寸；标题栏的 Shift 加方向键继续用于逐步调整大小。
|
||||
|
||||
只有正在跟随的运行中调查新收到 open_chart 时，才自动弹出一次总窗口，不自动弹出各子图表，不抢走键盘焦点；后续指令按 chart_id 更新其中的数据。打开、切换、刷新任务、SSE 重连补载、历史回看和回到当前都只恢复内容，已完成任务也不弹窗。用户关闭总窗口后，本次任务查看期间的后续更新不使其再次弹出；手动收起展示面板期间的新指令也不请求弹窗。总窗口已经打开时，历史回看只更新其中的快照，实时数据不覆盖正在查看的历史。切换任务、项目或执行代次关闭原窗口并重新静默载入，返回之前看过的任务也不重放自动弹出意图。Chat 与本地 Dev 预览使用手动入口。
|
||||
|
||||
open_chart 仍只提交 chart_id/chart/evidence_refs，close_chart 仍按 chart_id 移除对象；不新增 display 或 objects 字段。排列、布局与窗口打开意图仅存在当前浏览器中，不进入保存的展示快照或事件。displayed 回执表示展示内容已加载，不保证弹出了独立窗口。
|
||||
|
||||
## 本地测试步骤
|
||||
|
||||
1. 在默认展开的“调查测试”页签准备数据。“载入合成样例”在当前地图中心生成合成空间展示、压力曲线、候选表格和一条候选数据；所选调查进度存在地图目标时，另加入该目标的高亮测试。所有合成结果均有明确标记。
|
||||
2. 可选：点击“校验 JSONL”单独查看识别出的展示指令、界面块、调查数据数量。也可直接执行本地预览，执行入口会自动校验当前全部内容。
|
||||
3. 点击“执行本地预览”，自动校验通过后对照地图和左下展示面板中的图表、结构化界面与数据摘要；Dev 的“原始数据检查”可点击对象查看原始行内容。动作记录区分“实时指令”和“本地测试”，显示应用或失败结果。
|
||||
3. 点击“执行本地预览”，自动校验通过后对照地图和左下展示面板中的图表、结构化界面与数据摘要；手动打开“图表窗口”，核对单图、左右、四宫格的固定槽位、拖放交换、末行空槽与纵向滚动，再检查快速定位和子图表独立放大，并从顶部窗口列表切换已打开的窗口。Dev 的“原始数据检查”可点击对象查看原始行内容。动作记录区分“实时指令”和“本地测试”，显示应用或失败结果。
|
||||
4. 按需“下载测试 JSONL”保存当前已校验输入；“清除临时展示”清除当前浏览器的高亮、图表和覆盖层。测试不改变服务端事件游标，不发起调查、审批、工单或设备写入。
|
||||
|
||||
样例与导出仅存在当前页面或用户下载的文件中，不写 Agent 工作区，不伪造已保存证据。Dev 不会自动枚举 Agent 生成的本地文件；要检查已有 JSONL，可将通过受控入口取得的文件内容粘贴到编辑区。当前最多 200 KB、40 行、8 个界面块；地图与图表继续遵守原展示协议的数量、几何及序列约束。
|
||||
@@ -37,8 +55,10 @@ Dev 与工况详情共用右侧工具位置，切换调查时先关闭 Dev 回
|
||||
|
||||
| 案例 | 核对内容 |
|
||||
| --- | --- |
|
||||
| 组合联动 | 地图点、调查现有目标高亮、压力曲线、候选表格与数据 |
|
||||
| 地图定位与高亮 | 有目标时高亮真实关联目标；无目标时只显示合成点，不虚构资产查询编号 |
|
||||
| 组合联动 | 合成空间点、压力曲线、候选表格与数据；定位和高亮在地图调试页签操作 |
|
||||
| 复杂调查：多图多表联动 | 8 个压力点、4 个管段的同期复合图聚合为 2 个子图表，另有方案柱状图、2 个表格与合成覆盖面 |
|
||||
| 复杂图表：多测点与长时序 | 每个对象包含 96 个时刻、1 条当前曲线和 7 组稀疏历史散点；右侧切换对象，下方显隐序列 |
|
||||
| 复杂表格：宽表、长文本与边界数据 | 50 行 8 列宽表、空结果、零值、负数、重复值及缺口 |
|
||||
| 压力趋势对比 | 两条合成压力曲线、时间轴、单位与图例 |
|
||||
| 影响用户统计 | 合成用户数柱状图，不作为真实停水统计 |
|
||||
| 合成影响范围 | 当前地图中心附近的合成 Polygon |
|
||||
@@ -49,6 +69,7 @@ Dev 与工况详情共用右侧工具位置，切换调查时先关闭 Dev 回
|
||||
| 错误：JSON 语法 | 第二行语法错误时整批拒绝，不执行第一行合法动作 |
|
||||
| 错误：不支持的动作 | 拒绝协议未支持的动作 |
|
||||
| 错误：图表数据不齐 | 拒绝时间轴和序列长度不一致的图表 |
|
||||
| 错误：同期时刻错位 | 拒绝历史时间与横轴槽位不一致的复合图，整批不执行 |
|
||||
|
||||
切换前若执行过本地预览，会先清除它的当前临时地图、图表和业务结果，保留动作历史供回看；仅选择或编辑 JSONL 不执行新指令。有内容时即可点击“执行本地预览”，无需先点单独校验；每次执行都会重新校验当前全部输入。任何一行错误都会拦截整批，显示具体错误，不执行部分指令；地图尚未就绪时也显示原因。仅空输入或正在执行时禁用按钮，不以调查选择或实时跟随作为本地执行前提。测试不会写入 Server、重启调查或发送 Agent 对话。案例定义位于 [investigation-dev-cases.ts](../src/features/workbench/utils/investigation-dev-cases.ts)。
|
||||
|
||||
@@ -62,7 +83,7 @@ Dev 与工况详情共用右侧工具位置，切换调查时先关闭 Dev 回
|
||||
{"record_type":"candidate","origin":"synthetic","source_evidence_refs":[],"element_id":"DEMO-PIPE-01","status":"example_only"}
|
||||
```
|
||||
|
||||
仓库内的可复制数据示例为 [unified-presentation.jsonl](../tests/fixtures/unified-presentation.jsonl)，覆盖十种 command、一个 `phase: final` 界面块和带来源的普通数据行；`P1` 是浏览器测试夹具中的测点，业务项目应使用已核实的实际编号。内置案例从同一个记录生成器输出，并在生成时通过当前校验器。错误案例单独保留，专门验证拒绝行为。
|
||||
仓库内的可复制数据示例为 [unified-presentation.jsonl](../tests/fixtures/unified-presentation.jsonl)，覆盖十种 command、两个可聚合的对象复合图、一个 `phase: final` 界面块和带来源的普通数据行；`P1` 是浏览器测试夹具中的测点，业务项目应使用已核实的实际编号。内置案例从同一个记录生成器输出，并在生成时通过当前校验器。错误案例单独保留，专门验证拒绝行为。
|
||||
|
||||
每行必须显式使用 `record_type: presentation`、`record_type: ui_block`，或带来源的调查数据类型。裸 command、裸 `answer-ui@1` block 和旧 chat 的 name/params 格式均拒绝。展示指令统一接受 `locate_features/zoom_to_map/highlight_features/clear_highlights/open_chart/close_chart/set_overlay/clear_overlay/render_scada_analysis/clear_scada_analysis`，不能加入项目、运行身份、URL、脚本或任意命令。Dev 的覆盖层样例直接提供合成几何，仅用于本地渲染测试；任务 Agent 的 `set_overlay` 可只传证据编号，由 Server 提取几何；传入 data 时必须与保存的证据快照一致。Chat 和 Dev 执行已提供并校验的 data。不能把 Dev 格式当成 Server 写入接口。
|
||||
|
||||
@@ -75,15 +96,16 @@ Dev 与工况详情共用右侧工具位置，切换调查时先关闭 Dev 回
|
||||
```bash
|
||||
pnpm exec vitest run src/features/workbench/utils/investigation-dev-preview.test.ts src/features/workbench/components/map-dev-panel.test.tsx src/features/workbench/hooks/investigation-presentation-follower.test.ts
|
||||
PLAYWRIGHT_PORT=5194 pnpm exec playwright test tests/browser/investigation-dev-tools.e2e.ts tests/browser/floating-panel-pointer.e2e.ts --workers=1 --reporter=line
|
||||
PLAYWRIGHT_PORT=5195 pnpm exec playwright test tests/browser/investigation-chart-manager.e2e.ts tests/browser/investigation-chart-groups.e2e.ts tests/browser/investigation-chart-layout.e2e.ts tests/browser/investigation-chart-resize.e2e.ts --workers=1 --reporter=line
|
||||
```
|
||||
|
||||
浏览器用隔离 API/SSE fixture 验证所选任务到真实 MapLibre/React 展示的消费链、Dev 开启与收起、JSONL 校验和下载、任务切换清理、紧凑窗口及面板外地图输入；不调用付费模型或真实工单、设备接口。真实 Agent 是否发布了正确的事件、报告或 JSONL 文件，仍需按实际项目运行记录核对。
|
||||
浏览器用隔离 API/SSE fixture 验证所选任务到真实 MapLibre/React 展示的消费链、Dev 开启与收起、JSONL 校验和下载、任务静默恢复、任务切换清理、子图表管理、紧凑窗口、实际尺寸适配及面板外地图输入；不调用付费模型或真实工单、设备接口。真实 Agent 是否发布了正确的事件、报告或 JSONL 文件，仍需按实际项目运行记录核对。
|
||||
|
||||
## 统一展示动作
|
||||
|
||||
Chat 使用 `present_view({command, reason})`，在线通过 SSE 的 `tjwater.frontend_action` 承载 `frontend-action@2`，动作字段为 command，不再接收 name/params。浏览器回传 `frontend-action-result@2`。任务事件和 Dev JSONL 的 command 使用相同结构，并进入同一执行器。Chat、调查和 Dev 预览分别拥有地图源、SCADA 图层及图表状态；清理、切换会话和切换任务不会误清其他入口。Chat 动作按接收顺序执行，切换会话取消正在执行及排队动作；过期动作不会执行。任务仍只记录发布状态，不等待浏览器。查看历史回答不会重放动作。
|
||||
|
||||
动作 schema 的维护源是 `src/features/agent/presentation/command-schema.ts`。修改后在前端仓库运行 `node scripts/export-view-command-contract.mjs`，同步 Agent 主机/原生工具共用的 TypeScript schema 和 Agent/Server JSON Schema；运行同一命令加 `--check` 检查一致性。Server 任务入口继续执行证据归属和快照校验。
|
||||
动作 schema 的维护源是 `src/features/agent/presentation/command-schema.ts`。修改后在前端仓库运行 `node scripts/export-view-command-contract.mjs`，同步 Agent 主机/原生工具共用的 TypeScript schema、Agent/Server JSON Schema，以及两端 tests/fixtures 下的统一 JSONL 示例与图表正反例；运行同一命令加 `--check` 检查内容一致性。JSON Schema 表达字段和数量约束，跨字段的时间语义由运行时校验和共享测试矩阵保证。Server 任务入口继续执行证据归属和快照校验。
|
||||
|
||||
## 已有案例与示例迁移
|
||||
|
||||
@@ -97,7 +119,20 @@ Chat 使用 `present_view({command, reason})`，在线通过 SSE 的 `tjwater.fr
|
||||
| 调查数据 | 保留 `record_type/origin/source_evidence_refs`，不把内嵌 action 提升为指令 |
|
||||
| Chat 调用 | `present_view({command, reason})`，不再调用旧的独立展示工具 |
|
||||
|
||||
本轮迁移只覆盖仓库内的内置案例、夹具和文档示例，未修改历史会话、数据库或外部下载文件。没有增加运行时旧格式转换。
|
||||
迁移覆盖内置复杂案例、可复制 JSONL、跨端校验夹具及文档，不修改历史会话、数据库或外部下载文件。旧的已保存图表仍按结构校验读取；新输入与发布按下述规则校验。
|
||||
|
||||
|
||||
## 对象复合图与验证规则
|
||||
|
||||
协议继续使用 `open_chart`，每个对象有独立稳定的 `chart_id`；不增加 `objects` 字段。多对象同期对比使用 `chart_type: time_comparison`。标题写为 `<对象ID> <同组标题>`，每条序列名以同一 `<对象ID> ` 开头，建议后接 `当前 YYYY-MM-DD` 或历史日期。对象 ID 以字母或数字开头，仅使用字母、数字、下划线、点或短横线。图例显示在绘图区下方；宽槽右侧的对象按钮单选切换数据集，窄槽使用对象选择器；独立放大的窄窗口把对象按钮移到下方。
|
||||
|
||||
仅 `open_chart` 中带历史 scatter 的明确对象图自动聚合。同组标题、chart_type、横纵轴名称、横轴槽位及当前序列名称去掉对象前缀后的部分、当前 sample_times 必须完全一致；不同单位或窗口分开。普通 line/bar 图和结构化回答中的独立 Chart 保持各自图表，统一在总窗口管理。关闭子窗口只收起放大视图，关闭聚合卡片移除组内所有对象；按原 chart_id 的 close_chart 仅移除该对象。
|
||||
|
||||
历史读取还兼容已保存的 `测点 <对象ID> <同组标题>`、`压力测点 <对象ID> <描述>` 和 `流量测点 <对象ID> <描述>` 标题；后两种以指标名称连接描述作为同组标题，压力和流量分开。对象归属仍要求序列名带同一对象前缀。历史 scatter 仅写 `MM-DD` 的旧图，只有在标题与唯一当前 line 明确指向同一对象，且每条日期序列至少有一个有效采样时间、有效值与时间一一对应、时间换算为 UTC+8 后均为同一完整日期并与日期名相符时，才兼容日期型历史图例；缺失时间、日期不符、跨对象序列或歧义标题保持单图。这些兼容只影响显示聚合，保留原指令、标题、序列、采样时间和证据，不修改保存的数据，也不放宽新发布的同期规则。
|
||||
|
||||
当前与历史共用 UTC+8 的 HH:mm 或 HH:mm:ss 槽位，时刻精度一致，窗口按顺序且短于一天，允许跨午夜。每对象最多 100 个槽位、8 组序列，包含当前 line 和历史 scatter，不能混入 bar。每组 sample_times 与 data 等长，有效值保留带时区的真实采样时间；缺测值和时间均为 null，零值保留。采样时间换算为 UTC+8 后须落在对应槽位；当前曲线共享同一窗口，每组历史来自此前某个对应日期，不能混入当天、未来或不同日期。普通 line/bar 不套用这些同期语义，但不能用 line 冒充 line 与历史 scatter 复合图。
|
||||
|
||||
Dev 的 presentation 与 ui_block.Chart、新的 Chat open_chart（Agent 主机与原生工具）及任务图表发布使用相同的同期规则。历史读取的结构校验不追溯拒绝旧混合图。Server 在任务展示和报告发布时另外校验证据归属与同期语义，错误码为 TIME_COMPARISON_INVALID；本地预览不证明证据有效或业务发布成功。共享正反例的维护源为 [chart-publication-cases.json](../tests/fixtures/chart-publication-cases.json)，随导出脚本同步到 Agent 与 Server，并在各仓库独立运行测试。
|
||||
|
||||
|
||||
## 展示动作历史
|
||||
|
||||
@@ -194,6 +194,10 @@ Agent 与主工作区、地图与报告使用共享 `Resizable` 分栏；连续
|
||||
|
||||
每个业务区最多一个醒目的主操作。按钮覆盖默认、hover、按压、焦点、禁用和加载态；hover 仅用于支持 hover 的设备，加载时阻止重复提交并保留可读状态。地图与业务控件沿用共享按压反馈，Agent 控件保留本地 shadcn/ui 交互状态；具有专用资源交互的 `AgentPersona` 保留原版悬停，不额外缩放或变暗。
|
||||
|
||||
MapTool、地名搜索候选项、Header 普通菜单与窗口列表通过 `mapOptionInteractionVariants` 统一交互。普通项仅在支持 hover 的设备上切换为 `surface-reading` 底色、`surface-border` 边框与 `action-blue-hover` 标题及操作图标；键盘 `focus-visible`、菜单 `data-highlighted` 使用相同反馈并保留焦点提示。说明文字保持 muted，图层示意图保留业务颜色。整行、整张卡片响应，边框预留空间；行和卡片使用 12px 圆角，紧凑工具保持原有尺寸与圆角。颜色过渡为 150ms，减少动态效果时关闭，不增加缩放或位移。 标注工具切换选项时，图标继承按钮实时文字颜色；图标容器仅对底色做同周期过渡，避免按钮底色仍在渐变时图标先切白色。
|
||||
|
||||
选中项保留底色、文字和状态标识，悬停及键盘高亮仅加深边框；主操作使用蓝底白字并在高亮时加深，危险操作统一使用 `status-danger-soft/border/foreground`。禁用项不响应 hover 或按压；危险语义由业务显式声明，不按文案推断。`MAP_ACTION_ROW_INTERACTION_CLASS_NAME` 为普通菜单提供布局之外的默认底色、圆角与上述交互组合。此规则仅用于地图和工作台入口；Agent、调查展示等面板及共享 DropdownMenu 保留本地 shadcn/ui 主题，业务状态色继续独立表达。
|
||||
|
||||
地图与业务表单字段复用 `.form-field`，聚焦只改变原有 1px 边框；组合输入由外层承担焦点边界，无边框输入使用内描边。Agent 字段保留本地 shadcn/ui 输入组件的边框、焦点和错误样式。错误通过文字、`aria-invalid` 和关联说明表达，失败后保留输入。选中与焦点不改变控件尺寸，底图选择卡片使用主题边框和勾选标记，键盘焦点使用共享内描边。
|
||||
|
||||
弹层保留标题、关闭入口、焦点管理及触发控件的焦点返回。表单弹窗显式将初始焦点放在首要业务字段，选择框获焦不自动展开。Esc 从内到外处理，外层尊重已消费事件；弹窗容器可承接程序焦点，业务控件仍保留可见焦点。模态遮罩阻断底层地图操作。
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ai-sdk/react": "^4.0.9",
|
||||
"@dnd-kit/collision": "0.5.3",
|
||||
"@dnd-kit/react": "0.5.3",
|
||||
"@fontsource-variable/noto-sans-sc": "5.3.0",
|
||||
"@json-render/core": "^0.21.0",
|
||||
"@json-render/react": "^0.21.0",
|
||||
|
||||
Generated
+71
@@ -15,6 +15,12 @@ importers:
|
||||
'@ai-sdk/react':
|
||||
specifier: ^4.0.9
|
||||
version: 4.0.34(react@19.2.7)(zod@3.25.76)
|
||||
'@dnd-kit/collision':
|
||||
specifier: 0.5.3
|
||||
version: 0.5.3
|
||||
'@dnd-kit/react':
|
||||
specifier: 0.5.3
|
||||
version: 0.5.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
|
||||
'@fontsource-variable/noto-sans-sc':
|
||||
specifier: 5.3.0
|
||||
version: 5.3.0
|
||||
@@ -470,6 +476,27 @@ packages:
|
||||
resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@dnd-kit/abstract@0.5.3':
|
||||
resolution: {integrity: sha512-KZQ2vftkO9BHupVzlUqB5d7JETL7ITlvslx3hrj4aObwjliAzuzV/n5wCpQllNd0Hxvg7FaQtLekJ8dplqKwbA==}
|
||||
|
||||
'@dnd-kit/collision@0.5.3':
|
||||
resolution: {integrity: sha512-DBo8czkI72xnsHRWOMTn/GAyYgSWy9bmde85mrZ7ShqLhcbIbcu4PVJ3ZU9MBikePCSAVOoUTZE2gS40jogrEw==}
|
||||
|
||||
'@dnd-kit/dom@0.5.3':
|
||||
resolution: {integrity: sha512-JJe+Qu/JmofGzHes3np91sQYwp5spvLcknjRkq+VO59JTqSnQNPXlhHXavRXTwQFabaaRyRzXyH/faAvubCNGw==}
|
||||
|
||||
'@dnd-kit/geometry@0.5.3':
|
||||
resolution: {integrity: sha512-U+zscNjoHfJ1xUV+XDGF89jPCoILLivWSb/U9mfM7h83f6o3X9AS9uIwG46bXUpCqPvlI/9JcOlyga5uvfyjgw==}
|
||||
|
||||
'@dnd-kit/react@0.5.3':
|
||||
resolution: {integrity: sha512-BGn6bakgcRSoKMRQP8cRIGu59e5lGC3/sL0zVWmDMo/9CMPSxgjCcQltDn5TDTwAARnEbuwNEksor4rLtH/yEg==}
|
||||
peerDependencies:
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
|
||||
'@dnd-kit/state@0.5.3':
|
||||
resolution: {integrity: sha512-NJTQkBglAT/SXLc+IOLiKwNvsTrWmPG5AO+7Gn0F0n8XyVaf4VCbTCuPuU48sDBfcpg23O0tfGkfZNiZbYTvMw==}
|
||||
|
||||
'@esbuild/aix-ppc64@0.28.1':
|
||||
resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
|
||||
engines: {node: '>=18'}
|
||||
@@ -825,6 +852,9 @@ packages:
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
'@preact/signals-core@1.14.5':
|
||||
resolution: {integrity: sha512-vcRv7Ityz5JVmeiVqIluLFzT/PDS/AlhHUpw3/aUWqcVUs6bDGIPXE/6RSC4evBNWYvnniozg5Syfj33al3gkg==}
|
||||
|
||||
'@radix-ui/number@1.1.2':
|
||||
resolution: {integrity: sha512-ceTwaxc4I5IOi97DgCotl3pqiyRGvffcc0oOsE2dQYaJOFIDsDt4VWG6xEbg1QePv9QWausCEIppud/tJ1wNig==}
|
||||
|
||||
@@ -4567,6 +4597,45 @@ snapshots:
|
||||
|
||||
'@csstools/css-tokenizer@3.0.4': {}
|
||||
|
||||
'@dnd-kit/abstract@0.5.3':
|
||||
dependencies:
|
||||
'@dnd-kit/geometry': 0.5.3
|
||||
'@dnd-kit/state': 0.5.3
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/collision@0.5.3':
|
||||
dependencies:
|
||||
'@dnd-kit/abstract': 0.5.3
|
||||
'@dnd-kit/geometry': 0.5.3
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/dom@0.5.3':
|
||||
dependencies:
|
||||
'@dnd-kit/abstract': 0.5.3
|
||||
'@dnd-kit/collision': 0.5.3
|
||||
'@dnd-kit/geometry': 0.5.3
|
||||
'@dnd-kit/state': 0.5.3
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/geometry@0.5.3':
|
||||
dependencies:
|
||||
'@dnd-kit/state': 0.5.3
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/react@0.5.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
|
||||
dependencies:
|
||||
'@dnd-kit/abstract': 0.5.3
|
||||
'@dnd-kit/dom': 0.5.3
|
||||
'@dnd-kit/state': 0.5.3
|
||||
react: 19.2.7
|
||||
react-dom: 19.2.7(react@19.2.7)
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/state@0.5.3':
|
||||
dependencies:
|
||||
'@preact/signals-core': 1.14.5
|
||||
tslib: 2.8.1
|
||||
|
||||
'@esbuild/aix-ppc64@0.28.1':
|
||||
optional: true
|
||||
|
||||
@@ -4860,6 +4929,8 @@ snapshots:
|
||||
dependencies:
|
||||
playwright: 1.61.1
|
||||
|
||||
'@preact/signals-core@1.14.5': {}
|
||||
|
||||
'@radix-ui/number@1.1.2': {}
|
||||
|
||||
'@radix-ui/primitive@1.1.6': {}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import process from "node:process";
|
||||
import { readFile, writeFile } from "node:fs/promises";
|
||||
import { mkdir, readFile, writeFile } from "node:fs/promises";
|
||||
import { dirname } from "node:path";
|
||||
import { fileURLToPath, URL } from "node:url";
|
||||
import { zodToJsonSchema } from "zod-to-json-schema";
|
||||
import { viewCommandSchema } from "../src/features/agent/presentation/command-schema.ts";
|
||||
@@ -22,11 +23,18 @@ const targets = [
|
||||
],
|
||||
[new URL("../../next-tjwater-server/contracts/view-command.schema.json", import.meta.url), schema]
|
||||
];
|
||||
// The same executable examples and rejection matrix travel with each independent repository.
|
||||
for (const name of ["unified-presentation.jsonl", "chart-publication-cases.json"]) {
|
||||
const fixture = await readFile(new URL(`../tests/fixtures/${name}`, import.meta.url), "utf8");
|
||||
for (const repository of ["next-tjwater-agent", "next-tjwater-server"])
|
||||
targets.push([new URL(`../../${repository}/tests/fixtures/${name}`, import.meta.url), fixture]);
|
||||
}
|
||||
for (const [url, content] of targets) {
|
||||
if (process.argv.includes("--check")) {
|
||||
if ((await readFile(url, "utf8")) !== content)
|
||||
throw new Error(`View command contract differs: ${fileURLToPath(url)}`);
|
||||
} else {
|
||||
await mkdir(dirname(fileURLToPath(url)), { recursive: true });
|
||||
await writeFile(url, content);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ export type AnswerUiMapTarget = {
|
||||
};
|
||||
export type AnswerUiInteractions = {
|
||||
disabled: boolean;
|
||||
chartPresentation?: "tile";
|
||||
onLocate?: (target: AnswerUiMapTarget) => Promise<unknown> | void;
|
||||
onSubmit?: (text: string) => Promise<void> | void;
|
||||
evidenceFilter?: string;
|
||||
submitMode?: "send" | "draft";
|
||||
chartWindowKey?: string;
|
||||
};
|
||||
export const AnswerInteractionContext = createContext<AnswerUiInteractions>({ disabled: true });
|
||||
|
||||
@@ -189,6 +189,30 @@ describe("local interactive answer renderer", () => {
|
||||
expect(screen.getByRole("tab", { name: /^柱状$/ })).toHaveAttribute("aria-selected", "true");
|
||||
expect(screen.queryByRole("table")).not.toBeInTheDocument();
|
||||
});
|
||||
it("updates chart titles and readings after the same spec is changed in place", async () => {
|
||||
const user = userEvent.setup();
|
||||
const fixture = block("Chart", {
|
||||
title: "原始压力图", chart_type: "line", source: "监测数据",
|
||||
x_data: ["08:00", "09:00"], series: [{ name: "原始压力", data: [0.3, 0.2] }]
|
||||
});
|
||||
const { rerender } = render(<AnswerUiView block={fixture} />);
|
||||
await user.click(screen.getByRole("tab", { name: /^数据$/ }));
|
||||
expect(screen.getByRole("table")).toHaveTextContent("0.2");
|
||||
|
||||
const props = fixture.spec.elements.node.props;
|
||||
props.title = "更新压力图";
|
||||
const series = props.series as { name: string; data: number[] }[];
|
||||
series[0].name = "更新后压力";
|
||||
series[0].data[1] = 0.17;
|
||||
rerender(<AnswerUiView block={fixture} />);
|
||||
|
||||
expect(screen.getByRole("group", { name: "更新压力图" })).toBeVisible();
|
||||
expect(screen.queryByRole("group", { name: "原始压力图" })).not.toBeInTheDocument();
|
||||
await waitFor(() => expect(screen.getByRole("columnheader", { name: "更新后压力" })).toBeVisible());
|
||||
expect(screen.getByRole("table")).toHaveTextContent("0.17");
|
||||
expect(screen.getByRole("table")).not.toHaveTextContent("0.2");
|
||||
expect(screen.getByRole("tab", { name: /^数据$/ })).toHaveAttribute("aria-selected", "true");
|
||||
});
|
||||
it("runs map location only after a user click and reports missing IDs", async () => {
|
||||
const locate = vi
|
||||
.fn()
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { LocateButton, FollowUpForm } from "./answer-action-components";
|
||||
import { Renderer, defineRegistry } from "@json-render/react";
|
||||
import { useContext, useRef, useState, type ReactNode } from "react";
|
||||
import { useContext, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import {
|
||||
Info,
|
||||
TriangleAlert,
|
||||
@@ -103,17 +103,19 @@ const registry = withAnswerNodeIdentity(baseRegistry);
|
||||
|
||||
type AnswerUiViewProps = { block: AnswerUiBlock; viewState?: AnswerViewState; onViewStateChange?: AnswerViewStateChange } & Partial<AnswerUiInteractions>;
|
||||
export function AnswerUiView({ viewState, onViewStateChange, ...props }: AnswerUiViewProps) {
|
||||
const serializedSpec = JSON.stringify(props.block.spec);
|
||||
const displayedSpec = useMemo(() => withAnswerNodeIds(withAnswerDisplayTimes(JSON.parse(serializedSpec) as AnswerUiBlock["spec"])), [serializedSpec]);
|
||||
return <AnswerViewStateProvider key={props.block.block_id} spec={props.block.spec} registry={registry} viewState={viewState} onViewStateChange={onViewStateChange}>
|
||||
<AnswerUiBody {...props} block={{ ...props.block, spec: withAnswerNodeIds(withAnswerDisplayTimes(props.block.spec)) }} />
|
||||
<AnswerUiBody {...props} block={{ ...props.block, spec: displayedSpec }} />
|
||||
</AnswerViewStateProvider>;
|
||||
}
|
||||
|
||||
function AnswerUiBody({
|
||||
block,
|
||||
disabled = false,
|
||||
chartPresentation,
|
||||
onLocate,
|
||||
onSubmit,
|
||||
chartWindowKey,
|
||||
submitMode = "send"
|
||||
}: { block: AnswerUiBlock } & Partial<AnswerUiInteractions>) {
|
||||
const [{ evidenceFilter: filter }, setFilter] = useAnswerBlockState();
|
||||
@@ -132,10 +134,10 @@ function AnswerUiBody({
|
||||
const isGroup = (ids: string[]) => hasTaskLayout && ids.length > 1 && !ids.every((id) => block.spec.elements[id].type === "Section");
|
||||
const renderNodes = (ids: string[]) => ids.map((id) => <Renderer key={id} spec={{ ...block.spec, root: id }} registry={registry} />);
|
||||
return (
|
||||
<InteractionContext.Provider value={{ disabled, onLocate, onSubmit, submitMode, evidenceFilter: filter, chartWindowKey }}>
|
||||
<AnswerMotionScope className="answer-ui-root" data-answer-ui={block.block_id} data-answer-phase={block.phase} data-answer-intent={intent} data-answer-density={density}>
|
||||
<AnswerContentNav block={block} contentRef={contentRef} />
|
||||
<div ref={contentRef}>
|
||||
<InteractionContext.Provider value={{ disabled, onLocate, onSubmit, submitMode, evidenceFilter: filter, chartPresentation }}>
|
||||
<AnswerMotionScope className={chartPresentation === "tile" ? "answer-ui-root flex h-full min-h-0 flex-col" : "answer-ui-root"} data-answer-ui={block.block_id} data-answer-phase={block.phase} data-answer-intent={intent} data-answer-density={density}>
|
||||
{chartPresentation !== "tile" ? <AnswerContentNav block={block} contentRef={contentRef} /> : null}
|
||||
<div ref={contentRef} className={chartPresentation === "tile" ? "flex h-full min-h-0 flex-1 flex-col" : undefined}>
|
||||
<>
|
||||
{taskLayout ? <div className={hasTaskLayout ? "answer-task-layout" : "answer-task-layout-simple"} data-answer-task-layout={hasTaskLayout || undefined}>
|
||||
{taskLayout.overview.length ? <div className="answer-task-overview grid gap-3" aria-label="回答概览">{renderNodes(taskLayout.overview)}</div> : null}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { chartPointTooltip, chartSampleTime, chartValueBounds, chartValueLabel } from "./chart-presentation";
|
||||
import { chartPointTooltip, chartSampleTime, chartUsesIntegerTicks, chartValueBounds, chartValueLabel } from "./chart-presentation";
|
||||
|
||||
describe("monitoring chart comparison", () => {
|
||||
it("displays UTC samples in UTC8 and keeps explicit UTC8 instants stable across midnight", () => {
|
||||
@@ -17,6 +17,39 @@ describe("monitoring chart comparison", () => {
|
||||
expect(chartValueBounds([{ name: "零流量", data: [0, 0] }], 0, 1)).toEqual({ min: -0.08, max: 0.08 });
|
||||
});
|
||||
|
||||
it("uses aligned integer boundaries and steps without rounding monitoring readings", () => {
|
||||
const series = [{ name: "流量", data: [2494.274, 4742.033] }];
|
||||
const original = structuredClone(series);
|
||||
expect(chartValueBounds(series, 0, 1, true)).toEqual({ min: 2000, max: 5000, interval: 1000 });
|
||||
expect(series).toEqual(original);
|
||||
});
|
||||
|
||||
it("keeps a narrow pressure range near its readings instead of forcing a broad zero-based axis", () => {
|
||||
expect(chartValueBounds([{ name: "压力", data: [28.125, 28.875] }], 0, 1, true))
|
||||
.toEqual({ min: 28, max: 29, interval: 1 });
|
||||
expect(chartValueBounds([{ name: "压力", data: [9999, 28.14, 29.03, -9999] }], 1, 2, true))
|
||||
.toEqual({ min: 28, max: 30, interval: 1 });
|
||||
});
|
||||
|
||||
it("preserves negative flow and provides distinct integer ticks for zero flow", () => {
|
||||
expect(chartValueBounds([{ name: "反向流量", data: [-108.8, 12.125] }], 0, 1, true))
|
||||
.toEqual({ min: -150, max: 50, interval: 50 });
|
||||
expect(chartValueBounds([{ name: "零流量", data: [0, 0] }], 0, 1, true))
|
||||
.toEqual({ min: -1, max: 1, interval: 1 });
|
||||
});
|
||||
|
||||
it("limits integer ticks to confirmed monitoring names and units while preserving generic small ranges", () => {
|
||||
for (const name of ["压力（m）", "压力 ( m )", "压力水头（m）", "水头(m)", "流量（m³/h）", "流量 ( m3 / h )", "管流（m³/h）"])
|
||||
expect(chartUsesIntegerTicks(name)).toBe(true);
|
||||
for (const name of [undefined, "压力（MPa）", "流量（L/s）", "比率", ""])
|
||||
expect(chartUsesIntegerTicks(name)).toBe(false);
|
||||
const series = [{ name: "压力（MPa）", data: [0.2131, 0.2149] }];
|
||||
const bounds = chartValueBounds(series, 0, 1, chartUsesIntegerTicks("压力（MPa）"));
|
||||
expect(bounds.min).toBeGreaterThan(0.21);
|
||||
expect(bounds.max).toBeLessThan(0.22);
|
||||
expect(bounds).not.toHaveProperty("interval");
|
||||
});
|
||||
|
||||
it("preserves the original historical date in tooltip and marks missing values explicitly", () => {
|
||||
const series = [{ name: "当前", data: [28], sample_times: ["2026-06-14T12:00:00+08:00"] },
|
||||
{ name: "前一日", type: "scatter" as const, data: [37], sample_times: ["2026-06-13T12:00:00+08:00"] },
|
||||
|
||||
@@ -9,13 +9,24 @@ export function chartSampleTime(time: string | null | undefined): string {
|
||||
return time ? formatDisplayTimestamp(time) : "";
|
||||
}
|
||||
|
||||
export function chartValueBounds(series: SafeChartSeries[], start: number, end: number) {
|
||||
/** Only confirmed monitoring units opt into integer ticks; small generic units retain their scale. */
|
||||
export function chartUsesIntegerTicks(axisName: string | undefined): boolean {
|
||||
const normalized = axisName?.replace(/\s+/g, "").replace(/（/g, "(").replace(/）/g, ")").replace(/³/g, "3").toLowerCase();
|
||||
return /^(?:(?:压力|压力水头|水头)\(m\)|(?:流量|管流)\(m3\/h\))$/.test(normalized ?? "");
|
||||
}
|
||||
|
||||
export function chartValueBounds(series: SafeChartSeries[], start: number, end: number, integerTicks = false) {
|
||||
const values = series.flatMap((item) => item.data.slice(start, end + 1))
|
||||
.filter((value): value is number => value !== null && Number.isFinite(value));
|
||||
if (!values.length) return {};
|
||||
const min = Math.min(...values), max = Math.max(...values);
|
||||
const padding = (max - min || Math.abs(min) * 0.1 || 1) * 0.08;
|
||||
return { min: min - padding, max: max + padding };
|
||||
const bounds = { min: min - padding, max: max + padding };
|
||||
if (!integerTicks) return bounds;
|
||||
const target = Math.max(1, (bounds.max - bounds.min) / 4);
|
||||
const magnitude = 10 ** Math.floor(Math.log10(target));
|
||||
const interval = ([1, 2, 5, 10].find((step) => step * magnitude >= target) ?? 10) * magnitude;
|
||||
return { min: Math.floor(bounds.min / interval) * interval, max: Math.ceil(bounds.max / interval) * interval, interval };
|
||||
}
|
||||
|
||||
/** The axis label is a projected comparison time; the sample timestamp remains authoritative. */
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { memo, useContext, useLayoutEffect, useRef, useState } from "react";
|
||||
import { memo, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
|
||||
import { motion, useAnimationControls, useReducedMotion } from "motion/react";
|
||||
import { BarChart3, X, Database, SlidersHorizontal, Table2, TrendingUp } from "lucide-react";
|
||||
import { BarChart3, X, Database, FileText, SlidersHorizontal, Table2, TrendingUp } from "lucide-react";
|
||||
import { FloatingWindow } from "@/shared/ui/floating-window";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/ui/tabs";
|
||||
@@ -11,8 +11,9 @@ import { InteractiveDataTable } from "./interactive-data-table";
|
||||
import { ResponsiveChart } from "./responsive-chart";
|
||||
import { agentEase } from "../components/agent-motion";
|
||||
import type { SafeChartSeries } from "../chart-data";
|
||||
import { chartPointTooltip, chartSampleTime, chartValueBounds, chartValueLabel } from "./chart-presentation";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||||
import { AnswerInteractionContext } from "./answer-ui-interaction-context";
|
||||
import { chartPointTooltip, chartSampleTime, chartUsesIntegerTicks, chartValueBounds, chartValueLabel } from "./chart-presentation";
|
||||
|
||||
export type AnswerChartProps = {
|
||||
title: string;
|
||||
@@ -35,7 +36,7 @@ function PointSelect({ label, value, labels, onChange }: {
|
||||
<SelectContent>{labels.map((text, index) => <SelectItem key={index} value={String(index)}>{text}</SelectItem>)}</SelectContent>
|
||||
</Select>;
|
||||
}
|
||||
type ChartPresentation = { expanded?: boolean; plotHeight?: number; embedded?: boolean; xAxisName?: string; yAxisName?: string };
|
||||
type ChartPresentation = { tile?: boolean; expanded?: boolean; plotHeight?: number; embedded?: boolean; xAxisName?: string; yAxisName?: string };
|
||||
const standaloneRegistry = {};
|
||||
|
||||
/** Legacy chart envelopes use the same controls and chart engine as structured answers. */
|
||||
@@ -47,7 +48,9 @@ export function StandaloneInteractiveChart(props: AnswerChartProps & ChartPresen
|
||||
}
|
||||
|
||||
export const InteractiveChart = memo(function InteractiveChartView(props: AnswerChartProps & ChartPresentation) {
|
||||
const { chartWindowKey } = useContext(AnswerInteractionContext);
|
||||
const { chartPresentation } = useContext(AnswerInteractionContext);
|
||||
const tile = props.tile ?? chartPresentation === "tile";
|
||||
const fitted = Boolean(props.expanded || tile);
|
||||
const [{ view, hidden, range, point, inspecting, table }, patch, migrationNotice] = useAnswerNodeState<AnswerChartState>("Chart", props);
|
||||
const reducedMotion = useReducedMotion();
|
||||
const pointer = useRef(false);
|
||||
@@ -56,13 +59,13 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
const [plotWidth, setPlotWidth] = useState(360);
|
||||
useLayoutEffect(() => {
|
||||
const element = plot.current;
|
||||
if (props.expanded || !element || typeof ResizeObserver === "undefined") return;
|
||||
if (fitted || !element || typeof ResizeObserver === "undefined") return;
|
||||
const resize = () => setPlotWidth(element.clientWidth);
|
||||
resize();
|
||||
const observer = new ResizeObserver(resize);
|
||||
observer.observe(element);
|
||||
return () => observer.disconnect();
|
||||
}, [view, props.expanded]);
|
||||
}, [view, fitted]);
|
||||
const contentMotion = useAnimationControls();
|
||||
const pendingTransition = useRef(false);
|
||||
useLayoutEffect(() => {
|
||||
@@ -75,7 +78,7 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
}, [contentMotion, view]);
|
||||
const setView = (next: string) => {
|
||||
if (next === view) return;
|
||||
const animate = pointer.current && !reducedMotion;
|
||||
const animate = pointer.current && !reducedMotion && !tile;
|
||||
setAnimateInteraction(animate);
|
||||
contentMotion.stop();
|
||||
contentMotion.set(animate ? { opacity: 0, y: 4 } : { opacity: 1, y: 0 });
|
||||
@@ -85,8 +88,11 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
const setRange = (range: [number, number]) => patch({ range, table: { query: "", sort: null, ...table, selection: [] } }, ["range"]);
|
||||
const setPoint = (point: number) => patch({ point });
|
||||
const setInspecting = (inspecting: boolean) => patch({ inspecting });
|
||||
const visible = props.series.filter((_, index) => !hidden.includes(index));
|
||||
const labels = props.x_data.slice(range[0], range[1] + 1);
|
||||
const hiddenKey = hidden.join(",");
|
||||
const hiddenSeries = useMemo(() => new Set(hiddenKey.split(",").filter(Boolean).map(Number)), [hiddenKey]);
|
||||
const visible = useMemo(() => props.series.filter((_, index) => !hiddenSeries.has(index)), [props.series, hiddenSeries]);
|
||||
const [rangeStart, rangeEnd] = range;
|
||||
const labels = useMemo(() => props.x_data.slice(rangeStart, rangeEnd + 1), [props.x_data, rangeStart, rangeEnd]);
|
||||
const pointIndex = Math.min(range[1], Math.max(range[0], point));
|
||||
const fullRange = range[0] === 0 && range[1] === props.x_data.length - 1;
|
||||
const summaries = visible.map((series) => {
|
||||
@@ -98,61 +104,63 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
const categoryColors = visible.length === 1;
|
||||
const horizontalBars = props.x_data.some((label) => label.length > 10);
|
||||
const numberLabel = chartValueLabel;
|
||||
const option = (type: "line" | "bar") => {
|
||||
const horizontal = type === "bar" && horizontalBars;
|
||||
const seriesType = (series: SafeChartSeries) => view === (props.chart_type === "bar" ? "bar" : "line") ? series.type ?? type : type;
|
||||
const includesBars = visible.some((series) => seriesType(series) === "bar");
|
||||
const categoryAxis = { type: "category", data: labels, boundaryGap: type === "bar",
|
||||
axisLabel: { fontSize: 11, color: "#64748b", hideOverlap: !horizontal, interval: horizontal ? 0 : "auto",
|
||||
...(horizontal ? { width: props.expanded ? 150 : Math.min(210, Math.max(96, plotWidth * 0.28)), overflow: "break", lineHeight: 16 } : {}) },
|
||||
axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: "#cbd5e1" } } };
|
||||
const valueAxis = { type: "value", scale: !includesBars,
|
||||
...(!includesBars ? chartValueBounds(visible, range[0], range[1]) : {}),
|
||||
axisLabel: { fontSize: 11, color: "#64748b", formatter: numberLabel },
|
||||
splitLine: { lineStyle: { color: "#e2e8f0" } } };
|
||||
return {
|
||||
animation: animateInteraction && !reducedMotion, animationDuration: 180, animationDurationUpdate: 180,
|
||||
textStyle: { fontFamily: '"Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif' },
|
||||
color: colors.filter((_, index) => !hidden.includes(index)), aria: { enabled: true },
|
||||
tooltip: { trigger: composite ? "item" : "axis", renderMode: composite ? "html" : "richText", confine: true,
|
||||
textStyle: { fontFamily: '"Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif', fontSize: 12 },
|
||||
...(composite ? { formatter: (params: unknown) => {
|
||||
const first = (Array.isArray(params) ? params[0] : params) as { dataIndex?: number; seriesIndex?: number } | undefined;
|
||||
const focused = composite && typeof first?.seriesIndex === "number" ? visible.slice(first.seriesIndex, first.seriesIndex + 1) : visible;
|
||||
const text = typeof first?.dataIndex === "number"
|
||||
? chartPointTooltip(labels[first.dataIndex], focused, range[0] + first.dataIndex) : "";
|
||||
// ECharts richText tooltips omit the font family. Plain DOM text keeps CJK
|
||||
// readable and never interprets model-provided labels as HTML.
|
||||
const content = document.createElement("div");
|
||||
content.textContent = text;
|
||||
content.style.whiteSpace = "pre-line";
|
||||
return content;
|
||||
} } : {}), axisPointer: { type: type === "bar" ? "shadow" : "line" } },
|
||||
grid: { top: 28, right: 24, bottom: (props.xAxisName ?? props.x_axis_name) ? 48 : 28, left: 12, containLabel: true },
|
||||
xAxis: { ...(horizontal ? valueAxis : categoryAxis), name: horizontal ? props.yAxisName ?? props.y_axis_name : props.xAxisName ?? props.x_axis_name,
|
||||
nameLocation: "middle", nameGap: 30 },
|
||||
yAxis: horizontal ? { ...categoryAxis, inverse: true, name: props.xAxisName ?? props.x_axis_name } : { ...valueAxis, name: props.yAxisName ?? props.y_axis_name },
|
||||
series: visible.map((series) => ({ name: series.name, type: seriesType(series),
|
||||
data: series.data.slice(range[0], range[1] + 1).map((value, index) => type === "bar" && categoryColors
|
||||
? { value, itemStyle: { color: colors[(range[0] + index) % colors.length] } } : value),
|
||||
barMaxWidth: 32, barCategoryGap: "35%", connectNulls: false,
|
||||
showSymbol: labels.length <= 24, symbolSize: seriesType(series) === "scatter" ? 8 : 6, emphasis: { focus: "series" } }))
|
||||
const xAxisName = props.xAxisName ?? props.x_axis_name;
|
||||
const yAxisName = props.yAxisName ?? props.y_axis_name;
|
||||
// Keep tooltip functions and options stable across sizing, focus and table-only updates.
|
||||
const options = useMemo(() => {
|
||||
const option = (type: "line" | "bar") => {
|
||||
const horizontal = type === "bar" && horizontalBars;
|
||||
const horizontalAxisName = horizontal ? yAxisName : xAxisName;
|
||||
const verticalAxisName = horizontal ? xAxisName : yAxisName;
|
||||
const seriesType = (series: SafeChartSeries) => view === (props.chart_type === "bar" ? "bar" : "line") ? series.type ?? type : type;
|
||||
const includesBars = visible.some((series) => seriesType(series) === "bar");
|
||||
const categoryAxis = { type: "category", data: labels, boundaryGap: type === "bar",
|
||||
axisLabel: { fontSize: tile ? 10 : 11, color: "#64748b", hideOverlap: !horizontal, interval: horizontal ? 0 : "auto",
|
||||
...(tile ? { margin: 4, lineHeight: 12 } : {}),
|
||||
...(horizontal ? { width: fitted && !tile ? 150 : Math.min(210, Math.max(96, plotWidth * 0.28)), overflow: "break", lineHeight: tile ? 12 : 16 } : {}) },
|
||||
axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: "#cbd5e1" } } };
|
||||
const valueAxis = { type: "value", scale: !includesBars,
|
||||
...(!includesBars ? chartValueBounds(visible, rangeStart, rangeEnd, chartUsesIntegerTicks(yAxisName)) : {}),
|
||||
...(chartUsesIntegerTicks(yAxisName) ? { minInterval: 1 } : {}),
|
||||
axisLabel: { fontSize: tile ? 10 : 11, color: "#64748b", formatter: numberLabel,
|
||||
...(tile ? { margin: 4, lineHeight: 12 } : {}) },
|
||||
splitLine: { lineStyle: { color: "#e2e8f0" } } };
|
||||
return {
|
||||
animation: animateInteraction && !reducedMotion, animationDuration: 180, animationDurationUpdate: 180,
|
||||
textStyle: { fontFamily: '"Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif' },
|
||||
color: colors.filter((_, index) => !hiddenSeries.has(index)), aria: { enabled: true },
|
||||
tooltip: { trigger: composite ? "item" : "axis", renderMode: composite ? "html" : "richText", confine: true,
|
||||
textStyle: { fontFamily: '"Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif', fontSize: 12 },
|
||||
...(composite ? { formatter: (params: unknown) => {
|
||||
const first = (Array.isArray(params) ? params[0] : params) as { dataIndex?: number; seriesIndex?: number } | undefined;
|
||||
const focused = composite && typeof first?.seriesIndex === "number" ? visible.slice(first.seriesIndex, first.seriesIndex + 1) : visible;
|
||||
const text = typeof first?.dataIndex === "number"
|
||||
? chartPointTooltip(labels[first.dataIndex], focused, rangeStart + first.dataIndex) : "";
|
||||
// ECharts richText tooltips omit the font family. Plain DOM text keeps CJK
|
||||
// readable and never interprets model-provided labels as HTML.
|
||||
const content = document.createElement("div");
|
||||
content.textContent = text;
|
||||
content.style.whiteSpace = "pre-line";
|
||||
return content;
|
||||
} } : {}), axisPointer: { type: type === "bar" ? "shadow" : "line" } },
|
||||
grid: { top: tile ? verticalAxisName ? 16 : 10 : 28, right: 24,
|
||||
bottom: tile ? horizontalAxisName ? 24 : 16 : xAxisName ? 48 : 28, left: 12, containLabel: true },
|
||||
xAxis: { ...(horizontal ? valueAxis : categoryAxis), name: horizontalAxisName,
|
||||
nameLocation: "middle", nameGap: tile ? 16 : 30,
|
||||
...(tile ? { nameTextStyle: { fontSize: 10, lineHeight: 12 } } : {}) },
|
||||
yAxis: { ...(horizontal ? { ...categoryAxis, inverse: true } : valueAxis), name: verticalAxisName,
|
||||
...(tile ? { nameGap: 4, nameTextStyle: { fontSize: 10, lineHeight: 12, align: "left" } } : {}) },
|
||||
series: visible.map((series) => ({ name: series.name, type: seriesType(series),
|
||||
data: series.data.slice(rangeStart, rangeEnd + 1).map((value, index) => type === "bar" && categoryColors
|
||||
? { value, itemStyle: { color: colors[(rangeStart + index) % colors.length] } } : value),
|
||||
barMaxWidth: 32, barCategoryGap: "35%", connectNulls: false,
|
||||
showSymbol: labels.length <= 24, symbolSize: seriesType(series) === "scatter" ? 8 : 6, emphasis: { focus: "series" } }))
|
||||
};
|
||||
};
|
||||
};
|
||||
const metadata = <>
|
||||
{!props.embedded && view !== "table" ? <div className="rounded-lg bg-muted/40 p-2.5" role="group" aria-label="当前区间摘要">
|
||||
<div className="mb-2 flex flex-wrap items-center justify-between gap-1">
|
||||
<span className="text-[11px] font-medium">区间摘要 <span className="font-normal text-muted-foreground">· 本地统计</span></span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{summaries.map((item) => <div key={item.name} className="answer-chart-range-summary text-[11px] leading-5">
|
||||
<span className="min-w-0 break-words text-muted-foreground">{item.name}</span>
|
||||
<span className="tabular-nums">{numberLabel(item.first)} → {numberLabel(item.last)}</span>
|
||||
<span className="text-muted-foreground">最小 {numberLabel(item.min)} · 最大 {numberLabel(item.max)}</span>
|
||||
</div>)}
|
||||
</div>
|
||||
</div> : null}
|
||||
{view !== "table" && inspecting ? <motion.section aria-label="数据点详情" className="rounded-lg border border-border p-2.5"
|
||||
return { line: option("line"), bar: option("bar") };
|
||||
}, [animateInteraction, categoryColors, composite, fitted, hiddenSeries, horizontalBars, labels, numberLabel, plotWidth,
|
||||
props.chart_type, rangeStart, rangeEnd, reducedMotion, tile, view, visible, xAxisName, yAxisName]);
|
||||
const pointDetails = view !== "table" && inspecting ? <motion.section aria-label="数据点详情" className="rounded-lg border border-border p-2.5"
|
||||
initial={pointer.current && !reducedMotion ? { opacity: 0, y: 4 } : false}
|
||||
animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.18, ease: agentEase }}>
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
@@ -170,69 +178,26 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
</dd>
|
||||
</div>)}
|
||||
</dl>
|
||||
</motion.section> : null}
|
||||
</motion.section> : null;
|
||||
const metadata = <>
|
||||
{!props.embedded && !tile && view !== "table" ? <div className="rounded-lg bg-muted/40 p-2.5" role="group" aria-label="当前区间摘要">
|
||||
<div className="mb-2 flex flex-wrap items-center justify-between gap-1">
|
||||
<span className="text-[11px] font-medium">区间摘要 <span className="font-normal text-muted-foreground">· 本地统计</span></span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{summaries.map((item) => <div key={item.name} className="answer-chart-range-summary text-[11px] leading-5">
|
||||
<span className="min-w-0 break-words text-muted-foreground">{item.name}</span>
|
||||
<span className="tabular-nums">{numberLabel(item.first)} → {numberLabel(item.last)}</span>
|
||||
<span className="text-muted-foreground">最小 {numberLabel(item.min)} · 最大 {numberLabel(item.max)}</span>
|
||||
</div>)}
|
||||
</div>
|
||||
</div> : null}
|
||||
{pointDetails}
|
||||
<p className="flex items-start gap-1.5 border-t pt-2.5 text-[11px] leading-5 text-muted-foreground">
|
||||
<Database size={12} className="mt-1 shrink-0" /><span className="min-w-0 break-words [overflow-wrap:anywhere]">{fullRange ? labels.length : `${labels.length} / ${props.x_data.length}`} 个数据点 · {visible.length} 组序列<br />来源：{props.source}</span>
|
||||
<Database size={12} className="mt-1 shrink-0" /><span className="min-w-0 break-words [overflow-wrap:anywhere]">{fullRange ? labels.length : `${labels.length} / ${props.x_data.length}`} 个数据点 · {visible.length} 组序列{props.embedded ? "" : <><br />来源：{props.source}</>}</span>
|
||||
</p>
|
||||
</>;
|
||||
return <Collapsible asChild><Card className={`answer-ui-chart overflow-hidden ${props.embedded || props.expanded ? "border-0 shadow-none" : ""} ${props.expanded ? "@container flex h-full min-h-0 min-w-0 flex-1 flex-col" : ""}`} role={props.embedded ? undefined : "group"} aria-label={props.embedded ? undefined : props.title}
|
||||
onPointerDownCapture={() => { pointer.current = true; }}
|
||||
onKeyDownCapture={() => {
|
||||
pointer.current = false;
|
||||
setAnimateInteraction(false);
|
||||
contentMotion.stop();
|
||||
contentMotion.set({ opacity: 1, y: 0 });
|
||||
}}>
|
||||
<CardHeader className="shrink-0 flex-row items-center justify-between gap-2 space-y-0 px-3.5 py-2.5">
|
||||
<CardTitle className="flex min-w-0 items-center gap-2 text-xs leading-5 tracking-normal"><TrendingUp size={15} className="shrink-0" aria-hidden />{props.embedded || props.expanded ? "图形与数据" : props.title}</CardTitle>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{!props.embedded && !props.expanded ? <FloatingWindow title={props.title} fillContent
|
||||
openRequestKey={chartWindowKey === undefined ? undefined : JSON.stringify([chartWindowKey, props])}>
|
||||
{() => <InteractiveChart {...props} expanded />}
|
||||
</FloatingWindow> : null}
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button type="button" variant="ghost" size="icon-sm" aria-label="筛选数据范围" title="筛选数据范围"
|
||||
className="shrink-0 text-muted-foreground">
|
||||
<SlidersHorizontal size={14} aria-hidden />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className={`${props.expanded ? "flex min-h-0 flex-1 flex-col" : "space-y-3"} px-3.5 pb-3.5 pt-0`}>
|
||||
{migrationNotice ? <p role="status" className="text-xs leading-5 text-muted-foreground">{migrationNotice}</p> : null}
|
||||
<Tabs value={view} onValueChange={setView} className={props.expanded ? "grid min-h-0 flex-1 grid-cols-1 grid-rows-[auto_auto_minmax(120px,1fr)_minmax(0,auto)] gap-x-3 gap-y-2 @min-[560px]:grid-cols-[minmax(0,1fr)_176px] @min-[560px]:grid-rows-[auto_auto_minmax(120px,1fr)]" : undefined}>
|
||||
<TabsList aria-label={`${props.title}显示方式`} className={`${props.expanded ? "col-start-1 row-start-1 min-w-0" : "mb-3"} relative grid w-full grid-cols-3 [&>[role=tab]]:relative [&>[role=tab]]:z-10 [&>[role=tab][data-state=active]]:bg-transparent [&>[role=tab][data-state=active]]:shadow-none`}>
|
||||
<motion.span aria-hidden className="pointer-events-none absolute inset-y-1 left-1 rounded-md bg-card shadow-xs"
|
||||
style={{ width: "calc((100% - 0.5rem) / 3)" }}
|
||||
initial={false} animate={{ x: view === "line" ? "0%" : view === "bar" ? "100%" : "200%" }}
|
||||
transition={{ duration: animateInteraction && !reducedMotion ? 0.18 : 0, ease: agentEase }} />
|
||||
<TabsTrigger value="line"><TrendingUp size={13} />{composite ? "复合" : "折线"}</TabsTrigger>
|
||||
<TabsTrigger value="bar"><BarChart3 size={13} />柱状</TabsTrigger>
|
||||
<TabsTrigger value="table"><Table2 size={13} />数据</TabsTrigger>
|
||||
</TabsList>
|
||||
<aside className={props.expanded ? "col-start-1 row-start-4 max-h-32 min-h-0 min-w-0 space-y-2 overflow-y-auto border-t border-border pt-2 @min-[560px]:col-start-2 @min-[560px]:row-start-1 @min-[560px]:row-span-3 @min-[560px]:max-h-none @min-[560px]:border-t-0 @min-[560px]:border-l @min-[560px]:pt-0 @min-[560px]:pl-3" : undefined}>
|
||||
<div className={`answer-ui-chart-series mb-2 flex flex-wrap gap-2 ${props.expanded ? "@min-[560px]:flex-col @min-[560px]:flex-nowrap @min-[560px]:items-stretch" : ""}`} aria-label="显示的数据序列">
|
||||
{props.series.map((series, index) => <Button key={index} size="sm" variant="outline"
|
||||
className={`h-auto min-h-8 min-w-0 max-w-full gap-1.5 whitespace-normal text-left text-[11px] after:inset-0 ${props.expanded ? "justify-start" : ""}`} aria-pressed={!hidden.includes(index)}
|
||||
disabled={visible.length === 1 && !hidden.includes(index)}
|
||||
onClick={() => { setAnimateInteraction(pointer.current && !reducedMotion); patch({ hidden: hidden.includes(index) ? hidden.filter((item) => item !== index) : [...hidden, index],
|
||||
table: { query: "", ...table, sort: null, selection: [] } }, ["hidden", "table/sort"]); }}>
|
||||
<span className="size-2 shrink-0 rounded-full" style={{ background: hidden.includes(index) ? "#cbd5e1" : colors[index] }} /><span className="min-w-0 break-words">{series.name}</span>
|
||||
</Button>)}
|
||||
</div>
|
||||
{hidden.length ? <Button type="button" variant="ghost" size="sm" onClick={() => patch({ hidden: [] }, ["hidden"])}>显示全部序列</Button> : null}
|
||||
{view === "bar" && categoryColors ? <div aria-label="类别图例" className={`mb-3 grid gap-1.5 rounded-md bg-muted/30 p-2 ${props.expanded ? "" : "max-h-40 overflow-y-auto"}`} style={{ gridTemplateColumns: `repeat(${props.expanded ? 1 : plotWidth >= 700 ? 3 : plotWidth >= 420 ? 2 : 1},minmax(0,1fr))` }}>
|
||||
{labels.map((label, index) => <div key={index} className="flex min-w-0 items-start gap-2 text-[11px] leading-5">
|
||||
<span className="mt-1.5 size-2 shrink-0 rounded-sm" style={{ background: colors[(range[0] + index) % colors.length] }} />
|
||||
<span className="min-w-0 break-words">{label}</span>
|
||||
<span className="ml-auto shrink-0 tabular-nums">{numberLabel(visible[0].data[range[0] + index])}</span>
|
||||
</div>)}
|
||||
</div> : null}
|
||||
{props.expanded ? metadata : null}
|
||||
</aside>
|
||||
<div className={props.expanded ? "col-start-1 row-start-2 min-w-0" : undefined}>
|
||||
{!fullRange ? <p className="mb-2 text-[11px] text-muted-foreground">{props.x_data[range[0]]} 至 {props.x_data[range[1]]}</p> : null}
|
||||
<CollapsibleContent className="mb-2 space-y-2 rounded-lg border bg-muted/30 p-2.5">
|
||||
const rangeControls = <div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<PointSelect label="区间起点" value={range[0]} labels={props.x_data}
|
||||
onChange={(start) => setRange([start, Math.max(start, range[1])])} />
|
||||
@@ -242,12 +207,63 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
</div>
|
||||
<Button type="button" variant="ghost" size="sm" disabled={fullRange}
|
||||
onClick={() => setRange([0, props.x_data.length - 1])}>重置范围</Button>
|
||||
</CollapsibleContent>
|
||||
</div>;
|
||||
return <Collapsible asChild><Card className={`answer-ui-chart overflow-hidden ${props.embedded || props.expanded ? "border-0 shadow-none" : ""} ${fitted ? "@container flex h-full min-h-0 min-w-0 flex-1 flex-col" : ""}`} data-chart-tile={tile || undefined} role={props.embedded ? undefined : "group"} aria-label={props.embedded ? undefined : props.title}
|
||||
onPointerDownCapture={() => { pointer.current = true; }}
|
||||
onKeyDownCapture={() => {
|
||||
pointer.current = false;
|
||||
setAnimateInteraction(false);
|
||||
contentMotion.stop();
|
||||
contentMotion.set({ opacity: 1, y: 0 });
|
||||
}}>
|
||||
{!props.embedded ? <CardHeader className={`shrink-0 flex-row items-center justify-between gap-2 space-y-0 ${tile ? "px-2 py-1.5" : "px-3.5 py-2.5"}`}>
|
||||
<CardTitle className="flex min-w-0 items-center gap-2 text-xs leading-5 tracking-normal"><TrendingUp size={15} className="shrink-0" aria-hidden />{props.expanded ? "图形与数据" : props.title}</CardTitle>
|
||||
<div className={`flex shrink-0 items-center gap-1 ${tile ? "[&>button]:size-6" : ""}`}>
|
||||
{!props.embedded && !props.expanded ? <FloatingWindow title={props.title} fillContent>
|
||||
{() => <InteractiveChart {...props} expanded tile={false} />}
|
||||
</FloatingWindow> : null}
|
||||
{tile ? <Popover><PopoverTrigger asChild>
|
||||
<Button type="button" variant="ghost" size="icon-sm" aria-label="查看图表来源" title="查看图表来源"><FileText size={14} aria-hidden /></Button>
|
||||
</PopoverTrigger><PopoverContent align="end" className="workbench-shadcn-surface z-[90] max-h-72 overflow-auto text-xs leading-5">{props.source}</PopoverContent></Popover> : <CollapsibleTrigger asChild>
|
||||
<Button type="button" variant="ghost" size="icon-sm" aria-label="筛选数据范围" title="筛选数据范围" className="shrink-0 text-muted-foreground"><SlidersHorizontal size={14} aria-hidden /></Button>
|
||||
</CollapsibleTrigger>}
|
||||
</div>
|
||||
</CardHeader> : null}
|
||||
<CardContent className={`${fitted ? "flex min-h-0 flex-1 flex-col" : "space-y-3"} ${props.embedded ? "px-0 pb-0" : tile ? "px-2 pb-2" : "px-3.5 pb-3.5"} pt-0`}>
|
||||
{migrationNotice ? <p role="status" className="text-xs leading-5 text-muted-foreground">{migrationNotice}</p> : null}
|
||||
<Tabs value={view} onValueChange={setView} className={fitted ? `grid min-h-0 flex-1 grid-cols-1 ${tile ? "grid-rows-[auto_minmax(100px,1fr)_minmax(32px,auto)] gap-y-1" : "grid-rows-[auto_auto_minmax(180px,1fr)_auto] gap-y-2"}` : undefined}>
|
||||
<div className={`flex min-w-0 items-center gap-2 ${fitted ? "col-start-1 row-start-1" : "mb-3"}`}>
|
||||
<TabsList aria-label={`${props.title}显示方式`} className={`relative grid min-w-0 flex-1 grid-cols-3 ${tile ? "min-h-7 p-0.5" : ""} [&>[role=tab]]:relative [&>[role=tab]]:z-10 [&>[role=tab][data-state=active]]:bg-transparent [&>[role=tab][data-state=active]]:shadow-none`}>
|
||||
<motion.span aria-hidden className="pointer-events-none absolute inset-y-1 left-1 rounded-md bg-card shadow-xs"
|
||||
style={{ width: "calc((100% - 0.5rem) / 3)" }}
|
||||
initial={false} animate={{ x: view === "line" ? "0%" : view === "bar" ? "100%" : "200%" }}
|
||||
transition={{ duration: animateInteraction && !reducedMotion ? 0.18 : 0, ease: agentEase }} />
|
||||
<TabsTrigger value="line" className={tile ? "min-h-6 px-1.5 py-0.5 text-[11px]" : undefined}><TrendingUp size={13} />{composite ? "复合" : "折线"}</TabsTrigger>
|
||||
<TabsTrigger value="bar" className={tile ? "min-h-6 px-1.5 py-0.5 text-[11px]" : undefined}><BarChart3 size={13} />柱状</TabsTrigger>
|
||||
<TabsTrigger value="table" className={tile ? "min-h-6 px-1.5 py-0.5 text-[11px]" : undefined}><Table2 size={13} />数据</TabsTrigger>
|
||||
</TabsList>
|
||||
{tile ? <>
|
||||
<Popover><PopoverTrigger asChild><Button type="button" variant="ghost" size="icon-sm" aria-label="筛选数据范围" title="筛选数据范围" className={`h-7 shrink-0 ${fullRange ? "w-7" : "w-auto gap-1 px-1.5"}`}><SlidersHorizontal size={14} aria-hidden />
|
||||
{!fullRange ? <span className="max-w-20 truncate text-[10px]" title={`${props.x_data[range[0]]} 至 ${props.x_data[range[1]]}`}>{props.x_data[range[0]]} 至 {props.x_data[range[1]]}</span> : null}
|
||||
</Button></PopoverTrigger>
|
||||
<PopoverContent align="end" className="workbench-shadcn-surface z-[90] p-3">{rangeControls}</PopoverContent>
|
||||
</Popover>
|
||||
{inspecting && view !== "table" ? <Popover open={inspecting} onOpenChange={setInspecting}><PopoverTrigger asChild><Button type="button" variant="ghost" size="icon-sm" aria-label="数据点详情" title="数据点详情" className="size-7 shrink-0"><Database size={14} aria-hidden /></Button></PopoverTrigger>
|
||||
<PopoverContent align="end" className="workbench-shadcn-surface z-[90] max-h-[60dvh] overflow-auto p-2" onOpenAutoFocus={(event) => event.preventDefault()}>{pointDetails}</PopoverContent>
|
||||
</Popover> : null}
|
||||
</> : props.embedded ? <CollapsibleTrigger asChild>
|
||||
<Button type="button" variant="ghost" size="icon-sm" aria-label="筛选数据范围" title="筛选数据范围"><SlidersHorizontal size={14} aria-hidden /></Button>
|
||||
</CollapsibleTrigger> : null}
|
||||
</div>
|
||||
<motion.div className={props.expanded ? "col-start-1 row-start-3 min-h-0 min-w-0" : undefined} data-chart-view={view} initial={false} animate={contentMotion}>
|
||||
{(["line", "bar"] as const).map((type) => <TabsContent key={type} value={type} className={props.expanded ? "h-full min-h-0" : undefined}>
|
||||
|
||||
{!tile ? <div className={fitted ? "col-start-1 row-start-2 min-w-0" : undefined}>
|
||||
{!fullRange ? <p className="mb-2 text-[11px] text-muted-foreground">{props.x_data[range[0]]} 至 {props.x_data[range[1]]}</p> : null}
|
||||
{!tile ? <CollapsibleContent className="mb-2 space-y-2 rounded-lg border bg-muted/30 p-2.5">{rangeControls}</CollapsibleContent> : null}
|
||||
</div> : null}
|
||||
<motion.div className={fitted ? `col-start-1 ${tile ? "row-start-2" : "row-start-3"} min-h-0 min-w-0` : undefined} data-chart-view={view} initial={false} animate={contentMotion}>
|
||||
{(["line", "bar"] as const).map((type) => <TabsContent key={type} value={type} className={fitted ? "h-full min-h-0" : undefined}>
|
||||
<div ref={view === type ? plot : undefined} role="group" aria-label={`${props.title}，按回车查看数据点，方向键切换数据点`} tabIndex={0}
|
||||
className={`${props.expanded ? (type === "bar" && horizontalBars ? "h-full min-h-0 overflow-x-hidden overflow-y-auto" : "h-full min-h-0 overflow-hidden") : ""} rounded-md focus-visible:outline-2 focus-visible:outline-ring`}
|
||||
className={`${fitted ? (type === "bar" && horizontalBars ? "h-full min-h-0 overflow-x-hidden overflow-y-auto" : "h-full min-h-0 overflow-hidden") : ""} rounded-md focus-visible:outline-2 focus-visible:outline-ring`}
|
||||
onKeyDown={(event) => {
|
||||
if (event.target !== event.currentTarget) return;
|
||||
if (["Enter", "ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
|
||||
@@ -259,13 +275,13 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
if (event.key === "Escape") setInspecting(false);
|
||||
}}>
|
||||
<span className="sr-only">点击图中数据点查看详情，也可使用回车和左右方向键。</span>
|
||||
<div role="img" aria-label={props.title} style={{ height: props.expanded ? "100%" : props.plotHeight ?? 220,
|
||||
minHeight: props.expanded && type === "bar" && horizontalBars ? labels.length * 36 + 48 : undefined }}>
|
||||
<ResponsiveChart option={option(type)} height="100%" onPointSelect={(index) => patch({ point: range[0] + index, inspecting: true })} />
|
||||
<div role="img" aria-label={props.title} style={{ height: fitted ? "100%" : props.plotHeight ?? 220,
|
||||
minHeight: fitted && type === "bar" && horizontalBars ? labels.length * (tile ? 28 : 36) + 48 : undefined }}>
|
||||
<ResponsiveChart option={options[type]} height="100%" onPointSelect={(index) => patch({ point: range[0] + index, inspecting: true })} />
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>)}
|
||||
<TabsContent value="table" className={props.expanded ? "h-full overflow-auto" : undefined} forceMount style={view === "table" ? undefined : { display: "none" }}>
|
||||
<TabsContent value="table" className={fitted ? "h-full overflow-auto" : undefined} forceMount style={view === "table" ? undefined : { display: "none" }}>
|
||||
<InteractiveDataTable title={props.title} columns={["时间或类别", ...visible.map((series) => series.name)]}
|
||||
rows={labels.map((label, index) => [label, ...visible.map((series) => {
|
||||
const offset = range[0] + index, time = chartSampleTime(series.sample_times?.[offset]);
|
||||
@@ -274,7 +290,27 @@ export const InteractiveChart = memo(function InteractiveChartView(props: Answer
|
||||
state={table} onStateChange={(updates) => patch({ table: { query: "", sort: null, selection: [], ...table, ...updates } }, Object.keys(updates).map((key) => `table/${key}`))} />
|
||||
</TabsContent>
|
||||
</motion.div>
|
||||
{!props.expanded ? metadata : null}
|
||||
<div aria-label="图表图例" className={fitted ? `col-start-1 ${tile ? "row-start-3 min-h-8 max-h-14" : `row-start-4 min-h-0 ${props.embedded ? "max-h-56" : "max-h-40"}`} min-w-0 overflow-y-auto border-t border-border ${tile ? "pt-1" : "pt-2"}` : "border-t border-border pt-3"}>
|
||||
<div className={`answer-ui-chart-series flex flex-wrap ${tile ? "gap-1" : "mb-2 gap-2"}`} aria-label="显示的数据序列">
|
||||
{props.series.map((series, index) => <Button key={index} size="sm" variant="outline"
|
||||
className={`h-auto ${tile ? "min-h-6 px-2 py-0.5" : "min-h-8"} min-w-0 max-w-full justify-start gap-1.5 whitespace-normal text-left text-[11px] after:inset-0`} aria-pressed={!hidden.includes(index)}
|
||||
disabled={visible.length === 1 && !hidden.includes(index)}
|
||||
onClick={() => { setAnimateInteraction(pointer.current && !reducedMotion && !tile); patch({ hidden: hidden.includes(index) ? hidden.filter((item) => item !== index) : [...hidden, index],
|
||||
table: { query: "", ...table, sort: null, selection: [] } }, ["hidden", "table/sort"]); }}>
|
||||
<span className="size-2 shrink-0 rounded-full" style={{ background: hidden.includes(index) ? "#cbd5e1" : colors[index] }} /><span className="min-w-0 break-words">{series.name}</span>
|
||||
</Button>)}
|
||||
</div>
|
||||
{hidden.length ? <Button type="button" variant="ghost" size="sm" onClick={() => patch({ hidden: [] }, ["hidden"])}>显示全部序列</Button> : null}
|
||||
{view === "bar" && categoryColors ? <div aria-label="类别图例" className={`mb-3 grid gap-1.5 rounded-md bg-muted/30 p-2 ${fitted ? "" : "max-h-40 overflow-y-auto"}`} style={{ gridTemplateColumns: `repeat(${fitted ? 1 : plotWidth >= 700 ? 3 : plotWidth >= 420 ? 2 : 1},minmax(0,1fr))` }}>
|
||||
{labels.map((label, index) => <div key={index} className="flex min-w-0 items-start gap-2 text-[11px] leading-5">
|
||||
<span className="mt-1.5 size-2 shrink-0 rounded-sm" style={{ background: colors[(range[0] + index) % colors.length] }} />
|
||||
<span className="min-w-0 break-words">{label}</span>
|
||||
<span className="ml-auto shrink-0 tabular-nums">{numberLabel(visible[0].data[range[0] + index])}</span>
|
||||
</div>)}
|
||||
</div> : null}
|
||||
{props.expanded && !tile ? metadata : null}
|
||||
</div>
|
||||
{!fitted ? metadata : null}
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card></Collapsible>;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useMemo } from "react";
|
||||
import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
|
||||
import { ArrowDown, ArrowUp } from "lucide-react";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { FloatingWindow } from "@/shared/ui/floating-window";
|
||||
@@ -45,13 +45,13 @@ export function InteractiveDataTable({ title, columns, rows, state: controlledSt
|
||||
<Table>
|
||||
<TableCaption className="caption-top font-medium">{title}</TableCaption>
|
||||
<TableHeader className="bg-muted/50"><TableRow>
|
||||
{columns.map((column, index) => <TableHead key={index} scope="col" className="whitespace-nowrap"
|
||||
{columns.map((column, index) => <TableHead key={index} scope="col" className="whitespace-nowrap p-0"
|
||||
aria-sort={sort?.column === index ? sort.descending ? "descending" : "ascending" : "none"}>
|
||||
<Button size="sm" variant="ghost" className="h-9 gap-1 px-1 text-xs" aria-label={`按${column}排序`}
|
||||
<Button variant="ghost" className="h-10 w-full justify-start gap-1 rounded-none px-4 text-xs focus-visible:ring-inset focus-visible:ring-offset-0" aria-label={`按${column}排序`}
|
||||
onClick={() => patch({ sort: sort?.column === index
|
||||
? sort.descending ? null : { column: index, descending: true }
|
||||
: { column: index, descending: false } })}>
|
||||
{column}{sort?.column === index ? sort.descending ? <ArrowDown size={12} /> : <ArrowUp size={12} /> : <ArrowUpDown size={12} />}
|
||||
{column}{sort?.column === index ? sort.descending ? <ArrowDown size={12} aria-hidden /> : <ArrowUp size={12} aria-hidden /> : null}
|
||||
</Button>
|
||||
</TableHead>)}
|
||||
</TableRow></TableHeader>
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
import { act, cleanup, render } from "@testing-library/react";
|
||||
import { afterEach, beforeEach, expect, it, vi } from "vitest";
|
||||
import { ResponsiveChart } from "./responsive-chart";
|
||||
|
||||
const engine = vi.hoisted(() => ({ resize: vi.fn() }));
|
||||
vi.mock("echarts-for-react", async () => {
|
||||
const React = await import("react");
|
||||
return { default: React.forwardRef(function MockChart({ onChartReady }: { onChartReady?: (instance: typeof engine) => void }, ref) {
|
||||
React.useImperativeHandle(ref, () => ({ getEchartsInstance: () => engine }), []);
|
||||
React.useLayoutEffect(() => { onChartReady?.(engine); }, [onChartReady]);
|
||||
return <div data-testid="chart-engine" />;
|
||||
}) };
|
||||
});
|
||||
|
||||
const observers: ResizeObserverCallback[] = [];
|
||||
const frames = new Map<number, FrameRequestCallback>();
|
||||
let frameId = 0;
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout", "performance"] });
|
||||
vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => { frames.set(++frameId, callback); return frameId; });
|
||||
vi.stubGlobal("cancelAnimationFrame", (id: number) => { frames.delete(id); });
|
||||
vi.stubGlobal("ResizeObserver", class {
|
||||
constructor(callback: ResizeObserverCallback) { observers.push(callback); }
|
||||
observe() {}
|
||||
disconnect() {}
|
||||
});
|
||||
});
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
engine.resize.mockReset();
|
||||
observers.length = 0;
|
||||
frames.clear();
|
||||
vi.unstubAllGlobals();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
function fixture(resizing: boolean, count = 1) {
|
||||
const observerStart = observers.length;
|
||||
const view = render(<div data-floating-window="" data-floating-window-resizing={resizing ? "true" : undefined}>
|
||||
{Array.from({ length: count }, (_, index) => <ResponsiveChart key={index} option={{}} height="100%" onPointSelect={() => undefined} />)}
|
||||
</div>);
|
||||
const shell = view.container.firstElementChild as HTMLElement;
|
||||
const size = { width: 320, height: 200 };
|
||||
for (const host of shell.children) Object.defineProperties(host, { clientWidth: { get: () => size.width }, clientHeight: { get: () => size.height } });
|
||||
const notify = (index = 0) => observers[observerStart + index]([], {} as ResizeObserver);
|
||||
const paint = () => { const pending = [...frames.values()]; frames.clear(); pending.forEach((callback) => callback(performance.now())); };
|
||||
engine.resize.mockClear();
|
||||
return { view, shell, size, notify, paint };
|
||||
}
|
||||
|
||||
it("coalesces active resizes to the latest actual dimensions with a 64ms interval", () => {
|
||||
const chart = fixture(true);
|
||||
const sizes: number[] = [];
|
||||
engine.resize.mockImplementation(() => { sizes.push(chart.size.width); });
|
||||
chart.notify();
|
||||
chart.notify();
|
||||
expect(frames.size).toBe(1);
|
||||
chart.paint();
|
||||
act(() => vi.advanceTimersByTime(16));
|
||||
chart.size.width = 400;
|
||||
chart.notify();
|
||||
chart.paint();
|
||||
expect(engine.resize).toHaveBeenCalledTimes(1);
|
||||
chart.size.width = 520;
|
||||
chart.notify();
|
||||
act(() => vi.advanceTimersByTime(48));
|
||||
chart.paint();
|
||||
expect(sizes).toEqual([320, 520]);
|
||||
expect(engine.resize).toHaveBeenLastCalledWith({ width: "auto", height: "auto", animation: { duration: 0 } });
|
||||
});
|
||||
|
||||
it("spaces charts in the same window from the last completed draw", () => {
|
||||
const chart = fixture(true, 2);
|
||||
engine.resize.mockImplementation(() => { vi.advanceTimersByTime(70); });
|
||||
chart.notify(0);
|
||||
chart.notify(1);
|
||||
chart.paint();
|
||||
expect(engine.resize).toHaveBeenCalledTimes(1);
|
||||
act(() => vi.advanceTimersByTime(64));
|
||||
chart.paint();
|
||||
expect(engine.resize).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("does not delay a different window behind another window's draw", () => {
|
||||
const first = fixture(true);
|
||||
const second = fixture(true);
|
||||
first.notify();
|
||||
second.notify();
|
||||
first.paint();
|
||||
expect(engine.resize).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("flushes the final geometry on release without waiting for the remaining interval", async () => {
|
||||
const chart = fixture(true);
|
||||
chart.notify();
|
||||
chart.paint();
|
||||
act(() => vi.advanceTimersByTime(16));
|
||||
chart.notify();
|
||||
chart.paint();
|
||||
expect(vi.getTimerCount()).toBe(1);
|
||||
await act(async () => { delete chart.shell.dataset.floatingWindowResizing; await Promise.resolve(); });
|
||||
expect(vi.getTimerCount()).toBe(0);
|
||||
chart.paint();
|
||||
expect(engine.resize).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("keeps normal layout changes immediate instead of applying pointer throttling", () => {
|
||||
const chart = fixture(false);
|
||||
chart.notify();
|
||||
chart.paint();
|
||||
act(() => vi.advanceTimersByTime(16));
|
||||
chart.notify();
|
||||
chart.paint();
|
||||
expect(engine.resize).toHaveBeenCalledTimes(2);
|
||||
expect(vi.getTimerCount()).toBe(0);
|
||||
});
|
||||
|
||||
it("cancels scheduled drawing on unmount", () => {
|
||||
const chart = fixture(true);
|
||||
chart.notify();
|
||||
chart.paint();
|
||||
act(() => vi.advanceTimersByTime(16));
|
||||
chart.notify();
|
||||
chart.paint();
|
||||
chart.view.unmount();
|
||||
act(() => vi.advanceTimersByTime(100));
|
||||
chart.paint();
|
||||
expect(engine.resize).toHaveBeenCalledTimes(1);
|
||||
expect(vi.getTimerCount()).toBe(0);
|
||||
});
|
||||
@@ -1,7 +1,9 @@
|
||||
import { useLayoutEffect, useRef, type ComponentProps } from "react";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
|
||||
/** Resize the existing drawing at most once per frame without replacing its options. */
|
||||
const resizedWindows = new WeakMap<HTMLElement, number>();
|
||||
|
||||
/** Reflow the existing drawing, coalescing rapid pointer resizes without scaling it. */
|
||||
export function ResponsiveChart({ option, height, onPointSelect }: {
|
||||
option: ComponentProps<typeof ReactECharts>["option"];
|
||||
height: number | "100%";
|
||||
@@ -13,16 +15,32 @@ export function ResponsiveChart({ option, height, onPointSelect }: {
|
||||
useLayoutEffect(() => {
|
||||
const element = host.current;
|
||||
if (!element || typeof ResizeObserver === "undefined") return;
|
||||
const shell = element.closest<HTMLElement>("[data-floating-window]");
|
||||
let frame = 0;
|
||||
const observer = new ResizeObserver(() => {
|
||||
cancelAnimationFrame(frame);
|
||||
frame = requestAnimationFrame(() => {
|
||||
if (!ready.current || !element.clientWidth || !element.clientHeight) return;
|
||||
chart.current?.getEchartsInstance().resize({ width: "auto", height: "auto", animation: { duration: 0 } });
|
||||
});
|
||||
let timer = 0;
|
||||
const resize = () => {
|
||||
frame = 0;
|
||||
if (!ready.current || !element.clientWidth || !element.clientHeight) return;
|
||||
// Space expensive drawings in one window instead of redrawing every chart together.
|
||||
const remaining = 64 - (performance.now() - (shell ? resizedWindows.get(shell) ?? -Infinity : -Infinity));
|
||||
if (shell?.dataset.floatingWindowResizing === "true" && remaining > 0) {
|
||||
timer = window.setTimeout(() => { timer = 0; frame = requestAnimationFrame(resize); }, remaining);
|
||||
return;
|
||||
}
|
||||
chart.current?.getEchartsInstance().resize({ width: "auto", height: "auto", animation: { duration: 0 } });
|
||||
if (shell) resizedWindows.set(shell, performance.now());
|
||||
};
|
||||
const schedule = () => { if (!frame && !timer) frame = requestAnimationFrame(resize); };
|
||||
const observer = new ResizeObserver(schedule);
|
||||
const settled = new MutationObserver(() => {
|
||||
if (shell?.dataset.floatingWindowResizing === "true") return;
|
||||
clearTimeout(timer);
|
||||
timer = 0;
|
||||
schedule();
|
||||
});
|
||||
observer.observe(element);
|
||||
return () => { cancelAnimationFrame(frame); observer.disconnect(); };
|
||||
if (shell) settled.observe(shell, { attributes: true, attributeFilter: ["data-floating-window-resizing"] });
|
||||
return () => { clearTimeout(timer); cancelAnimationFrame(frame); observer.disconnect(); settled.disconnect(); };
|
||||
}, []);
|
||||
return <div ref={host} style={{ height }}>
|
||||
<ReactECharts ref={chart} option={option} opts={{ renderer: "svg" }} notMerge autoResize={false}
|
||||
|
||||
@@ -72,13 +72,13 @@ function AgentUiResultCard({ result }: { result: AgentUiResult }) {
|
||||
);
|
||||
}
|
||||
|
||||
export const AgentChartView = memo(function AgentChartView({ chart, embedded = false, expanded = false }: { chart: NonNullable<ReturnType<typeof parseFrontendChart>>; embedded?: boolean; expanded?: boolean }) {
|
||||
return <SafeChartEnvelope embedded={embedded} expanded={expanded} envelope={{ kind: "chart", schemaVersion: "agent-ui@1", grammar: "echarts-safe-subset", surface: "side_panel", spec: { title: chart.title, chart_type: chart.chart_type,
|
||||
export const AgentChartView = memo(function AgentChartView({ chart, embedded = false, expanded = false, plotHeight, tile = false }: { chart: NonNullable<ReturnType<typeof parseFrontendChart>>; embedded?: boolean; expanded?: boolean; plotHeight?: number; tile?: boolean }) {
|
||||
return <SafeChartEnvelope embedded={embedded} expanded={expanded} plotHeight={plotHeight} tile={tile} envelope={{ kind: "chart", schemaVersion: "agent-ui@1", grammar: "echarts-safe-subset", surface: "side_panel", spec: { title: chart.title, chart_type: chart.chart_type,
|
||||
...(chart.x_axis_name ? { x_axis_name: chart.x_axis_name } : {}),
|
||||
...(chart.y_axis_name ? { y_axis_name: chart.y_axis_name } : {}) }, data: { x_data: chart.x_data, series: chart.series } }} />;
|
||||
});
|
||||
|
||||
function SafeChartEnvelope({ envelope, embedded = false, expanded = false }: { envelope: Extract<UIEnvelope, { kind: "chart" }>; embedded?: boolean; expanded?: boolean }) {
|
||||
function SafeChartEnvelope({ envelope, embedded = false, expanded = false, plotHeight, tile = false }: { envelope: Extract<UIEnvelope, { kind: "chart" }>; embedded?: boolean; expanded?: boolean; plotHeight?: number; tile?: boolean }) {
|
||||
const parsed = parseChartSpec(envelope.spec);
|
||||
const raw = normalizeSafeChartData(envelope.data, 100);
|
||||
const displayed = withChartDisplayTimes({ title: parsed.title ?? "Agent 图表", x_axis_name: parsed.xAxisName,
|
||||
@@ -97,7 +97,7 @@ function SafeChartEnvelope({ envelope, embedded = false, expanded = false }: { e
|
||||
series={data.series.slice(0, 8)}
|
||||
source="来源见关联依据。"
|
||||
embedded={embedded}
|
||||
expanded={expanded}
|
||||
expanded={expanded} plotHeight={plotHeight} tile={tile}
|
||||
xAxisName={spec.xAxisName}
|
||||
yAxisName={spec.yAxisName}
|
||||
/>;
|
||||
|
||||
@@ -116,3 +116,4 @@ export { readInteractionReply } from "./api/interaction-requests";
|
||||
export type { InteractionRequestsController } from "./hooks/use-interaction-requests";
|
||||
|
||||
export { presentationCommandSchema, presentationOverlayDataSchema, PRESENTATION_ACTIONS, type PresentationCommand } from "./presentation/command";
|
||||
export { chartPublicationError, safeChartPublicationInput } from "./presentation/command-schema";
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { z } from "zod";
|
||||
import cases from "../../../../tests/fixtures/chart-publication-cases.json";
|
||||
import examples from "../../../../tests/fixtures/unified-presentation.jsonl?raw";
|
||||
import { createViewSchemas, safeChartInput, safeChartPublicationInput } from "./command-schema";
|
||||
|
||||
describe("shared chart publication conformance", () => {
|
||||
it.each(cases)("$name", ({ chart, accepted }) => {
|
||||
expect(safeChartPublicationInput.safeParse(chart).success).toBe(accepted);
|
||||
for (const publication of [false, true]) {
|
||||
const schema = createViewSchemas(z, publication, true).command;
|
||||
expect(schema.safeParse({ action: "open_chart", chart_id: "comparison", evidence_refs: ["dev:synthetic"], chart }).success).toBe(accepted);
|
||||
}
|
||||
});
|
||||
|
||||
it("keeps historical mixed charts structurally readable", () => {
|
||||
expect(safeChartInput.safeParse(cases.find((item) => item.name === "old mixed charts are read only")!.chart).success).toBe(true);
|
||||
});
|
||||
|
||||
it("accepts every exported command example through the publication schema", () => {
|
||||
const schema = createViewSchemas(z, true).command;
|
||||
for (const record of examples.trim().split("\n").map((line) => JSON.parse(line)))
|
||||
if (record.record_type === "presentation") expect(schema.safeParse(record.command).success).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -7,8 +7,63 @@ export function createChartSampleTimeSchema(zod: typeof z = z) {
|
||||
);
|
||||
}
|
||||
|
||||
type PublicationChart = {
|
||||
chart_type: string;
|
||||
x_data: string[];
|
||||
series: Array<{ type?: string; data: Array<number | null>; sample_times?: Array<string | null> }>;
|
||||
};
|
||||
|
||||
/** Mirrors Server time_comparison_chart.py for new publications, never historical reads. */
|
||||
export function chartPublicationError(chart: PublicationChart): string | null {
|
||||
const kinds = new Set(chart.series.map((series) => series.type ?? (chart.chart_type === "time_comparison" ? "line" : chart.chart_type)));
|
||||
if (chart.chart_type !== "time_comparison") return kinds.has("line") && kinds.has("scatter")
|
||||
? "曲线与历史散点复合图须使用 chart_type=time_comparison" : null;
|
||||
if (kinds.size !== 2 || !kinds.has("line") || !kinds.has("scatter"))
|
||||
return "time_comparison 必须包含当前 line 和历史 scatter，不能混入 bar";
|
||||
const labels = chart.x_data;
|
||||
if (!labels.every((label) => /^(?:[01][0-9]|2[0-3]):[0-5][0-9](?::[0-5][0-9])?$/.test(label)) || new Set(labels.map((label) => label.length)).size !== 1)
|
||||
return "time_comparison.x_data 必须使用一致精度的 HH:mm 或 HH:mm:ss 共享时刻槽";
|
||||
const seconds = labels.map((label) => label.split(":").reduce((value, part, index) => value + Number(part) * [3600, 60, 1][index], 0));
|
||||
const offsets = [0];
|
||||
for (let index = 1; index < seconds.length; index++) {
|
||||
const step = (seconds[index] - seconds[index - 1] + 86400) % 86400;
|
||||
if (!step) return "x_data 不能重复时刻，历史点应复用当前槽位";
|
||||
offsets.push(offsets[index - 1] + step);
|
||||
}
|
||||
if (offsets.at(-1)! >= 86400) return "x_data 必须按时间递增且小于一天";
|
||||
const current = new Set<number>();
|
||||
const historical: number[] = [];
|
||||
for (const series of chart.series) {
|
||||
const times = series.sample_times;
|
||||
if (!times || times.length !== labels.length) return "sample_times 必须提供并与 x_data 等长";
|
||||
const bases = new Set<number>();
|
||||
for (let index = 0; index < times.length; index++) {
|
||||
const at = times[index];
|
||||
if ((series.data[index] === null) !== (at === null)) return "有效值必须有真实采样时间，缺测值和时间均填 null";
|
||||
if (at === null) continue;
|
||||
const local = new Date(Date.parse(at) + 8 * 3600_000);
|
||||
const base = local.getTime() - offsets[index] * 1000;
|
||||
const year = local.getUTCFullYear(), baseYear = new Date(base).getUTCFullYear();
|
||||
if (!Number.isFinite(base) || year < 1 || year > 9999 || baseYear < 1 || baseYear > 9999)
|
||||
return "sample_times 超出同期对比可表达的日期范围";
|
||||
const microseconds = /\.(\d+)/.exec(at)?.[1].slice(0, 6) ?? "0";
|
||||
if (local.toISOString().slice(11, labels[index].length === 8 ? 19 : 16) !== labels[index] ||
|
||||
Number(microseconds) !== 0 || labels[index].length === 5 && local.getUTCSeconds() !== 0)
|
||||
return "sample_times 换算为 UTC+8 后须与 x_data 对应时刻对齐";
|
||||
bases.add(base);
|
||||
}
|
||||
if (bases.size > 1) return "同一序列的 sample_times 必须按同一日期窗口对齐";
|
||||
if ((series.type ?? "line") === "line") for (const base of bases) current.add(base);
|
||||
else historical.push(...bases);
|
||||
}
|
||||
if (current.size !== 1) return "当前 line 必须包含真实采样时间，且所有当前曲线使用同一窗口";
|
||||
const start = [...current][0];
|
||||
return historical.some((base) => start <= base || (start - base) % 86400_000 !== 0)
|
||||
? "历史 scatter 必须来自当前窗口之前的对应日期" : null;
|
||||
}
|
||||
|
||||
/** Shared host/native schema factory. Native OpenCode supplies its own Zod instance. */
|
||||
export function createViewSchemas(zod: typeof z = z, publication = false) {
|
||||
export function createViewSchemas(zod: typeof z = z, publication = false, validateCharts = publication) {
|
||||
const z = zod;
|
||||
|
||||
const presentationIdentifierSchema = z.string().trim().min(1).max(128);
|
||||
@@ -39,7 +94,11 @@ export function createViewSchemas(zod: typeof z = z, publication = false) {
|
||||
(!series.sample_times || series.sample_times.length === value.x_data.length &&
|
||||
series.sample_times.every((time, index) => time === null || series.data[index] !== null))),
|
||||
"series must align with x_data"
|
||||
);
|
||||
).superRefine((value, ctx) => {
|
||||
if (!validateCharts) return;
|
||||
const message = chartPublicationError(value);
|
||||
if (message) ctx.addIssue({ code: "custom", message });
|
||||
});
|
||||
const position = z
|
||||
.tuple([z.number().finite().min(-180).max(180), z.number().finite().min(-90).max(90)])
|
||||
.rest(z.number().finite())
|
||||
@@ -213,8 +272,9 @@ export const {
|
||||
overlayDataSchema,
|
||||
variants: viewCommandVariants
|
||||
} = createViewSchemas();
|
||||
export const createViewCommandSchema = (options: { publication: boolean }) =>
|
||||
createViewSchemas(z, options.publication).command;
|
||||
export const safeChartPublicationInput = createViewSchemas(z, true).safeChartInput;
|
||||
export const createViewCommandSchema = (options: { publication: boolean; validateCharts?: boolean }) =>
|
||||
createViewSchemas(z, options.publication, options.validateCharts ?? options.publication).command;
|
||||
type Command = z.infer<ReturnType<typeof createViewCommandSchema>>;
|
||||
export type ViewCommand =
|
||||
| Exclude<Command, { action: "set_overlay" }>
|
||||
|
||||
@@ -2,13 +2,13 @@ import { Check, Map } from "lucide-react";
|
||||
import { type FocusEvent, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_CONTROL_RADIUS_CLASS_NAME,
|
||||
MAP_CONTROL_SURFACE_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
MAP_SELECTION_CARD_FOCUS_CLASS_NAME,
|
||||
MAP_TOOL_PANEL_SURFACE_CLASS_NAME
|
||||
} from "./map-control-styles";
|
||||
|
||||
@@ -105,18 +105,18 @@ export function BaseLayersControl({
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
data-map-option=""
|
||||
disabled={option.disabled}
|
||||
aria-pressed={active}
|
||||
onClick={() => onSelectLayer(option.id)}
|
||||
className={cn(
|
||||
"flex min-h-[76px] flex-col p-1 text-left transition duration-150",
|
||||
"flex min-h-[76px] flex-col p-1 text-left",
|
||||
MAP_READABLE_RADIUS_CLASS_NAME,
|
||||
MAP_SELECTION_CARD_FOCUS_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
active
|
||||
? "border-[var(--action-blue)] text-[var(--action-blue-hover)] shadow-xs"
|
||||
: "text-slate-700 hover:border-[var(--palette-brand)] hover:bg-[var(--action-soft)]/40",
|
||||
option.disabled && "cursor-not-allowed opacity-50"
|
||||
: "text-slate-700",
|
||||
mapOptionInteractionVariants({ state: active ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<BaseLayerSwatch option={option} active={active} />
|
||||
@@ -159,22 +159,22 @@ export function BaseLayersControl({
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
data-map-option=""
|
||||
disabled={option.disabled}
|
||||
aria-pressed={active}
|
||||
onClick={() => onSelectLayer(option.id)}
|
||||
className={cn(
|
||||
"flex h-[84px] w-[84px] flex-col p-1 text-center transition duration-150",
|
||||
"flex h-[84px] w-[84px] flex-col p-1 text-center text-slate-800",
|
||||
MAP_READABLE_RADIUS_CLASS_NAME,
|
||||
MAP_SELECTION_CARD_FOCUS_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
active ? "border-[var(--action-blue)] shadow-xs" : "border-[var(--surface-divider)] hover:border-[var(--palette-brand)] hover:bg-[var(--action-soft)]/40",
|
||||
option.disabled && "cursor-not-allowed opacity-50"
|
||||
active ? "border-[var(--action-blue)] shadow-xs" : "border-[var(--surface-divider)]",
|
||||
mapOptionInteractionVariants({ state: active ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<BaseLayerSwatch option={option} active={active} />
|
||||
<span
|
||||
data-base-layer-label="true"
|
||||
className="block h-4 shrink-0 truncate px-0.5 pt-1 text-xs font-semibold leading-none text-slate-800"
|
||||
className="block h-4 shrink-0 truncate px-0.5 pt-1 text-xs font-semibold leading-none"
|
||||
>
|
||||
{option.label}
|
||||
</span>
|
||||
@@ -185,9 +185,10 @@ export function BaseLayersControl({
|
||||
<div className={cn("absolute bottom-0 right-0 grid h-[96px] w-[96px] place-items-center p-1.5", MAP_CONTROL_RADIUS_CLASS_NAME, MAP_CONTROL_SURFACE_CLASS_NAME)}>
|
||||
<button
|
||||
type="button"
|
||||
data-map-option=""
|
||||
aria-label={`${title}：当前 ${activeLayer?.label ?? ""}`}
|
||||
title={`${title}：当前 ${activeLayer?.label ?? ""}`}
|
||||
className={cn("grid h-[84px] w-[84px] place-items-center p-1 text-slate-700 shadow-xs transition hover:border-[var(--palette-brand)] hover:text-[var(--action-blue-hover)]", MAP_READABLE_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_CLASS_NAME, MAP_SELECTION_CARD_FOCUS_CLASS_NAME)}
|
||||
className={cn("grid h-[84px] w-[84px] place-items-center p-1 text-slate-700 shadow-xs", MAP_READABLE_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_CLASS_NAME, mapOptionInteractionVariants())}
|
||||
>
|
||||
<span className={cn("relative h-full w-full overflow-hidden border border-white shadow-inner", MAP_ICON_CELL_RADIUS_CLASS_NAME)}>
|
||||
{activeLayer ? (
|
||||
@@ -195,7 +196,7 @@ export function BaseLayersControl({
|
||||
) : (
|
||||
<Map size={18} aria-hidden="true" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
|
||||
)}
|
||||
<span className="surface-reading absolute bottom-1 left-1 right-1 rounded px-1 py-0.5 text-xs font-semibold leading-none text-slate-800">
|
||||
<span className="surface-reading absolute bottom-1 left-1 right-1 rounded px-1 py-0.5 text-xs font-semibold leading-none">
|
||||
{activeLayer?.label ?? title}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
|
||||
@@ -79,14 +80,15 @@ export function MapModeButton({ icon: Icon, label, active = false, disabled = fa
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-map-option=""
|
||||
aria-pressed={active}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"flex h-14 flex-col items-center justify-center gap-1 text-xs font-semibold transition duration-150",
|
||||
"flex h-14 flex-col items-center justify-center gap-1 border border-transparent text-xs font-semibold",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
active ? "bg-[var(--action-blue)] text-white" : "surface-control text-slate-600 hover:text-[var(--action-blue-hover)]",
|
||||
disabled && "cursor-not-allowed opacity-55 hover:text-slate-600"
|
||||
active ? "bg-[var(--action-blue)] text-white" : "surface-control text-slate-600",
|
||||
mapOptionInteractionVariants({ state: active ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<Icon size={17} aria-hidden="true" />
|
||||
@@ -109,13 +111,14 @@ export function MapActionChip({
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-map-option=""
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"flex h-10 items-center justify-center gap-1.5 text-xs font-semibold text-slate-700 transition duration-150 hover:border-[var(--surface-border)] hover:text-[var(--action-blue-hover)]",
|
||||
"flex h-10 items-center justify-center gap-1.5 text-xs font-semibold text-slate-700",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
disabled && "cursor-not-allowed opacity-55 hover:border-white/70 hover:text-slate-700"
|
||||
mapOptionInteractionVariants()
|
||||
)}
|
||||
>
|
||||
<Icon size={14} aria-hidden="true" />
|
||||
@@ -157,23 +160,20 @@ export function MapActionRow({
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-map-option=""
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"flex min-h-12 w-full items-center gap-2.5 border px-2.5 py-2 text-left",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
isPrimary
|
||||
? "border-[var(--action-blue)] bg-[var(--action-blue)] text-white shadow-lg shadow-[color:var(--action-blue)]/25 hover:bg-[var(--action-blue-hover)]"
|
||||
? "border-[var(--action-blue)] bg-[var(--action-blue)] text-white shadow-lg shadow-[color:var(--action-blue)]/25"
|
||||
: strong
|
||||
? "border-[var(--surface-border)] bg-[var(--action-soft)]/95 text-[var(--action-blue-pressed)]"
|
||||
: "surface-control border-transparent text-slate-700 hover:border-[var(--surface-border)] hover:bg-[var(--surface-reading)] hover:text-[var(--action-blue-hover)]",
|
||||
isDanger && "hover:border-red-100 hover:text-red-700",
|
||||
: "surface-control border-transparent text-slate-700",
|
||||
selected && !isPrimary && "border-[var(--surface-border)] bg-[var(--action-soft)] text-[var(--action-blue-pressed)]",
|
||||
mapOptionInteractionVariants({ state: isDanger ? "danger" : isPrimary ? "primary" : selected || strong ? "selected" : "default" }),
|
||||
muted && "opacity-70",
|
||||
disabled &&
|
||||
(isPrimary
|
||||
? "cursor-not-allowed opacity-55 hover:border-[var(--action-blue)] hover:bg-[var(--action-blue-hover)] hover:text-white"
|
||||
: "cursor-not-allowed opacity-55 hover:border-white/70 hover:bg-[var(--surface-reading)]/95 hover:text-slate-700"),
|
||||
disabled && "shadow-none"
|
||||
)}
|
||||
>
|
||||
@@ -185,8 +185,8 @@ export function MapActionRow({
|
||||
? "bg-[var(--surface-reading)]/16 text-white"
|
||||
: selected || strong
|
||||
? "bg-[var(--action-blue)] text-white"
|
||||
: "bg-[var(--surface-control)] text-[var(--ink-muted)]",
|
||||
isDanger && "bg-red-50 text-red-600"
|
||||
: "bg-[var(--surface-control)] text-inherit",
|
||||
isDanger && "bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]"
|
||||
)}
|
||||
>
|
||||
<Icon size={15} aria-hidden="true" />
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
TooltipTrigger
|
||||
} from "@/shared/ui/tooltip";
|
||||
import {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_CONTROL_SURFACE_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
@@ -46,27 +47,26 @@ export function MapDrawToolbar({ items, label = "绘制工具", className = "",
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
data-map-option=""
|
||||
aria-pressed={item.active}
|
||||
disabled={item.disabled}
|
||||
onClick={item.onClick}
|
||||
className={cn(
|
||||
"flex min-h-10 items-center gap-2 border px-2.5 py-2 text-left text-xs font-semibold transition duration-150",
|
||||
"flex min-h-10 items-center gap-2 border px-2.5 py-2 text-left text-xs font-semibold",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
item.active
|
||||
? "border-[var(--action-blue)] bg-[var(--action-blue)] text-white shadow-[var(--action-shadow-primary)]"
|
||||
: "text-slate-700 hover:border-[var(--surface-border)] hover:bg-[var(--surface-reading)] hover:text-[var(--action-blue-hover)]",
|
||||
: "text-slate-700",
|
||||
!item.active && MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
isDanger && "hover:border-red-100 hover:text-red-700",
|
||||
item.disabled &&
|
||||
"cursor-not-allowed opacity-55 hover:border-white/70 hover:bg-[var(--surface-reading)]/95 hover:text-slate-700"
|
||||
mapOptionInteractionVariants({ state: isDanger ? "danger" : item.active ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"grid h-7 w-7 shrink-0 place-items-center",
|
||||
"grid h-7 w-7 shrink-0 place-items-center text-inherit transition-[background-color] duration-150 motion-reduce:transition-none",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
item.active ? "bg-[var(--surface-reading)]/16 text-white" : "bg-[var(--surface-control)] text-[var(--ink-muted)]",
|
||||
isDanger && "bg-red-50 text-red-600"
|
||||
item.active ? "bg-[var(--surface-reading)]/16" : "bg-[var(--surface-control)]",
|
||||
isDanger && "bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]"
|
||||
)}
|
||||
>
|
||||
<Icon size={15} aria-hidden="true" />
|
||||
@@ -100,6 +100,7 @@ export function MapDrawToolbar({ items, label = "绘制工具", className = "",
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
data-map-option=""
|
||||
aria-label={item.label}
|
||||
aria-pressed={item.active}
|
||||
disabled={item.disabled}
|
||||
@@ -109,9 +110,8 @@ export function MapDrawToolbar({ items, label = "绘制工具", className = "",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
item.active
|
||||
? "border-[var(--action-blue)] bg-[var(--action-blue)] text-white shadow-[var(--action-shadow-primary)]"
|
||||
: "hover:bg-[var(--action-soft)] hover:text-[var(--action-blue-hover)]",
|
||||
isDanger && "hover:bg-red-50 hover:text-red-700",
|
||||
item.disabled && "opacity-45 hover:bg-transparent hover:text-slate-600"
|
||||
: undefined,
|
||||
mapOptionInteractionVariants({ state: isDanger ? "danger" : item.active ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<Icon size={16} aria-hidden="true" />
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Eye, EyeOff, Layers3, Lock } from "lucide-react";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
|
||||
@@ -79,23 +80,24 @@ export function MapLayerControl({
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
data-map-option=""
|
||||
disabled={disabled}
|
||||
aria-pressed={item.visible}
|
||||
onClick={() => onToggleLayer(item.id, !item.visible)}
|
||||
className={cn(
|
||||
"flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm transition duration-150",
|
||||
"flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
item.visible
|
||||
? "surface-control border-[var(--surface-border)] text-slate-900"
|
||||
: "surface-well border-transparent text-[var(--ink-muted)] hover:border-[var(--surface-divider)] hover:bg-[var(--surface-reading)]",
|
||||
disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
|
||||
: "surface-well border-transparent text-[var(--ink-muted)]",
|
||||
mapOptionInteractionVariants({ state: item.visible ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"grid h-8 w-8 shrink-0 place-items-center",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
item.visible ? "bg-[var(--action-blue)] text-white" : "bg-[var(--surface-control)] text-[var(--ink-muted)]"
|
||||
item.visible ? "bg-[var(--action-blue)] text-white" : "bg-[var(--surface-control)] text-inherit"
|
||||
)}
|
||||
>
|
||||
{item.locked ? <Lock size={15} aria-hidden="true" /> : <Icon size={15} aria-hidden="true" />}
|
||||
|
||||
@@ -4,12 +4,12 @@ import { cn } from "@/shared/ui/cn";
|
||||
import type { BaseLayerOption } from "./base-layers-control";
|
||||
import type { MapLayerControlItem, MapLayerControlVisual } from "./layer-control";
|
||||
import {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_STRONG_CLASS_NAME,
|
||||
MAP_SELECTION_CARD_FOCUS_CLASS_NAME
|
||||
MAP_READABLE_SURFACE_STRONG_CLASS_NAME
|
||||
} from "./map-control-styles";
|
||||
|
||||
export type MapLayerPanelProps = {
|
||||
@@ -61,14 +61,14 @@ function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySection
|
||||
onToggle={(event) => handleGroupToggle(group.id, event.currentTarget.open)}
|
||||
className="surface-well group/layer overflow-hidden rounded-xl border"
|
||||
>
|
||||
<summary className="flex min-h-11 cursor-pointer list-none items-center gap-2 px-2.5 py-1.5 text-left marker:content-none active:scale-[0.99]">
|
||||
<summary data-map-option="" className={cn("flex min-h-11 cursor-pointer list-none items-center gap-2 border border-transparent px-2.5 py-1.5 text-left text-slate-700 marker:content-none", mapOptionInteractionVariants())}>
|
||||
<ChevronRight
|
||||
size={14}
|
||||
aria-hidden="true"
|
||||
className="shrink-0 text-[var(--ink-muted)] transition-transform duration-150 ease-out motion-reduce:transition-none group-open/layer:rotate-90"
|
||||
className="shrink-0 text-inherit transition-transform duration-150 ease-out motion-reduce:transition-none group-open/layer:rotate-90"
|
||||
/>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-xs font-semibold text-slate-700">{group.label}</span>
|
||||
<span className="block truncate text-xs font-semibold">{group.label}</span>
|
||||
{group.description ? (
|
||||
<span className="mt-0.5 block truncate text-[10px] leading-tight text-[var(--ink-muted)]">
|
||||
{group.description}
|
||||
@@ -169,18 +169,19 @@ function LayerVisibilityRow({
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-map-option=""
|
||||
disabled={disabled}
|
||||
aria-pressed={item.visible}
|
||||
aria-label={`${item.label}${meta ? `，${meta}` : ""}`}
|
||||
title={meta}
|
||||
onClick={() => onToggleLayer(item.id, !item.visible)}
|
||||
className={cn(
|
||||
"flex min-h-12 w-full items-center gap-2.5 border px-2 py-1.5 text-left transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out motion-reduce:transition-none active:scale-[0.98] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] focus-visible:ring-offset-1",
|
||||
"flex min-h-12 w-full items-center gap-2.5 border px-2 py-1.5 text-left",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
item.visible
|
||||
? "border-[var(--surface-border)]/90 bg-[var(--surface-reading)] text-slate-950 shadow-xs shadow-slate-950/5"
|
||||
: "border-transparent bg-[var(--surface-control)]/55 text-slate-600 [@media(hover:hover)]:hover:border-[var(--surface-divider)] [@media(hover:hover)]:hover:bg-[var(--surface-reading)]/75",
|
||||
disabled && "cursor-not-allowed opacity-55 active:scale-100"
|
||||
: "border-transparent bg-[var(--surface-control)]/55 text-slate-600",
|
||||
mapOptionInteractionVariants({ state: item.visible ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<LayerVisual visual={item.visual} visible={item.visible} />
|
||||
@@ -195,7 +196,7 @@ function LayerVisibilityRow({
|
||||
<span
|
||||
className={cn(
|
||||
"grid h-8 w-8 shrink-0 place-items-center rounded-lg transition-[background-color,color,opacity] duration-150 motion-reduce:transition-none",
|
||||
item.visible ? "bg-[var(--action-soft)] text-[var(--action-blue-hover)]" : "bg-transparent text-[var(--ink-muted)]"
|
||||
item.visible ? "bg-[var(--action-soft)] text-[var(--action-blue-hover)]" : "bg-transparent text-inherit"
|
||||
)}
|
||||
>
|
||||
{item.locked ? <Lock size={15} aria-hidden="true" /> : <Icon size={15} aria-hidden="true" />}
|
||||
@@ -297,18 +298,18 @@ function BaseLayerSection({ options, activeLayerId, onSelectLayer }: BaseLayerSe
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
data-map-option=""
|
||||
disabled={option.disabled}
|
||||
aria-pressed={active}
|
||||
onClick={() => onSelectLayer(option.id)}
|
||||
className={cn(
|
||||
"flex min-h-[76px] flex-col p-1 text-left transition duration-150",
|
||||
"flex min-h-[76px] flex-col p-1 text-left",
|
||||
MAP_READABLE_RADIUS_CLASS_NAME,
|
||||
MAP_SELECTION_CARD_FOCUS_CLASS_NAME,
|
||||
active ? MAP_READABLE_SURFACE_STRONG_CLASS_NAME : MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
active
|
||||
? "border-[var(--action-blue)] text-[var(--action-blue-hover)]"
|
||||
: "text-slate-700 hover:border-[var(--palette-brand)] hover:bg-[var(--action-soft)]/40",
|
||||
option.disabled && "cursor-not-allowed opacity-50"
|
||||
: "text-slate-700",
|
||||
mapOptionInteractionVariants({ state: active ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<BaseLayerSwatch option={option} active={active} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { buttonInteractionVariants } from "@/shared/ui/button-interaction";
|
||||
import { cva } from "class-variance-authority";
|
||||
|
||||
export const MAP_MAJOR_PANEL_RADIUS_CLASS_NAME = "rounded-2xl";
|
||||
|
||||
@@ -28,5 +28,27 @@ export const MAP_READABLE_SURFACE_CLASS_NAME =
|
||||
export const MAP_READABLE_SURFACE_STRONG_CLASS_NAME =
|
||||
"surface-control border";
|
||||
|
||||
export const MAP_CONTROL_HOVER_CLASS_NAME =
|
||||
buttonInteractionVariants({ tone: "neutral" });
|
||||
export const mapOptionInteractionVariants = cva(
|
||||
"map-option-interaction outline-hidden transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-[var(--action-focus-ring)] focus-visible:-outline-offset-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-55 data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
|
||||
{
|
||||
variants: {
|
||||
state: {
|
||||
default: "[@media(hover:hover)]:hover:border-[var(--surface-border)] [@media(hover:hover)]:hover:bg-[var(--surface-reading)] [@media(hover:hover)]:hover:text-[var(--action-blue-hover)] focus-visible:border-[var(--surface-border)] focus-visible:bg-[var(--surface-reading)] focus-visible:text-[var(--action-blue-hover)] data-[highlighted]:border-[var(--surface-border)] data-[highlighted]:bg-[var(--surface-reading)] data-[highlighted]:text-[var(--action-blue-hover)]",
|
||||
selected: "[@media(hover:hover)]:hover:border-[var(--action-border-hover)] focus-visible:border-[var(--action-border-hover)] data-[highlighted]:border-[var(--action-border-hover)]",
|
||||
primary: "[@media(hover:hover)]:hover:border-[var(--action-blue-hover)] [@media(hover:hover)]:hover:bg-[var(--action-blue-hover)] [@media(hover:hover)]:hover:text-white focus-visible:border-[var(--action-blue-hover)] focus-visible:bg-[var(--action-blue-hover)] focus-visible:text-white data-[highlighted]:border-[var(--action-blue-hover)] data-[highlighted]:bg-[var(--action-blue-hover)] data-[highlighted]:text-white",
|
||||
danger: "[@media(hover:hover)]:hover:border-[var(--status-danger-border)] [@media(hover:hover)]:hover:bg-[var(--status-danger-soft)] [@media(hover:hover)]:hover:text-[var(--status-danger-foreground)] focus-visible:border-[var(--status-danger-border)] focus-visible:bg-[var(--status-danger-soft)] focus-visible:text-[var(--status-danger-foreground)] data-[highlighted]:border-[var(--status-danger-border)] data-[highlighted]:bg-[var(--status-danger-soft)] data-[highlighted]:text-[var(--status-danger-foreground)]"
|
||||
}
|
||||
},
|
||||
defaultVariants: { state: "default" }
|
||||
}
|
||||
);
|
||||
|
||||
export const MAP_CONTROL_HOVER_CLASS_NAME = mapOptionInteractionVariants();
|
||||
|
||||
export const MAP_ACTION_ROW_INTERACTION_CLASS_NAME = [
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
"surface-control border border-transparent text-slate-700",
|
||||
// Radix menu items receive focus while the pointer highlights a row.
|
||||
"focus:bg-[var(--surface-reading)] focus:text-[var(--action-blue-hover)]",
|
||||
mapOptionInteractionVariants()
|
||||
].join(" ");
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
|
||||
import { Copy, Ruler, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_RADIUS_CLASS_NAME,
|
||||
@@ -91,16 +92,17 @@ export function MapMeasurePanel({
|
||||
<button
|
||||
key={mode.id}
|
||||
type="button"
|
||||
data-map-option=""
|
||||
aria-pressed={mode.id === activeModeId}
|
||||
disabled={mode.disabled}
|
||||
onClick={() => onSelectMode?.(mode.id)}
|
||||
className={cn(
|
||||
"flex h-10 min-w-0 touch-manipulation items-center justify-center gap-1.5 px-2 text-xs font-semibold transition-[color,background-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--action-focus-offset)] active:scale-95 motion-reduce:transition-none",
|
||||
"flex h-10 min-w-0 touch-manipulation items-center justify-center gap-1.5 border border-transparent px-2 text-xs font-semibold",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
mode.id === activeModeId
|
||||
? "bg-[var(--action-blue)] text-white shadow-[var(--action-shadow-primary)]"
|
||||
: "text-slate-600 [@media(hover:hover)]:hover:bg-[var(--surface-reading)]/85 [@media(hover:hover)]:hover:text-[var(--action-blue-hover)]",
|
||||
mode.disabled && "cursor-not-allowed opacity-45 active:scale-100"
|
||||
: "text-slate-600",
|
||||
mapOptionInteractionVariants({ state: mode.id === activeModeId ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
<mode.icon size={15} strokeWidth={2} aria-hidden="true" className="shrink-0" />
|
||||
@@ -134,14 +136,16 @@ export function MapMeasurePanel({
|
||||
<button
|
||||
key={unit.id}
|
||||
type="button"
|
||||
data-map-option=""
|
||||
aria-pressed={unit.id === activeUnitId}
|
||||
onClick={() => onSelectUnit?.(unit.id)}
|
||||
className={cn(
|
||||
"h-10 min-w-10 touch-manipulation px-2 text-xs font-semibold transition-[color,background-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--action-focus-offset)] active:scale-95 motion-reduce:transition-none",
|
||||
"h-10 min-w-10 touch-manipulation border border-transparent px-2 text-xs font-semibold",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
unit.id === activeUnitId
|
||||
? "bg-[var(--action-blue)] text-white shadow-[var(--action-shadow-primary)]"
|
||||
: "text-slate-600 [@media(hover:hover)]:hover:bg-[var(--surface-reading)]/85 [@media(hover:hover)]:hover:text-[var(--action-blue-hover)]"
|
||||
: "text-slate-600",
|
||||
mapOptionInteractionVariants({ state: unit.id === activeUnitId ? "selected" : "default" })
|
||||
)}
|
||||
>
|
||||
{unit.label}
|
||||
@@ -228,28 +232,27 @@ function MeasureActionButton({
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-map-option=""
|
||||
title={action.description}
|
||||
data-state={active ? "active" : undefined}
|
||||
disabled={action.disabled}
|
||||
onClick={action.onClick}
|
||||
className={cn(
|
||||
"flex w-full touch-manipulation items-center gap-2 font-semibold transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--action-focus-offset)] active:scale-[0.98] motion-reduce:transition-none",
|
||||
"flex w-full touch-manipulation items-center gap-2 font-semibold",
|
||||
primary ? "h-12 justify-start border px-2.5 text-sm" : "h-10 justify-center border text-xs",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
primary
|
||||
? active
|
||||
? "border-[var(--palette-brand)] bg-[var(--surface-reading)] text-slate-950 shadow-[0_3px_10px_rgba(37,99,235,0.14)] ring-1 ring-inset ring-[var(--surface-border)] [@media(hover:hover)]:hover:border-[var(--palette-brand)] [@media(hover:hover)]:hover:bg-[var(--action-soft)]/70"
|
||||
: action.variant === "primary"
|
||||
? "border-[var(--surface-divider)] bg-[var(--surface-reading)]/90 text-slate-900 shadow-xs [@media(hover:hover)]:hover:border-[var(--surface-border)] [@media(hover:hover)]:hover:bg-[var(--surface-reading)]"
|
||||
: "border-slate-800 bg-slate-800 text-white shadow-xs [@media(hover:hover)]:hover:border-slate-900 [@media(hover:hover)]:hover:bg-slate-900"
|
||||
? "border-[var(--palette-brand)] bg-[var(--surface-reading)] text-slate-950 shadow-[0_3px_10px_rgba(37,99,235,0.14)] ring-1 ring-inset ring-[var(--surface-border)]"
|
||||
: "border-[var(--action-blue)] bg-[var(--action-blue)] text-white shadow-xs"
|
||||
: cn(
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
danger
|
||||
? "text-red-600 [@media(hover:hover)]:hover:border-red-200 [@media(hover:hover)]:hover:bg-red-50"
|
||||
: "text-slate-700 [@media(hover:hover)]:hover:border-[var(--surface-border)] [@media(hover:hover)]:hover:text-[var(--action-blue-hover)]"
|
||||
? "text-[var(--status-danger-foreground)]"
|
||||
: "text-slate-700"
|
||||
),
|
||||
action.disabled &&
|
||||
"cursor-not-allowed opacity-45 shadow-none active:scale-100 [@media(hover:hover)]:hover:border-[var(--surface-divider)] [@media(hover:hover)]:hover:bg-transparent [@media(hover:hover)]:hover:text-slate-700"
|
||||
mapOptionInteractionVariants({ state: danger ? "danger" : active ? "selected" : primary ? "primary" : "default" }),
|
||||
action.disabled && "shadow-none"
|
||||
)}
|
||||
>
|
||||
{primary ? (
|
||||
@@ -258,7 +261,7 @@ function MeasureActionButton({
|
||||
"grid h-8 w-8 shrink-0 place-items-center rounded-lg",
|
||||
active
|
||||
? "bg-[var(--action-blue)] text-white"
|
||||
: "bg-[var(--surface-reading)] text-slate-700 ring-1 ring-inset ring-[var(--surface-divider)]"
|
||||
: "bg-[var(--surface-reading)]/16 text-white"
|
||||
)}
|
||||
>
|
||||
<Icon size={15} strokeWidth={2.2} aria-hidden="true" />
|
||||
@@ -269,7 +272,7 @@ function MeasureActionButton({
|
||||
{primary ? (
|
||||
<span className="min-w-0 flex-1 text-left">
|
||||
<span className="block truncate text-sm font-semibold leading-4">{action.label}</span>
|
||||
<span className="mt-0.5 block truncate text-[10px] font-medium leading-3 text-[var(--ink-muted)]">
|
||||
<span className={cn("mt-0.5 block truncate text-[10px] font-medium leading-3", active ? "text-[var(--ink-muted)]" : "text-white/85")}>
|
||||
{action.description}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
} from "@/shared/ui/tooltip";
|
||||
import {
|
||||
MAP_CONTROL_HOVER_CLASS_NAME,
|
||||
mapOptionInteractionVariants,
|
||||
MAP_CONTROL_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_CONTROL_SURFACE_CLASS_NAME
|
||||
@@ -70,9 +71,9 @@ export function MapToolbar({
|
||||
"relative grid h-10 w-10 shrink-0 place-items-center border border-transparent text-slate-700",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
tool.active
|
||||
? "border-[var(--action-blue)] bg-[var(--action-blue)] text-white shadow-[var(--action-shadow-primary)]"
|
||||
? cn("border-[var(--action-blue)] bg-[var(--action-blue)] text-white shadow-[var(--action-shadow-primary)]", mapOptionInteractionVariants({ state: "selected" }))
|
||||
: MAP_CONTROL_HOVER_CLASS_NAME,
|
||||
tool.disabled && "text-[var(--ink-muted)] opacity-45 hover:bg-transparent hover:text-[var(--ink-muted)] hover:ring-0"
|
||||
tool.disabled && "text-[var(--ink-muted)] opacity-45"
|
||||
)}
|
||||
>
|
||||
<Icon size={20} strokeWidth={2.15} aria-hidden="true" />
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
} from "./camera-actions";
|
||||
import {
|
||||
MAP_CONTROL_HOVER_CLASS_NAME,
|
||||
mapOptionInteractionVariants,
|
||||
MAP_CONTROL_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_CONTROL_SURFACE_CLASS_NAME
|
||||
@@ -158,9 +159,9 @@ function ControlButton({
|
||||
"grid h-10 w-10 place-items-center border border-transparent",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
"bg-transparent text-slate-700",
|
||||
MAP_CONTROL_HOVER_CLASS_NAME,
|
||||
pressed ? mapOptionInteractionVariants({ state: "selected" }) : MAP_CONTROL_HOVER_CLASS_NAME,
|
||||
pressed && "bg-[var(--action-soft)] text-[var(--action-blue-hover)]",
|
||||
disabled && "text-[var(--ink-muted)] opacity-45 hover:bg-transparent hover:text-[var(--ink-muted)]"
|
||||
disabled && "text-[var(--ink-muted)] opacity-45"
|
||||
)}
|
||||
>
|
||||
{Icon ? <Icon size={18} strokeWidth={2.2} aria-hidden="true" /> : content}
|
||||
|
||||
@@ -29,6 +29,8 @@ export {
|
||||
export { MapLayerPanel, type MapLayerPanelProps } from "./components/layer-panel";
|
||||
export { MapLegend, MapLegendList, MapLegendSwatch, type MapLegendItem } from "./components/legend";
|
||||
export {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_ACTION_ROW_INTERACTION_CLASS_NAME,
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_CONTROL_HOVER_CLASS_NAME,
|
||||
MAP_CONTROL_RADIUS_CLASS_NAME,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ChevronDown, Crosshair, LocateFixed, MapPin, Search, Trash2 } from "lucide-react";
|
||||
import { useId, useLayoutEffect, useRef } from "react";
|
||||
import { mapOptionInteractionVariants } from "@/features/map/core";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
@@ -8,7 +9,7 @@ import { MAX_PLACE_SEARCH_RESULTS, type PlaceSearchItem } from "../api/place-sea
|
||||
|
||||
const RESULT_VIEWPORT_CLASS_NAME = "h-72 min-h-0 max-h-72 overflow-y-auto overscroll-contain pr-1 [scrollbar-gutter:stable] [scrollbar-width:thin]";
|
||||
|
||||
function PlaceSummary({ item, index, annotation = item.district }: { item: PlaceSearchItem; index?: number; annotation?: string }) {
|
||||
function PlaceSummary({ item, index, annotation = item.district, interactive = false }: { item: PlaceSearchItem; index?: number; annotation?: string; interactive?: boolean }) {
|
||||
return (
|
||||
<>
|
||||
{index !== undefined ? <span aria-hidden="true" className="w-5 shrink-0 self-start text-center text-[11px] font-normal leading-5 tabular-nums text-[var(--ink-muted)]">
|
||||
@@ -16,7 +17,7 @@ function PlaceSummary({ item, index, annotation = item.district }: { item: Place
|
||||
</span> : null}
|
||||
<span className="min-w-0 flex-1 space-y-1">
|
||||
<span className="flex items-start justify-between gap-2 leading-5">
|
||||
<span className="min-w-0 flex-1 break-words font-semibold text-[var(--ink)]">{item.name}</span>
|
||||
<span className={cn("min-w-0 flex-1 break-words font-semibold", !interactive && "text-[var(--ink)]")}>{item.name}</span>
|
||||
<span aria-label={index === undefined && item.category ? `地点类型：${item.category}` : undefined} className="max-w-[40%] shrink-0 break-words text-right text-[11px] font-normal text-[var(--ink-muted)]">{annotation}</span>
|
||||
</span>
|
||||
<span className="block break-words text-[11px] font-normal leading-4 text-[var(--ink-muted)]">{item.address}</span>
|
||||
@@ -123,16 +124,17 @@ export function GeocodingPanel({ geocoding }: { geocoding: WorkbenchGeocoding })
|
||||
{!selectionCollapsed ? <ul ref={candidateListRef} aria-busy={pending} className={cn(RESULT_VIEWPORT_CLASS_NAME, "bg-transparent", pending && "opacity-60")}>
|
||||
{results.items.map((item, index) => (
|
||||
<li key={item.id} className="border-b border-[var(--surface-divider)] last:border-b-0">
|
||||
<Button type="button" variant="ghost" aria-pressed={result?.id === item.id} data-selection-tone="soft"
|
||||
<button type="button" aria-pressed={result?.id === item.id}
|
||||
aria-label={`定位 ${item.name} ${item.address}`} disabled={pending || !enabled}
|
||||
className={cn("h-auto min-h-16 w-full justify-start gap-3 rounded-lg border-0 whitespace-normal px-1 py-3 text-left text-xs focus-visible:ring-inset focus-visible:ring-offset-0 [@media(hover:hover)]:hover:bg-[var(--surface-control)] [@media(hover:hover)]:hover:text-[var(--ink)]",
|
||||
result?.id === item.id && "bg-[var(--action-selection-soft)] text-[var(--action-blue-hover)] [&_span]:text-[var(--action-blue-hover)] [@media(hover:hover)]:hover:bg-[var(--action-selection-soft)]")}
|
||||
className={cn("flex min-h-16 w-full items-center justify-start gap-3 rounded-xl border border-transparent whitespace-normal px-1 py-3 text-left text-xs text-[var(--ink)]",
|
||||
mapOptionInteractionVariants({ state: result?.id === item.id ? "selected" : "default" }),
|
||||
result?.id === item.id && "border-[var(--action-selection-border)] bg-[var(--action-selection-soft)] text-[var(--action-blue-hover)]")}
|
||||
onClick={(event) => {
|
||||
geocoding.select(item.id);
|
||||
if (event.detail === 0) window.requestAnimationFrame(() => changeSelectionRef.current?.focus());
|
||||
}}>
|
||||
<PlaceSummary item={item} index={index} />
|
||||
</Button>
|
||||
<PlaceSummary item={item} index={index} interactive />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul> : null}
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
|
||||
import { Check, FileText, X } from "lucide-react";
|
||||
import { AgentChartView } from "@/features/agent";
|
||||
import { formatChartDisplayText } from "@/shared/utils/date-time-text";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/shared/ui/card";
|
||||
import { FloatingWindow } from "@/shared/ui/floating-window";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui/select";
|
||||
import type { InvestigationChartGroup as ChartGroup } from "../utils/investigation-chart-groups";
|
||||
|
||||
export function InvestigationChartGroup({ group, reviewing, onCloseChart, references, tracked = true, tile = false }: {
|
||||
group: ChartGroup;
|
||||
tracked?: boolean;
|
||||
tile?: boolean;
|
||||
reviewing: boolean;
|
||||
onCloseChart: (id: string) => void;
|
||||
references: (ids: string[]) => ReactNode;
|
||||
}) {
|
||||
const card = useRef<HTMLDivElement>(null);
|
||||
const [plotHeight, setPlotHeight] = useState(220);
|
||||
useLayoutEffect(() => {
|
||||
if (tile) return;
|
||||
const viewport = card.current?.closest<HTMLElement>("[data-investigation-content]");
|
||||
if (!viewport || typeof ResizeObserver === "undefined") return;
|
||||
const resize = () => setPlotHeight(Math.max(120, Math.min(220, viewport.clientHeight - 24)));
|
||||
resize();
|
||||
const observer = new ResizeObserver(resize);
|
||||
observer.observe(viewport);
|
||||
return () => observer.disconnect();
|
||||
}, [tile]);
|
||||
const [selectedId, setSelectedId] = useState(group.items[0].command.chart_id);
|
||||
const selected = group.items.find((item) => item.command.chart_id === selectedId) ?? group.items[0];
|
||||
const multiple = group.items.length > 1;
|
||||
const title = formatChartDisplayText(multiple ? group.title : selected.command.chart.title);
|
||||
const objectButtons = (compact = false) => <aside aria-label="选择图表对象"
|
||||
className={compact ? "hidden min-h-0 min-w-0 overflow-auto border-l border-border pl-2 @min-[420px]:block" : "min-h-0 min-w-0 overflow-auto border-t border-border pt-3 @min-[560px]:border-t-0 @min-[560px]:border-l @min-[560px]:pl-3 @min-[560px]:pt-0"}>
|
||||
<div className={`${compact ? "mb-1" : "mb-2"} flex items-center justify-between text-[11px] text-muted-foreground`}>
|
||||
<span>监测对象</span><span className="tabular-nums">{group.items.length} 个</span>
|
||||
</div>
|
||||
<div className={compact ? "grid grid-cols-1 gap-1" : "grid grid-cols-2 gap-2 @min-[560px]:grid-cols-1"}>
|
||||
{group.items.map((item) => <Button key={item.command.chart_id} type="button" variant="outline" size="sm"
|
||||
aria-label={`切换对象 ${item.label}`} aria-pressed={selected.command.chart_id === item.command.chart_id}
|
||||
className={`h-auto ${compact ? "min-h-8 gap-1.5 px-2 py-1" : "min-h-10 gap-2 px-3 py-2"} min-w-0 justify-start whitespace-normal text-left font-normal after:inset-0 aria-pressed:border-primary aria-pressed:bg-accent aria-pressed:text-accent-foreground`}
|
||||
onClick={() => setSelectedId(item.command.chart_id)}>
|
||||
<span className={`size-2 shrink-0 rounded-full ${selected.command.chart_id === item.command.chart_id ? "bg-primary" : "bg-muted-foreground/50"}`} aria-hidden />
|
||||
<span className="min-w-0 flex-1 break-words tabular-nums">{item.label}</span>
|
||||
{selected.command.chart_id === item.command.chart_id ? <Check size={14} aria-hidden /> : null}
|
||||
</Button>)}
|
||||
</div>
|
||||
</aside>;
|
||||
const content = (expanded: boolean, compact = false) => compact ? <div className="@container flex h-full min-h-0 min-w-0 flex-col gap-1">
|
||||
{multiple ? <div className="shrink-0 @min-[420px]:hidden">
|
||||
<Select value={selected.command.chart_id} onValueChange={setSelectedId}>
|
||||
<SelectTrigger aria-label="选择图表对象" className="h-7 text-xs"><SelectValue /></SelectTrigger>
|
||||
<SelectContent className="workbench-shadcn-surface z-[90]">{group.items.map((item) => <SelectItem key={item.command.chart_id} value={item.command.chart_id}>{item.label}</SelectItem>)}</SelectContent>
|
||||
</Select>
|
||||
</div> : null}
|
||||
<div className={`grid min-h-0 min-w-0 flex-1 grid-cols-1 grid-rows-1 gap-2 ${multiple ? "@min-[420px]:grid-cols-[minmax(0,1fr)_128px]" : ""}`}>
|
||||
<div className="flex min-h-0 min-w-0 flex-col"><AgentChartView key={selected.command.chart_id} chart={selected.command.chart} embedded expanded tile /></div>
|
||||
{multiple ? objectButtons(true) : null}
|
||||
</div>
|
||||
</div> : <div className={`@container min-w-0 ${expanded ? "flex h-full min-h-0 flex-col" : ""}`}>
|
||||
<div className={`grid min-w-0 grid-cols-1 gap-3 ${expanded ? multiple ? "flex-none @min-[560px]:min-h-0 @min-[560px]:flex-1" : "min-h-0 flex-1 grid-rows-1" : ""} ${multiple ? "@min-[560px]:grid-cols-[minmax(0,1fr)_176px] @min-[560px]:grid-rows-1" : ""}`}>
|
||||
<div className={`min-w-0 ${expanded ? `flex min-h-0 flex-col ${multiple ? "h-[480px] @min-[560px]:h-full" : "h-full"}` : ""}`}>
|
||||
{multiple ? <p className="mb-1 shrink-0 text-xs font-medium tabular-nums">{selected.label}<span className="ml-2 font-normal text-muted-foreground">{selected.command.chart.x_data[0]} 至 {selected.command.chart.x_data.at(-1)}</span></p> : null}
|
||||
<AgentChartView key={selected.command.chart_id} chart={selected.command.chart} embedded expanded={expanded} tile={false} plotHeight={plotHeight} />
|
||||
</div>
|
||||
{multiple ? objectButtons() : null}
|
||||
</div>
|
||||
{selected.command.evidence_refs.length ? <div className={expanded ? "max-h-[20%] shrink-0 overflow-auto" : undefined}>{references(selected.command.evidence_refs)}</div> : null}
|
||||
</div>;
|
||||
return <Card ref={card} data-investigation-chart={tracked ? group.items[0].command.chart_id : undefined} data-chart-group-tile={tile || undefined}
|
||||
role="group" aria-label={title} className={`relative min-w-0 border-border shadow-none ${tile ? "flex h-full min-h-0 flex-col overflow-hidden" : ""}`}>
|
||||
{tracked ? group.items.slice(1).map((item) => <span key={item.command.chart_id} data-investigation-chart={item.command.chart_id} className="pointer-events-none absolute inset-0" />) : null}
|
||||
<CardHeader className={`flex-row items-start justify-between gap-2 space-y-0 ${tile ? "shrink-0 px-2 py-1.5" : "p-3 pb-2"}`}>
|
||||
<div className="min-w-0">
|
||||
<h3 className={`break-words text-xs font-semibold [overflow-wrap:anywhere] ${tile ? "leading-4" : "leading-5"}`}>{title}</h3>
|
||||
{!tile ? <p className="mt-1 text-[11px] text-muted-foreground">{multiple ? `${group.items.length} 个对象 · 点击切换 · ` : ""}{selected.command.chart.series.some((series) => series.type === "scatter") ? "折线与历史散点" : selected.command.chart.chart_type === "bar" ? "柱状图" : "折线图"} · {selected.command.chart.x_data.length} 个{selected.command.chart.chart_type === "bar" ? "类别" : "时间点"}</p> : null}
|
||||
</div>
|
||||
<div className={`flex shrink-0 items-center gap-1 ${tile ? "[&>button]:size-6" : ""}`}>
|
||||
{tile && selected.command.evidence_refs.length ? <Popover><PopoverTrigger asChild><Button type="button" variant="ghost" size="icon-sm" aria-label={`查看图表依据 ${title}`} title="查看图表依据"><FileText size={14} aria-hidden /></Button></PopoverTrigger>
|
||||
<PopoverContent align="end" className="workbench-shadcn-surface z-[90] max-h-72 overflow-auto p-2">{references(selected.command.evidence_refs)}</PopoverContent>
|
||||
</Popover> : null}
|
||||
<FloatingWindow title={title} fillContent>{() => content(true)}</FloatingWindow>
|
||||
<Button type="button" variant="ghost" size="icon-sm" disabled={reviewing} aria-label={`关闭图表 ${title}`}
|
||||
onClick={() => group.items.forEach((item) => onCloseChart(item.command.chart_id))}><X size={14} aria-hidden /></Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className={tile ? "flex min-h-0 flex-1 flex-col px-2 pb-2 pt-0" : "px-3 pb-2 pt-0"}>
|
||||
{content(tile, tile)}
|
||||
</CardContent>
|
||||
</Card>;
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
|
||||
import { DragDropProvider, DragOverlay, type DragEndEvent } from "@dnd-kit/react";
|
||||
import { Columns2, GripVertical, LayoutGrid, LocateFixed, RotateCcw, Square } from "lucide-react";
|
||||
import { AnswerUiView, type AnswerUiBlock } from "@/features/agent";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { FloatingWindow } from "@/shared/ui/floating-window";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui/select";
|
||||
import { formatChartDisplayText } from "@/shared/utils/date-time-text";
|
||||
import { useChartWindowLayout } from "../hooks/use-chart-window-layout";
|
||||
import type { InvestigationChartGroup } from "../utils/investigation-chart-groups";
|
||||
import { presentationChartBlocks } from "../utils/presentation-chart-blocks";
|
||||
import { InvestigationChartGroup as ChartGroup } from "./investigation-chart-group";
|
||||
import { ChartDropSlot, ManagedChartSlot } from "./investigation-chart-slot";
|
||||
|
||||
type ManagedChart = { id: string; title: string } & ({ group: InvestigationChartGroup; block?: never } | { block: AnswerUiBlock; group?: never });
|
||||
const layouts = [{ id: "one", label: "单图布局", icon: Square }, { id: "two", label: "左右布局", icon: Columns2 }, { id: "four", label: "四宫格布局", icon: LayoutGrid }] as const;
|
||||
|
||||
export function InvestigationChartManager({ groups, blocks, autoOpen, taskTitle, reviewing, onCloseChart, references }: {
|
||||
groups: InvestigationChartGroup[];
|
||||
blocks: AnswerUiBlock[];
|
||||
/** Transient live intent, never derived from restored chart data or history. */
|
||||
autoOpen: boolean;
|
||||
taskTitle: string;
|
||||
reviewing: boolean;
|
||||
onCloseChart: (id: string) => void;
|
||||
references: (ids: string[]) => ReactNode;
|
||||
}) {
|
||||
const entries = useMemo<ManagedChart[]>(() => [
|
||||
...groups.map((group) => ({ id: `command:${group.id}`, title: formatChartDisplayText(group.title), group })),
|
||||
...presentationChartBlocks(blocks).map((block) => ({ id: `report:${block.block_id}`, title: formatChartDisplayText(String(block.spec.elements[block.spec.root].props.title)), block }))
|
||||
], [groups, blocks]);
|
||||
const titles = useMemo(() => new Map(entries.map(({ id, title }) => [id, title])), [entries]);
|
||||
const arrangement = useChartWindowLayout(entries.map(({ id }) => id));
|
||||
const { layout, slots, columns } = arrangement;
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [located, setLocated] = useState<{ id: string } | null>(null);
|
||||
const [announcement, setAnnouncement] = useState("");
|
||||
const cards = useRef(new Map<string, HTMLElement>());
|
||||
const pendingLocation = useRef<string | null>(null);
|
||||
const helpId = useId();
|
||||
useEffect(() => {
|
||||
if (!located) return;
|
||||
const timer = window.setTimeout(() => setLocated(null), 1600);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [located]);
|
||||
const move = (id: string, target: number) => {
|
||||
arrangement.move(id, target);
|
||||
setAnnouncement(`${titles.get(id)}，已移至位置 ${target + 1}`);
|
||||
};
|
||||
const drop = (event: DragEndEvent) => {
|
||||
const { source, target } = event.operation;
|
||||
if (!event.canceled && source && target && typeof target.data.slot === "number") move(String(source.id), target.data.slot);
|
||||
};
|
||||
const count = entries.length;
|
||||
return <span className="inline-flex shrink-0 [&>button]:w-8 [&>button]:px-0 @min-[340px]:[&>button]:w-auto @min-[340px]:[&>button]:px-2">
|
||||
<FloatingWindow title="图表管理" navigationTitle={`${taskTitle} · 图表管理`} triggerLabel="打开图表管理" triggerContent={<span className="hidden @min-[340px]:inline">图表窗口 <span className="tabular-nums">{count}</span></span>}
|
||||
initialSize={{ width: 1120, height: 760 }} fillContent
|
||||
// A session gets one automatic request. Updates never revoke a user's dismissal.
|
||||
openRequestKey={autoOpen ? "live-charts" : undefined}>
|
||||
{() => <section ref={arrangement.containerRef} aria-label="全部图表" className="@container flex h-full min-h-0 min-w-0 flex-col gap-2">
|
||||
<div className="shrink-0 space-y-2 border-b border-border pb-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1"><p className="break-words text-sm font-medium">{taskTitle}</p><p className="mt-1 text-xs text-muted-foreground">{reviewing ? "历史回看" : "当前结果"} · 拖到固定位置交换，支持单图放大</p></div>
|
||||
<span className="shrink-0 text-xs text-muted-foreground tabular-nums">{count} 张图表</span>
|
||||
</div>
|
||||
<div role="toolbar" aria-label="图表管理工具" className="flex min-w-0 flex-wrap items-center gap-1 rounded-lg bg-muted/50 p-1">
|
||||
<Select value="" onValueChange={(id) => { setLocated({ id }); pendingLocation.current = id; }} disabled={!count}>
|
||||
<SelectTrigger aria-label="快速定位图表" className="h-8 w-auto min-w-0 max-w-72 flex-[1_1_160px] gap-2 border-transparent bg-transparent px-2 text-xs shadow-none [--field-focus-border:transparent] hover:bg-background/70 focus-visible:ring-1 focus-visible:ring-border [&>span]:flex-1 [&>span]:truncate [&>span]:text-left"><LocateFixed size={14} className="shrink-0" aria-hidden /><SelectValue placeholder="快速定位图表" /></SelectTrigger>
|
||||
<SelectContent position="popper" className="workbench-shadcn-surface z-[90] max-w-[calc(100vw-24px)]"
|
||||
onCloseAutoFocus={(event) => {
|
||||
const id = pendingLocation.current;
|
||||
pendingLocation.current = null;
|
||||
const card = id ? cards.current.get(id) : undefined;
|
||||
if (card) {
|
||||
event.preventDefault();
|
||||
card.scrollIntoView({ block: "start", inline: "nearest", behavior: "auto" });
|
||||
card.focus({ preventScroll: true });
|
||||
}
|
||||
}}>
|
||||
{slots.map((id, index) => id ? <SelectItem key={id} value={id} className="whitespace-normal text-xs [&>span:last-child]:break-words">位置 {index + 1} · {titles.get(id)}</SelectItem> : null)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="ml-auto flex shrink-0 items-center gap-1">
|
||||
<div role="group" aria-label="图表排列方式" className="flex items-center gap-1">
|
||||
{layouts.map(({ id, label, icon: Icon }) => <Button key={id} type="button" variant={layout === id ? "secondary" : "ghost"} size="icon-sm"
|
||||
aria-label={label} title={label} aria-pressed={layout === id} onClick={() => arrangement.setLayout(id)}><Icon size={14} aria-hidden /></Button>)}
|
||||
</div>
|
||||
<span className="inline-flex border-l border-border pl-1">
|
||||
<Button type="button" variant="ghost" size="sm" className="h-8 gap-1.5 px-2 text-xs" aria-label="重置图表排列" disabled={!count}
|
||||
onClick={() => { arrangement.reset(); scrollRef.current?.scrollTo({ top: 0, behavior: "instant" }); setAnnouncement("已恢复默认图表位置"); }}><RotateCcw size={14} aria-hidden />重置</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p id={helpId} className="sr-only">拖动整条位置栏到目标位置可交换图表。向下滚动查看全部图表，也可快速定位。</p>
|
||||
<p role="status" aria-live="polite" className="sr-only">{announcement}</p>
|
||||
<DragDropProvider onDragEnd={drop}>
|
||||
<div ref={scrollRef} tabIndex={0} aria-label="图表滚动区" className="min-h-0 flex-1 overflow-auto overscroll-contain p-0.5" style={{ containerType: "size", scrollbarGutter: "stable" }} data-chart-manager-scroll="">
|
||||
{count ? <div data-chart-layout={layout} className={`isolate grid min-h-full min-w-0 content-start gap-3 ${layout === "four" ? "grid-cols-2 auto-rows-[max(256px,calc((100cqh-12px)/2))]" : layout === "two" ? "grid-cols-2 auto-rows-[max(256px,100cqh)]" : "grid-cols-1 auto-rows-[max(256px,100cqh)]"}`}>
|
||||
{slots.map((id, index) => <ChartDropSlot key={index} index={index} columns={columns} occupied={Boolean(id)} />)}
|
||||
{entries.map((entry) => {
|
||||
const index = slots.indexOf(entry.id);
|
||||
return <ManagedChartSlot key={entry.id} id={entry.id} title={entry.title} index={index} columns={columns}
|
||||
located={located?.id === entry.id} helpId={helpId}
|
||||
register={(id, node) => { if (node) cards.current.set(id, node); else cards.current.delete(id); }}>
|
||||
{entry.group ? <ChartGroup group={entry.group} tile tracked={false} reviewing={reviewing} onCloseChart={onCloseChart} references={references} /> : <AnswerUiView block={entry.block} chartPresentation="tile" disabled={reviewing} />}
|
||||
</ManagedChartSlot>;
|
||||
})}
|
||||
</div> : <p role="status" className="py-8 text-center text-sm text-muted-foreground">当前没有图表，新的图表将在这里更新。</p>}
|
||||
</div>
|
||||
<DragOverlay dropAnimation={null} style={{ position: "absolute", zIndex: 100 }}>
|
||||
{(source) => <div data-chart-drag-preview="" className="workbench-shadcn-surface flex max-w-80 items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs text-foreground shadow-xs"><GripVertical size={14} className="shrink-0 text-muted-foreground" aria-hidden /><span className="min-w-0 break-words">{String(source.data.title)}</span></div>}
|
||||
</DragOverlay>
|
||||
</DragDropProvider>
|
||||
</section>}
|
||||
</FloatingWindow>
|
||||
</span>;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { useDraggable, useDroppable } from "@dnd-kit/react";
|
||||
import { pointerIntersection } from "@dnd-kit/collision";
|
||||
import { GripVertical } from "lucide-react";
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
|
||||
function chartSlotPosition(index: number, columns: number): CSSProperties {
|
||||
return { gridRow: Math.floor(index / columns) + 1, gridColumn: index % columns + 1 };
|
||||
}
|
||||
|
||||
export function ChartDropSlot({ index, columns, occupied }: { index: number; columns: number; occupied: boolean }) {
|
||||
const { ref, isDropTarget } = useDroppable({ id: `slot:${index}`, type: "slot", accept: "chart", data: { slot: index }, collisionDetector: pointerIntersection });
|
||||
return <div ref={ref} data-chart-slot={index} style={chartSlotPosition(index, columns)}
|
||||
className={`pointer-events-none relative flex min-h-0 min-w-0 items-center justify-center rounded-xl border border-dashed ${isDropTarget ? "z-10 border-primary/40 bg-primary/5 ring-1 ring-primary/15 ring-inset" : occupied ? "border-transparent" : "border-border bg-muted/20"}`}>
|
||||
{!occupied ? <p className="text-center text-xs leading-6 text-muted-foreground"><span className="block tabular-nums">位置 {index + 1}</span>拖动图表到这里</p> : null}
|
||||
</div>;
|
||||
}
|
||||
|
||||
/** The chart stays under the same grid parent when its CSS position changes. */
|
||||
export function ManagedChartSlot({ id, title, index, columns, located, helpId, register, children }: {
|
||||
id: string;
|
||||
title: string;
|
||||
index: number;
|
||||
columns: number;
|
||||
located: boolean;
|
||||
helpId: string;
|
||||
register: (id: string, element: HTMLElement | null) => void;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const { ref, handleRef, isDragSource } = useDraggable({ id, type: "chart", data: { title } });
|
||||
return <article ref={(node) => { ref(node); register(id, node); }} tabIndex={-1}
|
||||
data-managed-chart={id} data-chart-title={title} data-slot-index={index} data-chart-located={located} data-chart-dragging={isDragSource}
|
||||
aria-label={`图表窗口 ${title}`} style={chartSlotPosition(index, columns)}
|
||||
className="group/chart-slot relative z-0 flex min-h-0 min-w-0 flex-col rounded-xl outline-hidden">
|
||||
<div className={`flex h-9 shrink-0 items-center rounded-lg ${located ? "bg-primary/10" : ""}`}>
|
||||
<button ref={handleRef} type="button" data-slot="button" className={`flex h-full w-full touch-none select-none items-center justify-start gap-1 rounded-lg border border-transparent px-2 text-xs font-normal outline-hidden focus-visible:outline-1 focus-visible:outline-ring focus-visible:-outline-offset-1 active:cursor-grabbing ${isDragSource ? "cursor-grabbing bg-muted text-foreground" : "cursor-grab bg-transparent text-muted-foreground [@media(hover:hover)]:hover:bg-muted/70 [@media(hover:hover)]:hover:text-foreground"}`}
|
||||
aria-label={`拖动图表 ${title}`} aria-describedby={helpId}>
|
||||
<GripVertical size={14} aria-hidden /><span className="tabular-nums">位置 {index + 1}</span>
|
||||
{located ? <span aria-hidden="true" className="ml-auto shrink-0 text-xs font-medium text-primary">已定位</span> : null}
|
||||
</button>
|
||||
</div>
|
||||
<div className="min-h-0 min-w-0 flex-1">{children}</div>
|
||||
<div aria-hidden="true" data-chart-hover-highlight="" className={`pointer-events-none absolute inset-0 z-10 rounded-xl bg-primary/[0.04] ${isDragSource ? "opacity-100" : "opacity-0 [@media(hover:hover)]:group-hover/chart-slot:opacity-100"}`} />
|
||||
</article>;
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useId, useState } from "react";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import { ChevronDown, Eye, EyeOff, LocateFixed, MapPinned, Pause, X } from "lucide-react";
|
||||
import { AgentChartView, type AnswerUiBlock } from "@/features/agent";
|
||||
import { formatChartDisplayText } from "@/shared/utils/date-time-text";
|
||||
import { ChevronDown, Eye, EyeOff, LocateFixed, MapPinned, Pause } from "lucide-react";
|
||||
import type { AnswerUiBlock } from "@/features/agent";
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/shared/ui/card";
|
||||
@@ -19,7 +18,9 @@ import type { OperationalTask } from "../api/operational-task-client";
|
||||
import type { InvestigationOverlay } from "../api/investigation-presentation";
|
||||
import type { InvestigationChart } from "../hooks/use-investigation-presentation";
|
||||
|
||||
import { FloatingWindow } from "@/shared/ui/floating-window";
|
||||
import { InvestigationChartManager } from "./investigation-chart-manager";
|
||||
import { InvestigationChartGroup } from "./investigation-chart-group";
|
||||
import { groupInvestigationCharts } from "../utils/investigation-chart-groups";
|
||||
import { PresentationHistorySwitcher } from "./presentation-history-switcher";
|
||||
import { PresentationBusinessResults } from "./presentation-business-results";
|
||||
import type { PresentationHistoryControls } from "../utils/presentation-view-history";
|
||||
@@ -36,6 +37,8 @@ type Props = {
|
||||
task: OperationalTask | null;
|
||||
localPreview?: boolean;
|
||||
charts: InvestigationChart[];
|
||||
chartWindowAutoOpen?: boolean;
|
||||
chartWindowScope?: string;
|
||||
overlay: InvestigationOverlay | null;
|
||||
cameraPaused: boolean;
|
||||
status: "connecting" | "live" | "history" | "disconnected" | "error";
|
||||
@@ -68,6 +71,8 @@ export function InvestigationPresentationPanel({
|
||||
onLocateTargets,
|
||||
localPreview = false,
|
||||
charts,
|
||||
chartWindowAutoOpen = false,
|
||||
chartWindowScope,
|
||||
overlay,
|
||||
cameraPaused,
|
||||
status,
|
||||
@@ -80,13 +85,13 @@ export function InvestigationPresentationPanel({
|
||||
onFitOverlay,
|
||||
onToggleLayer
|
||||
}: Props) {
|
||||
const chartGroups = groupInvestigationCharts(charts);
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [keyboardAction, setKeyboardAction] = useState(false);
|
||||
const reducedMotion = useReducedMotion();
|
||||
const immediate = Boolean(reducedMotion) || keyboardAction;
|
||||
const contentId = useId();
|
||||
const reviewing = history?.selectedId != null;
|
||||
const chartWindowKey = scope === "chat" ? undefined : JSON.stringify([scope, task?.task_id, reviewing ? "history" : "live"]);
|
||||
const selected = history?.entries.find((entry) => entry.id === history.selectedId);
|
||||
const pending = selected ? history!.entries.filter((entry) => entry.id > selected.id).length : 0;
|
||||
const title = scope === "chat" ? "对话展示" : localPreview ? "本地预览展示" : "调查实时展示";
|
||||
@@ -121,7 +126,7 @@ export function InvestigationPresentationPanel({
|
||||
<motion.header
|
||||
layout={immediate || localPreview ? false : "position"}
|
||||
transition={presentationTransition(immediate)}
|
||||
className={`shrink-0 border-b border-border px-3 ${localPreview ? `${collapsed ? "h-[110px]" : "min-h-[110px]"} py-2` : "py-2.5"}`}
|
||||
className={`@container shrink-0 border-b border-border px-3 ${localPreview ? `${collapsed ? "h-[110px]" : "min-h-[110px]"} py-2` : "py-2.5"}`}
|
||||
>
|
||||
<div className={localPreview ? "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1" : "flex items-start justify-between gap-2"}>
|
||||
<div className={localPreview ? "contents" : "min-w-0 space-y-1"}>
|
||||
@@ -137,7 +142,7 @@ export function InvestigationPresentationPanel({
|
||||
: statusLabels[status]}
|
||||
</Badge>
|
||||
<span className="text-[11px] text-muted-foreground tabular-nums">
|
||||
图表 {charts.length} · 范围 {overlay ? 1 : 0} · 数据 {records.length}
|
||||
图表 {chartGroups.length} · 范围 {overlay ? 1 : 0} · 数据 {records.length}
|
||||
</span>
|
||||
{reviewing && pending > 0 ? (
|
||||
<span role="status" className="text-[11px] text-muted-foreground">
|
||||
@@ -146,6 +151,10 @@ export function InvestigationPresentationPanel({
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex shrink-0 items-center gap-1 ${localPreview ? "col-start-2 row-start-1" : ""}`}>
|
||||
<InvestigationChartManager key={chartWindowScope ?? JSON.stringify([scope, task?.task_id, task?.execution_generation])}
|
||||
groups={chartGroups} blocks={blocks} autoOpen={chartWindowAutoOpen} taskTitle={task?.title ?? title}
|
||||
reviewing={reviewing} onCloseChart={onCloseChart} references={references} />
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
@@ -161,6 +170,7 @@ export function InvestigationPresentationPanel({
|
||||
<ChevronDown size={16} aria-hidden />
|
||||
</motion.span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className={
|
||||
@@ -242,7 +252,7 @@ export function InvestigationPresentationPanel({
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
<AnimatePresence initial={false} mode="popLayout">
|
||||
<AnimatePresence key={chartWindowScope} initial={false} mode="popLayout">
|
||||
{overlay ? (
|
||||
<PresentationItem key={`overlay-${overlay.overlay_id}`} immediate={immediate}>
|
||||
<Card role="region" aria-label="调查覆盖层" className="border-border shadow-none">
|
||||
@@ -291,51 +301,10 @@ export function InvestigationPresentationPanel({
|
||||
</Card>
|
||||
</PresentationItem>
|
||||
) : null}
|
||||
{charts.map((item) => (
|
||||
<PresentationItem key={item.chart_id} immediate={immediate}>
|
||||
<Card
|
||||
data-investigation-chart={item.chart_id}
|
||||
role="group"
|
||||
aria-label={formatChartDisplayText(item.chart.title)}
|
||||
className="border-border shadow-none"
|
||||
>
|
||||
<CardHeader className="flex-row items-start justify-between gap-2 space-y-0 p-3 pb-2">
|
||||
<div className="min-w-0">
|
||||
<h3 className="break-words text-xs font-semibold leading-5 [overflow-wrap:anywhere]">
|
||||
{formatChartDisplayText(item.chart.title)}
|
||||
</h3>
|
||||
<p className="mt-1 text-[11px] text-muted-foreground">
|
||||
{item.chart.series.some((series) => series.type === "scatter") ? "折线与历史散点" : item.chart.chart_type === "bar" ? "柱状图" : "折线图"} ·{" "}
|
||||
{item.chart.x_data.length} 个
|
||||
{item.chart.chart_type === "bar" ? "类别" : "时间点"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<FloatingWindow title={formatChartDisplayText(item.chart.title)} fillContent
|
||||
openRequestKey={chartWindowKey === undefined ? undefined : JSON.stringify([chartWindowKey, item])}>
|
||||
{() => <div className="flex h-full min-h-0 min-w-0 flex-col gap-2">
|
||||
<AgentChartView chart={item.chart} embedded expanded />
|
||||
{item.evidence_refs.length ? <div className="max-h-[35%] shrink-0 overflow-auto">{references(item.evidence_refs)}</div> : null}
|
||||
</div>}
|
||||
</FloatingWindow>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="shrink-0"
|
||||
disabled={reviewing}
|
||||
aria-label={`关闭图表 ${formatChartDisplayText(item.chart.title)}`}
|
||||
onClick={() => onCloseChart(item.chart_id)}
|
||||
>
|
||||
<X size={14} aria-hidden />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-3 pb-2 pt-0">
|
||||
<AgentChartView chart={item.chart} embedded />
|
||||
{references(item.evidence_refs)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{chartGroups.map((group) => (
|
||||
<PresentationItem key={`${chartWindowScope}:${group.id}`} immediate={immediate}>
|
||||
<InvestigationChartGroup group={group} reviewing={reviewing ?? false}
|
||||
onCloseChart={onCloseChart} references={references} />
|
||||
</PresentationItem>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
@@ -343,7 +312,6 @@ export function InvestigationPresentationPanel({
|
||||
blocks={blocks}
|
||||
records={records}
|
||||
reviewing={reviewing}
|
||||
chartWindowKey={chartWindowKey}
|
||||
onLocateTargets={onLocateTargets}
|
||||
/>
|
||||
{!charts.length &&
|
||||
|
||||
@@ -7,7 +7,6 @@ type Props = {
|
||||
blocks: AnswerUiBlock[];
|
||||
records: Array<Record<string, unknown>>;
|
||||
reviewing: boolean;
|
||||
chartWindowKey?: string;
|
||||
onLocateTargets?: (targets: InvestigationMapTarget[]) => Promise<unknown>;
|
||||
};
|
||||
|
||||
@@ -15,7 +14,6 @@ export function PresentationBusinessResults({
|
||||
blocks,
|
||||
records,
|
||||
reviewing,
|
||||
chartWindowKey,
|
||||
onLocateTargets
|
||||
}: Props) {
|
||||
if (!blocks.length && !records.length) return null;
|
||||
@@ -26,7 +24,6 @@ export function PresentationBusinessResults({
|
||||
key={block.block_id}
|
||||
block={block}
|
||||
disabled={reviewing}
|
||||
chartWindowKey={chartWindowKey}
|
||||
onLocate={
|
||||
onLocateTargets && !reviewing
|
||||
? (target) =>
|
||||
|
||||
@@ -16,10 +16,12 @@ import {
|
||||
UserRound,
|
||||
type LucideIcon
|
||||
} from "lucide-react";
|
||||
import { useRef, useState, type ReactNode } from "react";
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import { ProjectSwitchDialog } from "./project-switch-dialog";
|
||||
import {
|
||||
mapOptionInteractionVariants,
|
||||
MAP_ACTION_ROW_INTERACTION_CLASS_NAME,
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
|
||||
@@ -53,11 +55,12 @@ const menuSurfaceClassName = cn(
|
||||
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
|
||||
"acrylic-panel border p-2 text-slate-900"
|
||||
);
|
||||
const menuReadableRowClassName =
|
||||
const alertReadableRowClassName =
|
||||
"surface-well focus:bg-[var(--action-soft)] focus:text-slate-950";
|
||||
const alertActionClassName = cn(
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
"h-10 w-10 shrink-0 justify-center border border-transparent bg-transparent p-0 text-[var(--ink-muted)] transition-colors hover:border-[var(--action-blue)] hover:bg-[var(--action-blue)] hover:text-white focus:border-[var(--action-blue)] focus:bg-[var(--action-blue)] focus:text-white data-[highlighted]:border-[var(--action-blue)] data-[highlighted]:bg-[var(--action-blue)] data-[highlighted]:text-white active:scale-95"
|
||||
"h-10 w-10 shrink-0 justify-center border border-transparent bg-transparent p-0 text-[var(--ink-muted)] focus:bg-[var(--surface-reading)] focus:text-[var(--action-blue-hover)]",
|
||||
mapOptionInteractionVariants()
|
||||
);
|
||||
|
||||
export function AnalysisViewMenu({
|
||||
@@ -143,13 +146,28 @@ export function AlertMenu({
|
||||
onAnalyzeAlertsWithAgent: () => void | Promise<void>;
|
||||
}) {
|
||||
const reduceMotion = useReducedMotion();
|
||||
const keyboardInteraction = useRef(false);
|
||||
const skipRemovalMotion = reduceMotion === true || keyboardInteraction.current;
|
||||
const [keyboardInteraction, setKeyboardInteraction] = useState(false);
|
||||
const skipRemovalMotion = reduceMotion === true || keyboardInteraction;
|
||||
const hasAlerts = alerts.length > 0;
|
||||
const hasCriticalAlerts = alerts.some((alert) => alert.severity !== "warning");
|
||||
const alertSummaryTone = hasCriticalAlerts ? "danger" : hasAlerts ? "warning" : "neutral";
|
||||
const latestAlertTime = alerts[0]?.time;
|
||||
|
||||
useEffect(() => {
|
||||
// Radix can preserve :focus-visible through pointer-driven focus transfers.
|
||||
// Track actual input, including Tab from controls outside this portaled menu.
|
||||
const handleKeyboard = () => setKeyboardInteraction(true);
|
||||
const handlePointer = () => setKeyboardInteraction(false);
|
||||
document.addEventListener("keydown", handleKeyboard, true);
|
||||
document.addEventListener("pointerdown", handlePointer, true);
|
||||
document.addEventListener("pointermove", handlePointer, true);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyboard, true);
|
||||
document.removeEventListener("pointerdown", handlePointer, true);
|
||||
document.removeEventListener("pointermove", handlePointer, true);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -158,6 +176,7 @@ export function AlertMenu({
|
||||
className={cn(
|
||||
"group relative px-2",
|
||||
headerControlButtonClassName,
|
||||
!keyboardInteraction && "focus-visible:ring-0 focus-visible:ring-offset-0",
|
||||
hasAlerts && !compact &&
|
||||
(hasCriticalAlerts ? "status-tone-danger" : "status-tone-warning"),
|
||||
hasAlerts && !compact &&
|
||||
@@ -197,10 +216,7 @@ export function AlertMenu({
|
||||
)}
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" sideOffset={8} className={cn("w-[min(392px,calc(100vw-24px))]", menuSurfaceClassName)}
|
||||
onKeyDownCapture={() => { keyboardInteraction.current = true; }}
|
||||
onPointerDownCapture={() => { keyboardInteraction.current = false; }}
|
||||
>
|
||||
<DropdownMenuContent align="end" sideOffset={8} className={cn("w-[min(392px,calc(100vw-24px))]", menuSurfaceClassName)}>
|
||||
<AlertQueueSummary
|
||||
count={alerts.length}
|
||||
latestAlertTime={latestAlertTime}
|
||||
@@ -230,12 +246,15 @@ export function AlertMenu({
|
||||
tone === "warning" ? "status-tone-warning" : "status-tone-danger",
|
||||
"relative my-1 min-h-[76px] border border-transparent px-3 py-2 transition-colors hover:border-[var(--action-border-hover)] hover:bg-[var(--action-selection-soft)] focus-within:border-[var(--action-border-hover)] focus-within:bg-[var(--action-selection-soft)]",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
menuReadableRowClassName
|
||||
alertReadableRowClassName
|
||||
)}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
asChild
|
||||
className="absolute inset-0 z-0 h-full w-full cursor-pointer rounded-[inherit] border-0 bg-transparent p-0 hover:bg-transparent focus:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--action-focus-ring)]"
|
||||
className={cn(
|
||||
"absolute inset-0 z-0 h-full w-full cursor-pointer rounded-[inherit] border-0 bg-transparent p-0 hover:bg-transparent focus:bg-transparent focus-visible:ring-inset focus-visible:ring-[var(--action-focus-ring)]",
|
||||
keyboardInteraction && "focus-visible:ring-2"
|
||||
)}
|
||||
onSelect={() => onSelectAlert(alert)}
|
||||
>
|
||||
<button
|
||||
@@ -381,8 +400,8 @@ export function UserMenu({
|
||||
onSelect={onLogout ? () => void onLogout() : undefined}
|
||||
className={cn(
|
||||
"px-2 py-2",
|
||||
!onLogout && "text-[var(--ink-muted)]",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME
|
||||
MAP_ACTION_ROW_INTERACTION_CLASS_NAME,
|
||||
!onLogout && "text-[var(--ink-muted)]"
|
||||
)}
|
||||
>
|
||||
<LogOut size={15} aria-hidden="true" />
|
||||
@@ -466,7 +485,7 @@ function MenuPlainButton({
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
disabled
|
||||
? "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-[var(--ink-muted)]"
|
||||
: "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-slate-800 hover:border-[var(--surface-border)] hover:bg-[var(--action-soft)]/55 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
|
||||
: cn(MAP_ACTION_ROW_INTERACTION_CLASS_NAME, "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]")
|
||||
)}
|
||||
>
|
||||
<span className="truncate text-xs font-semibold leading-4">{label}</span>
|
||||
@@ -496,7 +515,7 @@ function MenuPrimaryButton({
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
disabled
|
||||
? "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-[var(--ink-muted)]"
|
||||
: "border-[var(--surface-border)] bg-[var(--action-blue)] text-white shadow-lg shadow-[color:var(--action-blue)]/20 hover:bg-[var(--action-blue-hover)] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
|
||||
: cn("border-[var(--surface-border)] bg-[var(--action-blue)] text-white shadow-lg shadow-[color:var(--action-blue)]/20", mapOptionInteractionVariants({ state: "primary" }))
|
||||
)}
|
||||
>
|
||||
<Icon size={14} aria-hidden="true" />
|
||||
@@ -554,9 +573,8 @@ function MenuAction({
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
className={cn(
|
||||
"my-0.5 items-center border border-transparent px-2 py-2 transition",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
menuReadableRowClassName
|
||||
"my-0.5 items-center px-2 py-2 transition-colors",
|
||||
MAP_ACTION_ROW_INTERACTION_CLASS_NAME
|
||||
)}
|
||||
onSelect={onSelect}
|
||||
>
|
||||
@@ -566,13 +584,13 @@ function MenuAction({
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
tone === "primary" && "border-[var(--surface-border)] bg-[var(--action-soft)] text-[var(--action-blue-hover)]",
|
||||
tone === "warning" && "status-icon status-tone-warning",
|
||||
tone === "default" && "border-[var(--surface-divider)] bg-[var(--surface-reading)] text-slate-600"
|
||||
tone === "default" && "border-[var(--surface-divider)] bg-[var(--surface-reading)]"
|
||||
)}
|
||||
>
|
||||
<Icon size={15} aria-hidden="true" />
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-sm font-semibold leading-5 text-slate-900">{label}</span>
|
||||
<span className="block text-sm font-semibold leading-5">{label}</span>
|
||||
<span className="mt-0.5 block truncate text-xs text-[var(--ink-muted)]">{description}</span>
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import { buttonInteractionVariants } from "@/shared/ui/button-interaction";
|
||||
import { mapOptionInteractionVariants } from "@/features/map/core";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
|
||||
export const headerControlButtonClassName =
|
||||
cn(
|
||||
buttonInteractionVariants({ tone: "neutral" }),
|
||||
mapOptionInteractionVariants(),
|
||||
"data-[state=open]:border-[var(--surface-border)] data-[state=open]:bg-[var(--surface-reading)] data-[state=open]:text-[var(--action-blue-hover)]",
|
||||
"inline-flex h-8 items-center gap-2 whitespace-nowrap rounded-full border border-transparent bg-transparent text-sm font-semibold after:absolute after:-inset-1 after:content-['']"
|
||||
);
|
||||
|
||||
@@ -11,6 +14,6 @@ export const compactHeaderControlButtonClassName =
|
||||
"h-10 w-10 justify-center px-0";
|
||||
|
||||
export const headerControlIconClassName =
|
||||
"header-control-icon grid h-5 w-5 shrink-0 place-items-center rounded-full bg-[var(--surface-control)]/80 text-[var(--ink-muted)] transition-colors group-hover:bg-[var(--action-soft)] group-hover:text-[var(--action-blue-hover)] group-data-[state=open]:bg-[var(--action-soft)] group-data-[state=open]:text-[var(--action-blue-hover)]";
|
||||
"header-control-icon grid h-5 w-5 shrink-0 place-items-center rounded-full bg-[var(--surface-control)]/80 text-inherit";
|
||||
|
||||
export const compactHeaderTextClassName = "hidden min-[1800px]:inline";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useSyncExternalStore } from "react";
|
||||
import {
|
||||
Box,
|
||||
CalendarClock,
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { MAP_ICON_CELL_RADIUS_CLASS_NAME } from "@/features/map/core";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import { floatingWindowEntries, subscribeFloatingWindows } from "@/shared/ui/floating-window-layer";
|
||||
import type {
|
||||
WorkbenchAlert,
|
||||
WorkbenchAlertDataSource,
|
||||
@@ -21,6 +22,7 @@ import type {
|
||||
} from "../types";
|
||||
import type { AnalysisArtifact, ArtifactRequestedView } from "../workspace/workspace-model";
|
||||
import { AlertMenu, AnalysisViewMenu, UserMenu, type WorkbenchProjectSelection } from "./workbench-top-bar-menus";
|
||||
import { WorkbenchWindowMenu } from "./workbench-window-menu";
|
||||
import {
|
||||
compactHeaderTextClassName,
|
||||
headerControlButtonClassName,
|
||||
@@ -63,7 +65,7 @@ export type WorkbenchTopBarProps = {
|
||||
onLogout?: () => Promise<void>;
|
||||
};
|
||||
|
||||
type HeaderMenuId = "alerts" | "analysis-view" | "compact-alerts" | "user";
|
||||
type HeaderMenuId = "alerts" | "analysis-view" | "compact-alerts" | "user" | "windows";
|
||||
|
||||
export function WorkbenchTopBar({
|
||||
dataTime,
|
||||
@@ -101,12 +103,13 @@ export function WorkbenchTopBar({
|
||||
onLogout
|
||||
}: WorkbenchTopBarProps) {
|
||||
const [openMenu, setOpenMenu] = useState<HeaderMenuId | null>(null);
|
||||
const hasWindows = useSyncExternalStore(subscribeFloatingWindows, floatingWindowEntries).length > 0;
|
||||
const createMenuOpenChange = (menuId: HeaderMenuId) => (open: boolean) => {
|
||||
setOpenMenu(open ? menuId : null);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="workbench-top-bar acrylic-navigation pointer-events-auto absolute left-0 right-0 top-0 z-30 flex h-14 select-none items-center justify-between gap-2 border-b px-2 sm:gap-3 sm:px-4 md:px-5">
|
||||
<header data-floating-window-inset-top="" className="workbench-top-bar acrylic-navigation pointer-events-auto absolute left-0 right-0 top-0 z-30 flex h-14 select-none items-center justify-between gap-2 border-b px-2 sm:gap-3 sm:px-4 md:px-5">
|
||||
<div className="flex min-w-0 items-center gap-2 sm:gap-2.5 lg:shrink-0">
|
||||
<div
|
||||
className={cn(
|
||||
@@ -116,7 +119,7 @@ export function WorkbenchTopBar({
|
||||
>
|
||||
<Droplets size={18} aria-hidden="true" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className={cn("min-w-0", hasWindows && "max-[399px]:sr-only")}>
|
||||
<h1 aria-label="供水管网智慧运维系统" className="truncate text-sm font-semibold leading-5 text-slate-950">
|
||||
<span className="sm:hidden">供水</span>
|
||||
<span className="hidden sm:inline">供水管网智慧运维系统</span>
|
||||
@@ -172,6 +175,7 @@ export function WorkbenchTopBar({
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<WorkbenchWindowMenu open={openMenu === "windows"} onOpenChange={createMenuOpenChange("windows")} />
|
||||
<button
|
||||
type="button"
|
||||
aria-label="项目分析成果"
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import { useRef, useSyncExternalStore } from "react";
|
||||
import { AppWindow, Check, PanelsTopLeft, X } from "lucide-react";
|
||||
import { mapOptionInteractionVariants, MAP_ACTION_ROW_INTERACTION_CLASS_NAME, MAP_MAJOR_PANEL_RADIUS_CLASS_NAME } from "@/features/map/core";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import { floatingWindowEntries, subscribeFloatingWindows } from "@/shared/ui/floating-window-layer";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/shared/ui/dropdown-menu";
|
||||
import { headerControlButtonClassName, headerControlIconClassName } from "./workbench-top-bar-styles";
|
||||
|
||||
export function WorkbenchWindowMenu({ open, onOpenChange }: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
const entries = useSyncExternalStore(subscribeFloatingWindows, floatingWindowEntries);
|
||||
const trigger = useRef<HTMLButtonElement>(null);
|
||||
const afterClose = useRef<(() => void) | null>(null);
|
||||
if (!entries.length) return null;
|
||||
return <DropdownMenu modal={false} open={open} onOpenChange={onOpenChange}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button ref={trigger} type="button" aria-label={`窗口管理，当前 ${entries.length} 个窗口`} title="窗口管理"
|
||||
className={cn("group relative px-1.5 sm:px-2", headerControlButtonClassName)}>
|
||||
<span className={headerControlIconClassName}><PanelsTopLeft size={14} aria-hidden /></span>
|
||||
<span className="hidden text-xs xl:inline">窗口</span>
|
||||
<span aria-hidden className="absolute -right-0.5 -top-0.5 grid min-w-3.5 place-items-center rounded-full bg-[var(--action-blue)] px-0.5 text-[9px] leading-3.5 text-white tabular-nums xl:static xl:min-w-4 xl:px-1 xl:text-xs xl:leading-4">{entries.length}</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" aria-label="已打开的窗口" aria-labelledby={undefined}
|
||||
className={cn("acrylic-panel z-[90] w-80 max-w-[calc(100vw-24px)] border p-2 text-slate-900", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME)}
|
||||
onCloseAutoFocus={(event) => {
|
||||
const focus = afterClose.current;
|
||||
afterClose.current = null;
|
||||
if (focus) { event.preventDefault(); focus(); }
|
||||
}}>
|
||||
<DropdownMenuLabel className="flex items-center justify-between px-2 py-1.5 text-xs text-[var(--ink-muted)]">
|
||||
<span>已打开的窗口</span><span className="tabular-nums">{entries.length} 个</span>
|
||||
</DropdownMenuLabel>
|
||||
{[...entries].reverse().map((entry, index) => <DropdownMenuItem key={entry.id}
|
||||
aria-label={`定位窗口 ${entry.title}`} aria-current={index === 0 ? "true" : undefined}
|
||||
className={cn("min-h-10 items-start px-2 py-2.5 text-xs", index === 0
|
||||
? cn("rounded-xl border border-[var(--action-selection-border)] bg-[var(--action-selection-soft)] text-[var(--action-blue-hover)] focus:bg-[var(--action-selection-soft)] focus:text-[var(--action-blue-hover)]", mapOptionInteractionVariants({ state: "selected" }))
|
||||
: MAP_ACTION_ROW_INTERACTION_CLASS_NAME)}
|
||||
onSelect={() => {
|
||||
afterClose.current = () => entry.focus();
|
||||
onOpenChange(false);
|
||||
}}>
|
||||
<AppWindow size={15} className="mt-0.5 shrink-0" aria-hidden />
|
||||
<span className="min-w-0 flex-1 break-words leading-5">{entry.title}</span>
|
||||
{index === 0 ? <Check size={14} className="mt-0.5 shrink-0 text-[var(--action-blue)]" aria-hidden /> : null}
|
||||
</DropdownMenuItem>)}
|
||||
<DropdownMenuSeparator className="my-1.5 bg-[var(--surface-divider)]/70" />
|
||||
<DropdownMenuItem className={cn("min-h-10 px-2 text-xs", MAP_ACTION_ROW_INTERACTION_CLASS_NAME)} onSelect={() => {
|
||||
const fallback = trigger.current?.closest("header")?.querySelector<HTMLButtonElement>('button[aria-label="打开用户菜单"]');
|
||||
afterClose.current = () => fallback?.focus({ preventScroll: true });
|
||||
onOpenChange(false);
|
||||
[...entries].reverse().forEach((entry) => entry.close());
|
||||
}}><X size={15} aria-hidden />关闭全部窗口</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { useLayoutEffect, useState } from "react";
|
||||
import { columnsForLayout, reconcileChartSlots, swapChartSlots, type ChartLayout, type ChartSlot } from "../utils/chart-window-slots";
|
||||
|
||||
/** Keep chart identities in fixed positions throughout the scrolling grid. */
|
||||
export function useChartWindowLayout(ids: string[]) {
|
||||
const [container, setContainer] = useState<HTMLElement | null>(null);
|
||||
const [narrow, setNarrow] = useState(window.innerWidth < 760);
|
||||
const [preferredLayout, setPreferredLayout] = useState<ChartLayout>("four");
|
||||
const layout = narrow ? "one" : preferredLayout;
|
||||
const columns = columnsForLayout(layout);
|
||||
const [slots, setSlots] = useState<ChartSlot[]>([]);
|
||||
const available = reconcileChartSlots(slots, ids, columns);
|
||||
if (available !== slots) setSlots(available);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!container) return;
|
||||
const measure = () => setNarrow(container.clientWidth < 720);
|
||||
measure();
|
||||
const observer = new ResizeObserver(measure);
|
||||
observer.observe(container);
|
||||
return () => observer.disconnect();
|
||||
}, [container]);
|
||||
|
||||
return {
|
||||
containerRef: setContainer,
|
||||
layout,
|
||||
preferredLayout,
|
||||
narrow,
|
||||
setLayout: setPreferredLayout,
|
||||
slots: available,
|
||||
columns,
|
||||
move: (id: string, target: number) => {
|
||||
const source = available.indexOf(id);
|
||||
const next = swapChartSlots(available, source, target);
|
||||
if (next !== available) {
|
||||
setSlots(next);
|
||||
}
|
||||
},
|
||||
reset: () => {
|
||||
setSlots(reconcileChartSlots([], ids, columns));
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -95,3 +95,59 @@ it("advances saved snapshots on its timer, ignores new results and stops when th
|
||||
act(() => vi.advanceTimersByTime(3000));
|
||||
expect(result.current.records).toEqual([{ value: 3 }]);
|
||||
});
|
||||
|
||||
it("requests only the live task manager and forgets automatic intent across task switches", async () => {
|
||||
vi.useFakeTimers();
|
||||
const task = { task_id: "task-a", title: "运行中调查", execution_generation: 1, status: "running", evidence: [] } as unknown as import("../api/operational-task-client").OperationalTask;
|
||||
const command = { action: "open_chart" as const, chart_id: "pressure", evidence_refs: ["test"], chart: {
|
||||
title: "压力", chart_type: "line" as const, x_data: ["10:00"], series: [{ name: "压力", data: [20] }]
|
||||
} };
|
||||
const panel = document.createElement("div");
|
||||
panel.dataset.presentationScope = "investigation";
|
||||
const marker = document.createElement("div");
|
||||
marker.dataset.investigationChart = "pressure";
|
||||
marker.getBoundingClientRect = () => ({ height: 10 }) as DOMRect;
|
||||
panel.append(marker);
|
||||
document.body.append(panel);
|
||||
const initial = { ...options, scope: "investigation" as const, task, enabled: true };
|
||||
const { result, rerender } = renderHook((next) => useInvestigationPresentation(next), { initialProps: initial });
|
||||
const execute = async (origin: "live" | "preview" | "chat") => {
|
||||
await act(async () => {
|
||||
const pending = result.current.executeCommand(command, new AbortController().signal, origin);
|
||||
await vi.advanceTimersByTimeAsync(700);
|
||||
await pending;
|
||||
});
|
||||
};
|
||||
try {
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
await execute("preview");
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
await execute("chat");
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
panel.dataset.investigationCollapsed = "true";
|
||||
await execute("live");
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
panel.dataset.investigationCollapsed = "false";
|
||||
await execute("live");
|
||||
expect(result.current.chartWindowAutoOpen).toBe(true);
|
||||
rerender({ ...initial, task: { ...task, task_id: "task-b" } });
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
rerender(initial);
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
rerender({ ...initial, enabled: false });
|
||||
await execute("live");
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
rerender({ ...initial, task: { ...task, status: "completed", lifecycle_status: "completed" } });
|
||||
await execute("live");
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
rerender(initial);
|
||||
await act(() => result.current.runPreview({ blocks: [], records: [{ value: "历史结果" }], commands: [] }));
|
||||
act(() => result.current.history.onSelect(result.current.history.entries[0].id));
|
||||
await execute("live");
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
act(() => result.current.history.onSelect(null));
|
||||
expect(result.current.chartWindowAutoOpen).toBe(false);
|
||||
} finally {
|
||||
panel.remove();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -114,6 +114,9 @@ async function waitForChart(
|
||||
}
|
||||
|
||||
export function useInvestigationPresentation(options: Options) {
|
||||
const windowScope = JSON.stringify([options.scope, options.scopeId, options.projectId, options.task?.task_id, options.task?.execution_generation]);
|
||||
const [chartWindow, setChartWindow] = useState({ scope: windowScope, requested: false });
|
||||
if (chartWindow.scope !== windowScope) setChartWindow({ scope: windowScope, requested: false });
|
||||
const valuesRef = useRef(options);
|
||||
valuesRef.current = options;
|
||||
const storeRef = useRef(new PresentationViewHistory());
|
||||
@@ -155,6 +158,14 @@ export function useInvestigationPresentation(options: Options) {
|
||||
: "live",
|
||||
[]
|
||||
);
|
||||
const requestChartWindow = useCallback((origin: InvestigationPresentationActivity["source"]) => {
|
||||
const current = valuesRef.current;
|
||||
if (storeRef.current.selectedId !== null || current.scope === "chat" || current.scope === "preview") return;
|
||||
if (origin !== "live" || !current.enabled || current.task?.status !== "running") return;
|
||||
const panel = document.querySelector<HTMLElement>(`[data-presentation-scope="${current.scope ?? "investigation"}"]`);
|
||||
if (panel?.dataset.investigationCollapsed === "true") return;
|
||||
setChartWindow({ scope: JSON.stringify([current.scope, current.scopeId, current.projectId, current.task?.task_id, current.task?.execution_generation]), requested: true });
|
||||
}, []);
|
||||
const update = useCallback(
|
||||
(updater: (view: PresentationView) => PresentationView) => {
|
||||
storeRef.current.update(updater(storeRef.current.current));
|
||||
@@ -289,6 +300,7 @@ export function useInvestigationPresentation(options: Options) {
|
||||
})
|
||||
);
|
||||
signal.throwIfAborted();
|
||||
if (command.action === "open_chart") requestChartWindow(origin);
|
||||
if (historyId !== null) store.finish(historyId, "completed", undefined, actionSnapshot, pendingEntry);
|
||||
publish();
|
||||
setActivity((current) =>
|
||||
@@ -327,7 +339,7 @@ export function useInvestigationPresentation(options: Options) {
|
||||
throw cause;
|
||||
}
|
||||
},
|
||||
[scene, publish, update]
|
||||
[scene, publish, update, requestChartWindow]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -555,6 +567,8 @@ export function useInvestigationPresentation(options: Options) {
|
||||
const visible = storeRef.current.visible;
|
||||
const reviewing = storeRef.current.selectedId !== null;
|
||||
return {
|
||||
chartWindowAutoOpen: chartWindow.scope === windowScope && chartWindow.requested,
|
||||
chartWindowScope: windowScope,
|
||||
charts: visible.charts,
|
||||
blocks: visible.blocks,
|
||||
records: visible.records,
|
||||
|
||||
@@ -1477,6 +1477,7 @@ function MapWorkbenchContent({
|
||||
{ scope: "preview", surface: previewPresentation, task: null, visible: previewPresentation.hasHistory || previewPresentation.localPreview }
|
||||
].filter((item) => item.visible).map(({ scope, surface, task }) => <InvestigationPresentationPanel
|
||||
key={scope} scope={scope} embedded blocks={surface.blocks} records={surface.records} evidence={surface.evidence} history={surface.history} onLocateTargets={surface.locateTargets} task={task} localPreview={scope === "preview"} charts={surface.charts} overlay={surface.overlay} cameraPaused={surface.cameraPaused}
|
||||
chartWindowAutoOpen={surface.chartWindowAutoOpen} chartWindowScope={surface.chartWindowScope}
|
||||
status={scope === "chat" ? "live" : surface.status} error={surface.error}
|
||||
width={Math.min(380, Math.max(180, businessWorkspaceWidth - (rightPanelOpen ? (rightPanelExpanded ? (viewportWidth >= 1536 ? 960 : 880) : 432) + 64 : 64) - 24))}
|
||||
relatedLayers={scope === "investigation" ? presentationRelatedLayers : []} onToggleLayer={handleTogglePresentationLayer}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { columnsForLayout, reconcileChartSlots, swapChartSlots, type ChartSlot } from "./chart-window-slots";
|
||||
|
||||
describe("fixed chart slots", () => {
|
||||
it("maps supported layouts to grid columns", () => {
|
||||
expect([columnsForLayout("one"), columnsForLayout("two"), columnsForLayout("four")]).toEqual([1, 2, 2]);
|
||||
});
|
||||
|
||||
it("keeps chart positions when publications update in another order", () => {
|
||||
const slots: ChartSlot[] = ["flow", null, "pressure", "plans"];
|
||||
expect(reconcileChartSlots(slots, ["plans", "pressure", "flow"], 2)).toBe(slots);
|
||||
});
|
||||
|
||||
it("leaves deleted positions vacant without moving surviving charts", () => {
|
||||
expect(reconcileChartSlots(["pressure", "flow", "plans", null], ["pressure", "plans"], 2))
|
||||
.toEqual(["pressure", null, "plans", null]);
|
||||
});
|
||||
|
||||
it("fills the earliest vacant slots before appending a padded row", () => {
|
||||
expect(reconcileChartSlots(["pressure", null, "flow", null], ["new-1", "flow", "new-2", "pressure", "new-3"], 2))
|
||||
.toEqual(["pressure", "new-1", "flow", "new-2", "new-3", null]);
|
||||
});
|
||||
|
||||
it("uses vacancies created by a deletion in the same update", () => {
|
||||
expect(reconcileChartSlots(["pressure", "removed", "flow", null], ["pressure", "flow", "new"], 2))
|
||||
.toEqual(["pressure", "new", "flow", null]);
|
||||
});
|
||||
|
||||
it("preserves linear positions when the column count changes", () => {
|
||||
const slots: ChartSlot[] = ["a", null, "b", "c", "d", null];
|
||||
expect(reconcileChartSlots(slots, ["a", "b", "c", "d"], 1)).toEqual(["a", null, "b", "c", "d"]);
|
||||
expect(reconcileChartSlots(slots, ["a", "b", "c", "d"], 2)).toBe(slots);
|
||||
});
|
||||
|
||||
it("trims only empty trailing rows, retaining leading and middle vacancies", () => {
|
||||
expect(reconcileChartSlots([null, null, "a", null, null, null, null, null], ["a"], 2))
|
||||
.toEqual([null, null, "a", null]);
|
||||
expect(reconcileChartSlots(["a", null, null, null], ["a"], 2)).toEqual(["a", null]);
|
||||
expect(reconcileChartSlots(["a", null, null, null], [], 2)).toEqual([]);
|
||||
});
|
||||
|
||||
it("builds default slots in available order and never duplicates a chart", () => {
|
||||
expect(reconcileChartSlots([], ["a", "b", "a"], 2)).toEqual(["a", "b"]);
|
||||
expect(reconcileChartSlots(["a", "a", "b", null], ["a", "b", "c"], 2)).toEqual(["a", "c", "b", null]);
|
||||
});
|
||||
|
||||
it("swaps occupied slots without inserting or shifting adjacent charts", () => {
|
||||
const slots: ChartSlot[] = ["a", "b", "c", "d"];
|
||||
expect(swapChartSlots(slots, 0, 2)).toEqual(["c", "b", "a", "d"]);
|
||||
expect(slots).toEqual(["a", "b", "c", "d"]);
|
||||
});
|
||||
|
||||
it("swaps across rows and permits an empty destination", () => {
|
||||
expect(swapChartSlots(["a", "b", "c", "d", "e", null, null, null], 0, 5))
|
||||
.toEqual([null, "b", "c", "d", "e", "a", null, null]);
|
||||
});
|
||||
|
||||
it("keeps the original array for invalid or unchanged swaps", () => {
|
||||
const slots: ChartSlot[] = ["a", null, null];
|
||||
for (const [source, target] of [[-1, 1], [0, 3], [3, 0], [0.5, 1], [0, Number.NaN], [0, 0], [1, 2]]) {
|
||||
expect(swapChartSlots(slots, source, target)).toBe(slots);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
export type ChartSlot = string | null;
|
||||
export type ChartLayout = "one" | "two" | "four";
|
||||
|
||||
export function columnsForLayout(layout: ChartLayout): 1 | 2 {
|
||||
return layout === "one" ? 1 : 2;
|
||||
}
|
||||
|
||||
/** Retain fixed positions, fill vacancies, and pad the final row without compacting. */
|
||||
export function reconcileChartSlots(slots: ChartSlot[], availableIds: string[], columns: 1 | 2): ChartSlot[] {
|
||||
const available = new Set(availableIds);
|
||||
const retained = new Set<string>();
|
||||
const next = slots.map((id) => {
|
||||
if (id === null || !available.has(id) || retained.has(id)) return null;
|
||||
retained.add(id);
|
||||
return id;
|
||||
});
|
||||
for (const id of available) {
|
||||
if (retained.has(id)) continue;
|
||||
const empty = next.indexOf(null);
|
||||
if (empty === -1) next.push(id);
|
||||
else next[empty] = id;
|
||||
}
|
||||
let last = next.length - 1;
|
||||
while (last >= 0 && next[last] === null) last -= 1;
|
||||
const length = Math.ceil((last + 1) / columns) * columns;
|
||||
if (next.length > length) next.length = length;
|
||||
while (next.length < length) next.push(null);
|
||||
return next.length === slots.length && next.every((id, index) => id === slots[index]) ? slots : next;
|
||||
}
|
||||
|
||||
/** Exchange two fixed positions, including vacant destinations; never shift neighbors. */
|
||||
export function swapChartSlots(slots: ChartSlot[], sourceIndex: number, targetIndex: number): ChartSlot[] {
|
||||
if (!Number.isInteger(sourceIndex) || !Number.isInteger(targetIndex) || sourceIndex < 0 || targetIndex < 0 ||
|
||||
sourceIndex >= slots.length || targetIndex >= slots.length || slots[sourceIndex] === slots[targetIndex]) return slots;
|
||||
const next = [...slots];
|
||||
[next[sourceIndex], next[targetIndex]] = [next[targetIndex], next[sourceIndex]];
|
||||
return next;
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { groupInvestigationCharts } from "./investigation-chart-groups";
|
||||
import type { InvestigationChart } from "../hooks/use-investigation-presentation";
|
||||
|
||||
const comparison = (id: string, metric = "压力", unit = "m", date = "2026-07-16"): InvestigationChart => ({
|
||||
action: "open_chart", chart_id: `chart_tc_${id}`, evidence_refs: [`evidence:${id}`],
|
||||
chart: { title: `${id} ${metric}七日同时刻对照（${unit}）`, chart_type: "time_comparison",
|
||||
x_axis_name: "时间", y_axis_name: `${metric}（${unit}）`, x_data: ["07:45", "08:00"],
|
||||
series: [
|
||||
{ name: `${id} 当前 ${date}`, type: "line", data: [30, 25], sample_times: [`${date}T07:45:00+08:00`, `${date}T08:00:00+08:00`] },
|
||||
{ name: `${id} 2026-07-09`, type: "scatter", data: [null, 32], sample_times: [null, "2026-07-09T08:00:00+08:00"] }
|
||||
] }
|
||||
});
|
||||
|
||||
const legacyComparison = (id: string, metric = "压力", unit = "m", date = "2026-07-16") => {
|
||||
const command = comparison(id, metric, unit, date);
|
||||
command.chart.title = `${id} ${metric}三小时趋势与七天同期对照（${unit}）`;
|
||||
command.chart.series[0].name = `${id} ${date.slice(5)}（${unit}）`;
|
||||
command.chart.series[1].name = "07-09";
|
||||
return command;
|
||||
};
|
||||
|
||||
describe("investigation comparison groups", () => {
|
||||
it("groups pressure objects and pipe flow objects separately without changing data or evidence", () => {
|
||||
const charts = [comparison("170486"), comparison("175618"), comparison("542017", "管流", "m³/h"), comparison("486033", "管流", "m³/h")];
|
||||
const groups = groupInvestigationCharts(charts);
|
||||
expect(groups).toHaveLength(2);
|
||||
expect(groups[0].items.map((item) => item.label)).toEqual(["170486", "175618"]);
|
||||
expect(groups[1].items.map((item) => item.label)).toEqual(["542017", "486033"]);
|
||||
expect(groups[0].title).toBe("压力七日同时刻对照（m）");
|
||||
expect(groups[0].items[1].command).toBe(charts[1]);
|
||||
expect(charts[1].chart.series[1].data).toEqual([null, 32]);
|
||||
});
|
||||
|
||||
it("groups saved pressure and flow charts whose titles put the metric before the object ID", () => {
|
||||
const charts = [["170486", "压力", "m"], ["175618", "压力", "m"], ["541061", "流量", "m³/h"], ["542017", "流量", "m³/h"]].map(([id, metric, unit]) => {
|
||||
const command = comparison(id, metric, unit);
|
||||
command.chart.title = `${metric}测点 ${id} 当前曲线与前七天同期对比（${unit}）`;
|
||||
return command;
|
||||
});
|
||||
const groups = groupInvestigationCharts(charts);
|
||||
expect(groups.map((group) => ({ title: group.title, objects: group.items.map((item) => item.label) }))).toEqual([
|
||||
{ title: "压力当前曲线与前七天同期对比（m）", objects: ["170486", "175618"] },
|
||||
{ title: "流量当前曲线与前七天同期对比（m³/h）", objects: ["541061", "542017"] }
|
||||
]);
|
||||
});
|
||||
|
||||
it("recognizes the same explicit object comparison in all three saved title formats", () => {
|
||||
const charts = [comparison("170486"), comparison("175618"), comparison("159673")];
|
||||
charts[0].chart.title = "170486 压力三小时与历史对照（m）";
|
||||
charts[1].chart.title = "测点 175618 压力三小时与历史对照（m）";
|
||||
charts[2].chart.title = "压力测点 159673 三小时与历史对照（m）";
|
||||
const groups = groupInvestigationCharts(charts);
|
||||
expect(groups).toHaveLength(1);
|
||||
expect(groups[0].title).toBe("压力三小时与历史对照（m）");
|
||||
expect(groups[0].items.map((item) => item.label)).toEqual(["170486", "175618", "159673"]);
|
||||
});
|
||||
|
||||
it("groups saved date-only historical labels without rewriting commands, readings or evidence", () => {
|
||||
const charts = [legacyComparison("170486"), legacyComparison("175618")];
|
||||
charts[1].chart.series[1].data[1] = 0;
|
||||
const original = structuredClone(charts);
|
||||
const groups = groupInvestigationCharts(charts);
|
||||
expect(groups).toHaveLength(1);
|
||||
expect(groups[0].items.map((item) => item.label)).toEqual(["170486", "175618"]);
|
||||
groups[0].items.forEach((item, index) => {
|
||||
expect(item.command).toBe(charts[index]);
|
||||
expect(item.command.chart.series).toBe(charts[index].chart.series);
|
||||
expect(item.command.chart.series[1].sample_times).toBe(charts[index].chart.series[1].sample_times);
|
||||
expect(item.command.evidence_refs).toBe(charts[index].evidence_refs);
|
||||
});
|
||||
expect(charts).toEqual(original);
|
||||
});
|
||||
|
||||
it("keeps legacy comparisons with different units, windows or current dates separate", () => {
|
||||
const shifted = legacyComparison("175618");
|
||||
shifted.chart.x_data = ["08:00", "08:15"];
|
||||
shifted.chart.series[0].sample_times = ["2026-07-16T08:00:00+08:00", "2026-07-16T08:15:00+08:00"];
|
||||
shifted.chart.series[1].sample_times = [null, "2026-07-09T08:15:00+08:00"];
|
||||
const charts = [legacyComparison("170486"), legacyComparison("P2", "压力", "MPa"), shifted, legacyComparison("P3", "压力", "m", "2026-07-17")];
|
||||
expect(groupInvestigationCharts(charts)).toHaveLength(charts.length);
|
||||
});
|
||||
|
||||
it("leaves ambiguous or mixed-object legacy charts and unproven historical dates separate", () => {
|
||||
const ambiguous = legacyComparison("P2"); ambiguous.chart.title = "压力测点历史对照";
|
||||
const foreign = legacyComparison("P3"); foreign.chart.series[1].name = "P4 07-09";
|
||||
const mixed = legacyComparison("P4"); mixed.chart.series.push({ ...mixed.chart.series[0], name: "P5 当前 2026-07-16" });
|
||||
const missing = legacyComparison("P5"); delete missing.chart.series[1].sample_times;
|
||||
const mismatched = legacyComparison("P6"); mismatched.chart.series[1].sample_times = [null, "2026-07-10T08:00:00+08:00"];
|
||||
const empty = legacyComparison("P7"); empty.chart.series[1].data = [null, null]; empty.chart.series[1].sample_times = [null, null];
|
||||
const sameDateInUtc8 = legacyComparison("P8"); sameDateInUtc8.chart.series[1].sample_times = [null, "2026-07-09T00:00:00Z"];
|
||||
const charts = [legacyComparison("170486"), ambiguous, foreign, mixed, missing, mismatched, empty, sameDateInUtc8];
|
||||
const groups = groupInvestigationCharts(charts);
|
||||
expect(groups).toHaveLength(charts.length - 1);
|
||||
expect(groups[0].items.map((item) => item.label)).toEqual(["170486", "P8"]);
|
||||
});
|
||||
|
||||
it("keeps incompatible units, sampling windows, comparison dates and ordinary trends separate", () => {
|
||||
const base = comparison("170486");
|
||||
const window = comparison("175618"); window.chart.x_data = ["08:00", "08:15"];
|
||||
const trend = comparison("159673"); trend.chart.series = [trend.chart.series[0]];
|
||||
expect(groupInvestigationCharts([base, comparison("P2", "压力", "MPa"), comparison("P3", "压力", "m", "2026-07-17"), window, trend])).toHaveLength(5);
|
||||
const noTimes = [comparison("P4"), comparison("P5", "压力", "m", "2026-07-17")];
|
||||
for (const command of noTimes) for (const series of command.chart.series) delete series.sample_times;
|
||||
expect(groupInvestigationCharts(noTimes)).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("keeps group identity stable as objects arrive or are closed and leaves ambiguous titles alone", () => {
|
||||
const first = comparison("170486"), second = comparison("175618");
|
||||
expect(groupInvestigationCharts([first])[0].id).toBe(groupInvestigationCharts([second, first])[0].id);
|
||||
const ambiguous = comparison("159673"); ambiguous.chart.title = "压力同期对照";
|
||||
expect(groupInvestigationCharts([first, ambiguous])).toHaveLength(2);
|
||||
expect(groupInvestigationCharts([])).toEqual([]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { InvestigationChart } from "../hooks/use-investigation-presentation";
|
||||
|
||||
export type InvestigationChartGroup = {
|
||||
id: string;
|
||||
title: string;
|
||||
items: Array<{ label: string; command: InvestigationChart }>;
|
||||
};
|
||||
|
||||
type ChartSeries = InvestigationChart["chart"]["series"][number];
|
||||
|
||||
/** Saved date-only legends identify a day only when their actual observations prove it. */
|
||||
function matchesHistoricalDate(series: ChartSeries) {
|
||||
if (!/^(?:0[1-9]|1[0-2])-(?:0[1-9]|[12][0-9]|3[01])$/.test(series.name) ||
|
||||
!series.sample_times || series.sample_times.length !== series.data.length) return false;
|
||||
let observedDate: string | null = null;
|
||||
for (let index = 0; index < series.data.length; index++) {
|
||||
const at = series.sample_times[index];
|
||||
if (series.data[index] === null) {
|
||||
if (at !== null) return false;
|
||||
continue;
|
||||
}
|
||||
if (typeof at !== "string") return false;
|
||||
const time = Date.parse(at);
|
||||
if (!Number.isFinite(time)) return false;
|
||||
const date = new Date(time + 8 * 3600_000).toISOString().slice(0, 10);
|
||||
if (date.slice(5) !== series.name || observedDate !== null && observedDate !== date) return false;
|
||||
observedDate = date;
|
||||
}
|
||||
return observedDate !== null;
|
||||
}
|
||||
|
||||
function matchesObjectSeries(command: InvestigationChart, id: string) {
|
||||
const { chart } = command;
|
||||
const prefixed = (series: ChartSeries) => series.name.startsWith(`${id} `);
|
||||
if (chart.series.every(prefixed)) return true;
|
||||
const current = chart.series.filter((series) => series.type !== "scatter");
|
||||
return current.length === 1 && prefixed(current[0]) &&
|
||||
(current[0].type ?? (chart.chart_type === "time_comparison" ? "line" : chart.chart_type)) === "line" &&
|
||||
chart.series.every((series) => prefixed(series) || series.type === "scatter" && matchesHistoricalDate(series));
|
||||
}
|
||||
|
||||
/** Group only explicitly named objects with the same comparison, axes and sampling window. */
|
||||
export function groupInvestigationCharts(charts: InvestigationChart[]): InvestigationChartGroup[] {
|
||||
const groups = new Map<string, InvestigationChartGroup>();
|
||||
for (const command of charts) {
|
||||
const { chart } = command;
|
||||
const match = /^(?:(压力|流量)测点\s+|测点\s+)?([A-Za-z0-9][A-Za-z0-9_.-]*)\s+(.+)$/.exec(chart.title);
|
||||
const object = match ? { id: match[2], title: `${match[1] ?? ""}${match[3]}` } : null;
|
||||
const comparable = object && chart.series.some((series) => series.type === "scatter") && matchesObjectSeries(command, object.id);
|
||||
const id = comparable ? JSON.stringify([
|
||||
object.title, chart.chart_type, chart.x_axis_name, chart.y_axis_name, chart.x_data,
|
||||
chart.series.filter((series) => series.type !== "scatter").map((series) => [
|
||||
series.name.slice(object.id.length).trim(), series.sample_times ?? null
|
||||
])
|
||||
]) : command.chart_id;
|
||||
let group = groups.get(id);
|
||||
if (!group) {
|
||||
group = { id, title: comparable ? object.title : chart.title, items: [] };
|
||||
groups.set(id, group);
|
||||
}
|
||||
group.items.push({ label: comparable ? object.id : chart.title, command });
|
||||
}
|
||||
return [...groups.values()];
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { createInvestigationDevCase, investigationDevCases } from "./investigation-dev-cases";
|
||||
import { groupInvestigationCharts } from "./investigation-chart-groups";
|
||||
import { parseInvestigationDevJsonl } from "./investigation-dev-preview";
|
||||
|
||||
|
||||
@@ -47,9 +48,18 @@ describe("switchable investigation Dev cases", () => {
|
||||
expect(nodes[0].props.rows).toHaveLength(50);
|
||||
expect(nodes[1].props.rows).toEqual([]);
|
||||
const charts = parseInvestigationDevJsonl(createInvestigationDevCase("complex_charts"));
|
||||
const pressure = Object.values(charts.blocks[0].spec.elements)[0].props;
|
||||
expect(pressure.x_data).toHaveLength(96);
|
||||
expect(pressure.series).toHaveLength(8);
|
||||
const commands = charts.commands.filter((command) => command.action === "open_chart");
|
||||
expect(charts.blocks).toHaveLength(0);
|
||||
expect(commands).toHaveLength(13);
|
||||
const groups = groupInvestigationCharts(commands);
|
||||
expect(groups.map((group) => group.items.length)).toEqual([8, 4, 1]);
|
||||
for (const { chart } of commands.slice(0, 12)) {
|
||||
expect(chart.chart_type).toBe("time_comparison");
|
||||
expect(chart.x_data).toHaveLength(96);
|
||||
expect(chart.series).toHaveLength(8);
|
||||
expect(chart.series[0].sample_times).toHaveLength(96);
|
||||
expect(chart.series[1].data.filter((value) => value !== null)).toHaveLength(3);
|
||||
}
|
||||
});
|
||||
|
||||
it.each(["data_only", "candidates_table", "valves_table"] as const)(
|
||||
|
||||
@@ -65,6 +65,11 @@ export const investigationDevCases = [
|
||||
id: "invalid_chart",
|
||||
label: "错误：图表数据不齐",
|
||||
expected: "第 1 行图表校验失败，时间轴和序列长度不一致时不能执行。"
|
||||
},
|
||||
{
|
||||
id: "invalid_comparison",
|
||||
label: "错误：同期时刻错位",
|
||||
expected: "第 1 行拒绝历史采样时间与横轴槽位不一致的复合图，整批不执行。"
|
||||
}
|
||||
] as const;
|
||||
|
||||
@@ -258,5 +263,14 @@ export function createInvestigationDevCase(
|
||||
}
|
||||
}
|
||||
]);
|
||||
case "invalid_comparison":
|
||||
return invalidJsonl([{ record_type: "presentation", command: {
|
||||
action: "open_chart", chart_id: "dev-invalid-comparison", evidence_refs: ["dev:synthetic"],
|
||||
chart: { title: "错误案例：历史点时刻错位", chart_type: "time_comparison", x_data: ["08:00", "08:15"],
|
||||
series: [
|
||||
{ name: "当前", type: "line", data: [32, 30], sample_times: ["2026-07-16T08:00:00+08:00", "2026-07-16T08:15:00+08:00"] },
|
||||
{ name: "历史", type: "scatter", data: [33, null], sample_times: ["2026-07-15T08:15:00+08:00", null] }
|
||||
] }
|
||||
} }]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,9 +3,9 @@ import type { AnswerUiBlock } from "@/features/agent";
|
||||
import { createPresentationRecord, createUiRecord, serializeInvestigationDevJsonl } from "./investigation-dev-preview";
|
||||
|
||||
export const complexInvestigationDevCases = [
|
||||
{ id: "complex_investigation", label: "复杂调查：多图多表联动", expected: "3 张图、2 张表与合成覆盖面；可同时放大对比，单位分别展示，不查询真实要素。" },
|
||||
{ id: "complex_investigation", label: "复杂调查：多图多表联动", expected: "压力与管流分别聚合，另有方案柱状图、2 张表与合成覆盖面；右侧切换对象，下方控制图例。" },
|
||||
{ id: "complex_tables", label: "复杂表格：宽表、长文本与边界数据", expected: "50 行 8 列宽表、空表和含零值、负数、重复值的对照表；检查搜索、数值排序和横向滚动。" },
|
||||
{ id: "complex_charts", label: "复杂图表：多测点与长时序", expected: "96 个时间点、8 条压力序列，另有流量与方案柱状图；可切换数据表、筛选区间并独立放大。" }
|
||||
{ id: "complex_charts", label: "复杂图表：多测点与长时序", expected: "8 个压力点与 4 个管段各含 96 个时刻、当前曲线与七日历史散点，聚合为 2 个子图表，由总图表窗口统一管理，另有方案柱状图。" }
|
||||
] as const;
|
||||
|
||||
type ComplexCaseId = (typeof complexInvestigationDevCases)[number]["id"];
|
||||
@@ -19,25 +19,40 @@ const ui = (id: string, node: Node) => createUiRecord({
|
||||
const table = (id: string, title: string, columns: string[], rows: string[][]) =>
|
||||
ui(id, { type: "Table", props: { title, columns, rows }, children: [] });
|
||||
const times = Array.from({ length: 96 }, (_, index) => `${String(Math.floor(index / 4)).padStart(2, "0")}:${String(index % 4 * 15).padStart(2, "0")}`);
|
||||
const pressure = {
|
||||
title: "合成全天压力对比", chart_type: "line" as const, x_data: times,
|
||||
series: Array.from({ length: 8 }, (_, series) => ({
|
||||
name: `合成节点 ${INVESTIGATION_DEV_NETWORK.nodeAnchors[series].id} · ${series < 4 ? "主干管" : "末端支线"}压力水头（m）`,
|
||||
data: times.map((_, index) => Number((34 + series * 0.6 + Math.sin(index / 7 + series) * 2.4 - (index >= 32 && index < 44 ? 7 - series * 0.4 : 0)).toFixed(2)))
|
||||
}))
|
||||
};
|
||||
const flow = {
|
||||
title: "合成分区流量趋势", chart_type: "line" as const, x_data: times,
|
||||
series: Array.from({ length: 4 }, (_, series) => ({ name: `合成分区 ${series + 1} 流量（m³/h）`,
|
||||
data: times.map((_, index) => Number((120 + series * 28 + Math.sin(index / 9 + series) * 24 + (index >= 32 && index < 44 ? 38 : 0)).toFixed(1))) }))
|
||||
};
|
||||
const comparisonChart = (id: string, title: string, axis: string, baseline: number[], current: number[]) => ({
|
||||
title: `${id} ${title}`, chart_type: "time_comparison" as const,
|
||||
x_axis_name: "时间", y_axis_name: axis, x_data: times,
|
||||
series: [{ name: `${id} 当前 2026-07-16`, type: "line" as const, data: current,
|
||||
sample_times: times.map((time) => `2026-07-16T${time}:00+08:00`) },
|
||||
...Array.from({ length: 7 }, (_, day) => {
|
||||
const date = `2026-07-${String(9 + day).padStart(2, "0")}`;
|
||||
return { name: `${id} ${date}`, type: "scatter" as const,
|
||||
data: times.map((_, index) => index >= 40 && index <= 42 ? Number((baseline[index] + day * 0.1).toFixed(2)) : null),
|
||||
sample_times: times.map((time, index) => index >= 40 && index <= 42 ? `${date}T${time}:00+08:00` : null) };
|
||||
})]
|
||||
});
|
||||
const pressure = Array.from({ length: 8 }, (_, object) => {
|
||||
const baseline = times.map((_, index) => Number((34 + object * 0.6 + Math.sin(index / 7 + object) * 2.4).toFixed(2)));
|
||||
return comparisonChart(INVESTIGATION_DEV_NETWORK.nodeAnchors[object].id, "合成全天压力对比", "压力水头（m）", baseline,
|
||||
baseline.map((value, index) => Number((value - (index >= 32 && index < 44 ? 7 - object * 0.4 : 0)).toFixed(2))));
|
||||
});
|
||||
const flow = Array.from({ length: 4 }, (_, object) => {
|
||||
const baseline = times.map((_, index) => Number((120 + object * 28 + Math.sin(index / 9 + object) * 24).toFixed(1)));
|
||||
return comparisonChart(INVESTIGATION_DEV_NETWORK.pipeIds[object], "合成分区流量趋势", "流量（m³/h）", baseline,
|
||||
baseline.map((value, index) => Number((value + (index >= 32 && index < 44 ? 38 : 0)).toFixed(1))));
|
||||
});
|
||||
const chart = (id: string, value: ReturnType<typeof comparisonChart>) => createPresentationRecord({
|
||||
action: "open_chart", chart_id: `dev-complex-${id}`, evidence_refs: ["dev:synthetic"], chart: value
|
||||
});
|
||||
const objectCharts = () => [
|
||||
...pressure.map((value, index) => chart(`pressure-${index + 1}`, value)),
|
||||
...flow.map((value, index) => chart(`flow-${index + 1}`, value))
|
||||
];
|
||||
const comparison = {
|
||||
title: "合成候选方案影响对比", chart_type: "bar" as const,
|
||||
x_data: ["合成方案 A：局部隔离", "合成方案 B：扩大核查", "合成方案 C：保持供水", "合成方案 D：分段验证", "合成方案 E：待补充资料"],
|
||||
series: [{ name: "合成影响用户数（户）", data: [245, 610, 0, 128, 72] }]
|
||||
};
|
||||
const chart = (id: string, value: typeof pressure | typeof flow | typeof comparison) =>
|
||||
ui(id, { type: "Chart", props: { ...value, source: "本地确定性合成数据，仅供展示测试；曲线变化和方案名称均非实际分析结果。" }, children: [] });
|
||||
|
||||
const columns = ["序号", "管段 ID", "合成片区", "长度（m）", "压力变化（m）", "影响户数（户）", "核查状态", "核查说明"];
|
||||
const rows = Array.from({ length: 50 }, (_, index) => [
|
||||
@@ -53,7 +68,8 @@ const rows = Array.from({ length: 50 }, (_, index) => [
|
||||
|
||||
export function createComplexInvestigationDevCase(caseId: ComplexCaseId, [longitude, latitude]: [number, number]): string {
|
||||
if (caseId === "complex_charts") return serializeInvestigationDevJsonl([
|
||||
chart("pressure", pressure), chart("flow", flow), chart("comparison", comparison)
|
||||
...objectCharts(),
|
||||
createPresentationRecord({ action: "open_chart", chart_id: "dev-complex-plans", evidence_refs: ["dev:synthetic"], chart: comparison })
|
||||
]);
|
||||
if (caseId === "complex_tables") return serializeInvestigationDevJsonl([
|
||||
table("wide-table", "合成候选核查宽表", columns, rows),
|
||||
@@ -69,7 +85,7 @@ export function createComplexInvestigationDevCase(caseId: ComplexCaseId, [longit
|
||||
createPresentationRecord({ action: "set_overlay", mode: "geometry", overlay_id: "dev-complex-coverage", title: "合成分区覆盖示意", evidence_id: "dev:synthetic",
|
||||
data: { type: "FeatureCollection", features: [-0.002, 0.002].map((dx, index) => ({ type: "Feature", properties: { project_code: INVESTIGATION_DEV_NETWORK.projectCode, origin: "synthetic", label: `合成片区 ${index + 1}` },
|
||||
geometry: { type: "Polygon", coordinates: [[point(dx - 0.001, -0.001), point(dx + 0.001, -0.001), point(dx + 0.001, 0.001), point(dx - 0.001, 0.001), point(dx - 0.001, -0.001)]] } })) } }),
|
||||
chart("pressure", pressure), chart("flow", flow),
|
||||
...objectCharts(),
|
||||
createPresentationRecord({ action: "open_chart", chart_id: "dev-complex-plans", evidence_refs: ["dev:synthetic"], chart: comparison }),
|
||||
table("candidates", "合成候选方案核查", columns, rows.slice(0, 24)),
|
||||
table("valves", "合成阀门核查清单", ["阀门", "合成片区", "位置描述", "核查要求", "当前状态"],
|
||||
|
||||
@@ -5,8 +5,22 @@ import {
|
||||
parseInvestigationDevJsonl
|
||||
} from "./investigation-dev-preview";
|
||||
import type { OperationalTask } from "../api/operational-task-client";
|
||||
import chartCases from "../../../../tests/fixtures/chart-publication-cases.json";
|
||||
|
||||
describe("investigation Dev JSONL", () => {
|
||||
it.each(chartCases)("uses publication semantics for command and UI examples: $name", ({ chart, accepted }) => {
|
||||
const records = [
|
||||
{ record_type: "presentation", command: { action: "open_chart", chart_id: "comparison", chart, evidence_refs: ["dev:synthetic"] } },
|
||||
{ record_type: "ui_block", block: { version: "answer-ui@1", block_id: "comparison", fallback_text: "合成测试", spec: {
|
||||
root: "chart", elements: { chart: { type: "Chart", props: { ...chart, source: "合成测试" }, children: [] } }
|
||||
} } }
|
||||
];
|
||||
for (const record of records) {
|
||||
const parse = () => parseInvestigationDevJsonl(JSON.stringify(record));
|
||||
if (accepted) expect(parse).not.toThrow();
|
||||
else expect(parse).toThrow("第 1 行");
|
||||
}
|
||||
});
|
||||
it("separates explicit display actions, validated UI blocks and synthetic investigation data", () => {
|
||||
const result = parseInvestigationDevJsonl(
|
||||
createInvestigationDevSample()
|
||||
@@ -130,7 +144,7 @@ describe("migrated example data", () => {
|
||||
await import("../../../../tests/fixtures/unified-presentation.jsonl?raw");
|
||||
const { PRESENTATION_ACTIONS } = await import("@/features/agent");
|
||||
const preview = parseInvestigationDevJsonl(input);
|
||||
expect(preview.commands.map((command) => command.action).sort()).toEqual(
|
||||
expect([...new Set(preview.commands.map((command) => command.action))].sort()).toEqual(
|
||||
[...PRESENTATION_ACTIONS].sort()
|
||||
);
|
||||
expect(preview.blocks).toHaveLength(1);
|
||||
|
||||
@@ -2,6 +2,8 @@ import { z } from "zod";
|
||||
import {
|
||||
parseAnswerUiBlock,
|
||||
presentationCommandSchema,
|
||||
safeChartPublicationInput,
|
||||
chartPublicationError,
|
||||
type AnswerUiBlock
|
||||
} from "@/features/agent";
|
||||
import { type InvestigationPresentationCommand } from "../api/investigation-presentation";
|
||||
@@ -36,7 +38,11 @@ export const investigationActionLabels: Record<InvestigationPresentationCommand[
|
||||
};
|
||||
|
||||
const references = z.array(z.string().trim().min(1).max(128)).max(100);
|
||||
const command = presentationCommandSchema;
|
||||
const command = presentationCommandSchema.superRefine((value, ctx) => {
|
||||
if (value.action !== "open_chart") return;
|
||||
const chart = safeChartPublicationInput.safeParse(value.chart);
|
||||
if (!chart.success) for (const issue of chart.error.issues) ctx.addIssue({ ...issue, path: ["chart", ...issue.path] });
|
||||
});
|
||||
const presentationRecord = z.object({ record_type: z.literal("presentation"), command }).strict();
|
||||
const uiRecord = z
|
||||
.object({
|
||||
@@ -78,7 +84,7 @@ export function parseInvestigationDevJsonl(input: string): InvestigationDevPrevi
|
||||
const record = value as Record<string, unknown>;
|
||||
if (record.record_type === "presentation") {
|
||||
const parsed = presentationRecord.safeParse(value);
|
||||
if (!parsed.success) throw new Error(`第 ${line} 行展示指令不合法，请检查动作、参数和范围。`);
|
||||
if (!parsed.success) throw new Error(`第 ${line} 行展示指令不合法：${parsed.error.issues[0]?.message ?? "请检查动作、参数和范围。"}`);
|
||||
const data = parsed.data;
|
||||
result.commands.push(data.command);
|
||||
} else if (record.record_type === "ui_block") {
|
||||
@@ -86,6 +92,7 @@ export function parseInvestigationDevJsonl(input: string): InvestigationDevPrevi
|
||||
const block = parseAnswerUiBlock(wrapped.success ? wrapped.data.block : null);
|
||||
if (!block || blockIds.has(block.block_id))
|
||||
throw new Error(`第 ${line} 行界面块不合法或 block_id 重复。`);
|
||||
validateChartNodes(block, `第 ${line} 行`);
|
||||
blockIds.add(block.block_id);
|
||||
result.blocks.push(block);
|
||||
if (result.blocks.length > 8) throw new Error("一次最多预览 8 个界面块。");
|
||||
@@ -107,6 +114,7 @@ export function createPresentationRecord(command: InvestigationPresentationComma
|
||||
export function createUiRecord(block: AnswerUiBlock, evidenceRefs: string[] = []) {
|
||||
const normalized = parseAnswerUiBlock({ ...block, phase: block.phase ?? "final" });
|
||||
if (!normalized) throw new Error("界面块未通过当前组件协议校验。");
|
||||
validateChartNodes(normalized, "界面块");
|
||||
return uiRecord.parse({
|
||||
record_type: "ui_block",
|
||||
block: normalized,
|
||||
@@ -114,6 +122,15 @@ export function createUiRecord(block: AnswerUiBlock, evidenceRefs: string[] = []
|
||||
});
|
||||
}
|
||||
|
||||
function validateChartNodes(block: AnswerUiBlock, prefix: string) {
|
||||
for (const node of Object.values(block.spec.elements)) {
|
||||
if (node.type !== "Chart") continue;
|
||||
// The answer catalog owns its text limits; only publication time semantics are shared.
|
||||
const message = chartPublicationError(node.props as Parameters<typeof chartPublicationError>[0]);
|
||||
if (message) throw new Error(`${prefix}图表不合法：${message}`);
|
||||
}
|
||||
}
|
||||
|
||||
export function serializeInvestigationDevJsonl(records: unknown[]) {
|
||||
const input = records.map((record) => JSON.stringify(record)).join("\n");
|
||||
parseInvestigationDevJsonl(input);
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import { expect, it } from "vitest";
|
||||
import type { AnswerUiBlock } from "@/features/agent";
|
||||
import { presentationChartBlocks } from "./presentation-chart-blocks";
|
||||
|
||||
it("collects report charts in document order with distinct identities and intact props", () => {
|
||||
const chart = { type: "Chart", props: { title: "压力", source: "保存的证据", series: [] }, children: [] };
|
||||
const block: AnswerUiBlock = { version: "answer-ui@1", block_id: "report", fallback_text: "报告", spec: {
|
||||
root: "root", elements: {
|
||||
root: { type: "Stack", props: {}, children: ["second", "first", "text"] },
|
||||
first: chart, second: chart, orphan: chart,
|
||||
text: { type: "Text", props: { text: "结论" }, children: [] }
|
||||
}
|
||||
} };
|
||||
const results = presentationChartBlocks([block]);
|
||||
expect(results.map((item) => item.block_id)).toEqual(["report:second", "report:first"]);
|
||||
expect(results[0].spec).toEqual({ root: "second", elements: { second: chart } });
|
||||
expect(results[0].spec.elements.second.props).toBe(chart.props);
|
||||
expect(block.spec.root).toBe("root");
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { AnswerUiBlock } from "@/features/agent";
|
||||
|
||||
/** Include only reachable Chart nodes, preserving report props and their source. */
|
||||
export function presentationChartBlocks(blocks: AnswerUiBlock[]): AnswerUiBlock[] {
|
||||
return blocks.flatMap((block) => {
|
||||
const charts: AnswerUiBlock[] = [];
|
||||
const visited = new Set<string>();
|
||||
const visit = (id: string) => {
|
||||
if (visited.has(id)) return;
|
||||
visited.add(id);
|
||||
const element = block.spec.elements[id];
|
||||
if (!element) return;
|
||||
if (element.type === "Chart") charts.push({
|
||||
...block,
|
||||
block_id: `${block.block_id}:${id}`,
|
||||
spec: { root: id, elements: { [id]: element } }
|
||||
});
|
||||
else element.children?.forEach(visit);
|
||||
};
|
||||
visit(block.spec.root);
|
||||
return charts;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { afterEach, expect, it, vi } from "vitest";
|
||||
import { floatingWindowEntries, floatingWindowOrder, raiseFloatingWindow, registerFloatingWindow, removeFloatingWindow, subscribeFloatingWindows } from "./floating-window-layer";
|
||||
|
||||
afterEach(() => floatingWindowOrder().forEach(removeFloatingWindow));
|
||||
|
||||
it("keeps a stable snapshot, follows stacking order and removes window metadata", () => {
|
||||
const notify = vi.fn();
|
||||
const stop = subscribeFloatingWindows(notify);
|
||||
const first = { id: "first", title: "压力图", focus: vi.fn(), close: vi.fn() };
|
||||
registerFloatingWindow(first);
|
||||
const snapshot = floatingWindowEntries();
|
||||
expect(floatingWindowEntries()).toBe(snapshot);
|
||||
registerFloatingWindow({ id: "second", title: "流量图", focus: vi.fn(), close: vi.fn() });
|
||||
expect(floatingWindowEntries().map((entry) => entry.id)).toEqual(["first", "second"]);
|
||||
raiseFloatingWindow("first");
|
||||
expect(floatingWindowEntries().map((entry) => entry.id)).toEqual(["second", "first"]);
|
||||
removeFloatingWindow("first");
|
||||
expect(floatingWindowEntries().map((entry) => entry.id)).toEqual(["second"]);
|
||||
removeFloatingWindow("second");
|
||||
expect(floatingWindowEntries()).toEqual([]);
|
||||
expect(notify).toHaveBeenCalledTimes(5);
|
||||
stop();
|
||||
});
|
||||
|
||||
it("updates titles without moving windows and calls the latest actions without snapshot churn", () => {
|
||||
const focus = vi.fn(), close = vi.fn();
|
||||
registerFloatingWindow({ id: "chart", title: "旧标题", focus: vi.fn(), close: vi.fn() });
|
||||
const initial = floatingWindowEntries();
|
||||
registerFloatingWindow({ id: "chart", title: "旧标题", focus, close });
|
||||
expect(floatingWindowEntries()).toBe(initial);
|
||||
initial[0].focus();
|
||||
initial[0].close();
|
||||
expect(focus).toHaveBeenCalledOnce();
|
||||
expect(close).toHaveBeenCalledOnce();
|
||||
registerFloatingWindow({ id: "chart", title: "新标题", focus, close });
|
||||
expect(floatingWindowEntries()[0].title).toBe("新标题");
|
||||
expect(initial[0].title).toBe("旧标题");
|
||||
expect(floatingWindowOrder()).toEqual(["chart"]);
|
||||
removeFloatingWindow("chart");
|
||||
initial[0].focus();
|
||||
initial[0].close();
|
||||
expect(focus).toHaveBeenCalledOnce();
|
||||
expect(close).toHaveBeenCalledOnce();
|
||||
});
|
||||
@@ -1,23 +1,58 @@
|
||||
let order: string[] = [];
|
||||
const listeners = new Set<() => void>();
|
||||
let host: HTMLDivElement | undefined;
|
||||
export type FloatingWindowEntry = { id: string; title: string; focus: () => void; close: () => void };
|
||||
const registered = new Map<string, {
|
||||
entry: FloatingWindowEntry;
|
||||
actions: Pick<FloatingWindowEntry, "focus" | "close">;
|
||||
}>();
|
||||
let entries: readonly FloatingWindowEntry[] = [];
|
||||
|
||||
function publishWindows() {
|
||||
entries = order.flatMap((id) => {
|
||||
const record = registered.get(id);
|
||||
return record ? [record.entry] : [];
|
||||
});
|
||||
listeners.forEach((listener) => listener());
|
||||
}
|
||||
|
||||
export const floatingWindowOrder = () => order;
|
||||
/** Stable between changes, ordered from the back window to the foreground. */
|
||||
export const floatingWindowEntries = () => entries;
|
||||
export const subscribeFloatingWindows = (listener: () => void) => {
|
||||
listeners.add(listener);
|
||||
return () => { listeners.delete(listener); };
|
||||
};
|
||||
|
||||
export function registerFloatingWindow(entry: FloatingWindowEntry) {
|
||||
const previous = registered.get(entry.id);
|
||||
if (previous) {
|
||||
// Callbacks can change without invalidating the subscribed presentation.
|
||||
previous.actions.focus = entry.focus;
|
||||
previous.actions.close = entry.close;
|
||||
if (previous.entry.title === entry.title) return;
|
||||
previous.entry = { ...previous.entry, title: entry.title };
|
||||
} else {
|
||||
const actions = { focus: entry.focus, close: entry.close };
|
||||
registered.set(entry.id, { actions, entry: { id: entry.id, title: entry.title,
|
||||
focus: () => { if (registered.get(entry.id)?.actions === actions) actions.focus(); },
|
||||
close: () => { if (registered.get(entry.id)?.actions === actions) actions.close(); } } });
|
||||
if (!order.includes(entry.id)) order = [...order, entry.id];
|
||||
}
|
||||
publishWindows();
|
||||
}
|
||||
|
||||
export function raiseFloatingWindow(id: string) {
|
||||
if (order.at(-1) === id) return;
|
||||
order = [...order.filter((item) => item !== id), id];
|
||||
listeners.forEach((listener) => listener());
|
||||
publishWindows();
|
||||
}
|
||||
|
||||
export function removeFloatingWindow(id: string) {
|
||||
if (!order.includes(id)) return;
|
||||
if (!order.includes(id) && !registered.has(id)) return;
|
||||
registered.delete(id);
|
||||
order = order.filter((item) => item !== id);
|
||||
listeners.forEach((listener) => listener());
|
||||
publishWindows();
|
||||
}
|
||||
|
||||
export function floatingWindowHost() {
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
/** Hosts can reserve a top navigation area without raising it above modal dialogs. */
|
||||
export function floatingWindowTopInset() {
|
||||
return Math.max(8, ...Array.from(document.querySelectorAll<HTMLElement>("[data-floating-window-inset-top]"))
|
||||
.map((element) => element.getBoundingClientRect().bottom + 8));
|
||||
}
|
||||
@@ -1,24 +1,39 @@
|
||||
import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Rnd } from "react-rnd";
|
||||
import { Maximize2, Minimize2, X } from "lucide-react";
|
||||
import { Button } from "./button";
|
||||
import { floatingWindowHost, floatingWindowOrder, raiseFloatingWindow, removeFloatingWindow, subscribeFloatingWindows } from "./floating-window-layer";
|
||||
import { floatingWindowHost, floatingWindowOrder, registerFloatingWindow, raiseFloatingWindow, removeFloatingWindow, subscribeFloatingWindows } from "./floating-window-layer";
|
||||
import { floatingWindowTopInset } from "./floating-window-viewport";
|
||||
import { useFloatingWindowDrag } from "./use-floating-window-drag";
|
||||
import { useFloatingWindowResize, type ResizeEdge } from "./use-floating-window-resize";
|
||||
|
||||
type Bounds = { x: number; y: number; width: number; height: number };
|
||||
const resizeHandles: Record<ResizeEdge, React.CSSProperties> = {
|
||||
top: { top: 0, left: 18, right: 18, height: 8, cursor: "ns-resize" },
|
||||
right: { right: 0, top: 18, bottom: 18, width: 8, cursor: "ew-resize" },
|
||||
bottom: { bottom: 0, left: 18, right: 18, height: 8, cursor: "ns-resize" },
|
||||
left: { left: 0, top: 18, bottom: 18, width: 8, cursor: "ew-resize" },
|
||||
topRight: { top: 0, right: 0, width: 18, height: 18, cursor: "nesw-resize" },
|
||||
topLeft: { top: 0, left: 0, width: 18, height: 18, cursor: "nwse-resize" },
|
||||
bottomLeft: { bottom: 0, left: 0, width: 18, height: 18, cursor: "nesw-resize" },
|
||||
bottomRight: { bottom: 0, right: 0, width: 18, height: 18, cursor: "nwse-resize" }
|
||||
};
|
||||
|
||||
function fitWindow(bounds: Bounds): Bounds {
|
||||
const top = floatingWindowTopInset();
|
||||
const width = Math.min(bounds.width, window.innerWidth - 16);
|
||||
const height = Math.min(bounds.height, window.innerHeight - 16);
|
||||
const height = Math.min(bounds.height, window.innerHeight - top - 8);
|
||||
return { width, height,
|
||||
x: Math.max(8, Math.min(bounds.x, window.innerWidth - width - 8)),
|
||||
y: Math.max(8, Math.min(bounds.y, window.innerHeight - height - 8)) };
|
||||
y: Math.max(top, Math.min(bounds.y, window.innerHeight - height - 8)) };
|
||||
}
|
||||
|
||||
export function FloatingWindow({ title, triggerLabel, fillContent = false, openRequestKey, children }: {
|
||||
export function FloatingWindow({ title, navigationTitle, triggerLabel, fillContent = false, openRequestKey, triggerContent, initialSize = { width: 800, height: 560 }, children }: {
|
||||
title: string;
|
||||
navigationTitle?: string;
|
||||
triggerLabel?: string;
|
||||
triggerContent?: ReactNode;
|
||||
initialSize?: { width: number; height: number };
|
||||
fillContent?: boolean;
|
||||
/** A new display request opens the window without taking keyboard focus. */
|
||||
openRequestKey?: string;
|
||||
@@ -33,8 +48,9 @@ export function FloatingWindow({ title, triggerLabel, fillContent = false, openR
|
||||
if (request.key !== openRequestKey) setRequest({ key: openRequestKey, dismissed: false });
|
||||
const open = manuallyOpen || (openRequestKey !== undefined && !request.dismissed);
|
||||
const [maximized, setMaximized] = useState(false);
|
||||
const [bounds, setBounds] = useState<Bounds>(() => fitWindow({ x: (window.innerWidth - 800) / 2, y: 64, width: 800, height: 560 }));
|
||||
const [bounds, setBounds] = useState<Bounds>(() => fitWindow({ x: (window.innerWidth - initialSize.width) / 2, y: 64, ...initialSize }));
|
||||
const [viewport, setViewport] = useState({ width: window.innerWidth, height: window.innerHeight });
|
||||
const initialSizeRef = useRef(initialSize);
|
||||
const order = useSyncExternalStore(subscribeFloatingWindows, floatingWindowOrder);
|
||||
const trigger = useRef<HTMLButtonElement>(null);
|
||||
const heading = useRef<HTMLDivElement>(null);
|
||||
@@ -48,6 +64,14 @@ export function FloatingWindow({ title, triggerLabel, fillContent = false, openR
|
||||
trigger.current?.focus({ preventScroll: true });
|
||||
};
|
||||
|
||||
const closeRef = useRef(close);
|
||||
closeRef.current = close;
|
||||
useLayoutEffect(() => {
|
||||
if (open) registerFloatingWindow({ id, title: navigationTitle ?? title,
|
||||
focus: () => { raiseFloatingWindow(id); heading.current?.focus({ preventScroll: true }); },
|
||||
close: () => closeRef.current() });
|
||||
}, [id, open, title, navigationTitle]);
|
||||
|
||||
useEffect(() => () => removeFloatingWindow(id), [id]);
|
||||
useLayoutEffect(() => {
|
||||
if (!open) return;
|
||||
@@ -62,8 +86,8 @@ export function FloatingWindow({ title, triggerLabel, fillContent = false, openR
|
||||
// Keep the preceding headings exposed. Shorter viewports reduce content
|
||||
// height instead of clamping several windows onto the same title bar.
|
||||
// Absolute placement also makes StrictMode's repeated setup idempotent.
|
||||
setBounds(fitWindow({ x: (window.innerWidth - 800) / 2 + slot * 24, y,
|
||||
width: 800, height: Math.min(560, window.innerHeight - y - 8) }));
|
||||
setBounds(fitWindow({ x: (window.innerWidth - initialSizeRef.current.width) / 2 + slot * 24, y,
|
||||
width: initialSizeRef.current.width, height: Math.min(initialSizeRef.current.height, window.innerHeight - y - 8) }));
|
||||
raiseFloatingWindow(id);
|
||||
if (focusOnOpen.current) heading.current?.focus({ preventScroll: true });
|
||||
focusOnOpen.current = false;
|
||||
@@ -83,15 +107,17 @@ export function FloatingWindow({ title, triggerLabel, fillContent = false, openR
|
||||
}, [id, open]);
|
||||
|
||||
const current = maximized
|
||||
? { x: 8, y: 8, width: viewport.width - 16, height: viewport.height - 16 }
|
||||
? { x: 8, y: floatingWindowTopInset(), width: viewport.width - 16, height: viewport.height - floatingWindowTopInset() - 8 }
|
||||
: bounds;
|
||||
const startDrag = useFloatingWindowDrag({ enabled: open && !maximized, position: current,
|
||||
width: current.width, height: current.height,
|
||||
onCommit: (position) => setBounds((previous) => fitWindow({ ...previous, ...position })) });
|
||||
|
||||
const startResize = useFloatingWindowResize({ enabled: open && !maximized, bounds: current, onCommit: (next) => setBounds(fitWindow(next)) });
|
||||
|
||||
return <>
|
||||
<Button ref={trigger} type="button" variant="ghost" size="icon-sm" className="shrink-0"
|
||||
aria-label={triggerLabel ?? `放大查看 ${title}`} title="放大查看" aria-haspopup="dialog" aria-expanded={open}
|
||||
<Button ref={trigger} type="button" variant="ghost" size={triggerContent ? "sm" : "icon-sm"} className="shrink-0"
|
||||
aria-label={triggerLabel ?? `放大查看 ${title}`} title={triggerLabel ?? "放大查看"} aria-haspopup="dialog" aria-expanded={open}
|
||||
onClick={() => {
|
||||
if (!open) {
|
||||
setViewport({ width: window.innerWidth, height: window.innerHeight });
|
||||
@@ -100,27 +126,12 @@ export function FloatingWindow({ title, triggerLabel, fillContent = false, openR
|
||||
setManuallyOpen(true);
|
||||
} else heading.current?.focus({ preventScroll: true });
|
||||
raise();
|
||||
}}><Maximize2 size={15} aria-hidden /></Button>
|
||||
}}><Maximize2 size={15} aria-hidden />{triggerContent}</Button>
|
||||
{open ? createPortal(
|
||||
<Rnd size={{ width: current.width, height: current.height }} position={{ x: current.x, y: current.y }}
|
||||
bounds="parent" minWidth={Math.min(320, viewport.width - 16)} minHeight={Math.min(260, viewport.height - 16)}
|
||||
maxWidth={viewport.width - 16} maxHeight={viewport.height - 16}
|
||||
dragHandleClassName="floating-window-heading" cancel="button,input,select,textarea,a"
|
||||
disableDragging enableResizing={!maximized}
|
||||
onResizeStop={(_, __, element, ___, position) => setBounds(fitWindow({ ...position, width: element.offsetWidth, height: element.offsetHeight }))}
|
||||
style={{ zIndex: order.indexOf(id) + 1, display: "flex", flexDirection: "column" }}
|
||||
resizeHandleClasses={{ bottomRight: "floating-window-resize" }}
|
||||
resizeHandleStyles={{
|
||||
top: { top: 0, height: 8 }, right: { right: 0, width: 8 },
|
||||
bottom: { bottom: 0, height: 8 }, left: { left: 0, width: 8 },
|
||||
topRight: { top: 0, right: 0, width: 18, height: 18 },
|
||||
topLeft: { top: 0, left: 0, width: 18, height: 18 },
|
||||
bottomLeft: { bottom: 0, left: 0, width: 18, height: 18 },
|
||||
bottomRight: { right: 0, bottom: 0, width: 18, height: 18 }
|
||||
}}
|
||||
resizeHandleComponent={{ bottomRight: <span aria-hidden className="absolute bottom-1 right-1 size-2 border-b-2 border-r-2 border-muted-foreground/60" /> }}
|
||||
<div style={{ position: "absolute", left: 0, top: 0, width: current.width, height: current.height,
|
||||
transform: `translate(${current.x}px, ${current.y}px)`, zIndex: order.indexOf(id) + 1 }}
|
||||
className="workbench-shadcn-surface pointer-events-auto flex flex-col overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-lg"
|
||||
role="dialog" aria-modal="false" aria-labelledby={titleId} data-floating-window=""
|
||||
role="dialog" aria-modal="false" aria-labelledby={titleId} data-floating-window="" data-floating-window-id={id}
|
||||
onPointerDownCapture={raise} onFocusCapture={raise}
|
||||
onKeyDown={(event: React.KeyboardEvent) => {
|
||||
if (event.key === "Escape" && !event.defaultPrevented) { event.stopPropagation(); close(); }
|
||||
@@ -154,6 +165,13 @@ export function FloatingWindow({ title, triggerLabel, fillContent = false, openR
|
||||
{children({ width: current.width - 26, height: current.height - 76 })}
|
||||
</div>
|
||||
</div>
|
||||
</Rnd>, floatingWindowHost()) : null}
|
||||
{!maximized ? (Object.entries(resizeHandles) as Array<[ResizeEdge, React.CSSProperties]>).map(([edge, style]) => (
|
||||
<div key={edge} aria-hidden data-window-resize-handle={edge}
|
||||
className={`absolute z-10 touch-none ${edge === "bottomRight" ? "floating-window-resize" : ""}`}
|
||||
style={style} onPointerDown={(event) => startResize(event, edge)}>
|
||||
{edge === "bottomRight" ? <span className="pointer-events-none absolute bottom-1 right-1 size-2 border-b-2 border-r-2 border-muted-foreground/60" /> : null}
|
||||
</div>
|
||||
)) : null}
|
||||
</div>, floatingWindowHost()) : null}
|
||||
</>;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useLayoutEffect, useRef, type PointerEvent as ReactPointerEvent } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { floatingWindowTopInset } from "./floating-window-viewport";
|
||||
|
||||
type Position = { x: number; y: number };
|
||||
|
||||
@@ -15,9 +16,11 @@ export function useFloatingWindowDrag({ enabled, position, width, height, onComm
|
||||
useLayoutEffect(() => {
|
||||
const stop = () => cancel.current?.();
|
||||
window.addEventListener("resize", stop);
|
||||
window.addEventListener("blur", stop);
|
||||
return () => {
|
||||
stop();
|
||||
window.removeEventListener("resize", stop);
|
||||
window.removeEventListener("blur", stop);
|
||||
};
|
||||
}, [enabled]);
|
||||
|
||||
@@ -34,6 +37,7 @@ export function useFloatingWindowDrag({ enabled, position, width, height, onComm
|
||||
const startY = event.clientY;
|
||||
const maxX = window.innerWidth - width - 8;
|
||||
const maxY = window.innerHeight - height - 8;
|
||||
const minY = floatingWindowTopInset();
|
||||
const previousTranslate = element.style.translate;
|
||||
const previousWillChange = element.style.willChange;
|
||||
let next = position;
|
||||
@@ -42,7 +46,7 @@ export function useFloatingWindowDrag({ enabled, position, width, height, onComm
|
||||
const updatePosition = (pointer: PointerEvent) => {
|
||||
next = {
|
||||
x: Math.max(8, Math.min(position.x + pointer.clientX - startX, maxX)),
|
||||
y: Math.max(8, Math.min(position.y + pointer.clientY - startY, maxY))
|
||||
y: Math.max(minY, Math.min(position.y + pointer.clientY - startY, maxY))
|
||||
};
|
||||
};
|
||||
const move = (pointer: PointerEvent) => {
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
import { act, cleanup, renderHook } from "@testing-library/react";
|
||||
import type { PointerEvent as ReactPointerEvent } from "react";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { resizedFloatingBounds, useFloatingWindowResize, type ResizeEdge } from "./use-floating-window-resize";
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
document.body.replaceChildren();
|
||||
document.body.style.userSelect = "";
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
describe("floating window resize constraints", () => {
|
||||
const start = { x: 300, y: 200, width: 800, height: 560 };
|
||||
const viewport = { width: 1440, height: 900 };
|
||||
it("preserves opposite edges when resizing from the left and top", () => {
|
||||
expect(resizedFloatingBounds(start, "topLeft", -400, -300, viewport)).toEqual({ x: 8, y: 8, width: 1092, height: 752 });
|
||||
expect(resizedFloatingBounds(start, "topLeft", 1200, 1200, viewport)).toEqual({ x: 780, y: 500, width: 320, height: 260 });
|
||||
});
|
||||
it("limits the bottom and right edges to the viewport", () => {
|
||||
expect(resizedFloatingBounds(start, "bottomRight", 2000, 2000, viewport)).toEqual({ x: 300, y: 200, width: 1132, height: 692 });
|
||||
});
|
||||
it("keeps a narrow window inside the viewport and respects reserved top navigation", () => {
|
||||
expect(resizedFloatingBounds({ x: 8, y: 64, width: 304, height: 400 }, "topLeft", -200, -200, { width: 320, height: 720, top: 64 }))
|
||||
.toEqual({ x: 8, y: 64, width: 304, height: 400 });
|
||||
});
|
||||
|
||||
it.each<[ResizeEdge, { x: number; y: number; width: number; height: number }]>([
|
||||
["top", { x: 300, y: 240, width: 800, height: 520 }],
|
||||
["right", { x: 300, y: 200, width: 840, height: 560 }],
|
||||
["bottom", { x: 300, y: 200, width: 800, height: 600 }],
|
||||
["left", { x: 340, y: 200, width: 760, height: 560 }],
|
||||
["topRight", { x: 300, y: 240, width: 840, height: 520 }],
|
||||
["topLeft", { x: 340, y: 240, width: 760, height: 520 }],
|
||||
["bottomRight", { x: 300, y: 200, width: 840, height: 600 }],
|
||||
["bottomLeft", { x: 340, y: 200, width: 760, height: 600 }]
|
||||
])("resizes %s while preserving the opposite edges", (edge, expected) => {
|
||||
expect(resizedFloatingBounds(start, edge, 40, 40, viewport)).toEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
function resizeFixture() {
|
||||
const frames = new Map<number, FrameRequestCallback>();
|
||||
let frameId = 0;
|
||||
vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => { frames.set(++frameId, callback); return frameId; });
|
||||
vi.stubGlobal("cancelAnimationFrame", (id: number) => { frames.delete(id); });
|
||||
const shell = document.createElement("div");
|
||||
shell.dataset.floatingWindow = "";
|
||||
Object.assign(shell.style, { width: "320px", height: "260px" });
|
||||
const heading = document.createElement("div");
|
||||
heading.className = "floating-window-heading";
|
||||
heading.tabIndex = 0;
|
||||
const content = document.createElement("div");
|
||||
content.dataset.floatingWindowContent = "";
|
||||
content.style.overflow = "auto";
|
||||
const drawing = document.createElement("div");
|
||||
drawing.dataset.floatingWindowDocument = "";
|
||||
Object.assign(drawing.style, { width: "100%", height: "100%", fontSize: "12px" });
|
||||
const handle = document.createElement("div");
|
||||
content.append(drawing);
|
||||
shell.append(heading, content, handle);
|
||||
document.body.append(shell);
|
||||
document.body.style.userSelect = "text";
|
||||
const captures = new Set<number>();
|
||||
handle.setPointerCapture = vi.fn((id: number) => { captures.add(id); });
|
||||
handle.hasPointerCapture = (id: number) => captures.has(id);
|
||||
handle.releasePointerCapture = vi.fn((id: number) => { captures.delete(id); });
|
||||
const onCommit = vi.fn();
|
||||
const hook = renderHook(({ enabled }) => useFloatingWindowResize({ enabled,
|
||||
bounds: { x: 100, y: 100, width: 320, height: 260 }, onCommit
|
||||
}), { initialProps: { enabled: true } });
|
||||
const pointer = (type: string, x = 164, y = 132) => {
|
||||
const event = new MouseEvent(type, { clientX: x, clientY: y, bubbles: true });
|
||||
Object.defineProperty(event, "pointerId", { value: 7 });
|
||||
handle.dispatchEvent(event);
|
||||
};
|
||||
const start = () => act(() => hook.result.current({
|
||||
isPrimary: true, button: 0, currentTarget: handle, pointerId: 7, clientX: 100, clientY: 100,
|
||||
preventDefault: vi.fn(), stopPropagation: vi.fn()
|
||||
} as unknown as ReactPointerEvent<HTMLDivElement>, "bottomRight"));
|
||||
const paint = () => { const pending = [...frames.values()]; frames.clear(); pending.forEach((callback) => callback(16)); };
|
||||
return { shell, content, drawing, handle, hook, onCommit, pointer, start, paint, frames };
|
||||
}
|
||||
|
||||
describe("floating resize lifecycle", () => {
|
||||
it("coalesces shell updates per frame without freezing or scaling its document", () => {
|
||||
const fixture = resizeFixture();
|
||||
fixture.start();
|
||||
fixture.pointer("pointermove", 132, 116);
|
||||
fixture.pointer("pointermove");
|
||||
expect(fixture.frames.size).toBe(1);
|
||||
expect(fixture.shell.style.width).toBe("320px");
|
||||
fixture.paint();
|
||||
expect(fixture.shell.style.width).toBe("384px");
|
||||
expect(fixture.shell.style.height).toBe("292px");
|
||||
expect(fixture.drawing.style.cssText).toBe("width: 100%; height: 100%; font-size: 12px;");
|
||||
expect(fixture.content.style.overflow).toBe("auto");
|
||||
expect(fixture.onCommit).not.toHaveBeenCalled();
|
||||
fixture.pointer("pointerup");
|
||||
expect(fixture.onCommit).toHaveBeenCalledExactlyOnceWith({ x: 100, y: 100, width: 384, height: 292 });
|
||||
expect(fixture.shell.dataset.floatingWindowResizing).toBeUndefined();
|
||||
expect(fixture.handle.hasPointerCapture(7)).toBe(false);
|
||||
expect(document.body.style.userSelect).toBe("text");
|
||||
});
|
||||
|
||||
it.each(["pointercancel", "lostpointercapture", "blur", "resize", "Escape", "disable", "unmount"])(
|
||||
"restores shell styles and releases capture on %s", (reason) => {
|
||||
const fixture = resizeFixture();
|
||||
fixture.start();
|
||||
fixture.pointer("pointermove");
|
||||
fixture.paint();
|
||||
expect(fixture.shell.style.width).toBe("384px");
|
||||
if (reason === "Escape") window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", cancelable: true }));
|
||||
else if (reason === "blur" || reason === "resize") window.dispatchEvent(new Event(reason));
|
||||
else if (reason === "disable") fixture.hook.rerender({ enabled: false });
|
||||
else if (reason === "unmount") fixture.hook.unmount();
|
||||
else fixture.pointer(reason);
|
||||
expect(fixture.shell.style.width).toBe("320px");
|
||||
expect(fixture.shell.style.height).toBe("260px");
|
||||
expect(fixture.shell.style.translate).toBe("");
|
||||
expect(fixture.drawing.style.cssText).toBe("width: 100%; height: 100%; font-size: 12px;");
|
||||
expect(fixture.content.style.overflow).toBe("auto");
|
||||
expect(fixture.shell.dataset.floatingWindowResizing).toBeUndefined();
|
||||
expect(document.body.style.userSelect).toBe("text");
|
||||
expect(fixture.handle.hasPointerCapture(7)).toBe(false);
|
||||
expect(fixture.onCommit).not.toHaveBeenCalled();
|
||||
fixture.paint();
|
||||
expect(fixture.shell.style.width).toBe("320px");
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useLayoutEffect, useRef, type PointerEvent as ReactPointerEvent } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { floatingWindowTopInset } from "./floating-window-viewport";
|
||||
|
||||
export type FloatingBounds = { x: number; y: number; width: number; height: number };
|
||||
export type ResizeEdge = "top" | "right" | "bottom" | "left" | "topRight" | "topLeft" | "bottomRight" | "bottomLeft";
|
||||
|
||||
export function resizedFloatingBounds(start: FloatingBounds, edge: ResizeEdge, dx: number, dy: number, viewport: { width: number; height: number; top?: number }): FloatingBounds {
|
||||
const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
|
||||
const minWidth = Math.min(320, viewport.width - 16);
|
||||
const insetTop = viewport.top ?? 8;
|
||||
const minHeight = Math.min(260, viewport.height - insetTop - 8);
|
||||
let left = start.x, top = start.y, right = start.x + start.width, bottom = start.y + start.height;
|
||||
const direction = edge.toLowerCase();
|
||||
if (direction.includes("left")) left = clamp(left + dx, 8, right - minWidth);
|
||||
if (direction.includes("right")) right = clamp(right + dx, left + minWidth, viewport.width - 8);
|
||||
if (direction.includes("top")) top = clamp(top + dy, insetTop, bottom - minHeight);
|
||||
if (direction.includes("bottom")) bottom = clamp(bottom + dy, top + minHeight, viewport.height - 8);
|
||||
return { x: left, y: top, width: right - left, height: bottom - top };
|
||||
}
|
||||
|
||||
/** Resize the shell per frame so its contents reflow naturally; commit bounds on release. */
|
||||
export function useFloatingWindowResize({ enabled, bounds, onCommit }: {
|
||||
enabled: boolean;
|
||||
bounds: FloatingBounds;
|
||||
onCommit: (bounds: FloatingBounds) => void;
|
||||
}) {
|
||||
const cancel = useRef<(() => void) | null>(null);
|
||||
useLayoutEffect(() => {
|
||||
const stop = () => cancel.current?.();
|
||||
window.addEventListener("resize", stop);
|
||||
window.addEventListener("blur", stop);
|
||||
return () => { stop(); window.removeEventListener("resize", stop); window.removeEventListener("blur", stop); };
|
||||
}, [enabled]);
|
||||
|
||||
return (event: ReactPointerEvent<HTMLDivElement>, edge: ResizeEdge) => {
|
||||
if (!enabled || !event.isPrimary || event.button !== 0 || cancel.current) return;
|
||||
const handle = event.currentTarget;
|
||||
const shell = handle.closest<HTMLElement>("[data-floating-window]");
|
||||
if (!shell) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
shell.querySelector<HTMLElement>(".floating-window-heading")?.focus({ preventScroll: true });
|
||||
const pointerId = event.pointerId;
|
||||
const startX = event.clientX, startY = event.clientY;
|
||||
const viewport = { width: window.innerWidth, height: window.innerHeight, top: floatingWindowTopInset() };
|
||||
const shellStyle = { width: shell.style.width, height: shell.style.height, translate: shell.style.translate };
|
||||
const selection = window.document.body.style.userSelect;
|
||||
let next = bounds;
|
||||
let frame = 0;
|
||||
shell.dataset.floatingWindowResizing = "true";
|
||||
window.document.body.style.userSelect = "none";
|
||||
const update = (pointer: PointerEvent) => {
|
||||
next = resizedFloatingBounds(bounds, edge, pointer.clientX - startX, pointer.clientY - startY, viewport);
|
||||
};
|
||||
const paint = () => {
|
||||
frame = 0;
|
||||
shell.style.width = `${next.width}px`;
|
||||
shell.style.height = `${next.height}px`;
|
||||
shell.style.translate = `${next.x - bounds.x}px ${next.y - bounds.y}px`;
|
||||
};
|
||||
const move = (pointer: PointerEvent) => {
|
||||
if (pointer.pointerId !== pointerId) return;
|
||||
update(pointer);
|
||||
if (!frame) frame = requestAnimationFrame(paint);
|
||||
};
|
||||
const cleanup = () => {
|
||||
cancel.current = null;
|
||||
cancelAnimationFrame(frame);
|
||||
handle.removeEventListener("pointermove", move);
|
||||
handle.removeEventListener("pointerup", finish);
|
||||
handle.removeEventListener("pointercancel", abort);
|
||||
handle.removeEventListener("lostpointercapture", abort);
|
||||
window.removeEventListener("keydown", escape, true);
|
||||
Object.assign(shell.style, shellStyle);
|
||||
window.document.body.style.userSelect = selection;
|
||||
delete shell.dataset.floatingWindowResizing;
|
||||
if (handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId);
|
||||
};
|
||||
const abort = (pointer: PointerEvent) => { if (pointer.pointerId === pointerId) cleanup(); };
|
||||
const escape = (key: KeyboardEvent) => {
|
||||
if (key.key !== "Escape") return;
|
||||
key.preventDefault(); key.stopPropagation(); cleanup();
|
||||
};
|
||||
const finish = (pointer: PointerEvent) => {
|
||||
if (pointer.pointerId !== pointerId) return;
|
||||
update(pointer);
|
||||
cleanup();
|
||||
if (next.x !== bounds.x || next.y !== bounds.y || next.width !== bounds.width || next.height !== bounds.height)
|
||||
flushSync(() => onCommit(next));
|
||||
};
|
||||
cancel.current = cleanup;
|
||||
handle.addEventListener("pointermove", move);
|
||||
handle.addEventListener("pointerup", finish);
|
||||
handle.addEventListener("pointercancel", abort);
|
||||
handle.addEventListener("lostpointercapture", abort);
|
||||
window.addEventListener("keydown", escape, true);
|
||||
handle.setPointerCapture(pointerId);
|
||||
};
|
||||
}
|
||||
+4
-2
@@ -296,7 +296,7 @@ button {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
button:not([data-slot="button"]) {
|
||||
button:not([data-slot="button"]):not(.map-option-interaction) {
|
||||
transition-duration: 120ms;
|
||||
transition-property: color, background-color, border-color, box-shadow, filter, outline-color;
|
||||
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
|
||||
@@ -2366,7 +2366,9 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
.agent-report-workspace .investigation-report-header h2 { font-size: 20px; line-height: 28px; }
|
||||
.agent-report-workspace .investigation-conclusion-preview { font-size: 16px; line-height: 26px; }
|
||||
.agent-report-workspace .answer-ui-root [data-interactive-table] table { font-size: 15px; line-height: 1.65; }
|
||||
.agent-report-workspace .answer-ui-root [data-interactive-table] :is(th, td) { padding: 10px 12px; }
|
||||
.agent-report-workspace .answer-ui-root [data-interactive-table] th { padding: 0; }
|
||||
.agent-report-workspace .answer-ui-root [data-interactive-table] th > button { min-height: 56px; padding: 10px 16px; }
|
||||
.agent-report-workspace .answer-ui-root [data-interactive-table] td { padding: 10px 12px; }
|
||||
.agent-report-workspace .investigation-report-header { padding: 0 0 16px; }
|
||||
.agent-report-workspace .investigation-report > .investigation-report-section {
|
||||
margin: 0;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { expect, test, type Locator, type TestInfo } from "@playwright/test";
|
||||
import { mockAgentApi } from "./support/mock-agent-api";
|
||||
import { mockWorkbenchContext } from "./support/mock-workbench-context";
|
||||
import { responsesFixture } from "./support/responses-fixture";
|
||||
@@ -7,6 +7,22 @@ const title = "空间候选管段（距离近，非故障定位）";
|
||||
const ids = ["19025", "19026", "19022", "19027"];
|
||||
const distances = [283.85, 283.86, 291.45, 292.44];
|
||||
|
||||
async function checkHeaderTarget(ui: Locator, testInfo: TestInfo, phase: string) {
|
||||
const header = ui.getByRole("columnheader", { name: "距离（米）" });
|
||||
const button = header.getByRole("button");
|
||||
const cell = (await header.boundingBox())!;
|
||||
const target = (await button.boundingBox())!;
|
||||
await testInfo.attach(`${phase}-header-target`, { body: JSON.stringify({ cell, target }), contentType: "application/json" });
|
||||
expect(Math.abs(target.x - cell.x)).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(target.y - cell.y)).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(target.width - cell.width)).toBeLessThanOrEqual(1);
|
||||
expect(Math.abs(target.height - cell.height)).toBeLessThanOrEqual(1);
|
||||
const background = await button.evaluate((element) => getComputedStyle(element).backgroundColor);
|
||||
await header.hover({ position: { x: cell.width - 6, y: cell.height / 2 } });
|
||||
await expect.poll(() => button.evaluate((element) => getComputedStyle(element).backgroundColor)).not.toBe(background);
|
||||
await expect(ui.getByRole("columnheader").first().getByRole("button")).toHaveCSS("background-color", background);
|
||||
}
|
||||
|
||||
for (const width of [1440, 375]) for (const kind of ["Table", "Chart"] as const) {
|
||||
test(`${kind} data stays display-only inline and expanded at ${width}px`, async ({ page }, testInfo) => {
|
||||
await page.setViewportSize({ width, height: 1000 });
|
||||
@@ -38,16 +54,25 @@ for (const width of [1440, 375]) for (const kind of ["Table", "Chart"] as const)
|
||||
await expect(ui.getByRole("table")).toContainText("19025");
|
||||
await expect(ui.getByRole("table")).toContainText("283.85");
|
||||
await expect(ui.getByRole("columnheader")).toHaveCount(2);
|
||||
await expect(ui.locator("thead svg")).toHaveCount(0);
|
||||
await expect(ui.getByRole("checkbox")).toHaveCount(0);
|
||||
await expect(ui.getByRole("button", { name: /加入分析|针对.*提问|取消选行/ })).toHaveCount(0);
|
||||
await expect(ui.getByRole("region", { name: "分析内容篮" })).toHaveCount(0);
|
||||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await checkHeaderTarget(ui, testInfo, "inline");
|
||||
await ui.locator("table").screenshot({ path: testInfo.outputPath("inline-display.png") });
|
||||
const sort = ui.getByRole("button", { name: "按距离（米）排序", exact: true });
|
||||
await sort.click();
|
||||
const header = ui.getByRole("columnheader", { name: "距离（米）" });
|
||||
const column = (await header.boundingBox())!;
|
||||
await header.click({ position: { x: column.width - 6, y: column.height / 2 } });
|
||||
await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "ascending");
|
||||
await expect(sort.locator("svg.lucide-arrow-up")).toHaveCount(1);
|
||||
await expect(ui.locator("thead svg")).toHaveCount(1);
|
||||
await sort.click();
|
||||
await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "descending");
|
||||
await expect(sort.locator("svg.lucide-arrow-down")).toHaveCount(1);
|
||||
await expect(ui.locator("thead svg")).toHaveCount(1);
|
||||
await expect(ui.locator("tbody tr").first()).toContainText("19027");
|
||||
await ui.getByRole("textbox", { name: `搜索${title}` }).fill("19025");
|
||||
await expect(ui.locator("tbody tr")).toHaveCount(1);
|
||||
@@ -56,15 +81,19 @@ for (const width of [1440, 375]) for (const kind of ["Table", "Chart"] as const)
|
||||
ui = workspace.locator('[data-answer-ui="selection-style"]');
|
||||
await expect(ui.getByRole("textbox", { name: `搜索${title}` })).toHaveValue("19025");
|
||||
await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "descending");
|
||||
await expect(ui.getByRole("button", { name: "按距离（米）排序", exact: true }).locator("svg.lucide-arrow-down")).toHaveCount(1);
|
||||
await expect(ui.locator("thead svg")).toHaveCount(1);
|
||||
await expect(ui.getByRole("checkbox")).toHaveCount(0);
|
||||
await expect(ui.locator('tbody tr[data-state="selected"]')).toHaveCount(0);
|
||||
await expect(ui.getByRole("button", { name: /加入分析|针对.*提问|取消选行/ })).toHaveCount(0);
|
||||
await ui.getByRole("textbox", { name: `搜索${title}` }).fill("");
|
||||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||||
await checkHeaderTarget(ui, testInfo, "expanded");
|
||||
await ui.locator("[data-interactive-table]").screenshot({ path: testInfo.outputPath("expanded-display.png") });
|
||||
await ui.getByRole("button", { name: "按距离（米）排序", exact: true }).focus();
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(ui.getByRole("columnheader", { name: "距离（米）" })).toHaveAttribute("aria-sort", "none");
|
||||
await expect(ui.locator("thead svg")).toHaveCount(0);
|
||||
await ui.getByRole("textbox", { name: `搜索${title}` }).fill("没有匹配的管段");
|
||||
await expect(ui.getByRole("cell", { name: "当前筛选没有匹配的数据。" })).toHaveAttribute("colspan", "2");
|
||||
await expect(ui.getByRole("checkbox")).toHaveCount(0);
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { expect, test, type Locator, type Page } from "@playwright/test";
|
||||
import { investigationFixture, mockInvestigationPresentation } from "./support/mock-investigation-presentation";
|
||||
import type { OperationalTaskNotification } from "../../src/features/workbench/api/operational-task-client";
|
||||
|
||||
async function openAlertQueue(page: Page) {
|
||||
const task = investigationFixture(1, "通知焦点测试调查");
|
||||
const notification: OperationalTaskNotification = {
|
||||
notification_id: "96000000-0000-4000-8000-000000000021", task_id: task.task_id,
|
||||
kind: "human_input_required", title: "待核验漏点与阀门", description: "请核对现场情况后继续调查。",
|
||||
required_permission: null, lifecycle_status: "active", subject_type: "question", subject_id: null,
|
||||
resolved_at: null, resolution_reason: null, status: "unread", version: 1,
|
||||
created_at: task.created_at, read_at: null, read_by: null
|
||||
};
|
||||
await mockInvestigationPresentation(page, [task], [], [notification]);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
const trigger = page.getByRole("button", { name: /查看待办与告警/ });
|
||||
await expect(trigger).toHaveAccessibleName("查看待办与告警，当前 1 条待处理事项", { timeout: 15_000 });
|
||||
await trigger.click();
|
||||
await expect(page.getByRole("menu")).toBeVisible();
|
||||
return {
|
||||
trigger,
|
||||
item: page.getByRole("menuitem", { name: `打开通知：${notification.title}` }),
|
||||
row: page.locator(`[data-alert-id="operational-task-notification:${notification.notification_id}"]`)
|
||||
};
|
||||
}
|
||||
|
||||
async function ringShadow(element: Locator) {
|
||||
return element.evaluate((node) => getComputedStyle(node).getPropertyValue("--tw-ring-shadow").trim());
|
||||
}
|
||||
|
||||
for (const width of [1920, 375]) {
|
||||
test(`鼠标悬停通知保持细边框且键盘导航仍有焦点环 ${width}`, async ({ page }, testInfo) => {
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
const { trigger, item, row } = await openAlertQueue(page);
|
||||
await item.hover();
|
||||
await expect(item).toBeFocused();
|
||||
await expect(row).toHaveCSS("background-color", "rgb(218, 229, 253)");
|
||||
await expect(row).toHaveCSS("border-width", "1px");
|
||||
await expect(item).toHaveCSS("box-shadow", "none");
|
||||
await expect(item).toHaveCSS("outline-style", "none");
|
||||
await testInfo.attach("pointer-alert-focus", {
|
||||
body: await page.getByRole("menu").screenshot({ path: testInfo.outputPath("pointer-alert-focus.png") }),
|
||||
contentType: "image/png"
|
||||
});
|
||||
|
||||
// Switching to keyboard on the same focused item must immediately show its indicator.
|
||||
await page.keyboard.press("Home");
|
||||
await expect(item).toBeFocused();
|
||||
await expect.poll(() => ringShadow(item)).toContain("inset 0 0 0 calc(2px");
|
||||
await testInfo.attach("keyboard-alert-focus", {
|
||||
body: await page.getByRole("menu").screenshot({ path: testInfo.outputPath("keyboard-alert-focus.png") }),
|
||||
contentType: "image/png"
|
||||
});
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(page.getByRole("menu")).toHaveCount(0);
|
||||
await expect(trigger).toBeFocused();
|
||||
await expect.poll(() => ringShadow(trigger)).toContain("calc(2px + 2px)");
|
||||
});
|
||||
|
||||
test(`鼠标选择通知后顶部按钮无外环且再次切换键盘可见焦点 ${width}`, async ({ page }, testInfo) => {
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
const { trigger, item } = await openAlertQueue(page);
|
||||
await item.click();
|
||||
await expect(page.getByRole("menu")).toHaveCount(0);
|
||||
await expect(trigger).toBeFocused();
|
||||
await expect.poll(() => ringShadow(trigger)).toContain("calc(0px + 0px)");
|
||||
await expect(trigger).toHaveCSS("outline-style", "none");
|
||||
await testInfo.attach("pointer-alert-trigger", {
|
||||
body: await trigger.screenshot({ path: testInfo.outputPath("pointer-alert-trigger.png"), animations: "disabled" }),
|
||||
contentType: "image/png"
|
||||
});
|
||||
|
||||
// Tab originates on another control, outside the menu and trigger handlers.
|
||||
await page.keyboard.press("Tab");
|
||||
await page.keyboard.press("Shift+Tab");
|
||||
await expect(trigger).toBeFocused();
|
||||
await expect.poll(() => ringShadow(trigger)).toContain("calc(2px + 2px)");
|
||||
await testInfo.attach("keyboard-alert-trigger", {
|
||||
body: await trigger.screenshot({ path: testInfo.outputPath("keyboard-alert-trigger.png"), animations: "disabled" }),
|
||||
contentType: "image/png"
|
||||
});
|
||||
|
||||
// Pointer movement must also clear an existing keyboard indicator.
|
||||
await trigger.hover();
|
||||
await expect.poll(() => ringShadow(trigger)).toContain("calc(0px + 0px)");
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import { expect, test, type Page, type TestInfo } from "@playwright/test";
|
||||
import { mockInvestigationPresentation } from "./support/mock-investigation-presentation";
|
||||
|
||||
const labels = ["点标注", "线标注", "范围标注"];
|
||||
type ButtonFrame = {
|
||||
label: string;
|
||||
sameNode: boolean;
|
||||
isConnected: boolean;
|
||||
hovered: boolean;
|
||||
pressed: string | null;
|
||||
disabled: boolean;
|
||||
background: string;
|
||||
color: string;
|
||||
opacity: string;
|
||||
rect: { x: number; y: number; width: number; height: number };
|
||||
icon: { background: string; color: string; transitions: string[] };
|
||||
svgColor: string;
|
||||
};
|
||||
type Frame = { elapsed: number; buttons: ButtonFrame[] };
|
||||
type SamplingProbe = { frames: Frame[]; done: Promise<void>; finishAction: () => number };
|
||||
|
||||
async function startSampling(page: Page) {
|
||||
await page.evaluate((labels) => {
|
||||
const toolbar = [...document.querySelectorAll<HTMLElement>('[role="toolbar"][aria-label="绘制工具"]')]
|
||||
.find((node) => node.getBoundingClientRect().width > 0)!;
|
||||
const find = (label: string) => [...toolbar.querySelectorAll<HTMLButtonElement>("button")].find((button) => button.textContent?.trim() === label)!;
|
||||
const initial = labels.map(find);
|
||||
const frames: Frame[] = [];
|
||||
const started = performance.now();
|
||||
let actionFinishedAt: number | null = null;
|
||||
let finish: () => void;
|
||||
const done = new Promise<void>((resolve) => { finish = resolve; });
|
||||
const read = () => {
|
||||
const elapsed = performance.now() - started;
|
||||
frames.push({ elapsed, buttons: labels.map((label, index) => {
|
||||
const button = find(label);
|
||||
const icon = button.querySelector<HTMLElement>(":scope > span")!;
|
||||
const svg = icon.querySelector("svg")!;
|
||||
const style = getComputedStyle(button);
|
||||
const iconStyle = getComputedStyle(icon);
|
||||
const bounds = button.getBoundingClientRect();
|
||||
return { label, sameNode: button === initial[index], isConnected: button.isConnected,
|
||||
hovered: button.matches(":hover"), pressed: button.getAttribute("aria-pressed"), disabled: button.disabled,
|
||||
background: style.backgroundColor, color: style.color, opacity: style.opacity,
|
||||
rect: { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height },
|
||||
icon: { background: iconStyle.backgroundColor, color: iconStyle.color,
|
||||
transitions: icon.getAnimations().filter((animation) => animation instanceof CSSTransition).map((animation) => (animation as CSSTransition).transitionProperty) },
|
||||
svgColor: getComputedStyle(svg).color
|
||||
};
|
||||
}) });
|
||||
// Actionability waits can outlast 500ms; keep every frame through the action
|
||||
// and at least one full 150ms color transition after it has completed.
|
||||
if (elapsed < 500 || actionFinishedAt === null || elapsed < actionFinishedAt + 200) requestAnimationFrame(read);
|
||||
else finish();
|
||||
};
|
||||
Object.assign(window, { annotationHoverProbe: { frames, done,
|
||||
finishAction: () => { actionFinishedAt = performance.now() - started; return actionFinishedAt; }
|
||||
} });
|
||||
read();
|
||||
}, labels);
|
||||
}
|
||||
|
||||
async function collectSampling(page: Page): Promise<{ frames: Frame[]; actionFinishedAt: number }> {
|
||||
return page.evaluate(async () => {
|
||||
const probe = (window as unknown as { annotationHoverProbe: SamplingProbe }).annotationHoverProbe;
|
||||
const actionFinishedAt = probe.finishAction();
|
||||
await probe.done;
|
||||
return { frames: probe.frames, actionFinishedAt };
|
||||
});
|
||||
}
|
||||
|
||||
async function screenshot(page: Page, testInfo: TestInfo, name: string) {
|
||||
const panel = page.getByRole("region", { name: "标注", exact: true });
|
||||
await testInfo.attach(name, { body: await panel.screenshot({ path: testInfo.outputPath(`${name}.png`), animations: "allow" }), contentType: "image/png" });
|
||||
}
|
||||
|
||||
test.use({ reducedMotion: "no-preference", hasTouch: false });
|
||||
for (const width of [1440, 375]) {
|
||||
test(`annotation icons track button colors through hover, selection, cancellation and rapid reselection at ${width}px`, async ({ page }, testInfo) => {
|
||||
test.setTimeout(60_000);
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
await mockInvestigationPresentation(page, []);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.waitForFunction(() => Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")));
|
||||
await page.getByRole("button", { name: "标注：管理地图标注", exact: true }).click();
|
||||
const panel = page.getByRole("region", { name: "标注", exact: true });
|
||||
const point = panel.getByRole("button", { name: "点标注", exact: true });
|
||||
const line = panel.getByRole("button", { name: "线标注", exact: true });
|
||||
const polygon = panel.getByRole("button", { name: "范围标注", exact: true });
|
||||
await expect(point).toBeEnabled();
|
||||
await point.click({ trial: true });
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await page.mouse.move(1, 1);
|
||||
const sample = async (name: string, action: () => Promise<unknown>, selected: string | null, capture = false) => {
|
||||
if (capture) await screenshot(page, testInfo, `${name}-before`);
|
||||
await startSampling(page);
|
||||
await action();
|
||||
if (capture) await screenshot(page, testInfo, `${name}-during`);
|
||||
const { frames, actionFinishedAt } = await collectSampling(page);
|
||||
expect(frames.at(-1)!.elapsed - actionFinishedAt, `${name}: sampling must cover at least 200ms after the completed action`).toBeGreaterThanOrEqual(200);
|
||||
const failures = frames.flatMap((frame) => frame.buttons.flatMap((button, index) => {
|
||||
const initial = frames[0].buttons[index];
|
||||
const shifted = (Object.keys(button.rect) as Array<keyof ButtonFrame["rect"]>).some((key) => Math.abs(button.rect[key] - initial.rect[key]) > 0.5);
|
||||
return !button.sameNode || !button.isConnected || shifted || button.disabled !== initial.disabled || button.opacity !== "1"
|
||||
|| button.svgColor !== button.color || button.icon.color !== button.color
|
||||
? [{ elapsed: frame.elapsed, ...button }] : [];
|
||||
}));
|
||||
if (failures.length) await testInfo.attach(`${name}-failed-frames`, { body: JSON.stringify(failures.slice(0, 12), null, 2), contentType: "application/json" });
|
||||
expect(failures, `${name}: icon colors, DOM identity, geometry and enabled state must remain in sync on every animation frame`).toEqual([]);
|
||||
for (const button of frames.at(-1)!.buttons) expect(button.pressed).toBe(String(button.label === selected));
|
||||
if (name.startsWith("hover-")) for (let index = 0; index < labels.length; index++) {
|
||||
const changes = frames.slice(1).filter((frame, frameIndex) => frame.buttons[index].hovered !== frames[frameIndex].buttons[index].hovered).length;
|
||||
expect(changes, "a single pointer entry or exit must not make hover blink repeatedly").toBeLessThanOrEqual(1);
|
||||
}
|
||||
if (capture) await screenshot(page, testInfo, `${name}-after`);
|
||||
};
|
||||
await sample("hover-point-first", () => point.hover(), null);
|
||||
await sample("hover-line-first", () => line.hover(), null);
|
||||
await sample("hover-point-repeat", () => point.hover(), null);
|
||||
await sample("hover-line-repeat", () => line.hover(), null);
|
||||
await sample("select-point", () => point.click(), "点标注");
|
||||
await sample("select-line-stay", () => line.click(), "线标注", true);
|
||||
await sample("select-polygon-stay", () => polygon.click(), "范围标注");
|
||||
await sample("cancel-polygon-stay", () => polygon.click(), null);
|
||||
await sample("select-point-again", () => point.click(), "点标注");
|
||||
await sample("select-line-return-to-point", async () => { await line.click(); await point.hover(); }, "线标注");
|
||||
await sample("cancel-line-return-to-point", async () => { await line.click(); await point.hover(); }, null);
|
||||
await sample("rapid-reselection", async () => { await point.click(); await line.click(); await point.click(); }, "点标注", true);
|
||||
});
|
||||
}
|
||||
@@ -63,7 +63,11 @@ test("standalone basemap controls share the same pointer and keyboard boundary",
|
||||
|
||||
async function renderControls(page: Page) {
|
||||
await page.evaluate(async () => {
|
||||
const paths = ["/node_modules/.vite/deps/react.js", "/node_modules/.vite/deps/react-dom_client.js", "/src/features/map/core/components/base-layers-control.tsx"];
|
||||
const entry = await fetch("/src/main.tsx").then((response) => response.text());
|
||||
const reactPath = entry.match(/["']([^"']*\/react\.js(?:\?[^"']*)?)["']/)?.[1];
|
||||
const domPath = entry.match(/["']([^"']*\/react-dom_client\.js(?:\?[^"']*)?)["']/)?.[1];
|
||||
if (!reactPath || !domPath) throw new Error("App React dependency URLs not found");
|
||||
const paths = [reactPath, domPath, "/src/features/map/core/components/base-layers-control.tsx"];
|
||||
const [react, dom, controls] = await Promise.all(paths.map((path) => import(path)));
|
||||
const h = react.default.createElement;
|
||||
function Examples() {
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { basename, resolve } from "node:path";
|
||||
import { investigationFixture, mockInvestigationPresentation, selectInvestigation } from "./support/mock-investigation-presentation";
|
||||
|
||||
const pressureIds = ["170486", "175618", "159673", "135160", "174754"];
|
||||
const flowIds = ["542017", "486033", "524529", "541061", "542121"];
|
||||
const times = Array.from({ length: 13 }, (_, i) => `${String(5 + Math.floor(i / 4)).padStart(2, "0")}:${String(i % 4 * 15).padStart(2, "0")}`);
|
||||
const chart = (id: string, flow: boolean) => ({
|
||||
action: "open_chart", chart_id: `chart_tc_${id}`, evidence_refs: [`synthetic:${id}`],
|
||||
chart: { title: `${id} ${flow ? "管流" : "压力"}七日同时刻对照（${flow ? "m³/h" : "m"}）`, chart_type: "time_comparison",
|
||||
x_axis_name: "时间", y_axis_name: `${flow ? "流量（m³/h）" : "压力（m）"}`, x_data: times,
|
||||
series: [{ name: `${id} 当前 2026-07-16`, type: "line", data: times.map((_, i) => 30 - i / 2),
|
||||
sample_times: times.map((time) => `2026-07-16T${time}:00+08:00`) },
|
||||
...Array.from({ length: 7 }, (_, day) => ({ name: `${id} 2026-07-${String(9 + day).padStart(2, "0")}`, type: "scatter",
|
||||
data: times.map((_, i) => i < 10 ? null : 30 + day / 2),
|
||||
sample_times: times.map((time, i) => i < 10 ? null : `2026-07-${String(9 + day).padStart(2, "0")}T${time}:00+08:00`) }))] }
|
||||
});
|
||||
|
||||
test.use({ reducedMotion: "reduce" });
|
||||
for (const width of [1440, 375, 320]) {
|
||||
test(`groups comparisons with object selection and legends below the plot at ${width}px`, async ({ page }, testInfo) => {
|
||||
test.setTimeout(60_000);
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
// This workspace links dependencies outside Vite's root. Serve the installed font for visual checks.
|
||||
await page.route("**/@fs/**/noto-sans-sc-*.woff2", (route) => route.fulfill({
|
||||
path: resolve("node_modules/@fontsource-variable/noto-sans-sc/files", basename(new URL(route.request().url()).pathname)),
|
||||
contentType: "font/woff2"
|
||||
}));
|
||||
const task = investigationFixture(1, "同类图表聚合核查");
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
for (const [ids, flow] of [[pressureIds, false], [flowIds, true]] as const) for (const id of ids) {
|
||||
await mock.emit(task, chart(id, flow));
|
||||
await expect(page.locator(`[data-presentation-scope="investigation"] [data-investigation-chart="chart_tc_${id}"]`)).toHaveCount(1);
|
||||
}
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(manager).toBeVisible();
|
||||
await expect(manager.getByRole("group", { name: "压力七日同时刻对照（m）", exact: true })).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(1);
|
||||
await manager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||||
await panel.getByRole("button", { name: "放大查看 压力七日同时刻对照（m）", exact: true }).click();
|
||||
const pressure = page.getByRole("dialog", { name: "压力七日同时刻对照（m）", exact: true });
|
||||
const flow = page.getByRole("dialog", { name: "管流七日同时刻对照（m³/h）", exact: true });
|
||||
await expect(pressure).toBeVisible();
|
||||
await expect(flow).toHaveCount(0);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(1);
|
||||
if (width < 640) await pressure.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
await expect(pressure.getByLabel("选择图表对象").getByRole("button")).toHaveCount(5);
|
||||
const objects = pressure.getByLabel("选择图表对象");
|
||||
const select = objects.getByRole("button", { name: "切换对象 175618", exact: true });
|
||||
const bounds = await pressure.boundingBox();
|
||||
await select.click();
|
||||
expect(await pressure.boundingBox()).toEqual(bounds);
|
||||
await expect(select).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(objects.getByRole("button", { pressed: true })).toHaveCount(1);
|
||||
await expect(pressure.getByRole("img", { name: "175618 压力七日同时刻对照（m）", exact: true })).toBeVisible();
|
||||
const legends = pressure.getByLabel("图表图例");
|
||||
await expect(legends.getByRole("button")).toHaveCount(8);
|
||||
const drawing = pressure.getByRole("img", { name: "175618 压力七日同时刻对照（m）", exact: true });
|
||||
const plotBox = (await drawing.boundingBox())!;
|
||||
const legendBox = (await legends.boundingBox())!;
|
||||
const objectBox = (await objects.boundingBox())!;
|
||||
expect(legendBox.y).toBeGreaterThanOrEqual(plotBox.y + plotBox.height - 1);
|
||||
if (width > 640) expect(objectBox.x).toBeGreaterThanOrEqual(plotBox.x + plotBox.width);
|
||||
else expect(objectBox.y).toBeGreaterThanOrEqual(legendBox.y + legendBox.height - 1);
|
||||
expect(plotBox.height).toBeGreaterThanOrEqual(120);
|
||||
expect(await pressure.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach(`grouped-pressure-${width}`, { body: await pressure.screenshot({ path: testInfo.outputPath(`grouped-pressure-${width}.png`) }), contentType: "image/png" });
|
||||
await legends.getByRole("button", { name: "175618 2026-07-09", exact: true }).click();
|
||||
await expect(legends.getByRole("button", { name: "175618 2026-07-09", exact: true })).toHaveAttribute("aria-pressed", "false");
|
||||
await pressure.getByRole("tab", { name: "数据", exact: true }).click();
|
||||
await expect(pressure.getByRole("table").getByRole("row")).toHaveCount(14);
|
||||
await expect(pressure.getByRole("table")).toContainText("2026-07-16 08:00:00+08:00");
|
||||
await objects.getByRole("button", { name: "切换对象 159673", exact: true }).focus();
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(pressure.getByRole("img", { name: "159673 压力七日同时刻对照（m）", exact: true })).toBeVisible();
|
||||
await mock.emit(task, { action: "close_chart", chart_id: "chart_tc_159673" });
|
||||
await expect(objects.getByRole("button")).toHaveCount(4);
|
||||
await expect(objects.getByRole("button", { pressed: true })).toHaveCount(1);
|
||||
await expect(panel.getByText("部分未完成", { exact: true })).toHaveCount(0);
|
||||
await pressure.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await panel.getByRole("button", { name: "关闭图表 压力七日同时刻对照（m）", exact: true }).click();
|
||||
await expect(panel.locator('[data-investigation-chart^="chart_tc_1"]')).toHaveCount(0);
|
||||
await expect(panel.locator("[data-investigation-chart]")).toHaveCount(5);
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,480 @@
|
||||
import { expect, test, type Locator, type Page } from "@playwright/test";
|
||||
import { basename, resolve } from "node:path";
|
||||
import { writeFile } from "node:fs/promises";
|
||||
import { investigationFixture, mockInvestigationPresentation, selectInvestigation } from "./support/mock-investigation-presentation";
|
||||
|
||||
const times = Array.from({ length: 13 }, (_, index) => `${String(5 + Math.floor(index / 4)).padStart(2, "0")}:${String(index % 4 * 15).padStart(2, "0")}`);
|
||||
const allDayTimes = Array.from({ length: 96 }, (_, index) => `${String(Math.floor(index / 4)).padStart(2, "0")}:${String(index % 4 * 15).padStart(2, "0")}`);
|
||||
const chart = (id: string, value = 28) => ({ action: "open_chart", chart_id: id, evidence_refs: ["synthetic:pressure"],
|
||||
chart: { title: `合成监测 ${id}`, chart_type: "line", x_data: times, series: [
|
||||
{ name: "压力（m）", data: times.map((_, index) => index === 12 ? value : 32 - index / 4) },
|
||||
{ name: "参考（m）", data: times.map((_, index) => 31 - index / 8) }
|
||||
] } });
|
||||
const comparison = (id: string, flow = false) => {
|
||||
const labels = flow ? allDayTimes : times;
|
||||
return { action: "open_chart", chart_id: `comparison_${id}`, evidence_refs: [`synthetic:${id}`],
|
||||
chart: { title: `${id} ${flow ? "管流" : "压力"}七日同时刻对照（${flow ? "m³/h" : "m"}）`, chart_type: "time_comparison", x_axis_name: "时间", y_axis_name: flow ? "流量（m³/h）" : "压力（m）", x_data: labels,
|
||||
series: [{ name: `${id} 当前 2026-07-16`, type: "line", data: labels.map((_, index) => flow ? 1237 + Math.sin(index / 8) * 245 : 32 - index / 4),
|
||||
sample_times: labels.map((time) => `2026-07-16T${time}:00+08:00`) },
|
||||
...Array.from({ length: 7 }, (_, day) => ({ name: `${id} 2026-07-${String(9 + day).padStart(2, "0")}`, type: "scatter",
|
||||
data: labels.map((_, index) => index < labels.length - 3 ? null : flow ? 1360 + day * 21 : 30 + day / 2),
|
||||
sample_times: labels.map((time, index) => index < labels.length - 3 ? null : `2026-07-${String(9 + day).padStart(2, "0")}T${time}:00+08:00`) }))]
|
||||
} };
|
||||
};
|
||||
|
||||
const card = (manager: Locator, id: string) => manager.locator(`[data-managed-chart][data-chart-title="合成监测 ${id}"]`);
|
||||
const slots = (manager: Locator) => manager.locator("[data-chart-slot]:visible");
|
||||
const positions = (manager: Locator) => manager.locator("[data-managed-chart]").evaluateAll((nodes) => Object.fromEntries(nodes.map((node) => [
|
||||
node.getAttribute("data-chart-title"), Number(node.getAttribute("data-slot-index"))
|
||||
])));
|
||||
|
||||
async function expectCompleteLegendRow(article: Locator) {
|
||||
const legend = article.getByLabel("图表图例", { exact: true });
|
||||
const row = article.getByLabel("显示的数据序列", { exact: true }).getByRole("button").first();
|
||||
const rowHeight = (await row.boundingBox())!.height;
|
||||
const box = await legend.evaluate((node) => ({
|
||||
height: node.clientHeight, padding: Number.parseFloat(getComputedStyle(node).paddingTop)
|
||||
}));
|
||||
expect(box.height, "a full legend button must fit without being clipped by its scrolling container").toBeGreaterThanOrEqual(rowHeight + box.padding - 1);
|
||||
const legendBounds = (await legend.boundingBox())!;
|
||||
const groupBounds = (await article.locator("[data-chart-group-tile]").boundingBox())!;
|
||||
expect(legendBounds.y + legendBounds.height).toBeLessThanOrEqual(groupBounds.y + groupBounds.height + 1);
|
||||
}
|
||||
|
||||
async function coordinateBounds(plot: Locator) {
|
||||
return plot.locator("svg").evaluate((svg) => {
|
||||
const width = svg.getBoundingClientRect().width;
|
||||
const lines = [...svg.querySelectorAll("path")].filter((path) => getComputedStyle(path).stroke === "rgb(226, 232, 240)")
|
||||
.map((path) => path.getBoundingClientRect()).filter((box) => box.width > width / 2 && box.height <= 1);
|
||||
if (lines.length < 2) throw new Error("Expected horizontal value-axis grid lines to measure the actual coordinate area");
|
||||
const x = Math.min(...lines.map((line) => line.x));
|
||||
const y = Math.min(...lines.map((line) => line.y));
|
||||
return { x, y, width: Math.max(...lines.map((line) => line.right)) - x, height: Math.max(...lines.map((line) => line.bottom)) - y, gridLines: lines.length };
|
||||
});
|
||||
}
|
||||
|
||||
async function expectNoHorizontalOverflow(manager: Locator) {
|
||||
const measured = await manager.evaluate((node) => [node, ...node.querySelectorAll<HTMLElement>("[data-chart-manager-scroll], [data-chart-layout], [data-managed-chart]")]
|
||||
.filter((element) => element.clientWidth > 0)
|
||||
.map((element) => ({
|
||||
label: element.getAttribute("data-chart-title") ?? element.getAttribute("aria-label") ?? element.tagName,
|
||||
width: element.clientWidth,
|
||||
scrollWidth: element.scrollWidth
|
||||
})));
|
||||
for (const element of measured) expect(element.scrollWidth - element.width, `${element.label} must not create a horizontal scrollbar`).toBeLessThanOrEqual(1);
|
||||
return measured;
|
||||
}
|
||||
|
||||
async function resolvedColor(element: Locator, token: string, property: string) {
|
||||
return element.evaluate((node, { token, property }) => {
|
||||
const probe = document.createElement("span");
|
||||
probe.style.setProperty(property, `var(${token})`);
|
||||
node.append(probe);
|
||||
const color = getComputedStyle(probe).getPropertyValue(property);
|
||||
probe.remove();
|
||||
return color;
|
||||
}, { token, property });
|
||||
}
|
||||
|
||||
async function setup(page: Page, count: number) {
|
||||
await page.route("**/@fs/**/noto-sans-sc-*.woff2", (route) => route.fulfill({
|
||||
path: resolve("node_modules/@fontsource-variable/noto-sans-sc/files", basename(new URL(route.request().url()).pathname)), contentType: "font/woff2"
|
||||
}));
|
||||
const task = investigationFixture(1, "固定图表槽位验收");
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||||
await expect(panel.getByText("实时跟随", { exact: true })).toBeVisible();
|
||||
for (let index = 1; index <= count; index++) await mock.emit(task, chart(`P${index}`));
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(manager.locator("[data-managed-chart]")).toHaveCount(count);
|
||||
return { manager, mock, task, panel };
|
||||
}
|
||||
|
||||
test.use({ reducedMotion: "reduce", hasTouch: false, screenshot: "only-on-failure" });
|
||||
test.setTimeout(90_000);
|
||||
|
||||
test("quick chart location highlights the position bar without an outer frame", async ({ page }, testInfo) => {
|
||||
const { manager } = await setup(page, 4);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
for (const width of [1440, 1600, 375]) {
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
const toolbar = manager.getByRole("toolbar", { name: "图表管理工具", exact: true });
|
||||
const locate = toolbar.getByRole("combobox", { name: "快速定位图表", exact: true });
|
||||
await expect(toolbar).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
||||
await expect(locate).toHaveCSS("border-top-color", "rgba(0, 0, 0, 0)");
|
||||
await expect(locate).toHaveCSS("height", "32px");
|
||||
const locateBounds = (await locate.boundingBox())!;
|
||||
expect(locateBounds.width).toBeLessThanOrEqual(288);
|
||||
for (const control of await toolbar.getByRole("button").all()) {
|
||||
const bounds = (await control.boundingBox())!;
|
||||
expect(Math.abs(bounds.height - locateBounds.height)).toBeLessThanOrEqual(1);
|
||||
if (width > 640) expect(Math.abs(bounds.y - locateBounds.y)).toBeLessThanOrEqual(1);
|
||||
}
|
||||
await expect(toolbar.getByRole("group", { name: "图表排列方式", exact: true })).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
||||
expect(await toolbar.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
const target = card(manager, "P4");
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P4" }).click();
|
||||
await expect(target).toBeFocused();
|
||||
await expect(target).toHaveAttribute("data-chart-located", "true");
|
||||
const hasVisibleOutline = () => target.evaluate((node) => {
|
||||
const style = getComputedStyle(node);
|
||||
return style.outlineStyle !== "none" && Number.parseFloat(style.outlineWidth) > 0 && style.outlineColor !== "rgba(0, 0, 0, 0)";
|
||||
});
|
||||
expect(await hasVisibleOutline()).toBe(false);
|
||||
await expect(target).toHaveCSS("box-shadow", "none");
|
||||
const bar = target.locator(":scope > div").first();
|
||||
await expect(bar).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
||||
await expect(target.getByText("已定位", { exact: true })).toBeVisible();
|
||||
const bounds = await target.boundingBox();
|
||||
await testInfo.attach(`chart-location-${width}`, { body: await manager.screenshot({ path: testInfo.outputPath(`chart-location-${width}.png`) }), contentType: "image/png" });
|
||||
await expect(target).toHaveAttribute("data-chart-located", "false");
|
||||
await expect(bar).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
||||
expect(await hasVisibleOutline()).toBe(false);
|
||||
expect(await target.boundingBox()).toEqual(bounds);
|
||||
await locate.focus();
|
||||
await locate.press("ArrowDown");
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P4" }).focus();
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(target).toBeFocused();
|
||||
expect(await hasVisibleOutline()).toBe(false);
|
||||
}
|
||||
});
|
||||
|
||||
test("fixed chart slots swap without inserting or redrawing during pointer movement and fill vacancies before adding a row", async ({ page }, testInfo) => {
|
||||
const { manager, mock, task } = await setup(page, 4);
|
||||
const source = card(manager, "P1");
|
||||
await manager.getByRole("button", { name: "四宫格布局", exact: true }).click();
|
||||
await expect(slots(manager)).toHaveCount(4);
|
||||
await card(manager, "P1").getByLabel("显示的数据序列").getByRole("button", { name: "参考（m）", exact: true }).click();
|
||||
const instance = await card(manager, "P1").locator(".echarts-for-react").getAttribute("_echarts_instance_");
|
||||
const chartsBefore = await page.locator(".echarts-for-react").count();
|
||||
const handle = card(manager, "P1").getByRole("button", { name: "拖动图表 合成监测 P1", exact: true });
|
||||
const positionBar = handle.locator("..");
|
||||
const start = (await handle.boundingBox())!;
|
||||
const bar = (await positionBar.boundingBox())!;
|
||||
for (const [buttonEdge, barEdge] of [[start.x, bar.x], [start.y, bar.y], [start.x + start.width, bar.x + bar.width], [start.y + start.height, bar.y + bar.height]]) {
|
||||
expect(Math.abs(buttonEdge - barEdge), "the drag button must cover every edge of the position bar").toBeLessThanOrEqual(1);
|
||||
}
|
||||
await expect(manager.getByRole("combobox", { name: /^移动图表 / })).toHaveCount(0);
|
||||
await expect(manager.getByText("移动到", { exact: true })).toHaveCount(0);
|
||||
const rightBlank = { x: start.width - 12, y: start.height / 2 };
|
||||
await page.mouse.move(1, 1);
|
||||
const highlight = source.locator("[data-chart-hover-highlight]");
|
||||
await expect(highlight).toHaveCSS("opacity", "0");
|
||||
await expect(highlight).toHaveCSS("pointer-events", "none");
|
||||
const sourceBounds = (await source.boundingBox())!;
|
||||
const highlightBounds = (await highlight.boundingBox())!;
|
||||
for (const [highlightEdge, sourceEdge] of [[highlightBounds.x, sourceBounds.x], [highlightBounds.y, sourceBounds.y], [highlightBounds.x + highlightBounds.width, sourceBounds.x + sourceBounds.width], [highlightBounds.y + highlightBounds.height, sourceBounds.y + sourceBounds.height]]) {
|
||||
expect(Math.abs(highlightEdge - sourceEdge), "the hover highlight must cover every edge of the whole chart card").toBeLessThanOrEqual(1);
|
||||
}
|
||||
const highlightBackground = await highlight.evaluate((node) => getComputedStyle(node).backgroundColor);
|
||||
const highlightAlpha = Number(highlightBackground.match(/\/\s*([\d.]+)\s*\)$/)?.[1] ?? highlightBackground.match(/^rgba\(.+,\s*([\d.]+)\s*\)$/)?.[1] ?? 1);
|
||||
expect(highlightAlpha, "the whole-card tint must have a real, subtle background").toBeGreaterThan(0);
|
||||
expect(highlightAlpha).toBeLessThanOrEqual(0.06);
|
||||
// Hover the chart body edge, away from both its title bar and ECharts tooltips.
|
||||
await source.hover({ position: { x: sourceBounds.width - 6, y: sourceBounds.height / 2 } });
|
||||
await expect(highlight).toHaveCSS("opacity", "1");
|
||||
await testInfo.attach("whole-card-hover", { body: await source.screenshot({ path: testInfo.outputPath("whole-card-hover.png") }), contentType: "image/png" });
|
||||
await page.mouse.move(1, 1);
|
||||
await expect(highlight).toHaveCSS("opacity", "0");
|
||||
const idleBackground = await handle.evaluate((node) => getComputedStyle(node).backgroundColor);
|
||||
await handle.hover({ position: rightBlank });
|
||||
await expect(highlight).toHaveCSS("opacity", "1");
|
||||
await expect(handle).not.toHaveCSS("background-color", idleBackground);
|
||||
expect(await handle.evaluate((node, point) => {
|
||||
const bounds = node.getBoundingClientRect();
|
||||
return document.elementFromPoint(bounds.x + point.x, bounds.y + point.y)?.closest("button") === node;
|
||||
}, rightBlank)).toBe(true);
|
||||
await testInfo.attach("position-bar-right-hover", { body: await positionBar.screenshot({ path: testInfo.outputPath("position-bar-right-hover.png") }), contentType: "image/png" });
|
||||
const destination = (await manager.locator('[data-chart-slot="3"]').boundingBox())!;
|
||||
await card(manager, "P1").evaluate(async (node) => {
|
||||
await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
|
||||
Object.assign(window, { chartSwapSvgMutations: 0 });
|
||||
const observer = new MutationObserver((records) => {
|
||||
(window as unknown as { chartSwapSvgMutations: number }).chartSwapSvgMutations += records.length;
|
||||
});
|
||||
node.querySelectorAll(".echarts-for-react svg").forEach((svg) => observer.observe(svg, { subtree: true, attributes: true, childList: true }));
|
||||
Object.assign(window, { stopChartSwapWatch: () => observer.disconnect() });
|
||||
});
|
||||
await page.mouse.move(start.x + rightBlank.x, start.y + rightBlank.y);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(start.x + rightBlank.x + 12, start.y + rightBlank.y + 8, { steps: 3 });
|
||||
await page.mouse.move(destination.x + destination.width / 2, destination.y + destination.height / 2, { steps: 16 });
|
||||
await page.evaluate(() => new Promise<void>((resolve) => requestAnimationFrame(() => resolve())));
|
||||
const during = await page.evaluate(() => {
|
||||
const state = window as unknown as { chartSwapSvgMutations: number; stopChartSwapWatch: () => void };
|
||||
state.stopChartSwapWatch();
|
||||
return state.chartSwapSvgMutations;
|
||||
});
|
||||
expect(during).toBe(0);
|
||||
await expect(source).toHaveAttribute("data-chart-dragging", "true");
|
||||
await expect(highlight).toHaveCSS("opacity", "1");
|
||||
await expect(manager.locator('[data-chart-slot="3"]')).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
||||
await expect(source).toHaveCSS("opacity", "1");
|
||||
await expect(handle).not.toHaveCSS("color", "rgb(255, 255, 255)");
|
||||
await expect(handle).not.toHaveCSS("background-color", await resolvedColor(handle, "--action-blue", "background-color"));
|
||||
const drawingOpacity = await source.locator(".echarts-for-react svg").evaluate((svg) => {
|
||||
const ancestors = [];
|
||||
for (let node: Element | null = svg; node; node = node.parentElement) {
|
||||
ancestors.push({ element: node.tagName, className: node.getAttribute("class"), opacity: getComputedStyle(node).opacity });
|
||||
if (node.matches("[data-managed-chart]")) break;
|
||||
}
|
||||
return ancestors;
|
||||
});
|
||||
for (const ancestor of drawingOpacity) expect(ancestor.opacity, `${ancestor.element} must keep the plot fully opaque during dragging`).toBe("1");
|
||||
const overlay = page.locator("[data-chart-drag-preview]");
|
||||
await expect(overlay).toBeVisible();
|
||||
await expect(overlay).toHaveCSS("border-top-color", await resolvedColor(overlay, "--surface-border", "border-top-color"));
|
||||
await expectNoHorizontalOverflow(manager);
|
||||
await testInfo.attach("dragging-source", { body: await source.screenshot({ path: testInfo.outputPath("dragging-source.png") }), contentType: "image/png" });
|
||||
await testInfo.attach("dragging-manager", { body: await manager.screenshot({ path: testInfo.outputPath("dragging-manager.png") }), contentType: "image/png" });
|
||||
await testInfo.attach("dragging-plot-opacity", { body: JSON.stringify(drawingOpacity), contentType: "application/json" });
|
||||
// A lightweight preview must not clone the chart engine while the original stays in its slot.
|
||||
await expect(manager.locator(".echarts-for-react")).toHaveCount(4);
|
||||
await expect(page.locator(".echarts-for-react")).toHaveCount(chartsBefore);
|
||||
await page.mouse.up();
|
||||
await expect(source).toHaveAttribute("data-chart-dragging", "false");
|
||||
await expect.poll(() => positions(manager)).toEqual({ "合成监测 P1": 3, "合成监测 P2": 1, "合成监测 P3": 2, "合成监测 P4": 0 });
|
||||
await expect(card(manager, "P1").locator(".echarts-for-react")).toHaveAttribute("_echarts_instance_", instance!);
|
||||
await expect(card(manager, "P1").getByLabel("显示的数据序列").getByRole("button", { name: "参考（m）", exact: true })).toHaveAttribute("aria-pressed", "false");
|
||||
await mock.emit(task, chart("P2", 17));
|
||||
await card(manager, "P2").getByRole("tab", { name: "数据", exact: true }).click();
|
||||
await expect(card(manager, "P2").getByRole("table")).toContainText("17");
|
||||
await expect(card(manager, "P2")).toHaveAttribute("data-slot-index", "1");
|
||||
await mock.emit(task, { action: "close_chart", chart_id: "P2" });
|
||||
await expect(card(manager, "P2")).toHaveCount(0);
|
||||
await expect(slots(manager)).toHaveCount(4);
|
||||
await expect(card(manager, "P1")).toHaveAttribute("data-slot-index", "3");
|
||||
await mock.emit(task, chart("P5"));
|
||||
await expect(card(manager, "P5")).toHaveAttribute("data-slot-index", "1");
|
||||
await mock.emit(task, chart("P6"));
|
||||
await expect(card(manager, "P6")).toHaveAttribute("data-slot-index", "4");
|
||||
await expect(card(manager, "P6")).toBeVisible();
|
||||
await expect(card(manager, "P6")).not.toBeInViewport();
|
||||
await expect(slots(manager)).toHaveCount(6);
|
||||
await expect(manager.getByRole("button", { name: /[上下]一页图表/ })).toHaveCount(0);
|
||||
const scroll = manager.locator("[data-chart-manager-scroll]");
|
||||
await expect.poll(() => scroll.evaluate((node) => node.scrollHeight - node.clientHeight)).toBeGreaterThan(100);
|
||||
await scroll.hover();
|
||||
await page.mouse.wheel(0, 700);
|
||||
await expect(card(manager, "P6")).toBeInViewport();
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P6" }).click();
|
||||
await expect(card(manager, "P6")).toBeVisible();
|
||||
await expect(card(manager, "P6")).toBeFocused();
|
||||
await expect(slots(manager)).toHaveCount(6);
|
||||
await expect.poll(() => scroll.evaluate((node) => node.scrollTop)).toBeGreaterThan(0);
|
||||
await manager.getByRole("button", { name: "重置图表排列", exact: true }).click();
|
||||
await expect.poll(() => scroll.evaluate((node) => node.scrollTop)).toBe(0);
|
||||
await expect(card(manager, "P1")).toBeVisible();
|
||||
await expect(card(manager, "P1").locator(".echarts-for-react")).toHaveAttribute("_echarts_instance_", instance!);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach("fixed-slots-desktop", { body: await manager.screenshot({ path: testInfo.outputPath("fixed-slots-desktop.png") }), contentType: "image/png" });
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
test("scrolling layouts adapt charts and retain empty places without turning into an insertion list", async ({ page }, testInfo) => {
|
||||
const { manager, mock } = await setup(page, 3);
|
||||
const dimensions: Record<string, { width: number; height: number }> = {};
|
||||
for (const [label, layout, count] of [["单图布局", "one", 1], ["左右布局", "two", 2], ["四宫格布局", "four", 4]] as const) {
|
||||
await manager.getByRole("button", { name: label, exact: true }).click();
|
||||
await expect(manager.locator("[data-chart-layout]")).toHaveAttribute("data-chart-layout", layout);
|
||||
await expect(slots(manager)).toHaveCount(layout === "one" ? 3 : 4);
|
||||
const first = (await slots(manager).first().boundingBox())!;
|
||||
dimensions[layout] = first;
|
||||
if (count > 1) {
|
||||
const second = (await slots(manager).nth(1).boundingBox())!;
|
||||
expect(second.x).toBeGreaterThan(first.x + first.width - 1);
|
||||
expect(Math.abs(second.y - first.y)).toBeLessThanOrEqual(1);
|
||||
}
|
||||
if (count === 4) {
|
||||
const third = (await slots(manager).nth(2).boundingBox())!;
|
||||
expect(third.y).toBeGreaterThan(first.y + first.height - 1);
|
||||
expect(Math.abs(third.x - first.x)).toBeLessThanOrEqual(1);
|
||||
expect(await manager.locator('[data-managed-chart][data-slot-index="3"]').count()).toBe(0);
|
||||
}
|
||||
expect(await manager.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
for (const article of await manager.locator("[data-managed-chart]:visible").all()) await expectCompleteLegendRow(article);
|
||||
await testInfo.attach(`fixed-layout-${layout}`, { body: await manager.screenshot({ path: testInfo.outputPath(`fixed-layout-${layout}.png`) }), contentType: "image/png" });
|
||||
}
|
||||
expect(dimensions.one.width).toBeGreaterThan(dimensions.two.width);
|
||||
expect(dimensions.one.height).toBeGreaterThan(dimensions.four.height);
|
||||
const heading = manager.getByLabel("窗口标题栏，可用方向键移动，Shift 加方向键调整大小", { exact: true });
|
||||
await heading.focus();
|
||||
for (let index = 0; index < 20; index++) await page.keyboard.press("Shift+ArrowUp");
|
||||
expect((await manager.boundingBox())!.height).toBeLessThanOrEqual(441);
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P3" }).click();
|
||||
await expect(card(manager, "P3")).toBeFocused();
|
||||
const viewport = (await manager.locator("[data-chart-manager-scroll]").boundingBox())!;
|
||||
for (const target of [card(manager, "P3").getByRole("button", { name: "拖动图表 合成监测 P3", exact: true }), card(manager, "P3").getByRole("heading", { level: 3 })]) {
|
||||
const bounds = (await target.boundingBox())!;
|
||||
expect(bounds.y).toBeGreaterThanOrEqual(viewport.y - 1);
|
||||
expect(bounds.y + bounds.height).toBeLessThanOrEqual(viewport.y + viewport.height + 1);
|
||||
}
|
||||
expect(await manager.locator("[data-chart-manager-scroll]").evaluate((node) => node.scrollTop)).toBeGreaterThan(0);
|
||||
await testInfo.attach("fixed-layout-short-locate", { body: await manager.screenshot({ path: testInfo.outputPath("fixed-layout-short-locate.png") }), contentType: "image/png" });
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
test("default keyboard dragging swaps fixed slots and narrow scrolling grids retain location and enlargement", async ({ page }, testInfo) => {
|
||||
const { manager, mock, task } = await setup(page, 4);
|
||||
await manager.getByRole("button", { name: "四宫格布局", exact: true }).click();
|
||||
const source = card(manager, "P1");
|
||||
const sourceBounds = (await source.boundingBox())!;
|
||||
const targetBounds = (await manager.locator('[data-chart-slot="3"]').boundingBox())!;
|
||||
const moveX = targetBounds.x + targetBounds.width / 2 - sourceBounds.x - sourceBounds.width / 2;
|
||||
const moveY = targetBounds.y + targetBounds.height / 2 - sourceBounds.y - sourceBounds.height / 2;
|
||||
await source.getByRole("button", { name: "拖动图表 合成监测 P1", exact: true }).focus();
|
||||
await page.keyboard.press("Space");
|
||||
await expect(source).toHaveAttribute("data-chart-dragging", "true");
|
||||
await expect(source).toHaveCSS("opacity", "1");
|
||||
// The SDK's default KeyboardSensor advances 50px with Shift + an arrow.
|
||||
for (let step = 0; step < Math.round(Math.abs(moveX) / 50); step++) await page.keyboard.press(moveX > 0 ? "Shift+ArrowRight" : "Shift+ArrowLeft");
|
||||
for (let step = 0; step < Math.round(Math.abs(moveY) / 50); step++) await page.keyboard.press(moveY > 0 ? "Shift+ArrowDown" : "Shift+ArrowUp");
|
||||
await expect(manager.locator('[data-chart-slot="3"]')).toHaveClass(/border-primary/);
|
||||
await page.keyboard.press("Space");
|
||||
await expect.poll(() => positions(manager)).toEqual({ "合成监测 P1": 3, "合成监测 P2": 1, "合成监测 P3": 2, "合成监测 P4": 0 });
|
||||
await expect(source).toHaveAttribute("data-chart-dragging", "false");
|
||||
await expect(source).toHaveCSS("opacity", "1");
|
||||
await mock.emit(task, chart("P5"));
|
||||
await expect(card(manager, "P5")).toHaveAttribute("data-slot-index", "4");
|
||||
for (const width of [375, 320]) {
|
||||
await page.setViewportSize({ width, height: 812 });
|
||||
await expect(manager.locator("[data-chart-layout]")).toHaveAttribute("data-chart-layout", "one");
|
||||
await expect(slots(manager)).toHaveCount(5);
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P1" }).click();
|
||||
await expect(card(manager, "P1")).toBeVisible();
|
||||
await expect(card(manager, "P1")).toHaveAttribute("data-slot-index", "3");
|
||||
await expect(card(manager, "P1")).toBeFocused();
|
||||
const scroll = manager.locator("[data-chart-manager-scroll]");
|
||||
await scroll.focus();
|
||||
await scroll.press("End");
|
||||
await expect(card(manager, "P5")).toBeInViewport();
|
||||
await scroll.press("Home");
|
||||
await expect(card(manager, "P4")).toBeInViewport();
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P1" }).click();
|
||||
await expect(card(manager, "P1")).toBeInViewport();
|
||||
expect(await manager.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach(`fixed-slots-${width}`, { body: await manager.screenshot({ path: testInfo.outputPath(`fixed-slots-${width}.png`) }), contentType: "image/png" });
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P4" }).click();
|
||||
await expect(card(manager, "P4")).toBeVisible();
|
||||
await expect.poll(() => manager.locator("[data-chart-manager-scroll]").evaluate((node) => node.scrollTop)).toBeLessThanOrEqual(2);
|
||||
}
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await manager.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
await expect(manager.locator("[data-chart-layout]")).toHaveAttribute("data-chart-layout", "four");
|
||||
await expect(slots(manager)).toHaveCount(6);
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "合成监测 P1" }).click();
|
||||
await card(manager, "P1").getByRole("button", { name: "放大查看 合成监测 P1", exact: true }).click();
|
||||
await expect(page.getByRole("dialog", { name: "合成监测 P1", exact: true })).toBeVisible();
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
test("compound comparisons fit each slot with bottom scrolling legends and accessible object selection", async ({ page }, testInfo) => {
|
||||
const { manager, mock, task } = await setup(page, 1);
|
||||
for (const id of ["170486", "175618", "159673"]) await mock.emit(task, comparison(id));
|
||||
await mock.emit(task, chart("P2"));
|
||||
for (const id of ["542017", "486033", "524529"]) await mock.emit(task, comparison(id, true));
|
||||
await expect(manager.locator("[data-managed-chart]")).toHaveCount(4);
|
||||
const compound = manager.locator('[data-managed-chart][data-chart-title="压力七日同时刻对照（m）"]');
|
||||
await expect(compound).toHaveAttribute("data-slot-index", "1");
|
||||
await manager.getByRole("button", { name: "四宫格布局", exact: true }).click();
|
||||
const objectButtons = compound.locator('aside[aria-label="选择图表对象"]');
|
||||
await expect(objectButtons).toBeVisible();
|
||||
await expect(objectButtons.getByRole("button")).toHaveCount(3);
|
||||
await objectButtons.getByRole("button", { name: "切换对象 175618", exact: true }).click();
|
||||
const plot = compound.getByRole("img", { name: "175618 压力七日同时刻对照（m）", exact: true });
|
||||
await expect(plot).toBeVisible();
|
||||
const legend = compound.getByLabel("图表图例", { exact: true });
|
||||
await expect(legend.getByRole("button")).toHaveCount(8);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await expect.poll(() => plot.locator("svg").boundingBox().then((box) => box?.height ?? 0)).toBeGreaterThanOrEqual(100);
|
||||
const geometry = async () => {
|
||||
const slot = (await compound.boundingBox())!;
|
||||
const drawing = (await plot.boundingBox())!;
|
||||
const svg = (await plot.locator("svg").boundingBox())!;
|
||||
const footer = (await legend.boundingBox())!;
|
||||
const coordinates = await coordinateBounds(plot);
|
||||
for (const box of [drawing, svg, footer]) {
|
||||
expect(box.x).toBeGreaterThanOrEqual(slot.x - 1);
|
||||
expect(box.y).toBeGreaterThanOrEqual(slot.y - 1);
|
||||
expect(box.x + box.width).toBeLessThanOrEqual(slot.x + slot.width + 1);
|
||||
expect(box.y + box.height).toBeLessThanOrEqual(slot.y + slot.height + 1);
|
||||
}
|
||||
expect(drawing.height).toBeGreaterThanOrEqual(100);
|
||||
expect(coordinates.height, "compact axes must leave at least 40px for the actual plotted data").toBeGreaterThanOrEqual(40);
|
||||
expect(footer.y).toBeGreaterThanOrEqual(drawing.y + drawing.height - 1);
|
||||
expect(footer.height).toBeLessThanOrEqual(56);
|
||||
await expectCompleteLegendRow(compound);
|
||||
expect(slot.height).toBeGreaterThanOrEqual(234);
|
||||
const overflow = await expectNoHorizontalOverflow(manager);
|
||||
return { slot, drawing, svg, coordinates, footer, overflow };
|
||||
};
|
||||
const fourGeometry = await geometry();
|
||||
const flow = manager.locator('[data-managed-chart][data-chart-title="管流七日同时刻对照（m³/h）"]');
|
||||
const flowDrawing = flow.getByRole("img", { name: "542017 管流七日同时刻对照（m³/h）", exact: true });
|
||||
await expect(flowDrawing).toBeVisible();
|
||||
await expectCompleteLegendRow(flow);
|
||||
await expect(flow.getByLabel("图表图例", { exact: true }).getByRole("button")).toHaveCount(8);
|
||||
expect((await coordinateBounds(flowDrawing)).height, "large flow values and eight legend entries must preserve the coordinate area").toBeGreaterThanOrEqual(40);
|
||||
expect((await objectButtons.boundingBox())!.x).toBeGreaterThanOrEqual(fourGeometry.drawing.x + fourGeometry.drawing.width);
|
||||
const scroll = manager.locator("[data-chart-manager-scroll]");
|
||||
const scrollBefore = await scroll.evaluate((node) => node.scrollTop);
|
||||
const legendScroll = await legend.evaluate((node) => {
|
||||
node.scrollTop = node.scrollHeight;
|
||||
return { height: node.clientHeight, content: node.scrollHeight, top: node.scrollTop, overflow: getComputedStyle(node).overflowY };
|
||||
});
|
||||
expect(legendScroll.overflow).toBe("auto");
|
||||
expect(legendScroll.content).toBeGreaterThan(legendScroll.height);
|
||||
expect(legendScroll.top).toBeGreaterThan(0);
|
||||
expect(await scroll.evaluate((node) => node.scrollTop)).toBe(scrollBefore);
|
||||
await legend.getByRole("button", { name: "175618 2026-07-15", exact: true }).click();
|
||||
await expect(legend.getByRole("button", { name: "175618 2026-07-15", exact: true })).toHaveAttribute("aria-pressed", "false");
|
||||
await testInfo.attach("compound-fixed-four", { body: await manager.screenshot({ path: testInfo.outputPath("compound-fixed-four.png") }), contentType: "image/png" });
|
||||
|
||||
await manager.getByRole("button", { name: "单图布局", exact: true }).click();
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: "压力七日同时刻对照（m）" }).click();
|
||||
await expect(compound).toBeVisible();
|
||||
await expect(objectButtons).toBeVisible();
|
||||
await expect(compound.getByRole("combobox", { name: "选择图表对象", exact: true })).toBeHidden();
|
||||
await expect(compound).toBeFocused();
|
||||
const oneGeometry = await geometry();
|
||||
await testInfo.attach("compound-fixed-one", { body: await manager.screenshot({ path: testInfo.outputPath("compound-fixed-one.png") }), contentType: "image/png" });
|
||||
|
||||
await page.setViewportSize({ width: 375, height: 812 });
|
||||
await expect(manager.locator("[data-chart-layout]")).toHaveAttribute("data-chart-layout", "one");
|
||||
await expect(compound).toBeVisible();
|
||||
await expect(objectButtons).toBeHidden();
|
||||
await compound.getByRole("combobox", { name: "选择图表对象", exact: true }).click();
|
||||
await page.getByRole("option", { name: "159673", exact: true }).click();
|
||||
await expect(compound.getByRole("img", { name: "159673 压力七日同时刻对照（m）", exact: true })).toBeVisible();
|
||||
await expect.poll(() => compound.getByRole("img", { name: "159673 压力七日同时刻对照（m）", exact: true }).locator("svg").boundingBox().then((box) => box?.height ?? 0)).toBeGreaterThanOrEqual(100);
|
||||
const narrowPlot = (await compound.getByRole("img", { name: "159673 压力七日同时刻对照（m）", exact: true }).boundingBox())!;
|
||||
const narrowSvg = (await compound.getByRole("img", { name: "159673 压力七日同时刻对照（m）", exact: true }).locator("svg").boundingBox())!;
|
||||
const narrowSlot = (await compound.boundingBox())!;
|
||||
const narrowLegend = (await legend.boundingBox())!;
|
||||
const narrowCoordinates = await coordinateBounds(compound.getByRole("img", { name: "159673 压力七日同时刻对照（m）", exact: true }));
|
||||
expect(narrowPlot.height).toBeGreaterThanOrEqual(100);
|
||||
expect(narrowPlot.x + narrowPlot.width).toBeLessThanOrEqual(narrowSlot.x + narrowSlot.width + 1);
|
||||
expect(narrowSvg.x + narrowSvg.width).toBeLessThanOrEqual(narrowSlot.x + narrowSlot.width + 1);
|
||||
expect(narrowSvg.y + narrowSvg.height).toBeLessThanOrEqual(narrowSlot.y + narrowSlot.height + 1);
|
||||
expect(narrowLegend.y).toBeGreaterThanOrEqual(narrowPlot.y + narrowPlot.height - 1);
|
||||
expect(narrowLegend.y + narrowLegend.height).toBeLessThanOrEqual(narrowSlot.y + narrowSlot.height + 1);
|
||||
expect(await manager.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(375);
|
||||
await testInfo.attach("compound-fixed-narrow", { body: await manager.screenshot({ path: testInfo.outputPath("compound-fixed-narrow.png") }), contentType: "image/png" });
|
||||
const geometryPath = testInfo.outputPath("compound-slot-geometry.json");
|
||||
await writeFile(geometryPath, JSON.stringify({ four: fourGeometry, one: oneGeometry, legendScroll, narrow: { slot: narrowSlot, drawing: narrowPlot, svg: narrowSvg, coordinates: narrowCoordinates, footer: narrowLegend } }, null, 2));
|
||||
await testInfo.attach("compound-slot-geometry", { path: geometryPath, contentType: "application/json" });
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
@@ -0,0 +1,118 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { basename, resolve } from "node:path";
|
||||
import { investigationFixture, mockInvestigationPresentation, selectInvestigation } from "./support/mock-investigation-presentation";
|
||||
|
||||
const chart = (id: string, value = 28) => ({ action: "open_chart", chart_id: id, evidence_refs: ["synthetic:pressure"],
|
||||
chart: { title: `合成监测 ${id}`, chart_type: "line", x_data: ["07:45", "08:00"], series: [{ name: "压力（m）", data: [32, value] }] } });
|
||||
|
||||
test.use({ reducedMotion: "reduce" });
|
||||
test.setTimeout(60_000);
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route("**/@fs/**/noto-sans-sc-*.woff2", (route) => route.fulfill({
|
||||
path: resolve("node_modules/@fontsource-variable/noto-sans-sc/files", basename(new URL(route.request().url()).pathname)), contentType: "font/woff2"
|
||||
}));
|
||||
});
|
||||
|
||||
test("one manager receives live charts and keeps independent enlarged children", async ({ page }, testInfo) => {
|
||||
const task = investigationFixture(1, "多图统一窗口验收");
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
await mock.emit(task, chart("P1"));
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(manager).toBeVisible();
|
||||
await mock.emit(task, chart("P2"));
|
||||
await expect(manager.getByRole("img", { name: "合成监测 P2", exact: true })).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(1);
|
||||
await expect(manager).toContainText("2 张图表");
|
||||
await manager.getByRole("button", { name: "放大查看 合成监测 P1", exact: true }).click();
|
||||
const first = page.getByRole("dialog", { name: "合成监测 P1", exact: true });
|
||||
await expect(first).toBeVisible();
|
||||
await manager.locator(".floating-window-heading").focus();
|
||||
await manager.getByRole("button", { name: "放大查看 合成监测 P2", exact: true }).click();
|
||||
const second = page.getByRole("dialog", { name: "合成监测 P2", exact: true });
|
||||
await expect(first).toBeVisible();
|
||||
await expect(second).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(3);
|
||||
const bounds = await second.boundingBox();
|
||||
await mock.emit(task, chart("P2", 17));
|
||||
await second.getByRole("tab", { name: "数据", exact: true }).click();
|
||||
await expect(second.getByRole("table")).toContainText("17");
|
||||
expect(await second.boundingBox()).toEqual(bounds);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(3);
|
||||
await second.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await first.locator(".floating-window-heading").focus();
|
||||
await first.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
expect((await first.boundingBox())!.width).toBe(1424);
|
||||
await first.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await manager.locator(".floating-window-heading").focus();
|
||||
await manager.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach("chart-manager-desktop", { body: await manager.screenshot({ path: testInfo.outputPath("chart-manager-desktop.png") }), contentType: "image/png" });
|
||||
for (const width of [375, 320]) {
|
||||
await page.setViewportSize({ width, height: 720 });
|
||||
const box = (await manager.boundingBox())!;
|
||||
expect(box.x).toBeGreaterThanOrEqual(0);
|
||||
expect(box.x + box.width).toBeLessThanOrEqual(width);
|
||||
expect(await manager.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
await testInfo.attach(`chart-manager-${width}`, { body: await manager.screenshot({ path: testInfo.outputPath(`chart-manager-${width}.png`) }), contentType: "image/png" });
|
||||
}
|
||||
await manager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await mock.emit(task, chart("P3"));
|
||||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||||
await expect(panel.locator('[data-investigation-chart="P3"]')).toHaveCount(1);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
await expect(manager).toContainText("3 张图表");
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
test("opening, switching, refreshing and reconnecting tasks restores charts silently, including completed reports", async ({ page }) => {
|
||||
const running = investigationFixture(1, "运行中历史图表");
|
||||
const completed = investigationFixture(2, "已完成历史图表");
|
||||
completed.status = "completed";
|
||||
completed.lifecycle_status = "completed";
|
||||
const completedRun = completed.active_run!.run_id;
|
||||
completed.active_run = null;
|
||||
completed.latest_report = { revision: 1, execution_generation: 1, source_session_id: "investigation-dev-test", published_at: completed.created_at,
|
||||
published_by: "fixture", report: { title: "已完成报告", current_conclusion: "合成监测核查完成", conclusion_boundary: "仅供浏览器验证",
|
||||
stage: "final", outcome: "concluded", stop_reason: null, data_gaps: [], evidence_refs: ["synthetic:pressure"], recommendations: [], pending_items: [],
|
||||
ui_blocks: [{ evidence_refs: ["synthetic:pressure"], block: { version: "answer-ui@1", block_id: "saved-report-chart", phase: "final", fallback_text: "报告图表",
|
||||
spec: { root: "chart", elements: { chart: { type: "Chart", props: { ...chart("报告").chart, source: "合成保存证据" }, children: [] } } } } }] } };
|
||||
const saved = [running, completed].map((task, index) => ({ task_id: task.task_id, event_seq: index + 1,
|
||||
run_id: task.active_run?.run_id ?? completedRun, execution_generation: 1, occurred_at: task.created_at, command: chart(`P${index + 1}`) }));
|
||||
const mock = await mockInvestigationPresentation(page, [running, completed], saved);
|
||||
await selectInvestigation(page, running.title);
|
||||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(panel.locator('[data-investigation-chart="P1"]')).toHaveCount(1);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
// Create a live request before returning to the same task later.
|
||||
await mock.emit(running, chart("P1", 23));
|
||||
await expect(manager).toBeVisible();
|
||||
await manager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
const tasks = page.getByRole("region", { name: "工况任务", exact: true });
|
||||
await tasks.getByText(completed.title, { exact: true }).first().click();
|
||||
await expect(panel.locator('[data-investigation-chart="P2"]')).toHaveCount(1);
|
||||
await expect(panel.getByRole("img", { name: "合成监测 报告", exact: true })).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
await expect(manager).toContainText("2 张图表");
|
||||
await expect(manager.getByRole("img", { name: "合成监测 报告", exact: true })).toBeVisible();
|
||||
await manager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await tasks.getByText(running.title, { exact: true }).first().click();
|
||||
await expect(panel.locator('[data-investigation-chart="P1"]')).toHaveCount(1);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
await expect(manager).toBeVisible();
|
||||
await page.reload({ waitUntil: "domcontentloaded" });
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await selectInvestigation(page, completed.title);
|
||||
await expect(panel.locator('[data-investigation-chart="P2"]')).toHaveCount(1);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await page.evaluate(() => (window as unknown as { setInvestigationTestConnection: (value: boolean) => void }).setInvestigationTestConnection(false));
|
||||
await expect(panel).toContainText("连接中断");
|
||||
await page.evaluate(() => (window as unknown as { setInvestigationTestConnection: (value: boolean) => void }).setInvestigationTestConnection(true));
|
||||
await expect(panel).toContainText("实时跟随", { timeout: 15_000 });
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { mockInvestigationPresentation } from "./support/mock-investigation-presentation";
|
||||
|
||||
test.use({ reducedMotion: "reduce", viewport: { width: 1600, height: 1000 } });
|
||||
for (const target of ["manager", "child"] as const) {
|
||||
test(`resizing ${target} reflows charts at their actual dimensions without stretching text`, async ({ page }, testInfo) => {
|
||||
test.setTimeout(90_000);
|
||||
await mockInvestigationPresentation(page, []);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||||
const tools = page.getByTestId("investigation-dev-tools");
|
||||
await tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true }).click();
|
||||
await page.getByRole("option", { name: "复杂图表：多测点与长时序", exact: true }).click();
|
||||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成", { timeout: 20_000 });
|
||||
const panel = page.getByLabel("本地预览展示", { exact: true });
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
if (target === "child") await manager.getByRole("button", { name: "放大查看 合成全天压力对比", exact: true }).click();
|
||||
const popup = target === "manager" ? manager : page.getByRole("dialog", { name: "合成全天压力对比", exact: true });
|
||||
await expect(popup.locator(".echarts-for-react svg").first()).toBeVisible();
|
||||
await popup.locator(".floating-window-heading").hover();
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
const instances = await popup.locator(".echarts-for-react").evaluateAll((nodes) => nodes.map((node) => node.getAttribute("_echarts_instance_")));
|
||||
const drawingSize = await popup.locator(".echarts-for-react").first().evaluate((node) => ({ width: node.clientWidth, height: node.clientHeight }));
|
||||
const font = await popup.locator(".echarts-for-react svg text").first().evaluate((node) => ({
|
||||
size: getComputedStyle(node).fontSize, height: node.getBoundingClientRect().height
|
||||
}));
|
||||
const before = (await popup.boundingBox())!;
|
||||
const handle = (await popup.locator(".floating-window-resize").boundingBox())!;
|
||||
const session = await page.context().newCDPSession(page);
|
||||
await session.send("Emulation.setCPUThrottlingRate", { rate: 4 });
|
||||
await session.send("Performance.enable");
|
||||
await popup.evaluate(async (node) => {
|
||||
await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
|
||||
Object.assign(window, { chartResizeMutations: 0 });
|
||||
const observer = new MutationObserver((records) => {
|
||||
(window as unknown as { chartResizeMutations: number }).chartResizeMutations += records.length;
|
||||
});
|
||||
node.querySelectorAll(".echarts-for-react svg").forEach((svg) => observer.observe(svg, { subtree: true, attributes: true, childList: true }));
|
||||
});
|
||||
const first = await session.send("Performance.getMetrics");
|
||||
const started = Date.now();
|
||||
await page.mouse.move(handle.x + handle.width - 3, handle.y + handle.height - 3);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(handle.x + handle.width - 3 + 128, handle.y + handle.height - 3 + 64, { steps: 32 });
|
||||
// While the pointer is still held, layout and the chart drawing must adapt together.
|
||||
await expect.poll(() => popup.locator(".echarts-for-react").first().evaluate((node) => Math.abs(node.clientWidth - Number(node.querySelector("svg")?.getAttribute("width"))))).toBeLessThan(1);
|
||||
await expect.poll(() => popup.locator(".echarts-for-react").first().evaluate((node) => Math.abs(node.clientHeight - Number(node.querySelector("svg")?.getAttribute("height"))))).toBeLessThan(1);
|
||||
const during = await page.evaluate(() => (window as unknown as { chartResizeMutations: number }).chartResizeMutations);
|
||||
const preview = (await popup.boundingBox())!;
|
||||
await expect(popup.locator("[data-floating-window-document]")).toHaveCSS("transform", "none");
|
||||
expect(await popup.locator("[data-floating-window-document]").evaluate((node) => ({ width: (node as HTMLElement).style.width, height: (node as HTMLElement).style.height }))).toEqual({ width: "", height: "" });
|
||||
const resizedFont = await popup.locator(".echarts-for-react svg text").first().evaluate((node) => ({ size: getComputedStyle(node).fontSize, height: node.getBoundingClientRect().height }));
|
||||
expect(resizedFont.size).toBe(font.size);
|
||||
expect(Math.abs(resizedFont.height - font.height)).toBeLessThan(1);
|
||||
const actualDrawing = await popup.locator(".echarts-for-react").first().evaluate((node) => ({ width: node.clientWidth, height: node.clientHeight }));
|
||||
expect(actualDrawing.width).toBeGreaterThan(drawingSize.width);
|
||||
expect(actualDrawing.height).toBeGreaterThanOrEqual(drawingSize.height);
|
||||
await page.mouse.up();
|
||||
const last = await session.send("Performance.getMetrics");
|
||||
const metric = (name: string) => (last.metrics.find((item) => item.name === name)?.value ?? 0) - (first.metrics.find((item) => item.name === name)?.value ?? 0);
|
||||
const summary = { target, svgMutationsDuringResize: during, elapsedMs: Date.now() - started,
|
||||
scriptMs: metric("ScriptDuration") * 1000, layoutMs: metric("LayoutDuration") * 1000, taskMs: metric("TaskDuration") * 1000 };
|
||||
console.info("Chart resize profile", JSON.stringify(summary));
|
||||
await testInfo.attach("resize-profile", { body: JSON.stringify(summary, null, 2), contentType: "application/json" });
|
||||
expect(Math.round(preview.width - before.width)).toBe(128);
|
||||
expect(Math.round(preview.height - before.height)).toBe(64);
|
||||
expect(during).toBeGreaterThan(0);
|
||||
// Bound the expensive work on the same 4x CPU fixture used to reproduce the lag.
|
||||
expect(summary.elapsedMs).toBeLessThan(12_000);
|
||||
expect(summary.scriptMs).toBeLessThan(6_000);
|
||||
expect(await popup.locator(".echarts-for-react").evaluateAll((nodes) => nodes.map((node) => node.getAttribute("_echarts_instance_")))).toEqual(instances);
|
||||
await expect.poll(() => popup.locator(".echarts-for-react").first().evaluate((node) => Math.abs(node.clientWidth - Number(node.querySelector("svg")?.getAttribute("width"))))).toBeLessThan(1);
|
||||
const layout = await popup.evaluate((node) => ({
|
||||
plots: Array.from(node.querySelectorAll<HTMLElement>(".echarts-for-react")).filter((plot) => plot.getBoundingClientRect().height > 0).map((plot) => plot.clientHeight),
|
||||
legends: Array.from(node.querySelectorAll<HTMLElement>('[data-chart-group-tile="true"]')).map((card) => {
|
||||
const legend = card.querySelector<HTMLElement>('[aria-label="图表图例"]')!;
|
||||
const first = legend.querySelector("button")!;
|
||||
return { height: legend.clientHeight, firstRowHeight: first.getBoundingClientRect().height,
|
||||
bottomOverflow: legend.getBoundingClientRect().bottom - card.getBoundingClientRect().bottom };
|
||||
})
|
||||
}));
|
||||
for (const height of layout.plots) expect(height).toBeGreaterThanOrEqual(100);
|
||||
for (const legend of layout.legends) {
|
||||
expect(legend.height).toBeGreaterThanOrEqual(legend.firstRowHeight - 1);
|
||||
expect(legend.bottomOverflow).toBeLessThanOrEqual(1);
|
||||
}
|
||||
await testInfo.attach("resize-layout", { body: JSON.stringify(layout, null, 2), contentType: "application/json" });
|
||||
await session.send("Emulation.setCPUThrottlingRate", { rate: 1 });
|
||||
const chartSurface = target === "manager" ? manager.getByRole("group", { name: "合成全天压力对比", exact: true }) : popup;
|
||||
const selectedObject = chartSurface.getByRole("button", { name: /^切换对象 / }).nth(1);
|
||||
await selectedObject.click();
|
||||
const hiddenSeries = chartSurface.getByLabel("显示的数据序列").getByRole("button").last();
|
||||
await hiddenSeries.click();
|
||||
await expect(selectedObject).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(hiddenSeries).toHaveAttribute("aria-pressed", "false");
|
||||
const selectedInstance = await chartSurface.locator(".echarts-for-react").first().getAttribute("_echarts_instance_");
|
||||
const beforeCancel = (await popup.boundingBox())!;
|
||||
const cancelHandle = popup.locator(".floating-window-resize");
|
||||
const cancelBox = (await cancelHandle.boundingBox())!;
|
||||
await cancelHandle.evaluate((node) => node.addEventListener("pointerdown", (event) => {
|
||||
(node as HTMLElement).dataset.testPointerId = String((event as PointerEvent).pointerId);
|
||||
}, { once: true }));
|
||||
await page.mouse.move(cancelBox.x + cancelBox.width - 3, cancelBox.y + cancelBox.height - 3);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(cancelBox.x + cancelBox.width - 3 + 48, cancelBox.y + cancelBox.height - 3 + 32, { steps: 4 });
|
||||
await expect.poll(async () => Math.round((await popup.boundingBox())!.width - beforeCancel.width)).toBe(48);
|
||||
await cancelHandle.evaluate((node) => node.dispatchEvent(new PointerEvent("pointercancel", {
|
||||
pointerId: Number((node as HTMLElement).dataset.testPointerId)
|
||||
})));
|
||||
await page.mouse.up();
|
||||
await expect.poll(() => popup.boundingBox()).toEqual(beforeCancel);
|
||||
await expect(popup.locator("[data-floating-window-document]")).toHaveCSS("transform", "none");
|
||||
await expect(selectedObject).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(hiddenSeries).toHaveAttribute("aria-pressed", "false");
|
||||
const boundaryBox = (await cancelHandle.boundingBox())!;
|
||||
await page.mouse.move(boundaryBox.x + boundaryBox.width - 3, boundaryBox.y + boundaryBox.height - 3);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(1599, 999, { steps: 8 });
|
||||
await page.mouse.up();
|
||||
const final = (await popup.boundingBox())!;
|
||||
expect(Math.round(final.x + final.width)).toBe(1592);
|
||||
expect(Math.round(final.y + final.height)).toBe(992);
|
||||
await expect(selectedObject).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(hiddenSeries).toHaveAttribute("aria-pressed", "false");
|
||||
await expect(chartSurface.locator(".echarts-for-react").first()).toHaveAttribute("_echarts_instance_", selectedInstance!);
|
||||
await expect.poll(() => chartSurface.locator(".echarts-for-react").first().evaluate((node) => Math.abs(node.clientWidth - Number(node.querySelector("svg")?.getAttribute("width"))))).toBeLessThan(1);
|
||||
await testInfo.attach(`resize-${target}`, { body: await popup.screenshot({ path: testInfo.outputPath(`resize-${target}.png`) }), contentType: "image/png" });
|
||||
});
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
import { investigationFixture, mockInvestigationPresentation, selectInvestigation } from "./support/mock-investigation-presentation";
|
||||
|
||||
const chart = (index: number) => ({
|
||||
@@ -7,15 +7,51 @@ const chart = (index: number) => ({
|
||||
series: [{ name: "压力（m）", data: [30, 30 - index] }] }
|
||||
});
|
||||
|
||||
const managedPages = new WeakSet<Page>();
|
||||
async function openChild(page: Page, title: string, live = true) {
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
if (live && !managedPages.has(page)) {
|
||||
await expect(manager).toBeVisible();
|
||||
managedPages.add(page);
|
||||
}
|
||||
if (await manager.isVisible()) await manager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await page.getByLabel("调查实时展示", { exact: true }).getByRole("button", { name: `放大查看 ${title}`, exact: true }).click();
|
||||
}
|
||||
|
||||
test.setTimeout(60_000);
|
||||
// Keep unrelated avatar animation out of chart geometry and drag measurements.
|
||||
test.use({ reducedMotion: "reduce" });
|
||||
|
||||
test("losing window focus cancels a drag and allows a fresh gesture", async ({ page }) => {
|
||||
const task = investigationFixture(1, "图窗失焦恢复核查");
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
await mock.emit(task, chart(1));
|
||||
await openChild(page, "合成压力分析 1");
|
||||
const popup = page.getByRole("dialog", { name: "合成压力分析 1", exact: true });
|
||||
const before = (await popup.boundingBox())!;
|
||||
await page.mouse.move(before.x + 180, before.y + 24);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(before.x + 100, before.y + 64, { steps: 4 });
|
||||
await expect.poll(async () => Math.round((await popup.boundingBox())!.x - before.x)).toBe(-80);
|
||||
await page.evaluate(() => window.dispatchEvent(new Event("blur")));
|
||||
expect(await popup.boundingBox()).toEqual(before);
|
||||
expect(await popup.evaluate((node) => (node as HTMLElement).style.willChange)).toBe("");
|
||||
await page.mouse.up();
|
||||
await page.mouse.move(before.x + 180, before.y + 24);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(before.x + 140, before.y + 44, { steps: 4 });
|
||||
await page.mouse.up();
|
||||
expect(Math.round((await popup.boundingBox())!.x - before.x)).toBe(-40);
|
||||
expect(Math.round((await popup.boundingBox())!.y - before.y)).toBe(20);
|
||||
});
|
||||
|
||||
test("cancelled drags release capture and preserve restore, resizing and keyboard controls", async ({ page }) => {
|
||||
const task = investigationFixture(1, "图窗拖动取消核查");
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
await mock.emit(task, chart(1));
|
||||
await openChild(page, "合成压力分析 1");
|
||||
const popup = page.getByRole("dialog", { name: "合成压力分析 1", exact: true });
|
||||
await expect(popup).toBeVisible();
|
||||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||||
@@ -37,6 +73,7 @@ test("cancelled drags release capture and preserve restore, resizing and keyboar
|
||||
expect(await popup.evaluate((node) => (node as HTMLElement).style.willChange)).toBe("");
|
||||
await popup.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
expect((await popup.boundingBox())!.x).toBe(8);
|
||||
expect((await popup.boundingBox())!.y).toBe(64);
|
||||
await popup.getByRole("button", { name: "还原窗口", exact: true }).click();
|
||||
expect(await popup.boundingBox()).toEqual(original);
|
||||
await heading.focus();
|
||||
@@ -69,6 +106,8 @@ test("profiles a single drag with eight comparison chart windows", async ({ page
|
||||
data: slots.map((_, point) => point < 10 ? null : 30 + day / 10),
|
||||
sample_times: slots.map((time, point) => point < 10 ? null : `2026-07-${String(15 - day).padStart(2, "0")}T${time}:00+08:00`) }))]
|
||||
} });
|
||||
await expect(page.getByLabel("调查实时展示", { exact: true }).getByRole("button", { name: `放大查看 合成七日同期曲线 ${index}`, exact: true })).toBeVisible();
|
||||
await openChild(page, `合成七日同期曲线 ${index}`);
|
||||
await expect(page.getByRole("dialog", { name: `合成七日同期曲线 ${index}`, exact: true })).toBeVisible();
|
||||
}
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(8);
|
||||
@@ -144,6 +183,8 @@ for (const height of [900, 720]) {
|
||||
await selectInvestigation(page, task.title);
|
||||
for (let index = 1; index <= 4; index++) {
|
||||
await mock.emit(task, { ...chart(index), chart_id: `pressure-${index}` });
|
||||
await expect(page.getByLabel("调查实时展示", { exact: true }).getByRole("button", { name: `放大查看 合成压力分析 ${index}`, exact: true })).toBeVisible();
|
||||
await openChild(page, `合成压力分析 ${index}`);
|
||||
await expect(page.getByRole("dialog", { name: `合成压力分析 ${index}`, exact: true })).toBeVisible();
|
||||
}
|
||||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||||
@@ -172,7 +213,7 @@ for (const height of [900, 720]) {
|
||||
await page.mouse.move(start.x - 120, start.y - 32, { steps: 12 });
|
||||
await page.mouse.up();
|
||||
await expect.poll(async () => Math.round((await popup.boundingBox())!.x - before.x)).toBe(-120);
|
||||
await expect.poll(async () => Math.round((await popup.boundingBox())!.y - before.y)).toBe(-32);
|
||||
await expect.poll(async () => Math.round((await popup.boundingBox())!.y - before.y)).toBe(Math.max(64, before.y - 32) - before.y);
|
||||
expect((await popup.boundingBox())!.width).toBe(before.width);
|
||||
expect((await popup.boundingBox())!.height).toBe(before.height);
|
||||
}
|
||||
@@ -183,49 +224,36 @@ for (const height of [900, 720]) {
|
||||
});
|
||||
}
|
||||
|
||||
test("live analysis opens a window, preserves its position and respects closing and task switches", async ({ page }, testInfo) => {
|
||||
const task = investigationFixture(1, "图表自动展示核查");
|
||||
const other = investigationFixture(2, "另一项调查");
|
||||
const mock = await mockInvestigationPresentation(page, [task, other]);
|
||||
test("live analysis updates one manager and respects dismissal", async ({ page }, testInfo) => {
|
||||
const task = investigationFixture(1, "图表统一展示核查");
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||||
await expect(panel.getByText("实时跟随", { exact: true })).toBeVisible();
|
||||
const collapse = panel.getByRole("button", { name: "收起展示", exact: true });
|
||||
await collapse.focus();
|
||||
await mock.emit(task, chart(1));
|
||||
let popup = page.getByRole("dialog", { name: "合成压力分析 1", exact: true });
|
||||
await expect(popup).toBeVisible();
|
||||
await expect(popup.getByRole("img", { name: "合成压力分析 1", exact: true })).toBeVisible();
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(manager).toBeVisible();
|
||||
await expect(collapse).toBeFocused();
|
||||
const heading = popup.getByLabel("窗口标题栏，可用方向键移动，Shift 加方向键调整大小");
|
||||
await heading.focus();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(1);
|
||||
await manager.locator(".floating-window-heading").focus();
|
||||
await page.keyboard.press("ArrowRight");
|
||||
const moved = (await popup.boundingBox())!;
|
||||
const moved = await manager.boundingBox();
|
||||
await mock.emit(task, chart(2));
|
||||
popup = page.getByRole("dialog", { name: "合成压力分析 2", exact: true });
|
||||
await expect(popup).toBeVisible();
|
||||
expect((await popup.boundingBox())!.x).toBe(moved.x);
|
||||
await expect(manager.getByRole("img", { name: "合成压力分析 2", exact: true })).toBeVisible();
|
||||
expect(await manager.boundingBox()).toEqual(moved);
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await mock.emit(task, { action: "zoom_to_map", center: [121.48, 31.1], zoom: 13 });
|
||||
await expect(panel.getByRole("combobox", { name: "切换展示动作" })).toContainText("3 个动作");
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "放大查看 合成压力分析 2", exact: true }).click();
|
||||
await expect(popup).toBeVisible();
|
||||
await testInfo.attach("live-chart-window", { body: await page.screenshot({ path: testInfo.outputPath("live-chart-window.png") }), contentType: "image/png" });
|
||||
await popup.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await mock.emit(task, chart(3));
|
||||
await expect(page.getByRole("dialog", { name: "合成压力分析 3", exact: true })).toBeVisible();
|
||||
await mock.emit(task, { action: "close_chart", chart_id: "pressure" });
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await mock.emit(task, chart(4));
|
||||
await expect(page.getByRole("dialog", { name: "合成压力分析 4", exact: true })).toBeVisible();
|
||||
await page.getByRole("region", { name: "工况任务", exact: true }).getByText(other.title, { exact: true }).first().click();
|
||||
await expect(panel.getByRole("img", { name: "合成压力分析 3", exact: true })).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
await expect(manager.getByRole("img", { name: "合成压力分析 3", exact: true })).toBeVisible();
|
||||
await testInfo.attach("live-chart-manager", { body: await manager.screenshot(), contentType: "image/png" });
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
test("playback windows follow saved snapshots while live results remain separate", async ({ page }, testInfo) => {
|
||||
test("playback restores charts without opening windows while live results remain separate", async ({ page }, testInfo) => {
|
||||
const task = investigationFixture(1, "图表回放核查");
|
||||
const commands = [chart(1), { action: "zoom_to_map", center: [121.48, 31.1], zoom: 13 }, chart(2), { action: "close_chart", chart_id: "pressure" }];
|
||||
const saved = commands.map((command, index) => ({ task_id: task.task_id, event_seq: index + 1,
|
||||
@@ -237,6 +265,8 @@ test("playback windows follow saved snapshots while live results remain separate
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "播放历史", exact: true }).click();
|
||||
await panel.getByRole("button", { name: "暂停历史播放", exact: true }).press("Enter");
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await openChild(page, "合成压力分析 1", false);
|
||||
const popup = page.getByRole("dialog", { name: "合成压力分析 1", exact: true });
|
||||
await expect(popup).toBeVisible();
|
||||
await mock.emit(task, chart(3));
|
||||
@@ -249,17 +279,19 @@ test("playback windows follow saved snapshots while live results remain separate
|
||||
await expect(panel.getByRole("combobox", { name: "切换展示动作" })).toContainText("2.");
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await expect(page.getByRole("dialog", { name: "合成压力分析 2", exact: true })).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await expect(panel.getByRole("img", { name: "合成压力分析 2", exact: true })).toBeVisible();
|
||||
await expect(progress).toBeFocused();
|
||||
await testInfo.attach("playback-chart-window", { body: await page.screenshot({ path: testInfo.outputPath("playback-chart-window.png") }), contentType: "image/png" });
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "回到当前", exact: true }).click();
|
||||
await expect(page.getByRole("dialog", { name: "合成压力分析 3", exact: true })).toBeVisible();
|
||||
await expect(panel.getByRole("img", { name: "合成压力分析 3", exact: true })).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
test("structured analysis charts open responsive windows in local preview and history", async ({ page }, testInfo) => {
|
||||
test("structured analysis charts retain manual enlargement without opening during history", async ({ page }, testInfo) => {
|
||||
const task = investigationFixture(1, "结构化分析展示核查");
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
@@ -272,6 +304,9 @@ test("structured analysis charts open responsive windows in local preview and hi
|
||||
}
|
||||
} }));
|
||||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||||
const preview = page.getByLabel("本地预览展示", { exact: true });
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await preview.getByRole("button", { name: "放大查看 合成压力分析 1", exact: true }).click();
|
||||
const popup = page.getByRole("dialog", { name: "合成压力分析 1", exact: true });
|
||||
await expect(popup).toBeVisible();
|
||||
await expect(popup.getByRole("img", { name: "合成压力分析 1", exact: true })).toBeVisible();
|
||||
@@ -285,9 +320,8 @@ test("structured analysis charts open responsive windows in local preview and hi
|
||||
}
|
||||
await popup.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
const preview = page.getByLabel("本地预览展示", { exact: true });
|
||||
await preview.getByRole("button", { name: "播放历史", exact: true }).click();
|
||||
await expect(popup).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
@@ -296,6 +330,7 @@ test("live charts fit desktop and narrow windows without outer scrollbars", asyn
|
||||
const mock = await mockInvestigationPresentation(page, [task]);
|
||||
await selectInvestigation(page, task.title);
|
||||
await mock.emit(task, chart(1));
|
||||
await openChild(page, "合成压力分析 1");
|
||||
const popup = page.getByRole("dialog", { name: "合成压力分析 1", exact: true });
|
||||
const content = popup.locator("[data-floating-window-content]");
|
||||
await expect(popup.getByRole("img", { name: "合成压力分析 1", exact: true })).toBeVisible();
|
||||
@@ -330,6 +365,7 @@ test("SCADA chart axes and legends fit every nested container", async ({ page },
|
||||
series: [{ name: "测点 123748（实测回放）", data: [26.2, 25.7, 23.5] },
|
||||
{ name: "测点 159673（实测回放）", data: [24.9, 24.87, 21.6] }]
|
||||
} });
|
||||
await openChild(page, "SCADA 回放压力：异常前后（2026-07-16）");
|
||||
const popup = page.getByRole("dialog", { name: "SCADA 回放压力：异常前后（2026-07-16）", exact: true });
|
||||
await expect(popup).toBeVisible();
|
||||
await expect.poll(() => popup.evaluate((node) => Array.from(node.querySelectorAll<HTMLElement>("*"))
|
||||
@@ -362,6 +398,8 @@ test("SCADA pressure and flow keep full comparison data without timezone wording
|
||||
...Array.from({ length: 7 }, (_, day) => ({ name: `参考 07-${String(9 + day).padStart(2, "0")}`, type: "scatter",
|
||||
data: labels.map((_, i) => i < 10 ? null : 28 + day) }))]
|
||||
} });
|
||||
await expect(page.getByLabel("调查实时展示", { exact: true }).getByRole("button", { name: `放大查看 回放${metric}：${device}（${unit}，07-16 04:45–07:45）`, exact: true })).toBeVisible();
|
||||
await openChild(page, `回放${metric}：${device}（${unit}，07-16 04:45–07:45）`);
|
||||
const popup = page.getByRole("dialog", { name: `回放${metric}：${device}（${unit}，07-16 04:45–07:45）`, exact: true });
|
||||
await expect(popup).toBeVisible();
|
||||
await expect(popup.getByText(/上海时间|UTC\+8|Asia\/Shanghai/)).toHaveCount(0);
|
||||
|
||||
@@ -12,6 +12,7 @@ test("live investigation charts remain visible while Dev is open", async ({ page
|
||||
chart: { title: "实时合成压力核查", chart_type: "line", x_data: ["08:00", "08:15"], series: [{ name: "压力水头（m）", data: [32, 28] }] } });
|
||||
await expect(page.locator('[data-investigation-chart="live-pressure"]')).toBeVisible();
|
||||
await expect(page.getByLabel("调查实时展示", { exact: true })).not.toContainText("图表当前不可见");
|
||||
await page.getByRole("dialog", { name: "图表管理", exact: true }).getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await page.getByRole("button", { name: "收起展示", exact: true }).click();
|
||||
await mock.emit(task, { action: "open_chart", chart_id: "while-collapsed", evidence_refs: ["dev:synthetic"],
|
||||
chart: { title: "收起期间的合成图表", chart_type: "line", x_data: ["08:00"], series: [{ name: "压力水头（m）", data: [32] }] } });
|
||||
@@ -198,7 +199,8 @@ test("JSONL cases switch directly, reset validation and remove the previous loca
|
||||
for (const [label, error] of [
|
||||
["错误：JSON 语法", "第 2 行不是合法 JSON"],
|
||||
["错误：不支持的动作", "第 1 行展示指令不合法"],
|
||||
["错误：图表数据不齐", "第 1 行展示指令不合法"]
|
||||
["错误：图表数据不齐", "第 1 行展示指令不合法"],
|
||||
["错误：同期时刻错位", "换算为 UTC+8 后须与 x_data"]
|
||||
]) {
|
||||
await choose(label);
|
||||
await tools.getByRole("button", { name: "校验 JSONL", exact: true }).click();
|
||||
@@ -223,7 +225,7 @@ test("JSONL cases preview tables, charts and map overlays without an investigati
|
||||
await expect(cases).toBeEnabled();
|
||||
await cases.click();
|
||||
await expect(page.getByRole("listbox")).toBeVisible();
|
||||
await expect(page.getByRole("option")).toHaveCount(14);
|
||||
await expect(page.getByRole("option")).toHaveCount(15);
|
||||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||||
await testInfo.attach("case-dropdown-without-task", {
|
||||
body: await page.screenshot({ path: testInfo.outputPath("dropdown-without-task.png") }), contentType: "image/png"
|
||||
@@ -391,9 +393,10 @@ test("individual charts float, move and resize while the preview stays in place"
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(handle.x + 88, handle.y + 58, { steps: 8 });
|
||||
const resizedPlot = firstPlot.locator("svg");
|
||||
await expect(first).toHaveAttribute("data-floating-window-resizing", "true");
|
||||
await page.mouse.up();
|
||||
await expect.poll(async () => Math.abs(Number(await resizedPlot.getAttribute("width")) - (await firstPlot.boundingBox())!.width)).toBeLessThan(1);
|
||||
await expect.poll(async () => Math.abs(Number(await resizedPlot.getAttribute("height")) - (await firstPlot.boundingBox())!.height)).toBeLessThan(1);
|
||||
await page.mouse.up();
|
||||
await expect.poll(async () => (await first.boundingBox())!.width - beforeResize.width).toBeGreaterThan(70);
|
||||
await expect.poll(async () => (await first.boundingBox())!.height - beforeResize.height).toBeGreaterThan(40);
|
||||
expect(await panel.boundingBox()).toEqual(original);
|
||||
@@ -544,7 +547,7 @@ test("complex investigation cases show multi-chart and multi-table results witho
|
||||
await expect(page.getByRole("option", { name: "地图定位与高亮", exact: true })).toHaveCount(0);
|
||||
await page.getByRole("option", { name: "复杂调查：多图多表联动", exact: true }).click();
|
||||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成：2 条展示指令、4 个界面块");
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成：14 条展示指令、2 个界面块", { timeout: 20_000 });
|
||||
const panel = page.getByLabel("本地预览展示", { exact: true });
|
||||
await expect(panel.getByRole("button", { name: "放大查看 合成全天压力对比", exact: true })).toBeVisible();
|
||||
await expect(panel.getByRole("button", { name: "放大查看 合成分区流量趋势", exact: true })).toHaveCount(1);
|
||||
@@ -566,7 +569,7 @@ test("expanded bars fill the window while preserving legends, type size and the
|
||||
await tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true }).click();
|
||||
await page.getByRole("option", { name: "复杂调查：多图多表联动", exact: true }).click();
|
||||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成", { timeout: 20_000 });
|
||||
await page.getByLabel("本地预览展示", { exact: true }).getByRole("button", { name: "放大查看 合成候选方案影响对比", exact: true }).click();
|
||||
const floating = page.getByRole("dialog", { name: "合成候选方案影响对比", exact: true });
|
||||
const legend = floating.getByLabel("类别图例", { exact: true });
|
||||
@@ -579,20 +582,25 @@ test("expanded bars fill the window while preserving legends, type size and the
|
||||
const svg = plot.locator("svg");
|
||||
await expect.poll(async () => Number(await svg.getAttribute("width"))).toBe((await plot.boundingBox())!.width);
|
||||
const drawing = (await plot.boundingBox())!;
|
||||
const sidebar = (await floating.locator("aside").boundingBox())!;
|
||||
const footer = floating.getByLabel("图表图例");
|
||||
const plotViewport = floating.getByRole("group", { name: /按回车查看数据点/ });
|
||||
const initialViewport = (await plotViewport.boundingBox())!;
|
||||
const initialWindowHeight = (await floating.boundingBox())!.height;
|
||||
expect((await footer.boundingBox())!.y).toBeGreaterThanOrEqual(initialViewport.y + initialViewport.height);
|
||||
const instance = await plot.locator(".echarts-for-react").getAttribute("_echarts_instance_");
|
||||
const fontSize = await svg.locator("text").first().evaluate((element) => getComputedStyle(element).fontSize);
|
||||
await floating.locator(".floating-window-heading").focus();
|
||||
await page.keyboard.press("Shift+ArrowRight");
|
||||
await page.keyboard.press("Shift+ArrowDown");
|
||||
await expect.poll(async () => (await plot.boundingBox())!.width).toBe(drawing.width + 16);
|
||||
await expect.poll(async () => (await plot.boundingBox())!.height).toBe(drawing.height + 16);
|
||||
await expect.poll(async () => (await floating.boundingBox())!.height).toBe(initialWindowHeight + 16);
|
||||
expect((await plotViewport.boundingBox())!.height).toBeGreaterThanOrEqual(initialViewport.height);
|
||||
await floating.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
await expect.poll(async () => (await plot.boundingBox())!.width).toBeGreaterThan(drawing.width + 400);
|
||||
await expect.poll(async () => (await plot.boundingBox())!.height).toBeGreaterThan(drawing.height + 100);
|
||||
await expect.poll(async () => Number(await svg.getAttribute("width"))).toBe((await plot.boundingBox())!.width);
|
||||
await expect.poll(async () => Number(await svg.getAttribute("height"))).toBe((await plot.boundingBox())!.height);
|
||||
expect((await floating.locator("aside").boundingBox())!.width).toBe(sidebar.width);
|
||||
expect((await footer.boundingBox())!.y).toBeGreaterThanOrEqual((await plotViewport.boundingBox())!.y + (await plotViewport.boundingBox())!.height);
|
||||
expect(await svg.locator("text").first().evaluate((element) => getComputedStyle(element).fontSize)).toBe(fontSize);
|
||||
await expect(plot.locator(".echarts-for-react")).toHaveAttribute("_echarts_instance_", instance!);
|
||||
await page.getByRole("button", { name: "关闭通知", exact: true }).evaluateAll((buttons) => buttons.forEach((button) => (button as HTMLButtonElement).click()));
|
||||
@@ -609,7 +617,12 @@ test("expanded bars fill the window while preserving legends, type size and the
|
||||
await expect(floating.getByRole("table")).toContainText("合成方案 E：待补充资料");
|
||||
});
|
||||
|
||||
test("full-day charts expose all eight series and retain legend selection while resizing", async ({ page }) => {
|
||||
test("full-day chart examples group objects and retain their eight series while resizing", async ({ page }, testInfo) => {
|
||||
test.setTimeout(60_000);
|
||||
await page.route("**/@fs/**/noto-sans-sc-*.woff2", (route) => route.fulfill({
|
||||
path: `node_modules/@fontsource-variable/noto-sans-sc/files/${new URL(route.request().url()).pathname.split("/").at(-1)}`,
|
||||
contentType: "font/woff2"
|
||||
}));
|
||||
await mockInvestigationPresentation(page, []);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||||
@@ -617,23 +630,37 @@ test("full-day charts expose all eight series and retain legend selection while
|
||||
await tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true }).click();
|
||||
await page.getByRole("option", { name: "复杂图表：多测点与长时序", exact: true }).click();
|
||||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成", { timeout: 20_000 });
|
||||
await page.getByLabel("本地预览展示", { exact: true }).getByRole("button", { name: "放大查看 合成全天压力对比", exact: true }).click();
|
||||
const floating = page.getByRole("dialog", { name: "合成全天压力对比", exact: true });
|
||||
await floating.locator(".floating-window-heading").click({ position: { x: 100, y: 20 } });
|
||||
const objects = floating.getByLabel("选择图表对象");
|
||||
await expect(objects.getByRole("button")).toHaveCount(8);
|
||||
const object = INVESTIGATION_DEV_NETWORK.nodeAnchors[1].id;
|
||||
await objects.getByRole("button", { name: `切换对象 ${object}`, exact: true }).click();
|
||||
await expect(objects.getByRole("button", { pressed: true })).toHaveCount(1);
|
||||
const series = floating.getByLabel("显示的数据序列").getByRole("button");
|
||||
await expect(series).toHaveCount(8);
|
||||
await series.last().click();
|
||||
await expect(series.last()).toHaveAttribute("aria-pressed", "false");
|
||||
const plot = floating.getByRole("img", { name: "合成全天压力对比", exact: true });
|
||||
const plot = floating.getByRole("img", { name: `${object} 合成全天压力对比`, exact: true });
|
||||
const drawing = (await plot.boundingBox())!;
|
||||
const windowHeight = (await floating.boundingBox())!.height;
|
||||
await floating.locator(".floating-window-heading").focus();
|
||||
await page.keyboard.press("Shift+ArrowDown");
|
||||
await expect.poll(async () => (await plot.boundingBox())!.height).toBe(drawing.height + 16);
|
||||
await expect.poll(async () => (await floating.boundingBox())!.height).toBe(windowHeight + 16);
|
||||
expect((await plot.boundingBox())!.height).toBeGreaterThanOrEqual(drawing.height);
|
||||
await expect(series.last()).toHaveAttribute("aria-pressed", "false");
|
||||
await floating.getByRole("button", { name: "显示全部序列", exact: true }).click();
|
||||
await expect(series.last()).toHaveAttribute("aria-pressed", "true");
|
||||
await floating.getByRole("tab", { name: "数据", exact: true }).click();
|
||||
await expect(floating.locator("tbody tr")).toHaveCount(96);
|
||||
await expect(floating.getByRole("table")).toContainText("2026-07-16 23:45:00+08:00");
|
||||
await floating.getByRole("tab", { name: "复合", exact: true }).click();
|
||||
await floating.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
await expect.poll(async () => (await plot.boundingBox())!.height).toBeGreaterThan(drawing.height + 100);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach("migrated-chart-example", { body: await floating.screenshot({ path: testInfo.outputPath("migrated-chart-example.png") }), contentType: "image/png" });
|
||||
});
|
||||
|
||||
for (const reducedMotion of ["no-preference", "reduce"] as const) {
|
||||
@@ -746,6 +773,9 @@ test("live actions continue recording without interrupting a historical view and
|
||||
await expect(panel.getByRole("group", { name: "压力快照 1", exact: true })).toBeVisible();
|
||||
const switcher = panel.getByRole("combobox", { name: "切换展示动作" });
|
||||
await expect(switcher).toContainText("压力快照 1");
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(manager).toBeVisible();
|
||||
await manager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await switcher.click();
|
||||
await expect(page.getByRole("option")).toHaveCount(1);
|
||||
await expect(page.getByRole("option", { name: /当前（最新）.*压力快照 1/ })).toBeVisible();
|
||||
|
||||
@@ -72,6 +72,7 @@ const previousReport: NonNullable<OperationalTask["latest_report"]> = {
|
||||
};
|
||||
|
||||
const task: OperationalTask = {
|
||||
execution_scope: "production",
|
||||
project_id: projectId,
|
||||
task_id: taskId,
|
||||
task_type: "event_investigation",
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
import { expect, test, type Locator, type Page } from "@playwright/test";
|
||||
import { basename, resolve } from "node:path";
|
||||
import { investigationFixture, mockInvestigationPresentation, selectInvestigation, type SavedPresentationEvent } from "./support/mock-investigation-presentation";
|
||||
|
||||
const pressureIds = ["170486", "175618", "159673", "135160", "174754", "123781", "142493"];
|
||||
const flowIds = ["541061", "542017", "486033"];
|
||||
const times = Array.from({ length: 13 }, (_, index) => `${String(5 + Math.floor(index / 4)).padStart(2, "0")}:${String(index % 4 * 15).padStart(2, "0")}`);
|
||||
const pressureTitle = "压力当前曲线与前七天同期对比（m）";
|
||||
const flowTitle = "流量当前曲线与前七天同期对比（m³/h）";
|
||||
|
||||
// These synthetic fixtures preserve the naming shape found in read-only persisted
|
||||
// SCADA task charts. Values, timestamps and references are self-contained test data.
|
||||
function comparison(id: string, flow = false, dateOnlyHistory = false) {
|
||||
const metric = flow ? "流量" : "压力";
|
||||
const unit = flow ? "m³/h" : "m";
|
||||
const offset = (flow ? flowIds : pressureIds).indexOf(id);
|
||||
const base = (flow ? 100 : 32) + offset;
|
||||
return { action: "open_chart", chart_id: `legacy-${flow ? "flow" : "pressure"}-${id}`, evidence_refs: [`synthetic:legacy-shape:${id}`],
|
||||
chart: { title: dateOnlyHistory ? `测点 ${id} ${metric}三小时与历史对照（${unit}）` : `${metric}测点 ${id} 当前曲线与前七天同期对比（${unit}）`,
|
||||
chart_type: dateOnlyHistory ? "line" : "time_comparison", x_axis_name: "时间", y_axis_name: `${metric}（${unit}）`, x_data: times,
|
||||
series: [{ name: `${id} 当日`, type: "line", data: times.map((_, index) => base - index / 4),
|
||||
sample_times: times.map((time) => `2026-07-16T${time}:00+08:00`) },
|
||||
...Array.from({ length: 7 }, (_, day) => ({ name: `${dateOnlyHistory ? "" : `${id} `}07-${String(9 + day).padStart(2, "0")}`, type: "scatter",
|
||||
data: times.map((_, index) => index < 10 ? null : base + day / 2),
|
||||
sample_times: times.map((time, index) => index < 10 ? null : `2026-07-${String(9 + day).padStart(2, "0")}T${time}:00+08:00`) }))]
|
||||
} };
|
||||
}
|
||||
|
||||
const trend = (flow: boolean) => ({ action: "open_chart", chart_id: `trend-${flow ? "flow" : "pressure"}`, evidence_refs: ["synthetic:legacy-trend"],
|
||||
chart: { title: `${flow ? "流量" : "压力"}测点当前三小时总览`, chart_type: "line", x_data: times,
|
||||
series: [{ name: "合成当前趋势", data: times.map((_, index) => (flow ? 100 : 32) - index / 4) }] } });
|
||||
|
||||
function savedTask(index: number, title: string, commands: unknown[]) {
|
||||
const task = investigationFixture(index, title);
|
||||
const run = task.active_run!;
|
||||
task.status = "waiting_human";
|
||||
task.lifecycle_status = "waiting_human";
|
||||
task.latest_run = { ...run, status: "succeeded", finished_at: task.updated_at };
|
||||
task.active_run = null;
|
||||
const events: SavedPresentationEvent[] = commands.map((command, sequence) => ({ task_id: task.task_id,
|
||||
run_id: run.run_id, event_seq: sequence + 1, execution_generation: 1, occurred_at: task.created_at, command }));
|
||||
return { task, events };
|
||||
}
|
||||
|
||||
const managed = (manager: Locator, title: string) => manager.locator(`[data-managed-chart][data-chart-title="${title}"]`);
|
||||
const plot = (article: Locator) => article.locator('[data-chart-view] div[role="img"]:not(.echarts-for-react)');
|
||||
|
||||
async function locate(page: Page, manager: Locator, title: string) {
|
||||
await manager.getByRole("combobox", { name: "快速定位图表", exact: true }).click();
|
||||
await page.getByRole("option").filter({ hasText: title }).click();
|
||||
await expect(managed(manager, title)).toBeVisible();
|
||||
}
|
||||
|
||||
async function expectBottomLegend(article: Locator) {
|
||||
const drawing = (await plot(article).boundingBox())!;
|
||||
const legend = (await article.getByLabel("图表图例", { exact: true }).boundingBox())!;
|
||||
const bounds = (await article.boundingBox())!;
|
||||
expect(legend.y).toBeGreaterThanOrEqual(drawing.y + drawing.height - 1);
|
||||
expect(legend.y + legend.height).toBeLessThanOrEqual(bounds.y + bounds.height + 1);
|
||||
expect(drawing.height).toBeGreaterThanOrEqual(100);
|
||||
}
|
||||
|
||||
test.use({ reducedMotion: "reduce", hasTouch: true, screenshot: "only-on-failure" });
|
||||
test.setTimeout(90_000);
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route("**/@fs/**/noto-sans-sc-*.woff2", (route) => route.fulfill({
|
||||
path: resolve("node_modules/@fontsource-variable/noto-sans-sc/files", basename(new URL(route.request().url()).pathname)), contentType: "font/woff2"
|
||||
}));
|
||||
});
|
||||
|
||||
test("saved waiting-human SCADA charts restore silently into two trends and two object groups", async ({ page }, testInfo) => {
|
||||
const { task, events } = savedTask(21, "合成历史 SCADA 旧标题恢复", [trend(false), trend(true),
|
||||
...pressureIds.map((id) => comparison(id)), ...flowIds.map((id) => comparison(id, true))]);
|
||||
const mock = await mockInvestigationPresentation(page, [task], events);
|
||||
await selectInvestigation(page, task.title);
|
||||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||||
await expect(panel.locator("[data-investigation-chart]")).toHaveCount(12);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(manager.locator("[data-managed-chart]")).toHaveCount(4);
|
||||
await manager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await page.reload({ waitUntil: "domcontentloaded" });
|
||||
await selectInvestigation(page, task.title);
|
||||
await expect(panel.locator("[data-investigation-chart]")).toHaveCount(12);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
await expect(manager.locator("[data-managed-chart]")).toHaveCount(4);
|
||||
await expect(manager).toContainText("4 张图表");
|
||||
const pressure = managed(manager, pressureTitle);
|
||||
const flow = managed(manager, flowTitle);
|
||||
await expect(pressure).toBeVisible();
|
||||
await expect(flow).toBeVisible();
|
||||
await expect(managed(manager, "压力测点当前三小时总览")).toBeVisible();
|
||||
await expect(managed(manager, "流量测点当前三小时总览")).toBeVisible();
|
||||
const pressureObjects = pressure.locator('aside[aria-label="选择图表对象"]');
|
||||
const flowObjects = flow.locator('aside[aria-label="选择图表对象"]');
|
||||
await expect(pressureObjects.getByRole("button")).toHaveCount(7);
|
||||
await expect(flowObjects.getByRole("button")).toHaveCount(3);
|
||||
await pressureObjects.getByRole("button", { name: "切换对象 175618", exact: true }).click();
|
||||
await expect(plot(pressure)).toHaveAttribute("aria-label", "压力测点 175618 当前曲线与前七天同期对比（m）");
|
||||
const legend = pressure.getByLabel("图表图例", { exact: true });
|
||||
await expect(legend.getByRole("button")).toHaveCount(8);
|
||||
await expect(legend.getByRole("button", { name: "175618 当日", exact: true })).toBeVisible();
|
||||
await expectBottomLegend(pressure);
|
||||
await flowObjects.getByRole("button", { name: "切换对象 486033", exact: true }).click();
|
||||
await expect(plot(flow)).toHaveAttribute("aria-label", "流量测点 486033 当前曲线与前七天同期对比（m³/h）");
|
||||
await expectBottomLegend(flow);
|
||||
await pressure.getByRole("tab", { name: "数据", exact: true }).click();
|
||||
const table = pressure.getByRole("table");
|
||||
await expect(table.getByRole("row")).toHaveCount(14);
|
||||
await expect(table.getByRole("row").last()).toContainText("2026-07-16 08:00:00+08:00");
|
||||
await expect(table.getByRole("row").last()).toContainText("2026-07-09 08:00:00+08:00");
|
||||
await expect(table.getByRole("row").last()).toContainText("30 (2026-07-16");
|
||||
await pressure.getByRole("tab", { name: "复合", exact: true }).click();
|
||||
await pressure.getByRole("button", { name: `放大查看 ${pressureTitle}`, exact: true }).click();
|
||||
const child = page.getByRole("dialog", { name: pressureTitle, exact: true });
|
||||
await expect(child).toBeVisible();
|
||||
await expect(manager).toBeVisible();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(2);
|
||||
await child.getByRole("button", { name: "切换对象 142493", exact: true }).click();
|
||||
await expect(child.getByRole("img", { name: "压力测点 142493 当前曲线与前七天同期对比（m）", exact: true })).toBeVisible();
|
||||
await child.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(1);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach("legacy-scada-groups-desktop", { body: await manager.screenshot({ path: testInfo.outputPath("legacy-scada-groups-desktop.png") }), contentType: "image/png" });
|
||||
for (const width of [375, 320]) {
|
||||
await page.setViewportSize({ width, height: 812 });
|
||||
await expect(manager.locator("[data-chart-layout]")).toHaveAttribute("data-chart-layout", "one");
|
||||
await locate(page, manager, pressureTitle);
|
||||
const id = width === 375 ? "175618" : "159673";
|
||||
await pressure.getByRole("combobox", { name: "选择图表对象", exact: true }).tap();
|
||||
await page.getByRole("option", { name: id, exact: true }).tap();
|
||||
await expect(plot(pressure)).toHaveAttribute("aria-label", `压力测点 ${id} 当前曲线与前七天同期对比（m）`);
|
||||
await expectBottomLegend(pressure);
|
||||
expect(await manager.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
|
||||
await testInfo.attach(`legacy-scada-groups-${width}`, { body: await manager.screenshot({ path: testInfo.outputPath(`legacy-scada-groups-${width}.png`) }), contentType: "image/png" });
|
||||
await locate(page, manager, flowTitle);
|
||||
await flow.getByRole("combobox", { name: "选择图表对象", exact: true }).tap();
|
||||
await page.getByRole("option", { name: "541061", exact: true }).tap();
|
||||
await expect(plot(flow)).toHaveAttribute("aria-label", "流量测点 541061 当前曲线与前七天同期对比（m³/h）");
|
||||
expect(await manager.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
}
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
|
||||
test("saved generic point titles group date-only historical scatter labels without changing sampling times", async ({ page }, testInfo) => {
|
||||
const { task, events } = savedTask(22, "合成早期测点图恢复", [comparison("170486", false, true), comparison("175618", false, true)]);
|
||||
const mock = await mockInvestigationPresentation(page, [task], events);
|
||||
await selectInvestigation(page, task.title);
|
||||
const panel = page.getByLabel("调查实时展示", { exact: true });
|
||||
await expect(panel.locator("[data-investigation-chart]")).toHaveCount(2);
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(manager.locator("[data-managed-chart]")).toHaveCount(1);
|
||||
const group = managed(manager, "压力三小时与历史对照（m）");
|
||||
await expect(group.locator('aside[aria-label="选择图表对象"]').getByRole("button")).toHaveCount(2);
|
||||
await group.getByRole("button", { name: "切换对象 175618", exact: true }).click();
|
||||
await expect(plot(group)).toHaveAttribute("aria-label", "测点 175618 压力三小时与历史对照（m）");
|
||||
const legend = group.getByLabel("图表图例", { exact: true });
|
||||
await expect(legend.getByRole("button")).toHaveCount(8);
|
||||
await expect(legend.getByRole("button", { name: "07-09", exact: true })).toBeVisible();
|
||||
await expectBottomLegend(group);
|
||||
await group.getByRole("tab", { name: "数据", exact: true }).click();
|
||||
const row = group.getByRole("table").getByRole("row").filter({ hasText: /^07:30/ });
|
||||
await expect(row).toContainText("2026-07-16 07:30:00+08:00");
|
||||
await expect(row).toContainText("2026-07-09 07:30:00+08:00");
|
||||
await expect(row).toContainText("33 (2026-07-09");
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach("legacy-date-only-history", { body: await manager.screenshot({ path: testInfo.outputPath("legacy-date-only-history.png") }), contentType: "image/png" });
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
@@ -62,6 +62,7 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
};
|
||||
});
|
||||
let task: OperationalTask = {
|
||||
execution_scope: "production",
|
||||
project_id: projectId, task_id: taskId, task_type: "event_investigation", workflow: "water_quality_complaint",
|
||||
lifecycle_status: "open", status: "running", priority: "normal", revision: 1, execution_generation: 1,
|
||||
execution_request_id: requestId, title: "合成投诉联动调查", summary: "浏览器验证用合成投诉，不是真实工单",
|
||||
@@ -106,6 +107,7 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
return route.fulfill({ json: { task_id: taskId, execution_generation: 1,
|
||||
active_run: { run_id: runId, generation: 1, status: "running" }, event_cursor: eventCursor } });
|
||||
}
|
||||
if (route.request().url().includes("/presentation-events")) return route.fulfill({ json: { task_id: taskId, event_cursor: eventCursor, items: [], next_after: null } });
|
||||
if (route.request().url().includes("/reports")) return route.fulfill({ json: { items: [], next_offset: null } });
|
||||
return route.fulfill({ json: task });
|
||||
});
|
||||
@@ -127,6 +129,7 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
await panel.getByText("合成投诉联动调查", { exact: true }).first().click();
|
||||
await expect(panel.getByText("正在核对投诉点位", { exact: true }).first()).toBeVisible();
|
||||
const diagram = panel.getByLabel("调查脉络", { exact: true });
|
||||
await diagram.scrollIntoViewIfNeeded();
|
||||
await expect(diagram.locator("svg g.node.tjRunning")).toHaveCount(1);
|
||||
const animations = () => page.evaluate(() => (window as unknown as { reportAnimations: string[] }).reportAnimations);
|
||||
expect(await animations()).toEqual([]);
|
||||
@@ -142,7 +145,7 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
await expect(diagram).not.toContainText("投诉点位核对");
|
||||
await expect(diagram.locator("svg g.node.tjRunning")).toHaveCount(0);
|
||||
await expect(diagram).toHaveAttribute("data-retained-reader", "true");
|
||||
await expect.poll(animations).toEqual(["当前调查进展"]);
|
||||
await expect.poll(animations).toContain("当前调查进展");
|
||||
|
||||
task = { ...task, revision: 3, latest_report: { revision: 1, execution_generation: 1,
|
||||
source_session_id: "investigation-test", published_at: now, published_by: "agent", report: {
|
||||
@@ -153,24 +156,24 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
await panel.getByRole("button", { name: "刷新工况任务", exact: true }).click();
|
||||
const report = panel.getByRole("region", { name: "任务报告", exact: true });
|
||||
await expect(report).toContainText("合成结论：等待现场核查");
|
||||
await expect.poll(animations).toEqual(["当前调查进展", "任务报告"]);
|
||||
await report.getByText("判断说明与建议", { exact: true }).click();
|
||||
await report.locator("details").evaluate((element) => element.setAttribute("data-retained-reader", "true"));
|
||||
await expect.poll(animations).toContain("任务报告");
|
||||
await report.evaluate((element) => element.setAttribute("data-retained-reader", "true"));
|
||||
const beforeReportUpdate = (await animations()).filter((label) => label === "任务报告").length;
|
||||
task = { ...task, revision: 4, latest_report: { ...task.latest_report!, revision: 2,
|
||||
report: { ...task.latest_report!.report, current_conclusion: "合成结论：现场核查已更新" } } };
|
||||
await panel.getByRole("button", { name: "刷新工况任务", exact: true }).click();
|
||||
await expect(report).toContainText("合成结论：现场核查已更新");
|
||||
await expect(report.locator("details")).toHaveAttribute("open", "");
|
||||
await expect(report.locator("details")).toHaveAttribute("data-retained-reader", "true");
|
||||
await expect.poll(animations).toEqual(["当前调查进展", "任务报告", "任务报告"]);
|
||||
await expect(report).toHaveAttribute("data-retained-reader", "true");
|
||||
await expect.poll(() => animations().then((entries) => entries.filter((label) => label === "任务报告").length)).toBeGreaterThan(beforeReportUpdate);
|
||||
await testInfo.attach("report-update", { body: await report.screenshot(), contentType: "image/png" });
|
||||
|
||||
await page.emulateMedia({ reducedMotion: "reduce" });
|
||||
const beforeReducedMotion = await animations();
|
||||
task = { ...task, revision: 5, latest_report: { ...task.latest_report!, revision: 3,
|
||||
report: { ...task.latest_report!.report, current_conclusion: "合成结论：减少动态效果下更新" } } };
|
||||
await panel.getByRole("button", { name: "刷新工况任务", exact: true }).click();
|
||||
await expect(report).toContainText("合成结论：减少动态效果下更新");
|
||||
expect(await animations()).toEqual(["当前调查进展", "任务报告", "任务报告"]);
|
||||
expect(await animations()).toEqual(beforeReducedMotion);
|
||||
await page.emulateMedia({ reducedMotion: "no-preference" });
|
||||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||||
const follow = page.getByRole("checkbox", { name: "跟随所选调查" });
|
||||
@@ -185,9 +188,11 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
expect(checkboxAlignment).toEqual({ width: 20, height: 20, offsetX: 0, offsetY: 0 });
|
||||
await expect.poll(() => cursorReads).toBeGreaterThan(0);
|
||||
const dev = page.getByTestId("map-dev-panel");
|
||||
const sections = dev.locator("details");
|
||||
await expect(sections).toHaveCount(5);
|
||||
await expect(sections.filter({ hasText: "调查联动" })).toHaveAttribute("open", "");
|
||||
await expect(dev.getByRole("tab", { name: "调查测试", exact: true })).toHaveAttribute("aria-selected", "true");
|
||||
await expect(dev.getByRole("region", { name: "调查联动", exact: true })).toBeVisible();
|
||||
await dev.getByRole("tab", { name: "地图调试", exact: true }).click();
|
||||
const sections = dev.getByRole("tabpanel", { name: "地图调试", exact: true }).locator("details");
|
||||
await expect(sections).toHaveCount(4);
|
||||
await expect(sections.filter({ hasText: "要素定位" })).toHaveAttribute("open", "");
|
||||
await expect(sections.filter({ hasText: "水流调试" })).not.toHaveAttribute("open", "");
|
||||
await testInfo.attach("dev-panel-default", { body: await page.screenshot({ path: testInfo.outputPath("dev-panel-default.png") }), contentType: "image/png" });
|
||||
@@ -238,6 +243,9 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
await expect(page.locator('[data-investigation-chart="pressure"]')).toHaveCount(0);
|
||||
await emit({ action: "open_chart", ...chart });
|
||||
await expect(page.locator('[data-investigation-chart="pressure"]')).toBeVisible();
|
||||
const chartManager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await expect(chartManager).toBeVisible();
|
||||
await chartManager.getByRole("button", { name: "关闭窗口", exact: true }).click();
|
||||
await emit({ action: "close_chart", chart_id: "pressure" });
|
||||
await expect(page.locator('[data-investigation-chart="pressure"]')).toHaveCount(0);
|
||||
const data = { type: "FeatureCollection", features: [
|
||||
@@ -263,6 +271,7 @@ test("调查进度替换整图，跟随只展示新指令并在关闭时清理
|
||||
await testInfo.attach("live-investigation-mobile", { body: await page.screenshot({ path: testInfo.outputPath("live-investigation-mobile.png") }), contentType: "image/png" });
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||||
await dev.getByRole("tab", { name: "调查测试", exact: true }).click();
|
||||
await follow.uncheck();
|
||||
await expect(follow).not.toBeChecked();
|
||||
await follow.focus();
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
import { expect, test, type Locator, type Page } from "@playwright/test";
|
||||
import { mockInvestigationPresentation } from "./support/mock-investigation-presentation";
|
||||
|
||||
test.use({ reducedMotion: "reduce" });
|
||||
|
||||
async function themeColor(element: Locator, token: string, property: string) {
|
||||
return cssColor(element, `var(${token})`, property);
|
||||
}
|
||||
|
||||
async function cssColor(element: Locator, color: string, property: string) {
|
||||
return element.evaluate((node, { color, property }) => {
|
||||
const probe = document.createElement("span");
|
||||
probe.style.setProperty(property, color);
|
||||
node.append(probe);
|
||||
const value = getComputedStyle(probe).getPropertyValue(property);
|
||||
probe.remove();
|
||||
return value;
|
||||
}, { color, property });
|
||||
}
|
||||
|
||||
async function expectOrdinaryInteraction(row: Locator, label?: string, description?: string) {
|
||||
await expect(row).toHaveCSS("background-color", await themeColor(row, "--surface-reading", "background-color"));
|
||||
await expect(row).toHaveCSS("border-top-color", await themeColor(row, "--surface-border", "border-top-color"));
|
||||
await expect(row).toHaveCSS("color", await themeColor(row, "--action-blue-hover", "color"));
|
||||
if (label) await expect(row.getByText(label, { exact: true })).toHaveCSS("color", await themeColor(row, "--action-blue-hover", "color"));
|
||||
if (await row.locator("svg").count()) await expect(row.locator("svg").first()).toHaveCSS("color", await themeColor(row, "--action-blue-hover", "color"));
|
||||
if (description) await expect(row.getByText(description, { exact: true })).toHaveCSS("color", await themeColor(row, "--ink-muted", "color"));
|
||||
}
|
||||
|
||||
async function appearance(row: Locator) {
|
||||
return row.evaluate((node) => {
|
||||
const style = getComputedStyle(node);
|
||||
return { background: style.backgroundColor, border: style.borderTopColor, color: style.color };
|
||||
});
|
||||
}
|
||||
|
||||
async function expectPreservedOnHover(page: Page, row: Locator, selected = false) {
|
||||
await page.mouse.move(1, 1);
|
||||
const before = await appearance(row);
|
||||
await row.scrollIntoViewIfNeeded();
|
||||
const bounds = (await row.boundingBox())!;
|
||||
await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
|
||||
if (selected) {
|
||||
await expect(row).toHaveCSS("background-color", before.background);
|
||||
await expect(row).toHaveCSS("color", before.color);
|
||||
await expect(row).toHaveCSS("border-top-color", await themeColor(row, "--action-border-hover", "border-top-color"));
|
||||
} else {
|
||||
await expect.poll(() => appearance(row)).toEqual(before);
|
||||
}
|
||||
}
|
||||
|
||||
async function expectContained(row: Locator, width: number) {
|
||||
const bounds = (await row.boundingBox())!;
|
||||
expect(bounds.x).toBeGreaterThanOrEqual(0);
|
||||
expect(bounds.x + bounds.width).toBeLessThanOrEqual(width);
|
||||
expect(await row.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
}
|
||||
|
||||
for (const width of [1440, 375]) {
|
||||
test(`map options share hover and keyboard colors while keeping selected and disabled states at ${width}px`, async ({ page }, testInfo) => {
|
||||
test.setTimeout(90_000);
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
const mock = await mockInvestigationPresentation(page, []);
|
||||
// Enable an alternate basemap with a synthetic token; every tile stays local.
|
||||
await page.route("**/runtime-config.js", (route) => route.fulfill({ contentType: "application/javascript", body: `globalThis.__TJWATER_CONFIG__=${JSON.stringify({
|
||||
TJWATER_AUTH_MODE: "disabled", TJWATER_SERVER_API_BASE_URL: "https://tjwater-api.invalid",
|
||||
TJWATER_AGENT_URL: "http://127.0.0.1:8787", TJWATER_ENABLE_DEV_PANEL: "true",
|
||||
TJWATER_MAP_URL: "https://workbench-map.invalid/geoserver", TJWATER_GEOSERVER_WORKSPACE: "tjwater_next",
|
||||
TJWATER_MAPBOX_ACCESS_TOKEN: "", TJWATER_TIANDITU_TOKEN: "synthetic-browser-test", TJWATER_ENABLE_MSW: "false"
|
||||
})};` }));
|
||||
await page.route("https://*.tianditu.gov.cn/**", (route) => route.fulfill({ contentType: "image/png", body: Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGNgYGBgAAAABQABpfZFQAAAAABJRU5ErkJggg==", "base64") }));
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.waitForFunction(() => Boolean(window.__waterNetworkMap?.getLayer("scada-pressure-hit")));
|
||||
|
||||
await page.getByRole("button", { name: "更多：更多地图操作", exact: true }).click();
|
||||
const more = page.getByRole("region", { name: "更多", exact: true });
|
||||
const refresh = more.getByRole("button", { name: /刷新瓦片/ });
|
||||
const exportView = more.getByRole("button", { name: /当前分辨率/ });
|
||||
const restingRefresh = await appearance(refresh);
|
||||
const restingSibling = await appearance(exportView);
|
||||
await refresh.hover();
|
||||
await expectOrdinaryInteraction(refresh, "刷新瓦片", "请求地图重新渲染");
|
||||
expect(await appearance(exportView)).toEqual(restingSibling);
|
||||
await exportView.hover();
|
||||
await expect.poll(() => appearance(refresh)).toEqual(restingRefresh);
|
||||
await expectOrdinaryInteraction(exportView, "当前分辨率", "按当前地图画布尺寸导出");
|
||||
await refresh.hover();
|
||||
await expectContained(more, width);
|
||||
await testInfo.attach(`more-hover-${width}`, { body: await more.screenshot({ path: testInfo.outputPath(`more-hover-${width}.png`) }), contentType: "image/png" });
|
||||
|
||||
await page.getByRole("button", { name: "测量：距离与范围测量", exact: true }).click();
|
||||
const measure = page.getByRole("region", { name: "测量", exact: true });
|
||||
const distance = measure.getByRole("button", { name: "距离", exact: true });
|
||||
const area = measure.getByRole("button", { name: "面积", exact: true });
|
||||
await expect(distance).toHaveAttribute("aria-pressed", "true");
|
||||
await expectPreservedOnHover(page, distance, true);
|
||||
await area.hover();
|
||||
await expectOrdinaryInteraction(area, "面积");
|
||||
const meters = measure.getByRole("button", { name: "m", exact: true });
|
||||
const kilometers = measure.getByRole("button", { name: "km", exact: true });
|
||||
await expectPreservedOnHover(page, kilometers, true);
|
||||
await meters.hover();
|
||||
await expectOrdinaryInteraction(meters);
|
||||
const clear = measure.getByRole("button", { name: "清除测量", exact: true });
|
||||
await expect(clear).toBeDisabled();
|
||||
await expectPreservedOnHover(page, clear);
|
||||
const start = measure.getByRole("button", { name: /开始测量/ });
|
||||
await start.hover();
|
||||
await expect(start).toHaveCSS("background-color", await themeColor(start, "--action-blue-hover", "background-color"));
|
||||
await expect(start).toHaveCSS("color", "rgb(255, 255, 255)");
|
||||
await expect(start.getByText("开始测量", { exact: true })).toHaveCSS("color", "rgb(255, 255, 255)");
|
||||
await expect(start.locator("svg").first()).toHaveCSS("color", "rgb(255, 255, 255)");
|
||||
await expect(start.getByText("在地图中连续取点", { exact: true })).toHaveCSS("color", await cssColor(start, "color-mix(in oklab, white 85%, transparent)", "color"));
|
||||
await start.click();
|
||||
for (const close of await page.getByRole("button", { name: "关闭通知", exact: true }).all()) {
|
||||
if (await close.isVisible()) await close.click();
|
||||
}
|
||||
const canvas = page.locator("canvas.maplibregl-canvas");
|
||||
await canvas.click({ position: { x: 100, y: 175 }, timeout: 10_000 });
|
||||
await canvas.click({ position: { x: 150, y: 205 }, timeout: 10_000 });
|
||||
const copy = measure.getByRole("button", { name: "复制结果", exact: true });
|
||||
await expect(copy).toBeEnabled();
|
||||
await copy.hover();
|
||||
await expectOrdinaryInteraction(copy, "复制结果");
|
||||
await expect(clear).toBeEnabled();
|
||||
await clear.hover();
|
||||
await expect(clear).toHaveCSS("background-color", await themeColor(clear, "--status-danger-soft", "background-color"));
|
||||
await expect(clear).toHaveCSS("border-top-color", await themeColor(clear, "--status-danger-border", "border-top-color"));
|
||||
await expect(clear).toHaveCSS("color", await themeColor(clear, "--status-danger-foreground", "color"));
|
||||
await expect(clear.locator("svg").first()).toHaveCSS("color", await themeColor(clear, "--status-danger-foreground", "color"));
|
||||
await expectContained(measure, width);
|
||||
await testInfo.attach(`measure-hover-${width}`, { body: await measure.screenshot({ path: testInfo.outputPath(`measure-hover-${width}.png`) }), contentType: "image/png" });
|
||||
|
||||
await page.getByRole("button", { name: "图层：管理地图图层", exact: true }).click();
|
||||
const layers = page.getByRole("region", { name: "图层", exact: true });
|
||||
const noBasemap = layers.getByRole("button", { name: "无底图", exact: true });
|
||||
await noBasemap.scrollIntoViewIfNeeded();
|
||||
await noBasemap.hover();
|
||||
await expectOrdinaryInteraction(noBasemap, "无底图");
|
||||
const vector = layers.getByRole("button", { name: "天地图矢量", exact: true });
|
||||
await expect(vector).toHaveAttribute("aria-pressed", "true");
|
||||
await expectPreservedOnHover(page, vector, true);
|
||||
const light = layers.getByRole("button", { name: "浅色", exact: true });
|
||||
await expect(light).toBeDisabled();
|
||||
await expectPreservedOnHover(page, light);
|
||||
await expectContained(layers, width);
|
||||
await testInfo.attach(`basemap-hover-${width}`, { body: await layers.screenshot({ path: testInfo.outputPath(`basemap-hover-${width}.png`) }), contentType: "image/png" });
|
||||
await page.getByRole("button", { name: "图层：管理地图图层", exact: true }).click();
|
||||
|
||||
const header = page.locator(".workbench-top-bar");
|
||||
const user = header.getByRole("button", { name: "打开用户菜单", exact: true });
|
||||
await user.click();
|
||||
const status = page.getByRole("menuitem", { name: /查看运行状态/ });
|
||||
await status.hover();
|
||||
await expectOrdinaryInteraction(status, "查看运行状态", "检查数据源与运行健康度");
|
||||
const logout = page.getByRole("menuitem", { name: "退出登录", exact: true });
|
||||
await expect(logout).toHaveAttribute("aria-disabled", "true");
|
||||
await expectPreservedOnHover(page, logout);
|
||||
const userMenu = page.getByRole("menu");
|
||||
await expectContained(userMenu, width);
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(userMenu).toHaveCount(0);
|
||||
await page.mouse.move(1, 1);
|
||||
await user.focus();
|
||||
await expect(user).toBeFocused();
|
||||
await user.press("ArrowDown");
|
||||
await expect(userMenu).toBeVisible();
|
||||
const menuItems = userMenu.getByRole("menuitem");
|
||||
for (let index = 0; index < await menuItems.count(); index++) {
|
||||
await expect(menuItems.nth(index)).toBeFocused();
|
||||
if (await status.evaluate((node) => document.activeElement === node)) break;
|
||||
await page.keyboard.press("ArrowDown");
|
||||
}
|
||||
await expect(status).toBeFocused();
|
||||
await expect(status).toHaveAttribute("data-highlighted", "");
|
||||
await expectOrdinaryInteraction(status, "查看运行状态", "检查数据源与运行健康度");
|
||||
await expect(status).toHaveCSS("outline-width", "1px");
|
||||
await expect(status).toHaveCSS("outline-offset", "-1px");
|
||||
await testInfo.attach(`header-keyboard-${width}`, { body: await userMenu.screenshot({ path: testInfo.outputPath(`header-keyboard-${width}.png`) }), contentType: "image/png" });
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(userMenu).toHaveCount(0);
|
||||
|
||||
// Dev tools are a desktop entry; verify the resulting window menu at the target width.
|
||||
if (width < 800) await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.getByRole("button", { name: "切换地图 Dev Panel", exact: true }).click();
|
||||
const tools = page.getByTestId("investigation-dev-tools");
|
||||
await tools.getByLabel("调查展示 JSONL", { exact: true }).fill(JSON.stringify({ record_type: "presentation", command: {
|
||||
action: "open_chart", chart_id: "hover-chart", evidence_refs: ["dev:synthetic"], chart: {
|
||||
title: "交互验证压力趋势", chart_type: "line", x_data: ["08:00", "08:15"], series: [{ name: "压力", data: [30, 28] }]
|
||||
}
|
||||
} }));
|
||||
await expect(tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true })).toBeEnabled({ timeout: 15_000 });
|
||||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||||
await page.getByLabel("本地预览展示", { exact: true }).getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
await expect(page.getByRole("dialog", { name: "图表管理", exact: true })).toBeVisible();
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
const navigator = header.getByRole("button", { name: /窗口管理，当前/ });
|
||||
await navigator.click();
|
||||
const windowMenu = page.getByRole("menu", { name: "已打开的窗口", exact: true });
|
||||
const currentWindow = windowMenu.getByRole("menuitem", { name: /定位窗口 .*图表管理/ });
|
||||
await expect(currentWindow).toHaveAttribute("aria-current", "true");
|
||||
await expectPreservedOnHover(page, currentWindow, true);
|
||||
await expect(currentWindow).toHaveCSS("background-color", await themeColor(currentWindow, "--action-selection-soft", "background-color"));
|
||||
await expect(currentWindow).toHaveCSS("color", await themeColor(currentWindow, "--action-blue-hover", "color"));
|
||||
const closeWindows = windowMenu.getByRole("menuitem", { name: "关闭全部窗口", exact: true });
|
||||
await closeWindows.hover();
|
||||
await expectOrdinaryInteraction(closeWindows);
|
||||
await expectContained(windowMenu, width);
|
||||
await expectContained(header, width);
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth)).toBeLessThanOrEqual(1);
|
||||
await testInfo.attach(`window-hover-${width}`, { body: await windowMenu.screenshot({ path: testInfo.outputPath(`window-hover-${width}.png`) }), contentType: "image/png" });
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
}
|
||||
|
||||
test.describe("touch map options", () => {
|
||||
test.use({ hasTouch: true, isMobile: true, viewport: { width: 375, height: 812 } });
|
||||
test("touch taps keep ordinary rows free of sticky hover colors", async ({ page }, testInfo) => {
|
||||
await mockInvestigationPresentation(page, []);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
expect(await page.evaluate(() => matchMedia("(hover: hover)").matches)).toBe(false);
|
||||
await page.getByRole("button", { name: "更多：更多地图操作", exact: true }).tap();
|
||||
const more = page.getByRole("region", { name: "更多", exact: true });
|
||||
const refresh = more.getByRole("button", { name: /刷新瓦片/ });
|
||||
await refresh.tap({ trial: true });
|
||||
const before = await appearance(refresh);
|
||||
const bounds = await refresh.boundingBox();
|
||||
await refresh.tap();
|
||||
await expect.poll(() => appearance(refresh)).toEqual(before);
|
||||
expect(await refresh.boundingBox()).toEqual(bounds);
|
||||
await expect(refresh).not.toHaveCSS("color", await themeColor(refresh, "--action-blue-hover", "color"));
|
||||
await expectContained(more, 375);
|
||||
await testInfo.attach("touch-options-375", { body: await more.screenshot({ path: testInfo.outputPath("touch-options-375.png") }), contentType: "image/png" });
|
||||
});
|
||||
});
|
||||
@@ -53,11 +53,14 @@ for (const width of [1440, 375, 320]) {
|
||||
await expect(ui.locator(`svg path[fill="${color}"]`)).toHaveCount(3);
|
||||
}
|
||||
const axisValues = () => ui.locator("svg text").allTextContents().then((labels) => labels.filter((label) => /^-?\d+(\.\d+)?$/.test(label)).map(Number));
|
||||
expect((await axisValues()).every((value) => value > 0)).toBe(true);
|
||||
const initialTicks = await axisValues();
|
||||
expect(initialTicks.length).toBeGreaterThanOrEqual(2);
|
||||
expect(initialTicks.every((value) => value > 0 && Number.isInteger(value))).toBe(true);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach(`scada-week-${width}`, { body: await ui.screenshot({ path: testInfo.outputPath(`scada-week-${width}.png`) }), contentType: "image/png" });
|
||||
await ui.locator('svg path[fill="#059669"]').last().hover({ position: { x: 4, y: 6 } });
|
||||
await expect(ui).toContainText("采样时间 2026-06-13 12:00:00+08:00");
|
||||
// Hover the topmost historical day so neighboring scatter symbols cannot intercept.
|
||||
await ui.locator('svg path[fill="#a16207"]').last().hover({ position: { x: 4, y: 4 } });
|
||||
await expect(ui).toContainText("采样时间 2026-06-07 12:00:00+08:00");
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach(`scada-week-tooltip-${width}`, { body: await ui.screenshot({ path: testInfo.outputPath(`scada-week-tooltip-${width}.png`) }), contentType: "image/png" });
|
||||
const plot = ui.getByRole("group", { name: /按回车查看数据点/ });
|
||||
@@ -91,22 +94,21 @@ for (const width of [1440, 375, 320]) {
|
||||
const restored = (await floating.boundingBox())!;
|
||||
await floating.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
await expect.poll(async () => (await floating.boundingBox())!.width).toBe(width - 16);
|
||||
await expect.poll(async () => (await floating.boundingBox())!.height).toBe((width < 640 ? 640 : 1000) - 16);
|
||||
await expect.poll(async () => (await floating.boundingBox())!.height).toBe((width < 640 ? 640 : 1000) - 72);
|
||||
await expect.poll(async () => Math.abs(Number(await drawing.locator("svg").getAttribute("width")) - (await drawing.boundingBox())!.width)).toBeLessThan(1);
|
||||
await expect.poll(async () => Math.abs(Number(await drawing.locator("svg").getAttribute("height")) - (await drawing.boundingBox())!.height)).toBeLessThan(1);
|
||||
await expect(drawing.locator(".echarts-for-react")).toHaveAttribute("_echarts_instance_", instance!);
|
||||
const content = floating.locator("[data-floating-window-content]");
|
||||
expect(await content.evaluate((element) => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
|
||||
const plotBox = (await drawing.boundingBox())!;
|
||||
const sidebar = (await floating.locator("aside").boundingBox())!;
|
||||
if (width < 640) expect(sidebar.y).toBeGreaterThanOrEqual(plotBox.y + plotBox.height);
|
||||
else expect(sidebar.x).toBeGreaterThanOrEqual(plotBox.x + plotBox.width);
|
||||
expect(plotBox.height).toBeGreaterThanOrEqual(220);
|
||||
const legend = (await floating.getByLabel("图表图例").boundingBox())!;
|
||||
expect(legend.y).toBeGreaterThanOrEqual(plotBox.y + plotBox.height);
|
||||
expect(plotBox.height).toBeGreaterThanOrEqual(180);
|
||||
await floating.getByLabel("显示的数据序列").getByRole("button", { name: "6月12日", exact: true }).click();
|
||||
await expect(ui.getByLabel("显示的数据序列").getByRole("button", { name: "6月12日", exact: true })).toHaveAttribute("aria-pressed", "false");
|
||||
await floating.getByLabel("显示的数据序列").getByRole("button", { name: "6月12日", exact: true }).click();
|
||||
await floating.locator('svg path[fill="#059669"]').last().hover({ position: { x: 4, y: 6 } });
|
||||
await expect(floating).toContainText("采样时间 2026-06-13 12:00:00+08:00");
|
||||
await floating.locator('svg path[fill="#a16207"]').last().hover({ position: { x: 4, y: 4 } });
|
||||
await expect(floating).toContainText("采样时间 2026-06-07 12:00:00+08:00");
|
||||
await floating.locator(".floating-window-heading").hover();
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach(`scada-week-fullscreen-${width}`, { body: await floating.screenshot({ path: testInfo.outputPath(`scada-week-fullscreen-${width}.png`) }), contentType: "image/png" });
|
||||
|
||||
@@ -132,10 +132,15 @@ export async function mockInvestigationPresentation(page: Page, tasks: Operation
|
||||
|
||||
export async function selectInvestigation(page: Page, title: string) {
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
await page.getByRole("button", { name: "工况任务", exact: true }).click();
|
||||
await page.getByRole("button", { name: /^(?:打开)?工况任务$/ }).click();
|
||||
const panel = page.getByRole("region", { name: "工况任务", exact: true });
|
||||
const expand = panel.getByRole("button", { name: "展开工况任务" });
|
||||
if (await expand.isVisible()) await expand.click();
|
||||
await panel.getByRole("button", { name: /调查任务/ }).click();
|
||||
await panel.getByText(title, { exact: true }).first().click();
|
||||
const task = panel.getByRole("button").filter({ hasText: title }).first();
|
||||
if (!await task.isVisible()) {
|
||||
const collapse = panel.getByRole("button", { name: "收起工况任务", exact: true });
|
||||
if (await collapse.isVisible()) await collapse.click();
|
||||
}
|
||||
await task.click();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import { basename, resolve } from "node:path";
|
||||
import { mockInvestigationPresentation } from "./support/mock-investigation-presentation";
|
||||
|
||||
test.use({ reducedMotion: "reduce" });
|
||||
for (const width of [1440, 375, 320]) {
|
||||
test(`header locates managed, chart and table windows without changing their state at ${width}px`, async ({ page }, testInfo) => {
|
||||
test.setTimeout(60_000);
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.route("**/@fs/**/noto-sans-sc-*.woff2", (route) => route.fulfill({
|
||||
path: resolve("node_modules/@fontsource-variable/noto-sans-sc/files", basename(new URL(route.request().url()).pathname)), contentType: "font/woff2"
|
||||
}));
|
||||
const mock = await mockInvestigationPresentation(page, []);
|
||||
await page.goto("/", { waitUntil: "domcontentloaded" });
|
||||
const header = page.locator(".workbench-top-bar");
|
||||
const navigator = header.getByRole("button", { name: /窗口管理，当前/ });
|
||||
await expect(navigator).toHaveCount(0);
|
||||
await page.getByRole("button", { name: "切换地图 Dev Panel" }).click();
|
||||
const tools = page.getByTestId("investigation-dev-tools");
|
||||
await tools.getByLabel("调查展示 JSONL", { exact: true }).fill([
|
||||
{ record_type: "presentation", command: { action: "open_chart", chart_id: "window-pressure", evidence_refs: ["dev:synthetic"], chart: {
|
||||
title: "窗口定位压力趋势", chart_type: "line", x_data: ["07:45", "08:00"], series: [{ name: "压力（m）", data: [32, 28] }]
|
||||
} } },
|
||||
{ record_type: "ui_block", block: { version: "answer-ui@1", block_id: "window-table", fallback_text: "窗口定位表格", spec: { root: "table", elements: {
|
||||
table: { type: "Table", props: { title: "窗口定位核查表", columns: ["测点", "压力"], rows: [["P1", "28"], ["P2", "32"]] }, children: [] }
|
||||
} } } }
|
||||
].map((record) => JSON.stringify(record)).join("\n"));
|
||||
await expect(tools.getByRole("combobox", { name: "JSONL 测试案例", exact: true })).toBeEnabled({ timeout: 15_000 });
|
||||
await tools.getByRole("button", { name: "执行本地预览", exact: true }).click();
|
||||
await expect(tools.getByRole("status")).toContainText("本地预览完成");
|
||||
const panel = page.getByLabel("本地预览展示", { exact: true });
|
||||
await panel.getByRole("button", { name: "放大查看表格 窗口定位核查表", exact: true }).click();
|
||||
const table = page.getByRole("dialog", { name: "窗口定位核查表 · 表格", exact: true });
|
||||
await expect(table).toBeVisible();
|
||||
await panel.getByRole("button", { name: "打开图表管理", exact: true }).click();
|
||||
const manager = page.getByRole("dialog", { name: "图表管理", exact: true });
|
||||
await manager.getByRole("button", { name: "放大查看 窗口定位压力趋势", exact: true }).click();
|
||||
const child = page.getByRole("dialog", { name: "窗口定位压力趋势", exact: true });
|
||||
await expect(child).toBeVisible();
|
||||
await child.getByRole("tab", { name: "数据", exact: true }).click();
|
||||
const search = table.getByRole("textbox", { name: /搜索窗口定位核查表/ });
|
||||
await table.locator(".floating-window-heading").focus();
|
||||
await search.fill("P2");
|
||||
await page.setViewportSize({ width, height: 900 });
|
||||
await expect(navigator).toHaveAttribute("aria-label", "窗口管理，当前 3 个窗口");
|
||||
if (width === 1440) {
|
||||
const alignment = await navigator.evaluate((node) => {
|
||||
const label = node.children[1].getBoundingClientRect();
|
||||
const count = node.children[2].getBoundingClientRect();
|
||||
return { labelCenter: label.y + label.height / 2, countCenter: count.y + count.height / 2 };
|
||||
});
|
||||
expect(Math.abs(alignment.labelCenter - alignment.countCenter)).toBeLessThanOrEqual(1);
|
||||
}
|
||||
await expect.poll(() => header.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
const tableBounds = await table.boundingBox();
|
||||
await navigator.click();
|
||||
const menu = page.getByRole("menu", { name: "已打开的窗口", exact: true });
|
||||
await expect(menu.getByRole("menuitem")).toHaveCount(4);
|
||||
await menu.getByRole("menuitem", { name: "定位窗口 窗口定位核查表 · 表格", exact: true }).click();
|
||||
await expect(table.locator(".floating-window-heading")).toBeFocused();
|
||||
await expect(navigator).toHaveAttribute("aria-expanded", "false");
|
||||
expect(await table.boundingBox()).toEqual(tableBounds);
|
||||
await expect(search).toHaveValue("P2");
|
||||
const managerBounds = await manager.boundingBox();
|
||||
await navigator.focus();
|
||||
await page.keyboard.press("Enter");
|
||||
await menu.getByRole("menuitem", { name: /定位窗口 .*图表管理/ }).focus();
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(manager.locator(".floating-window-heading")).toBeFocused();
|
||||
expect(await manager.boundingBox()).toEqual(managerBounds);
|
||||
await navigator.click();
|
||||
await header.getByRole("button", { name: "打开用户菜单", exact: true }).click();
|
||||
await expect(menu).toHaveCount(0);
|
||||
await expect(page.getByRole("menuitem", { name: /查看运行状态/ })).toBeVisible();
|
||||
await page.keyboard.press("Escape");
|
||||
await child.locator(".floating-window-heading").focus();
|
||||
await child.getByRole("button", { name: "最大化窗口", exact: true }).click();
|
||||
const maximized = (await child.boundingBox())!;
|
||||
expect(maximized.y).toBe(64);
|
||||
expect(maximized.height).toBe(828);
|
||||
await expect(child.getByRole("tab", { name: "数据", exact: true })).toHaveAttribute("aria-selected", "true");
|
||||
await navigator.click();
|
||||
await expect(menu).toBeVisible();
|
||||
expect(await menu.evaluate((node) => node.scrollWidth - node.clientWidth)).toBeLessThanOrEqual(1);
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await testInfo.attach(`window-menu-${width}`, { body: await page.screenshot({ path: testInfo.outputPath(`window-menu-${width}.png`) }), contentType: "image/png" });
|
||||
await menu.getByRole("menuitem", { name: "关闭全部窗口", exact: true }).click();
|
||||
await expect(page.locator("[data-floating-window]")).toHaveCount(0);
|
||||
await expect(navigator).toHaveCount(0);
|
||||
await expect(header.getByRole("button", { name: "打开用户菜单", exact: true })).toBeFocused();
|
||||
expect(mock.mutations).toEqual([]);
|
||||
});
|
||||
}
|
||||
+992
@@ -0,0 +1,992 @@
|
||||
[
|
||||
{
|
||||
"name": "zero and sparse historical data",
|
||||
"accepted": true,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "old mixed charts are read only",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "line",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "missing history timestamps",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "missing observed timestamp",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
null,
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "timestamp on a missing value",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-09T08:00:00+08:00",
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "wrong projected slot",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:30:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "mixed historical dates",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-10T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "same day history",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "future history",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-17T08:15:00+08:00",
|
||||
"2026-07-17T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "duplicate slots",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:00",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "date appended axis",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"07-16 08:00",
|
||||
"07-16 08:15",
|
||||
"07-16 08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "inconsistent slot precision",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "bars mixed with comparison",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "bar",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "no historical series",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "no current observations",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
null,
|
||||
null,
|
||||
null
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
null,
|
||||
null
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "missing samples with missing timestamps",
|
||||
"accepted": true,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
null,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "UTC spelling preserves projected instant",
|
||||
"accepted": true,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T00:15:00Z",
|
||||
"2026-07-09T00:30:00Z"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "ordinary line",
|
||||
"accepted": true,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "line",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "合成读数",
|
||||
"data": [
|
||||
0,
|
||||
null,
|
||||
30
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "ordinary bar",
|
||||
"accepted": true,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "bar",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "合成读数",
|
||||
"data": [
|
||||
0,
|
||||
null,
|
||||
30
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "midnight rollover keeps one window",
|
||||
"accepted": true,
|
||||
"chart": {
|
||||
"title": "跨午夜同期对比",
|
||||
"chart_type": "time_comparison",
|
||||
"x_data": [
|
||||
"23:45",
|
||||
"00:00"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "当前",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
25
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T23:45:00+08:00",
|
||||
"2026-07-17T00:00:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "历史",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
26,
|
||||
27
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-15T23:45:00+08:00",
|
||||
"2026-07-16T00:00:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "microseconds are not aligned",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00.000001+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "fraction beyond Python microsecond precision",
|
||||
"accepted": true,
|
||||
"chart": {
|
||||
"title": "P1 合成压力七日对照（m）",
|
||||
"chart_type": "time_comparison",
|
||||
"x_axis_name": "时间",
|
||||
"y_axis_name": "压力（m）",
|
||||
"x_data": [
|
||||
"08:00",
|
||||
"08:15",
|
||||
"08:30"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "P1 当前 2026-07-16",
|
||||
"type": "line",
|
||||
"data": [
|
||||
0,
|
||||
28,
|
||||
30
|
||||
],
|
||||
"sample_times": [
|
||||
"2026-07-16T08:00:00.0000001+08:00",
|
||||
"2026-07-16T08:15:00+08:00",
|
||||
"2026-07-16T08:30:00+08:00"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "P1 2026-07-09",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"sample_times": [
|
||||
null,
|
||||
"2026-07-09T08:15:00+08:00",
|
||||
"2026-07-09T08:30:00+08:00"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "calendar overflow",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "calendar overflow",
|
||||
"chart_type": "time_comparison",
|
||||
"x_data": [
|
||||
"07:45"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "当前",
|
||||
"type": "line",
|
||||
"data": [
|
||||
1
|
||||
],
|
||||
"sample_times": [
|
||||
"9999-12-31T23:45:00Z"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "历史缺测",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null
|
||||
],
|
||||
"sample_times": [
|
||||
null
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "calendar underflow",
|
||||
"accepted": false,
|
||||
"chart": {
|
||||
"title": "calendar underflow",
|
||||
"chart_type": "time_comparison",
|
||||
"x_data": [
|
||||
"08:00"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "当前",
|
||||
"type": "line",
|
||||
"data": [
|
||||
1
|
||||
],
|
||||
"sample_times": [
|
||||
"0001-01-01T00:00:00+23:59"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "历史缺测",
|
||||
"type": "scatter",
|
||||
"data": [
|
||||
null
|
||||
],
|
||||
"sample_times": [
|
||||
null
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
+4
-2
@@ -1,12 +1,14 @@
|
||||
{"record_type":"presentation","command":{"action":"locate_features","layer":"scada","feature_ids":["P1"]}}
|
||||
{"record_type":"presentation","command":{"action":"zoom_to_map","center":[121.48,31.1],"zoom":14}}
|
||||
{"record_type":"presentation","command":{"action":"highlight_features","layer":"scada","feature_ids":["P1"],"effect":"pulse"}}
|
||||
{"record_type":"presentation","command":{"action":"open_chart","chart_id":"fixture-pressure","chart":{"title":"合成压力对比","chart_type":"line","x_data":["08:00","08:15","08:30"],"series":[{"name":"异常日压力水头（m）","data":[32,28,30]},{"name":"对照压力水头（m）","data":[33,32,32]}]},"evidence_refs":["dev:synthetic"]}}
|
||||
{"record_type":"presentation","command":{"action":"open_chart","chart_id":"fixture-pressure-P1","evidence_refs":["dev:synthetic"],"chart":{"title":"P1 合成压力七日对照（m）","chart_type":"time_comparison","x_axis_name":"时间","y_axis_name":"压力（m）","x_data":["08:00","08:15","08:30"],"series":[{"name":"P1 当前 2026-07-16","type":"line","data":[32,28,30],"sample_times":["2026-07-16T08:00:00+08:00","2026-07-16T08:15:00+08:00","2026-07-16T08:30:00+08:00"]},{"name":"P1 2026-07-09","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-09T08:15:00+08:00","2026-07-09T08:30:00+08:00"]},{"name":"P1 2026-07-10","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-10T08:15:00+08:00","2026-07-10T08:30:00+08:00"]},{"name":"P1 2026-07-11","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-11T08:15:00+08:00","2026-07-11T08:30:00+08:00"]},{"name":"P1 2026-07-12","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-12T08:15:00+08:00","2026-07-12T08:30:00+08:00"]},{"name":"P1 2026-07-13","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-13T08:15:00+08:00","2026-07-13T08:30:00+08:00"]},{"name":"P1 2026-07-14","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-14T08:15:00+08:00","2026-07-14T08:30:00+08:00"]},{"name":"P1 2026-07-15","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-15T08:15:00+08:00","2026-07-15T08:30:00+08:00"]}]}}}
|
||||
{"record_type":"presentation","command":{"action":"open_chart","chart_id":"fixture-pressure-P2","evidence_refs":["dev:synthetic"],"chart":{"title":"P2 合成压力七日对照（m）","chart_type":"time_comparison","x_axis_name":"时间","y_axis_name":"压力（m）","x_data":["08:00","08:15","08:30"],"series":[{"name":"P2 当前 2026-07-16","type":"line","data":[31,27,29],"sample_times":["2026-07-16T08:00:00+08:00","2026-07-16T08:15:00+08:00","2026-07-16T08:30:00+08:00"]},{"name":"P2 2026-07-09","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-09T08:15:00+08:00","2026-07-09T08:30:00+08:00"]},{"name":"P2 2026-07-10","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-10T08:15:00+08:00","2026-07-10T08:30:00+08:00"]},{"name":"P2 2026-07-11","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-11T08:15:00+08:00","2026-07-11T08:30:00+08:00"]},{"name":"P2 2026-07-12","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-12T08:15:00+08:00","2026-07-12T08:30:00+08:00"]},{"name":"P2 2026-07-13","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-13T08:15:00+08:00","2026-07-13T08:30:00+08:00"]},{"name":"P2 2026-07-14","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-14T08:15:00+08:00","2026-07-14T08:30:00+08:00"]},{"name":"P2 2026-07-15","type":"scatter","data":[null,32,33],"sample_times":[null,"2026-07-15T08:15:00+08:00","2026-07-15T08:30:00+08:00"]}]}}}
|
||||
{"record_type":"presentation","command":{"action":"set_overlay","overlay_id":"fixture-area","title":"合成空间样例","mode":"geometry","evidence_id":"dev:synthetic","data":{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"origin":"synthetic"},"geometry":{"type":"Point","coordinates":[121.48,31.1]}}]}}}
|
||||
{"record_type":"presentation","command":{"action":"render_scada_analysis","items":[{"device_id":"P1","level":"high"}]}}
|
||||
{"record_type":"ui_block","evidence_refs":[],"block":{"version":"answer-ui@1","block_id":"fixture-summary","phase":"final","fallback_text":"合成候选对比，仅供展示测试。","spec":{"root":"table","elements":{"table":{"type":"Table","props":{"title":"合成候选对比","columns":["候选","说明"],"rows":[["DEMO-PIPE-01","仅供展示测试"],["DEMO-PIPE-02","未执行定位分析"]]},"children":[]}}}}}
|
||||
{"record_type":"candidate","origin":"synthetic","source_evidence_refs":[],"element_id":"DEMO-PIPE-01","rank":1,"status":"example_only"}
|
||||
{"record_type":"presentation","command":{"action":"close_chart","chart_id":"fixture-pressure"}}
|
||||
{"record_type":"presentation","command":{"action":"close_chart","chart_id":"fixture-pressure-P1"}}
|
||||
{"record_type":"presentation","command":{"action":"close_chart","chart_id":"fixture-pressure-P2"}}
|
||||
{"record_type":"presentation","command":{"action":"clear_overlay","overlay_id":"fixture-area"}}
|
||||
{"record_type":"presentation","command":{"action":"clear_highlights"}}
|
||||
{"record_type":"presentation","command":{"action":"clear_scada_analysis"}}
|
||||
|
||||
Reference in New Issue
Block a user