✨ Feature(custom): add per picbed setting button in edit page

src/main/utils/handleUploaderConfig.ts

@@ -17,11 +17,11 @@ export const handleConfigWithFunction = (config: IPicGoPluginOriginConfig[]): IP
   return config as IPicGoPluginConfig[]
 }
 
-export const completeUploaderMetaConfig = (originData: IStringKeyMap): IUploaderConfigListItem => {
+export const completeUploaderMetaConfig = (originData: IStringKeyMap, id?: string): IUploaderConfigListItem => {
   return {
     _configName: 'Default',
     ...trimValues(originData),
-    _id: uuid(),
+    _id: id || uuid(),
     _createdAt: Date.now(),
     _updatedAt: Date.now(),
   }
@@ -185,7 +185,7 @@ export const updateUploaderConfig = (type: string, id: string, config: IStringKe
       _updatedAt: Date.now(),
     })
   } else {
-    updatedConfig = completeUploaderMetaConfig(config)
+    updatedConfig = completeUploaderMetaConfig(config, id)
     updatedDefaultId = updatedConfig._id
     configList.push(updatedConfig)
   }

src/renderer/pages/picbeds/Picbeds.css

@@ -568,6 +568,15 @@
     left: 0;
     min-width: 100%;
   }
+
+  .modal-overlay {
+    padding: 1rem;
+  }
+
+  .modal-header,
+  .modal-content {
+    padding: 1.5rem;
+  }
 }
 
 @media (width >= 1024px) {
@@ -582,3 +591,88 @@
   outline: 1px solid var(--color-accent);
   outline-offset: 2px;
 }
+
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  padding: 2rem;
+  background: rgb(0 0 0 / 50%);
+  inset: 0;
+}
+
+.modal-container {
+  overflow: hidden;
+  margin: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2xl);
+  width: 90vw;
+  max-width: 90vw;
+  height: 85vh;
+  max-height: 85vh;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xl);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 0.95rem 1rem;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.modal-subtitle {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.modal-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  cursor: pointer;
+}
+
+.modal-close:hover {
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+  background: var(--color-surface);
+}
+
+.modal-content {
+  overflow-y: auto;
+  padding: 0.2rem;
+  max-height: calc(90vh - 120px);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-content::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-close:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}

src/renderer/pages/picbeds/index.vue

@@ -22,6 +22,10 @@
           </div>
         </div>
         <div class="header-actions">
+          <button class="btn btn-secondary btn-glow" @click="imageProcessDialogVisible = true">
+            <Settings :size="16" />
+            <span>{{ t('pages.upload.imageProcessNameSingle') }}</span>
+          </button>
           <button class="btn btn-secondary btn-glow" @click="handleCopyApi">
             <Copy :size="16" />
             <span>{{ t('pages.picBedConfigs.copyAPI') }}</span>
@@ -116,6 +120,27 @@
         </div>
       </div>
     </Transition>
+
+    <transition name="modal">
+      <div v-if="imageProcessDialogVisible" class="modal-overlay" @click.stop>
+        <div class="modal-container" @click.stop>
+          <div class="modal-header">
+            <h3 class="modal-title">
+              {{ t('pages.imageProcess.title') }}
+            </h3>
+            <span class="modal-subtitle">
+              {{ t('pages.imageProcess.subtitle-PerPicbed') }}
+            </span>
+            <button class="modal-close" @click="imageProcessDialogVisible = false">
+              <XIcon :size="20" />
+            </button>
+          </div>
+          <div class="modal-content">
+            <ImageProcessSetting :config-id="uuidValue" :current-picbed-name="currentPicbedType" />
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -132,11 +157,14 @@ import {
   Import,
   RotateCcw,
   Settings,
+  XIcon,
 } from 'lucide-vue-next'
+import { v4 as uuid } from 'uuid'
 import { onBeforeMount, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
+import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 import ConfigForm from '@/components/UnifiedConfigForm.vue'
 import useMessage from '@/hooks/useMessage'
 import { getRawData } from '@/utils/common'
@@ -154,9 +182,13 @@ const picBedConfigList = ref<IUploaderConfigListItem[]>([])
 const picBedName = ref('')
 const loading = ref(false)
 const dropdownVisible = ref(false)
+const imageProcessDialogVisible = ref(false)
 const $route = useRoute()
 const $router = useRouter()
 const $configForm = useTemplateRef('$configForm')
+const uuidValue = ($route.params.configId as string) || uuid()
+const currentPicbedType = $route.params.type as string
+console.log('PicbedsPage UUID:', uuidValue)
 
 type.value = $route.params.type as string
 
@@ -188,7 +220,7 @@ const handleConfirm = async () => {
       await window.electron.triggerRPC<void>(
         IRPCActionType.UPLOADER_UPDATE_CONFIG,
         type.value,
-        rawResult?._id,
+        rawResult?._id || uuidValue,
         rawResult,
       )
       message.success(t('pages.picBedConfigs.setSuccess'))