From 39d6d9a91dcf32a220fd15121993d170ed84cf6f Mon Sep 17 00:00:00 2001
From: cloudflypeng <44285412+cloudflypeng@users.noreply.github.com>
Date: Fri, 26 Apr 2024 19:02:21 +0800
Subject: [PATCH] feat(VideoCard): add tick icon for followed uploader (#672)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 关注标识
close [https://github.com/BewlyBewly/BewlyBewly/issues/671]

* refactor(VideoCard):  rename `isFollowed` to `followed`

* feat: add followed tag to videos in mobile recommendation mode

* style(VideoCard): adjust followed tick style

* chore: add corresponding documentation for [API.USER.RELATION_MODIFY]

---------

Co-authored-by: pengyunfei <pengyunfei@360.cn>
Co-authored-by: Hakadao <a578457889743@gmail.com>
---
 src/background/messageListeners/user.ts          | 16 ++++++++++++++++
 src/background/msg.define.ts                     |  1 +
 src/components/VideoCard/VideoCard.vue           | 16 ++++++++++++++--
 .../views/Home/components/ForYou.vue             |  2 ++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/background/messageListeners/user.ts b/src/background/messageListeners/user.ts
index 64a31bf9..42ef5f13 100644
--- a/src/background/messageListeners/user.ts
+++ b/src/background/messageListeners/user.ts
@@ -1,5 +1,6 @@
 import type { APIMAP } from '../utils'
 import { AHS } from '../utils'
+import API from '../msg.define'
 
 const API_USER: APIMAP = {
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/e379d904c2753fa30e9083f59016f07e89d19467/docs/login/login_info.md#%E5%AF%BC%E8%88%AA%E6%A0%8F%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF
@@ -17,6 +18,21 @@ const API_USER: APIMAP = {
     },
     afterHandle: AHS.J_D,
   },
+  // https://github.com/SocialSisterYi/bilibili-API-collect/blob/ed9ac01b6769430aa3f12ad02c2ed337a96924eb/docs/user/relation.md#操作用户关系
+  [API.USER.RELATION_MODIFY]: {
+    url: 'https://api.bilibili.com/x/relation/modify',
+    _fetch: {
+      method: 'post',
+    },
+    params: {
+      // access_key: '', // app only
+      fid: '',
+      act: 1,
+      re_src: 11,
+    },
+    afterHandle: AHS.J_D,
+  },
+
 }
 
 export default API_USER
diff --git a/src/background/msg.define.ts b/src/background/msg.define.ts
index 29b3e7ae..318fbd94 100644
--- a/src/background/msg.define.ts
+++ b/src/background/msg.define.ts
@@ -47,6 +47,7 @@ enum SEARCH {
 enum USER {
   GET_USER_INFO = 'getUserInfo',
   GET_USER_STAT = 'getUserStat',
+  RELATION_MODIFY = 'relationModify',
 }
 enum VIDEO {
   GET_RECOMMEND_VIDEOS = 'getRecommendVideos',
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 5ee96bb1..c3d2e2fc 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -29,7 +29,7 @@ interface Props {
   /** If you want to show preview video, you should set the cid value */
   cid?: number
   epid?: number
-  isFollowed?: boolean
+  followed?: boolean
   horizontal?: boolean
   tag?: string
   rank?: number
@@ -326,16 +326,28 @@ function handleUndo() {
             <a
               v-if="authorFace"
               :href="authorJumpUrl" target="_blank" rel="noopener noreferrer"
-              m="r-4" w="36px" h="36px" rounded="1/2" overflow="hidden"
+              m="r-4" w="36px" h="36px" rounded="1/2"
               object="center cover" bg="$bew-fill-4" cursor="pointer"
+              position-relative
               @click.stop=""
             >
               <img
+                rounded="1/2"
                 :src="`${removeHttpFromUrl(authorFace)}@50w_50h_1c`"
                 width="36"
                 height="36"
                 loading="lazy"
               >
+              <div
+                v-if="followed"
+                pos="absolute bottom--2px right--2px"
+                w-14px h-14px
+                bg="$bew-theme-color"
+                rounded="1/2"
+                grid place-items-center
+              >
+                <div color-white text-sm class="i-mingcute:check-fill w-10px h-10px" />
+              </div>
             </a>
           </div>
           <div class="group/desc" flex="~ col" w="full" align="items-start">
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index c061d023..7eccd629 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -463,6 +463,7 @@ defineExpose({ initData })
           :cover="video.pic"
           :author="video.owner.name"
           :author-face="video.owner.face"
+          :followed="!!video.is_followed"
           :mid="video.owner.mid"
           :view="video.stat.view"
           :danmaku="video.stat.danmaku"
@@ -490,6 +491,7 @@ defineExpose({ initData })
           :cover="`${video.cover}`"
           :author="video?.mask?.avatar.text"
           :author-face="video?.mask?.avatar.cover"
+          :followed="video?.bottom_rcmd_reason === '已关注' || video?.bottom_rcmd_reason === '已關注'"
           :mid="video?.mask?.avatar.up_id "
           :capsule-text="video?.desc?.split('·')[1]"
           :bvid="video.bvid"