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
ArtalkJS · Oct 5, 2024 · 3571a18 · 3571a18
1 parent abac3f0
commit 3571a18
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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;
   }