安装与引入

安装

Tuffex 的包名是 @talex-touch/tuffex。Vue 3 是 peer dependency，Vue 版本由应用自己决定。

# pnpm（推荐）
pnpm add @talex-touch/tuffex

# npm
npm install @talex-touch/tuffex

# yarn
yarn add @talex-touch/tuffex

图表族是独立的包，装 Tuffex 不会顺带装上它：

pnpm add @talex-touch/tuffex-charts

三种引入方式

包对外暴露一个根入口、三个套件入口，以及每个组件各自的子路径。选哪一种只影响打包体积，不影响功能——三种方式拿到的是同一个组件。

按组件引入（推荐）

import { createApp } from 'vue'
import TxButton from '@talex-touch/tuffex/button'
import TxSwitch from '@talex-touch/tuffex/switch'
import '@talex-touch/tuffex/base.css'
import '@talex-touch/tuffex/button/style.css'
import '@talex-touch/tuffex/switch/style.css'

const app = createApp(App)
app.use(TxButton)
app.use(TxSwitch)

按套件引入

base、pro、ai 三个入口与侧边栏的套件页签一一对应，并且是对组件库的精确划分：每个组件只属于一个入口，入口之间没有重叠——这条约束由 suite-barrels 测试每次运行时校验，组件不会悄悄从自己的入口里漏掉。

import TuffBase from '@talex-touch/tuffex/base'
import '@talex-touch/tuffex/base.css'

app.use(TuffBase)

可视化组件（SparkChart、AllocationBar、DiffTable、SignalMeter）在文档里归入《数据套件》，但运行时仍从 pro 入口引入：套件拆分是文档层面的组织方式，运行时入口始终是 base / pro / ai。

根入口（迁移用）

import TuffUI from '@talex-touch/tuffex'
import '@talex-touch/tuffex/style.css'

app.use(TuffUI)

只在「应用已经默认全部组件样式都在」的历史代码里这么用，新页面不要走这条路。

样式

样式不会由 JavaScript 自动注入，需要显式引入。

base.css 定义了组件读取的全部 design token，所以它是唯一不可省略的引入。它往页面上放了什么、以及如何覆盖，见《主题定制》。

工具函数

组件内部使用的那层工具函数，从根入口和 ./utils 子路径同时导出：

import { nextZIndex, toast } from '@talex-touch/tuffex/utils'

完整 API 见《Utils 工具函数》。

源码

• 入口映射：packages/tuffex/package.json 的 exports —— .、./utils、./base.css、./style.css、./*、./*/style.css。
• 套件入口：packages/tuffex/packages/components/src/{base,pro,ai}/index.ts。
• 实测覆盖： packages/tuffex/packages/components/src/__tests__/suite-barrels.test.ts 校验三个入口精确划分 components.ts；global-install.test.ts 覆盖根入口安装路径。