From 3571a18b42383cbdf47afebd3e02344dfd72328e Mon Sep 17 00:00:00 2001
From: qwqcode <qwqcode@gmail.com>
Date: Sat, 5 Oct 2024 19:35:58 +0800
Subject: [PATCH] refactor(ui/comment): update reply button to use component

- Replaced manual reply button creation with ActionBtn component for consistency
- Moved styling from comment.scss to main.scss for common action button styles
---
 ui/artalk/src/comment/renders/actions.ts | 11 +++++------
 ui/artalk/src/style/comment.scss         | 22 ++--------------------
 ui/artalk/src/style/main.scss            | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/ui/artalk/src/comment/renders/actions.ts b/ui/artalk/src/comment/renders/actions.ts
index 088f6da5..70c7afe0 100644
--- a/ui/artalk/src/comment/renders/actions.ts
+++ b/ui/artalk/src/comment/renders/actions.ts
@@ -1,4 +1,3 @@
-import * as Utils from '../../lib/utils'
 import ActionBtn from '../../components/action-btn'
 import type Render from '../render'
 import $t from '@/i18n'
@@ -45,11 +44,11 @@ function renderVote(r: Render) {
 // 操作按钮 - 回复
 function renderReply(r: Render) {
   if (!r.data.is_allow_reply) return // 不允许回复
-
-  const replyBtn = Utils.createElement(`<span>${$t('reply')}</span>`)
-  r.$actions.append(replyBtn)
-  replyBtn.addEventListener('click', (e) => {
-    e.stopPropagation() // 防止穿透
+  const replyBtn = new ActionBtn({
+    text: $t('reply'),
+  })
+  replyBtn.appendTo(r.$actions)
+  replyBtn.setClick(() => {
     r.opts.replyComment(r.data, r.$el)
   })
 }
diff --git a/ui/artalk/src/style/comment.scss b/ui/artalk/src/style/comment.scss
index d430c0f5..d4bea858 100644
--- a/ui/artalk/src/style/comment.scss
+++ b/ui/artalk/src/style/comment.scss
@@ -262,26 +262,8 @@
         align-items: center;
         flex-wrap: wrap;
 
-        & > span {
-          color: var(--at-color-meta);
-          font-size: 13px;
-          line-height: 25px;
-          display: inline-flex;
-          cursor: pointer;
-          user-select: none;
-
-          &.atk-error,
-          &.atk-error:hover {
-            color: var(--at-color-red);
-          }
-
-          &:not(:last-child):not(.atk-hide) {
-            margin-right: 16px;
-          }
-
-          &:hover {
-            color: var(--at-color-deep);
-          }
+        & > span:not(:last-child):not(.atk-hide) {
+          margin-right: 16px;
         }
       }
     }
diff --git a/ui/artalk/src/style/main.scss b/ui/artalk/src/style/main.scss
index e26d924b..6213f7cd 100644
--- a/ui/artalk/src/style/main.scss
+++ b/ui/artalk/src/style/main.scss
@@ -542,6 +542,22 @@
 
 /* Common Action Btn */
 .atk-common-action-btn {
+  color: var(--at-color-meta);
+  font-size: 13px;
+  line-height: 25px;
+  display: inline-flex;
+  cursor: pointer;
+  user-select: none;
+
+  &.atk-error,
+  &.atk-error:hover {
+    color: var(--at-color-red);
+  }
+
+  &:hover {
+    color: var(--at-color-deep);
+  }
+
   &.atk-btn-confirm {
     color: var(--at-color-yellow) !important;
   }