From a9c7403037065d7f749104e1c3ee006d73e5ae59 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Wed, 20 Sep 2023 23:07:27 +0800
Subject: [PATCH] feat: rebuild reply button

---
 src/utils/getPlainText.ts                  | 18 ++++---
 src/views/topic/components/Master.vue      | 20 +++++---
 src/views/topic/components/TopicFooter.vue | 60 +++++++++++++++++-----
 3 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/src/utils/getPlainText.ts b/src/utils/getPlainText.ts
index 7ac2e246..3c88e065 100644
--- a/src/utils/getPlainText.ts
+++ b/src/utils/getPlainText.ts
@@ -1,6 +1,9 @@
 export function getPlainText(html: string): string {
-  const re1 = new RegExp('<.+?>', 'g')
-  const arrEntities: Record<string, string> = {
+  // 使用正则表达式匹配所有HTML标签并删除
+  const plainText = html.replace(/<[^>]*>/g, '')
+
+  // 使用实体编码映射表将HTML实体编码还原
+  const entityMap: Record<string, string> = {
     lt: '<',
     gt: '>',
     nbsp: ' ',
@@ -11,11 +14,10 @@ export function getPlainText(html: string): string {
     rdquo: '”',
   }
 
-  const plainText = html
-    .replace(re1, '')
-    .replace(/&(lt|gt|nbsp|amp|quot|ldquo|mdash|rdquo);/gi, function (all, t) {
-      return arrEntities[t]
-    })
+  // 使用正则表达式匹配实体编码并还原
+  const decodedText = plainText.replace(/&(\w+);/g, function (match, entity) {
+    return entityMap[entity] || match
+  })
 
-  return plainText
+  return decodedText
 }
diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue
index 79123351..22a55754 100644
--- a/src/views/topic/components/Master.vue
+++ b/src/views/topic/components/Master.vue
@@ -87,7 +87,8 @@ const loliStatus = computed(() => {
           <div class="content-bottom">
             <!-- 话题状态 -->
             <div class="status">
-              话题状态：<span :class="loliStatus">{{ loliStatus }}</span>
+              <span>{{ `${$tm('topic.content.status')}:` }}</span>
+              <span :class="loliStatus">{{ loliStatus }}</span>
             </div>
             <Rewrite v-if="edited" :time="edited" />
           </div>
@@ -196,12 +197,17 @@ const loliStatus = computed(() => {
   color: var(--kungalgame-font-color-3);
   /* 话题状态 */
   span {
-    width: 50px;
-    padding: 1px;
-    color: var(--kungalgame-white);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    &:nth-child(1) {
+      margin-right: 5px;
+    }
+    &:nth-child(2) {
+      width: 50px;
+      padding: 1px;
+      color: var(--kungalgame-white);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }
 
diff --git a/src/views/topic/components/TopicFooter.vue b/src/views/topic/components/TopicFooter.vue
index 283ff13f..bf09cf34 100644
--- a/src/views/topic/components/TopicFooter.vue
+++ b/src/views/topic/components/TopicFooter.vue
@@ -3,8 +3,6 @@
 import { nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import { Icon } from '@iconify/vue'
-// 引入流光环绕的特效
-import '@/styles/effect/effect.scss'
 
 import { TopicUserInfo } from '@/api'
 
@@ -79,13 +77,8 @@ const handelReply = async () => {
     <!-- 底部右侧部分（回复、评论、只看、编辑） -->
     <div class="right">
       <ul>
-        <li>
-          <!-- 对所有此类元素应用样式 -->
-          <div class="kungalgame-comet-surround" @click="handelReply">
-            <span></span>
-            <span></span>
-            <span></span>
-            <span></span>
+        <li @click="handelReply">
+          <div class="reply">
             {{ $tm('topic.content.reply') }}
           </div>
         </li>
@@ -157,10 +150,51 @@ const handelReply = async () => {
   margin-left: 10px;
   li {
     margin-right: 17px;
-    &:nth-child(1) {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  }
+}
+
+.reply {
+  position: relative;
+  width: 70px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: var(--kungalgame-blue-4);
+  box-shadow: inset 0 0 0 2px var(--kungalgame-blue-1);
+  cursor: pointer;
+  transition: all 0.2s;
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    border: 2px solid transparent;
+  }
+  &:hover {
+    color: var(--kungalgame-pink-4);
+
+    &::before {
+      transition: width 0.2s, height 0.2s, border-bottom-color 0s;
+      transition-delay: 0.2s, 0s, 0.2s;
+      width: 70px;
+      height: 30px;
+      border-left: 2px solid var(--kungalgame-pink-4);
+      border-bottom: 2px solid var(--kungalgame-pink-4);
+    }
+
+    &::after {
+      transition: width 0.2s, height 0.2s, border-right-color 0.2s;
+      transition-delay: 0s, 0.2s, 0.2s;
+      width: 70px;
+      height: 30px;
+      border-top: 2px solid var(--kungalgame-pink-4);
+      border-right: 2px solid var(--kungalgame-pink-4);
     }
   }
 }