zw-r-ui

基于 Vue 3 的现代化组件库

✨ 特性

• 🚀 基于 Vue 3 最新特性
• 💪 使用 TypeScript 开发，提供完整的类型定义
• 📦 支持按需引入，减少打包体积
• 🎨 使用 CSS 变量，支持主题定制和动态切换
• 🌙 内置暗色主题支持
• 📖 完整的文档和示例
• 🛠️ 支持 Tree Shaking

📦 安装

npm install zw-r-ui

🔨 使用

全量引入

import { createApp } from 'vue'
import ZwRUI from 'zw-r-ui'
import 'zw-r-ui/dist/style.css'

const app = createApp(App)
app.use(ZwRUI)

按需引入

import { RDataGrid, RDialog, RSimpleForm } from 'zw-r-ui'

主题定制

import { setTheme, setDarkTheme } from 'zw-r-ui'

// 自定义主题
setTheme({
  primaryColor: '#722ed1',
  borderRadius: '8px'
})

// 切换暗色主题
setDarkTheme()

CSS 变量

:root {
  --r-primary-color: #1890ff;
  --r-success-color: #52c41a;
  --r-border-radius: 4px;
  --r-font-size-base: 14px;
}

🎯 核心组件

DataGrid - 数据表格

• ✅ 虚拟滚动，支持大数据量
• ✅ 多级表头支持
• ✅ 列配置和拖拽排序
• ✅ 内联编辑功能
• ✅ 高级筛选器
• ✅ 工具栏自定义
• ✅ 多种列类型（文本、数字、日期、标签等）

Dialog - 对话框

• ✅ 灵活的对话框组件
• ✅ 支持自定义内容
• ✅ 响应式设计

SimpleForm - 简单表单

• ✅ 动态表单生成
• ✅ 多种表单控件
• ✅ 表单验证
• ✅ 级联选择器支持

📚 文档

查看完整文档：在线文档

🔧 开发

# 克隆项目
git clone https://github.com/your-username/zw-r-ui.git

# 进入项目目录
cd zw-r-ui

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

# 启动文档服务器
npm run docs:dev

# 构建文档
npm run docs:build

📄 目录结构

zw-r-ui/
├── src/                    # 源码目录
│   ├── components/         # 组件目录
│   │   ├── DataGrid/       # 数据表格组件
│   │   ├── Dialog/         # 对话框组件
│   │   └── SimpleForm/     # 简单表单组件
│   ├── styles/             # 样式目录
│   │   └── variables.scss  # SCSS 变量
│   ├── App.vue             # 开发环境根组件
│   ├── main.ts             # 开发环境入口
│   └── index.ts            # 组件库入口
├── docs/                   # 文档目录
│   ├── .vitepress/         # VitePress 配置
│   ├── components/         # 组件文档
│   └── guide/              # 使用指南
├── dist/                   # 构建输出目录
├── components.d.ts         # 全局类型声明
├── vite.config.ts          # Vite 配置
├── tsconfig.json           # TypeScript 配置
└── package.json            # 项目配置

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License © 2024