From b2288a265296a3edde1bd533f13a5897963e1507 Mon Sep 17 00:00:00 2001 From: iye <1713042409@qq.com> Date: Tue, 16 Jun 2026 12:30:45 +0800 Subject: [PATCH] feat(frontend): polish login and design tokens --- core/frontend/src/App.tsx | 10 +- core/frontend/src/account-page.css | 78 +-- core/frontend/src/ai-tools-page.css | 160 +++--- core/frontend/src/design-restraint.css | 128 ++--- core/frontend/src/library-page.css | 6 +- core/frontend/src/messages-page.css | 18 +- core/frontend/src/pipeline-page.css | 114 ++--- core/frontend/src/product-create-page.css | 24 +- core/frontend/src/product-detail-page.css | 84 +-- core/frontend/src/products-page.css | 20 +- core/frontend/src/project-wizard-page.css | 50 +- core/frontend/src/projects-page.css | 12 +- core/frontend/src/routes/ai-tools.tsx | 4 +- core/frontend/src/routes/auth-screen.tsx | 296 +++++------ core/frontend/src/routes/dashboard.tsx | 18 +- core/frontend/src/routes/pipeline.tsx | 44 +- core/frontend/src/routes/products.tsx | 6 +- core/frontend/src/routes/projects.tsx | 2 +- core/frontend/src/routes/route-config.ts | 4 +- core/frontend/src/routes/team.tsx | 2 +- core/frontend/src/settings-page.css | 42 +- core/frontend/src/styles.css | 590 ++++++++++------------ core/frontend/src/team-page.css | 42 +- 23 files changed, 828 insertions(+), 926 deletions(-) diff --git a/core/frontend/src/App.tsx b/core/frontend/src/App.tsx index 1eff149..f110241 100644 --- a/core/frontend/src/App.tsx +++ b/core/frontend/src/App.tsx @@ -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); setUser(payload.user); setTeam(payload.team); + setBooting(false); setAuthed(true); - setBooting(true); - loadData().finally(() => setBooting(false)); navigate("dashboard", { replace: true }); + void loadData().catch((error) => { + console.error("[login] data hydrate failed:", error); + }); } async function logout() { @@ -411,7 +413,7 @@ export function App() { initialMode={authMode} onModeChange={(next) => { setAuthMode(next); - window.history.pushState(null, "", next === "register" ? "/register" : "/login"); + window.history.pushState(null, "", "/login"); }} onAuthed={onAuthed} /> diff --git a/core/frontend/src/account-page.css b/core/frontend/src/account-page.css index d5140ae..0a3a1c2 100644 --- a/core/frontend/src/account-page.css +++ b/core/frontend/src/account-page.css @@ -28,40 +28,40 @@ .balance-banner > .corner-bl { bottom: -7px; left: -7px; } .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 .v { font-size: 38px; font-weight: 700; 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 .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: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } + .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 .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 .v { font-size: 18px; font-weight: 700; 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 .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: 600; letter-spacing: -.01em; margin-top: 4px; font-variant-numeric: tabular-nums; } + .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-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-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 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-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .topup-head h3 { margin-bottom: 5px; } .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-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: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::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 .amt { font-size: 17px; font-weight: 700; 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.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: 600; font-variant-numeric: tabular-nums; line-height: 1.15; } + .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 .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-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; } @@ -79,7 +79,7 @@ .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.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); } .tab-panel { display: none; } @@ -90,9 +90,9 @@ .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 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 .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-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:hover > 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 .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.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 .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; } @@ -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 .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 .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 .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 .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 .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 .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 .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: 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: 12px; font-weight: 600; display: grid; place-items: center; } + .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 th, .billing-table td { padding: 13px 16px; text-align: left; font-size: 12.5px; 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 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: 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 tr:last-child td { border-bottom: 0; } .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 .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; } @@ -141,13 +141,13 @@ .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 .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 占位,不喧宾夺主 */ - .billing-table .sys { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-32); } - .billing-table .ref { color: var(--black-alpha-48); font-size: 10.5px; font-family: var(--font-mono); } + .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: 12px; font-family: var(--font-mono); } .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 .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 .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: 12px; font-weight: 500; } .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 .dot { background: var(--heat); } @@ -155,25 +155,25 @@ .billing-table .role-admin .dot { background: #1E40AF; } .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 .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.wip { background: var(--heat-12); color: var(--heat); } .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 .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 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.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 .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 > span { display: block; height: 100%; background: var(--heat); } .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 .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; } } diff --git a/core/frontend/src/ai-tools-page.css b/core/frontend/src/ai-tools-page.css index a2c88a2..0497068 100644 --- a/core/frontend/src/ai-tools-page.css +++ b/core/frontend/src/ai-tools-page.css @@ -44,7 +44,7 @@ .asset-factory .factory-tag { align-self: flex-start; font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; padding: 2px 8px; @@ -62,7 +62,7 @@ } .asset-factory .factory-desc { margin-top: 8px; - font-size: 13.5px; + font-size: 14px; color: var(--black-alpha-64); line-height: 1.55; } @@ -77,7 +77,7 @@ } .asset-factory .factory-cta .cost { font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; } @@ -86,14 +86,14 @@ .asset-factory .section-h { margin-top: 24px; } .asset-factory .section-h .sub-mono { font-family: var(--font-mono); - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } .asset-factory .result-meta { font-family: var(--font-mono); - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; margin: 2px 0 12px; @@ -119,9 +119,9 @@ .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-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 { - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); @@ -139,7 +139,7 @@ animation: af-hp-pulse 1.4s ease-in-out infinite; } .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; } @keyframes af-hp-pulse { @@ -155,11 +155,11 @@ line-height: 1.6; } .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; } .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) @@ -237,7 +237,7 @@ padding: 4px 14px 10px; } .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; text-transform: uppercase; } @@ -281,7 +281,7 @@ background: var(--background-lighter); border: 1px solid var(--border-faint); 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; 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 .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; 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 .sub { 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .image-workbench .iw-ps-empty { padding: 24px 14px; 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; line-height: 1.7; } @@ -349,7 +349,7 @@ min-width: 0; max-width: 50%; } .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; flex-shrink: 0; } @@ -381,12 +381,12 @@ background: var(--surface); border: 1px solid var(--border-faint); 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; 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 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-search-wrap { display: inline-flex; align-items: center; } .image-workbench .iw-main-body { @@ -419,7 +419,7 @@ width: 22px; height: 22px; border-radius: 50%; 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; flex-shrink: 0; } @@ -443,7 +443,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-72); - font-size: 12.5px; + font-size: 13px; cursor: pointer; font-family: inherit; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); @@ -489,10 +489,10 @@ object-fit: cover; display: block; 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 .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; } .image-workbench .model-card .m-check { @@ -504,9 +504,9 @@ display: grid; place-items: center; 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 svg { opacity: 1; } +.image-workbench .model-card.selected .m-check svg { visibility: visible; } /* ── 平台选择 · 3 列卡多选(基线 .platform-card)── */ .image-workbench .platform-grid { @@ -533,9 +533,9 @@ border-radius: var(--r-md); display: grid; place-items: center; 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 .p-check { position: absolute; top: 4px; right: 4px; @@ -572,7 +572,7 @@ } .image-workbench .iw-cta-hint { 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; text-align: center; line-height: 1.5; } @@ -602,7 +602,7 @@ } .image-workbench .iw-pv-h .pv-meta { 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; 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 .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; margin-right: 8px; min-width: 36px; } @@ -634,7 +634,7 @@ .image-workbench .gen-meta { display: flex; align-items: center; gap: 8px; 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; } .image-workbench .gen-meta .m-sep { color: var(--black-alpha-24); } @@ -702,13 +702,13 @@ gap: 6px; } .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; margin-bottom: 4px; } .image-workbench .iw-pv-empty .title { font-size: 14px; font-weight: 600; color: var(--accent-black); } .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; } .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-side-sec { 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; text-transform: uppercase; } @@ -795,16 +795,16 @@ .image-workbench .ic-conv-item .thumb svg { width: 13px; height: 13px; } .image-workbench .ic-conv-item .nm { flex: 1; min-width: 0; - font-size: 12.5px; + font-size: 13px; 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-empty { 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 { - 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; } @@ -841,7 +841,7 @@ color: var(--heat); } .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); text-transform: uppercase; } @@ -890,7 +890,7 @@ .image-workbench .ic-msg-prompt .pt-tags { margin-top: 8px; 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; } .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 .right-meta { 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; } .image-workbench .ic-input-bottom .right-meta .val { color: var(--accent-black); } @@ -955,11 +955,11 @@ border: 0; border-radius: var(--r-md); cursor: pointer; 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; } .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; } /* 输入栏参数胶囊(比例 / 风格 / 张数 · 基线 .param + 下拉气泡) */ @@ -970,18 +970,18 @@ background: var(--background-lighter); border: 1px solid transparent; 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; 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.open .ic-param-btn { background: var(--heat-12); color: var(--heat); border-color: transparent; } .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; } .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-menu { position: absolute; bottom: calc(100% + 6px); left: -2px; @@ -1001,13 +1001,13 @@ padding: 7px 10px; border: 0; border-radius: var(--r-sm); 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; } .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 .mi-check { margin-left: auto; opacity: 0; color: var(--heat); } -.image-workbench .ic-param-menu .mi.selected .mi-check { opacity: 1; } +.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 { visibility: visible; } /* ============================================================ 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 .ti-row { display: flex; align-items: center; margin-bottom: 10px; } .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; } .model-demo .dm-side-h .add { @@ -1079,11 +1079,11 @@ 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 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 { flex: 1; min-width: 0; height: 100%; 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); } @@ -1112,18 +1112,18 @@ overflow: hidden; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--black-alpha-4) 4px 5px); 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 .body { flex: 1; min-width: 0; } .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; } .model-demo .dm-prod.active .nm { color: var(--heat); font-weight: 600; } .model-demo .dm-prod .sub { 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; 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 .ct { 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; } .model-demo .dm-all svg { width: 12px; height: 12px; } @@ -1158,7 +1158,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-pill); 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; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); } @@ -1188,11 +1188,11 @@ border-radius: var(--r-sm); display: grid; place-items: center; 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 .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 .ops { display: flex; gap: 4px; } .model-demo .dm-batch-h .ops button { @@ -1219,7 +1219,7 @@ .model-demo .dm-cell .ph { position: absolute; inset: 0; 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); } .model-demo .dm-cell .tag { @@ -1228,7 +1228,7 @@ background: var(--accent-black); color: var(--accent-white); 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 .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; } .model-demo.dm-a .dm-main-h h2 { @@ -1253,7 +1253,7 @@ .model-demo.dm-a .dm-main-h .stats { margin-left: auto; 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; } .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: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 .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-model { @@ -1292,14 +1292,14 @@ .model-demo.dm-a .dm-model .ph { position: absolute; inset: 0; 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); } .model-demo.dm-a .dm-model .nm { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 6px; 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 { content: ''; position: absolute; top: 4px; right: 4px; @@ -1333,7 +1333,7 @@ background: var(--background-lighter); border: 1px solid var(--black-alpha-12); border-radius: var(--r-sm); - font-family: inherit; font-size: 12.5px; + font-family: inherit; font-size: 13px; color: var(--accent-black); outline: none; resize: vertical; } @@ -1349,7 +1349,7 @@ .model-demo.dm-a .dm-cost { display: flex; align-items: center; justify-content: space-between; 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; } .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 .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 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; @@ -1389,7 +1389,7 @@ background: var(--surface); } .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; } .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 .row { display: flex; align-items: center; gap: 16px; margin-top: 6px; } .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; display: flex; gap: 4px; } @@ -1431,7 +1431,7 @@ 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 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 { flex: 1; min-height: 0; @@ -1442,7 +1442,7 @@ .model-demo.dm-b .dm-day-h { display: flex; align-items: baseline; gap: 8px; 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; } .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 .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; } /* 状态 pill 紧贴标题右侧(局部尺寸变体 · 不改全局 .pill) */ .model-demo.dm-b .stat-pill { margin-left: 8px; padding: 2px 7px; - font-size: 10px; + font-size: 12px; } .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.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 { - font-family: var(--font-mono); font-size: 10px; + font-family: var(--font-mono); font-size: 12px; 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 .muted { color: var(--black-alpha-48); } .model-demo.dm-b .dm-param .spacer { flex: 1; } .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; margin-right: 6px; text-align: right; } @@ -1517,7 +1517,7 @@ height: 38px; padding: 0 20px; background: var(--heat); color: var(--accent-white); 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; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-cta); @@ -1537,7 +1537,7 @@ .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 .history-body { min-width: 0; } -.asset-factory .history-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; } -.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-name { font-weight: 600; color: var(--accent-black); font-size: 14px; } +.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 .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); } diff --git a/core/frontend/src/design-restraint.css b/core/frontend/src/design-restraint.css index 0409e6d..7f2d241 100644 --- a/core/frontend/src/design-restraint.css +++ b/core/frontend/src/design-restraint.css @@ -305,11 +305,11 @@ aside.sidebar { } .search-box:hover { border-color: var(--black-alpha-24); } .search-box:focus-within { border-color: var(--heat-40); box-shadow: inset 0 0 0 1px var(--heat-40); } -.search-box svg { width: var(--icon-m); height: var(--icon-m); flex-shrink: 0; color: var(--black-alpha-56); } +.search-box svg { width: var(--icon-m); height: var(--icon-m); flex-shrink: 0; color: var(--ink-3); } .search-box input { flex: 1; min-width: 0; border: 0; background: transparent; - font-size: 13.5px; color: var(--accent-black); + font-size: 14px; color: var(--accent-black); padding: 0; } .search-box input::placeholder { color: var(--black-alpha-48); } @@ -319,13 +319,13 @@ aside.sidebar { white-space: nowrap; font-family: var(--font-inter); font-weight: 700; - font-size: 11px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } .nav-section { - font-size: 11px; color: var(--black-alpha-48); + font-size: 12px; color: var(--black-alpha-48); padding: 16px 12px 8px; letter-spacing: .04em; font-weight: 500; @@ -336,7 +336,7 @@ nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; color: var(--black-alpha-56); - font-size: 13.5px; font-weight: 500; + font-size: 14px; font-weight: 500; border-radius: var(--r-md); cursor: pointer; user-select: none; @@ -344,12 +344,12 @@ nav a { } nav a:hover { background: var(--black-alpha-4); color: var(--accent-black); } nav a.active { background: var(--heat-12); color: var(--heat); } -nav a svg { width: var(--icon-m); height: var(--icon-m); opacity: .85; } -nav a.active svg { opacity: 1; } +nav a svg { width: var(--icon-m); height: var(--icon-m); color: var(--ink-3); } +nav a.active svg { color: var(--orange); } nav a .pill-mini { margin-left: auto; font-family: var(--font-mono); - font-size: 9.5px; font-weight: 600; + font-size: 12px; font-weight: 600; padding: 2px 7px; background: var(--surface); color: var(--black-alpha-48); @@ -374,7 +374,7 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); } background: var(--accent-black); color: var(--accent-white); display: flex; align-items: center; justify-content: center; - font-weight: 600; font-size: 11px; + font-weight: 600; font-size: 12px; } .user .em { font-size: 13px; color: var(--accent-black); } @@ -433,7 +433,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } } .scatter { position: absolute; - font-family: var(--font-mono); font-size: 8.5px; line-height: 1.05; + font-family: var(--font-mono); font-size: 12px; line-height: 1.05; color: var(--black-alpha-20); white-space: pre; pointer-events: none; opacity: .85; letter-spacing: .04em; } @@ -441,7 +441,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } position: absolute; color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 10.5px; letter-spacing: .06em; + font-size: 12px; letter-spacing: .06em; pointer-events: none; opacity: .85; z-index: 1; } .sq-mark { position: absolute; width: 5px; height: 5px; background: var(--black-alpha-24); pointer-events: none; } @@ -454,7 +454,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } background: var(--background-base); position: sticky; top: 0; z-index: 50; } -.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--black-alpha-48); } +.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--black-alpha-48); } .crumbs .sep { color: var(--black-alpha-32); } .crumbs .here { color: var(--accent-black); font-weight: 500; } .crumbs a:hover { color: var(--accent-black); } @@ -485,7 +485,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } position: relative; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); } -.icon-btn:hover { background: var(--black-alpha-4); color: var(--accent-black); border-color: var(--black-alpha-24); } +.icon-btn:hover { background: var(--background-lighter); color: var(--accent-black); border-color: var(--border-loud); } .icon-btn svg { width: var(--icon-m); height: var(--icon-m); } .icon-btn .dot-noti { position: absolute; top: 8px; right: 9px; @@ -499,7 +499,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } background: var(--accent-crimson); color: var(--accent-white); border: 1.5px solid var(--surface); border-radius: var(--r-pill); - font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; + font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1; pointer-events: none; } @@ -519,14 +519,14 @@ main { position: relative; background: var(--background-base); min-width: 0; } } .queue-chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); } .queue-chip[hidden] { display: none; } -.queue-chip svg { width: var(--icon-m); height: var(--icon-m); color: var(--black-alpha-56); } +.queue-chip svg { width: var(--icon-m); height: var(--icon-m); color: var(--ink-3); } .queue-chip .count { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-width: 20px; padding: 0 6px; background: var(--heat-12); color: var(--heat); border: 1px solid var(--heat-20); border-radius: var(--r-pill); - font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; + font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; } @@ -574,7 +574,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } -.page-head .sub .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--black-alpha-48); letter-spacing: .04em; } +.page-head .sub .mono { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; } .page-head .actions { display: flex; gap: 10px; align-items: center; } /* page-head 右上角主操作按钮 · 统一尺寸(对齐 .btn-lg),覆盖各页里 btn / btn-sm / btn-lg 混用 */ .page-head .actions > .btn, @@ -582,7 +582,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } .page-head .actions > button.btn { height: 40px; padding: 0 20px; - font-size: 13.5px; + font-size: 14px; } .page-head .actions > .btn svg { width: var(--icon-s); height: var(--icon-s); } .page-head .actions > .btn.btn-create svg { width: var(--icon-m); height: var(--icon-m); } @@ -590,7 +590,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } .section-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .section-h h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--accent-black); } .section-h .more { - font-family: var(--font-mono); font-size: 11.5px; + font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; cursor: pointer; transition: color var(--t-base); @@ -663,14 +663,14 @@ main { position: relative; background: var(--background-base); min-width: 0; } .btn-ghost:active { background: var(--black-alpha-7); } .btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: var(--r-md); } -.btn-lg { height: 40px; padding: 0 20px; font-size: 13.5px; } +.btn-lg { height: 40px; padding: 0 20px; font-size: 14px; } /* ─── Pills ─── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); - font-size: 11.5px; font-weight: 500; + font-size: 12px; font-weight: 500; border: 1px solid var(--border-faint); background: var(--surface); color: var(--black-alpha-56); @@ -725,12 +725,12 @@ main { position: relative; background: var(--background-base); min-width: 0; } .stat:hover { background: var(--black-alpha-4); } .stat:last-child { border-right: 0; } .stat .lbl { - font-size: 12.5px; color: var(--black-alpha-48); + font-size: 13px; color: var(--black-alpha-48); font-weight: 500; display: flex; align-items: center; gap: 8px; } .stat .lbl .badge { font-family: var(--font-mono); - font-size: 10px; color: var(--black-alpha-48); + font-size: 12px; color: var(--black-alpha-48); background: var(--black-alpha-4); padding: 1px 7px; border-radius: var(--r-sm); @@ -745,14 +745,14 @@ main { position: relative; background: var(--background-base); min-width: 0; } } .stat .v small { font-size: 15px; color: var(--black-alpha-48); font-weight: 500; margin-left: 2px; } .stat .delta { - font-family: var(--font-mono); font-size: 11px; + font-family: var(--font-mono); font-size: 12px; margin-top: 10px; color: var(--black-alpha-48); letter-spacing: .02em; } .stat .delta.up { color: var(--accent-forest); } .stat .bar { height: 5px; background: var(--black-alpha-7); border-radius: 3px; margin-top: 14px; overflow: hidden; } .stat .bar > span { display: block; height: 100%; background: var(--heat); border-radius: 3px; } .stat .sub { - font-family: var(--font-mono); font-size: 10.5px; + font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; } @@ -767,7 +767,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } background: var(--surface); border: 1px solid var(--black-alpha-12); border-radius: var(--r-md); - font-size: 13.5px; + font-size: 14px; width: 100%; font-family: inherit; color: var(--accent-black); @@ -808,7 +808,7 @@ main { position: relative; background: var(--background-base); min-width: 0; } .tab:hover { color: var(--accent-black); background: var(--black-alpha-4); } .tab.active { color: var(--accent-black); border-bottom-color: var(--heat); } .tab .count { - font-family: var(--font-mono); font-size: 10.5px; + font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); margin-left: 6px; padding: 1px 7px; background: var(--black-alpha-4); @@ -874,8 +874,8 @@ main { position: relative; background: var(--background-base); min-width: 0; } } .chip-menu .mi:hover { background: var(--black-alpha-4); } .chip-menu .mi.selected { color: var(--heat); background: var(--heat-12); } -.chip-menu .mi .mi-check { width: 13px; height: 13px; color: var(--heat); opacity: 0; flex-shrink: 0; } -.chip-menu .mi.selected .mi-check { opacity: 1; } +.chip-menu .mi .mi-check { width: 13px; height: 13px; color: var(--heat); visibility: hidden; flex-shrink: 0; } +.chip-menu .mi.selected .mi-check { visibility: visible; } .chip-menu .mi-sep { height: 1px; background: var(--border-faint); margin: 4px 6px; } /* ─── Dropdown unification · 下拉框 / 菜单视觉收口 ─── */ @@ -895,7 +895,7 @@ select.duration-select, border-radius: var(--r-md) !important; color: var(--accent-black) !important; font-family: inherit !important; - font-size: 13.5px !important; + font-size: 14px !important; transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base) !important; } select.select:hover, @@ -1013,7 +1013,7 @@ select.duration-select:focus, :where(.tb-menu-empty) { color: var(--black-alpha-48) !important; font-family: var(--font-mono) !important; - font-size: 11.5px !important; + font-size: 12px !important; letter-spacing: .02em !important; } @@ -1046,7 +1046,7 @@ select.duration-select:focus, border-radius: var(--r-md); color: var(--accent-black); font-family: inherit; - font-size: 13.5px; + font-size: 14px; cursor: pointer; transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base); } @@ -1138,10 +1138,10 @@ select.duration-select:focus, width: 13px; height: 13px; color: var(--heat); - opacity: 0; + visibility: hidden; flex-shrink: 0; } -.rs-select-option.selected .mi-check { opacity: 1; } +.rs-select-option.selected .mi-check { visibility: visible; } /* ─── Clear-filters btn · 共享组件 ─── */ .clear-filters { @@ -1158,7 +1158,7 @@ select.duration-select:focus, /* ─── Result count · 共享组件 ─── */ .result-meta { font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--black-alpha-48); margin-bottom: 14px; letter-spacing: .04em; @@ -1205,7 +1205,7 @@ select.duration-select:focus, } .np-header .np-mode-pill { font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--heat); background: var(--heat-12); border: 1px solid var(--heat-20); @@ -1273,7 +1273,7 @@ select.duration-select:focus, } .np-footer .np-meta { font-family: var(--font-mono); - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; margin-right: auto; @@ -1307,7 +1307,7 @@ select.duration-select:focus, transition: background var(--t-base), color var(--t-base), border-color var(--t-base); } .np-body .upload-zone .uz-ic svg { width: 18px; height: 18px; } -.np-body .upload-zone .uz-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .02em; } +.np-body .upload-zone .uz-hint { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } /* 上传子区域标题 (图片案例 / 我的上传) */ .np-section-h { display: flex; align-items: center; gap: 6px; @@ -1327,14 +1327,14 @@ select.duration-select:focus, .np-section-h .counter { margin-left: auto; font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; font-weight: 400; } .np-section-h .counter .num { color: var(--heat); font-weight: 600; } .np-section-sub { - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-56); margin-bottom: 8px; line-height: 1.5; @@ -1354,7 +1354,7 @@ select.duration-select:focus, position: relative; display: grid; place-items: center; - font-size: 9.5px; + font-size: 12px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .04em; @@ -1388,7 +1388,7 @@ select.duration-select:focus, cursor: pointer; display: grid; place-items: center; - font-size: 9.5px; + font-size: 12px; color: var(--black-alpha-32); font-family: var(--font-mono); letter-spacing: .04em; @@ -1488,7 +1488,7 @@ select.duration-select:focus, display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-faint); - font-size: 12.5px; color: var(--black-alpha-56); + font-size: 13px; color: var(--black-alpha-56); } .list-pager .total { font-family: var(--font-mono); letter-spacing: .02em; } .list-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; } @@ -1496,7 +1496,7 @@ select.duration-select:focus, min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--border-faint); background: var(--surface); border-radius: var(--r-sm); - cursor: pointer; font-size: 12.5px; color: var(--black-alpha-72); font-family: inherit; + cursor: pointer; font-size: 13px; color: var(--black-alpha-72); font-family: inherit; transition: border-color var(--t-base), background var(--t-base), color var(--t-base); } .list-pager .pages button:hover:not(.active):not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); } @@ -1513,7 +1513,7 @@ select.duration-select:focus, padding: 36px 44px; cursor: default; } -.np-lightbox .lb-audio svg { width: 34px; height: 34px; color: rgba(255, 255, 255, .8); } +.np-lightbox .lb-audio svg { width: 34px; height: 34px; color: var(--accent-white); } .np-lightbox .lb-audio audio { width: min(420px, 76vw); } /* Bullet list · 弹窗内 (复用样式) */ @@ -1537,7 +1537,7 @@ select.duration-select:focus, background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-sm); - font-size: 11px; color: var(--black-alpha-56); + font-size: 12px; color: var(--black-alpha-56); display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-mono); @@ -1588,7 +1588,7 @@ select.duration-select:focus, color: var(--black-alpha-48); } .empty-state h3 { font-size: 14px; font-weight: 600; color: var(--accent-black); margin-bottom: 6px; } -.empty-state p { font-size: 12.5px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; } +.empty-state p { font-size: 13px; color: var(--black-alpha-48); font-family: var(--font-mono); letter-spacing: .02em; } /* ─── Progress (5 段流水线 · V2.1 语义色 + 脉动) ─── */ .prog { display: flex; gap: 3px; } @@ -1618,7 +1618,7 @@ table.t { } table.t thead th { text-align: left; - font-size: 11.5px; + font-size: 12px; font-weight: 500; color: var(--black-alpha-48); padding: 14px 16px; @@ -1648,7 +1648,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } display: grid; place-items: center; color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; letter-spacing: .04em; user-select: none; overflow: hidden; @@ -1661,7 +1661,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } border: 1px solid var(--border-faint); border-radius: var(--r-sm); padding: 3px 8px; - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-56); font-weight: 500; } @@ -1711,7 +1711,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } .toast .ic-t svg { width: 13px; height: 13px; } .toast .txt { font-size: 13px; color: var(--accent-black); font-weight: 500; } .toast .txt .mono { - font-family: var(--font-mono); font-size: 11px; + font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); display: block; margin-top: 2px; letter-spacing: .04em; font-weight: 400; } @@ -1780,7 +1780,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } background: var(--background-lighter); color: var(--black-alpha-48); font-family: var(--font-inter); - font-size: 11px; + font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; @@ -1793,7 +1793,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } .shell-command-section { padding: 8px 10px 6px; font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; } @@ -1863,7 +1863,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } background: var(--surface); color: var(--black-alpha-48); font-family: var(--font-inter); - font-size: 10px; + font-size: 12px; font-weight: 700; letter-spacing: .02em; } @@ -1883,7 +1883,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } border-top: 1px solid var(--border-faint); color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; letter-spacing: .04em; } .shell-command-foot .spacer { flex: 1; } @@ -1929,7 +1929,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } display: block; margin-top: 2px; font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } @@ -2030,12 +2030,12 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } .modal-h .ic-m svg { width: 17px; height: 17px; } .modal-h .ti { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--accent-black); } .modal-h .ti span { - display: block; font-family: var(--font-mono); font-size: 11px; + display: block; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); font-weight: 400; margin-top: 4px; letter-spacing: .04em; } .modal-b { padding: 20px 24px; - font-size: 13.5px; + font-size: 14px; color: var(--black-alpha-72); line-height: 1.75; overflow-y: auto; @@ -2046,7 +2046,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } .modal-b .mono-acc { font-family: var(--font-mono); color: var(--heat); background: var(--heat-12); padding: 2px 6px; - font-size: 11.5px; border-radius: var(--r-sm); + font-size: 12px; border-radius: var(--r-sm); } .modal-f { padding: 16px 24px; @@ -2214,7 +2214,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } background: var(--heat); color: var(--accent-white); font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; font-weight: 500; letter-spacing: .03em; border-radius: var(--r-sm); @@ -2233,7 +2233,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; - font-size: 9px; font-weight: 700; + font-size: 12px; font-weight: 600; line-height: 1; font-family: var(--font-mono); } @@ -2247,7 +2247,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; - font-size: 9px; font-weight: 700; + font-size: 12px; font-weight: 600; line-height: 1; } @@ -2286,7 +2286,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } .tri-missing-pop .pop-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; letter-spacing: .04em; color: var(--heat); margin-bottom: 6px; @@ -2303,7 +2303,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); } padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; line-height: 1.55; letter-spacing: .02em; color: rgba(255,255,255,.78); diff --git a/core/frontend/src/library-page.css b/core/frontend/src/library-page.css index 7f2065e..4785649 100644 --- a/core/frontend/src/library-page.css +++ b/core/frontend/src/library-page.css @@ -10,13 +10,13 @@ /* 音频资产无封面:默认音符占位(居中、mono 标签),点击灯箱播放 */ .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 .mono { font-size: 10px; letter-spacing: .08em; } + .lib-audio-ph .mono { font-size: 12px; letter-spacing: .08em; } /* 有 preview_url 显真图:铺满缩略容器、cover 裁切、继承 8px 圆角(由 .placeholder overflow:hidden 裁切) */ .asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .asset-body { padding: 12px 14px; } .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-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-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: 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; } /* 视频资产缩略图上的播放角标(点击整卡弹窗播放) */ .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; } diff --git a/core/frontend/src/messages-page.css b/core/frontend/src/messages-page.css index 45a0fa8..c9d31a6 100644 --- a/core/frontend/src/messages-page.css +++ b/core/frontend/src/messages-page.css @@ -54,7 +54,7 @@ .msg-panel-h .mono { margin-left: auto; font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; } @@ -92,7 +92,7 @@ } .msg-filter .ct { font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; letter-spacing: .02em; } .msg-search { @@ -134,7 +134,7 @@ .msg-load-more { padding: 14px 16px 18px; text-align: center; - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; } @@ -207,7 +207,7 @@ flex-shrink: 0; color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; letter-spacing: .02em; } .msg-brief { @@ -236,7 +236,7 @@ background: var(--background-lighter); color: var(--black-alpha-56); font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; letter-spacing: .02em; } .msg-priority.ok { background: var(--forest-bg); border-color: var(--forest-bd); color: var(--accent-forest); } @@ -253,7 +253,7 @@ font-size: 13px; 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 { flex: 1; min-height: 520px; @@ -305,7 +305,7 @@ margin-top: 8px; color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; letter-spacing: .04em; } .msg-body-text { @@ -327,7 +327,7 @@ .msg-props .k { color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; letter-spacing: .04em; } .msg-props .v { @@ -351,7 +351,7 @@ gap: 8px; color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; letter-spacing: .04em; } .msg-foot-note a { color: var(--heat); cursor: pointer; } diff --git a/core/frontend/src/pipeline-page.css b/core/frontend/src/pipeline-page.css index 31bfdbb..bcf5ce1 100644 --- a/core/frontend/src/pipeline-page.css +++ b/core/frontend/src/pipeline-page.css @@ -19,9 +19,9 @@ .pipeline-back svg { width: 14px; height: 14px; } .pipeline-topbar-title { 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; } } .stage-pill { @@ -78,10 +78,10 @@ /* 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 .info { font-size: 12.5px; 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 { font-size: 13px; color: var(--black-alpha-56); } + .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 .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 svg { width: 14px; height: 14px; flex: 0 0 14px; } @@ -124,9 +124,9 @@ .msg.ai .bubble { background: var(--surface); } .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 .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; } - .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); } .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); } @@ -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::placeholder { color: var(--black-alpha-40); } .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-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-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); } @@ -151,12 +151,12 @@ .shot-list > .pane-h { flex-wrap: wrap; row-gap: 8px; } .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-pill { gap: 4px; padding: 3px 8px; font-size: 11px; } - .script-brief-pill .k { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-48); letter-spacing: .04em; } + .script-brief-pill { gap: 4px; padding: 3px 8px; font-size: 12px; } + .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-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 .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: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 .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-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; } /* 画面描述行(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; } /* 镜头卡编辑态(对齐设计稿:旁白/画面逐字段 contenteditable + 卡间插入分镜) */ .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.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-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-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-k { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); padding-top: 2px; letter-spacing: .04em; } + .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"]: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-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 .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: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); } @@ -209,31 +209,31 @@ .vd-main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .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-kv { display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; font-size: 12.5px; } - .vd-kv .k { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); letter-spacing: .03em; padding-top: 1px; } + .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: 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-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-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.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 .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-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-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-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: 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: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; } /* 对话空态三胶囊 */ .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-hint { font-size: 11.5px; color: var(--black-alpha-56); font-family: var(--font-mono); letter-spacing: .02em; } + .chat-empty .ce-title { font-size: 14px; color: var(--accent-black); font-weight: 500; } + .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-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.primary { background: var(--heat-12); border-color: var(--heat); color: var(--heat); } .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: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 .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 .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; } @@ -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-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-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-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; } .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-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-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-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-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: 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[hidden] { display: none; } .asset-card-2.prod-lib-card .prod-action .btn-aigen { @@ -298,7 +298,7 @@ .asset-sec .sec-h .btn-aigen { display: inline-flex; align-items: center; gap: 6px; 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); 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"]: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); } - .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 · 故事板 ============= */ .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.selected { border-color: var(--heat); background: var(--heat-12); } .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 .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); } + .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: 12px; color: var(--black-alpha-48); } .sb-main-img { aspect-ratio: 16/9; min-height: 0; } /* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 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 .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 .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 a { color: #B45309; text-decoration: underline; text-underline-offset: 2px; } .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-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-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.current { border-color: var(--heat); background: var(--heat-12); } .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; } - .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:hover { box-shadow: var(--shadow-cta-hover); } .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; } .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: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%; } /* ============= STAGE 4 · 视频 ============= */ @@ -400,7 +400,7 @@ .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-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; } /* ============= STAGE 5 · 拼接编辑器 ============= */ @@ -422,7 +422,7 @@ .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 > 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; } .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; } @@ -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.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.d { background: var(--accent-honey, #f5c451); color: var(--accent-black); font-weight: 700; } - .swatch-card .nm { font-size: 11px; 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; } + .swatch-card .demo.d { background: var(--accent-honey, #f5c451); color: var(--accent-black); font-weight: 600; } + .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: 13px; } .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); } .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-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 .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-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 .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.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 .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 svg { width: 12px; height: 12px; } - .tl-track .label.video .ico { background: var(--heat-12); color: var(--heat); } - .tl-track .label.subtitle .ico { background: var(--forest-bg); color: var(--accent-forest); } - .tl-track .label.bgm .ico { background: rgba(144, 97, 255, .10); color: var(--accent-amethyst, #9061ff); } + .tl-track .label.video .ico { background: var(--orange-tint); color: var(--heat); } + .tl-track .label.subtitle .ico { background: var(--green-bg); color: var(--accent-forest); } + .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.video-track .lane { height: 46px; } .tl-track.subtitle-track .lane { height: 28px; } .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; } - .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 .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.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 .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 .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: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); } diff --git a/core/frontend/src/product-create-page.css b/core/frontend/src/product-create-page.css index 49e1a67..5ebac80 100644 --- a/core/frontend/src/product-create-page.css +++ b/core/frontend/src/product-create-page.css @@ -36,7 +36,7 @@ } .product-create-page .form-card .req-tag { font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; padding: 2px 7px; background: var(--crimson-bg); color: var(--accent-crimson); @@ -46,7 +46,7 @@ } .product-create-page .form-card .opt-tag { font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; padding: 2px 7px; background: var(--background-lighter); color: var(--black-alpha-56); @@ -56,7 +56,7 @@ } .product-create-page .form-card .card-sub { font-family: var(--font-mono); - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); margin: -10px 0 14px; letter-spacing: .02em; @@ -83,7 +83,7 @@ gap: 4px; color: var(--black-alpha-32); font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; letter-spacing: .04em; overflow: hidden; position: relative; @@ -108,7 +108,7 @@ position: absolute; top: 5px; left: 5px; - font-size: 9.5px; + font-size: 12px; font-weight: 600; padding: 2px 6px; background: var(--surface); @@ -190,7 +190,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-sm); font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; font-weight: 600; color: var(--black-alpha-56); display: grid; @@ -249,7 +249,7 @@ } .product-create-page .form-foot .req-info { font-family: var(--font-mono); - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } @@ -312,7 +312,7 @@ border: 1px solid var(--black-alpha-12); border-radius: var(--r-md); padding: 0 14px; - font-size: 13.5px; color: var(--accent-black); + font-size: 14px; color: var(--accent-black); outline: none; font-family: inherit; 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-d { 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; } /* 示例图 · 纵向卡片 */ @@ -409,7 +409,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-md); 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 .num { @@ -418,13 +418,13 @@ border: 1px solid var(--border-faint); border-radius: var(--r-sm); 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; } .pc-drawer .form-card .bullet-list .bl-text { flex: 1; color: var(--accent-black); } .pc-drawer .form-card .bullet-list .bl-input { 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 { width: 22px; height: 22px; diff --git a/core/frontend/src/product-detail-page.css b/core/frontend/src/product-detail-page.css index 65faea9..7268a04 100644 --- a/core/frontend/src/product-detail-page.css +++ b/core/frontend/src/product-detail-page.css @@ -23,7 +23,7 @@ color: var(--accent-emerald, #1f8a51); border: 1px solid var(--accent-emerald-bd, #c4e3d1); border-radius: var(--r-sm); - font-size: 11.5px; + font-size: 12px; font-weight: 500; } @@ -137,12 +137,12 @@ .ov-tri-close svg { width: 12px; height: 12px; } /* 复刻 pipeline.html .prod-preview-* 内部样式 */ - .ov-tri-pop .prod-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; padding-right: 28px; } + .ov-tri-pop .prod-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); letter-spacing: .04em; text-transform: uppercase; padding-right: 28px; } .ov-tri-pop .prod-preview-img { aspect-ratio: 16/9; } .ov-tri-pop .prod-preview-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; } .ov-tri-pop .prod-preview-history { display: none; flex-direction: column; gap: 6px; } .ov-tri-pop .prod-preview-history.show { display: flex; } - .ov-tri-pop .prod-preview-history .h-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } + .ov-tri-pop .prod-preview-history .h-lbl { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; text-transform: uppercase; } .ov-tri-pop .prod-preview-history .h-lbl .ct { color: var(--accent-black); font-weight: 600; } .ov-tri-pop .prod-preview-history .h-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: thin; } .ov-tri-pop .prod-preview-history .h-row::-webkit-scrollbar { height: 4px; } @@ -159,10 +159,10 @@ .ov-tri-pop .prod-preview-history .h-thumb.adopted { border-color: var(--heat); border-width: 2px; box-shadow: 0 0 0 2px var(--heat-12); } /* 仅预览(未采用):黑色描边,无徽标 */ .ov-tri-pop .prod-preview-history .h-thumb.previewing { border-color: var(--accent-black); border-width: 2px; } - .ov-tri-pop .prod-preview-history .h-thumb .v { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-56); letter-spacing: .02em; } + .ov-tri-pop .prod-preview-history .h-thumb .v { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); letter-spacing: .02em; } .ov-tri-pop .prod-preview-history .h-thumb.adopted .v { color: var(--heat); font-weight: 600; } .ov-tri-pop .prod-preview-history .h-thumb.previewing .v { color: var(--accent-black); font-weight: 600; } - .ov-tri-pop .prod-preview-history .h-thumb .badge { position: absolute; top: 2px; left: 2px; font-family: var(--font-mono); font-size: 8.5px; padding: 0 4px; line-height: 12px; background: var(--heat); color: var(--accent-white); border-radius: 2px; letter-spacing: .02em; display: none; } + .ov-tri-pop .prod-preview-history .h-thumb .badge { position: absolute; top: 2px; left: 2px; font-family: var(--font-mono); font-size: 12px; padding: 0 4px; line-height: 12px; background: var(--heat); color: var(--accent-white); border-radius: 2px; letter-spacing: .02em; display: none; } .ov-tri-pop .prod-preview-history .h-thumb.adopted .badge { display: block; } /* 主图可点击放大 */ @@ -194,7 +194,7 @@ .tri-lightbox-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); - font-size: 11px; letter-spacing: .04em; text-transform: uppercase; + font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--black-alpha-56); padding-right: 32px; } @@ -204,7 +204,7 @@ padding: 2px 6px; background: var(--heat-12); color: var(--heat); border-radius: 3px; - font-size: 10px; + font-size: 12px; } .tri-lightbox-close { position: absolute; @@ -222,7 +222,7 @@ .tri-lightbox-close:hover { background: var(--black-alpha-08); color: var(--accent-black); border-color: var(--black-alpha-12); } .tri-lightbox-close svg { width: 14px; height: 14px; } .tri-lightbox-img { aspect-ratio: 16/9; width: 100%; } - .tri-lightbox-foot { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); } + .tri-lightbox-foot { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); } .tri-lightbox-foot .spc { flex: 1; } .tri-lightbox-foot kbd { display: inline-block; @@ -232,7 +232,7 @@ border-bottom-width: 2px; border-radius: 3px; font-family: var(--font-mono); - font-size: 10px; + font-size: 12px; color: var(--black-alpha-72); } @@ -250,7 +250,7 @@ border: 1px solid var(--black-alpha-12); border-radius: var(--r-md); padding: 0 14px; - font-size: 13.5px; + font-size: 14px; color: var(--accent-black); background: var(--background-lighter); font-family: inherit; @@ -276,7 +276,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-md); margin-bottom: 6px; - font-size: 13.5px; + font-size: 14px; } .v-bullet-list .bl-add { background: transparent; border-style: dashed; } .v-bullet-list .bl-add:focus-within { border-color: var(--heat-40); background: var(--surface); } @@ -286,9 +286,9 @@ border: 1px solid var(--border-faint); border-radius: var(--r-sm); font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--heat); - font-weight: 700; + font-weight: 600; display: grid; place-items: center; flex-shrink: 0; } @@ -301,7 +301,7 @@ .v-bullet-list .bl-input { flex: 1; background: transparent; border: 0; outline: none; - font-size: 13.5px; + font-size: 14px; color: var(--accent-black); font-family: inherit; } @@ -356,7 +356,7 @@ } .pd-overview .ov-h .ct { font-family: var(--font-mono); - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } @@ -388,7 +388,7 @@ width: 64px; flex-shrink: 0; color: var(--black-alpha-48); - font-size: 12.5px; + font-size: 13px; } .ov-info .v { flex: 1; min-width: 0; @@ -400,7 +400,7 @@ content: '·'; color: var(--heat); margin-right: 6px; - font-weight: 700; + font-weight: 600; } /* 商品图片 · 卡片内子 section */ @@ -409,18 +409,18 @@ margin-bottom: 10px; } .ov-images-sub .sub-h .ti { - font-size: 12.5px; font-weight: 500; + font-size: 13px; font-weight: 500; color: var(--black-alpha-72); } .ov-images-sub .sub-h .ct { font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } .ov-images-sub .sub-h .more { margin-left: auto; - font-size: 11.5px; + font-size: 12px; color: var(--heat); cursor: pointer; } @@ -448,7 +448,7 @@ .ov-actions .qa-section:last-child { margin-bottom: 0; } .ov-actions .qa-section-h { font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; @@ -473,7 +473,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; - font-size: 12.5px; + font-size: 13px; color: var(--accent-black); text-align: center; transition: border-color var(--t-base), background var(--t-base), color var(--t-base); @@ -488,14 +488,14 @@ border: 1px solid var(--border-faint); border-radius: var(--r-sm); } - .qa-item:hover .ic { border-color: var(--heat-20); background: var(--surface); } + .qa-item:hover .ic { border-color: var(--heat); background: var(--surface); } .qa-item .ic svg { width: 16px; height: 16px; } .qa-item.primary { background: var(--heat); color: var(--accent-white); border-color: var(--heat); } - .qa-item.primary .ic { background: rgba(255,255,255,.16); color: var(--accent-white); border-color: rgba(255,255,255,.24); } + .qa-item.primary .ic { background: var(--accent-white); color: var(--heat); border-color: var(--accent-white); } .qa-item.primary:hover { color: var(--accent-white); box-shadow: var(--shadow-cta-hover); } /* 状态 pill 三态(通过/不通过/归档) */ @@ -526,7 +526,7 @@ } .pd-tabs .tab { padding: 10px 14px; - font-size: 13.5px; + font-size: 14px; color: var(--black-alpha-56); background: transparent; border: 0; @@ -557,7 +557,7 @@ } .pd-toolbar .total .ct { font-family: var(--font-mono); - font-size: 11.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; margin-left: 4px; @@ -571,15 +571,15 @@ border: 1px solid var(--border-faint); border-radius: var(--r-sm); cursor: pointer; - font-size: 12.5px; + font-size: 13px; color: var(--black-alpha-72); font-family: inherit; transition: border-color var(--t-base), color var(--t-base); } .pd-toolbar .filter:hover { border-color: var(--black-alpha-24); } .pd-toolbar .filter.open, .pd-toolbar .filter.filtered { border-color: var(--heat); color: var(--heat); background: var(--heat-12); } - .pd-toolbar .filter.open svg, .pd-toolbar .filter.filtered svg { opacity: 1; } - .pd-toolbar .filter svg { width: 10px; height: 10px; opacity: .6; transition: transform var(--t-base); } + .pd-toolbar .filter.open svg, .pd-toolbar .filter.filtered svg { color: var(--heat); } + .pd-toolbar .filter svg { width: 10px; height: 10px; color: var(--ink-3); transition: transform var(--t-base), color var(--t-base); } .pd-toolbar .filter.open svg { transform: rotate(180deg); } /* 筛选下拉 · 挂在 body 上避免被祖先 overflow 裁切 */ @@ -600,7 +600,7 @@ background: transparent; border: 0; padding: 8px 12px; text-align: left; - font-size: 12.5px; + font-size: 13px; color: var(--accent-black); cursor: pointer; border-radius: var(--r-sm); @@ -658,12 +658,12 @@ border-right: 1px solid var(--border-faint); } .asset-grid.list-view .asset-card .thumb .type-pill { - font-size: 9.5px; + font-size: 12px; padding: 2px 6px; top: 4px; left: 4px; } - .asset-grid.list-view .asset-card .thumb .ph-frame { font-size: 10px; } + .asset-grid.list-view .asset-card .thumb .ph-frame { font-size: 12px; } .asset-grid.list-view .asset-card .meta { padding: 10px 14px; } @@ -674,7 +674,7 @@ text-align: center; color: var(--black-alpha-48); font-family: var(--font-mono); - font-size: 12.5px; + font-size: 13px; letter-spacing: .02em; border: 1px dashed var(--border-faint); border-radius: var(--r-md); @@ -706,7 +706,7 @@ background: rgba(0,0,0,.65); color: var(--accent-white); border-radius: var(--r-sm); - font-size: 11px; + font-size: 12px; font-weight: 500; backdrop-filter: blur(4px); } @@ -717,13 +717,13 @@ .asset-card .meta .pill { padding: 2px 8px; border-radius: var(--r-sm); - font-size: 10.5px; + font-size: 12px; font-weight: 500; } .asset-card .meta .date { margin-left: auto; font-family: var(--font-mono); - font-size: 10.5px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } @@ -738,7 +738,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-md); color: var(--black-alpha-72); - font-size: 12.5px; + font-size: 13px; font-family: inherit; cursor: pointer; } @@ -759,7 +759,7 @@ } .task-stat .lbl { font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; margin-bottom: 6px; @@ -798,7 +798,7 @@ .task-row.head { background: var(--background-lighter); font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--black-alpha-48); letter-spacing: .04em; font-weight: 500; @@ -816,7 +816,7 @@ } .task-row .nm .id-mono { font-family: var(--font-mono); - font-size: 11px; + font-size: 12px; color: var(--black-alpha-48); font-weight: 400; } @@ -836,7 +836,7 @@ display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-sm); - font-size: 11.5px; + font-size: 12px; font-weight: 500; width: fit-content; } @@ -891,7 +891,7 @@ border: 1px solid var(--border-faint); border-radius: var(--r-sm); color: var(--black-alpha-72); - font-size: 11.5px; + font-size: 12px; font-family: inherit; cursor: pointer; transition: border-color var(--t-base), color var(--t-base); diff --git a/core/frontend/src/products-page.css b/core/frontend/src/products-page.css index a446cfb..4f36052 100644 --- a/core/frontend/src/products-page.css +++ b/core/frontend/src/products-page.css @@ -3,7 +3,7 @@ .products-page { .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 .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; } .product-grid-wrap { margin: 0 -8px; padding: 2px 8px 24px; } @@ -13,31 +13,31 @@ .product-thumb { aspect-ratio: 1.4 / 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-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-date { font-family: var(--font-mono); font-size: 11px; color: var(--black-alpha-48); margin-top: 10px; letter-spacing: .02em; } + .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: 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 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 .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 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.active { background: var(--accent-black); color: var(--accent-white); } .view-tog button svg { width: 13px; height: 13px; } /* 编辑模式 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 svg { width: 11px; height: 11px; opacity: 0; } + .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; visibility: hidden; } } /* 批量编辑模式(忠实移植自 products.html · body.edit-mode 全局态,控件仅商品库出现) */ body.edit-mode .product-card { cursor: pointer; } 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 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-footer .stat, 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; } .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 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.danger { background: var(--accent-crimson, #c43d3d); border-color: var(--accent-crimson, #c43d3d); } .bulk-bar button.danger:hover { filter: brightness(1.06); } diff --git a/core/frontend/src/project-wizard-page.css b/core/frontend/src/project-wizard-page.css index d2263ba..c33108b 100644 --- a/core/frontend/src/project-wizard-page.css +++ b/core/frontend/src/project-wizard-page.css @@ -22,12 +22,12 @@ /* ── 左侧步骤轨 .step ── */ .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 .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.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 .label { font-size: 13.5px; 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 .label { font-size: 14px; font-weight: 500; color: var(--black-alpha-56); padding-top: 2px; } + .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.done .label { color: var(--black-alpha-56); } .step.done:not(:last-child)::after { background: var(--accent-black); } @@ -54,7 +54,7 @@ transition: border-color var(--t-base); } .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::placeholder { color: var(--black-alpha-48); } .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.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 { position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; @@ -88,26 +88,26 @@ display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm); - font-size: 12.5px; + font-size: 13px; color: var(--accent-black); cursor: pointer; } .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-check { width: 12px; height: 12px; opacity: 0; flex-shrink: 0; } - .pp-toolbar .pp-menu .mi.selected .mi-check { opacity: 1; } + .pp-toolbar .pp-menu .mi-check { width: 12px; height: 12px; visibility: hidden; flex-shrink: 0; } + .pp-toolbar .pp-menu .mi.selected .mi-check { visibility: visible; } .pp-toolbar .pp-clear { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; 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; } .pp-toolbar .pp-clear:hover { color: var(--accent-crimson); background: var(--crimson-bg); } .pp-toolbar .pp-clear svg { width: 11px; height: 11px; } .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; margin: 4px 0 12px; } @@ -147,11 +147,11 @@ 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; + border-radius: var(--r-sm); font-size: 12px; } .pp-grid .product-date { 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; } .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 .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-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 · 列表视图 ── */ .pp-grid.list-view { display: flex; flex-direction: column; gap: 6px; } @@ -197,7 +197,7 @@ border-radius: var(--r-md); background: var(--background-lighter); 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; } .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; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-faint); - font-size: 12.5px; color: var(--black-alpha-56); + font-size: 13px; color: var(--black-alpha-56); } .pp-pager .total { font-family: var(--font-mono); letter-spacing: .02em; } .pp-pager .pages { display: inline-flex; gap: 4px; margin-left: auto; } @@ -215,7 +215,7 @@ min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--border-faint); background: var(--surface); border-radius: var(--r-sm); - cursor: pointer; font-size: 12.5px; color: var(--black-alpha-72); font-family: inherit; + cursor: pointer; font-size: 13px; color: var(--black-alpha-72); font-family: inherit; transition: border-color var(--t-base), background var(--t-base), color var(--t-base); } .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; background: var(--surface); border: 1px solid var(--border-faint); 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 · 底部提示 ── */ @@ -241,10 +241,10 @@ background: var(--background-lighter); border: 1px solid var(--border-faint); 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; } - .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:hover { text-decoration: underline; } @@ -262,12 +262,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 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 .note { font-size: 11.5px; 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 .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: 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: 12px; color: var(--black-alpha-48); letter-spacing: .02em; } .opt-card .metric .val { color: var(--accent-black); font-weight: 500; } .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); } @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; } /* ── 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 .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 .txt { flex: 1; line-height: 1.5; } .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: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; } diff --git a/core/frontend/src/projects-page.css b/core/frontend/src/projects-page.css index 83f27df..58348e5 100644 --- a/core/frontend/src/projects-page.css +++ b/core/frontend/src/projects-page.css @@ -4,8 +4,8 @@ /* ─── List view ─── */ .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-name { font-weight: 600; color: var(--accent-black); font-size: 13.5px; } - .proj-sub { font-size: 11.5px; color: var(--black-alpha-48); margin-top: 3px; font-family: var(--font-mono); letter-spacing: .02em; } + .proj-name { font-weight: 600; color: var(--accent-black); font-size: 14px; } + .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; } 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); } @@ -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::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-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 svg { width: 13px; height: 13px; } .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-name { font-size: 13.5px; 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-name { font-size: 14px; font-weight: 600; color: var(--accent-black); line-height: 1.4; } + .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-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-wrap { position: relative; } diff --git a/core/frontend/src/routes/ai-tools.tsx b/core/frontend/src/routes/ai-tools.tsx index 0cb0c0c..bce2375 100644 --- a/core/frontend/src/routes/ai-tools.tsx +++ b/core/frontend/src/routes/ai-tools.tsx @@ -347,7 +347,7 @@ export function AssetFactoryPage({ navigate, aiTasks, assets = [] }: { navigate: 60% ) : ( - + {pill === "ok" ? "已完成" : "—"} )} @@ -358,7 +358,7 @@ export function AssetFactoryPage({ navigate, aiTasks, assets = [] }: { navigate: {statusText(task.status)} - {(task.created_at || "").slice(0, 10)} + {(task.created_at || "").slice(0, 10)} ); diff --git a/core/frontend/src/routes/auth-screen.tsx b/core/frontend/src/routes/auth-screen.tsx index effdb84..0bfc745 100644 --- a/core/frontend/src/routes/auth-screen.tsx +++ b/core/frontend/src/routes/auth-screen.tsx @@ -1,53 +1,59 @@ import { useEffect, useRef, useState } from "react"; import type { FormEvent } from "react"; +import { Eye, EyeOff, LockKeyhole, UserRound } from "lucide-react"; import { api } from "../api"; import type { Team, User } from "../types"; import type { AuthMode } from "./route-config"; -const CHECK_SVG = ( - -); -const MAIL_SVG = ( - -); -const LOCK_SVG = ( - -); -const EYE_SVG = ( - -); -const ARROW_SVG = ( - -); +const LOGIN_PROGRESS_STAGE_MS = 520; + +type LoginProgress = "checking" | "verified" | "entering"; + +const LOGIN_PROGRESS_COPY: Record = { + checking: "正在验证用户名和密码…", + verified: "验证成功，正在登录…", + entering: "登录成功，正在进入 Airshelf" +}; + +function wait(ms: number) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} + +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({ - initialMode, - onModeChange, + initialMode: _initialMode, + onModeChange: _onModeChange, onAuthed }: { initialMode: AuthMode; onModeChange: (mode: AuthMode) => void; - onAuthed: (payload: { token: string; user: User; team: Team }) => void; + onAuthed: (payload: { token: string; user: User; team: Team }) => void | Promise; }) { - const [mode, setMode] = useState(initialMode); - // 不预填设计稿假账号:真实登录页字段必须从空开始 const [username, setUsername] = 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 [showRegPwd, setShowRegPwd] = useState(false); - const [showRegPwd2, setShowRegPwd2] = useState(false); + const [fieldErrors, setFieldErrors] = useState({}); const [error, setError] = useState(""); const [busy, setBusy] = useState(false); const [toast, setToast] = useState<{ title: string; sub: string } | null>(null); + const [loginProgress, setLoginProgress] = useState(null); const toastTimer = useRef | 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); }, []); function showToast(title: string, sub: string) { @@ -56,41 +62,48 @@ export function AuthScreen({ toastTimer.current = setTimeout(() => setToast(null), 2800); } - function switchMode(next: AuthMode) { - setMode(next); + function setFieldValue(field: keyof FieldErrors, value: string) { + if (field === "username") setUsername(value); + if (field === "password") setPassword(value); setError(""); - onModeChange(next); + setLoginProgress(null); + setFieldErrors((current) => ({ ...current, [field]: undefined })); } - async function submit(event: FormEvent) { - event.preventDefault(); + function validateLogin() { + 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); setError(""); + setLoginProgress("checking"); try { - if (mode === "login") { - if (!username.trim() || !password) throw new Error("请输入邮箱和密码"); - } - if (mode === "register") { - if (registerPassword.length < 8) throw new Error("密码至少 8 位"); - if (registerPassword !== registerPassword2) throw new Error("两次密码不一致"); - if (!agreed) throw new Error("请同意用户协议"); - } - const payload = - mode === "login" - ? await api.login({ username, password }) - : await api.register({ - username: email, - email, - password: registerPassword, - team_name: teamName - }); - onAuthed(payload); + const checkingStartedAt = Date.now(); + const payload = await api.login({ username: username.trim(), password }); + await completeProgressStage(checkingStartedAt); + setLoginProgress("verified"); + await wait(LOGIN_PROGRESS_STAGE_MS); + setLoginProgress("entering"); + await wait(LOGIN_PROGRESS_STAGE_MS); + await onAuthed(payload); } catch (err) { + setLoginProgress(null); const raw = err instanceof Error ? err.message : ""; - // 后端错误是英文原文(invalid credentials 等),映射成用户可读的中文 const friendly = /invalid credentials|unable to log in|non_field_errors/i.test(raw) - ? "邮箱或密码不正确" - : raw || (mode === "login" ? "登录失败,请稍后重试" : "注册失败,请稍后重试"); + ? "用户名或密码不正确" + : raw || "登录失败,请稍后重试"; setError(friendly); } finally { setBusy(false); @@ -98,132 +111,81 @@ export function AuthScreen({ } return ( -
- { if (mode === "register") { event.preventDefault(); switchMode("login"); } }}> - {mode === "register" ? "← 返回登录" : "← 返回工作台"} - +
-
-

{mode === "login" ? "登录" : "注册团队"}

{mode === "login" ? "// /auth/login" : "// /auth/register"}
-

{mode === "login" ? "使用团队邀请邮箱登录,接受邀请后自动加入对应团队。" : "填写团队信息开通账户,默认成为团队超管。"}

- {mode === "login" ? ( -
-
- -
- {MAIL_SVG} - setUsername(event.target.value)} required /> -
+
+

登录

// LOGIN
+ +
+ +
+
-
- -
- {LOCK_SVG} - setPassword(event.target.value)} required /> - -
-
- - {error &&
{error}
} - -
OR
-
- -
+
+ +
+
- - - ) : ( -
-
- -
- - setTeamName(event.target.value)} required /> -
-
-
- -
- {MAIL_SVG} - setEmail(event.target.value)} required /> -
-
-
-
- -
- {LOCK_SVG} - setRegisterPassword(event.target.value)} required /> - -
-
-
- -
- {LOCK_SVG} - setRegisterPassword2(event.target.value)} required /> - -
-
-
-
- -
- - setInvite(event.target.value)} /> -
-
- - {error &&
{error}
} - - -
+
+ + +
+
+ {loginProgress && !error && ( +
+ + {LOGIN_PROGRESS_COPY[loginProgress]} +
)} -
+ {error &&
{error}
} + +
- {toast &&
{toast.title}
// {toast.sub}
} + {toast &&
{toast.title}
// {toast.sub}
}
); } diff --git a/core/frontend/src/routes/dashboard.tsx b/core/frontend/src/routes/dashboard.tsx index 603ab25..13b8d3a 100644 --- a/core/frontend/src/routes/dashboard.tsx +++ b/core/frontend/src/routes/dashboard.tsx @@ -1,4 +1,3 @@ -import { Plus } from "lucide-react"; import type { Asset, BillingSummary, Product, Project } from "../types"; import type { Page } from "./route-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 || "商品"; return ( <> -

欢迎回来{userName ? `，${userName.split("@")[0]}` : ""}

// {new Date().toLocaleDateString("zh-CN")}·你有 {running} 个项目 正在进行中
+
+
+

欢迎回来{userName ? `，${userName.split("@")[0]}` : ""}

+
// {new Date().toLocaleDateString("zh-CN")}·你有 {running} 个项目 正在进行中
+
+
+ + +
+
++

最近项目

{projects.slice(0, 6).map((project) => )}

快捷入口

[ /shortcuts ]
navigate("products")} /> navigate("library")} /> navigate("account")} /> navigate("projects")} />

提示

[ FAQ ]
扣费规则生成失败、超时、用户重跑 — 均不扣费。仅在你点 [ 确认通过 ] 时按 token 实际结算。
diff --git a/core/frontend/src/routes/pipeline.tsx b/core/frontend/src/routes/pipeline.tsx index 195f497..de21047 100644 --- a/core/frontend/src/routes/pipeline.tsx +++ b/core/frontend/src/routes/pipeline.tsx @@ -1381,7 +1381,7 @@ export function PipelinePage(props: {
镜头脚本 - + {shots.length ? `· ${shots.length} 镜 · ${scriptAdopted ? "已采用" : "待采用"}` : "· 空 · 待生成"}
@@ -1499,7 +1499,7 @@ export function PipelinePage(props: {
AI
脚本助手 - · {scriptModelName} + · {scriptModelName}
@@ -1658,7 +1658,7 @@ export function PipelinePage(props: {
- {assetName(group.adopted_asset) || `${KIND_LABEL[kind]} ${gi + 1}`} + {assetName(group.adopted_asset) || `${KIND_LABEL[kind]} ${gi + 1}`} {group.adopted_asset ? 已采用 @@ -1744,7 +1744,7 @@ export function PipelinePage(props: {
仅支持整张重跑 · 不能局部改某一镜。如需调单镜,先在 { event.preventDefault(); goStage(1); }}>Stage 1 脚本 改镜头描述,再回此处整张重跑。
-
// 整张提示词(重跑时生效,可编辑)
+
// 整张提示词(重跑时生效,可编辑)
{/* key 跟版本走:切版本重新种子;onInput 实时回写 state → 整张重跑用的就是你编辑后的文本 */}
- ~¥0.45/场 + ~¥0.45/场
// 历史版本({storyboards.length})
@@ -1774,15 +1774,15 @@ export function PipelinePage(props: {
{(ver.created_at || "").slice(11, 16) || "--:--"}
); - }) : // 暂无历史} + }) : // 暂无历史}
-
// 绑定的资产
+
// 绑定的资产
{groups.filter((g) => g.adopted_asset).length ? groups.filter((g) => g.adopted_asset).map((g) => ( {assetName(g.adopted_asset) || KIND_LABEL[g.kind] || g.kind}({KIND_LABEL[g.kind] || g.kind}) - )) : // 暂无绑定资产} + )) : // 暂无绑定资产}
@@ -1818,7 +1818,7 @@ export function PipelinePage(props: {
视频生成 · {segDone} / {segments.length} 完成
-
// 每场 Seedance 生成 · {statusText}
+
// 每场 Seedance 生成 · {statusText}
{pct}% @@ -2038,7 +2038,7 @@ export function PipelinePage(props: { 烧入字幕
-
// 字幕样式(导出烧入)
+
// 字幕样式(导出烧入)
{STYLE_SWATCHES.map((sw) => (
commitEdit({ ...edState, subtitleStyle: sw.key, subtitleEnabled: true })}> @@ -2046,17 +2046,17 @@ export function PipelinePage(props: {
))}
-
// 字幕文本(默认取脚本旁白,可逐段改)
+
// 字幕文本(默认取脚本旁白,可逐段改)
{edState.clips.map((c, idx) => (
- {idx + 1} + {idx + 1}