---
name: interaction-detail-spec
description: 交互细节规格模板
---

# 交互细节规格模板

## 键盘操作 ⚠️ 必填

| 按键 | 作用域 | 行为 | 备注 |
|------|--------|------|------|
| Tab | 全局 | 按顺序切换焦点 | 遵循DOM顺序 |
| Shift+Tab | 全局 | 反向切换焦点 | |
| Enter | 表单 | 提交表单 | 单行输入框 |
| Enter | 表格 | 确认编辑 | 行内编辑时 |
| Esc | 弹窗 | 关闭弹窗 | |
| Esc | 下拉框 | 关闭下拉 | |
| Esc | 编辑状态 | 取消编辑 | |
| Space | 复选框 | 切换选中 | |
| ↑↓ | 下拉框 | 切换选项 | |
| ↑↓ | 表格 | 切换行 | |

## 快捷键 ⚠️ 必填

| 快捷键 | 作用域 | 行为 | 是否支持 |
|--------|--------|------|----------|
| Ctrl/Cmd + S | 表单页 | 保存 | ✅/❌ |
| Ctrl/Cmd + Enter | 表单页 | 提交 | ✅/❌ |
| Ctrl/Cmd + Z | 编辑器 | 撤销 | ✅/❌ |
| Ctrl/Cmd + Shift + Z | 编辑器 | 重做 | ✅/❌ |
| Ctrl/Cmd + A | 列表页 | 全选 | ✅/❌ |
| Ctrl/Cmd + F | 全局 | 搜索 | ✅/❌ |
| Delete | 列表页 | 删除选中项 | ✅/❌ |

## 手势操作（移动端） ⚠️ 必填

| 手势 | 作用域 | 行为 | 备注 |
|------|--------|------|------|
| 下拉 | 列表页 | 刷新 | 顶部下拉 |
| 上拉 | 列表页 | 加载更多 | 底部上拉 |
| 左滑 | 列表项 | 显示操作按钮 | 删除/编辑 |
| 右滑 | 列表项 | 快捷操作 | 标记已读等 |
| 双指缩放 | 图片 | 放大/缩小 | |
| 长按 | 列表项 | 进入多选模式 | |
| 双击 | 图片 | 放大/还原 | |

## 拖拽交互 ⚠️ 必填

| 拖拽对象 | 目标区域 | 行为 | 视觉反馈 |
|----------|----------|------|----------|
| 列表项 | 同列表 | 排序 | 占位符+拖拽预览 |
| 文件 | 上传区域 | 上传 | 区域高亮+进度 |
| 看板卡片 | 其他列 | 移动 | 列高亮+卡片预览 |
| 表格列 | 其他位置 | 调整列顺序 | 列高亮 |

### 拖拽状态
| 状态 | 视觉表现 |
|------|----------|
| 拖拽开始 | 原位置显示占位符，鼠标显示拖拽图标 |
| 拖拽中 | 跟随鼠标的半透明预览 |
| 可放置 | 目标区域高亮 |
| 不可放置 | 鼠标显示禁止图标 |
| 拖拽结束 | 动画过渡到新位置 |

## 动画过渡 ⚠️ 必填

| 场景 | 动画类型 | 时长 | 缓动函数 |
|------|----------|------|----------|
| 页面切换 | 淡入淡出 | 300ms | ease-in-out |
| 弹窗打开 | 缩放+淡入 | 200ms | ease-out |
| 弹窗关闭 | 缩放+淡出 | 150ms | ease-in |
| 列表项删除 | 高度收缩+淡出 | 200ms | ease-in |
| 列表项添加 | 高度展开+淡入 | 200ms | ease-out |
| 下拉展开 | 高度展开 | 200ms | ease-out |
| Toast出现 | 从上滑入 | 200ms | ease-out |
| Toast消失 | 淡出 | 150ms | ease-in |

## 防抖节流 ⚠️ 必填

| 场景 | 策略 | 延迟时间 | 说明 |
|------|------|----------|------|
| 搜索输入 | 防抖 | 300ms | 停止输入后触发 |
| 窗口resize | 防抖 | 200ms | 停止调整后触发 |
| 滚动加载 | 节流 | 200ms | 固定间隔触发 |
| 按钮点击 | 节流 | 1000ms | 防止重复点击 |
| 表单校验 | 防抖 | 500ms | 停止输入后校验 |

## 焦点管理 ⚠️ 必填

| 场景 | 焦点行为 |
|------|----------|
| 弹窗打开 | 焦点移到弹窗内第一个可聚焦元素 |
| 弹窗关闭 | 焦点返回触发弹窗的元素 |
| 表单提交失败 | 焦点移到第一个错误字段 |
| 新增列表项 | 焦点移到新项的第一个输入框 |
| 删除列表项 | 焦点移到下一项或上一项 |
| 下拉框选择 | 选择后焦点保持在下拉框 |

