mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-05-06 20:42:57 +08:00
✨ Feature(custom): optimize UI of setting page
This commit is contained in:
Kuingsmile
@@ -28,12 +28,12 @@ const {
|
|||||||
text,
|
text,
|
||||||
disabled,
|
disabled,
|
||||||
active = false,
|
active = false,
|
||||||
icon,
|
icon = null,
|
||||||
iconSize = 16,
|
iconSize = 16,
|
||||||
type = 'primary',
|
type = 'primary',
|
||||||
} = defineProps<{
|
} = defineProps<{
|
||||||
text: string
|
text: string
|
||||||
icon: any
|
icon?: any
|
||||||
active?: boolean
|
active?: boolean
|
||||||
iconSize?: number
|
iconSize?: number
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
<input
|
<input
|
||||||
v-model="modelValue"
|
v-model="modelValue"
|
||||||
:type="type"
|
:type="type"
|
||||||
|
v-bind="$attrs"
|
||||||
class="box-border w-full rounded-md border border-border bg-bg-tertiary p-3 pr-10 text-sm text-main transition-all duration-200 ease-apple focus:border-accent focus:outline-none"
|
class="box-border w-full rounded-md border border-border bg-bg-tertiary p-3 pr-10 text-sm text-main transition-all duration-200 ease-apple focus:border-accent focus:outline-none"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
/>
|
/>
|
||||||
@@ -26,20 +27,25 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { EyeClosedIcon, EyeIcon } from 'lucide-vue-next'
|
import { EyeClosedIcon, EyeIcon } from 'lucide-vue-next'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
const modelValue = defineModel<string>()
|
const modelValue = defineModel<any>()
|
||||||
const type = ref('text')
|
const type = ref('text')
|
||||||
const {
|
const {
|
||||||
isPassword = false,
|
isPassword = false,
|
||||||
title,
|
title,
|
||||||
|
inputType = 'text',
|
||||||
placeholder,
|
placeholder,
|
||||||
} = defineProps<{
|
} = defineProps<{
|
||||||
isPassword?: boolean
|
isPassword?: boolean
|
||||||
title: string
|
title: string
|
||||||
|
inputType?: string
|
||||||
placeholder: string
|
placeholder: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (isPassword) {
|
if (isPassword) {
|
||||||
type.value = 'password'
|
type.value = 'password'
|
||||||
|
} else {
|
||||||
|
type.value = inputType
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
78
src/renderer/components/common/customModal.vue
Normal file
78
src/renderer/components/common/customModal.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/30"
|
||||||
|
:class="{ 'advanced-animation': enableAdvancedAnimation }"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="m-auto flex flex-col overflow-hidden rounded-lg border border-border-secondary bg-bg-tertiary shadow-xl"
|
||||||
|
:style="{
|
||||||
|
height: height || '85vh',
|
||||||
|
maxHeight: maxHeight || '85vh',
|
||||||
|
width: width || '90vw',
|
||||||
|
maxWidth: maxWidth || '90vw',
|
||||||
|
}"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4 max-md:p-2">
|
||||||
|
<slot name="titleBar"></slot>
|
||||||
|
<h3 v-if="title !== ''" class="m-0 text-xl font-semibold text-main">
|
||||||
|
{{ title }}
|
||||||
|
</h3>
|
||||||
|
<span v-if="description !== ''" class="mt-1 text-xl font-semibold text-secondary">
|
||||||
|
{{ description }}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
|
||||||
|
@click="visible = false"
|
||||||
|
>
|
||||||
|
<XIcon :size="20" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="no-scrollbar h-[calc(90vh-90px)] flex-1 overflow-y-auto max-md:p-4"
|
||||||
|
:style="{ height: height ? 'calc(' + height + ' - 90px)' : 'calc(85vh - 90px)' }"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div v-if="$slots.footer" class="flex justify-end gap-3 border-t border-border-secondary p-3">
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { XIcon } from 'lucide-vue-next'
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
|
||||||
|
import { getConfig } from '@/utils/dataSender'
|
||||||
|
|
||||||
|
const visible = defineModel<boolean>('visible')
|
||||||
|
|
||||||
|
const enableAdvancedAnimation = ref(false)
|
||||||
|
|
||||||
|
const {
|
||||||
|
title = '',
|
||||||
|
description = '',
|
||||||
|
height = '',
|
||||||
|
maxHeight = '',
|
||||||
|
width = '',
|
||||||
|
maxWidth = '',
|
||||||
|
} = defineProps<{
|
||||||
|
title?: string
|
||||||
|
description?: string
|
||||||
|
height?: string
|
||||||
|
width?: string
|
||||||
|
maxHeight?: string
|
||||||
|
maxWidth?: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
async function initConf() {
|
||||||
|
enableAdvancedAnimation.value = (await getConfig('settings.enableAdvancedAnimation')) || false
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
initConf()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -1,9 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-full rounded-lg border border-border bg-bg-secondary p-6 shadow-sm">
|
<div class="w-full rounded-lg border border-border bg-bg-secondary p-6 shadow-sm">
|
||||||
<div class="mb-2 flex items-start gap-3">
|
<div class="mb-2 flex items-start gap-3">
|
||||||
<div class="mb-2 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg bg-accent text-white">
|
<div
|
||||||
|
v-if="icon"
|
||||||
|
class="mb-2 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg bg-accent text-white"
|
||||||
|
>
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<component :is="icon" v-if="icon" :size="iconSize" />
|
<component :is="icon" :size="iconSize" />
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -27,15 +30,15 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const {
|
const {
|
||||||
title,
|
title = '',
|
||||||
description = '',
|
description = '',
|
||||||
icon,
|
icon = null,
|
||||||
iconSize = 20,
|
iconSize = 20,
|
||||||
onlyOneRow = false,
|
onlyOneRow = false,
|
||||||
} = defineProps<{
|
} = defineProps<{
|
||||||
title: string
|
title?: string
|
||||||
description?: string
|
description?: string
|
||||||
icon: any
|
icon?: any
|
||||||
iconSize?: number
|
iconSize?: number
|
||||||
onlyOneRow?: boolean
|
onlyOneRow?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|||||||
@@ -384,164 +384,141 @@
|
|||||||
|
|
||||||
<!-- Edit URL Modal -->
|
<!-- Edit URL Modal -->
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<div
|
<CustomModal
|
||||||
v-if="dialogVisible"
|
v-if="dialogVisible"
|
||||||
class="modal-overlay"
|
v-model:visible="dialogVisible"
|
||||||
:class="{ 'advanced-animation': enableAdvancedAnimation }"
|
:height="'auto'"
|
||||||
@click="dialogVisible = false"
|
:width="'40%'"
|
||||||
|
:title="t('pages.gallery.changeImageUrl')"
|
||||||
>
|
>
|
||||||
<div class="modal-container" @click.stop>
|
<div class="p-2">
|
||||||
<div class="modal-header">
|
<input v-model="imgInfo.imgUrl" type="text" class="form-input" placeholder="Enter new URL" />
|
||||||
<h3 class="m-0 text-xl font-semibold text-main">{{ t('pages.gallery.changeImageUrl') }}</h3>
|
|
||||||
<button class="modal-close-btn" @click="dialogVisible = false">
|
|
||||||
<XIcon :size="20" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<input v-model="imgInfo.imgUrl" type="text" class="form-input" placeholder="Enter new URL" />
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn-secondary" @click="dialogVisible = false">
|
|
||||||
{{ t('common.cancel') }}
|
|
||||||
</button>
|
|
||||||
<button class="btn-primary" @click="confirmModify">
|
|
||||||
{{ t('common.confirm') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<template #footer>
|
||||||
|
<CustomButton :type="'secondary'" :text="t('common.cancel')" @click="dialogVisible = false" />
|
||||||
|
<CustomButton :type="'primary'" :text="t('common.confirm')" @click="confirmModify" />
|
||||||
|
</template>
|
||||||
|
</CustomModal>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
||||||
<!-- Batch Rename Modal -->
|
<!-- Batch Rename Modal -->
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<div
|
<CustomModal
|
||||||
v-if="isShowBatchRenameDialog"
|
v-if="isShowBatchRenameDialog"
|
||||||
class="modal-overlay"
|
v-model:visible="isShowBatchRenameDialog"
|
||||||
:class="{ 'advanced-animation': enableAdvancedAnimation }"
|
:height="'auto'"
|
||||||
|
:width="'700px'"
|
||||||
|
:title="t('pages.gallery.batchEditUrl')"
|
||||||
>
|
>
|
||||||
<div class="modal-container" @click.stop>
|
<div class="p-6">
|
||||||
<div class="modal-header">
|
<div class="mb-6 last:mb-0">
|
||||||
<h3 class="m-0 text-xl font-semibold text-main">{{ t('pages.gallery.batchEditUrl') }}</h3>
|
<label class="form-label">
|
||||||
<button class="modal-close-btn" @click="isShowBatchRenameDialog = false">
|
{{ t('pages.gallery.regexPattern', { matched: matchedCount || 0 }) }}
|
||||||
<XIcon :size="20" />
|
</label>
|
||||||
</button>
|
<input
|
||||||
</div>
|
v-model="batchRenameMatch"
|
||||||
<div class="p-6">
|
type="text"
|
||||||
<div class="mb-6 last:mb-0">
|
class="form-input"
|
||||||
<label class="form-label">
|
:placeholder="t('pages.gallery.regexPatternPlaceholder')"
|
||||||
{{ t('pages.gallery.regexPattern', { matched: matchedCount || 0 }) }}
|
@focus="showMatchedUrls = true"
|
||||||
</label>
|
@blur="showMatchedUrls = false"
|
||||||
<input
|
/>
|
||||||
v-model="batchRenameMatch"
|
<div
|
||||||
type="text"
|
v-if="showMatchedUrls && matchedUrls.length > 0"
|
||||||
class="form-input"
|
class="absolute z-1000 mt-2 max-h-[300px] max-w-[650px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary p-0 shadow-md"
|
||||||
:placeholder="t('pages.gallery.regexPatternPlaceholder')"
|
>
|
||||||
@focus="showMatchedUrls = true"
|
<div class="border-b border-b-border-secondary bg-bg-secondary px-4 py-3 text-sm font-semibold text-main">
|
||||||
@blur="showMatchedUrls = false"
|
Matched URLs ({{ matchedUrls.length }}):
|
||||||
/>
|
</div>
|
||||||
<div
|
<div class="max-h-[240px] overflow-auto p-2">
|
||||||
v-if="showMatchedUrls && matchedUrls.length > 0"
|
|
||||||
class="absolute z-1000 mt-2 max-h-[300px] max-w-[650px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary p-0 shadow-md"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="border-b border-b-border-secondary bg-bg-secondary px-4 py-3 text-sm font-semibold text-main"
|
v-for="(url, index) in matchedUrls"
|
||||||
|
:key="index"
|
||||||
|
class="rounded-sm px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-sm break-all text-secondary transition-all duration-fast ease-apple hover:bg-surface-elevated"
|
||||||
>
|
>
|
||||||
Matched URLs ({{ matchedUrls.length }}):
|
{{ url }}
|
||||||
</div>
|
|
||||||
<div class="max-h-[240px] overflow-auto p-2">
|
|
||||||
<div
|
|
||||||
v-for="(url, index) in matchedUrls"
|
|
||||||
:key="index"
|
|
||||||
class="rounded-sm px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-sm break-all text-secondary transition-all duration-fast ease-apple hover:bg-surface-elevated"
|
|
||||||
>
|
|
||||||
{{ url }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-6 last:mb-0">
|
|
||||||
<label class="form-label">
|
|
||||||
{{ t('pages.gallery.replacedWith') }}
|
|
||||||
<button
|
|
||||||
class="flex h-[20px] w-[20px] cursor-pointer items-center justify-around rounded-full border-none bg-accent text-white transition-all duration-fast ease-apple hover:bg-accent-hover"
|
|
||||||
@click="showFormatInfo = !showFormatInfo"
|
|
||||||
>
|
|
||||||
<InfoIcon :size="16" />
|
|
||||||
</button>
|
|
||||||
</label>
|
|
||||||
<input v-model="batchRenameReplace" type="text" class="form-input" placeholder="Ex. {Y}-{m}-{uuid}" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Format Info Panel -->
|
|
||||||
<div v-if="showFormatInfo" class="mb-6 last:mb-0">
|
|
||||||
<label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
|
|
||||||
<div
|
|
||||||
class="mt-3 max-h-[400px] overflow-y-auto rounded-lg border border-border bg-bg-tertiary p-0 shadow-sm"
|
|
||||||
>
|
|
||||||
<div class="border-b border-b-border last:border-b-0">
|
|
||||||
<div class="category-title">
|
|
||||||
{{ t('pages.settings.upload.placeholder.categoryTime') }}
|
|
||||||
</div>
|
|
||||||
<div class="placeholder-grid">
|
|
||||||
<div
|
|
||||||
v-for="item in advancedRenameList.categoryTime"
|
|
||||||
:key="item.value"
|
|
||||||
class="placeholder-item"
|
|
||||||
@click="copyPlaceholder(item.value)"
|
|
||||||
>
|
|
||||||
<code>{{ item.value }}</code>
|
|
||||||
<span>{{ item.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="placeholder-category">
|
|
||||||
<div class="category-title">
|
|
||||||
{{ t('pages.settings.upload.placeholder.categoryHash') }}
|
|
||||||
</div>
|
|
||||||
<div class="placeholder-grid">
|
|
||||||
<div
|
|
||||||
v-for="item in advancedRenameList.categoryHash"
|
|
||||||
:key="item.value"
|
|
||||||
class="placeholder-item"
|
|
||||||
@click="copyPlaceholder(item.value)"
|
|
||||||
>
|
|
||||||
<code>{{ item.value }}</code>
|
|
||||||
<span>{{ item.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="placeholder-category">
|
|
||||||
<div class="category-title">
|
|
||||||
{{ t('pages.settings.upload.placeholder.categoryFile') }}
|
|
||||||
</div>
|
|
||||||
<div class="placeholder-grid">
|
|
||||||
<div
|
|
||||||
v-for="item in advancedRenameList.categoryFile"
|
|
||||||
:key="item.value"
|
|
||||||
class="placeholder-item"
|
|
||||||
@click="copyPlaceholder(item.value)"
|
|
||||||
>
|
|
||||||
<code>{{ item.value }}</code>
|
|
||||||
<span>{{ item.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn-secondary" @click="isShowBatchRenameDialog = false">
|
<div class="mb-6 last:mb-0">
|
||||||
{{ t('common.cancel') }}
|
<label class="form-label">
|
||||||
</button>
|
{{ t('pages.gallery.replacedWith') }}
|
||||||
<button class="btn-primary" @click="handleBatchRename()">
|
<button
|
||||||
{{ t('common.confirm') }}
|
class="flex h-[20px] w-[20px] cursor-pointer items-center justify-around rounded-full border-none bg-accent text-white transition-all duration-fast ease-apple hover:bg-accent-hover"
|
||||||
</button>
|
@click="showFormatInfo = !showFormatInfo"
|
||||||
|
>
|
||||||
|
<InfoIcon :size="16" />
|
||||||
|
</button>
|
||||||
|
</label>
|
||||||
|
<input v-model="batchRenameReplace" type="text" class="form-input" placeholder="Ex. {Y}-{m}-{uuid}" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Format Info Panel -->
|
||||||
|
<div v-if="showFormatInfo" class="mb-6 last:mb-0">
|
||||||
|
<label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
|
||||||
|
<div
|
||||||
|
class="mt-3 max-h-[400px] overflow-y-auto rounded-lg border border-border bg-bg-tertiary p-0 shadow-sm"
|
||||||
|
>
|
||||||
|
<div class="border-b border-b-border last:border-b-0">
|
||||||
|
<div class="category-title">
|
||||||
|
{{ t('pages.settings.upload.placeholder.categoryTime') }}
|
||||||
|
</div>
|
||||||
|
<div class="placeholder-grid">
|
||||||
|
<div
|
||||||
|
v-for="item in advancedRenameList.categoryTime"
|
||||||
|
:key="item.value"
|
||||||
|
class="placeholder-item"
|
||||||
|
@click="copyPlaceholder(item.value)"
|
||||||
|
>
|
||||||
|
<code>{{ item.value }}</code>
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="placeholder-category">
|
||||||
|
<div class="category-title">
|
||||||
|
{{ t('pages.settings.upload.placeholder.categoryHash') }}
|
||||||
|
</div>
|
||||||
|
<div class="placeholder-grid">
|
||||||
|
<div
|
||||||
|
v-for="item in advancedRenameList.categoryHash"
|
||||||
|
:key="item.value"
|
||||||
|
class="placeholder-item"
|
||||||
|
@click="copyPlaceholder(item.value)"
|
||||||
|
>
|
||||||
|
<code>{{ item.value }}</code>
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="placeholder-category">
|
||||||
|
<div class="category-title">
|
||||||
|
{{ t('pages.settings.upload.placeholder.categoryFile') }}
|
||||||
|
</div>
|
||||||
|
<div class="placeholder-grid">
|
||||||
|
<div
|
||||||
|
v-for="item in advancedRenameList.categoryFile"
|
||||||
|
:key="item.value"
|
||||||
|
class="placeholder-item"
|
||||||
|
@click="copyPlaceholder(item.value)"
|
||||||
|
>
|
||||||
|
<code>{{ item.value }}</code>
|
||||||
|
<span>{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<template #footer>
|
||||||
|
<CustomButton :type="'secondary'" :text="t('common.cancel')" @click="isShowBatchRenameDialog = false" />
|
||||||
|
<CustomButton :type="'primary'" :text="t('common.confirm')" @click="handleBatchRename" />
|
||||||
|
</template>
|
||||||
|
</CustomModal>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -582,6 +559,8 @@ import { useI18n } from 'vue-i18n'
|
|||||||
import { onBeforeRouteUpdate } from 'vue-router'
|
import { onBeforeRouteUpdate } from 'vue-router'
|
||||||
|
|
||||||
import ALLApi from '@/apis/allApi'
|
import ALLApi from '@/apis/allApi'
|
||||||
|
import CustomButton from '@/components/common/customButton.vue'
|
||||||
|
import CustomModal from '@/components/common/customModal.vue'
|
||||||
import MultiSelect from '@/components/common/multiSelect.vue'
|
import MultiSelect from '@/components/common/multiSelect.vue'
|
||||||
import SingleSelect from '@/components/common/singleSelect.vue'
|
import SingleSelect from '@/components/common/singleSelect.vue'
|
||||||
import VirtualScroller from '@/components/VirtualScroller.vue'
|
import VirtualScroller from '@/components/VirtualScroller.vue'
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -245,442 +245,400 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Image Process Dialog -->
|
<!-- Image Process Dialog -->
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<div
|
<CustomModal
|
||||||
v-if="imageProcessDialogVisible"
|
v-if="imageProcessDialogVisible"
|
||||||
class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/30"
|
v-model:visible="imageProcessDialogVisible"
|
||||||
:class="{ 'advanced-animation': enableAdvancedAnimation }"
|
:title="t('pages.imageProcess.title')"
|
||||||
@click.stop
|
:description="
|
||||||
|
PicBedId === '' ? t('pages.imageProcess.subtitle-Global') : t('pages.imageProcess.subtitle-PerPicbed')
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div
|
<ImageProcessSetting :config-id="PicBedId" :current-picbed-name="defaultPicBedG" />
|
||||||
class="m-auto flex h-[85vh] w-[90vw] flex-col overflow-hidden rounded-2xl border border-border-secondary bg-bg-tertiary shadow-xl"
|
</CustomModal>
|
||||||
@click.stop
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4 max-md:p-2"
|
|
||||||
>
|
|
||||||
<h3 class="m-0 text-xl font-semibold text-main">
|
|
||||||
{{ t('pages.imageProcess.title') }}
|
|
||||||
</h3>
|
|
||||||
<span class="mt-1 text-xl font-semibold text-secondary">
|
|
||||||
{{
|
|
||||||
PicBedId === '' ? t('pages.imageProcess.subtitle-Global') : t('pages.imageProcess.subtitle-PerPicbed')
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
|
|
||||||
@click="imageProcessDialogVisible = false"
|
|
||||||
>
|
|
||||||
<XIcon :size="20" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="no-scrollbar h-[calc(90vh-90px)] flex-1 overflow-y-auto max-md:p-4">
|
|
||||||
<ImageProcessSetting :config-id="PicBedId" :current-picbed-name="defaultPicBedG" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
</transition>
|
||||||
|
|
||||||
<!-- Task Queue Manager Modal -->
|
<!-- Task Queue Manager Modal -->
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<div
|
<CustomModal v-if="taskDialogVisible" v-model:visible="taskDialogVisible">
|
||||||
v-if="taskDialogVisible"
|
<template #titleBar>
|
||||||
class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/50 p-4 max-md:p-4"
|
<div class="flex flex-row items-center gap-4">
|
||||||
:class="{ 'advanced-animation': enableAdvancedAnimation }"
|
<h3 class="flex items-center gap-2.5 bg-clip-text text-xl font-bold tracking-tight text-main">
|
||||||
>
|
{{ t('pages.upload.taskQueue.title') }}
|
||||||
<div
|
</h3>
|
||||||
class="m-auto flex h-[85vh] max-h-[85vh] w-[90vw] max-w-[90vw] flex-col overflow-hidden rounded-2xl border border-border-secondary bg-bg-tertiary shadow-xl max-md:max-h-[90vh] max-md:w-[95vw]"
|
<span class="m-0 text-lg font-semibold text-secondary">
|
||||||
@click.stop
|
{{
|
||||||
>
|
t('pages.upload.taskQueue.stats', {
|
||||||
<div class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4">
|
completed: taskQueueStatus.stats.completed,
|
||||||
<div class="flex flex-row items-center gap-4">
|
total: taskQueueStatus.stats.total,
|
||||||
<h3 class="flex items-center gap-2.5 bg-clip-text text-xl font-bold tracking-tight text-main">
|
})
|
||||||
{{ t('pages.upload.taskQueue.title') }}
|
}}
|
||||||
</h3>
|
</span>
|
||||||
<span class="m-0 text-lg font-semibold text-secondary">
|
|
||||||
{{
|
|
||||||
t('pages.upload.taskQueue.stats', {
|
|
||||||
completed: taskQueueStatus.stats.completed,
|
|
||||||
total: taskQueueStatus.stats.total,
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
|
|
||||||
@click="taskDialogVisible = false"
|
|
||||||
>
|
|
||||||
<XIcon :size="20" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto">
|
<div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto">
|
||||||
<!-- Action Bar -->
|
<!-- Action Bar -->
|
||||||
<div
|
<div
|
||||||
class="flex flex-wrap items-center justify-between gap-4 border-b border-b-border px-5 py-4 max-md:flex-col max-md:items-stretch"
|
class="flex flex-wrap items-center justify-between gap-4 border-b border-b-border px-5 py-4 max-md:flex-col max-md:items-stretch"
|
||||||
>
|
>
|
||||||
<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">
|
||||||
<button
|
|
||||||
v-show="taskQueueStatus.tasks.length > 0"
|
|
||||||
class="flex cursor-pointer items-center justify-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"
|
|
||||||
@click="addFilesToTask"
|
|
||||||
>
|
|
||||||
<PlusIcon :size="16" />
|
|
||||||
<span>{{ t('pages.upload.taskQueue.addFiles') }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
|
|
||||||
class="flex cursor-pointer items-center gap-2 rounded-md bg-success 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"
|
|
||||||
@click="startTaskQueue"
|
|
||||||
>
|
|
||||||
<PlayIcon :size="16" />
|
|
||||||
<span>{{ t('pages.upload.taskQueue.start') }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
|
|
||||||
class="flex cursor-pointer items-center gap-2 rounded-md bg-warning 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"
|
|
||||||
@click="pauseTaskQueue"
|
|
||||||
>
|
|
||||||
<PauseIcon :size="16" />
|
|
||||||
<span>{{ t('pages.upload.taskQueue.pause') }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="taskQueueStatus.config.isPaused"
|
|
||||||
class="flex cursor-pointer items-center gap-2 rounded-md bg-success 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"
|
|
||||||
@click="resumeTaskQueue"
|
|
||||||
>
|
|
||||||
<PlayIcon :size="16" />
|
|
||||||
<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">
|
|
||||||
<button
|
|
||||||
v-if="taskQueueStatus.stats.failed > 0"
|
|
||||||
class="flex cursor-pointer items-center gap-2 rounded-md bg-warning 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"
|
|
||||||
@click="retryAllFailedTasks"
|
|
||||||
>
|
|
||||||
<RefreshCwIcon :size="16" />
|
|
||||||
<span>{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
|
|
||||||
class="flex cursor-pointer items-center gap-2 rounded-md bg-danger 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"
|
|
||||||
@click="cancelAllTasks"
|
|
||||||
>
|
|
||||||
<XIcon :size="16" />
|
|
||||||
<span>{{ t('pages.upload.taskQueue.cancelAll') }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="
|
|
||||||
taskQueueStatus.stats.completed > 0 ||
|
|
||||||
taskQueueStatus.stats.failed > 0 ||
|
|
||||||
taskQueueStatus.stats.cancelled > 0
|
|
||||||
"
|
|
||||||
class="flex cursor-pointer items-center gap-2 rounded-md bg-danger 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"
|
|
||||||
@click="clearFinishedTasks"
|
|
||||||
>
|
|
||||||
<Trash2Icon :size="16" />
|
|
||||||
<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"
|
|
||||||
:class="{ active: showTaskSettings }"
|
|
||||||
@click="showTaskSettings = !showTaskSettings"
|
|
||||||
>
|
|
||||||
<SettingsIcon :size="16" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Overall Progress -->
|
|
||||||
<div v-if="taskQueueStatus.stats.total > 0" class="border-b border-b-border p-5">
|
|
||||||
<div class="mb-3.5 flex items-center justify-between">
|
|
||||||
<span class="text-sm font-semibold text-main">{{ t('pages.upload.taskQueue.overallProgress') }}</span>
|
|
||||||
<span class="text-xl leading-1 font-bold text-accent">{{ overallProgressPercent }}%</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-2 overflow-hidden rounded-full bg-surface-elevated">
|
|
||||||
<div
|
|
||||||
class="h-full bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] shadow-sm transition-[width] duration-medium ease-standard"
|
|
||||||
:style="{ width: `${overallProgressPercent}%` }"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 flex flex-wrap justify-between gap-4">
|
|
||||||
<span
|
|
||||||
v-if="taskQueueStatus.stats.avgSpeed > 0"
|
|
||||||
class="flex items-center gap-2 py-1.5 text-xs text-secondary"
|
|
||||||
>
|
|
||||||
<ZapIcon :size="14" class="text-accent" />
|
|
||||||
{{ formatSpeed(taskQueueStatus.stats.avgSpeed) }}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="taskQueueStatus.stats.estimatedTimeMs > 0 && taskQueueStatus.config.isRunning"
|
|
||||||
class="flex items-center gap-2 py-1.5 text-xs text-secondary"
|
|
||||||
>
|
|
||||||
<ClockIcon :size="14" class="text-accent" />
|
|
||||||
{{ formatTime(taskQueueStatus.stats.estimatedTimeMs) }}
|
|
||||||
</span>
|
|
||||||
<span class="flex items-center gap-2 py-1.5 text-xs text-secondary">
|
|
||||||
<HardDriveIcon :size="14" class="text-accent" />
|
|
||||||
{{ formatSize(taskQueueStatus.stats.completedSize) }} /
|
|
||||||
{{ formatSize(taskQueueStatus.stats.totalSize) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Settings Panel -->
|
|
||||||
<transition name="settings-slide">
|
|
||||||
<div v-if="showTaskSettings" class="overflow-visible border-b border-b-border p-4">
|
|
||||||
<div class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] items-center gap-4 max-md:grid-cols-1">
|
|
||||||
<div class="flex min-w-0 flex-col gap-2">
|
|
||||||
<label class="m-0 flex items-center gap-2 text-sm font-medium text-main">
|
|
||||||
{{ t('pages.upload.taskQueue.interval') }}
|
|
||||||
</label>
|
|
||||||
<div class="flex items-center gap-2.5 max-sm:flex-row">
|
|
||||||
<input
|
|
||||||
v-model.number="uploadInterval"
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
max="99999"
|
|
||||||
step="1"
|
|
||||||
class="box-border w-full flex-1 rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
|
|
||||||
:disabled="taskQueueStatus.config.isRunning"
|
|
||||||
@change="updateInterval"
|
|
||||||
/>
|
|
||||||
<span class="bg-transparent px-1 py-2 text-sm font-semibold text-secondary">s</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex min-w-0 flex-col gap-2">
|
|
||||||
<label class="m-0 flex items-center gap-2 text-sm font-medium text-main">{{
|
|
||||||
t('pages.upload.taskQueue.maxRetry')
|
|
||||||
}}</label>
|
|
||||||
<input
|
|
||||||
v-model.number="maxRetryCount"
|
|
||||||
type="number"
|
|
||||||
min="0"
|
|
||||||
max="10"
|
|
||||||
step="1"
|
|
||||||
class="box-border w-full rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
|
|
||||||
@change="updateSettings"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
|
|
||||||
>
|
|
||||||
<label class="m-0 flex items-center gap-2 text-base font-semibold text-main" for="task-auto-start">
|
|
||||||
{{ t('pages.upload.taskQueue.autoStart') }}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="task-auto-start"
|
|
||||||
v-model="autoStart"
|
|
||||||
type="checkbox"
|
|
||||||
class="h-[16px] w-[16px] cursor-pointer accent-accent"
|
|
||||||
@change="updateSettings"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="m-0 flex items-center gap-2 text-base font-semibold text-main"
|
|
||||||
for="task-pause-on-error"
|
|
||||||
>
|
|
||||||
{{ t('pages.upload.taskQueue.pauseOnError') }}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
id="task-pause-on-error"
|
|
||||||
v-model="pauseOnError"
|
|
||||||
type="checkbox"
|
|
||||||
class="h-[16px] w-[16px] cursor-pointer accent-accent"
|
|
||||||
@change="updateSettings"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<!-- Filter & Search Bar -->
|
|
||||||
<div v-if="taskQueueStatus.tasks.length > 0" class="flex flex-col gap-2 border-b border-b-border p-5">
|
|
||||||
<div
|
|
||||||
class="flex items-center gap-2.5 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2.5 shadow-sm transition-all duration-fast ease-standard focus-within:border-accent focus-within:bg-white focus-within:shadow-md"
|
|
||||||
>
|
|
||||||
<SearchIcon :size="16" class="shrink-0 text-accent" />
|
|
||||||
<input
|
|
||||||
v-model="taskSearchQuery"
|
|
||||||
type="text"
|
|
||||||
class="flex border-0 bg-transparent text-sm text-main outline-0 placeholder:text-tertiary max-sm:max-w-none"
|
|
||||||
:placeholder="t('pages.upload.taskQueue.searchPlaceholder')"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap gap-2.5">
|
|
||||||
<button class="filter-tab" :class="{ active: taskFilter === 'all' }" @click="taskFilter = 'all'">
|
|
||||||
{{ t('pages.upload.taskQueue.filterAll') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="filter-tab"
|
|
||||||
:class="{ active: taskFilter === 'pending' }"
|
|
||||||
@click="taskFilter = 'pending'"
|
|
||||||
>
|
|
||||||
{{ t('pages.upload.taskQueue.filterPending') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="filter-tab"
|
|
||||||
:class="{ active: taskFilter === 'completed' }"
|
|
||||||
@click="taskFilter = 'completed'"
|
|
||||||
>
|
|
||||||
{{ t('pages.upload.taskQueue.filterCompleted') }}
|
|
||||||
</button>
|
|
||||||
<button class="filter-tab" :class="{ active: taskFilter === 'failed' }" @click="taskFilter = 'failed'">
|
|
||||||
{{ t('pages.upload.taskQueue.filterFailed') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Task List -->
|
|
||||||
<div v-if="taskQueueStatus.tasks.length > 0" class="min-h-[300px] flex-1 overflow-y-auto">
|
|
||||||
<TransitionGroup name="task" tag="div" class="flex flex-col">
|
|
||||||
<div
|
|
||||||
v-for="task in filteredTasks"
|
|
||||||
:key="task.id"
|
|
||||||
class="group/tasklist relative flex items-center justify-between gap-2 border-b border-b-border bg-surface px-5 py-4 transition-all duration-fast ease-standard last:border-b-0 hover:bg-surface-elevated hover:shadow-sm max-md:flex-col max-md:items-start max-md:gap-3"
|
|
||||||
:class="getTaskStatusClass(task.status)"
|
|
||||||
>
|
|
||||||
<div class="flex min-w-0 flex-1 flex-col gap-2.5">
|
|
||||||
<div class="flex items-center justify-between gap-3.5">
|
|
||||||
<div class="flex min-w-0 flex-1 items-center gap-2.5">
|
|
||||||
<span
|
|
||||||
class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main group-[.status-cancelled]/tasklist:text-tertiary group-[.status-cancelled]/tasklist:line-through group-[.status-completed]/tasklist:text-success group-[.status-failed]/tasklist:text-danger"
|
|
||||||
:title="task.filePath"
|
|
||||||
>{{ task.fileName }}</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="task.priority === 2"
|
|
||||||
class="flex shrink-0 items-center justify-center rounded-full bg-warning p-1 text-white"
|
|
||||||
>
|
|
||||||
<StarIcon :size="13" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="rounded-full px-2.5 py-1 text-xs font-semibold tracking-wider whitespace-nowrap uppercase [.status-cancelled]:bg-tertiary/15 [.status-cancelled]:text-tertiary [.status-cancelled]:line-through [.status-completed]:bg-success/15 [.status-completed]:text-success [.status-failed]:bg-danger/15 [.status-failed]:text-danger [.status-pending]:bg-accent/15 [.status-pending]:text-secondary [.status-uploading]:bg-primary/15 [.status-uploading]:text-primary"
|
|
||||||
:class="getTaskStatusClass(task.status)"
|
|
||||||
>
|
|
||||||
{{ getTaskStatusText(task.status) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap items-center gap-3">
|
|
||||||
<span v-if="task.fileSize > 0" class="flex items-center gap-1 text-[0.75rem] text-tertiary">
|
|
||||||
<HardDriveIcon :size="12" class="text-secondary" />
|
|
||||||
{{ formatSize(task.fileSize) }}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="task.uploadSpeed && task.status === 'uploading'"
|
|
||||||
class="flex items-center gap-1 text-[0.75rem] text-tertiary"
|
|
||||||
>
|
|
||||||
<ZapIcon :size="12" />
|
|
||||||
{{ formatSpeed(task.uploadSpeed) }}
|
|
||||||
</span>
|
|
||||||
<span v-if="task.retryCount > 0" class="flex items-center gap-1 text-[0.75rem] text-warning">
|
|
||||||
{{ t('pages.upload.taskQueue.retryCount', { count: task.retryCount }) }}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-if="task.error"
|
|
||||||
class="flex max-w-[200px] items-center gap-1 overflow-hidden text-[0.75rem] text-ellipsis whitespace-nowrap text-danger"
|
|
||||||
:title="task.error"
|
|
||||||
>
|
|
||||||
{{ task.error }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1.5">
|
|
||||||
<!-- Pending task actions -->
|
|
||||||
<template v-if="task.status === 'pending'">
|
|
||||||
<button
|
|
||||||
class="task-icon-btn"
|
|
||||||
:title="t('pages.upload.taskQueue.moveUp')"
|
|
||||||
@click="moveTaskUp(task.id)"
|
|
||||||
>
|
|
||||||
<ChevronUpIcon :size="16" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="task-icon-btn"
|
|
||||||
:title="t('pages.upload.taskQueue.moveDown')"
|
|
||||||
@click="moveTaskDown(task.id)"
|
|
||||||
>
|
|
||||||
<ChevronDownIcon :size="16" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="task-icon-btn"
|
|
||||||
:class="{ 'is-high': task.priority === 2 }"
|
|
||||||
:title="t('pages.upload.taskQueue.togglePriority')"
|
|
||||||
@click="toggleTaskPriority(task.id, task.priority)"
|
|
||||||
>
|
|
||||||
<StarIcon :size="16" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="task-icon-btn danger"
|
|
||||||
:title="t('pages.upload.taskQueue.cancelTask')"
|
|
||||||
@click="cancelTask(task.id)"
|
|
||||||
>
|
|
||||||
<XIcon :size="16" />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<!-- Failed task actions -->
|
|
||||||
<template v-if="task.status === 'failed'">
|
|
||||||
<button
|
|
||||||
class="task-icon-btn"
|
|
||||||
:title="t('pages.upload.taskQueue.retryTask')"
|
|
||||||
@click="retryTask(task.id)"
|
|
||||||
>
|
|
||||||
<RefreshCwIcon :size="16" />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="task-icon-btn danger"
|
|
||||||
:title="t('pages.upload.taskQueue.removeTask')"
|
|
||||||
@click="removeTask(task.id)"
|
|
||||||
>
|
|
||||||
<Trash2Icon :size="16" />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<!-- Completed/Cancelled task actions -->
|
|
||||||
<template v-if="task.status === 'completed' || task.status === 'cancelled'">
|
|
||||||
<button
|
|
||||||
class="task-icon-btn"
|
|
||||||
:title="t('pages.upload.taskQueue.removeTask')"
|
|
||||||
@click="removeTask(task.id)"
|
|
||||||
>
|
|
||||||
<Trash2Icon :size="16" />
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<!-- Status icon -->
|
|
||||||
<div class="flex h-[32px] w-[32px] items-center justify-center">
|
|
||||||
<CheckCircleIcon v-if="task.status === 'completed'" :size="18" class="text-success" />
|
|
||||||
<XCircleIcon v-if="task.status === 'failed'" :size="18" class="text-error" />
|
|
||||||
<LoaderIcon
|
|
||||||
v-if="task.status === 'uploading'"
|
|
||||||
:size="18"
|
|
||||||
class="animate-[spin_1s_linear_infinite] text-accent"
|
|
||||||
/>
|
|
||||||
<ClockIcon v-if="task.status === 'pending'" :size="18" class="text-tertiary" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TransitionGroup>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Empty State -->
|
|
||||||
<div v-else class="flex h-full flex-col items-center gap-4 bg-bg-tertiary px-8 py-12 text-center">
|
|
||||||
<ListTodoIcon class="text-accent opacity-90" :size="48" />
|
|
||||||
<h4 class="m-0 text-xl font-semibold text-main">{{ t('pages.upload.taskQueue.empty') }}</h4>
|
|
||||||
<p class="m-0 max-w-[400px] text-base text-secondary">{{ t('pages.upload.taskQueue.emptyHint') }}</p>
|
|
||||||
<button
|
<button
|
||||||
|
v-show="taskQueueStatus.tasks.length > 0"
|
||||||
class="flex cursor-pointer items-center justify-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 justify-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"
|
||||||
@click="addFilesToTask"
|
@click="addFilesToTask"
|
||||||
>
|
>
|
||||||
<PlusIcon :size="16" />
|
<PlusIcon :size="16" />
|
||||||
<span class="mt-0.5">{{ t('pages.upload.taskQueue.selectFiles') }}</span>
|
<span>{{ t('pages.upload.taskQueue.addFiles') }}</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
|
||||||
|
class="flex cursor-pointer items-center gap-2 rounded-md bg-success 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"
|
||||||
|
@click="startTaskQueue"
|
||||||
|
>
|
||||||
|
<PlayIcon :size="16" />
|
||||||
|
<span>{{ t('pages.upload.taskQueue.start') }}</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
|
||||||
|
class="flex cursor-pointer items-center gap-2 rounded-md bg-warning 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"
|
||||||
|
@click="pauseTaskQueue"
|
||||||
|
>
|
||||||
|
<PauseIcon :size="16" />
|
||||||
|
<span>{{ t('pages.upload.taskQueue.pause') }}</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="taskQueueStatus.config.isPaused"
|
||||||
|
class="flex cursor-pointer items-center gap-2 rounded-md bg-success 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"
|
||||||
|
@click="resumeTaskQueue"
|
||||||
|
>
|
||||||
|
<PlayIcon :size="16" />
|
||||||
|
<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">
|
||||||
|
<button
|
||||||
|
v-if="taskQueueStatus.stats.failed > 0"
|
||||||
|
class="flex cursor-pointer items-center gap-2 rounded-md bg-warning 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"
|
||||||
|
@click="retryAllFailedTasks"
|
||||||
|
>
|
||||||
|
<RefreshCwIcon :size="16" />
|
||||||
|
<span>{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
|
||||||
|
class="flex cursor-pointer items-center gap-2 rounded-md bg-danger 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"
|
||||||
|
@click="cancelAllTasks"
|
||||||
|
>
|
||||||
|
<XIcon :size="16" />
|
||||||
|
<span>{{ t('pages.upload.taskQueue.cancelAll') }}</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="
|
||||||
|
taskQueueStatus.stats.completed > 0 ||
|
||||||
|
taskQueueStatus.stats.failed > 0 ||
|
||||||
|
taskQueueStatus.stats.cancelled > 0
|
||||||
|
"
|
||||||
|
class="flex cursor-pointer items-center gap-2 rounded-md bg-danger 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"
|
||||||
|
@click="clearFinishedTasks"
|
||||||
|
>
|
||||||
|
<Trash2Icon :size="16" />
|
||||||
|
<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"
|
||||||
|
:class="{ active: showTaskSettings }"
|
||||||
|
@click="showTaskSettings = !showTaskSettings"
|
||||||
|
>
|
||||||
|
<SettingsIcon :size="16" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Overall Progress -->
|
||||||
|
<div v-if="taskQueueStatus.stats.total > 0" class="border-b border-b-border p-5">
|
||||||
|
<div class="mb-3.5 flex items-center justify-between">
|
||||||
|
<span class="text-sm font-semibold text-main">{{ t('pages.upload.taskQueue.overallProgress') }}</span>
|
||||||
|
<span class="text-xl leading-1 font-bold text-accent">{{ overallProgressPercent }}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2 overflow-hidden rounded-full bg-surface-elevated">
|
||||||
|
<div
|
||||||
|
class="h-full bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] shadow-sm transition-[width] duration-medium ease-standard"
|
||||||
|
:style="{ width: `${overallProgressPercent}%` }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 flex flex-wrap justify-between gap-4">
|
||||||
|
<span
|
||||||
|
v-if="taskQueueStatus.stats.avgSpeed > 0"
|
||||||
|
class="flex items-center gap-2 py-1.5 text-xs text-secondary"
|
||||||
|
>
|
||||||
|
<ZapIcon :size="14" class="text-accent" />
|
||||||
|
{{ formatSpeed(taskQueueStatus.stats.avgSpeed) }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="taskQueueStatus.stats.estimatedTimeMs > 0 && taskQueueStatus.config.isRunning"
|
||||||
|
class="flex items-center gap-2 py-1.5 text-xs text-secondary"
|
||||||
|
>
|
||||||
|
<ClockIcon :size="14" class="text-accent" />
|
||||||
|
{{ formatTime(taskQueueStatus.stats.estimatedTimeMs) }}
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center gap-2 py-1.5 text-xs text-secondary">
|
||||||
|
<HardDriveIcon :size="14" class="text-accent" />
|
||||||
|
{{ formatSize(taskQueueStatus.stats.completedSize) }} /
|
||||||
|
{{ formatSize(taskQueueStatus.stats.totalSize) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Panel -->
|
||||||
|
<transition name="settings-slide">
|
||||||
|
<div v-if="showTaskSettings" class="overflow-visible border-b border-b-border p-4">
|
||||||
|
<div class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] items-center gap-4 max-md:grid-cols-1">
|
||||||
|
<div class="flex min-w-0 flex-col gap-2">
|
||||||
|
<label class="m-0 flex items-center gap-2 text-sm font-medium text-main">
|
||||||
|
{{ t('pages.upload.taskQueue.interval') }}
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center gap-2.5 max-sm:flex-row">
|
||||||
|
<input
|
||||||
|
v-model.number="uploadInterval"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="99999"
|
||||||
|
step="1"
|
||||||
|
class="box-border w-full flex-1 rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
|
||||||
|
:disabled="taskQueueStatus.config.isRunning"
|
||||||
|
@change="updateInterval"
|
||||||
|
/>
|
||||||
|
<span class="bg-transparent px-1 py-2 text-sm font-semibold text-secondary">s</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex min-w-0 flex-col gap-2">
|
||||||
|
<label class="m-0 flex items-center gap-2 text-sm font-medium text-main">{{
|
||||||
|
t('pages.upload.taskQueue.maxRetry')
|
||||||
|
}}</label>
|
||||||
|
<input
|
||||||
|
v-model.number="maxRetryCount"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="10"
|
||||||
|
step="1"
|
||||||
|
class="box-border w-full rounded-md bg-surface-elevated px-3 py-2 text-sm text-main transition-all duration-fast ease-standard hover:border-accent hover:bg-surface focus:border-accent focus:bg-white focus:shadow-md focus:outline-0 disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-60"
|
||||||
|
@change="updateSettings"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
|
||||||
|
>
|
||||||
|
<label class="m-0 flex items-center gap-2 text-base font-semibold text-main" for="task-auto-start">
|
||||||
|
{{ t('pages.upload.taskQueue.autoStart') }}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="task-auto-start"
|
||||||
|
v-model="autoStart"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-[16px] w-[16px] cursor-pointer accent-accent"
|
||||||
|
@change="updateSettings"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex min-h-[40px] min-w-0 flex-row items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2.5 transition-all duration-fast ease-standard hover:bg-surface-elevated"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="m-0 flex items-center gap-2 text-base font-semibold text-main"
|
||||||
|
for="task-pause-on-error"
|
||||||
|
>
|
||||||
|
{{ t('pages.upload.taskQueue.pauseOnError') }}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="task-pause-on-error"
|
||||||
|
v-model="pauseOnError"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-[16px] w-[16px] cursor-pointer accent-accent"
|
||||||
|
@change="updateSettings"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<!-- Filter & Search Bar -->
|
||||||
|
<div v-if="taskQueueStatus.tasks.length > 0" class="flex flex-col gap-2 border-b border-b-border p-5">
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-2.5 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2.5 shadow-sm transition-all duration-fast ease-standard focus-within:border-accent focus-within:bg-white focus-within:shadow-md"
|
||||||
|
>
|
||||||
|
<SearchIcon :size="16" class="shrink-0 text-accent" />
|
||||||
|
<input
|
||||||
|
v-model="taskSearchQuery"
|
||||||
|
type="text"
|
||||||
|
class="flex border-0 bg-transparent text-sm text-main outline-0 placeholder:text-tertiary max-sm:max-w-none"
|
||||||
|
:placeholder="t('pages.upload.taskQueue.searchPlaceholder')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-2.5">
|
||||||
|
<button class="filter-tab" :class="{ active: taskFilter === 'all' }" @click="taskFilter = 'all'">
|
||||||
|
{{ t('pages.upload.taskQueue.filterAll') }}
|
||||||
|
</button>
|
||||||
|
<button class="filter-tab" :class="{ active: taskFilter === 'pending' }" @click="taskFilter = 'pending'">
|
||||||
|
{{ t('pages.upload.taskQueue.filterPending') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="filter-tab"
|
||||||
|
:class="{ active: taskFilter === 'completed' }"
|
||||||
|
@click="taskFilter = 'completed'"
|
||||||
|
>
|
||||||
|
{{ t('pages.upload.taskQueue.filterCompleted') }}
|
||||||
|
</button>
|
||||||
|
<button class="filter-tab" :class="{ active: taskFilter === 'failed' }" @click="taskFilter = 'failed'">
|
||||||
|
{{ t('pages.upload.taskQueue.filterFailed') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Task List -->
|
||||||
|
<div v-if="taskQueueStatus.tasks.length > 0" class="min-h-[300px] flex-1 overflow-y-auto">
|
||||||
|
<TransitionGroup name="task" tag="div" class="flex flex-col">
|
||||||
|
<div
|
||||||
|
v-for="task in filteredTasks"
|
||||||
|
:key="task.id"
|
||||||
|
class="group/tasklist relative flex items-center justify-between gap-2 border-b border-b-border bg-surface px-5 py-4 transition-all duration-fast ease-standard last:border-b-0 hover:bg-surface-elevated hover:shadow-sm max-md:flex-col max-md:items-start max-md:gap-3"
|
||||||
|
:class="getTaskStatusClass(task.status)"
|
||||||
|
>
|
||||||
|
<div class="flex min-w-0 flex-1 flex-col gap-2.5">
|
||||||
|
<div class="flex items-center justify-between gap-3.5">
|
||||||
|
<div class="flex min-w-0 flex-1 items-center gap-2.5">
|
||||||
|
<span
|
||||||
|
class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main group-[.status-cancelled]/tasklist:text-tertiary group-[.status-cancelled]/tasklist:line-through group-[.status-completed]/tasklist:text-success group-[.status-failed]/tasklist:text-danger"
|
||||||
|
:title="task.filePath"
|
||||||
|
>{{ task.fileName }}</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="task.priority === 2"
|
||||||
|
class="flex shrink-0 items-center justify-center rounded-full bg-warning p-1 text-white"
|
||||||
|
>
|
||||||
|
<StarIcon :size="13" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="rounded-full px-2.5 py-1 text-xs font-semibold tracking-wider whitespace-nowrap uppercase [.status-cancelled]:bg-tertiary/15 [.status-cancelled]:text-tertiary [.status-cancelled]:line-through [.status-completed]:bg-success/15 [.status-completed]:text-success [.status-failed]:bg-danger/15 [.status-failed]:text-danger [.status-pending]:bg-accent/15 [.status-pending]:text-secondary [.status-uploading]:bg-primary/15 [.status-uploading]:text-primary"
|
||||||
|
:class="getTaskStatusClass(task.status)"
|
||||||
|
>
|
||||||
|
{{ getTaskStatusText(task.status) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap items-center gap-3">
|
||||||
|
<span v-if="task.fileSize > 0" class="flex items-center gap-1 text-[0.75rem] text-tertiary">
|
||||||
|
<HardDriveIcon :size="12" class="text-secondary" />
|
||||||
|
{{ formatSize(task.fileSize) }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="task.uploadSpeed && task.status === 'uploading'"
|
||||||
|
class="flex items-center gap-1 text-[0.75rem] text-tertiary"
|
||||||
|
>
|
||||||
|
<ZapIcon :size="12" />
|
||||||
|
{{ formatSpeed(task.uploadSpeed) }}
|
||||||
|
</span>
|
||||||
|
<span v-if="task.retryCount > 0" class="flex items-center gap-1 text-[0.75rem] text-warning">
|
||||||
|
{{ t('pages.upload.taskQueue.retryCount', { count: task.retryCount }) }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="task.error"
|
||||||
|
class="flex max-w-[200px] items-center gap-1 overflow-hidden text-[0.75rem] text-ellipsis whitespace-nowrap text-danger"
|
||||||
|
:title="task.error"
|
||||||
|
>
|
||||||
|
{{ task.error }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1.5">
|
||||||
|
<!-- Pending task actions -->
|
||||||
|
<template v-if="task.status === 'pending'">
|
||||||
|
<button
|
||||||
|
class="task-icon-btn"
|
||||||
|
:title="t('pages.upload.taskQueue.moveUp')"
|
||||||
|
@click="moveTaskUp(task.id)"
|
||||||
|
>
|
||||||
|
<ChevronUpIcon :size="16" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="task-icon-btn"
|
||||||
|
:title="t('pages.upload.taskQueue.moveDown')"
|
||||||
|
@click="moveTaskDown(task.id)"
|
||||||
|
>
|
||||||
|
<ChevronDownIcon :size="16" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="task-icon-btn"
|
||||||
|
:class="{ 'is-high': task.priority === 2 }"
|
||||||
|
:title="t('pages.upload.taskQueue.togglePriority')"
|
||||||
|
@click="toggleTaskPriority(task.id, task.priority)"
|
||||||
|
>
|
||||||
|
<StarIcon :size="16" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="task-icon-btn danger"
|
||||||
|
:title="t('pages.upload.taskQueue.cancelTask')"
|
||||||
|
@click="cancelTask(task.id)"
|
||||||
|
>
|
||||||
|
<XIcon :size="16" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<!-- Failed task actions -->
|
||||||
|
<template v-if="task.status === 'failed'">
|
||||||
|
<button
|
||||||
|
class="task-icon-btn"
|
||||||
|
:title="t('pages.upload.taskQueue.retryTask')"
|
||||||
|
@click="retryTask(task.id)"
|
||||||
|
>
|
||||||
|
<RefreshCwIcon :size="16" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="task-icon-btn danger"
|
||||||
|
:title="t('pages.upload.taskQueue.removeTask')"
|
||||||
|
@click="removeTask(task.id)"
|
||||||
|
>
|
||||||
|
<Trash2Icon :size="16" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<!-- Completed/Cancelled task actions -->
|
||||||
|
<template v-if="task.status === 'completed' || task.status === 'cancelled'">
|
||||||
|
<button
|
||||||
|
class="task-icon-btn"
|
||||||
|
:title="t('pages.upload.taskQueue.removeTask')"
|
||||||
|
@click="removeTask(task.id)"
|
||||||
|
>
|
||||||
|
<Trash2Icon :size="16" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<!-- Status icon -->
|
||||||
|
<div class="flex h-[32px] w-[32px] items-center justify-center">
|
||||||
|
<CheckCircleIcon v-if="task.status === 'completed'" :size="18" class="text-success" />
|
||||||
|
<XCircleIcon v-if="task.status === 'failed'" :size="18" class="text-error" />
|
||||||
|
<LoaderIcon
|
||||||
|
v-if="task.status === 'uploading'"
|
||||||
|
:size="18"
|
||||||
|
class="animate-[spin_1s_linear_infinite] text-accent"
|
||||||
|
/>
|
||||||
|
<ClockIcon v-if="task.status === 'pending'" :size="18" class="text-tertiary" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TransitionGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Empty State -->
|
||||||
|
<div v-else class="flex h-full flex-col items-center gap-4 bg-bg-tertiary px-8 py-12 text-center">
|
||||||
|
<ListTodoIcon class="text-accent opacity-90" :size="48" />
|
||||||
|
<h4 class="m-0 text-xl font-semibold text-main">{{ t('pages.upload.taskQueue.empty') }}</h4>
|
||||||
|
<p class="m-0 max-w-[400px] text-base text-secondary">{{ t('pages.upload.taskQueue.emptyHint') }}</p>
|
||||||
|
<button
|
||||||
|
class="flex cursor-pointer items-center justify-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"
|
||||||
|
@click="addFilesToTask"
|
||||||
|
>
|
||||||
|
<PlusIcon :size="16" />
|
||||||
|
<span class="mt-0.5">{{ t('pages.upload.taskQueue.selectFiles') }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CustomModal>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -718,6 +676,7 @@ import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, useTemplateRef
|
|||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
import CustomModal from '@/components/common/customModal.vue'
|
||||||
import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
|
import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
|
||||||
import { usePicBed } from '@/hooks/useGlobal'
|
import { usePicBed } from '@/hooks/useGlobal'
|
||||||
import useMessage from '@/hooks/useMessage'
|
import useMessage from '@/hooks/useMessage'
|
||||||
@@ -787,7 +746,6 @@ const progress = ref(0)
|
|||||||
const showProgress = ref(false)
|
const showProgress = ref(false)
|
||||||
const showError = ref(false)
|
const showError = ref(false)
|
||||||
const pasteStyle = ref(IPasteStyle.MARKDOWN)
|
const pasteStyle = ref(IPasteStyle.MARKDOWN)
|
||||||
const enableAdvancedAnimation = ref(false)
|
|
||||||
const PicBedId = ref('')
|
const PicBedId = ref('')
|
||||||
const fileInput = useTemplateRef('fileInput')
|
const fileInput = useTemplateRef('fileInput')
|
||||||
const uploadInterval = ref(1000)
|
const uploadInterval = ref(1000)
|
||||||
@@ -987,7 +945,6 @@ function ipcSendFiles(files: FileList) {
|
|||||||
|
|
||||||
async function initConf() {
|
async function initConf() {
|
||||||
const settingConfig = await getConfig<any>('settings')
|
const settingConfig = await getConfig<any>('settings')
|
||||||
enableAdvancedAnimation.value = settingConfig?.enableAdvancedAnimation || false
|
|
||||||
pasteStyle.value = settingConfig?.pasteStyle || IPasteStyle.MARKDOWN
|
pasteStyle.value = settingConfig?.pasteStyle || IPasteStyle.MARKDOWN
|
||||||
pasteFormatList.value.Custom = settingConfig?.customLink || ''
|
pasteFormatList.value.Custom = settingConfig?.customLink || ''
|
||||||
useShortUrl.value = settingConfig?.useShortUrl || false
|
useShortUrl.value = settingConfig?.useShortUrl || false
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<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"
|
class="relative z-1 flex h-full w-full flex-col items-center justify-start gap-4 rounded-xl border-none px-4 py-6 shadow-sm"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md"
|
class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md"
|
||||||
@@ -34,108 +34,108 @@
|
|||||||
|
|
||||||
<!-- Config Grid -->
|
<!-- Config Grid -->
|
||||||
<div
|
<div
|
||||||
class="no-scrollbar flex w-full flex-1 items-start gap-4 overflow-auto rounded-2xl border border-border-secondary px-4 py-6 shadow-md"
|
class="flex w-full flex-1 items-center gap-4 overflow-hidden rounded-2xl border border-border-secondary px-4 py-6 shadow-md"
|
||||||
>
|
>
|
||||||
<div
|
<div class="no-scrollbar h-full w-full overflow-auto rounded-sm">
|
||||||
class="no-scrollbar grid h-auto 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="grid w-full grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-5 border-none p-1 max-md:gap-4">
|
||||||
>
|
<!-- Config Items -->
|
||||||
<!-- Config Items -->
|
<div
|
||||||
<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"
|
:class="{ 'is-active': defaultConfigId === item._id }"
|
||||||
:class="{ 'is-active': defaultConfigId === item._id }"
|
:style="{ '--delay': `${index * 50}ms` }"
|
||||||
:style="{ '--delay': `${index * 50}ms` }"
|
@click="() => selectItem(item._id)"
|
||||||
@click="() => selectItem(item._id)"
|
>
|
||||||
>
|
<!-- Card Header -->
|
||||||
<!-- Card Header -->
|
<div class="relative z-1 flex flex-1 items-start justify-between">
|
||||||
<div class="relative z-1 flex flex-1 items-start justify-between">
|
<div
|
||||||
<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="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 }"
|
||||||
:class="{ 'is-active': defaultConfigId === item._id }"
|
>
|
||||||
>
|
<Cloud :size="20" />
|
||||||
<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>
|
</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"
|
<!-- Card Body -->
|
||||||
>
|
<div class="relative z-1 flex-1">
|
||||||
<button
|
<h3 class="mx-0 mt-0 mb-2 text-base leading-[1.4] font-semibold tracking-tight text-main">
|
||||||
class="action-btn"
|
{{ item._configName }}
|
||||||
:title="
|
</h3>
|
||||||
isConfigFavorited(item._id)
|
<div class="flex items-center gap-1.5 text-xs text-tertiary">
|
||||||
? t('pages.uploaderConfig.removeFromFavorites')
|
<div class="flex items-center gap-1">
|
||||||
: t('pages.uploaderConfig.addToFavorites')
|
<Clock :size="12" />
|
||||||
"
|
<span>{{ formatTime(item._updatedAt) }}</span>
|
||||||
@click.stop="() => toggleConfigFavorite(item._id, item._configName)"
|
</div>
|
||||||
>
|
<div
|
||||||
<Heart :size="14" :fill="isConfigFavorited(item._id) ? 'var(--color-warning)' : 'none'" />
|
v-if="defaultConfigId === item._id"
|
||||||
</button>
|
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"
|
||||||
<button class="action-btn" :title="t('pages.uploaderConfig.edit')" @click.stop="openEditPage(item._id)">
|
>
|
||||||
<Pencil :size="14" />
|
<CheckCircle2 :size="15" />
|
||||||
</button>
|
<span>{{ t('pages.uploaderConfig.selected') }}</span>
|
||||||
<button
|
</div>
|
||||||
class="action-btn"
|
<div
|
||||||
:title="t('pages.uploaderConfig.duplicate')"
|
v-else
|
||||||
@click.stop="() => duplicateConfig(item._id)"
|
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"
|
||||||
>
|
>
|
||||||
<Copy :size="14" />
|
<Circle :size="14" />
|
||||||
</button>
|
<span>{{ t('pages.uploaderConfig.clickToSelect') }}</span>
|
||||||
<button
|
</div>
|
||||||
class="action-btn danger"
|
</div>
|
||||||
: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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card Body -->
|
<div
|
||||||
<div class="relative z-1 flex-1">
|
key="add-new"
|
||||||
<h3 class="mx-0 mt-0 mb-2 text-base leading-[1.4] font-semibold tracking-tight text-main">
|
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"
|
||||||
{{ item._configName }}
|
@click="addNewConfig"
|
||||||
</h3>
|
>
|
||||||
<div class="flex items-center gap-1.5 text-xs text-tertiary">
|
<div class="flex flex-col items-center gap-3 transition-all duration-fast ease-apple">
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<Clock :size="12" />
|
|
||||||
<span>{{ formatTime(item._updatedAt) }}</span>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
v-if="defaultConfigId === item._id"
|
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"
|
||||||
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" />
|
<Plus :size="24" />
|
||||||
<span>{{ t('pages.uploaderConfig.selected') }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="flex flex-col items-center gap-1">
|
||||||
v-else
|
<span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user