From 13a1044cf230764f86552fed338f103ed405ee82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=94=E9=A6=99=E4=B8=B8=E5=AD=90?= <15518898337@163.com> Date: Mon, 22 Jun 2026 15:02:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=9B=E4=BD=9C=E4=B8=BB?= =?UTF-8?q?=E9=A1=B5ui=E8=A1=A8=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 收窄创作主页和项目页共用的左侧导航栏与顶部搜索栏 压缩导航按钮、搜索框、泥点入口和账号入口的内部间距 修复项目页切换后创作入口仍保留主按钮样式的问题 补充项目页导航默认态的文档与回归测试 --- ...作】创作主页与项目入口改版计划-2026-06-18.md | 3 +- ...gEntryFlowShell.agent.interaction.test.tsx | 50 +++++++++- src/components/rpg-entry/RpgEntryHomeView.tsx | 2 +- src/index.css | 99 +++++++++---------- src/index.test.ts | 17 ++++ 5 files changed, 116 insertions(+), 55 deletions(-) diff --git a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md index 547bd3249..b448a361d 100644 --- a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md +++ b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md @@ -125,6 +125,7 @@ Tab： - 桌面端点击“创作”时调用 `pushAppHistoryPath('/creation')`。 - 桌面端原“草稿”入口改为“项目”，点击 `pushAppHistoryPath('/project')`。 - 桌面端 `/project` 必须复用 `/creation` 的平台桌面 chrome，保留左侧完整导航栏和右侧顶部栏；`ProjectGalleryView` 只替换右侧主内容区，不能作为脱离导航的独立全屏页渲染，避免用户进入项目页后无法返回或切换页签。 +- 桌面端从 `/creation` 切换到 `/project` 后，“项目”页签进入选中态，“创作”页签必须恢复为普通默认态，不保留创作主页的主按钮强调表现。 - 移动端导航列表不展示“创作”和“项目”。 - 移动端不拦截用户直接访问 `/creation` 或 `/project`。 @@ -144,7 +145,7 @@ Tab： - 实现首屏主视觉、九大功能区、最近项目区和陶泥儿精选素材瀑布流。 - 桌面端复用现有平台壳层，保留上方栏和左侧导航栏。 - 主页整体采用浅色布局，避免外站品牌文案。 -- 视觉排版参考陶土质感创作工具工作台：首屏标题居中、主按钮与社区按钮使用大号圆角胶囊尺寸，九大创作工具以 3 列大卡片展示，卡片左侧保留大号陶土感图标区域，右侧展示原有标题与描述；`/creation` 场景下的平台顶部栏和左侧导航压平成单层工作台 chrome，避免外框套内框；桌面端页面结构必须先分为“左侧完整栏 / 右侧内容区”，左侧完整栏同时包含顶部品牌 Logo 和下方导航页签，右侧内容区再拆为顶部搜索、钱包、账号栏与下方主屏，不能用顶部栏的第一列假装左侧品牌区；左侧栏保持接近参考图的宽侧栏、横向图标按钮和单层导航胶囊，不回退为窄图标栏；只调整样式与布局，不改文案、搜索、登录、导航、项目创建、社区弹层、最近项目、精选素材 Tab 或数据读取逻辑。 +- 视觉排版参考陶土质感创作工具工作台：首屏标题居中、主按钮与社区按钮使用大号圆角胶囊尺寸，九大创作工具以 3 列大卡片展示，卡片左侧保留大号陶土感图标区域，右侧展示原有标题与描述；`/creation` 场景下的平台顶部栏和左侧导航压平成单层工作台 chrome，避免外框套内框；桌面端页面结构必须先分为“左侧完整栏 / 右侧内容区”，左侧完整栏同时包含顶部品牌 Logo 和下方导航页签，右侧内容区再拆为顶部搜索、钱包、账号栏与下方主屏，不能用顶部栏的第一列假装左侧品牌区；左侧栏采用紧凑但保留图标和文字的导航胶囊，顶部搜索栏、泥点入口和账号入口都保持精简宽度，提升创作主页和项目页的工具感与精致度；只调整样式与布局，不改文案、搜索、登录、导航、项目创建、社区弹层、最近项目、精选素材 Tab 或数据读取逻辑。 - 背景、顶部品牌小陶偶、左侧导航、按钮和九大创作工具图标使用 `gpt-image-2` / image2 生成资源，统一保存在 `public/creation-home/`；资源只作为装饰图标或背景纹理接入，不包含图内文字，不替换或隐藏现有 UI 文案和交互。 - 社群入口复用现有玩家社区弹层，点击后必须停留在 `/creation`。 - 不在 UI 中放规则说明、实现说明或“暂不实装”提示。 diff --git a/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx b/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx index 32c678cbe..fb18c202a 100644 --- a/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx +++ b/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx @@ -9195,9 +9195,21 @@ test('project page keeps desktop rail and can return to platform tabs', async () expect(await screen.findByRole('main', { name: '项目' })).toBeTruthy(); const nav = container.querySelector('.platform-desktop-rail'); expect(nav).toBeTruthy(); - expect( - within(nav as HTMLElement).getByRole('button', { name: '项目' }), - ).toBeTruthy(); + const createNavButton = within(nav as HTMLElement).getByRole('button', { + name: '创作', + }); + const projectNavButton = within(nav as HTMLElement).getByRole('button', { + name: '项目', + }); + expect(projectNavButton.className).toContain( + 'platform-desktop-rail__button--active', + ); + expect(createNavButton.className).not.toContain( + 'platform-desktop-rail__button--active', + ); + expect(createNavButton.className).not.toContain( + 'platform-desktop-rail__button--primary', + ); await user.click(within(nav as HTMLElement).getByRole('button', { name: '推荐' })); @@ -9207,6 +9219,38 @@ test('project page keeps desktop rail and can return to platform tabs', async () expect(window.location.pathname).toBe('/'); }); +test('desktop project tab switch clears creation primary styling', async () => { + const user = userEvent.setup(); + mockDesktopPlatformLayout(); + window.history.replaceState(null, '', '/creation'); + const { container } = render(); + + await screen.findByRole('main', { name: '陶泥儿创作主页' }); + const nav = container.querySelector('.platform-desktop-rail'); + expect(nav).toBeTruthy(); + + await user.click(within(nav as HTMLElement).getByRole('button', { name: '项目' })); + + expect(await screen.findByRole('main', { name: '项目' })).toBeTruthy(); + const projectNav = container.querySelector('.platform-desktop-rail'); + expect(projectNav).toBeTruthy(); + const createNavButton = within(projectNav as HTMLElement).getByRole('button', { + name: '创作', + }); + const projectNavButton = within(projectNav as HTMLElement).getByRole('button', { + name: '项目', + }); + expect(projectNavButton.className).toContain( + 'platform-desktop-rail__button--active', + ); + expect(createNavButton.className).not.toContain( + 'platform-desktop-rail__button--active', + ); + expect(createNavButton.className).not.toContain( + 'platform-desktop-rail__button--primary', + ); +}); + test('direct mobile creation home keeps landing content without mobile nav entry', async () => { window.history.replaceState(null, '', '/creation'); const { container } = render(); diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx index 7eb20db9f..921d33a07 100644 --- a/src/components/rpg-entry/RpgEntryHomeView.tsx +++ b/src/components/rpg-entry/RpgEntryHomeView.tsx @@ -5037,7 +5037,7 @@ export function RpgEntryHomeView({ label={tabLabels[tab]} icon={tabIcons[tab]} creationHomeIconSrc={CREATION_HOME_NAV_ICON_SRC[tab]} - emphasized={tab === 'create'} + emphasized={tab === 'create' && resolvedDesktopNavTab === 'create'} showDot={false} disabled={isRechargePaymentConfirmationPending} onClick={() => { diff --git a/src/index.css b/src/index.css index ca9625088..f1a780144 100644 --- a/src/index.css +++ b/src/index.css @@ -11081,7 +11081,7 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .platform-desktop-shell { - --creation-home-sidebar-width: 13.75rem; + --creation-home-sidebar-width: 10rem; border-color: rgba(221, 191, 166, 0.9); border-radius: 1.85rem; padding: 0 !important; @@ -11112,7 +11112,7 @@ button.image-canvas-editor__reference-chip:disabled { min-height: 0; border-right: 1px solid rgba(219, 190, 166, 0.72); background: rgba(255, 250, 245, 0.46); - padding: 1.22rem 1rem 1.3rem; + padding: 0.86rem 0.5rem 0.96rem; } .creation-home-stage .platform-desktop-main { @@ -11121,12 +11121,13 @@ button.image-canvas-editor__reference-chip:disabled { .creation-home-stage .platform-desktop-topbar { display: flex; - gap: 1rem; - min-height: 5.9rem; + gap: 0.58rem; + min-height: 3.62rem; border: 0; border-bottom: 1px solid rgba(219, 190, 166, 0.72); border-radius: 0; background: rgba(255, 250, 245, 0.54); + padding: 0.42rem 1rem !important; box-shadow: none; backdrop-filter: none; } @@ -11136,8 +11137,9 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .platform-desktop-topbar__brand-search { + gap: 0.58rem !important; justify-content: flex-start; - padding-left: clamp(10rem, 18vw, 22rem); + padding-left: clamp(3.1rem, 5.8vw, 8.2rem); } .creation-home-stage .platform-brand-logo { @@ -11146,15 +11148,15 @@ button.image-canvas-editor__reference-chip:disabled { .creation-home-stage .creation-home-brand-lockup { align-self: flex-start; - gap: 0.62rem; - min-height: 4.35rem; - padding-left: 0.48rem; + gap: 0.42rem; + min-height: 3.28rem; + padding-left: 0.28rem; } .creation-home-stage .creation-home-brand-lockup__art { display: block; - width: 3.44rem; - height: 3.44rem; + width: 2.58rem; + height: 2.58rem; flex: 0 0 auto; border-radius: 999px; object-fit: cover; @@ -11164,24 +11166,25 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .platform-brand-logo__title { - font-size: 1.88rem; + font-size: 1.38rem; color: #4a220f; } .creation-home-stage .platform-brand-logo__subtitle { color: #9b5a35; - font-size: 0.58rem; + font-size: 0.46rem; } .creation-home-stage .platform-desktop-topbar__brand-search > .platform-desktop-search { width: 100%; - max-width: 38.75rem !important; + max-width: 20rem !important; } .creation-home-stage .platform-desktop-topbar__actions { align-self: center; + gap: 0.5rem !important; margin-left: auto; } @@ -11189,7 +11192,7 @@ button.image-canvas-editor__reference-chip:disabled { position: relative; box-sizing: border-box; min-height: 0; - height: 3.36rem; + height: 2.36rem; border: 1px solid rgba(214, 184, 159, 0.92); background: rgba(255, 250, 244, 0.78); box-shadow: none; @@ -11199,21 +11202,23 @@ button.image-canvas-editor__reference-chip:disabled { .platform-desktop-topbar__brand-search > .platform-desktop-search { padding-block: 0 !important; + padding-inline: 0.64rem 0.58rem !important; + gap: 0.48rem !important; } .creation-home-stage .platform-desktop-create-wallet-chip { position: relative; - min-height: 3.24rem; + min-height: 2.28rem; border-radius: 999px !important; - padding-inline: 0.82rem 1.12rem !important; + padding-inline: 0.42rem 0.58rem !important; } .creation-home-stage .platform-desktop-create-wallet-chip::after { position: absolute; top: 50%; - right: -1.38rem; + right: -0.52rem; width: 1px; - height: 2.7rem; + height: 1.66rem; background: rgba(217, 190, 166, 0.82); content: ""; transform: translateY(-50%); @@ -11229,9 +11234,9 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .creation-home-topbar-art--search { - width: 2.05rem; - height: 2.05rem; - margin: -0.34rem -0.52rem -0.34rem -0.68rem; + width: 1.34rem; + height: 1.34rem; + margin: -0.16rem -0.26rem -0.16rem -0.34rem; } .creation-home-stage .platform-desktop-search > svg { @@ -11239,9 +11244,9 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .creation-home-topbar-art--wallet { - width: 2rem; - height: 2rem; - margin: -0.32rem -0.32rem -0.32rem -0.58rem; + width: 1.32rem; + height: 1.32rem; + margin: -0.14rem -0.18rem -0.14rem -0.3rem; } .creation-home-stage @@ -11253,11 +11258,12 @@ button.image-canvas-editor__reference-chip:disabled { .creation-home-stage .platform-desktop-topbar button.platform-desktop-search { width: auto; max-width: none !important; - min-width: 12.6rem; - height: 3.48rem; + min-width: 7.35rem; + height: 2.3rem; border-color: transparent; background: transparent; - padding-inline: 0.7rem 0.84rem; + padding-inline: 0.34rem 0.42rem; + gap: 0.38rem !important; } .creation-home-stage .platform-desktop-topbar button.platform-desktop-search:hover { @@ -11266,48 +11272,47 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .platform-desktop-topbar button.platform-desktop-search > span:first-child { - width: 3.34rem; - height: 3.34rem; + width: 2.06rem; + height: 2.06rem; } .creation-home-stage .platform-desktop-rail { align-self: flex-start; - width: 10.28rem; - margin: 1.82rem auto 0; + width: 7.05rem; + margin: 1.12rem auto 0; border-color: rgba(220, 192, 168, 0.7); border-radius: 1.55rem; background: rgba(255, 250, 244, 0.54); - padding: 0.68rem; + padding: 0.38rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 34px rgba(112, 57, 30, 0.08); } .creation-home-stage .platform-desktop-rail__button { - min-height: 4.22rem; + min-height: 2.88rem; display: flex; flex-direction: row; justify-content: flex-start; - gap: 1.06rem; - border-radius: 1.12rem; - padding: 0 0.86rem; + gap: 0.34rem; + border-radius: 0.82rem; + padding: 0 0.34rem; text-align: left; } .creation-home-stage .platform-desktop-rail__button--primary { - min-height: 4.22rem; + min-height: 2.88rem; } .creation-home-stage .platform-desktop-rail__icon-shell { - width: 3.12rem; - height: 3.12rem; + width: 2.08rem; + height: 2.08rem; flex: 0 0 auto; - border-radius: 1rem; + border-radius: 0.74rem; background: transparent; box-shadow: none; } -.creation-home-stage .platform-desktop-rail__button--primary .platform-desktop-rail__icon-shell, .creation-home-stage .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%), @@ -11317,24 +11322,20 @@ button.image-canvas-editor__reference-chip:disabled { inset 0 1px 0 rgba(255, 255, 255, 0.5); } -.creation-home-stage .platform-desktop-rail__button--primary .platform-desktop-rail__icon, .creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__icon { color: #fffaf3; } .creation-home-stage .creation-home-nav-art { display: block; - width: 2.45rem; - height: 2.45rem; + width: 1.62rem; + height: 1.62rem; object-fit: contain; object-position: center; filter: drop-shadow(0 0.3rem 0.28rem rgba(112, 62, 32, 0.14)); mix-blend-mode: multiply; } -.creation-home-stage - .platform-desktop-rail__button--primary - .creation-home-nav-art, .creation-home-stage .platform-desktop-rail__button--active .creation-home-nav-art { @@ -11350,20 +11351,18 @@ button.image-canvas-editor__reference-chip:disabled { display: none; } -.creation-home-stage .platform-desktop-rail__button--primary, .creation-home-stage .platform-desktop-rail__button--active { border-color: transparent; background: transparent; box-shadow: none; } -.creation-home-stage .platform-desktop-rail__button--primary .platform-desktop-rail__label, .creation-home-stage .platform-desktop-rail__button--active .platform-desktop-rail__label { color: #c15f28; } .creation-home-stage .platform-desktop-rail__label { - font-size: 0.88rem; + font-size: 0.78rem; font-weight: 820; letter-spacing: 0; } diff --git a/src/index.test.ts b/src/index.test.ts index f24f246db..ac3c42f19 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -31,6 +31,23 @@ function getCssBlock(source: string, selector: string) { } describe('index stylesheet unread dots', () => { + it('keeps creation home primary rail styling separate from active tab styling', () => { + 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', + ); + 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', + ); + expect(css).toContain( + '.creation-home-stage .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', + ); + }); + it('hides the outer page scrollbar without changing inner scroll helpers', () => { const css = readIndexCss();