From 7f85c6438a731290f480fbfe570f8775eda08db4 Mon Sep 17 00:00:00 2001
From: "yinjun.chen1" <yinjun.chen1@gientech.com>
Date: Mon, 21 Sep 2026 16:39:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=85=E5=88=97=E8=A1=A8=E8=99=9A=E6=8B=9F?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=EF=BC=9A=E4=BB=85=E6=B8=B2=E6=9F=93=E5=8F=AF?=
 =?UTF-8?q?=E8=A7=86=E7=AA=97=E5=8F=A3=E8=A1=8C+=E5=8D=A0=E4=BD=8D?=
 =?UTF-8?q?=E8=A1=8C=EF=BC=8C=E6=A1=8C=E9=9D=A2=E7=AB=AF=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E9=99=90=E9=AB=98=E5=86=85=E9=83=A8=E6=BB=9A=E5=8A=A8=EF=BC=8C?=
 =?UTF-8?q?=E8=B6=85=E5=A4=A7=E5=88=97=E8=A1=A8=E4=B8=8D=E5=86=8D=E5=85=A8?=
 =?UTF-8?q?=E9=87=8F=E6=B8=B2=E6=9F=93=20DOM?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/SearchView.vue | 75 +++++++++++++++++++++++++++++--
 1 file changed, 71 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/SearchView.vue b/frontend/src/views/SearchView.vue
index 797d542..ff9c9c6 100644
--- a/frontend/src/views/SearchView.vue
+++ b/frontend/src/views/SearchView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PackageDrawer from '../components/PackageDrawer.vue'
 import CleanDialog from '../components/CleanDialog.vue'
@@ -89,6 +89,7 @@ onMounted(() => {
   document.addEventListener('click', closeMenus)
   checkMobile()
   window.addEventListener('resize', checkMobile)
+  window.addEventListener('resize', fitTableHeight)
   // 数据由 App 初始化时统一加载，切换菜单不再重复拉取全量列表（响应大，避免卡顿）
   if (route.query.status && ['all', 'warn', 'ok', 'ignored', 'broken'].includes(route.query.status)) {
     statusFilter.value = route.query.status
@@ -100,6 +101,7 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('click', closeMenus)
   window.removeEventListener('resize', checkMobile)
+  window.removeEventListener('resize', fitTableHeight)
 })
 
 watch(keyword, () => {
@@ -129,6 +131,51 @@ const filtered = computed(() => {
   return list
 })
 
+// —— 虚拟滚动：仅渲染可视窗口内的行，上下用透明占位行撑出总高度 ——
+// 大列表（7000+ 条）避免一次性渲染十万级 DOM 节点导致整机卡顿
+const ROW_H = 58 // 单行高度（px）：td padding 14×2 + 内容 30（logo），与行内最大元素一致
+const OVERSCAN = 6 // 可视区外多渲染的缓冲行数
+const vWrapEl = ref(null)
+const vScrollTop = ref(0)
+function onVScroll() {
+  vScrollTop.value = vWrapEl.value ? vWrapEl.value.scrollTop : 0
+}
+const vTotal = computed(() => filtered.value.length)
+const vStart = computed(() => {
+  const s = Math.floor(vScrollTop.value / ROW_H) - OVERSCAN
+  return Math.max(0, s)
+})
+const vEnd = computed(() => {
+  const viewH = vWrapEl.value ? vWrapEl.value.clientHeight : 600
+  const e = Math.ceil((vScrollTop.value + viewH) / ROW_H) + OVERSCAN
+  return Math.min(vTotal.value, e)
+})
+const visibleRows = computed(() => filtered.value.slice(vStart.value, vEnd.value))
+const vTopPad = computed(() => vStart.value * ROW_H)
+const vBottomPad = computed(() => (vTotal.value - vEnd.value) * ROW_H)
+// 筛选/排序/搜索结果变化后回到列表顶部，避免停在旧位置
+watch(
+  () => filtered.value,
+  () => {
+    if (vWrapEl.value) vWrapEl.value.scrollTop = 0
+  },
+)
+
+// —— 表格容器限高：虚拟滚动依赖容器自身滚动，按视口剩余空间动态撑满 ——
+function fitTableHeight() {
+  const el = vWrapEl.value
+  if (!el) return
+  const top = el.getBoundingClientRect().top
+  el.style.height = `${Math.max(180, Math.floor(window.innerHeight - top - 14))}px`
+}
+watch(
+  () => state.loading,
+  (v) => {
+    if (!v) nextTick(fitTableHeight)
+  },
+)
+watch(searchHistory, () => nextTick(fitTableHeight))
+
 const pills = [
   { key: 'all', label: '全部' },
   { key: 'warn', label: '🔥 预警' },
@@ -396,8 +443,8 @@ const pendingCount = computed(() => state.pkgList.items.filter(i => i.status ===
       </div>
     </div>
 
-    <div v-if="state.loading" class="loading-tip">⏳ 加载中…</div>
-    <div v-else class="vtable">
+<div v-if="state.loading" class="loading-tip">⏳ 加载中…</div>
+    <div v-else ref="vWrapEl" class="vtable" @scroll.passive="onVScroll">
       <table>
         <thead>
           <tr>
@@ -411,7 +458,10 @@ const pendingCount = computed(() => state.pkgList.items.filter(i => i.status ===
           </tr>
         </thead>
         <tbody>
-          <tr v-for="p in filtered" :key="p.name" @click="openDrawer(p)">
+          <tr v-if="vTopPad" class="vtr-ph" :style="{ height: vTopPad + 'px' }">
+            <td colspan="7"></td>
+          </tr>
+          <tr v-for="p in visibleRows" :key="p.name" @click="openDrawer(p)">
             <td>
               <span class="pkg-name">
                 <PkgLogo :name="p.name" :size="30" :homepage="p.homepage" />
@@ -436,6 +486,9 @@ const pendingCount = computed(() => state.pkgList.items.filter(i => i.status ===
               </template>
             </td>
           </tr>
+          <tr v-if="vBottomPad" class="vtr-ph" :style="{ height: vBottomPad + 'px' }">
+            <td colspan="7"></td>
+          </tr>
         </tbody>
       </table>
       <div v-if="!filtered.length" class="empty-tip">没有匹配的包</div>
@@ -683,6 +736,20 @@ const pendingCount = computed(() => state.pkgList.items.filter(i => i.status ===
 .pkg-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
 .pkg-name .pkg-cell { min-width: 0; }
 .pkg-cell { font-weight: 600; word-break: break-all; }
+/* —— 虚拟滚动支持：包名超长不换行，保证行高恒定 —— */
+.pkg-name .pkg-cell {
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 虚拟滚动容器：内部纵向滚动 + 表头吸顶 */
+.vtable { overflow-y: auto; }
+.vtable thead th { position: sticky; top: 0; z-index: 1; }
+/* 占位行：不参与视觉（无内边距/边框/背景） */
+.vtr-ph td { padding: 0; border-bottom: none; }
+.vtr-ph { cursor: default; }
+.vtr-ph:hover { background: transparent; }
 .pkg-desc {
   display: block;
   max-width: 230px;