# 未读标记拖拽粘连 — design.md

内容版本：sha256:adffbe4ac763b1a38ddede6bf7a844178580fec3f78d9a992b012a4e54a980e3

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

## 元数据记录

- 资产：components/sticky-unread-drag；语义类型：interaction。
- 分类：交互模式。
- 标签：粘连拉丝、锚点抽细、阈值断裂、气泡消除。
- 场景：未读消息消除、通知红点拖拽、气泡提示关闭、角标清理。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 根部抽细节奏：以根部为锚点画连接曲线（双圆切线贝塞尔），根部半径随拖拽距离从初始值（如 8px）线性抽细，这是手感关键
- 断裂阈值：拖拽距离超过阈值（如 80-120px）时丝线断裂，气泡带粒子消散动画消失，未达阈值则 ease-out 回弹归位约 200ms
- 跟手位移：气泡 1:1 跟随手指，丝的形态每帧根据距离实时重算

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

- `cover.png`（sha256:12ff6d51ef4147222c17c3991ec296079e0fd81747b743cc3204217d8e6921d7）
- `demo.html`（sha256:10b9899facd1dca32131c325ebb32eedf42425e6c6f7172e30e141b2f113987a）
- `meta.yml`
- 实现摘要：sha256:10b9899facd1dca32131c325ebb32eedf42425e6c6f7172e30e141b2f113987a。

## 未提供

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

## 实现建议

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