第三轮 · 移动端组件
App / H5 / 小程序。触屏交互：底部导航、底部弹层、左滑操作、下拉刷新上拉加载。
本轮 5 个：① NavBar（顶部导航栏）② TabBar（底部标签栏）③ ActionSheet（底部操作菜单）④ SwipeCell（左滑操作）⑤ PullRefresh + InfiniteScroll（下拉刷新 / 上拉加载）
6断点 token 真源 · 5 档视口预览
xs=375 / mobile=640 / tablet=768 / desktop=1024 / wide=1280。切换宽度查看组件在不同断点下的表现（token 真源在 tokens.json，Tailwind @theme 转注册）。2xl 已移除（无超宽屏消费）。
←
375px 视口
⋯
当前视口宽度 375px。NavBar 与 TabBar 的触摸目标 ≥ 44px（touch-target-sm token）。xs=375 是小屏基线。
token: --pu-breakpoint-xs/mobile/tablet/desktop/wide → tailwind screens.xs/sm/md/lg/xl
7Sheet · 抽屉/弹层
4 侧弹出。Radix Dialog 受控。a11y: role=dialog + aria-modal。触摸关闭区域 + close 按钮。
props: open, onOpenChange, side?: 'top'|'right'|'bottom'|'left'
1NavBar · 顶部导航栏
页面顶栏。左返回 / 中标题 / 右操作。3 种样式：默认（带底边）、透明（沉浸式）、大标题（iOS 风格）。
任务详情
默认（带底边）
视频审核
主题色背景
props: { title; left?; right?; variant?: 'default'|'transparent'|'primary' }
2TabBar · 底部标签栏
底部主导航。icon + 文字 + 红点/数字角标。固定底部，safe-area 适配。
页面内容区
底部 TabBar（任务有红点）
props: { items: { key; label; icon; badge?: number|'dot' }[]; value; onChange }
3ActionSheet · 底部操作菜单
底部弹出的操作选项（区别 Dialog 居中弹窗）。移动端原生感，带遮罩 + 滑入动效。用于分享/删除/多操作选择。
分享到
分享菜单
确认操作
危险操作（红色）
props: { open; onOpenChange; title?; actions: { label; danger?; onClick }[]; cancelText? }
4SwipeCell · 左滑操作
列表项左滑露出操作按钮（删除/更多）。移动端列表标配交互。触屏左滑或点击切换展开状态。
龙
视频号审核任务 #1234
2 分钟前 · 待审核
J
小红书内容审核
15 分钟前 · 已通过
K
抖音视频审核
1 小时前 · 已驳回
点击列表项切换展开（触屏左滑）
props: { rightActions?: { label; onClick; variant? }[]; children }
5PullRefresh + InfiniteScroll · 下拉刷新 / 上拉加载
列表两件套。PullRefresh：下拉触发刷新（3 态：下拉中/松手刷新/完成）。InfiniteScroll：滚到底自动加载（loading/没有更多）。
刷新中...
任务 #1234审核中
视频号 · 2 分钟前
任务 #1233已通过
小红书 · 15 分钟前
任务 #1232已通过
抖音 · 1 小时前
任务 #1231已驳回
B站 · 2 小时前
加载中...
下拉刷新 + 上拉加载
任务 #1230已通过
视频号 · 3 小时前
任务 #1229已通过
小红书 · 4 小时前
任务 #1228已通过
抖音 · 5 小时前
没有更多了
到底（没有更多）
PullRefresh: { onRefresh; children } | InfiniteScroll: { onLoadMore; hasMore; loading }