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/design-restraint.css
+64 -64
View File
@@ -305,11 +305,11 @@ aside.sidebar {
}
.search-box:hover { border-color: var(--black-alpha-24); }
.search-box:focus-within { border-color: var(--heat-40); box-shadow: inset 0 0 0 1px var(--heat-40); }
.search-box svg { width: var(--icon-m); height: var(--icon-m); flex-shrink: 0; color: var(--black-alpha-56); }
.search-box svg { width: var(--icon-m); height: var(--icon-m); flex-shrink: 0; color: var(--ink-3); }
.search-box input {
flex: 1; min-width: 0;
border: 0; background: transparent;
font-size: 13.5px; color: var(--accent-black);
font-size: 14px; color: var(--accent-black);
padding: 0;
}
.search-box input::placeholder { color: var(--black-alpha-48); }
@@ -319,13 +319,13 @@ aside.sidebar {
white-space: nowrap;
font-family: var(--font-inter);
font-weight: 700;
font-size: 11px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
}
.nav-section {
font-size: 11px; color: var(--black-alpha-48);
font-size: 12px; color: var(--black-alpha-48);
padding: 16px 12px 8px;
letter-spacing: .04em;
font-weight: 500;
@@ -336,7 +336,7 @@ nav a {
display: flex; align-items: center; gap: 11px;
padding: 9px 12px;
color: var(--black-alpha-56);
font-size: 13.5px; font-weight: 500;
font-size: 14px; font-weight: 500;
border-radius: var(--r-md);
cursor: pointer;
user-select: none;
@@ -344,12 +344,12 @@ nav a {
}
nav a:hover { background: var(--black-alpha-4); color: var(--accent-black); }
nav a.active { background: var(--heat-12); color: var(--heat); }
nav a svg { width: var(--icon-m); height: var(--icon-m); opacity: .85; }
nav a.active svg { opacity: 1; }
nav a svg { width: var(--icon-m); height: var(--icon-m); color: var(--ink-3); }
nav a.active svg { color: var(--orange); }
nav a .pill-mini {
margin-left: auto;
font-family: var(--font-mono);
font-size: 9.5px; font-weight: 600;
font-size: 12px; font-weight: 600;
padding: 2px 7px;
background: var(--surface);
color: var(--black-alpha-48);
@@ -374,7 +374,7 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
background: var(--accent-black);
color: var(--accent-white);
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 11px;
font-weight: 600; font-size: 12px;
}
.user .em { font-size: 13px; color: var(--accent-black); }
@@ -433,7 +433,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
}
.scatter {
position: absolute;
font-family: var(--font-mono); font-size: 8.5px; line-height: 1.05;
font-family: var(--font-mono); font-size: 12px; line-height: 1.05;
color: var(--black-alpha-20); white-space: pre; pointer-events: none;
opacity: .85; letter-spacing: .04em;
}
@@ -441,7 +441,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
position: absolute;
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 10.5px; letter-spacing: .06em;
font-size: 12px; letter-spacing: .06em;
pointer-events: none; opacity: .85; z-index: 1;
}
.sq-mark { position: absolute; width: 5px; height: 5px; background: var(--black-alpha-24); pointer-events: none; }
@@ -454,7 +454,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
background: var(--background-base);
position: sticky; top: 0; z-index: 50;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--black-alpha-48); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--black-alpha-48); }
.crumbs .sep { color: var(--black-alpha-32); }
.crumbs .here { color: var(--accent-black); font-weight: 500; }
.crumbs a:hover { color: var(--accent-black); }
@@ -485,7 +485,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
position: relative;
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.icon-btn:hover { background: var(--black-alpha-4); color: var(--accent-black); border-color: var(--black-alpha-24); }
.icon-btn:hover { background: var(--background-lighter); color: var(--accent-black); border-color: var(--border-loud); }
.icon-btn svg { width: var(--icon-m); height: var(--icon-m); }
.icon-btn .dot-noti {
position: absolute; top: 8px; right: 9px;
@@ -499,7 +499,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
background: var(--accent-crimson); color: var(--accent-white);
border: 1.5px solid var(--surface);
border-radius: var(--r-pill);
font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
letter-spacing: .02em; line-height: 1;
pointer-events: none;
}
@@ -519,14 +519,14 @@ main { position: relative; background: var(--background-base); min-width: 0; }
}
.queue-chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); }
.queue-chip[hidden] { display: none; }
.queue-chip svg { width: var(--icon-m); height: var(--icon-m); color: var(--black-alpha-56); }
.queue-chip svg { width: var(--icon-m); height: var(--icon-m); color: var(--ink-3); }
.queue-chip .count {
display: inline-flex; align-items: center; justify-content: center;
height: 20px; min-width: 20px; padding: 0 6px;
background: var(--heat-12); color: var(--heat);
border: 1px solid var(--heat-20);
border-radius: var(--r-pill);
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
letter-spacing: .02em;
}
@@ -574,7 +574,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
margin-top: 10px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.page-head .sub .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .04em; }
.page-head .sub .mono { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; }
.page-head .actions { display: flex; gap: 10px; align-items: center; }
/* page-head 右上角主操作按钮 · 统一尺寸(对齐 .btn-lg),覆盖各页里 btn / btn-sm / btn-lg 混用 */
.page-head .actions > .btn,
@@ -582,7 +582,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
.page-head .actions > button.btn {
height: 40px;
padding: 0 20px;
font-size: 13.5px;
font-size: 14px;
}
.page-head .actions > .btn svg { width: var(--icon-s); height: var(--icon-s); }
.page-head .actions > .btn.btn-create svg { width: var(--icon-m); height: var(--icon-m); }
@@ -590,7 +590,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-h h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--accent-black); }
.section-h .more {
font-family: var(--font-mono); font-size: 11.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em;
cursor: pointer;
transition: color var(--t-base);
@@ -663,14 +663,14 @@ main { position: relative; background: var(--background-base); min-width: 0; }
.btn-ghost:active { background: var(--black-alpha-7); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: var(--r-md); }
.btn-lg { height: 40px; padding: 0 20px; font-size: 13.5px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14px; }
/* ─── Pills ─── */
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: var(--r-pill);
font-size: 11.5px; font-weight: 500;
font-size: 12px; font-weight: 500;
border: 1px solid var(--border-faint);
background: var(--surface);
color: var(--black-alpha-56);
@@ -725,12 +725,12 @@ main { position: relative; background: var(--background-base); min-width: 0; }
.stat:hover { background: var(--black-alpha-4); }
.stat:last-child { border-right: 0; }
.stat .lbl {
font-size: 12.5px; color: var(--black-alpha-48);
font-size: 13px; color: var(--black-alpha-48);
font-weight: 500; display: flex; align-items: center; gap: 8px;
}
.stat .lbl .badge {
font-family: var(--font-mono);
font-size: 10px; color: var(--black-alpha-48);
font-size: 12px; color: var(--black-alpha-48);
background: var(--black-alpha-4);
padding: 1px 7px;
border-radius: var(--r-sm);
@@ -745,14 +745,14 @@ main { position: relative; background: var(--background-base); min-width: 0; }
}
.stat .v small { font-size: 15px; color: var(--black-alpha-48); font-weight: 500; margin-left: 2px; }
.stat .delta {
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
margin-top: 10px; color: var(--black-alpha-48); letter-spacing: .02em;
}
.stat .delta.up { color: var(--accent-forest); }
.stat .bar { height: 5px; background: var(--black-alpha-7); border-radius: 3px; margin-top: 14px; overflow: hidden; }
.stat .bar > span { display: block; height: 100%; background: var(--heat); border-radius: 3px; }
.stat .sub {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em;
}
@@ -767,7 +767,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
background: var(--surface);
border: 1px solid var(--black-alpha-12);
border-radius: var(--r-md);
font-size: 13.5px;
font-size: 14px;
width: 100%;
font-family: inherit;
color: var(--accent-black);
@@ -808,7 +808,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
.tab:hover { color: var(--accent-black); background: var(--black-alpha-4); }
.tab.active { color: var(--accent-black); border-bottom-color: var(--heat); }
.tab .count {
font-family: var(--font-mono); font-size: 10.5px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); margin-left: 6px;
padding: 1px 7px;
background: var(--black-alpha-4);
@@ -874,8 +874,8 @@ main { position: relative; background: var(--background-base); min-width: 0; }
}
.chip-menu .mi:hover { background: var(--black-alpha-4); }
.chip-menu .mi.selected { color: var(--heat); background: var(--heat-12); }
.chip-menu .mi .mi-check { width: 13px; height: 13px; color: var(--heat); opacity: 0; flex-shrink: 0; }
.chip-menu .mi.selected .mi-check { opacity: 1; }
.chip-menu .mi .mi-check { width: 13px; height: 13px; color: var(--heat); visibility: hidden; flex-shrink: 0; }
.chip-menu .mi.selected .mi-check { visibility: visible; }
.chip-menu .mi-sep { height: 1px; background: var(--border-faint); margin: 4px 6px; }
/* ─── Dropdown unification · 下拉框 / 菜单视觉收口 ─── */
@@ -895,7 +895,7 @@ select.duration-select,
border-radius: var(--r-md) !important;
color: var(--accent-black) !important;
font-family: inherit !important;
font-size: 13.5px !important;
font-size: 14px !important;
transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base) !important;
}
select.select:hover,
@@ -1013,7 +1013,7 @@ select.duration-select:focus,
:where(.tb-menu-empty) {
color: var(--black-alpha-48) !important;
font-family: var(--font-mono) !important;
font-size: 11.5px !important;
font-size: 12px !important;
letter-spacing: .02em !important;
}
@@ -1046,7 +1046,7 @@ select.duration-select:focus,
border-radius: var(--r-md);
color: var(--accent-black);
font-family: inherit;
font-size: 13.5px;
font-size: 14px;
cursor: pointer;
transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base);
}
@@ -1138,10 +1138,10 @@ select.duration-select:focus,
width: 13px;
height: 13px;
color: var(--heat);
opacity: 0;
visibility: hidden;
flex-shrink: 0;
}
.rs-select-option.selected .mi-check { opacity: 1; }
.rs-select-option.selected .mi-check { visibility: visible; }
/* ─── Clear-filters btn · 共享组件 ─── */
.clear-filters {
@@ -1158,7 +1158,7 @@ select.duration-select:focus,
/* ─── Result count · 共享组件 ─── */
.result-meta {
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
color: var(--black-alpha-48);
margin-bottom: 14px;
letter-spacing: .04em;
@@ -1205,7 +1205,7 @@ select.duration-select:focus,
}
.np-header .np-mode-pill {
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
color: var(--heat);
background: var(--heat-12);
border: 1px solid var(--heat-20);
@@ -1273,7 +1273,7 @@ select.duration-select:focus,
}
.np-footer .np-meta {
font-family: var(--font-mono);
font-size: 11.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
margin-right: auto;
@@ -1307,7 +1307,7 @@ select.duration-select:focus,
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.np-body .upload-zone .uz-ic svg { width: 18px; height: 18px; }
.np-body .upload-zone .uz-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; }
.np-body .upload-zone .uz-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
/* 上传子区域标题 (图片案例 / 我的上传) */
.np-section-h {
display: flex; align-items: center; gap: 6px;
@@ -1327,14 +1327,14 @@ select.duration-select:focus,
.np-section-h .counter {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .04em;
font-weight: 400;
}
.np-section-h .counter .num { color: var(--heat); font-weight: 600; }
.np-section-sub {
font-size: 11.5px;
font-size: 12px;
color: var(--black-alpha-56);
margin-bottom: 8px;
line-height: 1.5;
@@ -1354,7 +1354,7 @@ select.duration-select:focus,
position: relative;
display: grid;
place-items: center;
font-size: 9.5px;
font-size: 12px;
color: var(--black-alpha-48);
font-family: var(--font-mono);
letter-spacing: .04em;
@@ -1388,7 +1388,7 @@ select.duration-select:focus,
cursor: pointer;
display: grid;
place-items: center;
font-size: 9.5px;
font-size: 12px;
color: var(--black-alpha-32);
font-family: var(--font-mono);
letter-spacing: .04em;
@@ -1488,7 +1488,7 @@ select.duration-select:focus,
display: flex; align-items: center; gap: 16px;
margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--border-faint);
font-size: 12.5px; color: var(--black-alpha-56);
font-size: 13px; color: var(--black-alpha-56);
}
.list-pager .total { font-family: var(--font-mono); letter-spacing: .02em; }
.list-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; }
@@ -1496,7 +1496,7 @@ select.duration-select:focus,
min-width: 28px; height: 28px; padding: 0 8px;
border: 1px solid var(--border-faint); background: var(--surface);
border-radius: var(--r-sm);
cursor: pointer; font-size: 12.5px; color: var(--black-alpha-72); font-family: inherit;
cursor: pointer; font-size: 13px; color: var(--black-alpha-72); font-family: inherit;
transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.list-pager .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); }
@@ -1513,7 +1513,7 @@ select.duration-select:focus,
padding: 36px 44px;
cursor: default;
}
.np-lightbox .lb-audio svg { width: 34px; height: 34px; color: rgba(255, 255, 255, .8); }
.np-lightbox .lb-audio svg { width: 34px; height: 34px; color: var(--accent-white); }
.np-lightbox .lb-audio audio { width: min(420px, 76vw); }
/* Bullet list · 弹窗内 (复用样式) */
@@ -1537,7 +1537,7 @@ select.duration-select:focus,
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
font-size: 11px; color: var(--black-alpha-56);
font-size: 12px; color: var(--black-alpha-56);
display: grid; place-items: center;
flex-shrink: 0;
font-family: var(--font-mono);
@@ -1588,7 +1588,7 @@ select.duration-select:focus,
color: var(--black-alpha-48);
}
.empty-state h3 { font-size: 14px; font-weight: 600; color: var(--accent-black); margin-bottom: 6px; }
.empty-state p { font-size: 12.5px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; }
.empty-state p { font-size: 13px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; }
/* ─── Progress (5 段流水线 · V2.1 语义色 + 脉动) ─── */
.prog { display: flex; gap: 3px; }
@@ -1618,7 +1618,7 @@ table.t {
}
table.t thead th {
text-align: left;
font-size: 11.5px;
font-size: 12px;
font-weight: 500;
color: var(--black-alpha-48);
padding: 14px 16px;
@@ -1648,7 +1648,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
display: grid; place-items: center;
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 10px;
font-size: 12px;
letter-spacing: .04em;
user-select: none;
overflow: hidden;
@@ -1661,7 +1661,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
padding: 3px 8px;
font-size: 10.5px;
font-size: 12px;
color: var(--black-alpha-56);
font-weight: 500;
}
@@ -1711,7 +1711,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.toast .ic-t svg { width: 13px; height: 13px; }
.toast .txt { font-size: 13px; color: var(--accent-black); font-weight: 500; }
.toast .txt .mono {
font-family: var(--font-mono); font-size: 11px;
font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); display: block; margin-top: 2px;
letter-spacing: .04em; font-weight: 400;
}
@@ -1780,7 +1780,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
background: var(--background-lighter);
color: var(--black-alpha-48);
font-family: var(--font-inter);
font-size: 11px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
@@ -1793,7 +1793,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.shell-command-section {
padding: 8px 10px 6px;
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .06em;
}
@@ -1863,7 +1863,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
background: var(--surface);
color: var(--black-alpha-48);
font-family: var(--font-inter);
font-size: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
}
@@ -1883,7 +1883,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border-top: 1px solid var(--border-faint);
color: var(--black-alpha-48);
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
letter-spacing: .04em;
}
.shell-command-foot .spacer { flex: 1; }
@@ -1929,7 +1929,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
display: block;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
color: var(--black-alpha-48);
letter-spacing: .02em;
}
@@ -2030,12 +2030,12 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.modal-h .ic-m svg { width: 17px; height: 17px; }
.modal-h .ti { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--accent-black); }
.modal-h .ti span {
display: block; font-family: var(--font-mono); font-size: 11px;
display: block; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); font-weight: 400; margin-top: 4px; letter-spacing: .04em;
}
.modal-b {
padding: 20px 24px;
font-size: 13.5px;
font-size: 14px;
color: var(--black-alpha-72);
line-height: 1.75;
overflow-y: auto;
@@ -2046,7 +2046,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.modal-b .mono-acc {
font-family: var(--font-mono); color: var(--heat);
background: var(--heat-12); padding: 2px 6px;
font-size: 11.5px; border-radius: var(--r-sm);
font-size: 12px; border-radius: var(--r-sm);
}
.modal-f {
padding: 16px 24px;
@@ -2214,7 +2214,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
background: var(--heat);
color: var(--accent-white);
font-family: var(--font-mono);
font-size: 10.5px;
font-size: 12px;
font-weight: 500;
letter-spacing: .03em;
border-radius: var(--r-sm);
@@ -2233,7 +2233,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border: 1px solid currentColor;
border-radius: 50%;
display: grid; place-items: center;
font-size: 9px; font-weight: 700;
font-size: 12px; font-weight: 600;
line-height: 1;
font-family: var(--font-mono);
}
@@ -2247,7 +2247,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border: 1px solid currentColor;
border-radius: 50%;
display: grid; place-items: center;
font-size: 9px; font-weight: 700;
font-size: 12px; font-weight: 600;
line-height: 1;
}
@@ -2286,7 +2286,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.tri-missing-pop .pop-h {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
letter-spacing: .04em;
color: var(--heat);
margin-bottom: 6px;
@@ -2303,7 +2303,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,.12);
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
line-height: 1.55;
letter-spacing: .02em;
color: rgba(255,255,255,.78);