广场的发布游戏与我的游戏入口上移到 hero 右上角
- GameGalleryPage 新增 .game-page-actions 一行,把「发布游戏」「我的游戏」从 hero 下方的工具栏动作区移出,右对齐放在 hero 上方 - 工具栏只保留「游戏广场」标题与搜索框,不再和入口按钮挤在一行 - .game-page-actions 设 flex-end、0.6rem 间距与 1.1rem 底部间距;两个入口都不可用时整行不渲染,hero 位置不变 - 实测 390/360/820 三档:按钮在 hero 之上、与 hero 间距 18px、右边缘与 hero 对齐 - 里程碑文档记录该布局调整
This commit is contained in:
@@ -275,8 +275,33 @@ export function GameGalleryPage({
|
||||
[onOpenDetail, scrollKey],
|
||||
);
|
||||
|
||||
const hasPageActions = Boolean(onOpenPublish || onOpenMyGames);
|
||||
|
||||
return (
|
||||
<div className="game-page" ref={attachPageRoot}>
|
||||
{hasPageActions ? (
|
||||
<div className="game-page-actions">
|
||||
{onOpenPublish ? (
|
||||
<PlatformActionButton
|
||||
size="sm"
|
||||
shape="pill"
|
||||
onClick={onOpenPublish}
|
||||
>
|
||||
发布游戏
|
||||
</PlatformActionButton>
|
||||
) : null}
|
||||
{onOpenMyGames ? (
|
||||
<PlatformActionButton
|
||||
tone="secondary"
|
||||
size="sm"
|
||||
shape="pill"
|
||||
onClick={onOpenMyGames}
|
||||
>
|
||||
我的游戏
|
||||
</PlatformActionButton>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<section className="game-hero">
|
||||
<div className="game-hero__copy">
|
||||
<span className="game-eyebrow">
|
||||
@@ -313,25 +338,6 @@ export function GameGalleryPage({
|
||||
<h2>游戏广场</h2>
|
||||
</div>
|
||||
<div className="game-toolbar__actions">
|
||||
{onOpenPublish ? (
|
||||
<PlatformActionButton
|
||||
size="sm"
|
||||
shape="pill"
|
||||
onClick={onOpenPublish}
|
||||
>
|
||||
发布游戏
|
||||
</PlatformActionButton>
|
||||
) : null}
|
||||
{onOpenMyGames ? (
|
||||
<PlatformActionButton
|
||||
tone="secondary"
|
||||
size="sm"
|
||||
shape="pill"
|
||||
onClick={onOpenMyGames}
|
||||
>
|
||||
我的游戏
|
||||
</PlatformActionButton>
|
||||
) : null}
|
||||
<label className="game-search">
|
||||
<Search aria-hidden="true" />
|
||||
<input
|
||||
|
||||
@@ -13,6 +13,13 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.game-page-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.6rem;
|
||||
/* 站点级动作放在 hero 上方的右上角,与 hero 之间留出间距。 */
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
.game-hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user