refactor: convert useImage.ts to imgs.ts

2025-04-14 13:15:29 +00:00 · 2024-05-14 23:57:38 +08:00
parent 8e31e69e09
commit d5503e6d0d
7 changed files with 86 additions and 119 deletions
--- 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
      />
--- 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>
--- 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;"
            >
--- 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>
--- a/src/composables/useImage.ts
+++ b/src/composables/useImage.ts
@@ -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,
-  }
-}
--- a/src/constants/imgs.ts
+++ 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',
+  },
+]
--- 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',
          }"
        />