diff --git a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md index fa38fb23c..a8d98456b 100644 --- a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md +++ b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md @@ -124,7 +124,7 @@ Tab： - `/creation/` 现有玩法工作台路由保持原有 stage 映射。 - 桌面端点击“创作”时调用 `pushAppHistoryPath('/creation')`。 - 桌面端原“草稿”入口改为“项目”，点击 `pushAppHistoryPath('/project')`。 -- 桌面端 `/project` 必须复用 `/creation` 的平台桌面 chrome，保留左侧完整导航栏和右侧顶部栏；`ProjectGalleryView` 只替换右侧主内容区，不能作为脱离导航的独立全屏页渲染，避免用户进入项目页后无法返回或切换页签。 +- 桌面端平台一级页统一复用 `/creation` 的平台桌面 chrome，保留左侧完整导航栏和右侧顶部栏；推荐、发现、我的、`/creation` 与 `/project` 只替换右侧主内容区，不能作为脱离导航的独立全屏页渲染，避免用户进入任一页后无法返回或切换页签。 - 桌面端从 `/creation` 切换到 `/project` 后，“项目”页签进入选中态，“创作”页签必须恢复为普通默认态，不保留创作主页的主按钮强调表现。 - `/project` 项目页头部必须提供 `返回主站` 按钮，点击后切回平台首页 `/`，行为与桌面侧栏切回推荐页保持一致。 - 移动端导航列表不展示“创作”和“项目”。 @@ -146,7 +146,7 @@ Tab： - 实现首屏主视觉、九大功能区、最近项目区和陶泥儿精选素材瀑布流。 - 桌面端复用现有平台壳层，保留上方栏和左侧导航栏。 - 主页整体采用浅色布局，避免外站品牌文案。 -- 视觉排版参考陶土质感创作工具工作台：首屏标题居中、主按钮与社区按钮使用大号圆角胶囊尺寸，九大创作工具以 3 列大卡片展示，卡片左侧保留大号陶土感图标区域，右侧展示原有标题与描述；`/creation` 场景下的平台顶部栏和左侧导航压平成单层工作台 chrome，避免外框套内框；桌面端页面结构必须先分为“左侧完整栏 / 右侧内容区”，左侧完整栏同时包含顶部品牌 Logo 和下方导航页签，右侧内容区再拆为顶部搜索、钱包、账号栏与下方主屏，不能用顶部栏的第一列假装左侧品牌区；左侧栏采用紧凑但保留图标和文字的导航胶囊，顶部搜索栏、泥点入口和账号入口都保持精简宽度，提升创作主页和项目页的工具感与精致度；只调整样式与布局，不改文案、搜索、登录、导航、项目创建、社区弹层、最近项目、精选素材 Tab 或数据读取逻辑。 +- 视觉排版参考陶土质感创作工具工作台：首屏标题居中、主按钮与社区按钮使用大号圆角胶囊尺寸，九大创作工具以 3 列大卡片展示，卡片左侧保留大号陶土感图标区域，右侧展示原有标题与描述；桌面平台一级页的顶部栏和左侧导航统一压平成单层工作台 chrome，避免外框套内框；桌面端页面结构必须先分为“左侧完整栏 / 右侧内容区”，左侧完整栏同时包含顶部品牌 Logo 和下方导航页签，右侧内容区再拆为顶部搜索、钱包、账号栏与下方主屏，不能用顶部栏的第一列假装左侧品牌区；左侧栏采用紧凑但保留图标和文字的导航胶囊，顶部搜索栏、泥点入口和账号入口都保持精简宽度，提升推荐、发现、我的、创作主页和项目页的工具感与精致度；只调整样式与布局，不改文案、搜索、登录、导航、项目创建、社区弹层、最近项目、精选素材 Tab 或数据读取逻辑。 - 背景、顶部品牌小陶偶、左侧导航、按钮和九大创作工具图标使用 `gpt-image-2` / image2 生成资源，统一保存在 `public/creation-home/`；资源只作为装饰图标或背景纹理接入，不包含图内文字，不替换或隐藏现有 UI 文案和交互。 - 社群入口复用现有玩家社区弹层，点击后必须停留在 `/creation`。 - 不在 UI 中放规则说明、实现说明或“暂不实装”提示。 diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts index 5db05a110..d8ec39135 100644 --- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts +++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts @@ -996,19 +996,24 @@ export function useImageCanvasGenerationSubmissionWorkflow({ submissionPlan.input.kind === 'publication-material' ? await normalizePublicationReferenceImages(submissionPlan.input) : submissionPlan.input; + const resultTitle = + submissionPlan.result.title ?? + `生成图片 ${layerCounterRef.current + 1}`; + const canvasCompletionPlaceholder = + getGeneratingDialogPlaceholder(dialog); const generated = await generateEditorImage({ ...imageGenerationInput, projectId, assetKind: submissionPlan.result.assetKind, generationInputs: submissionPlan.result.generationInputs, assetFolderId, - assetLabel: submissionPlan.result.title, - ...(canvasDialog && projectId + assetLabel: resultTitle, + ...(canvasDialog && projectId && canvasCompletionPlaceholder ? { canvasCompletion: { dialogId: canvasDialog.id, - title: submissionPlan.result.title, - placeholder: getGeneratingDialogPlaceholder(dialog), + title: resultTitle, + placeholder: canvasCompletionPlaceholder, }, } : {}), @@ -1037,9 +1042,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({ return; } addGeneratedResultLayer(generated, { - frame: getGeneratingDialogPlaceholder(dialog), + frame: canvasCompletionPlaceholder, assetKind: submissionPlan.result.assetKind, - title: submissionPlan.result.title, + title: resultTitle, dialogId: canvasDialog?.id, generationInputs: submissionPlan.result.generationInputs, }); diff --git a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx index b5ef1a8d5..e3401d22c 100644 --- a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx +++ b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx @@ -3819,6 +3819,32 @@ test('desktop nav opens creation home and project gallery from dedicated entries expect(onOpenProjects).toHaveBeenCalledTimes(1); }); +test('desktop recommend page reuses compact workbench chrome', () => { + const { container } = renderLoggedInHomeView({ + activeTab: 'home', + isDesktopLayout: true, + }); + + const shell = container.querySelector('.platform-desktop-shell'); + expect(shell).toBeTruthy(); + expect(shell?.className).toContain('platform-desktop-shell--workbench'); + + const leftbar = container.querySelector('.platform-desktop-leftbar'); + const topbar = container.querySelector('.platform-desktop-topbar'); + expect(leftbar).toBeTruthy(); + expect(topbar).toBeTruthy(); + expect(leftbar?.querySelector('.creation-home-brand-lockup')).toBeTruthy(); + expect(topbar?.querySelector('.creation-home-brand-lockup')).toBeNull(); + expect( + within(leftbar as HTMLElement).getByRole('button', { name: '推荐' }), + ).toBeTruthy(); + expect( + within(topbar as HTMLElement).getByPlaceholderText( + '搜索作品号、名称、作者、描述', + ), + ).toBeTruthy(); +}); + test('logged in saves tab shows loading state while fetching my entries', () => { renderLoggedInHomeView({ activeTab: 'saves', diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx index 921d33a07..005197429 100644 --- a/src/components/rpg-entry/RpgEntryHomeView.tsx +++ b/src/components/rpg-entry/RpgEntryHomeView.tsx @@ -4992,7 +4992,7 @@ export function RpgEntryHomeView({ ); const desktopTopbarActions: ReactNode = (
- {isAuthenticated && (activeTab === 'create' || activeTab === 'saves') ? ( + {isAuthenticated ? (
-
- {allowHiddenActiveTab ? ( -
- +
+
+ -
-
-
- {desktopSearchBar} -
- - {desktopTopbarActions} -
- -
- {tabPanels} -
-
-
- ) : ( - <> +
- {desktopBrandLockup} {desktopSearchBar}
{desktopTopbarActions}
-
- {desktopRailNav} - -
- {tabPanels} -
+
+ {tabPanels}
- - )} +
+
diff --git a/src/index.css b/src/index.css index d8b891884..995366226 100644 --- a/src/index.css +++ b/src/index.css @@ -11086,7 +11086,7 @@ button.image-canvas-editor__reference-chip:disabled { display: none; } -.creation-home-stage .platform-desktop-shell { +.platform-desktop-shell--workbench { --creation-home-sidebar-width: 10rem; border-color: rgba(221, 191, 166, 0.9); border-radius: 1.85rem; @@ -11098,22 +11098,22 @@ button.image-canvas-editor__reference-chip:disabled { box-shadow: 0 24px 58px rgba(112, 57, 30, 0.08); } -.creation-home-stage .platform-desktop-shell::before { +.platform-desktop-shell--workbench::before { display: none; } -.creation-home-stage .platform-desktop-shell::after { +.platform-desktop-shell--workbench::after { display: none; } -.creation-home-stage .platform-desktop-layout { +.platform-desktop-shell--workbench .platform-desktop-layout { position: relative; z-index: 1; width: 100%; height: 100%; } -.creation-home-stage .platform-desktop-leftbar { +.platform-desktop-shell--workbench .platform-desktop-leftbar { width: var(--creation-home-sidebar-width); min-height: 0; border-right: 1px solid rgba(219, 190, 166, 0.72); @@ -11121,11 +11121,11 @@ button.image-canvas-editor__reference-chip:disabled { padding: 0.86rem 0.5rem 0.96rem; } -.creation-home-stage .platform-desktop-main { +.platform-desktop-shell--workbench .platform-desktop-main { min-height: 0; } -.creation-home-stage .platform-desktop-topbar { +.platform-desktop-shell--workbench .platform-desktop-topbar { display: flex; gap: 0.58rem; min-height: 3.62rem; @@ -11138,28 +11138,28 @@ button.image-canvas-editor__reference-chip:disabled { backdrop-filter: none; } -.creation-home-stage .platform-desktop-topbar::before { +.platform-desktop-shell--workbench .platform-desktop-topbar::before { display: none; } -.creation-home-stage .platform-desktop-topbar__brand-search { +.platform-desktop-shell--workbench .platform-desktop-topbar__brand-search { gap: 0.58rem !important; justify-content: flex-start; padding-left: clamp(3.1rem, 5.8vw, 8.2rem); } -.creation-home-stage .platform-brand-logo { +.platform-desktop-shell--workbench .platform-brand-logo { align-self: center; } -.creation-home-stage .creation-home-brand-lockup { +.platform-desktop-shell--workbench .creation-home-brand-lockup { align-self: flex-start; gap: 0.42rem; min-height: 3.28rem; padding-left: 0.28rem; } -.creation-home-stage .creation-home-brand-lockup__art { +.platform-desktop-shell--workbench .creation-home-brand-lockup__art { display: block; width: 2.58rem; height: 2.58rem; @@ -11171,30 +11171,30 @@ button.image-canvas-editor__reference-chip:disabled { mix-blend-mode: multiply; } -.creation-home-stage .platform-brand-logo__title { +.platform-desktop-shell--workbench .platform-brand-logo__title { font-size: 1.38rem; color: #4a220f; } -.creation-home-stage .platform-brand-logo__subtitle { +.platform-desktop-shell--workbench .platform-brand-logo__subtitle { color: #9b5a35; font-size: 0.46rem; } -.creation-home-stage +.platform-desktop-shell--workbench .platform-desktop-topbar__brand-search > .platform-desktop-search { width: 100%; max-width: 20rem !important; } -.creation-home-stage .platform-desktop-topbar__actions { +.platform-desktop-shell--workbench .platform-desktop-topbar__actions { align-self: center; gap: 0.5rem !important; margin-left: auto; } -.creation-home-stage .platform-desktop-search { +.platform-desktop-shell--workbench .platform-desktop-search { position: relative; box-sizing: border-box; min-height: 0; @@ -11204,7 +11204,7 @@ button.image-canvas-editor__reference-chip:disabled { box-shadow: none; } -.creation-home-stage +.platform-desktop-shell--workbench .platform-desktop-topbar__brand-search > .platform-desktop-search { padding-block: 0 !important; @@ -11212,14 +11212,14 @@ button.image-canvas-editor__reference-chip:disabled { gap: 0.48rem !important; } -.creation-home-stage .platform-desktop-create-wallet-chip { +.platform-desktop-shell--workbench .platform-desktop-create-wallet-chip { position: relative; min-height: 2.28rem; border-radius: 999px !important; padding-inline: 0.42rem 0.58rem !important; } -.creation-home-stage .platform-desktop-create-wallet-chip::after { +.platform-desktop-shell--workbench .platform-desktop-create-wallet-chip::after { position: absolute; top: 50%; right: -0.52rem; @@ -11230,7 +11230,7 @@ button.image-canvas-editor__reference-chip:disabled { transform: translateY(-50%); } -.creation-home-stage .creation-home-topbar-art { +.platform-desktop-shell--workbench .creation-home-topbar-art { display: block; flex: 0 0 auto; object-fit: cover; @@ -11239,29 +11239,29 @@ button.image-canvas-editor__reference-chip:disabled { mix-blend-mode: multiply; } -.creation-home-stage .creation-home-topbar-art--search { +.platform-desktop-shell--workbench .creation-home-topbar-art--search { width: 1.34rem; height: 1.34rem; margin: -0.16rem -0.26rem -0.16rem -0.34rem; } -.creation-home-stage .platform-desktop-search > svg { +.platform-desktop-shell--workbench .platform-desktop-search > svg { display: none; } -.creation-home-stage .creation-home-topbar-art--wallet { +.platform-desktop-shell--workbench .creation-home-topbar-art--wallet { width: 1.32rem; height: 1.32rem; margin: -0.14rem -0.18rem -0.14rem -0.3rem; } -.creation-home-stage +.platform-desktop-shell--workbench .platform-desktop-create-wallet-chip .platform-icon-badge { display: none; } -.creation-home-stage .platform-desktop-topbar button.platform-desktop-search { +.platform-desktop-shell--workbench .platform-desktop-topbar button.platform-desktop-search { width: auto; max-width: none !important; min-width: 7.35rem; @@ -11272,17 +11272,17 @@ button.image-canvas-editor__reference-chip:disabled { gap: 0.38rem !important; } -.creation-home-stage .platform-desktop-topbar button.platform-desktop-search:hover { +.platform-desktop-shell--workbench .platform-desktop-topbar button.platform-desktop-search:hover { border-color: rgba(214, 184, 159, 0.52); background: rgba(255, 250, 244, 0.56); } -.creation-home-stage .platform-desktop-topbar button.platform-desktop-search > span:first-child { +.platform-desktop-shell--workbench .platform-desktop-topbar button.platform-desktop-search > span:first-child { width: 2.06rem; height: 2.06rem; } -.creation-home-stage .platform-desktop-rail { +.platform-desktop-shell--workbench .platform-desktop-rail { align-self: flex-start; width: 7.05rem; margin: 1.12rem auto 0; @@ -11295,7 +11295,7 @@ button.image-canvas-editor__reference-chip:disabled { 0 18px 34px rgba(112, 57, 30, 0.08); } -.creation-home-stage .platform-desktop-rail__button { +.platform-desktop-shell--workbench .platform-desktop-rail__button { min-height: 2.88rem; display: flex; flex-direction: row; @@ -11306,11 +11306,11 @@ button.image-canvas-editor__reference-chip:disabled { text-align: left; } -.creation-home-stage .platform-desktop-rail__button--primary { +.platform-desktop-shell--workbench .platform-desktop-rail__button--primary { min-height: 2.88rem; } -.creation-home-stage .platform-desktop-rail__icon-shell { +.platform-desktop-shell--workbench .platform-desktop-rail__icon-shell { width: 2.08rem; height: 2.08rem; flex: 0 0 auto; @@ -11319,7 +11319,7 @@ button.image-canvas-editor__reference-chip:disabled { box-shadow: none; } -.creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__icon-shell { +.platform-desktop-shell--workbench .platform-desktop-rail__button--active .platform-desktop-rail__icon-shell { background: radial-gradient(circle at 35% 22%, rgba(255, 196, 133, 0.72), transparent 42%), linear-gradient(180deg, #df884b 0%, #c6652a 100%); @@ -11328,11 +11328,11 @@ button.image-canvas-editor__reference-chip:disabled { inset 0 1px 0 rgba(255, 255, 255, 0.5); } -.creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__icon { +.platform-desktop-shell--workbench .platform-desktop-rail__button--active .platform-desktop-rail__icon { color: #fffaf3; } -.creation-home-stage .creation-home-nav-art { +.platform-desktop-shell--workbench .creation-home-nav-art { display: block; width: 1.62rem; height: 1.62rem; @@ -11342,7 +11342,7 @@ button.image-canvas-editor__reference-chip:disabled { mix-blend-mode: multiply; } -.creation-home-stage +.platform-desktop-shell--workbench .platform-desktop-rail__button--active .creation-home-nav-art { filter: @@ -11353,38 +11353,38 @@ button.image-canvas-editor__reference-chip:disabled { mix-blend-mode: screen; } -.creation-home-stage .platform-desktop-rail__icon { +.platform-desktop-shell--workbench .platform-desktop-rail__icon { display: none; } -.creation-home-stage .platform-desktop-rail__button--active { +.platform-desktop-shell--workbench .platform-desktop-rail__button--active { border-color: transparent; background: transparent; box-shadow: none; } -.creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__label { +.platform-desktop-shell--workbench .platform-desktop-rail__button--active .platform-desktop-rail__label { color: #c15f28; } -.creation-home-stage .platform-desktop-rail__label { +.platform-desktop-shell--workbench .platform-desktop-rail__label { font-size: 0.78rem; font-weight: 820; letter-spacing: 0; } -.creation-home-stage .platform-tab-panel-stack { +.platform-desktop-shell--workbench .platform-tab-panel-stack { min-height: 0; background: transparent; } -.creation-home-stage .platform-tab-panel { +.platform-desktop-shell--workbench .platform-tab-panel { height: 100%; overflow: auto; padding-right: 0; } -.creation-home-stage .creation-landing { +.platform-desktop-shell--workbench .creation-landing { background: transparent; } diff --git a/src/index.test.ts b/src/index.test.ts index ac3c42f19..5e3ff9310 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -35,16 +35,16 @@ describe('index stylesheet unread dots', () => { const css = readIndexCss(); expect(css).not.toContain( - '.creation-home-stage .platform-desktop-rail__button--primary .platform-desktop-rail__icon-shell,\n.creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__icon-shell', + '.platform-desktop-shell--workbench .platform-desktop-rail__button--primary .platform-desktop-rail__icon-shell,\n.platform-desktop-shell--workbench .platform-desktop-rail__button--active .platform-desktop-rail__icon-shell', ); expect(css).not.toContain( - '.creation-home-stage .platform-desktop-rail__button--primary .platform-desktop-rail__label,\n.creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__label', + '.platform-desktop-shell--workbench .platform-desktop-rail__button--primary .platform-desktop-rail__label,\n.platform-desktop-shell--workbench .platform-desktop-rail__button--active .platform-desktop-rail__label', ); expect(css).toContain( - '.creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__icon-shell', + '.platform-desktop-shell--workbench .platform-desktop-rail__button--active .platform-desktop-rail__icon-shell', ); expect(css).toContain( - '.creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__label', + '.platform-desktop-shell--workbench .platform-desktop-rail__button--active .platform-desktop-rail__label', ); });