From ac65c1eb9d301944c94bfd276ee9d427d8245582 Mon Sep 17 00:00:00 2001
From: O96u <muxuico@gmail.com>
Date: Tue, 1 Sep 2026 17:15:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E3=80=81API=E3=80=81=E5=9B=BE=E5=BA=93=E4=B8=8E?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=E9=A1=B5=E9=9D=A2=E5=89=8D=E7=AB=AF=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将操作日志并入设置侧栏，补齐检查更新提示与版本接口刷新；拆分各模块组件并修复图库搜索分页变量。
---
 app/assets/css/main.css                       |  18 +
 app/components/ApiCurlBlock.vue               |  14 +-
 app/components/AppShell.vue                   |   9 +-
 app/components/CopyButton.vue                 |   5 +-
 app/components/ImageCard.vue                  | 152 +++-
 app/components/ImageGrid.vue                  |  22 +-
 app/components/ImagePreviewModal.vue          | 435 +++++++---
 app/components/MobileUserMenu.vue             |  18 -
 app/components/PaginationBar.vue              | 304 +++++--
 app/components/UploadPreferencesPanel.vue     |  42 +-
 app/components/api/ApiDebugger.vue            | 379 ++++++++
 app/components/api/ApiDocView.vue             | 121 +++
 app/components/api/ApiMethodBadge.vue         |  34 +
 app/components/api/ApiSidebar.vue             | 148 ++++
 app/components/api/ApiTokenCard.vue           | 146 ++++
 app/components/gallery/GalleryFilterBar.vue   | 136 +++
 app/components/gallery/GalleryImageList.vue   | 221 +++++
 .../gallery/GallerySelectionBar.vue           |  55 ++
 .../gallery/GalleryStatsOverview.vue          | 238 +++++
 app/components/settings/SettingsGroup.vue     |   5 +
 app/components/settings/SettingsLogsPanel.vue | 566 ++++++++++++
 app/components/settings/SettingsPanel.vue     |   7 +
 app/components/settings/SettingsSection.vue   |  37 +
 .../settings/SettingsServerFooter.vue         |  33 +
 app/components/settings/SettingsSidebar.vue   |  47 +
 .../settings/SettingsSystemInfo.vue           |  36 +
 app/components/settings/SettingsToggleRow.vue |  34 +
 .../SettingsUserPreferencesFields.vue         | 148 ++++
 app/components/storage/StorageBackendCard.vue | 279 +++---
 app/components/storage/StorageOverview.vue    | 184 ++++
 .../storage/StorageSupportedBackends.vue      |  62 ++
 app/components/storage/StorageUsageBar.vue    |  63 +-
 app/composables/useApiDocs.ts                 | 323 +++++++
 app/composables/useImageList.ts               |  76 +-
 app/pages/api.vue                             | 297 +------
 app/pages/gallery.vue                         | 359 +++-----
 app/pages/logs.vue                            | 618 +------------
 app/pages/settings/index.vue                  | 813 ++++++++++--------
 app/pages/storage.vue                         | 108 +--
 app/types/settings.ts                         |   5 +
 i18n/locales/en.json                          | 187 +++-
 i18n/locales/zh-CN.json                       | 193 ++++-
 server/api/images/index.get.ts                |  19 +-
 server/api/images/search.get.ts               |  20 +-
 server/api/stats.get.ts                       |  44 +-
 server/api/version/latest.get.ts              |   4 +-
 server/utils/app-version.ts                   |   4 +-
 server/utils/db.ts                            |  27 +
 server/utils/image-index.ts                   |  58 +-
 server/utils/image-query.ts                   |  19 +
 server/utils/storage.ts                       |   6 +
 51 files changed, 5119 insertions(+), 2059 deletions(-)
 create mode 100644 app/components/api/ApiDebugger.vue
 create mode 100644 app/components/api/ApiDocView.vue
 create mode 100644 app/components/api/ApiMethodBadge.vue
 create mode 100644 app/components/api/ApiSidebar.vue
 create mode 100644 app/components/api/ApiTokenCard.vue
 create mode 100644 app/components/gallery/GalleryFilterBar.vue
 create mode 100644 app/components/gallery/GalleryImageList.vue
 create mode 100644 app/components/gallery/GallerySelectionBar.vue
 create mode 100644 app/components/gallery/GalleryStatsOverview.vue
 create mode 100644 app/components/settings/SettingsGroup.vue
 create mode 100644 app/components/settings/SettingsLogsPanel.vue
 create mode 100644 app/components/settings/SettingsPanel.vue
 create mode 100644 app/components/settings/SettingsSection.vue
 create mode 100644 app/components/settings/SettingsServerFooter.vue
 create mode 100644 app/components/settings/SettingsSidebar.vue
 create mode 100644 app/components/settings/SettingsSystemInfo.vue
 create mode 100644 app/components/settings/SettingsToggleRow.vue
 create mode 100644 app/components/settings/SettingsUserPreferencesFields.vue
 create mode 100644 app/components/storage/StorageOverview.vue
 create mode 100644 app/components/storage/StorageSupportedBackends.vue
 create mode 100644 app/composables/useApiDocs.ts
 create mode 100644 app/types/settings.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7dfffc1..eea00f0 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -106,3 +106,21 @@
 .upload-settings-btn:hover .upload-settings-icon {
   transform: rotate(90deg);
 }
+
+.api-debug-response {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(82 82 82) transparent;
+}
+
+.api-debug-response::-webkit-scrollbar {
+  width: 6px;
+}
+
+.api-debug-response::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: rgb(82 82 82);
+}
+
+.api-debug-response::-webkit-scrollbar-track {
+  background: transparent;
+}
diff --git a/app/components/ApiCurlBlock.vue b/app/components/ApiCurlBlock.vue
index 15ae6ba..d3067bb 100644
--- a/app/components/ApiCurlBlock.vue
+++ b/app/components/ApiCurlBlock.vue
@@ -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>
diff --git a/app/components/AppShell.vue b/app/components/AppShell.vue
index a8552f1..c251183 100644
--- a/app/components/AppShell.vue
+++ b/app/components/AppShell.vue
@@ -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)
 }
diff --git a/app/components/CopyButton.vue b/app/components/CopyButton.vue
index dd54a58..d8bb78d 100644
--- a/app/components/CopyButton.vue
+++ b/app/components/CopyButton.vue
@@ -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"
diff --git a/app/components/ImageCard.vue b/app/components/ImageCard.vue
index ebcc7c0..4137438 100644
--- a/app/components/ImageCard.vue
+++ b/app/components/ImageCard.vue
@@ -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"
diff --git a/app/components/ImageGrid.vue b/app/components/ImageGrid.vue
index 8499413..ea44cd6 100644
--- a/app/components/ImageGrid.vue
+++ b/app/components/ImageGrid.vue
@@ -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
diff --git a/app/components/ImagePreviewModal.vue b/app/components/ImagePreviewModal.vue
index 824d96a..1965419 100644
--- a/app/components/ImagePreviewModal.vue
+++ b/app/components/ImagePreviewModal.vue
@@ -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>
diff --git a/app/components/MobileUserMenu.vue b/app/components/MobileUserMenu.vue
index c4af159..e450fea 100644
--- a/app/components/MobileUserMenu.vue
+++ b/app/components/MobileUserMenu.vue
@@ -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"
diff --git a/app/components/PaginationBar.vue b/app/components/PaginationBar.vue
index 66dd598..a58f468 100644
--- a/app/components/PaginationBar.vue
+++ b/app/components/PaginationBar.vue
@@ -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>
diff --git a/app/components/UploadPreferencesPanel.vue b/app/components/UploadPreferencesPanel.vue
index c185b85..315731f 100644
--- a/app/components/UploadPreferencesPanel.vue
+++ b/app/components/UploadPreferencesPanel.vue
@@ -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>
diff --git a/app/components/api/ApiDebugger.vue b/app/components/api/ApiDebugger.vue
new file mode 100644
index 0000000..6dbd49f
--- /dev/null
+++ b/app/components/api/ApiDebugger.vue
@@ -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>
diff --git a/app/components/api/ApiDocView.vue b/app/components/api/ApiDocView.vue
new file mode 100644
index 0000000..dc586fb
--- /dev/null
+++ b/app/components/api/ApiDocView.vue
@@ -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>
diff --git a/app/components/api/ApiMethodBadge.vue b/app/components/api/ApiMethodBadge.vue
new file mode 100644
index 0000000..fe113b8
--- /dev/null
+++ b/app/components/api/ApiMethodBadge.vue
@@ -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>
diff --git a/app/components/api/ApiSidebar.vue b/app/components/api/ApiSidebar.vue
new file mode 100644
index 0000000..f759bb2
--- /dev/null
+++ b/app/components/api/ApiSidebar.vue
@@ -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>
diff --git a/app/components/api/ApiTokenCard.vue b/app/components/api/ApiTokenCard.vue
new file mode 100644
index 0000000..156c22a
--- /dev/null
+++ b/app/components/api/ApiTokenCard.vue
@@ -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: &lt;token&gt;</code>
+        <template v-if="token && !envTokenOverride">
+          · {{ t('api.tokenInvalidate') }}
+        </template>
+      </p>
+    </div>
+  </section>
+</template>
diff --git a/app/components/gallery/GalleryFilterBar.vue b/app/components/gallery/GalleryFilterBar.vue
new file mode 100644
index 0000000..052b01c
--- /dev/null
+++ b/app/components/gallery/GalleryFilterBar.vue
@@ -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>
diff --git a/app/components/gallery/GalleryImageList.vue b/app/components/gallery/GalleryImageList.vue
new file mode 100644
index 0000000..bb0aa16
--- /dev/null
+++ b/app/components/gallery/GalleryImageList.vue
@@ -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>
diff --git a/app/components/gallery/GallerySelectionBar.vue b/app/components/gallery/GallerySelectionBar.vue
new file mode 100644
index 0000000..03edbc3
--- /dev/null
+++ b/app/components/gallery/GallerySelectionBar.vue
@@ -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>
diff --git a/app/components/gallery/GalleryStatsOverview.vue b/app/components/gallery/GalleryStatsOverview.vue
new file mode 100644
index 0000000..eed8451
--- /dev/null
+++ b/app/components/gallery/GalleryStatsOverview.vue
@@ -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>
diff --git a/app/components/settings/SettingsGroup.vue b/app/components/settings/SettingsGroup.vue
new file mode 100644
index 0000000..3285e4b
--- /dev/null
+++ b/app/components/settings/SettingsGroup.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/settings/SettingsLogsPanel.vue b/app/components/settings/SettingsLogsPanel.vue
new file mode 100644
index 0000000..4684428
--- /dev/null
+++ b/app/components/settings/SettingsLogsPanel.vue
@@ -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>
diff --git a/app/components/settings/SettingsPanel.vue b/app/components/settings/SettingsPanel.vue
new file mode 100644
index 0000000..6224252
--- /dev/null
+++ b/app/components/settings/SettingsPanel.vue
@@ -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>
diff --git a/app/components/settings/SettingsSection.vue b/app/components/settings/SettingsSection.vue
new file mode 100644
index 0000000..40e303a
--- /dev/null
+++ b/app/components/settings/SettingsSection.vue
@@ -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>
diff --git a/app/components/settings/SettingsServerFooter.vue b/app/components/settings/SettingsServerFooter.vue
new file mode 100644
index 0000000..6cdd787
--- /dev/null
+++ b/app/components/settings/SettingsServerFooter.vue
@@ -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>
diff --git a/app/components/settings/SettingsSidebar.vue b/app/components/settings/SettingsSidebar.vue
new file mode 100644
index 0000000..ba4853b
--- /dev/null
+++ b/app/components/settings/SettingsSidebar.vue
@@ -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>
diff --git a/app/components/settings/SettingsSystemInfo.vue b/app/components/settings/SettingsSystemInfo.vue
new file mode 100644
index 0000000..1d29912
--- /dev/null
+++ b/app/components/settings/SettingsSystemInfo.vue
@@ -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>
diff --git a/app/components/settings/SettingsToggleRow.vue b/app/components/settings/SettingsToggleRow.vue
new file mode 100644
index 0000000..d83ea8c
--- /dev/null
+++ b/app/components/settings/SettingsToggleRow.vue
@@ -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>
diff --git a/app/components/settings/SettingsUserPreferencesFields.vue b/app/components/settings/SettingsUserPreferencesFields.vue
new file mode 100644
index 0000000..96627f8
--- /dev/null
+++ b/app/components/settings/SettingsUserPreferencesFields.vue
@@ -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>
diff --git a/app/components/storage/StorageBackendCard.vue b/app/components/storage/StorageBackendCard.vue
index 1e8761f..ab4cb65 100644
--- a/app/components/storage/StorageBackendCard.vue
+++ b/app/components/storage/StorageBackendCard.vue
@@ -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>
diff --git a/app/components/storage/StorageOverview.vue b/app/components/storage/StorageOverview.vue
new file mode 100644
index 0000000..9d33f2a
--- /dev/null
+++ b/app/components/storage/StorageOverview.vue
@@ -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>
diff --git a/app/components/storage/StorageSupportedBackends.vue b/app/components/storage/StorageSupportedBackends.vue
new file mode 100644
index 0000000..cc41be6
--- /dev/null
+++ b/app/components/storage/StorageSupportedBackends.vue
@@ -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>
diff --git a/app/components/storage/StorageUsageBar.vue b/app/components/storage/StorageUsageBar.vue
index c722e1d..3743cfd 100644
--- a/app/components/storage/StorageUsageBar.vue
+++ b/app/components/storage/StorageUsageBar.vue
@@ -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>
diff --git a/app/composables/useApiDocs.ts b/app/composables/useApiDocs.ts
new file mode 100644
index 0000000..7fb30d1
--- /dev/null
+++ b/app/composables/useApiDocs.ts
@@ -0,0 +1,323 @@
+export type ApiDocMethod = 'GET' | 'POST' | 'DELETE'
+export type ApiDocCategory = 'image' | 'extension' | 'system'
+export type ApiParamLocation = 'form-data' | 'query' | 'header' | 'body'
+
+export interface ApiDocParam {
+  name: string
+  type: string
+  location: ApiParamLocation
+  required: boolean
+  descriptionKey: string
+}
+
+export interface ApiDocEndpoint {
+  id: string
+  category: ApiDocCategory
+  method: ApiDocMethod
+  path: string
+  titleKey: string
+  descKey: string
+  params: ApiDocParam[]
+  requiresAuth: boolean
+  curl: string
+  responseExample: string
+}
+
+interface ApiDocsContext {
+  baseUrl: string
+  authHeader: string
+}
+
+function authFlag(authHeader: string) {
+  return `-H 'Auth-Token: ${authHeader}'`
+}
+
+export function buildApiDocs(ctx: ApiDocsContext): ApiDocEndpoint[] {
+  const { baseUrl, authHeader } = ctx
+  const auth = authFlag(authHeader)
+
+  return [
+    {
+      id: 'upload',
+      category: 'image',
+      method: 'POST',
+      path: '/api/images/upload',
+      titleKey: 'api.docs.upload.title',
+      descKey: 'api.docs.upload.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'image',
+          type: 'file',
+          location: 'form-data',
+          required: true,
+          descriptionKey: 'api.params.upload.image'
+        },
+        {
+          name: 'file',
+          type: 'file',
+          location: 'form-data',
+          required: false,
+          descriptionKey: 'api.params.upload.file'
+        },
+        {
+          name: 'files',
+          type: 'file',
+          location: 'form-data',
+          required: false,
+          descriptionKey: 'api.params.upload.files'
+        },
+        {
+          name: 'token',
+          type: 'string',
+          location: 'form-data',
+          required: false,
+          descriptionKey: 'api.params.upload.token'
+        }
+      ],
+      curl: `curl -X POST "${baseUrl}/api/images/upload" \\
+  ${auth} \\
+  -F "image=@./demo.png"`,
+      responseExample: `{
+  "success": true,
+  "items": [
+    {
+      "key": "images/2026/08/abc123.webp",
+      "url": "https://pic.example.com/abc123.webp",
+      "originalName": "demo.png",
+      "contentType": "image/webp",
+      "size": 12345,
+      "uploadedAt": "2026-08-01T12:00:00.000Z",
+      "markdown": "![demo.png](https://pic.example.com/abc123.webp)",
+      "html": "<img src=\\"https://pic.example.com/abc123.webp\\" alt=\\"demo.png\\">"
+    }
+  ],
+  "errors": []
+}`
+    },
+    {
+      id: 'list',
+      category: 'image',
+      method: 'GET',
+      path: '/api/images',
+      titleKey: 'api.docs.list.title',
+      descKey: 'api.docs.list.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'limit',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.limit'
+        },
+        {
+          name: 'page',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.page'
+        },
+        {
+          name: 'backendId',
+          type: 'string',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.backendId'
+        }
+      ],
+      curl: `curl "${baseUrl}/api/images?limit=20&page=1" \\
+  ${auth}`,
+      responseExample: `{
+  "items": [
+    {
+      "key": "images/2026/08/abc123.webp",
+      "url": "https://pic.example.com/abc123.webp",
+      "originalName": "demo.png",
+      "contentType": "image/webp",
+      "size": 12345,
+      "uploadedAt": "2026-08-01T12:00:00.000Z",
+      "markdown": "![demo.png](https://pic.example.com/abc123.webp)",
+      "html": "<img src=\\"https://pic.example.com/abc123.webp\\" alt=\\"demo.png\\">"
+    }
+  ],
+  "total": 1,
+  "page": 1,
+  "pageSize": 20,
+  "totalPages": 1
+}`
+    },
+    {
+      id: 'search',
+      category: 'image',
+      method: 'GET',
+      path: '/api/images/search',
+      titleKey: 'api.docs.search.title',
+      descKey: 'api.docs.search.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'q',
+          type: 'string',
+          location: 'query',
+          required: true,
+          descriptionKey: 'api.params.search.q'
+        },
+        {
+          name: 'limit',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.limit'
+        },
+        {
+          name: 'page',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.page'
+        },
+        {
+          name: 'backendId',
+          type: 'string',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.backendId'
+        }
+      ],
+      curl: `curl "${baseUrl}/api/images/search?q=demo&limit=20&page=1" \\
+  ${auth}`,
+      responseExample: `{
+  "items": [],
+  "total": 0,
+  "page": 1,
+  "pageSize": 20,
+  "totalPages": 0
+}`
+    },
+    {
+      id: 'delete',
+      category: 'image',
+      method: 'DELETE',
+      path: '/api/images',
+      titleKey: 'api.docs.delete.title',
+      descKey: 'api.docs.delete.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'key',
+          type: 'string',
+          location: 'query',
+          required: true,
+          descriptionKey: 'api.params.delete.key'
+        }
+      ],
+      curl: `curl -X DELETE "${baseUrl}/api/images?key=images/2026/08/xxxx.webp" \\
+  ${auth}`,
+      responseExample: `{
+  "success": true
+}`
+    },
+    {
+      id: 'batchDelete',
+      category: 'image',
+      method: 'POST',
+      path: '/api/images/batch-delete',
+      titleKey: 'api.docs.batchDelete.title',
+      descKey: 'api.docs.batchDelete.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'keys',
+          type: 'string[]',
+          location: 'body',
+          required: true,
+          descriptionKey: 'api.params.batchDelete.keys'
+        }
+      ],
+      curl: `curl -X POST "${baseUrl}/api/images/batch-delete" \\
+  ${auth} \\
+  -H "Content-Type: application/json" \\
+  -d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'`,
+      responseExample: `{
+  "success": true,
+  "deleted": ["images/2026/08/a.webp"],
+  "failed": []
+}`
+    },
+    {
+      id: 'twikoo',
+      category: 'extension',
+      method: 'POST',
+      path: '/api/index.php',
+      titleKey: 'api.docs.twikoo.title',
+      descKey: 'api.docs.twikoo.desc',
+      requiresAuth: false,
+      params: [
+        {
+          name: 'image',
+          type: 'file',
+          location: 'form-data',
+          required: true,
+          descriptionKey: 'api.params.twikoo.image'
+        },
+        {
+          name: 'token',
+          type: 'string',
+          location: 'form-data',
+          required: true,
+          descriptionKey: 'api.params.twikoo.token'
+        }
+      ],
+      curl: `curl -X POST "${baseUrl}/api/index.php" \\
+  -F "token=${authHeader}" \\
+  -F "image=@./demo.png"`,
+      responseExample: `{
+  "result": "success",
+  "code": 200,
+  "url": "https://pic.example.com/abc123.webp"
+}`
+    },
+    {
+      id: 'config',
+      category: 'system',
+      method: 'GET',
+      path: '/api/auth/config',
+      titleKey: 'api.docs.config.title',
+      descKey: 'api.docs.config.desc',
+      requiresAuth: false,
+      params: [],
+      curl: `curl "${baseUrl}/api/auth/config"`,
+      responseExample: `{
+  "initialized": true,
+  "allowRegistration": false,
+  "legacyMode": false,
+  "adminSecretConfigured": false,
+  "apiUploadTokenConfigured": true
+}`
+    },
+    {
+      id: 'count',
+      category: 'system',
+      method: 'GET',
+      path: '/api/images/count',
+      titleKey: 'api.docs.count.title',
+      descKey: 'api.docs.count.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'backendId',
+          type: 'string',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.backendId'
+        }
+      ],
+      curl: `curl "${baseUrl}/api/images/count" \\
+  ${auth}`,
+      responseExample: `{
+  "total": 42
+}`
+    }
+  ]
+}
diff --git a/app/composables/useImageList.ts b/app/composables/useImageList.ts
index 1de45b3..8b4dbef 100644
--- a/app/composables/useImageList.ts
+++ b/app/composables/useImageList.ts
@@ -3,12 +3,13 @@ import type {
   ImageListResponse
 } from '~/types/image'
 
-const PAGE_SIZE = 12
+const PAGE_SIZE_DEFAULT = 10
 
 export function useImageList() {
   const { t } = useI18n()
   const items = ref<ImageItem[]>([])
   const page = ref(1)
+  const pageSize = ref(PAGE_SIZE_DEFAULT)
   const totalPages = ref(1)
   const total = ref(0)
   const loading = ref(false)
@@ -17,6 +18,8 @@ export function useImageList() {
   const searchQuery = ref('')
   const activeSearch = ref('')
   const activeStorageBackend = ref('all')
+  const activeContentType = ref('all')
+  const activeUploadSource = ref('all')
   const storageBackendOptions = ref<Array<{ id: string, name: string }>>([])
 
   function storageQueryParams(): Record<string, string> {
@@ -25,8 +28,21 @@ export function useImageList() {
     return { backendId }
   }
 
+  function filterQueryParams(): Record<string, string> {
+    const params: Record<string, string> = { ...storageQueryParams() }
+    const contentType = activeContentType.value.trim()
+    if (contentType && contentType !== 'all') {
+      params.contentType = contentType
+    }
+    const uploadSource = activeUploadSource.value.trim()
+    if (uploadSource && uploadSource !== 'all') {
+      params.uploadSource = uploadSource
+    }
+    return params
+  }
+
   function listQueryParams(): Record<string, string> {
-    return storageQueryParams()
+    return filterQueryParams()
   }
 
   function matchesActiveStorage(item: ImageItem) {
@@ -72,7 +88,7 @@ export function useImageList() {
       const response = await $fetch<ImageListResponse>('/api/images', {
         credentials: 'include',
         query: {
-          limit: PAGE_SIZE,
+          limit: pageSize.value,
           page: targetPage,
           ...listQueryParams()
         }
@@ -100,7 +116,7 @@ export function useImageList() {
         credentials: 'include',
         query: {
           q,
-          limit: PAGE_SIZE,
+          limit: pageSize.value,
           page: targetPage,
           ...listQueryParams()
         }
@@ -141,6 +157,40 @@ export function useImageList() {
     }
   }
 
+  async function setActiveContentType(contentType: string) {
+    const next = contentType.trim() || 'all'
+    if (next === activeContentType.value) return
+    activeContentType.value = next
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
+  async function setActiveUploadSource(uploadSource: string) {
+    const next = uploadSource.trim() || 'all'
+    if (next === activeUploadSource.value) return
+    activeUploadSource.value = next
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
+  async function resetFilters() {
+    searchQuery.value = ''
+    activeSearch.value = ''
+    activeStorageBackend.value = 'all'
+    activeContentType.value = 'all'
+    activeUploadSource.value = 'all'
+    page.value = 1
+    await Promise.all([fetchList(1), fetchTotal()])
+  }
+
   async function submitSearch() {
     const q = searchQuery.value.trim()
     activeSearch.value = q
@@ -161,6 +211,17 @@ export function useImageList() {
     }
   }
 
+  async function setPageSize(size: number) {
+    if (!Number.isFinite(size) || size <= 0 || size === pageSize.value) return
+    pageSize.value = size
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
   function prependItems(newItems: ImageItem[]) {
     const matched = newItems.filter(item => matchesActiveStorage(item))
     if (!matched.length || page.value !== 1) return
@@ -220,10 +281,13 @@ export function useImageList() {
   return {
     items,
     page,
+    pageSize,
     totalPages,
     total,
     loading,
     activeStorageBackend,
+    activeContentType,
+    activeUploadSource,
     storageBackendOptions,
     searchQuery,
     activeSearch,
@@ -234,9 +298,13 @@ export function useImageList() {
     refreshList,
     initializeList,
     setActiveStorageBackend,
+    setActiveContentType,
+    setActiveUploadSource,
+    resetFilters,
     loadStorageBackendOptions,
     submitSearch,
     goToPage,
+    setPageSize,
     prependItems,
     removeItems
   }
diff --git a/app/pages/api.vue b/app/pages/api.vue
index 9c68685..a9522a3 100644
--- a/app/pages/api.vue
+++ b/app/pages/api.vue
@@ -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: &lt;token&gt;</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>
diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index 892a81c..23786a0 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -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>
 
diff --git a/app/pages/logs.vue b/app/pages/logs.vue
index 4c557f1..05f0227 100644
--- a/app/pages/logs.vue
+++ b/app/pages/logs.vue
@@ -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>
diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
index bcffc18..294771f 100644
--- a/app/pages/settings/index.vue
+++ b/app/pages/settings/index.vue
@@ -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>
diff --git a/app/pages/storage.vue b/app/pages/storage.vue
index c2b4923..574122c 100644
--- a/app/pages/storage.vue
+++ b/app/pages/storage.vue
@@ -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">
diff --git a/app/types/settings.ts b/app/types/settings.ts
new file mode 100644
index 0000000..141889b
--- /dev/null
+++ b/app/types/settings.ts
@@ -0,0 +1,5 @@
+export type SettingsTab = 'basic' | 'domains' | 'access' | 'logs'
+
+export const ADMIN_SETTINGS_TABS: SettingsTab[] = ['basic', 'domains', 'access', 'logs']
+
+export const USER_SETTINGS_TABS: SettingsTab[] = ['logs']
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 58072df..e9561e1 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -149,11 +149,13 @@
     "url": "URL",
     "markdown": "Markdown",
     "html": "HTML",
+    "bbcode": "BBCode",
     "copied": "Copied to clipboard",
     "copiedLabel": "Copied {label}",
     "copiedUrl": "URL copied",
     "copiedMarkdown": "Markdown copied",
     "copiedHtml": "HTML copied",
+    "copiedBbcode": "BBCode copied",
     "copiedFormat": "Copied {format}",
     "failed": "Copy failed",
     "failedManual": "Copy failed — select the link manually",
@@ -181,12 +183,39 @@
   },
   "settings": {
     "title": "System settings",
+    "pageTitle": "Settings & preferences",
+    "pageSubtitle": "Manage system configuration and activity logs",
+    "pageSubtitleBasic": "Manage system configuration and upload preferences",
+    "navBasic": "Basic",
+    "navDomains": "Domains & paths",
+    "navAccess": "Access control",
+    "navPreferences": "Preferences",
+    "navLogs": "Activity log",
+    "systemVersion": "Version",
+    "checkUpdate": "Check for updates",
+    "saveSettings": "Save settings",
     "subtitle": "Saved to database; environment variables take precedence",
     "featureToggles": "Feature toggles",
+    "featureTogglesHint": "Control registration and system behavior",
+    "pathAndLink": "Paths & links",
+    "pathAndLinkHint": "Control image URL format and upload directory structure",
+    "domainSeparationSection": "Domain separation",
     "allowRegistration": "Open registration",
     "allowRegistrationHint": "Allow new users to register (regular users see only their images)",
     "accessControl": "Access control",
     "refererHint": "Referer hotlink protection; comma-separated hostnames, empty = no restriction",
+    "refererDomainsLabel": "Allowed domains",
+    "refererTip": "Separate multiple domains with commas (,); wildcards are not supported",
+    "refererExamplesTitle": "Example",
+    "refererExamplesSample": "example.com, static.example.com",
+    "refererScenarioTitle": "Common use case",
+    "refererScenarioDesc": "Allow your main site and static site to embed images",
+    "refererEnabled": "Enabled",
+    "refererUnrestricted": "Unrestricted",
+    "systemInfo": "System",
+    "systemInfoHint": "Current version and updates",
+    "uploadConvenience": "Upload convenience",
+    "defaultCopyFormat": "Default copy format",
     "refererPlaceholder": "example.com, www.example.com",
     "domainSettings": "Domain settings",
     "domainSeparationActive": "Domain separation enabled: image host serves images only; site host serves admin and API",
@@ -214,12 +243,15 @@
     "badgeSaved": "Saved",
     "badgeDefault": "Default",
     "badgeUnset": "Not set",
+    "badgeOptional": "Optional",
     "tokenEnv": "Environment",
     "tokenDb": "Generated in app",
     "tokenNone": "Not configured",
-    "apiTokenLine": "API Token · {source} ·",
+    "apiTokenLine": "Source: {source}",
     "viewReleases": "View releases",
     "updateAvailable": "Update available: {version}",
+    "upToDate": "You are on the latest version",
+    "checkUpdateFailed": "Failed to check for updates. Please try again later",
     "unsavedChanges": "Unsaved changes",
     "manageToken": "Manage token",
     "envOverride": "Overridden by environment variable; cannot edit in UI",
@@ -278,11 +310,36 @@
     "servingPublicShort": "Public",
     "backendName": "Display name",
     "badgeDefault": "Default",
+    "badgeDefaultStorage": "Default storage",
     "badgeDisabled": "Disabled",
     "badgeEnabled": "Enabled",
+    "overviewTitle": "Storage overview",
+    "overviewSubtitle": "Usage across all storage backends",
+    "overviewTotal": "Total capacity",
+    "overviewUsed": "Used",
+    "overviewFree": "Free",
+    "overviewUsageRate": "Overall usage",
+    "overviewQuota": "Total quota",
+    "overviewInstances": "Backends",
+    "overviewActive": "Active",
+    "capacityDistribution": "Distribution",
+    "backendType": "Type",
+    "storageId": "Storage ID",
+    "storageType": "Storage type",
+    "badgeLocal": "Local",
+    "defaultStorageTip": "Default storage: new uploads are saved to “{name}”. Use “Set as default” on another backend to change this.",
+    "supportedTitle": "Supported backends",
+    "supportedSubtitle": "PicHost supports multiple storage backends for different scenarios",
+    "supportedLocalDesc": "Ideal for small deployments and personal use",
+    "supportedR2Desc": "Highly available, low-cost object storage",
+    "supportedS3Title": "S3 compatible",
+    "supportedS3Desc": "Storage services compatible with the Amazon S3 API",
+    "footerTip": "The default backend receives all new uploads",
     "statTotal": "Total",
     "statUsed": "Used",
     "statFree": "Free",
+    "statFileCount": "Files",
+    "statQuota": "Quota",
     "usageRate": "Usage",
     "indexImages": "PicHost images {count} · {size}",
     "setDefault": "Set as default",
@@ -313,7 +370,16 @@
     "uploadToday": "Uploaded today",
     "uploadMonth": "Uploaded this month",
     "uploadTotal": "Total uploads",
-    "storedCount": "Stored images",
+    "storedCount": "Stored now",
+    "totalFiles": "Total files",
+    "totalOccupied": "{size} used",
+    "storageUsage": "Storage usage",
+    "noQuota": "No quota configured",
+    "vsYesterday": "vs yesterday",
+    "vsLastMonth": "vs last month",
+    "trendUp": "↑ {p}%",
+    "trendDown": "↓ {p}%",
+    "trendFlat": "flat",
     "deleteToday": "Deleted today",
     "deleteMonth": "Deleted this month",
     "deleteTotal": "Total deleted",
@@ -322,15 +388,39 @@
     "sourceDistribution": "Uploads by source",
     "sourceWeb": "Web",
     "sourceApi": "API",
+    "tagWeb": "Web",
+    "tagApi": "API",
     "noData": "No data",
     "gallery": "Gallery",
     "imagesSection": "All images",
     "filterStorageAll": "All storage",
     "storage": "Storage",
     "searchPlaceholder": "Search filename",
+    "searchPlaceholderWide": "Search filename, tags, or links",
+    "filterType": "Image type",
+    "filterTypeAll": "All types",
+    "filterSource": "Upload source",
+    "filterSourceAll": "All sources",
+    "sourceWeb": "Web upload",
+    "sourceApi": "API upload",
+    "resetFilters": "Reset",
+    "batchActions": "Bulk actions",
+    "selectedItems": "{n} selected",
+    "colFilename": "Filename",
+    "colPreview": "Preview",
+    "colSize": "Size",
+    "colType": "Type",
+    "colSource": "Source",
+    "colUploadedAt": "Uploaded",
+    "colActions": "Actions",
+    "previewBadge": "Image",
     "clear": "Clear",
     "selected": "{n} selected",
     "batchDelete": "Delete selected",
+    "batchSelect": "Batch select",
+    "viewMode": "View mode",
+    "viewGrid": "Grid view",
+    "viewList": "List view",
     "selectAll": "Select all",
     "invertSelection": "Invert",
     "clearSelection": "Clear selection",
@@ -378,19 +468,23 @@
     "previewFailed": "Preview failed",
     "openPreview": "View full image",
     "previewTitle": "Image details",
+    "previewSubtitle": "View image info and links",
     "previewOriginalName": "Filename",
     "previewUploadedAt": "Uploaded",
     "previewSize": "Size",
-    "previewContentType": "Type",
+    "previewSizeDetail": "{size} ({bytes} bytes)",
+    "previewContentType": "File type",
     "previewOwner": "Uploader",
     "previewStorage": "Storage",
-    "previewKey": "Storage path",
+    "previewKey": "Image path",
     "previewExtension": "Extension",
     "previewDimensions": "Dimensions",
     "previewDimensionsUnknown": "Loading…",
     "previewUploadSource": "Upload source",
     "uploadSourceUnknown": "Unknown",
-    "previewLinks": "Links",
+    "previewLinks": "Links & embed",
+    "previewCopyLink": "Copy link",
+    "previewDownload": "Download",
     "previewOpen": "Open in new tab",
     "previewClose": "Close",
     "uploader": "Uploader: {name}",
@@ -402,6 +496,11 @@
     "confirm": "Delete"
   },
   "pagination": {
+    "totalCount": "{total} {unit}",
+    "pageStatus": "Page {page} / {totalPages}",
+    "perPage": "{size} / page",
+    "pageSize": "Page size",
+    "pageNumber": "Page {page}",
     "pageOf": "Page {page} / {totalPages} · {total} {unit}",
     "totalOnly": "{total} {unit}",
     "first": "First page",
@@ -409,6 +508,8 @@
     "next": "Next page",
     "last": "Last page",
     "goTo": "Go",
+    "goToPrefix": "Go to",
+    "goToSuffix": "",
     "pagePlaceholder": "Page"
   },
   "api": {
@@ -437,6 +538,74 @@
     "newTokenDesc": "Copy and save it now. You can copy again from the field above after closing.",
     "copyToken": "Copy token",
     "saved": "Saved",
+    "searchPlaceholder": "Search endpoints…",
+    "showToken": "Show",
+    "hideToken": "Hide",
+    "helpText": "Need help? Read the full API docs",
+    "helpTitle": "Need help?",
+    "helpSubtitle": "Read the full API docs",
+    "expand": "Expand",
+    "collapse": "Collapse",
+    "viewDocs": "View docs",
+    "requestParams": "Request parameters",
+    "paramName": "Name",
+    "paramType": "Type",
+    "paramLocation": "In",
+    "paramRequired": "Required",
+    "paramDescription": "Description",
+    "required": "Yes",
+    "optional": "No",
+    "requestExample": "Request example",
+    "responseExample": "Response example",
+    "categories": {
+      "image": "Images",
+      "extension": "Plugins",
+      "system": "System"
+    },
+    "params": {
+      "upload": {
+        "image": "Primary upload field",
+        "file": "Compatibility field, single file",
+        "files": "Compatibility field, multiple files",
+        "token": "Twikoo protocol form token"
+      },
+      "list": {
+        "limit": "Page size, default 20, max 100",
+        "page": "Page number, starts at 1"
+      },
+      "search": {
+        "q": "Search keyword, required"
+      },
+      "delete": {
+        "key": "Storage path, e.g. images/2026/08/xxx.webp"
+      },
+      "batchDelete": {
+        "keys": "Array of image keys to delete"
+      },
+      "twikoo": {
+        "image": "Image file",
+        "token": "API token"
+      },
+      "backendId": "Storage backend ID, optional"
+    },
+    "debug": {
+      "title": "Try it",
+      "headers": "Headers",
+      "query": "Query",
+      "body": "Body",
+      "send": "Send request",
+      "response": "Response",
+      "selectFile": "Select file",
+      "noFileSelected": "No file selected",
+      "tokenPlaceholder": "Enter Auth-Token",
+      "invalidJson": "Invalid JSON",
+      "sendFailed": "Request failed",
+      "networkError": "Network error or unreachable",
+      "notesTitle": "Notes",
+      "noteSuccess": "200 means success with JSON body",
+      "noteError": "4xx / 5xx means failure; check error field",
+      "noteLimit": "Upload limit: up to 10 files, 10 MB each"
+    },
     "docs": {
       "upload": {
         "title": "Upload images",
@@ -461,6 +630,14 @@
       "twikoo": {
         "title": "Twikoo-compatible upload",
         "desc": "Twikoo / EasyImage 2.0 protocol; stored under images/. Fields: image + token."
+      },
+      "config": {
+        "title": "Get config",
+        "desc": "Public system config; no authentication required."
+      },
+      "count": {
+        "title": "Image count",
+        "desc": "Total images in your visible scope."
       }
     }
   },
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 335a242..67eb07a 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -149,11 +149,13 @@
     "url": "直链",
     "markdown": "Markdown",
     "html": "HTML",
+    "bbcode": "BBCode",
     "copied": "已复制到剪贴板",
     "copiedLabel": "已复制 {label}",
     "copiedUrl": "已复制直链",
     "copiedMarkdown": "已复制 Markdown",
     "copiedHtml": "已复制 HTML",
+    "copiedBbcode": "已复制 BBCode",
     "copiedFormat": "已复制 {format}",
     "failed": "复制失败",
     "failedManual": "复制失败，请手动选中链接复制",
@@ -181,12 +183,39 @@
   },
   "settings": {
     "title": "系统设置",
+    "pageTitle": "设置与偏好",
+    "pageSubtitle": "管理系统配置与操作日志",
+    "pageSubtitleBasic": "管理系统配置与上传偏好",
+    "navBasic": "基础设置",
+    "navDomains": "域名与路径",
+    "navAccess": "访问控制",
+    "navPreferences": "偏好设置",
+    "navLogs": "操作日志",
+    "systemVersion": "系统版本",
+    "checkUpdate": "检查更新",
+    "saveSettings": "保存设置",
     "subtitle": "保存后写入数据库；环境变量优先级更高",
     "featureToggles": "功能开关",
+    "featureTogglesHint": "控制注册与系统行为",
+    "pathAndLink": "路径与链接",
+    "pathAndLinkHint": "控制图片直链格式与上传目录结构",
+    "domainSeparationSection": "域名分离",
     "allowRegistration": "开放用户注册",
     "allowRegistrationHint": "允许新用户自行注册（普通用户仅可见自己的图片）",
     "accessControl": "访问控制",
     "refererHint": "Referer 防盗链，逗号分隔允许引用的域名，留空不限制",
+    "refererDomainsLabel": "允许引用的域名",
+    "refererTip": "多个域名请使用英文逗号 (,) 分隔，不支持通配符",
+    "refererExamplesTitle": "推荐示例",
+    "refererExamplesSample": "example.com, static.example.com",
+    "refererScenarioTitle": "常见场景",
+    "refererScenarioDesc": "允许主站与静态站点引用图片",
+    "refererEnabled": "已开启",
+    "refererUnrestricted": "未限制",
+    "systemInfo": "系统信息",
+    "systemInfoHint": "当前系统版本与更新",
+    "uploadConvenience": "上传便捷功能",
+    "defaultCopyFormat": "默认复制格式",
     "refererPlaceholder": "example.com, www.example.com",
     "domainSettings": "域名配置",
     "domainSeparationActive": "已启用域名分离：图片域仅出图，管理域提供后台与 API",
@@ -214,12 +243,15 @@
     "badgeSaved": "已保存",
     "badgeDefault": "默认",
     "badgeUnset": "未设置",
+    "badgeOptional": "可选",
     "tokenEnv": "环境变量",
     "tokenDb": "后台生成",
     "tokenNone": "未配置",
-    "apiTokenLine": "API Token · {source} ·",
+    "apiTokenLine": "来源：{source}",
     "viewReleases": "查看发行版",
     "updateAvailable": "有新版本 {version}",
+    "upToDate": "当前已是最新版本",
+    "checkUpdateFailed": "检查更新失败，请稍后重试",
     "unsavedChanges": "有未保存的更改",
     "manageToken": "管理 Token",
     "envOverride": "该项已由环境变量覆盖，无法在后台修改",
@@ -278,11 +310,36 @@
     "servingPublicShort": "公开",
     "backendName": "显示名称",
     "badgeDefault": "默认",
+    "badgeDefaultStorage": "默认存储",
     "badgeDisabled": "已停用",
     "badgeEnabled": "已启用",
+    "overviewTitle": "存储总览",
+    "overviewSubtitle": "所有存储后端使用情况",
+    "overviewTotal": "总容量",
+    "overviewUsed": "已用容量",
+    "overviewFree": "剩余容量",
+    "overviewUsageRate": "总体使用率",
+    "overviewQuota": "总配额",
+    "overviewInstances": "存储实例",
+    "overviewActive": "活跃后台",
+    "capacityDistribution": "容量分布",
+    "backendType": "类型",
+    "storageId": "存储标识",
+    "storageType": "存储类型",
+    "badgeLocal": "本地",
+    "defaultStorageTip": "默认存储提示：新上传的图片将默认保存到「{name}」。可点击其他后端的「设为默认」进行修改。",
+    "supportedTitle": "支持的存储后端",
+    "supportedSubtitle": "PicHost 支持多种存储后端，满足不同场景需求",
+    "supportedLocalDesc": "适合小型部署和个人使用",
+    "supportedR2Desc": "高可用、低成本的对象存储",
+    "supportedS3Title": "S3 兼容",
+    "supportedS3Desc": "兼容 Amazon S3 协议的存储服务",
+    "footerTip": "默认存储后端将自动接收所有新上传的图片",
     "statTotal": "总量",
     "statUsed": "已用",
     "statFree": "剩余",
+    "statFileCount": "文件数量",
+    "statQuota": "配额",
     "usageRate": "使用率",
     "indexImages": "PicHost 图片 {count} 张 · {size}",
     "setDefault": "设为默认",
@@ -313,7 +370,16 @@
     "uploadToday": "今日上传",
     "uploadMonth": "本月上传",
     "uploadTotal": "累计上传",
-    "storedCount": "当前库存",
+    "storedCount": "当前存储",
+    "totalFiles": "总文件数",
+    "totalOccupied": "共占用 {size}",
+    "storageUsage": "存储使用率",
+    "noQuota": "未配置容量上限",
+    "vsYesterday": "较昨日",
+    "vsLastMonth": "较上月",
+    "trendUp": "↑ {p}%",
+    "trendDown": "↓ {p}%",
+    "trendFlat": "持平",
     "deleteToday": "今日删除",
     "deleteMonth": "本月删除",
     "deleteTotal": "累计删除",
@@ -322,15 +388,39 @@
     "sourceDistribution": "上传来源分布",
     "sourceWeb": "网页",
     "sourceApi": "API",
+    "tagWeb": "网页",
+    "tagApi": "API",
     "noData": "暂无数据",
     "gallery": "图库记录",
     "imagesSection": "全部图片",
     "filterStorageAll": "全部存储",
     "storage": "存储",
     "searchPlaceholder": "搜索文件名",
-    "clear": "清除",
+    "searchPlaceholderWide": "搜索文件名、标签或链接",
+    "filterType": "图片类型",
+    "filterTypeAll": "全部类型",
+    "filterSource": "上传来源",
+    "filterSourceAll": "全部来源",
+    "sourceWeb": "网页上传",
+    "sourceApi": "API 上传",
+    "resetFilters": "重置",
+    "batchActions": "批量操作",
+    "selectedItems": "已选择 {n} 项",
+    "colFilename": "文件名",
+    "colPreview": "预览",
+    "colSize": "大小",
+    "colType": "类型",
+    "colSource": "来源",
+    "colUploadedAt": "上传时间",
+    "colActions": "操作",
+    "previewBadge": "图片",
+    "clear": "清空",
     "selected": "已选 {n}",
     "batchDelete": "批量删除",
+    "batchSelect": "批量选择",
+    "viewMode": "视图模式",
+    "viewGrid": "网格视图",
+    "viewList": "列表视图",
     "selectAll": "全选",
     "invertSelection": "反选",
     "clearSelection": "取消选择",
@@ -378,19 +468,23 @@
     "previewFailed": "预览失败",
     "openPreview": "查看大图",
     "previewTitle": "图片详情",
+    "previewSubtitle": "查看图片信息与链接",
     "previewOriginalName": "文件名",
     "previewUploadedAt": "上传时间",
     "previewSize": "大小",
-    "previewContentType": "类型",
-    "previewOwner": "上传者",
-    "previewStorage": "存储",
-    "previewKey": "存储路径",
+    "previewSizeDetail": "{size}（{bytes} 字节）",
+    "previewContentType": "文件类型",
+    "previewOwner": "上传用户",
+    "previewStorage": "存储位置",
+    "previewKey": "图片路径",
     "previewExtension": "扩展名",
     "previewDimensions": "尺寸",
     "previewDimensionsUnknown": "加载中…",
     "previewUploadSource": "上传方式",
     "uploadSourceUnknown": "未知",
-    "previewLinks": "链接",
+    "previewLinks": "链接与嵌入",
+    "previewCopyLink": "复制链接",
+    "previewDownload": "下载原图",
     "previewOpen": "新窗口打开",
     "previewClose": "关闭",
     "uploader": "上传者：{name}",
@@ -402,6 +496,11 @@
     "confirm": "确认删除"
   },
   "pagination": {
+    "totalCount": "共 {total} {unit}",
+    "pageStatus": "第 {page} / {totalPages} 页",
+    "perPage": "{size} 条/页",
+    "pageSize": "每页条数",
+    "pageNumber": "第 {page} 页",
     "pageOf": "第 {page} / {totalPages} 页 · 共 {total} {unit}",
     "totalOnly": "共 {total} {unit}",
     "first": "第一页",
@@ -409,6 +508,8 @@
     "next": "下一页",
     "last": "最后一页",
     "goTo": "跳转",
+    "goToPrefix": "前往",
+    "goToSuffix": "页",
     "pagePlaceholder": "页码"
   },
   "api": {
@@ -437,6 +538,74 @@
     "newTokenDesc": "请立即复制保存。关闭弹窗后仍可在上方输入框复制，但请尽快更新到你的脚本配置中。",
     "copyToken": "复制 Token",
     "saved": "我已保存",
+    "searchPlaceholder": "搜索接口…",
+    "showToken": "显示",
+    "hideToken": "隐藏",
+    "helpText": "需要帮助？查看完整 API 文档",
+    "helpTitle": "需要帮助？",
+    "helpSubtitle": "查看完整 API 文档",
+    "expand": "展开",
+    "collapse": "收起",
+    "viewDocs": "查看文档",
+    "requestParams": "请求参数",
+    "paramName": "参数名",
+    "paramType": "类型",
+    "paramLocation": "位置",
+    "paramRequired": "必填",
+    "paramDescription": "说明",
+    "required": "是",
+    "optional": "否",
+    "requestExample": "请求示例",
+    "responseExample": "响应示例",
+    "categories": {
+      "image": "图片接口",
+      "extension": "插件接口",
+      "system": "系统通用"
+    },
+    "params": {
+      "upload": {
+        "image": "上传图片，主字段",
+        "file": "兼容字段，单图上传",
+        "files": "兼容字段，多图上传",
+        "token": "Twikoo 协议兼容，表单 token"
+      },
+      "list": {
+        "limit": "每页条数，默认 20，最大 100",
+        "page": "页码，从 1 开始"
+      },
+      "search": {
+        "q": "搜索关键词，必填"
+      },
+      "delete": {
+        "key": "图片存储路径，如 images/2026/08/xxx.webp"
+      },
+      "batchDelete": {
+        "keys": "要删除的图片 key 数组"
+      },
+      "twikoo": {
+        "image": "上传图片",
+        "token": "API Token"
+      },
+      "backendId": "存储后端 ID，可选"
+    },
+    "debug": {
+      "title": "在线调试",
+      "headers": "Headers",
+      "query": "Query",
+      "body": "Body",
+      "send": "发送请求",
+      "response": "响应",
+      "selectFile": "选择文件",
+      "noFileSelected": "未选择任何文件",
+      "tokenPlaceholder": "输入 Auth-Token",
+      "invalidJson": "JSON 格式无效",
+      "sendFailed": "请求发送失败",
+      "networkError": "网络错误或无法连接",
+      "notesTitle": "响应说明",
+      "noteSuccess": "200 表示请求成功，返回 JSON 数据",
+      "noteError": "4xx / 5xx 表示请求失败，查看 error 字段",
+      "noteLimit": "上传限制：单次最多 10 张，单张最大 10 MB"
+    },
     "docs": {
       "upload": {
         "title": "上传图片",
@@ -461,6 +630,14 @@
       "twikoo": {
         "title": "twikoo 兼容上传",
         "desc": "兼容 Twikoo / EasyImage 2.0 协议，图片存入 images/ 目录；字段 image + token。"
+      },
+      "config": {
+        "title": "获取配置",
+        "desc": "获取系统公开配置，无需鉴权。"
+      },
+      "count": {
+        "title": "图片数量统计",
+        "desc": "获取当前可见范围内的图片总数。"
       }
     }
   },
diff --git a/server/api/images/index.get.ts b/server/api/images/index.get.ts
index 91de18d..b118fcc 100644
--- a/server/api/images/index.get.ts
+++ b/server/api/images/index.get.ts
@@ -9,7 +9,7 @@ import { createApiError } from '../../utils/api-error'
 import { getUploadSourcesForKeys, listUserIdUsernameMap } from '../../utils/db'
 import { mapStoredImageToItem } from '../../utils/image-response'
 import { listStorageBackendNameMap } from '../../utils/storage-backends'
-import { readBackendIdQuery } from '../../utils/image-query'
+import { readBackendIdQuery, readContentTypeQuery, readUploadSourceQuery } from '../../utils/image-query'
 import { listImages } from '../../utils/storage'
 
 export default defineEventHandler(async (event) => {
@@ -31,9 +31,24 @@ export default defineEventHandler(async (event) => {
   if (backendId === null) {
     createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
   }
+  const contentType = readContentTypeQuery(query)
+  if (contentType === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的图片类型', 400)
+  }
+  const uploadSource = readUploadSourceQuery(query)
+  if (uploadSource === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的上传来源', 400)
+  }
   const userFilter = await getImageUserFilter(event)
 
-  const listing = await listImages({ limit, page, userFilter, backendId })
+  const listing = await listImages({
+    limit,
+    page,
+    userFilter,
+    backendId,
+    contentType,
+    uploadSource
+  })
 
   const user = await getCurrentUser(event)
   const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
diff --git a/server/api/images/search.get.ts b/server/api/images/search.get.ts
index 6db617f..4a10340 100644
--- a/server/api/images/search.get.ts
+++ b/server/api/images/search.get.ts
@@ -9,7 +9,7 @@ import { createApiError } from '../../utils/api-error'
 import { getUploadSourcesForKeys, listUserIdUsernameMap } from '../../utils/db'
 import { mapStoredImageToItem } from '../../utils/image-response'
 import { listStorageBackendNameMap } from '../../utils/storage-backends'
-import { readBackendIdQuery } from '../../utils/image-query'
+import { readBackendIdQuery, readContentTypeQuery, readUploadSourceQuery } from '../../utils/image-query'
 import { searchImages } from '../../utils/storage'
 
 export default defineEventHandler(async (event) => {
@@ -40,9 +40,25 @@ export default defineEventHandler(async (event) => {
   if (backendId === null) {
     createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
   }
+  const contentType = readContentTypeQuery(query)
+  if (contentType === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的图片类型', 400)
+  }
+  const uploadSource = readUploadSourceQuery(query)
+  if (uploadSource === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的上传来源', 400)
+  }
   const userFilter = await getImageUserFilter(event)
 
-  const result = await searchImages({ query: q, limit, page, userFilter, backendId })
+  const result = await searchImages({
+    query: q,
+    limit,
+    page,
+    userFilter,
+    backendId,
+    contentType,
+    uploadSource
+  })
 
   const user = await getCurrentUser(event)
   const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
diff --git a/server/api/stats.get.ts b/server/api/stats.get.ts
index ba4f20e..03d8185 100644
--- a/server/api/stats.get.ts
+++ b/server/api/stats.get.ts
@@ -7,6 +7,34 @@ import {
   getFolderStorageStats,
   getUserScopedStorageStats
 } from '../utils/storage'
+import { buildBackendCapacity } from '../utils/storage-capacity'
+import { getActiveBackendRow } from '../utils/storage/resolver'
+
+interface StorageUsageStat {
+  usedBytes: number
+  totalBytes: number | null
+  percent: number | null
+}
+
+async function resolveStorageUsage(usedBytes: number): Promise<StorageUsageStat> {
+  const backend = getActiveBackendRow()
+  if (!backend) {
+    return { usedBytes, totalBytes: null, percent: null }
+  }
+
+  const capacity = await buildBackendCapacity(
+    backend.id,
+    backend.type,
+    usedBytes,
+    backend.quota_bytes
+  )
+
+  return {
+    usedBytes,
+    totalBytes: capacity.totalBytes,
+    percent: capacity.percent
+  }
+}
 
 export default defineEventHandler(async (event) => {
   const user = await requireUserAuth(event)
@@ -14,25 +42,30 @@ export default defineEventHandler(async (event) => {
 
   try {
     if (user.role === 'admin' && userFilter === 'admin') {
-      const [activity, storedCount, byFolder] = await Promise.all([
-        Promise.resolve(getActivityStats()),
+      const activity = getActivityStats()
+      const [storedCount, byFolder, storageUsage] = await Promise.all([
         countImages(),
-        getFolderStorageStats()
+        getFolderStorageStats(),
+        resolveStorageUsage(activity.uploadBytesTotal)
       ])
 
       return {
         ...activity,
         storedCount,
         byFolder,
-        userCount: countUsers()
+        userCount: countUsers(),
+        storageUsage
       }
     }
 
     const scoped = await getUserScopedStorageStats(user.id)
+    const storageUsage = await resolveStorageUsage(scoped.uploadBytesTotal)
 
     return {
       uploadToday: scoped.uploadToday,
+      uploadYesterday: scoped.uploadYesterday,
       uploadMonth: scoped.uploadMonth,
+      uploadLastMonth: scoped.uploadLastMonth,
       deleteToday: 0,
       deleteMonth: 0,
       uploadTotal: scoped.storedCount,
@@ -44,7 +77,8 @@ export default defineEventHandler(async (event) => {
         count: item.count
       })),
       storedCount: scoped.storedCount,
-      byFolder: scoped.byFolder
+      byFolder: scoped.byFolder,
+      storageUsage
     }
   } catch (error) {
     logException('stats failed', error)
diff --git a/server/api/version/latest.get.ts b/server/api/version/latest.get.ts
index 7289d8a..044151c 100644
--- a/server/api/version/latest.get.ts
+++ b/server/api/version/latest.get.ts
@@ -9,7 +9,9 @@ export default defineEventHandler(async (event) => {
 
   const config = useRuntimeConfig(event)
   const currentVersion = String(config.appVersion ?? '')
-  const latest = await fetchLatestGitHubRelease()
+  const query = getQuery(event)
+  const force = query.refresh === '1' || query.refresh === 'true'
+  const latest = await fetchLatestGitHubRelease(force)
 
   if (!latest) {
     return {
diff --git a/server/utils/app-version.ts b/server/utils/app-version.ts
index 15ef327..44fdc5b 100644
--- a/server/utils/app-version.ts
+++ b/server/utils/app-version.ts
@@ -32,9 +32,9 @@ export function isVersionNewer(candidate: string, current: string): boolean {
   return false
 }
 
-export async function fetchLatestGitHubRelease(): Promise<LatestReleaseInfo | null> {
+export async function fetchLatestGitHubRelease(force = false): Promise<LatestReleaseInfo | null> {
   const now = Date.now()
-  if (cachedRelease && now - cachedRelease.fetchedAt < CACHE_TTL_MS) {
+  if (!force && cachedRelease && now - cachedRelease.fetchedAt < CACHE_TTL_MS) {
     return cachedRelease.value
   }
 
diff --git a/server/utils/db.ts b/server/utils/db.ts
index 128a3fe..c8b2f6e 100644
--- a/server/utils/db.ts
+++ b/server/utils/db.ts
@@ -613,6 +613,15 @@ function countSince(action: LogAction, sinceIso: string): number {
   return row?.total ?? 0
 }
 
+function countBetween(action: LogAction, startIso: string, endIso: string): number {
+  const row = getDb().prepare(`
+    SELECT COUNT(*) AS total
+    FROM activity_logs
+    WHERE action = ? AND created_at >= ? AND created_at < ?
+  `).get(action, startIso, endIso) as unknown as { total: number } | undefined
+  return row?.total ?? 0
+}
+
 function sumUploadBytes(): number {
   const row = getDb().prepare(`
     SELECT COALESCE(SUM(size), 0) AS total
@@ -674,9 +683,23 @@ function startOfMonthIsoInShanghai(now = new Date()): string {
   return new Date(Date.UTC(y, m, 1) - 8 * 60 * 60 * 1000).toISOString()
 }
 
+function startOfYesterdayIsoInShanghai(now = new Date()): string {
+  const startOfDay = startOfDayIsoInShanghai(now)
+  return new Date(new Date(startOfDay).getTime() - 24 * 60 * 60 * 1000).toISOString()
+}
+
+function startOfLastMonthIsoInShanghai(now = new Date()): string {
+  const shifted = new Date(now.getTime() + 8 * 60 * 60 * 1000)
+  const y = shifted.getUTCFullYear()
+  const m = shifted.getUTCMonth()
+  return new Date(Date.UTC(y, m - 1, 1) - 8 * 60 * 60 * 1000).toISOString()
+}
+
 export function getActivityStats(): {
   uploadToday: number
+  uploadYesterday: number
   uploadMonth: number
+  uploadLastMonth: number
   deleteToday: number
   deleteMonth: number
   uploadTotal: number
@@ -687,6 +710,8 @@ export function getActivityStats(): {
 } {
   const startOfDay = startOfDayIsoInShanghai()
   const startOfMonth = startOfMonthIsoInShanghai()
+  const startOfYesterday = startOfYesterdayIsoInShanghai()
+  const startOfLastMonth = startOfLastMonthIsoInShanghai()
 
   const uploadTotalRow = getDb().prepare(`
     SELECT COUNT(*) AS total FROM activity_logs WHERE action = 'upload'
@@ -697,7 +722,9 @@ export function getActivityStats(): {
 
   return {
     uploadToday: countSince('upload', startOfDay),
+    uploadYesterday: countBetween('upload', startOfYesterday, startOfDay),
     uploadMonth: countSince('upload', startOfMonth),
+    uploadLastMonth: countBetween('upload', startOfLastMonth, startOfMonth),
     deleteToday: countSince('delete', startOfDay),
     deleteMonth: countSince('delete', startOfMonth),
     uploadTotal: uploadTotalRow.total,
diff --git a/server/utils/image-index.ts b/server/utils/image-index.ts
index 958d02a..39c8994 100644
--- a/server/utils/image-index.ts
+++ b/server/utils/image-index.ts
@@ -1,6 +1,6 @@
 import { promises as fs } from 'node:fs'
 import { dirname, join } from 'node:path'
-import { getDb } from './db'
+import { getDb, getUploadSourcesForKeys } from './db'
 import { getDataDir } from './data-dir'
 import { contentTypeFromKey } from './content-type'
 import { DEFAULT_FOLDER, toCanonicalImageKey, validateImageKey } from './image-key'
@@ -402,11 +402,31 @@ function paginateSlice<T>(
   return { items, total, page: safePage, pageSize, totalPages }
 }
 
+function filterImageRows(
+  rows: ImageIndexRow[],
+  options: {
+    contentType?: string
+    uploadSource?: 'web' | 'api'
+  }
+): ImageIndexRow[] {
+  let filtered = rows
+  if (options.contentType) {
+    filtered = filtered.filter(row => row.content_type === options.contentType)
+  }
+  if (options.uploadSource) {
+    const sourceMap = getUploadSourcesForKeys(filtered.map(row => row.key))
+    filtered = filtered.filter(row => sourceMap.get(row.key) === options.uploadSource)
+  }
+  return filtered
+}
+
 export async function listImages(options: {
   limit: number
   page?: number
   userFilter?: number | 'admin'
   backendId?: string
+  contentType?: string
+  uploadSource?: 'web' | 'api'
 }): Promise<PaginatedResult<StoredImage>> {
   ensureStorageSchema()
   const params: Array<string | number> = []
@@ -421,7 +441,11 @@ export async function listImages(options: {
     ORDER BY uploaded_at DESC, key DESC
   `).all(...params) as unknown as ImageIndexRow[]
 
-  const sliced = paginateSlice(rows, options.limit, options.page)
+  const filtered = filterImageRows(rows, {
+    contentType: options.contentType,
+    uploadSource: options.uploadSource
+  })
+  const sliced = paginateSlice(filtered, options.limit, options.page)
   return {
     ...sliced,
     items: sliced.items.map(rowToStoredImage)
@@ -434,6 +458,8 @@ export async function searchImages(options: {
   page?: number
   userFilter?: number | 'admin'
   backendId?: string
+  contentType?: string
+  uploadSource?: 'web' | 'api'
 }): Promise<PaginatedResult<StoredImage>> {
   ensureStorageSchema()
   const needle = options.query.trim().toLowerCase()
@@ -455,7 +481,11 @@ export async function searchImages(options: {
       || row.original_name.toLowerCase().includes(needle)
   })
 
-  const sliced = paginateSlice(matches, options.limit, options.page)
+  const filtered = filterImageRows(matches, {
+    contentType: options.contentType,
+    uploadSource: options.uploadSource
+  })
+  const sliced = paginateSlice(filtered, options.limit, options.page)
   return {
     ...sliced,
     items: sliced.items.map(rowToStoredImage)
@@ -495,16 +525,32 @@ function startOfMonthIsoInShanghai(now = new Date()): string {
   return new Date(Date.UTC(y, m, 1) - 8 * 60 * 60 * 1000).toISOString()
 }
 
+function startOfLastMonthIsoInShanghai(now = new Date()): string {
+  const shifted = new Date(now.getTime() + 8 * 60 * 60 * 1000)
+  const y = shifted.getUTCFullYear()
+  const m = shifted.getUTCMonth()
+  return new Date(Date.UTC(y, m - 1, 1) - 8 * 60 * 60 * 1000).toISOString()
+}
+
+function startOfYesterdayIsoInShanghai(now = new Date()): string {
+  const startOfDay = startOfDayIsoInShanghai(now)
+  return new Date(new Date(startOfDay).getTime() - 24 * 60 * 60 * 1000).toISOString()
+}
+
 export async function getUserScopedStorageStats(userId: number): Promise<{
   storedCount: number
   uploadBytesTotal: number
   uploadToday: number
+  uploadYesterday: number
   uploadMonth: number
+  uploadLastMonth: number
   byFolder: Array<{ folder: string, count: number, bytes: number }>
 }> {
   ensureStorageSchema()
   const startOfDay = startOfDayIsoInShanghai()
   const startOfMonth = startOfMonthIsoInShanghai()
+  const startOfYesterday = startOfYesterdayIsoInShanghai()
+  const startOfLastMonth = startOfLastMonthIsoInShanghai()
 
   const rows = getDb().prepare(`
     SELECT folder, size, uploaded_at
@@ -515,12 +561,16 @@ export async function getUserScopedStorageStats(userId: number): Promise<{
   const map = new Map<string, { count: number, bytes: number }>()
   let uploadBytesTotal = 0
   let uploadToday = 0
+  let uploadYesterday = 0
   let uploadMonth = 0
+  let uploadLastMonth = 0
 
   for (const row of rows) {
     uploadBytesTotal += row.size
     if (row.uploaded_at >= startOfDay) uploadToday += 1
+    if (row.uploaded_at >= startOfYesterday && row.uploaded_at < startOfDay) uploadYesterday += 1
     if (row.uploaded_at >= startOfMonth) uploadMonth += 1
+    if (row.uploaded_at >= startOfLastMonth && row.uploaded_at < startOfMonth) uploadLastMonth += 1
 
     const current = map.get(row.folder) ?? { count: 0, bytes: 0 }
     current.count += 1
@@ -536,7 +586,9 @@ export async function getUserScopedStorageStats(userId: number): Promise<{
     storedCount: rows.length,
     uploadBytesTotal,
     uploadToday,
+    uploadYesterday,
     uploadMonth,
+    uploadLastMonth,
     byFolder
   }
 }
diff --git a/server/utils/image-query.ts b/server/utils/image-query.ts
index aa5de18..82095c2 100644
--- a/server/utils/image-query.ts
+++ b/server/utils/image-query.ts
@@ -1,4 +1,5 @@
 import { getStorageBackendRow } from './storage-backends'
+import { ALLOWED_MIME_TYPES } from './constants'
 
 export function readBackendIdQuery(
   query: Record<string, unknown>
@@ -7,3 +8,21 @@ export function readBackendIdQuery(
   if (!raw || raw === 'all') return undefined
   return getStorageBackendRow(raw)?.id ?? null
 }
+
+export function readContentTypeQuery(
+  query: Record<string, unknown>
+): string | undefined | null {
+  const raw = typeof query.contentType === 'string' ? query.contentType.trim() : ''
+  if (!raw || raw === 'all') return undefined
+  if (!(ALLOWED_MIME_TYPES as readonly string[]).includes(raw)) return null
+  return raw
+}
+
+export function readUploadSourceQuery(
+  query: Record<string, unknown>
+): 'web' | 'api' | undefined | null {
+  const raw = typeof query.uploadSource === 'string' ? query.uploadSource.trim() : ''
+  if (!raw || raw === 'all') return undefined
+  if (raw === 'web' || raw === 'api') return raw
+  return null
+}
diff --git a/server/utils/storage.ts b/server/utils/storage.ts
index 1c615ea..2f36145 100644
--- a/server/utils/storage.ts
+++ b/server/utils/storage.ts
@@ -192,7 +192,9 @@ export async function getUserScopedStorageStats(userId: number): Promise<{
   storedCount: number
   uploadBytesTotal: number
   uploadToday: number
+  uploadYesterday: number
   uploadMonth: number
+  uploadLastMonth: number
   byFolder: FolderStorageStat[]
 }> {
   return getUserScopedStorageStatsFromIndex(userId)
@@ -203,6 +205,8 @@ export async function listImages(options: {
   page?: number
   userFilter?: number | 'admin'
   backendId?: string
+  contentType?: string
+  uploadSource?: 'web' | 'api'
 }): Promise<PaginatedResult<StoredImage>> {
   return listImagesFromIndex(options)
 }
@@ -213,6 +217,8 @@ export async function searchImages(options: {
   page?: number
   userFilter?: number | 'admin'
   backendId?: string
+  contentType?: string
+  uploadSource?: 'web' | 'api'
 }): Promise<PaginatedResult<StoredImage>> {
   return searchImagesFromIndex(options)
 }