介绍
简约蓝组件库
简约蓝组件库是一套专为企业级 B 端数据仪表盘设计的 Vue 3 组件库，基于 Ant Design Vue 封装，提供了 73+ 个高质量组件。
特性
🎨 多主题支持
组件库采用主题系统架构，支持多套设计系统。首个主题为"简约蓝"，采用清新的蓝色调，适合数据仪表盘场景。后续可以轻松扩展其他主题风格。
📦 丰富的组件
覆盖 12 个主要分类，包含：
- 全局样式 - 颜色、字体、间距等基础样式
- 首页仪表盘 - 统计卡片、图表卡片、仪表盘布局等
- 数据查询展示 - 搜索栏、筛选面板、查询构建器等
- 报表表格 - 数据表格、报表头部、导出工具等
- 设备卡片 - 设备卡片、设备状态、设备信息等
- 基础组件 - 图标、按钮、链接、排版等
- 布局组件 - 分割线、栅格、布局、间距等
- 数据展示 - 头像、徽标、日历、卡片等 17 个组件
- 数据输入 - 表单、输入框、选择器等 16 个组件
- 反馈组件 - 警告提示、对话框、通知等 9 个组件
- 导航组件 - 面包屑、菜单、分页等
- 其他组件 - 图表、返回顶部、缺省页等
📋 代码一键复制
每个组件文档都提供了完整的代码示例，支持一键复制功能，让你可以快速将组件集成到项目中。
🔧 自动导入
基于 unplugin-vue-components 和 unplugin-auto-import，支持组件和 API 自动导入，无需手动引入。
🚀 现代化技术栈
- Vue 3 - 使用 Composition API 和
<script setup>语法 - TypeScript - 完整的类型定义，提供优秀的开发体验
- Vite - 极速的开发和构建体验
- Ant Design Vue - 基于成熟的组件库，稳定可靠
♿ 无障碍支持
基于 Ant Design Vue，天然支持无障碍访问（Accessibility），符合 WCAG 标准。
设计理念
专注 B 端场景
组件库专为 B 端数据仪表盘场景设计，提供了大量业务组件，如统计卡片、数据表格、图表卡片等，开箱即用。
灵活可定制
虽然提供了默认的简约蓝主题，但组件库的主题系统支持深度定制，可以轻松适配不同的设计规范。
开发体验优先
提供完善的 TypeScript 类型定义、自动导入、代码提示等功能，让开发更加高效。
技术架构
Monorepo 架构
采用 Monorepo 架构，使用 pnpm workspace 管理多个包：
ui-library/
├── packages/
│ └── components/ # 组件包
└── docs/ # 文档站点组件命名规范
所有组件使用 sb- 前缀（simple-blue 的缩写），避免命名冲突：
vue
<sb-stat-card />
<sb-chart-card />
<sb-data-table />主题系统
采用 CSS 变量 + TypeScript 配置的方式实现主题系统：
typescript
export interface ThemeConfig {
name: string;
colors: {
primary: string;
success: string;
warning: string;
error: string;
info: string;
};
// ...
}浏览器支持
现代浏览器和 IE11（需要 polyfills）。
 Edge |  Firefox |  Chrome |  Safari |
|---|---|---|---|
| Edge | last 2 versions | last 2 versions | last 2 versions |