diff --git a/frontend/package.json b/frontend/package.json index 60062d6..b3ec1dd 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,7 +5,7 @@ "type": "module", "packageManager": "pnpm@10.34.4", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "vite build", "preview": "vite preview" }, diff --git a/frontend/src/components/comments/CommentItem.vue b/frontend/src/components/comments/CommentItem.vue index a7baabf..27607a1 100644 --- a/frontend/src/components/comments/CommentItem.vue +++ b/frontend/src/components/comments/CommentItem.vue @@ -8,11 +8,16 @@ import { relativeDate } from '../../utils' // 单条评论。回复在同一个组件里自引用渲染（depth 0 → 1）， // 这样「回复框 / 编辑框」的模板只写一遍，两层不会各写一份再漂移。 // 只渲染一层：depth >= 1 时不再显示它自己的 replies 与「加载更多」。 +// +// 回复之间的相互回复在扁平列表里靠 @提及 认亲：depth 0 渲染每条回复时 +// 解析出它回的是谁（parent_id 指向主楼 → 不标；指向同串里另一条回复 → +// 把那条的作者名传下去）。父回复没被加载进来时解析不到，就不标。 const props = defineProps({ c: { type: Object, required: true }, api: { type: Object, required: true }, depth: { type: Number, default: 0 }, - maxLen: { type: Number, default: 500 } + maxLen: { type: Number, default: 500 }, + replyTo: { type: String, default: '' } }) const s = props.api.s @@ -77,6 +82,19 @@ async function onRemove() { const moreReplies = computed(() => props.depth === 0 ? Math.max(0, (props.c.reply_count || 0) - ((props.c.replies || []).length)) : 0 ) + +// 这条回复要 @ 谁：parent 指向主楼（props.c）不用标；指向串里另一条 +// 已加载的回复才标。正文以块级元素开头（代码块/列表）时 @ 没法浮在 +// 首行行首，模板里会退成独立一行。 +const atInline = computed( + () => !!props.replyTo && /^]/i.test((props.c.body_html || '').trim()) +) + +function replyNameOf(r) { + if (!r.parent_id || r.parent_id === props.c.id) return '' + const t = (props.c.replies || []).find((x) => x.id === r.parent_id) + return t ? (t.author && t.author.name) || '' : '' +}