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/App.tsx
+6 -4
View File
@@ -384,14 +384,16 @@ export function App() {
}, "图片已生成"); }, "图片已生成");
} }
function onAuthed(payload: { token: string; user: User; team: Team }) { async function onAuthed(payload: { token: string; user: User; team: Team }) {
setToken(payload.token); setToken(payload.token);
setUser(payload.user); setUser(payload.user);
setTeam(payload.team); setTeam(payload.team);
setBooting(false);
setAuthed(true); setAuthed(true);
setBooting(true);
loadData().finally(() => setBooting(false));
navigate("dashboard", { replace: true }); navigate("dashboard", { replace: true });
void loadData().catch((error) => {
console.error("[login] data hydrate failed:", error);
});
} }
async function logout() { async function logout() {
@@ -411,7 +413,7 @@ export function App() {
initialMode={authMode} initialMode={authMode}
onModeChange={(next) => { onModeChange={(next) => {
setAuthMode(next); setAuthMode(next);
window.history.pushState(null, "", next === "register" ? "/register" : "/login"); window.history.pushState(null, "", "/login");
}} }}
onAuthed={onAuthed} onAuthed={onAuthed}
/> />
core/frontend/src/account-page.css
+39 -39
View File
@@ -28,40 +28,40 @@
.balance-banner > .corner-bl { bottom: -7px; left: -7px; } .balance-banner > .corner-bl { bottom: -7px; left: -7px; }
.balance-hero { display: flex; flex-direction: column; gap: 4px; } .balance-hero { display: flex; flex-direction: column; gap: 4px; }
.balance-hero .lbl { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; } .balance-hero .lbl { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; }
.balance-hero .v { font-size: 38px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .balance-hero .v { font-size: 38px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.balance-hero .meta { font-size: 11.5px; color: rgba(255,255,255,.5); font-family: var(--font-mono); letter-spacing: .02em; margin-top: 4px; } .balance-hero .meta { font-size: 12px; color: rgba(255,255,255,.5); font-family: var(--font-mono); letter-spacing: .02em; margin-top: 4px; }
.balance-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.1); } .balance-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.1); }
.balance-sub .col { min-width: 0; } .balance-sub .col { min-width: 0; }
.balance-sub .lbl { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; } .balance-sub .lbl { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .06em; text-transform: uppercase; }
.balance-sub .v { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; font-variant-numeric: tabular-nums; } .balance-sub .v { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.balance-sub .meta { font-size: 10.5px; color: rgba(255,255,255,.42); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; } .balance-sub .meta { font-size: 12px; color: rgba(255,255,255,.42); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
.balance-foot { margin-top: auto; padding-top: 2px; } .balance-foot { margin-top: auto; padding-top: 2px; }
.balance-meter { height: 5px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); overflow: hidden; } .balance-meter { height: 5px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); overflow: hidden; }
.balance-meter > span { display: block; height: 100%; width: 5.4%; background: var(--heat); border-radius: inherit; } .balance-meter > span { display: block; height: 100%; width: 5.4%; background: var(--heat); border-radius: inherit; }
.balance-foot-meta { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; color: rgba(255,255,255,.46); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; } .balance-foot-meta { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; color: rgba(255,255,255,.46); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; } .pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; }
.pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; } .pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.pane .desc { font-size: 11.5px; color: var(--black-alpha-48); margin-bottom: 14px; font-family: var(--font-mono); letter-spacing: .02em; } .pane .desc { font-size: 12px; color: var(--black-alpha-48); margin-bottom: 14px; font-family: var(--font-mono); letter-spacing: .02em; }
.topup-pane { display: flex; flex-direction: column; padding: 20px 22px; margin-bottom: 0; min-height: 246px; } .topup-pane { display: flex; flex-direction: column; padding: 20px 22px; margin-bottom: 0; min-height: 246px; }
.topup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .topup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.topup-head h3 { margin-bottom: 5px; } .topup-head h3 { margin-bottom: 5px; }
.topup-head .desc { margin-bottom: 0; } .topup-head .desc { margin-bottom: 0; }
.topup-selected { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); white-space: nowrap; padding-top: 2px; } .topup-selected { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); white-space: nowrap; padding-top: 2px; }
.recharge-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .recharge-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.recharge-card { min-height: 76px; border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 10px 8px; text-align: center; cursor: pointer; background: var(--surface); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast); } .recharge-card { min-height: 76px; border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 10px 8px; text-align: center; cursor: pointer; background: var(--surface); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast); }
.recharge-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); } .recharge-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-24); }
.recharge-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--heat-40); } .recharge-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--heat-40); }
.recharge-card.selected { border-color: var(--heat); background: var(--heat-12); box-shadow: inset 0 0 0 1px var(--heat); } .recharge-card.selected { border-color: var(--heat); background: var(--heat-12); box-shadow: inset 0 0 0 1px var(--heat); }
.recharge-card.selected::after { content: '✓'; position: absolute; top: 6px; right: 7px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--heat); color: var(--accent-white); font-size: 10px; line-height: 1; } .recharge-card.selected::after { content: '✓'; position: absolute; top: 6px; right: 7px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--heat); color: var(--accent-white); font-size: 12px; line-height: 1; }
.recharge-card .amt { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; } .recharge-card .amt { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.recharge-card .gift { font-size: 10px; color: var(--black-alpha-48); margin-top: 4px; font-family: var(--font-mono); white-space: nowrap; } .recharge-card .gift { font-size: 12px; color: var(--black-alpha-48); margin-top: 4px; font-family: var(--font-mono); white-space: nowrap; }
.recharge-card .gift.bonus { color: var(--accent-forest); font-weight: 600; } .recharge-card .gift.bonus { color: var(--accent-forest); font-weight: 600; }
.recharge-card .ribbon { position: absolute; top: 6px; left: 7px; font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; background: var(--heat); color: var(--accent-white); letter-spacing: .03em; font-weight: 600; border-radius: var(--r-sm); } .recharge-card .ribbon { position: absolute; top: 6px; left: 7px; font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; background: var(--heat); color: var(--accent-white); letter-spacing: .03em; font-weight: 600; border-radius: var(--r-sm); }
.pay-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 0; border-top: 0; } .pay-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 0; border-top: 0; }
.pay-title { font-size: 12px; font-weight: 600; color: var(--accent-black); line-height: 1.2; } .pay-title { font-size: 12px; font-weight: 600; color: var(--accent-black); line-height: 1.2; }
.pay-row .input { width: 100%; box-sizing: border-box; height: 38px; } .pay-row .input { width: 100%; box-sizing: border-box; height: 38px; }
@@ -79,7 +79,7 @@
.billing-tabs .tab:hover { color: var(--accent-black); background: var(--black-alpha-4); } .billing-tabs .tab:hover { color: var(--accent-black); background: var(--black-alpha-4); }
.billing-tabs .tab:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--heat-40); } .billing-tabs .tab:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--heat-40); }
.billing-tabs .tab.active { color: var(--accent-black); border-bottom-color: var(--heat); font-weight: 600; } .billing-tabs .tab.active { color: var(--accent-black); border-bottom-color: var(--heat); font-weight: 600; }
.billing-tabs .tab .count { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); padding: 1px 7px; background: var(--black-alpha-4); border-radius: var(--r-sm); letter-spacing: .04em; } .billing-tabs .tab .count { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); padding: 1px 7px; background: var(--black-alpha-4); border-radius: var(--r-sm); letter-spacing: .04em; }
.billing-tabs .tab.active .count { background: var(--heat-12); color: var(--heat); } .billing-tabs .tab.active .count { background: var(--heat-12); color: var(--heat); }
.tab-panel { display: none; } .tab-panel { display: none; }
@@ -90,9 +90,9 @@
.trend-pane { padding: 18px 20px 14px; display: flex; flex-direction: column; } .trend-pane { padding: 18px 20px 14px; display: flex; flex-direction: column; }
.trend-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; } .trend-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.trend-head h3 { margin-bottom: 0; } .trend-head h3 { margin-bottom: 0; }
.trend-head .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .trend-head .sub { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.trend-head .spacer { flex: 1; } .trend-head .spacer { flex: 1; }
.trend-head .chip { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border: 1px solid var(--border-faint); border-radius: var(--r-pill); color: var(--black-alpha-56); cursor: pointer; } .trend-head .chip { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border: 1px solid var(--border-faint); border-radius: var(--r-pill); color: var(--black-alpha-56); cursor: pointer; }
.trend-head .chip.active { background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black); } .trend-head .chip.active { background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black); }
.trend-chart { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-height: 170px; flex: 1; padding: 6px 4px 2px; position: relative; } .trend-chart { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-height: 170px; flex: 1; padding: 6px 4px 2px; position: relative; }
@@ -101,14 +101,14 @@
.trend-chart .bar > span { position: absolute; left: 0; bottom: 0; display: block; width: 100%; flex: none; min-height: 0; background: var(--heat); border-radius: 2px 2px 0 0; } .trend-chart .bar > span { position: absolute; left: 0; bottom: 0; display: block; width: 100%; flex: none; min-height: 0; background: var(--heat); border-radius: 2px 2px 0 0; }
.trend-chart .bar:hover > span { background: var(--accent-black); } .trend-chart .bar:hover > span { background: var(--accent-black); }
.trend-chart .bar.peak > span { background: var(--accent-black); } .trend-chart .bar.peak > span { background: var(--accent-black); }
.trend-chart .x-axis { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-32); text-align: center; letter-spacing: .02em; } .trend-chart .x-axis { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32); text-align: center; letter-spacing: .02em; }
.trend-foot { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-faint); font-size: 12px; } .trend-foot { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-faint); font-size: 12px; }
.trend-foot .item { display: flex; align-items: baseline; gap: 6px; } .trend-foot .item { display: flex; align-items: baseline; gap: 6px; }
.trend-foot .item .k { color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; } .trend-foot .item .k { color: var(--black-alpha-48); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.trend-foot .item .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-black); } .trend-foot .item .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent-black); }
.trend-foot .item .v.warn { color: #B45309; } .trend-foot .item .v.warn { color: #B45309; }
.stage-pane .usage-line { display: flex; justify-content: space-between; padding: 4px 0 4px; font-size: 12.5px; } .stage-pane .usage-line { display: flex; justify-content: space-between; padding: 4px 0 4px; font-size: 13px; }
.stage-pane .usage-line .k { color: var(--accent-black); } .stage-pane .usage-line .k { color: var(--accent-black); }
.stage-pane .usage-line .v { font-variant-numeric: tabular-nums; color: var(--accent-black); font-weight: 600; } .stage-pane .usage-line .v { font-variant-numeric: tabular-nums; color: var(--accent-black); font-weight: 600; }
.stage-pane .usage-bar { height: 4px; background: var(--background-lighter); border-radius: 2px; margin: 4px 0 10px; overflow: hidden; } .stage-pane .usage-bar { height: 4px; background: var(--background-lighter); border-radius: 2px; margin: 4px 0 10px; overflow: hidden; }
@@ -116,24 +116,24 @@
.stage-pane .total { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border-faint); font-size: 13px; font-weight: 600; } .stage-pane .total { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border-faint); font-size: 13px; font-weight: 600; }
.stage-pane .total .v { font-variant-numeric: tabular-nums; } .stage-pane .total .v { font-variant-numeric: tabular-nums; }
.rule-pane .rule-list { font-size: 12.5px; color: var(--black-alpha-56); line-height: 1.7; } .rule-pane .rule-list { font-size: 13px; color: var(--black-alpha-56); line-height: 1.7; }
.rule-pane .rule-list strong { color: var(--accent-black); font-weight: 600; } .rule-pane .rule-list strong { color: var(--accent-black); font-weight: 600; }
.rule-pane .mono-acc { font-family: var(--font-mono); color: var(--heat); background: var(--heat-12); padding: 1px 5px; font-size: 11.5px; border-radius: var(--r-sm); } .rule-pane .mono-acc { font-family: var(--font-mono); color: var(--heat); background: var(--heat-12); padding: 1px 5px; font-size: 12px; border-radius: var(--r-sm); }
.quota-rules { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-faint); } .quota-rules { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-faint); }
.quota-rules .qr-head { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; } .quota-rules .qr-head { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.quota-rules .step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 12.5px; color: var(--accent-black); } .quota-rules .step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 13px; color: var(--accent-black); }
.quota-rules .step .num { width: 20px; height: 20px; border-radius: 50%; background: var(--heat-12); color: var(--heat); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; } .quota-rules .step .num { width: 20px; height: 20px; border-radius: 50%; background: var(--heat-12); color: var(--heat); font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.quota-rules .step .formula { font-family: var(--font-mono); font-size: 11.5px; color: var(--heat); background: var(--heat-12); padding: 0 4px; border-radius: var(--r-sm); } .quota-rules .step .formula { font-family: var(--font-mono); font-size: 12px; color: var(--heat); background: var(--heat-12); padding: 0 4px; border-radius: var(--r-sm); }
.billing-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border-muted); border-radius: var(--r-md); overflow: hidden; } .billing-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border-muted); border-radius: var(--r-md); overflow: hidden; }
.billing-table th, .billing-table td { padding: 13px 16px; text-align: left; font-size: 12.5px; border-bottom: 0; } .billing-table th, .billing-table td { padding: 13px 16px; text-align: left; font-size: 13px; border-bottom: 0; }
.billing-table thead th { background: var(--background-lighter); border-bottom: 1px solid var(--border-muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } .billing-table thead th { background: var(--background-lighter); border-bottom: 1px solid var(--border-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; }
/* 行间淡分隔线,长流水更易扫读;最后一行不画 */ /* 行间淡分隔线,长流水更易扫读;最后一行不画 */
.billing-table tbody td { border-bottom: 1px solid var(--border-faint); } .billing-table tbody td { border-bottom: 1px solid var(--border-faint); }
.billing-table tbody tr:last-child td { border-bottom: 0; } .billing-table tbody tr:last-child td { border-bottom: 0; }
.billing-table tbody tr:hover { background: var(--background-lighter); } .billing-table tbody tr:hover { background: var(--background-lighter); }
.billing-table .ts { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; } .billing-table .ts { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.billing-table .neg { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent-black); text-align: right; } .billing-table .neg { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent-black); text-align: right; }
.billing-table .pos { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent-forest); text-align: right; } .billing-table .pos { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent-forest); text-align: right; }
.billing-table .zero { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--black-alpha-32); text-align: right; } .billing-table .zero { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--black-alpha-32); text-align: right; }
@@ -141,13 +141,13 @@
.billing-table .quota { font-variant-numeric: tabular-nums; text-align: left; } .billing-table .quota { font-variant-numeric: tabular-nums; text-align: left; }
.billing-table .quota .used { font-weight: 500; color: var(--accent-black); } .billing-table .quota .used { font-weight: 500; color: var(--accent-black); }
.billing-table .quota .lim { color: var(--black-alpha-32); } .billing-table .quota .lim { color: var(--black-alpha-32); }
.billing-table .muted { color: var(--black-alpha-56); font-size: 11.5px; } .billing-table .muted { color: var(--black-alpha-56); font-size: 12px; }
/* 系统流水(无成员):弱化的 mono 占位,不喧宾夺主 */ /* 系统流水(无成员):弱化的 mono 占位,不喧宾夺主 */
.billing-table .sys { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-32); } .billing-table .sys { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32); }
.billing-table .ref { color: var(--black-alpha-48); font-size: 10.5px; font-family: var(--font-mono); } .billing-table .ref { color: var(--black-alpha-48); font-size: 12px; font-family: var(--font-mono); }
.billing-table .who { display: inline-flex; align-items: center; gap: 8px; } .billing-table .who { display: inline-flex; align-items: center; gap: 8px; }
.billing-table .who .av { width: 24px; height: 24px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--accent-black); } .billing-table .who .av { width: 24px; height: 24px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--accent-black); }
.billing-table .role-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 500; } .billing-table .role-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; }
.billing-table .role-pill .dot { width: 5px; height: 5px; border-radius: 50%; } .billing-table .role-pill .dot { width: 5px; height: 5px; border-radius: 50%; }
.billing-table .role-super { background: var(--heat-12); color: var(--heat); } .billing-table .role-super { background: var(--heat-12); color: var(--heat); }
.billing-table .role-super .dot { background: var(--heat); } .billing-table .role-super .dot { background: var(--heat); }
@@ -155,25 +155,25 @@
.billing-table .role-admin .dot { background: #1E40AF; } .billing-table .role-admin .dot { background: #1E40AF; }
.billing-table .role-member { background: var(--background-lighter); color: var(--black-alpha-56); } .billing-table .role-member { background: var(--background-lighter); color: var(--black-alpha-56); }
.billing-table .role-member .dot { background: var(--black-alpha-56); } .billing-table .role-member .dot { background: var(--black-alpha-56); }
.billing-table .status-tag { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--r-sm); letter-spacing: .04em; } .billing-table .status-tag { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: var(--r-sm); letter-spacing: .04em; }
.billing-table .status-tag.ok { background: rgba(66,195,102,.12); color: var(--accent-forest); } .billing-table .status-tag.ok { background: rgba(66,195,102,.12); color: var(--accent-forest); }
.billing-table .status-tag.wip { background: var(--heat-12); color: var(--heat); } .billing-table .status-tag.wip { background: var(--heat-12); color: var(--heat); }
.billing-table .status-tag.fail { background: rgba(235,52,36,.10); color: var(--accent-crimson); } .billing-table .status-tag.fail { background: rgba(235,52,36,.10); color: var(--accent-crimson); }
.bill-pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; } .bill-pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; }
.bill-pager .total { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .bill-pager .total { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.bill-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; } .bill-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; }
.bill-pager .pages button { min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--border-muted); border-radius: var(--r-sm); background: var(--surface); font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-56); cursor: pointer; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); } .bill-pager .pages button { min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--border-muted); border-radius: var(--r-sm); background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); cursor: pointer; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); }
.bill-pager .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); } .bill-pager .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); }
.bill-pager .pages button.active { background: var(--heat); color: var(--accent-white); border-color: var(--heat); font-weight: 600; } .bill-pager .pages button.active { background: var(--heat); color: var(--accent-white); border-color: var(--heat); font-weight: 600; }
.bill-pager .pages button:disabled { opacity: .4; cursor: not-allowed; } .bill-pager .pages button:disabled { opacity: .4; cursor: not-allowed; }
.bill-pager .pages .ellipsis { min-width: 20px; height: 28px; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 11px; user-select: none; } .bill-pager .pages .ellipsis { min-width: 20px; height: 28px; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; user-select: none; }
.billing-table .progress-mini { width: 80px; height: 4px; background: var(--background-lighter); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 8px; } .billing-table .progress-mini { width: 80px; height: 4px; background: var(--background-lighter); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 8px; }
.billing-table .progress-mini > span { display: block; height: 100%; background: var(--heat); } .billing-table .progress-mini > span { display: block; height: 100%; background: var(--heat); }
.filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.filter-bar select, .filter-bar input { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 6px 10px; font-size: 12.5px; font-family: inherit; color: var(--accent-black); } .filter-bar select, .filter-bar input { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 6px 10px; font-size: 13px; font-family: inherit; color: var(--accent-black); }
.filter-bar select { padding-right: 24px; } .filter-bar select { padding-right: 24px; }
.filter-bar .spacer { flex: 1; } .filter-bar .spacer { flex: 1; }
.filter-bar .ct { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; } .filter-bar .ct { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
} }
core/frontend/src/ai-tools-page.css
+80 -80
View File
@@ -44,7 +44,7 @@
.asset-factory .factory-tag { .asset-factory .factory-tag {
align-self: flex-start; align-self: flex-start;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .06em; letter-spacing: .06em;
padding: 2px 8px; padding: 2px 8px;
@@ -62,7 +62,7 @@
} }
.asset-factory .factory-desc { .asset-factory .factory-desc {
margin-top: 8px; margin-top: 8px;
font-size: 13.5px; font-size: 14px;
color: var(--black-alpha-64); color: var(--black-alpha-64);
line-height: 1.55; line-height: 1.55;
} }
@@ -77,7 +77,7 @@
} }
.asset-factory .factory-cta .cost { .asset-factory .factory-cta .cost {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .04em; letter-spacing: .04em;
} }
@@ -86,14 +86,14 @@
.asset-factory .section-h { margin-top: 24px; } .asset-factory .section-h { margin-top: 24px; }
.asset-factory .section-h .sub-mono { .asset-factory .section-h .sub-mono {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
} }
.asset-factory .result-meta { .asset-factory .result-meta {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
margin: 2px 0 12px; margin: 2px 0 12px;
@@ -119,9 +119,9 @@
.asset-factory .task-name-cell { display: flex; align-items: center; gap: 12px; } .asset-factory .task-name-cell { display: flex; align-items: center; gap: 12px; }
.asset-factory .task-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); } .asset-factory .task-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); }
.asset-factory .task-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; } .asset-factory .task-name { font-weight: 600; color: var(--accent-black); font-size: 14px; }
.asset-factory .task-sub { .asset-factory .task-sub {
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
margin-top: 3px; margin-top: 3px;
font-family: var(--font-mono); font-family: var(--font-mono);
@@ -139,7 +139,7 @@
animation: af-hp-pulse 1.4s ease-in-out infinite; animation: af-hp-pulse 1.4s ease-in-out infinite;
} }
.asset-factory .task-list-prog .pct { .asset-factory .task-list-prog .pct {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--heat); letter-spacing: .02em; white-space: nowrap; color: var(--heat); letter-spacing: .02em; white-space: nowrap;
} }
@keyframes af-hp-pulse { @keyframes af-hp-pulse {
@@ -155,11 +155,11 @@
line-height: 1.6; line-height: 1.6;
} }
.asset-factory .task-empty .mono { .asset-factory .task-empty .mono {
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
letter-spacing: .04em; margin-bottom: 6px; letter-spacing: .04em; margin-bottom: 6px;
} }
.asset-factory .task-load-more { display: flex; justify-content: center; margin-top: 18px; } .asset-factory .task-load-more { display: flex; justify-content: center; margin-top: 18px; }
.asset-factory .task-load-more .lm-rest { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-left: 6px; } .asset-factory .task-load-more .lm-rest { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-left: 6px; }
/* ============================================================ /* ============================================================
B · 图片工作室壳(.image-workbench) B · 图片工作室壳(.image-workbench)
@@ -237,7 +237,7 @@
padding: 4px 14px 10px; padding: 4px 14px 10px;
} }
.image-workbench .iw-list-h .mono { .image-workbench .iw-list-h .mono {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .06em; color: var(--black-alpha-48); letter-spacing: .06em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -281,7 +281,7 @@
background: var(--background-lighter); background: var(--background-lighter);
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 12.5px; color: var(--accent-black); font-size: 13px; color: var(--accent-black);
font-family: inherit; outline: none; font-family: inherit; outline: none;
transition: border-color var(--t-base), background var(--t-base); transition: border-color var(--t-base), background var(--t-base);
} }
@@ -313,21 +313,21 @@
} }
.image-workbench .iw-prod-item .body { flex: 1; min-width: 0; } .image-workbench .iw-prod-item .body { flex: 1; min-width: 0; }
.image-workbench .iw-prod-item .nm { .image-workbench .iw-prod-item .nm {
font-size: 12.5px; color: var(--accent-black); font-weight: 500; font-size: 13px; color: var(--accent-black); font-weight: 500;
line-height: 1.3; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.image-workbench .iw-prod-item.active .nm { color: var(--heat); font-weight: 600; } .image-workbench .iw-prod-item.active .nm { color: var(--heat); font-weight: 600; }
.image-workbench .iw-prod-item .sub { .image-workbench .iw-prod-item .sub {
margin-top: 2px; margin-top: 2px;
font-family: var(--font-mono); font-size: 10px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.image-workbench .iw-ps-empty { .image-workbench .iw-ps-empty {
padding: 24px 14px; padding: 24px 14px;
text-align: center; text-align: center;
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em; color: var(--black-alpha-48); letter-spacing: .04em;
line-height: 1.7; line-height: 1.7;
} }
@@ -349,7 +349,7 @@
min-width: 0; max-width: 50%; min-width: 0; max-width: 50%;
} }
.image-workbench .iw-main-h .cur-title .crumb { .image-workbench .iw-main-h .cur-title .crumb {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em; color: var(--black-alpha-48); letter-spacing: .04em;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -381,12 +381,12 @@
background: var(--surface); background: var(--surface);
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 12.5px; color: var(--black-alpha-72); font-size: 13px; color: var(--black-alpha-72);
font-family: inherit; cursor: pointer; font-family: inherit; cursor: pointer;
transition: border-color var(--t-base), color var(--t-base); transition: border-color var(--t-base), color var(--t-base);
} }
.image-workbench .iw-main-h .tb-chip:hover { border-color: var(--heat-20); color: var(--heat); } .image-workbench .iw-main-h .tb-chip:hover { border-color: var(--heat-20); color: var(--heat); }
.image-workbench .iw-main-h .tb-chip svg { width: 10px; height: 10px; opacity: .6; } .image-workbench .iw-main-h .tb-chip svg { width: 10px; height: 10px; color: var(--ink-3); }
.image-workbench .iw-main-h .tb-menu-wrap { position: relative; } .image-workbench .iw-main-h .tb-menu-wrap { position: relative; }
.image-workbench .iw-main-h .tb-search-wrap { display: inline-flex; align-items: center; } .image-workbench .iw-main-h .tb-search-wrap { display: inline-flex; align-items: center; }
.image-workbench .iw-main-body { .image-workbench .iw-main-body {
@@ -419,7 +419,7 @@
width: 22px; height: 22px; width: 22px; height: 22px;
border-radius: 50%; border-radius: 50%;
background: var(--heat-12); color: var(--heat); background: var(--heat-12); color: var(--heat);
font-family: var(--font-mono); font-size: 11px; font-weight: 700; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
display: grid; place-items: center; display: grid; place-items: center;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -443,7 +443,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
color: var(--black-alpha-72); color: var(--black-alpha-72);
font-size: 12.5px; font-size: 13px;
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
transition: background var(--t-base), color var(--t-base), border-color var(--t-base); transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
@@ -489,10 +489,10 @@
object-fit: cover; display: block; object-fit: cover; display: block;
background: var(--black-alpha-4); background: var(--black-alpha-4);
} }
.image-workbench .model-card .m-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); } .image-workbench .model-card .m-name { font-size: 13px; font-weight: 500; color: var(--accent-black); }
.image-workbench .model-card.selected .m-name { color: var(--heat); } .image-workbench .model-card.selected .m-name { color: var(--heat); }
.image-workbench .model-card .m-tag { .image-workbench .model-card .m-tag {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
} }
.image-workbench .model-card .m-check { .image-workbench .model-card .m-check {
@@ -504,9 +504,9 @@
display: grid; place-items: center; display: grid; place-items: center;
color: var(--accent-white); z-index: 2; color: var(--accent-white); z-index: 2;
} }
.image-workbench .model-card .m-check svg { width: 11px; height: 11px; opacity: 0; } .image-workbench .model-card .m-check svg { width: 11px; height: 11px; visibility: hidden; }
.image-workbench .model-card.selected .m-check { background: var(--heat); border-color: var(--heat); } .image-workbench .model-card.selected .m-check { background: var(--heat); border-color: var(--heat); }
.image-workbench .model-card.selected .m-check svg { opacity: 1; } .image-workbench .model-card.selected .m-check svg { visibility: visible; }
/* ── 平台选择 · 3 列卡多选(基线 .platform-card)── */ /* ── 平台选择 · 3 列卡多选(基线 .platform-card)── */
.image-workbench .platform-grid { .image-workbench .platform-grid {
@@ -533,9 +533,9 @@
border-radius: var(--r-md); border-radius: var(--r-md);
display: grid; place-items: center; display: grid; place-items: center;
color: var(--accent-white); color: var(--accent-white);
font-family: var(--font-mono); font-size: 11px; font-weight: 700; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
} }
.image-workbench .platform-card .p-name { font-size: 11.5px; color: var(--accent-black); font-weight: 500; } .image-workbench .platform-card .p-name { font-size: 12px; color: var(--accent-black); font-weight: 500; }
.image-workbench .platform-card.selected .p-name { color: var(--heat); } .image-workbench .platform-card.selected .p-name { color: var(--heat); }
.image-workbench .platform-card .p-check { .image-workbench .platform-card .p-check {
position: absolute; top: 4px; right: 4px; position: absolute; top: 4px; right: 4px;
@@ -572,7 +572,7 @@
} }
.image-workbench .iw-cta-hint { .image-workbench .iw-cta-hint {
margin-top: 8px; margin-top: 8px;
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
text-align: center; line-height: 1.5; text-align: center; line-height: 1.5;
} }
@@ -602,7 +602,7 @@
} }
.image-workbench .iw-pv-h .pv-meta { .image-workbench .iw-pv-h .pv-meta {
float: right; float: right;
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em; color: var(--black-alpha-48); letter-spacing: .04em;
line-height: 1.5; line-height: 1.5;
} }
@@ -614,7 +614,7 @@
} }
.image-workbench .iw-pv-h .pv-line + .pv-line { margin-top: 2px; } .image-workbench .iw-pv-h .pv-line + .pv-line { margin-top: 2px; }
.image-workbench .iw-pv-h .pv-line .k { .image-workbench .iw-pv-h .pv-line .k {
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em; color: var(--black-alpha-48); letter-spacing: .04em;
margin-right: 8px; min-width: 36px; margin-right: 8px; min-width: 36px;
} }
@@ -634,7 +634,7 @@
.image-workbench .gen-meta { .image-workbench .gen-meta {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 0 4px; padding: 0 4px;
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; color: var(--black-alpha-48); letter-spacing: .04em;
} }
.image-workbench .gen-meta .m-sep { color: var(--black-alpha-24); } .image-workbench .gen-meta .m-sep { color: var(--black-alpha-24); }
@@ -702,13 +702,13 @@
gap: 6px; gap: 6px;
} }
.image-workbench .iw-pv-empty .mono { .image-workbench .iw-pv-empty .mono {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .06em; color: var(--black-alpha-48); letter-spacing: .06em;
margin-bottom: 4px; margin-bottom: 4px;
} }
.image-workbench .iw-pv-empty .title { font-size: 14px; font-weight: 600; color: var(--accent-black); } .image-workbench .iw-pv-empty .title { font-size: 14px; font-weight: 600; color: var(--accent-black); }
.image-workbench .iw-pv-empty .hint { .image-workbench .iw-pv-empty .hint {
font-size: 12.5px; color: var(--black-alpha-48); font-size: 13px; color: var(--black-alpha-48);
line-height: 1.6; max-width: 320px; line-height: 1.6; max-width: 320px;
} }
.image-workbench .iw-pv-empty .hint b { color: var(--heat); font-weight: 600; } .image-workbench .iw-pv-empty .hint b { color: var(--heat); font-weight: 600; }
@@ -762,7 +762,7 @@
.image-workbench .ic-new-conv svg { width: 13px; height: 13px; } .image-workbench .ic-new-conv svg { width: 13px; height: 13px; }
.image-workbench .ic-side-sec { .image-workbench .ic-side-sec {
margin: 16px 14px 6px; margin: 16px 14px 6px;
font-family: var(--font-mono); font-size: 10px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .08em; color: var(--black-alpha-48); letter-spacing: .08em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -795,16 +795,16 @@
.image-workbench .ic-conv-item .thumb svg { width: 13px; height: 13px; } .image-workbench .ic-conv-item .thumb svg { width: 13px; height: 13px; }
.image-workbench .ic-conv-item .nm { .image-workbench .ic-conv-item .nm {
flex: 1; min-width: 0; flex: 1; min-width: 0;
font-size: 12.5px; font-size: 13px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.image-workbench .ic-conv-item.active .nm { color: var(--heat); font-weight: 600; } .image-workbench .ic-conv-item.active .nm { color: var(--heat); font-weight: 600; }
.image-workbench .ic-conv-empty { .image-workbench .ic-conv-empty {
padding: 14px 12px; padding: 14px 12px;
font-size: 11.5px; color: var(--black-alpha-48); line-height: 1.55; font-size: 12px; color: var(--black-alpha-48); line-height: 1.55;
} }
.image-workbench .ic-conv-empty .mono { .image-workbench .ic-conv-empty .mono {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
letter-spacing: .02em; display: inline-block; margin-top: 4px; letter-spacing: .02em; display: inline-block; margin-top: 4px;
} }
@@ -841,7 +841,7 @@
color: var(--heat); color: var(--heat);
} }
.image-workbench .ic-empty .badge { .image-workbench .ic-empty .badge {
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
letter-spacing: .08em; color: var(--black-alpha-48); letter-spacing: .08em; color: var(--black-alpha-48);
text-transform: uppercase; text-transform: uppercase;
} }
@@ -890,7 +890,7 @@
.image-workbench .ic-msg-prompt .pt-tags { .image-workbench .ic-msg-prompt .pt-tags {
margin-top: 8px; margin-top: 8px;
display: flex; flex-wrap: wrap; gap: 6px; align-items: center; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
} }
.image-workbench .ic-msg-prompt .pt-tags .meta-chip { .image-workbench .ic-msg-prompt .pt-tags .meta-chip {
@@ -944,7 +944,7 @@
.image-workbench .ic-input-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .image-workbench .ic-input-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.image-workbench .ic-input-bottom .right-meta { .image-workbench .ic-input-bottom .right-meta {
margin-left: auto; margin-left: auto;
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
} }
.image-workbench .ic-input-bottom .right-meta .val { color: var(--accent-black); } .image-workbench .ic-input-bottom .right-meta .val { color: var(--accent-black); }
@@ -955,11 +955,11 @@
border: 0; border-radius: var(--r-md); border: 0; border-radius: var(--r-md);
cursor: pointer; cursor: pointer;
display: grid; place-items: center; display: grid; place-items: center;
transition: opacity var(--t-base), filter var(--t-base); transition: background var(--t-base), color var(--t-base), filter var(--t-base);
margin-left: 8px; margin-left: 8px;
} }
.image-workbench .ic-input .send-btn:hover { filter: brightness(1.05); } .image-workbench .ic-input .send-btn:hover { filter: brightness(1.05); }
.image-workbench .ic-input .send-btn:disabled { opacity: .4; cursor: not-allowed; } .image-workbench .ic-input .send-btn:disabled { background: var(--background-lighter); color: var(--ink-3); cursor: not-allowed; }
.image-workbench .ic-input .send-btn svg { width: 15px; height: 15px; } .image-workbench .ic-input .send-btn svg { width: 15px; height: 15px; }
/* 输入栏参数胶囊(比例 / 风格 / 张数 · 基线 .param + 下拉气泡) */ /* 输入栏参数胶囊(比例 / 风格 / 张数 · 基线 .param + 下拉气泡) */
@@ -970,18 +970,18 @@
background: var(--background-lighter); background: var(--background-lighter);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--r-pill); border-radius: var(--r-pill);
font-size: 11.5px; color: var(--black-alpha-72); font-size: 12px; color: var(--black-alpha-72);
font-family: inherit; cursor: pointer; font-family: inherit; cursor: pointer;
transition: border-color var(--t-base), color var(--t-base), background var(--t-base); transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
} }
.image-workbench .ic-param-btn:hover { background: var(--surface); border-color: var(--border-faint); } .image-workbench .ic-param-btn:hover { background: var(--surface); border-color: var(--border-faint); }
.image-workbench .ic-param.open .ic-param-btn { background: var(--heat-12); color: var(--heat); border-color: transparent; } .image-workbench .ic-param.open .ic-param-btn { background: var(--heat-12); color: var(--heat); border-color: transparent; }
.image-workbench .ic-param-btn .lbl-mono { .image-workbench .ic-param-btn .lbl-mono {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; margin-right: 1px; color: var(--black-alpha-48); letter-spacing: .02em; margin-right: 1px;
} }
.image-workbench .ic-param.open .ic-param-btn .lbl-mono { color: var(--heat); } .image-workbench .ic-param.open .ic-param-btn .lbl-mono { color: var(--heat); }
.image-workbench .ic-param-btn svg { width: 10px; height: 10px; opacity: .6; } .image-workbench .ic-param-btn svg { width: 10px; height: 10px; color: var(--ink-3); }
.image-workbench .ic-param.open .ic-param-btn svg { transform: rotate(180deg); } .image-workbench .ic-param.open .ic-param-btn svg { transform: rotate(180deg); }
.image-workbench .ic-param-menu { .image-workbench .ic-param-menu {
position: absolute; bottom: calc(100% + 6px); left: -2px; position: absolute; bottom: calc(100% + 6px); left: -2px;
@@ -1001,13 +1001,13 @@
padding: 7px 10px; padding: 7px 10px;
border: 0; border-radius: var(--r-sm); border: 0; border-radius: var(--r-sm);
background: transparent; background: transparent;
font-size: 12.5px; color: var(--accent-black); font-size: 13px; color: var(--accent-black);
font-family: inherit; text-align: left; cursor: pointer; font-family: inherit; text-align: left; cursor: pointer;
} }
.image-workbench .ic-param-menu .mi:hover { background: var(--background-lighter); } .image-workbench .ic-param-menu .mi:hover { background: var(--background-lighter); }
.image-workbench .ic-param-menu .mi.selected { color: var(--heat); font-weight: 600; } .image-workbench .ic-param-menu .mi.selected { color: var(--heat); font-weight: 600; }
.image-workbench .ic-param-menu .mi .mi-check { margin-left: auto; opacity: 0; color: var(--heat); } .image-workbench .ic-param-menu .mi .mi-check { margin-left: auto; visibility: hidden; color: var(--heat); }
.image-workbench .ic-param-menu .mi.selected .mi-check { opacity: 1; } .image-workbench .ic-param-menu .mi.selected .mi-check { visibility: visible; }
/* ============================================================ /* ============================================================
C · 模特图方案对比 Demo(.model-demo · 纯静态展示) C · 模特图方案对比 Demo(.model-demo · 纯静态展示)
@@ -1057,7 +1057,7 @@
.model-demo .dm-side-h { padding: 14px 14px 10px; flex-shrink: 0; } .model-demo .dm-side-h { padding: 14px 14px 10px; flex-shrink: 0; }
.model-demo .dm-side-h .ti-row { display: flex; align-items: center; margin-bottom: 10px; } .model-demo .dm-side-h .ti-row { display: flex; align-items: center; margin-bottom: 10px; }
.model-demo .dm-side-h .ti { .model-demo .dm-side-h .ti {
font-size: 11px; font-family: var(--font-mono); font-size: 12px; font-family: var(--font-mono);
color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase; color: var(--black-alpha-48); letter-spacing: .08em; text-transform: uppercase;
} }
.model-demo .dm-side-h .add { .model-demo .dm-side-h .add {
@@ -1079,11 +1079,11 @@
transition: border-color var(--t-base), background var(--t-base); transition: border-color var(--t-base), background var(--t-base);
} }
.model-demo .dm-search:focus-within { border-color: var(--heat-40); background: var(--surface); } .model-demo .dm-search:focus-within { border-color: var(--heat-40); background: var(--surface); }
.model-demo .dm-search svg { width: 13px; height: 13px; color: var(--black-alpha-48); flex-shrink: 0; } .model-demo .dm-search svg { width: 13px; height: 13px; color: var(--ink-3); flex-shrink: 0; }
.model-demo .dm-search input { .model-demo .dm-search input {
flex: 1; min-width: 0; height: 100%; flex: 1; min-width: 0; height: 100%;
border: 0; outline: 0; background: transparent; border: 0; outline: 0; background: transparent;
font-size: 12.5px; color: var(--accent-black); font-family: inherit; font-size: 13px; color: var(--accent-black); font-family: inherit;
} }
.model-demo .dm-search input::placeholder { color: var(--black-alpha-48); } .model-demo .dm-search input::placeholder { color: var(--black-alpha-48); }
@@ -1112,18 +1112,18 @@
overflow: hidden; overflow: hidden;
background: repeating-linear-gradient(135deg, transparent 0 4px, var(--black-alpha-4) 4px 5px); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--black-alpha-4) 4px 5px);
display: grid; place-items: center; display: grid; place-items: center;
font-family: var(--font-mono); font-size: 9px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32);
} }
.model-demo .dm-prod.active .thumb { border-color: var(--heat); } .model-demo .dm-prod.active .thumb { border-color: var(--heat); }
.model-demo .dm-prod .body { flex: 1; min-width: 0; } .model-demo .dm-prod .body { flex: 1; min-width: 0; }
.model-demo .dm-prod .nm { .model-demo .dm-prod .nm {
font-size: 12.5px; color: var(--accent-black); font-weight: 500; line-height: 1.3; font-size: 13px; color: var(--accent-black); font-weight: 500; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.model-demo .dm-prod.active .nm { color: var(--heat); font-weight: 600; } .model-demo .dm-prod.active .nm { color: var(--heat); font-weight: 600; }
.model-demo .dm-prod .sub { .model-demo .dm-prod .sub {
margin-top: 2px; margin-top: 2px;
font-family: var(--font-mono); font-size: 10px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
@@ -1143,7 +1143,7 @@
.model-demo .dm-all:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-12); } .model-demo .dm-all:hover { border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
.model-demo .dm-all .ct { .model-demo .dm-all .ct {
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
margin-left: auto; margin-left: auto;
} }
.model-demo .dm-all svg { width: 12px; height: 12px; } .model-demo .dm-all svg { width: 12px; height: 12px; }
@@ -1158,7 +1158,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-pill); border-radius: var(--r-pill);
color: var(--accent-black); color: var(--accent-black);
font-size: 12.5px; font-weight: 500; font-family: inherit; font-size: 13px; font-weight: 500; font-family: inherit;
cursor: pointer; cursor: pointer;
transition: background var(--t-base), border-color var(--t-base), color var(--t-base); transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
} }
@@ -1188,11 +1188,11 @@
border-radius: var(--r-sm); border-radius: var(--r-sm);
display: grid; place-items: center; display: grid; place-items: center;
color: var(--heat); color: var(--heat);
font-family: var(--font-mono); font-size: 11px; font-weight: 600; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
} }
.model-demo .dm-batch-h .meta { flex: 1; min-width: 0; } .model-demo .dm-batch-h .meta { flex: 1; min-width: 0; }
.model-demo .dm-batch-h .nm { font-size: 13px; font-weight: 600; color: var(--accent-black); } .model-demo .dm-batch-h .nm { font-size: 13px; font-weight: 600; color: var(--accent-black); }
.model-demo .dm-batch-h .info { margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .model-demo .dm-batch-h .info { margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.model-demo .dm-batch-h .info .sep { color: var(--black-alpha-24); } .model-demo .dm-batch-h .info .sep { color: var(--black-alpha-24); }
.model-demo .dm-batch-h .ops { display: flex; gap: 4px; } .model-demo .dm-batch-h .ops { display: flex; gap: 4px; }
.model-demo .dm-batch-h .ops button { .model-demo .dm-batch-h .ops button {
@@ -1219,7 +1219,7 @@
.model-demo .dm-cell .ph { .model-demo .dm-cell .ph {
position: absolute; inset: 0; position: absolute; inset: 0;
display: grid; place-items: center; display: grid; place-items: center;
font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32);
background: repeating-linear-gradient(135deg, transparent 0 6px, var(--black-alpha-3) 6px 7px); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--black-alpha-3) 6px 7px);
} }
.model-demo .dm-cell .tag { .model-demo .dm-cell .tag {
@@ -1228,7 +1228,7 @@
background: var(--accent-black); background: var(--accent-black);
color: var(--accent-white); color: var(--accent-white);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 10px; font-weight: 500; font-size: 12px; font-weight: 500;
} }
/* ════════════════════════════════════════════════ /* ════════════════════════════════════════════════
@@ -1243,7 +1243,7 @@
} }
.model-demo.dm-a .dm-main-h .cur { min-width: 0; } .model-demo.dm-a .dm-main-h .cur { min-width: 0; }
.model-demo.dm-a .dm-main-h .crumb { .model-demo.dm-a .dm-main-h .crumb {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em; color: var(--black-alpha-48); letter-spacing: .04em;
} }
.model-demo.dm-a .dm-main-h h2 { .model-demo.dm-a .dm-main-h h2 {
@@ -1253,7 +1253,7 @@
.model-demo.dm-a .dm-main-h .stats { .model-demo.dm-a .dm-main-h .stats {
margin-left: auto; margin-left: auto;
display: flex; gap: 6px; display: flex; gap: 6px;
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
} }
.model-demo.dm-a .dm-main-h .stats b { color: var(--accent-black); font-weight: 600; } .model-demo.dm-a .dm-main-h .stats b { color: var(--accent-black); font-weight: 600; }
@@ -1276,7 +1276,7 @@
.model-demo.dm-a .dm-field { margin-bottom: 16px; } .model-demo.dm-a .dm-field { margin-bottom: 16px; }
.model-demo.dm-a .dm-field:last-child { margin-bottom: 0; } .model-demo.dm-a .dm-field:last-child { margin-bottom: 0; }
.model-demo.dm-a .dm-field-h { font-size: 12px; font-weight: 600; color: var(--accent-black); margin-bottom: 8px; } .model-demo.dm-a .dm-field-h { font-size: 12px; font-weight: 600; color: var(--accent-black); margin-bottom: 8px; }
.model-demo.dm-a .dm-field-h .opt { font-weight: 400; font-size: 11px; color: var(--black-alpha-48); margin-left: 4px; } .model-demo.dm-a .dm-field-h .opt { font-weight: 400; font-size: 12px; color: var(--black-alpha-48); margin-left: 4px; }
.model-demo.dm-a .dm-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .model-demo.dm-a .dm-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.model-demo.dm-a .dm-model { .model-demo.dm-a .dm-model {
@@ -1292,14 +1292,14 @@
.model-demo.dm-a .dm-model .ph { .model-demo.dm-a .dm-model .ph {
position: absolute; inset: 0; position: absolute; inset: 0;
display: grid; place-items: center; display: grid; place-items: center;
font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-32);
background: repeating-linear-gradient(135deg, transparent 0 6px, var(--black-alpha-3) 6px 7px); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--black-alpha-3) 6px 7px);
} }
.model-demo.dm-a .dm-model .nm { .model-demo.dm-a .dm-model .nm {
position: absolute; bottom: 0; left: 0; right: 0; position: absolute; bottom: 0; left: 0; right: 0;
padding: 4px 6px; padding: 4px 6px;
background: linear-gradient(transparent, var(--black-alpha-48)); background: linear-gradient(transparent, var(--black-alpha-48));
font-size: 10px; color: var(--accent-white); font-weight: 500; font-size: 12px; color: var(--accent-white); font-weight: 500;
} }
.model-demo.dm-a .dm-model.selected::after { .model-demo.dm-a .dm-model.selected::after {
content: ''; position: absolute; top: 4px; right: 4px; content: ''; position: absolute; top: 4px; right: 4px;
@@ -1333,7 +1333,7 @@
background: var(--background-lighter); background: var(--background-lighter);
border: 1px solid var(--black-alpha-12); border: 1px solid var(--black-alpha-12);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-family: inherit; font-size: 12.5px; font-family: inherit; font-size: 13px;
color: var(--accent-black); color: var(--accent-black);
outline: none; resize: vertical; outline: none; resize: vertical;
} }
@@ -1349,7 +1349,7 @@
.model-demo.dm-a .dm-cost { .model-demo.dm-a .dm-cost {
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
} }
.model-demo.dm-a .dm-cost .v { color: var(--accent-black); font-weight: 600; } .model-demo.dm-a .dm-cost .v { color: var(--accent-black); font-weight: 600; }
@@ -1372,7 +1372,7 @@
} }
.model-demo.dm-a .dm-result-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .model-demo.dm-a .dm-result-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.model-demo.dm-a .dm-result-h .ti { font-size: 15px; font-weight: 600; color: var(--accent-black); } .model-demo.dm-a .dm-result-h .ti { font-size: 15px; font-weight: 600; color: var(--accent-black); }
.model-demo.dm-a .dm-result-h .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .model-demo.dm-a .dm-result-h .sub { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.model-demo.dm-a .dm-batch-h { .model-demo.dm-a .dm-batch-h {
display: flex; align-items: center; gap: 10px; display: flex; align-items: center; gap: 10px;
margin-bottom: 12px; padding-bottom: 10px; margin-bottom: 12px; padding-bottom: 10px;
@@ -1389,7 +1389,7 @@
background: var(--surface); background: var(--surface);
} }
.model-demo.dm-b .dm-main-h .crumb { .model-demo.dm-b .dm-main-h .crumb {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .04em; margin-bottom: 4px; color: var(--black-alpha-48); letter-spacing: .04em; margin-bottom: 4px;
} }
.model-demo.dm-b .dm-main-h .title-row { display: flex; align-items: center; gap: 14px; } .model-demo.dm-b .dm-main-h .title-row { display: flex; align-items: center; gap: 14px; }
@@ -1400,7 +1400,7 @@
.model-demo.dm-b .dm-main-h .title-row .dm-back { margin-left: auto; } .model-demo.dm-b .dm-main-h .title-row .dm-back { margin-left: auto; }
.model-demo.dm-b .dm-main-h .row { display: flex; align-items: center; gap: 16px; margin-top: 6px; } .model-demo.dm-b .dm-main-h .row { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.model-demo.dm-b .dm-main-h .stats { .model-demo.dm-b .dm-main-h .stats {
font-family: var(--font-mono); font-size: 11px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
display: flex; gap: 4px; display: flex; gap: 4px;
} }
@@ -1431,7 +1431,7 @@
transition: border-color var(--t-base), color var(--t-base); transition: border-color var(--t-base), color var(--t-base);
} }
.model-demo.dm-b .dm-tb .chip:hover { border-color: var(--heat-20); color: var(--heat); } .model-demo.dm-b .dm-tb .chip:hover { border-color: var(--heat-20); color: var(--heat); }
.model-demo.dm-b .dm-tb .chip svg { width: 10px; height: 10px; opacity: .6; } .model-demo.dm-b .dm-tb .chip svg { width: 10px; height: 10px; color: var(--ink-3); }
.model-demo.dm-b .dm-stream { .model-demo.dm-b .dm-stream {
flex: 1; min-height: 0; flex: 1; min-height: 0;
@@ -1442,7 +1442,7 @@
.model-demo.dm-b .dm-day-h { .model-demo.dm-b .dm-day-h {
display: flex; align-items: baseline; gap: 8px; display: flex; align-items: baseline; gap: 8px;
margin: 6px 0 10px; margin: 6px 0 10px;
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase;
} }
.model-demo.dm-b .dm-day-h::before { .model-demo.dm-b .dm-day-h::before {
@@ -1456,13 +1456,13 @@
} }
.model-demo.dm-b .dm-batch-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .model-demo.dm-b .dm-batch-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.model-demo.dm-b .dm-batch-h .nm { font-size: 13.5px; } .model-demo.dm-b .dm-batch-h .nm { font-size: 14px; }
.model-demo.dm-b .dm-batch-h .info { display: flex; flex-wrap: wrap; gap: 4px; } .model-demo.dm-b .dm-batch-h .info { display: flex; flex-wrap: wrap; gap: 4px; }
/* 状态 pill 紧贴标题右侧(局部尺寸变体 · 不改全局 .pill) */ /* 状态 pill 紧贴标题右侧(局部尺寸变体 · 不改全局 .pill) */
.model-demo.dm-b .stat-pill { .model-demo.dm-b .stat-pill {
margin-left: 8px; margin-left: 8px;
padding: 2px 7px; padding: 2px 7px;
font-size: 10px; font-size: 12px;
} }
.model-demo.dm-b .stat-pill .dot { width: 4px; height: 4px; } .model-demo.dm-b .stat-pill .dot { width: 4px; height: 4px; }
@@ -1499,16 +1499,16 @@
} }
.model-demo.dm-b .dm-param .pchip:hover { background: var(--surface); border-color: var(--border-faint); } .model-demo.dm-b .dm-param .pchip:hover { background: var(--surface); border-color: var(--border-faint); }
.model-demo.dm-b .dm-param .pchip.active { background: var(--heat-12); color: var(--heat); } .model-demo.dm-b .dm-param .pchip.active { background: var(--heat-12); color: var(--heat); }
.model-demo.dm-b .dm-param .pchip svg { width: 10px; height: 10px; opacity: .6; } .model-demo.dm-b .dm-param .pchip svg { width: 10px; height: 10px; color: var(--ink-3); }
.model-demo.dm-b .dm-param .pchip .lbl-mono { .model-demo.dm-b .dm-param .pchip .lbl-mono {
font-family: var(--font-mono); font-size: 10px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
} }
.model-demo.dm-b .dm-param .pchip.active .lbl-mono { color: var(--heat); } .model-demo.dm-b .dm-param .pchip.active .lbl-mono { color: var(--heat); }
.model-demo.dm-b .dm-param .pchip .muted { color: var(--black-alpha-48); } .model-demo.dm-b .dm-param .pchip .muted { color: var(--black-alpha-48); }
.model-demo.dm-b .dm-param .spacer { flex: 1; } .model-demo.dm-b .dm-param .spacer { flex: 1; }
.model-demo.dm-b .dm-param .meta-right { .model-demo.dm-b .dm-param .meta-right {
font-family: var(--font-mono); font-size: 10.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
margin-right: 6px; text-align: right; margin-right: 6px; text-align: right;
} }
@@ -1517,7 +1517,7 @@
height: 38px; padding: 0 20px; height: 38px; padding: 0 20px;
background: var(--heat); color: var(--accent-white); background: var(--heat); color: var(--accent-white);
border: 0; border-radius: var(--r-md); border: 0; border-radius: var(--r-md);
font-size: 13.5px; font-weight: 600; font-family: inherit; font-size: 14px; font-weight: 600; font-family: inherit;
cursor: pointer; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px; display: inline-flex; align-items: center; gap: 8px;
box-shadow: var(--shadow-cta); box-shadow: var(--shadow-cta);
@@ -1537,7 +1537,7 @@
.asset-factory .placeholder.has-img .ph-frame { display: none; } .asset-factory .placeholder.has-img .ph-frame { display: none; }
.asset-factory .placeholder.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .asset-factory .placeholder.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-factory .history-body { min-width: 0; } .asset-factory .history-body { min-width: 0; }
.asset-factory .history-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; } .asset-factory .history-name { font-weight: 600; color: var(--accent-black); font-size: 14px; }
.asset-factory .history-type { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; } .asset-factory .history-type { font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
.asset-factory .history-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .asset-factory .history-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.asset-factory .history-foot .mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); } .asset-factory .history-foot .mono { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }
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: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: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 { .search-box input {
flex: 1; min-width: 0; flex: 1; min-width: 0;
border: 0; background: transparent; border: 0; background: transparent;
font-size: 13.5px; color: var(--accent-black); font-size: 14px; color: var(--accent-black);
padding: 0; padding: 0;
} }
.search-box input::placeholder { color: var(--black-alpha-48); } .search-box input::placeholder { color: var(--black-alpha-48); }
@@ -319,13 +319,13 @@ aside.sidebar {
white-space: nowrap; white-space: nowrap;
font-family: var(--font-inter); font-family: var(--font-inter);
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
} }
.nav-section { .nav-section {
font-size: 11px; color: var(--black-alpha-48); font-size: 12px; color: var(--black-alpha-48);
padding: 16px 12px 8px; padding: 16px 12px 8px;
letter-spacing: .04em; letter-spacing: .04em;
font-weight: 500; font-weight: 500;
@@ -336,7 +336,7 @@ nav a {
display: flex; align-items: center; gap: 11px; display: flex; align-items: center; gap: 11px;
padding: 9px 12px; padding: 9px 12px;
color: var(--black-alpha-56); color: var(--black-alpha-56);
font-size: 13.5px; font-weight: 500; font-size: 14px; font-weight: 500;
border-radius: var(--r-md); border-radius: var(--r-md);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@@ -344,12 +344,12 @@ nav a {
} }
nav a:hover { background: var(--black-alpha-4); color: var(--accent-black); } nav a:hover { background: var(--black-alpha-4); color: var(--accent-black); }
nav a.active { background: var(--heat-12); color: var(--heat); } 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 svg { width: var(--icon-m); height: var(--icon-m); color: var(--ink-3); }
nav a.active svg { opacity: 1; } nav a.active svg { color: var(--orange); }
nav a .pill-mini { nav a .pill-mini {
margin-left: auto; margin-left: auto;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 9.5px; font-weight: 600; font-size: 12px; font-weight: 600;
padding: 2px 7px; padding: 2px 7px;
background: var(--surface); background: var(--surface);
color: var(--black-alpha-48); color: var(--black-alpha-48);
@@ -374,7 +374,7 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
background: var(--accent-black); background: var(--accent-black);
color: var(--accent-white); color: var(--accent-white);
display: flex; align-items: center; justify-content: center; 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); } .user .em { font-size: 13px; color: var(--accent-black); }
@@ -433,7 +433,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
} }
.scatter { .scatter {
position: absolute; 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; color: var(--black-alpha-20); white-space: pre; pointer-events: none;
opacity: .85; letter-spacing: .04em; opacity: .85; letter-spacing: .04em;
} }
@@ -441,7 +441,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
position: absolute; position: absolute;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); 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; pointer-events: none; opacity: .85; z-index: 1;
} }
.sq-mark { position: absolute; width: 5px; height: 5px; background: var(--black-alpha-24); pointer-events: none; } .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); background: var(--background-base);
position: sticky; top: 0; z-index: 50; 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 .sep { color: var(--black-alpha-32); }
.crumbs .here { color: var(--accent-black); font-weight: 500; } .crumbs .here { color: var(--accent-black); font-weight: 500; }
.crumbs a:hover { color: var(--accent-black); } .crumbs a:hover { color: var(--accent-black); }
@@ -485,7 +485,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
position: relative; position: relative;
transition: background var(--t-base), border-color var(--t-base), color var(--t-base); 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 svg { width: var(--icon-m); height: var(--icon-m); }
.icon-btn .dot-noti { .icon-btn .dot-noti {
position: absolute; top: 8px; right: 9px; 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); background: var(--accent-crimson); color: var(--accent-white);
border: 1.5px solid var(--surface); border: 1.5px solid var(--surface);
border-radius: var(--r-pill); 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; letter-spacing: .02em; line-height: 1;
pointer-events: none; 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:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); }
.queue-chip[hidden] { display: none; } .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 { .queue-chip .count {
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
height: 20px; min-width: 20px; padding: 0 6px; height: 20px; min-width: 20px; padding: 0 6px;
background: var(--heat-12); color: var(--heat); background: var(--heat-12); color: var(--heat);
border: 1px solid var(--heat-20); border: 1px solid var(--heat-20);
border-radius: var(--r-pill); 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; letter-spacing: .02em;
} }
@@ -574,7 +574,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
margin-top: 10px; margin-top: 10px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; 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 .actions { display: flex; gap: 10px; align-items: center; }
/* page-head 右上角主操作按钮 · 统一尺寸(对齐 .btn-lg),覆盖各页里 btn / btn-sm / btn-lg 混用 */ /* page-head 右上角主操作按钮 · 统一尺寸(对齐 .btn-lg),覆盖各页里 btn / btn-sm / btn-lg 混用 */
.page-head .actions > .btn, .page-head .actions > .btn,
@@ -582,7 +582,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
.page-head .actions > button.btn { .page-head .actions > button.btn {
height: 40px; height: 40px;
padding: 0 20px; 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 svg { width: var(--icon-s); height: var(--icon-s); }
.page-head .actions > .btn.btn-create svg { width: var(--icon-m); height: var(--icon-m); } .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 { 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 h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--accent-black); }
.section-h .more { .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; color: var(--black-alpha-48); letter-spacing: .04em;
cursor: pointer; cursor: pointer;
transition: color var(--t-base); 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-ghost:active { background: var(--black-alpha-7); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: var(--r-md); } .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 ─── */ /* ─── Pills ─── */
.pill { .pill {
display: inline-flex; align-items: center; gap: 6px; display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; padding: 4px 10px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
font-size: 11.5px; font-weight: 500; font-size: 12px; font-weight: 500;
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
background: var(--surface); background: var(--surface);
color: var(--black-alpha-56); 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:hover { background: var(--black-alpha-4); }
.stat:last-child { border-right: 0; } .stat:last-child { border-right: 0; }
.stat .lbl { .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; font-weight: 500; display: flex; align-items: center; gap: 8px;
} }
.stat .lbl .badge { .stat .lbl .badge {
font-family: var(--font-mono); 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); background: var(--black-alpha-4);
padding: 1px 7px; padding: 1px 7px;
border-radius: var(--r-sm); 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 .v small { font-size: 15px; color: var(--black-alpha-48); font-weight: 500; margin-left: 2px; }
.stat .delta { .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; margin-top: 10px; color: var(--black-alpha-48); letter-spacing: .02em;
} }
.stat .delta.up { color: var(--accent-forest); } .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 { 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 .bar > span { display: block; height: 100%; background: var(--heat); border-radius: 3px; }
.stat .sub { .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; 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); background: var(--surface);
border: 1px solid var(--black-alpha-12); border: 1px solid var(--black-alpha-12);
border-radius: var(--r-md); border-radius: var(--r-md);
font-size: 13.5px; font-size: 14px;
width: 100%; width: 100%;
font-family: inherit; font-family: inherit;
color: var(--accent-black); 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:hover { color: var(--accent-black); background: var(--black-alpha-4); }
.tab.active { color: var(--accent-black); border-bottom-color: var(--heat); } .tab.active { color: var(--accent-black); border-bottom-color: var(--heat); }
.tab .count { .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; color: var(--black-alpha-48); margin-left: 6px;
padding: 1px 7px; padding: 1px 7px;
background: var(--black-alpha-4); 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:hover { background: var(--black-alpha-4); }
.chip-menu .mi.selected { color: var(--heat); background: var(--heat-12); } .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 .mi-check { width: 13px; height: 13px; color: var(--heat); visibility: hidden; flex-shrink: 0; }
.chip-menu .mi.selected .mi-check { opacity: 1; } .chip-menu .mi.selected .mi-check { visibility: visible; }
.chip-menu .mi-sep { height: 1px; background: var(--border-faint); margin: 4px 6px; } .chip-menu .mi-sep { height: 1px; background: var(--border-faint); margin: 4px 6px; }
/* ─── Dropdown unification · 下拉框 / 菜单视觉收口 ─── */ /* ─── Dropdown unification · 下拉框 / 菜单视觉收口 ─── */
@@ -895,7 +895,7 @@ select.duration-select,
border-radius: var(--r-md) !important; border-radius: var(--r-md) !important;
color: var(--accent-black) !important; color: var(--accent-black) !important;
font-family: inherit !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; transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base) !important;
} }
select.select:hover, select.select:hover,
@@ -1013,7 +1013,7 @@ select.duration-select:focus,
:where(.tb-menu-empty) { :where(.tb-menu-empty) {
color: var(--black-alpha-48) !important; color: var(--black-alpha-48) !important;
font-family: var(--font-mono) !important; font-family: var(--font-mono) !important;
font-size: 11.5px !important; font-size: 12px !important;
letter-spacing: .02em !important; letter-spacing: .02em !important;
} }
@@ -1046,7 +1046,7 @@ select.duration-select:focus,
border-radius: var(--r-md); border-radius: var(--r-md);
color: var(--accent-black); color: var(--accent-black);
font-family: inherit; font-family: inherit;
font-size: 13.5px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base); 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; width: 13px;
height: 13px; height: 13px;
color: var(--heat); color: var(--heat);
opacity: 0; visibility: hidden;
flex-shrink: 0; flex-shrink: 0;
} }
.rs-select-option.selected .mi-check { opacity: 1; } .rs-select-option.selected .mi-check { visibility: visible; }
/* ─── Clear-filters btn · 共享组件 ─── */ /* ─── Clear-filters btn · 共享组件 ─── */
.clear-filters { .clear-filters {
@@ -1158,7 +1158,7 @@ select.duration-select:focus,
/* ─── Result count · 共享组件 ─── */ /* ─── Result count · 共享组件 ─── */
.result-meta { .result-meta {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
margin-bottom: 14px; margin-bottom: 14px;
letter-spacing: .04em; letter-spacing: .04em;
@@ -1205,7 +1205,7 @@ select.duration-select:focus,
} }
.np-header .np-mode-pill { .np-header .np-mode-pill {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--heat); color: var(--heat);
background: var(--heat-12); background: var(--heat-12);
border: 1px solid var(--heat-20); border: 1px solid var(--heat-20);
@@ -1273,7 +1273,7 @@ select.duration-select:focus,
} }
.np-footer .np-meta { .np-footer .np-meta {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
margin-right: auto; 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); 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-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 { .np-section-h {
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
@@ -1327,14 +1327,14 @@ select.duration-select:focus,
.np-section-h .counter { .np-section-h .counter {
margin-left: auto; margin-left: auto;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .04em; letter-spacing: .04em;
font-weight: 400; font-weight: 400;
} }
.np-section-h .counter .num { color: var(--heat); font-weight: 600; } .np-section-h .counter .num { color: var(--heat); font-weight: 600; }
.np-section-sub { .np-section-sub {
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-56); color: var(--black-alpha-56);
margin-bottom: 8px; margin-bottom: 8px;
line-height: 1.5; line-height: 1.5;
@@ -1354,7 +1354,7 @@ select.duration-select:focus,
position: relative; position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
font-size: 9.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
letter-spacing: .04em; letter-spacing: .04em;
@@ -1388,7 +1388,7 @@ select.duration-select:focus,
cursor: pointer; cursor: pointer;
display: grid; display: grid;
place-items: center; place-items: center;
font-size: 9.5px; font-size: 12px;
color: var(--black-alpha-32); color: var(--black-alpha-32);
font-family: var(--font-mono); font-family: var(--font-mono);
letter-spacing: .04em; letter-spacing: .04em;
@@ -1488,7 +1488,7 @@ select.duration-select:focus,
display: flex; align-items: center; gap: 16px; display: flex; align-items: center; gap: 16px;
margin-top: 18px; padding-top: 14px; margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--border-faint); 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 .total { font-family: var(--font-mono); letter-spacing: .02em; }
.list-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; } .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; min-width: 28px; height: 28px; padding: 0 8px;
border: 1px solid var(--border-faint); background: var(--surface); border: 1px solid var(--border-faint); background: var(--surface);
border-radius: var(--r-sm); 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); 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); } .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; padding: 36px 44px;
cursor: default; 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); } .np-lightbox .lb-audio audio { width: min(420px, 76vw); }
/* Bullet list · 弹窗内 (复用样式) */ /* Bullet list · 弹窗内 (复用样式) */
@@ -1537,7 +1537,7 @@ select.duration-select:focus,
background: var(--surface); background: var(--surface);
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); 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; display: grid; place-items: center;
flex-shrink: 0; flex-shrink: 0;
font-family: var(--font-mono); font-family: var(--font-mono);
@@ -1588,7 +1588,7 @@ select.duration-select:focus,
color: var(--black-alpha-48); color: var(--black-alpha-48);
} }
.empty-state h3 { font-size: 14px; font-weight: 600; color: var(--accent-black); margin-bottom: 6px; } .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 语义色 + 脉动) ─── */ /* ─── Progress (5 段流水线 · V2.1 语义色 + 脉动) ─── */
.prog { display: flex; gap: 3px; } .prog { display: flex; gap: 3px; }
@@ -1618,7 +1618,7 @@ table.t {
} }
table.t thead th { table.t thead th {
text-align: left; text-align: left;
font-size: 11.5px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: var(--black-alpha-48); color: var(--black-alpha-48);
padding: 14px 16px; padding: 14px 16px;
@@ -1648,7 +1648,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
display: grid; place-items: center; display: grid; place-items: center;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 12px;
letter-spacing: .04em; letter-spacing: .04em;
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
@@ -1661,7 +1661,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
padding: 3px 8px; padding: 3px 8px;
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-56); color: var(--black-alpha-56);
font-weight: 500; 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 .ic-t svg { width: 13px; height: 13px; }
.toast .txt { font-size: 13px; color: var(--accent-black); font-weight: 500; } .toast .txt { font-size: 13px; color: var(--accent-black); font-weight: 500; }
.toast .txt .mono { .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; color: var(--black-alpha-48); display: block; margin-top: 2px;
letter-spacing: .04em; font-weight: 400; letter-spacing: .04em; font-weight: 400;
} }
@@ -1780,7 +1780,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
background: var(--background-lighter); background: var(--background-lighter);
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-inter); font-family: var(--font-inter);
font-size: 11px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: .02em; letter-spacing: .02em;
cursor: pointer; cursor: pointer;
@@ -1793,7 +1793,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.shell-command-section { .shell-command-section {
padding: 8px 10px 6px; padding: 8px 10px 6px;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .06em; letter-spacing: .06em;
} }
@@ -1863,7 +1863,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
background: var(--surface); background: var(--surface);
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-inter); font-family: var(--font-inter);
font-size: 10px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: .02em; letter-spacing: .02em;
} }
@@ -1883,7 +1883,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border-top: 1px solid var(--border-faint); border-top: 1px solid var(--border-faint);
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
letter-spacing: .04em; letter-spacing: .04em;
} }
.shell-command-foot .spacer { flex: 1; } .shell-command-foot .spacer { flex: 1; }
@@ -1929,7 +1929,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
display: block; display: block;
margin-top: 2px; margin-top: 2px;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; 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 .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 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--accent-black); }
.modal-h .ti span { .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; color: var(--black-alpha-48); font-weight: 400; margin-top: 4px; letter-spacing: .04em;
} }
.modal-b { .modal-b {
padding: 20px 24px; padding: 20px 24px;
font-size: 13.5px; font-size: 14px;
color: var(--black-alpha-72); color: var(--black-alpha-72);
line-height: 1.75; line-height: 1.75;
overflow-y: auto; overflow-y: auto;
@@ -2046,7 +2046,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.modal-b .mono-acc { .modal-b .mono-acc {
font-family: var(--font-mono); color: var(--heat); font-family: var(--font-mono); color: var(--heat);
background: var(--heat-12); padding: 2px 6px; 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 { .modal-f {
padding: 16px 24px; padding: 16px 24px;
@@ -2214,7 +2214,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
background: var(--heat); background: var(--heat);
color: var(--accent-white); color: var(--accent-white);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
font-weight: 500; font-weight: 500;
letter-spacing: .03em; letter-spacing: .03em;
border-radius: var(--r-sm); border-radius: var(--r-sm);
@@ -2233,7 +2233,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border: 1px solid currentColor; border: 1px solid currentColor;
border-radius: 50%; border-radius: 50%;
display: grid; place-items: center; display: grid; place-items: center;
font-size: 9px; font-weight: 700; font-size: 12px; font-weight: 600;
line-height: 1; line-height: 1;
font-family: var(--font-mono); font-family: var(--font-mono);
} }
@@ -2247,7 +2247,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
border: 1px solid currentColor; border: 1px solid currentColor;
border-radius: 50%; border-radius: 50%;
display: grid; place-items: center; display: grid; place-items: center;
font-size: 9px; font-weight: 700; font-size: 12px; font-weight: 600;
line-height: 1; line-height: 1;
} }
@@ -2286,7 +2286,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.tri-missing-pop .pop-h { .tri-missing-pop .pop-h {
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
letter-spacing: .04em; letter-spacing: .04em;
color: var(--heat); color: var(--heat);
margin-bottom: 6px; margin-bottom: 6px;
@@ -2303,7 +2303,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
padding-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
line-height: 1.55; line-height: 1.55;
letter-spacing: .02em; letter-spacing: .02em;
color: rgba(255,255,255,.78); color: rgba(255,255,255,.78);
core/frontend/src/library-page.css
+3 -3
View File
@@ -10,13 +10,13 @@
/* 音频资产无封面:默认音符占位(居中、mono 标签),点击灯箱播放 */ /* 音频资产无封面:默认音符占位(居中、mono 标签),点击灯箱播放 */
.lib-audio-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--black-alpha-48); } .lib-audio-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--black-alpha-48); }
.lib-audio-ph svg { width: 26px; height: 26px; } .lib-audio-ph svg { width: 26px; height: 26px; }
.lib-audio-ph .mono { font-size: 10px; letter-spacing: .08em; } .lib-audio-ph .mono { font-size: 12px; letter-spacing: .08em; }
/* 有 preview_url 显真图:铺满缩略容器、cover 裁切、继承 8px 圆角(由 .placeholder overflow:hidden 裁切) */ /* 有 preview_url 显真图:铺满缩略容器、cover 裁切、继承 8px 圆角(由 .placeholder overflow:hidden 裁切) */
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.asset-body { padding: 12px 14px; } .asset-body { padding: 12px 14px; }
.asset-name { font-size: 13px; font-weight: 600; color: var(--accent-black); } .asset-name { font-size: 13px; font-weight: 600; color: var(--accent-black); }
.asset-meta { font-size: 11px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; } .asset-meta { font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
.asset-badge { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; padding: 2px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-56); } .asset-badge { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 2px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-56); }
.asset-card { position: relative; } .asset-card { position: relative; }
/* 视频资产缩略图上的播放角标(点击整卡弹窗播放) */ /* 视频资产缩略图上的播放角标(点击整卡弹窗播放) */
.lib-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .58); color: var(--accent-white); display: grid; place-items: center; pointer-events: none; transition: background .15s; } .lib-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .58); color: var(--accent-white); display: grid; place-items: center; pointer-events: none; transition: background .15s; }
core/frontend/src/messages-page.css
+9 -9
View File
@@ -54,7 +54,7 @@
.msg-panel-h .mono { .msg-panel-h .mono {
margin-left: auto; margin-left: auto;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .04em; letter-spacing: .04em;
} }
@@ -92,7 +92,7 @@
} }
.msg-filter .ct { .msg-filter .ct {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 12px;
letter-spacing: .02em; letter-spacing: .02em;
} }
.msg-search { .msg-search {
@@ -134,7 +134,7 @@
.msg-load-more { .msg-load-more {
padding: 14px 16px 18px; padding: 14px 16px 18px;
text-align: center; text-align: center;
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .04em; letter-spacing: .04em;
} }
@@ -207,7 +207,7 @@
flex-shrink: 0; flex-shrink: 0;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
letter-spacing: .02em; letter-spacing: .02em;
} }
.msg-brief { .msg-brief {
@@ -236,7 +236,7 @@
background: var(--background-lighter); background: var(--background-lighter);
color: var(--black-alpha-56); color: var(--black-alpha-56);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 12px;
letter-spacing: .02em; letter-spacing: .02em;
} }
.msg-priority.ok { background: var(--forest-bg); border-color: var(--forest-bd); color: var(--accent-forest); } .msg-priority.ok { background: var(--forest-bg); border-color: var(--forest-bd); color: var(--accent-forest); }
@@ -253,7 +253,7 @@
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
} }
.msg-empty svg { width: 24px; height: 24px; color: var(--black-alpha-48); } .msg-empty svg { width: 24px; height: 24px; color: var(--ink-3); }
.msg-detail-empty { .msg-detail-empty {
flex: 1; flex: 1;
min-height: 520px; min-height: 520px;
@@ -305,7 +305,7 @@
margin-top: 8px; margin-top: 8px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
letter-spacing: .04em; letter-spacing: .04em;
} }
.msg-body-text { .msg-body-text {
@@ -327,7 +327,7 @@
.msg-props .k { .msg-props .k {
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
letter-spacing: .04em; letter-spacing: .04em;
} }
.msg-props .v { .msg-props .v {
@@ -351,7 +351,7 @@
gap: 8px; gap: 8px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
letter-spacing: .04em; letter-spacing: .04em;
} }
.msg-foot-note a { color: var(--heat); cursor: pointer; } .msg-foot-note a { color: var(--heat); cursor: pointer; }
core/frontend/src/pipeline-page.css
+57 -57
View File
@@ -19,9 +19,9 @@
.pipeline-back svg { width: 14px; height: 14px; } .pipeline-back svg { width: 14px; height: 14px; }
.pipeline-topbar-title { .pipeline-topbar-title {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 13.5px; font-weight: 500; color: var(--accent-black); font-size: 14px; font-weight: 500; color: var(--accent-black);
} }
.pipeline-topbar-title .mono { margin-left: 8px; font-size: 10.5px; font-weight: 400; letter-spacing: .04em; color: var(--black-alpha-48); } .pipeline-topbar-title .mono { margin-left: 8px; font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--black-alpha-48); }
@media (max-width: 1500px) { .pipeline-topbar-title { display: none; } } @media (max-width: 1500px) { .pipeline-topbar-title { display: none; } }
.stage-pill { .stage-pill {
@@ -78,10 +78,10 @@
/* Stage foot */ /* Stage foot */
.stage-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 0; margin-top: 18px; border-top: 1px solid var(--border-faint); } .stage-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 0; margin-top: 18px; border-top: 1px solid var(--border-faint); }
.stage-foot .info { font-size: 12.5px; color: var(--black-alpha-56); } .stage-foot .info { font-size: 13px; color: var(--black-alpha-56); }
.stage-foot .info .mono { font-family: var(--font-mono); color: var(--black-alpha-48); font-size: 11.5px; letter-spacing: .02em; } .stage-foot .info .mono { font-family: var(--font-mono); color: var(--black-alpha-48); font-size: 12px; letter-spacing: .02em; }
.stage-foot .hstack { gap: 10px; align-items: center; } .stage-foot .hstack { gap: 10px; align-items: center; }
.stage-foot .btn { height: 40px; min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; line-height: 1; white-space: nowrap; } .stage-foot .btn { height: 40px; min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; line-height: 1; white-space: nowrap; }
.stage-foot .btn-primary { padding: 0 20px; font-weight: 600; } .stage-foot .btn-primary { padding: 0 20px; font-weight: 600; }
.stage-foot .btn svg { width: 14px; height: 14px; flex: 0 0 14px; } .stage-foot .btn svg { width: 14px; height: 14px; flex: 0 0 14px; }
@@ -124,9 +124,9 @@
.msg.ai .bubble { background: var(--surface); } .msg.ai .bubble { background: var(--surface); }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; } .msg.user { display: flex; flex-direction: column; align-items: flex-end; }
.msg.user .bubble { background: var(--heat-12); color: var(--accent-black); border-color: var(--heat-20); } .msg.user .bubble { background: var(--heat-12); color: var(--accent-black); border-color: var(--heat-20); }
.msg .time { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 4px; letter-spacing: .02em; } .msg .time { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-top: 4px; letter-spacing: .02em; }
.msg .actions { display: flex; gap: 6px; margin-top: 6px; } .msg .actions { display: flex; gap: 6px; margin-top: 6px; }
.ai-avatar { width: 26px; height: 26px; flex-shrink: 0; background: var(--heat); color: var(--accent-white); display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid var(--heat); border-radius: 50%; } .ai-avatar { width: 26px; height: 26px; flex-shrink: 0; background: var(--heat); color: var(--accent-white); display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 1px solid var(--heat); border-radius: 50%; }
.del { text-decoration: line-through; color: var(--black-alpha-48); } .del { text-decoration: line-through; color: var(--black-alpha-48); }
.ins { background: var(--forest-bg); color: var(--accent-forest); padding: 0 3px; } .ins { background: var(--forest-bg); color: var(--accent-forest); padding: 0 3px; }
.chat-input { padding: 14px 18px 18px; border-top: 1px solid var(--border-faint); } .chat-input { padding: 14px 18px 18px; border-top: 1px solid var(--border-faint); }
@@ -135,9 +135,9 @@
.chat-input-area { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 13px; color: var(--accent-black); line-height: 1.55; resize: none; padding: 0; min-height: 42px; } .chat-input-area { width: 100%; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 13px; color: var(--accent-black); line-height: 1.55; resize: none; padding: 0; min-height: 42px; }
.chat-input-area::placeholder { color: var(--black-alpha-40); } .chat-input-area::placeholder { color: var(--black-alpha-40); }
.chat-input-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .chat-input-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.chat-input-foot .hint { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-40); letter-spacing: .02em; } .chat-input-foot .hint { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-40); letter-spacing: .02em; }
.chat-input-foot .spacer { flex: 1; } .chat-input-foot .spacer { flex: 1; }
.chat-icon-btn { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 1px solid var(--border-faint); border-radius: 50%; color: var(--black-alpha-56); cursor: pointer; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); } .chat-icon-btn { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 1px solid var(--border-faint); border-radius: 50%; color: var(--ink-3); cursor: pointer; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); }
.chat-icon-btn:hover { border-color: var(--accent-black); color: var(--accent-black); } .chat-icon-btn:hover { border-color: var(--accent-black); color: var(--accent-black); }
.chat-send-btn { width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent-black); border: 1px solid var(--accent-black); border-radius: 50%; color: var(--accent-white); cursor: pointer; transition: background var(--t-base), border-color var(--t-base), transform var(--t-base); } .chat-send-btn { width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent-black); border: 1px solid var(--accent-black); border-radius: 50%; color: var(--accent-white); cursor: pointer; transition: background var(--t-base), border-color var(--t-base), transform var(--t-base); }
.chat-send-btn:hover { background: var(--heat); border-color: var(--heat); } .chat-send-btn:hover { background: var(--heat); border-color: var(--heat); }
@@ -151,12 +151,12 @@
.shot-list > .pane-h { flex-wrap: wrap; row-gap: 8px; } .shot-list > .pane-h { flex-wrap: wrap; row-gap: 8px; }
.shot-headline { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .shot-headline { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.script-brief-summary { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .script-brief-summary { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.script-brief-pill { gap: 4px; padding: 3px 8px; font-size: 11px; } .script-brief-pill { gap: 4px; padding: 3px 8px; font-size: 12px; }
.script-brief-pill .k { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); letter-spacing: .04em; } .script-brief-pill .k { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; }
.script-brief-pill .v { color: var(--accent-black); max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .script-brief-pill .v { color: var(--accent-black); max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.script-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-left: 6px; } .script-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-left: 6px; }
.script-tags .tag-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .script-tags .tag-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.script-tags .tg-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; } .script-tags .tg-lbl { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; }
.script-tags .tag-add { width: 20px; height: 20px; display: grid; place-items: center; background: transparent; border: 1px dashed var(--black-alpha-24); border-radius: 50%; color: var(--black-alpha-48); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); } .script-tags .tag-add { width: 20px; height: 20px; display: grid; place-items: center; background: transparent; border: 1px dashed var(--black-alpha-24); border-radius: 50%; color: var(--black-alpha-48); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; transition: border-color var(--t-base), color var(--t-base), background var(--t-base); }
.script-tags .tag-add:hover { border-style: solid; border-color: var(--heat); color: var(--heat); background: var(--heat-12); } .script-tags .tag-add:hover { border-style: solid; border-color: var(--heat); color: var(--heat); background: var(--heat-12); }
@@ -171,26 +171,26 @@
.shot-card:last-child { border-bottom: 0; } .shot-card:last-child { border-bottom: 0; }
.shot-card .shot-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; background: var(--heat-12); color: var(--heat); font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; } .shot-card .shot-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; background: var(--heat-12); color: var(--heat); font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.shot-card .shot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .shot-card .shot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.shot-card .shot-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } .shot-card .shot-meta { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; }
.shot-card .shot-narration { font-size: 13px; color: var(--accent-black); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .shot-card .shot-narration { font-size: 13px; color: var(--accent-black); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* 画面描述行(narration/visual_prompt 结构化分离后,旁白下方的次要画面说明) */ /* 画面描述行(narration/visual_prompt 结构化分离后,旁白下方的次要画面说明) */
.shot-card .shot-visual { font-size: 12px; color: var(--black-alpha-56); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .shot-card .shot-visual { font-size: 12px; color: var(--black-alpha-56); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
/* 镜头卡编辑态(对齐设计稿:旁白/画面逐字段 contenteditable + 卡间插入分镜) */ /* 镜头卡编辑态(对齐设计稿:旁白/画面逐字段 contenteditable + 卡间插入分镜) */
.shot-card .shot-actions { display: inline-flex; gap: 6px; margin-left: auto; } .shot-card .shot-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.icon-mini-btn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--black-alpha-48); background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; } .icon-mini-btn { width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-3); background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.icon-mini-btn:hover { color: var(--heat); border-color: var(--heat); } .icon-mini-btn:hover { color: var(--heat); border-color: var(--heat); }
.icon-mini-btn.armed { width: auto; padding: 0 8px; font-size: 11px; color: var(--accent-crimson); border-color: var(--accent-crimson); background: var(--surface); } .icon-mini-btn.armed { width: auto; padding: 0 8px; font-size: 12px; color: var(--accent-crimson); border-color: var(--accent-crimson); background: var(--surface); }
.shot-card .shot-meta-row { display: flex; align-items: center; gap: 8px; } .shot-card .shot-meta-row { display: flex; align-items: center; gap: 8px; }
.shot-row { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 4px 0; } .shot-row { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 4px 0; }
.shot-k { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); padding-top: 2px; letter-spacing: .04em; } .shot-k { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); padding-top: 2px; letter-spacing: .04em; }
.shot-v { font-size: 12.5px; color: var(--accent-black); line-height: 1.55; outline: none; border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--t-base); white-space: pre-wrap; word-break: break-word; } .shot-v { font-size: 13px; color: var(--accent-black); line-height: 1.55; outline: none; border-radius: var(--r-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--t-base); white-space: pre-wrap; word-break: break-word; }
.shot-v[contenteditable="true"]:hover { background: var(--heat-12); cursor: text; } .shot-v[contenteditable="true"]:hover { background: var(--heat-12); cursor: text; }
.shot-v[contenteditable="true"]:focus { background: var(--surface); box-shadow: inset 0 0 0 1px var(--heat); } .shot-v[contenteditable="true"]:focus { background: var(--surface); box-shadow: inset 0 0 0 1px var(--heat); }
.shot-v[data-empty="true"]::before { content: attr(data-placeholder); color: var(--black-alpha-32); font-style: italic; } .shot-v[data-empty="true"]::before { content: attr(data-placeholder); color: var(--black-alpha-32); font-style: italic; }
.shot-insert-gap { height: 10px; position: relative; display: flex; align-items: center; justify-content: center; padding: 0; transition: height .24s cubic-bezier(.18,.72,.28,1), padding .24s cubic-bezier(.18,.72,.28,1); } .shot-insert-gap { height: 10px; position: relative; display: flex; align-items: center; justify-content: center; padding: 0; transition: height .24s cubic-bezier(.18,.72,.28,1), padding .24s cubic-bezier(.18,.72,.28,1); }
.shot-insert-gap:hover { height: 72px; padding: 14px 0; } .shot-insert-gap:hover { height: 72px; padding: 14px 0; }
.shot-insert-gap .add-shot-btn { opacity: 0; transform: translateY(4px) scale(.96); height: 28px; padding: 0 14px; background: var(--surface); color: var(--heat); border: 1px dashed var(--heat-40); border-radius: var(--r-md); font-size: 12.5px; font-family: inherit; font-weight: 500; cursor: pointer; transition: opacity .2s ease .04s, transform .24s cubic-bezier(.18,.72,.28,1) .04s, background var(--t-base), border-color var(--t-base), color var(--t-base); display: inline-flex; align-items: center; gap: 6px; pointer-events: none; white-space: nowrap; } .shot-insert-gap .add-shot-btn { opacity: 0; transform: translateY(4px) scale(.96); height: 28px; padding: 0 14px; background: var(--surface); color: var(--heat); border: 1px dashed var(--heat-40); border-radius: var(--r-md); font-size: 13px; font-family: inherit; font-weight: 500; cursor: pointer; transition: opacity .2s ease .04s, transform .24s cubic-bezier(.18,.72,.28,1) .04s, background var(--t-base), border-color var(--t-base), color var(--t-base); display: inline-flex; align-items: center; gap: 6px; pointer-events: none; white-space: nowrap; }
.shot-insert-gap .add-shot-btn svg { width: 12px; height: 12px; } .shot-insert-gap .add-shot-btn svg { width: 12px; height: 12px; }
.shot-insert-gap:hover .add-shot-btn { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .shot-insert-gap:hover .add-shot-btn { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.shot-insert-gap .add-shot-btn:hover { background: var(--heat-12); border-style: solid; border-color: var(--heat); } .shot-insert-gap .add-shot-btn:hover { background: var(--heat-12); border-style: solid; border-color: var(--heat); }
@@ -209,31 +209,31 @@
.vd-main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .vd-main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vd-info { flex: 1; min-width: 0; } .vd-info { flex: 1; min-width: 0; }
.vd-section-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 10px; } .vd-section-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 10px; }
.vd-kv { display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; font-size: 12.5px; } .vd-kv { display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; font-size: 13px; }
.vd-kv .k { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .03em; padding-top: 1px; } .vd-kv .k { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .03em; padding-top: 1px; }
.vd-kv .v { color: var(--accent-black); min-width: 0; overflow-wrap: anywhere; } .vd-kv .v { color: var(--accent-black); min-width: 0; overflow-wrap: anywhere; }
.vd-history-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } .vd-history-h { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.vd-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .vd-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.vd-history-thumb { flex: 0 0 64px; min-width: 64px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); position: relative; } .vd-history-thumb { flex: 0 0 64px; min-width: 64px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); position: relative; }
.vd-history-thumb:hover { border-color: var(--heat); } .vd-history-thumb:hover { border-color: var(--heat); }
.vd-history-thumb.current { border-color: var(--heat); background: var(--heat-12); } .vd-history-thumb.current { border-color: var(--heat); background: var(--heat-12); }
.vd-history-thumb.adopted::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; background: var(--heat); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; } .vd-history-thumb.adopted::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; background: var(--heat); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; }
.vd-history-thumb .placeholder { aspect-ratio: 9/16; } .vd-history-thumb .placeholder { aspect-ratio: 9/16; }
.vd-history-thumb .ts { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); text-align: center; } .vd-history-thumb .ts { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); text-align: center; }
.vd-prompt-field { margin-top: 16px; } .vd-prompt-field { margin-top: 16px; }
.vd-prompt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .vd-prompt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.vd-prompt-head .label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--black-alpha-56); letter-spacing: .04em; } .vd-prompt-head .label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--black-alpha-56); letter-spacing: .04em; }
.vd-prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--accent-black); white-space: pre-wrap; min-height: 96px; outline: none; letter-spacing: .01em; cursor: text; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); } .vd-prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--accent-black); white-space: pre-wrap; min-height: 96px; outline: none; letter-spacing: .01em; cursor: text; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
.vd-prompt-edit:hover { border-color: var(--heat-20); } .vd-prompt-edit:hover { border-color: var(--heat-20); }
.vd-prompt-edit:focus { border-color: var(--heat); background: var(--surface); box-shadow: 0 0 0 3px var(--heat-12); } .vd-prompt-edit:focus { border-color: var(--heat); background: var(--surface); box-shadow: 0 0 0 3px var(--heat-12); }
.vd-modal-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .vd-modal-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* 对话空态三胶囊 */ /* 对话空态三胶囊 */
.chat-empty { padding: 28px 18px 14px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } .chat-empty { padding: 28px 18px 14px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chat-empty .ce-title { font-size: 13.5px; color: var(--accent-black); font-weight: 500; } .chat-empty .ce-title { font-size: 14px; color: var(--accent-black); font-weight: 500; }
.chat-empty .ce-hint { font-size: 11.5px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; } .chat-empty .ce-hint { font-size: 12px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; }
.chat-modes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .chat-modes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chat-mode { height: 30px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 999px; font-size: 12.5px; color: var(--accent-black); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); } .chat-mode { height: 30px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 999px; font-size: 13px; color: var(--accent-black); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
.chat-mode:hover { background: var(--heat-12); border-color: var(--heat); color: var(--heat); } .chat-mode:hover { background: var(--heat-12); border-color: var(--heat); color: var(--heat); }
.chat-mode.primary { background: var(--heat-12); border-color: var(--heat); color: var(--heat); } .chat-mode.primary { background: var(--heat-12); border-color: var(--heat); color: var(--heat); }
.chat-mode svg { width: 13px; height: 13px; } .chat-mode svg { width: 13px; height: 13px; }
@@ -250,7 +250,7 @@
.asset-side .ttab { padding: 10px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-md); } .asset-side .ttab { padding: 10px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-md); }
.asset-side .ttab:hover { background: var(--background-lighter); } .asset-side .ttab:hover { background: var(--background-lighter); }
.asset-side .ttab.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; } .asset-side .ttab.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
.asset-side .ttab .num { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-left: auto; } .asset-side .ttab .num { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-left: auto; }
.asset-side .ttab.active .num { color: var(--heat); } .asset-side .ttab.active .num { color: var(--heat); }
.asset-side .info { font-size: 12px; color: var(--black-alpha-48); padding: 14px 12px; line-height: 1.6; margin-top: 14px; border-top: 1px solid var(--border-faint); } .asset-side .info { font-size: 12px; color: var(--black-alpha-48); padding: 14px 12px; line-height: 1.6; margin-top: 14px; border-top: 1px solid var(--border-faint); }
.asset-side .info strong { color: var(--black-alpha-56); display: block; } .asset-side .info strong { color: var(--black-alpha-56); display: block; }
@@ -264,7 +264,7 @@
.prod-row > .asset-card-2 { flex: 0 0 auto; width: auto; max-width: none; min-width: 0; height: 360px; aspect-ratio: 3 / 5; } .prod-row > .asset-card-2 { flex: 0 0 auto; width: auto; max-width: none; min-width: 0; height: 360px; aspect-ratio: 3 / 5; }
.prod-preview { flex: 0 0 360px; height: 360px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px; display: none; flex-direction: column; gap: 10px; } .prod-preview { flex: 0 0 360px; height: 360px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px; display: none; flex-direction: column; gap: 10px; }
.prod-preview.show { display: flex; } .prod-preview.show { display: flex; }
.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; } .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; }
.prod-preview-img { aspect-ratio: 16/9; } .prod-preview-img { aspect-ratio: 16/9; }
.prod-preview-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; } .prod-preview-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.prod-preview-history { display: none; flex-direction: column; gap: 6px; } .prod-preview-history { display: none; flex-direction: column; gap: 6px; }
@@ -280,8 +280,8 @@
.asset-card-2.prod-lib-card .prod-thumb { flex: 1 1 0; min-height: 0; position: relative; aspect-ratio: auto; } .asset-card-2.prod-lib-card .prod-thumb { flex: 1 1 0; min-height: 0; position: relative; aspect-ratio: auto; }
.asset-card-2.prod-lib-card .prod-body { padding: 14px 14px 12px; flex: 0 0 auto; } .asset-card-2.prod-lib-card .prod-body { padding: 14px 14px 12px; flex: 0 0 auto; }
.asset-card-2.prod-lib-card .prod-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .asset-card-2.prod-lib-card .prod-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-2.prod-lib-card .prod-cat { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 8px; background: var(--background-lighter); color: var(--black-alpha-72); border-radius: var(--r-sm); font-size: 11.5px; } .asset-card-2.prod-lib-card .prod-cat { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 8px; background: var(--background-lighter); color: var(--black-alpha-72); border-radius: var(--r-sm); font-size: 12px; }
.asset-card-2.prod-lib-card .prod-date { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; } .asset-card-2.prod-lib-card .prod-date { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; }
.asset-card-2.prod-lib-card .prod-action { padding: 10px 12px; border-top: 1px solid var(--border-faint); background: var(--surface); } .asset-card-2.prod-lib-card .prod-action { padding: 10px 12px; border-top: 1px solid var(--border-faint); background: var(--surface); }
.asset-card-2.prod-lib-card .prod-action[hidden] { display: none; } .asset-card-2.prod-lib-card .prod-action[hidden] { display: none; }
.asset-card-2.prod-lib-card .prod-action .btn-aigen { .asset-card-2.prod-lib-card .prod-action .btn-aigen {
@@ -298,7 +298,7 @@
.asset-sec .sec-h .btn-aigen { .asset-sec .sec-h .btn-aigen {
display: inline-flex; align-items: center; gap: 6px; display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 12px; background: var(--heat); color: var(--accent-white); height: 30px; padding: 0 12px; background: var(--heat); color: var(--accent-white);
border: 1px solid var(--heat); border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; border: 1px solid var(--heat); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
box-shadow: inset 0 -2px 4px rgba(250,93,25,.20), 0 1px 1px rgba(250,93,25,.12); box-shadow: inset 0 -2px 4px rgba(250,93,25,.20), 0 1px 1px rgba(250,93,25,.12);
transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-base); transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-base);
} }
@@ -322,7 +322,7 @@
.prompt-box[contenteditable="true"] { cursor: text; outline: none; } .prompt-box[contenteditable="true"] { cursor: text; outline: none; }
.prompt-box[contenteditable="true"]:hover { border-color: var(--heat-20); } .prompt-box[contenteditable="true"]:hover { border-color: var(--heat-20); }
.prompt-box[contenteditable="true"]:focus { border-color: var(--heat); background: var(--surface); color: var(--accent-black); box-shadow: 0 0 0 3px var(--heat-12); } .prompt-box[contenteditable="true"]:focus { border-color: var(--heat); background: var(--surface); color: var(--accent-black); box-shadow: 0 0 0 3px var(--heat-12); }
.fail-icon { width: 28px; height: 28px; background: var(--accent-crimson); color: var(--accent-white); display: grid; place-items: center; font-weight: 700; font-size: 16px; border-radius: 50%; } .fail-icon { width: 28px; height: 28px; background: var(--accent-crimson); color: var(--accent-white); display: grid; place-items: center; font-weight: 600; font-size: 16px; border-radius: 50%; }
/* ============= STAGE 3 · 故事板 ============= */ /* ============= STAGE 3 · 故事板 ============= */
.content--fh .stage[data-stage-pane="3"].active > .stage-storyboard { flex: 1 1 0; min-height: 0; overflow-y: auto; } .content--fh .stage[data-stage-pane="3"].active > .stage-storyboard { flex: 1 1 0; min-height: 0; overflow-y: auto; }
@@ -344,8 +344,8 @@
.sb-scene-thumb:hover { background: var(--background-lighter); } .sb-scene-thumb:hover { background: var(--background-lighter); }
.sb-scene-thumb.selected { border-color: var(--heat); background: var(--heat-12); } .sb-scene-thumb.selected { border-color: var(--heat); background: var(--heat-12); }
.sb-scene-thumb .placeholder { aspect-ratio: 1; } .sb-scene-thumb .placeholder { aspect-ratio: 1; }
.sb-scene-thumb .nm { font-size: 11.5px; font-weight: 500; color: var(--accent-black); } .sb-scene-thumb .nm { font-size: 12px; font-weight: 500; color: var(--accent-black); }
.sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); } .sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }
.sb-main-img { aspect-ratio: 16/9; min-height: 0; } .sb-main-img { aspect-ratio: 16/9; min-height: 0; }
/* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 contain 完整显示 */ /* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 contain 完整显示 */
.sb-main-img.has-mock-media { background-size: contain; } .sb-main-img.has-mock-media { background-size: contain; }
@@ -353,22 +353,22 @@
.sb-rerun-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 14px; background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.20); border-radius: var(--r-md); color: #7C3A05; line-height: 1.55; } .sb-rerun-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 14px; background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.20); border-radius: var(--r-md); color: #7C3A05; line-height: 1.55; }
.sb-rerun-note .warn-ic { width: 22px; height: 22px; border-radius: var(--r-sm); background: rgba(180,83,9,.12); color: #B45309; display: grid; place-items: center; flex: 0 0 22px; } .sb-rerun-note .warn-ic { width: 22px; height: 22px; border-radius: var(--r-sm); background: rgba(180,83,9,.12); color: #B45309; display: grid; place-items: center; flex: 0 0 22px; }
.sb-rerun-note .warn-ic svg { width: 14px; height: 14px; } .sb-rerun-note .warn-ic svg { width: 14px; height: 14px; }
.sb-rerun-note .note-copy { min-width: 0; font-size: 11.5px; } .sb-rerun-note .note-copy { min-width: 0; font-size: 12px; }
.sb-rerun-note strong { color: #B45309; } .sb-rerun-note strong { color: #B45309; }
.sb-rerun-note a { color: #B45309; text-decoration: underline; text-underline-offset: 2px; } .sb-rerun-note a { color: #B45309; text-decoration: underline; text-underline-offset: 2px; }
.sb-stage-actions { display: flex; gap: 8px; margin-top: 14px; margin-bottom: 12px; } .sb-stage-actions { display: flex; gap: 8px; margin-top: 14px; margin-bottom: 12px; }
.sb-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); } .sb-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); }
.sb-history-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } .sb-history-h { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.sb-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .sb-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.sb-history-thumb { flex: 0 0 80px; min-width: 80px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); } .sb-history-thumb { flex: 0 0 80px; min-width: 80px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); }
.sb-history-thumb:hover { border-color: var(--heat); } .sb-history-thumb:hover { border-color: var(--heat); }
.sb-history-thumb.current { border-color: var(--heat); background: var(--heat-12); } .sb-history-thumb.current { border-color: var(--heat); background: var(--heat-12); }
.sb-history-thumb .placeholder { aspect-ratio: 1; } .sb-history-thumb .placeholder { aspect-ratio: 1; }
.sb-history-thumb .ts { font-family: var(--font-mono); font-size: 9.5px; color: var(--black-alpha-48); text-align: center; } .sb-history-thumb .ts { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); text-align: center; }
.sb-history-thumb.current .ts { color: var(--heat); font-weight: 600; } .sb-history-thumb.current .ts { color: var(--heat); font-weight: 600; }
.pill-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); } .pill-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
.pill-cta.heat { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); } .pill-cta.heat { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); }
.pill-cta.heat:hover { box-shadow: var(--shadow-cta-hover); } .pill-cta.heat:hover { box-shadow: var(--shadow-cta-hover); }
.pill-cta.ghost { background: var(--surface); color: var(--accent-black); border: 1px solid var(--border-faint); } .pill-cta.ghost { background: var(--surface); color: var(--accent-black); border: 1px solid var(--border-faint); }
@@ -376,10 +376,10 @@
.pill-cta svg { width: 13px; height: 13px; } .pill-cta svg { width: 13px; height: 13px; }
.sb-side .pane { padding: 18px; } .sb-side .pane { padding: 18px; }
.prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--accent-black); white-space: pre-wrap; min-height: 200px; outline: none; letter-spacing: .01em; cursor: text; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); } .prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--accent-black); white-space: pre-wrap; min-height: 200px; outline: none; letter-spacing: .01em; cursor: text; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
.prompt-edit:hover { border-color: var(--heat-20); } .prompt-edit:hover { border-color: var(--heat-20); }
.prompt-edit:focus { border-color: var(--heat); background: var(--surface); box-shadow: 0 0 0 3px var(--heat-12); } .prompt-edit:focus { border-color: var(--heat); background: var(--surface); box-shadow: 0 0 0 3px var(--heat-12); }
.asset-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); font-size: 11.5px; } .asset-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); font-size: 12px; }
.asset-tag .dotc { width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 50%; } .asset-tag .dotc { width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 50%; }
/* ============= STAGE 4 · 视频 ============= */ /* ============= STAGE 4 · 视频 ============= */
@@ -400,7 +400,7 @@
.video-card-head { display: flex; align-items: flex-start; gap: 8px; } .video-card-head { display: flex; align-items: flex-start; gap: 8px; }
.video-card-title { min-width: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--accent-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-card-title { min-width: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--accent-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-card-head .pill { flex: 0 0 auto; } .video-card-head .pill { flex: 0 0 auto; }
.video-meta { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; margin-top: 5px; } .video-meta { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; margin-top: 5px; }
.video-actions { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; } .video-actions { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; }
/* ============= STAGE 5 · 拼接编辑器 ============= */ /* ============= STAGE 5 · 拼接编辑器 ============= */
@@ -422,7 +422,7 @@
.editor-props { padding: 16px; border-bottom: 1px solid var(--border-faint); overflow-y: auto; } .editor-props { padding: 16px; border-bottom: 1px solid var(--border-faint); overflow-y: auto; }
.props-tabs { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--border-faint); } .props-tabs { display: flex; gap: 0; margin-bottom: 14px; border-bottom: 1px solid var(--border-faint); }
.props-tabs > div { padding: 8px 12px; font-size: 12.5px; color: var(--black-alpha-56); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .props-tabs > div { padding: 8px 12px; font-size: 13px; color: var(--black-alpha-56); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.props-tabs > div.active { color: var(--heat); border-bottom-color: var(--heat); font-weight: 600; } .props-tabs > div.active { color: var(--heat); border-bottom-color: var(--heat); font-weight: 600; }
.style-swatch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .style-swatch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swatch-card { padding: 10px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; } .swatch-card { padding: 10px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; }
@@ -431,11 +431,11 @@
.swatch-card .demo { font-size: 12px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); margin-bottom: 4px; text-align: center; } .swatch-card .demo { font-size: 12px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); margin-bottom: 4px; text-align: center; }
.swatch-card .demo.b { background: var(--accent-black); color: var(--accent-white); font-family: serif; } .swatch-card .demo.b { background: var(--accent-black); color: var(--accent-white); font-family: serif; }
.swatch-card .demo.c { color: var(--heat); -webkit-text-stroke: 0.5px var(--accent-black); } .swatch-card .demo.c { color: var(--heat); -webkit-text-stroke: 0.5px var(--accent-black); }
.swatch-card .demo.d { background: var(--accent-honey, #f5c451); color: var(--accent-black); font-weight: 700; } .swatch-card .demo.d { background: var(--accent-honey, #f5c451); color: var(--accent-black); font-weight: 600; }
.swatch-card .nm { font-size: 11px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; } .swatch-card .nm { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; }
.props-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-faint); font-size: 12.5px; } .props-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-faint); font-size: 13px; }
.props-row:last-child { border-bottom: 0; } .props-row:last-child { border-bottom: 0; }
.props-row .k { color: var(--black-alpha-48); flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; } .props-row .k { color: var(--black-alpha-48); flex: 1; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.input-mini { width: 90px; padding: 0 10px; height: 28px; font-size: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--black-alpha-12); } .input-mini { width: 90px; padding: 0 10px; height: 28px; font-size: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--black-alpha-12); }
.timeline { position: relative; grid-column: 1 / -1; padding: 14px 16px; background: var(--background-base); } .timeline { position: relative; grid-column: 1 / -1; padding: 14px 16px; background: var(--background-base); }
@@ -446,38 +446,38 @@
.tl-toolbar .tl-action svg { width: 13px; height: 13px; } .tl-toolbar .tl-action svg { width: 13px; height: 13px; }
.tl-toolbar .tl-sep { width: 1px; height: 16px; background: var(--border-faint); margin: 0 4px; } .tl-toolbar .tl-sep { width: 1px; height: 16px; background: var(--border-faint); margin: 0 4px; }
.tl-toolbar .tl-zoom { display: inline-flex; align-items: center; gap: 8px; } .tl-toolbar .tl-zoom { display: inline-flex; align-items: center; gap: 8px; }
.tl-toolbar .tl-zoom .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; } .tl-toolbar .tl-zoom .lbl { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; }
.tl-toolbar .tl-zoom input[type="range"] { width: 120px; accent-color: var(--heat); } .tl-toolbar .tl-zoom input[type="range"] { width: 120px; accent-color: var(--heat); }
.tl-ruler { display: grid; grid-template-columns: 80px 1fr; align-items: end; padding: 0; margin-bottom: 4px; } .tl-ruler { display: grid; grid-template-columns: 80px 1fr; align-items: end; padding: 0; margin-bottom: 4px; }
.tl-ruler .l { font-family: var(--font-mono); color: var(--black-alpha-48); padding: 0 4px 4px; font-size: 10.5px; letter-spacing: .04em; align-self: end; } .tl-ruler .l { font-family: var(--font-mono); color: var(--black-alpha-48); padding: 0 4px 4px; font-size: 12px; letter-spacing: .04em; align-self: end; }
.tl-ruler .rule-track { position: relative; height: 22px; border-bottom: 1px solid var(--border-faint); cursor: pointer; } .tl-ruler .rule-track { position: relative; height: 22px; border-bottom: 1px solid var(--border-faint); cursor: pointer; }
.tl-ruler .rule-track .tick { position: absolute; bottom: 0; width: 1px; background: var(--black-alpha-24); } .tl-ruler .rule-track .tick { position: absolute; bottom: 0; width: 1px; background: var(--black-alpha-24); }
.tl-ruler .rule-track .tick.major { height: 8px; background: var(--black-alpha-48); } .tl-ruler .rule-track .tick.major { height: 8px; background: var(--black-alpha-48); }
.tl-ruler .rule-track .tick.minor { height: 4px; } .tl-ruler .rule-track .tick.minor { height: 4px; }
.tl-ruler .rule-track .t { position: absolute; bottom: 10px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-56); letter-spacing: .02em; white-space: nowrap; } .tl-ruler .rule-track .t { position: absolute; bottom: 10px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); letter-spacing: .02em; white-space: nowrap; }
.tl-track { display: grid; grid-template-columns: 80px 1fr; align-items: center; padding: 3px 0; } .tl-track { display: grid; grid-template-columns: 80px 1fr; align-items: center; padding: 3px 0; }
.tl-track .label { display: flex; align-items: center; gap: 6px; padding-left: 4px; font-size: 11.5px; color: var(--black-alpha-72); font-weight: 500; } .tl-track .label { display: flex; align-items: center; gap: 6px; padding-left: 4px; font-size: 12px; color: var(--black-alpha-72); font-weight: 500; }
.tl-track .label .ico { width: 18px; height: 18px; display: grid; place-items: center; border-radius: var(--r-sm); flex-shrink: 0; } .tl-track .label .ico { width: 18px; height: 18px; display: grid; place-items: center; border-radius: var(--r-sm); flex-shrink: 0; }
.tl-track .label .ico svg { width: 12px; height: 12px; } .tl-track .label .ico svg { width: 12px; height: 12px; }
.tl-track .label.video .ico { background: var(--heat-12); color: var(--heat); } .tl-track .label.video .ico { background: var(--orange-tint); color: var(--heat); }
.tl-track .label.subtitle .ico { background: var(--forest-bg); color: var(--accent-forest); } .tl-track .label.subtitle .ico { background: var(--green-bg); color: var(--accent-forest); }
.tl-track .label.bgm .ico { background: rgba(144, 97, 255, .10); color: var(--accent-amethyst, #9061ff); } .tl-track .label.bgm .ico { background: var(--background-lighter); color: var(--accent-amethyst); }
.tl-track .lane { position: relative; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); cursor: pointer; } .tl-track .lane { position: relative; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); cursor: pointer; }
.tl-track.video-track .lane { height: 46px; } .tl-track.video-track .lane { height: 46px; }
.tl-track.subtitle-track .lane { height: 28px; } .tl-track.subtitle-track .lane { height: 28px; }
.tl-track.bgm-track .lane { height: 34px; } .tl-track.bgm-track .lane { height: 34px; }
.tl-track .lane::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, var(--border-faint) 0, var(--border-faint) 1px, transparent 1px, transparent calc(100% / 15)); pointer-events: none; opacity: .55; border-radius: inherit; } .tl-track .lane::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, var(--border-faint) 0, var(--border-faint) 1px, transparent 1px, transparent calc(100% / 15)); pointer-events: none; opacity: .55; border-radius: inherit; }
.clip { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 11px; border: 1px solid transparent; border-radius: 4px; cursor: grab; overflow: hidden; white-space: nowrap; user-select: none; box-sizing: border-box; } .clip { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; border: 1px solid transparent; border-radius: 4px; cursor: grab; overflow: hidden; white-space: nowrap; user-select: none; box-sizing: border-box; }
.clip:hover { filter: brightness(1.04); } .clip:hover { filter: brightness(1.04); }
.clip .num { font-family: var(--font-mono); font-weight: 700; opacity: .85; flex-shrink: 0; } .clip .num { font-family: var(--font-mono); font-weight: 600; opacity: .85; flex-shrink: 0; }
.clip .lbl { overflow: hidden; text-overflow: ellipsis; } .clip .lbl { overflow: hidden; text-overflow: ellipsis; }
.clip.video { background: var(--heat-12); border-color: var(--heat-40); color: var(--heat); } .clip.video { background: var(--heat-12); border-color: var(--heat-40); color: var(--heat); }
.clip.video .frames { position: absolute; top: 0; bottom: 0; left: 0; width: var(--src-width, 100%); transform: translateX(var(--src-offset, 0%)); display: flex; gap: 0; pointer-events: none; z-index: 0; border-radius: inherit; overflow: hidden; } .clip.video .frames { position: absolute; top: 0; bottom: 0; left: 0; width: var(--src-width, 100%); transform: translateX(var(--src-offset, 0%)); display: flex; gap: 0; pointer-events: none; z-index: 0; border-radius: inherit; overflow: hidden; }
.clip.video .frames .fr { flex: 1; min-width: 0; background: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(38,38,38,.06) 4px, rgba(38,38,38,.06) 5px), rgba(250,93,25,.10); } .clip.video .frames .fr { flex: 1; min-width: 0; background: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(38,38,38,.06) 4px, rgba(38,38,38,.06) 5px), rgba(250,93,25,.10); }
.clip.video .frames .fr + .fr { border-left: 1px solid rgba(255,255,255,.55); } .clip.video .frames .fr + .fr { border-left: 1px solid rgba(255,255,255,.55); }
.clip.video .num, .clip.video .lbl { position: relative; z-index: 1; } .clip.video .num, .clip.video .lbl { position: relative; z-index: 1; }
.clip.subtitle { background: var(--forest-bg); border-color: var(--forest-bd); color: var(--accent-forest); font-size: 11px; } .clip.subtitle { background: var(--forest-bg); border-color: var(--forest-bd); color: var(--accent-forest); font-size: 12px; }
.clip.subtitle .lbl::before { content: "\201C"; font-family: serif; font-size: 14px; opacity: .55; margin-right: 2px; } .clip.subtitle .lbl::before { content: "\201C"; font-family: serif; font-size: 14px; opacity: .55; margin-right: 2px; }
.clip.subtitle:hover { background: rgba(31, 138, 81, .14); } .clip.subtitle:hover { background: rgba(31, 138, 81, .14); }
.clip.bgm { background: rgba(144,97,255,.10); border-color: rgba(144,97,255,.30); color: var(--accent-amethyst, #9061ff); } .clip.bgm { background: rgba(144,97,255,.10); border-color: rgba(144,97,255,.30); color: var(--accent-amethyst, #9061ff); }
core/frontend/src/product-create-page.css
+12 -12
View File
@@ -36,7 +36,7 @@
} }
.product-create-page .form-card .req-tag { .product-create-page .form-card .req-tag {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 12px;
padding: 2px 7px; padding: 2px 7px;
background: var(--crimson-bg); background: var(--crimson-bg);
color: var(--accent-crimson); color: var(--accent-crimson);
@@ -46,7 +46,7 @@
} }
.product-create-page .form-card .opt-tag { .product-create-page .form-card .opt-tag {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 12px;
padding: 2px 7px; padding: 2px 7px;
background: var(--background-lighter); background: var(--background-lighter);
color: var(--black-alpha-56); color: var(--black-alpha-56);
@@ -56,7 +56,7 @@
} }
.product-create-page .form-card .card-sub { .product-create-page .form-card .card-sub {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
margin: -10px 0 14px; margin: -10px 0 14px;
letter-spacing: .02em; letter-spacing: .02em;
@@ -83,7 +83,7 @@
gap: 4px; gap: 4px;
color: var(--black-alpha-32); color: var(--black-alpha-32);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 12px;
letter-spacing: .04em; letter-spacing: .04em;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@@ -108,7 +108,7 @@
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
font-size: 9.5px; font-size: 12px;
font-weight: 600; font-weight: 600;
padding: 2px 6px; padding: 2px 6px;
background: var(--surface); background: var(--surface);
@@ -190,7 +190,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--black-alpha-56); color: var(--black-alpha-56);
display: grid; display: grid;
@@ -249,7 +249,7 @@
} }
.product-create-page .form-foot .req-info { .product-create-page .form-foot .req-info {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
} }
@@ -312,7 +312,7 @@
border: 1px solid var(--black-alpha-12); border: 1px solid var(--black-alpha-12);
border-radius: var(--r-md); border-radius: var(--r-md);
padding: 0 14px; padding: 0 14px;
font-size: 13.5px; color: var(--accent-black); font-size: 14px; color: var(--accent-black);
outline: none; font-family: inherit; outline: none; font-family: inherit;
transition: border-color var(--t-base); transition: border-color var(--t-base);
} }
@@ -353,7 +353,7 @@
.pc-drawer .form-card .pf-upload-zone .uz-t strong { color: var(--heat); font-weight: 600; } .pc-drawer .form-card .pf-upload-zone .uz-t strong { color: var(--heat); font-weight: 600; }
.pc-drawer .form-card .pf-upload-zone .uz-d { .pc-drawer .form-card .pf-upload-zone .uz-d {
margin-top: 8px; margin-top: 8px;
font-family: var(--font-mono); font-size: 11.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
} }
/* 示例图 · 纵向卡片 */ /* 示例图 · 纵向卡片 */
@@ -409,7 +409,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-md); border-radius: var(--r-md);
margin-bottom: 6px; margin-bottom: 6px;
font-size: 13.5px; font-size: 14px;
} }
.pc-drawer .form-card .bullet-list .bl-add { background: transparent; border-style: dashed; } .pc-drawer .form-card .bullet-list .bl-add { background: transparent; border-style: dashed; }
.pc-drawer .form-card .bullet-list .num { .pc-drawer .form-card .bullet-list .num {
@@ -418,13 +418,13 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; color: var(--heat); font-weight: 700; font-size: 12px; color: var(--heat); font-weight: 600;
display: grid; place-items: center; flex-shrink: 0; display: grid; place-items: center; flex-shrink: 0;
} }
.pc-drawer .form-card .bullet-list .bl-text { flex: 1; color: var(--accent-black); } .pc-drawer .form-card .bullet-list .bl-text { flex: 1; color: var(--accent-black); }
.pc-drawer .form-card .bullet-list .bl-input { .pc-drawer .form-card .bullet-list .bl-input {
flex: 1; background: transparent; border: 0; outline: none; flex: 1; background: transparent; border: 0; outline: none;
font-size: 13.5px; color: var(--accent-black); font-family: inherit; font-size: 14px; color: var(--accent-black); font-family: inherit;
} }
.pc-drawer .form-card .bullet-list .bl-x { .pc-drawer .form-card .bullet-list .bl-x {
width: 22px; height: 22px; width: 22px; height: 22px;
core/frontend/src/product-detail-page.css
+42 -42
View File
@@ -23,7 +23,7 @@
color: var(--accent-emerald, #1f8a51); color: var(--accent-emerald, #1f8a51);
border: 1px solid var(--accent-emerald-bd, #c4e3d1); border: 1px solid var(--accent-emerald-bd, #c4e3d1);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 11.5px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
@@ -137,12 +137,12 @@
.ov-tri-close svg { width: 12px; height: 12px; } .ov-tri-close svg { width: 12px; height: 12px; }
/* 复刻 pipeline.html .prod-preview-* 内部样式 */ /* 复刻 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-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-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 { display: none; flex-direction: column; gap: 6px; }
.ov-tri-pop .prod-preview-history.show { display: flex; } .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-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 { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.ov-tri-pop .prod-preview-history .h-row::-webkit-scrollbar { height: 4px; } .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.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.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.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.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; } .ov-tri-pop .prod-preview-history .h-thumb.adopted .badge { display: block; }
/* 主图可点击放大 */ /* 主图可点击放大 */
@@ -194,7 +194,7 @@
.tri-lightbox-head { .tri-lightbox-head {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); 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); color: var(--black-alpha-56);
padding-right: 32px; padding-right: 32px;
} }
@@ -204,7 +204,7 @@
padding: 2px 6px; padding: 2px 6px;
background: var(--heat-12); color: var(--heat); background: var(--heat-12); color: var(--heat);
border-radius: 3px; border-radius: 3px;
font-size: 10px; font-size: 12px;
} }
.tri-lightbox-close { .tri-lightbox-close {
position: absolute; 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: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-close svg { width: 14px; height: 14px; }
.tri-lightbox-img { aspect-ratio: 16/9; width: 100%; } .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 .spc { flex: 1; }
.tri-lightbox-foot kbd { .tri-lightbox-foot kbd {
display: inline-block; display: inline-block;
@@ -232,7 +232,7 @@
border-bottom-width: 2px; border-bottom-width: 2px;
border-radius: 3px; border-radius: 3px;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 12px;
color: var(--black-alpha-72); color: var(--black-alpha-72);
} }
@@ -250,7 +250,7 @@
border: 1px solid var(--black-alpha-12); border: 1px solid var(--black-alpha-12);
border-radius: var(--r-md); border-radius: var(--r-md);
padding: 0 14px; padding: 0 14px;
font-size: 13.5px; font-size: 14px;
color: var(--accent-black); color: var(--accent-black);
background: var(--background-lighter); background: var(--background-lighter);
font-family: inherit; font-family: inherit;
@@ -276,7 +276,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-md); border-radius: var(--r-md);
margin-bottom: 6px; 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 { background: transparent; border-style: dashed; }
.v-bullet-list .bl-add:focus-within { border-color: var(--heat-40); background: var(--surface); } .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: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
color: var(--heat); color: var(--heat);
font-weight: 700; font-weight: 600;
display: grid; place-items: center; display: grid; place-items: center;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -301,7 +301,7 @@
.v-bullet-list .bl-input { .v-bullet-list .bl-input {
flex: 1; flex: 1;
background: transparent; border: 0; outline: none; background: transparent; border: 0; outline: none;
font-size: 13.5px; font-size: 14px;
color: var(--accent-black); color: var(--accent-black);
font-family: inherit; font-family: inherit;
} }
@@ -356,7 +356,7 @@
} }
.pd-overview .ov-h .ct { .pd-overview .ov-h .ct {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
} }
@@ -388,7 +388,7 @@
width: 64px; width: 64px;
flex-shrink: 0; flex-shrink: 0;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-size: 12.5px; font-size: 13px;
} }
.ov-info .v { .ov-info .v {
flex: 1; min-width: 0; flex: 1; min-width: 0;
@@ -400,7 +400,7 @@
content: '·'; content: '·';
color: var(--heat); color: var(--heat);
margin-right: 6px; margin-right: 6px;
font-weight: 700; font-weight: 600;
} }
/* 商品图片 · 卡片内子 section */ /* 商品图片 · 卡片内子 section */
@@ -409,18 +409,18 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.ov-images-sub .sub-h .ti { .ov-images-sub .sub-h .ti {
font-size: 12.5px; font-weight: 500; font-size: 13px; font-weight: 500;
color: var(--black-alpha-72); color: var(--black-alpha-72);
} }
.ov-images-sub .sub-h .ct { .ov-images-sub .sub-h .ct {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
} }
.ov-images-sub .sub-h .more { .ov-images-sub .sub-h .more {
margin-left: auto; margin-left: auto;
font-size: 11.5px; font-size: 12px;
color: var(--heat); color: var(--heat);
cursor: pointer; cursor: pointer;
} }
@@ -448,7 +448,7 @@
.ov-actions .qa-section:last-child { margin-bottom: 0; } .ov-actions .qa-section:last-child { margin-bottom: 0; }
.ov-actions .qa-section-h { .ov-actions .qa-section-h {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .06em; letter-spacing: .06em;
text-transform: uppercase; text-transform: uppercase;
@@ -473,7 +473,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-md); border-radius: var(--r-md);
cursor: pointer; cursor: pointer;
font-size: 12.5px; font-size: 13px;
color: var(--accent-black); color: var(--accent-black);
text-align: center; text-align: center;
transition: border-color var(--t-base), background var(--t-base), color var(--t-base); 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: 1px solid var(--border-faint);
border-radius: var(--r-sm); 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 .ic svg { width: 16px; height: 16px; }
.qa-item.primary { .qa-item.primary {
background: var(--heat); background: var(--heat);
color: var(--accent-white); color: var(--accent-white);
border-color: var(--heat); 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); } .qa-item.primary:hover { color: var(--accent-white); box-shadow: var(--shadow-cta-hover); }
/* 状态 pill 三态(通过/不通过/归档) */ /* 状态 pill 三态(通过/不通过/归档) */
@@ -526,7 +526,7 @@
} }
.pd-tabs .tab { .pd-tabs .tab {
padding: 10px 14px; padding: 10px 14px;
font-size: 13.5px; font-size: 14px;
color: var(--black-alpha-56); color: var(--black-alpha-56);
background: transparent; background: transparent;
border: 0; border: 0;
@@ -557,7 +557,7 @@
} }
.pd-toolbar .total .ct { .pd-toolbar .total .ct {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
margin-left: 4px; margin-left: 4px;
@@ -571,15 +571,15 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
cursor: pointer; cursor: pointer;
font-size: 12.5px; font-size: 13px;
color: var(--black-alpha-72); color: var(--black-alpha-72);
font-family: inherit; font-family: inherit;
transition: border-color var(--t-base), color var(--t-base); transition: border-color var(--t-base), color var(--t-base);
} }
.pd-toolbar .filter:hover { border-color: var(--black-alpha-24); } .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, .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.open svg, .pd-toolbar .filter.filtered svg { color: var(--heat); }
.pd-toolbar .filter svg { width: 10px; height: 10px; opacity: .6; transition: transform var(--t-base); } .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); } .pd-toolbar .filter.open svg { transform: rotate(180deg); }
/* 筛选下拉 · 挂在 body 上避免被祖先 overflow 裁切 */ /* 筛选下拉 · 挂在 body 上避免被祖先 overflow 裁切 */
@@ -600,7 +600,7 @@
background: transparent; border: 0; background: transparent; border: 0;
padding: 8px 12px; padding: 8px 12px;
text-align: left; text-align: left;
font-size: 12.5px; font-size: 13px;
color: var(--accent-black); color: var(--accent-black);
cursor: pointer; cursor: pointer;
border-radius: var(--r-sm); border-radius: var(--r-sm);
@@ -658,12 +658,12 @@
border-right: 1px solid var(--border-faint); border-right: 1px solid var(--border-faint);
} }
.asset-grid.list-view .asset-card .thumb .type-pill { .asset-grid.list-view .asset-card .thumb .type-pill {
font-size: 9.5px; font-size: 12px;
padding: 2px 6px; padding: 2px 6px;
top: 4px; top: 4px;
left: 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 { .asset-grid.list-view .asset-card .meta {
padding: 10px 14px; padding: 10px 14px;
} }
@@ -674,7 +674,7 @@
text-align: center; text-align: center;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12.5px; font-size: 13px;
letter-spacing: .02em; letter-spacing: .02em;
border: 1px dashed var(--border-faint); border: 1px dashed var(--border-faint);
border-radius: var(--r-md); border-radius: var(--r-md);
@@ -706,7 +706,7 @@
background: rgba(0,0,0,.65); background: rgba(0,0,0,.65);
color: var(--accent-white); color: var(--accent-white);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 11px; font-size: 12px;
font-weight: 500; font-weight: 500;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
@@ -717,13 +717,13 @@
.asset-card .meta .pill { .asset-card .meta .pill {
padding: 2px 8px; padding: 2px 8px;
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 10.5px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
.asset-card .meta .date { .asset-card .meta .date {
margin-left: auto; margin-left: auto;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10.5px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .02em; letter-spacing: .02em;
} }
@@ -738,7 +738,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-md); border-radius: var(--r-md);
color: var(--black-alpha-72); color: var(--black-alpha-72);
font-size: 12.5px; font-size: 13px;
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
} }
@@ -759,7 +759,7 @@
} }
.task-stat .lbl { .task-stat .lbl {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .04em; letter-spacing: .04em;
margin-bottom: 6px; margin-bottom: 6px;
@@ -798,7 +798,7 @@
.task-row.head { .task-row.head {
background: var(--background-lighter); background: var(--background-lighter);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
letter-spacing: .04em; letter-spacing: .04em;
font-weight: 500; font-weight: 500;
@@ -816,7 +816,7 @@
} }
.task-row .nm .id-mono { .task-row .nm .id-mono {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; font-size: 12px;
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-weight: 400; font-weight: 400;
} }
@@ -836,7 +836,7 @@
display: inline-flex; align-items: center; gap: 5px; display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; padding: 3px 9px;
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 11.5px; font-size: 12px;
font-weight: 500; font-weight: 500;
width: fit-content; width: fit-content;
} }
@@ -891,7 +891,7 @@
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
color: var(--black-alpha-72); color: var(--black-alpha-72);
font-size: 11.5px; font-size: 12px;
font-family: inherit; font-family: inherit;
cursor: pointer; cursor: pointer;
transition: border-color var(--t-base), color var(--t-base); transition: border-color var(--t-base), color var(--t-base);
core/frontend/src/products-page.css
+10 -10
View File
@@ -3,7 +3,7 @@
.products-page { .products-page {
.page-head { position: sticky; top: 0; z-index: 5; background: var(--background-base); padding-top: 4px; margin-top: -4px; } .page-head { position: sticky; top: 0; z-index: 5; background: var(--background-base); padding-top: 4px; margin-top: -4px; }
.products-main { display: flex; flex-direction: column; } .products-main { display: flex; flex-direction: column; }
.products-main .result-meta { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .products-main .result-meta { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.chip-wrap { position: relative; } .chip-wrap { position: relative; }
.product-grid-wrap { margin: 0 -8px; padding: 2px 8px 24px; } .product-grid-wrap { margin: 0 -8px; padding: 2px 8px 24px; }
@@ -13,31 +13,31 @@
.product-thumb { aspect-ratio: 1.4 / 1; } .product-thumb { aspect-ratio: 1.4 / 1; }
.product-body { padding: 14px 14px 12px; flex: 1; } .product-body { padding: 14px 14px 12px; flex: 1; }
.product-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-cat { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 8px; background: var(--background-lighter); color: var(--black-alpha-72); border-radius: var(--r-sm); font-size: 11.5px; } .product-cat { display: inline-flex; align-items: center; margin-top: 8px; padding: 2px 8px; background: var(--background-lighter); color: var(--black-alpha-72); border-radius: var(--r-sm); font-size: 12px; }
.product-date { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; } .product-date { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; }
.product-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-faint); font-size: 11.5px; color: #6f6f6f; background: var(--background-base); } .product-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-faint); font-size: 12px; color: #6f6f6f; background: var(--background-base); }
.product-footer .stat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; justify-self: center; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); } .product-footer .stat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; justify-self: center; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
.product-footer .stat svg { width: 14px; height: 14px; color: currentColor; flex-shrink: 0; stroke-width: 1.25; transition: color var(--t-base); } .product-footer .stat svg { width: 14px; height: 14px; color: currentColor; flex-shrink: 0; stroke-width: 1.25; transition: color var(--t-base); }
.product-footer .stat b { color: var(--accent-black); font-weight: 600; transition: color var(--t-base); } .product-footer .stat b { color: var(--accent-black); font-weight: 600; transition: color var(--t-base); }
.product-footer .sep { color: #b8b8b8; font-family: var(--font-mono); flex-shrink: 0; } .product-footer .sep { color: #b8b8b8; font-family: var(--font-mono); flex-shrink: 0; }
.view-tog { display: inline-flex; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 2px; flex-shrink: 0; } .view-tog { display: inline-flex; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 2px; flex-shrink: 0; }
.view-tog button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--black-alpha-48); cursor: pointer; border-radius: 4px; transition: background var(--t-base), color var(--t-base); } .view-tog button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; border-radius: 4px; transition: background var(--t-base), color var(--t-base); }
.view-tog button:hover { color: var(--accent-black); } .view-tog button:hover { color: var(--accent-black); }
.view-tog button.active { background: var(--accent-black); color: var(--accent-white); } .view-tog button.active { background: var(--accent-black); color: var(--accent-white); }
.view-tog button svg { width: 13px; height: 13px; } .view-tog button svg { width: 13px; height: 13px; }
/* 编辑模式 checkbox(默认隐藏) */ /* 编辑模式 checkbox(默认隐藏) */
.product-card .card-check { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--black-alpha-32); display: none; place-items: center; color: var(--accent-white); z-index: 5; pointer-events: none; } .product-card .card-check { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-loud); display: none; place-items: center; color: var(--accent-white); z-index: 5; pointer-events: none; }
.product-card .card-check svg { width: 11px; height: 11px; opacity: 0; } .product-card .card-check svg { width: 11px; height: 11px; visibility: hidden; }
} }
/* 批量编辑模式(忠实移植自 products.html · body.edit-mode 全局态,控件仅商品库出现) */ /* 批量编辑模式(忠实移植自 products.html · body.edit-mode 全局态,控件仅商品库出现) */
body.edit-mode .product-card { cursor: pointer; } body.edit-mode .product-card { cursor: pointer; }
body.edit-mode .product-card .card-check { display: grid; } body.edit-mode .product-card .card-check { display: grid; }
body.edit-mode .product-card.selected .card-check { background: var(--heat); border-color: var(--heat); } body.edit-mode .product-card.selected .card-check { background: var(--heat); border-color: var(--heat); }
body.edit-mode .product-card.selected .card-check svg { opacity: 1; } body.edit-mode .product-card.selected .card-check svg { visibility: visible; }
body.edit-mode .product-card.selected { border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; } body.edit-mode .product-card.selected { border-color: var(--heat); box-shadow: 0 0 0 1px var(--heat) inset; }
body.edit-mode .product-footer .stat, body.edit-mode .product-footer .stat,
body.edit-mode .product-card .card-del-btn { opacity: 0 !important; pointer-events: none !important; } body.edit-mode .product-card .card-del-btn { opacity: 0 !important; pointer-events: none !important; }
@@ -50,9 +50,9 @@ body.edit-mode .product-card .card-del-btn { opacity: 0 !important; pointer-even
} }
body.edit-mode .bulk-bar { display: inline-flex; } body.edit-mode .bulk-bar { display: inline-flex; }
.bulk-bar .ct { font-family: var(--font-mono); letter-spacing: .02em; } .bulk-bar .ct { font-family: var(--font-mono); letter-spacing: .02em; }
.bulk-bar .ct b { color: var(--heat); font-weight: 700; padding: 0 3px; } .bulk-bar .ct b { color: var(--heat); font-weight: 600; padding: 0 3px; }
.bulk-bar .sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); } .bulk-bar .sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); }
.bulk-bar button { height: 30px; padding: 0 12px; background: transparent; border: 1px solid rgba(255,255,255,.24); border-radius: var(--r-sm); color: var(--accent-white); font-size: 12.5px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .15s, border-color .15s; } .bulk-bar button { height: 30px; padding: 0 12px; background: transparent; border: 1px solid rgba(255,255,255,.24); border-radius: var(--r-sm); color: var(--accent-white); font-size: 13px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .15s, border-color .15s; }
.bulk-bar button:hover { background: rgba(255,255,255,.08); } .bulk-bar button:hover { background: rgba(255,255,255,.08); }
.bulk-bar button.danger { background: var(--accent-crimson, #c43d3d); border-color: var(--accent-crimson, #c43d3d); } .bulk-bar button.danger { background: var(--accent-crimson, #c43d3d); border-color: var(--accent-crimson, #c43d3d); }
.bulk-bar button.danger:hover { filter: brightness(1.06); } .bulk-bar button.danger:hover { filter: brightness(1.06); }
core/frontend/src/project-wizard-page.css
+25 -25
View File
@@ -22,12 +22,12 @@
/* ── 左侧步骤轨 .step ── */ /* ── 左侧步骤轨 .step ── */
.step { display: flex; gap: 12px; padding: 12px 0; position: relative; } .step { display: flex; gap: 12px; padding: 12px 0; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 36px; width: 1px; height: calc(100% - 24px); background: var(--border-faint); } .step:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 36px; width: 1px; height: calc(100% - 24px); background: var(--border-faint); }
.step .num { width: 24px; height: 24px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--black-alpha-48); flex-shrink: 0; z-index: 1; font-family: var(--font-mono); } .step .num { width: 24px; height: 24px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--black-alpha-48); flex-shrink: 0; z-index: 1; font-family: var(--font-mono); }
.step .num svg { width: 12px; height: 12px; } .step .num svg { width: 12px; height: 12px; }
.step.done .num { background: var(--accent-black); border-color: var(--accent-black); color: var(--accent-white); } .step.done .num { background: var(--accent-black); border-color: var(--accent-black); color: var(--accent-white); }
.step.active .num { background: var(--heat); border-color: var(--heat); color: var(--accent-white); } .step.active .num { background: var(--heat); border-color: var(--heat); color: var(--accent-white); }
.step .label { font-size: 13.5px; font-weight: 500; color: var(--black-alpha-56); padding-top: 2px; } .step .label { font-size: 14px; font-weight: 500; color: var(--black-alpha-56); padding-top: 2px; }
.step .desc { font-size: 11.5px; color: var(--black-alpha-48); padding-top: 3px; line-height: 1.4; font-family: var(--font-mono); letter-spacing: .02em; } .step .desc { font-size: 12px; color: var(--black-alpha-48); padding-top: 3px; line-height: 1.4; font-family: var(--font-mono); letter-spacing: .02em; }
.step.active .label { color: var(--accent-black); font-weight: 600; } .step.active .label { color: var(--accent-black); font-weight: 600; }
.step.done .label { color: var(--black-alpha-56); } .step.done .label { color: var(--black-alpha-56); }
.step.done:not(:last-child)::after { background: var(--accent-black); } .step.done:not(:last-child)::after { background: var(--accent-black); }
@@ -54,7 +54,7 @@
transition: border-color var(--t-base); transition: border-color var(--t-base);
} }
.pp-toolbar .search-inline:focus-within { border-color: var(--heat-40); } .pp-toolbar .search-inline:focus-within { border-color: var(--heat-40); }
.pp-toolbar .search-inline svg { width: 14px; height: 14px; color: var(--black-alpha-48); flex-shrink: 0; } .pp-toolbar .search-inline svg { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
.pp-toolbar .search-inline input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--accent-black); font-family: inherit; } .pp-toolbar .search-inline input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--accent-black); font-family: inherit; }
.pp-toolbar .search-inline input::placeholder { color: var(--black-alpha-48); } .pp-toolbar .search-inline input::placeholder { color: var(--black-alpha-48); }
.pp-toolbar .pp-chip-wrap { position: relative; } .pp-toolbar .pp-chip-wrap { position: relative; }
@@ -71,7 +71,7 @@
} }
.pp-toolbar .pp-chip:hover { border-color: var(--black-alpha-32); color: var(--accent-black); } .pp-toolbar .pp-chip:hover { border-color: var(--black-alpha-32); color: var(--accent-black); }
.pp-toolbar .pp-chip.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); } .pp-toolbar .pp-chip.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); }
.pp-toolbar .pp-chip svg { width: 11px; height: 11px; opacity: .6; } .pp-toolbar .pp-chip svg { width: 11px; height: 11px; color: var(--ink-3); }
.pp-toolbar .pp-menu { .pp-toolbar .pp-menu {
position: absolute; top: calc(100% + 4px); left: 0; position: absolute; top: calc(100% + 4px); left: 0;
min-width: 160px; min-width: 160px;
@@ -88,26 +88,26 @@
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
padding: 7px 10px; padding: 7px 10px;
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 12.5px; font-size: 13px;
color: var(--accent-black); color: var(--accent-black);
cursor: pointer; cursor: pointer;
} }
.pp-toolbar .pp-menu .mi:hover { background: var(--background-lighter); } .pp-toolbar .pp-menu .mi:hover { background: var(--background-lighter); }
.pp-toolbar .pp-menu .mi.selected { color: var(--heat); font-weight: 600; } .pp-toolbar .pp-menu .mi.selected { color: var(--heat); font-weight: 600; }
.pp-toolbar .pp-menu .mi-check { width: 12px; height: 12px; opacity: 0; flex-shrink: 0; } .pp-toolbar .pp-menu .mi-check { width: 12px; height: 12px; visibility: hidden; flex-shrink: 0; }
.pp-toolbar .pp-menu .mi.selected .mi-check { opacity: 1; } .pp-toolbar .pp-menu .mi.selected .mi-check { visibility: visible; }
.pp-toolbar .pp-clear { .pp-toolbar .pp-clear {
display: inline-flex; align-items: center; gap: 4px; display: inline-flex; align-items: center; gap: 4px;
height: 30px; padding: 0 10px; height: 30px; padding: 0 10px;
background: transparent; border: 0; border-radius: var(--r-sm); background: transparent; border: 0; border-radius: var(--r-sm);
color: var(--black-alpha-56); font-size: 12.5px; font-family: inherit; color: var(--black-alpha-56); font-size: 13px; font-family: inherit;
cursor: pointer; cursor: pointer;
} }
.pp-toolbar .pp-clear:hover { color: var(--accent-crimson); background: var(--crimson-bg); } .pp-toolbar .pp-clear:hover { color: var(--accent-crimson); background: var(--crimson-bg); }
.pp-toolbar .pp-clear svg { width: 11px; height: 11px; } .pp-toolbar .pp-clear svg { width: 11px; height: 11px; }
.pp-result-meta { .pp-result-meta {
font-family: var(--font-mono); font-size: 11.5px; font-family: var(--font-mono); font-size: 12px;
color: var(--black-alpha-48); letter-spacing: .02em; color: var(--black-alpha-48); letter-spacing: .02em;
margin: 4px 0 12px; margin: 4px 0 12px;
} }
@@ -147,11 +147,11 @@
display: inline-flex; align-items: center; display: inline-flex; align-items: center;
margin-top: 8px; padding: 2px 8px; margin-top: 8px; padding: 2px 8px;
background: var(--background-lighter); color: var(--black-alpha-72); background: var(--background-lighter); color: var(--black-alpha-72);
border-radius: var(--r-sm); font-size: 11.5px; border-radius: var(--r-sm); font-size: 12px;
} }
.pp-grid .product-date { .pp-grid .product-date {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 11px; color: var(--black-alpha-48); font-size: 12px; color: var(--black-alpha-48);
margin-top: 10px; letter-spacing: .02em; margin-top: 10px; letter-spacing: .02em;
} }
.pp-grid .product-card.selected .product-cat { background: var(--surface); color: var(--heat); } .pp-grid .product-card.selected .product-cat { background: var(--surface); color: var(--heat); }
@@ -179,7 +179,7 @@
.pp-grid .pp-create-card:hover .pc-plus { filter: brightness(1.06); } .pp-grid .pp-create-card:hover .pc-plus { filter: brightness(1.06); }
.pp-grid .pp-create-card .pc-plus svg { width: 18px; height: 18px; } .pp-grid .pp-create-card .pc-plus svg { width: 18px; height: 18px; }
.pp-grid .pp-create-card .pc-t { font-size: 13px; font-weight: 600; } .pp-grid .pp-create-card .pc-t { font-size: 13px; font-weight: 600; }
.pp-grid .pp-create-card .pc-d { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; } .pp-grid .pp-create-card .pc-d { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
/* ── Step 1 · 列表视图 ── */ /* ── Step 1 · 列表视图 ── */
.pp-grid.list-view { display: flex; flex-direction: column; gap: 6px; } .pp-grid.list-view { display: flex; flex-direction: column; gap: 6px; }
@@ -197,7 +197,7 @@
border-radius: var(--r-md); border-radius: var(--r-md);
background: var(--background-lighter); background: var(--background-lighter);
color: var(--black-alpha-48); color: var(--black-alpha-48);
font-size: 12.5px; font-family: var(--font-mono); letter-spacing: .02em; font-size: 13px; font-family: var(--font-mono); letter-spacing: .02em;
line-height: 1.7; line-height: 1.7;
} }
.pp-empty .reset { display: inline-block; margin-top: 8px; color: var(--heat); cursor: pointer; } .pp-empty .reset { display: inline-block; margin-top: 8px; color: var(--heat); cursor: pointer; }
@@ -207,7 +207,7 @@
display: flex; align-items: center; gap: 16px; display: flex; align-items: center; gap: 16px;
margin-top: 18px; padding-top: 14px; margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--border-faint); border-top: 1px solid var(--border-faint);
font-size: 12.5px; color: var(--black-alpha-56); font-size: 13px; color: var(--black-alpha-56);
} }
.pp-pager .total { font-family: var(--font-mono); letter-spacing: .02em; } .pp-pager .total { font-family: var(--font-mono); letter-spacing: .02em; }
.pp-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; } .pp-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; }
@@ -215,7 +215,7 @@
min-width: 28px; height: 28px; padding: 0 8px; min-width: 28px; height: 28px; padding: 0 8px;
border: 1px solid var(--border-faint); background: var(--surface); border: 1px solid var(--border-faint); background: var(--surface);
border-radius: var(--r-sm); 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); transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
} }
.pp-pager .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); } .pp-pager .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); }
@@ -231,7 +231,7 @@
height: 28px; padding: 0 10px; height: 28px; padding: 0 10px;
background: var(--surface); border: 1px solid var(--border-faint); background: var(--surface); border: 1px solid var(--border-faint);
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-family: inherit; font-size: 12.5px; color: var(--black-alpha-72); font-family: inherit; font-size: 13px; color: var(--black-alpha-72);
} }
/* ── Step 1 · 底部提示 ── */ /* ── Step 1 · 底部提示 ── */
@@ -241,10 +241,10 @@
background: var(--background-lighter); background: var(--background-lighter);
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-md); border-radius: var(--r-md);
font-size: 12.5px; color: var(--black-alpha-56); font-size: 13px; color: var(--black-alpha-56);
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
} }
.pp-bottom-tip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--black-alpha-48); } .pp-bottom-tip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-3); }
.pp-bottom-tip a { color: var(--heat); cursor: pointer; text-decoration: none; } .pp-bottom-tip a { color: var(--heat); cursor: pointer; text-decoration: none; }
.pp-bottom-tip a:hover { text-decoration: underline; } .pp-bottom-tip a:hover { text-decoration: underline; }
@@ -262,12 +262,12 @@
.opt-card.selected { border-color: var(--heat); background: var(--heat-12); } .opt-card.selected { border-color: var(--heat); background: var(--heat-12); }
.opt-card.selected::after { content: ''; position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; background-color: var(--heat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; border-radius: var(--r-sm); } .opt-card.selected::after { content: ''; position: absolute; top: 8px; right: 10px; width: 16px; height: 16px; background-color: var(--heat); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; border-radius: var(--r-sm); }
.opt-card h4 { font-size: 13px; font-weight: 600; } .opt-card h4 { font-size: 13px; font-weight: 600; }
.opt-card .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 3px; letter-spacing: .02em; } .opt-card .sub { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; letter-spacing: .02em; }
.opt-card .note { font-size: 11.5px; color: var(--black-alpha-56); margin-top: 6px; line-height: 1.5; } .opt-card .note { font-size: 12px; color: var(--black-alpha-56); margin-top: 6px; line-height: 1.5; }
.opt-card .metric { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .opt-card .metric { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
.opt-card .metric .val { color: var(--accent-black); font-weight: 500; } .opt-card .metric .val { color: var(--accent-black); font-weight: 500; }
.opt-card.selected .metric .val { color: var(--heat); } .opt-card.selected .metric .val { color: var(--heat); }
.opt-card .badge { font-family: var(--font-mono); font-size: 9.5px; padding: 1px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-48); display: inline-block; margin-top: 8px; letter-spacing: .04em; align-self: flex-start; } .opt-card .badge { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-48); display: inline-block; margin-top: 8px; letter-spacing: .04em; align-self: flex-start; }
.opt-card.selected .badge { color: var(--heat); border-color: var(--heat-20); } .opt-card.selected .badge { color: var(--heat); border-color: var(--heat-20); }
@media (min-width: 1280px) { .opt-row.cols-6 { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1280px) { .opt-row.cols-6 { grid-template-columns: repeat(6, 1fr); } }
@@ -280,13 +280,13 @@
.theme-pill svg { width: 13px; height: 13px; } .theme-pill svg { width: 13px; height: 13px; }
/* ── Step 2 · 人设推荐气泡 .reco-bubble ── */ /* ── Step 2 · 人设推荐气泡 .reco-bubble ── */
.reco-bubble { position: relative; margin-top: 10px; padding: 10px 14px; background: var(--heat-12); border: 1px solid var(--heat-20); border-radius: var(--r-md); display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--accent-black); } .reco-bubble { position: relative; margin-top: 10px; padding: 10px 14px; background: var(--heat-12); border: 1px solid var(--heat-20); border-radius: var(--r-md); display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--accent-black); }
.reco-bubble::before { content: ''; position: absolute; top: -5px; left: 28px; width: 9px; height: 9px; background: var(--heat-12); border-left: 1px solid var(--heat-20); border-top: 1px solid var(--heat-20); transform: rotate(45deg); } .reco-bubble::before { content: ''; position: absolute; top: -5px; left: 28px; width: 9px; height: 9px; background: var(--heat-12); border-left: 1px solid var(--heat-20); border-top: 1px solid var(--heat-20); transform: rotate(45deg); }
.reco-bubble .ic { color: var(--heat); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; } .reco-bubble .ic { color: var(--heat); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.reco-bubble .ic svg, .reco-bubble .dismiss svg { display: block; width: 16px; height: 16px; } .reco-bubble .ic svg, .reco-bubble .dismiss svg { display: block; width: 16px; height: 16px; }
.reco-bubble .txt { flex: 1; line-height: 1.5; } .reco-bubble .txt { flex: 1; line-height: 1.5; }
.reco-bubble .txt strong { color: var(--heat); font-weight: 600; } .reco-bubble .txt strong { color: var(--heat); font-weight: 600; }
.reco-bubble .txt .meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; } .reco-bubble .txt .meta { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
.reco-bubble .btn-apply { height: 28px; padding: 0 12px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-md); font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow-cta); transition: box-shadow var(--t-base); font-family: inherit; } .reco-bubble .btn-apply { height: 28px; padding: 0 12px; background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); border-radius: var(--r-md); font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow-cta); transition: box-shadow var(--t-base); font-family: inherit; }
.reco-bubble .btn-apply:hover { box-shadow: var(--shadow-cta-hover); } .reco-bubble .btn-apply:hover { box-shadow: var(--shadow-cta-hover); }
.reco-bubble .dismiss { background: transparent; color: var(--black-alpha-48); border: 0; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .reco-bubble .dismiss { background: transparent; color: var(--black-alpha-48); border: 0; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
core/frontend/src/projects-page.css
+6 -6
View File
@@ -4,8 +4,8 @@
/* ─── List view ─── */ /* ─── List view ─── */
.proj-name-cell { display: flex; align-items: center; gap: 12px; } .proj-name-cell { display: flex; align-items: center; gap: 12px; }
.proj-thumb { width: 40px; height: 52px; flex-shrink: 0; border-radius: var(--r-md); } .proj-thumb { width: 40px; height: 52px; flex-shrink: 0; border-radius: var(--r-md); }
.proj-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; } .proj-name { font-weight: 600; color: var(--accent-black); font-size: 14px; }
.proj-sub { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; } .proj-sub { font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; }
.row-action { display: flex; gap: 4px; visibility: hidden; } .row-action { display: flex; gap: 4px; visibility: hidden; }
table.t tbody tr:hover .row-action { visibility: visible; } table.t tbody tr:hover .row-action { visibility: visible; }
.row-action a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--black-alpha-56); border-radius: var(--r-md); } .row-action a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--black-alpha-56); border-radius: var(--r-md); }
@@ -29,15 +29,15 @@
.row-more-tip { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,.08); padding: 4px; min-width: 110px; opacity: 0; pointer-events: none; transform: translateY(-2px); transition: opacity .15s, transform .15s; z-index: 12; } .row-more-tip { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,.08); padding: 4px; min-width: 110px; opacity: 0; pointer-events: none; transform: translateY(-2px); transition: opacity .15s, transform .15s; z-index: 12; }
.row-more-tip::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .row-more-tip::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.row-more:hover .row-more-tip, .row-more-tip:hover { opacity: 1; pointer-events: auto; transform: translateY(0); } .row-more:hover .row-more-tip, .row-more-tip:hover { opacity: 1; pointer-events: auto; transform: translateY(0); }
.row-more-tip .mi { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; font-size: 12.5px; color: var(--accent-black); font-family: inherit; text-align: left; transition: background var(--t-base), color var(--t-base); } .row-more-tip .mi { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--accent-black); font-family: inherit; text-align: left; transition: background var(--t-base), color var(--t-base); }
.row-more-tip .mi:hover { background: var(--crimson-bg, #fdebea); color: var(--accent-crimson, #c43d3d); } .row-more-tip .mi:hover { background: var(--crimson-bg, #fdebea); color: var(--accent-crimson, #c43d3d); }
.row-more-tip .mi svg { width: 13px; height: 13px; } .row-more-tip .mi svg { width: 13px; height: 13px; }
.btn.active { background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black); } .btn.active { background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black); }
.proj-card .card-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .proj-card .card-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proj-card .card-name { font-size: 13.5px; font-weight: 600; color: var(--accent-black); line-height: 1.4; } .proj-card .card-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.4; }
.proj-card .card-sub { font-size: 11.5px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; } .proj-card .card-sub { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; }
.proj-card .card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border-faint); margin-top: auto; } .proj-card .card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border-faint); margin-top: auto; }
.proj-card .card-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .02em; } .proj-card .card-time { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; }
/* chip 下拉容器(默认收起)· chip 本体/caret 走全局 restraint .chip */ /* chip 下拉容器(默认收起)· chip 本体/caret 走全局 restraint .chip */
.chip-wrap { position: relative; } .chip-wrap { position: relative; }
core/frontend/src/routes/ai-tools.tsx
+2 -2
View File
@@ -347,7 +347,7 @@ export function AssetFactoryPage({ navigate, aiTasks, assets = [] }: { navigate:
<span className="pct">60%</span> <span className="pct">60%</span>
</div> </div>
) : ( ) : (
<span className="muted-2 mono" style={{ fontSize: 11 }}> <span className="muted-2 mono" style={{ fontSize: 12 }}>
{pill === "ok" ? "已完成" : "—"} {pill === "ok" ? "已完成" : "—"}
</span> </span>
)} )}
@@ -358,7 +358,7 @@ export function AssetFactoryPage({ navigate, aiTasks, assets = [] }: { navigate:
{statusText(task.status)} {statusText(task.status)}
</span> </span>
</td> </td>
<td className="muted-2 mono" style={{ fontSize: 11 }}>{(task.created_at || "").slice(0, 10)}</td> <td className="muted-2 mono" style={{ fontSize: 12 }}>{(task.created_at || "").slice(0, 10)}</td>
<td /> <td />
</tr> </tr>
); );
core/frontend/src/routes/auth-screen.tsx
+129 -167
View File
@@ -1,53 +1,59 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import type { FormEvent } from "react"; import type { FormEvent } from "react";
import { Eye, EyeOff, LockKeyhole, UserRound } from "lucide-react";
import { api } from "../api"; import { api } from "../api";
import type { Team, User } from "../types"; import type { Team, User } from "../types";
import type { AuthMode } from "./route-config"; import type { AuthMode } from "./route-config";
const CHECK_SVG = ( const LOGIN_PROGRESS_STAGE_MS = 520;
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
); type LoginProgress = "checking" | "verified" | "entering";
const MAIL_SVG = (
<svg className="ic-l" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" /><path d="m22 6-10 7L2 6" /></svg> const LOGIN_PROGRESS_COPY: Record<LoginProgress, string> = {
); checking: "正在验证用户名和密码…",
const LOCK_SVG = ( verified: "验证成功，正在登录…",
<svg className="ic-l" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg> entering: "登录成功，正在进入 Airshelf"
); };
const EYE_SVG = (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></svg> function wait(ms: number) {
); return new Promise((resolve) => setTimeout(resolve, ms));
const ARROW_SVG = ( }
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
); async function completeProgressStage(startedAt: number) {
const remaining = LOGIN_PROGRESS_STAGE_MS - (Date.now() - startedAt);
if (remaining > 0) await wait(remaining);
}
type FieldErrors = {
username?: string;
password?: string;
};
export function AuthScreen({ export function AuthScreen({
initialMode, initialMode: _initialMode,
onModeChange, onModeChange: _onModeChange,
onAuthed onAuthed
}: { }: {
initialMode: AuthMode; initialMode: AuthMode;
onModeChange: (mode: AuthMode) => void; onModeChange: (mode: AuthMode) => void;
onAuthed: (payload: { token: string; user: User; team: Team }) => void; onAuthed: (payload: { token: string; user: User; team: Team }) => void | Promise<void>;
}) { }) {
const [mode, setMode] = useState<AuthMode>(initialMode);
// 不预填设计稿假账号:真实登录页字段必须从空开始
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [teamName, setTeamName] = useState("");
const [email, setEmail] = useState("");
const [registerPassword, setRegisterPassword] = useState("");
const [registerPassword2, setRegisterPassword2] = useState("");
const [invite, setInvite] = useState("");
const [agreed, setAgreed] = useState(true);
const [showPwd, setShowPwd] = useState(false); const [showPwd, setShowPwd] = useState(false);
const [showRegPwd, setShowRegPwd] = useState(false); const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
const [showRegPwd2, setShowRegPwd2] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [toast, setToast] = useState<{ title: string; sub: string } | null>(null); const [toast, setToast] = useState<{ title: string; sub: string } | null>(null);
const [loginProgress, setLoginProgress] = useState<LoginProgress | null>(null);
const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null); const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => setMode(initialMode), [initialMode]); useEffect(() => {
const path = window.location.pathname.replace(/\/+$/, "").toLowerCase();
if (path === "/register" || window.location.hash === "#register") {
window.history.replaceState(null, "", "/login");
}
}, []);
useEffect(() => () => { if (toastTimer.current) clearTimeout(toastTimer.current); }, []); useEffect(() => () => { if (toastTimer.current) clearTimeout(toastTimer.current); }, []);
function showToast(title: string, sub: string) { function showToast(title: string, sub: string) {
@@ -56,41 +62,48 @@ export function AuthScreen({
toastTimer.current = setTimeout(() => setToast(null), 2800); toastTimer.current = setTimeout(() => setToast(null), 2800);
} }
function switchMode(next: AuthMode) { function setFieldValue(field: keyof FieldErrors, value: string) {
setMode(next); if (field === "username") setUsername(value);
if (field === "password") setPassword(value);
setError(""); setError("");
onModeChange(next); setLoginProgress(null);
setFieldErrors((current) => ({ ...current, [field]: undefined }));
} }
async function submit(event: FormEvent) { function validateLogin() {
event.preventDefault(); const next: FieldErrors = {};
if (!username.trim()) next.username = "请输入用户名";
if (!password) next.password = "请输入密码";
setFieldErrors(next);
if (Object.keys(next).length > 0) {
setError("请补全必填字段后再登录");
return false;
}
return true;
}
async function submit(event?: FormEvent) {
event?.preventDefault();
if (busy) return;
if (!validateLogin()) return;
setBusy(true); setBusy(true);
setError(""); setError("");
setLoginProgress("checking");
try { try {
if (mode === "login") { const checkingStartedAt = Date.now();
if (!username.trim() || !password) throw new Error("请输入邮箱和密码"); const payload = await api.login({ username: username.trim(), password });
} await completeProgressStage(checkingStartedAt);
if (mode === "register") { setLoginProgress("verified");
if (registerPassword.length < 8) throw new Error("密码至少 8 位"); await wait(LOGIN_PROGRESS_STAGE_MS);
if (registerPassword !== registerPassword2) throw new Error("两次密码不一致"); setLoginProgress("entering");
if (!agreed) throw new Error("请同意用户协议"); await wait(LOGIN_PROGRESS_STAGE_MS);
} await onAuthed(payload);
const payload =
mode === "login"
? await api.login({ username, password })
: await api.register({
username: email,
email,
password: registerPassword,
team_name: teamName
});
onAuthed(payload);
} catch (err) { } catch (err) {
setLoginProgress(null);
const raw = err instanceof Error ? err.message : ""; const raw = err instanceof Error ? err.message : "";
// 后端错误是英文原文(invalid credentials 等),映射成用户可读的中文
const friendly = /invalid credentials|unable to log in|non_field_errors/i.test(raw) const friendly = /invalid credentials|unable to log in|non_field_errors/i.test(raw)
? "邮箱或密码不正确" ? "用户名或密码不正确"
: raw || (mode === "login" ? "登录失败,请稍后重试" : "注册失败,请稍后重试"); : raw || "登录失败,请稍后重试";
setError(friendly); setError(friendly);
} finally { } finally {
setBusy(false); setBusy(false);
@@ -98,132 +111,81 @@ export function AuthScreen({
} }
return ( return (
<main className={`auth-exact-page ${mode === "register" ? "auth-register-page" : "auth-login-page"}`}> <main className="auth-exact-page auth-login-page">
<a className="top-back" href={mode === "register" ? "/login" : "/dashboard"} onClick={(event) => { if (mode === "register") { event.preventDefault(); switchMode("login"); } }}>
{mode === "register" ? "← 返回登录" : "← 返回工作台"}
</a>
<div className="auth-wrap"> <div className="auth-wrap">
<span className="corner-tr" aria-hidden="true"></span><span className="corner-bl" aria-hidden="true"></span> <span className="corner-tr" aria-hidden="true"></span><span className="corner-bl" aria-hidden="true"></span>
<aside className="auth-brand"> <aside className="auth-brand">
<div className="logo"><img className="logo-img" src="/assets/logo-dark.png" alt="Airshelf" /></div> <div className="logo"><img className="logo-img" src="/assets/logo-dark.png" alt="Airshelf" /></div>
<div className="tag">// SHORT-VIDEO COMMERCE PLATFORM</div> <div className="tag">// SHORT-VIDEO COMMERCE PLATFORM</div>
<div className="hero"> <div className="hero">
{mode === "login" ? <><h1>AI 全流程<br /><span className="h">短剧化</span>带货生成</h1><p>商品 → AI 脚本 → 故事板 → Seedance 视频片段 → 一键导出 9:16 ≤60s 成片。</p></> : <><h1>开通团队,<br />开始 <span className="h">AI 带货</span> 第一条短剧</h1><p>个人 / 企业团队 1-2 小时出成片,失败不扣费,确认后扣。</p></>} <h1>AI 全流程<br /><span className="h">短剧化</span>带货生成</h1>
<p>商品 → AI 脚本 → 故事板 → Seedance 视频片段 → 一键导出 9:16 ≤60s 成片。</p>
</div> </div>
{mode === "login" ? (
<div className="ascii">
<div className="ln"><span className="k">// step·1</span> &nbsp; 脚本生成 &nbsp; &nbsp; <span className="v">●●●●●</span></div>
<div className="ln"><span className="k">// step·2</span> &nbsp; 基础资产 &nbsp; &nbsp; <span className="v">●●●●○</span></div>
<div className="ln"><span className="k">// step·3</span> &nbsp; 故事板 &nbsp; &nbsp; &nbsp; <span className="v">●●●○○</span></div>
<div className="ln"><span className="k">// step·4</span> &nbsp; 视频片段 &nbsp; &nbsp; <span className="v">●●○○○</span></div>
<div className="ln"><span className="k">// step·5</span> &nbsp; 拼接导出 &nbsp; &nbsp; <span className="v">●○○○○</span></div>
</div>
) : (
<div className="val-list">
<div className="val-item"><span className="ic-v">{CHECK_SVG}</span><span className="txt-v"><b>5 阶段流水线</b> · 脚本 → 资产 → 故事板 → 视频片段 → 拼接导出</span></div>
<div className="val-item"><span className="ic-v">{CHECK_SVG}</span><span className="txt-v"><b>失败不扣费</b> · 任务仅在用户通过时扣费,失败 / 超时 / 重跑一律不扣</span></div>
<div className="val-item"><span className="ic-v">{CHECK_SVG}</span><span className="txt-v"><b>团队 + 角色 + 四层额度</b> · 超管 / 团管 / 成员,日 / 月 + 团队 / 总四层防超支</span></div>
<div className="val-item"><span className="ic-v">{CHECK_SVG}</span><span className="txt-v"><b>跨项目资产库</b> · 主播 / 场景 / 商品图沉淀复用,不重复生成</span></div>
</div>
)}
<div className="foot"><a href="#">关于</a><a href="#">定价</a><a href="#">联系</a><a href="#">隐私</a></div> <div className="foot"><a href="#">关于</a><a href="#">定价</a><a href="#">联系</a><a href="#">隐私</a></div>
</aside> </aside>
<main className="auth-form"> <section className="auth-form" aria-label="登录">
<div className="h-row"><h2>{mode === "login" ? "登录" : "注册团队"}</h2><span className="sub">{mode === "login" ? "// /auth/login" : "// /auth/register"}</span></div> <div className="h-row"><h2>登录</h2><span className="sub">// LOGIN</span></div>
<p className="lead">{mode === "login" ? "使用团队邀请邮箱登录,接受邀请后自动加入对应团队。" : "填写团队信息开通账户,默认成为团队超管。"}</p> <form id="login-form" autoComplete="off" onSubmit={submit} noValidate>
{mode === "login" ? ( <div className={`field${fieldErrors.username ? " has-error" : ""}`}>
<form id="login-form" autoComplete="off" onSubmit={submit}> <label className="field-label" htmlFor="auth-username">用户名 <span className="req">*</span></label>
<div className="field"> <div className="field-input-wrap">
<label className="field-label" htmlFor="auth-email">邮箱 <span className="req">*</span></label> <UserRound className="ic-l" size={16} strokeWidth={1.5} aria-hidden="true" />
<div className="field-input-wrap"> <input
{MAIL_SVG} id="auth-username"
<input type="email" id="auth-email" placeholder="name@company.com" value={username} onChange={(event) => setUsername(event.target.value)} required /> type="text"
</div> placeholder="请输入用户名"
value={username}
autoComplete="username"
aria-invalid={Boolean(fieldErrors.username)}
onChange={(event) => setFieldValue("username", event.target.value)}
/>
</div> </div>
<div className="field"> </div>
<label className="field-label" htmlFor="auth-pwd">密码 <span className="req">*</span></label> <div className={`field${fieldErrors.password ? " has-error" : ""}`}>
<div className="field-input-wrap"> <label className="field-label" htmlFor="auth-pwd">密码 <span className="req">*</span></label>
{LOCK_SVG} <div className="field-input-wrap">
<input type={showPwd ? "text" : "password"} id="auth-pwd" placeholder="••••••••" value={password} onChange={(event) => setPassword(event.target.value)} required /> <LockKeyhole className="ic-l" size={16} strokeWidth={1.5} aria-hidden="true" />
<button type="button" className="toggle-pwd" aria-label="切换密码可见" onClick={() => setShowPwd((value) => !value)}>{EYE_SVG}</button> <input
</div> id="auth-pwd"
</div> type={showPwd ? "text" : "password"}
<div className="row-between"> placeholder="请输入密码"
<label><input type="checkbox" defaultChecked /> 记住我 7 天</label> value={password}
<a href="#" onClick={(event) => { event.preventDefault(); showToast("已发送重置邮件", `请到 ${username.trim() || "登录邮箱"} 收件箱查看 · 链接 30 分钟有效`); }}>忘记密码?</a> autoComplete="current-password"
</div> aria-invalid={Boolean(fieldErrors.password)}
{error && <div className="form-error">{error}</div>} onChange={(event) => setFieldValue("password", event.target.value)}
<button className="btn-cta" type="submit" disabled={busy}> />
{busy ? <span className="busy-copy">// 验证中...</span> : <>登录{ARROW_SVG}</>} <button
</button> type="button"
<div className="divider"><span className="line"></span><span className="txt">OR</span><span className="line"></span></div> className={`toggle-pwd${showPwd ? " active" : ""}`}
<div className="sso-row"> aria-label={showPwd ? "隐藏密码" : "显示密码"}
<button type="button" className="sso-btn" onClick={() => showToast("微信扫码", "请在 60s 内用微信扫一扫完成授权 · 内测中,以邮箱登录为准")}> aria-pressed={showPwd}
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 4C5 4 2 6.5 2 9.5c0 1.7 1 3.2 2.5 4.2L4 16l2.2-1.1c.7.2 1.5.3 2.3.3-.3-.5-.5-1.1-.5-1.7 0-2.8 2.9-5 6.5-5h.5C14.6 6 12 4 9 4zm-2 3.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm4 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM15 9c-3.3 0-6 2.2-6 5s2.7 5 6 5c.7 0 1.4-.1 2-.3L19 20l-.4-1.7c1.4-.9 2.4-2.3 2.4-3.8 0-2.8-2.7-5-6-5zm-2 2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm4 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1z" /></svg> title={showPwd ? "隐藏密码" : "显示密码"}
微信扫码 onClick={() => setShowPwd((value) => !value)}
</button> >
<button type="button" className="sso-btn" onClick={() => showToast("飞书 SSO", "即将打开企业飞书登录授权页 · 内测中,以邮箱登录为准")}> {showPwd ? <EyeOff size={18} strokeWidth={1.5} aria-hidden="true" /> : <Eye size={18} strokeWidth={1.5} aria-hidden="true" />}
<svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="3" /></svg>
飞书 SSO
</button> </button>
</div> </div>
<div className="switch-row">还没账号? <a href="/register" onClick={(event) => { event.preventDefault(); switchMode("register"); }}>注册团队 →</a></div> </div>
</form> <div className="row-between">
) : ( <label><input type="checkbox" defaultChecked /> 记住我 7 天</label>
<form id="register-form" autoComplete="off" onSubmit={submit}> <a href="#" onClick={(event) => { event.preventDefault(); showToast("重置密码", "请联系团队超管重置你的登录密码"); }}>忘记密码?</a>
<div className="field"> </div>
<label className="field-label" htmlFor="reg-team">团队名 <span className="req">*</span></label> </form>
<div className="field-input-wrap"> </section>
<svg className="ic-l" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M9 22V12h6v10" /></svg> <div className="auth-submit-zone">
<input type="text" id="reg-team" placeholder="例: 小李的店 / XX 文化传媒" value={teamName} onChange={(event) => setTeamName(event.target.value)} required /> {loginProgress && !error && (
</div> <div className="login-progress" role="status" aria-live="polite">
</div> <span className="login-progress-spinner" aria-hidden="true"></span>
<div className="field"> <span>{LOGIN_PROGRESS_COPY[loginProgress]}</span>
<label className="field-label" htmlFor="reg-email">超管邮箱 <span className="req">*</span><span className="hint">用于成员邀请 + 找回密码</span></label> </div>
<div className="field-input-wrap">
{MAIL_SVG}
<input type="email" id="reg-email" placeholder="name@company.com" value={email} onChange={(event) => setEmail(event.target.value)} required />
</div>
</div>
<div className="field-row">
<div className="field">
<label className="field-label" htmlFor="reg-pwd">密码 <span className="req">*</span></label>
<div className="field-input-wrap">
{LOCK_SVG}
<input type={showRegPwd ? "text" : "password"} id="reg-pwd" placeholder="至少 8 位" value={registerPassword} onChange={(event) => setRegisterPassword(event.target.value)} required />
<button type="button" className="toggle-pwd" onClick={() => setShowRegPwd((value) => !value)}>{EYE_SVG}</button>
</div>
</div>
<div className="field">
<label className="field-label" htmlFor="reg-pwd2">确认密码 <span className="req">*</span></label>
<div className="field-input-wrap">
{LOCK_SVG}
<input type={showRegPwd2 ? "text" : "password"} id="reg-pwd2" placeholder="再输一次" value={registerPassword2} onChange={(event) => setRegisterPassword2(event.target.value)} required />
<button type="button" className="toggle-pwd" onClick={() => setShowRegPwd2((value) => !value)}>{EYE_SVG}</button>
</div>
</div>
</div>
<div className="field">
<label className="field-label" htmlFor="reg-invite">邀请码 <span className="hint">可选 · 团队邀请才需要</span></label>
<div className="field-input-wrap">
<svg className="ic-l" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /></svg>
<input type="text" id="reg-invite" placeholder="例: TEAM-XXXX-XXXX" value={invite} onChange={(event) => setInvite(event.target.value)} />
</div>
</div>
<label className="agree">
<input type="checkbox" id="reg-agree" checked={agreed} onChange={(event) => setAgreed(event.target.checked)} />
<span>我已阅读并同意 <a href="#" onClick={(event) => { event.preventDefault(); showToast("用户协议", "含数据处理 / 内容生成版权 / 计费规则三章 · 完整文本将在正式版接入"); }}>用户协议</a> 与 <a href="#" onClick={(event) => { event.preventDefault(); showToast("隐私政策", "遵循《个人信息保护法》· 团队数据存中国境内 · 默认不用于模型训练"); }}>隐私政策</a>,知悉「失败不扣费 · 确认后扣」的扣费规则。</span>
</label>
{error && <div className="form-error">{error}</div>}
<button className="btn-cta" type="submit" id="reg-submit" disabled={busy}>
{busy ? <span className="busy-copy">// 创建团队中...</span> : <>创建团队 · 开始使用{ARROW_SVG}</>}
</button>
<div className="switch-row">已有账号? <a href="/login" onClick={(event) => { event.preventDefault(); switchMode("login"); }}>登录 →</a></div>
</form>
)} )}
</main> {error && <div className="form-error" role="alert">{error}</div>}
<button className="btn-cta" type="button" form="login-form" disabled={busy} onClick={() => { void submit(); }}>
{busy ? "登录中" : "登录"}
</button>
</div>
</div> </div>
{toast && <div className="login-toast"><div>{toast.title}</div><div style={{ fontSize: "11.5px", color: "rgba(0,0,0,.56)", fontWeight: 400, letterSpacing: ".02em" }}>// {toast.sub}</div></div>} {toast && <div className="login-toast"><div>{toast.title}</div><span>// {toast.sub}</span></div>}
</main> </main>
); );
} }
core/frontend/src/routes/dashboard.tsx
+16 -2
View File
@@ -1,4 +1,3 @@
import { Plus } from "lucide-react";
import type { Asset, BillingSummary, Product, Project } from "../types"; import type { Asset, BillingSummary, Product, Project } from "../types";
import type { Page } from "./route-config"; import type { Page } from "./route-config";
import { money, stageMeta, statusPill } from "./stage-config"; import { money, stageMeta, statusPill } from "./stage-config";
@@ -18,7 +17,22 @@ export function Dashboard({ products, projects, assets, billing, userName, navig
const productTitle = (id: string) => products.find((product) => product.id === id)?.title || "商品"; const productTitle = (id: string) => products.find((product) => product.id === id)?.title || "商品";
return ( return (
<> <>
<div className="page-head"><div><h1>欢迎回来{userName ? `，${userName.split("@")[0]}` : ""}</h1><div className="sub"><span className="mono">// {new Date().toLocaleDateString("zh-CN")}</span><span>·</span><span>你有 <b>{running} 个项目</b> 正在进行中</span></div></div><div className="actions"><button className="btn" type="button" onClick={() => navigate("products")}><Plus size={13} />新建商品</button><button className="btn btn-primary btn-lg" type="button" onClick={() => navigate("projectWizard")}><Plus size={13} />新建项目</button></div></div> <div className="page-head">
<div>
<h1>欢迎回来{userName ? `，${userName.split("@")[0]}` : ""}</h1>
<div className="sub"><span className="mono">// {new Date().toLocaleDateString("zh-CN")}</span><span>·</span><span>你有 <b>{running} 个项目</b> 正在进行中</span></div>
</div>
<div className="actions">
<button className="btn" type="button" onClick={() => navigate("products")}>
<IconKitSvg name="productPlus" size={16} />
新建商品
</button>
<button className="btn btn-primary btn-lg btn-create" type="button" onClick={() => navigate("projectWizard")}>
<IconKitSvg name="clapperboard" size={16} />
新建项目
</button>
</div>
</div>
<div className="stats with-corners"><span className="corner-tr">+</span><span className="corner-bl">+</span><KpiStat label="总项目" badge="ALL" value={projects.length} delta={`↑ 本月 +${Math.max(projects.length, 0)}`} /><KpiStat label="进行中" badge="WIP" value={running} delta="待处理" /><KpiStat label="成片" badge="DONE" value={completed} delta="导出完成" /><button className="stat" type="button" onClick={() => navigate("account")}><div className="lbl">余额 <span className="badge">¥</span></div><div className="v">{money(billing?.account.balance)}</div><div className="bar"><span style={{ width: "38%" }} /></div><div className="sub">已冻结 {money(billing?.account.reserved_balance)}</div></button></div> <div className="stats with-corners"><span className="corner-tr">+</span><span className="corner-bl">+</span><KpiStat label="总项目" badge="ALL" value={projects.length} delta={`↑ 本月 +${Math.max(projects.length, 0)}`} /><KpiStat label="进行中" badge="WIP" value={running} delta="待处理" /><KpiStat label="成片" badge="DONE" value={completed} delta="导出完成" /><button className="stat" type="button" onClick={() => navigate("account")}><div className="lbl">余额 <span className="badge">¥</span></div><div className="v">{money(billing?.account.balance)}</div><div className="bar"><span style={{ width: "38%" }} /></div><div className="sub">已冻结 {money(billing?.account.reserved_balance)}</div></button></div>
<div className="dash-grid"><div><div className="section-h"><h2>最近项目</h2><button className="more" type="button" onClick={() => navigate("projects")}>[ ALL · {projects.length} ] →</button></div><div className="card-hard">{projects.slice(0, 6).map((project) => <button className="recent-row" key={project.id} type="button" onClick={() => navigate("pipeline")}><div className="placeholder thumb"><span className="ph-frame">9:16</span></div><div className="recent-meta"><div className="name">{project.name}</div><div className="sub">{productTitle(project.product)} / AI 全生 / 4 镜</div></div><Progress status={project.current_stage} /><span className={`pill ${statusPill(project.status)}`}><span className="dot" />{stageMeta[project.current_stage]?.label || project.current_stage}</span><span className="btn btn-sm">继续</span></button>)}</div></div><div style={{ display: "flex", flexDirection: "column", gap: 24 }}><div><div className="section-h"><h2>快捷入口</h2><span className="more">[ /shortcuts ]</span></div><div className="shortcuts"><Shortcut name="package" title="商品库" desc={`${products.length} SKU`} onClick={() => navigate("products")} /><Shortcut name="images" title="资产库" desc={`${assets.length} 资产`} onClick={() => navigate("library")} /><Shortcut name="creditCard" title="充值" desc={money(billing?.account.balance)} onClick={() => navigate("account")} /><Shortcut name="clapperboard" title="所有项目" desc={`${projects.length} 个`} onClick={() => navigate("projects")} /></div></div><div><div className="section-h"><h2>提示</h2><span className="more">[ FAQ ]</span></div><div className="tip"><strong>扣费规则</strong>生成失败、超时、用户重跑 — 均不扣费。仅在你点 <span className="mono">[ 确认通过 ]</span> 时按 token 实际结算。</div></div></div></div> <div className="dash-grid"><div><div className="section-h"><h2>最近项目</h2><button className="more" type="button" onClick={() => navigate("projects")}>[ ALL · {projects.length} ] →</button></div><div className="card-hard">{projects.slice(0, 6).map((project) => <button className="recent-row" key={project.id} type="button" onClick={() => navigate("pipeline")}><div className="placeholder thumb"><span className="ph-frame">9:16</span></div><div className="recent-meta"><div className="name">{project.name}</div><div className="sub">{productTitle(project.product)} / AI 全生 / 4 镜</div></div><Progress status={project.current_stage} /><span className={`pill ${statusPill(project.status)}`}><span className="dot" />{stageMeta[project.current_stage]?.label || project.current_stage}</span><span className="btn btn-sm">继续</span></button>)}</div></div><div style={{ display: "flex", flexDirection: "column", gap: 24 }}><div><div className="section-h"><h2>快捷入口</h2><span className="more">[ /shortcuts ]</span></div><div className="shortcuts"><Shortcut name="package" title="商品库" desc={`${products.length} SKU`} onClick={() => navigate("products")} /><Shortcut name="images" title="资产库" desc={`${assets.length} 资产`} onClick={() => navigate("library")} /><Shortcut name="creditCard" title="充值" desc={money(billing?.account.balance)} onClick={() => navigate("account")} /><Shortcut name="clapperboard" title="所有项目" desc={`${projects.length} 个`} onClick={() => navigate("projects")} /></div></div><div><div className="section-h"><h2>提示</h2><span className="more">[ FAQ ]</span></div><div className="tip"><strong>扣费规则</strong>生成失败、超时、用户重跑 — 均不扣费。仅在你点 <span className="mono">[ 确认通过 ]</span> 时按 token 实际结算。</div></div></div></div>
</> </>
core/frontend/src/routes/pipeline.tsx
+22 -22
View File
@@ -1381,7 +1381,7 @@ export function PipelinePage(props: {
<div className="pane-h"> <div className="pane-h">
<div className="shot-headline"> <div className="shot-headline">
<strong>镜头脚本</strong> <strong>镜头脚本</strong>
<span className="muted-2 mono" id="shots-meta" style={{ fontSize: "11px" }}> <span className="muted-2 mono" id="shots-meta" style={{ fontSize: "12px" }}>
{shots.length ? `· ${shots.length} 镜 · ${scriptAdopted ? "已采用" : "待采用"}` : "· 空 · 待生成"} {shots.length ? `· ${shots.length} 镜 · ${scriptAdopted ? "已采用" : "待采用"}` : "· 空 · 待生成"}
</span> </span>
</div> </div>
@@ -1499,7 +1499,7 @@ export function PipelinePage(props: {
<div className="pane-h"> <div className="pane-h">
<div className="ai-avatar">AI</div> <div className="ai-avatar">AI</div>
<strong>脚本助手</strong> <strong>脚本助手</strong>
<span className="muted-2 mono" style={{ fontSize: "11px" }}>· {scriptModelName}</span> <span className="muted-2 mono" style={{ fontSize: "12px" }}>· {scriptModelName}</span>
<span className="spacer"></span> <span className="spacer"></span>
<button className="btn btn-ghost btn-sm" type="button" id="chat-clear-btn" disabled={!chatText && chatAttachments.length === 0 && chatMsgs.length === 0} onClick={clearChat}>清空对话</button> <button className="btn btn-ghost btn-sm" type="button" id="chat-clear-btn" disabled={!chatText && chatAttachments.length === 0 && chatMsgs.length === 0} onClick={clearChat}>清空对话</button>
</div> </div>
@@ -1658,7 +1658,7 @@ export function PipelinePage(props: {
</div> </div>
<div className="body-2"> <div className="body-2">
<div className="hstack"> <div className="hstack">
<strong style={{ fontSize: "13.5px" }}>{assetName(group.adopted_asset) || `${KIND_LABEL[kind]} ${gi + 1}`}</strong> <strong style={{ fontSize: "14px" }}>{assetName(group.adopted_asset) || `${KIND_LABEL[kind]} ${gi + 1}`}</strong>
<span className="spacer"></span> <span className="spacer"></span>
{group.adopted_asset {group.adopted_asset
? <span className="pill ok"><span className="dot"></span>已采用</span> ? <span className="pill ok"><span className="dot"></span>已采用</span>
@@ -1744,7 +1744,7 @@ export function PipelinePage(props: {
</span> </span>
<div className="note-copy"><strong>仅支持整张重跑</strong> · 不能局部改某一镜。如需调单镜,先在 <a href="#stage-1" onClick={(event) => { event.preventDefault(); goStage(1); }}>Stage 1 脚本</a> 改镜头描述,再回此处整张重跑。</div> <div className="note-copy"><strong>仅支持整张重跑</strong> · 不能局部改某一镜。如需调单镜,先在 <a href="#stage-1" onClick={(event) => { event.preventDefault(); goStage(1); }}>Stage 1 脚本</a> 改镜头描述,再回此处整张重跑。</div>
</div> </div>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, marginBottom: "6px", letterSpacing: ".04em" }}>// 整张提示词(重跑时生效,可编辑)</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, marginBottom: "6px", letterSpacing: ".04em" }}>// 整张提示词(重跑时生效,可编辑)</div>
{/* key 跟版本走:切版本重新种子;onInput 实时回写 state → 整张重跑用的就是你编辑后的文本 */} {/* key 跟版本走:切版本重新种子;onInput 实时回写 state → 整张重跑用的就是你编辑后的文本 */}
<div <div
className="prompt-edit" className="prompt-edit"
@@ -1761,7 +1761,7 @@ export function PipelinePage(props: {
{adoptedStoryboard ? "整张重跑" : "生成故事板"} {adoptedStoryboard ? "整张重跑" : "生成故事板"}
</button> </button>
<span className="spacer"></span> <span className="spacer"></span>
<span className="muted-2 mono" style={{ fontSize: "11px", alignSelf: "center" }}>~¥0.45/场</span> <span className="muted-2 mono" style={{ fontSize: "12px", alignSelf: "center" }}>~¥0.45/场</span>
</div> </div>
<div className="sb-history"> <div className="sb-history">
<div className="sb-history-h">// 历史版本(<span id="sb-history-ct">{storyboards.length}</span>)</div> <div className="sb-history-h">// 历史版本(<span id="sb-history-ct">{storyboards.length}</span>)</div>
@@ -1774,15 +1774,15 @@ export function PipelinePage(props: {
<div className="ts">{(ver.created_at || "").slice(11, 16) || "--:--"}</div> <div className="ts">{(ver.created_at || "").slice(11, 16) || "--:--"}</div>
</div> </div>
); );
}) : <span className="muted-2 mono" style={{ fontSize: "11px" }}>// 暂无历史</span>} }) : <span className="muted-2 mono" style={{ fontSize: "12px" }}>// 暂无历史</span>}
</div> </div>
</div> </div>
<div className="divider" style={{ marginTop: "16px" }}></div> <div className="divider" style={{ marginTop: "16px" }}></div>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 绑定的资产</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 绑定的资产</div>
<div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }} id="sb-bound-assets"> <div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }} id="sb-bound-assets">
{groups.filter((g) => g.adopted_asset).length ? groups.filter((g) => g.adopted_asset).map((g) => ( {groups.filter((g) => g.adopted_asset).length ? groups.filter((g) => g.adopted_asset).map((g) => (
<span className="asset-tag" key={g.id}><span className="dotc"></span>{assetName(g.adopted_asset) || KIND_LABEL[g.kind] || g.kind}({KIND_LABEL[g.kind] || g.kind})</span> <span className="asset-tag" key={g.id}><span className="dotc"></span>{assetName(g.adopted_asset) || KIND_LABEL[g.kind] || g.kind}({KIND_LABEL[g.kind] || g.kind})</span>
)) : <span className="muted-2 mono" style={{ fontSize: "11px" }}>// 暂无绑定资产</span>} )) : <span className="muted-2 mono" style={{ fontSize: "12px" }}>// 暂无绑定资产</span>}
</div> </div>
</div> </div>
</div> </div>
@@ -1818,7 +1818,7 @@ export function PipelinePage(props: {
<div className="queue-bar"> <div className="queue-bar">
<div> <div>
<div style={{ fontSize: "14px", fontWeight: 600 }}>视频生成 · {segDone} / {segments.length} 完成</div> <div style={{ fontSize: "14px", fontWeight: 600 }}>视频生成 · {segDone} / {segments.length} 完成</div>
<div className="muted-2 mono" style={{ fontSize: "11px", marginTop: "3px", letterSpacing: ".02em" }}>// 每场 Seedance 生成 · {statusText}</div> <div className="muted-2 mono" style={{ fontSize: "12px", marginTop: "3px", letterSpacing: ".02em" }}>// 每场 Seedance 生成 · {statusText}</div>
</div> </div>
<div className="bar-wrap"><span style={{ width: `${pct}%` }}></span></div> <div className="bar-wrap"><span style={{ width: `${pct}%` }}></span></div>
<span className="muted mono" style={{ fontSize: "12px" }}>{pct}%</span> <span className="muted mono" style={{ fontSize: "12px" }}>{pct}%</span>
@@ -2038,7 +2038,7 @@ export function PipelinePage(props: {
<span className="k">烧入字幕</span> <span className="k">烧入字幕</span>
<button className={`btn btn-sm ${edState.subtitleEnabled ? "btn-primary" : "btn-ghost"}`} type="button" onClick={() => commitEdit({ ...edState, subtitleEnabled: !edState.subtitleEnabled })}>{edState.subtitleEnabled ? "已开启" : "已关闭"}</button> <button className={`btn btn-sm ${edState.subtitleEnabled ? "btn-primary" : "btn-ghost"}`} type="button" onClick={() => commitEdit({ ...edState, subtitleEnabled: !edState.subtitleEnabled })}>{edState.subtitleEnabled ? "已开启" : "已关闭"}</button>
</div> </div>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 字幕样式(导出烧入)</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 字幕样式(导出烧入)</div>
<div className="style-swatch"> <div className="style-swatch">
{STYLE_SWATCHES.map((sw) => ( {STYLE_SWATCHES.map((sw) => (
<div className={`swatch-card${edState.subtitleStyle === sw.key ? " selected" : ""}`} key={sw.key} role="button" tabIndex={0} style={{ cursor: "pointer", opacity: edState.subtitleEnabled ? 1 : 0.5 }} onClick={() => commitEdit({ ...edState, subtitleStyle: sw.key, subtitleEnabled: true })}> <div className={`swatch-card${edState.subtitleStyle === sw.key ? " selected" : ""}`} key={sw.key} role="button" tabIndex={0} style={{ cursor: "pointer", opacity: edState.subtitleEnabled ? 1 : 0.5 }} onClick={() => commitEdit({ ...edState, subtitleStyle: sw.key, subtitleEnabled: true })}>
@@ -2046,17 +2046,17 @@ export function PipelinePage(props: {
</div> </div>
))} ))}
</div> </div>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, margin: "12px 0 6px", letterSpacing: ".04em" }}>// 字幕文本(默认取脚本旁白,可逐段改)</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, margin: "12px 0 6px", letterSpacing: ".04em" }}>// 字幕文本(默认取脚本旁白,可逐段改)</div>
<div style={{ display: "flex", flexDirection: "column", gap: "6px", maxHeight: "186px", overflowY: "auto" }}> <div style={{ display: "flex", flexDirection: "column", gap: "6px", maxHeight: "186px", overflowY: "auto" }}>
{edState.clips.map((c, idx) => ( {edState.clips.map((c, idx) => (
<div key={c.key} style={{ display: "flex", gap: "6px", alignItems: "flex-start" }}> <div key={c.key} style={{ display: "flex", gap: "6px", alignItems: "flex-start" }}>
<span className="mono" style={{ fontSize: "10px", color: "var(--black-alpha-48)", marginTop: "7px", flex: "0 0 auto" }}>{idx + 1}</span> <span className="mono" style={{ fontSize: "12px", color: "var(--black-alpha-48)", marginTop: "7px", flex: "0 0 auto" }}>{idx + 1}</span>
<textarea value={c.subtitle} onChange={(e) => setClipSubtitle(idx, e.target.value)} rows={1} disabled={!edState.subtitleEnabled} placeholder={`第 ${idx + 1} 段字幕`} style={{ flex: 1, minWidth: 0, resize: "vertical", fontSize: "12px", lineHeight: 1.4, padding: "4px 6px", border: "1px solid var(--border-faint)", borderRadius: "6px", background: "var(--surface)", color: "var(--accent-black)", fontFamily: "inherit" }} /> <textarea value={c.subtitle} onChange={(e) => setClipSubtitle(idx, e.target.value)} rows={1} disabled={!edState.subtitleEnabled} placeholder={`第 ${idx + 1} 段字幕`} style={{ flex: 1, minWidth: 0, resize: "vertical", fontSize: "12px", lineHeight: 1.4, padding: "4px 6px", border: "1px solid var(--border-faint)", borderRadius: "6px", background: "var(--surface)", color: "var(--accent-black)", fontFamily: "inherit" }} />
</div> </div>
))} ))}
</div> </div>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, margin: "14px 0 6px", letterSpacing: ".04em" }}>// 旁白配音(TTS · 导出混在 BGM 之上)</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, margin: "14px 0 6px", letterSpacing: ".04em" }}>// 旁白配音(TTS · 导出混在 BGM 之上)</div>
{voInfo ? ( {voInfo ? (
<div className="props-row" style={{ marginBottom: 6 }}> <div className="props-row" style={{ marginBottom: 6 }}>
<span style={{ fontSize: "12px", flex: 1 }}>已生成 {voInfo.items.length} 段 · {VO_VOICES.find((v) => v.key === voInfo.voice_type)?.label || voInfo.voice_type}</span> <span style={{ fontSize: "12px", flex: 1 }}>已生成 {voInfo.items.length} 段 · {VO_VOICES.find((v) => v.key === voInfo.voice_type)?.label || voInfo.voice_type}</span>
@@ -2065,7 +2065,7 @@ export function PipelinePage(props: {
) : ( ) : (
<div className="muted" style={{ fontSize: "12px", marginBottom: 6 }}>未生成配音 · 将按上方字幕文本逐段合成人声</div> <div className="muted" style={{ fontSize: "12px", marginBottom: 6 }}>未生成配音 · 将按上方字幕文本逐段合成人声</div>
)} )}
{voStale && <div style={{ fontSize: "11.5px", color: "#B45309", marginBottom: 6 }}>字幕文本已修改,与现有配音不一致,建议重新生成</div>} {voStale && <div style={{ fontSize: "12px", color: "#B45309", marginBottom: 6 }}>字幕文本已修改,与现有配音不一致,建议重新生成</div>}
<div className="props-row" style={{ marginBottom: 6 }}> <div className="props-row" style={{ marginBottom: 6 }}>
<span className="k">音色</span> <span className="k">音色</span>
<select value={voVoicePick || voInfo?.voice_type || VO_VOICES[0].key} onChange={(e) => setVoVoicePick(e.target.value)} style={{ flex: 1, fontSize: "12px", padding: "4px 6px", border: "1px solid var(--border-faint)", borderRadius: "6px", background: "var(--surface)", color: "var(--accent-black)" }}> <select value={voVoicePick || voInfo?.voice_type || VO_VOICES[0].key} onChange={(e) => setVoVoicePick(e.target.value)} style={{ flex: 1, fontSize: "12px", padding: "4px 6px", border: "1px solid var(--border-faint)", borderRadius: "6px", background: "var(--surface)", color: "var(--accent-black)" }}>
@@ -2081,7 +2081,7 @@ export function PipelinePage(props: {
{propsTab === "transition" && ( {propsTab === "transition" && (
<> <>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 片段间转场(导出 xfade 烧入)</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 片段间转场(导出 xfade 烧入)</div>
<div style={{ display: "flex", flexDirection: "column", gap: "6px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
{TRANSITIONS.map((tr) => ( {TRANSITIONS.map((tr) => (
<button className={`btn btn-sm ${edState.transition === tr.key ? "btn-primary" : "btn-ghost"}`} key={tr.key} type="button" style={{ justifyContent: "flex-start" }} onClick={() => commitEdit({ ...edState, transition: tr.key })}>{tr.nm}</button> <button className={`btn btn-sm ${edState.transition === tr.key ? "btn-primary" : "btn-ghost"}`} key={tr.key} type="button" style={{ justifyContent: "flex-start" }} onClick={() => commitEdit({ ...edState, transition: tr.key })}>{tr.nm}</button>
@@ -2092,7 +2092,7 @@ export function PipelinePage(props: {
{propsTab === "bgm" && ( {propsTab === "bgm" && (
<> <>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 背景音乐(导出混音)</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 背景音乐(导出混音)</div>
<div className="props-row"><span style={{ fontSize: "12px", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{serverBgm ? serverBgmName : "未设置 BGM"}</span></div> <div className="props-row"><span style={{ fontSize: "12px", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{serverBgm ? serverBgmName : "未设置 BGM"}</span></div>
{serverBgmUrl && <audio src={serverBgmUrl} controls style={{ width: "100%", height: 30, marginBottom: 8 }} />} {serverBgmUrl && <audio src={serverBgmUrl} controls style={{ width: "100%", height: 30, marginBottom: 8 }} />}
<div className="props-row"><span className="k">音量 {edState.bgmVolume}</span> <div className="props-row"><span className="k">音量 {edState.bgmVolume}</span>
@@ -2107,12 +2107,12 @@ export function PipelinePage(props: {
)} )}
<div className="divider"></div> <div className="divider"></div>
<div className="muted mono" style={{ fontSize: "11px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 时间轴(<span id="ed-inspect-name">{timeline?.name || "未命名"}</span>)</div> <div className="muted mono" style={{ fontSize: "12px", fontWeight: 500, marginBottom: "8px", letterSpacing: ".04em" }}>// 时间轴(<span id="ed-inspect-name">{timeline?.name || "未命名"}</span>)</div>
<div className="props-row"><span className="k">总时长</span><input className="input-mini" value={fmtMs(edRulerMs)} readOnly /></div> <div className="props-row"><span className="k">总时长</span><input className="input-mini" value={fmtMs(edRulerMs)} readOnly /></div>
<div className="props-row"><span className="k">片段</span><input className="input-mini" value={`${edClips.length} 段`} readOnly /></div> <div className="props-row"><span className="k">片段</span><input className="input-mini" value={`${edClips.length} 段`} readOnly /></div>
<div className="props-row"><span className="k">字幕</span><input className="input-mini" value={subVisible ? `${edClips.length} 条` : "关"} readOnly /></div> <div className="props-row"><span className="k">字幕</span><input className="input-mini" value={subVisible ? `${edClips.length} 条` : "关"} readOnly /></div>
<div className="props-row"><span className="k">转场</span><input className="input-mini" value={(TRANSITIONS.find((t) => t.key === edState.transition) || TRANSITIONS[0]).nm} readOnly /></div> <div className="props-row"><span className="k">转场</span><input className="input-mini" value={(TRANSITIONS.find((t) => t.key === edState.transition) || TRANSITIONS[0]).nm} readOnly /></div>
<div className="props-row"><span className="k">分辨率</span><span className="mono" style={{ fontSize: "11.5px" }}>{resolution}</span></div> <div className="props-row"><span className="k">分辨率</span><span className="mono" style={{ fontSize: "12px" }}>{resolution}</span></div>
</div> </div>
<div className="timeline" id="ed-timeline" style={{ overflowX: edZoom > 100 ? "auto" : "hidden" }}> <div className="timeline" id="ed-timeline" style={{ overflowX: edZoom > 100 ? "auto" : "hidden" }}>
@@ -2174,7 +2174,7 @@ export function PipelinePage(props: {
<span className="num">{idx + 1}</span><span className="lbl">{lbl}</span> <span className="num">{idx + 1}</span><span className="lbl">{lbl}</span>
</div> </div>
); );
}) : <span className="muted-2 mono" style={{ position: "absolute", left: "8px", top: "50%", transform: "translateY(-50%)", fontSize: "11px" }}>// 暂无片段</span>} }) : <span className="muted-2 mono" style={{ position: "absolute", left: "8px", top: "50%", transform: "translateY(-50%)", fontSize: "12px" }}>// 暂无片段</span>}
</div> </div>
</div> </div>
@@ -2260,7 +2260,7 @@ export function PipelinePage(props: {
<div className="asset-modal"> <div className="asset-modal">
<div className="asset-modal-h"> <div className="asset-modal-h">
<h2>视频详情</h2> <h2>视频详情</h2>
<span className="mono" style={{ fontSize: "11px", color: "var(--black-alpha-48)" }}>// 场 {vdSeg.sort_order + 1} · {vdSeg.target_duration_seconds}s</span> <span className="mono" style={{ fontSize: "12px", color: "var(--black-alpha-48)" }}>// 场 {vdSeg.sort_order + 1} · {vdSeg.target_duration_seconds}s</span>
<button className="x" type="button" aria-label="关闭" onClick={() => setVdSegId(null)}> <button className="x" type="button" aria-label="关闭" onClick={() => setVdSegId(null)}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M6 18L18 6" /></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M6 18L18 6" /></svg>
</button> </button>
@@ -2291,13 +2291,13 @@ export function PipelinePage(props: {
</div> </div>
<div className="ts">{(v.created_at || "").slice(11, 16) || "--:--"}</div> <div className="ts">{(v.created_at || "").slice(11, 16) || "--:--"}</div>
</div> </div>
)) : <span className="muted-2 mono" style={{ fontSize: "11px" }}>// 暂无版本</span>} )) : <span className="muted-2 mono" style={{ fontSize: "12px" }}>// 暂无版本</span>}
</div> </div>
</div> </div>
<div className="vd-prompt-field"> <div className="vd-prompt-field">
<div className="vd-prompt-head"> <div className="vd-prompt-head">
<span className="label">// 本场提示词(重跑生效,可编辑)</span> <span className="label">// 本场提示词(重跑生效,可编辑)</span>
<span className="mono" style={{ fontSize: "10.5px", color: "var(--black-alpha-48)" }}>系统会自动织入本镜旁白与参考图</span> <span className="mono" style={{ fontSize: "12px", color: "var(--black-alpha-48)" }}>系统会自动织入本镜旁白与参考图</span>
</div> </div>
<div <div
className="vd-prompt-edit" className="vd-prompt-edit"
core/frontend/src/routes/products.tsx
+3 -3
View File
@@ -352,7 +352,7 @@ export function ProductsPage({ products, projects = [], navigate, openProduct, o
</div> </div>
{showGuide && ( {showGuide && (
<div className="pc-guide-note" style={{ padding: "10px 14px", margin: "0 16px 8px", background: "var(--black-alpha-4)", borderRadius: 8, fontSize: 12.5, lineHeight: 1.7, color: "var(--black-alpha-72)" }}> <div className="pc-guide-note" style={{ padding: "10px 14px", margin: "0 16px 8px", background: "var(--black-alpha-4)", borderRadius: 8, fontSize: 13, lineHeight: 1.7, color: "var(--black-alpha-72)" }}>
<strong>// 建好商品的 3 步</strong><br /> <strong>// 建好商品的 3 步</strong><br />
① 填写商品名称 + 品类(必填,用于脚本/素材生成)<br /> ① 填写商品名称 + 品类(必填,用于脚本/素材生成)<br />
② 上传清晰主图(800×800 以上),便于 AI 出图更准<br /> ② 上传清晰主图(800×800 以上),便于 AI 出图更准<br />
@@ -744,7 +744,7 @@ export function ProductDetailPage({ product, projects, assets, navigate, onUpdat
{triGenerating ? "生成中…" : "生成"} {triGenerating ? "生成中…" : "生成"}
</button> </button>
<span style={{ flex: 1 }}></span> <span style={{ flex: 1 }}></span>
<span className="mono" style={{ fontSize: "11px", color: "var(--black-alpha-56)" }}>~¥0.30 / 次</span> <span className="mono" style={{ fontSize: "12px", color: "var(--black-alpha-56)" }}>~¥0.30 / 次</span>
</div> </div>
<div className="prod-preview-history" id="ov-tri-history"> <div className="prod-preview-history" id="ov-tri-history">
<div className="h-lbl">// 历史版本 · <span className="ct" id="ov-tri-history-count">0</span> 版</div> <div className="h-lbl">// 历史版本 · <span className="ct" id="ov-tri-history-count">0</span> 版</div>
@@ -831,7 +831,7 @@ export function ProductDetailPage({ product, projects, assets, navigate, onUpdat
))} ))}
<div className="img-upload" id="ov-img-add" title="上传图片" role="button" tabIndex={0} onClick={() => imgInputRef.current?.click()} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); imgInputRef.current?.click(); } }}> <div className="img-upload" id="ov-img-add" title="上传图片" role="button" tabIndex={0} onClick={() => imgInputRef.current?.click()} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); imgInputRef.current?.click(); } }}>
{uploading ? ( {uploading ? (
<span className="ph-frame" style={{ fontSize: 10 }}>上传中…</span> <span className="ph-frame" style={{ fontSize: 12 }}>上传中…</span>
) : ( ) : (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg>
)} )}
core/frontend/src/routes/projects.tsx
+1 -1
View File
@@ -608,7 +608,7 @@ export function ProjectsPage({ products, projects, navigate, openPipeline, onDel
<td> <td>
<div className="hstack"> <div className="hstack">
<div className="prog">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={i < no ? "done" : i === no ? "cur" : ""} />)}</div> <div className="prog">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={i < no ? "done" : i === no ? "cur" : ""} />)}</div>
<span className="muted-2 mono" style={{ fontSize: "11px" }}>{no}/5</span> <span className="muted-2 mono" style={{ fontSize: "12px" }}>{no}/5</span>
</div> </div>
</td> </td>
<td><span className={`pill ${projPillClass(project)}`}><span className="dot" />{projStatusLabel(project)}</span></td> <td><span className={`pill ${projPillClass(project)}`}><span className="dot" />{projStatusLabel(project)}</span></td>
core/frontend/src/routes/route-config.ts
+2 -2
View File
@@ -33,7 +33,7 @@ export type Page =
| "settings" | "settings"
| "settingsNotify"; | "settingsNotify";
export type AuthMode = "login" | "register"; export type AuthMode = "login";
export type ResolvedRoute = { export type ResolvedRoute = {
page: Page; page: Page;
authMode: AuthMode; authMode: AuthMode;
@@ -111,7 +111,7 @@ export function resolveRoute(): ResolvedRoute {
const search = new URLSearchParams(window.location.search); const search = new URLSearchParams(window.location.search);
const hash = window.location.hash.replace("#", ""); const hash = window.location.hash.replace("#", "");
if (path === "/register" || hash === "register") return { page: "dashboard", authMode: "register", hash }; if (path === "/register" || hash === "register") return { page: "dashboard", authMode: "login", hash };
if (path === "/login") return { page: "dashboard", authMode: "login", hash }; if (path === "/login") return { page: "dashboard", authMode: "login", hash };
if (path === "/" && isPage(hash)) return { page: hash, authMode: "login", hash }; if (path === "/" && isPage(hash)) return { page: hash, authMode: "login", hash };
if (path === "/" || path === "/dashboard") return { page: "dashboard", authMode: "login", hash }; if (path === "/" || path === "/dashboard") return { page: "dashboard", authMode: "login", hash };
core/frontend/src/routes/team.tsx
+1 -1
View File
@@ -288,7 +288,7 @@ export function TeamPage({ team, user, members, billing, notifications = [], nav
<td><span className="quota-cell"><span className="v">{monthly > 0 ? money(monthly) : "不限"}</span></span></td> <td><span className="quota-cell"><span className="v">{monthly > 0 ? money(monthly) : "不限"}</span></span></td>
<td><div className="quota-cell"><span className="v">{money(memberUsed)}</span> <span className="lbl">/ {monthly > 0 ? `${memberPct.toFixed(0)}%` : "不限"}</span></div><div className="used-bar"><span className={barClass} style={{ width: `${barWidth}%` }}></span></div></td> <td><div className="quota-cell"><span className="v">{money(memberUsed)}</span> <span className="lbl">/ {monthly > 0 ? `${memberPct.toFixed(0)}%` : "不限"}</span></div><div className="used-bar"><span className={barClass} style={{ width: `${barWidth}%` }}></span></div></td>
<td><div className="acts">{isOwner <td><div className="acts">{isOwner
? <span style={{ fontFamily: "var(--font-mono)", fontSize: "10.5px", color: "var(--black-alpha-32)", alignSelf: "center" }}>不可编辑</span> ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", color: "var(--black-alpha-32)", alignSelf: "center" }}>不可编辑</span>
: <> : <>
<button className="icon-btn-sm" type="button" title="编辑" onClick={() => openEdit(member)}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z" /></svg></button> <button className="icon-btn-sm" type="button" title="编辑" onClick={() => openEdit(member)}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z" /></svg></button>
<button className="icon-btn-sm" type="button" title="重置密码" onClick={() => { setResetTarget(member); setResetPwd(""); }}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg></button> <button className="icon-btn-sm" type="button" title="重置密码" onClick={() => { setResetTarget(member); setResetPwd(""); }}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg></button>
core/frontend/src/settings-page.css
+21 -21
View File
@@ -4,13 +4,13 @@
.settings-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; } .settings-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 16px; } .settings-nav { position: sticky; top: 16px; }
.settings-nav .nav-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; padding: 0 12px 8px; } .settings-nav .nav-h { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; padding: 0 12px 8px; }
.settings-nav :where(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--accent-black); border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; text-decoration: none; text-align: left; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); position: relative; } .settings-nav :where(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--accent-black); border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; text-decoration: none; text-align: left; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); position: relative; }
.settings-nav :where(a, button):hover { background: var(--background-lighter); } .settings-nav :where(a, button):hover { background: var(--background-lighter); }
.settings-nav :where(a, button):focus-visible { outline: 2px solid var(--heat); outline-offset: 2px; } .settings-nav :where(a, button):focus-visible { outline: 2px solid var(--heat); outline-offset: 2px; }
.settings-nav a.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; } .settings-nav a.active { background: var(--heat-12); color: var(--heat); border-color: var(--heat-20); font-weight: 600; }
.settings-nav :where(a, button) svg { width: 16px; height: 16px; stroke-width: 1.5; flex: 0 0 auto; } .settings-nav :where(a, button) svg { width: 16px; height: 16px; stroke-width: 1.5; flex: 0 0 auto; }
.settings-nav a .nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); padding: 1px 6px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); letter-spacing: .02em; line-height: 14px; } .settings-nav a .nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); padding: 1px 6px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); letter-spacing: .02em; line-height: 14px; }
.settings-nav a.active .nav-badge { color: var(--heat); background: var(--accent-white); border-color: var(--heat-20); } .settings-nav a.active .nav-badge { color: var(--heat); background: var(--accent-white); border-color: var(--heat-20); }
.settings-nav a .nav-dot { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--heat); display: none; } .settings-nav a .nav-dot { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--heat); display: none; }
.settings-nav a.has-changes .nav-dot { display: block; } .settings-nav a.has-changes .nav-dot { display: block; }
@@ -41,18 +41,18 @@
/* ─── form row ─── */ /* ─── form row ─── */
.form-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-faint); align-items: center; } .form-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-faint); align-items: center; }
.form-row:last-child { border-bottom: 0; } .form-row:last-child { border-bottom: 0; }
.form-row .lbl { font-size: 12.5px; color: var(--black-alpha-56); } .form-row .lbl { font-size: 13px; color: var(--black-alpha-56); }
.form-row .lbl .req { color: var(--accent-crimson); margin-left: 2px; } .form-row .lbl .req { color: var(--accent-crimson); margin-left: 2px; }
.form-row .lbl-sub { font-size: 11px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; } .form-row .lbl-sub { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
.form-row .val { display: flex; align-items: center; gap: 10px; min-width: 0; } .form-row .val { display: flex; align-items: center; gap: 10px; min-width: 0; }
.form-row .val .input, .form-row .val .select { width: 100%; max-width: 380px; } .form-row .val .input, .form-row .val .select { width: 100%; max-width: 380px; }
.form-row .val .static { font-size: 13px; color: var(--accent-black); font-variant-numeric: tabular-nums; } .form-row .val .static { font-size: 13px; color: var(--accent-black); font-variant-numeric: tabular-nums; }
.form-row .val .static.mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--black-alpha-56); } .form-row .val .static.mono { font-family: var(--font-mono); font-size: 13px; color: var(--black-alpha-56); }
.form-row .val .role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; background: var(--heat-12); color: var(--heat); } .form-row .val .role-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--heat-12); color: var(--heat); }
.form-row .val .role-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--heat); } .form-row .val .role-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--heat); }
.form-row .val .row-link { font-size: 12px; color: var(--heat); text-decoration: none; margin-left: auto; } .form-row .val .row-link { font-size: 12px; color: var(--heat); text-decoration: none; margin-left: auto; }
.form-row .val .row-note { font-size: 11px; color: var(--black-alpha-48); font-family: var(--font-mono); } .form-row .val .row-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
.form-row .val .switch-note { font-size: 11.5px; color: var(--black-alpha-48); font-family: var(--font-mono); } .form-row .val .switch-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
.form-row.row-top { align-items: flex-start; } .form-row.row-top { align-items: flex-start; }
.form-row.row-top .lbl { padding-top: 4px; } .form-row.row-top .lbl { padding-top: 4px; }
.form-row.row-top .val { display: block; } .form-row.row-top .val { display: block; }
@@ -77,8 +77,8 @@
.pref-choice { padding: 10px 12px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); } .pref-choice { padding: 10px 12px; border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); }
.pref-choice:hover { background: var(--background-lighter); } .pref-choice:hover { background: var(--background-lighter); }
.pref-choice.selected { border-color: var(--heat); background: var(--heat-12); } .pref-choice.selected { border-color: var(--heat); background: var(--heat-12); }
.pref-choice .t { font-size: 12.5px; font-weight: 600; color: var(--accent-black); } .pref-choice .t { font-size: 13px; font-weight: 600; color: var(--accent-black); }
.pref-choice .d { font-size: 11px; color: var(--black-alpha-48); margin-top: 2px; font-family: var(--font-mono); letter-spacing: .02em; } .pref-choice .d { font-size: 12px; color: var(--black-alpha-48); margin-top: 2px; font-family: var(--font-mono); letter-spacing: .02em; }
.pref-choice.selected .t { color: var(--heat); } .pref-choice.selected .t { color: var(--heat); }
/* ─── 时长档 ─── */ /* ─── 时长档 ─── */
@@ -91,13 +91,13 @@
.device-list { /* 容器 · 仅承载行 */ } .device-list { /* 容器 · 仅承载行 */ }
.device-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-faint); } .device-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-faint); }
.device-row:last-child { border-bottom: 0; } .device-row:last-child { border-bottom: 0; }
.device-row .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--background-lighter); display: grid; place-items: center; color: var(--black-alpha-56); flex: 0 0 36px; } .device-row .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--background-lighter); display: grid; place-items: center; color: var(--ink-3); flex: 0 0 36px; }
.device-row .ic svg { width: 18px; height: 18px; } .device-row .ic svg { width: 18px; height: 18px; }
.device-row .nm { font-size: 13px; font-weight: 500; display: flex; align-items: center; } .device-row .nm { font-size: 13px; font-weight: 500; display: flex; align-items: center; }
.device-row .meta { font-size: 11.5px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; } .device-row .meta { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); margin-top: 2px; letter-spacing: .02em; }
.device-row .tag-cur { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; background: var(--accent-forest); color: var(--accent-white); border-radius: var(--r-sm); margin-left: 8px; letter-spacing: .04em; font-weight: 600; } .device-row .tag-cur { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; background: var(--accent-forest); color: var(--accent-white); border-radius: var(--r-sm); margin-left: 8px; letter-spacing: .04em; font-weight: 600; }
.device-row .spacer { margin-left: auto; } .device-row .spacer { margin-left: auto; }
.device-row .row-note { font-size: 11px; color: var(--black-alpha-48); font-family: var(--font-mono); } .device-row .row-note { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); }
.sub-head { margin-top: 24px; } .sub-head { margin-top: 24px; }
@@ -107,10 +107,10 @@
.av-up-preview { width: 64px; height: 64px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 22px; font-weight: 600; color: var(--accent-black); overflow: hidden; flex: 0 0 64px; } .av-up-preview { width: 64px; height: 64px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 22px; font-weight: 600; color: var(--accent-black); overflow: hidden; flex: 0 0 64px; }
.av-up-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .av-up-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-up-preview-meta { min-width: 0; } .av-up-preview-meta { min-width: 0; }
.av-up-preview-meta .t { font-size: 12.5px; font-weight: 600; color: var(--accent-black); margin-bottom: 3px; letter-spacing: .01em; } .av-up-preview-meta .t { font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 3px; letter-spacing: .01em; }
.av-up-preview-meta .d { font-size: 11px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.55; } .av-up-preview-meta .d { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.55; }
.av-up-rules { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-faint); font-size: 11px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.7; } .av-up-rules { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-faint); font-size: 12px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; line-height: 1.7; }
.av-up-rules .li { display: flex; gap: 8px; } .av-up-rules .li { display: flex; gap: 8px; }
.av-up-rules .li::before { content: '//'; color: var(--black-alpha-32); flex: 0 0 auto; } .av-up-rules .li::before { content: '//'; color: var(--black-alpha-32); flex: 0 0 auto; }
@@ -141,7 +141,7 @@
transition: background var(--t-base), color var(--t-base), border-color var(--t-base); transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
} }
.upload-zone .uz-ic svg { width: 18px; height: 18px; } .upload-zone .uz-ic svg { width: 18px; height: 18px; }
.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; } .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; }
/* ─── 退出登录确认 modal 正文 ─── */ /* ─── 退出登录确认 modal 正文 ─── */
.logout-confirm-copy { margin: 0 0 12px; color: var(--black-alpha-72); } .logout-confirm-copy { margin: 0 0 12px; color: var(--black-alpha-72); }
@@ -156,7 +156,7 @@
.logout-confirm-points .li { .logout-confirm-points .li {
display: flex; display: flex;
gap: 8px; gap: 8px;
font-size: 12.5px; font-size: 13px;
line-height: 1.55; line-height: 1.55;
color: var(--black-alpha-64); color: var(--black-alpha-64);
} }
@@ -173,7 +173,7 @@
border-radius: var(--r-md); border-radius: var(--r-md);
background: var(--heat-12); background: var(--heat-12);
color: var(--heat); color: var(--heat);
font-size: 12.5px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
} }
@@ -181,7 +181,7 @@
.field .pw-err { color: var(--accent-crimson); } .field .pw-err { color: var(--accent-crimson); }
/* ─── 页脚 build 标记 ─── */ /* ─── 页脚 build 标记 ─── */
.settings-foot { text-align: center; padding: 24px 0 8px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; } .settings-foot { text-align: center; padding: 24px 0 8px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.settings-grid { grid-template-columns: 1fr; } .settings-grid { grid-template-columns: 1fr; }
core/frontend/src/styles.css
+257 -333
View File
File diff suppressed because it is too large Load Diff
core/frontend/src/team-page.css
+21 -21
View File
@@ -17,20 +17,20 @@
/* ─── 团队动态卡(贴 banner 右边)─── */ /* ─── 团队动态卡(贴 banner 右边)─── */
.team-feed { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; } .team-feed { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; }
.team-feed .h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .team-feed .h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.team-feed .h h3 { font-size: 13.5px; font-weight: 600; margin: 0; } .team-feed .h h3 { font-size: 14px; font-weight: 600; margin: 0; }
.team-feed .h .ct { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); } .team-feed .h .ct { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }
.team-feed .h .more { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--heat); text-decoration: none; cursor: pointer; } .team-feed .h .more { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--heat); text-decoration: none; cursor: pointer; }
.team-feed .feed-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; max-height: 240px; padding-right: 4px; scrollbar-width: thin; } .team-feed .feed-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; max-height: 240px; padding-right: 4px; scrollbar-width: thin; }
.team-feed .feed-list::-webkit-scrollbar { width: 4px; } .team-feed .feed-list::-webkit-scrollbar { width: 4px; }
.team-feed .feed-list::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 2px; } .team-feed .feed-list::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 2px; }
.team-feed .feed-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; } .team-feed .feed-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.team-feed .feed-item .av { width: 24px; height: 24px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--accent-black); } .team-feed .feed-item .av { width: 24px; height: 24px; border-radius: 50%; background: var(--background-lighter); border: 1px solid var(--border-faint); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--accent-black); }
.team-feed .feed-item .txt { font-size: 12.5px; line-height: 1.45; color: var(--accent-black); min-width: 0; } .team-feed .feed-item .txt { font-size: 13px; line-height: 1.45; color: var(--accent-black); min-width: 0; }
.team-feed .feed-item .txt .who { font-weight: 600; } .team-feed .feed-item .txt .who { font-weight: 600; }
.team-feed .feed-item .txt .act { color: var(--black-alpha-56); margin: 0 3px; } .team-feed .feed-item .txt .act { color: var(--black-alpha-56); margin: 0 3px; }
.team-feed .feed-item .txt .obj { color: var(--heat); } .team-feed .feed-item .txt .obj { color: var(--heat); }
.team-feed .feed-item .txt .obj-money { color: var(--accent-forest); font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .team-feed .feed-item .txt .obj-money { color: var(--accent-forest); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.team-feed .feed-item .ts { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; } .team-feed .feed-item .ts { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-top: 2px; letter-spacing: .02em; }
/* 4 个装订线小十字(2 个 pseudo + 2 个 span)*/ /* 4 个装订线小十字(2 个 pseudo + 2 个 span)*/
.team-banner::before, .team-banner::after, .team-banner::before, .team-banner::after,
.team-banner > .corner-tr, .team-banner > .corner-bl { .team-banner > .corner-tr, .team-banner > .corner-bl {
@@ -46,9 +46,9 @@
/* 第 1 行:标题 + 主操作 */ /* 第 1 行:标题 + 主操作 */
.banner-head { display: flex; align-items: flex-start; gap: 20px; } .banner-head { display: flex; align-items: flex-start; gap: 20px; }
.banner-id { flex: 1; min-width: 0; } .banner-id { flex: 1; min-width: 0; }
.banner-id .lbl { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; } .banner-id .lbl { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; }
.banner-id .nm { font-size: 22px; font-weight: 700; letter-spacing: -.012em; margin-top: 4px; display: flex; align-items: baseline; gap: 10px; } .banner-id .nm { font-size: 22px; font-weight: 600; letter-spacing: -.012em; margin-top: 4px; display: flex; align-items: baseline; gap: 10px; }
.banner-id .nm .tag { font-size: 10.5px; font-family: var(--font-mono); padding: 2px 8px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); letter-spacing: .04em; font-weight: 500; } .banner-id .nm .tag { font-size: 12px; font-family: var(--font-mono); padding: 2px 8px; background: rgba(255,255,255,.12); border-radius: var(--r-pill); letter-spacing: .04em; font-weight: 500; }
.banner-id .meta { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 6px; font-family: var(--font-mono); letter-spacing: .02em; } .banner-id .meta { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 6px; font-family: var(--font-mono); letter-spacing: .02em; }
.banner-actions { display: flex; gap: 8px; flex-shrink: 0; } .banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.banner-actions .btn { background: var(--accent-white); color: var(--accent-black); border-color: var(--accent-white); } .banner-actions .btn { background: var(--accent-white); color: var(--accent-black); border-color: var(--accent-white); }
@@ -62,19 +62,19 @@
/* 第 2 行:4 列统计 */ /* 第 2 行:4 列统计 */
.banner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .banner-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.banner-stats .stat { min-width: 0; } .banner-stats .stat { min-width: 0; }
.banner-stats .stat .lbl { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; } .banner-stats .stat .lbl { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; }
.banner-stats .stat .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.012em; margin-top: 6px; } .banner-stats .stat .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.012em; margin-top: 6px; }
/* color 必须显式写,否则会被 restraint.css 全局 .stat .v 的 color: var(--accent-black) 覆盖成黑字 */ /* color 必须显式写,否则会被 restraint.css 全局 .stat .v 的 color: var(--accent-black) 覆盖成黑字 */
.banner-stats .stat .v { color: var(--accent-white); } .banner-stats .stat .v { color: var(--accent-white); }
.banner-stats .stat .v.warn { color: #FFB870; } .banner-stats .stat .v.warn { color: #FFB870; }
.banner-stats .stat .sub { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 4px; font-family: var(--font-mono); letter-spacing: .02em; } .banner-stats .stat .sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; font-family: var(--font-mono); letter-spacing: .02em; }
/* ─── 主体两栏 ─── */ /* ─── 主体两栏 ─── */
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .team-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; } .pane { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; }
.pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .pane h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pane h3 .ct { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); font-weight: 400; } .pane h3 .ct { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); font-weight: 400; }
.pane h3 .spacer { margin-left: auto; } .pane h3 .spacer { margin-left: auto; }
/* ─── 成员表 ─── */ /* ─── 成员表 ─── */
@@ -83,9 +83,9 @@
.members-table .who { display: flex; align-items: center; gap: 10px; } .members-table .who { display: flex; align-items: center; gap: 10px; }
.members-table .member-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .members-table .member-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.members-table .member-cell .member-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .members-table .member-cell .member-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.members-table .nm { font-weight: 500; font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .members-table .nm { font-weight: 500; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.members-table .em { font-size: 11.5px; color: var(--black-alpha-48); font-family: var(--font-mono); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .members-table .em { font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.members-table .role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; } .members-table .role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; }
.members-table .role-pill .dot { width: 6px; height: 6px; border-radius: 50%; } .members-table .role-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.members-table .role-super { background: var(--heat-12); color: var(--heat); } .members-table .role-super { background: var(--heat-12); color: var(--heat); }
.members-table .role-super .dot { background: var(--heat); } .members-table .role-super .dot { background: var(--heat); }
@@ -101,17 +101,17 @@
.members-table .used-bar > span.ok { background: var(--accent-forest); } .members-table .used-bar > span.ok { background: var(--accent-forest); }
.members-table .used-bar > span.warn { background: #B45309; } .members-table .used-bar > span.warn { background: #B45309; }
.members-table .acts { display: flex; gap: 4px; justify-content: flex-end; } .members-table .acts { display: flex; gap: 4px; justify-content: flex-end; }
.members-table .icon-btn-sm { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; color: var(--black-alpha-56); transition: all var(--t-base); } .members-table .icon-btn-sm { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; color: var(--ink-3); transition: all var(--t-base); }
.members-table .icon-btn-sm:hover { color: var(--heat); border-color: var(--heat-20); } .members-table .icon-btn-sm:hover { color: var(--heat); border-color: var(--heat); }
.members-table .icon-btn-sm svg { width: 14px; height: 14px; } .members-table .icon-btn-sm svg { width: 14px; height: 14px; }
.members-table .icon-btn-sm.danger:hover { color: var(--accent-crimson); border-color: var(--accent-crimson); } .members-table .icon-btn-sm.danger:hover { color: var(--accent-crimson); border-color: var(--accent-crimson); }
.members-table tr.pending td { opacity: .65; } .members-table tr.pending td { opacity: .65; }
.members-table tr.pending .nm::after { content: '· 待激活'; font-size: 11px; color: var(--black-alpha-48); margin-left: 6px; font-weight: 400; font-family: var(--font-mono); } .members-table tr.pending .nm::after { content: '· 待激活'; font-size: 12px; color: var(--black-alpha-48); margin-left: 6px; font-weight: 400; font-family: var(--font-mono); }
/* ─── 角色权限矩阵 ─── */ /* ─── 角色权限矩阵 ─── */
.perm-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border-muted); border-radius: var(--r-md); overflow: hidden; font-size: 12.5px; } .perm-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border-muted); border-radius: var(--r-md); overflow: hidden; font-size: 13px; }
.perm-table th, .perm-table td { padding: 8px 10px; border-bottom: 0; } .perm-table th, .perm-table td { padding: 8px 10px; border-bottom: 0; }
.perm-table th { border-bottom: 1px solid var(--border-muted); background: var(--background-lighter); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; text-align: left; } .perm-table th { border-bottom: 1px solid var(--border-muted); background: var(--background-lighter); font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.perm-table th:not(:first-child), .perm-table td:not(:first-child) { text-align: center; } .perm-table th:not(:first-child), .perm-table td:not(:first-child) { text-align: center; }
.perm-table tbody td:first-child { color: var(--accent-black); } .perm-table tbody td:first-child { color: var(--accent-black); }
.perm-table .yes { color: var(--accent-forest); font-weight: 600; } .perm-table .yes { color: var(--accent-forest); font-weight: 600; }