feat: add a search page configuration to settings

i18n: translate some settings configuration

src/_locales/cmn-CN.yml

@@ -60,6 +60,11 @@ settings:
   enable_horizontal_scrolling_desc: 启用后，鼠标滚动时将直接滚动横向滚动列表
 
   # Appearance settings
+  theme: 主题
+  theme_opt:
+    light: 亮色
+    dark: 暗色
+    auto: 自动
   theme_color: 主题色
   follow_bilibili_evolved_color: 使用 Bilibili Evolved 主题色
   follow_bilibili_evolved_color_desc: 每次选完 Bilibili Evolved 主题色时，记得重新选中这一选项以更新配置
@@ -85,6 +90,7 @@ settings:
   logo_visibility: Logo 可见性
   enable_logo_glowing_effect: 启用 Logo 发光效果
   bg_darkens_when_the_search_bar_is_focused: 当搜索栏聚焦时背景暗化
+  bg_blurs_when_the_search_bar_is_focused: 当搜索栏聚焦时背景模糊
   choose_search_bar_focused_character: 选择搜索栏聚焦时出现的人物
   individually_set_search_page_wallpaper: 单独设置搜索页背景
 auth:

src/_locales/cmn-TW.yml

@@ -60,6 +60,11 @@ settings:
   enable_horizontal_scrolling_desc: 啟用後，滑鼠捲動時將直接捲動橫向捲軸列表
 
   # Appearance settings
+  theme: 主題
+  theme_opt:
+    light: 淺色
+    dark: 深色
+    auto: 自動
   theme_color: 主題色
   follow_bilibili_evolved_color: 使用 Bilibili Evolved 主題色
   follow_bilibili_evolved_color_desc: 每次變更 Bilibili Evolved 主題色後，記得重新選取此選項以更新配置
@@ -85,6 +90,7 @@ settings:
   enable_logo_glowing_effect: 啓用 Logo 發光效果
   logo_visibility: Logo 可視性
   bg_darkens_when_the_search_bar_is_focused: 當搜尋欄聚焦時背景變暗
+  bg_blurs_when_the_search_bar_is_focused: 當搜尋欄聚焦時背景變模糊
   choose_search_bar_focused_character: 選擇搜尋欄聚焦時出現的人物
   individually_set_search_page_wallpaper: 單獨設定搜尋頁背景
 

src/_locales/en.yml

@@ -61,6 +61,11 @@ settings:
   enable_horizontal_scrolling_desc: After enabling, mouse scrolling will directly scroll the horizontal scroll list
 
   # Appearance settings
+  theme: Theme
+  theme_opt:
+    light: Light
+    dark: Dark
+    auto: Auto
   theme_color: Theme color
   follow_bilibili_evolved_color: Follow the Bilibili Evolved theme color
   follow_bilibili_evolved_color_desc: After changing the theme color in Bilibili Evolved, you will need to re-select this option in order to update the theme color.
@@ -86,6 +91,7 @@ settings:
   enable_logo_glowing_effect: Enable glowing effect for the logo
   logo_visibility: Logo visibility
   bg_darkens_when_the_search_bar_is_focused: Background darkens when the search bar is focused
+  bg_blurs_when_the_search_bar_is_focused: Background blurs when the search bar is focused
   choose_search_bar_focused_character: Choose the character that appears when the search bar is focused
   individually_set_search_page_wallpaper: Individually set search page wallpaper
 auth:

src/_locales/jyut.yml

@@ -60,6 +60,11 @@ settings:
   enable_horizontal_scrolling_desc: 用咗之後，轆緊滑鼠就可以直接打橫掃水平捲軸列表
 
   # Appearance settings
+  theme: 色系
+  theme_opt:
+    light: 淺色
+    dark: 深色
+    auto: 自動
   theme_color: 佈景色
   follow_bilibili_evolved_color: 跟返 Bilibili Evolved 佈景色
   follow_bilibili_evolved_color_desc: 每次換完 Bilibili Evolved 佈景色嗰陣，記得揀多一次呢個選項愛嚟更新佈置
@@ -85,6 +90,7 @@ settings:
   enable_logo_glowing_effect: Logo 使用發光效果
   logo_visibility: Logo 可視性
   bg_darkens_when_the_search_bar_is_focused: 搜尋欄聚焦嗰陣校暗背景
+  bg_blurs_when_the_search_bar_is_focused: 搜尋欄聚焦嗰陣校矇背景
   choose_search_bar_focused_character: 揀個喺搜尋欄聚焦嗰陣出現嘅人物
   individually_set_search_page_wallpaper: 單獨設定搵嘢頁背景
 auth:

src/components/SearchBar/SearchBar.vue

@@ -8,6 +8,7 @@ import {
 
 defineProps<{
   darkenOnFocus?: boolean
+  blurredOnFocus?: boolean
   focusedCharacter?: string
 }>()
 
@@ -142,6 +143,12 @@ function handleKeyDown() {
       />
     </Transition>
 
+    <div
+      v-if="blurredOnFocus"
+      pos="fixed top-0 left-0" w-full h-full duration-500 pointer-events-none ease-out
+      :style="{ backdropFilter: isFocus ? 'blur(15px)' : 'blur(0)' }"
+    />
+
     <div class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center pos="relative">
       <Transition name="focus-character">
         <img v-show="focusedCharacter && isFocus" :src="focusedCharacter" width="100" object-contain pos="absolute right-0 bottom-30px">
@@ -259,7 +266,7 @@ function handleKeyDown() {
 
 .mask-enter-active,
 .mask-leave-active {
-  --at-apply: transition-all duration-300;
+  --at-apply: transition-all duration-300 ease-in-out;
 }
 
 .mask-enter-from,

src/components/Settings/components/Appearance.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
 import { settings } from '~/logic'
 
+const { t } = useI18n()
+
 const themeColorOptions = computed<Array<string>>(() => {
   return [
     '#22c55e',
@@ -52,15 +55,15 @@ const wallpapers = computed<Array<{ name: string; url: string; thumbnail: string
 const themeOptions = computed<Array<{ value: string; label: string }>>(() => {
   return [
     {
-      label: 'Light',
+      label: t('settings.theme_opt.light'),
       value: 'light',
     },
     {
-      label: 'Dark',
+      label: t('settings.theme_opt.dark'),
       value: 'dark',
     },
     {
-      label: 'Auto',
+      label: t('settings.theme_opt.auto'),
       value: 'auto',
     },
   ]
@@ -76,8 +79,8 @@ function changeWallpaper(url: string) {
 </script>
 
 <template>
-  <SettingItem title="Theme">
-    <Select v-model="settings.theme" :options="themeOptions" />
+  <SettingItem :title="$t('settings.theme')">
+    <Select v-model="settings.theme" w-full :options="themeOptions" />
   </SettingItem>
   <SettingItem :title="$t('settings.theme_color')">
     <div flex="~ gap-2 wrap" justify-end>

src/components/Settings/components/SearchPage.vue

@@ -88,6 +88,14 @@ function changeWallpaper(url: string) {
     <Radio v-model="settings.searchPageDarkenOnSearchFocus" />
   </SettingItem>
 
+  <SettingItem :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>
+
   <SettingItem :title="$t('settings.choose_search_bar_focused_character')" next-line>
     <div grid="~ xl:cols-8 lg:cols-6 cols-5 gap-4">
       <picture

src/contentScripts/index.ts

@@ -12,7 +12,7 @@ const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
 
 const beforeLoadedStyleEl = injectCSS(`
   html.dark {
-    background: hsl(230 12% 6%);
+    background-color: hsl(230 12% 6%);
   }
 
   body {

src/contentScripts/views/Search/Search.vue

@@ -15,6 +15,10 @@ import { settings } from '~/logic'
       :glow="settings.searchPageLogoGlow"
       mb-12 z-1
     />
-    <SearchBar :darken-on-focus="settings.searchPageDarkenOnSearchFocus" :focused-character="settings.searchPageSearchBarFocusCharacter" />
+    <SearchBar
+      :darken-on-focus="settings.searchPageDarkenOnSearchFocus"
+      :blurred-on-focus="settings.searchPageBlurredOnSearchFocus"
+      :focused-character="settings.searchPageSearchBarFocusCharacter"
+    />
   </div>
 </template>

src/logic/storage.ts

@@ -19,6 +19,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   wallpaperBlurIntensity: 0,
 
   searchPageDarkenOnSearchFocus: true,
+  searchPageBlurredOnSearchFocus: false,
   searchPageLogoColor: 'themeColor',
   searchPageLogoGlow: true,
   searchPageShowLogo: true,

src/models/models.ts

@@ -13,6 +13,7 @@ export interface Settings {
   wallpaperBlurIntensity: number
 
   searchPageDarkenOnSearchFocus: boolean
+  searchPageBlurredOnSearchFocus: boolean
   searchPageLogoColor: 'white' | 'themeColor'
   searchPageLogoGlow: boolean
   searchPageShowLogo: boolean