fix: bug fixes

src/background/main.ts

@@ -165,7 +165,6 @@ chrome.runtime.onMessage.addListener((message: any, sender: chrome.runtime.Messa
     return true
   }
   if (message.contentScriptQuery === 'getNewMomentsCount') {
-    // https://api.bilibili.com/x/web-interface/dynamic/entrance
     const url = `${API_URL}/x/web-interface/dynamic/entrance`
     fetch(url)
       .then(response => response.json())
@@ -173,4 +172,19 @@ chrome.runtime.onMessage.addListener((message: any, sender: chrome.runtime.Messa
       .catch(error => console.error(error))
     return true
   }
+  if (message.contentScriptQuery === 'submitDislike') {
+    // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%8F%90%E4%BA%A4%E4%B8%8D%E5%96%9C%E6%AC%A2
+    const url = `${APP_URL}/x/feed/dislike?access_key=${message.accessKey}
+      &goto=${message.goto}
+      &id=${message.id}
+      &mid=${message.mid}
+      &reason_id=${message.reasonID}
+      &rid=${message.rid}
+      &tag_id=${message.tagID}`
+    fetch(url)
+      .then(response => response.json())
+      .then(data => sendResponse(data))
+      .catch(error => console.error(error))
+    return true
+  }
 })

src/components/Topbar/index.vue

@@ -11,6 +11,8 @@ export default defineComponent({
       showTopbarMask: false,
       showNotificationsDropDown: false,
       showUploadDropDown: false,
+      showSearchBar: true,
+      showRightContent: true,
       isLogin: !!getUserID(),
       unReadmessage: {},
       unReadDm: {},
@@ -103,7 +105,13 @@ export default defineComponent({
 </script>
 
 <template>
-  <header>
+  <header
+    flex="~"
+    justify="between"
+    align="items-center"
+    p="lg:x-23 <lg:x-16 y-2"
+    w="screen"
+  >
     <transition name="topbar">
       <div
         v-show="showTopbarMask"
@@ -153,8 +161,27 @@ export default defineComponent({
       </transition>
     </div>
 
-    <search-bar></search-bar>
+    <!-- search bar -->
+    <div
+      flex="~"
+      w="full"
+      justify="md:center <md:end"
+    >
+      <!-- <button
+        class="icon-btn"
+        text="$bew-text-1 2xl"
+        display="!md:hidden !<md:block"
+        m="r-4"
+      >
+        <tabler:search />
+      </button> -->
+      <search-bar
+        v-if="showSearchBar"
+        ref="searchBar"
+      ></search-bar>
+    </div>
 
+    <!-- right content -->
     <div class="right-side">
       <div v-if="!isLogin" class="right-side-item">
         <a href="https://passport.bilibili.com/login" class="login">
@@ -168,12 +195,14 @@ export default defineComponent({
           @mouseenter="openUserPanel"
           @mouseleave="closeUserPanel"
         >
-          <div
+          <a
             id="avatar-img"
             ref="avatarImg"
+            :href="'https://space.bilibili.com/' + mid"
+            target="_blank"
             class="rounded-full z-1 w-40px h-40px bg-$bew-fill-3 bg-cover bg-center"
             :style="{ backgroundImage: `url(${(userInfo.face + '').replace('http:', '')})` }"
-          ></div>
+          ></a>
           <div
             id="avatar-shadow"
             ref="avatarShadow"
@@ -181,11 +210,12 @@ export default defineComponent({
             opacity="80"
             :style="{ backgroundImage: `url(${(userInfo.face + '').replace('http:', '')})` }"
           ></div>
-
           <transition name="slide">
             <user-panel-dropdown
               v-if="showUserPanel"
+              ref="userPanelDropdown"
               :user-info="userInfo"
+              after:h="!0"
               class="bew-popover"
             ></user-panel-dropdown>
           </transition>
@@ -269,7 +299,8 @@ export default defineComponent({
             href="https://member.bilibili.com/platform/upload/video/frame"
             target="_blank"
             class="bg-$bew-theme-color rounded-full !text-white !text-base !px-4 mx-1"
-            w="xl:auto <xl:42px"
+            flex="~ justify-center"
+            w="xl:100px <xl:42px"
             h="xl:auto <xl:42px"
             p="xl:auto <xl:unset"
           >
@@ -323,9 +354,6 @@ export default defineComponent({
     after:absolute after:-top-8 after:left-0 after:-z-1;
 }
 
-header {
-  @apply flex justify-between px-23 py-2 w-screen items-center;
-}
 .left-side {
   @apply relative;
   .logo {
@@ -362,7 +390,7 @@ header {
   }
 
   &-item {
-    @apply relative;
+    @apply relative text-$bew-text-1;
   }
 
   &-item:not(#avatar) {

src/contentScripts/views/App.vue

@@ -5,12 +5,15 @@
   <!-- is home page -->
   <home></home>
   <!-- button -->
-  <div class="fixed bottom-5 right-5" flex="~ col">
+  <div
+    flex="~ col"
+    pos="fixed bottom-5 lg:right-5 <lg:right-3"
+  >
     <button
       class="transform active:scale-90"
-      w="45px"
-      h="45px"
-      p="3"
+      w="lg:45px <lg:40px"
+      h="lg:45px <lg:40px"
+      p="lg:3 <lg:2"
       m="b-3"
       bg="$bew-content-1"
       text="2xl $bew-text-1"
@@ -26,9 +29,9 @@
 
     <button
       class="leading-none transform active:scale-90"
-      w="45px"
-      h="45px"
-      p="3"
+      w="lg:45px <lg:40px"
+      h="lg:45px <lg:40px"
+      p="lg:3 <lg:2"
       bg="$bew-content-1"
       text="2xl $bew-text-1"
       font="leading-0"
@@ -85,4 +88,5 @@ window.onload = () => {
 .v-leave-to {
   @apply opacity-0 transform -translate-y-full;
 }
+
 </style>

src/contentScripts/views/Home/RecommendContent.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { accessKey } from '~/logic/storage'
+import { accessKey } from '~/logic/index'
 import { numFormatter, calcTimeSince, calcCurrentTime } from '~/utils'
 
 export default defineComponent({
@@ -11,13 +11,16 @@ export default defineComponent({
       calcTimeSince,
       calcCurrentTime,
       MAX_LIMIT: 150 as const,
+      accessKey,
     }
   },
-  beforeUpdate() {
-    this.getRecommendVideo()
-    this.getRecommendVideo()
-  },
   mounted() {
+    // need to wait for accessKey to be loaded, otherwise the accessKey will be undefined
+    setTimeout(() => {
+      this.getRecommendVideo()
+      this.getRecommendVideo()
+    }, 2000)
+
     window.onscroll = async() => {
       if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
         if (!this.isLoading)
@@ -39,7 +42,7 @@ export default defineComponent({
         .sendMessage({
           contentScriptQuery: 'getRecommendVideo',
           idx,
-          accessKey: accessKey.value,
+          accessKey: this.accessKey,
         })
 
       if (response.code === 0) {
@@ -59,7 +62,7 @@ export default defineComponent({
     gotoVideo(uri: string) {
       window.open(`/video/av${uri.split('/')[3]}`)
     },
-    submitDislike(reasonID: number, goto: string, id: string, mid: number, rid: string, tagID: string) {
+    submitDislike(reasonID: number, goto: string, id: string, mid: string, rid: string, tagID: string) {
       browser.runtime
         .sendMessage({
           contentScriptQuery: 'submitDislike',
@@ -92,7 +95,7 @@ export default defineComponent({
 
 <template>
   <div
-    m="x-22 b-0 t-0"
+    m="lg:x-22 <lg:x-16 b-0 t-0"
     grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4"
   >
     <transition-group
@@ -105,10 +108,13 @@ export default defineComponent({
         :data-index="index"
         class="video-card"
       >
-        <div
-          @click.stop="gotoVideo(video.uri)"
+        <a
+          :href="'/video/av' + video.uri.split('/')[3]"
+          target="_blank"
         >
-          <div class="thumbnail">
+          <div
+            class="thumbnail"
+          >
             <div class="duration">
               {{ calcCurrentTime(video.duration) }}
             </div>
@@ -120,95 +126,104 @@ export default defineComponent({
             </div>
             <img class="cover-shadow" :src="video.cover + '@672w_378h_1c'" loading="lazy" />
           </div>
-          <div class="detail">
-            <div class="flex">
-              <a class="avatar" @click="gotoChannel(video.mid)">
-                <img
-                  :src="(video.face + '').replace('http:', '') + '@60w_60h_1c'"
-                  width="48"
-                  height="48"
-                  loading="lazy"
-                />
-              </a>
-            </div>
-            <div class="meta">
-              <div
-                flex="~"
-                justify="between"
-                w="full"
-                pos="relative"
+        </a>
+        <div class="detail">
+          <div class="flex">
+            <a
+              class="avatar"
+              cursor="pointer"
+              @click="gotoChannel(video.mid)"
+            >
+              <img
+                :src="(video.face + '').replace('http:', '') + '@60w_60h_1c'"
+                width="48"
+                height="48"
+                loading="lazy"
+              />
+            </a>
+          </div>
+          <div class="meta">
+            <div
+              flex="~"
+              justify="between"
+              w="full"
+              pos="relative"
+            >
+              <h3
+                class="video-title"
+                :title="video.title"
+                cursor="pointer"
+                @click="gotoVideo(video.uri)"
               >
-                <h3 class="video-title" :title="video.title">
-                  {{ video.title }}
-                </h3>
+                {{ video.title }}
+              </h3>
+              <div
+                class="icon-btn"
+                p="t-0.15rem x-2"
+                pointer="auto"
+                @click.stop="video.openControl = !video.openControl"
+              >
+                <tabler:dots-vertical
+                  text="lg"
+                />
+              </div>
+
+              <!-- dislike control -->
+              <!-- cover mask -->
+              <!-- <template v-if="video.openControl">
                 <div
-                  class="icon-btn"
-                  p="t-0.15rem x-2"
-                  pointer="auto"
-                  @click.stop="video.openControl = !video.openControl"
+                  pos="fixed top-0 left-0"
+                  w="full"
+                  h="full"
+                  z="20"
+                  @click.stop="video.openControl = false"
+                ></div>
+
+                <div
+                  pos="absolute top-9 right-0"
+                  p="2"
+                  z="20"
+                  w="180px"
+                  bg="$bew-content-1"
+                  rounded="$bew-radius"
+                  style="box-shadow: var(--bew-shadow-2); backdrop-filter: var(--bew-filter-glass);"
                 >
-                  <tabler:dots-vertical
-                    text="lg"
-                  />
-                </div>
-
-                <!-- dislike control -->
-                <!-- cover mask -->
-                <!-- <template v-if="video.openControl">
-                  <div
-                    pos="fixed top-0 left-0"
-                    w="full"
-                    h="full"
-                    z="20"
-                    @click.stop="video.openControl = false"
-                  ></div>
-
-                  <div
-                    pos="absolute top-9 right-0"
+                  <p
                     p="2"
-                    z="20"
-                    w="180px"
-                    bg="$bew-content-1"
-                    rounded="$bew-radius"
-                    style="box-shadow: var(--bew-shadow-2); backdrop-filter: var(--bew-filter-glass);"
+                    text="$bew-text-3"
                   >
-                    <p
+                    I don't like...
+                  </p>
+                  <ul>
+                    <li
+                      v-for="reason in video.dislike_reasons"
+                      :key="reason.reason_id"
                       p="2"
-                      text="$bew-text-3"
+                      m="b-1"
+                      cursor="pointer"
+                      hover:bg="$bew-fill-2"
+                      transition="all duration-300"
+                      rounded="$bew-radius"
+                      @click.stop="submitDislike(reason.reason_id,
+                                                 video.goto,
+                                                 video.param,
+                                                 video.mid,
+                                                 video.tid,
+                                                 video.tag.tag_id)"
                     >
-                      I don't like...
-                    </p>
-                    <ul>
-                      <li
-                        v-for="reason in video.dislike_reasons"
-                        :key="reason.reason_id"
-                        p="2"
-                        m="b-1"
-                        cursor="pointer"
-                        hover:bg="$bew-fill-2"
-                        transition="all duration-300"
-                        rounded="$bew-radius"
-                        @click.stop="submitDislike(reason.reason_id,
-                                                   video.goto,
-                                                   video.idx,
-                                                   video.mid,
-                                                   video.tid,
-                                                   video.tag.tag_id)"
-                      >
-                        {{ reason.reason_name }}
-                      </li>
-                    </ul>
-                  </div>
-                </template> -->
-              </div>
-              <div class="channel-name" @click="gotoChannel(video.mid)">
-                {{ video.name }}
-              </div>
-              <div class="video-info">
-                {{ numFormatter(video.play) }} views
-                <span class="text-xs font-light">•</span>
-                {{ calcTimeSince(new Date(video.ctime * 1000)) }} ago
-              </div>
+                      {{ reason.reason_name }}
+                    </li>
+                  </ul>
+                </div>
+              </template> -->
+            </div>
+            <div class="channel-name" @click="gotoChannel(video.mid)">
+              {{ video.name }}
+            </div>
+            <div class="video-info">
+              {{ numFormatter(video.play) }} views
+              <span class="text-xs font-light">•</span>
+              {{ calcTimeSince(new Date(video.ctime * 1000)) }} ago
             </div>
           </div>
         </div>

src/styles/main.scss

@@ -89,7 +89,7 @@ body {
   @apply inline-block cursor-pointer select-none
     opacity-75 transition duration-200 ease-in-out
     hover:opacity-100 hover:text-$bew-theme-color;
-  font-size: 0.9em;
+  font-size: 1rem;
 }
 
 .chk-btn {