perf: DEFECT-806 not found data split mode default show layout

 <script setup lang="ts">
   import { PageWrapper } from '/@/components/Page';
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
-  import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
-  import { Row, Col, Spin, Button, Pagination, Empty, Space } from 'ant-design-vue';
+  import { onMounted, reactive, ref, unref, watch } from 'vue';
+  import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { videoPlay as VideoPlay } from 'vue3-video-play';
@@ -14,6 +14,7 @@
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import { isDef } from '/@/utils/is';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { buildUUID } from '/@/utils/uuid';
 
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
@@ -67,15 +68,11 @@
     getCameraList();
   };
 
-  const getColLayout = computed(() => {
-    const totalSpan = 24;
-    return totalSpan / pagination.colNumber;
-  });
-
   const getCameraList = async () => {
     try {
+      cameraList.value = [];
       loading.value = true;
-      const { items, total } = await cameraPage({
+      let { items, total } = await cameraPage({
         page: pagination.page,
         pageSize: pagination.pageSize,
         organizationId: unref(organizationId)!,
@@ -87,6 +84,14 @@
         (item as CameraRecordItem).isTransform = false;
         beforeVideoPlay(item);
       }
+      if (items.length < pagination.pageSize) {
+        const fillArr: any = Array.from({ length: pagination.pageSize - items.length }).map(() => ({
+          id: buildUUID(),
+          placeholder: true,
+        }));
+        items = [...items, ...fillArr];
+        console.log(fillArr);
+      }
       cameraList.value = items;
     } catch (error) {
     } finally {
@@ -128,7 +133,10 @@
     }
   };
 
+  const gridLayout = ref({ gutter: 1, column: 2 });
+
   const handleSwitchLayoutWay = (pageSize: number, layout: number) => {
+    gridLayout.value = { gutter: 1, column: Math.sqrt(pageSize) };
     pagination.colNumber = layout;
     pagination.pageSize = pageSize;
     pagination.page = 1;
@@ -238,7 +246,54 @@
             </Space>
           </div>
         </div>
-        <section ref="videoContainer" class="bg-light-50 flex-auto dark:bg-dark-900">
+        <List
+          :loading="loading"
+          :data-source="cameraList"
+          class="bg-light-50 flex-auto dark:bg-dark-900 split-mode-list"
+          :grid="gridLayout"
+          :style="{ '--height': `${100 / pagination.colNumber}%` }"
+        >
+          <template #renderItem="{ item }">
+            <List.Item>
+              <div class="box-border w-full h-full p-1px">
+                <div
+                  v-if="item.placeholder"
+                  class="bg-black w-full h-full overflow-hidden relative"
+                ></div>
+                <div
+                  v-if="!item.placeholder"
+                  class="bg-black w-full h-full overflow-hidden relative video-container"
+                >
+                  <Spin v-show="!item.isTransform" :spinning="!item.isTransform">
+                    <div class="bg-black text-light-50"> </div>
+                  </Spin>
+                  <VideoPlay
+                    v-show="item.isTransform"
+                    @loadstart="handleLoadStart(item)"
+                    @loadeddata="handleLoadData(item)"
+                    v-bind="options"
+                    :src="item.videoUrl"
+                    :title="item.name"
+                    :type="item.type"
+                  />
+                  <div
+                    v-if="item.isTransform && isDef(item.canPlay) && !item.canPlay"
+                    class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black"
+                  >
+                    视频加载出错了！
+                  </div>
+                  <div
+                    class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
+                    style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
+                  >
+                    <span>{{ item.name }}</span>
+                  </div>
+                </div>
+              </div>
+            </List.Item>
+          </template>
+        </List>
+        <!-- <section ref="videoContainer" class="bg-light-50 flex-auto dark:bg-dark-900">
           <Spin :spinning="loading" class="h-full">
             <Empty
               class="h-full flex flex-col justify-center items-center"
@@ -283,7 +338,7 @@
               </Col>
             </Row>
           </Spin>
-        </section>
+        </section> -->
       </section>
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="getCameraList" />
@@ -340,4 +395,20 @@
       }
     }
   }
+
+  .split-mode-list:deep(.ant-row) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .split-mode-list:deep(.ant-list-item) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .split-mode-list:deep(.ant-col) {
+    width: 100%;
+    // height: var(--height);
+    height: 100%;
+  }
 </style>