refactor: 重构设置、API、图库与存储页面前端结构。
将操作日志并入设置侧栏，补齐检查更新提示与版本接口刷新；拆分各模块组件并修复图库搜索分页变量。
This commit is contained in:
O96u committed
1 parent
270af4e707
commit
ac65c1eb9d
51 files changed
+5119
-2059
No files matched your search
+33
-264
@@ -12,15 +12,6 @@ interface SettingsResponse {
|
||||
}
|
||||
}
|
||||
|
||||
interface ApiDocItem {
|
||||
index: number
|
||||
method: 'GET' | 'POST' | 'DELETE'
|
||||
path: string
|
||||
title: string
|
||||
description: string
|
||||
curl: string
|
||||
}
|
||||
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
@@ -31,6 +22,7 @@ const regenerating = ref(false)
|
||||
const confirmRegenerateOpen = ref(false)
|
||||
const regenerateResultOpen = ref(false)
|
||||
const newToken = ref('')
|
||||
const activeEndpointId = ref('upload')
|
||||
|
||||
const baseUrl = computed(() => {
|
||||
const configured = settings.value?.env.siteBaseUrl
|
||||
@@ -49,100 +41,16 @@ const authHeader = computed(() =>
|
||||
hasToken.value ? tokenDisplay.value : 'YOUR-TOKEN'
|
||||
)
|
||||
|
||||
const authHeaderFlag = computed(() => `-H 'Auth-Token: ${authHeader.value}'`)
|
||||
const apiDocs = computed(() =>
|
||||
buildApiDocs({
|
||||
baseUrl: baseUrl.value,
|
||||
authHeader: authHeader.value
|
||||
})
|
||||
)
|
||||
|
||||
const apiDocs = computed<ApiDocItem[]>(() => {
|
||||
const uploadDescription = t('api.docs.upload.desc')
|
||||
const uploadCurl = `curl -X POST "${baseUrl.value}/api/images/upload" \\
|
||||
${authHeaderFlag.value} \\
|
||||
-F "image=@./demo.png"`
|
||||
|
||||
const listDescription = t('api.docs.list.desc')
|
||||
const listCurl = `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
|
||||
${authHeaderFlag.value}`
|
||||
|
||||
return [
|
||||
{
|
||||
index: 1,
|
||||
method: 'POST',
|
||||
path: '/api/images/upload',
|
||||
title: t('api.docs.upload.title'),
|
||||
description: uploadDescription,
|
||||
curl: uploadCurl
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
method: 'GET',
|
||||
path: '/api/images',
|
||||
title: t('api.docs.list.title'),
|
||||
description: listDescription,
|
||||
curl: listCurl
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
method: 'GET',
|
||||
path: '/api/images/search',
|
||||
title: t('api.docs.search.title'),
|
||||
description: t('api.docs.search.desc'),
|
||||
curl: `curl "${baseUrl.value}/api/images/search?q=demo&limit=20&page=1" \\
|
||||
${authHeaderFlag.value}`
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
method: 'DELETE',
|
||||
path: '/api/images',
|
||||
title: t('api.docs.delete.title'),
|
||||
description: t('api.docs.delete.desc'),
|
||||
curl: `curl -X DELETE "${baseUrl.value}/api/images?key=images/2026/08/xxxx.webp" \\
|
||||
${authHeaderFlag.value}`
|
||||
},
|
||||
{
|
||||
index: 5,
|
||||
method: 'POST',
|
||||
path: '/api/images/batch-delete',
|
||||
title: t('api.docs.batchDelete.title'),
|
||||
description: t('api.docs.batchDelete.desc'),
|
||||
curl: `curl -X POST "${baseUrl.value}/api/images/batch-delete" \\
|
||||
${authHeaderFlag.value} \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'`
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const twikooDoc = computed(() => ({
|
||||
method: 'POST' as const,
|
||||
path: '/api/index.php',
|
||||
title: t('api.docs.twikoo.title'),
|
||||
description: t('api.docs.twikoo.desc'),
|
||||
curl: `curl -X POST "${baseUrl.value}/api/index.php" \\
|
||||
-F "token=${authHeader.value}" \\
|
||||
-F "image=@./demo.png"`
|
||||
}))
|
||||
|
||||
function tokenSourceLabel(source: SettingsResponse['tokenSource']) {
|
||||
switch (source) {
|
||||
case 'env':
|
||||
return t('api.tokenSourceEnv')
|
||||
case 'db':
|
||||
return t('api.tokenSourceDb')
|
||||
default:
|
||||
return t('api.tokenSourceNone')
|
||||
}
|
||||
}
|
||||
|
||||
function methodBadgeColor(method: ApiDocItem['method']) {
|
||||
switch (method) {
|
||||
case 'GET':
|
||||
return 'info' as const
|
||||
case 'POST':
|
||||
return 'warning' as const
|
||||
case 'DELETE':
|
||||
return 'error' as const
|
||||
default:
|
||||
return 'neutral' as const
|
||||
}
|
||||
}
|
||||
const activeEndpoint = computed(() =>
|
||||
apiDocs.value.find(endpoint => endpoint.id === activeEndpointId.value) ?? apiDocs.value[0]
|
||||
)
|
||||
|
||||
async function loadSettings() {
|
||||
loading.value = true
|
||||
@@ -251,175 +159,36 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
|
||||
<AppShell v-else>
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<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 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="settings?.envTokenOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
icon="i-lucide-triangle-alert"
|
||||
:title="t('api.envOverrideTitle')"
|
||||
:description="t('api.envOverrideDesc')"
|
||||
<div class="flex flex-col lg:flex-row lg:items-stretch">
|
||||
<ApiSidebar
|
||||
:endpoints="apiDocs"
|
||||
:active-id="activeEndpointId"
|
||||
@select="activeEndpointId = $event"
|
||||
/>
|
||||
|
||||
<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="settings && !hasToken"
|
||||
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="hasToken ? tokenDisplay : t('common.notConfigured')"
|
||||
readonly
|
||||
class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
|
||||
<div class="flex min-w-0 flex-1 flex-col bg-default lg:border-r lg:border-default">
|
||||
<ApiTokenCard
|
||||
:token="tokenDisplay"
|
||||
:loading="loading"
|
||||
:regenerating="regenerating"
|
||||
:can-regenerate="canRegenerate"
|
||||
:token-source="settings?.tokenSource"
|
||||
:env-token-override="settings?.envTokenOverride"
|
||||
:is-admin="isAdmin"
|
||||
@regenerate="requestRegenerate"
|
||||
/>
|
||||
|
||||
<ApiDocView
|
||||
v-if="activeEndpoint"
|
||||
:endpoint="activeEndpoint"
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<CopyButton
|
||||
:label="t('common.copy')"
|
||||
:value="tokenDisplay"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-lucide-refresh-cw"
|
||||
:label="t('api.regenerate')"
|
||||
color="warning"
|
||||
variant="soft"
|
||||
:loading="regenerating"
|
||||
:disabled="!canRegenerate"
|
||||
@click="requestRegenerate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="settings"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ tokenSourceLabel(settings.tokenSource) }}
|
||||
· {{ t('api.tokenHeader') }}
|
||||
<code class="font-mono">Auth-Token: <token></code>
|
||||
<template v-if="hasToken && !settings.envTokenOverride">
|
||||
· {{ t('api.tokenInvalidate') }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-book-open"
|
||||
class="size-5 text-primary"
|
||||
<ApiDebugger
|
||||
v-if="activeEndpoint"
|
||||
:endpoint="activeEndpoint"
|
||||
:token="tokenDisplay"
|
||||
/>
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ t('api.docsTitle') }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-default">
|
||||
<article
|
||||
v-for="doc in apiDocs"
|
||||
:key="doc.index"
|
||||
class="space-y-4 p-5 sm:p-6"
|
||||
>
|
||||
<div class="flex gap-3">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary"
|
||||
>
|
||||
{{ doc.index }}
|
||||
</span>
|
||||
<div class="min-w-0 space-y-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UBadge
|
||||
:color="methodBadgeColor(doc.method)"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
{{ doc.method }}
|
||||
</UBadge>
|
||||
<code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
|
||||
{{ doc.path }}
|
||||
</code>
|
||||
<span class="text-sm font-medium">
|
||||
{{ doc.title }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm leading-relaxed text-muted">
|
||||
{{ doc.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.curlExample') }}
|
||||
</p>
|
||||
<ApiCurlBlock :code="doc.curl" />
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="overflow-hidden rounded-2xl border border-dashed border-default bg-muted/20">
|
||||
<div class="space-y-4 p-5 sm:p-6">
|
||||
<div class="flex gap-3">
|
||||
<UIcon
|
||||
name="i-lucide-message-square"
|
||||
class="mt-0.5 size-5 shrink-0 text-muted"
|
||||
/>
|
||||
<div class="min-w-0 space-y-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<UBadge
|
||||
:color="methodBadgeColor(twikooDoc.method)"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
{{ twikooDoc.method }}
|
||||
</UBadge>
|
||||
<code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
|
||||
{{ twikooDoc.path }}
|
||||
</code>
|
||||
<span class="text-sm font-medium">
|
||||
{{ twikooDoc.title }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm leading-relaxed text-muted">
|
||||
{{ twikooDoc.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-xs font-medium text-muted">
|
||||
{{ t('api.curlExample') }}
|
||||
</p>
|
||||
<ApiCurlBlock
|
||||
:code="twikooDoc.curl"
|
||||
:scrollable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</AppShell>
|
||||
|
||||
+99
-260
@@ -3,7 +3,9 @@ import type { ImageItem } from '~/types/image'
|
||||
|
||||
interface StatsResponse {
|
||||
uploadToday: number
|
||||
uploadYesterday: number
|
||||
uploadMonth: number
|
||||
uploadLastMonth: number
|
||||
deleteToday: number
|
||||
deleteMonth: number
|
||||
uploadTotal: number
|
||||
@@ -15,32 +17,37 @@ interface StatsResponse {
|
||||
web: number
|
||||
api: number
|
||||
}
|
||||
storageUsage: {
|
||||
usedBytes: number
|
||||
totalBytes: number | null
|
||||
percent: number | null
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
items,
|
||||
page: galleryPage,
|
||||
pageSize: galleryPageSize,
|
||||
totalPages: galleryTotalPages,
|
||||
total: galleryTotal,
|
||||
loading: galleryLoading,
|
||||
searchQuery,
|
||||
activeSearch,
|
||||
listSummary,
|
||||
refreshList,
|
||||
fetchList,
|
||||
fetchSearch,
|
||||
fetchTotal,
|
||||
submitSearch,
|
||||
goToPage,
|
||||
setPageSize,
|
||||
removeItems,
|
||||
activeStorageBackend,
|
||||
storageBackendOptions,
|
||||
setActiveStorageBackend,
|
||||
activeUploadSource,
|
||||
setActiveUploadSource,
|
||||
resetFilters,
|
||||
loadStorageBackendOptions
|
||||
} = useImageList()
|
||||
|
||||
const { formatFileSize } = useFileSize()
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
|
||||
@@ -54,61 +61,20 @@ const deleteModalOpen = ref(false)
|
||||
const deleteTargetKeys = ref<string[]>([])
|
||||
const batchDeleting = ref(false)
|
||||
const showScrollTop = ref(false)
|
||||
const currentStorage = ref('all')
|
||||
const previewOpen = ref(false)
|
||||
const previewImage = ref<ImageItem | null>(null)
|
||||
const viewMode = ref<'grid' | 'list'>('grid')
|
||||
|
||||
const storageSelectItems = computed(() => [
|
||||
{ label: t('stats.filterStorageAll'), value: 'all' },
|
||||
...storageBackendOptions.value.map(backend => ({
|
||||
label: backend.name,
|
||||
value: backend.id
|
||||
}))
|
||||
const currentUploadSource = ref('all')
|
||||
|
||||
const uploadSourceItems = computed(() => [
|
||||
{ label: t('stats.filterSourceAll'), value: 'all' },
|
||||
{ label: t('stats.sourceWeb'), value: 'web' },
|
||||
{ label: t('stats.sourceApi'), value: 'api' }
|
||||
])
|
||||
|
||||
const selectedCount = computed(() => selectedKeys.value.size)
|
||||
|
||||
const SOURCE_CHART_COLORS = [
|
||||
'var(--ui-primary)',
|
||||
'#10b981'
|
||||
]
|
||||
|
||||
const sourceUploadItems = computed(() => {
|
||||
const bySource = stats.value?.bySource
|
||||
if (!bySource) return []
|
||||
return [
|
||||
{ key: 'web', label: t('stats.sourceWeb'), count: bySource.web, color: SOURCE_CHART_COLORS[0]! },
|
||||
{ key: 'api', label: t('stats.sourceApi'), count: bySource.api, color: SOURCE_CHART_COLORS[1]! }
|
||||
]
|
||||
})
|
||||
|
||||
const sourceUploadTotal = computed(() =>
|
||||
sourceUploadItems.value.reduce((sum, item) => sum + item.count, 0)
|
||||
)
|
||||
|
||||
function sourcePercent(count: number) {
|
||||
const total = sourceUploadTotal.value
|
||||
if (!total) return 0
|
||||
return Math.round((count / total) * 100)
|
||||
}
|
||||
|
||||
const statCards = computed(() => {
|
||||
const s = stats.value
|
||||
const base = [
|
||||
{ label: t('stats.uploadToday'), value: s?.uploadToday ?? '—' },
|
||||
{ label: t('stats.uploadMonth'), value: s?.uploadMonth ?? '—' },
|
||||
{ label: t('stats.uploadTotal'), value: s?.uploadTotal ?? '—' },
|
||||
{ label: t('stats.storedCount'), value: s?.storedCount ?? '—' },
|
||||
{ label: t('stats.deleteToday'), value: s?.deleteToday ?? '—' },
|
||||
{ label: t('stats.deleteMonth'), value: s?.deleteMonth ?? '—' },
|
||||
isAdmin.value
|
||||
? { label: t('stats.userCount'), value: s?.userCount ?? '—' }
|
||||
: { label: t('stats.deleteTotal'), value: s?.deleteTotal ?? '—' },
|
||||
{ label: t('stats.uploadBytes'), value: s ? formatFileSize(s.uploadBytesTotal) : '—' }
|
||||
]
|
||||
return base
|
||||
})
|
||||
|
||||
function onWindowScroll() {
|
||||
showScrollTop.value = window.scrollY > 400
|
||||
}
|
||||
@@ -142,7 +108,7 @@ async function refreshGallery() {
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await Promise.all([refreshList(), loadStorageBackendOptions()])
|
||||
currentStorage.value = activeStorageBackend.value
|
||||
currentUploadSource.value = activeUploadSource.value
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
@@ -167,7 +133,7 @@ async function refreshAll() {
|
||||
reloadGallery(),
|
||||
loadStorageBackendOptions()
|
||||
])
|
||||
currentStorage.value = activeStorageBackend.value
|
||||
currentUploadSource.value = activeUploadSource.value
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
if (isAuthenticated.value) {
|
||||
@@ -178,17 +144,32 @@ async function refreshAll() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStorageChange(backendId: string) {
|
||||
async function handleUploadSourceChange(uploadSource: string) {
|
||||
if (!isAuthenticated.value) return
|
||||
currentStorage.value = backendId
|
||||
currentUploadSource.value = uploadSource
|
||||
selectedKeys.value = new Set()
|
||||
try {
|
||||
await setActiveStorageBackend(backendId)
|
||||
await setActiveUploadSource(uploadSource)
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResetFilters() {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
currentUploadSource.value = 'all'
|
||||
try {
|
||||
await resetFilters()
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
function updateSelectedKeys(keys: Set<string>) {
|
||||
selectedKeys.value = keys
|
||||
}
|
||||
|
||||
async function handleSearch() {
|
||||
if (!isAuthenticated.value) return
|
||||
selectedKeys.value = new Set()
|
||||
@@ -199,12 +180,6 @@ async function handleSearch() {
|
||||
}
|
||||
}
|
||||
|
||||
async function clearSearch() {
|
||||
searchQuery.value = ''
|
||||
if (!activeSearch.value) return
|
||||
await refreshGallery()
|
||||
}
|
||||
|
||||
function requestDelete(key: string) {
|
||||
if (!isAuthenticated.value) return
|
||||
previewOpen.value = false
|
||||
@@ -223,19 +198,6 @@ function requestBatchDelete() {
|
||||
deleteModalOpen.value = true
|
||||
}
|
||||
|
||||
function selectAllOnPage() {
|
||||
selectedKeys.value = new Set(items.value.map(item => item.key))
|
||||
}
|
||||
|
||||
function invertSelectionOnPage() {
|
||||
const next = new Set(selectedKeys.value)
|
||||
for (const item of items.value) {
|
||||
if (next.has(item.key)) next.delete(item.key)
|
||||
else next.add(item.key)
|
||||
}
|
||||
selectedKeys.value = next
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedKeys.value = new Set()
|
||||
}
|
||||
@@ -311,6 +273,17 @@ async function handleGalleryPageChange(targetPage: number) {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGalleryPageSizeChange(size: number) {
|
||||
selectedKeys.value = new Set()
|
||||
previewOpen.value = false
|
||||
previewImage.value = null
|
||||
try {
|
||||
await setPageSize(size)
|
||||
} catch (error: unknown) {
|
||||
handleAuthError(error)
|
||||
}
|
||||
}
|
||||
|
||||
function openPreview(image: ImageItem) {
|
||||
previewImage.value = image
|
||||
previewOpen.value = true
|
||||
@@ -392,206 +365,70 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="grid gap-3 lg:grid-cols-3 lg:items-stretch">
|
||||
<div class="grid grid-cols-2 gap-3 lg:col-span-2 lg:grid-cols-4">
|
||||
<div
|
||||
v-for="item in statCards"
|
||||
:key="item.label"
|
||||
class="rounded-xl border border-default bg-elevated p-4"
|
||||
>
|
||||
<p class="text-xs text-muted">
|
||||
{{ item.label }}
|
||||
</p>
|
||||
<p class="mt-1 text-2xl font-semibold tabular-nums">
|
||||
{{ item.value }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<GalleryStatsOverview
|
||||
:stats="stats"
|
||||
:loading="statsLoading"
|
||||
/>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col rounded-xl border border-default bg-elevated p-4 lg:col-span-1">
|
||||
<h2 class="shrink-0 text-sm font-medium text-muted">
|
||||
{{ t('stats.sourceDistribution') }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="!sourceUploadTotal"
|
||||
class="flex flex-1 items-center justify-center text-center text-xs text-muted"
|
||||
>
|
||||
{{ t('stats.noData') }}
|
||||
</div>
|
||||
<ul
|
||||
v-else
|
||||
class="mt-4 flex min-h-0 flex-1 flex-col"
|
||||
>
|
||||
<li
|
||||
v-for="item in sourceUploadItems"
|
||||
:key="item.key"
|
||||
class="flex flex-1 flex-col justify-center gap-2 py-1"
|
||||
>
|
||||
<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="h-2 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>
|
||||
<section class="space-y-3">
|
||||
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
|
||||
<GallerySelectionBar
|
||||
:items="items"
|
||||
:selected-keys="selectedKeys"
|
||||
@update:selected-keys="updateSelectedKeys"
|
||||
@clear="clearSelection"
|
||||
/>
|
||||
|
||||
<section class="space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
|
||||
<div class="min-w-0">
|
||||
<h2 class="text-lg font-medium">
|
||||
{{ t('stats.imagesSection') }}
|
||||
</h2>
|
||||
<p
|
||||
v-if="!galleryLoading"
|
||||
class="mt-0.5 text-sm text-muted"
|
||||
>
|
||||
{{ listSummary }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="flex flex-wrap items-center justify-end gap-2"
|
||||
@submit.prevent="handleSearch"
|
||||
>
|
||||
<UBadge
|
||||
v-if="selectedCount"
|
||||
color="primary"
|
||||
variant="subtle"
|
||||
class="shrink-0"
|
||||
>
|
||||
{{ t('stats.selected', { n: selectedCount }) }}
|
||||
</UBadge>
|
||||
<USelect
|
||||
v-model="currentStorage"
|
||||
:items="storageSelectItems"
|
||||
class="w-[6.5rem] shrink-0 sm:w-36"
|
||||
size="sm"
|
||||
:aria-label="t('stats.storage')"
|
||||
@update:model-value="handleStorageChange"
|
||||
/>
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
icon="i-lucide-search"
|
||||
:placeholder="t('stats.searchPlaceholder')"
|
||||
class="w-36 shrink-0 sm:w-44"
|
||||
size="sm"
|
||||
:disabled="galleryLoading"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
icon="i-lucide-search"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:aria-label="t('common.search')"
|
||||
:loading="galleryLoading"
|
||||
>
|
||||
<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>
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-check-check"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:disabled="!items.length || galleryLoading"
|
||||
:aria-label="t('stats.selectAll')"
|
||||
@click="selectAllOnPage"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.selectAll') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-shuffle"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:disabled="!items.length || galleryLoading"
|
||||
:aria-label="t('stats.invertSelection')"
|
||||
@click="invertSelectionOnPage"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.invertSelection') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="selectedCount"
|
||||
type="button"
|
||||
icon="i-lucide-x-circle"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.clearSelection')"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.clearSelection') }}</span>
|
||||
</UButton>
|
||||
<UButton
|
||||
type="button"
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
variant="soft"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
:aria-label="t('stats.batchDelete')"
|
||||
:disabled="!selectedCount"
|
||||
@click="requestBatchDelete"
|
||||
>
|
||||
<span class="hidden sm:inline">{{ t('stats.batchDelete') }}</span>
|
||||
</UButton>
|
||||
</form>
|
||||
<GalleryFilterBar
|
||||
v-model:search-query="searchQuery"
|
||||
:upload-source="currentUploadSource"
|
||||
:upload-source-items="uploadSourceItems"
|
||||
:view-mode="viewMode"
|
||||
:selected-count="selectedCount"
|
||||
:loading="galleryLoading"
|
||||
@update:upload-source="handleUploadSourceChange"
|
||||
@update:view-mode="viewMode = $event"
|
||||
@search="handleSearch"
|
||||
@reset="handleResetFilters"
|
||||
@batch-delete="requestBatchDelete"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="galleryLoading"
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
||||
:class="viewMode === 'grid'
|
||||
? 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
|
||||
: 'space-y-2'"
|
||||
>
|
||||
<USkeleton
|
||||
v-for="n in 12"
|
||||
v-for="n in 10"
|
||||
:key="n"
|
||||
class="aspect-square rounded-lg"
|
||||
:class="viewMode === 'grid' ? 'aspect-[4/3] rounded-lg' : 'h-16 rounded-lg'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ImageGrid
|
||||
v-else
|
||||
v-else-if="viewMode === 'grid'"
|
||||
gallery
|
||||
:show-key="false"
|
||||
show-storage
|
||||
:items="items"
|
||||
:selected-keys="selectedKeys"
|
||||
@update:selected-keys="selectedKeys = $event"
|
||||
selectable
|
||||
@update:selected-keys="updateSelectedKeys"
|
||||
@preview="openPreview"
|
||||
@delete="(image) => requestDelete(image.key)"
|
||||
/>
|
||||
|
||||
<GalleryImageList
|
||||
v-else
|
||||
show-storage
|
||||
:items="items"
|
||||
:selected-keys="selectedKeys"
|
||||
:selectable="true"
|
||||
@update:selected-keys="updateSelectedKeys"
|
||||
@preview="openPreview"
|
||||
@delete="(image) => requestDelete(image.key)"
|
||||
/>
|
||||
|
||||
<ImagePreviewModal
|
||||
@@ -607,9 +444,11 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
:page="galleryPage"
|
||||
:total-pages="galleryTotalPages"
|
||||
:total="galleryTotal"
|
||||
:page-size="galleryPageSize"
|
||||
:unit="t('common.imagesUnit')"
|
||||
:loading="galleryLoading"
|
||||
@update:page="handleGalleryPageChange"
|
||||
@update:page-size="handleGalleryPageSizeChange"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
||||
+2
-616
@@ -1,621 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
|
||||
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, 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 folderFromKey(key: string) {
|
||||
const slash = key.indexOf('/')
|
||||
return slash > 0 ? key.slice(0, slash) : '(root)'
|
||||
}
|
||||
|
||||
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 () => {
|
||||
const status = await fetchStatus()
|
||||
if (!status.initialized && !status.legacyMode) {
|
||||
await navigateTo('/setup')
|
||||
return
|
||||
}
|
||||
await checkSession()
|
||||
if (!isAuthenticated.value) {
|
||||
await navigateTo('/')
|
||||
return
|
||||
}
|
||||
await loadImageLinkBase()
|
||||
await loadLogs()
|
||||
})
|
||||
|
||||
watch(isAuthenticated, async (authed, prev) => {
|
||||
if (authed && prev === false) {
|
||||
await loadImageLinkBase()
|
||||
await loadLogs()
|
||||
}
|
||||
})
|
||||
await navigateTo({ path: '/settings', query: { tab: 'logs' } }, { replace: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<div
|
||||
v-if="isChecking"
|
||||
class="flex min-h-screen items-center justify-center"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-3 text-muted">
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-8 animate-spin"
|
||||
/>
|
||||
<p class="text-sm">
|
||||
{{ t('common.loadingSession') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AdminLoginGate v-else-if="!isAuthenticated" />
|
||||
|
||||
<AppShell v-else>
|
||||
<section class="min-w-0 overflow-x-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-4 py-4 sm:px-6">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-scroll-text"
|
||||
class="mt-0.5 size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="text-base font-semibold">
|
||||
{{ t('logs.pageTitle') }}
|
||||
</h1>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-lucide-refresh-cw"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
:aria-label="t('common.refresh')"
|
||||
:loading="loading"
|
||||
@click="loadLogs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="border-b border-default px-4 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="hidden px-4 py-3 font-medium lg:table-cell">
|
||||
{{ t('logs.colFolder') }}
|
||||
</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="hidden px-4 py-3 font-mono text-xs text-muted lg:table-cell">
|
||||
{{ folderFromKey(row.key) }}
|
||||
</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>
|
||||
</section>
|
||||
</AppShell>
|
||||
</div>
|
||||
<div />
|
||||
</template>
|
||||
+461
-352
@@ -1,4 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { SettingsTab } from '~/types/settings'
|
||||
import { ADMIN_SETTINGS_TABS, USER_SETTINGS_TABS } from '~/types/settings'
|
||||
|
||||
type SettingSource = 'env' | 'db' | 'none'
|
||||
type WebpQualitySource = 'env' | 'db' | 'default'
|
||||
|
||||
@@ -36,6 +39,49 @@ interface SettingsResponse {
|
||||
const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
|
||||
const toast = useToast()
|
||||
const { t, locale } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const allowedTabs = computed(() => (isAdmin.value ? ADMIN_SETTINGS_TABS : USER_SETTINGS_TABS))
|
||||
|
||||
const defaultTab = computed<SettingsTab>(() => (isAdmin.value ? 'basic' : 'logs'))
|
||||
|
||||
function parseTab(value: unknown): SettingsTab | null {
|
||||
if (typeof value !== 'string') return null
|
||||
return allowedTabs.value.includes(value as SettingsTab) ? value as SettingsTab : null
|
||||
}
|
||||
|
||||
const activeTab = computed<SettingsTab>({
|
||||
get() {
|
||||
return parseTab(route.query.tab) ?? defaultTab.value
|
||||
},
|
||||
set(tab) {
|
||||
void router.replace({ query: { tab } })
|
||||
}
|
||||
})
|
||||
|
||||
const sidebarItems = computed(() => {
|
||||
const labels: Record<SettingsTab, { label: string, icon: string }> = {
|
||||
basic: { label: t('settings.navBasic'), icon: 'i-lucide-sliders-horizontal' },
|
||||
domains: { label: t('settings.navDomains'), icon: 'i-lucide-globe' },
|
||||
access: { label: t('settings.navAccess'), icon: 'i-lucide-shield' },
|
||||
logs: { label: t('settings.navLogs'), icon: 'i-lucide-scroll-text' }
|
||||
}
|
||||
return allowedTabs.value.map(id => ({ id, ...labels[id] }))
|
||||
})
|
||||
|
||||
const showSaveBar = computed(() =>
|
||||
isAdmin.value && ['basic', 'domains', 'access'].includes(activeTab.value)
|
||||
)
|
||||
|
||||
const pageSubtitle = computed(() => {
|
||||
if (activeTab.value === 'basic') {
|
||||
return t('settings.pageSubtitleBasic')
|
||||
}
|
||||
return t('settings.pageSubtitle')
|
||||
})
|
||||
|
||||
const checkingRelease = ref(false)
|
||||
|
||||
const domainSeparationDocUrl = computed(() =>
|
||||
locale.value === 'en'
|
||||
@@ -89,17 +135,6 @@ function sourceBadge(source: SettingSource | WebpQualitySource) {
|
||||
}
|
||||
}
|
||||
|
||||
function tokenSourceText(source: SettingSource) {
|
||||
switch (source) {
|
||||
case 'env':
|
||||
return t('settings.tokenEnv')
|
||||
case 'db':
|
||||
return t('settings.tokenDb')
|
||||
default:
|
||||
return t('settings.tokenNone')
|
||||
}
|
||||
}
|
||||
|
||||
function errorStatus(error: unknown): number {
|
||||
if (typeof error === 'object' && error !== null && 'statusCode' in error) {
|
||||
return (error as { statusCode: number }).statusCode
|
||||
@@ -210,22 +245,50 @@ async function loadSettings() {
|
||||
}
|
||||
}
|
||||
|
||||
async function checkLatestRelease() {
|
||||
async function checkLatestRelease(options: { notify?: boolean, refresh?: boolean } = {}) {
|
||||
const { notify = false, refresh = false } = options
|
||||
checkingRelease.value = true
|
||||
try {
|
||||
releaseCheck.value = await $fetch<ReleaseCheckResponse>('/api/version/latest', {
|
||||
credentials: 'include'
|
||||
credentials: 'include',
|
||||
query: refresh ? { refresh: '1' } : undefined
|
||||
})
|
||||
|
||||
if (!notify) return
|
||||
|
||||
const result = releaseCheck.value
|
||||
if (!result?.latestVersion) {
|
||||
toast.add({ title: t('settings.checkUpdateFailed'), color: 'error' })
|
||||
return
|
||||
}
|
||||
if (result.updateAvailable) {
|
||||
toast.add({
|
||||
title: t('settings.updateAvailable', { version: `v${result.latestVersion}` }),
|
||||
color: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
toast.add({ title: t('settings.upToDate'), color: 'success' })
|
||||
} catch {
|
||||
releaseCheck.value = null
|
||||
if (notify) {
|
||||
toast.add({ title: t('settings.checkUpdateFailed'), color: 'error' })
|
||||
}
|
||||
} finally {
|
||||
checkingRelease.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPage() {
|
||||
if (!isAdmin.value) {
|
||||
await navigateTo('/')
|
||||
return
|
||||
if (isAdmin.value) {
|
||||
await Promise.all([loadSettings(), checkLatestRelease()])
|
||||
}
|
||||
}
|
||||
|
||||
function ensureValidTab() {
|
||||
if (route.query.tab && !parseTab(route.query.tab)) {
|
||||
void router.replace({ query: { tab: defaultTab.value } })
|
||||
}
|
||||
await Promise.all([loadSettings(), checkLatestRelease()])
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -235,28 +298,31 @@ onMounted(async () => {
|
||||
return
|
||||
}
|
||||
await checkSession()
|
||||
if (isAuthenticated.value && !isAdmin.value) {
|
||||
await navigateTo('/')
|
||||
if (!isAuthenticated.value) {
|
||||
return
|
||||
}
|
||||
if (isAuthenticated.value && isAdmin.value) {
|
||||
await loadPage()
|
||||
}
|
||||
ensureValidTab()
|
||||
await loadPage()
|
||||
})
|
||||
|
||||
watch(isAuthenticated, async (authed, prev) => {
|
||||
if (authed && prev === false) {
|
||||
if (!isAdmin.value) {
|
||||
await navigateTo('/')
|
||||
return
|
||||
}
|
||||
ensureValidTab()
|
||||
await nextTick()
|
||||
await loadPage()
|
||||
} else {
|
||||
} else if (!authed) {
|
||||
settings.value = null
|
||||
releaseCheck.value = null
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => route.query.tab, () => {
|
||||
ensureValidTab()
|
||||
})
|
||||
|
||||
watch(isAdmin, () => {
|
||||
ensureValidTab()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -278,351 +344,394 @@ watch(isAuthenticated, async (authed, prev) => {
|
||||
|
||||
<AdminLoginGate v-else-if="!isAuthenticated" />
|
||||
|
||||
<AppShell v-else-if="isAdmin">
|
||||
<AppShell v-else>
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<UploadPreferencesPanel embedded />
|
||||
</section>
|
||||
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex items-start gap-2 border-b border-default px-5 py-4 sm:px-6">
|
||||
<UIcon
|
||||
name="i-lucide-server"
|
||||
class="mt-0.5 size-5 shrink-0 text-primary"
|
||||
<div class="flex min-h-[36rem] flex-col lg:flex-row lg:items-stretch">
|
||||
<SettingsSidebar
|
||||
v-model="activeTab"
|
||||
:items="sidebarItems"
|
||||
:title="t('settings.pageTitle')"
|
||||
:subtitle="pageSubtitle"
|
||||
/>
|
||||
<div class="min-w-0">
|
||||
<h1 class="text-base font-semibold">
|
||||
{{ t('settings.title') }}
|
||||
</h1>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ t('settings.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="settings"
|
||||
class="p-5 sm:p-6"
|
||||
>
|
||||
<div class="space-y-5">
|
||||
<div class="grid min-w-0 gap-5 lg:grid-cols-2 lg:items-stretch">
|
||||
<div class="flex h-full min-w-0 flex-col space-y-3 rounded-xl border border-default/60 bg-muted/10 p-4 sm:p-5">
|
||||
<h3 class="text-sm font-semibold">
|
||||
{{ t('settings.featureToggles') }}
|
||||
</h3>
|
||||
|
||||
<label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
|
||||
<UCheckbox
|
||||
v-model="allowRegistrationDraft"
|
||||
class="mt-0.5 shrink-0"
|
||||
/>
|
||||
<span class="min-w-0">
|
||||
<span class="block text-sm font-medium">{{ t('settings.allowRegistration') }}</span>
|
||||
<span class="mt-1 block text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.allowRegistrationHint') }}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
|
||||
<UCheckbox
|
||||
:model-value="storageUseDatePathDraft"
|
||||
class="mt-0.5 shrink-0"
|
||||
:disabled="settings.storageUseDatePathSource === 'env'"
|
||||
@update:model-value="(v) => storageUseDatePathDraft = v === true"
|
||||
/>
|
||||
<span class="min-w-0">
|
||||
<span class="flex flex-wrap items-center gap-2 text-sm font-medium">
|
||||
{{ t('settings.storageUseDatePath') }}
|
||||
<UBadge
|
||||
v-if="settings.storageUseDatePathSource === 'env'"
|
||||
:color="sourceBadge(settings.storageUseDatePathSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.storageUseDatePathSource).label }}
|
||||
</UBadge>
|
||||
</span>
|
||||
<span class="mt-1 block text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.storageUseDatePathHint') }}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
|
||||
<UCheckbox
|
||||
:model-value="hideFolderInUrlDraft"
|
||||
class="mt-0.5 shrink-0"
|
||||
:disabled="settings.hideFolderInUrlSource === 'env'"
|
||||
@update:model-value="(v) => hideFolderInUrlDraft = v === true"
|
||||
/>
|
||||
<span class="min-w-0">
|
||||
<span class="flex flex-wrap items-center gap-2 text-sm font-medium">
|
||||
{{ t('settings.hideFolderInUrl') }}
|
||||
<UBadge
|
||||
v-if="settings.hideFolderInUrlSource === 'env'"
|
||||
:color="sourceBadge(settings.hideFolderInUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.hideFolderInUrlSource).label }}
|
||||
</UBadge>
|
||||
</span>
|
||||
<span class="mt-1 block text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.hideFolderInUrlHint') }}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex h-full min-w-0 flex-col space-y-4 rounded-xl border border-default/60 bg-muted/10 p-4 sm:p-5">
|
||||
<h3 class="text-sm font-semibold">
|
||||
{{ t('settings.domainSettings') }}
|
||||
</h3>
|
||||
|
||||
<label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
|
||||
<UCheckbox
|
||||
:model-value="domainSeparationDraft"
|
||||
class="mt-0.5 shrink-0"
|
||||
@update:model-value="onDomainSeparationDraftChange"
|
||||
/>
|
||||
<span class="min-w-0">
|
||||
<span class="block text-sm font-medium">{{ t('setup.domainSeparation') }}</span>
|
||||
<span class="mt-1 block text-xs leading-relaxed text-muted">
|
||||
{{ t('setup.domainSeparationHint') }}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<p
|
||||
v-if="domainSeparationDraft"
|
||||
class="rounded-lg border border-warning/25 bg-warning/5 px-3 py-2.5 text-xs leading-relaxed text-warning"
|
||||
>
|
||||
{{ t('setup.domainSeparationProxyHint') }}
|
||||
<a
|
||||
:href="domainSeparationDocUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary hover:underline"
|
||||
<div class="flex min-w-0 flex-1 flex-col bg-default">
|
||||
<div
|
||||
class="flex-1"
|
||||
:class="activeTab === 'logs' ? '' : 'p-4 sm:p-5'"
|
||||
>
|
||||
<div
|
||||
v-if="activeTab === 'basic' && isAdmin"
|
||||
>
|
||||
<SettingsPanel v-if="settings">
|
||||
<SettingsSection
|
||||
:title="t('settings.featureToggles')"
|
||||
:hint="t('settings.featureTogglesHint')"
|
||||
>
|
||||
{{ t('setup.domainSeparationProxyExample') }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="settings.runtime.currentOrigin"
|
||||
class="text-xs text-muted"
|
||||
>
|
||||
{{ t('settings.runtimeDetected', { url: settings.runtime.currentOrigin }) }}
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="domainSeparationDraft && settings.runtime.hostRole === 'unknown'"
|
||||
class="rounded-lg border border-error/25 bg-error/5 px-3 py-2.5 text-xs leading-relaxed text-error"
|
||||
>
|
||||
{{ t('settings.hostRoleUnknown') }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="domainSeparationDraft"
|
||||
class="grid gap-4 sm:grid-cols-2"
|
||||
>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label class="text-sm font-medium">{{ t('settings.siteBaseUrl') }}</label>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.siteBaseUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.siteBaseUrlSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.siteBaseUrlHint') }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<UInput
|
||||
v-model="siteBaseUrlDraft"
|
||||
:placeholder="t('settings.siteBaseUrlPlaceholder')"
|
||||
class="min-w-0 flex-1 font-mono text-sm"
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
v-model="allowRegistrationDraft"
|
||||
:title="t('settings.allowRegistration')"
|
||||
:hint="t('settings.allowRegistrationHint')"
|
||||
/>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsUserPreferencesFields />
|
||||
|
||||
<SettingsSection
|
||||
:title="t('settings.systemInfo')"
|
||||
:hint="t('settings.systemInfoHint')"
|
||||
>
|
||||
<template #action>
|
||||
<UButton
|
||||
v-if="settings.runtime.currentOrigin"
|
||||
:label="t('settings.fillDetectedOrigin')"
|
||||
color="neutral"
|
||||
:label="t('settings.checkUpdate')"
|
||||
icon="i-lucide-refresh-cw"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
@click="fillDetectedSiteOrigin"
|
||||
:loading="checkingRelease"
|
||||
@click="checkLatestRelease({ notify: true, refresh: true })"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-if="settings.effectiveSiteBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
:title="settings.effectiveSiteBaseUrl"
|
||||
>
|
||||
{{ t('settings.siteBaseUrlActive', { url: settings.effectiveSiteBaseUrl }) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label class="text-sm font-medium">{{ t('settings.imageBaseUrl') }}</label>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.imageBaseUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.imageBaseUrlSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.imageBaseUrlHint') }}
|
||||
</p>
|
||||
<UInput
|
||||
v-model="imageBaseUrlDraft"
|
||||
:placeholder="t('settings.imageBaseUrlPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
</template>
|
||||
<SettingsSystemInfo
|
||||
:app-version="settings.appVersion"
|
||||
:update-available="!!releaseCheck?.updateAvailable"
|
||||
:latest-version="releaseCheck?.latestVersion ?? null"
|
||||
:release-url="releaseCheck?.releaseUrl ?? null"
|
||||
/>
|
||||
<p
|
||||
v-if="settings.effectiveImageBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
:title="settings.effectiveImageBaseUrl"
|
||||
>
|
||||
{{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</SettingsSection>
|
||||
</SettingsPanel>
|
||||
<div
|
||||
v-else
|
||||
class="space-y-1.5"
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label class="text-sm font-medium">{{ t('settings.imageBaseUrl') }}</label>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.imageBaseUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.imageBaseUrlSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.imageBaseUrlSingleHint') }}
|
||||
</p>
|
||||
<UInput
|
||||
v-model="imageBaseUrlDraft"
|
||||
:placeholder="t('settings.imageBaseUrlPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
<p
|
||||
v-if="settings.effectiveImageBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
:title="settings.effectiveImageBaseUrl"
|
||||
>
|
||||
{{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-referer-section space-y-1.5 rounded-xl border border-default/60 bg-muted/10 p-4 sm:p-5">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h3 class="text-sm font-semibold">
|
||||
{{ t('settings.accessControl') }}
|
||||
</h3>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.refererSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.refererSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.refererHint') }}
|
||||
</p>
|
||||
<UTextarea
|
||||
v-model="refererDraft"
|
||||
:placeholder="t('settings.refererPlaceholder')"
|
||||
:rows="4"
|
||||
:autoresize="false"
|
||||
class="settings-referer-field w-full font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex justify-center py-12"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="settings"
|
||||
class="flex flex-col gap-3 border-t border-default px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-2 text-xs text-muted">
|
||||
<UIcon
|
||||
name="i-lucide-key-round"
|
||||
class="size-3.5 shrink-0"
|
||||
/>
|
||||
<span class="min-w-0">
|
||||
{{ t('settings.apiTokenLine', { source: tokenSourceText(settings.tokenSource) }) }}
|
||||
<a
|
||||
:href="releaseCheck?.updateAvailable && releaseCheck.releaseUrl
|
||||
? releaseCheck.releaseUrl
|
||||
: 'https://github.com/O96u/PicHost/releases'"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-0.5 underline-offset-2 hover:underline"
|
||||
:class="releaseCheck?.updateAvailable ? 'text-warning' : 'text-primary'"
|
||||
:title="t('settings.viewReleases')"
|
||||
<div
|
||||
v-else-if="activeTab === 'domains' && isAdmin"
|
||||
>
|
||||
v{{ settings.appVersion }}
|
||||
<UIcon
|
||||
name="i-lucide-external-link"
|
||||
class="size-3 opacity-70"
|
||||
/>
|
||||
</a>
|
||||
<template v-if="releaseCheck?.updateAvailable && releaseCheck.latestVersion">
|
||||
·
|
||||
<a
|
||||
:href="releaseCheck.releaseUrl || 'https://github.com/O96u/PicHost/releases'"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-warning hover:underline"
|
||||
<SettingsPanel v-if="settings">
|
||||
<SettingsSection :title="t('settings.domainSettings')">
|
||||
<p
|
||||
v-if="settings.runtime.currentOrigin"
|
||||
class="mb-3 pl-3 text-xs text-primary"
|
||||
>
|
||||
{{ t('settings.runtimeDetected', { url: settings.runtime.currentOrigin }) }}
|
||||
</p>
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
:model-value="domainSeparationDraft"
|
||||
:title="t('setup.domainSeparation')"
|
||||
:hint="t('setup.domainSeparationHint')"
|
||||
@update:model-value="onDomainSeparationDraftChange"
|
||||
/>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
|
||||
<p
|
||||
v-if="domainSeparationDraft"
|
||||
class="rounded-xl border border-warning/25 bg-warning/5 px-4 py-3 text-xs leading-relaxed text-warning"
|
||||
>
|
||||
{{ t('setup.domainSeparationProxyHint') }}
|
||||
<a
|
||||
:href="domainSeparationDocUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{{ t('setup.domainSeparationProxyExample') }}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="domainSeparationDraft && settings.runtime.hostRole === 'unknown'"
|
||||
class="rounded-xl border border-error/25 bg-error/5 px-4 py-3 text-xs leading-relaxed text-error"
|
||||
>
|
||||
{{ t('settings.hostRoleUnknown') }}
|
||||
</p>
|
||||
|
||||
<SettingsSection
|
||||
:title="t('settings.pathAndLink')"
|
||||
:hint="t('settings.pathAndLinkHint')"
|
||||
>
|
||||
<SettingsGroup>
|
||||
<SettingsToggleRow
|
||||
:model-value="hideFolderInUrlDraft"
|
||||
:disabled="settings.hideFolderInUrlSource === 'env'"
|
||||
@update:model-value="(v) => hideFolderInUrlDraft = v"
|
||||
>
|
||||
<template #title>
|
||||
<span class="inline-flex flex-wrap items-center gap-2">
|
||||
{{ t('settings.hideFolderInUrl') }}
|
||||
<UBadge
|
||||
v-if="settings.hideFolderInUrlSource === 'env'"
|
||||
:color="sourceBadge(settings.hideFolderInUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.hideFolderInUrlSource).label }}
|
||||
</UBadge>
|
||||
</span>
|
||||
</template>
|
||||
<template #hint>
|
||||
{{ t('settings.hideFolderInUrlHint') }}
|
||||
</template>
|
||||
</SettingsToggleRow>
|
||||
<SettingsToggleRow
|
||||
:model-value="storageUseDatePathDraft"
|
||||
:disabled="settings.storageUseDatePathSource === 'env'"
|
||||
@update:model-value="(v) => storageUseDatePathDraft = v"
|
||||
>
|
||||
<template #title>
|
||||
<span class="inline-flex flex-wrap items-center gap-2">
|
||||
{{ t('settings.storageUseDatePath') }}
|
||||
<UBadge
|
||||
v-if="settings.storageUseDatePathSource === 'env'"
|
||||
:color="sourceBadge(settings.storageUseDatePathSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.storageUseDatePathSource).label }}
|
||||
</UBadge>
|
||||
</span>
|
||||
</template>
|
||||
<template #hint>
|
||||
{{ t('settings.storageUseDatePathHint') }}
|
||||
</template>
|
||||
</SettingsToggleRow>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection :title="t('settings.imageBaseUrl')">
|
||||
<div
|
||||
v-if="domainSeparationDraft"
|
||||
class="grid gap-4 sm:grid-cols-2"
|
||||
>
|
||||
<SettingsGroup>
|
||||
<div class="space-y-3 px-4 py-4 sm:px-5">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.siteBaseUrl') }}
|
||||
</p>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.siteBaseUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.siteBaseUrlSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.siteBaseUrlHint') }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<UInput
|
||||
v-model="siteBaseUrlDraft"
|
||||
:placeholder="t('settings.siteBaseUrlPlaceholder')"
|
||||
class="min-w-0 flex-1 font-mono text-sm"
|
||||
/>
|
||||
<UButton
|
||||
v-if="settings.runtime.currentOrigin"
|
||||
:label="t('settings.fillDetectedOrigin')"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="shrink-0"
|
||||
@click="fillDetectedSiteOrigin"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-if="settings.effectiveSiteBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
:title="settings.effectiveSiteBaseUrl"
|
||||
>
|
||||
{{ t('settings.siteBaseUrlActive', { url: settings.effectiveSiteBaseUrl }) }}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup>
|
||||
<div class="space-y-3 px-4 py-4 sm:px-5">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.imageBaseUrl') }}
|
||||
</p>
|
||||
<UBadge
|
||||
:color="sourceBadge(settings.imageBaseUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.imageBaseUrlSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.imageBaseUrlHint') }}
|
||||
</p>
|
||||
<UInput
|
||||
v-model="imageBaseUrlDraft"
|
||||
:placeholder="t('settings.imageBaseUrlPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
/>
|
||||
<p
|
||||
v-if="settings.effectiveImageBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
:title="settings.effectiveImageBaseUrl"
|
||||
>
|
||||
{{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</div>
|
||||
|
||||
<SettingsGroup v-else>
|
||||
<div class="space-y-3 px-4 py-4 sm:px-5">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<p class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.imageBaseUrl') }}
|
||||
</p>
|
||||
<UBadge
|
||||
color="success"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ t('settings.badgeOptional') }}
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-if="settings.imageBaseUrlSource === 'env'"
|
||||
:color="sourceBadge(settings.imageBaseUrlSource).color"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ sourceBadge(settings.imageBaseUrlSource).label }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.imageBaseUrlSingleHint') }}
|
||||
</p>
|
||||
<UInput
|
||||
v-model="imageBaseUrlDraft"
|
||||
:placeholder="t('settings.imageBaseUrlPlaceholder')"
|
||||
class="w-full font-mono text-sm"
|
||||
/>
|
||||
<p
|
||||
v-if="settings.effectiveImageBaseUrl"
|
||||
class="truncate text-xs text-muted"
|
||||
:title="settings.effectiveImageBaseUrl"
|
||||
>
|
||||
{{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
</SettingsSection>
|
||||
</SettingsPanel>
|
||||
<div
|
||||
v-else
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
{{ t('settings.updateAvailable', { version: `v${releaseCheck.latestVersion}` }) }}
|
||||
</a>
|
||||
</template>
|
||||
<template v-if="hasServerChanges">
|
||||
· <span class="text-warning">{{ t('settings.unsavedChanges') }}</span>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||||
<UButton
|
||||
:label="t('settings.manageToken')"
|
||||
icon="i-lucide-external-link"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
size="sm"
|
||||
to="/api"
|
||||
/>
|
||||
<UButton
|
||||
:label="t('common.save')"
|
||||
icon="i-lucide-save"
|
||||
size="sm"
|
||||
:loading="savingServer"
|
||||
:disabled="!hasServerChanges"
|
||||
@click="saveServerSettings"
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeTab === 'access' && isAdmin"
|
||||
class="settings-referer-section"
|
||||
>
|
||||
<SettingsPanel v-if="settings">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
|
||||
<UIcon
|
||||
name="i-lucide-shield"
|
||||
class="size-4 text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h2 class="text-sm font-semibold text-highlighted">
|
||||
{{ t('settings.accessControl') }}
|
||||
</h2>
|
||||
<UBadge
|
||||
:color="refererDraft.trim() ? 'success' : 'neutral'"
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
>
|
||||
{{ refererDraft.trim() ? t('settings.refererEnabled') : t('settings.refererUnrestricted') }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.refererHint') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid gap-5 lg:grid-cols-[minmax(0,1fr)_12rem] xl:grid-cols-[minmax(0,1fr)_14rem]">
|
||||
<div class="min-w-0 space-y-2">
|
||||
<label class="text-sm font-medium text-highlighted">
|
||||
{{ t('settings.refererDomainsLabel') }}
|
||||
</label>
|
||||
<UTextarea
|
||||
v-model="refererDraft"
|
||||
:placeholder="t('settings.refererPlaceholder')"
|
||||
:rows="7"
|
||||
:autoresize="false"
|
||||
class="settings-referer-field w-full font-mono text-sm"
|
||||
/>
|
||||
<div class="flex gap-2 rounded-lg border border-info/20 bg-info/5 px-3 py-2.5 text-xs leading-relaxed text-muted">
|
||||
<UIcon
|
||||
name="i-lucide-info"
|
||||
class="mt-0.5 size-3.5 shrink-0 text-info"
|
||||
/>
|
||||
<span>{{ t('settings.refererTip') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 border-l border-default pl-4">
|
||||
<div>
|
||||
<p class="text-xs font-medium text-highlighted">
|
||||
{{ t('settings.refererExamplesTitle') }}
|
||||
</p>
|
||||
<p class="mt-2 font-mono text-xs text-muted">
|
||||
{{ t('settings.refererExamplesSample') }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-medium text-highlighted">
|
||||
{{ t('settings.refererScenarioTitle') }}
|
||||
</p>
|
||||
<p class="mt-1 text-xs leading-relaxed text-muted">
|
||||
{{ t('settings.refererScenarioDesc') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsPanel>
|
||||
<div
|
||||
v-else
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SettingsLogsPanel v-else-if="activeTab === 'logs'" />
|
||||
</div>
|
||||
|
||||
<SettingsServerFooter
|
||||
v-if="showSaveBar && settings"
|
||||
:has-changes="hasServerChanges"
|
||||
:saving="savingServer"
|
||||
@save="saveServerSettings"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+59
-49
@@ -21,6 +21,11 @@ const deleteTarget = ref<StorageBackendItem | null>(null)
|
||||
const deleteConfirmName = ref('')
|
||||
const deleting = ref(false)
|
||||
|
||||
const defaultBackendName = computed(() => {
|
||||
const backend = storageData.value?.backends.find(item => item.isDefault)
|
||||
return backend?.name ?? t('storage.backendLocal')
|
||||
})
|
||||
|
||||
async function loadStorage() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -232,59 +237,59 @@ watch(isAuthenticated, async (authed) => {
|
||||
<AdminLoginGate v-else-if="!isAuthenticated" />
|
||||
|
||||
<AppShell v-else-if="isAdmin">
|
||||
<section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
|
||||
<div class="flex items-start gap-2">
|
||||
<UIcon
|
||||
name="i-lucide-hard-drive"
|
||||
class="mt-0.5 size-5 shrink-0 text-primary"
|
||||
/>
|
||||
<div>
|
||||
<h1 class="text-base font-semibold">
|
||||
{{ t('storage.pageTitle') }}
|
||||
</h1>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ t('storage.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
:label="t('storage.addBackend')"
|
||||
icon="i-lucide-plus"
|
||||
size="sm"
|
||||
:disabled="storageData?.envOverride"
|
||||
@click="openCreate"
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="min-w-0">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">
|
||||
{{ t('storage.pageTitle') }}
|
||||
</h1>
|
||||
<p class="text-sm text-muted">
|
||||
{{ t('storage.pageSubtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
:label="t('storage.addBackend')"
|
||||
icon="i-lucide-plus"
|
||||
size="sm"
|
||||
:disabled="storageData?.envOverride"
|
||||
@click="openCreate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="mt-5 space-y-5">
|
||||
<UAlert
|
||||
v-if="storageData?.envOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
:title="t('storage.envOverride')"
|
||||
icon="i-lucide-triangle-alert"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="loading"
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-5 sm:p-6">
|
||||
<UAlert
|
||||
v-if="storageData?.envOverride"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
class="mb-5"
|
||||
:title="t('storage.envOverride')"
|
||||
icon="i-lucide-triangle-alert"
|
||||
<template v-else-if="storageData">
|
||||
<StorageOverview
|
||||
:backends="storageData.backends"
|
||||
:loading="loading"
|
||||
/>
|
||||
|
||||
<p class="mb-5 text-xs text-muted">
|
||||
{{ t('storage.switchHint') }}
|
||||
</p>
|
||||
<UAlert
|
||||
v-if="!storageData.envOverride"
|
||||
color="success"
|
||||
variant="subtle"
|
||||
icon="i-lucide-info"
|
||||
:description="t('storage.defaultStorageTip', { name: defaultBackendName })"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="loading"
|
||||
class="flex justify-center py-16"
|
||||
>
|
||||
<UIcon
|
||||
name="i-lucide-loader-circle"
|
||||
class="size-6 animate-spin text-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="storageData"
|
||||
class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
||||
<StorageBackendCard
|
||||
v-for="backend in storageData.backends"
|
||||
:key="backend.id"
|
||||
@@ -298,11 +303,16 @@ watch(isAuthenticated, async (authed) => {
|
||||
@delete="confirmDelete(backend)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StorageSupportedBackends />
|
||||
</template>
|
||||
</section>
|
||||
</AppShell>
|
||||
|
||||
<UModal v-model:open="formOpen">
|
||||
<UModal
|
||||
v-model:open="formOpen"
|
||||
:ui="{ content: 'max-w-2xl sm:max-w-3xl' }"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-5 sm:p-6">
|
||||
<h2 class="mb-4 text-base font-semibold">
|
||||
|
||||
Reference in new issue
Block a user