118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<!-- 顶部快速入口面板 -->
|
|
<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 lang="ts">
|
|
import { useFastEnter } from '@/hooks/core/useFastEnter'
|
|
import type { FastEnterApplication, FastEnterQuickLink } from '@/types/config'
|
|
|
|
defineOptions({ name: 'ArtFastEnter' })
|
|
|
|
const router = useRouter()
|
|
const popoverRef = ref()
|
|
|
|
// 使用快速入口配置
|
|
const { enabledApplications, enabledQuickLinks } = useFastEnter()
|
|
|
|
/**
|
|
* 处理导航跳转
|
|
* @param routeName 路由名称
|
|
* @param link 外部链接
|
|
*/
|
|
const handleNavigate = (routeName?: string, link?: string): void => {
|
|
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()
|
|
}
|
|
|
|
/**
|
|
* 处理应用项点击
|
|
* @param application 应用配置对象
|
|
*/
|
|
const handleApplicationClick = (application: FastEnterApplication): void => {
|
|
handleNavigate(application.routeName, application.link)
|
|
}
|
|
|
|
/**
|
|
* 处理快速链接点击
|
|
* @param quickLink 快速链接配置对象
|
|
*/
|
|
const handleQuickLinkClick = (quickLink: FastEnterQuickLink): void => {
|
|
handleNavigate(quickLink.routeName, quickLink.link)
|
|
}
|
|
</script>
|