From aabf370f65a9f480ac3f56d7111b08b559e72534 Mon Sep 17 00:00:00 2001
From: anghunk <anghunk@gmail.com>
Date: Wed, 21 Jan 2026 21:41:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AF=84=E8=AE=BA):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E7=BD=AE=E9=A1=B6=E5=8A=9F=E8=83=BD=E5=8F=8A?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在评论项中显示置顶标识
- 添加置顶评论的样式
- 优化评论管理界面的置顶权重输入和显示
---
 cwd-admin/src/views/CommentsView.vue          | 38 +++++++++++++++----
 .../widget/src/components/CommentItem.js      |  5 ++-
 cwd-admin/widget/src/styles/main.css          |  9 +++++
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/cwd-admin/src/views/CommentsView.vue b/cwd-admin/src/views/CommentsView.vue
index dce9ba1..b287e19 100644
--- a/cwd-admin/src/views/CommentsView.vue
+++ b/cwd-admin/src/views/CommentsView.vue
@@ -80,8 +80,12 @@
               <span class="cell-status" :class="`cell-status-${item.status}`">
                 {{ formatStatus(item.status) }}
               </span>
-              <span v-if="item.priority && item.priority > 1" class="cell-pin-flag">
-                置顶 {{ item.priority }}
+              <span
+                v-if="item.priority && item.priority > 1"
+                :title="item.priority"
+                class="cell-status cell-pin-flag"
+              >
+                置顶
               </span>
             </div>
           </div>
@@ -219,7 +223,12 @@
           </div>
           <div class="form-item">
             <label class="form-label">置顶权重（1 为不置顶，数值越大越靠前）</label>
-            <input v-model.number="editForm.priority" class="form-input" type="number" min="1" />
+            <input
+              v-model.number="editForm.priority"
+              class="form-input"
+              type="number"
+              min="1"
+            />
           </div>
         </div>
         <div class="modal-actions">
@@ -453,7 +462,10 @@ function openEdit(item: CommentItem) {
     postSlug: item.postSlug || "",
     contentText: item.contentText,
     status: item.status,
-    priority: typeof item.priority === "number" && Number.isFinite(item.priority) ? item.priority : 1,
+    priority:
+      typeof item.priority === "number" && Number.isFinite(item.priority)
+        ? item.priority
+        : 1,
   };
   editVisible.value = true;
 }
@@ -476,7 +488,10 @@ async function submitEdit() {
   const trimmedContent = current.contentText.trim();
   const trimmedUrl = current.url.trim();
   const trimmedPostSlug = current.postSlug.trim();
-  const priorityValue = typeof current.priority === "number" && Number.isFinite(current.priority) ? current.priority : 1;
+  const priorityValue =
+    typeof current.priority === "number" && Number.isFinite(current.priority)
+      ? current.priority
+      : 1;
   const commentIndex = comments.value.findIndex((c) => c.id === current.id);
   const existingComment = commentIndex !== -1 ? comments.value[commentIndex] : null;
   const newPostSlug = trimmedPostSlug || existingComment?.postSlug || "";
@@ -510,6 +525,7 @@ async function submitEdit() {
       };
     }
     closeEdit();
+    editVisible.value = false;
   } catch (e: any) {
     error.value = e.message || "更新评论失败";
   } finally {
@@ -538,7 +554,9 @@ onMounted(() => {
 
   fetchCommentStats()
     .then((res: CommentListResponse | any) => {
-      const domains = Array.isArray(res.domains) ? res.domains.map((item: any) => item.domain) : [];
+      const domains = Array.isArray(res.domains)
+        ? res.domains.map((item: any) => item.domain)
+        : [];
       domainOptions.value = Array.from(new Set(domains));
     })
     .catch(() => {
@@ -676,9 +694,8 @@ onMounted(() => {
 }
 
 .table-cell-status {
-  width: 100px;
+  width: 120px;
   flex-shrink: 0;
-  justify-content: center;
   align-items: center;
 }
 
@@ -790,6 +807,11 @@ onMounted(() => {
   background-color: #ffebe9;
 }
 
+.cell-pin-flag {
+  color: #825802;
+  background-color: #f7c848;
+}
+
 .status-select {
   padding: 3px 8px;
   border-radius: 4px;
diff --git a/cwd-admin/widget/src/components/CommentItem.js b/cwd-admin/widget/src/components/CommentItem.js
index 94a4675..8a1bf4a 100644
--- a/cwd-admin/widget/src/components/CommentItem.js
+++ b/cwd-admin/widget/src/components/CommentItem.js
@@ -32,6 +32,7 @@ export class CommentItem extends Component {
 
 		render() {
     const { comment, isReply, adminEmail, adminBadge } = this.props;
+    const isPinned = typeof comment.priority === 'number' && comment.priority > 1;
     const isReplying = this.props.replyingTo === comment.id;
     const isAdmin = adminEmail && adminBadge && comment.email === adminEmail;
 
@@ -79,10 +80,12 @@ export class CommentItem extends Component {
                           ]
                         })
                       : this.createTextElement('span', comment.name, 'cwd-author-name'),
-                    // 博主标识
                     ...(isAdmin ? [
                       this.createTextElement('span', `${adminBadge}`, 'cwd-admin-badge')
                     ] : []),
+                    ...(isPinned ? [
+                      this.createTextElement('span', '置顶', 'cwd-pin-badge')
+                    ] : []),
                     // 显示回复目标
                     ...(comment.replyToAuthor ? [
                       this.createTextElement('span', ' 回复 ', 'cwd-reply-to-separator'),
diff --git a/cwd-admin/widget/src/styles/main.css b/cwd-admin/widget/src/styles/main.css
index c10193f..9112241 100644
--- a/cwd-admin/widget/src/styles/main.css
+++ b/cwd-admin/widget/src/styles/main.css
@@ -357,6 +357,15 @@
   margin: 0 4px;
 }
 
+.cwd-pin-badge {
+  background: #fff8c5;
+  color: #9a6700;
+  border-radius: 3px;
+  padding: 1px 4px;
+  font-size: 12px;
+  margin: 0 4px;
+}
+
 .cwd-reply-to-separator {
   margin: 0 4px;
 }