ZG UI 组件库

基于 Vue 3 + CSS 变量体系 + 主题系统的企业级组件库

✨ 特性

• 🎨 主题系统 - 支持亮色/暗色主题切换
• 🔧 CSS 变量 - 基于 CSS 变量的样式系统，易于定制
• 📦 按需导入 - 支持 Tree Shaking，减少包体积
• 🎯 TypeScript - 完整的 TypeScript 类型定义
• 🌍 现代浏览器 - 支持现代浏览器和 Vue 3
• 📱 响应式 - 移动端友好的响应式设计

📦 安装

npm install @zaogai/zg-ui
# 或
yarn add @zaogai/zg-ui
# 或
pnpm add @zaogai/zg-ui

🚀 快速开始

完整引入

import { createApp } from 'vue'
import ZgUI from '@zaogai/zg-ui'
import '@zaogai/zg-ui/dist/style.css'

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

按需引入

import { ZgButton, ZgInput } from '@zaogai/zg-ui'
import '@zaogai/zg-ui/dist/style.css'

export default {
  components: {
    ZgButton,
    ZgInput
  }
}

在模板中使用

<template>
  <div>
    <ZgButton type="primary" @click="handleClick">
      点击我
    </ZgButton>
    <ZgInput v-model="inputValue" placeholder="请输入内容" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const inputValue = ref('')

const handleClick = () => {
  console.log('按钮被点击了')
}
</script>

🎨 主题定制

使用内置主题

import { useTheme } from '@zaogai/zg-ui'

const { theme, toggleTheme, setTheme } = useTheme()

// 切换主题
toggleTheme()

// 设置特定主题
setTheme('dark')

自定义主题

创建自定义 CSS 文件覆盖 CSS 变量：

/* custom-theme.css */
:root {
  --zg-primary-500: #your-color;
  --zg-success-500: #your-success-color;
  /* 更多变量... */
}

[data-theme="dark"] {
  --zg-primary-500: #your-dark-color;
  /* 暗色主题变量... */
}

然后在项目中引入：

import '@zaogai/zg-ui/dist/style.css'
import './custom-theme.css'

📚 组件列表

基础组件

• ZgButton - 按钮
• ZgIcon - 图标
• ZgAvatar - 头像
• ZgThemeToggle - 主题切换器

表单组件

• ZgInput - 输入框
• ZgTextarea - 文本域
• ZgSelect - 选择器
• ZgCheckbox - 复选框
• ZgRadio - 单选框
• ZgDatePicker - 日期选择器

数据展示

• ZgCard - 卡片
• ZgTable - 表格
• ZgBadge - 徽章
• ZgTag - 标签

反馈组件

• ZgAlert - 警告提示
• ZgLoading - 加载中
• ZgMessage - 消息提示
• ZgModal - 模态框

导航组件

• ZgMenu - 菜单
• ZgPagination - 分页
• ZgBreadcrumb - 面包屑
• ZgTabs - 标签页

布局组件

• ZgContainer - 容器
• ZgHeader - 页头
• ZgFooter - 页脚

🔧 开发

# 克隆项目
git clone https://github.com/zaogai/zg-ui.git

# 安装依赖
cd zg-ui
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build:lib

# 生成类型声明
npm run build:types

📄 许可证

MIT License © 2024 ZaoGai Team

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 联系我们

• 作者：zaogaijerry
• 邮箱：[email protected]
• GitHub：https://github.com/zaogai/zg-ui