✨ Feature(custom): add favorite icon in picbed config page and optimize UI

src/renderer/i18n/locales/en.json

@@ -1038,6 +1038,7 @@
     },
     "uploaderConfig": {
       "addNew": "Add New Configuration",
+      "addToFavorites": "Add to Quick Switch",
       "clickToSelect": "Click to select",
       "copy": "Copy",
       "delete": "Delete",
@@ -1050,6 +1051,7 @@
       "duplicateSuccess": "Duplicate Success",
       "duplicateTitle": "Duplicate Configuration",
       "edit": "Edit",
+      "removeFromFavorites": "Remove from Quick Switch",
       "selected": "Active",
       "setAsDefault": "Set as Default PicBed",
       "setSuccess": "Set Success",

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

@@ -1033,6 +1033,7 @@
     },
     "uploaderConfig": {
       "addNew": "新增配置",
+      "addToFavorites": "添加当前图床到快速切换",
       "clickToSelect": "点击选择",
       "copy": "副本",
       "delete": "删除",
@@ -1045,6 +1046,7 @@
       "duplicateSuccess": "拷贝成功",
       "duplicateTitle": "拷贝配置",
       "edit": "编辑",
+      "removeFromFavorites": "从快速切换中移除",
       "selected": "已启用",
       "setAsDefault": "设为默认图床",
       "setSuccess": "设置成功",

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

@@ -1033,6 +1033,7 @@
     },
     "uploaderConfig": {
       "addNew": "新增配置",
+      "addToFavorites": "添加到快速切換",
       "clickToSelect": "點擊選擇",
       "copy": "副本",
       "delete": "刪除",
@@ -1045,6 +1046,7 @@
       "duplicateSuccess": "拷贝成功",
       "duplicateTitle": "拷贝配置",
       "edit": "編輯",
+      "removeFromFavorites": "從快速切換中移除",
       "selected": "已啟用",
       "setAsDefault": "設為預設圖床",
       "setSuccess": "設定成功",

src/renderer/pages/UploaderConfigPage.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="config-page">
-    <!-- Ambient Background -->
-    <div class="ambient-bg" />
-
     <div class="config-container">
       <!-- Hero Header Section -->
       <header class="page-header">
@@ -52,15 +49,14 @@
               <div class="card-actions">
                 <button
                   class="action-btn"
-                  :class="{ 'is-favorited': isConfigFavorited(item._id) }"
                   :title="
                     isConfigFavorited(item._id)
                       ? t('pages.uploaderConfig.removeFromFavorites')
                       : t('pages.uploaderConfig.addToFavorites')
                   "
-                  @click.stop="() => toggleConfigFavorite(item._id)"
+                  @click.stop="() => toggleConfigFavorite(item._id, item._configName)"
                 >
-                  <Heart :size="14" :fill="isConfigFavorited(item._id) ? 'currentColor' : 'none'" />
+                  <Heart :size="14" :fill="isConfigFavorited(item._id) ? '#f39c12' : 'none'" />
                 </button>
                 <button class="action-btn" :title="t('pages.uploaderConfig.edit')" @click.stop="openEditPage(item._id)">
                   <Pencil :size="14" />
@@ -157,7 +153,6 @@ const favoritePicbeds = useStorage<IFavoritePicbedItem[]>('favorite-picbeds', []
 const type = ref('')
 const curConfigList = ref<IStringKeyMap[]>([])
 const defaultConfigId = ref('')
-const favoriteConfigs = useStorage<string[]>('favorite-configs', [])
 
 const picBedName = computed(() => {
   if (!picBedG.value || picBedG.value.length === 0) {
@@ -167,22 +162,20 @@ const picBedName = computed(() => {
   return target ? target.name : ''
 })
 
-const isFavorited = computed(() => {
-  return favoritePicbeds.value.some(item => item.type === type.value)
-})
-
 function isConfigFavorited(configId: string): boolean {
-  return favoriteConfigs.value.includes(configId)
+  const ids = favoritePicbeds.value.map(item => item.id)
+  return ids.includes(configId)
 }
 
-function toggleConfigFavorite(configId: string) {
+function toggleConfigFavorite(configId: string, configName: string) {
-  const index = favoriteConfigs.value.indexOf(configId)
+  if (isConfigFavorited(configId)) {
-  if (index > -1) {
+    const index = favoritePicbeds.value.findIndex(
-    favoriteConfigs.value.splice(index, 1)
+      item => item.type === type.value && item.id === configId && item.configName === configName,
-    message.success(t('pages.uploaderConfig.removedFromFavorites'))
+    )
+    if (index === -1) return
+    favoritePicbeds.value.splice(index, 1)
   } else {
-    favoriteConfigs.value.push(configId)
+    favoritePicbeds.value.push({ id: configId, configName, type: type.value })
-    message.success(t('pages.uploaderConfig.addedToFavorites'))
   }
 }
 
@@ -289,6 +282,12 @@ async function deleteConfig(id: string) {
     center: true,
   })
   if (!result) return
+  if (isConfigFavorited(id)) {
+    const index = favoritePicbeds.value.findIndex(item => item.type === type.value && item.id === id)
+    if (index !== -1) {
+      favoritePicbeds.value.splice(index, 1)
+    }
+  }
   const res = await window.electron.triggerRPC<IUploaderConfigItem>(IRPCActionType.PICBED_DELETE_CONFIG, type.value, id)
   if (!res) return
   curConfigList.value = res.configList
@@ -311,17 +310,6 @@ function setDefaultPicBed(type: string) {
     [configPaths.picBed.current]: type,
     [configPaths.picBed.uploader]: type,
   })
-
-  function toggleFavorite() {
-    const index = favoritePicbeds.value.findIndex(item => item.type === type.value)
-    if (index > -1) {
-      favoritePicbeds.value.splice(index, 1)
-      message.success(t('pages.uploaderConfig.removedFromFavorites'))
-    } else {
-      favoritePicbeds.value.push({ type: type.value })
-      message.success(t('pages.uploaderConfig.addedToFavorites'))
-    }
-  }
   const currentConfigName = curConfigList.value.find(item => item._id === defaultConfigId.value)?._configName
   window.electron.sendRPC(IRPCActionType.TRAY_SET_TOOL_TIP, `${type} ${currentConfigName || ''}`)
   message.success(t('pages.uploaderConfig.setSuccess'))

src/renderer/pages/css/UploaderConfigPage.css

@@ -6,41 +6,6 @@
   background: var(--color-background);
 }
 
-/* Ambient Background Effect */
-.ambient-bg {
-  position: fixed;
-  top: -50%;
-  left: -50%;
-  z-index: 0;
-  width: 200%;
-  height: 200%;
-  background:
-    radial-gradient(circle at 20% 20%, rgb(var(--accent-rgb) / 8%) 0%, transparent 50%),
-    radial-gradient(circle at 80% 80%, rgb(var(--accent-rgb) / 5%) 0%, transparent 50%),
-    radial-gradient(circle at 40% 60%, rgb(59 130 246 / 5%) 0%, transparent 40%);
-  pointer-events: none;
-  animation: ambient-drift 20s ease-in-out infinite;
-}
-
-@keyframes ambient-drift {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-
-  25% {
-    transform: translate(2%, 1%) rotate(1deg);
-  }
-
-  50% {
-    transform: translate(-1%, 2%) rotate(-1deg);
-  }
-
-  75% {
-    transform: translate(1%, -1%) rotate(0.5deg);
-  }
-}
-
 /* Main Container */
 .config-container {
   position: relative;
@@ -48,7 +13,6 @@
   display: flex;
   margin: 0 auto;
   padding: 2rem;
-  max-width: 1400px;
   flex-direction: column;
   gap: 2rem;
 }
@@ -144,7 +108,7 @@
 
 .btn-primary {
   color: white;
-  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 100%);
   box-shadow:
     0 4px 14px rgb(var(--accent-rgb) / 35%),
     0 2px 4px rgb(0 0 0 / 10%),
@@ -186,21 +150,6 @@
   left: 100%;
 }
 
-.btn.is-favorited {
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  box-shadow:
-    0 4px 14px rgb(239 68 68 / 35%),
-    0 2px 4px rgb(0 0 0 / 10%),
-    inset 0 1px 0 rgb(255 255 255 / 15%);
-}
-
-.btn.is-favorited:hover:not(:disabled) {
-  box-shadow:
-    0 8px 24px rgb(239 68 68 / 45%),
-    0 4px 8px rgb(0 0 0 / 15%),
-    inset 0 1px 0 rgb(255 255 255 / 20%);
-}
-
 /* ============================================
    Main Content Area
    ============================================ */
@@ -399,21 +348,6 @@
   cursor: not-allowed;
 }
 
-.action-btn.is-favorited {
-  color: #ef4444;
-  border-color: #ef4444;
-  background: rgb(239 68 68 / 10%);
-}
-
-.action-btn.is-favorited:hover {
-  color: #dc2626;
-  border-color: #dc2626;
-  background: rgb(239 68 68 / 20%);
-  transform: scale(1.08);
-  opacity: 0.4;
-  pointer-events: none;
-}
-
 /* Card Body */
 .card-body {
   position: relative;