GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-09-04 23:19:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kuingsmile
2026-01-20 21:02:34 +08:00
parent 11ac8b37b4
commit 4cfa61c040
5 changed files with 153 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/index.css
+4 -4
View File
@@ -159,13 +159,13 @@
@keyframes badge-pulse {
0%,
100% {
transform: translateY(-50%) scale(1);
box-shadow: 0 2px 6px rgb(0 122 255 / 40%);
transform: scale(1);
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
50% {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 2px 6px rgb(0 122 255 / 60%);
transform: scale(1.1);
box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
}
src/renderer/pages/Gallery.vue
+7 -9
View File
@@ -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">
{{ `${t('pages.gallery.delete')}${selectedCount > 0 ? ` (${selectedCount})` : ''}` }}</span
>
<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
+12 -12
View File
@@ -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
+16 -20
View File
@@ -1,13 +1,11 @@
<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-[95%] w-[95%] flex-col gap-6 overflow-auto rounded-xl border-none p-4 shadow-sm"
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"
>
<!-- Hero Header Section -->
<header
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"
<div
class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md"
>
<div class="flex items-center gap-4 max-md:flex-col max-md:justify-center max-md:text-center">
<div class="flex flex-wrap items-center gap-4 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]"
>
@@ -29,21 +27,20 @@
@click="setDefaultPicBed(type)"
>
<Star :size="16" />
<span class="mt-1">{{ t('pages.uploaderConfig.setAsDefault') }}</span>
<span>{{ t('pages.uploaderConfig.setAsDefault') }}</span>
</button>
</div>
</header>
</div>
<!-- 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"
<div
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"
>
<div
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))]"
>
<!-- Config Items -->
<article
<div
v-for="(item, index) in curConfigList"
:key="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"
@@ -121,9 +118,9 @@
</div>
</div>
</div>
</article>
</div>
<article
<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"
@@ -138,9 +135,8 @@
<span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
</div>
</div>
</article>
</TransitionGroup>
</main>
</div>
</div>
</div>
</div>
</template>
src/renderer/pages/css/UploadPage.css
+1 -1
View File
@@ -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 {