add modules name

2023-04-06 09:48:59 +08:00 · 2023-04-06 09:48:59 +08:00 · 8c31935432
commit 8c31935432
parent 70351f3833
13 changed files with 83 additions and 35 deletions
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/components/dynamic/ObjectElement.vue
+++ b/src/components/dynamic/ObjectElement.vue
@ -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>
--- a/src/components/dynamic/ObjectHorizontalElement.vue
+++ b/src/components/dynamic/ObjectHorizontalElement.vue
@ -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>
--- a/src/components/dynamic/index.ts
+++ b/src/components/dynamic/index.ts
@ -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
    }
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@ -68,4 +68,12 @@ const format = useFormatter()
        </VCardActions>
    </VCard>
 
-</template>
+</template>
+
+<route>
+    {
+      meta: {
+        i18n: 'blocks'
+      }
+    }
+  </route>
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@ -189,3 +189,11 @@ function shortName(name: string, id: string) {
  border: 1px solid rgb(var(--v-theme-primary));
 }
 </style>
+
+<route>
+  {
+    meta: {
+      i18n: 'dashboard'
+    }
+  }
+</route>
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@ -228,4 +228,12 @@ const rank = function(position: number) {
        </VCardActions>
        </VCard>
    </div>
-</template>
+</template>
+
+<route>
+  {
+    meta: {
+      i18n: 'staking'
+    }
+  }
+</route>
--- a/src/modules/[chain]/tx/[hash].vue
+++ b/src/modules/[chain]/tx/[hash].vue
@ -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>
--- a/src/plugins/i18n/locales/cn.json
+++ b/src/plugins/i18n/locales/cn.json
@ -1,7 +1,9 @@
 {
  "module": {
-    "chain": "面板首页",
-    "chain-test": "测试功能",
+    "dashboard": "面板首页",
+    "blocks": "区块和交易",
+    "staking": "质押生息",
+    "governance": "社区治理"
  },
  "index": {
    "slogan": "Ping Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@ -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 ... 🛠",
--- a/src/stores/useBankStore.ts
+++ b/src/stores/useBankStore.ts
@ -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
--- a/src/stores/useBlockchain.ts
+++ b/src/stores/useBlockchain.ts
@ -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
--- a/yarn.lock
+++ b/yarn.lock
@ -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"