refactor(组件): 使用useVModel简化分页组件双向绑定

重构TableCard和Pagination组件，使用vueuse的useVModel替代手动emit实现双向绑定
简化权限守卫逻辑，使用return替代next回调
设置表格默认总数为20条

src/components/Pagination/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
 interface PaginationProps {
   total: number
   currentPage?: number
@@ -28,15 +30,9 @@ const emit = defineEmits<{
   (e: 'change', currentPage: number, pageSize: number): void
 }>()
 
-const currentPageValue = computed({
-  get: () => props.currentPage,
-  set: (val: number) => emit('update:currentPage', val)
-})
+const innerCurrentPage = useVModel(props, 'currentPage', emit, { passive: true })
+const innerPageSize = useVModel(props, 'pageSize', emit, { passive: true })
 
-const pageSizeValue = computed({
-  get: () => props.pageSize,
-  set: (val: number) => emit('update:pageSize', val)
-})
 
 function handleChange(currentPage: number, pageSize: number) {
   emit('change', currentPage, pageSize)
@@ -45,7 +41,7 @@ function handleChange(currentPage: number, pageSize: number) {
 
 <template>
   <div class="pagination-wrapper">
-    <el-pagination v-model:current-page="currentPageValue" v-model:page-size="pageSizeValue" :total="total"
+    <el-pagination v-model:current-page="innerCurrentPage" v-model:page-size="innerPageSize" :total="total"
       :page-sizes="pageSizes" :layout="layout" :background="background" :small="small" :disabled="disabled"
       :hide-on-single-page="hideOnSinglePage" @change="handleChange" />
   </div>
@@ -57,4 +53,4 @@ function handleChange(currentPage: number, pageSize: number) {
   justify-content: center;
   padding: 16px 0;
 }
-</style>
+</style>

src/components/TableCard/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Pagination from '@/components/Pagination/index.vue'
 import { Setting, Refresh } from '@element-plus/icons-vue'
-
+import { useVModel } from '@vueuse/core'
 interface BaseColumn {
   width?: number | string
   minWidth?: number | string
@@ -100,12 +100,12 @@ const isIndeterminate = computed(() => {
   return len > 0 && len < filterableColumns.value.length
 })
 
+const innerPageNo = useVModel(props, 'pageNo', emit, { passive: true })
+const innerPageSize = useVModel(props, 'pageSize', emit, { passive: true })
+
 function handlePageChange(pageNo: number, pageSize: number) {
-  emit('update:pageNo', pageNo)
-  emit('update:pageSize', pageSize)
   emit('change', pageNo, pageSize)
 }
-
 function handleSelectionChange(selection: any[]) {
   emit('selection-change', selection)
 }
@@ -181,9 +181,8 @@ watch(
       </template>
     </el-table>
 
-    <Pagination v-if="showPagination" :current-page="pageNo" :page-size="pageSize" :total="total"
-      @update:current-page="(val) => emit('update:pageNo', val)"
-      @update:page-size="(val) => emit('update:pageSize', val)" @change="handlePageChange" />
+    <Pagination v-if="showPagination" v-model:current-page="innerPageNo" v-model:page-size="innerPageSize"
+      :total="total" @change="handlePageChange" />
 
     <slot name="footer" />
   </el-card>

src/permission.ts

@@ -5,7 +5,7 @@ import { usePermissionStore } from '@/store/modules/permission'
 // 不需要登录即可访问的路径白名单
 const whiteList = ['/auth', '/404']
 
-router.beforeEach(async (to, _from, next) => {
+router.beforeEach(async (to, _from) => {
   const userStore = useUserStore()
   const permissionStore = usePermissionStore()
 
@@ -15,13 +15,12 @@ router.beforeEach(async (to, _from, next) => {
     // ── 已登录 ──
     if (to.path === '/auth') {
       // 已登录不允许访问登录页
-      next('/')
-      return
+      return '/'
     }
 
     if (permissionStore.isRoutesLoaded) {
       // 路由已加载，直接放行
-      next()
+      return true
     } else {
       try {
         // ① 获取用户信息（角色、昵称等）
@@ -41,20 +40,20 @@ router.beforeEach(async (to, _from, next) => {
         // ⑤ 重新导航到目标页面
         // replace: true 避免在历史记录中留下重定向记录
         // 必须用 next({ ...to }) 而不是 next()，让路由重新匹配新注册的路由
-        next({ ...to, replace: true })
+        return { ...to, replace: true }
       } catch (error) {
         // Token 失效或接口异常 → 清除 Token，跳转登录
         console.error('[权限守卫] 初始化失败:', error)
         userStore.resetToken()
-        next(`/auth?redirect=${encodeURIComponent(to.path)}`)
+        return `/auth?redirect=${encodeURIComponent(to.path)}`
       }
     }
   } else {
     // ── 未登录 ──
     if (whiteList.includes(to.path)) {
-      next()
+      return true
     } else {
-      next(`/auth?redirect=${encodeURIComponent(to.path)}`)
+      return `/auth?redirect=${encodeURIComponent(to.path)}`
     }
   }
 })

src/views/sdk/index.vue

@@ -2,8 +2,8 @@
   <div>
     <Breadcrumb />
     <TabFilter v-model="activeTab" :options="options" @change="handleTabChange" />
-    <TableCard :data="tableData" :columns="columns" :current-page="pageNo" :page-size="pageSize" :total="total"
-      @change="handlePageChange" @selection-change="handleSelectionChange">
+    <TableCard :data="tableData" :columns="columns" v-model:page-no="pageNo" v-model:page-size="pageSize"
+      @change="handleChange" :total="total" @selection-change="handleSelectionChange">
       <template #toolbar-left>
         <el-button type="primary" size="large" class="is-solid" @click="handleAdd">新增</el-button>
         <el-button size="large" @click="handleBatchDelete">批量删除</el-button>
@@ -39,7 +39,7 @@ const selectedRows = ref<any[]>([])
 const state = reactive({
   pageNo: 1,
   pageSize: 10,
-  total: 0
+  total: 20
 })
 
 const { pageNo, pageSize, total } = toRefs(state)
@@ -89,7 +89,7 @@ function handleTabChange(value: string | number) {
   console.log('切换到:', value)
 }
 
-function handlePageChange(page: number, size: number) {
+function handleChange(page: number, size: number) {
   console.log('分页变化:', page, size)
 }