chore: update message log paga style

web/src/views/loginlogs/LoginLogs.vue

@@ -1,42 +1,180 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Search, RefreshCw, Trash2, ShieldAlert, Bell, LogIn } from 'lucide-vue-next'
 import LoginLogTab from './tabs/LoginLogTab.vue'
 import SystemEventTab from './tabs/SystemEventTab.vue'
 import PushLog from '@/views/notify/components/PushLog.vue'
+import { LOG_LEVEL, LOG_STATUS } from '@/api'
 
 const activeTab = ref('system')
+const systemTabRef = ref()
+const pushLogRef = ref()
+const loginTabRef = ref()
+
+const filters = ref({
+  system: { keyword: '', level: 'all' },
+  push: { keyword: '', status: 'all' },
+  login: { username: '' }
+})
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+
+function handleSearch() {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    handleRefresh()
+  }, 300)
+}
+
+function handleRefresh() {
+  if (activeTab.value === 'system') systemTabRef.value?.fetchLogs()
+  else if (activeTab.value === 'push') pushLogRef.value?.fetchLogs()
+  else if (activeTab.value === 'login') loginTabRef.value?.loadLogs()
+}
+
+function handleClear() {
+  if (activeTab.value === 'system' && systemTabRef.value) systemTabRef.value.showClearConfirm = true
+  else if (activeTab.value === 'push' && pushLogRef.value) pushLogRef.value.showClearConfirm = true
+}
+
+// 切换标签时重置搜索
+watch(activeTab, () => {
+  // handleRefresh()
+})
+
 </script>
 
 <template>
-  <div class="space-y-6">
+  <Tabs v-model="activeTab" class="space-y-6 h-full flex flex-col">
-    <Tabs v-model="activeTab" class="w-full">
+    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 shrink-0 px-1">
-      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+      <div class="flex flex-col shrink-0">
-        <div>
         <h2 class="text-xl sm:text-2xl font-bold tracking-tight">消息日志</h2>
         <p class="text-muted-foreground text-sm">
           {{ activeTab === 'system' ? '查看系统重要运行事件' :
             activeTab === 'push' ? '查看消息推送历史记录' : '查看系统用户登录记录' }}
         </p>
       </div>
-        <TabsList class="grid grid-cols-3 w-full sm:w-auto min-w-[300px]">
+
-          <TabsTrigger value="system">系统事件</TabsTrigger>
+      <div :class="[activeTab === 'login' ? 'flex flex-row lg:flex-row' : 'flex flex-col lg:flex-row', 'lg:items-center gap-2 lg:gap-3 w-full lg:w-auto lg:ml-auto lg:justify-end']">
-          <TabsTrigger value="push">推送日志</TabsTrigger>
+        <!-- 搜索与筛选区域 -->
-          <TabsTrigger value="login">登录日志</TabsTrigger>
+        <div :class="[activeTab === 'login' ? 'flex-1 min-w-0' : 'w-full lg:w-auto', 'flex items-center gap-2']">
-        </TabsList>
+          <!-- 系统事件 / 推送日志 搜索框 -->
+          <div v-if="activeTab !== 'login'" class="relative flex-1 lg:w-60 group">
+            <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
+            <Input 
+              v-if="activeTab === 'system'"
+              v-model="filters.system.keyword" 
+              placeholder="搜索系统事件..." 
+              class="h-9 pl-9 w-full bg-muted/20 border-muted-foreground/10 focus:bg-background text-sm"
+              @input="handleSearch" 
+            />
+            <Input 
+              v-else-if="activeTab === 'push'"
+              v-model="filters.push.keyword" 
+              placeholder="搜索推送日志..." 
+              class="h-9 pl-9 w-full bg-muted/20 border-muted-foreground/10 focus:bg-background text-sm"
+              @input="handleSearch" 
+            />
+          </div>
+          <!-- 登录日志 搜索框 -->
+          <div v-else class="relative flex-1 lg:w-48 group">
+            <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
+            <Input 
+              v-model="filters.login.username" 
+              placeholder="搜索..." 
+              class="h-9 pl-9 w-full bg-muted/20 border-muted-foreground/10 focus:bg-background text-sm"
+              @input="handleSearch" 
+            />
           </div>
 
+          <!-- 系统事件 级别筛选 -->
+          <div v-if="activeTab === 'system'" class="relative w-24 sm:w-28 shrink-0">
+            <Select v-model="filters.system.level" @update:model-value="handleRefresh">
+              <SelectTrigger class="h-9 w-full text-sm bg-muted/20 border-muted-foreground/10">
+                <SelectValue placeholder="级别" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">所有级别</SelectItem>
+                <SelectItem :value="LOG_LEVEL.INFO">信息</SelectItem>
+                <SelectItem :value="LOG_LEVEL.WARNING">警告</SelectItem>
+                <SelectItem :value="LOG_LEVEL.ERROR">错误</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <!-- 推送日志 状态筛选 -->
+          <div v-if="activeTab === 'push'" class="relative w-24 sm:w-28 shrink-0">
+            <Select v-model="filters.push.status" @update:model-value="handleRefresh">
+              <SelectTrigger class="h-9 w-full text-sm bg-muted/20 border-muted-foreground/10">
+                <SelectValue placeholder="状态" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">所有状态</SelectItem>
+                <SelectItem :value="LOG_STATUS.SUCCESS">发送成功</SelectItem>
+                <SelectItem :value="LOG_STATUS.FAILED">发送失败</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <!-- 操作区域 -->
+        <div :class="[activeTab === 'login' ? 'flex-1 sm:flex-none' : 'w-full lg:w-auto', 'flex items-center gap-2']">
+          <Button variant="outline" size="icon" class="h-9 w-9 shrink-0 shadow-sm" @click="handleRefresh" title="刷新">
+            <RefreshCw class="h-4 w-4" />
+          </Button>
+
+          <Button v-if="activeTab !== 'login'" variant="outline" 
+            class="flex-1 lg:flex-none lg:px-3 h-9 shadow-sm text-destructive border-destructive/20 hover:bg-destructive/10" 
+            @click="handleClear" title="清空记录">
+            <Trash2 class="h-4 w-4 lg:mr-2" /> <span class="ml-2 lg:inline" :class="activeTab !== 'login' ? '' : 'hidden'">清空记录</span>
+          </Button>
+
+          <!-- 桌面端标签切换 -->
+          <TabsList class="h-9 p-1 bg-muted/30 border shrink-0 hidden lg:flex">
+            <TabsTrigger value="system" class="px-4 h-7 text-sm">
+              系统事件
+            </TabsTrigger>
+            <TabsTrigger value="push" class="px-4 h-7 text-sm">
+              推送日志
+            </TabsTrigger>
+            <TabsTrigger value="login" class="px-4 h-7 text-sm">
+              登录日志
+            </TabsTrigger>
+          </TabsList>
+
+          <!-- 移动端标签切换 (简易版) -->
+          <div class="lg:hidden flex-1 shrink-0 min-w-0">
+            <Select v-model="activeTab">
+              <SelectTrigger class="h-9 w-full text-sm bg-muted/20 border-muted-foreground/10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="system">系统事件</SelectItem>
+                <SelectItem value="push">推送日志</SelectItem>
+                <SelectItem value="login">登录日志</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex-1 min-h-0">
       <TabsContent value="system" class="mt-0">
-        <SystemEventTab />
+        <SystemEventTab ref="systemTabRef" :filters="filters.system" />
       </TabsContent>
 
       <TabsContent value="push" class="mt-0">
-        <PushLog />
+        <PushLog ref="pushLogRef" :filters="filters.push" />
       </TabsContent>
 
       <TabsContent value="login" class="mt-0">
-        <LoginLogTab />
+        <LoginLogTab ref="loginTabRef" :username="filters.login.username" />
       </TabsContent>
-    </Tabs>
     </div>
+  </Tabs>
 </template>

web/src/views/loginlogs/tabs/LoginLogTab.vue

@@ -10,6 +10,10 @@ import { toast } from 'vue-sonner'
 import { useSiteSettings } from '@/composables/useSiteSettings'
 import BaihuDialog from '@/components/ui/BaihuDialog.vue'
 
+const props = defineProps<{
+    username: string
+}>()
+
 const { pageSize } = useSiteSettings()
 
 interface LoginLog {
@@ -38,11 +42,9 @@ interface IpGeoInfo {
 }
 
 const logs = ref<LoginLog[]>([])
-const filterUsername = ref('')
 const currentPage = ref(1)
 const total = ref(0)
 const loading = ref(false)
-let searchTimer: ReturnType<typeof setTimeout> | null = null
 
 // IP 地理位置弹窗
 const ipDialogOpen = ref(false)
@@ -73,7 +75,7 @@ async function loadLogs() {
         const res = await api.settings.getLoginLogs({
             page: currentPage.value,
             page_size: pageSize.value,
-            username: filterUsername.value || undefined
+            username: props.username || undefined
         })
         logs.value = res.data
         total.value = res.total
@@ -84,37 +86,20 @@ async function loadLogs() {
     }
 }
 
-function handleSearch() {
-    if (searchTimer) clearTimeout(searchTimer)
-    searchTimer = setTimeout(() => {
-        currentPage.value = 1
-        loadLogs()
-    }, 300)
-}
-
 function handlePageChange(page: number) {
     currentPage.value = page
     loadLogs()
 }
 
 onMounted(loadLogs)
+
+defineExpose({
+    loadLogs
+})
 </script>
 
 <template>
     <div class="space-y-4">
-        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 w-full">
-            <div class="flex items-center gap-2 w-full lg:w-auto lg:ml-auto">
-                <div class="relative w-full sm:w-60 group">
-                    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
-                    <Input v-model="filterUsername" placeholder="搜索用户名..." class="h-9 pl-9 w-full text-sm bg-muted/20 border-muted-foreground/10 focus:bg-background"
-                        @input="handleSearch" />
-                </div>
-                <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadLogs" :disabled="loading"
-                    title="刷新">
-                    <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
-                </Button>
-            </div>
-        </div>
 
         <div class="rounded-lg border bg-card overflow-hidden">
             <!-- ========== 1. 大屏表头 (Large >= 1024px) ========== -->

web/src/views/loginlogs/tabs/SystemEventTab.vue

@@ -20,6 +20,13 @@ import {
 } from 'lucide-vue-next'
 import { useSiteSettings } from '@/composables/useSiteSettings'
 
+const props = defineProps<{
+    filters: {
+        level: string
+        keyword: string
+    }
+}>()
+
 const { pageSize } = useSiteSettings()
 
 const logs = ref<AppLog[]>([])
@@ -27,14 +34,7 @@ const selectedLogId = ref<string | null>(null)
 const total = ref(0)
 const loading = ref(false)
 const showClearConfirm = ref(false)
-
+const currentPage = ref(1)
-const filters = ref({
-    level: 'all',
-    keyword: '',
-    page: 1
-})
-
-let searchTimer: ReturnType<typeof setTimeout> | null = null
 
 const detailDialogProps = ref({
     open: false,
@@ -48,9 +48,9 @@ async function fetchLogs() {
     try {
         const res = await api.appLogs.list({
             category: LOG_CATEGORY.SYSTEM_NOTICE,
-            level: filters.value.level === 'all' ? undefined : filters.value.level,
+            level: props.filters.level === 'all' ? undefined : props.filters.level,
-            keyword: filters.value.keyword || undefined,
+            keyword: props.filters.keyword || undefined,
-            page: filters.value.page,
+            page: currentPage.value,
             page_size: pageSize.value
         })
         logs.value = res.data || []
@@ -62,23 +62,8 @@ async function fetchLogs() {
     }
 }
 
-function handleSearch() {
+function handlePageChange(index: number) {
-    if (searchTimer) clearTimeout(searchTimer)
+    currentPage.value = index
-    searchTimer = setTimeout(() => {
-        filters.value.page = 1
-        fetchLogs()
-    }, 300)
-}
-
-function handlePageChange(page: number) {
-    filters.value.page = page
-    fetchLogs()
-}
-
-function handleLevelChange(val: any) {
-    if (val === null || val === undefined) return
-    filters.value.level = String(val)
-    filters.value.page = 1
     fetchLogs()
 }
 
@@ -96,11 +81,12 @@ async function handleClear() {
     try {
         await api.appLogs.clear(LOG_CATEGORY.SYSTEM_NOTICE)
         toast.success('清空成功')
-        filters.value.page = 1
+        currentPage.value = 1
         fetchLogs()
     } catch (e: any) {
         toast.error('清空失败: ' + (e.message || ''))
     }
+    showClearConfirm.value = false
 }
 
 onMounted(() => {
@@ -109,6 +95,11 @@ onMounted(() => {
 
 const selectedLog = computed(() => logs.value.find((l: AppLog) => l.id === selectedLogId.value))
 
+defineExpose({
+    fetchLogs,
+    showClearConfirm
+})
+
 function getLevelBadgeClass(level: string) {
     switch (level) {
         case LOG_LEVEL.INFO:
@@ -153,31 +144,6 @@ function onDialogClose(open: boolean) {
 
 <template>
     <div class="space-y-4">
-        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 w-full">
-            <div class="flex items-center gap-2 w-full lg:w-auto lg:ml-auto">
-                <div class="relative w-full sm:w-60 group">
-                    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
-                    <Input v-model="filters.keyword" placeholder="搜索标题或内容..." class="h-9 pl-9 w-full text-sm bg-muted/20 border-muted-foreground/10 focus:bg-background"
-                        @input="handleSearch" />
-                </div>
-                <div class="relative flex-1 sm:flex-none sm:w-28">
-                    <Select :model-value="filters.level" @update:model-value="handleLevelChange">
-                        <SelectTrigger class="h-9 w-full text-sm bg-muted/20 border-muted-foreground/10">
-                            <SelectValue placeholder="级别" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="all">所有级别</SelectItem>
-                            <SelectItem :value="LOG_LEVEL.INFO">信息</SelectItem>
-                            <SelectItem :value="LOG_LEVEL.WARNING">警告</SelectItem>
-                            <SelectItem :value="LOG_LEVEL.ERROR">错误</SelectItem>
-                        </SelectContent>
-                    </Select>
-                </div>
-                <Button variant="outline" size="icon" class="h-9 w-9 shrink-0 sm:flex" @click="fetchLogs" :disabled="loading"
-                    title="刷新">
-                    <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
-                </Button>
-            </div>
         <BaihuDialog v-model:open="showClearConfirm" title="清空系统事件确认">
             <div class="text-sm text-muted-foreground leading-relaxed">
                 此操作将永久清空当前分类下的所有系统事件记录，操作后无法恢复。确认要继续吗？
@@ -187,7 +153,6 @@ function onDialogClose(open: boolean) {
                 <Button variant="destructive" class="shadow-lg shadow-destructive/20" @click="handleClear">确认清空</Button>
             </template>
         </BaihuDialog>
-        </div>
 
         <div class="rounded-lg border bg-card overflow-hidden">
             <!-- ========== 1. 大屏表头 (Large >= 1024px) ========== -->
@@ -217,7 +182,7 @@ function onDialogClose(open: boolean) {
                     :class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
                     <div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
                         <div class="flex items-center gap-2 flex-1 min-w-0 mr-2">
-                            <span class="text-xs text-muted-foreground shrink-0 tabular-nums">#{{ total - (filters.page - 1) * pageSize - index }}</span>
+                            <span class="text-xs text-muted-foreground shrink-0 tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
                             <span class="font-bold text-sm truncate" :title="log.title">{{ log.title }}</span>
                         </div>
                         <span :class="['h-2 w-2 mt-1.5 rounded-full shrink-0 shadow-[0_0_8px]',
@@ -269,7 +234,7 @@ function onDialogClose(open: boolean) {
                 <div v-for="(log, index) in logs" :key="`large-${log.id}`"
                     class="hidden lg:flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors cursor-pointer group"
                     :class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
-                    <span class="w-16 shrink-0 text-muted-foreground text-[13px] tabular-nums pl-1">#{{ total - (filters.page - 1) * pageSize - index }}</span>
+                    <span class="w-16 shrink-0 text-muted-foreground text-[13px] tabular-nums pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
                     <div class="w-56 shrink-0 flex items-center gap-3 min-w-0 text-[13px]">
                         <component :is="getLevelIcon(log.level)" :class="['h-4 w-4 shrink-0 opacity-80',
                             log.level === LOG_LEVEL.INFO ? 'text-blue-500' :
@@ -286,7 +251,7 @@ function onDialogClose(open: boolean) {
                 </div>
             </div>
 
-            <Pagination :total="total" :page="filters.page" @update:page="handlePageChange" />
+            <Pagination :total="total" :page="currentPage" @update:page="handlePageChange" />
         </div>
 
         <BaihuDialog v-model:open="detailDialogProps.open" :title="detailDialogProps.title" @update:open="onDialogClose">

web/src/views/notify/components/PushLog.vue

@@ -35,6 +35,12 @@ import {
 } from '@/components/ui/alert-dialog'
 import { useSiteSettings } from '@/composables/useSiteSettings'
 
+const props = defineProps<{
+  filters: {
+    status: string
+    keyword: string
+  }
+}>()
 
 const { pageSize } = useSiteSettings()
 
@@ -43,15 +49,7 @@ const selectedLogId = ref<string | null>(null)
 const total = ref(0)
 const loading = ref(false)
 const showClearConfirm = ref(false)
-
+const currentPage = ref(1)
-const filters = ref({
-  status: 'all',
-  keyword: '',
-  page: 1
-})
-
-let searchTimer: ReturnType<typeof setTimeout> | null = null
-
 
 const detailDialogProps = ref({
   open: false,
@@ -65,9 +63,9 @@ async function fetchLogs() {
   try {
     const res = await api.appLogs.list({
       category: LOG_CATEGORY.PUSH_LOG,
-      status: filters.value.status === 'all' ? undefined : filters.value.status,
+      status: props.filters.status === 'all' ? undefined : props.filters.status,
-      keyword: filters.value.keyword || undefined,
+      keyword: props.filters.keyword || undefined,
-      page: filters.value.page,
+      page: currentPage.value,
       page_size: pageSize.value
     })
     logs.value = res.data || []
@@ -79,23 +77,8 @@ async function fetchLogs() {
   }
 }
 
-function handleSearch() {
+function handlePageChange(index: number) {
-  if (searchTimer) clearTimeout(searchTimer)
+  currentPage.value = index
-  searchTimer = setTimeout(() => {
-    filters.value.page = 1
-    fetchLogs()
-  }, 300)
-}
-
-function handlePageChange(page: number) {
-  filters.value.page = page
-  fetchLogs()
-}
-
-function handleStatusChange(val: any) {
-  if (val === null || val === undefined) return
-  filters.value.status = String(val)
-  filters.value.page = 1
   fetchLogs()
 }
 
@@ -113,11 +96,12 @@ async function handleClear() {
   try {
     await api.appLogs.clear(LOG_CATEGORY.PUSH_LOG)
     toast.success('清空成功')
-    filters.value.page = 1
+    currentPage.value = 1
     fetchLogs()
   } catch (e: any) {
     toast.error('清空失败: ' + (e.message || ''))
   }
+  showClearConfirm.value = false
 }
 
 onMounted(() => {
@@ -126,6 +110,11 @@ onMounted(() => {
 
 const selectedLog = computed(() => logs.value.find((l: AppLog) => l.id === selectedLogId.value))
 
+defineExpose({
+  fetchLogs,
+  showClearConfirm
+})
+
 function getStatusBadgeClass(status: string) {
   switch (status) {
     case LOG_STATUS.SUCCESS:
@@ -138,7 +127,7 @@ function getStatusBadgeClass(status: string) {
 }
 
 function getLogIndex(index: number) {
-  return total.value - (filters.value.page - 1) * pageSize.value - index
+  return total.value - (currentPage.value - 1) * pageSize.value - index
 }
 
 function formatDate(dateStr: string) {
@@ -165,36 +154,7 @@ function onDialogClose(open: boolean) {
 
 <template>
   <div class="space-y-6">
-    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 w-full">
-      <div class="flex items-center gap-2 w-full lg:w-auto lg:ml-auto">
-        <div class="relative w-full sm:w-60 group">
-          <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
-          <Input v-model="filters.keyword" placeholder="搜索标题或内容..." class="h-9 pl-9 w-full text-sm bg-muted/20 border-muted-foreground/10 focus:bg-background"
-            @input="handleSearch" />
-        </div>
-        <div class="relative flex-1 sm:flex-none sm:w-28">
-          <Select :model-value="filters.status" @update:model-value="handleStatusChange">
-            <SelectTrigger class="h-9 w-full text-sm bg-muted/20 border-muted-foreground/10">
-              <SelectValue placeholder="状态" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">所有状态</SelectItem>
-              <SelectItem :value="LOG_STATUS.SUCCESS">发送成功</SelectItem>
-              <SelectItem :value="LOG_STATUS.FAILED">发送失败</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <Button variant="outline" size="icon" class="h-9 w-9 shrink-0 sm:flex" @click="fetchLogs" :disabled="loading"
-          title="刷新">
-          <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
-        </Button>
-      </div>
     <AlertDialog :open="showClearConfirm" @update:open="showClearConfirm = $event">
-        <Button variant="outline"
-          class="h-9 px-4 shrink-0 text-sm text-destructive hover:bg-destructive/10 hover:text-destructive border-destructive/20 w-full sm:w-auto"
-          @click="showClearConfirm = true">
-          <Trash2 class="h-4 w-4 mr-2" /> <span>清空记录</span>
-        </Button>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>确认清空所有推送日志？</AlertDialogTitle>
@@ -210,7 +170,6 @@ function onDialogClose(open: boolean) {
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-    </div>
 
     <div class="rounded-lg border bg-card overflow-hidden">
       <!-- ========== 1. 大屏表头 (Large >= 1024px) ========== -->
@@ -306,7 +265,7 @@ function onDialogClose(open: boolean) {
       </div>
 
       <!-- 分页 -->
-      <Pagination :total="total" :page="filters.page" @update:page="handlePageChange" />
+      <Pagination :total="total" :page="currentPage" @update:page="handlePageChange" />
     </div>
 
     <Dialog v-model:open="detailDialogProps.open" @update:open="onDialogClose">