智能落位与虚线预览

# 智能落位与虚线预览 — design.md

内容版本：sha256:d26d05ab6af1ee4b09df87d72521759cb60c17c637c640f0ee4be06116d357a7

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：components/x-hub-nearest-slot-drop-preview；语义类型：interaction。
- 分类：交互模式。
- 标签：拖放、智能吸附、位置预览。
- 场景：拖动卡片到已占用区域、预览模块即将落下的位置、避免拖放失败后弹回。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 最近空位：拖动模块到当前无法放置的位置时，系统自动寻找最近的可用空位。
- 松手落位：向 AI 描述为拖动时先在目标格位显示虚线框预览，松开鼠标后才将卡片放入；落位遵循 12×15 网格。

### 实际文件与参考资源

- `demo.html`（sha256:819e9a3c66023706e5b1cd799b048b49e0943915b287e12854f9d9d946ec00b4）
- `meta.yml`
- `refs/01.jpg`（sha256:dd0e987174fb329f5584d5aebe05e0c3fe3825728cba44eb5752bc1f60d0b2a4）
- 参考图：`refs/01.jpg`；智能落位与虚线框预览的原图参考。
- 实现摘要：sha256:819e9a3c66023706e5b1cd799b048b49e0943915b287e12854f9d9d946ec00b4。

## 未提供

- 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断；亮点中的数值属于元数据声明，demo 的存在与摘要不代表浏览器行为已验收。

## 实现建议

- 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。
- 使用语义化元素，验证键盘操作、焦点可见性、触控目标和减少动效偏好。
- 以 demo.html 为实现参考，逐项验证交互、窄屏布局、文本溢出和错误恢复；具体参数由实现与验收确认。