@siriuscore/shared-component

Shared UI Component Library for AI Web Core.

foundation/ # 【基石层】跨项目通用能力（极少变动） features/ # 【特性层】业务共性功能（会持续增长）

简介

本包提供通用的 React UI 组件，基于 Ant Design 进行封装，并集成了统一的主题配置管理。

组件列表

主要包含以下基础组件：

• ModalCard: 带弹出模态框的卡片组件。
• BarChart: 基于 ECharts 的柱状图组件。
• Loading: 通用加载组件。

使用说明

1. 安装

在 Monorepo 中，通常在 apps 下的应用通过 workspace 协议引用：

// package.json
"dependencies": {
  "@siriuscore/shared-component": "workspace:*"
}

2. 引入组件

import { ModalCard, BarChart } from '@siriuscore/shared-component';

3. 主题与样式注意事项 (Important)

为了支持微前端或样式隔离，本组件库内置了 Theme Prefix 机制。

• 默认前缀: shared-cmp
• 机制: 所有导出的组件均使用 withTheme 高阶组件进行了包裹。这意味着组件内部的 Ant Design 组件（如 <Button>, <Modal>）会自动接收 prefixCls="shared-cmp" 属性。
• 样式生效前提:
  • 宿主应用（Host App）必须构建包含对应的 CSS 样式（即 CSS 选择器必须是 .shared-cmp-*）。
  • 确保 fishx.config.ts 或 Webpack 配置中，less 变量 @ant-prefix 设置为 shared-cmp。
  • 确保宿主应用的 App.js 或入口文件中的全局 ConfigProvider 也使用了相同的 prefixCls="shared-cmp"。

如果发现样式丢失或组件透明，请检查宿主应用的 prefixCls 配置是否与本包默认配置一致。### 开发

# 启动开发模式（监听文件变更）
npm run dev

# 构建
npm run build

# 本地启动验证
npm playground