release: v1.2.6 — 新 UI 体验优化与存储标识规则

app/components/ImagePreviewModal.vue

@@ -218,17 +218,17 @@ function onImageLoad(event: Event) {
       #body
     >
       <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start">
-          <div class="preview-checkerboard flex items-center justify-center overflow-hidden rounded-xl border border-default p-4">
-            <img
-              :src="image.url"
-              :alt="image.originalName"
-              class="max-h-[min(60vh,24rem)] w-full object-contain"
-              @load="onImageLoad"
-            >
-          </div>
+        <div class="preview-checkerboard flex items-center justify-center overflow-hidden rounded-xl border border-default p-4">
+          <img
+            :src="image.url"
+            :alt="image.originalName"
+            class="max-h-[min(60vh,24rem)] w-full object-contain"
+            @load="onImageLoad"
+          >
+        </div>
 
-          <div class="flex min-w-0 flex-col gap-5">
-            <dl class="divide-y divide-default text-sm">
+        <div class="flex min-w-0 flex-col gap-5">
+          <dl class="divide-y divide-default text-sm">
             <div class="flex gap-4 py-2.5 first:pt-0">
               <dt class="w-20 shrink-0 text-muted">
                 {{ t('image.previewOriginalName') }}
@@ -330,40 +330,40 @@ function onImageLoad(event: Event) {
                 />
               </dd>
             </div>
-            </dl>
+          </dl>
 
-            <div class="border-t border-default pt-4">
-              <p class="mb-2.5 text-sm font-medium">
-                {{ t('image.previewLinks') }}
-              </p>
-              <div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
-                <UButton
-                  v-for="item in embedFormatItems"
-                  :key="item.value"
-                  size="xs"
-                  class="flex-1 justify-center"
-                  :variant="embedFormat === item.value ? 'solid' : 'ghost'"
-                  :color="embedFormat === item.value ? 'primary' : 'neutral'"
-                  :label="item.label"
-                  @click="selectEmbedFormat(item.value)"
-                />
-              </div>
-              <div class="mt-2 flex items-center gap-2">
-                <UInput
-                  :model-value="previewValue"
-                  readonly
-                  size="sm"
-                  class="min-w-0 flex-1 font-mono text-xs"
-                />
-                <CopyButton
-                  :label="t('common.copy')"
-                  :value="previewValue"
-                  :success-title="copySuccessTitle"
-                />
-              </div>
+          <div class="border-t border-default pt-4">
+            <p class="mb-2.5 text-sm font-medium">
+              {{ t('image.previewLinks') }}
+            </p>
+            <div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
+              <UButton
+                v-for="item in embedFormatItems"
+                :key="item.value"
+                size="xs"
+                class="flex-1 justify-center"
+                :variant="embedFormat === item.value ? 'solid' : 'ghost'"
+                :color="embedFormat === item.value ? 'primary' : 'neutral'"
+                :label="item.label"
+                @click="selectEmbedFormat(item.value)"
+              />
+            </div>
+            <div class="mt-2 flex items-center gap-2">
+              <UInput
+                :model-value="previewValue"
+                readonly
+                size="sm"
+                class="min-w-0 flex-1 font-mono text-xs"
+              />
+              <CopyButton
+                :label="t('common.copy')"
+                :value="previewValue"
+                :success-title="copySuccessTitle"
+              />
             </div>
           </div>
         </div>
+      </div>
     </template>
 
     <template

app/components/PaginationBar.vue

@@ -125,124 +125,124 @@ const navButtonClass = 'inline-flex items-center justify-center rounded-md borde
         </p>
 
         <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
-        <USelect
-          v-if="pageSize !== undefined"
-          :model-value="pageSize"
-          :items="pageSizeItems"
-          value-key="value"
-          size="sm"
-          class="hidden w-[7.5rem] shrink-0 sm:block"
-          :aria-label="t('pagination.pageSize')"
-          :disabled="loading"
-          @update:model-value="onPageSizeChange"
-        />
-
-        <div class="flex items-center justify-center gap-1 sm:justify-end">
-          <button
-            type="button"
-            :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
-            :aria-label="t('pagination.first')"
-            :disabled="page <= 1 || loading"
-            @click="goTo(1)"
-          >
-            <UIcon
-              name="i-lucide-chevrons-left"
-              class="size-4"
-            />
-          </button>
-          <button
-            type="button"
-            :class="[navButtonClass, 'size-9 sm:size-8']"
-            :aria-label="t('pagination.prev')"
-            :disabled="page <= 1 || loading"
-            @click="goTo(page - 1)"
-          >
-            <UIcon
-              name="i-lucide-chevron-left"
-              class="size-4"
-            />
-          </button>
-
-          <p
-            v-if="!showMobilePageNumbers"
-            class="min-w-[5.5rem] px-1 text-center text-sm text-muted sm:hidden"
-          >
-            {{ t('pagination.pageStatus', { page, totalPages }) }}
-          </p>
-
-          <template
-            v-for="(target, index) in visiblePages"
-            :key="`${target}-${index}`"
-          >
-            <span
-              v-if="target === 'ellipsis'"
-              class="inline-flex size-9 items-center justify-center text-sm text-muted sm:size-8"
-              :class="showMobilePageNumbers ? '' : 'hidden sm:inline-flex'"
-              aria-hidden="true"
-            >
-              …
-            </span>
-            <button
-              v-else
-              type="button"
-              class="inline-flex items-center justify-center rounded-md border text-sm transition-colors disabled:pointer-events-none disabled:opacity-40"
-              :class="[
-                pageButtonClass(target),
-                showMobilePageNumbers ? 'size-9 sm:size-8' : 'hidden size-8 sm:inline-flex'
-              ]"
-              :aria-label="t('pagination.pageNumber', { page: target })"
-              :aria-current="target === page ? 'page' : undefined"
-              :disabled="loading"
-              @click="goTo(target)"
-            >
-              {{ target }}
-            </button>
-          </template>
-
-          <button
-            type="button"
-            :class="[navButtonClass, 'size-9 sm:size-8']"
-            :aria-label="t('pagination.next')"
-            :disabled="page >= totalPages || loading"
-            @click="goTo(page + 1)"
-          >
-            <UIcon
-              name="i-lucide-chevron-right"
-              class="size-4"
-            />
-          </button>
-          <button
-            type="button"
-            :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
-            :aria-label="t('pagination.last')"
-            :disabled="page >= totalPages || loading"
-            @click="goTo(totalPages)"
-          >
-            <UIcon
-              name="i-lucide-chevrons-right"
-              class="size-4"
-            />
-          </button>
-        </div>
-
-        <form
-          class="hidden items-center gap-1.5 text-sm text-muted sm:flex"
-          @submit.prevent="jumpToPage"
-        >
-          <span>{{ t('pagination.goToPrefix') }}</span>
-          <UInput
-            v-model="jumpPageInput"
-            type="number"
-            min="1"
-            :max="totalPages"
+          <USelect
+            v-if="pageSize !== undefined"
+            :model-value="pageSize"
+            :items="pageSizeItems"
+            value-key="value"
             size="sm"
-            class="w-14"
-            :aria-label="t('pagination.pagePlaceholder')"
+            class="hidden w-[7.5rem] shrink-0 sm:block"
+            :aria-label="t('pagination.pageSize')"
             :disabled="loading"
-            @blur="jumpToPage"
+            @update:model-value="onPageSizeChange"
           />
-          <span v-if="t('pagination.goToSuffix')">{{ t('pagination.goToSuffix') }}</span>
-        </form>
+
+          <div class="flex items-center justify-center gap-1 sm:justify-end">
+            <button
+              type="button"
+              :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
+              :aria-label="t('pagination.first')"
+              :disabled="page <= 1 || loading"
+              @click="goTo(1)"
+            >
+              <UIcon
+                name="i-lucide-chevrons-left"
+                class="size-4"
+              />
+            </button>
+            <button
+              type="button"
+              :class="[navButtonClass, 'size-9 sm:size-8']"
+              :aria-label="t('pagination.prev')"
+              :disabled="page <= 1 || loading"
+              @click="goTo(page - 1)"
+            >
+              <UIcon
+                name="i-lucide-chevron-left"
+                class="size-4"
+              />
+            </button>
+
+            <p
+              v-if="!showMobilePageNumbers"
+              class="min-w-[5.5rem] px-1 text-center text-sm text-muted sm:hidden"
+            >
+              {{ t('pagination.pageStatus', { page, totalPages }) }}
+            </p>
+
+            <template
+              v-for="(target, index) in visiblePages"
+              :key="`${target}-${index}`"
+            >
+              <span
+                v-if="target === 'ellipsis'"
+                class="inline-flex size-9 items-center justify-center text-sm text-muted sm:size-8"
+                :class="showMobilePageNumbers ? '' : 'hidden sm:inline-flex'"
+                aria-hidden="true"
+              >
+                …
+              </span>
+              <button
+                v-else
+                type="button"
+                class="inline-flex items-center justify-center rounded-md border text-sm transition-colors disabled:pointer-events-none disabled:opacity-40"
+                :class="[
+                  pageButtonClass(target),
+                  showMobilePageNumbers ? 'size-9 sm:size-8' : 'hidden size-8 sm:inline-flex'
+                ]"
+                :aria-label="t('pagination.pageNumber', { page: target })"
+                :aria-current="target === page ? 'page' : undefined"
+                :disabled="loading"
+                @click="goTo(target)"
+              >
+                {{ target }}
+              </button>
+            </template>
+
+            <button
+              type="button"
+              :class="[navButtonClass, 'size-9 sm:size-8']"
+              :aria-label="t('pagination.next')"
+              :disabled="page >= totalPages || loading"
+              @click="goTo(page + 1)"
+            >
+              <UIcon
+                name="i-lucide-chevron-right"
+                class="size-4"
+              />
+            </button>
+            <button
+              type="button"
+              :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
+              :aria-label="t('pagination.last')"
+              :disabled="page >= totalPages || loading"
+              @click="goTo(totalPages)"
+            >
+              <UIcon
+                name="i-lucide-chevrons-right"
+                class="size-4"
+              />
+            </button>
+          </div>
+
+          <form
+            class="hidden items-center gap-1.5 text-sm text-muted sm:flex"
+            @submit.prevent="jumpToPage"
+          >
+            <span>{{ t('pagination.goToPrefix') }}</span>
+            <UInput
+              v-model="jumpPageInput"
+              type="number"
+              min="1"
+              :max="totalPages"
+              size="sm"
+              class="w-14"
+              :aria-label="t('pagination.pagePlaceholder')"
+              :disabled="loading"
+              @blur="jumpToPage"
+            />
+            <span v-if="t('pagination.goToSuffix')">{{ t('pagination.goToSuffix') }}</span>
+          </form>
         </div>
       </div>
     </div>

app/components/gallery/GalleryFilterBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
   searchQuery: string
+  storageBackend: string
+  storageBackendItems: Array<{ label: string, value: string }>
   uploadSource: string
   uploadSourceItems: Array<{ label: string, value: string }>
   viewMode: 'grid' | 'list'
@@ -13,6 +15,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   'update:searchQuery': [value: string]
+  'update:storageBackend': [value: string]
   'update:uploadSource': [value: string]
   'update:viewMode': [mode: 'grid' | 'list']
   'search': []
@@ -49,6 +52,16 @@ function viewButtonClass(active: boolean) {
       @update:model-value="emit('update:searchQuery', $event)"
     />
 
+    <USelect
+      :model-value="storageBackend"
+      :items="storageBackendItems"
+      class="w-28 shrink-0"
+      size="sm"
+      :aria-label="t('stats.storage')"
+      :disabled="loading"
+      @update:model-value="emit('update:storageBackend', $event)"
+    />
+
     <USelect
       :model-value="uploadSource"
       :items="uploadSourceItems"

app/components/settings/SettingsLogsPanel.vue

@@ -73,8 +73,11 @@ function formatTimeShort(value: string) {
   }
 }
 
-function actionColor(action: LogAction) {
-  return action === 'upload' ? 'success' : 'error'
+function actionBadgeClass(action: LogAction) {
+  const base = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap'
+  return action === 'upload'
+    ? `${base} bg-success/10 text-success`
+    : `${base} bg-error/10 text-error`
 }
 
 function actionIcon(action: LogAction) {
@@ -335,24 +338,16 @@ onMounted(async () => {
             </div>
 
             <div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
-              <UBadge
-                :color="actionColor(row.action)"
-                variant="subtle"
-                size="xs"
-              >
+              <span :class="actionBadgeClass(row.action)">
                 <UIcon
                   :name="actionIcon(row.action)"
-                  class="mr-1 size-3"
+                  class="size-3 shrink-0"
                 />
                 {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
-              </UBadge>
-              <UBadge
-                color="neutral"
-                variant="subtle"
-                size="xs"
-              >
+              </span>
+              <span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary whitespace-nowrap">
                 {{ sourceLabel(row.source) }}
-              </UBadge>
+              </span>
               <span
                 v-if="isAdmin"
                 class="text-xs text-muted"
@@ -412,32 +407,32 @@ onMounted(async () => {
         </div>
       </div>
 
-      <div class="hidden overflow-x-auto sm:block">
-        <table class="min-w-full text-left text-sm">
+      <div class="hidden min-w-0 sm:block">
+        <table class="w-full table-fixed text-left text-sm">
           <thead class="border-b border-default bg-muted/30 text-xs text-muted">
             <tr>
-              <th class="px-4 py-3 font-medium sm:px-6">
+              <th class="w-36 px-4 py-3 font-medium sm:px-6">
                 {{ t('logs.colTime') }}
               </th>
               <th
                 v-if="isAdmin"
-                class="px-4 py-3 font-medium"
+                class="w-20 px-4 py-3 font-medium"
               >
                 {{ t('logs.colUser') }}
               </th>
-              <th class="px-4 py-3 font-medium">
+              <th class="w-20 whitespace-nowrap px-4 py-3 font-medium">
                 {{ t('logs.colAction') }}
               </th>
-              <th class="px-4 py-3 font-medium">
+              <th class="w-16 whitespace-nowrap px-4 py-3 font-medium">
                 {{ t('logs.colSource') }}
               </th>
-              <th class="px-4 py-3 font-medium">
+              <th class="w-24 px-4 py-3 font-medium">
                 {{ t('logs.colStorage') }}
               </th>
               <th class="hidden px-4 py-3 font-medium md:table-cell">
                 {{ t('logs.colFile') }}
               </th>
-              <th class="px-4 py-3 font-medium">
+              <th class="w-20 px-4 py-3 font-medium">
                 {{ t('logs.colSize') }}
               </th>
               <th class="hidden px-4 py-3 font-medium xl:table-cell">
@@ -451,41 +446,33 @@ onMounted(async () => {
               :key="row.id"
               class="hover:bg-muted/20"
             >
-              <td class="whitespace-nowrap px-4 py-3 text-xs text-muted sm:px-6">
-                {{ formatTime(row.createdAt) }}
+              <td class="px-4 py-3 text-xs text-muted sm:px-6">
+                <span class="block truncate">{{ formatTime(row.createdAt) }}</span>
               </td>
               <td
                 v-if="isAdmin"
                 class="px-4 py-3 text-xs"
               >
-                {{ row.username ?? '—' }}
+                <span class="block truncate">{{ row.username ?? '—' }}</span>
               </td>
-              <td class="px-4 py-3">
-                <UBadge
-                  :color="actionColor(row.action)"
-                  variant="subtle"
-                  size="xs"
-                >
+              <td class="whitespace-nowrap px-4 py-3">
+                <span :class="actionBadgeClass(row.action)">
                   <UIcon
                     :name="actionIcon(row.action)"
-                    class="mr-1 size-3"
+                    class="size-3 shrink-0"
                   />
                   {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
-                </UBadge>
+                </span>
               </td>
-              <td class="px-4 py-3">
-                <UBadge
-                  color="neutral"
-                  variant="subtle"
-                  size="xs"
-                >
+              <td class="whitespace-nowrap px-4 py-3">
+                <span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
                   {{ sourceLabel(row.source) }}
-                </UBadge>
+                </span>
               </td>
               <td class="px-4 py-3 text-xs">
                 <span
                   v-if="row.storage"
-                  class="inline-flex max-w-[8rem] items-center gap-1 truncate"
+                  class="flex min-w-0 items-center gap-1"
                   :title="row.storage.name"
                 >
                   <UIcon
@@ -500,7 +487,7 @@ onMounted(async () => {
                 >—</span>
               </td>
               <td
-                class="hidden max-w-[12rem] truncate px-4 py-3 md:table-cell"
+                class="hidden max-w-0 truncate px-4 py-3 md:table-cell"
                 :title="row.originalName"
               >
                 {{ row.originalName }}
@@ -508,21 +495,21 @@ onMounted(async () => {
               <td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
                 {{ formatFileSize(row.size) }}
               </td>
-              <td class="hidden px-4 py-3 xl:table-cell">
-                <div class="flex max-w-[16rem] items-center gap-1">
+              <td class="hidden max-w-0 px-4 py-3 xl:table-cell">
+                <div class="flex min-w-0 items-center gap-1">
                   <a
                     v-if="row.action === 'upload'"
                     :href="imageUrl(row.key)"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="truncate font-mono text-xs text-primary hover:underline"
+                    class="min-w-0 truncate font-mono text-xs text-primary hover:underline"
                     :title="row.key"
                   >
                     {{ row.key }}
                   </a>
                   <span
                     v-else
-                    class="truncate font-mono text-xs text-dimmed"
+                    class="min-w-0 truncate font-mono text-xs text-dimmed"
                     :title="row.key"
                   >
                     {{ row.key }}
@@ -530,6 +517,7 @@ onMounted(async () => {
                   <CopyButton
                     icon="i-lucide-copy"
                     icon-only
+                    class="shrink-0"
                     :label="t('common.copy')"
                     :value="row.key"
                     :success-title="t('copy.copiedUrl')"

app/components/settings/SettingsUserPreferencesFields.vue

@@ -45,104 +45,104 @@ onMounted(() => {
 
 <template>
   <SettingsSection :title="t('preferences.processing')">
-      <SettingsGroup>
-        <SettingsToggleRow
-          v-model="compressEnabled"
-          :title="t('preferences.clientCompress')"
-          :hint="t('preferences.clientCompressHint')"
+    <SettingsGroup>
+      <SettingsToggleRow
+        v-model="compressEnabled"
+        :title="t('preferences.clientCompress')"
+        :hint="t('preferences.clientCompressHint')"
+      />
+      <div
+        v-if="userSettings"
+        class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
+      >
+        <div class="min-w-0 flex-1 pr-2">
+          <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-medium text-highlighted">
+            <span>{{ t('preferences.autoDeletePrefix') }}</span>
+            <UInput
+              v-model.number="userAutoDeleteDaysDraft"
+              type="number"
+              min="1"
+              max="3650"
+              size="xs"
+              class="w-14 tabular-nums"
+              :class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
+            />
+            <span>{{ t('preferences.autoDeleteSuffix') }}</span>
+          </p>
+          <p class="mt-1 text-xs leading-relaxed text-muted">
+            {{ t('preferences.autoDeleteHint') }}
+          </p>
+        </div>
+        <USwitch
+          v-model="userAutoDeleteEnabled"
+          class="mt-0.5 shrink-0"
         />
-        <div
-          v-if="userSettings"
-          class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
-        >
-          <div class="min-w-0 flex-1 pr-2">
-            <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-medium text-highlighted">
-              <span>{{ t('preferences.autoDeletePrefix') }}</span>
-              <UInput
-                v-model.number="userAutoDeleteDaysDraft"
-                type="number"
-                min="1"
-                max="3650"
-                size="xs"
-                class="w-14 tabular-nums"
-                :class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
-              />
-              <span>{{ t('preferences.autoDeleteSuffix') }}</span>
+      </div>
+      <div
+        v-else
+        class="flex justify-center py-4"
+      >
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-5 animate-spin text-muted"
+        />
+      </div>
+      <div class="px-4 py-4 sm:px-5">
+        <div class="flex items-start justify-between gap-4">
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-medium text-highlighted">
+              {{ t('preferences.webpQuality') }}
             </p>
             <p class="mt-1 text-xs leading-relaxed text-muted">
-              {{ t('preferences.autoDeleteHint') }}
+              {{ t('preferences.webpQualityHint') }}
+            </p>
+          </div>
+          <div class="shrink-0 text-right text-xs text-muted">
+            <p>{{ t('preferences.current', { n: clientWebpQuality }) }}</p>
+            <p class="mt-0.5">
+              {{ clientQualityLevel }}
             </p>
           </div>
-          <USwitch
-            v-model="userAutoDeleteEnabled"
-            class="mt-0.5 shrink-0"
-          />
         </div>
-        <div
-          v-else
-          class="flex justify-center py-4"
+        <input
+          type="range"
+          min="1"
+          max="100"
+          :value="clientWebpQuality"
+          class="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
+          @input="onClientQualityInput"
         >
-          <UIcon
-            name="i-lucide-loader-circle"
-            class="size-5 animate-spin text-muted"
+      </div>
+    </SettingsGroup>
+  </SettingsSection>
+
+  <SettingsSection :title="t('settings.uploadConvenience')">
+    <SettingsGroup>
+      <SettingsToggleRow
+        v-model="autoCopyMarkdown"
+        :title="t('preferences.autoCopy')"
+        :hint="t('preferences.autoCopyHint')"
+      />
+      <div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('settings.defaultCopyFormat') }}
+        </p>
+        <div
+          class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
+          :class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
+        >
+          <UButton
+            v-for="item in copyFormatItems"
+            :key="item.value"
+            size="xs"
+            class="flex-1 justify-center sm:min-w-[4.5rem]"
+            :variant="copyFormat === item.value ? 'solid' : 'ghost'"
+            :color="copyFormat === item.value ? 'primary' : 'neutral'"
+            :label="item.label"
+            @click="setCopyFormat(item.value)"
           />
         </div>
-        <div class="px-4 py-4 sm:px-5">
-          <div class="flex items-start justify-between gap-4">
-            <div class="min-w-0 flex-1">
-              <p class="text-sm font-medium text-highlighted">
-                {{ t('preferences.webpQuality') }}
-              </p>
-              <p class="mt-1 text-xs leading-relaxed text-muted">
-                {{ t('preferences.webpQualityHint') }}
-              </p>
-            </div>
-            <div class="shrink-0 text-right text-xs text-muted">
-              <p>{{ t('preferences.current', { n: clientWebpQuality }) }}</p>
-              <p class="mt-0.5">
-                {{ clientQualityLevel }}
-              </p>
-            </div>
-          </div>
-          <input
-            type="range"
-            min="1"
-            max="100"
-            :value="clientWebpQuality"
-            class="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
-            @input="onClientQualityInput"
-          >
-        </div>
-      </SettingsGroup>
-    </SettingsSection>
-
-    <SettingsSection :title="t('settings.uploadConvenience')">
-      <SettingsGroup>
-        <SettingsToggleRow
-          v-model="autoCopyMarkdown"
-          :title="t('preferences.autoCopy')"
-          :hint="t('preferences.autoCopyHint')"
-        />
-        <div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
-          <p class="text-sm font-medium text-highlighted">
-            {{ t('settings.defaultCopyFormat') }}
-          </p>
-          <div
-            class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
-            :class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
-          >
-            <UButton
-              v-for="item in copyFormatItems"
-              :key="item.value"
-              size="xs"
-              class="flex-1 justify-center sm:min-w-[4.5rem]"
-              :variant="copyFormat === item.value ? 'solid' : 'ghost'"
-              :color="copyFormat === item.value ? 'primary' : 'neutral'"
-              :label="item.label"
-              @click="setCopyFormat(item.value)"
-            />
-          </div>
-        </div>
-      </SettingsGroup>
-    </SettingsSection>
+      </div>
+    </SettingsGroup>
+  </SettingsSection>
 </template>

app/components/storage/StorageBackendCard.vue

@@ -98,10 +98,10 @@ function canDelete() {
       />
     </div>
 
-    <div class="mt-4 space-y-2 text-xs text-muted">
-      <div class="flex items-center gap-2">
+    <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
+      <div class="flex min-w-0 items-center gap-2">
         <span class="shrink-0">{{ t('storage.storageId') }}:</span>
-        <code class="min-w-0 flex-1 truncate font-mono text-dimmed">{{ backend.id }}</code>
+        <code class="min-w-0 truncate font-mono text-dimmed">{{ backend.id }}</code>
         <CopyButton
           icon="i-lucide-copy"
           icon-only
@@ -113,9 +113,9 @@ function canDelete() {
           :success-title="t('copy.copied')"
         />
       </div>
-      <p>
+      <span>
         {{ t('storage.storageType') }}: {{ typeLabel }}
-      </p>
+      </span>
     </div>
 
     <div class="mt-4 flex flex-wrap gap-2 border-t border-default pt-4">

app/components/storage/StorageBackendForm.vue

@@ -6,6 +6,7 @@ type StorageProvider = 'r2' | 'cos' | 'oss' | 'aws' | 'custom'
 
 export interface StorageFormPayload {
   name: string
+  provider: StorageProvider
   config: {
     endpoint: string
     region: string
@@ -158,6 +159,7 @@ watch(provider, (value) => {
 function handleSubmit() {
   emit('submit', {
     name: name.value.trim() || providerLabel(provider.value),
+    provider: provider.value,
     config: {
       endpoint: endpoint.value.trim(),
       region: region.value.trim() || 'auto',

app/pages/gallery.vue

@@ -33,7 +33,6 @@ const {
   loading: galleryLoading,
   searchQuery,
   activeSearch,
-  refreshList,
   fetchList,
   fetchSearch,
   fetchTotal,
@@ -41,6 +40,9 @@ const {
   goToPage,
   setPageSize,
   removeItems,
+  activeStorageBackend,
+  setActiveStorageBackend,
+  storageBackendOptions,
   activeUploadSource,
   setActiveUploadSource,
   resetFilters,
@@ -66,6 +68,7 @@ const previewImage = ref<ImageItem | null>(null)
 const viewMode = ref<'grid' | 'list'>('grid')
 
 const currentUploadSource = ref('all')
+const currentStorageBackend = ref('all')
 
 const uploadSourceItems = computed(() => [
   { label: t('stats.filterSourceAll'), value: 'all' },
@@ -73,6 +76,14 @@ const uploadSourceItems = computed(() => [
   { label: t('stats.sourceApi'), value: 'api' }
 ])
 
+const storageBackendItems = computed(() => [
+  { label: t('stats.filterStorageAll'), value: 'all' },
+  ...storageBackendOptions.value.map(backend => ({
+    label: backend.name,
+    value: backend.id
+  }))
+])
+
 const selectedCount = computed(() => selectedKeys.value.size)
 
 function onWindowScroll() {
@@ -103,17 +114,6 @@ async function refreshStats() {
   }
 }
 
-async function refreshGallery() {
-  if (!isAuthenticated.value) return
-  selectedKeys.value = new Set()
-  try {
-    await Promise.all([refreshList(), loadStorageBackendOptions()])
-    currentUploadSource.value = activeUploadSource.value
-  } catch (error: unknown) {
-    handleAuthError(error)
-  }
-}
-
 async function reloadGallery() {
   if (activeSearch.value) {
     await fetchSearch(galleryPage.value)
@@ -134,6 +134,7 @@ async function refreshAll() {
       loadStorageBackendOptions()
     ])
     currentUploadSource.value = activeUploadSource.value
+    currentStorageBackend.value = activeStorageBackend.value
   } catch (error: unknown) {
     handleAuthError(error)
     if (isAuthenticated.value) {
@@ -144,6 +145,17 @@ async function refreshAll() {
   }
 }
 
+async function handleStorageBackendChange(backendId: string) {
+  if (!isAuthenticated.value) return
+  currentStorageBackend.value = backendId
+  selectedKeys.value = new Set()
+  try {
+    await setActiveStorageBackend(backendId)
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
 async function handleUploadSourceChange(uploadSource: string) {
   if (!isAuthenticated.value) return
   currentUploadSource.value = uploadSource
@@ -159,6 +171,7 @@ async function handleResetFilters() {
   if (!isAuthenticated.value) return
   selectedKeys.value = new Set()
   currentUploadSource.value = 'all'
+  currentStorageBackend.value = 'all'
   try {
     await resetFilters()
   } catch (error: unknown) {
@@ -381,11 +394,14 @@ watch(isAuthenticated, async (authed, prev) => {
 
           <GalleryFilterBar
             v-model:search-query="searchQuery"
+            :storage-backend="currentStorageBackend"
+            :storage-backend-items="storageBackendItems"
             :upload-source="currentUploadSource"
             :upload-source-items="uploadSourceItems"
             :view-mode="viewMode"
             :selected-count="selectedCount"
             :loading="galleryLoading"
+            @update:storage-backend="handleStorageBackendChange"
             @update:upload-source="handleUploadSourceChange"
             @update:view-mode="viewMode = $event"
             @search="handleSearch"

app/pages/storage.vue

@@ -48,6 +48,7 @@ function buildPatchBody(payload: StorageFormPayload) {
   const quotaBytes = quotaToBytes(payload.quotaValue, payload.quotaUnit)
   const body: Record<string, unknown> = {
     name: payload.name,
+    provider: payload.provider,
     servingMode: payload.servingMode,
     publicUrl: payload.publicUrl,
     quotaBytes,