refactor: rename SettingItem to SettingsItem

* feat: add a new config without implementing the function...

src/components/Settings/components/Appearance.vue

@@ -79,10 +79,10 @@ function changeWallpaper(url: string) {
 </script>
 
 <template>
-  <SettingItem :title="$t('settings.theme')">
+  <SettingsItem :title="$t('settings.theme')">
     <Select v-model="settings.theme" w-full :options="themeOptions" />
-  </SettingItem>
-  <SettingItem :title="$t('settings.theme_color')">
+  </SettingsItem>
+  <SettingsItem :title="$t('settings.theme_color')">
     <div flex="~ gap-2 wrap" justify-end>
       <div
         v-for="color in themeColorOptions" :key="color"
@@ -95,8 +95,8 @@ function changeWallpaper(url: string) {
         @click="changeThemeColor(color)"
       />
     </div>
-  </SettingItem>
-  <SettingItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
+  </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
       :style="{
@@ -106,11 +106,11 @@ function changeWallpaper(url: string) {
       }"
       @click="changeThemeColor(bilibiliEvolvedThemeColor)"
     />
-  </SettingItem>
-  <SettingItem :title="$t('settings.adapt_to_other_page_styles')" :desc="$t('settings.adapt_to_other_page_styles_desc')">
+  </SettingsItem>
+  <SettingsItem :title="$t('settings.adapt_to_other_page_styles')" :desc="$t('settings.adapt_to_other_page_styles_desc')">
     <Radio v-model="settings.adaptToOtherPageStyles" />
-  </SettingItem>
-  <SettingItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
+  </SettingsItem>
+  <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
     <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
       <div
         flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
@@ -133,9 +133,9 @@ function changeWallpaper(url: string) {
         {{ $t('settings.wallpaper_mode_opt.by_url') }}
       </div>
     </div>
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem v-if="settings.wallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
+  <SettingsItem v-if="settings.wallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
     <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
       <picture
         aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
@@ -157,8 +157,8 @@ function changeWallpaper(url: string) {
         </picture>
       </Tooltip>
     </div>
-  </SettingItem>
-  <SettingItem v-else :title="$t('settings.image_url')" next-line>
+  </SettingsItem>
+  <SettingsItem v-else :title="$t('settings.image_url')" next-line>
     <div flex items-center gap-4>
       <picture
         aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
@@ -174,24 +174,24 @@ function changeWallpaper(url: string) {
         </p>
       </div>
     </div>
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.enable_wallpaper_masking')">
+  <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
     <template #desc>
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
 
     <Radio v-model="settings.enableWallpaperMasking" />
-  </SettingItem>
-  <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
+  </SettingsItem>
+  <SettingsItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
     <Slider v-model="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
-  </SettingItem>
-  <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
+  </SettingsItem>
+  <SettingsItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
     <template #desc>
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
     <Slider v-model="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
-  </SettingItem>
+  </SettingsItem>
 </template>
 
 <style lang="scss" scoped>

src/components/Settings/components/General.vue

@@ -59,41 +59,41 @@ watch(() => settings.value.language, (newValue, oldValue) => {
 </script>
 
 <template>
-  <SettingItem :title="$t('settings.select_language')">
+  <SettingsItem :title="$t('settings.select_language')">
     <Select
       v-model="settings.language"
       :options="langOptions"
       w="full"
     />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.startup_page')">
+  <SettingsItem :title="$t('settings.startup_page')">
     <Select
       v-model="settings.startupPage"
       :options="pageOptions"
       w="full"
     />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
+  <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
     <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
+  <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
     <Select
       v-model="settings.dockPosition"
       :options="dockPositions"
       w="full"
     />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.enable_horizontal_scrolling')" :desc="$t('settings.enable_horizontal_scrolling_desc')">
+  <SettingsItem :title="$t('settings.enable_horizontal_scrolling')" :desc="$t('settings.enable_horizontal_scrolling_desc')">
     <Radio v-model="settings.enableHorizontalScrolling" />
-  </SettingItem>
+  </SettingsItem>
 
-  <!-- <SettingItem title="Open link in current tab">
+  <!-- <SettingsItem title="Open link in current tab">
     <Radio v-model="settings.openLinkInCurrentTab" />
-  </SettingItem> -->
+  </SettingsItem> -->
 </template>
 
 <style lang="scss" scoped>

src/components/Settings/components/Home.vue

@@ -18,7 +18,7 @@ function handleRevoke() {
 </script>
 
 <template>
-  <SettingItem :title="$t('settings.recommendation_mode')" :desc="$t('settings.recommendation_mode_desc')">
+  <SettingsItem :title="$t('settings.recommendation_mode')" :desc="$t('settings.recommendation_mode_desc')">
     <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
       <div
         flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
@@ -41,9 +41,9 @@ function handleRevoke() {
         App
       </div>
     </div>
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem v-if="settings.recommendationMode === 'app'" :title="$t('settings.authorize_app')">
+  <SettingsItem v-if="settings.recommendationMode === 'app'" :title="$t('settings.authorize_app')">
     <template #desc>
       {{ $t('settings.authorize_app_desc') }}
       <br>
@@ -69,11 +69,19 @@ function handleRevoke() {
         <span>{{ $t('settings.btn.revoke') }}</span>
       </button>
     </div>
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem title="Use search page mode on homepage">
+  <SettingsItem title="Use search page mode on homepage">
     <Radio v-model="settings.useSearchPageModeOnHomePage" />
-  </SettingItem>
+  </SettingsItem>
+  <SettingsItem title="Settings shared with the search page">
+    <template #desc>
+      <span color="$bew-warning-color">Those settings are used in common with the search page</span>
+    </template>
+    <Button type="secondary" block center>
+      Open Settings...
+    </Button>
+  </SettingsItem>
 </template>
 
 <style lang="scss" scoped>

src/components/Settings/components/SearchPage.vue

@@ -51,7 +51,7 @@ function changeWallpaper(url: string) {
 </script>
 
 <template>
-  <SettingItem :title="$t('settings.logo_color')">
+  <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"
@@ -74,29 +74,29 @@ function changeWallpaper(url: string) {
         {{ $t('settings.logo_color_opt.white') }}
       </div>
     </div>
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.enable_logo_glowing_effect')">
+  <SettingsItem :title="$t('settings.enable_logo_glowing_effect')">
     <Radio v-model="settings.searchPageLogoGlow" />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.logo_visibility')">
+  <SettingsItem :title="$t('settings.logo_visibility')">
     <Radio v-model="settings.searchPageShowLogo" />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.bg_darkens_when_the_search_bar_is_focused')">
+  <SettingsItem :title="$t('settings.bg_darkens_when_the_search_bar_is_focused')">
     <Radio v-model="settings.searchPageDarkenOnSearchFocus" />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.bg_blurs_when_the_search_bar_is_focused')">
+  <SettingsItem :title="$t('settings.bg_blurs_when_the_search_bar_is_focused')">
     <template #desc>
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
 
     <Radio v-model="settings.searchPageBlurredOnSearchFocus" />
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.choose_search_bar_focused_character')" next-line>
+  <SettingsItem :title="$t('settings.choose_search_bar_focused_character')" next-line>
     <div grid="~ xl:cols-8 lg:cols-6 cols-5 gap-4">
       <picture
         aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
@@ -138,17 +138,17 @@ function changeWallpaper(url: string) {
         </p>
       </div>
     </div> -->
-  </SettingItem>
+  </SettingsItem>
 
-  <SettingItem :title="$t('settings.individually_set_search_page_wallpaper')">
+  <SettingsItem :title="$t('settings.individually_set_search_page_wallpaper')">
     <template #desc>
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
 
     <Radio v-model="settings.individuallySetSearchPageWallpaper" />
-  </SettingItem>
+  </SettingsItem>
   <template v-if="settings.individuallySetSearchPageWallpaper">
-    <SettingItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
+    <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
       <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
         <div
           flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
@@ -171,9 +171,9 @@ function changeWallpaper(url: string) {
           {{ $t('settings.wallpaper_mode_opt.by_url') }}
         </div>
       </div>
-    </SettingItem>
+    </SettingsItem>
 
-    <SettingItem v-if="settings.searchPageWallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
+    <SettingsItem v-if="settings.searchPageWallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
       <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
         <picture
           aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
@@ -195,8 +195,8 @@ function changeWallpaper(url: string) {
           </picture>
         </Tooltip>
       </div>
-    </SettingItem>
-    <SettingItem v-else :title="$t('settings.image_url')" next-line>
+    </SettingsItem>
+    <SettingsItem v-else :title="$t('settings.image_url')" next-line>
       <div flex items-center gap-4>
         <picture
           aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
@@ -212,24 +212,24 @@ function changeWallpaper(url: string) {
           </p>
         </div>
       </div>
-    </SettingItem>
+    </SettingsItem>
 
-    <SettingItem :title="$t('settings.enable_wallpaper_masking')">
+    <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
       <template #desc>
         <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
       </template>
 
       <Radio v-model="settings.searchPageEnableWallpaperMasking" />
-    </SettingItem>
-    <SettingItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
+    </SettingsItem>
+    <SettingsItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
       <Slider v-model="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />
-    </SettingItem>
-    <SettingItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
+    </SettingsItem>
+    <SettingsItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
       <template #desc>
         <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
       </template>
       <Slider v-model="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity ?? 0}px`" />
-    </SettingItem>
+    </SettingsItem>
   </template>
 </template>
 

src/components/Topbar/Topbar.vue

@@ -7,9 +7,9 @@ import { getUserID } from '~/utils/main'
 import { settings } from '~/logic'
 
 interface Props {
-  showSearchBar: boolean
-  showTopbarMask: boolean
-  showLogo: boolean
+  showSearchBar?: boolean
+  showTopbarMask?: boolean
+  showLogo?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {

src/contentScripts/views/App.vue

@@ -537,7 +537,7 @@ function handleAdaptToOtherPageStylesChange() {
           </div>
 
           <Transition name="fade">
-            <Component :is="pages[activatedPage]" :key="dynamicComponentKey" absolute w-full />
+            <Component :is="pages[activatedPage]" :key="dynamicComponentKey" :style="{ position: 'absolute', width: '100%' }" />
           </Transition>
         </main>
       </div>

src/contentScripts/views/Home/Home.vue

@@ -18,27 +18,29 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    v-if="settings.useSearchPageModeOnHomePage"
-    flex="~ col"
-    justify-center
-    items-center relative
-    w-full z-10
-    h-50vh max-h-550px
-  >
-    <Logo
-      v-if="settings.searchPageShowLogo" :size="180" :color="settings.searchPageLogoColor === 'white' ? 'white' : 'var(--bew-theme-color)'"
-      :glow="settings.searchPageLogoGlow"
-      m="t--70px b-12" z-1
-    />
-    <SearchBar
-      :darken-on-focus="settings.searchPageDarkenOnSearchFocus"
-      :blurred-on-focus="settings.searchPageBlurredOnSearchFocus"
-      :focused-character="settings.searchPageSearchBarFocusCharacter"
-    />
-  </div>
+  <div>
+    <div
+      v-if="settings.useSearchPageModeOnHomePage"
+      flex="~ col"
+      justify-center
+      items-center relative
+      w-full z-10
+      h-50vh max-h-550px
+    >
+      <Logo
+        v-if="settings.searchPageShowLogo" :size="180" :color="settings.searchPageLogoColor === 'white' ? 'white' : 'var(--bew-theme-color)'"
+        :glow="settings.searchPageLogoGlow"
+        m="t--70px b-12" z-1
+      />
+      <SearchBar
+        :darken-on-focus="settings.searchPageDarkenOnSearchFocus"
+        :blurred-on-focus="settings.searchPageBlurredOnSearchFocus"
+        :focused-character="settings.searchPageSearchBarFocusCharacter"
+      />
+    </div>
 
-  <RecommendContent :key="recommendContentKey" />
+    <RecommendContent :key="recommendContentKey" />
+  </div>
 </template>
 
 <style scoped lang="scss"></style>