优化创作主页ui表现

收窄创作主页和项目页共用的左侧导航栏与顶部搜索栏

压缩导航按钮、搜索框、泥点入口和账号入口的内部间距

修复项目页切换后创作入口仍保留主按钮样式的问题

补充项目页导航默认态的文档与回归测试

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 中放规则说明、实现说明或“暂不实装”提示。

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(<TestWrapper withAuth />);
+
+  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(<TestWrapper withAuth />);

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={() => {

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;
 }

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