选择和编辑系统

相关源文件

• frontend/src/components/core/KeyboardShortcutBadge.tsx
• frontend/src/components/preview/PreviewComponent.tsx
• frontend/src/components/preview/PreviewPane.tsx
• frontend/src/components/select-and-edit/EditPopup.tsx
• frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx
• frontend/src/components/select-and-edit/utils.ts
• frontend/src/components/sidebar/Sidebar.tsx
• frontend/src/store/app-store.ts

选择与编辑系统提供了一个以精确为中心的交互模式，允许用户直接点击预览中的特定元素并对其进行有针对性的更改。这种方法比编写通用更新指令提供了更直观的编辑体验，因为它清晰地向 AI 传达了需要修改哪个元素。

系统概览

选择与编辑系统与预览功能集成，以实现特定于元素的编辑。与通用更新指令（记录在 状态管理 中）不同，该系统提供了一个点按式界面，用于精确修改单个元素。

来源： frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx frontend/src/components/select-and-edit/EditPopup.tsx frontend/src/components/select-and-edit/utils.ts frontend/src/components/preview/PreviewComponent.tsx

用户界面组件

选择与编辑模式切换按钮

SelectAndEditModeToggleButton 组件提供了进入选择与编辑模式的入口。当该功能启用时，它会显示在侧边栏中，允许用户在正常模式和选择与编辑模式之间切换。

激活时，按钮会变为“危险”样式，以指示模式已启用，显示“退出选择模式”，而不是“选择与更新”。

来源： frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx5-22 frontend/src/components/sidebar/Sidebar.tsx115

编辑弹出窗口

EditPopup 组件是一个浮动 UI 元素，当用户在选择与编辑模式下点击预览中的元素时出现。它包含：

• 一个用于输入元素特定更新指令的文本区域
• 一个带有回车键快捷方式徽章的“更新”按钮
• 用于出现在点击元素附近的定位逻辑

弹出窗口的定位使用坐标计算，该计算考虑了 iframe 的位置和缩放。

来源： frontend/src/components/select-and-edit/EditPopup.tsx15-151 frontend/src/components/preview/PreviewComponent.tsx82-87

用户交互流程

下面的流程图说明了使用选择与编辑系统的完整流程

来源： frontend/src/components/select-and-edit/EditPopup.tsx46-58 frontend/src/components/select-and-edit/EditPopup.tsx69-110 frontend/src/components/preview/PreviewComponent.tsx54-62

技术实现

状态管理

选择与编辑模式的状态由 Zustand 维护在应用程序的全局状态中

状态属性	类型	目的
inSelectAndEditMode	布尔值	跟踪是否处于选择与编辑模式
toggleInSelectAndEditMode	函数	切换模式开关
disableInSelectAndEditMode	函数	强制退出模式

来源： frontend/src/store/app-store.ts13-15 frontend/src/store/app-store.ts27-30

元素高亮

该系统使用实用函数来可视化地高亮显示选定的元素

• addHighlight：为选定的元素添加蓝色虚线边框和浅蓝色背景
• removeHighlight：移除高亮样式
• 这些函数直接修改元素的样式属性

来源： frontend/src/components/select-and-edit/utils.ts1-11 frontend/src/components/select-and-edit/EditPopup.tsx84-91

坐标调整

系统需要计算编辑弹出窗口的正确位置，这需要 iframe 的坐标系与父文档之间的坐标转换

• getAdjustedCoordinates：将 iframe 内的点击坐标转换为父文档中的绝对坐标
• 考虑了
  • iframe 的位置（rect.left, rect.top）
  • 缩放因子（用于响应式预览）

来源： frontend/src/components/select-and-edit/utils.ts13-25 frontend/src/components/select-and-edit/EditPopup.tsx94-99

与预览系统的集成

PreviewComponent 负责：

1. 渲染预览 iframe
2. 在选择与编辑模式下捕获 iframe 中的点击事件
3. 将这些事件传递给 EditPopup 组件
4. 处理预览的缩放以适应不同的设备尺寸

该组件在 iframe 的内容文档上设置事件监听器，并将点击事件传递给 EditPopup 组件。

来源： frontend/src/components/preview/PreviewComponent.tsx54-62 frontend/src/components/preview/PreviewComponent.tsx82-87

详细数据流

当用户选择一个元素并提供更新指令时

1. 元素引用与更新指令一起传递给 doUpdate 函数
2. 在发送之前，元素的高亮样式会被移除
3. 这使得 AI 可以专注于需要修改的特定元素
4. 更新将应用于整个代码，但会知道要定位哪个元素

来源： frontend/src/components/select-and-edit/EditPopup.tsx46-58 frontend/src/components/preview/PreviewComponent.tsx9

可访问性和用户体验

选择与编辑系统包含多项 UX 增强功能

• 通过元素高亮进行视觉反馈
• 提交更新的键盘快捷键（回车键）
• 弹出窗口出现时自动聚焦文本区域
• 清晰指示选择与编辑模式是否激活

来源： frontend/src/components/select-and-edit/EditPopup.tsx115-119 frontend/src/components/select-and-edit/EditPopup.tsx134-140 frontend/src/components/core/KeyboardShortcutBadge.tsx8-25