refactor: 重构设置、API、图库与存储页面前端结构。
将操作日志并入设置侧栏，补齐检查更新提示与版本接口刷新；拆分各模块组件并修复图库搜索分页变量。
This commit is contained in:
O96u committed
1 parent
270af4e707
commit
ac65c1eb9d
51 files changed
+5119
-2059
No files matched your search
@@ -3,9 +3,11 @@ const props = withDefaults(
|
||||
defineProps<{
|
||||
code: string
|
||||
scrollable?: boolean
|
||||
lang?: string
|
||||
}>(),
|
||||
{
|
||||
scrollable: true
|
||||
scrollable: true,
|
||||
lang: ''
|
||||
}
|
||||
)
|
||||
|
||||
@@ -34,6 +36,12 @@ async function copyCode() {
|
||||
<span class="size-3 rounded-full border border-black/15 bg-[#ff5f56]" />
|
||||
<span class="size-3 rounded-full border border-black/15 bg-[#ffbd2e]" />
|
||||
<span class="size-3 rounded-full border border-black/15 bg-[#27c93f]" />
|
||||
<span
|
||||
v-if="lang"
|
||||
class="ml-1 text-[10px] font-medium tracking-wide text-neutral-500 uppercase"
|
||||
>
|
||||
{{ lang }}
|
||||
</span>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-lucide-copy"
|
||||
@@ -47,7 +55,7 @@ async function copyCode() {
|
||||
</div>
|
||||
<pre
|
||||
class="overflow-auto p-4 text-xs leading-relaxed text-neutral-100"
|
||||
:class="props.scrollable ? 'max-h-80' : ''"
|
||||
><code class="font-mono">{{ props.code }}</code></pre>
|
||||
:class="scrollable ? 'max-h-80' : ''"
|
||||
><code class="font-mono whitespace-pre">{{ code }}</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
@@ -17,17 +17,12 @@ const navItems = computed(() => {
|
||||
]
|
||||
if (isAdmin.value) {
|
||||
items.push({ label: t('nav.storage'), to: '/storage', icon: 'i-lucide-hard-drive' })
|
||||
items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
|
||||
}
|
||||
items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
|
||||
return items
|
||||
})
|
||||
|
||||
const accountMenuItems = computed<DropdownMenuItem[]>(() => [
|
||||
{
|
||||
label: t('nav.logs'),
|
||||
icon: 'i-lucide-scroll-text',
|
||||
to: '/logs'
|
||||
},
|
||||
{
|
||||
label: t('nav.changePassword'),
|
||||
icon: 'i-lucide-key-round',
|
||||
@@ -48,7 +43,7 @@ const desktopUserMenuItems = computed<DropdownMenuItem[][]>(() => [
|
||||
|
||||
function isNavActive(to: string) {
|
||||
if (to === '/settings') {
|
||||
return route.path === '/settings'
|
||||
return route.path.startsWith('/settings')
|
||||
}
|
||||
return route.path.startsWith(to)
|
||||
}
|
||||
|
||||
@@ -6,6 +6,8 @@ const props = defineProps<{
|
||||
icon?: string
|
||||
block?: boolean
|
||||
successTitle?: string
|
||||
variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link'
|
||||
color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -76,7 +78,8 @@ async function copy() {
|
||||
<template>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="soft"
|
||||
:variant="variant ?? 'soft'"
|
||||
:color="color"
|
||||
:loading="copying"
|
||||
:disabled="!value"
|
||||
:label="iconOnly ? undefined : label"
|
||||
|
||||
@@ -9,20 +9,24 @@ const props = withDefaults(defineProps<{
|
||||
showKey?: boolean
|
||||
showStorage?: boolean
|
||||
compact?: boolean
|
||||
gallery?: boolean
|
||||
}>(), {
|
||||
selectable: true,
|
||||
showKey: true,
|
||||
showStorage: false,
|
||||
compact: false
|
||||
compact: false,
|
||||
gallery: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:selected': [value: boolean]
|
||||
'preview': []
|
||||
'delete': []
|
||||
}>()
|
||||
|
||||
const { formatFileSize } = useFileSize()
|
||||
const { t, locale } = useI18n()
|
||||
const toast = useToast()
|
||||
const { copyFormat } = useUploadPreferences()
|
||||
const imageError = ref(false)
|
||||
const retryCount = ref(0)
|
||||
@@ -110,13 +114,157 @@ const storageIcon = computed(() =>
|
||||
props.image.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
|
||||
)
|
||||
|
||||
const uploadSourceLabel = computed(() => {
|
||||
switch (props.image.uploadSource) {
|
||||
case 'web':
|
||||
return t('stats.tagWeb')
|
||||
case 'api':
|
||||
return t('stats.tagApi')
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
function toggleSelected(value: boolean | 'indeterminate') {
|
||||
emit('update:selected', value === true)
|
||||
}
|
||||
|
||||
const copyingUrl = ref(false)
|
||||
|
||||
async function copyGalleryUrl() {
|
||||
if (copyingUrl.value || !props.image.url) return
|
||||
copyingUrl.value = true
|
||||
try {
|
||||
if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(props.image.url)
|
||||
} else {
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = props.image.url
|
||||
textarea.setAttribute('readonly', '')
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.left = '-9999px'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textarea)
|
||||
}
|
||||
toast.add({ title: t('copy.copiedUrl'), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('copy.failedManual'), color: 'error' })
|
||||
} finally {
|
||||
copyingUrl.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated shadow-sm">
|
||||
<div
|
||||
v-if="gallery"
|
||||
class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated"
|
||||
>
|
||||
<div class="relative aspect-[4/3] shrink-0 overflow-hidden bg-muted">
|
||||
<img
|
||||
v-if="!imageError"
|
||||
:key="`${image.key}-${retryCount}`"
|
||||
:src="previewSrc"
|
||||
:alt="image.originalName"
|
||||
loading="lazy"
|
||||
class="size-full cursor-zoom-in object-cover object-center"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview')"
|
||||
@keydown.enter="emit('preview')"
|
||||
@keydown.space.prevent="emit('preview')"
|
||||
@error="onPreviewError"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="flex size-full items-center justify-center text-xs text-muted"
|
||||
>
|
||||
{{ t('image.previewFailed') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="selectable"
|
||||
class="absolute top-2 left-2"
|
||||
@click.stop
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="selected"
|
||||
:ui="{ base: 'shadow-none' }"
|
||||
@update:model-value="toggleSelected"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5 p-3">
|
||||
<p
|
||||
class="truncate text-sm font-semibold"
|
||||
:title="image.originalName"
|
||||
>
|
||||
{{ image.originalName }}
|
||||
</p>
|
||||
<p class="truncate text-xs text-muted">
|
||||
{{ uploadedLabel }} · {{ formatFileSize(image.size) }}
|
||||
</p>
|
||||
<div
|
||||
v-if="uploadSourceLabel || (showStorage && image.storage)"
|
||||
class="flex flex-wrap gap-1.5"
|
||||
>
|
||||
<span
|
||||
v-if="uploadSourceLabel"
|
||||
class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
|
||||
>
|
||||
{{ uploadSourceLabel }}
|
||||
</span>
|
||||
<span
|
||||
v-if="showStorage && image.storage"
|
||||
class="inline-flex max-w-full items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
|
||||
:title="image.storage.name"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate">{{ image.storage.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-around border-t border-default px-2 py-2 text-muted">
|
||||
<UButton
|
||||
icon="i-lucide-link"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:loading="copyingUrl"
|
||||
:aria-label="t('common.copy')"
|
||||
@click="copyGalleryUrl"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-eye"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview')"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-trash-2"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:aria-label="t('common.delete')"
|
||||
@click="emit('delete')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated shadow-sm"
|
||||
>
|
||||
<div
|
||||
class="relative aspect-square shrink-0 overflow-hidden bg-muted"
|
||||
role="button"
|
||||
|
||||
@@ -10,17 +10,31 @@ const props = withDefaults(defineProps<{
|
||||
emptyText?: string
|
||||
dense?: boolean
|
||||
compact?: boolean
|
||||
/** 图库：5 列 × 2 行，缩略图略扁 */
|
||||
gallery?: boolean
|
||||
}>(), {
|
||||
selectable: true,
|
||||
showKey: true,
|
||||
showStorage: false,
|
||||
dense: false,
|
||||
compact: false
|
||||
compact: false,
|
||||
gallery: false
|
||||
})
|
||||
|
||||
const gridClass = computed(() => {
|
||||
if (props.gallery) {
|
||||
return 'grid items-start grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
|
||||
}
|
||||
if (props.dense) {
|
||||
return 'grid items-start grid-cols-2 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
|
||||
}
|
||||
return 'grid items-start grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:selectedKeys': [value: Set<string>]
|
||||
'preview': [image: ImageItem]
|
||||
'delete': [image: ImageItem]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -38,8 +52,8 @@ function updateSelection(key: string, selected: boolean) {
|
||||
<template>
|
||||
<div
|
||||
v-if="items.length"
|
||||
class="grid items-start sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
:class="dense ? 'grid-cols-2 gap-3' : 'grid-cols-1 gap-4'"
|
||||
class="items-start"
|
||||
:class="gridClass"
|
||||
>
|
||||
<ImageCard
|
||||
v-for="image in items"
|
||||
@@ -50,8 +64,10 @@ function updateSelection(key: string, selected: boolean) {
|
||||
:show-key="showKey"
|
||||
:show-storage="showStorage"
|
||||
:compact="compact"
|
||||
:gallery="gallery"
|
||||
@update:selected="updateSelection(image.key, $event)"
|
||||
@preview="emit('preview', image)"
|
||||
@delete="emit('delete', image)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
import type { CopyFormat } from '~/composables/useUploadPreferences'
|
||||
import { formatImageDimensions, getFileExtension } from '~/utils/image-display'
|
||||
import { formatImageDimensions } from '~/utils/image-display'
|
||||
|
||||
type EmbedFormat = CopyFormat | 'bbcode'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
open: boolean
|
||||
@@ -17,6 +19,7 @@ const emit = defineEmits<{
|
||||
'delete': []
|
||||
}>()
|
||||
|
||||
const toast = useToast()
|
||||
const { formatFileSize } = useFileSize()
|
||||
const { t, locale } = useI18n()
|
||||
const { copyFormat } = useUploadPreferences()
|
||||
@@ -24,40 +27,67 @@ const { copyFormat } = useUploadPreferences()
|
||||
const naturalWidth = ref<number | null>(null)
|
||||
const naturalHeight = ref<number | null>(null)
|
||||
const dimensionsLoaded = ref(false)
|
||||
const copyingUrl = ref(false)
|
||||
const embedFormat = ref<EmbedFormat>('url')
|
||||
|
||||
const copyFormatItems = computed(() => [
|
||||
const embedFormatItems = computed(() => [
|
||||
{ label: t('copy.url'), value: 'url' as const },
|
||||
{ label: t('copy.markdown'), value: 'markdown' as const },
|
||||
{ label: t('copy.html'), value: 'html' as const }
|
||||
{ label: t('copy.html'), value: 'html' as const },
|
||||
{ label: t('copy.bbcode'), value: 'bbcode' as const }
|
||||
])
|
||||
|
||||
const uploadedLabel = computed(() => {
|
||||
if (!props.image) return '—'
|
||||
try {
|
||||
return new Date(props.image.uploadedAt).toLocaleString(locale.value, { hour12: false })
|
||||
const date = new Date(props.image.uploadedAt)
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
const h = String(date.getHours()).padStart(2, '0')
|
||||
const min = String(date.getMinutes()).padStart(2, '0')
|
||||
const s = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${y}/${m}/${d} ${h}:${min}:${s}`
|
||||
} catch {
|
||||
return props.image.uploadedAt
|
||||
}
|
||||
})
|
||||
|
||||
const sizeLabel = computed(() => {
|
||||
if (!props.image) return '—'
|
||||
return t('image.previewSizeDetail', {
|
||||
size: formatFileSize(props.image.size),
|
||||
bytes: props.image.size.toLocaleString(locale.value)
|
||||
})
|
||||
})
|
||||
|
||||
const bbcodeValue = computed(() => {
|
||||
if (!props.image) return ''
|
||||
return `[img]${props.image.url}[/img]`
|
||||
})
|
||||
|
||||
const previewValue = computed(() => {
|
||||
if (!props.image) return ''
|
||||
switch (copyFormat.value) {
|
||||
switch (embedFormat.value) {
|
||||
case 'markdown':
|
||||
return props.image.markdown
|
||||
case 'html':
|
||||
return props.image.html
|
||||
case 'bbcode':
|
||||
return bbcodeValue.value
|
||||
default:
|
||||
return props.image.url
|
||||
}
|
||||
})
|
||||
|
||||
const copySuccessTitle = computed(() => {
|
||||
switch (copyFormat.value) {
|
||||
switch (embedFormat.value) {
|
||||
case 'markdown':
|
||||
return t('copy.copiedMarkdown')
|
||||
case 'html':
|
||||
return t('copy.copiedHtml')
|
||||
case 'bbcode':
|
||||
return t('copy.copiedBbcode')
|
||||
default:
|
||||
return t('copy.copiedUrl')
|
||||
}
|
||||
@@ -67,11 +97,15 @@ const storageIcon = computed(() =>
|
||||
props.image?.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
|
||||
)
|
||||
|
||||
const uploadSourceLabel = computed(() => {
|
||||
if (!props.image?.uploadSource) return t('image.uploadSourceUnknown')
|
||||
return props.image.uploadSource === 'api'
|
||||
? t('stats.sourceApi')
|
||||
: t('stats.sourceWeb')
|
||||
const uploadSourceTag = computed(() => {
|
||||
switch (props.image?.uploadSource) {
|
||||
case 'web':
|
||||
return t('stats.tagWeb')
|
||||
case 'api':
|
||||
return t('stats.tagApi')
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const dimensionsLabel = computed(() => {
|
||||
@@ -80,45 +114,69 @@ const dimensionsLabel = computed(() => {
|
||||
return dimensionsLoaded.value ? '—' : t('image.previewDimensionsUnknown')
|
||||
})
|
||||
|
||||
const detailRows = computed(() => {
|
||||
if (!props.image) return []
|
||||
|
||||
const image = props.image
|
||||
const rows: Array<{ label: string, value: string, mono?: boolean, storage?: boolean }> = [
|
||||
{ label: t('image.previewOriginalName'), value: image.originalName },
|
||||
{ label: t('image.previewExtension'), value: getFileExtension(image.originalName) },
|
||||
{ label: t('image.previewUploadedAt'), value: uploadedLabel.value },
|
||||
{ label: t('image.previewSize'), value: formatFileSize(image.size) },
|
||||
{ label: t('image.previewContentType'), value: image.contentType },
|
||||
{ label: t('image.previewDimensions'), value: dimensionsLabel.value },
|
||||
{ label: t('image.previewUploadSource'), value: uploadSourceLabel.value }
|
||||
]
|
||||
|
||||
if (image.owner) {
|
||||
rows.push({ label: t('image.previewOwner'), value: image.owner.username })
|
||||
}
|
||||
|
||||
if (props.showStorage && image.storage) {
|
||||
rows.push({ label: t('image.previewStorage'), value: image.storage.name, storage: true })
|
||||
}
|
||||
|
||||
rows.push({ label: t('image.previewKey'), value: image.key, mono: true })
|
||||
|
||||
return rows
|
||||
})
|
||||
|
||||
watch(() => props.image?.key, () => {
|
||||
naturalWidth.value = null
|
||||
naturalHeight.value = null
|
||||
dimensionsLoaded.value = false
|
||||
})
|
||||
|
||||
function close() {
|
||||
emit('update:open', false)
|
||||
watch(() => props.open, (open) => {
|
||||
if (open) {
|
||||
embedFormat.value = copyFormat.value
|
||||
}
|
||||
})
|
||||
|
||||
function selectEmbedFormat(value: EmbedFormat) {
|
||||
embedFormat.value = value
|
||||
if (value !== 'bbcode') {
|
||||
copyFormat.value = value
|
||||
}
|
||||
}
|
||||
|
||||
function selectCopyFormat(value: CopyFormat) {
|
||||
copyFormat.value = value
|
||||
async function copyText(text: string, successTitle: string) {
|
||||
if (!text) return false
|
||||
try {
|
||||
if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text)
|
||||
toast.add({ title: successTitle, color: 'success' })
|
||||
return true
|
||||
}
|
||||
} catch {
|
||||
// fallback below
|
||||
}
|
||||
|
||||
const textarea = document.createElement('textarea')
|
||||
textarea.value = text
|
||||
textarea.setAttribute('readonly', '')
|
||||
textarea.style.position = 'fixed'
|
||||
textarea.style.left = '-9999px'
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select()
|
||||
let ok = false
|
||||
try {
|
||||
ok = document.execCommand('copy')
|
||||
} catch {
|
||||
ok = false
|
||||
} finally {
|
||||
document.body.removeChild(textarea)
|
||||
}
|
||||
|
||||
if (ok) {
|
||||
toast.add({ title: successTitle, color: 'success' })
|
||||
} else {
|
||||
toast.add({ title: t('copy.failedManual'), color: 'error' })
|
||||
}
|
||||
return ok
|
||||
}
|
||||
|
||||
async function copyLink() {
|
||||
if (!props.image?.url || copyingUrl.value) return
|
||||
copyingUrl.value = true
|
||||
try {
|
||||
await copyText(props.image.url, t('copy.copiedUrl'))
|
||||
} finally {
|
||||
copyingUrl.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openInNewTab() {
|
||||
@@ -126,6 +184,15 @@ function openInNewTab() {
|
||||
window.open(props.image.url, '_blank', 'noopener,noreferrer')
|
||||
}
|
||||
|
||||
function downloadOriginal() {
|
||||
if (!props.image?.url) return
|
||||
const link = document.createElement('a')
|
||||
link.href = props.image.url
|
||||
link.download = props.image.originalName || 'image'
|
||||
link.rel = 'noopener'
|
||||
link.click()
|
||||
}
|
||||
|
||||
function requestDelete() {
|
||||
emit('delete')
|
||||
}
|
||||
@@ -142,6 +209,7 @@ function onImageLoad(event: Event) {
|
||||
<UModal
|
||||
:open="open && !!image"
|
||||
:title="t('image.previewTitle')"
|
||||
:description="t('image.previewSubtitle')"
|
||||
:ui="{ content: 'max-w-5xl' }"
|
||||
@update:open="emit('update:open', $event)"
|
||||
>
|
||||
@@ -149,108 +217,207 @@ function onImageLoad(event: Event) {
|
||||
v-if="image"
|
||||
#body
|
||||
>
|
||||
<div class="grid gap-5 md:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] md:items-stretch">
|
||||
<div class="flex min-h-[14rem] items-center justify-center overflow-hidden rounded-xl border border-default bg-muted/15 p-3 md:min-h-[22rem]">
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="image.originalName"
|
||||
class="max-h-[min(70vh,32rem)] w-full object-contain"
|
||||
@load="onImageLoad"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex min-h-0 flex-col gap-4">
|
||||
<dl class="grid gap-2.5 sm:grid-cols-2">
|
||||
<div
|
||||
v-for="row in detailRows"
|
||||
:key="row.label"
|
||||
class="min-w-0 rounded-lg border border-default/60 bg-muted/10 px-3 py-2"
|
||||
:class="row.mono ? 'sm:col-span-2' : ''"
|
||||
<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"
|
||||
>
|
||||
<dt class="text-xs text-muted">
|
||||
{{ row.label }}
|
||||
</div>
|
||||
|
||||
<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') }}
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-0.5 break-all text-sm"
|
||||
:class="row.mono ? 'font-mono text-xs text-dimmed' : 'font-medium'"
|
||||
>
|
||||
<span
|
||||
v-if="row.storage && image.storage"
|
||||
class="inline-flex items-center gap-1.5"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon"
|
||||
class="size-3.5 shrink-0"
|
||||
/>
|
||||
{{ row.value }}
|
||||
</span>
|
||||
<template v-else>
|
||||
{{ row.value }}
|
||||
</template>
|
||||
<dd class="min-w-0 flex-1 break-all font-medium">
|
||||
{{ image.originalName }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="mt-auto space-y-2 rounded-xl border border-default/70 bg-muted/10 p-3">
|
||||
<p class="text-xs font-medium text-muted">
|
||||
{{ t('image.previewLinks') }}
|
||||
</p>
|
||||
<div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
|
||||
<UButton
|
||||
v-for="item in copyFormatItems"
|
||||
:key="item.value"
|
||||
size="xs"
|
||||
class="flex-1 justify-center"
|
||||
:variant="copyFormat === item.value ? 'solid' : 'ghost'"
|
||||
:color="copyFormat === item.value ? 'primary' : 'neutral'"
|
||||
:label="item.label"
|
||||
@click="selectCopyFormat(item.value)"
|
||||
/>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewUploadedAt') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ uploadedLabel }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<UInput
|
||||
:model-value="previewValue"
|
||||
readonly
|
||||
size="sm"
|
||||
class="min-w-0 flex-1 font-mono text-xs"
|
||||
/>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
:label="t('common.copy')"
|
||||
:value="previewValue"
|
||||
:success-title="copySuccessTitle"
|
||||
/>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewSize') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ sizeLabel }}
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewDimensions') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ dimensionsLabel }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewContentType') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ image.contentType }}
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
v-if="showStorage && image.storage"
|
||||
class="flex gap-4 py-2.5"
|
||||
>
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewStorage') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<UIcon
|
||||
:name="storageIcon"
|
||||
class="size-3.5 shrink-0 text-muted"
|
||||
/>
|
||||
{{ image.storage.name }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
v-if="uploadSourceTag"
|
||||
class="flex gap-4 py-2.5"
|
||||
>
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewUploadSource') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
<span class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
||||
{{ uploadSourceTag }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div
|
||||
v-if="image.owner"
|
||||
class="flex gap-4 py-2.5"
|
||||
>
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewOwner') }}
|
||||
</dt>
|
||||
<dd class="min-w-0 flex-1">
|
||||
{{ image.owner.username }}
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex gap-4 py-2.5 last:pb-0">
|
||||
<dt class="w-20 shrink-0 text-muted">
|
||||
{{ t('image.previewKey') }}
|
||||
</dt>
|
||||
<dd class="flex min-w-0 flex-1 items-start gap-2">
|
||||
<span class="min-w-0 flex-1 break-all font-mono text-xs text-dimmed">
|
||||
{{ image.key }}
|
||||
</span>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="image.key"
|
||||
:success-title="t('copy.copied')"
|
||||
/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="flex flex-wrap justify-end gap-2 border-t border-default pt-3">
|
||||
<UButton
|
||||
:label="t('image.previewOpen')"
|
||||
icon="i-lucide-external-link"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="openInNewTab"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('common.delete')"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:loading="deleting"
|
||||
@click="requestDelete"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('image.previewClose')"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="close"
|
||||
/>
|
||||
<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
|
||||
v-if="image"
|
||||
#footer
|
||||
>
|
||||
<div class="flex w-full flex-wrap justify-end gap-1.5">
|
||||
<UButton
|
||||
:label="t('image.previewOpen')"
|
||||
icon="i-lucide-external-link"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="openInNewTab"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('image.previewDownload')"
|
||||
icon="i-lucide-download"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="downloadOriginal"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('image.previewCopyLink')"
|
||||
icon="i-lucide-link"
|
||||
color="primary"
|
||||
size="sm"
|
||||
:loading="copyingUrl"
|
||||
@click="copyLink"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('common.delete')"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:loading="deleting"
|
||||
@click="requestDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.preview-checkerboard {
|
||||
background-color: var(--ui-bg-muted);
|
||||
background-image:
|
||||
linear-gradient(45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%);
|
||||
background-size: 14px 14px;
|
||||
background-position: 0 0, 0 7px, 7px -7px, -7px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -136,24 +136,6 @@ function toggleOpen() {
|
||||
{{ t('nav.account') }}
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<NuxtLink
|
||||
to="/logs"
|
||||
class="flex items-center justify-between rounded-lg border border-default px-3.5 py-2.5 text-sm text-highlighted transition-colors hover:bg-elevated"
|
||||
@click="open = false"
|
||||
>
|
||||
<span class="flex items-center gap-2.5">
|
||||
<UIcon
|
||||
name="i-lucide-scroll-text"
|
||||
class="size-4 opacity-70"
|
||||
/>
|
||||
{{ t('nav.logs') }}
|
||||
</span>
|
||||
<UIcon
|
||||
name="i-lucide-chevron-right"
|
||||
class="size-4 text-muted"
|
||||
/>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
to="/account/password"
|
||||
class="flex items-center justify-between rounded-lg border border-default px-3.5 py-2.5 text-sm text-highlighted transition-colors hover:bg-elevated"
|
||||
|
||||
@@ -1,124 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
type PageItem = number | 'ellipsis'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
page: number
|
||||
totalPages: number
|
||||
total: number
|
||||
unit?: string
|
||||
loading?: boolean
|
||||
}>()
|
||||
pageSize?: number
|
||||
pageSizeOptions?: number[]
|
||||
}>(), {
|
||||
loading: false,
|
||||
pageSizeOptions: () => [10, 20, 30, 50]
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:page': [page: number]
|
||||
'update:pageSize': [pageSize: number]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const unitLabel = computed(() => props.unit ?? t('common.itemsUnit'))
|
||||
const jumpInput = ref('')
|
||||
const jumpPageInput = ref('')
|
||||
|
||||
const showMobilePageNumbers = computed(() => props.totalPages <= 5)
|
||||
|
||||
const visiblePages = computed<PageItem[]>(() => {
|
||||
const total = Math.max(1, props.totalPages)
|
||||
const current = Math.min(Math.max(1, props.page), total)
|
||||
|
||||
if (total <= 7) {
|
||||
return Array.from({ length: total }, (_, index) => index + 1)
|
||||
}
|
||||
|
||||
const pages = new Set<number>([1, total])
|
||||
for (let page = current - 1; page <= current + 1; page++) {
|
||||
if (page >= 1 && page <= total) pages.add(page)
|
||||
}
|
||||
|
||||
const sorted = [...pages].sort((a, b) => a - b)
|
||||
const items: PageItem[] = []
|
||||
|
||||
for (let index = 0; index < sorted.length; index++) {
|
||||
const page = sorted[index]!
|
||||
const prev = sorted[index - 1]
|
||||
if (prev !== undefined && page - prev > 1) {
|
||||
items.push('ellipsis')
|
||||
}
|
||||
items.push(page)
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
const pageSizeItems = computed(() =>
|
||||
props.pageSizeOptions.map(size => ({
|
||||
label: t('pagination.perPage', { size }),
|
||||
value: size
|
||||
}))
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.page,
|
||||
(page) => {
|
||||
jumpPageInput.value = String(page)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function goTo(target: number) {
|
||||
if (target < 1 || target > props.totalPages || props.loading) {
|
||||
return
|
||||
}
|
||||
if (target === props.page) {
|
||||
jumpInput.value = ''
|
||||
return
|
||||
}
|
||||
if (target < 1 || target > props.totalPages || props.loading) return
|
||||
if (target === props.page) return
|
||||
emit('update:page', target)
|
||||
}
|
||||
|
||||
function submitJump() {
|
||||
const raw = String(jumpInput.value ?? '').trim()
|
||||
if (!raw) return
|
||||
const parsed = Number.parseInt(raw, 10)
|
||||
if (!Number.isFinite(parsed)) return
|
||||
goTo(parsed)
|
||||
function onPageSizeChange(value: unknown) {
|
||||
const size = Number(value)
|
||||
if (!Number.isFinite(size) || size <= 0 || size === props.pageSize) return
|
||||
emit('update:pageSize', size)
|
||||
}
|
||||
|
||||
watch(() => props.page, () => {
|
||||
jumpInput.value = ''
|
||||
})
|
||||
function jumpToPage() {
|
||||
const target = Number.parseInt(jumpPageInput.value, 10)
|
||||
if (!Number.isFinite(target)) return
|
||||
goTo(target)
|
||||
}
|
||||
|
||||
function pageButtonClass(target: number) {
|
||||
return target === props.page
|
||||
? 'border-primary bg-primary/10 text-primary font-medium'
|
||||
: 'border-default bg-elevated text-default hover:bg-muted'
|
||||
}
|
||||
|
||||
const navButtonClass = 'inline-flex items-center justify-center rounded-md border border-default bg-elevated text-default transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-40'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="total > 0"
|
||||
class="flex flex-col items-center gap-2 border-t border-default pt-4 sm:flex-row sm:justify-between"
|
||||
class="border-t border-default pt-4"
|
||||
>
|
||||
<p
|
||||
v-if="totalPages > 1"
|
||||
class="text-sm text-muted"
|
||||
>
|
||||
{{ t('pagination.pageOf', { page, totalPages, total, unit: unitLabel }) }}
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-sm text-muted"
|
||||
>
|
||||
{{ t('pagination.totalOnly', { total, unit: unitLabel }) }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="totalPages > 1"
|
||||
class="flex flex-wrap items-center justify-center gap-1"
|
||||
>
|
||||
<UButton
|
||||
icon="i-lucide-chevrons-left"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.first')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(1)"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-chevron-left"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.prev')"
|
||||
:disabled="page <= 1 || loading"
|
||||
@click="goTo(page - 1)"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-chevron-right"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.next')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(page + 1)"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-chevrons-right"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:aria-label="t('pagination.last')"
|
||||
:disabled="page >= totalPages || loading"
|
||||
@click="goTo(totalPages)"
|
||||
/>
|
||||
<form
|
||||
class="ml-1 flex items-center gap-1"
|
||||
@submit.prevent="submitJump"
|
||||
>
|
||||
<UInput
|
||||
v-model="jumpInput"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="totalPages"
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center justify-between gap-2 sm:hidden">
|
||||
<p class="text-sm text-muted">
|
||||
{{ t('pagination.totalCount', { total, unit: unitLabel }) }}
|
||||
</p>
|
||||
<USelect
|
||||
v-if="pageSize !== undefined"
|
||||
:model-value="pageSize"
|
||||
:items="pageSizeItems"
|
||||
value-key="value"
|
||||
size="sm"
|
||||
class="w-16"
|
||||
:placeholder="t('pagination.pagePlaceholder')"
|
||||
class="w-[6.5rem] shrink-0"
|
||||
:aria-label="t('pagination.pageSize')"
|
||||
:disabled="loading"
|
||||
:aria-label="t('pagination.pagePlaceholder')"
|
||||
@keyup.enter="submitJump"
|
||||
@update:model-value="onPageSizeChange"
|
||||
/>
|
||||
<UButton
|
||||
type="button"
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="hidden text-sm text-muted sm:block">
|
||||
{{ t('pagination.totalCount', { total, unit: unitLabel }) }}
|
||||
</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"
|
||||
variant="outline"
|
||||
:label="t('pagination.goTo')"
|
||||
:disabled="loading || !String(jumpInput ?? '').trim()"
|
||||
@click="submitJump"
|
||||
class="hidden w-[7.5rem] shrink-0 sm:block"
|
||||
:aria-label="t('pagination.pageSize')"
|
||||
:disabled="loading"
|
||||
@update:model-value="onPageSizeChange"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,13 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
embedded?: boolean
|
||||
}>(),
|
||||
{
|
||||
embedded: false
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: []
|
||||
}>()
|
||||
@@ -57,17 +48,8 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col overflow-hidden max-sm:overflow-visible"
|
||||
:class="
|
||||
embedded
|
||||
? ''
|
||||
: 'upload-card-surface upload-card-surface--panel max-sm:min-h-0 sm:h-full'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6"
|
||||
>
|
||||
<div class="upload-card-surface upload-card-surface--panel flex max-sm:min-h-0 flex-col overflow-hidden max-sm:overflow-visible sm:h-full">
|
||||
<div class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
|
||||
<div class="flex min-w-0 items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-settings-2"
|
||||
@@ -83,7 +65,6 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
v-if="!embedded"
|
||||
:label="t('common.back')"
|
||||
icon="i-lucide-arrow-left"
|
||||
variant="ghost"
|
||||
@@ -95,10 +76,7 @@ onMounted(() => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-5 sm:p-6"
|
||||
:class="embedded ? '' : 'flex flex-1 flex-col justify-center'"
|
||||
>
|
||||
<div class="flex flex-1 flex-col justify-center p-5 sm:p-6">
|
||||
<div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">
|
||||
@@ -128,9 +106,7 @@ onMounted(() => {
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<span class="min-w-0 flex-1">
|
||||
<span
|
||||
class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm"
|
||||
>
|
||||
<span class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm">
|
||||
<span>{{ t('preferences.autoDeletePrefix') }}</span>
|
||||
<UInput
|
||||
v-model.number="userAutoDeleteDaysDraft"
|
||||
@@ -139,11 +115,7 @@ onMounted(() => {
|
||||
max="3650"
|
||||
size="xs"
|
||||
class="w-14 tabular-nums"
|
||||
:class="
|
||||
userAutoDeleteEnabled
|
||||
? ''
|
||||
: 'pointer-events-none opacity-40'
|
||||
"
|
||||
:class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
|
||||
/>
|
||||
<span>{{ t('preferences.autoDeleteSuffix') }}</span>
|
||||
</span>
|
||||
@@ -171,9 +143,7 @@ onMounted(() => {
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('preferences.webpQualityHint') }}
|
||||
</p>
|
||||
<div
|
||||
class="flex items-center justify-between gap-2 text-sm text-muted"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2 text-sm text-muted">
|
||||
<span>{{ t('preferences.current', { n: clientWebpQuality }) }}</span>
|
||||
<span>{{ clientQualityLevel }}</span>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,379 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocEndpoint, ApiDocParam } from '~/composables/useApiDocs'
|
||||
|
||||
const props = defineProps<{
|
||||
endpoint: ApiDocEndpoint
|
||||
token: string
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
|
||||
const authToken = ref('')
|
||||
const paramValues = ref<Record<string, string>>({})
|
||||
const fileValues = ref<Record<string, File | null>>({})
|
||||
const fileInputRefs = ref<Record<string, HTMLInputElement | null>>({})
|
||||
const sending = ref(false)
|
||||
const responseStatus = ref<number | null>(null)
|
||||
const responseBody = ref('')
|
||||
const responseError = ref(false)
|
||||
|
||||
function isDebugParam(param: ApiDocParam) {
|
||||
if (param.name === 'token' && props.endpoint.requiresAuth) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const debugQueryParams = computed(() =>
|
||||
props.endpoint.params.filter(p => p.location === 'query' && isDebugParam(p))
|
||||
)
|
||||
|
||||
const debugBodyParams = computed(() =>
|
||||
props.endpoint.params.filter(p =>
|
||||
(p.location === 'form-data' || p.location === 'body') && isDebugParam(p)
|
||||
)
|
||||
)
|
||||
|
||||
const showAuthHeader = computed(() => props.endpoint.requiresAuth)
|
||||
|
||||
watch(
|
||||
() => props.endpoint.id,
|
||||
() => {
|
||||
resetForm()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.token,
|
||||
(value) => {
|
||||
if (value) {
|
||||
authToken.value = value
|
||||
if (!props.endpoint.requiresAuth && 'token' in paramValues.value) {
|
||||
paramValues.value.token = value
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
function resetForm() {
|
||||
const values: Record<string, string> = {}
|
||||
const files: Record<string, File | null> = {}
|
||||
for (const param of props.endpoint.params) {
|
||||
if (!isDebugParam(param)) continue
|
||||
if (param.type === 'file') {
|
||||
files[param.name] = null
|
||||
} else if (param.name === 'keys') {
|
||||
values[param.name] = '["images/2026/08/example.webp"]'
|
||||
} else if (param.name === 'token' && props.token) {
|
||||
values[param.name] = props.token
|
||||
} else {
|
||||
values[param.name] = ''
|
||||
}
|
||||
}
|
||||
paramValues.value = values
|
||||
fileValues.value = files
|
||||
responseStatus.value = null
|
||||
responseBody.value = ''
|
||||
responseError.value = false
|
||||
}
|
||||
|
||||
function fileLabel(name: string) {
|
||||
return fileValues.value[name]?.name ?? t('api.debug.noFileSelected')
|
||||
}
|
||||
|
||||
function triggerFilePick(name: string) {
|
||||
fileInputRefs.value[name]?.click()
|
||||
}
|
||||
|
||||
function onFileChange(name: string, event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
fileValues.value[name] = input.files?.[0] ?? null
|
||||
}
|
||||
|
||||
function isParamFilled(param: ApiDocParam) {
|
||||
if (param.type === 'file') {
|
||||
return fileValues.value[param.name] != null
|
||||
}
|
||||
const value = paramValues.value[param.name]?.trim() ?? ''
|
||||
if (!value) return false
|
||||
if (param.location === 'body' && param.name === 'keys') {
|
||||
try {
|
||||
const parsed = JSON.parse(value) as { keys?: unknown }
|
||||
return Array.isArray(parsed.keys) && parsed.keys.length > 0
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const canSendRequest = computed(() => {
|
||||
if (sending.value) return false
|
||||
if (showAuthHeader.value && !authToken.value.trim()) return false
|
||||
const params = [...debugQueryParams.value, ...debugBodyParams.value]
|
||||
return params.every(param => !param.required || isParamFilled(param))
|
||||
})
|
||||
|
||||
function buildUrl() {
|
||||
const url = new URL(props.endpoint.path, window.location.origin)
|
||||
for (const param of debugQueryParams.value) {
|
||||
const value = paramValues.value[param.name]?.trim()
|
||||
if (value) {
|
||||
url.searchParams.set(param.name, value)
|
||||
}
|
||||
}
|
||||
return url.toString()
|
||||
}
|
||||
|
||||
async function sendRequest() {
|
||||
if (!canSendRequest.value) return
|
||||
sending.value = true
|
||||
responseStatus.value = null
|
||||
responseBody.value = ''
|
||||
responseError.value = false
|
||||
|
||||
try {
|
||||
const headers: Record<string, string> = {}
|
||||
if (showAuthHeader.value && authToken.value.trim()) {
|
||||
headers['Auth-Token'] = authToken.value.trim()
|
||||
}
|
||||
|
||||
let body: BodyInit | undefined
|
||||
|
||||
if (debugBodyParams.value.some(p => p.location === 'form-data')) {
|
||||
const formData = new FormData()
|
||||
for (const param of debugBodyParams.value) {
|
||||
if (param.location !== 'form-data') continue
|
||||
if (param.type === 'file') {
|
||||
const file = fileValues.value[param.name]
|
||||
if (file) formData.append(param.name, file)
|
||||
} else {
|
||||
const value = paramValues.value[param.name]?.trim()
|
||||
if (value) formData.append(param.name, value)
|
||||
}
|
||||
}
|
||||
body = formData
|
||||
} else if (debugBodyParams.value.some(p => p.location === 'body')) {
|
||||
headers['Content-Type'] = 'application/json'
|
||||
try {
|
||||
body = JSON.stringify(JSON.parse(paramValues.value.keys || '{}'))
|
||||
} catch {
|
||||
toast.add({ title: t('api.debug.invalidJson'), color: 'error' })
|
||||
sending.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const response = await fetch(buildUrl(), {
|
||||
method: props.endpoint.method,
|
||||
headers,
|
||||
body,
|
||||
credentials: 'include'
|
||||
})
|
||||
|
||||
responseStatus.value = response.status
|
||||
const text = await response.text()
|
||||
try {
|
||||
responseBody.value = JSON.stringify(JSON.parse(text), null, 2)
|
||||
} catch {
|
||||
responseBody.value = text
|
||||
}
|
||||
responseError.value = !response.ok
|
||||
} catch {
|
||||
responseError.value = true
|
||||
responseBody.value = t('api.debug.networkError')
|
||||
toast.add({ title: t('api.debug.sendFailed'), color: 'error' })
|
||||
} finally {
|
||||
sending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const responseScrollable = computed(() => responseBody.value.split('\n').length > 14)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="flex w-full shrink-0 flex-col border-t border-default bg-default lg:w-72 lg:border-t-0 lg:border-l xl:w-80">
|
||||
<div class="flex items-start gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-flask-conical"
|
||||
class="mt-0.5 size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-base font-semibold">
|
||||
{{ t('api.debug.title') }}
|
||||
</h3>
|
||||
<div class="mt-1.5 flex flex-wrap items-center gap-2">
|
||||
<ApiMethodBadge
|
||||
:method="endpoint.method"
|
||||
size="sm"
|
||||
/>
|
||||
<code class="truncate font-mono text-xs text-muted">
|
||||
{{ endpoint.path }}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="space-y-3 p-5 sm:p-6">
|
||||
<section
|
||||
v-if="showAuthHeader"
|
||||
class="rounded-xl border border-default p-3 sm:p-4"
|
||||
>
|
||||
<h4 class="mb-3 text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.headers') }}
|
||||
</h4>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs text-muted">
|
||||
Auth-Token
|
||||
<span class="text-error">*</span>
|
||||
</label>
|
||||
<UInput
|
||||
v-model="authToken"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
:placeholder="t('api.debug.tokenPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-if="debugQueryParams.length"
|
||||
class="rounded-xl border border-default p-3 sm:p-4"
|
||||
>
|
||||
<h4 class="mb-3 text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.query') }}
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="param in debugQueryParams"
|
||||
:key="param.name"
|
||||
class="space-y-1.5"
|
||||
>
|
||||
<label class="text-xs text-muted">
|
||||
{{ param.name }}
|
||||
<span
|
||||
v-if="param.required"
|
||||
class="text-error"
|
||||
>*</span>
|
||||
</label>
|
||||
<UInput
|
||||
v-model="paramValues[param.name]"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-if="debugBodyParams.length"
|
||||
class="rounded-xl border border-default p-3 sm:p-4"
|
||||
>
|
||||
<h4 class="mb-3 text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.body') }}
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="param in debugBodyParams"
|
||||
:key="param.name"
|
||||
class="space-y-1.5"
|
||||
>
|
||||
<label class="text-xs text-muted">
|
||||
{{ param.name }}
|
||||
<span
|
||||
v-if="param.required"
|
||||
class="text-error"
|
||||
>*</span>
|
||||
</label>
|
||||
|
||||
<div
|
||||
v-if="param.type === 'file'"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<input
|
||||
:ref="(el) => { fileInputRefs[param.name] = el as HTMLInputElement }"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
@change="onFileChange(param.name, $event)"
|
||||
>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:label="t('api.debug.selectFile')"
|
||||
@click="triggerFilePick(param.name)"
|
||||
/>
|
||||
<span class="min-w-0 truncate text-xs text-muted">
|
||||
{{ fileLabel(param.name) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<UTextarea
|
||||
v-else-if="param.location === 'body'"
|
||||
v-model="paramValues[param.name]"
|
||||
:rows="3"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
/>
|
||||
<UInput
|
||||
v-else
|
||||
v-model="paramValues[param.name]"
|
||||
size="sm"
|
||||
class="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<UButton
|
||||
icon="i-lucide-send"
|
||||
:label="t('api.debug.send')"
|
||||
color="primary"
|
||||
block
|
||||
:loading="sending"
|
||||
:disabled="!canSendRequest"
|
||||
@click="sendRequest"
|
||||
/>
|
||||
|
||||
<section
|
||||
v-if="responseStatus !== null || responseBody"
|
||||
class="overflow-hidden rounded-xl border border-default"
|
||||
>
|
||||
<div class="flex items-center justify-between border-b border-default px-3 py-2">
|
||||
<span class="text-xs font-semibold text-highlighted">
|
||||
{{ t('api.debug.response') }}
|
||||
</span>
|
||||
<UBadge
|
||||
v-if="responseStatus !== null"
|
||||
:color="responseError ? 'error' : 'success'"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ responseStatus }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<pre
|
||||
class="api-debug-response bg-neutral-950 p-3 text-xs leading-relaxed text-neutral-100"
|
||||
:class="responseScrollable ? 'max-h-64 overflow-y-auto' : ''"
|
||||
><code class="font-mono whitespace-pre">{{ responseBody }}</code></pre>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto border-t border-default p-5 sm:p-6">
|
||||
<h4 class="mb-2 text-xs font-semibold">
|
||||
{{ t('api.debug.notesTitle') }}
|
||||
</h4>
|
||||
<ul class="space-y-1 text-xs leading-relaxed text-muted">
|
||||
<li>{{ t('api.debug.noteSuccess') }}</li>
|
||||
<li>{{ t('api.debug.noteError') }}</li>
|
||||
<li>{{ t('api.debug.noteLimit') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocEndpoint } from '~/composables/useApiDocs'
|
||||
|
||||
defineProps<{
|
||||
endpoint: ApiDocEndpoint
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="p-5 sm:p-6">
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t(endpoint.titleKey) }}
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 flex flex-wrap items-center gap-2">
|
||||
<ApiMethodBadge
|
||||
:method="endpoint.method"
|
||||
size="sm"
|
||||
/>
|
||||
<code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
|
||||
{{ endpoint.path }}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-sm leading-relaxed text-muted">
|
||||
{{ t(endpoint.descKey) }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="endpoint.params.length"
|
||||
class="mt-5 overflow-hidden rounded-xl border border-default"
|
||||
>
|
||||
<div class="border-b border-default bg-muted/20 px-4 py-2.5">
|
||||
<h3 class="text-sm font-medium">
|
||||
{{ t('api.requestParams') }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full min-w-[32rem] text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-default text-xs text-muted">
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramName') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramType') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramLocation') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramRequired') }}
|
||||
</th>
|
||||
<th class="px-4 py-2.5 font-medium">
|
||||
{{ t('api.paramDescription') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="param in endpoint.params"
|
||||
:key="param.name"
|
||||
class="border-b border-default last:border-b-0"
|
||||
>
|
||||
<td class="px-4 py-2.5 font-mono text-xs">
|
||||
{{ param.name }}
|
||||
<span
|
||||
v-if="param.required"
|
||||
class="text-error"
|
||||
>*</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-muted">
|
||||
{{ param.type }}
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-muted">
|
||||
{{ param.location }}
|
||||
</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<UBadge
|
||||
:color="param.required ? 'primary' : 'neutral'"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ param.required ? t('api.required') : t('api.optional') }}
|
||||
</UBadge>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-muted">
|
||||
{{ t(param.descriptionKey) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 space-y-4">
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.requestExample') }}
|
||||
</p>
|
||||
<ApiCurlBlock
|
||||
:code="endpoint.curl"
|
||||
lang="cURL"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.responseExample') }}
|
||||
<span class="font-normal">200 OK</span>
|
||||
</p>
|
||||
<ApiCurlBlock
|
||||
:code="endpoint.responseExample"
|
||||
lang="JSON"
|
||||
:scrollable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocMethod } from '~/composables/useApiDocs'
|
||||
|
||||
const props = defineProps<{
|
||||
method: ApiDocMethod
|
||||
size?: 'xs' | 'sm'
|
||||
}>()
|
||||
|
||||
const colorClass = computed(() => {
|
||||
switch (props.method) {
|
||||
case 'GET':
|
||||
return 'bg-sky-500/15 text-sky-700 dark:text-sky-300'
|
||||
case 'POST':
|
||||
return 'bg-primary/15 text-primary'
|
||||
case 'DELETE':
|
||||
return 'bg-red-500/15 text-red-700 dark:text-red-300'
|
||||
default:
|
||||
return 'bg-muted text-muted'
|
||||
}
|
||||
})
|
||||
|
||||
const sizeClass = computed(() =>
|
||||
props.size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-1.5 py-0.5 text-[10px]'
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex shrink-0 rounded font-mono font-semibold leading-none"
|
||||
:class="[colorClass, sizeClass]"
|
||||
>
|
||||
{{ method }}
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import type { ApiDocCategory, ApiDocEndpoint } from '~/composables/useApiDocs'
|
||||
|
||||
const props = defineProps<{
|
||||
endpoints: ApiDocEndpoint[]
|
||||
activeId: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [id: string]
|
||||
}>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const search = ref('')
|
||||
const docsUrl = computed(() =>
|
||||
locale.value === 'en'
|
||||
? 'https://o96u.github.io/PicHost/en/guide/api.html'
|
||||
: 'https://o96u.github.io/PicHost/guide/api.html'
|
||||
)
|
||||
|
||||
const categories: { key: ApiDocCategory, labelKey: string }[] = [
|
||||
{ key: 'image', labelKey: 'api.categories.image' },
|
||||
{ key: 'extension', labelKey: 'api.categories.extension' },
|
||||
{ key: 'system', labelKey: 'api.categories.system' }
|
||||
]
|
||||
|
||||
const filteredEndpoints = computed(() => {
|
||||
const q = search.value.trim().toLowerCase()
|
||||
if (!q) return props.endpoints
|
||||
return props.endpoints.filter((endpoint) => {
|
||||
const title = t(endpoint.titleKey).toLowerCase()
|
||||
const path = endpoint.path.toLowerCase()
|
||||
return title.includes(q) || path.includes(q) || endpoint.method.toLowerCase().includes(q)
|
||||
})
|
||||
})
|
||||
|
||||
function endpointsForCategory(category: ApiDocCategory) {
|
||||
return filteredEndpoints.value.filter(endpoint => endpoint.category === category)
|
||||
}
|
||||
|
||||
function onSelect(id: string) {
|
||||
emit('select', id)
|
||||
}
|
||||
|
||||
function onSearchKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
search.value = ''
|
||||
event.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const onGlobalKeydown = (event: KeyboardEvent) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
|
||||
event.preventDefault()
|
||||
document.getElementById('api-endpoint-search')?.focus()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onGlobalKeydown)
|
||||
onUnmounted(() => window.removeEventListener('keydown', onGlobalKeydown))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="flex w-full shrink-0 flex-col border-b border-default bg-default lg:w-52 lg:border-b-0 lg:border-r lg:bg-neutral-50 dark:lg:bg-neutral-900/30 xl:w-56">
|
||||
<div class="border-b border-default p-3 sm:p-4">
|
||||
<UInput
|
||||
id="api-endpoint-search"
|
||||
v-model="search"
|
||||
:placeholder="t('api.searchPlaceholder')"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
@keydown="onSearchKeydown"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd
|
||||
size="sm"
|
||||
class="hidden sm:inline-flex"
|
||||
>
|
||||
⌘K
|
||||
</UKbd>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 overflow-y-auto p-2 sm:p-3">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.key"
|
||||
class="mb-4"
|
||||
>
|
||||
<p
|
||||
v-if="endpointsForCategory(category.key).length"
|
||||
class="mb-1.5 px-2 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t(category.labelKey) }}
|
||||
</p>
|
||||
<ul class="space-y-0.5">
|
||||
<li
|
||||
v-for="endpoint in endpointsForCategory(category.key)"
|
||||
:key="endpoint.id"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors"
|
||||
:class="activeId === endpoint.id
|
||||
? 'bg-primary/10 font-medium text-primary'
|
||||
: 'text-muted hover:bg-muted/40 hover:text-highlighted'"
|
||||
@click="onSelect(endpoint.id)"
|
||||
>
|
||||
<ApiMethodBadge :method="endpoint.method" />
|
||||
<span class="min-w-0 truncate">{{ t(endpoint.titleKey) }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hidden border-t border-default p-3 sm:p-4 lg:block">
|
||||
<div class="rounded-xl border border-primary/15 bg-primary/5 p-3">
|
||||
<div class="flex items-start gap-2.5">
|
||||
<UIcon
|
||||
name="i-lucide-book-open"
|
||||
class="mt-0.5 size-4 shrink-0 text-primary"
|
||||
/>
|
||||
<div class="min-w-0 space-y-2">
|
||||
<p class="text-xs font-medium text-highlighted">
|
||||
{{ t('api.helpTitle') }}
|
||||
</p>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('api.helpSubtitle') }}
|
||||
</p>
|
||||
<UButton
|
||||
:label="t('api.viewDocs')"
|
||||
icon="i-lucide-external-link"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:to="docsUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
token: string
|
||||
loading: boolean
|
||||
regenerating: boolean
|
||||
canRegenerate: boolean
|
||||
tokenSource?: 'env' | 'db' | 'none'
|
||||
envTokenOverride?: boolean
|
||||
isAdmin?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
regenerate: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const toast = useToast()
|
||||
const tokenVisible = ref(false)
|
||||
const copying = ref(false)
|
||||
|
||||
function toggleTokenVisible() {
|
||||
tokenVisible.value = !tokenVisible.value
|
||||
}
|
||||
|
||||
const displayValue = computed(() => {
|
||||
if (!props.token) return t('common.notConfigured')
|
||||
if (tokenVisible.value) return props.token
|
||||
return '•'.repeat(Math.min(props.token.length, 40))
|
||||
})
|
||||
|
||||
function tokenSourceLabel(source: 'env' | 'db' | 'none' | undefined) {
|
||||
switch (source) {
|
||||
case 'env':
|
||||
return t('api.tokenSourceEnv')
|
||||
case 'db':
|
||||
return t('api.tokenSourceDb')
|
||||
default:
|
||||
return t('api.tokenSourceNone')
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToken() {
|
||||
if (!props.token || copying.value) return
|
||||
copying.value = true
|
||||
try {
|
||||
await navigator.clipboard.writeText(props.token)
|
||||
toast.add({ title: t('copy.copied'), color: 'success' })
|
||||
} catch {
|
||||
toast.add({ title: t('copy.failed'), color: 'error' })
|
||||
} finally {
|
||||
copying.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="border-b border-default">
|
||||
<div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-key-round"
|
||||
class="size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('api.tokenTitle') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 p-5 sm:p-6">
|
||||
<UAlert
|
||||
v-if="envTokenOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:title="t('api.envOverrideTitle')"
|
||||
:description="t('api.envOverrideDesc')"
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!isAdmin"
|
||||
color="info"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:title="t('api.personalTitle')"
|
||||
:description="t('api.personalDesc')"
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-else-if="!token && !loading"
|
||||
color="info"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:title="t('api.notConfiguredTitle')"
|
||||
:description="t('api.notConfiguredDesc')"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-stretch">
|
||||
<UInput
|
||||
:model-value="displayValue"
|
||||
readonly
|
||||
class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
|
||||
:loading="loading"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:label="tokenVisible ? t('api.hideToken') : t('api.showToken')"
|
||||
@click="toggleTokenVisible"
|
||||
/>
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:label="t('common.copy')"
|
||||
:loading="copying"
|
||||
:disabled="!token"
|
||||
@click="copyToken"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-refresh-cw"
|
||||
:label="t('api.regenerate')"
|
||||
color="primary"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
:loading="regenerating"
|
||||
:disabled="!canRegenerate"
|
||||
@click="emit('regenerate')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="tokenSource"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ tokenSourceLabel(tokenSource) }}
|
||||
· {{ t('api.tokenHeader') }}
|
||||
<code class="font-mono">Auth-Token: <token></code>
|
||||
<template v-if="token && !envTokenOverride">
|
||||
· {{ t('api.tokenInvalidate') }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{
|
||||
searchQuery: string
|
||||
uploadSource: string
|
||||
uploadSourceItems: Array<{ label: string, value: string }>
|
||||
viewMode: 'grid' | 'list'
|
||||
selectedCount?: number
|
||||
loading?: boolean
|
||||
}>(), {
|
||||
selectedCount: 0,
|
||||
loading: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:searchQuery': [value: string]
|
||||
'update:uploadSource': [value: string]
|
||||
'update:viewMode': [mode: 'grid' | 'list']
|
||||
'search': []
|
||||
'reset': []
|
||||
'batch-delete': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
function setViewMode(mode: 'grid' | 'list') {
|
||||
if (mode === props.viewMode || props.loading) return
|
||||
emit('update:viewMode', mode)
|
||||
}
|
||||
|
||||
function viewButtonClass(active: boolean) {
|
||||
return active
|
||||
? 'border-primary bg-primary/10 text-primary'
|
||||
: 'border-transparent bg-elevated text-muted hover:bg-muted hover:text-default'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
class="flex flex-nowrap items-center gap-2 overflow-x-auto pb-1"
|
||||
@submit.prevent="emit('search')"
|
||||
>
|
||||
<UInput
|
||||
:model-value="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('stats.searchPlaceholder')"
|
||||
class="w-40 shrink-0 sm:w-48"
|
||||
size="sm"
|
||||
:disabled="loading"
|
||||
@update:model-value="emit('update:searchQuery', $event)"
|
||||
/>
|
||||
|
||||
<USelect
|
||||
:model-value="uploadSource"
|
||||
:items="uploadSourceItems"
|
||||
class="w-28 shrink-0"
|
||||
size="sm"
|
||||
:aria-label="t('stats.filterSource')"
|
||||
:disabled="loading"
|
||||
@update:model-value="emit('update:uploadSource', $event)"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
color="primary"
|
||||
class="shrink-0"
|
||||
:aria-label="t('common.search')"
|
||||
:loading="loading"
|
||||
>
|
||||
{{ t('common.search') }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-rotate-ccw"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.resetFilters')"
|
||||
:disabled="loading"
|
||||
@click="emit('reset')"
|
||||
>
|
||||
{{ t('stats.resetFilters') }}
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-trash-2"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="error"
|
||||
class="shrink-0"
|
||||
:disabled="!selectedCount || loading"
|
||||
@click="emit('batch-delete')"
|
||||
>
|
||||
{{ t('stats.batchDelete') }}
|
||||
</UButton>
|
||||
|
||||
<div
|
||||
class="inline-flex shrink-0 overflow-hidden rounded-md border border-default"
|
||||
role="group"
|
||||
:aria-label="t('stats.viewMode')"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex size-8 items-center justify-center border-r border-default transition-colors disabled:pointer-events-none disabled:opacity-40"
|
||||
:class="viewButtonClass(viewMode === 'grid')"
|
||||
:aria-label="t('stats.viewGrid')"
|
||||
:aria-pressed="viewMode === 'grid'"
|
||||
:disabled="loading"
|
||||
@click="setViewMode('grid')"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-layout-grid"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex size-8 items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-40"
|
||||
:class="viewButtonClass(viewMode === 'list')"
|
||||
:aria-label="t('stats.viewList')"
|
||||
:aria-pressed="viewMode === 'list'"
|
||||
:disabled="loading"
|
||||
@click="setViewMode('list')"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-list"
|
||||
class="size-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,221 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
items: ImageItem[]
|
||||
selectedKeys: Set<string>
|
||||
selectable?: boolean
|
||||
showStorage?: boolean
|
||||
emptyText?: string
|
||||
}>(), {
|
||||
selectable: false,
|
||||
showStorage: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:selectedKeys': [value: Set<string>]
|
||||
'preview': [image: ImageItem]
|
||||
'delete': [image: ImageItem]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const displayEmptyText = computed(() => props.emptyText ?? t('image.empty'))
|
||||
|
||||
const allSelected = computed(() =>
|
||||
props.items.length > 0 && props.items.every(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const someSelected = computed(() =>
|
||||
props.items.some(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const headerIndeterminate = computed(() => someSelected.value && !allSelected.value)
|
||||
|
||||
function updateSelection(key: string, selected: boolean) {
|
||||
const next = new Set(props.selectedKeys)
|
||||
if (selected) next.add(key)
|
||||
else next.delete(key)
|
||||
emit('update:selectedKeys', next)
|
||||
}
|
||||
|
||||
function toggleAll(value: boolean | 'indeterminate') {
|
||||
if (value === true) {
|
||||
emit('update:selectedKeys', new Set(props.items.map(item => item.key)))
|
||||
return
|
||||
}
|
||||
emit('update:selectedKeys', new Set())
|
||||
}
|
||||
|
||||
function formatUploadedAt(value: string) {
|
||||
try {
|
||||
const date = new Date(value)
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
const h = String(date.getHours()).padStart(2, '0')
|
||||
const min = String(date.getMinutes()).padStart(2, '0')
|
||||
const s = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${y}/${m}/${d} ${h}:${min}:${s}`
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function sourceLabel(image: ImageItem) {
|
||||
switch (image.uploadSource) {
|
||||
case 'web':
|
||||
return t('stats.tagWeb')
|
||||
case 'api':
|
||||
return t('stats.tagApi')
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function typeLabel(image: ImageItem) {
|
||||
if (props.showStorage && image.storage) return image.storage.name
|
||||
return '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="items.length"
|
||||
class="overflow-hidden rounded-xl border border-default bg-default"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="border-b border-default text-xs text-muted">
|
||||
<tr>
|
||||
<th
|
||||
v-if="selectable"
|
||||
class="w-10 px-4 py-3 text-left font-medium"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="allSelected ? true : headerIndeterminate ? 'indeterminate' : false"
|
||||
:aria-label="t('stats.selectAll')"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
</th>
|
||||
<th class="min-w-[16rem] px-4 py-3 text-left font-medium">
|
||||
{{ t('stats.colFilename') }}
|
||||
</th>
|
||||
<th class="hidden w-28 px-4 py-3 text-left font-medium sm:table-cell">
|
||||
{{ t('stats.colSource') }}
|
||||
</th>
|
||||
<th class="w-24 px-4 py-3 text-left font-medium">
|
||||
{{ t('stats.colSize') }}
|
||||
</th>
|
||||
<th class="hidden w-32 px-4 py-3 text-left font-medium md:table-cell">
|
||||
{{ t('stats.colType') }}
|
||||
</th>
|
||||
<th class="hidden w-44 px-4 py-3 text-left font-medium lg:table-cell">
|
||||
{{ t('stats.colUploadedAt') }}
|
||||
</th>
|
||||
<th class="w-28 px-4 py-3 text-right font-medium">
|
||||
{{ t('stats.colActions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="image in items"
|
||||
:key="image.key"
|
||||
class="transition-colors hover:bg-muted/20"
|
||||
>
|
||||
<td
|
||||
v-if="selectable"
|
||||
class="px-4 py-3"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="selectedKeys.has(image.key)"
|
||||
@update:model-value="updateSelection(image.key, $event === true)"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="relative size-10 shrink-0 overflow-hidden rounded-md border border-default bg-muted"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview', image)"
|
||||
>
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="image.originalName"
|
||||
loading="lazy"
|
||||
class="size-full object-cover"
|
||||
>
|
||||
</button>
|
||||
<p
|
||||
class="min-w-0 flex-1 truncate font-medium"
|
||||
:title="image.originalName"
|
||||
>
|
||||
{{ image.originalName }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 sm:table-cell">
|
||||
<span
|
||||
v-if="sourceLabel(image)"
|
||||
class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
|
||||
>
|
||||
{{ sourceLabel(image) }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-muted"
|
||||
>—</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-muted">
|
||||
{{ formatFileSize(image.size) }}
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 text-muted md:table-cell">
|
||||
<span class="truncate">{{ typeLabel(image) }}</span>
|
||||
</td>
|
||||
<td class="hidden px-4 py-3 text-muted lg:table-cell">
|
||||
{{ formatUploadedAt(image.uploadedAt) }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center justify-end gap-0.5 text-muted">
|
||||
<CopyButton
|
||||
icon="i-lucide-link"
|
||||
icon-only
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
:label="t('common.copy')"
|
||||
:value="image.url"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-eye"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="xs"
|
||||
:aria-label="t('image.openPreview')"
|
||||
@click="emit('preview', image)"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-trash-2"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="xs"
|
||||
:aria-label="t('common.delete')"
|
||||
@click="emit('delete', image)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-xl border border-dashed border-default py-16 text-center text-sm text-muted"
|
||||
>
|
||||
{{ displayEmptyText }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import type { ImageItem } from '~/types/image'
|
||||
|
||||
const props = defineProps<{
|
||||
items: ImageItem[]
|
||||
selectedKeys: Set<string>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:selectedKeys': [value: Set<string>]
|
||||
'clear': []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const allSelected = computed(() =>
|
||||
props.items.length > 0 && props.items.every(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const someSelected = computed(() =>
|
||||
props.items.some(item => props.selectedKeys.has(item.key))
|
||||
)
|
||||
|
||||
const indeterminate = computed(() => someSelected.value && !allSelected.value)
|
||||
|
||||
function toggleAll(value: boolean | 'indeterminate') {
|
||||
if (value === true) {
|
||||
emit('update:selectedKeys', new Set(props.items.map(item => item.key)))
|
||||
return
|
||||
}
|
||||
emit('update:selectedKeys', new Set())
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<UCheckbox
|
||||
:model-value="allSelected ? true : indeterminate ? 'indeterminate' : false"
|
||||
:disabled="!items.length"
|
||||
:aria-label="t('stats.selectAll')"
|
||||
@update:model-value="toggleAll"
|
||||
/>
|
||||
<p class="text-sm text-muted">
|
||||
{{ t('stats.selectedItems', { n: selectedKeys.size }) }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm text-primary hover:underline disabled:pointer-events-none disabled:opacity-40"
|
||||
:disabled="selectedKeys.size === 0"
|
||||
@click="emit('clear')"
|
||||
>
|
||||
{{ t('stats.clear') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup lang="ts">
|
||||
export interface GalleryStatsData {
|
||||
uploadToday: number
|
||||
uploadYesterday: number
|
||||
uploadMonth: number
|
||||
uploadLastMonth: number
|
||||
uploadTotal: number
|
||||
storedCount: number
|
||||
uploadBytesTotal: number
|
||||
bySource: {
|
||||
web: number
|
||||
api: number
|
||||
}
|
||||
storageUsage: {
|
||||
usedBytes: number
|
||||
totalBytes: number | null
|
||||
percent: number | null
|
||||
}
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
stats: GalleryStatsData | null
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const SOURCE_COLORS = ['var(--ui-primary)', '#10b981'] as const
|
||||
|
||||
const sourceItems = computed(() => {
|
||||
const bySource = props.stats?.bySource
|
||||
if (!bySource) return []
|
||||
return [
|
||||
{ key: 'web', label: t('stats.sourceWeb'), count: bySource.web, color: SOURCE_COLORS[0] },
|
||||
{ key: 'api', label: t('stats.sourceApi'), count: bySource.api, color: SOURCE_COLORS[1] }
|
||||
]
|
||||
})
|
||||
|
||||
const sourceTotal = computed(() =>
|
||||
sourceItems.value.reduce((sum, item) => sum + item.count, 0)
|
||||
)
|
||||
|
||||
function sourcePercent(count: number) {
|
||||
if (!sourceTotal.value) return 0
|
||||
return Math.round((count / sourceTotal.value) * 100)
|
||||
}
|
||||
|
||||
function formatTrend(current: number, previous: number) {
|
||||
if (previous === 0) {
|
||||
if (current === 0) {
|
||||
return { text: t('stats.trendFlat'), tone: 'muted' as const }
|
||||
}
|
||||
return { text: t('stats.trendUp', { p: 100 }), tone: 'up' as const }
|
||||
}
|
||||
const change = Math.round(((current - previous) / previous) * 100)
|
||||
if (change > 0) {
|
||||
return { text: t('stats.trendUp', { p: change }), tone: 'up' as const }
|
||||
}
|
||||
if (change < 0) {
|
||||
return { text: t('stats.trendDown', { p: Math.abs(change) }), tone: 'down' as const }
|
||||
}
|
||||
return { text: t('stats.trendFlat'), tone: 'muted' as const }
|
||||
}
|
||||
|
||||
const todayTrend = computed(() =>
|
||||
formatTrend(props.stats?.uploadToday ?? 0, props.stats?.uploadYesterday ?? 0)
|
||||
)
|
||||
|
||||
const monthTrend = computed(() =>
|
||||
formatTrend(props.stats?.uploadMonth ?? 0, props.stats?.uploadLastMonth ?? 0)
|
||||
)
|
||||
|
||||
const usageLabel = computed(() => {
|
||||
const usage = props.stats?.storageUsage
|
||||
if (!usage) return '—'
|
||||
const used = formatFileSize(usage.usedBytes)
|
||||
if (usage.totalBytes) {
|
||||
return `${used} / ${formatFileSize(usage.totalBytes)}`
|
||||
}
|
||||
return used
|
||||
})
|
||||
|
||||
const usagePercent = computed(() => {
|
||||
const percent = props.stats?.storageUsage.percent
|
||||
if (percent == null) return null
|
||||
return Math.min(percent, 100)
|
||||
})
|
||||
|
||||
const usageBarWidth = computed(() => {
|
||||
const usage = props.stats?.storageUsage
|
||||
if (!usage?.totalBytes || usagePercent.value == null) return 0
|
||||
return Math.max(usagePercent.value, usage.usedBytes > 0 ? 4 : 0)
|
||||
})
|
||||
|
||||
function displayValue(value: number | undefined) {
|
||||
if (props.loading) return '—'
|
||||
return value ?? '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.uploadToday') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.uploadToday) }}
|
||||
</p>
|
||||
<p
|
||||
class="mt-2 text-xs"
|
||||
:class="{
|
||||
'text-primary': todayTrend.tone === 'up',
|
||||
'text-muted': todayTrend.tone === 'muted',
|
||||
'text-orange-600 dark:text-orange-400': todayTrend.tone === 'down'
|
||||
}"
|
||||
>
|
||||
{{ t('stats.vsYesterday') }} {{ todayTrend.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.uploadMonth') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.uploadMonth) }}
|
||||
</p>
|
||||
<p
|
||||
class="mt-2 text-xs"
|
||||
:class="{
|
||||
'text-primary': monthTrend.tone === 'up',
|
||||
'text-muted': monthTrend.tone === 'muted',
|
||||
'text-orange-600 dark:text-orange-400': monthTrend.tone === 'down'
|
||||
}"
|
||||
>
|
||||
{{ t('stats.vsLastMonth') }} {{ monthTrend.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.uploadTotal') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.uploadTotal) }}
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-muted">
|
||||
{{ t('stats.totalFiles') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.storedCount') }}
|
||||
</p>
|
||||
<p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
|
||||
{{ displayValue(stats?.storedCount) }}
|
||||
</p>
|
||||
<p class="mt-2 text-xs text-muted">
|
||||
{{ stats ? t('stats.totalOccupied', { size: formatFileSize(stats.uploadBytesTotal) }) : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-default bg-elevated p-4">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.storageUsage') }}
|
||||
</p>
|
||||
<p class="mt-2 text-sm font-semibold tabular-nums text-highlighted sm:text-base">
|
||||
{{ usageLabel }}
|
||||
</p>
|
||||
<div
|
||||
v-if="stats?.storageUsage.totalBytes"
|
||||
class="mt-3 space-y-1"
|
||||
>
|
||||
<div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
|
||||
<div
|
||||
class="h-full rounded-full bg-primary transition-all"
|
||||
:style="{ width: `${usageBarWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-right text-xs tabular-nums text-muted">
|
||||
{{ usagePercent }}%
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="mt-2 text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.noQuota') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 rounded-xl border border-default bg-elevated p-4 sm:col-span-1">
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('stats.sourceDistribution') }}
|
||||
</p>
|
||||
<div
|
||||
v-if="!sourceTotal"
|
||||
class="mt-4 text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.noData') }}
|
||||
</div>
|
||||
<ul
|
||||
v-else
|
||||
class="mt-3 space-y-3"
|
||||
>
|
||||
<li
|
||||
v-for="item in sourceItems"
|
||||
:key="item.key"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2 text-xs">
|
||||
<span class="flex min-w-0 items-center gap-1.5">
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ background: item.color }"
|
||||
/>
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
</span>
|
||||
<span class="shrink-0 tabular-nums text-muted">
|
||||
{{ item.count }} ({{ sourcePercent(item.count) }}%)
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted/40">
|
||||
<div
|
||||
class="h-full rounded-full transition-[width]"
|
||||
:style="{
|
||||
width: `${sourcePercent(item.count)}%`,
|
||||
backgroundColor: item.color
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="divide-y divide-default overflow-hidden rounded-lg border border-default">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,566 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
|
||||
|
||||
const { isAuthenticated, handleAuthError, isAdmin } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t, locale } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const loading = ref(true)
|
||||
const page = ref(1)
|
||||
const actionFilter = ref<'all' | LogAction>('all')
|
||||
const sourceFilter = ref<'all' | LogSource>('all')
|
||||
const userFilter = ref<'all' | number>('all')
|
||||
const searchQuery = ref('')
|
||||
const activeSearch = ref('')
|
||||
const listData = ref<ActivityLogListResponse | null>(null)
|
||||
const imageLinkBase = ref('')
|
||||
const hideFolderInUrl = ref(false)
|
||||
|
||||
const pageSize = 10
|
||||
|
||||
const summaryLabel = computed(() => {
|
||||
const summary = listData.value?.summary
|
||||
if (!summary) return ''
|
||||
return t('logs.summaryAll', {
|
||||
total: summary.total,
|
||||
upload: summary.upload,
|
||||
delete: summary.delete
|
||||
})
|
||||
})
|
||||
|
||||
const actionItems = computed(() => [
|
||||
{ label: t('logs.filterActionAll'), value: 'all' as const },
|
||||
{ label: t('logs.actionUpload'), value: 'upload' as const },
|
||||
{ label: t('logs.actionDelete'), value: 'delete' as const }
|
||||
])
|
||||
|
||||
const sourceItems = computed(() => [
|
||||
{ label: t('logs.filterSourceAll'), value: 'all' as const },
|
||||
{ label: t('logs.sourceWeb'), value: 'web' as const },
|
||||
{ label: t('logs.sourceApi'), value: 'api' as const }
|
||||
])
|
||||
|
||||
const userItems = computed(() => {
|
||||
const items: Array<{ label: string, value: 'all' | number }> = [
|
||||
{ label: t('logs.filterUserAll'), value: 'all' }
|
||||
]
|
||||
for (const user of listData.value?.users ?? []) {
|
||||
items.push({ label: user.username, value: user.id })
|
||||
}
|
||||
return items
|
||||
})
|
||||
|
||||
function formatTime(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString(locale.value, { hour12: false })
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeShort(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString(locale.value, {
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
function actionColor(action: LogAction) {
|
||||
return action === 'upload' ? 'success' : 'error'
|
||||
}
|
||||
|
||||
function actionIcon(action: LogAction) {
|
||||
return action === 'upload' ? 'i-lucide-upload' : 'i-lucide-trash-2'
|
||||
}
|
||||
|
||||
function sourceLabel(source: LogSource) {
|
||||
switch (source) {
|
||||
case 'web':
|
||||
return t('logs.sourceWeb')
|
||||
case 'api':
|
||||
return t('logs.sourceApi')
|
||||
}
|
||||
}
|
||||
|
||||
function storageIcon(storage: ActivityLogStorage | null) {
|
||||
return storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
|
||||
}
|
||||
|
||||
function publicPathFromKey(key: string) {
|
||||
if (hideFolderInUrl.value) {
|
||||
const slash = key.lastIndexOf('/')
|
||||
return slash >= 0 ? key.slice(slash + 1) : key
|
||||
}
|
||||
const prefix = 'images/'
|
||||
return key.startsWith(prefix) ? key.slice(prefix.length) : key
|
||||
}
|
||||
|
||||
function imageUrl(key: string) {
|
||||
const base = imageLinkBase.value.replace(/\/$/, '')
|
||||
const path = publicPathFromKey(key)
|
||||
if (!base) return `/${path}`
|
||||
return `${base}/${path}`
|
||||
}
|
||||
|
||||
async function loadImageLinkBase() {
|
||||
try {
|
||||
if (isAdmin.value) {
|
||||
const data = await $fetch<{ effectiveImageBaseUrl: string, hideFolderInUrl: boolean }>('/api/settings', {
|
||||
credentials: 'include'
|
||||
})
|
||||
imageLinkBase.value = data.effectiveImageBaseUrl
|
||||
hideFolderInUrl.value = data.hideFolderInUrl
|
||||
return
|
||||
}
|
||||
const data = await $fetch<{ env: { imageBaseUrl: string, hideFolderInUrl: boolean } }>('/api/user/api-token', {
|
||||
credentials: 'include'
|
||||
})
|
||||
imageLinkBase.value = data.env.imageBaseUrl
|
||||
hideFolderInUrl.value = data.env.hideFolderInUrl
|
||||
} catch {
|
||||
if (import.meta.client) {
|
||||
imageLinkBase.value = window.location.origin
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLogs() {
|
||||
loading.value = true
|
||||
try {
|
||||
const query: Record<string, string | number> = {
|
||||
page: page.value,
|
||||
limit: pageSize
|
||||
}
|
||||
if (actionFilter.value !== 'all') {
|
||||
query.action = actionFilter.value
|
||||
}
|
||||
if (sourceFilter.value !== 'all') {
|
||||
query.source = sourceFilter.value
|
||||
}
|
||||
if (isAdmin.value && userFilter.value !== 'all') {
|
||||
query.userId = userFilter.value
|
||||
}
|
||||
if (activeSearch.value) {
|
||||
query.q = activeSearch.value
|
||||
}
|
||||
|
||||
listData.value = await $fetch<ActivityLogListResponse>('/api/logs', {
|
||||
credentials: 'include',
|
||||
query
|
||||
})
|
||||
page.value = listData.value.page
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
if (isAuthenticated.value) {
|
||||
toast.add({ title: t('logs.loadFailed'), color: 'error' })
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
page.value = 1
|
||||
void loadLogs()
|
||||
}
|
||||
|
||||
function submitSearch() {
|
||||
activeSearch.value = searchQuery.value.trim()
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
searchQuery.value = ''
|
||||
activeSearch.value = ''
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
function handlePageChange(target: number) {
|
||||
page.value = target
|
||||
void loadLogs()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadImageLinkBase()
|
||||
await loadLogs()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-w-0">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
|
||||
<div>
|
||||
<h2 class="text-sm font-semibold">
|
||||
{{ t('logs.pageTitle') }}
|
||||
</h2>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-lucide-refresh-cw"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:label="t('common.refresh')"
|
||||
:loading="loading"
|
||||
@click="loadLogs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="border-b border-default px-5 py-3 sm:px-6"
|
||||
@submit.prevent="submitSearch"
|
||||
>
|
||||
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p
|
||||
v-if="summaryLabel"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ summaryLabel }}
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.counting') }}
|
||||
</p>
|
||||
|
||||
<div class="flex min-w-0 flex-wrap items-center gap-2 sm:justify-end">
|
||||
<USelect
|
||||
v-if="isAdmin"
|
||||
v-model="userFilter"
|
||||
:items="userItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-full sm:w-36"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<USelect
|
||||
v-model="actionFilter"
|
||||
:items="actionItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-32"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<USelect
|
||||
v-model="sourceFilter"
|
||||
:items="sourceItems"
|
||||
value-key="value"
|
||||
class="min-w-0 w-[calc(50%-0.25rem)] sm:w-36"
|
||||
size="sm"
|
||||
@update:model-value="applyFilters"
|
||||
/>
|
||||
<div class="flex min-w-0 w-full items-center gap-2 sm:w-auto">
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('logs.searchPlaceholder')"
|
||||
class="min-w-0 flex-1 sm:w-40 sm:flex-none"
|
||||
size="sm"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:aria-label="t('common.search')"
|
||||
:loading="loading"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('common.search') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="activeSearch"
|
||||
type="button"
|
||||
icon="i-lucide-x"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.clear')"
|
||||
@click="clearSearch"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.clear') }}</span>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-if="loading"
|
||||
class="p-4 sm:p-6"
|
||||
>
|
||||
<div class="space-y-3 sm:hidden">
|
||||
<USkeleton
|
||||
v-for="n in 6"
|
||||
:key="`mobile-${n}`"
|
||||
class="h-24 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div class="hidden space-y-2 sm:block">
|
||||
<USkeleton
|
||||
v-for="n in 8"
|
||||
:key="`desktop-${n}`"
|
||||
class="h-12 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-else-if="listData && listData.items.length">
|
||||
<div class="min-w-0 sm:hidden">
|
||||
<div class="divide-y divide-default">
|
||||
<article
|
||||
v-for="row in listData.items"
|
||||
:key="row.id"
|
||||
class="min-w-0 px-4 py-3.5"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<time class="text-xs text-muted">
|
||||
{{ formatTimeShort(row.createdAt) }}
|
||||
</time>
|
||||
<span class="shrink-0 text-xs tabular-nums text-muted">
|
||||
{{ formatFileSize(row.size) }}
|
||||
</span>
|
||||
</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"
|
||||
>
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="mr-1 size-3"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceLabel(row.source) }}
|
||||
</UBadge>
|
||||
<span
|
||||
v-if="isAdmin"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ row.username ?? '—' }}
|
||||
</span>
|
||||
<UBadge
|
||||
v-if="row.storage"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
class="max-w-full truncate"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon(row.storage)"
|
||||
class="mr-1 size-3"
|
||||
/>
|
||||
{{ row.storage.name }}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="mt-2 truncate text-sm"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
</p>
|
||||
|
||||
<div class="mt-2 flex min-w-0 items-center gap-1">
|
||||
<a
|
||||
v-if="row.action === 'upload'"
|
||||
:href="imageUrl(row.key)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="min-w-0 flex-1 truncate font-mono text-xs text-primary hover:underline"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</a>
|
||||
<span
|
||||
v-else
|
||||
class="min-w-0 flex-1 truncate font-mono text-xs text-dimmed"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</span>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="row.key"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden overflow-x-auto sm:block">
|
||||
<table class="min-w-full 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">
|
||||
{{ t('logs.colTime') }}
|
||||
</th>
|
||||
<th
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-3 font-medium"
|
||||
>
|
||||
{{ t('logs.colUser') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
{{ t('logs.colAction') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 font-medium">
|
||||
{{ t('logs.colSource') }}
|
||||
</th>
|
||||
<th class="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">
|
||||
{{ t('logs.colSize') }}
|
||||
</th>
|
||||
<th class="hidden px-4 py-3 font-medium xl:table-cell">
|
||||
{{ t('logs.colKey') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-default">
|
||||
<tr
|
||||
v-for="row in listData.items"
|
||||
: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>
|
||||
<td
|
||||
v-if="isAdmin"
|
||||
class="px-4 py-3 text-xs"
|
||||
>
|
||||
{{ row.username ?? '—' }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UBadge
|
||||
:color="actionColor(row.action)"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
<UIcon
|
||||
:name="actionIcon(row.action)"
|
||||
class="mr-1 size-3"
|
||||
/>
|
||||
{{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
|
||||
</UBadge>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<UBadge
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceLabel(row.source) }}
|
||||
</UBadge>
|
||||
</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"
|
||||
:title="row.storage.name"
|
||||
>
|
||||
<UIcon
|
||||
:name="storageIcon(row.storage)"
|
||||
class="size-3.5 shrink-0 opacity-70"
|
||||
/>
|
||||
<span class="truncate">{{ row.storage.name }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-muted"
|
||||
>—</span>
|
||||
</td>
|
||||
<td
|
||||
class="hidden max-w-[12rem] truncate px-4 py-3 md:table-cell"
|
||||
:title="row.originalName"
|
||||
>
|
||||
{{ row.originalName }}
|
||||
</td>
|
||||
<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">
|
||||
<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"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</a>
|
||||
<span
|
||||
v-else
|
||||
class="truncate font-mono text-xs text-dimmed"
|
||||
:title="row.key"
|
||||
>
|
||||
{{ row.key }}
|
||||
</span>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
:label="t('common.copy')"
|
||||
:value="row.key"
|
||||
:success-title="t('copy.copiedUrl')"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="px-4 py-16 text-center text-sm text-muted sm:px-6"
|
||||
>
|
||||
{{ t('logs.empty') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="listData && listData.total > 0"
|
||||
class="border-t border-default px-4 py-4 sm:px-6"
|
||||
>
|
||||
<PaginationBar
|
||||
:page="listData.page"
|
||||
:total-pages="listData.totalPages"
|
||||
:total="listData.total"
|
||||
:unit="t('logs.entriesUnit')"
|
||||
:loading="loading"
|
||||
@update:page="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="overflow-hidden rounded-xl border border-default bg-default p-5 sm:p-6">
|
||||
<div class="space-y-8">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string
|
||||
hint?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-4">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="h-4 w-1 shrink-0 rounded-full bg-primary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h2 class="text-sm font-semibold text-highlighted">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
<p
|
||||
v-if="hint"
|
||||
class="mt-1.5 pl-3 text-xs leading-relaxed text-muted"
|
||||
>
|
||||
{{ hint }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="$slots.action"
|
||||
class="shrink-0"
|
||||
>
|
||||
<slot name="action" />
|
||||
</div>
|
||||
</div>
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
hasChanges: boolean
|
||||
saving: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
save: []
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border-t border-default bg-default px-4 py-4 sm:px-6">
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<p
|
||||
v-if="hasChanges"
|
||||
class="mr-auto text-xs text-warning"
|
||||
>
|
||||
{{ t('settings.unsavedChanges') }}
|
||||
</p>
|
||||
<UButton
|
||||
:label="t('settings.saveSettings')"
|
||||
icon="i-lucide-save"
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
:disabled="!hasChanges"
|
||||
@click="emit('save')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import type { SettingsTab } from '~/types/settings'
|
||||
|
||||
defineProps<{
|
||||
modelValue: SettingsTab
|
||||
items: Array<{ id: SettingsTab, label: string, icon: string }>
|
||||
title: string
|
||||
subtitle: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [SettingsTab]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="flex w-full shrink-0 flex-col border-b border-default bg-neutral-50 dark:bg-neutral-900/30 lg:w-56 lg:border-b-0 lg:border-r xl:w-60">
|
||||
<div class="border-b border-default px-4 py-5 sm:px-5">
|
||||
<h1 class="text-lg font-semibold tracking-tight text-highlighted">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 space-y-0.5 p-3">
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors"
|
||||
:class="modelValue === item.id
|
||||
? 'bg-primary/10 font-medium text-primary'
|
||||
: 'text-muted hover:bg-muted/50 hover:text-highlighted'"
|
||||
@click="emit('update:modelValue', item.id)"
|
||||
>
|
||||
<UIcon
|
||||
:name="item.icon"
|
||||
class="size-4 shrink-0"
|
||||
:class="modelValue === item.id ? 'text-primary' : 'opacity-70'"
|
||||
/>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
appVersion: string
|
||||
updateAvailable: boolean
|
||||
latestVersion: string | null
|
||||
releaseUrl: string | null
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pl-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.systemVersion') }}
|
||||
</span>
|
||||
<UBadge
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
v{{ appVersion }}
|
||||
</UBadge>
|
||||
<a
|
||||
v-if="updateAvailable && latestVersion"
|
||||
:href="releaseUrl || 'https://github.com/O96u/PicHost/releases'"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-warning hover:underline"
|
||||
>
|
||||
{{ t('settings.updateAvailable', { version: `v${latestVersion}` }) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title?: string
|
||||
hint?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const model = defineModel<boolean>({ required: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div 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="text-sm font-medium text-highlighted">
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</p>
|
||||
<p
|
||||
v-if="hint || $slots.hint"
|
||||
class="mt-1 text-xs leading-relaxed text-muted"
|
||||
>
|
||||
<slot name="hint">
|
||||
{{ hint }}
|
||||
</slot>
|
||||
</p>
|
||||
</div>
|
||||
<USwitch
|
||||
v-model="model"
|
||||
:disabled="disabled"
|
||||
class="mt-0.5 shrink-0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
const {
|
||||
compressEnabled,
|
||||
autoCopyMarkdown,
|
||||
copyFormat,
|
||||
clientWebpQuality,
|
||||
loadPreferences
|
||||
} = useUploadPreferences()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const {
|
||||
userSettings,
|
||||
enabled: userAutoDeleteEnabled,
|
||||
daysDraft: userAutoDeleteDaysDraft,
|
||||
load: loadUserSettings
|
||||
} = useUserAutoDeleteSettings()
|
||||
|
||||
const copyFormatItems = computed(() => [
|
||||
{ label: t('copy.url'), value: 'url' as const },
|
||||
{ label: t('copy.markdown'), value: 'markdown' as const },
|
||||
{ label: t('copy.html'), value: 'html' as const }
|
||||
])
|
||||
|
||||
const clientQualityLevel = computed(() => {
|
||||
if (clientWebpQuality.value >= 85) return t('preferences.qualityHigh')
|
||||
if (clientWebpQuality.value >= 60) return t('preferences.qualityMedium')
|
||||
return t('preferences.qualityLow')
|
||||
})
|
||||
|
||||
function setCopyFormat(value: 'url' | 'markdown' | 'html') {
|
||||
copyFormat.value = value
|
||||
}
|
||||
|
||||
function onClientQualityInput(event: Event) {
|
||||
const value = Number((event.target as HTMLInputElement).value)
|
||||
clientWebpQuality.value = Number.isFinite(value) ? value : 80
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadPreferences()
|
||||
void loadUserSettings()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SettingsSection :title="t('preferences.processing')">
|
||||
<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>
|
||||
<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.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>
|
||||
</template>
|
||||
@@ -1,16 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { StorageBackendItem } from '~/types/storage'
|
||||
|
||||
type CardAction = {
|
||||
key: string
|
||||
icon: string
|
||||
label: string
|
||||
shortLabel: string
|
||||
danger?: boolean
|
||||
disabled?: boolean
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
backend: StorageBackendItem
|
||||
envOverride?: boolean
|
||||
@@ -35,181 +25,150 @@ const typeLabel = computed(() =>
|
||||
props.backend.type === 'local' ? t('storage.backendLocal') : t('storage.backendCloud')
|
||||
)
|
||||
|
||||
const servingLabel = computed(() =>
|
||||
props.backend.servingMode === 'public'
|
||||
? t('storage.servingPublic')
|
||||
: t('storage.servingProxy')
|
||||
)
|
||||
|
||||
const bucketLine = computed(() => {
|
||||
if (props.backend.type !== 's3') return null
|
||||
return props.backend.config.bucket || t('storage.notConfigured')
|
||||
})
|
||||
|
||||
const actionsDisabled = computed(() => props.envOverride || props.busy)
|
||||
|
||||
const actions = computed<CardAction[]>(() => {
|
||||
const isLocal = props.backend.type === 'local'
|
||||
const items: CardAction[] = []
|
||||
const isLocal = computed(() => props.backend.type === 'local')
|
||||
|
||||
if (!props.backend.isDefault && props.backend.enabled) {
|
||||
items.push({
|
||||
key: 'default',
|
||||
icon: 'i-lucide-star',
|
||||
label: t('storage.setDefault'),
|
||||
shortLabel: isLocal ? t('storage.setDefault') : t('storage.actionSetDefault'),
|
||||
onClick: () => emit('setDefault')
|
||||
})
|
||||
}
|
||||
function canSetDefault() {
|
||||
return !props.backend.isDefault && props.backend.enabled
|
||||
}
|
||||
|
||||
if (props.backend.type === 's3') {
|
||||
items.push({
|
||||
key: 'edit',
|
||||
icon: 'i-lucide-pencil',
|
||||
label: t('common.edit'),
|
||||
shortLabel: t('common.edit'),
|
||||
onClick: () => emit('edit')
|
||||
})
|
||||
}
|
||||
function canEdit() {
|
||||
return props.backend.type === 's3'
|
||||
}
|
||||
|
||||
items.push({
|
||||
key: 'test',
|
||||
icon: 'i-lucide-plug-zap',
|
||||
label: t('storage.testConnection'),
|
||||
shortLabel: isLocal ? t('storage.testConnection') : t('storage.actionTest'),
|
||||
onClick: () => emit('test')
|
||||
})
|
||||
function canToggle() {
|
||||
return props.backend.type !== 'local'
|
||||
}
|
||||
|
||||
if (props.backend.type !== 'local') {
|
||||
items.push({
|
||||
key: 'toggle',
|
||||
icon: props.backend.enabled ? 'i-lucide-pause' : 'i-lucide-play',
|
||||
label: props.backend.enabled ? t('storage.disable') : t('storage.enable'),
|
||||
shortLabel: props.backend.enabled ? t('storage.disable') : t('storage.enable'),
|
||||
disabled: props.backend.isDefault && props.backend.enabled,
|
||||
onClick: () => emit('toggleEnabled')
|
||||
})
|
||||
}
|
||||
|
||||
if (props.backend.type !== 'local' && !props.backend.isDefault) {
|
||||
items.push({
|
||||
key: 'delete',
|
||||
icon: 'i-lucide-trash-2',
|
||||
label: t('common.delete'),
|
||||
shortLabel: t('common.delete'),
|
||||
danger: true,
|
||||
onClick: () => emit('delete')
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
})
|
||||
|
||||
const actionGridClass = computed(() => {
|
||||
switch (actions.value.length) {
|
||||
case 1: return 'grid-cols-1'
|
||||
case 2: return 'grid-cols-2'
|
||||
case 3: return 'grid-cols-3'
|
||||
case 4: return 'grid-cols-4'
|
||||
default: return 'grid-cols-5'
|
||||
}
|
||||
})
|
||||
function canDelete() {
|
||||
return props.backend.type !== 'local' && !props.backend.isDefault
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="flex h-full flex-col rounded-2xl border border-default bg-elevated p-4 shadow-sm"
|
||||
:class="{
|
||||
'ring-2 ring-primary/30': backend.isDefault,
|
||||
'opacity-75': !backend.enabled
|
||||
}"
|
||||
class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5"
|
||||
:class="{ 'opacity-75': !backend.enabled }"
|
||||
>
|
||||
<div class="mb-3 flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 items-start gap-2.5">
|
||||
<div
|
||||
class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<UIcon
|
||||
:name="typeIcon"
|
||||
class="size-4.5"
|
||||
class="size-5"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h3 class="truncate text-sm font-semibold">
|
||||
{{ backend.name }}
|
||||
</h3>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ typeLabel }}
|
||||
<template v-if="bucketLine">
|
||||
· {{ bucketLine }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="truncate text-base font-semibold">
|
||||
{{ backend.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex shrink-0 flex-wrap justify-end gap-1">
|
||||
<UBadge
|
||||
v-if="backend.enabled"
|
||||
color="success"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
|
||||
<span
|
||||
v-if="backend.isDefault"
|
||||
class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
|
||||
>
|
||||
{{ t('storage.badgeDefaultStorage') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="isLocal"
|
||||
class="inline-flex rounded-md border border-default bg-default px-2 py-0.5 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t('storage.badgeLocal') }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="backend.enabled"
|
||||
class="inline-flex rounded-md border border-default bg-default px-2 py-0.5 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t('storage.badgeEnabled') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-if="backend.isDefault"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ t('storage.badgeDefault') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-if="!backend.enabled"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted"
|
||||
>
|
||||
{{ t('storage.badgeDisabled') }}
|
||||
</UBadge>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StorageUsageBar
|
||||
:capacity="backend.capacity"
|
||||
:index-bytes="backend.usage.bytes"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<StorageUsageBar
|
||||
:capacity="backend.capacity"
|
||||
:index-bytes="backend.usage.bytes"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-3 text-xs text-muted">
|
||||
{{ t('storage.servingMode') }}: {{ servingLabel }}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 border-t border-default pt-4">
|
||||
<div
|
||||
class="grid gap-1.5"
|
||||
:class="actionGridClass"
|
||||
>
|
||||
<button
|
||||
v-for="action in actions"
|
||||
:key="action.key"
|
||||
type="button"
|
||||
class="flex flex-col items-center justify-center gap-1 rounded-lg border px-1 py-2 transition disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:class="action.danger
|
||||
? 'border-error/30 text-error hover:bg-error/5'
|
||||
: 'border-default text-muted hover:bg-muted/40 hover:text-highlighted'"
|
||||
:title="action.label"
|
||||
:aria-label="action.label"
|
||||
:disabled="actionsDisabled || action.disabled"
|
||||
@click="action.onClick"
|
||||
>
|
||||
<UIcon
|
||||
:name="action.icon"
|
||||
class="size-4 shrink-0"
|
||||
/>
|
||||
<span class="w-full truncate text-center text-[11px] leading-none">
|
||||
{{ action.shortLabel }}
|
||||
</span>
|
||||
</button>
|
||||
<div class="mt-4 space-y-2 text-xs text-muted">
|
||||
<div class="flex 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>
|
||||
<CopyButton
|
||||
icon="i-lucide-copy"
|
||||
icon-only
|
||||
variant="ghost"
|
||||
color="primary"
|
||||
class="shrink-0"
|
||||
:label="t('common.copy')"
|
||||
:value="backend.id"
|
||||
:success-title="t('copy.copied')"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
{{ t('storage.storageType') }}: {{ typeLabel }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex flex-wrap gap-2 border-t border-default pt-4">
|
||||
<UButton
|
||||
v-if="canSetDefault()"
|
||||
:label="t('storage.setDefault')"
|
||||
icon="i-lucide-star"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('setDefault')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canEdit()"
|
||||
:label="t('common.edit')"
|
||||
icon="i-lucide-pencil"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('edit')"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('storage.testConnection')"
|
||||
:icon="isLocal ? 'i-lucide-wand-sparkles' : 'i-lucide-activity'"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:loading="busy"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('test')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canToggle()"
|
||||
:label="backend.enabled ? t('storage.disable') : t('storage.enable')"
|
||||
:icon="backend.enabled ? 'i-lucide-pause' : 'i-lucide-play'"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
:disabled="actionsDisabled || (backend.isDefault && backend.enabled)"
|
||||
@click="emit('toggleEnabled')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="canDelete()"
|
||||
:label="t('common.delete')"
|
||||
icon="i-lucide-trash-2"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="error"
|
||||
:disabled="actionsDisabled"
|
||||
@click="emit('delete')"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
@@ -0,0 +1,184 @@
|
||||
<script setup lang="ts">
|
||||
import type { StorageBackendItem } from '~/types/storage'
|
||||
|
||||
const props = defineProps<{
|
||||
backends: StorageBackendItem[]
|
||||
loading?: boolean
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const { formatFileSize } = useFileSize()
|
||||
|
||||
const CHART_COLORS = [
|
||||
'var(--ui-primary)',
|
||||
'#3b82f6',
|
||||
'#6366f1',
|
||||
'#f59e0b',
|
||||
'#ec4899',
|
||||
'#8b5cf6'
|
||||
] as const
|
||||
|
||||
function backendUsedBytes(backend: StorageBackendItem) {
|
||||
return backend.capacity.source === 'disk'
|
||||
? backend.capacity.usedBytes
|
||||
: backend.usage.bytes
|
||||
}
|
||||
|
||||
const totalCapacityBytes = computed(() => {
|
||||
let total = 0
|
||||
let hasTotal = false
|
||||
for (const backend of props.backends) {
|
||||
if (backend.capacity.totalBytes != null && backend.capacity.totalBytes > 0) {
|
||||
total += backend.capacity.totalBytes
|
||||
hasTotal = true
|
||||
}
|
||||
}
|
||||
return hasTotal ? total : null
|
||||
})
|
||||
|
||||
const totalUsedBytes = computed(() =>
|
||||
props.backends.reduce((sum, backend) => sum + backendUsedBytes(backend), 0)
|
||||
)
|
||||
|
||||
const totalFreeBytes = computed(() => {
|
||||
if (!totalCapacityBytes.value) return null
|
||||
return Math.max(0, totalCapacityBytes.value - totalUsedBytes.value)
|
||||
})
|
||||
|
||||
const usagePercent = computed(() => {
|
||||
if (!totalCapacityBytes.value) return null
|
||||
return Math.min(Math.round((totalUsedBytes.value / totalCapacityBytes.value) * 1000) / 10, 100)
|
||||
})
|
||||
|
||||
const usageBarWidth = computed(() => {
|
||||
if (usagePercent.value == null) return 0
|
||||
return Math.max(usagePercent.value, totalUsedBytes.value > 0 ? 4 : 0)
|
||||
})
|
||||
|
||||
const distributionItems = computed(() => {
|
||||
if (!totalCapacityBytes.value) return []
|
||||
|
||||
return props.backends
|
||||
.filter(backend => backend.capacity.totalBytes != null && backend.capacity.totalBytes > 0)
|
||||
.map((backend, index) => ({
|
||||
id: backend.id,
|
||||
name: backend.name,
|
||||
color: CHART_COLORS[index % CHART_COLORS.length]!,
|
||||
percent: Math.round((backend.capacity.totalBytes! / totalCapacityBytes.value!) * 1000) / 10
|
||||
}))
|
||||
})
|
||||
|
||||
const donutStyle = computed(() => {
|
||||
const items = distributionItems.value
|
||||
if (!items.length) return { background: 'var(--ui-bg-muted)' }
|
||||
|
||||
let cursor = 0
|
||||
const segments = items.map((item) => {
|
||||
const start = cursor
|
||||
cursor += item.percent
|
||||
return `${item.color} ${start}% ${cursor}%`
|
||||
})
|
||||
|
||||
return { background: `conic-gradient(${segments.join(', ')})` }
|
||||
})
|
||||
|
||||
function displaySize(bytes: number | null) {
|
||||
if (props.loading) return '—'
|
||||
if (bytes == null) return '—'
|
||||
return formatFileSize(bytes)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="rounded-xl border border-default bg-elevated p-4 sm:p-5">
|
||||
<h2 class="text-sm font-semibold">
|
||||
{{ t('storage.overviewTitle') }}
|
||||
</h2>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ t('storage.overviewSubtitle') }}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 grid gap-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
|
||||
<div>
|
||||
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewTotal') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ displaySize(totalCapacityBytes) }}
|
||||
</p>
|
||||
<div
|
||||
v-if="totalCapacityBytes"
|
||||
class="mt-2 h-1 overflow-hidden rounded-full bg-muted/50"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full bg-primary transition-all"
|
||||
:style="{ width: `${usageBarWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewUsed') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ displaySize(totalUsedBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewFree') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ displaySize(totalFreeBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ t('storage.overviewUsageRate') }}
|
||||
</p>
|
||||
<p class="mt-1 text-lg font-semibold tabular-nums">
|
||||
{{ usagePercent != null ? `${usagePercent}%` : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="relative size-24 shrink-0 rounded-full p-2"
|
||||
:style="donutStyle"
|
||||
>
|
||||
<div class="flex size-full items-center justify-center rounded-full bg-elevated px-2 text-center">
|
||||
<p class="text-[10px] leading-tight text-muted">
|
||||
{{ t('storage.capacityDistribution') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="distributionItems.length"
|
||||
class="min-w-[8rem] space-y-2"
|
||||
>
|
||||
<li
|
||||
v-for="item in distributionItems"
|
||||
:key="item.id"
|
||||
class="flex items-center justify-between gap-3 text-xs"
|
||||
>
|
||||
<span class="flex min-w-0 items-center gap-1.5">
|
||||
<span
|
||||
class="size-2 shrink-0 rounded-full"
|
||||
:style="{ background: item.color }"
|
||||
/>
|
||||
<span class="truncate">{{ item.name }}</span>
|
||||
</span>
|
||||
<span class="shrink-0 tabular-nums text-muted">
|
||||
{{ item.percent }}%
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
const items = computed(() => [
|
||||
{
|
||||
icon: 'i-lucide-hard-drive',
|
||||
iconClass: 'text-primary',
|
||||
boxClass: 'border-primary/20 bg-primary/5',
|
||||
title: t('storage.backendLocal'),
|
||||
desc: t('storage.supportedLocalDesc')
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-cloud',
|
||||
iconClass: 'text-orange-500',
|
||||
boxClass: 'border-orange-500/20 bg-orange-500/5',
|
||||
title: 'Cloudflare R2',
|
||||
desc: t('storage.supportedR2Desc')
|
||||
},
|
||||
{
|
||||
icon: 'i-lucide-server',
|
||||
iconClass: 'text-blue-500',
|
||||
boxClass: 'border-blue-500/20 bg-blue-500/5',
|
||||
title: t('storage.supportedS3Title'),
|
||||
desc: t('storage.supportedS3Desc')
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="rounded-xl border border-default bg-elevated p-4 sm:p-5">
|
||||
<h2 class="text-sm font-semibold">
|
||||
{{ t('storage.supportedTitle') }}
|
||||
</h2>
|
||||
|
||||
<div class="mt-4 grid grid-cols-1 gap-3 lg:grid-cols-3">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.title"
|
||||
class="flex items-start gap-3 rounded-lg border border-default bg-muted/30 px-4 py-3"
|
||||
>
|
||||
<div
|
||||
class="flex size-10 shrink-0 items-center justify-center rounded-lg border"
|
||||
:class="item.boxClass"
|
||||
>
|
||||
<UIcon
|
||||
:name="item.icon"
|
||||
class="size-5"
|
||||
:class="item.iconClass"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 pt-0.5">
|
||||
<p class="text-sm font-semibold">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<p class="mt-0.5 text-xs leading-relaxed text-muted">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -36,56 +36,53 @@ function formatOptional(bytes: number | null): string {
|
||||
|
||||
<template>
|
||||
<div class="space-y-3">
|
||||
<div class="grid grid-cols-3 gap-2 text-center text-xs">
|
||||
<div class="rounded-lg bg-muted/30 px-2 py-2">
|
||||
<p class="text-muted">
|
||||
{{ $t('storage.statTotal') }}
|
||||
</p>
|
||||
<p class="mt-1 font-medium tabular-nums text-highlighted">
|
||||
{{ formatOptional(capacity.totalBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-muted/30 px-2 py-2">
|
||||
<p class="text-muted">
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.statUsed') }}
|
||||
</p>
|
||||
<p class="mt-1 font-medium tabular-nums text-highlighted">
|
||||
<p class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ formatFileSize(displayUsedBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-muted/30 px-2 py-2">
|
||||
<p class="text-muted">
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.statTotal') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ formatOptional(capacity.totalBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.statFree') }}
|
||||
</p>
|
||||
<p
|
||||
class="mt-1 font-medium tabular-nums"
|
||||
:class="overQuota ? 'text-error' : 'text-highlighted'"
|
||||
class="mt-1 text-sm font-semibold tabular-nums"
|
||||
:class="overQuota ? 'text-error' : ''"
|
||||
>
|
||||
{{ formatOptional(capacity.freeBytes) }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-muted">
|
||||
{{ $t('storage.usageRate') }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm font-semibold tabular-nums">
|
||||
{{ hasBar ? `${displayPercent}%` : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="hasBar"
|
||||
class="space-y-1"
|
||||
class="h-1 overflow-hidden rounded-full bg-muted/50"
|
||||
>
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="text-muted">{{ $t('storage.usageRate') }}</span>
|
||||
<span
|
||||
class="tabular-nums font-medium"
|
||||
:class="overQuota ? 'text-error' : ''"
|
||||
>
|
||||
{{ displayPercent }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
|
||||
<div
|
||||
class="h-full rounded-full transition-all"
|
||||
:class="overQuota ? 'bg-error/80' : 'bg-primary/70'"
|
||||
:style="{ width: `${barWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="h-full rounded-full transition-all"
|
||||
:class="overQuota ? 'bg-error/80' : 'bg-primary'"
|
||||
:style="{ width: `${barWidth}%` }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in new issue
Block a user