打磨封面与截图的文件选择交互

- 网页发布页:封面与截图改用透明 input 覆盖自定义胶囊按钮,点击命中原生控件;上传后不再出现「未选择任何文件」与「已选择」互相矛盾的状态。
- AGC 发布面板:同一处理,按钮文案随状态在「选择封面图片 / 更换封面图片」「添加截图 / 截图已满 6 张」之间切换。
- 文档:实施计划补充真实浏览器发布链路证据(网页上传封面 → my-games 待审 → 版本 frozenMetadata 指向本次上传素材)与交互打磨记录。
This commit is contained in:
2026-09-20 22:45:50 +08:00
parent 4a91e5865a
commit 0dde6ee501
5 changed files with 184 additions and 48 deletions
@@ -851,15 +851,26 @@ export function GamePublishPage({
<div className="game-publish-media__copy">
<label className="game-publish-field">
游戏封面(必需)
<input
ref={coverInputRef}
type="file"
accept={GAME_PUBLISH_IMAGE_ACCEPT}
disabled={isResumingDraft || isSubmitting || isUploadingAsset}
onChange={(event) => {
void handleCoverSelected(event.target.files?.[0] ?? null);
}}
/>
{/*
原生 file 控件在清空 value 后会显示“未选择任何文件”,与下方的“已选择”提示互相
矛盾;上传后必须清空 value 才能重选同一张图,所以这里改用自定义触发按钮。
*/}
<span className="game-publish-media__picker">
<input
ref={coverInputRef}
type="file"
accept={GAME_PUBLISH_IMAGE_ACCEPT}
disabled={
isResumingDraft || isSubmitting || isUploadingAsset
}
onChange={(event) => {
void handleCoverSelected(event.target.files?.[0] ?? null);
}}
/>
<span className="game-publish-media__pick">
{coverAsset ? '更换封面图片' : '选择封面图片'}
</span>
</span>
<span className="game-publish-hint">
{coverAsset?.assetObjectId
? `已选择「${coverAsset.name}」;重新选择即可替换本次发布的封面。`
@@ -883,23 +894,30 @@ export function GamePublishPage({
<div className="game-publish-media__screenshots">
<label className="game-publish-field">
{`游戏截图(可选,最多 ${MAX_GAME_SCREENSHOTS} 张)`}
<input
ref={screenshotInputRef}
type="file"
accept={GAME_PUBLISH_IMAGE_ACCEPT}
multiple
disabled={
isResumingDraft ||
isSubmitting ||
isUploadingAsset ||
screenshotAssets.length >= MAX_GAME_SCREENSHOTS
}
onChange={(event) => {
void handleScreenshotsSelected(
Array.from(event.target.files ?? []),
);
}}
/>
<span className="game-publish-media__picker">
<input
ref={screenshotInputRef}
type="file"
accept={GAME_PUBLISH_IMAGE_ACCEPT}
multiple
disabled={
isResumingDraft ||
isSubmitting ||
isUploadingAsset ||
screenshotAssets.length >= MAX_GAME_SCREENSHOTS
}
onChange={(event) => {
void handleScreenshotsSelected(
Array.from(event.target.files ?? []),
);
}}
/>
<span className="game-publish-media__pick">
{screenshotAssets.length >= MAX_GAME_SCREENSHOTS
? '截图已满 6 张'
: '添加截图'}
</span>
</span>
<span className="game-publish-hint">
截图会按选择顺序展示在详情页;不需要可以留空。
</span>
@@ -924,6 +924,52 @@
font-size: 0.72rem;
font-weight: 600;
}
.game-publish-media__picker {
position: relative;
display: inline-flex;
align-items: center;
}
/* 透明 input 覆盖在触发按钮上:真实点击永远命中原生控件,自定义文案只负责显示。 */
.game-publish-media__picker input[type='file'] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
cursor: pointer;
}
.game-publish-media__pick {
display: inline-flex;
pointer-events: none;
align-items: center;
padding: 0.35rem 0.85rem;
border: 1px solid var(--platform-surface-border);
border-radius: 999px;
background: var(--platform-panel-fill);
color: var(--platform-text-strong);
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
transition: 160ms ease;
}
.game-publish-media__picker:hover .game-publish-media__pick {
border-color: rgba(199, 101, 61, 0.45);
}
.game-publish-media__picker
input[type='file']:focus-visible
+ .game-publish-media__pick {
outline: 2px solid rgba(199, 101, 61, 0.35);
outline-offset: 2px;
}
.game-publish-media__picker
input[type='file']:disabled
+ .game-publish-media__pick {
opacity: 0.55;
cursor: not-allowed;
}
.game-publish-media__screenshots {
display: grid;
gap: 0.6rem;