refactor: 重构设置、API、图库与存储页面前端结构。

将操作日志并入设置侧栏，补齐检查更新提示与版本接口刷新；拆分各模块组件并修复图库搜索分页变量。
2026-09-01 17:15:02 +08:00
1 parent 270af4e707
commit ac65c1eb9d
@@ -0,0 +1,5 @@
+<template>
+  <div class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,566 @@
+<script setup lang="ts">
+import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
+
+const { isAuthenticated, handleAuthError, isAdmin } = useAuth()
+const toast = useToast()
+const { t, locale } = useI18n()
+const { formatFileSize } = useFileSize()
+
+const loading = ref(true)
+const page = ref(1)
+const actionFilter = ref<'all' | LogAction>('all')
+const sourceFilter = ref<'all' | LogSource>('all')
+const userFilter = ref<'all' | number>('all')
+const searchQuery = ref('')
+const activeSearch = ref('')
+const listData = ref<ActivityLogListResponse | null>(null)
+const imageLinkBase = ref('')
+const hideFolderInUrl = ref(false)
+
+const pageSize = 10
+
+const summaryLabel = computed(() => {
+  const summary = listData.value?.summary
+  if (!summary) return ''
+  return t('logs.summaryAll', {
+    total: summary.total,
+    upload: summary.upload,
+    delete: summary.delete
+  })
+})
+
+const actionItems = computed(() => [
+  { label: t('logs.filterActionAll'), value: 'all' as const },
+  { label: t('logs.actionUpload'), value: 'upload' as const },
+  { label: t('logs.actionDelete'), value: 'delete' as const }
+])
+
+const sourceItems = computed(() => [
+  { label: t('logs.filterSourceAll'), value: 'all' as const },
+  { label: t('logs.sourceWeb'), value: 'web' as const },
+  { label: t('logs.sourceApi'), value: 'api' as const }
+])
+
+const userItems = computed(() => {
+  const items: Array<{ label: string, value: 'all' | number }> = [
+    { label: t('logs.filterUserAll'), value: 'all' }
+  ]
+  for (const user of listData.value?.users ?? []) {
+    items.push({ label: user.username, value: user.id })
+  }
+  return items
+})
+
+function formatTime(value: string) {
+  try {
+    return new Date(value).toLocaleString(locale.value, { hour12: false })
+  } catch {
+    return value
+  }
+}
+
+function formatTimeShort(value: string) {
+  try {
+    return new Date(value).toLocaleString(locale.value, {
+      month: 'numeric',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  } catch {
+    return value
+  }
+}
+
+function actionColor(action: LogAction) {
+  return action === 'upload' ? 'success' : 'error'
+}
+
+function actionIcon(action: LogAction) {
+  return action === 'upload' ? 'i-lucide-upload' : 'i-lucide-trash-2'
+}
+
+function sourceLabel(source: LogSource) {
+  switch (source) {
+    case 'web':
+      return t('logs.sourceWeb')
+    case 'api':
+      return t('logs.sourceApi')
+  }
+}
+
+function storageIcon(storage: ActivityLogStorage | null) {
+  return storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+}
+
+function publicPathFromKey(key: string) {
+  if (hideFolderInUrl.value) {
+    const slash = key.lastIndexOf('/')
+    return slash >= 0 ? key.slice(slash + 1) : key
+  }
+  const prefix = 'images/'
+  return key.startsWith(prefix) ? key.slice(prefix.length) : key
+}
+
+function imageUrl(key: string) {
+  const base = imageLinkBase.value.replace(/\/$/, '')
+  const path = publicPathFromKey(key)
+  if (!base) return `/${path}`
+  return `${base}/${path}`
+}
+
+async function loadImageLinkBase() {
+  try {
+    if (isAdmin.value) {
+      const data = await $fetch<{ effectiveImageBaseUrl: string, hideFolderInUrl: boolean }>('/api/settings', {
+        credentials: 'include'
+      })
+      imageLinkBase.value = data.effectiveImageBaseUrl
+      hideFolderInUrl.value = data.hideFolderInUrl
+      return
+    }
+    const data = await $fetch<{ env: { imageBaseUrl: string, hideFolderInUrl: boolean } }>('/api/user/api-token', {
+      credentials: 'include'
+    })
+    imageLinkBase.value = data.env.imageBaseUrl
+    hideFolderInUrl.value = data.env.hideFolderInUrl
+  } catch {
+    if (import.meta.client) {
+      imageLinkBase.value = window.location.origin
+    }
+  }
+}
+
+async function loadLogs() {
+  loading.value = true
+  try {
+    const query: Record<string, string | number> = {
+      page: page.value,
+      limit: pageSize
+    }
+    if (actionFilter.value !== 'all') {
+      query.action = actionFilter.value
+    }
+    if (sourceFilter.value !== 'all') {
+      query.source = sourceFilter.value
+    }
+    if (isAdmin.value && userFilter.value !== 'all') {
+      query.userId = userFilter.value
+    }
+    if (activeSearch.value) {
+      query.q = activeSearch.value
+    }
+
+    listData.value = await $fetch<ActivityLogListResponse>('/api/logs', {
+      credentials: 'include',
+      query
+    })
+    page.value = listData.value.page
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('logs.loadFailed'), color: 'error' })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function applyFilters() {
+  page.value = 1
+  void loadLogs()
+}
+
+function submitSearch() {
+  activeSearch.value = searchQuery.value.trim()
+  applyFilters()
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+  activeSearch.value = ''
+  applyFilters()
+}
+
+function handlePageChange(target: number) {
+  page.value = target
+  void loadLogs()
+}
+
+onMounted(async () => {
+  await loadImageLinkBase()
+  await loadLogs()
+})
+</script>
+
+<template>
+  <div class="min-w-0">
+    <div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
+      <div>
+        <h2 class="text-sm font-semibold">
+          {{ t('logs.pageTitle') }}
+        </h2>
+        <p class="mt-0.5 text-xs text-muted">
+          {{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
+        </p>
+      </div>
+      <UButton
+        icon="i-lucide-refresh-cw"
+        variant="outline"
+        color="neutral"
+        size="sm"
+        :label="t('common.refresh')"
+        :loading="loading"
+        @click="loadLogs"
+      />
+    </div>
+
+    <form
+      class="border-b border-default px-5 py-3 sm:px-6"
+      @submit.prevent="submitSearch"
+    >
+      <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <p
+          v-if="summaryLabel"
+          class="text-xs text-muted"
+        >
+          {{ summaryLabel }}
+        </p>
+        <p
+          v-else
+          class="text-xs text-muted"
+        >
+          {{ t('stats.counting') }}
+        </p>
+
+        <div class="flex min-w-0 flex-wrap items-center gap-2 sm:justify-end">
+          <USelect
+            v-if="isAdmin"
+            v-model="userFilter"
+            :items="userItems"
+            value-key="value"
+            class="min-w-0 w-full sm:w-36"
+            size="sm"
+            @update:model-value="applyFilters"
+          />
+          <USelect
+            v-model="actionFilter"
+            :items="actionItems"
+            value-key="value"
+            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-32"
+            size="sm"
+            @update:model-value="applyFilters"
+          />
+          <USelect
+            v-model="sourceFilter"
+            :items="sourceItems"
+            value-key="value"
+            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-36"
+            size="sm"
+            @update:model-value="applyFilters"
+          />
+          <div class="flex min-w-0 w-full items-center gap-2 sm:w-auto">
+            <UInput
+              v-model="searchQuery"
+              icon="i-lucide-search"
+              :placeholder="t('logs.searchPlaceholder')"
+              class="min-w-0 flex-1 sm:w-40 sm:flex-none"
+              size="sm"
+              :disabled="loading"
+            />
+            <UButton
+              type="submit"
+              icon="i-lucide-search"
+              size="sm"
+              class="shrink-0"
+              :aria-label="t('common.search')"
+              :loading="loading"
+            >
+              <span class="hidden sm:inline">{{ t('common.search') }}</span>
+            </UButton>
+            <UButton
+              v-if="activeSearch"
+              type="button"
+              icon="i-lucide-x"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              class="shrink-0"
+              :aria-label="t('stats.clear')"
+              @click="clearSearch"
+            >
+              <span class="hidden sm:inline">{{ t('stats.clear') }}</span>
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </form>
+
+    <div
+      v-if="loading"
+      class="p-4 sm:p-6"
+    >
+      <div class="space-y-3 sm:hidden">
+        <USkeleton
+          v-for="n in 6"
+          :key="`mobile-${n}`"
+          class="h-24 rounded-lg"
+        />
+      </div>
+      <div class="hidden space-y-2 sm:block">
+        <USkeleton
+          v-for="n in 8"
+          :key="`desktop-${n}`"
+          class="h-12 rounded-lg"
+        />
+      </div>
+    </div>
+
+    <template v-else-if="listData && listData.items.length">
+      <div class="min-w-0 sm:hidden">
+        <div class="divide-y divide-default">
+          <article
+            v-for="row in listData.items"
+            :key="row.id"
+            class="min-w-0 px-4 py-3.5"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <time class="text-xs text-muted">
+                {{ formatTimeShort(row.createdAt) }}
+              </time>
+              <span class="shrink-0 text-xs tabular-nums text-muted">
+                {{ formatFileSize(row.size) }}
+              </span>
+            </div>
+
+            <div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
+              <UBadge
+                :color="actionColor(row.action)"
+                variant="subtle"
+                size="xs"
+              >
+                <UIcon
+                  :name="actionIcon(row.action)"
+                  class="mr-1 size-3"
+                />
+                {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
+              </UBadge>
+              <UBadge
+                color="neutral"
+                variant="subtle"
+                size="xs"
+              >
+                {{ sourceLabel(row.source) }}
+              </UBadge>
+              <span
+                v-if="isAdmin"
+                class="text-xs text-muted"
+              >
+                {{ row.username ?? '—' }}
+              </span>
+              <UBadge
+                v-if="row.storage"
+                color="neutral"
+                variant="subtle"
+                size="xs"
+                class="max-w-full truncate"
+              >
+                <UIcon
+                  :name="storageIcon(row.storage)"
+                  class="mr-1 size-3"
+                />
+                {{ row.storage.name }}
+              </UBadge>
+            </div>
+
+            <p
+              class="mt-2 truncate text-sm"
+              :title="row.originalName"
+            >
+              {{ row.originalName }}
+            </p>
+
+            <div class="mt-2 flex min-w-0 items-center gap-1">
+              <a
+                v-if="row.action === 'upload'"
+                :href="imageUrl(row.key)"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="min-w-0 flex-1 truncate font-mono text-xs text-primary hover:underline"
+                :title="row.key"
+              >
+                {{ row.key }}
+              </a>
+              <span
+                v-else
+                class="min-w-0 flex-1 truncate font-mono text-xs text-dimmed"
+                :title="row.key"
+              >
+                {{ row.key }}
+              </span>
+              <CopyButton
+                icon="i-lucide-copy"
+                icon-only
+                class="shrink-0"
+                :label="t('common.copy')"
+                :value="row.key"
+                :success-title="t('copy.copiedUrl')"
+              />
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <div class="hidden overflow-x-auto sm:block">
+        <table class="min-w-full text-left text-sm">
+          <thead class="border-b border-default bg-muted/30 text-xs text-muted">
+            <tr>
+              <th class="px-4 py-3 font-medium sm:px-6">
+                {{ t('logs.colTime') }}
+              </th>
+              <th
+                v-if="isAdmin"
+                class="px-4 py-3 font-medium"
+              >
+                {{ t('logs.colUser') }}
+              </th>
+              <th class="px-4 py-3 font-medium">
+                {{ t('logs.colAction') }}
+              </th>
+              <th class="px-4 py-3 font-medium">
+                {{ t('logs.colSource') }}
+              </th>
+              <th class="px-4 py-3 font-medium">
+                {{ t('logs.colStorage') }}
+              </th>
+              <th class="hidden px-4 py-3 font-medium md:table-cell">
+                {{ t('logs.colFile') }}
+              </th>
+              <th class="px-4 py-3 font-medium">
+                {{ t('logs.colSize') }}
+              </th>
+              <th class="hidden px-4 py-3 font-medium xl:table-cell">
+                {{ t('logs.colKey') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-default">
+            <tr
+              v-for="row in listData.items"
+              :key="row.id"
+              class="hover:bg-muted/20"
+            >
+              <td class="whitespace-nowrap px-4 py-3 text-xs text-muted sm:px-6">
+                {{ formatTime(row.createdAt) }}
+              </td>
+              <td
+                v-if="isAdmin"
+                class="px-4 py-3 text-xs"
+              >
+                {{ row.username ?? '—' }}
+              </td>
+              <td class="px-4 py-3">
+                <UBadge
+                  :color="actionColor(row.action)"
+                  variant="subtle"
+                  size="xs"
+                >
+                  <UIcon
+                    :name="actionIcon(row.action)"
+                    class="mr-1 size-3"
+                  />
+                  {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
+                </UBadge>
+              </td>
+              <td class="px-4 py-3">
+                <UBadge
+                  color="neutral"
+                  variant="subtle"
+                  size="xs"
+                >
+                  {{ sourceLabel(row.source) }}
+                </UBadge>
+              </td>
+              <td class="px-4 py-3 text-xs">
+                <span
+                  v-if="row.storage"
+                  class="inline-flex max-w-[8rem] items-center gap-1 truncate"
+                  :title="row.storage.name"
+                >
+                  <UIcon
+                    :name="storageIcon(row.storage)"
+                    class="size-3.5 shrink-0 opacity-70"
+                  />
+                  <span class="truncate">{{ row.storage.name }}</span>
+                </span>
+                <span
+                  v-else
+                  class="text-muted"
+                >—</span>
+              </td>
+              <td
+                class="hidden max-w-[12rem] truncate px-4 py-3 md:table-cell"
+                :title="row.originalName"
+              >
+                {{ row.originalName }}
+              </td>
+              <td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
+                {{ formatFileSize(row.size) }}
+              </td>
+              <td class="hidden px-4 py-3 xl:table-cell">
+                <div class="flex max-w-[16rem] items-center gap-1">
+                  <a
+                    v-if="row.action === 'upload'"
+                    :href="imageUrl(row.key)"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="truncate font-mono text-xs text-primary hover:underline"
+                    :title="row.key"
+                  >
+                    {{ row.key }}
+                  </a>
+                  <span
+                    v-else
+                    class="truncate font-mono text-xs text-dimmed"
+                    :title="row.key"
+                  >
+                    {{ row.key }}
+                  </span>
+                  <CopyButton
+                    icon="i-lucide-copy"
+                    icon-only
+                    :label="t('common.copy')"
+                    :value="row.key"
+                    :success-title="t('copy.copiedUrl')"
+                  />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="px-4 py-16 text-center text-sm text-muted sm:px-6"
+    >
+      {{ t('logs.empty') }}
+    </div>
+
+    <div
+      v-if="listData && listData.total > 0"
+      class="border-t border-default px-4 py-4 sm:px-6"
+    >
+      <PaginationBar
+        :page="listData.page"
+        :total-pages="listData.totalPages"
+        :total="listData.total"
+        :unit="t('logs.entriesUnit')"
+        :loading="loading"
+        @update:page="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<template>
+  <div class="overflow-hidden rounded-xl border border-default bg-default p-5 sm:p-6">
+    <div class="space-y-8">
+      <slot />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  hint?: string
+}>()
+</script>
+
+<template>
+  <section class="space-y-4">
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0">
+        <div class="flex items-center gap-2">
+          <span
+            class="h-4 w-1 shrink-0 rounded-full bg-primary"
+            aria-hidden="true"
+          />
+          <h2 class="text-sm font-semibold text-highlighted">
+            {{ title }}
+          </h2>
+        </div>
+        <p
+          v-if="hint"
+          class="mt-1.5 pl-3 text-xs leading-relaxed text-muted"
+        >
+          {{ hint }}
+        </p>
+      </div>
+      <div
+        v-if="$slots.action"
+        class="shrink-0"
+      >
+        <slot name="action" />
+      </div>
+    </div>
+    <slot />
+  </section>
+</template>
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  hasChanges: boolean
+  saving: boolean
+}>()
+
+const emit = defineEmits<{
+  save: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="border-t border-default bg-default px-4 py-4 sm:px-6">
+    <div class="flex items-center justify-end gap-3">
+      <p
+        v-if="hasChanges"
+        class="mr-auto text-xs text-warning"
+      >
+        {{ t('settings.unsavedChanges') }}
+      </p>
+      <UButton
+        :label="t('settings.saveSettings')"
+        icon="i-lucide-save"
+        color="primary"
+        :loading="saving"
+        :disabled="!hasChanges"
+        @click="emit('save')"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { SettingsTab } from '~/types/settings'
+
+defineProps<{
+  modelValue: SettingsTab
+  items: Array<{ id: SettingsTab, label: string, icon: string }>
+  title: string
+  subtitle: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [SettingsTab]
+}>()
+</script>
+
+<template>
+  <aside class="flex w-full shrink-0 flex-col border-b border-default bg-neutral-50 dark:bg-neutral-900/30 lg:w-56 lg:border-b-0 lg:border-r xl:w-60">
+    <div class="border-b border-default px-4 py-5 sm:px-5">
+      <h1 class="text-lg font-semibold tracking-tight text-highlighted">
+        {{ title }}
+      </h1>
+      <p class="mt-1 text-xs leading-relaxed text-muted">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <nav class="flex-1 space-y-0.5 p-3">
+      <button
+        v-for="item in items"
+        :key="item.id"
+        type="button"
+        class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors"
+        :class="modelValue === item.id
+          ? 'bg-primary/10 font-medium text-primary'
+          : 'text-muted hover:bg-muted/50 hover:text-highlighted'"
+        @click="emit('update:modelValue', item.id)"
+      >
+        <UIcon
+          :name="item.icon"
+          class="size-4 shrink-0"
+          :class="modelValue === item.id ? 'text-primary' : 'opacity-70'"
+        />
+        <span>{{ item.label }}</span>
+      </button>
+    </nav>
+  </aside>
+</template>
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  appVersion: string
+  updateAvailable: boolean
+  latestVersion: string | null
+  releaseUrl: string | null
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="pl-3">
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="text-sm font-medium text-highlighted">
+        {{ t('settings.systemVersion') }}
+      </span>
+      <UBadge
+        color="neutral"
+        variant="subtle"
+        size="sm"
+      >
+        v{{ appVersion }}
+      </UBadge>
+      <a
+        v-if="updateAvailable && latestVersion"
+        :href="releaseUrl || 'https://github.com/O96u/PicHost/releases'"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-xs text-warning hover:underline"
+      >
+        {{ t('settings.updateAvailable', { version: `v${latestVersion}` }) }}
+      </a>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  hint?: string
+  disabled?: boolean
+}>()
+
+const model = defineModel<boolean>({ required: true })
+</script>
+
+<template>
+  <div class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5">
+    <div class="min-w-0 flex-1 pr-2">
+      <p class="text-sm font-medium text-highlighted">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </p>
+      <p
+        v-if="hint || $slots.hint"
+        class="mt-1 text-xs leading-relaxed text-muted"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </p>
+    </div>
+    <USwitch
+      v-model="model"
+      :disabled="disabled"
+      class="mt-0.5 shrink-0"
+    />
+  </div>
+</template>
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+const {
+  compressEnabled,
+  autoCopyMarkdown,
+  copyFormat,
+  clientWebpQuality,
+  loadPreferences
+} = useUploadPreferences()
+
+const { t } = useI18n()
+
+const {
+  userSettings,
+  enabled: userAutoDeleteEnabled,
+  daysDraft: userAutoDeleteDaysDraft,
+  load: loadUserSettings
+} = useUserAutoDeleteSettings()
+
+const copyFormatItems = computed(() => [
+  { label: t('copy.url'), value: 'url' as const },
+  { label: t('copy.markdown'), value: 'markdown' as const },
+  { label: t('copy.html'), value: 'html' as const }
+])
+
+const clientQualityLevel = computed(() => {
+  if (clientWebpQuality.value >= 85) return t('preferences.qualityHigh')
+  if (clientWebpQuality.value >= 60) return t('preferences.qualityMedium')
+  return t('preferences.qualityLow')
+})
+
+function setCopyFormat(value: 'url' | 'markdown' | 'html') {
+  copyFormat.value = value
+}
+
+function onClientQualityInput(event: Event) {
+  const value = Number((event.target as HTMLInputElement).value)
+  clientWebpQuality.value = Number.isFinite(value) ? value : 80
+}
+
+onMounted(() => {
+  loadPreferences()
+  void loadUserSettings()
+})
+</script>
+
+<template>
+  <SettingsSection :title="t('preferences.processing')">
+      <SettingsGroup>
+        <SettingsToggleRow
+          v-model="compressEnabled"
+          :title="t('preferences.clientCompress')"
+          :hint="t('preferences.clientCompressHint')"
+        />
+        <div
+          v-if="userSettings"
+          class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
+        >
+          <div class="min-w-0 flex-1 pr-2">
+            <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-medium text-highlighted">
+              <span>{{ t('preferences.autoDeletePrefix') }}</span>
+              <UInput
+                v-model.number="userAutoDeleteDaysDraft"
+                type="number"
+                min="1"
+                max="3650"
+                size="xs"
+                class="w-14 tabular-nums"
+                :class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
+              />
+              <span>{{ t('preferences.autoDeleteSuffix') }}</span>
+            </p>
+            <p class="mt-1 text-xs leading-relaxed text-muted">
+              {{ t('preferences.autoDeleteHint') }}
+            </p>
+          </div>
+          <USwitch
+            v-model="userAutoDeleteEnabled"
+            class="mt-0.5 shrink-0"
+          />
+        </div>
+        <div
+          v-else
+          class="flex justify-center py-4"
+        >
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="size-5 animate-spin text-muted"
+          />
+        </div>
+        <div class="px-4 py-4 sm:px-5">
+          <div class="flex items-start justify-between gap-4">
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-highlighted">
+                {{ t('preferences.webpQuality') }}
+              </p>
+              <p class="mt-1 text-xs leading-relaxed text-muted">
+                {{ t('preferences.webpQualityHint') }}
+              </p>
+            </div>
+            <div class="shrink-0 text-right text-xs text-muted">
+              <p>{{ t('preferences.current', { n: clientWebpQuality }) }}</p>
+              <p class="mt-0.5">
+                {{ clientQualityLevel }}
+              </p>
+            </div>
+          </div>
+          <input
+            type="range"
+            min="1"
+            max="100"
+            :value="clientWebpQuality"
+            class="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
+            @input="onClientQualityInput"
+          >
+        </div>
+      </SettingsGroup>
+    </SettingsSection>
+
+    <SettingsSection :title="t('settings.uploadConvenience')">
+      <SettingsGroup>
+        <SettingsToggleRow
+          v-model="autoCopyMarkdown"
+          :title="t('preferences.autoCopy')"
+          :hint="t('preferences.autoCopyHint')"
+        />
+        <div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+          <p class="text-sm font-medium text-highlighted">
+            {{ t('settings.defaultCopyFormat') }}
+          </p>
+          <div
+            class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
+            :class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
+          >
+            <UButton
+              v-for="item in copyFormatItems"
+              :key="item.value"
+              size="xs"
+              class="flex-1 justify-center sm:min-w-[4.5rem]"
+              :variant="copyFormat === item.value ? 'solid' : 'ghost'"
+              :color="copyFormat === item.value ? 'primary' : 'neutral'"
+              :label="item.label"
+              @click="setCopyFormat(item.value)"
+            />
+          </div>
+        </div>
+      </SettingsGroup>
+    </SettingsSection>
+</template>