From df76b78735fe73376c7341b1e54a6669a7fa9bc4 Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Sun, 26 Sep 2021 11:05:00 +0800
Subject: [PATCH] fix

---
 src/App.vue                    |   9 ++-
 src/components/Banner.vue      |  26 +++----
 src/components/Breadcrumb.vue  |  26 +++++++
 src/components/Header.vue      |   2 +-
 src/components/Nav.vue         |   2 +-
 src/views/404.vue              |  14 ++--
 src/views/Address/index.vue    |  12 +--
 src/views/Block/detail.vue     | 131 +++++++++++++++++++++++----------
 src/views/Block/index.vue      |  14 ++--
 src/views/Other/analytical.vue |   8 +-
 src/views/Other/broadcast.vue  |   9 +--
 src/views/Trade/detail.vue     |  10 +--
 src/views/Trade/index.vue      |  13 ++--
 13 files changed, 163 insertions(+), 113 deletions(-)
 create mode 100644 src/components/Breadcrumb.vue

diff --git a/src/App.vue b/src/App.vue
index 69e39cb..50bb23c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import Footer from '@/components/Footer'
-import Header from '@/components/Header'
+import Footer from '@/components/Footer.vue'
+import Header from '@/components/Header.vue'
 import { ref, watch } from 'vue'
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
 
@@ -51,7 +51,8 @@ body {
   margin: 0 auto;
 }
 
-.breadcrumb {
-  padding: 32px 0;
+a {
+  text-decoration: none;
+  color: #2055ca;
 }
 </style>
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 7bf58a5..b104e08 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -54,9 +54,8 @@ const onSearch = () => {
   searchKey.value = searchKey.value.trim()
 
   if (searchKey.value === '') {
-    return ElMessage({
-      message: '请输入 地址/哈希/区块高度',
-      type: 'warning',
+    return ElMessage.warning({
+      message:'请输入 地址/哈希/区块高度',
       offset: 300
     })
   }
@@ -69,25 +68,22 @@ const onSearch = () => {
         if (res.error == null) {
           router.push({ name: 'BlockDetail', params: { hash: res.result.hash } })
         } else {
-          return ElMessage({
+          return ElMessage.error({
             message: res.error,
-            type: 'warning',
             offset: 300
           })
         }
       }).catch(err => {
-        return ElMessage({
+        return ElMessage.error({
           message: err.message,
-          type: 'warning',
           offset: 300
         })
       }).finally(() => {
         searchKey.value = ''
       })
     } else {
-      ElMessage({
+      return ElMessage.error({
         message: '输入的区块高度有误',
-        type: 'warning',
         offset: 300
       })
     }
@@ -103,18 +99,16 @@ const onSearch = () => {
           if (data.error == null) {
             router.push({ name: 'BlockDetail', params: { hash: data.result.head.hash } })
           } else {
-            return ElMessage({
+            return ElMessage.error({
               message: res.error,
-              type: 'warning',
               offset: 300
             })
           }
         })
       }
     }).catch(err => {
-      return ElMessage({
+      return ElMessage.error({
         message: err.message,
-        type: 'warning',
         offset: 300
       })
     }).finally(() => {
@@ -125,16 +119,14 @@ const onSearch = () => {
       if (res.error == null) {
         router.push({ name: 'Address', params: { address: searchKey.value } })
       } else {
-        return ElMessage({
+        return ElMessage.error({
           message: res.error,
-          type: 'warning',
           offset: 300
         })
       }
     }).catch(err => {
-      return ElMessage({
+      return ElMessage.error({
         message: err.message,
-        type: 'warning',
         offset: 300
       })
     }).finally(() => {
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
new file mode 100644
index 0000000..55b914a
--- /dev/null
+++ b/src/components/Breadcrumb.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="(item, index) in path" :key="index" :to="{ name: item.router }">
+        {{ item.name }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  path: {
+    type: Array
+  }
+})
+</script>
+
+<style scoped lang="less">
+.breadcrumb {
+  padding: 32px 16px;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 2efeca6..0429e0f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import Nav from './Nav'
+import Nav from './Nav.vue'
 
 const router = useRouter()
 </script>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index e9b060c..6c149b9 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -36,7 +36,7 @@ const navList = ref([
     route: 'Broadcast'
   }
 ])
-const linkTo = (name) => {
+const linkTo = (name: string) => {
   router.push({ name })
 }
 // endregion
diff --git a/src/views/404.vue b/src/views/404.vue
index 47b67ef..b362e2a 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -1,11 +1,15 @@
 <template>
-  404
+  <Breadcrumb :path="[{name: '页面不存在'}]"/>
+  <el-empty description="您所查找的页面不存在">
+    <el-button type="primary" @click="router.replace({name: 'Home'})">返回主页</el-button>
+  </el-empty>
 </template>
 
-<script>
-export default {
-  name: '404'
-}
+<script lang="ts" setup>
+import Breadcrumb from '@/components/Breadcrumb.vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 </script>
 
 <style scoped>
diff --git a/src/views/Address/index.vue b/src/views/Address/index.vue
index 59e79b2..474403b 100644
--- a/src/views/Address/index.vue
+++ b/src/views/Address/index.vue
@@ -1,16 +1,12 @@
 <template>
   <div class="container">
-    <div class="breadcrumb">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>地址信息</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
-
+    <Breadcrumb />
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import Breadcrumb from '@/components/Breadcrumb.vue'
+</script>
 
 <style scoped lang="less">
 
diff --git a/src/views/Block/detail.vue b/src/views/Block/detail.vue
index 13c43f2..eb22eb8 100644
--- a/src/views/Block/detail.vue
+++ b/src/views/Block/detail.vue
@@ -1,65 +1,93 @@
 <template>
   <div class="container">
 
-    <div class="breadcrumb">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ name: 'Block' }">全部区块</el-breadcrumb-item>
-        <el-breadcrumb-item>区块详情</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
+    <Breadcrumb :path="[{name: '全部区块', router: 'Block'}, {name: '区块详情'}]"/>
 
+    <div class="height">
+      <h2>区块高度 {{ info.height }}</h2>
+      <div>区块哈希 {{ info.hash }}
+        <el-button type="primary" round size="mini">复 制</el-button>
+      </div>
+    </div>
     <div class="info">
-      <div>{{ info.hash }}</div>
-      <div>默克尔根 {{ info.txHash }}</div>
       <div>{{ info.txCount }}</div>
       <div>{{ info.blockTime }}</div>
-      <div>{{ info.stateHash }}</div>
-      <div>{{ info.height }}</div>
-      <div>{{ info.parentHash }}</div>
-      <div>下个区块</div>
+      <div>默克尔根 {{ info.txHash }}</div>
+      <div>状态哈希 {{ info.stateHash }}</div>
+      <div>上个区块 {{ (info.height - 1) > 0 ? info.height - 1 : '无' }}</div>
+      <div>下个区块 {{ (info.height + 1) > maxHeight ? '无' : (info.height + 1) }}</div>
     </div>
 
     <div class="records">
-      <h2>交易记录</h2>
+      <div class="head">
+        <h2>交易记录</h2>
+        <el-pagination
+            background
+            v-model:currentPage="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="records.length"
+            @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+      </div>
 
       <el-table :data="records" stripe class="table">
         <template #empty>
           <el-empty description="暂无数据"></el-empty>
         </template>
 
-        <el-table-column prop="txHash" label="交易哈希"/>
-        <el-table-column prop="fromAddr" label="发送放"/>
-        <el-table-column prop="tx.to" label="区块哈希"/>
-        <el-table-column prop="amount" label="交易量" align="center"/>
-        <el-table-column prop="tx.feefmt" label="手续费" align="center"/>
-        <el-table-column prop="blockTime" label="上链时间" align="center"/>
-        <el-table-column prop="assets" label="上链时间" align="center"/>
+        <el-table-column label="交易哈希">
+          <template #default="scope">
+            <router-link :to="{name: 'TradeDetail', params: { hash: scope.row.txHash }}">{{
+                scope.row.txHash
+              }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送方">
+          <template #default="scope">
+            <router-link :to="{name: 'Address', params: { address: scope.row.fromAddr }}">{{
+                scope.row.fromAddr
+              }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column label="接收方">
+          <template #default="scope">
+            <router-link :to="{name: 'Address', params: { address: scope.row.tx.to }}">{{
+                scope.row.tx.to
+              }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column width="100" prop="amount" label="交易量" align="center"/>
+        <el-table-column width="100" prop="tx.feefmt" label="手续费" align="center"/>
+        <el-table-column width="180" prop="blockTime" label="上链时间" align="center"/>
+        <el-table-column width="100" prop="assets" label="交易资产" align="center"/>
       </el-table>
     </div>
-
-    <el-pagination
-        v-model:currentPage="currentPage4"
-        :page-sizes="[100, 200, 300, 400]"
-        :page-size="100"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-    >
-    </el-pagination>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { block } from '@/api'
-import { ref } from 'vue'
+import Breadcrumb from '@/components/Breadcrumb.vue'
+import { useStore } from '@/store'
+import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const router = useRouter()
 const route = useRoute()
+const store = useStore()
 
-const hash = route.params.hash
+const maxHeight = computed<number>(() => store.getters.maxHeight)
+
+const hash: string = route.params.hash as string
+
+const currentPage = ref<number>(1)
+const handleCurrentChange = (e: number) => {
+  console.log(e)
+}
 
 const info = ref({})
 const records = ref([])
@@ -76,7 +104,24 @@ block.getBlockOverview(hash).then(res => {
 </script>
 
 <style scoped lang="less">
+.height {
+  h2 {
+    font-size: 24px;
+    padding: 8px 0;
+  }
+
+  div {
+    color: #9ea2a9;
+    vertical-align: middle;
+
+    button {
+      margin-left: 8px;
+    }
+  }
+}
+
 .info {
+  margin-top: 16px;
   background: #FFFFFF;
   border: 1px solid rgba(235, 239, 241, 1);
 }
@@ -85,14 +130,20 @@ block.getBlockOverview(hash).then(res => {
   margin-top: 30px;
   border: 1px solid #ebeff1;
 
-  h2 {
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     height: 80px;
-    line-height: 80px;
-    padding-left: 25px;
-    font-size: 16px;
-    font-weight: 500;
-    background: #FFFFFF;
+    padding: 0 32px;
     border-bottom: 1px solid #ececec;
+    background: #FFFFFF;
+
+    h2 {
+      font-size: 16px;
+      font-weight: 500;
+    }
   }
+
 }
 </style>
diff --git a/src/views/Block/index.vue b/src/views/Block/index.vue
index d5fcfae..d70c023 100644
--- a/src/views/Block/index.vue
+++ b/src/views/Block/index.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="container">
-    <div class="breadcrumb">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>全部区块</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
+    <Breadcrumb :path="[{name: '全部区块'}]"/>
 
     <div class="page-header">
       <div class="title">
@@ -43,7 +38,7 @@
           <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{ scope.row.hash }}</router-link>
         </template>
       </el-table-column>
-      <el-table-column prop="txCount" label="数据量" width="180" align="center"/>
+      <el-table-column prop="txCount" label="数据量" width="100" align="center"/>
       <el-table-column prop="blockTime" label="上链时间" width="180" align="center"/>
     </el-table>
   </div>
@@ -51,6 +46,7 @@
 
 <script lang="ts" setup>
 import { block } from '@/api'
+import Breadcrumb from '@/components/Breadcrumb.vue'
 import { useStore } from '@/store'
 import { computed, onBeforeUnmount, ref } from 'vue'
 
@@ -97,8 +93,10 @@ const handleCurrentChange = (e) => {
 .page-header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   .title {
+    padding-left: 16px;
     font-size: 16px;
     font-weight: 500;
     color: #53657a;
@@ -106,7 +104,7 @@ const handleCurrentChange = (e) => {
 }
 
 .table {
-  margin: 16px 0;
+  margin: 16px 0 32px;
   box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
   border-radius: 2px;
 }
diff --git a/src/views/Other/analytical.vue b/src/views/Other/analytical.vue
index e7fc454..922ff5a 100644
--- a/src/views/Other/analytical.vue
+++ b/src/views/Other/analytical.vue
@@ -1,12 +1,7 @@
 <template>
   <div class="container">
 
-    <div class="breadcrumb">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>解析数据</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
+    <Breadcrumb :path="[{name: '解析数据'}]"/>
 
     <div>
       <h3>解析数据</h3>
@@ -23,6 +18,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import Breadcrumb from '@/components/Breadcrumb.vue'
 
 const data = ref<string>('')
 </script>
diff --git a/src/views/Other/broadcast.vue b/src/views/Other/broadcast.vue
index 3e3200c..04bf0f9 100644
--- a/src/views/Other/broadcast.vue
+++ b/src/views/Other/broadcast.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="container">
-
-    <div class="breadcrumb">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>广播数据</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
+    <Breadcrumb :path="[{name: '广播数据'}]"/>
 
     <div>
       <h3>广播数据</h3>
@@ -22,6 +16,7 @@
 </template>
 
 <script lang="ts" setup>
+import Breadcrumb from '@/components/Breadcrumb.vue'
 import { ref } from 'vue'
 
 const data = ref<string>('')
diff --git a/src/views/Trade/detail.vue b/src/views/Trade/detail.vue
index 6f4d7bf..67fd803 100644
--- a/src/views/Trade/detail.vue
+++ b/src/views/Trade/detail.vue
@@ -1,18 +1,12 @@
 <template>
   <div class="container">
+    <Breadcrumb :path="[{name: '全部数据', router: 'Block'}, {name: '数据详情'}]"/>
 
-    <div class="breadcrumb">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ name: 'Trade' }">全部交易</el-breadcrumb-item>
-        <el-breadcrumb-item>交易详情</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-
+import Breadcrumb from '@/components/Breadcrumb.vue'
 import { ref } from 'vue'
 
 const blocks = ref([])
diff --git a/src/views/Trade/index.vue b/src/views/Trade/index.vue
index 2a98123..97231ab 100644
--- a/src/views/Trade/index.vue
+++ b/src/views/Trade/index.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="container">
-
-    <div class="breadcrumb">
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>全部区块</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
+    <Breadcrumb :path="[{name: '全部数据'}]"/>
 
     <div class="page-header">
       <div class="title">
@@ -39,6 +33,7 @@
 </template>
 
 <script lang="ts" setup>
+import Breadcrumb from '@/components/Breadcrumb.vue'
 
 import { ref } from 'vue'
 
@@ -49,8 +44,10 @@ const blocks = ref([])
 .page-header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   .title {
+    padding-left: 16px;
     font-size: 16px;
     font-weight: 500;
     color: #53657a;
@@ -58,7 +55,7 @@ const blocks = ref([])
 }
 
 .table {
-  margin: 16px 0;
+  margin: 16px 0 32px;
   box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
   border-radius: 2px;
   font-size: 12px;