Feat/virtualizarefactor: virtualization rework — unify Virtual components, fix memory leaks, migrate 15+ consumerstion rework (#472)

src/views/workflow/WorkflowListView.vue

@@ -4,25 +4,20 @@ import { Workflow } from '@/api/types'
 import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
 import WorkflowTaskCard from '@/components/cards/WorkflowTaskCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
-import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
+import VirtualGrid from '@/components/virtual/VirtualGrid.vue'
+import { useBreakpointCols } from '@/composables/virtual/useBreakpointCols'
 import { useI18n } from 'vue-i18n'
 
-// 国际化
 const { t } = useI18n()
 
-// 是否刷新
+// 列数：按视口断点（路由级全宽页）
+const cols = useBreakpointCols({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 })
+
 const isRefreshed = ref(false)
-
-// 新增对话框
 const addDialog = ref(false)
-
-// 所有任务
 const workflowList = ref<Workflow[]>([])
-
-// 事件类型列表
 const eventTypes = ref<Array<{ title: string; value: string }>>([])
 
-// 加载事件类型列表
 async function loadEventTypes() {
   try {
     eventTypes.value = await api.get('workflow/event_types')
@@ -31,7 +26,6 @@ async function loadEventTypes() {
   }
 }
 
-// 加载数据
 async function fetchData() {
   try {
     workflowList.value = await api.get('workflow/')
@@ -41,7 +35,6 @@ async function fetchData() {
   }
 }
 
-// 新增完成
 function addDone() {
   addDialog.value = false
   fetchData()
@@ -64,21 +57,25 @@ defineExpose({
   openAddDialog,
 })
 </script>
+
 <template>
   <div>
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    <ProgressiveCardGrid
+    <VirtualGrid
       v-if="workflowList.length > 0 && isRefreshed"
       :items="workflowList"
-      :get-item-key="item => item.id"
-      :min-item-width="288"
-      :estimated-item-height="420"
+      :columns="cols"
+      :row-estimate-size="420"
+      :gap="12"
+      :overscan="2"
+      key-field="id"
+      use-window-scroll
       class="px-2"
     >
-      <template #default="{ item }">
+      <template #item="{ item }">
         <WorkflowTaskCard :workflow="item" :event-types="eventTypes" @refresh="fetchData" />
       </template>
-    </ProgressiveCardGrid>
+    </VirtualGrid>
     <NoDataFound
       v-if="workflowList.length === 0 && isRefreshed"
       error-code="404"