diff --git a/src/components/BewSelect.vue b/src/components/BewSelect.vue
index e0f669d4..c1a90db7 100644
--- a/src/components/BewSelect.vue
+++ b/src/components/BewSelect.vue
@@ -17,12 +17,13 @@ export default defineComponent({
     }
   },
   created() {
-    if (!this.options) return
+    if (!this.options)
+      return
     this.label = `${this.options.find((item: OptionType) => item.value === this.modelValue)?.label}`
   },
   methods: {
 
-    onClickOption(val: {value: string; label: string}) {
+    onClickOption(val: { value: string; label: string }) {
       window.removeEventListener('click', () => {})
       this.label = val.label
       this.$emit('update:modelValue', val.value)
@@ -77,7 +78,7 @@ export default defineComponent({
         display="inline-block"
         transform="~ rotate-45 -translate-y-1/4"
         transition="all duration-300"
-      ></div>
+      />
     </div>
     <transition>
       <div
@@ -103,7 +104,7 @@ export default defineComponent({
           cursor="pointer"
           @click="onClickOption(option)"
         >
-          <span v-text="option.label"></span>
+          <span v-text="option.label" />
         </div>
       </div>
     </transition>
@@ -113,11 +114,11 @@ export default defineComponent({
 <style lang="scss" scoped>
 .v-enter-active,
 .v-leave-active {
-  @apply transition-all duration-500;
+  --at-apply: transition-all duration-500;
 }
 
 .v-enter-from,
 .v-leave-to {
-  @apply opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm;
+  --at-apply: opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm;
 }
 </style>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index e202daf1..05479109 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -122,29 +122,29 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #settings-window {
-  @apply fixed top-1/5 left-1/2 w-700px
+  --at-apply: fixed top-1/5 left-1/2 w-700px
     transform -translate-x-1/2
     rounded-$bew-radius p-8
     bg-$bew-content-solid-1;
   box-shadow: var(--bew-shadow-3);
 
   .settings-item {
-    @apply flex justify-between items-center py-2 text-base;
+    --at-apply: flex justify-between items-center py-2 text-base;
     .desc {
-      @apply text-sm text-$bew-text-3;
+      --at-apply: text-sm text-$bew-text-3;
     }
 
     > *:first-child {
-      @apply w-5/7 mr-4;
+      --at-apply: w-5/7 mr-4;
     }
 
     > *:last-child {
-      @apply w-2/7;
+      --at-apply: w-2/7;
     }
   }
 }
 button,
 select {
-  @apply w-120px
+  --at-apply: w-120px
 }
 </style>
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 457f4c46..c4610cf9 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { Transition, onMounted, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils'
@@ -14,7 +13,6 @@ const props = withDefaults(defineProps<Props>(), {
   showSearchBar: true,
 })
 
-const { t } = useI18n()
 const mid = getUserID() || ''
 const userInfo = reactive<UserInfo | {}>({}) as UnwrapNestedRefs<UserInfo>
 
@@ -230,7 +228,7 @@ function getNewMomentsCount() {
       <div v-if="!isLogin" class="right-side-item">
         <a href="https://passport.bilibili.com/login" class="login">
           <ic:outline-account-circle class="text-base mr-2" />{{
-            t('topbar.sign_in')
+            $t('topbar.sign_in')
           }}
         </a>
       </div>
@@ -301,7 +299,7 @@ function getNewMomentsCount() {
             <a
               href="https://message.bilibili.com"
               target="_blank"
-              :title="t('topbar.notifications')"
+              :title="$t('topbar.notifications')"
             >
               <tabler:bell />
             </a>
@@ -328,7 +326,7 @@ function getNewMomentsCount() {
             <a
               href="https://t.bilibili.com"
               target="_blank"
-              :title="t('topbar.moments')"
+              :title="$t('topbar.moments')"
             >
               <tabler:windmill />
             </a>
@@ -348,7 +346,7 @@ function getNewMomentsCount() {
             <a
               :href="`https://space.bilibili.com/${mid}/favlist`"
               target="_blank"
-              :title="t('topbar.favorites')"
+              :title="$t('topbar.favorites')"
             >
               <tabler:star />
             </a>
@@ -371,7 +369,7 @@ function getNewMomentsCount() {
             <a
               href="https://www.bilibili.com/account/history"
               target="_blank"
-              :title="t('topbar.history')"
+              :title="$t('topbar.history')"
             >
               <tabler:clock />
             </a>
@@ -386,7 +384,7 @@ function getNewMomentsCount() {
             <a
               href="https://member.bilibili.com/platform/home"
               target="_blank"
-              :title="t('topbar.creative_center')"
+              :title="$t('topbar.creative_center')"
             >
               <tabler:bulb />
             </a>
@@ -434,7 +432,7 @@ function getNewMomentsCount() {
           >
             <tabler:upload flex-shrink-0 />
             <span m="l-2" display="xl:block none">{{
-              t('topbar.upload')
+              $t('topbar.upload')
             }}</span>
           </a>
 
diff --git a/src/components/Topbar/TopbarFavoritesPop.vue b/src/components/Topbar/TopbarFavoritesPop.vue
index f12e8f8a..e5f1f6c9 100644
--- a/src/components/Topbar/TopbarFavoritesPop.vue
+++ b/src/components/Topbar/TopbarFavoritesPop.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import type { Ref } from 'vue'
 import { TransitionGroup, onMounted, reactive, ref, watch } from 'vue'
 import type { FavoriteCategory, FavoriteResource } from './types'
-import { calcCurrentTime, getUserID } from '~/utils'
-const { t } = useI18n()
+import { calcCurrentTime, getUserID, removeHttpFromUrl } from '~/utils'
 
 const favoriteCategories = reactive<Array<FavoriteCategory>>([])
 const favoriteResources = reactive<Array<FavoriteResource>>([])
@@ -176,7 +174,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
       </h3>
 
       <a :href="favoritesPageUrl" target="_blank" flex="~" items="center">
-        <span text="sm">{{ t('common.view_all') }}</span>
+        <span text="sm">{{ $t('common.view_all') }}</span>
       </a>
     </div>
 
@@ -223,7 +221,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
           h="full"
           flex="~"
           items="center"
-          border="rounded-$bew-radius"
+          rounded="$bew-radius"
         />
 
         <!-- empty -->
@@ -241,25 +239,25 @@ function scrollToTop(element: HTMLElement, duration: number) {
             :href="`//www.bilibili.com/video/${item.bvid}`"
             target="_blank"
             hover:bg="$bew-fill-2"
-            border="rounded-$bew-radius"
+            rounded="$bew-radius"
             p="2"
             m="first:t-50px last:b-4"
             class="group"
             transition="~ duration-300"
           >
-            <section flex="~ gap-4" align="item-start">
+            <section flex="~ gap-4" item-start>
               <div
                 bg="$bew-fill-1"
                 w="150px"
                 flex="shrink-0"
-                border="rounded-$bew-radius-half"
+                rounded="$bew-radius-half"
                 overflow="hidden"
               >
                 <div pos="relative">
                   <img
                     w="150px"
                     class="aspect-video"
-                    :src="`${item.cover.replace('http:', '')}@256w_144h_1c`"
+                    :src="`${removeHttpFromUrl(item.cover)}@256w_144h_1c`"
                     :alt="item.title"
                     bg="contain"
                   >
@@ -269,7 +267,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
                     m="1"
                     p="x-2 y-1"
                     text="white xs"
-                    border="rounded-full"
+                    rounded-full
                   >
                     {{ calcCurrentTime(item.duration) }}
                   </div>
@@ -279,13 +277,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
               <!-- Description -->
               <div>
                 <h3
-                  style="
-                    -webkit-line-clamp: 2;
-                    -webkit-box-orient: vertical;
-                    display: -webkit-box;
-                  "
-                  overflow="hidden"
-                  text="overflow-ellipsis"
+                  class="keep-two-lines"
                 >
                   {{ item.title }}
                 </h3>
@@ -293,7 +285,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
                   text="$bew-text-2 sm"
                   m="t-4"
                   flex="~"
-                  align="items-center"
+                  items-center
                 >
                   {{ item.upper.name }}
                 </div>
@@ -316,10 +308,10 @@ function scrollToTop(element: HTMLElement, duration: number) {
 }
 .list-enter-from,
 .list-leave-to {
-  @apply opacity-0 transform translate-y-2 transform-gpu;
+  --at-apply: opacity-0 transform translate-y-2 transform-gpu;
 }
 
 .activated-category {
-  @apply bg-$bew-theme-color text-white;
+  --at-apply: bg-$bew-theme-color text-white;
 }
 </style>
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index 55315ee7..3aa29e4c 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -401,23 +401,23 @@ function scrollToTop(element: HTMLElement, duration: number) {
 }
 .list-enter-from,
 .list-leave-to {
-  @apply opacity-0 transform translate-y-2 transform-gpu;
+  --at-apply: opacity-0 transform translate-y-2 transform-gpu;
 }
 
 .tab {
-  @apply relative text-$bew-text-2;
+  --at-apply: relative text-$bew-text-2;
 
   &::after {
-    @apply absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
+    --at-apply: absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
     content: '';
   }
 }
 
 .tab-selected {
-  @apply font-bold text-$bew-text-1;
+  --at-apply: font-bold text-$bew-text-1;
 
   &::after {
-    @apply scale-x-80 opacity-40;
+    --at-apply: scale-x-80 opacity-40;
   }
 }
 </style>
diff --git a/src/components/Topbar/TopbarMomentsPop.vue b/src/components/Topbar/TopbarMomentsPop.vue
index 6750bd04..05f58ffd 100644
--- a/src/components/Topbar/TopbarMomentsPop.vue
+++ b/src/components/Topbar/TopbarMomentsPop.vue
@@ -417,7 +417,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
               w="82px"
               h="46px"
               m="l-4"
-              rounded="$bew-radius"
+              rounded="$bew-radius-half"
             >
           </div>
         </a>
@@ -436,23 +436,23 @@ function scrollToTop(element: HTMLElement, duration: number) {
 }
 .list-enter-from,
 .list-leave-to {
-  @apply opacity-0 transform translate-y-2 transform-gpu;
+  --at-apply: opacity-0 transform translate-y-2 transform-gpu;
 }
 
 .tab {
-  @apply relative text-$bew-text-2;
+  --at-apply: relative text-$bew-text-2;
 
   &::after {
-    @apply absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
+    --at-apply: absolute bottom-0 left-0 w-full h-12px bg-$bew-theme-color opacity-0 transform scale-x-0 -z-1 transition-all duration-300;
     content: '';
   }
 }
 
 .tab-selected {
-  @apply font-bold text-$bew-text-1;
+  --at-apply: font-bold text-$bew-text-1;
 
   &::after {
-    @apply scale-x-80 opacity-40;
+    --at-apply: scale-x-80 opacity-40;
   }
 }
 </style>
diff --git a/src/components/Topbar/TopbarUploadPop.vue b/src/components/Topbar/TopbarUploadPop.vue
index 9cd2705f..623d219e 100644
--- a/src/components/Topbar/TopbarUploadPop.vue
+++ b/src/components/Topbar/TopbarUploadPop.vue
@@ -266,12 +266,12 @@
 
 <style lang="scss" scoped>
 .upload-item {
-  @apply flex items-center p-2 rounded-$bew-radius mb-1 last:mb-0
+  --at-apply: flex items-center p-2 rounded-$bew-radius mb-1 last:mb-0
     transition-all duration-300
     hover:bg-$bew-fill-2;
 
   .item-icon {
-    @apply mr-2;
+    --at-apply: mr-2;
 
   }
 }
diff --git a/src/components/Topbar/TopbarUserPanelPop.vue b/src/components/Topbar/TopbarUserPanelPop.vue
index bbbda66f..dc9cf06b 100644
--- a/src/components/Topbar/TopbarUserPanelPop.vue
+++ b/src/components/Topbar/TopbarUserPanelPop.vue
@@ -145,59 +145,59 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #user-info-panel {
-  @apply p-4 rounded-$bew-radius w-300px -z-1
+  --at-apply: p-4 rounded-$bew-radius w-300px -z-1
     bg-$bew-content-solid-1;
   box-shadow: var(--bew-shadow-3);
 }
 
 #base-info {
-  @apply mt-8 text-xl font-medium flex items-center justify-center;
+  --at-apply: mt-8 text-xl font-medium flex items-center justify-center;
 }
 
 #channel-info {
-  @apply grid grid-cols-3 gap-x-2 mb-2;
+  --at-apply: grid grid-cols-3 gap-x-2 mb-2;
 
   a {
-    @apply p-2 m-0 rounded-$bew-radius text-sm
+    --at-apply: p-2 m-0 rounded-$bew-radius text-sm
       flex flex-col items-center transition-all duration-300
       bg-$bew-fill-1
       // hover:bg-$bew-theme-color
       hover:text-white;
 
     > * {
-      // @apply transition-all duration-300;
+      // --at-apply: transition-all duration-300;
     }
 
     &:hover .num + div{
-      @apply text-white;
+      --at-apply: text-white;
     }
 
     .num {
-      @apply font-semibold text-xl;
+      --at-apply: font-semibold text-xl;
 
       + div {
-        @apply text-$bew-text-2 mt-1 text-xs font-semibold;
+        --at-apply: text-$bew-text-2 mt-1 text-xs font-semibold;
       }
     }
   }
 }
 
 #other-link {
-  @apply flex justify-between flex-col mt-4;
+  --at-apply: flex justify-between flex-col mt-4;
 
   a {
-    @apply px-4 py-2 mb-1 flex justify-between items-center
+    --at-apply: px-4 py-2 mb-1 flex justify-between items-center
       rounded-$bew-radius transition-all duration-300
       hover:bg-$bew-fill-2;
 
     span {
-      @apply text-$bew-text-2;
+      --at-apply: text-$bew-text-2;
     }
   }
 }
 
 #logout {
-  @apply text-red-400 important:block px-4 py-2 rounded-$bew-radius
+  --at-apply: text-red-400 important:block px-4 py-2 rounded-$bew-radius
     duration-300 cursor-pointer
     hover:bg-$bew-fill-2;
 }
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 6e195eac..6cacdb47 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import type { Video } from './types'
 import { accessKey, language } from '~/logic/index'
-import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils'
+import {
+  calcCurrentTime,
+  calcTimeSince,
+  numFormatter,
+  removeHttpFromUrl,
+} from '~/utils'
 import { LanguageType } from '~/enums/appEnums'
 
 const props = defineProps<{
@@ -157,7 +162,7 @@ function gotoChannel(mid: number) {
           >
             <!-- Video cover -->
             <img
-              :src="`${videoData.pic.replace('http:', '')}@672w_378h_1c`"
+              :src="`${removeHttpFromUrl(videoData.pic)}@672w_378h_1c`"
               loading="lazy"
               class="aspect-auto"
               w="full"
@@ -172,7 +177,7 @@ function gotoChannel(mid: number) {
 
           <!-- Shadow of the video cover -->
           <img
-            :src="`${videoData.pic.replace('http:', '')}@672w_378h_1c`"
+            :src="`${removeHttpFromUrl(videoData.pic)}@672w_378h_1c`"
             loading="lazy"
             class="aspect-video"
             w="full"
@@ -202,10 +207,7 @@ function gotoChannel(mid: number) {
             @click="gotoChannel(videoData.owner.mid)"
           >
             <img
-              :src="`${`${videoData.owner.face}`.replace(
-                'http:',
-                '',
-              )}@60w_60h_1c`"
+              :src="`${removeHttpFromUrl(videoData.owner.face)}@60w_60h_1c`"
               width="48"
               height="48"
               loading="lazy"
@@ -323,7 +325,7 @@ function gotoChannel(mid: number) {
 <style lang="scss" scoped>
 .video-card.is-dislike {
   > *:not(#dislike-control) {
-    @apply invisible pointer-events-none duration-0 transition-none;
+    --at-apply: invisible pointer-events-none duration-0 transition-none;
   }
 }
 </style>
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 7433e1c2..e0d355ab 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
+// import PopularAnimeCarousel from './components/PopularAnimeCarousel.vue'
 import type { AnimeItem } from './types'
 import { getUserID, removeHttpFromUrl } from '~/utils'
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index b366e1df..545ecaa0 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -123,7 +123,7 @@ function changeActivatePage(pageName: AppPage) {
 
 .topbar-enter-from,
 .topbar-leave-to {
-  @apply opacity-0 transform -translate-y-full;
+  --at-apply: opacity-0 transform -translate-y-full;
 }
 
 .fade-enter-active,
@@ -133,7 +133,7 @@ function changeActivatePage(pageName: AppPage) {
 
 .fade-enter-from,
 .fade-leave-to {
-  @apply opacity-0;
+  --at-apply: opacity-0;
 }
 
 .tab-item {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2181b09f..72673b2e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -27,7 +27,7 @@ body {
 }
 
 .btn {
-  @apply px-4 py-2 rounded-$bew-radius inline-block
+  --at-apply: px-4 py-2 rounded-$bew-radius inline-block
     cursor-pointer transform duration-300
     filter outline-none
     border-2 border-solid border-$bew-theme-color
@@ -39,7 +39,7 @@ body {
 }
 
 .line-btn {
-  @apply px-4 py-2 rounded-$bew-radius inline-block
+  --at-apply: px-4 py-2 rounded-$bew-radius inline-block
     cursor-pointer transform duration-300
     bg-transparent filter
     border-2 border-solid border-$bew-fill-4
@@ -49,21 +49,21 @@ body {
 }
 
 .icon-btn {
-  @apply inline-block cursor-pointer select-none
+  --at-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: 1rem;
 }
 
 .chk-btn {
-  @apply flex px-4 py-2 items-center select-none;
+  --at-apply: flex px-4 py-2 items-center select-none;
 
   input {
-    @apply ml-4;
+    --at-apply: ml-4;
   }
 }
 
 select {
-  @apply px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
+  --at-apply: px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
     text-center appearance-none text-$bew-text-1 outline-none;
 }