实现步骤概览

flowchart TD A( 设计代码块) --> B( 读取数据并根据算法分析所执行流程保存到快照中) B --> C( 根据现有数据初始化) C --> D( 绑定各个按键) D --> E( 读取快照并逐步演示) click A showStepCode "查看步骤1代码" click B showStepCode "查看步骤2代码" click C showStepCode "查看步骤3代码" click D showStepCode "查看步骤4代码" click E showStepCode "查看步骤5代码" classDef main fill:#eef3ff,stroke:#2f6ff0,color:#1f2a44,stroke-width:1px; class A,B,C,D,E main;

示例代码：步骤1（设计代码块）

1）冒泡排序

字段	含义
type	当前步骤类型：compare / swap / sorted / done。
i	当前操作的第一个下标（比较或交换时的左位置）。
j	当前操作的第二个下标（比较或交换时的右位置）。
codeLine	需要高亮的伪代码行号列表。
arr	该步骤下数组完整快照，用于渲染当前画面。

2）快速排序

字段	含义
arr	当前数组快照。
info	该步骤的解释文本。
codeLine	需要高亮的伪代码行号列表。
l, r	当前递归处理区间边界。
pivotIndex	当前基准值（pivot）所在下标。
i, j	分区扫描指针位置。
doneList	已确定最终位置的下标集合（数组形式）。
done	可选，是否进入最终完成状态。

3）归并排序

字段	含义
arr	当前数组快照。
info	步骤讲解文本。
codeLine	高亮代码行号。
l, mid, r	当前区间及中点。
write	当前写回到原数组的下标。
doneRange	当前已确认有序的连续区间。
done	可选，整体排序是否完成。

4）二分查找

字段	含义
arr	有序数组快照。
target	目标值。
low, high	当前查找区间边界。
mid	当前中点下标。
hit	命中下标（未命中通常为 -1）。
info	步骤讲解文本。
codeLine	高亮代码行号。
done	可选，查找是否结束。

5）线性时间选择

字段	含义
arr	当前数组快照。
info	步骤讲解文本。
codeLine	高亮代码行号。
l, r	当前递归区间边界。
pivot	当前选定主元值（中位数的中位数）。
lt, eq	三路划分后“<pivot”和“=pivot”区间的分界下标。
k	目标秩对应的下标（第 k+1 小）。
answer	可选，最终选出的第 k 小值。
done	该步骤是否已得到最终答案。

6）哈夫曼编码

字段	含义
nodes	当前所有结点映射表（key 为结点 id）；每个结点含 id, label, weight, left, right, order。
activeIds	当前“森林”中仍活跃的根结点 id 集合。
type	步骤类型：init / pick / merge / done。
selectedIds	本轮被选中的两个最小权结点 id。
newId	本轮新合并出的结点 id（或最终根 id）。
codeLine	高亮代码行号。
info	步骤讲解文本。
codes	可选，最终字符编码表。
wpl	可选，最终带权路径长度。

7）最长公共子序列

字段	含义
dp	当前 DP 矩阵完整快照。
message	步骤讲解文本。
phase	阶段标记（如填表、回溯、完成）。
codeLine	高亮代码行号。
activeCell	当前处理的 DP 单元坐标。
fromCell	当前转移来源单元坐标。
trace	回溯路径坐标序列。
cursor	回溯阶段当前光标位置。
moveTo	回溯阶段下一步将移动到的位置。
lcsPartial	当前已构造的 LCS 片段。
lcsFinal	可选，最终 LCS 串。

8）矩阵连乘

字段	含义
m	最优代价矩阵快照（m[i][j] 为子链最小乘法次数）。
s	最优划分点矩阵快照（s[i][j] 为最佳 k）。
type	步骤类型（init/len/target/try/update/done）。
target	当前正在求解的目标状态坐标 [i, j]。
sources	当前转移依赖的子问题坐标列表。
best	当前被视为最优的目标状态标记。
current	当前尝试的划分信息 [i, k, j]。
codeLine	高亮代码行号。
info	步骤讲解文本。
stateText	当前状态摘要文本。
bestValue	可选，最终全局最优代价。
bestPlan	可选，最终最优加括号方案。

9）0-1背包

字段	含义
nodes	状态树结点数组快照；结点常见字段有 id, parentId, depth, order, itemIndex, take, weight, value, path, status，分支限界额外有 bound。
algo	当前算法模式：backtrack 或 branchbound。
activeId	当前正在访问/展开的结点 id。
bestNodeId	当前最优解对应的结点 id。
bestValue	当前已知最优总价值。
bestPath	当前最优决策路径（位串，1 取 0 不取）。
codeLine	高亮代码行号。
info	步骤讲解文本。
stateInfo	状态补充文本（队列大小、剪枝原因等）。
resultDone	是否到达最终结果步骤。
finalItems	可选，结束时用于还原原物品信息的列表。