diff --git a/src/components/CommentSection.vue b/src/components/CommentSection.vue
index 637bb2c..677c387 100644
--- a/src/components/CommentSection.vue
+++ b/src/components/CommentSection.vue
@@ -37,12 +37,23 @@ function escapeBrackets(text: string): string {
return text.replace(/[<>]/g, (ch) => '\\' + ch)
}
+function escapeHtml(text: string): string {
+ return text.replace(/&/g, '&').replace(//g, '>')
+}
+
function renderCommentContent(text: string): string {
- const escaped = text
- .replace(/&/g, '&')
- .replace(//g, '>')
- return escaped.replace(/<ref:(\d+)>/g, '')
+ let html = ''
+ let rest = text
+ const refMatch = text.match(/^/)
+ if (refMatch) {
+ const id = Number(refMatch[1])
+ const quoted = comments.value.find((c) => c.id === id)
+ const excerpt = quoted ? quoteExcerpt(quoted) : `评论 #${id}`
+ html += ``
+ rest = text.slice(refMatch[0].length)
+ }
+ const body = escapeHtml(rest.replace(/\\/g, '>'))
+ return html + body
}
function quoteExcerpt(comment: CommentResponse): string {
@@ -193,8 +204,8 @@ onMounted(() => {
@@ -392,15 +403,16 @@ onMounted(() => {
}
:deep(.comment-ref-tag) {
- display: inline-block;
- padding: 0 6px;
- margin-right: 4px;
+ display: block;
+ width: fit-content;
+ padding: 0 8px;
+ margin-bottom: 6px;
border: 1px solid var(--ac-primary);
border-radius: var(--song-radius-s);
color: var(--ac-primary-ink);
background: var(--ac-primary-bg);
font-size: 12px;
- line-height: 18px;
+ line-height: 20px;
}
.quote-preview {