From b252ca2b1b5faeda4512f3f6721afbdef38aeadf Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Thu, 3 Nov 2022 21:40:51 -0500
Subject: [PATCH] chore(web ui):ref tunnel modules (#2331)

---
 web-ui/arthasWebConsole/.env.tunnel           |   3 +-
 web-ui/arthasWebConsole/.env.ui               |   3 +-
 web-ui/arthasWebConsole/{src => all}/env.d.ts |   2 +-
 .../{public => all/share/assert}/arthas.png   | Bin
 .../{public => all/share/assert}/fullsc.png   | Bin
 .../share/component/Console.vue}              | 141 +++++++---
 web-ui/arthasWebConsole/all/share/main.css    |   3 +
 .../{ => all/share}/public/favicon.ico        | Bin
 .../arthasWebConsole/all/tunnel/agents.html   |  17 ++
 web-ui/arthasWebConsole/all/tunnel/apps.html  |  16 ++
 .../{ => all/tunnel}/index.html               |   0
 .../arthasWebConsole/all/tunnel/src/Agent.vue |  60 ++++
 .../arthasWebConsole/all/tunnel/src/Apps.vue  |  42 +++
 .../arthasWebConsole/all/tunnel/src/agents.ts |   6 +
 .../arthasWebConsole/all/tunnel/src/apps.ts   |   5 +
 .../arthasWebConsole/all/tunnel/src/main.css  |   3 +
 .../arthasWebConsole/all/tunnel/src/main.ts   |   7 +
 .../arthasWebConsole/all/tunnel/tunnel.d.ts   |   6 +
 web-ui/arthasWebConsole/all/ui/index.html     |  16 ++
 .../{ => all/ui}/src/main.css                 |   0
 .../arthasWebConsole/{ => all/ui}/src/main.ts |   4 +-
 .../{ => all/ui}/ui/index.html                |   0
 .../{ => all/ui}/ui/src/App.vue               |   7 +-
 .../{ => all/ui}/ui/src/arthas.d.ts           |   0
 .../ui}/ui/src/components/NavHeader.vue       |  50 ++--
 .../ui/src/components/dialog/ErrDialog.vue    |   0
 .../ui/src/components/dialog/InputDialog.vue  |   0
 .../src/components/dialog/SuccessDialog.vue   |   0
 .../ui/src/components/dialog/WarnDialog.vue   |   0
 .../ui/src/components/input/AutoComplete.vue  |   0
 .../ui/src/components/input/ClassInput.vue    |   0
 .../ui/src/components/input/MethodInput.vue   |   0
 .../ui}/ui/src/components/input/PlayStop.vue  |   0
 .../ui/src/components/input/SwitchInput.vue   |   0
 .../ui}/ui/src/components/input/TodoList.vue  |   0
 .../ui/src/components/routeTo/SelectCmd.vue   |   0
 .../ui}/ui/src/components/show/CmdResMenu.vue |   0
 .../ui}/ui/src/components/show/Enhancer.vue   |   0
 .../src/components/show/OptionConfigMenu.vue  |   0
 .../ui}/ui/src/components/show/ResTable.vue   |   0
 .../ui}/ui/src/components/show/Tree.vue       |   0
 .../ui}/ui/src/machines/consoleMachine.ts     |   0
 .../ui}/ui/src/machines/perRequestMachine.ts  |   0
 .../ui/src/machines/transformConfigMachine.ts |   0
 .../{ => all/ui}/ui/src/main.ts               |   2 +-
 .../{ => all/ui}/ui/src/router/index.ts       |   0
 .../{ => all/ui}/ui/src/router/routes.ts      |   0
 .../{ => all/ui}/ui/src/stores/fetch.ts       |   0
 .../{ => all/ui}/ui/src/stores/public.ts      |   0
 .../all/ui/ui/src/utils/transform.ts          |   3 +
 .../ui}/ui/src/views/Asynchronize.vue         |   0
 .../{ => all/ui}/ui/src/views/Config.vue      |   0
 .../{ => all/ui}/ui/src/views/Console.vue     |   0
 .../{ => all/ui}/ui/src/views/DashBoard.vue   |  87 +++---
 .../{ => all/ui}/ui/src/views/Synchronize.vue |   3 -
 .../ui}/ui/src/views/async/Monitor.vue        |   0
 .../ui}/ui/src/views/async/Profiler.vue       |   0
 .../{ => all/ui}/ui/src/views/async/Stack.vue |  11 +-
 .../{ => all/ui}/ui/src/views/async/Trace.vue |   0
 .../{ => all/ui}/ui/src/views/async/Tt.vue    |   0
 .../{ => all/ui}/ui/src/views/async/Watch.vue |   0
 .../{ => all/ui}/ui/src/views/config/Jvm.vue  |   0
 .../ui}/ui/src/views/config/Options.vue       |   0
 .../ui}/ui/src/views/config/PerCounter.vue    |   0
 .../ui}/ui/src/views/config/Sysenv.vue        |   0
 .../ui}/ui/src/views/config/Sysprop.vue       |   0
 .../ui}/ui/src/views/config/Vmoption.vue      |   0
 .../ui}/ui/src/views/sync/ClassInfo.vue       |   1 -
 .../ui}/ui/src/views/sync/ClassLoader.vue     | 266 +++++++++---------
 .../ui}/ui/src/views/sync/HeapDump.vue        |   0
 .../{ => all/ui}/ui/src/views/sync/Jad.vue    |   0
 .../{ => all/ui}/ui/src/views/sync/Mbean.vue  |   0
 .../{ => all/ui}/ui/src/views/sync/Memory.vue |   0
 .../{ => all/ui}/ui/src/views/sync/Ognl.vue   |   0
 .../{ => all/ui}/ui/src/views/sync/Reset.vue  |   0
 .../ui}/ui/src/views/sync/Retransform.vue     |   0
 .../{ => all/ui}/ui/src/views/sync/Thread.vue | 122 ++++----
 .../{ => all/ui}/ui/src/views/sync/Vmtool.vue |   0
 web-ui/arthasWebConsole/package.json          |   8 +-
 web-ui/arthasWebConsole/tailwind.config.js    |   5 +-
 web-ui/arthasWebConsole/tsconfig.json         |  13 +-
 web-ui/arthasWebConsole/tsconfig.node.json    |   2 +-
 web-ui/arthasWebConsole/ui/src/env.d.ts       |   8 -
 web-ui/arthasWebConsole/ui/src/index.css      |  12 -
 .../ui/src/stores/resTransform.ts             |   9 -
 web-ui/arthasWebConsole/vite.config.ts        |  52 ++--
 web-ui/pom.xml                                |  13 +-
 87 files changed, 639 insertions(+), 369 deletions(-)
 rename web-ui/arthasWebConsole/{src => all}/env.d.ts (91%)
 rename web-ui/arthasWebConsole/{public => all/share/assert}/arthas.png (100%)
 rename web-ui/arthasWebConsole/{public => all/share/assert}/fullsc.png (100%)
 rename web-ui/arthasWebConsole/{src/App.vue => all/share/component/Console.vue} (59%)
 create mode 100644 web-ui/arthasWebConsole/all/share/main.css
 rename web-ui/arthasWebConsole/{ => all/share}/public/favicon.ico (100%)
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/agents.html
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/apps.html
 rename web-ui/arthasWebConsole/{ => all/tunnel}/index.html (100%)
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/src/Agent.vue
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/src/Apps.vue
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/src/agents.ts
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/src/apps.ts
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/src/main.css
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/src/main.ts
 create mode 100644 web-ui/arthasWebConsole/all/tunnel/tunnel.d.ts
 create mode 100644 web-ui/arthasWebConsole/all/ui/index.html
 rename web-ui/arthasWebConsole/{ => all/ui}/src/main.css (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/src/main.ts (54%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/index.html (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/App.vue (82%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/arthas.d.ts (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/NavHeader.vue (75%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/dialog/ErrDialog.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/dialog/InputDialog.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/dialog/SuccessDialog.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/dialog/WarnDialog.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/input/AutoComplete.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/input/ClassInput.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/input/MethodInput.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/input/PlayStop.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/input/SwitchInput.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/input/TodoList.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/routeTo/SelectCmd.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/show/CmdResMenu.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/show/Enhancer.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/show/OptionConfigMenu.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/show/ResTable.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/components/show/Tree.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/machines/consoleMachine.ts (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/machines/perRequestMachine.ts (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/machines/transformConfigMachine.ts (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/main.ts (92%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/router/index.ts (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/router/routes.ts (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/stores/fetch.ts (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/stores/public.ts (100%)
 create mode 100644 web-ui/arthasWebConsole/all/ui/ui/src/utils/transform.ts
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/Asynchronize.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/Config.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/Console.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/DashBoard.vue (84%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/Synchronize.vue (92%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/async/Monitor.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/async/Profiler.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/async/Stack.vue (91%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/async/Trace.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/async/Tt.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/async/Watch.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/config/Jvm.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/config/Options.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/config/PerCounter.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/config/Sysenv.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/config/Sysprop.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/config/Vmoption.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/ClassInfo.vue (99%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/ClassLoader.vue (53%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/HeapDump.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Jad.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Mbean.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Memory.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Ognl.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Reset.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Retransform.vue (100%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Thread.vue (71%)
 rename web-ui/arthasWebConsole/{ => all/ui}/ui/src/views/sync/Vmtool.vue (100%)
 delete mode 100644 web-ui/arthasWebConsole/ui/src/env.d.ts
 delete mode 100644 web-ui/arthasWebConsole/ui/src/index.css
 delete mode 100644 web-ui/arthasWebConsole/ui/src/stores/resTransform.ts

diff --git a/web-ui/arthasWebConsole/.env.tunnel b/web-ui/arthasWebConsole/.env.tunnel
index 5aaf1f490..1fe3c3366 100644
--- a/web-ui/arthasWebConsole/.env.tunnel
+++ b/web-ui/arthasWebConsole/.env.tunnel
@@ -1,2 +1,3 @@
 # NODE_ENV=production
-VITE_AGENT=true
\ No newline at end of file
+VITE_ARTHAS_PORT=7777
+VITE_ARTHAS_PROXY_PORT=8080
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/.env.ui b/web-ui/arthasWebConsole/.env.ui
index 04da6f0fd..6767c1da4 100644
--- a/web-ui/arthasWebConsole/.env.ui
+++ b/web-ui/arthasWebConsole/.env.ui
@@ -1,2 +1,3 @@
 # NODE_ENV=production
-VITE_AGENT=false
\ No newline at end of file
+VITE_ARTHAS_PORT=8563
+VITE_ARTHAS_PROXY_PORT=8563
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/src/env.d.ts b/web-ui/arthasWebConsole/all/env.d.ts
similarity index 91%
rename from web-ui/arthasWebConsole/src/env.d.ts
rename to web-ui/arthasWebConsole/all/env.d.ts
index 4f9c20631..df4a71947 100644
--- a/web-ui/arthasWebConsole/src/env.d.ts
+++ b/web-ui/arthasWebConsole/all/env.d.ts
@@ -6,7 +6,7 @@ declare module '*.vue' {
   export default component
 }
 interface ImportMetaEnv {
-  readonly VITE_AGENT:string
+  readonly VITE_ARTHAS_PORT:string
 }
 
 interface ImportMeta {
diff --git a/web-ui/arthasWebConsole/public/arthas.png b/web-ui/arthasWebConsole/all/share/assert/arthas.png
similarity index 100%
rename from web-ui/arthasWebConsole/public/arthas.png
rename to web-ui/arthasWebConsole/all/share/assert/arthas.png
diff --git a/web-ui/arthasWebConsole/public/fullsc.png b/web-ui/arthasWebConsole/all/share/assert/fullsc.png
similarity index 100%
rename from web-ui/arthasWebConsole/public/fullsc.png
rename to web-ui/arthasWebConsole/all/share/assert/fullsc.png
diff --git a/web-ui/arthasWebConsole/src/App.vue b/web-ui/arthasWebConsole/all/share/component/Console.vue
similarity index 59%
rename from web-ui/arthasWebConsole/src/App.vue
rename to web-ui/arthasWebConsole/all/share/component/Console.vue
index 0e6ed4adf..a04ddcdb0 100644
--- a/web-ui/arthasWebConsole/src/App.vue
+++ b/web-ui/arthasWebConsole/all/share/component/Console.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed  } from "vue";
 import { Terminal } from "xterm"
 import { FitAddon } from 'xterm-addon-fit';
 import { WebglAddon } from "xterm-addon-webgl"
+import { MenuAlt2Icon } from "@heroicons/vue/outline"
+import fullPic from "~/assert/fullsc.png"
+import arthasLogo from "~/assert/arthas.png"
+const { isTunnel = false } = defineProps<{
+  isTunnel?: boolean
+}>()
 
 let ws: WebSocket | undefined;
-
+let intervalReadKey = -1
 const DEFAULT_SCROLL_BACK = 1000
 const MAX_SCROLL_BACK = 9999999
 const MIN_SCROLL_BACK = 1
-const ARTHAS_PORT = '8563'
+const ARTHAS_PORT = isTunnel ? "7777" : "8563"
 const ip = ref("")
 const port = ref('')
 const iframe = ref(true)
 const fullSc = ref(true)
 const agentID = ref('')
-const isTunnel = import.meta.env.VITE_AGENT === 'true'
+const outputHerf = computed(() => {
+  console.log(agentID.value)
+  return isTunnel?`proxy/${agentID.value}/arthas-output/`:`/arthas-output/`
+})
+// const isTunnel = import.meta.env.MODE === 'tunnel'
 const fitAddon = new FitAddon();
 const webglAddon = new WebglAddon();
 let xterm = new Terminal({ allowProposedApi: true })
@@ -23,6 +33,7 @@ let xterm = new Terminal({ allowProposedApi: true })
 onMounted(() => {
   ip.value = getUrlParam('ip') ?? window.location.hostname;
   port.value = getUrlParam('port') ?? ARTHAS_PORT;
+  if (isTunnel) agentID.value = getUrlParam("agentId") ?? ""
   let _iframe = getUrlParam('iframe')
   if (_iframe && _iframe.trim() !== 'false') iframe.value = false
 
@@ -42,12 +53,22 @@ function getUrlParam(name: string) {
   return urlparam.get(name)
 }
 
-
+function getWsUri() {
+  const host = `${ip.value}:${port.value}`
+  if (!isTunnel) return `ws://${host}/ws`;
+  const path = getUrlParam("path") ?? 'ws'
+  const _targetServer = getUrlParam("targetServer")
+  let protocol = location.protocol === 'https:' ? 'wss://' : 'ws://';
+  const uri = `${protocol}${host}/${encodeURIComponent(path)}?method=connectArthas&id=${agentID.value}`
+  if (_targetServer != null) {
+    return uri + '&targetServer=' + encodeURIComponent(_targetServer);
+  }
+  return uri
+}
 /** init websocket **/
 function initWs(silent: boolean) {
-  let path = 'ws://' + ip.value + ':' + port.value + '/ws';
-  console.log(path)
-  ws = new WebSocket(path);
+  let uri = getWsUri()
+  ws = new WebSocket(uri);
   ws.onerror = function () {
     ws ?? ws!.close();
     ws = undefined;
@@ -69,12 +90,21 @@ function initWs(silent: boolean) {
       }
     };
     ws?.send(JSON.stringify({ action: 'resize', cols, rows }));
-    window.setInterval(function () {
+    intervalReadKey = window.setInterval(function () {
       if (ws != null && ws.readyState === 1) {
         ws.send(JSON.stringify({ action: 'read', data: "" }));
       }
     }, 30000);
   }
+  ws.onclose = function (message) {
+    if (intervalReadKey != -1) {
+      window.clearInterval(intervalReadKey)
+      intervalReadKey = -1
+    }
+    if (message.code === 2000) {
+      alert(message.reason);
+    }
+  };
 }
 
 /** init xterm **/
@@ -103,18 +133,31 @@ function isValidNumber(scrollNumber: number) {
     scrollNumber <= MAX_SCROLL_BACK;
 }
 
-/** begin connect **/
-function startConnect(silent: boolean = false) {
+const connectGuard = (silent: boolean): boolean => {
   if (ip.value.trim() === '' || port.value.trim() === '') {
     alert('Ip or port can not be empty');
-    return;
+    return false;
+  }
+  if (isTunnel && agentID.value == '') {
+    if (silent) {
+      return false;
+    }
+    alert('AgentId can not be empty');
+    return false;
   }
   if (ws) {
     alert('Already connected');
-    return;
+    return false;
   }
-  // init webSocket
-  initWs(silent);
+  return true
+}
+/** begin connect **/
+function startConnect(silent: boolean = false) {
+  if (connectGuard(silent)) {
+    // init webSocket
+    initWs(silent);
+  }
+
 }
 
 function disconnect() {
@@ -126,7 +169,6 @@ function disconnect() {
     xterm.dispose();
     fitAddon.dispose()
     webglAddon.dispose()
-    // $('#fullSc').hide();
     fullSc.value = false
     alert('Connection was closed successfully!');
   } catch {
@@ -157,16 +199,37 @@ function requestFullScreen(element: HTMLElement) {
   }
 }
 
-
 </script>
 
 <template>
-  <div class="flex flex-col h-[100vh] resize-none">
-    <nav v-if="iframe" class="navbar bg-base-100 flex-row">
-      <div class="flex-1">
-        <a href="https://github.com/alibaba/arthas" target="_blank" title="" class="mr-2 w-20"><img src="/arthas.png"
-            alt="Arthas" title="Welcome to Arthas web console" class=""></a>
-        <ul class="menu menu-horizontal p-0">
+  <div class="flex flex-col h-[100vh] w-[100vw] resize-none">
+    <nav v-if="iframe" class="navbar bg-base-100 md:flex-row flex-col w-[100vw]">
+      <div class="navbar-start">
+        <div class="dropdown dropdown-start 2xl:hidden">
+          <label tabindex="0" class="btn btn-ghost btn-sm">
+            <MenuAlt2Icon class="w-6 h-6"></MenuAlt2Icon>
+          </label>
+          <ul tabindex="0" class="dropdown-content menu shadow bg-base-100">
+            <li>
+              <a class="hover:text-sky-500 dark:hover:text-sky-400 text-sm" href="https://arthas.aliyun.com/doc"
+                target="_blank">Documentation
+                <span class="sr-only">(current)</span></a>
+            </li>
+            <li>
+              <a class="hover:text-sky-500 dark:hover:text-sky-400 text-sm"
+                href="https://arthas.aliyun.com/doc/arthas-tutorials.html" target="_blank">Online
+                Tutorials</a>
+            </li>
+            <li>
+              <a class="hover:text-sky-500 dark:hover:text-sky-400 text-sm" href="https://github.com/alibaba/arthas"
+                target="_blank">Github</a>
+            </li>
+          </ul>
+        </div>
+        <a href="https://github.com/alibaba/arthas" target="_blank" title="" class="mr-2 w-20"><img
+            :src="arthasLogo" alt="Arthas" title="Welcome to Arthas web console"></a>
+
+        <ul class="menu menu-vertical 2xl:menu-horizontal hidden">
           <li>
             <a class="hover:text-sky-500 dark:hover:text-sky-400 text-sm" href="https://arthas.aliyun.com/doc"
               target="_blank">Documentation
@@ -182,9 +245,14 @@ function requestFullScreen(element: HTMLElement) {
               target="_blank">Github</a>
           </li>
         </ul>
+
       </div>
-      <form class="navbar-end">
-        <div class="flex">
+      <div class="navbar-center ">
+        <div class=" xl:flex-row form-control"        
+        :class="{
+          'xl:flex-row':isTunnel,
+          'lg:flex-row':!isTunnel
+        }">
           <label class="input-group input-group-sm mr-2">
             <span>IP</span>
             <input type="text" placeholder="please enter ip address" class="input input-bordered input-sm "
@@ -194,28 +262,35 @@ function requestFullScreen(element: HTMLElement) {
             <span>Port</span>
             <input type="text" placeholder="please enter port" class="input input-sm input-bordered" v-model="port" />
           </label>
+          <label v-if="isTunnel" class="input-group input-group-sm mr-2">
+            <span>AgentId</span>
+            <input type="text" placeholder="please enter AgentId" class="input input-sm input-bordered"
+              v-model="agentID" />
+          </label>
         </div>
-        <div class="btn-group btn-group-horizontal">
+      </div>
+      <div class="navbar-end">
+        <div class="btn-group   2xl:btn-group-horizontal btn-group-horizontal"
+        :class="{
+          'md:btn-group-vertical':isTunnel
+        }">
           <button
             class="btn btn-sm bg-secondary hover:bg-secondary-focus border-none text-secondary-content focus:bg-secondary-focus normal-case"
             @click.prevent="startConnect(true)">Connect</button>
           <button
             class="btn btn-sm bg-secondary hover:bg-secondary-focus border-none text-secondary-content focus:bg-secondary-focus normal-case"
             @click.prevent="disconnect">Disconnect</button>
-          <a v-if="!isTunnel" class="btn btn-sm bg-secondary hover:bg-secondary-focus border-none text-secondary-content focus:bg-secondary-focus normal-case"
-            href="arthas-output/" target="_blank">Arthas Output</a>
+          <a class="btn btn-sm bg-secondary hover:bg-secondary-focus border-none text-secondary-content focus:bg-secondary-focus normal-case"
+            :href="outputHerf" target="_blank">Arthas Output</a>
         </div>
-      </form>
-
+      </div>
     </nav>
     <div class="w-full h-0 flex-auto bg-black overscroll-auto" id="terminal-card">
-      <!-- <div class="h-full overflow-visible" id="terminal-card"> -->
       <div id="terminal" class="w-full h-full"></div>
-      <!-- </div> -->
     </div>
 
     <div title="fullscreen" id="fullSc" class="fullSc" v-if="fullSc">
-      <button id="fullScBtn" @click="xtermFullScreen"><img src="/fullsc.png"></button>
+      <button id="fullScBtn" @click="xtermFullScreen"><img :src="fullPic"></button>
     </div>
   </div>
 </template>
diff --git a/web-ui/arthasWebConsole/all/share/main.css b/web-ui/arthasWebConsole/all/share/main.css
new file mode 100644
index 000000000..bd6213e1d
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/share/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/public/favicon.ico b/web-ui/arthasWebConsole/all/share/public/favicon.ico
similarity index 100%
rename from web-ui/arthasWebConsole/public/favicon.ico
rename to web-ui/arthasWebConsole/all/share/public/favicon.ico
diff --git a/web-ui/arthasWebConsole/all/tunnel/agents.html b/web-ui/arthasWebConsole/all/tunnel/agents.html
new file mode 100644
index 000000000..a2ce24e97
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/agents.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Arthas Tutorials</title>
+</head>
+
+<body>
+
+    <div id="app">
+    </div>
+    <script src="./src/agents.ts" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/all/tunnel/apps.html b/web-ui/arthasWebConsole/all/tunnel/apps.html
new file mode 100644
index 000000000..92c093be0
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/apps.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Arthas Tutorials</title>
+</head>
+
+<body>
+    <div id="app">
+    </div>
+
+    <script src="./src/apps.ts" type="module"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/index.html b/web-ui/arthasWebConsole/all/tunnel/index.html
similarity index 100%
rename from web-ui/arthasWebConsole/index.html
rename to web-ui/arthasWebConsole/all/tunnel/index.html
diff --git a/web-ui/arthasWebConsole/all/tunnel/src/Agent.vue b/web-ui/arthasWebConsole/all/tunnel/src/Agent.vue
new file mode 100644
index 000000000..bbfde0039
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/src/Agent.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+type AgentId = string
+const agentInfos: ([AgentId, AgentInfo])[] = reactive([])
+function getUrlParam(name: string) {
+  const urlparam = new URLSearchParams(window.location.search)
+  return urlparam.get(name)
+}
+function tunnelWebConsoleLink(agentId: string, targetServer: string) {
+  return `/?targetServer=${targetServer}&agentId=${agentId}`;
+}
+
+const fetchMyApps = () => {
+  const appName = getUrlParam("app") ?? ""
+  let url = `/api/tunnelAgentInfo?app=${appName}`
+  fetch(url)
+    .then((response) => response.json())
+    .then((data: Record<AgentId, AgentInfo>) => {
+      for (const key in data) {
+        agentInfos.push(
+          [key, data[key] as AgentInfo]
+        )
+      }
+
+    })
+    .catch((error) => console.error('api error ' + error))
+
+}
+onMounted(() => {
+  fetchMyApps()
+})
+</script>
+
+<template>
+  <table class="table table-normal w-[100vw]">
+    <thead>
+      <tr >
+        <th class="normal-case">IP</th>
+        <th class="normal-case">AgentId</th>
+        <th class="normal-case">Version</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(agentInfoRecord) in agentInfos" :key="agentInfoRecord[0]" class="hover">
+        <td>
+          <a class="btn btn-primary btn-sm"
+            :href="tunnelWebConsoleLink(agentInfoRecord[0], agentInfoRecord[1].clientConnectHost)">{{
+                agentInfoRecord[1].host
+            }}</a>
+        </td>
+        <td>
+          {{ agentInfoRecord[0] }}
+        </td>
+        <td>
+          {{ agentInfoRecord[1].arthasVersion }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/all/tunnel/src/Apps.vue b/web-ui/arthasWebConsole/all/tunnel/src/Apps.vue
new file mode 100644
index 000000000..7802892de
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/src/Apps.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+
+const apps: string[] = reactive([])
+function fetchMyApps() {
+  fetch('/api/tunnelApps')
+    .then((response) => response.json())
+    .then((data: string[]) => {
+      data.length > 0 && data.forEach(app => apps.push(app))
+    })
+    .catch((error) => {
+      console.error('api error ' + error)
+    })
+}
+function detailLink(appName: string) {
+  return "agents.html?app=" + appName;
+}
+onMounted(() => {
+  fetchMyApps()
+})
+</script>
+
+<template>
+  <table class="table w-[100vw] table-normal">
+    <thead>
+      <tr>
+        <th class="normal-case">name of application</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="app in apps" :key="app" class="hover">
+        <td>
+          <a class="btn btn-primary btn-sm normal-case" :href="detailLink(app)">{{ app }}</a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/all/tunnel/src/agents.ts b/web-ui/arthasWebConsole/all/tunnel/src/agents.ts
new file mode 100644
index 000000000..a94303218
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/src/agents.ts
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./Agent.vue";
+const app = createApp(App);
+import "~/main.css";
+app
+  .mount("#app");
diff --git a/web-ui/arthasWebConsole/all/tunnel/src/apps.ts b/web-ui/arthasWebConsole/all/tunnel/src/apps.ts
new file mode 100644
index 000000000..6ef530d37
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/src/apps.ts
@@ -0,0 +1,5 @@
+import App from "./Apps.vue"
+import { createApp } from "vue"
+import "~/main.css";
+createApp(App)
+  .mount("#app");
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/all/tunnel/src/main.css b/web-ui/arthasWebConsole/all/tunnel/src/main.css
new file mode 100644
index 000000000..bd6213e1d
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/src/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/all/tunnel/src/main.ts b/web-ui/arthasWebConsole/all/tunnel/src/main.ts
new file mode 100644
index 000000000..c5a78b68a
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/src/main.ts
@@ -0,0 +1,7 @@
+import { createApp, h } from "vue";
+import App from "~/component/Console.vue";
+const app = createApp(h(App, { isTunnel: true }));
+import "xterm/css/xterm.css";
+import "~/main.css";
+app
+  .mount("#app");
diff --git a/web-ui/arthasWebConsole/all/tunnel/tunnel.d.ts b/web-ui/arthasWebConsole/all/tunnel/tunnel.d.ts
new file mode 100644
index 000000000..6b7934781
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/tunnel/tunnel.d.ts
@@ -0,0 +1,6 @@
+type AgentInfo = {
+  clientConnectHost:string,
+  host:string,
+  port:number,
+  arthasVersion:string
+}
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/all/ui/index.html b/web-ui/arthasWebConsole/all/ui/index.html
new file mode 100644
index 000000000..19b1b7432
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/ui/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en" data-theme="corporate">
+
+<head>
+    <meta charset="utf-8">
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Arthas Console</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script src="./src/main.ts" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/src/main.css b/web-ui/arthasWebConsole/all/ui/src/main.css
similarity index 100%
rename from web-ui/arthasWebConsole/src/main.css
rename to web-ui/arthasWebConsole/all/ui/src/main.css
diff --git a/web-ui/arthasWebConsole/src/main.ts b/web-ui/arthasWebConsole/all/ui/src/main.ts
similarity index 54%
rename from web-ui/arthasWebConsole/src/main.ts
rename to web-ui/arthasWebConsole/all/ui/src/main.ts
index 11b4c0c76..21378c90c 100644
--- a/web-ui/arthasWebConsole/src/main.ts
+++ b/web-ui/arthasWebConsole/all/ui/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from "vue";
-import App from "./App.vue";
+import App from "~/component/Console.vue";
 const app = createApp(App);
 import "xterm/css/xterm.css"
-import "./main.css"
+import "~/main.css"
 app
   .mount("#app");
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/index.html b/web-ui/arthasWebConsole/all/ui/ui/index.html
similarity index 100%
rename from web-ui/arthasWebConsole/ui/index.html
rename to web-ui/arthasWebConsole/all/ui/ui/index.html
diff --git a/web-ui/arthasWebConsole/ui/src/App.vue b/web-ui/arthasWebConsole/all/ui/ui/src/App.vue
similarity index 82%
rename from web-ui/arthasWebConsole/ui/src/App.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/App.vue
index 6e3ebe4d9..f064f356a 100644
--- a/web-ui/arthasWebConsole/ui/src/App.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/App.vue
@@ -18,14 +18,9 @@ onBeforeUnmount(() => {
 <template>
   <div class=" h-screen flex flex-col">
     <nav-header class="h-[10vh]"></nav-header>
-    <div class=" flex-auto h-[90vh] overflow-auto">
-      <div class="flex flex-row h-full">
-        <!-- <nav-aside ></nav-aside> -->
-        <div class="flex-auto overflow-auto h-[90vh] w-[90vw]">
+    <div class=" flex-auto h-[90vh] overflow-auto w-[100vw]">
           <router-view>
           </router-view>
-        </div>
-      </div>
     </div>
 
   </div>
diff --git a/web-ui/arthasWebConsole/ui/src/arthas.d.ts b/web-ui/arthasWebConsole/all/ui/ui/src/arthas.d.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/arthas.d.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/arthas.d.ts
diff --git a/web-ui/arthasWebConsole/ui/src/components/NavHeader.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/NavHeader.vue
similarity index 75%
rename from web-ui/arthasWebConsole/ui/src/components/NavHeader.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/NavHeader.vue
index 8e16581ed..5fd6d4323 100644
--- a/web-ui/arthasWebConsole/ui/src/components/NavHeader.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/components/NavHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useMachine } from '@xstate/vue';
 import { computed, onBeforeMount, Ref, ref, watchEffect } from 'vue';
-import { RefreshIcon, LogoutIcon, LoginIcon, MenuIcon, XCircleIcon } from '@heroicons/vue/outline';
+import { RefreshIcon, LogoutIcon, LoginIcon, MenuIcon, MenuAlt2Icon } from '@heroicons/vue/outline';
 import { fetchStore } from '@/stores/fetch';
 import machine from "@/machines/consoleMachine"
 import { publicStore } from '@/stores/public';
@@ -10,6 +10,7 @@ import { PuzzleIcon, TerminalIcon, ViewGridIcon } from "@heroicons/vue/outline"
 import { DesktopComputerIcon } from "@heroicons/vue/solid"
 import { useRoute, useRouter } from 'vue-router';
 import permachine from '@/machines/perRequestMachine';
+import pic from "~/assert/arthas.png"
 const fetchM = useMachine(machine)
 const publicS = publicStore()
 const { send } = fetchM
@@ -130,9 +131,9 @@ const tabs = [
   },
   {
 
-    name:'terminal',
-    url:'terminal',
-    icon:TerminalIcon
+    name: 'terminal',
+    url: 'terminal',
+    icon: TerminalIcon
   }
 ]
 
@@ -148,23 +149,38 @@ const toNext = (url: string) => {
     window.open("/", "_blank")
   } else router.push(url)
 }
+
 </script>
 
 <template>
-  <nav class=" h-[10vh] border-b-2 navbar">
-    <div class=" navbar-start flex items-stretch ">
-      <!-- <div class=" indicator mx-3"> -->
+  <nav class=" h-[10vh] border-b-2 navbar bg-base-100">
+    <div class=" navbar-start flex items-stretch">
+      <div class="dropdown dropdown-start hover xl:hidden">
+        <label tabindex="0" class="btn btn-ghost m-1">
+          <MenuAlt2Icon class="w-6 h-6"></MenuAlt2Icon>
+        </label>
+        <ul tabindex="0" class="menu menu-vertical dropdown-content bg-base-100 shadow rounded-box">
+          <li v-for="(tab, idx) in tabs" :key="idx" @click="toNext(tab.url)">
+            <a :class="{ 'bg-primary text-primary-content': routePath.includes(tab.url), }">
+              <component :is="tab.icon" class="w-4 h-4" />
+              {{
+                  tab.name
+              }}
+            </a>
+          </li>
+        </ul>
+      </div>
       <a class="flex items-center justify-center mx-2" href="https://arthas.aliyun.com/doc/commands.html"
         target="_blank">
-        <img src="/arthas.png" alt="logo" class="w-32" />
+        <img :src="pic" alt="logo" class="w-32" />
       </a>
-      <span class="badge badge-ghost self-end text-sm">v{{ version }}</span>
-      <!-- </div> -->
+      <span class="badge badge-ghost self-end badge-sm">v{{ version }}</span>
     </div>
     <div class="navbar-center">
-      <ul class="menu menu-horizontal p-0">
+
+      <ul class="menu menu-horizontal hidden xl:flex">
         <li v-for="(tab, idx) in tabs" :key="idx" @click="toNext(tab.url)">
-          <a class="break-all" :class="{ 'bg-primary text-primary-content': routePath.includes(tab.url), }">
+          <a :class="{ 'bg-primary text-primary-content': routePath.includes(tab.url), }">
             <component :is="tab.icon" class="w-4 h-4" />
             {{
                 tab.name
@@ -181,18 +197,16 @@ const toNext = (url: string) => {
           <MenuIcon class=" w-6 h-6"></MenuIcon>
         </label>
         <ul tabindex="0" class="menu dropdown-content p-2 shadow-xl bg-base-200 rounded-box w-40">
-          <li class="" v-for="(v,i) in tools" :key="i">
-            <a @click.prevent="v[1]">{{v[0]}}</a>
+          <li class="" v-for="(v, i) in tools" :key="i">
+            <a @click.prevent="v[1]">{{ v[0] }}</a>
           </li>
         </ul>
       </div>
-      <button class=" btn btn-ghost"
-        :class="{ 'btn-primary': !fetchS.online, 'btn-error': fetchS.online }">
+      <button class=" btn btn-ghost" :class="{ 'btn-primary': !fetchS.online, 'btn-error': fetchS.online }">
         <LogoutIcon class="h-6 w-6" @click="logout" v-if="fetchS.online" />
         <login-icon class="h-6 w-6" @click="login" v-else />
       </button>
-      <button class="btn-ghost btn"
-        @click="reset">
+      <button class="btn-ghost btn" @click="reset">
         <refresh-icon class="h-6 w-6" :class="restBtnclass" />
       </button>
     </div>
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/ErrDialog.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/ErrDialog.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/dialog/ErrDialog.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/ErrDialog.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/InputDialog.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/InputDialog.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/dialog/InputDialog.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/InputDialog.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/SuccessDialog.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/SuccessDialog.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/dialog/SuccessDialog.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/SuccessDialog.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/WarnDialog.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/WarnDialog.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/dialog/WarnDialog.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/dialog/WarnDialog.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/AutoComplete.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/input/AutoComplete.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/input/AutoComplete.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/input/AutoComplete.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/ClassInput.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/input/ClassInput.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/input/ClassInput.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/input/ClassInput.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/MethodInput.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/input/MethodInput.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/input/MethodInput.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/input/MethodInput.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/PlayStop.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/input/PlayStop.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/input/PlayStop.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/input/PlayStop.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/SwitchInput.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/input/SwitchInput.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/input/SwitchInput.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/input/SwitchInput.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/TodoList.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/input/TodoList.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/input/TodoList.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/input/TodoList.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/routeTo/SelectCmd.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/routeTo/SelectCmd.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/routeTo/SelectCmd.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/routeTo/SelectCmd.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/show/CmdResMenu.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/show/CmdResMenu.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/show/CmdResMenu.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/show/CmdResMenu.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/show/Enhancer.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/show/Enhancer.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/show/Enhancer.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/show/Enhancer.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/show/OptionConfigMenu.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/show/OptionConfigMenu.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/show/OptionConfigMenu.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/show/OptionConfigMenu.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/show/ResTable.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/show/ResTable.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/show/ResTable.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/show/ResTable.vue
diff --git a/web-ui/arthasWebConsole/ui/src/components/show/Tree.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/show/Tree.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/components/show/Tree.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/components/show/Tree.vue
diff --git a/web-ui/arthasWebConsole/ui/src/machines/consoleMachine.ts b/web-ui/arthasWebConsole/all/ui/ui/src/machines/consoleMachine.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/machines/consoleMachine.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/machines/consoleMachine.ts
diff --git a/web-ui/arthasWebConsole/ui/src/machines/perRequestMachine.ts b/web-ui/arthasWebConsole/all/ui/ui/src/machines/perRequestMachine.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/machines/perRequestMachine.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/machines/perRequestMachine.ts
diff --git a/web-ui/arthasWebConsole/ui/src/machines/transformConfigMachine.ts b/web-ui/arthasWebConsole/all/ui/ui/src/machines/transformConfigMachine.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/machines/transformConfigMachine.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/machines/transformConfigMachine.ts
diff --git a/web-ui/arthasWebConsole/ui/src/main.ts b/web-ui/arthasWebConsole/all/ui/ui/src/main.ts
similarity index 92%
rename from web-ui/arthasWebConsole/ui/src/main.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/main.ts
index 12ec8fc12..0f54b8372 100644
--- a/web-ui/arthasWebConsole/ui/src/main.ts
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from "vue";
-import "./index.css";
+import "~/main.css"
 import router from "./router/index";
 import { createPinia } from "pinia";
 import App from "./App.vue";
diff --git a/web-ui/arthasWebConsole/ui/src/router/index.ts b/web-ui/arthasWebConsole/all/ui/ui/src/router/index.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/router/index.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/router/index.ts
diff --git a/web-ui/arthasWebConsole/ui/src/router/routes.ts b/web-ui/arthasWebConsole/all/ui/ui/src/router/routes.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/router/routes.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/router/routes.ts
diff --git a/web-ui/arthasWebConsole/ui/src/stores/fetch.ts b/web-ui/arthasWebConsole/all/ui/ui/src/stores/fetch.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/stores/fetch.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/stores/fetch.ts
diff --git a/web-ui/arthasWebConsole/ui/src/stores/public.ts b/web-ui/arthasWebConsole/all/ui/ui/src/stores/public.ts
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/stores/public.ts
rename to web-ui/arthasWebConsole/all/ui/ui/src/stores/public.ts
diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/utils/transform.ts b/web-ui/arthasWebConsole/all/ui/ui/src/utils/transform.ts
new file mode 100644
index 000000000..0d4e62523
--- /dev/null
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/utils/transform.ts
@@ -0,0 +1,3 @@
+export default function transformStackTrace(trace: StackTrace) {
+  return `${trace.className}.${trace.methodName} (${trace.fileName}: ${trace.lineNumber})`;
+}
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/Asynchronize.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/Asynchronize.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/Asynchronize.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/Asynchronize.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/Config.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/Config.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/Config.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/Config.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/Console.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/Console.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/Console.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/Console.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/DashBoard.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/DashBoard.vue
similarity index 84%
rename from web-ui/arthasWebConsole/ui/src/views/DashBoard.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/DashBoard.vue
index 5e5ee5fc7..b00a13aca 100644
--- a/web-ui/arthasWebConsole/ui/src/views/DashBoard.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/DashBoard.vue
@@ -441,52 +441,63 @@ onBeforeUnmount(async () => {
 </script>
 
 <template>
-  <div class="p-2 pointer-events-auto flex flex-col h-full">
-    <div class="input-btn-style mb-4 h-32 flex flex-wrap flex-col items-start overflow-auto min-h-[6rem]">
-      <div v-for="(cv, ci) in runtimeInfo" :key="ci" class="flex mb-1 pr-2">
-        <span class="bg-primary-focus text-primary-content border border-primary-focus w-44 px-2 rounded-l">
-          {{ cv[0] }}
-        </span>
-        <span class="bg-base-200 border border-primary-focus rounded-r px-2 flex-1">
-          {{cv[1]}}
+  <div class="p-2 pointer-events-auto h-full overflow-auto">
+    <div class="card bg-base-100 border mb-4 compact h-auto">
+      <div class="card-body flex-wrap flex-row">
+        <span v-for="(cv, ci) in runtimeInfo" :key="ci" class="badge badge-outline badge-primary">
+
+          {{ cv[0] }}:
+          {{ cv[1] }}
         </span>
       </div>
     </div>
-    <!-- <CmdResMenu title="threads" :map="threads" class="w-full flex justify-center" /> -->
     <div class="flex justify-evenly mb-4 flex-1 h-80">
-      <div id="heapMemory" class="w-80 h-80 flex-1 input-btn-style mr-4"></div>
-      <div id="nonheapMemory" class="w-80 h-80 flex-1 input-btn-style mr-4"></div>
-      <div id="bufferPoolMemory" class="w-80 h-80 flex-1 input-btn-style"></div>
+      <div class="card border mr-4 flex-1 bg-base-100">
+        <div id="heapMemory" class="w-80 h-80 card-body "></div>
+      </div>
+      <div class="card border mr-4 flex-1 bg-base-100">
+        <div id="nonheapMemory" class="w-80 h-80 card-body"></div>
+      </div>
+      <div class="card border flex-1 bg-base-100">
+        <div id="bufferPoolMemory" class="w-80 h-80 card-body"></div>
+      </div>
+
+
+
     </div>
 
     <div class="w-full flex justify-start items-start flex-1">
-      <div id="gc-info" class="w-[40rem] h-80 input-btn-style p-2 mr-4"></div>
-      <div class="input-btn-style flex-1 h-80 overflow-auto w-0">
-        <div class="flex justify-end mb-2">
-          <div class="btn-group">
-            <button class="btn btn-sm btn-outline" @click="decrease">-</button>
-            <button class="btn btn-sm btn-outline border-x-0" @click="setPri">limit:{{pri}}</button>
-            <button class="btn btn-sm btn-outline" @click="increase">+</button>
+      <div class="card bg-base-100 border mr-4">
+        <div id="gc-info" class="w-[40rem] h-80 card-body p-2 "></div>
+      </div>
+      <div class="card flex-1 h-80 overflow-auto w-0 border bg-base-100">
+        <div class="card-body">
+          <div class="flex justify-end mb-2">
+            <div class="btn-group">
+              <button class="btn btn-sm btn-outline" @click="decrease">-</button>
+              <button class="btn btn-sm btn-outline border-x-0" @click="setPri">limit:{{ pri }}</button>
+              <button class="btn btn-sm btn-outline" @click="increase">+</button>
+            </div>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="table table-compact w-full">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th v-for="(v, i) in keyList" :key="i" class="normal-case">{{ v }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(map, i) in tableResults" :key="i" class="hover">
+                  <th>{{ i + 1 }}</th>
+                  <td v-for="(key, j) in keyList" :key="j">
+                    {{ map.get(key) }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </div>
-        <div class="overflow-x-auto">
-          <table class="table table-compact w-full">
-            <thead>
-              <tr>
-                <th></th>
-                <th v-for="(v,i) in keyList" :key="i" class="normal-case">{{v}}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(map, i) in tableResults" :key="i" class="hover">
-                <th>{{i + 1}}</th>
-                <td v-for="(key,j) in keyList" :key="j">
-                  {{map.get(key)}}
-                </td>
-              </tr>
-            </tbody>
-          </table>
         </div>
       </div>
     </div>
diff --git a/web-ui/arthasWebConsole/ui/src/views/Synchronize.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/Synchronize.vue
similarity index 92%
rename from web-ui/arthasWebConsole/ui/src/views/Synchronize.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/Synchronize.vue
index 6205b0c24..b2c4ac642 100644
--- a/web-ui/arthasWebConsole/ui/src/views/Synchronize.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/Synchronize.vue
@@ -7,9 +7,6 @@ const routes: { cmd: string, url: string }[] = [
   }, {
     cmd: "classInfo",
     url: "classInfo"
-  // }, {
-  //   cmd: "perfcounter",
-  //   url: "perfcounter"
   }, {
     cmd: "classLoader",
     url: "classLoader"
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Monitor.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Monitor.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/async/Monitor.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/async/Monitor.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Profiler.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Profiler.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/async/Profiler.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/async/Profiler.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Stack.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Stack.vue
similarity index 91%
rename from web-ui/arthasWebConsole/ui/src/views/async/Stack.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/async/Stack.vue
index 9ab227cfe..fc93d767c 100644
--- a/web-ui/arthasWebConsole/ui/src/views/async/Stack.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Stack.vue
@@ -6,14 +6,11 @@ import { fetchStore } from '@/stores/fetch';
 import { useMachine, useInterpret } from '@xstate/vue';
 import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue';
 import Enhancer from '@/components/show/Enhancer.vue';
-import {transfromStore} from "@/stores/resTransform"
+import transformStackTrace from '@/utils/transform';
 const fetchM = useInterpret(permachine)
 const pollingM = useMachine(machine)
 const fetchS = fetchStore()
-// const publicS = publicStore()
-const transS = transfromStore()
 const { getCommonResEffect } = fetchS
-// const {getCommonResEffect} = publicStore()
 
 const loop = fetchS.pullResultsLoop(pollingM)
 const tableResults = reactive([] as Map<string, string>[])
@@ -26,8 +23,8 @@ const keyList = [
   "classloader",
   "threadId",
   "threadName",]
-// const enhancer = reactive(new Map())
 const enhancer = ref(undefined as EnchanceResult | undefined)
+
 getCommonResEffect(pollingM, body => {
   if (body.results.length > 0) {
     body.results.forEach(result => {
@@ -40,7 +37,7 @@ getCommonResEffect(pollingM, body => {
             let val: string | string[] = ""
             if (k === "stackTrace") {
               let stackTrace = result[k]
-              val = stackTrace.map((trace) => transS.transformStackTrace(trace))
+              val = stackTrace.map((trace) => transformStackTrace(trace))
             } else {
               val = result[k as Exclude<keyof typeof result, "jobId" | "type" | "stackTrace">].toString()
             }
@@ -58,10 +55,8 @@ getCommonResEffect(pollingM, body => {
 })
 
 onBeforeMount(() => {
-  // fetchM.send("INIT")
   pollingM.send("INIT")
   fetchS.asyncInit()
-  // loop.open()
 })
 onBeforeUnmount(() => {
   loop.close()
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Trace.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Trace.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/async/Trace.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/async/Trace.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Tt.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/async/Tt.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Watch.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/async/Watch.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/async/Watch.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Jvm.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/config/Jvm.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/config/Jvm.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/config/Jvm.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Options.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/config/Options.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/config/Options.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/config/Options.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/PerCounter.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/config/PerCounter.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/config/PerCounter.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/config/PerCounter.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Sysenv.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/config/Sysenv.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/config/Sysenv.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/config/Sysenv.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Sysprop.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/config/Sysprop.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/config/Sysprop.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/config/Sysprop.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Vmoption.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/config/Vmoption.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/config/Vmoption.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/config/Vmoption.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/ClassInfo.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/ClassInfo.vue
similarity index 99%
rename from web-ui/arthasWebConsole/ui/src/views/sync/ClassInfo.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/ClassInfo.vue
index c50a596ae..31690ae99 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/ClassInfo.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/ClassInfo.vue
@@ -7,7 +7,6 @@ import CmdResMenu from '@/components/show/CmdResMenu.vue';
 import { fetchStore } from '@/stores/fetch';
 import { interpret } from 'xstate';
 import permachine from '@/machines/perRequestMachine';
-const classInfoM = useMachine(machine)
 const classMethodInfoM = useMachine(machine)
 const dumpM = useMachine(machine)
 const classDetailMap = reactive(new Map<string, string[]>())
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/ClassLoader.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/ClassLoader.vue
similarity index 53%
rename from web-ui/arthasWebConsole/ui/src/views/sync/ClassLoader.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/ClassLoader.vue
index 99dc401da..714978a31 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/ClassLoader.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/ClassLoader.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, onUnmounted, reactive, ref } from 'vue';
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
+import { computed, onBeforeMount, reactive, ref } from 'vue';
 import { publicStore } from "@/stores/public"
 import { fetchStore } from '@/stores/fetch';
 import { interpret } from 'xstate';
 import CmdResMenu from '@/components/show/CmdResMenu.vue';
 import transformMachine from '@/machines/transformConfigMachine';
-// import ClassInput from '@/components/input/ClassInput.vue';
 import permachine from '@/machines/perRequestMachine';
 import Tree from '@/components/show/Tree.vue';
 const fetchS = fetchStore()
@@ -208,131 +206,135 @@ const resetClassloader = () => {
 <template>
   <div class="flex flex-col h-full justify-between">
     <div class="flex h-[40vh]">
-      <div class="input-btn-style h-full p-4 mb-2 flex flex-col transition-all duration-500" :class='{
-        "w-full":loaderCache.hash === "",
-        "w-2/3":loaderCache.hash !== ""
+      <div class="card rounded-box border transition-all duration-500 bg-base-100 mr-2 " :class='{
+        "w-full": loaderCache.hash === "",
+        "w-2/3": loaderCache.hash !== ""
       }'>
-        <!-- 后置为了让用户能注意到右上角的refreshicon -->
-        <div class="h-[5vh] mb-4 justify-end flex">
-          <button @click="resetClassloader" class="btn btn-primary btn-sm mr-1">reset</button>
-          <button @click="getClassLoaderTree" class="btn btn-primary btn-sm">refresh</button>
-        </div>
+        <div class="card-body h-full p-4 mb-2 ">
+          <!-- 后置为了让用户能注意到右上角的refreshicon -->
+          <div class="h-[5vh] mb-4 justify-end flex">
+            <button @click="resetClassloader" class="btn btn-primary btn-sm mr-1">reset</button>
+            <button @click="getClassLoaderTree" class="btn btn-primary btn-sm">refresh</button>
+          </div>
 
-        <div class="overflow-auto w-full flex-1">
-          <div v-for="(tree,i) in classLoaderTree" :key="i">
-            <Tree :root="tree">
-              <template #meta="{ data, active }">
-                <!-- <div class="flex items-center"> -->
-                <div class="bg-info  px-2 rounded-r rounded-br mr-2 text-info-content" :class='{
-                  "hover:opacity-50":active,
-                  "bg-success text-success-content":loaderCache.hash=== data[2]
-                }'>
-                  {{data[1]}}
-                  <!-- </div> -->
-                </div>
-              </template>
-              <template #others="{data}">
-                <div class="items-center flex">
-                  <div class="mr-2">
-                    <span class="bg-primary-focus text-primary-content border border-primary-focus px-2 rounded-l ">
-                      count :
-                    </span>
-                    <span class="bg-base-200 border border-primary-focus rounded-r px-1 ">
-                      {{data[0]}}
-                    </span>
+          <div class="overflow-auto w-full flex-1">
+            <div v-for="(tree, i) in classLoaderTree" :key="i">
+              <Tree :root="tree">
+                <template #meta="{ data, active }">
+                  <!-- <div class="flex items-center"> -->
+                  <div class="bg-info  px-2 rounded-r rounded-br mr-2 text-info-content" :class='{
+                    "hover:opacity-50": active,
+                    "bg-success text-success-content": loaderCache.hash === data[2]
+                  }'>
+                    {{ data[1] }}
+                    <!-- </div> -->
                   </div>
-                  <div class="mr-2">
-                    <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
-                      hash :
-                    </span>
-                    <span class="bg-base-200 rounded-r flex-1 px-1 border border-primary-focus">
-                      {{data[2]}}
-                    </span>
+                </template>
+                <template #others="{ data }">
+                  <div class="items-center flex">
+                    <div class="mr-2">
+                      <span class="bg-primary-focus text-primary-content border border-primary-focus px-2 rounded-l ">
+                        count :
+                      </span>
+                      <span class="bg-base-200 border border-primary-focus rounded-r px-1 ">
+                        {{ data[0] }}
+                      </span>
+                    </div>
+                    <div class="mr-2">
+                      <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
+                        hash :
+                      </span>
+                      <span class="bg-base-200 rounded-r flex-1 px-1 border border-primary-focus">
+                        {{ data[2] }}
+                      </span>
+                    </div>
+                    <!-- <div class="">count:{{data[0]}}</div> -->
+                    <button @click="selectClassLoader({ name: data[1], hash: data[2], count: data[0] })"
+                      class="btn btn-primary btn-xs btn-outline opacity-0 group-hover:opacity-100"
+                      v-if="data[2] !== 'null'">
+                      select classloader
+                    </button>
                   </div>
-                  <!-- <div class="">count:{{data[0]}}</div> -->
-                  <button @click="selectClassLoader({name:data[1],hash:data[2],count:data[0]})"
-                    class="btn btn-primary btn-xs btn-outline opacity-0 group-hover:opacity-100"
-                    v-if="data[2]!== 'null'">
-                    select classloader
-                  </button>
-                </div>
-              </template>
-            </Tree>
+                </template>
+              </Tree>
+            </div>
           </div>
         </div>
       </div>
-
-      <div class=" ml-2 overflow-y-scroll transition-all duration-500" :class='{
-        "w-0":loaderCache.hash === "",
-        "input-btn-style w-1/3":loaderCache.hash !==""
+      <div class="card rounded-box border bg-base-100" :class='{
+        "w-0 border-none": loaderCache.hash === "",
+        "input-btn-style w-1/3": loaderCache.hash !== ""
       }'>
+        <div class="card-body ml-2 overflow-y-scroll transition-all duration-500">
 
-        <div class="mb-2">
-          <div class="overflow-auto">
-            <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
-              selected classLoader:
-            </span>
-            <span class="bg-base-200 rounded-r px-1 border border-primary-focus">
-              {{loaderCache.name}}
-            </span>
-          </div>
-          <div class="mr-2">
-            <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
-              loadedcount :
-            </span>
-            <span class="bg-base-200 rounded-r px-1 border border-primary-focus">
-              {{loaderCache.count}}
-            </span>
-          </div>
-          <div class="mr-2">
-            <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
-              hash :
-            </span>
-            <span class="bg-base-200 rounded-r px-1 border border-primary-focus">
-              {{loaderCache.hash}}
-            </span>
+          <div class="mb-2">
+            <div class="overflow-auto">
+              <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
+                selected classLoader:
+              </span>
+              <span class="bg-base-200 rounded-r px-1 border border-primary-focus">
+                {{ loaderCache.name }}
+              </span>
+            </div>
+            <div class="mr-2">
+              <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
+                loadedcount :
+              </span>
+              <span class="bg-base-200 rounded-r px-1 border border-primary-focus">
+                {{ loaderCache.count }}
+              </span>
+            </div>
+            <div class="mr-2">
+              <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
+                hash :
+              </span>
+              <span class="bg-base-200 rounded-r px-1 border border-primary-focus">
+                {{ loaderCache.hash }}
+              </span>
+            </div>
           </div>
-        </div>
-        <template v-if="loaderCache.hash.trim() !== ''">
-          <div class="flex mb-2 w-full">
-            <div class=" cursor-default 
+          <template v-if="loaderCache.hash.trim() !== ''">
+            <div class="flex mb-2 w-full">
+              <div class=" cursor-default 
           flex-auto
         overflow-hidden rounded-lg bg-white text-left border 
         focus-within:outline outline-2
         hover:shadow-md transition mr-2">
-              <input class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus-visible:outline-none"
-                v-model="classVal" />
+                <input class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus-visible:outline-none"
+                  v-model="classVal" />
+              </div>
+              <button @click="loadClass" class="btn btn-primary btn-sm btn-outline">load class</button>
             </div>
-            <button @click="loadClass" class="btn btn-primary btn-sm btn-outline">load class</button>
-          </div>
-          <div class="flex w-full">
-            <div class=" cursor-default 
+            <div class="flex w-full">
+              <div class=" cursor-default 
           flex-auto
         overflow-hidden rounded-lg bg-white text-left border 
         focus-within:outline outline-2
         hover:shadow-md transition mr-2">
-              <input class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus-visible:outline-none"
-                v-model="resourceVal" />
+                <input class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus-visible:outline-none"
+                  v-model="resourceVal" />
+              </div>
+              <button @click="loadResource" class="btn btn-primary btn-sm btn-outline">load resource</button>
             </div>
-            <button @click="loadResource" class="btn btn-primary btn-sm btn-outline">load resource</button>
-          </div>
-          <div class="h-0 border my-2"></div>
-          <div class="flex justify-between">
-            <h3 class="text-xl flex-1 flex justify-center">urls</h3><button class="btn btn-primary btn-sm"
-              @click="getUrlStats">refresh</button>
-          </div>
-          <ul class="mt-2 w-full flex flex-col">
-            <li v-for="(url,i) in selectedClassLoadersUrlStats" :key="i" class="bg-blue-200 mb-2 p-2 break-all w-full">
-              {{url}}</li>
-          </ul>
-        </template>
-        <!-- </div> -->
+            <div class="h-0 border my-2"></div>
+            <div class="flex justify-between">
+              <h3 class="text-xl flex-1 flex justify-center">urls</h3><button class="btn btn-primary btn-sm"
+                @click="getUrlStats">refresh</button>
+            </div>
+            <ul class="mt-2 w-full flex flex-col">
+              <li v-for="(url, i) in selectedClassLoadersUrlStats" :key="i"
+                class="bg-blue-200 mb-2 p-2 break-all w-full">
+                {{ url }}</li>
+            </ul>
+          </template>
+          <!-- </div> -->
+        </div>
       </div>
     </div>
     <!-- 下面的3格 -->
     <div class="w-full flex-auto flex h-[40vh] mt-2">
-      <div class="input-btn-style w-1/3 mr-2 h-full flex">
-        <div class="overflow-y-scroll h-ful w-full">
+      <div class="card w-1/3 mr-2 bg-base-100 border">
+        <div class="card-body overflow-y-scroll">
           <div class=" mb-2 flex items-center justify-end">
             <h3 class="text-xl flex-1 flex justify-center">urlStats</h3>
             <button class="btn btn-primary btn-sm" @click="getAllUrlStats">refresh</button>
@@ -341,38 +343,40 @@ const resetClassloader = () => {
             <CmdResMenu :title="v[0]" :map="v[1]" button-width="w-full" :button-accent="v[2] === loaderCache.hash">
             </CmdResMenu>
           </div>
+
         </div>
       </div>
-      <div class="flex flex-col h-full w-2/3">
-        <div class="input-btn-style w-full mr-2 h-full">
-          <div class="overflow-auto flex-1 h-full">
-            <div class="flex justify-end mb-2">
-              <button class="btn btn-primary btn-sm" @click="getCategorizedByClassType">refresh</button>
-            </div>
-            <div class="overflow-auto">
-              <table class="table w-full table-compact">
-                <thead>
-                  <tr>
-                    <th></th>
-                    <th class=" normal-case" v-for="(v,i) in keyList" :key="i" :class="{'group-first:z-0':i==0}">{{v}}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody class="">
-                  <tr v-for="(map, i) in tableResults" :key="i">
-                    <th>{{i + 1}}</th>
-                    <template v-for="(key, j) in keyList">
-                      <td class="">
-                        {{map.get(key)}}
-                      </td>
-                    </template>
+      <div class="card h-full w-2/3 border bg-base-100">
+        <div class="card-body overflow-auto">
+          <div class="flex justify-around mb-2">
+            <h3 class="text-xl">statistics categorized by class type</h3>
+            <button class="btn btn-primary btn-sm" @click="getCategorizedByClassType">refresh</button>
+          </div>
+          <div class="overflow-auto">
+            <table class="table w-full table-compact">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th class=" normal-case" v-for="(v, i) in keyList" :key="i" :class="{ 'group-first:z-0': i == 0 }">
+                    {{ v }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="">
+                <tr v-for="(map, i) in tableResults" :key="i">
+                  <th>{{ i + 1 }}</th>
+                  <template v-for="(key, j) in keyList">
+                    <td class="">
+                      {{ map.get(key) }}
+                    </td>
+                  </template>
 
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
+
       </div>
     </div>
   </div>
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/HeapDump.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/HeapDump.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/HeapDump.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/HeapDump.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Jad.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Jad.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Jad.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Jad.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Mbean.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Mbean.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Mbean.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Mbean.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Memory.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Memory.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Memory.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Memory.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Ognl.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Ognl.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Ognl.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Ognl.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Reset.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Reset.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Reset.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Reset.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Retransform.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Retransform.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Retransform.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Retransform.vue
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Thread.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Thread.vue
similarity index 71%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Thread.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Thread.vue
index a0229bcf3..537e82ee9 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/Thread.vue
+++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Thread.vue
@@ -8,14 +8,12 @@ import TodoList from '@/components/input/TodoList.vue';
 import {
   Listbox, ListboxButton, ListboxOptions, ListboxOption
 } from '@headlessui/vue';
-import { transfromStore } from "@/stores/resTransform"
 import permachine from '@/machines/perRequestMachine';
-import { watch } from 'fs';
+import transformStackTrace from '@/utils/transform';
 
 const fetchS = fetchStore()
 const FetchService = useInterpret(permachine)
 const stackTrace = reactive([] as string[])
-const transformS = transfromStore()
 const count = ref(0)
 const leastTime = ref(200)
 const isBlock = ref(false)
@@ -63,15 +61,10 @@ const infoCount = ref({
   TERMINATED: 0
 } as ThreadStateCount)
 const tableResults = reactive([] as Map<string, string>[])
-const limitResults = tableResults
-// watchEffect(()=>{
-//   if(count.value > 0) {
-//     tableResults.length = count.value
-//   }
-// })
+
 const tableFilter = computed(() => {
   // 原本的数组
-  let res = count.value > 0 ? tableResults.filter((v, i)=>i < count.value) : tableResults
+  let res = count.value > 0 ? tableResults.filter((v, i) => i < count.value) : tableResults
   if (includesVal.size === 0) return res;
   // 导入过滤条件
   includesVal.forEach((v1) => {
@@ -181,7 +174,7 @@ const setleast = publiC.inputDialogFactory(
   },
   (input) => input.value.toString(),
 )
-const {increase, decrease} = publiC.numberCondition(count,{min:0})
+const { increase, decrease } = publiC.numberCondition(count, { min: 0 })
 const getSpecialThreads = (threadid: number = -1) => {
   let threadName = threadid > 0 ? `${threadid}` : ""
   fetchS.baseSubmit(FetchService, {
@@ -191,7 +184,7 @@ const getSpecialThreads = (threadid: number = -1) => {
     const result = (res as CommonRes).body.results[0]
     if (result.type === "thread") {
       stackTrace.length = 0
-      result.threadInfo.stackTrace.forEach(stack => stackTrace.unshift(transformS.transformStackTrace(stack)))
+      result.threadInfo.stackTrace.forEach(stack => stackTrace.unshift(transformStackTrace(stack)))
     }
   })
 }
@@ -203,10 +196,10 @@ const getSpecialThreads = (threadid: number = -1) => {
     <div class="flex justify-end items-center h-[10vh]">
 
       <TodoList title="filter" :val-set="includesVal" class=" mr-2"></TodoList>
-      <button class="btn ml-2 btn-sm btn-outline" @click="setleast">sample interval:{{leastTime}}</button>
+      <button class="btn ml-2 btn-sm btn-outline" @click="setleast">sample interval:{{ leastTime }}</button>
       <div class="btn-group ml-2" v-show="!isBlock">
         <button class="btn btn-outline btn-sm" @click.prevent="decrease">-</button>
-        <button class="btn btn-outline btn-sm border-x-0" @click.prevent="setlimit">top threads:{{count}}</button>
+        <button class="btn btn-outline btn-sm border-x-0" @click.prevent="setlimit">top threads:{{ count }}</button>
         <button class="btn btn-outline btn-sm" @click.prevent="increase">+</button>
       </div>
       <Listbox v-model="threadState">
@@ -214,10 +207,10 @@ const getSpecialThreads = (threadid: number = -1) => {
           <ListboxButton class="btn w-40 btn-sm btn-outline">state {{ threadState.name }}</ListboxButton>
           <ListboxOptions
             class=" z-10 absolute w-40 mt-2 border overflow-hidden rounded-md hover:shadow-xl transition bg-base-100">
-            <ListboxOption v-for="(am,i) in statelist" :key="i" :value="am" v-slot="{active, selected}">
+            <ListboxOption v-for="(am, i) in statelist" :key="i" :value="am" v-slot="{ active, selected }">
               <div class=" p-2 transition " :class="{
-              'bg-neutral text-neutral-content': active,
-              'bg-neutral-focus text-neutral-content': selected,
+                'bg-neutral text-neutral-content': active,
+                'bg-neutral-focus text-neutral-content': selected,
               }">
                 {{ am.name }}
               </div>
@@ -231,55 +224,58 @@ const getSpecialThreads = (threadid: number = -1) => {
       </label>
       <button class="btn btn-primary btn-sm btn-outline" @click="getThreads"> get threads </button>
     </div>
-    <div class="w-full h-[50vh] input-btn-style my-2 p-4 flex flex-col">
-      <div class="flex h-[8vh] flex-wrap flex-auto">
-        <div v-for="(v, i) in Object.entries(infoCount)" :key="i" class="mr-2">
-          <span class="text-primary-content border border-primary-focus bg-primary-focus w-44 px-2 rounded-l">
-            {{ v[0] }}
-          </span>
-          <span class="border border-primary-focus bg-base-200 rounded-r flex-1 px-1">
-            {{v[1]}}
-          </span>
+    <div class="w-full h-[50vh] my-2 card rounded-box compact border">
+      <div class="card-body overflow-auto">
+        <div class="h-[8vh] flex-wrap flex-auto flex-row flex">
+          <div v-for="(v, i) in Object.entries(infoCount)" :key="i" class="mr-2">
+            <span class="text-primary-content border border-primary-focus bg-primary-focus w-44 px-2 rounded-l">
+              {{ v[0] }}
+            </span>
+            <span class="border border-primary-focus bg-base-200 rounded-r flex-1 px-1">
+              {{ v[1] }}
+            </span>
+          </div>
+        </div>
+        <div class="overflow-auto h-[40vh] w-full">
+          <table class="table w-full">
+            <thead>
+              <tr>
+                <th class=""></th>
+                <template v-if="count === 0">
+                  <th class="normal-case" v-for="(v, i) in keyList" :key="i">{{ v }}</th>
+                </template>
+                <template v-else>
+                  <th class="normal-case" v-for="(v, i) in statsList" :key="i">{{ v }}</th>
+                </template>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(map, i) in tableFilter" :key="i">
+                <th class="2"><button class="btn-outline btn-primary btn btn-sm"
+                    @click="getSpecialThreads(parseInt(map.get('id')!))" v-if="map.get('id') !== '-1'">
+                    get stackTrace
+                  </button></th>
+                <template v-if="count === 0">
+                  <td class="" v-for="(key, j) in keyList" :key="j">
+                    {{ map.get(key) }}
+                  </td>
+                </template>
+                <template v-else>
+                  <td class="" v-for="(key, j) in statsList" :key="j">
+                    {{ map.get(key) }}
+                  </td>
+                </template>
+              </tr>
+            </tbody>
+          </table>
         </div>
-      </div>
-      <div class="overflow-auto h-[40vh] w-full">
-        <table class="table w-full">
-          <thead>
-            <tr>
-              <th class=""></th>
-              <template v-if="count === 0">
-                <th class="normal-case" v-for="(v,i) in keyList" :key="i">{{v}}</th>
-              </template>
-              <template v-else>
-                <th class="normal-case" v-for="(v,i) in statsList" :key="i">{{v}}</th>
-              </template>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(map, i) in tableFilter" :key="i">
-              <th class="2"><button class="btn-outline btn-primary btn btn-sm"
-                  @click="getSpecialThreads(parseInt(map.get('id')!))" v-if="map.get('id')!=='-1'">
-                  get stackTrace
-                </button></th>
-              <template v-if="count === 0">
-                <td class="" v-for="(key,j) in keyList" :key="j">
-                  {{map.get(key)}}
-                </td>
-              </template>
-              <template v-else>
-                <td class="" v-for="(key,j) in statsList" :key="j">
-                  {{map.get(key)}}
-                </td>
-              </template>
-            </tr>
-          </tbody>
-        </table>
       </div>
     </div>
-    <div class="input-btn-style flex-auto overflow-auto">
-      <h2 class="text-lg">stackTrace</h2>
-      <div v-for="(stack, i) in stackTrace" class="mb-2" :key="i">{{stack}} </div>
-
+    <div class=" flex-auto card rounded-box compact border">
+      <div class="card-body overflow-auto ">
+        <h2 class="text-lg">stackTrace</h2>
+        <div v-for="(stack, i) in stackTrace" class="mb-2" :key="i">{{ stack }} </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Vmtool.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Vmtool.vue
similarity index 100%
rename from web-ui/arthasWebConsole/ui/src/views/sync/Vmtool.vue
rename to web-ui/arthasWebConsole/all/ui/ui/src/views/sync/Vmtool.vue
diff --git a/web-ui/arthasWebConsole/package.json b/web-ui/arthasWebConsole/package.json
index f8032dde4..cb715ebb9 100644
--- a/web-ui/arthasWebConsole/package.json
+++ b/web-ui/arthasWebConsole/package.json
@@ -3,11 +3,13 @@
   "private": false,
   "version": "0.1.4",
   "scripts": {
-    "dev": "vite --port 8000 --mode ui",
     "dev:tunnel": "vite --port 8000 --mode tunnel",
-    "build": "vue-tsc --noEmit && vite build --mode ui",
+    "dev:ui": "vite --port 8000 --mode ui",
+    "build": "vue-tsc --noEmit && vite build --mode tunnel && vite build --mode ui",
     "build:tunnel": "vue-tsc --noEmit && vite build --mode tunnel",
-    "preview": "vite preview"
+    "build:ui": "vue-tsc --noEmit && vite build --mode ui",
+    "preview:ui": "vite preview --mode ui",
+    "preview:tunnel": "vite preview --mode tunnel"
   },
   "dependencies": {
     "@headlessui/vue": "^1.6.6",
diff --git a/web-ui/arthasWebConsole/tailwind.config.js b/web-ui/arthasWebConsole/tailwind.config.js
index 16d9469d3..0cecd3cfa 100644
--- a/web-ui/arthasWebConsole/tailwind.config.js
+++ b/web-ui/arthasWebConsole/tailwind.config.js
@@ -1,10 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./ui/index.html",
-    "./index.html",
-    "./src/*.{vue,js,ts,jsx,tsx}",
-    "./ui/src/**/*.{vue,js,ts,jsx,tsx}",
+    "all/**/*.{vue,ts,css}",
   ],
   theme: {
     extend: {
diff --git a/web-ui/arthasWebConsole/tsconfig.json b/web-ui/arthasWebConsole/tsconfig.json
index 378d4ecb7..a6d0ddaa5 100644
--- a/web-ui/arthasWebConsole/tsconfig.json
+++ b/web-ui/arthasWebConsole/tsconfig.json
@@ -14,13 +14,18 @@
     "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@/*":["ui/src/*"]
+      "@/*": ["all/ui/ui/src/*"],
+      "~/*": ["all/share/*"]
     },
     "experimentalDecorators": true
   },
   "include": [
-    "ui/src/**/*.ts", "ui/src/**/*.d.ts", "ui/src/**/*.tsx", "ui/src/**/*.vue","ui/tests/**/*.ts",
-    "src/**/*.vue", "src/**/*.ts","src/**/*.d.ts"
+    "all/**/*.vue",
+    "all/**/*.ts",
+    "all/**/*.d.ts",
+    "all/env.d.ts"
   ],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    { "path": "./tsconfig.node.json" }
+  ]
 }
diff --git a/web-ui/arthasWebConsole/tsconfig.node.json b/web-ui/arthasWebConsole/tsconfig.node.json
index e993792cb..2b5a3948a 100644
--- a/web-ui/arthasWebConsole/tsconfig.node.json
+++ b/web-ui/arthasWebConsole/tsconfig.node.json
@@ -4,5 +4,5 @@
     "module": "esnext",
     "moduleResolution": "node"
   },
-  "include": ["vite.config.ts"]
+  "include": ["./vite.config.ts"]
 }
diff --git a/web-ui/arthasWebConsole/ui/src/env.d.ts b/web-ui/arthasWebConsole/ui/src/env.d.ts
deleted file mode 100644
index d92149da1..000000000
--- a/web-ui/arthasWebConsole/ui/src/env.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/index.css b/web-ui/arthasWebConsole/ui/src/index.css
deleted file mode 100644
index dbd5ef72a..000000000
--- a/web-ui/arthasWebConsole/ui/src/index.css
+++ /dev/null
@@ -1,12 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .button-style {
-    @apply bg-blue-400 hover:opacity-50 transition rounded-md p-2
-  }
-  .input-btn-style {
-    @apply border p-2 rounded-xl hover:shadow-md transition border-gray-300
-  }
-}
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/stores/resTransform.ts b/web-ui/arthasWebConsole/ui/src/stores/resTransform.ts
deleted file mode 100644
index 1a4d37653..000000000
--- a/web-ui/arthasWebConsole/ui/src/stores/resTransform.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineStore } from "pinia";
-
-export const transfromStore = defineStore("transformStore", {
-  actions: {
-    transformStackTrace(trace: StackTrace) {
-      return `${trace.className}.${trace.methodName} (${trace.fileName}: ${trace.lineNumber})`;
-    }
-  },
-});
diff --git a/web-ui/arthasWebConsole/vite.config.ts b/web-ui/arthasWebConsole/vite.config.ts
index 149b3ffd9..1afd5dd12 100644
--- a/web-ui/arthasWebConsole/vite.config.ts
+++ b/web-ui/arthasWebConsole/vite.config.ts
@@ -9,28 +9,45 @@ export default defineConfig(({ mode }) => {
     `${env.VITE_ARTHAS_PROXY_IP}:${env.VITE_ARTHAS_PROXY_PORT}`;
 
   console.log("Arthas proxy :", proxyTarget);
-  let outDir, input
-  console.log(env.VITE_AGENT)
-  if (env.VITE_AGENT === "true") {
-    outDir = `./dist/tunnel`
+  let outDir, input, root, proxy;
+
+  if (mode === "tunnel") {
+    outDir = path.resolve(__dirname, `dist/tunnel`);
+    root = "./all/tunnel";
     input = {
-      tunnel: path.resolve(__dirname, "index.html")
-    }
-  } else {
-    outDir = `./dist`
+      tunnel: path.resolve(__dirname, "all/tunnel/index.html"),
+      apps: path.resolve(__dirname, "all/tunnel/apps.html"),
+      agents: path.resolve(__dirname, "all/tunnel/agents.html"),
+    };
+    proxy = {
+      "/api": {
+        target: `http://${proxyTarget}`,
+        changeOrigin: true,
+      },
+    };
+  } else if (mode === "ui") {
+    outDir = path.resolve(__dirname, `dist/ui`);
+    root = "./all/ui";
     input = {
-      main: path.resolve(__dirname, "index.html"),
-      ui: path.resolve(__dirname, "ui/index.html"),
-    }
+      main: path.resolve(__dirname, "all/ui/index.html"),
+      ui: path.resolve(__dirname, "all/ui/ui/index.html"),
+    };
+    proxy = {
+      "/api": {
+        target: `http://${proxyTarget}`,
+        changeOrigin: true,
+      },
+    };
   }
 
   return {
     plugins: [vue({
-      reactivityTransform: true,
+      reactivityTransform: path.resolve(__dirname, "all/ui"),
     })],
     resolve: {
       alias: {
-        "@": path.resolve(__dirname, "./ui/src/"),
+        "@": path.resolve(__dirname, "all/ui/ui/src"),
+        "~": path.resolve(__dirname, "all/share"),
       },
     },
     build: {
@@ -53,13 +70,10 @@ export default defineConfig(({ mode }) => {
       "__VUE_OPTIONS_API__": false,
     },
     base: "/",
+    publicDir: path.resolve(__dirname, "all/share/public"),
+    root,
     server: {
-      proxy: {
-        "/api": {
-          target: `http://${proxyTarget}`,
-          changeOrigin: true,
-        },
-      },
+      proxy,
     },
   };
 });
diff --git a/web-ui/pom.xml b/web-ui/pom.xml
index 63accfb45..af8d47455 100644
--- a/web-ui/pom.xml
+++ b/web-ui/pom.xml
@@ -71,12 +71,21 @@
                         </configuration>
                     </execution>
                     <execution>
-                        <id>vite build</id>
+                        <id>vite build:ui</id>
                         <goals>
                             <goal>yarn</goal>
                         </goals>
                         <configuration>
-                            <arguments>vite build</arguments>
+                            <arguments>vite build --mode ui</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>vite build:tunnel</id>
+                        <goals>
+                            <goal>yarn</goal>
+                        </goals>
+                        <configuration>
+                            <arguments>vite build --mode tunnel</arguments>
                         </configuration>
                     </execution>
                 </executions>