style: adjusted some style

* fix: resolve issue with the loading wallpaper & mask opacity on initial page load

src/components/Settings/components/Appearance.vue

@@ -155,30 +155,13 @@ function changeWallpaper(url: string) {
     <Radio v-model:value="settings.enableWallpaperMasking" />
   </SettingItem>
   <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
-    <div flex gap-4>
-      <input
-        v-model="settings.wallpaperMaskOpacity"
-        type="range" min="0" max="100"
-        step="1"
-        flex-1
-      >
-      <span w-30px text-right>{{ settings.wallpaperMaskOpacity }}%</span>
-    </div>
-    <Slider />
+    <Slider v-model:value="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
   </SettingItem>
   <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
     <template #desc>
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
-    <div flex gap-4>
-      <input
-        v-model="settings.wallpaperBlurIntensity"
-        type="range" min="0" max="60"
-        step="1"
-        flex-1
-      >
-      <span w-30px text-right>{{ settings.wallpaperBlurIntensity }}px</span>
-    </div>
+    <Slider v-model:value="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
   </SettingItem>
 </template>
 

src/components/Slider.vue

@@ -1,13 +1,32 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 
+interface Props {
+  min: number
+  max: number
+  value: number
+  label: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+})
+
+const emit = defineEmits(['update:value'])
+
+const modelValue = ref<number>(props.value)
 const rangeRef = ref<HTMLElement>() as Ref<HTMLElement>
 
 onMounted(() => {
+  modelValue.value = props.value
+  const progress = (modelValue.value / rangeRef.value!.max) * 100
+
+  rangeRef.value.style.background = `linear-gradient(to right, var(--bew-theme-color) ${progress}%, var(--bew-fill-1) ${progress}%) no-repeat`
+
   if (rangeRef.value) {
     rangeRef.value.addEventListener('input', (event: Event) => {
       const tempSliderValue = event.target!.value
-      // sliderValue.textContent = tempSliderValue
+      emit('update:value', tempSliderValue)
 
       const progress = (tempSliderValue / rangeRef.value!.max) * 100
 
@@ -18,12 +37,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <label cursor-pointer flex itemscope gap-3 w="$b-slider-width">
+  <label cursor-pointer flex items-center gap-3 w="$b-slider-width">
     <input
       ref="rangeRef"
-      type="range" min="1" max="100" value="0" class="slider" appearance-none outline-none bg="$bew-fill-1" rounded="$b-slider-height"
+      type="range" :min="min" :max="max" :value="value" class="slider" appearance-none outline-none bg="$bew-fill-1" rounded="$b-slider-height"
       border="size-$b-border-width color-$bew-border-color" w="$b-slider-width" h="$b-slider-height"
     >
+    <span>{{ label }}</span>
   </label>
 </template>
 
@@ -32,8 +52,8 @@ label {
   --b-border-width: 2px;
   --b-slider-height: 10px;
   --b-slider-width: 100%;
-  --b-thumb-width: calc(25px - var(--b-border-width));
-  --b-thumb-height:  calc(25px - var(--b-border-width));
+  --b-thumb-width: calc(20px - var(--b-border-width));
+  --b-thumb-height:  calc(20px - var(--b-border-width));
 }
 
 input[type="range"] {

src/components/Topbar/Topbar.vue

@@ -155,6 +155,7 @@ async function getUnreadMessageCount() {
     }
   }
   catch (error) {
+    unReadMessageCount.value = 0
     console.error(error)
   }
 }

src/contentScripts/views/App.vue

@@ -81,16 +81,11 @@ watch(() => accessKey.value, () => {
 })
 
 watch(() => settings.value.wallpaper, (newValue) => {
-  document.documentElement.style.backgroundImage = `url(${newValue})`
-  document.documentElement.style.backgroundSize = 'cover'
-  document.documentElement.style.backgroundPosition = 'center'
+  setAppWallpaper()
 })
 
 watch(() => settings.value.wallpaperMaskOpacity, (newValue) => {
-  const bewlyElement = document.querySelector('#bewly') as HTMLElement
-
-  bewlyElement.style
-    .setProperty('--bew-bg-mask-opacity', `${newValue}%`)
+  setAppWallpaperMaskingOpacity()
 })
 
 onMounted(() => {
@@ -123,6 +118,8 @@ onMounted(() => {
   setAppAppearance()
   setAppLanguage()
   setAppThemeColor()
+  setAppWallpaper()
+  setAppWallpaperMaskingOpacity()
 })
 
 function changeActivatePage(pageName: AppPage) {
@@ -175,6 +172,17 @@ function setAppThemeColor() {
       bewlyElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
   }
 }
+
+function setAppWallpaper() {
+  document.documentElement.style.backgroundImage = `url(${settings.value.wallpaper})`
+  document.documentElement.style.backgroundSize = 'cover'
+  document.documentElement.style.backgroundPosition = 'center'
+}
+
+function setAppWallpaperMaskingOpacity() {
+  const bewlyElement = document.querySelector('#bewly') as HTMLElement
+  bewlyElement.style.setProperty('--bew-bg-mask-opacity', `${settings.value.wallpaperMaskOpacity}%`)
+}
 </script>
 
 <template>

src/styles/main.scss

@@ -61,46 +61,4 @@ html > ::-webkit-scrollbar-track {
 
 h1, h2, h3, h4, h5, h6 {
   --at-apply: color-$bew-text-1;
-}
-
-// .btn {
-//   --at-apply: px-4 py-2 rounded-$bew-radius inline-block
-//     cursor-pointer transform duration-300
-//     filter outline-none
-//     border-2 border-solid border-$bew-theme-color
-//     bg-$bew-theme-color text-white
-//     active:scale-95 active:bg-$bew-theme-color active:brightness-110
-//     focus:bg-$bew-theme-color
-//     disabled:cursor-default disabled:bg-$bew-fill-4 disabled:opacity-50
-//     disabled:border-$bew-fill-4;
-// }
-
-// .line-btn {
-//   --at-apply: px-4 py-2 rounded-$bew-radius inline-block
-//     cursor-pointer transform duration-300
-//     bg-transparent filter
-//     border-2 border-solid border-$bew-fill-4
-//     text-$bew-fill-4
-//     active:scale-95 active:brightness-110
-//     disabled:cursor-default disabled:bg-$bew-fill-4 disabled:opacity-50;
-// }
-
-// .icon-btn {
-//   --at-apply: inline-block cursor-pointer select-none
-//     opacity-75 transition duration-200 ease-in-out
-//     hover:opacity-100 hover:text-$bew-theme-color;
-//   font-size: 1rem;
-// }
-
-.chk-btn {
-  --at-apply: flex px-4 py-2 items-center select-none;
-
-  input {
-    --at-apply: ml-4;
-  }
-}
-
-// select {
-//   --at-apply: px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
-//     text-center appearance-none text-$bew-text-1 outline-none;
-// }
+}