1

2026-09-04 10:05:06 +08:00
parent 17e5b01773
commit 19f16aaed3
6 changed files with 79 additions and 70 deletions
@@ -4,8 +4,8 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视野管理端</title>
-    <script type="module" crossorigin src="/admin/assets/index-4BRivNEp.js"></script>
-    <link rel="stylesheet" crossorigin href="/admin/assets/index-qWtNZdSB.css">
+    <script type="module" crossorigin src="/admin/assets/index-BYQXb-Nt.js"></script>
+    <link rel="stylesheet" crossorigin href="/admin/assets/index-CVJMjZta.css">
  </head>
  <body>
    <div id="app"></div>
@@ -45,7 +45,10 @@ const detail = ref(null) // 工作台数据：images[{filename,url,width,height,
 const imageMeta = ref({}) // filename -> {id, source, cleanExcluded}（来自 /datasets/images，行内展示用）
 const loading = ref(false)
 const page = ref(1)
-const pageSize = 18
+// 每页条数可选可改（分页器 sizes 选择，仅 10 的倍数，localStorage 持久化；默认 20）
+const pageSizeOptions = [10, 20, 30, 50, 100]
+const savedSize = Number(localStorage.getItem('dsImagePageSize'))
+const pageSize = ref(pageSizeOptions.includes(savedSize) ? savedSize : 20)
 // 列表 tab：未标注(默认,待处理优先) | 已标注 | 已清洗（clean_excluded=1，数据清洗排除，可恢复）——
 // 卡片上不再叠「已标注/未标注」角标，分类由 tab 表达（2026-09-02）
 const listTab = ref('unlabeled')
@@ -63,8 +66,8 @@ const visibleImages = computed(() => {
  })
 })
 const pagedImages = computed(() => {
-  const start = (page.value - 1) * pageSize
-  return visibleImages.value.slice(start, start + pageSize).map((item, i) => ({ item, gi: start + i }))
+  const start = (page.value - 1) * pageSize.value
+  return visibleImages.value.slice(start, start + pageSize.value).map((item, i) => ({ item, gi: start + i }))
 })
 const emptyTip = computed(() => {
  if (!tabCounts.unlabeled && !tabCounts.labeled && !tabCounts.cleaned) return '暂无图片，请上传或 AI 生成'
@@ -238,14 +241,19 @@ watch(listTab, () => {
  page.value = 1
  selected.value = []
 })
-// 当前 tab 列表缩水（删除/标注状态变更后重载）导致页码越界时回钳
+// 当前 tab 列表缩水（删除/标注状态变更后重载）或每页条数调小导致页码越界时回钳
 watch(
  () => visibleImages.value.length,
  () => {
-    const max = Math.max(1, Math.ceil(visibleImages.value.length / pageSize))
+    const max = Math.max(1, Math.ceil(visibleImages.value.length / pageSize.value))
    if (page.value > max) page.value = max
  },
 )
+watch(pageSize, (v) => {
+  localStorage.setItem('dsImagePageSize', String(v))
+  const max = Math.max(1, Math.ceil(visibleImages.value.length / v))
+  if (page.value > max) page.value = max
+})
 // 单选框：受控模式（el-checkbox 单独用 v-model 绑数组会在勾选时把数组替换成布尔值，故手动维护）
 function toggleOne(filename, checked) {
  const s = selected.value
@@ -571,7 +579,7 @@ async function switchEdit(idx) {
    }
  }
  editIndex.value = idx
-  page.value = Math.floor(idx / pageSize) + 1
+  page.value = Math.floor(idx / pageSize.value) + 1
  nextTick(resetEditor)
 }

@@ -1040,9 +1048,10 @@ onBeforeUnmount(() => {
        <div class="pager">
          <el-pagination
            v-model:current-page="page"
-            :page-size="pageSize"
+            v-model:page-size="pageSize"
+            :page-sizes="pageSizeOptions"
            :total="visibleImages.length"
-            layout="prev, pager, next, total"
+            layout="total, sizes, prev, pager, next"
            background
          />
        </div>