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

2025-09-12 04:59:24 +08:00 · 2024-05-12 19:27:27 +08:00
parent c1c5f7f632
commit 861f6203cc
14 changed files with 614 additions and 551 deletions
--- a/src/components/GiTable/index.vue
+++ b/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;
--- a/src/styles/global.scss
+++ b/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;
  }
 }

--- a/src/views/monitor/log/index.vue
+++ b/src/views/monitor/log/index.vue
@@ -1,6 +1,12 @@
 <template>
-  <div class="gi_page">
-    <a-card title="系统日志" class="general-card">
+  <div class="table-page">
+    <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>

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

--- a/src/views/system/config/index.vue
+++ b/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>
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="gi_page">
-    <a-card title="部门管理" class="general-card">
+  <div class="table-page">
    <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>
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
-    <a-card title="字典管理" class="general-card">
+  <div class="table-page">
    <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" />
--- a/src/views/system/file/main/FileAside.vue
+++ b/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>
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="gi_page">
-    <a-card title="菜单管理" class="general-card">
+  <div class="table-page">
    <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>
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,9 +1,8 @@
 <template>
-  <div>
-    <div class="gi_page">
-      <a-card title="通知公告" class="general-card">
+  <div class="table-page">
    <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" />
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
-    <a-card title="角色管理" class="general-card">
+  <div class="table-page">
    <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>

--- a/src/views/system/storage/index.vue
+++ b/src/views/system/storage/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
-    <a-card title="存储管理" class="general-card">
+  <div class="table-page">
    <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>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,6 +1,12 @@
 <template>
-  <div class="gi_page">
-    <a-card title="用户管理" class="general-card">
+  <div class="table-page">
+    <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" />
--- a/src/views/tool/generator/index.vue
+++ b/src/views/tool/generator/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="gi_page">
-    <a-card title="代码生成" class="general-card">
+  <div class="table-page">
    <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" />