移动端 H5 工作台
用 ebui 组件搭建移动端页面的简单模式样板：与桌面示例共用同一个包和构建链（单包兼容打包，无独立移动端构建分支、零额外运行时依赖），移动适配完全由页面级响应式样式完成。组件选型上只使用天然自适应宽度的组件（额度墙、进度、状态标签、分段器、步骤条），规避宽表格。常见组件的移动表达与演示壳规范见 移动端适配 板块。
页面结构
| 区块 | 实现 |
|---|---|
| 首页 | 快捷数据 2×2、简单模式开关、本月用量（CreditsProgress）、报销审批进度（Steps）、快速登记自适应表单、待办/订单列表 |
| 订单 | 关键词搜索 + 状态筛选（Segmented）+ 订单卡片（金额 / 状态 / 物流进度 / 查看详情） |
| 消息 | 类型筛选（全部/审批/系统）、未读红点、点按已读、一键全部已读 |
| 我的 | 个人资料卡、本月概要（Progress）、功能菜单（我的报销单/消息设置/账号安全）、退出登录 |
| 底部标签栏 | 四页签均为真实页面，sticky 置底 + 安全区适配，「消息」带未读数角标 |
关键实现说明
移动布局壳。页面根容器 max-width: 420px 居中 + min-height: 100dvh 弹性列布局：真机 375px 全宽显示，桌面浏览器与文档站预览则呈现为居中手机列。底部标签栏用 position: sticky; bottom: 0 置底，并通过 env(safe-area-inset-bottom) 适配全面屏安全区。
简单模式。开关切换 simpleMode，用 v-if 隐藏用量与审批进度卡片——移动端「信息降噪」的常见做法，核心数据与待办始终保留。
组件选型原则。只选天然自适应宽度的组件：CreditsProgress（栅格根数按容器宽度自适应）、Progress、Steps（align-center）、Segmented（block）、StatusTag；DataTable 等宽表格组件在移动场景改用「卡片列表」表达。
本地运行
bash
pnpm --filter @wil-works/ebui-example-mobile dev # http://localhost:8628（已开 --host，手机可局域网访问）接入真实业务
- 页面即「简单模式」：核心数据 + 待办处理；完整后台仍由桌面端承担，两端共用同一套接口与组件库；
- 需要原生壳时，本页面可直接嵌入 WebView（无路由依赖、离线字体已内置）；
- 移动端专属组件已提供：PullRefresh（下拉刷新）/ LoadMore（上拉加载）/ ActionSheet（动作面板）/ Tabbar（底部标签栏），见 移动端适配 各页与组件文档。
弹层与底部标签栏的层级规则
移动端弹层分两类，处理方式不同：
- 模态底部面板（如 Select / DatePicker 的底部弹出选择）：完整覆盖底部标签栏——遮罩将标签栏一并屏蔽，避免面板打开时标签栏仍可点击造成状态混乱；面板自身通过
env(safe-area-inset-bottom)适配全面屏安全区； - 非模态浮层（如 Toast 轻提示）：不遮挡标签栏，但应自行避让——出现位置需在标签栏之上预留空间，避免被遮挡或视觉重叠。