Merge branch 'master' of http://47.100.18.120:3000/ChenYangFan/jvvm-front-end

src/components/JVMCode.vue

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

src/views/JVVM.vue

@@ -8,11 +8,11 @@
               @click-detail="handleCheckDetail($event, 'j-thread-detail')"></j-thread>
     <component class="detail" :is="detailComponent" :data="detail"></component>
     <div class="other-info">
-      info
-      <source-code :source-code="currentCodeData" />
+      <source-code v-if="showSource" :source-code="currentCodeData" />
+      <j-v-m-code v-else :code="currentJVMCode" :next-active-line="nextActiveCode" />
     </div>
     <div class="actions">
-      <v-btn class="mx-2" dark small color="#5a6a7a" @click="()=>{}">
+      <v-btn class="mx-2" dark small color="#5a6a7a" @click="toggleSourceCode">
         {{showSource?'查看字节码':'查看源码'}}
       </v-btn>
       <v-btn class="mx-2" fab dark small color="#5a6a7a" @click="goPreFrame">
@@ -34,10 +34,12 @@ import JMethodDetail from '@/components/JMethodDetail'
 import JThreadDetail from '@/components/JThreadDetail'
 import JHeapDetail from '@/components/JHeapDetail'
 import SourceCode from '@/components/SourceCode'
+import JVMCode from '@/components/JVMCode'
 
 export default {
   name: 'JVVM',
   components: {
+    JVMCode,
     SourceCode,
     JThread,
     JThreadDetail,
@@ -73,7 +75,24 @@ export default {
     return {
       detailComponent: 'j-thread-detail',
       detail: {},
-      showSource: false
+      showSource: false,
+      currentJVMCode: [],
+      nextActiveCode: ''
+    }
+  },
+  watch: {
+    state({ optionalNextFrame, currentFrame, nextInstruction }) {
+      if (optionalNextFrame &&
+        optionalNextFrame.code &&
+        optionalNextFrame.code.length > 0
+      ) {
+        const code = optionalNextFrame.code
+        this.currentJVMCode = code
+        this.nextActiveCode = code[0]
+      } else if (currentFrame && currentFrame.code) {
+        this.currentJVMCode = currentFrame.code
+        this.nextActiveCode = nextInstruction
+      }
     }
   },
   methods: {
@@ -81,6 +100,9 @@ export default {
       this.detail = detail
       this.detailComponent = component
     },
+    toggleSourceCode() {
+      this.showSource = !this.showSource
+    },
     goNextFrame () {
       this.$emit('onNextFrame')
     },
@@ -133,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 {