DESIGN NOTES
为什么值得收藏
- 模板套用内置推荐布局,用户点击一次即可将工作台切换为预设排布。
- 效果描述向 AI 描述为在 12×15 网格中一次性应用推荐模板,重新排列最多 12 个模块,并立即显示套用结果。
同源设计合集 · 6 项
交互版式
结合原始资料,按需应用到自己的设计中。
实现一个「一键推荐布局」(原生 HTML/CSS/JS,零依赖,单文件交付): 【效果描述】在 12×15 网格工作台中,点击“应用推荐布局”后,一次性重新排列模块并立即显示结果。推荐模板为 3 列×4 行,每个模块占 4×3 格;按模块当前顺序从左到右、从上到下填入,底部保留 3 行空白。 【交互参数】使用原生按钮触发,鼠标点击及键盘激活均可用;最多处理 12 个模块。坐标从 0 开始,列起点为 0、4、8,行起点为 0、3、6、9。少于 12 个时留空剩余位置;没有模块时禁用按钮;超过 12 个或模块 ID 重复时不修改布局,并显示明确提示。每次应用前保存当前排布,提供一次“撤销”操作。 【使用示例】5 个模块时填满第一行,再填入第二行的前两格;12 个模块时填满全部 4 行。 【实现要点】先用模块数据记录 ID、顺序和网格坐标;再计算模板位置并一次性更新状态与视图;最后实现撤销、状态提示和按钮禁用条件。将格子尺寸、间距和模块数量上限写成带注释的可调参数。 【质量要求】所有样式限制在组件容器内,类名统一使用 `uw-` 前缀,不污染全局样式;适配窄屏展示;尊重 `prefers-reduced-motion`,关闭或简化过渡动画。 【参考资源】 - 资料详情:https://ui.undoai.cn/layouts/x-hub-recommended-layout/ - Demo 源码:https://ui.undoai.cn/layouts/x-hub-recommended-layout/demo.html - 原始设计参考图:https://ui.undoai.cn/layouts/x-hub-recommended-layout/refs/01.jpg(推荐布局功能的原图参考)
将提示词与你的页面背景、技术栈和目标尺寸一起交给代码助手。实现后对照原图检查布局和状态,再验证键盘、触控和减少动态效果。
展开后加载源代码
查看 Markdown 全文,复制或下载 design.md 后交给开发者使用。
# 一键推荐布局 — design.md 内容版本:sha256:977b70819db53ff0c027cca43a679226220f7518ea97e85f72f8872f04bbf4ce 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明;未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产:layouts/x-hub-recommended-layout;语义类型:interaction。 - 分类:其他。 - 标签:推荐布局、布局模板、一键应用。 - 场景:首次设置工作台、快速恢复整齐排版、不想逐个拖放模块时。 - 平台:未提供。 - 风格:未提供。 ### 亮点声明 - 模板套用:内置推荐布局,用户点击一次即可将工作台切换为预设排布。 - 效果描述:向 AI 描述为在 12×15 网格中一次性应用推荐模板,重新排列最多 12 个模块,并立即显示套用结果。 ### 实际文件与参考资源 - `demo.html`(sha256:85f9aeafc076a501f0ea7012f7aa884dae3b3980cb0aa13512db7f9f72958f41) - `meta.yml` - `refs/01.jpg`(sha256:49083be87b185d8478f7da6ac534c3214586bec985079b21577b629dbac4ccc6) - 参考图:`refs/01.jpg`;推荐布局功能的原图参考。 - 实现摘要:sha256:85f9aeafc076a501f0ea7012f7aa884dae3b3980cb0aa13512db7f9f72958f41。 ## 未提供 - 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断;亮点中的数值属于元数据声明,demo 的存在与摘要不代表浏览器行为已验收。 ## 实现建议 - 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。 - 使用语义化元素,验证键盘操作、焦点可见性、触控目标和减少动效偏好。 - 以 demo.html 为实现参考,逐项验证交互、窄屏布局、文本溢出和错误恢复;具体参数由实现与验收确认。
在完整提示词后补充你的要求;生成提示词不会创建新资产。
DESIGN NOTES
GOOD FOR