✨ Feature(custom): add gallery picbed filter

ISSUES CLOSED: #309

src/main/utils/configPaths.ts

@@ -103,6 +103,7 @@ export interface IConfigStruct {
     autoStart: boolean
     autoImport: boolean
     autoImportPicBed: string[]
+    galleryPicBedFilter: string[]
   }
   needReload: boolean
   picgoPlugins: IPicGoPlugins
@@ -190,6 +191,7 @@ export const configPaths = {
     autoStart: 'settings.autoStart',
     autoImport: 'settings.autoImport',
     autoImportPicBed: 'settings.autoImportPicBed',
+    galleryPicBedFilter: 'settings.galleryPicBedFilter',
     enableSecondUploader: 'settings.enableSecondUploader'
   },
   needReload: 'needReload',

src/renderer/i18n/locales/en.json

@@ -279,7 +279,9 @@
         "sinkDomain": "Sink Domain",
         "sinkToken": "Sink Token",
         "encodeOutputUrl": "Escape output (copy) URL",
-        "chooseShowedPicBed": "Please select the image bed to display in the menu"
+        "chooseShowedPicBed": "Please select the image bed to display in the menu",
+        "galleryPicBedFilter": "Gallery PicBed Filter",
+        "galleryPicBedFilterDescription": "Choose which picbeds to show in the gallery. If none are selected, all picbeds will be shown."
       },
       "advanced": {
         "title": "Advanced",

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

@@ -274,7 +274,9 @@
         "sinkDomain": "Sink 域名",
         "sinkToken": "Sink Token",
         "encodeOutputUrl": "输出（复制） URL 时进行转义",
-        "chooseShowedPicBed": "请选择显示在菜单的图床"
+        "chooseShowedPicBed": "请选择显示在菜单的图床",
+        "galleryPicBedFilter": "相册图床过滤器",
+        "galleryPicBedFilterDescription": "选择在相册中显示的图床类型。如果未选择任何图床，将显示所有图床。"
       },
       "advanced": {
         "title": "高级",

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

@@ -274,7 +274,9 @@
         "sinkDomain": "Sink 域名",
         "sinkToken": "Sink Token",
         "encodeOutputUrl": "輸出（複製） URL 時進行轉義",
-        "chooseShowedPicBed": "請選擇顯示在菜單的圖床"
+        "chooseShowedPicBed": "請選擇顯示在菜單的圖床",
+        "galleryPicBedFilter": "相簿圖床篩選器",
+        "galleryPicBedFilterDescription": "選擇在相簿中顯示的圖床類型。如果未選擇任何圖床，將顯示所有圖床。"
       },
       "advanced": {
         "title": "高級",

src/renderer/pages/Gallery.vue

@@ -531,6 +531,7 @@ const gallerySliderControl = reactive({
 const deleteCloud = ref<boolean>(false)
 const isAlwaysForceReload = ref<boolean>(false)
 const choosedPicBed = ref<string[]>([])
+const galleryPicBedFilterSetting = ref<string[]>([])
 const lastChoosed = ref<number>(-1)
 const isShiftKeyPress = ref<boolean>(false)
 const searchText = ref<string>('')
@@ -907,6 +908,7 @@ async function initConf() {
     : t('pages.gallery.longUrl')
   isAlwaysForceReload.value = (await getConfig<boolean>(configPaths.settings.isAlwaysForceReload)) || false
   deleteCloud.value = (await getConfig<boolean>(configPaths.settings.deleteCloudFile)) || false
+  galleryPicBedFilterSetting.value = (await getConfig<string[]>(configPaths.settings.galleryPicBedFilter)) || []
 }
 
 const updateGalleryHandler = () => {
@@ -949,7 +951,13 @@ function formatFileName(name: string) {
 }
 
 function getGallery(): IGalleryItem[] {
-  if (debouncedSearchText.value || choosedPicBed.value.length > 0 || debouncedSearchTextURL.value || dateRange.value) {
+  if (
+    debouncedSearchText.value ||
+    choosedPicBed.value.length > 0 ||
+    debouncedSearchTextURL.value ||
+    dateRange.value ||
+    galleryPicBedFilterSetting.value.length > 0
+  ) {
     return images.value
       .filter(item => {
         let isInChoosedPicBed = true
@@ -958,6 +966,8 @@ function getGallery(): IGalleryItem[] {
         let isIncludesDateRange = true
         if (choosedPicBed.value.length > 0) {
           isInChoosedPicBed = choosedPicBed.value.some(type => type === item.type)
+        } else if (galleryPicBedFilterSetting.value.length > 0) {
+          isInChoosedPicBed = galleryPicBedFilterSetting.value.some(type => type === item.type)
         }
         if (debouncedSearchText.value) {
           isIncludesSearchText = customStrMatch(item.fileName || '', debouncedSearchText.value)

src/renderer/pages/PicGoSetting.vue

@@ -533,6 +533,19 @@
               </label>
             </div>
           </div>
+
+          <div class="settings-section">
+            <h2>{{ t('pages.settings.upload.galleryPicBedFilter') }}</h2>
+            <p>{{ t('pages.settings.upload.galleryPicBedFilterDescription') }}</p>
+
+            <div class="checkbox-group">
+              <label v-for="item in picBedGlobal" :key="`gallery-${item.name}`" class="checkbox-option">
+                <input v-model="galleryPicBedFilterList" type="checkbox" :value="item.type" class="checkbox-input" />
+                <span class="checkbox-indicator" />
+                <span class="checkbox-label">{{ item.name }}</span>
+              </label>
+            </div>
+          </div>
         </div>
 
         <!-- Advanced Settings Tab -->
@@ -1271,6 +1284,7 @@ const { confirm } = useConfirm()
 const message = useMessage()
 const activeName = ref<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('system')
 const showPicBedList = ref<string[]>([])
+const galleryPicBedFilterList = ref<string[]>([])
 
 // Tab configuration
 const tabs = computed(() => [
@@ -1534,6 +1548,7 @@ async function initData() {
   const settings = config.settings || {}
   const picBed = config.picBed
   showPicBedList.value = picBedGlobal.value.filter(item => item.visible).map(item => item.name)
+  galleryPicBedFilterList.value = settings.galleryPicBedFilter || []
   formKeys.forEach(key => {
     ;(formOfSetting.value as any)[key] = settings[key] ?? formOfSetting.value[key]
   })
@@ -1665,12 +1680,20 @@ watch(showPicBedList, val => {
   handleShowPicBedListChange(val)
 })
 
+watch(galleryPicBedFilterList, val => {
+  handleGalleryPicBedFilterChange(val)
+})
+
 function handleShowPicBedListChange(val: ICheckBoxValueType[]) {
   const list = picBedGlobal.value.map(item => ({ ...item, visible: val.includes(item.name) }))
   saveConfig({ [configPaths.picBed.list]: list })
   updatePicBedGlobal()
 }
 
+function handleGalleryPicBedFilterChange(val: ICheckBoxValueType[]) {
+  saveConfig({ [configPaths.settings.galleryPicBedFilter]: val })
+}
+
 function handleAutoStartChange(val: ICheckBoxValueType) {
   saveConfig(configPaths.settings.autoStart, val)
   window.electron.sendRPC(IRPCActionType.PICLIST_AUTO_START, val)

src/renderer/utils/configPaths.ts

@@ -104,6 +104,7 @@ export interface IConfigStruct {
     autoStart: boolean
     autoImport: boolean
     autoImportPicBed: string[]
+    galleryPicBedFilter: string[]
   }
   needReload: boolean
   picgoPlugins: IPicGoPlugins
@@ -192,6 +193,7 @@ export const configPaths = {
     autoStart: 'settings.autoStart',
     autoImport: 'settings.autoImport',
     autoImportPicBed: 'settings.autoImportPicBed',
+    galleryPicBedFilter: 'settings.galleryPicBedFilter',
     enableSecondUploader: 'settings.enableSecondUploader'
   },
   needReload: 'needReload',