From 2242241c3bd033c19da96632589db7b239ce96e7 Mon Sep 17 00:00:00 2001 From: seaislee1209 Date: Fri, 5 Jun 2026 17:06:30 +0800 Subject: [PATCH] feat(core/frontend): ai-tools per-mode layouts (image=chat-stream / model=person picker / cover=platform) + pipeline real unread bell MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- core/frontend/src/App.tsx | 1 + core/frontend/src/ai-tools-page.css | 532 +++++++++++++++++-- core/frontend/src/routes/ai-tools.tsx | 721 +++++++++++++++++--------- core/frontend/src/routes/pipeline.tsx | 5 +- 4 files changed, 974 insertions(+), 285 deletions(-) diff --git a/core/frontend/src/App.tsx b/core/frontend/src/App.tsx index c3ca83f..a149ee8 100644 --- a/core/frontend/src/App.tsx +++ b/core/frontend/src/App.tsx @@ -463,6 +463,7 @@ export function App() { assets={assets} billing={billing} notice={notice} + unreadCount={unreadCount} avatarChar={avatarChar} logout={logout} onRefresh={refreshProjectDetail} diff --git a/core/frontend/src/ai-tools-page.css b/core/frontend/src/ai-tools-page.css index 1f20967..c0eb4a1 100644 --- a/core/frontend/src/ai-tools-page.css +++ b/core/frontend/src/ai-tools-page.css @@ -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; } diff --git a/core/frontend/src/routes/ai-tools.tsx b/core/frontend/src/routes/ai-tools.tsx index d84668b..f893c20 100644 --- a/core/frontend/src/routes/ai-tools.tsx +++ b/core/frontend/src/routes/ai-tools.tsx @@ -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([]); const [generating, setGenerating] = useState(false); const [results, setResults] = useState(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 ( -
- {/* 顶栏 · 返回 + mode 标题 + 主操作 */} -
- -
-

{meta.title}

-
- {meta.tag} - {meta.desc} -
-
- - {mode === "model" && navigate && ( - - )} - -
+ const hasResults = !!(results && results.length > 0); + /* ── 共享:生成结果网格(§4.18 .gen-card · 三 mode 统一渲染真图)── */ + function renderResultGrid() { + const cols = (results?.length ?? candidateCount) >= 4 ? 4 : 2; + return ( +
+ {(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 }) => ( +
+ {url ? ( + {`${meta.title} + ) : ( +
+ + {generating ? "生成中…" : `${ratio} · #${index + 1}`} + +
+ )} +
+ + + +
+
+ ))} +
+ ); + } + + /* ════════════════════════════════════════════════ + mode === "image" → 对话流形态(基线 image-optimize · design.md §4.13) + 左会话列表 + 中央 hero/对话流 + 底部 chat 输入栏 + ════════════════════════════════════════════════ */ + if (mode === "image") { + return ( +
+ {/* 左 · 会话列表 */} + + + {/* 右 · 对话流 + 底部输入栏 */} +
+
+ {hasResults ? ( +
+
+
+ + + +
+
{prompt}
+
+ {ratio} + · + {count} 张 + · + {STYLE_OPTIONS.find((s) => s.id === style)?.label || "默认"} +
+
+
+
{renderResultGrid()}
+
+ + + +
+
+
+ ) : ( +
+
+ +
+
// IMAGE · STUDIO
+

开始你的创作

+

输入想法、剧本或上传参考，和 Agent 一起把灵感变成电商视觉素材。

+
+ {IMAGE_SUGGESTIONS.map((text) => ( + + ))} +
+
+ )} +
+ + {/* 底部 · chat 输入栏(textarea + 比例/风格/张数 + 发送) */} +
+
+
+ +
+