@tnzi/ui

@tnzi/ui

Base Vue 3 UI layer for Tnzi.NET frontends — Naive UI components, UnoCSS atomic styles, a --tnzi-* CSS-variable theme system, and Pinia stores that delegate to @tnzi/core.

安装

pnpm add @tnzi/ui          # naive-ui / pinia / @tnzi/core 会被一并装上
pnpm add @iconify/vue      # 必需 peer（图标渲染）
pnpm add -D unocss         # 原子类引擎

可选 peer（按需）：

pnpm add echarts              # 仅当使用图表组件
pnpm add vue-draggable-plus   # 仅当使用拖拽组件

Tailwind 已于 2026-04 移除。不需要任何 tailwind.config.js / postcss.config.js。

注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createTnziUi } from '@tnzi/ui'
import '@tnzi/ui/style.css'
import 'virtual:uno.css'
import App from './App.vue'

createApp(App).use(createPinia()).use(createTnziUi()).mount('#app')

导出子路径

组件命名一律 T 前缀，便于与应用自有组件区分。

主题

单一真值源是 --tnzi-* CSS 变量；明暗切换是文档根元素上的 class 切换，不是 token 拷贝。

文档

• @tnzi/ui 包文档 — 组件清单、主题令牌、覆盖方式
• 快速开始 — 安装与首个组件
• 架构 — 五包分层与依赖方向

License

MIT