From 74c7fa9e1c5c9678b75b41429204657011c12589 Mon Sep 17 00:00:00 2001
From: anghunk <anghunk@gmail.com>
Date: Thu, 22 Jan 2026 19:20:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AF=84=E8=AE=BA=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=82=B9=E8=B5=9E=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

- 将点赞按钮从简单的文本升级为包含图标和计数的组件
- 新增点赞按钮的悬停效果和样式
- 修改子元素检查逻辑，使用更通用的 Node 类型判断
---
 docs/widget/src/components/CommentItem.js | 45 +++++++++++++++++------
 docs/widget/src/components/Component.js   |  2 +-
 docs/widget/src/styles/main.css           | 45 +++++++++++++++++++++++
 3 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/docs/widget/src/components/CommentItem.js b/docs/widget/src/components/CommentItem.js
index 47f2352..339c36d 100644
--- a/docs/widget/src/components/CommentItem.js
+++ b/docs/widget/src/components/CommentItem.js
@@ -105,26 +105,47 @@ export class CommentItem extends Component {
                       },
                       text: '回复'
                     }),
-                    this.createElement('span', {
+                    this.createElement('div', {
                       className: 'cwd-comment-like',
                       children: [
                         this.createElement('button', {
                           className: 'cwd-comment-like-button',
                           attributes: {
                             type: 'button',
+                            'aria-label': '点赞',
                             onClick: () => this.handleLikeComment()
                           },
-                          text: '赞'
-                        }),
-                        this.createTextElement(
-                          'span',
-                          String(
-                            typeof comment.likes === 'number' && Number.isFinite(comment.likes) && comment.likes >= 0
-                              ? comment.likes
-                              : 0
-                          ),
-                          'cwd-comment-like-count'
-                        )
+                          children: [
+                            this.createElement('span', {
+                              className: 'cwd-comment-like-icon-wrapper',
+                              children: [
+                                this.createElement('svg', {
+                                  className: 'cwd-comment-like-icon',
+                                  attributes: {
+                                    viewBox: '0 0 24 24',
+                                    'aria-hidden': 'true'
+                                  },
+                                  children: [
+                                    this.createElement('path', {
+                                      attributes: {
+                                        d: 'M12 21c-.4 0-.8-.1-1.1-.4L4.5 15C3 13.6 2 11.7 2 9.6 2 6.5 4.5 4 7.6 4c1.7 0 3.3.8 4.4 2.1C13.1 4.8 14.7 4 16.4 4 19.5 4 22 6.5 22 9.6c0 2.1-1 4-2.5 5.4l-6.4 5.6c-.3.3-.7.4-1.1.4z'
+                                      }
+                                    })
+                                  ]
+                                })
+                              ]
+                            }),
+                            this.createTextElement(
+                              'span',
+                              String(
+                                typeof comment.likes === 'number' && Number.isFinite(comment.likes) && comment.likes >= 0
+                                  ? comment.likes
+                                  : 0
+                              ),
+                              'cwd-comment-like-count'
+                            )
+                          ]
+                        })
                       ]
                     }),
                     this.createTextElement('span', formatRelativeTime(comment.created), 'cwd-comment-time')
diff --git a/docs/widget/src/components/Component.js b/docs/widget/src/components/Component.js
index d480f95..3bcf477 100644
--- a/docs/widget/src/components/Component.js
+++ b/docs/widget/src/components/Component.js
@@ -134,7 +134,7 @@ export class Component {
     if (options.children) {
       const children = Array.isArray(options.children) ? options.children : [options.children];
       children.forEach(child => {
-        if (child instanceof HTMLElement) {
+        if (child instanceof Node) {
           el.appendChild(child);
         }
       });
diff --git a/docs/widget/src/styles/main.css b/docs/widget/src/styles/main.css
index 9097426..0b38d09 100644
--- a/docs/widget/src/styles/main.css
+++ b/docs/widget/src/styles/main.css
@@ -586,6 +586,51 @@
   gap: 12px;
 }
 
+.cwd-comment-like {
+  display: flex;
+  align-items: center;
+
+  display: none;
+}
+
+.cwd-comment-like-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--cwd-border-light, #eaeef2);
+  background: var(--cwd-bg-secondary, #f6f8fa);
+  color: var(--cwd-text-secondary, #6e7781);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: inherit;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+}
+
+.cwd-comment-like-button:hover {
+  background: rgba(9, 105, 218, 0.08);
+  border-color: var(--cwd-primary, #0969da);
+  color: var(--cwd-primary, #0969da);
+}
+
+.cwd-comment-like-icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cwd-comment-like-icon {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.cwd-comment-like-count {
+  min-width: 1.5em;
+  text-align: right;
+}
+
 .cwd-action-btn {
   display: inline-flex;
   align-items: center;