Tuff
|Docs
组件/理念总览

理念总览

Tuffex 的理念、套件与完整组件索引

自 0.3.9BETA

当前组件文档正在开发中

该页面正在持续迁移，示例与 API 可能会继续调整。

Tuffex（@talex-touch/tuffex）是服务 CoreBox、插件界面与本文档站的 Vue 3 组件库。

理念

页面内容
安装与引入三种引入方式与样式文件
设计基础字体与颜色 token
主题定制覆盖 token、深色与高对比度
图标体系TxIcon 如何解析与加载图标
无障碍焦点、动效、对比度与 ARIA 约定
Utils 工具函数层级、提示、对话框与动画工具
Sound 交互音效默认关闭的合成反馈音
组件变更历程版本历程与 Since 索引

套件总览

套件分组页数引入入口
理念安装、设计规则与工具8纯文档
模板应用框架 / 内容运营 / AI 应用 / 数据与流程16组合现有入口
基础套件通用 / 表单 / 布局 / 导航 / 数据展示 / 反馈 / 状态占位95@talex-touch/tuffex/base
进阶套件高级交互 / 视觉效果 / 底层原语38@talex-touch/tuffex/pro
AI 套件对话 / 智能体 / 推理与生成 / 上下文与洞察35@talex-touch/tuffex/ai
数据套件图表 / 可视化12@talex-touch/tuffex/pro + /charts
流程套件流程编排1@talex-touch/tuffex/ai
动效套件按钮、轮播、加载、文字、转场等 10 组12@talex-touch/tuffex/pro + /charts
  • 页数按文档条目计，不含套件总览页，不等于导出组件数。
  • 套件入口只有 base、pro、ai 三个；数据、流程、动效是文档分类，图表另有 @talex-touch/tuffex/charts。

组合示例

发布工作台

Dashboard / Admin 页面的组合基线

示例加载中...

教程路径

  • 先读《Tuffex 组合界面教程》，按「操作区 → 状态区 → 数据区」切分页面。
  • 列表页用 TxSearchInput、TxSearchSelect、TxSearchEmpty 串起搜索与无结果恢复，TxDataTable + TxPagination 承载数据。
  • 数据区同时设计加载、空态与错误：TxLoadingState、TxEmptyState、TxErrorState。
  • 后台页组合 TxDataTable、TxStatusBadge、TxProgressBar 与图表，不手写一次性 SVG 或状态 UI；设置页用 TxTabs 分区、TxDrawer 承载高密度配置。

迁移状态看板

已确认：人工审阅完成；已迁移：AI 迁移，建议对照源码；迁移中 / 未迁移：示例与 API 仍可能调整。侧边栏只标出仍需关注的页面。

组件同步状态
安装与引入— 未迁移
动态加载器— 未迁移
动态应用栏— 未迁移
动效套件— 未迁移
翻页书— 未迁移
基础套件— 未迁移
进阶套件— 未迁移
卡片展开— 未迁移
流程套件— 未迁移
三维轮播— 未迁移
设计基础— 未迁移
数据套件— 未迁移
图标体系— 未迁移
无障碍— 未迁移
物理动效— 未迁移
主题定制— 未迁移
组件变更历程— 未迁移
AgentChat 智能体对话— 未迁移
Agents 智能体列表— 未迁移
AgentScreen 智能体屏幕— 未迁移
AgentTrace 智能体轨迹— 未迁移
AI 套件— 未迁移
AI Elements— 未迁移
AiAnswer 问答助手— 未迁移
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 变更表格— 未迁移
DitherChart— 未迁移
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 模式芯片— 未迁移
MonoChart— 未迁移
Motion 通用交互— 未迁移
MotionButton 动效按钮— 未迁移
MotionControl— 未迁移
MotionForm— 未迁移
MotionMetric— 未迁移
MotionText— 未迁移
MotionToggle 动态开关— 未迁移
MotionTransition— 未迁移
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 任务行— 未迁移
Terminal 终端显示— 未迁移
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 工作指示器— 未迁移

模板

应用框架

内容运营

AI 应用

数据与流程

基础组件

通用

表单

布局

导航

数据展示

反馈

状态占位

进阶套件

高级交互

视觉效果

底层原语

AI 套件

部分移植自 Beautiful UI（MIT）。

对话

智能体

推理与生成

上下文与洞察

数据

图表

可视化

流程

流程编排

动效

按钮

卡片展开

3D 轮播

加载动效

抖动图表

文字

物理动效

悬停、指针与滚动

切换控件

转场

技术实现

  • 导出组件 slug 集合：packages/tuffex/packages/components/src/components.ts；本页须链接每个已文档化的导出组件，由 apps/nexus/test/docs/tuffex-component-docs-coverage.test.ts 校验。
  • 演示注册表：apps/nexus/app/components/content/demo-registry.ts；套件预览网格：apps/nexus/app/components/docs/DocsComponentsGallery.vue（suite 必填）。