feat(web-admin): use viewport table height on demo unit list

Pilot the fill-viewport list scroll pattern on the standard list template page.

Co-authored-by: Cursor <cursoragent@cursor.com>

web-admin/src/views/demo/unit/index.vue

@@ -52,15 +52,19 @@
       </div>
 
       <div class="list-body list-wrap">
-        <ListTable table-key="demo-unit"
-          class="list-table"
-          :data="tableData"
-          v-loading="loading"
-          stripe
-          row-key="id"
-          @selection-change="handleSelectionChange"
-          @row-dblclick="handleView"
-        >
+        <div ref="unitTableWrapRef" class="list-table-viewport-anchor">
+          <ListTable
+            ref="unitTableRef"
+            table-key="demo-unit"
+            class="list-table"
+            :height="tableHeight"
+            :data="tableData"
+            v-loading="loading"
+            stripe
+            row-key="id"
+            @selection-change="handleSelectionChange"
+            @row-dblclick="handleView"
+          >
           <el-table-column type="selection" width="55" align="center" header-align="center" />
           <el-table-column
             type="index"
@@ -124,8 +128,9 @@
               </div>
             </template>
           </el-table-column>
-        </ListTable>
-        <div class="pagination list-pager-bar">
+          </ListTable>
+        </div>
+        <div ref="unitPagerRef" class="pagination list-pager-bar">
           <div class="list-pager-selected">
             已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
           </div>
@@ -198,7 +203,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted, computed } from 'vue'
+  import { ref, reactive, onMounted, computed, nextTick } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import {
     Plus,
@@ -214,6 +219,7 @@
   import SystemViewDialog from '@/components/business/system-view-dialog/index.vue'
   import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
   import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+  import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
   import {
     fetchItemUnitList,
@@ -237,6 +243,15 @@
     resetToDefault
   } = usePersistedListColumns('demo-unit-list-columns', listColumnDefs)
 
+  const unitTableWrapRef = ref<HTMLElement | null>(null)
+  const unitPagerRef = ref<HTMLElement | null>(null)
+  const unitTableRef = ref<any>(null)
+  const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+    tableEl: unitTableWrapRef,
+    pagerEl: unitPagerRef,
+    tableRef: unitTableRef
+  })
+
   const searchForm = reactive<{ keyword: string }>({ keyword: '' })
   const tableData = ref<Api.ItemUnit.ItemUnitItem[]>([])
   const selectedRows = ref<Api.ItemUnit.ItemUnitItem[]>([])
@@ -294,6 +309,7 @@
       pagination.total = res.total ?? 0
     } finally {
       loading.value = false
+      nextTick(() => recalcTableHeight())
     }
   }