From aab0b7849b8ffc2506d10602a354e2dd347ddb9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:04:15 +0800
Subject: [PATCH 01/26] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E5=A4=9A=E9=80=89=E4=B8=8E=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重写素材库的普通点击、Ctrl/Cmd 追加和 Shift 连续范围选择。

清理退出选择模式后的选中状态，并让整行素材统一响应选择操作。

支持单素材直接下载和多素材 ZIP 下载，文件名精确到秒。

固定批量操作栏并修复移动端素材列表可操作空间。

补充选择、导出、侧栏交互测试以及对应技术文档。
---
 .../shared-memory/decision-log.md             |   9 ++
 ...��端架构】图片画布素材导出方案-2026-06-15.md |  11 +-
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   3 +-
 .../ImageCanvasAssetFolderSectionView.tsx     |  17 ++-
 .../ImageCanvasAssetLibraryModel.test.ts      | 143 ++++++++++++++++--
 .../ImageCanvasAssetLibraryModel.ts           | 140 +++++++++++++++--
 .../ImageCanvasAssetLibraryPanelView.tsx      | 104 ++++++++-----
 .../ImageCanvasAssetRowView.test.tsx          |  38 ++++-
 .../image-editor/ImageCanvasAssetRowView.tsx  |  94 +++++++++---
 ...mageCanvasEditorAssetsIntegration.test.tsx | 104 ++++++++++---
 .../ImageCanvasEditorPrimitives.tsx           |   2 +-
 .../ImageCanvasEditorShellView.test.tsx       |   7 +-
 .../image-editor/ImageCanvasEditorView.tsx    |  39 ++++-
 .../ImageCanvasExportModel.test.ts            |  10 +-
 .../image-editor/ImageCanvasExportModel.ts    |   5 +-
 .../ImageCanvasSidebarView.test.tsx           |  69 ++++++++-
 .../image-editor/ImageCanvasSidebarView.tsx   |  98 ++++++++----
 ...useImageCanvasAssetExportWorkflow.test.tsx |  79 +++++++++-
 .../useImageCanvasAssetExportWorkflow.ts      | 111 +++++++++++---
 .../useImageCanvasAssetLibrary.test.tsx       |  72 +++++++--
 .../useImageCanvasAssetLibrary.ts             | 133 ++++++++++------
 src/index.css                                 |  29 +++-
 22 files changed, 1056 insertions(+), 261 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 8604b6bdc..b34d2dfce 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -214,6 +214,7 @@
 - 影响范围：`server-rs/crates/api-server/src/state.rs`、`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/api-server/src/character_animation_assets.rs`、后端架构文档和图片画布技术文档。
 - 验证方式：运行 `cargo test -p api-server editor_bgfilter_retries_once_before_fallback --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_character_animation_frames_use_three_stage_matting_fallback --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_canvas_screen_background_generation_uses_bgfilter_postprocess --manifest-path server-rs/Cargo.toml`、`cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`npm run check:encoding` 和 `git diff --check`。
 - 关联文档：`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
 ## 2026-07-16 SpacetimeDB 备份采用逐文件基线、CAS 增量与安全历史清理
 
 - 背景：SpacetimeDB standalone 2.6.0 不自动删除已被 snapshot 覆盖的历史 commitlog 与旧 snapshot；反复压缩整个 `/stdb` 会重复占用磁盘、停机和 OSS 带宽。上游 issue #5542 的 contributor 明确说明，不触碰最新 snapshot 与重启所需 commitlog suffix 时，可在运行中移动或删除这些历史文件。
@@ -820,7 +821,9 @@
 - 2026-06-20 桌面能力清单单测边界：Tauri `capabilities.rs` 必须用 Rust 单测同时覆盖桌面 runtime capability 清单顺序、无重复、真实桌面能力完整包含，并显式排除 `auth.requestLogin`、`payment.request`、`file.captureImage`、`scanner.scanQrCode` 和 `haptics.impact` 等未接入能力；桌面单端配置检查会反查该测试边界，避免只靠方案文档或共享 profile 发现桌面壳能力伪声明。
 - 2026-06-20 桌面本地通知契约镜像：Tauri `notification.showLocal` 的 title / body 归一化、长度上限和成功结果 action 必须镜像共享 HostBridge 契约；Rust 侧常量使用 `HOST_BRIDGE_LOCAL_NOTIFICATION_TITLE_MAX_LENGTH`、`HOST_BRIDGE_LOCAL_NOTIFICATION_BODY_MAX_LENGTH` 和 `HOST_BRIDGE_LOCAL_NOTIFICATION_DELIVERED_TO_SYSTEM_ACTION` 命名，桌面单端配置检查会与 `packages/shared/src/contracts/hostBridge.ts` 比对数值并反查成功结果由该 action 常量组装，避免通知 payload 边界变成桌面壳本地规则。
 - 2026-06-19 桌面壳外链打开 helper 共用：Tauri WebView 外域拦截和 HostBridge `app.openExternalUrl` 都必须复用 `open_normalized_desktop_external_url` 执行系统外链打开动作；HostBridge 分支仍先用 `normalize_external_url` 保留 payload 错误语义并把 opener 错误回传给 H5，WebView 拦截保持 best-effort 静默处理。桌面壳配置检查会拒绝 `dispatch.rs` 直接调用 `app.opener().open_url` 绕过该 helper，避免两条离壳路径漂移。
+
 > 2026-07-18 覆盖说明：本段后续关于微信 `navigation.openNativePage`、生成结果订阅页、`[subscribe-message]` 日志和订阅页路由门禁的 2026-06 决策均已由旧创作模板退役决策废止，只作为历史记录。Expo / Tauri 的同源 H5 受控导航及微信登录、支付、分享能力继续有效。
+
 - 2026-06-20 H5 原生导航预校验：`navigateHostNativePage()` 在 `native_app` 下发送 `navigation.openNativePage` 前必须先拒绝空值、控制字符、协议相对 URL、外域绝对 URL 和非 `http:` / `https:` 协议目标；同源绝对 URL、`/path` 和保留给桌面壳兼容的相对 route 继续交给 Expo / Tauri 壳二次归一并补写宿主上下文。微信小程序分支仍按小程序页面 URL 语义走 `wx.miniProgram.navigateTo`，不套原生 App 同源 H5 预校验。根级 `npm run check:native-shells` 会反查 H5 facade 仍使用 `normalizeNativeAppPageUrl(...)` 且发送归一后的 URL，避免明显不安全目标触达原生壳。
 - 2026-06-20 微信受控原生页能力声明：微信小程序壳真实 capability profile 声明 `navigation.openNativePage`，用于承接已经登记并测试的小程序原生页 flow；当前订阅生成结果通知页通过 H5 `requestGenerationResultSubscribePermission()` 调用 `navigateHostNativePage()` 打开 `/pages/subscribe-message/index`，小程序页再调用真实 `wx.requestSubscribeMessage` 并按既有结果协议回灌。根级 `npm run check:native-shells` 必须把该能力反查到共享 profile、微信 `WECHAT_HOST_CAPABILITIES` 镜像、订阅页协议常量、H5 入口、小程序 host-bridge / shell / page 文件和相关测试；该能力不代表开放任意小程序页面跳转。
 - 2026-06-18 能力声明收紧：`packages/shared/src/contracts/hostBridge.ts` 提供 HostBridge method / capability 白名单，H5 的 `getHostRuntime()` 会解析并过滤 `hostCapabilities`；`openHostShare`、`writeHostClipboardText`、`requestHostHapticsImpact`、`setHostAppTitle`、`exportHostTextFile` 等 native 能力只在宿主声明对应 capability 后调用。发布分享弹窗只有声明 `share.open` 时才显示受控分享动作，并按 `hostShell` 区分 Expo 系统分享面板和 Tauri 剪贴板复制表达，避免旧壳或裁剪壳露出不可用入口。
@@ -4484,3 +4487,9 @@
 - 决策：普通手机号认证请求统一使用可选 `countryCode` 与必填 `purePhoneNumber`，省略国家码时默认中国大陆 `86`，直接替换旧 `phone` 字段。前端把浏览器 E.164 自动填充值拆成这两个字段；后端先验证国家码，再复用纯手机号规范化并生成 E.164 存储。
 - 微信边界：小程序客户端仍只上传 `wechatPhoneCode`；`platform-auth` 必须要求微信成功响应中的 `phoneNumber`、`countryCode` 与 `purePhoneNumber` 均存在且非空，但只使用后两项执行国家码校验和 E.164 构造。腾讯官方仅说明境外 `phoneNumber` 会带区号，并未承诺 E.164 格式，中国号码示例中它与纯号码相同，因此不得校验 `phoneNumber == +{countryCode}{purePhoneNumber}`。微信字段缺失时失败关闭，不能使用普通请求的 `86` 默认值。
 - 数据边界：认证投影与 SpacetimeDB 的 `phone_number_e164` 保持不变，不新增国家码或纯号码列，也不需要 schema 迁移或 bindings 生成。
+
+## 2026-07-27 图片画布左侧素材库统一可见范围多选与批量下载
+
+- 范围边界：本次只重写左侧素材库选择模式，不改变中央画布舞台和图层列表的选择、框选或下载语义。可选择集合固定为当前搜索结果中已展开、上传完成且媒体地址有效的素材；搜索或折叠变化后立即清理不可见选择。
+- 输入语义：桌面普通点击替换选择，`Ctrl / Cmd + 点击` 切换追加，`Shift + 点击` 按当前可见顺序选择连续区间，`Ctrl / Cmd + Shift + 点击` 追加连续区间；触摸和笔输入单击切换选择。退出选择模式、关闭素材栏或切到图层栏统一清空选择、锚点和框选状态，非选择模式不显示历史选中高亮。
+- 工具栏与导出：批量工具栏作为素材滚动列表的固定非滚动底栏，提供可见范围全选 / 取消全选、下载、删除和取消；选择模式隐藏单行下载 / 重命名并禁用行拖拽和右键菜单。移动端选择模式使用独立的侧栏高度状态，并让素材列表恢复纵向滚动，避免普通模式 `14rem` 高度上限被固定底栏、标题和搜索区吃完。一个选中素材直接下载，多个选中素材复用画布素材导出管线生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，根目录为 `项目名-选中素材/`；单素材、序列帧和两类集合 ZIP 的下载名统一包含到秒的本地时间戳。素材卡整行是统一选择命中区，标题和空白区不得绕过 Ctrl / Cmd / Shift 选择处理。
diff --git a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
index d9d3a8e3f..598069637 100644
--- a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
+++ b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
@@ -28,6 +28,8 @@
 - 锁定、分组、翻转等状态不影响图片文件导出，但写入元数据。
 - 空画布时按钮置灰，或点击后显示轻提示。
 
+左侧素材库选择模式同时支持导出当前可见范围内的选中素材：只选中一个普通素材时直接下载原文件；选中多个素材时沿用画布素材 ZIP 的读取、去重、媒体分目录、序列帧、元数据、部分失败和浏览器下载能力，生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，包内根目录为 `项目名-选中素材/`。单素材、单序列帧、选中素材 ZIP 和画布素材 ZIP 的下载文件名都必须包含到秒的本地时间戳，避免同一天重复导出时重名。该入口不改变中央画布和图层列表的选择 / 下载语义。
+
 暂不实现：
 
 - 画布整体截图 PNG。
@@ -40,7 +42,7 @@
 导出文件名：
 
 ```text
-项目名-画布素材-YYYYMMDD.zip
+项目名-画布素材-YYYYMMDD-HHmmss.zip
 ```
 
 包内结构：
@@ -72,7 +74,7 @@
 普通序列帧 ZIP 结构：
 
 ```text
-角色动作-Sequence.zip
+角色动作-Sequence-YYYYMMDD-HHmmss.zip
 ├─ frames/
 │  ├─ frame-01.png
 │  └─ frame-02.png
@@ -84,7 +86,7 @@
 Spine JSON ZIP 结构：
 
 ```text
-角色动作-SpineJSON.zip
+角色动作-SpineJSON-YYYYMMDD-HHmmss.zip
 ├─ frames/
 │  ├─ frame-01.png
 │  └─ frame-02.png
@@ -197,6 +199,8 @@ assetObjectId > objectKey > sourceAssetId > src
 - 动作图层右键菜单把 `导出为` 作为一级入口，二级菜单提供 `序列帧导出（zip）` 和 `Spine 导出（zip）`。
 - 单图层普通序列帧 ZIP 包含 `frames/`、`preview.gif`、`metadata.json` 和 `manifest.txt`，且不包含 `skeleton.json`。
 - 序列帧导出的 `skeleton.json` 可被独立验证器解析并预览。
+- 左侧素材库只选一个素材时直接下载该素材，不创建集合 ZIP。
+- 左侧素材库选择多个素材时只把选中素材写入 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，不混入未选素材，并继续覆盖部分失败和全部失败边界。
 
 ## Spine JSON 验证器
 
@@ -225,7 +229,6 @@ npm run spine-export-validator:build
 
 ## 后续扩展
 
-- 导出当前选中素材。
 - 导出画布快照 PNG。
 - 导出可恢复工程包。
 - 导入工程包恢复画布。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 50ab585e2..cc70c368d 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -146,7 +146,8 @@
 - 音频 / 视频素材卡和画布媒体图层必须提供稳定的非文字视觉预览：优先使用 `thumbnailSrc` / 视频 `poster`，没有真实首帧或音频封面时使用由媒体类型、素材名和地址派生的确定性视觉底图。视频图层使用原生 `<video controls preload="metadata" playsInline>` 播放，外层图层仍承接选择和拖拽语义；音频图层播放前继续通过 `/api/assets/read-url` 换签。画布素材导出按 `mediaType` 保留真实媒体格式：图片进入 `images/`，音频 / 视频进入 `media/`，文件扩展名从响应 MIME、`objectKey` 或源 URL 推断，不得把音频 / 视频导出成 PNG。
 - 画布素材 ZIP 的 `metadata.json` 只保存前端信息弹窗和导出文件列表可见的展示快照：项目标题、导出时间、图层标题、文件路径、类型、生成输入、模型显示名、Task 短 ID、Object 显示值、Resolution / 时长和导出错误。导出的生成输入只保留用户实际填写或选择的内容；系统默认兜底提示词、固定工作流提示词、内置图标描述、UI 提取素材固定提示词等内置提示词即使存在于历史 `generationInputs`，也不得写入导出元数据。不得把 `projectId`、`layerId`、`resourceId`、`sourceAssetId`、`sourceResourceId`、原始 `prompt` / `actualPrompt` / `provider` 或画布坐标、锁定、隐藏等布局状态写入导出元数据；Object 字段仅沿用信息弹窗当前可见值。
 - `生成角色动作` 的完成结果按序列帧素材处理：图层主 `src` 使用 `frames[0].imageSrc`，`mediaType` 固定为 `image-sequence`，`assetKind` 固定为 `character-animation`，完整帧列表写入 `imageSequenceFrames`；`previewVideoPath` 只保留为上游预览视频来源，不作为画布主媒体。下载和 ZIP 导出必须因此得到序列帧 ZIP / frames 目录，不能回退为预览视频或首帧 PNG；后端抽帧后逐帧保存带绿幕源图，上传时消费并释放原帧字节，再用该对象的 600 秒 OSS URL 完成透明化并落盘透明帧素材。
-- 素材面板支持按素材名、文件夹名、生成信息、模型、任务和媒体类型搜索，并支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。
+- 素材面板支持按素材名、文件夹名、生成信息、模型、任务和媒体类型搜索。选择模式只作用于左侧素材库当前搜索结果中已展开、上传完成且媒体地址有效的可见素材，素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：桌面鼠标 / 键盘普通点击替换选择，`Ctrl / Cmd + 点击` 切换追加，`Shift + 点击` 按当前可见顺序选择连续区间，`Ctrl / Cmd + Shift + 点击` 追加区间；触摸和笔输入单击采用切换选择。搜索或折叠变化后必须剔除已不可见选择，退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
+- 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示当前已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。
 - 图层面板支持按图层名、生成信息、模型、任务和媒体类型搜索；支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
 - 鼠标滚轮默认按设备原始 `deltaX / deltaY` 二维平移画布视口；当按住 Shift 且设备上报 `deltaX = 0` 时，视口输入适配层把 `deltaY` 映射为横向位移并将纵向位移置零，核心平移模型仍只消费归一化后的 X / Y。按住 Ctrl / Cmd 滚轮才缩放画布，并阻止浏览器页面缩放。缩放比例显示保持现有换算口径，最低可缩小到 `5%`。
diff --git a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
index 5fb1720a7..35ed48784 100644
--- a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
@@ -11,6 +11,7 @@ import {
 import type { Dispatch, SetStateAction } from 'react';
 
 import { PlatformTextField } from '../common/PlatformTextField';
+import type { AssetSelectionInteraction } from './ImageCanvasAssetLibraryModel';
 import type {
   GroupedEditorAssetFolder,
   UploadFilesOptions,
@@ -36,6 +37,7 @@ type ImageCanvasAssetFolderSectionViewProps = {
   suppressAssetClickRef: { current: boolean };
   isAssetSelectionMode: boolean;
   selectedAssetIds: Set<string>;
+  visibleAssetIds: string[];
   assetMoveDropFolderId: string | null;
   renamingFolder: { folderId: string; value: string } | null;
   renamingAsset: { assetId: string; value: string } | null;
@@ -48,9 +50,11 @@ type ImageCanvasAssetFolderSectionViewProps = {
   setActiveUploadFolderId: Dispatch<SetStateAction<string>>;
   setUploadDropTarget: Dispatch<SetStateAction<'canvas' | 'assets' | null>>;
   setAssetPointerDrag: Dispatch<SetStateAction<AssetPointerDragState | null>>;
-  setSelectedAssetIds: Dispatch<SetStateAction<Set<string>>>;
   updateAssetMoveDropFolder: (folderId: string | null) => void;
-  addUploadedFiles: (files: FileList | File[], options?: UploadFilesOptions) => void;
+  addUploadedFiles: (
+    files: FileList | File[],
+    options?: UploadFilesOptions,
+  ) => void;
   requestUpload: (target: UploadTarget, options?: UploadRequestOptions) => void;
   moveAssetToFolder: (assetId: string, folderId: string) => void;
   toggleAssetFolder: (folderId: string) => void;
@@ -61,7 +65,10 @@ type ImageCanvasAssetFolderSectionViewProps = {
   commitAssetRename: (asset: EditorAsset) => void;
   deleteUploadedAsset: (asset: EditorAsset) => void;
   submitAssetToShowcase: (asset: EditorAsset) => void;
-  toggleAssetSelected: (assetId: string) => void;
+  toggleAssetSelected: (
+    assetId: string,
+    interaction: AssetSelectionInteraction,
+  ) => void;
   addAssetLayer: (asset: EditorAsset) => void;
   onDownloadAsset: (asset: EditorAsset) => void;
 };
@@ -72,6 +79,7 @@ export function ImageCanvasAssetFolderSectionView({
   suppressAssetClickRef,
   isAssetSelectionMode,
   selectedAssetIds,
+  visibleAssetIds,
   assetMoveDropFolderId,
   renamingFolder,
   renamingAsset,
@@ -80,7 +88,6 @@ export function ImageCanvasAssetFolderSectionView({
   setActiveUploadFolderId,
   setUploadDropTarget,
   setAssetPointerDrag,
-  setSelectedAssetIds,
   updateAssetMoveDropFolder,
   addUploadedFiles,
   requestUpload,
@@ -241,11 +248,11 @@ export function ImageCanvasAssetFolderSectionView({
             suppressAssetClickRef={suppressAssetClickRef}
             isAssetSelectionMode={isAssetSelectionMode}
             selectedAssetIds={selectedAssetIds}
+            visibleAssetIds={visibleAssetIds}
             renamingAsset={renamingAsset}
             setRenamingAsset={setRenamingAsset}
             setUploadDropTarget={setUploadDropTarget}
             setAssetPointerDrag={setAssetPointerDrag}
-            setSelectedAssetIds={setSelectedAssetIds}
             updateAssetMoveDropFolder={updateAssetMoveDropFolder}
             addUploadedFiles={addUploadedFiles}
             moveAssetToFolder={moveAssetToFolder}
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts b/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts
index 6675d690c..4aa7f8c3a 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts
+++ b/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts
@@ -11,6 +11,7 @@ import {
   groupAssetsByFolder,
   moveAssetMarqueeToPointer,
   moveAssetToFolderLocally,
+  reconcileAssetSelection,
   removeAssetById,
   removeSelectedAssets,
   renameAssetById,
@@ -18,19 +19,18 @@ import {
   replaceLocalAssetFolder,
   resolveAllAssetSelection,
   resolveAssetFolderIdFromPoint,
+  resolveAssetSelection,
   resolveAssetShowcaseSubmissionState,
   resolveDefaultAssetFolder,
   resolvePinnedAssetMoveFolderId,
   resolvePreferredAssetUploadFolder,
   resolveUploadAssetFolder,
+  resolveVisibleAssetSelectionToggle,
   selectUploadedAssetsInRect,
   toggleAssetFolderCollapsed,
   toggleAssetSelection,
 } from './ImageCanvasAssetLibraryModel';
-import type {
-  EditorAsset,
-  EditorAssetFolder,
-} from './ImageCanvasEditorTypes';
+import type { EditorAsset, EditorAssetFolder } from './ImageCanvasEditorTypes';
 
 function createFolder(
   overrides: Partial<EditorAssetFolder> = {},
@@ -91,9 +91,9 @@ describe('ImageCanvasAssetLibraryModel', () => {
   });
 
   it('explains why assets cannot be submitted to showcase review', () => {
-    expect(
-      resolveAssetShowcaseSubmissionState(createAsset()).reason,
-    ).toBe('只有生成素材可以提交精选审核');
+    expect(resolveAssetShowcaseSubmissionState(createAsset()).reason).toBe(
+      '只有生成素材可以提交精选审核',
+    );
     expect(
       resolveAssetShowcaseSubmissionState(
         createAsset({ sourceType: 'generated', persisted: false }),
@@ -185,15 +185,15 @@ describe('ImageCanvasAssetLibraryModel', () => {
   });
 
   it('renames assets, toggles folders and creates local folders', () => {
-    expect(renameAssetById([createAsset()], 'asset-a', '新名字')[0]).toMatchObject(
-      { label: '新名字' },
-    );
+    expect(
+      renameAssetById([createAsset()], 'asset-a', '新名字')[0],
+    ).toMatchObject({ label: '新名字' });
     expect(
       renameAssetFolderById([createFolder()], 'project', '默认素材')[0],
     ).toMatchObject({ label: '默认素材' });
-    expect(toggleAssetFolderCollapsed([createFolder()], 'project')[0]).toMatchObject(
-      { collapsed: true },
-    );
+    expect(
+      toggleAssetFolderCollapsed([createFolder()], 'project')[0],
+    ).toMatchObject({ collapsed: true });
     expect(
       createLocalAssetFolder({
         folderId: 'folder-local',
@@ -241,9 +241,9 @@ describe('ImageCanvasAssetLibraryModel', () => {
       createAsset({ id: 'asset-b', folderId: 'project' }),
     ];
 
-    expect(removeAssetById(assets, 'asset-a').map((asset) => asset.id)).toEqual([
-      'asset-b',
-    ]);
+    expect(removeAssetById(assets, 'asset-a').map((asset) => asset.id)).toEqual(
+      ['asset-b'],
+    );
     expect(resolveDefaultAssetFolder(folders)?.id).toBe('project');
     expect(
       resolveUploadAssetFolder([
@@ -290,6 +290,117 @@ describe('ImageCanvasAssetLibraryModel', () => {
     expect(removal.deletedAssets.map((asset) => asset.id)).toEqual(['asset-b']);
   });
 
+  it('applies desktop single, additive and visible range selection semantics', () => {
+    const visibleAssetIds = ['asset-a', 'asset-b', 'asset-c', 'asset-d'];
+    const initial = {
+      selectedAssetIds: new Set(['asset-a']),
+      anchorAssetId: 'asset-a',
+    };
+    const replaced = resolveAssetSelection({
+      ...initial,
+      visibleAssetIds,
+      targetAssetId: 'asset-c',
+    });
+    expect([...replaced.selectedAssetIds]).toEqual(['asset-c']);
+
+    const appended = resolveAssetSelection({
+      ...replaced,
+      visibleAssetIds,
+      targetAssetId: 'asset-a',
+      ctrlKey: true,
+    });
+    expect([...appended.selectedAssetIds]).toEqual(['asset-c', 'asset-a']);
+    expect([
+      ...resolveAssetSelection({
+        ...appended,
+        visibleAssetIds,
+        targetAssetId: 'asset-a',
+        metaKey: true,
+      }).selectedAssetIds,
+    ]).toEqual(['asset-c']);
+
+    const range = resolveAssetSelection({
+      selectedAssetIds: new Set(['asset-a', 'asset-d']),
+      anchorAssetId: 'asset-a',
+      visibleAssetIds,
+      targetAssetId: 'asset-c',
+      shiftKey: true,
+    });
+    expect([...range.selectedAssetIds]).toEqual([
+      'asset-a',
+      'asset-b',
+      'asset-c',
+    ]);
+    expect([
+      ...resolveAssetSelection({
+        selectedAssetIds: new Set(['asset-d']),
+        anchorAssetId: 'asset-b',
+        visibleAssetIds,
+        targetAssetId: 'asset-c',
+        shiftKey: true,
+        ctrlKey: true,
+      }).selectedAssetIds,
+    ]).toEqual(['asset-d', 'asset-b', 'asset-c']);
+  });
+
+  it('toggles touch and pen targets without replacing prior selection', () => {
+    const touchSelection = resolveAssetSelection({
+      selectedAssetIds: new Set(['asset-a']),
+      anchorAssetId: 'asset-a',
+      visibleAssetIds: ['asset-a', 'asset-b'],
+      targetAssetId: 'asset-b',
+      pointerKind: 'touch',
+    });
+    expect([...touchSelection.selectedAssetIds]).toEqual([
+      'asset-a',
+      'asset-b',
+    ]);
+    expect([
+      ...resolveAssetSelection({
+        ...touchSelection,
+        visibleAssetIds: ['asset-a', 'asset-b'],
+        targetAssetId: 'asset-a',
+        pointerKind: 'pen',
+      }).selectedAssetIds,
+    ]).toEqual(['asset-b']);
+  });
+
+  it('reconciles hidden selections and toggles only the visible asset set', () => {
+    expect(
+      reconcileAssetSelection({
+        selectedAssetIds: new Set(['asset-a', 'asset-hidden']),
+        anchorAssetId: 'asset-hidden',
+        visibleAssetIds: ['asset-a', 'asset-b'],
+      }),
+    ).toEqual({
+      selectedAssetIds: new Set(['asset-a']),
+      anchorAssetId: null,
+    });
+    expect([
+      ...resolveVisibleAssetSelectionToggle({
+        selectedAssetIds: new Set(['asset-hidden']),
+        visibleAssetIds: ['asset-a', 'asset-b'],
+      }),
+    ]).toEqual(['asset-hidden', 'asset-a', 'asset-b']);
+    expect([
+      ...resolveVisibleAssetSelectionToggle({
+        selectedAssetIds: new Set(['asset-hidden', 'asset-a', 'asset-b']),
+        visibleAssetIds: ['asset-a', 'asset-b'],
+      }),
+    ]).toEqual(['asset-hidden']);
+  });
+
+  it('excludes unfinished and empty uploaded assets from selection', () => {
+    expect(
+      getSelectableAssets([
+        createAsset({ id: 'ready' }),
+        createAsset({ id: 'uploading', uploadStatus: 'uploading' }),
+        createAsset({ id: 'failed', uploadStatus: 'failed' }),
+        createAsset({ id: 'empty', src: '  ' }),
+      ]).map((asset) => asset.id),
+    ).toEqual(['ready']);
+  });
+
   it('moves assets between folders locally', () => {
     expect(
       moveAssetToFolderLocally([createAsset()], 'asset-a', 'folder-role')[0],
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryModel.ts b/src/components/image-editor/ImageCanvasAssetLibraryModel.ts
index 09ba9bd51..6f98853de 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryModel.ts
+++ b/src/components/image-editor/ImageCanvasAssetLibraryModel.ts
@@ -161,9 +161,7 @@ export function selectUploadedAssetsInRect({
   selectionRect: ClientRectLike;
 }) {
   const uploadedAssetIds = new Set(
-    assets
-      .filter((asset) => asset.sourceKind === 'uploaded')
-      .map((asset) => asset.id),
+    getSelectableAssets(assets).map((asset) => asset.id),
   );
   return new Set(
     assetTargets
@@ -190,14 +188,20 @@ function normalizeSearchQuery(query: string) {
   return query.trim().toLowerCase();
 }
 
-function matchesSearchText(query: string, values: Array<string | null | undefined>) {
+function matchesSearchText(
+  query: string,
+  values: Array<string | null | undefined>,
+) {
   if (!query) {
     return true;
   }
   return values.some((value) => value?.toLowerCase().includes(query));
 }
 
-function startsWithSearchText(query: string, values: Array<string | null | undefined>) {
+function startsWithSearchText(
+  query: string,
+  values: Array<string | null | undefined>,
+) {
   if (!query) {
     return true;
   }
@@ -285,7 +289,118 @@ export function filterGroupedAssetsBySearch(
 }
 
 export function getSelectableAssets(assets: EditorAsset[]) {
-  return assets.filter((asset) => asset.sourceKind === 'uploaded');
+  return assets.filter(
+    (asset) =>
+      asset.sourceKind === 'uploaded' &&
+      asset.uploadStatus !== 'uploading' &&
+      asset.uploadStatus !== 'failed' &&
+      asset.src.trim().length > 0,
+  );
+}
+
+export type AssetSelectionPointerKind = 'keyboard' | 'mouse' | 'pen' | 'touch';
+
+export type AssetSelectionInteraction = {
+  visibleAssetIds: string[];
+  shiftKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  pointerKind?: AssetSelectionPointerKind;
+};
+
+export type AssetSelectionState = {
+  selectedAssetIds: Set<string>;
+  anchorAssetId: string | null;
+};
+
+function dedupeAssetIds(assetIds: string[]) {
+  return Array.from(new Set(assetIds));
+}
+
+export function reconcileAssetSelection({
+  selectedAssetIds,
+  anchorAssetId,
+  visibleAssetIds,
+}: AssetSelectionState & { visibleAssetIds: string[] }): AssetSelectionState {
+  const visibleIds = new Set(visibleAssetIds);
+  const nextSelectedAssetIds = new Set(
+    [...selectedAssetIds].filter((assetId) => visibleIds.has(assetId)),
+  );
+  return {
+    selectedAssetIds: nextSelectedAssetIds,
+    anchorAssetId:
+      anchorAssetId && visibleIds.has(anchorAssetId) ? anchorAssetId : null,
+  };
+}
+
+export function resolveAssetSelection({
+  selectedAssetIds,
+  anchorAssetId,
+  visibleAssetIds,
+  targetAssetId,
+  shiftKey = false,
+  ctrlKey = false,
+  metaKey = false,
+  pointerKind = 'mouse',
+}: AssetSelectionState &
+  AssetSelectionInteraction & { targetAssetId: string }): AssetSelectionState {
+  const orderedAssetIds = dedupeAssetIds(visibleAssetIds);
+  const targetIndex = orderedAssetIds.indexOf(targetAssetId);
+  if (targetIndex < 0) {
+    return reconcileAssetSelection({
+      selectedAssetIds,
+      anchorAssetId,
+      visibleAssetIds: orderedAssetIds,
+    });
+  }
+
+  const anchorIndex = anchorAssetId
+    ? orderedAssetIds.indexOf(anchorAssetId)
+    : -1;
+  const shouldAppend = ctrlKey || metaKey;
+  if (shiftKey && anchorIndex >= 0) {
+    const rangeStart = Math.min(anchorIndex, targetIndex);
+    const rangeEnd = Math.max(anchorIndex, targetIndex);
+    const rangeAssetIds = orderedAssetIds.slice(rangeStart, rangeEnd + 1);
+    return {
+      selectedAssetIds: shouldAppend
+        ? new Set([...selectedAssetIds, ...rangeAssetIds])
+        : new Set(rangeAssetIds),
+      anchorAssetId,
+    };
+  }
+
+  if (shouldAppend || pointerKind === 'touch' || pointerKind === 'pen') {
+    return {
+      selectedAssetIds: toggleAssetSelection(selectedAssetIds, targetAssetId),
+      anchorAssetId: targetAssetId,
+    };
+  }
+
+  return {
+    selectedAssetIds: new Set([targetAssetId]),
+    anchorAssetId: targetAssetId,
+  };
+}
+
+export function resolveVisibleAssetSelectionToggle({
+  selectedAssetIds,
+  visibleAssetIds,
+}: {
+  selectedAssetIds: Set<string>;
+  visibleAssetIds: string[];
+}) {
+  const orderedAssetIds = dedupeAssetIds(visibleAssetIds);
+  const allVisibleAssetsSelected =
+    orderedAssetIds.length > 0 &&
+    orderedAssetIds.every((assetId) => selectedAssetIds.has(assetId));
+  if (allVisibleAssetsSelected) {
+    const visibleIds = new Set(orderedAssetIds);
+    return new Set(
+      [...selectedAssetIds].filter((assetId) => !visibleIds.has(assetId)),
+    );
+  }
+  return new Set([...selectedAssetIds, ...orderedAssetIds]);
 }
 
 export type AssetShowcaseSubmissionState = {
@@ -479,7 +594,9 @@ export function renameAssetFolderById(
 
 export function resolveDefaultAssetFolder(assetFolders: EditorAssetFolder[]) {
   return (
-    assetFolders.find((folder) => folder.systemDefault) ?? assetFolders[0] ?? null
+    assetFolders.find((folder) => folder.systemDefault) ??
+    assetFolders[0] ??
+    null
   );
 }
 
@@ -494,7 +611,10 @@ export function resolveUploadAssetFolder(assetFolders: EditorAssetFolder[]) {
 export function resolvePreferredAssetUploadFolder(
   assetFolders: EditorAssetFolder[],
 ) {
-  return resolveUploadAssetFolder(assetFolders) ?? resolveDefaultAssetFolder(assetFolders);
+  return (
+    resolveUploadAssetFolder(assetFolders) ??
+    resolveDefaultAssetFolder(assetFolders)
+  );
 }
 
 export function deleteAssetFolderLocally({
@@ -550,7 +670,9 @@ export function removeSelectedAssets(
   assets: EditorAsset[],
   selectedAssetIds: Set<string>,
 ) {
-  const deletedAssets = assets.filter((asset) => selectedAssetIds.has(asset.id));
+  const deletedAssets = assets.filter((asset) =>
+    selectedAssetIds.has(asset.id),
+  );
   return {
     assets: assets.filter((asset) => !selectedAssetIds.has(asset.id)),
     deletedAssets,
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index 1b5bdab8d..d02ef342d 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -1,6 +1,7 @@
 import {
   Check,
   CheckSquare,
+  Download,
   Folder,
   Square,
   Trash2,
@@ -17,6 +18,7 @@ import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasAssetFolderSectionView } from './ImageCanvasAssetFolderSectionView';
+import type { AssetSelectionInteraction } from './ImageCanvasAssetLibraryModel';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type {
   AssetMarqueeState,
@@ -49,13 +51,15 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   assetFolders: EditorAssetFolder[];
   isAssetSelectionMode: boolean;
   selectedAssetIds: Set<string>;
+  visibleAssetIds: string[];
   assetMoveDropFolderId: string | null;
   pinnedAssetMoveFolderId: string | null;
   creatingFolder: boolean;
   newFolderName: string;
   renamingFolder: { folderId: string; value: string } | null;
   renamingAsset: { assetId: string; value: string } | null;
-  allSelectableAssetsSelected: boolean;
+  allVisibleAssetsSelected: boolean;
+  isExportingSelectedAssets: boolean;
   assetMarquee: AssetMarqueeState | null;
   setCreatingFolder: Dispatch<SetStateAction<boolean>>;
   setNewFolderName: Dispatch<SetStateAction<string>>;
@@ -68,18 +72,14 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   setActiveUploadFolderId: Dispatch<SetStateAction<string>>;
   setUploadDropTarget: Dispatch<SetStateAction<'canvas' | 'assets' | null>>;
   setAssetPointerDrag: Dispatch<SetStateAction<AssetPointerDragState | null>>;
-  setSelectedAssetIds: Dispatch<SetStateAction<Set<string>>>;
-  onAssetMarqueePointerDown: (
-    event: ReactPointerEvent<HTMLDivElement>,
-  ) => void;
-  onAssetMarqueePointerMove: (
-    event: ReactPointerEvent<HTMLDivElement>,
-  ) => void;
-  onAssetMarqueePointerUp: (
-    event: ReactPointerEvent<HTMLDivElement>,
-  ) => void;
+  onAssetMarqueePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
   updateAssetMoveDropFolder: (folderId: string | null) => void;
-  addUploadedFiles: (files: FileList | File[], options?: UploadFilesOptions) => void;
+  addUploadedFiles: (
+    files: FileList | File[],
+    options?: UploadFilesOptions,
+  ) => void;
   requestUpload: (target: UploadTarget, options?: UploadRequestOptions) => void;
   moveAssetToFolder: (assetId: string, folderId: string) => void;
   commitNewAssetFolder: () => void | Promise<void>;
@@ -91,10 +91,14 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   commitAssetRename: (asset: EditorAsset) => void;
   deleteUploadedAsset: (asset: EditorAsset) => void;
   submitAssetToShowcase: (asset: EditorAsset) => void;
-  toggleAssetSelected: (assetId: string) => void;
+  toggleAssetSelected: (
+    assetId: string,
+    interaction: AssetSelectionInteraction,
+  ) => void;
   addAssetLayer: (asset: EditorAsset) => void;
   onDownloadAsset: (asset: EditorAsset) => void;
-  toggleAllAssetsSelected: () => void;
+  toggleAllAssetsSelected: (visibleAssetIds: string[]) => void;
+  downloadSelectedAssets: (visibleAssetIds: string[]) => void | Promise<void>;
   deleteSelectedAssets: () => void;
   closeAssetSelectionMode: () => void;
 };
@@ -107,13 +111,15 @@ export function ImageCanvasAssetLibraryPanelView({
   assetFolders,
   isAssetSelectionMode,
   selectedAssetIds,
+  visibleAssetIds,
   assetMoveDropFolderId,
   pinnedAssetMoveFolderId,
   creatingFolder,
   newFolderName,
   renamingFolder,
   renamingAsset,
-  allSelectableAssetsSelected,
+  allVisibleAssetsSelected,
+  isExportingSelectedAssets,
   assetMarquee,
   setCreatingFolder,
   setNewFolderName,
@@ -122,7 +128,6 @@ export function ImageCanvasAssetLibraryPanelView({
   setActiveUploadFolderId,
   setUploadDropTarget,
   setAssetPointerDrag,
-  setSelectedAssetIds,
   onAssetMarqueePointerDown,
   onAssetMarqueePointerMove,
   onAssetMarqueePointerUp,
@@ -143,10 +148,12 @@ export function ImageCanvasAssetLibraryPanelView({
   addAssetLayer,
   onDownloadAsset,
   toggleAllAssetsSelected,
+  downloadSelectedAssets,
   deleteSelectedAssets,
   closeAssetSelectionMode,
 }: ImageCanvasAssetLibraryPanelViewProps) {
   return (
+    <div className="image-canvas-editor__asset-library">
     <div
       ref={assetListRef}
       className="image-canvas-editor__asset-list"
@@ -162,8 +169,9 @@ export function ImageCanvasAssetLibraryPanelView({
         >
           <Folder className="h-4 w-4" />
           <span>
-            {assetFolders.find((folder) => folder.id === pinnedAssetMoveFolderId)
-              ?.label ?? '目标文件夹'}
+              {assetFolders.find(
+                (folder) => folder.id === pinnedAssetMoveFolderId,
+              )?.label ?? '目标文件夹'}
           </span>
         </div>
       ) : null}
@@ -191,7 +199,11 @@ export function ImageCanvasAssetLibraryPanelView({
               }
             }}
           />
-          <EditorIconButton type="submit" label="保存素材文件夹" icon={Check} />
+            <EditorIconButton
+              type="submit"
+              label="保存素材文件夹"
+              icon={Check}
+            />
           <EditorIconButton
             label="取消新建素材文件夹"
             icon={X}
@@ -210,6 +222,7 @@ export function ImageCanvasAssetLibraryPanelView({
           suppressAssetClickRef={suppressAssetClickRef}
           isAssetSelectionMode={isAssetSelectionMode}
           selectedAssetIds={selectedAssetIds}
+            visibleAssetIds={visibleAssetIds}
           assetMoveDropFolderId={assetMoveDropFolderId}
           renamingFolder={renamingFolder}
           renamingAsset={renamingAsset}
@@ -218,7 +231,6 @@ export function ImageCanvasAssetLibraryPanelView({
           setActiveUploadFolderId={setActiveUploadFolderId}
           setUploadDropTarget={setUploadDropTarget}
           setAssetPointerDrag={setAssetPointerDrag}
-          setSelectedAssetIds={setSelectedAssetIds}
           updateAssetMoveDropFolder={updateAssetMoveDropFolder}
           addUploadedFiles={addUploadedFiles}
           requestUpload={requestUpload}
@@ -236,55 +248,73 @@ export function ImageCanvasAssetLibraryPanelView({
           onDownloadAsset={onDownloadAsset}
         />
       ))}
+        {assetMarquee ? (
+          <div
+            className="image-canvas-editor__asset-marquee"
+            aria-hidden="true"
+            style={{
+              left: Math.min(assetMarquee.startX, assetMarquee.currentX),
+              top: Math.min(assetMarquee.startY, assetMarquee.currentY),
+              width: Math.abs(assetMarquee.currentX - assetMarquee.startX),
+              height: Math.abs(assetMarquee.currentY - assetMarquee.startY),
+            }}
+          />
+        ) : null}
+      </div>
       {isAssetSelectionMode ? (
         <PlatformBatchActionToolbar
-          className="image-canvas-editor__asset-batch-toolbar"
+          className="static! left-auto! bottom-auto! grid! w-full! max-w-none! transform-none! grid-cols-2! gap-1.5! overflow-hidden! rounded-none! border-x-0! border-b-0! px-2.5! pt-2.5! pb-[calc(0.55rem+env(safe-area-inset-bottom,0px))]! shadow-[0_-8px_22px_rgba(15,23,42,0.08)]!"
           label="素材批量操作"
         >
           <PlatformActionButton
+            className="col-span-3 min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
             tone="secondary"
             size="sm"
-            onClick={toggleAllAssetsSelected}
+            disabled={visibleAssetIds.length === 0 || isExportingSelectedAssets}
+            onClick={() => toggleAllAssetsSelected(visibleAssetIds)}
           >
-            {allSelectableAssetsSelected ? (
+            {allVisibleAssetsSelected ? (
               <CheckSquare className="h-4 w-4" />
             ) : (
               <Square className="h-4 w-4" />
             )}
+            <span className="min-w-0 truncate">
             {selectedAssetIds.size > 0
-              ? `${allSelectableAssetsSelected ? '取消全选' : '全选'} · 已选 ${selectedAssetIds.size}`
+                ? `${allVisibleAssetsSelected ? '取消全选' : '全选'} · 已选 ${selectedAssetIds.size}`
               : '全选'}
+            </span>
           </PlatformActionButton>
           <PlatformActionButton
+            className="min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
+            tone="secondary"
+            size="sm"
+            disabled={selectedAssetIds.size === 0 || isExportingSelectedAssets}
+            onClick={() => void downloadSelectedAssets(visibleAssetIds)}
+          >
+            <Download className="h-4 w-4" />
+            {isExportingSelectedAssets ? '下载中' : '下载'}
+          </PlatformActionButton>
+          <PlatformActionButton
+            className="min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
             tone="warning"
             size="sm"
-            disabled={selectedAssetIds.size === 0}
+            disabled={selectedAssetIds.size === 0 || isExportingSelectedAssets}
             onClick={deleteSelectedAssets}
           >
             <Trash2 className="h-4 w-4" />
             删除
           </PlatformActionButton>
           <PlatformActionButton
+            className="min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
             tone="secondary"
             size="sm"
             onClick={closeAssetSelectionMode}
           >
+            <X />
             取消
           </PlatformActionButton>
         </PlatformBatchActionToolbar>
       ) : null}
-      {assetMarquee ? (
-        <div
-          className="image-canvas-editor__asset-marquee"
-          aria-hidden="true"
-          style={{
-            left: Math.min(assetMarquee.startX, assetMarquee.currentX),
-            top: Math.min(assetMarquee.startY, assetMarquee.currentY),
-            width: Math.abs(assetMarquee.currentX - assetMarquee.startX),
-            height: Math.abs(assetMarquee.currentY - assetMarquee.startY),
-          }}
-        />
-      ) : null}
     </div>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
index becd864a2..907f160b5 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
@@ -4,7 +4,10 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { ImageCanvasAssetRowView } from './ImageCanvasAssetRowView';
+import {
+  ImageCanvasAssetRowView,
+  type ImageCanvasAssetRowViewProps,
+} from './ImageCanvasAssetRowView';
 import type { EditorAsset } from './ImageCanvasEditorTypes';
 
 const useResolvedAssetReadUrlMock = vi.hoisted(() => vi.fn());
@@ -94,7 +97,7 @@ function renderAssetRow({
   renamingAsset?: { assetId: string; value: string } | null;
   suppressAssetClick?: boolean;
   addAssetLayer?: (asset: EditorAsset) => void;
-  toggleAssetSelected?: (assetId: string) => void;
+  toggleAssetSelected?: ImageCanvasAssetRowViewProps['toggleAssetSelected'];
   commitAssetRename?: (asset: EditorAsset) => void;
   deleteUploadedAsset?: (asset: EditorAsset) => void;
   submitAssetToShowcase?: (asset: EditorAsset) => void;
@@ -106,11 +109,11 @@ function renderAssetRow({
     suppressAssetClickRef: { current: suppressAssetClick },
     isAssetSelectionMode,
     selectedAssetIds,
+    visibleAssetIds: [asset.id],
     renamingAsset,
     setRenamingAsset: vi.fn(),
     setUploadDropTarget: vi.fn(),
     setAssetPointerDrag: vi.fn(),
-    setSelectedAssetIds: vi.fn(),
     updateAssetMoveDropFolder: vi.fn(),
     addUploadedFiles: vi.fn(),
     moveAssetToFolder: vi.fn(),
@@ -193,8 +196,35 @@ describe('ImageCanvasAssetRowView', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '选择素材账号素材A' }));
 
-    expect(toggleAssetSelected).toHaveBeenCalledWith('asset-1');
+    expect(toggleAssetSelected).toHaveBeenCalledWith('asset-1', {
+      visibleAssetIds: ['asset-1'],
+      shiftKey: false,
+      ctrlKey: false,
+      metaKey: false,
+      pointerKind: 'keyboard',
+    });
     expect(addAssetLayer).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole('button', { name: '下载素材账号素材A' }),
+    ).toBeNull();
+  });
+
+  it('forwards modifier keys to selection', () => {
+    const toggleAssetSelected = vi.fn();
+    renderAssetRow({ isAssetSelectionMode: true, toggleAssetSelected });
+    fireEvent.click(screen.getByText('账号素材A'), {
+      ctrlKey: true,
+      shiftKey: true,
+    });
+
+    expect(toggleAssetSelected).toHaveBeenCalledWith(
+      'asset-1',
+      expect.objectContaining({
+        ctrlKey: true,
+        shiftKey: true,
+        pointerKind: 'keyboard',
+      }),
+    );
   });
 
   it('renders rename input and commits with Enter', () => {
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index 9f27b5d2f..67e3c4eea 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -1,10 +1,17 @@
 import { Check, Download, Pencil, Video, X } from 'lucide-react';
-import type { Dispatch, SetStateAction } from 'react';
+import type {
+  Dispatch,
+  MouseEvent as ReactMouseEvent,
+  SetStateAction,
+} from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
 import { PlatformTextField } from '../common/PlatformTextField';
-import { resolveAssetShowcaseSubmissionState } from './ImageCanvasAssetLibraryModel';
+import {
+  type AssetSelectionInteraction,
+  resolveAssetShowcaseSubmissionState,
+} from './ImageCanvasAssetLibraryModel';
 import type { UploadFilesOptions } from './ImageCanvasAssetLibraryPanelView';
 import {
   ASSET_DRAG_MIME_TYPE,
@@ -33,13 +40,13 @@ export type ImageCanvasAssetRowViewProps = {
   suppressAssetClickRef: { current: boolean };
   isAssetSelectionMode: boolean;
   selectedAssetIds: Set<string>;
+  visibleAssetIds: string[];
   renamingAsset: { assetId: string; value: string } | null;
   setRenamingAsset: Dispatch<
     SetStateAction<{ assetId: string; value: string } | null>
   >;
   setUploadDropTarget: Dispatch<SetStateAction<'canvas' | 'assets' | null>>;
   setAssetPointerDrag: Dispatch<SetStateAction<AssetPointerDragState | null>>;
-  setSelectedAssetIds: Dispatch<SetStateAction<Set<string>>>;
   updateAssetMoveDropFolder: (folderId: string | null) => void;
   addUploadedFiles: (
     files: FileList | File[],
@@ -50,7 +57,10 @@ export type ImageCanvasAssetRowViewProps = {
   commitAssetRename: (asset: EditorAsset) => void;
   deleteUploadedAsset: (asset: EditorAsset) => void;
   submitAssetToShowcase: (asset: EditorAsset) => void;
-  toggleAssetSelected: (assetId: string) => void;
+  toggleAssetSelected: (
+    assetId: string,
+    interaction: AssetSelectionInteraction,
+  ) => void;
   addAssetLayer: (asset: EditorAsset) => void;
   onDownloadAsset: (asset: EditorAsset) => void;
 };
@@ -61,11 +71,11 @@ export function ImageCanvasAssetRowView({
   suppressAssetClickRef,
   isAssetSelectionMode,
   selectedAssetIds,
+  visibleAssetIds,
   renamingAsset,
   setRenamingAsset,
   setUploadDropTarget,
   setAssetPointerDrag,
-  setSelectedAssetIds,
   updateAssetMoveDropFolder,
   addUploadedFiles,
   moveAssetToFolder,
@@ -78,6 +88,8 @@ export function ImageCanvasAssetRowView({
   onDownloadAsset,
 }: ImageCanvasAssetRowViewProps) {
   const rowRef = useRef<HTMLDivElement | null>(null);
+  const selectionPointerKindRef =
+    useRef<AssetSelectionInteraction['pointerKind']>('keyboard');
   const [menuPosition, setMenuPosition] = useState<{
     x: number;
     y: number;
@@ -95,6 +107,38 @@ export function ImageCanvasAssetRowView({
     setMenuPosition(null);
   }, []);
 
+  const selectAssetFromEvent = useCallback(
+    (event: ReactMouseEvent<HTMLElement>) => {
+      if (
+        !isAssetSelectionMode ||
+        isUploadingAsset ||
+        isFailedUpload ||
+        suppressAssetClickRef.current
+      ) {
+        return;
+      }
+      closeMenu();
+      toggleAssetSelected(asset.id, {
+        visibleAssetIds,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        pointerKind: selectionPointerKindRef.current,
+      });
+      selectionPointerKindRef.current = 'keyboard';
+    },
+    [
+      asset.id,
+      closeMenu,
+      isAssetSelectionMode,
+      isFailedUpload,
+      isUploadingAsset,
+      suppressAssetClickRef,
+      toggleAssetSelected,
+      visibleAssetIds,
+    ],
+  );
+
   useEffect(() => {
     if (!menuPosition) {
       return undefined;
@@ -184,7 +228,7 @@ export function ImageCanvasAssetRowView({
       }}
     />
   ) : undefined;
-  const actions = isUploadingAsset ? (
+  const actions = isAssetSelectionMode ? undefined : isUploadingAsset ? (
     <div className="image-canvas-editor__asset-upload-status">
       <span>{asset.uploadMessage ?? '上传中'}</span>
       <strong>{Math.round(uploadProgress)}%</strong>
@@ -231,7 +275,13 @@ export function ImageCanvasAssetRowView({
     <div
       ref={rowRef}
       data-asset-id={asset.id}
+      onClick={selectAssetFromEvent}
       onContextMenu={(event) => {
+        if (isAssetSelectionMode) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
         if (isUploadingAsset || isFailedUpload || isRenaming) {
           return;
         }
@@ -262,12 +312,11 @@ export function ImageCanvasAssetRowView({
             return;
           }
           if (isAssetSelectionMode) {
-            toggleAssetSelected(asset.id);
             return;
           }
           addAssetLayer(asset);
         }}
-        selected={selectedAssetIds.has(asset.id)}
+        selected={isAssetSelectionMode && selectedAssetIds.has(asset.id)}
         rowClassName={[
           'image-canvas-editor__asset-row',
           isUploadingAsset ? 'image-canvas-editor__asset-row--uploading' : '',
@@ -295,7 +344,12 @@ export function ImageCanvasAssetRowView({
           )
         }
         actions={actions}
-        draggable={!isRenaming && !isUploadingAsset && !isFailedUpload}
+        draggable={
+          !isAssetSelectionMode &&
+          !isRenaming &&
+          !isUploadingAsset &&
+          !isFailedUpload
+        }
         previewOverlay={
           isUploadingAsset ? (
             <div className="image-canvas-editor__asset-upload-overlay">
@@ -344,16 +398,17 @@ export function ImageCanvasAssetRowView({
           updateAssetMoveDropFolder(null);
         }}
         onPointerDown={(event) => {
+          if (isAssetSelectionMode) {
+            selectionPointerKindRef.current =
+              event.pointerType === 'touch' || event.pointerType === 'pen'
+                ? event.pointerType
+                : 'mouse';
+              return;
+            }
           if (event.button !== 0) {
             return;
           }
           const target = event.target as HTMLElement;
-          if (isAssetSelectionMode) {
-            if (target.closest('button')) {
-              return;
-            }
-            return;
-          }
           if (
             isRenaming ||
             isUploadingAsset ||
@@ -390,15 +445,6 @@ export function ImageCanvasAssetRowView({
           assetPointerDragRef.current = nextDrag;
           setAssetPointerDrag(nextDrag);
         }}
-        onPointerEnter={(event) => {
-          if (isAssetSelectionMode && event.buttons === 1) {
-            setSelectedAssetIds((currentIds) => {
-              const nextIds = new Set(currentIds);
-              nextIds.add(asset.id);
-              return nextIds;
-            });
-          }
-        }}
         onDragOver={(event) => {
           if (hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE)) {
             event.preventDefault();
diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
index 918925b4f..4d26e44bd 100644
--- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
@@ -77,10 +77,9 @@ vi.mock('../../services/image-editor/editorMediaAssetUploadClient', () => ({
 }));
 
 vi.mock('../../services/assetReadUrlService', async () => {
-  const actual =
-    await vi.importActual<typeof import('../../services/assetReadUrlService')>(
-      '../../services/assetReadUrlService',
-    );
+  const actual = await vi.importActual<
+    typeof import('../../services/assetReadUrlService')
+  >('../../services/assetReadUrlService');
   return {
     ...actual,
     getSignedAssetReadUrl: (
@@ -335,7 +334,7 @@ describe('ImageCanvasEditorView asset library integration', () => {
       );
 
       await waitFor(() => {
-        expect(downloadName).toBe('拼图素材.webp');
+        expect(downloadName).toMatch(/^拼图素材-\d{8}-\d{6}\.webp$/u);
       });
       expect(downloadHref).toBe('blob:asset-library-download');
     } finally {
@@ -558,13 +557,15 @@ describe('ImageCanvasEditorView asset library integration', () => {
   it('uploads MP3 and MP4 files through OSS before adding them to the asset library', async () => {
     const createdMediaElements: HTMLMediaElement[] = [];
     const originalCreateElement = document.createElement.bind(document);
-    vi.spyOn(document, 'createElement').mockImplementation((tagName, options) => {
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName, options) => {
       const element = originalCreateElement(tagName, options);
       if (tagName === 'video' || tagName === 'audio') {
         createdMediaElements.push(element as HTMLMediaElement);
       }
       return element;
-    });
+      },
+    );
     Object.defineProperty(URL, 'createObjectURL', {
       configurable: true,
       value: vi.fn(() => 'blob:editor-media'),
@@ -603,8 +604,12 @@ describe('ImageCanvasEditorView asset library integration', () => {
       );
     });
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: '添加胜利音效.mp3' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: '添加开场动画.mp4' })).toBeTruthy();
+      expect(
+        screen.getByRole('button', { name: '添加胜利音效.mp3' }),
+      ).toBeTruthy();
+      expect(
+        screen.getByRole('button', { name: '添加开场动画.mp4' }),
+      ).toBeTruthy();
     });
     expect(createEditorAssetMock).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -804,6 +809,70 @@ describe('ImageCanvasEditorView asset library integration', () => {
     ).toBeNull();
   });
 
+  it('supports visible range and additive selection and clears state on exit', async () => {
+    const user = userEvent.setup();
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        createTestImageAsset({ assetId: 'asset-a', label: '账号素材A' }),
+        createTestImageAsset({ assetId: 'asset-b', label: '账号素材B' }),
+        createTestImageAsset({ assetId: 'asset-c', label: '账号素材C' }),
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    await screen.findByRole('button', { name: '添加账号素材A' });
+    await user.click(screen.getByRole('button', { name: '素材选择模式' }));
+    fireEvent.click(screen.getByText('账号素材A'));
+    fireEvent.click(screen.getByText('账号素材C'), {
+      ctrlKey: true,
+    });
+    expect(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByText(
+        /已选 2/u,
+      ),
+    ).toBeTruthy();
+
+    fireEvent.click(screen.getByText('账号素材B'), {
+      shiftKey: true,
+    });
+    expect(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByText(
+        /已选 2/u,
+      ),
+    ).toBeTruthy();
+
+    fireEvent.click(screen.getByText('账号素材A'), {
+      ctrlKey: true,
+      shiftKey: true,
+    });
+    expect(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByText(
+        /已选 3/u,
+      ),
+    ).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: '素材选择模式' }));
+    expect(screen.queryByRole('toolbar', { name: '素材批量操作' })).toBeNull();
+    expect(screen.getByRole('button', { name: '添加账号素材A' })).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: '素材选择模式' }));
+    expect(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByRole(
+        'button',
+        { name: '删除' },
+      ),
+    ).toHaveProperty('disabled', true);
+  });
+
   it('removes canvas layers linked to deleted assets', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
@@ -946,7 +1015,8 @@ describe('ImageCanvasEditorView asset library integration', () => {
       expect(screen.queryByAltText('画布图片：生成资源A')).toBeNull();
     });
     await waitFor(() => {
-      const savedLayoutWithoutDeletedLayer = saveEditorProjectLayoutMock.mock.calls
+      const savedLayoutWithoutDeletedLayer =
+        saveEditorProjectLayoutMock.mock.calls
         .map((call) => call[1])
         .find((layout) =>
           layout.layers.every(
@@ -964,8 +1034,10 @@ describe('ImageCanvasEditorView asset library integration', () => {
     createEditorProjectResourceMock.mockResolvedValueOnce({
       resourceId: 'resource-added-asset-a',
       projectId: 'editor-project-default',
-      imageSrc: '/generated-character-drafts/editor/asset-library/image/asset-a.png',
-      objectKey: 'generated-character-drafts/editor/asset-library/image/asset-a.png',
+      imageSrc:
+        '/generated-character-drafts/editor/asset-library/image/asset-a.png',
+      objectKey:
+        'generated-character-drafts/editor/asset-library/image/asset-a.png',
       assetObjectId: 'assetobj-asset-a',
       width: 320,
       height: 240,
@@ -1108,7 +1180,6 @@ describe('ImageCanvasEditorView asset library integration', () => {
     expect(within(batchToolbar).getByText(/已选 2/u)).toBeTruthy();
   });
 
-
   it('drops an image file on the canvas as a new canvas layer', async () => {
     render(<ImageCanvasEditorView />);
     await waitFor(() => {
@@ -1140,9 +1211,9 @@ describe('ImageCanvasEditorView asset library integration', () => {
     );
     expect(screen.getByRole('heading', { name: '素材' })).toBeTruthy();
     expect(
-      screen.getByRole('button', { name: '打开素材' }).getAttribute(
-        'aria-pressed',
-      ),
+      screen
+        .getByRole('button', { name: '打开素材' })
+        .getAttribute('aria-pressed'),
     ).toBe('true');
     expect(
       screen
@@ -1409,5 +1480,4 @@ describe('ImageCanvasEditorView asset library integration', () => {
     });
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
-
 });
diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
index c5d8f7c00..27a7d5015 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
@@ -63,7 +63,7 @@ export type SidebarMediaItemProps = {
   imageAlt: string;
   selected?: boolean;
   primaryLabel: string;
-  onPrimaryClick: () => void;
+  onPrimaryClick: MouseEventHandler<HTMLButtonElement>;
   thumbnailClassName: string;
   metaClassName: string;
   rowClassName: string;
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 23f387937..8c52c5304 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -49,9 +49,8 @@ function createSidebarProps(): ImageCanvasSidebarViewProps {
     newFolderName: '',
     renamingFolder: null,
     renamingAsset: null,
-    allSelectableAssetsSelected: false,
+    isExportingSelectedAssets: false,
     assetMarquee: null,
-    setIsAssetSelectionMode: vi.fn(),
     setCreatingFolder: vi.fn(),
     setNewFolderName: vi.fn(),
     setRenamingFolder: vi.fn(),
@@ -59,7 +58,6 @@ function createSidebarProps(): ImageCanvasSidebarViewProps {
     setActiveUploadFolderId: vi.fn(),
     setUploadDropTarget: vi.fn(),
     setAssetPointerDrag: vi.fn(),
-    setSelectedAssetIds: vi.fn(),
     setImageContextMenu: vi.fn(),
     setContextMenu: vi.fn(),
     onAssetMarqueePointerDown: vi.fn(),
@@ -82,7 +80,10 @@ function createSidebarProps(): ImageCanvasSidebarViewProps {
     addAssetLayer: vi.fn(),
     onDownloadAsset: vi.fn(),
     toggleAllAssetsSelected: vi.fn(),
+    reconcileSelectedAssets: vi.fn(),
+    downloadSelectedAssets: vi.fn(),
     deleteSelectedAssets: vi.fn(),
+    openAssetSelectionMode: vi.fn(),
     closeAssetSelectionMode: vi.fn(),
     groupSelectedLayers: vi.fn(),
     selectSingleLayer: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 2e4db9067..a52ae9679 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -670,7 +670,6 @@ export function ImageCanvasEditorView({
     assets,
     setAssets,
     groupedAssets,
-    allSelectableAssetsSelected,
     renamingAsset,
     setRenamingAsset,
     renamingFolder,
@@ -682,9 +681,7 @@ export function ImageCanvasEditorView({
     activeUploadFolderId,
     setActiveUploadFolderId,
     isAssetSelectionMode,
-    setIsAssetSelectionMode,
     selectedAssetIds,
-    setSelectedAssetIds,
     assetMarquee,
     assetPointerDrag,
     setAssetPointerDrag,
@@ -703,9 +700,11 @@ export function ImageCanvasEditorView({
     deleteAssetFolder,
     toggleAssetSelected,
     toggleAllAssetsSelected,
+    reconcileSelectedAssets,
     deleteSelectedAssets,
     moveAssetToFolder,
     closeAssetSelectionMode,
+    openAssetSelectionMode,
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
@@ -717,6 +716,12 @@ export function ImageCanvasEditorView({
     onDeleteAssets: removeCanvasLayersLinkedToAssets,
   });
 
+  useEffect(() => {
+    if (activeSidebarPanel !== 'assets' && isAssetSelectionMode) {
+      closeAssetSelectionMode();
+    }
+  }, [activeSidebarPanel, closeAssetSelectionMode, isAssetSelectionMode]);
+
   const handleActivateCanvasGenerationDialog = useCallback(() => {
     closeGenerationTransientStateRef.current();
     setSelectedLayerId(null);
@@ -1243,6 +1248,7 @@ export function ImageCanvasEditorView({
     assetExportStatus,
     isExportingAssets,
     exportCanvasAssets,
+    exportSelectedAssets,
     exportLayerImage,
   } = useImageCanvasAssetExportWorkflow({
     layers,
@@ -1255,6 +1261,26 @@ export function ImageCanvasEditorView({
     },
     [exportLayerImage],
   );
+  const downloadSelectedAssets = useCallback(
+    (visibleAssetIds: string[]) => {
+      const selectedIds = new Set(selectedAssetIds);
+      const selectedLayers = visibleAssetIds
+        .filter((assetId) => selectedIds.has(assetId))
+        .map((assetId, index) => {
+          const asset = assets.find((item) => item.id === assetId);
+          if (!asset) {
+            return null;
+          }
+          return {
+            ...createAssetActionLayer(asset),
+            zIndex: index,
+          };
+        })
+        .filter((layer): layer is CanvasLayer => layer !== null);
+      return exportSelectedAssets(selectedLayers);
+    },
+    [assets, exportSelectedAssets, selectedAssetIds],
+  );
   const {
     uploadInputRef,
     uploadTarget,
@@ -2105,9 +2131,8 @@ export function ImageCanvasEditorView({
     newFolderName,
     renamingFolder,
     renamingAsset,
-    allSelectableAssetsSelected,
+    isExportingSelectedAssets: isExportingAssets,
     assetMarquee,
-    setIsAssetSelectionMode,
     setCreatingFolder,
     setNewFolderName,
     setRenamingFolder,
@@ -2115,7 +2140,6 @@ export function ImageCanvasEditorView({
     setActiveUploadFolderId,
     setUploadDropTarget,
     setAssetPointerDrag,
-    setSelectedAssetIds,
     setImageContextMenu,
     setContextMenu,
     onAssetMarqueePointerDown: handleAssetMarqueePointerDown,
@@ -2138,8 +2162,11 @@ export function ImageCanvasEditorView({
     addAssetLayer,
     onDownloadAsset: downloadAsset,
     toggleAllAssetsSelected,
+    reconcileSelectedAssets,
+    downloadSelectedAssets,
     deleteSelectedAssets,
     closeAssetSelectionMode,
+    openAssetSelectionMode,
     groupSelectedLayers,
     selectSingleLayer,
     resolveContextMenuPosition,
diff --git a/src/components/image-editor/ImageCanvasExportModel.test.ts b/src/components/image-editor/ImageCanvasExportModel.test.ts
index 6a3eeeb06..938d01aa5 100644
--- a/src/components/image-editor/ImageCanvasExportModel.test.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.test.ts
@@ -21,6 +21,12 @@ import {
 } from './ImageCanvasGenerationModel';
 
 describe('ImageCanvasExportModel', () => {
+  it('formats export timestamps through seconds', () => {
+    expect(formatExportDate(new Date(2026, 6, 27, 9, 8, 7))).toBe(
+      '20260727-090807',
+    );
+  });
+
   it('builds a real animated GIF preview from sequence frames', () => {
     const gifBytes = buildAnimatedGifPreviewBytes({
       width: 2,
@@ -68,8 +74,8 @@ describe('ImageCanvasExportModel', () => {
       '角色 草图',
     );
     expect(sanitizeExportFilePart('   ', 'fallback')).toBe('fallback');
-    expect(formatExportDate(new Date('2026-06-17T01:02:03.000Z'))).toBe(
-      '20260617',
+    expect(formatExportDate(new Date(2026, 5, 17, 9, 2, 3))).toBe(
+      '20260617-090203',
     );
   });
 
diff --git a/src/components/image-editor/ImageCanvasExportModel.ts b/src/components/image-editor/ImageCanvasExportModel.ts
index 3c064986d..fbe94fa09 100644
--- a/src/components/image-editor/ImageCanvasExportModel.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.ts
@@ -26,7 +26,10 @@ export function formatExportDate(date: Date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');
-  return `${year}${month}${day}`;
+  const hour = String(date.getHours()).padStart(2, '0');
+  const minute = String(date.getMinutes()).padStart(2, '0');
+  const second = String(date.getSeconds()).padStart(2, '0');
+  return `${year}${month}${day}-${hour}${minute}${second}`;
 }
 
 export function getLayerExportKey(layer: CanvasLayer) {
diff --git a/src/components/image-editor/ImageCanvasSidebarView.test.tsx b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
index 3062bf96e..233aeee13 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
@@ -87,9 +87,8 @@ function createSidebarProps(
     newFolderName: '',
     renamingFolder: null,
     renamingAsset: null,
-    allSelectableAssetsSelected: false,
+    isExportingSelectedAssets: false,
     assetMarquee: null,
-    setIsAssetSelectionMode: vi.fn(),
     setCreatingFolder: vi.fn(),
     setNewFolderName: vi.fn(),
     setRenamingFolder: vi.fn(),
@@ -97,7 +96,6 @@ function createSidebarProps(
     setActiveUploadFolderId: vi.fn(),
     setUploadDropTarget: vi.fn(),
     setAssetPointerDrag: vi.fn(),
-    setSelectedAssetIds: vi.fn(),
     setImageContextMenu: vi.fn(),
     setContextMenu: vi.fn(),
     onAssetMarqueePointerDown: vi.fn(),
@@ -120,7 +118,10 @@ function createSidebarProps(
     addAssetLayer: vi.fn(),
     onDownloadAsset: vi.fn(),
     toggleAllAssetsSelected: vi.fn(),
+    reconcileSelectedAssets: vi.fn(),
+    downloadSelectedAssets: vi.fn(),
     deleteSelectedAssets: vi.fn(),
+    openAssetSelectionMode: vi.fn(),
     closeAssetSelectionMode: vi.fn(),
     groupSelectedLayers: vi.fn(),
     selectSingleLayer: vi.fn(),
@@ -269,6 +270,68 @@ describe('ImageCanvasSidebarView', () => {
     ).toBeNull();
   });
 
+  it('keeps the batch toolbar outside the scrolling list and downloads visible selections', () => {
+    const downloadSelectedAssets = vi.fn();
+    const closeAssetSelectionMode = vi.fn();
+    const asset = createAsset();
+    render(
+      <ImageCanvasSidebarView
+        {...createSidebarProps({
+          isAssetSelectionMode: true,
+          selectedAssetIds: new Set([asset.id]),
+          downloadSelectedAssets,
+          closeAssetSelectionMode,
+        })}
+      />,
+    );
+
+    const toolbar = screen.getByRole('toolbar', { name: '素材批量操作' });
+    const sidebar = screen.getByRole('complementary', { name: '图片资源栏' });
+    const assetList = document.querySelector(
+      '.image-canvas-editor__asset-list',
+    );
+    expect(sidebar.className).toContain(
+      'image-canvas-editor__sidebar--asset-selection',
+    );
+    expect(toolbar.parentElement).toBe(assetList?.parentElement);
+    expect(assetList?.contains(toolbar)).toBe(false);
+    expect(
+      screen.queryByRole('button', { name: '下载素材账号素材A' }),
+    ).toBeNull();
+
+    fireEvent.click(within(toolbar).getByRole('button', { name: '下载' }));
+    expect(downloadSelectedAssets).toHaveBeenCalledWith(['asset-1']);
+    fireEvent.click(screen.getByRole('button', { name: '素材选择模式' }));
+    expect(closeAssetSelectionMode).toHaveBeenCalledTimes(1);
+  });
+
+  it('opens selection mode through the shared lifecycle and reconciles search visibility', () => {
+    const openAssetSelectionMode = vi.fn();
+    const reconcileSelectedAssets = vi.fn();
+    const folder = createFolder();
+    render(
+      <ImageCanvasSidebarView
+        {...createSidebarProps({
+          isAssetSelectionMode: false,
+          openAssetSelectionMode,
+          reconcileSelectedAssets,
+          groupedAssets: [
+            {
+              ...folder,
+              assets: [
+                createAsset({ id: 'asset-a', label: '角色' }),
+                createAsset({ id: 'asset-b', label: '背景' }),
+              ],
+            },
+          ],
+        })}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: '素材选择模式' }));
+    expect(openAssetSelectionMode).toHaveBeenCalledTimes(1);
+    expect(reconcileSelectedAssets).not.toHaveBeenCalled();
+  });
+
   it('renders the layer panel with grouped and locked layer details', () => {
     render(
       <ImageCanvasSidebarView
diff --git a/src/components/image-editor/ImageCanvasSidebarView.tsx b/src/components/image-editor/ImageCanvasSidebarView.tsx
index 2fb1e8043..da6eeacf6 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.tsx
@@ -1,19 +1,17 @@
-import {
-  CheckSquare,
-  FolderPlus,
-  Square,
-} from 'lucide-react';
+import { CheckSquare, FolderPlus, Square } from 'lucide-react';
 import type {
   Dispatch,
   PointerEvent as ReactPointerEvent,
   RefObject,
   SetStateAction,
 } from 'react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { PlatformTextField } from '../common/PlatformTextField';
 import {
+  type AssetSelectionInteraction,
   filterGroupedAssetsBySearch,
+  getSelectableAssets,
   layerMatchesSearch,
   layerStartsWithSearch,
 } from './ImageCanvasAssetLibraryModel';
@@ -58,9 +56,8 @@ export type ImageCanvasSidebarViewProps = {
   newFolderName: string;
   renamingFolder: { folderId: string; value: string } | null;
   renamingAsset: { assetId: string; value: string } | null;
-  allSelectableAssetsSelected: boolean;
+  isExportingSelectedAssets: boolean;
   assetMarquee: AssetMarqueeState | null;
-  setIsAssetSelectionMode: Dispatch<SetStateAction<boolean>>;
   setCreatingFolder: Dispatch<SetStateAction<boolean>>;
   setNewFolderName: Dispatch<SetStateAction<string>>;
   setRenamingFolder: Dispatch<
@@ -72,20 +69,16 @@ export type ImageCanvasSidebarViewProps = {
   setActiveUploadFolderId: Dispatch<SetStateAction<string>>;
   setUploadDropTarget: Dispatch<SetStateAction<'canvas' | 'assets' | null>>;
   setAssetPointerDrag: Dispatch<SetStateAction<AssetPointerDragState | null>>;
-  setSelectedAssetIds: Dispatch<SetStateAction<Set<string>>>;
   setImageContextMenu: Dispatch<SetStateAction<ImageContextMenuState | null>>;
   setContextMenu: Dispatch<SetStateAction<CanvasContextMenuState | null>>;
-  onAssetMarqueePointerDown: (
-    event: ReactPointerEvent<HTMLDivElement>,
-  ) => void;
-  onAssetMarqueePointerMove: (
-    event: ReactPointerEvent<HTMLDivElement>,
-  ) => void;
-  onAssetMarqueePointerUp: (
-    event: ReactPointerEvent<HTMLDivElement>,
-  ) => void;
+  onAssetMarqueePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
   updateAssetMoveDropFolder: (folderId: string | null) => void;
-  addUploadedFiles: (files: FileList | File[], options?: UploadFilesOptions) => void;
+  addUploadedFiles: (
+    files: FileList | File[],
+    options?: UploadFilesOptions,
+  ) => void;
   requestUpload: (target: UploadTarget, options?: UploadRequestOptions) => void;
   moveAssetToFolder: (assetId: string, folderId: string) => void;
   commitNewAssetFolder: () => void | Promise<void>;
@@ -97,11 +90,17 @@ export type ImageCanvasSidebarViewProps = {
   commitAssetRename: (asset: EditorAsset) => void;
   deleteUploadedAsset: (asset: EditorAsset) => void;
   submitAssetToShowcase: (asset: EditorAsset) => void;
-  toggleAssetSelected: (assetId: string) => void;
+  toggleAssetSelected: (
+    assetId: string,
+    interaction: AssetSelectionInteraction,
+  ) => void;
   addAssetLayer: (asset: EditorAsset) => void;
   onDownloadAsset: (asset: EditorAsset) => void;
-  toggleAllAssetsSelected: () => void;
+  toggleAllAssetsSelected: (visibleAssetIds: string[]) => void;
+  reconcileSelectedAssets: (visibleAssetIds: string[]) => void;
+  downloadSelectedAssets: (visibleAssetIds: string[]) => void | Promise<void>;
   deleteSelectedAssets: () => void;
+  openAssetSelectionMode: () => void;
   closeAssetSelectionMode: () => void;
   groupSelectedLayers: () => void;
   selectSingleLayer: (layerId: string | null) => void;
@@ -134,9 +133,8 @@ export function ImageCanvasSidebarView({
   newFolderName,
   renamingFolder,
   renamingAsset,
-  allSelectableAssetsSelected,
+  isExportingSelectedAssets,
   assetMarquee,
-  setIsAssetSelectionMode,
   setCreatingFolder,
   setNewFolderName,
   setRenamingFolder,
@@ -144,7 +142,6 @@ export function ImageCanvasSidebarView({
   setActiveUploadFolderId,
   setUploadDropTarget,
   setAssetPointerDrag,
-  setSelectedAssetIds,
   setImageContextMenu,
   setContextMenu,
   onAssetMarqueePointerDown,
@@ -167,7 +164,10 @@ export function ImageCanvasSidebarView({
   addAssetLayer,
   onDownloadAsset,
   toggleAllAssetsSelected,
+  reconcileSelectedAssets,
+  downloadSelectedAssets,
   deleteSelectedAssets,
+  openAssetSelectionMode,
   closeAssetSelectionMode,
   groupSelectedLayers,
   selectSingleLayer,
@@ -188,6 +188,24 @@ export function ImageCanvasSidebarView({
       ),
     [filteredGroupedAssets],
   );
+  const visibleAssetIds = useMemo(
+    () =>
+      filteredGroupedAssets.flatMap((folder) =>
+        folder.collapsed
+          ? []
+          : getSelectableAssets(folder.assets).map((asset) => asset.id),
+      ),
+    [filteredGroupedAssets],
+  );
+  const allVisibleAssetsSelected =
+    visibleAssetIds.length > 0 &&
+    visibleAssetIds.every((assetId) => selectedAssetIds.has(assetId));
+
+  useEffect(() => {
+    if (isAssetSelectionMode) {
+      reconcileSelectedAssets(visibleAssetIds);
+    }
+  }, [isAssetSelectionMode, reconcileSelectedAssets, visibleAssetIds]);
   const normalizedLayerSearchQuery = layerSearchQuery.trim().toLowerCase();
   const filteredLayers = useMemo(
     () =>
@@ -211,7 +229,17 @@ export function ImageCanvasSidebarView({
   }
 
   return (
-    <aside className="image-canvas-editor__sidebar" aria-label="图片资源栏">
+    <aside
+      className={[
+        'image-canvas-editor__sidebar',
+        activeSidebarPanel === 'assets' && isAssetSelectionMode
+          ? 'image-canvas-editor__sidebar--asset-selection'
+          : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      aria-label="图片资源栏"
+    >
       <div className="image-canvas-editor__sidebar-header">
         <div className="min-w-0">
           <h2 className="image-canvas-editor__sidebar-title">
@@ -231,8 +259,10 @@ export function ImageCanvasSidebarView({
               title="选择"
               icon={isAssetSelectionMode ? CheckSquare : Square}
               pressed={isAssetSelectionMode}
-              onClick={() =>
-                setIsAssetSelectionMode((currentMode) => !currentMode)
+              onClick={
+                isAssetSelectionMode
+                  ? closeAssetSelectionMode
+                  : openAssetSelectionMode
               }
             />
             <EditorIconButton
@@ -260,9 +290,13 @@ export function ImageCanvasSidebarView({
           aria-label={
             activeSidebarPanel === 'assets' ? '搜索素材' : '搜索画布图层'
           }
-          placeholder={activeSidebarPanel === 'assets' ? '搜索素材' : '搜索图层'}
+          placeholder={
+            activeSidebarPanel === 'assets' ? '搜索素材' : '搜索图层'
+          }
           value={
-            activeSidebarPanel === 'assets' ? assetSearchQuery : layerSearchQuery
+            activeSidebarPanel === 'assets'
+              ? assetSearchQuery
+              : layerSearchQuery
           }
           size="xs"
           density="compact"
@@ -286,13 +320,15 @@ export function ImageCanvasSidebarView({
           assetFolders={assetFolders}
           isAssetSelectionMode={isAssetSelectionMode}
           selectedAssetIds={selectedAssetIds}
+          visibleAssetIds={visibleAssetIds}
           assetMoveDropFolderId={assetMoveDropFolderId}
           pinnedAssetMoveFolderId={pinnedAssetMoveFolderId}
           creatingFolder={creatingFolder}
           newFolderName={newFolderName}
           renamingFolder={renamingFolder}
           renamingAsset={renamingAsset}
-          allSelectableAssetsSelected={allSelectableAssetsSelected}
+          allVisibleAssetsSelected={allVisibleAssetsSelected}
+          isExportingSelectedAssets={isExportingSelectedAssets}
           assetMarquee={assetMarquee}
           setCreatingFolder={setCreatingFolder}
           setNewFolderName={setNewFolderName}
@@ -301,7 +337,6 @@ export function ImageCanvasSidebarView({
           setActiveUploadFolderId={setActiveUploadFolderId}
           setUploadDropTarget={setUploadDropTarget}
           setAssetPointerDrag={setAssetPointerDrag}
-          setSelectedAssetIds={setSelectedAssetIds}
           onAssetMarqueePointerDown={onAssetMarqueePointerDown}
           onAssetMarqueePointerMove={onAssetMarqueePointerMove}
           onAssetMarqueePointerUp={onAssetMarqueePointerUp}
@@ -322,6 +357,7 @@ export function ImageCanvasSidebarView({
           addAssetLayer={addAssetLayer}
           onDownloadAsset={onDownloadAsset}
           toggleAllAssetsSelected={toggleAllAssetsSelected}
+          downloadSelectedAssets={downloadSelectedAssets}
           deleteSelectedAssets={deleteSelectedAssets}
           closeAssetSelectionMode={closeAssetSelectionMode}
         />
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index 3fa2ee919..ea7785b14 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -71,6 +71,18 @@ function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
       >
         导出单图
       </button>
+      <button
+        type="button"
+        onClick={() => void workflow.exportSelectedAssets(layers.slice(0, 1))}
+      >
+        下载一个选中素材
+      </button>
+      <button
+        type="button"
+        onClick={() => void workflow.exportSelectedAssets(layers.slice(0, 2))}
+      >
+        下载多个选中素材
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -98,6 +110,59 @@ describe('useImageCanvasAssetExportWorkflow', () => {
     vi.restoreAllMocks();
   });
 
+  it('downloads one selected asset directly and packages multiple selected assets', async () => {
+    const downloads: Array<{ blob: Blob; name: string }> = [];
+    let currentBlob: Blob | null = null;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn((blob: Blob) => {
+        currentBlob = blob;
+        return `blob:selected-${downloads.length}`;
+      }),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(
+      function click(this: HTMLAnchorElement) {
+        if (currentBlob) {
+          downloads.push({ blob: currentBlob, name: this.download });
+        }
+      },
+    );
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[
+            createLayer('asset-a', { title: '素材A', zIndex: 0 }),
+            createLayer('asset-b', { title: '素材B', zIndex: 1 }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '下载一个选中素材' }));
+      await waitFor(() => expect(downloads).toHaveLength(1));
+      expect(downloads[0]?.name).toMatch(/^素材A-\d{8}-\d{6}\.png$/u);
+
+      fireEvent.click(screen.getByRole('button', { name: '下载多个选中素材' }));
+      await waitFor(() => expect(downloads).toHaveLength(2));
+      expect(downloads[1]?.name).toMatch(
+        /^导出项目-选中素材-\d{8}-\d{6}\.zip$/u,
+      );
+      const zip = await JSZip.loadAsync(downloads[1]!.blob);
+      expect(zip.file('导出项目-选中素材/images/001-素材A.png')).toBeTruthy();
+      expect(zip.file('导出项目-选中素材/images/002-素材B.png')).toBeTruthy();
+      expect(screen.getByTestId('status').textContent).toBe(
+        'success:选中素材已导出',
+      );
+    } finally {
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
   it('exports canvas assets into a zip with metadata and failed image records', async () => {
     const originalFetch = globalThis.fetch;
     const fetchMock = vi.fn(async (url: string) => {
@@ -228,7 +293,7 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       await waitFor(() => {
         expect(exportedBlob).toBeTruthy();
       });
-      expect(downloadName).toMatch(/^导出项目-画布素材-\d{8}\.zip$/u);
+      expect(downloadName).toMatch(/^导出项目-画布素材-\d{8}-\d{6}\.zip$/u);
 
       const zip = await JSZip.loadAsync(exportedBlob!);
       expect(zip.file('导出项目-画布素材/images/001-素材 A.png')).toBeTruthy();
@@ -398,7 +463,7 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       fireEvent.click(screen.getByRole('button', { name: '导出单图' }));
 
       await waitFor(() => {
-        expect(downloadName).toBe('单图 导出.png');
+        expect(downloadName).toMatch(/^单图 导出-\d{8}-\d{6}\.png$/u);
       });
       expect(downloadHref).toBe('blob:direct-layer-export');
       expect(downloadedBlob).toBeTruthy();
@@ -431,7 +496,7 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       );
 
       await waitFor(() => {
-        expect(downloadName).toBe('视频导出.webm');
+        expect(downloadName).toMatch(/^视频导出-\d{8}-\d{6}\.webm$/u);
       });
 
       render(<ExportWorkflowHarness layers={[]} />);
@@ -505,7 +570,9 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       await waitFor(() => {
         expect(exportedBlob).toBeTruthy();
       });
-      expect(downloadName).toBe('角色动作 跑步-SpineJSON.zip');
+      expect(downloadName).toMatch(
+        /^角色动作 跑步-SpineJSON-\d{8}-\d{6}\.zip$/u,
+      );
       const zip = await JSZip.loadAsync(exportedBlob!);
       expect(zip.file('frames/frame-01.png')).toBeTruthy();
       expect(zip.file('frames/frame-02.png')).toBeTruthy();
@@ -613,7 +680,9 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       await waitFor(() => {
         expect(exportedBlob).toBeTruthy();
       });
-      expect(downloadName).toBe('角色动作 跑步-Sequence.zip');
+      expect(downloadName).toMatch(
+        /^角色动作 跑步-Sequence-\d{8}-\d{6}\.zip$/u,
+      );
       const zip = await JSZip.loadAsync(exportedBlob!);
       expect(zip.file('frames/frame-01.png')).toBeTruthy();
       expect(zip.file('frames/frame-02.png')).toBeTruthy();
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index c011b1c54..1b23329ef 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -275,7 +275,7 @@ export function useImageCanvasAssetExportWorkflow({
   const [isExportingAssets, setIsExportingAssets] = useState(false);
 
   const exportLayerImage = useCallback(
-    (
+    async (
       layer: CanvasLayer | null,
       options: { mode?: ImageSequenceExportMode } = {},
     ) => {
@@ -284,13 +284,14 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
       if (layer.mediaType === 'image-sequence') {
-        void buildImageSequenceZip(layer, exportMode)
-          .then((zipBlob) => {
+        try {
+          const zipBlob = await buildImageSequenceZip(layer, exportMode);
             const modeName =
               exportMode === 'spine-json' ? 'SpineJSON' : 'Sequence';
+          const exportStamp = formatExportDate(new Date());
             const downloaded = triggerBrowserDownload(
               zipBlob,
-              `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}.zip`,
+            `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}-${exportStamp}.zip`,
             );
             if (!downloaded) {
               setAssetExportStatus({
@@ -298,18 +299,17 @@ export function useImageCanvasAssetExportWorkflow({
                 message: '当前浏览器不支持素材下载',
               });
             }
-          })
-          .catch(() => {
+        } catch {
             setAssetExportStatus({
               tone: 'error',
               message: '序列帧导出失败',
             });
-          });
+        }
         return;
       }
 
-      void readLayerAssetBlob(layer)
-        .then((blob) => {
+      try {
+        const blob = await readLayerAssetBlob(layer);
           const extension = getLayerAssetExtensionFromTypeOrSrc(
             layer.mediaType ?? 'image',
             blob.type,
@@ -317,7 +317,7 @@ export function useImageCanvasAssetExportWorkflow({
           );
           const downloaded = triggerBrowserDownload(
             blob,
-            `${sanitizeExportFilePart(layer.title, 'canvas-layer')}.${extension}`,
+          `${sanitizeExportFilePart(layer.title, 'canvas-layer')}-${formatExportDate(new Date())}.${extension}`,
           );
           if (!downloaded) {
             setAssetExportStatus({
@@ -325,28 +325,38 @@ export function useImageCanvasAssetExportWorkflow({
               message: '当前浏览器不支持素材下载',
             });
           }
-        })
-        .catch(() => {
+      } catch {
           setAssetExportStatus({
             tone: 'error',
             message: '素材导出失败',
           });
-        });
+      }
     },
     [],
   );
 
-  const exportCanvasAssets = useCallback(async () => {
+  const exportAssetCollection = useCallback(
+    async ({
+      targetLayers,
+      archiveLabel,
+      emptyMessage,
+      successMessage,
+    }: {
+      targetLayers: CanvasLayer[];
+      archiveLabel: string;
+      emptyMessage: string;
+      successMessage: string;
+    }) => {
     if (isExportingAssets) {
       return;
     }
-    const exportableLayers = layers
+      const exportableLayers = targetLayers
       .filter((layer) => layer.src.trim().length > 0)
       .sort((left, right) => left.zIndex - right.zIndex);
     if (!exportableLayers.length) {
       setAssetExportStatus({
         tone: 'info',
-        message: '当前画布没有可导出的素材',
+          message: emptyMessage,
       });
       return;
     }
@@ -357,7 +367,7 @@ export function useImageCanvasAssetExportWorkflow({
     try {
       const exportedAt = new Date();
       const projectName = sanitizeExportFilePart(projectTitle, '未命名画布');
-      const rootFolderName = `${projectName}-画布素材`;
+        const rootFolderName = `${projectName}-${archiveLabel}`;
       const zip = new JSZip();
       const rootFolder = zip.folder(rootFolderName) ?? zip;
       const imagesFolder = rootFolder.folder('images') ?? rootFolder;
@@ -409,7 +419,10 @@ export function useImageCanvasAssetExportWorkflow({
                   frameArrayIndex,
                   frameBlob.type,
                 );
-                framesFolder.file(fileName, await blobToUint8Array(frameBlob));
+                  framesFolder.file(
+                    fileName,
+                    await blobToUint8Array(frameBlob),
+                  );
                 exportedFrames.push({
                   frameIndex: frame.frameIndex || frameArrayIndex + 1,
                   fileName,
@@ -447,7 +460,10 @@ export function useImageCanvasAssetExportWorkflow({
             sequenceFolder.file(
               'skeleton.json',
               JSON.stringify(
-                buildSpineImageSequenceJson({ layer, frames: exportedFrames }),
+                  buildSpineImageSequenceJson({
+                    layer,
+                    frames: exportedFrames,
+                  }),
                 null,
                 2,
               ),
@@ -466,7 +482,9 @@ export function useImageCanvasAssetExportWorkflow({
                 layer.durationSeconds
                   ? `时长：${layer.durationSeconds}s`
                   : null,
-                failedFrames.length ? `失败帧数：${failedFrames.length}` : null,
+                  failedFrames.length
+                    ? `失败帧数：${failedFrames.length}`
+                    : null,
               ]
                 .filter(Boolean)
                 .join('\n'),
@@ -583,7 +601,7 @@ export function useImageCanvasAssetExportWorkflow({
       URL.revokeObjectURL(downloadUrl);
       setAssetExportStatus({
         tone: failedImages.length ? 'error' : 'success',
-        message: failedImages.length ? '部分素材未能导出' : '画布素材已导出',
+          message: failedImages.length ? '部分素材未能导出' : successMessage,
       });
     } catch {
       setAssetExportStatus({
@@ -593,12 +611,61 @@ export function useImageCanvasAssetExportWorkflow({
     } finally {
       setIsExportingAssets(false);
     }
-  }, [isExportingAssets, layers, projectTitle]);
+    },
+    [isExportingAssets, projectTitle],
+  );
+
+  const exportCanvasAssets = useCallback(
+    () =>
+      exportAssetCollection({
+        targetLayers: layers,
+        archiveLabel: '画布素材',
+        emptyMessage: '当前画布没有可导出的素材',
+        successMessage: '画布素材已导出',
+      }),
+    [exportAssetCollection, layers],
+  );
+
+  const exportSelectedAssets = useCallback(
+    async (selectedLayers: CanvasLayer[]) => {
+      if (isExportingAssets) {
+        return;
+      }
+      const exportableLayers = selectedLayers.filter(
+        (layer) => layer.src.trim().length > 0,
+      );
+      if (!exportableLayers.length) {
+        setAssetExportStatus({
+          tone: 'info',
+          message: '请先选择可下载的素材',
+        });
+        return;
+      }
+      if (exportableLayers.length === 1) {
+        setIsExportingAssets(true);
+        setAssetExportStatus(null);
+        try {
+          await exportLayerImage(exportableLayers[0] ?? null);
+        } finally {
+          setIsExportingAssets(false);
+        }
+        return;
+      }
+      await exportAssetCollection({
+        targetLayers: exportableLayers,
+        archiveLabel: '选中素材',
+        emptyMessage: '请先选择可下载的素材',
+        successMessage: '选中素材已导出',
+      });
+    },
+    [exportAssetCollection, exportLayerImage, isExportingAssets],
+  );
 
   return {
     assetExportStatus,
     isExportingAssets,
     exportCanvasAssets,
+    exportSelectedAssets,
     exportLayerImage,
   };
 }
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
index b820c6efc..2888206db 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
@@ -36,7 +36,9 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
   };
 });
 
-function createUploadedAsset(overrides: Partial<EditorAsset> = {}): EditorAsset {
+function createUploadedAsset(
+  overrides: Partial<EditorAsset> = {},
+): EditorAsset {
   return {
     id: 'asset-a',
     label: '素材A',
@@ -94,7 +96,17 @@ function AssetLibraryHarness({
                 key={asset.id || `asset-${index}`}
                 type="button"
                 data-asset-id={asset.id}
-                onClick={() => assetLibrary.toggleAssetSelected(asset.id)}
+                onClick={(event) =>
+                  assetLibrary.toggleAssetSelected(asset.id, {
+                    visibleAssetIds: assetLibrary.selectableAssets.map(
+                      (item) => item.id,
+                    ),
+                    ctrlKey: event.ctrlKey,
+                    metaKey: event.metaKey,
+                    shiftKey: event.shiftKey,
+                    pointerKind: 'mouse',
+                  })
+                }
               >
                 {asset.label}
               </button>
@@ -126,11 +138,19 @@ function AssetLibraryHarness({
         {assetLibrary.activeUploadFolderId}
       </span>
       <span data-testid="all-selected">
-        {String(assetLibrary.allSelectableAssetsSelected)}
+        {String(
+          assetLibrary.selectableAssets.length > 0 &&
+            assetLibrary.selectableAssets.every((asset) =>
+              assetLibrary.selectedAssetIds.has(asset.id),
+            ),
+        )}
       </span>
       <span data-testid="selected-assets">
         {[...assetLibrary.selectedAssetIds].join('|')}
       </span>
+      <span data-testid="selection-mode">
+        {String(assetLibrary.isAssetSelectionMode)}
+      </span>
       <span data-testid="new-folder-name">{assetLibrary.newFolderName}</span>
       <button
         type="button"
@@ -179,12 +199,25 @@ function AssetLibraryHarness({
       >
         submit asset to showcase
       </button>
-      <button type="button" onClick={assetLibrary.toggleAllAssetsSelected}>
+      <button
+        type="button"
+        onClick={() =>
+          assetLibrary.toggleAllAssetsSelected(
+            assetLibrary.selectableAssets.map((asset) => asset.id),
+          )
+        }
+      >
         toggle all
       </button>
       <button type="button" onClick={assetLibrary.deleteSelectedAssets}>
         delete selected
       </button>
+      <button type="button" onClick={assetLibrary.openAssetSelectionMode}>
+        open selection
+      </button>
+      <button type="button" onClick={assetLibrary.closeAssetSelectionMode}>
+        close selection
+      </button>
     </div>
   );
 }
@@ -292,9 +325,7 @@ describe('useImageCanvasAssetLibrary', () => {
       }),
     );
 
-    render(
-      <AssetLibraryHarness openEditorLoginModal={openEditorLoginModal} />,
-    );
+    render(<AssetLibraryHarness openEditorLoginModal={openEditorLoginModal} />);
 
     await waitFor(() => {
       expect(openEditorLoginModal).toHaveBeenCalledTimes(1);
@@ -330,9 +361,7 @@ describe('useImageCanvasAssetLibrary', () => {
     });
     act(() => screen.getByRole('button', { name: 'commit folder' }).click());
     await waitFor(() => {
-      expect(screen.getByTestId('folders').textContent).toContain(
-        'folder-',
-      );
+      expect(screen.getByTestId('folders').textContent).toContain('folder-');
     });
     act(() => {
       resolveCreateFolder({
@@ -427,18 +456,31 @@ describe('useImageCanvasAssetLibrary', () => {
     expect(screen.getByTestId('all-selected').textContent).toBe('true');
     act(() => screen.getByRole('button', { name: '素材B' }).click());
     await waitFor(() => {
-      expect(screen.getByTestId('selected-assets').textContent).toBe('asset-a');
+      expect(screen.getByTestId('selected-assets').textContent).toBe('asset-b');
     });
     act(() => screen.getByRole('button', { name: 'delete selected' }).click());
 
     expect(screen.getByTestId('assets').textContent).toBe(
-      'asset-b:素材B:project:unset',
+      'asset-a:素材A:project:unset',
     );
     expect(onDeleteAssets).toHaveBeenCalledWith([
-      expect.objectContaining({ id: 'asset-a' }),
+      expect.objectContaining({ id: 'asset-b' }),
     ]);
-    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-a');
-    expect(deleteEditorAssetMock).not.toHaveBeenCalledWith('asset-b');
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-b');
+    expect(deleteEditorAssetMock).not.toHaveBeenCalledWith('asset-a');
+  });
+
+  it('clears selected status when selection mode closes', async () => {
+    render(<AssetLibraryHarness />);
+    await screen.findByText('素材A');
+
+    act(() => screen.getByRole('button', { name: 'open selection' }).click());
+    act(() => screen.getByRole('button', { name: '素材A' }).click());
+    expect(screen.getByTestId('selected-assets').textContent).toBe('asset-a');
+
+    act(() => screen.getByRole('button', { name: 'close selection' }).click());
+    expect(screen.getByTestId('selection-mode').textContent).toBe('false');
+    expect(screen.getByTestId('selected-assets').textContent).toBe('');
   });
 
   it('submits a generated asset to showcase review', async () => {
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index f9a5cc191..400ae5a04 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -6,6 +6,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
@@ -20,7 +21,7 @@ import {
   updateEditorAssetFolder,
 } from '../../services/image-editor/editorProjectClient';
 import {
-  areAllSelectableAssetsSelected,
+  type AssetSelectionInteraction,
   createAssetMarqueeFromPointer,
   createAssetMarqueeSelectionRect,
   createLocalAssetFolder,
@@ -29,20 +30,21 @@ import {
   groupAssetsByFolder,
   moveAssetMarqueeToPointer,
   moveAssetToFolderLocally,
+  reconcileAssetSelection,
   removeAssetById,
   removeSelectedAssets,
   renameAssetById,
   renameAssetFolderById,
   replaceLocalAssetFolder,
-  resolveAllAssetSelection,
   resolveAssetFolderIdFromPoint,
+  resolveAssetSelection,
   resolveAssetShowcaseSubmissionState,
   resolveDefaultAssetFolder,
   resolvePinnedAssetMoveFolderId,
+  resolveVisibleAssetSelectionToggle,
   selectUploadedAssetsInRect,
   shouldStartAssetMarquee,
   toggleAssetFolderCollapsed,
-  toggleAssetSelection,
 } from './ImageCanvasAssetLibraryModel';
 import {
   EDITOR_ASSET_FOLDERS,
@@ -81,7 +83,8 @@ const ASSET_MARQUEE_BLOCKED_TARGET_SELECTOR =
 
 function readAssetFolderHitTargets(listElement: ParentNode | null) {
   return [
-    ...(listElement?.querySelectorAll<HTMLElement>(ASSET_FOLDER_SELECTOR) ?? []),
+    ...(listElement?.querySelectorAll<HTMLElement>(ASSET_FOLDER_SELECTOR) ??
+      []),
   ]
     .map((element) => {
       const folderId = element.dataset.assetFolderId;
@@ -140,6 +143,8 @@ export function useImageCanvasAssetLibrary({
   const [selectedAssetIds, setSelectedAssetIds] = useState<Set<string>>(
     () => new Set(),
   );
+  const assetSelectionAnchorRef = useRef<string | null>(null);
+  const marqueeBaseSelectionRef = useRef<Set<string>>(new Set());
   const [assetMarquee, setAssetMarquee] = useState<AssetMarqueeState | null>(
     null,
   );
@@ -156,14 +161,7 @@ export function useImageCanvasAssetLibrary({
     () => groupAssetsByFolder(assetFolders, assets),
     [assetFolders, assets],
   );
-  const selectableAssets = useMemo(
-    () => getSelectableAssets(assets),
-    [assets],
-  );
-  const allSelectableAssetsSelected = areAllSelectableAssetsSelected(
-    selectableAssets,
-    selectedAssetIds,
-  );
+  const selectableAssets = useMemo(() => getSelectableAssets(assets), [assets]);
 
   const applyAssetLibrarySnapshot = useCallback(
     (
@@ -200,11 +198,7 @@ export function useImageCanvasAssetLibrary({
         openEditorLoginModal();
       }
     }
-  }, [
-    applyAssetLibrarySnapshot,
-    canAccessProtectedData,
-    openEditorLoginModal,
-  ]);
+  }, [applyAssetLibrarySnapshot, canAccessProtectedData, openEditorLoginModal]);
 
   useEffect(() => {
     if (!canAccessProtectedData) {
@@ -326,7 +320,8 @@ export function useImageCanvasAssetLibrary({
         label,
         assetFolders.length + 100,
       );
-      setAssetFolders((currentFolders) =>
+      setAssetFolders(
+        (currentFolders) =>
         replaceLocalAssetFolder({
           folders: currentFolders,
           assets: [],
@@ -334,7 +329,8 @@ export function useImageCanvasAssetLibrary({
           persistedFolder: folder,
         }).folders,
       );
-      setAssets((currentAssets) =>
+      setAssets(
+        (currentAssets) =>
         replaceLocalAssetFolder({
           folders: [],
           assets: currentAssets,
@@ -365,8 +361,7 @@ export function useImageCanvasAssetLibrary({
     [onDeleteAssets],
   );
 
-  const submitAssetToShowcase = useCallback(
-    (asset: EditorAsset) => {
+  const submitAssetToShowcase = useCallback((asset: EditorAsset) => {
       if (!resolveAssetShowcaseSubmissionState(asset).canSubmit) {
         return;
       }
@@ -392,7 +387,8 @@ export function useImageCanvasAssetLibrary({
                 ? {
                     ...currentAsset,
                     publicShowcaseEnabled: false,
-                    showcaseId: showcaseAsset.showcaseId ?? showcaseAsset.resourceId,
+                  showcaseId:
+                    showcaseAsset.showcaseId ?? showcaseAsset.resourceId,
                     showcaseReviewStatus: showcaseAsset.reviewStatus ?? 'pending',
                     showcaseDisplayEnabled: showcaseAsset.displayEnabled ?? false,
                     showcaseLikeCount: showcaseAsset.likeCount ?? 0,
@@ -418,9 +414,7 @@ export function useImageCanvasAssetLibrary({
             ),
           );
         });
-    },
-    [],
-  );
+  }, []);
 
   const startRenamingFolder = useCallback((folder: EditorAssetFolder) => {
     setRenamingFolder({
@@ -458,7 +452,8 @@ export function useImageCanvasAssetLibrary({
       if (!defaultFolder) {
         return;
       }
-      setAssetFolders((currentFolders) =>
+      setAssetFolders(
+        (currentFolders) =>
         deleteAssetFolderLocally({
           folders: currentFolders,
           assets: [],
@@ -466,7 +461,8 @@ export function useImageCanvasAssetLibrary({
           defaultFolderId: defaultFolder.id,
         }).folders,
       );
-      setAssets((currentAssets) =>
+      setAssets(
+        (currentAssets) =>
         deleteAssetFolderLocally({
           folders: [],
           assets: currentAssets,
@@ -487,30 +483,56 @@ export function useImageCanvasAssetLibrary({
     [assetFolders],
   );
 
-  const toggleAssetSelected = useCallback((assetId: string) => {
+  const toggleAssetSelected = useCallback(
+    (assetId: string, interaction: AssetSelectionInteraction) => {
+      setSelectedAssetIds((currentIds) => {
+        const nextSelection = resolveAssetSelection({
+          selectedAssetIds: currentIds,
+          anchorAssetId: assetSelectionAnchorRef.current,
+          targetAssetId: assetId,
+          ...interaction,
+        });
+        assetSelectionAnchorRef.current = nextSelection.anchorAssetId;
+        return nextSelection.selectedAssetIds;
+      });
+    },
+    [],
+    );
+
+  const toggleAllAssetsSelected = useCallback((visibleAssetIds: string[]) => {
     setSelectedAssetIds((currentIds) =>
-      toggleAssetSelection(currentIds, assetId),
+      resolveVisibleAssetSelectionToggle({
+        selectedAssetIds: currentIds,
+        visibleAssetIds,
+      }),
     );
   }, []);
 
-  const toggleAllAssetsSelected = useCallback(() => {
-    setSelectedAssetIds(
-      resolveAllAssetSelection({
-        allSelectableAssetsSelected,
-        selectableAssets,
-      }),
-    );
-  }, [allSelectableAssetsSelected, selectableAssets]);
+  const reconcileSelectedAssets = useCallback((visibleAssetIds: string[]) => {
+    setSelectedAssetIds((currentIds) => {
+      const nextSelection = reconcileAssetSelection({
+        selectedAssetIds: currentIds,
+        anchorAssetId: assetSelectionAnchorRef.current,
+        visibleAssetIds,
+      });
+      assetSelectionAnchorRef.current = nextSelection.anchorAssetId;
+      return nextSelection.selectedAssetIds;
+    });
+  }, []);
 
   const deleteSelectedAssets = useCallback(() => {
     const ids = [...selectedAssetIds];
-    const deletedAssets = removeSelectedAssets(assets, selectedAssetIds)
-      .deletedAssets;
+    const deletedAssets = removeSelectedAssets(
+      assets,
+      selectedAssetIds,
+    ).deletedAssets;
     setAssets(
-      (currentAssets) => removeSelectedAssets(currentAssets, selectedAssetIds).assets,
+      (currentAssets) =>
+        removeSelectedAssets(currentAssets, selectedAssetIds).assets,
     );
     onDeleteAssets?.(deletedAssets);
     setSelectedAssetIds(new Set());
+    assetSelectionAnchorRef.current = null;
     ids.forEach((assetId) => {
       void deleteEditorAsset(assetId);
     });
@@ -535,9 +557,21 @@ export function useImageCanvasAssetLibrary({
   const closeAssetSelectionMode = useCallback(() => {
     setIsAssetSelectionMode(false);
     setSelectedAssetIds(new Set());
+    assetSelectionAnchorRef.current = null;
+    marqueeBaseSelectionRef.current = new Set();
     setAssetMarquee(null);
   }, []);
 
+  const openAssetSelectionMode = useCallback(() => {
+    assetSelectionAnchorRef.current = null;
+    marqueeBaseSelectionRef.current = new Set();
+    setRenamingAsset(null);
+    setRenamingFolder(null);
+    setSelectedAssetIds(new Set());
+    setAssetMarquee(null);
+    setIsAssetSelectionMode(true);
+  }, []);
+
   const updateAssetSelectionFromMarquee = useCallback(
     (selectionRect: {
       left: number;
@@ -545,12 +579,13 @@ export function useImageCanvasAssetLibrary({
       top: number;
       bottom: number;
     }) => {
-      setSelectedAssetIds(
-        selectUploadedAssetsInRect({
+      const marqueeSelection = selectUploadedAssetsInRect({
           assets,
           assetTargets: readAssetHitTargets(assetListRef.current),
           selectionRect,
-        }),
+      });
+      setSelectedAssetIds(
+        new Set([...marqueeBaseSelectionRef.current, ...marqueeSelection]),
       );
     },
     [assetListRef, assets],
@@ -579,9 +614,12 @@ export function useImageCanvasAssetLibrary({
           containerRect: assetListRef.current?.getBoundingClientRect(),
         }),
       );
-      setSelectedAssetIds(new Set());
+      marqueeBaseSelectionRef.current =
+        event.ctrlKey || event.metaKey ? new Set(selectedAssetIds) : new Set();
+      assetSelectionAnchorRef.current = null;
+      setSelectedAssetIds(new Set(marqueeBaseSelectionRef.current));
     },
-    [assetListRef, isAssetSelectionMode],
+    [assetListRef, isAssetSelectionMode, selectedAssetIds],
   );
 
   const handleAssetMarqueePointerMove = useCallback(
@@ -632,7 +670,6 @@ export function useImageCanvasAssetLibrary({
     setAssets,
     groupedAssets,
     selectableAssets,
-    allSelectableAssetsSelected,
     renamingAsset,
     setRenamingAsset,
     renamingFolder,
@@ -644,9 +681,7 @@ export function useImageCanvasAssetLibrary({
     activeUploadFolderId,
     setActiveUploadFolderId,
     isAssetSelectionMode,
-    setIsAssetSelectionMode,
     selectedAssetIds,
-    setSelectedAssetIds,
     assetMarquee,
     setAssetMarquee,
     assetPointerDrag,
@@ -666,9 +701,11 @@ export function useImageCanvasAssetLibrary({
     deleteAssetFolder,
     toggleAssetSelected,
     toggleAllAssetsSelected,
+    reconcileSelectedAssets,
     deleteSelectedAssets,
     moveAssetToFolder,
     closeAssetSelectionMode,
+    openAssetSelectionMode,
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
diff --git a/src/index.css b/src/index.css
index 7941510e9..9806ad0b5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4126,6 +4126,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   padding: 0.65rem;
 }
 
+.image-canvas-editor__asset-library {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.image-canvas-editor__asset-library > .image-canvas-editor__asset-list {
+  flex: 1;
+}
+
 .image-canvas-editor__asset-folder {
   display: grid;
   gap: 0.45rem;
@@ -4328,13 +4340,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: var(--image-canvas-brand-accent);
 }
 
-.image-canvas-editor__asset-batch-toolbar {
-  position: sticky;
-  bottom: 0;
-  justify-content: center;
-  margin-top: 0.35rem;
-}
-
 .image-canvas-editor__asset-marquee {
   position: absolute;
   z-index: 4;
@@ -8845,6 +8850,11 @@ button.image-canvas-editor__reference-chip:disabled {
     border-bottom: 1px solid #d9dee8;
   }
 
+  .image-canvas-editor__sidebar--asset-selection {
+    height: clamp(19rem, 62dvh, 21rem);
+    max-height: clamp(19rem, 62dvh, 21rem);
+  }
+
   .image-canvas-editor__asset-list {
     grid-auto-flow: column;
     grid-auto-columns: minmax(15rem, 78vw);
@@ -8852,6 +8862,11 @@ button.image-canvas-editor__reference-chip:disabled {
     overflow-y: hidden;
   }
 
+  .image-canvas-editor__sidebar--asset-selection
+    .image-canvas-editor__asset-list {
+    overflow-y: auto;
+  }
+
   .image-canvas-editor__layers-list {
     grid-auto-flow: column;
     grid-auto-columns: minmax(12.5rem, 70vw);
-- 
2.52.0


From 21143f9ff577c9ed496c526e8080d0cbe3cb2cee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:05:44 +0800
Subject: [PATCH 02/26] format

---
 .../ImageCanvasAssetLibraryPanelView.tsx      | 172 +++---
 .../image-editor/ImageCanvasAssetRowView.tsx  |   4 +-
 ...mageCanvasEditorAssetsIntegration.test.tsx |  24 +-
 .../useImageCanvasAssetExportWorkflow.ts      | 522 +++++++++---------
 .../useImageCanvasAssetLibrary.ts             | 156 +++---
 src/index.test.ts                             |  41 +-
 6 files changed, 471 insertions(+), 448 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index d02ef342d..8df7f7e30 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -154,100 +154,100 @@ export function ImageCanvasAssetLibraryPanelView({
 }: ImageCanvasAssetLibraryPanelViewProps) {
   return (
     <div className="image-canvas-editor__asset-library">
-    <div
-      ref={assetListRef}
-      className="image-canvas-editor__asset-list"
-      onPointerDown={onAssetMarqueePointerDown}
-      onPointerMove={onAssetMarqueePointerMove}
-      onPointerUp={onAssetMarqueePointerUp}
-      onPointerCancel={onAssetMarqueePointerUp}
-    >
-      {pinnedAssetMoveFolderId ? (
-        <div
-          className="image-canvas-editor__asset-folder-sticky-target"
-          aria-hidden="true"
-        >
-          <Folder className="h-4 w-4" />
-          <span>
+      <div
+        ref={assetListRef}
+        className="image-canvas-editor__asset-list"
+        onPointerDown={onAssetMarqueePointerDown}
+        onPointerMove={onAssetMarqueePointerMove}
+        onPointerUp={onAssetMarqueePointerUp}
+        onPointerCancel={onAssetMarqueePointerUp}
+      >
+        {pinnedAssetMoveFolderId ? (
+          <div
+            className="image-canvas-editor__asset-folder-sticky-target"
+            aria-hidden="true"
+          >
+            <Folder className="h-4 w-4" />
+            <span>
               {assetFolders.find(
                 (folder) => folder.id === pinnedAssetMoveFolderId,
               )?.label ?? '目标文件夹'}
-          </span>
-        </div>
-      ) : null}
-      {creatingFolder ? (
-        <form
-          className="image-canvas-editor__folder-create"
-          onSubmit={(event) => {
-            event.preventDefault();
-            void commitNewAssetFolder();
-          }}
-        >
-          <PlatformTextField
-            aria-label="素材文件夹名称"
-            value={newFolderName}
-            autoFocus
-            size="xs"
-            density="compact"
-            className="image-canvas-editor__folder-create-input"
-            onChange={(event) => setNewFolderName(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                event.preventDefault();
-                setCreatingFolder(false);
-                setNewFolderName('');
-              }
+            </span>
+          </div>
+        ) : null}
+        {creatingFolder ? (
+          <form
+            className="image-canvas-editor__folder-create"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void commitNewAssetFolder();
             }}
-          />
+          >
+            <PlatformTextField
+              aria-label="素材文件夹名称"
+              value={newFolderName}
+              autoFocus
+              size="xs"
+              density="compact"
+              className="image-canvas-editor__folder-create-input"
+              onChange={(event) => setNewFolderName(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape') {
+                  event.preventDefault();
+                  setCreatingFolder(false);
+                  setNewFolderName('');
+                }
+              }}
+            />
             <EditorIconButton
               type="submit"
               label="保存素材文件夹"
               icon={Check}
             />
-          <EditorIconButton
-            label="取消新建素材文件夹"
-            icon={X}
-            onClick={() => {
-              setCreatingFolder(false);
-              setNewFolderName('');
-            }}
-          />
-        </form>
-      ) : null}
-      {groupedAssets.map((folder) => (
-        <ImageCanvasAssetFolderSectionView
-          key={folder.id}
-          folder={folder}
-          assetPointerDragRef={assetPointerDragRef}
-          suppressAssetClickRef={suppressAssetClickRef}
-          isAssetSelectionMode={isAssetSelectionMode}
-          selectedAssetIds={selectedAssetIds}
+            <EditorIconButton
+              label="取消新建素材文件夹"
+              icon={X}
+              onClick={() => {
+                setCreatingFolder(false);
+                setNewFolderName('');
+              }}
+            />
+          </form>
+        ) : null}
+        {groupedAssets.map((folder) => (
+          <ImageCanvasAssetFolderSectionView
+            key={folder.id}
+            folder={folder}
+            assetPointerDragRef={assetPointerDragRef}
+            suppressAssetClickRef={suppressAssetClickRef}
+            isAssetSelectionMode={isAssetSelectionMode}
+            selectedAssetIds={selectedAssetIds}
             visibleAssetIds={visibleAssetIds}
-          assetMoveDropFolderId={assetMoveDropFolderId}
-          renamingFolder={renamingFolder}
-          renamingAsset={renamingAsset}
-          setRenamingFolder={setRenamingFolder}
-          setRenamingAsset={setRenamingAsset}
-          setActiveUploadFolderId={setActiveUploadFolderId}
-          setUploadDropTarget={setUploadDropTarget}
-          setAssetPointerDrag={setAssetPointerDrag}
-          updateAssetMoveDropFolder={updateAssetMoveDropFolder}
-          addUploadedFiles={addUploadedFiles}
-          requestUpload={requestUpload}
-          moveAssetToFolder={moveAssetToFolder}
-          toggleAssetFolder={toggleAssetFolder}
-          startRenamingFolder={startRenamingFolder}
-          commitFolderRename={commitFolderRename}
-          deleteAssetFolder={deleteAssetFolder}
-          startRenamingAsset={startRenamingAsset}
-          commitAssetRename={commitAssetRename}
-          deleteUploadedAsset={deleteUploadedAsset}
-          submitAssetToShowcase={submitAssetToShowcase}
-          toggleAssetSelected={toggleAssetSelected}
-          addAssetLayer={addAssetLayer}
-          onDownloadAsset={onDownloadAsset}
-        />
-      ))}
+            assetMoveDropFolderId={assetMoveDropFolderId}
+            renamingFolder={renamingFolder}
+            renamingAsset={renamingAsset}
+            setRenamingFolder={setRenamingFolder}
+            setRenamingAsset={setRenamingAsset}
+            setActiveUploadFolderId={setActiveUploadFolderId}
+            setUploadDropTarget={setUploadDropTarget}
+            setAssetPointerDrag={setAssetPointerDrag}
+            updateAssetMoveDropFolder={updateAssetMoveDropFolder}
+            addUploadedFiles={addUploadedFiles}
+            requestUpload={requestUpload}
+            moveAssetToFolder={moveAssetToFolder}
+            toggleAssetFolder={toggleAssetFolder}
+            startRenamingFolder={startRenamingFolder}
+            commitFolderRename={commitFolderRename}
+            deleteAssetFolder={deleteAssetFolder}
+            startRenamingAsset={startRenamingAsset}
+            commitAssetRename={commitAssetRename}
+            deleteUploadedAsset={deleteUploadedAsset}
+            submitAssetToShowcase={submitAssetToShowcase}
+            toggleAssetSelected={toggleAssetSelected}
+            addAssetLayer={addAssetLayer}
+            onDownloadAsset={onDownloadAsset}
+          />
+        ))}
         {assetMarquee ? (
           <div
             className="image-canvas-editor__asset-marquee"
@@ -279,9 +279,9 @@ export function ImageCanvasAssetLibraryPanelView({
               <Square className="h-4 w-4" />
             )}
             <span className="min-w-0 truncate">
-            {selectedAssetIds.size > 0
+              {selectedAssetIds.size > 0
                 ? `${allVisibleAssetsSelected ? '取消全选' : '全选'} · 已选 ${selectedAssetIds.size}`
-              : '全选'}
+                : '全选'}
             </span>
           </PlatformActionButton>
           <PlatformActionButton
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index 67e3c4eea..6d4350637 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -403,8 +403,8 @@ export function ImageCanvasAssetRowView({
               event.pointerType === 'touch' || event.pointerType === 'pen'
                 ? event.pointerType
                 : 'mouse';
-              return;
-            }
+            return;
+          }
           if (event.button !== 0) {
             return;
           }
diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
index 4d26e44bd..57f11d9d8 100644
--- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
@@ -559,11 +559,11 @@ describe('ImageCanvasEditorView asset library integration', () => {
     const originalCreateElement = document.createElement.bind(document);
     vi.spyOn(document, 'createElement').mockImplementation(
       (tagName, options) => {
-      const element = originalCreateElement(tagName, options);
-      if (tagName === 'video' || tagName === 'audio') {
-        createdMediaElements.push(element as HTMLMediaElement);
-      }
-      return element;
+        const element = originalCreateElement(tagName, options);
+        if (tagName === 'video' || tagName === 'audio') {
+          createdMediaElements.push(element as HTMLMediaElement);
+        }
+        return element;
       },
     );
     Object.defineProperty(URL, 'createObjectURL', {
@@ -1017,13 +1017,13 @@ describe('ImageCanvasEditorView asset library integration', () => {
     await waitFor(() => {
       const savedLayoutWithoutDeletedLayer =
         saveEditorProjectLayoutMock.mock.calls
-        .map((call) => call[1])
-        .find((layout) =>
-          layout.layers.every(
-            (item: { layerId?: unknown }) =>
-              item.layerId !== 'layer-generated-a',
-          ),
-        );
+          .map((call) => call[1])
+          .find((layout) =>
+            layout.layers.every(
+              (item: { layerId?: unknown }) =>
+                item.layerId !== 'layer-generated-a',
+            ),
+          );
       expect(savedLayoutWithoutDeletedLayer).toBeTruthy();
     });
     expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-generated-a');
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index 1b23329ef..be985a491 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -286,38 +286,12 @@ export function useImageCanvasAssetExportWorkflow({
       if (layer.mediaType === 'image-sequence') {
         try {
           const zipBlob = await buildImageSequenceZip(layer, exportMode);
-            const modeName =
-              exportMode === 'spine-json' ? 'SpineJSON' : 'Sequence';
+          const modeName =
+            exportMode === 'spine-json' ? 'SpineJSON' : 'Sequence';
           const exportStamp = formatExportDate(new Date());
-            const downloaded = triggerBrowserDownload(
-              zipBlob,
-            `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}-${exportStamp}.zip`,
-            );
-            if (!downloaded) {
-              setAssetExportStatus({
-                tone: 'error',
-                message: '当前浏览器不支持素材下载',
-              });
-            }
-        } catch {
-            setAssetExportStatus({
-              tone: 'error',
-              message: '序列帧导出失败',
-            });
-        }
-        return;
-      }
-
-      try {
-        const blob = await readLayerAssetBlob(layer);
-          const extension = getLayerAssetExtensionFromTypeOrSrc(
-            layer.mediaType ?? 'image',
-            blob.type,
-            layer.objectKey ?? layer.src,
-          );
           const downloaded = triggerBrowserDownload(
-            blob,
-          `${sanitizeExportFilePart(layer.title, 'canvas-layer')}-${formatExportDate(new Date())}.${extension}`,
+            zipBlob,
+            `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}-${exportStamp}.zip`,
           );
           if (!downloaded) {
             setAssetExportStatus({
@@ -325,11 +299,37 @@ export function useImageCanvasAssetExportWorkflow({
               message: '当前浏览器不支持素材下载',
             });
           }
-      } catch {
+        } catch {
           setAssetExportStatus({
             tone: 'error',
-            message: '素材导出失败',
+            message: '序列帧导出失败',
           });
+        }
+        return;
+      }
+
+      try {
+        const blob = await readLayerAssetBlob(layer);
+        const extension = getLayerAssetExtensionFromTypeOrSrc(
+          layer.mediaType ?? 'image',
+          blob.type,
+          layer.objectKey ?? layer.src,
+        );
+        const downloaded = triggerBrowserDownload(
+          blob,
+          `${sanitizeExportFilePart(layer.title, 'canvas-layer')}-${formatExportDate(new Date())}.${extension}`,
+        );
+        if (!downloaded) {
+          setAssetExportStatus({
+            tone: 'error',
+            message: '当前浏览器不支持素材下载',
+          });
+        }
+      } catch {
+        setAssetExportStatus({
+          tone: 'error',
+          message: '素材导出失败',
+        });
       }
     },
     [],
@@ -347,270 +347,270 @@ export function useImageCanvasAssetExportWorkflow({
       emptyMessage: string;
       successMessage: string;
     }) => {
-    if (isExportingAssets) {
-      return;
-    }
+      if (isExportingAssets) {
+        return;
+      }
       const exportableLayers = targetLayers
-      .filter((layer) => layer.src.trim().length > 0)
-      .sort((left, right) => left.zIndex - right.zIndex);
-    if (!exportableLayers.length) {
-      setAssetExportStatus({
-        tone: 'info',
+        .filter((layer) => layer.src.trim().length > 0)
+        .sort((left, right) => left.zIndex - right.zIndex);
+      if (!exportableLayers.length) {
+        setAssetExportStatus({
+          tone: 'info',
           message: emptyMessage,
-      });
-      return;
-    }
+        });
+        return;
+      }
 
-    setIsExportingAssets(true);
-    setAssetExportStatus(null);
+      setIsExportingAssets(true);
+      setAssetExportStatus(null);
 
-    try {
-      const exportedAt = new Date();
-      const projectName = sanitizeExportFilePart(projectTitle, '未命名画布');
+      try {
+        const exportedAt = new Date();
+        const projectName = sanitizeExportFilePart(projectTitle, '未命名画布');
         const rootFolderName = `${projectName}-${archiveLabel}`;
-      const zip = new JSZip();
-      const rootFolder = zip.folder(rootFolderName) ?? zip;
-      const imagesFolder = rootFolder.folder('images') ?? rootFolder;
-      const mediaFolder = rootFolder.folder('media') ?? rootFolder;
-      const imageByKey = new Map<string, CanvasAssetExportImage>();
-      const usedFileNames = new Map<string, number>();
+        const zip = new JSZip();
+        const rootFolder = zip.folder(rootFolderName) ?? zip;
+        const imagesFolder = rootFolder.folder('images') ?? rootFolder;
+        const mediaFolder = rootFolder.folder('media') ?? rootFolder;
+        const imageByKey = new Map<string, CanvasAssetExportImage>();
+        const usedFileNames = new Map<string, number>();
 
-      for (const layer of exportableLayers) {
-        const key = getLayerExportKey(layer);
-        if (imageByKey.has(key)) {
-          continue;
-        }
-        const index = imageByKey.size + 1;
-        const safeTitle = sanitizeExportFilePart(layer.title, '画布素材');
-        const baseFileName = `${String(index).padStart(3, '0')}-${safeTitle}`;
-        const duplicateCount = usedFileNames.get(baseFileName) ?? 0;
-        usedFileNames.set(baseFileName, duplicateCount + 1);
-        const indexedFileName =
-          duplicateCount > 0
-            ? `${baseFileName}-${duplicateCount + 1}`
-            : baseFileName;
+        for (const layer of exportableLayers) {
+          const key = getLayerExportKey(layer);
+          if (imageByKey.has(key)) {
+            continue;
+          }
+          const index = imageByKey.size + 1;
+          const safeTitle = sanitizeExportFilePart(layer.title, '画布素材');
+          const baseFileName = `${String(index).padStart(3, '0')}-${safeTitle}`;
+          const duplicateCount = usedFileNames.get(baseFileName) ?? 0;
+          usedFileNames.set(baseFileName, duplicateCount + 1);
+          const indexedFileName =
+            duplicateCount > 0
+              ? `${baseFileName}-${duplicateCount + 1}`
+              : baseFileName;
 
-        try {
-          if (layer.mediaType === 'image-sequence') {
-            const frames = getLayerImageSequenceFrames(layer);
-            if (!frames.length) {
-              throw new Error('序列帧为空');
-            }
-            const sequenceFolderName = `sequences/${indexedFileName}`;
-            const sequenceFolder =
-              rootFolder.folder(sequenceFolderName) ?? rootFolder;
-            const framesFolder =
-              sequenceFolder.folder('frames') ?? sequenceFolder;
-            const failedFrames: Array<{
-              frameIndex: number;
-              error: string;
-            }> = [];
-            const exportedFrames: ExportedImageSequenceFrame[] = [];
-            let successCount = 0;
+          try {
+            if (layer.mediaType === 'image-sequence') {
+              const frames = getLayerImageSequenceFrames(layer);
+              if (!frames.length) {
+                throw new Error('序列帧为空');
+              }
+              const sequenceFolderName = `sequences/${indexedFileName}`;
+              const sequenceFolder =
+                rootFolder.folder(sequenceFolderName) ?? rootFolder;
+              const framesFolder =
+                sequenceFolder.folder('frames') ?? sequenceFolder;
+              const failedFrames: Array<{
+                frameIndex: number;
+                error: string;
+              }> = [];
+              const exportedFrames: ExportedImageSequenceFrame[] = [];
+              let successCount = 0;
 
-            for (const [frameArrayIndex, frame] of frames.entries()) {
-              try {
-                const frameBlob = await readLayerImageSequenceFrameBlob(
-                  layer,
-                  frame,
-                );
-                const fileName = getImageSequenceFrameFileName(
-                  frame,
-                  frameArrayIndex,
-                  frameBlob.type,
-                );
+              for (const [frameArrayIndex, frame] of frames.entries()) {
+                try {
+                  const frameBlob = await readLayerImageSequenceFrameBlob(
+                    layer,
+                    frame,
+                  );
+                  const fileName = getImageSequenceFrameFileName(
+                    frame,
+                    frameArrayIndex,
+                    frameBlob.type,
+                  );
                   framesFolder.file(
                     fileName,
                     await blobToUint8Array(frameBlob),
                   );
-                exportedFrames.push({
-                  frameIndex: frame.frameIndex || frameArrayIndex + 1,
-                  fileName,
-                  width: frame.width,
-                  height: frame.height,
-                });
-                successCount += 1;
-              } catch (error) {
-                failedFrames.push({
-                  frameIndex: frame.frameIndex || frameArrayIndex + 1,
-                  error:
-                    error instanceof Error ? error.message : '序列帧读取失败',
-                });
+                  exportedFrames.push({
+                    frameIndex: frame.frameIndex || frameArrayIndex + 1,
+                    fileName,
+                    width: frame.width,
+                    height: frame.height,
+                  });
+                  successCount += 1;
+                } catch (error) {
+                  failedFrames.push({
+                    frameIndex: frame.frameIndex || frameArrayIndex + 1,
+                    error:
+                      error instanceof Error ? error.message : '序列帧读取失败',
+                  });
+                }
               }
-            }
 
-            if (successCount === 0) {
-              throw new Error('序列帧读取失败');
-            }
+              if (successCount === 0) {
+                throw new Error('序列帧读取失败');
+              }
 
-            sequenceFolder.file(
-              'metadata.json',
-              JSON.stringify(
-                {
-                  title: layer.title,
-                  visible: buildLayerVisibleExportMetadata(layer),
-                  frameCount: frames.length,
-                  exportedFrameCount: successCount,
-                  failedFrames,
-                },
-                null,
-                2,
-              ),
-            );
-            sequenceFolder.file(
-              'skeleton.json',
-              JSON.stringify(
+              sequenceFolder.file(
+                'metadata.json',
+                JSON.stringify(
+                  {
+                    title: layer.title,
+                    visible: buildLayerVisibleExportMetadata(layer),
+                    frameCount: frames.length,
+                    exportedFrameCount: successCount,
+                    failedFrames,
+                  },
+                  null,
+                  2,
+                ),
+              );
+              sequenceFolder.file(
+                'skeleton.json',
+                JSON.stringify(
                   buildSpineImageSequenceJson({
                     layer,
                     frames: exportedFrames,
                   }),
-                null,
-                2,
-              ),
-            );
-            sequenceFolder.file(
-              'README.md',
-              buildSpineImageSequenceReadme(layer),
-            );
-            sequenceFolder.file(
-              'manifest.txt',
-              [
-                `素材：${layer.title}`,
-                `类型：序列帧`,
-                `帧数：${successCount}/${frames.length}`,
-                'Spine JSON：skeleton.json',
-                layer.durationSeconds
-                  ? `时长：${layer.durationSeconds}s`
-                  : null,
+                  null,
+                  2,
+                ),
+              );
+              sequenceFolder.file(
+                'README.md',
+                buildSpineImageSequenceReadme(layer),
+              );
+              sequenceFolder.file(
+                'manifest.txt',
+                [
+                  `素材：${layer.title}`,
+                  `类型：序列帧`,
+                  `帧数：${successCount}/${frames.length}`,
+                  'Spine JSON：skeleton.json',
+                  layer.durationSeconds
+                    ? `时长：${layer.durationSeconds}s`
+                    : null,
                   failedFrames.length
                     ? `失败帧数：${failedFrames.length}`
                     : null,
-              ]
-                .filter(Boolean)
-                .join('\n'),
+                ]
+                  .filter(Boolean)
+                  .join('\n'),
+              );
+              imageByKey.set(key, {
+                key,
+                file: `${sequenceFolderName}/manifest.txt`,
+                layer,
+                blob: new Blob([], { type: 'application/zip' }),
+              });
+              continue;
+            }
+
+            const blob = await readLayerAssetBlob(layer);
+            const mediaType = layer.mediaType ?? 'image';
+            const extension = getLayerAssetExtensionFromTypeOrSrc(
+              mediaType,
+              blob.type,
+              layer.objectKey ?? layer.src,
             );
+            const folderName = mediaType === 'image' ? 'images' : 'media';
+            const targetFolder =
+              mediaType === 'image' ? imagesFolder : mediaFolder;
+            const file = `${folderName}/${indexedFileName}.${extension}`;
             imageByKey.set(key, {
               key,
-              file: `${sequenceFolderName}/manifest.txt`,
+              file,
               layer,
-              blob: new Blob([], { type: 'application/zip' }),
+              blob,
+            });
+            targetFolder.file(
+              `${indexedFileName}.${extension}`,
+              await blobToUint8Array(blob),
+            );
+          } catch (error) {
+            const mediaType = layer.mediaType ?? 'image';
+            const extension = getLayerAssetExtensionFromTypeOrSrc(
+              mediaType,
+              '',
+              layer.objectKey ?? layer.src,
+            );
+            const folderName = mediaType === 'image' ? 'images' : 'media';
+            imageByKey.set(key, {
+              key,
+              file: `${folderName}/${indexedFileName}.${extension}`,
+              layer,
+              error: error instanceof Error ? error.message : '素材读取失败',
             });
-            continue;
           }
-
-          const blob = await readLayerAssetBlob(layer);
-          const mediaType = layer.mediaType ?? 'image';
-          const extension = getLayerAssetExtensionFromTypeOrSrc(
-            mediaType,
-            blob.type,
-            layer.objectKey ?? layer.src,
-          );
-          const folderName = mediaType === 'image' ? 'images' : 'media';
-          const targetFolder =
-            mediaType === 'image' ? imagesFolder : mediaFolder;
-          const file = `${folderName}/${indexedFileName}.${extension}`;
-          imageByKey.set(key, {
-            key,
-            file,
-            layer,
-            blob,
-          });
-          targetFolder.file(
-            `${indexedFileName}.${extension}`,
-            await blobToUint8Array(blob),
-          );
-        } catch (error) {
-          const mediaType = layer.mediaType ?? 'image';
-          const extension = getLayerAssetExtensionFromTypeOrSrc(
-            mediaType,
-            '',
-            layer.objectKey ?? layer.src,
-          );
-          const folderName = mediaType === 'image' ? 'images' : 'media';
-          imageByKey.set(key, {
-            key,
-            file: `${folderName}/${indexedFileName}.${extension}`,
-            layer,
-            error: error instanceof Error ? error.message : '素材读取失败',
-          });
         }
-      }
 
-      const failedImages = [...imageByKey.values()].filter(
-        (image) => image.error,
-      );
-      const successfulImages = [...imageByKey.values()].filter(
-        (image) => image.blob,
-      );
-      if (!successfulImages.length) {
+        const failedImages = [...imageByKey.values()].filter(
+          (image) => image.error,
+        );
+        const successfulImages = [...imageByKey.values()].filter(
+          (image) => image.blob,
+        );
+        if (!successfulImages.length) {
+          setAssetExportStatus({
+            tone: 'error',
+            message: '素材导出失败',
+          });
+          return;
+        }
+
+        const metadata: CanvasAssetExportMetadata = {
+          projectTitle,
+          exportedAt: exportedAt.toISOString(),
+          layers: exportableLayers.map((layer) => {
+            const image = imageByKey.get(getLayerExportKey(layer));
+            return buildLayerExportMetadata(
+              layer,
+              image?.blob ? image.file : null,
+              image?.error,
+            );
+          }),
+          failedImages: failedImages.map((image) => ({
+            title: image.layer.title,
+            error: image.error ?? '素材读取失败',
+          })),
+        };
+        const manifest = [
+          `项目：${projectTitle}`,
+          `导出时间：${metadata.exportedAt}`,
+          `素材数量：${successfulImages.length}`,
+          `图层数量：${exportableLayers.length}`,
+          failedImages.length ? `失败素材数量：${failedImages.length}` : null,
+        ]
+          .filter(Boolean)
+          .join('\n');
+
+        rootFolder.file('metadata.json', JSON.stringify(metadata, null, 2));
+        rootFolder.file('manifest.txt', manifest);
+
+        const zipBlob = await zip.generateAsync({ type: 'blob' });
+        if (
+          typeof URL.createObjectURL !== 'function' ||
+          typeof URL.revokeObjectURL !== 'function'
+        ) {
+          setAssetExportStatus({
+            tone: 'error',
+            message: '当前浏览器不支持素材下载',
+          });
+          return;
+        }
+
+        const downloadUrl = URL.createObjectURL(zipBlob);
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.download = `${rootFolderName}-${formatExportDate(exportedAt)}.zip`;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(downloadUrl);
+        setAssetExportStatus({
+          tone: failedImages.length ? 'error' : 'success',
+          message: failedImages.length ? '部分素材未能导出' : successMessage,
+        });
+      } catch {
         setAssetExportStatus({
           tone: 'error',
           message: '素材导出失败',
         });
-        return;
+      } finally {
+        setIsExportingAssets(false);
       }
-
-      const metadata: CanvasAssetExportMetadata = {
-        projectTitle,
-        exportedAt: exportedAt.toISOString(),
-        layers: exportableLayers.map((layer) => {
-          const image = imageByKey.get(getLayerExportKey(layer));
-          return buildLayerExportMetadata(
-            layer,
-            image?.blob ? image.file : null,
-            image?.error,
-          );
-        }),
-        failedImages: failedImages.map((image) => ({
-          title: image.layer.title,
-          error: image.error ?? '素材读取失败',
-        })),
-      };
-      const manifest = [
-        `项目：${projectTitle}`,
-        `导出时间：${metadata.exportedAt}`,
-        `素材数量：${successfulImages.length}`,
-        `图层数量：${exportableLayers.length}`,
-        failedImages.length ? `失败素材数量：${failedImages.length}` : null,
-      ]
-        .filter(Boolean)
-        .join('\n');
-
-      rootFolder.file('metadata.json', JSON.stringify(metadata, null, 2));
-      rootFolder.file('manifest.txt', manifest);
-
-      const zipBlob = await zip.generateAsync({ type: 'blob' });
-      if (
-        typeof URL.createObjectURL !== 'function' ||
-        typeof URL.revokeObjectURL !== 'function'
-      ) {
-        setAssetExportStatus({
-          tone: 'error',
-          message: '当前浏览器不支持素材下载',
-        });
-        return;
-      }
-
-      const downloadUrl = URL.createObjectURL(zipBlob);
-      const link = document.createElement('a');
-      link.href = downloadUrl;
-      link.download = `${rootFolderName}-${formatExportDate(exportedAt)}.zip`;
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-      URL.revokeObjectURL(downloadUrl);
-      setAssetExportStatus({
-        tone: failedImages.length ? 'error' : 'success',
-          message: failedImages.length ? '部分素材未能导出' : successMessage,
-      });
-    } catch {
-      setAssetExportStatus({
-        tone: 'error',
-        message: '素材导出失败',
-      });
-    } finally {
-      setIsExportingAssets(false);
-    }
     },
     [isExportingAssets, projectTitle],
   );
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index 400ae5a04..ad7db3236 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -322,21 +322,21 @@ export function useImageCanvasAssetLibrary({
       );
       setAssetFolders(
         (currentFolders) =>
-        replaceLocalAssetFolder({
-          folders: currentFolders,
-          assets: [],
-          localFolderId: folderId,
-          persistedFolder: folder,
-        }).folders,
+          replaceLocalAssetFolder({
+            folders: currentFolders,
+            assets: [],
+            localFolderId: folderId,
+            persistedFolder: folder,
+          }).folders,
       );
       setAssets(
         (currentAssets) =>
-        replaceLocalAssetFolder({
-          folders: [],
-          assets: currentAssets,
-          localFolderId: folderId,
-          persistedFolder: folder,
-        }).assets,
+          replaceLocalAssetFolder({
+            folders: [],
+            assets: currentAssets,
+            localFolderId: folderId,
+            persistedFolder: folder,
+          }).assets,
       );
       setActiveUploadFolderId(folder.folderId);
     } catch {
@@ -362,58 +362,58 @@ export function useImageCanvasAssetLibrary({
   );
 
   const submitAssetToShowcase = useCallback((asset: EditorAsset) => {
-      if (!resolveAssetShowcaseSubmissionState(asset).canSubmit) {
-        return;
-      }
-      const previousAsset = asset;
-      setAssets((currentAssets) =>
-        currentAssets.map((currentAsset) =>
-          currentAsset.id === asset.id
-            ? {
-                ...currentAsset,
-                publicShowcaseEnabled: false,
-                showcaseReviewStatus: 'pending',
-                showcaseDisplayEnabled: false,
-                showcaseSubmitError: undefined,
-              }
-            : currentAsset,
-        ),
-      );
-      submitEditorAssetShowcase(asset.id)
-        .then((showcaseAsset) => {
-          setAssets((currentAssets) =>
-            currentAssets.map((currentAsset) =>
-              currentAsset.id === asset.id
-                ? {
-                    ...currentAsset,
-                    publicShowcaseEnabled: false,
+    if (!resolveAssetShowcaseSubmissionState(asset).canSubmit) {
+      return;
+    }
+    const previousAsset = asset;
+    setAssets((currentAssets) =>
+      currentAssets.map((currentAsset) =>
+        currentAsset.id === asset.id
+          ? {
+              ...currentAsset,
+              publicShowcaseEnabled: false,
+              showcaseReviewStatus: 'pending',
+              showcaseDisplayEnabled: false,
+              showcaseSubmitError: undefined,
+            }
+          : currentAsset,
+      ),
+    );
+    submitEditorAssetShowcase(asset.id)
+      .then((showcaseAsset) => {
+        setAssets((currentAssets) =>
+          currentAssets.map((currentAsset) =>
+            currentAsset.id === asset.id
+              ? {
+                  ...currentAsset,
+                  publicShowcaseEnabled: false,
                   showcaseId:
                     showcaseAsset.showcaseId ?? showcaseAsset.resourceId,
-                    showcaseReviewStatus: showcaseAsset.reviewStatus ?? 'pending',
-                    showcaseDisplayEnabled: showcaseAsset.displayEnabled ?? false,
-                    showcaseLikeCount: showcaseAsset.likeCount ?? 0,
-                    generationCostMudPoints:
-                      showcaseAsset.generationCostMudPoints ??
-                      currentAsset.generationCostMudPoints,
-                    showcaseSubmitError: undefined,
-                  }
-                : currentAsset,
-            ),
-          );
-        })
-        .catch((error: unknown) => {
-          const showcaseSubmitError = formatShowcaseSubmitError(error);
-          setAssets((currentAssets) =>
-            currentAssets.map((currentAsset) =>
-              currentAsset.id === asset.id
-                ? {
-                    ...previousAsset,
-                    showcaseSubmitError,
-                  }
-                : currentAsset,
-            ),
-          );
-        });
+                  showcaseReviewStatus: showcaseAsset.reviewStatus ?? 'pending',
+                  showcaseDisplayEnabled: showcaseAsset.displayEnabled ?? false,
+                  showcaseLikeCount: showcaseAsset.likeCount ?? 0,
+                  generationCostMudPoints:
+                    showcaseAsset.generationCostMudPoints ??
+                    currentAsset.generationCostMudPoints,
+                  showcaseSubmitError: undefined,
+                }
+              : currentAsset,
+          ),
+        );
+      })
+      .catch((error: unknown) => {
+        const showcaseSubmitError = formatShowcaseSubmitError(error);
+        setAssets((currentAssets) =>
+          currentAssets.map((currentAsset) =>
+            currentAsset.id === asset.id
+              ? {
+                  ...previousAsset,
+                  showcaseSubmitError,
+                }
+              : currentAsset,
+          ),
+        );
+      });
   }, []);
 
   const startRenamingFolder = useCallback((folder: EditorAssetFolder) => {
@@ -454,21 +454,21 @@ export function useImageCanvasAssetLibrary({
       }
       setAssetFolders(
         (currentFolders) =>
-        deleteAssetFolderLocally({
-          folders: currentFolders,
-          assets: [],
-          folderId: folder.id,
-          defaultFolderId: defaultFolder.id,
-        }).folders,
+          deleteAssetFolderLocally({
+            folders: currentFolders,
+            assets: [],
+            folderId: folder.id,
+            defaultFolderId: defaultFolder.id,
+          }).folders,
       );
       setAssets(
         (currentAssets) =>
-        deleteAssetFolderLocally({
-          folders: [],
-          assets: currentAssets,
-          folderId: folder.id,
-          defaultFolderId: defaultFolder.id,
-        }).assets,
+          deleteAssetFolderLocally({
+            folders: [],
+            assets: currentAssets,
+            folderId: folder.id,
+            defaultFolderId: defaultFolder.id,
+          }).assets,
       );
       if (folder.persisted) {
         deleteEditorAssetFolder(folder.id)
@@ -497,7 +497,7 @@ export function useImageCanvasAssetLibrary({
       });
     },
     [],
-    );
+  );
 
   const toggleAllAssetsSelected = useCallback((visibleAssetIds: string[]) => {
     setSelectedAssetIds((currentIds) =>
@@ -580,9 +580,9 @@ export function useImageCanvasAssetLibrary({
       bottom: number;
     }) => {
       const marqueeSelection = selectUploadedAssetsInRect({
-          assets,
-          assetTargets: readAssetHitTargets(assetListRef.current),
-          selectionRect,
+        assets,
+        assetTargets: readAssetHitTargets(assetListRef.current),
+        selectionRect,
       });
       setSelectedAssetIds(
         new Set([...marqueeBaseSelectionRef.current, ...marqueeSelection]),
diff --git a/src/index.test.ts b/src/index.test.ts
index e59350ba2..f22109dd7 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -16,10 +16,16 @@ function readPlatformThemeCss() {
 
 function getCssBlock(source: string, selector: string) {
   const selectorIndex = source.indexOf(selector);
-  expect(selectorIndex, `${selector} should exist in src/index.css`).toBeGreaterThanOrEqual(0);
+  expect(
+    selectorIndex,
+    `${selector} should exist in src/index.css`,
+  ).toBeGreaterThanOrEqual(0);
 
   const openBraceIndex = source.indexOf('{', selectorIndex);
-  expect(openBraceIndex, `${selector} should open a CSS block`).toBeGreaterThanOrEqual(0);
+  expect(
+    openBraceIndex,
+    `${selector} should open a CSS block`,
+  ).toBeGreaterThanOrEqual(0);
 
   let depth = 0;
   for (let index = openBraceIndex; index < source.length; index += 1) {
@@ -111,7 +117,9 @@ describe('index stylesheet unread dots', () => {
     );
 
     expect(generatingBlock).toContain('cursor: progress;');
-    expect(generatingScanBlock).toContain('animation: image-canvas-generation-scan');
+    expect(generatingScanBlock).toContain(
+      'animation: image-canvas-generation-scan',
+    );
     expect(iconBlock).toContain('background: linear-gradient(');
     expect(iconDecorationBlock).toContain('width: 42%;');
     expect(css).not.toContain(
@@ -129,11 +137,16 @@ describe('index stylesheet unread dots', () => {
       css,
       '.project-gallery__canvas-cover-loading::before,\n.image-canvas-editor__layer-image-loading::before',
     );
-    const keyframesBlock = getCssBlock(css, '@keyframes image-canvas-generation-scan');
+    const keyframesBlock = getCssBlock(
+      css,
+      '@keyframes image-canvas-generation-scan',
+    );
 
     expect(loadingBlock).toContain('overflow: hidden;');
     expect(loadingBlock).toContain('background: rgba(226, 232, 240, 0.72);');
-    expect(loadingBlock).not.toContain('animation: image-canvas-generation-scan');
+    expect(loadingBlock).not.toContain(
+      'animation: image-canvas-generation-scan',
+    );
 
     expect(shimmerBlock).toContain('left: -64%;');
     expect(shimmerBlock).toContain('width: 64%;');
@@ -215,7 +228,9 @@ describe('index stylesheet unread dots', () => {
     );
     expect(platformShellBlock).toContain('--platform-layout-viewport-height');
     expect(platformShellBlock).not.toContain('translate3d');
-    expect(platformShellBlock).not.toContain('--platform-keyboard-focus-offset');
+    expect(platformShellBlock).not.toContain(
+      '--platform-keyboard-focus-offset',
+    );
   });
 
   it('uses warm brown tokens for draft unread markers instead of red literals', () => {
@@ -248,7 +263,9 @@ describe('index stylesheet unread dots', () => {
     const css = readIndexCss();
     const themeCss = readPlatformThemeCss();
     const titleRuleIndex = css.indexOf('.selection-hero-brand__title');
-    const platformThemeRuleIndex = css.indexOf('.platform-theme,\n.platform-theme *');
+    const platformThemeRuleIndex = css.indexOf(
+      '.platform-theme,\n.platform-theme *',
+    );
 
     expect(titleRuleIndex).toBeGreaterThanOrEqual(0);
     expect(platformThemeRuleIndex).toBeGreaterThan(titleRuleIndex);
@@ -313,7 +330,10 @@ describe('index stylesheet draft mobile cards', () => {
 
     const draftPanelSelector =
       '#platform-tab-panel-saves,\n  #platform-tab-panel-saves *';
-    const draftPanelSelectorIndex = css.indexOf(draftPanelSelector, mobileQueryIndex);
+    const draftPanelSelectorIndex = css.indexOf(
+      draftPanelSelector,
+      mobileQueryIndex,
+    );
     expect(draftPanelSelectorIndex).toBeGreaterThanOrEqual(0);
 
     const draftPanelBlock = getCssBlock(css, draftPanelSelector);
@@ -323,7 +343,10 @@ describe('index stylesheet draft mobile cards', () => {
 
     const editableSelector =
       "#platform-tab-panel-saves :is(input, textarea, [contenteditable='true'])";
-    const editableSelectorIndex = css.indexOf(editableSelector, mobileQueryIndex);
+    const editableSelectorIndex = css.indexOf(
+      editableSelector,
+      mobileQueryIndex,
+    );
     expect(editableSelectorIndex).toBeGreaterThanOrEqual(0);
 
     const editableBlock = getCssBlock(css, editableSelector);
-- 
2.52.0


From df8d1320f50071f7b925da595d2ce26d8f2bb427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:32:52 +0800
Subject: [PATCH 03/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E9=80=89=E6=8B=A9=E6=9D=A5=E6=BA=90=E5=88=A4?=
 =?UTF-8?q?=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根据 click detail 识别键盘激活并提前清理残留指针类型

新增触摸手势后键盘选择的回归测试
---
 .../ImageCanvasAssetRowView.test.tsx             | 16 ++++++++++++++++
 .../image-editor/ImageCanvasAssetRowView.tsx     |  6 ++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
index 907f160b5..fe69f5845 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
@@ -227,6 +227,22 @@ describe('ImageCanvasAssetRowView', () => {
     );
   });
 
+  it('uses click detail to recognize keyboard selection after a stale touch gesture', () => {
+    const toggleAssetSelected = vi.fn();
+    renderAssetRow({ isAssetSelectionMode: true, toggleAssetSelected });
+    const primaryButton = screen.getByRole('button', {
+      name: '选择素材账号素材A',
+    });
+
+    fireEvent.pointerDown(primaryButton, { pointerType: 'touch' });
+    fireEvent.click(primaryButton, { detail: 0 });
+
+    expect(toggleAssetSelected).toHaveBeenCalledWith(
+      'asset-1',
+      expect.objectContaining({ pointerKind: 'keyboard' }),
+    );
+  });
+
   it('renders rename input and commits with Enter', () => {
     const commitAssetRename = vi.fn();
     renderAssetRow({
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index 6d4350637..ef8a067c0 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -109,6 +109,9 @@ export function ImageCanvasAssetRowView({
 
   const selectAssetFromEvent = useCallback(
     (event: ReactMouseEvent<HTMLElement>) => {
+      const pointerKind =
+        event.detail === 0 ? 'keyboard' : selectionPointerKindRef.current;
+      selectionPointerKindRef.current = 'keyboard';
       if (
         !isAssetSelectionMode ||
         isUploadingAsset ||
@@ -123,9 +126,8 @@ export function ImageCanvasAssetRowView({
         shiftKey: event.shiftKey,
         ctrlKey: event.ctrlKey,
         metaKey: event.metaKey,
-        pointerKind: selectionPointerKindRef.current,
+        pointerKind,
       });
-      selectionPointerKindRef.current = 'keyboard';
     },
     [
       asset.id,
-- 
2.52.0


From dfc1a9159051cd9fd83ea6f6887079cac0c0efa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:34:16 +0800
Subject: [PATCH 04/26] =?UTF-8?q?=E6=95=B4=E7=90=86=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E8=A1=8C=E6=93=8D=E4=BD=9C=E7=8A=B6=E6=80=81=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用显式条件分支构建互斥操作区

保持选择、上传、重命名和普通状态行为不变
---
 .../image-editor/ImageCanvasAssetRowView.tsx  | 94 ++++++++++---------
 1 file changed, 52 insertions(+), 42 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index ef8a067c0..d22d5fa87 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -2,6 +2,7 @@ import { Check, Download, Pencil, Video, X } from 'lucide-react';
 import type {
   Dispatch,
   MouseEvent as ReactMouseEvent,
+  ReactNode,
   SetStateAction,
 } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -230,48 +231,57 @@ export function ImageCanvasAssetRowView({
       }}
     />
   ) : undefined;
-  const actions = isAssetSelectionMode ? undefined : isUploadingAsset ? (
-    <div className="image-canvas-editor__asset-upload-status">
-      <span>{asset.uploadMessage ?? '上传中'}</span>
-      <strong>{Math.round(uploadProgress)}%</strong>
-    </div>
-  ) : isRenaming ? (
-    <div className="image-canvas-editor__asset-actions">
-      <EditorIconButton
-        label={`保存素材${asset.label}名称`}
-        title="保存"
-        icon={Check}
-        onClick={() => commitAssetRename(asset)}
-      />
-      <EditorIconButton
-        label={`取消重命名素材${asset.label}`}
-        title="取消"
-        icon={X}
-        onClick={() => setRenamingAsset(null)}
-      />
-    </div>
-  ) : (
-    <div className="image-canvas-editor__asset-actions">
-      <EditorIconButton
-        label={`下载素材${asset.label}`}
-        title="下载"
-        icon={Download}
-        onClick={() => {
-          closeMenu();
-          onDownloadAsset(asset);
-        }}
-      />
-      <EditorIconButton
-        label={`重命名素材${asset.label}`}
-        title="重命名"
-        icon={Pencil}
-        onClick={() => {
-          closeMenu();
-          startRenamingAsset(asset);
-        }}
-      />
-    </div>
-  );
+  let actions: ReactNode;
+  if (isAssetSelectionMode) {
+    actions = undefined;
+  } else if (isUploadingAsset) {
+    actions = (
+      <div className="image-canvas-editor__asset-upload-status">
+        <span>{asset.uploadMessage ?? '上传中'}</span>
+        <strong>{Math.round(uploadProgress)}%</strong>
+      </div>
+    );
+  } else if (isRenaming) {
+    actions = (
+      <div className="image-canvas-editor__asset-actions">
+        <EditorIconButton
+          label={`保存素材${asset.label}名称`}
+          title="保存"
+          icon={Check}
+          onClick={() => commitAssetRename(asset)}
+        />
+        <EditorIconButton
+          label={`取消重命名素材${asset.label}`}
+          title="取消"
+          icon={X}
+          onClick={() => setRenamingAsset(null)}
+        />
+      </div>
+    );
+  } else {
+    actions = (
+      <div className="image-canvas-editor__asset-actions">
+        <EditorIconButton
+          label={`下载素材${asset.label}`}
+          title="下载"
+          icon={Download}
+          onClick={() => {
+            closeMenu();
+            onDownloadAsset(asset);
+          }}
+        />
+        <EditorIconButton
+          label={`重命名素材${asset.label}`}
+          title="重命名"
+          icon={Pencil}
+          onClick={() => {
+            closeMenu();
+            startRenamingAsset(asset);
+          }}
+        />
+      </div>
+    );
+  }
 
   return (
     <div
-- 
2.52.0


From f622a3d6f20e44ed5d8ec6f778dc7b9f294583bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:35:16 +0800
Subject: [PATCH 05/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=A0=8F=E7=BD=91=E6=A0=BC=E5=88=97=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为下载、删除和取消按钮定义三条等宽显式列轨

避免窄侧栏生成尺寸不一致的隐式列
---
 .../image-editor/ImageCanvasAssetLibraryPanelView.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index 8df7f7e30..ff3f43031 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -263,7 +263,7 @@ export function ImageCanvasAssetLibraryPanelView({
       </div>
       {isAssetSelectionMode ? (
         <PlatformBatchActionToolbar
-          className="static! left-auto! bottom-auto! grid! w-full! max-w-none! transform-none! grid-cols-2! gap-1.5! overflow-hidden! rounded-none! border-x-0! border-b-0! px-2.5! pt-2.5! pb-[calc(0.55rem+env(safe-area-inset-bottom,0px))]! shadow-[0_-8px_22px_rgba(15,23,42,0.08)]!"
+          className="static! left-auto! bottom-auto! grid! w-full! max-w-none! transform-none! grid-cols-3! gap-1.5! overflow-hidden! rounded-none! border-x-0! border-b-0! px-2.5! pt-2.5! pb-[calc(0.55rem+env(safe-area-inset-bottom,0px))]! shadow-[0_-8px_22px_rgba(15,23,42,0.08)]!"
           label="素材批量操作"
         >
           <PlatformActionButton
-- 
2.52.0


From ea1813fcc4ff0f941cabb9cf3aa2d29d36e54811 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:36:09 +0800
Subject: [PATCH 06/26] =?UTF-8?q?=E6=95=B4=E7=90=86=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=85=A8=E9=80=89=E6=A0=87=E7=AD=BE=E6=8E=A8=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在 JSX 前推导全选动作词和已选数量标签

移除批量工具栏中的嵌套三元表达式
---
 .../ImageCanvasAssetLibraryPanelView.tsx            | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index ff3f43031..8a5bd1573 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -152,6 +152,15 @@ export function ImageCanvasAssetLibraryPanelView({
   deleteSelectedAssets,
   closeAssetSelectionMode,
 }: ImageCanvasAssetLibraryPanelViewProps) {
+  let selectionToggleActionText = '全选';
+  if (allVisibleAssetsSelected) {
+    selectionToggleActionText = '取消全选';
+  }
+  let selectionToggleLabel = selectionToggleActionText;
+  if (selectedAssetIds.size > 0) {
+    selectionToggleLabel = `${selectionToggleActionText} · 已选 ${selectedAssetIds.size}`;
+  }
+
   return (
     <div className="image-canvas-editor__asset-library">
       <div
@@ -279,9 +288,7 @@ export function ImageCanvasAssetLibraryPanelView({
               <Square className="h-4 w-4" />
             )}
             <span className="min-w-0 truncate">
-              {selectedAssetIds.size > 0
-                ? `${allVisibleAssetsSelected ? '取消全选' : '全选'} · 已选 ${selectedAssetIds.size}`
-                : '全选'}
+              {selectionToggleLabel}
             </span>
           </PlatformActionButton>
           <PlatformActionButton
-- 
2.52.0


From 3b4b6cac85cb75687d3a066a59cdc82bc039a206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:37:08 +0800
Subject: [PATCH 07/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=B9=B6=E5=8F=91=E7=AB=9E=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用同步 ref 互斥量保护集合导出和单选导出

在导出 finally 中释放互斥量并保留 state 作为忙碌 UI

新增同一事件循环连续导出的回归测试
---
 ...useImageCanvasAssetExportWorkflow.test.tsx | 54 +++++++++++++++++++
 .../useImageCanvasAssetExportWorkflow.ts      | 15 ++++--
 2 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index ea7785b14..8641b149b 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -65,6 +65,15 @@ function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
       >
         导出画布素材
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          void workflow.exportCanvasAssets();
+          void workflow.exportCanvasAssets();
+        }}
+      >
+        连续导出画布素材
+      </button>
       <button
         type="button"
         onClick={() => workflow.exportLayerImage(layers[0] ?? null)}
@@ -163,6 +172,51 @@ describe('useImageCanvasAssetExportWorkflow', () => {
     }
   });
 
+  it('prevents concurrent collection exports before React re-renders', async () => {
+    const originalFetch = globalThis.fetch;
+    let resolveFetch: (response: Response) => void = () => {};
+    const fetchMock = vi.fn(
+      () =>
+        new Promise<Response>((resolve) => {
+          resolveFetch = resolve;
+        }),
+    );
+    globalThis.fetch = fetchMock as typeof fetch;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn(() => 'blob:mutex-export'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[createLayer('slow-export', { src: '/slow-export.png' })]}
+        />,
+      );
+
+      fireEvent.click(
+        screen.getByRole('button', { name: '连续导出画布素材' }),
+      );
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      resolveFetch(new Response(new Blob(['image'], { type: 'image/png' })));
+      await waitFor(() => {
+        expect(screen.getByTestId('status').textContent).toBe(
+          'success:画布素材已导出',
+        );
+      });
+    } finally {
+      globalThis.fetch = originalFetch;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
   it('exports canvas assets into a zip with metadata and failed image records', async () => {
     const originalFetch = globalThis.fetch;
     const fetchMock = vi.fn(async (url: string) => {
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index be985a491..db7d1221c 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -1,5 +1,5 @@
 import JSZip from 'jszip';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import type {
   CanvasAssetExportImage,
@@ -273,6 +273,7 @@ export function useImageCanvasAssetExportWorkflow({
   const [assetExportStatus, setAssetExportStatus] =
     useState<AssetExportStatus | null>(null);
   const [isExportingAssets, setIsExportingAssets] = useState(false);
+  const isExportingAssetsRef = useRef(false);
 
   const exportLayerImage = useCallback(
     async (
@@ -347,7 +348,7 @@ export function useImageCanvasAssetExportWorkflow({
       emptyMessage: string;
       successMessage: string;
     }) => {
-      if (isExportingAssets) {
+      if (isExportingAssetsRef.current) {
         return;
       }
       const exportableLayers = targetLayers
@@ -361,6 +362,7 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
 
+      isExportingAssetsRef.current = true;
       setIsExportingAssets(true);
       setAssetExportStatus(null);
 
@@ -609,10 +611,11 @@ export function useImageCanvasAssetExportWorkflow({
           message: '素材导出失败',
         });
       } finally {
+        isExportingAssetsRef.current = false;
         setIsExportingAssets(false);
       }
     },
-    [isExportingAssets, projectTitle],
+    [projectTitle],
   );
 
   const exportCanvasAssets = useCallback(
@@ -628,7 +631,7 @@ export function useImageCanvasAssetExportWorkflow({
 
   const exportSelectedAssets = useCallback(
     async (selectedLayers: CanvasLayer[]) => {
-      if (isExportingAssets) {
+      if (isExportingAssetsRef.current) {
         return;
       }
       const exportableLayers = selectedLayers.filter(
@@ -642,11 +645,13 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
       if (exportableLayers.length === 1) {
+        isExportingAssetsRef.current = true;
         setIsExportingAssets(true);
         setAssetExportStatus(null);
         try {
           await exportLayerImage(exportableLayers[0] ?? null);
         } finally {
+          isExportingAssetsRef.current = false;
           setIsExportingAssets(false);
         }
         return;
@@ -658,7 +663,7 @@ export function useImageCanvasAssetExportWorkflow({
         successMessage: '选中素材已导出',
       });
     },
-    [exportAssetCollection, exportLayerImage, isExportingAssets],
+    [exportAssetCollection, exportLayerImage],
   );
 
   return {
-- 
2.52.0


From 880ed529eb934524d8f9fdc42cecb04ebbf0002d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:37:43 +0800
Subject: [PATCH 08/26] =?UTF-8?q?=E8=A1=A5=E9=BD=90=E5=8D=95=E9=80=89?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E5=AF=BC=E5=87=BA=E6=88=90=E5=8A=9F=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

让单素材导出返回浏览器下载是否已触发

仅在选中素材下载成功后展示成功状态

新增单选下载成功提示断言
---
 .../useImageCanvasAssetExportWorkflow.test.tsx  |  3 +++
 .../useImageCanvasAssetExportWorkflow.ts        | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index 8641b149b..14284f82b 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -154,6 +154,9 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       fireEvent.click(screen.getByRole('button', { name: '下载一个选中素材' }));
       await waitFor(() => expect(downloads).toHaveLength(1));
       expect(downloads[0]?.name).toMatch(/^素材A-\d{8}-\d{6}\.png$/u);
+      expect(screen.getByTestId('status').textContent).toBe(
+        'success:选中素材已导出',
+      );
 
       fireEvent.click(screen.getByRole('button', { name: '下载多个选中素材' }));
       await waitFor(() => expect(downloads).toHaveLength(2));
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index db7d1221c..7c15dbf35 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -282,7 +282,7 @@ export function useImageCanvasAssetExportWorkflow({
     ) => {
       const exportMode = options.mode ?? 'spine-json';
       if (!layer) {
-        return;
+        return false;
       }
       if (layer.mediaType === 'image-sequence') {
         try {
@@ -300,13 +300,14 @@ export function useImageCanvasAssetExportWorkflow({
               message: '当前浏览器不支持素材下载',
             });
           }
+          return downloaded;
         } catch {
           setAssetExportStatus({
             tone: 'error',
             message: '序列帧导出失败',
           });
+          return false;
         }
-        return;
       }
 
       try {
@@ -326,11 +327,13 @@ export function useImageCanvasAssetExportWorkflow({
             message: '当前浏览器不支持素材下载',
           });
         }
+        return downloaded;
       } catch {
         setAssetExportStatus({
           tone: 'error',
           message: '素材导出失败',
         });
+        return false;
       }
     },
     [],
@@ -649,7 +652,15 @@ export function useImageCanvasAssetExportWorkflow({
         setIsExportingAssets(true);
         setAssetExportStatus(null);
         try {
-          await exportLayerImage(exportableLayers[0] ?? null);
+          const downloaded = await exportLayerImage(
+            exportableLayers[0] ?? null,
+          );
+          if (downloaded) {
+            setAssetExportStatus({
+              tone: 'success',
+              message: '选中素材已导出',
+            });
+          }
         } finally {
           isExportingAssetsRef.current = false;
           setIsExportingAssets(false);
-- 
2.52.0


From f7a191b3d95ba95ff61f8f872e95bb79f6645b11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:42:03 +0800
Subject: [PATCH 09/26] =?UTF-8?q?=E5=B9=B6=E5=8F=91=E8=AF=BB=E5=8F=96?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E5=AF=BC=E5=87=BA=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用共享四路并发读取器限制素材和序列帧网络读取

预先稳定规划去重文件名并按规划顺序写入 ZIP

覆盖外层素材并发、并发上限和逆序完成帧顺序
---
 ...useImageCanvasAssetExportWorkflow.test.tsx | 103 ++++-
 .../useImageCanvasAssetExportWorkflow.ts      | 390 ++++++++++++------
 2 files changed, 355 insertions(+), 138 deletions(-)

diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index 14284f82b..fb2e52973 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -202,9 +202,7 @@ describe('useImageCanvasAssetExportWorkflow', () => {
         />,
       );
 
-      fireEvent.click(
-        screen.getByRole('button', { name: '连续导出画布素材' }),
-      );
+      fireEvent.click(screen.getByRole('button', { name: '连续导出画布素材' }));
 
       expect(fetchMock).toHaveBeenCalledTimes(1);
       resolveFetch(new Response(new Blob(['image'], { type: 'image/png' })));
@@ -220,6 +218,105 @@ describe('useImageCanvasAssetExportWorkflow', () => {
     }
   });
 
+  it('reads layers and sequence frames with bounded concurrency and stable zip order', async () => {
+    const originalFetch = globalThis.fetch;
+    const pendingResponses = new Map<string, () => void>();
+    let activeRequestCount = 0;
+    let maximumRequestCount = 0;
+    const fetchMock = vi.fn((url: string) => {
+      activeRequestCount += 1;
+      maximumRequestCount = Math.max(maximumRequestCount, activeRequestCount);
+      return new Promise<Response>((resolve) => {
+        pendingResponses.set(url, () => {
+          activeRequestCount -= 1;
+          pendingResponses.delete(url);
+          resolve(
+            new Response(url, { headers: { 'content-type': 'image/png' } }),
+          );
+        });
+      });
+    });
+    globalThis.fetch = fetchMock as typeof fetch;
+    let exportedBlob: Blob | null = null;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn((blob: Blob) => {
+        exportedBlob = blob;
+        return 'blob:concurrent-export';
+      }),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[
+            createLayer('sequence-concurrent', {
+              title: '并发序列',
+              zIndex: 0,
+              mediaType: 'image-sequence',
+              imageSequenceFrames: Array.from({ length: 5 }, (_, index) => ({
+                frameIndex: index + 1,
+                imageSrc: `/frame-${index + 1}.png`,
+                width: 100,
+                height: 80,
+              })),
+            }),
+            createLayer('outer-layer', {
+              title: '外层素材',
+              src: '/outer-layer.png',
+              zIndex: 1,
+            }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '导出画布素材' }));
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(4));
+      expect(maximumRequestCount).toBe(4);
+      pendingResponses.get('/frame-4.png')?.();
+      await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(5));
+      pendingResponses.get('/frame-2.png')?.();
+      await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(6));
+      expect(fetchMock).toHaveBeenCalledWith(
+        '/outer-layer.png',
+        expect.any(Object),
+      );
+      expect(maximumRequestCount).toBe(4);
+
+      [...pendingResponses.values()].reverse().forEach((resolve) => resolve());
+      await waitFor(() => expect(exportedBlob).toBeTruthy());
+
+      const zip = await JSZip.loadAsync(exportedBlob!);
+      const framesPrefix = '导出项目-画布素材/sequences/001-并发序列/frames/';
+      expect(
+        Object.keys(zip.files).filter(
+          (path) => path.startsWith(framesPrefix) && path.endsWith('.png'),
+        ),
+      ).toEqual(
+        Array.from(
+          { length: 5 },
+          (_, index) => `${framesPrefix}frame-0${index + 1}.png`,
+        ),
+      );
+      expect(await readZipText(zip, `${framesPrefix}frame-02.png`)).toBe(
+        '/frame-2.png',
+      );
+      expect(
+        zip.file('导出项目-画布素材/images/002-外层素材.png'),
+      ).toBeTruthy();
+    } finally {
+      globalThis.fetch = originalFetch;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
   it('exports canvas assets into a zip with metadata and failed image records', async () => {
     const originalFetch = globalThis.fetch;
     const fetchMock = vi.fn(async (url: string) => {
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index 7c15dbf35..ffa3a32ee 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -38,6 +38,69 @@ type UseImageCanvasAssetExportWorkflowOptions = {
 };
 
 const GIF_PREVIEW_MAX_EDGE = 320;
+const ASSET_EXPORT_READ_CONCURRENCY = 4;
+
+type AssetExportPlan = {
+  key: string;
+  layer: CanvasLayer;
+  indexedFileName: string;
+};
+
+type PreparedSequenceFrame = {
+  fileName: string;
+  bytes: Uint8Array;
+  exportedFrame: ExportedImageSequenceFrame;
+};
+
+type PreparedAssetExport =
+  | {
+      status: 'asset';
+      plan: AssetExportPlan;
+      blob: Blob;
+      bytes: Uint8Array;
+      folderName: 'images' | 'media';
+      fileName: string;
+    }
+  | {
+      status: 'sequence';
+      plan: AssetExportPlan;
+      sequenceFolderName: string;
+      frames: PreparedSequenceFrame[];
+      failedFrames: Array<{ frameIndex: number; error: string }>;
+      frameCount: number;
+    }
+  | {
+      status: 'error';
+      plan: AssetExportPlan;
+      file: string;
+      error: string;
+    };
+
+function createBoundedTaskRunner(concurrency: number) {
+  const maximumConcurrency = Math.max(1, Math.floor(concurrency));
+  const pendingTasks: Array<() => void> = [];
+  let activeTaskCount = 0;
+
+  return function runBoundedTask<T>(task: () => Promise<T>): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      const startTask = () => {
+        activeTaskCount += 1;
+        void task()
+          .then(resolve, reject)
+          .finally(() => {
+            activeTaskCount -= 1;
+            pendingTasks.shift()?.();
+          });
+      };
+
+      if (activeTaskCount < maximumConcurrency) {
+        startTask();
+        return;
+      }
+      pendingTasks.push(startTask);
+    });
+  };
+}
 
 function triggerBrowserDownload(blob: Blob, downloadName: string) {
   if (
@@ -379,13 +442,16 @@ export function useImageCanvasAssetExportWorkflow({
         const mediaFolder = rootFolder.folder('media') ?? rootFolder;
         const imageByKey = new Map<string, CanvasAssetExportImage>();
         const usedFileNames = new Map<string, number>();
+        const plannedKeys = new Set<string>();
+        const exportPlans: AssetExportPlan[] = [];
 
         for (const layer of exportableLayers) {
           const key = getLayerExportKey(layer);
-          if (imageByKey.has(key)) {
+          if (plannedKeys.has(key)) {
             continue;
           }
-          const index = imageByKey.size + 1;
+          plannedKeys.add(key);
+          const index = exportPlans.length + 1;
           const safeTitle = sanitizeExportFilePart(layer.title, '画布素材');
           const baseFileName = `${String(index).padStart(3, '0')}-${safeTitle}`;
           const duplicateCount = usedFileNames.get(baseFileName) ?? 0;
@@ -394,151 +460,205 @@ export function useImageCanvasAssetExportWorkflow({
             duplicateCount > 0
               ? `${baseFileName}-${duplicateCount + 1}`
               : baseFileName;
+          exportPlans.push({ key, layer, indexedFileName });
+        }
 
-          try {
-            if (layer.mediaType === 'image-sequence') {
-              const frames = getLayerImageSequenceFrames(layer);
-              if (!frames.length) {
-                throw new Error('序列帧为空');
-              }
-              const sequenceFolderName = `sequences/${indexedFileName}`;
-              const sequenceFolder =
-                rootFolder.folder(sequenceFolderName) ?? rootFolder;
-              const framesFolder =
-                sequenceFolder.folder('frames') ?? sequenceFolder;
-              const failedFrames: Array<{
-                frameIndex: number;
-                error: string;
-              }> = [];
-              const exportedFrames: ExportedImageSequenceFrame[] = [];
-              let successCount = 0;
-
-              for (const [frameArrayIndex, frame] of frames.entries()) {
-                try {
-                  const frameBlob = await readLayerImageSequenceFrameBlob(
-                    layer,
-                    frame,
-                  );
-                  const fileName = getImageSequenceFrameFileName(
-                    frame,
-                    frameArrayIndex,
-                    frameBlob.type,
-                  );
-                  framesFolder.file(
-                    fileName,
-                    await blobToUint8Array(frameBlob),
-                  );
-                  exportedFrames.push({
-                    frameIndex: frame.frameIndex || frameArrayIndex + 1,
-                    fileName,
-                    width: frame.width,
-                    height: frame.height,
-                  });
-                  successCount += 1;
-                } catch (error) {
-                  failedFrames.push({
-                    frameIndex: frame.frameIndex || frameArrayIndex + 1,
-                    error:
-                      error instanceof Error ? error.message : '序列帧读取失败',
-                  });
+        const runBoundedRead = createBoundedTaskRunner(
+          ASSET_EXPORT_READ_CONCURRENCY,
+        );
+        const preparedExports = await Promise.all(
+          exportPlans.map(async (plan): Promise<PreparedAssetExport> => {
+            const { layer, indexedFileName } = plan;
+            try {
+              if (layer.mediaType === 'image-sequence') {
+                const frames = getLayerImageSequenceFrames(layer);
+                if (!frames.length) {
+                  throw new Error('序列帧为空');
                 }
+                const sequenceFolderName = `sequences/${indexedFileName}`;
+                const preparedFrames = await Promise.all(
+                  frames.map((frame, frameArrayIndex) =>
+                    runBoundedRead(async () => {
+                      try {
+                        const frameBlob = await readLayerImageSequenceFrameBlob(
+                          layer,
+                          frame,
+                        );
+                        const fileName = getImageSequenceFrameFileName(
+                          frame,
+                          frameArrayIndex,
+                          frameBlob.type,
+                        );
+                        return {
+                          status: 'success' as const,
+                          frame: {
+                            fileName,
+                            bytes: await blobToUint8Array(frameBlob),
+                            exportedFrame: {
+                              frameIndex:
+                                frame.frameIndex || frameArrayIndex + 1,
+                              fileName,
+                              width: frame.width,
+                              height: frame.height,
+                            },
+                          },
+                        };
+                      } catch (error) {
+                        return {
+                          status: 'error' as const,
+                          failure: {
+                            frameIndex: frame.frameIndex || frameArrayIndex + 1,
+                            error:
+                              error instanceof Error
+                                ? error.message
+                                : '序列帧读取失败',
+                          },
+                        };
+                      }
+                    }),
+                  ),
+                );
+                const successfulFrames = preparedFrames
+                  .filter((result) => result.status === 'success')
+                  .map((result) => result.frame);
+                if (successfulFrames.length === 0) {
+                  throw new Error('序列帧读取失败');
+                }
+                return {
+                  status: 'sequence',
+                  plan,
+                  sequenceFolderName,
+                  frames: successfulFrames,
+                  failedFrames: preparedFrames
+                    .filter((result) => result.status === 'error')
+                    .map((result) => result.failure),
+                  frameCount: frames.length,
+                };
               }
 
-              if (successCount === 0) {
-                throw new Error('序列帧读取失败');
-              }
-
-              sequenceFolder.file(
-                'metadata.json',
-                JSON.stringify(
-                  {
-                    title: layer.title,
-                    visible: buildLayerVisibleExportMetadata(layer),
-                    frameCount: frames.length,
-                    exportedFrameCount: successCount,
-                    failedFrames,
-                  },
-                  null,
-                  2,
-                ),
-              );
-              sequenceFolder.file(
-                'skeleton.json',
-                JSON.stringify(
-                  buildSpineImageSequenceJson({
-                    layer,
-                    frames: exportedFrames,
-                  }),
-                  null,
-                  2,
-                ),
-              );
-              sequenceFolder.file(
-                'README.md',
-                buildSpineImageSequenceReadme(layer),
-              );
-              sequenceFolder.file(
-                'manifest.txt',
-                [
-                  `素材：${layer.title}`,
-                  `类型：序列帧`,
-                  `帧数：${successCount}/${frames.length}`,
-                  'Spine JSON：skeleton.json',
-                  layer.durationSeconds
-                    ? `时长：${layer.durationSeconds}s`
-                    : null,
-                  failedFrames.length
-                    ? `失败帧数：${failedFrames.length}`
-                    : null,
-                ]
-                  .filter(Boolean)
-                  .join('\n'),
-              );
-              imageByKey.set(key, {
-                key,
-                file: `${sequenceFolderName}/manifest.txt`,
-                layer,
-                blob: new Blob([], { type: 'application/zip' }),
+              const { blob, bytes } = await runBoundedRead(async () => {
+                const nextBlob = await readLayerAssetBlob(layer);
+                return {
+                  blob: nextBlob,
+                  bytes: await blobToUint8Array(nextBlob),
+                };
               });
-              continue;
+              const mediaType = layer.mediaType ?? 'image';
+              const extension = getLayerAssetExtensionFromTypeOrSrc(
+                mediaType,
+                blob.type,
+                layer.objectKey ?? layer.src,
+              );
+              const folderName = mediaType === 'image' ? 'images' : 'media';
+              return {
+                status: 'asset',
+                plan,
+                blob,
+                bytes,
+                folderName,
+                fileName: `${indexedFileName}.${extension}`,
+              };
+            } catch (error) {
+              const mediaType = layer.mediaType ?? 'image';
+              const extension = getLayerAssetExtensionFromTypeOrSrc(
+                mediaType,
+                '',
+                layer.objectKey ?? layer.src,
+              );
+              const folderName = mediaType === 'image' ? 'images' : 'media';
+              return {
+                status: 'error',
+                plan,
+                file: `${folderName}/${indexedFileName}.${extension}`,
+                error: error instanceof Error ? error.message : '素材读取失败',
+              };
             }
+          }),
+        );
 
-            const blob = await readLayerAssetBlob(layer);
-            const mediaType = layer.mediaType ?? 'image';
-            const extension = getLayerAssetExtensionFromTypeOrSrc(
-              mediaType,
-              blob.type,
-              layer.objectKey ?? layer.src,
-            );
-            const folderName = mediaType === 'image' ? 'images' : 'media';
-            const targetFolder =
-              mediaType === 'image' ? imagesFolder : mediaFolder;
-            const file = `${folderName}/${indexedFileName}.${extension}`;
+        for (const preparedExport of preparedExports) {
+          const { key, layer } = preparedExport.plan;
+          if (preparedExport.status === 'error') {
             imageByKey.set(key, {
               key,
-              file,
+              file: preparedExport.file,
               layer,
-              blob,
-            });
-            targetFolder.file(
-              `${indexedFileName}.${extension}`,
-              await blobToUint8Array(blob),
-            );
-          } catch (error) {
-            const mediaType = layer.mediaType ?? 'image';
-            const extension = getLayerAssetExtensionFromTypeOrSrc(
-              mediaType,
-              '',
-              layer.objectKey ?? layer.src,
-            );
-            const folderName = mediaType === 'image' ? 'images' : 'media';
-            imageByKey.set(key, {
-              key,
-              file: `${folderName}/${indexedFileName}.${extension}`,
-              layer,
-              error: error instanceof Error ? error.message : '素材读取失败',
+              error: preparedExport.error,
             });
+            continue;
           }
+          if (preparedExport.status === 'asset') {
+            const targetFolder =
+              preparedExport.folderName === 'images'
+                ? imagesFolder
+                : mediaFolder;
+            targetFolder.file(preparedExport.fileName, preparedExport.bytes);
+            imageByKey.set(key, {
+              key,
+              file: `${preparedExport.folderName}/${preparedExport.fileName}`,
+              layer,
+              blob: preparedExport.blob,
+            });
+            continue;
+          }
+
+          const sequenceFolder =
+            rootFolder.folder(preparedExport.sequenceFolderName) ?? rootFolder;
+          const framesFolder =
+            sequenceFolder.folder('frames') ?? sequenceFolder;
+          preparedExport.frames.forEach((frame) => {
+            framesFolder.file(frame.fileName, frame.bytes);
+          });
+          const exportedFrames = preparedExport.frames.map(
+            (frame) => frame.exportedFrame,
+          );
+          sequenceFolder.file(
+            'metadata.json',
+            JSON.stringify(
+              {
+                title: layer.title,
+                visible: buildLayerVisibleExportMetadata(layer),
+                frameCount: preparedExport.frameCount,
+                exportedFrameCount: exportedFrames.length,
+                failedFrames: preparedExport.failedFrames,
+              },
+              null,
+              2,
+            ),
+          );
+          sequenceFolder.file(
+            'skeleton.json',
+            JSON.stringify(
+              buildSpineImageSequenceJson({ layer, frames: exportedFrames }),
+              null,
+              2,
+            ),
+          );
+          sequenceFolder.file(
+            'README.md',
+            buildSpineImageSequenceReadme(layer),
+          );
+          sequenceFolder.file(
+            'manifest.txt',
+            [
+              `素材：${layer.title}`,
+              `类型：序列帧`,
+              `帧数：${exportedFrames.length}/${preparedExport.frameCount}`,
+              'Spine JSON：skeleton.json',
+              layer.durationSeconds ? `时长：${layer.durationSeconds}s` : null,
+              preparedExport.failedFrames.length
+                ? `失败帧数：${preparedExport.failedFrames.length}`
+                : null,
+            ]
+              .filter(Boolean)
+              .join('\n'),
+          );
+          imageByKey.set(key, {
+            key,
+            file: `${preparedExport.sequenceFolderName}/manifest.txt`,
+            layer,
+            blob: new Blob([], { type: 'application/zip' }),
+          });
         }
 
         const failedImages = [...imageByKey.values()].filter(
-- 
2.52.0


From 35cb6888f943c3489f3e71617e1fdf5cd4f903e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:43:16 +0800
Subject: [PATCH 10/26] =?UTF-8?q?=E6=B8=85=E7=90=86=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E9=80=89=E6=8B=A9=E9=94=9A=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

全选或取消全选前清空上次单项选择锚点

覆盖全选清空后 Shift 点击不扩展旧范围的回归场景
---
 .../useImageCanvasAssetLibrary.test.tsx       | 37 ++++++++++++++++++-
 .../useImageCanvasAssetLibrary.ts             |  1 +
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
index 2888206db..3642649b6 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
@@ -1,6 +1,12 @@
 /* @vitest-environment jsdom */
 
-import { act, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { useRef } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -483,6 +489,35 @@ describe('useImageCanvasAssetLibrary', () => {
     expect(screen.getByTestId('selected-assets').textContent).toBe('');
   });
 
+  it('clears the range anchor when toggling all visible assets', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        createAssetSnapshot({ assetId: 'asset-a', label: '素材A' }),
+        createAssetSnapshot({ assetId: 'asset-b', label: '素材B' }),
+        createAssetSnapshot({ assetId: 'asset-c', label: '素材C' }),
+      ],
+    });
+    render(<AssetLibraryHarness />);
+
+    fireEvent.click(await screen.findByRole('button', { name: '素材A' }));
+    fireEvent.click(screen.getByRole('button', { name: 'toggle all' }));
+    fireEvent.click(screen.getByRole('button', { name: 'toggle all' }));
+    fireEvent.click(screen.getByRole('button', { name: '素材C' }), {
+      shiftKey: true,
+    });
+
+    expect(screen.getByTestId('selected-assets').textContent).toBe('asset-c');
+  });
+
   it('submits a generated asset to showcase review', async () => {
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
       folders: [
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index ad7db3236..63f02a52c 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -500,6 +500,7 @@ export function useImageCanvasAssetLibrary({
   );
 
   const toggleAllAssetsSelected = useCallback((visibleAssetIds: string[]) => {
+    assetSelectionAnchorRef.current = null;
     setSelectedAssetIds((currentIds) =>
       resolveVisibleAssetSelectionToggle({
         selectedAssetIds: currentIds,
-- 
2.52.0


From 1a216501a91a3e19422a257dbf4e4b3493b5f103 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:56:32 +0800
Subject: [PATCH 11/26] =?UTF-8?q?=E5=8E=9F=E5=AD=90=E7=BB=B4=E6=8A=A4?=
 =?UTF-8?q?=E7=B4=A0=E6=9D=90=E9=80=89=E6=8B=A9=E4=B8=8E=E9=94=9A=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将选中素材集合和范围锚点合并到同一个状态

让单击、全选、可见协调、框选和模式切换返回纯状态转移

新增可见范围协调后 Shift 选择的回归测试
---
 .../useImageCanvasAssetLibrary.test.tsx       | 36 +++++++++
 .../useImageCanvasAssetLibrary.ts             | 75 ++++++++++---------
 2 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
index 3642649b6..a02d1c826 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
@@ -215,6 +215,14 @@ function AssetLibraryHarness({
       >
         toggle all
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          assetLibrary.reconcileSelectedAssets(['asset-b', 'asset-c'])
+        }
+      >
+        reconcile to b c
+      </button>
       <button type="button" onClick={assetLibrary.deleteSelectedAssets}>
         delete selected
       </button>
@@ -518,6 +526,34 @@ describe('useImageCanvasAssetLibrary', () => {
     expect(screen.getByTestId('selected-assets').textContent).toBe('asset-c');
   });
 
+  it('reconciles selected ids and their range anchor atomically', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        createAssetSnapshot({ assetId: 'asset-a', label: '素材A' }),
+        createAssetSnapshot({ assetId: 'asset-b', label: '素材B' }),
+        createAssetSnapshot({ assetId: 'asset-c', label: '素材C' }),
+      ],
+    });
+    render(<AssetLibraryHarness />);
+
+    fireEvent.click(await screen.findByRole('button', { name: '素材A' }));
+    fireEvent.click(screen.getByRole('button', { name: 'reconcile to b c' }));
+    fireEvent.click(screen.getByRole('button', { name: '素材C' }), {
+      shiftKey: true,
+    });
+
+    expect(screen.getByTestId('selected-assets').textContent).toBe('asset-c');
+  });
+
   it('submits a generated asset to showcase review', async () => {
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
       folders: [
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index 63f02a52c..3cd870bb7 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -22,6 +22,7 @@ import {
 } from '../../services/image-editor/editorProjectClient';
 import {
   type AssetSelectionInteraction,
+  type AssetSelectionState,
   createAssetMarqueeFromPointer,
   createAssetMarqueeSelectionRect,
   createLocalAssetFolder,
@@ -76,6 +77,13 @@ function formatShowcaseSubmitError(error: unknown) {
   return '提交精选审核失败，请稍后重试';
 }
 
+function createEmptyAssetSelection(): AssetSelectionState {
+  return {
+    selectedAssetIds: new Set(),
+    anchorAssetId: null,
+  };
+}
+
 const ASSET_FOLDER_SELECTOR = '[data-asset-folder-id]';
 const ASSET_ITEM_SELECTOR = '[data-asset-id]';
 const ASSET_MARQUEE_BLOCKED_TARGET_SELECTOR =
@@ -140,10 +148,10 @@ export function useImageCanvasAssetLibrary({
   const [newFolderName, setNewFolderName] = useState('');
   const [activeUploadFolderId, setActiveUploadFolderId] = useState('project');
   const [isAssetSelectionMode, setIsAssetSelectionMode] = useState(false);
-  const [selectedAssetIds, setSelectedAssetIds] = useState<Set<string>>(
-    () => new Set(),
+  const [assetSelection, setAssetSelection] = useState<AssetSelectionState>(
+    createEmptyAssetSelection,
   );
-  const assetSelectionAnchorRef = useRef<string | null>(null);
+  const { selectedAssetIds } = assetSelection;
   const marqueeBaseSelectionRef = useRef<Set<string>>(new Set());
   const [assetMarquee, setAssetMarquee] = useState<AssetMarqueeState | null>(
     null,
@@ -485,40 +493,34 @@ export function useImageCanvasAssetLibrary({
 
   const toggleAssetSelected = useCallback(
     (assetId: string, interaction: AssetSelectionInteraction) => {
-      setSelectedAssetIds((currentIds) => {
-        const nextSelection = resolveAssetSelection({
-          selectedAssetIds: currentIds,
-          anchorAssetId: assetSelectionAnchorRef.current,
+      setAssetSelection((currentSelection) =>
+        resolveAssetSelection({
+          ...currentSelection,
           targetAssetId: assetId,
           ...interaction,
-        });
-        assetSelectionAnchorRef.current = nextSelection.anchorAssetId;
-        return nextSelection.selectedAssetIds;
-      });
+        }),
+      );
     },
     [],
   );
 
   const toggleAllAssetsSelected = useCallback((visibleAssetIds: string[]) => {
-    assetSelectionAnchorRef.current = null;
-    setSelectedAssetIds((currentIds) =>
-      resolveVisibleAssetSelectionToggle({
-        selectedAssetIds: currentIds,
+    setAssetSelection((currentSelection) => ({
+      selectedAssetIds: resolveVisibleAssetSelectionToggle({
+        selectedAssetIds: currentSelection.selectedAssetIds,
         visibleAssetIds,
       }),
-    );
+      anchorAssetId: null,
+    }));
   }, []);
 
   const reconcileSelectedAssets = useCallback((visibleAssetIds: string[]) => {
-    setSelectedAssetIds((currentIds) => {
-      const nextSelection = reconcileAssetSelection({
-        selectedAssetIds: currentIds,
-        anchorAssetId: assetSelectionAnchorRef.current,
+    setAssetSelection((currentSelection) =>
+      reconcileAssetSelection({
+        ...currentSelection,
         visibleAssetIds,
-      });
-      assetSelectionAnchorRef.current = nextSelection.anchorAssetId;
-      return nextSelection.selectedAssetIds;
-    });
+      }),
+    );
   }, []);
 
   const deleteSelectedAssets = useCallback(() => {
@@ -532,8 +534,7 @@ export function useImageCanvasAssetLibrary({
         removeSelectedAssets(currentAssets, selectedAssetIds).assets,
     );
     onDeleteAssets?.(deletedAssets);
-    setSelectedAssetIds(new Set());
-    assetSelectionAnchorRef.current = null;
+    setAssetSelection(createEmptyAssetSelection());
     ids.forEach((assetId) => {
       void deleteEditorAsset(assetId);
     });
@@ -557,18 +558,16 @@ export function useImageCanvasAssetLibrary({
 
   const closeAssetSelectionMode = useCallback(() => {
     setIsAssetSelectionMode(false);
-    setSelectedAssetIds(new Set());
-    assetSelectionAnchorRef.current = null;
+    setAssetSelection(createEmptyAssetSelection());
     marqueeBaseSelectionRef.current = new Set();
     setAssetMarquee(null);
   }, []);
 
   const openAssetSelectionMode = useCallback(() => {
-    assetSelectionAnchorRef.current = null;
     marqueeBaseSelectionRef.current = new Set();
     setRenamingAsset(null);
     setRenamingFolder(null);
-    setSelectedAssetIds(new Set());
+    setAssetSelection(createEmptyAssetSelection());
     setAssetMarquee(null);
     setIsAssetSelectionMode(true);
   }, []);
@@ -585,9 +584,13 @@ export function useImageCanvasAssetLibrary({
         assetTargets: readAssetHitTargets(assetListRef.current),
         selectionRect,
       });
-      setSelectedAssetIds(
-        new Set([...marqueeBaseSelectionRef.current, ...marqueeSelection]),
-      );
+      setAssetSelection({
+        selectedAssetIds: new Set([
+          ...marqueeBaseSelectionRef.current,
+          ...marqueeSelection,
+        ]),
+        anchorAssetId: null,
+      });
     },
     [assetListRef, assets],
   );
@@ -617,8 +620,10 @@ export function useImageCanvasAssetLibrary({
       );
       marqueeBaseSelectionRef.current =
         event.ctrlKey || event.metaKey ? new Set(selectedAssetIds) : new Set();
-      assetSelectionAnchorRef.current = null;
-      setSelectedAssetIds(new Set(marqueeBaseSelectionRef.current));
+      setAssetSelection({
+        selectedAssetIds: new Set(marqueeBaseSelectionRef.current),
+        anchorAssetId: null,
+      });
     },
     [assetListRef, isAssetSelectionMode, selectedAssetIds],
   );
-- 
2.52.0


From 59759360b78627a16eef23cfc35437e0508bcfba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 17:10:08 +0800
Subject: [PATCH 12/26] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=E5=AF=BC=E5=87=BA=E6=8A=80=E6=9C=AF=E5=8F=A3?=
 =?UTF-8?q?=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

记录全选与取消全选清空范围锚点

记录四路并发读取、同步互斥和确定性 ZIP 顺序验收
---
 docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md  | 3 +++
 .../【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md        | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
index 598069637..1c6cbb25b 100644
--- a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
+++ b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
@@ -166,6 +166,7 @@ assetObjectId > objectKey > sourceAssetId > src
 2. 过滤无效图层，保留隐藏图层。
 3. 按去重 key 合并图片源或序列帧源。
 4. 对每个素材源读取 Blob：
+   - 集合导出先按图层顺序完成去重和文件名规划，再用同一个四路并发读取器读取 / 转换普通素材与序列帧，最后按规划和原帧顺序写入 ZIP；不得让响应完成顺序改变导出目录或帧顺序。
    - `data:image/...` 直接转换为 Blob。
    - 同源或可访问 URL 使用 `fetch` 拉取 Blob。
    - 私有 generated / OSS 素材先走 `/api/assets/read-url` 换签并由浏览器直接 `fetch` OSS 签名 URL；只有换签或 OSS 字节读取失败时，才 fallback 到同源 `/api/assets/read-bytes`。
@@ -201,6 +202,8 @@ assetObjectId > objectKey > sourceAssetId > src
 - 序列帧导出的 `skeleton.json` 可被独立验证器解析并预览。
 - 左侧素材库只选一个素材时直接下载该素材，不创建集合 ZIP。
 - 左侧素材库选择多个素材时只把选中素材写入 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，不混入未选素材，并继续覆盖部分失败和全部失败边界。
+- 同一事件循环内重复触发集合导出时只启动一次读取和下载；单个选中素材下载成功后显示 `选中素材已导出`。
+- 多素材与长序列帧集合导出同时读取不超过四项，外层素材无需等待前一个序列全部完成，异步读取逆序完成时 ZIP 文件与帧顺序仍保持稳定。
 
 ## Spine JSON 验证器
 
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index cc70c368d..d7529dbee 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -146,7 +146,7 @@
 - 音频 / 视频素材卡和画布媒体图层必须提供稳定的非文字视觉预览：优先使用 `thumbnailSrc` / 视频 `poster`，没有真实首帧或音频封面时使用由媒体类型、素材名和地址派生的确定性视觉底图。视频图层使用原生 `<video controls preload="metadata" playsInline>` 播放，外层图层仍承接选择和拖拽语义；音频图层播放前继续通过 `/api/assets/read-url` 换签。画布素材导出按 `mediaType` 保留真实媒体格式：图片进入 `images/`，音频 / 视频进入 `media/`，文件扩展名从响应 MIME、`objectKey` 或源 URL 推断，不得把音频 / 视频导出成 PNG。
 - 画布素材 ZIP 的 `metadata.json` 只保存前端信息弹窗和导出文件列表可见的展示快照：项目标题、导出时间、图层标题、文件路径、类型、生成输入、模型显示名、Task 短 ID、Object 显示值、Resolution / 时长和导出错误。导出的生成输入只保留用户实际填写或选择的内容；系统默认兜底提示词、固定工作流提示词、内置图标描述、UI 提取素材固定提示词等内置提示词即使存在于历史 `generationInputs`，也不得写入导出元数据。不得把 `projectId`、`layerId`、`resourceId`、`sourceAssetId`、`sourceResourceId`、原始 `prompt` / `actualPrompt` / `provider` 或画布坐标、锁定、隐藏等布局状态写入导出元数据；Object 字段仅沿用信息弹窗当前可见值。
 - `生成角色动作` 的完成结果按序列帧素材处理：图层主 `src` 使用 `frames[0].imageSrc`，`mediaType` 固定为 `image-sequence`，`assetKind` 固定为 `character-animation`，完整帧列表写入 `imageSequenceFrames`；`previewVideoPath` 只保留为上游预览视频来源，不作为画布主媒体。下载和 ZIP 导出必须因此得到序列帧 ZIP / frames 目录，不能回退为预览视频或首帧 PNG；后端抽帧后逐帧保存带绿幕源图，上传时消费并释放原帧字节，再用该对象的 600 秒 OSS URL 完成透明化并落盘透明帧素材。
-- 素材面板支持按素材名、文件夹名、生成信息、模型、任务和媒体类型搜索。选择模式只作用于左侧素材库当前搜索结果中已展开、上传完成且媒体地址有效的可见素材，素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：桌面鼠标 / 键盘普通点击替换选择，`Ctrl / Cmd + 点击` 切换追加，`Shift + 点击` 按当前可见顺序选择连续区间，`Ctrl / Cmd + Shift + 点击` 追加区间；触摸和笔输入单击采用切换选择。搜索或折叠变化后必须剔除已不可见选择，退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
+- 素材面板支持按素材名、文件夹名、生成信息、模型、任务和媒体类型搜索。选择模式只作用于左侧素材库当前搜索结果中已展开、上传完成且媒体地址有效的可见素材，素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：桌面鼠标 / 键盘普通点击替换选择，`Ctrl / Cmd + 点击` 切换追加，`Shift + 点击` 按当前可见顺序选择连续区间，`Ctrl / Cmd + Shift + 点击` 追加区间；触摸和笔输入单击采用切换选择。搜索或折叠变化后必须剔除已不可见选择，全选 / 取消全选必须清空上次单项选择的范围锚点；退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
 - 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示当前已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。
 - 图层面板支持按图层名、生成信息、模型、任务和媒体类型搜索；支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
-- 
2.52.0


From cd159163c5100a012f0c34a21fe11a60378db00d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 31 Jul 2026 16:56:49 +0800
Subject: [PATCH 13/26] =?UTF-8?q?fix:=20=E5=90=88=E5=B9=B6=E5=9B=9E?=
 =?UTF-8?q?=E5=BD=92=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复文件encoding要求
更新测试
---
 docs/project-memory/shared-memory/decision-log.md          | 3 +--
 src/components/image-editor/ImageCanvasEditorView.test.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 7aaddd5c0..9bda0bcf9 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -5779,7 +5779,7 @@
 - 范围边界：本次只重写左侧素材库选择模式，不改变中央画布舞台和图层列表的选择、框选或下载语义。可选择集合固定为当前搜索结果中已展开、上传完成且媒体地址有效的素材；搜索或折叠变化后立即清理不可见选择。
 - 输入语义：桌面普通点击替换选择，`Ctrl / Cmd + 点击` 切换追加，`Shift + 点击` 按当前可见顺序选择连续区间，`Ctrl / Cmd + Shift + 点击` 追加连续区间；触摸和笔输入单击切换选择。退出选择模式、关闭素材栏或切到图层栏统一清空选择、锚点和框选状态，非选择模式不显示历史选中高亮。
 - 工具栏与导出：批量工具栏作为素材滚动列表的固定非滚动底栏，提供可见范围全选 / 取消全选、下载、删除和取消；选择模式隐藏单行下载 / 重命名并禁用行拖拽和右键菜单。移动端选择模式使用独立的侧栏高度状态，并让素材列表恢复纵向滚动，避免普通模式 `14rem` 高度上限被固定底栏、标题和搜索区吃完。一个选中素材直接下载，多个选中素材复用画布素材导出管线生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，根目录为 `项目名-选中素材/`；单素材、序列帧和两类集合 ZIP 的下载名统一包含到秒的本地时间戳。素材卡整行是统一选择命中区，标题和空白区不得绕过 Ctrl / Cmd / Shift 选择处理。
- 
+
 ## 2026-07-29 抽取通用多 Agent Runtime 公共内核第一阶段
 
 - 背景：AI 游戏创作 Runtime 已有独立 Runner、持久任务、Provider 恢复、Goal、计划、静态/隔离协作和 finalization，但实现仍属于 Tauri package；内建 capability、Agent 目录和 Run Profile 缺少第二个产品可直接依赖的公开契约。
@@ -5806,4 +5806,3 @@
 - 生产接入：AGC Agent interaction 的 stream、普通请求及原 stream-unavailable/empty/deserialize fallback 已改由 `ProviderRegistry` 执行；对外 `LlmStreamDelta`、function name/schema、错误文案、Runner IPC 和 Provider retry/handoff/finalization 持久协议不变。
 - 扩展边界：新 Provider 可直接实现 core `ProviderAdapter` 并注册，不修改 core enum/match。`platform-llm` 当前 DTO 不支持的 tool role/result、toolChoice none/specific 和 reasoning minimal/x-high 在 adapter 转换层零网络失败关闭；工具调用仍以最终 response 为权威。
 - 关联文档：`docs/technical/【技术方案】AI游戏创作Agent Runtime V1.1-2026-07-12.md` V1.50。
-
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 9c171e9e1..61065a83b 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -1122,7 +1122,9 @@ describe('ImageCanvasEditorView', () => {
       await waitFor(() => {
         expect(exportedBlob).toBeTruthy();
       });
-      expect(downloadName).toMatch(/^导出项目-画布素材-\d{8}\.zip$/u);
+      expect(downloadName).toMatch(
+        /^导出项目-画布素材-\d{8}-\d{6}\.zip$/u,
+      );
 
       const zip = await JSZip.loadAsync(exportedBlob!);
       expect(zip.file('导出项目-画布素材/images/001-素材 A.png')).toBeTruthy();
@@ -1360,7 +1362,7 @@ describe('ImageCanvasEditorView', () => {
       fireEvent.click(screen.getByRole('button', { name: '下载按钮' }));
 
       await waitFor(() => {
-        expect(downloadName).toBe('拼图素材.webp');
+        expect(downloadName).toMatch(/^拼图素材-\d{8}-\d{6}\.webp$/u);
       });
       expect(downloadHref).toBe('blob:layer-download');
       expect(globalThis.fetch).toHaveBeenCalledWith(
-- 
2.52.0


From cf1ee0e20388be701fb00ab48e04eef57c215b34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 31 Jul 2026 17:41:35 +0800
Subject: [PATCH 14/26] =?UTF-8?q?refactor:=20=E6=8A=BD=E5=8F=96=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ImageCanvasAssetLibraryPanelView.tsx             |  8 ++++----
 src/index.css                                        | 12 ++++++++++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index 8a5bd1573..9f7e9483e 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -276,7 +276,7 @@ export function ImageCanvasAssetLibraryPanelView({
           label="素材批量操作"
         >
           <PlatformActionButton
-            className="col-span-3 min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
+            className="image-canvas-editor__asset-batch-action col-span-3"
             tone="secondary"
             size="sm"
             disabled={visibleAssetIds.length === 0 || isExportingSelectedAssets}
@@ -292,7 +292,7 @@ export function ImageCanvasAssetLibraryPanelView({
             </span>
           </PlatformActionButton>
           <PlatformActionButton
-            className="min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
+            className="image-canvas-editor__asset-batch-action"
             tone="secondary"
             size="sm"
             disabled={selectedAssetIds.size === 0 || isExportingSelectedAssets}
@@ -302,7 +302,7 @@ export function ImageCanvasAssetLibraryPanelView({
             {isExportingSelectedAssets ? '下载中' : '下载'}
           </PlatformActionButton>
           <PlatformActionButton
-            className="min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
+            className="image-canvas-editor__asset-batch-action"
             tone="warning"
             size="sm"
             disabled={selectedAssetIds.size === 0 || isExportingSelectedAssets}
@@ -312,7 +312,7 @@ export function ImageCanvasAssetLibraryPanelView({
             删除
           </PlatformActionButton>
           <PlatformActionButton
-            className="min-h-[2.35rem]! w-full! min-w-0! max-w-full! gap-1.5! overflow-hidden! px-2! py-1.5! text-xs!"
+            className="image-canvas-editor__asset-batch-action"
             tone="secondary"
             size="sm"
             onClick={closeAssetSelectionMode}
diff --git a/src/index.css b/src/index.css
index a6ce6a270..d3ed2ea8c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4138,6 +4138,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   flex: 1;
 }
 
+.image-canvas-editor__asset-batch-action {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+  min-height: 2.35rem !important;
+  gap: 0.375rem !important;
+  overflow: hidden !important;
+  padding: 0.375rem 0.5rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
 .image-canvas-editor__asset-folder {
   display: grid;
   gap: 0.45rem;
-- 
2.52.0


From 7cd9aa790cd94e5bca359c607934dee22c9f6eca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 31 Jul 2026 17:45:04 +0800
Subject: [PATCH 15/26] =?UTF-8?q?perf:=20=E6=94=B9=E7=94=A8map=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E7=B4=A0=E6=9D=90=E5=BA=93=E4=B8=AD=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

考虑到整个素材库的规模可能很大, 改用map查询
---
 src/components/image-editor/ImageCanvasEditorView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index d9ca86d83..91cd02163 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1401,10 +1401,11 @@ export function ImageCanvasEditorView({
   const downloadSelectedAssets = useCallback(
     (visibleAssetIds: string[]) => {
       const selectedIds = new Set(selectedAssetIds);
+      const assetById = new Map(assets.map((asset) => [asset.id, asset]));
       const selectedLayers = visibleAssetIds
         .filter((assetId) => selectedIds.has(assetId))
         .map((assetId, index) => {
-          const asset = assets.find((item) => item.id === assetId);
+          const asset = assetById.get(assetId);
           if (!asset) {
             return null;
           }
-- 
2.52.0


From 31900df2b8c97b1e03f7c02b967f4086bf99e917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 31 Jul 2026 19:38:46 +0800
Subject: [PATCH 16/26] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构多选逻辑到一个单独的hook
不在最终提交时过滤, 只有选择操作会影响最终结果集合
---
 docs/project-memory/shared-memory/pitfalls.md |   8 +
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   4 +-
 ...��构】图片画布编辑器前端拆分计划-2026-06-17.md |   5 +-
 .../ImageCanvasAssetFolderSectionView.tsx     |   2 +-
 .../ImageCanvasAssetLibraryModel.test.ts      | 213 +--------
 .../ImageCanvasAssetLibraryModel.ts           | 255 ----------
 .../ImageCanvasAssetLibraryPanelView.tsx      |  10 +-
 .../image-editor/ImageCanvasAssetRowView.tsx  |   6 +-
 ...mageCanvasEditorAssetsIntegration.test.tsx |  80 +++-
 .../ImageCanvasEditorShellView.test.tsx       |   1 -
 .../image-editor/ImageCanvasEditorView.tsx    |  31 +-
 .../ImageCanvasSidebarView.test.tsx           |  10 +-
 .../image-editor/ImageCanvasSidebarView.tsx   |  17 +-
 .../useImageCanvasAssetExportWorkflow.ts      |   1 +
 .../useImageCanvasAssetLibrary.test.tsx       |  35 +-
 .../useImageCanvasAssetLibrary.ts             | 234 ++--------
 .../useImageCanvasAssetSelection.test.tsx     | 223 +++++++++
 .../useImageCanvasAssetSelection.ts           | 442 ++++++++++++++++++
 18 files changed, 831 insertions(+), 746 deletions(-)
 create mode 100644 src/components/image-editor/useImageCanvasAssetSelection.test.tsx
 create mode 100644 src/components/image-editor/useImageCanvasAssetSelection.ts

diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index fe9792898..337521654 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -191,6 +191,14 @@
 - 验证：`ImageCanvasEditorModel.test.ts` 覆盖素材库 source resource 保留，`useImageCanvasAssetCanvasBridge.test.tsx` 覆盖资源 ID 级联清理，`ImageCanvasEditorAssetsIntegration.test.tsx` 覆盖删除后保存的新 layout 不再包含被删图层。
 - 关联：`src/components/image-editor/ImageCanvasEditorModel.ts`、`src/components/image-editor/useImageCanvasAssetCanvasBridge.ts`、`src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx`。
 
+## 图片画布素材选择有效性不要绑定搜索与折叠可见性
+
+- 现象：批量选择多个素材后，搜索、折叠文件夹或展开文件夹会让已选数量下降、Shift 范围锚点丢失，后续批量下载或删除遗漏此前已选素材。
+- 原因：搜索结果和文件夹展开状态只描述当前 UI 可见范围，不描述素材是否仍然有效；用 `visibleAssetIds` reconcile 全局选择会把暂时隐藏误判为素材失效。
+- 处理：由唯一 `useImageCanvasAssetSelection` 持有选择集合、范围锚点、框选和全部选择 mutation；全局选择只按全部 `selectableAssetIds` 清理真正删除、上传未完成、上传失败或媒体地址无效的 ID。`visibleAssetIds` 只作为单项切换、Shift 可见区间和当前结果全选 / 取消全选的动作入参，批量下载与删除消费 hook 输出的完整 `selectedAssets`。
+- 验证：模型测试覆盖隐藏选择保留、可见范围增量和真正失效 ID 清理；图片画布素材集成测试覆盖搜索、折叠 / 展开后选中数量稳定及当前可见全选不影响隐藏选择。
+- 关联：`src/components/image-editor/useImageCanvasAssetSelection.ts`、`src/components/image-editor/useImageCanvasAssetLibrary.ts`、`src/components/image-editor/ImageCanvasSidebarView.tsx`、`src/components/image-editor/ImageCanvasEditorView.tsx`。
+
 ## 后台素材查询不要用 SQL 直查 editor_asset
 
 - 现象：后台“素材查询”报 `HTTP 400：no such table: editor_asset. If the table exists, it may be marked private.`。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index a71eedc9c..2e921ba1f 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -168,8 +168,8 @@
 - 音频 / 视频素材卡和画布媒体图层必须提供稳定的非文字视觉预览：优先使用 `thumbnailSrc` / 视频 `poster`，没有真实首帧或音频封面时使用由媒体类型、素材名和地址派生的确定性视觉底图。视频图层使用原生 `<video controls preload="metadata" playsInline>` 播放，外层图层仍承接选择和拖拽语义；音频图层播放前继续通过 `/api/assets/read-url` 换签。画布素材导出按 `mediaType` 保留真实媒体格式：图片进入 `images/`，音频 / 视频进入 `media/`，文件扩展名从响应 MIME、`objectKey` 或源 URL 推断，不得把音频 / 视频导出成 PNG。
 - 画布素材 ZIP 的 `metadata.json` 只保存前端信息弹窗和导出文件列表可见的展示快照：项目标题、导出时间、图层标题、文件路径、类型、生成输入、模型显示名、Task 短 ID、Object 显示值、Resolution / 时长和导出错误。导出的生成输入只保留用户实际填写或选择的内容；系统默认兜底提示词、固定工作流提示词、内置图标描述、UI 提取素材固定提示词等内置提示词即使存在于历史 `generationInputs`，也不得写入导出元数据。不得把 `projectId`、`layerId`、`resourceId`、`sourceAssetId`、`sourceResourceId`、原始 `prompt` / `actualPrompt` / `provider` 或画布坐标、锁定、隐藏等布局状态写入导出元数据；Object 字段仅沿用信息弹窗当前可见值。
 - `生成角色动作` 的完成结果按序列帧素材处理：图层主 `src` 使用 `frames[0].imageSrc`，`mediaType` 固定为 `image-sequence`，`assetKind` 固定为 `character-animation`，完整帧列表写入 `imageSequenceFrames`；`previewVideoPath` 只保留为上游预览视频来源，不作为画布主媒体。下载和 ZIP 导出必须因此得到序列帧 ZIP / frames 目录，不能回退为预览视频或首帧 PNG；后端抽帧后逐帧保存带绿幕源图，上传时消费并释放原帧字节，再用该对象的 600 秒 OSS URL 完成透明化并落盘透明帧素材。
-- 素材面板支持按素材名、文件夹名、生成信息、用户可见模型、任务和媒体类型搜索。选择模式只作用于左侧素材库当前搜索结果中已展开、上传完成且媒体地址有效的可见素材，素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：桌面鼠标 / 键盘普通点击替换选择，`Ctrl / Cmd + 点击` 切换追加，`Shift + 点击` 按当前可见顺序选择连续区间，`Ctrl / Cmd + Shift + 点击` 追加区间；触摸和笔输入单击采用切换选择。搜索或折叠变化后必须剔除已不可见选择，全选 / 取消全选必须清空上次单项选择的范围锚点；退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
-- 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示当前已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。Provider 与 `isEditorInternalProcessingModel(...)` 识别的内部处理模型不得进入搜索索引，避免出现隐藏字段可命中或命中但无可见匹配字段；原始审计元数据只保留给服务端和后台管理读取，普通用户（包括素材 owner）不得通过响应取得。
+- 素材面板支持按素材名、文件夹名、生成信息、用户可见模型、任务和媒体类型搜索。选择模式的选中集合以全部上传完成且媒体地址有效的可选素材为有效性边界，不因搜索、折叠或展开变化而收缩；只有素材被删除、进入上传中 / 失败态或媒体地址失效时才剔除对应选择及范围锚点。素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删当前已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
+- 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示跨搜索与折叠状态保留的全部已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；下载和删除作用于完整选中集合，不得只消费当前可见 ID。工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。Provider 与 `isEditorInternalProcessingModel(...)` 识别的内部处理模型不得进入搜索索引，避免出现隐藏字段可命中或命中但无可见匹配字段；原始审计元数据只保留给服务端和后台管理读取，普通用户（包括素材 owner）不得通过响应取得。
 - 图层面板支持按图层名、生成信息、用户可见模型、任务和媒体类型搜索；Provider 与内部处理模型同样不得进入搜索索引。普通用户图层快照也不得携带这些内部字段。支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
 - 鼠标滚轮默认按设备原始 `deltaX / deltaY` 二维平移画布视口；当按住 Shift 且设备上报 `deltaX = 0` 时，视口输入适配层把 `deltaY` 映射为横向位移并将纵向位移置零，核心平移模型仍只消费归一化后的 X / Y。按住 Ctrl / Cmd 滚轮才缩放画布，并阻止浏览器页面缩放。缩放比例显示保持现有换算口径，最低可缩小到 `5%`。
diff --git a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
index 68c306b07..e1d0f22de 100644
--- a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
+++ b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
@@ -97,9 +97,12 @@
 ## 第十阶段模块
 
 - `useImageCanvasAssetLibrary.ts`
-  - 承载账号级素材库状态模型：素材文件夹、素材列表、文件夹折叠 / 新建 / 重命名 / 删除、素材重命名 / 删除、素材选择模式、框选、多选删除、素材拖到文件夹和鉴权失败登录弹窗。
+  - 承载账号级素材库状态模型：素材文件夹、素材列表、文件夹折叠 / 新建 / 重命名 / 删除、素材重命名 / 删除、批量删除资源副作用、素材拖到文件夹和鉴权失败登录弹窗；不再持有选择集合、范围锚点或框选交互状态。
   - 主视图继续保留上传文件读取、上传占位卡片进度、拖到画布坐标、创建画布图层、工程资源持久化和画布图层清理；素材删除通过 `onDeleteAssets` 回调通知主视图清理关联图层。
   - 该 hook 有独立单测覆盖素材库加载归一化、401 登录、新建文件夹临时 id 替换、素材移动、删除回调和多选删除，避免后续整理侧栏 JSX 时丢失素材库能力。
+- `useImageCanvasAssetSelection.ts`
+  - 作为素材选择的唯一状态边界，统一持有选择模式、完整选中集合、范围锚点、可选素材有效性 reconcile、单项 / Shift / 当前可见全选增量、框选几何与框选生命周期，并向批量下载 / 删除只暴露已经按素材顺序解析的 `selectedAssets`。
+  - 搜索和文件夹折叠只在侧栏产生 `visibleAssetIds` 并传入增量动作，不得直接修改或 reconcile 选择集合；选择行为测试集中在该 hook，素材库 model 不再维护第二套选择状态机。
 
 ## 第十一阶段模块
 
diff --git a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
index 35ed48784..cfd562459 100644
--- a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
@@ -11,7 +11,6 @@ import {
 import type { Dispatch, SetStateAction } from 'react';
 
 import { PlatformTextField } from '../common/PlatformTextField';
-import type { AssetSelectionInteraction } from './ImageCanvasAssetLibraryModel';
 import type {
   GroupedEditorAssetFolder,
   UploadFilesOptions,
@@ -30,6 +29,7 @@ import type {
   EditorAssetFolder,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
+import type { AssetSelectionInteraction } from './useImageCanvasAssetSelection';
 
 type ImageCanvasAssetFolderSectionViewProps = {
   folder: GroupedEditorAssetFolder;
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts b/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts
index b15888c63..889a87565 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts
+++ b/src/components/image-editor/ImageCanvasAssetLibraryModel.test.ts
@@ -1,38 +1,31 @@
 import { describe, expect, it } from 'vitest';
 
 import {
-  areAllSelectableAssetsSelected,
-  createAssetMarqueeFromPointer,
-  createAssetMarqueeSelectionRect,
   createLocalAssetFolder,
   deleteAssetFolderLocally,
   filterGroupedAssetsBySearch,
-  getSelectableAssets,
   groupAssetsByFolder,
   layerMatchesSearch,
   layerStartsWithSearch,
-  moveAssetMarqueeToPointer,
   moveAssetToFolderLocally,
-  reconcileAssetSelection,
   removeAssetById,
   removeSelectedAssets,
   renameAssetById,
   renameAssetFolderById,
   replaceLocalAssetFolder,
-  resolveAllAssetSelection,
   resolveAssetFolderIdFromPoint,
-  resolveAssetSelection,
   resolveAssetShowcaseSubmissionState,
   resolveDefaultAssetFolder,
   resolvePinnedAssetMoveFolderId,
   resolvePreferredAssetUploadFolder,
   resolveUploadAssetFolder,
-  resolveVisibleAssetSelectionToggle,
-  selectUploadedAssetsInRect,
   toggleAssetFolderCollapsed,
-  toggleAssetSelection,
 } from './ImageCanvasAssetLibraryModel';
-import type {CanvasLayer, EditorAsset, EditorAssetFolder } from './ImageCanvasEditorTypes';
+import type {
+  CanvasLayer,
+  EditorAsset,
+  EditorAssetFolder,
+} from './ImageCanvasEditorTypes';
 
 function createFolder(
   overrides: Partial<EditorAssetFolder> = {},
@@ -104,10 +97,6 @@ describe('ImageCanvasAssetLibraryModel', () => {
       { id: 'project', assets: [{ id: 'asset-a' }, { id: 'built-in' }] },
       { id: 'folder-role', assets: [{ id: 'asset-b' }] },
     ]);
-    expect(getSelectableAssets(assets).map((asset) => asset.id)).toEqual([
-      'asset-a',
-      'asset-b',
-    ]);
   });
 
   it('explains why assets cannot be submitted to showcase review', () => {
@@ -342,139 +331,16 @@ describe('ImageCanvasAssetLibraryModel', () => {
     });
   });
 
-  it('toggles selection, selects all uploaded assets and removes selected assets', () => {
+  it('removes selected assets', () => {
     const assets = [
       createAsset({ id: 'asset-a' }),
       createAsset({ id: 'asset-b' }),
     ];
-    const selected = toggleAssetSelection(new Set<string>(), 'asset-a');
-
-    expect([...selected]).toEqual(['asset-a']);
-    expect([...toggleAssetSelection(selected, 'asset-a')]).toEqual([]);
-    expect(areAllSelectableAssetsSelected(assets, new Set(['asset-a']))).toBe(
-      false,
-    );
-    const allSelected = resolveAllAssetSelection({
-      allSelectableAssetsSelected: false,
-      selectableAssets: assets,
-    });
-    expect([...allSelected]).toEqual(['asset-a', 'asset-b']);
     const removal = removeSelectedAssets(assets, new Set(['asset-b']));
     expect(removal.assets.map((asset) => asset.id)).toEqual(['asset-a']);
     expect(removal.deletedAssets.map((asset) => asset.id)).toEqual(['asset-b']);
   });
 
-  it('applies desktop single, additive and visible range selection semantics', () => {
-    const visibleAssetIds = ['asset-a', 'asset-b', 'asset-c', 'asset-d'];
-    const initial = {
-      selectedAssetIds: new Set(['asset-a']),
-      anchorAssetId: 'asset-a',
-    };
-    const replaced = resolveAssetSelection({
-      ...initial,
-      visibleAssetIds,
-      targetAssetId: 'asset-c',
-    });
-    expect([...replaced.selectedAssetIds]).toEqual(['asset-c']);
-
-    const appended = resolveAssetSelection({
-      ...replaced,
-      visibleAssetIds,
-      targetAssetId: 'asset-a',
-      ctrlKey: true,
-    });
-    expect([...appended.selectedAssetIds]).toEqual(['asset-c', 'asset-a']);
-    expect([
-      ...resolveAssetSelection({
-        ...appended,
-        visibleAssetIds,
-        targetAssetId: 'asset-a',
-        metaKey: true,
-      }).selectedAssetIds,
-    ]).toEqual(['asset-c']);
-
-    const range = resolveAssetSelection({
-      selectedAssetIds: new Set(['asset-a', 'asset-d']),
-      anchorAssetId: 'asset-a',
-      visibleAssetIds,
-      targetAssetId: 'asset-c',
-      shiftKey: true,
-    });
-    expect([...range.selectedAssetIds]).toEqual([
-      'asset-a',
-      'asset-b',
-      'asset-c',
-    ]);
-    expect([
-      ...resolveAssetSelection({
-        selectedAssetIds: new Set(['asset-d']),
-        anchorAssetId: 'asset-b',
-        visibleAssetIds,
-        targetAssetId: 'asset-c',
-        shiftKey: true,
-        ctrlKey: true,
-      }).selectedAssetIds,
-    ]).toEqual(['asset-d', 'asset-b', 'asset-c']);
-  });
-
-  it('toggles touch and pen targets without replacing prior selection', () => {
-    const touchSelection = resolveAssetSelection({
-      selectedAssetIds: new Set(['asset-a']),
-      anchorAssetId: 'asset-a',
-      visibleAssetIds: ['asset-a', 'asset-b'],
-      targetAssetId: 'asset-b',
-      pointerKind: 'touch',
-    });
-    expect([...touchSelection.selectedAssetIds]).toEqual([
-      'asset-a',
-      'asset-b',
-    ]);
-    expect([
-      ...resolveAssetSelection({
-        ...touchSelection,
-        visibleAssetIds: ['asset-a', 'asset-b'],
-        targetAssetId: 'asset-a',
-        pointerKind: 'pen',
-      }).selectedAssetIds,
-    ]).toEqual(['asset-b']);
-  });
-
-  it('reconciles hidden selections and toggles only the visible asset set', () => {
-    expect(
-      reconcileAssetSelection({
-        selectedAssetIds: new Set(['asset-a', 'asset-hidden']),
-        anchorAssetId: 'asset-hidden',
-        visibleAssetIds: ['asset-a', 'asset-b'],
-      }),
-    ).toEqual({
-      selectedAssetIds: new Set(['asset-a']),
-      anchorAssetId: null,
-    });
-    expect([
-      ...resolveVisibleAssetSelectionToggle({
-        selectedAssetIds: new Set(['asset-hidden']),
-        visibleAssetIds: ['asset-a', 'asset-b'],
-      }),
-    ]).toEqual(['asset-hidden', 'asset-a', 'asset-b']);
-    expect([
-      ...resolveVisibleAssetSelectionToggle({
-        selectedAssetIds: new Set(['asset-hidden', 'asset-a', 'asset-b']),
-        visibleAssetIds: ['asset-a', 'asset-b'],
-      }),
-    ]).toEqual(['asset-hidden']);
-  });
-
-  it('excludes unfinished and empty uploaded assets from selection', () => {
-    expect(
-      getSelectableAssets([
-        createAsset({ id: 'ready' }),
-        createAsset({ id: 'uploading', uploadStatus: 'uploading' }),
-        createAsset({ id: 'failed', uploadStatus: 'failed' }),
-        createAsset({ id: 'empty', src: '  ' }),
-      ]).map((asset) => asset.id),
-    ).toEqual(['ready']);
-  });
-
   it('moves assets between folders locally', () => {
     expect(
       moveAssetToFolderLocally([createAsset()], 'asset-a', 'folder-role')[0],
@@ -548,71 +414,4 @@ describe('ImageCanvasAssetLibraryModel', () => {
       }),
     ).toBeNull();
   });
-
-  it('updates marquee geometry from pointer coordinates and normalizes reverse drags', () => {
-    const marquee = createAssetMarqueeFromPointer({
-      pointerId: 5,
-      point: { clientX: 180, clientY: 220 },
-      containerRect: { left: 100, top: 200 },
-    });
-
-    expect(marquee).toEqual({
-      pointerId: 5,
-      startX: 80,
-      startY: 20,
-      currentX: 80,
-      currentY: 20,
-    });
-    expect(
-      moveAssetMarqueeToPointer({
-        marquee,
-        point: { clientX: 120, clientY: 205 },
-        containerRect: { left: 100, top: 200 },
-      }),
-    ).toMatchObject({ currentX: 20, currentY: 5 });
-    expect(
-      createAssetMarqueeSelectionRect({
-        marquee,
-        point: { clientX: 120, clientY: 205 },
-        containerRect: { left: 100, top: 200 },
-      }),
-    ).toEqual({
-      left: 120,
-      right: 180,
-      top: 205,
-      bottom: 220,
-    });
-  });
-
-  it('selects only uploaded assets intersecting the marquee rectangle', () => {
-    const assets = [
-      createAsset({ id: 'asset-a' }),
-      createAsset({ id: 'asset-b' }),
-      createAsset({ id: 'built-in', sourceKind: 'built-in' }),
-    ];
-    const selectedIds = selectUploadedAssetsInRect({
-      assets,
-      assetTargets: [
-        {
-          assetId: 'asset-a',
-          rect: { left: 10, right: 20, top: 10, bottom: 20 },
-        },
-        {
-          assetId: 'asset-b',
-          rect: { left: 30, right: 40, top: 30, bottom: 40 },
-        },
-        {
-          assetId: 'built-in',
-          rect: { left: 15, right: 25, top: 15, bottom: 25 },
-        },
-        {
-          assetId: 'missing',
-          rect: { left: 15, right: 25, top: 15, bottom: 25 },
-        },
-      ],
-      selectionRect: { left: 20, right: 35, top: 20, bottom: 35 },
-    });
-
-    expect([...selectedIds]).toEqual(['asset-a', 'asset-b']);
-  });
 });
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryModel.ts b/src/components/image-editor/ImageCanvasAssetLibraryModel.ts
index 5ad3c90ff..dcff8868e 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryModel.ts
+++ b/src/components/image-editor/ImageCanvasAssetLibraryModel.ts
@@ -1,6 +1,5 @@
 import { isEditorInternalProcessingModel } from './ImageCanvasEditorModel';
 import type {
-  AssetMarqueeState,
   CanvasLayer,
   EditorAsset,
   EditorAssetFolder,
@@ -18,11 +17,6 @@ type AssetFolderHitTarget = {
   rect: ClientRectLike;
 };
 
-type AssetHitTarget = {
-  assetId: string;
-  rect: ClientRectLike;
-};
-
 export type GroupedAssetFolder = EditorAssetFolder & {
   assets: EditorAsset[];
 };
@@ -38,15 +32,6 @@ function isPointInRect(point: ClientPoint, rect: ClientRectLike) {
   );
 }
 
-function doRectsIntersect(rect: ClientRectLike, selectionRect: ClientRectLike) {
-  return (
-    rect.left <= selectionRect.right &&
-    rect.right >= selectionRect.left &&
-    rect.top <= selectionRect.bottom &&
-    rect.bottom >= selectionRect.top
-  );
-}
-
 export function resolveAssetFolderIdFromPoint({
   point,
   listRect,
@@ -85,96 +70,6 @@ export function resolvePinnedAssetMoveFolderId({
   return folderId;
 }
 
-export function shouldStartAssetMarquee({
-  isAssetSelectionMode,
-  button,
-  isBlockedTarget,
-}: {
-  isAssetSelectionMode: boolean;
-  button: number;
-  isBlockedTarget: boolean;
-}) {
-  return isAssetSelectionMode && button === 0 && !isBlockedTarget;
-}
-
-export function createAssetMarqueeFromPointer({
-  pointerId,
-  point,
-  containerRect,
-}: {
-  pointerId: number;
-  point: ClientPoint;
-  containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
-}): AssetMarqueeState {
-  const startX = point.clientX - (containerRect?.left ?? 0);
-  const startY = point.clientY - (containerRect?.top ?? 0);
-  return {
-    pointerId,
-    startX,
-    startY,
-    currentX: startX,
-    currentY: startY,
-  };
-}
-
-export function moveAssetMarqueeToPointer({
-  marquee,
-  point,
-  containerRect,
-}: {
-  marquee: AssetMarqueeState;
-  point: ClientPoint;
-  containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
-}) {
-  return {
-    ...marquee,
-    currentX: point.clientX - (containerRect?.left ?? 0),
-    currentY: point.clientY - (containerRect?.top ?? 0),
-  };
-}
-
-export function createAssetMarqueeSelectionRect({
-  marquee,
-  point,
-  containerRect,
-}: {
-  marquee: AssetMarqueeState;
-  point: ClientPoint;
-  containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
-}): ClientRectLike {
-  const startClientX = (containerRect?.left ?? 0) + marquee.startX;
-  const startClientY = (containerRect?.top ?? 0) + marquee.startY;
-  return {
-    left: Math.min(startClientX, point.clientX),
-    right: Math.max(startClientX, point.clientX),
-    top: Math.min(startClientY, point.clientY),
-    bottom: Math.max(startClientY, point.clientY),
-  };
-}
-
-export function selectUploadedAssetsInRect({
-  assets,
-  assetTargets,
-  selectionRect,
-}: {
-  assets: EditorAsset[];
-  assetTargets: AssetHitTarget[];
-  selectionRect: ClientRectLike;
-}) {
-  const uploadedAssetIds = new Set(
-    getSelectableAssets(assets).map((asset) => asset.id),
-  );
-  return new Set(
-    assetTargets
-      .filter(
-        (target) =>
-          uploadedAssetIds.has(target.assetId) &&
-          doRectsIntersect(target.rect, selectionRect),
-      )
-      .map((target) => target.assetId),
-  );
-}
-
 export function groupAssetsByFolder(
   assetFolders: EditorAssetFolder[],
   assets: EditorAsset[],
@@ -294,121 +189,6 @@ export function filterGroupedAssetsBySearch(
     .filter((folder) => folder.assets.length > 0);
 }
 
-export function getSelectableAssets(assets: EditorAsset[]) {
-  return assets.filter(
-    (asset) =>
-      asset.sourceKind === 'uploaded' &&
-      asset.uploadStatus !== 'uploading' &&
-      asset.uploadStatus !== 'failed' &&
-      asset.src.trim().length > 0,
-  );
-}
-
-export type AssetSelectionPointerKind = 'keyboard' | 'mouse' | 'pen' | 'touch';
-
-export type AssetSelectionInteraction = {
-  visibleAssetIds: string[];
-  shiftKey?: boolean;
-  ctrlKey?: boolean;
-  metaKey?: boolean;
-  pointerKind?: AssetSelectionPointerKind;
-};
-
-export type AssetSelectionState = {
-  selectedAssetIds: Set<string>;
-  anchorAssetId: string | null;
-};
-
-function dedupeAssetIds(assetIds: string[]) {
-  return Array.from(new Set(assetIds));
-}
-
-export function reconcileAssetSelection({
-  selectedAssetIds,
-  anchorAssetId,
-  visibleAssetIds,
-}: AssetSelectionState & { visibleAssetIds: string[] }): AssetSelectionState {
-  const visibleIds = new Set(visibleAssetIds);
-  const nextSelectedAssetIds = new Set(
-    [...selectedAssetIds].filter((assetId) => visibleIds.has(assetId)),
-  );
-  return {
-    selectedAssetIds: nextSelectedAssetIds,
-    anchorAssetId:
-      anchorAssetId && visibleIds.has(anchorAssetId) ? anchorAssetId : null,
-  };
-}
-
-export function resolveAssetSelection({
-  selectedAssetIds,
-  anchorAssetId,
-  visibleAssetIds,
-  targetAssetId,
-  shiftKey = false,
-  ctrlKey = false,
-  metaKey = false,
-  pointerKind = 'mouse',
-}: AssetSelectionState &
-  AssetSelectionInteraction & { targetAssetId: string }): AssetSelectionState {
-  const orderedAssetIds = dedupeAssetIds(visibleAssetIds);
-  const targetIndex = orderedAssetIds.indexOf(targetAssetId);
-  if (targetIndex < 0) {
-    return reconcileAssetSelection({
-      selectedAssetIds,
-      anchorAssetId,
-      visibleAssetIds: orderedAssetIds,
-    });
-  }
-
-  const anchorIndex = anchorAssetId
-    ? orderedAssetIds.indexOf(anchorAssetId)
-    : -1;
-  const shouldAppend = ctrlKey || metaKey;
-  if (shiftKey && anchorIndex >= 0) {
-    const rangeStart = Math.min(anchorIndex, targetIndex);
-    const rangeEnd = Math.max(anchorIndex, targetIndex);
-    const rangeAssetIds = orderedAssetIds.slice(rangeStart, rangeEnd + 1);
-    return {
-      selectedAssetIds: shouldAppend
-        ? new Set([...selectedAssetIds, ...rangeAssetIds])
-        : new Set(rangeAssetIds),
-      anchorAssetId,
-    };
-  }
-
-  if (shouldAppend || pointerKind === 'touch' || pointerKind === 'pen') {
-    return {
-      selectedAssetIds: toggleAssetSelection(selectedAssetIds, targetAssetId),
-      anchorAssetId: targetAssetId,
-    };
-  }
-
-  return {
-    selectedAssetIds: new Set([targetAssetId]),
-    anchorAssetId: targetAssetId,
-  };
-}
-
-export function resolveVisibleAssetSelectionToggle({
-  selectedAssetIds,
-  visibleAssetIds,
-}: {
-  selectedAssetIds: Set<string>;
-  visibleAssetIds: string[];
-}) {
-  const orderedAssetIds = dedupeAssetIds(visibleAssetIds);
-  const allVisibleAssetsSelected =
-    orderedAssetIds.length > 0 &&
-    orderedAssetIds.every((assetId) => selectedAssetIds.has(assetId));
-  if (allVisibleAssetsSelected) {
-    const visibleIds = new Set(orderedAssetIds);
-    return new Set(
-      [...selectedAssetIds].filter((assetId) => !visibleIds.has(assetId)),
-    );
-  }
-  return new Set([...selectedAssetIds, ...orderedAssetIds]);
-}
-
 export type AssetShowcaseSubmissionState = {
   canSubmit: boolean;
   label: string;
@@ -485,16 +265,6 @@ export function resolveAssetShowcaseSubmissionState(
   };
 }
 
-export function areAllSelectableAssetsSelected(
-  selectableAssets: EditorAsset[],
-  selectedAssetIds: Set<string>,
-) {
-  return (
-    selectableAssets.length > 0 &&
-    selectableAssets.every((asset) => selectedAssetIds.has(asset.id))
-  );
-}
-
 export function renameAssetById(
   assets: EditorAsset[],
   assetId: string,
@@ -647,31 +417,6 @@ export function deleteAssetFolderLocally({
   };
 }
 
-export function toggleAssetSelection(
-  selectedAssetIds: Set<string>,
-  assetId: string,
-) {
-  const nextIds = new Set(selectedAssetIds);
-  if (nextIds.has(assetId)) {
-    nextIds.delete(assetId);
-  } else {
-    nextIds.add(assetId);
-  }
-  return nextIds;
-}
-
-export function resolveAllAssetSelection({
-  allSelectableAssetsSelected,
-  selectableAssets,
-}: {
-  allSelectableAssetsSelected: boolean;
-  selectableAssets: EditorAsset[];
-}) {
-  return allSelectableAssetsSelected
-    ? new Set<string>()
-    : new Set(selectableAssets.map((asset) => asset.id));
-}
-
 export function removeSelectedAssets(
   assets: EditorAsset[],
   selectedAssetIds: Set<string>,
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index 9f7e9483e..c208dc683 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -18,7 +18,6 @@ import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasAssetFolderSectionView } from './ImageCanvasAssetFolderSectionView';
-import type { AssetSelectionInteraction } from './ImageCanvasAssetLibraryModel';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type {
   AssetMarqueeState,
@@ -27,6 +26,7 @@ import type {
   EditorAssetFolder,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
+import type { AssetSelectionInteraction } from './useImageCanvasAssetSelection';
 
 export type GroupedEditorAssetFolder = EditorAssetFolder & {
   assets: EditorAsset[];
@@ -98,7 +98,7 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   addAssetLayer: (asset: EditorAsset) => void;
   onDownloadAsset: (asset: EditorAsset) => void;
   toggleAllAssetsSelected: (visibleAssetIds: string[]) => void;
-  downloadSelectedAssets: (visibleAssetIds: string[]) => void | Promise<void>;
+  downloadSelectedAssets: () => void | Promise<void>;
   deleteSelectedAssets: () => void;
   closeAssetSelectionMode: () => void;
 };
@@ -287,16 +287,14 @@ export function ImageCanvasAssetLibraryPanelView({
             ) : (
               <Square className="h-4 w-4" />
             )}
-            <span className="min-w-0 truncate">
-              {selectionToggleLabel}
-            </span>
+            <span className="min-w-0 truncate">{selectionToggleLabel}</span>
           </PlatformActionButton>
           <PlatformActionButton
             className="image-canvas-editor__asset-batch-action"
             tone="secondary"
             size="sm"
             disabled={selectedAssetIds.size === 0 || isExportingSelectedAssets}
-            onClick={() => void downloadSelectedAssets(visibleAssetIds)}
+            onClick={() => void downloadSelectedAssets()}
           >
             <Download className="h-4 w-4" />
             {isExportingSelectedAssets ? '下载中' : '下载'}
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index d22d5fa87..47ea4cb3b 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -9,10 +9,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
 import { PlatformTextField } from '../common/PlatformTextField';
-import {
-  type AssetSelectionInteraction,
-  resolveAssetShowcaseSubmissionState,
-} from './ImageCanvasAssetLibraryModel';
+import { resolveAssetShowcaseSubmissionState } from './ImageCanvasAssetLibraryModel';
 import type { UploadFilesOptions } from './ImageCanvasAssetLibraryPanelView';
 import {
   ASSET_DRAG_MIME_TYPE,
@@ -32,6 +29,7 @@ import {
   getCanvasMediaPreviewClassName,
   getCanvasMediaPreviewMarker,
 } from './ImageCanvasMediaModel';
+import type { AssetSelectionInteraction } from './useImageCanvasAssetSelection';
 
 const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.png';
 
diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
index 251706af1..9898d2264 100644
--- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
@@ -138,6 +138,7 @@ function createTestImageAsset({
   imageSrc,
   objectKey,
   assetObjectId,
+  folderId = 'project',
   sourceType = 'uploaded',
   sourceResourceId,
 }: {
@@ -146,6 +147,7 @@ function createTestImageAsset({
   imageSrc?: string;
   objectKey?: string | null;
   assetObjectId?: string | null;
+  folderId?: string;
   sourceType?: 'uploaded' | 'generated' | 'mock_generated';
   sourceResourceId?: string | null;
 }) {
@@ -155,7 +157,7 @@ function createTestImageAsset({
       : objectKey;
   return {
     assetId,
-    folderId: 'project',
+    folderId,
     label,
     imageSrc: imageSrc ?? (resolvedObjectKey ? `/${resolvedObjectKey}` : ''),
     objectKey: resolvedObjectKey,
@@ -810,7 +812,7 @@ describe('ImageCanvasEditorView asset library integration', () => {
     ).toBeNull();
   });
 
-  it('supports visible range and additive selection and clears state on exit', async () => {
+  it('adds visible ranges to the stable selection and clears state on exit', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
       folders: [
@@ -847,7 +849,7 @@ describe('ImageCanvasEditorView asset library integration', () => {
     });
     expect(
       within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByText(
-        /已选 2/u,
+        /已选 3/u,
       ),
     ).toBeTruthy();
 
@@ -874,6 +876,78 @@ describe('ImageCanvasEditorView asset library integration', () => {
     ).toHaveProperty('disabled', true);
   });
 
+  it('keeps hidden selections stable and applies visible actions as deltas', async () => {
+    const user = userEvent.setup();
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+        {
+          folderId: 'folder-other',
+          label: '其它素材',
+          sortOrder: 1,
+          collapsed: false,
+          systemDefault: false,
+        },
+      ],
+      assets: [
+        createTestImageAsset({ assetId: 'asset-a', label: '账号素材A' }),
+        createTestImageAsset({ assetId: 'asset-b', label: '账号素材B' }),
+        createTestImageAsset({
+          assetId: 'asset-c',
+          label: '账号素材C',
+          folderId: 'folder-other',
+        }),
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    await screen.findByRole('button', { name: '添加账号素材A' });
+    await user.click(screen.getByRole('button', { name: '素材选择模式' }));
+    fireEvent.click(screen.getByText('账号素材C'));
+    fireEvent.click(screen.getByText('账号素材A'));
+    fireEvent.click(screen.getByText('账号素材B'), { shiftKey: true });
+
+    const toolbar = screen.getByRole('toolbar', { name: '素材批量操作' });
+    expect(within(toolbar).getByText(/已选 3/u)).toBeTruthy();
+
+    fireEvent.change(screen.getByLabelText('搜索素材'), {
+      target: { value: '账号素材A' },
+    });
+    expect(screen.queryByText('账号素材B')).toBeNull();
+    expect(within(toolbar).getByText(/已选 3/u)).toBeTruthy();
+
+    fireEvent.click(screen.getByText('账号素材A'));
+    expect(within(toolbar).getByText(/已选 2/u)).toBeTruthy();
+    fireEvent.click(
+      within(toolbar).getByRole('button', { name: /^全选/u }),
+    );
+    expect(within(toolbar).getByText(/已选 3/u)).toBeTruthy();
+    fireEvent.click(
+      within(toolbar).getByRole('button', { name: /^取消全选/u }),
+    );
+    expect(within(toolbar).getByText(/已选 2/u)).toBeTruthy();
+
+    fireEvent.change(screen.getByLabelText('搜索素材'), {
+      target: { value: '' },
+    });
+    await user.click(screen.getByRole('button', { name: '折叠其它素材' }));
+    expect(screen.getByRole('button', { name: '展开其它素材' })).toBeTruthy();
+    const foldedAssetList = screen
+      .getByRole('button', { name: '选择素材账号素材C', hidden: true })
+      .closest('.image-canvas-editor__asset-folder-list');
+    expect(foldedAssetList).toHaveProperty('hidden', true);
+    expect(within(toolbar).getByText(/已选 2/u)).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: '展开其它素材' }));
+    expect(foldedAssetList).toHaveProperty('hidden', false);
+    expect(within(toolbar).getByText(/已选 2/u)).toBeTruthy();
+  });
+
   it('removes canvas layers linked to deleted assets', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 8c52c5304..ae080da6f 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -80,7 +80,6 @@ function createSidebarProps(): ImageCanvasSidebarViewProps {
     addAssetLayer: vi.fn(),
     onDownloadAsset: vi.fn(),
     toggleAllAssetsSelected: vi.fn(),
-    reconcileSelectedAssets: vi.fn(),
     downloadSelectedAssets: vi.fn(),
     deleteSelectedAssets: vi.fn(),
     openAssetSelectionMode: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 91cd02163..cac0abca5 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -688,6 +688,7 @@ export function ImageCanvasEditorView({
     setActiveUploadFolderId,
     isAssetSelectionMode,
     selectedAssetIds,
+    selectedAssets,
     assetMarquee,
     assetPointerDrag,
     setAssetPointerDrag,
@@ -706,7 +707,6 @@ export function ImageCanvasEditorView({
     deleteAssetFolder,
     toggleAssetSelected,
     toggleAllAssetsSelected,
-    reconcileSelectedAssets,
     deleteSelectedAssets,
     moveAssetToFolder,
     closeAssetSelectionMode,
@@ -1398,27 +1398,13 @@ export function ImageCanvasEditorView({
     },
     [exportLayerImage],
   );
-  const downloadSelectedAssets = useCallback(
-    (visibleAssetIds: string[]) => {
-      const selectedIds = new Set(selectedAssetIds);
-      const assetById = new Map(assets.map((asset) => [asset.id, asset]));
-      const selectedLayers = visibleAssetIds
-        .filter((assetId) => selectedIds.has(assetId))
-        .map((assetId, index) => {
-          const asset = assetById.get(assetId);
-          if (!asset) {
-            return null;
-          }
-          return {
-            ...createAssetActionLayer(asset),
-            zIndex: index,
-          };
-        })
-        .filter((layer): layer is CanvasLayer => layer !== null);
-      return exportSelectedAssets(selectedLayers);
-    },
-    [assets, exportSelectedAssets, selectedAssetIds],
-  );
+  const downloadSelectedAssets = useCallback(() => {
+    const selectedLayers = selectedAssets.map((asset, index) => ({
+      ...createAssetActionLayer(asset),
+      zIndex: index,
+    }));
+    return exportSelectedAssets(selectedLayers);
+  }, [exportSelectedAssets, selectedAssets]);
   const {
     uploadInputRef,
     uploadTarget,
@@ -2304,7 +2290,6 @@ export function ImageCanvasEditorView({
     addAssetLayer,
     onDownloadAsset: downloadAsset,
     toggleAllAssetsSelected,
-    reconcileSelectedAssets,
     downloadSelectedAssets,
     deleteSelectedAssets,
     closeAssetSelectionMode,
diff --git a/src/components/image-editor/ImageCanvasSidebarView.test.tsx b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
index 1fab16c23..7a14f067f 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
@@ -118,7 +118,6 @@ function createSidebarProps(
     addAssetLayer: vi.fn(),
     onDownloadAsset: vi.fn(),
     toggleAllAssetsSelected: vi.fn(),
-    reconcileSelectedAssets: vi.fn(),
     downloadSelectedAssets: vi.fn(),
     deleteSelectedAssets: vi.fn(),
     openAssetSelectionMode: vi.fn(),
@@ -270,7 +269,7 @@ describe('ImageCanvasSidebarView', () => {
     ).toBeNull();
   });
 
-  it('keeps the batch toolbar outside the scrolling list and downloads visible selections', () => {
+  it('keeps the batch toolbar outside the scrolling list and downloads the stable selection', () => {
     const downloadSelectedAssets = vi.fn();
     const closeAssetSelectionMode = vi.fn();
     const asset = createAsset();
@@ -300,21 +299,19 @@ describe('ImageCanvasSidebarView', () => {
     ).toBeNull();
 
     fireEvent.click(within(toolbar).getByRole('button', { name: '下载' }));
-    expect(downloadSelectedAssets).toHaveBeenCalledWith(['asset-1']);
+    expect(downloadSelectedAssets).toHaveBeenCalledWith();
     fireEvent.click(screen.getByRole('button', { name: '素材选择模式' }));
     expect(closeAssetSelectionMode).toHaveBeenCalledTimes(1);
   });
 
-  it('opens selection mode through the shared lifecycle and reconciles search visibility', () => {
+  it('opens selection mode through the shared lifecycle', () => {
     const openAssetSelectionMode = vi.fn();
-    const reconcileSelectedAssets = vi.fn();
     const folder = createFolder();
     render(
       <ImageCanvasSidebarView
         {...createSidebarProps({
           isAssetSelectionMode: false,
           openAssetSelectionMode,
-          reconcileSelectedAssets,
           groupedAssets: [
             {
               ...folder,
@@ -329,7 +326,6 @@ describe('ImageCanvasSidebarView', () => {
     );
     fireEvent.click(screen.getByRole('button', { name: '素材选择模式' }));
     expect(openAssetSelectionMode).toHaveBeenCalledTimes(1);
-    expect(reconcileSelectedAssets).not.toHaveBeenCalled();
   });
 
   it('does not expose internal models or providers through asset search', () => {
diff --git a/src/components/image-editor/ImageCanvasSidebarView.tsx b/src/components/image-editor/ImageCanvasSidebarView.tsx
index da6eeacf6..07515c4e7 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.tsx
@@ -5,13 +5,11 @@ import type {
   RefObject,
   SetStateAction,
 } from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { PlatformTextField } from '../common/PlatformTextField';
 import {
-  type AssetSelectionInteraction,
   filterGroupedAssetsBySearch,
-  getSelectableAssets,
   layerMatchesSearch,
   layerStartsWithSearch,
 } from './ImageCanvasAssetLibraryModel';
@@ -34,6 +32,10 @@ import type {
   UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasLayerPanelView } from './ImageCanvasLayerPanelView';
+import {
+  type AssetSelectionInteraction,
+  getSelectableAssets,
+} from './useImageCanvasAssetSelection';
 
 export type { GroupedEditorAssetFolder, UploadFilesOptions };
 
@@ -97,8 +99,7 @@ export type ImageCanvasSidebarViewProps = {
   addAssetLayer: (asset: EditorAsset) => void;
   onDownloadAsset: (asset: EditorAsset) => void;
   toggleAllAssetsSelected: (visibleAssetIds: string[]) => void;
-  reconcileSelectedAssets: (visibleAssetIds: string[]) => void;
-  downloadSelectedAssets: (visibleAssetIds: string[]) => void | Promise<void>;
+  downloadSelectedAssets: () => void | Promise<void>;
   deleteSelectedAssets: () => void;
   openAssetSelectionMode: () => void;
   closeAssetSelectionMode: () => void;
@@ -164,7 +165,6 @@ export function ImageCanvasSidebarView({
   addAssetLayer,
   onDownloadAsset,
   toggleAllAssetsSelected,
-  reconcileSelectedAssets,
   downloadSelectedAssets,
   deleteSelectedAssets,
   openAssetSelectionMode,
@@ -201,11 +201,6 @@ export function ImageCanvasSidebarView({
     visibleAssetIds.length > 0 &&
     visibleAssetIds.every((assetId) => selectedAssetIds.has(assetId));
 
-  useEffect(() => {
-    if (isAssetSelectionMode) {
-      reconcileSelectedAssets(visibleAssetIds);
-    }
-  }, [isAssetSelectionMode, reconcileSelectedAssets, visibleAssetIds]);
   const normalizedLayerSearchQuery = layerSearchQuery.trim().toLowerCase();
   const filteredLayers = useMemo(
     () =>
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index ffa3a32ee..88d843f12 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -470,6 +470,7 @@ export function useImageCanvasAssetExportWorkflow({
           exportPlans.map(async (plan): Promise<PreparedAssetExport> => {
             const { layer, indexedFileName } = plan;
             try {
+              // TODO image sequence (action) logic should be refactored together with its backend data structure impl.
               if (layer.mediaType === 'image-sequence') {
                 const frames = getLayerImageSequenceFrames(layer);
                 if (!frames.length) {
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
index a02d1c826..2cd6abfc3 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
@@ -215,14 +215,6 @@ function AssetLibraryHarness({
       >
         toggle all
       </button>
-      <button
-        type="button"
-        onClick={() =>
-          assetLibrary.reconcileSelectedAssets(['asset-b', 'asset-c'])
-        }
-      >
-        reconcile to b c
-      </button>
       <button type="button" onClick={assetLibrary.deleteSelectedAssets}>
         delete selected
       </button>
@@ -470,18 +462,18 @@ describe('useImageCanvasAssetLibrary', () => {
     expect(screen.getByTestId('all-selected').textContent).toBe('true');
     act(() => screen.getByRole('button', { name: '素材B' }).click());
     await waitFor(() => {
-      expect(screen.getByTestId('selected-assets').textContent).toBe('asset-b');
+      expect(screen.getByTestId('selected-assets').textContent).toBe('asset-a');
     });
     act(() => screen.getByRole('button', { name: 'delete selected' }).click());
 
     expect(screen.getByTestId('assets').textContent).toBe(
-      'asset-a:素材A:project:unset',
+      'asset-b:素材B:project:unset',
     );
     expect(onDeleteAssets).toHaveBeenCalledWith([
-      expect.objectContaining({ id: 'asset-b' }),
+      expect.objectContaining({ id: 'asset-a' }),
     ]);
-    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-b');
-    expect(deleteEditorAssetMock).not.toHaveBeenCalledWith('asset-a');
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-a');
+    expect(deleteEditorAssetMock).not.toHaveBeenCalledWith('asset-b');
   });
 
   it('clears selected status when selection mode closes', async () => {
@@ -526,7 +518,7 @@ describe('useImageCanvasAssetLibrary', () => {
     expect(screen.getByTestId('selected-assets').textContent).toBe('asset-c');
   });
 
-  it('reconciles selected ids and their range anchor atomically', async () => {
+  it('reconciles selection only when an asset actually ceases to exist', async () => {
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
       folders: [
         {
@@ -545,13 +537,16 @@ describe('useImageCanvasAssetLibrary', () => {
     });
     render(<AssetLibraryHarness />);
 
-    fireEvent.click(await screen.findByRole('button', { name: '素材A' }));
-    fireEvent.click(screen.getByRole('button', { name: 'reconcile to b c' }));
-    fireEvent.click(screen.getByRole('button', { name: '素材C' }), {
-      shiftKey: true,
-    });
+    await screen.findByRole('button', { name: '素材A' });
+    fireEvent.click(screen.getByRole('button', { name: 'open selection' }));
+    fireEvent.click(screen.getByRole('button', { name: 'toggle all' }));
+    fireEvent.click(screen.getByRole('button', { name: 'delete asset' }));
 
-    expect(screen.getByTestId('selected-assets').textContent).toBe('asset-c');
+    await waitFor(() => {
+      expect(screen.getByTestId('selected-assets').textContent).toBe(
+        'asset-b|asset-c',
+      );
+    });
   });
 
   it('submits a generated asset to showcase review', async () => {
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index 3cd870bb7..f0589881c 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -1,12 +1,10 @@
 import {
   type Dispatch,
-  type PointerEvent as ReactPointerEvent,
   type RefObject,
   type SetStateAction,
   useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 
@@ -21,30 +19,19 @@ import {
   updateEditorAssetFolder,
 } from '../../services/image-editor/editorProjectClient';
 import {
-  type AssetSelectionInteraction,
-  type AssetSelectionState,
-  createAssetMarqueeFromPointer,
-  createAssetMarqueeSelectionRect,
   createLocalAssetFolder,
   deleteAssetFolderLocally,
-  getSelectableAssets,
   groupAssetsByFolder,
-  moveAssetMarqueeToPointer,
   moveAssetToFolderLocally,
-  reconcileAssetSelection,
   removeAssetById,
   removeSelectedAssets,
   renameAssetById,
   renameAssetFolderById,
   replaceLocalAssetFolder,
   resolveAssetFolderIdFromPoint,
-  resolveAssetSelection,
   resolveAssetShowcaseSubmissionState,
   resolveDefaultAssetFolder,
   resolvePinnedAssetMoveFolderId,
-  resolveVisibleAssetSelectionToggle,
-  selectUploadedAssetsInRect,
-  shouldStartAssetMarquee,
   toggleAssetFolderCollapsed,
 } from './ImageCanvasAssetLibraryModel';
 import {
@@ -53,11 +40,11 @@ import {
   normalizeAssetLibrary,
 } from './ImageCanvasEditorModel';
 import type {
-  AssetMarqueeState,
   AssetPointerDragState,
   EditorAsset,
   EditorAssetFolder,
 } from './ImageCanvasEditorTypes';
+import { useImageCanvasAssetSelection } from './useImageCanvasAssetSelection';
 export { readImageFileAsDataUrl } from './ImageCanvasFileModel';
 
 function isEditorAuthError(error: unknown) {
@@ -77,17 +64,7 @@ function formatShowcaseSubmitError(error: unknown) {
   return '提交精选审核失败，请稍后重试';
 }
 
-function createEmptyAssetSelection(): AssetSelectionState {
-  return {
-    selectedAssetIds: new Set(),
-    anchorAssetId: null,
-  };
-}
-
 const ASSET_FOLDER_SELECTOR = '[data-asset-folder-id]';
-const ASSET_ITEM_SELECTOR = '[data-asset-id]';
-const ASSET_MARQUEE_BLOCKED_TARGET_SELECTOR =
-  'button, input, textarea, select, [data-asset-id]';
 
 function readAssetFolderHitTargets(listElement: ParentNode | null) {
   return [
@@ -106,22 +83,6 @@ function readAssetFolderHitTargets(listElement: ParentNode | null) {
     .filter((target): target is NonNullable<typeof target> => Boolean(target));
 }
 
-function readAssetHitTargets(listElement: ParentNode | null) {
-  return [
-    ...(listElement?.querySelectorAll<HTMLElement>(ASSET_ITEM_SELECTOR) ?? []),
-  ]
-    .map((element) => {
-      const assetId = element.dataset.assetId;
-      return assetId
-        ? {
-            assetId,
-            rect: element.getBoundingClientRect(),
-          }
-        : null;
-    })
-    .filter((target): target is NonNullable<typeof target> => Boolean(target));
-}
-
 export function useImageCanvasAssetLibrary({
   assetListRef,
   canAccessProtectedData,
@@ -147,15 +108,6 @@ export function useImageCanvasAssetLibrary({
   const [creatingFolder, setCreatingFolder] = useState(false);
   const [newFolderName, setNewFolderName] = useState('');
   const [activeUploadFolderId, setActiveUploadFolderId] = useState('project');
-  const [isAssetSelectionMode, setIsAssetSelectionMode] = useState(false);
-  const [assetSelection, setAssetSelection] = useState<AssetSelectionState>(
-    createEmptyAssetSelection,
-  );
-  const { selectedAssetIds } = assetSelection;
-  const marqueeBaseSelectionRef = useRef<Set<string>>(new Set());
-  const [assetMarquee, setAssetMarquee] = useState<AssetMarqueeState | null>(
-    null,
-  );
   const [assetPointerDrag, setAssetPointerDrag] =
     useState<AssetPointerDragState | null>(null);
   const [assetMoveDropFolderId, setAssetMoveDropFolderId] = useState<
@@ -169,7 +121,29 @@ export function useImageCanvasAssetLibrary({
     () => groupAssetsByFolder(assetFolders, assets),
     [assetFolders, assets],
   );
-  const selectableAssets = useMemo(() => getSelectableAssets(assets), [assets]);
+  const clearAssetRenameState = useCallback(() => {
+    setRenamingAsset(null);
+    setRenamingFolder(null);
+  }, []);
+  const {
+    selectableAssets,
+    selectedAssets,
+    selectedAssetIds,
+    isAssetSelectionMode,
+    assetMarquee,
+    clearAssetSelection,
+    openAssetSelectionMode,
+    closeAssetSelectionMode,
+    toggleAssetSelected,
+    toggleAllAssetsSelected,
+    handleAssetMarqueePointerDown,
+    handleAssetMarqueePointerMove,
+    handleAssetMarqueePointerUp,
+  } = useImageCanvasAssetSelection({
+    assetListRef,
+    assets,
+    onOpenSelectionMode: clearAssetRenameState,
+  });
 
   const applyAssetLibrarySnapshot = useCallback(
     (
@@ -491,54 +465,18 @@ export function useImageCanvasAssetLibrary({
     [assetFolders],
   );
 
-  const toggleAssetSelected = useCallback(
-    (assetId: string, interaction: AssetSelectionInteraction) => {
-      setAssetSelection((currentSelection) =>
-        resolveAssetSelection({
-          ...currentSelection,
-          targetAssetId: assetId,
-          ...interaction,
-        }),
-      );
-    },
-    [],
-  );
-
-  const toggleAllAssetsSelected = useCallback((visibleAssetIds: string[]) => {
-    setAssetSelection((currentSelection) => ({
-      selectedAssetIds: resolveVisibleAssetSelectionToggle({
-        selectedAssetIds: currentSelection.selectedAssetIds,
-        visibleAssetIds,
-      }),
-      anchorAssetId: null,
-    }));
-  }, []);
-
-  const reconcileSelectedAssets = useCallback((visibleAssetIds: string[]) => {
-    setAssetSelection((currentSelection) =>
-      reconcileAssetSelection({
-        ...currentSelection,
-        visibleAssetIds,
-      }),
-    );
-  }, []);
-
   const deleteSelectedAssets = useCallback(() => {
-    const ids = [...selectedAssetIds];
-    const deletedAssets = removeSelectedAssets(
-      assets,
-      selectedAssetIds,
-    ).deletedAssets;
+    const ids = selectedAssets.map((asset) => asset.id);
     setAssets(
       (currentAssets) =>
         removeSelectedAssets(currentAssets, selectedAssetIds).assets,
     );
-    onDeleteAssets?.(deletedAssets);
-    setAssetSelection(createEmptyAssetSelection());
+    onDeleteAssets?.(selectedAssets);
+    clearAssetSelection();
     ids.forEach((assetId) => {
       void deleteEditorAsset(assetId);
     });
-  }, [assets, onDeleteAssets, selectedAssetIds]);
+  }, [clearAssetSelection, onDeleteAssets, selectedAssetIds, selectedAssets]);
 
   const moveAssetToFolder = useCallback(
     (assetId: string, folderId: string) => {
@@ -556,119 +494,6 @@ export function useImageCanvasAssetLibrary({
     [assets],
   );
 
-  const closeAssetSelectionMode = useCallback(() => {
-    setIsAssetSelectionMode(false);
-    setAssetSelection(createEmptyAssetSelection());
-    marqueeBaseSelectionRef.current = new Set();
-    setAssetMarquee(null);
-  }, []);
-
-  const openAssetSelectionMode = useCallback(() => {
-    marqueeBaseSelectionRef.current = new Set();
-    setRenamingAsset(null);
-    setRenamingFolder(null);
-    setAssetSelection(createEmptyAssetSelection());
-    setAssetMarquee(null);
-    setIsAssetSelectionMode(true);
-  }, []);
-
-  const updateAssetSelectionFromMarquee = useCallback(
-    (selectionRect: {
-      left: number;
-      right: number;
-      top: number;
-      bottom: number;
-    }) => {
-      const marqueeSelection = selectUploadedAssetsInRect({
-        assets,
-        assetTargets: readAssetHitTargets(assetListRef.current),
-        selectionRect,
-      });
-      setAssetSelection({
-        selectedAssetIds: new Set([
-          ...marqueeBaseSelectionRef.current,
-          ...marqueeSelection,
-        ]),
-        anchorAssetId: null,
-      });
-    },
-    [assetListRef, assets],
-  );
-
-  const handleAssetMarqueePointerDown = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      const target = event.target as HTMLElement;
-      if (
-        !shouldStartAssetMarquee({
-          isAssetSelectionMode,
-          button: event.button,
-          isBlockedTarget: Boolean(
-            target.closest(ASSET_MARQUEE_BLOCKED_TARGET_SELECTOR),
-          ),
-        })
-      ) {
-        return;
-      }
-      event.preventDefault();
-      assetListRef.current?.setPointerCapture?.(event.pointerId);
-      setAssetMarquee(
-        createAssetMarqueeFromPointer({
-          pointerId: event.pointerId,
-          point: event,
-          containerRect: assetListRef.current?.getBoundingClientRect(),
-        }),
-      );
-      marqueeBaseSelectionRef.current =
-        event.ctrlKey || event.metaKey ? new Set(selectedAssetIds) : new Set();
-      setAssetSelection({
-        selectedAssetIds: new Set(marqueeBaseSelectionRef.current),
-        anchorAssetId: null,
-      });
-    },
-    [assetListRef, isAssetSelectionMode, selectedAssetIds],
-  );
-
-  const handleAssetMarqueePointerMove = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      if (!assetMarquee || assetMarquee.pointerId !== event.pointerId) {
-        return;
-      }
-      event.preventDefault();
-      const containerRect = assetListRef.current?.getBoundingClientRect();
-      setAssetMarquee((currentMarquee) =>
-        currentMarquee
-          ? moveAssetMarqueeToPointer({
-              marquee: currentMarquee,
-              point: event,
-              containerRect,
-            })
-          : null,
-      );
-      updateAssetSelectionFromMarquee(
-        createAssetMarqueeSelectionRect({
-          marquee: assetMarquee,
-          point: event,
-          containerRect,
-        }),
-      );
-    },
-    [assetListRef, assetMarquee, updateAssetSelectionFromMarquee],
-  );
-
-  const handleAssetMarqueePointerUp = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      if (!assetMarquee || assetMarquee.pointerId !== event.pointerId) {
-        return;
-      }
-      event.preventDefault();
-      if (assetListRef.current?.hasPointerCapture?.(event.pointerId)) {
-        assetListRef.current.releasePointerCapture?.(event.pointerId);
-      }
-      setAssetMarquee(null);
-    },
-    [assetListRef, assetMarquee],
-  );
-
   return {
     assetFolders,
     setAssetFolders,
@@ -676,6 +501,7 @@ export function useImageCanvasAssetLibrary({
     setAssets,
     groupedAssets,
     selectableAssets,
+    selectedAssets,
     renamingAsset,
     setRenamingAsset,
     renamingFolder,
@@ -689,7 +515,6 @@ export function useImageCanvasAssetLibrary({
     isAssetSelectionMode,
     selectedAssetIds,
     assetMarquee,
-    setAssetMarquee,
     assetPointerDrag,
     setAssetPointerDrag,
     assetMoveDropFolderId,
@@ -707,7 +532,6 @@ export function useImageCanvasAssetLibrary({
     deleteAssetFolder,
     toggleAssetSelected,
     toggleAllAssetsSelected,
-    reconcileSelectedAssets,
     deleteSelectedAssets,
     moveAssetToFolder,
     closeAssetSelectionMode,
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
new file mode 100644
index 000000000..b1e9c5d56
--- /dev/null
+++ b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
@@ -0,0 +1,223 @@
+/* @vitest-environment jsdom */
+
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { createRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { EditorAsset } from './ImageCanvasEditorTypes';
+import {
+  createAssetMarqueeFromPointer,
+  createAssetMarqueeSelectionRect,
+  getSelectableAssets,
+  moveAssetMarqueeToPointer,
+  selectUploadedAssetsInRect,
+  useImageCanvasAssetSelection,
+} from './useImageCanvasAssetSelection';
+
+function createAsset(overrides: Partial<EditorAsset> = {}): EditorAsset {
+  return {
+    id: 'asset-a',
+    label: '素材A',
+    src: 'data:image/png;base64,YQ==',
+    width: 320,
+    height: 240,
+    folderId: 'project',
+    sourceKind: 'uploaded',
+    sourceType: 'uploaded',
+    persisted: true,
+    ...overrides,
+  };
+}
+
+describe('useImageCanvasAssetSelection', () => {
+  it('owns selectable-asset validity', () => {
+    expect(
+      getSelectableAssets([
+        createAsset({ id: 'ready' }),
+        createAsset({ id: 'uploading', uploadStatus: 'uploading' }),
+        createAsset({ id: 'failed', uploadStatus: 'failed' }),
+        createAsset({ id: 'empty', src: '  ' }),
+        createAsset({ id: 'built-in', sourceKind: 'built-in' }),
+      ]).map((asset) => asset.id),
+    ).toEqual(['ready']);
+  });
+
+  it('owns marquee geometry and selectable hit testing', () => {
+    const marquee = createAssetMarqueeFromPointer({
+      pointerId: 5,
+      point: { clientX: 180, clientY: 220 },
+      containerRect: { left: 100, top: 200 },
+    });
+    expect(
+      moveAssetMarqueeToPointer({
+        marquee,
+        point: { clientX: 120, clientY: 205 },
+        containerRect: { left: 100, top: 200 },
+      }),
+    ).toMatchObject({ currentX: 20, currentY: 5 });
+    const selectionRect = createAssetMarqueeSelectionRect({
+      marquee,
+      point: { clientX: 120, clientY: 205 },
+      containerRect: { left: 100, top: 200 },
+    });
+    expect(selectionRect).toEqual({
+      left: 120,
+      right: 180,
+      top: 205,
+      bottom: 220,
+    });
+    expect([
+      ...selectUploadedAssetsInRect({
+        assets: [
+          createAsset({ id: 'asset-a' }),
+          createAsset({ id: 'asset-b' }),
+          createAsset({ id: 'built-in', sourceKind: 'built-in' }),
+        ],
+        assetTargets: [
+          {
+            assetId: 'asset-a',
+            rect: { left: 10, right: 20, top: 10, bottom: 20 },
+          },
+          {
+            assetId: 'asset-b',
+            rect: { left: 30, right: 40, top: 30, bottom: 40 },
+          },
+          {
+            assetId: 'built-in',
+            rect: { left: 15, right: 25, top: 15, bottom: 25 },
+          },
+        ],
+        selectionRect: { left: 20, right: 35, top: 20, bottom: 35 },
+      }),
+    ]).toEqual(['asset-a', 'asset-b']);
+  });
+
+  it('applies tick, shift and visible select-all as deltas', () => {
+    const assets = [
+      createAsset({ id: 'asset-a' }),
+      createAsset({ id: 'asset-b' }),
+      createAsset({ id: 'asset-c' }),
+    ];
+    const { result } = renderHook(() =>
+      useImageCanvasAssetSelection({
+        assetListRef: createRef<HTMLDivElement>(),
+        assets,
+      }),
+    );
+
+    act(() => result.current.openAssetSelectionMode());
+    act(() =>
+      result.current.toggleAssetSelected('asset-c', {
+        visibleAssetIds: ['asset-a', 'asset-b', 'asset-c'],
+      }),
+    );
+    act(() =>
+      result.current.toggleAssetSelected('asset-b', {
+        visibleAssetIds: ['asset-a', 'asset-b'],
+        shiftKey: true,
+      }),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual([
+      'asset-c',
+      'asset-b',
+    ]);
+
+    act(() =>
+      result.current.toggleAssetSelected('asset-a', {
+        visibleAssetIds: ['asset-a', 'asset-b'],
+        shiftKey: true,
+      }),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual([
+      'asset-c',
+      'asset-b',
+      'asset-a',
+    ]);
+
+    act(() => result.current.toggleAllAssetsSelected(['asset-a']));
+    expect([...result.current.selectedAssetIds]).toEqual([
+      'asset-c',
+      'asset-b',
+    ]);
+    act(() => result.current.toggleAllAssetsSelected(['asset-a']));
+    expect([...result.current.selectedAssetIds]).toEqual([
+      'asset-c',
+      'asset-b',
+      'asset-a',
+    ]);
+
+    act(() =>
+      result.current.toggleAssetSelected('asset-stale', {
+        visibleAssetIds: ['asset-a'],
+      }),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual([
+      'asset-c',
+      'asset-b',
+      'asset-a',
+    ]);
+  });
+
+  it('reconciles against selectable assets instead of UI visibility', async () => {
+    const initialAssets = [
+      createAsset({ id: 'asset-a' }),
+      createAsset({ id: 'asset-b' }),
+      createAsset({ id: 'asset-c' }),
+    ];
+    const assetListRef = createRef<HTMLDivElement>();
+    const { result, rerender } = renderHook(
+      ({ assets }: { assets: EditorAsset[] }) =>
+        useImageCanvasAssetSelection({ assetListRef, assets }),
+      { initialProps: { assets: initialAssets } },
+    );
+
+    act(() => result.current.openAssetSelectionMode());
+    act(() =>
+      result.current.toggleAllAssetsSelected(['asset-a', 'asset-b', 'asset-c']),
+    );
+    act(() =>
+      result.current.toggleAssetSelected('asset-b', {
+        visibleAssetIds: ['asset-b'],
+      }),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual([
+      'asset-a',
+      'asset-c',
+    ]);
+
+    rerender({
+      assets: [createAsset({ id: 'asset-b' }), createAsset({ id: 'asset-c' })],
+    });
+    await waitFor(() => {
+      expect([...result.current.selectedAssetIds]).toEqual(['asset-c']);
+      expect(result.current.selectedAssets.map((asset) => asset.id)).toEqual([
+        'asset-c',
+      ]);
+    });
+  });
+
+  it('owns selection-mode open and close lifecycle', () => {
+    const onOpenSelectionMode = vi.fn();
+    const { result } = renderHook(() =>
+      useImageCanvasAssetSelection({
+        assetListRef: createRef<HTMLDivElement>(),
+        assets: [createAsset()],
+        onOpenSelectionMode,
+      }),
+    );
+
+    act(() => result.current.openAssetSelectionMode());
+    expect(result.current.isAssetSelectionMode).toBe(true);
+    expect(onOpenSelectionMode).toHaveBeenCalledTimes(1);
+    act(() =>
+      result.current.toggleAssetSelected('asset-a', {
+        visibleAssetIds: ['asset-a'],
+      }),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual(['asset-a']);
+
+    act(() => result.current.closeAssetSelectionMode());
+    expect(result.current.isAssetSelectionMode).toBe(false);
+    expect(result.current.selectedAssetIds.size).toBe(0);
+  });
+});
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.ts b/src/components/image-editor/useImageCanvasAssetSelection.ts
new file mode 100644
index 000000000..cd4a502f2
--- /dev/null
+++ b/src/components/image-editor/useImageCanvasAssetSelection.ts
@@ -0,0 +1,442 @@
+import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import type { AssetMarqueeState, EditorAsset } from './ImageCanvasEditorTypes';
+
+const ASSET_ITEM_SELECTOR = '[data-asset-id]';
+const ASSET_MARQUEE_BLOCKED_TARGET_SELECTOR =
+  'button, input, textarea, select, [data-asset-id]';
+
+type ClientRectLike = Pick<DOMRect, 'bottom' | 'left' | 'right' | 'top'>;
+
+type ClientPoint = {
+  clientX: number;
+  clientY: number;
+};
+
+type AssetHitTarget = {
+  assetId: string;
+  rect: ClientRectLike;
+};
+
+export type AssetSelectionPointerKind = 'keyboard' | 'mouse' | 'pen' | 'touch';
+
+export type AssetSelectionInteraction = {
+  visibleAssetIds: string[];
+  shiftKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  pointerKind?: AssetSelectionPointerKind;
+};
+
+type AssetSelectionState = {
+  selectedAssetIds: Set<string>;
+  anchorAssetId: string | null;
+};
+
+export function getSelectableAssets(assets: EditorAsset[]) {
+  return assets.filter(
+    (asset) =>
+      asset.sourceKind === 'uploaded' &&
+      asset.uploadStatus !== 'uploading' &&
+      asset.uploadStatus !== 'failed' &&
+      asset.src.trim().length > 0,
+  );
+}
+
+function doRectsIntersect(rect: ClientRectLike, selectionRect: ClientRectLike) {
+  return (
+    rect.left <= selectionRect.right &&
+    rect.right >= selectionRect.left &&
+    rect.top <= selectionRect.bottom &&
+    rect.bottom >= selectionRect.top
+  );
+}
+
+function shouldStartAssetMarquee({
+  isAssetSelectionMode,
+  button,
+  isBlockedTarget,
+}: {
+  isAssetSelectionMode: boolean;
+  button: number;
+  isBlockedTarget: boolean;
+}) {
+  return isAssetSelectionMode && button === 0 && !isBlockedTarget;
+}
+
+export function createAssetMarqueeFromPointer({
+  pointerId,
+  point,
+  containerRect,
+}: {
+  pointerId: number;
+  point: ClientPoint;
+  containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
+}): AssetMarqueeState {
+  const startX = point.clientX - (containerRect?.left ?? 0);
+  const startY = point.clientY - (containerRect?.top ?? 0);
+  return {
+    pointerId,
+    startX,
+    startY,
+    currentX: startX,
+    currentY: startY,
+  };
+}
+
+export function moveAssetMarqueeToPointer({
+  marquee,
+  point,
+  containerRect,
+}: {
+  marquee: AssetMarqueeState;
+  point: ClientPoint;
+  containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
+}) {
+  return {
+    ...marquee,
+    currentX: point.clientX - (containerRect?.left ?? 0),
+    currentY: point.clientY - (containerRect?.top ?? 0),
+  };
+}
+
+export function createAssetMarqueeSelectionRect({
+  marquee,
+  point,
+  containerRect,
+}: {
+  marquee: AssetMarqueeState;
+  point: ClientPoint;
+  containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
+}): ClientRectLike {
+  const startClientX = (containerRect?.left ?? 0) + marquee.startX;
+  const startClientY = (containerRect?.top ?? 0) + marquee.startY;
+  return {
+    left: Math.min(startClientX, point.clientX),
+    right: Math.max(startClientX, point.clientX),
+    top: Math.min(startClientY, point.clientY),
+    bottom: Math.max(startClientY, point.clientY),
+  };
+}
+
+export function selectUploadedAssetsInRect({
+  assets,
+  assetTargets,
+  selectionRect,
+}: {
+  assets: EditorAsset[];
+  assetTargets: AssetHitTarget[];
+  selectionRect: ClientRectLike;
+}) {
+  const uploadedAssetIds = new Set(
+    getSelectableAssets(assets).map((asset) => asset.id),
+  );
+  return new Set(
+    assetTargets
+      .filter(
+        (target) =>
+          uploadedAssetIds.has(target.assetId) &&
+          doRectsIntersect(target.rect, selectionRect),
+      )
+      .map((target) => target.assetId),
+  );
+}
+
+function createEmptyAssetSelection(): AssetSelectionState {
+  return {
+    selectedAssetIds: new Set(),
+    anchorAssetId: null,
+  };
+}
+
+function readAssetHitTargets(listElement: ParentNode | null) {
+  return [
+    ...(listElement?.querySelectorAll<HTMLElement>(ASSET_ITEM_SELECTOR) ?? []),
+  ].flatMap((element) => {
+    const assetId = element.dataset.assetId;
+    return assetId
+      ? [
+          {
+            assetId,
+            rect: element.getBoundingClientRect(),
+          },
+        ]
+      : [];
+  });
+}
+
+function dedupeAssetIds(assetIds: string[]) {
+  return Array.from(new Set(assetIds));
+}
+
+function toggleAssetId(selectedAssetIds: Set<string>, assetId: string) {
+  const nextIds = new Set(selectedAssetIds);
+  if (nextIds.has(assetId)) {
+    nextIds.delete(assetId);
+  } else {
+    nextIds.add(assetId);
+  }
+  return nextIds;
+}
+
+function reconcileAssetSelection(
+  selection: AssetSelectionState,
+  selectableAssetIds: string[],
+) {
+  const selectableIds = new Set(selectableAssetIds);
+  const selectedAssetIds = new Set(
+    [...selection.selectedAssetIds].filter((assetId) =>
+      selectableIds.has(assetId),
+    ),
+  );
+  const anchorAssetId =
+    selection.anchorAssetId && selectableIds.has(selection.anchorAssetId)
+      ? selection.anchorAssetId
+      : null;
+  if (
+    anchorAssetId === selection.anchorAssetId &&
+    selectedAssetIds.size === selection.selectedAssetIds.size
+  ) {
+    return selection;
+  }
+  return { selectedAssetIds, anchorAssetId };
+}
+
+function resolveAssetSelection(
+  selection: AssetSelectionState,
+  targetAssetId: string,
+  interaction: AssetSelectionInteraction,
+) {
+  const orderedAssetIds = dedupeAssetIds(interaction.visibleAssetIds);
+  const targetIndex = orderedAssetIds.indexOf(targetAssetId);
+  if (targetIndex < 0) {
+    return selection;
+  }
+
+  const anchorIndex = selection.anchorAssetId
+    ? orderedAssetIds.indexOf(selection.anchorAssetId)
+    : -1;
+  if (interaction.shiftKey && anchorIndex >= 0) {
+    const rangeStart = Math.min(anchorIndex, targetIndex);
+    const rangeEnd = Math.max(anchorIndex, targetIndex);
+    return {
+      selectedAssetIds: new Set([
+        ...selection.selectedAssetIds,
+        ...orderedAssetIds.slice(rangeStart, rangeEnd + 1),
+      ]),
+      anchorAssetId: selection.anchorAssetId,
+    };
+  }
+
+  return {
+    selectedAssetIds: toggleAssetId(selection.selectedAssetIds, targetAssetId),
+    anchorAssetId: targetAssetId,
+  };
+}
+
+function toggleVisibleAssetIds(
+  selectedAssetIds: Set<string>,
+  visibleAssetIds: string[],
+) {
+  const orderedAssetIds = dedupeAssetIds(visibleAssetIds);
+  const allVisibleAssetsSelected =
+    orderedAssetIds.length > 0 &&
+    orderedAssetIds.every((assetId) => selectedAssetIds.has(assetId));
+  if (allVisibleAssetsSelected) {
+    const visibleIds = new Set(orderedAssetIds);
+    return new Set(
+      [...selectedAssetIds].filter((assetId) => !visibleIds.has(assetId)),
+    );
+  }
+  return new Set([...selectedAssetIds, ...orderedAssetIds]);
+}
+
+export function useImageCanvasAssetSelection({
+  assetListRef,
+  assets,
+  onOpenSelectionMode,
+}: {
+  assetListRef: RefObject<HTMLDivElement | null>;
+  assets: EditorAsset[];
+  onOpenSelectionMode?: () => void;
+}) {
+  const [isAssetSelectionMode, setIsAssetSelectionMode] = useState(false);
+  const [assetSelection, setAssetSelection] = useState<AssetSelectionState>(
+    createEmptyAssetSelection,
+  );
+  const [assetMarquee, setAssetMarquee] = useState<AssetMarqueeState | null>(
+    null,
+  );
+  const marqueeBaseSelectionRef = useRef<Set<string>>(new Set());
+  const selectableAssets = useMemo(() => getSelectableAssets(assets), [assets]);
+  const selectableAssetIds = useMemo(
+    () => selectableAssets.map((asset) => asset.id),
+    [selectableAssets],
+  );
+  const selectedAssets = useMemo(
+    () =>
+      assets.filter((asset) => assetSelection.selectedAssetIds.has(asset.id)),
+    [assetSelection.selectedAssetIds, assets],
+  );
+
+  useEffect(() => {
+    if (!isAssetSelectionMode) {
+      return;
+    }
+    setAssetSelection((currentSelection) =>
+      reconcileAssetSelection(currentSelection, selectableAssetIds),
+    );
+  }, [isAssetSelectionMode, selectableAssetIds]);
+
+  const clearAssetSelection = useCallback(() => {
+    setAssetSelection(createEmptyAssetSelection());
+    marqueeBaseSelectionRef.current = new Set();
+    setAssetMarquee(null);
+  }, []);
+
+  const openAssetSelectionMode = useCallback(() => {
+    clearAssetSelection();
+    onOpenSelectionMode?.();
+    setIsAssetSelectionMode(true);
+  }, [clearAssetSelection, onOpenSelectionMode]);
+
+  const closeAssetSelectionMode = useCallback(() => {
+    setIsAssetSelectionMode(false);
+    clearAssetSelection();
+  }, [clearAssetSelection]);
+
+  const toggleAssetSelected = useCallback(
+    (assetId: string, interaction: AssetSelectionInteraction) => {
+      setAssetSelection((currentSelection) =>
+        resolveAssetSelection(currentSelection, assetId, interaction),
+      );
+    },
+    [],
+  );
+
+  const toggleAllAssetsSelected = useCallback((visibleAssetIds: string[]) => {
+    setAssetSelection((currentSelection) => ({
+      selectedAssetIds: toggleVisibleAssetIds(
+        currentSelection.selectedAssetIds,
+        visibleAssetIds,
+      ),
+      anchorAssetId: null,
+    }));
+  }, []);
+
+  const updateAssetSelectionFromMarquee = useCallback(
+    (selectionRect: {
+      left: number;
+      right: number;
+      top: number;
+      bottom: number;
+    }) => {
+      const marqueeSelection = selectUploadedAssetsInRect({
+        assets,
+        assetTargets: readAssetHitTargets(assetListRef.current),
+        selectionRect,
+      });
+      setAssetSelection({
+        selectedAssetIds: new Set([
+          ...marqueeBaseSelectionRef.current,
+          ...marqueeSelection,
+        ]),
+        anchorAssetId: null,
+      });
+    },
+    [assetListRef, assets],
+  );
+
+  const handleAssetMarqueePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      const target = event.target as HTMLElement;
+      if (
+        !shouldStartAssetMarquee({
+          isAssetSelectionMode,
+          button: event.button,
+          isBlockedTarget: Boolean(
+            target.closest(ASSET_MARQUEE_BLOCKED_TARGET_SELECTOR),
+          ),
+        })
+      ) {
+        return;
+      }
+      event.preventDefault();
+      assetListRef.current?.setPointerCapture?.(event.pointerId);
+      setAssetMarquee(
+        createAssetMarqueeFromPointer({
+          pointerId: event.pointerId,
+          point: event,
+          containerRect: assetListRef.current?.getBoundingClientRect(),
+        }),
+      );
+      marqueeBaseSelectionRef.current =
+        event.ctrlKey || event.metaKey
+          ? new Set(assetSelection.selectedAssetIds)
+          : new Set();
+      setAssetSelection({
+        selectedAssetIds: new Set(marqueeBaseSelectionRef.current),
+        anchorAssetId: null,
+      });
+    },
+    [assetListRef, assetSelection.selectedAssetIds, isAssetSelectionMode],
+  );
+
+  const handleAssetMarqueePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!assetMarquee || assetMarquee.pointerId !== event.pointerId) {
+        return;
+      }
+      event.preventDefault();
+      const containerRect = assetListRef.current?.getBoundingClientRect();
+      setAssetMarquee((currentMarquee) =>
+        currentMarquee
+          ? moveAssetMarqueeToPointer({
+              marquee: currentMarquee,
+              point: event,
+              containerRect,
+            })
+          : null,
+      );
+      updateAssetSelectionFromMarquee(
+        createAssetMarqueeSelectionRect({
+          marquee: assetMarquee,
+          point: event,
+          containerRect,
+        }),
+      );
+    },
+    [assetListRef, assetMarquee, updateAssetSelectionFromMarquee],
+  );
+
+  const handleAssetMarqueePointerUp = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!assetMarquee || assetMarquee.pointerId !== event.pointerId) {
+        return;
+      }
+      event.preventDefault();
+      if (assetListRef.current?.hasPointerCapture?.(event.pointerId)) {
+        assetListRef.current.releasePointerCapture?.(event.pointerId);
+      }
+      setAssetMarquee(null);
+    },
+    [assetListRef, assetMarquee],
+  );
+
+  return {
+    selectableAssets,
+    selectedAssets,
+    selectedAssetIds: assetSelection.selectedAssetIds,
+    isAssetSelectionMode,
+    assetMarquee,
+    clearAssetSelection,
+    openAssetSelectionMode,
+    closeAssetSelectionMode,
+    toggleAssetSelected,
+    toggleAllAssetsSelected,
+    handleAssetMarqueePointerDown,
+    handleAssetMarqueePointerMove,
+    handleAssetMarqueePointerUp,
+  };
+}
-- 
2.52.0


From 8526063cea20146da2fda81325ce6ce270ff53d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 31 Jul 2026 19:46:44 +0800
Subject: [PATCH 17/26] =?UTF-8?q?fix:=20=E5=BD=93=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=BF=80=E6=B4=BB=E6=97=B6=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E6=96=87=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 `useEffect`，在 `isAssetSelectionMode` 为 true 时关闭菜单。
- 更新测试以覆盖新行为。
---
 .../ImageCanvasAssetRowView.test.tsx          | 25 +++++++++++++++++--
 .../image-editor/ImageCanvasAssetRowView.tsx  |  6 +++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
index fe69f5845..95557c41e 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
@@ -126,8 +126,10 @@ function renderAssetRow({
     onDownloadAsset,
   };
 
-  render(<ImageCanvasAssetRowView {...props} />);
-  return props;
+  return {
+    props,
+    ...render(<ImageCanvasAssetRowView {...props} />),
+  };
 }
 
 describe('ImageCanvasAssetRowView', () => {
@@ -185,6 +187,25 @@ describe('ImageCanvasAssetRowView', () => {
     expect(screen.queryByRole('menu')).toBeNull();
   });
 
+  it('closes the right click menu when selection mode becomes active', () => {
+    const { props, rerender } = renderAssetRow();
+
+    fireEvent.contextMenu(
+      screen.getByRole('button', { name: '添加账号素材A' }),
+      {
+        clientX: 120,
+        clientY: 80,
+      },
+    );
+    expect(screen.getByRole('menu')).toBeTruthy();
+
+    rerender(
+      <ImageCanvasAssetRowView {...props} isAssetSelectionMode={true} />,
+    );
+
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
   it('selects the asset instead of adding it in selection mode', () => {
     const addAssetLayer = vi.fn();
     const toggleAssetSelected = vi.fn();
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index 47ea4cb3b..5f401a839 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -106,6 +106,12 @@ export function ImageCanvasAssetRowView({
     setMenuPosition(null);
   }, []);
 
+  useEffect(() => {
+    if (isAssetSelectionMode) {
+      closeMenu();
+    }
+  }, [closeMenu, isAssetSelectionMode]);
+
   const selectAssetFromEvent = useCallback(
     (event: ReactMouseEvent<HTMLElement>) => {
       const pointerKind =
-- 
2.52.0


From 2da3dc05441f141336e155bf82f46ee1fffbfa88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 31 Jul 2026 20:04:48 +0800
Subject: [PATCH 18/26] =?UTF-8?q?fix:=20=E4=BF=9D=E7=95=99=E8=B7=A8?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2/=E6=8A=98=E5=8F=A0=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=EF=BC=8C=E9=9A=90=E8=97=8F=E9=80=89=E6=8B=A9=E5=8F=82=E4=B8=8E?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=B6=E5=BF=85=E9=A1=BB=E6=98=8E=E7=A1=AE?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

更新行为文档
补充测试
---
 .../shared-memory/decision-log.md             |   8 +-
 docs/project-memory/shared-memory/pitfalls.md |   2 +-
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   2 +-
 ...��构】图片画布编辑器前端拆分计划-2026-06-17.md |   2 +-
 .../ImageCanvasAssetLibraryPanelView.tsx      |  38 ++++++-
 ...mageCanvasEditorAssetsIntegration.test.tsx | 106 +++++++++++-------
 .../useImageCanvasAssetSelection.test.tsx     |   9 ++
 .../useImageCanvasAssetSelection.ts           |   9 ++
 8 files changed, 125 insertions(+), 51 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 378c607a8..c988cb016 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -5823,11 +5823,11 @@
 - 当前口径：`server-rs/crates/platform-llm/tests/live_stream_tool_calls.rs` 是默认忽略的真实端点工具调用 smoke；`on_delta` 只接收文本，工具调用从最终 `LlmRunResponse.tool_calls` 读取。现有测试没有原始 SSE 录制、事件类型/slot/分片顺序保存或逐事件比较，因此两类测试都不能证明 raw SSE fidelity 或抓包转录无偏差。
 - 现有确定性流式工具覆盖应与普通 Anthropic 文本流测试分开统计：三协议真实来源 fixture、Responses 仅有 completed / incomplete 终态事件时的恢复、并行 slot 聚合、截断参数和无片段 `StreamUnavailable` 等用例共同覆盖 parser 边界；未来若需证明转录一致性，必须另行增加受控原始 SSE capture/compare 能力。
 
-## 2026-07-27 图片画布左侧素材库统一可见范围多选与批量下载
+## 2026-07-27 图片画布左侧素材库统一稳定多选与批量操作
 
-- 范围边界：本次只重写左侧素材库选择模式，不改变中央画布舞台和图层列表的选择、框选或下载语义。可选择集合固定为当前搜索结果中已展开、上传完成且媒体地址有效的素材；搜索或折叠变化后立即清理不可见选择。
-- 输入语义：桌面普通点击替换选择，`Ctrl / Cmd + 点击` 切换追加，`Shift + 点击` 按当前可见顺序选择连续区间，`Ctrl / Cmd + Shift + 点击` 追加连续区间；触摸和笔输入单击切换选择。退出选择模式、关闭素材栏或切到图层栏统一清空选择、锚点和框选状态，非选择模式不显示历史选中高亮。
-- 工具栏与导出：批量工具栏作为素材滚动列表的固定非滚动底栏，提供可见范围全选 / 取消全选、下载、删除和取消；选择模式隐藏单行下载 / 重命名并禁用行拖拽和右键菜单。移动端选择模式使用独立的侧栏高度状态，并让素材列表恢复纵向滚动，避免普通模式 `14rem` 高度上限被固定底栏、标题和搜索区吃完。一个选中素材直接下载，多个选中素材复用画布素材导出管线生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，根目录为 `项目名-选中素材/`；单素材、序列帧和两类集合 ZIP 的下载名统一包含到秒的本地时间戳。素材卡整行是统一选择命中区，标题和空白区不得绕过 Ctrl / Cmd / Shift 选择处理。
+- 范围边界：本次只重写左侧素材库选择模式，不改变中央画布舞台和图层列表的选择、框选或下载语义。选择集合以全部上传完成且媒体地址有效的素材为有效性边界，不因搜索、折叠或展开变化而收缩；只有素材被删除、进入上传中 / 失败态或媒体地址失效时才清理对应选择和范围锚点。
+- 输入语义：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。退出选择模式、关闭素材栏或切到图层栏统一清空选择、锚点和框选状态，非选择模式不显示历史选中高亮。
+- 工具栏与导出：批量工具栏作为素材滚动列表的固定非滚动底栏，展示跨搜索与折叠状态保留的全部已选数量，并提供当前可见范围全选 / 取消全选、下载、删除和取消。下载消费完整选中集合；删除完整选中集合时，如果其中存在当前未显示素材，必须先用危险确认弹窗明确展示全部删除数量和未显示数量，用户确认前不得执行删除。选择模式隐藏单行下载 / 重命名并禁用行拖拽和右键菜单。移动端选择模式使用独立的侧栏高度状态，并让素材列表恢复纵向滚动，避免普通模式 `14rem` 高度上限被固定底栏、标题和搜索区吃完。一个选中素材直接下载，多个选中素材复用画布素材导出管线生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，根目录为 `项目名-选中素材/`；单素材、序列帧和两类集合 ZIP 的下载名统一包含到秒的本地时间戳。素材卡整行是统一选择命中区，标题和空白区不得绕过单项切换或 Shift 范围处理。
 
 ## 2026-07-29 抽取通用多 Agent Runtime 公共内核第一阶段
 
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 337521654..72ecf045a 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -195,7 +195,7 @@
 
 - 现象：批量选择多个素材后，搜索、折叠文件夹或展开文件夹会让已选数量下降、Shift 范围锚点丢失，后续批量下载或删除遗漏此前已选素材。
 - 原因：搜索结果和文件夹展开状态只描述当前 UI 可见范围，不描述素材是否仍然有效；用 `visibleAssetIds` reconcile 全局选择会把暂时隐藏误判为素材失效。
-- 处理：由唯一 `useImageCanvasAssetSelection` 持有选择集合、范围锚点、框选和全部选择 mutation；全局选择只按全部 `selectableAssetIds` 清理真正删除、上传未完成、上传失败或媒体地址无效的 ID。`visibleAssetIds` 只作为单项切换、Shift 可见区间和当前结果全选 / 取消全选的动作入参，批量下载与删除消费 hook 输出的完整 `selectedAssets`。
+- 处理：由唯一 `useImageCanvasAssetSelection` 持有选择集合、范围锚点、框选和全部选择 mutation；全局选择只按全部 `selectableAssetIds` 清理真正删除、上传未完成、上传失败或媒体地址无效的 ID。`visibleAssetIds` 只作为单项切换、Shift 可见区间和当前结果全选 / 取消全选的动作入参，批量下载与删除消费 hook 输出的完整 `selectedAssets`；删除中包含当前未显示选择时，必须明确展示全部数量和未显示数量并二次确认。
 - 验证：模型测试覆盖隐藏选择保留、可见范围增量和真正失效 ID 清理；图片画布素材集成测试覆盖搜索、折叠 / 展开后选中数量稳定及当前可见全选不影响隐藏选择。
 - 关联：`src/components/image-editor/useImageCanvasAssetSelection.ts`、`src/components/image-editor/useImageCanvasAssetLibrary.ts`、`src/components/image-editor/ImageCanvasSidebarView.tsx`、`src/components/image-editor/ImageCanvasEditorView.tsx`。
 
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 2e921ba1f..f2f377414 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -169,7 +169,7 @@
 - 画布素材 ZIP 的 `metadata.json` 只保存前端信息弹窗和导出文件列表可见的展示快照：项目标题、导出时间、图层标题、文件路径、类型、生成输入、模型显示名、Task 短 ID、Object 显示值、Resolution / 时长和导出错误。导出的生成输入只保留用户实际填写或选择的内容；系统默认兜底提示词、固定工作流提示词、内置图标描述、UI 提取素材固定提示词等内置提示词即使存在于历史 `generationInputs`，也不得写入导出元数据。不得把 `projectId`、`layerId`、`resourceId`、`sourceAssetId`、`sourceResourceId`、原始 `prompt` / `actualPrompt` / `provider` 或画布坐标、锁定、隐藏等布局状态写入导出元数据；Object 字段仅沿用信息弹窗当前可见值。
 - `生成角色动作` 的完成结果按序列帧素材处理：图层主 `src` 使用 `frames[0].imageSrc`，`mediaType` 固定为 `image-sequence`，`assetKind` 固定为 `character-animation`，完整帧列表写入 `imageSequenceFrames`；`previewVideoPath` 只保留为上游预览视频来源，不作为画布主媒体。下载和 ZIP 导出必须因此得到序列帧 ZIP / frames 目录，不能回退为预览视频或首帧 PNG；后端抽帧后逐帧保存带绿幕源图，上传时消费并释放原帧字节，再用该对象的 600 秒 OSS URL 完成透明化并落盘透明帧素材。
 - 素材面板支持按素材名、文件夹名、生成信息、用户可见模型、任务和媒体类型搜索。选择模式的选中集合以全部上传完成且媒体地址有效的可选素材为有效性边界，不因搜索、折叠或展开变化而收缩；只有素材被删除、进入上传中 / 失败态或媒体地址失效时才剔除对应选择及范围锚点。素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删当前已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
-- 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示跨搜索与折叠状态保留的全部已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；下载和删除作用于完整选中集合，不得只消费当前可见 ID。工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。Provider 与 `isEditorInternalProcessingModel(...)` 识别的内部处理模型不得进入搜索索引，避免出现隐藏字段可命中或命中但无可见匹配字段；原始审计元数据只保留给服务端和后台管理读取，普通用户（包括素材 owner）不得通过响应取得。
+- 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示跨搜索与折叠状态保留的全部已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；下载和删除作用于完整选中集合，不得只消费当前可见 ID。删除集合中存在当前未显示素材时，必须先用危险确认弹窗明确展示全部删除数量和未显示数量，确认前不得执行删除。工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。Provider 与 `isEditorInternalProcessingModel(...)` 识别的内部处理模型不得进入搜索索引，避免出现隐藏字段可命中或命中但无可见匹配字段；原始审计元数据只保留给服务端和后台管理读取，普通用户（包括素材 owner）不得通过响应取得。
 - 图层面板支持按图层名、生成信息、用户可见模型、任务和媒体类型搜索；Provider 与内部处理模型同样不得进入搜索索引。普通用户图层快照也不得携带这些内部字段。支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
 - 鼠标滚轮默认按设备原始 `deltaX / deltaY` 二维平移画布视口；当按住 Shift 且设备上报 `deltaX = 0` 时，视口输入适配层把 `deltaY` 映射为横向位移并将纵向位移置零，核心平移模型仍只消费归一化后的 X / Y。按住 Ctrl / Cmd 滚轮才缩放画布，并阻止浏览器页面缩放。缩放比例显示保持现有换算口径，最低可缩小到 `5%`。
diff --git a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
index e1d0f22de..5252d1513 100644
--- a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
+++ b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
@@ -101,7 +101,7 @@
   - 主视图继续保留上传文件读取、上传占位卡片进度、拖到画布坐标、创建画布图层、工程资源持久化和画布图层清理；素材删除通过 `onDeleteAssets` 回调通知主视图清理关联图层。
   - 该 hook 有独立单测覆盖素材库加载归一化、401 登录、新建文件夹临时 id 替换、素材移动、删除回调和多选删除，避免后续整理侧栏 JSX 时丢失素材库能力。
 - `useImageCanvasAssetSelection.ts`
-  - 作为素材选择的唯一状态边界，统一持有选择模式、完整选中集合、范围锚点、可选素材有效性 reconcile、单项 / Shift / 当前可见全选增量、框选几何与框选生命周期，并向批量下载 / 删除只暴露已经按素材顺序解析的 `selectedAssets`。
+  - 作为素材选择的唯一状态边界，统一持有选择模式、完整选中集合、范围锚点、可选素材有效性 reconcile、单项 / Shift / 当前可见全选增量、框选几何与框选生命周期，并向批量下载 / 删除只暴露已经按素材顺序解析的 `selectedAssets`；删除入口根据当前 `visibleAssetIds` 识别未显示选择并在执行完整集合删除前弹出危险确认。
   - 搜索和文件夹折叠只在侧栏产生 `visibleAssetIds` 并传入增量动作，不得直接修改或 reconcile 选择集合；选择行为测试集中在该 hook，素材库 model 不再维护第二套选择状态机。
 
 ## 第十一阶段模块
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index c208dc683..19069ec12 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -13,9 +13,11 @@ import type {
   RefObject,
   SetStateAction,
 } from 'react';
+import { useState } from 'react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
+import { PlatformDangerConfirmDialog } from '../common/PlatformDangerConfirmDialog';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasAssetFolderSectionView } from './ImageCanvasAssetFolderSectionView';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
@@ -26,7 +28,10 @@ import type {
   EditorAssetFolder,
   UploadTarget,
 } from './ImageCanvasEditorTypes';
-import type { AssetSelectionInteraction } from './useImageCanvasAssetSelection';
+import {
+  type AssetSelectionInteraction,
+  countHiddenSelectedAssets,
+} from './useImageCanvasAssetSelection';
 
 export type GroupedEditorAssetFolder = EditorAssetFolder & {
   assets: EditorAsset[];
@@ -152,6 +157,10 @@ export function ImageCanvasAssetLibraryPanelView({
   deleteSelectedAssets,
   closeAssetSelectionMode,
 }: ImageCanvasAssetLibraryPanelViewProps) {
+  const [
+    hiddenSelectionDeleteConfirmOpen,
+    setHiddenSelectionDeleteConfirmOpen,
+  ] = useState(false);
   let selectionToggleActionText = '全选';
   if (allVisibleAssetsSelected) {
     selectionToggleActionText = '取消全选';
@@ -160,6 +169,18 @@ export function ImageCanvasAssetLibraryPanelView({
   if (selectedAssetIds.size > 0) {
     selectionToggleLabel = `${selectionToggleActionText} · 已选 ${selectedAssetIds.size}`;
   }
+  const hiddenSelectedAssetCount = countHiddenSelectedAssets(
+    selectedAssetIds,
+    visibleAssetIds,
+  );
+
+  const requestDeleteSelectedAssets = () => {
+    if (hiddenSelectedAssetCount > 0) {
+      setHiddenSelectionDeleteConfirmOpen(true);
+      return;
+    }
+    deleteSelectedAssets();
+  };
 
   return (
     <div className="image-canvas-editor__asset-library">
@@ -304,7 +325,7 @@ export function ImageCanvasAssetLibraryPanelView({
             tone="warning"
             size="sm"
             disabled={selectedAssetIds.size === 0 || isExportingSelectedAssets}
-            onClick={deleteSelectedAssets}
+            onClick={requestDeleteSelectedAssets}
           >
             <Trash2 className="h-4 w-4" />
             删除
@@ -320,6 +341,19 @@ export function ImageCanvasAssetLibraryPanelView({
           </PlatformActionButton>
         </PlatformBatchActionToolbar>
       ) : null}
+      <PlatformDangerConfirmDialog
+        open={hiddenSelectionDeleteConfirmOpen}
+        title="删除全部已选素材"
+        description={`将删除 ${selectedAssetIds.size} 个已选素材，其中 ${hiddenSelectedAssetCount} 个当前未显示。`}
+        confirmLabel="确认删除全部已选素材"
+        onClose={() => setHiddenSelectionDeleteConfirmOpen(false)}
+        onConfirm={() => {
+          setHiddenSelectionDeleteConfirmOpen(false);
+          deleteSelectedAssets();
+        }}
+      >
+        删除后不可恢复。
+      </PlatformDangerConfirmDialog>
     </div>
   );
 }
diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
index 9898d2264..d82eec5bd 100644
--- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
@@ -924,9 +924,7 @@ describe('ImageCanvasEditorView asset library integration', () => {
 
     fireEvent.click(screen.getByText('账号素材A'));
     expect(within(toolbar).getByText(/已选 2/u)).toBeTruthy();
-    fireEvent.click(
-      within(toolbar).getByRole('button', { name: /^全选/u }),
-    );
+    fireEvent.click(within(toolbar).getByRole('button', { name: /^全选/u }));
     expect(within(toolbar).getByText(/已选 3/u)).toBeTruthy();
     fireEvent.click(
       within(toolbar).getByRole('button', { name: /^取消全选/u }),
@@ -946,6 +944,26 @@ describe('ImageCanvasEditorView asset library integration', () => {
     await user.click(screen.getByRole('button', { name: '展开其它素材' }));
     expect(foldedAssetList).toHaveProperty('hidden', false);
     expect(within(toolbar).getByText(/已选 2/u)).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: '折叠其它素材' }));
+    await user.click(within(toolbar).getByRole('button', { name: '删除' }));
+    const hiddenDeleteDialog = screen.getByRole('dialog', {
+      name: '删除全部已选素材',
+    });
+    expect(
+      within(hiddenDeleteDialog).getByText(
+        '将删除 2 个已选素材，其中 1 个当前未显示。',
+      ),
+    ).toBeTruthy();
+    expect(deleteEditorAssetMock).not.toHaveBeenCalled();
+    await user.click(
+      within(hiddenDeleteDialog).getByRole('button', {
+        name: '确认删除全部已选素材',
+      }),
+    );
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-b');
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-c');
+    expect(deleteEditorAssetMock).not.toHaveBeenCalledWith('asset-a');
   });
 
   it('removes canvas layers linked to deleted assets', async () => {
@@ -1014,37 +1032,39 @@ describe('ImageCanvasEditorView asset library integration', () => {
 
   it('saves the canvas layout after deleting an asset linked by source resource id', async () => {
     const user = userEvent.setup();
-    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce(withEditorProjectCanvasRevision({
-      projectId: 'editor-project-default',
-      title: '生成资源项目',
-      viewport: { x: 0, y: 0, scale: 1 },
-      layers: [
-        {
-          layerId: 'layer-generated-a',
-          resourceId: 'resource-generated-a',
-          title: '生成资源A',
-          x: 100,
-          y: 120,
-          width: 320,
-          height: 240,
-          originalWidth: 320,
-          originalHeight: 240,
-          zIndex: 1,
-          sourceType: 'generated',
-        },
-      ],
-      resources: [
-        {
-          resourceId: 'resource-generated-a',
-          projectId: 'editor-project-default',
-          imageSrc: '/editor-test/project/generated-a.png',
-          width: 320,
-          height: 240,
-          sourceType: 'generated',
-        },
-      ],
-      updatedAt: '2026-06-12T00:00:00.000Z',
-    }));
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce(
+      withEditorProjectCanvasRevision({
+        projectId: 'editor-project-default',
+        title: '生成资源项目',
+        viewport: { x: 0, y: 0, scale: 1 },
+        layers: [
+          {
+            layerId: 'layer-generated-a',
+            resourceId: 'resource-generated-a',
+            title: '生成资源A',
+            x: 100,
+            y: 120,
+            width: 320,
+            height: 240,
+            originalWidth: 320,
+            originalHeight: 240,
+            zIndex: 1,
+            sourceType: 'generated',
+          },
+        ],
+        resources: [
+          {
+            resourceId: 'resource-generated-a',
+            projectId: 'editor-project-default',
+            imageSrc: '/editor-test/project/generated-a.png',
+            width: 320,
+            height: 240,
+            sourceType: 'generated',
+          },
+        ],
+        updatedAt: '2026-06-12T00:00:00.000Z',
+      }),
+    );
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
       folders: [
         {
@@ -1118,14 +1138,16 @@ describe('ImageCanvasEditorView asset library integration', () => {
       height: 240,
       sourceType: 'uploaded',
     });
-    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce(withEditorProjectCanvasRevision({
-      projectId: 'editor-project-default',
-      title: '空画布项目',
-      viewport: { x: 0, y: 0, scale: 1 },
-      layers: [],
-      resources: [],
-      updatedAt: '2026-06-12T00:00:00.000Z',
-    }));
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce(
+      withEditorProjectCanvasRevision({
+        projectId: 'editor-project-default',
+        title: '空画布项目',
+        viewport: { x: 0, y: 0, scale: 1 },
+        layers: [],
+        resources: [],
+        updatedAt: '2026-06-12T00:00:00.000Z',
+      }),
+    );
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
       folders: [
         {
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
index b1e9c5d56..f11f8ddfc 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
@@ -6,6 +6,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import type { EditorAsset } from './ImageCanvasEditorTypes';
 import {
+  countHiddenSelectedAssets,
   createAssetMarqueeFromPointer,
   createAssetMarqueeSelectionRect,
   getSelectableAssets,
@@ -30,6 +31,14 @@ function createAsset(overrides: Partial<EditorAsset> = {}): EditorAsset {
 }
 
 describe('useImageCanvasAssetSelection', () => {
+  it('counts selected assets outside the current visible scope', () => {
+    expect(
+      countHiddenSelectedAssets(new Set(['asset-a', 'asset-b', 'asset-c']), [
+        'asset-a',
+      ]),
+    ).toBe(2);
+  });
+
   it('owns selectable-asset validity', () => {
     expect(
       getSelectableAssets([
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.ts b/src/components/image-editor/useImageCanvasAssetSelection.ts
index cd4a502f2..a8e58656d 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.ts
+++ b/src/components/image-editor/useImageCanvasAssetSelection.ts
@@ -44,6 +44,15 @@ export function getSelectableAssets(assets: EditorAsset[]) {
   );
 }
 
+export function countHiddenSelectedAssets(
+  selectedAssetIds: Set<string>,
+  visibleAssetIds: string[],
+) {
+  const visibleIds = new Set(visibleAssetIds);
+  return [...selectedAssetIds].filter((assetId) => !visibleIds.has(assetId))
+    .length;
+}
+
 function doRectsIntersect(rect: ClientRectLike, selectionRect: ClientRectLike) {
   return (
     rect.left <= selectionRect.right &&
-- 
2.52.0


From 7570134f00b6fbe1269c3645185c9c56643b143f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 31 Jul 2026 20:17:30 +0800
Subject: [PATCH 19/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E6=A1=86=E9=80=89=E6=8D=95=E8=8E=B7=E4=B8=A2=E5=A4=B1=E5=90=8E?=
 =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=E6=B8=85=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 lostpointercapture 指针匹配清理且不重复释放捕获
贯通素材选择 Hook 到素材列表的丢失捕获事件
补充生命周期回归测试和前端拆分文档
---
 ...��构】图片画布编辑器前端拆分计划-2026-06-17.md |  2 +-
 .../ImageCanvasAssetLibraryPanelView.tsx      |  5 ++
 .../ImageCanvasEditorShellView.test.tsx       |  1 +
 .../image-editor/ImageCanvasEditorView.tsx    |  2 +
 .../ImageCanvasSidebarView.test.tsx           |  1 +
 .../image-editor/ImageCanvasSidebarView.tsx   |  5 ++
 .../useImageCanvasAssetLibrary.ts             |  2 +
 .../useImageCanvasAssetSelection.test.tsx     | 48 ++++++++++++++++++-
 .../useImageCanvasAssetSelection.ts           | 10 ++++
 9 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
index 5252d1513..972f3c997 100644
--- a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
+++ b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
@@ -101,7 +101,7 @@
   - 主视图继续保留上传文件读取、上传占位卡片进度、拖到画布坐标、创建画布图层、工程资源持久化和画布图层清理；素材删除通过 `onDeleteAssets` 回调通知主视图清理关联图层。
   - 该 hook 有独立单测覆盖素材库加载归一化、401 登录、新建文件夹临时 id 替换、素材移动、删除回调和多选删除，避免后续整理侧栏 JSX 时丢失素材库能力。
 - `useImageCanvasAssetSelection.ts`
-  - 作为素材选择的唯一状态边界，统一持有选择模式、完整选中集合、范围锚点、可选素材有效性 reconcile、单项 / Shift / 当前可见全选增量、框选几何与框选生命周期，并向批量下载 / 删除只暴露已经按素材顺序解析的 `selectedAssets`；删除入口根据当前 `visibleAssetIds` 识别未显示选择并在执行完整集合删除前弹出危险确认。
+  - 作为素材选择的唯一状态边界，统一持有选择模式、完整选中集合、范围锚点、可选素材有效性 reconcile、单项 / Shift / 当前可见全选增量、框选几何与框选生命周期；框选除 `pointerup / pointercancel` 外必须在匹配的 `lostpointercapture` 到达时只清理框选状态，不得再次释放已经丢失的 capture。该 hook 向批量下载 / 删除只暴露已经按素材顺序解析的 `selectedAssets`；删除入口根据当前 `visibleAssetIds` 识别未显示选择并在执行完整集合删除前弹出危险确认。
   - 搜索和文件夹折叠只在侧栏产生 `visibleAssetIds` 并传入增量动作，不得直接修改或 reconcile 选择集合；选择行为测试集中在该 hook，素材库 model 不再维护第二套选择状态机。
 
 ## 第十一阶段模块
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index 19069ec12..e20f4e122 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -80,6 +80,9 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   onAssetMarqueePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueeLostPointerCapture: (
+    event: ReactPointerEvent<HTMLDivElement>,
+  ) => void;
   updateAssetMoveDropFolder: (folderId: string | null) => void;
   addUploadedFiles: (
     files: FileList | File[],
@@ -136,6 +139,7 @@ export function ImageCanvasAssetLibraryPanelView({
   onAssetMarqueePointerDown,
   onAssetMarqueePointerMove,
   onAssetMarqueePointerUp,
+  onAssetMarqueeLostPointerCapture,
   updateAssetMoveDropFolder,
   addUploadedFiles,
   requestUpload,
@@ -191,6 +195,7 @@ export function ImageCanvasAssetLibraryPanelView({
         onPointerMove={onAssetMarqueePointerMove}
         onPointerUp={onAssetMarqueePointerUp}
         onPointerCancel={onAssetMarqueePointerUp}
+        onLostPointerCapture={onAssetMarqueeLostPointerCapture}
       >
         {pinnedAssetMoveFolderId ? (
           <div
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index ae080da6f..1e05fea99 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -63,6 +63,7 @@ function createSidebarProps(): ImageCanvasSidebarViewProps {
     onAssetMarqueePointerDown: vi.fn(),
     onAssetMarqueePointerMove: vi.fn(),
     onAssetMarqueePointerUp: vi.fn(),
+    onAssetMarqueeLostPointerCapture: vi.fn(),
     updateAssetMoveDropFolder: vi.fn(),
     addUploadedFiles: vi.fn(),
     requestUpload: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index cac0abca5..894de92c5 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -714,6 +714,7 @@ export function ImageCanvasEditorView({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueeLostPointerCapture,
     refreshAssetLibrary,
   } = useImageCanvasAssetLibrary({
     assetListRef,
@@ -2273,6 +2274,7 @@ export function ImageCanvasEditorView({
     onAssetMarqueePointerDown: handleAssetMarqueePointerDown,
     onAssetMarqueePointerMove: handleAssetMarqueePointerMove,
     onAssetMarqueePointerUp: handleAssetMarqueePointerUp,
+    onAssetMarqueeLostPointerCapture: handleAssetMarqueeLostPointerCapture,
     updateAssetMoveDropFolder,
     addUploadedFiles,
     requestUpload,
diff --git a/src/components/image-editor/ImageCanvasSidebarView.test.tsx b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
index 7a14f067f..02896397d 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
@@ -101,6 +101,7 @@ function createSidebarProps(
     onAssetMarqueePointerDown: vi.fn(),
     onAssetMarqueePointerMove: vi.fn(),
     onAssetMarqueePointerUp: vi.fn(),
+    onAssetMarqueeLostPointerCapture: vi.fn(),
     updateAssetMoveDropFolder: vi.fn(),
     addUploadedFiles: vi.fn(),
     requestUpload: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasSidebarView.tsx b/src/components/image-editor/ImageCanvasSidebarView.tsx
index 07515c4e7..00b613a6d 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.tsx
@@ -76,6 +76,9 @@ export type ImageCanvasSidebarViewProps = {
   onAssetMarqueePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueeLostPointerCapture: (
+    event: ReactPointerEvent<HTMLDivElement>,
+  ) => void;
   updateAssetMoveDropFolder: (folderId: string | null) => void;
   addUploadedFiles: (
     files: FileList | File[],
@@ -148,6 +151,7 @@ export function ImageCanvasSidebarView({
   onAssetMarqueePointerDown,
   onAssetMarqueePointerMove,
   onAssetMarqueePointerUp,
+  onAssetMarqueeLostPointerCapture,
   updateAssetMoveDropFolder,
   addUploadedFiles,
   requestUpload,
@@ -335,6 +339,7 @@ export function ImageCanvasSidebarView({
           onAssetMarqueePointerDown={onAssetMarqueePointerDown}
           onAssetMarqueePointerMove={onAssetMarqueePointerMove}
           onAssetMarqueePointerUp={onAssetMarqueePointerUp}
+          onAssetMarqueeLostPointerCapture={onAssetMarqueeLostPointerCapture}
           updateAssetMoveDropFolder={updateAssetMoveDropFolder}
           addUploadedFiles={addUploadedFiles}
           requestUpload={requestUpload}
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index f0589881c..38f7c69ff 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -139,6 +139,7 @@ export function useImageCanvasAssetLibrary({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueeLostPointerCapture,
   } = useImageCanvasAssetSelection({
     assetListRef,
     assets,
@@ -539,6 +540,7 @@ export function useImageCanvasAssetLibrary({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueeLostPointerCapture,
     refreshAssetLibrary,
   };
 }
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
index f11f8ddfc..3922e92cf 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
@@ -1,7 +1,7 @@
 /* @vitest-environment jsdom */
 
 import { act, renderHook, waitFor } from '@testing-library/react';
-import { createRef } from 'react';
+import { createRef, type PointerEvent as ReactPointerEvent } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { EditorAsset } from './ImageCanvasEditorTypes';
@@ -229,4 +229,50 @@ describe('useImageCanvasAssetSelection', () => {
     expect(result.current.isAssetSelectionMode).toBe(false);
     expect(result.current.selectedAssetIds.size).toBe(0);
   });
+
+  it('clears only the matching marquee when pointer capture is lost', () => {
+    const assetList = document.createElement('div');
+    const releasePointerCapture = vi.fn();
+    Object.assign(assetList, {
+      setPointerCapture: vi.fn(),
+      releasePointerCapture,
+    });
+    const assetListRef = { current: assetList };
+    const { result } = renderHook(() =>
+      useImageCanvasAssetSelection({
+        assetListRef,
+        assets: [createAsset()],
+      }),
+    );
+    const target = document.createElement('div');
+
+    act(() => result.current.openAssetSelectionMode());
+    act(() =>
+      result.current.handleAssetMarqueePointerDown({
+        target,
+        button: 0,
+        pointerId: 7,
+        clientX: 10,
+        clientY: 20,
+        ctrlKey: false,
+        metaKey: false,
+        preventDefault: vi.fn(),
+      } as unknown as ReactPointerEvent<HTMLDivElement>),
+    );
+    expect(result.current.assetMarquee?.pointerId).toBe(7);
+
+    act(() =>
+      result.current.handleAssetMarqueeLostPointerCapture({
+        pointerId: 8,
+      } as ReactPointerEvent<HTMLDivElement>),
+    );
+    expect(result.current.assetMarquee?.pointerId).toBe(7);
+    act(() =>
+      result.current.handleAssetMarqueeLostPointerCapture({
+        pointerId: 7,
+      } as ReactPointerEvent<HTMLDivElement>),
+    );
+    expect(result.current.assetMarquee).toBeNull();
+    expect(releasePointerCapture).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.ts b/src/components/image-editor/useImageCanvasAssetSelection.ts
index a8e58656d..219b7f5e8 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.ts
+++ b/src/components/image-editor/useImageCanvasAssetSelection.ts
@@ -433,6 +433,15 @@ export function useImageCanvasAssetSelection({
     [assetListRef, assetMarquee],
   );
 
+  const handleAssetMarqueeLostPointerCapture = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      setAssetMarquee((currentMarquee) =>
+        currentMarquee?.pointerId === event.pointerId ? null : currentMarquee,
+      );
+    },
+    [],
+  );
+
   return {
     selectableAssets,
     selectedAssets,
@@ -447,5 +456,6 @@ export function useImageCanvasAssetSelection({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueeLostPointerCapture,
   };
 }
-- 
2.52.0


From 31e0cb7456a9357ffc83648b9c2d209def72d781 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 3 Aug 2026 10:15:00 +0800
Subject: [PATCH 20/26] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E6=8C=89=E9=92=AE=E7=9A=84=E5=9B=BE=E6=A0=87=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=8A=A0=E7=BB=9F=E4=B8=80=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=E7=B1=BB=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../image-editor/ImageCanvasAssetLibraryPanelView.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index e20f4e122..7e4c047a4 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -341,7 +341,7 @@ export function ImageCanvasAssetLibraryPanelView({
             size="sm"
             onClick={closeAssetSelectionMode}
           >
-            <X />
+            <X className="h-4 w-4" />
             取消
           </PlatformActionButton>
         </PlatformBatchActionToolbar>
-- 
2.52.0


From 9afd1ebfdb72a1ea328759584eabdc85e7179f8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Tue, 4 Aug 2026 10:52:15 +0800
Subject: [PATCH 21/26] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20objectKey-onl?=
 =?UTF-8?q?y=20=E7=A7=81=E6=9C=89=E7=B4=A0=E6=9D=90=E7=9A=84=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E4=B8=8E=E6=89=B9=E9=87=8F=E5=AF=BC=E5=87=BA=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

统一使用 src || objectKey 判断素材是否可读
已同步导出方案文档
---
 ...��端架构】图片画布素材导出方案-2026-06-15.md |  2 +
 .../ImageCanvasExportModel.test.ts            |  2 +-
 ...useImageCanvasAssetExportWorkflow.test.tsx | 83 +++++++++++++++++++
 .../useImageCanvasAssetExportWorkflow.ts      |  7 +-
 .../useImageCanvasAssetSelection.test.tsx     | 62 +++++++++++++-
 .../useImageCanvasAssetSelection.ts           |  3 +-
 src/services/assetReadUrlService.ts           | 13 ++-
 7 files changed, 164 insertions(+), 8 deletions(-)

diff --git a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
index 1c6cbb25b..1e2ae5e4f 100644
--- a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
+++ b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
@@ -30,6 +30,8 @@
 
 左侧素材库选择模式同时支持导出当前可见范围内的选中素材：只选中一个普通素材时直接下载原文件；选中多个素材时沿用画布素材 ZIP 的读取、去重、媒体分目录、序列帧、元数据、部分失败和浏览器下载能力，生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，包内根目录为 `项目名-选中素材/`。单素材、单序列帧、选中素材 ZIP 和画布素材 ZIP 的下载文件名都必须包含到秒的本地时间戳，避免同一天重复导出时重名。该入口不改变中央画布和图层列表的选择 / 下载语义。
 
+持久素材只要 `src` 或 `objectKey` 任一有效即可进入点击、Shift、框选和全选范围。`src` 为空但保留私有 `objectKey` 的素材，导出时复用统一资源读取链路换签；浏览器无法直读签名 URL 时继续回退同源 `/api/assets/read-bytes` 字节代理，不得因缺少临时展示地址而过滤。
+
 暂不实现：
 
 - 画布整体截图 PNG。
diff --git a/src/components/image-editor/ImageCanvasExportModel.test.ts b/src/components/image-editor/ImageCanvasExportModel.test.ts
index 18b49d772..323f05972 100644
--- a/src/components/image-editor/ImageCanvasExportModel.test.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.test.ts
@@ -282,7 +282,7 @@ describe('ImageCanvasExportModel', () => {
     try {
       const blob = await readLayerAssetBlob(
         buildLayer({
-          src: '/generated-editor-videos/video.mp4',
+          src: '',
           mediaType: 'video',
           objectKey: 'generated/video.mp4',
         }),
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index fb2e52973..d411b4901 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -175,6 +175,89 @@ describe('useImageCanvasAssetExportWorkflow', () => {
     }
   });
 
+  it('exports selected object-key-only assets through the private byte reader', async () => {
+    const originalFetch = globalThis.fetch;
+    const fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.startsWith('/api/assets/read-url?')) {
+        return new Response(null, { status: 404 });
+      }
+      if (url.startsWith('/api/assets/read-bytes?')) {
+        const objectKey = new URL(url, 'http://localhost').searchParams.get(
+          'objectKey',
+        );
+        return new Response(new Blob([objectKey ?? ''], { type: 'image/png' }));
+      }
+      return new Response(null, { status: 404 });
+    });
+    globalThis.fetch = fetchMock as typeof fetch;
+    let exportedBlob: Blob | null = null;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn((blob: Blob) => {
+        exportedBlob = blob;
+        return 'blob:object-key-only-export';
+      }),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[
+            createLayer('object-key-a', {
+              title: '私有素材A',
+              src: '',
+              objectKey: 'generated/editor/private-a.png',
+              zIndex: 0,
+            }),
+            createLayer('object-key-b', {
+              title: '私有素材B',
+              src: '',
+              objectKey: 'generated/editor/private-b.png',
+              zIndex: 1,
+            }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '下载多个选中素材' }));
+      await waitFor(() => expect(exportedBlob).toBeTruthy());
+
+      const byteReadUrls = fetchMock.mock.calls
+        .map(([input]) => String(input))
+        .filter((url) => url.startsWith('/api/assets/read-bytes?'));
+      expect(byteReadUrls).toEqual(
+        expect.arrayContaining([
+          expect.stringContaining(
+            'objectKey=generated%2Feditor%2Fprivate-a.png',
+          ),
+          expect.stringContaining(
+            'objectKey=generated%2Feditor%2Fprivate-b.png',
+          ),
+        ]),
+      );
+      const zip = await JSZip.loadAsync(exportedBlob!);
+      expect(
+        zip.file('导出项目-选中素材/images/001-私有素材A.png'),
+      ).toBeTruthy();
+      expect(
+        zip.file('导出项目-选中素材/images/002-私有素材B.png'),
+      ).toBeTruthy();
+      expect(screen.getByTestId('status').textContent).toBe(
+        'success:选中素材已导出',
+      );
+    } finally {
+      globalThis.fetch = originalFetch;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
   it('prevents concurrent collection exports before React re-renders', async () => {
     const originalFetch = globalThis.fetch;
     let resolveFetch: (response: Response) => void = () => {};
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index 88d843f12..092cc1e4a 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -1,6 +1,7 @@
 import JSZip from 'jszip';
 import { useCallback, useRef, useState } from 'react';
 
+import { hasReadableAssetSource } from '../../services/assetReadUrlService';
 import type {
   CanvasAssetExportImage,
   CanvasAssetExportMetadata,
@@ -418,7 +419,9 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
       const exportableLayers = targetLayers
-        .filter((layer) => layer.src.trim().length > 0)
+        .filter((layer) =>
+          hasReadableAssetSource(layer.src, layer.objectKey),
+        )
         .sort((left, right) => left.zIndex - right.zIndex);
       if (!exportableLayers.length) {
         setAssetExportStatus({
@@ -759,7 +762,7 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
       const exportableLayers = selectedLayers.filter(
-        (layer) => layer.src.trim().length > 0,
+        (layer) => hasReadableAssetSource(layer.src, layer.objectKey),
       );
       if (!exportableLayers.length) {
         setAssetExportStatus({
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
index 3922e92cf..8e4c9eba5 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
@@ -46,9 +46,14 @@ describe('useImageCanvasAssetSelection', () => {
         createAsset({ id: 'uploading', uploadStatus: 'uploading' }),
         createAsset({ id: 'failed', uploadStatus: 'failed' }),
         createAsset({ id: 'empty', src: '  ' }),
+        createAsset({
+          id: 'object-key-only',
+          src: '',
+          objectKey: 'generated/editor/object-key-only.png',
+        }),
         createAsset({ id: 'built-in', sourceKind: 'built-in' }),
       ]).map((asset) => asset.id),
-    ).toEqual(['ready']);
+    ).toEqual(['ready', 'object-key-only']);
   });
 
   it('owns marquee geometry and selectable hit testing', () => {
@@ -80,6 +85,11 @@ describe('useImageCanvasAssetSelection', () => {
         assets: [
           createAsset({ id: 'asset-a' }),
           createAsset({ id: 'asset-b' }),
+          createAsset({
+            id: 'object-key-only',
+            src: '',
+            objectKey: 'generated/editor/object-key-only.png',
+          }),
           createAsset({ id: 'built-in', sourceKind: 'built-in' }),
         ],
         assetTargets: [
@@ -95,10 +105,58 @@ describe('useImageCanvasAssetSelection', () => {
             assetId: 'built-in',
             rect: { left: 15, right: 25, top: 15, bottom: 25 },
           },
+          {
+            assetId: 'object-key-only',
+            rect: { left: 25, right: 30, top: 25, bottom: 30 },
+          },
         ],
         selectionRect: { left: 20, right: 35, top: 20, bottom: 35 },
       }),
-    ]).toEqual(['asset-a', 'asset-b']);
+    ]).toEqual(['asset-a', 'asset-b', 'object-key-only']);
+  });
+
+  it('supports click, shift and select-all for object-key-only assets', () => {
+    const assets = [
+      createAsset({
+        id: 'object-key-a',
+        src: '',
+        objectKey: 'generated/editor/object-key-a.png',
+      }),
+      createAsset({
+        id: 'object-key-b',
+        src: '',
+        objectKey: 'generated/editor/object-key-b.png',
+      }),
+    ];
+    const visibleAssetIds = getSelectableAssets(assets).map(
+      (asset) => asset.id,
+    );
+    const { result } = renderHook(() =>
+      useImageCanvasAssetSelection({
+        assetListRef: createRef<HTMLDivElement>(),
+        assets,
+      }),
+    );
+
+    act(() => result.current.openAssetSelectionMode());
+    act(() =>
+      result.current.toggleAssetSelected('object-key-a', { visibleAssetIds }),
+    );
+    act(() =>
+      result.current.toggleAssetSelected('object-key-b', {
+        visibleAssetIds,
+        shiftKey: true,
+      }),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual([
+      'object-key-a',
+      'object-key-b',
+    ]);
+
+    act(() => result.current.toggleAllAssetsSelected(visibleAssetIds));
+    expect(result.current.selectedAssetIds.size).toBe(0);
+    act(() => result.current.toggleAllAssetsSelected(visibleAssetIds));
+    expect([...result.current.selectedAssetIds]).toEqual(visibleAssetIds);
   });
 
   it('applies tick, shift and visible select-all as deltas', () => {
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.ts b/src/components/image-editor/useImageCanvasAssetSelection.ts
index 219b7f5e8..c94a0a45b 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.ts
+++ b/src/components/image-editor/useImageCanvasAssetSelection.ts
@@ -1,6 +1,7 @@
 import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
+import { hasReadableAssetSource } from '../../services/assetReadUrlService';
 import type { AssetMarqueeState, EditorAsset } from './ImageCanvasEditorTypes';
 
 const ASSET_ITEM_SELECTOR = '[data-asset-id]';
@@ -40,7 +41,7 @@ export function getSelectableAssets(assets: EditorAsset[]) {
       asset.sourceKind === 'uploaded' &&
       asset.uploadStatus !== 'uploading' &&
       asset.uploadStatus !== 'failed' &&
-      asset.src.trim().length > 0,
+      hasReadableAssetSource(asset.src, asset.objectKey),
   );
 }
 
diff --git a/src/services/assetReadUrlService.ts b/src/services/assetReadUrlService.ts
index 85feb9380..671384fd5 100644
--- a/src/services/assetReadUrlService.ts
+++ b/src/services/assetReadUrlService.ts
@@ -102,6 +102,15 @@ export function shouldResolveAssetReadUrl(source: string | null | undefined) {
   );
 }
 
+export function hasReadableAssetSource(
+  source: string | null | undefined,
+  objectKey?: string | null,
+) {
+  return Boolean(
+    source?.trim() || objectKey?.trim().replace(/^\/+/u, ''),
+  );
+}
+
 function normalizeLegacyPublicPath(value: string) {
   return `/${value.trim().replace(/^\/+/u, '')}`;
 }
@@ -531,11 +540,11 @@ export async function readAssetBytes(
   options: AssetReadBytesOptions = {},
 ) {
   const value = source?.trim() ?? '';
-  if (!value) {
+  const objectKey = options.objectKey?.trim().replace(/^\/+/u, '') ?? '';
+  if (!hasReadableAssetSource(value, objectKey)) {
     throw new Error('资源路径不能为空');
   }
 
-  const objectKey = options.objectKey?.trim().replace(/^\/+/u, '') ?? '';
   const legacyPath = isGeneratedLegacyPath(value)
     ? value
     : resolveGeneratedLegacyPathFromUrl(value);
-- 
2.52.0


From d1a9b361043debb3f99d407618df48125ac295f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 7 Aug 2026 12:11:17 +0800
Subject: [PATCH 22/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=E4=B8=8E=E5=AF=BC=E5=87=BA=E8=BE=B9=E7=95=8C?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复触摸滚动、滚动框选坐标和抬手/取消语义
统一不可选素材行的交互与无障碍状态
支持仅帧来源的序列帧导出并统一导出互斥锁
补充定向回归测试并同步素材选择与导出文档
---
 .../shared-memory/decision-log.md             |   4 +-
 ...��端架构】图片画布素材导出方案-2026-06-15.md |   2 +-
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |   2 +-
 .../ImageCanvasAssetLibraryPanelView.tsx      |   6 +-
 .../ImageCanvasAssetRowView.test.tsx          |  16 +++
 .../image-editor/ImageCanvasAssetRowView.tsx  |  17 ++-
 .../ImageCanvasEditorPrimitives.tsx           |   3 +
 .../ImageCanvasEditorShellView.test.tsx       |   1 +
 .../image-editor/ImageCanvasEditorView.tsx    |   2 +
 .../ImageCanvasSidebarView.test.tsx           |   1 +
 .../image-editor/ImageCanvasSidebarView.tsx   |   5 +
 ...useImageCanvasAssetExportWorkflow.test.tsx | 118 +++++++++++++++
 .../useImageCanvasAssetExportWorkflow.ts      |  60 +++++---
 .../useImageCanvasAssetLibrary.ts             |   2 +
 .../useImageCanvasAssetSelection.test.tsx     | 134 ++++++++++++++++++
 .../useImageCanvasAssetSelection.ts           |  82 ++++++++---
 16 files changed, 408 insertions(+), 47 deletions(-)

diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index d40b36b40..1f3f332c7 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -6014,8 +6014,8 @@
 ## 2026-07-27 图片画布左侧素材库统一稳定多选与批量操作
 
 - 范围边界：本次只重写左侧素材库选择模式，不改变中央画布舞台和图层列表的选择、框选或下载语义。选择集合以全部上传完成且媒体地址有效的素材为有效性边界，不因搜索、折叠或展开变化而收缩；只有素材被删除、进入上传中 / 失败态或媒体地址失效时才清理对应选择和范围锚点。
-- 输入语义：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。退出选择模式、关闭素材栏或切到图层栏统一清空选择、锚点和框选状态，非选择模式不显示历史选中高亮。
-- 工具栏与导出：批量工具栏作为素材滚动列表的固定非滚动底栏，展示跨搜索与折叠状态保留的全部已选数量，并提供当前可见范围全选 / 取消全选、下载、删除和取消。下载消费完整选中集合；删除完整选中集合时，如果其中存在当前未显示素材，必须先用危险确认弹窗明确展示全部删除数量和未显示数量，用户确认前不得执行删除。选择模式隐藏单行下载 / 重命名并禁用行拖拽和右键菜单。移动端选择模式使用独立的侧栏高度状态，并让素材列表恢复纵向滚动，避免普通模式 `14rem` 高度上限被固定底栏、标题和搜索区吃完。一个选中素材直接下载，多个选中素材复用画布素材导出管线生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，根目录为 `项目名-选中素材/`；单素材、序列帧和两类集合 ZIP 的下载名统一包含到秒的本地时间戳。素材卡整行是统一选择命中区，标题和空白区不得绕过单项切换或 Shift 范围处理。
+- 输入语义：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。退出选择模式、关闭素材栏或切到图层栏统一清空选择、锚点和框选状态，非选择模式不显示历史选中高亮。触摸素材卡仍可单击切换，但触摸列表空白区域必须保留纵向滚动，不启动框选；鼠标 / 笔框选使用素材列表内容坐标承接滚动偏移，并以 `pointerup` 的最终坐标提交，`pointercancel` 只取消框选。
+- 工具栏与导出：批量工具栏作为素材滚动列表的固定非滚动底栏，展示跨搜索与折叠状态保留的全部已选数量，并提供当前可见范围全选 / 取消全选、下载、删除和取消。下载消费完整选中集合；删除完整选中集合时，如果其中存在当前未显示素材，必须先用危险确认弹窗明确展示全部删除数量和未显示数量，用户确认前不得执行删除。选择模式隐藏单行下载 / 重命名并禁用行拖拽和右键菜单；内置、上传未完成、上传失败或无可读来源的行显示为不可选择，不暴露虚假的可用按钮。移动端选择模式使用独立的侧栏高度状态，并让素材列表恢复纵向滚动，避免普通模式 `14rem` 高度上限被固定底栏、标题和搜索区吃完。一个选中素材直接下载，多个选中素材复用画布素材导出管线生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，根目录为 `项目名-选中素材/`；单素材、序列帧和两类集合 ZIP 的下载名统一包含到秒的本地时间戳。素材卡整行是统一选择命中区，标题和空白区不得绕过单项切换或 Shift 范围处理。序列帧层的可导出性以至少一帧具有可读 `imageSrc / objectKey` 为准，不依赖层级 `src / objectKey`；单项、选中集合和整画布导出共用一个前端互斥锁，避免下载和状态提示互相覆盖。
 
 ## 2026-07-29 抽取通用多 Agent Runtime 公共内核第一阶段
 
diff --git a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
index 61a158d7d..97f13fd32 100644
--- a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
+++ b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
@@ -28,7 +28,7 @@
 - 锁定、分组、翻转等状态不影响图片文件导出，但写入元数据。
 - 空画布时按钮置灰，或点击后显示轻提示。
 
-左侧素材库选择模式同时支持导出当前可见范围内的选中素材：只选中一个普通素材时直接下载原文件；选中多个素材时沿用画布素材 ZIP 的读取、去重、媒体分目录、序列帧、元数据、部分失败和浏览器下载能力，生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，包内根目录为 `项目名-选中素材/`。单素材、单序列帧、选中素材 ZIP 和画布素材 ZIP 的下载文件名都必须包含到秒的本地时间戳，避免同一天重复导出时重名。该入口不改变中央画布和图层列表的选择 / 下载语义。
+左侧素材库选择模式同时支持导出当前可见范围内的选中素材：只选中一个普通素材时直接下载原文件；选中多个素材时沿用画布素材 ZIP 的读取、去重、媒体分目录、序列帧、元数据、部分失败和浏览器下载能力，生成 `项目名-选中素材-YYYYMMDD-HHmmss.zip`，包内根目录为 `项目名-选中素材/`。单素材、单序列帧、选中素材 ZIP 和画布素材 ZIP 的下载文件名都必须包含到秒的本地时间戳，避免同一天重复导出时重名。序列帧层只要至少一帧具有可读 `imageSrc / objectKey` 即可进入导出计划，不要求层级 `src / objectKey`；单层、选中素材和画布集合导出必须共用同一互斥状态，避免并发下载覆盖进度与结果提示。该入口不改变中央画布和图层列表的选择 / 下载语义。
 
 持久素材只要 `src` 或 `objectKey` 任一有效即可进入点击、Shift、框选和全选范围。`src` 为空但保留私有 `objectKey` 的素材，导出时复用统一资源读取链路换签；浏览器无法直读签名 URL 时继续回退同源 `/api/assets/read-bytes` 字节代理，不得因缺少临时展示地址而过滤。
 
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 3d5374bf3..782eab873 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -199,7 +199,7 @@
 - 画布素材 ZIP 的 `metadata.json` 只保存前端信息弹窗和导出文件列表可见的展示快照：项目标题、导出时间、图层标题、文件路径、类型、生成输入、模型显示名、Task 短 ID、Object 显示值、Resolution / 时长和导出错误。导出的生成输入只保留用户实际填写或选择的内容；系统默认兜底提示词、固定工作流提示词、内置图标描述、UI 提取素材固定提示词等内置提示词即使存在于历史 `generationInputs`，也不得写入导出元数据。不得把 `projectId`、`layerId`、`resourceId`、`sourceAssetId`、`sourceResourceId`、原始 `prompt` / `actualPrompt` / `provider` 或画布坐标、锁定、隐藏等布局状态写入导出元数据；Object 字段仅沿用信息弹窗当前可见值。
 - `生成角色动作` 的完成结果按序列帧素材处理：`assetKind` 固定为 `character-animation`，图层主 `src` 使用首帧，前端内部据 `assetKind` 派生 `CanvasMediaType="image-sequence"` 选择播放器。`previewVideoPath` 只作为上游来源，不作为画布主媒体。下载和 ZIP 导出必须得到序列帧 ZIP / frames 目录，不能回退为预览视频或首帧 PNG；后端抽帧后逐帧保存带绿幕源图，上传时消费并释放原帧字节，再用该对象的 600 秒 OSS URL 完成透明化并落盘透明帧素材。
 - 素材库和项目资源 API 不返回独立 `mediaType`；前端只按 `assetKind` 映射渲染器：`character-animation → image-sequence`、`video → video`、`audio/sound-effect/background-music → audio`、其余 → image，不按扩展名猜类型。最终动作 asset / resource 平铺返回 `imageSequenceFrames/imageSequenceDurationMs`；正式帧对象不含 `frameIndex`，数组位置是唯一播放顺序，帧数取数组长度，FPS 按帧数与毫秒时长即时推导。只有至少两帧且播放时长大于 0 的角色动作素材才能进入序列播放器，否则按损坏素材失败关闭。预览视频作为独立 `assetKind=video` 资源保存，最终动作以 `sourceResourceId` 保留来源关系，不重复保存路径。从素材库点击、HTML5 拖放或指针拖放到画布时必须复制完整字段并先创建正式 project resource；新 layout 只保存 resource 引用和几何，不保存帧集或预览视频，刷新后从 project resource 恢复循环播放。历史 `local-*` 自包含动作布局仍可读取。
-- 素材面板支持按素材名、文件夹名、生成信息、用户可见模型、任务和媒体类型搜索，并支持选择模式框选。选择模式的选中集合以全部上传完成且媒体地址有效的可选素材为有效性边界，不因搜索、折叠或展开变化而收缩；只有素材被删除、进入上传中 / 失败态或媒体地址失效时才剔除对应选择及范围锚点。素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删当前已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
+- 素材面板支持按素材名、文件夹名、生成信息、用户可见模型、任务和媒体类型搜索，并支持选择模式框选。选择模式的选中集合以全部上传完成且媒体地址有效的可选素材为有效性边界，不因搜索、折叠或展开变化而收缩；只有素材被删除、进入上传中 / 失败态或媒体地址失效时才剔除对应选择及范围锚点。素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删当前已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。触摸素材卡仍可切换选中态，但触摸列表空白区必须继续滚动，不能捕获为框选；鼠标 / 笔框选坐标必须包含列表滚动偏移，`pointerup` 提交最后坐标，`pointercancel` 只取消。内置、上传未完成、上传失败或无可读来源的素材行不得暴露可用的选择按钮。退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
 - 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示跨搜索与折叠状态保留的全部已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；下载和删除作用于完整选中集合，不得只消费当前可见 ID。删除集合中存在当前未显示素材时，必须先用危险确认弹窗明确展示全部删除数量和未显示数量，确认前不得执行删除。工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。Provider 与 `isEditorInternalProcessingModel(...)` 识别的内部处理模型不得进入搜索索引，避免出现隐藏字段可命中或命中但无可见匹配字段；原始审计元数据只保留给服务端和后台管理读取，普通用户（包括素材 owner）不得通过响应取得。
 - 图层面板支持按图层名、生成信息、用户可见模型、任务和媒体类型搜索；Provider 与内部处理模型同样不得进入搜索索引。普通用户图层快照也不得携带这些内部字段。支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index 7e4c047a4..f0cfc07de 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -80,6 +80,9 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   onAssetMarqueePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueePointerCancel: (
+    event: ReactPointerEvent<HTMLDivElement>,
+  ) => void;
   onAssetMarqueeLostPointerCapture: (
     event: ReactPointerEvent<HTMLDivElement>,
   ) => void;
@@ -139,6 +142,7 @@ export function ImageCanvasAssetLibraryPanelView({
   onAssetMarqueePointerDown,
   onAssetMarqueePointerMove,
   onAssetMarqueePointerUp,
+  onAssetMarqueePointerCancel,
   onAssetMarqueeLostPointerCapture,
   updateAssetMoveDropFolder,
   addUploadedFiles,
@@ -194,7 +198,7 @@ export function ImageCanvasAssetLibraryPanelView({
         onPointerDown={onAssetMarqueePointerDown}
         onPointerMove={onAssetMarqueePointerMove}
         onPointerUp={onAssetMarqueePointerUp}
-        onPointerCancel={onAssetMarqueePointerUp}
+        onPointerCancel={onAssetMarqueePointerCancel}
         onLostPointerCapture={onAssetMarqueeLostPointerCapture}
       >
         {pinnedAssetMoveFolderId ? (
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
index 95557c41e..a75982c49 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
@@ -230,6 +230,22 @@ describe('ImageCanvasAssetRowView', () => {
     ).toBeNull();
   });
 
+  it('disables rows that are outside the shared selectable-asset boundary', () => {
+    const toggleAssetSelected = vi.fn();
+    renderAssetRow({
+      asset: createAsset({ sourceKind: 'built-in' }),
+      isAssetSelectionMode: true,
+      toggleAssetSelected,
+    });
+
+    const button = screen.getByRole('button', {
+      name: '素材账号素材A不可选择',
+    }) as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+    fireEvent.click(screen.getByText('账号素材A'));
+    expect(toggleAssetSelected).not.toHaveBeenCalled();
+  });
+
   it('forwards modifier keys to selection', () => {
     const toggleAssetSelected = vi.fn();
     renderAssetRow({ isAssetSelectionMode: true, toggleAssetSelected });
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index 5f401a839..a636a630e 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -29,7 +29,10 @@ import {
   getCanvasMediaPreviewClassName,
   getCanvasMediaPreviewMarker,
 } from './ImageCanvasMediaModel';
-import type { AssetSelectionInteraction } from './useImageCanvasAssetSelection';
+import {
+  type AssetSelectionInteraction,
+  isSelectableAsset,
+} from './useImageCanvasAssetSelection';
 
 const AUDIO_ASSET_COVER_SRC = '/creation-home/audio-asset-cover.png';
 
@@ -96,6 +99,7 @@ export function ImageCanvasAssetRowView({
   const isRenaming = renamingAsset?.assetId === asset.id;
   const isUploadingAsset = asset.uploadStatus === 'uploading';
   const isFailedUpload = asset.uploadStatus === 'failed';
+  const canSelectAsset = isSelectableAsset(asset);
   const showcaseReviewStatus = asset.showcaseReviewStatus ?? null;
   const showcaseSubmissionState = resolveAssetShowcaseSubmissionState(asset);
   const canSubmitShowcaseAsset = showcaseSubmissionState.canSubmit;
@@ -119,8 +123,7 @@ export function ImageCanvasAssetRowView({
       selectionPointerKindRef.current = 'keyboard';
       if (
         !isAssetSelectionMode ||
-        isUploadingAsset ||
-        isFailedUpload ||
+        !canSelectAsset ||
         suppressAssetClickRef.current
       ) {
         return;
@@ -136,10 +139,9 @@ export function ImageCanvasAssetRowView({
     },
     [
       asset.id,
+      canSelectAsset,
       closeMenu,
       isAssetSelectionMode,
-      isFailedUpload,
-      isUploadingAsset,
       suppressAssetClickRef,
       toggleAssetSelected,
       visibleAssetIds,
@@ -316,9 +318,12 @@ export function ImageCanvasAssetRowView({
             : isFailedUpload
               ? `上传失败${asset.label}`
               : isAssetSelectionMode
-                ? `选择素材${asset.label}`
+                ? canSelectAsset
+                  ? `选择素材${asset.label}`
+                  : `素材${asset.label}不可选择`
                 : `添加${asset.label}`
         }
+        primaryDisabled={isAssetSelectionMode && !canSelectAsset}
         onPrimaryClick={() => {
           if (isUploadingAsset || isFailedUpload) {
             return;
diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
index 27a7d5015..f1807447b 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
@@ -63,6 +63,7 @@ export type SidebarMediaItemProps = {
   imageAlt: string;
   selected?: boolean;
   primaryLabel: string;
+  primaryDisabled?: boolean;
   onPrimaryClick: MouseEventHandler<HTMLButtonElement>;
   thumbnailClassName: string;
   metaClassName: string;
@@ -91,6 +92,7 @@ export function SidebarMediaItem({
   imageAlt,
   selected = false,
   primaryLabel,
+  primaryDisabled = false,
   onPrimaryClick,
   thumbnailClassName,
   metaClassName,
@@ -127,6 +129,7 @@ export function SidebarMediaItem({
         className={primaryClassName}
         onClick={onPrimaryClick}
         aria-label={primaryLabel}
+        disabled={primaryDisabled}
         draggable={draggable}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 1eef39cb8..a5f337aa4 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -82,6 +82,7 @@ function createSidebarProps(): ImageCanvasSidebarViewProps {
     onAssetMarqueePointerDown: vi.fn(),
     onAssetMarqueePointerMove: vi.fn(),
     onAssetMarqueePointerUp: vi.fn(),
+    onAssetMarqueePointerCancel: vi.fn(),
     onAssetMarqueeLostPointerCapture: vi.fn(),
     updateAssetMoveDropFolder: vi.fn(),
     addUploadedFiles: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 309067b84..db34236d2 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -743,6 +743,7 @@ export function ImageCanvasEditorView({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueePointerCancel,
     handleAssetMarqueeLostPointerCapture,
     refreshAssetLibrary,
   } = useImageCanvasAssetLibrary({
@@ -2480,6 +2481,7 @@ export function ImageCanvasEditorView({
     onAssetMarqueePointerDown: handleAssetMarqueePointerDown,
     onAssetMarqueePointerMove: handleAssetMarqueePointerMove,
     onAssetMarqueePointerUp: handleAssetMarqueePointerUp,
+    onAssetMarqueePointerCancel: handleAssetMarqueePointerCancel,
     onAssetMarqueeLostPointerCapture: handleAssetMarqueeLostPointerCapture,
     updateAssetMoveDropFolder,
     addUploadedFiles,
diff --git a/src/components/image-editor/ImageCanvasSidebarView.test.tsx b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
index 02896397d..5522ba6dc 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
@@ -101,6 +101,7 @@ function createSidebarProps(
     onAssetMarqueePointerDown: vi.fn(),
     onAssetMarqueePointerMove: vi.fn(),
     onAssetMarqueePointerUp: vi.fn(),
+    onAssetMarqueePointerCancel: vi.fn(),
     onAssetMarqueeLostPointerCapture: vi.fn(),
     updateAssetMoveDropFolder: vi.fn(),
     addUploadedFiles: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasSidebarView.tsx b/src/components/image-editor/ImageCanvasSidebarView.tsx
index 00b613a6d..db8418cc4 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.tsx
@@ -76,6 +76,9 @@ export type ImageCanvasSidebarViewProps = {
   onAssetMarqueePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onAssetMarqueePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onAssetMarqueePointerCancel: (
+    event: ReactPointerEvent<HTMLDivElement>,
+  ) => void;
   onAssetMarqueeLostPointerCapture: (
     event: ReactPointerEvent<HTMLDivElement>,
   ) => void;
@@ -151,6 +154,7 @@ export function ImageCanvasSidebarView({
   onAssetMarqueePointerDown,
   onAssetMarqueePointerMove,
   onAssetMarqueePointerUp,
+  onAssetMarqueePointerCancel,
   onAssetMarqueeLostPointerCapture,
   updateAssetMoveDropFolder,
   addUploadedFiles,
@@ -339,6 +343,7 @@ export function ImageCanvasSidebarView({
           onAssetMarqueePointerDown={onAssetMarqueePointerDown}
           onAssetMarqueePointerMove={onAssetMarqueePointerMove}
           onAssetMarqueePointerUp={onAssetMarqueePointerUp}
+          onAssetMarqueePointerCancel={onAssetMarqueePointerCancel}
           onAssetMarqueeLostPointerCapture={onAssetMarqueeLostPointerCapture}
           updateAssetMoveDropFolder={updateAssetMoveDropFolder}
           addUploadedFiles={addUploadedFiles}
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index cfd16d8a3..d2a2b1969 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -74,6 +74,15 @@ function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
       >
         连续导出画布素材
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          void workflow.exportCanvasAssets();
+          void workflow.exportLayerImage(layers[0] ?? null);
+        }}
+      >
+        同时导出画布和单图
+      </button>
       <button
         type="button"
         onClick={() => workflow.exportLayerImage(layers[0] ?? null)}
@@ -301,6 +310,115 @@ describe('useImageCanvasAssetExportWorkflow', () => {
     }
   });
 
+  it('uses the same mutex for collection and direct layer exports', async () => {
+    const originalFetch = globalThis.fetch;
+    let resolveFetch: (response: Response) => void = () => {};
+    const fetchMock = vi.fn(
+      () =>
+        new Promise<Response>((resolve) => {
+          resolveFetch = resolve;
+        }),
+    );
+    globalThis.fetch = fetchMock as typeof fetch;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn(() => 'blob:shared-mutex-export'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[createLayer('slow-export', { src: '/slow-export.png' })]}
+        />,
+      );
+
+      fireEvent.click(
+        screen.getByRole('button', { name: '同时导出画布和单图' }),
+      );
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      resolveFetch(new Response(new Blob(['image'], { type: 'image/png' })));
+      await waitFor(() => {
+        expect(screen.getByTestId('status').textContent).toBe(
+          'success:画布素材已导出',
+        );
+      });
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+    } finally {
+      globalThis.fetch = originalFetch;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
+  it('exports frame-only image sequences from selected and canvas entry points', async () => {
+    const downloads: Array<{ blob: Blob; name: string }> = [];
+    let currentBlob: Blob | null = null;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn((blob: Blob) => {
+        currentBlob = blob;
+        return `blob:frame-only-${downloads.length}`;
+      }),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(
+      function click(this: HTMLAnchorElement) {
+        if (currentBlob) {
+          downloads.push({ blob: currentBlob, name: this.download });
+        }
+      },
+    );
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[
+            createLayer('frame-only-sequence', {
+              title: '仅帧序列',
+              src: '',
+              objectKey: null,
+              mediaType: 'image-sequence',
+              imageSequenceFrames: [
+                {
+                  imageSrc: 'data:image/png;base64,c2VxdWVuY2U=',
+                  width: 100,
+                  height: 80,
+                },
+              ],
+            }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '下载一个选中素材' }));
+      await waitFor(() => expect(downloads).toHaveLength(1));
+      expect(downloads[0]?.name).toMatch(
+        /^仅帧序列-SpineJSON-\d{8}-\d{6}\.zip$/u,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '导出画布素材' }));
+      await waitFor(() => expect(downloads).toHaveLength(2));
+      const zip = await JSZip.loadAsync(downloads[1]!.blob);
+      expect(
+        zip.file(
+          '导出项目-画布素材/sequences/001-仅帧序列/frames/frame-01.png',
+        ),
+      ).toBeTruthy();
+    } finally {
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
   it('reads layers and sequence frames with bounded concurrency and stable zip order', async () => {
     const originalFetch = globalThis.fetch;
     const pendingResponses = new Map<string, () => void>();
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index b4e4b6e03..b123e19fb 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -41,6 +41,15 @@ type UseImageCanvasAssetExportWorkflowOptions = {
 const GIF_PREVIEW_MAX_EDGE = 320;
 const ASSET_EXPORT_READ_CONCURRENCY = 4;
 
+function hasReadableLayerExportSource(layer: CanvasLayer) {
+  if (layer.mediaType === 'image-sequence') {
+    return getLayerImageSequenceFrames(layer).some((frame) =>
+      hasReadableAssetSource(frame.imageSrc, frame.objectKey),
+    );
+  }
+  return hasReadableAssetSource(layer.src, layer.objectKey);
+}
+
 type AssetExportPlan = {
   key: string;
   layer: CanvasLayer;
@@ -341,7 +350,7 @@ export function useImageCanvasAssetExportWorkflow({
   const [isExportingAssets, setIsExportingAssets] = useState(false);
   const isExportingAssetsRef = useRef(false);
 
-  const exportLayerImage = useCallback(
+  const exportLayerImageUnlocked = useCallback(
     async (
       layer: CanvasLayer | null,
       options: { mode?: ImageSequenceExportMode } = {},
@@ -408,6 +417,27 @@ export function useImageCanvasAssetExportWorkflow({
     [],
   );
 
+  const exportLayerImage = useCallback(
+    async (
+      layer: CanvasLayer | null,
+      options: { mode?: ImageSequenceExportMode } = {},
+    ) => {
+      if (!layer || isExportingAssetsRef.current) {
+        return false;
+      }
+      isExportingAssetsRef.current = true;
+      setIsExportingAssets(true);
+      setAssetExportStatus(null);
+      try {
+        return await exportLayerImageUnlocked(layer, options);
+      } finally {
+        isExportingAssetsRef.current = false;
+        setIsExportingAssets(false);
+      }
+    },
+    [exportLayerImageUnlocked],
+  );
+
   const exportAssetCollection = useCallback(
     async ({
       targetLayers,
@@ -424,7 +454,7 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
       const exportableLayers = targetLayers
-        .filter((layer) => hasReadableAssetSource(layer.src, layer.objectKey))
+        .filter(hasReadableLayerExportSource)
         .sort((left, right) => left.zIndex - right.zIndex);
       if (!exportableLayers.length) {
         setAssetExportStatus({
@@ -764,8 +794,8 @@ export function useImageCanvasAssetExportWorkflow({
       if (isExportingAssetsRef.current) {
         return;
       }
-      const exportableLayers = selectedLayers.filter((layer) =>
-        hasReadableAssetSource(layer.src, layer.objectKey),
+      const exportableLayers = selectedLayers.filter(
+        hasReadableLayerExportSource,
       );
       if (!exportableLayers.length) {
         setAssetExportStatus({
@@ -775,22 +805,12 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
       if (exportableLayers.length === 1) {
-        isExportingAssetsRef.current = true;
-        setIsExportingAssets(true);
-        setAssetExportStatus(null);
-        try {
-          const downloaded = await exportLayerImage(
-            exportableLayers[0] ?? null,
-          );
-          if (downloaded) {
-            setAssetExportStatus({
-              tone: 'success',
-              message: '选中素材已导出',
-            });
-          }
-        } finally {
-          isExportingAssetsRef.current = false;
-          setIsExportingAssets(false);
+        const downloaded = await exportLayerImage(exportableLayers[0] ?? null);
+        if (downloaded) {
+          setAssetExportStatus({
+            tone: 'success',
+            message: '选中素材已导出',
+          });
         }
         return;
       }
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index caf474b7e..dd73b84e6 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -139,6 +139,7 @@ export function useImageCanvasAssetLibrary({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueePointerCancel,
     handleAssetMarqueeLostPointerCapture,
   } = useImageCanvasAssetSelection({
     assetListRef,
@@ -544,6 +545,7 @@ export function useImageCanvasAssetLibrary({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueePointerCancel,
     handleAssetMarqueeLostPointerCapture,
     refreshAssetLibrary,
   };
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
index 8e4c9eba5..f353c6772 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetSelection.test.tsx
@@ -115,6 +115,41 @@ describe('useImageCanvasAssetSelection', () => {
     ]).toEqual(['asset-a', 'asset-b', 'object-key-only']);
   });
 
+  it('keeps marquee geometry aligned with a scrolling asset list', () => {
+    const container = { scrollLeft: 40, scrollTop: 60 };
+    const marquee = createAssetMarqueeFromPointer({
+      pointerId: 9,
+      point: { clientX: 180, clientY: 220 },
+      containerRect: { left: 100, top: 200 },
+      container,
+    });
+    expect(marquee).toMatchObject({
+      startX: 120,
+      startY: 80,
+      currentX: 120,
+      currentY: 80,
+    });
+
+    container.scrollLeft = 50;
+    container.scrollTop = 70;
+    expect(
+      moveAssetMarqueeToPointer({
+        marquee,
+        point: { clientX: 120, clientY: 205 },
+        containerRect: { left: 100, top: 200 },
+        container,
+      }),
+    ).toMatchObject({ currentX: 70, currentY: 75 });
+    expect(
+      createAssetMarqueeSelectionRect({
+        marquee,
+        point: { clientX: 120, clientY: 205 },
+        containerRect: { left: 100, top: 200 },
+        container,
+      }),
+    ).toEqual({ left: 120, right: 170, top: 205, bottom: 210 });
+  });
+
   it('supports click, shift and select-all for object-key-only assets', () => {
     const assets = [
       createAsset({
@@ -288,6 +323,105 @@ describe('useImageCanvasAssetSelection', () => {
     expect(result.current.selectedAssetIds.size).toBe(0);
   });
 
+  it('leaves touch background gestures available for list scrolling', () => {
+    const assetList = document.createElement('div');
+    const setPointerCapture = vi.fn();
+    Object.assign(assetList, { setPointerCapture });
+    const { result } = renderHook(() =>
+      useImageCanvasAssetSelection({
+        assetListRef: { current: assetList },
+        assets: [createAsset()],
+      }),
+    );
+    const preventDefault = vi.fn();
+
+    act(() => result.current.openAssetSelectionMode());
+    act(() =>
+      result.current.handleAssetMarqueePointerDown({
+        target: assetList,
+        pointerType: 'touch',
+        button: 0,
+        pointerId: 3,
+        clientX: 10,
+        clientY: 20,
+        ctrlKey: false,
+        metaKey: false,
+        preventDefault,
+      } as unknown as ReactPointerEvent<HTMLDivElement>),
+    );
+
+    expect(result.current.assetMarquee).toBeNull();
+    expect(preventDefault).not.toHaveBeenCalled();
+    expect(setPointerCapture).not.toHaveBeenCalled();
+  });
+
+  it('commits the pointer-up endpoint but not a cancelled marquee', () => {
+    const assetList = document.createElement('div');
+    const assetTarget = document.createElement('div');
+    assetTarget.dataset.assetId = 'asset-a';
+    assetTarget.getBoundingClientRect = () =>
+      ({ left: 40, right: 50, top: 40, bottom: 50 }) as DOMRect;
+    assetList.appendChild(assetTarget);
+    assetList.getBoundingClientRect = () =>
+      ({ left: 0, right: 100, top: 0, bottom: 100 }) as DOMRect;
+    Object.assign(assetList, {
+      setPointerCapture: vi.fn(),
+      hasPointerCapture: vi.fn(() => true),
+      releasePointerCapture: vi.fn(),
+    });
+    const { result } = renderHook(() =>
+      useImageCanvasAssetSelection({
+        assetListRef: { current: assetList },
+        assets: [createAsset()],
+      }),
+    );
+    const pointerDown = (pointerId: number) =>
+      result.current.handleAssetMarqueePointerDown({
+        target: assetList,
+        pointerType: 'mouse',
+        button: 0,
+        pointerId,
+        clientX: 10,
+        clientY: 10,
+        ctrlKey: false,
+        metaKey: false,
+        preventDefault: vi.fn(),
+      } as unknown as ReactPointerEvent<HTMLDivElement>);
+
+    act(() => result.current.openAssetSelectionMode());
+    act(() => pointerDown(4));
+    act(() =>
+      result.current.handleAssetMarqueePointerUp({
+        pointerId: 4,
+        clientX: 50,
+        clientY: 50,
+        preventDefault: vi.fn(),
+      } as unknown as ReactPointerEvent<HTMLDivElement>),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual(['asset-a']);
+    expect(result.current.assetMarquee).toBeNull();
+
+    act(() => pointerDown(5));
+    act(() =>
+      result.current.handleAssetMarqueePointerMove({
+        pointerId: 5,
+        clientX: 50,
+        clientY: 50,
+        preventDefault: vi.fn(),
+      } as unknown as ReactPointerEvent<HTMLDivElement>),
+    );
+    expect([...result.current.selectedAssetIds]).toEqual(['asset-a']);
+    act(() =>
+      result.current.handleAssetMarqueePointerCancel({
+        pointerId: 5,
+        clientX: 50,
+        clientY: 50,
+      } as unknown as ReactPointerEvent<HTMLDivElement>),
+    );
+    expect(result.current.selectedAssetIds.size).toBe(0);
+    expect(result.current.assetMarquee).toBeNull();
+  });
+
   it('clears only the matching marquee when pointer capture is lost', () => {
     const assetList = document.createElement('div');
     const releasePointerCapture = vi.fn();
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.ts b/src/components/image-editor/useImageCanvasAssetSelection.ts
index c94a0a45b..5464d7010 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.ts
+++ b/src/components/image-editor/useImageCanvasAssetSelection.ts
@@ -15,6 +15,8 @@ type ClientPoint = {
   clientY: number;
 };
 
+type ScrollContainerLike = Pick<HTMLElement, 'scrollLeft' | 'scrollTop'>;
+
 type AssetHitTarget = {
   assetId: string;
   rect: ClientRectLike;
@@ -35,16 +37,19 @@ type AssetSelectionState = {
   anchorAssetId: string | null;
 };
 
-export function getSelectableAssets(assets: EditorAsset[]) {
-  return assets.filter(
-    (asset) =>
-      asset.sourceKind === 'uploaded' &&
-      asset.uploadStatus !== 'uploading' &&
-      asset.uploadStatus !== 'failed' &&
-      hasReadableAssetSource(asset.src, asset.objectKey),
+export function isSelectableAsset(asset: EditorAsset) {
+  return (
+    asset.sourceKind === 'uploaded' &&
+    asset.uploadStatus !== 'uploading' &&
+    asset.uploadStatus !== 'failed' &&
+    hasReadableAssetSource(asset.src, asset.objectKey)
   );
 }
 
+export function getSelectableAssets(assets: EditorAsset[]) {
+  return assets.filter(isSelectableAsset);
+}
+
 export function countHiddenSelectedAssets(
   selectedAssetIds: Set<string>,
   visibleAssetIds: string[],
@@ -79,13 +84,17 @@ export function createAssetMarqueeFromPointer({
   pointerId,
   point,
   containerRect,
+  container,
 }: {
   pointerId: number;
   point: ClientPoint;
   containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
+  container?: ScrollContainerLike | null;
 }): AssetMarqueeState {
-  const startX = point.clientX - (containerRect?.left ?? 0);
-  const startY = point.clientY - (containerRect?.top ?? 0);
+  const startX =
+    point.clientX - (containerRect?.left ?? 0) + (container?.scrollLeft ?? 0);
+  const startY =
+    point.clientY - (containerRect?.top ?? 0) + (container?.scrollTop ?? 0);
   return {
     pointerId,
     startX,
@@ -99,15 +108,19 @@ export function moveAssetMarqueeToPointer({
   marquee,
   point,
   containerRect,
+  container,
 }: {
   marquee: AssetMarqueeState;
   point: ClientPoint;
   containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
+  container?: ScrollContainerLike | null;
 }) {
   return {
     ...marquee,
-    currentX: point.clientX - (containerRect?.left ?? 0),
-    currentY: point.clientY - (containerRect?.top ?? 0),
+    currentX:
+      point.clientX - (containerRect?.left ?? 0) + (container?.scrollLeft ?? 0),
+    currentY:
+      point.clientY - (containerRect?.top ?? 0) + (container?.scrollTop ?? 0),
   };
 }
 
@@ -115,13 +128,17 @@ export function createAssetMarqueeSelectionRect({
   marquee,
   point,
   containerRect,
+  container,
 }: {
   marquee: AssetMarqueeState;
   point: ClientPoint;
   containerRect: Pick<DOMRect, 'left' | 'top'> | null | undefined;
+  container?: ScrollContainerLike | null;
 }): ClientRectLike {
-  const startClientX = (containerRect?.left ?? 0) + marquee.startX;
-  const startClientY = (containerRect?.top ?? 0) + marquee.startY;
+  const startClientX =
+    (containerRect?.left ?? 0) + marquee.startX - (container?.scrollLeft ?? 0);
+  const startClientY =
+    (containerRect?.top ?? 0) + marquee.startY - (container?.scrollTop ?? 0);
   return {
     left: Math.min(startClientX, point.clientX),
     right: Math.max(startClientX, point.clientX),
@@ -362,6 +379,7 @@ export function useImageCanvasAssetSelection({
     (event: ReactPointerEvent<HTMLDivElement>) => {
       const target = event.target as HTMLElement;
       if (
+        event.pointerType === 'touch' ||
         !shouldStartAssetMarquee({
           isAssetSelectionMode,
           button: event.button,
@@ -373,12 +391,14 @@ export function useImageCanvasAssetSelection({
         return;
       }
       event.preventDefault();
-      assetListRef.current?.setPointerCapture?.(event.pointerId);
+      const container = assetListRef.current;
+      container?.setPointerCapture?.(event.pointerId);
       setAssetMarquee(
         createAssetMarqueeFromPointer({
           pointerId: event.pointerId,
           point: event,
-          containerRect: assetListRef.current?.getBoundingClientRect(),
+          containerRect: container?.getBoundingClientRect(),
+          container,
         }),
       );
       marqueeBaseSelectionRef.current =
@@ -399,13 +419,15 @@ export function useImageCanvasAssetSelection({
         return;
       }
       event.preventDefault();
-      const containerRect = assetListRef.current?.getBoundingClientRect();
+      const container = assetListRef.current;
+      const containerRect = container?.getBoundingClientRect();
       setAssetMarquee((currentMarquee) =>
         currentMarquee
           ? moveAssetMarqueeToPointer({
               marquee: currentMarquee,
               point: event,
               containerRect,
+              container,
             })
           : null,
       );
@@ -414,6 +436,7 @@ export function useImageCanvasAssetSelection({
           marquee: assetMarquee,
           point: event,
           containerRect,
+          container,
         }),
       );
     },
@@ -426,11 +449,37 @@ export function useImageCanvasAssetSelection({
         return;
       }
       event.preventDefault();
+      const container = assetListRef.current;
+      updateAssetSelectionFromMarquee(
+        createAssetMarqueeSelectionRect({
+          marquee: assetMarquee,
+          point: event,
+          containerRect: container?.getBoundingClientRect(),
+          container,
+        }),
+      );
       if (assetListRef.current?.hasPointerCapture?.(event.pointerId)) {
         assetListRef.current.releasePointerCapture?.(event.pointerId);
       }
       setAssetMarquee(null);
     },
+    [assetListRef, assetMarquee, updateAssetSelectionFromMarquee],
+  );
+
+  const handleAssetMarqueePointerCancel = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!assetMarquee || assetMarquee.pointerId !== event.pointerId) {
+        return;
+      }
+      if (assetListRef.current?.hasPointerCapture?.(event.pointerId)) {
+        assetListRef.current.releasePointerCapture?.(event.pointerId);
+      }
+      setAssetSelection({
+        selectedAssetIds: new Set(marqueeBaseSelectionRef.current),
+        anchorAssetId: null,
+      });
+      setAssetMarquee(null);
+    },
     [assetListRef, assetMarquee],
   );
 
@@ -457,6 +506,7 @@ export function useImageCanvasAssetSelection({
     handleAssetMarqueePointerDown,
     handleAssetMarqueePointerMove,
     handleAssetMarqueePointerUp,
+    handleAssetMarqueePointerCancel,
     handleAssetMarqueeLostPointerCapture,
   };
 }
-- 
2.52.0


From f4131c0421928bd1204694af14d655a5cf3b98f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 7 Aug 2026 13:17:33 +0800
Subject: [PATCH 23/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=A8=A1=E5=BC=8F=E4=BA=A4=E4=BA=92=E8=BE=B9?=
 =?UTF-8?q?=E7=95=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

阻断选择模式下的素材移动与外部文件投放并清理拖拽状态
固定隐藏素材删除确认目标并在选择范围漂移时关闭弹窗
收敛选择交互契约与素材行标签分支
修正短视口侧栏高度并补充定向回归测试和文档
---
 ...架构】图片画布编辑器MVP接入方案-2026-06-11.md |  2 +-
 .../ImageCanvasAssetFolderSectionView.tsx     | 23 ++++++
 .../ImageCanvasAssetLibraryPanelView.tsx      | 62 +++++++++++++---
 .../ImageCanvasAssetRowView.test.tsx          | 57 +++++++++------
 .../image-editor/ImageCanvasAssetRowView.tsx  | 64 ++++++++++------
 ...mageCanvasEditorAssetsIntegration.test.tsx | 73 ++++++++++++++++++-
 .../image-editor/ImageCanvasEditorView.tsx    |  2 +
 .../image-editor/ImageCanvasSidebarView.tsx   |  2 +-
 .../useImageCanvasAssetLibrary.test.tsx       | 12 +--
 .../useImageCanvasAssetLibrary.ts             | 49 +++++++++----
 .../useImageCanvasAssetSelection.ts           |  5 --
 src/index.css                                 |  4 +-
 src/index.test.ts                             | 18 +++++
 13 files changed, 283 insertions(+), 90 deletions(-)

diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index 782eab873..6294904d4 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -200,7 +200,7 @@
 - `生成角色动作` 的完成结果按序列帧素材处理：`assetKind` 固定为 `character-animation`，图层主 `src` 使用首帧，前端内部据 `assetKind` 派生 `CanvasMediaType="image-sequence"` 选择播放器。`previewVideoPath` 只作为上游来源，不作为画布主媒体。下载和 ZIP 导出必须得到序列帧 ZIP / frames 目录，不能回退为预览视频或首帧 PNG；后端抽帧后逐帧保存带绿幕源图，上传时消费并释放原帧字节，再用该对象的 600 秒 OSS URL 完成透明化并落盘透明帧素材。
 - 素材库和项目资源 API 不返回独立 `mediaType`；前端只按 `assetKind` 映射渲染器：`character-animation → image-sequence`、`video → video`、`audio/sound-effect/background-music → audio`、其余 → image，不按扩展名猜类型。最终动作 asset / resource 平铺返回 `imageSequenceFrames/imageSequenceDurationMs`；正式帧对象不含 `frameIndex`，数组位置是唯一播放顺序，帧数取数组长度，FPS 按帧数与毫秒时长即时推导。只有至少两帧且播放时长大于 0 的角色动作素材才能进入序列播放器，否则按损坏素材失败关闭。预览视频作为独立 `assetKind=video` 资源保存，最终动作以 `sourceResourceId` 保留来源关系，不重复保存路径。从素材库点击、HTML5 拖放或指针拖放到画布时必须复制完整字段并先创建正式 project resource；新 layout 只保存 resource 引用和几何，不保存帧集或预览视频，刷新后从 project resource 恢复循环播放。历史 `local-*` 自包含动作布局仍可读取。
 - 素材面板支持按素材名、文件夹名、生成信息、用户可见模型、任务和媒体类型搜索，并支持选择模式框选。选择模式的选中集合以全部上传完成且媒体地址有效的可选素材为有效性边界，不因搜索、折叠或展开变化而收缩；只有素材被删除、进入上传中 / 失败态或媒体地址失效时才剔除对应选择及范围锚点。素材缩略图、标题、元数据和卡片空白区统一作为整行选择命中区：鼠标、键盘、触摸和笔输入单击都只切换当前素材，不替换其它已选素材；`Shift + 点击` 按当前可见顺序把连续区间增量加入现有选择，锚点当前不可见时退化为切换目标素材并建立新锚点。当前搜索结果的全选 / 取消全选只增量增删当前已展开的可见素材并保留其它选择，同时清空上次单项选择的范围锚点。触摸素材卡仍可切换选中态，但触摸列表空白区必须继续滚动，不能捕获为框选；鼠标 / 笔框选坐标必须包含列表滚动偏移，`pointerup` 提交最后坐标，`pointercancel` 只取消。内置、上传未完成、上传失败或无可读来源的素材行不得暴露可用的选择按钮。退出选择模式、关闭素材栏或切换到图层栏时必须同时清空选择锚点、选中集合和框选状态，非选择模式不得残留选中高亮。
-- 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示跨搜索与折叠状态保留的全部已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；下载和删除作用于完整选中集合，不得只消费当前可见 ID。删除集合中存在当前未显示素材时，必须先用危险确认弹窗明确展示全部删除数量和未显示数量，确认前不得执行删除。工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，不得沿用普通模式 `14rem` 上限压扁列表。选择模式隐藏单素材下载 / 重命名动作并禁用素材拖拽和右键菜单，避免批量意图回退成单素材操作。Provider 与 `isEditorInternalProcessingModel(...)` 识别的内部处理模型不得进入搜索索引，避免出现隐藏字段可命中或命中但无可见匹配字段；原始审计元数据只保留给服务端和后台管理读取，普通用户（包括素材 owner）不得通过响应取得。
+- 素材选择模式的批量工具栏是素材列表滚动区之外的固定底栏，始终显示跨搜索与折叠状态保留的全部已选数量、当前可见素材全选 / 取消全选、下载、删除和取消；下载和删除作用于完整选中集合，不得只消费当前可见 ID。删除集合中存在当前未显示素材时，必须先用危险确认弹窗明确展示全部删除数量和未显示数量，确认目标使用打开弹窗时的素材 ID 快照；选择集合、可见集合或选择模式漂移后关闭旧确认弹窗，确认前不得执行删除。工具栏自身禁止横向溢出和滚动，空间不足时按钮在工具栏内部换行。不得把工具栏作为滚动列表末项或依赖 `position: sticky` 的自然位置。移动端进入素材选择模式时必须提高素材侧栏高度并允许素材列表纵向滚动，为固定底栏之上至少保留一张素材卡的可操作空间，同时受当前视口高度上限约束，不得在横屏或嵌入式短视口中挤占画布。选择模式隐藏单素材下载 / 重命名动作，进入时清理已有拖拽 / 投放状态，并同时阻断素材行、文件夹空白区的内部素材移动和外部文件投放以及右键菜单，避免批量意图回退成单素材操作。Provider 与 `isEditorInternalProcessingModel(...)` 识别的内部处理模型不得进入搜索索引，避免出现隐藏字段可命中或命中但无可见匹配字段；原始审计元数据只保留给服务端和后台管理读取，普通用户（包括素材 owner）不得通过响应取得。
 - 图层面板支持按图层名、生成信息、用户可见模型、任务和媒体类型搜索；Provider 与内部处理模型同样不得进入搜索索引。普通用户图层快照也不得携带这些内部字段。支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
 - 鼠标滚轮默认按设备原始 `deltaX / deltaY` 二维平移画布视口；当按住 Shift 且设备上报 `deltaX = 0` 时，视口输入适配层把 `deltaY` 映射为横向位移并将纵向位移置零，核心平移模型仍只消费归一化后的 X / Y。按住 Ctrl / Cmd 滚轮才缩放画布，并阻止浏览器页面缩放。缩放比例显示保持现有换算口径，最低可缩小到 `5%`。
diff --git a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
index cfd562459..392b8900f 100644
--- a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
@@ -117,6 +117,17 @@ export function ImageCanvasAssetFolderSectionView({
       aria-label={folder.label}
       data-asset-folder-id={folder.id}
       onDragOver={(event) => {
+        if (isAssetSelectionMode) {
+          if (
+            hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE) ||
+            hasDataTransferType(event.dataTransfer, 'Files')
+          ) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.dataTransfer.dropEffect = 'none';
+          }
+          return;
+        }
         if (hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE)) {
           event.preventDefault();
           event.stopPropagation();
@@ -133,6 +144,18 @@ export function ImageCanvasAssetFolderSectionView({
         }
       }}
       onDrop={(event) => {
+        if (isAssetSelectionMode) {
+          if (
+            getDraggedAssetId(event.dataTransfer) ||
+            event.dataTransfer.files.length > 0
+          ) {
+            event.preventDefault();
+            event.stopPropagation();
+            setUploadDropTarget(null);
+            updateAssetMoveDropFolder(null);
+          }
+          return;
+        }
         const movingAssetId = getDraggedAssetId(event.dataTransfer);
         if (movingAssetId) {
           event.preventDefault();
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index f0cfc07de..ac8d673b8 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -13,7 +13,7 @@ import type {
   RefObject,
   SetStateAction,
 } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
@@ -110,7 +110,7 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   onDownloadAsset: (asset: EditorAsset) => void;
   toggleAllAssetsSelected: (visibleAssetIds: string[]) => void;
   downloadSelectedAssets: () => void | Promise<void>;
-  deleteSelectedAssets: () => void;
+  deleteSelectedAssets: (assetIds?: ReadonlySet<string>) => void;
   closeAssetSelectionMode: () => void;
 };
 
@@ -165,10 +165,12 @@ export function ImageCanvasAssetLibraryPanelView({
   deleteSelectedAssets,
   closeAssetSelectionMode,
 }: ImageCanvasAssetLibraryPanelViewProps) {
-  const [
-    hiddenSelectionDeleteConfirmOpen,
-    setHiddenSelectionDeleteConfirmOpen,
-  ] = useState(false);
+  const [hiddenSelectionDeleteSnapshot, setHiddenSelectionDeleteSnapshot] =
+    useState<{
+      assetIds: Set<string>;
+      visibleAssetIds: string[];
+      hiddenAssetCount: number;
+    } | null>(null);
   let selectionToggleActionText = '全选';
   if (allVisibleAssetsSelected) {
     selectionToggleActionText = '取消全选';
@@ -182,9 +184,42 @@ export function ImageCanvasAssetLibraryPanelView({
     visibleAssetIds,
   );
 
+  useEffect(() => {
+    if (!hiddenSelectionDeleteSnapshot) {
+      return;
+    }
+    const selectedIdsUnchanged =
+      hiddenSelectionDeleteSnapshot.assetIds.size === selectedAssetIds.size &&
+      [...hiddenSelectionDeleteSnapshot.assetIds].every((assetId) =>
+        selectedAssetIds.has(assetId),
+      );
+    const visibleIdsUnchanged =
+      hiddenSelectionDeleteSnapshot.visibleAssetIds.length ===
+        visibleAssetIds.length &&
+      hiddenSelectionDeleteSnapshot.visibleAssetIds.every(
+        (assetId, index) => assetId === visibleAssetIds[index],
+      );
+    if (
+      !isAssetSelectionMode ||
+      !selectedIdsUnchanged ||
+      !visibleIdsUnchanged
+    ) {
+      setHiddenSelectionDeleteSnapshot(null);
+    }
+  }, [
+    hiddenSelectionDeleteSnapshot,
+    isAssetSelectionMode,
+    selectedAssetIds,
+    visibleAssetIds,
+  ]);
+
   const requestDeleteSelectedAssets = () => {
     if (hiddenSelectedAssetCount > 0) {
-      setHiddenSelectionDeleteConfirmOpen(true);
+      setHiddenSelectionDeleteSnapshot({
+        assetIds: new Set(selectedAssetIds),
+        visibleAssetIds: [...visibleAssetIds],
+        hiddenAssetCount: hiddenSelectedAssetCount,
+      });
       return;
     }
     deleteSelectedAssets();
@@ -351,14 +386,17 @@ export function ImageCanvasAssetLibraryPanelView({
         </PlatformBatchActionToolbar>
       ) : null}
       <PlatformDangerConfirmDialog
-        open={hiddenSelectionDeleteConfirmOpen}
+        open={isAssetSelectionMode && hiddenSelectionDeleteSnapshot !== null}
         title="删除全部已选素材"
-        description={`将删除 ${selectedAssetIds.size} 个已选素材，其中 ${hiddenSelectedAssetCount} 个当前未显示。`}
+        description={`将删除 ${hiddenSelectionDeleteSnapshot?.assetIds.size ?? 0} 个已选素材，其中 ${hiddenSelectionDeleteSnapshot?.hiddenAssetCount ?? 0} 个当前未显示。`}
         confirmLabel="确认删除全部已选素材"
-        onClose={() => setHiddenSelectionDeleteConfirmOpen(false)}
+        onClose={() => setHiddenSelectionDeleteSnapshot(null)}
         onConfirm={() => {
-          setHiddenSelectionDeleteConfirmOpen(false);
-          deleteSelectedAssets();
+          const targetAssetIds = hiddenSelectionDeleteSnapshot?.assetIds;
+          setHiddenSelectionDeleteSnapshot(null);
+          if (targetAssetIds) {
+            deleteSelectedAssets(targetAssetIds);
+          }
         }}
       >
         删除后不可恢复。
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
index a75982c49..cb5244150 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
@@ -220,9 +220,6 @@ describe('ImageCanvasAssetRowView', () => {
     expect(toggleAssetSelected).toHaveBeenCalledWith('asset-1', {
       visibleAssetIds: ['asset-1'],
       shiftKey: false,
-      ctrlKey: false,
-      metaKey: false,
-      pointerKind: 'keyboard',
     });
     expect(addAssetLayer).not.toHaveBeenCalled();
     expect(
@@ -246,7 +243,7 @@ describe('ImageCanvasAssetRowView', () => {
     expect(toggleAssetSelected).not.toHaveBeenCalled();
   });
 
-  it('forwards modifier keys to selection', () => {
+  it('forwards only the shift modifier used by selection semantics', () => {
     const toggleAssetSelected = vi.fn();
     renderAssetRow({ isAssetSelectionMode: true, toggleAssetSelected });
     fireEvent.click(screen.getByText('账号素材A'), {
@@ -254,30 +251,42 @@ describe('ImageCanvasAssetRowView', () => {
       shiftKey: true,
     });
 
-    expect(toggleAssetSelected).toHaveBeenCalledWith(
-      'asset-1',
-      expect.objectContaining({
-        ctrlKey: true,
-        shiftKey: true,
-        pointerKind: 'keyboard',
-      }),
-    );
+    expect(toggleAssetSelected).toHaveBeenCalledWith('asset-1', {
+      visibleAssetIds: ['asset-1'],
+      shiftKey: true,
+    });
   });
 
-  it('uses click detail to recognize keyboard selection after a stale touch gesture', () => {
-    const toggleAssetSelected = vi.fn();
-    renderAssetRow({ isAssetSelectionMode: true, toggleAssetSelected });
-    const primaryButton = screen.getByRole('button', {
-      name: '选择素材账号素材A',
+  it('blocks internal moves and external file drops in selection mode', () => {
+    const { container, props } = renderAssetRow({
+      isAssetSelectionMode: true,
     });
-
-    fireEvent.pointerDown(primaryButton, { pointerType: 'touch' });
-    fireEvent.click(primaryButton, { detail: 0 });
-
-    expect(toggleAssetSelected).toHaveBeenCalledWith(
-      'asset-1',
-      expect.objectContaining({ pointerKind: 'keyboard' }),
+    const row = container.querySelector<HTMLElement>(
+      '[data-asset-id="asset-1"]',
     );
+    if (!row) {
+      throw new Error('asset row should exist');
+    }
+    const fileTransfer = {
+      types: ['Files'],
+      files: [new File(['image'], '新增素材.png', { type: 'image/png' })],
+      dropEffect: 'copy',
+      getData: vi.fn(() => ''),
+    };
+    fireEvent.dragOver(row, { dataTransfer: fileTransfer });
+    fireEvent.drop(row, { dataTransfer: fileTransfer });
+
+    const assetTransfer = {
+      types: ['application/x-genarrative-editor-asset'],
+      files: [],
+      dropEffect: 'move',
+      getData: vi.fn(() => 'asset-other'),
+    };
+    fireEvent.dragOver(row, { dataTransfer: assetTransfer });
+    fireEvent.drop(row, { dataTransfer: assetTransfer });
+
+    expect(props.addUploadedFiles).not.toHaveBeenCalled();
+    expect(props.moveAssetToFolder).not.toHaveBeenCalled();
   });
 
   it('renders rename input and commits with Enter', () => {
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index a636a630e..77441bcf0 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -90,8 +90,6 @@ export function ImageCanvasAssetRowView({
   onDownloadAsset,
 }: ImageCanvasAssetRowViewProps) {
   const rowRef = useRef<HTMLDivElement | null>(null);
-  const selectionPointerKindRef =
-    useRef<AssetSelectionInteraction['pointerKind']>('keyboard');
   const [menuPosition, setMenuPosition] = useState<{
     x: number;
     y: number;
@@ -118,9 +116,6 @@ export function ImageCanvasAssetRowView({
 
   const selectAssetFromEvent = useCallback(
     (event: ReactMouseEvent<HTMLElement>) => {
-      const pointerKind =
-        event.detail === 0 ? 'keyboard' : selectionPointerKindRef.current;
-      selectionPointerKindRef.current = 'keyboard';
       if (
         !isAssetSelectionMode ||
         !canSelectAsset ||
@@ -132,9 +127,6 @@ export function ImageCanvasAssetRowView({
       toggleAssetSelected(asset.id, {
         visibleAssetIds,
         shiftKey: event.shiftKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        pointerKind,
       });
     },
     [
@@ -211,6 +203,16 @@ export function ImageCanvasAssetRowView({
         <Video className="h-5 w-5" />
       </div>
     ) : undefined;
+  let primaryLabel = `添加${asset.label}`;
+  if (isUploadingAsset) {
+    primaryLabel = `上传中${asset.label}`;
+  } else if (isFailedUpload) {
+    primaryLabel = `上传失败${asset.label}`;
+  } else if (isAssetSelectionMode) {
+    primaryLabel = canSelectAsset
+      ? `选择素材${asset.label}`
+      : `素材${asset.label}不可选择`;
+  }
   const titleNode = isRenaming ? (
     <PlatformTextField
       aria-label={`重命名素材${asset.label}`}
@@ -312,17 +314,7 @@ export function ImageCanvasAssetRowView({
         title={asset.label}
         detail={mediaDetail}
         imageAlt={`素材：${asset.label}`}
-        primaryLabel={
-          isUploadingAsset
-            ? `上传中${asset.label}`
-            : isFailedUpload
-              ? `上传失败${asset.label}`
-              : isAssetSelectionMode
-                ? canSelectAsset
-                  ? `选择素材${asset.label}`
-                  : `素材${asset.label}不可选择`
-                : `添加${asset.label}`
-        }
+        primaryLabel={primaryLabel}
         primaryDisabled={isAssetSelectionMode && !canSelectAsset}
         onPrimaryClick={() => {
           if (isUploadingAsset || isFailedUpload) {
@@ -400,7 +392,12 @@ export function ImageCanvasAssetRowView({
           ) : undefined
         }
         onDragStart={(event) => {
-          if (isRenaming || isUploadingAsset || isFailedUpload) {
+          if (
+            isAssetSelectionMode ||
+            isRenaming ||
+            isUploadingAsset ||
+            isFailedUpload
+          ) {
             event.preventDefault();
             return;
           }
@@ -420,10 +417,6 @@ export function ImageCanvasAssetRowView({
         }}
         onPointerDown={(event) => {
           if (isAssetSelectionMode) {
-            selectionPointerKindRef.current =
-              event.pointerType === 'touch' || event.pointerType === 'pen'
-                ? event.pointerType
-                : 'mouse';
             return;
           }
           if (event.button !== 0) {
@@ -467,6 +460,17 @@ export function ImageCanvasAssetRowView({
           setAssetPointerDrag(nextDrag);
         }}
         onDragOver={(event) => {
+          if (isAssetSelectionMode) {
+            if (
+              hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE) ||
+              hasDataTransferType(event.dataTransfer, 'Files')
+            ) {
+              event.preventDefault();
+              event.stopPropagation();
+              event.dataTransfer.dropEffect = 'none';
+            }
+            return;
+          }
           if (hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE)) {
             event.preventDefault();
             event.stopPropagation();
@@ -483,6 +487,18 @@ export function ImageCanvasAssetRowView({
           }
         }}
         onDrop={(event) => {
+          if (isAssetSelectionMode) {
+            if (
+              getDraggedAssetId(event.dataTransfer) ||
+              event.dataTransfer.files.length > 0
+            ) {
+              event.preventDefault();
+              event.stopPropagation();
+              setUploadDropTarget(null);
+              updateAssetMoveDropFolder(null);
+            }
+            return;
+          }
           const movingAssetId = getDraggedAssetId(event.dataTransfer);
           if (movingAssetId) {
             event.preventDefault();
diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
index 98521a166..929d3da37 100644
--- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
@@ -592,6 +592,61 @@ describe('ImageCanvasEditorView asset library integration', () => {
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
 
+  it('clears drag targets and blocks folder drops after entering asset selection mode', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+        {
+          folderId: 'folder-role',
+          label: '角色',
+          sortOrder: 100,
+          collapsed: false,
+          systemDefault: false,
+        },
+      ],
+      assets: [
+        createTestImageAsset({ assetId: 'asset-puzzle', label: '拼图素材' }),
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    const roleFolder = await screen.findByRole('region', { name: '角色' });
+    const internalTransfer = createDataTransferStub();
+    internalTransfer.setData(
+      'application/x-genarrative-editor-asset',
+      'asset-puzzle',
+    );
+    fireEvent.dragOver(roleFolder, { dataTransfer: internalTransfer });
+    expect(roleFolder.className).toContain(
+      'image-canvas-editor__asset-folder--move-target',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '素材选择模式' }));
+    await waitFor(() => {
+      expect(roleFolder.className).not.toContain(
+        'image-canvas-editor__asset-folder--move-target',
+      );
+    });
+    fireEvent.drop(roleFolder, { dataTransfer: internalTransfer });
+
+    const fileTransfer = createDataTransferStub();
+    fileTransfer.types.push('Files');
+    (fileTransfer.files as File[]).push(
+      new File(['image'], '新增素材.png', { type: 'image/png' }),
+    );
+    fireEvent.dragOver(roleFolder, { dataTransfer: fileTransfer });
+    fireEvent.drop(roleFolder, { dataTransfer: fileTransfer });
+
+    expect(updateEditorAssetMock).not.toHaveBeenCalled();
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
   it('uploads multiple files as account-level assets without adding canvas layers', async () => {
     render(<ImageCanvasEditorView />);
 
@@ -1039,8 +1094,24 @@ describe('ImageCanvasEditorView asset library integration', () => {
       ),
     ).toBeTruthy();
     expect(deleteEditorAssetMock).not.toHaveBeenCalled();
+    fireEvent.change(screen.getByLabelText('搜索素材'), {
+      target: { value: '账号素材B' },
+    });
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('dialog', { name: '删除全部已选素材' }),
+      ).toBeNull();
+    });
+    expect(deleteEditorAssetMock).not.toHaveBeenCalled();
+    fireEvent.change(screen.getByLabelText('搜索素材'), {
+      target: { value: '' },
+    });
+    await user.click(within(toolbar).getByRole('button', { name: '删除' }));
+    const refreshedHiddenDeleteDialog = screen.getByRole('dialog', {
+      name: '删除全部已选素材',
+    });
     await user.click(
-      within(hiddenDeleteDialog).getByRole('button', {
+      within(refreshedHiddenDeleteDialog).getByRole('button', {
         name: '确认删除全部已选素材',
       }),
     );
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index db34236d2..34c6d59f4 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -748,9 +748,11 @@ export function ImageCanvasEditorView({
     refreshAssetLibrary,
   } = useImageCanvasAssetLibrary({
     assetListRef,
+    assetPointerDragRef,
     canAccessProtectedData: authUi ? authUi.canAccessProtectedData : true,
     openEditorLoginModal,
     onDeleteAssets: removeCanvasLayersLinkedToAssets,
+    onOpenSelectionMode: () => setUploadDropTarget(null),
   });
 
   useEffect(() => {
diff --git a/src/components/image-editor/ImageCanvasSidebarView.tsx b/src/components/image-editor/ImageCanvasSidebarView.tsx
index db8418cc4..7d3dc680b 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.tsx
@@ -106,7 +106,7 @@ export type ImageCanvasSidebarViewProps = {
   onDownloadAsset: (asset: EditorAsset) => void;
   toggleAllAssetsSelected: (visibleAssetIds: string[]) => void;
   downloadSelectedAssets: () => void | Promise<void>;
-  deleteSelectedAssets: () => void;
+  deleteSelectedAssets: (assetIds?: ReadonlySet<string>) => void;
   openAssetSelectionMode: () => void;
   closeAssetSelectionMode: () => void;
   groupSelectedLayers: () => void;
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
index ec35165fa..03e178755 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.test.tsx
@@ -12,7 +12,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ApiClientError } from '../../services/apiClient';
 import type { EditorAssetSnapshot } from '../../services/image-editor/editorProjectClient';
-import type { EditorAsset } from './ImageCanvasEditorTypes';
+import type {
+  AssetPointerDragState,
+  EditorAsset,
+} from './ImageCanvasEditorTypes';
 import { useImageCanvasAssetLibrary } from './useImageCanvasAssetLibrary';
 
 const createEditorAssetFolderMock = vi.hoisted(() => vi.fn());
@@ -85,8 +88,10 @@ function AssetLibraryHarness({
   onDeleteAssets?: (assets: EditorAsset[]) => boolean | void;
 }) {
   const assetListRef = useRef<HTMLDivElement | null>(null);
+  const assetPointerDragRef = useRef<AssetPointerDragState | null>(null);
   const assetLibrary = useImageCanvasAssetLibrary({
     assetListRef,
+    assetPointerDragRef,
     canAccessProtectedData,
     openEditorLoginModal,
     onDeleteAssets,
@@ -108,10 +113,7 @@ function AssetLibraryHarness({
                     visibleAssetIds: assetLibrary.selectableAssets.map(
                       (item) => item.id,
                     ),
-                    ctrlKey: event.ctrlKey,
-                    metaKey: event.metaKey,
                     shiftKey: event.shiftKey,
-                    pointerKind: 'mouse',
                   })
                 }
               >
@@ -216,7 +218,7 @@ function AssetLibraryHarness({
       >
         toggle all
       </button>
-      <button type="button" onClick={assetLibrary.deleteSelectedAssets}>
+      <button type="button" onClick={() => assetLibrary.deleteSelectedAssets()}>
         delete selected
       </button>
       <button type="button" onClick={assetLibrary.openAssetSelectionMode}>
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index dd73b84e6..e00ce20bf 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -85,14 +85,18 @@ function readAssetFolderHitTargets(listElement: ParentNode | null) {
 
 export function useImageCanvasAssetLibrary({
   assetListRef,
+  assetPointerDragRef,
   canAccessProtectedData,
   openEditorLoginModal,
   onDeleteAssets,
+  onOpenSelectionMode,
 }: {
   assetListRef: RefObject<HTMLDivElement | null>;
+  assetPointerDragRef: RefObject<AssetPointerDragState | null>;
   canAccessProtectedData: boolean;
   openEditorLoginModal: (postLoginAction?: (() => void) | null) => void;
   onDeleteAssets?: (assets: EditorAsset[]) => boolean | void;
+  onOpenSelectionMode?: () => void;
 }) {
   const [assetFolders, setAssetFolders] =
     useState<EditorAssetFolder[]>(EDITOR_ASSET_FOLDERS);
@@ -125,6 +129,14 @@ export function useImageCanvasAssetLibrary({
     setRenamingAsset(null);
     setRenamingFolder(null);
   }, []);
+  const prepareAssetSelectionMode = useCallback(() => {
+    clearAssetRenameState();
+    assetPointerDragRef.current = null;
+    setAssetPointerDrag(null);
+    setAssetMoveDropFolderId(null);
+    setPinnedAssetMoveFolderId(null);
+    onOpenSelectionMode?.();
+  }, [assetPointerDragRef, clearAssetRenameState, onOpenSelectionMode]);
   const {
     selectableAssets,
     selectedAssets,
@@ -144,7 +156,7 @@ export function useImageCanvasAssetLibrary({
   } = useImageCanvasAssetSelection({
     assetListRef,
     assets,
-    onOpenSelectionMode: clearAssetRenameState,
+    onOpenSelectionMode: prepareAssetSelectionMode,
   });
 
   const applyAssetLibrarySnapshot = useCallback(
@@ -469,20 +481,27 @@ export function useImageCanvasAssetLibrary({
     [assetFolders],
   );
 
-  const deleteSelectedAssets = useCallback(() => {
-    const ids = selectedAssets.map((asset) => asset.id);
-    if (onDeleteAssets?.(selectedAssets) === false) {
-      return;
-    }
-    setAssets(
-      (currentAssets) =>
-        removeSelectedAssets(currentAssets, selectedAssetIds).assets,
-    );
-    clearAssetSelection();
-    ids.forEach((assetId) => {
-      void deleteEditorAsset(assetId);
-    });
-  }, [clearAssetSelection, onDeleteAssets, selectedAssetIds, selectedAssets]);
+  const deleteSelectedAssets = useCallback(
+    (requestedAssetIds?: ReadonlySet<string>) => {
+      const targetAssetIds = new Set(requestedAssetIds ?? selectedAssetIds);
+      const targetAssets = assets.filter((asset) =>
+        targetAssetIds.has(asset.id),
+      );
+      const ids = targetAssets.map((asset) => asset.id);
+      if (onDeleteAssets?.(targetAssets) === false) {
+        return;
+      }
+      setAssets(
+        (currentAssets) =>
+          removeSelectedAssets(currentAssets, targetAssetIds).assets,
+      );
+      clearAssetSelection();
+      ids.forEach((assetId) => {
+        void deleteEditorAsset(assetId);
+      });
+    },
+    [assets, clearAssetSelection, onDeleteAssets, selectedAssetIds],
+  );
 
   const moveAssetToFolder = useCallback(
     (assetId: string, folderId: string) => {
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.ts b/src/components/image-editor/useImageCanvasAssetSelection.ts
index 5464d7010..240ab0937 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.ts
+++ b/src/components/image-editor/useImageCanvasAssetSelection.ts
@@ -22,14 +22,9 @@ type AssetHitTarget = {
   rect: ClientRectLike;
 };
 
-export type AssetSelectionPointerKind = 'keyboard' | 'mouse' | 'pen' | 'touch';
-
 export type AssetSelectionInteraction = {
   visibleAssetIds: string[];
   shiftKey?: boolean;
-  ctrlKey?: boolean;
-  metaKey?: boolean;
-  pointerKind?: AssetSelectionPointerKind;
 };
 
 type AssetSelectionState = {
diff --git a/src/index.css b/src/index.css
index 44762a136..60a2342e8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8957,8 +8957,8 @@ button.image-canvas-editor__reference-chip:disabled {
   }
 
   .image-canvas-editor__sidebar--asset-selection {
-    height: clamp(19rem, 62dvh, 21rem);
-    max-height: clamp(19rem, 62dvh, 21rem);
+    height: clamp(14rem, 62dvh, 21rem);
+    max-height: 62dvh;
   }
 
   .image-canvas-editor__asset-list {
diff --git a/src/index.test.ts b/src/index.test.ts
index 628f6f0f4..07cedf07d 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -322,6 +322,24 @@ describe('index stylesheet unread dots', () => {
   });
 });
 
+describe('index stylesheet image canvas asset selection', () => {
+  it('bounds the raised mobile selection sidebar by the short viewport', () => {
+    const css = readIndexCss();
+    const mobileQueryIndex = css.indexOf('@media (max-width: 760px)');
+    expect(mobileQueryIndex).toBeGreaterThanOrEqual(0);
+
+    const selectionSidebarBlock = getCssBlock(
+      css.slice(mobileQueryIndex),
+      '.image-canvas-editor__sidebar--asset-selection',
+    );
+    expect(selectionSidebarBlock).toContain(
+      'height: clamp(14rem, 62dvh, 21rem);',
+    );
+    expect(selectionSidebarBlock).toContain('max-height: 62dvh;');
+    expect(selectionSidebarBlock).not.toContain('clamp(19rem');
+  });
+});
+
 describe('index stylesheet draft mobile cards', () => {
   it('disables long-press text selection on the whole mobile draft tab', () => {
     const css = readIndexCss();
-- 
2.52.0


From 6244f8eeb97718822494c3ed0c8e1c86b61e1008 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 7 Aug 2026 13:32:48 +0800
Subject: [PATCH 24/26] =?UTF-8?q?=E6=A0=87=E6=B3=A8=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E4=B8=8E=E5=AF=BC=E5=87=BA=E5=BE=85=E5=8A=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

明确记录框选热路径的性能问题与优化边界
注明序列部分成功是 master 既有行为并等待契约讨论
---
 src/components/image-editor/useImageCanvasAssetExportWorkflow.ts | 1 +
 src/components/image-editor/useImageCanvasAssetSelection.ts      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index b123e19fb..5433ed802 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -553,6 +553,7 @@ export function useImageCanvasAssetExportWorkflow({
                     }),
                   ),
                 );
+                // TODO(master 既有行为待讨论): 当前至少一帧成功即导出；需先明确部分失败的顶层状态和原时间点保留契约，再决定整体失败或部分导出。
                 const successfulFrames = preparedFrames
                   .filter((result) => result.status === 'success')
                   .map((result) => result.frame);
diff --git a/src/components/image-editor/useImageCanvasAssetSelection.ts b/src/components/image-editor/useImageCanvasAssetSelection.ts
index 240ab0937..9e35d8ffe 100644
--- a/src/components/image-editor/useImageCanvasAssetSelection.ts
+++ b/src/components/image-editor/useImageCanvasAssetSelection.ts
@@ -354,6 +354,7 @@ export function useImageCanvasAssetSelection({
       top: number;
       bottom: number;
     }) => {
+      // TODO(性能问题): pointermove 会读取全部素材布局并更新 React state；后续需在保留滚动框选、末帧提交和取消回滚语义的前提下，用内容坐标缓存与 rAF 合帧优化。
       const marqueeSelection = selectUploadedAssetsInRect({
         assets,
         assetTargets: readAssetHitTargets(assetListRef.current),
-- 
2.52.0


From 4911801ed67e782f37f63145fcd5d5c36de8943a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 7 Aug 2026 14:26:49 +0800
Subject: [PATCH 25/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=B8=85=E5=8D=95=E7=AB=9E=E6=80=81=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E8=B6=85=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

等待事件监听注册后再触发 manifest 失效并以有界断言确认读取启动
将迟到响应收尾纳入异步 act 避免测试时序悬挂
补充 React 异步事件测试准则
---
 .../tests/appSurface/home.suite.ts            | 36 +++++++++++++------
 ...��前端测试】React组件测试准则-2026-06-26.md |  3 +-
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts
index 1ff1f578f..d5c9bf98c 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/home.suite.ts
@@ -359,17 +359,11 @@ export function registerClientHomeTests() {
         source: { kind: 'generated' },
       },
     ];
-    let resolveStaleRefresh!: (
-      manifest: typeof staleFirstManifest,
-    ) => void;
+    let resolveStaleRefresh!: (manifest: typeof staleFirstManifest) => void;
     const staleRefresh = new Promise<typeof staleFirstManifest>((resolve) => {
       resolveStaleRefresh = resolve;
     });
     let holdFirstRefresh = false;
-    let signalFirstRefreshStarted!: () => void;
-    const firstRefreshStarted = new Promise<void>((resolve) => {
-      signalFirstRefreshStarted = resolve;
-    });
     const runtimeHarness = createProjectSupervisorRuntimeHarness({
       projectPath: firstProjectPath,
     });
@@ -393,7 +387,6 @@ export function registerClientHomeTests() {
             return secondManifest;
           }
           if (holdFirstRefresh) {
-            signalFirstRefreshStarted();
             return staleRefresh;
           }
           return firstManifest;
@@ -461,11 +454,30 @@ export function registerClientHomeTests() {
     });
     fireEvent.click(screen.getByRole('button', { name: '打开' }));
     await screen.findByLabelText('项目开发工作台');
+    await waitFor(() => {
+      expect(runtimeHarness.listen).toHaveBeenCalledWith(
+        'game-creator-manifest-invalidated',
+        expect.any(Function),
+      );
+    });
+    const firstProjectManifestReadsBeforeRefresh = invoke.mock.calls.filter(
+      ([command, args]) =>
+        command === 'get_local_game_manifest' &&
+        args?.projectPath === firstProjectPath,
+    ).length;
     holdFirstRefresh = true;
     act(() => {
       runtimeHarness.emitManifestInvalidated('code-prototype');
     });
-    await firstRefreshStarted;
+    await waitFor(() => {
+      expect(
+        invoke.mock.calls.filter(
+          ([command, args]) =>
+            command === 'get_local_game_manifest' &&
+            args?.projectPath === firstProjectPath,
+        ).length,
+      ).toBeGreaterThan(firstProjectManifestReadsBeforeRefresh);
+    });
 
     fireEvent.click(screen.getByRole('button', { name: '项目组' }));
     fireEvent.change(screen.getByLabelText('项目目录'), {
@@ -481,8 +493,10 @@ export function registerClientHomeTests() {
       await screen.findByRole('button', { name: /second\.png/ }),
     ).not.toBeNull();
 
-    act(() => resolveStaleRefresh(staleFirstManifest));
-    await Promise.resolve();
+    await act(async () => {
+      resolveStaleRefresh(staleFirstManifest);
+      await staleRefresh;
+    });
     expect(
       screen.queryByRole('button', { name: /stale-first\.png/ }),
     ).toBeNull();
diff --git a/docs/technical/【前端测试】React组件测试准则-2026-06-26.md b/docs/technical/【前端测试】React组件测试准则-2026-06-26.md
index a2a7667a8..cada040a1 100644
--- a/docs/technical/【前端测试】React组件测试准则-2026-06-26.md
+++ b/docs/technical/【前端测试】React组件测试准则-2026-06-26.md
@@ -1,6 +1,6 @@
 # React 组件测试准则
 
-更新时间：`2026-06-26`
+更新时间：`2026-08-07`
 
 ## 背景
 
@@ -36,6 +36,7 @@
 - `data-testid` 名称必须描述用户或稳定渲染边界，例如 `image-canvas-editor-snap-guide-vertical`；不要描述 React 私有 state 名称。
 - 测试用 fixture 只包含本行为需要的字段。演化中的 payload 使用 `expect.objectContaining(...)` 或 helper 生成默认对象，避免一处契约加字段导致大量无关用例碎裂。
 - 当测试是为防止历史回归，应在测试名或邻近注释中说明防的是什么行为，而不是记录实现步骤。
+- 测试 React effect 中注册的事件监听时，触发事件前先用可观测的 listener 调用确认注册已完成；异步请求已开始应用有界 `waitFor` 断言确认，不要用无界手工 Promise 等待一次性信号。解除挂起请求时将 Promise 收尾纳入异步 `act`，确保后续 React 更新在断言前已冲刷。
 
 ## 试点调整
 
-- 
2.52.0


From e87228156cd39ee4cf74fc446e9fadea4bb0e207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Fri, 7 Aug 2026 15:25:06 +0800
Subject: [PATCH 26/26] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A7=81=E6=9C=89?=
 =?UTF-8?q?=E5=BA=8F=E5=88=97=E5=B8=A7=E6=89=B9=E9=87=8F=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8E=BB=E9=87=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将帧级 assetObjectId、objectKey 与 imageSrc 纳入有边界的稳定导出身份
补充两个 objectKey-only 私有序列共同导出及 metadata 映射回归
同步角色动作集合导出去重契约文档
---
 ...辑器】画板角色形象生成入口设计-2026-06-15.md |   3 +-
 .../ImageCanvasExportModel.test.ts            |  21 ++-
 .../image-editor/ImageCanvasExportModel.ts    |  22 +++-
 ...useImageCanvasAssetExportWorkflow.test.tsx | 121 ++++++++++++++++++
 4 files changed, 159 insertions(+), 8 deletions(-)

diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index b9df12ad5..6bc6a21b3 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -2,7 +2,7 @@
 
 日期：`2026-06-15`
 
-更新时间：`2026-07-28`
+更新时间：`2026-08-07`
 
 ## 背景
 
@@ -187,6 +187,7 @@
 - 画板前端回填角色动作结果时，以正式 resource / asset 的 `assetKind: "character-animation"` 选择序列帧播放器并以首帧作为图层主图；带项目上下文的生成必须返回正式 project resource，图层直接使用其 `resourceId`。无项目放置只允许绑定响应中的正式账号素材，不从生成结果 `frames` 构造自包含 `local-resource-character-animation-*`；此时图层的 `sourceResourceId` 继续使用正式账号素材记录的直接来源，不回退成请求中的原角色资源。预览视频作为独立 `assetKind: "video"` 资源保存，但不复制进最终动作 layout。
 - 角色动作图层在画布中循环展示透明 PNG 帧；刷新恢复只从 project resource 的 `imageSequenceFrames/imageSequenceDurationMs` 读取正式结果。动作 layer layout 只保存 `layerId/resourceId` 和几何、层级、可见性等放置信息，不保存 `mediaType`、动作帧、时长、预览、生成输入或资源元数据副本；资源缺字段时按损坏数据失败关闭。
 - 点击角色动作图层下载时，必须打包下载序列帧 ZIP；画布素材 ZIP 导出时，角色动作写入 `sequences/<编号-标题>/frames/`，而不是导出预览视频。
+- 集合 ZIP 对角色动作去重时，稳定身份依次取层级 `taskId`、`sourceResourceId`，再按帧顺序取每帧 `assetObjectId -> objectKey -> imageSrc`；帧数组必须使用有边界编码，不得只拼接可为空的 `imageSrc`。两个仅含不同私有 `objectKey` 的序列必须同时进入 ZIP，根 `metadata.json` 分别指向各自的序列目录。
 - 角色动作生成 BFF 在同一请求内保存两类账号素材：上游预览 MP4 使用 `assetKind=video` 并承载生成成本，最终透明帧集使用 `assetKind=character-animation` 且派生成本为 0；响应中的 `resource` / `asset` 固定指向最终透明帧集对应的项目资源与账号素材。调用方必须直接使用它们，不得再以第一帧调用资源或素材创建接口。
 - 最终项目资源和账号素材只把 `imageSequenceFrames/imageSequenceDurationMs` 写入正式媒体字段，并以 `sourceResourceId` 指向独立预览视频资源；正式帧对象和角色动作生成响应都不含 `frameIndex`，数组位置是唯一播放顺序，帧数和 FPS 均按需派生。`generationInputs` 只保存 `fields/references` 等用户可重放输入，`screenColorHex` 和动作运行结果均不落入其中。存量 `characterAnimation`、已确认动作行的 helper 顶层字段、`frameIndex`、误标预览 MP4 及动作 layout 副本由受 migration operator 限制的四阶段数据库 procedure 一次性规范化；迁移按权威对象类型排除同 task 的预览视频、只接受唯一最终图片序列并逐帧补齐登记对象身份，且不把 layout 复制的 `sourceResourceId` 当作历史血缘证据。CLI tuple 与 HTTP object 两种 procedure 返回都必须先归一为脚本内部统一的 `batch_sha256`，分页还必须拒绝未推进或重复出现的 cursor，避免安全校验误拒绝或生产迁移无限循环。该宽容只属于迁移；新生成仍严格使用“原角色资源 → 预览视频资源 → 最终序列资源”直接来源链。上线完成后 api-server、后台、Web 和外部 helper 不再读取 legacy fallback。新动作写入若提交旧运行字段或 `frameIndex`，HTTP 与 SpacetimeDB storage 均明确拒绝。
 - `frames[0].imageSrc` 仍作为后续动作素材快速编辑或再次生成动作时的透明帧来源。该规则不得跳过后端原有的视频生成、抽帧、透明化处理和帧素材落盘流程。
diff --git a/src/components/image-editor/ImageCanvasExportModel.test.ts b/src/components/image-editor/ImageCanvasExportModel.test.ts
index 76643d69b..9436622dc 100644
--- a/src/components/image-editor/ImageCanvasExportModel.test.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.test.ts
@@ -110,7 +110,26 @@ describe('ImageCanvasExportModel', () => {
           },
         ],
       }),
-    ).toBe('image-sequence:sequence-task');
+    ).toBe('image-sequence:task:sequence-task');
+    expect(
+      getLayerExportKey({
+        ...buildLayer(),
+        mediaType: 'image-sequence',
+        taskId: null,
+        sourceResourceId: null,
+        src: '',
+        imageSequenceFrames: [
+          {
+            imageSrc: '',
+            objectKey: 'private/animation-a/frame-01.png',
+            width: 1024,
+            height: 1024,
+          },
+        ],
+      }),
+    ).toBe(
+      'image-sequence:frames:["object-key:private/animation-a/frame-01.png"]',
+    );
   });
 
   it('detects image extensions from content type before falling back to src', () => {
diff --git a/src/components/image-editor/ImageCanvasExportModel.ts b/src/components/image-editor/ImageCanvasExportModel.ts
index 86ab886f9..443e9a241 100644
--- a/src/components/image-editor/ImageCanvasExportModel.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.ts
@@ -34,12 +34,22 @@ export function formatExportDate(date: Date) {
 
 export function getLayerExportKey(layer: CanvasLayer) {
   if (layer.mediaType === 'image-sequence') {
-    return `image-sequence:${
-      layer.taskId ||
-      layer.sourceResourceId ||
-      layer.imageSequenceFrames?.map((frame) => frame.imageSrc).join('|') ||
-      layer.src
-    }`;
+    if (layer.taskId) {
+      return `image-sequence:task:${layer.taskId}`;
+    }
+    if (layer.sourceResourceId) {
+      return `image-sequence:resource:${layer.sourceResourceId}`;
+    }
+    const frameIdentities = layer.imageSequenceFrames?.map((frame) =>
+      frame.assetObjectId
+        ? `asset-object:${frame.assetObjectId}`
+        : frame.objectKey
+          ? `object-key:${frame.objectKey}`
+          : `source:${frame.imageSrc}`,
+    );
+    return frameIdentities?.length
+      ? `image-sequence:frames:${JSON.stringify(frameIdentities)}`
+      : `image-sequence:source:${layer.src}`;
   }
   return (
     layer.assetObjectId ||
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index d2a2b1969..3d714997c 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -419,6 +419,127 @@ describe('useImageCanvasAssetExportWorkflow', () => {
     }
   });
 
+  it('exports distinct object-key-only private image sequences with separate metadata', async () => {
+    const originalFetch = globalThis.fetch;
+    const frameContents = new Map([
+      ['private/animation-a/frame-01.png', 'animation-a-frame'],
+      ['private/animation-b/frame-01.png', 'animation-b-frame'],
+    ]);
+    const fetchMock = vi.fn(async (url: string) => {
+      const requestUrl = new URL(url, 'http://localhost');
+      if (requestUrl.pathname === '/api/assets/read-url') {
+        return new Response(null, { status: 404 });
+      }
+      if (requestUrl.pathname === '/api/assets/read-bytes') {
+        const objectKey = requestUrl.searchParams.get('objectKey') ?? '';
+        const content = frameContents.get(objectKey);
+        return content
+          ? new Response(content, {
+              headers: { 'Content-Type': 'image/png' },
+            })
+          : new Response(null, { status: 404 });
+      }
+      return new Response(null, { status: 404 });
+    });
+    globalThis.fetch = fetchMock as typeof fetch;
+    let exportedBlob: Blob | null = null;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn((blob: Blob) => {
+        exportedBlob = blob;
+        return 'blob:private-sequences';
+      }),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[
+            createLayer('private-sequence-a', {
+              title: '私有动作 A',
+              src: '',
+              objectKey: null,
+              taskId: null,
+              sourceResourceId: null,
+              mediaType: 'image-sequence',
+              imageSequenceFrames: [
+                {
+                  imageSrc: '',
+                  objectKey: 'private/animation-a/frame-01.png',
+                  width: 100,
+                  height: 80,
+                },
+              ],
+              zIndex: 1,
+            }),
+            createLayer('private-sequence-b', {
+              title: '私有动作 B',
+              src: '',
+              objectKey: null,
+              taskId: null,
+              sourceResourceId: null,
+              mediaType: 'image-sequence',
+              imageSequenceFrames: [
+                {
+                  imageSrc: '',
+                  objectKey: 'private/animation-b/frame-01.png',
+                  width: 100,
+                  height: 80,
+                },
+              ],
+              zIndex: 2,
+            }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '导出画布素材' }));
+
+      await waitFor(() => expect(exportedBlob).toBeTruthy());
+      const zip = await JSZip.loadAsync(exportedBlob!);
+      const firstFramePath =
+        '导出项目-画布素材/sequences/001-私有动作 A/frames/frame-01.png';
+      const secondFramePath =
+        '导出项目-画布素材/sequences/002-私有动作 B/frames/frame-01.png';
+      expect(await zip.file(firstFramePath)!.async('text')).toBe(
+        'animation-a-frame',
+      );
+      expect(await zip.file(secondFramePath)!.async('text')).toBe(
+        'animation-b-frame',
+      );
+      const metadata = JSON.parse(
+        await readZipText(zip, '导出项目-画布素材/metadata.json'),
+      );
+      expect(metadata.layers).toHaveLength(2);
+      expect(
+        metadata.layers.map((layer: { file: string }) => layer.file),
+      ).toEqual([
+        'sequences/001-私有动作 A/manifest.txt',
+        'sequences/002-私有动作 B/manifest.txt',
+      ]);
+      expect(
+        await readZipText(zip, '导出项目-画布素材/manifest.txt'),
+      ).toContain('素材数量：2');
+      for (const objectKey of frameContents.keys()) {
+        expect(fetchMock).toHaveBeenCalledWith(
+          expect.stringContaining(
+            `/api/assets/read-bytes?objectKey=${encodeURIComponent(objectKey)}`,
+          ),
+          expect.any(Object),
+        );
+      }
+    } finally {
+      globalThis.fetch = originalFetch;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
   it('reads layers and sequence frames with bounded concurrency and stable zip order', async () => {
     const originalFetch = globalThis.fetch;
     const pendingResponses = new Map<string, () => void>();
-- 
2.52.0