joey5628/atlas-seller-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(edit): 编辑页 SKU 展示样式修改

Browse Source
This commit is contained in:
R524809
2026-09-18 14:39:40 +08:00
parent df3fb0c754
commit fcddb11da0
5 changed files with 260 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/products/components/ProductVariantSection.css
+40 -29
View File
@@ -159,30 +159,49 @@
margin-left: auto;
}
/* 展开区：图片与规格使用同层级面板，宽度不足时再改为上下排列。 */
/* 展开区：先展示 SKU 规格，再展示该 SKU 的图片选择区。 */
.sku-card-expanded {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
gap: 20px;
margin-top: 16px;
padding-top: 16px;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f0edf3;
}
.sku-media-panel,
.sku-spec-panel {
padding: 18px;
border: 1px solid #eeeaf3;
border-radius: 10px;
background: #fcfbfd;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.sku-media-panel {
width: 100%;
}
.sku-media-panel h5.ant-typography,
.sku-spec-panel h5.ant-typography {
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 10px;
text-align: center;
font-size: 16px;
line-height: 24px;
}
.sku-media-panel h5.ant-typography::before,
.sku-media-panel h5.ant-typography::after,
.sku-spec-panel h5.ant-typography::before,
.sku-spec-panel h5.ant-typography::after {
content: '';
flex: 1;
border-top: 1px dashed #d9d4df;
}
.sku-media-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
/* 每行固定八个图片位；主图跨两列、两行，其余图片按单格自动续排。 */
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-auto-flow: row;
gap: 8px;
align-items: start;
}
.sku-media-item {
@@ -193,7 +212,7 @@
align-self: start;
overflow: hidden;
border: 1px solid #ece8f0;
border-radius: 8px;
border-radius: 6px;
background: #f5f3f7;
}
.sku-media-item--main {
@@ -202,8 +221,8 @@
}
.sku-media-main-badge {
position: absolute;
top: 6px;
left: 6px;
top: 4px;
left: 4px;
z-index: 1;
padding: 2px 6px;
border-radius: 4px;
@@ -214,8 +233,8 @@
}
.sku-media-item .ant-btn {
position: absolute;
right: 6px;
bottom: 6px;
right: 4px;
bottom: 4px;
z-index: 1;
}
.sku-media-item.selected {
@@ -239,7 +258,7 @@
align-self: start;
align-items: center;
justify-content: center;
border-radius: 8px;
border-radius: 6px;
color: #90889c;
font-size: 13px;
}
@@ -248,13 +267,13 @@
grid-row: span 2;
}
.sku-spec-panel {
padding-bottom: 6px;
order: -1;
}
.sku-spec-panel .ant-form-item {
margin-bottom: 16px;
margin-bottom: 10px;
}
.sku-spec-panel .ant-form-item-label {
flex: 0 0 86px !important;
flex: 0 0 78px !important;
text-align: left;
}
.sku-spec-panel .ant-form-item-label > label {
@@ -294,15 +313,7 @@
min-width: 180px;
}
@media (max-width: 860px) {
.sku-card-expanded {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.sku-media-grid {
grid-auto-rows: 72px;
}
.sku-inline-dimensions {
grid-template-columns: 1fr;
}
apps/web/src/pages/products/components/ProductVariantSection.tsx
+7 -10
View File
@@ -354,8 +354,8 @@ export function ProductVariantSection({
{imageCandidates.length ? (
<div className="sku-media-grid">
{imageCandidates.map((candidate, imageIndex) => {
// 仅"转存成功"的候选可直接勾选；
// 其余按转存状态展示对应按钮。
// 仅"转存成功"的候选可直接勾选；待转存图片仅保留预览，
// 避免在此处重复提供后续素材选择流程的入口。
const selectable =
candidate.status ===
'succeeded' &&
@@ -399,7 +399,8 @@ export function ProductVariantSection({
? '已选择'
: '选择'}
</Button>
) : (
) : candidate.status ===
'pending_selection' ? null : (
<Button
size="small"
loading={
@@ -420,13 +421,9 @@ export function ProductVariantSection({
)
}
>
{candidate.status ===
'pending_selection'
? '转存后选择'
: candidate.status ===
'failed'
? '转存失败'
: '转存中'}
{candidate.status === 'failed'
? '转存失败'
: '转存中'}
</Button>
)}
</div>