chengma/cmautobuy
2
0
Fork 0
Code Issues 89 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加商品颜色匹配页面 (#294)

Browse Source
This commit is contained in:
chengma
2026-08-24 00:04:19 +08:00
parent 3cee6cbfaa
commit 8162ae5aca
12 changed files with 697 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/static/css/app.css
+84
View File
@@ -682,6 +682,90 @@ input.wide { width: 100%; }
.inner-code-toolbar .inner-code-filter-form { flex-basis: 100%; }
}
/* ── 商品级颜色匹配 ─────────────────────
独立页面沿用 Admin 的紧凑表格视觉；规则限定在本页，不改变其他主列表。 */
.color-mapping-toolbar { flex-wrap: nowrap; }
.color-mapping-toolbar h1 {
margin: 0 8px 0 0;
font-size: 18px;
line-height: 30px;
}
.color-mapping-toolbar .color-mapping-change-count {
margin-left: auto;
color: #667085;
white-space: nowrap;
}
.feedback,
.guard-note {
margin: 0 0 10px;
padding: 8px 10px;
border: 1px solid #b8d4fa;
border-left: 4px solid #1f6feb;
border-radius: 4px;
color: #174ea6;
background: #eef6ff;
}
.feedback.success { color: #176b36; border-color: #a7d8b7; border-left-color: #176b36; background: #effaf2; }
.feedback.error { color: #8f1d14; border-color: #efb2ac; border-left-color: #b42318; background: #fff5f4; }
.guard-note { color: #5c4400; border-color: #f0d88b; border-left-color: #c58a00; background: #fffbe6; }
.color-mapping-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 180px;
gap: 10px;
margin-bottom: 10px;
}
.color-mapping-summary-card {
min-width: 0;
padding: 10px 12px;
border: 1px solid #e1e4e8;
border-radius: 4px;
background: #fff;
}
.color-mapping-summary-card > span,
.color-mapping-summary-card > small { display: block; color: #667085; font-size: 12px; }
.color-mapping-summary-card > strong {
display: block;
margin: 4px 0 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.color-mapping-progress { display: grid; place-content: center; text-align: center; }
.color-mapping-progress > strong { color: #174ea6; font-size: 22px; font-variant-numeric: tabular-nums; }
.color-mapping-table-wrap {
min-height: 240px;
max-height: calc(100vh - 330px);
overflow: auto;
scrollbar-gutter: stable;
}
.color-mapping-table { min-width: 1050px; }
.color-mapping-table th { position: sticky; top: 0; z-index: 1; }
.color-mapping-table td { vertical-align: middle; }
.color-mapping-table td:first-child { min-width: 170px; }
.color-mapping-table td:nth-child(2) { min-width: 140px; }
.color-mapping-table td:nth-child(4) { min-width: 390px; }
.color-mapping-table td:nth-child(5) { min-width: 190px; }
.color-mapping-key,
.color-mapping-source { display: block; margin-top: 4px; color: #667085; font-size: 12px; }
.color-mapping-arrow { width: 44px; color: #8a94a1; text-align: center; font-size: 18px; }
.color-mapping-select { width: 100%; min-width: 360px; }
.color-mapping-target-label { display: block; color: #667085; font-size: 12px; }
.color-mapping-target-label .color-mapping-select { display: block; margin-top: 4px; color: #222; font-size: 14px; }
.status-mapped { color: #176b36; background: #effaf2; }
.status-pending { color: #57606a; background: #f3f4f6; }
.status-invalid { color: #b42318; background: #fff1f0; }
.status-changed { color: #0969da; background: #eef6ff; }
.color-mapping-table tr.row-changed { background: #eef6ff; }
.color-mapping-table tr.row-changed:hover { background: #e2f0ff; }
.color-mapping-empty-filter { text-align: center; }
@media (max-width: 800px) {
.color-mapping-toolbar { flex-wrap: wrap; }
.color-mapping-toolbar .color-mapping-change-count { margin-left: 0; }
.color-mapping-summary { grid-template-columns: 1fr; }
.color-mapping-table-wrap { max-height: none; }
}
select {
padding: 5px 8px;
border: 1px solid #ccd1d6;