# 可视化组件二次开发示例

**Repository Path**: ganweicloud/ganwei-visual-component-devkit-samples

## Basic Information

- **Project Name**: 可视化组件二次开发示例
- **Description**: 可视化组件二次开发示例
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-05-29
- **Last Updated**: 2026-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可视化平台独立插件开发文档

## 1. 环境要求


| 工具            | 版本要求 |
| --------------- | -------- |
| **Node.js**     | >=18.x   |
| **Yarn**        | 1.22.x   |
| **Angular CLI** | >=14.2.6 |

### 验证环境

```bash
node -v    # 应输出 v18.x.x
yarn -v    # 应输出 1.22.x
```

### 全局安装 Angular CLI

```bash
npm install -g @angular/cli@14.2.11
ng version
```



## 2. 项目概览

本仓库包含一个独立插件示例项目：


| 包名                  | 说明                                                         |
| --------------------- | ------------------------------------------------------------ |
| `plugin-my-component` | 独立插件项目示例，基于 Angular 14 + Module Federation，只需安装依赖后运行开发 |





## 3. 安装依赖

### 3.1 安装 plugin-my-component（插件项目）

```bash
cd plugin-my-component
yarn
```



## 4. 运行方式

### 4.1 启动插件开发服务器

```bash
cd plugin-my-component
yarn dev
```

- 该命令会启动 Angular 开发服务器，默认端口 **4200**
- 浏览器会自动打开 `http://localhost:4200`
- 支持热更新（HMR），修改代码后浏览器自动刷新

### 4.2 开发模式说明

开发模式下，`AppComponent` 作为本地开发模拟组件，通过传入 mock 数据来测试插件业务组件：

- `app.component.ts` - 根组件，提供模拟的 `pen` 和 `canvas` 数据
- `plugin-my-component.component.ts` - 实际插件业务组件，继承自 `BaseComponent`

这样可以在不依赖主平台的情况下独立开发和调试插件。



## 5. 目录结构

```
── plugin-my-component/                   # 独立插件项目（示例）
    ├── package.json                       # 项目依赖配置
    ├── angular.json                       # Angular 构建配置
    ├── tsconfig.json                      # TypeScript 基础配置
    ├── tsconfig.app.json                  # 应用 TypeScript 配置
    ├── webpack.config.dev.js              # Webpack 开发构建配置
    ├── webpack.config.prod.js             # Webpack 生产构建配置
    ├── moduleFederationPlugin.js          # Module Federation 插件配置
    └── src/
        ├── main.ts                        # 应用入口
        ├── bootstrap.ts                   # Module Federation 引导入口
        ├── public-api.ts                  # 公共 API 导出
        ├── index.html                     # HTML 模板
        ├── polyfills.ts                   # Polyfills
        ├── styles.scss                    # 全局样式
        ├── favicon.ico                    # 网站图标
        ├── environments/
        │   ├── environment.ts             # 开发环境配置
        │   ├── environment.prod.ts        # 生产环境配置
        │   └── .gitkeep                   # Git 占位文件
        ├── assets/
        │   ├── option.json                # 插件选项配置
        │   └── image/                     # 静态图片资源
        │       └── .gitkeep               # Git 占位文件
        └── app/
            ├── app.module.ts              # 根模块
            ├── app.component.ts           # 根组件（本地开发模拟组件）
            ├── types.ts                   # 类型定义
            └── component/
                ├── plugin-my-component.component.ts    # 插件业务组件
                ├── plugin-my-component.component.html  # 插件模板
                ├── plugin-my-component.component.scss  # 插件样式
                └── .gitkeep               # Git 占位文件
```

### 5.1 核心文件说明

| 文件                                 | 说明                                                         |
| ------------------------------------ | ------------------------------------------------------------ |
| `app.component.ts`                   | 本地开发模拟组件，提供 mock 数据用于独立测试插件             |
| `plugin-my-component.component.ts`   | 实际插件业务组件，继承 `BaseComponent`，实现插件核心逻辑     |
| `plugin-my-component.component.html` | 插件业务组件模板，使用 ng-zorro-antd 组件构建 UI 界面        |
| `option.json`                        | 插件配置文件，定义插件的扩展属性（extendKeys）、控制面板配置（controlPanel）、默认尺寸、样式等 |



## 6. 打包构建

### 6.1 插件项目打包

```bash
cd plugin-my-component
yarn build
```

- 构建产物输出到：`dist/plugins/plugin-my-component/1.0.0/`
- 将生成的`plugin-my-component`包放到IoTCenter\IoTCenterWeb\publish\wwwroot\plugins目录下



## 7. 常见问题

### Q: 端口 4200 被占用

A: 修改 `package.json` 中的 `dev` 脚本，添加 `--port` 参数指定其他端口：

```json
"dev": "ng serve --port 4300 --open"
```

或者修改 `angular.json` 中 `serve.options.port` 配置。

**注意**：端口配置在两个地方：

1. `package.json` 的 `scripts.dev` 字段
2. `angular.json` 的 `projects.plugin-my-component.architect.serve.options.port` 字段

建议保持两处配置一致。