From 1e7748db64f6237e654e040492e7e62d82dc9e50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?=
 <colorfulsweet@icloud.com>
Date: Fri, 20 Mar 2026 22:16:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E6=BB=9A=E5=8A=A8=EF=BC=8C=E8=A1=A8=E5=A4=B4?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改 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>
---
 src/static/common.less          | 15 ++++++++++++++-
 src/views/api/Hitokoto.vue      |  2 +-
 src/views/api/Music.vue         |  2 +-
 src/views/api/PhotoWall.vue     |  2 +-
 src/views/api/SourceImage.vue   |  2 +-
 src/views/system/Article.vue    | 16 ++++++++--------
 src/views/system/SystemRole.vue |  2 +-
 src/views/system/SystemUser.vue |  4 ++--
 8 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/static/common.less b/src/static/common.less
index 5c1740b..41b414e 100644
--- a/src/static/common.less
+++ b/src/static/common.less
@@ -91,9 +91,21 @@ html, body, #app, .layout {
   }
 }
 
+/* ===== 页面布局（用于带分页的表格页面）===== */
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 /* ===== 表格美化 ===== */
 .table-container {
   position: relative;
+  flex: 1;
+  overflow: hidden;
+  margin-bottom: 12px;
+  display: flex;
+  flex-direction: column;
 
   .el-table {
     // CSS 变量覆盖：表头背景/文字色、行悬停色、边框色、正文色
@@ -103,7 +115,8 @@ html, body, #app, .layout {
     --el-table-border-color: var(--el-border-color-lighter);
     --el-table-text-color: var(--el-text-color-primary);
 
-    // 圆角/外边框/溢出裁剪无对应 CSS 变量，保留直接样式
+    // 固定高度，让表头固定，tbody滚动
+    flex: 1;
     border-radius: var(--el-border-radius-base);
     overflow: hidden;
     border: 1px solid var(--el-border-color-lighter);
diff --git a/src/views/api/Hitokoto.vue b/src/views/api/Hitokoto.vue
index 97aa81f..b503786 100644
--- a/src/views/api/Hitokoto.vue
+++ b/src/views/api/Hitokoto.vue
@@ -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" />
diff --git a/src/views/api/Music.vue b/src/views/api/Music.vue
index 02960d7..27d1d22 100644
--- a/src/views/api/Music.vue
+++ b/src/views/api/Music.vue
@@ -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" />
diff --git a/src/views/api/PhotoWall.vue b/src/views/api/PhotoWall.vue
index c6d20a7..ded1f37 100644
--- a/src/views/api/PhotoWall.vue
+++ b/src/views/api/PhotoWall.vue
@@ -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。
diff --git a/src/views/api/SourceImage.vue b/src/views/api/SourceImage.vue
index c761bdb..263b2d1 100644
--- a/src/views/api/SourceImage.vue
+++ b/src/views/api/SourceImage.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="page-wrapper">
   <el-alert type="info" show-icon :closable="false" >
     <template #title>上传要求</template>
     图片格式为{{allowUploadExt.join('、')}}，文件大小不超过10MB。
diff --git a/src/views/system/Article.vue b/src/views/system/Article.vue
index 86f866d..c442eaf 100644
--- a/src/views/system/Article.vue
+++ b/src/views/system/Article.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="page-wrapper">
   <div class="search-panel">
   <el-form inline :model="search">
     <el-form-item label="标题">
@@ -52,13 +52,13 @@
       <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
-  <el-row>
-    <el-col :span="4" style="height: 520px;overflow: auto;">
+  <el-row style="flex: 1; overflow: hidden;">
+    <el-col :span="4" style="height: 100%; overflow: auto;">
       <el-tree :props="treeProps" :load="loadTreeData" lazy highlight-current @node-click="articlePreview" />
     </el-col>
-    <el-col :span="20">
-      <div class="table-container">
-      <el-table :data="articleData" v-loading="loading" stripe @selection-change="dataSelect">
+    <el-col :span="20" style="height: 100%; display: flex; flex-direction: column;">
+      <div class="table-container" style="margin-bottom: 0;">
+      <el-table :data="articleData" v-loading="loading" stripe @selection-change="dataSelect" height="100%">
         <el-table-column type="selection" width="55" />
         <el-table-column prop="title" label="标题" />
         <el-table-column prop="path" label="路径" >
@@ -91,8 +91,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="page-container">
-        <el-pagination background 
+      <div class="page-container" style="margin-top: 12px; padding: 0;">
+        <el-pagination background
           :page-sizes="store.state.pageSizeOpts"
           :layout="store.state.pageLayout"
           :current-page="search.pageNum"
diff --git a/src/views/system/SystemRole.vue b/src/views/system/SystemRole.vue
index 3182ba2..ee0b66f 100644
--- a/src/views/system/SystemRole.vue
+++ b/src/views/system/SystemRole.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="page-wrapper">
     <el-form inline :model="search" @submit.prevent>
       <el-form-item label="角色名称/描述">
         <el-input v-model="search.name" />
diff --git a/src/views/system/SystemUser.vue b/src/views/system/SystemUser.vue
index 013e969..e203d71 100644
--- a/src/views/system/SystemUser.vue
+++ b/src/views/system/SystemUser.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="page-wrapper">
   <el-form inline :model="search" @submit.prevent>
     <el-form-item label="用户名/昵称">
       <el-input v-model="search.username" />
@@ -35,7 +35,7 @@
     </el-table>
   </div>
   <div class="page-container">
-    <el-pagination background 
+    <el-pagination background
       :page-sizes="store.state.pageSizeOpts"
       :layout="store.state.pageLayout"
       :current-page="search.pageNum"