# 自由拖拽网格工作台 — design.md

内容版本：sha256:b37ec937c909eb3b64531b9141a0a03105e5a9f742e097bc3bd6ee3dfe07f152

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

## 元数据记录

- 资产：layouts/x-hub-draggable-grid-workbench；语义类型：interaction。
- 分类：其他。
- 标签：工作台、网格布局、拖拽、缩放、原图参考。
- 场景：个人效率工作台排版、桌面模块位置调整、按任务调整卡片大小。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 自由摆放：12 个模块可用鼠标拖入、拖出、换位和调整大小。向 AI 描述为 12×15 网格中的可拖拽、可缩放卡片，卡片尺寸按整格变化。
- 布局持久化：用户排好的布局在应用重启后保留；应用在本地运行，数据不上云。

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

- `demo.html`（sha256:cbb48cc0c8b5cceeda5eb8cbc489c9bd30f31085abd4fc379141f2cc8dba8698）
- `meta.yml`
- `refs/01.jpg`（sha256:bff3450550c0346443557ae84ae7a1f945f3598120f9d086a34081c14646b650）
- 参考图：`refs/01.jpg`；工作台自由布局的原图参考。
- 实现摘要：sha256:cbb48cc0c8b5cceeda5eb8cbc489c9bd30f31085abd4fc379141f2cc8dba8698。

## 未提供

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

## 实现建议

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