Commit ec57584da5ddb4ab4073b8053394ecf93b6780cf

Authored by ww
1 parent 904cbc28

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

@@ -158,7 +158,7 @@ @@ -158,7 +158,7 @@
158 </section> 158 </section>
159 </template> 159 </template>
160 <template #renderItem="{ item }"> 160 <template #renderItem="{ item }">
161 - <List.Item> 161 + <List.Item :style="{ '--totalHeight': containerHeight }">
162 <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot> 162 <slot name="renderItem" :item="item" :totalHeight="containerHeight"></slot>
163 </List.Item> 163 </List.Item>
164 </template> 164 </template>
@@ -173,13 +173,6 @@ @@ -173,13 +173,6 @@
173 .ant-spin-container { 173 .ant-spin-container {
174 overflow-x: hidden; 174 overflow-x: hidden;
175 overflow-y: auto; 175 overflow-y: auto;
176 -  
177 - // .ant-row {  
178 - // .ant-col {  
179 - // }  
180 - // .ant-list-item {  
181 - // }  
182 - // }  
183 } 176 }
184 177
185 .ant-list-header { 178 .ant-list-header {
@@ -27,10 +27,9 @@ export interface BasicCardListPropsType<T = Recordable> { @@ -27,10 +27,9 @@ export interface BasicCardListPropsType<T = Recordable> {
27 handleSearchInfoFn?: Fn; 27 handleSearchInfoFn?: Fn;
28 } 28 }
29 29
30 -export type ListGridType = Record<  
31 - 'column' | 'gutter' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',  
32 - number  
33 ->; 30 +export type ListGridType = Record<'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number> & {
  31 + gutter: number | [number, number];
  32 +};
34 33
35 export type UseLoading = ReturnType<typeof useLoading>; 34 export type UseLoading = ReturnType<typeof useLoading>;
36 35
@@ -3,10 +3,18 @@ import { ListGridType } from '../types'; @@ -3,10 +3,18 @@ import { ListGridType } from '../types';
3 export const getListGridByColumn = (col: number): Omit<ListGridType, 'gutter' | 'column'> => { 3 export const getListGridByColumn = (col: number): Omit<ListGridType, 'gutter' | 'column'> => {
4 return { 4 return {
5 xxl: col, 5 xxl: col,
6 - xl: Math.max(1, col - 1),  
7 - lg: Math.max(1, col - 2),  
8 - md: Math.max(1, col - 3),  
9 - sm: Math.max(1, col - 4),  
10 - xs: Math.max(1, col - 5), 6 + xl: col,
  7 + lg: col,
  8 + md: col,
  9 + sm: col,
  10 + xs: col,
11 }; 11 };
  12 + // return {
  13 + // xxl: col,
  14 + // xl: Math.max(1, col - 1),
  15 + // lg: Math.max(1, col - 2),
  16 + // md: Math.max(1, col - 3),
  17 + // sm: Math.max(1, col - 4),
  18 + // xs: Math.max(1, col - 5),
  19 + // };
12 }; 20 };
@@ -134,23 +134,23 @@ @@ -134,23 +134,23 @@
134 <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>"> 134 <template #renderItem="{ item }: CardListRenderItem<ConfigurationCenterItemsModal>">
135 <Card 135 <Card
136 :style="{ 136 :style="{
137 - '--viewType': '#1890ff', 137 + '--viewType': item.publicId ? '#faad14' : '#1890ff',
138 }" 138 }"
139 hoverable 139 hoverable
140 class="card-container" 140 class="card-container"
141 > 141 >
142 <template #cover> 142 <template #cover>
143 <div 143 <div
144 - class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative" 144 + class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative bg-light-50 rounded-tl-10xl"
145 > 145 >
146 <img 146 <img
147 - class="w-full h-36" 147 + class="w-full max-h-32 object-contain !rounded-tl-10xl"
148 alt="example" 148 alt="example"
149 :src="item.thumbnail || configurationSrc" 149 :src="item.thumbnail || configurationSrc"
150 @click="handlePreview(item)" 150 @click="handlePreview(item)"
151 /> 151 />
152 <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"> 152 <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">
153 - 母版 153 + {{ item.publicId ? '公开' : '私有' }}
154 </span> 154 </span>
155 </div> 155 </div>
156 </template> 156 </template>
@@ -238,3 +238,11 @@ @@ -238,3 +238,11 @@
238 <ShareModal @register="registerShareModal" :shareApi="shareConfiguration" @success="reload" /> 238 <ShareModal @register="registerShareModal" :shareApi="shareConfiguration" @success="reload" />
239 </section> 239 </section>
240 </template> 240 </template>
  241 +
  242 +<style lang="less" scoped>
  243 + .card-container {
  244 + :deep(.ant-card-cover) {
  245 + background-color: var(--viewType);
  246 + }
  247 + }
  248 +</style>
@@ -116,14 +116,11 @@ @@ -116,14 +116,11 @@
116 class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative" 116 class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
117 > 117 >
118 <img 118 <img
119 - class="w-full h-36" 119 + class="w-full max-h-32"
120 alt="example" 120 alt="example"
121 :src="item.thumbnail || configurationSrc" 121 :src="item.thumbnail || configurationSrc"
122 @click="handlePreview(item)" 122 @click="handlePreview(item)"
123 /> 123 />
124 - <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">  
125 - 母版  
126 - </span>  
127 </div> 124 </div>
128 </template> 125 </template>
129 <template class="ant-card-actions" #actions> 126 <template class="ant-card-actions" #actions>