# 对应关系

# config.json配置

  {
    "name": "",
    "plugins": {
      "home-page-epu": "/plugins/base/hello-world-plugin/src/index",
      "events-ep": "/plugins/base/events-plugin/src/index",
      "flows-1-epu": "/plugins/base/flows-plugin/src/index",
      "flows-base-epu": "/plugins/base/flows-plugin/src/index",
      "flows-2-epu": "/plugins/demo/flows-plugin/src/index",
      "flows-3-epu": "/plugins/base/flows-plugin/src/index",
      "logics-epl": "/plugins/base/logic-plugin/src/index",
      "dynamic-epu": "/plugins/base/dynamic-routes-plugin/src/index",
      "register-epu": "/plugins/base/register-plugin/src/index",
      "store-epu": "/plugins/base/store-event-plugin/src/index",
      "test-epu": "/plugins/base/test-view-plugin/index.js",
      "ui-header-epu": "/plugins/hangzhou/ui-header-plugin/src/index",
      "ui-body-epu": "/plugins/base/ui-body-plugin/src/index",
      "ui-footer-epu": "/plugins/base/ui-footer-plugin/src/index",
      "nest-epu": "/plugins/demo/nest-plugin/src/index"
    }
  }

具体配置参考插件使用config.json配置，使用参考插件使用部分

# 一对一

插件与扩展点一对一: 例如: /plugins/base/hello-world-plugin

// plugin/index.ts

import HelloWorld from "../components/HelloWorld.vue";
import { Plugin, PluginAPI } from "@esign/plugin-core";

export default (): Plugin => ({
  name: "hello-world-plugin", // 插件的名称，唯一标识符
  // 插件初始化函数，只会执行一次；返回一个 Hook 对象
  setup({ setAppContext, useAppContext }: PluginAPI) {
    return {
      // core/manager.ts line 21
      "home-page-epu": () => {
        // 返回 HelloWorld 组件
        return HelloWorld;
      },
    };
  },
});

# 一对多

插件与扩展点: 一对多, 例如: /plugins/base/flows-plugin

• 目录结构

  flows-plugin
  │  .esignrc.js
  │  package.json
  │  tsconfig.json
  │
  └─src
      │  index.ts
      │  typings.d.ts
      │
      ├─components
      │  ├─Flow1Component
      │  │      index.module.less
      │  │      index.tsx
      │  │
      │  ├─Flow3Component
      │  │      index.module.less
      │  │      index.tsx
      │  │
      │  └─FlowBaseComponent
      │          index.module.less
      │          index.tsx
      │
      └─plugin
              flows-1-plugin.ts
              flows-3-plugin.ts
              flows-base-plugin.ts
  

• 插件代码

    // plugin/index.ts
    import FlowBaseComponent from '../components/FlowBaseComponent/index'
    import { Plugin, PluginAPI } from '@esign/plugin-core'
  
    export default (): Plugin => ({
    name: 'events-plugin',
    setup({ setAppContext, useAppContext }: PluginAPI) {
        return {
          'flows-base-epu': () => {
            return FlowBaseComponent
          },
          dataTransform: (value: string) => {
            return `---flow-2-start---${value}---flow-2-end---`
          }
        }
      }
    })
  
    // index.ts
    import PluginBase from './plugin/flows-base-plugin'
    import Plugin1 from './plugin/flows-1-plugin'
    import Plugin3 from './plugin/flows-3-plugin'
  
    // 数组的形式返回多个插件
    export default [
      PluginBase,
      Plugin1,
      Plugin3,
    ]
  

# 逻辑插件

例如: /plugins/base/logic-plugin

• 插件代码

    // utils
    function dialog(value: string | number = "逻辑插件") {
      alert(value);
    }
  
    export { dialog };
  
    //plugin
    import * as utils from "../logics";
    import type { Plugin, PluginAPI } from "@esign/plugin-core";
  
    export default (): Plugin => ({
      name: "base-logic-plugin",
      setup({ setAppContext, useAppContext }: PluginAPI) {
        return {
          "logics-epl": () => {
            return utils;
          },
        };
      },
    });
  

• 调用逻辑插件

  <template>
    <div class="home">
      <img alt="Vue logo" src="../assets/images/logo.png">
      <br>
      <button @click="logicFn.dialog('逻辑插件')">点击</button>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  
  @Component({})
  export default class ParamsView extends Vue {
    logicFn: any = null
  
    async mounted() {
      this.logicFn = await this.$esExtensionPointLogic('logics-epl');
    }
  }
  </script>
  

# 动态路由插件

例如: /plugins/base/dynamic-routes-plugin

• 插件代码

  // plugin/index.ts
  import TestView from '../pages/test/index.tsx'
  import HelloWorld from '../pages/HelloWorld.vue'
  import Index from '../pages/index/index.tsx'
  import { Plugin, PluginAPI } from '@esign/plugin-core'
  import { RouteConfig } from 'vue-router'
  
  export default (): Plugin => ({
    name: 'base-dynamic-routes-plugin', // 插件的名称，唯一标识
    registerHook: {  }, // 注册新的 hooks
    // 插件初始化函数，只会执行一次；返回一个 Hook 对象
    setup(api: PluginAPI) {
      return {
        'dynamic-epu'({ basename = '' }) {
          return [
            {
              path: `${basename}`,
              name: 'pluginMain',
              component: Index,
              children: [
                {
                  path: `${basename}/test`,
                  name: 'pluginTest',
                  component: TestView,
                  meta: {
                    title: 'test view',
                    basename,
                  },
                },
                {
                  path: `${basename}/helloworld`,
                  name: 'pluginHello',
                  component: HelloWorld,
                  meta: {
                    title: 'hello world',
                    basename,
                  },
                },
                {
                  path: `${basename}/`,
                  redirect: `${basename}/helloworld`,
                }
              ],
            },
          ] as RouteConfig[]
        },
        pageComponents() {
          // 返回 TestView 组件
          return TestView
        },
      }
    },
  })
  

• 调用插件 router.js部分

  import { beforeEnterHook } from '@esign/plugin-core'
  
  export const routes = [
    ...路由配置
    {
      path: '/middlePage', // 中间路由
      beforeEnter (from, to, next) {
        beforeEnterHook({
          from,
          next, 
          router
        }, 
        {
          // 插件基础路径
          baseName: 'third',
          // 原应用默认页面
          defaultPath: '/'
        })
      }
    },
    { 
      path: '*', 
      /**
       * 微前端的模式下请携带微前端子应用基础路径，如：path: '/subapp-demo'
       */
      redirect: '/middlePage' }, // 默认页面统一跳转至 /middlePage 路由
  ]
  

• 动态路由跳转方式 跳转动态路由根路径(third)+扩展点名称，例如

    this.$router.push(`/third/${扩展点名称}`)