SuperAPI AI 工具集

modal-or-page

通用与其它

查看项目

更新于 10-15 19:52

技能介绍

用途:为单个交互流程选择容器,并规定其关闭、焦点与路由行为。不设计应用整体导航结构,也不规定动效时长。

主要能力:提供从内联展开、气泡、模态框、侧边抽屉、底部面板到整页的决策阶梯,按“最省”优先选择;给出各容器的 Escape、点击遮罩、显式关闭、浏览器后退行为对照;规定焦点开启位置与关闭后返回目标;规定何时需要 URL 深链接。

核心原则:默认用整页,浮层需自证必要;模态框只承载一个决策或一步,内部滚动或出现第二步即应改为页面;承载流程的浮层要路由,承载提问的浮层不路由;禁止浮层叠加浮层,仅允许模态框内锚定非阻塞层;有未保存内容时禁用点击遮罩关闭;Escape 只关闭最上层且不提交;焦点开启落在首个有效控件,关闭返回触发元素或其接替者;窄视口应升级容器而非缩小;连续重复打开的场景应改用非阻塞抽屉。

使用方式:优先复用项目已有的浮层原语(Radix、Base UI、Headless UI、Vaul、shadcn/ui 或框架自带 dialog),检测并配置其焦点陷阱、惰性、滚动锁定、Escape 与 portal 顺序;若项目已有路由浮层约定则遵循。输出以决策块形式给出容器、理由、路由、关闭方式与焦点目标。

适用场景:设计评审、前端实现前的交互决策、无障碍与深链接规范制定。

限制:不涉及导航图、动效时序与断点位置;具体实现细节依赖项目现有组件库。资料未提供安装命令、收费与平台信息。