用树状图展示对象

plugin/preload.js

@@ -8,7 +8,6 @@ const axios = require('axios');
 const http = require('http');
 const url = require('url')
 const kill = require('tree-kill')
-const beautifyLog = require('./lib/beautifyLog')
 require('ses')
 
 window._ = require("lodash")
@@ -414,8 +413,6 @@ window.convertFilePathToUtoolsPayload = files => files.map(file => {
     }
 })
 
-let parseStdout = stdout => stdout.map(x => beautifyLog(x)).join("\n")
-
 let getSandboxFuns = () => {
     var sandbox = {
         fetch: fetch.bind(window),
@@ -466,7 +463,7 @@ window.runCodeInSandbox = (code, callback, addVars = {}) => {
             callback(stdout, null)
         },
         error: (...stderr) => {
-            callback(null, parseStdout(stderr))
+            callback(null, stderr)
         }
     }
     let sandboxWithAD = Object.assign(addVars, sandbox)

src/components/CommandRunResult.vue

@@ -128,7 +128,9 @@ export default {
                 ? alert(stderr)
                 : this.showRunResult(stderr, false, action);
             }
-            !outPlugin && this.showRunResult(stdout, true, action);
+            outPlugin
+              ? action(stdout.toString())
+              : this.showRunResult(stdout, true);
           },
           { enterData: this.$root.enterData }
         );
@@ -151,7 +153,9 @@ export default {
                 ? alert(stderr)
                 : this.showRunResult(stderr, false, action);
             }
-            !outPlugin && this.showRunResult(stdout, true, action);
+            outPlugin
+              ? action(stdout.toString())
+              : this.showRunResult(stdout, true);
           }
         );
       }
@@ -228,20 +232,11 @@ export default {
       };
     },
     // 显示运行结果
-    showRunResult(content, isSuccess, action) {
+    showRunResult(content, isSuccess) {
       this.isResultShow = true;
       this.timeStamp = new Date().getTime();
       this.runResultStatus = isSuccess;
-      //   let contlength = content?.length || 0;
+      if (!_.isArray(content)) content = [content];
-      //   if (contlength > this.resultMaxLength)
-      //     content =
-      //       content.slice(0, this.resultMaxLength - 100) +
-      //       `\n\n...\n${
-      //         contlength - this.resultMaxLength - 100
-      //       } 字省略\n...\n\n` +
-      //       content.slice(contlength - 100);
-      //   let pretreatment = action(content);
-      //   pretreatment && (this.runResult += pretreatment);
       this.runResult = this.runResult.concat(content);
       this.outputAutoHeight(this.fromUtools);
     },

src/components/ResultArea.vue

@@ -9,14 +9,19 @@
       @load="frameLoad"
       v-if="showFrame"
     ></iframe>
-    <div v-else v-show="!!runResult" :class="{ 'text-red': !runResultStatus }">
+    <div
+      v-else
+      v-show="!!runResult"
+      :class="{ 'text-red': !runResultStatus }"
+      class="text q-pa-md"
+    >
       <div v-for="item in runResult" :key="item">
         <ObjectTree
           :obj="item"
           v-if="typeof item === 'object'"
           @expandTrees="$emit('expandTrees')"
         />
-        <pre class="q-pa-md result" v-text="item" v-else></pre>
+        <pre class="result" v-text="item" v-else></pre>
       </div>
     </div>
   </div>
@@ -103,12 +108,14 @@ export default {
 </script>
 
 <style scoped>
+.text {
+  font-family: Consolas, Monaco, "Courier New";
+}
 .result {
   white-space: pre-wrap;
   word-wrap: break-word;
   max-width: 100%;
   margin: 0;
-  font-family: Consolas, Monaco, "Courier New";
 }
 iframe {
   width: 100%;

src/components/popup/ObjectTree.vue

@@ -1,20 +1,40 @@
 <template>
-  <div class="q-pa-xs q-gutter-sm">
+  <div class="q-gutter-sm">
-    <q-tree :nodes="trees" node-key="label" @lazy-load="showChildren" />
+    <q-tree
+      :nodes="trees"
+      no-connectors
+      node-key="id"
+      @lazy-load="showChildren"
+    >
+      <template v-slot:default-header="prop">
+        <div class="text-primary">{{ prop.node.key }}</div>
+        <div v-show="!!prop.node.key" v-text="':'" style="margin-right: 5px" />
+        <div class="text-italic">{{ prop.node.summary }}</div>
+      </template></q-tree
+    >
   </div>
 </template>
 
 <script>
 import { toRaw } from "vue";
 
+const maxSize = {
+  txt: 80,
+  obj: 3,
+  ary: 3,
+  buff: 50,
+};
+
 export default {
   data() {
     return {
       trees: [
         {
-          label: "object",
+          key: "",
+          summary: this.liteItem(this.obj),
           lazy: true,
-          item: this.obj,
+          value: this.obj,
+          id: "root",
         },
       ],
     };
@@ -24,39 +44,92 @@ export default {
   },
   methods: {
     liteItem(item) {
+      if (item === null) return "null";
       if (typeof item === "undefined") return "undefined";
+      if (typeof item === "string")
+        return _.truncate(item, { length: maxSize.txt });
       if (typeof item === "number") return item;
       if (typeof item === "function")
-        return `[Function: ${item.name ? item.name : "(anonymous)"}]`;
+        return `f ${item.name ? item.name + "()" : "anonymous()"}`;
       if (typeof item !== "object") return item.toString();
       if (_.isBuffer(item)) {
         var bufferString = `[Buffer ${item
-          .slice(0, 50)
+          .slice(0, maxSize.buff)
           .toString("hex")
           .match(/\w{1,2}/g)
+          .map((x) => parseInt(x, 16))
           .join(" ")}`;
-        if (item.length > 50)
+        if (item.length > maxSize.buff)
           bufferString += `...${(item.length / 1000).toFixed(2)} kb `;
         return bufferString + "]";
       }
       if (item instanceof ArrayBuffer) return `ArrayBuffer(${item.byteLength})`;
       if (item instanceof Blob)
         return `Blob { size: ${item.size}, type: "${item.type}" }`;
-      return "object";
+      if (item instanceof Array) {
+        return (
+          "[" +
+          item
+            .map((i) => {
+              if (typeof i === "function") return `f`;
+              if (i instanceof Array) return `Array(${i.length})`;
+              if (i instanceof Object) return `{...}`;
+              return i;
+            })
+            .slice(0, maxSize.ary)
+            .join(", ") +
+          (item.length > maxSize.ary ? "..." : "") +
+          "]"
+        );
+      }
+      let keys = this.getObjKeys(item);
+      if (keys.length === 0 && item.toString() !== "[object Object]")
+        return item.toString();
+      return (
+        "{" +
+        keys.slice(0, maxSize.obj).join(", ") +
+        (keys.length > maxSize.obj ? "..." : "") +
+        "}"
+      );
+    },
+    getObjKeys(item) {
+      // 一些特殊对象用 Object.keys() 无法获取
+      let keys = [];
+      for (const key in item) {
+        keys.push(key);
+      }
+      return keys;
     },
     showChildren({ node, key, done, fail }) {
       let children = [];
-      for (let key in node.item) {
+      if (typeof node.value === "string") {
-        let value = toRaw(node.item)[key];
         children.push({
-          label: `${key}: ${this.liteItem(value)}`,
+          summary: node.value,
-          lazy: typeof value === "object",
+          id: node.id + "." + key,
-          item: value,
         });
+      } else {
+        for (let key in node.value) {
+          let value = toRaw(node.value)[key];
+          children.push({
+            key: key,
+            summary: this.liteItem(value),
+            lazy: this.hasChildren(value),
+            value: value,
+            id: node.id + "." + key,
+          });
+        }
       }
       done(children);
       this.$emit("expandTrees");
     },
+    hasChildren(item) {
+      if (typeof item === "object")
+        return item !== null && this.getObjKeys(item).length > 0;
+      if (typeof item === "string") {
+        return item.length > maxSize.txt;
+      }
+      return false;
+    },
   },
 };
 </script>