feat(component): show quote excerpt and unescape brackets

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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
 function renderCommentContent(text: string): string {
-  const escaped = text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-  return escaped.replace(/&lt;ref:(\d+)&gt;/g, '<span class="comment-ref-tag">&lt;ref:$1&gt;</span>')
+  let html = ''
+  let rest = text
+  const refMatch = text.match(/^<ref:(\d+)>/)
+  if (refMatch) {
+    const id = Number(refMatch[1])
+    const quoted = comments.value.find((c) => c.id === id)
+    const excerpt = quoted ? quoteExcerpt(quoted) : `评论 #${id}`
+    html += `<span class="comment-ref-tag">${escapeHtml(excerpt.replace(/\\</g, '<').replace(/\\>/g, '>'))}</span>`
+    rest = text.slice(refMatch[0].length)
+  }
+  const body = escapeHtml(rest.replace(/\\</g, '<').replace(/\\>/g, '>'))
+  return html + body
 }
 
 function quoteExcerpt(comment: CommentResponse): string {
@@ -193,8 +204,8 @@ onMounted(() => {
           </div>
           <p class="comment-content" v-html="renderCommentContent(comment.content ?? '')"></p>
           <button class="comment-quote" type="button" title="引用评论" @click="quoteComment(comment)">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
-              <path d="M10 7L8 12h3v5H5v-5l2-5h3zm9 0l-2 5h3v5h-6v-5l2-5h3z" />
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
             </svg>
             <span>引用</span>
           </button>
@@ -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 {