zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

修改浏览器接口

Browse Source
This commit is contained in:
liangping 2023-05-26 14:24:05 +08:00
parent b4c60a5860
commit f693684222
1 changed files with 38 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/layouts/components/ChainProfile.vue
View File

@ -1,8 +1,16 @@
<script setup lang="ts">
import { useBlockchain, useBaseStore } from '@/stores';
import router from '@/router';
import { useBlockchain, useBaseStore, type Endpoint } from '@/stores';
import { useRouter } from 'vue-router';
const chainStore = useBlockchain();
const baseStore = useBaseStore();
chainStore.initial();
function changeEndpoint(item: Endpoint) {
console.log('change')
chainStore.setRestEndpoint(item)
const router = useRouter()
if(chainStore.current) router.push(`/${chainStore.current.chainName}`)
}
</script>
<template>
@ -18,7 +26,35 @@ chainStore.initial();
class="dropdown-content w-80 menu shadow bg-base-200 rounded-box max-h-[300px] overflow-auto"
>
<!-- rest -->
<div class="px-4 py-2 text-sm text-gray-400">
<div
class="px-4 py-2 text-sm text-gray-400"
v-if="chainStore.current?.endpoints?.rest"
>
Rest Endpoint
</div>
<label
v-for="(item, index) in chainStore.current?.endpoints?.rest"
class="px-4 py-2 w-full hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
:key="index"
>
<div class="flex flex-col"
@click="changeEndpoint(item)">
<div class="flex items-center justify-between w-full">
<div class="text-gray-500 dark:text-gray-200 capitalize">
{{ item.provider }}
</div>
<span
v-if="item.address === chainStore.endpoint?.address"
class="bg-yes inline-block h-2 w-2 rounded-full"
/>
</div>
<div class="text-gray-400 text-xs whitespace-nowrap">
{{ item.address }}
</div>
</div>
</label>
<!-- rest -->
<div class="px-4 py-2 text-sm text-gray-400">
Information
</div>
<div class="w-full hover:bg-gray-100 dark:bg-[#384059]">
@ -29,64 +65,9 @@ chainStore.initial();
Height: {{ baseStore.latest.block?.header.height }}
</div>
</div>
<!-- rest -->
<div
class="px-4 py-2 text-sm text-gray-400"
v-if="chainStore.current?.endpoints?.rest"
>
Rest Endpoint
</div>
<div
v-for="(item, index) in chainStore.current?.endpoints?.rest"
@click="chainStore.setRestEndpoint(item)"
class="px-4 py-2 w-full hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
:key="index"
>
<div class="flex flex-col items-start">
<div class="flex items-center justify-between w-full">
<div class="text-gray-500 dark:text-gray-200 capitalize">
{{ item.provider }}
</div>
<span
v-if="item.address === chainStore.endpoint?.address"
class="bg-yes inline-block h-2 w-2 rounded-full"
/>
</div>
<div class="text-gray-400 text-xs whitespace-nowrap">
{{ item.address }}
</div>
</div>
</div>
<!-- grpc -->
<div
class="px-4 py-2 text-sm text-gray-400"
v-if="chainStore.current?.endpoints?.grpc"
>
gRPC Endpoint
</div>
<ul tabindex="0">
<li
v-for="(item, index) in chainStore.current?.endpoints?.grpc"
:key="index"
>
<div class="flex flex-col items-start">
<div class="flex items-center justify-between w-full">
<p class="text-gray-500 dark:text-gray-200 capitalize">
{{ item?.provider }}
</p>
</div>
<div class="text-gray-400 text-xs whitespace-nowrap">
{{ item?.address }}
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="flex-1 w-0">
<Transition name="fade" mode="out-in" appear>
<div :key="baseStore.latest?.block?.header?.height || chainStore.chainName || ''"
class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
>
@ -94,7 +75,6 @@ chainStore.initial();
baseStore.latest?.block?.header?.height || chainStore.chainName || ''
}}
</div>
</Transition>
<div
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
>
@ -103,14 +83,3 @@ chainStore.initial();
</div>
</div>
</template>
<style>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>