🐛 Fix(custom): fix task list length badge postion

src/renderer/index.css

@@ -159,13 +159,13 @@
   @keyframes badge-pulse {
     0%,
     100% {
-      transform: translateY(-50%) scale(1);
+      transform: scale(1);
-      box-shadow: 0 2px 6px rgb(0 122 255 / 40%);
+      box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
     }
 
     50% {
-      transform: translateY(-50%) scale(1.1);
+      transform: scale(1.1);
-      box-shadow: 0 2px 6px rgb(0 122 255 / 60%);
+      box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
     }
   }
 

src/renderer/pages/Gallery.vue

@@ -203,7 +203,7 @@
           <div class="flex flex-1 flex-wrap gap-3">
             <button class="action-btn copy-btn" :class="{ active: isMultiple(choosedList) }" @click="multiCopy">
               <ClipboardIcon :size="16" />
-              <span class="mt-1"> {{ t('pages.gallery.copy') }}</span>
+              <span> {{ t('pages.gallery.copy') }}</span>
             </button>
             <button
               class="action-btn edit-btn"
@@ -211,17 +211,15 @@
               @click="() => (isShowBatchRenameDialog = true)"
             >
               <EditIcon :size="16" />
-              <span class="mt-1"> {{ t('pages.gallery.edit') }}</span>
+              <span> {{ t('pages.gallery.edit') }}</span>
             </button>
             <button class="action-btn delete-btn" :class="{ active: isMultiple(choosedList) }" @click="multiRemove">
               <TrashIcon :size="16" />
-              <span class="mt-1">
+              <span> {{ `${t('pages.gallery.delete')}${selectedCount > 0 ? ` (${selectedCount})` : ''}` }}</span>
-                {{ `${t('pages.gallery.delete')}${selectedCount > 0 ? ` (${selectedCount})` : ''}` }}</span
-              >
             </button>
             <button class="action-btn select-btn" :class="{ active: filterList.length > 0 }" @click="toggleSelectAll">
               <CheckSquareIcon :size="16" />
-              <span class="mt-1">{{ isAllSelected ? t('pages.gallery.cancel') : t('pages.gallery.selectAll') }}</span>
+              <span>{{ isAllSelected ? t('pages.gallery.cancel') : t('pages.gallery.selectAll') }}</span>
             </button>
           </div>
         </div>
@@ -341,7 +339,7 @@
         <div class="absolute inset-0 bg-black/50" :class="{ 'advanced-animation': enableAdvancedAnimation }" />
         <div class="relative max-h-[90vh] max-w-[90vw] overflow-hidden rounded-xl bg-surface shadow-lg">
           <button
-            class="absolute top-4 right-4 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-white bg-danger/90 text-white hover:bg-danger hover:text-white"
+            class="absolute top-4 right-4 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-danger bg-danger/70 text-white hover:bg-danger hover:text-white"
             @click="handleClose"
           >
             <XIcon :size="24" />
@@ -405,10 +403,10 @@
             <h3 class="m-0 mr-4 flex-1 overflow-hidden text-base font-semibold text-ellipsis text-main">
               {{ currentPreviewImage?.intro }}
             </h3>
-            <div class="mt-1 mr-4 text-sm font-semibold whitespace-nowrap text-main">
+            <div class="mr-4 text-sm font-semibold whitespace-nowrap text-main">
               {{ gallerySliderControl.index + 1 }} / {{ filterList.length }}
             </div>
-            <div class="mt-1 text-center text-xs font-medium text-main">
+            <div class="text-center text-xs font-medium text-main">
               {{ t('pages.gallery.previewHelp') }}
             </div>
           </div>

src/renderer/pages/Upload.vue

@@ -85,10 +85,10 @@
               @click="handleImageProcessSingle"
             >
               <Settings :size="16" />
-              <span class="mt-1">{{ t('pages.upload.imageProcessNameSingle') }}</span>
+              <span>{{ t('pages.upload.imageProcessNameSingle') }}</span>
             </button>
             <button class="segmented-button" :title="t('pages.upload.imageProcessName')" @click="handleImageProcess">
-              <span class="mt-1">{{ t('pages.upload.imageProcessName') }}</span>
+              <span>{{ t('pages.upload.imageProcessName') }}</span>
             </button>
           </div>
           <button
@@ -170,11 +170,11 @@
         <div class="flex w-full flex-1 flex-row flex-wrap items-center justify-center gap-4 max-md:gap-3 max-md:px-5">
           <button class="quick-action-button" @click="uploadClipboardFiles">
             <ClipboardIcon class="shrink-0 text-accent" :size="15" />
-            <span class="mt-1 text-sm font-medium text-secondary">{{ t('pages.upload.clipboardPicture') }}</span>
+            <span class="text-sm font-medium text-secondary">{{ t('pages.upload.clipboardPicture') }}</span>
           </button>
           <button class="quick-action-button" @click="uploadURLFiles">
             <LinkIcon class="shrink-0 text-accent" :size="15" />
-            <span class="mt-1 text-sm font-medium text-secondary">{{ t('pages.upload.urlUpload') }}</span>
+            <span class="text-sm font-medium text-secondary">{{ t('pages.upload.urlUpload') }}</span>
           </button>
           <button
             class="quick-action-button"
@@ -185,7 +185,7 @@
             <span class="mt-1 text-sm font-medium text-secondary">{{ t('pages.upload.taskUpload') }}</span>
             <span
               v-if="taskQueueStatus.tasks.length > 0"
-              class="absolute top-[0.5] right-3 flex min-w-6 animate-[badge-pulse_2s_ease-in-out_infinite] items-center justify-center rounded-full border border-border-secondary px-1.5 py-0 text-sm font-bold text-accent"
+              class="absolute top-1/2 right-3 flex min-w-6 -translate-y-1/2 animate-[badge-pulse_2s_ease-in-out_infinite] items-center justify-center rounded-full border border-border-secondary px-1.5 py-0 text-sm font-bold text-accent"
             >
               {{ taskQueueStatus.tasks.length }}
             </span>
@@ -325,7 +325,7 @@
                   @click="addFilesToTask"
                 >
                   <PlusIcon :size="16" />
-                  <span class="mt-1">{{ t('pages.upload.taskQueue.addFiles') }}</span>
+                  <span>{{ t('pages.upload.taskQueue.addFiles') }}</span>
                 </button>
                 <button
                   v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
@@ -333,7 +333,7 @@
                   @click="startTaskQueue"
                 >
                   <PlayIcon :size="16" />
-                  <span class="mt-1">{{ t('pages.upload.taskQueue.start') }}</span>
+                  <span>{{ t('pages.upload.taskQueue.start') }}</span>
                 </button>
                 <button
                   v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
@@ -341,7 +341,7 @@
                   @click="pauseTaskQueue"
                 >
                   <PauseIcon :size="16" />
-                  <span class="mt-1">{{ t('pages.upload.taskQueue.pause') }}</span>
+                  <span>{{ t('pages.upload.taskQueue.pause') }}</span>
                 </button>
                 <button
                   v-if="taskQueueStatus.config.isPaused"
@@ -349,7 +349,7 @@
                   @click="resumeTaskQueue"
                 >
                   <PlayIcon :size="16" />
-                  <span class="mt-1">{{ t('pages.upload.taskQueue.resume') }}</span>
+                  <span>{{ t('pages.upload.taskQueue.resume') }}</span>
                 </button>
               </div>
               <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
@@ -359,7 +359,7 @@
                   @click="retryAllFailedTasks"
                 >
                   <RefreshCwIcon :size="16" />
-                  <span class="mt-1">{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
+                  <span>{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
                 </button>
                 <button
                   v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
@@ -367,7 +367,7 @@
                   @click="cancelAllTasks"
                 >
                   <XIcon :size="16" />
-                  <span class="mt-1">{{ t('pages.upload.taskQueue.cancelAll') }}</span>
+                  <span>{{ t('pages.upload.taskQueue.cancelAll') }}</span>
                 </button>
                 <button
                   v-if="
@@ -379,7 +379,7 @@
                   @click="clearFinishedTasks"
                 >
                   <Trash2Icon :size="16" />
-                  <span class="mt-1">{{ t('pages.upload.taskQueue.clearFinished') }}</span>
+                  <span>{{ t('pages.upload.taskQueue.clearFinished') }}</span>
                 </button>
                 <button
                   class="flex cursor-pointer items-center gap-2 rounded-md bg-accent px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-fast ease-standard hover:-translate-y-[2px] hover:shadow-md"

src/renderer/pages/UploaderConfigPage.vue

@@ -1,146 +1,142 @@
 <template>
-  <div class="relative no-scrollbar flex h-full min-h-full items-center justify-center">
+  <div
+    class="relative z-1 no-scrollbar flex h-full w-full flex-col items-center justify-start gap-4 overflow-auto rounded-xl border-none px-4 py-6 shadow-sm"
+  >
     <div
-      class="relative z-1 no-scrollbar flex h-[95%] w-[95%] flex-col gap-6 overflow-auto rounded-xl border-none p-4 shadow-sm"
+      class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md"
     >
-      <!-- Hero Header Section -->
+      <div class="flex flex-wrap items-center gap-4 max-md:justify-center max-md:text-center">
-      <header
+        <div
-        class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-4 shadow-md max-md:flex-col max-md:items-stretch max-md:p-5"
+          class="border-xl flex h-[56px] w-[56px] items-center justify-center rounded-2xl border-none text-accent shadow-sm max-md:h-[35px] max-md:w-[35px]"
-      >
-        <div class="flex items-center gap-4 max-md:flex-col max-md:justify-center max-md:text-center">
-          <div
-            class="border-xl flex h-[56px] w-[56px] items-center justify-center rounded-2xl border-none text-accent shadow-sm max-md:h-[35px] max-md:w-[35px]"
-          >
-            <Settings2 :size="28" />
-          </div>
-          <div class="flex flex-col gap-1 max-md:text-center">
-            <h1 class="m-0 text-2xl font-bold tracking-tight text-main">
-              {{ `${picBedName || type} ${t('pages.uploaderConfig.title')}` }}
-            </h1>
-            <p class="m-0 text-sm text-secondary">
-              {{ t('pages.uploaderConfig.subtitle', { count: curConfigList.length }) }}
-            </p>
-          </div>
-        </div>
-        <div class="flex items-center justify-center gap-3">
-          <button
-            class="relative inline-flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg border-none bg-accent px-6 py-3 font-[inherit] text-sm font-semibold text-white shadow-sm transition-all duration-fast ease-apple disabled:cursor-not-allowed disabled:bg-surface disabled:text-secondary disabled:opacity-60"
-            :disabled="defaultPicBedG === type"
-            @click="setDefaultPicBed(type)"
-          >
-            <Star :size="16" />
-            <span class="mt-1">{{ t('pages.uploaderConfig.setAsDefault') }}</span>
-          </button>
-        </div>
-      </header>
-
-      <!-- Main Content Area -->
-      <main class="flex-1">
-        <!-- Config Grid -->
-        <TransitionGroup
-          name="config-list"
-          tag="div"
-          class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-5 p-1 max-md:grid-cols-1 max-md:gap-4 xl:grid-cols-[repeat(auto-fill,minmax(325px,1fr))] xl:gap-6"
         >
-          <!-- Config Items -->
+          <Settings2 :size="28" />
-          <article
+        </div>
-            v-for="(item, index) in curConfigList"
+        <div class="flex flex-col gap-1 max-md:text-center">
-            :key="item._id"
+          <h1 class="m-0 text-2xl font-bold tracking-tight text-main">
-            class="group/config-card relative flex min-h-[180px] cursor-pointer flex-col gap-6 overflow-hidden rounded-xl border border-border-secondary p-5 shadow-sm transition-all duration-fast ease-apple hover:border-accent hover:shadow-md [.is-active]:border-2 [.is-active]:border-accent [.is-active]:shadow-md"
+            {{ `${picBedName || type} ${t('pages.uploaderConfig.title')}` }}
-            :class="{ 'is-active': defaultConfigId === item._id }"
+          </h1>
-            :style="{ '--delay': `${index * 50}ms` }"
+          <p class="m-0 text-sm text-secondary">
-            @click="() => selectItem(item._id)"
+            {{ t('pages.uploaderConfig.subtitle', { count: curConfigList.length }) }}
-          >
+          </p>
-            <!-- Card Header -->
+        </div>
-            <div class="relative z-1 flex flex-1 items-start justify-between">
+      </div>
-              <div
+      <div class="flex items-center justify-center gap-3">
-                class="peer flex h-[40px] w-[40px] items-center justify-center rounded-lg border border-border-secondary text-accent transition-all duration-fast ease-apple group-hover/config-card:scale-105 [.is-active]:border-none [.is-active]:bg-accent [.is-active]:text-white"
+        <button
-                :class="{ 'is-active': defaultConfigId === item._id }"
+          class="relative inline-flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg border-none bg-accent px-6 py-3 font-[inherit] text-sm font-semibold text-white shadow-sm transition-all duration-fast ease-apple disabled:cursor-not-allowed disabled:bg-surface disabled:text-secondary disabled:opacity-60"
-              >
+          :disabled="defaultPicBedG === type"
-                <Cloud :size="20" />
+          @click="setDefaultPicBed(type)"
-              </div>
+        >
-              <div
+          <Star :size="16" />
-                class="grid grid-cols-2 gap-1.5 opacity-0 transition-all duration-fast ease-apple group-hover/config-card:opacity-100 peer-[.is-active]:opacity-100"
+          <span>{{ t('pages.uploaderConfig.setAsDefault') }}</span>
-              >
+        </button>
-                <button
+      </div>
-                  class="action-btn"
+    </div>
-                  :title="
-                    isConfigFavorited(item._id)
-                      ? t('pages.uploaderConfig.removeFromFavorites')
-                      : t('pages.uploaderConfig.addToFavorites')
-                  "
-                  @click.stop="() => toggleConfigFavorite(item._id, item._configName)"
-                >
-                  <Heart :size="14" :fill="isConfigFavorited(item._id) ? 'var(--color-warning)' : 'none'" />
-                </button>
-                <button class="action-btn" :title="t('pages.uploaderConfig.edit')" @click.stop="openEditPage(item._id)">
-                  <Pencil :size="14" />
-                </button>
-                <button
-                  class="action-btn"
-                  :title="t('pages.uploaderConfig.duplicate')"
-                  @click.stop="() => duplicateConfig(item._id)"
-                >
-                  <Copy :size="14" />
-                </button>
-                <button
-                  class="action-btn danger"
-                  :class="{ disabled: curConfigList.length <= 1 }"
-                  :title="t('pages.uploaderConfig.delete')"
-                  :disabled="curConfigList.length <= 1"
-                  @click.stop="() => deleteConfig(item._id)"
-                >
-                  <Trash2 :size="14" />
-                </button>
-              </div>
-            </div>
 
-            <!-- Card Body -->
+    <!-- Config Grid -->
-            <div class="relative z-1 flex-1">
+    <div
-              <h3 class="mx-0 mt-0 mb-2 text-base leading-[1.4] font-semibold tracking-tight text-main">
+      class="no-scrollbar flex w-full flex-1 items-center gap-4 overflow-auto rounded-2xl border border-border-secondary px-4 py-6 shadow-md"
-                {{ item._configName }}
+    >
-              </h3>
+      <div
-              <div class="flex items-center gap-1.5 text-xs text-tertiary">
+        class="no-scrollbar grid h-full w-full grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-5 overflow-auto border-none p-1 max-md:grid-cols-1 max-md:gap-4 xl:grid-cols-[repeat(auto-fill,minmax(325px,1fr))]"
-                <div class="flex items-center gap-1">
+      >
-                  <Clock :size="12" />
+        <!-- Config Items -->
-                  <span>{{ formatTime(item._updatedAt) }}</span>
+        <div
-                </div>
+          v-for="(item, index) in curConfigList"
-                <div
+          :key="item._id"
-                  v-if="defaultConfigId === item._id"
+          class="group/config-card relative flex min-h-[180px] cursor-pointer flex-col gap-6 overflow-hidden rounded-xl border border-border-secondary p-5 shadow-sm transition-all duration-fast ease-apple hover:border-accent hover:shadow-md [.is-active]:border-2 [.is-active]:border-accent [.is-active]:shadow-md"
-                  class="inline-flex items-center gap-1.5 rounded-2xl bg-accent/40 px-3 py-1.5 text-xs font-medium text-white transition-all duration-fast ease-standard"
+          :class="{ 'is-active': defaultConfigId === item._id }"
-                >
+          :style="{ '--delay': `${index * 50}ms` }"
-                  <CheckCircle2 :size="15" />
+          @click="() => selectItem(item._id)"
-                  <span>{{ t('pages.uploaderConfig.selected') }}</span>
+        >
-                </div>
+          <!-- Card Header -->
-                <div
+          <div class="relative z-1 flex flex-1 items-start justify-between">
-                  v-else
+            <div
-                  class="inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-medium text-tertiary transition-all duration-fast ease-standard group-hover/config-card:bg-accent/10"
+              class="peer flex h-[40px] w-[40px] items-center justify-center rounded-lg border border-border-secondary text-accent transition-all duration-fast ease-apple group-hover/config-card:scale-105 [.is-active]:border-none [.is-active]:bg-accent [.is-active]:text-white"
-                >
+              :class="{ 'is-active': defaultConfigId === item._id }"
-                  <Circle :size="14" />
+            >
-                  <span>{{ t('pages.uploaderConfig.clickToSelect') }}</span>
+              <Cloud :size="20" />
-                </div>
-              </div>
             </div>
-          </article>
+            <div
-
+              class="grid grid-cols-2 gap-1.5 opacity-0 transition-all duration-fast ease-apple group-hover/config-card:opacity-100 peer-[.is-active]:opacity-100"
-          <article
+            >
-            key="add-new"
+              <button
-            class="group/new relative flex min-h-[180px] cursor-pointer flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border-2 border-dashed border-border p-5 shadow-sm transition-all duration-fast ease-apple hover:border-solid hover:border-accent hover:bg-surface hover:shadow-md"
+                class="action-btn"
-            @click="addNewConfig"
+                :title="
-          >
+                  isConfigFavorited(item._id)
-            <div class="flex flex-col items-center gap-3 transition-all duration-fast ease-apple">
+                    ? t('pages.uploaderConfig.removeFromFavorites')
-              <div
+                    : t('pages.uploaderConfig.addToFavorites')
-                class="flex h-[56px] w-[56px] items-center justify-center rounded-xl border-2 border-dashed border-border text-tertiary transition-all duration-fast ease-apple group-hover/new:scale-105 group-hover/new:border-solid group-hover/new:border-accent group-hover/new:bg-accent/5 group-hover/new:text-accent"
+                "
+                @click.stop="() => toggleConfigFavorite(item._id, item._configName)"
               >
-                <Plus :size="24" />
+                <Heart :size="14" :fill="isConfigFavorited(item._id) ? 'var(--color-warning)' : 'none'" />
+              </button>
+              <button class="action-btn" :title="t('pages.uploaderConfig.edit')" @click.stop="openEditPage(item._id)">
+                <Pencil :size="14" />
+              </button>
+              <button
+                class="action-btn"
+                :title="t('pages.uploaderConfig.duplicate')"
+                @click.stop="() => duplicateConfig(item._id)"
+              >
+                <Copy :size="14" />
+              </button>
+              <button
+                class="action-btn danger"
+                :class="{ disabled: curConfigList.length <= 1 }"
+                :title="t('pages.uploaderConfig.delete')"
+                :disabled="curConfigList.length <= 1"
+                @click.stop="() => deleteConfig(item._id)"
+              >
+                <Trash2 :size="14" />
+              </button>
+            </div>
+          </div>
+
+          <!-- Card Body -->
+          <div class="relative z-1 flex-1">
+            <h3 class="mx-0 mt-0 mb-2 text-base leading-[1.4] font-semibold tracking-tight text-main">
+              {{ item._configName }}
+            </h3>
+            <div class="flex items-center gap-1.5 text-xs text-tertiary">
+              <div class="flex items-center gap-1">
+                <Clock :size="12" />
+                <span>{{ formatTime(item._updatedAt) }}</span>
               </div>
-              <div class="flex flex-col items-center gap-1">
+              <div
-                <span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
+                v-if="defaultConfigId === item._id"
+                class="inline-flex items-center gap-1.5 rounded-2xl bg-accent/40 px-3 py-1.5 text-xs font-medium text-white transition-all duration-fast ease-standard"
+              >
+                <CheckCircle2 :size="15" />
+                <span>{{ t('pages.uploaderConfig.selected') }}</span>
+              </div>
+              <div
+                v-else
+                class="inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-medium text-tertiary transition-all duration-fast ease-standard group-hover/config-card:bg-accent/10"
+              >
+                <Circle :size="14" />
+                <span>{{ t('pages.uploaderConfig.clickToSelect') }}</span>
               </div>
             </div>
-          </article>
+          </div>
-        </TransitionGroup>
+        </div>
-      </main>
+
+        <div
+          key="add-new"
+          class="group/new relative flex min-h-[180px] cursor-pointer flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border-2 border-dashed border-border p-5 shadow-sm transition-all duration-fast ease-apple hover:border-solid hover:border-accent hover:bg-surface hover:shadow-md"
+          @click="addNewConfig"
+        >
+          <div class="flex flex-col items-center gap-3 transition-all duration-fast ease-apple">
+            <div
+              class="flex h-[56px] w-[56px] items-center justify-center rounded-xl border-2 border-dashed border-border text-tertiary transition-all duration-fast ease-apple group-hover/new:scale-105 group-hover/new:border-solid group-hover/new:border-accent group-hover/new:bg-accent/5 group-hover/new:text-accent"
+            >
+              <Plus :size="24" />
+            </div>
+            <div class="flex flex-col items-center gap-1">
+              <span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/renderer/pages/css/UploadPage.css

@@ -8,7 +8,7 @@
 
 /* Quick Actions Card */
 .quick-action-button {
-  @apply relative flex flex-1 cursor-pointer items-center gap-2 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-3.5 text-left font-[inherit] duration-medium ease-standard hover:-translate-y-[2px] hover:border-accent-hover hover:shadow-md focus-visible:focus-ring max-xs:px-3.5 max-xs:py-3 [.has-badge]:pr-12;
+  @apply relative flex flex-1 cursor-pointer items-center gap-2 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-3.5 text-left font-[inherit] duration-medium ease-standard hover:-translate-y-[2px] hover:border-accent-hover hover:shadow-md focus-visible:focus-ring max-xs:px-3.5 max-xs:py-3 ;
 }
 
 .filter-tab {