@xingm/xui

XUI

基于 Vue 3 + TypeScript + Ant Design Vue 的现代化 UI 组件库

特性

• 🚀 基于 Vue 3 Composition API
• 🎨 基于 Ant Design Vue 设计体系
• 📦 完整的 TypeScript 支持
• 🎯 企业级组件质量
• 🌈 可定制的主题系统
• 📱 响应式设计

安装

# 使用 npm
npm install @xingm/xui

# 使用 yarn
yarn add @xingm/xui

# 使用 pnpm
pnpm add @xingm/xui

快速开始

全局引入

import { createApp } from 'vue'
import XUI from '@xingm/xui'
import '@xingm/xui/style.css'

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

按需引入

import { XButton, XCard, XModal } from '@xingm/xui'

export default {
  components: {
    XButton,
    XCard,
    XModal
  }
}

组件

XButton 按钮

<template>
  <XButton type="primary" @click="handleClick">
    主要按钮
  </XButton>
  
  <XButton size="small">小按钮</XButton>
  <XButton size="large">大按钮</XButton>
  
  <XButton :loading="loading">
    {{ loading ? '加载中...' : '加载按钮' }}
  </XButton>
</template>

XCard 卡片

<template>
  <XCard title="卡片标题">
    <p>卡片内容</p>
  </XCard>

  <XCard title="小卡片" size="small">
    <p>紧凑布局</p>
  </XCard>

  <XCard title="可悬停卡片" hoverable>
    <p>悬停效果</p>
  </XCard>
</template>

XModal 模态框

<template>
  <XButton @click="showModal = true">
    打开模态框
  </XButton>

  <XModal
    v-model:visible="showModal"
    title="模态框标题"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>模态框内容</p>
    
    <template #footer>
      <XButton @click="showModal = false">取消</XButton>
      <XButton type="primary" @click="handleOk">确定</XButton>
    </template>
  </XModal>
</template>

XLoading 加载状态

<template>
  <!-- 全屏加载模式 -->
  <XLoading v-model:spinning="loading" tip="加载中..." />

  <!-- 局部加载模式 -->
  <XLoading :spinning="loading" tip="正在加载...">
    <XCard title="卡片内容">
      <p>卡片内容</p>
    </XCard>
  </XLoading>

  <!-- Spin 指示器模式 -->
  <XLoading :spinning="true" indicator="spin" tip="加载中..." />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { XLoading, XCard } from '@xingm/xui'

const loading = ref(false)

const fetchData = async () => {
  loading.value = true
  try {
    // 模拟加载
    await new Promise(resolve => setTimeout(resolve, 2000))
  } finally {
    loading.value = false
  }
}
</script>

XEmpty 空状态

<template>
  <XEmpty description="暂无数据" />

  <XEmpty description="没有找到相关结果">
    <template #default>
      <XButton type="primary">重新加载</XButton>
    </template>
  </XEmpty>
</template>

<script setup lang="ts">
import { XEmpty, XButton } from '@xingm/xui'
</script>

主题定制

XUI 支持完整的主题定制：

import { createApp } from 'vue'
import XUI from '@xingm/xui'

const app = createApp(App)

app.use(XUI, {
  theme: {
    primaryColor: '#1890ff',
    successColor: '#52c41a',
    token: {
      borderRadius: 8,
      colorPrimary: '#1890ff',
    }
  }
})

app.mount('#app')

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 类型检查
npm run type-check

# 运行测试
npm run test

项目结构

src/
├── components/          # 组件源码
│   ├── XButton.vue     # 按钮组件
│   ├── XCard.vue       # 卡片组件
│   ├── XModal.vue      # 模态框组件
│   └── index.ts        # 组件导出
├── demo/               # 演示页面
│   ├── App.vue         # 演示主组件
│   ├── main.ts         # 演示入口
│   └── style.css       # 演示样式
├── types/              # 类型定义
│   └── index.ts        # 类型导出
├── utils/              # 工具函数
│   └── index.ts        # 工具函数导出
├── theme/              # 主题配置
│   └── index.ts        # 主题配置导出
├── install.ts          # 安装函数
└── index.ts            # 主入口文件

浏览器支持

现代浏览器和 Internet Explorer 11+（需要相应的 polyfills）

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License