npm package: @koi-design/uxd-ui
Description: uxd ui component with vue3.0
Latest version: 14.0.47

# UXD-UI

[English](./README-en.md) | 简体中文

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

## ✨ 特性

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

## 📦 安装

```bash
npm install @koi-design/uxd-ui
```

或使用 yarn / pnpm：

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

## 🔨 使用

### 完整引入

```javascript
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');
```

### 按需引入

```vue
<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>
```

## 📚 文档

### 在线文档

- [中文文档](https://your-site.com/zh)
- [English Documentation](https://your-site.com/en)

### 本地文档

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

- **中文文档**: [component-docs-zh/README.md](./component-docs-zh/README.md)
- **English Docs**: [component-docs-en/README.md](./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 变量进行主题定制：

```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;
}
```

## 🌍 国际化

```vue
<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

### 本地开发

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

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建文档
pnpm docs:build

# 构建组件库
pnpm build
```

### 生成文档

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

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

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

## 🤝 贡献

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

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

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

详见 [贡献指南](./CONTRIBUTING.md)

## 📄 许可证

[MIT License](./LICENSE)

## 🙏 致谢

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

---

**Made with ❤️ by UXD-UI Team**