feat: 表格区域独立滚动,表头固定

- 修改 common.less:
  - 新增 .page-wrapper 类,使用 flex 纵向布局占满父容器
  - 修改 .table-container 为 flex 布局,让表格自适应高度
  - .el-table 使用 flex:1 实现内容区域滚动、表头固定

- 7个列表页面添加 page-wrapper 类:
  - SystemUser.vue, SystemRole.vue
  - Hitokoto.vue, PhotoWall.vue, Music.vue, SourceImage.vue
  - Article.vue(特殊处理:左右分栏布局适配)

现在设置 100 条数据时,表格内容独立滚动,分页始终可见,不会触发整页滚动。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-20 22:16:49 +08:00
co-authored by Claude Opus 4.6
parent 5b9dc0ccb9
commit 1e7748db64
8 changed files with 29 additions and 16 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="page-wrapper">
<el-form inline :model="search">
<el-form-item label="内容">
<el-input v-model="search.content" />
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="page-wrapper">
<el-form inline :model="search">
<el-form-item label="名称">
<el-input v-model="search.name" />
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="page-wrapper">
<el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px" >
<template #title>上传要求</template>
图片格式为{{allowUploadExt.join('、')}}文件大小不超过10MB
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="page-wrapper">
<el-alert type="info" show-icon :closable="false" >
<template #title>上传要求</template>
图片格式为{{allowUploadExt.join('、')}}文件大小不超过10MB