src/components/JHeap.vue

@@ -1,5 +1,14 @@
 <template>
-  <div>堆区</div>
+  <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'"
+             @click="handleClickDetail(item)">
+        <div class="button-text">{{item.id}}</div>
+        <v-icon v-if="item.id === itemNowId" color="blue" right>mdi-check</v-icon>
+      </v-btn>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -12,13 +21,17 @@ export default {
     }
   },
   methods: {
-    handleClickDetail() {
-      this.$emit('click-detail')
+    handleClickDetail ({ detail }) {
+      this.itemNowId = detail.id
+      this.$emit('click-detail', {
+        detail,
+        component: 'j-heap-detail'
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+@import "common.scss";
 </style>

src/components/JMethod.vue

@@ -1,5 +1,14 @@
 <template>
-  <div>方法区</div>
+  <div>
+    <h3>方法区</h3>
+    <template v-if="methods !== null">
+      <v-btn v-for="item of methods" :key="item.className" block text :color="item.fresh ? 'red' : 'black'"
+             @click="handleClickDetail(item)">
+        <div class="button-text">{{item.className}}</div>
+        <v-icon v-if="item.className === itemNowId" color="blue" right>mdi-check</v-icon>
+      </v-btn>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -11,14 +20,24 @@ export default {
       default: () => []
     }
   },
+  data () {
+    return {
+      itemNowId: null
+    }
+  },
   methods: {
-    handleClickDetail() {
-      this.$emit('click-detail')
+    handleClickDetail (detail) {
+      this.itemNowId = detail.className
+      this.$emit('click-detail', {
+        detail,
+        component: 'j-method-detail'
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import "common.scss";
 
 </style>

src/components/JThread.vue

@@ -1,5 +1,14 @@
 <template>
-  <div>线程栈</div>
+  <div>
+    <h3>线程栈</h3>
+    <template v-if="threadStack !== null">
+      <v-btn v-for="item of threadStack" :key="item.methodName" block text :color="item.fresh ? 'red' : 'black'"
+             @click="handleClickDetail(item)">
+        <div class="button-text">{{item.methodName}}</div>
+        <v-icon v-if="item.methodName === itemNowId" color="blue" right>mdi-check</v-icon>
+      </v-btn>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -11,14 +20,24 @@ export default {
       default: () => []
     }
   },
+  data () {
+    return {
+      itemNowId: null
+    }
+  },
   methods: {
-    handleClickDetail() {
-      this.$emit('click-detail')
+    handleClickDetail (detail) {
+      this.itemNowId = detail.methodName
+      this.$emit('click-detail', {
+        detail,
+        component: 'j-thread-detail'
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import "common.scss";
 
 </style>

src/components/JVMCode.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <h3 class="pb-2">当前帧字节码</h3>
-    <pre v-for="(line, index) of code" :key="index + line">
+    <div v-for="(line, index) of code" :key="index + line">
       <code :style="{background:nextActiveLine === line? 'rgba(255, 0, 0, 0.15)':'inherit'}">{{line}}</code>
-    </pre>
+    </div>
   </div>
 </template>
 

src/components/common.scss

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

src/views/JVVM.vue

@@ -8,7 +8,6 @@
               @click-detail="handleCheckDetail($event, 'j-thread-detail')"></j-thread>
     <component class="detail" :is="detailComponent" :data="detail"></component>
     <div class="other-info">
-      info
       <source-code v-if="showSource" :source-code="currentCodeData" />
       <j-v-m-code v-else :code="currentJVMCode" :next-active-line="nextActiveCode" />
     </div>
@@ -156,8 +155,8 @@ export default {
     display: grid;
     position: relative;
     grid-gap: 24px;
-    grid-template-columns: 1.2fr 3fr 1fr;
-    grid-template-areas: 'heap detail info' 'method detail info' 'thread detail info';
+    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-areas: 'heap info detail' 'method info detail' 'thread info detail';
   }
 
   .actions {