fix: micro

src/layout/components/Sidebar/index.vue

@@ -1,168 +1,172 @@
-<template>
-  <a-button
-    v-if="isMobile"
-    class="open-icon"
-    type="primary"
-    @click="openDrawer"
-  >
-    <right-outlined />
-  </a-button>
-  <a-drawer
-      placement="left"
-      :closable="false"
-      :open="drawerVisible"
-      :get-container="false"
-      :style="{ position: 'absolute' }"
-      width="240px"
-      @close="drawerVisible = false"
-    >
-    <a-layout-sider
-        :trigger="null"
-        v-model:collapsed="collapsed"
-        collapsible
-        :style="{backgroundColor: bgColor, overflow: 'hidden'}"
-      >
-        <a-menu
-          v-model:selectedKeys="selectedKeys"
-          :openKeys="openKeys"
-          mode="inline"
-          :style="{ borderRight: 0 }"
-        >
-          <sidebar-item
-            :item="route"
-            v-for="route in sidebarRoute"
-            :key="route.path"
-            :base-path="route.path"
-          />
-        </a-menu>
-    </a-layout-sider>
-  </a-drawer>
-  <a-layout-sider
-    v-if="!isMobile"
-    :style="{backgroundColor: bgColor, overflow: 'hidden', overflowY: 'scroll', boxShadow: `0 1px 4px rgba(0,21,41,.12)`, paddingTop: '6px'}"
-    breakpoint="lg"
-    collapsible
-    v-model:collapsed="collapsed"
-  >
-    <div class="logo" >
-      <img :src="logoPng" alt="" v-if="logoPng">
-    </div>
-    <a-menu
-      v-model:selectedKeys="selectedKeys"
-      :openKeys="openKeys"
-      mode="inline"
-      :style="{ borderRight: 0 }"
-    >
-      <sidebar-item
-        :item="route"
-        v-for="route in sidebarRoute"
-        :key="route.path"
-        :base-path="route.path"
-      />
-    </a-menu>
-  </a-layout-sider>
-
-</template>
-
-<script lang="ts" setup >
-
-import { ref, computed, watch } from 'vue'
-import SidebarItem from './SidebarItem.vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useDesignStore } from '@/store'
-import { useDeviceType } from '@/hooks'
-import { RightOutlined } from '@ant-design/icons-vue'
-import { routes } from '@/router/index'
-import AppConfig from 'AppConfig'
-import { useIsMicro } from '@/hooks/effect'
-
-const designStore = useDesignStore()
-
-const isMobile = useDeviceType()
-
-const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')
-
-const route = useRoute()
-
-const router = useRouter()
-
-const collapsed = ref<boolean>(true)
-
-const logoPng = computed(() => collapsed.value ? AppConfig.logoContract : AppConfig.logoExpand)
-
-const sidebarRoute = ref<any>()
-
-const selectedKeys = ref<string[]>()
-
-const openKeys = ref<string[]>()
-
-const drawerVisible = ref<boolean>(false)
-
-const compatibleRoutes = !useIsMicro() ? router.getRoutes().filter(item => item.path !== '/cloudlink') : router.getRoutes()
-
-watch(
-  () => route.path,
-  () => {
-    sidebarRoute.value = isMobile ? routes : router.getRoutes().find(item => item.path === route.matched[useIsMicro() ? 1 : 0].path)?.children
-    selectedKeys.value = [route.path]
-    openKeys.value = [route.matched[1].path]
-  },
-  {
-    immediate: true
-  }
-)
-
-const openDrawer = () => drawerVisible.value = true
-
-</script>
-
-<style lang="less" scoped >
-/deep/ .ant-layout-sider-children {
-  margin-top: -4px;
-}
-
-.ant-layout-sider::-webkit-scrollbar {
-  width: 0;
-}
-
-.logo {
-  width: 100%;
-  height: 53px;
-  margin: 0px 0px;
-  margin-top: 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  img {
-    width: 60%;
-    height: 70%;
-  }
-}
-
-.mobile-sider {
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
-  pointer-events: none;
-}
-
-.open-icon {
-  width: 50px;
-  height: 50px;
-  position: fixed;
-  top: 200px;
-  left: 0px;
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
-/deep/ .ant-layout-sider-trigger {
-  background-color: #fff !important;
-}
-
-</style>
+<template>
+  <a-button
+    v-if="isMobile"
+    class="open-icon"
+    type="primary"
+    @click="openDrawer"
+  >
+    <right-outlined />
+  </a-button>
+  <a-drawer
+      placement="left"
+      :closable="false"
+      :open="drawerVisible"
+      :get-container="false"
+      :style="{ position: 'absolute' }"
+      width="240px"
+      @close="drawerVisible = false"
+    >
+    <a-layout-sider
+        :trigger="null"
+        v-model:collapsed="collapsed"
+        collapsible
+        :style="{backgroundColor: bgColor, overflow: 'hidden'}"
+      >
+        <a-menu
+          v-model:selectedKeys="selectedKeys"
+          :openKeys="openKeys"
+          mode="inline"
+          :style="{ borderRight: 0 }"
+        >
+          <sidebar-item
+            :item="route"
+            v-for="route in sidebarRoute"
+            :key="route.path"
+            :base-path="route.path"
+          />
+        </a-menu>
+    </a-layout-sider>
+  </a-drawer>
+  <a-layout-sider
+    v-if="!isMobile"
+    :style="{backgroundColor: bgColor, overflow: 'hidden', overflowY: 'scroll', boxShadow: `0 1px 4px rgba(0,21,41,.12)`, paddingTop: '6px'}"
+    breakpoint="lg"
+    collapsible
+    v-model:collapsed="collapsed"
+  >
+    <div class="logo" >
+      <img :src="logoPng" alt="" v-if="logoPng">
+    </div>
+    <a-menu
+      v-model:selectedKeys="selectedKeys"
+      :openKeys="openKeys"
+      mode="inline"
+      :style="{ borderRight: 0 }"
+    >
+      <sidebar-item
+        :item="route"
+        v-for="route in sidebarRoute"
+        :key="route.path"
+        :base-path="route.path"
+      />
+    </a-menu>
+  </a-layout-sider>
+
+</template>
+
+<script lang="ts" setup >
+
+import { ref, computed, watch, onMounted } from 'vue'
+import SidebarItem from './SidebarItem.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useDesignStore } from '@/store'
+import { useDeviceType } from '@/hooks'
+import { RightOutlined } from '@ant-design/icons-vue'
+import { routes } from '@/router/index'
+import AppConfig from 'AppConfig'
+import { useIsMicro } from '@/hooks/effect'
+
+const designStore = useDesignStore()
+
+const isMobile = useDeviceType()
+
+const bgColor = computed(() => designStore.theme ? '#141414' : '#fff')
+
+const route = useRoute()
+
+const router = useRouter()
+
+const collapsed = ref<boolean>(true)
+
+const logoPng = computed(() => collapsed.value ? AppConfig.logoContract : AppConfig.logoExpand)
+
+const sidebarRoute = ref<any>()
+
+const selectedKeys = ref<string[]>()
+
+const openKeys = ref<string[]>()
+
+const drawerVisible = ref<boolean>(false)
+
+const compatibleRoutes = !useIsMicro() ? router.getRoutes().filter(item => item.path !== '/cloudlink') : router.getRoutes()
+
+watch(
+  () => route.path,
+  () => {
+    sidebarRoute.value = isMobile ? routes : router.getRoutes().find(item => item.path === route.matched[useIsMicro() ? 1 : 0].path)?.children
+    selectedKeys.value = [route.path]
+    openKeys.value = [route.matched[1].path]
+  },
+  {
+    immediate: true
+  }
+)
+
+const openDrawer = () => drawerVisible.value = true
+
+onMounted(() => {
+  console.log('我渲染了嗎')
+})
+
+</script>
+
+<style lang="less" scoped >
+/deep/ .ant-layout-sider-children {
+  margin-top: -4px;
+}
+
+.ant-layout-sider::-webkit-scrollbar {
+  width: 0;
+}
+
+.logo {
+  width: 100%;
+  height: 53px;
+  margin: 0px 0px;
+  margin-top: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  img {
+    width: 60%;
+    height: 70%;
+  }
+}
+
+.mobile-sider {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+
+.open-icon {
+  width: 50px;
+  height: 50px;
+  position: fixed;
+  top: 200px;
+  left: 0px;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+/deep/ .ant-layout-sider-trigger {
+  background-color: #fff !important;
+}
+
+</style>

src/layout/layout.vue

@@ -1,68 +1,67 @@
-<template>
-  <RouterView v-if="isMicro" ></RouterView>
-    <a-layout class="a-layout" v-else  >
-      <a-layout >
-        <SiderBar />
-        <span style="width: 100%;" >
-          <Navbar />
-          <div class="content" id="content"  >
-            <!-- <RouterTravel /> -->
-            <div class="router-view" >
-              <RouterView ></RouterView>
-            </div>
-          </div>
-        </span>
-      </a-layout>
-    </a-layout>
-</template>
-
-<script  lang="ts" setup >
-import Navbar from './navbar.vue'
-import SiderBar from './components/Sidebar/index.vue'
-import { useIsMicro } from '@/hooks/effect'
-
-const isMicro = useIsMicro()
-
-</script>
-
-<style lang="less" scoped >
-
-.a-layout {
-  /* width: 100vw; */
-  height: 100vh;
-  overflow: hidden;
-  .content {
-    width: 100%;
-    height: 100%;
-    border-top-left-radius: 24px;
-    position: relative;
-    .router-view {
-      width: 100%;
-      height: 100%;
-      padding: 0 24px 24px;
-      padding-bottom: 160px;
-      margin-top: 24px;
-      // box-sizing: border-box;
-      overflow: hidden;
-      overflow-y: scroll;
-    }
-  }
-}
-
-#components-layout-demo-top-side-2 .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-row-rtl #components-layout-demo-top-side-2 .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-
-.site-layout-background {
-  background: #fff;
-}
-</style>
+<template>
+  <RouterView v-if="isMicro" ></RouterView>
+    <a-layout class="a-layout" v-else  >
+      <a-layout >
+        <SiderBar />
+        <span style="width: 100%;" >
+          <Navbar />
+          <div class="content" id="content"  >
+            <div class="router-view" >
+              <RouterView ></RouterView>
+            </div>
+          </div>
+        </span>
+      </a-layout>
+    </a-layout>
+</template>
+
+<script  lang="ts" setup >
+import Navbar from './navbar.vue'
+import SiderBar from './components/Sidebar/index.vue'
+import { useIsMicro } from '@/hooks/effect'
+
+const isMicro = useIsMicro()
+
+</script>
+
+<style lang="less" scoped >
+
+.a-layout {
+  /* width: 100vw; */
+  height: 100vh;
+  overflow: hidden;
+  .content {
+    width: 100%;
+    height: 100%;
+    border-top-left-radius: 24px;
+    position: relative;
+    .router-view {
+      width: 100%;
+      height: 100%;
+      padding: 0 24px 24px;
+      padding-bottom: 160px;
+      margin-top: 24px;
+      // box-sizing: border-box;
+      overflow: hidden;
+      overflow-y: scroll;
+    }
+  }
+}
+
+#components-layout-demo-top-side-2 .logo {
+  float: left;
+  width: 120px;
+  height: 31px;
+  margin: 16px 24px 16px 0;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.ant-row-rtl #components-layout-demo-top-side-2 .logo {
+  float: right;
+  margin: 16px 0 16px 24px;
+}
+
+.site-layout-background {
+  background: #fff;
+}
+</style>

src/main.ts

@@ -17,21 +17,10 @@ const pinia = createPinia()
 
 pinia.use(piniaPluginPersistedstate)
 
-const app = createApp(App)
-app.use(router)
-  .use(pinia)
-  .use(antd)
-  .use(UsePro)
-  .use(cronAnt)
-  .directive('keyboard', keyboard)
-  .provide('useStaticImg', assets)
-  // .mount('#cloudlink-ui')
-  // .mount('#cloudlink-ui')
-
 // `trace` 是组件层级结构的追踪
-app.config.warnHandler = (msg, instance, trace) => {
+// app.config.warnHandler = (msg, instance, trace) => {
 
-}
+// }
 
 // 全局注册一些辅助性的函数 desc在 global.d.ts下
 window.Map.prototype.toArray = function () {
@@ -57,17 +46,24 @@ window.Array.prototype.toMap = function (key: string, valueKey?: string): Map<st
 }
 
 let _router = router
-let instance
+let instance: any = null
 
 const render = (props: any = {}) => {
   const { container, data } = props
 
   if (window.__POWERED_BY_QIANKUN__) {
-    console.log('父应用的data:', data.store.useJLYAppRouter().count)
     data.store.useJLYAppRouter().setChildrenSiderRoutes(routes.map(item => item.children).filter(_ => !!_))
   }
 
-  instance = app.mount(container ? container.querySelector('#cloudlink-ui') : '#cloudlink-ui') as any
+  instance = createApp(App)
+  instance.use(router)
+    .use(pinia)
+    .use(antd)
+    .use(UsePro)
+    .use(cronAnt)
+    .directive('keyboard', keyboard)
+    .provide('useStaticImg', assets)
+  instance.mount(container ? container.querySelector('#cloudlink-ui') : '#cloudlink-ui') as any
 }
 
 /** eslint-disable */
@@ -76,17 +72,19 @@ if (!window.__POWERED_BY_QIANKUN__) {
 }
 
 export async function bootstrap () {
-  console.log('vue app bootstraped')
+  console.log('cloudlink app bootstraped')
 }
 
 export async function mount (props) {
-  console.log('props from main framework', props.data)
+  console.log('cloudlink 子应用 挂载')
   render(props)
 }
 
 export async function unmount () {
-  instance.$destroy()
-  instance.$el.innerHTML = ''
+  // if (instance.$destroy) {
+  instance.unmount()
+  instance._container.innerHTML = ''
   instance = null
   _router = null as any
+  // }
 }

src/router/index.ts

@@ -478,7 +478,8 @@ const microRouter = useIsMicro()
         path: '/cloudlink',
         name: 'cloudlink',
         component: RouterView,
-        children: routes
+        redirect: _routes[0].redirect,
+        children: _routes
       }
     ]
   : routes