Tables

src/i18n/en.js

@@ -12,4 +12,35 @@ export default {
     titleNetwork: 'Network',
     titleMarket: 'Market',
   },
+  owner: {
+    tableHeader: '我的交易',
+    searchHolder: '请输入该输入的',
+    thId: '交易 ID',
+    thType: '类型',
+    thSender: '发送者',
+    thReceiver: '接收者',
+    thDate: '日期',
+    thAmount: '金额',
+    thFee: '手续费',
+    thRemark: '备注',
+    tableNone: '暂无数据',
+  },
+  network: {
+    tableHeader: '当前邻居',
+    searchHolder: '请输入该输入的',
+    thIndex: '序号',
+    thAddress: '连接地址',
+    thStatus: '连接状态',
+    thNeighbour: '邻居主人的账户地址',
+    tableNone: '暂无数据',
+  },
+  chain: {
+    tableHeader: '区块列表',
+    searchHolder: '请输入该输入的',
+    thHeight: '区块高度',
+    thTimestamp: '时间戳',
+    thType: '区块类型',
+    thId: '区块 ID',
+    tableNone: '暂无数据',
+  },
 }

src/i18n/zh-CN.js

@@ -7,9 +7,40 @@ export default {
   },
   home: {
     titleOwner: '个人中心',
-    titleChain: '区块/交易',
+    titleChain: '链内数据',
     titleNode: '当前节点',
-    titleNetwork: '网络链接',
+    titleNetwork: '对等网络',
     titleMarket: '应用商城',
   },
+  owner: {
+    tableHeader: '我的交易',
+    searchHolder: '请输入该输入的',
+    thId: '交易 ID',
+    thType: '类型',
+    thSender: '发送者',
+    thReceiver: '接收者',
+    thDate: '日期',
+    thAmount: '金额',
+    thFee: '手续费',
+    thRemark: '备注',
+    tableNone: '暂无数据',
+  },
+  network: {
+    tableHeader: '当前邻居',
+    searchHolder: '请输入该输入的',
+    thIndex: '序号',
+    thAddress: '连接地址',
+    thStatus: '连接状态',
+    thNeighbour: '邻居主人的账户地址',
+    tableNone: '暂无数据',
+  },
+  chain: {
+    tableHeader: '区块列表',
+    searchHolder: '请输入该输入的',
+    thHeight: '区块高度',
+    thTimestamp: '时间戳',
+    thType: '区块类型',
+    thId: '区块 ID',
+    tableNone: '暂无数据',
+  },
 }

src/services/ui.js

@@ -5,9 +5,14 @@ import {
   VBtn,
   VMenu,
   VIcon,
+  VDialog,
   VSelect,
   VTextField,
+  VPagination,
 } from 'vuetify/es5/components'
+import { VSpacer } from 'vuetify/es5/components/VGrid'
+import { VDataTable } from 'vuetify/es5/components/VDataTable'
+import { VCard, VCardTitle, VCardActions } from 'vuetify/es5/components/VCard'
 import { Ripple } from 'vuetify/es5/directives'
 import 'vuetify/dist/vuetify.min.css'
 import 'material-design-icons-iconfont/dist/material-design-icons.css'
@@ -22,9 +27,16 @@ Vue.use(Vuetify, {
 
 Vue.component('VApp', VApp)
 Vue.component('VBtn', VBtn)
+Vue.component('VCard', VCard)
 Vue.component('VMenu', VMenu)
 Vue.component('VIcon', VIcon)
+Vue.component('VDialog', VDialog)
+Vue.component('VSpacer', VSpacer)
 Vue.component('VSelect', VSelect)
 Vue.component('VTextField', VTextField)
+Vue.component('VDataTable', VDataTable)
+Vue.component('VPagination', VPagination)
+Vue.component('VCardTitle', VCardTitle)
+Vue.component('VCardActions', VCardActions)
 
 Vue.directive('Ripple', Ripple)

src/store/modules/chain.js

@@ -1,8 +1,42 @@
 export default {
   namespaced: true,
+
   state: {
+    pageEntity: [5, 10, 25],
+    headers: [
+      { text: 'chain.thHeight', value: 'height', align: 'center' },
+      { text: 'chain.thTimestamp', value: 'timestamp', align: 'center' },
+      { text: 'chain.thType', value: 'type', align: 'center' },
+      { text: 'chain.thId', value: 'id', align: 'center' },
+    ],
+    desserts: [
+      {
+        height: '1',
+        timestamp: '2011-11-20',
+        type: '0',
+        id: 'ajlk;gaklewklgjqwejj',
       },
-  mutations: {},
+    ],
+    fetching: false,
+    filter: '',
+    modal: false,
+  },
+
+  mutations: {
+    inputFilter(state, filter) {
+      state.filter = filter
+    },
+
+    showModal(state) {
+      state.modal = true
+    },
+
+    hideModal(state) {
+      state.modal = false
+    },
+  },
+
   actions: {},
+
   getters: {},
 }

src/store/modules/network.js

@@ -1,7 +1,33 @@
 export default {
   namespaced: true,
-  state: {},
+
-  mutations: {},
+  state: {
+    pageEntity: [5, 10, 25],
+    headers: [
+      { text: 'network.thIndex', value: 'index', align: 'center' },
+      { text: 'network.thAddress', value: 'address', align: 'center' },
+      { text: 'network.thStatus', value: 'status', align: 'center' },
+      { text: 'network.thNeighbour', value: 'neighbour', align: 'center' },
+    ],
+    desserts: [
+      {
+        index: '1',
+        address: '192.168.0.1',
+        status: '0',
+        neighbour: 'ajlk;gaklewklgjqwejj',
+      },
+    ],
+    fetching: false,
+    filter: '',
+  },
+
+  mutations: {
+    inputFilter(state, filter) {
+      state.filter = filter
+    },
+  },
+
   actions: {},
+
   getters: {},
 }

src/store/modules/owner.js

@@ -1,7 +1,42 @@
 export default {
   namespaced: true,
-  state: {},
+
-  mutations: {},
+  state: {
-  actions: {},
+    pageEntity: [5, 10, 25],
+    headers: [
+      { text: 'owner.thId', value: 'id', align: 'center' },
+      { text: 'owner.thType', value: 'type', align: 'center' },
+      { text: 'owner.thSender', value: 'sender', align: 'center' },
+      { text: 'owner.thReceiver', value: 'receiver', align: 'center' },
+      { text: 'owner.thDate', value: 'date', align: 'center' },
+      { text: 'owner.thAmount', value: 'amount', align: 'center' },
+      { text: 'owner.thFee', value: 'fee', align: 'center' },
+      { text: 'owner.thRemark', value: 'remark', align: 'center' },
+    ],
+    desserts: [
+      // {
+      //   id: 'xxxxx',
+      //   type: 'zzz',
+      //   sender: 'xxx',
+      //   receiver: 'dddd',
+      //   date: '333',
+      //   amount: '12',
+      //   fee: 32,
+      //   remark: 'xxxx',
+      // },
+    ],
+    fetching: false,
+    filter: '',
+  },
+
+  mutations: {
+    inputFilter(state, filter) {
+      state.filter = filter
+    },
+  },
+
+  actions: {
+  },
+
   getters: {},
 }

src/store/rootStore.js

@@ -26,11 +26,6 @@ const sideMenus = [
     icon: 'group',
     path: '/owner',
   },
-  {
-    title: 'home.titleChain',
-    icon: 'public',
-    path: '/chain',
-  },
   {
     title: 'home.titleNode',
     icon: 'all_inclusive',
@@ -38,9 +33,14 @@ const sideMenus = [
   },
   {
     title: 'home.titleNetwork',
-    icon: 'language',
+    icon: 'public',
     path: '/network',
   },
+  {
+    title: 'home.titleChain',
+    icon: 'timeline',
+    path: '/chain',
+  },
   {
     title: 'home.titleMarket',
     icon: 'apps',

src/styles/_share.scss

@@ -7,6 +7,11 @@ $accentColor: #FFCDD2;
   height: 100%;
 }
 
+@mixin app-normal-card {
+  @extend .elevation-1;
+  background-color: white;
+}
+
 .v-icon {
   user-select: none;
 }

src/views/Chain.vue

@@ -1,16 +1,158 @@
 <template>
   <div class="chain-page">
-    Chain
+    <div class="card-content">
+      <div @click="showModal" 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>
+
+    <div class="table-content elevation-1">
+      <div class="panel-header">
+        <h3>{{ $t('chain.tableHeader') }}</h3>
+        <div class="search-input">
+          <v-text-field
+            :placeholder="$t('chain.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.id }}</td>
+          </template>
+          <template slot="no-results">
+            {{ $t('chain.tableNone') }}
+          </template>
+        </v-data-table>
+      </template>
+    </div>
+
+    <v-dialog v-model="modal" persistent>
+      <v-card class="app-modal">
+        <v-card-title>事务列表</v-card-title>
+
+        <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.id }}</td>
+          </template>
+          <template slot="no-results">
+            {{ $t('chain.tableNone') }}
+          </template>
+        </v-data-table>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary darken-1" flat @click.native="hideModal">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
+import {
+  createNamespacedHelpers,
+} from 'vuex'
+
+const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('chain')
+
 export default {
   name: 'Chain',
+
+  computed: {
+    ...mapState([
+      'headers',
+      'desserts',
+      'pageEntity',
+      'fetching',
+      'filter',
+      'modal',
+    ]),
+    ...mapGetters([]),
+  },
+
+  methods: {
+    ...mapActions([
+    ]),
+    ...mapMutations([
+      'inputFilter',
+      'showModal',
+      'hideModal',
+    ]),
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .chain-page {
+
+  .card-content {
+    display: flex;
+    padding: 20px;
+
+    .app-card {
+      flex: 1;
+      height: 100px;
+      background-color: white;
+    }
+
+    .app-sep {
+      width: 20px;
+    }
+  }
+
+  .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: 400px;
+      }
+    }
+
+    .panel-content {
+      margin: 0 20px 20px;
+    }
+  }
 }
 </style>

src/views/Home.vue

@@ -41,7 +41,9 @@
         <v-icon @click="logout">power_settings_new</v-icon>
       </div>
 
+      <transition name="fade">
         <router-view class="app-container" />
+      </transition>
     </div>
   </div>
 </template>
@@ -251,5 +253,18 @@ export default {
       flex-grow: 1;
     }
   }
+
+  .fade-enter-active, .fade-leave-active {
+    transition-property: opacity;
+    transition-duration: .25s;
+  }
+
+  .fade-enter-active {
+    transition-delay: .4s;
+  }
+
+  .fade-enter, .fade-leave-active {
+    opacity: 0
+  }
 }
 </style>

src/views/Login.vue

@@ -13,6 +13,7 @@
       :value="mnemonic"
       :loading="signing"
       @input="updateMnemonic"
+      @keyup.13="login"
       :label="$t('login.inputLabel')" />
 
     <v-select

src/views/Network.vue

@@ -1,16 +1,124 @@
 <template>
   <div class="network-page">
-    Network
+    <div class="card-content">
+      <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-sep"></div>
+      <div class="app-card elevation-1"></div>
+    </div>
+
+    <div class="table-content elevation-1">
+      <div class="panel-header">
+        <h3>{{ $t('network.tableHeader') }}</h3>
+        <div class="search-input">
+          <v-text-field
+            :placeholder="$t('network.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.index }}</td>
+            <td>{{ props.item.address }}</td>
+            <td>{{ props.item.status }}</td>
+            <td>{{ props.item.neighbour }}</td>
+          </template>
+          <template slot="no-results">
+            {{ $t('network.tableNone') }}
+          </template>
+        </v-data-table>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
+import {
+  createNamespacedHelpers,
+} from 'vuex'
+
+const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('network')
+
 export default {
   name: 'Network',
+
+  computed: {
+    ...mapState([
+      'headers',
+      'desserts',
+      'pageEntity',
+      'fetching',
+      'filter',
+    ]),
+    ...mapGetters([]),
+  },
+
+  methods: {
+    ...mapActions([
+    ]),
+    ...mapMutations([
+      'inputFilter',
+    ]),
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .network-page {
+
+  .card-content {
+    display: flex;
+    padding: 20px;
+
+    .app-card {
+      flex: 1;
+      height: 100px;
+      background-color: white;
+    }
+
+    .app-sep {
+      width: 20px;
+    }
+  }
+
+  .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: 400px;
+      }
+    }
+
+    .panel-content {
+      margin: 0 20px 20px;
+    }
+  }
 }
 </style>

src/views/Node.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="node-page">
-    Node
+    <div class="card-content">
+      <div class="app-card elevation-1"></div>
+      <div class="app-sep"></div>
+      <div class="app-card elevation-1"></div>
+    </div>
   </div>
 </template>
 
@@ -12,5 +16,21 @@ export default {
 
 <style scoped lang="scss">
 .node-page {
+
+  .card-content {
+    display: flex;
+    padding: 20px;
+
+    .app-card {
+      flex: 1;
+      height: 200px;
+      background-color: white;
+    }
+
+    .app-sep {
+      width: 20px;
+    }
+
+  }
 }
 </style>

src/views/Owner.vue

@@ -1,16 +1,131 @@
 <template>
   <div class="owner-page">
-    Owner
+    <div class="card-content">
+      <div class="app-card elevation-1"></div>
+      <div class="app-sep"></div>
+      <div class="app-card elevation-1"></div>
+    </div>
+    <div class="table-content elevation-1">
+      <div class="panel-header">
+        <h3>{{ $t('owner.tableHeader') }}</h3>
+        <div class="search-input">
+          <v-text-field
+            :placeholder="$t('owner.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.id }}</td>
+            <td>{{ props.item.type }}</td>
+            <td>{{ props.item.sender }}</td>
+            <td>{{ props.item.receiver }}</td>
+            <td>{{ props.item.date }}</td>
+            <td>{{ props.item.amount }}</td>
+            <td>{{ props.item.fee }}</td>
+            <td>{{ props.item.remark }}</td>
+          </template>
+          <template slot="no-results">
+            {{ $t('owner.tableNone') }}
+          </template>
+        </v-data-table>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
+import {
+  createNamespacedHelpers,
+} from 'vuex'
+
+const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('owner')
+
 export default {
   name: 'Owner',
+
+  computed: {
+    ...mapState([
+      'headers',
+      'desserts',
+      'pageEntity',
+      'fetching',
+      'filter',
+    ]),
+    ...mapGetters([]),
+  },
+
+  methods: {
+    ...mapActions([
+    ]),
+    ...mapMutations([
+      'inputFilter',
+    ]),
+  },
 }
 </script>
 
 <style scoped lang="scss">
+@import "../styles/share";
+
 .owner-page {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+
+  .card-content {
+    display: flex;
+    padding: 20px;
+
+    .app-card {
+      flex: 1;
+      height: 200px;
+      background-color: white;
+    }
+
+    .app-sep {
+      width: 20px;
+    }
+
+  }
+
+  .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: 400px;
+      }
+    }
+
+    .panel-content {
+      margin: 0 20px 20px;
+    }
+  }
+
 }
 </style>