From d5503e6d0d6e205321784e2965de2329baf092ae Mon Sep 17 00:00:00 2001
From: hakadao <a578457889743@gmail.com>
Date: Tue, 14 May 2024 23:57:38 +0800
Subject: [PATCH] refactor: convert useImage.ts to imgs.ts

---
 src/components/AppBackground.vue              |  7 +-
 src/components/SearchBar/SearchBar.vue        |  4 +-
 .../Settings/components/Appearance.vue        | 10 +-
 .../Settings/components/SearchPage.vue        | 18 ++--
 src/composables/useImage.ts                   | 93 -------------------
 src/constants/imgs.ts                         | 69 ++++++++++++++
 src/contentScripts/views/Home/Home.vue        |  4 +-
 7 files changed, 86 insertions(+), 119 deletions(-)
 delete mode 100644 src/composables/useImage.ts
 create mode 100644 src/constants/imgs.ts

diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index b8b51149..eb3ed9da 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useBewlyImage } from '~/composables/useImage'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 
 const props = defineProps<{ activatedPage: AppPage }>()
-const { getBewlyImage } = useBewlyImage()
+
 watch(() => settings.value.wallpaperMaskOpacity, () => {
   setAppWallpaperMaskingOpacity()
 })
@@ -40,7 +39,7 @@ function setAppWallpaperMaskingOpacity() {
       <div
         pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
         z--1 transform-gpu
-        :style="{ backgroundImage: `url('${settings.individuallySetSearchPageWallpaper ? getBewlyImage(settings.searchPageWallpaper) : getBewlyImage(settings.wallpaper)}')` }"
+        :style="{ backgroundImage: `url('${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaper : settings.wallpaper}')` }"
       />
       <!-- background mask -->
       <Transition name="fade">
@@ -57,7 +56,7 @@ function setAppWallpaperMaskingOpacity() {
     <div v-else>
       <!-- background -->
       <div
-        :style="{ backgroundImage: `url('${getBewlyImage(settings.wallpaper)}')` }"
+        :style="{ backgroundImage: `url('${settings.wallpaper}')` }"
         pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
         z--1 transform-gpu
       />
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 901872c0..ebe8c5d5 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -2,7 +2,6 @@
 import { onKeyStroke } from '@vueuse/core'
 
 import { useApiClient } from '~/composables/api'
-import { useBewlyImage } from '~/composables/useImage'
 import { findLeafActiveElement } from '~/utils/element'
 
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
@@ -19,7 +18,6 @@ defineProps<{
   focusedCharacter?: string
 }>()
 
-const { getBewlyImage } = useBewlyImage()
 const api = useApiClient()
 const keywordRef = ref<HTMLInputElement>()
 const isFocus = ref<boolean>(false)
@@ -196,7 +194,7 @@ async function handleClearSearchHistory() {
     <div class="search-bar group" :class="isFocus ? 'focus' : ''" flex="~" items-center pos="relative">
       <Transition name="focus-character">
         <img
-          v-show="focusedCharacter && isFocus" :src="getBewlyImage(focusedCharacter || '')"
+          v-show="focusedCharacter && isFocus" :src="focusedCharacter"
           width="100" object-contain pos="absolute right-0 bottom-40px"
         >
       </Transition>
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 45b2498f..7c3832c8 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -6,14 +6,12 @@ import Radio from '~/components/Radio.vue'
 import Select from '~/components/Select.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
-import { useBewlyImage } from '~/composables/useImage'
+import { WALLPAPERS } from '~/constants/imgs'
 import { settings } from '~/logic'
 
 import SettingsItem from './SettingsItem.vue'
 import SettingsItemGroup from './SettingsItemGroup.vue'
 
-const { wallpapers, getBewlyImage } = useBewlyImage()
-
 const { t } = useI18n()
 
 const themeColorOptions = computed<Array<string>>(() => {
@@ -159,14 +157,14 @@ function changeWallpaper(url: string) {
           >
             <div i-tabler:photo-off text="3xl $bew-text-3" />
           </picture>
-          <Tooltip v-for="item in wallpapers" :key="item.url" placement="top" :content="item.name" aspect-video>
+          <Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
             <picture
               aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
               un-border="4 transparent" w-full
               :class="{ 'selected-wallpaper': settings.wallpaper === item.url }"
               @click="changeWallpaper(item.url)"
             >
-              <img :src="getBewlyImage(item.thumbnail)" alt="" w-full h-full object-cover>
+              <img :src="item.thumbnail" alt="" w-full h-full object-cover>
             </picture>
           </Tooltip>
         </div>
@@ -179,7 +177,7 @@ function changeWallpaper(url: string) {
             w="xl:1/5 lg:1/4 md:1/3"
           >
             <img
-              v-if="settings.wallpaper" :src="getBewlyImage(settings.wallpaper)" alt="" loading="lazy"
+              v-if="settings.wallpaper" :src="settings.wallpaper" alt="" loading="lazy"
               w-full h-full object-cover
               onerror="this.style.display='none'; this.onerror=null;"
             >
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index d51f9ca8..672e29ae 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -3,19 +3,17 @@ import Input from '~/components/Input.vue'
 import Radio from '~/components/Radio.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
-import { useBewlyImage } from '~/composables/useImage'
+import { SEARCH_BAR_CHARACTERS, WALLPAPERS } from '~/constants/imgs'
 import { settings } from '~/logic'
 
 import SettingsItem from './SettingsItem.vue'
 import SettingsItemGroup from './SettingsItemGroup.vue'
 
-const { searchBarCharacters, wallpapers, getBewlyImage } = useBewlyImage()
-
 watch(() => settings.value.individuallySetSearchPageWallpaper, (newValue) => {
   if (newValue)
-    document.documentElement.style.backgroundImage = `url(${getBewlyImage(settings.value.searchPageWallpaper)})`
+    document.documentElement.style.backgroundImage = `url(${settings.value.searchPageWallpaper})`
   else
-    document.documentElement.style.backgroundImage = `url(${getBewlyImage(settings.value.wallpaper)})`
+    document.documentElement.style.backgroundImage = `url(${settings.value.wallpaper})`
 })
 
 function changeSearchBarFocusCharacter(url: string) {
@@ -90,7 +88,7 @@ function changeWallpaper(url: string) {
           >
             <div i-tabler:photo-off text="3xl $bew-text-3" />
           </picture>
-          <Tooltip v-for="item in searchBarCharacters" :key="item.url" placement="top" :content="item.name" aspect-square>
+          <Tooltip v-for="item in SEARCH_BAR_CHARACTERS" :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
@@ -98,7 +96,7 @@ function changeWallpaper(url: string) {
               @click="changeSearchBarFocusCharacter(item.url)"
             >
               <img
-                :src="getBewlyImage(item.url)" alt="" loading="lazy"
+                :src="item.url" alt="" loading="lazy"
                 w-full h-full object-contain
               >
             </picture>
@@ -152,14 +150,14 @@ function changeWallpaper(url: string) {
             >
               <div i-tabler:photo-off text="3xl $bew-text-3" />
             </picture>
-            <Tooltip v-for="item in wallpapers" :key="item.url" placement="top" :content="item.name" aspect-video>
+            <Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
               <picture
                 aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
                 un-border="4 transparent" w-full
                 :class="{ 'selected-wallpaper': settings.searchPageWallpaper === item.url }"
                 @click="changeWallpaper(item.url)"
               >
-                <img :src="getBewlyImage(item.thumbnail)" alt="" w-full h-full object-cover>
+                <img :src="item.thumbnail" alt="" w-full h-full object-cover>
               </picture>
             </Tooltip>
           </div>
@@ -172,7 +170,7 @@ function changeWallpaper(url: string) {
               w="xl:1/5 lg:1/4 md:1/3"
             >
               <img
-                v-if="settings.searchPageWallpaper" :src="getBewlyImage(settings.searchPageWallpaper)" alt="" w-full h-full
+                v-if="settings.searchPageWallpaper" :src="settings.searchPageWallpaper" alt="" w-full h-full
                 object-cover onerror="this.style.display='none'; this.onerror=null;"
               >
             </picture>
diff --git a/src/composables/useImage.ts b/src/composables/useImage.ts
deleted file mode 100644
index 54040e89..00000000
--- a/src/composables/useImage.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { ComputedRef } from 'vue'
-
-export const searchBarCharacters = computed((): { name: string, url: string }[] => {
-  return [
-    { name: '22 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/22chan-1.png' },
-    { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/33chan-1.png' },
-    { name: '22 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/22chan-2.png' },
-    { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/33chan-2.png' },
-  ]
-})
-
-export 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: 'Unsplash Random Building Image',
-      url: 'https://source.unsplash.com/1920x1080/?building',
-      thumbnail: 'https://source.unsplash.com/1920x1080/?building',
-    },
-    {
-      name: 'Unsplash Random Night Scene Image',
-      url: 'https://source.unsplash.com/1920x1080/?night-scene',
-      thumbnail: 'https://source.unsplash.com/1920x1080/?night-scene',
-    },
-    {
-      name: 'LoremPicsum Random Image',
-      url: 'https://picsum.photos/2560/1440/?nature',
-      thumbnail: 'https://picsum.photos/2560/1440/?nature',
-    },
-    {
-      name: 'Nicolas Lafargue - Rocky Mountain Cloudscape',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/rocky-mountain-cloudscape.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/rocky-mountain-cloudscape-thumbnail.jpg',
-    },
-    {
-      name: 'Zongnan Bao- Green white mountains',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/green-white-mountains.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/green-white-mountains-thumbnail.jpg',
-    },
-    {
-      name: 'Colin Watts - Night Sky Stars',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/night-sky-stars.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/night-sky-stars-thumbnail.jpg',
-    },
-    {
-      name: 'Ryan Geller - Sailboats moored at Land and Sea Park in The Exumas',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/sailboats-moored-at-the-exumas.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/sailboats-moored-at-the-exumas-thumbnail.jpg',
-    },
-    {
-      name: 'NASA - Outer Space Photo',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/outer-space-photo.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/outer-space-photo-thumbnail.jpg',
-    },
-    {
-      name: 'BML2019 VR (pid: 74271400)',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/bml2019-vr.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/bml2019-vr-thumbnail.jpg',
-    },
-    {
-      name: '2020 拜年祭活动',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-拜年祭活动.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-拜年祭活动-thumbnail.jpg',
-    },
-    {
-      name: '2020 BDF',
-      url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-bdf.jpg',
-      thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-bdf-thumbnail.jpg',
-    },
-  ]
-})
-
-function getBewlyImage(filePath: string) {
-  return filePath
-}
-
-interface BewlyWallpaper {
-  searchBarCharacters: ComputedRef<{ name: string, url: string }[]>
-  wallpapers: ComputedRef<{ name: string, url: string, thumbnail: string }[]>
-  getBewlyImage: (filePath: string) => string
-}
-
-export function useBewlyImage(): BewlyWallpaper {
-  return {
-    searchBarCharacters,
-    wallpapers,
-    getBewlyImage,
-  }
-}
diff --git a/src/constants/imgs.ts b/src/constants/imgs.ts
new file mode 100644
index 00000000..7be44271
--- /dev/null
+++ b/src/constants/imgs.ts
@@ -0,0 +1,69 @@
+export const SEARCH_BAR_CHARACTERS: { name: string, url: string }[] = [
+  { name: '22 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/22chan-1.png' },
+  { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/33chan-1.png' },
+  { name: '22 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/22chan-2.png' },
+  { name: '33 娘', url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/searchBarCharacters/33chan-2.png' },
+]
+
+export const WALLPAPERS: { 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: 'Unsplash Random Building Image',
+    url: 'https://source.unsplash.com/1920x1080/?building',
+    thumbnail: 'https://source.unsplash.com/1920x1080/?building',
+  },
+  {
+    name: 'Unsplash Random Night Scene Image',
+    url: 'https://source.unsplash.com/1920x1080/?night-scene',
+    thumbnail: 'https://source.unsplash.com/1920x1080/?night-scene',
+  },
+  {
+    name: 'LoremPicsum Random Image',
+    url: 'https://picsum.photos/2560/1440/?nature',
+    thumbnail: 'https://picsum.photos/2560/1440/?nature',
+  },
+  {
+    name: 'Nicolas Lafargue - Rocky Mountain Cloudscape',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/rocky-mountain-cloudscape.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/rocky-mountain-cloudscape-thumbnail.jpg',
+  },
+  {
+    name: 'Zongnan Bao- Green white mountains',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/green-white-mountains.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/green-white-mountains-thumbnail.jpg',
+  },
+  {
+    name: 'Colin Watts - Night Sky Stars',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/night-sky-stars.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/night-sky-stars-thumbnail.jpg',
+  },
+  {
+    name: 'Ryan Geller - Sailboats moored at Land and Sea Park in The Exumas',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/sailboats-moored-at-the-exumas.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/sailboats-moored-at-the-exumas-thumbnail.jpg',
+  },
+  {
+    name: 'NASA - Outer Space Photo',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/outer-space-photo.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/outer-space-photo-thumbnail.jpg',
+  },
+  {
+    name: 'BML2019 VR (pid: 74271400)',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/bml2019-vr.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/bml2019-vr-thumbnail.jpg',
+  },
+  {
+    name: '2020 拜年祭活动',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-拜年祭活动.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-拜年祭活动-thumbnail.jpg',
+  },
+  {
+    name: '2020 BDF',
+    url: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-bdf.jpg',
+    thumbnail: 'https://cdn.jsdelivr.net/gh/BewlyBewly/Imgs/wallpapers/2020-bdf-thumbnail.jpg',
+  },
+]
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index 947a530a..0a431438 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -2,7 +2,6 @@
 import Logo from '~/components/Logo.vue'
 import SearchBar from '~/components/SearchBar/SearchBar.vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
-import { useBewlyImage } from '~/composables/useImage'
 import { homePageGridLayout, settings } from '~/logic'
 import type { HomeTab } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
@@ -14,7 +13,6 @@ import { HomeSubPage } from './types'
 
 const mainStore = useMainStore()
 const { handleBackToTop, scrollbarRef } = useBewlyApp()
-const { getBewlyImage } = useBewlyImage()
 
 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
 const pages = {
@@ -149,7 +147,7 @@ function toggleTabContentLoading(loading: boolean) {
           pos="absolute left-0 top-0" w-full h-inherit bg="cover center" z-1
           pointer-events-none
           :style="{
-            backgroundImage: `url('${getBewlyImage(settings.searchPageWallpaper)}')`,
+            backgroundImage: `url('${settings.searchPageWallpaper}')`,
             backgroundAttachment: settings.searchPageModeWallpaperFixed ? 'fixed' : 'unset',
           }"
         />