feat: add setting to show chosen character on focused search bar

* refactor: convert constant reactive property values to computed properties
2025-04-14 13:15:29 +00:00 · 2023-08-10 01:22:39 +08:00
parent 3d6e1ff1cc
commit de681dfb85
6 changed files with 129 additions and 72 deletions
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -8,6 +8,7 @@ import {

 defineProps<{
  darkenOnFocus?: boolean
+  focusedCharacter?: string
 }>()

 const isFocus = ref<boolean>(false)
@@ -142,6 +143,10 @@ function handleKeyDown() {
    </Transition>

    <div class="search-bar group" 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">
+      </Transition>
+
      <input
        v-model.trim="keyword"
        rounded="60px focus:$bew-radius"
@@ -173,7 +178,7 @@ function handleKeyDown() {
      </button>
    </div>

-    <Transition>
+    <Transition name="result-list">
      <div
        v-if="
          isFocus
@@ -229,19 +234,29 @@ function handleKeyDown() {
 </template>

 <style lang="scss" scoped>
-.v-enter-active,
-.v-leave-active {
+.result-list-enter-active,
+.result-list-leave-active {
  --at-apply: transition-all duration-300
 }

-.v-enter-from,
-.v-leave-to {
+.result-list-enter-from,
+.result-list-leave-to {
  --at-apply: transform translate-y-4 opacity-0 scale-95;
 }

+.focus-character-enter-active,
+.focus-character-leave-active {
+  --at-apply: transition-all duration-300 ease-in-out;
+}
+
+.focus-character-enter-from,
+.focus-character-leave-to {
+  --at-apply: transform translate-y-6 opacity-0;
+}
+
 .mask-enter-active,
 .mask-leave-active {
-  --at-apply: transition-all duration-300 will-change-backdrop-filter;
+  --at-apply: transition-all duration-300;
 }

 .mask-enter-from,
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -1,50 +1,54 @@
 <script lang="ts" setup>
 import { settings } from '~/logic'

-const themeColorOptions = reactive<Array<string>>([
-  '#22c55e',
-  '#34d399',
-  '#14b8a6',
-  '#06b6d4',
-  '#00a1d6',
-  '#60a5fa',
-  '#3b82f6',
-  '#6366f1',
-  '#818cf8',
-  '#a78bfa',
-  '#f46d43',
-  '#fb923c',
-  '#f59e0b',
-  '#eab308',
-  '#f43f5e',
-  '#fb7299',
-  '#fda4af',
-])
+const themeColorOptions = computed<Array<string>>(() => {
+  return [
+    '#22c55e',
+    '#34d399',
+    '#14b8a6',
+    '#06b6d4',
+    '#00a1d6',
+    '#60a5fa',
+    '#3b82f6',
+    '#6366f1',
+    '#818cf8',
+    '#a78bfa',
+    '#f46d43',
+    '#fb923c',
+    '#f59e0b',
+    '#eab308',
+    '#f43f5e',
+    '#fb7299',
+    '#fda4af',
+  ]
+})
 const bilibiliEvolvedThemeColor = computed(() => {
  return getComputedStyle(document.querySelector('html') as HTMLElement).getPropertyValue('--theme-color').trim() ?? '#00a1d6'
 })
-const wallpapers = reactive<Array<{ name: string; url: string; thumbnail: string }>>([
-  {
-    name: 'Unsplash Random Nature Image',
-    url: 'https://source.unsplash.com/1920x1080/?nature',
-    thumbnail: 'https://source.unsplash.com/1920x1080/?nature',
-  },
-  {
-    name: 'BML2019 VR (pid: 74271400)',
-    url: 'https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg',
-    thumbnail: 'https://pic.imgdb.cn/item/64ac5e341ddac507cc750ae8.jpg',
-  },
-  {
-    name: '2020 拜年祭活动',
-    url: 'https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg',
-    thumbnail: 'https://pic.imgdb.cn/item/64ac5f251ddac507cc7658af.jpg',
-  },
-  {
-    name: '2020 BDF',
-    url: 'https://pic.imgdb.cn/item/63830f1816f2c2beb1868554.jpg',
-    thumbnail: 'https://pic.imgdb.cn/item/64ac5fc01ddac507cc77224e.jpg',
-  },
-])
+const wallpapers = computed<Array<{ name: string; url: string; thumbnail: string }>>(() => {
+  return [
+    {
+      name: 'Unsplash Random Nature Image',
+      url: 'https://source.unsplash.com/1920x1080/?nature',
+      thumbnail: 'https://source.unsplash.com/1920x1080/?nature',
+    },
+    {
+      name: 'BML2019 VR (pid: 74271400)',
+      url: 'https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg',
+      thumbnail: 'https://pic.imgdb.cn/item/64ac5e341ddac507cc750ae8.jpg',
+    },
+    {
+      name: '2020 拜年祭活动',
+      url: 'https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg',
+      thumbnail: 'https://pic.imgdb.cn/item/64ac5f251ddac507cc7658af.jpg',
+    },
+    {
+      name: '2020 BDF',
+      url: 'https://pic.imgdb.cn/item/63830f1816f2c2beb1868554.jpg',
+      thumbnail: 'https://pic.imgdb.cn/item/64ac5fc01ddac507cc77224e.jpg',
+    },
+  ]
+})

 function changeThemeColor(color: string) {
  settings.value.themeColor = color
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -1,28 +1,36 @@
 <script lang="ts" setup>
 import { settings } from '~/logic'

-const wallpapers = reactive<Array<{ name: string; url: string; thumbnail: string }>>([
-  {
-    name: 'Unsplash Random Nature Image',
-    url: 'https://source.unsplash.com/1920x1080/?nature',
-    thumbnail: 'https://source.unsplash.com/1920x1080/?nature',
-  },
-  {
-    name: 'BML2019 VR (pid: 74271400)',
-    url: 'https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg',
-    thumbnail: 'https://pic.imgdb.cn/item/64ac5e341ddac507cc750ae8.jpg',
-  },
-  {
-    name: '2020 拜年祭活动',
-    url: 'https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg',
-    thumbnail: 'https://pic.imgdb.cn/item/64ac5f251ddac507cc7658af.jpg',
-  },
-  {
-    name: '2020 BDF',
-    url: 'https://pic.imgdb.cn/item/63830f1816f2c2beb1868554.jpg',
-    thumbnail: 'https://pic.imgdb.cn/item/64ac5fc01ddac507cc77224e.jpg',
-  },
-])
+const searchBarFocusCharacters = computed<{ name: string; url: string }[]>(() => {
+  return [
+    { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/hakadao/bilibili-simple-home@master/img/searchBar_33_2.png' },
+    { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/hakadao/bilibili-simple-home@master/img/searchBar_33.png' },
+  ]
+})
+const wallpapers = computed<Array<{ name: string; url: string; thumbnail: string }>>(() => {
+  return [
+    {
+      name: 'Unsplash Random Nature Image',
+      url: 'https://source.unsplash.com/1920x1080/?nature',
+      thumbnail: 'https://source.unsplash.com/1920x1080/?nature',
+    },
+    {
+      name: 'BML2019 VR (pid: 74271400)',
+      url: 'https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg',
+      thumbnail: 'https://pic.imgdb.cn/item/64ac5e341ddac507cc750ae8.jpg',
+    },
+    {
+      name: '2020 拜年祭活动',
+      url: 'https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg',
+      thumbnail: 'https://pic.imgdb.cn/item/64ac5f251ddac507cc7658af.jpg',
+    },
+    {
+      name: '2020 BDF',
+      url: 'https://pic.imgdb.cn/item/63830f1816f2c2beb1868554.jpg',
+      thumbnail: 'https://pic.imgdb.cn/item/64ac5fc01ddac507cc77224e.jpg',
+    },
+  ]
+})

 watch(() => settings.value.individuallySetSearchPageWallpaper, (newValue) => {
  if (newValue)
@@ -31,6 +39,10 @@ watch(() => settings.value.individuallySetSearchPageWallpaper, (newValue) => {
    document.documentElement.style.backgroundImage = `url(${settings.value.wallpaper})`
 })

+function changeSearchBarFocusCharacter(url: string) {
+  settings.value.searchPageSearchBarFocusCharacter = url
+}
+
 function changeWallpaper(url: string) {
  settings.value.searchPageWallpaper = url
 }
@@ -46,8 +58,8 @@ function changeWallpaper(url: string) {
          color: settings.searchPageLogoColor === 'themeColor' || !settings.searchPageLogoColor ? 'white' : '',
        }"
        @click="settings.searchPageLogoColor = 'themeColor'"
-        >
-          {{ $t('settings.logo_color_opt.theme_color') }}
+      >
+        {{ $t('settings.logo_color_opt.theme_color') }}
      </div>
      <div
        flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
@@ -70,6 +82,30 @@ function changeWallpaper(url: string) {
    <Radio v-model:value="settings.searchPageDarkenOnSearchFocus" />
  </SettingItem>

+  <SettingItem title="Choose the character displayed when the search bar is focused" next-line>
+    <div grid="~ xl:cols-8 lg:cols-6 cols-4 gap-4">
+      <picture
+        aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+        un-border="4 transparent" pointer-cursor
+        grid place-items-center
+        :class="{ 'selected-wallpaper': settings.searchPageSearchBarFocusCharacter === '' }"
+        @click="changeSearchBarFocusCharacter('')"
+      >
+        <tabler:photo-off text="3xl $bew-text-3" />
+      </picture>
+      <Tooltip v-for="item in searchBarFocusCharacters" :key="item.url" placement="top" :content="item.name" aspect-square>
+        <picture
+          aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+          un-border="4 transparent" w-full
+          :class="{ 'selected-wallpaper': settings.searchPageSearchBarFocusCharacter === item.url }"
+          @click="changeSearchBarFocusCharacter(item.url)"
+        >
+          <img :src="item.url" alt="" w-full h-full object-contain>
+        </picture>
+      </Tooltip>
+    </div>
+  </SettingItem>
+
  <SettingItem :title="$t('settings.individually_set_search_page_wallpaper')">
    <template #desc>
      <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
--- a/src/contentScripts/views/Search/Search.vue
+++ b/src/contentScripts/views/Search/Search.vue
@@ -11,6 +11,6 @@ import { settings } from '~/logic'
    m="t-20vh"
  >
    <Logo v-if="settings.searchPageShowLogo" :size="180" :color="settings.searchPageLogoColor === 'white' ? 'white' : 'var(--bew-theme-color)'" mb-12 z-1 />
-    <SearchBar :darken-on-focus="settings.searchPageDarkenOnSearchFocus" />
+    <SearchBar :darken-on-focus="settings.searchPageDarkenOnSearchFocus" :focused-character="settings.searchPageSearchBarFocusCharacter" />
  </div>
 </template>
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -22,6 +22,7 @@ export const settings = useStorageLocal('settings', ref<Settings>({
  searchPageDarkenOnSearchFocus: true,
  searchPageLogoColor: 'themeColor',
  searchPageShowLogo: true,
+  searchPageSearchBarFocusCharacter: '',
  individuallySetSearchPageWallpaper: false,
  searchPageWallpaperMode: 'buildIn',
  searchPageWallpaper: '',
--- a/src/models/models.ts
+++ b/src/models/models.ts
@@ -14,6 +14,7 @@ export interface Settings {
  searchPageDarkenOnSearchFocus: boolean
  searchPageLogoColor: 'white' | 'themeColor'
  searchPageShowLogo: boolean
+  searchPageSearchBarFocusCharacter: string
  individuallySetSearchPageWallpaper: boolean
  searchPageWallpaperMode: 'buildIn' | 'byUrl'
  searchPageWallpaper: string