GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-06 20:42:57 +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

8
src/renderer/index.css
View File

@@ -159,13 +159,13 @@
@keyframes badge-pulse { @keyframes badge-pulse {
0%, 0%,
100% { 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% { 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);
} }
} }

16
src/renderer/pages/Gallery.vue
View File

@@ -203,7 +203,7 @@
<div class="flex flex-1 flex-wrap gap-3"> <div class="flex flex-1 flex-wrap gap-3">
<button class="action-btn copy-btn" :class="{ active: isMultiple(choosedList) }" @click="multiCopy"> <button class="action-btn copy-btn" :class="{ active: isMultiple(choosedList) }" @click="multiCopy">
<ClipboardIcon :size="16" /> <ClipboardIcon :size="16" />
<span class="mt-1"> {{ t('pages.gallery.copy') }}</span> <span> {{ t('pages.gallery.copy') }}</span>
</button> </button>
<button <button
class="action-btn edit-btn" class="action-btn edit-btn"
@@ -211,17 +211,15 @@
@click="() => (isShowBatchRenameDialog = true)" @click="() => (isShowBatchRenameDialog = true)"
> >
<EditIcon :size="16" /> <EditIcon :size="16" />
<span class="mt-1"> {{ t('pages.gallery.edit') }}</span> <span> {{ t('pages.gallery.edit') }}</span>
</button> </button>
<button class="action-btn delete-btn" :class="{ active: isMultiple(choosedList) }" @click="multiRemove"> <button class="action-btn delete-btn" :class="{ active: isMultiple(choosedList) }" @click="multiRemove">
<TrashIcon :size="16" /> <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>
<button class="action-btn select-btn" :class="{ active: filterList.length > 0 }" @click="toggleSelectAll"> <button class="action-btn select-btn" :class="{ active: filterList.length > 0 }" @click="toggleSelectAll">
<CheckSquareIcon :size="16" /> <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> </button>
</div> </div>
</div> </div>
@@ -341,7 +339,7 @@
<div class="absolute inset-0 bg-black/50" :class="{ 'advanced-animation': enableAdvancedAnimation }" /> <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"> <div class="relative max-h-[90vh] max-w-[90vw] overflow-hidden rounded-xl bg-surface shadow-lg">
<button <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" @click="handleClose"
> >
<XIcon :size="24" /> <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"> <h3 class="m-0 mr-4 flex-1 overflow-hidden text-base font-semibold text-ellipsis text-main">
{{ currentPreviewImage?.intro }} {{ currentPreviewImage?.intro }}
</h3> </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 }} {{ gallerySliderControl.index + 1 }} / {{ filterList.length }}
</div> </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') }} {{ t('pages.gallery.previewHelp') }}
</div> </div>
</div> </div>

24
src/renderer/pages/Upload.vue
View File

@@ -85,10 +85,10 @@
@click="handleImageProcessSingle" @click="handleImageProcessSingle"
> >
<Settings :size="16" /> <Settings :size="16" />
<span class="mt-1">{{ t('pages.upload.imageProcessNameSingle') }}</span> <span>{{ t('pages.upload.imageProcessNameSingle') }}</span>
</button> </button>
<button class="segmented-button" :title="t('pages.upload.imageProcessName')" @click="handleImageProcess"> <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> </button>
</div> </div>
<button <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"> <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"> <button class="quick-action-button" @click="uploadClipboardFiles">
<ClipboardIcon class="shrink-0 text-accent" :size="15" /> <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>
<button class="quick-action-button" @click="uploadURLFiles"> <button class="quick-action-button" @click="uploadURLFiles">
<LinkIcon class="shrink-0 text-accent" :size="15" /> <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>
<button <button
class="quick-action-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 class="mt-1 text-sm font-medium text-secondary">{{ t('pages.upload.taskUpload') }}</span>
<span <span
v-if="taskQueueStatus.tasks.length > 0" 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 }} {{ taskQueueStatus.tasks.length }}
</span> </span>
@@ -325,7 +325,7 @@
@click="addFilesToTask" @click="addFilesToTask"
> >
<PlusIcon :size="16" /> <PlusIcon :size="16" />
<span class="mt-1">{{ t('pages.upload.taskQueue.addFiles') }}</span> <span>{{ t('pages.upload.taskQueue.addFiles') }}</span>
</button> </button>
<button <button
v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0" v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
@@ -333,7 +333,7 @@
@click="startTaskQueue" @click="startTaskQueue"
> >
<PlayIcon :size="16" /> <PlayIcon :size="16" />
<span class="mt-1">{{ t('pages.upload.taskQueue.start') }}</span> <span>{{ t('pages.upload.taskQueue.start') }}</span>
</button> </button>
<button <button
v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused" v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
@@ -341,7 +341,7 @@
@click="pauseTaskQueue" @click="pauseTaskQueue"
> >
<PauseIcon :size="16" /> <PauseIcon :size="16" />
<span class="mt-1">{{ t('pages.upload.taskQueue.pause') }}</span> <span>{{ t('pages.upload.taskQueue.pause') }}</span>
</button> </button>
<button <button
v-if="taskQueueStatus.config.isPaused" v-if="taskQueueStatus.config.isPaused"
@@ -349,7 +349,7 @@
@click="resumeTaskQueue" @click="resumeTaskQueue"
> >
<PlayIcon :size="16" /> <PlayIcon :size="16" />
<span class="mt-1">{{ t('pages.upload.taskQueue.resume') }}</span> <span>{{ t('pages.upload.taskQueue.resume') }}</span>
</button> </button>
</div> </div>
<div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center"> <div class="flex flex-wrap items-center gap-2.5 max-md:w-full max-md:justify-center">
@@ -359,7 +359,7 @@
@click="retryAllFailedTasks" @click="retryAllFailedTasks"
> >
<RefreshCwIcon :size="16" /> <RefreshCwIcon :size="16" />
<span class="mt-1">{{ t('pages.upload.taskQueue.retryAllFailed') }}</span> <span>{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
</button> </button>
<button <button
v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0" v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
@@ -367,7 +367,7 @@
@click="cancelAllTasks" @click="cancelAllTasks"
> >
<XIcon :size="16" /> <XIcon :size="16" />
<span class="mt-1">{{ t('pages.upload.taskQueue.cancelAll') }}</span> <span>{{ t('pages.upload.taskQueue.cancelAll') }}</span>
</button> </button>
<button <button
v-if=" v-if="
@@ -379,7 +379,7 @@
@click="clearFinishedTasks" @click="clearFinishedTasks"
> >
<Trash2Icon :size="16" /> <Trash2Icon :size="16" />
<span class="mt-1">{{ t('pages.upload.taskQueue.clearFinished') }}</span> <span>{{ t('pages.upload.taskQueue.clearFinished') }}</span>
</button> </button>
<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" 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"

36
src/renderer/pages/UploaderConfigPage.vue
View File

@@ -1,13 +1,11 @@
<template> <template>
<div class="relative no-scrollbar flex h-full min-h-full items-center justify-center">
<div <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 --> <div
<header class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md"
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 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 <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]" 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)" @click="setDefaultPicBed(type)"
> >
<Star :size="16" /> <Star :size="16" />
<span class="mt-1">{{ t('pages.uploaderConfig.setAsDefault') }}</span> <span>{{ t('pages.uploaderConfig.setAsDefault') }}</span>
</button> </button>
</div> </div>
</header> </div>
<!-- Main Content Area -->
<main class="flex-1">
<!-- Config Grid --> <!-- Config Grid -->
<TransitionGroup <div
name="config-list" 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"
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 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 --> <!-- Config Items -->
<article <div
v-for="(item, index) in curConfigList" v-for="(item, index) in curConfigList"
:key="item._id" :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" 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> </div>
</div> </div>
</article> </div>
<article <div
key="add-new" 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" 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" @click="addNewConfig"
@@ -138,9 +135,8 @@
<span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span> <span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
</div> </div>
</div> </div>
</article> </div>
</TransitionGroup> </div>
</main>
</div> </div>
</div> </div>
</template> </template>

2
src/renderer/pages/css/UploadPage.css
View File

@@ -8,7 +8,7 @@
/* Quick Actions Card */ /* Quick Actions Card */
.quick-action-button { .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 { .filter-tab {