perf(web ui):remove tree component in watch

web-ui/arthasWebConsole/ui/src/stores/resTransform.ts

@@ -4,6 +4,6 @@ export const transfromStore = defineStore("transformStore", {
   actions: {
     transformStackTrace(trace: StackTrace) {
       return `${trace.className}.${trace.methodName} (${trace.fileName}: ${trace.lineNumber})`;
-    },
+    }
   },
 });

web-ui/arthasWebConsole/ui/src/views/async/Watch.vue

@@ -4,8 +4,7 @@ import { useInterpret, useMachine } from '@xstate/vue';
 import MethodInput from '@/components/input/MethodInput.vue';
 import machine from '@/machines/consoleMachine';
 import { fetchStore } from '@/stores/fetch';
-import { onBeforeMount, onBeforeUnmount, reactive, Ref, ref, watchEffect } from 'vue';
-import Tree from '@/components/show/Tree.vue';
+import { onBeforeMount, onBeforeUnmount, reactive, Ref, ref } from 'vue';
 import Enhancer from '@/components/show/Enhancer.vue';
 import { publicStore } from '@/stores/public';
 const pollingM = useMachine(machine)
@@ -50,51 +49,7 @@ const transform = (result: CommandResult) => {
       map.set(key, result[key])
     }
   }
-  let raw = tranOgnl(result.value)
-  const stk: TreeNode[] = []
-  // Tree的构建
-  raw.forEach(v => {
-    let str = v.trim()
-    let match = 0
-    for (let s of str) {
-      if (s === "[") {
-        match++
-      } else if (s === "]") {
-        match--
-      }
-    }
-    const root = {
-      children: [],
-      meta: str.substring(0, str.length - 1)
-    } as TreeNode
-
-    if (match > 0) {
-      stk.push(root)
-    } else if (match === 0) {
-      let cur = stk.pop()
-      if (cur) {
-        cur.children!.push(root)
-        stk.push(cur)
-      } else {
-        stk.push(root)
-      }
-
-    } else {
-      /// 默认每行只会一个]
-      //!可能会有bug
-      let cur = stk.pop()!
-      if (stk.length > 0) {
-        let parent = stk.pop()!
-        parent.children!.push(cur)
-        stk.push(parent)
-      } else {
-        // 构建结束
-        stk.push(cur)
-      }
-
-    }
-  })
-  map.set("value", stk[0])
+  map.set("value", result.value)
   return map
 }
 getPullResultsEffect(
@@ -155,8 +110,8 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
           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">
-            <span class="label-text uppercase font-bold mr-1">{{mode.name}}</span>
+            v-for="(mode, i) in modereflist" :key="i">
+            <span class="label-text uppercase font-bold mr-1">{{ mode.name }}</span>
             <input v-model="mode.enabled.value" type="checkbox" class="toggle" />
           </label>
 
@@ -165,7 +120,7 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
       </div>
       <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 border-x-0" @click.prevent="setDepth">depth:{{ depth }}</button>
         <button class="btn btn-sm btn-outline" @click.prevent="increase">+</button>
       </div>
     </template>
@@ -176,27 +131,19 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
       <thead>
         <tr>
           <th></th>
-          <th class="0" v-for="(v,i) in keyList" :key="i">{{v}}
+          <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" class="hover">
-          <th>{{i+1}}</th>
-          <td class="" v-for="(key,j) in keyList" :key="j">
-            <div v-if=" key !== 'value'">
-              {{map.get(key)}}
+          <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
-                  }'>
-                    {{data}}
-                  </div>
-                </template>
-              </Tree>
+              <pre><code>{{ map.get("value") }}</code></pre>
             </div>
           </td>
         </tr>
@@ -204,7 +151,7 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
       <tfoot>
         <tr>
           <th></th>
-          <th class="0" v-for="(v,i) in keyList" :key="i">{{v}}
+          <th class="0" v-for="(v, i) in keyList" :key="i">{{ v }}
           </th>
         </tr>
       </tfoot>