fix: 新增配置qiankun

src/layout/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import Header from "./components/Header.vue";
 import Sider from "./components/Sider.vue";
 import {
@@ -9,6 +9,11 @@ import {
   FullscreenExitOutlined,
 } from "@ant-design/icons-vue";
 import { useEventListener } from "@vueuse/core";
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
+
+const __POWERED_BY_QIANKUN__ = computed(() => {
+  return qiankunWindow.__POWERED_BY_QIANKUN__ || window.proxy?.__POWERED_BY_QIANKUN__
+})
 
 // const userInfoStore = useUserInfoStore();
 const isCollapsed = ref(false);
@@ -34,7 +39,7 @@ const handleExitFullscreen = () => {
 </script>
 
 <template>
-  <section class="root">
+  <section v-if="!__POWERED_BY_QIANKUN__" class="root">
     <section
       class="left-aside"
       :class="{ 'left-aside-collapsed': isCollapsed }"
@@ -68,6 +73,7 @@ const handleExitFullscreen = () => {
       </a-float-button>
     </section>
   </section>
+  <router-view v-else />
 </template>
 
 <style lang="less" scoped>

src/main.ts

@@ -1,14 +1,55 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
-import router from "./router";
+import { createProjectRouter } from './router'
 import "./global.less";
 import VueGridLayout from "vue-grid-layout"; // 引入layout
+import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
 
-const app = createApp(App);
+let app
+function render(props: Object = {}) {
+  app = createApp(App);
+  const router = createProjectRouter(props.base)
+  app.use(router)
+  app.use(VueGridLayout);
+  app.use(createPinia())
+  app.mount("#y-code-app")
+  // const getContainer = () => {
+  //   props.container ? props.container.querySelector('#y-code-container') : document.getElementById('y-code-container')
+  // }
+  // const container = getContainer()
+  // if (container) {
+  //   app.mount(container)
+  // } else {
+  //   window.addEventListener("DOMContentLoaded", () => {
+  //     app.mount(getContainer())
+  //   })
+  // }
+}
 
-app.use(VueGridLayout);
-app.use(createPinia());
-app.use(router);
+const __POWERED_BY_QIANKUN__ = qiankunWindow.__POWERED_BY_QIANKUN__ || window.proxy?.__POWERED_BY_QIANKUN__
+
+if (__POWERED_BY_QIANKUN__) {
+  renderWithQiankun({
+    bootstrap() {
+      console.log('bootstrap')
+      return Promise.resolve()
+    },
+    mount(props) {
+      console.log('mount')
+      render(props)
+      return Promise.resolve()
+    },
+    unmount() {
+      console.log('unmount')
+      if (app) {
+        app.unmount()
+      }
+      return Promise.resolve()
+    },
+    update() {},
+  })
+} else {
+  render()
+}
 
-app.mount("#app");

src/router/index.ts

@@ -1,13 +1,19 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHistory, type Router } from 'vue-router';
 import { titleGuard } from './guards';
 import routeList from './routes';
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
 
-const router = createRouter({
-  history: createWebHistory(''),
-  routes: routeList,
-});
+let router: Router | null = null
+export const createProjectRouter = (base = '') => {
+  const __POWERED_BY_QIANKUN__ = qiankunWindow.__POWERED_BY_QIANKUN__ || window.proxy?.__POWERED_BY_QIANKUN__
+  router = createRouter({
+    history: createWebHistory(base || (__POWERED_BY_QIANKUN__ ? '/y-code-app/' : '')),
+    routes: routeList,
+  })
 
-// 全局前置守卫
-router.beforeEach(titleGuard);
+  // 全局前置守卫
+  router.beforeEach(titleGuard)
+  return router
+}
 
 export default router;

src/views/page-show-info/page-info/index,.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-view-wrapp">
-    <div class="project">
+    <div v-if="!isInQiankun" class="project">
       <span>项目: </span>
       <a-select
         style="min-width: 160px"
@@ -110,7 +110,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, shallowRef, computed, onMounted } from "vue";
+import { ref, shallowRef, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { BarsOutlined } from "@ant-design/icons-vue";
 // utils
@@ -120,6 +120,7 @@ import { searchInfo } from "@/api/preview/index";
 import { getProjectDrop } from "@/api/common";
 import { getPageInfo } from "./service";
 import type { SelectProps } from "ant-design-vue";
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
 
 interface ItemDetail {
   id: number | string;
@@ -156,6 +157,10 @@ const pageId = shallowRef(route.query.pageId);
 const projectOptions = shallowRef<Option[]>();
 const isDraggable = false;
 
+const isInQiankun = computed(() => {
+  return qiankunWindow.__POWERED_BY_QIANKUN__ || window.proxy?.__POWERED_BY_QIANKUN__
+})
+
 const layoutList = computed(() => {
   return ids.value.map((item, index) => {
     // 当前是第几行
@@ -177,6 +182,10 @@ const ids = ref<Item[]>([]);
 
 const pLimit = PLimit(2);
 
+watch(() => route.query.viewId, () => {
+  getPageInfoData()
+})
+
 onMounted(() => {
   getProjectList();
 });
@@ -190,8 +199,8 @@ const handleProjectChange = (value: string | number, option: Option) => {
   router.replace({
     path: route.path,
     query: {
-      projectTag: projectTag.value,
       ...route.query,
+      projectTag: projectTag.value,
     },
   });
   getPageInfoData();
@@ -205,8 +214,11 @@ const getProjectList = () => {
     .then((res) => {
       if (res.code === 200) {
         projectOptions.value = res.data;
-        projectTag.value = res.data[0].mark;
-        projectVal.value = res.data[0].value;
+        projectTag.value = route.query.projectTag || res.data[0].mark;
+        projectVal.value =
+          projectOptions.value?.find((item) => {
+            return item.mark === route.query.projectTag;
+          })?.value || res.data[0].value;
         getPageInfoData();
       }
     })
@@ -238,16 +250,29 @@ const getSinglePreview = (data: {
 
 // 获取页面信息所有的id
 const getPageInfoData = () => {
-  getPageInfo({ mark: projectTag.value, page_id: pageId.value ?? "-1" })
+  getPageInfo({ mark:projectTag.value, page_id: pageId.value ?? "-1" })
     .then((res) => {
       if (res.code === 200) {
-        ids.value = res.data?.map((item: any) => {
-          return {
-            id: item.preview_id,
-            data: item,
-            loading: false,
-          };
-        });
+        if (route.query.viewId) {
+          ids.value = res.data?.filter((item: any) => {
+            return item.preview_id === Number(route.query.viewId);
+          }).map((item: any) => {
+            return {
+              id: item.preview_id,
+              data: item,
+              loading: false,
+            }
+          })
+        } else {
+          ids.value = res.data?.map((item: any) => {
+            return {
+              id: item.preview_id,
+              data: item,
+              loading: false,
+            };
+          });
+        }
+       
         getAllCardsData();
       }
     })