修复了滚动栏的深色主题适配

2026-08-04 03:19:10 +08:00
1 parent 39debab2b3
commit 8e7ba71826
@@ -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;
 }
@@ -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;
@@ -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>
@@ -200,6 +200,7 @@ onMounted(async () => {
        :pk-field="'CompanyUUID'"
        selectable
        pageable
+        :max-height="400"
        :on-view="goCompanyDetail"
      />
    </el-card>
@@ -179,6 +179,7 @@ onMounted(async () => {
        :pk-field="'WorkgroupRoleUUID'"
        selectable
        pageable
+        :max-height="400"
        :on-view="goRoleDetail"
      />
    </el-card>
@@ -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>
@@ -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>