同步平台桌面界面风格

同步推荐、发现、我的等桌面一级页的左侧栏和顶部搜索栏结构。复用创作和项目页的陶土工作台背景、导航图标和顶部按钮规格。补充桌面推荐页结构测试和样式保护测试。更新创作主页与项目入口改版文档的桌面 chrome 口径。修复图片画布生成完成态标题和占位框的类型门禁。
2026-06-22 16:03:48 +08:00
parent c206ca7c33
commit 139ef3b3fa
6 changed files with 98 additions and 88 deletions
@@ -124,7 +124,7 @@ Tab：
 - `/creation/<play>` 现有玩法工作台路由保持原有 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 中放规则说明、实现说明或“暂不实装”提示。
@@ -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,
          });
@@ -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',
@@ -4992,7 +4992,7 @@ export function RpgEntryHomeView({
  );
  const desktopTopbarActions: ReactNode = (
    <div className="platform-desktop-topbar__actions flex items-center gap-3">
-      {isAuthenticated && (activeTab === 'create' || activeTab === 'saves') ? (
+      {isAuthenticated ? (
        <TopbarWalletShortcutButton
          variant="desktop"
          balanceLabel={profileDashboardPresentation.walletBalanceWithUnitLabel}
@@ -5226,48 +5226,27 @@ export function RpgEntryHomeView({
        className="flex h-full min-h-0 flex-col"
      >
        <div className="flex h-full min-h-0 flex-col">
-          <div className="platform-desktop-shell flex h-full min-h-0 flex-col p-5 xl:p-6">
-            {allowHiddenActiveTab ? (
-              <div className="platform-desktop-layout flex min-h-0 flex-1">
-                <aside className="platform-desktop-leftbar flex shrink-0 flex-col">
-                  {desktopBrandLockup}
-                  {desktopRailNav}
-                </aside>
+          <div className="platform-desktop-shell platform-desktop-shell--workbench flex h-full min-h-0 flex-col p-5 xl:p-6">
+            <div className="platform-desktop-layout flex min-h-0 flex-1">
+              <aside className="platform-desktop-leftbar flex shrink-0 flex-col">
+                {desktopBrandLockup}
+                {desktopRailNav}
+              </aside>

-                <div className="platform-desktop-main flex min-w-0 flex-1 flex-col">
-                  <div className="platform-desktop-topbar flex items-center gap-4 px-5 py-4">
-                    <div className="platform-desktop-topbar__brand-search flex min-w-0 flex-1 items-center gap-5">
-                      {desktopSearchBar}
-                    </div>
-
-                    {desktopTopbarActions}
-                  </div>
-
-                  <div className="platform-tab-panel-stack min-w-0 flex-1">
-                    {tabPanels}
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <>
+              <div className="platform-desktop-main flex min-w-0 flex-1 flex-col">
                <div className="platform-desktop-topbar flex items-center gap-4 px-5 py-4">
                  <div className="platform-desktop-topbar__brand-search flex min-w-0 flex-1 items-center gap-5">
-                    {desktopBrandLockup}
                    {desktopSearchBar}
                  </div>

                  {desktopTopbarActions}
                </div>

-                <div className="mt-5 flex min-h-0 gap-5">
-                  {desktopRailNav}
-
-                  <div className="platform-tab-panel-stack min-w-0 flex-1">
-                    {tabPanels}
-                  </div>
+                <div className="platform-tab-panel-stack min-w-0 flex-1">
+                  {tabPanels}
                </div>
-              </>
-            )}
+              </div>
+            </div>
          </div>
        </div>
      </div>
@@ -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;
 }

@@ -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',
    );
  });