引入tree

plugin/preload.js

@@ -463,7 +463,7 @@ window.runCodeInSandbox = (code, callback, addVars = {}) => {
     sandbox.console = {
         log: (...stdout) => {
             console.log(stdout);
-            callback(parseStdout(stdout), null)
+            callback(stdout, null)
         },
         error: (...stderr) => {
             callback(null, parseStdout(stderr))

src/components/CommandRunResult.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="!fromUtools">
       <q-dialog v-model="isResultShow" position="bottom" @hide="stopRun">
-        <q-card style="max-width: 700px; min-width: 500px; overflow: hidden">
+        <q-card style="max-width: 700px; min-width: 700px; overflow: hidden">
           <q-toolbar>
             <q-avatar>
               <q-icon
@@ -23,6 +23,7 @@
             <ResultArea
               v-if="isResultShow"
               @frameLoad="frameLoad"
+              @expandTrees="outputAutoHeight(fromUtools)"
               :frameInitHeight="frameInitHeight"
               :enableHtml="enableHtml"
               :runResultStatus="runResultStatus"
@@ -38,6 +39,7 @@
       <ResultArea
         v-if="isResultShow"
         @frameLoad="frameLoad"
+        @expandTrees="outputAutoHeight(fromUtools)"
         :frameInitHeight="frameInitHeight"
         :enableHtml="enableHtml"
         :runResultStatus="runResultStatus"
@@ -61,7 +63,7 @@ export default {
   data() {
     return {
       isResultShow: false,
-      runResult: "",
+      runResult: [],
       runResultStatus: true,
       subInputValue: "",
       subInputListener: null,
@@ -230,16 +232,17 @@ export default {
       this.isResultShow = true;
       this.timeStamp = new Date().getTime();
       this.runResultStatus = isSuccess;
-      let contlength = content?.length || 0;
-      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);
+      //   let contlength = content?.length || 0;
+      //   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);
     },
     // 根据输出自动滚动及调整 utools 高度
@@ -258,7 +261,7 @@ export default {
       });
     },
     stopRun() {
-      this.runResult = "";
+      this.runResult = [];
       if (!!this.subInputListener) {
         this.subInputValue = "";
         utools.removeSubInput();

src/components/ResultArea.vue

@@ -9,20 +9,22 @@
       @load="frameLoad"
       v-if="showFrame"
     ></iframe>
-    <pre
-      v-else
-      v-show="!!runResult"
-      :class="{
-        'text-red': !runResultStatus,
-        'q-pa-md': 1,
-        result: 1,
-      }"
-      v-text="runResult"
-    ></pre>
+    <div v-else v-show="!!runResult" :class="{ 'text-red': !runResultStatus }">
+      <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>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import ObjectTree from "components/popup/ObjectTree";
+
 const frameStyle = `<style>::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -47,13 +49,14 @@ body {
 `;
 
 export default {
+  components: { ObjectTree },
   data() {
     return { frameStyle: frameStyle, frameHeight: this.frameInitHeight };
   },
   props: {
     enableHtml: Boolean,
     runResultStatus: Boolean,
-    runResult: String,
+    runResult: Object,
     maxHeight: Number,
     frameInitHeight: Number,
   },
@@ -73,6 +76,7 @@ export default {
   },
   mounted() {
     this.frameInit();
+    console.log(this.runResult);
   },
   methods: {
     frameInit() {

src/components/popup/ObjectTree.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="q-pa-xs q-gutter-sm">
+    <q-tree :nodes="trees" node-key="label" @lazy-load="showChildren" />
+  </div>
+</template>
+
+<script>
+import { toRaw } from "vue";
+
+export default {
+  data() {
+    return {
+      trees: [
+        {
+          label: "object",
+          lazy: true,
+          item: this.obj,
+        },
+      ],
+    };
+  },
+  props: {
+    obj: Object,
+  },
+  methods: {
+    liteItem(item) {
+      if (typeof item === "undefined") return "undefined";
+      if (typeof item === "number") return item;
+      if (typeof item === "function")
+        return `[Function: ${item.name ? item.name : "(anonymous)"}]`;
+      if (typeof item !== "object") return item.toString();
+      if (_.isBuffer(item)) {
+        var bufferString = `[Buffer ${item
+          .slice(0, 50)
+          .toString("hex")
+          .match(/\w{1,2}/g)
+          .join(" ")}`;
+        if (item.length > 50)
+          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";
+    },
+    showChildren({ node, key, done, fail }) {
+      let children = [];
+      for (let key in node.item) {
+        let value = toRaw(node.item)[key];
+        children.push({
+          label: `${key}: ${this.liteItem(value)}`,
+          lazy: typeof value === "object",
+          item: value,
+        });
+      }
+      done(children);
+      this.$emit("expandTrees");
+    },
+  },
+};
+</script>