From fa48577a74aaccd48dd9e38922c4ac161d26713a Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Tue, 1 Sep 2026 18:51:59 +0800
Subject: [PATCH] feat(web-admin): roll out viewport list height to more lists

Apply fill-viewport table height on demo product/order, bx mine, and db weighing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web-admin/src/views/bx/view/mine/index.vue | 36 +++++++++++------
 web-admin/src/views/db/weighing/index.vue  | 46 ++++++++++++++--------
 web-admin/src/views/demo/order/index.vue   | 37 +++++++++++------
 web-admin/src/views/demo/product/index.vue | 36 ++++++++++++-----
 4 files changed, 106 insertions(+), 49 deletions(-)

diff --git a/web-admin/src/views/bx/view/mine/index.vue b/web-admin/src/views/bx/view/mine/index.vue
index c3db6e396..37b475f07 100644
--- a/web-admin/src/views/bx/view/mine/index.vue
+++ b/web-admin/src/views/bx/view/mine/index.vue
@@ -104,8 +104,10 @@
       <div class="list-body list-wrap">
         <div ref="mineTableWrapRef" class="table-scroll bx-list-table-wrap">
           <ListTable
+            ref="mineTableRef"
             table-key="bx-view-mine"
             class="list-table"
+            :height="tableHeight"
             :data="pagedRows"
             v-loading="tableLoading"
             stripe
@@ -209,6 +211,8 @@
               </template>
             </el-table-column>
           </ListTable>
+        </div>
+        <div ref="mineBelowRef">
           <ListColumnStatsRow
             ref="mineStatsRowRef"
             storage-key="bx-view-mine-column-stats"
@@ -216,18 +220,18 @@
             :data="pagedRows"
             :table-wrap-el="mineTableWrapRef"
           />
-        </div>
 
-        <div class="pagination list-pager-bar">
-          <span class="list-range">{{ rangeText }}</span>
-          <el-pagination
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :total="filteredTotal"
-            layout="total, sizes, prev, pager, next"
-            :page-sizes="[10, 20, 100, 500]"
-            @size-change="onSizeChange"
-          />
+          <div class="pagination list-pager-bar">
+            <span class="list-range">{{ rangeText }}</span>
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :total="filteredTotal"
+              layout="total, sizes, prev, pager, next"
+              :page-sizes="[10, 20, 100, 500]"
+              @size-change="onSizeChange"
+            />
+          </div>
         </div>
       </div>
     </section>
@@ -376,6 +380,7 @@ import ListExportDropdown from '@/components/business/list-export-dropdown/index
   import type { StatsRowColumn } from '@/utils/list-column-stats'
   import { useDbInstantSearch } from '@/composables/useDbInstantSearch'
   import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+  import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import { computed, onActivated, onMounted, reactive, ref } from 'vue'
   import { ElMessage } from 'element-plus'
   import { Search, RefreshLeft } from '@element-plus/icons-vue'
@@ -467,8 +472,16 @@ const selectedRows = ref<any[]>([])
     usePersistedListColumns('bx-view-mine-list-columns', listColumnDefs)
 
   const mineTableWrapRef = ref<HTMLElement | null>(null)
+  const mineBelowRef = ref<HTMLElement | null>(null)
+  const mineTableRef = ref<any>(null)
   const mineStatsRowRef = ref<{ resync?: () => void } | null>(null)
 
+  const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+    tableEl: mineTableWrapRef,
+    pagerEl: mineBelowRef,
+    tableRef: mineTableRef
+  })
+
   const mineStatsRowColumns = computed((): StatsRowColumn[] => {
     const cols: StatsRowColumn[] = [
       { key: '__selection', interactive: false },
@@ -823,6 +836,7 @@ const selectedRows = ref<any[]>([])
 
   onActivated(() => {
     loadData()
+    recalcTableHeight()
   })
 </script>
 
diff --git a/web-admin/src/views/db/weighing/index.vue b/web-admin/src/views/db/weighing/index.vue
index 9abac8468..c15a9b75d 100644
--- a/web-admin/src/views/db/weighing/index.vue
+++ b/web-admin/src/views/db/weighing/index.vue
@@ -114,8 +114,11 @@
 
       <div class="list-body list-wrap">
         <div ref="weighingTableWrapRef" class="table-scroll bx-list-table-wrap">
-          <ListTable table-key="db-weighing"
+          <ListTable
+            ref="weighingTableRef"
+            table-key="db-weighing"
             class="list-table"
+            :height="tableHeight"
             :data="paginatedData"
             v-loading="loading"
             stripe
@@ -323,6 +326,8 @@
               </template>
             </el-table-column>
           </ListTable>
+        </div>
+        <div ref="weighingBelowRef">
           <ListColumnStatsRow
             ref="weighingStatsRowRef"
             storage-key="db-weighing-column-stats"
@@ -331,23 +336,23 @@
             :table-wrap-el="weighingTableWrapRef"
             :get-cell-value="getWeighingStatCellValue"
           />
-        </div>
 
-        <div class="pagination list-pager-bar">
-          <div class="list-pager-selected">
-            已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
+          <div class="pagination list-pager-bar">
+            <div class="list-pager-selected">
+              已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
+            </div>
+
+            <el-pagination
+              v-show="total > 0"
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :total="total"
+              :page-sizes="[10, 20, 100, 500]"
+              layout="total, sizes, prev, pager, next, jumper"
+              @current-change="handlePageChange"
+              @size-change="handleSizeChange"
+            />
           </div>
-
-          <el-pagination
-            v-show="total > 0"
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :total="total"
-            :page-sizes="[10, 20, 100, 500]"
-            layout="total, sizes, prev, pager, next, jumper"
-            @current-change="handlePageChange"
-            @size-change="handleSizeChange"
-          />
         </div>
       </div>
     </section>
@@ -549,6 +554,7 @@
   import ListColumnStatsRow from '@/components/business/list-column-stats-row/index.vue'
   import type { StatsRowColumn } from '@/utils/list-column-stats'
   import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+  import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import DbCrmProductSelect from '@/components/business/db/DbCrmProductSelect.vue'
   import DbRelatedViewDialog from '@/components/business/db/DbRelatedViewDialog.vue'
   import { buildWeighingRelatedSections } from '@/components/business/db/db-related-view'
@@ -612,8 +618,16 @@
 
 
   const weighingTableWrapRef = ref<HTMLElement | null>(null)
+  const weighingBelowRef = ref<HTMLElement | null>(null)
+  const weighingTableRef = ref<any>(null)
   const weighingStatsRowRef = ref<{ resync?: () => void } | null>(null)
 
+  const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+    tableEl: weighingTableWrapRef,
+    pagerEl: weighingBelowRef,
+    tableRef: weighingTableRef
+  })
+
   const weighingStatsRowColumns = computed((): StatsRowColumn[] => {
     const cols: StatsRowColumn[] = [
       { key: '__selection', interactive: false },
diff --git a/web-admin/src/views/demo/order/index.vue b/web-admin/src/views/demo/order/index.vue
index 5dadb53c7..f6eca3757 100644
--- a/web-admin/src/views/demo/order/index.vue
+++ b/web-admin/src/views/demo/order/index.vue
@@ -84,16 +84,19 @@
 
       <!-- 数据表格：单元格 flex 纵向居中，避免订单状态列 el-space 与其它列 el-tag 错位 -->
       <div class="list-body list-wrap">
-        <ListTable table-key="demo-order"
-          ref="orderListTableRef"
-          class="order-list-table list-table"
-          :data="tableData"
-          v-loading="loading"
-          stripe
-          row-key="id"
-          @expand-change="handleOrderRowExpand"
-          @selection-change="handleSelectionChange"
-        >
+        <div ref="orderTableWrapRef" class="list-table-viewport-anchor">
+          <ListTable
+            table-key="demo-order"
+            ref="orderListTableRef"
+            class="order-list-table list-table"
+            :height="tableHeight"
+            :data="tableData"
+            v-loading="loading"
+            stripe
+            row-key="id"
+            @expand-change="handleOrderRowExpand"
+            @selection-change="handleSelectionChange"
+          >
           <el-table-column type="selection" width="55" align="center" header-align="center" />
           <el-table-column
             type="index"
@@ -296,9 +299,10 @@
             </template>
           </el-table-column>
         </ListTable>
+        </div>
 
         <!-- 分页 -->
-        <div class="pagination list-pager-bar">
+        <div ref="orderPagerRef" class="pagination list-pager-bar">
           <el-pagination
             :current-page="pagination.page"
             :page-size="pagination.pageSize"
@@ -1685,12 +1689,14 @@
     onActivated,
     onDeactivated,
     onUnmounted,
-    watch
+    watch,
+    nextTick
   } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
   import { useListMediaActive } from '@/composables/useListMediaActive'
+  import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import {
     Check,
     Close,
@@ -1773,6 +1779,13 @@
     regionId: ''
   })
   const orderListTableRef = ref()
+  const orderTableWrapRef = ref<HTMLElement | null>(null)
+  const orderPagerRef = ref<HTMLElement | null>(null)
+  const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+    tableEl: orderTableWrapRef,
+    pagerEl: orderPagerRef,
+    tableRef: orderListTableRef
+  })
   const expandedOrderItemsMap = ref<Record<string, any[]>>({})
   const expandedRowLoadingMap = ref<Record<string, boolean>>({})
   const tableData = ref<any[]>([])
diff --git a/web-admin/src/views/demo/product/index.vue b/web-admin/src/views/demo/product/index.vue
index 50abe9cd9..807327e94 100644
--- a/web-admin/src/views/demo/product/index.vue
+++ b/web-admin/src/views/demo/product/index.vue
@@ -76,15 +76,19 @@
       </div>
 
       <div class="list-body list-wrap">
-        <ListTable table-key="demo-product"
-          class="list-table"
-          :data="tableData"
-          v-loading="loading"
-          stripe
-          row-key="id"
-          @selection-change="handleProductTableSelectionChange"
-          @row-dblclick="handleView"
-        >
+        <div ref="productTableWrapRef" class="list-table-viewport-anchor">
+          <ListTable
+            ref="productTableRef"
+            table-key="demo-product"
+            class="list-table"
+            :height="tableHeight"
+            :data="tableData"
+            v-loading="loading"
+            stripe
+            row-key="id"
+            @selection-change="handleProductTableSelectionChange"
+            @row-dblclick="handleView"
+          >
           <el-table-column type="selection" width="55" align="center" header-align="center" />
           <el-table-column
             type="index"
@@ -215,9 +219,10 @@
             </template>
           </el-table-column>
         </ListTable>
+        </div>
       </div>
 
-      <div class="pagination list-pager-bar">
+      <div ref="productPagerRef" class="pagination list-pager-bar">
           <div class="list-pager-selected">
             已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
           </div>
@@ -894,6 +899,7 @@
 <script setup lang="ts">
 import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
   import { useListMediaActive } from '@/composables/useListMediaActive'
+  import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import { ref, reactive, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
   import {
     ElMessage,
@@ -1070,6 +1076,15 @@ import ListToolbarEndActions from '@/components/business/list-toolbar-end-action
     }
   }
   const loading = ref(false)
+
+  const productTableWrapRef = ref<HTMLElement | null>(null)
+  const productPagerRef = ref<HTMLElement | null>(null)
+  const productTableRef = ref<any>(null)
+  const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+    tableEl: productTableWrapRef,
+    pagerEl: productPagerRef,
+    tableRef: productTableRef
+  })
   const { mediaActive } = useListMediaActive()
   const productFormContainerRef = ref<HTMLElement | null>(null)
 
@@ -1609,6 +1624,7 @@ import ListToolbarEndActions from '@/components/business/list-toolbar-end-action
       console.error('加载数据失败:', error)
     } finally {
       loading.value = false
+      nextTick(() => recalcTableHeight())
     }
   }