第 03 课 | 第三幕：让用户能按

第三幕：让用户能按（第6-7集）

从纯逻辑到可见的 UI

第6集：画个计算器出来

场景：引擎能算了，但用户看到的还是空白页。

• HTML 结构：display + keypad + 历史面板占位，语义化标签
• CSS Grid 布局：4 列按钮，CSS Custom Properties 驱动尺寸
• 事件委托：keypad 一个监听器管所有按钮，data-action + data-value 分发
• 双行显示：上面表达式（aria-live="polite"），下面结果（aria-live="assertive"）
• 实时预览：输入 2+3 立刻看到 5，用独立 evaluate() 避免污染历史
• 按钮视觉反馈：CSS :active 缩放 + filter: brightness，键盘按下也高亮
• 核心概念：先让东西能用，再让它好看

产出文件：

• index.html — 完整 HTML 结构（display + keypad + history panel）
• style.css — 标准模式样式（深色主题，Grid 布局，按钮变体）
• app.js — UI 逻辑追加（CalculatorUI 类，事件绑定，显示更新）

对应命令：/gsd-plan-phase 2，/gsd-execute-phase 2

第7集：键盘也能用

场景：鼠标能用，但很多人习惯键盘敲数字。

• 输入状态机：(expression, justEvaluated, lastResult) + input → new state
• 纯函数的好处：按钮和键盘走同一套逻辑，不会不一致
• 键盘映射：0-9、+-*/、Enter/=、Escape、Backspace、.、%、()、m 切模式
• 括号：键盘可用但 UI 不显示（标准模式高级功能）
• 模式切换快捷键：按 m 无修饰键即可切换
• 核心概念：状态机把混乱的输入变成可控的流程

产出文件：

• app.js — 状态机纯函数（appendDigit / appendOperator / appendDecimal / deleteLast / toggleNegate）+ 键盘处理
• tests/ui/state-machine.test.js — 状态机测试
• tests/ui/keyboard.test.js — 键盘映射测试
• .planning/phases/02/VERIFICATION.md — Phase 2 验证

对应命令：/gsd-execute-phase 2（续），/gsd-verify 2