npm install 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 配置
`bash`
npm install
`bash`
ng build imm-bi
1. 构建库后,可以在主应用中导入并使用组件:
`typescript`
import { BiEditorComponent, BiPreviewComponent, BiExternalService } from 'imm-bi';
2. 在模块中声明组件(如果使用独立组件,则不需要此步骤):
`typescript`
@NgModule({
imports: [BiEditorComponent, BiPreviewComponent],
// ...
})
export class AppModule { }
3. 在组件模板中使用:
`html`
imm-bi-preview 是一个用于预览 BI 内容的组件,支持缩放功能。
#### 使用方法
`html`
[enableZoom]="enableZoom()"
[enableZoomBtn]="enableZoomBtn()"
>
#### 输入属性
- previewId: string - 预览 ID,用于加载配置数据enableZoom: boolean
- - 控制是否启用缩放功能true
- (默认值):启用缩放,内容按比例缩放适应窗口宽度,智能控制纵向滚动false
- :禁用缩放,显示原始尺寸,释放横纵滚动条enableZoomBtn: boolean
- - 控制是否显示缩放按钮true
- :显示缩放按钮,允许用户切换缩放模式false
- (默认值):不显示缩放按钮
imm-bi-editor 是一个用于编辑 BI 内容的组件,具有三面板布局。
#### 使用方法
`html`
#### 面板布局
- 左侧面板:包含组件列表和可自定义的编辑器表单内容
- 中央面板:显示 BI 画布
- 右侧面板:包含编辑面板
#### 内容投影插槽
- editorFormContent:将内容投影到左侧面板的表单区域
#### 示例
`html`
#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 = {
// 您的模型数据
};
}
`
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();
}
}
``