# Local G2 报告交互式可视化重做设计

## 背景与目标

现有两份 HTML 附录能够列出算法流程和问题结论，但它们以文字卡片和节点连线为主，无法让读者看到路径几何如何变化，也无法直观看到错误与正确预期之间的差异。

本次重做把“路径形状、局部窗口、曲率变化、替换结果和故障后果”作为主画面。目标读者打开单个 HTML 后，应当能在不阅读源代码的前提下理解：

1. Local G2 为什么只修改局部粗路径；
2. 五次 Hermite 曲线如何取代曲率跳变处的原始折线；
3. 安全/质量门如何决定候选曲线被接受还是回退；
4. 三个已记录问题实际发生在哪里、正确结果应当是什么、二者为何不同。

本次不改变路径平滑算法、测试、地图、粗路径或报告中的事实结论。

## 事实边界与图示约定

两类图形必须在视觉上明确区分，不能把教学示意误写成已运行结果：

| 图形类别 | 用途 | 标注规则 |
|---|---|---|
| 典型几何示例 | 解释局部曲线替换、窗口和弧长机制 | 主图附近固定标注“典型示例：用于解释机制，不代表某次测试的精确坐标” |
| 真实证据 | 表达已运行的测试结果、状态与文本 | 显示场景名、证据等级和原始状态，如 `RectangleDetour: Success → InvalidInput` |

当前尚未定位 `RectangleDetour` 的第一个非法数值或超限曲率样本。因此问题一不能画出虚构的具体碰撞点、具体坏采样点或确定根因；只可画出真实的失败链路，并把未定位部位标为“待定位”。

## 文件边界

仅重做以下离线单文件附件；Markdown 两份报告的事实文字保持不变。

```text
dailywork_report/pathsmoothing_rep/
├── 01-local-g2-quintic-hermite-algorithm-visualization.html
└── 02-local-g2-issues-and-next-actions-visualization.html
```

两份文件继续使用 HTML5、内嵌 CSS、内嵌 SVG 与原生 JavaScript；不使用 CDN、网络请求、外部图片、构建工具或第三方库。

## 算法页：逐步路径演示

算法页采用一个占据主要版面的可切换 SVG，而不是并排流程卡片。读者可通过“上一步 / 下一步”、步骤按钮或左右方向键在六个状态之间切换；切换时只更新当前主图、图例和一句解释，不堆叠多张重复图。

| 步骤 | 主画面 | 读者应看到的作用 |
|---|---|---|
| 0. 原始粗路径 | 离散点构成的粗路径、方向箭头、局部曲率跳变记号 | Hybrid A* 路径可行，但相邻基元接口可能不平滑 |
| 1. 发现局部事件 | 突变点与其局部处理窗口高亮，其余路径淡化 | 算法只改必要区域，不重做全局搜索 |
| 2. 端点约束 | 窗口两端的位置、切向箭头、曲率趋势和五次候选虚线 | 五次 Hermite 用两端位置、一阶/二阶趋势塑形 |
| 3. 局部替换 | 原局部折线以灰色保留，候选曲线覆盖，接缝位置标注 | 只替换窗口内部，窗口外的粗路径保持不变 |
| 4. 连续性效果 | 上方为替换后的路径，下方为“曲率—弧长”对比 | 原曲率在接口跳变，候选曲线使该区域过渡连续 |
| 5. 安全与质量门 | 车辆轮廓沿候选轨迹的几个姿态、净空区域和接受/回退门 | 几何更顺滑不等于可发布，必须通过碰撞、净空和质量检查 |

几何使用经过明确标注的典型前进路径：一段水平路径接一段斜向路径，在接口处设置曲率突变。每一步复用同一坐标系，以便读者能清楚比较变化前后。车辆图仅表达安全扫掠关系，不模拟完整动力学或真实车体精确尺寸。

## 问题页：错误与正确预期对照

问题页采用“问题选择器 + 同一主画布中的实际/正确对照”。读者选择三个问题中的任意一个后，主画布同步显示事实状态、典型机制和下一步措施。每个问题都固定包含“实际发生”“正确应有”“差异原因”三条可视化信息，不再只列文字风险卡片。

### 问题一：RectangleDetour 原始基线复验失败

- **实际发生**：流程轨迹显示 `Hybrid A* 粗路径 Success` 到 `原始基线统一复验 InvalidInput` 的红色中断；Local G2 候选生成位于中断之后且没有开始。
- **正确应有**：同一条已成功规划的粗路径应先以可行基线进入后续平滑比较和候选评价。
- **几何辅助**：用一个标记为“概念性 RectangleDetour 外形”的绕障路径，配合“待定位”的校验点，不声称该点就是实际失败样本。

### 问题二：窗口合并与最大长度约束不一致

- **实际发生**：弧长标尺上两个相距 `1.0 m` 的曲率事件，各自的 `±0.8 m` 影响范围相交，规划器将它们合并；合并区间总长度又超过 `0.8 m`，候选窗口消失。
- **正确应有**：在不满足单窗口总长度约束时，应选择可行的拆分窗口或采用与合并规则一致的长度策略。
- **几何辅助**：同一条典型路径上的两个局部高亮区，与下方时间轴式弧长标尺同步显示。

### 问题三：连续替换后的弧长坐标陈旧风险

- **实际发生**：先替换 A 窗口并重新计算弧长后，B 窗口仍采用替换前的旧弧长，箭头落到新路径上的错误位置。
- **正确应有**：处理 B 前按当前路径重新定位其窗口，或使用稳定的锚点映射，使 B 落在原意图的局部区域。
- **几何辅助**：上、下两条路径分别表示“旧弧长定位”和“重新定位”，用同一个 B 标签显示落点差异。图例注明这是尚待流水线接入后回归验证的风险示例。

## 交互、可读性与可访问性

- 初始打开即显示算法第 0 步或问题一，无须任何操作。
- 所有交互均使用原生 `<button>`，提供可见文字、`aria-pressed` / `aria-current` 状态与键盘可达性；算法页额外支持左右方向键。
- 主 SVG 含 `<title>` 与 `<desc>`；色彩只辅助区分状态，同时配合实线/虚线、叉号、标签和箭头。
- 主图在桌面宽度下优先呈现为宽幅画布，在窄屏下缩放或纵向重排；不依赖固定视口高度和内部滚动。
- 仅在步骤切换时做短暂、可禁用的几何过渡；`prefers-reduced-motion` 下关闭动画。

## 验证标准

完成后应进行以下检查：

1. 两个 HTML 均包含完整 HTML 文档、中文标题、嵌入式 CSS/SVG/JavaScript，且没有 `http://`、`https://`、外部脚本或图片引用。
2. 算法页包含六个可访问步骤及所有对应术语：粗路径、局部窗口、五次 Hermite、局部替换、曲率—弧长、安全与质量门。
3. 问题页包含三个可选择问题；每个问题可见“实际发生”“正确应有”“差异原因”，并保留 `Success → InvalidInput`、`1.0 m`、`±0.8 m`、`0.8 m`、弧长重算等事实标签。
4. 检查脚本验证 JavaScript 查询的节点都存在、按钮切换函数存在、默认状态可渲染，以及 HTML 无明显未闭合标签。
5. 若环境提供浏览器，逐一点击步骤/问题并在窄宽度下做视觉验收；若无浏览器，则如实记录为未完成的人工视觉检查项，不以静态检查替代。

## 非目标

- 不把 HTML 做成实时运行算法的仿真器，也不连接项目运行时或读取本地数据。
- 不新增任何关于 G2 已正式接入服务、已解决三项问题或已定位 `RectangleDetour` 根因的结论。
- 不将典型示例中的坐标、曲率数值写成项目真实测量结果。