梧桐设计语言v0.4.1

移动端列表MobileList

移动端不用表格,改成 64 高的整行可点卡片列表。每行:左侧首字头像 28、中间两行(f-label 15 主字段 + f-meta 13.5 辅助信息)、右侧状态 pill;行与行之间 space-2 8,card 底、radius-mdshadow-hairline


  • 整行可点(不只标题),按压 accent 底。
  • 右滑露出「派单」「关单」两个动作(primary / success 底),不做删除滑动。
  • 分组用 f-meta 小标题(「今天」「昨天」「更早」)。
  • 列表底部留 80px 给固定主按钮。
  • 下拉刷新;触底加载显示「已加载 40 / 156」。

消费者提供:行数据、分组、滑动动作。

示例

import
import { MobileList, MobileListGroup, MobileRow } from "@wutong/ui";

现场端列表

64 高整行可点,右侧状态 pill;不用表格

今天
更早

API

属性类型默认说明
MobileRow.avatar / title / metastring / ReactNode首字头像、主字段、辅助信息
MobileRow.trailingReactNode右侧,通常是 StatusPill
MobileRow.onClick() => void整行可点