From 8e7ba71826c7a1a1009df95eb71945c68169da7b Mon Sep 17 00:00:00 2001
From: TermiNexus <wyt18222152539wyt@163.com>
Date: Tue, 4 Aug 2026 03:19:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=A0=8F=E7=9A=84=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CrudTable.vue          | 173 ++++++++++++++------------
 src/styles/global.scss                |  11 ++
 src/views/company/RoleDetail.vue      |   2 +
 src/views/company/TenantDetail.vue    |   1 +
 src/views/company/WorkgroupDetail.vue |   1 +
 src/views/system/RoleDetail.vue       |   2 +
 src/views/system/UserDetail.vue       |   2 +
 7 files changed, 114 insertions(+), 78 deletions(-)

diff --git a/src/components/CrudTable.vue b/src/components/CrudTable.vue
index c237795..80ab8bc 100644
--- a/src/components/CrudTable.vue
+++ b/src/components/CrudTable.vue
@@ -170,92 +170,94 @@ function renderUuid(value: unknown): string {
         </div>
       </template>
 
-      <vxe-table
-        ref="xTableRef"
-        :data="dataList"
-        v-loading="loading"
-        border
-        stripe
-        round
-        :height="props.stretch ? '100%' : 'auto'"
-        :max-height="props.maxHeight"
-        :row-config="{ isHover: true }"
-        :column-config="{ resizable: true }"
-        :checkbox-config="{ range: true }"
-        @row-click="(params: { row: T }) => handleRowClick(params.row)"
-        @checkbox-change="onCheckboxChange"
-        @checkbox-all="onCheckboxChange"
-      >
-        <!-- 复选列 -->
-        <vxe-column v-if="selectable" type="checkbox" width="50" />
-        <vxe-column type="seq" width="60" title="#" />
-
-        <!-- 数据列：根据 type/statusMap/entityPicker 分支渲染 -->
-        <!-- 列宽对齐原生 TableEngine：无 width 时弹性填充，minWidth 默认 200 -->
-        <vxe-column
-          v-for="col in tableColumns"
-          :key="col.field"
-          :field="col.field"
-          :title="col.title"
-          :width="col.width"
-          :min-width="col.minWidth ?? 200"
-          :fixed="col.fixed"
-          :sortable="col.sortable"
+      <div class="table-body">
+        <vxe-table
+          ref="xTableRef"
+          :data="dataList"
+          v-loading="loading"
+          border
+          stripe
+          round
+          :height="props.stretch ? '100%' : 'auto'"
+          :max-height="props.maxHeight"
+          :row-config="{ isHover: true }"
+          :column-config="{ resizable: true }"
+          :checkbox-config="{ range: true }"
+          @row-click="(params: { row: T }) => handleRowClick(params.row)"
+          @checkbox-change="onCheckboxChange"
+          @checkbox-all="onCheckboxChange"
         >
-          <template #default="{ row }">
-            <!-- entityPicker：显示回显标签 -->
-            <span v-if="col.type === 'entityPicker'">
-              {{ entityLabel(row as Record<string, unknown>, col.field) }}
-            </span>
-            <!-- status：el-tag 渲染 -->
-            <el-tag
-              v-else-if="col.type === 'status' && col.statusMap"
-              :type="col.statusMap[String((row as Record<string, unknown>)[col.field])]?.type || 'info'"
-              :color="col.statusMap[String((row as Record<string, unknown>)[col.field])]?.color"
-              size="small"
-            >
-              {{ col.statusMap[String((row as Record<string, unknown>)[col.field])]?.text || (row as Record<string, unknown>)[col.field] }}
-            </el-tag>
-            <!-- tags：标签组渲染 -->
-            <template v-else-if="col.type === 'tags'">
+          <!-- 复选列 -->
+          <vxe-column v-if="selectable" type="checkbox" width="50" />
+          <vxe-column type="seq" width="60" title="#" />
+
+          <!-- 数据列：根据 type/statusMap/entityPicker 分支渲染 -->
+          <!-- 列宽对齐原生 TableEngine：无 width 时弹性填充，minWidth 默认 200 -->
+          <vxe-column
+            v-for="col in tableColumns"
+            :key="col.field"
+            :field="col.field"
+            :title="col.title"
+            :width="col.width"
+            :min-width="col.minWidth ?? 200"
+            :fixed="col.fixed"
+            :sortable="col.sortable"
+          >
+            <template #default="{ row }">
+              <!-- entityPicker：显示回显标签 -->
+              <span v-if="col.type === 'entityPicker'">
+                {{ entityLabel(row as Record<string, unknown>, col.field) }}
+              </span>
+              <!-- status：el-tag 渲染 -->
               <el-tag
-                v-for="tag in renderTags((row as Record<string, unknown>)[col.field], col.tagsSeparator)"
-                :key="tag"
+                v-else-if="col.type === 'status' && col.statusMap"
+                :type="col.statusMap[String((row as Record<string, unknown>)[col.field])]?.type || 'info'"
+                :color="col.statusMap[String((row as Record<string, unknown>)[col.field])]?.color"
                 size="small"
-                style="margin-right: 4px"
               >
-                {{ tag }}
+                {{ col.statusMap[String((row as Record<string, unknown>)[col.field])]?.text || (row as Record<string, unknown>)[col.field] }}
               </el-tag>
+              <!-- tags：标签组渲染 -->
+              <template v-else-if="col.type === 'tags'">
+                <el-tag
+                  v-for="tag in renderTags((row as Record<string, unknown>)[col.field], col.tagsSeparator)"
+                  :key="tag"
+                  size="small"
+                  style="margin-right: 4px"
+                >
+                  {{ tag }}
+                </el-tag>
+              </template>
+              <!-- uuid：前 8 位 + ... -->
+              <span v-else-if="col.type === 'uuid'">{{ renderUuid((row as Record<string, unknown>)[col.field]) }}</span>
+              <!-- 默认：原值 -->
+              <span v-else>{{ (row as Record<string, unknown>)[col.field] }}</span>
             </template>
-            <!-- uuid：前 8 位 + ... -->
-            <span v-else-if="col.type === 'uuid'">{{ renderUuid((row as Record<string, unknown>)[col.field]) }}</span>
-            <!-- 默认：原值 -->
-            <span v-else>{{ (row as Record<string, unknown>)[col.field] }}</span>
-          </template>
-        </vxe-column>
+          </vxe-column>
 
-        <!-- 操作列 -->
-        <vxe-column title="操作" width="200" fixed="right">
-          <template #default="{ row }">
-            <el-button v-if="onView" link type="primary" @click="handleView(row as T)">查看</el-button>
-            <el-button link type="primary" @click="handleEdit(row as T)">编辑</el-button>
-            <el-button link type="danger" @click="handleDelete(row as T)">删除</el-button>
-          </template>
-        </vxe-column>
-      </vxe-table>
+          <!-- 操作列 -->
+          <vxe-column title="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <el-button v-if="onView" link type="primary" @click="handleView(row as T)">查看</el-button>
+              <el-button link type="primary" @click="handleEdit(row as T)">编辑</el-button>
+              <el-button link type="danger" @click="handleDelete(row as T)">删除</el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
 
-      <!-- 分页 -->
-      <div v-if="pageable" class="pagination">
-        <el-pagination
-          v-model:current-page="currentPage"
-          v-model:page-size="pageSize"
-          :total="total"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          background
-          @current-change="handlePageChange"
-          @size-change="handleSizeChange"
-        />
+        <!-- 分页 -->
+        <div v-if="pageable" class="pagination">
+          <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :total="total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            background
+            @current-change="handlePageChange"
+            @size-change="handleSizeChange"
+          />
+        </div>
       </div>
     </el-card>
 
@@ -401,6 +403,21 @@ function renderUuid(value: unknown): string {
   }
 }
 
+// 表格主体区域：stretch 模式下占满卡片剩余空间（分页之后的全部高度），
+// 行数不足时表格自动收缩，不再被分页组件挤高产生页面级滚动栏
+.table-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+
+  // 非 stretch（详情页嵌套）场景不撑满，随内容自适应高度
+  .crud-table:not(.crud-table-stretch) & {
+    flex: none;
+    min-height: auto;
+  }
+}
+
 .crud-table-stretch .search-bar {
   flex-shrink: 0;
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 63acb89..4eaec5b 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -50,6 +50,17 @@ a {
   background: #909399;
 }
 
+/* 深色主题滚动条：深灰 thumb，hover 提亮 */
+html.dark {
+  ::-webkit-scrollbar-thumb {
+    background: #4c4d4f;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #636466;
+  }
+}
+
 /* ===== 主题 CSS 变量（兼容旧 GERP 主题系统） ===== */
 :root {
   --gerp-primary: #409eff;
diff --git a/src/views/company/RoleDetail.vue b/src/views/company/RoleDetail.vue
index 657c8bd..52563ad 100644
--- a/src/views/company/RoleDetail.vue
+++ b/src/views/company/RoleDetail.vue
@@ -228,6 +228,7 @@ onMounted(loadRole)
         :query="{ RoleUUID: roleUUID }"
         :selectable="true"
         :pageable="true"
+        :max-height="400"
         pk-field="RolePermUUID"
       />
     </el-card>
@@ -240,6 +241,7 @@ onMounted(loadRole)
         :query="{ RoleUUID: roleUUID }"
         :selectable="true"
         :pageable="true"
+        :max-height="400"
         pk-field="UserRoleUUID"
       />
     </el-card>
diff --git a/src/views/company/TenantDetail.vue b/src/views/company/TenantDetail.vue
index 5683459..227ef58 100644
--- a/src/views/company/TenantDetail.vue
+++ b/src/views/company/TenantDetail.vue
@@ -200,6 +200,7 @@ onMounted(async () => {
         :pk-field="'CompanyUUID'"
         selectable
         pageable
+        :max-height="400"
         :on-view="goCompanyDetail"
       />
     </el-card>
diff --git a/src/views/company/WorkgroupDetail.vue b/src/views/company/WorkgroupDetail.vue
index 9d5dd12..2af0b79 100644
--- a/src/views/company/WorkgroupDetail.vue
+++ b/src/views/company/WorkgroupDetail.vue
@@ -179,6 +179,7 @@ onMounted(async () => {
         :pk-field="'WorkgroupRoleUUID'"
         selectable
         pageable
+        :max-height="400"
         :on-view="goRoleDetail"
       />
     </el-card>
diff --git a/src/views/system/RoleDetail.vue b/src/views/system/RoleDetail.vue
index 24cbf11..a0e7bd8 100644
--- a/src/views/system/RoleDetail.vue
+++ b/src/views/system/RoleDetail.vue
@@ -233,6 +233,7 @@ onMounted(async () => {
         :pk-field="'UserRoleUUID'"
         selectable
         pageable
+        :max-height="400"
         :on-view="goUserDetail"
       />
     </el-card>
@@ -253,6 +254,7 @@ onMounted(async () => {
         :pk-field="'RolePermUUID'"
         selectable
         pageable
+        :max-height="400"
       />
       <div class="perm-hint">
         <el-icon><InfoFilled /></el-icon>
diff --git a/src/views/system/UserDetail.vue b/src/views/system/UserDetail.vue
index 2733f93..828bb69 100644
--- a/src/views/system/UserDetail.vue
+++ b/src/views/system/UserDetail.vue
@@ -278,6 +278,7 @@ onMounted(async () => {
         :pk-field="'UserRoleUUID'"
         selectable
         pageable
+        :max-height="400"
         :on-view="goRoleDetail"
       />
     </el-card>
@@ -298,6 +299,7 @@ onMounted(async () => {
         :pk-field="'UserDeptUUID'"
         selectable
         pageable
+        :max-height="400"
         :on-view="goDeptDetail"
       />
     </el-card>