feat: add set wallpaper & adjust wallpaper mask opacity settings

* feat: adjust topbar display appearance when using other wallpapers
* feat: update `HorizontalScrollView` appearance after scrolling
* refactor:  adjust file locations of child components in the `Settings` component

src/components/HorizontalScrollView.vue

@@ -2,27 +2,23 @@
 import type { Ref } from 'vue'
 
 const scrollListWrap = ref<HTMLElement>() as Ref<HTMLElement>
-const showLeftMask = ref<boolean>(false)
-const showRightMask = ref<boolean>(false)
+// const showLeftMask = ref<boolean>(false)
+// const showRightMask = ref<boolean>(false)
+const showScrollMask = ref<boolean>(false)
 
 onMounted(() => {
   scrollListWrap.value.addEventListener('scroll', () => {
-    if (scrollListWrap.value.scrollLeft > 0) {
-      showLeftMask.value = true
-      showRightMask.value = true
-    }
-    else {
-      showLeftMask.value = false
-      showRightMask.value = false
-    }
+    if (scrollListWrap.value.scrollLeft > 0)
+      showScrollMask.value = true
+
+    else
+      showScrollMask.value = false
 
     if (
       scrollListWrap.value.scrollLeft + scrollListWrap.value.clientWidth
       >= scrollListWrap.value.scrollWidth
-    ) {
-      showLeftMask.value = false
-      showRightMask.value = false
-    }
+    )
+      showScrollMask.value = false
   })
 
   scrollListWrap.value.addEventListener('wheel', (event: WheelEvent) => {
@@ -34,14 +30,14 @@ onMounted(() => {
 
 <template>
   <div relative>
-    <transition name="fade">
+    <!-- <transition name="fade">
       <div
         v-show="showLeftMask"
         h-full
         w-80px
         absolute
         z-1
-        style="background: linear-gradient(to left, transparent, var(--bew-bg))"
+        style="mask-image: linear-gradient(to left, transparent, black); mask-mode: alpha;"
       />
     </transition>
     <transition name="fade">
@@ -55,7 +51,7 @@ onMounted(() => {
           background: linear-gradient(to right, transparent, var(--bew-bg));
         "
       />
-    </transition>
+    </transition> -->
 
     <div
       ref="scrollListWrap"
@@ -63,6 +59,7 @@ onMounted(() => {
       overflow-x-scroll
       overflow-y-hidden
       relative
+      :class="{ 'scroll-mask': showScrollMask }"
     >
       <slot />
     </div>
@@ -70,13 +67,8 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  --at-apply: opacity-0;
+.scroll-mask {
+  mask-image: linear-gradient(to right, transparent 0%, black 80px calc(100% - 160px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 80px calc(100% - 160px), transparent 100%);
 }
 </style>

src/components/Settings/Settings.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import General from './views/General.vue'
-import Appearance from './views/Appearance.vue'
-import Home from './views/Home.vue'
+import General from './components/General.vue'
+import Appearance from './components/Appearance.vue'
+import Home from './components/Home.vue'
 import { MenuType } from './types'
 
 const emit = defineEmits(['close'])
@@ -86,7 +86,7 @@ function changeMenuItem(menuItem: MenuType) {
           </div>
           <div
             text-2xl leading-0 bg="$bew-fill-1" w="32px" h="32px" p="1" rounded-8 shadow="md" cursor="pointer"
-            @click="close"
+            @click="handleClose"
           >
             <ic-baseline-clear />
           </div>

src/components/Settings/components/Appearance.vue

@@ -35,9 +35,7 @@ function changeThemeColor(color: string) {
 }
 
 function changeWallpaper(url: string) {
-  document.body.style.backgroundImage = `url(${url})`
-  document.body.style.backgroundSize = 'cover'
-  document.body.style.backgroundAttachment = 'fixed'
+  settings.value.wallpaper = url
 }
 </script>
 
@@ -52,7 +50,7 @@ function changeWallpaper(url: 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>
@@ -69,13 +67,37 @@ function changeWallpaper(url: string) {
   </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)">
+      <picture
+        aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+        un-border="4 transparent"
+        grid place-items-center
+        :class="{ 'selected-wallpaper': settings.wallpaper === '' }"
+        @click="changeWallpaper('')"
+      >
+        <tabler:photo-off text="3xl $bew-text-3" />
+      </picture>
+      <picture
+        v-for="item in wallpapers" :key="item" aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+        un-border="4 transparent"
+        :class="{ 'selected-wallpaper': settings.wallpaper === item }"
+        @click="changeWallpaper(item)"
+      >
         <img :src="item" alt="" w-full h-full object-cover>
       </picture>
     </div>
   </SettingItem>
+  <SettingItem title="Background mask opacity">
+    <input
+      v-model="settings.backgroundMaskOpacity"
+      type="range" min="0" max="100"
+      step="1"
+    >
+    {{ settings.backgroundMaskOpacity }}
+  </SettingItem>
 </template>
 
 <style lang="scss" scoped>
-
+.selected-wallpaper {
+  --at-apply: border-$bew-theme-color-60
+}
 </style>

src/components/Topbar/Topbar.vue

@@ -4,6 +4,7 @@ import { Transition, onMounted, watch } from 'vue'
 import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
 import { getUserID } from '~/utils/main'
+import { settings } from '~/logic'
 
 interface Props {
   showSearchBar: boolean
@@ -184,7 +185,7 @@ function getNewMomentsCount() {
         h="160px"
         opacity="100"
         pointer-events-none
-        style="background: linear-gradient(var(--bew-bg), transparent)"
+        :style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,.4), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
       />
     </Transition>
 
@@ -214,7 +215,8 @@ function getNewMomentsCount() {
           w="!4"
           h="!4"
           m="l-4"
-          icon="stroke-4 fill-$bew-text-1"
+          icon="stroke-4"
+          :style="{ color: settings.wallpaper && showTopbarMask ? 'white' : 'var(--bew-text-1)' }"
         />
       </div>
       <Transition name="slide-in">

src/contentScripts/views/App.vue

@@ -81,6 +81,13 @@ watch(() => accessKey.value, () => {
     accessKey.value = ''
 })
 
+watch(() => settings.value.wallpaper, (newValue) => {
+  document.documentElement.style.backgroundImage = `url(${newValue})`
+  document.documentElement.style.backgroundSize = 'cover'
+  document.documentElement.style.backgroundAttachment = 'fixed'
+  document.documentElement.style.backgroundPosition = 'center'
+})
+
 onMounted(() => {
   nextTick(() => {
     setTimeout(() => {
@@ -133,12 +140,14 @@ function setAppAppearance() {
     mainApp.value?.classList.remove('dark')
 
   // Override Bilibili Evolved background color
-  document.body.style.setProperty('background-color', 'var(--bew-bg)', 'important')
+  document.body.style.setProperty('background-color', 'unset', 'important')
   document.documentElement.style.setProperty('background-color', 'var(--bew-bg)', 'important')
 }
 </script>
 
 <template>
+  <!-- background mask -->
+  <div pos="fixed top-0 left-0" w-full h-full bg="$bew-bg" pointer-events-none :style="{ opacity: settings.backgroundMaskOpacity / 100 }" />
   <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">

src/contentScripts/views/Home/Home.vue

@@ -3,7 +3,7 @@ import RecommendContent from './components/RecommendContent.vue'
 </script>
 
 <template>
-  <div bg="$bew-bg">
+  <div>
     <RecommendContent />
   </div>
 </template>

src/logic/storage.ts

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

src/models/models.ts

@@ -5,4 +5,5 @@ export interface Settings {
   themeColor: string
   recommendationMode: 'web' | 'app'
   wallpaper: string
+  backgroundMaskOpacity: number
 }