chore: update message log paga style

2026-04-17 09:32:53 +08:00
parent 518e0d93d4
commit 190d513442
4 changed files with 236 additions and 189 deletions
@@ -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="w-full">
-      <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
-        <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>
-          <TabsTrigger value="push">推送日志</TabsTrigger>
-          <TabsTrigger value="login">登录日志</TabsTrigger>
-        </TabsList>
+  <Tabs v-model="activeTab" class="space-y-6 h-full flex flex-col">
+    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 shrink-0 px-1">
+      <div class="flex flex-col shrink-0">
+        <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>

+      <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']">
+        <!-- 搜索与筛选区域 -->
+        <div :class="[activeTab === 'login' ? 'flex-1 min-w-0' : 'w-full lg:w-auto', 'flex items-center gap-2']">
+          <!-- 系统事件 / 推送日志 搜索框 -->
+          <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>
+    </div>
+  </Tabs>
 </template>
@@ -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) ========== -->
@@ -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 filters = ref({
-    level: 'all',
-    keyword: '',
-    page: 1
-})
-
-let searchTimer: ReturnType<typeof setTimeout> | null = null
+const currentPage = ref(1)

 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,
-            keyword: filters.value.keyword || undefined,
-            page: filters.value.page,
+            level: props.filters.level === 'all' ? undefined : props.filters.level,
+            keyword: props.filters.keyword || undefined,
+            page: currentPage.value,
            page_size: pageSize.value
        })
        logs.value = res.data || []
@@ -62,23 +62,8 @@ async function fetchLogs() {
    }
 }

-function handleSearch() {
-    if (searchTimer) clearTimeout(searchTimer)
-    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
+function handlePageChange(index: number) {
+    currentPage.value = index
    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,41 +144,15 @@ 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>
+        <BaihuDialog v-model:open="showClearConfirm" title="清空系统事件确认">
+            <div class="text-sm text-muted-foreground leading-relaxed">
+                此操作将永久清空当前分类下的所有系统事件记录，操作后无法恢复。确认要继续吗？
            </div>
-            <BaihuDialog v-model:open="showClearConfirm" title="清空系统事件确认">
-                <div class="text-sm text-muted-foreground leading-relaxed">
-                    此操作将永久清空当前分类下的所有系统事件记录，操作后无法恢复。确认要继续吗？
-                </div>
-                <template #footer>
-                    <Button variant="ghost" @click="showClearConfirm = false">取消</Button>
-                    <Button variant="destructive" class="shadow-lg shadow-destructive/20" @click="handleClear">确认清空</Button>
-                </template>
-            </BaihuDialog>
-        </div>
+            <template #footer>
+                <Button variant="ghost" @click="showClearConfirm = false">取消</Button>
+                <Button variant="destructive" class="shadow-lg shadow-destructive/20" @click="handleClear">确认清空</Button>
+            </template>
+        </BaihuDialog>

        <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">
@@ -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 filters = ref({
-  status: 'all',
-  keyword: '',
-  page: 1
-})
-
-let searchTimer: ReturnType<typeof setTimeout> | null = null
-
+const currentPage = ref(1)

 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,
-      keyword: filters.value.keyword || undefined,
-      page: filters.value.page,
+      status: props.filters.status === 'all' ? undefined : props.filters.status,
+      keyword: props.filters.keyword || undefined,
+      page: currentPage.value,
      page_size: pageSize.value
    })
    logs.value = res.data || []
@@ -79,23 +77,8 @@ async function fetchLogs() {
  }
 }

-function handleSearch() {
-  if (searchTimer) clearTimeout(searchTimer)
-  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
+function handlePageChange(index: number) {
+  currentPage.value = index
  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,52 +154,22 @@ 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>
-            <AlertDialogDescription>
-              此操作将永久清空当前分类下的所有消息推送历史记录，操作后无法恢复。确认要继续吗？
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>取消</AlertDialogCancel>
-            <AlertDialogAction @click="handleClear" variant="destructive">
-              确认清空
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
+    <AlertDialog :open="showClearConfirm" @update:open="showClearConfirm = $event">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认清空所有推送日志？</AlertDialogTitle>
+          <AlertDialogDescription>
+            此操作将永久清空当前分类下的所有消息推送历史记录，操作后无法恢复。确认要继续吗？
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction @click="handleClear" variant="destructive">
+            确认清空
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>

    <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">