完善全量数据列表

src/components/manage/asset/FullAssetListPanel.vue

@@ -57,7 +57,7 @@
 
       <div v-if="listLoading" class="pin-table__empty">加载中…</div>
       <div v-else class="pin-table-wrap">
-        <div class="pin-table-scroll" :class="{ 'pin-table-scroll--visible-scrollbar': showScrollbar }">
+        <div ref="headScrollRef" class="pin-table-head-scroll">
           <div class="pin-table">
             <div class="pin-table__head">
               <div
@@ -83,6 +83,14 @@
                 {{ col.label }}
               </div>
             </div>
+          </div>
+        </div>
+        <div
+          class="pin-table-scroll pin-table-scroll--body"
+          :class="{ 'pin-table-scroll--visible-scrollbar': showScrollbar }"
+          @scroll="syncTableScroll"
+        >
+          <div class="pin-table">
             <div v-for="item in pagedAssets" :key="item.id" class="pin-table__row">
               <div
                 v-if="selectable"
@@ -193,6 +201,15 @@ const filterCert = ref('全部');
 const filterFillMonth = ref('全部');
 const currentPage = ref(1);
 const selectAllRef = ref(null);
+const headScrollRef = ref(null);
+
+const syncTableScroll = (event) => {
+  const head = headScrollRef.value;
+  const scrollLeft = event.target.scrollLeft;
+  if (head && head.scrollLeft !== scrollLeft) {
+    head.scrollLeft = scrollLeft;
+  }
+};
 
 const allAssets = computed(() => enterpriseStore.approvedList.map(normalizeAsset));
 
@@ -433,12 +450,25 @@ watch(totalPages, (pages) => {
   width: 100%;
   border: 1px solid var(--color-divider);
   border-radius: var(--radius-sm);
+  display: flex;
+  flex-direction: column;
+}
+
+.pin-table-head-scroll {
+  width: 100%;
   overflow: hidden;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--color-divider);
+  /* 与 body 区 scrollbar-gutter 对齐，避免表头/数据列错位 */
+  padding-right: 8px;
+  box-sizing: border-box;
 }
 
-.pin-table-scroll {
+.pin-table-scroll--body {
   width: 100%;
-  overflow-x: auto;
+  max-height: min(720px, calc(100vh - 280px));
+  overflow: auto;
+  scrollbar-gutter: stable;
 }
 
 .pin-table-scroll--visible-scrollbar {
@@ -471,10 +501,6 @@ watch(totalPages, (pages) => {
   padding: 8px 6px;
 }
 
-.pin-table__cell--head.pin-table__cell--select {
-  z-index: 6;
-}
-
 .pin-table__row .pin-table__cell--select {
   z-index: 4;
 }
@@ -532,11 +558,11 @@ watch(totalPages, (pages) => {
 .pin-table__cell--head {
   align-items: center;
   white-space: nowrap;
-  overflow: hidden;
+  overflow: visible;
   text-overflow: ellipsis;
   min-height: 42px;
+  height: 42px;
   background: var(--color-table-head);
-  z-index: 2;
 }
 
 .pin-table__row .pin-table__cell:not(.pin-table__cell--head) {
@@ -561,6 +587,10 @@ watch(totalPages, (pages) => {
   z-index: 5;
 }
 
+.pin-table__cell--head.pin-table__cell--select {
+  z-index: 6;
+}
+
 .pin-table__cell--left-last {
   box-shadow: 6px 0 8px -6px rgba(17, 17, 17, 0.12);
 }