修复DEBUG时`BigDecimal`类型显示不正确的问题

magic-editor/src/console/src/components/common/magic-structure.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ma-structure-container">
-    <span :class="type.substring(10).toLowerCase()" v-if="displayText">{{ data }}</span>
+    <span :class="dataType" v-if="displayText">{{ data }}</span>
     <span class="boolean" v-else-if="!type">null</span>
     <magic-structure-array v-else-if="Array.isArray(jsonData)" :data="jsonData"/>
     <magic-structure-object v-else :data="jsonData"/>
@@ -10,6 +10,7 @@
 <script>
 import MagicStructureArray from './magic-structure-array'
 import MagicStructureObject from './magic-structure-object'
+
 export default {
   name: 'MagicStructure',
   props: {
@@ -17,10 +18,22 @@ export default {
     type: String
   },
   data() {
-    let displayText = (this.type||'').startsWith('java.lang');
+    let displayText = (this.type || '').startsWith('java.lang');
+    let jsonObject;
+    let dataType;
+    if (!displayText) {
+      jsonObject = this.data && JSON.parse(this.data);
+      if (!Array.isArray(jsonObject) && typeof jsonObject !== 'object') {
+        displayText = true
+        dataType = typeof jsonObject
+      }
+    } else {
+      dataType = this.type.substring(10).toLowerCase()
+    }
     return {
+      dataType,
       displayText,
-      jsonData: displayText ? null : this.data&&JSON.parse(this.data)
+      jsonData: displayText ? null : jsonObject
     }
   },
   components: {
@@ -30,37 +43,44 @@ export default {
 }
 </script>
 <style>
-  .ma-structure-container {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    font-size: 14px;
-  }
-  .ma-structure-container label{
-    padding-right: 2px;
-  }
-  .ma-structure-container span{
-    display: inline-block;
-    color: var(--color);
-  }
-  .ma-structure-container .number{
-    color: var(--text-number-color);
-    font-weight: bold;
-  }
-  .ma-structure-container .string{
-    color: var(--text-string-color);
-    font-weight: bold;
-  }
-  .ma-structure-container .boolean{
-    color: var(--text-boolean-color);
-    font-weight: bold;
-  }
-  .ma-structure-container .property{
-    color: var(--text-key-color);
-    font-weight: bold;
-  }
-  .ma-structure-container .ma-icon{
-    font-size: 12px;
-    color: var(--color);
-  }
+.ma-structure-container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  font-size: 14px;
+}
+
+.ma-structure-container label {
+  padding-right: 2px;
+}
+
+.ma-structure-container span {
+  display: inline-block;
+  color: var(--color);
+}
+
+.ma-structure-container .number {
+  color: var(--text-number-color);
+  font-weight: bold;
+}
+
+.ma-structure-container .string {
+  color: var(--text-string-color);
+  font-weight: bold;
+}
+
+.ma-structure-container .boolean {
+  color: var(--text-boolean-color);
+  font-weight: bold;
+}
+
+.ma-structure-container .property,.ma-structure-container .class {
+  color: var(--text-key-color);
+  font-weight: bold;
+}
+
+.ma-structure-container .ma-icon {
+  font-size: 12px;
+  color: var(--color);
+}
 </style>