diff --git a/apps/shell-vue-app/package.json b/apps/shell-vue-app/package.json
index 263345a..ded9492 100644
--- a/apps/shell-vue-app/package.json
+++ b/apps/shell-vue-app/package.json
@@ -9,7 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "element-plus": "^2.7.7",
     "vue": "^3.4.29",
+    "vue-router": "^4.4.0",
     "wujie-vue3": "^1.0.22"
   },
   "devDependencies": {
diff --git a/apps/shell-vue-app/src/App.vue b/apps/shell-vue-app/src/App.vue
index d8ae8be..8864a8d 100644
--- a/apps/shell-vue-app/src/App.vue
+++ b/apps/shell-vue-app/src/App.vue
@@ -1,139 +1,9 @@
 <script setup lang="ts">
-import { onBeforeUnmount, reactive } from 'vue'
-import WujieVue from 'wujie-vue3'
 
-const { bus } = WujieVue
-const apps = reactive([
-  {
-    name: 'vue3',
-    url: '//localhost:8001/',
-    visible: true,
-  },
-  {
-    name: 'vue2',
-    url: '//localhost:8002/',
-    visible: false,
-  },
-])
-
-function createContext() {
-  const windowMap = new Map()
-
-  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)
-        }
-      },
-    },
-  })
-}
-
-const ctx = createContext()
-
-function showApp(name: string) {
-  apps.forEach((x) => {
-    x.visible = x.name === name
-  })
-}
-
-function beforeLoad() {
-
-}
-
-function beforeMount(win: Window) {
-  ctx.setWindow(win)
-  console.log(win)
-}
-
-function afterMount(_win: Window) {
-
-}
-
-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('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="router.push('vue2', '/bar')">
-        切换到 Vue2 /bar
-      </button>
-    </div>
-    <div class="grow">
-      <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"
-          :alive="true"
-        />
-      </div>
-    </div>
-  </div>
+  <router-view />
 </template>
 
 <style scoped></style>
diff --git a/apps/shell-vue-app/src/layout/index.vue b/apps/shell-vue-app/src/layout/index.vue
new file mode 100644
index 0000000..a2764c4
--- /dev/null
+++ b/apps/shell-vue-app/src/layout/index.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { reactive } from "vue";
+
+const apps = reactive([
+  {
+    name: "vue3",
+    path: "/vue3",
+    url: "//localhost:8001/",
+    visible: true,
+    children: [
+      {
+        name: "foo",
+        path: "/vue3-sub/foo",
+        url: "//localhost:8001/foo",
+      },
+      {
+        name: "bar",
+        path: "/vue3-sub/bar",
+        url: "//localhost:8001/bar",
+      },
+    ],
+  },
+  {
+    name: "vue2",
+    path: "/vue2",
+    url: "//localhost:8002/",
+    visible: false,
+    children: [
+      {
+        name: "foo",
+        path: "/vue2-sub/foo",
+        url: "//localhost:8002/foo",
+      },
+      {
+        name: "bar",
+        path: "/vue2-sub/bar",
+        url: "//localhost:8002/bar",
+      },
+    ],
+  },
+]);
+</script>
+
+<template>
+  <div>
+    <div class="fixed top-0 bottom-0 left-0 z-50 w-52 bg-black">
+      <el-scrollbar>
+        <el-menu
+          default-active="vue3"
+          :unique-opened="false"
+          :collapse-transition="false"
+          mode="vertical"
+        >
+          <el-sub-menu v-for="item in apps" :key="item.name" :index="item.name">
+            <template #title>
+              <span>{{ item.name }}</span>
+            </template>
+            <router-link
+              v-for="ele in item.children"
+              :key="item.name + ele.name"
+              :to="ele.path"
+            >
+              <el-menu-item :index="item.name + '-' + ele.path">
+                <span class="text-white">{{ ele.name }}</span>
+              </el-menu-item>
+            </router-link>
+          </el-sub-menu>
+        </el-menu>
+      </el-scrollbar>
+    </div>
+    <section
+      class="relative h-full min-h-screen ml-52 overflow-y-auto bg-white"
+    >
+      <router-view />
+    </section>
+  </div>
+</template>
diff --git a/apps/shell-vue-app/src/main.ts b/apps/shell-vue-app/src/main.ts
index 10dcab6..5612377 100644
--- a/apps/shell-vue-app/src/main.ts
+++ b/apps/shell-vue-app/src/main.ts
@@ -2,7 +2,28 @@ import { createApp } from 'vue'
 import './style.css'
 import WujieVue from 'wujie-vue3'
 import App from './App.vue'
+import router from './router/index.ts'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
-const { bus, setupApp, preloadApp, destroyApp } = WujieVue
+import { WUJIE_MESSAGE_CODE } from "../../../shared/constants/index.ts";
 
-createApp(App).use(WujieVue).mount('#app')
+const app = createApp(App)
+
+const { bus } = WujieVue;
+
+bus.$on(WUJIE_MESSAGE_CODE.SUB_ROUTE_CHANGE, (name: string, path: string) => {
+  const mainName = `${name}-sub`;
+  const mainPath = `/${name}-sub${path}`;
+  const currentName = router.currentRoute.value.name;
+  const currentPath = router.currentRoute.value.path;
+  if (mainName === currentName && mainPath !== currentPath) {
+    router.push({ path: mainPath });
+  }
+});
+
+app.use(WujieVue)
+app.use(ElementPlus)
+app.use(router)
+
+app.mount('#app')
diff --git a/apps/shell-vue-app/src/pages/common/index.vue b/apps/shell-vue-app/src/pages/common/index.vue
new file mode 100644
index 0000000..6b649a3
--- /dev/null
+++ b/apps/shell-vue-app/src/pages/common/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <WujieVue
+    width="100%"
+    height="100%"
+    :name="props.name"
+    :url="url"
+    :alive="props.alive"
+    :beforeLoad="beforeLoad"
+    :beforeMount="beforeMount"
+    :afterMount="afterMount"
+    :beforeUnmount="beforeUnmount"
+    :afterUnmount="afterUnmount"
+  ></WujieVue>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, watch } from "vue";
+import { useRoute } from "vue-router";
+import wujieVue from "wujie-vue3";
+
+const route = useRoute();
+
+const props = defineProps({
+  url: String,
+  name: String,
+  alive: Boolean,
+});
+
+const url = computed(() => {
+  return props.url + (`${route.params.path ? route.params.path : ""}`);
+});
+
+watch(() => route.params.path, (newPath) => {
+  wujieVue.bus.$emit(`${props.name}-router-change`, newPath ? newPath : '');
+}, { immediate: true });
+
+function beforeLoad() {}
+
+function beforeMount() {
+  
+}
+
+function afterMount(_win: Window) {}
+
+function beforeUnmount() {}
+
+function afterUnmount() {}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/apps/shell-vue-app/src/router/index.ts b/apps/shell-vue-app/src/router/index.ts
new file mode 100644
index 0000000..af633c4
--- /dev/null
+++ b/apps/shell-vue-app/src/router/index.ts
@@ -0,0 +1,73 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+const Layout = () => import("../layout/index.vue");
+const Common = () => import("../pages/common/index.vue");
+
+// 静态路由
+export const constantRoutes: any[] = [
+  {
+    path: "/",
+    redirect: "/vue3-sub/index",
+  },
+
+  {
+    path: "/",
+    name: "/",
+    component: Layout,
+    children: [
+      {
+        path: "/vue3",
+        name: "Vue3",
+        component: Common,
+        props: {
+          url: "//localhost:8001/",
+          alive: true,
+          name: "vue3"
+        },
+        key: "vue3"
+      },
+      {
+        path: "/vue2",
+        name: "Vue2",
+        component: Common,
+        props: {
+          url: "//localhost:8002/",
+          alive: true,
+          name: "vue2"
+        },
+        key: "vue2"
+      },
+      {
+        path: "/vue3-sub/:path",
+        name: "vue3-sub",
+        component: Common,
+        props: {
+          url: "//localhost:8001/",
+          alive: true,
+          name: "vue3"
+        },
+        key: "vue3"
+      },
+      {
+        path: "/vue2-sub/:path",
+        name: "vue2-sub",
+        component: Common,
+        props: {
+          url: "//localhost:8002/",
+          alive: true,
+          name: "vue2"
+        },
+        key: "vue2"
+      }
+    ],
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: constantRoutes,
+  // 刷新时，滚动条位置还原
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
+
+export default router;
\ No newline at end of file
diff --git a/apps/shell-vue-app/src/style.css b/apps/shell-vue-app/src/style.css
index b0895f8..a8f385a 100644
--- a/apps/shell-vue-app/src/style.css
+++ b/apps/shell-vue-app/src/style.css
@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --el-menu-text-color: #d7bbbb !important;
+  --el-menu-hover-text-color: #d7bbbb !important;
+  --el-menu-bg-color: #000 !important;
+  --el-menu-hover-bg-color: #378ae7 !important;
+  --el-menu-active-color: #ffffff !important;
+}
+
 html {
   @apply bg-slate-900 text-white;
 }
diff --git a/apps/shell-vue-app/src/utils/common.ts b/apps/shell-vue-app/src/utils/common.ts
new file mode 100644
index 0000000..4f0b456
--- /dev/null
+++ b/apps/shell-vue-app/src/utils/common.ts
@@ -0,0 +1,10 @@
+/**
+ * 判断是否是外部链接
+ *
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path: string) {
+  const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path);
+  return isExternal;
+}
\ No newline at end of file
diff --git a/apps/shell-vue-app/src/utils/index.ts b/apps/shell-vue-app/src/utils/index.ts
new file mode 100644
index 0000000..a18f847
--- /dev/null
+++ b/apps/shell-vue-app/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './common';
\ No newline at end of file
diff --git a/apps/shell-vue-app/tsconfig.app.json b/apps/shell-vue-app/tsconfig.app.json
index b8e9723..1bb6e5b 100644
--- a/apps/shell-vue-app/tsconfig.app.json
+++ b/apps/shell-vue-app/tsconfig.app.json
@@ -23,5 +23,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../../shared/constants/**/*.ts"]
 }
diff --git a/apps/vue-app/src/App.vue b/apps/vue-app/src/App.vue
index 747f39b..d019d40 100644
--- a/apps/vue-app/src/App.vue
+++ b/apps/vue-app/src/App.vue
@@ -1,26 +1,25 @@
 <script setup lang="ts">
-const subAppLocation = window.__POWERED_BY_WUJIE__ ? window.$wujie.location : window.location
+import { onMounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { WUJIE_MESSAGE_CODE } from "../../../shared/constants/index";
 
-if (window.__WUJIE?.degrade || !window.Proxy || !window.CustomElementRegistry) {
-  window.$wujie.location.href = 'https://v2.vuejs.org/'
-}
-else {
-  window.location.href = 'https://wujicode.cn/xy/app/prod/official/index'
-}
+const route = useRoute();
+const $router = useRouter();
 
-function setHref(href: string) {
-  if (window.__WUJIE?.degrade || !window.Proxy || !window.CustomElementRegistry) {
-    window.$wujie.location.href = 'https://v2.vuejs.org/'
-  }
-  else {
-    window.location.href = 'https://wujicode.cn/xy/app/prod/official/index'
-  }
-}
+watch(() => window.$wujie, () => {
+  window.$wujie?.bus.$emit(WUJIE_MESSAGE_CODE.SUB_ROUTE_CHANGE, "vue3", route.path);
+});
+
+onMounted(() => {
+  window.$wujie?.bus.$on(WUJIE_MESSAGE_CODE.VUE3_ROUTE_CHANGE, (path: string) => {
+      return $router.push(path);
+    });
+});
 </script>
 
 <template>
   <div>
-    <h1 class="text-4xl">
+    <h1 class="text-4xl text-black">
       Vue3
     </h1>
     <div>
@@ -33,30 +32,15 @@ function setHref(href: string) {
       </router-view>
     </div>
     <div class="border-t">
-      <RouterLink to="/">
-        Index
-      </RouterLink>
-      <RouterLink to="/foo">
-        Foo
-      </RouterLink>
-      <RouterLink to="/bar">
-        Bar
-      </RouterLink>
-      <h2>
-        window.location.href
-      </h2>
-      <button @click="setHref('/')">
+      <router-link to="/index">
         Index
-      </button>
-      <button @click="setHref('/foo')">
+      </router-link>
+      <router-link to="/foo">
         Foo
-      </button>
-      <button @click="setHref('/bar')">
+      </router-link>
+      <router-link to="/bar">
         Bar
-      </button>
-      <!-- <a href="/">Index</a>
-      <a href="/foo">Foo</a>
-      <a href="/bar">bar</a> -->
+      </router-link>
     </div>
   </div>
 </template>
diff --git a/apps/vue-app/src/main.ts b/apps/vue-app/src/main.ts
index e6f0aea..823de6b 100644
--- a/apps/vue-app/src/main.ts
+++ b/apps/vue-app/src/main.ts
@@ -13,10 +13,6 @@ 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()
diff --git a/apps/vue-app/src/pages/index.vue b/apps/vue-app/src/pages/index.vue
index 2844e9b..5c497e5 100644
--- a/apps/vue-app/src/pages/index.vue
+++ b/apps/vue-app/src/pages/index.vue
@@ -4,7 +4,7 @@
 
 <template>
   <div>
-    index
+    index5454
     <input type="range">
   </div>
 </template>
diff --git a/apps/vue-app/src/router.ts b/apps/vue-app/src/router.ts
index 6a2ca69..19b17b2 100644
--- a/apps/vue-app/src/router.ts
+++ b/apps/vue-app/src/router.ts
@@ -1,9 +1,10 @@
-import Index from './pages/index.vue'
-import Bar from './pages/bar.vue'
-import Foo from './pages/foo.vue'
+import Index from "./pages/index.vue";
+import Bar from "./pages/bar.vue";
+import Foo from "./pages/foo.vue";
 
 export const routes = [
-  { path: '/', component: Index },
-  { path: '/foo', component: Foo },
-  { path: '/Bar', component: Bar },
-]
+  { path: "/", redirect: "/index" },
+  { path: "/index", component: Index },
+  { path: "/foo", component: Foo },
+  { path: "/Bar", component: Bar },
+];
diff --git a/apps/vue-app/tsconfig.app.json b/apps/vue-app/tsconfig.app.json
index b8e9723..1bb6e5b 100644
--- a/apps/vue-app/tsconfig.app.json
+++ b/apps/vue-app/tsconfig.app.json
@@ -23,5 +23,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "../../shared/constants/**/*.ts"]
 }
diff --git a/apps/vue2-app/src/App.vue b/apps/vue2-app/src/App.vue
index f848cd8..0943dc6 100644
--- a/apps/vue2-app/src/App.vue
+++ b/apps/vue2-app/src/App.vue
@@ -1,22 +1,20 @@
-<script setup lang="ts">
-import { subAppLocation } from './router'
-
-function setHref(href: string) {
-  // subAppLocation.href = href
-  console.log(subAppLocation)
-  console.log(window.$wujie.location.href)
-  // window.$wujie.location.href = href
-  window.$wujie.location.href = href
-  console.log(window.$wujie.location.href)
-  // window.location.href = href
-}
+<script lang="ts">
+import { WUJIE_MESSAGE_CODE } from "../../../shared/constants/index";
+export default {
+  watch: {
+    $route() {
+      window.$wujie?.bus.$emit(WUJIE_MESSAGE_CODE.SUB_ROUTE_CHANGE, "vue2", this.$route.path);
+    },
+  },
+  mounted() {
+    window.$wujie?.bus.$on(WUJIE_MESSAGE_CODE.VUE2_ROUTE_CHANGE, (path: string) => this.$router.push(path));
+  },
+};
 </script>
 
 <template>
   <div>
-    <h1 class="text-4xl">
-      Vue2
-    </h1>
+    <h1 class="text-4xl text-black">Vue2</h1>
     <div>
       <transition>
         <keep-alive>
@@ -25,27 +23,9 @@ function setHref(href: string) {
       </transition>
     </div>
     <div class="border-t">
-      <RouterLink to="/">
-        Index
-      </RouterLink>
-      <RouterLink to="/foo">
-        Foo
-      </RouterLink>
-      <RouterLink to="/bar">
-        Bar
-      </RouterLink>
-      <h2>
-        window.location.href
-      </h2>
-      <button @click="setHref('/')">
-        Index
-      </button>
-      <button @click="setHref('/foo')">
-        Foo
-      </button>
-      <button @click="setHref('/bar')">
-        Bar
-      </button>
+      <router-link to="/index"> Index </router-link>
+      <router-link to="/foo"> Foo </router-link>
+      <router-link to="/bar"> Bar </router-link>
     </div>
   </div>
 </template>
diff --git a/apps/vue2-app/src/main.ts b/apps/vue2-app/src/main.ts
index 57e35bf..adf45e4 100644
--- a/apps/vue2-app/src/main.ts
+++ b/apps/vue2-app/src/main.ts
@@ -17,11 +17,6 @@ if (window.__POWERED_BY_WUJIE__) {
     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()
diff --git a/apps/vue2-app/src/pages/bar.vue b/apps/vue2-app/src/pages/bar.vue
index 7dabfce..cb52d8a 100644
--- a/apps/vue2-app/src/pages/bar.vue
+++ b/apps/vue2-app/src/pages/bar.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="text-black">
     bar
     <input type="range">
   </div>
diff --git a/apps/vue2-app/src/pages/foo.vue b/apps/vue2-app/src/pages/foo.vue
index d79ee19..872b04d 100644
--- a/apps/vue2-app/src/pages/foo.vue
+++ b/apps/vue2-app/src/pages/foo.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="text-black">
     foo
     <input type="range">
   </div>
diff --git a/apps/vue2-app/src/pages/index.vue b/apps/vue2-app/src/pages/index.vue
index 2844e9b..a0ead8d 100644
--- a/apps/vue2-app/src/pages/index.vue
+++ b/apps/vue2-app/src/pages/index.vue
@@ -3,8 +3,8 @@
 </script>
 
 <template>
-  <div>
-    index
+  <div class="text-black">
+    indexindex5454
     <input type="range">
   </div>
 </template>
diff --git a/apps/vue2-app/src/router.ts b/apps/vue2-app/src/router.ts
index 61cc9a7..4b34de5 100644
--- a/apps/vue2-app/src/router.ts
+++ b/apps/vue2-app/src/router.ts
@@ -1,17 +1,20 @@
-import Vue from 'vue'
-import type { RouteConfig } from 'vue-router'
-import VueRouter from 'vue-router'
+import Vue from "vue";
+import type { RouteConfig } from "vue-router";
+import VueRouter from "vue-router";
 
-import Index from './pages/index.vue'
-import Bar from './pages/bar.vue'
-import Foo from './pages/foo.vue'
+import Index from "./pages/index.vue";
+import Bar from "./pages/bar.vue";
+import Foo from "./pages/foo.vue";
 
 export const routes: RouteConfig[] = [
-  { path: '/', component: Index },
-  { path: '/foo', component: Foo },
-  { path: '/Bar', component: Bar },
-]
+  { path: "/", redirect: "/index" },
+  { path: "/index", component: Index },
+  { path: "/foo", component: Foo },
+  { path: "/Bar", component: Bar },
+];
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
-export const subAppLocation = window.__POWERED_BY_WUJIE__ ? window.$wujie.location : window.location
+export const subAppLocation = window.__POWERED_BY_WUJIE__
+  ? window.$wujie.location
+  : window.location;
diff --git a/apps/vue2-app/tsconfig.json b/apps/vue2-app/tsconfig.json
index d1362a4..73cb45a 100644
--- a/apps/vue2-app/tsconfig.json
+++ b/apps/vue2-app/tsconfig.json
@@ -25,7 +25,8 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "../../shared/constants/**/*.ts"
   ],
   "references": [
     {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1802a6a..d2b0720 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,9 +83,15 @@ importers:
 
   apps/shell-vue-app:
     dependencies:
+      element-plus:
+        specifier: ^2.7.7
+        version: 2.7.7(vue@3.4.31(typescript@5.5.3))
       vue:
         specifier: ^3.4.29
         version: 3.4.31(typescript@5.5.3)
+      vue-router:
+        specifier: ^4.4.0
+        version: 4.4.0(vue@3.4.31(typescript@5.5.3))
       wujie-vue3:
         specifier: ^1.0.22
         version: 1.0.22(vue@3.4.31(typescript@5.5.3))
@@ -533,6 +539,10 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
   '@dprint/formatter@0.3.0':
     resolution: {integrity: sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==}
 
@@ -542,6 +552,11 @@ packages:
   '@dprint/toml@0.6.2':
     resolution: {integrity: sha512-Mk5unEANsL/L+WHYU3NpDXt1ARU5bNU5k5OZELxaJodDycKG6RoRnSlZXpW6+7UN2PSnETAFVUdKrh937ZwtHA==}
 
+  '@element-plus/icons-vue@2.3.1':
+    resolution: {integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==}
+    peerDependencies:
+      vue: ^3.2.0
+
   '@es-joy/jsdoccomment@0.43.1':
     resolution: {integrity: sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==}
     engines: {node: '>=16'}
@@ -1116,6 +1131,15 @@ packages:
     resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@floating-ui/core@1.6.5':
+    resolution: {integrity: sha512-8GrTWmoFhm5BsMZOTHeGD2/0FLKLQQHvO/ZmQga4tKempYRLz8aqJGqXVuQgisnMObq2YZ2SgkwctN1LOOxcqA==}
+
+  '@floating-ui/dom@1.6.8':
+    resolution: {integrity: sha512-kx62rP19VZ767Q653wsP1XZCGIirkE09E0QUGNYTM/ttbbQHqcGPdSfWFxUyyNLc/W6aoJRBajOSXhP6GXjC0Q==}
+
+  '@floating-ui/utils@0.2.5':
+    resolution: {integrity: sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ==}
+
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
@@ -1393,6 +1417,9 @@ packages:
     peerDependencies:
       eslint: '>=8.40.0'
 
+  '@sxzz/popperjs-es@2.11.7':
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+
   '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
 
@@ -1477,6 +1504,9 @@ packages:
   '@types/unist@3.0.2':
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
 
+  '@types/web-bluetooth@0.0.16':
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
   '@typescript-eslint/eslint-plugin@7.16.0':
     resolution: {integrity: sha512-py1miT6iQpJcs1BiJjm54AMzeuMPBSPuKPlnT8HlfudbcS5rYeX5jajpLf3mrdRh9dA/Ec2FVUY0ifeVNDIhZw==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -1635,6 +1665,15 @@ packages:
   '@vue/shared@3.4.31':
     resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==}
 
+  '@vueuse/core@9.13.0':
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+
+  '@vueuse/metadata@9.13.0':
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+
+  '@vueuse/shared@9.13.0':
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -1759,6 +1798,9 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
   autoprefixer@10.4.19:
     resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2077,6 +2119,9 @@ packages:
   dataloader@1.4.0:
     resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
+  dayjs@1.11.12:
+    resolution: {integrity: sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -2182,6 +2227,11 @@ packages:
   electron-to-chromium@1.4.824:
     resolution: {integrity: sha512-GTQnZOP1v0wCuoWzKOxL8rurg9T13QRYISkoICGaZzskBf9laC3V8g9BHTpJv+j9vBRcKOulbGXwMzuzNdVrAA==}
 
+  element-plus@2.7.7:
+    resolution: {integrity: sha512-7ucUiDAxevyBE8JbXBTe9ofHhS047VmWMLoksE45zZ08XSnhnyG7WUuk3gmDbAklfVMHedb9sEV3OovPUWt+Sw==}
+    peerDependencies:
+      vue: ^3.2.0
+
   emoji-regex@10.3.0:
     resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
 
@@ -2274,6 +2324,9 @@ packages:
     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
 
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -3286,6 +3339,13 @@ packages:
   lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
+  lodash-unified@1.0.3:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
@@ -3396,6 +3456,9 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
@@ -3613,6 +3676,9 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
+  normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+
   npm-install-checks@6.3.0:
     resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -5462,12 +5528,18 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.9
     optional: true
 
+  '@ctrl/tinycolor@3.6.1': {}
+
   '@dprint/formatter@0.3.0': {}
 
   '@dprint/markdown@0.17.1': {}
 
   '@dprint/toml@0.6.2': {}
 
+  '@element-plus/icons-vue@2.3.1(vue@3.4.31(typescript@5.5.3))':
+    dependencies:
+      vue: 3.4.31(typescript@5.5.3)
+
   '@es-joy/jsdoccomment@0.43.1':
     dependencies:
       '@types/eslint': 8.56.10
@@ -5786,6 +5858,17 @@ snapshots:
 
   '@eslint/object-schema@2.1.4': {}
 
+  '@floating-ui/core@1.6.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.5
+
+  '@floating-ui/dom@1.6.8':
+    dependencies:
+      '@floating-ui/core': 1.6.5
+      '@floating-ui/utils': 0.2.5
+
+  '@floating-ui/utils@0.2.5': {}
+
   '@humanwhocodes/module-importer@1.0.1': {}
 
   '@humanwhocodes/retry@0.3.0': {}
@@ -6100,6 +6183,8 @@ snapshots:
       - supports-color
       - typescript
 
+  '@sxzz/popperjs-es@2.11.7': {}
+
   '@tsconfig/node10@1.0.11':
     optional: true
 
@@ -6183,6 +6268,8 @@ snapshots:
 
   '@types/unist@3.0.2': {}
 
+  '@types/web-bluetooth@0.0.16': {}
+
   '@typescript-eslint/eslint-plugin@7.16.0(@typescript-eslint/parser@7.16.0(eslint@9.7.0)(typescript@5.5.3))(eslint@9.7.0)(typescript@5.5.3)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -6437,6 +6524,25 @@ snapshots:
 
   '@vue/shared@3.4.31': {}
 
+  '@vueuse/core@9.13.0(vue@3.4.31(typescript@5.5.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.4.31(typescript@5.5.3))
+      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@9.13.0': {}
+
+  '@vueuse/shared@9.13.0(vue@3.4.31(typescript@5.5.3))':
+    dependencies:
+      vue-demi: 0.14.8(vue@3.4.31(typescript@5.5.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1
@@ -6566,6 +6672,8 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
+  async-validator@4.2.5: {}
+
   autoprefixer@10.4.19(postcss@8.4.39):
     dependencies:
       browserslist: 4.23.1
@@ -6886,6 +6994,8 @@ snapshots:
 
   dataloader@1.4.0: {}
 
+  dayjs@1.11.12: {}
+
   de-indent@1.0.2: {}
 
   debug@3.2.7:
@@ -6985,6 +7095,27 @@ snapshots:
 
   electron-to-chromium@1.4.824: {}
 
+  element-plus@2.7.7(vue@3.4.31(typescript@5.5.3)):
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+      '@element-plus/icons-vue': 2.3.1(vue@3.4.31(typescript@5.5.3))
+      '@floating-ui/dom': 1.6.8
+      '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
+      '@types/lodash': 4.17.6
+      '@types/lodash-es': 4.17.12
+      '@vueuse/core': 9.13.0(vue@3.4.31(typescript@5.5.3))
+      async-validator: 4.2.5
+      dayjs: 1.11.12
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.4.31(typescript@5.5.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   emoji-regex@10.3.0: {}
 
   emoji-regex@8.0.0: {}
@@ -7221,6 +7352,8 @@ snapshots:
 
   escalade@3.1.2: {}
 
+  escape-html@1.0.3: {}
+
   escape-string-regexp@1.0.5: {}
 
   escape-string-regexp@4.0.0: {}
@@ -8358,6 +8491,12 @@ snapshots:
 
   lodash-es@4.17.21: {}
 
+  lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+
   lodash.camelcase@4.3.0: {}
 
   lodash.isplainobject@4.0.6: {}
@@ -8531,6 +8670,8 @@ snapshots:
   mdn-data@2.0.30:
     optional: true
 
+  memoize-one@6.0.0: {}
+
   meow@12.1.1: {}
 
   merge-stream@2.0.0: {}
@@ -8859,6 +9000,8 @@ snapshots:
 
   normalize-range@0.1.2: {}
 
+  normalize-wheel-es@1.2.0: {}
+
   npm-install-checks@6.3.0:
     dependencies:
       semver: 7.6.2
@@ -10121,6 +10264,10 @@ snapshots:
     dependencies:
       vue: 2.7.16
 
+  vue-demi@0.14.8(vue@3.4.31(typescript@5.5.3)):
+    dependencies:
+      vue: 3.4.31(typescript@5.5.3)
+
   vue-eslint-parser@9.4.3(eslint@9.7.0):
     dependencies:
       debug: 4.3.5
diff --git a/shared/constants/index.ts b/shared/constants/index.ts
new file mode 100644
index 0000000..ba89c34
--- /dev/null
+++ b/shared/constants/index.ts
@@ -0,0 +1,9 @@
+enum WUJIE_MESSAGE_CODE {
+  SUB_ROUTE_CHANGE = "sub-route-change",
+  VUE3_ROUTE_CHANGE = "vue3-router-change",
+  VUE2_ROUTE_CHANGE = "vue2-router-change"
+}
+
+export {
+  WUJIE_MESSAGE_CODE,
+}
\ No newline at end of file