项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

数据展示 ​

桌面端的信息密度手段(宽表格、多栏描述列表、大数盘点)在移动端全部换一种载体:表格 → 卡片列表,描述列表 → 分组单元格,统计区 → 2×2 网格。字段的取舍比排布更重要——卡片上只留「决策需要」的字段,其余进详情。

表格 → 卡片列表 ​

DataTable 在移动端不缩列、不出横向滚动条,而是把「一行」翻译成「一张卡片」:

表格列卡片槽位
业务主键(单号)主行标题
状态列主行右侧状态标签
金额 / 时间 / 负责人两列字段网格(最多 4 格)
操作列底部金额 + 一个动作按钮

行点击进详情页承担「查看更多」,卡片内不再放第二、第三个操作按钮。

9:41
报销单
CL-0908-01审批中
申请人
李工
提交时间
09-08 10:24
类型
差旅
关联项目
智慧园区一期
¥1,860
PO-0905-07已通过
申请人
王芳
提交时间
09-05 15:47
类型
办公
关联项目
—
¥432
CL-0901-03已驳回
申请人
张三
提交时间
09-01 09:12
类型
差旅
关联项目
中台改造
¥3,260

筛选器是移动列表的标配:分段器(Segmented block)承担高频枚举筛选,实时过滤当前列表;低频组合条件进「筛选」底部面板(见数据录入)。

描述列表 → 分组单元格 ​

DetailDescriptions / Descriptions 的「label-value 对」在移动端改为分组卡片 + 双行单元格:相关字段聚成一组卡片,组内一行一个字段,读起来是「从上往下扫」,而不是桌面「从左往右对」。

9:41
客户详情
基本信息
更新于 09-01
客户名称
上海云启科技有限公司
行业
软件与信息服务
规模
200-500 人
商务信息
归属:华东大区
客户等级
A 级 · 年框客户
负责人
李工 · 销售一部
下次跟进
09-12(续约谈判)

分组标题用 CellStack 的主行(加粗、小号),与字段行的区别靠前后间距,不再依赖桌面的分栏与分隔线。

统计区 → 2×2 网格 ​

桌面顶部一排四五个 Statistic 在移动端折叠为 2×2 网格:数值保留,标签缩短,趋势说明(同比箭头、辅助文案)仅在空间富余时保留。超过 4 个指标说明还没想清楚移动端要什么——先做减法。

9:41
经营概览
本月营收(元)286,400
新增客户36
回款率92.4%
逾期订单3
数据更新于 10:24 · 点按卡片查看明细