[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-84150":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":9,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},84150,"struct-viz","xiaweiyi713\u002Fstruct-viz","xiaweiyi713","408 考研四科可视化平台 - 数据结构\u002F组成原理\u002F操作系统\u002F计算机网络的算法动画演示",null,"TypeScript",100,3,1,0,21,40,82,1.81,false,"main",true,[],"2026-06-12 02:04:38","\u003Cdiv align=\"center\">\n\n# 🌳 Struct-Viz\n\n**面向 408 考研的四科算法可视化平台**\n\n输入类 C++ 的伪代码，逐步动画演示数据结构与算法的执行全过程。\n\n![React](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact-19-61DAFB?logo=react&logoColor=white)\n![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-3178C6?logo=typescript&logoColor=white)\n![Vite](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVite-8-646CFF?logo=vite&logoColor=white)\n![Tailwind CSS](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTailwind_CSS-4-38BDF8?logo=tailwindcss&logoColor=white)\n![Tests](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftests-164%20passed-3FB950)\n\n[🚀 在线体验](https:\u002F\u002Ftourmaline-sable-9c8eb5.netlify.app) · [📦 源码仓库](https:\u002F\u002Fgithub.com\u002Fxiaweiyi713\u002Fstruct-viz)\n\n\u003C\u002Fdiv>\n\n---\n\n## 📖 项目简介\n\n**Struct-Viz** 是一个为计算机考研统考（408）打造的算法可视化学习工具，覆盖**数据结构、计算机组成原理、操作系统、计算机网络**四大科目，内置 **111 个算法模板**。\n\n与「看动画」类工具不同，Struct-Viz 让你**亲手写代码**：用项目自研的 **StructScript** 伪代码语言描述操作，系统会解析、执行并把每一步状态变化用动画呈现出来——配合伪代码同步高亮、运行时状态面板和历年真题，帮助理解算法「为什么这样跑」。\n\n## ✨ 核心特性\n\n- 🧩 **四科全覆盖** —— 111 个模板、73 个算法运行时，从二叉树到 TCP 拥塞控制\n- ✍️ **StructScript 伪代码语言** —— 类 C++ 语法，配 Monaco 编辑器：语法高亮、自动补全、错误波浪线\n- 🎬 **逐步动画演示** —— 基于 D3.js 与 Framer Motion，可单步 \u002F 连续播放，5 档变速\n- 🔍 **7 种可视化器** —— 树、图、数组、字符串、哈希表、多数组、矩阵，自动按数据结构切换\n- 📑 **伪代码同步高亮** —— 动画播放时高亮对应的伪代码行，对照学习\n- 🧠 **运行时状态面板** —— 实时查看变量、指针、不变量（invariant）变化\n- 📚 **408 真题关联** —— 关联 2009–2024 年统考真题，边练边对照考点\n- ⚖️ **对比模式** —— 双侧并排运行两个算法，直观对比执行差异\n- 🌗 **暗色模式 + 响应式** —— 完整适配深色主题与移动端\n- 🔗 **代码分享 \u002F 本地持久化** —— 通过 URL 分享代码片段，编辑内容自动保存\n- ⚡ **Web Worker 执行** —— 算法在后台线程运行，重负载也不卡顿界面\n\n## 📚 四科覆盖\n\n| 科目 | 模板数 | 涵盖分类 |\n|------|:------:|---------|\n| 🌳 **数据结构** | 68 | 线性结构、树（BST\u002FAVL\u002F红黑树\u002FB 树\u002FB+ 树\u002F2-3 树\u002F伸展树\u002FTrie\u002F跳表\u002F堆\u002F哈夫曼）、图算法、排序、查找、动态规划、贪心 |\n| ⚙️ **计算机组成原理** | 12 | 运算方法（补码 \u002F IEEE754 \u002F Booth \u002F 浮点加法）、存储体系（Cache 映射 \u002F 虚拟地址）、指令流水线 |\n| 🖥️ **操作系统** | 20 | 进程调度、死锁（银行家算法 \u002F 死锁检测）、内存管理（页面置换 \u002F 分区分配）、磁盘调度、进程同步 |\n| 🌐 **计算机网络** | 11 | 数据链路层（CRC \u002F 海明码 \u002F CSMA）、网络层（子网划分 \u002F 距离向量 \u002F 链路状态 \u002F NAT）、传输层（GBN \u002F SR \u002F TCP 状态机 \u002F 拥塞控制） |\n\n## ✍️ StructScript 用法\n\nStructScript 是一种极简的伪代码语言：**声明一个结构**，然后**调用它的方法**。系统会逐句执行并记录每一步的状态快照。\n\n**二叉搜索树插入：**\n\n```cpp\nBST tree;\ntree.insert(8);\ntree.insert(3);\ntree.insert(10);\ntree.insert(1);\ntree.insert(6);\ntree.insert(14);\n```\n\n**快速排序：**\n\n```cpp\nQuickSort q;\nq.sort(38, 27, 43, 3, 9, 82, 10);\n```\n\n**Dijkstra 最短路径**（构造时传入节点数）：\n\n```cpp\nGraph g(5);\ng.addEdge(0, 1, 10);\ng.addEdge(0, 2, 3);\ng.addEdge(2, 1, 1);\ng.addEdge(1, 3, 2);\ng.addEdge(2, 3, 8);\ng.addEdge(3, 4, 4);\ng.dijkstra(0);\n```\n\n> 💡 在[沙盒页](https:\u002F\u002Ftourmaline-sable-9c8eb5.netlify.app\u002Fsandbox)从模板下拉框选择任意算法，即可载入示例代码并一键运行。\n\n## 🛠️ 技术栈\n\n| 领域 | 选型 |\n|------|------|\n| 框架 | React 19 + TypeScript + Vite 8 |\n| 可视化 | D3.js（树 \u002F 图）、Framer Motion（数组 \u002F 矩阵动画） |\n| 状态管理 | Zustand（含 persist 持久化） |\n| 路由 | React Router 7（路由级代码分割） |\n| 编辑器 | Monaco Editor + 自定义 StructScript 语言 |\n| 样式 | Tailwind CSS 4 |\n| 测试 | Vitest（164 个单元测试） |\n| 部署 | Netlify |\n\n## 🚀 本地开发\n\n### 环境要求\n\n- Node.js ≥ 20.19（推荐 22.x）\n- npm \u002F pnpm \u002F yarn 任一包管理器\n\n### 快速开始\n\n```bash\n# 克隆仓库\ngit clone https:\u002F\u002Fgithub.com\u002Fxiaweiyi713\u002Fstruct-viz.git\ncd struct-viz\n\n# 安装依赖（国内可使用镜像加速）\nnpm install --registry=https:\u002F\u002Fregistry.npmmirror.com\n\n# 启动开发服务器\nnpm run dev\n```\n\n### 常用脚本\n\n| 命令 | 说明 |\n|------|------|\n| `npm run dev` | 启动开发服务器（默认 http:\u002F\u002Flocalhost:5173） |\n| `npm run build` | 生产构建，输出到 `dist\u002F` |\n| `npm run preview` | 本地预览生产构建产物 |\n| `npm run typecheck` | TypeScript 类型检查（`tsc -b`） |\n| `npm run lint` | ESLint 代码检查 |\n| `npm run test` | 运行单元测试（Vitest） |\n\n## 📂 项目结构\n\n```\nsrc\u002F\n├── core\u002F                  # 算法引擎（与 UI 解耦）\n│   ├── parser\u002F            # StructScript 词法分析 + 语法解析\n│   ├── executor\u002F          # 运行时工厂 + Trace 记录器\n│   ├── algorithms\u002F        # 73 个算法运行时实现\n│   ├── worker\u002F            # Web Worker 执行器\n│   └── __tests__\u002F         # 单元测试\n├── components\u002F\n│   ├── visualizers\u002F       # 7 种可视化器（树 \u002F 图 \u002F 数组 …）\n│   ├── editor\u002F            # Monaco 编辑器 + StructScript 语言定义\n│   ├── inspector\u002F         # 状态面板 \u002F 伪代码面板 \u002F 真题\n│   ├── timeline\u002F          # 播放控制条\n│   └── layout\u002F            # 顶栏 \u002F 可拖拽分栏 \u002F 移动端布局\n├── pages\u002F                 # 首页 \u002F 科目页 \u002F 沙盒页\n├── data\u002F                  # 模板、科目、伪代码、真题数据\n├── stores\u002F                # Zustand 状态\n└── types\u002F                 # AST \u002F Trace \u002F 可视化结构类型定义\n```\n\n**架构要点**：算法引擎（`core\u002F`）完全独立于 React。解析器把 StructScript 编译为 AST，执行器逐步运行并产出一系列 `TraceFrame`（每帧是某一时刻的完整状态快照），可视化层只负责渲染这些快照——因此算法逻辑可以脱离 UI 单独测试，界面也能任意替换。\n\n## 🌐 部署\n\n项目已配置 Netlify 自动部署（见 [`netlify.toml`](netlify.toml)）：\n\n- 构建命令：`npm run build`\n- 发布目录：`dist`\n- 已配置 SPA 路由重定向，刷新子路由不会 404\n\n也可将 `dist\u002F` 部署到任意静态托管（Vercel、GitHub Pages、Cloudflare Pages 等）。\n\n## 🤝 说明\n\n本项目为个人学习与考研复习辅助而创建，欢迎提 Issue 或 PR 交流改进。如果它对你的复习有帮助，欢迎点一个 ⭐️。\n\n> 真题解析仅供学习参考，如有疏漏欢迎指正。\n",2,"2026-06-11 04:12:24","CREATED_QUERY"]