简约蓝组件库企业级 B 端数据仪表盘

快速开始 ​

安装 ​

npm install @ui-platform/simple-blue ant-design-vue

yarn add @ui-platform/simple-blue ant-design-vue

pnpm add @ui-platform/simple-blue ant-design-vue

使用 ​

<template>
  <div>
    <sb-stat-card
      title="总销售额"
      :value="12345"
      trend="+12.5%"
      trend-type="up"
    />
  </div>
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@ui-platform/simple-blue';
</script>

组件分类 ​

业务组件 ​

• 首页仪表盘 - 统计卡片、图表卡片、仪表盘布局
• 数据查询展示 - 搜索栏、筛选面板、查询构建器
• 报表表格 - 数据表格、报表头部、导出工具
• 设备卡片 - 设备卡片、设备状态、设备信息

基础组件 ​

• 基础组件 - 图标、按钮、链接、排版
• 布局组件 - 分割线、栅格、布局、间距
• 数据展示 - 17 个组件
• 数据输入 - 16 个组件
• 反馈组件 - 9 个组件
• 导航组件 - 面包屑、菜单、分页
• 其他组件 - 图表、返回顶部、缺省页

设计理念 ​

专注 B 端场景 ​

专为 B 端数据仪表盘场景设计，提供了大量业务组件，如统计卡片、数据表格、图表卡片等，开箱即用。

简约蓝主题 ​

使用蓝色作为主色调，传达专业、可信赖的品牌形象，适合企业级应用。

清晰易用 ​

合理的色彩对比和间距设计，确保信息层次清晰，易于阅读和使用。

开源协议 ​

MIT License

Copyright © 2026 Simple Blue UI