组件总览

简约蓝组件库提供了 73 个精心设计的企业级 B 端组件，涵盖数据仪表盘、数据展示、表单输入、反馈交互等多个场景。

组件分类

全局样式

设计系统的基础样式规范。

色彩 - 主题色、功能色、中性色等色彩规范
字体 - 字体家族、字号、行高、字重等排版规范
阴影 - 投影效果、层级关系
动画 - 过渡动画、交互动效

首页仪表盘

专为数据仪表盘设计的组件。

StatCard - 统计卡片，展示单个数据指标
ChartCard - 图表卡片，带图表的数据展示
DashboardLayout - 仪表盘布局容器

数据查询展示

用于数据查询、筛选和高级搜索的组件。

SearchBar - 搜索栏，快速搜索功能
FilterPanel - 筛选面板，多条件筛选
QueryBuilder - 查询构建器，复杂查询条件构建

报表表格

报表和表格相关的专业组件。

DataTable - 增强型数据表格
ReportHeader - 报表页面头部
ExportTools - 数据导出工具

设备卡片

设备管理专用组件。

DeviceCard - 设备信息展示卡片
DeviceStatus - 设备状态指示器

基础

最基础的 UI 组件。

Icon - 图标，223 个精心设计的图标 ✅
Button - 按钮，各种类型和状态的按钮
Link - 链接，文字链接组件
Typography - 排版，文本排版组件

布局

用于页面布局和空间分割的组件。

Divider - 分割线
Grid - 栅格布局系统
Layout - 页面布局容器
Space - 间距控制组件

数据展示

用于展示各类数据和内容的组件。

Avatar - 头像
Badge - 徽标数字
Calendar - 日历
Card - 卡片容器
Carousel - 图片轮播
Collapse - 折叠面板
Empty - 空状态占位
Image - 图片展示
List - 列表
Popover - 气泡卡片
Statistic - 数值显示
Table - 表格
Tabs - 标签页
Tag - 标签
Timeline - 时间轴
Tooltip - 文字气泡
Tree - 树形控件

数据输入

表单输入类组件。

AutoComplete - 自动补全
Cascader - 级联选择
Checkbox - 复选框
Radio - 单选框
Switch - 开关
DatePicker - 日期选择器
TimePicker - 时间选择器
Form - 表单容器
Input - 输入框
InputNumber - 数字输入框
Rate - 评分
Select - 选择器
Slider - 滑动输入条
Transfer - 数据穿梭框
TreeSelect - 树选择
Upload - 文件上传

反馈

用户反馈和提示类组件。

Alert - 警告提示
Drawer - 抽屉
Message - 全局提示
Modal - 对话框
Notification - 通知提醒框
Popconfirm - 气泡确认框
Progress - 进度条
Result - 结果页
Skeleton - 骨架屏

其他

其他功能性组件。

Chart - 图表组件
BackTop - 返回顶部
ErrorPage - 缺省页
Cover - 封面

组件统计

分类	组件数量	完成状态
全局样式	4	📋 规划中
首页仪表盘	3	📋 规划中
数据查询展示	3	📋 规划中
报表表格	3	📋 规划中
设备卡片	2	📋 规划中
基础	4	✅ 1/4 完成
布局	4	📋 规划中
数据展示	17	📋 规划中
数据输入	16	📋 规划中
反馈	9	📋 规划中
导航	4	📋 规划中
其他	4	📋 规划中
总计	73	1 完成

开发进度

✅ 已完成（1个）

Icon 图标 - 223 个图标，8 个分类，支持搜索和筛选

📋 规划中（72个）

其余 72 个组件正在规划和开发中，将按照业务优先级逐步完成。

使用指南

安装

bash

npm install @ui-platform/simple-blue

全局引入

typescript

import { createApp } from 'vue';
import App from './App.vue';
import SimpleBlue from '@ui-platform/simple-blue';
import '@ui-platform/simple-blue/dist/style.css';

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

按需引入

typescript

import { Icon, Button, Card } from '@ui-platform/simple-blue';
import '@ui-platform/simple-blue/dist/style.css';

使用示例

vue

<template>
  <div>
    <sb-icon name="refresh" :size="24" />
    <sb-button type="primary">按钮</sb-button>
    <sb-card title="卡片标题">卡片内容</sb-card>
  </div>
</template>

<script setup lang="ts">
import { Icon as SbIcon, Button as SbButton, Card as SbCard } from '@ui-platform/simple-blue';
</script>

设计理念

简约蓝组件库遵循以下设计理念：

简约 - 简洁明了的设计风格，减少视觉干扰
专业 - 符合企业级 B 端应用标准
高效 - 提升开发效率，减少重复工作
灵活 - 支持主题定制和功能扩展
一致 - 统一的交互和视觉体验

技术栈

Vue 3 - 渐进式 JavaScript 框架
TypeScript - 类型安全的 JavaScript 超集
Ant Design Vue - 企业级 UI 组件库
VitePress - 基于 Vite 的静态站点生成器
Vite - 下一代前端构建工具

浏览器支持

浏览器	版本
Chrome	>= 90
Firefox	>= 88
Edge	>= 90
Safari	>= 14

不支持 IE 11 及以下版本。

反馈与贡献

如有问题或建议，欢迎通过以下方式反馈：

提交 Issue - 报告 Bug 或提出功能建议
提交 Pull Request - 贡献代码或文档
联系开发团队 - 获取技术支持

下一步

Icon 图标 - 查看已完成的图标组件
快速开始 - 开始使用组件库
主题定制 - 了解如何定制主题

当前版本： 1.0.0
最后更新： 2026-01-21
组件进度： 1/73 (1.4%)

组件总览 ​

组件分类 ​

全局样式 ​

首页仪表盘 ​

数据查询展示 ​

报表表格 ​

设备卡片 ​

基础 ​

布局 ​

数据展示 ​

数据输入 ​

反馈 ​

导航 ​

其他 ​

组件统计 ​

开发进度 ​

✅ 已完成（1个） ​

📋 规划中（72个） ​

使用指南 ​

安装 ​

全局引入 ​

按需引入 ​

使用示例 ​

设计理念 ​

技术栈 ​

浏览器支持 ​

反馈与贡献 ​

下一步 ​