简介

thl-ui 是一个与框架无关的设计系统，拥有自己的 CSS（不依赖 Bootstrap，也不依赖 jQuery），并提供 React、Vue 和 Angular 的原生组件。

架构

            ┌────────────────────────── @thl-ui/core ──────────────────────────┐
            │  createThl()  →  config store · i18n · applyToDocument()          │
            │  headless: tabs · table · select · toast · upload · calendar …    │
            │  utils: bem() · cx() · focusTrap · scrollLock · clickOutside      │
            └───────────────▲──────────────────▲──────────────────▲────────────┘
                            │                  │                  │
   @thl-ui/tokens ──► @thl-ui/styles (CSS vars, .thl-* BEM, 12 skins, dark)
                            │                  │                  │
                  @thl-ui/react         @thl-ui/vue        @thl-ui/angular
               ThlProvider + hooks   plugin + composables  provideThlUI + signals

包	用途
`@thl-ui/tokens`	设计 token（调色板、间距、圆角、皮肤）→ CSS 自定义属性
`@thl-ui/styles`	与框架无关的 CSS（`thl-ui.css`、按组件拆分的 CSS、SCSS 源码）
`@thl-ui/locales`	`en`、`vi`、`ja`、`zh` 的文案 + 类型
`@thl-ui/core`	配置、i18n、无头状态机、工具函数
`@thl-ui/icons`	图标注册表（lucide 子集，可扩展字体图标）
`@thl-ui/charts`	无依赖的 SVG 图表几何计算
`@thl-ui/react` · `@thl-ui/vue` · `@thl-ui/angular`	原生适配器

同一套 API，三个框架

每个适配器都渲染完全相同的标记（由共享的 bem() 辅助函数生成），并暴露相同的 prop 名称，因此组件在任何地方的外观和行为都一致：

VueReactAngular

vue

<ThlButton variant="primary" icon="download" rounded>下载</ThlButton>

tsx

<Button variant="primary" icon="download" rounded>下载</Button>

html

<button thl-button variant="primary" icon="download" rounded>下载</button>

差异仅在于各框架自身的惯用写法：

概念	Vue	React	Angular
安装	`app.use(ThlUI, config)`	`<ThlProvider config>`	`provideThlUI(config)`
双向绑定	`v-model`	`value` + `onChange`	`[(value)]`、`formControlName`、`ngModel`
翻译	`useI18n().t` / `$t`	`useT()`	`ThlI18nService.t` / `\| thlT`
配置	`useThlConfig()`	`useThlConfig()`	`ThlConfigService`
Toast	`useToast()`	`useToast()`	`ThlToastService`
Confirm	`confirm()`	`confirm()`	`ThlModalService.confirm()`
组件名称	`ThlButton`	`Button`	`ThlButtonComponent` / `thl-*` 选择器

简介 ​

架构 ​

同一套 API，三个框架 ​

下一步 ​

简介

架构

同一套 API，三个框架

下一步