IMM-BI 组件库

目录结构

``
/projects/imm-bi/
├── src/ # 源代码目录
│ ├── lib/ # 库代码
│ │ ├── core/ # 核心功能
│ │ │ ├── constants/ # 常量定义
│ │ │ ├── enums/ # 枚举定义
│ │ │ ├── factories/ # 工厂类
│ │ │ │ └── concrete/ # 具体工厂实现
│ │ │ ├── interfaces/ # 接口定义
│ │ │ ├── services/ # 服务
│ │ │ │ ├── external/ # 对外暴露的服务
│ │ │ │ ├── internal/ # 内部服务
│ │ │ │ └── mock-data/ # 模拟数据服务
│ │ │ └── types/ # 类型定义
│ │ ├── features/ # 功能模块
│ │ │ ├── editor/ # 编辑器功能
│ │ │ └── preview/ # 预览功能
│ │ └── shared/ # 共享模块
│ │ ├── components/ # 共享组件
│ │ │ ├── canvas/ # 画布组件
│ │ │ │ └── dynamic-components/ # 动态组件
│ │ │ │ ├── base/ # 基础组件
│ │ │ │ ├── chart/ # 图表组件
│ │ │ │ ├── table/ # 表格组件
│ │ │ │ └── text/ # 文本组件
│ │ │ ├── drag-wrapper/ # 拖拽包装器
│ │ │ ├── editor/ # 编辑器组件
│ │ │ │ ├── data-source-panel/ # 数据源面板
│ │ │ │ └── dynamic-editor/ # 动态编辑器
│ │ │ │ ├── chart-editor/ # 图表编辑器
│ │ │ │ ├── sub-editor/ # 子编辑器
│ │ │ │ ├── table-editor/ # 表格编辑器
│ │ │ │ └── text-editor/ # 文本编辑器
│ │ │ └── panel/ # 面板组件
│ │ ├── directives/ # 指令
│ │ ├── pipes/ # 管道
│ │ └── utils/ # 工具函数
│ └── public-api.ts # 公共 API 导出
├── ng-package.json # Angular 打包配置
├── package.json # 包信息
└── tsconfig.lib.json # TypeScript 配置
`

开发说明

$3

`bash
npm install
`

$3

`bash
ng build imm-bi
`

$3

1. 构建库后，可以在主应用中导入并使用组件：

`typescript
import { BiEditorComponent, BiPreviewComponent, BiExternalService } from 'imm-bi';
`

2. 在模块中声明组件（如果使用独立组件，则不需要此步骤）：

`typescript
@NgModule({
imports: [BiEditorComponent, BiPreviewComponent],
// ...
})
export class AppModule { }
`

3. 在组件模板中使用：

`html


`

组件说明

$3

imm-bi-preview 是一个用于预览 BI 内容的组件，支持缩放功能。

#### 使用方法

`html
[previewId]="previewId()"
[enableZoom]="enableZoom()"
[enableZoomBtn]="enableZoomBtn()"
>
`

#### 输入属性

- previewId: string - 预览 ID，用于加载配置数据
- enableZoom: boolean - 控制是否启用缩放功能
- true（默认值）：启用缩放，内容按比例缩放适应窗口宽度，智能控制纵向滚动
- false：禁用缩放，显示原始尺寸，释放横纵滚动条
- enableZoomBtn: boolean - 控制是否显示缩放按钮
- true：显示缩放按钮，允许用户切换缩放模式
- false（默认值）：不显示缩放按钮

$3

imm-bi-editor 是一个用于编辑 BI 内容的组件，具有三面板布局。

#### 使用方法

`html





`

#### 面板布局

- 左侧面板：包含组件列表和可自定义的编辑器表单内容
- 中央面板：显示 BI 画布
- 右侧面板：包含编辑面板

#### 内容投影插槽

- editorFormContent：将内容投影到左侧面板的表单区域

#### 示例

`html


editorFormContent
#biForm
[options]="biFormOptions"
[upsert]="upsertPrm"
[model]="biModel">


`

在组件 TypeScript 文件中：

`typescript
import { Component } from '@angular/core';

@Component({
selector: 'app-example',
templateUrl: './example.component.html',
})
export class ExampleComponent {
biModel = {
// 您的模型数据
};
}
`

服务说明

$3

BiExternalService 是一个用于管理 BI 组件的服务，提供以下主要功能：

#### 主要方法

- getAllConfigs() - 获取所有当前组件配置
- initializeComponent(configs) - 使用给定配置初始化组件
- generatePreviewId(ttl?) - 生成预览 ID 并存储当前组件配置
- getConfigsByPreviewId(previewId) - 通过预览 ID 获取组件配置
- resetAllComponents() - 重置所有组件

#### 使用示例

`typescript
import { Component, inject } from '@angular/core';
import { BiExternalService } from 'imm-bi';

@Component({
selector: 'app-example',
template:
生成预览


})
export class ExampleComponent {
private biService = inject(BiExternalService);
previewId: string = '';

async generatePreview() {
// 生成预览 ID（有效期为 24 小时）
this.previewId = await this.biService.generatePreviewId(24 60 60 * 1000);
}

resetComponents() {
// 重置所有组件
this.biService.resetAllComponents();
}
}
``