在 Figma 中为合作伙伴的金融科技办公室进行布局，采用主题、Pixel Perfect 并集成到 Next.js 设计系统中

初始情况和主题领域 - 金融科技中有一个产品 - 合作伙伴的个人账户，用于处理付款申请和监控状态。 Figma 中更新了设计，UI 套件也进行了部分重建，但前端团队正忙于后端集成。您需要根据布局布局一组屏幕，并以现成的 React/Next.js 组件的形式交付结果，这些组件可以立即连接到现有项目。

技术环境 - Next.js 14（应用程序路由器）、TypeScript、CSS 模块 + PostCSS、Storybook 7、Figma（自动布局、变量）、通过 pnpm 组装。该项目已经有了基本的原语（按钮、输入、模态），但某些块需要新的复合组件和自适应状态。提供对存储库和布局的访问。

需要做的是布置布局并将机柜的以下部分组装成组件：
1) 合作伙伴仪表板 - 指标卡、图表（无数据实现 - 仅布局和状态）、通知块、空状态。
2) 请求列表 - 具有固定标题、小屏幕上水平滚动、加载/空/错误状态、不同类型的行的表格。
3) 详细的应用程序页面 - 状态时间线、详细信息块、操作面板、警告。
4) 模态窗口和抽屉窗口 - 创建应用程序、确认、验证错误、查看文档。

限制和要求 - 无需连接第三方 UI 库（MUI/Antd 等）。允许使用已经存在的内部原语。布局必须考虑RTL；这不是必需的，但需要通过 CSS 变量实现深色和浅色主题，以及系统字体增加高达 125% 的正确操作。动画仅是 CSS，没有框架运动。语义和可访问性是必需的 - 模态的正确角色/咏叹调、焦点陷阱、可见的焦点环、键盘控制。

专业期望 - 工作涉及分析布局、构建组件结构、协调标记（颜色/填充/半径）、调整适应性和检查像素精度。

具体结果是对存储库的 PR，其中包含连接到 Next.js 路由的组件和页面，以及所有新复合组件及其状态的 Storybook 故事。

可测量的验收标准 - 控制断点 375/768/1280 处的像素完美偏差不超过 2 像素。对于无数据模式下的布局页面，Lighthouse Accessibility 至少为 95。所有交互元素都可以从键盘访问，模式通过 Esc 关闭并单击外部，焦点返回到触发器。页面不应水平滚动 375 像素，请求列表中的表格区域除外，容器内允许滚动。 pnpm 构建运行时不会出现 TypeScript 错误，也不会出现与布局相关的 linter 警告。根据布局，组件涵盖状态 - 默认/悬停/焦点/禁用/加载/空/错误。

执行阶段 - Figma 的初步审核和组件结构的批准。基本标记和主题的布局。页面和复合组件的实现。运行辅助功能检查表和 Pixel Perfect，根据审核结果进行更改。