✨ Feature(custom): support custom background image opacity and blur

src/renderer/i18n/locales/en.json

@@ -901,6 +901,8 @@
         "autoLaunchDesc": "Automatically start PicList when system boots",
         "chooseLanguage": "Choose Language",
         "chooseTheme": "Choose Theme",
+        "customBgImgBlur": "Custom Background Image Blur",
+        "customBgImgOpacity": "Custom Background Image Opacity",
         "customBgImgPath": "Select custom background img",
         "customMiniIconPath": "Custom Mini Icon Path",
         "downloadingThemes": "Downloading...",

src/renderer/i18n/locales/zh-CN.json

@@ -901,6 +901,8 @@
         "autoLaunchDesc": "登录时自动启动 PicList",
         "chooseLanguage": "选择语言",
         "chooseTheme": "选择主题",
+        "customBgImgBlur": "自定义背景图片模糊度",
+        "customBgImgOpacity": "自定义背景图片不透明度",
         "customBgImgPath": "自定义背景图片选择",
         "customMiniIconPath": "自定义迷你窗口图标路径",
         "downloadingThemes": "下载中...",

src/renderer/i18n/locales/zh-TW.json

@@ -901,6 +901,8 @@
         "autoLaunchDesc": "系統啟動時自動啟動 PicList",
         "chooseLanguage": "選擇語言",
         "chooseTheme": "選擇主題",
+        "customBgImgBlur": "自定義背景圖片模糊度",
+        "customBgImgOpacity": "自定義背景圖片不透明度",
         "customBgImgPath": "選擇自定義背景圖片",
         "customMiniIconPath": "自定義迷你窗口圖標路徑",
         "downloadingThemes": "下載中...",

src/renderer/pages/PicGoSetting.vue

@@ -148,6 +148,29 @@
                 <CustomButton type="primary" :text="t('pages.settings.clickToSet')" @click="handleCustomBgImg" />
               </template>
             </CustomNavCard>
+            <SettingCard v-if="formOfSetting.enableCustomBgImg">
+              <CustomInput
+                v-model="formOfSetting.customBgImgOpacity"
+                type="number"
+                min="0"
+                max="1"
+                step="0.01"
+                :title="t('pages.settings.system.customBgImgOpacity')"
+                placeholder="0.7"
+                @blur="handleBlurCustomBgImgOpacity"
+              />
+            </SettingCard>
+            <SettingCard v-if="formOfSetting.enableCustomBgImg">
+              <CustomInput
+                v-model="formOfSetting.customBgImgBlur"
+                type="number"
+                min="1"
+                step="1"
+                :title="t('pages.settings.system.customBgImgBlur')"
+                placeholder="5"
+                @blur="handleBlurCustomBgImgBlur"
+              />
+            </SettingCard>
           </SettingSection>
 
           <!-- Window Behavior Section -->
@@ -1424,6 +1447,8 @@ const formOfSetting = ref<ISettingForm>({
   theme: 'default.css',
   enableCustomBgImg: false,
   customBgImgPath: '',
+  customBgImgOpacity: 0.7,
+  customBgImgBlur: 5,
 })
 
 /* computed properties */
@@ -1722,6 +1747,16 @@ const addWatch = () => {
   )
 }
 
+function handleBlurCustomBgImgBlur() {
+  saveConfig({ [configPaths.settings.customBgImgBlur]: formOfSetting.value.customBgImgBlur })
+  window.electron.sendRPC(IRPCActionType.RELOAD_WINDOW)
+}
+
+function handleBlurCustomBgImgOpacity() {
+  saveConfig({ [configPaths.settings.customBgImgOpacity]: formOfSetting.value.customBgImgOpacity })
+  window.electron.sendRPC(IRPCActionType.RELOAD_WINDOW)
+}
+
 /* methods */
 async function cancelSyncSetting() {
   syncVisible.value = false

src/renderer/utils/configPaths.ts

@@ -190,6 +190,8 @@ export const configPaths = {
     isDisableGPU: 'settings.isDisableGPU',
     enableCustomBgImg: 'settings.enableCustomBgImg',
     customBgImgPath: 'settings.customBgImgPath',
+    customBgImgOpacity: 'settings.customBgImgOpacity',
+    customBgImgBlur: 'settings.customBgImgBlur',
   },
   needReload: 'needReload',
   picgoPlugins: 'picgoPlugins',