zyc/AirShelf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core/frontend): ai-tools per-mode layouts (image=chat-stream / model=person picker / cover=platform) + pipeline real unread bell

Browse Source 
- ImageWorkbenchPage now renders mode-specific layouts matching each baseline:
  image -> chat-stream (conversation list + hero + prompt chips + chat input bar);
  model -> product rail + 真人模特 cards (assets category=person, fallback Ava/Luna/Mia/Zoe) + per-model count;
  cover -> platform-kit picker. Generation (onGenerate) wiring + loading/empty/fail states preserved.
- pipeline.tsx: bespoke topbar bell now shows real unreadCount (was hardcoded 12); App.tsx threads it.
verified: tsc --noEmit clean; screenshot confirms image-optimize matches chat-stream baseline.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-06-05 17:06:30 +08:00
parent 579fb7cefa
commit 2242241c3b
4 changed files with 974 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/frontend/src/App.tsx
View File

@ -463,6 +463,7 @@ export function App() {
assets={assets}
billing={billing}
notice={notice}
unreadCount={unreadCount}
avatarChar={avatarChar}
logout={logout}
onRefresh={refreshProjectDetail}

532
core/frontend/src/ai-tools-page.css
View File

@ -168,21 +168,17 @@
.image-workbench {
/* 抵消 .content 的 48/28/72 padding,让工作室壳贴边铺满(同旧 .tool-shell 思路) */
margin: -48px -28px -72px;
min-height: calc(100vh - 64px);
height: calc(100vh - 64px);
display: flex;
flex-direction: column;
background: var(--background-base);
overflow: hidden;
}
/* ─── 顶栏 · toolbar 风格(返回 + 标题 + 右侧操作)─── */
.image-workbench .iw-topbar {
flex-shrink: 0;
display: flex; align-items: center; gap: 14px;
padding: 12px 28px;
border-bottom: 1px solid var(--border-faint);
background: var(--surface);
}
.image-workbench .iw-topbar .back-pill {
/* ════════════════════════════════════════════════
通用:返回 pill(图片创作侧栏头 / 模特·平台侧栏头共用)
════════════════════════════════════════════════ */
.image-workbench .back-pill {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 13px 0 11px;
background: var(--surface);
@ -194,34 +190,25 @@
cursor: pointer;
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.image-workbench .iw-topbar .back-pill:hover {
.image-workbench .back-pill:hover {
background: var(--black-alpha-4);
border-color: var(--black-alpha-24);
}
.image-workbench .iw-topbar .back-pill svg { width: 14px; height: 14px; }
.image-workbench .iw-topbar .iw-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.image-workbench .iw-topbar .iw-title h1 {
font-size: 18px; font-weight: 600;
letter-spacing: -.01em; line-height: 1.2;
color: var(--accent-black);
}
.image-workbench .iw-topbar .iw-title .sub {
font-size: 12.5px; color: var(--black-alpha-56);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.image-workbench .iw-topbar .iw-title .sub .mono {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--black-alpha-48); letter-spacing: .04em;
}
.image-workbench .back-pill svg { width: 14px; height: 14px; }
/* ─── 三栏主体:商品空间(rail) + 参数表单 + 结果预览 ─── */
/* ════════════════════════════════════════════════
mode=model / mode=cover · 外层两栏(商品空间 + 主区)
基线:model-photo.html / platform-cover.html
════════════════════════════════════════════════ */
.image-workbench.iw-prod { flex-direction: row; }
.image-workbench .iw-layout {
flex: 1; min-height: 0;
display: grid;
grid-template-columns: 260px 320px minmax(0, 1fr);
grid-template-columns: 260px minmax(0, 1fr);
}
@media (max-width: 1280px) {
.image-workbench .iw-layout { grid-template-columns: 240px 300px minmax(0, 1fr); }
.image-workbench .iw-layout { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
.image-workbench .iw-layout { grid-template-columns: 1fr; }
@ -234,19 +221,27 @@
display: flex; flex-direction: column;
min-height: 0; overflow: hidden;
}
.image-workbench .iw-ps-h {
/* 侧栏头部 · 返回(同基线 .mp-side-top) */
.image-workbench .iw-side-top {
flex-shrink: 0;
display: flex; align-items: center; gap: 8px;
padding: 14px 14px 10px;
border-bottom: 1px solid var(--border-faint);
}
.image-workbench .iw-ps-h .mono {
/* 商品列表标题行(// 商品空间) */
.image-workbench .iw-list-h {
flex-shrink: 0;
display: flex; align-items: center; gap: 8px;
padding: 4px 14px 10px;
}
.image-workbench .iw-list-h .mono {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--black-alpha-48); letter-spacing: .06em;
text-transform: uppercase;
}
.image-workbench .iw-ps-search {
position: relative; height: 32px;
margin: 0 14px 10px;
margin: 12px 14px 10px;
}
.image-workbench .iw-ps-search svg {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
@ -310,7 +305,73 @@
line-height: 1.7;
}
/* ── 中 · 参数表单 ── */
/* ── 主区 · flat 头部 + 参数/结果双栏(基线 .mp-main) ── */
.image-workbench .iw-main {
display: flex; flex-direction: column;
min-height: 0; overflow: hidden;
}
.image-workbench .iw-main-h {
flex-shrink: 0;
display: flex; align-items: center; gap: 10px;
padding: 12px 28px;
border-bottom: 1px solid var(--border-faint);
background: var(--surface);
}
.image-workbench .iw-main-h .cur-title {
display: flex; align-items: baseline; gap: 8px;
min-width: 0; max-width: 50%;
}
.image-workbench .iw-main-h .cur-title .crumb {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--black-alpha-48); letter-spacing: .04em;
flex-shrink: 0;
}
.image-workbench .iw-main-h .cur-title .nm {
font-size: 15px; font-weight: 600;
color: var(--accent-black); letter-spacing: -.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.image-workbench .iw-main-h .cur-title .nm.placeholder {
font-weight: 400; font-size: 13px;
color: var(--black-alpha-48);
}
.image-workbench .iw-main-h .spacer { flex: 1; }
.image-workbench .iw-main-h .search-btn {
width: 32px; height: 32px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
color: var(--black-alpha-72);
cursor: pointer;
display: grid; place-items: center;
transition: border-color var(--t-base), color var(--t-base);
}
.image-workbench .iw-main-h .search-btn:hover { border-color: var(--heat-20); color: var(--heat); }
.image-workbench .iw-main-h .search-btn svg { width: 14px; height: 14px; }
.image-workbench .iw-main-h .tb-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 10px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
font-size: 12.5px; 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-body {
flex: 1; min-height: 0;
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
}
@media (max-width: 1280px) {
.image-workbench .iw-main-body { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
.image-workbench .iw-main-body { grid-template-columns: 1fr; }
}
/* ── 左 · 参数表单(基线 .mp-form / .pc-form) ── */
.image-workbench .iw-form {
border-right: 1px solid var(--border-faint);
background: var(--surface);
@ -333,6 +394,8 @@
flex-shrink: 0;
}
.image-workbench .iw-step-h .title { font-size: 14px; font-weight: 600; color: var(--accent-black); }
.image-workbench .iw-step-h .right { margin-left: auto; font-size: 12px; color: var(--heat); cursor: pointer; }
.image-workbench .iw-step-h .right:hover { text-decoration: underline; }
.image-workbench .iw-sub-h {
font-size: 12px; color: var(--black-alpha-48);
margin-bottom: 6px;
@ -363,14 +426,13 @@
font-weight: 600;
}
/* 模特 / 平台多选卡格 */
.image-workbench .iw-pick-grid {
/* ── 模特选择 · 3:4 矩形卡多选(基线 .model-card)── */
.image-workbench .model-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.image-workbench .iw-pick-grid.platforms { grid-template-columns: repeat(3, 1fr); }
.image-workbench .iw-pick-card {
.image-workbench .model-card {
position: relative;
background: var(--background-lighter);
border: 1px solid var(--border-faint);
@ -382,28 +444,93 @@
font-family: inherit;
transition: background var(--t-base), border-color var(--t-base);
}
.image-workbench .iw-pick-card:hover { background: var(--surface); }
.image-workbench .iw-pick-card.selected { border-color: var(--heat); background: var(--heat-12); }
.image-workbench .iw-pick-card .m-thumb { aspect-ratio: 3/4; border-radius: var(--r-sm); }
.image-workbench .iw-pick-card.platforms-card { padding: 10px 6px; text-align: center; align-items: center; }
.image-workbench .iw-pick-card .m-name { font-size: 12.5px; font-weight: 500; color: var(--accent-black); }
.image-workbench .iw-pick-card.selected .m-name { color: var(--heat); }
.image-workbench .iw-pick-card .m-meta {
.image-workbench .model-card:hover { background: var(--surface); }
.image-workbench .model-card.selected { border-color: var(--heat); background: var(--heat-12); }
.image-workbench .model-card .m-thumb {
position: relative;
aspect-ratio: 3/4;
border-radius: var(--r-sm);
overflow: hidden;
}
.image-workbench .model-card .m-thumb .placeholder { position: absolute; inset: 0; }
.image-workbench .model-card .m-thumb-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
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.selected .m-name { color: var(--heat); }
.image-workbench .model-card .m-tag {
font-family: var(--font-mono); font-size: 10.5px;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.image-workbench .iw-pick-card .m-check {
position: absolute; top: 10px; right: 10px;
width: 20px; height: 20px;
.image-workbench .model-card .m-check {
position: absolute; top: 14px; right: 14px;
width: 22px; height: 22px;
background: var(--surface);
border: 1.5px solid var(--black-alpha-24);
border-radius: 50%;
display: grid; place-items: center;
color: var(--accent-white); z-index: 2;
}
.image-workbench .iw-pick-card .m-check svg { width: 11px; height: 11px; opacity: 0; }
.image-workbench .iw-pick-card.selected .m-check { background: var(--heat); border-color: var(--heat); }
.image-workbench .iw-pick-card.selected .m-check svg { opacity: 1; }
.image-workbench .model-card .m-check svg { width: 11px; height: 11px; opacity: 0; }
.image-workbench .model-card.selected .m-check { background: var(--heat); border-color: var(--heat); }
.image-workbench .model-card.selected .m-check svg { opacity: 1; }
/* ── 平台选择 · 3 列卡多选(基线 .platform-card)── */
.image-workbench .platform-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.image-workbench .platform-card {
position: relative;
background: var(--background-lighter);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
padding: 10px 6px;
cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 4px;
text-align: center;
font-family: inherit;
transition: background var(--t-base), border-color var(--t-base);
}
.image-workbench .platform-card:hover { background: var(--surface); }
.image-workbench .platform-card.selected { border-color: var(--heat); background: var(--heat-12); }
.image-workbench .platform-card .p-logo {
width: 32px; height: 32px;
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;
}
.image-workbench .platform-card .p-name { font-size: 11.5px; 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;
width: 16px; height: 16px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--black-alpha-24);
}
.image-workbench .platform-card.selected .p-check {
background: var(--heat); border-color: var(--heat);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
background-position: center; background-size: 10px 10px; background-repeat: no-repeat;
border: 0;
}
/* 平台 logo 配色(基线 .p-logo.* · scoped 命名,不写裸色到全局) */
.image-workbench .p-logo-dy { background: #000; }
.image-workbench .p-logo-tb { background: #ff6f00; }
.image-workbench .p-logo-tm { background: #ff0036; }
.image-workbench .p-logo-jd { background: #e1251b; }
.image-workbench .p-logo-pdd { background: #e02e24; }
.image-workbench .p-logo-xhs { background: #ff2741; }
.image-workbench .p-logo-ks { background: #ff4906; }
.image-workbench .p-logo-sph { background: #07c160; }
.image-workbench .p-logo-amz { background: #ff9900; }
.image-workbench .p-logo-al { background: #2c4af1; }
/* 左栏底部 · 立即生成(主 CTA · 通栏) */
.image-workbench .iw-cta { margin-top: auto; padding-top: 14px; }
@ -453,6 +580,17 @@
.image-workbench .iw-pv-h .pv-line {
font-size: 13px; color: var(--accent-black);
line-height: 1.6;
display: flex; align-items: center;
}
.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;
color: var(--black-alpha-48); letter-spacing: .04em;
margin-right: 8px; min-width: 36px;
}
.image-workbench .iw-pv-h .pv-line .v {
font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 结果区:复用 §4.18 .gen-card 规范结构(scoped 实现 · 仅 token) */
@ -544,3 +682,299 @@
line-height: 1.6; max-width: 320px;
}
.image-workbench .iw-pv-empty .hint b { color: var(--heat); font-weight: 600; }
/* 生成中占位 · 脉冲(loading 态) */
.image-workbench .gen-image.gen .placeholder { animation: iw-gen-pulse 1.4s ease-in-out infinite; }
@keyframes iw-gen-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
/* ════════════════════════════════════════════════
mode=image · 对话流形态(基线 image-optimize.html · design.md §4.13)
外层两栏:左会话列表 + 右对话流(底部固定 chat 输入栏)
════════════════════════════════════════════════ */
.image-workbench.iw-chat {
flex-direction: row;
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
}
@media (max-width: 1100px) {
.image-workbench.iw-chat { grid-template-columns: 200px minmax(0, 1fr); }
}
/* 左 · 会话栏 */
.image-workbench .ic-side {
border-right: 1px solid var(--border-faint);
background: var(--surface);
display: flex; flex-direction: column;
min-height: 0; overflow: hidden;
}
.image-workbench .ic-side-h {
display: flex; align-items: center; gap: 8px;
padding: 14px 14px 10px;
border-bottom: 1px solid var(--border-faint);
}
.image-workbench .ic-new-conv {
margin: 10px 12px 0;
height: 36px;
display: inline-flex; align-items: center; gap: 8px;
padding: 0 12px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
color: var(--accent-black);
font-size: 13px; font-weight: 500;
font-family: inherit; cursor: pointer;
transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.image-workbench .ic-new-conv:hover { border-color: var(--heat-20); background: var(--heat-12); color: var(--heat); }
.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;
color: var(--black-alpha-48); letter-spacing: .08em;
text-transform: uppercase;
}
.image-workbench .ic-conv-list {
padding: 0 6px;
display: flex; flex-direction: column; gap: 2px;
}
.image-workbench .ic-conv-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--r-sm);
cursor: pointer;
color: var(--accent-black);
transition: background var(--t-base);
}
.image-workbench .ic-conv-item:hover { background: var(--background-lighter); }
.image-workbench .ic-conv-item.active { background: var(--heat-12); }
.image-workbench .ic-conv-item .thumb {
flex-shrink: 0;
width: 28px; height: 28px;
background: var(--background-lighter);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
display: grid; place-items: center;
color: var(--black-alpha-32);
}
.image-workbench .ic-conv-item .thumb.default {
background: var(--accent-black); color: var(--accent-white); border-color: var(--accent-black);
}
.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;
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;
}
.image-workbench .ic-conv-empty .mono {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: .02em; display: inline-block; margin-top: 4px;
}
/* 右 · 对话流主体 */
.image-workbench .ic-main {
display: flex; flex-direction: column;
min-height: 0; position: relative;
}
.image-workbench .ic-stream {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 28px 28px 220px; /* 底部留出输入栏高度 */
background: var(--background-base);
}
.image-workbench .ic-stream-inner {
max-width: 1180px; margin: 0 auto;
display: flex; flex-direction: column; gap: 32px;
}
/* 空态 · 中央 hero「开始你的创作」+ 提示词建议 chip */
.image-workbench .ic-empty {
min-height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 16px; padding: 40px;
text-align: center;
}
.image-workbench .ic-empty .ic {
width: 64px; height: 64px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
display: grid; place-items: center;
color: var(--heat);
}
.image-workbench .ic-empty .badge {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .08em; color: var(--black-alpha-48);
text-transform: uppercase;
}
.image-workbench .ic-empty h2 {
font-size: 22px; font-weight: 600;
color: var(--accent-black); letter-spacing: -.015em;
}
.image-workbench .ic-empty p {
font-size: 13px; color: var(--black-alpha-56);
max-width: 460px; line-height: 1.6;
}
.image-workbench .ic-empty .examples {
margin-top: 10px;
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
max-width: 720px;
}
.image-workbench .ic-empty .examples .ex {
padding: 6px 12px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-pill);
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-empty .examples .ex:hover { border-color: var(--heat-20); color: var(--heat); background: var(--heat-12); }
/* 单条对话(提示词块 + 结果网格) */
.image-workbench .ic-msg { display: flex; flex-direction: column; gap: 14px; }
.image-workbench .ic-msg-prompt { display: flex; align-items: flex-start; gap: 12px; }
.image-workbench .ic-msg-prompt .quote {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: var(--r-sm);
background: var(--surface);
border: 1px solid var(--border-faint);
color: var(--heat);
display: grid; place-items: center;
}
.image-workbench .ic-msg-prompt .quote svg { width: 13px; height: 13px; }
.image-workbench .ic-msg-prompt .pt { flex: 1; min-width: 0; padding-top: 4px; }
.image-workbench .ic-msg-prompt .pt-text {
font-size: 14px; color: var(--accent-black);
line-height: 1.55; word-break: break-word;
}
.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;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.image-workbench .ic-msg-prompt .pt-tags .meta-chip {
padding: 2px 8px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-sm);
}
.image-workbench .ic-msg-prompt .pt-tags .sep { color: var(--black-alpha-24); }
/* 底部 · chat 输入栏 */
.image-workbench .ic-input-wrap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 14px 28px 22px;
background: linear-gradient(to bottom, transparent 0, var(--background-base) 24px);
z-index: 5;
}
.image-workbench .ic-input {
max-width: 1180px; margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
padding: 12px 14px 10px;
display: flex; flex-direction: column; gap: 8px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
transition: border-color var(--t-base);
}
.image-workbench .ic-input:focus-within { border-color: var(--heat-40); }
.image-workbench .ic-input-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.image-workbench .ic-input-top .add-btn {
flex-shrink: 0;
width: 64px; height: 64px;
background: var(--background-lighter);
border: 1px dashed var(--border-faint);
border-radius: var(--r-md);
display: grid; place-items: center;
color: var(--black-alpha-56); cursor: pointer;
transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.image-workbench .ic-input-top .add-btn:hover { border-color: var(--heat-40); color: var(--heat); background: var(--heat-12); }
.image-workbench .ic-input-text {
width: 100%;
border: 0; outline: 0; resize: none;
background: transparent;
font-family: inherit; font-size: 14px; line-height: 1.5;
color: var(--accent-black);
min-height: 44px; max-height: 220px;
padding: 4px 2px;
}
.image-workbench .ic-input-text::placeholder { color: var(--black-alpha-48); }
.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;
color: var(--black-alpha-48); letter-spacing: .02em;
}
.image-workbench .ic-input-bottom .right-meta .val { color: var(--accent-black); }
.image-workbench .ic-input .send-btn {
flex-shrink: 0;
width: 32px; height: 32px;
background: var(--heat); color: var(--accent-white);
border: 0; border-radius: var(--r-md);
cursor: pointer;
display: grid; place-items: center;
transition: opacity 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 svg { width: 15px; height: 15px; }
/* 输入栏参数胶囊(比例 / 风格 / 张数 · 基线 .param + 下拉气泡) */
.image-workbench .ic-param { position: relative; outline: none; }
.image-workbench .ic-param-btn {
display: inline-flex; align-items: center; gap: 4px;
height: 26px; padding: 0 9px;
background: var(--background-lighter);
border: 1px solid transparent;
border-radius: var(--r-pill);
font-size: 11.5px; 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;
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.open .ic-param-btn svg { transform: rotate(180deg); }
.image-workbench .ic-param-menu {
position: absolute; bottom: calc(100% + 6px); left: -2px;
min-width: 140px;
background: var(--surface);
border: 1px solid var(--border-faint);
border-radius: var(--r-md);
box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
padding: 4px;
display: none;
z-index: 30;
}
.image-workbench .ic-param.open .ic-param-menu { display: block; }
.image-workbench .ic-param-menu .mi {
width: 100%;
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
border: 0; border-radius: var(--r-sm);
background: transparent;
font-size: 12.5px; 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; }

721
core/frontend/src/routes/ai-tools.tsx
View File

@ -3,13 +3,17 @@ import {
ArrowLeft,
ArrowRight,
Check,
ChevronDown,
Download,
Grid2X2,
ImagePlus,
List,
MoreHorizontal,
Plus,
Quote,
RefreshCw,
Search,
Sparkles,
WandSparkles
} from "lucide-react";
import type { AITask, Asset, ModelConfig, Product } from "../types";
@ -221,8 +225,6 @@ const MODE_META: Record<
tag: string;
desc: string;
ratio: string;
ratioVar: string;
pickStep?: { num: string; title: string; sub: string; kind: "model" | "platform" };
promptTemplate: (productTitle: string) => string;
}
> = {
@ -231,7 +233,6 @@ const MODE_META: Record<
tag: "[ IMAGE · STUDIO ]",
desc: "自由创作 AI 图片，适用于详情图 / 海报 / 灵感速写。",
ratio: "1:1",
ratioVar: "1 / 1",
promptTemplate: (title) => `${title}，电商高转化视觉，干净背景，商品主体清晰`
},
model: {
@ -239,8 +240,6 @@ const MODE_META: Record<
tag: "[ MODEL · TRY-ON ]",
desc: "选择模特和商品，生成电商模特上身图。",
ratio: "3:4",
ratioVar: "3 / 4",
pickStep: { num: "2", title: "选择模特", sub: "// 可多选 · 一次生成多套", kind: "model" },
promptTemplate: (title) => `${title}，模特上身展示，自然光，真实质感，电商主图`
},
cover: {
@ -248,21 +247,54 @@ const MODE_META: Record<
tag: "[ PLATFORM · KIT ]",
desc: "选择平台模板，一键生成主图 / 封面 / 详情套图。",
ratio: "4:5",
ratioVar: "4 / 5",
pickStep: { num: "2", title: "选择平台", sub: "// 多选平台 · 自动套版", kind: "platform" },
promptTemplate: (title) => `${title}，电商平台套图，统一视觉，主图 + 详情排版`
}
};
const RATIO_OPTIONS = ["1:1", "3:4", "4:5", "9:16", "16:9"];
const COUNT_OPTIONS = ["1", "2", "4"];
const MODEL_RATIO_OPTIONS = ["1:1", "3:4", "9:16"];
const MODEL_COUNT_OPTIONS = ["4", "8", "12"];
const COVER_COUNT_OPTIONS = ["4", "8", "12"];
/* 图片创作 · 空态提示词建议 chip(基线 image-optimize EXAMPLES) */
const IMAGE_SUGGESTIONS = [
"一只穿着宇航服的橘猫，漂浮在霓虹色星云中，赛博朋克风",
"极简北欧风格的茶杯，白底，自然柔光，产品摄影",
"国风水墨海报，主体一只白鹤立于水边，留白构图",
"电影感都市夜景，街道湿漉漉反射霓虹，4K 高清"
];
/* 图片创作 · 风格胶囊(基线 image-optimize STYLES) */
const STYLE_OPTIONS = [
{ id: "auto", label: "默认" },
{ id: "realistic", label: "写实" },
{ id: "cinematic", label: "电影感" },
{ id: "anime", label: "动漫" },
{ id: "oil", label: "油画" },
{ id: "cn-ink", label: "国风水墨" }
];
/* 模特上身图 · 真人模特默认占位卡(基线 model-photo Ava/Luna/Mia/Zoe) */
const FALLBACK_MODELS = [
{ id: "m1", name: "Ava", tag: "亚洲·25岁·清新" },
{ id: "m2", name: "Luna", tag: "亚洲·22岁·学生" },
{ id: "m3", name: "Mia", tag: "混血·28岁·OL" },
{ id: "m4", name: "Zoe", tag: "亚洲·30岁·健身" }
];
/* 平台套图 · 平台卡(基线 platform-cover · logo 配色用 token 化 className) */
const PLATFORM_OPTIONS = [
{ id: "tb", name: "淘宝" },
{ id: "dy", name: "抖音" },
{ id: "xhs", name: "小红书" },
{ id: "pdd", name: "拼多多" },
{ id: "jd", name: "京东" },
{ id: "ks", name: "快手" }
{ id: "dy", name: "抖音电商", logo: "抖" },
{ id: "tb", name: "淘宝", logo: "淘" },
{ id: "tm", name: "天猫", logo: "猫" },
{ id: "jd", name: "京东", logo: "京" },
{ id: "pdd", name: "拼多多", logo: "拼" },
{ id: "xhs", name: "小红书", logo: "红" },
{ id: "ks", name: "快手", logo: "快" },
{ id: "sph", name: "视频号", logo: "视" },
{ id: "amz", name: "亚马逊", logo: "a" },
{ id: "al", name: "1688", logo: "阿" }
];
export function ImageWorkbenchPage({
@ -287,13 +319,17 @@ export function ImageWorkbenchPage({
const product = products.find((item) => item.id === productId) || products[0];
const [prompt, setPrompt] = useState(meta.promptTemplate(products[0]?.title || "商品"));
const [ratio, setRatio] = useState(meta.ratio);
const [count, setCount] = useState("4");
const [style, setStyle] = useState("auto");
const [count, setCount] = useState(mode === "image" ? "4" : "4");
const [pickedIds, setPickedIds] = useState<string[]>([]);
const [generating, setGenerating] = useState(false);
const [results, setResults] = useState<Asset[] | null>(null);
const imageModels = modelConfigs.filter((model) => model.capability.includes("image"));
const modelOptions = useMemo(() => modelConfigs.slice(0, 6), [modelConfigs]);
/* 模特卡数据来源:assets 中 category==='person' 的真资产(显真图 preview_url + name);
无则回退到基线占位模特卡 Ava/Luna/Mia/Zoe */
const personAssets = useMemo(() => assets.filter((item) => item.category === "person"), [assets]);
useEffect(() => {
if (product) setPrompt(meta.promptTemplate(product.title));
@ -322,42 +358,212 @@ export function ImageWorkbenchPage({
}
}
return (
<div className="image-workbench">
{/* 顶栏 · 返回 + mode 标题 + 主操作 */}
<div className="iw-topbar">
<button className="back-pill" type="button" onClick={onBack}>
<ArrowLeft size={14} />
返回
</button>
<div className="iw-title">
<h1>{meta.title}</h1>
<div className="sub">
<span className="mono">{meta.tag}</span>
<span>{meta.desc}</span>
</div>
</div>
<span className="spacer" />
{mode === "model" && navigate && (
<button className="btn" type="button" onClick={() => navigate("modelPhotoDemoA")}>
方案 A
</button>
)}
<button className="btn btn-primary" type="button" onClick={runGenerate} disabled={!canGenerate}>
{generating ? <span className="spinner" aria-hidden /> : <WandSparkles size={13} />}
{generating ? "生成中…" : "生成图片"}
</button>
</div>
const hasResults = !!(results && results.length > 0);
/* ── 共享:生成结果网格(§4.18 .gen-card · 三 mode 统一渲染真图)── */
function renderResultGrid() {
const cols = (results?.length ?? candidateCount) >= 4 ? 4 : 2;
return (
<div
className="gen-images"
style={{ "--cols": cols, "--ratio": ratioVar } as React.CSSProperties}
>
{(hasResults
? results!.map((asset, index) => ({ key: asset.id, index, url: asset.files?.[0]?.preview_url }))
: Array.from({ length: candidateCount }).map((_, index) => ({ key: `ph-${index}`, index, url: undefined as string | undefined }))
).map(({ key, index, url }) => (
<div className={`gen-image ${generating && !url ? "gen" : ""}`} key={key}>
{url ? (
<img className="gen-image-img" src={url} alt={`${meta.title} #${index + 1}`} loading="lazy" />
) : (
<div className="placeholder">
<span className="ph-frame">
{generating ? "生成中…" : `${ratio} · #${index + 1}`}
</span>
</div>
)}
<div className="gen-image-actions">
<button className="gen-img-btn" type="button" title="重跑">
<RefreshCw size={14} />
</button>
<button className="gen-img-btn" type="button" title="下载">
<Download size={14} />
</button>
<button className="gen-img-btn" type="button" title="更多">
<MoreHorizontal size={14} />
</button>
</div>
</div>
))}
</div>
);
}
/* ════════════════════════════════════════════════
mode === "image" → 对话流形态(基线 image-optimize · design.md §4.13)
左会话列表 + 中央 hero/对话流 + 底部 chat 输入栏
════════════════════════════════════════════════ */
if (mode === "image") {
return (
<div className="image-workbench iw-chat">
{/* 左 · 会话列表 */}
<aside className="ic-side">
<div className="ic-side-h">
<button className="back-pill" type="button" onClick={onBack}>
<ArrowLeft size={14} />
返回
</button>
</div>
<button className="ic-new-conv" type="button">
<Plus size={13} />
新对话
</button>
<div className="ic-side-sec">默认</div>
<div className="ic-conv-list">
<div className="ic-conv-item active">
<div className="thumb default">
<ImagePlus size={13} />
</div>
<span className="nm">默认创作</span>
</div>
</div>
<div className="ic-side-sec">最近</div>
<div className="ic-conv-list">
<div className="ic-conv-empty">
还没有最近会话
<br />
<span className="mono">// NO HISTORY</span>
</div>
</div>
</aside>
{/* 右 · 对话流 + 底部输入栏 */}
<section className="ic-main">
<div className="ic-stream">
{hasResults ? (
<div className="ic-stream-inner">
<div className="ic-msg">
<div className="ic-msg-prompt">
<span className="quote">
<Quote size={13} />
</span>
<div className="pt">
<div className="pt-text">{prompt}</div>
<div className="pt-tags">
<span className="meta-chip">{ratio}</span>
<span className="sep">·</span>
<span className="meta-chip">{count} 张</span>
<span className="sep">·</span>
<span className="meta-chip">{STYLE_OPTIONS.find((s) => s.id === style)?.label || "默认"}</span>
</div>
</div>
</div>
<div className="gen-card">{renderResultGrid()}</div>
<div className="gen-card-actions">
<button className="btn btn-sm" type="button">
<RefreshCw size={13} />
重新编辑
</button>
<button className="btn btn-sm" type="button">
<Check size={13} />
全部加入资产库
</button>
<button className="btn btn-sm btn-ghost" type="button" title="更多">
<MoreHorizontal size={13} />
</button>
</div>
</div>
</div>
) : (
<div className="ic-empty">
<div className="ic">
<Sparkles size={28} />
</div>
<div className="badge">// IMAGE · STUDIO</div>
<h2>开始你的创作</h2>
<p>输入想法、剧本或上传参考，和 Agent 一起把灵感变成电商视觉素材。</p>
<div className="examples">
{IMAGE_SUGGESTIONS.map((text) => (
<button className="ex" type="button" key={text} onClick={() => setPrompt(text)}>
{text}
</button>
))}
</div>
</div>
)}
</div>
{/* 底部 · chat 输入栏(textarea + 比例/风格/张数 + 发送) */}
<div className="ic-input-wrap">
<div className="ic-input">
<div className="ic-input-top">
<button className="add-btn" type="button" title="上传参考图">
<Plus size={22} />
</button>
</div>
<textarea
className="ic-input-text"
value={prompt}
onChange={(event) => setPrompt(event.target.value)}
placeholder="输入想法、剧本或上传参考，和 Agent 一起创作"
/>
<div className="ic-input-bottom">
<Pill
label="比例"
value={ratio}
options={RATIO_OPTIONS.map((value) => ({ id: value, label: value }))}
onSelect={setRatio}
/>
<Pill
label="风格"
value={STYLE_OPTIONS.find((s) => s.id === style)?.label || "默认"}
options={STYLE_OPTIONS}
onSelect={setStyle}
/>
<Pill
label="张数"
value={count}
options={COUNT_OPTIONS.map((value) => ({ id: value, label: value }))}
onSelect={setCount}
/>
<span className="right-meta">
预估 <span className="val">¥{(candidateCount * 0.1).toFixed(2)}</span>
</span>
<button className="send-btn" type="button" onClick={runGenerate} disabled={!canGenerate} title="生成">
{generating ? <span className="spinner" aria-hidden /> : <ArrowRight size={15} />}
</button>
</div>
</div>
</div>
</section>
</div>
);
}
/* ════════════════════════════════════════════════
mode === "model" / "cover" → 商品列表栏 + 表单 + 预览
(基线 model-photo / platform-cover)
════════════════════════════════════════════════ */
const ratioOptions = mode === "model" ? MODEL_RATIO_OPTIONS : RATIO_OPTIONS;
const countOptions = mode === "model" ? MODEL_COUNT_OPTIONS : COVER_COUNT_OPTIONS;
return (
<div className="image-workbench iw-prod">
<div className="iw-layout">
{/* 最左 · 商品空间 */}
<aside className="iw-prod-space">
<div className="iw-ps-h">
<span className="mono">商品空间</span>
<div className="iw-side-top">
<button className="back-pill" type="button" onClick={onBack}>
<ArrowLeft size={14} />
返回
</button>
</div>
<div className="iw-ps-search">
<Search size={13} />
<input placeholder="搜索商品" />
<input placeholder="搜索商品 / 分类" />
</div>
<div className="iw-list-h">
<span className="mono">// 商品空间</span>
</div>
<div className="iw-ps-list">
{products.length === 0 ? (
@ -387,211 +593,258 @@ export function ImageWorkbenchPage({
</div>
</aside>
{/* 中 · 参数表单 */}
<section className="iw-form">
<div className="iw-step">
<div className="iw-step-h">
<span className="num">1</span>
<span className="title">商品与提示词</span>
{/* 主区 · 头部 + 参数/结果双栏 */}
<section className="iw-main">
<div className="iw-main-h">
<div className="cur-title">
<span className="crumb">// 商品空间</span>
<span className={`nm ${product ? "" : "placeholder"}`}>
{product?.title || "未选择 · 请在左侧商品空间选一个"}
</span>
</div>
<div className="iw-sub">
<div className="iw-sub-h">// 当前商品</div>
<div className="field" style={{ marginBottom: 0 }}>
<div className="iw-pv-line" style={{ fontSize: 13, color: "var(--accent-black)" }}>
{product?.title || "未选择商品"}
</div>
</div>
</div>
<div className="iw-sub">
<div className="iw-sub-h">// 提示词</div>
<textarea
className="textarea"
value={prompt}
onChange={(event) => setPrompt(event.target.value)}
placeholder="描述你想要的画面…"
/>
</div>
</div>
{meta.pickStep && (
<div className="iw-step">
<div className="iw-step-h">
<span className="num">{meta.pickStep.num}</span>
<span className="title">{meta.pickStep.title}</span>
</div>
<div className="iw-sub-h">{meta.pickStep.sub}</div>
{meta.pickStep.kind === "model" ? (
<div className="iw-pick-grid">
{(modelOptions.length ? modelOptions : products.slice(0, 4)).map((item) => {
const id = "id" in item ? item.id : "";
const label = "display_name" in item ? item.display_name : (item as Product).title;
return (
<button
type="button"
key={id}
className={`iw-pick-card ${pickedIds.includes(id) ? "selected" : ""}`}
onClick={() => togglePick(id)}
>
<div className="placeholder m-thumb">
<span className="ph-frame">3:4</span>
</div>
<div className="m-name">{label}</div>
<div className="m-meta">// 模特</div>
<span className="m-check">
<Check size={11} />
</span>
</button>
);
})}
</div>
) : (
<div className="iw-pick-grid platforms">
{PLATFORM_OPTIONS.map((item) => (
<button
type="button"
key={item.id}
className={`iw-pick-card platforms-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
onClick={() => togglePick(item.id)}
>
<div className="m-name">{item.name}</div>
<span className="m-check">
<Check size={11} />
</span>
</button>
))}
</div>
)}
</div>
)}
<div className="iw-step">
<div className="iw-step-h">
<span className="num">{meta.pickStep ? "3" : "2"}</span>
<span className="title">生成参数</span>
</div>
<div className="iw-sub">
<div className="iw-sub-h">// 比例</div>
<div className="pill-row">
{RATIO_OPTIONS.map((value) => (
<button
type="button"
key={value}
className={`opt ${ratio === value ? "active" : ""}`}
onClick={() => setRatio(value)}
>
{value}
</button>
))}
</div>
</div>
<div className="iw-sub">
<div className="iw-sub-h">// 张数</div>
<div className="pill-row">
{COUNT_OPTIONS.map((value) => (
<button
type="button"
key={value}
className={`opt ${count === value ? "active" : ""}`}
onClick={() => setCount(value)}
>
{value}
</button>
))}
</div>
</div>
</div>
<div className="iw-cta">
<button className="btn btn-primary" type="button" onClick={runGenerate} disabled={!canGenerate}>
{generating ? <span className="spinner" aria-hidden /> : <WandSparkles size={13} />}
{generating ? "生成中…" : "立即生成"}
<span className="spacer" />
<button className="search-btn" type="button" title="搜索">
<Search size={14} />
</button>
<div className="iw-cta-hint">
// {imageModels[0]?.display_name || "Volcano Image"} · 预估 {meta.title}
</div>
</div>
</section>
{/* 右 · 结果预览 */}
<section className="iw-preview">
<div className="iw-pv-h">
<Quote className="quote-icon" />
<div className="pv-meta">
<b>{ratio}</b> · {count} 张 · {imageModels[0]?.display_name || "Volcano Image"}
</div>
<div className="pv-line">{prompt}</div>
{mode === "model" && navigate && (
<button className="tb-chip" type="button" onClick={() => navigate("modelPhotoDemoA")}>
方案 A
</button>
)}
</div>
<div className="gen-card">
<div className="gen-meta">
<span>Airshelf v2</span>
<span className="m-sep">|</span>
<span>{ratio}</span>
<span className="m-sep">|</span>
<span>{product?.title || meta.title}</span>
</div>
<div
className="gen-images"
style={{ "--cols": (results?.length ?? candidateCount) >= 4 ? 4 : 2, "--ratio": ratioVar } as React.CSSProperties}
>
{(results && results.length > 0
? results.map((asset, index) => ({ key: asset.id, index, url: asset.files?.[0]?.preview_url }))
: Array.from({ length: candidateCount }).map((_, index) => ({ key: `ph-${index}`, index, url: undefined }))
).map(({ key, index, url }) => (
<div className="gen-image" key={key}>
{url ? (
<img className="gen-image-img" src={url} alt={`${meta.title} #${index + 1}`} loading="lazy" />
) : (
<div className="placeholder">
<span className="ph-frame">
{ratio} · #{index + 1}
</span>
</div>
)}
<div className="gen-image-actions">
<button className="gen-img-btn" type="button" title="重跑">
<RefreshCw size={14} />
</button>
<button className="gen-img-btn" type="button" title="下载">
<Download size={14} />
</button>
<button className="gen-img-btn" type="button" title="更多">
<MoreHorizontal size={14} />
</button>
<div className="iw-main-body">
{/* 左 · 参数表单 */}
<div className="iw-form">
{mode === "model" ? (
<div className="iw-step">
<div className="iw-step-h">
<span className="num">1</span>
<span className="title">选择模特</span>
<span className="right">全部模特 →</span>
</div>
<div className="model-grid">
{personAssets.length > 0
? personAssets.slice(0, 6).map((item) => {
const url = item.files?.[0]?.preview_url;
return (
<button
type="button"
key={item.id}
className={`model-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
onClick={() => togglePick(item.id)}
>
<span className="m-check">
<Check size={11} />
</span>
<div className="m-thumb">
{url ? (
<img className="m-thumb-img" src={url} alt={item.name} loading="lazy" />
) : (
<div className="placeholder">
<span className="ph-frame">{item.name.slice(0, 4)}</span>
</div>
)}
</div>
<div className="m-name">{item.name}</div>
<div className="m-tag">// 真人模特</div>
</button>
);
})
: FALLBACK_MODELS.map((item) => (
<button
type="button"
key={item.id}
className={`model-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
onClick={() => togglePick(item.id)}
>
<span className="m-check">
<Check size={11} />
</span>
<div className="placeholder m-thumb">
<span className="ph-frame">{item.name}</span>
</div>
<div className="m-name">{item.name}</div>
<div className="m-tag">{item.tag}</div>
</button>
))}
</div>
</div>
))}
</div>
<div className="gen-card-actions">
<button className="btn btn-sm" type="button">
<RefreshCw size={13} />
重跑
</button>
<button className="btn btn-sm" type="button">
<Check size={13} />
采用并入资产库
</button>
<button className="btn btn-sm btn-ghost" type="button" title="更多">
<MoreHorizontal size={13} />
</button>
</div>
</div>
) : (
<div className="iw-step">
<div className="iw-step-h">
<span className="num">1</span>
<span className="title">选择平台</span>
</div>
<div className="platform-grid">
{PLATFORM_OPTIONS.map((item) => (
<button
type="button"
key={item.id}
className={`platform-card ${pickedIds.includes(item.id) ? "selected" : ""}`}
onClick={() => togglePick(item.id)}
>
<span className="p-check" />
<span className={`p-logo p-logo-${item.id}`}>{item.logo}</span>
<span className="p-name">{item.name}</span>
</button>
))}
</div>
</div>
)}
{assets.length === 0 && (
<div className="iw-pv-empty">
<div className="mono">// NO RESULT YET</div>
<div className="title">还没有生成结果</div>
<div className="hint">
选择商品、填写提示词后点击 <b>立即生成</b>，结果会以候选卡片形式展示在这里。
<div className="iw-step">
<div className="iw-step-h">
<span className="num">2</span>
<span className="title">生成设置</span>
</div>
<div className="iw-sub">
<div className="iw-sub-h">// 生成数量{mode === "model" ? " (每模特)" : ""}</div>
<div className="pill-row">
{countOptions.map((value) => (
<button
type="button"
key={value}
className={`opt ${count === value ? "active" : ""}`}
onClick={() => setCount(value)}
>
{value} 张
</button>
))}
</div>
</div>
{mode === "model" && (
<div className="iw-sub">
<div className="iw-sub-h">// 图片比例</div>
<div className="pill-row">
{ratioOptions.map((value) => (
<button
type="button"
key={value}
className={`opt ${ratio === value ? "active" : ""}`}
onClick={() => setRatio(value)}
>
{value}
</button>
))}
</div>
</div>
)}
</div>
<div className="iw-cta">
<button className="btn btn-primary" type="button" onClick={runGenerate} disabled={!canGenerate}>
{generating ? <span className="spinner" aria-hidden /> : <WandSparkles size={13} />}
{generating ? "生成中…" : `立即生成 (预估 ¥${(candidateCount * (mode === "model" ? 0.3 : 0.5)).toFixed(2)})`}
</button>
<div className="iw-cta-hint">// 采用即扣费并入对应商品 AI 素材 · 未采用不扣</div>
</div>
</div>
)}
{/* 右 · 结果预览 */}
<div className="iw-preview">
{!hasResults && !generating ? (
<div className="iw-pv-empty">
<div className="mono">// EMPTY STATE</div>
<div className="title">还没有生成结果</div>
<div className="hint">
先选商品、选{mode === "model" ? "模特" : "平台"}，点击 <b>立即生成</b> 后，效果图会出现在这里
</div>
</div>
) : (
<>
<div className="iw-pv-h">
<Quote className="quote-icon" />
<div className="pv-meta">
<b>{count} 张</b>
{mode === "model" ? ` · ${ratio}` : ""}
</div>
<div className="pv-line">
<span className="k">商品</span>
<span className="v">{product?.title || "未选择"}</span>
</div>
{mode === "cover" && (
<div className="pv-line">
<span className="k">平台</span>
<span className="v">
{pickedIds.length
? PLATFORM_OPTIONS.filter((p) => pickedIds.includes(p.id))
.map((p) => p.name)
.join("、")
: "未选择"}
</span>
</div>
)}
</div>
<div className="gen-card">{renderResultGrid()}</div>
<div className="gen-card-actions">
<button className="btn btn-sm" type="button">
<RefreshCw size={13} />
重跑
</button>
<button className="btn btn-sm" type="button">
<Check size={13} />
采用并入资产库
</button>
<button className="btn btn-sm btn-ghost" type="button" title="更多">
<MoreHorizontal size={13} />
</button>
</div>
</>
)}
</div>
</div>
</section>
</div>
</div>
);
}
/* 底部 chat 输入栏 · 参数胶囊(基线 image-optimize .param + 下拉气泡) */
function Pill({
label,
value,
options,
onSelect
}: {
label: string;
value: string;
options: Array<{ id: string; label: string }>;
onSelect: (id: string) => void;
}) {
const [open, setOpen] = useState(false);
return (
<div
className={`ic-param ${open ? "open" : ""}`}
tabIndex={0}
onBlur={() => setOpen(false)}
>
<button className="ic-param-btn" type="button" onClick={() => setOpen((prev) => !prev)}>
<span className="lbl-mono">{label}</span>
<span>{value}</span>
<ChevronDown size={10} />
</button>
<div className="ic-param-menu">
{options.map((opt) => (
<button
type="button"
key={opt.id}
className={`mi ${opt.label === value || opt.id === value ? "selected" : ""}`}
onMouseDown={(event) => {
event.preventDefault();
onSelect(opt.id);
setOpen(false);
}}
>
{opt.label}
<Check className="mi-check" size={12} />
</button>
))}
</div>
</div>
);
}
export function ModelPhotoDemoPage({ variant, products, onBack }: { variant: "A" | "B"; products: Product[]; onBack: () => void }) {
return <><div className="page-head"><div><h1>模特图方案 {variant}</h1><div className="sub"><span className="mono">// model-photo-demo-{variant.toLowerCase()}</span> · 原型对比页补齐</div></div><div className="actions"><button className="btn" type="button" onClick={onBack}><ArrowLeft size={13} />返回模特图</button></div></div><div className={`demo-layout demo-${variant.toLowerCase()}`}><aside className="tool-rail"><div className="rail-h">商品空间</div>{products.slice(0, 6).map((product) => <button className="rail-product" type="button" key={product.id}><div className="placeholder"><span className="ph-frame">{product.title.slice(0, 4)}</span></div><span>{product.title}</span></button>)}</aside><section className="pane"><div className="pane-h"><strong>方案 {variant}</strong><span className="spacer" /><span className="mono muted-2">DEMO</span></div><div className="result-board dense">{Array.from({ length: 6 }).map((_, index) => <div className="result-tile" key={index}><div className="placeholder"><span className="ph-frame">MODEL {index + 1}</span></div></div>)}</div></section></div></>;
}

5
core/frontend/src/routes/pipeline.tsx
View File

@ -62,6 +62,7 @@ export function PipelinePage(props: {
assets: Asset[];
billing: BillingSummary | null;
notice: Notice | null;
unreadCount: number;
avatarChar: string;
logout: () => void;
onRefresh: () => void;
@ -77,7 +78,7 @@ export function PipelinePage(props: {
onSubmitExport: () => void;
}) {
const {
project, loading, navigate, user, team, products, projects, assets, billing, notice, avatarChar, logout,
project, loading, navigate, user, team, products, projects, assets, billing, notice, unreadCount, avatarChar, logout,
onGenerateScript, onGenerateBaseAsset, onGenerateStoryboard, onSkipStoryboard,
onSubmitVideo, onSubmitAllVideos, onSubmitExport
} = props;
@ -168,7 +169,7 @@ export function PipelinePage(props: {
</span>
<button className="icon-btn" type="button" onClick={() => navigate("messages")} title="消息中心">
<IconKitSvg name="bell" />
<span className="count-noti">12</span>
{unreadCount > 0 && <span className="count-noti">{unreadCount}</span>}
</button>
<div className="topbar-avatar" onDoubleClick={logout} title="账户(双击退出)">
<span>{avatarChar}</span>