azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): polish login and design tokens

Browse Source
This commit is contained in:
iye
2026-06-16 12:30:45 +08:00
parent 77c037495e
commit b2288a2652
23 changed files with 828 additions and 926 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/product-detail-page.css
+42 -42
View File
@@ -23,7 +23,7 @@
color: var(--accent-emerald, #1f8a51);
border: 1px solid var(--accent-emerald-bd, #c4e3d1);
border-radius: var(--r-sm);
font-size: 11.5px;
font-size: 12px;
font-weight: 500;
}
@@ -137,12 +137,12 @@
.ov-tri-close svg { width: 12px; height: 12px; }
/* 复刻 pipeline.html .prod-preview-* 内部样式 */
.ov-tri-pop .prod-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; padding-right: 28px; }
.ov-tri-pop .prod-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; padding-right: 28px; }
.ov-tri-pop .prod-preview-img { aspect-ratio: 16/9; }
.ov-tri-pop .prod-preview-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.ov-tri-pop .prod-preview-history { display: none; flex-direction: column; gap: 6px; }
.ov-tri-pop .prod-preview-history.show { display: flex; }
.ov-tri-pop .prod-preview-history .h-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; }
.ov-tri-pop .prod-preview-history .h-lbl { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; }
.ov-tri-pop .prod-preview-history .h-lbl .ct { color: var(--accent-black); font-weight: 600; }
.ov-tri-pop .prod-preview-history .h-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.ov-tri-pop .prod-preview-history .h-row::-webkit-scrollbar { height: 4px; }
@@ -159,10 +159,10 @@
.ov-tri-pop .prod-preview-history .h-thumb.adopted { border-color: var(--heat); border-width: 2px; box-shadow: 0 0 0 2px var(--heat-12); }
/* 仅预览(未采用):黑色描边,无徽标 */
.ov-tri-pop .prod-preview-history .h-thumb.previewing { border-color: var(--accent-black); border-width: 2px; }
.ov-tri-pop .prod-preview-history .h-thumb .v { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-56); letter-spacing: .02em; }
.ov-tri-pop .prod-preview-history .h-thumb .v { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); letter-spacing: .02em; }
.ov-tri-pop .prod-preview-history .h-thumb.adopted .v { color: var(--heat); font-weight: 600; }
.ov-tri-pop .prod-preview-history .h-thumb.previewing .v { color: var(--accent-black); font-weight: 600; }
.ov-tri-pop .prod-preview-history .h-thumb .badge { position: absolute; top: 2px; left: 2px; font-family: var(--font-mono); font-size: 8.5px; padding: 0 4px; line-height: 12px; background: var(--heat); color: var(--accent-white); border-radius: 2px; letter-spacing: .02em; display: none; }
.ov-tri-pop .prod-preview-history .h-thumb .badge { position: absolute; top: 2px; left: 2px; font-family: var(--font-mono); font-size: 12px; padding: 0 4px; line-height: 12px; background: var(--heat); color: var(--accent-white); border-radius: 2px; letter-spacing: .02em; display: none; }
.ov-tri-pop .prod-preview-history .h-thumb.adopted .badge { display: block; }
/* 主图可点击放大 */
@@ -194,7 +194,7 @@
.tri-lightbox-head {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
color: var(--black-alpha-56);
padding-right: 32px;
}
@@ -204,7 +204,7 @@
padding: 2px 6px;
background: var(--heat-12); color: var(--heat);
border-radius: 3px;
font-size: 10px;
font-size: 12px;
}
.tri-lightbox-close {
position: absolute;
@@ -222,7 +222,7 @@
.tri-lightbox-close:hover { background: var(--black-alpha-08); color: var(--accent-black); border-color: var(--black-alpha-12); }
.tri-lightbox-close svg { width: 14px; height: 14px; }
.tri-lightbox-img { aspect-ratio: 16/9; width: 100%; }
.tri-lightbox-foot { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); }
.tri-lightbox-foot { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }
.tri-lightbox-foot .spc { flex: 1; }
.tri-lightbox-foot kbd {
display: inline-block;
@@ -232,7 +232,7 @@
border-bottom-width: 2px;
border-radius: 3px;
font-family: var(--font-mono);
font-size: 10px;
font-size: 12px;
color: var(--black-alpha-72);
}
@@ -250,7 +250,7 @@
border: 1px solid var(--black-alpha-12);
border-radius: var(--r-md);
padding: 0 14px;
font-size: 13.5px;
font-size: 14px;
color: var(--accent-black);
background: var(--background-lighter);
font-family: inherit;
@@ -276,7 +276,7 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
margin-bottom: 6px;
font-size: 13.5px;
font-size: 14px;
}
.v-bullet-list .bl-add { background: transparent; border-style: dashed; }
.v-bullet-list .bl-add:focus-within { border-color: var(--heat-40); background: var(--surface); }
@@ -286,9 +286,9 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
color: var(--heat);
font-weight: 700;
font-weight: 600;
display: grid; place-items: center;
flex-shrink: 0;
}
@@ -301,7 +301,7 @@
.v-bullet-list .bl-input {
flex: 1;
background: transparent; border: 0; outline: none;
font-size: 13.5px;
font-size: 14px;
color: var(--accent-black);
font-family: inherit;
}
@@ -356,7 +356,7 @@
}
.pd-overview .ov-h .ct {
font-family: var(--font-mono);
font-size: 11.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
}
@@ -388,7 +388,7 @@
width: 64px;
flex-shrink: 0;
color: var(--black-alpha-48);
font-size: 12.5px;
font-size: 13px;
}
.ov-info .v {
flex: 1; min-width: 0;
@@ -400,7 +400,7 @@
content: '·';
color: var(--heat);
margin-right: 6px;
font-weight: 700;
font-weight: 600;
}
/* 商品图片 · 卡片内子 section */
@@ -409,18 +409,18 @@
margin-bottom: 10px;
}
.ov-images-sub .sub-h .ti {
font-size: 12.5px; font-weight: 500;
font-size: 13px; font-weight: 500;
color: var(--black-alpha-72);
}
.ov-images-sub .sub-h .ct {
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
}
.ov-images-sub .sub-h .more {
margin-left: auto;
font-size: 11.5px;
font-size: 12px;
color: var(--heat);
cursor: pointer;
}
@@ -448,7 +448,7 @@
.ov-actions .qa-section:last-child { margin-bottom: 0; }
.ov-actions .qa-section-h {
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .06em;
text-transform: uppercase;
@@ -473,7 +473,7 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
cursor: pointer;
font-size: 12.5px;
font-size: 13px;
color: var(--accent-black);
text-align: center;
transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
@@ -488,14 +488,14 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
}
.qa-item:hover .ic { border-color: var(--heat-20); background: var(--surface); }
.qa-item:hover .ic { border-color: var(--heat); background: var(--surface); }
.qa-item .ic svg { width: 16px; height: 16px; }
.qa-item.primary {
background: var(--heat);
color: var(--accent-white);
border-color: var(--heat);
}
.qa-item.primary .ic { background: rgba(255,255,255,.16); color: var(--accent-white); border-color: rgba(255,255,255,.24); }
.qa-item.primary .ic { background: var(--accent-white); color: var(--heat); border-color: var(--accent-white); }
.qa-item.primary:hover { color: var(--accent-white); box-shadow: var(--shadow-cta-hover); }
/* 状态 pill 三态(通过/不通过/归档) */
@@ -526,7 +526,7 @@
}
.pd-tabs .tab {
padding: 10px 14px;
font-size: 13.5px;
font-size: 14px;
color: var(--black-alpha-56);
background: transparent;
border: 0;
@@ -557,7 +557,7 @@
}
.pd-toolbar .total .ct {
font-family: var(--font-mono);
font-size: 11.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
margin-left: 4px;
@@ -571,15 +571,15 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
cursor: pointer;
font-size: 12.5px;
font-size: 13px;
color: var(--black-alpha-72);
font-family: inherit;
transition: border-color var(--t-base), color var(--t-base);
}
.pd-toolbar .filter:hover { border-color: var(--black-alpha-24); }
.pd-toolbar .filter.open, .pd-toolbar .filter.filtered { border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
.pd-toolbar .filter.open svg, .pd-toolbar .filter.filtered svg { opacity: 1; }
.pd-toolbar .filter svg { width: 10px; height: 10px; opacity: .6; transition: transform var(--t-base); }
.pd-toolbar .filter.open svg, .pd-toolbar .filter.filtered svg { color: var(--heat); }
.pd-toolbar .filter svg { width: 10px; height: 10px; color: var(--ink-3); transition: transform var(--t-base), color var(--t-base); }
.pd-toolbar .filter.open svg { transform: rotate(180deg); }
/* 筛选下拉 · 挂在 body 上避免被祖先 overflow 裁切 */
@@ -600,7 +600,7 @@
background: transparent; border: 0;
padding: 8px 12px;
text-align: left;
font-size: 12.5px;
font-size: 13px;
color: var(--accent-black);
cursor: pointer;
border-radius: var(--r-sm);
@@ -658,12 +658,12 @@
border-right: 1px solid var(--border-faint);
}
.asset-grid.list-view .asset-card .thumb .type-pill {
font-size: 9.5px;
font-size: 12px;
padding: 2px 6px;
top: 4px;
left: 4px;
}
.asset-grid.list-view .asset-card .thumb .ph-frame { font-size: 10px; }
.asset-grid.list-view .asset-card .thumb .ph-frame { font-size: 12px; }
.asset-grid.list-view .asset-card .meta {
padding: 10px 14px;
}
@@ -674,7 +674,7 @@
text-align: center;
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 12.5px;
font-size: 13px;
letter-spacing: .02em;
border: 1px dashed var(--border-faint);
border-radius: var(--r-md);
@@ -706,7 +706,7 @@
background: rgba(0,0,0,.65);
color: var(--accent-white);
border-radius: var(--r-sm);
font-size: 11px;
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(4px);
}
@@ -717,13 +717,13 @@
.asset-card .meta .pill {
padding: 2px 8px;
border-radius: var(--r-sm);
font-size: 10.5px;
font-size: 12px;
font-weight: 500;
}
.asset-card .meta .date {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
}
@@ -738,7 +738,7 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
color: var(--black-alpha-72);
font-size: 12.5px;
font-size: 13px;
font-family: inherit;
cursor: pointer;
}
@@ -759,7 +759,7 @@
}
.task-stat .lbl {
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .04em;
margin-bottom: 6px;
@@ -798,7 +798,7 @@
.task-row.head {
background: var(--background-lighter);
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .04em;
font-weight: 500;
@@ -816,7 +816,7 @@
}
.task-row .nm .id-mono {
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
color: var(--black-alpha-48);
font-weight: 400;
}
@@ -836,7 +836,7 @@
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
border-radius: var(--r-sm);
font-size: 11.5px;
font-size: 12px;
font-weight: 500;
width: fit-content;
}
@@ -891,7 +891,7 @@
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
color: var(--black-alpha-72);
font-size: 11.5px;
font-size: 12px;
font-family: inherit;
cursor: pointer;
transition: border-color var(--t-base), color var(--t-base);