lab

Lab

此技能会构建一个用于检查组件的页面。真实组件的每个变体和每种状态都会在同一屏幕上展开显示，让用户无需在应用中逐一点击，就能调整它们。

展开显示每种状态，不作假

Lab 渲染的是实际组件，而不是副本。对于需要点击才能显示的状态，例如打开的菜单或悬停状态，会强制将其展开。Lab 是开发页面，不会随产品发布。

为某个创意探索新选项属于 prototype。页面上的值来自 defaults、motion、color 和项目的令牌。

1. 找出各种状态

阅读每个组件，并列出其变体、尺寸和状态：悬停、按下、焦点、打开、选中、禁用、加载、空和错误。只展示静止状态的 lab 属于 lab-every-state。

2. 构建一个路由

添加一个仅用于开发的路由，例如 /lab，用于导入真实组件。将 lab.js 复制到应用中，并仅在该路由上加载一次。用复制的标记构建的 lab 属于 lab-real-components。

3. 强制展开状态

使用受控属性或 data-* 属性，将菜单、弹出框、工具提示和子菜单渲染为展开状态。在条目上使用 force 保持悬停和焦点状态，例如 force="hover"。需要点击才能查看的菜单属于 lab-states-open。除非用户要求同时展示两种主题，否则使用应用当前的主题。这属于 lab-one-theme。

4. 将每个条目链接到其源代码

按照 lab.js 中的头部注释所示，使用 lab-entry 包裹每种状态，并标注其组件、状态和源代码行。未标注的网格属于 lab-link-the-source。如果用户要求调整值，则为每个自定义属性添加一个 lab-tune，并设置其范围。

网格、标签、筛选器和控件已随技能提供，因此只需编写条目。使用自有网格、标签或样式的 lab 页面属于 lab-shipped-frame。

5. 打开页面

启动开发服务器并打开 lab。在回复中提到路由却从未打开，属于 lab-open-it。

6. 不要将其包含在发布版本中

将路由和 lab.js 限定为仅在开发环境中使用，或者在发布前删除两者。在生产环境中仍可访问的 lab 属于 lab-not-in-production。

配对比较

每项检查都成对呈现。错误的写法旁边就是替代它的写法。

规则	错误写法	替代写法
lab-every-state	仅展示静止状态的按钮	静止、悬停、按下、焦点、禁用和加载状态
lab-real-components	为每种状态复制标记	导入实际的 Button
lab-states-open	隐藏在触发器后面的菜单	<Menu open>，并展开其子菜单
lab-one-theme	未经要求并排展示浅色和深色主题	应用当前的主题
lab-link-the-source	未标注的网格	链接到 menu/index.tsx 的 Menu / Submenu Open
lab-shipped-frame	从头编写的 lab 网格和标签	加载 lab.js，只编写 lab-entry 元素
lab-open-it	“已添加 /lab”	已为用户打开 lab
lab-not-in-production	/lab 在生产网站上可用	将路由限定为仅在开发环境中使用

报告

严重性。 HIGH 表示 lab 由副本构建，或在生产环境中仍可访问。MEDIUM 表示缺少状态、状态仍需点击才能显示，或手写了 lab 页面。LOW 表示条目未标注，或未为用户打开 lab。

格式。 每个根本原因列出一项：

file:line - [rule-id] what is wrong

然后给出 Rule | Count | Severity 摘要。仍有任何 HIGH 时标记为 Block，否则标记为 Approve。将所有无法渲染的状态标记为 Not verified。