yi_leetcode_show: Instructions file for Claude Code

LeetCode Show Agent Guide

项目目标

• 这是一个纯前端项目，用 React + Vite + TypeScript 构建，并部署到 GitHub Pages。
• 项目目标是把 LeetCode 的 Python 题解做成可播放的算法原理动画。
• 当前交互全部在浏览器里完成，不依赖后端。
• Python 运行依赖浏览器端的 Pyodide，因此这里的参考解法和可执行代码都统一按 Python 3 处理。

当前结构

• 题目入口列表在 src/content/problems.ts。
• 每道题实现为一个 ProblemDefinition，类型定义在 src/types.ts。
• 当前示例题文件是 src/content/partitionLabels.ts，新增题目时优先参考它。
• 页面入口在 src/App.tsx。
• 动画面板和参考代码高亮在 src/components/AnimationPlayer.tsx。
• 右侧变量面板在 src/components/FrameVariablesPanel.tsx。
• 可运行 Python 编辑区在 src/components/CodeWorkbench.tsx。

核心约束

• 只收录 Python 3 解法。
• 每道题最多挂 5 个参考解法。
• 参考解法尽量附上明确来源链接。
• 只有在能确认公开原始来源时，才能标注为“灵神”或其他作者原解；无法确认时要写成“手工整理”或类似表述。
• 页面是静态站方案，新增功能时不要引入后端依赖。
• 动画高亮不是实时 Python 调试，它由动画帧里的 codeStep 驱动。
• 右侧变量面板展示的是动画帧状态，不是用户自定义 Python 的真实局部变量。

新增题目的标准流程

1. 复制 src/content/partitionLabels.ts 的结构，新建一个题目文件，例如 src/content/<slug>.ts。
2. 补全 ProblemDefinition 的基础信息：
   • id
   • title
   • slug
   • difficulty
   • prompt
   • summary
   • algorithmNotes
   • inputLabel
   • defaultInput
   • leetcodeUrl
   • defaultSolutionId
   • pythonEntry
3. 为这道题准备 solutions。
4. 实现 buildVisualization(input)，让它返回完整的 ProblemVisualization。
5. 在 src/content/problems.ts 中导出并注册这道题。
6. 本地运行并确认题目可切换、动画可播放、参考解法可切换。

新增题目时必须满足的数据约定

• solutions 的每一项都必须符合 SolutionDefinition。
• defaultSolutionId 必须命中 solutions 中真实存在的一个解法。
• pythonEntry 需要和浏览器执行约定一致：
  • 优先兼容 class Solution + 指定方法。
  • 同时允许备用函数名，例如 solve(s)。
• buildVisualization(input) 必须返回：
  • inputValue
  • expectedOutput
  • lastOrder
  • frames

动画帧设计约定

• 当前通用阶段只有 4 个：preprocess、scan、close、done。
• AnimationFrame.codeStep 现在直接复用这 4 个阶段名。
• 动画下方参考代码的高亮，完全依赖当前帧的 codeStep 和当前解法的 highlightLines。
• 如果新题需要更细的代码高亮阶段，不要先硬改页面文案，先评估是否要扩展 CodeStep 类型和所有题目的 highlightLines。
• 变量面板依赖 AnimationFrame 里的字段，例如：
  • currentIndex
  • currentChar
  • rangeStart
  • rangeEnd
  • result
  • closedSegments
  • mappedChars
  • lastMap
• 如果新题的讲解需要额外变量，优先扩展 AnimationFrame 结构，再同步更新变量面板，而不是在组件里写特判字符串。