消息

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>

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>

src/components/Pagination.vue

@@ -59,7 +59,7 @@ const handleCurrentChange = (e: number) => {
     background: #FFFFFF;
 
     h2 {
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 500;
     }
   }

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;

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>

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>

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>

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;