perf: 优化独立组态页面重构后公有私有状态丢失

@@ -158,7 +158,7 @@
           </section>
         </template>
         <template #renderItem="{ item }">
-          <List.Item>
+          <List.Item :style="{ '--totalHeight': containerHeight }">
             <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot>
           </List.Item>
         </template>
@@ -173,13 +173,6 @@
       .ant-spin-container {
         overflow-x: hidden;
         overflow-y: auto;
-
-        // .ant-row {
-        //   .ant-col {
-        //   }
-        //   .ant-list-item {
-        //   }
-        // }
       }
 
       .ant-list-header {

@@ -27,10 +27,9 @@ export interface BasicCardListPropsType<T = Recordable> {
   handleSearchInfoFn?: Fn;
 }
 
-export type ListGridType = Record<
-  'column' | 'gutter' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
-  number
->;
+export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & {
+  gutter: number | [number, number];
+};
 
 export type UseLoading = ReturnType<typeof useLoading>;
 

@@ -3,10 +3,18 @@ import { ListGridType } from '../types';
 export const getListGridByColumn = (col: number): Omit<ListGridType, 'gutter' | 'column'> => {
   return {
     xxl: col,
-    xl: Math.max(1, col - 1),
-    lg: Math.max(1, col - 2),
-    md: Math.max(1, col - 3),
-    sm: Math.max(1, col - 4),
-    xs: Math.max(1, col - 5),
+    xl: col,
+    lg: col,
+    md: col,
+    sm: col,
+    xs: col,
   };
+  // return {
+  //   xxl: col,
+  //   xl: Math.max(1, col - 1),
+  //   lg: Math.max(1, col - 2),
+  //   md: Math.max(1, col - 3),
+  //   sm: Math.max(1, col - 4),
+  //   xs: Math.max(1, col - 5),
+  // };
 };

@@ -134,23 +134,23 @@
       <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
         <Card
           :style="{
-            '--viewType': '#1890ff',
+            '--viewType': item.publicId ? '#faad14' : '#1890ff',
           }"
           hoverable
           class="card-container"
         >
           <template #cover>
             <div
-              class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
+              class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative bg-light-50 rounded-tl-10xl"
             >
               <img
-                class="w-full h-36"
+                class="w-full max-h-32 object-contain !rounded-tl-10xl"
                 alt="example"
                 :src="item.thumbnail || configurationSrc"
                 @click="handlePreview(item)"
               />
               <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">
-                母版
+                {{ item.publicId ? '公开' : '私有' }}
               </span>
             </div>
           </template>
@@ -238,3 +238,11 @@
     <ShareModal @register="registerShareModal" :shareApi="shareConfiguration" @success="reload" />
   </section>
 </template>
+
+<style lang="less" scoped>
+  .card-container {
+    :deep(.ant-card-cover) {
+      background-color: var(--viewType);
+    }
+  }
+</style>

@@ -116,14 +116,11 @@
               class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
             >
               <img
-                class="w-full h-36"
+                class="w-full max-h-32"
                 alt="example"
                 :src="item.thumbnail || configurationSrc"
                 @click="handlePreview(item)"
               />
-              <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">
-                母版
-              </span>
             </div>
           </template>
           <template class="ant-card-actions" #actions>