重构：迁移3个列表视图到useAdminListPage + 提取useAdminAction组合式函数

apps/frontend/src/views/admin/audit-logs/AdminAuditLogsView.vue

@@ -1,62 +1,52 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import { useAdminListPage } from '@/composables/useAdminListPage'
 import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
 import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
 import { fetchAdminAuditLogs } from '@/services/admin'
-import type { AdminAuditLogItem, AdminPagination } from '@/types/admin'
+import type { AdminAuditLogItem } from '@/types/admin'
 import { hasAdminRole } from '@/utils/admin-auth'
 import { formatAuditAction, formatAuditTargetType } from '@/utils/admin-display'
 import { adminAuditActionOptions, adminAuditTargetTypeOptions } from '@/utils/admin-options'
 import { formatAdminDateTime } from '@/utils/admin-time'
 import { stringifyDisplayJson } from '@/utils/date-time'
 
-const loading = ref(true)
-const errorMessage = ref('')
 const actorUsername = ref('')
 const action = ref('')
 const targetType = ref('')
 const dateFrom = ref('')
 const dateTo = ref('')
-const items = ref<AdminAuditLogItem[]>([])
-const pagination = ref<AdminPagination>({
-  page: 1,
-  pageSize: 20,
-  total: 0,
+
+const isAdmin = hasAdminRole('admin')
+
+const {
+  loading,
+  errorMessage,
+  items,
+  pagination,
+  loadPage: loadAuditLogs,
+} = useAdminListPage<AdminAuditLogItem>({
+  defaultErrorMessage: '读取审计日志失败',
+  fetchPage: isAdmin
+    ? (page, pageSize) =>
+        fetchAdminAuditLogs({
+          page,
+          pageSize,
+          actorUsername: actorUsername.value.trim(),
+          action: action.value.trim(),
+          targetType: targetType.value.trim(),
+          dateFrom: dateFrom.value.trim(),
+          dateTo: dateTo.value.trim(),
+        })
+    : () =>
+        Promise.resolve({
+          code: 0,
+          msg: '',
+          data: { items: [], pagination: { page: 1, pageSize: 20, total: 0 } },
+        }),
 })
 
-async function loadAuditLogs(page = 1) {
-  if (!hasAdminRole('admin')) {
-    loading.value = false
-    return
-  }
-
-  loading.value = true
-  errorMessage.value = ''
-
-  try {
-    const response = await fetchAdminAuditLogs({
-      page,
-      pageSize: pagination.value.pageSize,
-      actorUsername: actorUsername.value.trim(),
-      action: action.value.trim(),
-      targetType: targetType.value.trim(),
-      dateFrom: dateFrom.value.trim(),
-      dateTo: dateTo.value.trim(),
-    })
-    items.value = response.data.items
-    pagination.value = response.data.pagination
-  } catch (error) {
-    errorMessage.value = error instanceof Error ? error.message : '读取审计日志失败'
-  } finally {
-    loading.value = false
-  }
-}
-
-function handlePageChange() {
-  loadAuditLogs(pagination.value.page)
-}
-
 function formatPayload(payload: Record<string, unknown>) {
   const text = stringifyDisplayJson(payload, 0)
   return text.length > 120 ? `${text.slice(0, 120)}...` : text
@@ -68,7 +58,14 @@ function resolveTargetLabel(targetType: string, targetId: string) {
 
 const totalLabel = computed(() => `共 ${pagination.value.total} 条审计记录`)
 
-onMounted(loadAuditLogs)
+function resetFilters() {
+  actorUsername.value = ''
+  action.value = ''
+  targetType.value = ''
+  dateFrom.value = ''
+  dateTo.value = ''
+  void loadAuditLogs(1)
+}
 </script>
 
 <template>
@@ -78,25 +75,31 @@ onMounted(loadAuditLogs)
       description="集中查看高风险后台动作，便于排查谁在什么时间改了什么。"
     >
       <template #extra>
-        <span class="total-label">{{ totalLabel }}</span>
+        <span class="total-badge">{{ totalLabel }}</span>
       </template>
     </AdminPageHeader>
 
     <!-- 权限检查 -->
-    <el-result v-if="!hasAdminRole('admin')" icon="warning" title="仅管理员可以访问操作审计" />
+    <el-result v-if="!isAdmin" icon="warning" title="仅管理员可以访问操作审计" />
 
     <template v-else>
       <!-- 筛选栏 -->
-      <el-card shadow="never" class="filter-card">
-        <div class="filter-row">
+      <el-card shadow="never" class="section-card">
+        <template #header>
+          <div class="card-header">
+            <span class="card-title">筛选审计日志</span>
+            <span class="card-desc">按操作人、动作类型、目标类型和日期筛选。</span>
+          </div>
+        </template>
+        <div class="filter-grid">
           <el-input
             v-model="actorUsername"
             placeholder="操作账号"
             clearable
-            class="filter-col-160"
-            @keyup.enter="handlePageChange"
+            class="filter-control"
+            @keyup.enter="loadAuditLogs()"
           />
-          <el-select v-model="action" placeholder="动作" clearable class="filter-col-160">
+          <el-select v-model="action" placeholder="动作" clearable class="filter-control">
             <el-option
               v-for="opt in adminAuditActionOptions"
               :key="opt.value"
@@ -104,7 +107,7 @@ onMounted(loadAuditLogs)
               :value="opt.value"
             />
           </el-select>
-          <el-select v-model="targetType" placeholder="目标类型" clearable class="filter-col-160">
+          <el-select v-model="targetType" placeholder="目标类型" clearable class="filter-control">
             <el-option
               v-for="opt in adminAuditTargetTypeOptions"
               :key="opt.value"
@@ -117,16 +120,19 @@ onMounted(loadAuditLogs)
             type="date"
             placeholder="开始日期"
             value-format="YYYY-MM-DD"
-            class="filter-col-160"
+            class="filter-control"
           />
           <el-date-picker
             v-model="dateTo"
             type="date"
             placeholder="结束日期"
             value-format="YYYY-MM-DD"
-            class="filter-col-160"
+            class="filter-control"
           />
-          <el-button type="primary" @click="handlePageChange">查询</el-button>
+          <div class="filter-buttons">
+            <el-button round @click="resetFilters">重置</el-button>
+            <el-button round type="primary" @click="loadAuditLogs()">查询</el-button>
+          </div>
         </div>
       </el-card>
 
@@ -141,13 +147,14 @@ onMounted(loadAuditLogs)
       />
 
       <!-- 表格 -->
-      <el-card shadow="never" class="table-card mt-4">
+      <el-card shadow="never" class="section-card">
         <el-table
           :data="items"
           stripe
           size="small"
           v-loading="loading"
           element-loading-text="审计日志加载中"
+          class="data-table"
         >
           <el-table-column label="时间" width="180">
             <template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
@@ -183,7 +190,8 @@ onMounted(loadAuditLogs)
           :page-size="pagination.pageSize"
           :total="pagination.total"
           layout="total, prev, pager, next"
-          @current-change="handlePageChange"
+          class="pagination-center"
+          @current-change="loadAuditLogs"
         />
       </el-card>
     </template>
@@ -193,26 +201,6 @@ onMounted(loadAuditLogs)
 <style scoped>
 @import '../../../styles/admin-list-pages.css';
 
-.total-label {
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-
-.filter-card {
-  margin-top: var(--space-4);
-}
-
-.filter-row {
-  display: flex;
-  gap: var(--space-3);
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.table-card {
-  overflow: visible;
-}
-
 .payload-text {
   font-family: var(--font-mono);
   font-size: var(--text-xs);