75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<template>
|
|
<ClientOnly>
|
|
<TopMenu @changetab="changeTab" />
|
|
</ClientOnly>
|
|
<ClientOnly>
|
|
<div class="container blockdiv pb-2">
|
|
<div class="fsb-18 mb-2 has-text-black" v-if="tab">
|
|
<template v-if="subtab">
|
|
<span>{{ tab[$store.lang] }}</span>
|
|
<SvgIcon
|
|
class="mx-2"
|
|
v-bind="{ name: 'right.svg', size: 17, type: 'has-text-black' }"
|
|
></SvgIcon>
|
|
<span>{{ subtab[$store.lang] }}</span>
|
|
</template>
|
|
<span v-else>{{ tab[$store.lang] }}</span>
|
|
<a class="ml-3" @click="refresh()">
|
|
<SvgIcon
|
|
v-bind="{ name: 'refresh.svg', type: 'primary', size: 20 }"
|
|
></SvgIcon>
|
|
</a>
|
|
</div>
|
|
<KeepAlive>
|
|
<component
|
|
:is="componentMap[vbind.component]"
|
|
v-bind="vbind"
|
|
:key="componentKey"
|
|
v-if="componentKey"
|
|
/>
|
|
</KeepAlive>
|
|
</div>
|
|
</ClientOnly>
|
|
</template>
|
|
<script setup>
|
|
const { $createMeta, $store, $copy, $id } = useNuxtApp();
|
|
const componentMap = {};
|
|
const componentKey = ref();
|
|
var vbind = {};
|
|
var tab, subtab, currentTab;
|
|
const toPascalCase = (str) => {
|
|
if (!str || typeof str !== 'string') return str;
|
|
return str
|
|
.split('/')
|
|
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
|
.join('');
|
|
};
|
|
function changeTab(_tab, _subtab) {
|
|
tab = _tab;
|
|
subtab = _subtab;
|
|
currentTab = subtab || tab;
|
|
if (currentTab.detail) {
|
|
vbind =
|
|
$store.lang === 'en'
|
|
? currentTab.detail_en || currentTab.detail
|
|
: currentTab.detail;
|
|
}
|
|
componentMap[vbind.component] = vbind.base || toPascalCase(vbind.component);
|
|
componentKey.value = vbind.component;
|
|
$store.commit('tabinfo', { tab, subtab, current: currentTab, vbind });
|
|
let meta = {
|
|
title: currentTab[$store.lang],
|
|
image: undefined,
|
|
description: 'Utopia',
|
|
type: 'article',
|
|
keywords: 'utopia',
|
|
};
|
|
useHead($createMeta(meta));
|
|
}
|
|
function refresh() {
|
|
const copy = $copy(componentKey.value) + $id();
|
|
componentKey.value = undefined;
|
|
setTimeout(() => (componentKey.value = copy));
|
|
}
|
|
</script>
|