GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-06-03 23:01:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kuingsmile
2026-01-27 14:37:05 +08:00
parent d64cf2d4f3
commit a6f54e6493
9 changed files with 62 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/preload/index.ts
View File

@@ -14,8 +14,13 @@ function setTheme(mode: string) {
document.documentElement.classList.toggle('light', m === 'light')
}
function injectCSS(css: string, config: { imageUrl?: string; opacity?: string; blur?: string }) {
async function injectCSS(css: string, config: { imageUrl?: string; opacity?: string; blur?: string }) {
const id = '__piclist_theme__'
if (!document.documentElement) {
await new Promise(resolve => {
window.addEventListener('DOMContentLoaded', resolve, { once: true })
})
}
let el = document.getElementById(id) as HTMLStyleElement | null
if (!el) {
el = document.createElement('style')
@@ -40,15 +45,17 @@ function injectCSS(css: string, config: { imageUrl?: string; opacity?: string; b
const allConfig = await ipcRenderer.invoke('RPC_ACTIONS_INVOKE', 'PICLIST_GET_CONFIG', [])
const enableCustomBgImg = allConfig?.settings?.enableCustomBgImg || false
const customBgImgPath = allConfig?.settings?.customBgImgPath || ''
const customBgOpacity = allConfig?.settings?.customBgImgOpacity || '0.7'
const customBgBlur = allConfig?.settings?.customBgImgBlur || 5
const config = enableCustomBgImg
? {
imageUrl: customBgImgPath,
opacity: '0.7',
blur: '5px',
opacity: customBgOpacity,
blur: `${customBgBlur}px`,
}
: {}
if (document.documentElement) setTheme(mode)
if (css) injectCSS(css, config)
if (css) await injectCSS(css, config)
} catch (e) {
console.error('[theme] bootstrap failed', e)
}
@@ -140,11 +147,13 @@ try {
const allConfig = await ipcRenderer.invoke('RPC_ACTIONS_INVOKE', 'PICLIST_GET_CONFIG', [])
const enableCustomBgImg = allConfig?.settings?.enableCustomBgImg || false
const customBgImgPath = allConfig?.settings?.customBgImgPath || ''
const customBgOpacity = allConfig?.settings?.customBgImgOpacity || '0.7'
const customBgBlur = allConfig?.settings?.customBgImgBlur || 5
const config = enableCustomBgImg
? {
imageUrl: customBgImgPath,
opacity: '0.7',
blur: '5px',
opacity: customBgOpacity,
blur: `${customBgBlur}px`,
}
: {}
injectCSS(css, config)

2
src/renderer/i18n/locales/en.json
View File

@@ -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...",

2
src/renderer/i18n/locales/zh-CN.json
View File

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

2
src/renderer/i18n/locales/zh-TW.json
View File

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

35
src/renderer/pages/PicGoSetting.vue
View File

@@ -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

2
src/renderer/utils/configPaths.ts
View File

@@ -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',

2
src/universal/types/view.d.ts vendored
View File

@@ -44,6 +44,8 @@ interface ISettingForm {
theme: string
enableCustomBgImg: boolean
customBgImgPath: string
customBgImgOpacity: number
customBgImgBlur: number
}
interface IToolboxItem {