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();