# ibiz-template-studio-ex

**Repository Path**: iBizModeling/ibiz-template-studio-ex

## Basic Information

- **Project Name**: ibiz-template-studio-ex
- **Description**: 全新动态模板Studio扩展
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2023-11-09
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# X6模式设计扩展

## 配置

1. 建立设计视图(视图类型: 自定义)

    - 布局
        * 素材区: 建立面板属性项，名称：X6_PANEL_ITEM_STENCIL，预置类型 X6_PANEL_ITEM_STENCIL，配置素材代码表
        * 设计区: 建立静态内容项，名称：X6_PANEL_ITEM，预置类型 X6_PANEL_ITEM
        * 属性区: 建立导航占位，名称：NAV_POS，配置额外参数: EXPCACHE=NO_CACHE、EXPMODE=NO_ROUTE

    - 部件
        * 工具栏: 建立标准工具栏，标准编辑界面保存功能
        * 表单: 建立三个表单，分别为 NODE、LINK、FORM 主要用于接口识别。FORM 为主实体表单，NODE 为节点实体表单，LINK 为连线实体表单。

    - 关系界面
        * 建立关系界面: 用于确认节点或连线选中后属性区呈现。标识规范: EDITDATA:实体:类型，无类型可不填。例：EDITDATA:PSDELOGICNODE:DFSORTPROCESS、EDITDATA:PSDELOGIC

2. 建立相关插件

    - 视图插件: 固定名称 X6DesignView，使用[远程运行时插件]模式挂载本组件即可
    - 部件插件: 建立两个插件，分别为 node、link 使用。用于分别注册识别节点和连线适配器相关内容。代码实现具体看 x6ProviderRegister 相关内容

3. 插件代码实现

    - 实现节点适配器: 连线适配器(X6LinkServiceProvider)、连线数据适配器(X6LinkDataProvider)
    - 实现连线适配器: 节点适配器(X6NodeServiceProvider)、节点数据适配器(X6NodeDataProvider)
    - x6扩展: 根据需求注册自定义的[连线、节点]

## 开发流程

采用标准模板插件的形式，在主项目中引用插件

1. 安装依赖

```sh
pnpm i
```

2. 链接底包

```sh
./scripts/link.sh
```

3. 构建插件

```sh
npm run dev
```

4. 将构建后的插件设置为全局依赖

```sh
pnpm link --global
```

5. 在主项目中引用构建后的插件

```sh
pnpm link --global @ibiz-template-plugin/antv-x6-design
```

6. 在主项目中安装插件

```ts
import { App } from 'vue';
import plugin from '@ibiz-template-plugin/antv-x6-design';

export default {
  install(app: App) {
    app.use(plugin);
    // 设置本地开发需要忽略加载的插件，可填写正则或全匹配字符串
    // 匹配在平台配置的[运行时插件仓库配置]内配置的内容
    ibiz.plugin.setDevIgnore(/^@ibiz-template-plugin\/antv-x6-design/);
  },
};
```