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

🚧 WIP(custom): migrate to tailwindcss

Browse Source
This commit is contained in:
Kuingsmile
2026-01-19 13:16:56 +08:00
parent 55c0026e8c
commit ddb89496aa
13 changed files with 811 additions and 2632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/renderer/App.vue
View File

@@ -1,7 +1,9 @@
<template>
<div id="app" :key="pageReloadCount">
<div id="layout" :key="pageReloadCount" class="h-full select-none">
<router-view />
<div class="bg-images" />
<div
class="pointer-events-none absolute inset-0 -z-1 bg-custom bg-cover bg-fixed bg-center bg-no-repeat opacity-custom blur-custom"
/>
<UIServiceProvider />
</div>
</template>
@@ -27,30 +29,3 @@ export default {
name: 'PicList',
}
</script>
<style lang="stylus">
body,
html
padding 0
margin 0
height 100%
#app
height 100%
user-select none
.bg-images {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-image: var(--background-image);
background-repeat: no-repeat, no-repeat;
opacity: var(--background-image-opacity);
filter: var(--background-blur);
z-index: -1;
pointer-events: none;
}
</style>

53
src/renderer/assets/css/theme.css Normal file
View File

@@ -0,0 +1,53 @@
@theme {
--background-image-custom: var(--background-image, none);
--blur-custom: var(--background-blur, none);
--opacity-custom: var(--background-image-opacity);
--color-main: var(--color-text-primary);
--color-secondary: var(--color-text-secondary);
--color-tertiary: var(--color-text-tertiary);
--color-bg: var(--color-background-primary);
--color-bg-secondary: var(--color-background-secondary);
--color-bg-tertiary: var(--color-background-tertiary);
--color-surface: var(--color-surface);
--color-surface-elevated: var(--color-surface-elevated);
--color-border: var(--color-border);
--color-border-secondary: var(--color-border-secondary);
--color-primary: var(--color-primary);
--color-primary-hover: var(--color-primary-hover);
--color-accent: var(--color-accent);
--color-accent-hover: var(--color-accent-hover);
--color-success: var(--color-success);
--color-warning: var(--color-warning);
--color-danger: var(--color-danger);
--color-error: var(--color-error);
/* shadows */
--shadow-sm: var(--shadow-sm);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
/* radius */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-round: 50%;
/* transition */
--transition-duration-fast: 150ms;
--transition-duration-medium: 250ms;
--transition-duration-slow: 350ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-apple: cubic-bezier(0.3, 1, 0.3, 1);
/* breakpoints */
--breakpoint-xs: 480px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}

23
src/renderer/assets/css/utilities.css Normal file
View File

@@ -0,0 +1,23 @@
/* stylelint-disable nesting-selector-no-missing-scoping-root */
@import 'tailwindcss' reference;
@utility no-scrollbar {
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
@utility advanced-animation {
@apply border border-black/30 bg-black/20 shadow-[0_8px_32px_rgba(0,0,0,0.1)] backdrop-blur-[5px] backdrop-saturate-[1.8];
}
@utility focus-ring {
&:focus-visible {
@apply outline-2 outline-offset-2 outline-accent outline-solid;
}
}

173
src/renderer/index.css Normal file
View File

@@ -0,0 +1,173 @@
@import 'tailwindcss';
@import './assets/css/theme.css';
@import './assets/css/utilities.css';
@layer base {
body {
@apply m-0 h-full overflow-hidden bg-bg p-0 font-[inherit] text-main;
}
html {
@apply m-0 h-full p-0;
}
:focus {
@apply outline-none;
}
:focus-visible {
@apply outline-2 outline-offset-2 outline-accent outline-solid;
}
::selection {
@apply bg-accent/20 text-main;
}
::-webkit-scrollbar {
@apply h-3 w-2;
}
::-webkit-scrollbar-track {
@apply bg-transparent;
}
::-webkit-scrollbar-thumb {
@apply rounded-sm bg-accent/50 transition-colors duration-fast ease-standard;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-accent/70;
}
::-webkit-scrollbar-corner {
@apply bg-bg;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
:root,
.light,
[data-theme='light'] {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
--background-image: none;
--background-image-opacity: 1;
--color-text-primary: #1d1d1f;
--color-text-secondary: #6e6e73;
--color-text-tertiary: #86868b;
--color-background-primary: #ffffff;
--color-background-secondary: #f5f5f7;
--color-background-tertiary: #fbfbfd;
--color-surface: rgb(255 255 255 / 80%);
--color-surface-elevated: rgb(255 255 255 / 95%);
--color-border: rgb(0 0 0 / 10%);
--color-border-secondary: rgb(0 0 0 / 5%);
--color-primary: #6366f1;
--color-primary-hover: #4f46e5;
--color-accent: #007aff;
--color-accent-hover: #3b82f6;
--color-success: #34c759;
--color-warning: #f1930f;
--color-danger: #ff3b30;
--color-error: #cb2431;
--shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
--shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
--shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
--shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
}
:root.dark {
--color-text-primary: #f5f5f7;
--color-text-secondary: #a1a1a6;
--color-text-tertiary: #86868b;
--color-background-primary: #000000;
--color-background-secondary: #1c1c1e;
--color-background-tertiary: #2c2c2e;
--color-surface: rgb(28 28 30 / 80%);
--color-surface-elevated: rgb(44 44 46 / 95%);
--color-border: rgb(255 255 255 / 10%);
--color-border-secondary: rgb(255 255 255 / 5%);
--color-primary: #6366f1;
--color-primary-hover: #818cf8;
--color-accent: #0a84ff;
--color-accent-hover: #409cff;
--color-success: #34c759;
--color-warning: #f1930f;
--color-danger: #ff3b30;
--color-error: #cb2431;
--shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
--shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
--shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
--shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
}
@keyframes badge-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes fade-in {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes badge-pulse {
0%,
100% {
transform: translateY(-50%) scale(1);
box-shadow: 0 2px 6px rgb(0 122 255 / 40%);
}
50% {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 2px 6px rgb(0 122 255 / 60%);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}

183
src/renderer/layouts/Main.vue
View File

@@ -1,10 +1,10 @@
<template>
<div id="main" class="app-container">
<div id="main" class="relative flex h-screen overflow-hidden bg-bg pt-[32px]">
<InputBoxDialog />
<TitleBar />
<Navigation />
<main class="main-content">
<div class="content-container">
<main class="relative z-1 no-scrollbar h-screen flex-1 overflow-scroll bg-bg-secondary">
<div class="m-0 h-full max-w-none">
<router-view v-slot="{ Component, route }">
<transition name="page" mode="out-in">
<keep-alive :include="keepAlivePages">
@@ -34,180 +34,3 @@ const keepAlivePages = $router
<script lang="ts">
export default { name: 'MainPage' }
</script>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
--background-image: none;
--background-image-opacity: 1;
--color-text-primary: #1d1d1f;
--color-text-secondary: #6e6e73;
--color-text-tertiary: #86868b;
--color-background-primary: #ffffff;
--color-background-secondary: #f5f5f7;
--color-background-tertiary: #fbfbfd;
--color-surface: rgb(255 255 255 / 80%);
--color-surface-elevated: rgb(255 255 255 / 95%);
--color-border: rgb(0 0 0 / 10%);
--color-border-secondary: rgb(0 0 0 / 5%);
--color-primary: #6366f1;
--color-primary-hover: #4f46e5;
--color-accent: #007aff;
--color-accent-hover: #3b82f6;
--color-success: #34c759;
--color-warning: #f1930f;
--color-danger: #ff3b30;
--color-error: #cb2431;
--shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
--shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
--shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
--shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-round: 50%;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce-md: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-bounce-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root.dark {
--color-text-primary: #f5f5f7;
--color-text-secondary: #a1a1a6;
--color-text-tertiary: #86868b;
--color-background-primary: #000000;
--color-background-secondary: #1c1c1e;
--color-background-tertiary: #2c2c2e;
--color-surface: rgb(28 28 30 / 80%);
--color-surface-elevated: rgb(44 44 46 / 95%);
--color-border: rgb(255 255 255 / 10%);
--color-border-secondary: rgb(255 255 255 / 5%);
--color-primary: #6366f1;
--color-primary-hover: #818cf8;
--color-accent: #0a84ff;
--color-accent-hover: #409cff;
--color-success: #34c759;
--color-warning: #f1930f;
--color-danger: #ff3b30;
--color-error: #cb2431;
--shadow-sm: 0 1px 3px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
--shadow-md: 0 4px 6px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 6%);
--shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 5%);
--shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 10px 10px rgb(0 0 0 / 4%);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-round: 50%;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce-md: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-bounce-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
overflow: hidden;
font-family: inherit;
color: var(--color-text-primary);
background-color: var(--color-background-primary);
}
.app-container {
position: relative;
display: flex;
overflow: hidden;
padding-top: 32px;
height: 100vh;
background-color: var(--color-background-primary);
}
.main-content {
position: relative;
z-index: 1;
overflow: scroll;
height: 100vh;
background-color: var(--color-background-secondary);
flex: 1;
scrollbar-width: none;
-ms-overflow-style: none;
}
.main-content::-webkit-scrollbar {
display: none;
}
.content-container {
margin: 0;
max-width: none;
height: 100%;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border: 3px solid var(--color-background-primary);
border-radius: var(--radius-sm);
background-color: var(--color-border);
transition: background-color var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-text-tertiary);
}
::-webkit-scrollbar-corner {
background: var(--color-background-primary);
}
::selection {
color: var(--color-text-primary);
background-color: color-mix(in srgb, var(--color-accent), transparent 80%);
}
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>

1
src/renderer/main.ts
View File

@@ -1,6 +1,7 @@
import 'video.js/dist/video-js.css'
import 'highlight.js/styles/stackoverflow-light.css'
import 'highlight.js/lib/common'
import './index.css'
import hljsVuePlugin from '@highlightjs/vue-plugin'
import VueVideoPlayer from '@videojs-player/vue'

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

@@ -1,24 +1,33 @@
<template>
<div class="upload-container">
<div
class="m-0 box-border flex min-h-screen w-full flex-col gap-5 overflow-y-auto p-4 max-md:gap-4 max-md:p-3 max-xs:p-2 lg:mx-auto lg:max-w-[1200px] lg:px-8 lg:py-6"
>
<!-- Header Card -->
<div class="upload-card header-card">
<div class="card-header">
<div class="provider-section">
<div
class="overflow-hidden rounded-xl border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
>
<div
class="flex flex-row flex-wrap items-center justify-between gap-4 border-b border-border-secondary px-5 py-4 max-md:flex-col max-md:items-stretch"
>
<div class="flex max-w-[calc(100%-300px)] flex-1 flex-wrap items-center gap-2 max-md:order-1">
<button
class="provider-button"
class="group/provider flex w-auto min-w-[200px] shrink-0 cursor-pointer items-center gap-3 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-3 font-[inherit] duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover hover:bg-surface hover:shadow-sm focus-visible:focus-ring max-xs:w-full max-xs:min-w-[130px]"
:title="t('pages.upload.uploadViewHint')"
@click="handlePicBedNameClick(picBedName)"
>
<div class="provider-info">
<span class="provider-name">{{ picBedName }}</span>
<span class="provider-config">{{ defaultConfigNameG || 'Default' }}</span>
<div class="flex flex-1 flex-col items-start">
<span class="text-sm leading-[1.2] font-semibold text-main">{{ picBedName }}</span>
<span class="text-xs leading-[1.2] text-secondary">{{ defaultConfigNameG || 'Default' }}</span>
</div>
<EditIcon :size="16" class="provider-arrow" />
<EditIcon
:size="16"
class="text-secondary duration-fast ease-standard group-hover/provider:text-accent-hover"
/>
</button>
<div
class="add-favorite-button"
class="flex h-[22px] w-[22px] shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-[inherit] text-secondary duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover hover:text-accent-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50"
:title="t('pages.upload.addToFavorites')"
:class="{ disabled: favoritePicbeds.length >= MAX_FAVORITE_PICBEDS || isCurrentPicBedInFavorites }"
:data-disabled="favoritePicbeds.length >= MAX_FAVORITE_PICBEDS || isCurrentPicBedInFavorites"
@click="addCurrentPicbedToFavorites"
>
<PlusIcon :size="12" />
@@ -26,13 +35,13 @@
<transition-group
name="badges-slide"
tag="div"
class="favorite-picbeds-container"
class="flex max-w-[400px] flex-wrap items-center gap-[0.2rem] [.has-many]:max-w-[300px]"
:class="{ 'has-many': favoritePicbeds.length >= 4 }"
>
<button
v-for="picbedType in favoritePicbeds"
:key="picbedType.id"
class="picbed-badge"
class="group/badge relative flex w-[85px] shrink-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md border border-border-secondary bg-bg-secondary pt-1.5 pr-2 pb-1.5 pl-3 text-xs font-medium whitespace-nowrap text-secondary transition-all duration-fast ease-standard select-none hover:-translate-y-px hover:border-accent-hover hover:bg-bg-tertiary hover:text-accent-hover [.is-active]:border-[0.1rem] [.is-active]:border-accent-hover [.is-active]:font-semibold [.show-delete]:pr-2"
:class="{ 'is-active': isCurrentPicbed(picbedType), 'show-delete': longPressedBadge === picbedType.id }"
:title="t('pages.upload.longPressToRemoveFromFavorites') + getPicbedName(picbedType)"
@click="handleBadgeClick(picbedType)"
@@ -43,15 +52,21 @@
@touchend="handleBadgeTouchEnd"
@touchcancel="handleBadgeTouchEnd"
>
<div class="badge-text-mask">
<div class="badge-text-track">
<span class="badge-name">{{ getPicbedName(picbedType) }}</span>
<span class="badge-name shadow-text">{{ getPicbedName(picbedType) }}</span>
<div class="min-w-0 flex-1 overflow-hidden">
<div
class="flex overflow-hidden text-ellipsis whitespace-nowrap group-hover/badge:w-fit group-hover/badge:animate-[badge-scroll_5s_linear_infinite] group-hover/badge:text-clip"
>
<span class="leading-none whitespace-nowrap group-hover/badge:pr-[20px]">{{
getPicbedName(picbedType)
}}</span>
<span class="hidden leading-none whitespace-nowrap group-hover/badge:block">{{
getPicbedName(picbedType)
}}</span>
</div>
</div>
<button
v-if="longPressedBadge === picbedType.id"
class="badge-remove"
class="flex shrink-0 animate-[fade-in_0.2s_ease-in] cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-inherit duration-fast ease-standard hover:bg-danger/20 hover:text-danger"
:title="t('pages.upload.removeFromFavorites')"
@click.stop="removePicbedFromFavorites(picbedType)"
>
@@ -60,8 +75,8 @@
</button>
</transition-group>
</div>
<div class="header-actions">
<div class="segmented-button-group">
<div class="flex flex-wrap items-center gap-3 max-md:order-2 max-md:justify-stretch">
<div class="inline-flex overflow-hidden rounded-md border border-border-secondary bg-bg-secondary">
<button
class="segmented-button"
:title="t('pages.upload.imageProcessNameSingle')"
@@ -74,7 +89,10 @@
<span>{{ t('pages.upload.imageProcessName') }}</span>
</button>
</div>
<button class="action-button" @click="handleChangePicBed">
<button
class="flex cursor-pointer items-center gap-2 rounded-md border-none bg-accent px-4 py-2.5 font-[inherit] text-sm font-medium text-white duration-fast ease-standard hover:-translate-y-px hover:bg-accent-hover hover:shadow-md focus-visible:focus-ring max-md:flex-1 max-md:justify-center max-xs:px-3 max-xs:py-2 max-xs:text-[0.8rem]"
@click="handleChangePicBed"
>
<ArrowLeftRightIcon :size="16" />
<span>{{ t('pages.upload.changePicBed') }}</span>
</button>
@@ -83,42 +101,58 @@
</div>
<!-- Main Upload Card -->
<div class="upload-card main-card">
<div
class="min-h-[300px] overflow-hidden rounded-xl border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
>
<div
id="upload-area"
class="upload-zone"
class="group/upload relative m-4 cursor-pointer rounded-xl border-2 border-dashed border-border bg-bg-secondary px-8 py-12 duration-medium ease-standard focus-visible:focus-ring focus-visible:outline-offset-4 max-md:m-3 max-md:px-4 max-md:py-8 max-xs:m-2 max-xs:px-2 max-xs:py-6 [:hover,.drag-active]:border-accent [:hover,.drag-active]:bg-[linear-gradient(135deg,var(--color-surface-elevated)_0%,color-mix(in_srgb,var(--color-accent),transparent_95%)_100%)] [:hover,.drag-active]:shadow-lg [:hover,.drag-active&]:-translate-y-[2px]"
:class="{ 'drag-active': dragover }"
@drop.prevent="onDrop"
@dragover.prevent="dragover = true"
@dragleave.prevent="dragover = false"
@click="openUploadWindow"
>
<div class="upload-content">
<div class="upload-icon">
<div class="flex flex-col items-center gap-6 text-center">
<div
class="flex h-[80px] w-[80px] items-center justify-center rounded-full bg-accent text-white duration-medium ease-standard group-[:hover,.drag-active]/upload:animate-[float_1.5s_ease-in-out_infinite] max-md:h-[60px] max-md:w-[60px]"
>
<UploadCloudIcon :size="48" />
</div>
<div class="upload-text">
<h3 class="upload-title">
<div class="flex flex-col gap-3">
<h3 class="m-0 text-xl font-semibold tracking-tight text-main max-xs:text-lg">
{{ t('pages.upload.dragFileToHere') }}
</h3>
<p class="upload-subtitle">
<p class="m-0 text-sm text-secondary">
{{ ' ' }}
</p>
<div class="upload-formats">
<span class="format-label">{{ t('pages.upload.uploadHint') }}</span>
<div class="mt-2 flex flex-col gap-1">
<span class="text-xs font-medium tracking-wide text-secondary uppercase">{{
t('pages.upload.uploadHint')
}}</span>
</div>
</div>
</div>
<input id="file-uploader" ref="fileInput" type="file" multiple style="display: none" @change="onChange" />
<input id="file-uploader" ref="fileInput" type="file" multiple class="hidden" @change="onChange" />
</div>
<!-- Progress Bar -->
<transition name="progress">
<div v-if="showProgress" class="progress-container">
<div class="progress-bar">
<div class="progress-fill" :class="{ 'progress-error': showError }" :style="{ width: `${progress}%` }" />
<transition
name="progress"
enter-active-class="transition-all duration-medium ease-standard"
leave-active-class="transition-all duration-medium ease-standard"
enter-from-class="opacity-0 -translate-y-[10px]"
leave-to-class="opacity-0 -translate-y-[10px]"
>
<div v-if="showProgress" class="mx-6 my-4 rounded-lg border border-border-secondary bg-surface p-4">
<div class="mb-2 h-2 overflow-hidden rounded-sm bg-bg-secondary">
<div
class="h-full rounded-sm bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] duration-fast ease-standard data-[error=true]:bg-danger data-[error=true]:bg-none"
:data-error="showError"
:style="{ width: `${progress}%` }"
/>
</div>
<span class="progress-text">
<span class="block text-center text-sm font-medium text-secondary">
{{ showError ? t('pages.upload.uploadFailed') : `${progress}%` }}
</span>
</div>
@@ -126,29 +160,36 @@
</div>
<!-- Quick Actions Card -->
<div class="upload-card actions-card">
<div class="card-header">
<h4 class="card-title">
<div
class="overflow-hidden rounded-lg border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
>
<div class="px-6 py-4">
<h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
{{ t('pages.upload.quickUpload') }}
</h4>
</div>
<div class="quick-actions">
<div
class="grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-3 px-6 py-4 max-md:grid-cols-1 max-md:px-4 max-md:py-3.5 md:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] lg:grid-cols-[repeat(auto-fit,minmax(200px,1fr))]"
>
<button class="quick-action-button" @click="uploadClipboardFiles">
<ClipboardIcon class="action-icon" :size="18" />
<span>{{ t('pages.upload.clipboardPicture') }}</span>
<ClipboardIcon class="shrink-0 text-accent" :size="18" />
<span class="text-sm font-medium text-secondary">{{ t('pages.upload.clipboardPicture') }}</span>
</button>
<button class="quick-action-button" @click="uploadURLFiles">
<LinkIcon class="action-icon" :size="18" />
<span>{{ t('pages.upload.urlUpload') }}</span>
<LinkIcon class="shrink-0 text-accent" :size="18" />
<span class="text-sm font-medium text-secondary">{{ t('pages.upload.urlUpload') }}</span>
</button>
<button
class="quick-action-button"
:class="{ 'has-badge': taskQueueStatus.tasks.length > 0 }"
@click="openTaskDialog"
>
<ListTodoIcon class="action-icon" :size="18" />
<span>{{ t('pages.upload.taskUpload') }}</span>
<span v-if="taskQueueStatus.tasks.length > 0" class="task-count-badge">
<ListTodoIcon class="shrink-0 text-accent" :size="18" />
<span class="text-sm font-medium text-secondary">{{ t('pages.upload.taskUpload') }}</span>
<span
v-if="taskQueueStatus.tasks.length > 0"
class="absolute top-[50%] right-3 flex min-w-6 -translate-y-[50%] animate-[badge-pulse_2s_ease-in-out_infinite] items-center justify-center rounded-full px-1.5 py-0 text-sm font-bold text-accent"
>
{{ taskQueueStatus.tasks.length }}
</span>
</button>
@@ -156,22 +197,28 @@
</div>
<!-- Settings Card -->
<div class="upload-card settings-card">
<div class="card-header">
<h4 class="card-title">
<div
class="overflow-hidden rounded-lg border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
>
<div class="px-6 py-4">
<h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
{{ t('pages.upload.linkFormat') }}
</h4>
</div>
<div class="settings-content">
<div
class="flex flex-col gap-6 px-6 py-5 max-md:grid-cols-1! max-md:px-5 max-md:py-4 md:grid md:grid-cols-2 md:items-start md:gap-6 lg:gap-8"
>
<!-- Format Options -->
<div class="setting-group">
<label class="setting-label">{{ t('pages.upload.outputFormat') }}</label>
<div class="format-buttons">
<div class="flex flex-col gap-3">
<label class="m-0 text-sm font-medium text-main">{{ t('pages.upload.outputFormat') }}</label>
<div
class="grid grid-cols-[repeat(auto-fit,minmax(70px,1fr))] gap-[0.4rem] max-md:grid-cols-[repeat(auto-fit,minmax(60px,1fr))]"
>
<button
v-for="(format, key) in pasteFormatList"
:key="key"
class="format-button"
:class="{ active: pasteStyle === key }"
class="cursor-pointer rounded-md border border-border-secondary bg-bg-secondary px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-[0.7rem] font-medium text-secondary duration-fast ease-standard hover:border-accent-hover hover:text-main focus-visible:focus-ring data-[active=true]:border-accent data-[active=true]:bg-accent data-[active=true]:text-white"
:data-active="pasteStyle === key"
:title="format"
@click="updatePasteStyle(key)"
>
@@ -181,13 +228,21 @@
</div>
<!-- URL Length Options -->
<div class="setting-group">
<label class="setting-label">{{ t('pages.upload.urlType.title') }}</label>
<div class="url-toggle">
<button class="toggle-button" :class="{ active: !useShortUrl }" @click="updateUrlType(false)">
<div class="flex flex-col gap-3">
<label class="m-0 text-sm font-medium text-main">{{ t('pages.upload.urlType.title') }}</label>
<div class="flex w-full overflow-hidden rounded-md border border-border-secondary bg-bg-secondary">
<button
class="flex-1 cursor-pointer border-0 bg-transparent px-[0.675rem] py-[0.325rem] font-[inherit] text-[0.8rem] font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
:data-active="!useShortUrl"
@click="updateUrlType(false)"
>
<span>{{ t('pages.upload.urlType.normal') }}</span>
</button>
<button class="toggle-button" :class="{ active: useShortUrl }" @click="updateUrlType(true)">
<button
class="flex-1 cursor-pointer border-0 bg-transparent px-[0.675rem] py-[0.325rem] font-[inherit] text-[0.8rem] font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
:data-active="useShortUrl"
@click="updateUrlType(true)"
>
<span>{{ t('pages.upload.urlType.short') }}</span>
</button>
</div>
@@ -197,22 +252,35 @@
<!-- Image Process Dialog -->
<transition name="modal">
<div v-if="imageProcessDialogVisible" class="modal-overlay" :class="advancedAnimation" @click.stop>
<div class="modal-container" @click.stop>
<div class="modal-header">
<h3 class="modal-title">
<div
v-if="imageProcessDialogVisible"
class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/50 p-4 max-md:p-4"
:class="{ 'advanced-animation': enableAdvancedAnimation }"
@click.stop
>
<div
class="m-auto h-[85vh] max-h-[85vh] w-[90vw] max-w-[90vw] overflow-hidden rounded-2xl border border-border-secondary bg-bg-tertiary shadow-xl"
@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="modal-subtitle">
<span class="mt-1 text-xl font-semibold text-secondary">
{{
PicBedId === '' ? t('pages.imageProcess.subtitle-Global') : t('pages.imageProcess.subtitle-PerPicbed')
}}
</span>
<button class="modal-close" @click="imageProcessDialogVisible = false">
<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="modal-content">
<div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto max-md:p-4">
<ImageProcessSetting :config-id="PicBedId" :current-picbed-name="defaultPicBedG" />
</div>
</div>
@@ -221,15 +289,21 @@
<!-- Task Queue Manager Modal -->
<transition name="modal">
<div v-if="taskDialogVisible" class="modal-overlay" :class="advancedAnimation">
<div class="modal-container task-queue-modal" @click.stop>
<div class="modal-header">
<div class="modal-header-text">
<h3 class="modal-title">
<ListTodoIcon :size="22" />
<div
v-if="taskDialogVisible"
class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/50 p-4 max-md:p-4"
:class="{ 'advanced-animation': enableAdvancedAnimation }"
>
<div
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]"
@click.stop
>
<div class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4">
<div class="flex flex-row items-center gap-4">
<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 class="modal-subtitle">
<span class="m-0 text-lg font-semibold text-secondary">
{{
t('pages.upload.taskQueue.stats', {
completed: taskQueueStatus.stats.completed,
@@ -238,52 +312,69 @@
}}
</span>
</div>
<button class="modal-close" @click="taskDialogVisible = false">
<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 class="modal-content task-queue-content">
<div class="no-scrollbar max-h-[calc(90vh-90px)] overflow-y-auto">
<!-- Action Bar -->
<div class="task-action-bar">
<div class="action-bar-left">
<button v-show="taskQueueStatus.tasks.length > 0" class="action-btn primary" @click="addFilesToTask">
<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"
>
<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" />
{{ t('pages.upload.taskQueue.addFiles') }}
<span class="mt-1">{{ t('pages.upload.taskQueue.addFiles') }}</span>
</button>
<button
v-if="!taskQueueStatus.config.isRunning && taskQueueStatus.stats.pending > 0"
class="action-btn success"
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" />
{{ t('pages.upload.taskQueue.start') }}
<span class="mt-1">{{ t('pages.upload.taskQueue.start') }}</span>
</button>
<button
v-if="taskQueueStatus.config.isRunning && !taskQueueStatus.config.isPaused"
class="action-btn warning"
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" />
{{ t('pages.upload.taskQueue.pause') }}
<span class="mt-1">{{ t('pages.upload.taskQueue.pause') }}</span>
</button>
<button v-if="taskQueueStatus.config.isPaused" class="action-btn success" @click="resumeTaskQueue">
<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" />
{{ t('pages.upload.taskQueue.resume') }}
<span class="mt-1">{{ t('pages.upload.taskQueue.resume') }}</span>
</button>
</div>
<div class="action-bar-right">
<button v-if="taskQueueStatus.stats.failed > 0" class="action-btn" @click="retryAllFailedTasks">
<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" />
{{ t('pages.upload.taskQueue.retryAllFailed') }}
<span class="mt-1">{{ t('pages.upload.taskQueue.retryAllFailed') }}</span>
</button>
<button
v-if="taskQueueStatus.config.isRunning || taskQueueStatus.stats.pending > 0"
class="action-btn danger"
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" />
{{ t('pages.upload.taskQueue.cancelAll') }}
<span class="mt-1">{{ t('pages.upload.taskQueue.cancelAll') }}</span>
</button>
<button
v-if="
@@ -291,14 +382,14 @@
taskQueueStatus.stats.failed > 0 ||
taskQueueStatus.stats.cancelled > 0
"
class="action-btn"
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" />
{{ t('pages.upload.taskQueue.clearFinished') }}
<span class="mt-1">{{ t('pages.upload.taskQueue.clearFinished') }}</span>
</button>
<button
class="action-btn"
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"
>
@@ -308,28 +399,34 @@
</div>
<!-- Overall Progress -->
<div v-if="taskQueueStatus.stats.total > 0" class="overall-progress">
<div class="progress-info">
<span class="progress-label">{{ t('pages.upload.taskQueue.overallProgress') }}</span>
<span class="progress-percentage">{{ overallProgressPercent }}%</span>
<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="progress-bar-container">
<div class="progress-bar-fill" :style="{ width: `${overallProgressPercent}%` }" />
<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="progress-details">
<span v-if="taskQueueStatus.stats.avgSpeed > 0" class="progress-detail-item">
<ZapIcon :size="14" />
<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="progress-detail-item"
class="flex items-center gap-2 py-1.5 text-xs text-secondary"
>
<ClockIcon :size="14" />
<ClockIcon :size="14" class="text-accent" />
{{ formatTime(taskQueueStatus.stats.estimatedTimeMs) }}
</span>
<span class="progress-detail-item">
<HardDriveIcon :size="14" />
<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>
@@ -338,60 +435,68 @@
<!-- Settings Panel -->
<transition name="settings-slide">
<div v-if="showTaskSettings" class="settings-panel">
<div class="settings-grid">
<div class="setting-item">
<label class="setting-label">
<TimerIcon :size="14" />
<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="input-with-unit">
<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="setting-input"
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="input-unit">s</span>
<span class="bg-transparent px-1 py-2 text-sm font-semibold text-secondary">s</span>
</div>
</div>
<div class="setting-item">
<label class="setting-label">{{ t('pages.upload.taskQueue.maxRetry') }}</label>
<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="setting-input"
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="setting-item toggle-item">
<label class="setting-label" for="task-auto-start">
<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="setting-checkbox"
class="h-[16px] w-[16px] cursor-pointer accent-accent"
@change="updateSettings"
/>
</div>
<div class="setting-item toggle-item">
<label class="setting-label" for="task-pause-on-error">
<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="setting-checkbox"
class="h-[16px] w-[16px] cursor-pointer accent-accent"
@change="updateSettings"
/>
</div>
@@ -400,17 +505,19 @@
</transition>
<!-- Filter & Search Bar -->
<div v-if="taskQueueStatus.tasks.length > 0" class="filter-search-bar">
<div class="search-box">
<SearchIcon :size="16" />
<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="search-input"
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="filter-tabs">
<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>
@@ -435,44 +542,61 @@
</div>
<!-- Task List -->
<div v-if="taskQueueStatus.tasks.length > 0" class="task-list-container">
<TransitionGroup name="task" tag="div" class="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="task-item"
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="task-content">
<div class="task-header-row">
<div class="task-name">
<span class="task-filename" :title="task.filePath">{{ task.fileName }}</span>
<span v-if="task.priority === 2" class="priority-badge">
<StarIcon :size="12" />
<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="task-status-badge" :class="getTaskStatusClass(task.status)">
<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="task-meta-row">
<span v-if="task.fileSize > 0" class="task-meta-item">
<HardDriveIcon :size="12" />
<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="task-meta-item">
<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="task-meta-item retry">
<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="task-meta-item error" :title="task.error">
<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="task-actions">
<div class="flex items-center gap-1.5">
<!-- Pending task actions -->
<template v-if="task.status === 'pending'">
<button
@@ -490,7 +614,7 @@
<ChevronDownIcon :size="16" />
</button>
<button
class="task-icon-btn priority"
class="task-icon-btn"
:class="{ 'is-high': task.priority === 2 }"
:title="t('pages.upload.taskQueue.togglePriority')"
@click="toggleTaskPriority(task.id, task.priority)"
@@ -533,11 +657,15 @@
</button>
</template>
<!-- Status icon -->
<div class="task-status-icon">
<CheckCircleIcon v-if="task.status === 'completed'" :size="18" class="icon-success" />
<XCircleIcon v-if="task.status === 'failed'" :size="18" class="icon-error" />
<LoaderIcon v-if="task.status === 'uploading'" :size="18" class="icon-loading spinning" />
<ClockIcon v-if="task.status === 'pending'" :size="18" class="icon-pending" />
<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>
@@ -545,13 +673,16 @@
</div>
<!-- Empty State -->
<div v-else class="empty-state">
<ListTodoIcon :size="48" />
<h4>{{ t('pages.upload.taskQueue.empty') }}</h4>
<p>{{ t('pages.upload.taskQueue.emptyHint') }}</p>
<button class="action-btn primary" @click="addFilesToTask">
<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" />
{{ t('pages.upload.taskQueue.selectFiles') }}
<span class="mt-0.5">{{ t('pages.upload.taskQueue.selectFiles') }}</span>
</button>
</div>
</div>
@@ -583,7 +714,6 @@ import {
Settings,
SettingsIcon,
StarIcon,
TimerIcon,
Trash2Icon,
UploadCloudIcon,
XCircleIcon,
@@ -869,10 +999,6 @@ async function initConf() {
useShortUrl.value = settingConfig?.useShortUrl || false
}
const advancedAnimation = computed(() => ({
advancedAnimation: enableAdvancedAnimation.value,
}))
function updatePasteStyle(style: string) {
pasteStyle.value = style
saveConfig({

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

File diff suppressed because it is too large Load Diff