From da34d19b46e82f761545cc9efb0790aca3d878d6 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: Sun, 21 Jun 2026 18:00:12 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E5=88=9B=E4=BD=9C?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 调整创作主页桌面端为左侧完整栏与右侧内容区的真实布局 恢复创作主页主内容滚动能力，避免隐藏下方功能 同步更新创作主页改版文档中的结构约束 --- ...作】创作主页与项目入口改版计划-2026-06-18.md | 2 +- src/components/rpg-entry/RpgEntryHomeView.tsx | 224 ++++++++++-------- src/index.css | 83 +++---- 3 files changed, 166 insertions(+), 143 deletions(-) diff --git a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md index 0258d46cd..91c0ae281 100644 --- a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md +++ b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md @@ -133,7 +133,7 @@ Tab： - 实现首屏主视觉、九大功能区、最近项目区和陶泥儿精选素材瀑布流。 - 桌面端复用现有平台壳层，保留上方栏和左侧导航栏。 - 主页整体采用浅色布局，避免外站品牌文案。 -- 视觉排版参考陶土质感创作工具工作台：首屏标题居中、主按钮与社区按钮使用大号圆角胶囊尺寸，九大创作工具以 3 列大卡片展示，卡片左侧保留大号陶土感图标区域，右侧展示原有标题与描述；`/creation` 场景下的平台顶部栏和左侧导航压平成单层工作台 chrome，避免外框套内框；桌面端顶部栏按“左侧品牌区 / 中部搜索框 / 右侧钱包与账号区”固定分区，左侧栏保持接近参考图的宽侧栏、横向图标按钮和单层导航胶囊，不回退为窄图标栏；只调整样式与布局，不改文案、搜索、登录、导航、项目创建、社区弹层、最近项目、精选素材 Tab 或数据读取逻辑。 +- 视觉排版参考陶土质感创作工具工作台：首屏标题居中、主按钮与社区按钮使用大号圆角胶囊尺寸，九大创作工具以 3 列大卡片展示，卡片左侧保留大号陶土感图标区域，右侧展示原有标题与描述；`/creation` 场景下的平台顶部栏和左侧导航压平成单层工作台 chrome，避免外框套内框；桌面端页面结构必须先分为“左侧完整栏 / 右侧内容区”，左侧完整栏同时包含顶部品牌 Logo 和下方导航页签，右侧内容区再拆为顶部搜索、钱包、账号栏与下方主屏，不能用顶部栏的第一列假装左侧品牌区；左侧栏保持接近参考图的宽侧栏、横向图标按钮和单层导航胶囊，不回退为窄图标栏；只调整样式与布局，不改文案、搜索、登录、导航、项目创建、社区弹层、最近项目、精选素材 Tab 或数据读取逻辑。 - 背景、顶部品牌小陶偶、左侧导航、按钮和九大创作工具图标使用 `gpt-image-2` / image2 生成资源，统一保存在 `public/creation-home/`；资源只作为装饰图标或背景纹理接入，不包含图内文字，不替换或隐藏现有 UI 文案和交互。 - 社群入口复用现有玩家社区弹层，点击后必须停留在 `/creation`。 - 不在 UI 中放规则说明、实现说明或“暂不实装”提示。 diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx index c435f80c8..92b5c184e 100644 --- a/src/components/rpg-entry/RpgEntryHomeView.tsx +++ b/src/components/rpg-entry/RpgEntryHomeView.tsx @@ -4970,6 +4970,95 @@ export function RpgEntryHomeView({ onClose={() => setIsApiKeysModalOpen(false)} /> ) : null; + const desktopBrandLockup: ReactNode = ( + + + + + ); + const desktopSearchBar: ReactNode = ( + + ); + const desktopTopbarActions: ReactNode = ( +
+ {isAuthenticated && (activeTab === 'create' || activeTab === 'saves') ? ( + + ) : null} + +
+ ); + const desktopRailNav: ReactNode = ( + + ); if (!isDesktopLayout) { const isMobileRecommendTab = activeTab === 'home'; @@ -5139,108 +5228,47 @@ export function RpgEntryHomeView({ >
-
-
- - - - - -
+ {allowHiddenActiveTab ? ( +
+ -
- {isAuthenticated && - (activeTab === 'create' || activeTab === 'saves') ? ( - - ) : null} - -
-
+
+
+
+ {desktopSearchBar} +
-
- + {desktopTopbarActions} +
-
- {tabPanels} +
+ {tabPanels} +
+
-
+ ) : ( + <> +
+
+ {desktopBrandLockup} + {desktopSearchBar} +
+ + {desktopTopbarActions} +
+ +
+ {desktopRailNav} + +
+ {tabPanels} +
+
+ + )}
diff --git a/src/index.css b/src/index.css index fb64279df..1bb7c5224 100644 --- a/src/index.css +++ b/src/index.css @@ -10687,12 +10687,8 @@ button.image-canvas-editor__reference-chip:disabled { --creation-home-sidebar-width: 13.75rem; border-color: rgba(221, 191, 166, 0.9); border-radius: 1.85rem; + padding: 0 !important; background: - linear-gradient( - 90deg, - rgba(255, 250, 245, 0.94) 0 var(--creation-home-sidebar-width), - transparent var(--creation-home-sidebar-width) - ), linear-gradient(rgba(255, 250, 244, 0.72), rgba(255, 250, 244, 0.72)), url('/creation-home/background-clay-workspace.png') center top / 64rem 64rem repeat, linear-gradient(180deg, #fffaf4 0%, #fffdf9 52%, #fff8f0 100%); @@ -10700,32 +10696,36 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .platform-desktop-shell::before { - background: - linear-gradient( - 90deg, - transparent 0 var(--creation-home-sidebar-width), - rgba(219, 190, 166, 0.72) var(--creation-home-sidebar-width), - rgba(219, 190, 166, 0.72) calc(var(--creation-home-sidebar-width) + 1px), - transparent calc(var(--creation-home-sidebar-width) + 1px) - ); - opacity: 1; + display: none; } .creation-home-stage .platform-desktop-shell::after { display: none; } +.creation-home-stage .platform-desktop-layout { + position: relative; + z-index: 1; + width: 100%; + height: 100%; +} + +.creation-home-stage .platform-desktop-leftbar { + width: var(--creation-home-sidebar-width); + 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; +} + +.creation-home-stage .platform-desktop-main { + min-height: 0; +} + .creation-home-stage .platform-desktop-topbar { - display: grid; - grid-template-columns: - var(--creation-home-sidebar-width) - minmax(8rem, 19.65rem) - minmax(24rem, 38.75rem) - minmax(1rem, 1fr) - auto; + display: flex; gap: 1rem; - min-height: 5.65rem; - margin: -1.25rem -1.25rem 0; + min-height: 5.9rem; border: 0; border-bottom: 1px solid rgba(219, 190, 166, 0.72); border-radius: 0; @@ -10738,9 +10738,9 @@ button.image-canvas-editor__reference-chip:disabled { display: none; } -.creation-home-stage .platform-desktop-topbar > .flex:first-child, .creation-home-stage .platform-desktop-topbar__brand-search { - display: contents; + justify-content: flex-start; + padding-left: clamp(10rem, 18vw, 22rem); } .creation-home-stage .platform-brand-logo { @@ -10748,16 +10748,16 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .creation-home-brand-lockup { - grid-column: 1; - align-self: center; + align-self: flex-start; gap: 0.62rem; - padding-left: 0.24rem; + min-height: 4.35rem; + padding-left: 0.48rem; } .creation-home-stage .creation-home-brand-lockup__art { display: block; - width: 3.38rem; - height: 3.38rem; + width: 3.44rem; + height: 3.44rem; flex: 0 0 auto; border-radius: 999px; object-fit: cover; @@ -10779,18 +10779,13 @@ button.image-canvas-editor__reference-chip:disabled { .creation-home-stage .platform-desktop-topbar__brand-search > .platform-desktop-search { - grid-column: 3; - align-self: center; width: 100%; max-width: 38.75rem !important; } -.creation-home-stage .platform-desktop-topbar > .flex:last-child, .creation-home-stage .platform-desktop-topbar__actions { - grid-column: 5; align-self: center; - justify-self: end; - padding-right: 0.98rem; + margin-left: auto; } .creation-home-stage .platform-desktop-search { @@ -10878,17 +10873,10 @@ button.image-canvas-editor__reference-chip:disabled { height: 3.34rem; } -.creation-home-stage .platform-desktop-shell > .mt-5 { - position: relative; - z-index: 1; - margin-top: 0; - gap: 0; -} - .creation-home-stage .platform-desktop-rail { align-self: flex-start; width: 10.28rem; - margin: 1.42rem 1.26rem 0 0.3rem; + margin: 1.82rem auto 0; border-color: rgba(220, 192, 168, 0.7); border-radius: 1.55rem; background: rgba(255, 250, 244, 0.54); @@ -10984,13 +10972,20 @@ button.image-canvas-editor__reference-chip:disabled { } .creation-home-stage .platform-tab-panel-stack { + min-height: 0; background: transparent; } .creation-home-stage .platform-tab-panel { + height: 100%; + overflow: auto; padding-right: 0; } +.creation-home-stage .creation-landing { + background: transparent; +} + .platform-desktop-trending-item { position: relative; overflow: hidden;