多维表格
 
 
 
 
 
 

137 lines
4.2 KiB

<script lang="ts" setup>
const { isLoading } = useGlobal()
const { isMobileMode } = storeToRefs(useConfigStore())
const { sharedView, allowCSVDownload } = useSharedView()
const router = useRouter()
const route = router.currentRoute
const disableTopbar = computed(() => route.value.query?.disableTopbar === 'true')
onMounted(() => {
// check if we are inside an iframe
// if we are, communicate to the parent page whenever we navigate to a new url,
// so that the parent page can respond to it properly.
// E.g. by making the browser navigate to that url, and not just the iframe.
// This is useful for integrating NocoDB into other products,
// such as Outline (https://github.com/outline/outline/pull/4184).
if (window.parent !== window) {
const notifyLocationChange = (value: string) =>
window.parent.postMessage(
{
event: 'locationchange',
payload: { value },
},
'*',
)
router.afterEach((to) => notifyLocationChange(location.origin + to.fullPath))
useEventListener(window, 'beforeunload', () => {
const { href } = document.activeElement as { href?: string }
if (href) notifyLocationChange(href)
})
}
// handle meta title
if (sharedView.value?.title) {
document.title = `${sharedView.value.title}`
} else {
document.title = 'NocoDB'
}
})
</script>
<script lang="ts">
export default {
name: 'SharedView',
}
</script>
<template>
<a-layout id="nc-app">
<a-layout class="!flex-col bg-white">
<a-layout-header
v-if="!disableTopbar"
class="nc-table-topbar flex items-center justify-between !bg-transparent !px-3 !py-2 border-b-1 border-gray-200 !h-[46px]"
>
<div class="flex items-center gap-6 h-7 max-w-[calc(100%_-_280px)] xs:max-w-[calc(100%_-_90px)]">
<a
class="transition-all duration-200 cursor-pointer transform hover:scale-105"
href="https://github.com/nocodb/nocodb"
target="_blank"
rel="noopener noreferrer"
>
<img width="96" alt="NocoDB" src="~/assets/img/brand/nocodb.png" class="flex-none min-w-[96px]" />
</a>
<div class="flex items-center gap-2 text-gray-900 text-sm truncate">
<template v-if="isLoading">
<span data-testid="nc-loading">{{ $t('general.loading') }}</span>
<component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin ': isLoading }" />
</template>
<div v-else class="text-sm font-semibold truncate nc-shared-view-title flex gap-2 items-center">
<GeneralViewIcon v-if="sharedView" class="h-4 w-4 ml-0.5" :meta="sharedView" />
<span class="truncate">
{{ sharedView?.title }}
</span>
<NcTooltip v-if="sharedView?.description?.length" placement="bottom">
<template #title>
{{ sharedView?.description }}
</template>
<NcButton type="text" class="!hover:bg-transparent" size="xsmall">
<GeneralIcon icon="info" class="!w-3.5 !h-3.5 nc-info-icon text-gray-600" />
</NcButton>
</NcTooltip>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<LazySmartsheetToolbarExport v-if="allowCSVDownload" />
<a href="https://app.nocodb.com/#/signin" target="_blank" class="!no-underline xs:hidden" rel="noopener">
<NcButton size="xs"> {{ $t('labels.signUpForFree') }} </NcButton>
</a>
</div>
</a-layout-header>
<div
class="nc-shared-view-container w-full overflow-hidden"
:class="{
'nc-shared-mobile-view': isMobileMode,
}"
>
<slot />
</div>
</a-layout>
</a-layout>
</template>
<style lang="scss" scoped>
#nc-app {
.ant-layout-header {
@apply !h-[46px];
line-height: unset;
}
:deep(.nc-table-toolbar) {
@apply px-2;
}
.nc-shared-view-container {
height: calc(100vh - (var(--topbar-height) - 3.6px));
@supports (height: 100dvh) {
height: calc(100dvh - (var(--topbar-height) - 3.6px));
}
}
}
</style>