平台介绍

UI 组件库平台

这是一个支持多个独立组件库系统的管理平台，每个系统可以有自己独立的组件分类和设计风格。

为什么需要多系统架构？

在实际业务中，不同的产品线或业务场景可能需要完全不同的设计风格和组件集合。传统的单一组件库难以满足这种需求，而多系统架构可以：

1. 独立性

每个组件库系统完全独立，有自己的：

• 设计风格和主题
• 组件分类和数量
• 文档和示例
• 版本管理

2. 灵活性

• 用户可以只安装需要的系统
• 不同系统可以独立开发和发布
• 互不影响，降低维护成本

3. 可扩展性

• 轻松添加新的组件库系统
• 支持不同的设计规范
• 满足多样化的业务需求

当前系统

简约蓝组件库

定位：企业级 B 端数据仪表盘组件库

特点：

• 采用简约蓝色调设计
• 专注数据仪表盘场景
• 73+ 个组件
• 12 个主要分类

组件分类：

• 首页仪表盘
• 数据查询展示
• 报表表格
• 设备卡片
• 基础组件
• 布局组件
• 数据展示
• 数据输入
• 反馈组件
• 导航组件
• 其他组件

查看简约蓝组件库 →

未来系统

更多组件库系统正在规划中，敬请期待...

技术架构

Monorepo 结构

ui-library/
├── packages/
│   ├── simple-blue/        # 简约蓝组件库
│   ├── system-2/           # 未来系统2
│   └── shared/             # 共享工具
└── docs/                   # 文档站点
    ├── simple-blue/        # 简约蓝文档
    ├── system-2/           # 系统2文档
    └── guide/              # 平台指南

独立包管理

每个系统都是独立的 npm 包：

{
  "@ui-platform/simple-blue": "简约蓝组件库",
  "@ui-platform/system-2": "系统2",
  "@ui-platform/shared": "共享工具"
}

按需安装

用户可以只安装需要的系统：

# 只安装简约蓝组件库
npm install @ui-platform/simple-blue

# 或安装多个系统
npm install @ui-platform/simple-blue @ui-platform/system-2

使用场景

场景 1：单一系统

如果你只需要一个组件库系统，只需安装对应的包：

npm install @ui-platform/simple-blue

场景 2：多系统混用

如果你的项目需要使用多个系统的组件：

npm install @ui-platform/simple-blue @ui-platform/system-2

<template>
  <div>
    <!-- 简约蓝系统的组件 -->
    <sb-stat-card />
    
    <!-- 系统2的组件 -->
    <s2-component />
  </div>
</template>

<script setup>
import { StatCard as SbStatCard } from '@ui-platform/simple-blue';
import { Component as S2Component } from '@ui-platform/system-2';
</script>

设计原则

1. 系统独立

每个组件库系统应该是完全独立的，包括：

• 独立的设计规范
• 独立的组件实现
• 独立的文档
• 独立的版本

2. 命名规范

• 包名：@ui-platform/[system-name]
• 组件前缀：每个系统有自己的前缀（如 sb-、s2-）
• 避免命名冲突

3. 共享机制

虽然系统独立，但可以共享：

• 工具函数
• 类型定义
• 构建配置
• 文档组件

下一步

• 快速开始 - 了解如何使用平台
• 系统列表 - 查看所有可用系统
• 简约蓝组件库 - 开始使用简约蓝组件库