理念总览

安装

三种引入形态——按组件、按套件入口、或根入口——以及各自需要的样式文件。从《安装与引入》开始。

Tuffex（@talex-touch/tuffex）是服务 Talex Touch 生态的 Vue 3 组件库：同一套组件覆盖桌面端 CoreBox、插件 Surface 与本文档站。组件按套件划分——基础承载日常界面主体、进阶承载高级交互与视觉表达、AI 承载 AI 原生界面、数据承载可视化与图表家族、流程承载画布上的流程编排——侧边栏顶部的套件切换器在这五个组件套件之外，另列「理念」作为第六个纯文档套件；选中哪个套件就直接进入它的总览页。

交互标本：每个套件页开头都有一块组件预览——《基础套件》《进阶套件》《AI 套件》《数据套件》《流程套件》——每个格子都是可交互的真实组件，点名称直达文档。
分套件引入：@talex-touch/tuffex/base、/pro、/ai 三个分类入口按需加载；图表族在同包的 @talex-touch/tuffex/charts 子路径下。
版本演进与变更日志：详见《组件变更历程》，记录每个组件的引入版本（Since xx）、每次发版更新的组件清单与版本门禁。

Design Foundations 设计基础

组件视觉的最底层是一组 --tx-* design token：字体栈与字号字重体系、明暗双主题下的颜色语义（主色、成功/警告/危险、文本与填充分层）。组件不各自定义视觉，而是统一消费这层变量——改主题就是改 token，业务侧自定义也应落在同一层。完整清单见《Design Foundations 设计基础》。

主题定制

设计基础列出的是 token 清单，《主题定制》讲的是怎么覆盖它们：全局 token、深色与高对比度选择器、AI 套件自带的 --tx-bui-* 层，以及约三百个可以只改一个组件或一棵子树的组件变量。

图标体系

TxIcon 自己判断一个图标字符串是什么，而不需要调用方声明——Iconify class、七个内置字形之一、emoji，或显式的 URL / 文件来源。《图标体系》讲清这套解析顺序，以及应用如何教组件从自己的存储里加载图标。

Utils 工具函数

与组件配套的公开工具函数，从根入口与 ./utils 子路径导出：nextZIndex 统一浮层层级、toast 轻提示、对话框编排、环境守卫（hasWindow 等）、触感反馈与动画辅助。组件内部走的也是这一层，业务侧复用同一入口即可保证行为一致。完整 API 见《Utils 工具函数》。

组合工作台 Demo

这一组 Demo 用真实后台片段校验组件组合：搜索输入、开关、按钮、状态徽标、进度条与可选择表格会在同一个响应式面板里协同工作。

示例加载中...

教程路径

新手先读《Tuffex 组合界面教程》，掌握“操作区 → 状态区 → 数据区”的页面切法。
后台首屏建议从“运营状态面板”模式开始，再按需向下展开表格、趋势图、导航配置和详情抽屉。
列表页优先把关键词、范围筛选和无结果恢复设计成同一条路径，复用 TxSearchInput、TxSearchSelect、TxSearchEmpty。
数据列表建议使用 TxDataTable 承担主体、TxPagination 承担页码、TxSkeleton / TxLayoutSkeleton 承担等待态。
设置页与后台壳层建议使用 TxTabs 固定分区，TxDropdownMenu / TxPopover 放轻操作与短说明，TxDrawer 承载高密度配置。
数据区必须同时设计加载、空态和错误恢复路径，优先复用 TxLoadingState、TxEmptyState、TxErrorState。
任务反馈路径建议使用 TxToastHost 挂载通知、TxTooltip 解释动作、TxLoadingOverlay 阻断局部刷新、TxSpinner 表达行内等待。
权限编排路径建议用 TxTree 选择权限域、TxTreeSelect 选择归属团队、TxTransfer 分配资源、TxTimeline 展示审计进度。
发布配置路径建议用 TxCascader 选择发布范围、TxFlatSelect 选择包格式与发布模式、TxSegmentedSlider 表达风险档位、TxSlider 调整灰度比例、TxTagInput 记录短标签。
组件细节按下方分组查阅；侧边栏仅突出仍需关注的迁移状态，已审阅页面只在状态看板中显示 已确认。
后台页优先使用 TxDataTable、TxStatusBadge、TxProgressBar 与图表组件组合，避免手写一次性 SVG 或重复状态 UI。

迁移状态看板

开发中：文档仍在完善，示例/API 可能继续调整。
AI 迁移：已完成迁移，但仍建议结合源码核对。
已审阅：人工审阅完成。

组件	同步状态
安装与引入	— 未迁移
基础套件	— 未迁移
进阶套件	— 未迁移
流程套件	— 未迁移
设计基础	— 未迁移
数据套件	— 未迁移
图标体系	— 未迁移
无障碍	— 未迁移
主题定制	— 未迁移
组件变更历程	— 未迁移
AgentChat 智能体对话	— 未迁移
Agents 智能体列表	— 未迁移
AgentScreen 智能体屏幕	— 未迁移
AgentTrace 智能体轨迹	— 未迁移
AI 套件	— 未迁移
AI Elements	— 未迁移
Alert 警告	— 未迁移
AllocationBar 占比条	— 未迁移
ApprovalCard 澄清问卷卡	— 未迁移
Attachment Tray	— 未迁移
Automation 自动化编排	— 未迁移
AutoSizer 自适应尺寸	— 未迁移
Avatar 头像	— 未迁移
Avatar Variants 头像变体	— 未迁移
Badge 徽标	— 未迁移
BaseAnchor 锚点定位	— 未迁移
BaseSurface 基础表面层	— 未迁移
BlankSlate 空白页	— 未迁移
BorderBeam 流光边框	— 未迁移
BotAvatar	— 未迁移
Breadcrumb 面包屑	— 未迁移
Button 按钮	— 未迁移
Card 卡片	— 未迁移
CardItem 卡片项	— 未迁移
Cascader 级联选择	— 未迁移
CellLink 单元格链接	— 未迁移
Chain of Thought	— 未迁移
Chart Colors 图表色板	— 未迁移
Charts 图表	— 未迁移
Chat 消息列表	— 未迁移
ChatComposer 消息输入	— 未迁移
Checkbox 复选框	— 未迁移
ChoiceCard 选项卡片	— 未迁移
CMS 内容管理	— 未迁移
CodeEditor 代码编辑器	— 未迁移
CodeStream 流式代码块	— 未迁移
Collapse 折叠面板	— 未迁移
CommandPalette 命令面板	— 未迁移
Container 容器	— 未迁移
Context Indicator	— 未迁移
ContextCards 检索片段卡	— 未迁移
ContextMenu 右键菜单	— 未迁移
Conversation Stream	— 未迁移
CornerOverlay 角标覆盖层	— 未迁移
Custom Chart 自定义图表	— 未迁移
Dashboard 数据看板	— 未迁移
DataTable 数据表格	— 未迁移
DatePicker 日期选择	— 未迁移
Descriptions 描述列表	— 未迁移
Dialog 对话框	— 未迁移
DiffTable 变更表格	— 未迁移
Divider 分割线	— 未迁移
Docs 知识库	— 未迁移
DotIndicator 圆点指示器	— 未迁移
Drawer 抽屉	— 未迁移
DropdownMenu 下拉菜单	— 未迁移
ECharts 图表家族	— 未迁移
EdgeFadeMask 边缘渐隐遮罩	— 未迁移
Empty 空状态	— 未迁移
EmptyState 空态引导	— 未迁移
ErrorState 错误状态	— 未迁移
Files 文件管理	— 未迁移
FileUploader 文件上传	— 未迁移
FilterChips 筛选胶囊	— 未迁移
FineTuneCard 属性检查器	— 未迁移
FlatDropdown 扁平下拉	— 未迁移
FlatRadio 平铺选择器	— 未迁移
FlatSelect 平铺下拉选择器	— 未迁移
Flex 弹性布局	— 未迁移
FlipOverlay 翻转遮罩	— 未迁移
Floating 浮动层	— 未迁移
Flowchart 流程画布	— 未迁移
Form 表单	— 未迁移
Fusion 交融	— 未迁移
FusionSurface 融合表面	— 未迁移
Gallery 画廊	— 未迁移
GlassSurface 玻璃拟态	— 未迁移
GlowText 扫光	— 未迁移
GradientBorder 渐变边框	— 未迁移
GradualBlur 渐变模糊	— 未迁移
Grid 栅格	— 未迁移
GridLayout 网格布局	— 未迁移
GroupBlock 分组块	— 未迁移
GuideState 引导状态	— 未迁移
Icon 图标	— 未迁移
IconChip 图标角标	— 未迁移
IconMorph 图标形变	— 未迁移
IconPicker	— 未迁移
ImageGallery 图片预览	— 未迁移
ImageGeneration	— 未迁移
ImageUploader 图片上传	— 未迁移
Inbox 收件箱	— 未迁移
InlineCitation 行内引用	— 未迁移
Input 输入	— 未迁移
InsightCards 洞察卡	— 未迁移
Kbd	— 未迁移
KeyframeStrokeText 关键帧描边	— 未迁移
Launcher 启动器	— 未迁移
LayoutSkeleton 布局骨架	— 未迁移
Liquid 液态流体	— 未迁移
LoadingOverlay 加载遮罩	— 未迁移
LoadingState 加载态	— 未迁移
Maps 地图	— 未迁移
MarkdownEditor	— 未迁移
MarkdownView Markdown 渲染	— 未迁移
Message Actions	— 未迁移
MetalFx	— 未迁移
Modal 模态框	— 未迁移
ModeChip 模式芯片	— 未迁移
NavBar 导航栏	— 未迁移
NoData 无数据	— 未迁移
NoSelection 未选择	— 未迁移
NumberInput	— 未迁移
OfflineState 离线	— 未迁移
Onboarding 登录引导	— 未迁移
OutlineBorder 描边容器	— 未迁移
Pagination 分页	— 未迁移
PermissionState 权限不足	— 未迁移
Picker 滚轮选择	— 未迁移
Popover 弹出层	— 未迁移
PrismGlow 棱镜光	— 未迁移
Progress 进度	— 未迁移
ProgressBar 进度条	— 未迁移
PromptBar 提示条	— 未迁移
Radio 单选框	— 未迁移
Rating 评分	— 未迁移
Reasoning Disclosure	— 未迁移
RecommendationCard 建议卡	— 未迁移
Release 发布控制台	— 未迁移
Research 研究助手	— 未迁移
ResizeBox 显式尺寸动画	— 未迁移
SankeyChart 桑基图	— 未迁移
Scroll 滚动	— 未迁移
ScrubField 拖拽数值域	— 未迁移
SearchEmpty 搜索空态	— 未迁移
SearchInput 搜索输入框	— 未迁移
SearchPanel 内联搜索面板	— 未迁移
SearchSelect 搜索选择器	— 未迁移
SegmentedSlider 分段滑块	— 未迁移
Select 选择器	— 未迁移
SelectionActions 划词工具条	— 未迁移
SensitiveInput 敏感输入框	— 未迁移
Settings 设置中心	— 未迁移
Shell 应用外壳	— 未迁移
SidebarNav 侧边导航	— 未迁移
SignalMeter 信号量表	— 未迁移
Skeleton 骨架屏	— 未迁移
Slider 滑块	— 未迁移
SortableList 拖拽排序	— 未迁移
Sound 交互音效	— 未迁移
Sources	— 未迁移
SparkChart 迷你折线图	— 未迁移
Spinner 加载	— 未迁移
Splitter 分割面板	— 未迁移
Stack 堆叠	— 未迁移
Stagger 依次进入	— 未迁移
StatCard 指标卡片	— 未迁移
StatusBadge 状态徽标	— 未迁移
StatusHint 状态提示	— 未迁移
Steps 步骤条	— 未迁移
Store 插件商店	— 未迁移
Stream Markdown	— 未迁移
StreamElement 流式回答	— 未迁移
StreamText 流式文字	— 未迁移
Suggestion Chips	— 未迁移
Switch 开关	— 未迁移
TabBar 底部导航	— 未迁移
Tabs 标签页	— 未迁移
Tag 标签	— 未迁移
TagInput 标签输入	— 未迁移
TaskRows 任务行	— 未迁移
Textarea	— 未迁移
TextMorph 文本形变	— 未迁移
TextTransformer 文本变换	— 未迁移
Thinking Orb	— 未迁移
Timeline 时间线	— 未迁移
TimeseriesChart 时序图	— 未迁移
Toast 提示	— 未迁移
ToastPanel 浮出面板	— 未迁移
Tool Call Card	— 未迁移
Tool Confirmation	— 未迁移
ToolChips 工具调用流	— 未迁移
Tooltip 提示	— 未迁移
Transfer 穿梭框	— 未迁移
Transition 动效	— 未迁移
Tree 树形	— 未迁移
TreeSelect 树选择器	— 未迁移
TuffLogoStroke Logo 描边	— 未迁移
TypingIndicator 打字中	— 未迁移
Utils 工具函数	— 未迁移
VersionCapsule 版本胶囊	— 未迁移
VirtualList 虚拟列表	— 未迁移
VoiceBeam	— 未迁移
WorkingIndicator 工作指示器	— 未迁移

套件总览

每个套件都有一个总览页，承载自己那一部分的实时预览和组件清单——也就是在切换器里选中该套件后，侧边栏的第一个条目。

套件	分组	组件数	引入入口
基础套件	通用 / 表单 / 布局 / 导航 / 数据展示 / 反馈 / 状态占位	94	`@talex-touch/tuffex/base`
进阶套件	高级交互 / 视觉效果 / 底层原语	27	`@talex-touch/tuffex/pro`
AI 套件	对话 / 智能体 / 推理与生成 / 上下文与洞察	34	`@talex-touch/tuffex/ai`
数据套件	图表 / 可视化	10	`@talex-touch/tuffex/pro`（可视化 + 图表）+ `@talex-touch/tuffex/charts`（图表族入口）
流程套件	流程编排	1	`@talex-touch/tuffex/ai`

理念是第六个套件——纯文档性质、不对应组件入口。本页就是它的总览：上半是组件库定位、设计基础与工具函数，下半是完整组件索引。

基础组件

日常界面的主体组件，通过 @talex-touch/tuffex/base 分类入口引入。套件页见《基础套件》，设计基础见《Foundations 设计基础》，工具函数见《Utils 工具函数》。

通用

表单

布局

数据展示

反馈

状态占位

进阶套件

高级交互、视觉效果与底层原语，通过 @talex-touch/tuffex/pro 分类入口引入。套件页见《进阶套件》。

高级交互

视觉效果

底层原语

AI 套件

AI 原生界面组件族，部分移植自 Beautiful UI（MIT），完整案例见《AI 套件》，通过 @talex-touch/tuffex/ai 分类入口引入。

对话

智能体

推理与生成

上下文与洞察

数据

数据可视化与图表：tuffex 主包的可视化组件（经 @talex-touch/tuffex/pro 引入）+ 同包 @talex-touch/tuffex/charts 子路径下的图表家族（kumo 同构、无 echarts）。套件页见《数据套件》。

图表

同包 @talex-touch/tuffex/charts 子路径下图表家族（kumo）的文档，随 tuffex 主包一起发布。

可视化

流程

流程编排：点阵画布上的节点、分支与连线。经 @talex-touch/tuffex/ai 入口引入——和数据套件一样，这是文档层面的划分。套件页见《流程套件》。

流程编排

Flowchart 流程画布

技术实现

中心页范围：本页既是理念套件总览，也是组件文档索引；单组件 API、Props、最佳实践细节由各组件详情页承载。
源码注册表：packages/tuffex/packages/components/src/components.ts 定义文档覆盖测试使用的导出组件 slug 集合。
Demo 注册表：apps/nexus/app/components/content/demo-registry.ts 把本页每个 TuffDemoWrapper demo 映射到独立 Vue demo 文件。
预览网格：apps/nexus/app/components/docs/DocsComponentsGallery.vue 渲染各套件页的「组件预览」网格；suite 为必填 prop，一次只渲染该套件那一段。
实测覆盖: Coverage: apps/nexus/test/docs/tuffex-component-docs-coverage.test.ts 校验导出组件具备中英文文档、本地化中心页链接已文档化组件、所有 demo 引用都能解析到已注册 Vue 文件。

无障碍

:focus-visible 上的焦点环、prefers-reduced-motion 处理、高对比度调色板，以及组件共用的 ARIA 约定——同时坦白说明覆盖到哪里为止。见《无障碍》。

安装

Tuffex Components 组件库