From bf93dbe59a0144aa12937c6c0df977cceeab2e5d Mon Sep 17 00:00:00 2001
From: Jason <chenjxlg@163.com>
Date: Mon, 27 Sep 2021 17:33:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  50 +++++++++++++++++++--
 src/assets/dots/blue.png       | Bin 0 -> 428 bytes
 src/assets/dots/green.png      | Bin 0 -> 469 bytes
 src/assets/dots/pink.png       | Bin 0 -> 386 bytes
 src/assets/dots/red.png        | Bin 0 -> 463 bytes
 src/components/Breadcrumb.vue  |  14 +++++-
 src/components/Pagination.vue  |   2 +-
 src/views/Address/index.vue    |  78 ++++++++++++++++++++++++++-------
 src/views/Block/detail.vue     |  54 +++++++++++++++++------
 src/views/Block/index.vue      |  10 ++---
 src/views/Other/analytical.vue |  35 ++++++++++-----
 src/views/Other/broadcast.vue  |  26 +++++++++--
 12 files changed, 213 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/dots/blue.png
 create mode 100644 src/assets/dots/green.png
 create mode 100644 src/assets/dots/pink.png
 create mode 100644 src/assets/dots/red.png

diff --git a/src/App.vue b/src/App.vue
index d2e3a1f..bab24dd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,15 +57,59 @@ a {
 
 .inputTxt {
   height: 250px;
-  vertical-align: middle;
   overflow-y: auto;
   width: 100%;
-  line-height: 14px;
   word-break: break-all;
-  padding: 0px 11px;
+  padding: 16px;
   background: #FFFFFF;
   border-radius: 2px;
   border: 2px solid rgba(235, 239, 241, 1);
   font-size: 14px;
 }
+
+
+.assets {
+  background: #FFFFFF;
+  border: 1px solid #eee;
+  margin-top: 16px;
+
+  .title {
+    height: 60px;
+    line-height: 60px;
+    padding-left: 30px;
+    font-size: 16px;
+    font-weight: 500;
+    border-bottom: 1px solid #eee;
+  }
+
+  .info {
+    .left,
+    .right {
+      display: inline-block;
+      width: 50%;
+      padding: 20px 30px;
+
+      .item {
+        height: 60px;
+        line-height: 60px;
+        display: flex;
+        justify-content: left;
+        align-items: center;
+
+        img {
+          width: 16px;
+          height: 16px;
+        }
+        label {
+          width: 130px;
+          margin-left: 10px;
+        }
+      }
+    }
+
+    .left {
+      border-right: 1px solid #ececec;
+    }
+  }
+}
 </style>
diff --git a/src/assets/dots/blue.png b/src/assets/dots/blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc91d8470a6c5698e9b554c915cee7ea26c80211
GIT binary patch
literal 428
zcmV;d0aN~oP)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$0004VNkl<ZI8UvV
zzb`{k6vsd3d95ZDkyJX0cCuLniNq=fZOk<x#2;W_Fc>U$BEiI5We{r<iHOB!pp{yr
zArVxnt#{-;si&<7(eHTfJ)eBfk9&o0q^gp-reELawS<tP+)E4R@or8<MC()JYrrHQ
zWSMl7C0pq7TVM$|3MB_BO3o6N$0BThg?&PfZZ%kZVb>?b+kIdF^)jHxGL)56;EBXY
zuN2H37h)XjXGsPu;vGJa8h^DYRd^^v(IFL!Fm4>V*Y`6zWeb}j|IdIb&VcSqZh6zO
zsBDSb#0=M+tsgz8>NpSU7mzDJR}kiUU?}XJo6_!H$;G2|%U)IoY~>^zs0GZQHTGn+
zuNIUqLPZ#q<fYC8Z8kdmUQ!|r+2=+`v<-HKz4${33KeE0b)^eIn-w#Ws)i5UdK+X5
zq({B5nN*>|;<rvF(vbO!lcx0Kr|GO+z|C)_)091F+Qu5tzu%6x&i{PH^<TnY{*!m{
W(&>Jrfr@(o0000<MNUMnLSTXt@xN67

literal 0
HcmV?d00001

diff --git a/src/assets/dots/green.png b/src/assets/dots/green.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed10f60e44a36ad4549c2c134dc9ca9675961063
GIT binary patch
literal 469
zcmV;`0V@89P)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$0004;Nkl<ZI8UvV
zJ5Rz;6vxjk)KVVGLlKb}PzR^7DT$kl6B1{g)ac?D(80mMPvByrPC6?vxwx4S7gHt&
z6#|F|^3Wm$3%#a|G!%@9p=UggU;g*pa}I)E3}cMKnfNRLq8}l`fw5Q=fnY-(<`yA@
zyGu}~Ln@AD<7*(o9;MSy&?E(Vf`Fzd0xvY6(Q2lEfc>DGIqifgkgFVPY6x&nlVr$c
zwt)obHVKrgmVp<9Fh#=3qRam&<;W0OK_-4NWH5%@7CRuM5~yNfj3LXF;Jsc82R+QP
zq)5(=JhSVxjy(2SNB;!0X%Z+|c?G^DY%GoYPtcEwq|fG*d(gH7_XanG2dI42z&c=r
z`H^YxS%#Ik^t41dp9*>yFS<;#bF@w$n{te)0MQKF)03dbuL3<5Ux05l11OTd+q4=i
zNA5wpQgrqdgHl88nab>x305ZqiZA<7f=Zp+LeUJn<De}EPP0`B9^PMrh<nBX2!vpJ
zW<klzS1VB9xm|6PXwnl+en*oz(QINRP~W@LG0y#Mara61&pr7DDa$0rIyE~B00000
LNkvXXu0mjf<WR{P

literal 0
HcmV?d00001

diff --git a/src/assets/dots/pink.png b/src/assets/dots/pink.png
new file mode 100644
index 0000000000000000000000000000000000000000..3461154dfc99c8adf7f3594b1d6b961e98627ba5
GIT binary patch
literal 386
zcmV-|0e$|7P)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$0003=Nkl<ZI8UvV
zJxc>Y5Qd-GMD%io6zN5*1uH+m#MV-*?NszPXklUDe-PBpT2k635kxD&S|ojna3-f1
zZ)G<Z?;~mCZkmI+nP=bm*cGOj)>>$@2CSf|B6NWlYCMUEPNzuRVUr)&C*Tal0tG+;
z0q|qL9TewmaubLBLG-<Lak!<x4h~pA+6>6Izy>~hvMqfRVj)&Ri#ujQKtf-NWQsAM
zZyMCuHHt=%wmv|(!X0C$bt>jFAfrKZC^fm3P{lj*VGqLCVRwlC<`eh<%27B=4#jFQ
zBAL=Y=ul@-bW5)zJW`JS8$kcnmYXnl*-e5xt7gMMjwo_TDT?==J%WK5NzznFQC^Lm
zHUNeki*D)@X1QQ4O6WCv=7dQTsBBdt|0nRpX--OV>B(qEvP~zKJ;`ljEhy{V8P6>9
gEuMH1{_&pt0two_g(obq^8f$<07*qoM6N<$g0#Y+?f?J)

literal 0
HcmV?d00001

diff --git a/src/assets/dots/red.png b/src/assets/dots/red.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c76a99664fc49972bac9dc1a5c247bd4a6e2c7c
GIT binary patch
literal 463
zcmV;=0WkiFP)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$0004&Nkl<ZI8UvV
zy-Pw-7{;G-kKU`PdCkxWlIDg)f@)|_T_R{}>Vx_R8mgh8AsYGzf<C6UAR02;8zK_X
zp;-(fMe~-L-J9p0xI%tp1kpX?%lrIz-t&GC{O~yEq!>$#TL=k)2wrf#Sm!+DjgH+C
zLil$HX%86Umw0-SbGAiAYk=BC2vmU1bg-HRrhQ}yq1*28=utbY3E@{MhoZ9+izLq2
zeI8Jo*yWMEYpCT*sH@t!D$x0X>0s4JYCsGJN<4Wcx*RihzXybL80>&?&QZ&ipp~oV
zayT?=IBH}om#HNx(F4bj?^nPV%>Y#&@?a`kmLtJK(r|H^%(w#nKt~Dpk3cL96e>W!
z6NruiBZEy>Mrq}2E-Obu!=!L=Hz7*Wjca(IW!nH8Uw8LyVX6aE&OAX=)k&hn5-V1>
zbHB&m*Anf;f!u31#NP|7g`4rW+%rC2Dyv2*8<NMlW9ye&qV-dN>D>@20K0R|_<KP?
ztytMK$B8L_VoG;RnG@3{wgLL@?zD~b|F-!1N%+e>`2^q79RgYYlLr6*002ovPDHLk
FV1nD4(f9xW

literal 0
HcmV?d00001

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index a8c8a68..aa494c0 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="breadcrumb">
+    <el-icon>
+      <Promotion/>
+    </el-icon>
     <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 }">
@@ -10,6 +13,7 @@
 </template>
 
 <script lang="ts" setup>
+import { Promotion } from '@element-plus/icons'
 import { defineProps } from 'vue'
 
 defineProps({
@@ -21,6 +25,14 @@ defineProps({
 
 <style scoped lang="less">
 .breadcrumb {
-  padding: 32px 16px;
+  display: flex;
+  align-items: center;
+  padding: 32px 0 16px 0;
+
+  .el-icon {
+    font-size: 18px;
+    color: #2055ca;
+    margin-right: 8px;
+  }
 }
 </style>
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index afb6cf6..93100a6 100644
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
@@ -59,7 +59,7 @@ const handleCurrentChange = (e: number) => {
     background: #FFFFFF;
 
     h2 {
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 500;
     }
   }
diff --git a/src/views/Address/index.vue b/src/views/Address/index.vue
index b9b8786..ed1ad8d 100644
--- a/src/views/Address/index.vue
+++ b/src/views/Address/index.vue
@@ -1,23 +1,54 @@
 <template>
   <div class="container">
     <Breadcrumb :path="[{name: '地址信息'}]"/>
-    <div>
-      地址 {{ address }}
+
+    <div class="top-info">
+      <span>地址</span>
+      <span class="addr">{{ address }}</span>
     </div>
-    <div>
-      余额 {{ balance.balance.toFixed(2) }} {{ store.getters.symbol }}
-    </div>
-    <div>
-      总接收 {{ balance.reciver.toFixed(2) }} {{ store.getters.symbol }}
-    </div>
-    <div>
-      总发送 {{ sended.toFixed(2) }} {{ store.getters.symbol }}
-    </div>
-    <div>
-      数据量 {{ balance.txCount }}
-    </div>
-    <div>
-      冻结 {{ frozen.toFixed(2) }}
+
+    <div class="assets">
+      <div class="title">
+        概况
+      </div>
+      <div class="info">
+        <div class="left">
+          <div class="item">
+            <img src="../../assets/dots/red.png">
+            <label>余额</label>
+            <span>{{ balance.balance.toFixed(2) }} {{ store.getters.symbol }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/blue.png">
+            <label>总接收</label>
+            <span>{{ balance.reciver.toFixed(2) }} {{ store.getters.symbol }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/green.png">
+            <label>总发送</label>
+            <span>{{ sended.toFixed(2) }} {{ store.getters.symbol }}</span>
+          </div>
+        </div>
+        <div class="right">
+          <div class="item">
+            <img src="../../assets/dots/blue.png">
+            <label>冻结</label>
+            <span>{{ frozen.toFixed(2) }} {{ store.getters.symbol }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/green.png">
+            <label>数据量</label>
+            <span>{{ balance.txCount }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/pink.png">
+            <label>Tokens</label>
+            <el-select v-model="token" filterable placeholder="Select">
+              <el-option label="item.label" value="item.value" />
+            </el-select>
+          </div>
+        </div>
+      </div>
     </div>
 
     <Pagination
@@ -132,6 +163,7 @@ block.getAllExecBalance(address).then(res => {
     frozen.value = res.result.execAccount.find((item: { execer: string }) => item.execer == 'coins').account.frozen / 1e8
   }
 })
+
 /**
  * 获取全部交易
  */
@@ -154,9 +186,23 @@ const records = ref([])
 const handleCurrentChange = (e: number) => {
   console.log(e)
 }
+
+const token = ref('')
+
 </script>
 
 <style scoped lang="less">
+.top-info {
+  font-size: 18px;
+  color: #838b9e;
+
+  .addr {
+    margin-left: 16px;
+    color: #516379;
+    font-weight: 500;
+  }
+}
+
 .warning {
   font-size: 16px;
   vertical-align: middle;
diff --git a/src/views/Block/detail.vue b/src/views/Block/detail.vue
index 9ab4496..52f3f10 100644
--- a/src/views/Block/detail.vue
+++ b/src/views/Block/detail.vue
@@ -8,13 +8,47 @@
         <el-button type="primary" round size="mini">复 制</el-button>
       </div>
     </div>
-    <div class="info">
-      <div>{{ info.txCount }}</div>
-      <div>{{ info.blockTime }}</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 class="assets">
+      <div class="title">
+        概况
+      </div>
+      <div class="info">
+        <div class="left">
+          <div class="item">
+            <img src="../../assets/dots/red.png">
+            <label>交易数量</label>
+            <span>{{ info.txCount }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/blue.png">
+            <label>默克尔根</label>
+            <span>{{ filterHash(info.txHash) }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/green.png">
+            <label>上个区块</label>
+            <span>{{ (info.height - 1) > 0 ? info.height - 1 : '无' }}</span>
+          </div>
+        </div>
+        <div class="right">
+          <div class="item">
+            <img src="../../assets/dots/red.png">
+            <label>时间</label>
+            <span>{{ info.blockTime }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/green.png">
+            <label>状态哈希</label>
+            <span>{{ filterHash(info.stateHash) }}</span>
+          </div>
+          <div class="item">
+            <img src="../../assets/dots/red.png">
+            <label>下个区块</label>
+            <span>{{ (info.height + 1) > maxHeight ? '无' : (info.height + 1) }}</span>
+          </div>
+        </div>
+      </div>
     </div>
 
     <Pagination
@@ -113,10 +147,4 @@ block.getBlockOverview(hash).then(res => {
     }
   }
 }
-
-.info {
-  margin-top: 16px;
-  background: #FFFFFF;
-  border: 1px solid rgba(235, 239, 241, 1);
-}
 </style>
diff --git a/src/views/Block/index.vue b/src/views/Block/index.vue
index 14fec4d..2b1e1a7 100644
--- a/src/views/Block/index.vue
+++ b/src/views/Block/index.vue
@@ -15,18 +15,16 @@
 
         <el-table-column width="100" align="center" label="高度">
           <template #default="scope">
-            <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{
-                scope.row.height
-              }}
+            <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">
+              {{ scope.row.height }}
             </router-link>
           </template>
         </el-table-column>
 
         <el-table-column label="区块哈希">
           <template #default="scope">
-            <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">{{
-                scope.row.hash
-              }}
+            <router-link :to="{name: 'BlockDetail', params: { hash: scope.row.hash }}">
+              {{ scope.row.hash }}
             </router-link>
           </template>
         </el-table-column>
diff --git a/src/views/Other/analytical.vue b/src/views/Other/analytical.vue
index a5224a5..074761b 100644
--- a/src/views/Other/analytical.vue
+++ b/src/views/Other/analytical.vue
@@ -1,38 +1,44 @@
 <template>
   <div class="container">
-
     <Breadcrumb :path="[{name: '解析数据'}]"/>
-
     <div class="info">
       <h2>解析数据</h2>
       <div>
         您可以在此页面输入未签名的源数据，十六进制格式文本，将会解析成可读的格式。
       </div>
     </div>
-    <div>
-      <textarea v-model="data"></textarea>
-    </div>
-    <el-button type="primary" @click="decodeTransaction">解析数据</el-button>
-    <div>
+    <textarea v-model="data"></textarea>
+    <el-button type="primary" :disabled="disabled" :loading="loading" @click="decodeTransaction">解析数据</el-button>
     <pre contenteditable="true" v-if="result" class="inputTxt">
 <code>{{ result }}</code>
     </pre>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { block } from '@/api'
 import { Breadcrumb } from '@/components'
-import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { computed, ref } from 'vue'
 
-const data = ref<string>('0x0a2d10808084fea6dee1112222314b7572754d7066744c503851544a5156356e704c3233634e46575445616e757474122d1080b0d78a98dee1112222314b7572754d7066744c503851544a5156356e704c3233634e46575445616e757474')
+const data = ref<string>('')
 const result = ref('')
+const loading = ref<boolean>(false)
+const disabled = computed(() => data.value.trim() == '')
 
 const decodeTransaction = () => {
+  loading.value = true
   block.decodeRawTransaction(data.value).then(res => {
-    console.log(res)
-    result.value = res.result
+    if (res.error != null) {
+      return ElMessage.error({
+        message: res.error
+      })
+    } else {
+      result.value = res.result
+    }
+  }).finally(() => {
+    data.value = ''
+    loading.value = false
   })
 }
 
@@ -60,11 +66,16 @@ textarea {
   border-radius: 5px;
   border: 2px solid #ebeff1;
   font-size: 14px;
+  margin-bottom: 16px;
 
   &:focus {
     outline: none;
   }
 }
 
+.inputTxt {
+  resize: vertical;
+  margin-top: 16px;
+}
 
 </style>
diff --git a/src/views/Other/broadcast.vue b/src/views/Other/broadcast.vue
index 328a077..b79d86d 100644
--- a/src/views/Other/broadcast.vue
+++ b/src/views/Other/broadcast.vue
@@ -11,19 +11,36 @@
     <div>
       <textarea v-model="data"></textarea>
     </div>
-    <el-button type="primary" @click="decodeTransaction">广播数据</el-button>
+    <el-button type="primary" :disabled="disabled" :loading="loading" @click="decodeTransaction">广播数据</el-button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { block } from '@/api'
 import { Breadcrumb } from '@/components'
-import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { computed, ref } from 'vue'
 
 const data = ref<string>('')
+const loading = ref<boolean>(false)
+const result = ref('')
+const disabled = computed(() => data.value.trim() == '')
+
 const decodeTransaction = () => {
-  block.decodeRawTransaction(data.value).then(res => {
-    console.log(res)
+  if (data.value.trim() == '') {
+    return
+  }
+  loading.value = true
+  block.decodeRawTransaction(data.value).then((res) => {
+    if (res.error != null) {
+      return ElMessage.error({
+        message: res.error
+      })
+    } else {
+      result.value = res.result
+    }
+  }).finally(() => {
+    loading.value = false
   })
 }
 </script>
@@ -40,6 +57,7 @@ const decodeTransaction = () => {
     color: #838b9e;
   }
 }
+
 textarea {
   width: 100%;
   height: 200px;