chore:

src/contentScripts/index.ts

@@ -19,6 +19,7 @@ import { SVG_ICONS, getCookie, i18n, setCookie } from '~/utils'
   if (
     /https?:\/\/bilibili.com\/?$/.test(currentUrl)
     || /https?:\/\/www.bilibili.com\/?$/.test(currentUrl)
+    || /https?:\/\/www.bilibili.com\/index.html$/.test(currentUrl)
     || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(currentUrl)
     || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl)
     // || /https?:\/\/www.bilibili.com\/video\/.*/.test(currentUrl)

src/contentScripts/views/App.vue

@@ -4,6 +4,7 @@ import 'uno.css'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 import Home from './Home/Home.vue'
+import Search from './Search/Search.vue'
 import { isShowTopbar } from '~/logic/storage'
 import { language } from '~/logic'
 import '~/styles/index.ts'
@@ -13,6 +14,7 @@ const { locale } = useI18n()
 const [showSettings, toggle] = useToggle(false)
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
+const activatedPage = ref<'search' | 'home'>('home')
 
 window.onload = async () => {
   // if there is first-time load extension, set the default language by browser display language
@@ -41,8 +43,45 @@ window.onload = async () => {
   <Transition>
     <Topbar v-show="isShowTopbar" class="fixed z-50" />
   </Transition>
-  <!-- is home page -->
-  <Home />
+
+  <div
+    flex="~ col"
+    pos="fixed top-0 left-0"
+    h-full
+    justify-center
+  >
+    <div
+      p-2
+      bg="$bew-content-1"
+      flex="~ col gap-2"
+      rounded="r-$bew-radius"
+      shadow="$bew-shadow-2"
+    >
+      <button
+        class="tab-item"
+        :class="{ active: activatedPage === 'search' }"
+        @click="activatedPage = 'search'"
+      >
+        <tabler:search />
+      </button>
+
+      <button
+        class="tab-item"
+        :class="{ active: activatedPage === 'home' }"
+        @click="activatedPage = 'home'"
+      >
+        <tabler:home />
+      </button>
+    </div>
+  </div>
+
+  <main pt-80px>
+    <keep-alive>
+      <Home v-if="activatedPage === 'home'" />
+      <Search v-else-if="activatedPage === 'search'" />
+    </keep-alive>
+  </main>
+
   <!-- button -->
   <div flex="~ col" pos="fixed bottom-5 lg:right-5 <lg:right-3">
     <button
@@ -88,6 +127,21 @@ window.onload = async () => {
   <Settings v-if="showSettings" @close="showSettings = false" />
 </template>
 
+<style lang="scss" scoped>
+.tab-item {
+  --at-apply: transform active:scale-90 lg:w-45px <lg:w-40px
+    aspect-square lg:p-3 <lg:p-2
+    text-2xl text-$bew-text-1 leading-0 duration-300
+    rounded-$bew-radius
+    hover:bg-$bew-theme-color hover:color-white;
+  backdrop-filter: var(--bew-filter-glass);
+
+  &.active {
+    --at-apply: bg-$bew-theme-color color-white;
+  }
+}
+</style>
+
 <style lang="scss">
 .v-enter-active,
 .v-leave-active {

src/contentScripts/views/Home/Home.vue

@@ -4,15 +4,8 @@ import RecommendContent from './RecommendContent.vue'
 
 <template>
   <div bg="$bew-bg">
-    <div class="banner flex justify-center items-center flex-col" />
-    <recommend-content />
+    <RecommendContent />
   </div>
 </template>
 
-<style lang="scss">
-.banner {
-  height: 83px;
-  max-height: unset;
-  transition: 0.3s;
-}
-</style>
+<style scoped lang="scss"></style>

src/contentScripts/views/Search/Search.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>
+    TODO: SEARCH PAGE
+  </div>
+</template>