feat: 完善智能卡片选择和HTML编辑功能

主要更新：
- 实现智能卡片自动检测和选择功能
- 修复卡片点击事件处理，确保事件正确传递
- 优化HTML编辑器的事件监听机制
- 添加直接在卡片元素上的点击监听器
- 改进pointer-events和z-index处理
- 统一卡片选择逻辑到selectCard函数

技术改进：
- 使用事件委托处理动态添加的card-detected类
- 在捕获阶段监听事件确保优先处理
- 智能选卡模式下禁用selection overlay避免事件阻挡
- 为检测到的卡片添加适当的CSS属性确保可点击

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: aixier

HtmlEditModal卡片选择工具可行性分析.md

@@ -0,0 +1,373 @@
+# HtmlEditModal 卡片选择工具可行性分析
+
+## 1. 背景与需求
+
+### 1.1 当前状态
+- HtmlEditModal 已实现涂抹框选功能，允许用户通过画笔选择页面元素
+- 后端 `/api/html/edit` 接口已经支持接收选中的元素并进行AI修改
+- 界面布局已经成熟，包含工具栏、内容区、选中元素列表等
+
+### 1.2 新需求
+- 在现有工具栏中增加"卡片选择"模式
+- 用户点击该模式后，点击任何卡片即可选中整张卡片
+- 保持现有界面布局和后端接口不变
+- 与现有涂抹选择功能并存，用户可自由切换
+
+## 2. 技术可行性分析
+
+### 2.1 前端实现可行性
+
+#### 2.1.1 工具栏扩展
+```javascript
+// 现有工具定义
+const tools = [
+  { mode: 'paint', icon: 'Brush', label: '涂抹选择' },
+  // 新增卡片选择工具
+  { mode: 'card', icon: 'CreditCard', label: '卡片选择' }
+]
+```
+
+**可行性：高**
+- 工具栏已采用动态渲染方式，易于扩展
+- 通过 `v-for` 循环渲染工具按钮，添加新工具无需修改模板结构
+- 现有的 `toggleTool(mode)` 方法可直接支持新模式
+
+#### 2.1.2 卡片检测与识别
+```javascript
+// 卡片识别逻辑
+function detectCardElement(clickedElement) {
+  // 向上遍历DOM树，寻找卡片容器
+  let current = clickedElement
+  while (current && current !== document.body) {
+    // 检测常见的卡片类名
+    if (current.classList.contains('card') ||
+        current.classList.contains('card-container') ||
+        current.classList.contains('card-item') ||
+        current.getAttribute('data-card') !== null) {
+      return current
+    }
+    current = current.parentElement
+  }
+  return null
+}
+```
+
+**可行性：高**
+- 根据提取结果，卡片都有明确的 class 标识（如 `card-container`）
+- 可以通过 DOM 树遍历准确定位卡片边界
+- 支持多种卡片识别策略（类名、属性、结构特征）
+
+#### 2.1.3 点击事件处理
+```javascript
+// 在 SelectionOverlay 组件中添加卡片模式处理
+if (this.config.mode === 'card') {
+  canvas.addEventListener('click', (e) => {
+    const rect = canvas.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+
+    // 获取iframe中对应位置的元素
+    const element = getElementAtPosition(x, y)
+
+    // 检测是否为卡片
+    const card = detectCardElement(element)
+    if (card) {
+      // 创建覆盖整个卡片的选区
+      this.createCardSelection(card)
+    }
+  })
+}
+```
+
+**可行性：高**
+- SelectionOverlay 已经支持多种模式（paint、rect）
+- 可以复用现有的选区创建和管理机制
+- iframe 内容访问机制已经建立
+
+### 2.2 与现有功能的兼容性
+
+#### 2.2.1 选区数据结构兼容
+```javascript
+// 现有选区结构
+{
+  id: 'selection_xxx',
+  rect: { x, y, width, height },
+  elements: [
+    {
+      selected_element: '<div class="card">...</div>',
+      selection_coverage_percentage: 100
+    }
+  ]
+}
+```
+
+**兼容性：完全兼容**
+- 卡片选择生成的数据结构与涂抹选择完全一致
+- 后端接口无需任何修改
+- 选中元素列表展示逻辑无需调整
+
+#### 2.2.2 交互模式切换
+```javascript
+// 模式切换已经实现
+toggleTool(mode) {
+  if (toolActive.value && currentMode.value === mode) {
+    toolActive.value = false
+  } else {
+    currentMode.value = mode
+    overlayConfig.mode = mode
+    toolActive.value = true
+  }
+}
+```
+
+**兼容性：完全兼容**
+- 现有的工具切换机制可直接支持新模式
+- 不同模式间的切换逻辑已经完善
+- 清除选区、撤销等功能可共享
+
+### 2.3 用户体验优势
+
+#### 2.3.1 操作简化
+- **涂抹模式**：需要精确涂抹覆盖想要的内容，可能需要多次操作
+- **卡片模式**：一次点击即可选中整张卡片，效率提升显著
+
+#### 2.3.2 精确度提升
+- **涂抹模式**：可能选中部分卡片或跨越多个元素
+- **卡片模式**：确保选中完整的语义单元（整张卡片）
+
+#### 2.3.3 视觉反馈
+```javascript
+// 卡片悬停效果
+if (mode === 'card') {
+  // 鼠标悬停时高亮潜在可选卡片
+  canvas.addEventListener('mousemove', (e) => {
+    const card = detectCardAtPosition(e.x, e.y)
+    if (card) {
+      showCardOutline(card)  // 显示卡片轮廓
+    }
+  })
+}
+```
+
+## 3. 实现方案设计
+
+### 3.1 最小化改动方案
+
+#### 3.1.1 文件修改清单
+1. `/terminal-ui/src/components/HtmlEditModal/index.vue`
+   - 添加卡片选择工具到 tools 数组
+   - 更新提示文本逻辑
+
+2. `/terminal-ui/src/components/SelectionOverlay/index.vue`
+   - 添加卡片模式的事件处理
+   - 实现卡片检测算法
+   - 添加卡片悬停效果
+
+3. `/terminal-ui/src/adapters/HTMLSelectionAdapter.js`（可选）
+   - 添加卡片识别辅助方法
+
+#### 3.1.2 核心代码改动
+```vue
+<!-- HtmlEditModal/index.vue -->
+<script setup>
+// 工具配置 - 添加卡片选择
+const tools = ref([
+  { mode: 'paint', icon: markRaw(Brush), label: '涂抹选择' },
+  { mode: 'card', icon: markRaw(CreditCard), label: '卡片选择' }  // 新增
+])
+
+// 更新提示文本
+const currentTip = computed(() => {
+  if (!toolActive.value) {
+    return '当前为浏览模式，点击工具按钮激活选择功能'
+  }
+  if (currentMode.value === 'card') {
+    return '点击任意卡片即可选中整张卡片'  // 新增提示
+  }
+  if (selectedElements.value.length === 0) {
+    return '使用涂抹工具选择要编辑的内容'
+  }
+  return `已选择 ${selectedElements.value.length} 个元素`
+})
+</script>
+```
+
+### 3.2 SelectionOverlay 组件扩展
+
+```vue
+<!-- SelectionOverlay/index.vue -->
+<script setup>
+// 卡片检测算法
+const detectCard = (element) => {
+  const cardSelectors = [
+    '.card',
+    '.card-container',
+    '.card-item',
+    '[data-card]',
+    '.post-card',
+    '.content-card'
+  ]
+
+  // 从点击元素向上查找
+  let current = element
+  while (current && current !== document.body) {
+    for (const selector of cardSelectors) {
+      if (current.matches && current.matches(selector)) {
+        return current
+      }
+    }
+    current = current.parentElement
+  }
+  return null
+}
+
+// 卡片模式处理
+const handleCardMode = () => {
+  if (props.config.mode !== 'card') return
+
+  canvas.value.addEventListener('click', handleCardClick)
+  canvas.value.addEventListener('mousemove', handleCardHover)
+}
+
+// 卡片点击处理
+const handleCardClick = (e) => {
+  const element = getElementAtCanvasPosition(e.offsetX, e.offsetY)
+  const card = detectCard(element)
+
+  if (card) {
+    // 获取卡片边界
+    const rect = card.getBoundingClientRect()
+    const containerRect = props.container.getBoundingClientRect()
+
+    // 创建选区
+    const selection = {
+      id: `card_${Date.now()}`,
+      rect: {
+        x: rect.left - containerRect.left,
+        y: rect.top - containerRect.top,
+        width: rect.width,
+        height: rect.height
+      },
+      elements: [{
+        selected_element: card.outerHTML,
+        selection_coverage_percentage: 100
+      }]
+    }
+
+    // 添加到选区列表
+    selections.value.push(selection)
+    emits('selection-complete', selection)
+  }
+}
+
+// 卡片悬停效果
+const handleCardHover = (e) => {
+  const element = getElementAtCanvasPosition(e.offsetX, e.offsetY)
+  const card = detectCard(element)
+
+  if (card) {
+    canvas.value.style.cursor = 'pointer'
+    // 绘制卡片轮廓提示
+    drawCardOutline(card)
+  } else {
+    canvas.value.style.cursor = 'default'
+    clearCardOutline()
+  }
+}
+</script>
+```
+
+## 4. 风险评估与应对
+
+### 4.1 技术风险
+
+| 风险项 | 可能性 | 影响 | 应对措施 |
+|-------|--------|------|----------|
+| 卡片边界识别不准 | 低 | 中 | 提供多种识别策略，支持配置 |
+| 嵌套卡片处理 | 中 | 低 | 优先选择最内层卡片，提供切换选项 |
+| 动态加载的卡片 | 低 | 低 | 使用 MutationObserver 监听DOM变化 |
+| 性能问题 | 低 | 低 | 使用防抖处理鼠标移动事件 |
+
+### 4.2 用户体验风险
+
+| 风险项 | 可能性 | 影响 | 应对措施 |
+|-------|--------|------|----------|
+| 误选相邻卡片 | 低 | 低 | 提供视觉反馈，悬停时显示将选中的区域 |
+| 无法选中部分内容 | 中 | 中 | 保留涂抹模式，用户可切换使用 |
+| 卡片定义不明确 | 低 | 中 | 提供卡片识别规则说明 |
+
+## 5. 实施建议
+
+### 5.1 分阶段实施
+
+#### Phase 1: 基础功能（2小时）
+- [ ] 添加卡片选择工具到工具栏
+- [ ] 实现基础的卡片点击选择
+- [ ] 确保与后端接口兼容
+
+#### Phase 2: 体验优化（1小时）
+- [ ] 添加卡片悬停提示效果
+- [ ] 优化卡片识别算法
+- [ ] 添加卡片选择的视觉反馈
+
+#### Phase 3: 高级功能（可选，1小时）
+- [ ] 支持批量选择多张卡片（Ctrl+点击）
+- [ ] 支持卡片选择的快捷键
+- [ ] 添加智能卡片边界检测
+
+### 5.2 测试要点
+
+1. **功能测试**
+   - 卡片选择的准确性
+   - 模式切换的流畅性
+   - 选区数据的正确性
+
+2. **兼容性测试**
+   - 与涂抹模式的切换
+   - 与现有编辑功能的配合
+   - 不同HTML结构的适配
+
+3. **性能测试**
+   - 大量卡片场景的响应速度
+   - 内存占用情况
+   - 渲染性能
+
+## 6. 技术优势总结
+
+### 6.1 实现简单
+- 复用现有的 SelectionOverlay 架构
+- 无需修改后端接口
+- 代码改动量小（预计不超过200行）
+
+### 6.2 用户友好
+- 一键选中整张卡片，操作直观
+- 保留原有涂抹功能，灵活性高
+- 视觉反馈清晰，用户体验好
+
+### 6.3 维护方便
+- 代码结构清晰，易于理解
+- 与现有功能解耦，便于独立维护
+- 可配置性强，易于扩展
+
+## 7. 结论
+
+**可行性评级：⭐⭐⭐⭐⭐（非常可行）**
+
+### 7.1 技术可行性
+- 现有架构完全支持该功能扩展
+- 无需大规模重构
+- 技术风险低，实现路径清晰
+
+### 7.2 业务价值
+- 显著提升用户选择卡片的效率
+- 降低操作复杂度
+- 提高编辑精确度
+
+### 7.3 实施建议
+建议立即实施该功能：
+1. 技术方案成熟，风险可控
+2. 用户体验提升明显
+3. 开发成本低，收益高
+
+预计总开发时间：3-4小时
+预计测试时间：1-2小时