src/components/JHeap.vue

@@ -6,7 +6,7 @@
         <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 === displayNow.id" color="blue" right>mdi-search</v-icon>
+          <v-icon v-if="displayNow && item === displayNow" color="red" right>mdi-check</v-icon>
         </v-btn>
       </template>
     </div>

src/components/JMethod.vue

@@ -6,7 +6,7 @@
         <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 === displayNow" color="blue" right>mdi-search</v-icon>
+          <v-icon v-if="displayNow && item === displayNow" color="red" right>mdi-check</v-icon>
         </v-btn>
       </template>
     </div>

src/components/JMethodDetail.vue

@@ -1,11 +1,13 @@
 <template>
-  <div>
+  <div class="method-detail">
     <h3>方法区详情</h3>
     <div><strong>className: </strong>{{data.className}}</div>
     <div><strong>staticMembers: </strong>{{data.staticMembers}}</div>
-    <div><strong>rtcp: </strong>
+    <div><strong>runtime constant pool: </strong>
+      <div v-for="(line, index) of data.rtcp" :key="line + index">
+        <code>{{line}}</code>
+      </div>
     </div>
-    {{data}}
   </div>
 </template>
 
@@ -19,5 +21,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+@import "common.scss";
+code {
+  padding: 4px 0;
+}
+.method-detail {
+  & > div {
+    margin: 8px 0;
+  }
+}
 </style>

src/components/JThread.vue

@@ -6,7 +6,7 @@
         <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 === displayNow" color="blue" right>mdi-search</v-icon>
+          <v-icon v-if="displayNow && item === displayNow" color="red" right>mdi-check</v-icon>
         </v-btn>
       </template>
     </div>

src/components/common.scss

@@ -6,3 +6,10 @@
     text-align: left;
 }
 
+code::before {
+    content: '' !important;
+}
+code {
+    background: none !important;
+    box-shadow: none !important;
+}

src/views/JVVM.vue

@@ -73,7 +73,7 @@ export default {
   },
   data () {
     return {
-      detailComponent: 'j-thread-detail',
+      detailComponent: 'div',
       detail: {},
       showSource: false,
       currentJVMCode: [],
@@ -104,9 +104,13 @@ export default {
       this.showSource = !this.showSource
     },
     goNextFrame () {
+      this.detail = null
+      this.detailComponent = 'div'
       this.$emit('onNextFrame')
     },
     goPreFrame () {
+      this.detail = null
+      this.detailComponent = 'div'
       this.$emit('onPreFrame')
     }
   }
@@ -147,7 +151,7 @@ export default {
 
   .detail {
     grid-area: detail;
-    height: calc(100vh - 90px);
+    height: calc(100vh - 150px);
   }
 
   .other-info {
@@ -159,14 +163,14 @@ export default {
     display: grid;
     position: relative;
     grid-gap: 24px;
-    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-columns: 1.5fr 2fr 2fr;
     grid-template-areas: 'heap info detail' 'method info detail' 'thread info detail';
   }
 
   .actions {
     position: absolute;
     right: 12px;
-    bottom: 24px;
+    bottom: 16px;
   }
 }
 </style>