From 2899e13ecde2f575475055712472fdf436b1833c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E5=87=A1?= <2508779859@qq.com>
Date: Tue, 22 Apr 2025 23:02:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20pageContent=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E5=88=86=E9=A1=B5=E6=8C=89=E9=92=AE=E5=9B=BA?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CURD/PageContent.vue | 16 +++++++++++-----
 src/components/CURD/PageSearch.vue  |  4 ++--
 src/views/demo/curd/index.vue       |  2 +-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 68e01afb..9b421e24 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -1,5 +1,7 @@
 <template>
-  <el-card shadow="never">
+  <div
+    class="rounded bg-[var(--el-bg-color)] border border-[var(--el-border-color)] p-5 h-full md:flex flex-1 flex-col md:overflow-auto"
+  >
     <!-- 表格工具栏 -->
     <div class="flex flex-col md:flex-row justify-between gap-y-2.5 mb-2.5">
       <!-- 左侧工具栏 -->
@@ -37,6 +39,7 @@
         </template>
       </div>
     </div>
+
     <!-- 列表 -->
     <el-table
       ref="tableRef"
@@ -44,6 +47,7 @@
       v-bind="contentConfig.table"
       :data="pageData"
       :row-key="pk"
+      class="flex-1"
       @selection-change="handleSelectionChange"
       @filter-change="handleFilterChange"
     >
@@ -180,16 +184,18 @@
         </el-table-column>
       </template>
     </el-table>
+
     <!-- 分页 -->
-    <template v-if="showPagination">
-      <el-scrollbar :class="['mt-3', { 'flex-x-end': contentConfig?.pagePosition === 'right' }]">
+    <div v-if="showPagination" class="mt-4">
+      <el-scrollbar :class="['h-8!', { 'flex-x-end': contentConfig?.pagePosition === 'right' }]">
         <el-pagination
           v-bind="pagination"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
       </el-scrollbar>
-    </template>
+    </div>
+
     <!-- 导出弹窗 -->
     <el-dialog
       v-model="exportsModalVisible"
@@ -314,7 +320,7 @@
         </div>
       </template>
     </el-dialog>
-  </el-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/CURD/PageSearch.vue b/src/components/CURD/PageSearch.vue
index 91499213..4743565a 100644
--- a/src/components/CURD/PageSearch.vue
+++ b/src/components/CURD/PageSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="visible" v-bind="{ style: { 'margin-bottom': '12px' }, ...cardAttrs }">
+  <div v-show="visible">
     <el-card v-bind="cardAttrs">
       <el-form ref="queryFormRef" :model="queryParams" v-bind="formAttrs" :class="isGrid">
         <template v-for="(item, index) in formItems" :key="item.prop">
@@ -105,7 +105,7 @@ const showNumber = computed(() =>
 );
 // 卡片组件自定义属性（阴影、自定义边距样式等）
 const cardAttrs = computed<IObject>(() => {
-  return { shadow: "never", ...props.searchConfig?.cardAttrs };
+  return { shadow: "never", style: { "margin-bottom": "12px" }, ...props.searchConfig?.cardAttrs };
 });
 // 表单组件自定义属性（label位置、宽度、对齐方式等）
 const formAttrs = computed<IForm>(() => {
diff --git a/src/views/demo/curd/index.vue b/src/views/demo/curd/index.vue
index cc35325b..2201d158 100644
--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container h-full flex flex-1 flex-col">
     <div class="flex-x-between mb-10">
       <el-link
         href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/curd/index.vue"