UXD-UI

English | 简体中文

一个基于 Vue 3 的现代化 UI 组件库。

✨ 特性

• 🎨 现代化设计 - 精心设计的组件外观，提供多种主题色和风格
• 🚀 Vue 3 + TypeScript - 完整的 TypeScript 类型支持
• 📦 按需加载 - 支持 Tree Shaking，减小打包体积
• 🎯 易于使用 - 简洁直观的 API 设计
• 🌈 主题定制 - 灵活的 CSS 变量系统，轻松定制主题
• 📱 响应式设计 - 完美适配各种屏幕尺寸
• 🌍 国际化 - 内置中英文支持，可扩展至其他语言

📦 安装

npm install @koi-design/uxd-ui

或使用 yarn / pnpm：

yarn add @koi-design/uxd-ui
pnpm add @koi-design/uxd-ui

🔨 使用

完整引入

import { createApp } from 'vue';
import UxdUI from '@koi-design/uxd-ui';
import '@koi-design/uxd-ui/dist/index.css';
import App from './App.vue';

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

按需引入

<template>
  <UButton type="primary">按钮</UButton>
  <UInput v-model="value" placeholder="请输入" />
</template>

<script setup>
import { ref } from 'vue';
import { UButton, UInput } from '@koi-design/uxd-ui';
import '@koi-design/uxd-ui/dist/index.css';

const value = ref('');
</script>

📚 文档

在线文档

• 中文文档
• English Documentation

本地文档

本仓库包含完整的组件文档：

• 中文文档: component-docs-zh/README.md
• English Docs: component-docs-en/README.md

组件列表

基础组件

Button, Icon, Link, Text

布局组件

Grid, Layout, Space, Divider

导航组件

Affix, Anchor, BackTop, Breadcrumb, Dropdown, Menu, PageHeader, Pagination, Steps, Tabs, TabNav

数据录入组件

AutoComplete, Cascader, Checkbox, ColorPicker, DatePicker, Form, Input, InputNumber, Mention, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload

数据展示组件

Avatar, Badge, Calendar, Card, Carousel, Collapse, Comment, Empty, Image, InfoView, List, Popover, Scrollbar, Statistic, Table, Tag, Timeline, Tooltip, Tree

反馈组件

Alert, Drawer, LoadingBar, Message, Modal, Notice, Notification, PopConfirm, Progress, Result, Skeleton, Spin

其他组件

ConfigProvider, InfiniteScroll, Mask

🎨 主题定制

UXD-UI 支持通过 CSS 变量进行主题定制：

:root {
  --u-primary-color: #1890ff;
  --u-success-color: #52c41a;
  --u-warning-color: #faad14;
  --u-danger-color: #ff4d4f;
  
  --u-font-size-base: 14px;
  --u-border-radius-base: 4px;
}

🌍 国际化

<template>
  <UConfigProvider :locale="locale">
    <App />
  </UConfigProvider>
</template>

<script setup>
import { UConfigProvider } from '@koi-design/uxd-ui';
import zhCN from '@koi-design/uxd-ui/lang/zh-cn';
import enUS from '@koi-design/uxd-ui/lang/en-us';

const locale = zhCN; // 或 enUS
</script>

🔧 开发

环境要求

• Node.js >= 16
• pnpm >= 8

本地开发

# 克隆仓库
git clone http://git.100credit.cn/fe/public/uxd/uxd-ui.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建文档
pnpm docs:build

# 构建组件库
pnpm build

生成文档

本项目提供了文档生成工具：

# 生成中英文文档
node generate-docs-bilingual.js

# 生成中文文档（使用原始脚本）
node generate-docs-enhanced.js

🤝 贡献

我们欢迎所有形式的贡献！

在提交 Pull Request 之前，请确保：

1. 代码符合项目的编码规范
2. 添加了必要的测试用例
3. 更新了相关文档
4. 所有测试都通过

详见 贡献指南

📄 许可证

MIT License

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

Made with ❤️ by UXD-UI Team