SpacetimeDB 协作画板键盘快捷键全解析从提示词规格到 React 实现【免费下载链接】SpacetimeDBDevelopment at the speed of light项目地址: https://gitcode.com/GitHub_Trending/sp/SpacetimeDB在 SpacetimeDB 仓库的 LLM 评测套件中tools/llm-oneshot/apps/paint-app/prompts/features/16_keyboard_shortcuts.md定义了协作绘图应用Paint App的第 16 项功能规格——键盘快捷键体系。它是 12 级累积式提示词composed中最后一级“Full Features”的 UX 收尾功能用于检验大模型能否把一套 12 条快捷键的规格落地为可用的 React 客户端。读完本文你将掌握这套快捷键的完整语义、它在提示词体系中的定位以及它在实际生成的 TypeScript SpacetimeDB 客户端中是如何用 React 事件监听实现的。功能规格一份只有 12 行的快捷键清单关联文档tools/llm-oneshot/apps/paint-app/prompts/features/16_keyboard_shortcuts.md全文是一份极简的功能规格要求协作画板提供如下快捷键按键动作所属功能模块VSelect tool选择工具选择与操控BBrush tool画笔工具基础绘图EEraser tool橡皮擦工具基础绘图RRectangle tool矩形工具形状OEllipse/Oval tool椭圆工具形状LLine tool直线工具形状AArrow tool箭头工具形状TText tool文字工具文字与便签SSticky note tool便签工具文字与便签Delete/Backspace删除选中元素选择与操控Escape取消选择 / 取消当前操作选择与操控Shift按住约束比例正圆 / 正方形形状从设计模式上看这 12 条快捷键可以分成三类工具切换键V/B/E/R/O/L/A/T/S单字母键快速切换画板当前激活的工具这是 Figma、Excalidraw 一类绘图软件的标准交互编辑操作键Delete/Backspace、Escape对选择集进行删除或取消选择属于选择与操控Selection Manipulation功能的键盘入口修饰键Shift不是一次性按键而是按住期间对绘制行为进行约束让矩形变成正方形、椭圆变成正圆。这份规格在tools/llm-oneshot/apps/paint-app/prompts/composed/12_full.md中“### Keyboard Shortcuts”一节被原样收录是 12 级提示词累积体的最后一块拼图。而 prompts/README.md 的功能总览表把该项标为第 16 个特性归类为 “UX polish”UX 打磨并指出它在整个评测体系中的作用是验证模型在功能完备后仍能做好交互细节。提示词体系定位为什么键盘快捷键是“满级”功能在阅读这条规格时需要把它放回整个评测框架中理解。tools/llm-oneshot/apps/paint-app/prompts/目录是一套“模块化提示词”系统用于评测大模型基于 SpacetimeDB 与 PostgreSQL 分别实现协作画板的能力。它的组织方式是 DRY 的features/下是 16 个功能积木composed/下是 12 个语言无关的累积式提示词language/下是极小的语言/后端差异化文件如typescript-spacetime.md、rust-spacetime.md。键盘快捷键之所以被安排在最后的 12_full 级是因为它的可验证性依赖前面所有功能工具切换键V/B/E/R/O/L/A/T/S只有在前 13 级基础绘图、形状、选择与第 15 级文字与便签全部实现后才能生效Delete/Backspace依赖第 4 级“选择与操控”中selectedElements状态的存在Shift约束比例依赖第 2 级形状工具拖动预览的实现Escape同时要覆盖“取消选择”和“取消操作”两个语义后者还关联到画板上的拖拽绘制过程。因此这份规格表面上只有 12 行实际是整套 16 个功能中覆盖最广的验收项之一——它要求候选实现具备完整的工具状态机、选择集状态和绘制过程管理。源码实证生成客户端中的快捷键实现评测生成的客户端样本位于tools/llm-oneshot/apps/paint-app/typescript/opus-4-5/spacetime/paint-app-20260109-164112/client/src/App.tsx。虽然它是某一轮评测的产物而非仓库的正式功能代码但恰好是这份规格最直接的落地样例可以逐条对照规格验证实现方式。1. 工具切换键单键驱动Tool状态机App.tsx 中定义了画板的工具类型联合type Tool brush | eraser | rect | ellipse | line | arrow | select | ...并用useStateTool(brush)保存当前工具见 App.tsx。规格中的九个字母键V/B/E/R/O/L/A/T/S在理想实现中会setTool到对应的工具值。注意源码中的工具标识符采用缩写命名rect、ellipse、line与规格中O - Ellipse/Oval tool的展示名一一对应——这也是评测中常见的命名映射点。2. 编辑操作键全局keydown监听对于删除、取消选择这类与当前选择集绑定的操作生成的客户端在useEffect中向window注册了全局keydown监听器并在清理函数中移除避免内存泄漏见 App.tsxconst handleKeyDown (e: KeyboardEvent) { if (!conn || !activeCanvasId) return; // Delete: Delete or Backspace else if ((e.key Delete || e.key Backspace) selectedElements.size 0) { e.preventDefault(); conn.reducers.deleteSelected({ canvasId: activeCanvasId }); setSelectedElements(new Set()); } // Escape: Deselect else if (e.key Escape) { conn.reducers.clearSelection({ canvasId: activeCanvasId }); setSelectedElements(new Set()); } }; window.addEventListener(keydown, handleKeyDown); return () window.removeEventListener(keydown, handleKeyDown);这段实现有三个值得注意的细节恰好呼应了规格的深层要求规格“Delete selected”的守卫条件只有selectedElements.size 0时才响应Delete/Backspace避免在未选中任何元素时误删规格“Deselect / Cancel operation”的双重语义Escape不仅清空本地selectedElements还通过conn.reducers.clearSelection({ canvasId })调用 SpacetimeDB 的 reducer把取消选择广播给协作画板上的所有协作者——这与第 4 级规格“See what others have selected”是配套的preventDefault()的必要性Backspace在浏览器中默认触发“后退”导航必须在画板语境下拦截同理Delete键在部分输入场景也有默认行为。此外该实现还顺带支持了CtrlZ撤销、CtrlY/CtrlShiftZ重做、CtrlC复制、CtrlV粘贴等组合键全部通过conn.reducers.undo/redo/copySelection/paste落到 SpacetimeDB 服务端 reducer实现多端同步的撤销/重做与剪贴板。3. Shift 约束比例在拖动预览中实时计算Shift不属于“按下即触发”型快捷键而是在绘制过程中按住修饰键动态改变预览几何。源码在指针移动时判断当前是否为形状工具并读取e.shiftKey见 App.tsx// Shift key for perfect squares/circles if (e.shiftKey (tool rect || tool ellipse)) { const size Math.max(Math.abs(width), Math.abs(height)); setShapePreview({ x: shapeStart.x, y: shapeStart.y, width: width 0 ? size : -size, height: height 0 ? size : -size, }); }实现要点是取宽高的较大绝对值作为统一边长并保留拖拽方向的正负号从而保证按住Shift时矩形必然是正方形、椭圆必然是正圆。规格第 2 级中 “Hold shift for perfect squares/circles” 的要求正是通过这一逻辑兑现的。实现要点与避坑清单基于规格文本和源码样例可以总结出在协作画板中实现这 12 条快捷键的工程要点单字母工具键要防止误触输入框T键同时是“文字工具”快捷键而文字/便签功能又需要内联输入第 15 级规格因此必须在焦点位于输入框、文本框时忽略全局快捷键否则会出现“打字同时切工具”的冲突。Escape的“取消当前操作”优先级绘制进行中isDrawing为 true与选中元素时按下Escape应执行不同逻辑——前者中止拖拽后者取消选择。规格把两者合并为一条需要实现按状态分支。协作语义必须走 reducer在 SpacetimeDB 架构下删除选中、清空选择这类影响共享状态的操作应通过conn.reducers.*触发服务端 reducer如deleteSelected、clearSelection而不是只改本地 state这样才能保证所有协作者实时看到同一状态。Shift是修饰键而非切换键应绑定在keydown/keyup的修饰键状态上在拖动绘制的事件处理中读取e.shiftKey不能与普通快捷键混用一个逻辑。事件监听的生命周期全局keydown监听要在组件卸载时移除并让依赖数组包含conn、activeCanvasId、selectedElements、canUndo等状态避免闭包持有过期值。小结16_keyboard_shortcuts.md是 SpacetimeDB 协作画板提示词体系中“小而关键”的一份规格12 行清单背后是对工具状态机、选择集、绘制过程与协作 reducer 调用链的综合验收。它在composed/12_full.md中作为满级功能的最后一块拼图出现而评测生成样本 App.tsx 则证明了这套快捷键可以完整落地为 React SpacetimeDB 客户端并把删除、取消选择等操作无缝接入服务端 reducer让键盘操作与协作画板的实时同步形成闭环。对开发者而言这份规格连同源码实现是复刻 Excalidraw 式协作画板快捷键体系时可参考的现成范本。【免费下载链接】SpacetimeDBDevelopment at the speed of light项目地址: https://gitcode.com/GitHub_Trending/sp/SpacetimeDB创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SpacetimeDB 协作画板键盘快捷键全解析：从提示词规格到 React 实现
SpacetimeDB 协作画板键盘快捷键全解析从提示词规格到 React 实现【免费下载链接】SpacetimeDBDevelopment at the speed of light项目地址: https://gitcode.com/GitHub_Trending/sp/SpacetimeDB在 SpacetimeDB 仓库的 LLM 评测套件中tools/llm-oneshot/apps/paint-app/prompts/features/16_keyboard_shortcuts.md定义了协作绘图应用Paint App的第 16 项功能规格——键盘快捷键体系。它是 12 级累积式提示词composed中最后一级“Full Features”的 UX 收尾功能用于检验大模型能否把一套 12 条快捷键的规格落地为可用的 React 客户端。读完本文你将掌握这套快捷键的完整语义、它在提示词体系中的定位以及它在实际生成的 TypeScript SpacetimeDB 客户端中是如何用 React 事件监听实现的。功能规格一份只有 12 行的快捷键清单关联文档tools/llm-oneshot/apps/paint-app/prompts/features/16_keyboard_shortcuts.md全文是一份极简的功能规格要求协作画板提供如下快捷键按键动作所属功能模块VSelect tool选择工具选择与操控BBrush tool画笔工具基础绘图EEraser tool橡皮擦工具基础绘图RRectangle tool矩形工具形状OEllipse/Oval tool椭圆工具形状LLine tool直线工具形状AArrow tool箭头工具形状TText tool文字工具文字与便签SSticky note tool便签工具文字与便签Delete/Backspace删除选中元素选择与操控Escape取消选择 / 取消当前操作选择与操控Shift按住约束比例正圆 / 正方形形状从设计模式上看这 12 条快捷键可以分成三类工具切换键V/B/E/R/O/L/A/T/S单字母键快速切换画板当前激活的工具这是 Figma、Excalidraw 一类绘图软件的标准交互编辑操作键Delete/Backspace、Escape对选择集进行删除或取消选择属于选择与操控Selection Manipulation功能的键盘入口修饰键Shift不是一次性按键而是按住期间对绘制行为进行约束让矩形变成正方形、椭圆变成正圆。这份规格在tools/llm-oneshot/apps/paint-app/prompts/composed/12_full.md中“### Keyboard Shortcuts”一节被原样收录是 12 级提示词累积体的最后一块拼图。而 prompts/README.md 的功能总览表把该项标为第 16 个特性归类为 “UX polish”UX 打磨并指出它在整个评测体系中的作用是验证模型在功能完备后仍能做好交互细节。提示词体系定位为什么键盘快捷键是“满级”功能在阅读这条规格时需要把它放回整个评测框架中理解。tools/llm-oneshot/apps/paint-app/prompts/目录是一套“模块化提示词”系统用于评测大模型基于 SpacetimeDB 与 PostgreSQL 分别实现协作画板的能力。它的组织方式是 DRY 的features/下是 16 个功能积木composed/下是 12 个语言无关的累积式提示词language/下是极小的语言/后端差异化文件如typescript-spacetime.md、rust-spacetime.md。键盘快捷键之所以被安排在最后的 12_full 级是因为它的可验证性依赖前面所有功能工具切换键V/B/E/R/O/L/A/T/S只有在前 13 级基础绘图、形状、选择与第 15 级文字与便签全部实现后才能生效Delete/Backspace依赖第 4 级“选择与操控”中selectedElements状态的存在Shift约束比例依赖第 2 级形状工具拖动预览的实现Escape同时要覆盖“取消选择”和“取消操作”两个语义后者还关联到画板上的拖拽绘制过程。因此这份规格表面上只有 12 行实际是整套 16 个功能中覆盖最广的验收项之一——它要求候选实现具备完整的工具状态机、选择集状态和绘制过程管理。源码实证生成客户端中的快捷键实现评测生成的客户端样本位于tools/llm-oneshot/apps/paint-app/typescript/opus-4-5/spacetime/paint-app-20260109-164112/client/src/App.tsx。虽然它是某一轮评测的产物而非仓库的正式功能代码但恰好是这份规格最直接的落地样例可以逐条对照规格验证实现方式。1. 工具切换键单键驱动Tool状态机App.tsx 中定义了画板的工具类型联合type Tool brush | eraser | rect | ellipse | line | arrow | select | ...并用useStateTool(brush)保存当前工具见 App.tsx。规格中的九个字母键V/B/E/R/O/L/A/T/S在理想实现中会setTool到对应的工具值。注意源码中的工具标识符采用缩写命名rect、ellipse、line与规格中O - Ellipse/Oval tool的展示名一一对应——这也是评测中常见的命名映射点。2. 编辑操作键全局keydown监听对于删除、取消选择这类与当前选择集绑定的操作生成的客户端在useEffect中向window注册了全局keydown监听器并在清理函数中移除避免内存泄漏见 App.tsxconst handleKeyDown (e: KeyboardEvent) { if (!conn || !activeCanvasId) return; // Delete: Delete or Backspace else if ((e.key Delete || e.key Backspace) selectedElements.size 0) { e.preventDefault(); conn.reducers.deleteSelected({ canvasId: activeCanvasId }); setSelectedElements(new Set()); } // Escape: Deselect else if (e.key Escape) { conn.reducers.clearSelection({ canvasId: activeCanvasId }); setSelectedElements(new Set()); } }; window.addEventListener(keydown, handleKeyDown); return () window.removeEventListener(keydown, handleKeyDown);这段实现有三个值得注意的细节恰好呼应了规格的深层要求规格“Delete selected”的守卫条件只有selectedElements.size 0时才响应Delete/Backspace避免在未选中任何元素时误删规格“Deselect / Cancel operation”的双重语义Escape不仅清空本地selectedElements还通过conn.reducers.clearSelection({ canvasId })调用 SpacetimeDB 的 reducer把取消选择广播给协作画板上的所有协作者——这与第 4 级规格“See what others have selected”是配套的preventDefault()的必要性Backspace在浏览器中默认触发“后退”导航必须在画板语境下拦截同理Delete键在部分输入场景也有默认行为。此外该实现还顺带支持了CtrlZ撤销、CtrlY/CtrlShiftZ重做、CtrlC复制、CtrlV粘贴等组合键全部通过conn.reducers.undo/redo/copySelection/paste落到 SpacetimeDB 服务端 reducer实现多端同步的撤销/重做与剪贴板。3. Shift 约束比例在拖动预览中实时计算Shift不属于“按下即触发”型快捷键而是在绘制过程中按住修饰键动态改变预览几何。源码在指针移动时判断当前是否为形状工具并读取e.shiftKey见 App.tsx// Shift key for perfect squares/circles if (e.shiftKey (tool rect || tool ellipse)) { const size Math.max(Math.abs(width), Math.abs(height)); setShapePreview({ x: shapeStart.x, y: shapeStart.y, width: width 0 ? size : -size, height: height 0 ? size : -size, }); }实现要点是取宽高的较大绝对值作为统一边长并保留拖拽方向的正负号从而保证按住Shift时矩形必然是正方形、椭圆必然是正圆。规格第 2 级中 “Hold shift for perfect squares/circles” 的要求正是通过这一逻辑兑现的。实现要点与避坑清单基于规格文本和源码样例可以总结出在协作画板中实现这 12 条快捷键的工程要点单字母工具键要防止误触输入框T键同时是“文字工具”快捷键而文字/便签功能又需要内联输入第 15 级规格因此必须在焦点位于输入框、文本框时忽略全局快捷键否则会出现“打字同时切工具”的冲突。Escape的“取消当前操作”优先级绘制进行中isDrawing为 true与选中元素时按下Escape应执行不同逻辑——前者中止拖拽后者取消选择。规格把两者合并为一条需要实现按状态分支。协作语义必须走 reducer在 SpacetimeDB 架构下删除选中、清空选择这类影响共享状态的操作应通过conn.reducers.*触发服务端 reducer如deleteSelected、clearSelection而不是只改本地 state这样才能保证所有协作者实时看到同一状态。Shift是修饰键而非切换键应绑定在keydown/keyup的修饰键状态上在拖动绘制的事件处理中读取e.shiftKey不能与普通快捷键混用一个逻辑。事件监听的生命周期全局keydown监听要在组件卸载时移除并让依赖数组包含conn、activeCanvasId、selectedElements、canUndo等状态避免闭包持有过期值。小结16_keyboard_shortcuts.md是 SpacetimeDB 协作画板提示词体系中“小而关键”的一份规格12 行清单背后是对工具状态机、选择集、绘制过程与协作 reducer 调用链的综合验收。它在composed/12_full.md中作为满级功能的最后一块拼图出现而评测生成样本 App.tsx 则证明了这套快捷键可以完整落地为 React SpacetimeDB 客户端并把删除、取消选择等操作无缝接入服务端 reducer让键盘操作与协作画板的实时同步形成闭环。对开发者而言这份规格连同源码实现是复刻 Excalidraw 式协作画板快捷键体系时可参考的现成范本。【免费下载链接】SpacetimeDBDevelopment at the speed of light项目地址: https://gitcode.com/GitHub_Trending/sp/SpacetimeDB创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考