mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-05-06 20:42:57 +08:00
🐛 Fix(custom): fix task list length badge postion
This commit is contained in:
Kuingsmile
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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 -->
|
||||
<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 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"
|
||||
<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]"
|
||||
>
|
||||
<!-- Config Items -->
|
||||
<article
|
||||
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"
|
||||
:class="{ 'is-active': defaultConfigId === item._id }"
|
||||
:style="{ '--delay': `${index * 50}ms` }"
|
||||
@click="() => selectItem(item._id)"
|
||||
>
|
||||
<!-- Card Header -->
|
||||
<div class="relative z-1 flex flex-1 items-start justify-between">
|
||||
<div
|
||||
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 }"
|
||||
>
|
||||
<Cloud :size="20" />
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<button
|
||||
class="action-btn"
|
||||
: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>
|
||||
<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>{{ t('pages.uploaderConfig.setAsDefault') }}</span>
|
||||
</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
|
||||
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>
|
||||
<!-- Config Grid -->
|
||||
<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 -->
|
||||
<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"
|
||||
:class="{ 'is-active': defaultConfigId === item._id }"
|
||||
:style="{ '--delay': `${index * 50}ms` }"
|
||||
@click="() => selectItem(item._id)"
|
||||
>
|
||||
<!-- Card Header -->
|
||||
<div class="relative z-1 flex flex-1 items-start justify-between">
|
||||
<div
|
||||
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 }"
|
||||
>
|
||||
<Cloud :size="20" />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
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"
|
||||
<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"
|
||||
>
|
||||
<button
|
||||
class="action-btn"
|
||||
:title="
|
||||
isConfigFavorited(item._id)
|
||||
? t('pages.uploaderConfig.removeFromFavorites')
|
||||
: t('pages.uploaderConfig.addToFavorites')
|
||||
"
|
||||
@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">
|
||||
<span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
|
||||
<div
|
||||
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>
|
||||
</TransitionGroup>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user