✨ Feature(custom): support custom background image

src/renderer/i18n/locales/en.json

@@ -901,6 +901,7 @@
         "autoLaunchDesc": "Automatically start PicList when system boots",
         "chooseLanguage": "Choose Language",
         "chooseTheme": "Choose Theme",
+        "customBgImgPath": "Select custom background img",
         "customMiniIconPath": "Custom Mini Icon Path",
         "downloadingThemes": "Downloading...",
         "downloadThemes": "Download Themes",
@@ -909,6 +910,7 @@
         "editTheme": "Edit Theme",
         "enableAdvancedAnimation": "Enable Advanced Animation",
         "enableAdvancedAnimationDesc": "Do not enable this option on low-performance devices or when GPU acceleration is disabled",
+        "enableCustomBgImg": "Enable Custom Background img",
         "getThemeContentFailed": "Failed to get theme content",
         "hideDockHint": "Cannot hide both dock and tray at the same time",
         "importThemes": "Import Themes",

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

@@ -901,6 +901,7 @@
         "autoLaunchDesc": "登录时自动启动 PicList",
         "chooseLanguage": "选择语言",
         "chooseTheme": "选择主题",
+        "customBgImgPath": "自定义背景图片选择",
         "customMiniIconPath": "自定义迷你窗口图标路径",
         "downloadingThemes": "下载中...",
         "downloadThemes": "下载主题",
@@ -909,6 +910,7 @@
         "editTheme": "编辑主题",
         "enableAdvancedAnimation": "启用高级动画效果",
         "enableAdvancedAnimationDesc": "不要在低性能设备上或关闭GPU加速时启用此选项",
+        "enableCustomBgImg": "启用自定义背景图片",
         "getThemeContentFailed": "获取主题内容失败",
         "hideDockHint": "不支持同时隐藏 dock 和托盘",
         "importThemes": "导入主题",

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

@@ -901,6 +901,7 @@
         "autoLaunchDesc": "系統啟動時自動啟動 PicList",
         "chooseLanguage": "選擇語言",
         "chooseTheme": "選擇主題",
+        "customBgImgPath": "選擇自定義背景圖片",
         "customMiniIconPath": "自定義迷你窗口圖標路徑",
         "downloadingThemes": "下載中...",
         "downloadThemes": "下載主題",
@@ -909,6 +910,7 @@
         "editTheme": "編輯主題",
         "enableAdvancedAnimation": "啟用高級動畫效果",
         "enableAdvancedAnimationDesc": "不要在低性能設備上或關閉GPU加速時啟用此選項",
+        "enableCustomBgImg": "啟用自定義背景圖片",
         "getThemeContentFailed": "獲取主題內容失敗",
         "hideDockHint": "不支持同時隱藏 dock 和托盤",
         "importThemes": "導入主題",

src/renderer/pages/PicGoSetting.vue

@@ -128,6 +128,26 @@
                 </div>
               </template>
             </SettingCard>
+
+            <SettingCard p1 class="flex flex-col justify-center">
+              <CustomSwitch
+                v-model="formOfSetting.enableCustomBgImg"
+                no-border
+                small
+                :title="t('pages.settings.system.enableCustomBgImg')"
+              />
+            </SettingCard>
+
+            <CustomNavCard
+              v-if="formOfSetting.enableCustomBgImg"
+              :icon="ImageIcon"
+              noarrow
+              :title="t('pages.settings.system.customBgImgPath')"
+            >
+              <template #extra>
+                <CustomButton type="primary" :text="t('pages.settings.clickToSet')" @click="handleCustomBgImg" />
+              </template>
+            </CustomNavCard>
           </SettingSection>
 
           <!-- Window Behavior Section -->
@@ -195,7 +215,7 @@
               :title="t('pages.settings.system.customMiniIconPath')"
             >
               <template #extra>
-                <CustomButton type="secondary" :text="t('pages.settings.clickToSet')" @click="handleMiniIconPath" />
+                <CustomButton type="primary" :text="t('pages.settings.clickToSet')" @click="handleMiniIconPath" />
               </template>
             </CustomNavCard>
           </SettingSection>
@@ -1402,6 +1422,8 @@ const formOfSetting = ref<ISettingForm>({
   enableSecondUploader: false,
   enableAdvancedAnimation: false,
   theme: 'default.css',
+  enableCustomBgImg: false,
+  customBgImgPath: '',
 })
 
 /* computed properties */
@@ -1690,6 +1712,14 @@ const addWatch = () => {
       })
     },
   )
+
+  watch(
+    () => formOfSetting.value.enableCustomBgImg,
+    newVal => {
+      saveConfig({ [configPaths.settings.enableCustomBgImg]: newVal })
+      window.electron.sendRPC(IRPCActionType.RELOAD_WINDOW)
+    },
+  )
 }
 
 /* methods */
@@ -2129,12 +2159,22 @@ function handleMiniWindowOntop(val: ICheckBoxValueType) {
   window.electron.sendRPC(IRPCActionType.MINI_WINDOW_ON_TOP, val)
 }
 
+async function handleCustomBgImg() {
+  const result = await window.electron.triggerRPC<string[]>(IRPCActionType.MANAGE_OPEN_FILE_SELECT_DIALOG)
+  if (result && result[0]) {
+    const fileName = await window.electron.triggerRPC<string>(IRPCActionType.COPY_CUSTOM_IMG_TO_THEMES_DIR, result[0])
+    formOfSetting.value.customBgImgPath = `theme://./image/${fileName}`
+    saveConfig(configPaths.settings.customBgImgPath, formOfSetting.value.customBgImgPath)
+    await window.electron.triggerRPC(IRPCActionType.THEME_APPLY_THEME, currentTheme.value)
+  }
+}
+
 async function handleMiniIconPath() {
   const result = await window.electron.triggerRPC<string[]>(IRPCActionType.MANAGE_OPEN_FILE_SELECT_DIALOG)
   if (result && result[0]) {
     formOfSetting.value.customMiniIcon = result[0]
     saveConfig(configPaths.settings.customMiniIcon, formOfSetting.value.customMiniIcon)
-    window.electron.sendRPC(IRPCActionType.UPDATE_MINI_WINDOW_ICON, formOfSetting.value.customMiniIcon)
+    window.electron.sendRPC(IRPCActionType.RELOAD_WINDOW)
   }
 }
 

src/renderer/utils/configPaths.ts

@@ -188,6 +188,8 @@ export const configPaths = {
     systemTheme: 'settings.systemTheme',
     enableAdvancedAnimation: 'settings.enableAdvancedAnimation',
     isDisableGPU: 'settings.isDisableGPU',
+    enableCustomBgImg: 'settings.enableCustomBgImg',
+    customBgImgPath: 'settings.customBgImgPath',
   },
   needReload: 'needReload',
   picgoPlugins: 'picgoPlugins',

src/renderer/utils/enum.ts

@@ -29,6 +29,7 @@ export const IRPCActionType = {
   THEME_FETCH_THEMES: 'THEME_FETCH_THEMES',
   THEME_IMPORT_THEMES: 'THEME_IMPORT_THEMES',
   THEME_APPLY_THEME: 'THEME_APPLY_THEME',
+  COPY_CUSTOM_IMG_TO_THEMES_DIR: 'COPY_CUSTOM_IMG_TO_THEMES_DIR',
   OPEN_WINDOW: 'OPEN_WINDOW',
   OPEN_MINI_WINDOW: 'OPEN_MINI_WINDOW',
   CLOSE_WINDOW: 'CLOSE_WINDOW',