feat(new-registry): test plugin replace, add, sort & plugin method replace

Author: betterdancing

designer-demo/public/hotfixRegistry.js

@@ -0,0 +1,13 @@
+export default {
+  'engine.plugins.appmanage': {
+    overwrite: {
+      methods: {
+        Main: {
+          createNewPage: (_ctx) => (_event, row) => {
+            alert(`当前页面是${_ctx().pageState.currentPage.name}, 现在要创建一个新的${_event}页面`)
+          }
+        }
+      }
+    }
+  }
+}

designer-demo/registry.js

@@ -12,12 +12,14 @@
 import { META_SERVICE, META_APP } from '@opentiny/tiny-engine-meta-register'
 import engineConfig from './engine.config'
 import { HttpService } from './src/composable'
+import { CustomComponents, Block } from './src/metas'
 
 export default {
   [META_SERVICE.Http]: HttpService,
   'engine.config': {
     ...engineConfig
   },
+  [META_APP.BlockManage]: Block,
   // 调整插件顺序示例:
   [META_APP.Layout]: {
     options: {
@@ -29,10 +31,17 @@ export default {
         [META_APP.OutlineTree]: {
           insertAfter: META_APP.Materials
         },
+        // 调整插件顺序
+        [META_APP.BlockManage]: {
+          insertBefore: META_APP.Materials
+        },
         // 调整插件上下位置
         [META_APP.Schema]: {
           insertBefore: META_APP.Help
         },
+        'engine.plugins.custom-components': {
+          insertAfter: META_APP.State
+        },
         // 调整工具栏顺序
         [META_APP.Save]: {
           insertAfter: META_APP.GenerateCode
@@ -43,5 +52,9 @@ export default {
         }
       }
     }
+  },
+  'engine.plugins.custom-components': {
+    ...CustomComponents,
+    id: 'engine.plugins.custom-components'
   }
 }

designer-demo/src/main.js

@@ -10,15 +10,19 @@
  *
  */
 import { configurators } from './configurators/'
+import { initHotfixRegistry } from '@opentiny/tiny-engine-meta-register'
 import 'virtual:svg-icons-register'
 
 async function startApp() {
   const registry = await import('../registry')
   const { init } = await import('@opentiny/tiny-engine')
-
+  const hotfixRegistry =
+    (await initHotfixRegistry({
+      url: 'http://localhost:8090/hotfixRegistry.js'
+    })) || {}
   init({
     // 合并多个注册表
-    registry: [registry.default],
+    registry: [registry.default, hotfixRegistry],
     configurators,
     createAppSignal: ['global_service_init_finish']
   })

designer-demo/src/metas/index.ts

@@ -0,0 +1,4 @@
+import CustomComponents from "./plugins/custom-components";
+import Block from './plugins/block';
+
+export { CustomComponents, Block }

designer-demo/src/metas/plugins/block/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import entry from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry,
+  metas: []
+}

designer-demo/src/metas/plugins/block/meta.js

@@ -0,0 +1,6 @@
+export default {
+  id: 'engine.plugins.blockmanage',
+  title: '区块管理',
+  type: 'plugins',
+  icon: 'plugin-icon-symbol'
+}

designer-demo/src/metas/plugins/block/src/Main.vue

@@ -0,0 +1,38 @@
+<template>
+  <plugin-panel
+    title="区块管理"
+    class="plugin-block"
+    :fixed-name="PLUGIN_NAME.BlockManage"
+    :fixedPanels="fixedPanels"
+    :isShowDocsIcon="true"
+    @close="$emit('close')"
+  >
+    <template #header> </template>
+    <template #content>
+      <span>这里是替换后的插件：区块管理</span>
+    </template>
+  </plugin-panel>
+</template>
+
+<script lang="ts">
+import { PluginPanel } from '@opentiny/tiny-engine-common'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
+export default {
+  components: {
+    PluginPanel
+  },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
+    const { PLUGIN_NAME } = useLayout()
+
+    return {
+      PLUGIN_NAME
+    }
+  }
+}
+</script>
+<style lang="less" scoped></style>

designer-demo/src/metas/plugins/custom-components/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import entry from './src/Main.vue'
+import metaData from './meta'
+
+export default {
+  ...metaData,
+  entry,
+  metas: []
+}

designer-demo/src/metas/plugins/custom-components/meta.js

@@ -0,0 +1,6 @@
+export default {
+  id: 'engine.plugins.custom-components',
+  title: '自定义组件',
+  type: 'plugins',
+  icon: 'preview'
+}

designer-demo/src/metas/plugins/custom-components/src/Main.vue

@@ -0,0 +1,37 @@
+<template>
+  <plugin-panel
+    title="自定义组件"
+    class="plugin-datasource"
+    fixed-name="自定义组件"
+    :fixedPanels="fixedPanels"
+    :isShowDocsIcon="true"
+    @close="$emit('close')"
+  >
+    <template #header>
+    </template>
+    <template #content>
+      <span>这里是新增的插件栏，自定义组件</span>
+    </template>
+  </plugin-panel>
+</template>
+
+<script lang="ts">
+import { PluginPanel } from '@opentiny/tiny-engine-common';
+
+export default {
+  components: {
+    PluginPanel
+  },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
+    
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>