From eaf99b5efa9a329eb23d5e108c9e07959abac643 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Thu, 23 Apr 2026 22:16:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=97=E8=A1=A8=E9=A1=B5=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=87=AA=E9=80=82=E5=BA=94=E5=89=A9=E4=BD=99=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=8C=E5=88=86=E9=A1=B5=E8=B4=B4=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增通用 .list-page 类：flex 列布局、height:100%
- 表格外包 .table-wrap（flex:1, min-height:0），el-table 设 height="100%"
- 分页 flex-shrink:0 贴底
- 材料/供应商/品牌/用户 四个列表页启用

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/styles/base.css          | 27 +++++++++++++++++++++++++++
 frontend/src/views/BrandManage.vue    |  6 ++++--
 frontend/src/views/FactoryManage.vue  |  6 ++++--
 frontend/src/views/MaterialManage.vue |  6 ++++--
 frontend/src/views/UserManage.vue     |  6 ++++--
 5 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 4ae14e9..b521dde 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -48,6 +48,33 @@ a {
   padding: 20px 24px 28px;
 }
 
+.list-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px 24px 16px;
+  min-height: 0;
+}
+
+.list-page .toolbar {
+  flex-shrink: 0;
+}
+
+.list-page .page-title {
+  flex-shrink: 0;
+}
+
+.list-page .table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.list-page .pagination {
+  flex-shrink: 0;
+  margin-top: 12px;
+}
+
 .page-title {
   font-size: 20px;
   font-weight: 600;
diff --git a/frontend/src/views/BrandManage.vue b/frontend/src/views/BrandManage.vue
index 5940993..e807633 100644
--- a/frontend/src/views/BrandManage.vue
+++ b/frontend/src/views/BrandManage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="list-page">
     <div class="page-title">品牌库</div>
     <div class="toolbar">
       <el-input
@@ -13,7 +13,8 @@
       <el-button type="primary" @click="onSearch">搜索</el-button>
       <el-button v-if="isAdmin" type="primary" @click="openCreate">新增品牌</el-button>
     </div>
-    <el-table v-loading="tableLoading" :data="brands" border :max-height="560">
+    <div class="table-wrap">
+    <el-table v-loading="tableLoading" :data="brands" border height="100%">
       <el-table-column prop="id" label="ID" width="80" />
       <el-table-column prop="name" label="品牌名称" min-width="180" />
       <el-table-column prop="description" label="品牌描述" min-width="240" show-overflow-tooltip />
@@ -32,6 +33,7 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
     <div class="pagination">
       <el-pagination
         background
diff --git a/frontend/src/views/FactoryManage.vue b/frontend/src/views/FactoryManage.vue
index 0a8f025..62c90ce 100644
--- a/frontend/src/views/FactoryManage.vue
+++ b/frontend/src/views/FactoryManage.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="page">
+  <div class="list-page">
     <div class="page-title">供应商库</div>
     <div class="toolbar">
       <el-button v-if="isAdmin" type="primary" @click="openCreate">新增供应商</el-button>
     </div>
-    <el-table v-loading="tableLoading" :data="factories" border :max-height="560">
+    <div class="table-wrap">
+    <el-table v-loading="tableLoading" :data="factories" border height="100%">
       <el-table-column prop="factory_name" label="供应商全称" />
       <el-table-column prop="short_name" label="供应商简称" />
       <el-table-column prop="dealer_name" label="经销商" />
@@ -28,6 +29,7 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
     <div class="pagination">
       <el-pagination
         background
diff --git a/frontend/src/views/MaterialManage.vue b/frontend/src/views/MaterialManage.vue
index b51dbc1..040f9fd 100644
--- a/frontend/src/views/MaterialManage.vue
+++ b/frontend/src/views/MaterialManage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="list-page">
     <div class="page-title">材料管理</div>
     <div class="toolbar">
       <el-input v-model="filters.name" placeholder="材料名称" style="width: 200px" />
@@ -32,7 +32,8 @@
       <div class="toolbar-spacer" />
     </div>
 
-    <el-table v-loading="tableLoading" :data="materials" border :max-height="560">
+    <div class="table-wrap">
+    <el-table v-loading="tableLoading" :data="materials" border height="100%">
       <el-table-column prop="name" label="材料名称" min-width="180" show-overflow-tooltip />
       <el-table-column prop="major_category_display" label="材料大类" width="100" />
       <el-table-column prop="material_category" label="细分种类" min-width="140" show-overflow-tooltip />
@@ -60,6 +61,7 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
     <div class="pagination">
       <el-pagination
         background
diff --git a/frontend/src/views/UserManage.vue b/frontend/src/views/UserManage.vue
index 241d7e1..84564ef 100644
--- a/frontend/src/views/UserManage.vue
+++ b/frontend/src/views/UserManage.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="page">
+  <div class="list-page">
     <div class="page-title">用户管理</div>
     <div class="toolbar">
       <el-button type="primary" @click="openCreate">新增用户</el-button>
     </div>
-    <el-table v-loading="tableLoading" :data="users" border :max-height="560">
+    <div class="table-wrap">
+    <el-table v-loading="tableLoading" :data="users" border height="100%">
       <el-table-column prop="username" label="用户名" />
       <el-table-column prop="role" label="角色">
         <template #default="scope">
@@ -24,6 +25,7 @@
         </template>
       </el-table-column>
     </el-table>
+    </div>
     <div class="pagination">
       <el-pagination
         background