release: v1.2.6 — 新 UI 体验优化与存储标识规则
GitHub Release / release (push) Canceled after 0s
ci / ci (22, ubuntu-latest) (push) Canceled after 0s
Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s
Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s
Publish Docker image / merge (push) Canceled after 0s
GitHub Release / release (push) Canceled after 0s
ci / ci (22, ubuntu-latest) (push) Canceled after 0s
Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s
Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s
Publish Docker image / merge (push) Canceled after 0s
This commit is contained in:
O96u committed
1 parent
ac65c1eb9d
commit
8408d01197
38 files changed
+491
-369
No files matched your search
@@ -218,17 +218,17 @@ function onImageLoad(event: Event) {
|
||||
#body
|
||||
>
|
||||
<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start">
|
||||
<div class="preview-checkerboard flex items-center justify-center overflow-hidden rounded-xl border border-default p-4">
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="image.originalName"
|
||||
class="max-h-[min(60vh,24rem)] w-full object-contain"
|
||||
@load="onImageLoad"
|
||||
>
|
||||
</div>
|
||||
<div class="preview-checkerboard flex items-center justify-center overflow-hidden rounded-xl border border-default p-4">
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="image.originalName"
|
||||
class="max-h-[min(60vh,24rem)] w-full object-contain"
|
||||
@load="onImageLoad"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex min-w-0 flex-col gap-5">
|
||||
<dl class="divide-y divide-default text-sm">
|
||||
<div class="flex min-w-0 flex-col gap-5">
|
||||
<dl class="divide-y divide-default text-sm">
|
||||
<div class="flex gap-4 py-2.5 first:pt-0">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewOriginalName') }}
|
||||
@@ -330,40 +330,40 @@ function onImageLoad(event: Event) {
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</dl>
|
||||
|
||||
<div class="border-t border-default pt-4">
|
||||
<p class="mb-2.5 text-sm font-medium">
|
||||
{{ t('image.previewLinks') }}
|
||||
</p>
|
||||
<div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
|
||||
<UButton
|
||||
v-for="item in embedFormatItems"
|
||||
:key="item.value"
|
||||
size="xs"
|
||||
class="flex-1 justify-center"
|
||||
:variant="embedFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="embedFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
@click="selectEmbedFormat(item.value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<UInput
|
||||
:model-value="previewValue"
|
||||
readonly
|
||||
size="sm"
|
||||
class="min-w-0 flex-1 font-mono text-xs"
|
||||
/>
|
||||
<CopyButton
|
||||
:label="t('common.copy')"
|
||||
:value="previewValue"
|
||||
:success-title="copySuccessTitle"
|
||||
/>
|
||||
</div>
|
||||
<div class="border-t border-default pt-4">
|
||||
<p class="mb-2.5 text-sm font-medium">
|
||||
{{ t('image.previewLinks') }}
|
||||
</p>
|
||||
<div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
|
||||
<UButton
|
||||
v-for="item in embedFormatItems"
|
||||
:key="item.value"
|
||||
size="xs"
|
||||
class="flex-1 justify-center"
|
||||
:variant="embedFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="embedFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
@click="selectEmbedFormat(item.value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<UInput
|
||||
:model-value="previewValue"
|
||||
readonly
|
||||
size="sm"
|
||||
class="min-w-0 flex-1 font-mono text-xs"
|
||||
/>
|
||||
<CopyButton
|
||||
:label="t('common.copy')"
|
||||
:value="previewValue"
|
||||
:success-title="copySuccessTitle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template
|
||||
|
||||
+115
-115
@@ -125,124 +125,124 @@ const navButtonClass = 'inline-flex items-center justify-center rounded-md borde
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
|
||||
<USelect
|
||||
v-if="pageSize !== undefined"
|
||||
:model-value="pageSize"
|
||||
:items="pageSizeItems"
|
||||
value-key="value"
|
||||
size="sm"
|
||||
class="hidden w-[7.5rem] shrink-0 sm:block"
|
||||
:aria-label="t('pagination.pageSize')"
|
||||
:disabled="loading"
|
||||
@update:model-value="onPageSizeChange"
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-center gap-1 sm:justify-end">
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
|
||||
:aria-label="t('pagination.first')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevrons-left"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'size-9 sm:size-8']"
|
||||
:aria-label="t('pagination.prev')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(page - 1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-left"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p
|
||||
v-if="!showMobilePageNumbers"
|
||||
class="min-w-[5.5rem] px-1 text-center text-sm text-muted sm:hidden"
|
||||
>
|
||||
{{ t('pagination.pageStatus', { page, totalPages }) }}
|
||||
</p>
|
||||
|
||||
<template
|
||||
v-for="(target, index) in visiblePages"
|
||||
:key="`${target}-${index}`"
|
||||
>
|
||||
<span
|
||||
v-if="target === 'ellipsis'"
|
||||
class="inline-flex size-9 items-center justify-center text-sm text-muted sm:size-8"
|
||||
:class="showMobilePageNumbers ? '' : 'hidden sm:inline-flex'"
|
||||
aria-hidden="true"
|
||||
>
|
||||
…
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center rounded-md border text-sm transition-colors disabled:pointer-events-none disabled:opacity-40"
|
||||
:class="[
|
||||
pageButtonClass(target),
|
||||
showMobilePageNumbers ? 'size-9 sm:size-8' : 'hidden size-8 sm:inline-flex'
|
||||
]"
|
||||
:aria-label="t('pagination.pageNumber', { page: target })"
|
||||
:aria-current="target === page ? 'page' : undefined"
|
||||
:disabled="loading"
|
||||
@click="goTo(target)"
|
||||
>
|
||||
{{ target }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'size-9 sm:size-8']"
|
||||
:aria-label="t('pagination.next')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(page + 1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-right"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
|
||||
:aria-label="t('pagination.last')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(totalPages)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevrons-right"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="hidden items-center gap-1.5 text-sm text-muted sm:flex"
|
||||
@submit.prevent="jumpToPage"
|
||||
>
|
||||
<span>{{ t('pagination.goToPrefix') }}</span>
|
||||
<UInput
|
||||
v-model="jumpPageInput"
|
||||
type="number"
|
||||
min="1"
|
||||
:max="totalPages"
|
||||
<USelect
|
||||
v-if="pageSize !== undefined"
|
||||
:model-value="pageSize"
|
||||
:items="pageSizeItems"
|
||||
value-key="value"
|
||||
size="sm"
|
||||
class="w-14"
|
||||
:aria-label="t('pagination.pagePlaceholder')"
|
||||
class="hidden w-[7.5rem] shrink-0 sm:block"
|
||||
:aria-label="t('pagination.pageSize')"
|
||||
:disabled="loading"
|
||||
@blur="jumpToPage"
|
||||
@update:model-value="onPageSizeChange"
|
||||
/>
|
||||
<span v-if="t('pagination.goToSuffix')">{{ t('pagination.goToSuffix') }}</span>
|
||||
</form>
|
||||
|
||||
<div class="flex items-center justify-center gap-1 sm:justify-end">
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
|
||||
:aria-label="t('pagination.first')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevrons-left"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'size-9 sm:size-8']"
|
||||
:aria-label="t('pagination.prev')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(page - 1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-left"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<p
|
||||
v-if="!showMobilePageNumbers"
|
||||
class="min-w-[5.5rem] px-1 text-center text-sm text-muted sm:hidden"
|
||||
>
|
||||
{{ t('pagination.pageStatus', { page, totalPages }) }}
|
||||
</p>
|
||||
|
||||
<template
|
||||
v-for="(target, index) in visiblePages"
|
||||
:key="`${target}-${index}`"
|
||||
>
|
||||
<span
|
||||
v-if="target === 'ellipsis'"
|
||||
class="inline-flex size-9 items-center justify-center text-sm text-muted sm:size-8"
|
||||
:class="showMobilePageNumbers ? '' : 'hidden sm:inline-flex'"
|
||||
aria-hidden="true"
|
||||
>
|
||||
…
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center rounded-md border text-sm transition-colors disabled:pointer-events-none disabled:opacity-40"
|
||||
:class="[
|
||||
pageButtonClass(target),
|
||||
showMobilePageNumbers ? 'size-9 sm:size-8' : 'hidden size-8 sm:inline-flex'
|
||||
]"
|
||||
:aria-label="t('pagination.pageNumber', { page: target })"
|
||||
:aria-current="target === page ? 'page' : undefined"
|
||||
:disabled="loading"
|
||||
@click="goTo(target)"
|
||||
>
|
||||
{{ target }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'size-9 sm:size-8']"
|
||||
:aria-label="t('pagination.next')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(page + 1)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-right"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
|
||||
:aria-label="t('pagination.last')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(totalPages)"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-chevrons-right"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="hidden items-center gap-1.5 text-sm text-muted sm:flex"
|
||||
@submit.prevent="jumpToPage"
|
||||
>
|
||||
<span>{{ t('pagination.goToPrefix') }}</span>
|
||||
<UInput
|
||||
v-model="jumpPageInput"
|
||||
type="number"
|
||||
min="1"
|
||||
:max="totalPages"
|
||||
size="sm"
|
||||
class="w-14"
|
||||
:aria-label="t('pagination.pagePlaceholder')"
|
||||
:disabled="loading"
|
||||
@blur="jumpToPage"
|
||||
/>
|
||||
<span v-if="t('pagination.goToSuffix')">{{ t('pagination.goToSuffix') }}</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
searchQuery: string
|
||||
storageBackend: string
|
||||
storageBackendItems: Array<{ label: string, value: string }>
|
||||
uploadSource: string
|
||||
uploadSourceItems: Array<{ label: string, value: string }>
|
||||
viewMode: 'grid' | 'list'
|
||||
@@ -13,6 +15,7 @@ const props = withDefaults(defineProps<{
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:searchQuery': [value: string]
|
||||
'update:storageBackend': [value: string]
|
||||
'update:uploadSource': [value: string]
|
||||
'update:viewMode': [mode: 'grid' | 'list']
|
||||
'search': []
|
||||
@@ -49,6 +52,16 @@ function viewButtonClass(active: boolean) {
|
||||
@update:model-value="emit('update:searchQuery', $event)"
|
||||
/>
|
||||
|
||||
<USelect
|
||||
:model-value="storageBackend"
|
||||
:items="storageBackendItems"
|
||||
class="w-28 shrink-0"
|
||||
size="sm"
|
||||
:aria-label="t('stats.storage')"
|
||||
:disabled="loading"
|
||||
@update:model-value="emit('update:storageBackend', $event)"
|
||||
/>
|
||||
|
||||
<USelect
|
||||
:model-value="uploadSource"
|
||||
:items="uploadSourceItems"
|
||||
|
||||
@@ -73,8 +73,11 @@ function formatTimeShort(value: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function actionColor(action: LogAction) {
|
||||
return action === 'upload' ? 'success' : 'error'
|
||||
function actionBadgeClass(action: LogAction) {
|
||||
const base = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap'
|
||||
return action === 'upload'
|
||||
? `${base} bg-success/10 text-success`
|
||||
: `${base} bg-error/10 text-error`
|
||||
}
|
||||
|
||||
function actionIcon(action: LogAction) {
|
||||
@@ -335,24 +338,16 @@ onMounted(async () => {
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
|
||||
<UBadge
|
||||
:color="actionColor(row.action)"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
<span :class="actionBadgeClass(row.action)">
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="mr-1 size-3"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
</span>
|
||||
<span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary whitespace-nowrap">
|
||||
{{ sourceLabel(row.source) }}
|
||||
</UBadge>
|
||||
</span>
|
||||
<span
|
||||
v-if="isAdmin"
|
||||
class="text-xs text-muted"
|
||||
@@ -412,32 +407,32 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden overflow-x-auto sm:block">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<div class="hidden min-w-0 sm:block">
|
||||
<table class="w-full table-fixed text-left text-sm">
|
||||
<thead class="border-b border-default bg-muted/30 text-xs text-muted">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium sm:px-6">
|
||||
<th class="w-36 px-4 py-3 font-medium sm:px-6">
|
||||
{{ t('logs.colTime') }}
|
||||
</th>
|
||||
<th
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-3 font-medium"
|
||||
class="w-20 px-4 py-3 font-medium"
|
||||
>
|
||||
{{ t('logs.colUser') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
<th class="w-20 whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colAction') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
<th class="w-16 whitespace-nowrap px-4 py-3 font-medium">
|
||||
{{ t('logs.colSource') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
<th class="w-24 px-4 py-3 font-medium">
|
||||
{{ t('logs.colStorage') }}
|
||||
</th>
|
||||
<th class="hidden px-4 py-3 font-medium md:table-cell">
|
||||
{{ t('logs.colFile') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
<th class="w-20 px-4 py-3 font-medium">
|
||||
{{ t('logs.colSize') }}
|
||||
</th>
|
||||
<th class="hidden px-4 py-3 font-medium xl:table-cell">
|
||||
@@ -451,41 +446,33 @@ onMounted(async () => {
|
||||
:key="row.id"
|
||||
class="hover:bg-muted/20"
|
||||
>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-xs text-muted sm:px-6">
|
||||
{{ formatTime(row.createdAt) }}
|
||||
<td class="px-4 py-3 text-xs text-muted sm:px-6">
|
||||
<span class="block truncate">{{ formatTime(row.createdAt) }}</span>
|
||||
</td>
|
||||
<td
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-3 text-xs"
|
||||
>
|
||||
{{ row.username ?? '—' }}
|
||||
<span class="block truncate">{{ row.username ?? '—' }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UBadge
|
||||
:color="actionColor(row.action)"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<span :class="actionBadgeClass(row.action)">
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="mr-1 size-3"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
</UBadge>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UBadge
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
||||
{{ sourceLabel(row.source) }}
|
||||
</UBadge>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<span
|
||||
v-if="row.storage"
|
||||
class="inline-flex max-w-[8rem] items-center gap-1 truncate"
|
||||
class="flex min-w-0 items-center gap-1"
|
||||
:title="row.storage.name"
|
||||
>
|
||||
<UIcon
|
||||
@@ -500,7 +487,7 @@ onMounted(async () => {
|
||||
>—</span>
|
||||
</td>
|
||||
<td
|
||||
class="hidden max-w-[12rem] truncate px-4 py-3 md:table-cell"
|
||||
class="hidden max-w-0 truncate px-4 py-3 md:table-cell"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
@@ -508,21 +495,21 @@ onMounted(async () => {
|
||||
<td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
|
||||
{{ formatFileSize(row.size) }}
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 xl:table-cell">
|
||||
<div class="flex max-w-[16rem] items-center gap-1">
|
||||
<td class="hidden max-w-0 px-4 py-3 xl:table-cell">
|
||||
<div class="flex min-w-0 items-center gap-1">
|
||||
<a
|
||||
v-if="row.action === 'upload'"
|
||||
:href="imageUrl(row.key)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="truncate font-mono text-xs text-primary hover:underline"
|
||||
class="min-w-0 truncate font-mono text-xs text-primary hover:underline"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</a>
|
||||
<span
|
||||
v-else
|
||||
class="truncate font-mono text-xs text-dimmed"
|
||||
class="min-w-0 truncate font-mono text-xs text-dimmed"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
@@ -530,6 +517,7 @@ onMounted(async () => {
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="row.key"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
|
||||
@@ -45,104 +45,104 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<SettingsSection :title="t('preferences.processing')">
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
v-model="compressEnabled"
|
||||
:title="t('preferences.clientCompress')"
|
||||
:hint="t('preferences.clientCompressHint')"
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
v-model="compressEnabled"
|
||||
:title="t('preferences.clientCompress')"
|
||||
:hint="t('preferences.clientCompressHint')"
|
||||
/>
|
||||
<div
|
||||
v-if="userSettings"
|
||||
class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
|
||||
>
|
||||
<div class="min-w-0 flex-1 pr-2">
|
||||
<p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-medium text-highlighted">
|
||||
<span>{{ t('preferences.autoDeletePrefix') }}</span>
|
||||
<UInput
|
||||
v-model.number="userAutoDeleteDaysDraft"
|
||||
type="number"
|
||||
min="1"
|
||||
max="3650"
|
||||
size="xs"
|
||||
class="w-14 tabular-nums"
|
||||
:class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
|
||||
/>
|
||||
<span>{{ t('preferences.autoDeleteSuffix') }}</span>
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.autoDeleteHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<USwitch
|
||||
v-model="userAutoDeleteEnabled"
|
||||
class="mt-0.5 shrink-0"
|
||||
/>
|
||||
<div
|
||||
v-if="userSettings"
|
||||
class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
|
||||
>
|
||||
<div class="min-w-0 flex-1 pr-2">
|
||||
<p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-medium text-highlighted">
|
||||
<span>{{ t('preferences.autoDeletePrefix') }}</span>
|
||||
<UInput
|
||||
v-model.number="userAutoDeleteDaysDraft"
|
||||
type="number"
|
||||
min="1"
|
||||
max="3650"
|
||||
size="xs"
|
||||
class="w-14 tabular-nums"
|
||||
:class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
|
||||
/>
|
||||
<span>{{ t('preferences.autoDeleteSuffix') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex justify-center py-4"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-5 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 py-4 sm:px-5">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('preferences.webpQuality') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.autoDeleteHint') }}
|
||||
{{ t('preferences.webpQualityHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right text-xs text-muted">
|
||||
<p>{{ t('preferences.current', { n: clientWebpQuality }) }}</p>
|
||||
<p class="mt-0.5">
|
||||
{{ clientQualityLevel }}
|
||||
</p>
|
||||
</div>
|
||||
<USwitch
|
||||
v-model="userAutoDeleteEnabled"
|
||||
class="mt-0.5 shrink-0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex justify-center py-4"
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
:value="clientWebpQuality"
|
||||
class="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
|
||||
@input="onClientQualityInput"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-5 animate-spin text-muted"
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :title="t('settings.uploadConvenience')">
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
v-model="autoCopyMarkdown"
|
||||
:title="t('preferences.autoCopy')"
|
||||
:hint="t('preferences.autoCopyHint')"
|
||||
/>
|
||||
<div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.defaultCopyFormat') }}
|
||||
</p>
|
||||
<div
|
||||
class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
|
||||
:class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
|
||||
>
|
||||
<UButton
|
||||
v-for="item in copyFormatItems"
|
||||
:key="item.value"
|
||||
size="xs"
|
||||
class="flex-1 justify-center sm:min-w-[4.5rem]"
|
||||
:variant="copyFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="copyFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
@click="setCopyFormat(item.value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 py-4 sm:px-5">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('preferences.webpQuality') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.webpQualityHint') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right text-xs text-muted">
|
||||
<p>{{ t('preferences.current', { n: clientWebpQuality }) }}</p>
|
||||
<p class="mt-0.5">
|
||||
{{ clientQualityLevel }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="100"
|
||||
:value="clientWebpQuality"
|
||||
class="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
|
||||
@input="onClientQualityInput"
|
||||
>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :title="t('settings.uploadConvenience')">
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
v-model="autoCopyMarkdown"
|
||||
:title="t('preferences.autoCopy')"
|
||||
:hint="t('preferences.autoCopyHint')"
|
||||
/>
|
||||
<div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.defaultCopyFormat') }}
|
||||
</p>
|
||||
<div
|
||||
class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
|
||||
:class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
|
||||
>
|
||||
<UButton
|
||||
v-for="item in copyFormatItems"
|
||||
:key="item.value"
|
||||
size="xs"
|
||||
class="flex-1 justify-center sm:min-w-[4.5rem]"
|
||||
:variant="copyFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="copyFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
@click="setCopyFormat(item.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
</template>
|
||||
@@ -98,10 +98,10 @@ function canDelete() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2 text-xs text-muted">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="shrink-0">{{ t('storage.storageId') }}:</span>
|
||||
<code class="min-w-0 flex-1 truncate font-mono text-dimmed">{{ backend.id }}</code>
|
||||
<code class="min-w-0 truncate font-mono text-dimmed">{{ backend.id }}</code>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
@@ -113,9 +113,9 @@ function canDelete() {
|
||||
:success-title="t('copy.copied')"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
<span>
|
||||
{{ t('storage.storageType') }}: {{ typeLabel }}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap gap-2 border-t border-default pt-4">
|
||||
|
||||
@@ -6,6 +6,7 @@ type StorageProvider = 'r2' | 'cos' | 'oss' | 'aws' | 'custom'
|
||||
|
||||
export interface StorageFormPayload {
|
||||
name: string
|
||||
provider: StorageProvider
|
||||
config: {
|
||||
endpoint: string
|
||||
region: string
|
||||
@@ -158,6 +159,7 @@ watch(provider, (value) => {
|
||||
function handleSubmit() {
|
||||
emit('submit', {
|
||||
name: name.value.trim() || providerLabel(provider.value),
|
||||
provider: provider.value,
|
||||
config: {
|
||||
endpoint: endpoint.value.trim(),
|
||||
region: region.value.trim() || 'auto',
|
||||
|
||||
Reference in new issue
Block a user