chore: just wanna push some code...

src/components/Settings/Settings.vue

@@ -29,10 +29,7 @@ const settingsMenuItems = computed(() => {
   ]
 })
 
-onMounted(() => {
-})
-
-function close() {
+function handleClose() {
   emit('close')
 }
 
@@ -42,7 +39,7 @@ function changeMenuItem(menuItem: MenuType) {
 </script>
 
 <template>
-  <div class="fixed w-full h-full top-0 left-0" z="9998" @click="close" />
+  <div class="fixed w-full h-full top-0 left-0" z="9998" @click="handleClose" />
 
   <div
     id="settings-window" pos="fixed md:top-1/5 top-0 left-1/2" w="full lg:1/2 md:2/3" h="full md:1/2"

src/components/Settings/components/SettingItem.vue

@@ -2,24 +2,28 @@
 defineProps<{
   title: string
   desc?: string
+  nextLine?: boolean
 }>()
 </script>
 
 <template>
-  <div flex="~ gap-4" justify-betwee items-center py-2 text-base>
-    <div w="5/7">
-      {{ title }}
-      <br>
-      <span text="sm $bew-text-3">
-        <slot name="desc">
-          {{ desc }}
-        </slot>
-      </span>
-    </div>
+  <div>
+    <div flex="~ gap-4" justify-betwee items-center py-2 text-base>
+      <div w="5/7">
+        {{ title }}
+        <br>
+        <span text="sm $bew-text-3">
+          <slot name="desc">
+            {{ desc }}
+          </slot>
+        </span>
+      </div>
 
-    <div w="2/7">
-      <slot />
+      <div v-if="!nextLine" w="2/7">
+        <slot />
+      </div>
     </div>
+    <slot v-if="nextLine" />
   </div>
 </template>
 

src/components/Settings/views/Appearance.vue

@@ -23,10 +23,22 @@ const themeColorOptions = reactive<Array<string>>([
 const bilibiliEvolvedThemeColor = computed(() => {
   return getComputedStyle(document.querySelector('html') as HTMLElement).getPropertyValue('--theme-color').trim() ?? '#00a1d6'
 })
+const wallpapers = reactive<Array<string>>([
+  'https://source.unsplash.com/1920x1080/?nature',
+  'https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg',
+  'https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg',
+  'https://pic.imgdb.cn/item/63830f1816f2c2beb1868554.jpg',
+])
 
 function changeThemeColor(color: string) {
   settings.value.themeColor = color
 }
+
+function changeWallpaper(url: string) {
+  document.body.style.backgroundImage = `url(${url})`
+  document.body.style.backgroundSize = 'cover'
+  document.body.style.backgroundAttachment = 'fixed'
+}
 </script>
 
 <template>
@@ -40,7 +52,7 @@ function changeThemeColor(color: string) {
           transform: color === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
           border: color === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
         }"
-        @click="changeThemeColor(color)"
+        ¬@click="changeThemeColor(color)"
       />
     </div>
   </SettingItem>
@@ -55,6 +67,13 @@ function changeThemeColor(color: string) {
       @click="changeThemeColor(bilibiliEvolvedThemeColor)"
     />
   </SettingItem>
+  <SettingItem title="Choose your wallpaper" next-line>
+    <div grid="~ xl:cols-4 lg:cols-3 md:cols-2 gap-4">
+      <picture v-for="item in wallpapers" :key="item" aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden @click="changeWallpaper(item)">
+        <img :src="item" alt="" w-full h-full object-cover>
+      </picture>
+    </div>
+  </SettingItem>
 </template>
 
 <style lang="scss" scoped>

src/contentScripts/views/App.vue

@@ -139,7 +139,7 @@ function setAppAppearance() {
 </script>
 
 <template>
-  <div ref="mainApp" text="$bew-text-1" transition="opacity duration-300" style="opacity: 0;">
+  <div ref="mainApp" text="$bew-text-1" transition="opacity duration-300">
     <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.6 : 1 }">
       <Transition name="topbar">
         <Topbar

src/logic/storage.ts

@@ -12,4 +12,5 @@ export const settings = useStorageLocal('settings', ref<Settings>({
   dockPosition: 'right',
   themeColor: '#00a1d6',
   recommendationMode: 'web',
+  wallpaper: '',
 }), { mergeDefaults: true })

src/models/models.ts

@@ -4,4 +4,5 @@ export interface Settings {
   dockPosition: 'left' | 'right' | 'bottom'
   themeColor: string
   recommendationMode: 'web' | 'app'
+  wallpaper: string
 }