118 lines
3.7 KiB
Vue
118 lines
3.7 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
href: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
fileName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 다운로드 가능한 파일 URL인지 확인한다.
|
|
* @returns {boolean} 파일 URL 여부
|
|
*/
|
|
const isSafeFileUrl = computed(() => Boolean(props.href && (props.href.startsWith('/') || /^https?:\/\//i.test(props.href))))
|
|
|
|
/**
|
|
* 파일 확장자를 제거한 표시명을 반환한다.
|
|
* @param {string} filename - 파일명
|
|
* @returns {string} 확장자를 제외한 이름
|
|
*/
|
|
const stripFileExtension = (filename) => String(filename || '').replace(/\.[^.]+$/, '')
|
|
|
|
/**
|
|
* 카드 제목을 반환한다.
|
|
* @returns {string} 제목
|
|
*/
|
|
const displayTitle = computed(() => {
|
|
if (props.fileName && (!props.title || props.title === stripFileExtension(props.fileName))) {
|
|
return props.fileName
|
|
}
|
|
|
|
return props.title || props.fileName || 'File'
|
|
})
|
|
|
|
/**
|
|
* 표시 파일명을 반환한다.
|
|
* @returns {string} 파일명
|
|
*/
|
|
const displayFileName = computed(() => {
|
|
if (props.fileName) {
|
|
return props.fileName
|
|
}
|
|
|
|
try {
|
|
const parsedUrl = props.href.startsWith('/') ? new URL(props.href, 'https://local.invalid') : new URL(props.href)
|
|
const lastSegment = parsedUrl.pathname.split('/').filter(Boolean).pop()
|
|
return lastSegment ? decodeURIComponent(lastSegment) : ''
|
|
} catch {
|
|
return ''
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 파일 카드 보조 정보를 반환한다.
|
|
* @returns {string} 보조 정보
|
|
*/
|
|
const displayMeta = computed(() => {
|
|
const title = String(displayTitle.value || '').trim()
|
|
const fileName = String(displayFileName.value || '').trim()
|
|
|
|
if (title && fileName && title === fileName) {
|
|
return props.size || ''
|
|
}
|
|
|
|
if (fileName) {
|
|
return props.size ? `${fileName} · ${props.size}` : fileName
|
|
}
|
|
|
|
return props.size || props.href
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<a
|
|
v-if="isSafeFileUrl"
|
|
class="prose-file group my-8 flex items-center gap-4 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-4 no-underline shadow-[0_14px_36px_rgba(15,23,42,0.06)] transition-[background-color,box-shadow] hover:bg-[color-mix(in_srgb,var(--site-panel)_86%,var(--site-text)_14%)] sm:p-5"
|
|
:href="href"
|
|
download
|
|
>
|
|
<span class="prose-file__body min-w-0 flex-1">
|
|
<span class="prose-file__title block text-base font-semibold leading-snug text-[var(--site-text)] sm:text-lg">
|
|
{{ displayTitle }}
|
|
</span>
|
|
<span v-if="description" class="prose-file__description mt-1 block text-sm leading-relaxed text-[var(--site-muted)]">
|
|
{{ description }}
|
|
</span>
|
|
<span v-if="displayMeta" class="prose-file__meta mt-3 block truncate text-sm font-semibold text-[var(--site-text)]">
|
|
{{ displayMeta }}
|
|
</span>
|
|
</span>
|
|
<span class="prose-file__download flex h-20 w-20 shrink-0 items-center justify-center rounded-[6px] bg-[color-mix(in_srgb,var(--site-line)_36%,var(--site-panel))] text-[var(--site-accent)] transition-transform group-hover:scale-[1.02] sm:h-[86px] sm:w-[86px]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 4v11" />
|
|
<path d="m8 11 4 4 4-4" />
|
|
<path d="M5 20h14" />
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<p v-else class="prose-file prose-file-invalid my-8 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-5 text-sm font-semibold text-[var(--site-muted)]">
|
|
파일 URL이 없습니다.
|
|
</p>
|
|
</template>
|