堆区变更

src/components/JHeap.vue

@@ -2,7 +2,8 @@
   <div>
     <h3>堆区</h3>
     <template v-if="objects !== null">
-      <v-btn v-for="item of objects" :key="item.id" block text :color="item.fresh ? 'red' : 'black'">
+      <v-btn v-for="item of objects" :key="item.id" block text :color="item.fresh ? 'red' : 'black'"
+             @click="handleClickDetail">
         <div class="button-text">{{item.id}}</div>
       </v-btn>
     </template>
@@ -19,19 +20,16 @@ export default {
     }
   },
   methods: {
-    handleClickDetail() {
-      this.$emit('click-detail')
+    handleClickDetail ({ detail }) {
+      this.$emit('click-detail', {
+        detail,
+        component: 'j-heap-detail'
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.button-text {
-  width: 100%;
-  text-transform: initial;
-  letter-spacing: 0;
-  // font-family: ;
-  text-align: left;
-}
+@import "common.scss";
 </style>

src/components/JMethod.vue

@@ -1,5 +1,13 @@
 <template>
-  <div>方法区</div>
+  <div>
+    <h3>方法区</h3>
+    {{methods}}
+    <template v-if="methods !== null">
+      <v-btn v-for="item of methods" :key="item.className" block text :color="item.fresh ? 'red' : 'black'">
+        <div class="button-text">{{item.className}}</div>
+      </v-btn>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -20,5 +28,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "common.scss";
 
 </style>

src/components/JThread.vue

@@ -1,5 +1,13 @@
 <template>
-  <div>线程栈</div>
+  <div>
+    <h3>线程栈</h3>
+    {{threadStack}}
+    <template v-if="threadStack !== null">
+      <v-btn v-for="item of threadStack" :key="item.methodName" block text :color="item.fresh ? 'red' : 'black'">
+        <div class="button-text">{{item.methodName}}</div>
+      </v-btn>
+    </template>
+  </div>
 </template>
 
 <script>

src/components/common.scss

@@ -0,0 +1,7 @@
+.button-text {
+    width: 100%;
+    text-transform: initial;
+    letter-spacing: 0;
+// font-family: ;
+    text-align: left;
+}