Jason/league-explorer-typescript
1
0
Fork 0
forked from UzTech/Vue3-typescript-demo
Code Issues Pull Requests Projects Releases 1 Wiki Activity

fix

Browse Source
This commit is contained in:
Jason.Chen
2021-09-26 11:05:00 +08:00
parent be191c0f93
commit df76b78735
13 changed files with 163 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.vue
View File

@@ -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>

26
src/components/Banner.vue
View File

@@ -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(() => {

26
src/components/Breadcrumb.vue Normal file
View File

@@ -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>

2
src/components/Header.vue
View File

@@ -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>

2
src/components/Nav.vue
View File

@@ -36,7 +36,7 @@ const navList = ref([
route: 'Broadcast'
}
])
const linkTo = (name) => {
const linkTo = (name: string) => {
router.push({ name })
}
// endregion

14
src/views/404.vue
View File

@@ -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>

12
src/views/Address/index.vue
View File

@@ -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">

131
src/views/Block/detail.vue
View File

@@ -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>

14
src/views/Block/index.vue
View File

@@ -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;
}

8
src/views/Other/analytical.vue
View File

@@ -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>

9
src/views/Other/broadcast.vue
View File

@@ -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>('')

10
src/views/Trade/detail.vue
View File

@@ -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([])

13
src/views/Trade/index.vue
View File

@@ -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;