refactor: optimize layout module logic (#600)

* feat:add layout

* feat: 调整layout导入

* feat: 把DesignCanvas移到canvas

* feat: 暂时不改entry

* fix: 添加注释

* feat：layout部分逻辑调整

* fix：调整AI图标

* fix：调整App引用

* feat：抽取Layout全局配置组件

* fix: sync newest change

---------

Co-authored-by: chilingling <michaelchiling1024@gmail.com>

Author: lichunn

packages/design-core/src/App.vue

@@ -3,11 +3,72 @@
 </template>
 
 <script>
-import { getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
+import { watch, onUnmounted } from 'vue'
+import {
+  getMergeRegistry,
+  getMetaApi,
+  useModal,
+  useApp,
+  useNotify,
+  useResource,
+  useCanvas
+} from '@opentiny/tiny-engine-meta-register'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { useBroadcastChannel } from '@vueuse/core'
+import { constants } from '@opentiny/tiny-engine-utils'
+
+const { BROADCAST_CHANNEL } = constants
+const { message } = useModal()
 
 export default {
   setup() {
     const registry = getMergeRegistry()
+    const materialsApi = getMetaApi('engine.plugins.materials')
+    const blockApi = getMetaApi('engine.plugins.blockmanage')
+
+    // 此处接收画布内部的错误和警告提示
+    const { data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
+
+    watch(data, (options) => useNotify(options))
+
+    if (isVsCodeEnv) {
+      const appId = useApp().appInfoState.selectedId
+      materialsApi
+        .fetchGroups(appId)
+        .then((groups) => {
+          const blocks = []
+          groups.forEach((group) => {
+            blocks.push(...group.blocks)
+          })
+          blockApi.requestInitBlocks(blocks)
+        })
+        .catch((error) => {
+          message({ message: error.message, status: 'error' })
+        })
+    }
+
+    const handlePopStateEvent = () => {
+      useResource().handlePopStateEvent()
+    }
+
+    window.addEventListener('popstate', handlePopStateEvent)
+
+    onUnmounted(() => {
+      window.removeEventListener('popstate', handlePopStateEvent)
+    })
+
+    watch(
+      useCanvas().isCanvasApiReady,
+      (ready) => {
+        if (ready) {
+          useResource().fetchResource()
+        }
+      },
+      {
+        immediate: true
+      }
+    )
+
     return {
       registry
     }

packages/design-core/src/init.js

@@ -18,7 +18,14 @@ import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } fro
 import { initHttp } from '@opentiny/tiny-engine-http'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
 import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题
-import { defineEntry, mergeRegistry, getMergeMeta, initHook, HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
+import {
+  defineEntry,
+  mergeRegistry,
+  getMergeMeta,
+  initHook,
+  HOOK_NAME,
+  useEditorInfo
+} from '@opentiny/tiny-engine-meta-register'
 import App from './App.vue'
 import defaultRegistry from '../registry.js'
 import { registerConfigurators } from './registerConfigurators'
@@ -77,4 +84,5 @@ export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles
 
   app.mount(selector)
   appMounted?.({ app })
+  useEditorInfo().getUserInfo()
 }

packages/layout/index.js

@@ -1,10 +1,16 @@
 import component from './src/Main.vue'
 import metaData from './meta'
 import { LayoutService } from './src/composable'
+import designSmbConfig from '@opentiny/vue-design-smb'
+import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
 
 export default {
   ...metaData,
   component,
+  options: {
+    configProvider: TinyConfigProvider,
+    configProviderDesign: designSmbConfig
+  },
   metas: [LayoutService]
 }
 

packages/layout/src/DesignPlugins.vue

@@ -49,19 +49,6 @@
           </span>
         </div>
       </li>
-      <li
-        v-if="state.independence"
-        :key="state.bottomNavLists.length + 1"
-        :class="['list-item']"
-        :title="state.independence.title"
-        @click="openAIRobot"
-      >
-        <div>
-          <span class="item-icon">
-            <img class="chatgpt-icon" src="../assets/AI.png" />
-          </span>
-        </div>
-      </li>
     </ul>
   </div>
 
@@ -82,14 +69,6 @@
       </keep-alive>
     </div>
   </div>
-  <!--  AI 悬浮窗  -->
-  <Teleport to="body">
-    <div v-if="robotVisible" class="robot-dialog">
-      <keep-alive>
-        <component :is="robotComponent" @close-chat="robotVisible = false"></component>
-      </keep-alive>
-    </div>
-  </Teleport>
 </template>
 
 <script>
@@ -118,8 +97,6 @@ export default {
     const components = {}
     const iconComponents = {}
     const pluginRef = ref(null)
-    const robotVisible = ref(false)
-    const robotComponent = ref(null)
     const { isTemporaryPage } = usePage()
 
     const {
@@ -139,24 +116,16 @@ export default {
       }
     })
 
-    const completed = ref(false)
-
     const state = reactive({
       prevIdex: -2,
       topNavLists: props.plugins.filter((item) => item.align === 'top'),
       bottomNavLists: props.plugins.filter((item) => item.align === 'bottom'),
       independence: props.plugins.find((item) => item.align === 'independence')
     })
 
-    const doCompleted = () => {
-      if (!completed.value) {
-        completed.value = true
-        useLayout().closePlugin()
-      }
-    }
-
     const clickMenu = ({ item, index }) => {
-      if (item.id === PLUGIN_NAME.EditorHelp) return
+      if (item.id === PLUGIN_NAME.EditorHelp || item.id === PLUGIN_NAME.Robot) return
+
       state.prevIdex = index
 
       // 切换插件与关闭插件时确认
@@ -177,6 +146,7 @@ export default {
         })
       }
     }
+
     watch(isTemporaryPage, () => {
       if (isTemporaryPage.saved) {
         const pagePanel = state.topNavLists?.find((item) => item.id === PLUGIN_NAME.AppManage) || null
@@ -187,10 +157,6 @@ export default {
       }
     })
 
-    const openAIRobot = () => {
-      robotComponent.value = components[PLUGIN_NAME.Robot]
-      robotVisible.value = !robotVisible.value
-    }
     const close = () => {
       state.prevIdex = -2
       useLayout().closePlugin(true)
@@ -205,17 +171,12 @@ export default {
     return {
       state,
       clickMenu,
-      openAIRobot,
       pluginRef,
-      robotVisible,
-      robotComponent,
       close,
       fixPanel,
       pluginsState,
       components,
       iconComponents,
-      completed,
-      doCompleted,
       pluginState
     }
   }
@@ -329,28 +290,10 @@ export default {
       svg {
         font-size: 22px;
       }
-
-      .chatgpt-icon {
-        width: 18px;
-        height: 18px;
-      }
     }
   }
 }
 
-.robot-dialog {
-  position: fixed;
-  width: 700px;
-  z-index: 5;
-  right: 40px;
-  bottom: 40px;
-  background-color: var(--ti-lowcode-common-component-bg);
-  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15);
-  border: 1px solid #dbdbdb;
-  padding: 10px 20px 30px;
-  border-radius: 12px;
-}
-
 :deep(.panel-svg) {
   font-size: 22px;
 }

packages/layout/src/Main.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-config-provider :design="designSmbConfig">
+  <component :is="configProvider" :design="configProviderDesign">
     <div id="tiny-engine">
       <design-toolbars :toolbars="registry.toolbars"></design-toolbars>
       <div class="tiny-engine-main">
@@ -22,44 +22,24 @@
         </div>
       </div>
     </div>
-  </tiny-config-provider>
+  </component>
 </template>
 
 <script>
-import { reactive, watch, onUnmounted } from 'vue'
-import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
-import designSmbConfig from '@opentiny/vue-design-smb'
-import {
-  useResource,
-  useLayout,
-  useEditorInfo,
-  useModal,
-  useApp,
-  useNotify,
-  useCanvas
-} from '@opentiny/tiny-engine-meta-register'
+import { reactive } from 'vue'
+import { useLayout, getMergeRegistry } from '@opentiny/tiny-engine-meta-register'
 import AppManage from '@opentiny/tiny-engine-plugin-page'
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
 import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
 import DesignSettings from './DesignSettings.vue'
-import blockPlugin from '@opentiny/tiny-engine-plugin-block'
-import materials from '@opentiny/tiny-engine-plugin-materials'
-import { useBroadcastChannel } from '@vueuse/core'
-import { constants } from '@opentiny/tiny-engine-utils'
-
-const { message } = useModal()
-const { requestInitBlocks } = blockPlugin.api
-const { fetchGroups } = materials.apis
-const { BROADCAST_CHANNEL } = constants
+import meta from '../meta'
 
 export default {
   name: 'TinyLowCode',
   components: {
     DesignToolbars,
     DesignPlugins,
-    DesignSettings,
-    TinyConfigProvider
+    DesignSettings
   },
   provide() {
     return {
@@ -72,31 +52,17 @@ export default {
     }
   },
   setup() {
+    const layoutRegistry = getMergeRegistry(meta.type)
+    const configProvider = layoutRegistry.options.configProvider
+    const configProviderDesign = layoutRegistry.options.configProviderDesign
+
     const state = reactive({
-      globalClass: '',
-      rightWidth: '',
-      leftWidfth: '',
-      preNode: AppManage,
-      jsClose: null
+      preNode: AppManage
     })
 
     const { layoutState } = useLayout()
     const { plugins } = layoutState
 
-    // 此处接收画布内部的错误和警告提示
-    const { data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
-
-    watch(data, (options) => useNotify(options))
-
-    watch(
-      () => state.jsClose,
-      () => {
-        if (state.preNode) {
-          plugins.render = state.preNode.id
-        }
-      }
-    )
-
     const toggleNav = ({ item, navLists }) => {
       if (navLists) state.preNode = navLists
 
@@ -105,51 +71,13 @@ export default {
       plugins.render = plugins.render === item.id ? null : item.id
     }
 
-    useEditorInfo().getUserInfo()
-
-    watch(
-      useCanvas().isCanvasApiReady,
-      (ready) => {
-        if (ready) {
-          useResource().fetchResource()
-        }
-      },
-      {
-        immediate: true
-      }
-    )
-
-    const handlePopStateEvent = () => {
-      useResource().handlePopStateEvent()
-    }
-
-    window.addEventListener('popstate', handlePopStateEvent)
-
-    if (isVsCodeEnv) {
-      const appId = useApp().appInfoState.selectedId
-      fetchGroups(appId)
-        .then((groups) => {
-          const blocks = []
-          groups.forEach((group) => {
-            blocks.push(...group.blocks)
-          })
-          requestInitBlocks(blocks)
-        })
-        .catch((error) => {
-          message({ message: error.message, status: 'error' })
-        })
-    }
-
-    onUnmounted(() => {
-      window.removeEventListener('popstate', handlePopStateEvent)
-    })
-
     return {
+      configProvider,
+      configProviderDesign,
       state,
       plugins,
       toggleNav,
-      layoutState,
-      designSmbConfig
+      layoutState
     }
   }
 }