基于布局的布局：具有设计标记和组件状态的自适应 B2B SaaS 仪表板页面

现有用于采购和仓库管理的 B2B SaaS。 Figma 中的设计已更新，但产品中的界面部分基于旧布局，部分采用过时的 UI 套件。需要根据布局布局一组关键的个人帐户屏幕，以便它们可以轻松连接到当前前端。

技术环境和初始数据
- Figma 中的模型和原型：桌面 1440、平板电脑 1024、移动设备 375，包括悬停-焦点-活动-禁用、空错误加载状态
- 当前堆栈：React 18、Vite、TypeScript、SCSS 模块、Storybook 已连接
- 该项目有基本组件，但它们与新设计不一致 - 允许在旧组件旁边创建新的 UI 组件层

工作范围及阶段
1) 审核布局并批准组件屏幕图：突出显示重复使用的块，确定网格、排版、颜色、间距、状态
2) 在代码中设置设计标记：颜色、版式、半径、阴影、z-index、间距比例的 CSS 变量。支持布局的浅色和深色主题
3）6个柜屏的布局集成到项目中（连接现有路由页面，不改变业务逻辑）：
- 带有小部件和自适应网格重组的仪表板
- 订单表：粘性标题、窄屏幕上的水平滚动、空加载错误状态
- 订单页面：两栏组成，分块折叠，自适应移动端
- 订单创建表单：多步骤布局、字段验证状态（视觉）、禁用和帮助文本
- 通知中心：按日期分组，不进行虚拟化，但确保高效布局和正确传输
- 配置文件设置：部分、切换、操作确认（模式窗口）
4) UI 级别组件：按钮、输入、选择（原生之上的自定义样式）、复选框、切换、徽章、选项卡、模态、工具提示、骨架、Toast。组件必须具有布局中的状态并在 Storybook 中设置样式
5）跨浏览器检查和完善：Chrome、Firefox、Safari、Edge。修复与 Figma 的差异

限制
- 不要触及 API、业务逻辑和数据类型 - 该任务专门涉及布局、样式、布局、状态和与当前页面的连接
- 不要使用繁重的 UI 库（MUI、AntD 和类似物） - 仅使用现有堆栈和您自己的样式
- 布局不应参考 1-2 像素级别的像素完美，但应符合公差范围内的网格、缩进和版式
- 辅助功能：可见焦点状态、正确的 Tab 键顺序、按钮图标的 aria 标签、正文文本对比度至少为 WCAG AA

具体结果
- 存储库中的 PR 具有 6 个屏幕的现成布局和一组 UI 组件
- 包含所有组件及其状态的故事书
- 简短的自述文件：如何启动、在哪里查看页面、添加了哪些令牌

可衡量的验收标准
- 在控制断点 1440-1024-768-375 上视觉上符合Figma，边距容差高达 4px，字体大小容差高达 1px
- 375 和 768 处没有水平页面滚动，订单表除外，容器内允许滚动
- 所有交互元素都具有与布局中一样的悬停焦点活动禁用状态
- Lighthouse (Chrome) 对于任何新页面：可访问性不低于 90，最佳实践不低于 90（不包括后端）
- 导航新页面时控制台中没有严重错误

材料
- 在开始之前，我将提供对 Figma 和存储库的访问、页面列表和布局链接。在此过程中，预计会进行 2-3 次简短调用以同步组件和公差。