布局

src/components/JHeap.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>堆区</div>
+</template>
+
+<script>
+export default {
+  name: 'JHeap'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/JHeapDetail.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>堆区详情</div>
+</template>
+
+<script>
+export default {
+  name: 'JHeapDetail',
+  prop: {
+    data: Object
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/JMethod.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>方法区</div>
+</template>
+
+<script>
+export default {
+  name: 'JMethod'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/JMethodDetail.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>方法区详情</div>
+</template>
+
+<script>
+export default {
+  name: 'JMethodDetail',
+  prop: {
+    data: Object
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/JThread.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>线程栈</div>
+</template>
+
+<script>
+export default {
+  name: 'JThread',
+  prop: {
+    data: Object,
+    required: true
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/JThreadDetail.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>线程栈详情</div>
+</template>
+
+<script>
+export default {
+  name: 'JThreadDetail',
+  prop: {
+    data: Object
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/JVVM.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="jvvm">
-    <source-code class="source-code"></source-code>
-    <j-v-m-code v-if="state.currentFrame" class="j-v-m-code" :code="state.currentFrame.code"></j-v-m-code>
-    <j-frame class="current-frame" name="current frame" :frame="state.currentFrame"></j-frame>
-    <j-frame class="optional-frame" name="optional frame" :frame="state.optionalNextFrame"></j-frame>
-    <memory v-if="state.memory" class="memory">
-      <memory-object :key="name" :object="value" v-for="(value, name) in state.memory.objects" class="object"></memory-object>
-    </memory>
+    <j-heap class="heap"></j-heap>
+    <j-method class="method"></j-method>
+    <j-thread class="thread"></j-thread>
+    <component class="detail" :is="detailComponent"></component>
+    <div class="other-info">
+      info
+    </div>
     <div class="actions">
+      <v-btn class="mx-2" dark small color="#5a6a7a" @click="null">
+        查看源码
+      </v-btn>
       <v-btn class="mx-2" fab dark small color="#5a6a7a" @click="goPreFrame">
         <v-icon dark>mdi-arrow-left</v-icon>
       </v-btn>
@@ -19,24 +22,31 @@
 </template>
 
 <script>
-import JVMCode from '@/components/JVMCode'
-import SourceCode from '@/components/SourceCode'
-import JFrame from '@/components/JFrame'
-import Memory from '@/components/Memory'
-import MemoryObject from '@/components/MemoryObject'
+
+import JHeap from '@/components/JHeap'
+import JMethod from '@/components/JMethod'
+import JThread from '@/components/JThread'
+import JMethodDetail from '@/components/JMethodDetail'
+import JThreadDetail from '@/components/JThreadDetail'
+import JHeapDetail from '@/components/JHeapDetail'
 
 export default {
   name: 'JVVM',
   components: {
-    MemoryObject,
-    Memory,
-    JFrame,
-    SourceCode,
-    JVMCode
+    JThread,
+    JThreadDetail,
+    JMethod,
+    JMethodDetail,
+    JHeap,
+    JHeapDetail
   },
   props: {
     state: {
-      default: () => ({ currentFrame: { code: [] }, optionalNextFrame: {}, memory: { objects: [] } }),
+      default: () => ({
+        currentFrame: { code: [] },
+        optionalNextFrame: {},
+        memory: { objects: [] }
+      }),
       type: Object
     },
     currentStateIndex: {
@@ -48,6 +58,11 @@ export default {
       type: Number
     }
   },
+  data () {
+    return {
+      detailComponent: 'j-thread-detail'
+    }
+  },
   methods: {
     goNextFrame () {
       this.$emit('onNextFrame')
@@ -72,47 +87,42 @@ export default {
 }
 
 @media (min-width: 720px) {
-  .source-code {
-    grid-area: source;
-    max-height: calc(100vh - 90px);
-    overflow: auto;
+  .heap {
+    grid-area: heap;
+    height: calc(33vh - 44px);
   }
 
-  .j-v-m-code {
-    grid-area: jvm-code;
-    max-height: calc(100vh - 90px);
-    overflow: auto;
+  .thread {
+    grid-area: thread;
+    height: calc(33vh - 44px);
   }
 
-  .current-frame {
-    grid-area: current-frame;
-    min-height: calc(50vh - 70px);
-    overflow: auto;
+  .method {
+    grid-area: method;
+    height: calc(33vh - 44px);
   }
 
-  .optional-frame {
-    grid-area: optional-frame;
-    min-height: calc(50vh - 70px);
-    overflow: auto;
+  .detail {
+    grid-area: detail;
+    height: calc(100vh - 90px);
   }
 
-  .memory {
-    grid-area: memory;
-    max-height: calc(50vh - 44px);
-    overflow: auto;
+  .other-info {
+    grid-area: info;
+    height: calc(100vh - 90px);
   }
 
   .jvvm {
     display: grid;
     position: relative;
     grid-gap: 24px;
-    grid-template-columns: 1.3fr 1.3fr 1fr 1fr;
-    grid-template-areas: 'source jvm-code current-frame optional-frame' 'source jvm-code memory memory' 'source jvm-code memory memory';
+    grid-template-columns: 1.2fr 3fr 1fr;
+    grid-template-areas: 'heap detail info' 'method detail info' 'thread detail info';
   }
 
   .actions {
     position: absolute;
-    left: 12px;
+    right: 12px;
     bottom: 24px;
   }
 }