GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-06 20:42:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): support custom background image

Browse Source
This commit is contained in:
Kuingsmile
2026-01-27 14:12:00 +08:00
parent a5c07f2beb
commit d64cf2d4f3
12 changed files with 101 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
currentVersion.md
View File

@@ -37,6 +37,7 @@
- 接入主题仓库 [PicList ThemeHub](https://github.com/Kuingsmile/PicList-ThemeHub)，支持自定义下载
- 提供 12 个内置主题（如 bilibili、二次元、极夜紫等风格）
- 支持自定义主题编辑和保存
- 支持自定义背景图片
- 重新设计了管理功能的全部页面
- 优化相册页面卡片样式，边界更清晰，提升选择框视觉效果
- 优化多个页面在窄屏下的显示，避免内容溢出

1
currentVersion_en.md
View File

@@ -37,6 +37,7 @@ Use custom `javascript` scripts to extend PicList's functionality without the ne
- Integrated theme repository [PicList ThemeHub](https://github.com/Kuingsmile/PicList-ThemeHub), supporting custom downloads.
- Provided 12 built-in themes (such as bilibili, Anime, purple styles).
- Supports custom theme editing and saving.
- Supports custom background images.
- Redesigned all pages of the management function
- Optimized album page card styles, clearer boundaries, improved selection box visual effects.
- Optimized the display of multiple pages under narrow screens to avoid content overflow.

11
src/main/events/rpc/routes/system/app.ts
View File

@@ -68,6 +68,17 @@ export default [
},
type: IRPCType.INVOKE,
},
{
action: IRPCActionType.COPY_CUSTOM_IMG_TO_THEMES_DIR,
handler: async (_: IIPCEvent, args: [filePath: string]) => {
const fileName = `custom-bgimg-${Date.now()}${path.extname(args[0])}`
const abFilePath = path.join(themesDir(), 'image', fileName)
fs.ensureDirSync(path.dirname(abFilePath))
fs.copyFileSync(args[0], abFilePath)
return fileName
},
type: IRPCType.INVOKE,
},
{
action: IRPCActionType.THEME_WRITE_THEME,
handler: async (_: IIPCEvent, args: [fileName: string, content: string]) => {

1
src/main/utils/enum.ts
View File

@@ -82,6 +82,7 @@ export const IRPCActionType = {
THEME_IMPORT_THEMES: 'THEME_IMPORT_THEMES',
THEME_APPLY_THEME: 'THEME_APPLY_THEME',
THEME_GET_BOOTSTRAP: 'THEME_GET_BOOTSTRAP',
COPY_CUSTOM_IMG_TO_THEMES_DIR: 'COPY_CUSTOM_IMG_TO_THEMES_DIR',
RELOAD_APP: 'RELOAD_APP',
OPEN_URL: 'OPEN_URL',

39
src/preload/index.ts
View File

@@ -14,7 +14,7 @@ function setTheme(mode: string) {
document.documentElement.classList.toggle('light', m === 'light')
}
function injectCSS(css: string) {
function injectCSS(css: string, config: { imageUrl?: string; opacity?: string; blur?: string }) {
const id = '__piclist_theme__'
let el = document.getElementById(id) as HTMLStyleElement | null
if (!el) {
@@ -22,14 +22,33 @@ function injectCSS(css: string) {
el.id = id
;(document.head || document.documentElement).appendChild(el)
}
el.textContent = css
const overrides = `
:root, .dark, .light, [data-theme='dark'], [data-theme='light'] {
${config.imageUrl ? `--background-image: url("${config.imageUrl}") !important;` : ''}
${config.opacity ? `--background-image-opacity: ${config.opacity} !important;` : ''}
${config.blur ? `--background-blur: ${config.blur} !important;` : ''}
--color-background-primary: transparent !important;
--color-background-secondary: transparent !important;
}
`
el.textContent = css + '\n' + overrides
}
;(async () => {
try {
const { mode, css } = await ipcRenderer.invoke('RPC_ACTIONS_INVOKE', 'THEME_GET_BOOTSTRAP')
const allConfig = await ipcRenderer.invoke('RPC_ACTIONS_INVOKE', 'PICLIST_GET_CONFIG', [])
const enableCustomBgImg = allConfig?.settings?.enableCustomBgImg || false
const customBgImgPath = allConfig?.settings?.customBgImgPath || ''
const config = enableCustomBgImg
? {
imageUrl: customBgImgPath,
opacity: '0.7',
blur: '5px',
}
: {}
if (document.documentElement) setTheme(mode)
if (css) injectCSS(css)
if (css) injectCSS(css, config)
} catch (e) {
console.error('[theme] bootstrap failed', e)
}
@@ -117,8 +136,18 @@ try {
return webUtils.getPathForFile(file)
},
onThemeUpdate: (callback: (css: string) => void) => {
const subscription = (_: any, css: string) => {
injectCSS(css)
const subscription = async (_: any, css: string) => {
const allConfig = await ipcRenderer.invoke('RPC_ACTIONS_INVOKE', 'PICLIST_GET_CONFIG', [])
const enableCustomBgImg = allConfig?.settings?.enableCustomBgImg || false
const customBgImgPath = allConfig?.settings?.customBgImgPath || ''
const config = enableCustomBgImg
? {
imageUrl: customBgImgPath,
opacity: '0.7',
blur: '5px',
}
: {}
injectCSS(css, config)
callback(css)
}
ipcRenderer.on('THEME_UPDATE', subscription)

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

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

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

@@ -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": "导入主题",

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

@@ -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": "導入主題",

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

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

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

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

1
src/renderer/utils/enum.ts
View File

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

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

@@ -42,6 +42,8 @@ interface ISettingForm {
enableSecondUploader: boolean
enableAdvancedAnimation: boolean
theme: string
enableCustomBgImg: boolean
customBgImgPath: string
}
interface IToolboxItem {