From b4746c24b59c2bc44e684d0abdadd7afa7059ffc Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 19:34:44 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E8=A1=A5=E5=85=85AIWeb=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E4=BD=93=E8=90=BD=E5=9C=B0=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

明确 /editor/agent 智能体作为工程改动编排器，通过结构化 patch、校验、snapshot、构建和预览反馈闭环落地。

补充左侧聊天、中间预览、右侧 IDE 的页面布局约束，右侧展开文件内容后隐藏聊天栏。

同步验收清单，明确 MVP 不做 diff 视图并覆盖 agent turn 和布局验收。
---
 ...��】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md | 96 ++++++++++++++++++-
 ...例】AIWeb工程静态预览MVP验收清单-2026-06-13.md | 27 +++++-
 2 files changed, 118 insertions(+), 5 deletions(-)

diff --git a/docs/technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md b/docs/technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md
index 236780ed..694bdb77 100644
--- a/docs/technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md
+++ b/docs/technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md
@@ -29,6 +29,7 @@ MVP 明确不做：
 - HMR / 长驻 dev server。
 - 任意 npm 依赖安装。
 - AI 自定义 build shell script。
+- diff 视图。
 - 与主站同源的预览 iframe。
 - 将 AI 生成工程写入当前 Genarrative 仓库源码目录。
 
@@ -38,8 +39,9 @@ MVP 明确不做：
 
 入口路由固定为 `/editor/agent`。这一层只负责前端体验：
 
-- 文件树、代码编辑器、AI 指令输入。
-- 当前项目版本、diff、构建日志和预览 iframe。
+- 左侧聊天、中间预览、右侧 IDE 的水平三分布局。
+- AI 指令输入、构建日志、当前项目版本和预览 iframe。
+- 右侧 IDE 默认只显示文件树；展开后显示当前文件内容，并隐藏左侧聊天栏。
 - 保存用户编辑和 AI patch。
 - 订阅构建 job SSE 状态。
 - 在构建成功后切换 iframe 的 `previewUrl`。
@@ -49,6 +51,74 @@ MVP 明确不做：
 
 如果后续接入现有创作链路，入口仍应走 `play_flow` 主干和 `shared-contracts` DTO，不在前端壳或 `app.rs` 中新建平行业务流程。
 
+### 智能体编排器
+
+`/editor/agent` 的智能体不是普通聊天页，也不是直接生成整包代码的黑盒。它是“工程改动编排器”，负责把用户意图转成可审计、可校验、可回滚的 Web 工程 patch。
+
+智能体职责：
+
+- 理解用户自然语言目标，并结合当前 snapshot、文件树、选中文件和最近构建结果形成任务上下文。
+- 输出结构化 patch plan，而不是直接写真实目录或执行 shell。
+- 将 patch plan 提交给 api-server 校验，校验通过后生成新 snapshot。
+- 创建 preview build job，并订阅 job SSE。
+- 读取构建日志、错误摘要和 preview 状态，失败时继续生成修复 patch，成功时推动预览切换。
+- 保留每轮 agent turn 的用户输入、上下文摘要、patch 摘要、校验结果、jobId 和最终状态，便于刷新恢复和审计。
+
+智能体最小闭环：
+
+```text
+用户在左侧聊天输入需求
+  -> 前端提交 agent turn
+  -> api-server 读取当前 snapshot 和允许暴露的上下文
+  -> LLM 返回结构化 patch plan
+  -> api-server 校验 patch plan
+  -> 校验通过后生成新 snapshot
+  -> 创建 preview build job
+  -> runner 构建
+  -> SSE 回传 queued / running / log / succeeded / failed
+  -> 成功时中间预览 iframe reload
+  -> 失败时智能体基于错误摘要进入下一轮修复
+```
+
+智能体输出只允许以下 patch 操作：
+
+- `create_file`
+- `update_file`
+- `delete_file`
+- `rename_file`
+- `package_manifest_request`
+
+`package_manifest_request` 只是依赖请求，不是事实源。MVP 中 api-server 必须拒绝或忽略任意新增依赖、生命周期脚本、私有 registry、`git:` / `file:` / `http:` 依赖和 AI 自定义构建命令。
+
+智能体不得：
+
+- 直接写入当前 Genarrative 仓库源码目录。
+- 直接访问 runner 临时工作区。
+- 直接执行 shell、npm script 或任意构建命令。
+- 直接拿平台 access token、用户 cookie、SpacetimeDB 连接、OSS 写权限或 LLM provider 密钥。
+- 绕过 api-server 的路径、依赖、大小、敏感文件和 snapshot 校验。
+
+### 页面布局
+
+`/editor/agent` MVP 使用水平三分布局，不做 diff 视图：
+
+```text
+┌───────────────┬──────────────────────────────┬────────────────┐
+│ 左侧聊天      │ 中间预览                     │ 右侧 IDE       │
+│ Agent 对话    │ sandbox iframe + 状态日志    │ 默认文件树     │
+└───────────────┴──────────────────────────────┴────────────────┘
+```
+
+布局规则：
+
+- 左侧聊天承载用户输入、智能体回复、构建状态摘要和失败修复建议。
+- 中间预览始终是主工作区，展示当前 active preview iframe；构建失败时保留上一版 succeeded preview，并在聊天或日志区域展示失败摘要。
+- 右侧 IDE 默认只显示文件树，突出当前工程结构，不默认展示代码内容。
+- 用户展开右侧 IDE 后，右侧显示文件树和当前文件内容，左侧聊天栏隐藏，中间预览与右侧 IDE 形成双栏工作模式。
+- 用户收起右侧文件内容后，恢复左侧聊天 + 中间预览 + 右侧文件树三栏。
+- 文件内容查看用于理解和轻量编辑当前文件，不提供 diff 视图；版本变化通过 agent turn 摘要、snapshot 时间线和构建状态表达。
+- 移动端优先保持预览和聊天可用，右侧 IDE 通过抽屉或分段入口进入；展开文件内容时同样隐藏聊天。
+
 ### api-server 控制面
 
 控制面只管理权限、快照、任务和状态，不执行 AI 工程代码：
@@ -128,6 +198,7 @@ MVP 只服务静态构建产物。HMR、WebSocket 代理和长驻 dev server 后
 POST   /api/creation/web-project/projects
 GET    /api/creation/web-project/projects/{projectId}/snapshot
 PATCH  /api/creation/web-project/projects/{projectId}/files
+POST   /api/creation/web-project/projects/{projectId}/agent-turns
 POST   /api/runtime/web-project/projects/{projectId}/preview-builds
 GET    /api/runtime/web-project/preview-builds/{jobId}
 GET    /api/runtime/web-project/preview-builds/{jobId}/events
@@ -146,6 +217,27 @@ GET    /api/runtime/web-project/preview-builds/{jobId}/events
 
 前端刷新恢复时，先读取项目 active snapshot 和 active preview，再按未终态 job 继续订阅 SSE。
 
+`agent-turns` 的请求建议包含：
+
+- `projectId`
+- `baseSnapshotId`
+- `message`
+- `selectedFilePath`
+- `visibleFilePaths`
+- `recentBuildJobId`
+
+`agent-turns` 的响应建议包含：
+
+- `turnId`
+- `status`
+- `assistantMessage`
+- `patchSummary`
+- `validationErrors[]`
+- `snapshotId`
+- `buildJobId`
+
+当 patch 校验失败时，不生成 snapshot，不创建 build job，只返回可展示的校验错误和智能体修正建议。
+
 ## 虚拟文件系统
 
 平台内的“文件系统”是虚拟工作区，不是真实目录长期挂载。
diff --git a/docs/technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md b/docs/technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md
index 1d97a0ff..45445ff2 100644
--- a/docs/technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md
+++ b/docs/technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md
@@ -14,6 +14,7 @@ MVP 必须只支持：
 - 独立 runner 静态构建。
 - 独立 preview origin iframe 预览。
 - 失败保留上一版可用预览。
+- 左侧聊天、中间预览、右侧 IDE 的 `/editor/agent` 三分布局；右侧 IDE 展开文件内容后隐藏左侧聊天。
 
 MVP 不支持：
 
@@ -23,19 +24,39 @@ MVP 不支持：
 - 任意端口代理。
 - 任意 npm 安装。
 - AI 自定义 package scripts。
+- diff 视图。
 - Service Worker。
 - 主站同源预览。
 
 ## Happy Path
 
-- [ ] 用户打开 `/editor/agent` 能看到文件树、编辑器、AI 输入区、构建日志区和预览 iframe。
+- [ ] 用户打开 `/editor/agent` 能看到左侧聊天、中间预览和右侧 IDE 文件树。
+- [ ] 右侧 IDE 默认只显示文件树，不默认显示文件内容。
+- [ ] 用户展开右侧 IDE 后能看到当前文件内容，左侧聊天栏隐藏。
+- [ ] 用户收起右侧文件内容后恢复左侧聊天、中间预览和右侧文件树三栏。
+- [ ] 页面不展示 diff 视图。
 - [ ] 创建新 Web project 后得到固定模板文件树。
-- [ ] AI patch 新增或修改一个 React 组件后，api-server 生成新 snapshot。
+- [ ] 用户在左侧聊天提交需求后创建 agent turn。
+- [ ] 智能体结合当前 snapshot、选中文件和最近构建状态生成结构化 patch plan。
+- [ ] AI patch plan 新增或修改一个 React 组件后，api-server 校验通过并生成新 snapshot。
+- [ ] patch 校验失败时不生成 snapshot，不创建 build job，并在聊天中展示可读校验错误。
 - [ ] 前端 debounce 后创建 preview build job。
 - [ ] runner 构建成功并产出 immutable artifact。
 - [ ] SSE 返回 `queued -> running -> succeeded`。
 - [ ] iframe 切换到新 preview URL。
-- [ ] 刷新 `/editor/agent` 后能恢复当前 project、active snapshot、active preview 和未完成 job 状态。
+- [ ] 刷新 `/editor/agent` 后能恢复当前 project、active snapshot、active preview、agent turn 历史和未完成 job 状态。
+
+## 智能体编排
+
+- [ ] 智能体只通过 `agent-turns` 或等价受控接口提交用户需求，不直接写真实目录。
+- [ ] 智能体输出只包含 `create_file/update_file/delete_file/rename_file/package_manifest_request` 这类结构化 patch 操作。
+- [ ] 智能体不输出或执行 shell 命令。
+- [ ] 智能体不直接触发任意 npm script。
+- [ ] 智能体不直接访问 runner 临时工作区。
+- [ ] 智能体不接收平台 access token、用户 cookie、SpacetimeDB 连接、OSS 写权限或 LLM provider 密钥。
+- [ ] 每轮 agent turn 记录用户输入、上下文摘要、patch 摘要、校验结果、snapshotId、jobId 和最终状态。
+- [ ] 构建失败后，智能体基于受脱敏的错误摘要生成下一轮修复 patch。
+- [ ] 构建成功后，智能体不会覆盖非当前 active snapshot 的 preview。
 
 ## Patch 与路径校验
 

From 0bc7db5bf6ac91698ca402b7da40029ad3c1a418 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Mon, 15 Jun 2026 14:11:26 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E7=B4=A0=E6=9D=90=E5=AF=BC=E5=87=BA=E6=96=B9?=
 =?UTF-8?q?=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增画布素材 ZIP 导出技术方案

明确下载图标入口放在右上角标题栏

在 docs 总览补充图片画布素材导出文档入口
---
 docs/README.md                                |   2 +
 ...��端架构】图片画布素材导出方案-2026-06-15.md | 158 ++++++++++++++++++
 2 files changed, 160 insertions(+)
 create mode 100644 docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md

diff --git a/docs/README.md b/docs/README.md
index a2501862..78a839aa 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -23,6 +23,8 @@
 
 `/editor/agent` 浏览器内 AI Web 工程编辑器的静态 SPA 沙箱预览 MVP，采用“平台编辑器壳 + api-server 控制面 + 独立 runner worker + 独立预览域”四层结构；技术方案、威胁模型和验收清单见 [【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md](./technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md)、[【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md](./technical/【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md) 和 [【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md](./technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md)。
 
+`/editor/canvas` 图片画布编辑器的画布素材 ZIP 导出能力，入口放在右上角标题栏下载图标内，第一版采用前端 JSZip 打包画布中有效图层引用的上传图、生成图和修改结果，方案见 [【前端架构】图片画布素材导出方案-2026-06-15.md](./technical/【前端架构】图片画布素材导出方案-2026-06-15.md)。
+
 本地通过 SSH alias 管理多台服务器、查看硬件 / systemd / HTTP 健康状态并执行受控服务启停的 egui 桌面工具见 [【开发运维】本地SSH服务器管理面板技术方案-2026-06-11.md](./technical/【开发运维】本地SSH服务器管理面板技术方案-2026-06-11.md)。
 
 生产部署切换到 systemd + Nginx + SpacetimeDB 自托管的总方案见 [PRODUCTION_DEPLOYMENT_PLAN_2026-05-02.md](./technical/PRODUCTION_DEPLOYMENT_PLAN_2026-05-02.md)，该文档也是当前生产 Jenkinsfile 的唯一入口。SpacetimeDB 表结构变更、自动迁移边界和保留旧数据的分阶段迁移流程见 [SPACETIMEDB_SCHEMA_CHANGE_CONSTRAINTS.md](./technical/SPACETIMEDB_SCHEMA_CHANGE_CONSTRAINTS.md)；private 表迁移 JSON 导入导出、HTTP 413 分片导入和旧数据库迁移流水线经验见 [SPACETIMEDB_JSON_STRING_MIGRATION_PROCEDURE_2026-04-27.md](./technical/SPACETIMEDB_JSON_STRING_MIGRATION_PROCEDURE_2026-04-27.md) 与 [JENKINS_SPACETIMEDB_DATABASE_MIGRATION_PIPELINES_2026-04-29.md](./technical/JENKINS_SPACETIMEDB_DATABASE_MIGRATION_PIPELINES_2026-04-29.md)；后台管理独立前端工程技术方案见 [ADMIN_WEB_CONSOLE_TECHNICAL_SOLUTION_2026-04-30.md](./technical/ADMIN_WEB_CONSOLE_TECHNICAL_SOLUTION_2026-04-30.md)。
diff --git a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
new file mode 100644
index 00000000..f3503144
--- /dev/null
+++ b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
@@ -0,0 +1,158 @@
+# 图片画布素材导出方案
+
+日期：2026-06-15
+
+## 背景
+
+`/editor/canvas` 已承载项目画布、账号级素材库、生成图片、图层、分组、隐藏、锁定、翻转、缩放和右键菜单等编辑能力。用户需要一次性下载当前画布中使用到的全部素材，用于本地归档、外部编辑或跨工具交接。
+
+素材导出应作为画布级能力，而不是单个图层的“导出为”。单图导出仍保留在目标右键菜单；全部素材导出放在画布标题栏，入口稳定、可发现且不打断画布操作。
+
+## 入口设计
+
+- 在画布右上角标题栏内增加下载图标按钮。
+- 图标使用 `lucide-react` 的 `Download`。
+- 按钮 `aria-label` 使用 `下载画布素材`。
+- 入口与返回项目页、项目名称同属标题栏，但视觉上靠右，不进入左下角画布工具组，也不进入底部 AI 工具栏。
+- 标题栏空间不足时，下载图标保持固定尺寸，项目名称使用省略号收缩。
+
+## 第一版范围
+
+第一版实现“导出画布素材 ZIP”：
+
+- 导出当前画布中有效图层引用的图片。
+- 包含上传图、生成图、修改生成结果。
+- 默认包含隐藏图层。
+- 跳过已被素材库删除且已判定无效的上传图层。
+- 锁定、分组、翻转等状态不影响图片文件导出，但写入元数据。
+- 空画布时按钮置灰，或点击后显示轻提示。
+
+暂不实现：
+
+- 画布整体截图 PNG。
+- PSD / Figma / 工程包导出。
+- 后端异步打包任务。
+- 导入导出包恢复画布。
+
+## ZIP 结构
+
+导出文件名：
+
+```text
+项目名-画布素材-YYYYMMDD.zip
+```
+
+包内结构：
+
+```text
+项目名-画布素材/
+├─ images/
+│  ├─ 001-拼图素材.png
+│  ├─ 002-生成图片.png
+│  └─ 003-修改结果.png
+├─ metadata.json
+└─ manifest.txt
+```
+
+## 元数据结构
+
+`metadata.json` 记录项目、导出时间、图层和图片文件映射：
+
+```json
+{
+  "projectId": "editor-project-default",
+  "projectTitle": "默认项目",
+  "exportedAt": "2026-06-15T00:00:00.000Z",
+  "layers": [
+    {
+      "layerId": "layer-generated-1",
+      "title": "生成图片 1",
+      "file": "images/002-生成图片.png",
+      "width": 1024,
+      "height": 1024,
+      "canvas": {
+        "x": 120,
+        "y": 80,
+        "width": 420,
+        "height": 420,
+        "zIndex": 12,
+        "hidden": false,
+        "locked": false,
+        "flipX": false,
+        "flipY": false,
+        "groupId": null
+      },
+      "sourceType": "generated",
+      "prompt": "一张明亮的拼图主视觉",
+      "actualPrompt": "一张明亮的拼图主视觉",
+      "model": "gpt-image-2",
+      "provider": "VectorEngine",
+      "taskId": "editor-real-task-1"
+    }
+  ]
+}
+```
+
+`manifest.txt` 用于人工快速查看：
+
+```text
+项目：默认项目
+导出时间：2026-06-15T00:00:00.000Z
+素材数量：3
+图层数量：5
+```
+
+## 去重规则
+
+同一张图片被多个图层引用时，只导出一份图片，所有图层在 `metadata.json` 中指向同一个 `file`。
+
+图片去重 key 优先级：
+
+```text
+assetObjectId > objectKey > sourceAssetId > src
+```
+
+文件命名按图层 zIndex 从低到高排序，遇到重复名称追加序号。
+
+## 前端实现
+
+第一版优先使用客户端 ZIP：
+
+1. 从当前 `layers` 取目标图层。
+2. 过滤无效图层，保留隐藏图层。
+3. 按去重 key 合并图片源。
+4. 对每个图片源读取 Blob：
+   - `data:image/...` 直接转换为 Blob。
+   - 同源或可访问 URL 使用 `fetch` 拉取 Blob。
+   - 拉取失败时记录失败项，不中断整个导出。
+5. 使用 `JSZip` 写入 `images/`、`metadata.json` 和 `manifest.txt`。
+6. `zip.generateAsync({ type: 'blob' })` 生成文件。
+7. 用临时 `<a download>` 触发下载。
+
+若当前仓库未安装 `jszip`，新增依赖时应只引入 `jszip`，不引入额外下载库。
+
+## 错误处理
+
+- 空画布：按钮置灰或显示短提示。
+- 部分图片下载失败：ZIP 仍生成，`metadata.json` 记录失败图片，UI 显示“部分素材未能导出”。
+- 全部图片失败：不下载 ZIP，显示失败提示。
+- 浏览器不支持 Blob 下载：显示失败提示。
+
+## 测试计划
+
+- 标题栏右上角显示 `下载画布素材` 图标入口。
+- 空画布时入口不可执行或提示为空。
+- 上传图和生成图都写入 ZIP。
+- 多图层引用同一素材时，图片文件只写一份。
+- 隐藏图层默认写入 `metadata.json`。
+- 图层的锁定、翻转、分组状态写入元数据。
+- `data:image` 图片不经过网络请求即可导出。
+- URL 图片 fetch 失败时不中断其他素材导出。
+
+## 后续扩展
+
+- 导出当前选中素材。
+- 导出画布快照 PNG。
+- 导出可恢复工程包。
+- 导入工程包恢复画布。
+- 后端异步打包大项目，前端只轮询下载结果。

From a3fed35cbdc29c3532c13f7dc075026f9346887d Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Mon, 15 Jun 2026 15:56:30 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E7=B4=A0=E6=9D=90=E4=B8=8E=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E6=96=87=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加素材拖拽上传遮罩、素材移动和默认文件夹归一

补齐画布右键菜单、复制剪切粘贴、层级和翻转操作

补齐生成图入库、项目返回入口和项目名称标题

扩展画布测试覆盖素材、右键菜单、生成图和布局交互
---
 .../ImageCanvasEditorPrimitives.tsx           |   16 +
 .../ImageCanvasEditorView.test.tsx            |  877 +++++++++-
 .../image-editor/ImageCanvasEditorView.tsx    | 1449 ++++++++++++++---
 src/index.css                                 |  111 ++
 4 files changed, 2182 insertions(+), 271 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
index 86a7edb6..8b82d2b5 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
@@ -1,6 +1,7 @@
 import type {
   ComponentType,
   DragEventHandler,
+  MouseEventHandler,
   PointerEventHandler,
   ReactNode,
 } from 'react';
@@ -68,9 +69,14 @@ export type SidebarMediaItemProps = {
   primaryClassName?: string;
   actions?: ReactNode;
   titleNode?: ReactNode;
+  draggable?: boolean;
+  onDragStart?: DragEventHandler<HTMLDivElement>;
+  onDragEnd?: DragEventHandler<HTMLDivElement>;
   onDragOver?: DragEventHandler<HTMLDivElement>;
   onDrop?: DragEventHandler<HTMLDivElement>;
+  onPointerDown?: PointerEventHandler<HTMLDivElement>;
   onPointerEnter?: PointerEventHandler<HTMLDivElement>;
+  onContextMenu?: MouseEventHandler<HTMLDivElement>;
 };
 
 export function SidebarMediaItem({
@@ -87,16 +93,26 @@ export function SidebarMediaItem({
   primaryClassName,
   actions,
   titleNode,
+  draggable,
+  onDragStart,
+  onDragEnd,
   onDragOver,
   onDrop,
+  onPointerDown,
   onPointerEnter,
+  onContextMenu,
 }: SidebarMediaItemProps) {
   return (
     <div
       className={`${rowClassName} ${selected ? `${rowClassName}--selected` : ''}`}
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
       onDragOver={onDragOver}
       onDrop={onDrop}
+      onPointerDown={onPointerDown}
       onPointerEnter={onPointerEnter}
+      onContextMenu={onContextMenu}
     >
       <button
         type="button"
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 8eda8f37..6017f7b3 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -12,6 +12,7 @@ const editEditorImageMock = vi.hoisted(() => vi.fn());
 const createEditorAssetMock = vi.hoisted(() => vi.fn());
 const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
 const createEditorAssetFolderMock = vi.hoisted(() => vi.fn());
+const updateEditorAssetMock = vi.hoisted(() => vi.fn());
 const updateEditorAssetFolderMock = vi.hoisted(() => vi.fn());
 const deleteEditorAssetFolderMock = vi.hoisted(() => vi.fn());
 const deleteEditorAssetMock = vi.hoisted(() => vi.fn());
@@ -20,6 +21,85 @@ const loadEditorProjectMock = vi.hoisted(() => vi.fn());
 const loadOrCreateRecentEditorProjectMock = vi.hoisted(() => vi.fn());
 const saveEditorProjectLayoutMock = vi.hoisted(() => vi.fn());
 
+const defaultProjectLayers = [
+  {
+    layerId: 'layer-puzzle',
+    resourceId: 'resource-puzzle',
+    title: '拼图素材',
+    src: '/creation-type-references/puzzle.webp',
+    x: 470,
+    y: 300,
+    width: 420,
+    height: 420,
+    originalWidth: 640,
+    originalHeight: 640,
+    zIndex: 1,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    layerId: 'layer-big-fish',
+    resourceId: 'resource-big-fish',
+    title: '大鱼素材',
+    src: '/creation-type-references/big-fish.webp',
+    x: 930,
+    y: 360,
+    width: 420,
+    height: 236,
+    originalWidth: 720,
+    originalHeight: 405,
+    zIndex: 2,
+    sourceType: 'uploaded' as const,
+  },
+];
+
+const defaultAccountAssets = [
+  {
+    assetId: 'asset-puzzle',
+    folderId: 'project',
+    label: '拼图素材',
+    imageSrc: '/creation-type-references/puzzle.webp',
+    width: 640,
+    height: 640,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-match3d',
+    folderId: 'project',
+    label: '抓大鹅素材',
+    imageSrc: '/creation-type-references/match3d.webp',
+    width: 640,
+    height: 640,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-big-fish',
+    folderId: 'project',
+    label: '大鱼素材',
+    imageSrc: '/creation-type-references/big-fish.webp',
+    width: 720,
+    height: 405,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-bark-battle',
+    folderId: 'project',
+    label: '声浪素材',
+    imageSrc: '/creation-type-references/bark-battle.webp',
+    width: 640,
+    height: 900,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-visual-novel',
+    folderId: 'project',
+    label: '视觉小说素材',
+    imageSrc: '/creation-type-references/visual-novel.webp',
+    width: 720,
+    height: 405,
+    sourceType: 'uploaded' as const,
+  },
+];
+
 vi.mock('../../services/image-editor/editorProjectClient', async () => {
   const actual = await vi.importActual<
     typeof import('../../services/image-editor/editorProjectClient')
@@ -37,6 +117,7 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
     loadEditorProject: loadEditorProjectMock,
     loadOrCreateRecentEditorProject: loadOrCreateRecentEditorProjectMock,
     saveEditorProjectLayout: saveEditorProjectLayoutMock,
+    updateEditorAsset: updateEditorAssetMock,
     updateEditorAssetFolder: updateEditorAssetFolderMock,
   };
 });
@@ -55,13 +136,38 @@ function dispatchPointerEvent(
   fireEvent(target, event);
 }
 
+function createDataTransferStub() {
+  const store = new Map<string, string>();
+  return {
+    files: [],
+    types: [] as string[],
+    dropEffect: 'none',
+    effectAllowed: 'all',
+    setData(type: string, value: string) {
+      store.set(type, value);
+      if (!this.types.includes(type)) {
+        this.types.push(type);
+      }
+    },
+    getData(type: string) {
+      return store.get(type) ?? '';
+    },
+  };
+}
+
+async function renderLoadedEditor() {
+  render(<ImageCanvasEditorView />);
+  await screen.findByAltText('画布图片：拼图素材');
+  await screen.findByRole('button', { name: '添加拼图素材' });
+}
+
 describe('ImageCanvasEditorView', () => {
   beforeEach(() => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValue({
       projectId: 'editor-project-default',
       title: '默认项目',
       viewport: { x: 0, y: 0, scale: 1 },
-      layers: [],
+      layers: defaultProjectLayers,
       resources: [],
       updatedAt: '2026-06-12T00:00:00.000Z',
     });
@@ -75,7 +181,7 @@ describe('ImageCanvasEditorView', () => {
           systemDefault: true,
         },
       ],
-      assets: [],
+      assets: defaultAccountAssets,
     });
     createEditorAssetMock.mockImplementation(async (input) => ({
       assetId: `persisted-${input.label}`,
@@ -92,6 +198,15 @@ describe('ImageCanvasEditorView', () => {
       collapsed: false,
       systemDefault: false,
     });
+    updateEditorAssetMock.mockImplementation(async (assetId, input) => ({
+      assetId,
+      folderId: input.folderId ?? 'project',
+      label: input.label ?? '拼图素材',
+      imageSrc: '/creation-type-references/puzzle.webp',
+      width: 640,
+      height: 640,
+      sourceType: 'uploaded',
+    }));
     updateEditorAssetFolderMock.mockImplementation(async (folderId, input) => ({
       folderId,
       label: input.label ?? '角色上传',
@@ -130,6 +245,7 @@ describe('ImageCanvasEditorView', () => {
     createEditorAssetMock.mockReset();
     createEditorProjectResourceMock.mockReset();
     createEditorAssetFolderMock.mockReset();
+    updateEditorAssetMock.mockReset();
     updateEditorAssetFolderMock.mockReset();
     deleteEditorAssetFolderMock.mockReset();
     deleteEditorAssetMock.mockReset();
@@ -163,9 +279,140 @@ describe('ImageCanvasEditorView', () => {
     expect(loadOrCreateRecentEditorProjectMock).not.toHaveBeenCalled();
   });
 
-  it('toggles the shared sidebar from canvas panel buttons', () => {
+  it('offers a topbar entry back to the project page', async () => {
+    await renderLoadedEditor();
+
+    const projectLink = screen.getByRole('link', { name: '返回项目页面' });
+
+    expect(projectLink.getAttribute('href')).toBe('/project');
+  });
+
+  it('uses the loaded project name as the canvas title', async () => {
+    await renderLoadedEditor();
+
+    expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: '图片编辑器' })).toBeNull();
+  });
+
+  it('does not inject built-in mock assets or layers when persistence returns empty data', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-empty',
+      title: '空项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [],
+    });
+
     render(<ImageCanvasEditorView />);
 
+    await waitFor(() => {
+      expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
+    });
+    expect(screen.queryByRole('button', { name: '添加拼图素材' })).toBeNull();
+    expect(screen.queryByAltText('画布图片：拼图素材')).toBeNull();
+    expect(screen.getByRole('region', { name: '项目素材' })).toBeTruthy();
+  });
+
+  it('removes invalid uploaded layers when the canvas opens', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-invalid-layer',
+      title: '包含失效素材的项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-valid-asset',
+          resourceId: 'resource-valid-asset',
+          title: '账号素材A',
+          src: 'data:image/png;base64,YQ==',
+          x: 120,
+          y: 120,
+          width: 320,
+          height: 240,
+          originalWidth: 320,
+          originalHeight: 240,
+          zIndex: 1,
+          sourceType: 'uploaded',
+          sourceAssetId: 'asset-a',
+        },
+        {
+          layerId: 'layer-missing-asset',
+          resourceId: 'resource-missing-asset',
+          title: '已删除素材',
+          src: 'data:image/png;base64,bWlzc2luZw==',
+          x: 480,
+          y: 120,
+          width: 320,
+          height: 240,
+          originalWidth: 320,
+          originalHeight: 240,
+          zIndex: 2,
+          sourceType: 'uploaded',
+          sourceAssetId: 'asset-missing',
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-a',
+          folderId: 'project',
+          label: '账号素材A',
+          imageSrc: 'data:image/png;base64,YQ==',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+
+    render(<ImageCanvasEditorView />);
+
+    await waitFor(() => {
+      expect(screen.getByAltText('画布图片：账号素材A')).toBeTruthy();
+      expect(screen.queryByAltText('画布图片：已删除素材')).toBeNull();
+    });
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+        'editor-project-invalid-layer',
+        expect.objectContaining({
+          layers: [
+            expect.objectContaining({
+              layerId: 'layer-valid-asset',
+              sourceAssetId: 'asset-a',
+            }),
+          ],
+        }),
+      );
+    });
+  });
+
+  it('toggles the shared sidebar from canvas panel buttons', async () => {
+    await renderLoadedEditor();
+
     const sidebar = screen.getByRole('complementary', { name: '图片资源栏' });
     const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
     const assetsButton = within(panelToolbar).getByRole('button', { name: '打开素材' });
@@ -196,7 +443,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('groups assets by folder and renames sidebar materials', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const sidebar = screen.getByRole('complementary', { name: '图片资源栏' });
     expect(within(sidebar).getByRole('region', { name: '项目素材' })).toBeTruthy();
@@ -258,6 +505,34 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByAltText('画布图片：角色草图.png')).toBeNull();
   });
 
+  it('keeps only one non-deletable default asset folder', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+        {
+          folderId: 'legacy-default',
+          label: '默认素材',
+          sortOrder: 1,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [],
+    });
+    render(<ImageCanvasEditorView />);
+
+    await screen.findByRole('region', { name: '项目素材' });
+
+    expect(screen.queryByRole('button', { name: '删除文件夹项目素材' })).toBeNull();
+    expect(screen.getByRole('button', { name: '删除文件夹默认素材' })).toBeTruthy();
+  });
+
   it('renames and deletes asset folders through the persisted asset library API', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
@@ -301,6 +576,67 @@ describe('ImageCanvasEditorView', () => {
     expect(deleteEditorAssetFolderMock).toHaveBeenCalledWith('folder-role');
   });
 
+  it('moves an asset to another folder when dragging inside the asset library', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+        {
+          folderId: 'folder-role',
+          label: '角色',
+          sortOrder: 100,
+          collapsed: false,
+          systemDefault: false,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-puzzle',
+          folderId: 'project',
+          label: '拼图素材',
+          imageSrc: '/creation-type-references/puzzle.webp',
+          width: 640,
+          height: 640,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    const sourceAsset = await screen.findByRole('button', { name: '添加拼图素材' });
+    const sourceAssetRow = sourceAsset.closest('.image-canvas-editor__asset-row');
+    const projectFolder = screen.getByRole('region', { name: '项目素材' });
+    const roleFolder = screen.getByRole('region', { name: '角色' });
+    const dataTransfer = createDataTransferStub();
+
+    if (!sourceAssetRow) {
+      throw new Error('asset row should exist');
+    }
+    fireEvent.dragStart(sourceAssetRow, {
+      dataTransfer,
+    });
+    fireEvent.dragOver(roleFolder, {
+      dataTransfer,
+    });
+    fireEvent.drop(roleFolder, {
+      dataTransfer,
+    });
+
+    expect(updateEditorAssetMock).toHaveBeenCalledWith('asset-puzzle', {
+      folderId: 'folder-role',
+    });
+    expect(within(projectFolder).queryByRole('button', { name: '添加拼图素材' })).toBeNull();
+    expect(
+      within(roleFolder).getByRole('button', { name: '添加拼图素材' }),
+    ).toBeTruthy();
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
   it('uploads multiple files as account-level assets without adding canvas layers', async () => {
     render(<ImageCanvasEditorView />);
 
@@ -365,6 +701,75 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('button', { name: '选择素材账号素材A' })).toBeNull();
   });
 
+  it('removes canvas layers linked to deleted assets', async () => {
+    const user = userEvent.setup();
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-a',
+          folderId: 'project',
+          label: '账号素材A',
+          imageSrc: 'data:image/png;base64,YQ==',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+        {
+          assetId: 'asset-b',
+          folderId: 'project',
+          label: '账号素材B',
+          imageSrc: 'data:image/png;base64,Yg==',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    await user.click(await screen.findByRole('button', { name: '添加账号素材A' }));
+    await user.click(screen.getByRole('button', { name: '添加账号素材B' }));
+    expect(screen.getByAltText('画布图片：账号素材A')).toBeTruthy();
+    expect(screen.getByAltText('画布图片：账号素材B')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: '素材选择模式' }));
+    await user.click(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByRole(
+        'button',
+        { name: '全选' },
+      ),
+    );
+    await waitFor(() => {
+      expect(
+        within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByText(
+          /已选 2/u,
+        ),
+      ).toBeTruthy();
+    });
+    await user.click(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByRole(
+        'button',
+        { name: '删除' },
+      ),
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByAltText('画布图片：账号素材A')).toBeNull();
+      expect(screen.queryByAltText('画布图片：账号素材B')).toBeNull();
+    });
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-a');
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-b');
+  });
+
   it('selects multiple assets with a marquee in asset selection mode', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
@@ -448,11 +853,11 @@ describe('ImageCanvasEditorView', () => {
     });
 
     await user.click(screen.getByRole('button', { name: '素材选择模式' }));
-    dispatchPointerEvent(assetList, 'pointerdown', {
+    dispatchPointerEvent(firstAssetButton.closest('[data-asset-id]') as HTMLElement, 'pointerdown', {
       button: 0,
       pointerId: 88,
-      clientX: 8,
-      clientY: 100,
+      clientX: 32,
+      clientY: 140,
     });
     dispatchPointerEvent(assetList, 'pointermove', {
       button: 0,
@@ -471,9 +876,9 @@ describe('ImageCanvasEditorView', () => {
     expect(within(batchToolbar).getByText(/已选 2/u)).toBeTruthy();
   });
 
-  it('shows image size on hover and placeholder toolbar after selecting a layer', () => {
+  it('shows image size on hover and placeholder toolbar after selecting a layer', async () => {
     const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const canvasImage = screen.getByAltText('画布图片：拼图素材');
     fireEvent.mouseEnter(canvasImage.closest('button')!);
@@ -502,8 +907,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('toolbar', { name: '图片工具栏' })).toBeTruthy();
   });
 
-  it('treats puzzle material as a normal asset without generated metadata tools', () => {
-    render(<ImageCanvasEditorView />);
+  it('treats puzzle material as a normal asset without generated metadata tools', async () => {
+    await renderLoadedEditor();
 
     fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
       button: 0,
@@ -516,8 +921,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('button', { name: '修改图片' })).toBeNull();
   });
 
-  it('deletes the selected layer from the floating toolbar', () => {
-    render(<ImageCanvasEditorView />);
+  it('deletes the selected layer from the floating toolbar', async () => {
+    await renderLoadedEditor();
 
     expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
 
@@ -533,8 +938,55 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByAltText('画布图片：大鱼素材')).toBeTruthy();
   });
 
-  it('drops an image file on the canvas as a new canvas layer', async () => {
-    render(<ImageCanvasEditorView />);
+  it('applies floating toolbar delete to every selected canvas layer', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
+      button: 0,
+      pointerId: 151,
+      clientX: 120,
+      clientY: 120,
+    });
+    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
+      pointerId: 151,
+      clientX: 120,
+      clientY: 120,
+    });
+    fireEvent.keyDown(window, { key: 'Shift', code: 'ShiftLeft' });
+    fireEvent.pointerDown(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      button: 0,
+      pointerId: 152,
+      clientX: 520,
+      clientY: 180,
+      shiftKey: true,
+    });
+    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
+      pointerId: 152,
+      clientX: 520,
+      clientY: 180,
+    });
+    fireEvent.keyUp(window, { key: 'Shift', code: 'ShiftLeft' });
+
+    await waitFor(() => {
+      expect(
+        screen.getByAltText('画布图片：拼图素材').closest('button')?.className,
+      ).toContain('image-canvas-editor__layer--selected');
+      expect(
+        screen.getByAltText('画布图片：大鱼素材').closest('button')?.className,
+      ).toContain('image-canvas-editor__layer--selected');
+    });
+    fireEvent.click(screen.getByRole('button', { name: '删除图片' }));
+
+    expect(screen.queryByAltText('画布图片：拼图素材')).toBeNull();
+    expect(screen.queryByAltText('画布图片：大鱼素材')).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '撤销' }));
+    expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
+    expect(screen.getByAltText('画布图片：大鱼素材')).toBeTruthy();
+  });
+
+  it('drops multiple image files on the canvas as new canvas layers', async () => {
+    await renderLoadedEditor();
     await waitFor(() => {
       expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
     });
@@ -544,27 +996,84 @@ describe('ImageCanvasEditorView', () => {
       clientX: 430,
       clientY: 260,
       dataTransfer: {
-        files: [new File(['image'], '测试上传.png', { type: 'image/png' })],
+        files: [
+          new File(['image-a'], '测试上传A.png', { type: 'image/png' }),
+          new File(['image-b'], '测试上传B.png', { type: 'image/png' }),
+        ],
         types: ['Files'],
       },
     });
 
     await waitFor(() => {
-      expect(screen.getByAltText('画布图片：测试上传.png')).toBeTruthy();
+      expect(screen.getByAltText('画布图片：测试上传A.png')).toBeTruthy();
+      expect(screen.getByAltText('画布图片：测试上传B.png')).toBeTruthy();
     });
-    expect(createEditorAssetMock).toHaveBeenCalledWith(
+    expect(createEditorAssetMock).toHaveBeenCalledTimes(2);
+    expect(createEditorProjectResourceMock).toHaveBeenCalledTimes(2);
+    expect(createEditorAssetMock).toHaveBeenNthCalledWith(
+      1,
       expect.objectContaining({
-        label: '测试上传.png',
+        label: '测试上传A.png',
         imageSrc: expect.stringMatching(/^data:image\/png;base64,/u),
       }),
     );
-    expect(screen.getByRole('button', { name: '选择图层测试上传.png' })).toBeTruthy();
+    expect(createEditorAssetMock).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        label: '测试上传B.png',
+        imageSrc: expect.stringMatching(/^data:image\/png;base64,/u),
+      }),
+    );
+    expect(screen.getByRole('button', { name: '选择图层测试上传A.png' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '选择图层测试上传B.png' })).toBeTruthy();
+  });
+
+  it('shows a canvas drop overlay while dragging uploaded images over the canvas', async () => {
+    await renderLoadedEditor();
+
+    const viewport = screen.getByLabelText('画布工作区');
+    fireEvent.dragOver(viewport, {
+      dataTransfer: {
+        files: [new File(['image'], '画布提示.png', { type: 'image/png' })],
+        types: ['Files'],
+      },
+    });
+
+    expect(screen.getByText('添加到画布')).toBeTruthy();
+    expect(screen.getByText('松开即可添加')).toBeTruthy();
+
+    fireEvent.drop(viewport, {
+      clientX: 430,
+      clientY: 260,
+      dataTransfer: {
+        files: [new File(['image'], '画布提示.png', { type: 'image/png' })],
+        types: ['Files'],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('添加到画布')).toBeNull();
+    });
+    await waitFor(() => {
+      expect(screen.getByAltText('画布图片：画布提示.png')).toBeTruthy();
+    });
   });
 
   it('drops files into the asset panel only once without creating canvas layers', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
-    fireEvent.drop(screen.getByRole('region', { name: '项目素材' }), {
+    const assetFolder = screen.getByRole('region', { name: '项目素材' });
+    fireEvent.dragOver(assetFolder, {
+      dataTransfer: {
+        files: [new File(['image'], '素材拖拽.png', { type: 'image/png' })],
+        types: ['Files'],
+      },
+    });
+
+    expect(screen.getByText('添加到素材')).toBeTruthy();
+    expect(screen.getByText('松开即可添加')).toBeTruthy();
+
+    fireEvent.drop(assetFolder, {
       dataTransfer: {
         files: [new File(['image'], '素材拖拽.png', { type: 'image/png' })],
         types: ['Files'],
@@ -574,26 +1083,154 @@ describe('ImageCanvasEditorView', () => {
     await waitFor(() => {
       expect(screen.getByRole('button', { name: '添加素材拖拽.png' })).toBeTruthy();
     });
+    expect(screen.queryByText('添加到素材')).toBeNull();
     expect(createEditorAssetMock).toHaveBeenCalledTimes(1);
     expect(screen.queryByAltText('画布图片：素材拖拽.png')).toBeNull();
   });
 
-  it('blocks the browser context menu inside the editor workspace', () => {
-    render(<ImageCanvasEditorView />);
+  it('shows the blank canvas context menu with paste disabled before copying', async () => {
+    await renderLoadedEditor();
 
-    const editor = screen.getByRole('region', { name: '图片画布编辑器' });
-    const contextMenuEvent = new MouseEvent('contextmenu', {
-      bubbles: true,
-      cancelable: true,
+    const viewport = screen.getByLabelText('画布工作区');
+    fireEvent.contextMenu(viewport, {
+      clientX: 320,
+      clientY: 220,
     });
-    const wasNotCanceled = editor.dispatchEvent(contextMenuEvent);
 
-    expect(wasNotCanceled).toBe(false);
-    expect(contextMenuEvent.defaultPrevented).toBe(true);
+    const menu = screen.getByRole('menu', { name: '画布右键菜单' });
+    expect(
+      (within(menu).getByRole('menuitem', { name: '粘贴' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+    expect(within(menu).getByRole('menuitem', { name: '放大' })).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '显示画布所有元素' }),
+    ).toBeTruthy();
   });
 
-  it('switches the shared sidebar between assets and layers', () => {
-    render(<ImageCanvasEditorView />);
+  it('keeps context menus inside the viewport instead of relying on internal scrollbars', async () => {
+    await renderLoadedEditor();
+
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 640,
+    });
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: 480,
+    });
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
+      clientX: 630,
+      clientY: 470,
+    });
+
+    const menu = screen.getByRole('menu', { name: '图层右键菜单' }) as HTMLElement;
+    expect(Number.parseFloat(menu.style.left)).toBeLessThan(630);
+    expect(Number.parseFloat(menu.style.top)).toBeLessThan(470);
+  });
+
+  it('copies a layer from the target context menu and pastes it on the canvas', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
+      clientX: 510,
+      clientY: 330,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '复制' }));
+
+    fireEvent.contextMenu(screen.getByLabelText('画布工作区'), {
+      clientX: 360,
+      clientY: 240,
+    });
+    const blankMenu = screen.getByRole('menu', { name: '画布右键菜单' });
+    expect(
+      (within(blankMenu).getByRole('menuitem', {
+        name: '粘贴',
+      }) as HTMLButtonElement).disabled,
+    ).toBe(false);
+    fireEvent.click(within(blankMenu).getByRole('menuitem', { name: '粘贴' }));
+
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(2);
+  });
+
+  it('handles target context menu duplicate, hide, lock, flip, group, ungroup, and delete', async () => {
+    await renderLoadedEditor();
+
+    const firstLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
+    fireEvent.contextMenu(firstLayer, { clientX: 510, clientY: 330 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '创建副本' }));
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(2);
+
+    const copiedLayer = screen.getAllByAltText(/画布图片：拼图素材/u)[1]!.closest('button')!;
+    fireEvent.contextMenu(copiedLayer, { clientX: 540, clientY: 360 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '水平翻转' }));
+    expect(
+      (screen.getAllByAltText(/画布图片：拼图素材/u)[1] as HTMLElement).style
+        .transform,
+    ).toBe('scale(-1, 1)');
+
+    fireEvent.contextMenu(copiedLayer, { clientX: 540, clientY: 360 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '锁定' }));
+    await waitFor(() => {
+      expect(copiedLayer.className).toContain('image-canvas-editor__layer--locked');
+    });
+
+    fireEvent.contextMenu(copiedLayer, { clientX: 540, clientY: 360 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '隐藏' }));
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(1);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开图层' }));
+    expect(screen.getByText(/已隐藏/u)).toBeTruthy();
+    fireEvent.contextMenu(screen.getByText(/已隐藏/u).closest('.image-canvas-editor__layer-row')!, {
+      clientX: 80,
+      clientY: 220,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '显示' }));
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(2);
+
+    fireEvent.keyDown(window, { key: 'Shift', code: 'ShiftLeft' });
+    fireEvent.pointerDown(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      button: 0,
+      pointerId: 181,
+      clientX: 950,
+      clientY: 380,
+      shiftKey: true,
+    });
+    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
+      pointerId: 181,
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.keyUp(window, { key: 'Shift', code: 'ShiftLeft' });
+    fireEvent.contextMenu(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '创建组' }));
+    await waitFor(() => {
+      expect(screen.getAllByText(/已打组/u).length).toBeGreaterThan(0);
+    });
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '解除组' }));
+    await waitFor(() => {
+      expect(screen.queryByText(/已打组/u)).toBeNull();
+    });
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '删除' }));
+    expect(screen.queryByAltText('画布图片：大鱼素材')).toBeNull();
+  });
+
+  it('switches the shared sidebar between assets and layers', async () => {
+    await renderLoadedEditor();
 
     const sidebar = screen.getByRole('complementary', { name: '图片资源栏' });
     expect(within(sidebar).getByText('素材')).toBeTruthy();
@@ -619,16 +1256,16 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('button', { name: '添加拼图素材' })).toBeTruthy();
   });
 
-  it('adds assets from the sidebar and supports zoom buttons', () => {
-    render(<ImageCanvasEditorView />);
+  it('adds assets from the sidebar and supports zoom buttons', async () => {
+    await renderLoadedEditor();
 
     expect(
-      screen.getByRole('button', { name: '当前缩放比例 82%' }).className,
+      screen.getByRole('button', { name: '当前缩放比例 100%' }).className,
     ).toContain('platform-inline-option-button');
 
-    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 82%' }));
+    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 100%' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '放大' }));
-    expect(screen.getByRole('button', { name: '当前缩放比例 95%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 116%' })).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '添加声浪素材' }));
 
@@ -636,10 +1273,19 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('complementary', { name: '图片资源栏' })).toBeTruthy();
   });
 
-  it('offers Lovart-style zoom menu commands', async () => {
-    render(<ImageCanvasEditorView />);
+  it('places the zoom percentage at the far right of the bottom-left panel dock', async () => {
+    await renderLoadedEditor();
 
-    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 82%' }));
+    const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
+    const controls = within(panelToolbar).getAllByRole('button');
+
+    expect(controls.at(-1)?.getAttribute('aria-label')).toBe('当前缩放比例 100%');
+  });
+
+  it('offers Lovart-style zoom menu commands', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 100%' }));
 
     expect(screen.getByRole('menu', { name: '缩放菜单' })).toBeTruthy();
     expect(screen.getByRole('menuitem', { name: '显示画布所有元素' })).toBeTruthy();
@@ -652,8 +1298,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('button', { name: '当前缩放比例 50%' })).toBeTruthy();
   });
 
-  it('shows the Lovart-style minimap and canvas background controls', () => {
-    render(<ImageCanvasEditorView />);
+  it('shows the Lovart-style minimap and canvas background controls', async () => {
+    await renderLoadedEditor();
 
     const viewport = screen.getByLabelText('画布工作区');
     const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
@@ -674,14 +1320,14 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('button', { name: '画布小地图' })).toBeNull();
   });
 
-  it('uses normal wheel for vertical canvas scroll and ctrl wheel for zoom', () => {
-    render(<ImageCanvasEditorView />);
+  it('uses normal wheel for vertical canvas scroll and ctrl wheel for zoom', async () => {
+    await renderLoadedEditor();
 
     const viewport = screen.getByLabelText('画布工作区');
-    expect(screen.getByRole('button', { name: '当前缩放比例 82%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 100%' })).toBeTruthy();
 
     fireEvent.wheel(viewport, { deltaY: 120, clientX: 400, clientY: 280 });
-    expect(screen.getByRole('button', { name: '当前缩放比例 82%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 100%' })).toBeTruthy();
 
     fireEvent.wheel(viewport, {
       deltaY: -120,
@@ -689,7 +1335,7 @@ describe('ImageCanvasEditorView', () => {
       clientX: 400,
       clientY: 280,
     });
-    expect(screen.getByRole('button', { name: '当前缩放比例 90%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 110%' })).toBeTruthy();
 
     const ctrlWheelEvent = new WheelEvent('wheel', {
       bubbles: true,
@@ -704,7 +1350,7 @@ describe('ImageCanvasEditorView', () => {
   });
 
   it('selects multiple canvas layers with shift click', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const firstLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
     const secondLayer = screen.getByAltText('画布图片：大鱼素材').closest('button')!;
@@ -750,8 +1396,8 @@ describe('ImageCanvasEditorView', () => {
     });
   });
 
-  it('drags the minimap to move the canvas viewport', () => {
-    render(<ImageCanvasEditorView />);
+  it('drags the minimap to move the canvas viewport', async () => {
+    await renderLoadedEditor();
 
     const minimap = screen.getByRole('button', { name: '画布小地图' });
     vi.spyOn(minimap, 'getBoundingClientRect').mockReturnValue({
@@ -766,19 +1412,29 @@ describe('ImageCanvasEditorView', () => {
       toJSON: () => ({}),
     });
     dispatchPointerEvent(minimap, 'pointerdown', {
+      button: 0,
+      pointerId: 71,
+      clientX: 60,
+      clientY: 42,
+    });
+    const world = screen
+      .getByLabelText('画布工作区')
+      .querySelector('.image-canvas-editor__world') as HTMLElement;
+    const transformAfterDown = world.style.transform;
+
+    dispatchPointerEvent(screen.getByLabelText('画布工作区'), 'pointermove', {
       button: 0,
       pointerId: 71,
       clientX: 120,
       clientY: 72,
     });
 
-    const firstLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
-    expect(Number.parseFloat((firstLayer as HTMLElement).style.left)).toBe(470);
+    expect(world.style.transform).not.toBe(transformAfterDown);
     expect(screen.getByRole('button', { name: '画布小地图' })).toBeTruthy();
   });
 
   it('persists layer groups in the canvas layer snapshot', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '打开图层' }));
     fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
@@ -855,7 +1511,7 @@ describe('ImageCanvasEditorView', () => {
       provider: 'VectorEngine',
       taskId: 'editor-real-task-1',
     });
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     fireEvent.click(within(bottomToolbar).getByRole('button', { name: '生成工具' }));
@@ -908,6 +1564,23 @@ describe('ImageCanvasEditorView', () => {
     await waitFor(() => {
       expect(screen.getByAltText(/画布图片：生成图片/)).toBeTruthy();
     });
+    await waitFor(() => {
+      expect(createEditorAssetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          folderId: 'project',
+          label: expect.stringMatching(/^生成图片/u),
+          imageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
+          sourceType: 'generated',
+          prompt: '一张明亮的拼图主视觉',
+          model: 'gpt-image-2',
+          provider: 'VectorEngine',
+          taskId: 'editor-real-task-1',
+        }),
+      );
+    });
+    fireEvent.click(screen.getByRole('button', { name: '打开素材' }));
+    expect(screen.getByRole('button', { name: /添加生成图片/u })).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '打开图层' }));
     const generatedLayer = screen.getByAltText(/画布图片：生成图片/).closest('button')!;
     const anchoredGenerateDialog = screen.getByRole('dialog', { name: '生成图片' });
     expect(anchoredGenerateDialog).toBeTruthy();
@@ -936,7 +1609,7 @@ describe('ImageCanvasEditorView', () => {
       provider: 'VectorEngine',
       taskId: 'editor-drag-frame-1',
     });
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
     await waitFor(() => {
       expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
     });
@@ -986,8 +1659,8 @@ describe('ImageCanvasEditorView', () => {
     expect(Number.parseFloat((generatedLayer as HTMLElement).style.top)).toBeGreaterThan(180);
   });
 
-  it('hides the generation composer when selecting another image but keeps the placeholder', () => {
-    render(<ImageCanvasEditorView />);
+  it('hides the generation composer when selecting another image but keeps the placeholder', async () => {
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
@@ -1012,8 +1685,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
   });
 
-  it('keeps the generation composer when clicking the canvas outside generation controls', () => {
-    render(<ImageCanvasEditorView />);
+  it('keeps the generation composer when clicking the canvas outside generation controls', async () => {
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
@@ -1029,8 +1702,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByLabelText('图像生成占位图')).toBeTruthy();
   });
 
-  it('closes the generation composer without removing the placeholder frame', () => {
-    render(<ImageCanvasEditorView />);
+  it('closes the generation composer without removing the placeholder frame', async () => {
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.click(screen.getByRole('button', { name: '关闭生成图片' }));
@@ -1041,7 +1714,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('shows generation errors instead of falling back to mock images', async () => {
     generateEditorImageMock.mockRejectedValueOnce(new Error('VectorEngine 未配置'));
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
@@ -1066,7 +1739,7 @@ describe('ImageCanvasEditorView', () => {
         code: 'UNAUTHORIZED',
       }),
     );
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
@@ -1084,7 +1757,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('switches tools and restores the previous tool after holding Space', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     const selectTool = within(bottomToolbar).getByRole('button', { name: '选择工具' });
@@ -1105,7 +1778,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('switches away from hand tool from the bottom toolbar', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     const handTool = within(bottomToolbar).getByRole('button', { name: '抓手工具' });
@@ -1120,7 +1793,7 @@ describe('ImageCanvasEditorView', () => {
   });
 
   it('pans with the middle mouse button without leaving select mode', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const viewport = screen.getByLabelText('画布工作区');
     const middlePointerDown = new MouseEvent('pointerdown', {
@@ -1146,7 +1819,7 @@ describe('ImageCanvasEditorView', () => {
   });
 
   it('shows snap guides when dragging a layer near another layer alignment', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const puzzleLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
     dispatchPointerEvent(puzzleLayer, 'pointerdown', {
@@ -1157,8 +1830,8 @@ describe('ImageCanvasEditorView', () => {
     });
     dispatchPointerEvent(screen.getByLabelText('画布工作区'), 'pointermove', {
       pointerId: 21,
-      clientX: 499,
-      clientY: 169,
+      clientX: 580,
+      clientY: 180,
     });
 
     expect(screen.getByTestId('image-canvas-editor-snap-guide-vertical')).toBeTruthy();
@@ -1167,7 +1840,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('can switch tools after a layer drag started without pointer release', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
       button: 0,
@@ -1212,7 +1885,7 @@ describe('ImageCanvasEditorView', () => {
       provider: 'VectorEngine',
       taskId: 'editor-real-edit-1',
     });
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
@@ -1262,6 +1935,66 @@ describe('ImageCanvasEditorView', () => {
       expect(screen.queryByRole('dialog', { name: '修改图片' })).toBeNull();
     });
     expect(screen.getByAltText(/画布图片：生成图片 .* 修改结果/)).toBeTruthy();
+    await waitFor(() => {
+      expect(createEditorAssetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          label: expect.stringMatching(/修改结果/u),
+          imageSrc: 'data:image/png;base64,ZWRpdGVkLWltYWdl',
+          sourceType: 'generated',
+          prompt: '把画面改成黄昏光线',
+          taskId: 'editor-real-edit-1',
+        }),
+      );
+    });
     expect(screen.getByRole('button', { name: '当前缩放比例 100%' })).toBeTruthy();
   });
+
+  it('undoes and redoes canvas layer changes from the panel controls', async () => {
+    await renderLoadedEditor();
+
+    expect(screen.getByRole('button', { name: '撤销' })).toHaveProperty(
+      'disabled',
+      true,
+    );
+    expect(screen.getByRole('button', { name: '重做' })).toHaveProperty(
+      'disabled',
+      true,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '添加声浪素材' }));
+
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+    expect(screen.getByRole('button', { name: '撤销' })).toHaveProperty(
+      'disabled',
+      false,
+    );
+    fireEvent.click(screen.getByRole('button', { name: '撤销' }));
+
+    expect(screen.queryByAltText('画布图片：声浪素材')).toBeNull();
+    expect(screen.getByRole('button', { name: '重做' })).toHaveProperty(
+      'disabled',
+      false,
+    );
+    fireEvent.click(screen.getByRole('button', { name: '重做' }));
+
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+  });
+
+  it('supports undo and redo keyboard shortcuts inside the editor', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: '添加声浪素材' }));
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+
+    fireEvent.keyDown(window, { key: 'z', code: 'KeyZ', ctrlKey: true });
+    expect(screen.queryByAltText('画布图片：声浪素材')).toBeNull();
+
+    fireEvent.keyDown(window, {
+      key: 'Z',
+      code: 'KeyZ',
+      ctrlKey: true,
+      shiftKey: true,
+    });
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 23b25f7c..71d5589b 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -3,6 +3,7 @@ import {
   Check,
   CheckSquare,
   ChevronDown,
+  ChevronLeft,
   ChevronRight,
   Copy,
   Crop,
@@ -25,12 +26,15 @@ import {
   Square,
   Trash2,
   Type,
+  Redo2,
+  Undo2,
   WandSparkles,
   X,
 } from 'lucide-react';
 import {
   type DragEvent as ReactDragEvent,
   type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
@@ -116,7 +120,12 @@ type CanvasLayer = {
   objectKey?: string | null;
   assetObjectId?: string | null;
   sourceResourceId?: string | null;
+  sourceAssetId?: string | null;
   groupId?: string | null;
+  hidden?: boolean;
+  locked?: boolean;
+  flipX?: boolean;
+  flipY?: boolean;
 };
 
 type CanvasViewport = {
@@ -189,6 +198,35 @@ type CanvasMarqueeState = {
   currentY: number;
 };
 
+type CanvasHistorySnapshot = {
+  layers: CanvasLayer[];
+  viewport: CanvasViewport;
+  generateDialog: GenerateDialogState | null;
+  selectedLayerId: string | null;
+  selectedLayerIds: string[];
+};
+
+type CanvasClipboard = {
+  layers: CanvasLayer[];
+};
+
+type CanvasContextMenuState =
+  | {
+      kind: 'blank';
+      x: number;
+      y: number;
+      canvasPoint: { x: number; y: number };
+    }
+  | {
+      kind: 'layer';
+      x: number;
+      y: number;
+      layerId: string;
+      canvasPoint: { x: number; y: number };
+    };
+
+type UploadDropTarget = 'canvas' | 'assets' | null;
+
 type DragState =
   | {
       kind: 'pan';
@@ -223,64 +261,6 @@ type DragState =
       pointerId: number;
     };
 
-const EDITOR_ASSETS: EditorAsset[] = [
-  {
-    id: 'puzzle',
-    label: '拼图素材',
-    src: '/creation-type-references/puzzle.webp',
-    width: 640,
-    height: 640,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'match3d',
-    label: '抓大鹅素材',
-    src: '/creation-type-references/match3d.webp',
-    width: 640,
-    height: 640,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'big-fish',
-    label: '大鱼素材',
-    src: '/creation-type-references/big-fish.webp',
-    width: 720,
-    height: 405,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'bark-battle',
-    label: '声浪素材',
-    src: '/creation-type-references/bark-battle.webp',
-    width: 640,
-    height: 900,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'visual-novel',
-    label: '视觉小说素材',
-    src: '/creation-type-references/visual-novel.webp',
-    width: 720,
-    height: 405,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-];
-
 const EDITOR_ASSET_FOLDERS: EditorAssetFolder[] = [
   {
     id: 'project',
@@ -291,47 +271,23 @@ const EDITOR_ASSET_FOLDERS: EditorAssetFolder[] = [
   },
 ];
 
-const INITIAL_LAYERS: CanvasLayer[] = [
-  {
-    id: 'layer-puzzle',
-    resourceId: 'resource-puzzle',
-    title: '拼图素材',
-    src: '/creation-type-references/puzzle.webp',
-    x: 470,
-    y: 300,
-    width: 420,
-    height: 420,
-    originalWidth: 640,
-    originalHeight: 640,
-    zIndex: 1,
-    sourceType: 'uploaded',
-  },
-  {
-    id: 'layer-big-fish',
-    resourceId: 'resource-big-fish',
-    title: '大鱼素材',
-    src: '/creation-type-references/big-fish.webp',
-    x: 930,
-    y: 360,
-    width: 420,
-    height: 236,
-    originalWidth: 720,
-    originalHeight: 405,
-    zIndex: 2,
-    sourceType: 'uploaded',
-  },
-];
-
 const CANVAS_WORLD_SIZE = 12000;
 const CANVAS_WORLD_ORIGIN = CANVAS_WORLD_SIZE / 2;
 const MIN_SCALE = 0.24;
 const MAX_SCALE = 3.2;
+const MAX_HISTORY_STEPS = 80;
 const TOOLBAR_HALF_WIDTH = 132;
 const DEFAULT_CANVAS_SIZE = { width: 900, height: 640 };
 const SNAP_THRESHOLD_SCREEN_PX = 18;
 const FIT_VIEW_PADDING = 10;
 const MINIMAP_SIZE = { width: 132, height: 84 };
 const MINIMAP_PADDING = 8;
+const CONTEXT_MENU_SIZE = {
+  blank: { width: 176, height: 148 },
+  layer: { width: 176, height: 444 },
+};
+const CONTEXT_MENU_VIEWPORT_MARGIN = 8;
+const ASSET_DRAG_MIME_TYPE = 'application/x-genarrative-editor-asset';
 const CANVAS_BACKGROUND_OPTIONS = [
   { label: '白色', value: '#ffffff' },
   { label: '浅灰', value: '#f8fafc' },
@@ -385,6 +341,7 @@ function createLayerFromAsset(
     taskId: asset.taskId,
     objectKey: asset.objectKey,
     assetObjectId: asset.assetObjectId,
+    sourceAssetId: asset.id,
   } satisfies CanvasLayer;
 }
 
@@ -410,7 +367,12 @@ function serializeLayer(layer: CanvasLayer): EditorProjectLayerSnapshot {
     objectKey: layer.objectKey,
     assetObjectId: layer.assetObjectId,
     sourceResourceId: layer.sourceResourceId,
+    sourceAssetId: layer.sourceAssetId,
     groupId: layer.groupId,
+    hidden: layer.hidden,
+    locked: layer.locked,
+    flipX: layer.flipX,
+    flipY: layer.flipY,
   };
 }
 
@@ -446,7 +408,12 @@ function hydrateLayer(snapshot: EditorProjectLayerSnapshot): CanvasLayer | null
     objectKey: stringOrNull(snapshot.objectKey),
     assetObjectId: stringOrNull(snapshot.assetObjectId),
     sourceResourceId: stringOrNull(snapshot.sourceResourceId),
+    sourceAssetId: stringOrNull(snapshot.sourceAssetId),
     groupId: stringOrNull(snapshot.groupId),
+    hidden: booleanFromSnapshot(snapshot.hidden),
+    locked: booleanFromSnapshot(snapshot.locked),
+    flipX: booleanFromSnapshot(snapshot.flipX),
+    flipY: booleanFromSnapshot(snapshot.flipY),
   };
 }
 
@@ -483,15 +450,29 @@ function mapAssetLibrarySnapshot(library: EditorAssetLibrarySnapshot): {
   };
 }
 
-function mergeAssetLibraryWithBuiltIns(library: EditorAssetLibrarySnapshot) {
+function normalizeAssetLibrary(library: EditorAssetLibrarySnapshot) {
   const mapped = mapAssetLibrarySnapshot(library);
-  const persistedFolderIds = new Set(mapped.folders.map((folder) => folder.id));
-  const builtInFolders = EDITOR_ASSET_FOLDERS.filter(
-    (folder) => !persistedFolderIds.has(folder.id),
-  );
+  let hasDefaultFolder = false;
+  const normalizedFolders = mapped.folders.map((folder) => {
+    if (!folder.systemDefault) {
+      return folder;
+    }
+    if (hasDefaultFolder) {
+      return {
+        ...folder,
+        systemDefault: false,
+      };
+    }
+    hasDefaultFolder = true;
+    return folder;
+  });
+  const persistedFolderIds = new Set(normalizedFolders.map((folder) => folder.id));
+  const fallbackFolders = hasDefaultFolder
+    ? []
+    : EDITOR_ASSET_FOLDERS.filter((folder) => !persistedFolderIds.has(folder.id));
   return {
-    folders: [...mapped.folders, ...builtInFolders],
-    assets: [...EDITOR_ASSETS, ...mapped.assets],
+    folders: [...normalizedFolders, ...fallbackFolders],
+    assets: mapped.assets,
   };
 }
 
@@ -503,6 +484,49 @@ function stringOrNull(value: unknown) {
   return typeof value === 'string' && value.trim() ? value : null;
 }
 
+function booleanFromSnapshot(value: unknown) {
+  return value === true;
+}
+
+function resolveContextMenuPosition(
+  clientX: number,
+  clientY: number,
+  kind: CanvasContextMenuState['kind'],
+) {
+  if (typeof window === 'undefined') {
+    return { x: clientX, y: clientY };
+  }
+  const menuSize = CONTEXT_MENU_SIZE[kind];
+  return {
+    x: clamp(
+      clientX,
+      CONTEXT_MENU_VIEWPORT_MARGIN,
+      Math.max(
+        CONTEXT_MENU_VIEWPORT_MARGIN,
+        window.innerWidth - menuSize.width - CONTEXT_MENU_VIEWPORT_MARGIN,
+      ),
+    ),
+    y: clamp(
+      clientY,
+      CONTEXT_MENU_VIEWPORT_MARGIN,
+      Math.max(
+        CONTEXT_MENU_VIEWPORT_MARGIN,
+        window.innerHeight - menuSize.height - CONTEXT_MENU_VIEWPORT_MARGIN,
+      ),
+    ),
+  };
+}
+
+function getDraggedAssetId(dataTransfer: DataTransfer) {
+  if (
+    !dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE) ||
+    typeof dataTransfer.getData !== 'function'
+  ) {
+    return '';
+  }
+  return dataTransfer.getData(ASSET_DRAG_MIME_TYPE);
+}
+
 function isCanvasSourceType(value: unknown): value is CanvasLayer['sourceType'] {
   return value === 'uploaded' || value === 'generated' || value === 'mock_generated';
 }
@@ -511,6 +535,22 @@ function isGeneratedLayer(layer: CanvasLayer) {
   return layer.sourceType === 'generated' || layer.sourceType === 'mock_generated';
 }
 
+function isLayerLinkedToAsset(layer: CanvasLayer, asset: EditorAsset) {
+  return (
+    layer.sourceAssetId === asset.id ||
+    Boolean(asset.assetObjectId && layer.assetObjectId === asset.assetObjectId) ||
+    Boolean(asset.objectKey && layer.objectKey === asset.objectKey) ||
+    layer.src === asset.src
+  );
+}
+
+function isLayerValidForAssetLibrary(layer: CanvasLayer, assets: EditorAsset[]) {
+  if (isGeneratedLayer(layer)) {
+    return true;
+  }
+  return assets.some((asset) => isLayerLinkedToAsset(layer, asset));
+}
+
 function getLayerBounds(targetLayers: CanvasLayer[]) {
   if (targetLayers.length === 0) {
     return null;
@@ -609,10 +649,24 @@ export function ImageCanvasEditorView() {
   const assetListRef = useRef<HTMLDivElement | null>(null);
   const dragStateRef = useRef<DragState | null>(null);
   const isShiftPressedRef = useRef(false);
-  const layerCounterRef = useRef(INITIAL_LAYERS.length);
+  const layerCounterRef = useRef(0);
   const saveTimerRef = useRef<number | null>(null);
+  const undoStackRef = useRef<CanvasHistorySnapshot[]>([]);
+  const redoStackRef = useRef<CanvasHistorySnapshot[]>([]);
+  const layersRef = useRef<CanvasLayer[]>([]);
+  const viewportRef = useRef<CanvasViewport>({
+    x: -260,
+    y: 70,
+    scale: 0.82,
+  });
+  const generateDialogRef = useRef<GenerateDialogState | null>(null);
+  const selectedLayerIdRef = useRef<string | null>(null);
+  const selectedLayerIdsRef = useRef<string[]>([]);
+  const dragHistoryCapturedRef = useRef(false);
   const [projectId, setProjectId] = useState<string | null>(null);
+  const [projectTitle, setProjectTitle] = useState('未命名画布');
   const [isProjectReady, setIsProjectReady] = useState(false);
+  const [isAssetLibraryReady, setIsAssetLibraryReady] = useState(false);
   const [activeSidebarPanel, setActiveSidebarPanel] =
     useState<SidebarPanel | null>('assets');
   const [viewport, setViewport] = useState<CanvasViewport>({
@@ -623,8 +677,8 @@ export function ImageCanvasEditorView() {
   const [canvasSize, setCanvasSize] = useState(DEFAULT_CANVAS_SIZE);
   const [assetFolders, setAssetFolders] =
     useState<EditorAssetFolder[]>(EDITOR_ASSET_FOLDERS);
-  const [assets, setAssets] = useState<EditorAsset[]>(EDITOR_ASSETS);
-  const [layers, setLayers] = useState<CanvasLayer[]>(INITIAL_LAYERS);
+  const [assets, setAssets] = useState<EditorAsset[]>([]);
+  const [layers, setLayers] = useState<CanvasLayer[]>([]);
   const [renamingAsset, setRenamingAsset] = useState<{
     assetId: string;
     value: string;
@@ -646,12 +700,8 @@ export function ImageCanvasEditorView() {
   const [canvasMarquee, setCanvasMarquee] = useState<CanvasMarqueeState | null>(
     null,
   );
-  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(
-    INITIAL_LAYERS[0]?.id ?? null,
-  );
-  const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>(
-    INITIAL_LAYERS[0]?.id ? [INITIAL_LAYERS[0].id] : [],
-  );
+  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null);
+  const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([]);
   const [hoveredLayerId, setHoveredLayerId] = useState<string | null>(null);
   const [activeTool, setActiveTool] = useState<CanvasTool>('select');
   const [isSpacePanning, setIsSpacePanning] = useState(false);
@@ -666,12 +716,21 @@ export function ImageCanvasEditorView() {
   const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(null);
   const [generateDialog, setGenerateDialog] =
     useState<GenerateDialogState | null>(null);
+  const [historyVersion, setHistoryVersion] = useState(0);
+  const [canvasClipboard, setCanvasClipboard] =
+    useState<CanvasClipboard | null>(null);
+  const [contextMenu, setContextMenu] =
+    useState<CanvasContextMenuState | null>(null);
+  const [uploadDropTarget, setUploadDropTarget] =
+    useState<UploadDropTarget>(null);
 
   const effectiveTool: CanvasTool = isSpacePanning ? 'hand' : activeTool;
   const selectedLayer = useMemo(
     () => layers.find((layer) => layer.id === selectedLayerId) ?? null,
     [layers, selectedLayerId],
   );
+  const selectedLayerCount = selectedLayerIds.length;
+  const hasMultipleSelectedLayers = selectedLayerCount > 1;
   const activeGenerationLayer = useMemo(
     () =>
       generateDialog?.mode === 'generate' && generateDialog.generatedLayerId
@@ -723,6 +782,116 @@ export function ImageCanvasEditorView() {
     selectableAssets.length > 0 &&
     selectableAssets.every((asset) => selectedAssetIds.has(asset.id));
 
+  useEffect(() => {
+    layersRef.current = layers;
+  }, [layers]);
+
+  useEffect(() => {
+    viewportRef.current = viewport;
+  }, [viewport]);
+
+  useEffect(() => {
+    generateDialogRef.current = generateDialog;
+  }, [generateDialog]);
+
+  useEffect(() => {
+    selectedLayerIdRef.current = selectedLayerId;
+  }, [selectedLayerId]);
+
+  useEffect(() => {
+    selectedLayerIdsRef.current = selectedLayerIds;
+  }, [selectedLayerIds]);
+
+  const getCanvasHistorySnapshot = useCallback(
+    (): CanvasHistorySnapshot => ({
+      layers: layersRef.current.map((layer) => ({ ...layer })),
+      viewport: { ...viewportRef.current },
+      generateDialog: generateDialogRef.current
+        ? {
+            ...generateDialogRef.current,
+            placeholder: generateDialogRef.current.placeholder
+              ? { ...generateDialogRef.current.placeholder }
+              : undefined,
+          }
+        : null,
+      selectedLayerId: selectedLayerIdRef.current,
+      selectedLayerIds: [...selectedLayerIdsRef.current],
+    }),
+    [],
+  );
+
+  const restoreCanvasHistorySnapshot = useCallback(
+    (snapshot: CanvasHistorySnapshot) => {
+      setLayers(snapshot.layers.map((layer) => ({ ...layer })));
+      setViewport({ ...snapshot.viewport });
+      setGenerateDialog(
+        snapshot.generateDialog
+          ? {
+              ...snapshot.generateDialog,
+              placeholder: snapshot.generateDialog.placeholder
+                ? { ...snapshot.generateDialog.placeholder }
+                : undefined,
+            }
+          : null,
+      );
+      setSelectedLayerId(snapshot.selectedLayerId);
+      setSelectedLayerIds([...snapshot.selectedLayerIds]);
+      setHoveredLayerId(null);
+      setMetadataLayer(null);
+      setCanvasMarquee(null);
+      setSnapGuide(null);
+      setIsPanning(false);
+      dragStateRef.current = null;
+    },
+    [],
+  );
+
+  const captureCanvasHistory = useCallback(
+    (options: { clearRedo?: boolean } = {}) => {
+      undoStackRef.current = [
+        ...undoStackRef.current.slice(-(MAX_HISTORY_STEPS - 1)),
+        getCanvasHistorySnapshot(),
+      ];
+      if (options.clearRedo !== false) {
+        redoStackRef.current = [];
+      }
+      setHistoryVersion((version) => version + 1);
+    },
+    [getCanvasHistorySnapshot],
+  );
+
+  const undoCanvasChange = useCallback(() => {
+    const previousSnapshot = undoStackRef.current.at(-1);
+    if (!previousSnapshot) {
+      return;
+    }
+    undoStackRef.current = undoStackRef.current.slice(0, -1);
+    redoStackRef.current = [
+      ...redoStackRef.current.slice(-(MAX_HISTORY_STEPS - 1)),
+      getCanvasHistorySnapshot(),
+    ];
+    restoreCanvasHistorySnapshot(previousSnapshot);
+    setHistoryVersion((version) => version + 1);
+  }, [getCanvasHistorySnapshot, restoreCanvasHistorySnapshot]);
+
+  const redoCanvasChange = useCallback(() => {
+    const nextSnapshot = redoStackRef.current.at(-1);
+    if (!nextSnapshot) {
+      return;
+    }
+    redoStackRef.current = redoStackRef.current.slice(0, -1);
+    undoStackRef.current = [
+      ...undoStackRef.current.slice(-(MAX_HISTORY_STEPS - 1)),
+      getCanvasHistorySnapshot(),
+    ];
+    restoreCanvasHistorySnapshot(nextSnapshot);
+    setHistoryVersion((version) => version + 1);
+  }, [getCanvasHistorySnapshot, restoreCanvasHistorySnapshot]);
+
+  const canUndo = undoStackRef.current.length > 0;
+  const canRedo = redoStackRef.current.length > 0;
+  void historyVersion;
+
   const selectSingleLayer = (layerId: string | null) => {
     setSelectedLayerId(layerId);
     setSelectedLayerIds(layerId ? [layerId] : []);
@@ -807,15 +976,17 @@ export function ImageCanvasEditorView() {
           return;
         }
         setProjectId(project.projectId);
+        setProjectTitle(project.title?.trim() || '未命名画布');
         setViewport(project.viewport);
         const hydratedLayers = project.layers
           .map(hydrateLayer)
           .filter((layer): layer is CanvasLayer => Boolean(layer));
-        if (hydratedLayers.length > 0) {
-          layerCounterRef.current = hydratedLayers.length;
-          setLayers(hydratedLayers);
-          selectSingleLayer(hydratedLayers[0]?.id ?? null);
-        }
+        layerCounterRef.current = hydratedLayers.length;
+        setLayers(hydratedLayers);
+        selectSingleLayer(hydratedLayers[0]?.id ?? null);
+        undoStackRef.current = [];
+        redoStackRef.current = [];
+        setHistoryVersion((version) => version + 1);
         setIsProjectReady(true);
       })
       .catch(() => {
@@ -836,15 +1007,16 @@ export function ImageCanvasEditorView() {
         if (cancelled) {
           return;
         }
-        const nextLibrary = mergeAssetLibraryWithBuiltIns(library);
+        const nextLibrary = normalizeAssetLibrary(library);
         setAssetFolders(nextLibrary.folders);
         setAssets(nextLibrary.assets);
         const defaultFolder = nextLibrary.folders.find(
           (folder) => folder.systemDefault,
         );
         setActiveUploadFolderId(defaultFolder?.id ?? nextLibrary.folders[0]?.id ?? 'project');
+        setIsAssetLibraryReady(true);
       })
-      .catch(() => {});
+      .catch(() => setIsAssetLibraryReady(true));
     return () => {
       cancelled = true;
     };
@@ -877,6 +1049,22 @@ export function ImageCanvasEditorView() {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
+      const isHistoryShortcut =
+        !isEditableTarget(event) && (event.ctrlKey || event.metaKey);
+      if (isHistoryShortcut && event.key.toLowerCase() === 'z') {
+        event.preventDefault();
+        if (event.shiftKey) {
+          redoCanvasChange();
+        } else {
+          undoCanvasChange();
+        }
+        return;
+      }
+      if (isHistoryShortcut && event.key.toLowerCase() === 'y') {
+        event.preventDefault();
+        redoCanvasChange();
+        return;
+      }
       if (event.key === 'Shift') {
         isShiftPressedRef.current = true;
       }
@@ -884,6 +1072,7 @@ export function ImageCanvasEditorView() {
         setActiveSidebarPanel(null);
         setIsZoomMenuOpen(false);
         setIsBackgroundMenuOpen(false);
+        setContextMenu(null);
         setGenerateDialog((currentDialog) =>
           currentDialog?.status === 'generating'
             ? currentDialog
@@ -919,7 +1108,25 @@ export function ImageCanvasEditorView() {
       window.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('keyup', handleKeyUp);
     };
-  }, []);
+  }, [redoCanvasChange, undoCanvasChange]);
+
+  useEffect(() => {
+    if (!contextMenu) {
+      return undefined;
+    }
+    const closeContextMenu = (event: PointerEvent) => {
+      const target = event.target;
+      if (
+        target instanceof Element &&
+        target.closest('.image-canvas-editor__context-menu')
+      ) {
+        return;
+      }
+      setContextMenu(null);
+    };
+    window.addEventListener('pointerdown', closeContextMenu);
+    return () => window.removeEventListener('pointerdown', closeContextMenu);
+  }, [contextMenu]);
 
   useEffect(() => {
     const blockBrowserZoom = (event: WheelEvent) => {
@@ -942,6 +1149,31 @@ export function ImageCanvasEditorView() {
     };
   }, []);
 
+  useEffect(() => {
+    if (!isProjectReady || !isAssetLibraryReady) {
+      return;
+    }
+    const invalidLayerIds = layers
+      .filter((layer) => !isLayerValidForAssetLibrary(layer, assets))
+      .map((layer) => layer.id);
+    if (!invalidLayerIds.length) {
+      return;
+    }
+    const invalidLayerIdSet = new Set(invalidLayerIds);
+    setLayers((currentLayers) =>
+      currentLayers.filter((layer) => !invalidLayerIdSet.has(layer.id)),
+    );
+    setSelectedLayerIds((currentIds) =>
+      currentIds.filter((layerId) => !invalidLayerIdSet.has(layerId)),
+    );
+    setSelectedLayerId((currentId) =>
+      currentId && invalidLayerIdSet.has(currentId) ? null : currentId,
+    );
+    setMetadataLayer((currentLayer) =>
+      currentLayer && invalidLayerIdSet.has(currentLayer.id) ? null : currentLayer,
+    );
+  }, [assets, isAssetLibraryReady, isProjectReady, layers]);
+
   useEffect(() => {
     if (!projectId || !isProjectReady) {
       return undefined;
@@ -984,6 +1216,7 @@ export function ImageCanvasEditorView() {
         MAX_SCALE,
       );
 
+      captureCanvasHistory();
       setViewport({
         x:
           canvasSize.width / 2 -
@@ -994,12 +1227,13 @@ export function ImageCanvasEditorView() {
         scale,
       });
     },
-    [canvasSize.height, canvasSize.width, layers],
+    [captureCanvasHistory, canvasSize.height, canvasSize.width, layers],
   );
 
   const updateScaleFromCenter = (nextScale: number) => {
     const viewportElement = canvasViewportRef.current;
     if (!viewportElement) {
+      captureCanvasHistory();
       setViewport((currentViewport) => ({
         ...currentViewport,
         scale: clamp(nextScale, MIN_SCALE, MAX_SCALE),
@@ -1010,6 +1244,7 @@ export function ImageCanvasEditorView() {
     const rect = viewportElement.getBoundingClientRect();
     const centerX = rect.width > 0 ? rect.width / 2 : canvasSize.width / 2;
     const centerY = rect.height > 0 ? rect.height / 2 : canvasSize.height / 2;
+    captureCanvasHistory();
     setViewport((currentViewport) => {
       const scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);
       const worldX = (centerX - currentViewport.x) / currentViewport.scale;
@@ -1022,6 +1257,230 @@ export function ImageCanvasEditorView() {
     });
   };
 
+  const getCanvasPointFromClient = (clientX: number, clientY: number) => {
+    const rect = canvasViewportRef.current?.getBoundingClientRect();
+    const screenX = clientX - (rect?.left ?? 0);
+    const screenY = clientY - (rect?.top ?? 0);
+    return {
+      x: (screenX - viewport.x) / viewport.scale,
+      y: (screenY - viewport.y) / viewport.scale,
+    };
+  };
+
+  const getContextTargetLayerIds = (
+    menu: CanvasContextMenuState | null = contextMenu,
+  ) => {
+    if (menu?.kind !== 'layer') {
+      return [];
+    }
+    return selectedLayerIds.includes(menu.layerId)
+      ? selectedLayerIds
+      : [menu.layerId];
+  };
+
+  const duplicateLayersToPoint = (
+    sourceLayers: CanvasLayer[],
+    canvasPoint?: { x: number; y: number },
+  ) => {
+    if (!sourceLayers.length) {
+      return [];
+    }
+    const minX = Math.min(...sourceLayers.map((layer) => layer.x));
+    const minY = Math.min(...sourceLayers.map((layer) => layer.y));
+    const maxZIndex = layersRef.current.reduce(
+      (maxZ, layer) => Math.max(maxZ, layer.zIndex),
+      0,
+    );
+    return sourceLayers.map((layer, index) => ({
+      ...layer,
+      id: `layer-copy-${Date.now()}-${index}`,
+      resourceId: `local-resource-copy-${Date.now()}-${index}`,
+      title: `${layer.title} 副本`,
+      x: canvasPoint ? canvasPoint.x + (layer.x - minX) : layer.x + 32,
+      y: canvasPoint ? canvasPoint.y + (layer.y - minY) : layer.y + 32,
+      zIndex: maxZIndex + index + 1,
+      groupId: null,
+    }));
+  };
+
+  const pasteCanvasClipboard = (canvasPoint?: { x: number; y: number }) => {
+    if (!canvasClipboard?.layers.length) {
+      return;
+    }
+    const nextLayers = duplicateLayersToPoint(canvasClipboard.layers, canvasPoint);
+    if (!nextLayers.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
+    setSelectedLayerIds(nextLayers.map((layer) => layer.id));
+    setSelectedLayerId(nextLayers[0]?.id ?? null);
+    setActiveTool('select');
+    setContextMenu(null);
+  };
+
+  const copyContextLayers = (options: { cut?: boolean } = {}) => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayers = layers.filter((layer) => targetIds.includes(layer.id));
+    if (!targetLayers.length) {
+      return;
+    }
+    setCanvasClipboard({
+      layers: targetLayers.map((layer) => ({ ...layer })),
+    });
+    if (options.cut) {
+      captureCanvasHistory();
+      setLayers((currentLayers) =>
+        currentLayers.filter((layer) => !targetIds.includes(layer.id)),
+      );
+      selectSingleLayer(null);
+      setMetadataLayer((currentLayer) =>
+        currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
+      );
+    }
+    setContextMenu(null);
+  };
+
+  const duplicateContextLayers = () => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayers = layers.filter((layer) => targetIds.includes(layer.id));
+    const nextLayers = duplicateLayersToPoint(targetLayers);
+    if (!nextLayers.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
+    setSelectedLayerIds(nextLayers.map((layer) => layer.id));
+    setSelectedLayerId(nextLayers[0]?.id ?? null);
+    setContextMenu(null);
+  };
+
+  const updateContextLayers = (
+    updater: (layer: CanvasLayer, targetIds: string[]) => CanvasLayer,
+  ) => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      currentLayers.map((layer) =>
+        targetIds.includes(layer.id) ? updater(layer, targetIds) : layer,
+      ),
+    );
+    setContextMenu(null);
+  };
+
+  const moveContextLayers = (mode: 'up' | 'down' | 'top' | 'bottom') => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    const maxZIndex = layers.reduce((maxZ, layer) => Math.max(maxZ, layer.zIndex), 0);
+    const minZIndex = layers.reduce((minZ, layer) => Math.min(minZ, layer.zIndex), 0);
+    let offsetIndex = 0;
+    updateContextLayers((layer) => {
+      if (mode === 'up') {
+        return { ...layer, zIndex: layer.zIndex + 1 };
+      }
+      if (mode === 'down') {
+        return { ...layer, zIndex: layer.zIndex - 1 };
+      }
+      offsetIndex += 1;
+      if (mode === 'top') {
+        return { ...layer, zIndex: maxZIndex + offsetIndex };
+      }
+      return { ...layer, zIndex: minZIndex - (targetIds.length - offsetIndex + 1) };
+    });
+  };
+
+  const groupContextLayers = () => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    const groupId = `layer-group-${Date.now()}`;
+    updateContextLayers((layer) => ({
+      ...layer,
+      groupId,
+    }));
+  };
+
+  const ungroupContextLayers = () => {
+    updateContextLayers((layer) => ({
+      ...layer,
+      groupId: null,
+    }));
+  };
+
+  const toggleContextLayerVisibility = () => {
+    const targetIds = getContextTargetLayerIds();
+    const shouldHide = layers
+      .filter((layer) => targetIds.includes(layer.id))
+      .some((layer) => !layer.hidden);
+    updateContextLayers((layer) => ({
+      ...layer,
+      hidden: shouldHide,
+    }));
+  };
+
+  const toggleContextLayerLock = () => {
+    const targetIds = getContextTargetLayerIds();
+    const shouldLock = layers
+      .filter((layer) => targetIds.includes(layer.id))
+      .some((layer) => !layer.locked);
+    updateContextLayers((layer) => ({
+      ...layer,
+      locked: shouldLock,
+    }));
+  };
+
+  const flipContextLayers = (axis: 'x' | 'y') => {
+    updateContextLayers((layer) =>
+      axis === 'x'
+        ? {
+            ...layer,
+            flipX: !layer.flipX,
+          }
+        : {
+            ...layer,
+            flipY: !layer.flipY,
+          },
+    );
+  };
+
+  const exportContextLayer = () => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
+    if (!targetLayer) {
+      return;
+    }
+    const link = document.createElement('a');
+    link.href = targetLayer.src;
+    link.download = `${targetLayer.title || 'canvas-layer'}.png`;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setContextMenu(null);
+  };
+
+  const deleteContextLayers = () => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      currentLayers.filter((layer) => !targetIds.includes(layer.id)),
+    );
+    selectSingleLayer(null);
+    setHoveredLayerId(null);
+    setMetadataLayer((currentLayer) =>
+      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
+    );
+    setContextMenu(null);
+  };
+
   const createProjectResourceForLayer = (
     layer: CanvasLayer,
     options: { onCreated?: (resourceId: string) => void } = {},
@@ -1059,6 +1518,104 @@ export function ImageCanvasEditorView() {
       .catch(() => {});
   };
 
+  const createAssetFromGeneratedLayer = (layer: CanvasLayer) => {
+    const targetFolder =
+      assetFolders.find((folder) => folder.systemDefault) ?? assetFolders[0];
+    if (!targetFolder) {
+      return;
+    }
+    const temporaryAssetId = `generated-asset-${layer.id}`;
+    const temporaryAsset: EditorAsset = {
+      id: temporaryAssetId,
+      label: layer.title,
+      src: layer.src,
+      width: layer.originalWidth,
+      height: layer.originalHeight,
+      folderId: targetFolder.id,
+      sourceKind: 'uploaded',
+      sourceType: layer.sourceType,
+      persisted: false,
+      prompt: layer.prompt ?? undefined,
+      actualPrompt: layer.actualPrompt ?? undefined,
+      model: layer.model ?? undefined,
+      provider: layer.provider ?? undefined,
+      taskId: layer.taskId ?? undefined,
+      objectKey: layer.objectKey ?? undefined,
+      assetObjectId: layer.assetObjectId ?? undefined,
+    };
+
+    setAssets((currentAssets) => [...currentAssets, temporaryAsset]);
+    setAssetFolders((currentFolders) =>
+      currentFolders.map((folder) =>
+        folder.id === targetFolder.id
+          ? {
+              ...folder,
+              collapsed: false,
+            }
+          : folder,
+      ),
+    );
+
+    createEditorAsset({
+      folderId: targetFolder.id,
+      label: layer.title,
+      imageSrc: layer.src,
+      width: layer.originalWidth,
+      height: layer.originalHeight,
+      sourceType: layer.sourceType,
+      prompt: layer.prompt,
+      actualPrompt: layer.actualPrompt,
+      model: layer.model,
+      provider: layer.provider,
+      taskId: layer.taskId,
+      objectKey: layer.objectKey,
+      assetObjectId: layer.assetObjectId,
+    })
+      .then((asset) => {
+        setAssets((currentAssets) =>
+          currentAssets.map((currentAsset) =>
+            currentAsset.id === temporaryAssetId
+              ? {
+                  ...currentAsset,
+                  id: asset.assetId,
+                  folderId: asset.folderId,
+                  label: asset.label,
+                  src: asset.imageSrc,
+                  width: asset.width,
+                  height: asset.height,
+                  sourceType: asset.sourceType,
+                  prompt: asset.prompt ?? undefined,
+                  actualPrompt: asset.actualPrompt ?? undefined,
+                  model: asset.model ?? undefined,
+                  provider: asset.provider ?? undefined,
+                  taskId: asset.taskId ?? undefined,
+                  objectKey: asset.objectKey ?? undefined,
+                  assetObjectId: asset.assetObjectId ?? undefined,
+                  persisted: true,
+                }
+              : currentAsset,
+          ),
+        );
+        setLayers((currentLayers) =>
+          currentLayers.map((currentLayer) =>
+            currentLayer.id === layer.id
+              ? {
+                  ...currentLayer,
+                  sourceAssetId: asset.assetId,
+                  objectKey: asset.objectKey ?? currentLayer.objectKey,
+                  assetObjectId: asset.assetObjectId ?? currentLayer.assetObjectId,
+                }
+              : currentLayer,
+          ),
+        );
+      })
+      .catch(() => {
+        setAssets((currentAssets) =>
+          currentAssets.filter((asset) => asset.id !== temporaryAssetId),
+        );
+      });
+  };
+
   const addAssetLayer = (asset: EditorAsset, position?: { x: number; y: number }) => {
     setActiveUploadFolderId(asset.folderId);
     layerCounterRef.current += 1;
@@ -1071,6 +1628,7 @@ export function ImageCanvasEditorView() {
         y: position?.y ?? canvasSize.height / 2,
       },
     );
+    captureCanvasHistory();
     setLayers((currentLayers) => [...currentLayers, nextLayer]);
     selectSingleLayer(nextLayer.id);
     setHoveredLayerId(null);
@@ -1106,6 +1664,48 @@ export function ImageCanvasEditorView() {
     setRenamingAsset(null);
   };
 
+  const moveAssetToFolder = (assetId: string, folderId: string) => {
+    const movingAsset = assets.find((asset) => asset.id === assetId);
+    if (!movingAsset || movingAsset.folderId === folderId) {
+      return;
+    }
+    const previousFolderId = movingAsset.folderId;
+    setAssets((currentAssets) =>
+      currentAssets.map((asset) =>
+        asset.id === assetId
+          ? {
+              ...asset,
+              folderId,
+            }
+          : asset,
+      ),
+    );
+    setAssetFolders((currentFolders) =>
+      currentFolders.map((folder) =>
+        folder.id === folderId
+          ? {
+              ...folder,
+              collapsed: false,
+            }
+          : folder,
+      ),
+    );
+    if (movingAsset.persisted) {
+      updateEditorAsset(assetId, { folderId }).catch(() => {
+        setAssets((currentAssets) =>
+          currentAssets.map((asset) =>
+            asset.id === assetId
+              ? {
+                  ...asset,
+                  folderId: previousFolderId,
+                }
+              : asset,
+          ),
+        );
+      });
+    }
+  };
+
   const toggleAssetFolder = (folderId: string) => {
     const nextFolder = assetFolders.find((folder) => folder.id === folderId);
     const nextCollapsed = !(nextFolder?.collapsed ?? false);
@@ -1180,9 +1780,32 @@ export function ImageCanvasEditorView() {
     if (asset.sourceKind !== 'uploaded') {
       return;
     }
+    captureCanvasHistory();
     setAssets((currentAssets) =>
       currentAssets.filter((currentAsset) => currentAsset.id !== asset.id),
     );
+    setLayers((currentLayers) =>
+      currentLayers.filter((layer) => !isLayerLinkedToAsset(layer, asset)),
+    );
+    setSelectedLayerIds((currentIds) =>
+      currentIds.filter(
+        (layerId) =>
+          !layersRef.current.some(
+            (layer) => layer.id === layerId && isLayerLinkedToAsset(layer, asset),
+          ),
+      ),
+    );
+    setSelectedLayerId((currentId) =>
+      currentId &&
+      layersRef.current.some(
+        (layer) => layer.id === currentId && isLayerLinkedToAsset(layer, asset),
+      )
+        ? null
+        : currentId,
+    );
+    setMetadataLayer((currentLayer) =>
+      currentLayer && isLayerLinkedToAsset(currentLayer, asset) ? null : currentLayer,
+    );
     setRenamingAsset((currentRename) =>
       currentRename?.assetId === asset.id ? null : currentRename,
     );
@@ -1246,7 +1869,7 @@ export function ImageCanvasEditorView() {
     if (folder.persisted) {
       deleteEditorAssetFolder(folder.id)
         .then((library) => {
-          const nextLibrary = mergeAssetLibraryWithBuiltIns(library);
+          const nextLibrary = normalizeAssetLibrary(library);
           setAssetFolders(nextLibrary.folders);
           setAssets(nextLibrary.assets);
         })
@@ -1276,9 +1899,44 @@ export function ImageCanvasEditorView() {
 
   const deleteSelectedAssets = () => {
     const ids = [...selectedAssetIds];
+    const deletingAssets = assets.filter((asset) => selectedAssetIds.has(asset.id));
+    if (deletingAssets.length) {
+      captureCanvasHistory();
+    }
     setAssets((currentAssets) =>
       currentAssets.filter((asset) => !selectedAssetIds.has(asset.id)),
     );
+    setLayers((currentLayers) =>
+      currentLayers.filter(
+        (layer) => !deletingAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
+      ),
+    );
+    setSelectedLayerIds((currentIds) =>
+      currentIds.filter(
+        (layerId) =>
+          !layersRef.current.some(
+            (layer) =>
+              layer.id === layerId &&
+              deletingAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
+          ),
+      ),
+    );
+    setSelectedLayerId((currentId) =>
+      currentId &&
+      layersRef.current.some(
+        (layer) =>
+          layer.id === currentId &&
+          deletingAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
+      )
+        ? null
+        : currentId,
+    );
+    setMetadataLayer((currentLayer) =>
+      currentLayer &&
+      deletingAssets.some((asset) => isLayerLinkedToAsset(currentLayer, asset))
+        ? null
+        : currentLayer,
+    );
     setSelectedAssetIds(new Set());
     ids.forEach((assetId) => {
       void deleteEditorAsset(assetId);
@@ -1329,7 +1987,10 @@ export function ImageCanvasEditorView() {
       return;
     }
     const target = event.target as HTMLElement;
-    if (target.closest('button, input, textarea, select, [data-asset-id]')) {
+    if (target.closest('input, textarea, select')) {
+      return;
+    }
+    if (target.closest('button') && !target.closest('[data-asset-id]')) {
       return;
     }
     event.preventDefault();
@@ -1572,6 +2233,9 @@ export function ImageCanvasEditorView() {
       addToCanvas?: boolean;
     } = {},
   ) => {
+    if (options.addToCanvas) {
+      captureCanvasHistory();
+    }
     Array.from(files).forEach((file, index) => {
       layerCounterRef.current += 1;
       const uploadIndex = layerCounterRef.current;
@@ -1590,11 +2254,18 @@ export function ImageCanvasEditorView() {
   };
 
   const deleteSelectedLayer = () => {
-    if (!selectedLayerId) {
+    const targetIds = selectedLayerIds.length
+      ? selectedLayerIds
+      : selectedLayerId
+        ? [selectedLayerId]
+        : [];
+    if (!targetIds.length) {
       return;
     }
+    captureCanvasHistory();
     setLayers((currentLayers) => {
-      const nextLayers = currentLayers.filter((layer) => layer.id !== selectedLayerId);
+      const targetIdSet = new Set(targetIds);
+      const nextLayers = currentLayers.filter((layer) => !targetIdSet.has(layer.id));
       const nextSelectedLayer = nextLayers
         .slice()
         .sort((left, right) => right.zIndex - left.zIndex)[0];
@@ -1603,7 +2274,7 @@ export function ImageCanvasEditorView() {
     });
     setHoveredLayerId(null);
     setMetadataLayer((currentLayer) =>
-      currentLayer?.id === selectedLayerId ? null : currentLayer,
+      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
     );
   };
 
@@ -1612,6 +2283,7 @@ export function ImageCanvasEditorView() {
     const placeholderHeight = 420;
     const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
     const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
+    captureCanvasHistory();
     setGenerateDialog({
       mode: 'generate',
       prompt: '',
@@ -1710,6 +2382,7 @@ export function ImageCanvasEditorView() {
     if (options.sourceLayer) {
       fitLayers([options.sourceLayer, nextLayer]);
     }
+    createAssetFromGeneratedLayer(nextLayer);
     createProjectResourceForLayer(nextLayer);
   };
 
@@ -1717,6 +2390,7 @@ export function ImageCanvasEditorView() {
     const normalizedPrompt =
       dialog.prompt.trim() ||
       (dialog.mode === 'edit' ? '修改当前图片' : 'AI 生成图片');
+    captureCanvasHistory();
     setGenerateDialog({
       ...dialog,
       prompt: normalizedPrompt,
@@ -1743,13 +2417,13 @@ export function ImageCanvasEditorView() {
         addGeneratedResultLayer(generated, { frame: dialog.placeholder });
       }
     } catch (error) {
-    setGenerateDialog({
-      ...dialog,
-      prompt: normalizedPrompt,
-      status: 'failed',
-      composerOpen: true,
-      errorMessage: resolveImageGenerationErrorMessage(error),
-    });
+      setGenerateDialog({
+        ...dialog,
+        prompt: normalizedPrompt,
+        status: 'failed',
+        composerOpen: true,
+        errorMessage: resolveImageGenerationErrorMessage(error),
+      });
     }
   };
 
@@ -1790,6 +2464,69 @@ export function ImageCanvasEditorView() {
     });
   };
 
+  const handleViewportContextMenu = (
+    event: ReactMouseEvent<HTMLDivElement>,
+  ) => {
+    event.preventDefault();
+    const target = event.target as HTMLElement;
+    if (target.closest('.image-canvas-editor__layer')) {
+      return;
+    }
+    const canvasPoint = getCanvasPointFromClient(event.clientX, event.clientY);
+    const position = resolveContextMenuPosition(
+      event.clientX,
+      event.clientY,
+      'blank',
+    );
+    selectSingleLayer(null);
+    setContextMenu({
+      kind: 'blank',
+      x: position.x,
+      y: position.y,
+      canvasPoint,
+    });
+  };
+
+  const handleLayerContextMenu = (
+    event: ReactMouseEvent<HTMLElement>,
+    layer: CanvasLayer,
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const nextSelectedIds = selectedLayerIds.includes(layer.id)
+      ? selectedLayerIds
+      : [layer.id];
+    setSelectedLayerId(layer.id);
+    setSelectedLayerIds(nextSelectedIds);
+    setGenerateDialog((currentDialog) => {
+      if (currentDialog?.mode !== 'generate') {
+        return currentDialog;
+      }
+      if (currentDialog.generatedLayerId === layer.id) {
+        return {
+          ...currentDialog,
+          composerOpen: true,
+        };
+      }
+      return {
+        ...currentDialog,
+        composerOpen: false,
+      };
+    });
+    const position = resolveContextMenuPosition(
+      event.clientX,
+      event.clientY,
+      'layer',
+    );
+    setContextMenu({
+      kind: 'layer',
+      x: position.x,
+      y: position.y,
+      layerId: layer.id,
+      canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
+    });
+  };
+
   const startPan = (event: ReactPointerEvent<HTMLDivElement>) => {
     event.preventDefault();
     const pointer = getPointerClient(event);
@@ -1802,11 +2539,12 @@ export function ImageCanvasEditorView() {
       startClientY: pointer.y,
       startViewport: viewport,
     };
+    dragHistoryCapturedRef.current = false;
   };
 
   const handleCanvasPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
     const button = getPointerButton(event);
-    if (button !== 0 || effectiveTool === 'hand') {
+    if (button === 1 || (button === 0 && effectiveTool === 'hand')) {
       startPan(event);
       return;
     }
@@ -1841,16 +2579,26 @@ export function ImageCanvasEditorView() {
   const handleCanvasDragOver = (event: ReactDragEvent<HTMLDivElement>) => {
     if (event.dataTransfer.types.includes('Files')) {
       event.preventDefault();
+      setUploadDropTarget('canvas');
       event.dataTransfer.dropEffect = 'copy';
     }
   };
 
+  const handleCanvasDragLeave = (event: ReactDragEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+      setUploadDropTarget((currentTarget) =>
+        currentTarget === 'canvas' ? null : currentTarget,
+      );
+    }
+  };
+
   const handleCanvasDrop = (event: ReactDragEvent<HTMLDivElement>) => {
     const files = event.dataTransfer.files;
     if (!files.length) {
       return;
     }
     event.preventDefault();
+    setUploadDropTarget(null);
     const rect = canvasViewportRef.current?.getBoundingClientRect();
     const canvasPoint = rect
       ? {
@@ -1886,8 +2634,6 @@ export function ImageCanvasEditorView() {
 
     event.preventDefault();
     event.stopPropagation();
-    const pointer = getPointerClient(event);
-    canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
     const isMultiSelectGesture = event.shiftKey || isShiftPressedRef.current;
     const nextSelectedIds = isMultiSelectGesture
       ? selectedLayerIds.includes(layer.id)
@@ -1913,8 +2659,18 @@ export function ImageCanvasEditorView() {
         composerOpen: false,
       };
     });
+    if (layer.locked) {
+      dragStateRef.current = null;
+      return;
+    }
+    const pointer = getPointerClient(event);
+    canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
     const dragLayerIds = nextSelectedIds.includes(layer.id)
-      ? nextSelectedIds
+      ? nextSelectedIds.filter((layerId) =>
+          layers.some(
+            (currentLayer) => currentLayer.id === layerId && !currentLayer.locked,
+          ),
+        )
       : [layer.id];
     const startLayers = layers
       .filter((currentLayer) => dragLayerIds.includes(currentLayer.id))
@@ -1935,6 +2691,7 @@ export function ImageCanvasEditorView() {
       startLayers,
       startScale: viewport.scale,
     };
+    dragHistoryCapturedRef.current = false;
   };
 
   const handleGenerationFramePointerDown = (
@@ -1976,6 +2733,7 @@ export function ImageCanvasEditorView() {
       startFrameY: generateDialog.placeholder.y,
       startScale: viewport.scale,
     };
+    dragHistoryCapturedRef.current = false;
   };
 
   const moveViewportFromMinimapPointer = (clientX: number, clientY: number) => {
@@ -2013,6 +2771,8 @@ export function ImageCanvasEditorView() {
       kind: 'minimap',
       pointerId: getPointerId(event),
     };
+    captureCanvasHistory();
+    dragHistoryCapturedRef.current = true;
     moveViewportFromMinimapPointer(pointer.x, pointer.y);
   };
 
@@ -2064,6 +2824,10 @@ export function ImageCanvasEditorView() {
     }
 
     if (dragState.kind === 'pan') {
+      if (!dragHistoryCapturedRef.current) {
+        captureCanvasHistory();
+        dragHistoryCapturedRef.current = true;
+      }
       const pointer = getPointerClient(event);
       setViewport({
         ...dragState.startViewport,
@@ -2074,6 +2838,10 @@ export function ImageCanvasEditorView() {
     }
 
     if (dragState.kind === 'generation-frame') {
+      if (!dragHistoryCapturedRef.current) {
+        captureCanvasHistory();
+        dragHistoryCapturedRef.current = true;
+      }
       const pointer = getPointerClient(event);
       const deltaX = (pointer.x - dragState.startClientX) / dragState.startScale;
       const deltaY = (pointer.y - dragState.startClientY) / dragState.startScale;
@@ -2093,6 +2861,10 @@ export function ImageCanvasEditorView() {
     }
 
     if (dragState.kind === 'minimap') {
+      if (!dragHistoryCapturedRef.current) {
+        captureCanvasHistory();
+        dragHistoryCapturedRef.current = true;
+      }
       const pointer = getPointerClient(event);
       moveViewportFromMinimapPointer(pointer.x, pointer.y);
       return;
@@ -2103,6 +2875,10 @@ export function ImageCanvasEditorView() {
       return;
     }
     const pointer = getPointerClient(event);
+    if (!dragHistoryCapturedRef.current) {
+      captureCanvasHistory();
+      dragHistoryCapturedRef.current = true;
+    }
     const deltaX = (pointer.x - dragState.startClientX) / dragState.startScale;
     const deltaY = (pointer.y - dragState.startClientY) / dragState.startScale;
     const snapped = resolveSnappedLayerPosition(
@@ -2158,6 +2934,7 @@ export function ImageCanvasEditorView() {
       (dragState.pointerId < 0 || pointerId < 0 || dragState.pointerId === pointerId)
     ) {
       dragStateRef.current = null;
+      dragHistoryCapturedRef.current = false;
       setIsPanning(false);
       setSnapGuide(null);
       if (canvasViewportRef.current?.hasPointerCapture?.(event.pointerId)) {
@@ -2197,6 +2974,7 @@ export function ImageCanvasEditorView() {
       return;
     }
     const groupId = `layer-group-${Date.now()}`;
+    captureCanvasHistory();
     setLayers((currentLayers) =>
       currentLayers.map((layer) =>
         targetIds.includes(layer.id)
@@ -2225,6 +3003,11 @@ export function ImageCanvasEditorView() {
     { id: 'shape', label: '形状标注工具', icon: Shapes },
     { id: 'export', label: '导出工具', icon: Download },
   ];
+  const contextTargetLayers = contextMenu?.kind === 'layer'
+    ? layers.filter((layer) => getContextTargetLayerIds(contextMenu).includes(layer.id))
+    : [];
+  const contextShouldShowLayer = contextTargetLayers.some((layer) => layer.hidden);
+  const contextShouldUnlockLayer = contextTargetLayers.some((layer) => layer.locked);
 
   return (
     <section
@@ -2297,12 +3080,19 @@ export function ImageCanvasEditorView() {
           {activeSidebarPanel === 'assets' ? (
             <div
               ref={assetListRef}
-              className="image-canvas-editor__asset-list"
-              onPointerDown={handleAssetMarqueePointerDown}
-              onPointerMove={handleAssetMarqueePointerMove}
-              onPointerUp={handleAssetMarqueePointerUp}
-              onPointerCancel={handleAssetMarqueePointerUp}
-            >
+          className="image-canvas-editor__asset-list"
+          onPointerDown={handleAssetMarqueePointerDown}
+          onPointerMove={handleAssetMarqueePointerMove}
+          onPointerUp={handleAssetMarqueePointerUp}
+          onPointerCancel={handleAssetMarqueePointerUp}
+          onDragLeave={(event) => {
+            if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+              setUploadDropTarget((currentTarget) =>
+                currentTarget === 'assets' ? null : currentTarget,
+              );
+            }
+          }}
+        >
               {creatingFolder ? (
                 <form
                   className="image-canvas-editor__folder-create"
@@ -2348,18 +3138,35 @@ export function ImageCanvasEditorView() {
                   className="image-canvas-editor__asset-folder"
                   aria-label={folder.label}
                   onDragOver={(event) => {
+                    if (event.dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE)) {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      setUploadDropTarget('assets');
+                      event.dataTransfer.dropEffect = 'move';
+                      return;
+                    }
                     if (event.dataTransfer.types.includes('Files')) {
                       event.preventDefault();
                       event.stopPropagation();
+                      setUploadDropTarget('assets');
                       event.dataTransfer.dropEffect = 'copy';
                     }
                   }}
                   onDrop={(event) => {
+                    const movingAssetId = getDraggedAssetId(event.dataTransfer);
+                    if (movingAssetId) {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      setUploadDropTarget(null);
+                      moveAssetToFolder(movingAssetId, folder.id);
+                      return;
+                    }
                     if (!event.dataTransfer.files.length) {
                       return;
                     }
                     event.preventDefault();
                     event.stopPropagation();
+                    setUploadDropTarget(null);
                     addUploadedFiles(event.dataTransfer.files, { folderId: folder.id });
                   }}
                 >
@@ -2533,6 +3340,39 @@ export function ImageCanvasEditorView() {
                             metaClassName="image-canvas-editor__asset-meta"
                             titleNode={titleNode}
                             actions={actions}
+                            draggable={!isRenaming}
+                            onDragStart={(event) => {
+                              if (isRenaming) {
+                                event.preventDefault();
+                                return;
+                              }
+                              event.dataTransfer.effectAllowed = 'move';
+                              event.dataTransfer.setData(
+                                ASSET_DRAG_MIME_TYPE,
+                                asset.id,
+                              );
+                              event.dataTransfer.setData('text/plain', asset.label);
+                              setUploadDropTarget('assets');
+                            }}
+                            onDragEnd={() => {
+                              setUploadDropTarget((currentTarget) =>
+                                currentTarget === 'assets' ? null : currentTarget,
+                              );
+                            }}
+                            onPointerDown={(event) => {
+                              if (!isAssetSelectionMode || event.button !== 0) {
+                                return;
+                              }
+                              const target = event.target as HTMLElement;
+                              if (target.closest('button')) {
+                                return;
+                              }
+                              event.preventDefault();
+                              event.stopPropagation();
+                              handleAssetMarqueePointerDown(
+                                event as ReactPointerEvent<HTMLDivElement>,
+                              );
+                            }}
                             onPointerEnter={(event) => {
                               if (isAssetSelectionMode && event.buttons === 1) {
                                 setSelectedAssetIds((currentIds) => {
@@ -2543,18 +3383,37 @@ export function ImageCanvasEditorView() {
                               }
                             }}
                             onDragOver={(event) => {
+                              if (event.dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE)) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setUploadDropTarget('assets');
+                                event.dataTransfer.dropEffect = 'move';
+                                return;
+                              }
                               if (event.dataTransfer.types.includes('Files')) {
                                 event.preventDefault();
                                 event.stopPropagation();
+                                setUploadDropTarget('assets');
                                 event.dataTransfer.dropEffect = 'copy';
                               }
                             }}
                             onDrop={(event) => {
+                              const movingAssetId = getDraggedAssetId(
+                                event.dataTransfer,
+                              );
+                              if (movingAssetId) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setUploadDropTarget(null);
+                                moveAssetToFolder(movingAssetId, asset.folderId);
+                                return;
+                              }
                               if (!event.dataTransfer.files.length) {
                                 return;
                               }
                               event.preventDefault();
                               event.stopPropagation();
+                              setUploadDropTarget(null);
                               addUploadedFiles(event.dataTransfer.files, {
                                 folderId: asset.folderId,
                               });
@@ -2615,6 +3474,15 @@ export function ImageCanvasEditorView() {
                   }}
                 />
               ) : null}
+              {uploadDropTarget === 'assets' ? (
+                <div
+                  className="image-canvas-editor__upload-drop-overlay image-canvas-editor__upload-drop-overlay--assets"
+                  role="status"
+                >
+                  <span>添加到素材</span>
+                  <strong>松开即可添加</strong>
+                </div>
+              ) : null}
             </div>
           ) : (
             <div className="image-canvas-editor__layers-list">
@@ -2625,16 +3493,24 @@ export function ImageCanvasEditorView() {
                   <SidebarMediaItem
                     key={layer.id}
                     title={layer.title}
-                    detail={`${Math.round(layer.width)} x ${Math.round(layer.height)}${layer.groupId ? ' · 已打组' : ''}`}
+                    detail={[
+                      `${Math.round(layer.width)} x ${Math.round(layer.height)}`,
+                      layer.groupId ? '已打组' : null,
+                      layer.hidden ? '已隐藏' : null,
+                      layer.locked ? '已锁定' : null,
+                    ]
+                      .filter(Boolean)
+                      .join(' · ')}
                     imageSrc={layer.src}
                     imageAlt={`图层缩略图：${layer.title}`}
-                    selected={selectedLayerId === layer.id}
+                    selected={selectedLayerIds.includes(layer.id)}
                     primaryLabel={`选择图层${layer.title}`}
                     onPrimaryClick={() => selectSingleLayer(layer.id)}
                     rowClassName="image-canvas-editor__layer-row"
                     primaryClassName="image-canvas-editor__layer-row-button"
                     thumbnailClassName="image-canvas-editor__layer-row-thumb"
                     metaClassName="image-canvas-editor__layer-row-meta"
+                    onContextMenu={(event) => handleLayerContextMenu(event, layer)}
                   />
                 ))}
             </div>
@@ -2644,9 +3520,19 @@ export function ImageCanvasEditorView() {
 
       <div className="image-canvas-editor__main">
         <div className="image-canvas-editor__topbar">
-          <div className="image-canvas-editor__title-block">
-            <h1>图片编辑器</h1>
-            <span>画布</span>
+          <div className="image-canvas-editor__topbar-title">
+            <a
+              className="image-canvas-editor__project-back-button"
+              href="/project"
+              aria-label="返回项目页面"
+              title="返回项目"
+            >
+              <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+            </a>
+            <div className="image-canvas-editor__title-block">
+              <h1>{projectTitle}</h1>
+              <span>画布</span>
+            </div>
           </div>
         </div>
 
@@ -2661,8 +3547,19 @@ export function ImageCanvasEditorView() {
           onPointerCancel={finishDrag}
           onWheel={handleWheel}
           onDragOver={handleCanvasDragOver}
+          onDragLeave={handleCanvasDragLeave}
           onDrop={handleCanvasDrop}
+          onContextMenu={handleViewportContextMenu}
         >
+          {uploadDropTarget === 'canvas' ? (
+            <div
+              className="image-canvas-editor__upload-drop-overlay image-canvas-editor__upload-drop-overlay--canvas"
+              role="status"
+            >
+              <span>添加到画布</span>
+              <strong>松开即可添加</strong>
+            </div>
+          ) : null}
           <div
             className="image-canvas-editor__world"
             style={{
@@ -2688,6 +3585,7 @@ export function ImageCanvasEditorView() {
 
             {layers
               .slice()
+              .filter((layer) => !layer.hidden)
               .sort((left, right) => left.zIndex - right.zIndex)
               .map((layer) => {
                 const isSelected = selectedLayerIds.includes(layer.id);
@@ -2696,7 +3594,7 @@ export function ImageCanvasEditorView() {
                   <button
                     key={layer.id}
                     type="button"
-                    className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''}`}
+                    className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
                     style={{
                       left: layer.x,
                       top: layer.y,
@@ -2705,6 +3603,7 @@ export function ImageCanvasEditorView() {
                       zIndex: layer.zIndex,
                     }}
                     onPointerDown={(event) => handleLayerPointerDown(event, layer)}
+                    onContextMenu={(event) => handleLayerContextMenu(event, layer)}
                     onMouseEnter={() => setHoveredLayerId(layer.id)}
                     onMouseLeave={() =>
                       setHoveredLayerId((currentId) =>
@@ -2713,7 +3612,13 @@ export function ImageCanvasEditorView() {
                     }
                     aria-label={`选择${layer.title}`}
                   >
-                    <img src={layer.src} alt={`画布图片：${layer.title}`} />
+                    <img
+                      src={layer.src}
+                      alt={`画布图片：${layer.title}`}
+                      style={{
+                        transform: `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})`,
+                      }}
+                    />
                     {isGeneratedLayer(layer) ? (
                       <PlatformIconButton
                         asChild="spanButton"
@@ -2792,7 +3697,7 @@ export function ImageCanvasEditorView() {
             ) : null}
           </div>
 
-          {selectedLayer && selectedToolbarStyle ? (
+          {selectedLayer && !selectedLayer.hidden && selectedToolbarStyle ? (
             <div
               className="image-canvas-editor__floating-toolbar"
               style={selectedToolbarStyle}
@@ -2815,7 +3720,7 @@ export function ImageCanvasEditorView() {
                 icon={Trash2}
                 onClick={deleteSelectedLayer}
               />
-              {isGeneratedLayer(selectedLayer) ? (
+              {!hasMultipleSelectedLayers && isGeneratedLayer(selectedLayer) ? (
                 <>
                   <EditorIconButton
                     label={`查看${selectedLayer.title}元数据`}
@@ -2834,6 +3739,138 @@ export function ImageCanvasEditorView() {
             </div>
           ) : null}
 
+          {contextMenu ? (
+            <div
+              className="image-canvas-editor__context-menu"
+              role="menu"
+              aria-label={
+                contextMenu.kind === 'blank' ? '画布右键菜单' : '图层右键菜单'
+              }
+              style={{
+                left: contextMenu.x,
+                top: contextMenu.y,
+              }}
+              onContextMenu={(event) => event.preventDefault()}
+              onPointerDown={(event) => event.stopPropagation()}
+            >
+              {contextMenu.kind === 'blank' ? (
+                <>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    disabled={!canvasClipboard?.layers.length}
+                    onClick={() => pasteCanvasClipboard(contextMenu.canvasPoint)}
+                  >
+                    粘贴
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 1.16);
+                      setContextMenu(null);
+                    }}
+                  >
+                    放大
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 0.86);
+                      setContextMenu(null);
+                    }}
+                  >
+                    缩小
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      fitLayers();
+                      setContextMenu(null);
+                    }}
+                  >
+                    显示画布所有元素
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button type="button" role="menuitem" onClick={() => copyContextLayers()}>
+                    复制
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => copyContextLayers({ cut: true })}
+                  >
+                    剪切
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    disabled={!canvasClipboard?.layers.length}
+                    onClick={() => pasteCanvasClipboard(contextMenu.canvasPoint)}
+                  >
+                    粘贴
+                  </button>
+                  <button type="button" role="menuitem" onClick={duplicateContextLayers}>
+                    创建副本
+                  </button>
+                  <hr />
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('up')}>
+                    上移一层
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('down')}>
+                    下移一层
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('top')}>
+                    移动至顶层
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('bottom')}>
+                    移动至底层
+                  </button>
+                  <hr />
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={groupContextLayers}
+                  >
+                    创建组
+                  </button>
+                  <button type="button" role="menuitem" onClick={ungroupContextLayers}>
+                    解除组
+                  </button>
+                  <button type="button" role="menuitem" onClick={toggleContextLayerVisibility}>
+                    {contextShouldShowLayer ? '显示' : '隐藏'}
+                  </button>
+                  <button type="button" role="menuitem" onClick={toggleContextLayerLock}>
+                    {contextShouldUnlockLayer ? '解锁' : '锁定'}
+                  </button>
+                  <hr />
+                  <button type="button" role="menuitem" onClick={() => flipContextLayers('x')}>
+                    水平翻转
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => flipContextLayers('y')}>
+                    垂直翻转
+                  </button>
+                  <button type="button" role="menuitem" onClick={exportContextLayer}>
+                    导出为
+                  </button>
+                  <hr />
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className="image-canvas-editor__context-menu-danger"
+                    onClick={deleteContextLayers}
+                  >
+                    删除
+                  </button>
+                </>
+              )}
+            </div>
+          ) : null}
+
           <EditorIconButton
             className="image-canvas-editor__reset-button"
             label="重置画布视图"
@@ -2848,60 +3885,20 @@ export function ImageCanvasEditorView() {
             aria-label="画布面板入口"
             onPointerDown={(event) => event.stopPropagation()}
           >
-            <div className="image-canvas-editor__zoom-menu-wrap">
-              <PlatformInlineOptionButton
-                className="image-canvas-editor__zoom-trigger"
-                aria-label={`当前缩放比例 ${formatPercent(viewport.scale)}`}
-                aria-haspopup="menu"
-                aria-expanded={isZoomMenuOpen}
-                onClick={() => setIsZoomMenuOpen((open) => !open)}
-              >
-                {formatPercent(viewport.scale)}
-              </PlatformInlineOptionButton>
-              {isZoomMenuOpen ? (
-                <PlatformFloatingMenu label="缩放菜单" placement="top-start">
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 1.16);
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    放大
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 0.86);
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    缩小
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      fitLayers();
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    显示画布所有元素
-                  </PlatformFloatingMenuItem>
-                  {[0.5, 1, 2].map((scale) => (
-                    <PlatformFloatingMenuItem
-                      key={scale}
-                      className="image-canvas-editor__zoom-menu-item"
-                      onClick={() => {
-                        updateScaleFromCenter(scale);
-                        setIsZoomMenuOpen(false);
-                      }}
-                    >
-                      缩放至{Math.round(scale * 100)}%
-                    </PlatformFloatingMenuItem>
-                  ))}
-                </PlatformFloatingMenu>
-              ) : null}
-            </div>
+            <EditorIconButton
+              label="撤销"
+              title="撤销"
+              icon={Undo2}
+              disabled={!canUndo}
+              onClick={undoCanvasChange}
+            />
+            <EditorIconButton
+              label="重做"
+              title="重做"
+              icon={Redo2}
+              disabled={!canRedo}
+              onClick={redoCanvasChange}
+            />
             <div className="image-canvas-editor__background-control">
               <PlatformIconButton
                 label="画布背景色"
@@ -2962,6 +3959,60 @@ export function ImageCanvasEditorView() {
               pressed={isMinimapOpen}
               onClick={() => setIsMinimapOpen((open) => !open)}
             />
+            <div className="image-canvas-editor__zoom-menu-wrap">
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__zoom-trigger"
+                aria-label={`当前缩放比例 ${formatPercent(viewport.scale)}`}
+                aria-haspopup="menu"
+                aria-expanded={isZoomMenuOpen}
+                onClick={() => setIsZoomMenuOpen((open) => !open)}
+              >
+                {formatPercent(viewport.scale)}
+              </PlatformInlineOptionButton>
+              {isZoomMenuOpen ? (
+                <PlatformFloatingMenu label="缩放菜单" placement="top-start">
+                  <PlatformFloatingMenuItem
+                    className="image-canvas-editor__zoom-menu-item"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 1.16);
+                      setIsZoomMenuOpen(false);
+                    }}
+                  >
+                    放大
+                  </PlatformFloatingMenuItem>
+                  <PlatformFloatingMenuItem
+                    className="image-canvas-editor__zoom-menu-item"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 0.86);
+                      setIsZoomMenuOpen(false);
+                    }}
+                  >
+                    缩小
+                  </PlatformFloatingMenuItem>
+                  <PlatformFloatingMenuItem
+                    className="image-canvas-editor__zoom-menu-item"
+                    onClick={() => {
+                      fitLayers();
+                      setIsZoomMenuOpen(false);
+                    }}
+                  >
+                    显示画布所有元素
+                  </PlatformFloatingMenuItem>
+                  {[0.5, 1, 2].map((scale) => (
+                    <PlatformFloatingMenuItem
+                      key={scale}
+                      className="image-canvas-editor__zoom-menu-item"
+                      onClick={() => {
+                        updateScaleFromCenter(scale);
+                        setIsZoomMenuOpen(false);
+                      }}
+                    >
+                      缩放至{Math.round(scale * 100)}%
+                    </PlatformFloatingMenuItem>
+                  ))}
+                </PlatformFloatingMenu>
+              ) : null}
+            </div>
           </div>
 
           {isMinimapOpen && minimapModel ? (
diff --git a/src/index.css b/src/index.css
index d8c799d3..548a2522 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3328,6 +3328,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__icon-button,
+.image-canvas-editor__project-back-button,
 .image-canvas-editor__floating-toolbar button,
 .image-canvas-editor__bottom-toolbar button,
 .image-canvas-editor__reset-button {
@@ -3345,6 +3346,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__icon-button:hover,
+.image-canvas-editor__project-back-button:hover,
 .image-canvas-editor__floating-toolbar button:hover,
 .image-canvas-editor__bottom-toolbar button:hover,
 .image-canvas-editor__reset-button:hover {
@@ -3487,6 +3489,40 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   pointer-events: none;
 }
 
+.image-canvas-editor__upload-drop-overlay {
+  position: absolute;
+  z-index: 30;
+  display: grid;
+  place-content: center;
+  gap: 0.3rem;
+  border: 1.5px dashed rgba(37, 99, 235, 0.72);
+  background: rgba(239, 246, 255, 0.78);
+  color: #1d4ed8;
+  pointer-events: none;
+  text-align: center;
+  backdrop-filter: blur(2px);
+}
+
+.image-canvas-editor__upload-drop-overlay span {
+  font-size: 0.82rem;
+  font-weight: 820;
+}
+
+.image-canvas-editor__upload-drop-overlay strong {
+  font-size: 1rem;
+  font-weight: 920;
+}
+
+.image-canvas-editor__upload-drop-overlay--assets {
+  inset: 0.45rem;
+  border-radius: 0.55rem;
+}
+
+.image-canvas-editor__upload-drop-overlay--canvas {
+  inset: 0.85rem;
+  border-radius: 0.65rem;
+}
+
 .image-canvas-editor__canvas-marquee {
   position: absolute;
   z-index: 7;
@@ -3701,6 +3737,24 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   padding: 0.55rem 0.7rem;
 }
 
+.image-canvas-editor__topbar-title {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.image-canvas-editor__project-back-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.15rem;
+  height: 2.15rem;
+  flex-shrink: 0;
+  border-radius: 0.45rem;
+  text-decoration: none;
+}
+
 .image-canvas-editor__zoom-menu-wrap {
   position: relative;
   z-index: 20;
@@ -3799,6 +3853,63 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
 }
 
+.image-canvas-editor__layer--locked {
+  cursor: default;
+}
+
+.image-canvas-editor__context-menu {
+  position: fixed;
+  z-index: 80;
+  display: grid;
+  min-width: 168px;
+  max-height: calc(100vh - 16px);
+  overflow: hidden;
+  padding: 0.35rem;
+  border: 1px solid rgba(148, 163, 184, 0.32);
+  border-radius: 0.45rem;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.18);
+  color: #172033;
+}
+
+.image-canvas-editor__context-menu button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 2rem;
+  border: 0;
+  border-radius: 0.32rem;
+  background: transparent;
+  padding: 0 0.65rem;
+  color: inherit;
+  font-size: 0.86rem;
+  font-weight: 720;
+  text-align: left;
+  cursor: default;
+}
+
+.image-canvas-editor__context-menu button:hover:not(:disabled),
+.image-canvas-editor__context-menu button:focus-visible:not(:disabled) {
+  background: rgba(37, 99, 235, 0.1);
+  outline: none;
+}
+
+.image-canvas-editor__context-menu button:disabled {
+  color: rgba(100, 116, 139, 0.5);
+}
+
+.image-canvas-editor__context-menu hr {
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background: rgba(148, 163, 184, 0.25);
+  margin: 0.3rem 0;
+}
+
+.image-canvas-editor__context-menu-danger {
+  color: #b42318 !important;
+}
+
 .image-canvas-editor__generation-frame {
   position: absolute;
   z-index: 6;

From 80a382b034299b02409a943e75c8f608a1ad7aff Mon Sep 17 00:00:00 2001
From: Linghong <ink29535@proton.me>
Date: Mon, 15 Jun 2026 16:16:56 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E6=96=B0=E5=A2=9EEditor=20Agent=20Mock=20A?=
 =?UTF-8?q?gent=20P1=E8=90=BD=E5=9C=B0=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增Editor Agent Mock Agent P1落地计划文档

明确P1使用确定性mock Agent生成结构化patch

补充runner命令白名单、工作区隔离、网络隔离和preview安全约束

更新docs总览中的editor agent文档索引
---
 docs/README.md                                |   2 +-
 ...�】EditorAgentMockAgentP1落地计划-2026-06-15.md | 488 ++++++++++++++++++
 2 files changed, 489 insertions(+), 1 deletion(-)
 create mode 100644 docs/technical/【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md

diff --git a/docs/README.md b/docs/README.md
index 78a839aa..45aec037 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -21,7 +21,7 @@
 
 微信小程序虚拟支付接入、`wechat_mp_virtual` 渠道、`wx.requestVirtualPayment` 承接页和后端签名配置见 [【技术方案】微信虚拟支付接入-2026-05-26.md](./%E3%80%90%E6%8A%80%E6%9C%AF%E6%96%B9%E6%A1%88%E3%80%91%E5%BE%AE%E4%BF%A1%E8%99%9A%E6%8B%9F%E6%94%AF%E4%BB%98%E6%8E%A5%E5%85%A5-2026-05-26.md)。
 
-`/editor/agent` 浏览器内 AI Web 工程编辑器的静态 SPA 沙箱预览 MVP，采用“平台编辑器壳 + api-server 控制面 + 独立 runner worker + 独立预览域”四层结构；技术方案、威胁模型和验收清单见 [【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md](./technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md)、[【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md](./technical/【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md) 和 [【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md](./technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md)。
+`/editor/agent` 浏览器内 AI Web 工程编辑器的静态 SPA 沙箱预览 MVP，采用“平台编辑器壳 + api-server 控制面 + 独立 runner worker + 独立预览域”四层结构；技术方案、威胁模型和验收清单见 [【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md](./technical/【技术方案】浏览器内AIWeb工程沙箱预览方案-2026-06-13.md)、[【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md](./technical/【安全模型】AIWeb工程Runner与预览隔离威胁模型-2026-06-13.md) 和 [【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md](./technical/【测试用例】AIWeb工程静态预览MVP验收清单-2026-06-13.md)。P1 先用确定性 mock Agent 生成结构化 patch、真实打通项目 / 快照 / 构建 / artifact / 预览闭环，落地拆分见 [【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md](./technical/【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md)。
 
 `/editor/canvas` 图片画布编辑器的画布素材 ZIP 导出能力，入口放在右上角标题栏下载图标内，第一版采用前端 JSZip 打包画布中有效图层引用的上传图、生成图和修改结果，方案见 [【前端架构】图片画布素材导出方案-2026-06-15.md](./technical/【前端架构】图片画布素材导出方案-2026-06-15.md)。
 
diff --git a/docs/technical/【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md b/docs/technical/【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md
new file mode 100644
index 00000000..9991218a
--- /dev/null
+++ b/docs/technical/【技术方案】EditorAgentMockAgentP1落地计划-2026-06-15.md
@@ -0,0 +1,488 @@
+# Editor Agent Mock Agent P1 落地计划
+
+更新时间：`2026-06-15`
+
+## 背景
+
+`/editor/agent` 的长期目标是浏览器内 AI Web 工程编辑器：用户通过自然语言和代码编辑生成一个完整 Web 工程，并在独立沙箱中预览。当前基础方案已确定为“平台编辑器壳 + api-server 控制面 + 独立 runner + 独立 preview origin”的四层结构。
+
+P1 阶段先不接真实 AI Agent，不调用 LLM、不接 `platform-agent`、不做 Agent 记忆、工具调用或多轮规划。P1 使用确定性的 mock Agent 生成结构化 patch，把风险集中在真正需要先验证的工程链路：项目、快照、patch 校验、静态构建、artifact、preview gateway、iframe 预览和刷新恢复。
+
+## P1 目标
+
+P1 完成一个可端到端验收的最小纵切：
+
+```text
+/editor/agent 输入 mock 指令
+  -> api-server mock Agent 生成结构化 patch
+  -> patch 校验并保存新 snapshot
+  -> 创建 preview build
+  -> runner 静态构建固定模板
+  -> 产出 immutable artifact
+  -> preview gateway 签发独立预览 URL
+  -> 前端 iframe 切换预览
+```
+
+P1 结束时，真实 Agent 仍可后置；后续只替换“需求文本 -> 结构化 patch”的来源，不推翻快照、构建和预览主链路。
+
+## 非目标
+
+P1 明确不做：
+
+- 真实 LLM / Agent 调用。
+- LangChain-Rust / `platform-agent` 接入。
+- 任意 npm 依赖安装。
+- AI 自定义 `package.json` scripts。
+- HMR、长驻 dev server、WebSocket 代理。
+- 终端 shell、后端服务、任意端口代理。
+- Web project 作品化发布。
+- 完整 lease / controller / worker 持久任务队列。
+- 与主站同源预览。
+- 把 AI 生成工程写入当前仓库源码目录。
+
+## 阶段边界
+
+P1 使用 mock Agent，但后续链路必须按生产架构实现：
+
+| 能力 | P1 做法 | 后续替换点 |
+| --- | --- | --- |
+| 需求理解 | api-server 内确定性 mock 规则 | Phase 2/3 接真实 Agent |
+| patch 生成 | mock Agent 返回结构化 patch | 保留同一 patch DTO |
+| patch 校验 | api-server 真实校验 | 继续复用 |
+| 快照保存 | SpacetimeDB 真实持久化 | 可拆对象存储优化 |
+| 静态构建 | runner 真实构建固定模板 | 可换成持久队列领取 |
+| artifact | 本地 / 受控 artifact store | 可换 OSS 或专用 artifact store |
+| 预览 | 独立 origin / 独立端口 iframe | 生产接独立域名 |
+
+## 与原始设计一致性检查
+
+P1 与 2026-06-13 的技术方案、威胁模型和验收清单总体一致：mock Agent 只替换“需求文本 -> 结构化 patch”的来源，不改变“编辑器壳 -> api-server 控制面 -> runner 执行面 -> preview gateway”的信任边界。
+
+为避免实现时放宽安全边界，P1 额外明确以下硬约束：
+
+| 主题 | 原始设计要求 | P1 执行口径 |
+| --- | --- | --- |
+| Agent | AI 只能提交结构化 patch | mock Agent 也只能返回结构化 patch，并必须经过同一后端校验 |
+| api-server | 控制面不执行 AI 工程代码 | api-server 可以创建 job 和触发 runner，但不得直接执行 `npm` / `vite` / 用户工程代码 |
+| 允许命令 | 平台固定构建命令，禁止 AI 自定义脚本 | runner 只允许固定 argv 命令清单，不经 shell，不执行 `npm run`、`npx` 或用户传入命令 |
+| 依赖 | 固定模板依赖，不开放任意 npm | P1 默认离线使用 runner 管理的模板依赖缓存；如需 registry，只能访问平台受控 mirror |
+| 工作区 | 独立临时目录或容器，无宿主源码挂载 | 每个 job 使用 runner 创建的任务级临时目录；禁止挂载当前仓库源码、`.env`、Docker socket 和宿主 `node_modules` |
+| 网络 | 构建期默认无外网 | 默认 deny all；只允许受控 npm mirror 和只读资产签名域，必须阻断内网、metadata、api-server、SpacetimeDB、Docker daemon |
+| artifact | immutable artifact，不复用临时目录 | artifact root 由 runner 配置，不来自请求；preview 只服务 artifact，不服务工作区 |
+| 预览 | 独立 preview origin | 开发态也必须使用独立端口 / origin；不得把预览挂在主站同源路径下 |
+| 状态机 | 失败不覆盖上一版预览 | 只有当前 active snapshot 的 `succeeded` build 能推进 active preview |
+
+## 契约设计
+
+P1 新增 Web Project 契约，Rust `shared-contracts` 与前端 `packages/shared` 保持同名字段。
+
+核心 DTO：
+
+```text
+WebProject
+WebProjectSnapshot
+WebProjectFile
+WebProjectPatch
+WebProjectPatchOperation
+WebProjectPreviewBuild
+WebProjectPreviewBuildEvent
+MockAgentTurnRequest
+MockAgentTurnResponse
+```
+
+P1 字段建议：
+
+- `projectId`：不可枚举字符串 ID。
+- `ownerUserId`：项目归属用户。
+- `templateKey`：固定为 `react-vite-ts-static`。
+- `activeSnapshotId`：当前编辑快照。
+- `activePreviewBuildId`：当前成功预览构建。
+- `files`：P1 可先存为 `Vec<WebProjectFile>` / JSON；只允许小型文本源码。
+- `patchSummary`：mock Agent 或用户编辑摘要。
+- `buildStatus`：`queued | running | succeeded | failed | cancelled | expired | stale`。
+- `previewUrl`：由 api-server 返回给前端，不由前端拼接。
+
+路径和内容限制必须写入契约注释和后端校验：
+
+- 只允许相对路径。
+- 拒绝绝对路径和 `..`。
+- 拒绝 `.env`、`.npmrc`、`.git`、`.ssh`。
+- 拒绝符号链接语义。
+- 限制目录深度、单文件大小、snapshot 总大小。
+- P1 只允许文本源码和少量静态资源。
+- `package.json` 不是事实源；新增依赖和 scripts 在 P1 拒绝或忽略。
+
+## 后端存储
+
+P1 新增 SpacetimeDB 表：
+
+```text
+web_project
+web_project_snapshot
+web_project_preview_build
+```
+
+`web_project`：
+
+- `project_id`
+- `owner_user_id`
+- `title`
+- `template_key`
+- `active_snapshot_id`
+- `active_preview_build_id`
+- `created_at`
+- `updated_at`
+
+`web_project_snapshot`：
+
+- `snapshot_id`
+- `project_id`
+- `owner_user_id`
+- `parent_snapshot_id`
+- `template_key`
+- `files_json`
+- `patch_summary`
+- `created_by`
+- `created_at`
+
+`web_project_preview_build`：
+
+- `job_id`
+- `project_id`
+- `snapshot_id`
+- `owner_user_id`
+- `status`
+- `logs_json`
+- `artifact_id`
+- `preview_token_id`
+- `preview_url`
+- `error_summary`
+- `created_at`
+- `started_at`
+- `finished_at`
+- `updated_at`
+
+落点：
+
+- `server-rs/crates/spacetime-module/src/web_project.rs`
+- `server-rs/crates/spacetime-module/src/lib.rs`
+- `server-rs/crates/spacetime-module/src/migration.rs`
+- `server-rs/crates/spacetime-client/src/mapper/web_project.rs`
+- `server-rs/crates/spacetime-client/src/web_project.rs`
+
+如果已有表新增字段，字段必须放在结构体最后并设置明确默认值；修改字段名或字段类型前必须确认迁移计划。schema 修改后必须执行：
+
+```bash
+npm run spacetime:generate
+npm run check:spacetime-schema
+```
+
+## api-server 控制面
+
+新增模块：
+
+```text
+server-rs/crates/api-server/src/web_project.rs
+server-rs/crates/api-server/src/web_project_mock_agent.rs
+server-rs/crates/api-server/src/modules/web_project.rs
+```
+
+P1 API：
+
+```text
+POST   /api/creation/web-project/projects
+GET    /api/creation/web-project/projects/{projectId}
+GET    /api/creation/web-project/projects/{projectId}/snapshot
+PATCH  /api/creation/web-project/projects/{projectId}/files
+POST   /api/creation/web-project/projects/{projectId}/mock-agent-turns
+POST   /api/runtime/web-project/projects/{projectId}/preview-builds
+GET    /api/runtime/web-project/preview-builds/{jobId}
+GET    /api/runtime/web-project/preview-builds/{jobId}/events
+```
+
+控制面职责：
+
+- 鉴权并校验项目 owner。
+- 创建固定模板项目。
+- 读取 active snapshot。
+- 校验用户编辑和 mock patch。
+- 保存新 snapshot。
+- 创建 preview build。
+- 触发 P1 runner 构建。
+- 记录构建日志和状态。
+- 构建成功后签发 preview URL。
+- 构建失败时保留上一版 active preview。
+
+`/events` 复用 `src/services/sseStream.ts` 的事件口径。P1 可以先用 api-server 内存广播或短轮询兼容，但外部契约必须保持 SSE：
+
+```text
+queued
+running
+log
+succeeded
+failed
+cancelled
+expired
+stale
+```
+
+## Mock Agent 规则
+
+mock Agent 必须确定性、可测试、不可绕过 patch 校验。
+
+输入：
+
+```json
+{
+  "prompt": "做一个蓝色计数按钮页面",
+  "baseSnapshotId": "snapshot_xxx"
+}
+```
+
+输出：
+
+```json
+{
+  "snapshot": "...",
+  "patch": {
+    "operations": [
+      {
+        "type": "updateFile",
+        "path": "src/App.tsx",
+        "content": "..."
+      }
+    ]
+  },
+  "summary": "更新首页计数按钮示例"
+}
+```
+
+P1 至少支持以下 mock 指令族：
+
+- `计数` / `按钮`：生成带计数按钮的 React 页面。
+- `卡片` / `列表`：生成卡片列表页面。
+- `蓝色` / `绿色` / `粉色`：调整 CSS 主题色。
+- `破坏构建`：生成一个 TypeScript 编译错误，用于验收失败保留上一版预览。
+- 其它输入：只更新标题和说明文案，避免 mock 分支过多。
+
+mock Agent 输出仍必须经过统一 `validate_web_project_patch(...)`，不得直接写表。
+
+## Runner 与构建
+
+P1 runner 可以先采用“api-server 创建 job 后触发一次性 runner 进程”的方式，不做持久 worker 队列；但执行面必须独立于 api-server、主站源码目录和预览域。api-server 只传递 job 身份和最小任务能力，不得在自身进程内执行构建命令。
+
+建议新增：
+
+```text
+server-rs/crates/web-project-runner
+```
+
+P1 runner 输入：
+
+- `jobId`
+- `projectId`
+- `snapshotId`
+- snapshot files 包。
+- artifact root 配置键或受控 artifact 写入能力。
+
+请求体、snapshot 或 mock Agent 输出中不得携带 runner 命令、构建参数、工作区路径或 artifact 输出路径。
+
+P1 runner 步骤：
+
+1. 创建任务级临时目录。
+2. 用 runner 内置模板或 runner 管理的只读模板缓存写入固定 React / Vite / TypeScript 模板。
+3. 规范化 snapshot 文件路径，写入前确认最终路径仍在任务临时目录内。
+4. 忽略或重写用户 `package.json` 的危险字段。
+5. 使用环境变量白名单启动子进程，清空平台密钥、`.env`、token、代理和私有 registry 配置。
+6. 执行平台固定命令清单。
+7. 限制 CPU、内存、磁盘、进程数、打开文件数、构建时间、日志长度、单文件大小和 artifact 大小。
+8. 成功后把 `dist/` 复制到 immutable artifact 目录；artifact 目录由 runner 配置计算，不接受请求指定。
+9. 失败时返回错误摘要和日志片段，日志需脱敏并避免完整宿主路径。
+10. 清理临时目录。
+
+P1 允许的构建命令只能来自平台常量，使用 argv 方式执行，不经 shell、不拼接字符串、不执行用户传入命令：
+
+```text
+npm ci --ignore-scripts --offline --no-audit --fund=false
+npm exec --offline -- vite build
+```
+
+如果离线缓存不足，P1 只能改为访问平台受控 npm registry mirror，并由 runner 写入受控 `.npmrc`；用户 snapshot 中的 `.npmrc`、registry、proxy、`package-lock.json` 篡改和新增依赖必须拒绝或重写。禁止为了开发速度复用当前仓库的 `node_modules`、源码目录或本机全局 npm cache 作为 runner 工作区输入。
+
+P1 默认网络策略为 deny all。仅当使用平台受控 registry mirror 或资产只读签名域时开放精确白名单；必须阻断 RFC1918 内网、云 metadata 地址、api-server 管理端口、SpacetimeDB、生产数据库、Docker daemon，并覆盖 HTTP redirect 和 DNS rebinding 到内网的情况。
+
+## Preview Gateway
+
+P1 开发态 preview 可以使用独立端口：
+
+```text
+http://127.0.0.1:<previewPort>/p/<previewToken>/
+```
+
+生产形态继续对齐独立域名：
+
+```text
+https://sandbox.genarrative.world/p/<previewToken>/
+```
+
+gateway 必须：
+
+- 校验 token。
+- 绑定 owner / project / snapshot / artifact。
+- 禁止 path traversal。
+- MIME 类型按白名单输出。
+- `index.html` fallback 只在 artifact 根内生效。
+- token 过期或 artifact 删除后返回确定错误。
+- 输出 CSP，默认 `connect-src 'none'`，并禁用 Service Worker 和持久缓存。
+- 不向预览页注入平台 access token、用户 cookie、SpacetimeDB、OSS 写权限或 LLM provider 密钥。
+
+preview gateway 可以与 api-server 共享代码仓库或部署单元，但服务静态 artifact 的入口必须是独立 listener / 端口 / vhost / origin；不得把 preview artifact 挂到主站同源路径下。
+
+前端 iframe：
+
+```text
+sandbox="allow-scripts"
+```
+
+P1 不增加 `allow-same-origin`、`allow-downloads`、`allow-popups`、`allow-top-navigation`。
+
+## 前端落点
+
+新增：
+
+```text
+src/components/editor/agent/WebProjectAgentEditorPage.tsx
+src/components/editor/agent/WebProjectAgentEditorPage.test.tsx
+src/components/editor/agent/webProjectAgentViewModel.ts
+src/services/web-project/webProjectClient.ts
+src/services/web-project/webProjectSse.ts
+src/services/web-project/webProjectClient.test.ts
+```
+
+入口路由：
+
+```text
+/editor/agent
+```
+
+P1 桌面布局：
+
+- 左侧文件树。
+- 中间代码编辑区，P1 可先用 `<textarea>`。
+- 下方或右侧 mock Agent 输入区。
+- 构建日志区。
+- 右侧 iframe 预览。
+
+P1 移动端布局：
+
+- 使用 tabs：文件、代码、预览、日志。
+- 不默认展示大段功能说明文案。
+- 预览 iframe 保持可见尺寸和明确加载 / 失败状态。
+
+前端状态原则：
+
+- active preview 来自后端返回，不由前端自行推断。
+- 构建失败不清空已有 iframe。
+- 刷新后先读取项目和 active snapshot，再恢复未终态 job 订阅。
+- 用户连续编辑触发新 snapshot 时，旧 build 只能显示为旧日志，不得覆盖新 preview。
+
+## 任务拆分
+
+| 编号 | 任务 | 主要文件 | 完成标准 |
+| --- | --- | --- | --- |
+| P1-01 | 契约与 DTO | `shared-contracts`、`packages/shared` | 前后端类型通过，字段和状态枚举一致 |
+| P1-02 | SpacetimeDB 表与 procedure/facade | `spacetime-module`、`spacetime-client` | 能创建项目、保存 snapshot、记录 build |
+| P1-03 | api-server Web Project 模块 | `api-server/src/web_project.rs` | API 鉴权、owner 校验、读写 snapshot |
+| P1-04 | mock Agent | `api-server/src/web_project_mock_agent.rs` | 指令生成 patch 且走统一校验 |
+| P1-05 | P1 runner | `server-rs/crates/web-project-runner` | 固定模板可构建，失败有日志摘要 |
+| P1-06 | preview gateway | `api-server` 或独立 runner/gateway | 独立 URL 可服务 artifact，token 校验生效 |
+| P1-07 | `/editor/agent` 页面 | `src/components/editor/agent` | 端到端可创建、编辑、构建、预览 |
+| P1-08 | 自动化与 smoke | 测试文件、验收脚本 | happy path 和失败保留旧预览通过 |
+
+## 验收场景
+
+P1 必须通过：
+
+1. 打开 `/editor/agent`，创建固定模板项目。
+2. 输入“做一个蓝色计数按钮页面”。
+3. mock Agent 返回结构化 patch。
+4. api-server 保存新 snapshot。
+5. 前端创建 preview build。
+6. runner 构建成功并产出 immutable artifact。
+7. SSE 返回 `queued -> running -> succeeded`。
+8. iframe 切换到新 preview URL。
+9. 输入“破坏构建”。
+10. 新 build 进入 failed，页面展示错误摘要。
+11. 上一版 active preview 仍保留。
+12. 刷新 `/editor/agent` 后，项目、active snapshot、active preview 和未终态 job 状态可恢复。
+
+安全验收必须覆盖：
+
+- 绝对路径被拒绝。
+- `..` 被拒绝。
+- `.env` / `.npmrc` / `.git` / `.ssh` 被拒绝。
+- 修改 `package.json` 新增依赖被拒绝或忽略。
+- 用户传入构建命令、scripts、registry、proxy 被拒绝或忽略。
+- runner 构建命令不经 shell，且只来自平台 allowlist。
+- runner 无平台密钥环境变量、无宿主源码挂载、无 Docker socket、无宿主 `node_modules` 输入。
+- runner 只能在任务级临时目录写入 snapshot，路径解析后不能逃逸工作区。
+- 构建期默认无外网；允许网络时只能访问平台白名单域名。
+- artifact root 不来自请求，preview 不服务 runner 临时工作区。
+- preview iframe 与主站不同 origin。
+- preview gateway 输出 CSP，禁止 Service Worker 和未白名单 `connect-src`。
+- failed / cancelled / expired / stale 不覆盖 active preview。
+
+## 验证命令
+
+后端与 schema：
+
+```bash
+npm run spacetime:generate
+npm run check:spacetime-schema
+cargo test -p spacetime-module web_project --manifest-path server-rs/Cargo.toml
+cargo test -p spacetime-client web_project --manifest-path server-rs/Cargo.toml
+cargo test -p api-server web_project --manifest-path server-rs/Cargo.toml
+```
+
+前端：
+
+```bash
+npm run test -- src/services/web-project
+npm run test -- src/components/editor/agent
+npm run typecheck
+npm run check:encoding
+git diff --check
+```
+
+浏览器 smoke：
+
+```text
+打开 /editor/agent
+创建模板项目
+提交一次 mock Agent 指令
+等待静态构建成功
+确认 iframe 展示新预览
+提交一次破坏构建的 mock 指令
+确认错误出现且上一版预览仍保留
+刷新页面确认项目、日志和 active preview 可恢复
+```
+
+## 风险与处理
+
+- Runner 与 api-server 边界被做薄：P1 可以由 api-server 触发 runner，但 runner 仍必须独立工作区执行，不能在主站源码目录构建。
+- mock Agent 绕过校验：mock 输出必须走同一 patch DTO 和后端校验函数。
+- P1 为赶进度直接同源预览：禁止；开发态也要独立端口或独立 origin。
+- snapshot 存大 JSON 后续膨胀：P1 限制总大小；P2 再拆 digest/object store。
+- 失败覆盖成功预览：状态机必须以 active snapshot 和 succeeded build 双条件推进 active preview。
+
+## 后续衔接
+
+P1 完成后进入 P2 时，优先补：
+
+- `web_project_runtime_job` 持久任务表。
+- lease / controller / worker 模式。
+- 手动取消、stale、expired 和 runner crash 恢复。
+- 构建日志分页与可重连 SSE。
+- 真实 Agent 接入，但继续产出同一结构化 patch。
+
+真实 Agent 接入前不得扩大 P1 的执行权限；任意依赖安装、HMR、dev server 和作品化发布必须进入后续独立评审。

From 1d570605afd45baab25d20642b5f31d71c1e25f5 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Tue, 16 Jun 2026 16:15:15 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E7=B4=A0=E6=9D=90=E4=B8=8E=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E5=B0=81=E9=9D=A2=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增画布素材导出能力并补充 JSZip 依赖

优化素材上传占位进度、拖拽添加和文件夹移动交互

接入未登录项目访问弹窗并完善项目卡片封面缩略图

补充图片画布与项目页回归测试
---
 package-lock.json                             |  180 ++-
 package.json                                  |    1 +
 .../ImageCanvasEditorPrimitives.tsx           |   13 +-
 .../ImageCanvasEditorView.test.tsx            |  773 +++++++++-
 .../image-editor/ImageCanvasEditorView.tsx    | 1294 +++++++++++++++--
 .../project/ProjectGalleryView.test.tsx       |  135 ++
 src/components/project/ProjectGalleryView.tsx |  141 +-
 src/index.css                                 |  423 +++++-
 8 files changed, 2754 insertions(+), 206 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 528bddb5..9d5e617a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@vitejs/plugin-react": "^5.0.4",
         "cannon-es": "^0.20.0",
         "dotenv": "^17.2.3",
+        "jszip": "^3.10.1",
         "lucide-react": "^0.546.0",
         "motion": "^12.23.24",
         "qrcode": "^1.5.4",
@@ -2749,6 +2750,12 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3925,6 +3932,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3964,8 +3977,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -4029,6 +4041,12 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4203,6 +4221,48 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4225,6 +4285,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -4886,6 +4955,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5114,6 +5189,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -5463,6 +5544,12 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "license": "ISC"
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5996,9 +6083,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/v8-to-istanbul": {
       "version": "9.3.0",
@@ -9503,6 +9588,11 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -10331,6 +10421,11 @@
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -10360,8 +10455,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.8",
@@ -10408,6 +10502,11 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -10536,6 +10635,46 @@
       "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
       "dev": true
     },
+    "jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.8",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10555,6 +10694,14 @@
         "type-check": "~0.4.0"
       }
     },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -10944,6 +11091,11 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
     },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11099,6 +11251,11 @@
         }
       }
     },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -11334,6 +11491,11 @@
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -11701,9 +11863,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "v8-to-istanbul": {
       "version": "9.3.0",
diff --git a/package.json b/package.json
index de61e0f3..126f396f 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@vitejs/plugin-react": "^5.0.4",
     "cannon-es": "^0.20.0",
     "dotenv": "^17.2.3",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.546.0",
     "motion": "^12.23.24",
     "qrcode": "^1.5.4",
diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
index 8b82d2b5..2cf75a5b 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
@@ -69,9 +69,11 @@ export type SidebarMediaItemProps = {
   primaryClassName?: string;
   actions?: ReactNode;
   titleNode?: ReactNode;
+  previewOverlay?: ReactNode;
+  footerNode?: ReactNode;
   draggable?: boolean;
-  onDragStart?: DragEventHandler<HTMLDivElement>;
-  onDragEnd?: DragEventHandler<HTMLDivElement>;
+  onDragStart?: DragEventHandler<HTMLElement>;
+  onDragEnd?: DragEventHandler<HTMLElement>;
   onDragOver?: DragEventHandler<HTMLDivElement>;
   onDrop?: DragEventHandler<HTMLDivElement>;
   onPointerDown?: PointerEventHandler<HTMLDivElement>;
@@ -93,6 +95,8 @@ export function SidebarMediaItem({
   primaryClassName,
   actions,
   titleNode,
+  previewOverlay,
+  footerNode,
   draggable,
   onDragStart,
   onDragEnd,
@@ -119,6 +123,9 @@ export function SidebarMediaItem({
         className={primaryClassName}
         onClick={onPrimaryClick}
         aria-label={primaryLabel}
+        draggable={draggable}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
       >
         <PlatformMediaFrame
           src={imageSrc}
@@ -127,11 +134,13 @@ export function SidebarMediaItem({
           aspect="square"
           surface="none"
           className={thumbnailClassName}
+          previewOverlay={previewOverlay}
         />
       </button>
       <div className={metaClassName}>
         {titleNode ?? <span>{title}</span>}
         <span>{detail}</span>
+        {footerNode}
       </div>
       {actions}
     </div>
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 6017f7b3..34da2091 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -2,6 +2,8 @@
 
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import JSZip from 'jszip';
+import type { AuthUser } from '../../../packages/shared/src/contracts/auth';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ApiClientError } from '../../services/apiClient';
@@ -19,7 +21,69 @@ const deleteEditorAssetMock = vi.hoisted(() => vi.fn());
 const loadEditorAssetLibraryMock = vi.hoisted(() => vi.fn());
 const loadEditorProjectMock = vi.hoisted(() => vi.fn());
 const loadOrCreateRecentEditorProjectMock = vi.hoisted(() => vi.fn());
+const renameEditorProjectMock = vi.hoisted(() => vi.fn());
 const saveEditorProjectLayoutMock = vi.hoisted(() => vi.fn());
+const openLoginModalMock = vi.hoisted(() => vi.fn());
+const authUiMockState = vi.hoisted(() => ({
+  value: null as {
+    user: AuthUser | null;
+    canAccessProtectedData: boolean;
+    openLoginModal: typeof openLoginModalMock;
+    requireAuth: ReturnType<typeof vi.fn>;
+    openSettingsModal: ReturnType<typeof vi.fn>;
+    openAccountModal: ReturnType<typeof vi.fn>;
+    setCurrentUser: ReturnType<typeof vi.fn>;
+    logout: ReturnType<typeof vi.fn>;
+    musicVolume: number;
+    setMusicVolume: ReturnType<typeof vi.fn>;
+    platformTheme: 'light';
+    setPlatformTheme: ReturnType<typeof vi.fn>;
+    isHydratingSettings: boolean;
+    isPersistingSettings: boolean;
+    settingsError: string | null;
+  } | null,
+}));
+
+vi.mock('../auth/AuthUiContext', () => ({
+  useAuthUi: () => authUiMockState.value,
+}));
+
+const imageEditorTestUser: AuthUser = {
+  id: 'user-editor-test',
+  publicUserCode: 'UEDITOR',
+  displayName: '画布测试用户',
+  avatarUrl: null,
+  phoneNumberMasked: '139****4806',
+  loginMethod: 'password',
+  bindingStatus: 'active',
+  wechatBound: false,
+};
+
+function createAuthUiMock(user: AuthUser | null = imageEditorTestUser) {
+  return {
+    user,
+    canAccessProtectedData: Boolean(user),
+    openLoginModal: openLoginModalMock,
+    requireAuth: vi.fn((action: () => void) => {
+      if (user) {
+        action();
+        return;
+      }
+      openLoginModalMock(action);
+    }),
+    openSettingsModal: vi.fn(),
+    openAccountModal: vi.fn(),
+    setCurrentUser: vi.fn(),
+    logout: vi.fn(),
+    musicVolume: 0.5,
+    setMusicVolume: vi.fn(),
+    platformTheme: 'light' as const,
+    setPlatformTheme: vi.fn(),
+    isHydratingSettings: false,
+    isPersistingSettings: false,
+    settingsError: null,
+  };
+}
 
 const defaultProjectLayers = [
   {
@@ -116,6 +180,7 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
     loadEditorAssetLibrary: loadEditorAssetLibraryMock,
     loadEditorProject: loadEditorProjectMock,
     loadOrCreateRecentEditorProject: loadOrCreateRecentEditorProjectMock,
+    renameEditorProject: renameEditorProjectMock,
     saveEditorProjectLayout: saveEditorProjectLayoutMock,
     updateEditorAsset: updateEditorAssetMock,
     updateEditorAssetFolder: updateEditorAssetFolderMock,
@@ -123,16 +188,20 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
 });
 
 function dispatchPointerEvent(
-  target: Element,
+  target: Element | Window,
   type: string,
-  init: MouseEventInit & { pointerId: number },
+  init: PointerEventInit & { pointerId: number },
 ) {
-  const event = new MouseEvent(type, {
+  const PointerEventConstructor =
+    typeof PointerEvent === 'undefined' ? MouseEvent : PointerEvent;
+  const event = new PointerEventConstructor(type, {
     bubbles: true,
     cancelable: true,
     ...init,
   });
   Object.defineProperty(event, 'pointerId', { value: init.pointerId });
+  Object.defineProperty(event, 'pointerType', { value: 'mouse' });
+  Object.defineProperty(event, 'isPrimary', { value: true });
   fireEvent(target, event);
 }
 
@@ -161,8 +230,25 @@ async function renderLoadedEditor() {
   await screen.findByRole('button', { name: '添加拼图素材' });
 }
 
+async function readZipText(zip: JSZip, path: string) {
+  const file = zip.file(path);
+  expect(file).toBeTruthy();
+  return file!.async('string');
+}
+
+function createDeferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error?: unknown) => void;
+  const promise = new Promise<T>((promiseResolve, promiseReject) => {
+    resolve = promiseResolve;
+    reject = promiseReject;
+  });
+  return { promise, resolve, reject };
+}
+
 describe('ImageCanvasEditorView', () => {
   beforeEach(() => {
+    authUiMockState.value = createAuthUiMock();
     loadOrCreateRecentEditorProjectMock.mockResolvedValue({
       projectId: 'editor-project-default',
       title: '默认项目',
@@ -192,6 +278,14 @@ describe('ImageCanvasEditorView', () => {
       height: input.height,
       sourceType: input.sourceType,
     }));
+    renameEditorProjectMock.mockImplementation(async (projectId, title) => ({
+      projectId,
+      title,
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: defaultProjectLayers,
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    }));
     createEditorAssetFolderMock.mockResolvedValue({
       folderId: 'folder-role-persisted',
       label: '角色上传',
@@ -252,7 +346,9 @@ describe('ImageCanvasEditorView', () => {
     loadEditorAssetLibraryMock.mockReset();
     loadEditorProjectMock.mockReset();
     loadOrCreateRecentEditorProjectMock.mockReset();
+    renameEditorProjectMock.mockReset();
     saveEditorProjectLayoutMock.mockReset();
+    openLoginModalMock.mockReset();
     window.history.replaceState(null, '', '/editor/canvas');
   });
 
@@ -279,6 +375,29 @@ describe('ImageCanvasEditorView', () => {
     expect(loadOrCreateRecentEditorProjectMock).not.toHaveBeenCalled();
   });
 
+  it('opens the login modal when direct project loading is unauthorized', async () => {
+    authUiMockState.value = createAuthUiMock(null);
+    loadEditorProjectMock.mockRejectedValueOnce(
+      new ApiClientError({
+        message: '未授权访问',
+        status: 401,
+        code: 'UNAUTHORIZED',
+      }),
+    );
+    window.history.replaceState(
+      null,
+      '',
+      '/editor/canvas?projectid=editor-project-private',
+    );
+
+    render(<ImageCanvasEditorView />);
+
+    await waitFor(() => {
+      expect(openLoginModalMock).toHaveBeenCalledWith(expect.any(Function));
+    });
+    expect(screen.queryByAltText('画布图片：拼图素材')).toBeNull();
+  });
+
   it('offers a topbar entry back to the project page', async () => {
     await renderLoadedEditor();
 
@@ -294,6 +413,237 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('heading', { name: '图片编辑器' })).toBeNull();
   });
 
+  it('renames the current project from the canvas topbar', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: '编辑项目名称' }));
+    const titleInput = screen.getByLabelText('项目名称');
+    fireEvent.change(titleInput, { target: { value: '新画布项目' } });
+    fireEvent.click(screen.getByRole('button', { name: '保存项目名称' }));
+
+    await waitFor(() => {
+      expect(renameEditorProjectMock).toHaveBeenCalledWith(
+        'editor-project-default',
+        '新画布项目',
+      );
+    });
+    expect(await screen.findByRole('heading', { name: '新画布项目' })).toBeTruthy();
+    expect(screen.queryByLabelText('项目名称')).toBeNull();
+  });
+
+  it('cancels project rename editing with Escape', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: '编辑项目名称' }));
+    const titleInput = screen.getByLabelText('项目名称');
+    fireEvent.change(titleInput, { target: { value: '不会保存' } });
+    fireEvent.keyDown(titleInput, { key: 'Escape' });
+
+    expect(renameEditorProjectMock).not.toHaveBeenCalled();
+    expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
+    expect(screen.queryByLabelText('项目名称')).toBeNull();
+  });
+
+  it('exports valid canvas assets as a zip from the topbar', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-export',
+      title: '导出项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-data-a',
+          resourceId: 'resource-data-a',
+          title: '素材/A',
+          src: 'data:image/png;base64,YQ==',
+          x: 12,
+          y: 24,
+          width: 320,
+          height: 220,
+          originalWidth: 640,
+          originalHeight: 440,
+          zIndex: 1,
+          sourceType: 'uploaded',
+          sourceAssetId: 'asset-data-a',
+          groupId: 'group-a',
+          hidden: true,
+          locked: true,
+          flipX: true,
+        },
+        {
+          layerId: 'layer-data-a-copy',
+          resourceId: 'resource-data-a-copy',
+          title: '素材/A 副本',
+          src: 'data:image/png;base64,YQ==',
+          x: 42,
+          y: 54,
+          width: 320,
+          height: 220,
+          originalWidth: 640,
+          originalHeight: 440,
+          zIndex: 2,
+          sourceType: 'uploaded',
+          sourceAssetId: 'asset-data-a',
+        },
+        {
+          layerId: 'layer-generated',
+          resourceId: 'resource-generated',
+          title: '生成图',
+          src: '/generated-ok.png',
+          x: 70,
+          y: 80,
+          width: 360,
+          height: 360,
+          originalWidth: 1024,
+          originalHeight: 1024,
+          zIndex: 3,
+          sourceType: 'generated',
+          prompt: '明亮主视觉',
+          model: 'gpt-image-2',
+          provider: 'VectorEngine',
+          taskId: 'task-1',
+        },
+        {
+          layerId: 'layer-failed',
+          resourceId: 'resource-failed',
+          title: '失败图',
+          src: '/missing.png',
+          x: 90,
+          y: 100,
+          width: 120,
+          height: 120,
+          originalWidth: 120,
+          originalHeight: 120,
+          zIndex: 4,
+          sourceType: 'generated',
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-data-a',
+          folderId: 'project',
+          label: '素材/A',
+          imageSrc: 'data:image/png;base64,YQ==',
+          width: 640,
+          height: 440,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+    const originalFetch = globalThis.fetch;
+    const fetchMock = vi.fn(async (url: string) => {
+      if (url === '/generated-ok.png') {
+        return new Response(new Blob(['generated'], { type: 'image/png' }));
+      }
+      return new Response(null, { status: 404 });
+    });
+    globalThis.fetch = fetchMock as typeof fetch;
+    const originalCreateObjectUrl = URL.createObjectURL;
+    const originalRevokeObjectUrl = URL.revokeObjectURL;
+    const originalAnchorClick = HTMLAnchorElement.prototype.click;
+    let exportedBlob: Blob | null = null;
+    let downloadName = '';
+    URL.createObjectURL = vi.fn((blob: Blob) => {
+      exportedBlob = blob;
+      return 'blob:editor-export';
+    });
+    URL.revokeObjectURL = vi.fn();
+    HTMLAnchorElement.prototype.click = vi.fn(function click(this: HTMLAnchorElement) {
+      downloadName = this.download;
+    });
+
+    try {
+      render(<ImageCanvasEditorView />);
+      await screen.findByRole('heading', { name: '导出项目' });
+      await waitFor(() => {
+        expect(
+          (screen.getByRole('button', { name: '下载画布素材' }) as HTMLButtonElement)
+            .disabled,
+        ).toBe(false);
+      });
+      fireEvent.click(screen.getByRole('button', { name: '下载画布素材' }));
+
+      await waitFor(() => {
+        expect(exportedBlob).toBeTruthy();
+      });
+      expect(downloadName).toMatch(/^导出项目-画布素材-\d{8}\.zip$/u);
+
+      const zip = await JSZip.loadAsync(exportedBlob!);
+      expect(zip.file('导出项目-画布素材/images/001-素材 A.png')).toBeTruthy();
+      expect(zip.file('导出项目-画布素材/images/002-生成图.png')).toBeTruthy();
+      expect(zip.file('导出项目-画布素材/images/003-失败图.png')).toBeNull();
+
+      const metadata = JSON.parse(
+        await readZipText(zip, '导出项目-画布素材/metadata.json'),
+      );
+      expect(metadata.projectId).toBe('editor-project-export');
+      expect(metadata.layers).toHaveLength(4);
+      expect(metadata.layers[0].file).toBe('images/001-素材 A.png');
+      expect(metadata.layers[1].file).toBe('images/001-素材 A.png');
+      expect(metadata.layers[0].canvas.hidden).toBe(true);
+      expect(metadata.layers[0].canvas.locked).toBe(true);
+      expect(metadata.layers[0].canvas.flipX).toBe(true);
+      expect(metadata.layers[0].canvas.groupId).toBe('group-a');
+      expect(metadata.layers[2].sourceType).toBe('generated');
+      expect(metadata.layers[2].prompt).toBe('明亮主视觉');
+      expect(metadata.layers[3].file).toBeNull();
+      expect(metadata.layers[3].exportError).toContain('404');
+      expect(metadata.failedImages).toHaveLength(1);
+      expect(
+        await readZipText(zip, '导出项目-画布素材/manifest.txt'),
+      ).toContain('失败素材数量：1');
+      expect(screen.getByText('部分素材未能导出')).toBeTruthy();
+    } finally {
+      globalThis.fetch = originalFetch;
+      URL.createObjectURL = originalCreateObjectUrl;
+      URL.revokeObjectURL = originalRevokeObjectUrl;
+      HTMLAnchorElement.prototype.click = originalAnchorClick;
+    }
+  });
+
+  it('disables the canvas asset export entry when there are no valid layers', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-empty',
+      title: '空项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [],
+    });
+
+    render(<ImageCanvasEditorView />);
+    await screen.findByRole('heading', { name: '空项目' });
+
+    expect(
+      (screen.getByRole('button', { name: '下载画布素材' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+
   it('does not inject built-in mock assets or layers when persistence returns empty data', async () => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
       projectId: 'editor-project-empty',
@@ -326,7 +676,7 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('region', { name: '项目素材' })).toBeTruthy();
   });
 
-  it('removes invalid uploaded layers when the canvas opens', async () => {
+  it('keeps canvas layers when their account asset has been removed from the library', async () => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
       projectId: 'editor-project-invalid-layer',
       title: '包含失效素材的项目',
@@ -393,21 +743,67 @@ describe('ImageCanvasEditorView', () => {
 
     await waitFor(() => {
       expect(screen.getByAltText('画布图片：账号素材A')).toBeTruthy();
-      expect(screen.queryByAltText('画布图片：已删除素材')).toBeNull();
+      expect(screen.getByAltText('画布图片：已删除素材')).toBeTruthy();
     });
+    expect(saveEditorProjectLayoutMock).not.toHaveBeenCalledWith(
+      'editor-project-invalid-layer',
+      expect.objectContaining({
+        layers: [
+          expect.objectContaining({
+            layerId: 'layer-valid-asset',
+            sourceAssetId: 'asset-a',
+          }),
+        ],
+      }),
+    );
+  });
+
+  it('keeps resource-backed canvas layers when their account asset is not loaded', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-resource-layer',
+      title: '历史工程资源项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-resource-backed',
+          resourceId: 'resource-backed',
+          title: '历史画布图片',
+          src: 'data:image/png;base64,aGlzdG9yeQ==',
+          x: 120,
+          y: 120,
+          width: 320,
+          height: 240,
+          originalWidth: 320,
+          originalHeight: 240,
+          zIndex: 1,
+          sourceType: 'uploaded',
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [],
+    });
+
+    render(<ImageCanvasEditorView />);
+
     await waitFor(() => {
-      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
-        'editor-project-invalid-layer',
-        expect.objectContaining({
-          layers: [
-            expect.objectContaining({
-              layerId: 'layer-valid-asset',
-              sourceAssetId: 'asset-a',
-            }),
-          ],
-        }),
-      );
+      expect(screen.getByAltText('画布图片：历史画布图片')).toBeTruthy();
     });
+    expect(saveEditorProjectLayoutMock).not.toHaveBeenCalledWith(
+      'editor-project-resource-layer',
+      expect.objectContaining({ layers: [] }),
+    );
   });
 
   it('toggles the shared sidebar from canvas panel buttons', async () => {
@@ -623,6 +1019,12 @@ describe('ImageCanvasEditorView', () => {
     fireEvent.dragOver(roleFolder, {
       dataTransfer,
     });
+    await waitFor(() => {
+      expect(screen.queryByText('添加到素材')).toBeNull();
+      expect(roleFolder.className).toContain(
+        'image-canvas-editor__asset-folder--move-target',
+      );
+    });
     fireEvent.drop(roleFolder, {
       dataTransfer,
     });
@@ -637,6 +1039,107 @@ describe('ImageCanvasEditorView', () => {
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
 
+  it('pins the asset move target when the target folder name is outside the asset panel viewport', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+        {
+          folderId: 'folder-role',
+          label: '角色',
+          sortOrder: 100,
+          collapsed: false,
+          systemDefault: false,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-puzzle',
+          folderId: 'project',
+          label: '拼图素材',
+          imageSrc: '/creation-type-references/puzzle.webp',
+          width: 640,
+          height: 640,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    const sourceAsset = await screen.findByRole('button', { name: '添加拼图素材' });
+    const sourceAssetRow = sourceAsset.closest('.image-canvas-editor__asset-row');
+    const roleFolder = screen.getByRole('region', { name: '角色' });
+    const assetList = document.querySelector('.image-canvas-editor__asset-list');
+    const roleHeader = roleFolder.querySelector(
+      '[data-asset-folder-header-id="folder-role"]',
+    );
+    const dataTransfer = createDataTransferStub();
+
+    if (!sourceAssetRow || !assetList || !roleHeader) {
+      throw new Error('asset drag elements should exist');
+    }
+
+    vi.spyOn(assetList, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      top: 0,
+      left: 0,
+      right: 260,
+      bottom: 200,
+      width: 260,
+      height: 200,
+      toJSON: () => ({}),
+    } as DOMRect);
+    const roleHeaderRect = vi
+      .spyOn(roleHeader, 'getBoundingClientRect')
+      .mockReturnValue({
+        x: 0,
+        y: 260,
+        top: 260,
+        left: 0,
+        right: 260,
+        bottom: 288,
+        width: 260,
+        height: 28,
+        toJSON: () => ({}),
+      } as DOMRect);
+
+    fireEvent.dragStart(sourceAssetRow, { dataTransfer });
+    fireEvent.dragOver(roleFolder, { dataTransfer });
+
+    await waitFor(() => {
+      expect(
+        document.querySelector(
+          '.image-canvas-editor__asset-folder-sticky-target',
+        )?.textContent,
+      ).toContain('角色');
+    });
+
+    roleHeaderRect.mockReturnValue({
+      x: 0,
+      y: 40,
+      top: 40,
+      left: 0,
+      right: 260,
+      bottom: 68,
+      width: 260,
+      height: 28,
+      toJSON: () => ({}),
+    } as DOMRect);
+    fireEvent.dragOver(roleFolder, { dataTransfer });
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('.image-canvas-editor__asset-folder-sticky-target'),
+      ).toBeNull();
+    });
+  });
+
   it('uploads multiple files as account-level assets without adding canvas layers', async () => {
     render(<ImageCanvasEditorView />);
 
@@ -654,6 +1157,55 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByAltText('画布图片：第二张.png')).toBeNull();
   });
 
+  it('shows an uploading placeholder card before restoring the normal asset card', async () => {
+    const deferredAsset = createDeferred<{
+      assetId: string;
+      folderId: string;
+      label: string;
+      imageSrc: string;
+      width: number;
+      height: number;
+      sourceType: 'uploaded';
+    }>();
+    createEditorAssetMock.mockImplementationOnce(async (input) => {
+      await deferredAsset.promise;
+      return {
+        assetId: 'asset-uploading-finished',
+        folderId: input.folderId,
+        label: input.label,
+        imageSrc: input.imageSrc,
+        width: input.width,
+        height: input.height,
+        sourceType: 'uploaded',
+      };
+    });
+    render(<ImageCanvasEditorView />);
+
+    await userEvent.upload(
+      screen.getByLabelText('上传图片文件'),
+      new File(['image'], '上传进度.png', { type: 'image/png' }),
+    );
+
+    expect(await screen.findByRole('button', { name: '上传中上传进度.png' })).toBeTruthy();
+    expect(screen.getByLabelText('素材上传进度.png上传进度')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '添加上传进度.png' })).toBeNull();
+
+    deferredAsset.resolve({
+      assetId: 'asset-uploading-finished',
+      folderId: 'project',
+      label: '上传进度.png',
+      imageSrc: 'data:image/png;base64,aW1hZ2U=',
+      width: 420,
+      height: 315,
+      sourceType: 'uploaded',
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: '添加上传进度.png' })).toBeTruthy();
+    });
+    expect(screen.queryByRole('button', { name: '上传中上传进度.png' })).toBeNull();
+  });
+
   it('supports asset selection mode and batch delete with shared toolbar', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
@@ -1028,6 +1580,101 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('button', { name: '选择图层测试上传B.png' })).toBeTruthy();
   });
 
+  it('adds an asset library image to the canvas by dragging it onto the viewport', async () => {
+    await renderLoadedEditor();
+
+    const sourceAsset = screen.getByRole('button', { name: '添加抓大鹅素材' });
+    const sourceAssetRow = sourceAsset.closest('.image-canvas-editor__asset-row');
+    const viewport = screen.getByLabelText('画布工作区');
+    const dataTransfer = createDataTransferStub();
+
+    if (!sourceAssetRow) {
+      throw new Error('asset row should exist');
+    }
+    fireEvent.dragStart(sourceAssetRow, { dataTransfer });
+    fireEvent.dragOver(viewport, {
+      clientX: 520,
+      clientY: 300,
+      dataTransfer,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('添加到画布')).toBeTruthy();
+    });
+
+    fireEvent.drop(viewport, {
+      clientX: 520,
+      clientY: 300,
+      dataTransfer,
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('添加到画布')).toBeNull();
+    });
+    expect(screen.getByAltText('画布图片：抓大鹅素材')).toBeTruthy();
+    expect(screen.getByRole('button', { name: '选择抓大鹅素材' })).toBeTruthy();
+    expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
+      'editor-project-default',
+      expect.objectContaining({
+        imageSrc: '/creation-type-references/match3d.webp',
+        sourceType: 'uploaded',
+      }),
+    );
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
+  it('adds an asset library image to the canvas with pointer dragging', async () => {
+    await renderLoadedEditor();
+
+    const sourceAsset = screen.getByRole('button', { name: '添加抓大鹅素材' });
+    const viewport = screen.getByLabelText('画布工作区');
+    vi.spyOn(viewport, 'getBoundingClientRect').mockReturnValue({
+      x: 320,
+      y: 80,
+      top: 80,
+      left: 320,
+      right: 1120,
+      bottom: 680,
+      width: 800,
+      height: 600,
+      toJSON: () => ({}),
+    } as DOMRect);
+
+    dispatchPointerEvent(sourceAsset, 'pointerdown', {
+      button: 0,
+      pointerId: 81,
+      clientX: 160,
+      clientY: 220,
+    });
+    dispatchPointerEvent(window, 'pointermove', {
+      pointerId: 81,
+      clientX: 520,
+      clientY: 300,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('添加到画布')).toBeTruthy();
+    });
+    expect(screen.getAllByText('抓大鹅素材').length).toBeGreaterThan(1);
+
+    dispatchPointerEvent(window, 'pointerup', {
+      pointerId: 81,
+      clientX: 520,
+      clientY: 300,
+    });
+
+    expect(screen.queryByText('添加到画布')).toBeNull();
+    expect(screen.getByAltText('画布图片：抓大鹅素材')).toBeTruthy();
+    expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
+      'editor-project-default',
+      expect.objectContaining({
+        imageSrc: '/creation-type-references/match3d.webp',
+        sourceType: 'uploaded',
+      }),
+    );
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
   it('shows a canvas drop overlay while dragging uploaded images over the canvas', async () => {
     await renderLoadedEditor();
 
@@ -1057,6 +1704,42 @@ describe('ImageCanvasEditorView', () => {
     await waitFor(() => {
       expect(screen.getByAltText('画布图片：画布提示.png')).toBeTruthy();
     });
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+        'editor-project-default',
+        expect.objectContaining({
+          layers: expect.arrayContaining([
+            expect.objectContaining({
+              title: '画布提示.png',
+              resourceId: 'resource-editor-project-default-420',
+              sourceAssetId: 'persisted-画布提示.png',
+            }),
+          ]),
+        }),
+      );
+    });
+  });
+
+  it('removes a dropped canvas upload when project resource persistence fails', async () => {
+    createEditorProjectResourceMock.mockRejectedValueOnce(new Error('unauthorized'));
+    await renderLoadedEditor();
+
+    const viewport = screen.getByLabelText('画布工作区');
+    fireEvent.drop(viewport, {
+      clientX: 430,
+      clientY: 260,
+      dataTransfer: {
+        files: [new File(['image'], '未保存图片.png', { type: 'image/png' })],
+        types: ['Files'],
+      },
+    });
+
+    await waitFor(() => {
+      expect(createEditorProjectResourceMock).toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(screen.queryByAltText('画布图片：未保存图片.png')).toBeNull();
+    });
   });
 
   it('drops files into the asset panel only once without creating canvas layers', async () => {
@@ -1258,6 +1941,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('adds assets from the sidebar and supports zoom buttons', async () => {
     await renderLoadedEditor();
+    const user = userEvent.setup();
 
     expect(
       screen.getByRole('button', { name: '当前缩放比例 100%' }).className,
@@ -1267,7 +1951,7 @@ describe('ImageCanvasEditorView', () => {
     fireEvent.click(screen.getByRole('menuitem', { name: '放大' }));
     expect(screen.getByRole('button', { name: '当前缩放比例 116%' })).toBeTruthy();
 
-    fireEvent.click(screen.getByRole('button', { name: '添加声浪素材' }));
+    await user.click(screen.getByRole('button', { name: '添加声浪素材' }));
 
     expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
     expect(screen.getByRole('complementary', { name: '图片资源栏' })).toBeTruthy();
@@ -1311,10 +1995,42 @@ describe('ImageCanvasEditorView', () => {
     expect(within(panelToolbar).getByRole('button', { name: '切换小地图' })).toBeTruthy();
 
     fireEvent.click(within(panelToolbar).getByRole('button', { name: '画布背景色' }));
-    expect(screen.getByRole('menu', { name: '画布背景色菜单' })).toBeTruthy();
-    fireEvent.click(screen.getByRole('menuitem', { name: '切换画布背景色为暖灰' }));
+    expect(screen.getByRole('dialog', { name: '画布背景设置' })).toBeTruthy();
+    expect(screen.getByText('画布背景色')).toBeTruthy();
+    expect(screen.getByRole('button', { name: '关闭画布背景设置' })).toBeTruthy();
 
-    expect((viewport as HTMLElement).style.backgroundColor).toBe('rgb(243, 240, 234)');
+    fireEvent.click(screen.getByRole('button', { name: '切换画布背景色为默认浅灰' }));
+
+    expect((viewport as HTMLElement).style.backgroundColor).toBe('rgb(248, 250, 252)');
+
+    fireEvent.change(screen.getByLabelText('自定义画布背景色'), {
+      target: { value: '#ffffff' },
+    });
+    expect((viewport as HTMLElement).style.backgroundColor).toBe('rgb(255, 255, 255)');
+
+    const hexInput = screen.getByLabelText('画布背景十六进制颜色') as HTMLInputElement;
+    fireEvent.change(hexInput, {
+      target: { value: '#abc' },
+    });
+    expect(hexInput.value).toBe('AABBCC');
+    expect((viewport as HTMLElement).style.backgroundColor).toBe('rgb(170, 187, 204)');
+
+    fireEvent.change(hexInput, {
+      target: { value: 'not-a-color' },
+    });
+    expect(hexInput.value).toBe('not-a-color');
+    expect((viewport as HTMLElement).style.backgroundColor).toBe('rgb(170, 187, 204)');
+
+    fireEvent.click(screen.getByRole('button', { name: '切换画布背景色为默认浅灰' }));
+    expect(hexInput.value).toBe('F8FAFC');
+    expect((viewport as HTMLElement).style.backgroundColor).toBe('rgb(248, 250, 252)');
+
+    fireEvent.click(screen.getByRole('button', { name: '关闭画布背景设置' }));
+    expect(screen.queryByRole('dialog', { name: '画布背景设置' })).toBeNull();
+
+    fireEvent.click(within(panelToolbar).getByRole('button', { name: '画布背景色' }));
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(screen.queryByRole('dialog', { name: '画布背景设置' })).toBeNull();
 
     fireEvent.click(within(panelToolbar).getByRole('button', { name: '切换小地图' }));
     expect(screen.queryByRole('button', { name: '画布小地图' })).toBeNull();
@@ -1549,7 +2265,7 @@ describe('ImageCanvasEditorView', () => {
     expect(within(generateDialog).getByRole('button', { name: '生成' }).className).toContain(
       'image-canvas-editor__generation-submit',
     );
-    expect(screen.queryByRole('toolbar', { name: 'AI画布工具栏' })).toBeNull();
+    expect(screen.getByRole('toolbar', { name: 'AI画布工具栏' })).toBeTruthy();
 
     fireEvent.change(screen.getByLabelText('生成提示词'), {
       target: { value: '一张明亮的拼图主视觉' },
@@ -1580,6 +2296,21 @@ describe('ImageCanvasEditorView', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: '打开素材' }));
     expect(screen.getByRole('button', { name: /添加生成图片/u })).toBeTruthy();
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+        'editor-project-default',
+        expect.objectContaining({
+          layers: expect.arrayContaining([
+            expect.objectContaining({
+              title: expect.stringMatching(/^生成图片/u),
+              sourceType: 'generated',
+              sourceAssetId: 'persisted-生成图片 3',
+              resourceId: 'resource-editor-project-default-1024',
+            }),
+          ]),
+        }),
+      );
+    });
     fireEvent.click(screen.getByRole('button', { name: '打开图层' }));
     const generatedLayer = screen.getByAltText(/画布图片：生成图片/).closest('button')!;
     const anchoredGenerateDialog = screen.getByRole('dialog', { name: '生成图片' });
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 71d5589b..17e8059f 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -31,6 +31,7 @@ import {
   WandSparkles,
   X,
 } from 'lucide-react';
+import JSZip from 'jszip';
 import {
   type DragEvent as ReactDragEvent,
   type KeyboardEvent as ReactKeyboardEvent,
@@ -58,6 +59,7 @@ import {
   loadEditorAssetLibrary,
   loadEditorProject,
   loadOrCreateRecentEditorProject,
+  renameEditorProject,
   saveEditorProjectLayout,
   updateEditorAsset,
   updateEditorAssetFolder,
@@ -79,6 +81,7 @@ import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
+import { useAuthUi } from '../auth/AuthUiContext';
 
 type EditorAsset = {
   id: string;
@@ -97,6 +100,9 @@ type EditorAsset = {
   taskId?: string;
   objectKey?: string;
   assetObjectId?: string;
+  uploadStatus?: 'uploading' | 'failed';
+  uploadProgress?: number;
+  uploadMessage?: string;
 };
 
 type CanvasLayer = {
@@ -190,6 +196,17 @@ type AssetMarqueeState = {
   currentY: number;
 };
 
+type AssetPointerDragState = {
+  pointerId: number;
+  assetId: string;
+  startClientX: number;
+  startClientY: number;
+  currentClientX: number;
+  currentClientY: number;
+  active: boolean;
+  dropFolderId: string | null;
+};
+
 type CanvasMarqueeState = {
   pointerId: number;
   startX: number;
@@ -227,6 +244,54 @@ type CanvasContextMenuState =
 
 type UploadDropTarget = 'canvas' | 'assets' | null;
 
+type CanvasAssetExportImage = {
+  key: string;
+  file: string;
+  layer: CanvasLayer;
+  blob?: Blob;
+  error?: string;
+};
+
+type CanvasAssetExportLayerMetadata = {
+  layerId: string;
+  title: string;
+  file: string | null;
+  width: number;
+  height: number;
+  canvas: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zIndex: number;
+    hidden: boolean;
+    locked: boolean;
+    flipX: boolean;
+    flipY: boolean;
+    groupId: string | null;
+  };
+  sourceType: CanvasLayer['sourceType'];
+  prompt: string | null;
+  actualPrompt: string | null;
+  model: string | null;
+  provider: string | null;
+  taskId: string | null;
+  exportError?: string;
+};
+
+type CanvasAssetExportMetadata = {
+  projectId: string | null;
+  projectTitle: string;
+  exportedAt: string;
+  layers: CanvasAssetExportLayerMetadata[];
+  failedImages: Array<{
+    key: string;
+    title: string;
+    src: string;
+    error: string;
+  }>;
+};
+
 type DragState =
   | {
       kind: 'pan';
@@ -288,11 +353,14 @@ const CONTEXT_MENU_SIZE = {
 };
 const CONTEXT_MENU_VIEWPORT_MARGIN = 8;
 const ASSET_DRAG_MIME_TYPE = 'application/x-genarrative-editor-asset';
+const DEFAULT_CANVAS_BACKGROUND_COLOR = '#f8fafc';
 const CANVAS_BACKGROUND_OPTIONS = [
+  { label: '默认浅灰', value: DEFAULT_CANVAS_BACKGROUND_COLOR },
+  { label: '黑色', value: '#000000' },
   { label: '白色', value: '#ffffff' },
-  { label: '浅灰', value: '#f8fafc' },
-  { label: '暖灰', value: '#f3f0ea' },
-  { label: '冷蓝', value: '#eef6ff' },
+  { label: '绿色', value: '#00e515' },
+  { label: '紫色', value: '#a66cf2' },
+  { label: '淡紫', value: '#d6c5f4' },
 ];
 
 function clamp(value: number, min: number, max: number) {
@@ -303,6 +371,127 @@ function formatPercent(value: number) {
   return `${Math.round(value * 100)}%`;
 }
 
+function normalizeHexColorInput(value: string) {
+  const trimmedInput = value.trim().toLowerCase();
+  const trimmed = trimmedInput.startsWith('#') ? trimmedInput : `#${trimmedInput}`;
+  const shortHexMatch = /^#([0-9a-f]{3})$/.exec(trimmed);
+  if (shortHexMatch?.[1]) {
+    const [red, green, blue] = shortHexMatch[1].split('');
+    return `#${red}${red}${green}${green}${blue}${blue}`;
+  }
+  if (/^#[0-9a-f]{6}$/.test(trimmed)) {
+    return trimmed;
+  }
+  return null;
+}
+
+function sanitizeExportFilePart(value: string, fallback: string) {
+  const sanitized = value
+    .trim()
+    .replace(/[\\/:*?"<>|]/gu, ' ')
+    .replace(/\s+/gu, ' ')
+    .slice(0, 48)
+    .trim();
+  return sanitized || fallback;
+}
+
+function formatExportDate(date: Date) {
+  const year = String(date.getFullYear()).padStart(4, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}${month}${day}`;
+}
+
+function getLayerExportKey(layer: CanvasLayer) {
+  return layer.assetObjectId || layer.objectKey || layer.sourceAssetId || layer.src;
+}
+
+function getImageExtensionFromTypeOrSrc(type: string | undefined, src: string) {
+  const normalizedType = type?.toLowerCase() ?? '';
+  if (normalizedType.includes('jpeg') || normalizedType.includes('jpg')) {
+    return 'jpg';
+  }
+  if (normalizedType.includes('webp')) {
+    return 'webp';
+  }
+  if (normalizedType.includes('gif')) {
+    return 'gif';
+  }
+  const srcExtension = /\.([a-z0-9]{2,5})(?:[?#].*)?$/iu.exec(src)?.[1]?.toLowerCase();
+  if (srcExtension && ['png', 'jpg', 'jpeg', 'webp', 'gif'].includes(srcExtension)) {
+    return srcExtension === 'jpeg' ? 'jpg' : srcExtension;
+  }
+  return 'png';
+}
+
+function dataUrlToBlob(dataUrl: string) {
+  const match = /^data:([^;,]+)?(;base64)?,(.*)$/u.exec(dataUrl);
+  if (!match) {
+    throw new Error('无法解析 data:image 素材');
+  }
+  const mimeType = match[1] || 'application/octet-stream';
+  const isBase64 = Boolean(match[2]);
+  const payload = match[3] ?? '';
+  const binary = isBase64 ? window.atob(payload) : decodeURIComponent(payload);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return new Blob([bytes], { type: mimeType });
+}
+
+async function blobToUint8Array(blob: Blob) {
+  const arrayBuffer =
+    typeof blob.arrayBuffer === 'function'
+      ? await blob.arrayBuffer()
+      : await new Response(blob).arrayBuffer();
+  return new Uint8Array(arrayBuffer);
+}
+
+async function readLayerImageBlob(layer: CanvasLayer) {
+  if (layer.src.startsWith('data:image/')) {
+    return dataUrlToBlob(layer.src);
+  }
+  const response = await fetch(layer.src);
+  if (!response.ok) {
+    throw new Error(`图片读取失败：${response.status}`);
+  }
+  return response.blob();
+}
+
+function buildLayerExportMetadata(
+  layer: CanvasLayer,
+  file: string | null,
+  exportError?: string,
+): CanvasAssetExportLayerMetadata {
+  return {
+    layerId: layer.id,
+    title: layer.title,
+    file,
+    width: layer.originalWidth,
+    height: layer.originalHeight,
+    canvas: {
+      x: layer.x,
+      y: layer.y,
+      width: layer.width,
+      height: layer.height,
+      zIndex: layer.zIndex,
+      hidden: Boolean(layer.hidden),
+      locked: Boolean(layer.locked),
+      flipX: Boolean(layer.flipX),
+      flipY: Boolean(layer.flipY),
+      groupId: layer.groupId ?? null,
+    },
+    sourceType: layer.sourceType,
+    prompt: layer.prompt ?? null,
+    actualPrompt: layer.actualPrompt ?? null,
+    model: layer.model ?? null,
+    provider: layer.provider ?? null,
+    taskId: layer.taskId ?? null,
+    ...(exportError ? { exportError } : {}),
+  };
+}
+
 function triggerPlaceholderAction(label: string) {
   window.alert(`${label}功能建设中`);
 }
@@ -518,15 +707,23 @@ function resolveContextMenuPosition(
 }
 
 function getDraggedAssetId(dataTransfer: DataTransfer) {
-  if (
-    !dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE) ||
-    typeof dataTransfer.getData !== 'function'
-  ) {
+  if (typeof dataTransfer.getData !== 'function') {
+    return '';
+  }
+  const draggedAssetId = dataTransfer.getData(ASSET_DRAG_MIME_TYPE);
+  if (draggedAssetId) {
+    return draggedAssetId;
+  }
+  if (!hasDataTransferType(dataTransfer, ASSET_DRAG_MIME_TYPE)) {
     return '';
   }
   return dataTransfer.getData(ASSET_DRAG_MIME_TYPE);
 }
 
+function hasDataTransferType(dataTransfer: DataTransfer, type: string) {
+  return Array.from(dataTransfer.types).includes(type);
+}
+
 function isCanvasSourceType(value: unknown): value is CanvasLayer['sourceType'] {
   return value === 'uploaded' || value === 'generated' || value === 'mock_generated';
 }
@@ -544,11 +741,8 @@ function isLayerLinkedToAsset(layer: CanvasLayer, asset: EditorAsset) {
   );
 }
 
-function isLayerValidForAssetLibrary(layer: CanvasLayer, assets: EditorAsset[]) {
-  if (isGeneratedLayer(layer)) {
-    return true;
-  }
-  return assets.some((asset) => isLayerLinkedToAsset(layer, asset));
+function isLayerValidForAssetLibrary(layer: CanvasLayer, _assets: EditorAsset[]) {
+  return layer.src.trim().length > 0;
 }
 
 function getLayerBounds(targetLayers: CanvasLayer[]) {
@@ -643,6 +837,7 @@ function resolveImageGenerationErrorMessage(error: unknown) {
 }
 
 export function ImageCanvasEditorView() {
+  const authUi = useAuthUi();
   const editorRootRef = useRef<HTMLElement | null>(null);
   const canvasViewportRef = useRef<HTMLDivElement | null>(null);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
@@ -654,6 +849,15 @@ export function ImageCanvasEditorView() {
   const undoStackRef = useRef<CanvasHistorySnapshot[]>([]);
   const redoStackRef = useRef<CanvasHistorySnapshot[]>([]);
   const layersRef = useRef<CanvasLayer[]>([]);
+  const assetsRef = useRef<EditorAsset[]>([]);
+  const assetPointerDragRef = useRef<AssetPointerDragState | null>(null);
+  const addAssetLayerRef = useRef<
+    (asset: EditorAsset, position?: { x: number; y: number }) => void
+  >(() => {});
+  const moveAssetToFolderRef = useRef<
+    (assetId: string, folderId: string) => void
+  >(() => {});
+  const suppressAssetClickRef = useRef(false);
   const viewportRef = useRef<CanvasViewport>({
     x: -260,
     y: 70,
@@ -665,8 +869,17 @@ export function ImageCanvasEditorView() {
   const dragHistoryCapturedRef = useRef(false);
   const [projectId, setProjectId] = useState<string | null>(null);
   const [projectTitle, setProjectTitle] = useState('未命名画布');
+  const [projectRenameValue, setProjectRenameValue] = useState('未命名画布');
+  const [isRenamingProject, setIsRenamingProject] = useState(false);
+  const [isProjectRenameSaving, setIsProjectRenameSaving] = useState(false);
+  const [projectRenameError, setProjectRenameError] = useState<string | null>(null);
   const [isProjectReady, setIsProjectReady] = useState(false);
   const [isAssetLibraryReady, setIsAssetLibraryReady] = useState(false);
+  const [assetExportStatus, setAssetExportStatus] = useState<{
+    tone: 'info' | 'success' | 'error';
+    message: string;
+  } | null>(null);
+  const [isExportingAssets, setIsExportingAssets] = useState(false);
   const [activeSidebarPanel, setActiveSidebarPanel] =
     useState<SidebarPanel | null>('assets');
   const [viewport, setViewport] = useState<CanvasViewport>({
@@ -708,10 +921,13 @@ export function ImageCanvasEditorView() {
   const [isPanning, setIsPanning] = useState(false);
   const [snapGuide, setSnapGuide] = useState<SnapGuide | null>(null);
   const [isZoomMenuOpen, setIsZoomMenuOpen] = useState(false);
-  const [isBackgroundMenuOpen, setIsBackgroundMenuOpen] = useState(false);
+  const [isBackgroundPanelOpen, setIsBackgroundPanelOpen] = useState(false);
   const [isMinimapOpen, setIsMinimapOpen] = useState(true);
   const [canvasBackgroundColor, setCanvasBackgroundColor] = useState(
-    CANVAS_BACKGROUND_OPTIONS[1]?.value ?? '#f8fafc',
+    DEFAULT_CANVAS_BACKGROUND_COLOR,
+  );
+  const [backgroundHexValue, setBackgroundHexValue] = useState(
+    DEFAULT_CANVAS_BACKGROUND_COLOR,
   );
   const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(null);
   const [generateDialog, setGenerateDialog] =
@@ -723,8 +939,22 @@ export function ImageCanvasEditorView() {
     useState<CanvasContextMenuState | null>(null);
   const [uploadDropTarget, setUploadDropTarget] =
     useState<UploadDropTarget>(null);
+  const [assetMoveDropFolderId, setAssetMoveDropFolderId] =
+    useState<string | null>(null);
+  const [isAssetMoveDropHeaderPinned, setIsAssetMoveDropHeaderPinned] =
+    useState(false);
+  const [assetPointerDrag, setAssetPointerDrag] =
+    useState<AssetPointerDragState | null>(null);
 
   const effectiveTool: CanvasTool = isSpacePanning ? 'hand' : activeTool;
+  const applyCanvasBackgroundColor = useCallback((value: string) => {
+    const normalizedColor = normalizeHexColorInput(value);
+    if (!normalizedColor) {
+      return;
+    }
+    setCanvasBackgroundColor(normalizedColor);
+    setBackgroundHexValue(normalizedColor);
+  }, []);
   const selectedLayer = useMemo(
     () => layers.find((layer) => layer.id === selectedLayerId) ?? null,
     [layers, selectedLayerId],
@@ -781,11 +1011,22 @@ export function ImageCanvasEditorView() {
   const allSelectableAssetsSelected =
     selectableAssets.length > 0 &&
     selectableAssets.every((asset) => selectedAssetIds.has(asset.id));
+  const assetMoveDropFolder = useMemo(
+    () =>
+      assetMoveDropFolderId
+        ? groupedAssets.find((folder) => folder.id === assetMoveDropFolderId) ?? null
+        : null,
+    [assetMoveDropFolderId, groupedAssets],
+  );
 
   useEffect(() => {
     layersRef.current = layers;
   }, [layers]);
 
+  useEffect(() => {
+    assetsRef.current = assets;
+  }, [assets]);
+
   useEffect(() => {
     viewportRef.current = viewport;
   }, [viewport]);
@@ -976,7 +1217,9 @@ export function ImageCanvasEditorView() {
           return;
         }
         setProjectId(project.projectId);
-        setProjectTitle(project.title?.trim() || '未命名画布');
+        const nextProjectTitle = project.title?.trim() || '未命名画布';
+        setProjectTitle(nextProjectTitle);
+        setProjectRenameValue(nextProjectTitle);
         setViewport(project.viewport);
         const hydratedLayers = project.layers
           .map(hydrateLayer)
@@ -989,8 +1232,11 @@ export function ImageCanvasEditorView() {
         setHistoryVersion((version) => version + 1);
         setIsProjectReady(true);
       })
-      .catch(() => {
+      .catch((error: unknown) => {
         if (!cancelled) {
+          if (error instanceof ApiClientError && error.status === 401) {
+            authUi?.openLoginModal(() => window.location.reload());
+          }
           setIsProjectReady(false);
         }
       });
@@ -998,7 +1244,7 @@ export function ImageCanvasEditorView() {
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [authUi]);
 
   useEffect(() => {
     let cancelled = false;
@@ -1071,7 +1317,7 @@ export function ImageCanvasEditorView() {
       if (event.key === 'Escape') {
         setActiveSidebarPanel(null);
         setIsZoomMenuOpen(false);
-        setIsBackgroundMenuOpen(false);
+        setIsBackgroundPanelOpen(false);
         setContextMenu(null);
         setGenerateDialog((currentDialog) =>
           currentDialog?.status === 'generating'
@@ -1128,6 +1374,121 @@ export function ImageCanvasEditorView() {
     return () => window.removeEventListener('pointerdown', closeContextMenu);
   }, [contextMenu]);
 
+  useEffect(() => {
+    const resolveCanvasPoint = (clientX: number, clientY: number) => {
+      const rect = canvasViewportRef.current?.getBoundingClientRect();
+      if (
+        !rect ||
+        clientX < rect.left ||
+        clientX > rect.right ||
+        clientY < rect.top ||
+        clientY > rect.bottom
+      ) {
+        return null;
+      }
+      return {
+        x: clientX - rect.left,
+        y: clientY - rect.top,
+      };
+    };
+    const resolveAssetFolderId = (clientX: number, clientY: number) => {
+      const listElement = assetListRef.current;
+      if (!listElement) {
+        return null;
+      }
+      const listRect = listElement.getBoundingClientRect();
+      if (
+        clientX < listRect.left ||
+        clientX > listRect.right ||
+        clientY < listRect.top ||
+        clientY > listRect.bottom
+      ) {
+        return null;
+      }
+      const folderElements = [
+        ...listElement.querySelectorAll<HTMLElement>('[data-asset-folder-id]'),
+      ];
+      const matchedFolder = folderElements.find((element) => {
+        const rect = element.getBoundingClientRect();
+        return (
+          clientX >= rect.left &&
+          clientX <= rect.right &&
+          clientY >= rect.top &&
+          clientY <= rect.bottom
+        );
+      });
+      return matchedFolder?.dataset.assetFolderId ?? null;
+    };
+
+    const updatePointerDrag = (event: PointerEvent) => {
+      const currentDrag = assetPointerDragRef.current;
+      if (!currentDrag || currentDrag.pointerId !== event.pointerId) {
+        return;
+      }
+      const distance = Math.hypot(
+        event.clientX - currentDrag.startClientX,
+        event.clientY - currentDrag.startClientY,
+      );
+      const nextDrag = {
+        ...currentDrag,
+        currentClientX: event.clientX,
+        currentClientY: event.clientY,
+        active: currentDrag.active || distance > 4,
+        dropFolderId: resolveAssetFolderId(event.clientX, event.clientY),
+      };
+      assetPointerDragRef.current = nextDrag;
+      setAssetPointerDrag(nextDrag);
+      const canvasPoint = resolveCanvasPoint(event.clientX, event.clientY);
+      setUploadDropTarget(canvasPoint ? 'canvas' : null);
+      updateAssetMoveDropFolder(nextDrag.dropFolderId);
+    };
+
+    const finishPointerDrag = (event: PointerEvent) => {
+      const currentDrag = assetPointerDragRef.current;
+      if (!currentDrag || currentDrag.pointerId !== event.pointerId) {
+        return;
+      }
+      const canvasPoint = resolveCanvasPoint(event.clientX, event.clientY);
+      const dropFolderId =
+        resolveAssetFolderId(event.clientX, event.clientY) ??
+        currentDrag.dropFolderId;
+      const draggedAsset = assetsRef.current.find(
+        (asset) => asset.id === currentDrag.assetId,
+      );
+      assetPointerDragRef.current = null;
+      setAssetPointerDrag(null);
+      setUploadDropTarget(null);
+      updateAssetMoveDropFolder(null);
+      if (!currentDrag.active || !draggedAsset) {
+        return;
+      }
+      if (dropFolderId && dropFolderId !== draggedAsset.folderId) {
+        suppressAssetClickRef.current = true;
+        window.setTimeout(() => {
+          suppressAssetClickRef.current = false;
+        }, 0);
+        moveAssetToFolderRef.current(draggedAsset.id, dropFolderId);
+        return;
+      }
+      if (canvasPoint) {
+        suppressAssetClickRef.current = true;
+        window.setTimeout(() => {
+          suppressAssetClickRef.current = false;
+        }, 0);
+        addAssetLayerRef.current(draggedAsset, canvasPoint);
+      }
+    };
+
+    window.addEventListener('pointermove', updatePointerDrag);
+    window.addEventListener('pointerup', finishPointerDrag);
+    window.addEventListener('pointercancel', finishPointerDrag);
+    return () => {
+      window.removeEventListener('pointermove', updatePointerDrag);
+      window.removeEventListener('pointerup', finishPointerDrag);
+      window.removeEventListener('pointercancel', finishPointerDrag);
+    };
+  }, []);
+
   useEffect(() => {
     const blockBrowserZoom = (event: WheelEvent) => {
       const editorElement = editorRootRef.current;
@@ -1449,6 +1810,144 @@ export function ImageCanvasEditorView() {
     );
   };
 
+  const exportCanvasAssets = async () => {
+    if (isExportingAssets) {
+      return;
+    }
+    const exportableLayers = layers
+      .filter((layer) => isLayerValidForAssetLibrary(layer, assets))
+      .sort((left, right) => left.zIndex - right.zIndex);
+    if (!exportableLayers.length) {
+      setAssetExportStatus({
+        tone: 'info',
+        message: '当前画布没有可导出的素材',
+      });
+      return;
+    }
+
+    setIsExportingAssets(true);
+    setAssetExportStatus(null);
+
+    try {
+      const exportedAt = new Date();
+      const projectName = sanitizeExportFilePart(projectTitle, '未命名画布');
+      const rootFolderName = `${projectName}-画布素材`;
+      const zip = new JSZip();
+      const rootFolder = zip.folder(rootFolderName) ?? zip;
+      const imagesFolder = rootFolder.folder('images') ?? 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;
+
+        try {
+          const blob = await readLayerImageBlob(layer);
+          const extension = getImageExtensionFromTypeOrSrc(blob.type, layer.src);
+          const file = `images/${indexedFileName}.${extension}`;
+          imageByKey.set(key, {
+            key,
+            file,
+            layer,
+            blob,
+          });
+          imagesFolder.file(`${indexedFileName}.${extension}`, await blobToUint8Array(blob));
+        } catch (error) {
+          imageByKey.set(key, {
+            key,
+            file: `images/${indexedFileName}.png`,
+            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) {
+        setAssetExportStatus({
+          tone: 'error',
+          message: '素材导出失败',
+        });
+        return;
+      }
+
+      const metadata: CanvasAssetExportMetadata = {
+        projectId,
+        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) => ({
+          key: image.key,
+          title: image.layer.title,
+          src: image.layer.src,
+          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 ? '部分素材未能导出' : '画布素材已导出',
+      });
+    } catch {
+      setAssetExportStatus({
+        tone: 'error',
+        message: '素材导出失败',
+      });
+    } finally {
+      setIsExportingAssets(false);
+    }
+  };
+
   const exportContextLayer = () => {
     const targetIds = getContextTargetLayerIds();
     const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
@@ -1464,6 +1963,47 @@ export function ImageCanvasEditorView() {
     setContextMenu(null);
   };
 
+  const startProjectRename = () => {
+    setProjectRenameValue(projectTitle);
+    setProjectRenameError(null);
+    setIsRenamingProject(true);
+  };
+
+  const cancelProjectRename = () => {
+    setProjectRenameValue(projectTitle);
+    setProjectRenameError(null);
+    setIsRenamingProject(false);
+  };
+
+  const submitProjectRename = () => {
+    const nextTitle = projectRenameValue.trim();
+    if (!nextTitle) {
+      setProjectRenameError('项目名称不能为空');
+      return;
+    }
+    if (!projectId || nextTitle === projectTitle) {
+      setProjectRenameValue(projectTitle);
+      setProjectRenameError(null);
+      setIsRenamingProject(false);
+      return;
+    }
+    setIsProjectRenameSaving(true);
+    setProjectRenameError(null);
+    renameEditorProject(projectId, nextTitle)
+      .then((project) => {
+        const savedTitle = project.title?.trim() || nextTitle;
+        setProjectTitle(savedTitle);
+        setProjectRenameValue(savedTitle);
+        setIsRenamingProject(false);
+      })
+      .catch((error: unknown) => {
+        setProjectRenameError(
+          error instanceof Error ? error.message : '重命名项目失败',
+        );
+      })
+      .finally(() => setIsProjectRenameSaving(false));
+  };
+
   const deleteContextLayers = () => {
     const targetIds = getContextTargetLayerIds();
     if (!targetIds.length) {
@@ -1481,14 +2021,60 @@ export function ImageCanvasEditorView() {
     setContextMenu(null);
   };
 
-  const createProjectResourceForLayer = (
-    layer: CanvasLayer,
-    options: { onCreated?: (resourceId: string) => void } = {},
-  ) => {
-    if (!projectId) {
+  const updateAssetMoveDropFolder = (folderId: string | null) => {
+    setAssetMoveDropFolderId(folderId);
+    if (!folderId) {
+      setIsAssetMoveDropHeaderPinned(false);
       return;
     }
-    createEditorProjectResource(projectId, {
+    const listElement = assetListRef.current;
+    const headerElement =
+      [...(listElement?.querySelectorAll<HTMLElement>(
+        '[data-asset-folder-header-id]',
+      ) ?? [])].find(
+        (element) => element.dataset.assetFolderHeaderId === folderId,
+      ) ?? null;
+    if (!listElement || !headerElement) {
+      setIsAssetMoveDropHeaderPinned(false);
+      return;
+    }
+    const listRect = listElement.getBoundingClientRect();
+    const headerRect = headerElement.getBoundingClientRect();
+    setIsAssetMoveDropHeaderPinned(
+      headerRect.top < listRect.top || headerRect.bottom > listRect.bottom,
+    );
+  };
+
+  const saveProjectLayoutNow = useCallback(
+    (nextLayers: CanvasLayer[], nextViewport = viewportRef.current) => {
+      if (!projectId || !isProjectReady) {
+        return Promise.resolve();
+      }
+      if (saveTimerRef.current) {
+        window.clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+      return saveEditorProjectLayout(projectId, {
+        viewport: nextViewport,
+        layers: nextLayers.map(serializeLayer),
+      });
+    },
+    [isProjectReady, projectId],
+  );
+
+  const createProjectResourceForLayer = (
+    layer: CanvasLayer,
+    options: {
+      onCreated?: (resourceId: string) => void;
+      onFailed?: () => void;
+      saveLayout?: boolean;
+    } = {},
+  ) => {
+    if (!projectId) {
+      options.onFailed?.();
+      return Promise.resolve(null);
+    }
+    return createEditorProjectResource(projectId, {
       imageSrc: layer.src,
       objectKey: layer.objectKey,
       assetObjectId: layer.assetObjectId,
@@ -1504,25 +2090,33 @@ export function ImageCanvasEditorView() {
     })
       .then((resource) => {
         options.onCreated?.(resource.resourceId);
-        setLayers((currentLayers) =>
-          currentLayers.map((currentLayer) =>
+        setLayers((currentLayers) => {
+          const nextLayers = currentLayers.map((currentLayer) =>
             currentLayer.id === layer.id
               ? {
                   ...currentLayer,
                   resourceId: resource.resourceId,
                 }
               : currentLayer,
-          ),
-        );
+          );
+          if (options.saveLayout) {
+            void saveProjectLayoutNow(nextLayers).catch(() => {});
+          }
+          return nextLayers;
+        });
+        return resource;
       })
-      .catch(() => {});
+      .catch(() => {
+        options.onFailed?.();
+        return null;
+      });
   };
 
   const createAssetFromGeneratedLayer = (layer: CanvasLayer) => {
     const targetFolder =
       assetFolders.find((folder) => folder.systemDefault) ?? assetFolders[0];
     if (!targetFolder) {
-      return;
+      return Promise.resolve(null);
     }
     const temporaryAssetId = `generated-asset-${layer.id}`;
     const temporaryAsset: EditorAsset = {
@@ -1556,7 +2150,7 @@ export function ImageCanvasEditorView() {
       ),
     );
 
-    createEditorAsset({
+    return createEditorAsset({
       folderId: targetFolder.id,
       label: layer.title,
       imageSrc: layer.src,
@@ -1596,8 +2190,8 @@ export function ImageCanvasEditorView() {
               : currentAsset,
           ),
         );
-        setLayers((currentLayers) =>
-          currentLayers.map((currentLayer) =>
+        setLayers((currentLayers) => {
+          const nextLayers = currentLayers.map((currentLayer) =>
             currentLayer.id === layer.id
               ? {
                   ...currentLayer,
@@ -1606,13 +2200,17 @@ export function ImageCanvasEditorView() {
                   assetObjectId: asset.assetObjectId ?? currentLayer.assetObjectId,
                 }
               : currentLayer,
-          ),
-        );
+          );
+          void saveProjectLayoutNow(nextLayers).catch(() => {});
+          return nextLayers;
+        });
+        return asset;
       })
       .catch(() => {
         setAssets((currentAssets) =>
           currentAssets.filter((asset) => asset.id !== temporaryAssetId),
         );
+        return null;
       });
   };
 
@@ -1629,11 +2227,29 @@ export function ImageCanvasEditorView() {
       },
     );
     captureCanvasHistory();
-    setLayers((currentLayers) => [...currentLayers, nextLayer]);
+    setLayers((currentLayers) => {
+      const nextLayers = [...currentLayers, nextLayer];
+      void saveProjectLayoutNow(nextLayers).catch(() => {});
+      return nextLayers;
+    });
     selectSingleLayer(nextLayer.id);
     setHoveredLayerId(null);
-    createProjectResourceForLayer(nextLayer);
+    createProjectResourceForLayer(nextLayer, {
+      onFailed: () => {
+        setLayers((currentLayers) =>
+          currentLayers.filter((currentLayer) => currentLayer.id !== nextLayer.id),
+        );
+        setSelectedLayerIds((currentIds) =>
+          currentIds.filter((layerId) => layerId !== nextLayer.id),
+        );
+        setSelectedLayerId((currentId) =>
+          currentId === nextLayer.id ? null : currentId,
+        );
+      },
+      saveLayout: true,
+    });
   };
+  addAssetLayerRef.current = addAssetLayer;
 
   const startRenamingAsset = (asset: EditorAsset) => {
     setRenamingAsset({
@@ -1705,6 +2321,7 @@ export function ImageCanvasEditorView() {
       });
     }
   };
+  moveAssetToFolderRef.current = moveAssetToFolder;
 
   const toggleAssetFolder = (folderId: string) => {
     const nextFolder = assetFolders.find((folder) => folder.id === folderId);
@@ -2066,6 +2683,27 @@ export function ImageCanvasEditorView() {
       reader.readAsDataURL(file);
     });
 
+  const updateUploadingAsset = (
+    assetId: string,
+    patch: Partial<
+      Pick<
+      EditorAsset,
+      'uploadProgress' | 'uploadStatus' | 'uploadMessage' | 'src' | 'width' | 'height'
+      >
+    >,
+  ) => {
+    setAssets((currentAssets) =>
+      currentAssets.map((asset) =>
+        asset.id === assetId
+          ? {
+              ...asset,
+              ...patch,
+            }
+          : asset,
+      ),
+    );
+  };
+
   const addUploadedLayer = async (
     file: File,
     options: {
@@ -2082,13 +2720,55 @@ export function ImageCanvasEditorView() {
 
     const uploadIndex = options.uploadIndex ?? layerCounterRef.current + 1;
     layerCounterRef.current = Math.max(layerCounterRef.current, uploadIndex);
-    const imageSrc = await readImageFileAsDataUrl(file);
     const fallbackWidth = 420;
     const fallbackHeight = 315;
     const uploadFolderId =
       assetFolders.some((folder) => folder.id === (options.folderId ?? activeUploadFolderId))
         ? (options.folderId ?? activeUploadFolderId)
         : 'project';
+    const uploadedAsset: EditorAsset = {
+      id: `upload-${uploadIndex}`,
+      label: file.name || '上传图片',
+      src: '',
+      width: fallbackWidth,
+      height: fallbackHeight,
+      folderId: uploadFolderId,
+      sourceKind: 'uploaded',
+      sourceType: 'uploaded',
+      persisted: false,
+      uploadStatus: 'uploading',
+      uploadProgress: 8,
+      uploadMessage: '准备上传',
+    };
+    setAssets((currentAssets) => [...currentAssets, uploadedAsset]);
+    setAssetFolders((currentFolders) =>
+      currentFolders.map((folder) =>
+        folder.id === uploadFolderId
+          ? {
+              ...folder,
+              collapsed: false,
+            }
+          : folder,
+      ),
+    );
+
+    let imageSrc = '';
+    try {
+      imageSrc = await readImageFileAsDataUrl(file);
+      updateUploadingAsset(uploadedAsset.id, {
+        src: imageSrc,
+        uploadProgress: 42,
+        uploadMessage: '读取图片',
+      });
+    } catch {
+      updateUploadingAsset(uploadedAsset.id, {
+        uploadStatus: 'failed',
+        uploadProgress: 100,
+        uploadMessage: '读取失败',
+      });
+      return;
+    }
+
     const screenPoint = options.canvasPoint ?? {
       x: canvasSize.width / 2,
       y: canvasSize.height / 2,
@@ -2118,37 +2798,19 @@ export function ImageCanvasEditorView() {
       zIndex: uploadIndex + 10,
       sourceType: 'uploaded',
     };
-    const uploadedAsset: EditorAsset = {
-      id: `upload-${uploadIndex}`,
-      label: file.name || '上传图片',
-      src: imageSrc,
-      width: fallbackWidth,
-      height: fallbackHeight,
-      folderId: uploadFolderId,
-      sourceKind: 'uploaded',
-      sourceType: 'uploaded',
-      persisted: false,
-    };
 
     if (options.addToCanvas) {
       setLayers((currentLayers) => [...currentLayers, nextLayer]);
     }
-    setAssets((currentAssets) => [...currentAssets, uploadedAsset]);
-    setAssetFolders((currentFolders) =>
-      currentFolders.map((folder) =>
-        folder.id === uploadFolderId
-          ? {
-              ...folder,
-              collapsed: false,
-            }
-          : folder,
-      ),
-    );
     if (options.addToCanvas) {
       selectSingleLayer(nextLayer.id);
       setActiveSidebarPanel('layers');
     }
 
+    updateUploadingAsset(uploadedAsset.id, {
+      uploadProgress: 68,
+      uploadMessage: '上传中',
+    });
     createEditorAsset({
       folderId: uploadFolderId,
       label: uploadedAsset.label,
@@ -2172,15 +2834,53 @@ export function ImageCanvasEditorView() {
                   objectKey: asset.objectKey ?? undefined,
                   assetObjectId: asset.assetObjectId ?? undefined,
                   persisted: true,
+                  uploadStatus: undefined,
+                  uploadProgress: undefined,
+                  uploadMessage: undefined,
                 }
               : currentAsset,
           ),
         );
+        if (options.addToCanvas) {
+          setLayers((currentLayers) => {
+            const nextLayers = currentLayers.map((currentLayer) =>
+              currentLayer.id === nextLayer.id
+                ? {
+                    ...currentLayer,
+                    sourceAssetId: asset.assetId,
+                    objectKey: asset.objectKey ?? currentLayer.objectKey,
+                    assetObjectId: asset.assetObjectId ?? currentLayer.assetObjectId,
+                  }
+                : currentLayer,
+            );
+            void saveProjectLayoutNow(nextLayers).catch(() => {});
+            return nextLayers;
+          });
+        }
       })
-      .catch(() => {});
+      .catch(() => {
+        updateUploadingAsset(uploadedAsset.id, {
+          uploadStatus: 'failed',
+          uploadProgress: 100,
+          uploadMessage: '上传失败',
+        });
+      });
 
     if (options.addToCanvas) {
-      createProjectResourceForLayer(nextLayer);
+      createProjectResourceForLayer(nextLayer, {
+        onFailed: () => {
+          setLayers((currentLayers) =>
+            currentLayers.filter((currentLayer) => currentLayer.id !== nextLayer.id),
+          );
+          setSelectedLayerIds((currentIds) =>
+            currentIds.filter((layerId) => layerId !== nextLayer.id),
+          );
+          setSelectedLayerId((currentId) =>
+            currentId === nextLayer.id ? null : currentId,
+          );
+        },
+        saveLayout: true,
+      });
     }
 
     if (imageSrc) {
@@ -2382,8 +3082,30 @@ export function ImageCanvasEditorView() {
     if (options.sourceLayer) {
       fitLayers([options.sourceLayer, nextLayer]);
     }
-    createAssetFromGeneratedLayer(nextLayer);
-    createProjectResourceForLayer(nextLayer);
+    void createAssetFromGeneratedLayer(nextLayer);
+    void createProjectResourceForLayer(nextLayer, {
+      onFailed: () => {
+        setLayers((currentLayers) =>
+          currentLayers.filter((currentLayer) => currentLayer.id !== nextLayer.id),
+        );
+        setSelectedLayerIds((currentIds) =>
+          currentIds.filter((layerId) => layerId !== nextLayer.id),
+        );
+        setSelectedLayerId((currentId) =>
+          currentId === nextLayer.id ? null : currentId,
+        );
+        setGenerateDialog((currentDialog) =>
+          currentDialog?.generatedLayerId === nextLayer.id
+            ? {
+                ...currentDialog,
+                generatedLayerId: undefined,
+                errorMessage: '图片已生成，但保存到画布失败，请稍后重试。',
+              }
+            : currentDialog,
+        );
+      },
+      saveLayout: true,
+    });
   };
 
   const submitImageGeneration = async (dialog: GenerateDialogState) => {
@@ -2577,7 +3299,13 @@ export function ImageCanvasEditorView() {
   };
 
   const handleCanvasDragOver = (event: ReactDragEvent<HTMLDivElement>) => {
-    if (event.dataTransfer.types.includes('Files')) {
+    if (hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE)) {
+      event.preventDefault();
+      setUploadDropTarget('canvas');
+      event.dataTransfer.dropEffect = 'copy';
+      return;
+    }
+    if (hasDataTransferType(event.dataTransfer, 'Files')) {
       event.preventDefault();
       setUploadDropTarget('canvas');
       event.dataTransfer.dropEffect = 'copy';
@@ -2592,23 +3320,40 @@ export function ImageCanvasEditorView() {
     }
   };
 
+  const getCanvasDropPoint = (event: ReactDragEvent<HTMLDivElement>) => {
+    const rect = canvasViewportRef.current?.getBoundingClientRect();
+    const fallbackPoint = {
+      x: canvasSize.width / 2,
+      y: canvasSize.height / 2,
+    };
+    if (!rect || !Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) {
+      return fallbackPoint;
+    }
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    };
+  };
+
   const handleCanvasDrop = (event: ReactDragEvent<HTMLDivElement>) => {
+    const draggedAssetId = getDraggedAssetId(event.dataTransfer);
+    if (draggedAssetId) {
+      const draggedAsset = assets.find((asset) => asset.id === draggedAssetId);
+      if (!draggedAsset) {
+        return;
+      }
+      event.preventDefault();
+      setUploadDropTarget(null);
+      addAssetLayer(draggedAsset, getCanvasDropPoint(event));
+      return;
+    }
     const files = event.dataTransfer.files;
     if (!files.length) {
       return;
     }
     event.preventDefault();
     setUploadDropTarget(null);
-    const rect = canvasViewportRef.current?.getBoundingClientRect();
-    const canvasPoint = rect
-      ? {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-        }
-      : {
-          x: canvasSize.width / 2,
-          y: canvasSize.height / 2,
-        };
+    const canvasPoint = getCanvasDropPoint(event);
     const defaultFolder =
       assetFolders.find((folder) => folder.systemDefault) ?? assetFolders[0];
     addUploadedFiles(files, {
@@ -3031,6 +3776,18 @@ export function ImageCanvasEditorView() {
           event.currentTarget.value = '';
         }}
       />
+      {assetPointerDrag?.active ? (
+        <div
+          className="image-canvas-editor__asset-drag-preview"
+          style={{
+            left: assetPointerDrag.currentClientX,
+            top: assetPointerDrag.currentClientY,
+          }}
+          aria-hidden="true"
+        >
+          {assets.find((asset) => asset.id === assetPointerDrag.assetId)?.label ?? '素材'}
+        </div>
+      ) : null}
       {activeSidebarPanel ? (
         <aside
           className="image-canvas-editor__sidebar"
@@ -3090,9 +3847,16 @@ export function ImageCanvasEditorView() {
               setUploadDropTarget((currentTarget) =>
                 currentTarget === 'assets' ? null : currentTarget,
               );
+              updateAssetMoveDropFolder(null);
             }
           }}
         >
+              {assetMoveDropFolder && isAssetMoveDropHeaderPinned ? (
+                <div className="image-canvas-editor__asset-folder-sticky-target">
+                  <Folder className="h-4 w-4" aria-hidden="true" />
+                  <span>{assetMoveDropFolder.label}</span>
+                </div>
+              ) : null}
               {creatingFolder ? (
                 <form
                   className="image-canvas-editor__folder-create"
@@ -3135,17 +3899,25 @@ export function ImageCanvasEditorView() {
               {groupedAssets.map((folder) => (
                 <section
                   key={folder.id}
-                  className="image-canvas-editor__asset-folder"
+                  className={[
+                    'image-canvas-editor__asset-folder',
+                    assetMoveDropFolderId === folder.id
+                      ? 'image-canvas-editor__asset-folder--move-target'
+                      : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
                   aria-label={folder.label}
+                  data-asset-folder-id={folder.id}
                   onDragOver={(event) => {
-                    if (event.dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE)) {
+                    if (hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE)) {
                       event.preventDefault();
                       event.stopPropagation();
-                      setUploadDropTarget('assets');
+                      updateAssetMoveDropFolder(folder.id);
                       event.dataTransfer.dropEffect = 'move';
                       return;
                     }
-                    if (event.dataTransfer.types.includes('Files')) {
+                    if (hasDataTransferType(event.dataTransfer, 'Files')) {
                       event.preventDefault();
                       event.stopPropagation();
                       setUploadDropTarget('assets');
@@ -3158,6 +3930,7 @@ export function ImageCanvasEditorView() {
                       event.preventDefault();
                       event.stopPropagation();
                       setUploadDropTarget(null);
+                      updateAssetMoveDropFolder(null);
                       moveAssetToFolder(movingAssetId, folder.id);
                       return;
                     }
@@ -3167,10 +3940,14 @@ export function ImageCanvasEditorView() {
                     event.preventDefault();
                     event.stopPropagation();
                     setUploadDropTarget(null);
+                    updateAssetMoveDropFolder(null);
                     addUploadedFiles(event.dataTransfer.files, { folderId: folder.id });
                   }}
                 >
-                  <div className="image-canvas-editor__asset-folder-header">
+                  <div
+                    className="image-canvas-editor__asset-folder-header"
+                    data-asset-folder-header-id={folder.id}
+                  >
                     <EditorIconButton
                       label={`${folder.collapsed ? '展开' : '折叠'}${folder.label}`}
                       title={folder.collapsed ? '展开' : '折叠'}
@@ -3255,6 +4032,9 @@ export function ImageCanvasEditorView() {
                   >
                     {folder.assets.map((asset) => {
                       const isRenaming = renamingAsset?.assetId === asset.id;
+                      const isUploadingAsset = asset.uploadStatus === 'uploading';
+                      const isFailedUpload = asset.uploadStatus === 'failed';
+                      const uploadProgress = clamp(asset.uploadProgress ?? 0, 0, 100);
                       const titleNode = isRenaming ? (
                         <PlatformTextField
                           aria-label={`重命名素材${asset.label}`}
@@ -3281,7 +4061,12 @@ export function ImageCanvasEditorView() {
                           }}
                         />
                       ) : undefined;
-                      const actions = isRenaming ? (
+                      const actions = 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}名称`}
@@ -3322,11 +4107,21 @@ export function ImageCanvasEditorView() {
                             imageSrc={asset.src}
                             imageAlt={`素材：${asset.label}`}
                             primaryLabel={
-                              isAssetSelectionMode
+                              isUploadingAsset
+                                ? `上传中${asset.label}`
+                                : isFailedUpload
+                                  ? `上传失败${asset.label}`
+                                  : isAssetSelectionMode
                                 ? `选择素材${asset.label}`
                                 : `添加${asset.label}`
                             }
                             onPrimaryClick={() => {
+                              if (isUploadingAsset || isFailedUpload) {
+                                return;
+                              }
+                              if (suppressAssetClickRef.current) {
+                                return;
+                              }
                               if (isAssetSelectionMode) {
                                 toggleAssetSelected(asset.id);
                                 return;
@@ -3334,15 +4129,61 @@ export function ImageCanvasEditorView() {
                               addAssetLayer(asset);
                             }}
                             selected={selectedAssetIds.has(asset.id)}
-                            rowClassName="image-canvas-editor__asset-row"
+                            rowClassName={[
+                              'image-canvas-editor__asset-row',
+                              isUploadingAsset
+                                ? 'image-canvas-editor__asset-row--uploading'
+                                : '',
+                              isFailedUpload
+                                ? 'image-canvas-editor__asset-row--upload-failed'
+                                : '',
+                            ]
+                              .filter(Boolean)
+                              .join(' ')}
                             primaryClassName="image-canvas-editor__asset-button"
                             thumbnailClassName="image-canvas-editor__asset-thumb"
                             metaClassName="image-canvas-editor__asset-meta"
-                            titleNode={titleNode}
+                            titleNode={
+                              isUploadingAsset || isFailedUpload ? (
+                                <span>{asset.label}</span>
+                              ) : (
+                                titleNode
+                              )
+                            }
                             actions={actions}
-                            draggable={!isRenaming}
+                            draggable={!isRenaming && !isUploadingAsset && !isFailedUpload}
+                            previewOverlay={
+                              isUploadingAsset ? (
+                                <div className="image-canvas-editor__asset-upload-overlay">
+                                  <span>上传中</span>
+                                </div>
+                              ) : undefined
+                            }
+                            footerNode={
+                              isUploadingAsset || isFailedUpload ? (
+                                <div className="image-canvas-editor__asset-upload-progress">
+                                  <div>
+                                    <span>
+                                      {isFailedUpload
+                                        ? (asset.uploadMessage ?? '上传失败')
+                                        : (asset.uploadMessage ?? '上传中')}
+                                    </span>
+                                    <strong>{Math.round(uploadProgress)}%</strong>
+                                  </div>
+                                  <progress
+                                    aria-label={`素材${asset.label}上传进度`}
+                                    max={100}
+                                    value={uploadProgress}
+                                  />
+                                </div>
+                              ) : undefined
+                            }
                             onDragStart={(event) => {
-                              if (isRenaming) {
+                              if (isRenaming || isUploadingAsset || isFailedUpload) {
+                                event.preventDefault();
+                                return;
+                              }
+                              if (assetPointerDragRef.current?.assetId === asset.id) {
                                 event.preventDefault();
                                 return;
                               }
@@ -3352,26 +4193,60 @@ export function ImageCanvasEditorView() {
                                 asset.id,
                               );
                               event.dataTransfer.setData('text/plain', asset.label);
-                              setUploadDropTarget('assets');
+                              event.dataTransfer.setData('text/uri-list', asset.src);
+                              updateAssetMoveDropFolder(asset.folderId);
                             }}
                             onDragEnd={() => {
-                              setUploadDropTarget((currentTarget) =>
-                                currentTarget === 'assets' ? null : currentTarget,
-                              );
+                              updateAssetMoveDropFolder(null);
                             }}
                             onPointerDown={(event) => {
-                              if (!isAssetSelectionMode || event.button !== 0) {
+                              if (event.button !== 0) {
                                 return;
                               }
                               const target = event.target as HTMLElement;
-                              if (target.closest('button')) {
+                              if (isAssetSelectionMode) {
+                                if (target.closest('button')) {
+                                  return;
+                                }
+                                event.currentTarget.setPointerCapture?.(event.pointerId);
+                                event.preventDefault();
+                                event.stopPropagation();
+                                handleAssetMarqueePointerDown(
+                                  event as ReactPointerEvent<HTMLDivElement>,
+                                );
                                 return;
                               }
-                              event.preventDefault();
-                              event.stopPropagation();
-                              handleAssetMarqueePointerDown(
-                                event as ReactPointerEvent<HTMLDivElement>,
+                              if (target.closest('input, textarea, select')) {
+                                return;
+                              }
+                              if (isUploadingAsset || isFailedUpload) {
+                                return;
+                              }
+                              const primaryAssetButton = target.closest(
+                                '.image-canvas-editor__asset-button',
                               );
+                              if (target.closest('button') && !primaryAssetButton) {
+                                return;
+                              }
+                              const nextDrag: AssetPointerDragState = {
+                                pointerId: event.pointerId,
+                                assetId: asset.id,
+                                startClientX: event.clientX,
+                                startClientY: event.clientY,
+                                currentClientX: event.clientX,
+                                currentClientY: event.clientY,
+                                active: false,
+                                dropFolderId: null,
+                              };
+                              if (!primaryAssetButton) {
+                                event.currentTarget.setPointerCapture?.(
+                                  event.pointerId,
+                                );
+                                event.preventDefault();
+                              }
+                              event.stopPropagation();
+                              assetPointerDragRef.current = nextDrag;
+                              setAssetPointerDrag(nextDrag);
                             }}
                             onPointerEnter={(event) => {
                               if (isAssetSelectionMode && event.buttons === 1) {
@@ -3383,14 +4258,14 @@ export function ImageCanvasEditorView() {
                               }
                             }}
                             onDragOver={(event) => {
-                              if (event.dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE)) {
+                              if (hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE)) {
                                 event.preventDefault();
                                 event.stopPropagation();
-                                setUploadDropTarget('assets');
+                                updateAssetMoveDropFolder(asset.folderId);
                                 event.dataTransfer.dropEffect = 'move';
                                 return;
                               }
-                              if (event.dataTransfer.types.includes('Files')) {
+                              if (hasDataTransferType(event.dataTransfer, 'Files')) {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 setUploadDropTarget('assets');
@@ -3405,6 +4280,7 @@ export function ImageCanvasEditorView() {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 setUploadDropTarget(null);
+                                updateAssetMoveDropFolder(null);
                                 moveAssetToFolder(movingAssetId, asset.folderId);
                                 return;
                               }
@@ -3414,6 +4290,7 @@ export function ImageCanvasEditorView() {
                               event.preventDefault();
                               event.stopPropagation();
                               setUploadDropTarget(null);
+                              updateAssetMoveDropFolder(null);
                               addUploadedFiles(event.dataTransfer.files, {
                                 folderId: asset.folderId,
                               });
@@ -3529,10 +4406,98 @@ export function ImageCanvasEditorView() {
             >
               <ChevronLeft className="h-4 w-4" aria-hidden="true" />
             </a>
-            <div className="image-canvas-editor__title-block">
-              <h1>{projectTitle}</h1>
-              <span>画布</span>
-            </div>
+            {isRenamingProject ? (
+              <form
+                className="image-canvas-editor__project-title-form"
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  submitProjectRename();
+                }}
+              >
+                <PlatformTextField
+                  aria-label="项目名称"
+                  value={projectRenameValue}
+                  onChange={(event) => {
+                    setProjectRenameValue(event.target.value);
+                    setProjectRenameError(null);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Escape') {
+                      event.preventDefault();
+                      cancelProjectRename();
+                    }
+                  }}
+                  autoFocus
+                  disabled={isProjectRenameSaving}
+                  className="image-canvas-editor__project-title-input"
+                />
+                <EditorIconButton
+                  label="保存项目名称"
+                  title="保存"
+                  icon={Check}
+                  type="submit"
+                  disabled={isProjectRenameSaving}
+                />
+                <EditorIconButton
+                  label="取消修改项目名称"
+                  title="取消"
+                  icon={X}
+                  disabled={isProjectRenameSaving}
+                  onClick={cancelProjectRename}
+                />
+                {projectRenameError ? (
+                  <span className="image-canvas-editor__project-title-error" role="alert">
+                    {projectRenameError}
+                  </span>
+                ) : null}
+              </form>
+            ) : (
+              <div className="image-canvas-editor__title-block">
+                <div className="image-canvas-editor__project-title-row">
+                  <button
+                    type="button"
+                    className="image-canvas-editor__project-title-button"
+                    onDoubleClick={startProjectRename}
+                    aria-label={`编辑项目名称${projectTitle}`}
+                  >
+                    <h1>{projectTitle}</h1>
+                  </button>
+                  <EditorIconButton
+                    className="image-canvas-editor__project-rename-button"
+                    label="编辑项目名称"
+                    title="编辑项目名称"
+                    icon={Pencil}
+                    onClick={startProjectRename}
+                  />
+                </div>
+                <span>画布</span>
+              </div>
+            )}
+          </div>
+          <div className="image-canvas-editor__topbar-actions">
+            {assetExportStatus ? (
+              <PlatformStatusMessage
+                tone={assetExportStatus.tone}
+                surface="platform"
+                size="xs"
+                role={assetExportStatus.tone === 'error' ? 'alert' : 'status'}
+              >
+                {assetExportStatus.message}
+              </PlatformStatusMessage>
+            ) : null}
+            <EditorIconButton
+              className="image-canvas-editor__asset-export-button"
+              label="下载画布素材"
+              title="下载画布素材"
+              icon={Download}
+              disabled={
+                isExportingAssets ||
+                !layers.some((layer) => isLayerValidForAssetLibrary(layer, assets))
+              }
+              onClick={() => {
+                void exportCanvasAssets();
+              }}
+            />
           </div>
         </div>
 
@@ -3903,8 +4868,8 @@ export function ImageCanvasEditorView() {
               <PlatformIconButton
                 label="画布背景色"
                 title="画布背景色"
-                aria-expanded={isBackgroundMenuOpen}
-                onClick={() => setIsBackgroundMenuOpen((open) => !open)}
+                aria-expanded={isBackgroundPanelOpen}
+                onClick={() => setIsBackgroundPanelOpen((open) => !open)}
                 icon={
                   <span
                     className="image-canvas-editor__background-swatch-current"
@@ -3912,30 +4877,69 @@ export function ImageCanvasEditorView() {
                   />
                 }
               />
-              {isBackgroundMenuOpen ? (
-                <PlatformFloatingMenu
-                  className="image-canvas-editor__background-menu"
-                  label="画布背景色菜单"
-                  placement="top-start"
+              {isBackgroundPanelOpen ? (
+                <div
+                  className="image-canvas-editor__background-panel"
+                  role="dialog"
+                  aria-label="画布背景设置"
                 >
-                  {CANVAS_BACKGROUND_OPTIONS.map((option) => (
-                    <PlatformFloatingMenuItem
-                      key={option.value}
-                      className="image-canvas-editor__background-menu-item"
-                      aria-label={`切换画布背景色为${option.label}`}
-                      aria-pressed={canvasBackgroundColor === option.value}
-                      onClick={() => {
-                        setCanvasBackgroundColor(option.value);
-                        setIsBackgroundMenuOpen(false);
-                      }}
+                  <div className="image-canvas-editor__background-panel-header">
+                    <span>画布背景色</span>
+                    <button
+                      type="button"
+                      className="image-canvas-editor__background-close-button"
+                      aria-label="关闭画布背景设置"
+                      onClick={() => setIsBackgroundPanelOpen(false)}
                     >
-                      <span
-                        className="image-canvas-editor__background-swatch"
-                        style={{ backgroundColor: option.value }}
-                      />
-                    </PlatformFloatingMenuItem>
-                  ))}
-                </PlatformFloatingMenu>
+                      <X size={18} />
+                    </button>
+                  </div>
+                  <div className="image-canvas-editor__background-color-field">
+                    <input
+                      type="color"
+                      aria-label="自定义画布背景色"
+                      value={canvasBackgroundColor}
+                      onChange={(event) =>
+                        applyCanvasBackgroundColor(event.currentTarget.value)
+                      }
+                    />
+                  </div>
+                  <div className="image-canvas-editor__background-hue-track" />
+                  <div className="image-canvas-editor__background-preset-grid">
+                    {CANVAS_BACKGROUND_OPTIONS.map((option) => (
+                      <button
+                        key={option.value}
+                        type="button"
+                        className="image-canvas-editor__background-preset"
+                        aria-label={`切换画布背景色为${option.label}`}
+                        aria-pressed={canvasBackgroundColor === option.value}
+                        onClick={() => applyCanvasBackgroundColor(option.value)}
+                      >
+                        <span style={{ backgroundColor: option.value }} />
+                      </button>
+                    ))}
+                  </div>
+                  <label className="image-canvas-editor__background-hex-row">
+                    <span>#</span>
+                    <input
+                      aria-label="画布背景十六进制颜色"
+                      value={
+                        backgroundHexValue.startsWith('#')
+                          ? backgroundHexValue.replace(/^#/, '').toUpperCase()
+                          : backgroundHexValue
+                      }
+                      onChange={(event) => {
+                        const nextValue = event.currentTarget.value;
+                        setBackgroundHexValue(nextValue);
+                        const normalizedColor = normalizeHexColorInput(nextValue);
+                        if (normalizedColor) {
+                          setCanvasBackgroundColor(normalizedColor);
+                          setBackgroundHexValue(normalizedColor);
+                        }
+                      }}
+                    />
+                  </label>
+                </div>
               ) : null}
             </div>
             <EditorIconButton
@@ -4040,25 +5044,23 @@ export function ImageCanvasEditorView() {
             </button>
           ) : null}
 
-          {generateDialog?.mode === 'generate' ? null : (
-            <div
-              className="image-canvas-editor__bottom-toolbar"
-              role="toolbar"
-              aria-label="AI画布工具栏"
-              onPointerDown={(event) => event.stopPropagation()}
-            >
-              {canvasTools.map(({ id, label, icon: Icon }) => (
-                <EditorIconButton
-                  key={id}
-                  label={label}
-                  title={label}
-                  icon={Icon}
-                  pressed={effectiveTool === id}
-                  onClick={() => switchTool(id)}
-                />
-              ))}
-            </div>
-          )}
+          <div
+            className="image-canvas-editor__bottom-toolbar"
+            role="toolbar"
+            aria-label="AI画布工具栏"
+            onPointerDown={(event) => event.stopPropagation()}
+          >
+            {canvasTools.map(({ id, label, icon: Icon }) => (
+              <EditorIconButton
+                key={id}
+                label={label}
+                title={label}
+                icon={Icon}
+                pressed={effectiveTool === id}
+                onClick={() => switchTool(id)}
+              />
+            ))}
+          </div>
 
           {generateDialog?.mode === 'generate' && generationComposerStyle ? (
             <form
diff --git a/src/components/project/ProjectGalleryView.test.tsx b/src/components/project/ProjectGalleryView.test.tsx
index a3e8702b..35e4c0e5 100644
--- a/src/components/project/ProjectGalleryView.test.tsx
+++ b/src/components/project/ProjectGalleryView.test.tsx
@@ -2,8 +2,11 @@
 
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { ContextType } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { ApiClientError } from '../../services/apiClient';
+import { AuthUiContext } from '../auth/AuthUiContext';
 import { ProjectGalleryView } from './ProjectGalleryView';
 
 const listEditorProjectsMock = vi.hoisted(() => vi.fn());
@@ -11,6 +14,29 @@ const createEditorProjectMock = vi.hoisted(() => vi.fn());
 const renameEditorProjectMock = vi.hoisted(() => vi.fn());
 const deleteEditorProjectMock = vi.hoisted(() => vi.fn());
 
+type AuthValue = NonNullable<ContextType<typeof AuthUiContext>>;
+
+function createAuthValue(overrides: Partial<AuthValue> = {}): AuthValue {
+  return {
+    user: null,
+    canAccessProtectedData: false,
+    openLoginModal: vi.fn(),
+    requireAuth: vi.fn((action: () => void) => action()),
+    openSettingsModal: vi.fn(),
+    openAccountModal: vi.fn(),
+    setCurrentUser: vi.fn(),
+    logout: vi.fn(),
+    musicVolume: 0.5,
+    setMusicVolume: vi.fn(),
+    platformTheme: 'light' as const,
+    setPlatformTheme: vi.fn(),
+    isHydratingSettings: false,
+    isPersistingSettings: false,
+    settingsError: null,
+    ...overrides,
+  };
+}
+
 vi.mock('../../services/image-editor/editorProjectClient', () => ({
   listEditorProjects: listEditorProjectsMock,
   createEditorProject: createEditorProjectMock,
@@ -67,6 +93,115 @@ describe('ProjectGalleryView', () => {
     expect(onOpenProject).toHaveBeenCalledWith('editor-project-1');
   });
 
+  it('uses canvas-center layer composition as the project cover', async () => {
+    listEditorProjectsMock.mockResolvedValueOnce([
+      {
+        projectId: 'editor-project-cover',
+        title: '封面项目',
+        viewport: { x: 120, y: -60, scale: 0.8 },
+        layers: [
+          {
+            layerId: 'layer-cover-back',
+            resourceId: 'resource-back',
+            title: '背景图',
+            x: 200,
+            y: 160,
+            width: 300,
+            height: 180,
+            zIndex: 1,
+          },
+          {
+            layerId: 'layer-cover-front',
+            resourceId: 'resource-front',
+            title: '前景图',
+            x: 420,
+            y: 260,
+            width: 160,
+            height: 120,
+            zIndex: 2,
+          },
+        ],
+        resources: [
+          {
+            resourceId: 'resource-front',
+            projectId: 'editor-project-cover',
+            imageSrc: 'data:image/png;base64,front',
+            width: 160,
+            height: 120,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-back',
+            projectId: 'editor-project-cover',
+            imageSrc: 'data:image/png;base64,back',
+            width: 300,
+            height: 180,
+            sourceType: 'uploaded',
+          },
+        ],
+        updatedAt: '2026-06-12T08:00:00.000Z',
+      },
+    ]);
+
+    render(<ProjectGalleryView onOpenProject={vi.fn()} />);
+
+    await screen.findByText('封面项目');
+    const cover = document.querySelector('.project-gallery__canvas-cover');
+    const coverLayers = document.querySelectorAll(
+      '.project-gallery__canvas-cover-layer',
+    );
+
+    expect(cover).toBeTruthy();
+    expect(coverLayers).toHaveLength(2);
+    expect(
+      document.querySelector('.project-gallery__preview img')?.getAttribute('src'),
+    ).toBe('data:image/png;base64,back');
+    expect((coverLayers[0] as HTMLElement).style.zIndex).toBe('1');
+    expect((coverLayers[1] as HTMLElement).style.zIndex).toBe('2');
+  });
+
+  it('opens the login modal when project list loading is unauthorized', async () => {
+    const openLoginModal = vi.fn();
+    listEditorProjectsMock.mockRejectedValueOnce(
+      new ApiClientError({
+        message: '未授权访问',
+        status: 401,
+        code: 'UNAUTHORIZED',
+      }),
+    );
+
+    render(
+      <AuthUiContext.Provider value={createAuthValue({ openLoginModal })}>
+        <ProjectGalleryView onOpenProject={vi.fn()} />
+      </AuthUiContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(openLoginModal).toHaveBeenCalledTimes(1);
+    });
+    expect(openLoginModal).toHaveBeenCalledWith(expect.any(Function));
+    expect(screen.queryByRole('alert')).toBeNull();
+  });
+
+  it('requires login before opening a project card while logged out', async () => {
+    const onOpenProject = vi.fn();
+    const requireAuth = vi.fn();
+    listEditorProjectsMock.mockResolvedValueOnce(projectItems);
+    const user = userEvent.setup();
+
+    render(
+      <AuthUiContext.Provider value={createAuthValue({ requireAuth })}>
+        <ProjectGalleryView onOpenProject={onOpenProject} />
+      </AuthUiContext.Provider>,
+    );
+
+    await screen.findByText('角色设定板');
+    await user.click(screen.getByRole('button', { name: '打开项目角色设定板' }));
+
+    expect(requireAuth).toHaveBeenCalledWith(expect.any(Function));
+    expect(onOpenProject).not.toHaveBeenCalled();
+  });
+
   it('renders project loading errors through the shared status message', async () => {
     listEditorProjectsMock.mockRejectedValueOnce(new Error('读取项目失败'));
 
diff --git a/src/components/project/ProjectGalleryView.tsx b/src/components/project/ProjectGalleryView.tsx
index a52e80ed..7a9266a5 100644
--- a/src/components/project/ProjectGalleryView.tsx
+++ b/src/components/project/ProjectGalleryView.tsx
@@ -14,8 +14,13 @@ import {
   deleteEditorProject,
   listEditorProjects,
   renameEditorProject,
+  type EditorProjectLayerSnapshot,
+  type EditorProjectResourceSnapshot,
   type EditorProjectSnapshot,
 } from '../../services/image-editor/editorProjectClient';
+import { ApiClientError } from '../../services/apiClient';
+import { ResolvedAssetImage } from '../ResolvedAssetImage';
+import { useAuthUi } from '../auth/AuthUiContext';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
 import { PlatformEmptyState } from '../common/PlatformEmptyState';
@@ -29,6 +34,9 @@ import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
 
+const PROJECT_COVER_SIZE = { width: 320, height: 240 };
+const PROJECT_COVER_VIEWPORT_SIZE = { width: 900, height: 640 };
+
 type ProjectGalleryViewProps = {
   onOpenProject: (projectId: string) => void;
 };
@@ -38,16 +46,110 @@ type RenameDraft = {
   title: string;
 };
 
-function resolveProjectPreview(project: EditorProjectSnapshot) {
-  const layerResourceIds = new Set(
-    project.layers
-      .map((layer) => layer.resourceId)
-      .filter((resourceId) => resourceId.trim().length > 0),
+function isUnauthorizedError(error: unknown) {
+  return error instanceof ApiClientError && error.status === 401;
+}
+
+type ProjectCoverLayer = {
+  layerId: string;
+  title: string;
+  imageSrc: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+};
+
+function numberFromLayer(layer: EditorProjectLayerSnapshot, key: string, fallback: number) {
+  const value = layer[key];
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+
+function stringFromLayer(layer: EditorProjectLayerSnapshot, key: string) {
+  const value = layer[key];
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+function isLayerHidden(layer: EditorProjectLayerSnapshot) {
+  return layer.hidden === true;
+}
+
+function resolveProjectCoverLayers(project: EditorProjectSnapshot): ProjectCoverLayer[] {
+  const resourcesById = new Map<string, EditorProjectResourceSnapshot>(
+    project.resources.map((resource) => [resource.resourceId, resource]),
   );
+
+  return project.layers
+    .filter((layer) => !isLayerHidden(layer))
+    .map((layer) => {
+      const resource = resourcesById.get(layer.resourceId);
+      const imageSrc = stringFromLayer(layer, 'src') || resource?.imageSrc.trim() || '';
+      if (!imageSrc) {
+        return null;
+      }
+      return {
+        layerId: layer.layerId,
+        title: stringFromLayer(layer, 'title') || '画布图片',
+        imageSrc,
+        x: numberFromLayer(layer, 'x', 0),
+        y: numberFromLayer(layer, 'y', 0),
+        width: Math.max(1, numberFromLayer(layer, 'width', resource?.width ?? 320)),
+        height: Math.max(1, numberFromLayer(layer, 'height', resource?.height ?? 320)),
+        zIndex: numberFromLayer(layer, 'zIndex', 0),
+      } satisfies ProjectCoverLayer;
+    })
+    .filter((layer): layer is ProjectCoverLayer => Boolean(layer))
+    .sort((left, right) => left.zIndex - right.zIndex);
+}
+
+function ProjectCanvasCover({ project }: { project: EditorProjectSnapshot }) {
+  const coverLayers = resolveProjectCoverLayers(project);
+  if (!coverLayers.length) {
+    return <span className="project-gallery__preview-empty" />;
+  }
+
+  const safeScale =
+    project.viewport.scale > 0 && Number.isFinite(project.viewport.scale)
+      ? project.viewport.scale
+      : 1;
+  const viewportCenterX =
+    (PROJECT_COVER_VIEWPORT_SIZE.width / 2 - project.viewport.x) / safeScale;
+  const viewportCenterY =
+    (PROJECT_COVER_VIEWPORT_SIZE.height / 2 - project.viewport.y) / safeScale;
+  const worldPreviewWidth = PROJECT_COVER_VIEWPORT_SIZE.width / safeScale;
+  const worldPreviewHeight = PROJECT_COVER_VIEWPORT_SIZE.height / safeScale;
+  const previewMinX = viewportCenterX - worldPreviewWidth / 2;
+  const previewMinY = viewportCenterY - worldPreviewHeight / 2;
+  const scale = Math.min(
+    PROJECT_COVER_SIZE.width / worldPreviewWidth,
+    PROJECT_COVER_SIZE.height / worldPreviewHeight,
+  );
+  const offsetX = -previewMinX * scale;
+  const offsetY = -previewMinY * scale;
+
   return (
-    project.resources.find((resource) => layerResourceIds.has(resource.resourceId)) ??
-    project.resources[0] ??
-    null
+    <span className="project-gallery__canvas-cover" aria-hidden="true">
+      {coverLayers.map((layer) => (
+        <span
+          key={layer.layerId}
+          className="project-gallery__canvas-cover-layer"
+          style={{
+            left: offsetX + layer.x * scale,
+            top: offsetY + layer.y * scale,
+            width: layer.width * scale,
+            height: layer.height * scale,
+            zIndex: layer.zIndex,
+          }}
+        >
+          <ResolvedAssetImage
+            src={layer.imageSrc}
+            alt=""
+            className="project-gallery__canvas-cover-image"
+          />
+        </span>
+      ))}
+    </span>
   );
 }
 
@@ -65,6 +167,7 @@ function formatProjectUpdatedAt(value: string) {
 }
 
 export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
+  const authUi = useAuthUi();
   const [projects, setProjects] = useState<EditorProjectSnapshot[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -94,18 +197,26 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
         });
       })
       .catch((error: unknown) => {
+        if (isUnauthorizedError(error)) {
+          authUi?.openLoginModal(refreshProjects);
+          return;
+        }
         setErrorMessage(
           error instanceof Error ? error.message : '读取项目列表失败',
         );
       })
       .finally(() => setIsLoading(false));
-  }, []);
+  }, [authUi]);
 
   useEffect(() => {
     refreshProjects();
   }, [refreshProjects]);
 
   const createProject = useCallback(() => {
+    if (authUi && !authUi.user) {
+      authUi.openLoginModal(createProject);
+      return;
+    }
     setErrorMessage(null);
     createEditorProject()
       .then((project) => onOpenProject(project.projectId))
@@ -114,7 +225,7 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
           error instanceof Error ? error.message : '创建项目失败',
         );
       });
-  }, [onOpenProject]);
+  }, [authUi, onOpenProject]);
 
   const closeSelectionMode = useCallback(() => {
     setIsSelectionMode(false);
@@ -191,7 +302,6 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
   const projectCards = useMemo(
     () =>
       projects.map((project) => {
-        const preview = resolveProjectPreview(project);
         const selected = selectedProjectIds.has(project.projectId);
         return (
           <article
@@ -211,18 +321,22 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
                   toggleProjectSelection(project.projectId);
                   return;
                 }
+                if (authUi) {
+                  authUi.requireAuth(() => onOpenProject(project.projectId));
+                  return;
+                }
                 onOpenProject(project.projectId);
               }}
               aria-label={`打开项目${project.title}`}
             >
               <PlatformMediaFrame
-                src={preview?.imageSrc}
+                src={null}
                 alt=""
                 fallbackLabel="项目"
                 aspect="standard"
                 surface="bright"
                 className="project-gallery__preview"
-                fallbackContent={<span className="project-gallery__preview-empty" />}
+                fallbackContent={<ProjectCanvasCover project={project} />}
               >
                 {isSelectionMode ? (
                   <span className="project-gallery__checkbox">
@@ -279,6 +393,7 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
       }),
     [
       activeMenuProjectId,
+      authUi,
       deleteProjects,
       isSelectionMode,
       onOpenProject,
diff --git a/src/index.css b/src/index.css
index 548a2522..c6dde809 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3071,6 +3071,40 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border-radius: 0;
 }
 
+.project-gallery__preview .platform-media-frame {
+  border-radius: 0;
+}
+
+.project-gallery__canvas-cover {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: #f8fafc;
+}
+
+.project-gallery__canvas-cover::before {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 46%),
+    radial-gradient(circle at 50% 44%, rgba(37, 99, 235, 0.08), transparent 58%);
+  content: '';
+}
+
+.project-gallery__canvas-cover-layer {
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  border-radius: 0.18rem;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
+}
+
+.project-gallery__canvas-cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .project-gallery__preview-empty {
   width: 36%;
   aspect-ratio: 1;
@@ -3388,9 +3422,23 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   align-items: center;
   min-width: 0;
   gap: 0.35rem;
+  border: 1px solid transparent;
+  border-radius: 0.45rem;
+  padding: 0.12rem 0.18rem;
   color: #475569;
   font-size: 0.76rem;
   font-weight: 850;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+.image-canvas-editor__asset-folder--move-target
+  > .image-canvas-editor__asset-folder-header {
+  border-color: #93c5fd;
+  background: #eff6ff;
+  color: #1d4ed8;
 }
 
 .image-canvas-editor__asset-folder-header > span:first-of-type,
@@ -3446,6 +3494,31 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   gap: 0.5rem;
 }
 
+.image-canvas-editor__asset-folder-sticky-target {
+  position: sticky;
+  top: 0;
+  z-index: 8;
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.4rem;
+  border: 1px solid #93c5fd;
+  border-radius: 0.5rem;
+  background: #eff6ff;
+  box-shadow: 0 8px 18px rgb(15 23 42 / 0.1);
+  color: #1d4ed8;
+  font-size: 0.76rem;
+  font-weight: 850;
+  padding: 0.38rem 0.5rem;
+}
+
+.image-canvas-editor__asset-folder-sticky-target span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .image-canvas-editor__asset-row {
   display: grid;
   grid-template-columns: 4.4rem minmax(0, 1fr) auto;
@@ -3469,6 +3542,41 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: #eef5ff;
 }
 
+.image-canvas-editor__asset-row--uploading {
+  border-color: #bfdbfe;
+  background: #f8fbff;
+}
+
+.image-canvas-editor__asset-row--uploading:hover {
+  transform: none;
+  border-color: #93c5fd;
+  background: #f8fbff;
+}
+
+.image-canvas-editor__asset-row--upload-failed {
+  border-color: #fecaca;
+  background: #fff7f7;
+}
+
+.image-canvas-editor__asset-drag-preview {
+  position: fixed;
+  z-index: 80;
+  max-width: 11rem;
+  pointer-events: none;
+  transform: translate(0.75rem, 0.75rem);
+  border: 1px solid #93c5fd;
+  border-radius: 0.5rem;
+  background: #ffffff;
+  box-shadow: 0 12px 28px rgb(15 23 42 / 0.16);
+  color: #1d4ed8;
+  font-size: 0.76rem;
+  font-weight: 850;
+  overflow: hidden;
+  padding: 0.42rem 0.55rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .image-canvas-editor__asset-row--selected {
   border-color: #2563eb;
   background: #dbeafe;
@@ -3566,6 +3674,16 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background-size: 1rem 1rem;
 }
 
+.image-canvas-editor__asset-upload-overlay {
+  display: grid;
+  height: 100%;
+  place-items: center;
+  background: rgb(248 250 252 / 0.72);
+  color: #2563eb;
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+
 .image-canvas-editor__layer img {
   width: 100%;
   height: 100%;
@@ -3586,6 +3704,56 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   white-space: nowrap;
 }
 
+.image-canvas-editor__asset-upload-status {
+  display: grid;
+  min-width: 2.4rem;
+  justify-items: end;
+  color: #2563eb;
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.image-canvas-editor__asset-upload-status strong {
+  font-size: 0.78rem;
+}
+
+.image-canvas-editor__asset-upload-progress {
+  display: grid;
+  gap: 0.22rem;
+  color: #2563eb;
+  font-size: 0.72rem;
+  font-weight: 760;
+}
+
+.image-canvas-editor__asset-upload-progress > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.45rem;
+}
+
+.image-canvas-editor__asset-upload-progress progress {
+  overflow: hidden;
+  width: 100%;
+  height: 0.34rem;
+  border: 0;
+  border-radius: 999px;
+  background: #dbeafe;
+}
+
+.image-canvas-editor__asset-upload-progress progress::-webkit-progress-bar {
+  background: #dbeafe;
+}
+
+.image-canvas-editor__asset-upload-progress progress::-webkit-progress-value {
+  border-radius: 999px;
+  background: #2563eb;
+}
+
+.image-canvas-editor__asset-upload-progress progress::-moz-progress-bar {
+  border-radius: 999px;
+  background: #2563eb;
+}
+
 .image-canvas-editor__asset-rename-input {
   min-width: 0;
   height: 1.8rem;
@@ -3741,7 +3909,97 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   display: inline-flex;
   min-width: 0;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.45rem;
+}
+
+.image-canvas-editor__title-block {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  row-gap: 0.04rem;
+}
+
+.image-canvas-editor__project-title-row {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.image-canvas-editor__project-title-button {
+  min-width: 0;
+  max-width: min(24rem, 42vw);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: left;
+  cursor: text;
+}
+
+.image-canvas-editor__project-title-button h1 {
+  max-width: 100%;
+}
+
+.image-canvas-editor__project-rename-button {
+  width: 1.65rem;
+  height: 1.65rem;
+  flex-shrink: 0;
+  border-color: transparent;
+  background: transparent;
+  color: #64748b;
+  opacity: 0;
+  transform: none;
+}
+
+.image-canvas-editor__project-title-row:hover .image-canvas-editor__project-rename-button,
+.image-canvas-editor__project-rename-button:focus-visible {
+  opacity: 1;
+}
+
+.image-canvas-editor__project-rename-button:hover {
+  transform: none;
+}
+
+.image-canvas-editor__project-title-form {
+  display: inline-flex;
+  min-width: 0;
+  max-width: min(34rem, 58vw);
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.image-canvas-editor__project-title-input {
+  width: clamp(9rem, 28vw, 18rem);
+}
+
+.image-canvas-editor__project-title-error {
+  max-width: 10rem;
+  overflow: hidden;
+  color: #dc2626;
+  font-size: 0.72rem;
+  font-weight: 750;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__title-block h1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__topbar-actions {
+  display: inline-flex;
+  min-width: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.45rem;
+}
+
+.image-canvas-editor__topbar-actions .platform-status-message {
+  max-width: 12rem;
 }
 
 .image-canvas-editor__project-back-button {
@@ -4090,28 +4348,165 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   height: 0.9rem;
 }
 
-.image-canvas-editor__background-menu {
-  display: inline-flex;
-  gap: 0.25rem;
-  padding: 0.32rem;
+.image-canvas-editor__background-panel {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 0.65rem);
+  z-index: 35;
+  display: grid;
+  width: min(15.5rem, calc(100vw - 1.5rem));
+  box-sizing: border-box;
+  gap: 0.45rem;
+  padding: 0 0.65rem 0.65rem;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 0.9rem;
+  background: #ffffff;
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
+  color: #111827;
+  overflow: hidden;
 }
 
-.image-canvas-editor__background-menu-item {
+.image-canvas-editor__background-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 2.75rem;
+  margin: 0 -0.65rem 0;
+  padding: 0 0.65rem;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  color: #111827;
+  font-size: 0.8rem;
+  font-weight: 760;
+}
+
+.image-canvas-editor__background-close-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.9rem;
+  height: 1.9rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #111827;
+  cursor: pointer;
+}
+
+.image-canvas-editor__background-close-button:hover,
+.image-canvas-editor__background-close-button:focus-visible {
+  background: #f1f5f9;
+  outline: none;
+}
+
+.image-canvas-editor__background-color-field {
+  position: relative;
+  height: 8rem;
+  border-radius: 0.45rem;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0), #000000),
+    linear-gradient(90deg, #ffffff, #ff0000);
+  overflow: hidden;
+}
+
+.image-canvas-editor__background-color-field input[type='color'] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  opacity: 0.001;
+  cursor: crosshair;
+}
+
+.image-canvas-editor__background-color-field::after {
+  position: absolute;
+  left: 0.3rem;
+  top: 0.3rem;
+  width: 0.72rem;
+  height: 0.72rem;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
+  content: '';
+  pointer-events: none;
+}
+
+.image-canvas-editor__background-hue-track {
+  height: 0.66rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    #ff0000,
+    #ffff00,
+    #00ff00,
+    #00ffff,
+    #0000ff,
+    #ff00ff,
+    #ff0000
+  );
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
+}
+
+.image-canvas-editor__background-preset-grid {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  overflow: visible;
+}
+
+.image-canvas-editor__background-preset {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: 0.4rem;
-  justify-content: center;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 999px;
+  background: #ffffff;
   padding: 0;
+  cursor: pointer;
 }
 
-.image-canvas-editor__background-menu-item[aria-pressed='true'] {
-  border-color: #38bdf8;
-  background: #e0f2fe;
+.image-canvas-editor__background-preset[aria-pressed='true'] {
+  border-color: #0ea5e9;
+  box-shadow: 0 0 0 2px #0ea5e9;
 }
 
-.image-canvas-editor__background-swatch {
-  width: 1rem;
-  height: 1rem;
+.image-canvas-editor__background-preset span {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
+}
+
+.image-canvas-editor__background-hex-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  height: 1.75rem;
+  border-radius: 0.45rem;
+  background: #f3f4f6;
+  padding: 0 0.65rem;
+  color: #6b7280;
+  font-size: 0.78rem;
+  font-weight: 720;
+}
+
+.image-canvas-editor__background-hex-row input {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: #374151;
+  font-size: 0.8rem;
+  font-weight: 760;
+  outline: none;
+}
+
+.image-canvas-editor__background-preset:hover,
+.image-canvas-editor__background-preset:focus-visible {
+  border-color: #0ea5e9;
+  outline: none;
 }
 
 .image-canvas-editor__panel-dock button:hover,

From 94841d4360c69317538c1535a43b0817035c8251 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Tue, 16 Jun 2026 16:39:23 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=82=E4=BF=9D=E5=AD=98=E4=BD=93=E7=A7=AF=E8=BF=87?=
 =?UTF-8?q?=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

画布布局不再写入图片base64正文

加载画布时从项目资源补回图层图片地址

补充大图素材保存布局回归测试
---
 .../ImageCanvasEditorView.test.tsx            | 43 +++++++++++++++++++
 .../image-editor/ImageCanvasEditorView.tsx    | 36 +++++++++++-----
 2 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 34da2091..7c966ef2 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -1623,6 +1623,49 @@ describe('ImageCanvasEditorView', () => {
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
 
+  it('saves canvas layout without embedding image payloads in layer snapshots', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-data-heavy',
+          folderId: 'project',
+          label: '大图素材',
+          imageSrc: 'data:image/png;base64,'.concat('a'.repeat(4000)),
+          width: 1024,
+          height: 768,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    await screen.findByRole('button', { name: '添加大图素材' });
+    fireEvent.click(screen.getByRole('button', { name: '添加大图素材' }));
+
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalled();
+    });
+    const layoutCalls = saveEditorProjectLayoutMock.mock.calls;
+    const lastLayout = layoutCalls.at(-1)?.[1];
+
+    expect(lastLayout.layers).toEqual(
+      expect.arrayContaining([
+        expect.not.objectContaining({
+          src: expect.stringMatching(/^data:image/u),
+        }),
+      ]),
+    );
+  });
+
   it('adds an asset library image to the canvas with pointer dragging', async () => {
     await renderLoadedEditor();
 
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 17e8059f..fce14e00 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -539,7 +539,6 @@ function serializeLayer(layer: CanvasLayer): EditorProjectLayerSnapshot {
     layerId: layer.id,
     resourceId: layer.resourceId,
     title: layer.title,
-    src: layer.src,
     x: layer.x,
     y: layer.y,
     width: layer.width,
@@ -565,10 +564,14 @@ function serializeLayer(layer: CanvasLayer): EditorProjectLayerSnapshot {
   };
 }
 
-function hydrateLayer(snapshot: EditorProjectLayerSnapshot): CanvasLayer | null {
+function hydrateLayer(
+  snapshot: EditorProjectLayerSnapshot,
+  resourcesById: Map<string, { imageSrc: string }>,
+): CanvasLayer | null {
   const resourceId = typeof snapshot.resourceId === 'string' ? snapshot.resourceId : '';
   const layerId = typeof snapshot.layerId === 'string' ? snapshot.layerId : '';
-  const src = typeof snapshot.src === 'string' ? snapshot.src : '';
+  const snapshotSrc = typeof snapshot.src === 'string' ? snapshot.src : '';
+  const src = snapshotSrc || resourcesById.get(resourceId)?.imageSrc || '';
   const title = typeof snapshot.title === 'string' ? snapshot.title : '画布图片';
   if (!resourceId || !layerId || !src) {
     return null;
@@ -1221,8 +1224,14 @@ export function ImageCanvasEditorView() {
         setProjectTitle(nextProjectTitle);
         setProjectRenameValue(nextProjectTitle);
         setViewport(project.viewport);
+        const resourcesById = new Map(
+          project.resources.map((resource) => [
+            resource.resourceId,
+            { imageSrc: resource.imageSrc },
+          ]),
+        );
         const hydratedLayers = project.layers
-          .map(hydrateLayer)
+          .map((layer) => hydrateLayer(layer, resourcesById))
           .filter((layer): layer is CanvasLayer => Boolean(layer));
         layerCounterRef.current = hydratedLayers.length;
         setLayers(hydratedLayers);
@@ -2099,11 +2108,19 @@ export function ImageCanvasEditorView() {
                 }
               : currentLayer,
           );
-          if (options.saveLayout) {
-            void saveProjectLayoutNow(nextLayers).catch(() => {});
-          }
           return nextLayers;
         });
+        if (options.saveLayout) {
+          const latestLayers = layersRef.current.map((currentLayer) =>
+            currentLayer.id === layer.id
+              ? {
+                  ...currentLayer,
+                  resourceId: resource.resourceId,
+                }
+              : currentLayer,
+          );
+          void saveProjectLayoutNow(latestLayers).catch(() => {});
+        }
         return resource;
       })
       .catch(() => {
@@ -2228,9 +2245,7 @@ export function ImageCanvasEditorView() {
     );
     captureCanvasHistory();
     setLayers((currentLayers) => {
-      const nextLayers = [...currentLayers, nextLayer];
-      void saveProjectLayoutNow(nextLayers).catch(() => {});
-      return nextLayers;
+      return [...currentLayers, nextLayer];
     });
     selectSingleLayer(nextLayer.id);
     setHoveredLayerId(null);
@@ -2853,7 +2868,6 @@ export function ImageCanvasEditorView() {
                   }
                 : currentLayer,
             );
-            void saveProjectLayoutNow(nextLayers).catch(() => {});
             return nextLayers;
           });
         }

From d24954801360b93c7c42a698c44ee42d9f9391f6 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Tue, 16 Jun 2026 16:48:51 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=B0=8F=E5=9C=B0=E5=9B=BE=E6=8B=96=E6=8B=BD=E6=89=8B=E6=84=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

小地图拖拽改为基于按下时视图计算位移

降低小地图拖拽灵敏度并保留单击定位

补充反向拖拽不沿旧方向漂移的回归测试
---
 .../ImageCanvasEditorView.test.tsx            | 47 +++++++++++++++++++
 .../image-editor/ImageCanvasEditorView.tsx    | 47 ++++++++++++++++++-
 2 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 7c966ef2..f361a2e1 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -2192,6 +2192,53 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('button', { name: '画布小地图' })).toBeTruthy();
   });
 
+  it('keeps minimap drag direction stable after pausing and reversing', async () => {
+    await renderLoadedEditor();
+
+    const minimap = screen.getByRole('button', { name: '画布小地图' });
+    vi.spyOn(minimap, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      right: 132,
+      bottom: 84,
+      width: 132,
+      height: 84,
+      toJSON: () => ({}),
+    });
+    const world = screen
+      .getByLabelText('画布工作区')
+      .querySelector('.image-canvas-editor__world') as HTMLElement;
+    const readTranslateX = () => {
+      const match = /translate\(([-\d.]+)px,/u.exec(world.style.transform);
+      return match ? Number(match[1]) : 0;
+    };
+
+    dispatchPointerEvent(minimap, 'pointerdown', {
+      button: 0,
+      pointerId: 72,
+      clientX: 60,
+      clientY: 42,
+    });
+    dispatchPointerEvent(screen.getByLabelText('画布工作区'), 'pointermove', {
+      button: 0,
+      pointerId: 72,
+      clientX: 120,
+      clientY: 42,
+    });
+    const translateAfterRightDrag = readTranslateX();
+
+    dispatchPointerEvent(screen.getByLabelText('画布工作区'), 'pointermove', {
+      button: 0,
+      pointerId: 72,
+      clientX: 90,
+      clientY: 42,
+    });
+
+    expect(readTranslateX()).toBeGreaterThan(translateAfterRightDrag);
+  });
+
   it('persists layer groups in the canvas layer snapshot', async () => {
     await renderLoadedEditor();
 
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index fce14e00..f058e85f 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -324,6 +324,11 @@ type DragState =
   | {
       kind: 'minimap';
       pointerId: number;
+      startClientX: number;
+      startClientY: number;
+      startViewport: CanvasViewport;
+      minimapScale: number;
+      moved: boolean;
     };
 
 const EDITOR_ASSET_FOLDERS: EditorAssetFolder[] = [
@@ -347,6 +352,7 @@ const SNAP_THRESHOLD_SCREEN_PX = 18;
 const FIT_VIEW_PADDING = 10;
 const MINIMAP_SIZE = { width: 132, height: 84 };
 const MINIMAP_PADDING = 8;
+const MINIMAP_DRAG_SENSITIVITY = 0.3;
 const CONTEXT_MENU_SIZE = {
   blank: { width: 176, height: 148 },
   layer: { width: 176, height: 444 },
@@ -3519,6 +3525,28 @@ export function ImageCanvasEditorView() {
     }));
   };
 
+  const moveViewportFromMinimapDrag = (
+    dragState: Extract<DragState, { kind: 'minimap' }>,
+    clientX: number,
+    clientY: number,
+  ) => {
+    const deltaWorldX =
+      ((clientX - dragState.startClientX) / dragState.minimapScale) *
+      MINIMAP_DRAG_SENSITIVITY;
+    const deltaWorldY =
+      ((clientY - dragState.startClientY) / dragState.minimapScale) *
+      MINIMAP_DRAG_SENSITIVITY;
+    setViewport({
+      ...dragState.startViewport,
+      x:
+        dragState.startViewport.x -
+        deltaWorldX * dragState.startViewport.scale,
+      y:
+        dragState.startViewport.y -
+        deltaWorldY * dragState.startViewport.scale,
+    });
+  };
+
   const handleMinimapPointerDown = (
     event: ReactPointerEvent<HTMLButtonElement>,
   ) => {
@@ -3529,10 +3557,14 @@ export function ImageCanvasEditorView() {
     dragStateRef.current = {
       kind: 'minimap',
       pointerId: getPointerId(event),
+      startClientX: pointer.x,
+      startClientY: pointer.y,
+      startViewport: { ...viewportRef.current },
+      minimapScale: minimapModel?.scale ?? 1,
+      moved: false,
     };
     captureCanvasHistory();
     dragHistoryCapturedRef.current = true;
-    moveViewportFromMinimapPointer(pointer.x, pointer.y);
   };
 
   const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -3625,7 +3657,14 @@ export function ImageCanvasEditorView() {
         dragHistoryCapturedRef.current = true;
       }
       const pointer = getPointerClient(event);
-      moveViewportFromMinimapPointer(pointer.x, pointer.y);
+      const deltaX = pointer.x - dragState.startClientX;
+      const deltaY = pointer.y - dragState.startClientY;
+      if (!dragState.moved && Math.hypot(deltaX, deltaY) >= 2) {
+        dragState.moved = true;
+      }
+      if (dragState.moved) {
+        moveViewportFromMinimapDrag(dragState, pointer.x, pointer.y);
+      }
       return;
     }
 
@@ -3692,6 +3731,10 @@ export function ImageCanvasEditorView() {
       dragState &&
       (dragState.pointerId < 0 || pointerId < 0 || dragState.pointerId === pointerId)
     ) {
+      if (dragState.kind === 'minimap' && !dragState.moved) {
+        const pointer = getPointerClient(event);
+        moveViewportFromMinimapPointer(pointer.x, pointer.y);
+      }
       dragStateRef.current = null;
       dragHistoryCapturedRef.current = false;
       setIsPanning(false);