diff --git a/web-ui/arthasWebConsole/.env.tunnel b/web-ui/arthasWebConsole/.env.tunnel
new file mode 100644
index 000000000..5aaf1f490
--- /dev/null
+++ b/web-ui/arthasWebConsole/.env.tunnel
@@ -0,0 +1,2 @@
+# NODE_ENV=production
+VITE_AGENT=true
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/.env.ui b/web-ui/arthasWebConsole/.env.ui
new file mode 100644
index 000000000..04da6f0fd
--- /dev/null
+++ b/web-ui/arthasWebConsole/.env.ui
@@ -0,0 +1,2 @@
+# NODE_ENV=production
+VITE_AGENT=false
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/package.json b/web-ui/arthasWebConsole/package.json
index 1b8e5e03d..f8032dde4 100644
--- a/web-ui/arthasWebConsole/package.json
+++ b/web-ui/arthasWebConsole/package.json
@@ -3,8 +3,10 @@
   "private": false,
   "version": "0.1.4",
   "scripts": {
-    "dev": "vite --port 8000",
-    "build": "vue-tsc --noEmit && vite build",
+    "dev": "vite --port 8000 --mode ui",
+    "dev:tunnel": "vite --port 8000 --mode tunnel",
+    "build": "vue-tsc --noEmit && vite build --mode ui",
+    "build:tunnel": "vue-tsc --noEmit && vite build --mode tunnel",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -31,6 +33,6 @@
     "tailwindcss": "^3.1.4",
     "typescript": "^4.7.4",
     "vite": "^2.9.9",
-    "vue-tsc": "^0.34.7"
+    "vue-tsc": "1.0.8"
   }
 }
diff --git a/web-ui/arthasWebConsole/src/App.vue b/web-ui/arthasWebConsole/src/App.vue
index a2d4481d5..0e6ed4adf 100644
--- a/web-ui/arthasWebConsole/src/App.vue
+++ b/web-ui/arthasWebConsole/src/App.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from "vue";
 import { Terminal } from "xterm"
 import { FitAddon } from 'xterm-addon-fit';
-import {WebglAddon} from "xterm-addon-webgl"
+import { WebglAddon } from "xterm-addon-webgl"
 
 let ws: WebSocket | undefined;
 
@@ -14,9 +14,11 @@ 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 fitAddon = new FitAddon();
 const webglAddon = new WebglAddon();
-let xterm = new Terminal({allowProposedApi: true})
+let xterm = new Terminal({ allowProposedApi: true })
 
 onMounted(() => {
   ip.value = getUrlParam('ip') ?? window.location.hostname;
@@ -27,7 +29,7 @@ onMounted(() => {
   startConnect(true);
   window.addEventListener('resize', function () {
     if (ws !== undefined && ws !== null) {
-      const {cols, rows} = fitAddon.proposeDimensions()!
+      const { cols, rows } = fitAddon.proposeDimensions()!
       ws.send(JSON.stringify({ action: 'resize', cols, rows: rows }));
       fitAddon.fit();
     }
@@ -56,7 +58,7 @@ function initWs(silent: boolean) {
 
     let scrollback = getUrlParam('scrollback') ?? '0';
 
-    const {cols, rows} = initXterm(scrollback)
+    const { cols, rows } = initXterm(scrollback)
     xterm.onData(function (data) {
       ws?.send(JSON.stringify({ action: 'read', data: data }))
     });
@@ -85,7 +87,7 @@ function initXterm(scrollback: string) {
     scrollback: isValidNumber(scrollNumber) ? scrollNumber : DEFAULT_SCROLL_BACK
   });
   xterm.loadAddon(fitAddon)
-  
+
   xterm.open(document.getElementById('terminal')!);
 
   xterm.loadAddon(webglAddon)
@@ -136,8 +138,8 @@ function disconnect() {
 function xtermFullScreen() {
   var ele = document.getElementById('terminal-card')!;
   requestFullScreen(ele);
-  ele.onfullscreenchange = (e:Event)=>{
-      fitAddon.fit()
+  ele.onfullscreenchange = (e: Event) => {
+    fitAddon.fit()
   }
 }
 
@@ -162,8 +164,8 @@ function requestFullScreen(element: HTMLElement) {
   <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>
+        <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">
           <li>
             <a class="hover:text-sky-500 dark:hover:text-sky-400 text-sm" href="https://arthas.aliyun.com/doc"
@@ -200,7 +202,7 @@ function requestFullScreen(element: HTMLElement) {
           <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 class="btn btn-sm bg-secondary hover:bg-secondary-focus border-none text-secondary-content focus:bg-secondary-focus normal-case"
+          <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>
         </div>
       </form>
diff --git a/web-ui/arthasWebConsole/src/env.d.ts b/web-ui/arthasWebConsole/src/env.d.ts
index 8bdc147ef..4f9c20631 100644
--- a/web-ui/arthasWebConsole/src/env.d.ts
+++ b/web-ui/arthasWebConsole/src/env.d.ts
@@ -4,4 +4,11 @@ declare module '*.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
+}
+interface ImportMetaEnv {
+  readonly VITE_AGENT:string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/web-ui/arthasWebConsole/ui/src/App.vue b/web-ui/arthasWebConsole/ui/src/App.vue
index cea09aa3a..6e3ebe4d9 100644
--- a/web-ui/arthasWebConsole/ui/src/App.vue
+++ b/web-ui/arthasWebConsole/ui/src/App.vue
@@ -1,11 +1,9 @@
-<script setup lang="ts">
-import NavAside from "@/components/routeTo/NavAside.vue";
+ <script setup lang="ts">
+// import NavAside from "@/components/routeTo/NavAside.vue";
 import NavHeader from "@/components/NavHeader.vue";
 import ErrDialog from "@/components/dialog/ErrDialog.vue";
 import SuccessDialog from "@/components/dialog/SuccessDialog.vue";
 import { onBeforeUnmount } from "vue";
-import machine from "./machines/consoleMachine";
-import { interpret } from "xstate";
 import { fetchStore } from "./stores/fetch";
 import InputDialog from "./components/dialog/InputDialog.vue";
 import { publicStore } from "./stores/public";
@@ -13,24 +11,16 @@ import WarnDialog from "./components/dialog/WarnDialog.vue";
 const fetchS = fetchStore()
 const publicS = publicStore()
 onBeforeUnmount(() => {
-  const actor = interpret(machine)
-  actor.start()
-  actor.send("INIT")
-  actor.send({
-    type: "SUBMIT",
-    value: {
-      action: "interrupt_job",
-    } as AsyncReq
-  })
+  fetchS.interruptJob()
 })
 </script>
-
+<!-- dialog用v-if方便触发hooks -->
 <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>
+        <!-- <nav-aside ></nav-aside> -->
         <div class="flex-auto overflow-auto h-[90vh] w-[90vw]">
           <router-view>
           </router-view>
diff --git a/web-ui/arthasWebConsole/ui/src/arthas.d.ts b/web-ui/arthasWebConsole/ui/src/arthas.d.ts
index 188f7d6a4..c0be89090 100644
--- a/web-ui/arthasWebConsole/ui/src/arthas.d.ts
+++ b/web-ui/arthasWebConsole/ui/src/arthas.d.ts
@@ -1,4 +1,3 @@
-
 type SessionAction =
   | "join_session"
   | "init_session"
@@ -68,7 +67,7 @@ type AsyncReq = SessionId<
     } | {
       command: StringInclude<"stack", 3>;
     } | {
-      command: `monitor -c ${number} ${string} ${string}`;
+      command: `monitor ${string} ${string} ${string} ${string}`;
     } | {
       command: `trace ${string} ${string}`;
     } | {
@@ -88,6 +87,7 @@ type CommandReq = CommonAction<
       | "sysenv"
       | "version"
       | "sysprop"
+      | `sysprop ${string} ${string}`
       | "pwd"
       | "jvm"
       | "memory"
@@ -114,6 +114,8 @@ type CommandReq = CommonAction<
       | `profiler ${"list" | "status" | "stop" | "resume" | "getSamples"}`
       | `profiler ${string}`
       | `stop`
+      | `options`
+      | `options ${string} ${string}`
       | `ognl ${string}`;
   } | {
     command: StringInclude<"vmoption" | "thread", 2>;
@@ -362,6 +364,12 @@ type TimeFragment = {
   "throwExp": string;
   "timestamp": string;
 };
+type Perfcounter = {
+  name: string;
+  units: string;
+  value: string | number;
+  variability: string;
+};
 type MonitorData = {
   className: string;
   cost: number;
@@ -369,6 +377,15 @@ type MonitorData = {
   methodName: number;
   success: number;
   total: number;
+  timestamp: string;
+};
+type GlobalOptions = {
+  "description": string;
+  "level": number;
+  "name": string;
+  "summary": string;
+  "type": string;
+  "value": string;
 };
 type CommandResult = {
   type: "command";
@@ -402,6 +419,14 @@ type CommandResult = {
   threadStats: never;
   busyThreads: never;
   type: "thread";
+} | {
+  options: GlobalOptions[];
+  changeResult: {
+    "afterValue": unknown,
+    "beforeValue": unknown,
+    "name": string
+};
+  type: "options";
 } | {
   all: boolean;
   threadStateCount: never;
@@ -416,43 +441,23 @@ type CommandResult = {
   memoryInfo: MemoryInfo;
   type: "memory";
 } | {
-  perfCounters: {
-    name: string;
-    units: string;
-    value: string | number;
-    variability: string;
-  }[];
+  perfCounters: Perfcounter[];
   type: "perfcounter";
-  } | {
-    "classLoaderStats": Record<string,Record<"loadedCount"|"numberOfInstance",number>>
-    urlStats: never;
-    urls:never;
-    tree:never;
-    type: "classloader";
 } | {
-  type: "classloader";
+  "classLoaderStats": Record<
+    string,
+    Record<"loadedCount" | "numberOfInstance", number>
+  >;
   urlStats: {
     [x: `{hash":${string},"name:${string}}`]: {
       unUsedUrls: string[];
       usedUrls: string[];
     };
   };
-  "classLoaderStats":never;
-  urls: never;
-  tree: never;
-} | {
-  type: "classloader";
-  urls: never;
-  "classLoaderStats";
-  urlStats:never;
+  urls: string[];
   classLoaders: ClassLoaderNode[];
   tree: boolean;
-} | {
   type: "classloader";
-  urls: string[];
-  urlStats:never;
-  "classLoaderStats":never;
-  tree: never;
 } | {
   classInfo: ClassInfo;
   detailed: true;
diff --git a/web-ui/arthasWebConsole/ui/src/components/NavHeader.vue b/web-ui/arthasWebConsole/ui/src/components/NavHeader.vue
index 6885bdbe6..68063c5f7 100644
--- a/web-ui/arthasWebConsole/ui/src/components/NavHeader.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/NavHeader.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useMachine } from '@xstate/vue';
-import { onBeforeMount, Ref, ref, watchEffect } from 'vue';
+import { computed, onBeforeMount, Ref, ref, watchEffect } from 'vue';
 import { RefreshIcon, LogoutIcon, LoginIcon, MenuIcon, XCircleIcon } from '@heroicons/vue/outline';
 import { fetchStore } from '@/stores/fetch';
 import machine from "@/machines/consoleMachine"
 import { publicStore } from '@/stores/public';
 import { interpret } from 'xstate';
-import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+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';
 const fetchM = useMachine(machine)
 const publicS = publicStore()
@@ -22,8 +24,9 @@ const vCmd: CommandReq = {
 const restBtnclass: Ref<'animate-spin-rev-pause' | 'animate-spin-rev-running'> = ref('animate-spin-rev-pause')
 publicS.getCommonResEffect(fetchM, body => {
   const result = body.results[0]
-  if (result.type === "version") version.value = result.version
-})
+  if (result.type === "version") {
+    version.value = result.version
+  }})
 
 watchEffect(() => {
   if (!fetchS.wait) restBtnclass.value = "animate-spin-rev-pause"
@@ -36,6 +39,7 @@ onBeforeMount(() => {
     value: vCmd
   })
   sessionM.send("INIT")
+  // fetchS.baseSubmit()
 })
 // 手动重来
 const reset = () => {
@@ -72,7 +76,6 @@ const logout = async () => {
   })
   restBtnclass.value = "animate-spin-rev-pause"
 }
-
 const login = async () => {
   sessionM.send("SUBMIT", {
     value: {
@@ -99,59 +102,103 @@ const resetAllClass = () => {
   }).then(response => {
     const result = (response as CommonRes).body.results[0]
     if (result.type === "reset") {
-      publicS.isSuccess=true
-    publicS.SuccessMessage = JSON.stringify(result.affect)
+      publicS.isSuccess = true
+      publicS.SuccessMessage = JSON.stringify(result.affect)
     }
 
   })
 }
-const tools:[string,()=>void][] = [
+const tabs = [
+  {
+    name: 'dashboard',
+    url: "/dashboard",
+    icon: DesktopComputerIcon
+  },
+  {
+    name: 'immediacy',
+    url: '/synchronize',
+    icon: ViewGridIcon
+  }, {
+    name: "real time",
+    url: '/asynchronize',
+    icon: ViewGridIcon
+  },
+  {
+    name: 'option',
+    url: '/config',
+    icon: PuzzleIcon
+  },
+  {
+    name: 'console',
+    url: '/console',
+    icon: TerminalIcon
+  },
+  {
+    name:'terminal',
+    url:'terminal',
+    icon:TerminalIcon
+  }
+]
+
+const tools: [string, () => void][] = [
   ["forceGc", forceGc],
   ["shutdown", shutdown],
   ["reset class", resetAllClass]
 ]
+const router = useRouter()
+const routePath = computed(() => useRoute().path)
+const toNext = (url: string) => {
+  if(url === "terminal") {
+    window.open("/","_blank")
+  } else router.push(url)
+}
 </script>
 
 <template>
-  <nav class=" h-[10vh] flex justify-between items-center min-h-max border-b-2 shadow-orange-300">
-    <a class="w-40 flex items-center justify-center" href="https://arthas.aliyun.com/doc/commands.html" target="_blank">
-      <img src="/arthas.png" alt="logo" class=" w-3/4" />
-    </a>
-
-    <div class="flex items-center h-20">
-      <div class=" mr-4 bg-info text-info-content h-12 rounded-full flex justify-center items-center font-bold p-2">
-        sessionId: {{fetchS.sessionId}}</div>
-      <div class=" mr-4 bg-info text-info-content h-12 p-2 rounded-full flex justify-center items-center font-bold">
-        version:{{ version }}
-      </div>
+  <nav class=" h-[10vh] border-b-2 navbar">
+    <div class=" navbar-start flex items-stretch ">
+      <!-- <div class=" indicator mx-3"> -->
+        <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" />
+        </a>
+        <span class="badge badge-ghost self-end text-sm">v{{version}}</span>
+      <!-- </div> -->
+    </div>
+    <div class="navbar-center">
+      <ul class="menu menu-horizontal p-0">
+        <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), }">
+            <component :is="tab.icon" class="w-4 h-4" />
+            {{
+            tab.name
+            }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="flex items-center h-20 navbar-end">
       <button v-if="fetchS.jobRunning" @click.prevent="interruptEvent"
-        class="btn-error btn rounded-full h-1/2 p-2 transition mr-4">interrupt</button>
-      <button class=" rounded-full btn btn-info btn-circle h-12 w-12 flex justify-center items-center mr-4 " @click="reset">
-        <refresh-icon class="h-3/4 w-3/4" :class="restBtnclass" />
+        class="btn-error btn h-1/2 p-2">interrupt</button>
+      <div class="dropdown dropdown-end mr-2">
+        <label tabindex="0" class="btn btn-ghost m-1">
+          <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>
+        </ul>
+      </div>
+      <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="hover:opacity-50 h-12 w-12 grid place-items-center  rounded-full mr-2 transition-all"
-        :class="{ 'bg-primary': !fetchS.online, 'bg-error': fetchS.online }">
-        <LogoutIcon class="h-1/2 w-1/2 text-error-content" @click="logout" v-if="fetchS.online" />
-        <login-icon class="h-1/2 w-1/2 text-primary-content" @click="login" v-else />
+      <button class="btn-ghost btn"
+        @click="reset">
+        <refresh-icon class="h-6 w-6" :class="restBtnclass" />
       </button>
-      <Menu as="div" class="relative mr-4">
-        <MenuButton
-          class="w-12 h-12 input-btn-style grid place-items-center rounded-full bg-primary transition">
-          <MenuIcon class="h-3/4 w-3/4 text-primary-content"></MenuIcon>
-          <!-- <XCirleIcon class="h-3/4 w-3/4"></XCirleIcon> -->
-        </MenuButton>
-        <MenuItems class="absolute right-0 top-full input-btn-style mt-4 bg-white px-0 z-10 w-40">
-          <MenuItem v-slot="{ active }" v-for="(v,i) in tools" :key="i">
-          <div :class='{ "bg-blue-500 text-primary-content": active }' class="px-4 py-2">
-            <button @click.prevent="v[1]">{{v[0]}}</button>
-          </div>
-
-          </MenuItem>
-        </MenuItems>
-      </Menu>
     </div>
   </nav>
-</template>
-<style scoped>
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/ErrDialog.vue b/web-ui/arthasWebConsole/ui/src/components/dialog/ErrDialog.vue
index c4ebc5fd6..f70729b13 100644
--- a/web-ui/arthasWebConsole/ui/src/components/dialog/ErrDialog.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/dialog/ErrDialog.vue
@@ -24,9 +24,9 @@ onBeforeMount(()=>{fetchStore().curPolling.close()})
     <Dialog @close="setIsOpen" class="min-w-max z-20">
       <TransitionChild enter="transition-opacity duration-300" enter-from="opacity-0" enter-to="opacity-100"
         leave="transition-opacity duration-300" leave-from="opacity-100" leave-to="opacity-0">
-        <div class="fixed inset-0 bg-black bg-opacity-25" />
+        <div class="fixed inset-0 bg-black bg-opacity-25 z-20" />
       </TransitionChild>
-      <div class="fixed inset-0 grid place-items-center min-w-max">
+      <div class="fixed inset-0 grid place-items-center min-w-max z-30">
         <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
           enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
           leave-to="opacity-0 scale-95">
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/InputDialog.vue b/web-ui/arthasWebConsole/ui/src/components/dialog/InputDialog.vue
index 63ca52a2e..3c45c4903 100644
--- a/web-ui/arthasWebConsole/ui/src/components/dialog/InputDialog.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/dialog/InputDialog.vue
@@ -8,9 +8,8 @@ import {
   TransitionChild,
   TransitionRoot
 } from '@headlessui/vue'
-import { onMounted, ref, onBeforeMount } from 'vue';
+import { onMounted, ref } from 'vue';
 const store = publicStore()
-const debug = (e: any) => console.log(e)
 
 const inputV = ref("")
 onMounted(() => {
@@ -20,10 +19,11 @@ onMounted(() => {
 
 function setIsOpen() {
   store.inputVal = inputV.value
-  console.log(store.inputVal, inputV.value)
+  store.inputE = true
   store.isInput = false
 }
 function setIsOpenCancel() {
+  store.inputE = false
   store.isInput = false
 }
 </script>
@@ -33,9 +33,9 @@ function setIsOpenCancel() {
     <Dialog @close="setIsOpenCancel" class="min-w-max z-20">
       <TransitionChild enter="transition-opacity duration-300" enter-from="opacity-0" enter-to="opacity-100"
         leave="transition-opacity duration-300" leave-from="opacity-100" leave-to="opacity-0">
-        <div class="fixed inset-0 bg-black bg-opacity-25" />
+        <div class="fixed inset-0 bg-black bg-opacity-25 z-20" />
       </TransitionChild>
-      <div class="fixed inset-0 grid place-items-center min-w-max">
+      <div class="fixed inset-0 grid place-items-center min-w-max z-30">
         <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
           enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
           leave-to="opacity-0 scale-95">
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/SuccessDialog.vue b/web-ui/arthasWebConsole/ui/src/components/dialog/SuccessDialog.vue
index e0cbd2041..f6957de6d 100644
--- a/web-ui/arthasWebConsole/ui/src/components/dialog/SuccessDialog.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/dialog/SuccessDialog.vue
@@ -22,9 +22,9 @@ function setIsOpen(value: boolean) {
     <Dialog @close="setIsOpen" class="min-w-max z-20">
       <TransitionChild enter="transition-opacity duration-300" enter-from="opacity-0" enter-to="opacity-100"
         leave="transition-opacity duration-300" leave-from="opacity-100" leave-to="opacity-0">
-        <div class="fixed inset-0 bg-black bg-opacity-25" />
+        <div class="fixed inset-0 bg-black bg-opacity-25 z-20" />
       </TransitionChild>
-      <div class="fixed inset-0 grid place-items-center min-w-max">
+      <div class="fixed inset-0 grid place-items-center min-w-max z-30">
         <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
           enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
           leave-to="opacity-0 scale-95">
diff --git a/web-ui/arthasWebConsole/ui/src/components/dialog/WarnDialog.vue b/web-ui/arthasWebConsole/ui/src/components/dialog/WarnDialog.vue
index e41e0b509..9810d4c03 100644
--- a/web-ui/arthasWebConsole/ui/src/components/dialog/WarnDialog.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/dialog/WarnDialog.vue
@@ -29,9 +29,9 @@
       <Dialog @close="setIsOpenCancel" class="min-w-max min-h-max z-20">
         <TransitionChild enter="transition-opacity duration-300" enter-from="opacity-0" enter-to="opacity-100"
           leave="transition-opacity duration-300" leave-from="opacity-100" leave-to="opacity-0">
-          <div class="fixed inset-0 bg-black bg-opacity-25" />
+          <div class="fixed inset-0 bg-black bg-opacity-25 z-20" />
         </TransitionChild>
-        <div class="fixed inset-0 grid place-items-center min-w-max">
+        <div class="fixed inset-0 grid place-items-center min-w-max z-30">
           <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
             enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
             leave-to="opacity-0 scale-95">
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/AutoComplete.vue b/web-ui/arthasWebConsole/ui/src/components/input/AutoComplete.vue
index b1e382a99..352b7f586 100644
--- a/web-ui/arthasWebConsole/ui/src/components/input/AutoComplete.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/input/AutoComplete.vue
@@ -91,7 +91,7 @@ const blurF = (event:Event)=>{
             'bg-blue-600 text-white': selected,
             'text-gray-900': !active && !selected,
           }">
-            <span class="block truncate"
+            <span class="block"
               :class="{ 'font-medium': selected, 'font-normal': !selected, 'text-white': active, 'text-teal-600': !active && !selected }">
               {{ item.name }}
             </span>
diff --git a/web-ui/arthasWebConsole/ui/src/components/input/MethodInput.vue b/web-ui/arthasWebConsole/ui/src/components/input/MethodInput.vue
index bfddd02d9..3a0a1d446 100644
--- a/web-ui/arthasWebConsole/ui/src/components/input/MethodInput.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/input/MethodInput.vue
@@ -84,7 +84,7 @@ const setExpress = publicStore().inputDialogFactory(
   raw => raw,
   _ => _.value
 )
-
+const { increase, decrease } = publicStore().numberCondition(autoStop, { min: 0, max: 100 })
 
 const filterfn = (_: any, item: Item) => true
 </script>
@@ -95,9 +95,16 @@ const filterfn = (_: any, item: Item) => true
     <AutoComplete label="method" :option-items="optionMethod"
       :input-fn="(value: string) => changeMethod(slotClass.selectItem.value as string, value)" :filter-fn="filterfn"
       v-slot="slotMethod">
-      <button v-if="nexpress" class="btn btn-sm btn-outline ml-2" @click="setExpress">express:{{express}}</button>
-      <button v-if="ncondition" class="btn btn-sm btn-outline ml-2" @click="setConditon">condition:{{conditon}}</button>
-      <button v-if="ncount" class="btn btn-sm btn-outline ml-2" @click="setCount">count:{{autoStop}}</button>
+      <button v-if="nexpress" class="btn btn-sm btn-outline ml-2"
+        @click.prevent="setExpress">express: <span class="normal-case">{{express}}</span></button>
+      <button v-if="ncondition" class="btn btn-sm btn-outline ml-2"
+        @click.prevent="setConditon">condition: <span class="normal-case">{{conditon}}</span></button>
+      <div class="btn-group ml-2" v-if="ncount">
+        <button class="btn btn-sm btn-outline" @click.prevent="decrease">-</button>
+        <button class="btn btn-sm btn-outline border-x-0" @click.prevent="setCount">count:{{autoStop}}</button>
+        <button class="btn btn-sm btn-outline" @click.prevent="increase">+</button>
+      </div>
+
       <slot name="others" :methodItem="slotMethod.selectItem" :classItem="slotClass.selectItem"></slot>
       <button @click.prevent="submitF({
       classItem: slotClass.selectItem, 
diff --git a/web-ui/arthasWebConsole/ui/src/components/routeTo/NavAside.vue b/web-ui/arthasWebConsole/ui/src/components/routeTo/NavAside.vue
deleted file mode 100644
index 65ff57f10..000000000
--- a/web-ui/arthasWebConsole/ui/src/components/routeTo/NavAside.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
-import { PuzzleIcon, TerminalIcon, ViewGridIcon } from "@heroicons/vue/outline"
-import { DesktopComputerIcon } from "@heroicons/vue/solid"
-import { useRoute, useRouter } from 'vue-router';
-const tabs = [
-  {
-    name: 'dashboard',
-    url: "/dashboard",
-    icon: DesktopComputerIcon
-  },
-  {
-    name: 'immediacy',
-    url: '/synchronize',
-    icon: ViewGridIcon
-  }, {
-    name: "real time",
-    url: '/asynchronize',
-    icon: ViewGridIcon
-  },
-  {
-    name: 'option',
-    url: '/config',
-    icon: PuzzleIcon
-  },
-  // {
-  //   name: 'console',
-  //   url: '/console',
-  //   icon: TerminalIcon
-  // },
-
-]
-const router = useRouter()
-const routePath = computed(() => useRoute().path)
-const toNext = (url: string) => {
-  router.push(url)
-}
-const a: StatusResult = { type: "status", message: "", statusCode: 0 }
-</script>
-
-<template>
-  <ul class="menu bg-base-200 w-[10vw] menu-compact">
-    <li v-for="(tab, idx) in tabs" :key="idx" 
-      @click="toNext(tab.url)" class="pl-2" >
-      <a class="break-all" :class="{ 'bg-primary text-primary-content': routePath.includes(tab.url), }">
-        <component :is="tab.icon" class="w-4 h-4" />
-        {{
-        tab.name
-        }}
-      </a>
-    </li>
-  </ul>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/components/routeTo/SelectCmd.vue b/web-ui/arthasWebConsole/ui/src/components/routeTo/SelectCmd.vue
index 21b508b9e..d27fa80d2 100644
--- a/web-ui/arthasWebConsole/ui/src/components/routeTo/SelectCmd.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/routeTo/SelectCmd.vue
@@ -11,7 +11,7 @@ const routePath = computed(() => route.path)
 </script>
 
 <template>
-  <ul class=" w-[10vw] menu bg-base-300 menu-compact">
+  <ul class=" w-[10vw] menu bg-base-200 menu-compact">
     <li v-for="(v, i) in routes" :key="i">
       <a @click="() => router.push(v.url)" :class='{"bg-secondary text-secondary-content":routePath.includes(v.url)}'>
         {{ v.cmd }}
diff --git a/web-ui/arthasWebConsole/ui/src/components/show/Enhancer.vue b/web-ui/arthasWebConsole/ui/src/components/show/Enhancer.vue
index db167b08a..56c58668c 100644
--- a/web-ui/arthasWebConsole/ui/src/components/show/Enhancer.vue
+++ b/web-ui/arthasWebConsole/ui/src/components/show/Enhancer.vue
@@ -19,7 +19,9 @@ if (result.type === "enhancer") {
         <div class="stat-title">{{kv[0]}}</div>
         <div class="stat-value">{{kv[1]}}</div>
       </div>
+      <slot name="otherStat">
 
+      </slot>
     </div>
 </template>
 
diff --git a/web-ui/arthasWebConsole/ui/src/machines/consoleMachine.ts b/web-ui/arthasWebConsole/ui/src/machines/consoleMachine.ts
index e128bcb39..da6cb9d9b 100644
--- a/web-ui/arthasWebConsole/ui/src/machines/consoleMachine.ts
+++ b/web-ui/arthasWebConsole/ui/src/machines/consoleMachine.ts
@@ -406,8 +406,19 @@ const machine =
                   result.message ===
                     "all consumers are unhealthy, current job was interrupted."
                 ) {
+                  
                   return false;
                 }
+                if (
+                  result.type === "options" &&
+                  Object.hasOwn(result, "changeResult") &&
+                  result.changeResult.afterValue === result.changeResult.beforeValue &&
+                  (result.changeResult.afterValue as string).toString() !== (context.inputValue as CommandReq).command.split(" ")[2]
+                ) {
+                  console.log("?????")
+                  // arthas 本身不会对 options抛错，得手动抛错
+                  return false
+                }
                 return true;
               });
             } else {
diff --git a/web-ui/arthasWebConsole/ui/src/machines/perRequestMachine.ts b/web-ui/arthasWebConsole/ui/src/machines/perRequestMachine.ts
index 19c2691f6..e5e4ea104 100644
--- a/web-ui/arthasWebConsole/ui/src/machines/perRequestMachine.ts
+++ b/web-ui/arthasWebConsole/ui/src/machines/perRequestMachine.ts
@@ -276,8 +276,8 @@ const permachine = createMachine({
           isErr: true,
           ErrMessage: context.err,
         });
-      } else{
-        console.error(context.err)
+      } else {
+        console.error(context.err);
       }
       return {
         err: "",
@@ -302,14 +302,13 @@ const permachine = createMachine({
       };
     }),
     needReportSuccess: (context, e) => {
-      
       if (context.inputValue?.action === "close_session") {
         context.fetchStore.$patch({
           sessionId: "",
           consumerId: "",
           online: false,
         });
-        if(context.publicStore.ignore) return;
+        if (context.publicStore.ignore) return;
         context.publicStore.$patch({
           isSuccess: true,
           SuccessMessage: `close session success!`,
@@ -323,7 +322,7 @@ const permachine = createMachine({
           consumerId: response.consumerId,
           online: true,
         });
-        if(context.publicStore.ignore) return;
+        if (context.publicStore.ignore) return;
         context.publicStore.$patch({
           isSuccess: true,
           SuccessMessage: `init_session success!`,
@@ -391,7 +390,27 @@ const permachine = createMachine({
         if (Object.hasOwn(event.data, "body")) {
           if (Object.hasOwn(event.data.body, "results")) {
             return (event.data as CommonRes).body.results.every((result) => {
-              return result.type === "status" ? result.statusCode === 0 : true;
+              if (result.type === "status" && result.statusCode !== 0) {
+                return false;
+              }
+              if (
+                result.type === "message" &&
+                result.message ===
+                  "all consumers are unhealthy, current job was interrupted."
+              ) {
+                return false;
+              }
+              if (
+                result.type === "options" &&
+                Object.hasOwn(result, "changeResult") &&
+                (result.changeResult.afterValue as string).toString() !==
+                  (context.inputValue as CommandReq).command.split(" ")[2]
+              ) {
+                // console.warn("?????");
+                // arthas 本身不会对 options抛错，得手动抛错
+                return false;
+              }
+              return true;
             });
           } else {
             return ["READY", "TERMINATED"].includes(
diff --git a/web-ui/arthasWebConsole/ui/src/router/routes.ts b/web-ui/arthasWebConsole/ui/src/router/routes.ts
index 7a25ef88f..5dc31bf23 100644
--- a/web-ui/arthasWebConsole/ui/src/router/routes.ts
+++ b/web-ui/arthasWebConsole/ui/src/router/routes.ts
@@ -8,11 +8,31 @@ const routes: RouteRecordRaw[] = [
   {
     path: "/config",
     component: () => import("@/views/Config.vue"),
+    children:[
+      {
+        path:"",
+        redirect:"/config/perCounter"
+      },  {
+        path: "perCounter",
+        component:()=>import("@/views/config/PerCounter.vue")
+      },{
+        path:"sysenv",
+        component:()=>import("@/views/config/Sysenv.vue")
+      },{
+        path:"sysprop",
+        component:()=>import("@/views/config/Sysprop.vue")
+      },{
+        path:"jvm",
+        component:()=>import("@/views/config/Jvm.vue")
+      },{
+        path:"vmoption",
+        component:()=>import("@/views/config/Vmoption.vue")
+      },{
+        path:"options",
+        component:()=>import("@/views/config/Options.vue")
+      }
+    ]
   },
-  // {
-  //   path: "/console",
-  //   component: () => import("@/views/Console.vue"),
-  // },
   {
     path: "/dashboard",
     component: () => import("@/views/DashBoard.vue"),
@@ -29,18 +49,15 @@ const routes: RouteRecordRaw[] = [
         path: "thread",
         component: () => import("@/views/sync/Thread.vue"),
       },
-      // {
-      //   path: "memory",
-      //   component: () => import("@/views/sync/Memory.vue"),
-      // },
       {
         path: "jad",
         component: () => import("@/views/sync/Jad.vue"),
       },
-      {
-        path: "retransform",
-        component: () => import("@/views/sync/Retransform.vue"),
-      },
+      
+      // {
+      //   path: "retransform",
+      //   component: () => import("@/views/sync/Retransform.vue"),
+      // },
       {
         path: "mbean",
         component: () => import("@/views/sync/Mbean.vue"),
@@ -110,6 +127,9 @@ const routes: RouteRecordRaw[] = [
         component: ()=>import("@/views/async/Profiler.vue")
       }
     ],
-  },
+  },{
+    path:"/console",
+    component:()=>import("@/views/Console.vue")
+  }
 ];
 export default routes;
diff --git a/web-ui/arthasWebConsole/ui/src/stores/fetch.ts b/web-ui/arthasWebConsole/ui/src/stores/fetch.ts
index d5d6fa754..8aa2bacdd 100644
--- a/web-ui/arthasWebConsole/ui/src/stores/fetch.ts
+++ b/web-ui/arthasWebConsole/ui/src/stores/fetch.ts
@@ -51,6 +51,8 @@ export const fetchStore = defineStore("fetch", {
     jobIdSet: new Set<string>(),
     //由于轮询只会轮询一个命令，可以直接挂载当前的轮询机
     curPolling: nullLoop,
+    //获取osName 通过dashboard
+    osName:""
   }),
   getters: {
     getRequest: (state) =>
diff --git a/web-ui/arthasWebConsole/ui/src/stores/public.ts b/web-ui/arthasWebConsole/ui/src/stores/public.ts
index 6a19412ca..78f55c690 100644
--- a/web-ui/arthasWebConsole/ui/src/stores/public.ts
+++ b/web-ui/arthasWebConsole/ui/src/stores/public.ts
@@ -23,6 +23,10 @@ export const publicStore = defineStore("public", { // Public项目唯一id
      */
     isInput: false,
     inputVal: "",
+    /**
+     * inputE是输入事件，true代表导入输入，false代表不导入输入
+     */
+    inputE: false,
     ErrMessage: "bug!!!",
     isSuccess: false,
     SuccessMessage: "bug!!!",
@@ -59,10 +63,9 @@ export const publicStore = defineStore("public", { // Public项目唯一id
       });
     },
     /**
-     * 
      * @param inputRef 组件提供的值的存储区
-     * @param getVal 从inputRef到全局缓冲区的处理流程
-     * @param setVal 冲缓冲区到inputRef的处理流程
+     * @param getVal 从缓冲区到inputRef的处理流程
+     * @param setVal 从inputRef到全局缓冲区的处理流程
      * @returns 独占缓冲区函数
      */
     inputDialogFactory<T = string>(
@@ -75,14 +78,18 @@ export const publicStore = defineStore("public", { // Public项目唯一id
       // 发布订阅模式，把函数的闭包里的mutex和缓冲区的锁注册到vue上
       watchEffect(() => {
         if (mutex.value && !this.isInput) {
-          //先上锁，防止再次触发该副作用           
+          //先上锁，防止再次触发该副作用
           mutex.value = false;
           // 把缓冲区的值输入到需要使用的组件里
-          inputRef.value = getVal(this.inputVal);
+          // 触发确认输入事件再输入
+          if(this.inputE) inputRef.value = getVal(this.inputVal);
+          // reset
+          this.inputE = false;
           // 清空缓冲区
           this.inputVal = "";
         }
       });
+
       return () => {
         this.$patch({
           // 打开缓冲区
@@ -94,6 +101,19 @@ export const publicStore = defineStore("public", { // Public项目唯一id
         mutex.value = true;
       };
     },
+    numberCondition(
+      raw: Ref<number>,
+      scope: { min?: number; max?: number },
+    ) {
+      return {
+        increase() {
+          (scope.max === undefined || raw.value < scope.max) && raw.value++;
+        },
+        decrease() {
+          (scope.min === undefined || raw.value > scope.min) && raw.value--;
+        },
+      };
+    },
     nanoToMillis(nanoSeconds: number): number {
       return nanoSeconds / 1000000;
     },
diff --git a/web-ui/arthasWebConsole/ui/src/views/Config.vue b/web-ui/arthasWebConsole/ui/src/views/Config.vue
index 346ca6179..b3e910d73 100644
--- a/web-ui/arthasWebConsole/ui/src/views/Config.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/Config.vue
@@ -1,168 +1,35 @@
 <script setup lang="ts">
-import machine from '@/machines/consoleMachine';
-import { useInterpret, useMachine } from '@xstate/vue';
-import { onBeforeMount, reactive, ref, watchEffect } from 'vue';
-import OptionConfigMenu from '@/components/show/OptionConfigMenu.vue';
-import SwitchInput from '@/components/input/SwitchInput.vue';
-import { publicStore } from '@/stores/public';
-import CmdResMenu from '@/components/show/CmdResMenu.vue';
-import { fetchStore } from '@/stores/fetch';
-import permachine from '@/machines/perRequestMachine';
-const fetchS = fetchStore()
-const sysEnvMap = reactive(new Map<string, string[]>())
-const sysPropMap = reactive(new Map<string, string[]>())
-const perfcounterMap = reactive(new Map<string, string[]>())
-const vmOptionM = useMachine(machine)
-const pwd = ref("?")
-const vmOptionMTree = reactive([] as VmOption[])
+import SelectCmd from '@/components/routeTo/SelectCmd.vue';
 // 初始化
-onBeforeMount(() => {
-  fetchS.baseSubmit(useInterpret(permachine), {
-    action: "exec",
-    command: "pwd"
-  }).then(
-    res => {
-      const result = (res as CommonRes).body.results[0]
-      if (result.type == "pwd") {
-        pwd.value = result.workingDir
-      }
-    }
-  )
-
-  vmOptionM.send("INIT")
-  vmOptionM.send({
-    type: "SUBMIT",
-    value: {
-      action: "exec",
-      command: "vmoption"
-    }
-  })
-})
-
-
-// 处理展示的树形数据
-const handleTree = (data: Record<string, string | boolean | number>, map: Map<string, string[]>): string[] => {
-  map.clear()
-  let res: string[] = []
-  Object.entries(data).forEach(([k, v]) => {
-    res.push(k)
-    if (typeof v === "boolean") v = v.toString()
-    if (typeof v === "number") v = v.toString()
-    if (k.toLowerCase().includes("path")) {
-      map.set(k, v.split(":").filter(v => v.trim() !== ''))
-    } else if (v.includes(";")) {
-      map.set(k, v.split(";").filter(v => v.trim() !== ''))
-    } else {
-      map.set(k, [v])
-    }
-  })
-  return res
-}
-
-const handleEnvTree = (data: Record<string, string>) => handleTree(data, sysEnvMap)
-
-const handlePropTree = (data: Record<string, string>) => handleTree(data, sysPropMap)
-
-
-watchEffect(() => {
-  const response = vmOptionM.state.value.context.response
-  if (response) {
-    if (Object.hasOwn(response, "body")) {
-      console.log(response, "vmoption")
-      const result = (response as CommonRes).body.results[0]
-
-      if (result.type == "vmoption") {
-        // 先clear一下之前的东西
-        vmOptionMTree.length = 0
-        console.log(result.vmOptions, "watchEffect!!!")
-        result.vmOptions.forEach(v => {
-          vmOptionMTree.push(v)
-        })
-      }
-    }
+const routes: { cmd: string, url: string }[] = [
+  {
+    cmd: "JVM",
+    url: "jvm"
+  },{
+    cmd:"system property",
+    url:"sysprop"
+  },{
+    cmd:"system environment variables",
+    url:"sysenv"
+  },{
+    cmd:"JVM Perf Counter information",
+    url:"PerCounter"
+  },{
+    cmd:"JVM diagnostic options",
+    url:"vmoption"
+  },{
+    cmd:"global options",
+    url:"options"
   }
-})
-const vmOptionSend = (pre: string) => (v: { key: string, value: boolean | string }) => {
-  if (pre === "HeapDumpPath" && v.value === "") {
-    publicStore().$patch({ ErrMessage: "HeapDumpPath can't be set \"\" ", isErr: true })
-    return
-  } vmOptionM.send({
-    type: 'SUBMIT', value: {
-      action: "exec",
-      command: `vmoption ${pre} ${v.value === "" ? '\"\"' : v.value}`
-    }
-  })
-}
-
-const jvmMap = reactive(new Map<string, string[]>())
-
-const getJvm = () => fetchS.baseSubmit(useInterpret(permachine), {
-  action: "exec",
-  command: "jvm"
-}).then(res => {
-  const result = (res as CommonRes).body.results[0]
-  if (result.type === "jvm") {
-    jvmMap.clear()
-    Object.entries(result.jvmInfo).forEach(([k, v]) => {
-      jvmMap.set(k, v.map(v => `${v.name} : ${v.value}`))
-    })
-  }
-})
-const getSysenv = () => fetchS.baseSubmit(useInterpret(permachine), {
-  action: "exec",
-  command: "sysenv",
-}).then(res => {
-  let result = (res as CommonRes).body.results[0]
-  if (result.type == "sysenv") {
-    handleEnvTree(result.env)
-  }
-})
-const getSysprop = () => fetchS.baseSubmit(useInterpret(permachine), {
-  action: "exec",
-  command: "sysprop",
-}).then(res => {
-  let result = (res as CommonRes).body.results[0]
-  if (result.type == "sysprop") {
-    handlePropTree(result.props)
-  }
-})
-
-
-const getPerCounter = () => fetchS.baseSubmit(useInterpret(permachine), { action: "exec", command: "perfcounter -d" }).then(res => {
-  const result = (res as CommonRes).body.results[0]
-  if (result.type === "perfcounter") {
-    const perfcounters = result.perfCounters
-    perfcounterMap.clear()
-    perfcounters.forEach(v => {
-      perfcounterMap.set(v.name, Object.entries(v).filter(v => v[0] !== "name").map(([key, value]) => `${key} : ${value}`))
-    })
-  }
-})
+]
 </script>
 
 <template>
-  <div class="p-2 h-[90vh] overflow-y-scroll">
-    <article>
-      <div class="flex items-center">
-        <div class="btn-info btn my-2 btn-sm normal-case">workingDir</div>
-        <div class="bg-base-200 w-full text-base-content pl-2"> {{ pwd }}</div>
-      </div>
-      <CmdResMenu title="sysenv" :map="sysEnvMap" @click="getSysenv" />
-      <CmdResMenu title="sysprop" :map="sysPropMap" @click="getSysprop" />
-      <option-config-menu title="vmOption" :list="vmOptionMTree" title-key-name="name">
-        <template #item="{ kv, itemTitle, idx }">
-          <switch-input :send="vmOptionSend(itemTitle)" :data="{ key: kv[0], value: kv[1] }" v-if="kv[0] === 'value'"
-            :class="{ 'border-t-4': (idx > 0), 'border-base-100': (idx > 0) }">
-          </switch-input>
-          <div v-else class="flex " :class="{ 'border-t-4': (idx > 0), 'border-base-100': (idx > 0) }">
-            <div class="bg-blue-200 w-1/5 p-1">{{ kv[0] }}</div>
-            <div class="grid place-items-center w-3/5">{{ kv[1] }}</div>
-          </div>
-        </template>
-      </option-config-menu>
-      <CmdResMenu title="jvm" :map="jvmMap" class="w-full" @click="getJvm" />
-      <CmdResMenu title="perfcounter" :map="perfcounterMap" @click="getPerCounter" />
-    </article>
+  <div class="h-[90vh] overflow-auto flex">
+  <SelectCmd :routes="routes"></SelectCmd>
+    <div class="overflow-auto py-2 w-full flex flex-col flex-1 pointer-events-auto">
+      <RouterView></RouterView>
+    </div>
   </div>
 </template>
 
diff --git a/web-ui/arthasWebConsole/ui/src/views/Console.vue b/web-ui/arthasWebConsole/ui/src/views/Console.vue
index 8c565374e..77f933387 100644
--- a/web-ui/arthasWebConsole/ui/src/views/Console.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/Console.vue
@@ -15,14 +15,12 @@ onBeforeMount(()=>{
 })
 
 const submitCommand = ()=>{
-  console.log('别报错了')
   fetchM.send({ type: 'SUBMIT', value: val.value})
 }
-
 </script>
 
 <template>
-  <div class="flex flex-col p-2">
+  <div class="flex flex-col ">
     <form class="h-[10vh] flex items-center border shadow" @submit.prevent="submitCommand">
       <label for="command-input" class=" m-2 ">command:</label>
       <div class=" flex-auto grid place-items-start">
@@ -47,4 +45,4 @@ const submitCommand = ()=>{
 </template>
 
 <style scoped>
-</style>·
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/DashBoard.vue b/web-ui/arthasWebConsole/ui/src/views/DashBoard.vue
index 786caf7b0..5e5ee5fc7 100644
--- a/web-ui/arthasWebConsole/ui/src/views/DashBoard.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/DashBoard.vue
@@ -181,6 +181,7 @@ const setPri = publiC.inputDialogFactory(
   },
   (input) => input.value.toString(),
 )
+const { increase, decrease } = publiC.numberCondition(pri, { min: 1 })
 const transformRuntimeInfo = (result: ArthasResResult) => {
   if (result.type !== "dashboard") return;
   for (const key in result.runtimeInfo as RuntimeInfo) {
@@ -457,23 +458,30 @@ onBeforeUnmount(async () => {
       <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>
+
     <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 overflow-auto flex-1 h-80">
+      <div class="input-btn-style flex-1 h-80 overflow-auto w-0">
         <div class="flex justify-end mb-2">
-
-          <button class="btn btn-sm btn-outline" @click="setPri">limit:{{pri}}</button>
+          <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 group">
+          <table class="table table-compact w-full">
             <thead>
               <tr>
-                <th class="border-slate-300" v-for="(v,i) in keyList" :key="i" :class="{'group-first:z-0':i==0}">{{v}}</th>
+                <th></th>
+                <th v-for="(v,i) in keyList" :key="i" class="normal-case">{{v}}
+                </th>
               </tr>
             </thead>
-            <tbody class="">
-              <tr v-for="(map, i) in tableResults" :key="i">
-                <td class="border border-slate-300" v-for="(key,j) in keyList" :key="j">
+            <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>
diff --git a/web-ui/arthasWebConsole/ui/src/views/Synchronize.vue b/web-ui/arthasWebConsole/ui/src/views/Synchronize.vue
index 4c122dd85..6205b0c24 100644
--- a/web-ui/arthasWebConsole/ui/src/views/Synchronize.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/Synchronize.vue
@@ -16,9 +16,9 @@ const routes: { cmd: string, url: string }[] = [
   }, {
     cmd: "jad",
     url: "jad"
-  }, {
-    cmd: "retransform",
-    url: "retransform"
+  // }, {
+  //   cmd: "retransform",
+  //   url: "retransform"
   }, {
     cmd: "mbean",
     url: "mbean"
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Monitor.vue b/web-ui/arthasWebConsole/ui/src/views/async/Monitor.vue
index 68f605914..9bf1634a6 100644
--- a/web-ui/arthasWebConsole/ui/src/views/async/Monitor.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/async/Monitor.vue
@@ -40,7 +40,7 @@ import {
 import {
   SVGRenderer
 } from 'echarts/renderers';
-import { ECharts} from 'echarts/core';
+import { ECharts } from 'echarts/core';
 
 echarts.use(
   [TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, BarChart, LineChart, SVGRenderer, UniversalTransition]
@@ -63,12 +63,16 @@ const modelist: { name: string, value: string }[] = [
 ]
 const mode = ref(modelist[1])
 
+const averageRT = ref({
+  totalCost: 0,
+  totalCount: 0,
+})
 
 const chartContext: {
   count: number,
   myChart?: ECharts,
   costChart?: ECharts,
-  categories: number[],
+  categories: string[],
   data: number[],
   cur: number,
   max: number,
@@ -85,7 +89,7 @@ const chartContext: {
   successData: [],
   failureData: [],
 }
-for (let i = 0; i < chartContext.count; i++) { chartContext.categories[i] = i + 1 }
+// for (let i = 0; i < chartContext.count; i++) { chartContext.categories[i] = i + 1 }
 
 const chartOption = {
   tooltip: {
@@ -107,8 +111,12 @@ const chartOption = {
   xAxis: [
     {
       type: 'category',
-      boundaryGap: true,
-      data: chartContext.categories
+      data: chartContext.categories,
+      axisLabel: {
+        formatter(value: string) {
+          return value.split(" ")[1]
+        }
+      }
     }
   ],
   yAxis: [{
@@ -154,23 +162,26 @@ const costOption = {
   xAxis: [
     {
       type: 'category',
-      boundaryGap: true,
-      data: chartContext.categories
+      data: chartContext.categories,
+      axisLabel: {
+        formatter(value: string) {
+          return value.split(" ")[1]
+        }
+      }
     }
   ],
   yAxis: [
     {
       type: 'value',
       scale: true,
-      name: 'cost(ms)',
+      name: 'rt(ms)',
       min: 0,
-      boundaryGap: [0.2, 0.2]
     }
   ],
   series: [
     {
-      name: 'cost',
-      type: 'bar',
+      name: 'rt',
+      type: 'line',
       data: chartContext.data
     }
   ]
@@ -180,11 +191,13 @@ const updateChart = (data: MonitorData) => {
     chartContext.data.shift()
     chartContext.successData.shift()
     chartContext.failureData.shift()
+    chartContext.categories.shift()
     chartContext.cur--
   }
-  chartContext.data.push(data.cost)
+  chartContext.data.push(data.cost / data.total)
   chartContext.failureData.push(data.failed)
   chartContext.successData.push(data.success)
+  chartContext.categories.push(data.timestamp)
   chartContext.cur++
 
   chartContext.myChart!.setOption<EChartsOption>({
@@ -286,15 +299,16 @@ onBeforeUnmount(() => {
 const submit = async (data: { classItem: Item, methodItem: Item, conditon: string }) => {
   enhancer.value = undefined
   // tableResults.length = 0
-
+  averageRT.value.totalCost =0
+  averageRT.value.totalCount = 0
   let condition = data.conditon.trim() == "" ? "" : `'${data.conditon.trim()}'`
   let cycle = `-c ${cycleV.value}`
   fetchS.baseSubmit(fetchM, {
     action: "async_exec",
-    command: `monitor -c 5 ${data.classItem.value} ${data.methodItem.value} ${condition}`,
+    command: `monitor ${cycle} ${data.classItem.value as string} ${data.methodItem.value} ${condition}`,
     sessionId: undefined
   }).then(
-    res => loop.open()
+    _res => loop.open()
   )
 }
 </script>
@@ -321,7 +335,9 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
       <button class="btn btn-sm btn-outline" @click="changeCycle">cycle time:{{cycleV}}</button>
     </template>
   </MethodInput>
-  <Enhancer :result="enhancer" v-if="enhancer" class="mb-4"></Enhancer>
+  <Enhancer :result="enhancer" v-if="enhancer" class="mb-4">
+
+  </Enhancer>
   <div id="monitorchart" class="input-btn-style h-60 w-full pointer-events-auto transition mb-2"></div>
   <div id="monitorchartcost" class="input-btn-style h-60 w-full pointer-events-auto transition"></div>
 
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Profiler.vue b/web-ui/arthasWebConsole/ui/src/views/async/Profiler.vue
index 6200ee9c0..772bc10b8 100644
--- a/web-ui/arthasWebConsole/ui/src/views/async/Profiler.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/async/Profiler.vue
@@ -19,7 +19,7 @@ let eventList = reactive([] as string[]);
 let selectEvent = ref("cpu")
 let includesVal = reactive(new Set<string>())
 let excludesVal = reactive(new Set<string>())
-let framebuf = ref(1000000)
+let framebuf = ref(1_000_000)
 let duration = ref(300)
 let profilerStatus = ref({
   is: false,
@@ -29,6 +29,7 @@ let outputPath = ref("")
 let samples = ref(0)
 const support = ref(false)
 let fileformat = ref("%t-%p.html")
+
 const getStatusLoop = fetchS.getPollingLoop(() => {
   const statusM = interpret(permachine)
   fetchS.baseSubmit(statusM, {
@@ -55,7 +56,8 @@ const getStatusLoop = fetchS.getPollingLoop(() => {
 }, {
   step: 2000,
 })
-
+const handleFramebuf = publicS.numberCondition(framebuf, {})
+const handleduration = publicS.numberCondition(duration, {})
 const getSampleLoop = fetchS.getPollingLoop(() => {
   let statusM = interpret(permachine)
   fetchS.baseSubmit(statusM, {
@@ -227,8 +229,16 @@ onBeforeUnmount(() => {
           </ListboxOptions>
         </div>
       </Listbox>
-      <button class="btn btn-sm btn-outline mr-2" @click="changeDuration">duration :{{duration}}</button>
-      <button class="btn btn-sm btn-outline mr-2" @click="changeFramebuf">framebuf :{{framebuf}}</button>
+      <div class="btn-group mr-2">
+        <button class="btn btn-sm btn-outline" @click.prevent="handleduration.decrease">-</button>
+        <button class="btn btn-sm btn-outline border-x-0" @click.prevent="changeDuration">duration :{{duration}}</button>
+        <button class="btn btn-sm btn-outline" @click.prevent="handleduration.increase">+</button>
+      </div>
+      <div class="btn-group mr-2">
+        <button class="btn btn-sm btn-outline" @click.prevent="handleFramebuf.decrease">-</button>
+        <button class="btn btn-sm btn-outline border-x-0" @click.prevent="changeFramebuf">framebuf :{{framebuf}}</button>
+        <button class="btn btn-sm btn-outline" @click.prevent="handleFramebuf.increase">+</button>
+      </div>
       <button class="btn btn-sm btn-outline mr-2" @click="changeFile">file :<span
           class="normal-case">{{fileformat}}</span></button>
       <TodoList title="include" :val-set="includesVal" class=" mr-2"></TodoList>
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Stack.vue b/web-ui/arthasWebConsole/ui/src/views/async/Stack.vue
index 2e8437242..9ab227cfe 100644
--- a/web-ui/arthasWebConsole/ui/src/views/async/Stack.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/async/Stack.vue
@@ -91,16 +91,18 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
   <MethodInput :submit-f="submit" ncondition ncount></MethodInput>
 
     <Enhancer :result="enhancer" v-if="enhancer"></Enhancer>
-    <div class="w-full flex justify-center items-center mt-4">
-      <table class="table w-full table-compact group">
+    <div class="mt-4 overflow-x-auto w-full">
+      <table class="table w-full table-compact">
         <thead>
           <tr>
-            <th class="border border-slate-300" v-for="(v,i) in keyList" :key="i" :class="{'group-first:z-0':i===0}">{{v}}</th>
+            <th></th>
+            <th v-for="(v,i) in keyList" :key="i">{{v}}</th>
           </tr>
         </thead>
         <tbody class="">
           <tr v-for="(map, i) in tableResults" :key="i">
-            <td class="border border-slate-300" v-for="(key,j) in keyList" :key="j">
+            <th>{{i + 1}}</th>
+            <td v-for="(key,j) in keyList" :key="j">
               <template v-if="key!== 'stackTrace'">
                 {{map.get(key)}}
               </template>
@@ -113,6 +115,12 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
             </td>
           </tr>
         </tbody>
+        <tfoot>
+          <tr>
+            <th></th>
+            <th v-for="(v,i) in keyList" :key="i">{{v}}</th>
+          </tr>
+        </tfoot>
       </table>
     </div>
 
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Trace.vue b/web-ui/arthasWebConsole/ui/src/views/async/Trace.vue
index f3c2846ca..2cb357fe5 100644
--- a/web-ui/arthasWebConsole/ui/src/views/async/Trace.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/async/Trace.vue
@@ -126,7 +126,7 @@ const submit = (data: { classItem: Item, methodItem: Item, conditon: string, cou
   <MethodInput :submit-f="submit" class="mb-2" ncondition ncount>
     <template #others>
 
-      <label class="label cursor-pointer btn-sm border border-neutral ml-2">
+      <label class="label cursor-pointer btn-sm ml-2">
           <span class="label-text uppercase font-bold mr-1">skip JDK Method</span>
           <input v-model="enabled" type="checkbox" class="toggle"/>
         </label>
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Tt.vue b/web-ui/arthasWebConsole/ui/src/views/async/Tt.vue
index 448f49443..a9a545a07 100644
--- a/web-ui/arthasWebConsole/ui/src/views/async/Tt.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/async/Tt.vue
@@ -173,7 +173,7 @@ const transform = (tf: TimeFragment) => {
     } else {
       val = (tf[k as tfkey].toString())
     }
-    
+
     map.set(k, val)
   })
   updateChart(tf)
@@ -187,9 +187,9 @@ getPullResultsEffect(
         console.log(tf.index)
         // if(!timeFragmentSet.has(tf.index)){
         //   timeFragmentSet.add(tf.index)
-          tableResults.unshift(transform(tf))
+        tableResults.unshift(transform(tf))
         // }
-        
+
       })
     }
     if (result.type == "enhancer") {
@@ -291,7 +291,7 @@ const searchTt = () => {
         tableResults.unshift(transform(tf))
       })
     }
-  }).catch(err=>{
+  }).catch(err => {
     console.error(err)
   })
 }
@@ -327,35 +327,42 @@ const searchTt = () => {
         </template>
       </CmdResMenu>
     </div>
-      <Enhancer :result="enhancer" v-if="enhancer"></Enhancer>
-      <div class="w-full flex justify-center items-center overflow-auto flex-1">
-        <table class="table table-compact group w-full">
-          <thead>
-            <tr>
-              <th class="border group-first:z-0" v-for="(v,i) in keyList" :key="i">{{v}}</th>
-              <th class="border">invoke</th>
-            </tr>
-          </thead>
-          <tbody class="">
-            <tr v-for="(map, i) in tableResults" :key="i">
-              <td class="border" v-for="(key,j) in keyList" :key="j">
-                <template v-if=" key !== 'params'">
-                  {{map.get(key)}}
-                </template>
+    <Enhancer :result="enhancer" v-if="enhancer">
+    </Enhancer>
+    <div class="overflow-x-auto w-full">
+      <table class="table table-compact w-full">
+        <thead>
+          <tr>
+            <th></th>
+            <th class="normal-case" v-for="(v,i) in keyList" :key="i">{{v}}</th>
+          </tr>
+        </thead>
+        <tbody class="">
+          <tr v-for="(map, i) in tableResults" :key="i">
+            <th class="">
+              <button class="btn btn-primary btn-sm btn-outline" @click="reTrigger(map.get('index')!)">invoke</button>
+            </th>
+            <td class="" v-for="(key,j) in keyList" :key="j">
+              <template v-if=" key !== 'params'">
+                {{map.get(key)}}
+              </template>
 
-                <div class="flex flex-col" v-else>
-                  <div v-for="(row, k) in map.get(key)" :key="k">
-                    {{row}}
-                  </div>
+              <div class="flex flex-col" v-else>
+                <div v-for="(row, k) in map.get(key)" :key="k">
+                  {{row}}
                 </div>
-              </td>
-              <td class="border">
-                <button class="btn btn-primary btn-sm btn-outline" @click="reTrigger(map.get('index')!)">invoke</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <th></th>
+            <th class="normal-case" v-for="(v,i) in keyList" :key="i">{{v}}</th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
   </div>
 
 </template>
diff --git a/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue b/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue
index 572842884..d6d6998dc 100644
--- a/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/async/Watch.vue
@@ -18,6 +18,7 @@ const pollResults = reactive([] as [string, Map<string, string[]>, TreeNode][])
 const enhancer = ref(undefined as EnchanceResult | undefined)
 const depth = ref(1)
 const tableResults = reactive([] as Map<string, string | TreeNode>[])
+const { increase, decrease } = publiC.numberCondition(depth, { min: 1, max: 6 })
 const keyList = [
   "ts",
   "accessPoint",
@@ -150,7 +151,8 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
     <template #others>
       <div class="relative group ml-2">
         <div class="btn btn-sm btn-outline">watching point</div>
-        <div class="h-0 group-hover:h-auto group-focus-within:h-auto absolute overflow-clip transition z-10 top-full pt-2">
+        <div
+          class="h-0 group-hover:h-auto group-focus-within:h-auto absolute overflow-clip transition z-10 top-full pt-2">
 
           <label class="label cursor-pointer btn-sm border border-neutral ml-2 bg-base-100"
             v-for="(mode,i) in modereflist" :key="i">
@@ -161,33 +163,36 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
         </div>
 
       </div>
-      <button class="btn btn-sm btn-outline ml-2" @click="setDepth">depth:{{depth}}</button>
+      <div class="btn-group ml-2">
+        <button class="btn btn-sm btn-outline" @click.prevent="decrease">-</button>
+        <button class="btn btn-sm btn-outline border-x-0" @click.prevent="setDepth">depth:{{depth}}</button>
+        <button class="btn btn-sm btn-outline" @click.prevent="increase">+</button>
+      </div>
     </template>
   </MethodInput>
   <Enhancer :result="enhancer" v-if="enhancer"></Enhancer>
-  <div class="flex justify-center mt-4 overflow-auto">
-    <table class="table w-full group">
+  <div class="overflow-x-auto w-full mt-4">
+    <table class="table w-full table-compact">
       <thead>
         <tr>
-          <th class="border border-slate-300" v-for="(v,i) in keyList" :key="i" :class="{'group-first:z-0':i===0}">{{v}}
+          <th></th>
+          <th class="0" v-for="(v,i) in keyList" :key="i">{{v}}
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(map, i) in tableResults" :key="i">
-          <td class="border border-slate-300" v-for="(key,j) in keyList" :key="j">
+        <tr v-for="(map, i) in tableResults" :key="i" class="hover">
+          <th>{{i+1}}</th>
+          <td class="" v-for="(key,j) in keyList" :key="j">
             <div v-if=" key !== 'value'">
               {{map.get(key)}}
             </div>
-
             <div class="flex flex-col" v-else>
               <Tree :root="(map.get('value') as TreeNode)" class="mt-2" button-class=" ">
                 <template #meta="{ data, active }">
-                  <div 
-                    class="bg-info  px-2 rounded-r rounded-br mr-2 text-info-content" :class='{
-                  "hover:opacity-50":active
-                }'
-                    >
+                  <div class="bg-info  px-2 rounded-r rounded-br mr-2 text-info-content" :class='{
+                    "hover:opacity-50":active
+                  }'>
                     {{data}}
                   </div>
                 </template>
@@ -196,6 +201,14 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
           </td>
         </tr>
       </tbody>
+      <tfoot>
+        <tr>
+          <th></th>
+          <th class="0" v-for="(v,i) in keyList" :key="i">{{v}}
+          </th>
+        </tr>
+      </tfoot>
     </table>
+
   </div>
 </template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Jvm.vue b/web-ui/arthasWebConsole/ui/src/views/config/Jvm.vue
new file mode 100644
index 000000000..ec71efc71
--- /dev/null
+++ b/web-ui/arthasWebConsole/ui/src/views/config/Jvm.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import permachine from '@/machines/perRequestMachine';
+import { fetchStore } from '@/stores/fetch';
+import { onBeforeMount, reactive } from 'vue';
+import { interpret } from 'xstate';
+const fetchS = fetchStore();
+type ResultType = { "key": string, "value": string};
+const tableResultList: ResultType[] = reactive([])
+// 尝试转化为tree，不过分表可能会合理一些
+const transformToString: <T=Record<string,unknown>>(obj:T)=>T = (obj)=>{
+  type Out = typeof obj
+  let output = {} as Out
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      const element = obj[key];
+      if( typeof element === "object") {
+        output[key] = transformToString(element as Record<string,unknown>) as Out[Extract<keyof Out, string>]
+      } else {
+        output[key] = (element as (string|number|boolean)).toString() as Out[Extract<keyof Out, string>]
+      }
+    }
+  }
+  return output
+}
+const getJvm = () => fetchS.baseSubmit(interpret(permachine), {
+  action: "exec",
+  command: "jvm"
+}).then(res => {
+  const result = (res as CommonRes).body.results[0]
+  if (result.type === "jvm") {
+    tableResultList.length = 0
+    Object.entries(result.jvmInfo).forEach(([key, value]) => {
+      let row = {
+        key,
+        value:JSON.stringify(value)
+      }
+      tableResultList.push(row)
+    })
+  }
+})
+onBeforeMount(() => {
+  getJvm()
+})
+</script>
+
+<template>
+  <table class="table w-full table-compact">
+    <thead>
+      <tr>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(map, i) in tableResultList" :key="i" class="hover">
+        <th>{{map.key}}</th>
+        <td>{{map.value}}</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </tfoot>
+  </table>
+</template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Options.vue b/web-ui/arthasWebConsole/ui/src/views/config/Options.vue
new file mode 100644
index 000000000..d625f1a11
--- /dev/null
+++ b/web-ui/arthasWebConsole/ui/src/views/config/Options.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import permachine from '@/machines/perRequestMachine';
+import { fetchStore } from '@/stores/fetch';
+import { publicStore } from '@/stores/public';
+import { onBeforeMount, reactive, ref, Ref } from 'vue';
+import { interpret } from 'xstate';
+const fetchS = fetchStore();
+const publicS = publicStore()
+type ResultType = MergeObj<Omit<GlobalOptions, "value">, {
+  value: Ref<string>, changeValue: null | (() => void)
+}>
+
+const tableResultList: ResultType[] = reactive([])
+const keyList: (keyof GlobalOptions)[] = [
+  "level",
+  "name",
+  "type",
+  "value",
+  "summary",
+  "description",
+]
+const setVmoption = (key: string, value: string) => fetchS.baseSubmit(interpret(permachine), {
+  action: "exec",
+  command: `options ${key} ${value}`
+})
+
+const getVmoption = () => fetchS.baseSubmit(interpret(permachine), {
+  action: "exec",
+  command: "options",
+}).then(res => {
+  let result = (res as CommonRes).body.results[0]
+  if (result.type == "options") {
+    tableResultList.length = 0;
+    result.options.forEach((option) => {
+      let rows: ResultType[] = []
+      // 用来绑定读写
+
+      let _raw = ref(option.value)
+      let changeValue = null
+      changeValue = publicS.inputDialogFactory(_raw,
+        (raw) => {
+          setVmoption(option.name, raw.trim())
+            .then(res =>{
+              let result = (res as CommonRes).body.results[0]
+              if(result.type === "options") _raw.value = (result.changeResult.afterValue as string).toString()
+            })
+            .catch(err => {
+              // 失败就回退
+              _raw.value = option.value
+            })
+          return raw.trim()
+        },
+        (input) => input.value)
+      rows.push({
+        ...option,
+        value: _raw,
+        changeValue,
+      })
+      tableResultList.push(...rows)
+    })
+    tableResultList.sort((a, b) => {
+      if(a.level != b.level) return a.level - b.level
+      else {
+        return a.name > b.name ? 1 :-1
+      }
+    })
+  }
+})
+onBeforeMount(() => {
+  getVmoption()
+})
+</script>
+
+<template>
+  <table class="table w-full table-compact">
+    <thead>
+      <tr>
+
+        <th></th>
+        <th v-for="(k, i) in keyList" :key="i">{{ k }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(map, i) in tableResultList" :key="i" class="hover">
+        <th>
+          <button class="btn btn-outline btn-xs btn-primary" @click.prevent="map.changeValue"
+            v-if="map.changeValue !== null">edit</button>
+        </th>
+        <template v-for="(k, j) in keyList" :key="j">
+          <th v-if="k === 'name' || k === 'level'">{{ map[k] }}</th>
+          <td v-else class="break-words"> {{ map[k] }}</td>
+        </template>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th></th>
+        <th v-for="(k, i) in keyList" :key="i">{{ k }}</th>
+      </tr>
+    </tfoot>
+  </table>
+</template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/PerCounter.vue b/web-ui/arthasWebConsole/ui/src/views/config/PerCounter.vue
new file mode 100644
index 000000000..b07461e81
--- /dev/null
+++ b/web-ui/arthasWebConsole/ui/src/views/config/PerCounter.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import permachine from '@/machines/perRequestMachine';
+import { fetchStore } from '@/stores/fetch';
+import { onBeforeMount, reactive } from 'vue';
+import { interpret } from 'xstate';
+const fetchS = fetchStore();
+type ResultType = MergeObj<Perfcounter,{rowspan:number}>
+const perfcounterList: ResultType[] = reactive([])
+let keyList: (keyof Perfcounter)[] = [
+  "name",
+  "units",
+  "variability",
+  "value",
+]
+const getPerCounter = () => fetchS.baseSubmit(interpret(permachine), { action: "exec", command: "perfcounter -d" }).then(res => {
+  const result = (res as CommonRes).body.results[0]
+  if (result.type === "perfcounter") {
+    const perfcounters = result.perfCounters
+    perfcounterList.length = 0;
+    perfcounters.forEach(perfcouter => {
+      let result = {...perfcouter,rowspan:1}
+      result.value = result.value.toString()
+      perfcounterList.push(result)
+    })
+    perfcounterList.sort((a, b) => a.name > b.name ? 1 : -1)
+  }
+})
+
+onBeforeMount(() => {
+  getPerCounter()
+})
+</script>
+
+<template>
+  <table class="table w-full table-compact">
+    <thead>
+      <tr>
+        <th v-for="(v,i) in keyList" :key="i">{{v}}</th>
+      </tr>
+    </thead>
+    <tbody class="">
+      <tr v-for="(map, i) in perfcounterList" :key="i" class="hover">
+        <template v-for="(key,j) in keyList" :key="j">
+          <!-- 展示合并的单元格且定住name -->
+          <th v-if="key == 'name' && map.rowspan > 0" :rowspan="map.rowspan">
+            {{map[key]}}
+          </th>
+          <!-- 只有value才会裂变 -->
+          <td v-else-if="key === 'value'" >
+            <div class="break-all">{{map[key]}}</div>
+          </td>
+          <!-- 展示合并的单元格 -->
+          <td v-else-if="map.rowspan > 0" :rowspan="map.rowspan">
+            {{map[key]}}
+          </td>
+        </template>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th v-for="(v,i) in keyList" :key="i" class="break-words">{{v}}</th>
+      </tr>
+    </tfoot>
+  </table>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Sysenv.vue b/web-ui/arthasWebConsole/ui/src/views/config/Sysenv.vue
new file mode 100644
index 000000000..295be6cd2
--- /dev/null
+++ b/web-ui/arthasWebConsole/ui/src/views/config/Sysenv.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import permachine from '@/machines/perRequestMachine';
+import { fetchStore } from '@/stores/fetch';
+import { onBeforeMount, reactive } from 'vue';
+import { interpret } from 'xstate';
+const fetchS = fetchStore();
+type ResultType = { "key": string, "value": string, rowspan: number };
+const tableResultList: ResultType[] = reactive([])
+const getSysenv = () => fetchS.baseSubmit(interpret(permachine), {
+  action: "exec",
+  command: "sysenv",
+}).then(res => {
+  tableResultList.length = 0
+  let result = (res as CommonRes).body.results[0]
+  if (result.type == "sysenv") {
+    Object.entries(result.env).forEach(([key, value]) => {
+      let rows: ResultType[] = []
+        rows.push({
+          key, value, rowspan: 1
+        })
+      tableResultList.push(...rows)
+    })
+    tableResultList.sort((a, b) => a.key > b.key ? 1 : -1)
+  }
+})
+onBeforeMount(() => {
+  getSysenv()
+})
+</script>
+
+<template>
+  <table class="table w-full table-compact">
+    <thead>
+      <tr>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(map, i) in tableResultList" :key="i" class="hover">
+        <th v-if="map.rowspan > 0" :rowspan="map.rowspan">{{map.key}}</th>
+        <td>{{map.value}}</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </tfoot>
+  </table>
+</template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Sysprop.vue b/web-ui/arthasWebConsole/ui/src/views/config/Sysprop.vue
new file mode 100644
index 000000000..f91dac873
--- /dev/null
+++ b/web-ui/arthasWebConsole/ui/src/views/config/Sysprop.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import permachine from '@/machines/perRequestMachine';
+import { fetchStore } from '@/stores/fetch';
+import { publicStore } from '@/stores/public';
+import { onBeforeMount, reactive, ref, Ref } from 'vue';
+import { interpret } from 'xstate';
+const fetchS = fetchStore();
+const publicS = publicStore()
+type ResultType = { "key": string, "value": Ref<string>, rowspan: number, changeValue:()=>void};
+const tableResultList: ResultType[] = reactive([])
+
+const setSysprop = (key:string,value:string) => fetchS.baseSubmit(interpret(permachine),{
+  action: "exec",
+  command:`sysprop ${key} ${value}`
+})
+
+const getSysprop = () => fetchS.baseSubmit(interpret(permachine), {
+  action: "exec",
+  command: "sysprop",
+}).then(res => {
+  let result = (res as CommonRes).body.results[0]
+  if (result.type == "sysprop") {
+    tableResultList.length = 0;
+    Object.entries(result.props).forEach(([key, value]) => {
+      let rows: ResultType[] = []
+      // 用来绑定读写
+      let _raw = ref(value)
+      const changeValue = publicS.inputDialogFactory(_raw,
+        (raw) => {
+          setSysprop(key, raw.trim()).then(res=>{
+          },err=>{
+            // 失败就回退
+            _raw.value = value
+          })
+          return raw.trim()
+        },
+        (input) => input.value)
+        rows.push({
+          key, value:_raw, rowspan: 1, changeValue
+        })
+      tableResultList.push(...rows)
+    })
+    tableResultList.sort((a, b) => a.key > b.key ? 1 : -1)
+  }
+})
+onBeforeMount(() => {
+  getSysprop()
+})
+</script>
+
+<template>
+  <table class="table w-full table-compact">
+    <thead>
+      <tr>
+        
+        <th></th>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(map, i) in tableResultList" :key="i" class="hover">
+        <th v-if="map.rowspan > 0" :rowspan="map.rowspan">
+          <button class="btn btn-outline btn-xs btn-primary" @click.prevent="map.changeValue">edit</button>
+        </th>
+        <th v-if="map.rowspan > 0" :rowspan="map.rowspan">{{map.key}}</th>
+        <td>{{map.value}}</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th></th>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </tfoot>
+  </table>
+</template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/config/Vmoption.vue b/web-ui/arthasWebConsole/ui/src/views/config/Vmoption.vue
new file mode 100644
index 000000000..fae986bcd
--- /dev/null
+++ b/web-ui/arthasWebConsole/ui/src/views/config/Vmoption.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import permachine from '@/machines/perRequestMachine';
+import { fetchStore } from '@/stores/fetch';
+import { publicStore } from '@/stores/public';
+import { onBeforeMount, reactive, ref, Ref } from 'vue';
+import { interpret } from 'xstate';
+const fetchS = fetchStore();
+const publicS = publicStore()
+type ResultType = { name: string, origin: string, value: Ref<string>, writeable: string, changeValue: null|(() => void)
+};
+const tableResultList: ResultType[] = reactive([])
+const keyList: (keyof VmOption)[] = [
+  "name",
+  "origin",
+  "writeable",
+  "value",
+]
+const setVmoption = (key: string, value: string) => fetchS.baseSubmit(interpret(permachine), {
+  action: "exec",
+  command: `vmoption ${key} ${value}`
+})
+
+const getVmoption = () => fetchS.baseSubmit(interpret(permachine), {
+  action: "exec",
+  command: "vmoption",
+}).then(res => {
+  let result = (res as CommonRes).body.results[0]
+  if (result.type == "vmoption") {
+    tableResultList.length = 0;
+    result.vmOptions.forEach((vmoption) => {
+      let rows: ResultType[] = []
+      // 用来绑定读写
+      
+      let _raw = ref(vmoption.value)
+      let changeValue = null
+      if(vmoption.writeable===true) {
+        changeValue = publicS.inputDialogFactory(_raw,
+        (raw) => {
+          setVmoption(vmoption.name, raw.trim()).then(res => {
+          }, err => {
+            // 失败就回退
+            _raw.value = vmoption.value
+          })
+          return raw.trim()
+        },
+        (input) => input.value)
+      }
+      rows.push({
+        name: vmoption.name,
+        value: _raw,
+        changeValue,
+        writeable: vmoption.writeable.toString(),
+        origin: vmoption.origin
+      })
+      tableResultList.push(...rows)
+    })
+    tableResultList.sort((a, b) => a.name > b.name ? 1 : -1)
+  }
+})
+onBeforeMount(() => {
+  getVmoption()
+})
+</script>
+
+<template>
+  <table class="table w-full table-compact">
+    <thead>
+      <tr>
+
+        <th></th>
+        <th v-for="(k, i) in keyList" :key="i">{{k}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(map, i) in tableResultList" :key="i" class="hover">
+        <th >
+          <button class="btn btn-outline btn-xs btn-primary" @click.prevent="map.changeValue" v-if="map.changeValue !== null">edit</button>
+        </th>
+        <template v-for="(k,j) in keyList" :key="j">
+          <th v-if="k==='name'">{{map[k]}}</th>
+          <td v-else class="break-words"> {{map[k]}}</td>
+        </template>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th></th>
+        <th v-for="(k, i) in keyList" :key="i">{{k}}</th>
+      </tr>
+    </tfoot>
+  </table>
+</template>
\ No newline at end of file
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/ClassInfo.vue b/web-ui/arthasWebConsole/ui/src/views/sync/ClassInfo.vue
index a9c0ed07b..c50a596ae 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/ClassInfo.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/sync/ClassInfo.vue
@@ -15,30 +15,7 @@ const classFields = reactive(new Map<string, string[]>())
 const classMethodMap = reactive(new Map<string, string[]>())
 const dumpMap = reactive(new Map<string, string[]>())
 const { getCommonResEffect } = publicStore()
-const publicS = publicStore()
 const fetchS = fetchStore()
-// getCommonResEffect(classInfoM, body => {
-//   const result = body.results[0]
-//   if (result.type === "sc" && result.detailed === true && result.withField === true) {
-
-//     classDetailMap.clear()
-//     classFields.clear()
-
-//     Object.entries(result.classInfo).filter(([k, v]) => k !== "fields").forEach(([k, v]) => {
-//       let value: string[] = []
-//       if (!["interfaces", "annotations", "classloader", "superClass"].includes(k)) value.push(v.toString())
-//       else value = v as string[]
-//       classDetailMap.set(k, value)
-//     })
-
-//     result.classInfo.fields.forEach(field => {
-//       classFields.set(field.name, Object.entries(field).filter(([k, v]) => k !== "name").map(([k, v]) => {
-//         if (k === "value") v = JSON.stringify(v)
-//         return `${k}: ${v}`
-//       }))
-//     })
-//   }
-// })
 getCommonResEffect(classMethodInfoM, body => {
   classMethodMap.clear()
   body.results.forEach(result => {
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/ClassLoader.vue b/web-ui/arthasWebConsole/ui/src/views/sync/ClassLoader.vue
index cfa7cd68e..99dc401da 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/ClassLoader.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/sync/ClassLoader.vue
@@ -140,9 +140,9 @@ const getCategorizedByClassType = () => {
 
       for (const name in result.classLoaderStats) {
         const map = new Map()
-        for (const key in result.classLoaderStats[name]) {
-          map.set(key, result.classLoaderStats[name][key])
-        }
+        map.set("loadedCount", result.classLoaderStats[name].loadedCount)
+        map.set("numberOfInstance", result.classLoaderStats[name].numberOfInstance)
+        // "loadedCount"|"numberOfInstance"
         map.set("name", name)
         tableResults.push(map)
       }
@@ -250,7 +250,8 @@ const resetClassloader = () => {
                     </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"
+                  <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>
@@ -260,13 +261,12 @@ const resetClassloader = () => {
           </div>
         </div>
       </div>
-      
-      <div class="w-1/3 ml-2 overflow-y-scroll transition-all duration-500" :class='{
+
+      <div class=" ml-2 overflow-y-scroll transition-all duration-500" :class='{
         "w-0":loaderCache.hash === "",
-        "input-btn-style":loaderCache.hash !==""
+        "input-btn-style w-1/3":loaderCache.hash !==""
       }'>
 
-        <!-- <div class="overflow-auto h-full"> -->
         <div class="mb-2">
           <div class="overflow-auto">
             <span class="bg-primary-focus px-2 rounded-l text-primary-content border border-primary-focus">
@@ -293,7 +293,6 @@ const resetClassloader = () => {
             </span>
           </div>
         </div>
-        
         <template v-if="loaderCache.hash.trim() !== ''">
           <div class="flex mb-2 w-full">
             <div class=" cursor-default 
@@ -351,20 +350,26 @@ const resetClassloader = () => {
               <button class="btn btn-primary btn-sm" @click="getCategorizedByClassType">refresh</button>
             </div>
             <div class="overflow-auto">
-            <table class="table w-full group table-compact">
-              <thead>
-                <tr>
-                  <th class="border border-slate-300 p-2" 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">
-                  <td class="border border-slate-300 p-2" v-for="(key,j) in keyList" :key="j">
-                    {{map.get(key)}}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+              <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>
           </div>
         </div>
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/HeapDump.vue b/web-ui/arthasWebConsole/ui/src/views/sync/HeapDump.vue
index 083a2a3f7..7a1f7f266 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/HeapDump.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/sync/HeapDump.vue
@@ -46,10 +46,10 @@ const submitCommand = (e: Event) => {
           class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus-visible:outline-none">
       </div>
 
-      <label class="label cursor-pointer btn-sm border border-neutral mr-2">
-      <span class="label-text uppercase font-bold mr-1">only live object</span>
-      <input v-model="enabled" type="checkbox" class="toggle" />
-    </label>
+      <label class="label cursor-pointer btn-sm mr-2">
+        <span class="label-text uppercase font-bold mr-1">only live object</span>
+        <input v-model="enabled" type="checkbox" class="toggle" />
+      </label>
     </label>
 
     <button @click.prevent="submitCommand"
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Ognl.vue b/web-ui/arthasWebConsole/ui/src/views/sync/Ognl.vue
index b5276b1d8..9841a288a 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/Ognl.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/sync/Ognl.vue
@@ -23,6 +23,7 @@ const setDepth = publiC.inputDialogFactory(
   },
   (input) => input.value.toString(),
 )
+const {increase, decrease} = publiC.numberCondition(depth,{min:1})
 const setHash = publiC.inputDialogFactory(
   hashcode,
   (raw) => raw,
@@ -67,7 +68,11 @@ const getSource = () => {
         <input type="text" v-model="express"
           class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus-visible:outline-none">
       </div>
-      <button class="btn btn-sm btn-outline mr-2" @click.prevent="setDepth">depth:{{depth}}</button>
+      <div class="btn-group mr-2">
+        <button class="btn btn-outline btn-sm" @click.prevent="decrease">-</button>
+        <button class="btn btn-outline btn-sm border-x-0" @click.prevent="setDepth">depth:{{depth}}</button>
+        <button class="btn btn-outline btn-sm" @click.prevent="increase">+</button>
+      </div>
       <button class="btn btn-sm btn-outline mr-2" @click.prevent="setClassLoader" v-if="hashcode === ''">ClassLoaderClass:{{classloaderName}}</button>
       <button class="btn btn-sm btn-outline mr-2" @click.prevent="setHash" v-if="classloaderName === ''">hashcode:{{hashcode}}</button>
     </label>
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Retransform.vue b/web-ui/arthasWebConsole/ui/src/views/sync/Retransform.vue
index 31626c900..27e52e1c9 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/Retransform.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/sync/Retransform.vue
@@ -69,7 +69,7 @@ const openList = () => {
           class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus-visible:outline-none">
       </div>
     </label>
-    <label class="label cursor-pointer btn-sm border border-neutral mr-2">
+    <label class="label cursor-pointer btn-sm mr-2">
       <span class="label-text uppercase font-bold mr-1">explicitly trigger</span>
       <input v-model="enabled" type="checkbox" class="toggle" />
     </label>
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Thread.vue b/web-ui/arthasWebConsole/ui/src/views/sync/Thread.vue
index 6e30361c8..a0229bcf3 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/Thread.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/sync/Thread.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // import machine from '@/machines/consoleMachine';
 import { useInterpret, } from '@xstate/vue';
-import { onBeforeMount, reactive, ref } from 'vue';
+import { onBeforeMount, reactive, ref, computed } from 'vue';
 import { fetchStore } from '@/stores/fetch';
 import { publicStore } from '@/stores/public';
 import TodoList from '@/components/input/TodoList.vue';
@@ -10,7 +10,7 @@ import {
 } from '@headlessui/vue';
 import { transfromStore } from "@/stores/resTransform"
 import permachine from '@/machines/perRequestMachine';
-import { computed } from '@vue/reactivity';
+import { watch } from 'fs';
 
 const fetchS = fetchStore()
 const FetchService = useInterpret(permachine)
@@ -43,7 +43,8 @@ const keyList: thkey[] = [
   "blockedCount",
   "blockedTime",
 ]
-const statsList: (keyof ThreadStats)[] = ["id",
+const statsList: (keyof ThreadStats)[] = [
+  "id",
   "name",
   "cpu",
   "daemon",
@@ -62,9 +63,15 @@ 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 = tableResults
+  let res = count.value > 0 ? tableResults.filter((v, i)=>i < count.value) : tableResults
   if (includesVal.size === 0) return res;
   // 导入过滤条件
   includesVal.forEach((v1) => {
@@ -106,8 +113,9 @@ onBeforeMount(() => {
 })
 const getThreads = () => {
   let i = leastTime.value > 0 ? "-i " + leastTime.value : ""
-  let n = count.value > 0 ? "-n " + count.value : ""
-  const b = isBlock.value ? "-b" : ""
+  // 在block时用这个参数会暴毙
+  let n = count.value > 0 && !isBlock ? "-n " + count.value : ""
+  const b = isBlock.value ? "-b --lockedMonitors  --lockedSynchronizers" : ""
   let state = threadState.value.value === "" ? "" : `--state ${threadState.value.value}`
   tableResults.length = 0
   for (const key in infoCount.value) {
@@ -173,12 +181,12 @@ const setleast = publiC.inputDialogFactory(
   },
   (input) => input.value.toString(),
 )
-
+const {increase, decrease} = publiC.numberCondition(count,{min:0})
 const getSpecialThreads = (threadid: number = -1) => {
   let threadName = threadid > 0 ? `${threadid}` : ""
   fetchS.baseSubmit(FetchService, {
     action: "exec",
-    command: `thread ${threadName}`
+    command: `thread ${threadName} `
   }).then(res => {
     const result = (res as CommonRes).body.results[0]
     if (result.type === "thread") {
@@ -195,12 +203,12 @@ const getSpecialThreads = (threadid: number = -1) => {
     <div class="flex justify-end items-center h-[10vh]">
 
       <TodoList title="filter" :val-set="includesVal" class=" mr-2"></TodoList>
-        <label class="label cursor-pointer btn-sm border border-neutral ">
-          <span class="label-text uppercase font-bold mr-1">is blocking:</span>
-          <input v-model="isBlock" type="checkbox" class="toggle"/>
-        </label>
       <button class="btn ml-2 btn-sm btn-outline" @click="setleast">sample interval:{{leastTime}}</button>
-      <button v-show="!isBlock" class="btn ml-2 btn-sm btn-outline" @click="setlimit"> top n threads:{{count}}</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" @click.prevent="increase">+</button>
+      </div>
       <Listbox v-model="threadState">
         <div class=" relative mx-2 ">
           <ListboxButton class="btn w-40 btn-sm btn-outline">state {{ threadState.name }}</ListboxButton>
@@ -217,7 +225,11 @@ const getSpecialThreads = (threadid: number = -1) => {
           </ListboxOptions>
         </div>
       </Listbox>
-      <button class="btn btn-primary btn-sm btn-outline" @click="getThreads"> get threads</button>
+      <label class="label cursor-pointer btn-sm ">
+        <span class="label-text uppercase font-bold mr-1">is blocking:</span>
+        <input v-model="isBlock" type="checkbox" class="toggle" />
+      </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">
@@ -231,31 +243,31 @@ const getSpecialThreads = (threadid: number = -1) => {
         </div>
       </div>
       <div class="overflow-auto h-[40vh] w-full">
-        <table class="table w-full group">
+        <table class="table w-full">
           <thead>
             <tr>
-              <th class="border border-slate-300 p-2 group-first:z-0">get stackTrace</th>
-              <template v-if="count===0">
-                <th class="border border-slate-300 p-2" v-for="(v,i) in keyList" :key="i">{{v}}</th>
+              <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="border border-slate-300 p-2" v-for="(v,i) in statsList" :key="i">{{v}}</th>
+                <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">
-              <td class="border border-slate-300 p-2"><button class="btn-outline btn-primary btn btn-sm"
+              <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></td>
+                </button></th>
               <template v-if="count === 0">
-                <td class="border border-slate-300 p-2" v-for="(key,j) in keyList" :key="j">
+                <td class="" v-for="(key,j) in keyList" :key="j">
                   {{map.get(key)}}
                 </td>
               </template>
               <template v-else>
-                <td class="border border-slate-300 p-2" v-for="(key,j) in statsList" :key="j">
+                <td class="" v-for="(key,j) in statsList" :key="j">
                   {{map.get(key)}}
                 </td>
               </template>
diff --git a/web-ui/arthasWebConsole/ui/src/views/sync/Vmtool.vue b/web-ui/arthasWebConsole/ui/src/views/sync/Vmtool.vue
index 840902282..28ce5a8b8 100644
--- a/web-ui/arthasWebConsole/ui/src/views/sync/Vmtool.vue
+++ b/web-ui/arthasWebConsole/ui/src/views/sync/Vmtool.vue
@@ -11,6 +11,7 @@ const gcMachine = useInterpret(permachine)
 const fetchS = fetchStore()
 const publicS = publicStore()
 const depth = ref(1)
+const {increase, decrease} = publicS.numberCondition(depth,{min:1})
 const setDepth = publicS.inputDialogFactory(
   depth,
   (raw) => {
@@ -87,7 +88,11 @@ const getInstance = (data:{classItem:Item}) => {
 
   <ClassInput :submit-f="getInstance" class="mb-4" >
     <template #others>
-      <button class="ml-2 btn btn-outline btn-sm" @click="setDepth">depth:{{depth}}</button>
+      <div class="btn-group ml-2">
+        <button class="btn btn-outline btn-sm" @click.prevent="decrease">-</button>
+        <button class="btn btn-outline btn-sm border-x-0" @click.prevent="setDepth">depth:{{depth}}</button>
+        <button class="btn btn-outline btn-sm" @click.prevent="increase">+</button>
+      </div>
     </template>
   </ClassInput>
   <template v-if="pollResults.length > 0">
diff --git a/web-ui/arthasWebConsole/vite.config.ts b/web-ui/arthasWebConsole/vite.config.ts
index 4a5206f11..149b3ffd9 100644
--- a/web-ui/arthasWebConsole/vite.config.ts
+++ b/web-ui/arthasWebConsole/vite.config.ts
@@ -5,8 +5,25 @@ import * as path from "path";
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
-  const proxyTarget =`${env.VITE_ARTHAS_PROXY_IP}:${env.VITE_ARTHAS_PROXY_PORT}`;
+  const proxyTarget =
+    `${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`
+    input = {
+      tunnel: path.resolve(__dirname, "index.html")
+    }
+  } else {
+    outDir = `./dist`
+    input = {
+      main: path.resolve(__dirname, "index.html"),
+      ui: path.resolve(__dirname, "ui/index.html"),
+    }
+  }
+
   return {
     plugins: [vue({
       reactivityTransform: true,
@@ -18,12 +35,10 @@ export default defineConfig(({ mode }) => {
     },
     build: {
       emptyOutDir: true,
+      outDir,
       minify: "esbuild",
       rollupOptions: {
-        input: {
-          main: path.resolve(__dirname, "index.html"),
-          ui: path.resolve(__dirname, "ui/index.html"),
-        },
+        input,
         output: {
           chunkFileNames: "static/js/[name]-[hash].js",
           entryFileNames: "static/js/[name]-[hash].js",
@@ -43,7 +58,7 @@ export default defineConfig(({ mode }) => {
         "/api": {
           target: `http://${proxyTarget}`,
           changeOrigin: true,
-        }
+        },
       },
     },
   };
diff --git a/web-ui/arthasWebConsole/yarn.lock b/web-ui/arthasWebConsole/yarn.lock
index 35d07afd2..e4b025769 100644
--- a/web-ui/arthasWebConsole/yarn.lock
+++ b/web-ui/arthasWebConsole/yarn.lock
@@ -3,14 +3,19 @@
 
 
 "@babel/parser@^7.16.4":
-  version "7.18.9"
-  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.18.9.tgz"
-  integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==
+  version "7.19.4"
+  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.19.4.tgz#03c4339d2b8971eb3beca5252bafd9b9f79db3dc"
+  integrity sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==
+
+"@esbuild/linux-loong64@0.14.54":
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
+  integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
 
 "@headlessui/vue@^1.6.6":
-  version "1.6.7"
-  resolved "https://registry.npmmirror.com/@headlessui/vue/-/vue-1.6.7.tgz"
-  integrity sha512-5sTCBpkUoFE7zhANn/6Z+pf3PUA7MD6BBaTsJcQybq9E4fnNiMM9agOJI9meXbtcawE6Dm8EeB5A8HAJEnZCbQ==
+  version "1.7.3"
+  resolved "https://registry.npmmirror.com/@headlessui/vue/-/vue-1.7.3.tgz#116d13391552436ea1e9e88c69f0e9d7d2585c45"
+  integrity sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==
 
 "@heroicons/vue@^1.0.6":
   version "1.0.6"
@@ -44,143 +49,154 @@
     fastq "^1.6.0"
 
 "@types/node@^18.7.2":
-  version "18.7.2"
-  resolved "https://registry.npmmirror.com/@types/node/-/node-18.7.2.tgz"
-  integrity sha512-ce7MIiaYWCFv6A83oEultwhBXb22fxwNOQf5DIxWA4WXvDQ7K+L0fbWl/YOfCzlR5B/uFkSnVBhPcOfOECcWvA==
+  version "18.11.2"
+  resolved "https://registry.npmmirror.com/@types/node/-/node-18.11.2.tgz#c59b7641832531264fda3f1ba610362dc9a7dfc8"
+  integrity sha512-BWN3M23gLO2jVG8g/XHIRFWiiV4/GckeFIqbU/C4V3xpoBBWSMk4OZomouN0wCkfQFPqgZikyLr7DOYDysIkkw==
 
 "@vitejs/plugin-vue@^2.3.3":
-  version "2.3.3"
-  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz"
-  integrity sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==
+  version "2.3.4"
+  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz#966a6279060eb2d9d1a02ea1a331af071afdcf9e"
+  integrity sha512-IfFNbtkbIm36O9KB8QodlwwYvTEsJb4Lll4c2IwB3VHc2gie2mSPtSzL0eYay7X2jd/2WX02FjSGTWR6OPr/zg==
 
-"@volar/code-gen@0.34.17":
-  version "0.34.17"
-  resolved "https://registry.npmmirror.com/@volar/code-gen/-/code-gen-0.34.17.tgz"
-  integrity sha512-rHR7BA71BJ/4S7xUOPMPiB7uk6iU9oTWpEMZxFi5VGC9iJmDncE82WzU5iYpcbOBCVHsOjMh0+5CGMgdO6SaPA==
+"@volar/language-core@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/@volar/language-core/-/language-core-1.0.8.tgz#ed923e13d626102db6f82be03cfad22b0e5fdeae"
+  integrity sha512-uxYSOqBk8ZFSzGjUIPOBEFPOg8F3CE6cLO5meK95DODGIlUlPytGiy9sy8QZ9w7RpUH4XMOX3MH/G48SLgP07A==
   dependencies:
-    "@volar/source-map" "0.34.17"
+    "@volar/source-map" "1.0.8"
+    "@vue/reactivity" "^3.2.40"
+    muggle-string "^0.1.0"
 
-"@volar/source-map@0.34.17":
-  version "0.34.17"
-  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-0.34.17.tgz"
-  integrity sha512-3yn1IMXJGGWB/G817/VFlFMi8oh5pmE7VzUqvgMZMrppaZpKj6/juvJIEiXNxRsgWc0RxIO8OSp4htdPUg1Raw==
-
-"@volar/vue-code-gen@0.34.17":
-  version "0.34.17"
-  resolved "https://registry.npmmirror.com/@volar/vue-code-gen/-/vue-code-gen-0.34.17.tgz"
-  integrity sha512-17pzcK29fyFWUc+C82J3JYSnA+jy3QNrIldb9kPaP9Itbik05ZjEIyEue9FjhgIAuHeYSn4LDM5s6nGjxyfhsQ==
+"@volar/source-map@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-1.0.8.tgz#3e1a6f9ae652b665e6f3eef7c6291b48ac1aa6e6"
+  integrity sha512-uKMe+alyfl1Abs5SviKejFoe7x9g6jDPVpVt63Tet4qn1Ziy7tFsvtCpM2Y1Ko5qw2nLIeloLslPqm9/gmbBLQ==
   dependencies:
-    "@volar/code-gen" "0.34.17"
-    "@volar/source-map" "0.34.17"
-    "@vue/compiler-core" "^3.2.36"
-    "@vue/compiler-dom" "^3.2.36"
-    "@vue/shared" "^3.2.36"
+    muggle-string "^0.1.0"
 
-"@volar/vue-typescript@0.34.17":
-  version "0.34.17"
-  resolved "https://registry.npmmirror.com/@volar/vue-typescript/-/vue-typescript-0.34.17.tgz"
-  integrity sha512-U0YSVIBPRWVPmgJHNa4nrfq88+oS+tmyZNxmnfajIw9A/GOGZQiKXHC0k09SVvbYXlsjgJ6NIjhm9NuAhGRQjg==
+"@volar/typescript@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/@volar/typescript/-/typescript-1.0.8.tgz#45674506471c3ee8cfabb0d98f75f8e2b2f18936"
+  integrity sha512-2oY1Apvzcs/5tAn7p1tRlDxNgal5ezaK0h9cutcWALeimsaQBAEE2NAirCrLMHl8DneuDce0tzJqHaQeHw9RmQ==
   dependencies:
-    "@volar/code-gen" "0.34.17"
-    "@volar/source-map" "0.34.17"
-    "@volar/vue-code-gen" "0.34.17"
-    "@vue/compiler-sfc" "^3.2.36"
-    "@vue/reactivity" "^3.2.36"
+    "@volar/language-core" "1.0.8"
 
-"@vue/compiler-core@3.2.37", "@vue/compiler-core@^3.2.36":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.37.tgz"
-  integrity sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==
+"@volar/vue-language-core@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/@volar/vue-language-core/-/vue-language-core-1.0.8.tgz#2f888309aee80b6853ba5181f82b772e21f3b13e"
+  integrity sha512-cXb7oTybxcm1vpz003agdYQHyxij7UAaSub60d7W1aMWpqb2iaCbVaq9izgQFlrpC4/JnVs+cJPb/Q6fAUVxBg==
+  dependencies:
+    "@volar/language-core" "1.0.8"
+    "@volar/source-map" "1.0.8"
+    "@vue/compiler-dom" "^3.2.40"
+    "@vue/compiler-sfc" "^3.2.40"
+    "@vue/reactivity" "^3.2.40"
+    "@vue/shared" "^3.2.40"
+    minimatch "^5.1.0"
+    vue-template-compiler "^2.7.10"
+
+"@volar/vue-typescript@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/@volar/vue-typescript/-/vue-typescript-1.0.8.tgz#34cc253b65d5992cb411d110db56c55037c49956"
+  integrity sha512-6jBvA7iwBkRqS2VQx2gLJgfLcF3hcODyJ6Lmiw2tN8D/LVfFCovvzJgPvIQb9Y4i+rha1Y0cpsYOUt9XW2Z7ZA==
+  dependencies:
+    "@volar/typescript" "1.0.8"
+    "@volar/vue-language-core" "1.0.8"
+
+"@vue/compiler-core@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.41.tgz#fb5b25f23817400f44377d878a0cdead808453ef"
+  integrity sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.37"
+    "@vue/shared" "3.2.41"
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.37", "@vue/compiler-dom@^3.2.36":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz"
-  integrity sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==
+"@vue/compiler-dom@3.2.41", "@vue/compiler-dom@^3.2.40":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"
+  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
   dependencies:
-    "@vue/compiler-core" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/compiler-sfc@3.2.37", "@vue/compiler-sfc@^3.2.36":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz"
-  integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==
+"@vue/compiler-sfc@3.2.41", "@vue/compiler-sfc@^3.2.40":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"
+  integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.37"
-    "@vue/compiler-dom" "3.2.37"
-    "@vue/compiler-ssr" "3.2.37"
-    "@vue/reactivity-transform" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/reactivity-transform" "3.2.41"
+    "@vue/shared" "3.2.41"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz"
-  integrity sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==
+"@vue/compiler-ssr@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz#344f564d68584b33367731c04ffc949784611fcb"
+  integrity sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==
   dependencies:
-    "@vue/compiler-dom" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz"
-  integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
+"@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.4.4":
+  version "6.4.4"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.4.tgz#0b024fc8ca91bb4b6035abaf53c5aecc17119b3b"
+  integrity sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw==
 
-"@vue/reactivity-transform@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz"
-  integrity sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==
+"@vue/reactivity-transform@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz#9ff938877600c97f646e09ac1959b5150fb11a0c"
+  integrity sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@3.2.37", "@vue/reactivity@^3.2.36":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.37.tgz"
-  integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
+"@vue/reactivity@3.2.41", "@vue/reactivity@^3.2.40":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.41.tgz#0ad3bdf76d76822da1502dc9f394dafd02642963"
+  integrity sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==
   dependencies:
-    "@vue/shared" "3.2.37"
+    "@vue/shared" "3.2.41"
 
-"@vue/runtime-core@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.37.tgz"
-  integrity sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==
+"@vue/runtime-core@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.41.tgz#775bfc00b3fadbaddab77138f23322aee3517a76"
+  integrity sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==
   dependencies:
-    "@vue/reactivity" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/reactivity" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/runtime-dom@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz"
-  integrity sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==
+"@vue/runtime-dom@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz#cdf86be7410f7b15c29632a96ce879e5b4c9ab92"
+  integrity sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==
   dependencies:
-    "@vue/runtime-core" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/runtime-core" "3.2.41"
+    "@vue/shared" "3.2.41"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.37.tgz"
-  integrity sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==
+"@vue/server-renderer@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.41.tgz#ca64552c05878f94e8d191ac439141c06c0fb2ad"
+  integrity sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==
   dependencies:
-    "@vue/compiler-ssr" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/shared@3.2.37", "@vue/shared@^3.2.36":
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.37.tgz"
-  integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
+"@vue/shared@3.2.41", "@vue/shared@^3.2.40":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"
+  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
 
 "@xstate/vue@^2.0.0":
   version "2.0.0"
@@ -220,22 +236,34 @@ arg@^5.0.2:
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
 autoprefixer@^10.4.7:
-  version "10.4.8"
-  resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.8.tgz"
-  integrity sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==
+  version "10.4.12"
+  resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.12.tgz#183f30bf0b0722af54ee5ef257f7d4320bb33129"
+  integrity sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==
   dependencies:
-    browserslist "^4.21.3"
-    caniuse-lite "^1.0.30001373"
+    browserslist "^4.21.4"
+    caniuse-lite "^1.0.30001407"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -243,25 +271,25 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.3:
-  version "4.21.3"
-  resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.3.tgz"
-  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+browserslist@^4.21.4:
+  version "4.21.4"
+  resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
   dependencies:
-    caniuse-lite "^1.0.30001370"
-    electron-to-chromium "^1.4.202"
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
     node-releases "^2.0.6"
-    update-browserslist-db "^1.0.5"
+    update-browserslist-db "^1.0.9"
 
 camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
-  version "1.0.30001373"
-  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001373.tgz"
-  integrity sha512-pJYArGHrPp3TUqQzFYRmP/lwJlj8RCbVe3Gd3eJQkAV8SAC6b19XS9BjMvRdvaS8RMkaTN8ZhoHP6S1y8zzwEQ==
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001407:
+  version "1.0.30001421"
+  resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001421.tgz#979993aaacff5ab72a8d0d58c28ddbcb7b4deba6"
+  integrity sha512-Sw4eLbgUJAEhjLs1Fa+mk45sidp1wRn5y6GtDpHGBaNJ9OCDJaVh2tIaWWUnGfuXfKf1JCBaIarak3FkVAvEeA==
 
 chokidar@^3.5.3:
   version "3.5.3"
@@ -320,9 +348,9 @@ cssesc@^3.0.0:
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 csstype@^2.6.8:
-  version "2.6.20"
-  resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+  version "2.6.21"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
 daisyui@^2.31.0:
   version "2.31.0"
@@ -334,10 +362,15 @@ daisyui@^2.31.0:
     postcss-js "^4.0.0"
     tailwindcss "^3"
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
 defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
+  integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
 
 detective@^5.2.1:
   version "5.2.1"
@@ -359,152 +392,153 @@ dlv@^1.1.3:
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
 echarts@^5.3.3:
-  version "5.3.3"
-  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz"
-  integrity sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==
+  version "5.4.0"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.0.tgz#a9a8e5367293a397408d3bf3e2638b869249ce04"
+  integrity sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==
   dependencies:
     tslib "2.3.0"
-    zrender "5.3.2"
+    zrender "5.4.0"
 
-electron-to-chromium@^1.4.202:
-  version "1.4.206"
-  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.206.tgz"
-  integrity sha512-h+Fadt1gIaQ06JaIiyqPsBjJ08fV5Q7md+V8bUvQW/9OvXfL2LRICTz2EcnnCP7QzrFTS6/27MRV6Bl9Yn97zA==
+electron-to-chromium@^1.4.251:
+  version "1.4.284"
+  resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
+  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
 
-esbuild-android-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.14.51.tgz#414a087cb0de8db1e347ecca6c8320513de433db"
-  integrity sha512-6FOuKTHnC86dtrKDmdSj2CkcKF8PnqkaIXqvgydqfJmqBazCPdw+relrMlhGjkvVdiiGV70rpdnyFmA65ekBCQ==
+esbuild-android-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"
+  integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==
 
-esbuild-android-arm64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.51.tgz#55de3bce2aab72bcd2b606da4318ad00fb9c8151"
-  integrity sha512-vBtp//5VVkZWmYYvHsqBRCMMi1MzKuMIn5XDScmnykMTu9+TD9v0NMEDqQxvtFToeYmojdo5UCV2vzMQWJcJ4A==
+esbuild-android-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771"
+  integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==
 
-esbuild-darwin-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.51.tgz#4259f23ed6b4cea2ec8a28d87b7fb9801f093754"
-  integrity sha512-YFmXPIOvuagDcwCejMRtCDjgPfnDu+bNeh5FU2Ryi68ADDVlWEpbtpAbrtf/lvFTWPexbgyKgzppNgsmLPr8PA==
+esbuild-darwin-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25"
+  integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==
 
-esbuild-darwin-arm64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.51.tgz#d77b4366a71d84e530ba019d540b538b295d494a"
-  integrity sha512-juYD0QnSKwAMfzwKdIF6YbueXzS6N7y4GXPDeDkApz/1RzlT42mvX9jgNmyOlWKN7YzQAYbcUEJmZJYQGdf2ow==
+esbuild-darwin-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73"
+  integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==
 
-esbuild-freebsd-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.51.tgz#27b6587b3639f10519c65e07219d249b01f2ad38"
-  integrity sha512-cLEI/aXjb6vo5O2Y8rvVSQ7smgLldwYY5xMxqh/dQGfWO+R1NJOFsiax3IS4Ng300SVp7Gz3czxT6d6qf2cw0g==
+esbuild-freebsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d"
+  integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==
 
-esbuild-freebsd-arm64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.51.tgz#63c435917e566808c71fafddc600aca4d78be1ec"
-  integrity sha512-TcWVw/rCL2F+jUgRkgLa3qltd5gzKjIMGhkVybkjk6PJadYInPtgtUBp1/hG+mxyigaT7ib+od1Xb84b+L+1Mg==
+esbuild-freebsd-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48"
+  integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==
 
-esbuild-linux-32@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.14.51.tgz#c3da774143a37e7f11559b9369d98f11f997a5d9"
-  integrity sha512-RFqpyC5ChyWrjx8Xj2K0EC1aN0A37H6OJfmUXIASEqJoHcntuV3j2Efr9RNmUhMfNE6yEj2VpYuDteZLGDMr0w==
+esbuild-linux-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5"
+  integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==
 
-esbuild-linux-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.51.tgz#5d92b67f674e02ae0b4a9de9a757ba482115c4ae"
-  integrity sha512-dxjhrqo5i7Rq6DXwz5v+MEHVs9VNFItJmHBe1CxROWNf4miOGoQhqSG8StStbDkQ1Mtobg6ng+4fwByOhoQoeA==
+esbuild-linux-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652"
+  integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==
 
-esbuild-linux-arm64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.51.tgz#dac84740516e859d8b14e1ecc478dd5241b10c93"
-  integrity sha512-D9rFxGutoqQX3xJPxqd6o+kvYKeIbM0ifW2y0bgKk5HPgQQOo2k9/2Vpto3ybGYaFPCE5qTGtqQta9PoP6ZEzw==
+esbuild-linux-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b"
+  integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==
 
-esbuild-linux-arm@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.51.tgz#b3ae7000696cd53ed95b2b458554ff543a60e106"
-  integrity sha512-LsJynDxYF6Neg7ZC7748yweCDD+N8ByCv22/7IAZglIEniEkqdF4HCaa49JNDLw1UQGlYuhOB8ZT/MmcSWzcWg==
+esbuild-linux-arm@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59"
+  integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==
 
-esbuild-linux-mips64le@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.51.tgz#dad10770fac94efa092b5a0643821c955a9dd385"
-  integrity sha512-vS54wQjy4IinLSlb5EIlLoln8buh1yDgliP4CuEHumrPk4PvvP4kTRIG4SzMXm6t19N0rIfT4bNdAxzJLg2k6A==
+esbuild-linux-mips64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34"
+  integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==
 
-esbuild-linux-ppc64le@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.51.tgz#b68c2f8294d012a16a88073d67e976edd4850ae0"
-  integrity sha512-xcdd62Y3VfGoyphNP/aIV9LP+RzFw5M5Z7ja+zdpQHHvokJM7d0rlDRMN+iSSwvUymQkqZO+G/xjb4/75du8BQ==
+esbuild-linux-ppc64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e"
+  integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==
 
-esbuild-linux-riscv64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.51.tgz#608a318b8697123e44c1e185cdf6708e3df50b93"
-  integrity sha512-syXHGak9wkAnFz0gMmRBoy44JV0rp4kVCEA36P5MCeZcxFq8+fllBC2t6sKI23w3qd8Vwo9pTADCgjTSf3L3rA==
+esbuild-linux-riscv64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8"
+  integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==
 
-esbuild-linux-s390x@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.51.tgz#c9e7791170a3295dba79b93aa452beb9838a8625"
-  integrity sha512-kFAJY3dv+Wq8o28K/C7xkZk/X34rgTwhknSsElIqoEo8armCOjMJ6NsMxm48KaWY2h2RUYGtQmr+RGuUPKBhyw==
+esbuild-linux-s390x@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6"
+  integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==
 
-esbuild-netbsd-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.51.tgz#0abd40b8c2e37fda6f5cc41a04cb2b690823d891"
-  integrity sha512-ZZBI7qrR1FevdPBVHz/1GSk1x5GDL/iy42Zy8+neEm/HA7ma+hH/bwPEjeHXKWUDvM36CZpSL/fn1/y9/Hb+1A==
+esbuild-netbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81"
+  integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==
 
-esbuild-openbsd-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.51.tgz#4adba0b7ea7eb1428bb00d8e94c199a949b130e8"
-  integrity sha512-7R1/p39M+LSVQVgDVlcY1KKm6kFKjERSX1lipMG51NPcspJD1tmiZSmmBXoY5jhHIu6JL1QkFDTx94gMYK6vfA==
+esbuild-openbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b"
+  integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==
 
-esbuild-sunos-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.51.tgz#4b8a6d97dfedda30a6e39607393c5c90ebf63891"
-  integrity sha512-HoHaCswHxLEYN8eBTtyO0bFEWvA3Kdb++hSQ/lLG7TyKF69TeSG0RNoBRAs45x/oCeWaTDntEZlYwAfQlhEtJA==
+esbuild-sunos-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da"
+  integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==
 
-esbuild-windows-32@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.14.51.tgz#d31d8ca0c1d314fb1edea163685a423b62e9ac17"
-  integrity sha512-4rtwSAM35A07CBt1/X8RWieDj3ZUHQqUOaEo5ZBs69rt5WAFjP4aqCIobdqOy4FdhYw1yF8Z0xFBTyc9lgPtEg==
+esbuild-windows-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31"
+  integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==
 
-esbuild-windows-64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.51.tgz"
-  integrity sha512-HoN/5HGRXJpWODprGCgKbdMvrC3A2gqvzewu2eECRw2sYxOUoh2TV1tS+G7bHNapPGI79woQJGV6pFH7GH7qnA==
+esbuild-windows-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4"
+  integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==
 
-esbuild-windows-arm64@0.14.51:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.51.tgz#0220d2304bfdc11bc27e19b2aaf56edf183e4ae9"
-  integrity sha512-JQDqPjuOH7o+BsKMSddMfmVJXrnYZxXDHsoLHc0xgmAZkOOCflRmC43q31pk79F9xuyWY45jDBPolb5ZgGOf9g==
+esbuild-windows-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
+  integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
 
 esbuild@^0.14.27:
-  version "0.14.51"
-  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.51.tgz"
-  integrity sha512-+CvnDitD7Q5sT7F+FM65sWkF8wJRf+j9fPcprxYV4j+ohmzVj2W7caUqH2s5kCaCJAfcAICjSlKhDCcvDpU7nw==
+  version "0.14.54"
+  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
+  integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
   optionalDependencies:
-    esbuild-android-64 "0.14.51"
-    esbuild-android-arm64 "0.14.51"
-    esbuild-darwin-64 "0.14.51"
-    esbuild-darwin-arm64 "0.14.51"
-    esbuild-freebsd-64 "0.14.51"
-    esbuild-freebsd-arm64 "0.14.51"
-    esbuild-linux-32 "0.14.51"
-    esbuild-linux-64 "0.14.51"
-    esbuild-linux-arm "0.14.51"
-    esbuild-linux-arm64 "0.14.51"
-    esbuild-linux-mips64le "0.14.51"
-    esbuild-linux-ppc64le "0.14.51"
-    esbuild-linux-riscv64 "0.14.51"
-    esbuild-linux-s390x "0.14.51"
-    esbuild-netbsd-64 "0.14.51"
-    esbuild-openbsd-64 "0.14.51"
-    esbuild-sunos-64 "0.14.51"
-    esbuild-windows-32 "0.14.51"
-    esbuild-windows-64 "0.14.51"
-    esbuild-windows-arm64 "0.14.51"
+    "@esbuild/linux-loong64" "0.14.54"
+    esbuild-android-64 "0.14.54"
+    esbuild-android-arm64 "0.14.54"
+    esbuild-darwin-64 "0.14.54"
+    esbuild-darwin-arm64 "0.14.54"
+    esbuild-freebsd-64 "0.14.54"
+    esbuild-freebsd-arm64 "0.14.54"
+    esbuild-linux-32 "0.14.54"
+    esbuild-linux-64 "0.14.54"
+    esbuild-linux-arm "0.14.54"
+    esbuild-linux-arm64 "0.14.54"
+    esbuild-linux-mips64le "0.14.54"
+    esbuild-linux-ppc64le "0.14.54"
+    esbuild-linux-riscv64 "0.14.54"
+    esbuild-linux-s390x "0.14.54"
+    esbuild-netbsd-64 "0.14.54"
+    esbuild-openbsd-64 "0.14.54"
+    esbuild-sunos-64 "0.14.54"
+    esbuild-windows-32 "0.14.54"
+    esbuild-windows-64 "0.14.54"
+    esbuild-windows-arm64 "0.14.54"
 
 escalade@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz"
+  resolved "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
 estree-walker@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz"
+  resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
 fast-glob@^3.2.11:
@@ -539,7 +573,7 @@ fill-range@^7.0.1:
 
 fraction.js@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz"
+  resolved "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
 fsevents@~2.3.2:
@@ -573,6 +607,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 highlight.js@^11.6.0:
   version "11.6.0"
   resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.6.0.tgz"
@@ -591,9 +630,9 @@ is-binary-path@~2.1.0:
     binary-extensions "^2.0.0"
 
 is-core-module@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.9.0.tgz"
-  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
+  version "2.11.0"
+  resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
   dependencies:
     has "^1.0.3"
 
@@ -621,7 +660,7 @@ lilconfig@^2.0.5, lilconfig@^2.0.6:
 
 magic-string@^0.25.7:
   version "0.25.9"
-  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
   integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
   dependencies:
     sourcemap-codec "^1.4.8"
@@ -639,19 +678,31 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+minimatch@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
+  integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.6:
-  version "1.2.6"
-  resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.6.tgz"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+  version "1.2.7"
+  resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
+muggle-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c"
+  integrity sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==
 
 nanoid@^3.3.4:
   version "3.3.4"
-  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz"
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 node-releases@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.6.tgz"
+  resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
@@ -661,7 +712,7 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
 
 normalize-range@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz"
+  resolved "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
 object-hash@^3.0.0:
@@ -690,11 +741,11 @@ pify@^2.3.0:
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
 pinia@^2.0.15:
-  version "2.0.17"
-  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.17.tgz"
-  integrity sha512-AtwLwEWQgIjofjgeFT+nxbnK5lT2QwQjaHNEDqpsi2AiCwf/NY78uWTeHUyEhiiJy8+sBmw0ujgQMoQbWiZDfA==
+  version "2.0.23"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.23.tgz#570f5f82160b656b412602789683faa95502d227"
+  integrity sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==
   dependencies:
-    "@vue/devtools-api" "^6.2.1"
+    "@vue/devtools-api" "^6.4.4"
     vue-demi "*"
 
 postcss-import@^14.1.0:
@@ -742,9 +793,9 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@^8.1.10, postcss@^8.4.13, postcss@^8.4.14:
-  version "8.4.14"
-  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.14.tgz"
-  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  version "8.4.18"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
+  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
@@ -776,7 +827,7 @@ readdirp@~3.6.0:
 
 resolve@^1.1.7, resolve@^1.22.0, resolve@^1.22.1:
   version "1.22.1"
-  resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz"
+  resolved "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
   dependencies:
     is-core-module "^2.9.0"
@@ -788,10 +839,10 @@ reusify@^1.0.4:
   resolved "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rollup@^2.59.0:
-  version "2.77.2"
-  resolved "https://registry.npmmirror.com/rollup/-/rollup-2.77.2.tgz"
-  integrity sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==
+"rollup@>=2.59.0 <2.78.0":
+  version "2.77.3"
+  resolved "https://registry.npmmirror.com/rollup/-/rollup-2.77.3.tgz#8f00418d3a2740036e15deb653bed1a90ee0cc12"
+  integrity sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -811,17 +862,17 @@ simple-swizzle@^0.2.2:
 
 source-map-js@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 source-map@^0.6.1:
   version "0.6.1"
-  resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz"
+  resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 sourcemap-codec@^1.4.8:
   version "1.4.8"
-  resolved "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
+  resolved "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 supports-preserve-symlinks-flag@^1.0.0:
@@ -829,7 +880,7 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-tailwindcss@^3:
+tailwindcss@^3, tailwindcss@^3.1.4:
   version "3.1.8"
   resolved "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
   integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
@@ -857,34 +908,6 @@ tailwindcss@^3:
     quick-lru "^5.1.1"
     resolve "^1.22.1"
 
-tailwindcss@^3.1.4:
-  version "3.1.7"
-  resolved "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.1.7.tgz"
-  integrity sha512-r7mgumZ3k0InfVPpGWcX8X/Ut4xBfv+1O/+C73ar/m01LxGVzWvPxF/w6xIUPEztrCoz7axfx0SMdh8FH8ZvRQ==
-  dependencies:
-    arg "^5.0.2"
-    chokidar "^3.5.3"
-    color-name "^1.1.4"
-    detective "^5.2.1"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.2.11"
-    glob-parent "^6.0.2"
-    is-glob "^4.0.3"
-    lilconfig "^2.0.6"
-    normalize-path "^3.0.0"
-    object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.14"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.10"
-    postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -894,77 +917,86 @@ to-regex-range@^5.0.1:
 
 tslib@2.3.0:
   version "2.3.0"
-  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
 typescript@^4.7.4:
-  version "4.7.4"
-  resolved "https://registry.npmmirror.com/typescript/-/typescript-4.7.4.tgz"
-  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
+  version "4.8.4"
+  resolved "https://registry.npmmirror.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
+  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-update-browserslist-db@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz"
-  integrity sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==
+update-browserslist-db@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
 util-deprecate@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
 vite@^2.9.9:
-  version "2.9.14"
-  resolved "https://registry.npmmirror.com/vite/-/vite-2.9.14.tgz"
-  integrity sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==
+  version "2.9.15"
+  resolved "https://registry.npmmirror.com/vite/-/vite-2.9.15.tgz#2858dd5b2be26aa394a283e62324281892546f0b"
+  integrity sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==
   dependencies:
     esbuild "^0.14.27"
     postcss "^8.4.13"
     resolve "^1.22.0"
-    rollup "^2.59.0"
+    rollup ">=2.59.0 <2.78.0"
   optionalDependencies:
     fsevents "~2.3.2"
 
 vue-demi@*:
-  version "0.13.6"
-  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.6.tgz"
-  integrity sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==
+  version "0.13.11"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
 vue-router@4:
-  version "4.1.3"
-  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.3.tgz"
-  integrity sha512-XvK81bcYglKiayT7/vYAg/f36ExPC4t90R/HIpzrZ5x+17BOWptXLCrEPufGgZeuq68ww4ekSIMBZY1qdUdfjA==
+  version "4.1.5"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"
+  integrity sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==
   dependencies:
     "@vue/devtools-api" "^6.1.4"
 
-vue-tsc@^0.34.7:
-  version "0.34.17"
-  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.34.17.tgz"
-  integrity sha512-jzUXky44ZLHC4daaJag7FQr3idlPYN719/K1eObGljz5KaS2UnVGTU/XSYCd7d6ampYYg4OsyalbHyJIxV0aEQ==
+vue-template-compiler@^2.7.10:
+  version "2.7.13"
+  resolved "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.13.tgz#1520a5aa6d1af51dd0622824e79814f6e8cb7058"
+  integrity sha512-jYM6TClwDS9YqP48gYrtAtaOhRKkbYmbzE+Q51gX5YDr777n7tNI/IZk4QV4l/PjQPNh/FVa/E92sh/RqKMrog==
   dependencies:
-    "@volar/vue-typescript" "0.34.17"
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
+vue-tsc@1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-1.0.8.tgz#6f24e082878d1f4960dd89fe66fe3b70f6cc2ed5"
+  integrity sha512-+0sJ+QVH7SHLt8mV/uIw4xlHDk1mWigZkMFugfZTv8rlHpM3S2tCVZ0BWEGclT/0rKdO8j+St+mljpvhWPN/eQ==
+  dependencies:
+    "@volar/vue-language-core" "1.0.8"
+    "@volar/vue-typescript" "1.0.8"
 
 vue@^3.2.25:
-  version "3.2.37"
-  resolved "https://registry.npmmirror.com/vue/-/vue-3.2.37.tgz"
-  integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.2.41.tgz#ed452b8a0f7f2b962f055c8955139c28b1c06806"
+  integrity sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==
   dependencies:
-    "@vue/compiler-dom" "3.2.37"
-    "@vue/compiler-sfc" "3.2.37"
-    "@vue/runtime-dom" "3.2.37"
-    "@vue/server-renderer" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-sfc" "3.2.41"
+    "@vue/runtime-dom" "3.2.41"
+    "@vue/server-renderer" "3.2.41"
+    "@vue/shared" "3.2.41"
 
 xstate@^4.32.1:
-  version "4.32.1"
-  resolved "https://registry.npmmirror.com/xstate/-/xstate-4.32.1.tgz"
-  integrity sha512-QYUd+3GkXZ8i6qdixnOn28bL3EvA++LONYL/EMWwKlFSh/hiLndJ8YTnz77FDs+JUXcwU7NZJg7qoezoRHc4GQ==
+  version "4.33.6"
+  resolved "https://registry.npmmirror.com/xstate/-/xstate-4.33.6.tgz#9e23f78879af106f1de853aba7acb2bc3b1eb950"
+  integrity sha512-A5R4fsVKADWogK2a43ssu8Fz1AF077SfrKP1ZNyDBD8lNa/l4zfR//Luofp5GSWehOQr36Jp0k2z7b+sH2ivyg==
 
 xtend@^4.0.2:
   version "4.0.2"
-  resolved "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz"
+  resolved "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 xterm-addon-fit@^0.6.0:
@@ -987,9 +1019,9 @@ yaml@^1.10.2:
   resolved "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-zrender@5.3.2:
-  version "5.3.2"
-  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz"
-  integrity sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==
+zrender@5.4.0:
+  version "5.4.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.0.tgz#d4f76e527b2e3bbd7add2bdaf27a16af85785576"
+  integrity sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==
   dependencies:
     tslib "2.3.0"