Tuffex 组合界面教程
使用 Tuffex 组件搭建可审阅、可截图验证的后台页面切片
Tuffex 组合界面教程
本教程面向 Tuff / Dashboard / Admin 页面：目标不是堆组件，而是把页面切成“操作区 → 状态区 → 数据区”，让用户能快速判断当前状态并完成动作。
组件套件与引入
Tuffex 按三套件组织：基础组件（base）、进阶套件（pro）与 AI 套件（ai）。除整包引入外，可从分类入口按套件引入，便于按需组织依赖：
import { TxButton, TxDataTable } from '@talex-touch/tuffex/base'
import { TxCommandPalette, TxLiquid } from '@talex-touch/tuffex/pro'
import { ChatList, TxPromptBar } from '@talex-touch/tuffex/ai'
三个入口的导出并集与主入口 @talex-touch/tuffex 完全一致；样式照常从 @talex-touch/tuffex/style.css 全量引入，或按组件的 style.css 按需引入。各组件的套件归属见组件总览。
1. 页面分组
| 分组 | 推荐组件 | 说明 |
|---|---|---|
| 操作区 | TxButton、TuffInput、TxSearchInput、TxSearchSelect、TuffSwitch | 承载搜索、筛选、刷新、发布、同步等即时操作 |
| 状态区 | TxStatusBadge、TxTag、TxProgressBar | 展示审核、同步、发布、容量等状态 |
| 数据区 | TxDataTable、TxPagination、TxEmptyState、TxSearchEmpty、TxSkeleton、TxLoadingState | 展示记录、选择行、分页、空态和加载态 |
| 反馈区 | TxToastHost、TxTooltip、TxLoadingOverlay、TxSpinner | 展示任务结果、解释动作、阻断局部刷新和行内等待 |
| 趋势区 | Dashboard 图表组件 | 趋势图优先复用图表封装，避免手写一次性 SVG |
| 权限编排区 | TxTree、TxTreeSelect、TxTransfer、TxTimeline | 选择权限域、归属团队、资源授权和审计进度 |
| 导航配置区 | TxTabs、TxDropdownMenu、TxPopover、TxDrawer | 设置页用 Tabs 固定分区，轻操作进菜单/浮层，高密度配置进抽屉 |
| 发布配置区 | TxCascader、TxFlatSelect、TxSegmentedSlider、TxSlider、TxTagInput | 选择发布范围、包格式、发布模式、风险档位、灰度比例和短标签 |
2. 最小可运行片段
发布工作台组合
一个截图可验证的 Dashboard 组合片段。
3. 搜索与筛选路径
列表页不要把“输入关键词”“选择范围”“没有结果”拆成三个孤立区域。推荐把 TxSearchInput、TxSearchSelect 与 TxSearchEmpty 放进同一个筛选容器，保证用户能清楚看到当前条件、匹配数量和恢复动作。
后台筛选工具栏
关键词、筛选范围与搜索空态共用同一条恢复路径。
4. 运营状态首屏
Dashboard / Admin 页面通常先让用户判断“系统是否健康”。首屏建议按下面顺序组织：
| 层级 | 组件 | 使用要点 |
|---|---|---|
| 标题层 | 原生标题 + TxButton | 标题说明当前运营范围，右侧只放一个主刷新/发布操作 |
| 状态层 | TxStatusBadge | 用文字表达状态，不只依赖颜色 |
| 指标层 | TxStatCard | 默认展示数字，健康度/容量使用 variant="progress" |
| 进度层 | TxProgressBar | 已知百分比用 percentage，未知时长用 loading |
运营状态面板
适合作为后台页面首屏的状态、指标和进度组合。
5. 趋势图区
后台页的趋势图优先复用 DashboardSparklineChart / DashboardMetricChart，不要在页面里写一次性 svg 折线。这样可以统一 tooltip、暗色主题、ResizeObserver 和空态表现。
后台趋势图
ECharts 封装后的轻量趋势图。
6. 数据恢复路径
每个数据面板都要同时设计三种恢复路径：加载中、无数据、请求失败。它们应占用同一个容器，避免用户看到页面跳动或重复占位。
后台恢复状态
加载、空态、错误态共用一个数据容器。
7. 数据列表与分页
后台数据区应优先把“表格主体、选择状态、分页、加载占位”放在同一块工作区里。表格不要自带临时状态文案，分页不要脱离表格底部，长耗时加载用骨架保持空间。
数据运维面板
表格选择、分页和骨架加载共用一个后台数据区。
8. 任务反馈路径
后台任务反馈需要把“动作解释、结果提示、局部阻断、行内等待”拆开：TxTooltip 解释按钮，TxToastHost 展示短反馈，TxLoadingOverlay 阻断正在刷新的数据块，TxSpinner 只用于没有百分比的短等待。
后台任务反馈中心
Toast / Tooltip / LoadingOverlay / Spinner 的后台任务组合。
9. 权限编排路径
后台授权页需要先回答“授权哪个范围”，再回答“交给谁、给哪些资源、当前审计到哪一步”。推荐用 TxTree 放左侧权限域，TxTreeSelect 放归属团队，TxTransfer 管资源授权，TxTimeline 显示审计进度。
权限编排面板
Tree / TreeSelect / Transfer / Timeline 的后台授权组合。
10. 导航与配置壳层
后台设置页需要先回答“我在哪个分区”，再回答“当前能做什么操作”。推荐把一级分区固定在 TxTabs，把一次性操作放进 TxDropdownMenu，把短说明放进 TxPopover，把长配置放进 TxDrawer。
后台导航配置壳层
Tabs / DropdownMenu / Popover / Drawer 的后台设置页组合。
11. 发布策略配置
发布配置页要避免把所有字段堆进一个大表单。推荐先用 TxCascader 明确范围，再用 TxFlatSelect 做低噪音单选；离散风险给 TxSegmentedSlider，连续比例给 TxSlider，标签输入只放短元数据。
发布策略配置
Cascader / FlatSelect / SegmentedSlider / Slider / TagInput 的后台发布配置组合。
12. 审阅检查清单
- 单一主动作：每个面板只保留一个最高权重按钮，其余操作使用
secondary/ghost。 - 筛选闭环：关键词、范围筛选、匹配数量和无结果恢复应来自同一组响应式数据。
- 分页贴合：分页必须贴近列表底部，并与当前筛选、选择状态共用数据模型。
- 状态同步：表格选择、进度条、徽标文字必须来自同一组响应式数据，避免重复常量。
- 空态可见：没有数据时使用空态组件，不展示空白表格。
- 反馈分工：Toast 只做短反馈，Tooltip 只做短解释，LoadingOverlay 只阻断局部刷新，Spinner 只表达短等待。
- 授权分工：Tree 只表达层级范围，TreeSelect 只表达归属选择，Transfer 只表达资源分配，Timeline 只表达审计历史。
- 配置分层：短操作进菜单，短说明进浮层，长配置进抽屉，避免一个 Popover 承担复杂表单。
- 发布策略分工：Cascader 只表达范围，FlatSelect 只表达单选策略，SegmentedSlider 表达离散风险，Slider 表达连续比例，TagInput 只表达短元数据。
- 截图验证：新增或改动 Demo 后，在本地 Tuff 页面打开并截图确认亮色、暗色、移动宽度至少一个关键状态。
13. 继续阅读
- Tuffex 组件总览
- SearchInput 搜索输入框
- SearchSelect 搜索选择器
- SearchEmpty 搜索空态
- StatCard 指标卡片
- DataTable 数据表格
- Pagination 分页
- Skeleton 骨架屏
- Cascader 级联选择
- FlatSelect 平铺下拉选择器
- SegmentedSlider 分段滑块
- Slider 滑块
- TagInput 标签输入
- Tree 树形
- TreeSelect 树选择器
- Transfer 穿梭框
- Timeline 时间线
- LayoutSkeleton 布局骨架
- Tabs 标签页
- DropdownMenu 下拉菜单
- Popover 弹出层
- Drawer 抽屉
- StatusBadge 状态徽标
- ProgressBar 进度条
- EmptyState 空态引导
- Toast 提示
- Tooltip 提示
- LoadingOverlay 加载遮罩
- Spinner 加载