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 配置

开发说明

安装依赖

npm install

构建库

ng build imm-bi

在主应用中使用

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

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

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

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

3. 在组件模板中使用：

<imm-bi-editor></imm-bi-editor>
<imm-bi-preview [previewId]="previewId"></imm-bi-preview>

组件说明

imm-bi-preview 组件

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

使用方法

<imm-bi-preview
  [previewId]="previewId()"
  [enableZoom]="enableZoom()"
  [enableZoomBtn]="enableZoomBtn()"
></imm-bi-preview>

输入属性

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

imm-bi-editor 组件

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

使用方法

<imm-bi-editor>
  <div editorFormContent>
    <!-- 自定义编辑器表单内容 -->
  </div>
</imm-bi-editor>

面板布局

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

内容投影插槽

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

示例

<imm-bi-editor>
  <!-- 此内容将被投影到左侧面板的表单区域 -->
  <custom-form
    editorFormContent
    #biForm
    [options]="biFormOptions"
    [upsert]="upsertPrm"
    [model]="biModel">
  </custom-form>
</imm-bi-editor>

在组件 TypeScript 文件中：

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

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

服务说明

BiExternalService 服务

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

主要方法

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

使用示例

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

@Component({
  selector: 'app-example',
  template: `
    <button (click)="generatePreview()">生成预览</button>
    <imm-bi-preview [previewId]="previewId"></imm-bi-preview>
  `
})
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();
  }
}