deep-stack/cosmos-explorer
7
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

hide Sponsors

Browse Source
This commit is contained in:
liangping 2025-05-29 07:23:38 +08:00
parent e4dd3c7e43
commit 58e68077b0
1 changed files with 85 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
src/layouts/components/DefaultLayout.vue
View File

@ -27,7 +27,7 @@ const baseStore = useBaseStore();
const current = ref(''); // the current chain
const temp = ref('')
blockchain.$subscribe((m, s) => {
if(current.value ===s.chainName && temp.value != s.endpoint.address) {
if (current.value === s.chainName && temp.value != s.endpoint.address) {
temp.value = s.endpoint.address
blockchain.initial();
}
@ -48,13 +48,13 @@ const changeOpen = (index: Number) => {
const showDiscord = window.location.host.search('ping.pub') > -1;
function isNavGroup(nav: VerticalNavItems | any): nav is NavGroup {
return (<NavGroup>nav).children !== undefined;
return (<NavGroup>nav).children !== undefined;
}
function isNavLink(nav: VerticalNavItems | any): nav is NavLink {
return (<NavLink>nav).to !== undefined;
return (<NavLink>nav).to !== undefined;
}
function isNavTitle(nav: VerticalNavItems | any): nav is NavSectionTitle {
return (<NavSectionTitle>nav).heading !== undefined;
return (<NavSectionTitle>nav).heading !== undefined;
}
function selected(route: any, nav: NavLink) {
const b = route.path === nav.to?.path || route.path.startsWith(nav.to?.path) && nav.title.indexOf('dashboard') === -1
@ -82,8 +82,7 @@ const show_ad = computed(() => {
<!-- sidebar -->
<div
class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
:class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
>
:class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }">
<div class="flex justify-between mt-1 pl-4 py-4 mb-1">
<RouterLink to="/" class="flex items-center">
<img class="w-10 h-10" src="../../assets/logo.svg" />
@ -91,118 +90,63 @@ const show_ad = computed(() => {
Ping.pub
</h1>
</RouterLink>
<div
class="pr-4 cursor-pointer xl:!hidden"
@click="sidebarShow = false"
>
<div class="pr-4 cursor-pointer xl:!hidden" @click="sidebarShow = false">
<Icon icon="mdi-close" class="text-2xl" />
</div>
</div>
<div
v-for="(item, index) of blockchain.computedChainMenu"
:key="index"
class="px-2"
>
<div
v-if="isNavGroup(item)"
:tabindex="index"
class="collapse"
:class="{
'collapse-arrow':index > 0 && item?.children?.length > 0,
'collapse-open': index === 0 && sidebarOpen,
'collapse-close': index === 0 && !sidebarOpen,
}"
>
<input
v-if="index > 0"
type="checkbox"
class="cursor-pointer !h-10 block"
@click="changeOpen(index)"
/>
<div v-for="(item, index) of blockchain.computedChainMenu" :key="index" class="px-2">
<div v-if="isNavGroup(item)" :tabindex="index" class="collapse" :class="{
'collapse-arrow': index > 0 && item?.children?.length > 0,
'collapse-open': index === 0 && sidebarOpen,
'collapse-close': index === 0 && !sidebarOpen,
}">
<input v-if="index > 0" type="checkbox" class="cursor-pointer !h-10 block" @click="changeOpen(index)" />
<div
class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<Icon
v-if="item?.icon?.icon"
:icon="item?.icon?.icon"
class="text-xl mr-2"
:class="{
'text-yellow-500': item?.title === 'Favorite',
'text-blue-500': item?.title !== 'Favorite',
}"
/>
<img
v-if="item?.icon?.image"
:src="item?.icon?.image"
class="w-6 h-6 rounded-full mr-3"
/>
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"
>
class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
<Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
'text-yellow-500': item?.title === 'Favorite',
'text-blue-500': item?.title !== 'Favorite',
}" />
<img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
<div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
{{ item?.title }}
</div>
<div
v-if="item?.badgeContent"
class="mr-6 badge badge-sm text-white border-none"
:class="item?.badgeClass"
>
<div v-if="item?.badgeContent" class="mr-6 badge badge-sm text-white border-none" :class="item?.badgeClass">
{{ item?.badgeContent }}
</div>
</div>
<div class="collapse-content">
<div class="collapse-content">
<div v-for="(el, key) of item?.children" class="menu bg-base-100 w-full !p-0">
<RouterLink
v-if="isNavLink(el)"
@click="sidebarShow = false"
<RouterLink v-if="isNavLink(el)" @click="sidebarShow = false"
class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
:class="{
'!bg-primary': selected($route, el),
}"
:to="el.to"
>
<Icon
v-if="!el?.icon?.image"
icon="mdi:chevron-right"
class="mr-2 ml-3"
:class="{
'text-white':
$route.path === el?.to?.path &&
item?.title !== 'Favorite',
}"
/>
<img
v-if="el?.icon?.image"
:src="el?.icon?.image"
class="w-6 h-6 rounded-full mr-3 ml-4 " :class="{
}" :to="el.to">
<Icon v-if="!el?.icon?.image" icon="mdi:chevron-right" class="mr-2 ml-3" :class="{
'text-white':
$route.path === el?.to?.path &&
item?.title !== 'Favorite',
}" />
<img v-if="el?.icon?.image" :src="el?.icon?.image" class="w-6 h-6 rounded-full mr-3 ml-4 " :class="{
'border border-gray-300 bg-white': selected($route, el),
}"
/>
<div
class="text-base capitalize text-gray-500 dark:text-gray-300"
:class="{
'!text-white': selected($route, el),
}"
>
}" />
<div class="text-base capitalize text-gray-500 dark:text-gray-300" :class="{
'!text-white': selected($route, el),
}">
{{ item?.title === 'Favorite' ? el?.title : $t(el?.title) }}
</div>
</RouterLink>
</div>
<div v-if="index === 0 && dashboard.networkType === NetworkType.Testnet" class="menu bg-base-100 w-full !p-0">
<RouterLink
class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
:to="`/${blockchain.chainName}/faucet`">
<Icon
icon="mdi:chevron-right"
class="mr-2 ml-3"
></Icon>
<div
class="text-base capitalize text-gray-500 dark:text-gray-300"
>
<div v-if="index === 0 && dashboard.networkType === NetworkType.Testnet"
class="menu bg-base-100 w-full !p-0">
<RouterLink
class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
:to="`/${blockchain.chainName}/faucet`">
<Icon icon="mdi:chevron-right" class="mr-2 ml-3"></Icon>
<div class="text-base capitalize text-gray-500 dark:text-gray-300">
Faucet
</div>
<div
class="badge badge-sm text-white border-none badge-error ml-auto"
>
<div class="badge badge-sm text-white border-none badge-error ml-auto">
New
</div>
</RouterLink>
@ -210,99 +154,59 @@ const show_ad = computed(() => {
</div>
</div>
<RouterLink
v-if="isNavLink(item)"
:to="item?.to"
@click="sidebarShow = false"
class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<Icon
v-if="item?.icon?.icon"
:icon="item?.icon?.icon"
class="text-xl mr-2"
:class="{
'text-yellow-500': item?.title === 'Favorite',
'text-blue-500': item?.title !== 'Favorite',
}"
/>
<img
v-if="item?.icon?.image"
:src="item?.icon?.image"
class="w-6 h-6 rounded-full mr-3 border border-blue-100"
/>
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"
>
<RouterLink v-if="isNavLink(item)" :to="item?.to" @click="sidebarShow = false"
class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]">
<Icon v-if="item?.icon?.icon" :icon="item?.icon?.icon" class="text-xl mr-2" :class="{
'text-yellow-500': item?.title === 'Favorite',
'text-blue-500': item?.title !== 'Favorite',
}" />
<img v-if="item?.icon?.image" :src="item?.icon?.image"
class="w-6 h-6 rounded-full mr-3 border border-blue-100" />
<div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
{{ item?.title }}
</div>
<div
v-if="item?.badgeContent"
class="badge badge-sm text-white border-none"
:class="item?.badgeClass"
>
<div v-if="item?.badgeContent" class="badge badge-sm text-white border-none" :class="item?.badgeClass">
{{ item?.badgeContent }}
</div>
</RouterLink>
<div
v-if="isNavTitle(item)"
class="px-4 text-sm text-gray-400 pb-2 uppercase"
>
<div v-if="isNavTitle(item)" class="px-4 text-sm text-gray-400 pb-2 uppercase">
{{ item?.heading }}
</div>
</div>
<div class="px-2">
<div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
Tools
<div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
Tools
</div>
<RouterLink to="/wallet/suggest"
class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
<Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
<div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
Wallet Helper
</div>
<RouterLink to="/wallet/suggest"
class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
<div
class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200"
>
Wallet Helper
</div>
</RouterLink>
<div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
</RouterLink>
<div v-if="showDiscord" class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">
{{ $t('module.sponsors') }}
</div>
<Sponsors />
<Sponsors v-if="showDiscord" />
<div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">{{ $t('module.links') }}</div>
<a
href="https://twitter.com/ping_pub"
target="_blank"
class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<a href="https://twitter.com/ping_pub" target="_blank"
class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]">
<Icon icon="mdi:twitter" class="text-xl mr-2" />
<div
class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200"
>
<div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
Twitter
</div>
</a>
<a
v-if="showDiscord"
href="https://discord.com/invite/CmjYVSr6GW"
target="_blank"
class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<a v-if="showDiscord" href="https://discord.com/invite/CmjYVSr6GW" target="_blank"
class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
<Icon icon="mdi:discord" class="text-xl mr-2" />
<div
class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200"
>
<div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
Discord
</div>
</a>
<a
href="https://github.com/ping-pub/explorer/discussions"
target="_blank"
class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
>
<a href="https://github.com/ping-pub/explorer/discussions" target="_blank"
class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]">
<Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
<div
class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200"
>
<div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">
FAQ
</div>
</a>
@ -310,13 +214,8 @@ const show_ad = computed(() => {
</div>
<div class="xl:!ml-64 px-3 pt-4">
<!-- header -->
<div
class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10"
>
<div
class="text-2xl pr-3 cursor-pointer xl:!hidden"
@click="sidebarShow = true"
>
<div class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10">
<div class="text-2xl pr-3 cursor-pointer xl:!hidden" @click="sidebarShow = true">
<Icon icon="mdi-menu" />
</div>
@ -333,20 +232,20 @@ const show_ad = computed(() => {
<!-- 👉 Pages -->
<div style="min-height: calc(100vh - 180px);">
<div v-if="behind" class="alert alert-error mb-4">
<div class="flex gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="stroke-current flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>{{ $t('pages.out_of_sync') }} {{ blocktime.format() }} ({{ blocktime.fromNow() }})</span>
</div>
<div v-if="behind" class="alert alert-error mb-4">
<div class="flex gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="stroke-current flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>{{ $t('pages.out_of_sync') }} {{ blocktime.format() }} ({{ blocktime.fromNow() }})</span>
</div>
</div>
<RouterView v-slot="{ Component }">
<Transition mode="out-in">
<div>
<AdBanner v-if="show_ad"/>
<AdBanner v-if="show_ad" />
<Component :is="Component" />
</div>
</Transition>