From 0d7ac7331207803b6f4fd81bc896bc0761742ba1 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 6 Dec 2023 16:46:46 +0800
Subject: [PATCH] chore: reformat code

---
 src/components/AppBackground.vue              | 12 ++++--
 src/components/Button.vue                     |  2 +-
 src/components/DPlayer.vue                    | 38 +++++++++----------
 src/components/Dock/Dock.vue                  |  3 +-
 .../LongCoverCard/LongCoverCardSkeleton.vue   |  3 +-
 .../RightSideButtons/RightSideButtons.vue     | 10 ++++-
 src/components/SearchBar/SearchBar.vue        |  3 +-
 src/components/Select.vue                     |  3 +-
 src/components/Settings/Settings.vue          |  5 ++-
 src/components/Settings/components/About.vue  | 11 ++++--
 .../Settings/components/Appearance.vue        | 11 ++++--
 .../components/ChildSettingsDialog.vue        | 14 +++++--
 src/components/Settings/components/Home.vue   |  7 ++--
 .../Settings/components/SearchPage.vue        | 11 ++++--
 .../Settings/components/SettingsItemGroup.vue |  5 ++-
 src/components/Slider.vue                     |  3 +-
 src/components/Tabs/Tabs.vue                  |  4 +-
 .../Topbar/components/MomentsPop.vue          |  1 -
 .../Topbar/components/UserPanelPop.vue        |  3 +-
 src/components/VideoCard/VideoCard.vue        | 34 ++++++++++-------
 .../VideoCard/VideoCardSkeleton.vue           | 15 ++++++--
 .../views/Favorites/Favorites.vue             |  9 +++--
 src/contentScripts/views/Home/Home.vue        |  6 ++-
 .../views/Home/components/Ranking.vue         |  3 +-
 .../Home/components/SubscribedSeries.vue      |  1 -
 src/contentScripts/views/Video/Video.vue      |  3 +-
 .../views/WatchLater/WatchLater.vue           |  6 ++-
 27 files changed, 145 insertions(+), 81 deletions(-)

diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index 6bc6a28c..37a19f91 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -37,14 +37,16 @@ function setAppWallpaperMaskingOpacity() {
     <div v-if="activatedPage === AppPage.Search">
       <!-- background -->
       <div
-        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg" z--1
+        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
+        z--1
         :style="{ backgroundImage: `url(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaper : settings.wallpaper})` }"
       />
       <!-- background mask -->
       <transition name="fade">
         <div
           v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
-          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask" duration-300 z--1
+          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
+          duration-300 z--1
           :style="{
             backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
           }"
@@ -54,14 +56,16 @@ function setAppWallpaperMaskingOpacity() {
     <div v-else>
       <!-- background -->
       <div
-        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg" z--1
+        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
+        z--1
         :style="{ backgroundImage: `url(${settings.wallpaper})` }"
       />
       <!-- background mask -->
       <transition name="fade">
         <div
           v-if="settings.enableWallpaperMasking"
-          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask" duration-300 z--1
+          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-homepage-bg-mask"
+          duration-300 z--1
           :style="{
             backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
           }"
diff --git a/src/components/Button.vue b/src/components/Button.vue
index bcd18e76..c9c9ac18 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -39,7 +39,7 @@ function handleClick(evt: MouseEvent) {
       'color': textColor,
       '--b-button-radius': round ? '50px' : '',
       'width': block ? '100%' : 'var(--b-button-width)',
-      'justifyContent': center ? 'center' : ''
+      'justifyContent': center ? 'center' : '',
     }"
     @click="handleClick"
   >
diff --git a/src/components/DPlayer.vue b/src/components/DPlayer.vue
index ef3e9d5e..80b836eb 100644
--- a/src/components/DPlayer.vue
+++ b/src/components/DPlayer.vue
@@ -1,26 +1,26 @@
 <script lang="ts" setup>
-import DPlayer from 'dplayer'
+// import DPlayer from 'dplayer'
 
 const dplayer = ref<HTMLElement>()
 
-onMounted(() => {
-  const dp = new DPlayer({
-    container: dplayer.value,
-    screenshot: true,
-    video: {
-      url: 'demo.mp4',
-      pic: 'demo.jpg',
-      thumbnails: 'thumbnails.jpg',
-    },
-    subtitle: {
-      url: 'webvtt.vtt',
-    },
-    danmaku: {
-      id: 'demo',
-      api: 'https://api.prprpr.me/dplayer/',
-    },
-  })
-})
+// onMounted(() => {
+//   // const dp = new DPlayer({
+//   //   container: dplayer.value,
+//   //   screenshot: true,
+//   //   video: {
+//   //     url: 'demo.mp4',
+//   //     pic: 'demo.jpg',
+//   //     thumbnails: 'thumbnails.jpg',
+//   //   },
+//   //   subtitle: {
+//   //     url: 'webvtt.vtt',
+//   //   },
+//   //   danmaku: {
+//   //     id: 'demo',
+//   //     api: 'https://api.prprpr.me/dplayer/',
+//   //   },
+//   // })
+// })
 </script>
 
 <template>
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index a119ef55..5333d4da 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -79,7 +79,8 @@ function toggleDockHide(hide: boolean) {
       bottom: settings.dockPosition === 'bottom',
       hide: hideDock,
     }"
-    pos="absolute top-0" flex="~ col" h-full justify-center z-1 pointer-events-none
+    pos="absolute top-0" flex="~ col" h-full justify-center z-1
+    pointer-events-none
     @mouseenter="toggleDockHide(false)"
     @mouseleave="toggleDockHide(true)"
   >
diff --git a/src/components/LongCoverCard/LongCoverCardSkeleton.vue b/src/components/LongCoverCard/LongCoverCardSkeleton.vue
index c98c5d52..d14970f3 100644
--- a/src/components/LongCoverCard/LongCoverCardSkeleton.vue
+++ b/src/components/LongCoverCard/LongCoverCardSkeleton.vue
@@ -20,7 +20,8 @@ defineProps<{
       <p w-full h-5 my-2 my-4 bg="$bew-fill-3" />
       <div text="$bew-fill-2" mb-10 flex items-center>
         <div
-          text="transparent" bg="$bew-fill-2" p="x-3 y-1" mr-2 h-27px rounded-4
+          text="transparent" bg="$bew-fill-2" p="x-3 y-1" mr-2 h-27px
+          rounded-4
         >
           0.0
         </div>
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index feba6f99..0070257d 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -25,7 +25,10 @@ function toggleDark() {
 </script>
 
 <template>
-  <div pos="fixed top-0 right-6px" h-full flex items-center z-10 pointer-events-none>
+  <div
+    pos="fixed top-0 right-6px" h-full flex items-center z-10
+    pointer-events-none
+  >
     <div flex="~ gap-2 col" pointer-events-auto>
       <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
         <Button
@@ -49,7 +52,10 @@ function toggleDark() {
         </Button>
       </Tooltip>
       <Tooltip :content="$t('dock.settings')" placement="left">
-        <Button class="ctrl-btn" center size="small" round backdrop-glass @click="emit('settings-visibility-change')">
+        <Button
+          class="ctrl-btn" center size="small" round backdrop-glass
+          @click="emit('settings-visibility-change')"
+        >
           <mingcute:settings-3-line />
         </Button>
       </Tooltip>
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index cb73f166..620614c5 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -145,7 +145,8 @@ function handleKeyDown() {
 
     <div
       v-if="blurredOnFocus"
-      pos="fixed top-0 left-0" w-full h-full duration-500 pointer-events-none ease-out
+      pos="fixed top-0 left-0" w-full h-full duration-500 pointer-events-none
+      ease-out
       :style="{ backdropFilter: isFocus ? 'blur(15px)' : 'blur(0)' }"
     />
 
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 8bdb3362..eb4e88da 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -86,7 +86,8 @@ function onMouseEnter() {
     <transition>
       <div
         v-if="showOptions"
-        pos="absolute" bg="$bew-elevated-2" backdrop-glass shadow="$bew-shadow-2" p="2" m="t-2"
+        pos="absolute" bg="$bew-elevated-2" backdrop-glass shadow="$bew-shadow-2" p="2"
+        m="t-2"
         rounded="$bew-radius" z="1" flex="~ col gap-1"
         w="full" max-h-300px overflow-y-scroll will-change-transform
       >
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 8681417e..f97c30c4 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -110,7 +110,7 @@ function setCurrentTitle() {
       <aside
         class="group" shrink-0 p="x-4" pos="absolute left--42px" z-2
         :style="{
-          pointerEvents: preventCloseSettings ? 'none' : 'unset'
+          pointerEvents: preventCloseSettings ? 'none' : 'unset',
         }"
       >
         <ul
@@ -174,7 +174,8 @@ function setCurrentTitle() {
               {{ title }}
             </div>
             <div
-              text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px" p="1" rounded-8 cursor="pointer" backdrop-glass
+              text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
+              p="1" rounded-8 cursor="pointer" backdrop-glass
               hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
               @click="handleClose"
             >
diff --git a/src/components/Settings/components/About.vue b/src/components/Settings/components/About.vue
index 34f17337..0491805d 100644
--- a/src/components/Settings/components/About.vue
+++ b/src/components/Settings/components/About.vue
@@ -52,7 +52,10 @@ function handleExportSettings() {
 </script>
 
 <template>
-  <div flex items-center justify-center pos="absolute top--80px left-0" w-full h-full>
+  <div
+    flex items-center justify-center pos="absolute top--80px left-0" w-full
+    h-full
+  >
     <div flex="~ col gap-1" items-center>
       <img :src="`${browser.runtime.getURL('/assets/icon-512.png')}`" alt="" width="80">
       <p text-xl>
@@ -64,14 +67,16 @@ function handleExportSettings() {
       <p mt-6 flex gap-2>
         <a
           href="https://github.com/hakadao/BewlyBewly" target="_blank"
-          p="y-2 x-4" flex items-center bg="black dark:white" un-text="!white dark:!black" rounded-12
+          p="y-2 x-4" flex items-center bg="black dark:white" un-text="!white dark:!black"
+          rounded-12
           w-95px
         >
           <tabler:brand-github mr-2 /> Github
         </a>
         <a
           href="https://space.bilibili.com/5011356/dynamic" target="_blank"
-          p="y-2 x-4" flex items-center bg="#fb7299 dark:#ffa7c0" un-text="!white dark:!black" rounded-12
+          p="y-2 x-4" flex items-center bg="#fb7299 dark:#ffa7c0" un-text="!white dark:!black"
+          rounded-12
           w-95px
         >
           <tabler:brand-bilibili mr-2 /> Bilibili
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 0717bcbd..b3bae024 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -88,7 +88,8 @@ function changeWallpaper(url: string) {
         <div flex="~ gap-2 wrap" justify-end>
           <div
             v-for="color in themeColorOptions" :key="color"
-            w-20px h-20px rounded-8 cursor-pointer transition duration-300 box-border
+            w-20px h-20px rounded-8 cursor-pointer transition
+            duration-300 box-border
             :style="{
               background: color,
               transform: color === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
@@ -101,7 +102,8 @@ function changeWallpaper(url: string) {
       </SettingsItem>
       <SettingsItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
         <div
-          w-20px h-20px rounded-8 cursor-pointer transition duration-300 box-border
+          w-20px h-20px rounded-8 cursor-pointer transition
+          duration-300 box-border
           :style="{
             background: bilibiliEvolvedThemeColor,
             transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
@@ -172,7 +174,10 @@ function changeWallpaper(url: string) {
             un-border="4 transparent" cursor-pointer shrink-0
             w="xl:1/4 lg:1/3 md:1/2"
           >
-            <img v-if="settings.wallpaper" :src="settings.wallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
+            <img
+              v-if="settings.wallpaper" :src="settings.wallpaper" alt="" w-full h-full
+              object-cover onerror="this.style.display='none'; this.onerror=null;"
+            >
           </picture>
           <div>
             <Input v-model="settings.wallpaper" w-full />
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index 05f1e413..b1a23785 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -14,13 +14,18 @@ function handleClose() {
 
 <template>
   <div class="child-settings-dialog">
-    <div pos="fixed top-0 left-0" w-full h-full bg="black opacity-20 dark:opacity-40" rounded="$bew-radius" z-1 @click="handleClose" />
+    <div
+      pos="fixed top-0 left-0" w-full h-full bg="black opacity-20 dark:opacity-40" rounded="$bew-radius"
+      z-1 @click="handleClose"
+    />
     <div
       pos="fixed top-1/2 left-1/2" bg="$bew-elevated-solid-1" rounded="$bew-radius"
-      transform="translate--1/2" z-2 shadow="$bew-shadow-3" overflow="x-hidden y-overlay" w="$b-dialog-width" h="$b-dialog-height"
+      transform="translate--1/2" z-2 shadow="$bew-shadow-3" overflow="x-hidden y-overlay" w="$b-dialog-width"
+      h="$b-dialog-height"
     >
       <header
-        pos="sticky top-0 left-0" w-full h-80px px-8 flex items-center justify-between
+        pos="sticky top-0 left-0" w-full h-80px px-8 flex
+        items-center justify-between
         rounded="t-$bew-radius" z-1
         style="
           background: linear-gradient(var(--bew-elevated-solid-1), transparent);
@@ -46,7 +51,8 @@ function handleClose() {
         </div>
 
         <div
-          text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px" ml-auto p="1" rounded-8 cursor="pointer" backdrop-glass
+          text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
+          ml-auto p="1" rounded-8 cursor="pointer" backdrop-glass
           hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
           @click="handleClose"
         >
diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue
index f09cb366..b777cb16 100644
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import QRCodeVue from 'qrcode.vue'
 import { useToast } from 'vue-toastification'
 import SearchPage from './SearchPage.vue'
 import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
 import { accessKey, settings } from '~/logic'
 
-const { t } = useI18n()
 const toast = useToast()
 
 const showSearchPageModeSharedSettings = ref<boolean>(false)
@@ -143,7 +141,10 @@ function handleCloseSearchPageModeSharedSettings() {
           <Button v-if="!accessKey" type="primary" center block @click="handleAuthorize">
             {{ $t('settings.btn.authorize') }}...
           </Button>
-          <Button v-else type="secondary" center block style="--b-button-text-color: var(--bew-error-color)" @click="handleRevoke">
+          <Button
+            v-else type="secondary" center block style="--b-button-text-color: var(--bew-error-color)"
+            @click="handleRevoke"
+          >
             {{ $t('settings.btn.revoke') }}
           </Button>
         </div>
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index bbf91ee2..19560027 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -56,7 +56,8 @@ function changeWallpaper(url: string) {
       <SettingsItem :title="$t('settings.logo_color')">
         <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
           <div
-            flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
+            flex="1 ~" items-center justify-center py-1 cursor-pointer
+            text-center rounded="$bew-radius"
             :style="{
               background: settings.searchPageLogoColor === 'themeColor' || !settings.searchPageLogoColor ? 'var(--bew-theme-color)' : '',
               color: settings.searchPageLogoColor === 'themeColor' || !settings.searchPageLogoColor ? 'white' : '',
@@ -66,7 +67,8 @@ function changeWallpaper(url: string) {
             {{ $t('settings.logo_color_opt.theme_color') }}
           </div>
           <div
-            flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
+            flex="1 ~" items-center justify-center py-1 cursor-pointer
+            text-center rounded="$bew-radius"
             :style="{
               background: settings.searchPageLogoColor === 'white' ? 'var(--bew-theme-color)' : '',
               color: settings.searchPageLogoColor === 'white' ? 'white' : '',
@@ -209,7 +211,10 @@ function changeWallpaper(url: string) {
               un-border="4 transparent" cursor-pointer shrink-0
               w="xl:1/4 lg:1/3 md:1/2"
             >
-              <img v-if="settings.searchPageWallpaper" :src="settings.searchPageWallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
+              <img
+                v-if="settings.searchPageWallpaper" :src="settings.searchPageWallpaper" alt="" w-full h-full
+                object-cover onerror="this.style.display='none'; this.onerror=null;"
+              >
             </picture>
             <div>
               <Input v-model="settings.searchPageWallpaper" w-full />
diff --git a/src/components/Settings/components/SettingsItemGroup.vue b/src/components/Settings/components/SettingsItemGroup.vue
index 19a522e9..e693d1f9 100644
--- a/src/components/Settings/components/SettingsItemGroup.vue
+++ b/src/components/Settings/components/SettingsItemGroup.vue
@@ -14,7 +14,10 @@ defineProps<{
       {{ desc }}
     </p>
 
-    <main border="1 solid $bew-border-color" mt-2 px-4 mx--4 rounded="$bew-radius" bg="dark:$bew-fill-1">
+    <main
+      border="1 solid $bew-border-color" mt-2 px-4 mx--4 rounded="$bew-radius"
+      bg="dark:$bew-fill-1"
+    >
       <slot />
     </main>
   </div>
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
index 84471e50..b861342e 100644
--- a/src/components/Slider.vue
+++ b/src/components/Slider.vue
@@ -40,7 +40,8 @@ onMounted(() => {
   <label cursor-pointer flex items-center gap-3 w="$b-slider-width">
     <input
       ref="rangeRef"
-      v-model="modelValue" type="range" :min="min" :max="max" class="slider" appearance-none outline-none bg="$bew-fill-1" rounded="$b-slider-height"
+      v-model="modelValue" type="range" :min="min" :max="max" class="slider"
+      appearance-none outline-none bg="$bew-fill-1" rounded="$b-slider-height"
       border="size-$b-border-width color-$bew-border-color" w="$b-slider-width" h="$b-slider-height"
     >
     <span>{{ label }}</span>
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index ba33337a..0b196e23 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const props = defineProps({
+// const props = defineProps({
 
-})
+// })
 </script>
 
 <template>
diff --git a/src/components/Topbar/components/MomentsPop.vue b/src/components/Topbar/components/MomentsPop.vue
index 1d06c0b0..cebe40b5 100644
--- a/src/components/Topbar/components/MomentsPop.vue
+++ b/src/components/Topbar/components/MomentsPop.vue
@@ -166,7 +166,6 @@ function getTopbarLiveMoments(page: number) {
         if (moments.length !== 0 && res.data.list.length < 10) {
           isLoading.value = false
           noMoreContent.value = true
-          console.log('no more content')
 
           return
         }
diff --git a/src/components/Topbar/components/UserPanelPop.vue b/src/components/Topbar/components/UserPanelPop.vue
index 5b0a9383..290065c8 100644
--- a/src/components/Topbar/components/UserPanelPop.vue
+++ b/src/components/Topbar/components/UserPanelPop.vue
@@ -41,7 +41,8 @@ async function logout() {
     <div id="base-info">
       {{ userInfo.uname ? userInfo.uname : '-' }}
       <div
-        flex items-center bg="$bew-theme-color" p="x-3 y-1" ml-2 text="white base" rounded="$bew-radius"
+        flex items-center bg="$bew-theme-color" p="x-3 y-1" ml-2
+        text="white base" rounded="$bew-radius"
         leading-none
       >
         <span>{{ userInfo.level_info?.current_level ? userInfo.level_info.current_level : '0' }}</span>
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 4d9c4dbe..10f3401b 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -191,7 +191,8 @@ function handelMouseLeave() {
           :style="{ width: horizontal ? '300px' : '100%' }"
           class="group/cover"
           shrink-0
-          w="full" h-fit relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer
+          w="full" h-fit relative bg="$bew-fill-4" rounded="$bew-radius"
+          cursor-pointer
           duration-300 ease-in-out
           group-hover:z-2
         >
@@ -215,7 +216,8 @@ function handelMouseLeave() {
           <div v-if="rank" absolute p-2 group-hover:opacity-0 duration-300>
             <div
               v-if="Number(rank) <= 3"
-              bg="$bew-theme-color" text-center lh-30px h-30px w-30px text-white rounded="1/2" shadow="$bew-shadow-1"
+              bg="$bew-theme-color" text-center lh-30px h-30px w-30px
+              text-white rounded="1/2" shadow="$bew-shadow-1"
               border="1 $bew-theme-color"
               text="2xl" fw-bold
             >
@@ -223,7 +225,8 @@ function handelMouseLeave() {
             </div>
             <div
               v-else
-              bg="$bew-elevated-solid-1" text-center lh-30px h-30px w-30px rounded="1/2" shadow="$bew-shadow-1"
+              bg="$bew-elevated-solid-1" text-center lh-30px h-30px w-30px
+              rounded="1/2" shadow="$bew-shadow-1"
               border="1 $bew-border-color"
             >
               {{ rank }}
@@ -294,7 +297,8 @@ function handelMouseLeave() {
           <div :style="{ display: horizontal ? 'none' : 'flex' }">
             <a
               v-if="authorFace"
-              m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden" object="center cover"
+              m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden"
+              object="center cover"
               bg="$bew-fill-4" cursor="pointer"
               style="--un-shadow: 0 0 0 2px var(--bew-theme-color)"
               :href="`//space.bilibili.com/${mid}`" target="_blank"
@@ -430,11 +434,17 @@ function handelMouseLeave() {
               </template>
 
               <!-- Tag -->
-              <span v-if="tag" text="sm $bew-theme-color" p="x-2 y-1" rounded="$bew-radius" bg="$bew-theme-color-20" w-fit m="t-2 r-2">
+              <span
+                v-if="tag" text="sm $bew-theme-color" p="x-2 y-1" rounded="$bew-radius" bg="$bew-theme-color-20"
+                w-fit m="t-2 r-2"
+              >
                 {{ tag }}
               </span>
               <!-- Capsule -->
-              <span v-if="publishedTimestamp || capsuleText" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+              <span
+                v-if="publishedTimestamp || capsuleText" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1"
+                bg="$bew-fill-1" rounded-4
+              >
                 {{ publishedTimestamp ? calcTimeSince(publishedTimestamp * 1000) : capsuleText }}
               </span>
             </div>
@@ -446,19 +456,16 @@ function handelMouseLeave() {
     <!-- skeleton -->
     <template v-if="!horizontal">
       <div
-        block
-        mb-10 pointer-events-none select-none invisible
+        block mb-10 pointer-events-none select-none invisible
       >
         <!-- Cover -->
         <div w-full shrink-0 aspect-video h-fit rounded="$bew-radius" />
         <!-- Other Information -->
         <div
-          mt-4
-          flex="~ gap-4"
+          mt-4 flex="~ gap-4"
         >
           <div
-            block
-            w="40px" h="40px" rounded="1/2" shrink-0
+            block w="40px" h="40px" rounded="1/2" shrink-0
           />
           <div w-full>
             <div grid gap-2>
@@ -487,8 +494,7 @@ function handelMouseLeave() {
         <div w-300px shrink-0 aspect-video h-fit rounded="$bew-radius" />
         <!-- Other Information -->
         <div
-          w-full
-          flex="~ gap-4"
+          w-full flex="~ gap-4"
         >
           <div w-full>
             <div grid gap-2>
diff --git a/src/components/VideoCard/VideoCardSkeleton.vue b/src/components/VideoCard/VideoCardSkeleton.vue
index a24bab46..98951221 100644
--- a/src/components/VideoCard/VideoCardSkeleton.vue
+++ b/src/components/VideoCard/VideoCardSkeleton.vue
@@ -12,7 +12,10 @@ defineProps<{
   >
     <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
     <div flex mt-4>
-      <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
+      <div
+        m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4"
+        shrink-0
+      />
       <div w-full>
         <div grid gap-2>
           <div w-full h-5 bg="$bew-fill-3" />
@@ -22,7 +25,10 @@ defineProps<{
           <div w="50%" h-4 bg="$bew-fill-2" />
           <div w="80%" h-4 bg="$bew-fill-2" />
         </div>
-        <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+        <div
+          text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1"
+          rounded-4
+        >
           hello world
         </div>
       </div>
@@ -35,7 +41,10 @@ defineProps<{
     mb-10 pointer-events-none select-none
   >
     <!-- Cover -->
-    <div :style="{ width: '300px' }" shrink-0 aspect-video h-fit bg="$bew-fill-4" rounded="$bew-radius" />
+    <div
+      :style="{ width: '300px' }" shrink-0 aspect-video h-fit bg="$bew-fill-4"
+      rounded="$bew-radius"
+    />
     <!-- Other Information -->
     <div
       w-full mt-0
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 698bae99..cc328ee1 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -170,7 +170,8 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
         {{ selectedCategory?.title }}
       </h3> -->
       <div
-        fixed z-10 absolute p-2 flex="~ gap-2" items-center
+        fixed z-10 absolute p-2 flex="~ gap-2"
+        items-center
         bg="$bew-elevated-solid-1" rounded="$bew-radius" shadow="$bew-shadow-2" mt--2 transition="all 300 ease-in-out"
         :class="{ hide: shouldMoveCtrlBarUp }"
       >
@@ -242,11 +243,13 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
 
     <aside relative w="full md:40% lg:30% xl:25%" display="md:block none" order="1 md:2 lg:2">
       <div
-        pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full h="auto md:[calc(100vh-160px)]" p-6
+        pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full
+        h="auto md:[calc(100vh-160px)]" p-6
         rounded="$bew-radius" overflow-hidden bg="$bew-fill-3"
       >
         <div
-          pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1
+          pos="absolute top-0 left-0" w-full h-full bg-cover bg-center
+          z--1
         >
           <div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" bg="$bew-fill-4" />
           <img
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 43cd7459..cbd0f85e 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -98,7 +98,8 @@ onUnmounted(() => {
         <transition name="fade">
           <div
             v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
-            pos="relative left-0 top-0" w-full h-inherit pointer-events-none duration-300 z-1
+            pos="relative left-0 top-0" w-full h-inherit pointer-events-none duration-300
+            z-1
             :style="{
               backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
             }"
@@ -139,7 +140,8 @@ onUnmounted(() => {
       </Transition>
 
       <header
-        pos="sticky top-80px" w-fit z-10 mb-9 duration-300 ease-in-out
+        pos="sticky top-80px" w-fit z-10 mb-9 duration-300
+        ease-in-out
         :class="{ hide: shouldMoveTabsUp }"
       >
         <ul flex="~ items-center gap-3">
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 794badd6..ae50d809 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -109,7 +109,8 @@ function getRankingPgc() {
 <template>
   <div flex="~ gap-40px">
     <aside
-      pos="sticky top-150px" h="[calc(100vh-140px)]" w-200px shrink-0 duration-300 ease-in-out
+      pos="sticky top-150px" h="[calc(100vh-140px)]" w-200px shrink-0 duration-300
+      ease-in-out
       :class="{ hide: shouldMoveAsideUp }"
     >
       <OverlayScrollbarsComponent h-inherit p-20px m--20px defer>
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 08d29bed..70b973a9 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -123,4 +123,3 @@ function jumpToLoginPage() {
 
 <style lang="scss" scoped>
 </style>
-~/models/apiModels/moment/momentResult
diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue
index e6ae862d..65797171 100644
--- a/src/contentScripts/views/Video/Video.vue
+++ b/src/contentScripts/views/Video/Video.vue
@@ -190,7 +190,8 @@ function setupCommentEmote(content: string, emote: any) {
       </section>
       <section bg="$bew-content-solid-1" rounded="$bew-radius" p-4>
         <section
-          flex justify-between bg="$bew-fill-1" rounded="$bew-radius" p-2 mb-4 relative z-1
+          flex justify-between bg="$bew-fill-1" rounded="$bew-radius" p-2
+          mb-4 relative z-1
           overflow-hidden
         >
           <img
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index c19b8990..555ab5e0 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -267,11 +267,13 @@ function jumpToLoginPage() {
 
     <aside relative w="full md:40% lg:30% xl:25%" order="1 md:2 lg:2">
       <div
-        pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full h="auto md:[calc(100vh-160px)]" p-6
+        pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full
+        h="auto md:[calc(100vh-160px)]" p-6
         rounded="$bew-radius" overflow-hidden bg="$bew-fill-3"
       >
         <div
-          pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1
+          pos="absolute top-0 left-0" w-full h-full bg-cover bg-center
+          z--1
         >
           <div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" bg="$bew-fill-4" />
           <img