From 0be6f421bfe8963b2d85f542759082a062aad534 Mon Sep 17 00:00:00 2001
From: fave3722 <372276175@qq.com>
Date: Tue, 6 Sep 2022 18:44:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=BF=9E=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  4 +
 package.json                                  |  1 +
 src/api/BlockController/getHomePageList.ts    |  8 --
 src/api/BlockController/index.ts              | 43 +++++++++
 src/api/TransactionsController/index.ts       | 12 +++
 src/api/index.ts                              |  9 ++
 src/components/base/UpperLowerSwitch.vue      |  4 +
 src/components/footer.vue                     |  6 +-
 src/components/search.vue                     | 96 +++++++++++++++++++
 src/components/table/constant.ts              | 14 +--
 src/components/table/dBase/bkRow.vue          |  6 +-
 src/components/table/dBase/hpRow.vue          | 57 ++++++-----
 src/components/table/desktop/bkTable.vue      | 84 ++++++++++------
 .../table/desktop/bkTableDetails.vue          | 72 +++++++++-----
 src/components/table/desktop/hpTable.vue      | 24 ++---
 src/components/table/desktop/tokensTable.vue  |  5 +-
 .../table/desktop/transactTable.vue           | 54 ++++++++---
 src/components/table/desktop/zExtraStyle.scss | 10 +-
 src/components/table/mBase/mobileCard.vue     |  3 +-
 src/components/table/mBase/tokensCard.vue     |  3 +-
 src/components/table/mBase/transactCard.vue   |  3 +-
 src/pages/HomePage/index.vue                  | 81 +++++++---------
 src/pages/TableBlock/Block/details.vue        | 19 +++-
 src/pages/TableBlock/Block/index.vue          |  3 +-
 src/utils/string.ts                           | 13 +++
 src/utils/throttle.ts                         | 13 +++
 tailwind.config.cjs                           |  2 +
 yarn.lock                                     |  5 +
 28 files changed, 472 insertions(+), 182 deletions(-)
 delete mode 100644 src/api/BlockController/getHomePageList.ts
 create mode 100644 src/api/BlockController/index.ts
 create mode 100644 src/api/TransactionsController/index.ts
 create mode 100644 src/components/search.vue
 create mode 100644 src/utils/string.ts
 create mode 100644 src/utils/throttle.ts

diff --git a/components.d.ts b/components.d.ts
index 3538e7e..1364ada 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,8 +17,11 @@ declare module '@vue/runtime-core' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Footer: typeof import('./src/components/footer.vue')['default']
     Hp_card: typeof import('./src/components/base/hp_card.vue')['default']
     HpRow: typeof import('./src/components/table/dBase/hpRow.vue')['default']
@@ -28,6 +31,7 @@ declare module '@vue/runtime-core' {
     NowrapRow: typeof import('./src/components/table/mBase/nowrapRow.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Search: typeof import('./src/components/search.vue')['default']
     Tabs: typeof import('./src/components/tabs.vue')['default']
     THeader: typeof import('./src/components/table/dBase/tHeader.vue')['default']
     TokensCard: typeof import('./src/components/table/mBase/tokensCard.vue')['default']
diff --git a/package.json b/package.json
index aa5efc2..88f1442 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "dayjs": "^1.11.5",
     "element-plus": "^2.2.14",
     "qrcode": "^1.5.1",
     "vue": "^3.2.37",
diff --git a/src/api/BlockController/getHomePageList.ts b/src/api/BlockController/getHomePageList.ts
deleted file mode 100644
index 7477278..0000000
--- a/src/api/BlockController/getHomePageList.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { requestService } from '../requst'
-
-export const getHomePageList = () => {
-  return requestService({
-    url: '/api/block/getHomePageList',
-    method: 'get',
-  })
-}
diff --git a/src/api/BlockController/index.ts b/src/api/BlockController/index.ts
new file mode 100644
index 0000000..e4dcc8e
--- /dev/null
+++ b/src/api/BlockController/index.ts
@@ -0,0 +1,43 @@
+import { requestService } from '../requst'
+
+export const getHomePageList = () => {
+  return requestService({
+    url: '/api/block/getHomePageList',
+    method: 'get',
+  })
+}
+
+export const getSearch = (search: string) => {
+  return requestService({
+    url: '/api/block/getSearch',
+    method: 'get',
+    params: {
+      search,
+    },
+  })
+}
+
+interface getBlockParams {
+  hash?: string
+  number?: number
+}
+export const getBlock = (params: getBlockParams) => {
+  return requestService({
+    url: '/api/block/getBlock',
+    method: 'get',
+    params,
+  })
+}
+interface getfindBlockListParams {
+  pageNum?: number
+  pageSize?: number
+  orderByColumn?: string
+  isAsc?: string
+}
+export const getfindBlockList = (params: getfindBlockListParams) => {
+  return requestService({
+    url: '/api/block/findBlockList',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/api/TransactionsController/index.ts b/src/api/TransactionsController/index.ts
new file mode 100644
index 0000000..b99118f
--- /dev/null
+++ b/src/api/TransactionsController/index.ts
@@ -0,0 +1,12 @@
+import { requestService } from '../requst'
+interface TransactionListProps {
+  pageNum?: Number
+  pageSize?: Number
+}
+export const getFindTransactionListPage = (params: TransactionListProps) => {
+  return requestService({
+    url: '/api/transactions/findTransactionListPage',
+    params: params,
+    method: 'get',
+  })
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index e69de29..cdafabc 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -0,0 +1,9 @@
+import * as BlockController from './BlockController/index'
+import * as TokensController from './TokensController/index'
+import * as TransactionsController from './TransactionsController/index'
+
+export default {
+  ...BlockController,
+  ...TokensController,
+  ...TransactionsController,
+}
diff --git a/src/components/base/UpperLowerSwitch.vue b/src/components/base/UpperLowerSwitch.vue
index 9462896..bc20827 100644
--- a/src/components/base/UpperLowerSwitch.vue
+++ b/src/components/base/UpperLowerSwitch.vue
@@ -5,6 +5,7 @@
   >
     <div
       class="h-[24px] w-[24px] desktop:mr-[6px] mobile:mr-[38px] base-structure"
+      @click="prev"
     >
       <el-icon :color="'#FFFFFF'" :size="10"><ArrowLeftBold /></el-icon>
     </div>
@@ -13,6 +14,7 @@
     </div>
     <div
       class="h-[24px] w-[24px] desktop:ml-[6px] mobile:ml-[38px] base-structure"
+      @click="next"
     >
       <el-icon :color="'#FFFFFF'" :size="10"><ArrowRightBold /></el-icon>
     </div>
@@ -24,6 +26,8 @@ import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
 defineProps({
   current: String,
   className: String,
+  prev: Function as any,
+  next: Function as any,
 })
 </script>
 
diff --git a/src/components/footer.vue b/src/components/footer.vue
index 3413dc4..85834b5 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -29,14 +29,14 @@
         <div class="w-[134px]">
           <p
             class="pb-[22px] cursor-pointer text-white"
-            @click="jumpRoute('VNFT')"
+            @click="jumpRoute('blocks')"
           >
             Blockchain
           </p>
-          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')">
+          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('blocks')">
             View Blocks
           </p>
-          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('transact')">
+          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('tx')">
             View Txs
           </p>
         </div>
diff --git a/src/components/search.vue b/src/components/search.vue
new file mode 100644
index 0000000..19a4031
--- /dev/null
+++ b/src/components/search.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="flex flex-1 justify-center items-center">
+    <img
+      :src="iconList.label"
+      class="desktop:w-[70px] desktop:h-[40px] mobile:w-[40px] mobile:h-[24px]"
+    />
+    <span
+      class="desktop:text-[50px] mobile:text-[24px] font-semibold text-white ml-[16px]"
+      >MetaForce Scan</span
+    >
+  </div>
+  <div
+    class="flex flex-1 flex-col w-full justify-center items-center desktop:mt-[68px] mobile:mt-[32px]"
+  >
+    <div class="flex flex-1 w-full desktop:px-[282px] mobile:px-[20px]">
+      <el-input
+        v-model="input"
+        class="bg-black desktop:h-[65px] desktop:pl-[33px] mobile:h-[40px] mobile:pl-[15.69px] mobile:text-[12px] desktop:rounded-t-[32.5px] overflow-hidden hp-input-wrapper mobile:rounded-t-[20px]"
+        :class="
+          isActive && data.length > 0
+            ? ''
+            : 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px]'
+        "
+        placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
+        :prefix-icon="Search"
+        :input-style="{ background: '#262626' }"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @change="handleEnter"
+        @input="handleChangeInput"
+      />
+    </div>
+    <div
+      class="h-[78px] w-full desktop:px-[282px] mobile:px-[20px]"
+      :class="isActive && data.length > 0 ? '' : 'hidden'"
+    >
+      <div
+        class="bg-black-262626 px-[32px] py-[20px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer"
+        v-for="(item, index) in data"
+        :key="index + item?.hash"
+        :class="
+          index === data.length - 1
+            ? 'desktop:rounded-b-[32.5px] mobile:rounded-b-[20px] border-b-[0px]'
+            : 'border-b-[1px]'
+        "
+        @click="handleClick(item)"
+      >
+        <span class="text-blue-65B5FF">{{ item?.hash || '-' }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+import { getSearch } from '@src/api/BlockController'
+import { Throttle } from '@src/utils/throttle'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import * as iconList from '../assets/Icons/index'
+
+const router = useRouter()
+
+let input = ref<string>('')
+let isActive = ref(false)
+const data = ref<any>([])
+
+const handleFocus = () => (isActive.value = true)
+const handleBlur = () =>
+  setTimeout(() => {
+    isActive.value = false
+  }, 150)
+// 按下了enter / 失去焦点
+const handleEnter = (e: string | number) => {
+  // console.log(e)
+}
+// 点击了
+const handleClick = (item: any) => {
+  console.log('click', item)
+  router.push(`/blocks/${item.hash}`)
+}
+// 修改input
+const handleChangeInput = () => {
+  Throttle(searchRequest, 1000)()
+}
+// 请求的函数
+const searchRequest = async () => {
+  try {
+    const res = await getSearch(input.value)
+    data.value = res.data
+    console.log(data)
+  } catch (error) {}
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/table/constant.ts b/src/components/table/constant.ts
index fff77b8..944b627 100644
--- a/src/components/table/constant.ts
+++ b/src/components/table/constant.ts
@@ -1,7 +1,7 @@
 // bkTable表配置
 export const bkTableCollocate = {
   labels: ['Block', 'date', 'Miner', 'Gas Limit', 'Gas Used'], // 表头
-  sequence: ['block', 'date', 'miner', 'gasLimit', 'gasUsed'], // 对应数据的变量名称
+  sequence: ['number', 'timestamp', 'miner', 'gasLimit', 'gasUsed'], // 对应数据的变量名称
   // 数据颜色
   colorSequence: [
     'text-blue-65B5FF',
@@ -28,9 +28,9 @@ export const detailsCollocate = {
     'Nonce',
   ], // 表头
   sequence: [
-    'blockHeight',
+    'number',
     'timestamp',
-    'transactions',
+    'transactionNum',
     'miner',
     'size',
     'hash',
@@ -84,13 +84,13 @@ export const transactTableCollocate = {
   ], // 表头
   sequence: [
     'hash',
-    'block',
-    'smartContract',
-    'age',
+    'blockNumber',
+    'gasPrice',
+    'timestamp',
     'from',
     'to',
     'result',
-    'tXFee',
+    'fee',
   ], // 对应数据的变量名称
   // 数据颜色
   colorSequence: [
diff --git a/src/components/table/dBase/bkRow.vue b/src/components/table/dBase/bkRow.vue
index 42e7e8f..212b361 100644
--- a/src/components/table/dBase/bkRow.vue
+++ b/src/components/table/dBase/bkRow.vue
@@ -24,12 +24,10 @@
         <div
           v-else
           class="px-[12px] py-[4px] rounded-[4px] w-[87px] flex flex-row items-center"
-          :class="
-            values.result === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'
-          "
+          :class="values.isSuccess ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
         >
           <Icons
-            :url="values.result === 'Success' ? 'check_circle' : 'cancel'"
+            :url="values.isSuccess ? 'check_circle' : 'cancel'"
             :size="12"
           />
           <span
diff --git a/src/components/table/dBase/hpRow.vue b/src/components/table/dBase/hpRow.vue
index a2eb05d..9e555bf 100644
--- a/src/components/table/dBase/hpRow.vue
+++ b/src/components/table/dBase/hpRow.vue
@@ -4,15 +4,27 @@
     class="flex flex-1 flex-row bg-black-19191A hover:bg-black-272728 items-center py-[24px] px-[34px]"
   >
     <div
-      class="flex flex-1 justify-start"
+      class="flex flex-1 justify-start cursor-pointer"
       v-for="(item, index) in sequence"
       :key="index"
     >
-      <span
-        :class="[item === 'time' ? 'text-gray-7D7D7E' : 'text-white']"
-        class="text-white text-[14px] font-medium"
-        >{{ values[item] }}
-      </span>
+      <div v-if="isTooltips.includes(sequence?.[index])">
+        <el-tooltip effect="dark" :content="tooltipsData[item]" placement="top">
+          <span
+            :class="[item === 'time' ? 'text-gray-7D7D7E' : 'text-white']"
+            class="text-white text-[14px] font-medium"
+            >{{ (values && values[item]) || '-' }}
+          </span>
+        </el-tooltip>
+      </div>
+      <div v-else>
+        <span
+          :v-if="!isTooltips.includes(sequence?.[index])"
+          :class="[item === 'time' ? 'text-gray-7D7D7E' : 'text-white']"
+          class="text-white text-[14px] font-medium"
+          >{{ values?.[item] }}
+        </span>
+      </div>
     </div>
   </div>
   <div
@@ -22,24 +34,25 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { defineProps, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import TableTypes from '../table'
-export default defineComponent({
-  props: {
-    sequence: Array as PropType<TableTypes.tRow['sequence']>,
-    values: Object as PropType<TableTypes.tRow['values']>,
-    last: Boolean,
-  },
-  setup(props) {
-    console.log(props)
-    return {
-      sequence: props.sequence,
-      values: props.values || {},
-      last: props.last,
-    }
-  },
+const props = defineProps({
+  sequence: Array as PropType<TableTypes.tRow['sequence']>,
+  values: Object as PropType<TableTypes.tRow['values']>,
+  last: Boolean,
+})
+// 需要加上tooltip的数据
+const isTooltips = ['txnHash', 'from', 'to']
+const tooltipsData = ref()
+
+watchEffect(() => {
+  tooltipsData.value = {
+    txnHash: props.values?.txnHashTooltip,
+    from: props.values?.fromTooltip,
+    to: props.values?.toTooltip,
+  }
 })
 </script>
 
diff --git a/src/components/table/desktop/bkTable.vue b/src/components/table/desktop/bkTable.vue
index fb51eb3..4b1c395 100644
--- a/src/components/table/desktop/bkTable.vue
+++ b/src/components/table/desktop/bkTable.vue
@@ -1,22 +1,34 @@
 <template>
-  <div class="rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]">
+  <div
+    class="bk-table rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]"
+  >
     <t-header
       :list="invariable.labels"
       bg-color="bg-black-006"
       textColor="text-white"
     />
-    <div
-      v-for="(item, index) in currentData"
-      :key="item?.date + index"
-      @click="routerLink(item.block)"
-    >
-      <bk-row
-        :sequence="invariable.sequence"
-        :values="item"
-        :colorSequence="invariable.colorSequence"
-      />
-    </div>
-
+    <el-skeleton class="w-full px-[34px]" :loading="loading" animated>
+      <template #template>
+        <el-skeleton-item
+          variant="p"
+          class="my-[24px]"
+          v-for="item in invariable.pageSize"
+        />
+      </template>
+      <template #default>
+        <div
+          v-for="(item, index) in currentData"
+          :key="item?.timestamp + index"
+          @click="routerLink(item?.hash)"
+        >
+          <bk-row
+            :sequence="invariable.sequence"
+            :values="item"
+            :colorSequence="invariable.colorSequence"
+          />
+        </div>
+      </template>
+    </el-skeleton>
     <div
       class="bk-pagination flex flex-row items-center justify-end pt-[32px] pr-[34px]"
     >
@@ -25,7 +37,6 @@
         layout="prev, pager, next, jumper"
         v-model:current-page="currentPage"
         :total="paginationState.totalPage"
-        @current-change="handleCurrentChange"
       />
       <span class="text-white text-[14px] font-normal">Page</span>
     </div>
@@ -33,33 +44,50 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref } from 'vue'
+import { reactive, ref, watchEffect } from 'vue'
 import THeader from '../dBase/tHeader.vue'
 import BkRow from '../dBase/bkRow.vue'
-import { dimensionalUpgrade } from '../tool'
 import { bkTableCollocate } from '../constant'
-import router from '@src/routes'
+import { useRouter } from 'vue-router'
+import { getfindBlockList } from '@src/api/BlockController'
+import { timeConvert } from '@src/utils/string'
 
-const props = defineProps({
-  data: Array as any,
-})
 const invariable = {
   ...bkTableCollocate,
   pageSize: 10, // 每一页的数量
 }
+
+const router = useRouter()
 const paginationState = reactive({
-  totalPage:
-    Math.floor(props?.data.length / invariable.pageSize + 1) *
-    invariable.pageSize, // 总页数
-  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
+  totalPage: 0, // 总页数
 })
 
 let currentPage = ref(1) // 当前页
-let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
-
-const handleCurrentChange = (page: number) => {
-  currentData.value = paginationState.totalData[page - 1]
+let currentData = ref() // 当前页的数据
+let loading = ref(true) // 骨架屏加载
+// 请求数据
+const initBlock = async (page: number) => {
+  const params = {
+    pageNum: page,
+    pageSize: invariable.pageSize,
+  }
+  const res = await getfindBlockList(params)
+  // 数据请求结束 更新总页数
+  paginationState.totalPage =
+    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
+  // 更新当前数据
+  currentData.value = res.data.rows.map((item: any) => ({
+    ...item,
+    timestamp: timeConvert(item?.timestamp),
+  }))
+  // 骨架屏隐藏
+  loading.value = false
 }
+// 监听分页更新 -> 请求数据
+watchEffect(() => {
+  loading.value = true
+  initBlock(currentPage.value)
+})
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
 </script>
diff --git a/src/components/table/desktop/bkTableDetails.vue b/src/components/table/desktop/bkTableDetails.vue
index 6e83159..9cc03ae 100644
--- a/src/components/table/desktop/bkTableDetails.vue
+++ b/src/components/table/desktop/bkTableDetails.vue
@@ -6,45 +6,73 @@
       v-for="(item, index) in invariable.labels"
       :key="index + item"
       :title="item"
-      :value="data[invariable.sequence[index]]"
+      :value="currentData?.[invariable.sequence?.[index]]?.toString()"
       :value-color="invariable.colorSequence[index]"
       :is-copy="invariable.isCopys[index]"
     />
-    <upper-lower-switch :current="'Block'" />
+    <upper-lower-switch
+      :current="`Block${blockId}`"
+      :prev="handlePrev"
+      :next="handleNext"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref } from 'vue'
+import { defineProps, ref, watchEffect } from 'vue'
 import DetailsRow from '../dBase/detailsRow.vue'
 import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
 import { detailsCollocate } from '../constant'
+import { getBlock } from '@src/api/BlockController'
 
 const props = defineProps({
-  id: Array as any,
+  data: Object,
 })
-onMounted(() => {
-  setTimeout(() => {
-    data.value = {
-      blockHeight: '12333',
-      timestamp: '12333',
-      transactions: '12333',
-      miner: '12333',
-      size: '12333',
-      hash: '12333',
-      parentHash: '12333',
-      difficulty: '12333',
-      totalDifficulty: '12333',
-      gasUsed: '12333',
-      gasLimit: '12333',
-      nonce: '12333',
+
+const blockId = ref() // 当前id
+const currentData = ref() // 当前data
+
+// 点击了上一个
+const handlePrev = () => {
+  if (!blockId) {
+    return
+  }
+  // 请求上一页的数据
+  requestByBlockId(Number(blockId.value) - 1)
+}
+// 点击了下一个
+const handleNext = () => {
+  if (!blockId) {
+    return
+  }
+  // 请求上一页的数据
+  requestByBlockId(Number(blockId.value) + 1)
+}
+// 请求函数
+const requestByBlockId = async (id: number) => {
+  const params = {
+    number: id,
+  }
+  try {
+    const res = await getBlock(params)
+    if (res.data) {
+      // 当请求回来的数据不为空才更新data
+      currentData.value = res.data
     }
-  }, 1000)
+  } catch (error) {}
+}
+
+// 当 props.data 改变
+watchEffect(() => {
+  currentData.value = props.data
+})
+// 更新标识
+watchEffect(() => {
+  blockId.value = currentData.value?.number
 })
-const data = ref<any>({})
+
 const invariable = {
   ...detailsCollocate,
 }
 </script>
-
 <style lang="scss"></style>
diff --git a/src/components/table/desktop/hpTable.vue b/src/components/table/desktop/hpTable.vue
index 9f5cab7..7ef19f5 100644
--- a/src/components/table/desktop/hpTable.vue
+++ b/src/components/table/desktop/hpTable.vue
@@ -11,25 +11,15 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import THeader from '../dBase/tHeader.vue'
-import HpRow from '../dBase/hpRow.vue'
+<script setup lang="ts">
+import { defineProps } from 'vue'
 
-export default defineComponent({
-  components: { THeader, HpRow },
-  props: {
-    data: Array as any,
-  },
-  setup(props) {
-    const { data } = props
-    return {
-      thList: ['Txn Hash', 'From', 'To', 'Date / Time', 'Fee(MBC)'],
-      sequence: ['txnHash', 'from', 'to', 'time', 'fee'],
-      data: data,
-    }
-  },
+const props = defineProps({
+  data: Array as any,
 })
+
+const thList = ['Txn Hash', 'From', 'To', 'Date / Time', 'Fee(MBC)']
+const sequence = ['txnHash', 'from', 'to', 'time', 'fee']
 </script>
 
 <style scoped></style>
diff --git a/src/components/table/desktop/tokensTable.vue b/src/components/table/desktop/tokensTable.vue
index 8548cb4..d3a3227 100644
--- a/src/components/table/desktop/tokensTable.vue
+++ b/src/components/table/desktop/tokensTable.vue
@@ -52,7 +52,7 @@ import THeader from '../dBase/tHeader.vue'
 import BkRow from '../dBase/bkRow.vue'
 import { dimensionalUpgrade } from '../tool'
 import { tokensTableCollocate } from '../constant'
-import router from '@src/routes'
+import { useRouter } from 'vue-router'
 
 const props = defineProps({
   data: Array as any,
@@ -61,6 +61,9 @@ const invariable = {
   ...tokensTableCollocate,
   pageSize: 10, // 每一页的数量
 }
+
+const router = useRouter()
+
 const paginationState = reactive({
   totalPage:
     Math.floor(props?.data.length / invariable.pageSize + 1) *
diff --git a/src/components/table/desktop/transactTable.vue b/src/components/table/desktop/transactTable.vue
index b1b178d..7978d23 100644
--- a/src/components/table/desktop/transactTable.vue
+++ b/src/components/table/desktop/transactTable.vue
@@ -25,7 +25,6 @@
         layout="prev, pager, next, jumper"
         v-model:current-page="currentPage"
         :total="paginationState.totalPage"
-        @current-change="handleCurrentChange"
       />
       <span class="text-white text-[14px] font-normal">Page</span>
     </div>
@@ -33,33 +32,58 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref } from 'vue'
+import { reactive, ref, watchEffect } from 'vue'
 import THeader from '../dBase/tHeader.vue'
 import BkRow from '../dBase/bkRow.vue'
-import { dimensionalUpgrade } from '../tool'
 import { transactTableCollocate } from '../constant'
-import router from '@src/routes'
+import { useRouter } from 'vue-router'
+import { getFindTransactionListPage } from '@src/api/TransactionsController'
+import { middleDecimal, timeConvert } from '@src/utils/string'
 
-const props = defineProps({
-  data: Array as any,
-})
 const invariable = {
   ...transactTableCollocate,
   pageSize: 10, // 每一页的数量
 }
+
+const router = useRouter()
 const paginationState = reactive({
-  totalPage:
-    Math.floor(props?.data.length / invariable.pageSize + 1) *
-    invariable.pageSize, // 总页数
-  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
+  totalPage: 0, // 总页数
 })
 
 let currentPage = ref(1) // 当前页
-let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
-
-const handleCurrentChange = (page: number) => {
-  currentData.value = paginationState.totalData[page - 1]
+let currentData = ref() // 当前页的数据
+let loading = ref(true) // 骨架屏加载
+// 请求数据
+const initBlock = async (page: number) => {
+  const params = {
+    pageNum: page,
+    pageSize: invariable.pageSize,
+  }
+  const res = await getFindTransactionListPage(params)
+  // 数据请求结束 更新总页数
+  paginationState.totalPage =
+    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
+  // 更新当前数据
+  currentData.value = res.data.rows.map((item: any) => ({
+    ...item,
+    hash: middleDecimal(item?.hash),
+    from: middleDecimal(item?.from),
+    to: middleDecimal(item?.to),
+    gasPrice: middleDecimal(item?.gasPrice),
+    isSuccess: item?.status === '0x1',
+    result: item?.status === '0x1' ? 'Success' : 'Faild',
+    // middleDecimal
+    timestamp: timeConvert(item?.timestamp),
+  }))
+  console.log(currentData.value)
+  // 骨架屏隐藏
+  loading.value = false
 }
+// 监听分页更新 -> 请求数据
+watchEffect(() => {
+  loading.value = true
+  initBlock(currentPage.value)
+})
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/tx/${id}`)
 </script>
diff --git a/src/components/table/desktop/zExtraStyle.scss b/src/components/table/desktop/zExtraStyle.scss
index b7e34da..ca6f11e 100644
--- a/src/components/table/desktop/zExtraStyle.scss
+++ b/src/components/table/desktop/zExtraStyle.scss
@@ -11,7 +11,7 @@
         justify-content: center;
         align-items: center;
         height: 30px;
-        width: 30px;
+        width: auto !important;
         margin: 0px 8px;
         box-sizing: border-box;
         background: #19191a;
@@ -38,4 +38,10 @@
         inset;
     }
   }
-}
\ No newline at end of file
+}
+
+.bk-table{
+  .el-skeleton.is-animated .el-skeleton__item {
+    background: #272728;
+  }
+} 
\ No newline at end of file
diff --git a/src/components/table/mBase/mobileCard.vue b/src/components/table/mBase/mobileCard.vue
index 61ddada..d39e634 100644
--- a/src/components/table/mBase/mobileCard.vue
+++ b/src/components/table/mBase/mobileCard.vue
@@ -20,14 +20,15 @@
 </template>
 
 <script setup lang="ts">
-import router from '@src/routes'
 import { defineProps } from 'vue'
+import { useRouter } from 'vue-router'
 import { bkTableCollocate } from '../constant'
 import nowrapRow from './nowrapRow.vue'
 const props = defineProps({
   cardData: Object as any,
 })
 const invariable = { ...bkTableCollocate }
+const router = useRouter()
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
 </script>
diff --git a/src/components/table/mBase/tokensCard.vue b/src/components/table/mBase/tokensCard.vue
index c8ce644..bcb1cc8 100644
--- a/src/components/table/mBase/tokensCard.vue
+++ b/src/components/table/mBase/tokensCard.vue
@@ -20,14 +20,15 @@
 </template>
 
 <script setup lang="ts">
-import router from '@src/routes'
 import { defineProps } from 'vue'
+import { useRouter } from 'vue-router'
 import { tokensMobileCollocate } from '../constant'
 import nowrapRow from './nowrapRow.vue'
 const props = defineProps({
   cardData: Object as any,
 })
 const invariable = { ...tokensMobileCollocate }
+const router = useRouter()
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/tokens/${id}`)
 </script>
diff --git a/src/components/table/mBase/transactCard.vue b/src/components/table/mBase/transactCard.vue
index aa15a9b..c013aa5 100644
--- a/src/components/table/mBase/transactCard.vue
+++ b/src/components/table/mBase/transactCard.vue
@@ -22,14 +22,15 @@
 </template>
 
 <script setup lang="ts">
-import router from '@src/routes'
 import { defineProps } from 'vue'
+import { useRouter } from 'vue-router'
 import { transactTableCollocate } from '../constant'
 import nowrapRow from './nowrapRow.vue'
 const props = defineProps({
   cardData: Object as any,
 })
 const invariable = { ...transactTableCollocate }
+const router = useRouter()
 // 路由跳转
 const routerLink = (id: string | number) => router.push(`/tx/${id}`)
 </script>
diff --git a/src/pages/HomePage/index.vue b/src/pages/HomePage/index.vue
index 4f74658..c98af6f 100644
--- a/src/pages/HomePage/index.vue
+++ b/src/pages/HomePage/index.vue
@@ -3,29 +3,7 @@
     <div
       class="bg-home-page bg-cover bg-center bg-no-repeat desktop:w-[1440px] desktop:h-[535.5px] desktop:pt-[70px] mobile:w-full mobile:h-[219px] mobile:pt-[25px]"
     >
-      <div class="flex flex-1 justify-center items-center">
-        <img
-          :src="iconList.label"
-          class="desktop:w-[70px] desktop:h-[40px] mobile:w-[40px] mobile:h-[24px]"
-        />
-        <span
-          class="desktop:text-[50px] mobile:text-[24px] font-semibold text-white ml-[16px]"
-          >MetaForce Scan</span
-        >
-      </div>
-      <div
-        class="flex flex-1 desktop:h-[65px] mobile:h-[40px] justify-center items-center desktop:mt-[68px] mobile:mt-[32px]"
-      >
-        <div class="flex flex-1 desktop:px-[282px] mobile:px-[20px]">
-          <el-input
-            v-model="input"
-            class="bg-black desktop:h-[65px] desktop:pl-[33px] mobile:h-[40px] mobile:pl-[15.69px] mobile:text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
-            placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
-            :prefix-icon="Search"
-            :input-style="{ background: '#262626' }"
-          />
-        </div>
-      </div>
+      <search-input />
     </div>
     <!-- 中间部分 -->
     <div
@@ -91,37 +69,28 @@
           />
         </div>
       </div>
+      <!-- <el-skeleton :rows="3" animated /> -->
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Search, Right } from '@element-plus/icons-vue'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Right } from '@element-plus/icons-vue'
+
 import hpCard from '@src/components/base/hp_card.vue'
-import * as iconList from '../../assets/Icons/index'
-import router from '@src/routes'
 import HpTable from '@src/components/table/desktop/hpTable.vue'
-import { onUnmounted, reactive, ref, watchEffect } from 'vue'
-import { getHomePageList } from '@src/api/BlockController/getHomePageList'
+import SearchInput from '@src/components/search.vue'
+
+import { getHomePageList } from '@src/api/BlockController'
 import { getFindTokenList } from '@src/api/TokensController'
+import { getFindTransactionListPage } from '@src/api/TransactionsController'
+
+import { middleDecimal, timeConvert } from '@src/utils/string'
 
 // 表格数据
-const tableData = [
-  {
-    txnHash: '0123123',
-    from: '0xshd......hhhh6',
-    to: '0xhhh.....77hhhh',
-    time: '2022-08-10 09:50:17',
-    fee: '0.0000021',
-  },
-  {
-    txnHash: '0xdhdqwsh1',
-    from: '0xshdhhhh6',
-    to: '0xhhh77hhhh',
-    time: '2022-08-10 09:50:17',
-    fee: '0.0000021',
-  },
-]
+let tableData = ref([])
 // 中间顶部渲染的数据
 const overview = reactive([
   {
@@ -142,9 +111,10 @@ const overview = reactive([
   },
 ])
 
+const router = useRouter()
 const input = ref()
 let ws = ref<WebSocket>()
-
+// 初始化接口请求
 const initRequist = async () => {
   // 获取主页接口
   const res = await getHomePageList()
@@ -153,8 +123,25 @@ const initRequist = async () => {
   // 获取tokens接口拿到总数
   const tokenRes = await getFindTokenList()
   overview[3].value = tokenRes.data.total
+  // 获取最新的交易 处理数据 加上tooltip
+  const TransactionList = await getFindTransactionListPage({
+    pageNum: 1,
+    pageSize: 5,
+  })
+  tableData.value = TransactionList.data.rows.map((item: any) => {
+    return {
+      txnHash: middleDecimal(item.hash),
+      txnHashTooltip: item.hash,
+      from: middleDecimal(item.from),
+      fromTooltip: item.from,
+      to: middleDecimal(item.to),
+      toTooltip: item.to,
+      time: timeConvert(item.timestamp),
+      fee: item.fee,
+    }
+  })
 }
-
+// 初始化websocket连接
 const initWebSocket = () => {
   ws.value = new WebSocket('wss://apiasia.mbc.network/websocket')
 
@@ -176,7 +163,7 @@ const initWebSocket = () => {
 
 const jumpRoute = (route: string) => router.push(route)
 
-watchEffect(() => {
+onMounted(() => {
   initRequist()
   initWebSocket()
 })
diff --git a/src/pages/TableBlock/Block/details.vue b/src/pages/TableBlock/Block/details.vue
index 6f066c7..2c4b922 100644
--- a/src/pages/TableBlock/Block/details.vue
+++ b/src/pages/TableBlock/Block/details.vue
@@ -16,7 +16,7 @@
       >
     </div>
     <div class="mobile:hidden mt-[38px]">
-      <bk-desktop-details />
+      <bk-desktop-details :data="detailsData" />
     </div>
     <div class="desktop:hidden mt-[38px]">
       <bk-mobile-details />
@@ -49,13 +49,28 @@
 
 <script setup lang="ts">
 import { ArrowLeftBold } from '@element-plus/icons-vue'
+import { getBlock } from '@src/api/BlockController'
 import BkDesktopDetails from '@src/components/table/desktop/bkTableDetails.vue'
 import BkMobileDetails from '@src/components/table/mobile/bkTableDetails.vue'
 
 import router from '@src/routes'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 
+const route = useRoute()
 const active = ref('Block')
+let detailsData = ref([])
+
+const initRequest = async (hash: string) => {
+  const res = await getBlock({ hash: hash })
+  detailsData.value = res.data
+}
+
+onMounted(() => {
+  // 计算hash 通过hash获取数据
+  let hash = route.path.split('/')?.[2]
+  initRequest(hash)
+})
 
 // 路由回退
 const goBack = () => router.back()
diff --git a/src/pages/TableBlock/Block/index.vue b/src/pages/TableBlock/Block/index.vue
index 40c53dc..1a36add 100644
--- a/src/pages/TableBlock/Block/index.vue
+++ b/src/pages/TableBlock/Block/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full desktop:pt-[23px] mobile:pt-[13px]">
     <div class="mobile:hidden">
-      <desktop-bk-table :data="tableData" />
+      <desktop-bk-table />
     </div>
     <div class="desktop:hidden">
       <mobile-bk-table :data="tableData" />
@@ -12,6 +12,7 @@
 <script setup lang="ts">
 import DesktopBkTable from '@src/components/table/desktop/bkTable.vue'
 import MobileBkTable from '@src/components/table/mobile/bkTable.vue'
+
 const tableData = [
   {
     block: '0xdhd.....qwsh1',
diff --git a/src/utils/string.ts b/src/utils/string.ts
new file mode 100644
index 0000000..52edf38
--- /dev/null
+++ b/src/utils/string.ts
@@ -0,0 +1,13 @@
+import dayjs from 'dayjs'
+
+export const middleDecimal = (char: string) => {
+  if (char.length < 10) {
+    return char
+  }
+  const len = char.length
+  return `${char.slice(0, 4)}...${char.slice(len - 4, len)}`
+}
+
+export const timeConvert = (time: number) => {
+  return dayjs().format('YYYY-MM-DD hh:mm:ss')
+}
diff --git a/src/utils/throttle.ts b/src/utils/throttle.ts
new file mode 100644
index 0000000..fbf0970
--- /dev/null
+++ b/src/utils/throttle.ts
@@ -0,0 +1,13 @@
+import { ref } from 'vue'
+
+export const Throttle = (fn: () => void, delay: number | undefined) => {
+  const isThtottle = ref(true)
+  return () => {
+    if (!isThtottle.value) return
+    isThtottle.value = false
+    setTimeout(() => {
+      fn()
+      isThtottle.value = true
+    }, delay)
+  }
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 974ed93..bc3baf2 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -18,12 +18,14 @@ module.exports = {
         'black-006': 'rgba(255, 255, 255, 0.06)',
         'black-3B3B3C': '#3B3B3C',
         'black-2B2B2C': '#2B2B2C',
+        'black-262626': '#262626',
         'gray-303031': '#303031',
         'gray-969697': '#969697',
         'gray-BBB': '#BBBBBB',
         'gray-7D7D7E': '#7D7D7E',
         'gray-C1C0C0': '#C1C0C0',
         'gray-555': '#555555',
+        'gray-323232': '#323232',
         'green-1DE9B6': '#1DE9B6',
         'green-2EAA7D': '#2EAA7D',
         'blue-65B5FF': '#65B5FF',
diff --git a/yarn.lock b/yarn.lock
index d1febd7..90132e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -498,6 +498,11 @@ dayjs@^1.11.3:
   resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.5.tgz"
   integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
 
+dayjs@^1.11.5:
+  version "1.11.5"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
+  integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
+
 debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz"