给 Node 页面添加了 本节点打包的区块列表模板。

给 各页面都读入了页头的数据，如IP地址，邻居数量。

src/views/Chain.vue

@@ -89,8 +89,10 @@ import Vue from 'vue'
 import store from '../store'
 import VueSocketio from 'vue-socket.io'
 import io from 'socket.io-client'
+
 const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('chain')
-Vue.use(VueSocketio, io('http://localhost:6842'), store)
+
+Vue.use(VueSocketio, io(`http://${window.location.hostname}:6842/api/`), store) // todo: luk: 整个控制台应当依赖于同一个全局的节点地址变量。
 
 export default {
   name: 'Chain',
@@ -114,9 +116,6 @@ export default {
       this.addNewBlock(msg)
     },
   },
-  mounted() {
-    this.queryBlockList()
-  },
 
   methods: {
     ...mapActions([
@@ -130,6 +129,11 @@ export default {
       'addDesserts',
     ]),
   },
+
+  mounted() {
+    this.queryBlockList()
+  },
+
 }
 </script>
 
@@ -165,7 +169,7 @@ export default {
       margin: 0 20px;
 
       .search-input {
-        width: 400px;
+        width: 80%;
       }
     }
 

src/views/Network.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="network-page">
     <div class="card-content">
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>当前邻居节点数 <br>{{ peerNumber }}</div>
+      </div>
       <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
-      <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
-      <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>当前全网节点数 <br>{{ nodeNumber }}</div>
+      </div>
     </div>
 
     <div class="table-content elevation-1">
@@ -38,7 +38,7 @@
             <td>{{ props.item.index }}</td>
             <td>{{ props.item.address }}</td>
             <td>{{ props.item.status }}</td>
-            <td>{{ props.item.neighbour }}</td>
+            <td>{{ props.item.peerOwnerAddress }}</td>
           </template>
           <template slot="no-results">
             {{ $t('network.tableNone') }}
@@ -66,17 +66,27 @@ export default {
       'pageEntity',
       'fetching',
       'filter',
+      'peerNumber',
+      'nodeNumber',
     ]),
     ...mapGetters([]),
   },
 
   methods: {
     ...mapActions([
+      'updateNetInfo',
     ]),
     ...mapMutations([
       'inputFilter',
+      'updatePeerNumber',
+      'updateNodeNumber',
     ]),
   },
+
+  mounted() {
+    this.updateNetInfo()
+  },
+
 }
 </script>
 
@@ -112,7 +122,7 @@ export default {
       margin: 0 20px;
 
       .search-input {
-        width: 400px;
+        width: 80%;
       }
     }
 

src/views/Node.vue

@@ -1,16 +1,92 @@
 <template>
   <div class="node-page">
     <div class="card-content">
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>主机地址 <br> {{ ipAddress }}</div>
+      </div>
       <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>在线用户 <br> </div>
+      </div>
     </div>
+
+    <div class="table-content elevation-1">
+      <div class="panel-header">
+        <h3>{{ $t('node.tableHeader') }}</h3>
+        <div class="search-input">
+          <v-text-field
+            :placeholder="$t('node.searchHolder')"
+            :value="filter"
+            @input="inputFilter"
+            append-icon="search" />
+        </div>
+      </div>
+
+      <template>
+        <v-data-table
+          :headers="headers"
+          :items="desserts"
+          :total-items="100"
+          :rows-per-page-items="pageEntity"
+          :loading="fetching"
+          class="panel-content elevation-1"
+        >
+          <template slot="headerCell" slot-scope="props">
+            <span>{{ $t(props.header.text) }}</span>
+          </template>
+          <template slot="items" slot-scope="props">
+            <td>{{ props.item.height }}</td>
+            <td>{{ props.item.timestamp }}</td>
+            <td>{{ props.item.type }}</td>
+            <td>{{ props.item.hash }}</td>
+          </template>
+          <template slot="no-results">
+            {{ $t('node.tableNone') }}
+          </template>
+        </v-data-table>
+      </template>
+    </div>
+
   </div>
 </template>
 
 <script>
+import {
+  createNamespacedHelpers,
+} from 'vuex'
+
+const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('node')
+
 export default {
   name: 'Node',
+
+  computed: {
+    ...mapState([
+      'headers',
+      'desserts',
+      'pageEntity',
+      'fetching',
+      'filter',
+      'modal',
+      'ipAddress',
+    ]),
+    ...mapGetters([]),
+  },
+
+  methods: {
+    ...mapActions([
+      'updateNodeInfo',
+    ]),
+    ...mapMutations([
+      'inputFilter',
+      'updateIpAddress',
+    ]),
+  },
+
+  mounted() {
+    this.updateNodeInfo()
+  },
+
 }
 </script>
 
@@ -23,7 +99,7 @@ export default {
 
     .app-card {
       flex: 1;
-      height: 200px;
+      height: 100px;
       background-color: white;
     }
 
@@ -32,5 +108,29 @@ export default {
     }
 
   }
+
+  .table-content {
+    flex: 1;
+    margin: 0 20px 20px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+
+    .panel-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 20px;
+
+      .search-input {
+        width: 80%;
+      }
+    }
+
+    .panel-content {
+      margin: 0 20px 20px;
+    }
+  }
+
 }
 </style>

src/views/Owner.vue

@@ -2,11 +2,12 @@
   <div class="owner-page">
     <div class="card-content">
       <div class="app-card elevation-1">
-        <div>主人地址为 {{ address }}</div>
-        <div>余额为 {{ balance }}</div>
+        <div>主人地址 <br> {{ address }}</div>
       </div>
       <div class="app-sep"></div>
-      <div class="app-card elevation-1"></div>
+      <div class="app-card elevation-1">
+        <div>余额 <br> {{ balance }}</div>
+      </div>
     </div>
     <div class="table-content elevation-1">
       <div class="panel-header">
@@ -74,18 +75,21 @@ export default {
     ...mapGetters([]),
   },
 
-  mounted() {
-    this.queryAccount()
-  },
-
   methods: {
     ...mapActions([
-      'queryAccount',
+      'updateOwnerInfo',
     ]),
     ...mapMutations([
       'inputFilter',
+      'updateBalance', // luk: 发现不写这句也没影响。但还是写吧，万一有用呢。
+      'updateAddress',
     ]),
   },
+
+  mounted() {
+    this.updateOwnerInfo()
+  },
+
 }
 </script>
 
@@ -104,7 +108,7 @@ export default {
 
     .app-card {
       flex: 1;
-      height: 200px;
+      height: 100px;
       background-color: white;
     }
 
@@ -128,7 +132,7 @@ export default {
       margin: 0 20px;
 
       .search-input {
-        width: 400px;
+        width: 80%;
       }
     }