From dc243b0d5770182e19bfef9f7ab2cf347e894fa3 Mon Sep 17 00:00:00 2001 From: Suzumiya Date: Sat, 12 Sep 2026 15:30:38 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E5=B7=A5=E4=BD=9C=E5=8F=B0?= =?UTF-8?q?=E3=80=8C=E6=9B=BF=E6=8D=A2=E7=B4=A0=E6=9D=90=E3=80=8D=E5=80=99?= =?UTF-8?q?=E9=80=89=E7=AA=97=E6=8E=A5=E4=B8=8A=E9=A2=84=E8=A7=88=E7=AE=A1?= =?UTF-8?q?=E7=BA=BF=EF=BC=8C=E8=A1=A5=E9=BD=90=E5=80=99=E9=80=89=E6=8E=92?= =?UTF-8?q?=E5=BA=8F=E3=80=81=E7=A6=81=E7=94=A8=E6=80=81=E5=8F=AF=E8=AF=BB?= =?UTF-8?q?=E6=80=A7=E4=B8=8E=E5=88=A0=E9=99=A4=E7=B4=A0=E6=9D=90=E5=85=A5?= =?UTF-8?q?=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 「替换素材」候选卡缩略图接入资源卡同一条预览管线：新增 ResourcePreviewMedia，复用同一份预览身份、同一条队列与 LRU 缓存，不再只渲染类型占位图标 - 预览 hook 暴露 sweepVisiblePreviews：弹窗内容挂在 portal 下、不在资源画本 observer 的 root 子树内，改为在「弹窗打开」与「候选区滚动」两个几何变化点显式按同一套视口几何判据兜底放行，不新增第二条加载通路 - 候选排序抽出纯函数 sortResourceReplacementCandidates：可替换（无硬门禁失败）的排最前，其余按后端原名次跟随且仍渲染但禁用；判据与弹窗禁用状态同源，不会出现「排最前却点不动」 - 抽出纯函数 projectResourcesByManifestAssetId，让弹窗素材映射与候选缩略图共用同一份资源投影口径 - 共享选择弹窗的禁用态不再整卡压透明度：变灰只压在缩略图与名称上，「分类不同」这类禁用原因保持全对比度可读（网页端美术画布不传禁用原因，视觉逐字不变） - 资源卡选中工具条末位新增「删除素材」，前置共享工具条同一套分隔线与前面的非破坏性动作隔开，只在 manifestAssetId 存在时才渲染 - 删除流程抽成 useResourceAssetDeleteFlow（读引用信息 → ResourceAssetDeleteDialog 二次确认 → delete_local_project_asset 的 deleteReferencedVersions 三分支），工具条与面板共用同一份实现，没有第二套删除 - 「编辑素材标签」面板底部只留右下角一个「添加」：点它把输入框内容（含未按回车的尾巴）落成 pill 并按现有写入路径保存，分类仍原样回传落盘原值；删除素材/取消/保存标签三个按钮移除，关闭仍走头部 × - 标签 pill 内的删除标签按钮保持不变 - 更新与补充用例：候选排序、排序与禁用同源、候选缩略图真链路与滚动兜底放行、工具条删除入口位置与 IPC 载荷、连带删除分支、面板无删除入口与「添加」语义、禁用态可读性类名契约、工具条动作清单 --- .../resourceVersionReplacementModel.ts | 53 ++- apps/ai-game-creator-shell/src/styles.css | 19 +- .../ResourceClassificationPanel.tsx | 151 ++----- .../ResourcePreviewMedia.tsx | 132 ++++++ .../src/view/project-development/index.tsx | 169 +++++++- .../useProjectResourceCardPreviews.ts | 11 + .../useResourceAssetDeleteFlow.ts | 168 ++++++++ .../appSurface/project-development.suite.ts | 14 +- .../tests/resourceAssetDeleteFlow.test.tsx | 328 +++++++++++++++ .../resourceClassificationPanel.test.tsx | 333 +++++----------- .../tests/resourceVersionReplacement.test.tsx | 375 +++++++++++++++++- .../resourceVersionReplacementModel.test.ts | 123 ++++++ ...ageCanvasProjectAssetPickerDialog.test.tsx | 36 ++ .../ImageCanvasProjectAssetPickerDialog.tsx | 25 +- 14 files changed, 1522 insertions(+), 415 deletions(-) create mode 100644 apps/ai-game-creator-shell/src/view/project-development/ResourcePreviewMedia.tsx create mode 100644 apps/ai-game-creator-shell/src/view/project-development/useResourceAssetDeleteFlow.ts create mode 100644 apps/ai-game-creator-shell/tests/resourceAssetDeleteFlow.test.tsx diff --git a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts index 316d481ea..1d5d6b309 100644 --- a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts +++ b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceVersionReplacementModel.ts @@ -115,6 +115,51 @@ export function resourceReplacementAssetHints( return hints; } +/** + * 候选排序：**可替换（无硬门禁失败）的排在最前，其余按原名次跟随**。 + * + * 判据与弹窗的禁用状态同源（`resourceReplacementBlockedReason`），所以"排在最前"与 + * "点得动"永远是同一批条目 —— 不会出现排在最前却点不动的候选，也不会出现能点的候选被 + * 挤在不可替换项后面。同档内显式按原名次排（不依赖 `Array.prototype.sort` 的稳定性）， + * 保证任何引擎下结果一致。 + * + * 不可替换项**不隐藏**：仍然渲染但禁用，把"为什么不能替换"留在界面上。 + */ +export function sortResourceReplacementCandidates< + Candidate extends LocalProjectVersionReplacementCandidate, +>(candidates: readonly Candidate[]): Candidate[] { + return candidates + .map((candidate, index) => ({ candidate, index })) + .sort((left, right) => { + const leftBlocked = + resourceReplacementBlockedReason(left.candidate) !== null; + const rightBlocked = + resourceReplacementBlockedReason(right.candidate) !== null; + if (leftBlocked !== rightBlocked) return leftBlocked ? 1 : -1; + return left.index - right.index; + }) + .map((entry) => entry.candidate); +} + +/** + * manifest 资产 id → 资源投影（同一资产生成多个投影时取第一个，与资源画布口径一致）。 + * + * 抽成纯函数是为了让「候选条目 ↔ 资源投影 ↔ 预览身份」这条链在弹窗素材映射与宿主渲染处 + * 共用同一份口径，而不是各写一份 `forEach`。 + */ +export function projectResourcesByManifestAssetId( + resources: readonly ProjectResource[], +): Map { + const resourceByAssetId = new Map(); + for (const resource of resources) { + const assetId = resource.manifestAssetId; + if (assetId && !resourceByAssetId.has(assetId)) { + resourceByAssetId.set(assetId, resource); + } + } + return resourceByAssetId; +} + /** * 候选 → 弹窗素材。 * @@ -126,13 +171,7 @@ export function resourceReplacementPickerAssets( resources: readonly ProjectResource[], candidates: readonly LocalProjectVersionReplacementCandidate[], ): EditorAsset[] { - const resourceByAssetId = new Map(); - for (const resource of resources) { - const assetId = resource.manifestAssetId; - if (assetId && !resourceByAssetId.has(assetId)) { - resourceByAssetId.set(assetId, resource); - } - } + const resourceByAssetId = projectResourcesByManifestAssetId(resources); return candidates.flatMap((candidate) => { const resource = resourceByAssetId.get(candidate.resourceId); if (!resource) return []; diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index 6f853e8a5..bba6bc9f3 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -6325,6 +6325,17 @@ iframe.preview-frame { gap: 10px; } +/* + * 「编辑素材标签」底部只有一个「添加」，靠右下角。 + * + * 面板本身是 `display: grid`，footer 作为网格项默认铺满整行；这里只把它改成靠右的行内排布， + * 按钮宽度仍由共享的 `PlatformActionButton` 决定。 + */ +.game-resource-classification-footer { + display: flex; + justify-content: flex-end; +} + .game-resource-classification-error { margin: 0; color: #b3261e; @@ -6413,10 +6424,11 @@ iframe.preview-frame { } /* - * 「替换素材」候选弹窗里的类型占位。 + * 「替换素材」候选弹窗里候选卡的媒体区。 * - * AGC 的素材预览要经带 scope 的原生读取器拿 Blob URL，弹窗内没有同步 `src`， - * 所以候选行只渲染稳定类型图标，不挂 ``、不出现破图。 + * 缩略图由资源卡同一条预览管线（`useProjectResourceCardPreviews`）给出 Blob URL 后渲染， + * 所以这里只负责"铺满弹窗给的 20 高度媒体槽 + 居中"：读不到预览时它是类型占位的容器， + * 读到之后就是真实缩略图的容器，两种状态同一块版面、不跳尺寸。 */ .game-resource-replacement-media { display: flex; @@ -6424,6 +6436,7 @@ iframe.preview-frame { justify-content: center; width: 100%; height: 100%; + overflow: hidden; color: #8d7a6b; } diff --git a/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx b/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx index ee2da6936..5350aec11 100644 --- a/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx +++ b/apps/ai-game-creator-shell/src/view/project-development/ResourceClassificationPanel.tsx @@ -13,28 +13,12 @@ import { normalizeGameCreationAppAssetTags, } from '../../../../../packages/shared/src/contracts/gameCreationApp'; import { ThemedModal } from '../../components/modal/ThemedModal'; -import { - ResourceAssetDeleteDialog, - type ResourceAssetReferenceVersion, -} from './ResourceAssetDeleteDialog'; type UpdateLocalProjectResourceClassificationResult = { asset: GameCreationAppAssetManifestEntry; committedProjectRevision: number; }; -type DeleteLocalProjectAssetResult = { - assetId: string; - localPath: string; - committedProjectRevision: number; - fileRetained: boolean; -}; - -type ReadLocalProjectAssetReferencesResult = { - assetId: string; - versions: ResourceAssetReferenceVersion[]; -}; - /** * 标签草稿沿用写入路径的归一化边界，只按中英文逗号、顿号与换行切分。 * 与输入框旧的"整段逗号分隔文本"口径完全一致，改动只是把结果换成逐个可删的 pill。 @@ -71,19 +55,12 @@ function resourceClassificationErrorMessage(error: unknown) { return '保存素材标签失败'; } -function resourceDeleteErrorMessage(error: unknown) { - if (typeof error === 'string' && error.trim()) return error; - if (error instanceof Error && error.message) return error.message; - return '删除资源失败'; -} - type ResourceClassificationPanelProps = { projectPath: string; projectId: string; asset: GameCreationAppAssetManifestEntry; onClose: () => void; onSaved: (result: UpdateLocalProjectResourceClassificationResult) => void; - onDeleted: (result: DeleteLocalProjectAssetResult) => void; }; export function ResourceClassificationPanel({ @@ -92,7 +69,6 @@ export function ResourceClassificationPanel({ asset, onClose, onSaved, - onDeleted, }: ResourceClassificationPanelProps) { /** * 分类取值优先级由落盘 `category` + `kind` 派生决定，本面板不再提供手动设置入口。 @@ -111,17 +87,9 @@ export function ResourceClassificationPanel({ ); const [tagDraft, setTagDraft] = useState(''); const [saving, setSaving] = useState(false); - const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); - const [deleteDialogPreparing, setDeleteDialogPreparing] = useState(false); - const [deleteReferencedVersions, setDeleteReferencedVersions] = - useState(false); - const [referencedVersions, setReferencedVersions] = useState< - readonly ResourceAssetReferenceVersion[] - >([]); - const [deleting, setDeleting] = useState(false); const [error, setError] = useState(null); - /** 回车 / 逗号 / 顿号都按同一口径切分；输入框仍是同一套提交方式。 */ + /** 回车 / 逗号 / 顿号都按同一口径切分：把草稿落成 pill。 */ function commitTagDraft() { if (!tagDraft.trim()) return; setTags((current) => @@ -134,7 +102,12 @@ export function ResourceClassificationPanel({ setTags((current) => current.filter((item) => item !== tag)); } - async function saveResourceClassification() { + /** + * 保存标签：`tagsToSave` 由调用方给出（「添加」把输入框里还未落成 pill 的尾巴一起并入）。 + */ + async function saveResourceClassification( + tagsToSave: readonly string[], + ): Promise { const invoke = window.__TAURI__?.core?.invoke; if (!invoke) { setError('编辑素材标签需要在客户端内保存'); @@ -150,9 +123,6 @@ export function ResourceClassificationPanel({ if (!Number.isSafeInteger(status.revision) || status.revision < 0) { throw new Error('项目 revision 无效'); } - // 输入框里还没按回车 / 逗号落成 pill 的尾巴也要一起保存， - // 沿用"整段文本在保存时统一切分"的既有行为，不让用户白输入。 - const tagsToSave = mergeResourceClassificationTagDraft(tags, tagDraft); const result = await invoke( 'update_local_project_resource_classification', @@ -177,66 +147,16 @@ export function ResourceClassificationPanel({ } /** - * 点删除先读引用信息，再打开独立确认面板。素材不可变：只摘掉 manifest 登记，磁盘文件保留。 + * 底部唯一的「添加」：把输入框里的内容（**含没按回车的尾巴**）落成 pill，然后按同一写入路径保存。 + * + * 落 pill 是即时反馈，保存是本次动作的语义本身 —— 拆成"先落 pill 再等用户去点保存"要求 + * 用户理解两步，而这里只有一步。 */ - async function openDeleteResourceDialog() { - const invoke = window.__TAURI__?.core?.invoke; - if (!invoke) { - setError('删除资源需要在客户端内执行'); - return; - } - setDeleteDialogPreparing(true); - setError(null); - try { - const references = await invoke( - 'read_local_project_asset_references', - { input: { projectPath, assetId: asset.id } }, - ); - setReferencedVersions(references.versions); - setDeleteReferencedVersions(false); - setDeleteDialogOpen(true); - } catch (referenceError) { - setError(resourceDeleteErrorMessage(referenceError)); - } finally { - setDeleteDialogPreparing(false); - } - } - - async function confirmDeleteResource() { - const invoke = window.__TAURI__?.core?.invoke; - if (!invoke) { - setError('删除资源需要在客户端内执行'); - return; - } - setDeleting(true); - setError(null); - try { - const status = await invoke<{ revision: number }>( - 'get_local_game_project_revision', - { projectPath }, - ); - if (!Number.isSafeInteger(status.revision) || status.revision < 0) { - throw new Error('项目 revision 无效'); - } - const result = await invoke( - 'delete_local_project_asset', - { - input: { - projectPath, - expectedProjectId: projectId, - expectedProjectRevision: status.revision, - assetId: asset.id, - deleteReferencedVersions, - }, - }, - ); - setDeleteDialogOpen(false); - onDeleted(result); - } catch (deleteError) { - setError(resourceDeleteErrorMessage(deleteError)); - } finally { - setDeleting(false); - } + async function addTagDraftAndSave() { + const tagsToSave = mergeResourceClassificationTagDraft(tags, tagDraft); + setTags(tagsToSave); + setTagDraft(''); + await saveResourceClassification(tagsToSave); } return ( @@ -304,41 +224,18 @@ export function ResourceClassificationPanel({

) : null} -