精简为网格展示
This commit is contained in:
parent
93f8261622
commit
3ad86524d4
|
|
@ -1,8 +1,12 @@
|
|||
import { SyncMedusaButton as SyncMedusaButton_8c90663551920f0510ea531726668adc } from '../../../components/products/SyncMedusaButton'
|
||||
import { default as default_3fd1353246fc8a459244c8dc11f58470 } from '../../../components/products/ProductGridStyler'
|
||||
import { ForceSyncButton as ForceSyncButton_86f9d5df4f20495427521354d06db618 } from '../../../components/products/ForceSyncButton'
|
||||
import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
|
||||
import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
|
||||
|
||||
export const importMap = {
|
||||
"/components/products/SyncMedusaButton#SyncMedusaButton": SyncMedusaButton_8c90663551920f0510ea531726668adc,
|
||||
"/components/products/ProductGridStyler#default": default_3fd1353246fc8a459244c8dc11f58470,
|
||||
"/components/products/ForceSyncButton#ForceSyncButton": ForceSyncButton_86f9d5df4f20495427521354d06db618,
|
||||
"@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24,
|
||||
"@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
|
||||
|
|
|
|||
|
|
@ -8,12 +8,16 @@ export const Products: CollectionConfig = {
|
|||
description: '管理 Medusa 商品的详细内容和描述',
|
||||
listSearchableFields: ['title', 'medusaId', 'handle'],
|
||||
pagination: {
|
||||
defaultLimit: 20,
|
||||
defaultLimit: 48,
|
||||
},
|
||||
components: {
|
||||
edit: {
|
||||
PreviewButton: '/components/products/ForceSyncButton#ForceSyncButton',
|
||||
},
|
||||
beforeListTable: [
|
||||
'/components/products/SyncMedusaButton#SyncMedusaButton',
|
||||
'/components/products/ProductGridStyler',
|
||||
],
|
||||
},
|
||||
},
|
||||
access: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import './product-grid-styler.scss'
|
||||
|
||||
// 这个组件本身不渲染任何内容，只负责在 Products 列表页注入 CSS
|
||||
// 从而将 Payload 默认的表格变换为 Grid 布局
|
||||
export default function ProductGridStyler() {
|
||||
return <div className="product-grid-styler-injector" style={{ display: 'none' }} />
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
// 这是为了覆盖 Payload 默认表格样式的 SCSS
|
||||
// 我们使用 CSS Grid 强制改变表格布局，从而实现 Grid 视图，同时保留 Payload 所有原生功能
|
||||
|
||||
.collection-list.collection-list--products {
|
||||
table {
|
||||
display: block !important;
|
||||
|
||||
thead {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
|
||||
gap: 1.5rem !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background: var(--theme-elevation-50) !important;
|
||||
border: 1px solid var(--theme-elevation-150) !important;
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
transition: all 0.2s ease-in-out !important;
|
||||
height: 100% !important;
|
||||
min-height: 320px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--theme-elevation-300) !important;
|
||||
}
|
||||
|
||||
td {
|
||||
display: block !important;
|
||||
border: none !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
width: 100% !important;
|
||||
white-space: normal !important;
|
||||
height: auto !important;
|
||||
|
||||
// 1. Selector/Checkbox (Always the first column usually)
|
||||
&:first-child {
|
||||
position: absolute !important;
|
||||
top: 10px !important;
|
||||
right: 10px !important;
|
||||
width: auto !important;
|
||||
padding: 0 !important;
|
||||
z-index: 10 !important;
|
||||
background: transparent !important;
|
||||
|
||||
.checkbox {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Thumbnail (First content column)
|
||||
// We depend on 'thumbnail' being the first custom column in Products.ts
|
||||
// Note: td:nth-child(2) because checkbox is #1
|
||||
&:nth-child(2) {
|
||||
padding: 0 !important;
|
||||
height: 200px !important;
|
||||
width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
background: var(--theme-elevation-100) !important;
|
||||
order: -1 !important; // Force to top
|
||||
flex-grow: 0 !important;
|
||||
|
||||
// Support for Payload's file cell or specific image structures
|
||||
.file-cell, .thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback purely text content in that cell
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: var(--theme-elevation-400);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Title (Second content column)
|
||||
&:nth-child(3) {
|
||||
font-size: 1.1rem !important;
|
||||
font-weight: 600 !important;
|
||||
padding-top: 1rem !important;
|
||||
margin-bottom: 0.5rem !important;
|
||||
line-height: 1.4 !important;
|
||||
flex-grow: 1 !important; // Push footer down
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
color: var(--theme-text) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-primary-500) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Medusa ID or Status or Date
|
||||
&:nth-child(n+4) {
|
||||
font-size: 0.8rem !important;
|
||||
color: var(--theme-elevation-500) !important;
|
||||
padding-bottom: 0.25rem !important;
|
||||
padding-top: 0 !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue