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

4
.prettierrc
View File

@@ -14,5 +14,7 @@
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false,
"endOfLine": "lf"
"endOfLine": "lf",
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "./src/renderer/index.css"
}

1
.stylelintrc.cjs
View File

@@ -2,6 +2,7 @@ module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-html/vue', 'stylelint-config-standard-vue'],
plugins: [],
rules: {
'import-notation': null,
// 这里是允许了空的style标签
'no-empty-source': null,
'selector-class-pattern': null,

2
electron.vite.config.js
View File

@@ -3,6 +3,7 @@ import { dirname, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'electron-vite'
@@ -39,6 +40,7 @@ export default defineConfig({
alias,
},
plugins: [
tailwindcss(),
vue(),
VueI18nPlugin({
/* options */

3
package.json
View File

@@ -88,6 +88,7 @@
"@headlessui/vue": "^1.7.23",
"@highlightjs/vue-plugin": "^2.1.2",
"@intlify/unplugin-vue-i18n": "^11.0.3",
"@tailwindcss/vite": "^4.1.18",
"@types/adm-zip": "^0.5.7",
"@types/ali-oss": "^6.23.0",
"@types/fs-extra": "^11.0.4",
@@ -129,6 +130,7 @@
"postcss": "^8.5.6",
"postcss-html": "^1.8.0",
"prettier": "^3.7.4",
"prettier-plugin-tailwindcss": "^0.7.2",
"qrcode.vue": "^3.6.0",
"stylelint": "^16.26.1",
"stylelint-config-html": "^1.1.0",
@@ -136,6 +138,7 @@
"stylelint-config-standard-vue": "^1.0.0",
"stylelint-order": "^7.0.1",
"stylus": "^0.64.0",
"tailwindcss": "^4.1.18",
"typescript": "5.8.2",
"typescript-eslint": "^8.52.0",
"video.js": "^8.23.4",

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

249
yarn.lock
View File

@@ -1369,6 +1369,14 @@
minimatch "^9.0.3"
plist "^3.1.0"
"@emnapi/core@^1.7.1":
version "1.8.1"
resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.8.1.tgz#fd9efe721a616288345ffee17a1f26ac5dd01349"
integrity sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==
dependencies:
"@emnapi/wasi-threads" "1.1.0"
tslib "^2.4.0"
"@emnapi/runtime@^1.5.0":
version "1.5.0"
resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.5.0.tgz#9aebfcb9b17195dce3ab53c86787a6b7d058db73"
@@ -1376,6 +1384,20 @@
dependencies:
tslib "^2.4.0"
"@emnapi/runtime@^1.7.1":
version "1.8.1"
resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.8.1.tgz#550fa7e3c0d49c5fb175a116e8cd70614f9a22a5"
integrity sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==
dependencies:
tslib "^2.4.0"
"@emnapi/wasi-threads@1.1.0", "@emnapi/wasi-threads@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
dependencies:
tslib "^2.4.0"
"@esbuild/aix-ppc64@0.25.12":
version "0.25.12"
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz#80fcbe36130e58b7670511e888b8e88a259ed76c"
@@ -2448,7 +2470,7 @@
"@jridgewell/sourcemap-codec" "^1.5.0"
"@jridgewell/trace-mapping" "^0.3.24"
"@jridgewell/remapping@^2.3.5":
"@jridgewell/remapping@^2.3.4", "@jridgewell/remapping@^2.3.5":
version "2.3.5"
resolved "https://registry.yarnpkg.com/@jridgewell/remapping/-/remapping-2.3.5.tgz#375c476d1972947851ba1e15ae8f123047445aa1"
integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==
@@ -2527,6 +2549,15 @@
lodash "^4.17.15"
tmp-promise "^3.0.2"
"@napi-rs/wasm-runtime@^1.1.0":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz#c3705ab549d176b8dc5172723d6156c3dc426af2"
integrity sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==
dependencies:
"@emnapi/core" "^1.7.1"
"@emnapi/runtime" "^1.7.1"
"@tybys/wasm-util" "^0.10.1"
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -3365,6 +3396,113 @@
dependencies:
defer-to-connect "^2.0.0"
"@tailwindcss/node@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.1.18.tgz#9863be0d26178638794a38d6c7c14666fb992e8a"
integrity sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==
dependencies:
"@jridgewell/remapping" "^2.3.4"
enhanced-resolve "^5.18.3"
jiti "^2.6.1"
lightningcss "1.30.2"
magic-string "^0.30.21"
source-map-js "^1.2.1"
tailwindcss "4.1.18"
"@tailwindcss/oxide-android-arm64@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz#79717f87e90135e5d3d23a3d3aecde4ca5595dd5"
integrity sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==
"@tailwindcss/oxide-darwin-arm64@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz#7fa47608d62d60e9eb020682249d20159667fbb0"
integrity sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==
"@tailwindcss/oxide-darwin-x64@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz#c05991c85aa2af47bf9d1f8172fe9e4636591e79"
integrity sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==
"@tailwindcss/oxide-freebsd-x64@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz#3d48e8d79fd08ece0e02af8e72d5059646be34d0"
integrity sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==
"@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz#982ecd1a65180807ccfde67dc17c6897f2e50aa8"
integrity sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==
"@tailwindcss/oxide-linux-arm64-gnu@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz#df49357bc9737b2e9810ea950c1c0647ba6573c3"
integrity sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==
"@tailwindcss/oxide-linux-arm64-musl@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz#b266c12822bf87883cf152615f8fffb8519d689c"
integrity sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==
"@tailwindcss/oxide-linux-x64-gnu@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz#5c737f13dd9529b25b314e6000ff54e05b3811da"
integrity sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==
"@tailwindcss/oxide-linux-x64-musl@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz#3380e17f7be391f1ef924be9f0afe1f304fe3478"
integrity sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==
"@tailwindcss/oxide-wasm32-wasi@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz#9464df0e28a499aab1c55e97682be37b3a656c88"
integrity sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==
dependencies:
"@emnapi/core" "^1.7.1"
"@emnapi/runtime" "^1.7.1"
"@emnapi/wasi-threads" "^1.1.0"
"@napi-rs/wasm-runtime" "^1.1.0"
"@tybys/wasm-util" "^0.10.1"
tslib "^2.4.0"
"@tailwindcss/oxide-win32-arm64-msvc@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz#bbcdd59c628811f6a0a4d5b09616967d8fb0c4d4"
integrity sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==
"@tailwindcss/oxide-win32-x64-msvc@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz#9c628d04623aa4c3536c508289f58d58ba4b3fb1"
integrity sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==
"@tailwindcss/oxide@4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.1.18.tgz#c8335cd0a83e9880caecd60abf7904f43ebab582"
integrity sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==
optionalDependencies:
"@tailwindcss/oxide-android-arm64" "4.1.18"
"@tailwindcss/oxide-darwin-arm64" "4.1.18"
"@tailwindcss/oxide-darwin-x64" "4.1.18"
"@tailwindcss/oxide-freebsd-x64" "4.1.18"
"@tailwindcss/oxide-linux-arm-gnueabihf" "4.1.18"
"@tailwindcss/oxide-linux-arm64-gnu" "4.1.18"
"@tailwindcss/oxide-linux-arm64-musl" "4.1.18"
"@tailwindcss/oxide-linux-x64-gnu" "4.1.18"
"@tailwindcss/oxide-linux-x64-musl" "4.1.18"
"@tailwindcss/oxide-wasm32-wasi" "4.1.18"
"@tailwindcss/oxide-win32-arm64-msvc" "4.1.18"
"@tailwindcss/oxide-win32-x64-msvc" "4.1.18"
"@tailwindcss/vite@^4.1.18":
version "4.1.18"
resolved "https://registry.yarnpkg.com/@tailwindcss/vite/-/vite-4.1.18.tgz#614b9d5483559518c72d31bca05d686f8df28e9a"
integrity sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==
dependencies:
"@tailwindcss/node" "4.1.18"
"@tailwindcss/oxide" "4.1.18"
tailwindcss "4.1.18"
"@tanstack/virtual-core@3.13.12":
version "3.13.12"
resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
@@ -3415,6 +3553,13 @@
resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9"
integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
"@tybys/wasm-util@^0.10.1":
version "0.10.1"
resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
dependencies:
tslib "^2.4.0"
"@types/adm-zip@^0.5.7":
version "0.5.7"
resolved "https://registry.yarnpkg.com/@types/adm-zip/-/adm-zip-0.5.7.tgz#eec10b6f717d3948beb64aca0abebc4b344ac7e9"
@@ -5634,6 +5779,11 @@ detect-libc@^2.0.1:
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.4.tgz#f04715b8ba815e53b4d8109655b6508a6865a7e8"
integrity sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==
detect-libc@^2.0.3:
version "2.1.2"
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
detect-libc@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.1.tgz#9f1e511ace6bb525efea4651345beac424dac7b9"
@@ -5949,6 +6099,14 @@ enhanced-resolve@^5.17.1:
graceful-fs "^4.2.4"
tapable "^2.2.0"
enhanced-resolve@^5.18.3:
version "5.18.4"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz#c22d33055f3952035ce6a144ce092447c525f828"
integrity sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==
dependencies:
graceful-fs "^4.2.4"
tapable "^2.2.0"
entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -7927,6 +8085,11 @@ jiti@^2.4.1:
resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.5.1.tgz#bd099c1c2be1c59bbea4e5adcd127363446759d0"
integrity sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==
jiti@^2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.6.1.tgz#178ef2fc9a1a594248c20627cd820187a4d78d92"
integrity sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==
jpeg-js@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
@@ -8138,6 +8301,80 @@ libheif-js@^1.19.8:
resolved "https://registry.yarnpkg.com/libheif-js/-/libheif-js-1.19.8.tgz#fcbf3571ef28b6199dd052bc4d2cb7cce56ddf06"
integrity sha512-vQJWusIxO7wavpON1dusciL8Go9jsIQ+EUrckauFYAiSTjcmLAsuJh3SszLpvkwPci3JcL41ek2n+LUZGFpPIQ==
lightningcss-android-arm64@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz#6966b7024d39c94994008b548b71ab360eb3a307"
integrity sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==
lightningcss-darwin-arm64@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz#a5fa946d27c029e48c7ff929e6e724a7de46eb2c"
integrity sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==
lightningcss-darwin-x64@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz#5ce87e9cd7c4f2dcc1b713f5e8ee185c88d9b7cd"
integrity sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==
lightningcss-freebsd-x64@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz#6ae1d5e773c97961df5cff57b851807ef33692a5"
integrity sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==
lightningcss-linux-arm-gnueabihf@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz#62c489610c0424151a6121fa99d77731536cdaeb"
integrity sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==
lightningcss-linux-arm64-gnu@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz#2a3661b56fe95a0cafae90be026fe0590d089298"
integrity sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==
lightningcss-linux-arm64-musl@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz#d7ddd6b26959245e026bc1ad9eb6aa983aa90e6b"
integrity sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==
lightningcss-linux-x64-gnu@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz#5a89814c8e63213a5965c3d166dff83c36152b1a"
integrity sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==
lightningcss-linux-x64-musl@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz#808c2e91ce0bf5d0af0e867c6152e5378c049728"
integrity sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==
lightningcss-win32-arm64-msvc@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz#ab4a8a8a2e6a82a4531e8bbb6bf0ff161ee6625a"
integrity sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==
lightningcss-win32-x64-msvc@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz#f01f382c8e0a27e1c018b0bee316d210eac43b6e"
integrity sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==
lightningcss@1.30.2:
version "1.30.2"
resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.30.2.tgz#4ade295f25d140f487d37256f4cd40dc607696d0"
integrity sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==
dependencies:
detect-libc "^2.0.3"
optionalDependencies:
lightningcss-android-arm64 "1.30.2"
lightningcss-darwin-arm64 "1.30.2"
lightningcss-darwin-x64 "1.30.2"
lightningcss-freebsd-x64 "1.30.2"
lightningcss-linux-arm-gnueabihf "1.30.2"
lightningcss-linux-arm64-gnu "1.30.2"
lightningcss-linux-arm64-musl "1.30.2"
lightningcss-linux-x64-gnu "1.30.2"
lightningcss-linux-x64-musl "1.30.2"
lightningcss-win32-arm64-msvc "1.30.2"
lightningcss-win32-x64-msvc "1.30.2"
lines-and-columns@^1.1.6:
version "1.2.4"
resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -9456,6 +9693,11 @@ prettier-linter-helpers@^1.0.0:
dependencies:
fast-diff "^1.1.2"
prettier-plugin-tailwindcss@^0.7.2:
version "0.7.2"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz#8de2039fc0363b8532ef5a2d3fc9e2c1b6ca3bd4"
integrity sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==
prettier@^3.7.4:
version "3.7.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.7.4.tgz#d2f8335d4b1cec47e1c8098645411b0c9dff9c0f"
@@ -10612,6 +10854,11 @@ table@^6.9.0:
string-width "^4.2.3"
strip-ansi "^6.0.1"
tailwindcss@4.1.18, tailwindcss@^4.1.18:
version "4.1.18"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.1.18.tgz#f488ba47853abdb5354daf9679d3e7791fc4f4e3"
integrity sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==
tapable@^2.2.0:
version "2.2.2"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.2.tgz#ab4984340d30cb9989a490032f086dbb8b56d872"