照设计稿出页面代码草稿

示例： 页面：某某项目订单列表页（设计稿 2 张，桌面与手机各一） 框架：React 18；组件库：Ant Design 5；样式：CSS Modules 断点：手机 ≤768px、平板 769–1024px、桌面 ≥1025px 交互：表单校验、弹窗抽屉、列表筛选 【组件结构】 OrderListPage ├─ FilterBar（筛选：关键词、状态、日期区间） ├─ OrderTable（表格：订单号、客户、金额、状态、操作） └─ DetailDrawer（点行打开，右侧抽屉） 【代码草稿（节选）】 FilterBar.jsx - 关键词输入用受控组件，300ms 防抖 - 状态下拉复用 Antd Select，选项来自常量数组 - 日期区间用 RangePicker，切值触发 onFilter 回调 FilterBar.module.scss - 桌面：flex 横排，间距 12px，整体 24px 内边距 - 手机：纵向堆叠，按钮整行宽 - 表格在 ≤768px 改为卡片列表，用 CSS 媒体查询切换 【像素差异自查清单】 区块 | 设计值 | 实测值 | 差异 | 处理 标题字号 | 20px | 20px | 0 | 通过 卡片圆角 | 8px | 8px | 0 | 通过 按钮高度 | 40px | 38px | 2px | 加 line-height 列表行高 | 56px | 52px | 4px | 调 padding 手机侧边距 | 16px | 14px | 2px | 改容器 padding 【兼容写法】 - 移动端 Safari：抽屉滚动用 -webkit-overflow-scrolling - 微信内嵌：避免 100vh 写死，用 min-height 加安全区变量 结论由持证人员核对后才能用。