<!-- 顶部快速入口面板 -->
|
<template>
|
<ElPopover
|
ref="popoverRef"
|
:width="700"
|
:offset="0"
|
:show-arrow="false"
|
trigger="hover"
|
placement="bottom-start"
|
popper-class="fast-enter-popover"
|
:popper-style="{
|
border: '1px solid var(--default-border)',
|
borderRadius: 'calc(var(--custom-radius) / 2 + 4px)'
|
}"
|
>
|
<template #reference>
|
<div class="flex-c gap-2">
|
<slot />
|
</div>
|
</template>
|
|
<div class="grid grid-cols-[2fr_0.8fr]">
|
<div>
|
<div class="grid grid-cols-2 gap-1.5">
|
<!-- 应用列表 -->
|
<div
|
v-for="application in enabledApplications"
|
:key="application.name"
|
class="mr-3 c-p flex-c gap-3 rounded-lg p-2 hover:bg-g-200/70 dark:hover:bg-g-200/90 hover:[&_.app-icon]:!bg-transparent"
|
@click="handleApplicationClick(application)"
|
>
|
<div class="app-icon size-12 flex-cc rounded-lg bg-g-200/80 dark:bg-g-300/30">
|
<ArtSvgIcon
|
class="text-xl"
|
:icon="application.icon"
|
:style="{ color: application.iconColor }"
|
/>
|
</div>
|
<div>
|
<h3 class="m-0 text-sm font-medium text-g-800">{{ application.name }}</h3>
|
<p class="mt-1 text-xs text-g-600">{{ application.description }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="border-l-d pl-6 pt-2">
|
<h3 class="mb-2.5 text-base font-medium text-g-800">快速链接</h3>
|
<ul>
|
<li
|
v-for="quickLink in enabledQuickLinks"
|
:key="quickLink.name"
|
class="c-p py-2 hover:[&_span]:text-theme"
|
@click="handleQuickLinkClick(quickLink)"
|
>
|
<span class="text-g-600 no-underline">{{ quickLink.name }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</ElPopover>
|
</template>
|
|
<script setup>
|
import { useFastEnter } from '@/hooks/core/useFastEnter'
|
defineOptions({ name: 'ArtFastEnter' })
|
const router = useRouter()
|
const popoverRef = ref()
|
const { enabledApplications, enabledQuickLinks } = useFastEnter()
|
const handleNavigate = (routeName, link) => {
|
const targetPath = routeName || link
|
if (!targetPath) {
|
console.warn('导航配置无效：缺少路由名称或链接')
|
return
|
}
|
if (targetPath.startsWith('http')) {
|
window.open(targetPath, '_blank')
|
} else {
|
router.push({ name: targetPath })
|
}
|
popoverRef.value?.hide()
|
}
|
const handleApplicationClick = (application) => {
|
handleNavigate(application.routeName, application.link)
|
}
|
const handleQuickLinkClick = (quickLink) => {
|
handleNavigate(quickLink.routeName, quickLink.link)
|
}
|
</script>
|
