feat(seller): 迁移商品发布编辑与审核链路

This commit is contained in:
yml2213
2026-10-30 14:24:51 +08:00
parent 398bf28d7d
commit 85bff95042
13 changed files with 4262 additions and 1 deletions
+1
View File
@@ -15,4 +15,5 @@
@import './mobile-messages.css';
@import './mobile-chat.css';
@import './pc-messages.css';
@import './seller.css';
@import './components.css';
+781
View File
@@ -0,0 +1,781 @@
/* Seller center: deep green / rice paper / cinnabar, matching the storefront shell. */
.seller-page {
max-width: 1240px;
margin: 0 auto;
padding: 28px 24px 72px;
}
.seller-page .ant-typography {
color: var(--ink);
}
.seller-eyebrow {
display: inline-block;
color: var(--brand-brass) !important;
font-family: 'Inter', 'DIN Alternate', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.seller-title {
margin: 8px 0 6px !important;
color: var(--brand-ink-deep) !important;
font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif !important;
font-size: 30px !important;
font-weight: 600 !important;
letter-spacing: 0.04em;
}
.seller-lead {
max-width: 640px;
margin: 0 !important;
color: var(--ink-secondary) !important;
line-height: 1.7;
}
.seller-hero,
.seller-form-head,
.seller-detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 24px 26px;
border: 1px solid var(--line);
border-radius: 10px;
background:
linear-gradient(120deg, rgba(30, 77, 66, 0.07), transparent 46%),
var(--paper-warm);
}
.seller-form-head,
.seller-detail-head {
padding: 20px 24px;
}
.seller-stat-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin: 16px 0;
}
.seller-stat {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--paper-warm);
color: var(--ink-secondary);
cursor: pointer;
transition:
border-color 160ms ease,
background 160ms ease;
}
.seller-stat:hover {
border-color: var(--sage);
}
.seller-stat.is-active {
border-color: var(--brand-ink);
background: #edf3ee;
color: var(--brand-ink-deep);
}
.seller-stat span {
font-size: 13px;
}
.seller-stat strong {
color: var(--brand-seal);
font-family: 'Inter', 'DIN Alternate', sans-serif;
font-size: 21px;
}
.seller-panel {
margin-bottom: 16px;
border-color: var(--line);
background: var(--paper-warm);
}
.seller-panel .ant-card-head {
border-bottom-color: var(--line);
}
.seller-panel .ant-card-head-title {
color: var(--brand-ink-deep);
font-family: 'Noto Serif SC', 'Songti SC', serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.03em;
}
.seller-listing-card {
height: 100%;
border-color: var(--line);
background: var(--paper-warm);
transition:
border-color 160ms ease,
transform 160ms ease;
}
.seller-listing-card:hover {
border-color: var(--sage);
transform: translateY(-2px);
}
.seller-listing-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--line);
}
.seller-code {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 3px 10px;
border: 1px solid var(--brand-seal-line);
border-radius: 999px;
background: #fbf3e6;
color: var(--brand-seal);
font-family: 'Inter', monospace;
font-size: 11px;
letter-spacing: 0.04em;
cursor: pointer;
}
button.seller-code:not(:disabled):hover {
border-color: var(--brand-seal);
}
.seller-listing-card__body {
display: block;
padding: 14px 0 4px;
color: inherit;
}
.seller-listing-card__body:hover {
color: inherit;
}
.seller-listing-card__body h3 {
margin: 0 0 14px !important;
color: var(--ink) !important;
font-family: 'Noto Serif SC', 'Songti SC', serif;
font-size: 19px !important;
}
.seller-meta-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 13px 14px;
border-radius: 8px;
background: #f7f4ec;
}
.seller-meta-grid div {
display: grid;
gap: 4px;
}
.seller-meta-grid span {
color: var(--ink-muted);
font-size: 11px;
letter-spacing: 0.08em;
}
.seller-meta-grid strong {
color: var(--ink);
font-size: 14px;
font-weight: 600;
}
.seller-meta-grid strong.is-price {
color: var(--brand-seal);
font-family: 'Inter', 'DIN Alternate', sans-serif;
font-size: 18px;
}
.seller-reject-reason {
margin: 12px 0 0 !important;
padding: 8px 10px;
border-left: 2px solid var(--danger);
background: #fbf0ee;
color: var(--danger) !important;
font-size: 12px;
}
.seller-listing-card__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid var(--line);
}
.seller-detail-hero {
display: flex;
justify-content: space-between;
gap: 24px;
margin: 16px 0;
border-color: var(--line);
background: var(--paper-warm);
}
.seller-detail-hero__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.seller-detail-title {
margin: 10px 0 8px !important;
color: var(--brand-ink-deep) !important;
font-family: 'Noto Serif SC', 'Songti SC', serif;
font-size: 24px !important;
}
.seller-detail-reason {
margin-top: 14px;
}
.seller-detail-prices {
display: grid;
min-width: 300px;
gap: 8px;
padding: 16px 18px;
border: 1px solid var(--brand-seal-line);
border-radius: 8px;
background: #fbf5e9;
}
.seller-detail-prices div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
}
.seller-detail-prices span {
color: #8d6f4d;
font-size: 12px;
}
.seller-detail-prices strong {
color: var(--brand-seal);
font-family: 'Inter', 'DIN Alternate', sans-serif;
font-size: 21px;
}
.seller-detail-prices div:not(:first-child) strong {
color: var(--brand-ink);
font-size: 15px;
}
.seller-price-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.seller-price-grid div {
display: grid;
gap: 5px;
padding: 12px;
border-radius: 6px;
background: #f7f4ec;
}
.seller-price-grid span {
color: var(--ink-muted);
font-size: 11px;
}
.seller-price-grid strong {
color: var(--brand-ink-deep);
font-family: 'Inter', 'DIN Alternate', sans-serif;
font-size: 16px;
}
.seller-resource-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.seller-resource {
display: grid;
gap: 4px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 6px;
background: #faf8f2;
}
.seller-resource span,
.seller-resource small {
color: var(--ink-muted);
font-size: 12px;
}
.seller-resource strong {
color: var(--brand-ink);
font-size: 18px;
}
.seller-skin-group {
display: grid;
gap: 7px;
margin-bottom: 14px;
}
.seller-skin-group > strong,
.seller-skin-group__head strong {
color: var(--ink);
font-size: 14px;
}
.seller-skin-group__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.seller-skin-group__head span {
color: var(--ink-muted);
font-size: 12px;
}
.seller-skin-groups {
display: grid;
gap: 18px;
}
.seller-shot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.seller-shot-grid figure {
margin: 0;
}
.seller-shot-grid .ant-image,
.seller-shot-grid img {
width: 100% !important;
border-radius: 6px;
object-fit: cover;
}
.seller-shot-grid figcaption {
margin-top: 6px;
color: var(--ink-muted);
font-size: 12px;
text-align: center;
}
.seller-remark {
margin: 0 !important;
color: var(--ink-secondary) !important;
line-height: 1.75;
white-space: pre-wrap;
}
.seller-tip-panel ul {
margin: 0;
padding-left: 18px;
color: var(--ink-secondary);
line-height: 1.9;
font-size: 13px;
}
.seller-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 18px;
}
.seller-field {
display: grid;
align-content: start;
gap: 7px;
min-width: 0;
}
.seller-field--wide {
grid-column: 1 / -1;
}
.seller-field__label {
color: var(--ink-secondary);
font-size: 13px;
font-weight: 500;
}
.seller-field__label b,
.seller-upload-slot__head b {
margin-left: 3px;
color: var(--brand-seal);
font-weight: 700;
}
.seller-field > small {
color: var(--ink-muted);
font-size: 12px;
line-height: 1.6;
}
.seller-field .ant-select,
.seller-field .ant-input-number,
.seller-field .ant-picker {
width: 100%;
}
.seller-number-input {
width: 100%;
}
.seller-time-row {
display: flex;
align-items: center;
gap: 8px;
}
.seller-time-row .ant-picker {
flex: 1;
}
.seller-quantity-table {
display: grid;
gap: 1px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--line);
}
.seller-quantity-head,
.seller-quantity-row {
display: grid;
grid-template-columns: minmax(150px, 1.7fr) 0.9fr 110px 140px;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--paper-warm);
}
.seller-quantity-head {
background: #f3efe4;
color: var(--ink-muted);
font-size: 12px;
letter-spacing: 0.05em;
}
.seller-quantity-row.is-disabled {
opacity: 0.55;
}
.seller-quantity-meta {
display: grid;
gap: 3px;
}
.seller-quantity-meta strong {
color: var(--ink);
font-size: 13px;
}
.seller-quantity-meta small,
.seller-quantity-row > span {
color: var(--ink-muted);
font-size: 12px;
}
.seller-upload-grid {
display: grid;
gap: 16px;
}
.seller-upload-slot {
display: grid;
gap: 10px;
padding: 14px;
border: 1px dashed var(--line);
border-radius: 8px;
background: #fbf9f3;
}
.seller-upload-slot__head {
display: grid;
gap: 4px;
}
.seller-upload-slot__head strong {
color: var(--ink);
font-size: 14px;
}
.seller-upload-slot__head small {
color: var(--ink-muted);
font-size: 12px;
}
.seller-upload-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.seller-upload-item {
position: relative;
}
.seller-upload-item .ant-image img {
border-radius: 5px;
object-fit: cover;
}
.seller-upload-item button {
position: absolute;
top: -6px;
right: -6px;
display: grid;
width: 22px;
height: 22px;
place-items: center;
border: 1px solid var(--brand-seal-line);
border-radius: 50%;
background: var(--paper-warm);
color: var(--brand-seal);
cursor: pointer;
}
.seller-upload-add {
display: grid;
width: 104px;
height: 78px;
place-items: center;
gap: 2px;
border: 1px dashed var(--sage);
border-radius: 5px;
background: #f1f5f0;
color: var(--brand-ink);
font-size: 12px;
cursor: pointer;
}
.seller-upload-add:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.seller-deposit-row,
.seller-ratio-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.seller-deposit-row .ant-input-number,
.seller-ratio-row .ant-input-number {
flex: 1 1 140px;
width: auto;
}
.seller-deposit-breakdown {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.seller-agreements {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.seller-agreement {
display: grid;
gap: 8px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 6px;
background: #faf8f2;
}
.seller-agreement__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.seller-agreement__head strong {
color: var(--brand-ink-deep);
font-family: 'Noto Serif SC', 'Songti SC', serif;
font-size: 14px;
}
.seller-agreement__content {
max-height: 190px;
overflow-y: auto;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--paper-warm);
color: var(--ink-secondary);
font-size: 12px;
line-height: 1.8;
white-space: pre-wrap;
}
.seller-summary {
position: sticky;
top: 92px;
}
.seller-price-panel {
border-color: var(--brand-seal-line);
background:
linear-gradient(160deg, rgba(166, 67, 50, 0.06), transparent 42%),
var(--paper-warm);
}
.seller-price-panel__main {
display: grid;
gap: 4px;
margin: 10px 0 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--brand-seal-line);
}
.seller-price-panel__main strong {
color: var(--brand-seal);
font-family: 'Inter', 'DIN Alternate', sans-serif;
font-size: 34px;
line-height: 1.1;
}
.seller-price-panel__main span {
color: #92745a;
font-size: 12px;
}
.seller-price-lines {
display: grid;
gap: 8px;
}
.seller-price-lines div,
.seller-summary-meta div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
color: var(--ink-secondary);
font-size: 12px;
}
.seller-price-lines strong {
color: var(--ink);
font-family: 'Inter', 'DIN Alternate', sans-serif;
font-size: 14px;
}
.seller-summary-meta {
display: grid;
gap: 6px;
margin-bottom: 16px;
}
.seller-summary-meta strong {
color: var(--brand-ink);
}
.seller-summary-hint {
margin: 12px 0 0 !important;
color: var(--ink-muted) !important;
font-size: 12px;
line-height: 1.7;
}
.seller-loading {
display: grid;
min-height: 320px;
place-items: center;
gap: 12px;
color: var(--ink-muted);
}
@media (max-width: 1100px) {
.seller-stat-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seller-detail-hero {
flex-direction: column;
}
.seller-detail-prices {
width: 100%;
min-width: 0;
}
.seller-summary {
position: static;
}
}
@media (max-width: 768px) {
.seller-page {
padding: 18px 14px 48px;
}
.seller-hero,
.seller-form-head,
.seller-detail-head {
flex-direction: column;
padding: 18px;
}
.seller-title {
font-size: 24px !important;
}
.seller-stat-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.seller-meta-grid,
.seller-form-grid,
.seller-agreements,
.seller-price-grid {
grid-template-columns: 1fr;
}
.seller-quantity-head {
display: none;
}
.seller-quantity-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 12px;
}
}