Browse Source

feat(public): profile home bio shows front matter desc only when set

Made-with: Cursor
main
npmrun 7 hours ago
parent
commit
f9826e4ac2
  1. 32
      app/pages/@[publicSlug]/index.vue

32
app/pages/@[publicSlug]/index.vue

@ -1,5 +1,6 @@
<script setup lang="ts">
import { unwrapApiBody, type ApiResponse } from '../../utils/http/factory'
import { extractFrontMatterDesc, stripFrontMatter } from '../../utils/markdown-front-matter'
import { renderSafeMarkdown } from '../../utils/render-markdown'
import {
formatOccurredOnDisplay,
@ -123,9 +124,27 @@ function timelineItemKey(e: PublicTimelineItem, i: number): string | number {
return e.id ?? i
}
const bioHtml = computed(() =>
data.value?.bio?.markdown ? renderSafeMarkdown(data.value.bio.markdown) : '',
)
/** 主页生平:有 front matter 的 desc 时只展示 desc;否则展示全文(兼容无 FM 的简介) */
const bioHtml = computed(() => {
const md = data.value?.bio?.markdown
if (!md?.trim()) {
return ''
}
const desc = extractFrontMatterDesc(md)
if (desc) {
return renderSafeMarkdown(desc)
}
return renderSafeMarkdown(md)
})
/** 「查看全文」:正文在去掉 FM 后仍有内容时才显示(避免仅有 desc 时链到空页) */
const showBioReadMore = computed(() => {
const md = data.value?.bio?.markdown
if (!md?.trim()) {
return false
}
return stripFrontMatter(md).trim().length > 0
})
</script>
<template>
@ -154,12 +173,12 @@ const bioHtml = computed(() =>
</h1>
</div>
<div v-if="data.bio?.markdown" class="space-y-3">
<div v-if="data.bio?.markdown && bioHtml" class="space-y-3">
<div
class="prose prose-neutral dark:prose-invert max-w-none prose-img:rounded-lg"
v-html="bioHtml"
/>
<div class="not-prose">
<div v-if="showBioReadMore" class="not-prose">
<NuxtLink
:to="`/@${slug}/about`"
class="text-sm font-medium text-primary hover:underline"
@ -351,12 +370,13 @@ const bioHtml = computed(() =>
<h1 class="text-center text-lg font-semibold text-highlighted lg:text-left lg:text-base">
{{ data.user.nickname || data.user.publicSlug || slug }}
</h1>
<div v-if="data.bio?.markdown" class="space-y-2">
<div v-if="data.bio?.markdown && bioHtml" class="space-y-2">
<div
class="bio-preview-scroll max-h-36 overflow-y-auto rounded-lg border border-default bg-elevated/30 p-3 text-xs leading-relaxed text-muted prose prose-neutral dark:prose-invert max-w-none prose-p:my-1 prose-img:rounded"
v-html="bioHtml"
/>
<NuxtLink
v-if="showBioReadMore"
:to="`/@${slug}/about`"
class="text-xs font-medium text-primary hover:underline"
>

Loading…
Cancel
Save