更新

admin/src/views/article/lists/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="article-lists">
-        <el-card class="!border-none" shadow="never">
+    <div>
+        <admin-page-filter-panel>
             <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                 <el-form-item class="w-[280px]" label="文章标题">
                     <el-input
@@ -33,24 +33,25 @@
                     <el-button @click="resetParams">重置</el-button>
                 </el-form-item>
             </el-form>
-        </el-card>
-        <el-card class="!border-none mt-4" shadow="never">
-            <div>
+        </admin-page-filter-panel>
+
+        <admin-page-data-panel v-loading="pager.loading">
+            <template #toolbar>
                 <router-link
                     v-perms="['article.article/add', 'article.article/add:edit']"
                     :to="{
                         path: getRoutePath('article.article/add:edit')
                     }"
                 >
-                    <el-button type="primary" class="mb-4">
+                    <el-button type="primary">
                         <template #icon>
                             <icon name="el-icon-Plus" />
                         </template>
                         发布文章
                     </el-button>
                 </router-link>
-            </div>
-            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
+            </template>
+            <el-table size="large" :data="pager.lists">
                 <el-table-column label="ID" prop="id" min-width="80" />
                 <el-table-column label="封面" min-width="100">
                     <template #default="{ row }">
@@ -116,10 +117,10 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <div class="flex justify-end mt-4">
+            <template #footer>
                 <pagination v-model="pager" @change="getLists" />
-            </div>
-        </el-card>
+            </template>
+        </admin-page-data-panel>
     </div>
 </template>
 <script lang="ts" setup name="articleLists">