debugger:elementui

debugger/src/components/Context.vue

@@ -1,25 +1,31 @@
 <template>
-  <div class="hello">
-    <h1>Context</h1>
-    <p>
-      Dev tools for doric.
-      <br />
-      <a href="https://github.com/penfeizhou/doric" target="_blank" rel="noopener">Doric</a>.
-    </p>
-    <h3>Running Contexts</h3>
+  <div class="context">
+    <el-page-header @back="goBack" v-bind:content="'Context: '+$route.params.id"></el-page-header>
+    <el-container>
+      <el-aside>
+        <h3>Context info</h3>
+        <p>ID:{{$route.params.id}}</p>
+        <p>Source:{{$route.params.id}}</p>
+      </el-aside>
+    </el-container>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Debug"
+  name: "Context",
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h3 {
-  margin: 40px 0 0;
+  /* margin: 40px 0 0; */
 }
 ul {
   list-style-type: none;

debugger/src/components/Home.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="hello">
+  <div class="home">
     <img alt="Vue logo" width="200px" src="../assets/doric.svg" />
     <h1>{{ title }}</h1>
     <p>
       Dev tools for doric.
       <br />
-      <a href="https://github.com/penfeizhou/doric" target="_blank" rel="noopener">Doric</a>.
+      <el-link href="https://github.com/penfeizhou/doric" type="primary">Doric</el-link>
     </p>
     <h3>Running Contexts</h3>
     <ul>
       <li v-for="item in runningContexts" :key="item.id">
-        <!-- <a v-bind:href="'#context/'+item.source">source: {{item.source}} id: {{item.id}}</a> -->
-        <router-link v-bind:to="'/context/' + item.id">{{item.source}}</router-link>
+        <el-link type="success" v-bind:href="'#/context/' + item.id">{{item.source}}</el-link>
       </li>
     </ul>
   </div>