From 2fdc26d2416a499fcfd5f51c78220c728ff8014b Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Sun, 1 Oct 2023 17:19:09 +0800
Subject: [PATCH] feat: upvote

---
 src/api/topic/index.ts                        | 12 ++++
 src/api/topic/types/action.ts                 |  9 +++
 src/api/topic/types/topic.ts                  |  1 +
 src/language/en.ts                            |  2 +
 src/language/zh.ts                            |  1 +
 src/store/modules/topic.ts                    | 15 ++++
 .../article/components/ArticleContent.vue     |  6 +-
 src/views/bylaw/Bylaw.vue                     | 16 +++--
 src/views/topic/components/Master.vue         |  8 ++-
 src/views/topic/components/MasterFooter.vue   | 72 ++++++++++++++++---
 10 files changed, 121 insertions(+), 21 deletions(-)

diff --git a/src/api/topic/index.ts b/src/api/topic/index.ts
index 3af21aa6..781282f6 100644
--- a/src/api/topic/index.ts
+++ b/src/api/topic/index.ts
@@ -55,6 +55,18 @@ export async function getTopicByTidApi(
   }
 }
 
+// 推话题
+export async function updateTopicUpvoteApi(
+  request: Action.TopicUpvoteTopicRequestData
+): Promise<Action.TopicUpvoteTopicResponseData> {
+  const queryParams = objectToQueryParams(request, 'tid')
+  const url = `/topics/${request.tid}/upvote?${queryParams}`
+
+  const response = fetchPut<Action.TopicUpvoteTopicResponseData>(url)
+
+  return response
+}
+
 // 点赞话题
 export async function updateTopicLikeApi(
   request: Action.TopicLikeTopicRequestData
diff --git a/src/api/topic/types/action.ts b/src/api/topic/types/action.ts
index 06a9bdf5..4380ae83 100644
--- a/src/api/topic/types/action.ts
+++ b/src/api/topic/types/action.ts
@@ -2,6 +2,12 @@
  * 这是用户对话题的操作，推，点赞，点踩等
  */
 
+// 推，推操作不可撤销
+export interface TopicUpvoteTopicRequestData {
+  tid: number
+  to_uid: number
+}
+
 // 点赞
 export interface TopicLikeTopicRequestData {
   tid: number
@@ -9,5 +15,8 @@ export interface TopicLikeTopicRequestData {
   isPush: boolean
 }
 
+// 推话题响应数据的格式
+export type TopicUpvoteTopicResponseData = KUNGalgameResponseData<{}>
+
 // 点赞话题响应数据的格式
 export type TopicLikeTopicResponseData = KUNGalgameResponseData<{}>
diff --git a/src/api/topic/types/topic.ts b/src/api/topic/types/topic.ts
index 484c3e60..c804d81b 100644
--- a/src/api/topic/types/topic.ts
+++ b/src/api/topic/types/topic.ts
@@ -29,6 +29,7 @@ export interface TopicDetail {
   status: number
   share: number[]
   category: string[]
+  popularity: number
 }
 
 // 更新话题的请求数据
diff --git a/src/language/en.ts b/src/language/en.ts
index f39994f4..ddefe1f5 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -211,6 +211,8 @@ export default {
       publish: 'Confirm to publish?',
       publishSuccess: 'Publish Successfully',
       publishCancel: 'Cancel Publish',
+      upvote:
+        'Are you sure you want to upvote this topic? This will cost you 17 Moe Moe Points',
       rewrite: 'Confirm to Rewrite?',
       rewriteSuccess: 'Rewrite Successfully',
       rewriteCancel: 'Cancel Rewrite',
diff --git a/src/language/zh.ts b/src/language/zh.ts
index cf37f86b..c6bc1561 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -210,6 +210,7 @@ export default {
       publish: '确认发布吗？',
       publishSuccess: '发布成功',
       publishCancel: '取消发布',
+      upvote: '您确定推这个话题吗，这将会消耗您 17 萌萌点',
       rewrite: '确认 Rewrite 吗？',
       rewriteSuccess: 'Rewrite 成功',
       rewriteCancel: '取消 Rewrite',
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
index f1d49a11..0b4f12f3 100644
--- a/src/store/modules/topic.ts
+++ b/src/store/modules/topic.ts
@@ -13,6 +13,9 @@ import {
 
 // 点赞等动作
 import {
+  updateTopicUpvoteApi,
+  TopicUpvoteTopicRequestData,
+  TopicUpvoteTopicResponseData,
   updateTopicLikeApi,
   TopicLikeTopicRequestData,
   TopicLikeTopicResponseData,
@@ -107,6 +110,18 @@ export const useKUNGalgameTopicStore = defineStore({
       return await getTopicByTidApi(tid)
     },
 
+    // 推话题
+    async updateTopicUpvote(
+      tid: number,
+      toUid: number
+    ): Promise<TopicUpvoteTopicResponseData> {
+      const requestData: TopicUpvoteTopicRequestData = {
+        tid: tid,
+        to_uid: toUid,
+      }
+      return await updateTopicUpvoteApi(requestData)
+    },
+
     // 点赞话题
     async updateTopicLike(
       tid: number,
diff --git a/src/views/Home/content/article/components/ArticleContent.vue b/src/views/Home/content/article/components/ArticleContent.vue
index 67488c69..4360f87d 100644
--- a/src/views/Home/content/article/components/ArticleContent.vue
+++ b/src/views/Home/content/article/components/ArticleContent.vue
@@ -93,11 +93,11 @@ onBeforeUnmount(() => {
 <template>
   <div class="topic-container" ref="content">
     <TransitionGroup name="list" tag="div">
-      <!-- 该状态为 2 则话题处于被推状态 -->
+      <!-- 热度 > 100 则话题处于被推状态 -->
       <div
         v-for="topic in topics"
         :key="topic.tid"
-        :class="topic.status === 2 ? 'kungalgame-comet-surround' : ''"
+        :class="topic.popularity >= 100 ? 'kungalgame-comet-surround' : ''"
       >
         <span></span>
         <span></span>
@@ -144,7 +144,7 @@ onBeforeUnmount(() => {
 .kungalgame-comet-surround {
   padding: 0;
   flex-shrink: 0;
-  border: 2px solid var(--kungalgame-red-2);
+  border: 2px solid var(--kungalgame-red-4);
 }
 
 .list-move, /* 对移动中的元素应用的过渡 */
diff --git a/src/views/bylaw/Bylaw.vue b/src/views/bylaw/Bylaw.vue
index f814639e..a0e6c3c3 100644
--- a/src/views/bylaw/Bylaw.vue
+++ b/src/views/bylaw/Bylaw.vue
@@ -37,18 +37,22 @@ const bylawPageWidth = computed(() => {
             <ul>
               <li>1. 每个注册用户初始拥有 1007 萌萌点</li>
               <li>2. 每天登录自动获得随机 1 ~ 7 萌萌点</li>
-              <li>3. 话题每被点赞 1 次，获得 1 萌萌点</li>
-              <li>4. 话题每被评论 1 次，获得 1 萌萌点</li>
-              <li>5. 话题每被推 1 次，获得 17 萌萌点</li>
-              <li>6. 每日前 7 次回复获得 1 萌萌点</li>
-              <li>7. 每日前 3 次点赞获得 1 萌萌点</li>
+              <li>3. 用户的话题 / 回复 / 评论被点赞，可以获得 1 萌萌点</li>
+              <li>4. 有人回复用户的话题，用户将会获得 2 点萌萌点</li>
+              <li>
+                5. 有人评论用户的回复，楼主和被评论的回复人都会获得 1 萌萌点
+              </li>
+              <li>6. 用户的话题 / 回复被推，将会获得 7 点萌萌点</li>
             </ul>
           </div>
           <!-- 扣除方法 -->
           <div class="deduct">
             <div class="title-2">- 扣除方法</div>
             <ul>
-              <li>1. 话题每被踩 1 次，扣除 3 萌萌点</li>
+              <li>
+                1. 用户的不萌行为，根据严重程度，将会被扣除 7, 17, 77, 177, 777
+                点萌萌点
+              </li>
               <li>2. 单个话题每被踩 10 次，若审核无误，扣除 100 萌萌点</li>
               <li>3. 用户推话题一次将会被扣除 17 萌萌点，可以重复推话题</li>
             </ul>
diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue
index b8f55b4f..a534f611 100644
--- a/src/views/topic/components/Master.vue
+++ b/src/views/topic/components/Master.vue
@@ -38,16 +38,20 @@ const {
   status,
   share,
   category,
+  popularity,
 } = topicData.topicData
 
 // 话题的状态
 const loliStatus = computed(() => {
+  // 热度 > 100 则显示被推
+  if (popularity >= 100) {
+    return 'featured'
+  }
+
   if (status === 0) {
     return 'normal'
   } else if (status === 1) {
     return 'banned'
-  } else if (status === 2) {
-    return 'featured'
   } else {
     return ''
   }
diff --git a/src/views/topic/components/MasterFooter.vue b/src/views/topic/components/MasterFooter.vue
index 80d41e84..5142f4da 100644
--- a/src/views/topic/components/MasterFooter.vue
+++ b/src/views/topic/components/MasterFooter.vue
@@ -3,6 +3,8 @@
 import { onMounted, reactive, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 import { useRouter } from 'vue-router'
+// 全局消息组件（底部）
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
 // 全局消息组件（顶部）
 import message from '@/components/alert/Message'
 // throttle 函数
@@ -101,7 +103,7 @@ const handleClickLikeThrottled = throttle(
         ? actions.likes.length + 1
         : actions.likes.length - 1
     } else {
-      message('Like topic failed!', '点赞话题失败', 'error')
+      message('Topic like failed!', '点赞话题失败', 'error')
     }
   },
   1007,
@@ -114,7 +116,50 @@ const handleClickLikeThrottled = throttle(
   }
 )
 
-// 在点击事件中使用节流版本的函数
+// 推话题
+const handleClickUpvote = async () => {
+  // 当前用户不可以推自己的话题
+  if (currUserUid === props.master.uid) {
+    message('You cannot upvote your own topic', '您不可以推自己的话题', 'warn')
+    return
+  }
+
+  // TODO: 该功能必须有错误处理
+  // if (useKUNGalgameUserStore().moemoepoint < 1100) {
+  //   message(
+  //     'Your Moe Moe Points are less than 1100, and you cannot use the upvote feature',
+  //     '您的萌萌点小于 1100，无法使用推功能',
+  //     'warn'
+  //   )
+  //   return
+  // }
+
+  // 调用弹窗确认
+  const res = await useKUNGalgameMessageStore().alert(
+    'AlertInfo.edit.upvote',
+    true
+  )
+
+  // 这里实现用户的点击确认取消逻辑
+  if (res) {
+    // 请求推话题的接口
+    const res = await useKUNGalgameTopicStore().updateTopicUpvote(
+      props.info.tid,
+      props.master.uid
+    )
+
+    if (res.code === 200) {
+      // 更新推数
+      actions.upvotes.length++
+
+      message('Topic upvote successfully', '推话题成功', 'success')
+    } else {
+      message('Topic upvote failed!', '推话题失败', 'error')
+    }
+  }
+}
+
+// 点赞
 const handleClickLike = () => {
   handleClickLikeThrottled()
 }
@@ -178,7 +223,13 @@ onMounted(() => {
       <ul>
         <!-- 推话题 -->
         <li>
-          <span class="icon"><Icon icon="bi:rocket" /></span>
+          <span
+            class="icon"
+            :class="isActive.isUpvote ? 'active' : ''"
+            @click="handleClickUpvote"
+          >
+            <Icon icon="bi:rocket" />
+          </span>
           {{ actions.upvotes.length }}
         </li>
         <!-- 查看数量 -->
@@ -192,8 +243,9 @@ onMounted(() => {
             class="icon"
             :class="isActive.isLiked ? 'active' : ''"
             @click="handleClickLike"
-            ><Icon icon="line-md:thumbs-up-twotone"
-          /></span>
+          >
+            <Icon icon="line-md:thumbs-up-twotone" />
+          </span>
           {{ actions.likes.length }}
         </li>
         <!-- 踩 -->
@@ -263,11 +315,6 @@ onMounted(() => {
   cursor: pointer;
 }
 
-/* 激活后的样式 */
-.active {
-  color: var(--kungalgame-blue-4);
-}
-
 /* 底部右侧部分（回复、评论、只看、编辑） */
 .right {
   display: flex;
@@ -324,6 +371,11 @@ onMounted(() => {
   }
 }
 
+/* 激活后的样式 */
+.active {
+  color: var(--kungalgame-blue-4);
+}
+
 @media (max-width: 700px) {
   .footer {
     flex-direction: column;