feat(需求): ①全站列表/卡片分页统一为共享 OldPagination(共N条+10/20/50/100条数可选+跳页) ②创建用户菜单权限改左右布局(后台|桌面端并排) ③修复角色筛选失效(normalizeUserPageParams 白名单丢 role 字段)

2026-09-07 00:02:30 +08:00
parent d3f5a371e3
commit cd6beef388
18 changed files with 323 additions and 245 deletions
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+/** 旧版风格分页（像素复刻 admin.html .pagination）+ 每页条数下拉（10/20/50/100）。
+ *  props: total / page / pageSize / sizes(默认 10/20/50/100) / showTotal(默认 true) / jump(默认 true)。 */
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    total: number
+    page: number
+    pageSize: number
+    sizes?: number[]
+    showTotal?: boolean
+    jump?: boolean
+  }>(),
+  { sizes: () => [10, 20, 50, 100], showTotal: true, jump: true },
+)
+const emit = defineEmits<{
+  (e: 'change', page: number): void
+  (e: 'size-change', size: number): void
+}>()
+
+const jumpPage = ref('')
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
+
+function go(next: number) {
+  if (next < 1 || next > totalPages.value || next === props.page) return
+  emit('change', next)
+}
+
+function goJump() {
+  const n = Number.parseInt(jumpPage.value, 10)
+  if (Number.isNaN(n)) return
+  jumpPage.value = ''
+  go(Math.min(Math.max(n, 1), totalPages.value))
+}
+
+function onSizeChange(event: Event) {
+  const value = Number((event.target as HTMLSelectElement).value)
+  if (Number.isFinite(value) && value > 0) emit('size-change', value)
+}
+</script>
+
+<template>
+  <div class="old-pagination">
+    <span v-if="showTotal" class="page-total">共 {{ total }} 条</span>
+    <select class="page-size-select" :value="pageSize" @change="onSizeChange">
+      <option v-for="size in sizes" :key="size" :value="size">{{ size }}条/页</option>
+    </select>
+    <button type="button" :disabled="page <= 1" @click="go(page - 1)">上一页</button>
+    <span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
+    <button type="button" :disabled="page >= totalPages" @click="go(page + 1)">下一页</button>
+    <span v-if="jump" class="page-jump">
+      跳至
+      <input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
+      页
+      <button type="button" @click="goJump">跳转</button>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.old-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 18px;
+  color: #5b6f83;
+  font-size: 13px;
+}
+.old-pagination button {
+  min-height: 30px;
+  padding: 4px 12px;
+  border: 1px solid #c7d7e5;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #5b6f83;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.old-pagination button:hover:not(:disabled) {
+  background: #edf5fb;
+  border-color: #95b1cb;
+  color: #2f5d8b;
+}
+.old-pagination button:disabled {
+  background: #eef3f7;
+  color: #9baaba;
+  cursor: not-allowed;
+}
+.page-total {
+  margin-right: 4px;
+}
+.page-size-select {
+  min-height: 30px;
+  padding: 3px 8px;
+  border: 1px solid #cbd9e6;
+  border-radius: 8px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13px;
+  font-family: inherit;
+}
+.page-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.page-jump input {
+  width: 56px;
+  min-height: 30px;
+  padding: 4px 8px;
+  border: 1px solid #cbd9e6;
+  border-radius: 8px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13px;
+  font-family: inherit;
+}
+</style>