style: 优化表格页面样式及表格纵向滚动条

src/components/GiTable/index.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }">
+    <a-row v-if="props.title" justify="space-between" align="center" class="gi-table__header">
+      <a-space wrap>
+        <slot name="custom-title">
+          <div class="gi-table__header-title">{{ props.title }}</div>
+        </slot>
+      </a-space>
+    </a-row>
     <a-row justify="space-between" align="center" class="gi-table__toolbar">
       <a-space wrap class="gi-table__toolbar-left" :size="[8, 8]">
         <slot name="custom-left"></slot>
@@ -84,6 +91,7 @@ import { VueDraggable } from 'vue-draggable-plus'
 
 defineOptions({ name: 'GiTable', inheritAttrs: false })
 const props = withDefaults(defineProps<Props>(), {
+  title: '',
   disabledTools: () => [], // 禁止显示的工具
   disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
 })
@@ -96,6 +104,7 @@ const attrs = useAttrs()
 const slots = useSlots()
 
 interface Props {
+  title?: string
   disabledTools?: string[]
   disabledColumnKeys?: string[]
 }
@@ -201,6 +210,15 @@ defineExpose({ tableRef })
     max-height: 100%;
     overflow: hidden;
   }
+  &__header {
+    padding: 0 0 10px;
+    &-title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
+  }
   &__toolbar {
     :deep(.arco-form-item-layout-inline) {
       margin-right: 8px;

src/styles/global.scss

@@ -181,12 +181,7 @@
   }
 }
 
-.gi_table_box {
+// 普通页面（使用场景，页面内容超出高度会自动滚动）
-  max-height: 100%;
-  overflow: hidden;
-}
-
-// 使用场景，页面内容超出高度会自动滚动
 .gi_page {
   flex: 1;
   padding: $margin;
@@ -194,6 +189,44 @@
   overflow-y: auto;
 }
 
+// 表格页面
+.table-page {
+  height: 100%;
+  overflow: hidden;
+  margin: $margin;
+  background: var(--color-bg-1);
+  padding: $padding;
+  padding-bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .header {
+    padding: 0 0 10px;
+    .title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
+  }
+  &:after {
+    content: '';
+    height: 20px;
+    font-size: 12px;
+    color: var(--color-text-3);
+    margin-top: 12px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.gi_table_box {
+  max-height: 100%;
+  overflow: hidden;
+}
+
 .gi_card_title {
   .arco-card-header-title::before {
     content: '';
@@ -263,11 +296,17 @@
   overflow-y: auto;
   & > .arco-card-header {
     height: auto;
-    padding: 20px;
+    padding: $padding;
     border: none;
+    .arco-card-header-title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
   }
   & > .arco-card-body {
-    padding: 0 20px 20px 20px;
+    padding: 0 $padding $padding $padding;
   }
 }
 

src/views/monitor/log/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="系统日志" class="general-card">
+    <a-row justify="space-between" align="center" class="header">
+      <a-space wrap>
+        <slot name="custom-title">
+          <div class="title">系统日志</div>
+        </slot>
+      </a-space>
+    </a-row>
     <a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change">
       <a-tab-pane key="1" title="登录日志" />
       <a-tab-pane key="2" title="操作日志" />
@@ -8,7 +14,6 @@
     <keep-alive>
       <component :is="PaneMap[activeKey]" />
     </keep-alive>
-    </a-card>
   </div>
 </template>
 

src/views/monitor/online/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="在线用户" class="general-card">
     <GiTable
       row-key="id"
+      title="在线用户"
       :data="dataList"
       :columns="columns"
       :loading="loading"
@@ -39,7 +39,6 @@
         </a-space>
       </template>
     </GiTable>
-    </a-card>
   </div>
 </template>
 

src/views/system/config/index.vue

@@ -6,7 +6,7 @@
           <BasicSetting />
         </a-tab-pane>
         <a-tab-pane key="2" title="邮件配置(暂未开放)" disabled></a-tab-pane>
-        <a-tab-pane key="3" title="安全设置">
+        <a-tab-pane key="3" title="安全配置">
           <SecuritySetting />
         </a-tab-pane>
       </a-tabs>

src/views/system/dept/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="部门管理" class="general-card">
     <GiTable
       ref="tableRef"
       row-key="id"
+      title="部门管理"
       :data="dataList"
       :columns="columns"
       :loading="loading"
@@ -67,7 +67,6 @@
         </a-space>
       </template>
     </GiTable>
-    </a-card>
 
     <DeptAddModal ref="DeptAddModalRef" @save-success="search" />
   </div>

src/views/system/dict/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="字典管理" class="general-card">
     <GiTable
       row-key="id"
+      title="字典管理"
       :data="dataList"
       :columns="columns"
       :loading="loading"
@@ -44,7 +44,6 @@
         </a-space>
       </template>
     </GiTable>
-    </a-card>
 
     <DictAddModal ref="DictAddModalRef" @save-success="search" />
     <DictItemModal ref="DictItemModalRef" />

src/views/system/file/main/FileAside.vue

@@ -55,6 +55,12 @@ const onClickItem = (item: FileTypeListItem) => {
     margin: 0 16px;
     padding-left: 0;
     padding-right: 0;
+    .arco-card-header-title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
   }
 }
 </style>

src/views/system/menu/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="菜单管理" class="general-card">
     <GiTable
       ref="tableRef"
+      title="菜单管理"
       row-key="id"
       :data="dataList"
       :columns="columns"
       :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1700, maxHeight: '81vh' }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1700 }"
       :pagination="false"
       :disabled-column-keys="['title']"
       @refresh="search"
@@ -78,7 +78,6 @@
         </a-space>
       </template>
     </GiTable>
-    </a-card>
 
     <MenuAddModal ref="MenuAddModalRef" :menus="dataList" @save-success="search" />
   </div>

src/views/system/notice/index.vue

@@ -1,9 +1,8 @@
 <template>
-  <div>
+  <div class="table-page">
-    <div class="gi_page">
-      <a-card title="通知公告" class="general-card">
     <GiTable
       row-key="id"
+      title="通知公告"
       :data="dataList"
       :columns="columns"
       :loading="loading"
@@ -49,8 +48,6 @@
         </a-space>
       </template>
     </GiTable>
-      </a-card>
-    </div>
 
     <NoticeAddModal ref="NoticeAddModalRef" @save-success="search" />
     <NoticeDetailModal ref="NoticeDetailModalRef" />

src/views/system/role/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="角色管理" class="general-card">
     <GiTable
       row-key="id"
+      title="角色管理"
       :data="dataList"
       :columns="columns"
       :loading="loading"
@@ -52,7 +52,6 @@
 
     <RoleAddModal ref="RoleAddModalRef" @save-success="search" />
     <RoleDetailDrawer ref="RoleDetailDrawerRef" />
-    </a-card>
   </div>
 </template>
 

src/views/system/storage/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="存储管理" class="general-card">
     <GiTable
       row-key="id"
+      title="存储管理"
       :data="dataList"
       :columns="columns"
       :loading="loading"
@@ -61,7 +61,6 @@
         </a-space>
       </template>
     </GiTable>
-    </a-card>
 
     <StorageAddModal ref="StorageAddModalRef" @save-success="search" />
   </div>

src/views/system/user/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="用户管理" class="general-card">
+    <a-row justify="space-between" align="center" class="header">
+      <a-space wrap>
+        <slot name="custom-title">
+          <div class="title">用户管理</div>
+        </slot>
+      </a-space>
+    </a-row>
     <a-row :gutter="16">
       <a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
         <a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
@@ -97,7 +103,6 @@
         </GiTable>
       </a-col>
     </a-row>
-    </a-card>
 
     <UserAddModal ref="UserAddModalRef" @save-success="search" />
     <UserDetailDrawer ref="UserDetailDrawerRef" />

src/views/tool/generator/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
+  <div class="table-page">
-    <a-card title="代码生成" class="general-card">
     <GiTable
       row-key="tableName"
+      title="代码生成"
       :data="dataList"
       :columns="columns"
       :loading="loading"
@@ -31,7 +31,6 @@
         </a-space>
       </template>
     </GiTable>
-    </a-card>
 
     <GenConfigDrawer ref="GenConfigDrawerRef" @save-success="search" />
     <GenPreviewModal ref="GenPreviewModalRef" @generate="onGenerate" />