forked from cerc-io/cosmos-explorer
add modules name
This commit is contained in:
liangping
parent
70351f3833
commit
8c31935432
@ -38,6 +38,7 @@
|
||||
"vite-plugin-vuetify": "^1.0.2",
|
||||
"vue": "^3.2.45",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-json-pretty": "^2.2.4",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue3-apexcharts": "^1.4.1",
|
||||
"vue3-perfect-scrollbar": "^1.6.1",
|
||||
|
||||
@ -9,9 +9,9 @@ const props = defineProps(["value"]);
|
||||
<VTable>
|
||||
<tbody>
|
||||
<tr v-for="(v, k) of value">
|
||||
<td class="text-capitalize">{{ k }}</td>
|
||||
<td class="text-capitalize" style="max-width: 200px;">{{ k }}</td>
|
||||
<td><div class="overflow-hidden w-auto" style="max-width: 1000px;">
|
||||
<Component v-if="v" :is="select(v, k)" :value="v"></Component></div>
|
||||
<Component v-if="v" :is="select(v, 'horizontal')" :value="v"></Component></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
17
src/components/dynamic/ObjectHorizontalElement.vue
Normal file
17
src/components/dynamic/ObjectHorizontalElement.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts" setup>
|
||||
import DynamicComponent from './DynamicComponent.vue';
|
||||
import {select} from './index'
|
||||
|
||||
const props = defineProps(["value"]);
|
||||
const tab = ref("")
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<VTabs v-model="tab">
|
||||
<VTab v-for="(v, k) of value" :value="k">{{ k }}</VTab>
|
||||
</VTabs>
|
||||
<VWindow v-model="tab" style="min-height: 25px;">
|
||||
<VWindowItem v-for="(v, k) of value" :value="k"><DynamicComponent :value="v"/></VWindowItem>
|
||||
</VWindow>
|
||||
</div>
|
||||
</template>
|
||||
@ -4,26 +4,26 @@ import ArrayElement from './ArrayElement.vue'
|
||||
import UInt8Array from './UInt8Array.vue'
|
||||
import NumberElement from './NumberElement.vue'
|
||||
import TxsElement from './TxsElement.vue'
|
||||
import ObjectHorizontalElement from './ObjectHorizontalElement.vue'
|
||||
import Long from 'long'
|
||||
|
||||
export function select(v: any, k?: any) {
|
||||
if(k === 'txs' && v) {
|
||||
console.log("=======txs=======", k, v)
|
||||
return TxsElement
|
||||
} else {
|
||||
export function select(v: any, direct?: string) {
|
||||
// if(k === 'txs' && v) {
|
||||
// return TxsElement
|
||||
// } else {
|
||||
const type = typeof v
|
||||
switch(type) {
|
||||
case 'object':
|
||||
return selectObject(v)
|
||||
return selectObject(v, direct)
|
||||
case 'number':
|
||||
return NumberElement
|
||||
default:
|
||||
return TextElement
|
||||
}
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
function selectObject(v: Object) {
|
||||
function selectObject(v: Object, direct?: string) {
|
||||
switch(true) {
|
||||
case v instanceof Long:
|
||||
return NumberElement
|
||||
@ -31,6 +31,8 @@ function selectObject(v: Object) {
|
||||
return UInt8Array
|
||||
case Array.isArray(v):
|
||||
return ArrayElement
|
||||
case direct === 'horizontal':
|
||||
return ObjectHorizontalElement
|
||||
default:
|
||||
return ObjectElement
|
||||
}
|
||||
|
||||
@ -68,4 +68,12 @@ const format = useFormatter()
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<route>
|
||||
{
|
||||
meta: {
|
||||
i18n: 'blocks'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
@ -189,3 +189,11 @@ function shortName(name: string, id: string) {
|
||||
border: 1px solid rgb(var(--v-theme-primary));
|
||||
}
|
||||
</style>
|
||||
|
||||
<route>
|
||||
{
|
||||
meta: {
|
||||
i18n: 'dashboard'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
@ -228,4 +228,12 @@ const rank = function(position: number) {
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<route>
|
||||
{
|
||||
meta: {
|
||||
i18n: 'staking'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
@ -3,6 +3,8 @@ import { useBlockchain, useFormatter } from '@/stores';
|
||||
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
|
||||
import { computed, ref } from '@vue/reactivity';
|
||||
import type { Tx, TxResponse } from '@/types';
|
||||
import VueJsonPretty from 'vue-json-pretty';
|
||||
import 'vue-json-pretty/lib/styles.css';
|
||||
|
||||
const props = defineProps(['hash', 'chain'])
|
||||
|
||||
@ -40,27 +42,21 @@ const messages = computed(() => {
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VCard title="Messages" class="my-5">
|
||||
<VCardItem style="border-top: 2px dotted gray;">
|
||||
<VCard :title="`Messages: (${messages.length})`" class="my-5">
|
||||
<VCardItem class="pt-0" style="border-top: 2px dotted gray;">
|
||||
<div v-for="(msg, i) in messages">
|
||||
<div><DynamicComponent :value="msg" /></div>
|
||||
</div>
|
||||
<div v-if="messages.length === 0">
|
||||
<VIcon icon="mdi-empty"/>
|
||||
</div>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
<VCard title="Detail">
|
||||
<VExpansionPanels>
|
||||
<VExpansionPanel title="Transaction">
|
||||
<v-expansion-panel-text>
|
||||
<DynamicComponent :value="tx.tx" />
|
||||
</v-expansion-panel-text>
|
||||
</VExpansionPanel>
|
||||
<VExpansionPanel title="Transaction Response">
|
||||
<v-expansion-panel-text>
|
||||
<DynamicComponent :value="tx.tx_response" />
|
||||
</v-expansion-panel-text>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
<VCard title="JSON">
|
||||
<VCardItem class="pt-0">
|
||||
<vue-json-pretty :data="tx" :deep="3"/>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
{
|
||||
"module": {
|
||||
"chain": "面板首页",
|
||||
"chain-test": "测试功能",
|
||||
"dashboard": "面板首页",
|
||||
"blocks": "区块和交易",
|
||||
"staking": "质押生息",
|
||||
"governance": "社区治理"
|
||||
},
|
||||
"index": {
|
||||
"slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
{
|
||||
"module": {
|
||||
"chain": "Dashboard",
|
||||
"chain-test": "test",
|
||||
"dashboard": "Dashboard",
|
||||
"blocks": "Blocks&Transaction",
|
||||
"staking": "Staking",
|
||||
"governance": "Governance"
|
||||
},
|
||||
"index": {
|
||||
"slogan": "Ping Dashboard is not just an explorer but also a wallet and more ... 🛠",
|
||||
|
||||
@ -24,7 +24,7 @@ export const useBankStore = defineStore('bankstore', {
|
||||
initial() {
|
||||
this.$reset()
|
||||
this.supply = {} as Coin
|
||||
const denom = this.staking.params.bondDenom || this.blockchain.current?.assets[0].base
|
||||
const denom = this.staking.params.bond_denom || this.blockchain.current?.assets[0].base
|
||||
if(denom) {
|
||||
this.blockchain.rpc.getBankSupplyByDenom(denom).then(res => {
|
||||
if(res.amount) this.supply = res.amount
|
||||
|
||||
@ -43,9 +43,9 @@ export const useBlockchain = defineStore("blockchain", {
|
||||
icon: {image: this.current.logo, size: '22'},
|
||||
i18n: false,
|
||||
children: routes
|
||||
.filter(x=>x.name && x.name.toString().startsWith('chain'))
|
||||
.filter(x=> x.meta.i18n)
|
||||
.map(x => ({
|
||||
title: `module.${x.name?.toString()}`,
|
||||
title: `module.${x.meta.i18n}`,
|
||||
to: {path: x.path.replace(':chain',this.chainName)},
|
||||
icon: { icon: 'mdi-chevron-right', size: '22'},
|
||||
i18n: true
|
||||
@ -112,7 +112,6 @@ export const useBlockchain = defineStore("blockchain", {
|
||||
this.connErr = ''
|
||||
this.endpoint = endpoint
|
||||
this.rpc = new CosmosRestClient(endpoint.address)
|
||||
// console.log(this.rpc.endpoint)
|
||||
},
|
||||
setCurrent(name: string) {
|
||||
this.chainName = name
|
||||
|
||||
@ -7814,6 +7814,11 @@ vue-i18n@^9.2.2:
|
||||
"@intlify/vue-devtools" "9.2.2"
|
||||
"@vue/devtools-api" "^6.2.1"
|
||||
|
||||
vue-json-pretty@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/vue-json-pretty/-/vue-json-pretty-2.2.4.tgz#4c82fa78aeb987460c727c3b31e45a58f58d9c95"
|
||||
integrity sha512-JX80b3QDrspcH43C53CdtYeq/froApQGSV5y43bEMWFj2LGOxB96aH1VmvrFA21nD1WTP6nwfFMQqGXuS4jyFQ==
|
||||
|
||||
vue-router@^4.1.6:
|
||||
version "4.1.6"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user