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

将操作日志并入设置侧栏，补齐检查更新提示与版本接口刷新；拆分各模块组件并修复图库搜索分页变量。

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>