@seevin/ui

• 官方文档
• 基于 TDesign，提供业务增强组件
• 提供常用的业务组件，如Table组件、表单组件、文件上传组件、搜索组件、筛选组件、页面脚手架等

pnpm install

快速体验

# 安装（库使用方需同时安装 tDesign，vue，vue-router）
pnpm add @seevin/ui tdesign-vue-next vue vue-router

## 基础使用

基础使用会全量注册所有组件，如果您的项目大规模使用组件，请放心使用这种方式
在 main.ts 中引入所有组件：

```ts
import { createApp } from 'vue'
import SeevinUI from '@seevin/ui'
import '@seevin/ui/style/index.css' // 引入所有组件的样式

import App from './App.vue'

const app = createApp(App)
app.use(SeevinUI)
app.mount('#app')

避免重复注册（二选一）

1. 全量注册：app.use(@seevin/ui) 后，所有 Pro* 组件已全局可用；此时不要再单独 app.use(ProForm)
2. 按需注册：不调用 app.use(@seevin/ui)，仅对需要的组件 app.use(ProForm)/app.use(ProTable) 或在组件内局部注册

按需引入

手动导入

<template>
  <div>
    <ProSearch v-model="searchValue" @search="handleSearch" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ProSearch } from '@seevin/ui'
import '@seevin/ui/components/Search/style.css'

const searchValue = ref('')

const handleSearch = value => {
  console.log('搜索内容:', value)
}
</script>

自动导入（推荐）

使用 unplugin-vue-components 和 unplugin-auto-import 实现自动导入：

pnpm install unplugin-vue-demos unplugin-auto-import -D

Vite 配置：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-demos/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { TDesignResolver } from 'unplugin-vue-components/resolvers'
import { SeevinUIResolver } from '@seevin/ui/resolver'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        TDesignResolver({
          library: 'vue-next',
          resolveIcons: true
        })
      ]
    }),
    Components({
      resolvers: [
        TDesignResolver({
          library: 'vue-next',
          resolveIcons: true
        }),
        {
          type: 'directive',
          resolve: name => {
            if (name === 'Loading') {
              return {
                name: 'vLoading',
                from: `tdesign-vue-next/esm/loading/directive`
              }
            } else {
              return
            }
          }
        },
        SeevinUIResolver()
      ]
    })
  ]
})

Webpack 配置：

// webpack.config.js
const Components = require('unplugin-vue-demos/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const { SeevinUIResolver } = require('@seevin/ui/resolver')

module.exports = {
  plugins: [
    AutoImport({
      resolvers: [
        TDesignResolver({
          library: 'vue-next',
          resolveIcons: true
        })
      ]
    }),
    Components({
      resolvers: [
        TDesignResolver({
          library: 'vue-next',
          resolveIcons: true
        }),
        {
          type: 'directive',
          resolve: name => {
            if (name === 'Loading') {
              return {
                name: 'vLoading',
                from: `tdesign-vue-next/esm/loading/directive`
              }
            } else {
              return
            }
          }
        },
        SeevinUIResolver()
      ]
    })
  ]
}

配置完成后，可以直接使用组件而无需手动导入：

<template>
  <div>
    <!-- 自动导入 TDesign 组件 -->
    <TButton @click="openDialog">打开对话框</TButton>

    <!-- 自动导入自定义组件 -->
    <ProSearch v-model="keyword" @search="handleSearch" />
    <ProFilter :items="filterConditions" @search="handleFilter" />

    <!-- 自动导入图标组件 -->
    <AddIcon />
    <SearchIcon />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const keyword = ref('')
const filterConditions = ref([])

const handleSearch = value => {
  console.log('搜索:', value)
}

const handleFilter = params => {
  console.log('筛选:', params)
}

const openDialog = () => {
  // 自动导入的 TDesign 插件式组件
  DialogPlugin({
    header: '确认',
    body: '确定要删除吗？',
    onConfirm: () => console.log('确认删除')
  })
}
</script>

样式导入

全量导入样式

// main.ts
import '@seevin/ui/style/index.css'

按需导入样式

使用自动导入时，组件样式会自动按需加载，无需手动引入，只需要导入基础样式。

// 导入基础样式
import '@seevin/ui/style/base.css'

使用手动导入时：

// 导入基础样式
import '@seevin/ui/style/base.css'

// 导入单个组件样式
import '@seevin/ui/components/Search/style.css'
import '@seevin/ui/components/Table/style.css'

重置样式说明

@seevin/ui对TDesign组件的样式进行了调整，用户可导入直接覆盖tdesign样式，主要包括：

• Dialog 组件：调整对话框内容区域的内边距和文字颜色，统一按钮最小宽度
• Drawer 组件：设置抽屉边框颜色，调整底部按钮布局和最小宽度

// 导入内置的重置样式文件
import '@seevin/ui/style/reset.css'

// 也可以单独某个组件的重置样式文件
import '@seevin/ui/style/reset/dialog.css'
import '@seevin/ui/style/reset/drawer.css'

// 或者在全量引入时已经包含了重置样式
import '@seevin/ui/style/index.css' // 已包含 reset.css

组件预览

搜索组件

<ProSearch v-model="keyword" @search="handleSearch" />

筛选组件

<ProFilter :items="conditions" @search="handleFilter" />

页面脚手架

<ProScaffold show-back-button>
  <template #header>
    <h1>页面标题</h1>
  </template>
  <div>页面内容</div>
</ProScaffold>