打磨封面与截图的文件选择交互
- 网页发布页:封面与截图改用透明 input 覆盖自定义胶囊按钮,点击命中原生控件;上传后不再出现「未选择任何文件」与「已选择」互相矛盾的状态。 - AGC 发布面板:同一处理,按钮文案随状态在「选择封面图片 / 更换封面图片」「添加截图 / 截图已满 6 张」之间切换。 - 文档:实施计划补充真实浏览器发布链路证据(网页上传封面 → my-games 待审 → 版本 frozenMetadata 指向本次上传素材)与交互打磨记录。
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user