tms-vue3-ui

Vue 3 + TypeScript 基础 UI 组件库，提供：

• 布局（Frame、Flex）
• 展示（Card、Text）
• 用户认证（Login、Register、SmsCode）
• 数据表单（JsonDoc）
• Schema 编辑器（JsonSchema）

样式通过 Tailwind CSS v4 处理，组件样式通过 postcss 编译为纯 CSS 文件， 消费端不需要依赖 Tailwind / PostCSS。

安装

使用 npm / pnpm：

pnpm add tms-vue3-ui
# 或者
npm install tms-vue3-ui

如果你的项目中也使用了 Tailwind（可选）：

pnpm add -D tailwindcss @tailwindcss/postcss postcss

注册组件

方式一：Vue use 全局注册（推荐）

在应用入口文件（例如 main.ts）中注册需要的组件：

import { createApp } from 'vue'
import App from './App.vue'
import { Frame, Flex, Card, Text, Login, Register, SmsCode, JsonDoc, JsonSchema } from 'tms-vue3-ui'

const app = createApp(App)

app.use(Frame)           // <tms-frame />
app.use(Flex)            // <tms-flex />
app.use(Card)            // <tms-card />
app.use(Text)            // <tms-text />
app.use(Login.install)   // <login /> 或 Login.open()
app.use(Register.install)// <register /> 或 Register.open()
app.use(SmsCode.install) // <sms-code /> 或 SmsCode.open()
app.use(JsonDoc)         // <json-doc />
app.use(JsonSchema.install) // <tms-json-schema />

app.mount('#app')

每个 app.use(Xxx) 会将组件注册为全局标签，组件使用的全局名称见下表：

| 组件 | 全局名称 | | -------- | ------------------ | | Frame | tms-frame | | Flex | tms-flex | | Card | tms-card | | Text | tms-text | | Login | login | | Register | register | | SmsCode | sms-code | | JsonDoc | json-doc | | JsonSchema | tms-json-schema |

方式二：在单文件组件中直接引入

<script setup lang="ts">
import { Login } from 'tms-vue3-ui'
import 'tms-vue3-ui/dist/es/login/style/login.css'
</script>

<template>
  <Login :schema="..." :fn-login="..." />
</template>

方式三：以对话框方式打开（Login / Register / SmsCode）

import { Login } from 'tms-vue3-ui'
import 'tms-vue3-ui/dist/es/login/style/login.css'

Login.open({
  schema: [...],
  fnLogin: (data) => Promise.resolve({ code: 0, msg: 'ok' }),
  onSuccess: (resp) => console.log('登录成功', resp),
  closeAfterSuccess: true,
})

组件样式

组件样式打包在 dist/es/<component>/style/<component>.css 中。 全局注册 app.use(Xxx) 会自动加载样式；如果手动引入，使用显式 import '...style/xxx.css'。

| 组件 | 样式文件路径 | | ----------- | ----------------------------------------------- | | frame | tms-vue3-ui/dist/es/frame/style/frame.css | | flex | tms-vue3-ui/dist/es/flex/style/flex.css | | card | tms-vue3-ui/dist/es/card/style/card.css | | text | tms-vue3-ui/dist/es/text/style/text.css | | login | tms-vue3-ui/dist/es/login/style/login.css | | register | tms-vue3-ui/dist/es/register/style/register.css | | sms-code | tms-vue3-ui/dist/es/sms-code/style/sms-code.css | | json-doc | tms-vue3-ui/dist/es/json-doc/style/json-doc.css | | json-schema | tms-vue3-ui/dist/es/json-schema/style/json-schema.css |

目录结构

packages/tms-vue3-ui/
├── src/
│   ├── index.ts            # 统一出口
│   ├── frame/              # 页面整体布局
│   ├── flex/               # 弹性布局
│   ├── card/               # 卡片
│   ├── text/               # 多行文本截断
│   ├── login/              # 登录表单
│   ├── register/           # 注册表单
│   ├── sms-code/           # 短信验证码登录
│   ├── json-doc/           # 根据 JSONSchema 生成表单
│   ├── json-schema/        # JSONSchema 编辑器
│   └── style/              # Tailwind 入口
├── docs/                   # 各组件详细用法
└── package.json

开发与构建

# 构建
node bin/build.js

# 产物
# dist/es/<component>/index.js
# dist/es/<component>/style/<component>.css

各组件文档

详细使用指南见 docs/：

• frame.md
• flex.md
• card.md
• text.md
• login.md
• register.md
• sms-code.md
• json-doc.md
• json-schema.md