47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const props = defineProps<{
|
|
item: any
|
|
}>();
|
|
|
|
const route = useRoute();
|
|
const isFolder = computed(() => props.item.type === 'folder');
|
|
|
|
const targetUrl = computed(() => {
|
|
if (isFolder.value) {
|
|
const currentSlug = route.params.slug ? (Array.isArray(route.params.slug) ? route.params.slug.join('/') : route.params.slug) : '';
|
|
return currentSlug ? `/${currentSlug}/${props.item.slug}` : `/${props.item.slug}`;
|
|
}
|
|
return props.item.url;
|
|
});
|
|
|
|
const defaultIcon = computed(() => isFolder.value ? 'i-lucide-folder' : 'i-lucide-link');
|
|
const iconToUse = computed(() => props.item.icon || defaultIcon.value);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
:to="targetUrl"
|
|
:target="isFolder ? '_self' : '_blank'"
|
|
class="flex flex-col items-center justify-center p-4 rounded-xl hover:bg-white/10 transition-colors cursor-pointer group select-none"
|
|
>
|
|
<UIcon
|
|
:name="iconToUse"
|
|
class="w-16 h-16 mb-3 drop-shadow-md transition-transform group-hover:scale-105"
|
|
:style="{ color: item.color || (isFolder ? '#60A5FA' : '#9CA3AF') }"
|
|
/>
|
|
<span class="text-sm font-medium text-center text-white break-words line-clamp-2 w-full text-shadow">
|
|
{{ isFolder ? item.name : item.title }}
|
|
</span>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-shadow {
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
|
}
|
|
</style>
|