From de681dfb858f8518021032a516289f73d5880ca4 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 10 Aug 2023 01:22:39 +0800
Subject: [PATCH] feat: add setting to show chosen character on focused search
 bar * refactor: convert constant reactive property values to computed
 properties

---
 src/components/SearchBar/SearchBar.vue        | 27 ++++--
 .../Settings/components/Appearance.vue        | 86 ++++++++++---------
 .../Settings/components/SearchPage.vue        | 84 ++++++++++++------
 src/contentScripts/views/Search/Search.vue    |  2 +-
 src/logic/storage.ts                          |  1 +
 src/models/models.ts                          |  1 +
 6 files changed, 129 insertions(+), 72 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index ce1cc62b..64d39a51 100644
--- 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,
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 8317e309..8fd578f9 100644
--- 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
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index 9d58d464..11d0307c 100644
--- 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>
diff --git a/src/contentScripts/views/Search/Search.vue b/src/contentScripts/views/Search/Search.vue
index b3e85ebd..71c17f54 100644
--- 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>
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index c535998f..dfd87999 100644
--- 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: '',
diff --git a/src/models/models.ts b/src/models/models.ts
index 3e9c38ff..4ef91893 100644
--- 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