Showing
5 changed files
with
30 additions
and
25 deletions
| @@ -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> |