feat(component): grey out missing ref comment tag

src/components/CommentSection.vue

@@ -75,8 +75,9 @@ function renderCommentContent(text: string): string {
   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"><svg class="comment-ref-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" 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>${escapeHtml(excerpt.replace(/\\</g, '<').replace(/\\>/g, '>'))}</span>`
+    const missing = !quoted
+    const excerpt = quoted ? quoteExcerpt(quoted) : '找不到评论'
+    html += `<span class="comment-ref-tag"${missing ? ' data-missing' : ''}><svg class="comment-ref-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" 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>${escapeHtml(excerpt.replace(/\\</g, '<').replace(/\\>/g, '>'))}</span>`
     rest = text.slice(refMatch[0].length)
   }
   const body = escapeHtml(rest.replace(/\\</g, '<').replace(/\\>/g, '>'))
@@ -490,6 +491,12 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
+:deep(.comment-ref-tag[data-missing]) {
+  border-color: var(--ac-border);
+  color: var(--ac-text-disabled);
+  background: var(--ac-bg-card);
+}
+
 .quote-preview {
   display: flex;
   align-items: center;