feat: commit codes

apps/shell-vue-app/src/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { onBeforeUnmount, reactive } from 'vue'
+import WujieVue from 'wujie-vue3'
 
+const { bus } = WujieVue
 const apps = reactive([
   {
     name: 'vue3',
@@ -17,14 +19,29 @@ const apps = reactive([
 function createContext() {
   const windowMap = new Map()
 
-  return {
-
+  function setWindow(win: Window) {
+    windowMap.set(win.name, win)
   }
+
+  return reactive({
+    setWindow,
+    router: {
+      push(name: string, path: string) {
+        const win = windowMap.get(name)
+        if (win.$router) {
+          win.$router.push(path)
+          showApp(name)
+        }
+      },
+    },
+  })
 }
 
-function showApp(index: number) {
-  apps.forEach((x, idx) => {
-    x.visible = index === idx
+const ctx = createContext()
+
+function showApp(name: string) {
+  apps.forEach((x) => {
+    x.visible = x.name === name
   })
 }
 
@@ -33,11 +50,12 @@ function beforeLoad() {
 }
 
 function beforeMount(win: Window) {
+  ctx.setWindow(win)
   console.log(win)
 }
 
-function afterMount(win: Window) {
-  console.log(win)
+function afterMount(_win: Window) {
+
 }
 
 function beforeUnmount() {
@@ -47,24 +65,72 @@ function beforeUnmount() {
 function afterUnmount() {
 
 }
+
+const { router } = ctx
+
+const tabs = reactive<{ app: string, path: string }[]>([])
+
+function addTab(app: string, path: string) {
+  const x = tabs.find((x) => {
+    return x.app === app && x.path === path
+  })
+  if (!x) {
+    tabs.push({
+      app,
+      path,
+    })
+  }
+}
+bus.$on('addTab', addTab)
+onBeforeUnmount(() => {
+  bus.$off('addTab', addTab)
+})
 </script>
 
 <template>
   <div class="flex">
     <div class="w-72 border-r flex flex-col min-h-screen">
-      <button @click="showApp(0)">
-        切换到 Vue3 项目
+      <button @click="showApp('vue3')">
+        显示 Vue3 项目
+      </button>
+      <button @click="showApp('vue2')">
+        显示 Vue2 项目
+      </button>
+      <button @click="router.push('vue3', '/')">
+        切换到 Vue3 /
+      </button>
+      <button @click="router.push('vue3', '/foo')">
+        切换到 Vue3 /foo
+      </button>
+      <button @click="router.push('vue3', '/bar')">
+        切换到 Vue3 /bar
+      </button>
+      <button @click="router.push('vue2', '/')">
+        切换到 Vue2 /
+      </button>
+      <button @click="router.push('vue2', '/foo')">
+        切换到 Vue2 /foo
       </button>
-      <button @click="showApp(1)">
-        切换到 Vue2 项目
+      <button @click="router.push('vue2', '/bar')">
+        切换到 Vue2 /bar
       </button>
     </div>
     <div class="grow">
-      <WujieVue
-        v-for="app in apps" v-show="app.visible" :key="app.name" width="100%" height="100%" :name="app.name"
-        :url="app.url" :sync="true" :beforeLoad="beforeLoad" :beforeMount="beforeMount" :afterMount="afterMount"
-        :beforeUnmount="beforeUnmount" :afterUnmount="afterUnmount"
-      />
+      <div class="border-b p-4 space-x-2">
+        <div
+          v-for="tab in tabs" :key="tab.path" class="border rounded-lg inline-block p-1 cursor-pointer hover:bg-sky-700"
+          @click="router.push(tab.app, tab.path)"
+        >
+          {{ tab.app }} {{ tab.path }}
+        </div>
+      </div>
+      <div>
+        <WujieVue
+          v-for="app in apps" v-show="app.visible" :key="app.name" width="100%" height="100%" :name="app.name"
+          :url="app.url" :sync="true" :beforeLoad="beforeLoad" :beforeMount="beforeMount" :afterMount="afterMount"
+          :beforeUnmount="beforeUnmount" :afterUnmount="afterUnmount"
+        />
+      </div>
     </div>
   </div>
 </template>

apps/vue-app/src/App.vue

@@ -4,7 +4,9 @@
 
 <template>
   <div>
-    <h1>Vue3</h1>
+    <h1 class="text-4xl">
+      Vue3
+    </h1>
     <div>
       <router-view v-slot="{ Component }">
         <transition>

apps/vue-app/src/main.ts

@@ -13,6 +13,10 @@ if (window.__POWERED_BY_WUJIE__) {
     instance.mount('#app')
     window.$router = router
     window.$instance = instance
+    window.$wujie?.bus.$emit('addTab', 'vue3', '/')
+    router.afterEach((to) => {
+      window.$wujie?.bus.$emit('addTab', 'vue3', to.path)
+    })
   }
   window.__WUJIE_UNMOUNT = () => {
     instance.unmount()

apps/vue2-app/src/App.vue

@@ -4,7 +4,9 @@
 
 <template>
   <div>
-    <h1>Vue2</h1>
+    <h1 class="text-4xl">
+      Vue2
+    </h1>
     <div>
       <transition>
         <keep-alive>

apps/vue2-app/src/main.ts

@@ -15,6 +15,13 @@ if (window.__POWERED_BY_WUJIE__) {
   window.__WUJIE_MOUNT = () => {
     const router = new VueRouter({ routes })
     instance = new Vue({ router, render: h => h(App), pinia }).$mount('#app')
+    window.$router = router
+    window.$instance = instance
+    window.$wujie?.bus.$emit('addTab', 'vue2', '/')
+
+    router.afterEach((to) => {
+      window.$wujie?.bus.$emit('addTab', 'vue2', to.path)
+    })
   }
   window.__WUJIE_UNMOUNT = () => {
     instance.$destroy()