npm package: @ploughnorth/ui-antd-vue
Description: A modern Vue 3 component library based on Ant Design Vue with custom theming
Author: Wasilee Team
Latest version: 0.1.0

# 🚀 Wasilee UI

一个基于 Ant Design Vue 的现代化 Vue 3 组件库，提供优雅的设计和丰富的交互体验。

## ✨ 特性

- 🎨 **现代化设计** - 基于 Ant Design Vue，提供精美的视觉设计
- 🎯 **TypeScript 支持** - 完整的 TypeScript 类型定义
- 🔧 **按需引入** - 支持 Tree Shaking，只打包使用的组件
- 🎪 **丰富的主题** - 自定义主题色彩，符合品牌设计规范
- ⚡ **高性能** - 基于 Vue 3 Composition API，性能更优
- 📱 **响应式** - 移动端友好的响应式设计
- 🌍 **国际化** - 支持多语言

## 🎨 设计理念

Wasilee UI 采用现代化的设计语言，主要特色：

- **主色调**: `#1A6098` - 专业稳重的深蓝色
- **警告色**: `#FFB200` - 醒目的橙黄色
- **信息色**: `#9598AC` - 温和的灰蓝色  
- **成功色**: `#02C940` - 清新的绿色

## 📦 安装

```bash
npm install @wasilee/ui-antd-vue
# 或
yarn add @wasilee/ui-antd-vue
# 或
pnpm add @wasilee/ui-antd-vue
```

## 🚀 快速开始

### 完整引入

```typescript
import { createApp } from 'vue'
import WasileeUI from '@wasilee/ui-antd-vue'
import '@wasilee/ui-antd-vue/dist/index.css'

const app = createApp(App)
app.use(WasileeUI)
```

### 按需引入

```typescript
import { WasileeButton } from '@wasilee/ui-antd-vue'
import '@wasilee/ui-antd-vue/dist/index.css'

export default {
  components: {
    WasileeButton
  }
}
```

### 使用示例

```vue
<template>
  <div>
    <!-- 基础按钮 -->
    <wasilee-button type="primary">主要按钮</wasilee-button>
    
    <!-- 渐变按钮 (Wasilee 特色) -->
    <wasilee-button type="primary" :gradient="true">渐变按钮</wasilee-button>
    
    <!-- 悬浮效果按钮 -->
    <wasilee-button type="primary" :elevation="true">悬浮按钮</wasilee-button>
  </div>
</template>
```

## 🔧 配置

### 全局配置

```typescript
import { createApp } from 'vue'
import WasileeUI from '@wasilee/ui-antd-vue'

const app = createApp(App)

app.use(WasileeUI, {
  config: {
    theme: {
      primaryColor: '#1A6098',
      warningColor: '#FFB200',
      infoColor: '#9598AC',
      successColor: '#02C940'
    },
    size: 'middle', // 全局组件尺寸
    locale: 'zh-CN' // 语言设置
  }
})
```

### 自定义主题

Wasilee UI 支持 Less 变量定制主题：

```less
// 在你的样式文件中
@import '~@wasilee/ui-antd-vue/src/styles/variables.less';

// 覆盖变量
@primary-color: #your-color;
@warning-color: #your-warning-color;
```

## 🧩 组件列表

### 基础组件

- [x] Button 按钮 - 增强版按钮，支持渐变和悬浮效果
- [ ] Icon 图标 - 丰富的图标库
- [ ] Typography 排版 - 文本和标题组件

### 布局组件

- [ ] Grid 栅格 - 响应式栅格系统
- [ ] Layout 布局 - 页面布局组件
- [ ] Space 间距 - 设置组件之间的间距

### 导航组件

- [ ] Menu 菜单 - 导航菜单组件
- [ ] Breadcrumb 面包屑 - 显示当前页面路径
- [ ] Pagination 分页 - 分页导航组件

### 数据录入

- [ ] Form 表单 - 表单组件
- [ ] Input 输入框 - 文本输入组件
- [ ] Select 选择器 - 下拉选择组件

### 数据展示

- [ ] Table 表格 - 数据表格组件
- [ ] Card 卡片 - 通用卡片容器
- [ ] List 列表 - 通用列表组件

### 反馈组件

- [ ] Modal 对话框 - 模态对话框
- [ ] Message 消息 - 全局消息提示
- [ ] Notification 通知 - 全局通知

## 🤝 贡献

我们欢迎任何形式的贡献！

### 开发设置

```bash
# 克隆仓库
git clone https://github.com/wasilee/ui-antd-vue.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 类型检查
npm run type-check
```

### 提交规范

我们使用 [Conventional Commits](https://conventionalcommits.org/) 规范：

- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 重构
- `test`: 测试相关
- `chore`: 构建或工具相关

## 📄 许可证

MIT License

## 🙏 致谢

- [Ant Design Vue](https://antdv.com/) - 提供了优秀的基础组件
- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Vite](https://vitejs.dev/) - 快速的构建工具

## 📞 联系我们

- 官网: [https://wasilee.com](https://wasilee.com)
- GitHub: [https://github.com/wasilee/ui-antd-vue](https://github.com/wasilee/ui-antd-vue)
- 问题反馈: [GitHub Issues](https://github.com/wasilee/ui-antd-vue/issues)

---

Made with ❤️ by Wasilee Team