mirror of https://github.com/nocodb/nocodb
79 lines
2.2 KiB
79 lines
2.2 KiB
<script lang="ts" setup> |
|
import { useGlobal, useProject } from '#imports' |
|
|
|
const showDrawer = ref(false) |
|
|
|
const { appInfo } = useGlobal() |
|
|
|
const { project } = useProject() |
|
|
|
const route = useRoute() |
|
|
|
const openSwaggerLink = () => { |
|
openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.value.ncSiteUrl) |
|
} |
|
</script> |
|
|
|
<template> |
|
<div |
|
class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)" |
|
@click="showDrawer = true" |
|
> |
|
<MdiCommentTextOutline class="mr-1" /> |
|
<!-- APIs & Support --> |
|
<div>{{ $t('title.APIsAndSupport') }}</div> |
|
</div> |
|
|
|
<a-drawer |
|
v-bind="$attrs" |
|
v-model:visible="showDrawer" |
|
class="h-full relative nc-drawer-help-and-support" |
|
placement="right" |
|
size="small" |
|
:closable="false" |
|
:body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }" |
|
> |
|
<div class="flex flex-col w-full h-full p-4 pb-0"> |
|
<!-- Help center --> |
|
<a-typography-title :level="4" class="!mb-6 !text-gray-500">{{ $t('title.helpCenter') }}</a-typography-title> |
|
|
|
<GeneralSocialCard class="!w-full nc-social-card"> |
|
<template #before> |
|
<a-list-item v-if="project"> |
|
<nuxt-link |
|
v-e="['a:navbar:user:swagger']" |
|
class="!no-underline !text-current py-4 font-semibold" |
|
target="_blank" |
|
@click="openSwaggerLink" |
|
> |
|
<div class="ml-3 flex items-center text-sm"> |
|
<LogosSwagger /> |
|
<!-- Swagger Documentation --> |
|
<span class="ml-3">{{ project.title }} : {{ $t('title.swaggerDocumentation') }}</span> |
|
</div> |
|
</nuxt-link> |
|
</a-list-item> |
|
</template> |
|
</GeneralSocialCard> |
|
<div class="min-h-10 w-full" /> |
|
</div> |
|
</a-drawer> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
/* Social card style */ |
|
.nc-social-card { |
|
@apply !shadow-none !border-0 bg-transparent; |
|
|
|
:deep(.ant-spin-container) { |
|
@apply !gap-3; |
|
|
|
.ant-list-item { |
|
@apply mb-2 border-1 bg-white border-gray-200; |
|
&:last-child { |
|
@apply !border-solid; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|