数据结构描述

用「能点的动画 + 能跑的代码」讲清楚基础数据结构与算法，外加一个配套的截图记录小工具。

每个演示页面都是零依赖的单文件：不用装环境、不用起服务器、不加载任何 CDN，下载下来双击就能用。

---

📖 完整说明文档

👉 点这里查看《数据结构描述 · 详细说明》

里面有每个页面的知识点、能动手操作的地方、背后的技术实现、代码里的每个函数和复杂度分析， 以及配套工具 StepSnap 的完整用法。

---

🎬 交互式演示页面

页面	讲什么
进制转换 · index.html	二 / 八 / 十 / 十六进制互转：按权展开法、除基取余法、乘基取整法、分组法，支持小数与负数
算法复杂度 · complexity-guide.html	时间复杂度与空间复杂度：增长曲线、二分查找、归并排序、递归斐波那契的调用树
单链表动画 · linked-list-anim.html	24 步演示节点怎么 malloc、指针怎么连起来，右侧 C 源码同步高亮

🚀 怎么看到动画效果

这些页面是完整可运行的网页，下载到本地双击即可（不需要任何环境）：

1. 点这里 下载整个仓库 ZIP（或页面右上角的 Download ZIP）
2. 解压后双击其中任意一个 .html 文件

⚠️ 注意：直接在仓库里点文件名、或者用 raw 链接打开，浏览器只会显示网页源码（服务器返回的是纯文本），看不到动画。

---

💻 C 语言实现

源码	内容
linked_list.c	单链表：头插 O(1)、尾插 O(n)、查找、二级指针删除（不用特判头节点）、整体释放
SqList1.c	顺序表：初始化、按位置插入、按位置删除、遍历打印

两份都带完整注释，编译后可直接运行：

gcc -Wall -o linked_list linked_list.c && ./linked_list
gcc -Wall -o sqlist     SqList1.c      && ./sqlist

---

📦 其他文件

文件	说明
StepSnap_v1.0.zip	StepSnap：关键步骤截图 + AI 分析工具。不录屏，只在你认为关键的一步按一下快捷键截屏，结束后自动交给 AI 写成操作说明书 / 问题复现分析 / 教学教程。Windows 免安装，解压双击 StepSnap.exe
局域网文件传输工具.zip	配套小工具：在局域网里让手机 ↔ 电脑互传文件，解压后双击 启动服务器.bat 即可

---

🖥 StepSnap —— 关键步骤截图 + AI 分析

录屏的问题是文件大、AI 没法直接看、事后还要一帧帧找重点。 StepSnap 反过来：由你决定哪一帧重要，AI 负责把这一串关键帧串成完整流程。

开始会话 ──► 按快捷键截屏(可随手写备注) ──► 再截 ──► 再截 ──► 结束会话
                                                              │
                                                              ▼
                                        按顺序打包所有截图 → 多模态大模型
                                                              ▼
                                        analysis.md（结构化报告）

两步就能用

1. 解压 StepSnap_v1.0.zip，双击里面的 StepSnap.exe （免安装，不需要 Python；配置和报告都生成在 exe 旁边）
2. 点右上角「⚙ 设置」→ 选一个服务（DeepSeek deepseek-flash、gpt-4o、claude-sonnet-4-5、 qwen-vl-max…）→ 填 API Key → 点「测试连接」

模型必须能看图，纯文本模型会报错。选 DeepSeek 预设时会自动把上传图片的长边 调成 1300——DeepSeek 服务端就是这么缩的（单图最多算 1024 token），传更大的图不会更清晰。

然后就可以记录了，默认三组全局快捷键：

快捷键	作用
Ctrl + Alt + S	截下这一帧（你觉得关键的一步）
Ctrl + Alt + N	给刚截的那张补一句备注
Ctrl + Alt + Enter	结束会话，让 AI 出报告

节奏是：做一步 → 敲一下 → 继续做，不用停下来整理。 快捷键可在设置里直接按键录制（点输入框，按你想要的组合就行），F9 / F10 这类单键最省事。

它输出什么

报告落在 sessions\<会话名>\：

文件	内容
analysis.md	主产物，结构化 Markdown 报告
analysis.json	同一份报告的结构化数据，方便二次加工
timeline.txt	截图时间线 + 你的备注
shots\*.png	原始截图，按 001_103000.png 命名，保留顺序

分析目标可选四种：操作流程说明（SOP）/ 问题复现分析 / 教学教程 / 自定义—— 写文档、报 bug、做教程各用一套。

想确认它在你机器上正常？

窗口版没有控制台，结果会弹窗并写入同目录的文件：

StepSnap.exe --selftest      :: 环境自检：截图 / 快捷键 / 渲染，不联网不花钱
StepSnap.exe --capture 3     :: 端到端验收：真截 3 张图并校验 PNG
StepSnap.exe --version       :: 显示版本

完整使用说明见压缩包内的 使用说明.md 与 首次使用请看这里.txt。

---

在本地查看

git clone https://git.bz21.top/bz21/test.git
cd test
# 直接双击 index.html 即可（无需任何环境）