블록 설정 패널 확장 v1.5.37

components/content/ProseFile.vue

@@ -28,11 +28,24 @@ const props = defineProps({
  */
 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(() => props.title || props.fileName || 'File')
+const displayTitle = computed(() => {
+  if (props.fileName && (!props.title || props.title === stripFileExtension(props.fileName))) {
+    return props.fileName
+  }
+
+  return props.title || props.fileName || 'File'
+})
 
 /**
  * 표시 파일명을 반환한다.
@@ -51,6 +64,25 @@ const displayFileName = computed(() => {
     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>
@@ -67,8 +99,8 @@ const displayFileName = computed(() => {
       <span v-if="description" class="prose-file__description mt-1 block text-sm leading-relaxed text-[var(--site-muted)]">
         {{ description }}
       </span>
-      <span class="prose-file__meta mt-3 block truncate text-sm font-semibold text-[var(--site-text)]">
-        {{ displayFileName || href }}<template v-if="size"> · {{ size }}</template>
+      <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]">