SuperAPI AI 工具集

no-pointer

前端与建站

查看项目

更新于 10-15 23:24

技能介绍

用途:为 Remotion Studio 的可点击控件(按钮、链接)统一交互样式,遵循 Studio 既定的无指针(pointerless)约定。

主要能力与规则:

  1. 光标:可点击控件设置 cursor: 'default',不使用 cursor: 'pointer'。
  2. 悬停:纯视觉悬停样式通过 packages/studio/src/helpers/hoverable.ts 中的 HOVERABLE_CLASS_NAME 与 hoverableStyle() 实现,不要为颜色或背景变化添加 React 悬停状态。
  3. 背景:除非周边组件已使用共享的 background-hover 约定,否则保持背景不变;纯文本操作时 idleBackground 与 hoverBackground 均使用 TRANSPARENT。
  4. 颜色:空闲色用 LIGHT_TEXT(#A6A7A9),悬停色用 WHITE(white);图标与嵌套文本需保持同一状态,若 Studio CSS reset 阻止继承,需检查实际绘制像素的元素。
  5. 焦点:移除默认 outline 与指针焦点阴影,但保留可见的键盘焦点指示。在控件上同时添加 HOVERABLE_CLASS_NAME 与 packages/studio/src/helpers/hoverable.ts 中的 FOCUS_VISIBLE_ONLY_CLASS_NAME。共享类实现:.__remotion-focus-visible-only:focus { outline: none; box-shadow: none; } 与 .__remotion-focus-visible-only:focus-visible { box-shadow: ${FOCUS_BOX_SHADOW}; }。切勿移除 :focus-visible 指示;隐藏操作在可被发现前不应进入 tab 顺序。

验证:在运行中的 Studio 检查控件各状态的计算样式:空闲与悬停 cursor 为 default;空闲色 rgb(166, 167, 169);悬停色 rgb(255, 255, 255);指针焦点无 outline 或 box-shadow;键盘 Tab 焦点显示标准 FOCUS_BOX_SHADOW。

Studio 代码改动后运行: bunx turbo run make --filter='@remotion/studio' bunx turbo run lint test --filter='@remotion/studio'

限制:资料未提供适用范围之外的平台、版本或收费信息。