diff --git a/apps/admin-web/src/api/adminApiClient.ts b/apps/admin-web/src/api/adminApiClient.ts
index 5df358f76..c08b03d85 100644
--- a/apps/admin-web/src/api/adminApiClient.ts
+++ b/apps/admin-web/src/api/adminApiClient.ts
@@ -15,6 +15,7 @@ import type {
   AdminMeResponse,
   AdminOverviewResponse,
   AdminTrackingEventListQuery,
+  AdminTrackingEventKeyListResponse,
   AdminTrackingEventListResponse,
   AdminUpdateWorkVisibilityRequest,
   AdminUpdateWorkVisibilityResponse,
@@ -192,6 +193,13 @@ export function listAdminTrackingEvents(
   );
 }
 
+export function listAdminTrackingEventKeys(token: string) {
+  return request<AdminTrackingEventKeyListResponse>(
+    '/admin/api/tracking/event-keys',
+    { token },
+  );
+}
+
 export function getAdminCreationEntryConfig(token: string) {
   return request<AdminCreationEntryConfigResponse>(
     '/admin/api/creation-entry/config',
@@ -430,9 +438,14 @@ function buildQueryString(query: AdminTrackingEventListQuery) {
   appendQueryParam(params, 'userId', query.userId);
   appendQueryParam(params, 'scopeKind', query.scopeKind);
   appendQueryParam(params, 'scopeId', query.scopeId);
+  appendQueryParam(params, 'startDate', query.startDate);
+  appendQueryParam(params, 'endDate', query.endDate);
   if (typeof query.limit === 'number' && Number.isFinite(query.limit)) {
     params.set('limit', String(query.limit));
   }
+  if (query.exportAll) {
+    params.set('exportAll', 'true');
+  }
   const queryString = params.toString();
   return queryString ? `?${queryString}` : '';
 }
diff --git a/apps/admin-web/src/api/adminApiTypes.ts b/apps/admin-web/src/api/adminApiTypes.ts
index 7e4617954..6cc8bd9f2 100644
--- a/apps/admin-web/src/api/adminApiTypes.ts
+++ b/apps/admin-web/src/api/adminApiTypes.ts
@@ -206,7 +206,10 @@ export interface AdminTrackingEventListQuery {
   userId?: string;
   scopeKind?: TrackingScopeKind | '';
   scopeId?: string;
+  startDate?: string;
+  endDate?: string;
   limit?: number;
+  exportAll?: boolean;
 }
 
 /** 后台创作入口配置响应，同时包含模板入口和独立公告配置。 */
@@ -503,3 +506,13 @@ export interface AdminTrackingEventEntryPayload {
 export interface AdminTrackingEventListResponse {
   entries: AdminTrackingEventEntryPayload[];
 }
+
+export interface AdminTrackingEventKeyPayload {
+  eventKey: string;
+  eventTitle: string;
+  scopeKinds: string[];
+}
+
+export interface AdminTrackingEventKeyListResponse {
+  eventKeys: AdminTrackingEventKeyPayload[];
+}
diff --git a/apps/admin-web/src/config/trackingEventDefinitions.test.ts b/apps/admin-web/src/config/trackingEventDefinitions.test.ts
index 0c04ba473..77523d548 100644
--- a/apps/admin-web/src/config/trackingEventDefinitions.test.ts
+++ b/apps/admin-web/src/config/trackingEventDefinitions.test.ts
@@ -1,16 +1,20 @@
-import {describe, expect, test} from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import {
   adminProfileTaskTrackingEventDefinitions,
   adminTrackingEventDefinitions,
+  buildAdminTrackingEventKeyOptions,
   filterAdminProfileTaskTrackingEventDefinitions,
+  filterAdminTrackingEventKeyOptions,
   filterAdminTrackingEventDefinitions,
   findAdminTrackingEventDefinition,
 } from './trackingEventDefinitions';
 
 describe('admin tracking event definitions', () => {
   test('后台埋点筛选候选包含后端通用埋点清单', () => {
-    const keys = adminTrackingEventDefinitions.map((definition) => definition.key);
+    const keys = adminTrackingEventDefinitions.map(
+      (definition) => definition.key,
+    );
 
     expect(keys.length).toBeGreaterThan(40);
     expect(keys).toContain('daily_login');
@@ -22,21 +26,48 @@ describe('admin tracking event definitions', () => {
   });
 
   test('任务配置候选只开放适合个人任务的事件', () => {
-    expect(adminProfileTaskTrackingEventDefinitions.map(({key}) => key)).toEqual([
-      'daily_login',
-    ]);
-    expect(filterAdminProfileTaskTrackingEventDefinitions('').map(({key}) => key)).toEqual([
-      'daily_login',
+    expect(
+      adminProfileTaskTrackingEventDefinitions.map(({ key }) => key),
+    ).toEqual(['daily_login']);
+    expect(
+      filterAdminProfileTaskTrackingEventDefinitions('').map(({ key }) => key),
+    ).toEqual(['daily_login']);
+  });
+
+  test('后台埋点 key 候选从真实库响应合并静态标题', () => {
+    const options = buildAdminTrackingEventKeyOptions([
+      {
+        eventKey: 'work_play_start',
+        eventTitle: 'work_play_start',
+        scopeKinds: ['work', 'user'],
+      },
+      {
+        eventKey: 'unknown_event',
+        eventTitle: '未知事件',
+        scopeKinds: ['user'],
+      },
     ]);
+
+    expect(options.find(({ key }) => key === 'work_play_start')?.title).toBe(
+      '作品开始游玩',
+    );
+    expect(options.find(({ key }) => key === 'unknown_event')?.title).toBe(
+      '未知事件',
+    );
+    expect(
+      filterAdminTrackingEventKeyOptions(options, '作品').map(({ key }) => key),
+    ).toEqual(['work_play_start']);
   });
 
   test('后台埋点筛选支持按中文名称和 key 搜索', () => {
-    expect(filterAdminTrackingEventDefinitions('上传票据').map(({key}) => key)).toEqual([
-      'asset_upload_ticket_create',
-    ]);
-    expect(filterAdminTrackingEventDefinitions('work_play').map(({key}) => key)).toEqual([
-      'work_play_start',
-    ]);
-    expect(findAdminTrackingEventDefinition(' daily_login ')?.title).toBe('每日登录');
+    expect(
+      filterAdminTrackingEventDefinitions('上传票据').map(({ key }) => key),
+    ).toEqual(['asset_upload_ticket_create']);
+    expect(
+      filterAdminTrackingEventDefinitions('work_play').map(({ key }) => key),
+    ).toEqual(['work_play_start']);
+    expect(findAdminTrackingEventDefinition(' daily_login ')?.title).toBe(
+      '每日登录',
+    );
   });
 });
diff --git a/apps/admin-web/src/config/trackingEventDefinitions.ts b/apps/admin-web/src/config/trackingEventDefinitions.ts
index db7cf8fd2..43de6e7e5 100644
--- a/apps/admin-web/src/config/trackingEventDefinitions.ts
+++ b/apps/admin-web/src/config/trackingEventDefinitions.ts
@@ -1,4 +1,7 @@
-import type {TrackingScopeKind} from '../api/adminApiTypes';
+import type {
+  AdminTrackingEventKeyPayload,
+  TrackingScopeKind,
+} from '../api/adminApiTypes';
 
 export interface AdminTrackingEventDefinition {
   key: string;
@@ -8,6 +11,14 @@ export interface AdminTrackingEventDefinition {
   taskConfigEligible?: boolean;
 }
 
+export interface AdminTrackingEventKeyOption {
+  key: string;
+  title: string;
+  scopeKind: TrackingScopeKind | string;
+  scopeKinds: string[];
+  remark: string;
+}
+
 export const adminTrackingEventDefinitions: AdminTrackingEventDefinition[] = [
   {
     key: 'auth_login_options_view',
@@ -25,7 +36,8 @@ export const adminTrackingEventDefinitions: AdminTrackingEventDefinition[] = [
     key: 'daily_login',
     title: '每日登录',
     scopeKind: 'user',
-    remark: '认证成功或 refresh 续期后由后端幂等记录，用于每日登录任务进度校验。',
+    remark:
+      '认证成功或 refresh 续期后由后端幂等记录，用于每日登录任务进度校验。',
     taskConfigEligible: true,
   },
   {
@@ -368,7 +380,8 @@ export const adminTrackingEventDefinitions: AdminTrackingEventDefinition[] = [
     key: 'match3d_route_success',
     title: '抓大鹅路由成功',
     scopeKind: 'user',
-    remark: '抓大鹅创作或运行接口成功响应后兜底记录；GET 入口可能按 site 统计。',
+    remark:
+      '抓大鹅创作或运行接口成功响应后兜底记录；GET 入口可能按 site 统计。',
   },
   {
     key: 'square_hole_route_success',
@@ -392,12 +405,15 @@ export const adminTrackingEventDefinitions: AdminTrackingEventDefinition[] = [
     key: 'work_play_start',
     title: '作品开始游玩',
     scopeKind: 'work',
-    remark: '拼图、抓大鹅、方洞、自定义世界、大鱼吃小鱼、Visual Novel 正式开始游玩时记录。',
+    remark:
+      '拼图、抓大鹅、方洞、自定义世界、大鱼吃小鱼、Visual Novel 正式开始游玩时记录。',
   },
 ];
 
 export const adminProfileTaskTrackingEventDefinitions =
-  adminTrackingEventDefinitions.filter((definition) => definition.taskConfigEligible);
+  adminTrackingEventDefinitions.filter(
+    (definition) => definition.taskConfigEligible,
+  );
 
 export function findAdminTrackingEventDefinition(eventKey: string) {
   const normalizedEventKey = eventKey.trim();
@@ -412,6 +428,41 @@ export function filterAdminTrackingEventDefinitions(query: string) {
   return filterTrackingEventDefinitions(adminTrackingEventDefinitions, query);
 }
 
+export function buildAdminTrackingEventKeyOptions(
+  eventKeys: AdminTrackingEventKeyPayload[],
+): AdminTrackingEventKeyOption[] {
+  const options = new Map<string, AdminTrackingEventKeyOption>();
+  for (const payload of eventKeys) {
+    const key = payload.eventKey.trim();
+    if (!key || options.has(key)) {
+      continue;
+    }
+    const definition = findAdminTrackingEventDefinition(key);
+    const scopeKinds = payload.scopeKinds.length
+      ? payload.scopeKinds
+      : definition
+        ? [definition.scopeKind]
+        : [];
+    options.set(key, {
+      key,
+      title: definition?.title ?? (payload.eventTitle || key),
+      scopeKind: definition?.scopeKind ?? scopeKinds[0] ?? '',
+      scopeKinds,
+      remark: definition?.remark ?? '真实埋点库中已出现的 event key。',
+    });
+  }
+  return [...options.values()].sort((left, right) =>
+    left.key.localeCompare(right.key),
+  );
+}
+
+export function filterAdminTrackingEventKeyOptions(
+  options: AdminTrackingEventKeyOption[],
+  query: string,
+) {
+  return filterTrackingEventDefinitions(options, query);
+}
+
 export function filterAdminProfileTaskTrackingEventDefinitions(query: string) {
   return filterTrackingEventDefinitions(
     adminProfileTaskTrackingEventDefinitions,
@@ -420,7 +471,9 @@ export function filterAdminProfileTaskTrackingEventDefinitions(query: string) {
 }
 
 function filterTrackingEventDefinitions(
-  definitions: AdminTrackingEventDefinition[],
+  definitions: Array<
+    AdminTrackingEventDefinition | AdminTrackingEventKeyOption
+  >,
   query: string,
 ) {
   const normalizedQuery = query.trim().toLowerCase();
diff --git a/apps/admin-web/src/pages/AdminDashboardPage.test.tsx b/apps/admin-web/src/pages/AdminDashboardPage.test.tsx
index 46c47f20e..2c5164ecf 100644
--- a/apps/admin-web/src/pages/AdminDashboardPage.test.tsx
+++ b/apps/admin-web/src/pages/AdminDashboardPage.test.tsx
@@ -2,7 +2,7 @@
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { beforeEach, expect, test, vi } from 'vitest';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 
 import { getAdminDashboard } from '../api/adminApiClient';
 import type { AdminDashboardResponse } from '../api/adminApiTypes';
@@ -64,18 +64,27 @@ const dashboardResponse: AdminDashboardResponse = {
 
 beforeEach(() => {
   vi.clearAllMocks();
+  vi.useFakeTimers({ shouldAdvanceTime: true });
+  vi.setSystemTime(new Date('2026-06-27T08:00:00+08:00'));
   vi.mocked(getAdminDashboard).mockResolvedValue(dashboardResponse);
 });
 
+afterEach(() => {
+  vi.useRealTimers();
+});
+
 test('Dashboard 默认加载今日指标并支持运营汇总页签', async () => {
-  const user = userEvent.setup();
+  const user = setupUser();
   render(<AdminDashboardPage token="admin-token" onUnauthorized={vi.fn()} />);
 
-  expect(await screen.findByText('本日总生产素材数')).toBeTruthy();
+  expect(await screen.findByText('总计数据')).toBeTruthy();
+  expect(screen.getByText('时段数据')).toBeTruthy();
+  expect(screen.getByText('本日生产素材数')).toBeTruthy();
   expect(screen.getByText('总注册用户')).toBeTruthy();
   expect(screen.getByText('本日新增用户数')).toBeTruthy();
   expect(screen.getByText('当前使用人数（五分钟统计一次）')).toBeTruthy();
   expect(screen.getByText('生产素材')).toBeTruthy();
+  expect(screen.queryByRole('button', { name: '本时段' })).toBeNull();
 
   await user.click(screen.getByRole('button', { name: '运营汇总' }));
 
@@ -84,11 +93,26 @@ test('Dashboard 默认加载今日指标并支持运营汇总页签', async () =
   expect(screen.getByText('访问模块分布')).toBeTruthy();
 });
 
-test('Dashboard 选择本周时按当前终止日期填充整周范围', async () => {
-  const user = userEvent.setup();
+test('Dashboard 默认日期使用北京时间', async () => {
+  vi.setSystemTime(new Date('2026-06-26T17:30:00Z'));
+
   render(<AdminDashboardPage token="admin-token" onUnauthorized={vi.fn()} />);
 
-  await screen.findByText('本日总生产素材数');
+  await waitFor(() => {
+    expect(getAdminDashboard).toHaveBeenLastCalledWith('admin-token', {
+      granularity: 'period',
+      anchor: undefined,
+      startDate: '2026-06-27',
+      endDate: '2026-06-27',
+    });
+  });
+});
+
+test('Dashboard 选择本周时按今天填充整周范围', async () => {
+  const user = setupUser();
+  render(<AdminDashboardPage token="admin-token" onUnauthorized={vi.fn()} />);
+
+  await screen.findByText('本日生产素材数');
   fireEvent.change(screen.getByLabelText('终止日期'), {
     target: { value: '2026-07-02' },
   });
@@ -96,19 +120,19 @@ test('Dashboard 选择本周时按当前终止日期填充整周范围', async (
 
   await waitFor(() => {
     expect(getAdminDashboard).toHaveBeenLastCalledWith('admin-token', {
-      granularity: 'week',
-      anchor: '2026-07-05',
-      startDate: '2026-06-29',
-      endDate: '2026-07-05',
+      granularity: 'period',
+      anchor: undefined,
+      startDate: '2026-06-22',
+      endDate: '2026-06-28',
     });
   });
 });
 
-test('Dashboard 选择本月时按当前终止日期填充整月范围', async () => {
-  const user = userEvent.setup();
+test('Dashboard 选择本月时按今天填充整月范围', async () => {
+  const user = setupUser();
   render(<AdminDashboardPage token="admin-token" onUnauthorized={vi.fn()} />);
 
-  await screen.findByText('本日总生产素材数');
+  await screen.findByText('本日生产素材数');
   fireEvent.change(screen.getByLabelText('终止日期'), {
     target: { value: '2026-07-12' },
   });
@@ -116,10 +140,28 @@ test('Dashboard 选择本月时按当前终止日期填充整月范围', async (
 
   await waitFor(() => {
     expect(getAdminDashboard).toHaveBeenLastCalledWith('admin-token', {
-      granularity: 'month',
-      anchor: '2026-07-31',
-      startDate: '2026-07-01',
-      endDate: '2026-07-31',
+      granularity: 'period',
+      anchor: undefined,
+      startDate: '2026-06-01',
+      endDate: '2026-06-30',
+    });
+  });
+});
+
+test('Dashboard 从本月切回本日时回到今天', async () => {
+  const user = setupUser();
+  render(<AdminDashboardPage token="admin-token" onUnauthorized={vi.fn()} />);
+
+  await screen.findByText('本日生产素材数');
+  await user.click(screen.getByRole('button', { name: '本月' }));
+  await user.click(screen.getByRole('button', { name: '本日' }));
+
+  await waitFor(() => {
+    expect(getAdminDashboard).toHaveBeenLastCalledWith('admin-token', {
+      granularity: 'period',
+      anchor: undefined,
+      startDate: '2026-06-27',
+      endDate: '2026-06-27',
     });
   });
 });
@@ -127,7 +169,7 @@ test('Dashboard 选择本月时按当前终止日期填充整月范围', async (
 test('Dashboard 手动选择起止日期时使用本时段查询', async () => {
   render(<AdminDashboardPage token="admin-token" onUnauthorized={vi.fn()} />);
 
-  await screen.findByText('本日总生产素材数');
+  await screen.findByText('本日生产素材数');
   fireEvent.change(screen.getByLabelText('起始日期'), {
     target: { value: '2026-06-01' },
   });
@@ -145,3 +187,7 @@ test('Dashboard 手动选择起止日期时使用本时段查询', async () => {
   });
   expect(screen.getByText('本时段新增用户数')).toBeTruthy();
 });
+
+function setupUser() {
+  return userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+}
diff --git a/apps/admin-web/src/pages/AdminDashboardPage.tsx b/apps/admin-web/src/pages/AdminDashboardPage.tsx
index e3277a236..d4f393504 100644
--- a/apps/admin-web/src/pages/AdminDashboardPage.tsx
+++ b/apps/admin-web/src/pages/AdminDashboardPage.tsx
@@ -18,13 +18,12 @@ interface AdminDashboardPageProps {
 type AdminDashboardTab = 'metrics' | 'operations';
 
 const granularityOptions: Array<{
-  id: AdminDashboardGranularity;
+  id: Exclude<AdminDashboardGranularity, 'period'>;
   label: string;
 }> = [
   { id: 'day', label: '本日' },
   { id: 'week', label: '本周' },
   { id: 'month', label: '本月' },
-  { id: 'period', label: '本时段' },
 ];
 
 export function AdminDashboardPage({
@@ -37,22 +36,22 @@ export function AdminDashboardPage({
   const [granularity, setGranularity] =
     useState<AdminDashboardGranularity>('day');
   const [dateRange, setDateRange] = useState(() => {
-    const today = formatDateInput(new Date());
+    const today = formatBeijingDateInput(new Date());
     return { startDate: today, endDate: today };
   });
   const [activeTab, setActiveTab] = useState<AdminDashboardTab>('metrics');
   const [errorMessage, setErrorMessage] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
-  const loadDashboard = useCallback(async () => {
+  const loadDashboard = useCallback(async (range = dateRange) => {
     setIsLoading(true);
     setErrorMessage('');
     try {
       const response = await getAdminDashboard(token, {
-        granularity,
-        anchor: granularity === 'period' ? undefined : dateRange.endDate,
-        startDate: dateRange.startDate,
-        endDate: dateRange.endDate,
+        granularity: 'period',
+        anchor: undefined,
+        startDate: range.startDate,
+        endDate: range.endDate,
       });
       setDashboard(response);
     } catch (error: unknown) {
@@ -60,13 +59,7 @@ export function AdminDashboardPage({
     } finally {
       setIsLoading(false);
     }
-  }, [
-    dateRange.endDate,
-    dateRange.startDate,
-    granularity,
-    onUnauthorized,
-    token,
-  ]);
+  }, [dateRange, onUnauthorized, token]);
 
   useEffect(() => {
     void loadDashboard();
@@ -83,26 +76,49 @@ export function AdminDashboardPage({
   }, [loadDashboard]);
 
   const metrics = dashboard?.metrics;
-  const metricCards = useMemo(
+  const totalMetricCards = useMemo(
     () => [
-      {
-        id: 'generated-assets',
-        label: `${rangePrefix(granularity)}总生产素材数`,
-        value: metrics?.generatedAssets ?? 0,
-        unit: '个',
-      },
-      {
-        id: 'consumed-mud-points',
-        label: `${rangePrefix(granularity)}总消耗泥点数`,
-        value: metrics?.consumedMudPoints ?? 0,
-        unit: '泥点',
-      },
       {
         id: 'total-registered-users',
         label: '总注册用户',
         value: metrics?.totalRegisteredUsers ?? 0,
         unit: '人',
       },
+      {
+        id: 'total-visit-users',
+        label: '总访问人数',
+        value: metrics?.totalVisitUsers ?? 0,
+        unit: '人',
+      },
+      {
+        id: 'total-visit-count',
+        label: '总访问次数',
+        value: metrics?.totalVisitCount ?? 0,
+        unit: '次',
+      },
+      {
+        id: 'current-users',
+        label: '当前使用人数（五分钟统计一次）',
+        value: metrics?.currentUsers ?? 0,
+        unit: '人',
+      },
+    ],
+    [metrics],
+  );
+  const periodMetricCards = useMemo(
+    () => [
+      {
+        id: 'generated-assets',
+        label: `${rangePrefix(granularity)}生产素材数`,
+        value: metrics?.generatedAssets ?? 0,
+        unit: '个',
+      },
+      {
+        id: 'consumed-mud-points',
+        label: `${rangePrefix(granularity)}消耗泥点数`,
+        value: metrics?.consumedMudPoints ?? 0,
+        unit: '泥点',
+      },
       {
         id: 'new-registered-users',
         label: `${rangePrefix(granularity)}新增用户数`,
@@ -115,30 +131,12 @@ export function AdminDashboardPage({
         value: metrics?.visitUsers ?? 0,
         unit: '人',
       },
-      {
-        id: 'total-visit-users',
-        label: '总访问人数',
-        value: metrics?.totalVisitUsers ?? 0,
-        unit: '人',
-      },
       {
         id: 'visit-count',
         label: `${rangePrefix(granularity)}访问次数`,
         value: metrics?.visitCount ?? 0,
         unit: '次',
       },
-      {
-        id: 'total-visit-count',
-        label: '总访问次数',
-        value: metrics?.totalVisitCount ?? 0,
-        unit: '次',
-      },
-      {
-        id: 'current-users',
-        label: '当前使用人数（五分钟统计一次）',
-        value: metrics?.currentUsers ?? 0,
-        unit: '人',
-      },
     ],
     [granularity, metrics],
   );
@@ -244,16 +242,41 @@ export function AdminDashboardPage({
 
       {activeTab === 'metrics' ? (
         <>
-          <div className="admin-dashboard-metric-grid">
-            {metricCards.map((metric) => (
-              <MetricCard
-                key={metric.id}
-                label={metric.label}
-                value={metric.value}
-                unit={metric.unit}
-              />
-            ))}
-          </div>
+          <section className="admin-panel">
+            <div className="admin-panel-heading">
+              <h3>总计数据</h3>
+              <span>全站累计</span>
+            </div>
+            <div className="admin-dashboard-metric-grid">
+              {totalMetricCards.map((metric) => (
+                <MetricCard
+                  key={metric.id}
+                  label={metric.label}
+                  value={metric.value}
+                  unit={metric.unit}
+                  compact
+                />
+              ))}
+            </div>
+          </section>
+
+          <section className="admin-panel">
+            <div className="admin-panel-heading">
+              <h3>时段数据</h3>
+              <span>{dashboard?.range.periodLabel ?? '-'}</span>
+            </div>
+            <div className="admin-dashboard-metric-grid">
+              {periodMetricCards.map((metric) => (
+                <MetricCard
+                  key={metric.id}
+                  label={metric.label}
+                  value={metric.value}
+                  unit={metric.unit}
+                  compact
+                />
+              ))}
+            </div>
+          </section>
 
           <div className="admin-dashboard-chart-grid">
             {(dashboard?.charts ?? []).map((chart) => (
@@ -299,13 +322,22 @@ export function AdminDashboardPage({
     </section>
   );
 
-  function handleGranularityChange(nextGranularity: AdminDashboardGranularity) {
-    setGranularity(nextGranularity);
-    setDateRange((current) =>
-      nextGranularity === 'period'
-        ? normalizeDateRange(current)
-        : buildPresetDateRange(nextGranularity, current.endDate),
+  function handleGranularityChange(
+    nextGranularity: Exclude<AdminDashboardGranularity, 'period'>,
+  ) {
+    const nextRange = buildPresetDateRange(
+      nextGranularity,
+      formatBeijingDateInput(new Date()),
     );
+    const rangeChanged =
+      nextRange.startDate !== dateRange.startDate ||
+      nextRange.endDate !== dateRange.endDate;
+    setGranularity(nextGranularity);
+    if (rangeChanged) {
+      setDateRange(nextRange);
+    } else {
+      void loadDashboard(nextRange);
+    }
   }
 
   function handleDateRangeChange(
@@ -418,11 +450,13 @@ function formatNumber(value: number) {
   return new Intl.NumberFormat('zh-CN').format(value);
 }
 
-function formatDateInput(date: Date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
+function formatBeijingDateInput(date: Date) {
+  return new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Shanghai',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(date);
 }
 
 function rangePrefix(granularity: AdminDashboardGranularity) {
@@ -442,7 +476,7 @@ function buildPresetDateRange(
   granularity: AdminDashboardGranularity,
   selectedDate: string,
 ) {
-  const fallbackDate = formatDateInput(new Date());
+  const fallbackDate = formatBeijingDateInput(new Date());
   const anchor = parseDateValueAsUtc(selectedDate)
     ? selectedDate
     : fallbackDate;
diff --git a/apps/admin-web/src/pages/AdminTaskConfigPage.tsx b/apps/admin-web/src/pages/AdminTaskConfigPage.tsx
index cb146085a..1c34d6a6c 100644
--- a/apps/admin-web/src/pages/AdminTaskConfigPage.tsx
+++ b/apps/admin-web/src/pages/AdminTaskConfigPage.tsx
@@ -1,22 +1,25 @@
-import {ChevronDown, PowerOff, RefreshCcw, Save} from 'lucide-react';
-import {FormEvent, useEffect, useMemo, useState} from 'react';
+import { ChevronDown, PowerOff, RefreshCcw, Save } from 'lucide-react';
+import { FormEvent, useEffect, useMemo, useState } from 'react';
 
 import {
   disableProfileTaskConfig,
+  listAdminTrackingEventKeys,
   listProfileTaskConfigs,
   upsertProfileTaskConfig,
 } from '../api/adminApiClient';
 import type {
+  AdminTrackingEventKeyPayload,
   ProfileTaskConfigAdminResponse,
   ProfileTaskCycle,
   TrackingScopeKind,
 } from '../api/adminApiTypes';
-import {useAdminWriteConfirm} from '../components/useAdminWriteConfirm';
+import { useAdminWriteConfirm } from '../components/useAdminWriteConfirm';
 import {
-  filterAdminProfileTaskTrackingEventDefinitions,
+  buildAdminTrackingEventKeyOptions,
+  filterAdminTrackingEventKeyOptions,
   findAdminTrackingEventDefinition,
 } from '../config/trackingEventDefinitions';
-import {handlePageError} from './pageUtils';
+import { handlePageError } from './pageUtils';
 
 interface AdminTaskConfigPageProps {
   token: string;
@@ -25,8 +28,8 @@ interface AdminTaskConfigPageProps {
   onResultChange: (result: ProfileTaskConfigAdminResponse) => void;
 }
 
-const taskCycles: Array<{value: ProfileTaskCycle; label: string}> = [
-  {value: 'daily', label: '每日'},
+const taskCycles: Array<{ value: ProfileTaskCycle; label: string }> = [
+  { value: 'daily', label: '每日' },
 ];
 
 const profileTaskScopeKind = 'user' satisfies TrackingScopeKind;
@@ -43,6 +46,9 @@ export function AdminTaskConfigPage({
   const [description, setDescription] = useState('');
   const [eventKey, setEventKey] = useState('daily_login');
   const [eventKeySearch, setEventKeySearch] = useState('每日登录');
+  const [eventKeys, setEventKeys] = useState<AdminTrackingEventKeyPayload[]>(
+    [],
+  );
   const [isEventKeyPickerOpen, setIsEventKeyPickerOpen] = useState(false);
   const [cycle, setCycle] = useState<ProfileTaskCycle>('daily');
   const [threshold, setThreshold] = useState('1');
@@ -56,22 +62,53 @@ export function AdminTaskConfigPage({
   const [isSaving, setIsSaving] = useState(false);
   const [isDisabling, setIsDisabling] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const {confirmWrite, confirmDialog} = useAdminWriteConfirm();
+  const { confirmWrite, confirmDialog } = useAdminWriteConfirm();
 
   useEffect(() => {
     void refreshTaskConfigs();
+    void refreshTrackingEventKeys();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
-  const selectedEventDefinition = useMemo(
-    () => findAdminTrackingEventDefinition(eventKey),
-    [eventKey],
+  const eventKeyOptions = useMemo(
+    () =>
+      buildAdminTrackingEventKeyOptions(eventKeys).filter((option) =>
+        option.scopeKinds.includes(profileTaskScopeKind),
+      ),
+    [eventKeys],
+  );
+  const selectedEventOption = useMemo(
+    () =>
+      eventKeyOptions.find((option) => option.key === eventKey) ??
+      findAdminTrackingEventDefinition(eventKey),
+    [eventKey, eventKeyOptions],
   );
   const filteredEventDefinitions = useMemo(
-    () => filterAdminProfileTaskTrackingEventDefinitions(eventKeySearch),
-    [eventKeySearch],
+    () => filterAdminTrackingEventKeyOptions(eventKeyOptions, eventKeySearch),
+    [eventKeyOptions, eventKeySearch],
   );
 
+  useEffect(() => {
+    if (eventKeySearch !== eventKey) {
+      return;
+    }
+    const nextOption =
+      eventKeyOptions.find((option) => option.key === eventKey) ??
+      findAdminTrackingEventDefinition(eventKey);
+    if (nextOption) {
+      setEventKeySearch(nextOption.title);
+    }
+  }, [eventKey, eventKeyOptions, eventKeySearch]);
+
+  async function refreshTrackingEventKeys() {
+    try {
+      const response = await listAdminTrackingEventKeys(token);
+      setEventKeys(response.eventKeys);
+    } catch {
+      setEventKeys([]);
+    }
+  }
+
   async function refreshTaskConfigs() {
     setIsLoading(true);
     setListErrorMessage('');
@@ -182,16 +219,20 @@ export function AdminTaskConfigPage({
     setSortOrder(String(entry.sortOrder));
     setEnabled(entry.enabled);
     setDisableTaskId(entry.taskId);
-    const nextDefinition = findAdminTrackingEventDefinition(entry.eventKey);
-    setEventKeySearch(nextDefinition?.title ?? entry.eventKey);
+    const nextOption =
+      eventKeyOptions.find((option) => option.key === entry.eventKey) ??
+      findAdminTrackingEventDefinition(entry.eventKey);
+    setEventKeySearch(nextOption?.title ?? entry.eventKey);
     setIsEventKeyPickerOpen(false);
   }
 
   function selectEventKey(nextEventKey: string) {
-    const nextDefinition = findAdminTrackingEventDefinition(nextEventKey);
+    const nextOption =
+      eventKeyOptions.find((option) => option.key === nextEventKey) ??
+      findAdminTrackingEventDefinition(nextEventKey);
     setEventKey(nextEventKey);
-    if (nextDefinition) {
-      setEventKeySearch(nextDefinition.title);
+    if (nextOption) {
+      setEventKeySearch(nextOption.title);
     } else {
       setEventKeySearch(nextEventKey);
     }
@@ -322,9 +363,9 @@ export function AdminTaskConfigPage({
                   </div>
                 ) : null}
               </div>
-              {selectedEventDefinition ? (
+              {selectedEventOption ? (
                 <small className="admin-field-note">
-                  {selectedEventDefinition.remark}
+                  {selectedEventOption.remark}
                 </small>
               ) : (
                 <small className="admin-field-note">
diff --git a/apps/admin-web/src/pages/AdminTrackingEventsPage.tsx b/apps/admin-web/src/pages/AdminTrackingEventsPage.tsx
index a0b79c5fc..3c9f5d2e7 100644
--- a/apps/admin-web/src/pages/AdminTrackingEventsPage.tsx
+++ b/apps/admin-web/src/pages/AdminTrackingEventsPage.tsx
@@ -1,46 +1,55 @@
-import {Download, Eye, RefreshCcw, Search, X} from 'lucide-react';
-import {FormEvent, useEffect, useMemo, useState} from 'react';
+import { Download, Eye, RefreshCcw, Search, X } from 'lucide-react';
+import { FormEvent, useEffect, useMemo, useState } from 'react';
 
-import {listAdminTrackingEvents} from '../api/adminApiClient';
+import {
+  listAdminTrackingEventKeys,
+  listAdminTrackingEvents,
+} from '../api/adminApiClient';
 import type {
   AdminTrackingEventEntryPayload,
+  AdminTrackingEventKeyPayload,
   TrackingScopeKind,
 } from '../api/adminApiTypes';
 import {
+  buildAdminTrackingEventKeyOptions,
+  filterAdminTrackingEventKeyOptions,
   filterAdminTrackingEventDefinitions,
   findAdminTrackingEventDefinition,
 } from '../config/trackingEventDefinitions';
-import {handlePageError} from './pageUtils';
+import { handlePageError } from './pageUtils';
 
 interface AdminTrackingEventsPageProps {
   token: string;
   onUnauthorized: (message?: string) => void;
 }
 
-const scopeKindOptions: Array<{value: TrackingScopeKind | ''; label: string}> = [
-  {value: '', label: '全部'},
-  {value: 'site', label: 'site'},
-  {value: 'work', label: 'work'},
-  {value: 'module', label: 'module'},
-  {value: 'user', label: 'user'},
+const scopeKindOptions: Array<{
+  value: TrackingScopeKind | '';
+  label: string;
+}> = [
+  { value: '', label: '全部' },
+  { value: 'site', label: 'site' },
+  { value: 'work', label: 'work' },
+  { value: 'module', label: 'module' },
+  { value: 'user', label: 'user' },
 ];
 
 const exportColumns: Array<{
   key: keyof AdminTrackingEventEntryPayload;
   label: string;
 }> = [
-  {key: 'eventId', label: '事件 ID'},
-  {key: 'eventKey', label: 'Event Key'},
-  {key: 'eventTitle', label: '事件名称'},
-  {key: 'scopeKind', label: 'Scope Kind'},
-  {key: 'scopeId', label: 'Scope ID'},
-  {key: 'dayKey', label: 'Day Key'},
-  {key: 'userId', label: 'User ID'},
-  {key: 'ownerUserId', label: 'Owner User ID'},
-  {key: 'profileId', label: 'Profile ID'},
-  {key: 'moduleKey', label: 'Module Key'},
-  {key: 'metadataJson', label: 'Metadata JSON'},
-  {key: 'occurredAt', label: '发生时间'},
+  { key: 'eventId', label: '事件 ID' },
+  { key: 'eventKey', label: 'Event Key' },
+  { key: 'eventTitle', label: '事件名称' },
+  { key: 'scopeKind', label: 'Scope Kind' },
+  { key: 'scopeId', label: 'Scope ID' },
+  { key: 'dayKey', label: 'Day Key' },
+  { key: 'userId', label: 'User ID' },
+  { key: 'ownerUserId', label: 'Owner User ID' },
+  { key: 'profileId', label: 'Profile ID' },
+  { key: 'moduleKey', label: 'Module Key' },
+  { key: 'metadataJson', label: 'Metadata JSON' },
+  { key: 'occurredAt', label: '发生时间' },
 ];
 
 export function AdminTrackingEventsPage({
@@ -52,21 +61,47 @@ export function AdminTrackingEventsPage({
   const [userId, setUserId] = useState('');
   const [scopeKind, setScopeKind] = useState<TrackingScopeKind | ''>('');
   const [scopeId, setScopeId] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
   const [limit, setLimit] = useState('200');
+  const [eventKeys, setEventKeys] = useState<AdminTrackingEventKeyPayload[]>(
+    [],
+  );
   const [errorMessage, setErrorMessage] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [isExportingAll, setIsExportingAll] = useState(false);
   const [detailEntry, setDetailEntry] =
     useState<AdminTrackingEventEntryPayload | null>(null);
 
   useEffect(() => {
+    void refreshTrackingEventKeys();
     void refreshTrackingEvents();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
-  const filteredEventDefinitions = useMemo(
-    () => filterAdminTrackingEventDefinitions(eventKey),
-    [eventKey],
+  const eventKeyOptions = useMemo(
+    () => buildAdminTrackingEventKeyOptions(eventKeys),
+    [eventKeys],
   );
+  const filteredEventDefinitions = useMemo(() => {
+    const dynamicOptions = filterAdminTrackingEventKeyOptions(
+      eventKeyOptions,
+      eventKey,
+    );
+    if (dynamicOptions.length) {
+      return dynamicOptions;
+    }
+    return filterAdminTrackingEventDefinitions(eventKey);
+  }, [eventKey, eventKeyOptions]);
+
+  async function refreshTrackingEventKeys() {
+    try {
+      const response = await listAdminTrackingEventKeys(token);
+      setEventKeys(response.eventKeys);
+    } catch {
+      setEventKeys([]);
+    }
+  }
 
   async function refreshTrackingEvents() {
     setIsLoading(true);
@@ -77,6 +112,8 @@ export function AdminTrackingEventsPage({
         userId,
         scopeKind,
         scopeId,
+        startDate,
+        endDate,
         limit: parseLimit(limit),
       });
       setEntries(response.entries);
@@ -100,6 +137,32 @@ export function AdminTrackingEventsPage({
     exportTrackingEventsAsExcel(entries);
   }
 
+  async function handleExportAll() {
+    setIsExportingAll(true);
+    setErrorMessage('');
+    try {
+      const response = await listAdminTrackingEvents(token, {
+        eventKey,
+        userId,
+        scopeKind,
+        scopeId,
+        startDate,
+        endDate,
+        limit: 100_000,
+        exportAll: true,
+      });
+      if (!response.entries.length) {
+        setErrorMessage('当前没有可导出的埋点数据');
+        return;
+      }
+      exportTrackingEventsAsExcel(response.entries);
+    } catch (error: unknown) {
+      handlePageError(error, onUnauthorized, setErrorMessage);
+    } finally {
+      setIsExportingAll(false);
+    }
+  }
+
   return (
     <section className="admin-page admin-page-wide">
       <div className="admin-page-heading">
@@ -110,7 +173,7 @@ export function AdminTrackingEventsPage({
         <div className="admin-action-row">
           <button
             className="admin-secondary-button"
-            disabled={isLoading}
+            disabled={isLoading || isExportingAll}
             type="button"
             onClick={refreshTrackingEvents}
           >
@@ -126,6 +189,15 @@ export function AdminTrackingEventsPage({
             <Download size={17} aria-hidden="true" />
             <span>导出 Excel</span>
           </button>
+          <button
+            className="admin-secondary-button"
+            disabled={isExportingAll}
+            type="button"
+            onClick={handleExportAll}
+          >
+            <Download size={17} aria-hidden="true" />
+            <span>{isExportingAll ? '导出中' : '导出全部'}</span>
+          </button>
         </div>
       </div>
 
@@ -186,7 +258,27 @@ export function AdminTrackingEventsPage({
               onChange={(event) => setLimit(event.target.value)}
             />
           </label>
-          <button className="admin-secondary-button" disabled={isLoading} type="submit">
+          <label className="admin-field">
+            <span>开始日期</span>
+            <input
+              type="date"
+              value={startDate}
+              onChange={(event) => setStartDate(event.target.value)}
+            />
+          </label>
+          <label className="admin-field">
+            <span>结束日期</span>
+            <input
+              type="date"
+              value={endDate}
+              onChange={(event) => setEndDate(event.target.value)}
+            />
+          </label>
+          <button
+            className="admin-secondary-button"
+            disabled={isLoading}
+            type="submit"
+          >
             <Search size={17} aria-hidden="true" />
             <span>{isLoading ? '查询中' : '查询'}</span>
           </button>
@@ -353,9 +445,13 @@ function formatMetadataJson(value: string) {
   }
 }
 
-function exportTrackingEventsAsExcel(entries: AdminTrackingEventEntryPayload[]) {
+function exportTrackingEventsAsExcel(
+  entries: AdminTrackingEventEntryPayload[],
+) {
   const tableRows = [
-    exportColumns.map((column) => `<th>${escapeHtml(column.label)}</th>`).join(''),
+    exportColumns
+      .map((column) => `<th>${escapeHtml(column.label)}</th>`)
+      .join(''),
     ...entries.map((entry) =>
       exportColumns
         .map(
@@ -368,7 +464,9 @@ function exportTrackingEventsAsExcel(entries: AdminTrackingEventEntryPayload[])
   const html = `\uFEFF<html><head><meta charset="UTF-8" /></head><body><table>${tableRows
     .map((row) => `<tr>${row}</tr>`)
     .join('')}</table></body></html>`;
-  const blob = new Blob([html], {type: 'application/vnd.ms-excel;charset=utf-8'});
+  const blob = new Blob([html], {
+    type: 'application/vnd.ms-excel;charset=utf-8',
+  });
   const url = URL.createObjectURL(blob);
   const link = document.createElement('a');
   link.href = url;
@@ -379,7 +477,10 @@ function exportTrackingEventsAsExcel(entries: AdminTrackingEventEntryPayload[])
   URL.revokeObjectURL(url);
 }
 
-function formatExportCell(value: unknown, key?: keyof AdminTrackingEventEntryPayload) {
+function formatExportCell(
+  value: unknown,
+  key?: keyof AdminTrackingEventEntryPayload,
+) {
   if (value === null || typeof value === 'undefined') {
     return '';
   }
diff --git a/apps/admin-web/src/styles/admin.css b/apps/admin-web/src/styles/admin.css
index d826c2eff..b71b17acc 100644
--- a/apps/admin-web/src/styles/admin.css
+++ b/apps/admin-web/src/styles/admin.css
@@ -299,6 +299,10 @@ button:disabled {
   width: 170px;
 }
 
+.admin-dashboard-actions .admin-secondary-button {
+  min-width: 86px;
+}
+
 .admin-dashboard-tabs {
   display: inline-grid;
   width: fit-content;
diff --git a/docs/README.md b/docs/README.md
index 9f4736622..0ceca3f52 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -30,10 +30,12 @@ Expo React Native 移动壳和 Tauri 桌面壳的工程结构、同源 WebView 
 
 `/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)。
+`/editor/canvas` 图片画布编辑器的画布素材 ZIP 导出能力，入口放在右上角标题栏下载图标内，采用前端 JSZip 打包画布中有效图层引用的上传图、生成图、修改结果和角色动作序列帧；动作图层右键“导出为”提供序列帧 ZIP（含前端生成的 `preview.gif`）与 Spine JSON ZIP 两个二级选项，方案见 [【前端架构】图片画布素材导出方案-2026-06-15.md](./technical/【前端架构】图片画布素材导出方案-2026-06-15.md)。
 
 图片画布生成类面板的模型泥点默认 JSON、运行时 override、后台“模型定价”页面和主站动态下发口径见 [【编辑器】模型定价配置管理方案-2026-06-22.md](./%E3%80%90%E7%BC%96%E8%BE%91%E5%99%A8%E3%80%91%E6%A8%A1%E5%9E%8B%E5%AE%9A%E4%BB%B7%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88-2026-06-22.md)。
 
+React 组件测试的用户行为、稳定契约、hook / model 分层断言口径，以及避免内部 DOM 探针、图标 class 和完整对象快照式断言的规则见 [【前端测试】React组件测试准则-2026-06-26.md](./technical/%E3%80%90%E5%89%8D%E7%AB%AF%E6%B5%8B%E8%AF%95%E3%80%91React%E7%BB%84%E4%BB%B6%E6%B5%8B%E8%AF%95%E5%87%86%E5%88%99-2026-06-26.md)。
+
 桌面端全站客服悬浮入口的全局接入点、固定层级、拖拽边界和移动端隐藏口径见 [【前端架构】全站客服悬浮入口接入约定-2026-06-23.md](./technical/%E3%80%90%E5%89%8D%E7%AB%AF%E6%9E%B6%E6%9E%84%E3%80%91%E5%85%A8%E7%AB%99%E5%AE%A2%E6%9C%8D%E6%82%AC%E6%B5%AE%E5%85%A5%E5%8F%A3%E6%8E%A5%E5%85%A5%E7%BA%A6%E5%AE%9A-2026-06-23.md)。
 
 桌面端 `/creation` 创作工具主页、顶级“草稿”入口替换为“项目”、最近项目、新建项目和陶泥儿精选素材瀑布流的落地计划见 [【玩法创作】创作主页与项目入口改版计划-2026-06-18.md](./%E3%80%90%E7%8E%A9%E6%B3%95%E5%88%9B%E4%BD%9C%E3%80%91%E5%88%9B%E4%BD%9C%E4%B8%BB%E9%A1%B5%E4%B8%8E%E9%A1%B9%E7%9B%AE%E5%85%A5%E5%8F%A3%E6%94%B9%E7%89%88%E8%AE%A1%E5%88%92-2026-06-18.md)。
diff --git a/docs/openapi/genarrative-external-v1.openapi.json b/docs/openapi/genarrative-external-v1.openapi.json
index 9225908cf..0326fca0d 100644
--- a/docs/openapi/genarrative-external-v1.openapi.json
+++ b/docs/openapi/genarrative-external-v1.openapi.json
@@ -1810,6 +1810,12 @@
           "imageSrc": {
             "type": "string"
           },
+          "thumbnailSrc": {
+            "type": [
+              "string",
+              "null"
+            ]
+          },
           "objectKey": {
             "type": [
               "string",
@@ -2778,7 +2784,14 @@
         "properties": {
           "referenceImageSrc": {
             "type": "string",
-            "description": "规范图/参考图 Data URL。"
+            "description": "规范图/参考图 Data URL 或 objectKey；上传参考图优先提交 objectKey。"
+          },
+          "referenceImageSrcs": {
+            "type": "array",
+            "items": {
+              "type": "string",
+              "description": "额外图标素材参考图 Data URL 或 objectKey；上传参考图优先提交 objectKey。"
+            }
           },
           "iconDescriptions": {
             "type": "array",
@@ -2840,7 +2853,19 @@
         "properties": {
           "sourceImageSrc": {
             "type": "string",
-            "description": "UI 设计图 Data URL。"
+            "description": "UI 设计图 Data URL 或 objectKey。"
+          },
+          "model": {
+            "type": "string",
+            "default": "gemini-3.1-flash-image-preview",
+            "description": "支持 gpt-image-2、gemini-3.1-flash-image-preview、nanobanana2、nano-banana。未传时默认使用 nanobanana。"
+          },
+          "referenceImageSrcs": {
+            "type": "array",
+            "items": {
+              "type": "string",
+              "description": "额外 UI 素材参考图 Data URL 或 objectKey；上传参考图优先提交 objectKey。"
+            }
           },
           "aspectRatio": {
             "type": "string",
@@ -2930,7 +2955,6 @@
           "spritesheetImageSrc",
           "spritesheetWidth",
           "spritesheetHeight",
-          "iconImageSrcs",
           "prompt",
           "model",
           "provider",
@@ -2951,6 +2975,7 @@
           },
           "iconImageSrcs": {
             "type": "array",
+            "description": "兼容旧客户端的切片素材列表；图标素材生成固定为空，UI 设计图提取素材可返回切片。",
             "items": {
               "$ref": "#/components/schemas/EditorIconSpritesheetIconResult"
             }
diff --git a/docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md b/docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md
index 34f39319f..1df121a4c 100644
--- a/docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md
+++ b/docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md
@@ -2,15 +2,15 @@
 
 ## 1. 目标
 
-`jump-hop` 重定义为竖屏俯视角平台跳跃游戏。创作者只输入主题，系统生成一张该主题的 `1024x1536` 立方体主题物体 UV 展开图集，按 `3列*6行` 容纳 18 个方块，每个方块再按固定 `4列*3行` UV 网切成 top/front/right/back/left/bottom 六张面贴图；运行态使用 Three.js 复用标准 `1x1x1` 等比极小倒角立方体几何体，把六面贴图贴到立方体地板上组成无限平台流，同时使用陶泥儿 logo 透明 PNG 作为玩家角色。
+`jump-hop` 重定义为竖屏俯视角平台跳跃游戏。创作者只输入主题，系统生成一张该主题的 `1024x1536` 立方体主题物体 UV 展开图集，按 `3列*6行` 容纳 18 个方块，每个方块内部再用自适应 blob+gradient 算法提取 top/front/right/back/left/bottom 六张面贴图；运行态使用 Three.js 复用标准 `1x1x1` 等比极小倒角立方体几何体，把六面贴图贴到立方体地板上组成无限平台流，同时使用陶泥儿 logo 透明 PNG 作为玩家角色。
 
 首版目标：
 
 1. 创作输入只保留主题，标题、简介、标签和提示词由系统派生；
 2. image2 只生成一张 `1024x1536` 地板 UV 展开图集，后端切成 18 组、共 108 张面贴图 PNG；
 3. 角色不再单独生图，v1 使用 `public/branding/jump-hop-taonier-character.png` 陶泥儿 logo 透明 PNG；
-4. 运行态每屏只展示 3 个地块：当前地块、目标地块、下一预览地块；
-5. 操作方式为长按屏幕蓄力并按拖拽方向起跳，松手后角色按前端提交的后端方向向量弹出；
+4. 运行态每屏只展示 2 个地块：当前地块、目标地块，不再展示下一预览地块；
+5. 操作方式为长按屏幕蓄力，松手后角色朝下一块地块中心方向弹出；
 6. 只要落点未命中下一个地块，本局立即失败并冻结计时；
 7. 成绩记录成功跳跃次数和游戏时长；
 8. 排行榜按作品维度展示玩家 ID、成功跳跃次数和游戏时长，排序为成功跳跃次数降序、游戏时长升序、更新时间升序。
@@ -21,12 +21,12 @@
 - 展示名：`跳一跳`
 - 工程域：`jump-hop`
 - 创作入口卡：`subtitle = 主题驱动平台跳跃`，`imageSrc = /creation-type-references/jump-hop.webp`
-- 运行态：`Three.js 标准 1x1x1 等比极小倒角立方体地板 + DOM 角色 + DOM HUD`
+- 运行态：`Three.js 标准 1x1x1 等比极小倒角立方体地板 + Three.js Sprite 角色 + DOM HUD`
 - 画面比例：移动端竖屏优先，桌面端居中承载 `9:16`
 - 素材策略：18 个立方体主题物体 UV 展开包装 + Three.js 复用标准 1x1x1 等比立方体几何 + 陶泥儿 logo 透明角色
-- 渲染分层：Three.js 平台层复用一份标准 `1x1x1` 等比极小倒角立方体几何体，`tileAssets[]` 切片只作为主题身份方块包装贴图；单块立方体必须正轴向摆放，不做 Y 轴偏航或 Z 轴歪斜旋转，也不得用不同 x/y/z scale 压成扁盒子；运行态视角采用约 `1.3x` 近距相机和 45° 下压视角，当前脚下地块基准位于屏幕中线略下方，后续两块向上展开且保持紧凑的纵向 / 横向间距；Three.js 平台层与 DOM 角色层必须保持屏幕 X 轴同向，禁止通过反向相机 `up` 或镜像容器把平台左右翻转；DOM 地块图片层只用于换签、预加载、WebGL 不可用和测试 fallback，Three.js 平台层 ready 后必须隐藏 DOM 地块图片和 DOM 阴影，退出地块只随相机推进自然离屏，不播放独立飞走动画，超过屏幕后再销毁，避免旧地块退出期露出被放大的平面 DOM 贴图；角色必须由 DOM 透明 PNG 层渲染并保持在 Three.js 平台层之上
+- 渲染分层：Three.js 场景层复用一份标准 `1x1x1` 等比极小倒角立方体几何体，`tileAssets[]` 切片只作为主题身份方块包装贴图；单块立方体统一绕玩法竖直 Z 轴自转 45°，让运行态稳定露出顶面和两个侧面，不得做 Y 轴偏航或把 x/y/z scale 压成扁盒子；Three.js 方块模型边长在当前基础上视觉放大 1 倍，只改变模型显示尺寸，不改变平台中心点、随机间距和蓄力换算；后端命中 footprint 必须同步等于当前视觉可见顶面，不得隐藏收缩；运行态视角采用约 `1.69x` 近距相机和 45° 下压视角，每屏只保留当前地块和目标地块，当前脚下地块会根据目标方向偏向场地反侧，给下一块留出足够视野；地块从出现开始就使用自身真实规格，不再按当前 / 目标 / 远近或预览状态叠加倍率缩放，视觉远近只由相机和 Three.js 投影决定；Three.js 平台层、Three.js Sprite 角色和 DOM fallback 层必须保持屏幕 X 轴同向，禁止通过反向相机 `up` 或镜像容器把平台左右翻转；DOM 地块图片层只用于换签、预加载、WebGL 不可用和测试 fallback，Three.js 平台层 ready 后必须隐藏 DOM 地块图片和 DOM 阴影，退出地块只随相机推进自然离屏，不播放独立飞走动画，超过屏幕后再销毁，避免旧地块退出期露出被放大的平面 DOM 贴图；角色主路径使用 Three.js Sprite 承载陶泥儿透明 PNG，Sprite 脚点必须落在当前方块顶面中心高度并且绘制顺序高于地块，DOM 角色层仅在 WebGL 或角色贴图加载失败时兜底
 
-本玩法不是横版平台跳跃，也不是关卡制闯关。平台从屏幕下方向上无限延展，目标地块在当前地块上方不同 x 轴位置随机出现。
+本玩法不是横版平台跳跃，也不是关卡制闯关。平台从屏幕下方向上无限延展，目标地块永远在当前脚下地块的正 45 度或负 45 度方向随机出现。
 
 ## 3. 创作工具平台接入声明
 
@@ -35,10 +35,10 @@
 - 单图资产槽位：无独立角色图槽位；v1 固定使用陶泥儿 logo 透明 PNG 角色
 - 系列素材槽位：
   - `batchId = jump-hop-tile-atlas`
-  - `sheetSpec = 1024x1536 / 3列*6行大单元 / 每格4列*3行UV网 / PNG / 纯洋红 #FF00FF 安全缝与外圈背景 / 后端切图为面贴图 PNG`
+  - `sheetSpec = 1024x1536 / 3列*6行大单元 / 每格内自适应blob+gradient提取六面 / PNG / 纯洋红 #FF00FF 安全缝与外圈背景 / 后端切图为面贴图 PNG`
   - `slotSpecs = tile-01 ... tile-18`，每个 tile 再包含 `top/front/right/back/left/bottom` 六个面 slot，所有 slot 必须对应唯一 OSS path / `assetObjectId`
-  - 切图规则：先按原图宽高均分为 3 列 6 行，从上到下、从左到右得到 18 个大单元；每个大单元内部固定 4 列 3 行 UV 网，`top` 在第 1 行第 2 列，`left/front/right/back` 在第 2 行第 1-4 列，`bottom` 在第 3 行第 2 列；每个面输出 `256x256` 不透明 PNG
-  - 透明化规则：生成时要求纯洋红 key 安全缝和 UV 空位，后端不做透明化抠图，只把裁切后残留的洋红 key 色转为不透明材质底色，保留绿色、白色、雪地、云朵、草地、花朵、果肉粉色和浅黄色等主题纹理
+  - 切图规则：先通过 density 种子点精修自适应检测 3 列 6 行大单元边界（`SeedRefinement`）；每个大单元内部先用 BFS 连通域提取主 blob、清除非主 blob 噪点，再对行 density 和列 height profile 做 gradient 分析检测边界（y0/y1/y2/y3、x0/x1/x2/x3），按此边界划分为 3x3 block 并保留 5 个有效 block，将含 Right+Back 的 block 从中点拆分为两块，对每个 block 取最大不透明矩形后缩放为 `256x256` 不透明 PNG
+  - 透明化规则：生成时要求纯洋红 key 安全缝和 UV 空位；后端先对图集做洋红去背（BFS 漫水 + 镂空洞检测），再对每个大单元内提取主 blob 后进行自适应面切分；切分后在 block 内取最大不透明矩形，消除透明边缘
   - 失败回写：生成失败时 session 保持 failed，可从生成页重试
   - 局部重生成：结果页允许重生成地板贴图图集，仍只调用一次 image2；前端展示生成图时以 `assetObjectId` 作为刷新键，避免同一路径重写后的旧签名或旧缓存
 - API 命名空间：`/api/creation/jump-hop/*`、`/api/runtime/jump-hop/*`
@@ -60,11 +60,11 @@
 
 ## 5. 地板贴图图集
 
-image2 只生成一张 `1024x1536` 竖版图片，画面为 `3列*6行` 均匀分布的立方体主题物体 UV 展开包装；实际提示词必须先约束“画面只包含 18 个用于跳一跳地板的立方体主题物体 UV 展开包装图”，并明确这是供 Three.js 标准 1x1x1 等比极小倒角立方体使用的 cube object UV unwrap atlas。每个大单元格代表一个完整方块化主题物体，并在固定 `4列*3行` UV 网中提供六张面贴图；不是单纯材质贴片、单张图重复六面、地块成品图、跳板、物体剪影、游戏界面、棋盘、背包、装备栏或图标集页面。
+image2 只生成一张 `1024x1536` 竖版图片，画面为 `3列*6行` 均匀分布的立方体主题物体 UV 展开包装；实际提示词必须先约束“画面只包含 18 个用于跳一跳地板的立方体主题物体 UV 展开包装图”，并明确这是供 Three.js 标准 1x1x1 等比极小倒角立方体使用的 cube object UV unwrap atlas。每个大单元格代表一个完整方块化主题物体，并在固定 `4列*3行` UV 网中提供六张面贴图（AI prompt 侧不变）；后端通过自适应 blob+gradient 算法检测面的实际位置并切图，不再依赖固定像素坐标均分。不是单纯材质贴片、单张图重复六面、地块成品图、跳板、物体剪影、游戏界面、棋盘、背包、装备栏或图标集页面。
 
 图集要求：
 
-1. 每个大单元内部固定使用 `4列*3行` UV 网，只有六个位置有贴图：第 1 行第 2 列是 `top`；第 2 行第 1-4 列依次是 `left / front / right / back`；第 3 行第 2 列是 `bottom`；其它位置保持纯洋红 `#FF00FF`；
+1. 每个大单元内部固定使用 `4列*3行` UV 网，只有六个位置有贴图：第 1 行第 2 列是 `top`；第 2 行第 1-4 列依次是 `left / front / right / back`；第 3 行第 2 列是 `bottom`；其它位置保持纯洋红 `#FF00FF`。以上为 AI 生图的 layout 要求（prompt 侧不变）。后端切图优先使用自适应 blob+gradient 算法检测面的实际像素区域，不依赖固定像素坐标均分；固定网格切片只作为测试对照和必要 fallback 参考。
 2. 每个面都是 full-bleed 不透明正方形贴图，四角、边缘和中心都要有可识别内容；六个面共同组成同一个完整方块化主题物体，不能把同一张纹理重复六次，也不能六面各画互不相关的小图标；
 3. 贴图不生成已经渲染好的透视 3D 块体成品，不包含摄像机角度、已烘焙侧壁、已烘焙厚度、自身投影、接触阴影或烘焙高光；真实倒角、侧壁、透视和阴影由运行态 Three.js 生成；
 4. 18 个方块来自同一主题、同一哑光手绘包装体系，但应表达不同方块化主题物体或明显不同的包装识别特征；水果主题要混排方块苹果、方块香蕉、方块橙子、方块西瓜、方块草莓、方块葡萄、方块奇异果、方块菠萝、方块柠檬、方块桃子、方块梨、方块蓝莓、方块芒果、方块椰子、方块火龙果、方块樱桃、方块哈密瓜、方块石榴，不要 18 个方块都只是同一种果皮、果肉或叶脉纹理；
@@ -83,38 +83,37 @@ tile-13 tile-14 tile-15
 tile-16 tile-17 tile-18
 ```
 
-每个 `tile-XX` 再切出 `top/front/right/back/left/bottom` 六个面贴图并写入 `tileAssets[].faceAssets`。历史兼容字段 `imageSrc/imageObjectKey/assetObjectId` 保存 top 面，旧作品没有 `faceAssets` 时运行态仍可把单张旧贴图应用到立方体所有面。运行态随机使用这 18 个地块作为后续平台外观。起点地块可复用第一个切片，其余平台从完整池中随机选择。
+每个 `tile-XX` 再切出 `top/front/right/back/left/bottom` 六个面贴图并写入 `tileAssets[].faceAssets`。历史兼容字段 `imageSrc/imageObjectKey/assetObjectId` 保存 top 面；旧作品没有完整 `faceAssets` 时只走 DOM 图片 / 原型兜底层，不再把单张旧贴图强行贴到 Three.js 立方体所有面，避免旧平面素材被误表现成 UV 贴歪。运行态随机使用这 18 个地块作为后续平台外观。起点地块可复用第一个切片，其余平台从完整池中随机选择。
 
 ## 6. 运行态规则
 
 ### 6.1 平台流
 
-运行态从底部初始地块开始，后续地块持续向屏幕上方生成。每次相机窗口只保留 3 个地块可见：
+运行态从底部初始地块开始，后续地块持续向屏幕上方生成。每次相机窗口只保留 2 个地块可见：
 
 1. 当前地块；
-2. 目标地块；
-3. 下一预览地块。
+2. 目标地块。
 
-服务端保存当前 run 的路径缓冲，并在每次成功落地后按同一 seed 补齐后续地块。前端只展示服务端快照，不自行生成正式路径。
+服务端保存当前 run 的路径缓冲，并在每次成功落地后按同一 seed 补齐后续地块。每个后续地块只能生成在当前地块的正 45 度或负 45 度方向上，世界坐标必须满足 `abs(next.x - current.x) == next.y - current.y`，左右方向由 seed 随机决定。当前版本已有的最远相邻地块间距作为各难度 `max_gap` 上限；每次新地块距离由 seed 在 `max_gap * 55%` 到 `max_gap` 之间随机，保证相对距离永远大于 0 且不会超过当前最大手感距离。前端只展示服务端快照，不自行生成正式路径；当前两块可见窗口必须按服务端真实相邻距离缩放屏幕投影，最大距离仍落在当前版本固定的左上 / 右上 45 度位置，较近距离则沿同一 45 度方向靠近当前脚下地块。当前脚下地块仍根据目标方向偏向目标反侧，避免前方同时暴露两块地块。角色开局时脚点必须锚定在初始地块顶面中心；Three.js 角色层通过立方体顶面高度定位脚点，DOM fallback 也使用同一顶面中心屏幕锚点，不得额外把角色吸附到地块侧面或阴影中心。
 
 ### 6.2 操作
 
 1. 用户按住当前地块或画面开始蓄力；
 2. 长按时长形成蓄力值，达到 `maxChargeMs` 后封顶；
-3. 松手后角色按本次输入方向弹出；
-4. 蓄力值决定跳跃距离，拖拽方向决定跳跃方向；
-5. 前端必须同时提交 `dragDistance` 与换算到后端世界坐标的 `dragVectorX/dragVectorY`，后端以这两个方向字段裁决真实落点；旧客户端缺失方向或方向非法时，后端才 fallback 到当前地块中心指向下一块地块中心。
+3. 松手后角色从当前真实脚点出发，朝下一块地块顶面中心方向弹出；
+4. 蓄力值决定跳跃距离，用户拖拽方向不决定跳跃方向；
+5. 前端提交 `dragDistance`，并为兼容后端契约提交由角色当前真实脚点指向下一块地块顶面中心推导出的 `dragVectorX/dragVectorY`；这些方向字段不得来自用户手指拖拽方向。
 
-手感参数固定由后端 `module-jump-hop` 提供：`chargeToDistanceRatio = 0.004`。该值表示蓄力时长到世界跳跃距离的换算系数；旧作品运行时若仍携带其它系数，开局归一化为 `0.004`。契约中的 `dragDistance` 语义是前端提交的蓄力值；`dragVectorX/dragVectorY` 是正式方向输入契约，不能在前端提交或后端裁决中丢弃。
+手感参数固定由后端 `module-jump-hop` 提供：`chargeToDistanceRatio = 0.004`。该值表示蓄力时长到世界跳跃距离的换算系数；旧作品运行时若仍携带其它系数，开局归一化为 `0.004`。契约中的 `dragDistance` 语义是前端提交的蓄力值；`dragVectorX/dragVectorY` 仅用于兼容当前后端请求结构，玩法语义上不表示用户拖拽方向。
 
-松手后前端必须立即生成 `visualJump`，用当前角色位置作为起点、前端预测真实落点作为终点，播放约 `560ms` 的角色飞行动画；视觉预测必须使用当前显示窗口的 current/next 地块作为方向来源，即使后端最新 run 已提前返回，也不能拿新 run 目标配旧窗口角色导致下一跳反向；角色从当前地块沿下一块地块中心方向弹向预测真实落点，蓄力阶段角色只做垂直压缩，不沿目标方向拉长。成功落地后必须保留 `lastJump.landedX/landedY` 对应的真实落点偏移，不得强制吸附回目标地块中心；落地后可以轻量回弹，但不能把角色位置拉离真实落点。动画期间 DOM 地块窗口保持在本次起跳前的 3 块布局，动画路径不得等待后端新 run。若后端新 run 晚于飞行动画返回，角色必须停在预测真实落点等待；新 run 到达后应先使用后端真实落点对齐显示态，再进入约 `1440ms` 的相机推进过渡，避免角色先飞过很远再瞬间拉回地块。推进过渡中，地块 DOM 层和 DOM 角色层必须放在同一个相机层里统一位移，不允许 p1/p2 单独改 `top/left` 做过渡；旧当前地块只随相机推进保留在屏幕后方，不单独执行飞走动画，玩家继续向前跳时再被新的相机推进自然带出屏幕并销毁，新预览地块从上方自然露出，避免角色和地块不同步或闪现。相机推进必须同时携带 X/Y 偏移，从旧真实落点位置斜向滑到新当前地块聚焦位置，不允许先横向瞬切居中后再只做纵向滑动。地块可以保留当前 / 目标 / 预览的深度尺寸差异，但该差异必须通过固定基准宽高上的 CSS `transform: scale(...)` 表达，并在相机推进期间用同一 `1440ms` 缓动过渡；不得通过直接改宽高造成瞬切变大。当前地块高亮不得额外通过 CSS `scale` 放大。该动画只属于表现层，命中、失败、成功跳跃次数和冻结时长仍以后端裁决为准。
+松手后前端必须立即生成 `visualJump`，用当前角色真实脚点作为起点、前端预测真实落点作为终点，播放约 `560ms` 的角色飞行动画；视觉预测必须使用当前显示窗口的 current/next 地块作为方向来源，即使后端最新 run 已提前返回，也不能拿新 run 目标配旧窗口角色导致下一跳反向；角色从当前真实脚点沿下一块地块顶面中心方向弹向预测真实落点，蓄力阶段角色只做垂直压缩，不沿目标方向拉长。当前调参验证阶段，按住蓄力时允许显示一枚实时预测落点指示器，位置必须复用同一套前端预测结果：先按真实脚点到下一块顶面中心计算 `landedX/landedY`，再把该世界坐标投影到当前窗口和 Three.js 顶面脚点屏幕位置；不得用当前地块中心或屏幕线性插值替代。松手或取消时隐藏指示器，不参与后端裁决、不写入作品配置。成功落地后必须保留 `lastJump.landedX/landedY` 对应的真实落点偏移，不得强制吸附回目标地块中心；落地后可以轻量回弹，但不能把角色位置拉离真实落点。动画期间显示窗口保持在本次起跳前的 2 块布局，动画路径不得等待后端新 run。若后端新 run 晚于飞行动画返回，角色必须停在预测真实落点等待；新 run 到达后应先使用后端真实落点对齐显示态，成功跳跃在飞行动画结束后保留约 `300ms` 落地停顿，再进入约 `1440ms` 的相机推进过渡，避免角色刚落地就立刻拉镜头。推进过渡中，地块层和角色层必须放在同一个相机层里统一位移，不允许 p1/p2 单独改 `top/left` 做过渡；旧当前地块只随相机推进保留在屏幕后方，不单独执行飞走动画，玩家继续向前跳时再被新的相机推进自然带出屏幕并销毁，新目标地块从上方自然露出，避免角色和地块不同步或闪现。相机推进必须同时携带 X/Y 偏移，从旧真实落点位置斜向滑到新当前地块聚焦位置，不允许先横向瞬切居中后再只做纵向滑动。地块从出现开始保持自身真实尺寸，不得通过当前 / 目标 / 远近 / 预览状态附加 CSS `scale(...)` 或深度倍率；推进期只做统一相机层位移，远近变化交给相机和 Three.js 真实投影。当前地块高亮不得额外通过 CSS `scale` 放大。该动画只属于表现层，命中、失败、成功跳跃次数和冻结时长仍以后端裁决为准。
 
 ### 6.3 判定
 
 1. 目标永远是当前地块后的下一个地块；
-2. 真实落点沿前端提交的 `dragVectorX/dragVectorY` 归一化方向计算；仅当方向缺失、非有限数或长度过小时，才沿当前地块中心到下一块地块中心方向兼容计算；
-3. 落点进入下一个地块可见顶面 footprint，则成功；footprint 使用当前路径里该地块 `width/height` 的收缩矩形模拟 45° 视角下的可见顶面，当前命中区约为宽度 72% 和高度 52%；
-4. 落点未进入下一个地块可见顶面 footprint，则失败；旧 `landingRadius/perfectRadius` 字段仅保留兼容读写，不再作为当前 v1 成功判定；
+2. 真实落点沿角色当前真实脚点到下一块地块顶面中心方向计算；开局脚点等于初始地块顶面中心，成功跳跃后脚点等于后端 `lastJump.landedX/landedY`，不得回退到当前地块中心；
+3. 落点进入下一个地块完整可见顶面 footprint，则成功；footprint 使用当前路径里该地块 `width/height` 按 45° 顶面投影得到的完整菱形区域，必须严格和当前视觉方块顶面一致，不得再额外收缩或放宽；
+4. 落点未进入下一个地块完整可见顶面 footprint，则失败；地块侧面、底面、投影阴影和旧半径范围都不算正确落点；旧 `landingRadius/perfectRadius` 字段仅保留兼容读写，不再作为当前 v1 成功判定；
 5. 失败后状态改为 `failed`，计时冻结；
 6. v1 没有通关状态、combo、perfect 或生命数。
 
@@ -153,7 +152,7 @@ successfulJumpCount desc -> durationMs asc -> updatedAt asc
 
 1. 陶泥儿 logo 透明角色预览；
 2. 18 个地块资源池预览；
-3. 首屏 3 块平台预览；
+3. 首屏 2 块平台预览；
 4. 试玩；
 5. 发布；
 6. 返回编辑；
@@ -187,13 +186,13 @@ successfulJumpCount desc -> durationMs asc -> updatedAt asc
 
 1. 创作页只显示主题输入；
 2. 生成链路只调用一次地板贴图图集 image2，不再调用角色生图；
-3. 地板贴图图集为 `1024x1536 / 3列*6行 / 每格4列*3行UV网`，后端切出 18 组、共 108 张面贴图 PNG；
+3. 地板贴图图集为 `1024x1536 / 3列*6行`，后端通过自适应 blob+gradient 算法切出 18 组、共 108 张面贴图 PNG；
 4. 结果页不依赖旧角色图片槽；
-5. 运行态为竖屏俯视角，首屏保持 3 个地块可见；
-6. 长按蓄力值影响落点距离，`dragVectorX/dragVectorY` 影响正式落点方向；
+5. 运行态为竖屏俯视角，首屏保持 2 个地块可见；
+6. 长按蓄力值影响落点距离，角色初始脚点在初始地块顶面中心，跳跃方向固定朝下一块地块中心，目标地块始终位于当前脚下地块的正 45 度或负 45 度方向；
 7. 未落到下一个地块立即失败；
 8. 成功跳跃次数累加，失败后计时冻结；
 9. 排行榜按成功跳跃次数优先排序；
 10. 作品可保存、发布、分享并从公开入口启动。
-11. 运行态 Three.js 地板必须优先把 `tileAssets[].faceAssets` 六面贴图按 right/left/top/bottom/front/back 材质顺序贴到标准 `1x1x1` 等比立方体上；旧作品没有 `faceAssets` 时才使用 `tileAssets[].imageSrc` 单贴图 fallback。六面贴图通过换签或 blob 异步解析时，Three.js 平台 mesh 的刷新签名必须包含 top/front/right/back/left/bottom 六个 texture URL，任一面 URL 变化都要触发材质重建，不能只监听旧单图 `imageSrc`。立方体正轴向摆放，不做 Y 轴偏航或 Z 轴歪斜旋转，不得把 x/y/z 缩放成扁盒子；相机保持近距 45° 下压视角，当前脚下地块基准位于屏幕中线略下方，可见三块地板之间的屏幕间距必须偏紧凑；长按蓄力、计时刷新和角色位置更新不得销毁重建透明画布、平台贴图预加载层或 DOM 角色层。
-12. 同等世界距离的蓄力换算必须使用 `0.004` 系数，松手后必须先看到角色飞行动画，再看到地块窗口前移；成功落地显示必须保留真实落点偏移。
+11. 运行态 Three.js 地板必须只在 `tileAssets[].faceAssets` 六面贴图完整时启用 Three 平台层；玩法坐标把 Z 轴作为立方体竖直高度，因此材质数组按 Three group 顺序写入 `right / left / back / front / top / bottom`，把逻辑 `top` 精确映射到 `+Z` 顶面，并按每面 UV 朝向做必要的翻转校正；六面贴图通过换签或 blob 异步解析时，Three.js 平台 mesh 的刷新签名必须包含 top/front/right/back/left/bottom 六个 texture URL，任一面 URL 变化都要触发材质重建，不能只监听旧单图 `imageSrc`。旧作品没有完整 `faceAssets` 时使用 DOM 图片 / 原型兜底层，不使用单图 3D 贴面 fallback。立方体统一绕玩法竖直 Z 轴自转 45°，让玩家稳定看到顶面和两个侧面，不做 Y 轴偏航，不得把 x/y/z 缩放成扁盒子；Three.js 方块模型边长视觉放大 1 倍，但平台中心点、随机间距和蓄力换算均保持原规则；后端命中 footprint 必须与当前视觉顶面完整对齐；地块材质使用 `alphaTest` 裁边但不得放进透明材质队列，避免透明排序把地块画到角色之上；角色主路径使用 Three.js Sprite 并与平台共用同一屏幕坐标投影，Sprite 脚点必须按当前方块半高抬到顶面中心高度，绘制顺序必须高于地块，DOM 角色仅作为 WebGL 或角色贴图加载失败兜底；相机保持约 `1.69x` 近距 45° 下压视角，当前脚下地块根据目标方向偏向场地反侧，可见当前 / 目标两块地板之间的屏幕间距必须形成正负 45 度关系；所有地块从出现开始保持真实规格，不按距离、深度或预览状态做倍率缩放；长按蓄力、计时刷新和角色位置更新不得销毁重建透明画布、平台贴图预加载层或角色层。
+12. 同等世界距离的蓄力换算必须使用 `0.004` 系数，松手后必须先看到角色飞行动画，再保留约 `300ms` 落地停顿，随后看到地块窗口前移；成功落地显示必须保留真实落点偏移，且正确落点范围必须严格等于下一块地块完整可见顶面 footprint。
diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index cb43b7c34..3c6cb5205 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -24,6 +24,22 @@
 - 验证方式：运行 `npm run ai-game-creator-shell:typecheck`、`cargo test --manifest-path apps/ai-game-creator-shell/src-tauri/Cargo.toml`、`npm run check:encoding` 和 `git diff --check`。
 - 关联文档：`docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md`。
 
+## 2026-06-29 图片画布手动抠图走远端 BiRefNet BFF
+
+- 背景：用户手动“去除背景”面对任意图片，前端 `chromaKey` 和标准绿幕后处理不适合复杂人物、自然背景或非纯色背景；远端 image host 已部署 BiRefNet 服务，需要让手动抠图走高质量模型，同时避免把服务令牌暴露到浏览器。
+- 决策：画布手动“去除背景”默认调用登录态同源 BFF `POST /api/editor/images/background-removals`。api-server 解析当前图片后代理到 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL/remove-background`，默认指向 `http://58.87.105.82/remove-background`，可选 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN` 只在服务端注入。api-server 对上游结果做字节和尺寸上限保护，并先落 OSS / asset object 再返回给前端。编辑器自己生成的标准绿幕资产不属于该决策，见 2026-06-30 绿幕契约收口。
+- 影响范围：api-server 编辑器图片接口、图片画布手动去背景、画布右上角任务侧栏、图片画布 MVP 技术文档。
+- 验证方式：运行 `cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server config::tests::from_env_reads_editor_background_removal_settings --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、定向画布 workflow 测试、`npm run check:encoding` 和 `git diff --check`。
+- 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
+## 2026-06-26 React 组件测试按用户行为与稳定契约收敛
+
+- 背景：部分 React 测试把组件内部状态、测试专用 DOM 探针、图标 class、完整按钮顺序或精确长文案当成契约，正常 UI 重构时容易误报，增加维护成本。
+- 决策：新增和重写 React 测试时，默认分成用户流程测试、稳定契约测试、hook / model 逻辑测试三层。用户流程测试优先断言 role / label / URL / 弹窗 / callback 等可感知结果；演化中的 DTO 和 callback payload 使用关键字段或 `expect.objectContaining(...)`；hook 测试使用 `renderHook` 验证公开返回契约，不再为读取内部状态制造 `data-testid` 仪表盘。
+- 影响范围：前端 React 组件测试、图片画布测试、平台入口测试、后续共享组件和 hook 测试新增 / 重写方式。
+- 验证方式：运行定向 React 测试、`npm run typecheck`、`npm run check:encoding` 和 `git diff --check`；出现正常重构引发测试破碎时，优先把测试改到用户行为或稳定契约层。
+- 关联文档：`docs/technical/【前端测试】React组件测试准则-2026-06-26.md`、`src/components/image-editor/useCanvasGenerationDialogs.test.tsx`、`src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx`。
+
 ## 2026-06-26 AI 游戏创作 App 生成过程必须在聊天可见
 
 - 背景：普通用户窗口只保留聊天入口，但如果生成确认后只显示“已生成草案”和本地产物路径，真实 LLM / Agent loop 会被误解成固定模板落盘。
@@ -71,6 +87,7 @@
 
 - 背景：外部生成队列已经承载画板和玩法的付费生成，但前端只展示排队概览，缺少可追溯任务列表、后端确认状态、完成提示补弹和退款记录到任务的追踪关系。
 - 决策：`external_generation_job` 同时作为正式生成任务列表事实源，保存 `price_mud_points`、`refund_ledger_id` 和 `notification_acknowledged_at`；新增 `external_generation_job_event` 追加状态转换审计。BFF 新增当前账号任务列表和 acknowledge 接口；前端只展示后端任务状态，完成 / 失败提示关闭时由后端写确认时间，未确认终态任务在下次登录后按列表集中弹出。任务触发的钱包扣费 / 退款流水 metadata 必须写 `externalGenerationJobId`，本机退款 outbox 重放也保留该任务 ID。
+- 2026-06-25 追加：平台壳的当前账号任务列表只在登录、网络恢复、页面回到前台或已有 queued/running/未确认终态任务时刷新；空队列刷新一次后不保持 4 秒轮询，避免 `/api/runtime/external-generation/jobs` 在无任务时持续请求。
 - 影响范围：`spacetime-module` 外部生成 schema / procedure、`spacetime-client` bindings/facade、`api-server` 外部生成 BFF、worker 失败回写和资产计费退款链路、平台入口“我的”页任务卡和完成提示弹窗。
 - 验证方式：运行 `npm run spacetime:generate`、`npm run check:spacetime-schema`、`cargo test -p spacetime-module external_generation --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server wallet_refund_outbox --manifest-path server-rs/Cargo.toml`、`cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/technical/【后端架构】外部生成Worker化方案-2026-06-03.md`、`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`。
@@ -166,7 +183,7 @@
 ## 2026-06-19 图片画布素材生成元数据上移到资源和素材
 
 - 背景：角色、图标、UI 设计图、视频和音频等生成结果会在图片信息页展示用户可见输入快照；此前这些 `assetKind/generationInputs` 主要保存在画布 layer JSON 中，素材进入账号级素材库后跨项目复用和刷新恢复都依赖画布布局，不符合素材库作为账号级事实源的边界。
-- 决策：普通图层的新保存不再把 `assetKind/generationInputs` 写入 `editor_canvas.layers_json`。`editor_project_resource` 保存项目画布资源快照的 `asset_kind/generation_inputs_json`，`editor_asset` 保存账号级素材的同名元数据；图片 / 图标 / UI 提取等生成 BFF 在请求携带 `projectId` / `assetFolderId` 时由后端创建新 resource / asset 并把快照回传前端，前端只用回包更新画布图层和素材栏，不再把同一生成结果二次调用保存接口。前端加载时优先从 resource / asset 恢复素材类别和生成输入快照，旧 layout 中的同名字段只作为历史兼容兜底。生成器对象本身仍作为 `itemType="generation-dialog"` 保存在画布布局中。
+- 决策：普通图层的新保存不再把 `assetKind/generationInputs` 写入 `editor_canvas.layers_json`。`editor_project_resource` 保存项目画布资源快照的 `asset_kind/generation_inputs_json`，`editor_asset` 保存账号级素材的同名元数据和可选封面 `thumbnail_src`；图片 / 图标 / UI 提取等生成 BFF 在请求携带 `projectId` / `assetFolderId` 时由后端创建新 resource / asset 并把快照回传前端，前端只用回包更新画布图层和素材栏，不再把同一生成结果二次调用保存接口。生成视频由后端单独抽取首帧封面写入 `editor_asset.thumbnail_src` 和画布图层 `thumbnailSrc`，刷新素材库或从素材库拖回画布时继续作为视频 poster 使用。前端加载时优先从 resource / asset 恢复素材类别和生成输入快照，旧 layout 中的同名字段只作为历史兼容兜底。生成器对象本身仍作为 `itemType="generation-dialog"` 保存在画布布局中。
 - 影响范围：`server-rs/crates/spacetime-module/src/editor_project_storage.rs`、`server-rs/crates/spacetime-client/src/mapper/editor_project.rs`、`server-rs/crates/api-server/src/editor_project.rs`、`src/services/image-editor/editorProjectClient.ts`、图片画布 hydrate / serialize / project persistence / asset library 代码和后端数据契约文档。
 - 验证方式：运行 `npm run spacetime:generate`、`npm run check:spacetime-schema`、`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/services/image-editor/editorProjectClient.test.ts`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`，并按需补充 `cargo check -p spacetime-client -p api-server --manifest-path server-rs/Cargo.toml`。
 - 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`、`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`。
@@ -182,11 +199,18 @@
 ## 2026-06-18 图片画布 UI 设计图提取素材保留图集
 
 - 背景：UI 设计图需要从成图中继续抽取可复用独立素材；原图标素材生成只把拆分后的图标放入画布，spritesheet 原图没有保留，后续追溯和二次切图不方便。
-- 决策：`assetKind="ui-design"` 图层浮动工具栏新增 `提取素材`，点击后先进入红框素材框选编辑态，默认矩形框选，并支持椭圆框选和画笔自由框选。至少存在一个框选区域后才能提交；前端把红色轮廓绘入原 UI 设计图并将合成图作为 `/api/editor/ui-designs/assets/extractions` 的参考图。后端固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet`，返回结构复用图标 spritesheet 响应。图标生成与 UI 提取都必须把 spritesheet 图集作为 `assetKind="icon-spritesheet"` 图层放到画布，再放拆分后的 `assetKind="icon"` 素材。
+- 决策：`assetKind="ui-design"` 图层浮动工具栏新增 `提取素材`，点击后先进入红框素材框选编辑态，默认矩形框选，并支持椭圆框选和画笔自由框选。至少存在一个框选区域后才能提交；前端把红色轮廓绘入原 UI 设计图并将合成图作为 `/api/editor/ui-designs/assets/extractions` 的参考图。后端固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。`，返回结构复用图标 spritesheet 响应。UI 提取把 spritesheet 图集作为 `assetKind="icon-spritesheet"` 图层放到画布，再放拆分后的 `assetKind="icon"` 素材；图标素材生成只保留扣绿后的 spritesheet 图集，不再额外铺独立图标。
 - 影响范围：图片画布浮动工具栏、编辑器图片生成 BFF、`platform-image` 图集连通域拆分、画布图层类型和编辑器文档。
 - 验证方式：运行图片画布工具栏 / 图集落层 / 生成提交相关前端测试，`cargo test -p platform-image generated_asset_sheets --manifest-path server-rs/Cargo.toml`，以及 `cargo test -p api-server editor_ui_design_asset_extraction_prompt_is_fixed --manifest-path server-rs/Cargo.toml`。
 - 关联文档：`docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md`、`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`。
 
+## 2026-06-30 图片画布标准绿幕契约收口
+
+- 背景：角色形象、图标 spritesheet、UI 提取 spritesheet 和角色动作帧都要求模型生成标准绿幕，但提示词片段和后处理入口分散在多个模块中，容易把标准绿幕资产误接到远端 BiRefNet。
+- 决策：编辑器标准绿幕提示词和本地确定性绿幕透明化统一收口到 `server-rs/crates/api-server/src/editor_green_screen.rs`。手动 `POST /api/editor/images/background-removals` 继续面向用户任意图片并走 BiRefNet；编辑器自己生成的标准绿幕资产统一复用 `platform-image::generated_asset_sheets` 的本地透明化能力，不再依赖 BiRefNet。角色图、图标 spritesheet、UI 提取 spritesheet 和角色动作抽帧源图必须在绿幕透明化前先保存一份带绿幕原图到 OSS，便于追溯和重处理。
+- 影响范围：`editor_project.rs` 的角色图 / 图标图集 / UI 提取图集、`character_animation_assets.rs` 的编辑器角色动作帧、编辑器绿幕相关文档。
+- 验证方式：运行 `cargo test -p api-server --manifest-path server-rs/Cargo.toml prompt`，并单独按需过滤 `editor_canvas_green_screen_generation_uses_local_postprocess`、`editor_character_animation_frames_use_local_green_screen_postprocess`；同时运行 `npm run check:encoding` 和 `git diff --check`。
+
 ## 2026-06-18 `/creation` 独立为陶泥儿创作工具主页
 
 - 背景：图片画布项目已经成为独立项目资产，旧“创作”站内 Tab 和一级“草稿”入口不能清晰表达桌面端创作工具主页与项目管理入口。
@@ -198,7 +222,7 @@
 ## 2026-06-18 图片画布 Seedance 2.0 参考媒体提交边界
 
 - 背景：`/editor/canvas` 生成视频需要严格对齐火山 Seedance 2.0 多模态参考输入；参考视频若继续走 Base64 / `data:video` 会超过请求体并被上游拒绝，参考音频单独输入和非 Seedance 模型携带参考字段也会违反文档契约。
-- 决策：仅 `seedance2.0-fast` / `seedance2.0` 可提交参考图片、参考视频、参考音频；图片 0~9、视频 0~3、音频 0~3，音频必须搭配图片或视频。参考视频只能提交公网 URL、`asset://` 或画板资源 `objectKey`，禁止 `data:video/*`；视频 / 音频上传先走 OSS 直传和 asset_object confirm，前端保存 signed URL 预览但提交优先 `objectKey`，后端统一重新签名给 Ark。Ark body 按 `image_url` / `video_url` / `audio_url` + `reference_*` role 构造，并显式发送 `generate_audio:false`。
+- 决策：仅 `seedance2.0-fast` / `seedance2.0` 可提交参考图片、参考视频、参考音频；图片 0~9、视频 0~3、音频 0~3，音频必须搭配图片或视频。参考视频只能提交公网 URL、`asset://` 或画板资源 `objectKey`，禁止 `data:video/*`；视频 / 音频上传先走 OSS 直传和 asset*object confirm，前端保存 signed URL 预览但提交优先 `objectKey`，后端统一重新签名给 Ark。Ark body 按 `image_url` / `video_url` / `audio_url` + `reference*\*`role 构造，并显式发送`generate_audio:false`。
 - 影响范围：图片画布生成视频面板、参考媒体上传工作流、`editorReferenceUploadClient`、`ImageCanvasGenerationSubmissionModel`、`shared-contracts`、`api-server` 编辑器视频 BFF、Lovart 生成类面板文档。
 - 验证方式：运行 `npx vitest run src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts src/services/image-editor/editorReferenceUploadClient.test.ts --reporter verbose`、`cargo test -p api-server editor_video --manifest-path server-rs/Cargo.toml`、`cargo test -p shared-contracts editor_video_request_supports_seedance_multimodal_references --manifest-path server-rs/Cargo.toml`，并执行 `npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、火山 Seedance 2.0 任务创建文档。
@@ -1082,6 +1106,7 @@
 
 - 背景：生成图片如果以完整 OSS 私有 bucket URL 进入前端，浏览器会裸连 OSS 并遇到 403 或绕过现有 `/api/assets/read-url` 签名缓存；同时旧对象缺少 `Cache-Control` 时只能走 `ETag` / `Last-Modified` 协商缓存，容易被误解为需要 api-server 本地磁盘缓存。
 - 决策：OSS 继续作为 generated 私有资产源站，api-server 只签发短期读 URL，不做本地磁盘静态资源兜底。前端收到同 bucket 的 `https://*.oss-*.aliyuncs.com/generated-*` 地址时，必须先归一为 legacy public path，再复用 `/api/assets/read-url` 和本地 signed URL 缓存。新上传 generated 私有对象默认写入 `Cache-Control: public, max-age=31536000, immutable`，缓存职责交给 OSS 对象头、浏览器 / WebView HTTP 缓存和后续 CDN。
+- 2026-06-25 追加：前端需要读取 generated/private 资源字节时，也应先通过 `/api/assets/read-url` 获取 signed OSS URL 并由浏览器直接下载字节；`/api/assets/read-bytes` 只作为换签或 OSS 读取失败后的 fallback，不作为默认文件代理路径。
 - 影响范围：`src/services/assetReadUrlService.ts`、`server-rs/crates/platform-oss`、`shared-contracts` direct upload form fields、`api-server` assets DTO 映射、后端契约文档和开发运维排障口径。
 - 验证方式：完整 OSS generated URL 应触发 `/api/assets/read-url?legacyPublicPath=...`，同一路径、同一 `refreshKey` 版本且未临近过期时复用本地 signed URL；`platform-oss` 的 `PostObject` policy / form fields 和 `PutObject` 请求头都应包含 immutable `Cache-Control`，且 `PutObject` V4 签名的 `AdditionalHeaders` 包含该普通请求头。
 - 关联文档：`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`、`server-rs/crates/platform-oss/README.md`。
@@ -2443,18 +2468,18 @@
 - 验证方式：`cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml`、`cargo check -p spacetime-client --manifest-path server-rs/Cargo.toml`、`cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`npm run check:spacetime-schema`、跳一跳工作台和 runtime 定向前端测试。
 - 关联文档：`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`、`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`。
 
-## 2026-06-01 跳一跳运行态地块视觉尺寸和命中半径统一放大一倍
+## 2026-06-01 跳一跳运行态地块视觉尺寸放大与命中 footprint 分离
 
 - 背景：当前跳一跳运行态里地块视觉尺寸偏小，玩家反馈“很难跳上去”，但仅放大前端展示会造成画面和后端裁决脱节。
-- 决策：`jump-hop` 运行态的地块视觉尺寸、`width/height` 玩法世界尺寸以及 `landingRadius/perfectRadius` 同步乘以 2；前端平台渲染抽成统一尺寸 helper，保证单测可以直接校验放大结果。
+- 决策：`jump-hop` 运行态的地块视觉尺寸、`width/height` 玩法世界尺寸以及 `landingRadius/perfectRadius` 同步乘以 2；前端平台渲染抽成统一尺寸 helper，保证单测可以直接校验放大结果。后续校正：正式命中只看下一块可见顶面 footprint，不能让已 `2x` 归一化的 `width/height` 再把命中区二次放大；当前 footprint 使用归一化后宽度 28% / 高度 18% 的菱形，相当于旧未放大视觉规格的 56% / 36%，地块侧面、阴影和外沿不算正确落点。
 - 影响范围：`server-rs/crates/module-jump-hop/src/application.rs`、`src/services/jump-hop/jumpHopRuntimeModel.ts`、`src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx`、对应定向测试。
 - 验证方式：`npm test -- src/services/jump-hop/jumpHopRuntimeModel.test.ts src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx`、`cargo test -p module-jump-hop --manifest-path server-rs/Cargo.toml -- --nocapture`。
 - 关联文档：`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
 
 ## 2026-06-02 跳一跳起跳距离减半并加入飞行动画缓冲
 
-- 背景：用户反馈当前跳跃到目标位置需要拖得太远，且松手后缺少角色翻腾到目标地块的过渡动画，导致跳跃手感偏硬。
-- 决策：`jump-hop` 的 `chargeToDistanceRatio` 统一从 `0.004` 提升到 `0.008`，让同等跳跃距离所需拖动距离减半；前端 runtime 把“后端真实 run”和“当前屏幕显示态”拆开，松手瞬间先生成 `visualJump`，用当前角色位置作为起点、前端预测落点作为终点，播放约 `560ms` 的飞行动画；该路径不得等待后端新 run。角色弹到预测落点后若新 run 尚未返回，必须停在预测落点等待，再进入约 `1440ms` 的相机层推进过渡。推进期间地块 DOM 层和 DOM 角色层统一包在同一个 camera layer 下移动，旧当前地块自然离开视野，新预览地块从上方露出，避免 p1/p2 单独 top/left 过渡导致角色和地块不同步。相机推进必须同时使用 X/Y 偏移，从旧目标地块位置斜向滑到新当前地块聚焦位置，不能先横向瞬切居中再纵向推进。地块保留当前 / 目标 / 预览的深度尺寸差异，但该差异通过固定基准宽高上的 CSS transform scale 表达，并在相机推进期间同样使用 `1440ms` 缓动；当前态不再额外叠 CSS scale。
+- 背景：用户反馈长按蓄力版本的跳跃手感偏硬，成功后角色容易被吸回地块中心，且后端回包或相机推进时会出现飞过很远再瞬间拉回的闪现。
+- 决策：`jump-hop` 当前长按蓄力统一使用 `chargeToDistanceRatio=0.004`，相同蓄力时间的世界跳跃距离比上一轮 `0.008` 降低一半。前端 runtime 把“后端真实 run”和“当前屏幕显示态”拆开，松手瞬间先生成 `visualJump`，用当前角色位置作为起点、前端预测真实落点作为终点，播放约 `560ms` 的飞行动画；该路径不得等待后端新 run。角色弹到预测真实落点后若新 run 尚未返回，必须停在预测真实落点等待。成功落地后角色位置必须保留 `lastJump.landedX/landedY` 映射出的真实偏移，不得吸附回目标地块中心；飞行动画结束后保留约 `300ms` 落地停顿，再启动相机推进。相机推进以旧窗口真实落点和新窗口真实落点为锚点，使用约 `1440ms` 过渡；推进期间地块 DOM 层和 DOM 角色层统一包在同一个 camera layer 下移动，旧当前地块自然离开视野，新预览地块从上方露出，避免 p1/p2 单独 top/left 过渡导致角色和地块不同步。相机推进必须同时使用 X/Y 偏移，不能先横向瞬切居中再纵向推进。地块保留当前 / 目标 / 预览的深度尺寸差异，但该差异通过固定基准宽高上的 CSS transform scale 表达，并在相机推进期间同样使用 `1440ms` 缓动；当前态不再额外叠 CSS scale。
 - 影响范围：`server-rs/crates/module-jump-hop/src/application.rs`、`src/services/jump-hop/jumpHopRuntimeModel.ts`、`src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx`、跳一跳运行态定向测试。
 - 验证方式：`npm test -- src/services/jump-hop/jumpHopRuntimeModel.test.ts src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx`、`cargo test -p module-jump-hop --manifest-path server-rs/Cargo.toml -- --nocapture`、`npm run check:encoding`。
 - 关联文档：`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
@@ -2467,6 +2492,14 @@
 - 验证方式：跳一跳运行态 / 结果页测试需要断言角色图片 src 为 `/branding/jump-hop-taonier-character.png`，并确认旧默认角色 fallback 不再出现。
 - 关联文档：`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
 
+## 2026-06-12 跳一跳地块间距以当前最远视觉距离为上限随机
+
+- 背景：跳一跳服务端路径已有随机距离雏形，但前端可见窗口把目标地块固定投影到 `47%` 屏幕高度，导致用户看到的地块间距仍像固定值，无法调出“近到远”的节奏变化。
+- 决策：各难度当前 `max_gap` 保持为最大世界间距，最小间距固定为 `max_gap * 55%`，服务端按 seed 在该非零区间内随机生成下一块；前端 `buildJumpHopVisiblePlatforms` 必须用相邻地块真实世界距离缩放屏幕 X/Y 投影，最大距离沿用当前最远 45 度视觉位置，较近距离沿同一 45 度方向靠近当前块，不能再把目标块强制固定在同一屏幕坐标。
+- 影响范围：`server-rs/crates/module-jump-hop/src/application.rs`、`src/services/jump-hop/jumpHopRuntimeModel.ts`、跳一跳运行态测试、PRD 和平台玩法链路文档。
+- 验证方式：`cargo test -p module-jump-hop --manifest-path server-rs/Cargo.toml -- --nocapture`、`npm run test -- src/services/jump-hop/jumpHopRuntimeModel.test.ts src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx`。
+- 关联文档：`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
+
 # 2026-05-20 陶泥儿主视觉配色回收为暖白/陶土橙
 
 - 背景：用户要求只替换产品各界面的 UI 颜色，不改布局，并以两张陶泥儿主视觉图作为配色依据。
@@ -2667,6 +2700,14 @@
 - 验证方式：`cargo test -p module-puzzle --manifest-path server-rs/Cargo.toml validate_publish_requirements`、`cargo test -p api-server --manifest-path server-rs/Cargo.toml puzzle_image_generation_builds_fallback_session_from_levels_snapshot`、`cargo test -p api-server --manifest-path server-rs/Cargo.toml puzzle_image_generation_fallback_session_ready_when_asset_pack_complete`、`npm run check:encoding`。
 - 关联文档：`docs/technical/【后端架构】PuzzlePublishAssetGate收紧计划-2026-06-04.md`、`docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
 
+## 2026-06-12 跳一跳判定范围必须和视觉顶面对齐
+
+- 背景：跳一跳切到 Three.js 立方体后，曾用收缩后的顶面 footprint 做成功判定，导致指示器和角色视觉上已经落在方块顶面内，但后端仍可能判失败。
+- 决策：跳一跳命中区必须严格等于当前视觉方块完整可见顶面 footprint，不论何时都不得隐藏收缩或额外放宽；如果后续调整方块视觉大小、顶面形状、相机角度、旋转或模型规格，后端裁决、前端落点指示器和 Three.js 顶面脚点投影必须同步更新。
+- 影响范围：`module-jump-hop` 后端裁决、`jumpHopRuntimeModel` 前端预测、运行态指示器、飞行动画、PRD 和平台链路文档。
+- 验证方式：边缘落点只要仍在完整视觉顶面内必须判成功；超出完整视觉顶面才失败。运行 `cargo test -p module-jump-hop --manifest-path server-rs/Cargo.toml -- --nocapture` 与 `npm run test -- src/services/jump-hop/jumpHopRuntimeModel.test.ts src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx`。
+- 关联文档：`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
+
 ## 2026-06-04 Platform Profile Wallet Delta Model 收口
 
 - 背景：`PlatformEntryFlowShellImpl.tsx` 内联维护钱包余额归一、本地 delta 乐观更新和服务端 dashboard 刷新后的 delta 抵消，壳层需要理解余额非负、整数截断、借贷方向和服务端快照对账。
@@ -2859,8 +2900,8 @@
 
 ## 2026-06-16 图片画布图标素材与角色生成支持双图片模型
 
-- 背景：图片画布需要一次生成多枚 UI 图标素材，并保证生成后能按用户输入顺序命名、拆成独立透明素材铺回画布；角色形象生成也需要和图标素材共用同一套图片模型选择、比例和大小口径。
-- 决策：底部 `生成图标素材` 入口创建一叠空白图标占位和独立面板；图标规范参考图只允许绑定 `assetKind="icon-spec"`。`生成角色形象` 与 `生成图标素材` 均支持 VectorEngine `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`，用户在两类面板中切换过模型后下一次打开继续沿用上次模型。前端提交 `model`、`aspectRatio`、`imageSize`；后端不再按图标数量分 `512x512/1024x1024`，而是按模型归一尺寸：`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，把参考图写成 `inline_data`，并在 `generationConfig.imageConfig` 写入比例和大小，`0.5K` 传 `"512"`；`gpt-image-2` 无参考图走 generations，有参考图走 edits，按文档支持的 `size` 字符串映射。图标素材仍先生成绿幕 spritesheet，再由 `platform-image` 绿幕去背并按 8 邻域连通域从上到下、从左到右拆分。成品图标图层写入 `assetKind="icon"`，角色图层写入 `assetKind="character"`。
+- 背景：图片画布需要一次生成多枚 UI 图标素材，并以一个透明图集回填画布；角色形象生成也需要和图标素材共用同一套图片模型选择、比例和大小口径。
+- 决策：底部 `生成图标素材` 入口创建一叠空白图标占位和独立面板；图标规范参考图只允许绑定 `assetKind="icon-spec"`。`生成角色形象` 与 `生成图标素材` 均支持 VectorEngine `gemini-3.1-flash-image-preview`（UI 显示 `nanobanana2`）和 `gpt-image-2`，默认 `nanobanana2`，用户在两类面板中切换过模型后下一次打开继续沿用上次模型。前端提交 `model`、`aspectRatio`、`imageSize`；后端不再按图标数量分 `512x512/1024x1024`，而是按模型归一尺寸：`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，把参考图写成 `inline_data`，并在 `generationConfig.imageConfig` 写入比例和大小，`0.5K` 传 `"512"`；`gpt-image-2` 无参考图走 generations，有参考图走 edits，按文档支持的 `size` 字符串映射。图标素材先生成绿幕 spritesheet，再由 `platform-image` 绿幕去背后作为 `assetKind="icon-spritesheet"` 图集回填；角色图层写入 `assetKind="character"`。
 - 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、`src/components/image-editor/useImageCanvasGenerationWorkflow.ts`、`src/services/image-editor/editorProjectClient.ts`、`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/platform-image/src/vector_engine/*`、`server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs`、图片画布技术方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts src/services/image-editor/editorProjectClient.test.ts`、`cargo test -p api-server editor_generation_dimensions_follow_model_options --manifest-path server-rs/Cargo.toml`、`cargo test -p platform-image nanobanana_generate_content --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 关联文档：`docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
@@ -2876,7 +2917,7 @@
 ## 2026-06-16 图片画布图片信息页不展示生图 Prompt
 
 - 背景：图片画布中每张生成图片的信息页原来展示 `Prompt` 和复制 Prompt，但该字段可能是后端组装后的生图提示词，不适合作为用户可见的图片输入信息。
-- 决策：图片信息页删除生图 Prompt 展示和复制入口，改为展示生成时的用户面板输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色规范、常规参考图、图标规范和修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，不得回退展示内部 Prompt。
+- 决策：图片信息页删除生图 Prompt 展示和复制入口，改为展示生成时的用户面板输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色规范、常规参考图、图标规范和修改参考图等参考图卡片，并只允许“复制信息”复制当前可见字段。旧数据或上传图片没有输入快照时显示 `-`，不得回退展示内部 Prompt。
 - 影响范围：`src/components/image-editor/ImageCanvasEditorView.tsx`、图片画布 layout snapshot、图片画布技术方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx` 应覆盖图片信息页无 `Prompt`、无 `复制Prompt`，并展示普通生成、角色生成、图标素材和修改结果的输入快照。
 - 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
@@ -2908,7 +2949,7 @@
 ## 2026-06-17 图片画布生成器快照纳入画布布局
 
 - 背景：生成占位图和生成器对话框里包含用户输入、参数、参考图、占位框位置和生成结果绑定，刷新后丢失会让已生成图片无法回到 Lovart 式跟随编辑状态。
-- 决策：生成器对象统一作为 `editor_canvas` 布局 JSON 的 `itemType: "generation-dialog"` 项保存，不新增表；成功生成后仍保留生成器快照和最后占位框位置，并通过 `generatedLayerId` 锚定到成品图层，渲染时不重复显示灰色占位框。图片类生成结果同步写入账号级素材库；视频结果当前只作为画布视频资源保存。
+- 决策：生成器对象统一作为 `editor_canvas` 布局 JSON 的 `itemType: "generation-dialog"` 项保存，不新增表；成功生成后仍保留生成器快照和最后占位框位置，并通过 `generatedLayerId` 锚定到成品图层，渲染时不重复显示灰色占位框。图片类和生成视频结果同步写入账号级素材库；生成视频素材当前没有独立 poster 字段，素材栏以视频图标叠层展示。
 - 影响范围：图片画布 layout 序列化 / hydrate、生成工作流、生成器渲染、项目自动保存、素材库回填和编辑器技术方案。
 - 验证方式：`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useCanvasGenerationDialogs.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`、浏览器刷新 smoke。
 - 关联文档：`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
@@ -2952,7 +2993,8 @@
 ## 2026-06-22 图片画布外部生成统一改走 worker 队列
 
 - 背景：图片画布的图片、改图、图标素材、UI 素材提取、角色动作、视频和音频生成都可能长时间等待外部 provider；如果继续由 HTTP handler 同步执行，生产只能扩 API 进程，不能独立扩生成吞吐。
-- 决策：`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 下，画板所有外部 provider 生成入口统一入 `external_generation_job`，job kind 使用 `editor_image_generation`、`editor_image_edit`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation`。worker 成功后由后端写 `editor_project_resource` / `editor_asset` / `editor_canvas.layers_json`；前端只轮询 BFF job 状态并重新读取项目快照，不从队列 payload 或本地临时状态重建完成图层。
+- 决策：`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 下，画板所有外部 provider 生成入口统一入 `external_generation_job`，job kind 使用 `editor_image_generation`、`editor_image_edit`、`editor_background_removal`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation`。worker 成功后由后端写 `editor_project_resource` / `editor_asset` / `editor_canvas.layers_json`；前端只轮询 BFF job 状态并重新读取项目快照，不从队列 payload 或本地临时状态重建完成图层。
+- 2026-06-29 补充：手动点击图层“去除背景”也属于图片画布外部 provider 任务，`/api/editor/images/background-removals` 在 queue 模式只入队 `editor_background_removal`，worker 完成后用新 resource 原地替换目标 layer。任务列表只展示服务器 `external_generation_job` 返回的任务，禁止再用前端 local task 伪造抠图进度。
 - 补充：带 `dialogId` 的 `canvasCompletion` 必须读取后端当前 layout 中的最新 generation dialog placeholder；等待期间用户移动占位时，结果层要跟随最新占位。无 dialog 的重绘 / UI 素材提取等入口使用明确的右侧完成占位；生成器已删除时不把结果重新塞回画布。
 - 影响范围：`server-rs/crates/api-server/src/editor_generation_queue.rs`、`server-rs/crates/api-server/src/external_generation_worker.rs`、`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/api-server/src/character_animation_assets.rs`、`server-rs/crates/api-server/src/vector_engine_audio_generation/generation.rs`、`src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts`、`src/services/image-editor/editorProjectClient.ts`。
 - 验证方式：`cargo test -p api-server external_generation_worker --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server editor_canvas_generation --manifest-path server-rs/Cargo.toml`、`cargo test -p shared-contracts --manifest-path server-rs/Cargo.toml`、`npm run test -- src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx src/services/image-editor/editorProjectClient.test.ts`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
@@ -3763,7 +3805,7 @@
 
 - 背景：后台需要默认进入运营数据面板，而不是服务 / 数据库状态页；看板要同时支持日 / 周 / 月筛选，并展示生产素材、泥点消耗、注册、访问和当前使用人数。
 - 决策：`apps/admin-web` 默认路由改为 `#dashboard`，原 `#overview` 保留为“服务总览”。Dashboard 统一通过 `GET /admin/api/dashboard` 读取 api-server 后端投影，不让前端绕过 BFF 直接访问 SpacetimeDB。后端不新增 SpacetimeDB schema，聚合现有 `editor_project_resource`、`profile_wallet_ledger`、`profile_dashboard_state`、`tracking_daily_stat` 和 `tracking_event`。
-- 2026-06-24 补充：Dashboard 日期控件改为起始日期 / 终止日期；`granularity=period` 使用 `startDate` / `endDate` 自定义闭区间，`day` / `week` / `month` 保留 `anchor` 兼容并由前端自动填充对应范围，页面周期切换展示为“本日 / 本周 / 本月 / 本时段”。
+- 2026-06-24 补充：Dashboard 日期控件改为起始日期 / 终止日期；`granularity=period` 使用 `startDate` / `endDate` 自定义闭区间，`day` / `week` / `month` 保留 `anchor` 兼容；前端展示“本日 / 本周 / 本月”快捷按钮，只修改起止日期并刷新，页面总计数据和时段数据分区展示。
 - 指标口径：生产素材数统计 `editor_project_resource.source_type = generated`；消耗泥点数统计 `profile_wallet_ledger.source_type = asset_operation_consume` 的负向流水绝对值；总注册用户和新增用户数均来自 `profile_dashboard_state`，其中新增用户数按 `created_at` 落入当前时间窗统计；访问次数只统计 `tracking_daily_stat.scope_kind = site`；访问人数和当前使用人数按登录用户去重，匿名访问人数需要未来补 visitor id 后才能统计。
 - 影响范围：`/admin/api/dashboard`、`shared-contracts` admin DTO、`apps/admin-web` 默认路由和 Dashboard 页面、后台运营文档。
 - 验证方式：`cargo test -p api-server --manifest-path server-rs/Cargo.toml admin`、`npm run admin-web:typecheck`、`npx vitest run apps/admin-web/src/pages/AdminDashboardPage.test.tsx apps/admin-web/src/app/adminRoutes.test.ts --reporter verbose`、`npm run check:encoding`、`git diff --check`。
diff --git a/docs/project-memory/shared-memory/pitfalls.md b/docs/project-memory/shared-memory/pitfalls.md
index 9f2bf1792..870e7bfeb 100644
--- a/docs/project-memory/shared-memory/pitfalls.md
+++ b/docs/project-memory/shared-memory/pitfalls.md
@@ -5,7 +5,6 @@
 ## 记录格式
 
 ```md
-
 ## 问题标题
 
 - 现象：看到什么错误或异常行为
@@ -15,6 +14,14 @@
 - 关联：相关文件、文档、提交或 Issue
 ```
 
+## React 测试因内部状态或实现细节正常重构就碎
+
+- 现象：修改组件结构、按钮排序、图标库 class、提示文案或 hook 内部状态名后，React 测试大量失败，但真实用户流程和对外契约没有变化。
+- 原因：测试把 `data-testid` 仪表盘、`textContent` 拼接状态、完整对象 / 数组顺序、图标 class 或长文案当成契约；这些断言绑定的是实现形状，不是用户行为或稳定边界。
+- 处理：按 `React 组件测试准则` 重写到更稳定的层级。用户流程测试断言 role / label / URL / 弹窗 / callback；hook 逻辑用 `renderHook` 直接验证公开返回契约；DTO / payload 使用关键字段或 `expect.objectContaining(...)`。只有产品明确要求的可访问语义、固定顺序或渲染边界才保留精确断言。
+- 验证：运行触达文件的定向 `vitest`，必要时追加 `npm run typecheck`、`npm run check:encoding` 和 `git diff --check`。
+- 关联：`docs/technical/【前端测试】React组件测试准则-2026-06-26.md`、`src/components/image-editor/useCanvasGenerationDialogs.test.tsx`、`src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx`。
+
 ## 图片画布素材库删除要匹配 sourceResourceId
 
 - 现象：素材库中删除了已经生成并进入素材库的资源，但画布上对应图层仍然存在，刷新后还可能从已保存布局里恢复。
@@ -31,14 +38,22 @@
 - 验证：`creationShowcaseModel.test.ts` 覆盖同源同媒体副本只展示原件；`ImageCanvasEditorAssetsIntegration.test.tsx` 覆盖拖拽生成素材到画布时继续提交 `sourceResourceId`；`cargo check -p spacetime-module --manifest-path server-rs/Cargo.toml` 确认后端资源复用 / 精选过滤逻辑可编译。
 - 关联：`server-rs/crates/spacetime-module/src/editor_project_storage.rs`、`src/components/creation-home/creationShowcaseModel.ts`、`src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx`。
 
-## 陶泥儿精选作者丢失先查公开资源 owner 字段
+## 陶泥儿精选作者丢失先查公开作者展示字段
 
-- 现象：`/creation` 的 `陶泥儿精选` 卡片和预览弹窗中，素材下方作者 id 消失或只显示占位。
-- 原因：精选数据源来自公开 `editor_project_resource` 快照；如果 SpacetimeDB read model、`spacetime-client` mapper 或 `api-server` payload 任一层漏传 `owner_user_id` / `ownerUserId`，前端作者兜底就没有真实值可显示。
-- 处理：`EditorProjectResourceSnapshot`、`EditorProjectResourceRecord` 和 `EditorProjectResourcePayload` 需要一路保留 owner 字段；前端 `creationShowcaseModel` 在没有作者昵称字段时读取 `ownerUserId` 作为作者兜底。
-- 验证：`creationShowcaseModel.test.ts` 覆盖 owner id 作者兜底；`editorProjectClient.test.ts` 覆盖公开精选接口客户端保留 `ownerUserId`；后端改 read model 后运行 `npm run spacetime:generate`、`cargo check -p spacetime-client -p api-server --manifest-path server-rs/Cargo.toml` 和 `npm run check:spacetime-schema`。
+- 现象：`/creation` 的 `陶泥儿精选` 卡片和预览弹窗中，素材下方作者名消失、只显示占位，或错误显示内部用户 ID。
+- 原因：精选数据源来自公开 `editor_project_resource` 快照；如果 SpacetimeDB read model、`spacetime-client` mapper 或 `api-server` payload 任一层漏传 `authorDisplayName` / `display_name` 或 `authorPublicUserCode` / 陶泥号，前端没有可展示的公开作者字段。`owner_user_id` / `ownerUserId` / `user_id` 是内部归属字段，不是公开作者名兜底。
+- 处理：`EditorProjectResourceSnapshot`、`EditorProjectResourceRecord` 和 `EditorProjectResourcePayload` 需要一路保留公开作者展示字段；前端 `creationShowcaseModel` 优先显示 `authorDisplayName` / `display_name`，没有展示名时显示 `authorPublicUserCode` / 陶泥号，绝不能兜底到内部 `ownerUserId` / `user_id`。
+- 验证：`creationShowcaseModel.test.ts` 覆盖展示名优先、陶泥号兜底和内部 owner/user id 不展示；`editorProjectClient.test.ts` 覆盖公开精选接口客户端保留公开作者字段；若改动 SpacetimeDB read model，再运行 `npm run spacetime:generate`、`cargo check -p spacetime-client -p api-server --manifest-path server-rs/Cargo.toml` 和 `npm run check:spacetime-schema`。
 - 关联：`server-rs/crates/spacetime-module/src/editor_project_storage.rs`、`server-rs/crates/spacetime-client/src/mapper/editor_project.rs`、`server-rs/crates/api-server/src/editor_project.rs`、`src/components/creation-home/creationShowcaseModel.ts`。
 
+## 陶泥儿精选瀑布流变宽先查 multi-column 容器宽度
+
+- 现象：release `/creation` 桌面端精选卡片明显变宽，第三列被裁到屏幕外，页面内部可横向滑动；dev 看起来正常。
+- 原因：精选瀑布流使用 `column-count`，当它作为 grid item 时如果没有显式 `width: 100%` / `min-width: 0`，Chrome 会用多列内容的 intrinsic width 反向撑开 grid track。线上实测 1920 视口下 section 为 `1296px`，waterfall 被撑到约 `2048px`，单卡宽约 `672px`。
+- 处理：保留 multi-column 瀑布流时，`.creation-landing__asset-waterfall` 必须显式约束 `width: 100%` 和 `min-width: 0`；不要只看单张图片天然尺寸或改卡片宽度。
+- 验证：Playwright / CSSOM 检查 `.creation-landing__section`、`.creation-landing__asset-waterfall`、首张 `.creation-landing__asset-card` 的 `getBoundingClientRect()`，waterfall 宽度应等于 section 宽度。
+- 关联：`src/index.css`、`src/components/creation-home/CreationLandingView.tsx`。
+
 ## 画板外部生成排队超时不是失败
 
 - 现象：画板发起付费图片生成后，前端弹出 `生成任务仍在队列中,请稍后刷新画布查看结果`，但后端任务仍在队列或执行中，后续可能正常完成。
@@ -47,6 +62,14 @@
 - 验证：画板生成 workflow 测试覆盖 queueState 持续 `running` 到前端等待窗口结束时，不进入 failed、不显示该排队文案、不添加本地临时结果层。
 - 关联：`src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts`、`src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx`。
 
+## 画板参考图 objectKey 必须先做归属校验
+
+- 现象：画板生成、快速编辑、图标素材或 UI 素材提取如果允许直接提交 generated objectKey，用户只要知道其他账号的私有 objectKey，就可能让 api-server 签名读取并送给外部生成供应商。
+- 原因：Data URL 参考图可以直接解析，但 objectKey 是服务端私有对象引用；只校验 generated 前缀、mime 和大小不能证明它属于当前账号。
+- 处理：所有编辑器参考图入口统一走 `parse_editor_reference_image(state, owner_user_id, source)`；objectKey 分支必须先在当前账号的项目资源、素材库资产或 `asset_object` 中匹配 owner / bucket / key，再读取 OSS。快速编辑和图标素材额外参考图也必须真实传到 provider，不只写 metadata。
+- 验证：`cargo test -p api-server --manifest-path server-rs/Cargo.toml editor_reference`，并用前端 workflow 测试覆盖 `referenceImageSrcs` 进入快速编辑 / 图标生成请求。
+- 关联：`server-rs/crates/api-server/src/editor_project.rs`、`server-rs/crates/spacetime-client/src/assets.rs`、`src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts`。
+
 ## 编辑器生成按钮显示泥点后仍要查真实钱包预扣
 
 - 现象：画板生成按钮显示 `N泥点`，后端也能按模型配置计算出价格，但用户点击后钱包余额不变。
@@ -79,6 +102,14 @@
 - 验证：`ImageCanvasGenerationLayerModel` 应断言动作结果 `src` 为首帧且 `mediaType="image-sequence"`；画布集成测试应出现 `画布序列帧：角色动作` 图片播放器，不应出现角色动作 `<video>`；导出测试应断言角色动作下载和画布素材导出都包含序列帧 ZIP / frames 目录。
 - 关联：`src/components/image-editor/ImageCanvasGenerationLayerModel.ts`、`src/components/image-editor/ImageCanvasWorldView.tsx`、`src/components/image-editor/ImageCanvasExportModel.ts`、`server-rs/crates/api-server/src/character_animation_assets.rs`、`docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md`。
 
+## 图片画布序列帧播放不要复用普通图片淡入样式
+
+- 现象：角色动作序列帧播放时看起来像每帧之间在渐变或闪烁。
+- 原因：序列帧播放器每帧切换可低至 40ms，默认约 125ms 一帧；如果帧 `<img>` 复用普通图片的 `image-canvas-editor__layer-image--loading/--loaded`，其中 `opacity 180ms ease` 会跨过下一帧切换，形成类似交叉淡入淡出的视觉。
+- 处理：`ImageCanvasImageSequenceFrame` 只使用序列帧专属 class，帧显隐用同步 `opacity` 硬切，并显式 `transition: none`；保留“下一帧未加载时继续显示上一帧”的 readiness gate。
+- 验证：`ImageCanvasWorldView.test.tsx` 应断言序列帧 `<img>` 不带普通图片 loading/loaded class，且 style 中 `transition` 为 `none`。
+- 关联：`src/components/image-editor/ImageCanvasWorldView.tsx`、`src/index.css`、`src/components/image-editor/ImageCanvasWorldView.test.tsx`。
+
 ## Vidu 文生音频线上网关可能要求 sound 字段
 
 - 现象：画板点击 `生成游戏音效` 后，请求返回 `Failed to deserialize the JSON body into the target type: missing field sound`。
@@ -127,6 +158,14 @@
 - 验证：`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/ImageCanvasInteractionModel.test.ts`，并在多素材画布拖拽时确认参考线仍能命中邻近图层且 pointermove 不再明显掉帧。
 - 关联：`src/components/image-editor/ImageCanvasEditorModel.ts`、`src/components/image-editor/ImageCanvasInteractionModel.ts`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
+## 图片画布视口拖动卡顿先查自动保存和小地图合帧
+
+- 现象：素材多或序列帧多时，拖动小地图视口框或手型平移明显卡顿，像是接口慢或 CSS 动画掉帧，但网络请求不一定异常。
+- 原因：`pointermove` 高频修改 `viewport` 会触发画布重渲染、小地图模型重算和工程持久化 effect；持久化链路会同步 `serializeCanvasLayout`、`JSON.stringify` 并写 sessionStorage。远端 PATCH 有防抖也挡不住本地同步缓存写入。
+- 处理：把 viewport 拖动标记为临时交互；拖动中只更新画布显示，不触发项目保存、session cache 写入或封面快照上传，`pointerup` / `pointercancel` 后保存最终 viewport。小地图拖动的 `updateViewportFromMinimapDrag` 必须用 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧。
+- 验证：`npm run test -- src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx --reporter verbose` 应覆盖小地图拖动合帧、平移 / 小地图 viewport 交互边界，以及拖动期间不写 sessionStorage / 不调用 `saveEditorProjectLayout`。
+- 关联：`src/components/image-editor/useImageCanvasViewportControls.ts`、`src/components/image-editor/useImageCanvasStageInteractions.ts`、`src/components/image-editor/useImageCanvasProjectPersistence.ts`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
 ## 图片编辑器宣发素材生成器刷新后不要丢快照
 
 - 现象：图片画布刷新后，宣发素材生成卡片消失，或卡片仍在但游戏名、分类、描述和参考图丢失。
@@ -139,7 +178,7 @@
 
 - 现象：图片画布快速编辑站内示例图、历史 generated 图或 OSS generated 图时，后端返回 `修改图片参考图必须是图片 Data URL。`。
 - 原因：快速编辑直接把图层 `src` 塞进 `/api/editor/images/generations` 的 `referenceImageSrcs`；默认示例图和部分持久化图层的 `src` 是 `/creation-type-references/*.webp`、`/generated-*` 或 OSS URL，而 `api-server` 的编辑参考图解析只接收 `data:image/*;base64,...`。
-- 处理：前端统一通过 `resolveEditorImageReferenceDataUrl(...)` 在提交前读取图片字节并转成图片 Data URL；Data URL 原样透传，`/generated-*` 和 generated OSS URL 走 `/api/assets/read-bytes` 避免 CORS，普通 public 路径直接 fetch。
+- 处理：前端统一通过 `resolveEditorImageReferenceDataUrl(...)` 在提交前读取图片字节并转成图片 Data URL；Data URL 原样透传，`/generated-*` 和 generated OSS URL 先走 `/api/assets/read-url` 换签后由浏览器直读 OSS，直读失败时才 fallback 到 `/api/assets/read-bytes`，普通 public 路径直接 fetch。
 - 验证：`npm run test -- src/services/image-editor/editorImageReference.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx -t "editorImageReference|converts non-data-url quick edit source images before submitting references"`。
 - 关联：`src/services/image-editor/editorImageReference.ts`、`src/components/image-editor/ImageCanvasEditorView.tsx`、`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
 
@@ -183,6 +222,14 @@
 - 验证：Network 中 `/api/editor/projects*`、`PATCH /api/editor/projects/{id}`、素材库接口不应出现 `data:image` / `data:video` / `data:audio`；素材库和图层面板缩略图都能换签显示；`npm run test -- src/components/image-editor/ImageCanvasEditorModel.test.ts src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/ImageCanvasAssetRowView.test.tsx src/components/common/PlatformMediaFrame.test.tsx src/services/assetReadUrlService.test.ts src/services/image-editor/editorProjectClient.test.ts`，后端跑 `cargo test -p api-server editor_project --manifest-path server-rs/Cargo.toml`。
 - 关联：`server-rs/crates/api-server/src/editor_project.rs`、`src/components/image-editor/ImageCanvasEditorModel.ts`、`src/components/image-editor/useImageCanvasProjectPersistence.ts`、`src/components/common/PlatformMediaFrame.tsx`、`src/services/assetReadUrlService.ts`。
 
+## 图片画布项目封面上传失败要有本地展示兜底
+
+- 现象：画布项目已反复打开、保存或操作，但 `/project` 列表卡片仍只显示“项目”占位，没有封面图。
+- 原因：项目封面快照需要先在浏览器生成 Blob，再上传 OSS 并创建 `assetKind: "project-cover-snapshot"` 项目资源；本地 dev 或 OSS CORS 异常时，Blob 生成成功但上传失败，服务端不会产生正式封面资源。
+- 处理：服务端 `project-cover-snapshot` 仍是跨设备正式封面；前端在生成封面 Blob 后立即把 Blob 以项目 ID 写入 IndexedDB，仅作为当前浏览器展示兜底。项目列表读取时优先使用服务端封面资源，其次使用本地 IndexedDB 封面，最后才退回可见画布图层或占位。IndexedDB 兜底不得写入项目快照、不得进入 `editor_project_resource`，也不得替代 OSS / asset object 正式持久化。
+- 验证：`npm run test -- src/components/project/ProjectCanvasCover.test.ts src/components/project/ProjectGalleryView.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx` 覆盖服务端封面优先、本地缓存兜底、上传失败仍保留本地封面缓存；浏览器 smoke 可在 `/project` 对没有服务端封面的项目写入 `genarrative-editor-project-covers` IndexedDB 记录，刷新后应显示 `blob:` 封面图。
+- 关联：`src/services/image-editor/editorProjectCoverCache.ts`、`src/components/project/ProjectGalleryView.tsx`、`src/components/project/ProjectCanvasCover.tsx`、`src/components/image-editor/useImageCanvasProjectPersistence.ts`。
+
 ## 图片画布框选预览要复用源图换签缓存
 
 - 现象：UI 设计素材提取或快速编辑框选时，画布上的红色框选还在，但底部“框选区域预览”卡片变成空白。
@@ -247,6 +294,14 @@
 - 验证：`npm run test -- src/components/image-editor/ImageCanvasGenerationPlacementModel.test.ts src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`。
 - 关联：`src/components/image-editor/ImageCanvasGenerationPlacementModel.ts`、`src/components/image-editor/useImageCanvasGenerationWorkflow.ts`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
 
+## 图片画布生成类 composer 打开后必须自动进入可见安全区
+
+- 现象：生成器、快速编辑、裁扩或角色动作面板打开后，面板可能在当前画布视口外，或被底部工具栏 / 左下 dock 盖住，用户只看到一部分甚至完全看不到输入框。
+- 原因：placement 只负责选择画布世界坐标里的占位落点，面板实际 DOM 宽高、`translateX(-50%)`、移动端 fixed 样式和工具栏覆盖区域没有反向修正 viewport。
+- 处理：所有画布内 composer / 面板渲染后统一走 `resolveViewportForOverlayVisibility(...)`，用真实 DOM 矩形和工具栏安全边界只平移 viewport；新增入口不要在各自按钮 handler 里写独立偏移。
+- 验证：`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/useImageCanvasGenerationSurface.test.tsx`。
+- 关联：`src/components/image-editor/ImageCanvasOverlayModel.ts`、`src/components/image-editor/useImageCanvasGenerationSurface.tsx`、`docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md`。
+
 ## 图片画布图片改造也必须创建独立生成器占位
 
 - 现象：点击图片图层的“改造”后，输入框直接挂在原图上，提交时既不像其它生成入口一样有独立占位，也容易让用户误以为会覆盖源图。
@@ -270,6 +325,7 @@
 - 处理：Windows 本地 dev 脚本应把 `RUSTC_WRAPPER` 和 `CARGO_BUILD_RUSTC_WRAPPER` 显式设为空字符串，让 Cargo 覆盖项目配置并直连真实 rustc；Linux 保持 `/usr/bin/env` 绕过 sccache。
 - 验证：`npm run test -- scripts/dev.test.ts -t "Windows 下本地 dev Rust env 用空 wrapper 覆盖项目 sccache"`，并用 `npm run dev:api-server` 拉起后访问实际 api 端口的 `/healthz` 返回 200。
 - 关联：`scripts/dev.mjs`、`scripts/dev.test.ts`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`。
+
 ## Pingora 直连 80/443 不能只改 env
 
 - 现象：`/etc/genarrative/pingora-gateway.env` 已把 `GENARRATIVE_PINGORA_GATEWAY_TLS_LISTEN` / `HTTP_REDIRECT_LISTEN` 改到 `0.0.0.0:443` / `0.0.0.0:80`，但 `genarrative-pingora-gateway.service` 启动失败，日志出现低端口绑定权限错误。
@@ -343,6 +399,14 @@
 - 验证：重启 worker 后日志应先出现“非 HTTP 进程跳过 SpacetimeDB 认证快照恢复”，随后出现 `external generation worker 已启动`；同一时间窗口不应再因为 `export_auth_store_snapshot_from_tables` 缺表而阻止 job claim。HTTP `api-server` 的认证恢复日志和 503 降级语义保持不变。
 - 关联：`server-rs/crates/api-server/src/main.rs`、`server-rs/crates/api-server/src/external_generation_worker.rs`、`server-rs/crates/api-server/src/external_generation_worker_controller.rs`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`。
 
+## 本地旧 external-generation-worker 会抢队列并暴露成 procedure 超时
+
+- 现象：角色 / 画布生成的外部 provider 与 OSS 上传已成功，但 worker 写回 `editor_project_resource` 等业务资源时报 `SpacetimeDB procedure 调用超时`，日志里可能还能看到旧 worker 二进制对 procedure 返回值做 BSATN 反序列化失败。
+- 原因：本地 `npm run dev` / `npm run dev:api-server` 默认 `GENARRATIVE_PROCESS_ROLE=all`，会自己消费队列；如果之前手动启动的同仓库、同 database `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程没有退出，旧二进制会继续 claim 新 job，schema / binding 已更新的当前进程反而没有拿到这次任务。
+- 处理：Linux 本地默认 `all` 角色启动前，`scripts/dev.mjs` 会扫描同仓库、同 SpacetimeDB server / database、同 `server-rs/target/debug/api-server` 的遗留 `external-generation-worker` 并停止；显式 `GENARRATIVE_PROCESS_ROLE=api` 做生产式拆分验证时不清理独立 worker。
+- 验证：`ps -eo pid,ppid,lstart,cmd | rg 'server-rs/target/debug/api-server'` 只应看到当前 `all` 或显式拆分下预期的进程；`/healthz` 和 `/readyz` 成功后，生成 job 应由当前进程消费并把业务资源写回。
+- 关联：`scripts/dev.mjs`、`scripts/dev.test.ts`、`server-rs/crates/api-server/src/external_generation_worker.rs`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`。
+
 ## 外部生成 worker 业务写回必须同事务校验 lease guard
 
 - 现象：worker `complete/fail` 已校验 `worker_id + lease_token`，但如果玩法 session / work profile 写回在此之前单独调用，过期 worker 仍可能先写入业务状态，随后才在 job complete/fail 阶段失败；带计费包装的旧 worker 还可能因为 stale guard 错误触发补偿退款。
@@ -488,6 +552,14 @@
 - 验证：`cargo test -p platform-image --manifest-path server-rs/Cargo.toml vector_engine_send_retry_policy -- --nocapture`、`cargo test -p platform-image --manifest-path server-rs/Cargo.toml vector_engine_image_edit_retries_send_timeout_once_and_succeeds`、`cargo check -p api-server --manifest-path server-rs/Cargo.toml`；查询 `tracking_event` 时失败记录应能看到触发者 `user_id` 和可用的 `profile_id`。
 - 关联：`server-rs/crates/platform-image/src/vector_engine/client.rs`、`server-rs/crates/api-server/src/external_api_audit.rs`、`server-rs/crates/api-server/src/openai_image_generation.rs`、`docs/【开发运维】本地开发验证与生产运维-2026-05-15.md`。
 
+## 跳一跳 Three.js 地块 UV 顶面要映射到 Z 轴
+
+- 现象：跳一跳地块使用六面 UV 贴图后，看起来像贴图位置贴歪，顶面显示侧面纹理，或者旧单张地块图被拉到立方体多个面上。
+- 原因：运行态以 `z` 作为立方体竖直高度和相机下压方向，但 Three.js `BoxGeometry` / `RoundedBoxGeometry` 的默认材质 group 顺序把 `+Y` 当 top；如果直接按 `right / left / top / bottom / front / back` 写材质，玩法逻辑的 `top` 会贴到侧面。旧作品没有完整 `faceAssets` 时，把单张旧贴图强行作为 3D 六面 fallback 也会被误认为 UV 贴歪。
+- 处理：Three 平台层只在 `tileAssets[].faceAssets` 六面完整时启用；材质数组按 Three group 顺序写入 `right / left / back / front / top / bottom`，把逻辑 `top` 映射到 `+Z` 顶面，并按每面 UV 方向做翻转校正；旧单图作品继续走 DOM 图片 / 原型兜底层。
+- 验证：`npm run test -- src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx` 应覆盖材质顺序、UV 翻转和旧单图不启用 Three 贴面；`cargo test -p api-server jump_hop_tile_atlas_slicing --manifest-path server-rs/Cargo.toml -- --nocapture` 应覆盖 UV 安全边裁切。
+- 关联：`src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx`、`server-rs/crates/api-server/src/jump_hop.rs`、`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
+
 ## “我的”页每日任务卡不要硬编码进度，也不要跨日保留旧状态
 
 - 现象：用户完成或领取每日任务后，任务中心弹窗里的任务状态已经变化，但“我的”页卡片仍显示 `0 / 1` 和“去完成”。
@@ -734,11 +806,11 @@
 - 验证：`cargo test -p platform-image --test generated_asset_sheets --manifest-path server-rs/Cargo.toml` 通过，且 `cargo check -p api-server --manifest-path server-rs/Cargo.toml` 保持绿灯。
 - 关联：`server-rs/crates/platform-image/src/generated_asset_sheets/`、`server-rs/crates/api-server/src/generated_asset_sheets.rs`、`docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`。
 
-## 图片画布图标素材切片不要把断开的高光阴影当独立图标
+## 图片画布 UI 提取素材切片不要把断开的高光阴影当独立图标
 
-- 现象：图片画布生成图标素材或提取 UI 素材后，右侧素材库出现很小的废图；主体图标的阴影、反光、高光或小装饰不完整。
+- 现象：图片画布提取 UI 素材后，右侧素材库出现很小的废图；主体图标的阴影、反光、高光或小装饰不完整。
 - 原因：图标 spritesheet 切片按 alpha 连通域识别素材，模型常把软阴影、高光、小星星等画成与主体断开的透明块；如果直接逐连通域出图，小碎片会抢占图标顺序，主体也会缺边缘装饰。
-- 处理：在 `platform-image` 的 `sheet.rs` 里先合并靠近主体的辅助连通域，再过滤孤立小碎片，最后给裁剪框保留安全 padding。不要在前端素材卡或画布层里修已经切坏的 PNG。
+- 处理：在 `platform-image` 的 `sheet.rs` 里先合并靠近主体的辅助连通域，再过滤孤立小碎片，最后给裁剪框保留安全 padding。不要在前端素材卡或画布层里修已经切坏的 PNG。`生成图标素材` 入口只回填扣绿后的整张图集，不再拆分独立图标。
 - 验证：`cargo test -p platform-image generated_asset_sheets --manifest-path server-rs/Cargo.toml` 覆盖断开的高光合并和孤立小碎片过滤；调用方补跑 `cargo test -p api-server editor_icon --manifest-path server-rs/Cargo.toml`。
 - 关联：`server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs`、`server-rs/crates/api-server/src/editor_project.rs`。
 
@@ -1546,7 +1618,6 @@
 - 验证：`cargo test -p api-server phone_auth_sms_provider_errors_keep_upstream_http_semantics --manifest-path server-rs/Cargo.toml`，真实 provider 频控时接口不再返回 `500`。
 - 关联：`server-rs/crates/module-auth/src/errors.rs`、`server-rs/crates/api-server/src/phone_auth.rs`、`docs/technical/PHONE_SMS_PROVIDER_ERROR_HTTP_MAPPING_FIX_2026-05-08.md`。
 
-
 ## 本地短信 smoke 先确认 SMS provider
 
 - 现象：浏览器里短信验证码发送成功，但提交 `123456` 仍然报验证码错误，或者短信登录后又回到未登录态。
@@ -1554,6 +1625,7 @@
 - 处理：本地只做 UI / 账号链路 smoke 时，把 `.env.local` 显式设为 `SMS_AUTH_PROVIDER=mock` 且配置 `SMS_AUTH_MOCK_VERIFY_CODE=123456`，然后重启 `npm run dev` 或 `npm run dev:api-server`。要做真实短信联调时，再切回 `SMS_AUTH_PROVIDER=aliyun` 并重启。
 - 验证：`POST /api/auth/phone/send-code` 应返回 `providerRequestId=mock-request-id`；`POST /api/auth/phone/login` 用 `123456` 应返回 `200` 且 `user.loginMethod=phone`。浏览器侧短信登录成功后，会先进入邀请码弹窗或我的页面，不应再提示“验证码错误”。
 - 关联：`scripts/dev-utils.mjs`、`scripts/dev-utils.test.ts`、`scripts/dev.mjs`、`server-rs/crates/api-server/src/config.rs`。
+
 ## 手机验证码登录成功后又瞬间回到未登录
 
 - 现象：手机号验证码登录先成功，随后 UI 又闪回“未登录”，登录弹窗可能重新出现。
@@ -1951,9 +2023,9 @@
 
 ## 抓大鹅难度配置的物品种类和消除次数必须分离
 
-- 现象：历史草稿选择标准 / 硬核难度后，系统可能把 `clearCount` 当成局内物品种类数量，导致标准需要 12 种、硬核需要 20/21 种；或者把第 11 到 20 个物品持久化为第 11 到 20 行，触发“系列素材图集持久化的行列索引必须落在 n*n 范围内”。
+- 现象：历史草稿选择标准 / 硬核难度后，系统可能把 `clearCount` 当成局内物品种类数量，导致标准需要 12 种、硬核需要 20/21 种；或者把第 11 到 20 个物品持久化为第 11 到 20 行，触发“系列素材图集持久化的行列索引必须落在 n\*n 范围内”。
 - 原因：旧运行态把消除次数和类型数量绑在一起，结果页文案又同时展示“素材图片 / 局内类型”，导致前端、发布校验和 run start 口径不一致。
-- 处理：生成和持久化固定使用 20 个物品素材；运行态物品种类口径为轻松 3、标准 9、进阶 15、硬核 20，历史 `clearCount=20` 且难度为硬核的运行态仍可升为 21 组三消，但类型池不超过 20。10*10 sheet 每行两种物品、每种五个形态，持久化行列为 `row = itemIndex / 2 + 1`、`col = itemIndex % 2 * 5 + viewIndex + 1`。发布前按 `image_ready` 且有 `imageViews[]` 或 `imageSrc/imageObjectKey` 的生成素材数量阻断不足难度；试玩不阻断，但通过 `itemTypeCountOverride` 自动降到已生成 2D 素材数量。重启从已有 run 快照反推实际物品种类，保持同一局重开不变。
+- 处理：生成和持久化固定使用 20 个物品素材；运行态物品种类口径为轻松 3、标准 9、进阶 15、硬核 20，历史 `clearCount=20` 且难度为硬核的运行态仍可升为 21 组三消，但类型池不超过 20。10*10 sheet 每行两种物品、每种五个形态，持久化行列为 `row = itemIndex / 2 + 1`、`col = itemIndex % 2 * 5 + viewIndex + 1`。发布前按 `image_ready`且有`imageViews[]`或`imageSrc/imageObjectKey`的生成素材数量阻断不足难度；试玩不阻断，但通过`itemTypeCountOverride` 自动降到已生成 2D 素材数量。重启从已有 run 快照反推实际物品种类，保持同一局重开不变。
 - 验证：`npm run test -- src\components\match3d-result\Match3DResultView.test.tsx`、`cargo test -p module-match3d --manifest-path server-rs\Cargo.toml`，涉及发布 reducer 时补跑 `cargo test -p spacetime-module match3d --manifest-path server-rs\Cargo.toml`。
 - 关联：`src/components/match3d-result/Match3DResultView.tsx`、`src/services/match3d-runtime/match3dRuntimeClient.ts`、`server-rs/crates/module-match3d/src/application.rs`、`server-rs/crates/spacetime-module/src/match3d.rs`、`docs/technical/MATCH3D_DRAFT_ASSET_GENERATION_PIPELINE_2026-05-10.md`。
 
@@ -2237,10 +2309,10 @@
 
 ## 跳一跳落点辅助标识不要再用舞台高度常量拍脑袋投影
 
-- 现象：拖拽时落点辅助标识虽然会动，但看起来像静态点位漂移，和真实可落地的位置对不上。
+- 现象：按住蓄力时落点辅助标识虽然会动，但看起来像静态点位漂移，和真实可落地的位置对不上。
 - 原因：辅助标识如果只按 `stageSize.height` 和一个固定比例估算投影距离，再去跟拖拽向量合成，就会和当前地块到目标地块的真实屏幕跨度脱节；三维场景层级过高时还会把辅助点直接盖住。
-- 处理：辅助标识必须使用当前地块与目标地块之间的真实屏幕距离和后端 `chargeToDistanceRatio` 做投影，再映射到屏幕坐标；同时把辅助层 z-index 放到三维角色层之上，避免被场景层遮挡。
-- 验证：拖拽半程时辅助点应落在当前地块和目标地块之间，完整拖拽时应逼近目标地块中心；运行态截图里辅助点必须始终压在地块与角色之上。
+- 处理：辅助标识必须使用当前地块与目标地块之间的真实屏幕距离和后端 `chargeToDistanceRatio` 做投影，再映射到屏幕坐标；它只作为调参验证层随按下显示、松手或取消隐藏，不参与后端裁决和作品配置；同时把辅助层 z-index 放到三维角色层之上，避免被场景层遮挡。
+- 验证：半程蓄力时辅助点应落在当前地块和目标地块之间，完整蓄力时应逼近目标地块中心；运行态截图里辅助点必须始终压在地块与角色之上。
 - 关联：`src/services/jump-hop/jumpHopRuntimeModel.ts`、`src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx`。
 
 ## 跳一跳长按蓄力不能再消费拖拽方向
@@ -2514,6 +2586,7 @@
 - 处理：开局和补牌后的重排必须先排除现成消除，再用真实交换 / 落位模拟判断是否会产生新消除；`1x2` 永远不进入半锁定组，半锁定只允许 `1x3`、`2x2`、`2x3`。
 - 验证：`npm run test -- src/services/puzzle-clear/puzzleClearLocalRuntime.test.ts src/components/puzzle-clear-runtime/PuzzleClearRuntimeShell.test.tsx` 与 `cargo test -p module-puzzle-clear --manifest-path server-rs/Cargo.toml -- --nocapture` 通过后，开局盘面不应直接出现 completed group。
 - 关联：`src/services/puzzle-clear/puzzleClearLocalRuntime.ts`、`server-rs/crates/module-puzzle-clear/src/application.rs`。
+
 ## 推荐页作品 key 漏玩法会导致运行内容和标题作者错位
 
 - 现象：移动端推荐页进入跳一跳或敲木鱼等作品时，游戏运行内容已经切到当前作品，但下方标题、作者和头像仍显示第一条拼图或其它推荐作品。
@@ -2526,8 +2599,8 @@
 
 - 现象：跳一跳松手后如果后端很快返回下一帧 run，地块窗口会立刻前移，角色翻腾动画看起来像没播放；若同时刷新图片资产，还可能被误认为地块频闪。
 - 原因：后端 run 是规则真相，前端 runtime 又需要低延迟表现。如果 DOM 平台层直接用最新 `run.currentPlatformIndex` 渲染，后端回包会抢在动画前完成视觉切换。
-- 处理：前端保留独立 `displayRun`，松手后先进入 `isJumpAnimating=true`，角色在当前显示窗口内飞向前端预测真实落点；视觉预测必须用当前显示窗口的 current/next 地块作为方向来源，不能拿已经提前返回的后端新 run 目标配旧窗口角色，否则下一跳会朝实际目标反方向飞。飞行动画完成后再把 `displayRun` 切到最新后端 run，并进入约 `1440ms` 的 `platformAdvancing` 表现态。成功后的角色显示必须使用 `lastJump.landedX/landedY` 映射出的真实偏移，不要吸附到目标地块中心。推进期间地块 DOM 层和 DOM 角色层必须统一包在同一个 camera layer 下移动，旧当前地块先跟随相机偏移离开主视野，之后只保留在屏幕后方；不要给旧地块加独立向上 / 向下飞走 keyframes，也不要因为旧地块还在保留列表里阻塞下一跳。玩家继续向前跳时，已完成旧地块继续被新的相机推进自然带离屏幕，超过离屏阈值后销毁。相机层必须同时设置 `--jump-hop-camera-shift-x` 与 `--jump-hop-camera-shift-y`，并以旧窗口真实落点和新窗口真实落点为锚点，避免先横向瞬切居中再纵向推进；运行态相机层当前为约 `1.3x` 近距缩放。地块保留当前 / 目标 / 预览的深度尺寸差异，但深度差异必须用固定宽高 + CSS transform scale 缓动实现，不能直接改宽高瞬切；当前态不要额外叠 CSS scale。相机推进期间角色自身也不能保留 `left/top` transition，否则 `displayRun` 切换造成的角色局部坐标变更会和父级 camera layer 位移叠加，视觉上像落地后又从屏幕外飞回；角色推进期只允许 transform / opacity transition。正式胜负、成功跳跃次数、时长和排行榜仍以后端 run 为准，前端只延迟显示态。
-- 验证：`npm test -- src/services/jump-hop/jumpHopRuntimeModel.test.ts src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx` 应覆盖动画期间平台仍停在旧窗口，成功落地保留真实落点偏移，动画结束后进入 `data-platform-advancing=true`，DOM 角色层与地块层同在 `jump-hop-camera-layer` 内，通过 `--jump-hop-camera-shift-x` 和 `--jump-hop-camera-shift-y` 完成相机斜向推进，并校验可见地块按深度保留不同视觉尺寸、运行态平台宽高使用固定基准值、推进态 transform transition 为 `1440ms`、推进态角色 transition 不包含 `left/top`、旧地块没有独立 `jump-hop-platform-exit-drift` keyframes 且下一跳不会被旧地块保留态阻塞。
+- 处理：前端保留独立 `displayRun`，松手后先进入 `isJumpAnimating=true`，角色在当前显示窗口内飞向前端预测真实落点；视觉预测必须用当前显示窗口的 current/next 地块作为方向来源，不能拿已经提前返回的后端新 run 目标配旧窗口角色，否则下一跳会朝实际目标反方向飞。飞行动画完成后再把 `displayRun` 切到最新后端 run，并进入约 `1440ms` 的 `platformAdvancing` 表现态。成功后的角色显示必须使用 `lastJump.landedX/landedY` 映射出的真实偏移，不要吸附到目标地块中心。推进期间地块层和角色层必须统一包在同一个 camera layer 下移动，旧当前地块先跟随相机偏移离开主视野，之后只保留在屏幕后方；不要给旧地块加独立向上 / 向下飞走 keyframes，也不要因为旧地块还在保留列表里阻塞下一跳。玩家继续向前跳时，已完成旧地块继续被新的相机推进自然带离屏幕，超过离屏阈值后销毁。相机层必须同时设置 `--jump-hop-camera-shift-x` 与 `--jump-hop-camera-shift-y`，并以旧窗口真实落点和新窗口真实落点为锚点，避免先横向瞬切居中再纵向推进；运行态相机层当前为约 `1.3x` 近距缩放。地块保留当前 / 目标 / 预览的深度尺寸差异，但深度差异必须用固定宽高 + CSS transform scale 缓动实现，不能直接改宽高瞬切；当前态不要额外叠 CSS scale。Three.js Sprite 角色与平台共用同一套屏幕坐标投影，DOM 角色只作为 WebGL 或贴图加载失败 fallback；DOM fallback 在相机推进期间自身不能保留 `left/top` transition，否则 `displayRun` 切换造成的角色局部坐标变更会和父级 camera layer 位移叠加，视觉上像落地后又从屏幕外飞回。正式胜负、成功跳跃次数、时长和排行榜仍以后端 run 为准，前端只延迟显示态。
+- 验证：`npm test -- src/services/jump-hop/jumpHopRuntimeModel.test.ts src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx` 应覆盖动画期间平台仍停在旧窗口，成功落地保留真实落点偏移，动画结束后进入 `data-platform-advancing=true`，角色 Three 帧沿真实预测落点插值并保留飞行弧线，DOM fallback 角色与地块层同在 `jump-hop-camera-layer` 内，通过 `--jump-hop-camera-shift-x` 和 `--jump-hop-camera-shift-y` 完成相机斜向推进，并校验可见地块按深度保留不同视觉尺寸、运行态平台宽高使用固定基准值、推进态 transform transition 为 `1440ms`、推进态 DOM fallback 角色 transition 不包含 `left/top`、旧地块没有独立 `jump-hop-platform-exit-drift` keyframes 且下一跳不会被旧地块保留态阻塞。
 - 关联：`src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx`、`src/services/jump-hop/jumpHopRuntimeModel.ts`、`server-rs/crates/module-jump-hop/src/application.rs`。
 
 ## 跳一跳相机推进不要让地块图片回退到原型方块
@@ -2541,19 +2614,43 @@
 ## 跳一跳 Three.js 平台层不能左右镜像 DOM 坐标
 
 - 现象：视觉上下一块地块在角色右侧，但蓄力引导和角色飞行动画朝左侧；后端回包后地块窗口又闪现摆回正确位置，像是先按反方向飞、再由快照刷新纠正。
-- 原因：Three.js 平台层如果把相机 `up` 设置成反向，或在 Three 容器上做左右镜像，会让 WebGL 地块的屏幕 X 轴和 DOM 角色 / 落点预测的屏幕 X 轴相反。规则层仍沿当前地块中心到下一块中心裁决，所以后端快照会把状态纠正回来，表现为跳后刷新。
-- 处理：Three 相机保持 `up=(0, 1, 0)`，再用内部投影公式抵消 45° 下压导致的 Y 轴压缩；不要通过反向 `camera.up` 解决上下方向。DOM 角色、蓄力引导、落点预测和 Three 平台层必须共用同向屏幕坐标。
+- 原因：Three.js 平台层如果把相机 `up` 设置成反向，或在 Three 容器上做左右镜像，会让 WebGL 地块的屏幕 X 轴和角色 / 落点预测的屏幕 X 轴相反。规则层仍沿当前地块中心到下一块中心裁决，所以后端快照会把状态纠正回来，表现为跳后刷新。
+- 处理：Three 相机保持 `up=(0, 1, 0)`，再用内部投影公式抵消 45° 下压导致的 Y 轴压缩；不要通过反向 `camera.up` 解决上下方向。Three.js Sprite 角色、DOM fallback 角色、蓄力引导、落点预测和 Three 平台层必须共用同向屏幕坐标。
 - 验证：`npm run test -- src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx src/services/jump-hop/jumpHopRuntimeModel.test.ts` 应覆盖 `JUMP_HOP_THREE_CAMERA_UP_Y=1`，并断言 Three 投影与 DOM 屏幕坐标同向。
 - 关联：`src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx`、`src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx`。
 
+## 跳一跳 Three.js 角色不要被地块透明排序压住
+
+- 现象：角色已经进 Three.js 场景后，看起来像落在地块内部或只露出头，角色没有站在方块顶面上。
+- 原因：地块材质如果设置 `transparent=true` 会进入 Three.js 透明物体排序队列，可能在 Sprite 角色之后绘制；同时角色脚点如果仍用固定 Z 高度，遇到标准 `1x1x1` 方块放大后的当前块时会落到顶面后方或方块体内。
+- 处理：地块贴图材质只使用 `alphaTest` 裁掉透明边，不放入透明材质队列；角色 Sprite 的 `renderOrder` 必须高于平台 mesh，脚点 Z 高度按最近方块半高加顶面偏移计算，确保角色站在当前方块顶面上方。
+- 验证：`npm run test -- src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx` 应覆盖平台材质不透明队列、角色 renderOrder 高于地块、角色脚点高度高于方块顶面。
+- 关联：`src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx`、`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`。
+
 ## 跳一跳立方体贴图不要走透明主体切片
 
 - 现象：水果等主题生成成功后，运行态地块看起来像薄的纯水果 PNG、果切贴纸、透明 cutout；或者反过来六个面都是同一张平铺果皮 / 果肉材质，无法组合成方块苹果 / 方块香蕉这类完整主题对象表达。
 - 原因：跳一跳地板已经改为 Three.js 标准 `1x1x1` 等比极小倒角立方体复用几何体，运行态视角固定为近距相机和 45° 下压视角；image2 应生成 `1024x1536` 的 18 个 cube object UV unwrap，每个大单元内的 top/front/right/back/left/bottom 六面要共同包装同一个主题物体。只强调 full-bleed 容易让水果主题退化成果皮、果肉、叶脉等表面纹理；如果仍把一张图贴给六个面，模型也不需要理解正反和跨面连续特征。旧切图链路若把洋红 key 转 alpha、裁边、只保留最大 alpha 连通主体并补透明安全边，会把整格贴图重新抠成苹果 / 香蕉 / 果切等居中主体，贴到立方体上后四角和侧面都变透明。
-- 处理：跳一跳地板图集 prompt 固定要求 `cube object UV unwrap atlas / 立方体主题物体六面展开图集`，一张图只生成 18 个大单元，每个大单元固定 `4列*3行` UV 网：第 1 行第 2 列 top，第 2 行 left/front/right/back，第 3 行第 2 列 bottom；水果主题要明确生成能一眼说出名称的方块苹果、方块香蕉、方块橙子、方块西瓜等可识别对象，并要求果柄叶片、剥皮条带、放射切面、红瓤黑籽等身份特征跨面连续。禁止自然圆形水果、自然长条香蕉、非方块化完整水果、果切小贴纸、居中小物体、透明背景和留白，同时也禁止“单纯平铺材质 / 抽象纹理 / 只铺主题颜色 / 纯果皮材质 / 纯果肉纹理 / 纯叶脉纹理”。后端按 3x6 大单元和 4x3 UV 网切出 108 张 `256x256` 不透明面贴图，不再调用透明化、最大 alpha 连通主体保留或透明补边。洋红 `#FF00FF` 只作为图集安全缝 / UV 空位 / 外圈 key 色，裁切后若仍有极少残留则转成不透明材质底色；绿色、白色、雪地、云朵、草地、花朵、果肉粉色和浅黄色等主题颜色必须完整保留。
+- 处理：跳一跳地板图集 prompt 固定要求 `cube object UV unwrap atlas / 立方体主题物体六面展开图集`，一张图只生成 18 个大单元，每个大单元固定 `4列*3行` UV 网：第 1 行第 2 列 top，第 2 行 left/front/right/back，第 3 行第 2 列 bottom；水果主题要明确生成能一眼说出名称的方块苹果、方块香蕉、方块橙子、方块西瓜等可识别对象，并要求果柄叶片、剥皮条带、放射切面、红瓤黑籽等身份特征跨面连续。禁止自然圆形水果、自然长条香蕉、非方块化完整水果、果切小贴纸、居中小物体、透明背景和留白，同时也禁止“单纯平铺材质 / 抽象纹理 / 只铺主题颜色 / 纯果皮材质 / 纯果肉纹理 / 纯叶脉纹理”。后端先对图集做洋红去背，再以 `jump_hop_atlas_slicing.rs` 的自适应 blob+gradient 算法检测 3x6 大单元和单元内六面区域，输出 108 张 `256x256` 不透明面贴图；固定 3x6 / 4x3 切片只作为测试对照和必要 fallback 参考，不作为优先生图切图路径。洋红 `#FF00FF` 只作为图集安全缝 / UV 空位 / 外圈 key 色；绿色、白色、雪地、云朵、草地、花朵、果肉粉色和浅黄色等主题颜色必须完整保留。
 - 验证：`cargo test -p api-server jump_hop --manifest-path server-rs/Cargo.toml -- --nocapture` 覆盖跳一跳 UV unwrap prompt、18 个大单元、108 张不透明面贴图、绿色 / 白色材质不被透明化、洋红 key 残留不作为透明洞；前端 `JumpHopRuntimeShell` 测试覆盖新 UV 资产会解析六张面贴图，旧单贴图资产仍可 fallback。
 - 关联：`server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs`、`server-rs/crates/platform-image/src/generated_asset_sheets/sheet.rs`、`server-rs/crates/api-server/src/jump_hop.rs`。
 
+## 跳一跳 UV 图集切片要防贴边矩形 u32 中间溢出
+
+- 现象：跳一跳草稿在背景、返回按钮和地板图集 image2 都生成成功后，前端报“执行跳一跳共创操作失败”，Vite 代理日志出现 `socket hang up`，后端日志出现 `jump_hop_atlas_slicing.rs` 内 `attempt to subtract with overflow`。
+- 原因：blob gradient 切片的 histogram 最大不透明矩形在计算顶部坐标时写成 `by0 + ly - sh + 1`。当模型输出的 UV 面内容刚好贴到 cell 顶边，数学结果本应是 0，但 `u32` 会先执行中间步骤 `0 - 1` 并在 debug 运行时 panic。
+- 处理：顶部坐标先在局部坐标内用 `ly.saturating_add(1).saturating_sub(sh)` 计算，再加 block 偏移；不要恢复成连写减法。补充贴顶两行不透明矩形回归测试，保证贴边 UV 面不会打崩共创接口。
+- 验证：`RUSTC_WRAPPER= cargo test -p api-server --manifest-path server-rs/Cargo.toml jump_hop_atlas_slicing::tests::max_opaque_rect_handles_content_touching_top_edge`；整组再跑 `RUSTC_WRAPPER= cargo test -p api-server --manifest-path server-rs/Cargo.toml jump_hop`。
+- 关联：`server-rs/crates/api-server/src/jump_hop_atlas_slicing.rs`、`server-rs/crates/api-server/src/jump_hop.rs`。
+
+## 跳一跳生图切图主路径不要绕过自适应图集切片
+
+- 现象：拉取 `fix/jump-hop-image-gen` 后，如果又把生成链路切回旧固定坐标裁切，容易和该分支解决的 AI 图集偏移、间距不均、UV 面位置漂移问题互相抵消，导致新生图链路的实际收益无法验证。
+- 原因：当前跳一跳 image2 prompt 仍要求 3x6 大单元和 4x3 UV 子网格，这是给模型和算法的结构约束；真实生产切图由自适应 `SeedRefinement + blob + gradient + max opaque rectangle` 链路消化 AI 输出偏差。固定网格切片只能验证理想图集，不适合覆盖新分支的主修复。
+- 处理：生产生成链路优先调用 `slice_tile_atlas_adaptive(...)`；旧固定 `slice_jump_hop_tile_atlas(...)` 只保留为对照测试、实验和必要 fallback 参考。若自适应切图出现具体误切，应优先修正自适应模块的边界检测、主 blob、透明/安全色处理和回归测试，而不是直接全局切回固定坐标。
+- 验证：新生成作品下载 `tile-01-top/front/right` 等面贴图时，单图应基本充满对应主题面内容，不应出现大块空背景、相邻面混入或纯色原型 cube；同时执行 `RUSTC_WRAPPER= cargo test -p api-server --manifest-path server-rs/Cargo.toml jump_hop_atlas_slicing -- --nocapture`。
+- 关联：`server-rs/crates/api-server/src/jump_hop.rs`、`server-rs/crates/api-server/src/jump_hop_atlas_slicing.rs`、`docs/prd/【玩法创作】跳一跳俯视角玩法模板PRD-2026-05-19.md`。
+
 ## 含中文 image2 live 验证不要用 PowerShell 管道喂 Node 源码
 
 - 现象：本地用 `@'...'@ | node -` 跑 VectorEngine / gpt-image-2 live 验证时，`request.json` 里的中文 prompt 可能全部变成 `????`，生成图会变成完全不相关的 UI、建筑海报或其它随机内容，容易误判为模型不服从提示词。
diff --git a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
index 66a94e92b..d9d3a8e3f 100644
--- a/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
+++ b/docs/technical/【前端架构】图片画布素材导出方案-2026-06-15.md
@@ -64,7 +64,24 @@
 └─ manifest.txt
 ```
 
-角色动作单图层导出时，直接生成独立 ZIP：
+角色动作单图层右键“导出为”展开二级菜单：
+
+- `序列帧导出（zip）` 生成普通序列帧 ZIP，保留完整 `frames/`，并由前端把成功读取的帧拼成 `preview.gif`。
+- `Spine 导出（zip）` 生成 Spine JSON ZIP，保留 `frames/`，并附带 `skeleton.json`。
+
+普通序列帧 ZIP 结构：
+
+```text
+角色动作-Sequence.zip
+├─ frames/
+│  ├─ frame-01.png
+│  └─ frame-02.png
+├─ preview.gif
+├─ metadata.json
+└─ manifest.txt
+```
+
+Spine JSON ZIP 结构：
 
 ```text
 角色动作-SpineJSON.zip
@@ -149,9 +166,10 @@ assetObjectId > objectKey > sourceAssetId > src
 4. 对每个素材源读取 Blob：
    - `data:image/...` 直接转换为 Blob。
    - 同源或可访问 URL 使用 `fetch` 拉取 Blob。
-   - 私有 generated / OSS 素材必须走同源 `/api/assets/read-bytes` 读取字节；不要在导出流程里直接 `fetch` OSS 签名 URL，避免浏览器 CORS 拦截。
+   - 私有 generated / OSS 素材先走 `/api/assets/read-url` 换签并由浏览器直接 `fetch` OSS 签名 URL；只有换签或 OSS 字节读取失败时，才 fallback 到同源 `/api/assets/read-bytes`。
    - `mediaType="image-sequence"` 逐帧读取 `imageSequenceFrames`，写入 `sequences/<编号-标题>/frames/`。
-   - `mediaType="image-sequence"` 同步写入 `skeleton.json`，供 Spine Editor 或 runtime 以 slot attachment timeline 方式播放序列帧。
+   - 画布素材 ZIP 内的 `mediaType="image-sequence"` 同步写入 `skeleton.json`，供 Spine Editor 或 runtime 以 slot attachment timeline 方式播放序列帧。
+   - 单图层普通序列帧导出写入 `preview.gif`，由前端基于成功读取的帧生成动画预览，不依赖压缩包读取时再临时播放 PNG。
    - 拉取失败时记录失败项，不中断整个导出。
 5. 使用 `JSZip` 写入 `images/`、`metadata.json` 和 `manifest.txt`。
 6. `zip.generateAsync({ type: 'blob' })` 生成文件。
@@ -176,6 +194,8 @@ assetObjectId > objectKey > sourceAssetId > src
 - 图层的锁定、翻转、分组状态写入元数据。
 - `data:image` 图片不经过网络请求即可导出。
 - URL 图片 fetch 失败时不中断其他素材导出。
+- 动作图层右键菜单把 `导出为` 作为一级入口，二级菜单提供 `序列帧导出（zip）` 和 `Spine 导出（zip）`。
+- 单图层普通序列帧 ZIP 包含 `frames/`、`preview.gif`、`metadata.json` 和 `manifest.txt`，且不包含 `skeleton.json`。
 - 序列帧导出的 `skeleton.json` 可被独立验证器解析并预览。
 
 ## Spine JSON 验证器
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index baee4e762..8a5dc8a6e 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -18,11 +18,13 @@
 - 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成图片、生成视频、生成音乐、生成规范、生成角色形象、生成图标素材、生成 UI 设计图。底部栏不再展示文字工具、形状标注工具和导出工具；上传与生成图片之间、生成音乐与生成规范之间各有一个半图标高度分割线。
 - 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层、生成占位框或画板的边缘与中心线；当移动元素接近两个同轴元素形成的等距位置时，支持横向或纵向等距吸附。
-- 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词、重绘提示词，以及角色规范 / 常规参考图 / 图标规范 / 编辑参考图等参考图卡片。参考图输入快照只保存 `refType/refId` 行引用，其中 `refType="project-resource"` 指向 `editor_project_resource.resourceId`，`refType="asset"` 指向 `editor_asset.assetId`；不得把图片 Data URL、普通 URL 或 `objectKey` 写入 `generationInputs.references`。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
+- 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词、重绘提示词，以及角色规范 / 常规参考图 / 图标规范 / 编辑参考图等参考图卡片，并提供“复制信息”复制当前可见字段。参考图输入快照只保存 `refType/refId` 行引用，其中 `refType="project-resource"` 指向 `editor_project_resource.resourceId`，`refType="asset"` 指向 `editor_asset.assetId`；不得把图片 Data URL、普通 URL 或 `objectKey` 写入 `generationInputs.references`。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行重绘时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图；重绘面板不因提交成功自动关闭，便于连续改提示词。重绘 / 改造输入框只允许从 `generationInputs.fields` 中恢复用户可见输入快照，例如普通生成提示词、视频描述、音效 `prompt`、背景音乐 `gpt_description_prompt`、角色设定、UI 用户输入、图标素材描述、规范表单和宣发素材字段；禁止回退展示资源 `prompt` / `actualPrompt` 中的后端拼接 Prompt、固定生成模板或模型默认提示词。没有用户输入快照的旧图层打开改造时保持空输入，等待用户重新填写。
 - 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和重绘保留既有 `gpt-image-2` 路径；图片快速编辑默认从原图模型和分辨率初始化，但提交使用面板当前选择的 `model/aspectRatio/imageSize`；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板底部用与可编辑面板一致的比例 / 尺寸 / 模型胶囊按钮展示固定参数，但按钮为禁用态，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。宣发素材三个工作流（游戏首图、详情五图、运营海报）固定使用 `gpt-image-2`，面板模型胶囊为禁用态，不提供 `nanobanana2` 入口；前端按 workflow 同时提交 `outputSize`、`aspectRatio` 和 `imageSize`，其中游戏首图为 `720x540 / 4:3`、详情单图为 `720x1280 / 9:16`、运营海报为 `1280x720 / 16:9`；后端收到 `kind: "publication-material"` 时也强制归一为 `gpt-image-2` 生成和计费，生成回填图层优先使用生成占位的 `originalWidth/originalHeight`，即使上游回包尺寸漂移也不得把宣发素材卡片变成随机 `1:1` 或 `4:3`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后走同一图片生成 BFF，并在原图右侧生成一张新图；普通图层重绘作为 `quick-edit` 参考图提交，角色图层重绘必须按 `kind: "character"` 提交，继续套用角色生成器提示词限定、透明 PNG 后处理和角色资产持久化。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；视频参数按当前正式面板支持的比例、时长、清晰度和声音开关提交，且 Seedance Fast 与 Seedance 标准版必须按各自真实模型 ID 独立映射，不得混用。生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。图片快速编辑和重绘在调用图片 BFF 前必须把当前图层图片源读取为图片 Data URL；视频素材快速编辑走视频生成 BFF，不允许走图片模型；角色动作快速编辑固定使用 `seedance2.0-fast` 动作 / 视频模型。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
-- 快速编辑面板对齐其它生成类面板：首行支持额外参考图，最多 8 张；原图 / 原素材自动作为最后一张隐式参考提交，但不在参考图条里固定展示 `图x`。打开快速编辑时画布必须自动平移缩放，让原素材完整落在可视区上半部分，底部面板固定出现在素材下方且不遮挡内容，竖屏 UI 素材也必须完整展示。快速编辑右侧显示矩形、椭圆、画笔框选工具，但进入时不默认启用；点击工具后显示选中态，再点同一工具取消启用。尺寸和模型默认从原素材配置 / 分辨率推断，底部参数胶囊可点击修改；图片快速编辑左下角统一显示 `x:y·xK`，右下角模型胶囊紧贴生成按钮。提交前将提示词里对原素材的 `原图`、`当前图片`、`当前图` 或 `图1` 引用改写为最后一张源素材编号，例如额外 1 张参考图时写成 `图2`。点击快速编辑生成后立即创建独立 `Quick Edit Generator` 画布占位播放生成中动画，不再在原图图层上播放生成中遮罩；该生成中占位可通过键盘 `Delete` / `Backspace` 删除。
+- 图片画布抠图分两类：手动去除背景面向用户任意图片，走登录态同源 BFF `POST /api/editor/images/background-removals` 并转发远端 BiRefNet；编辑器自己生成的标准绿幕资产统一走 `server-rs/crates/api-server/src/editor_green_screen.rs` 的绿幕提示词契约和本地确定性绿幕透明化，字节级解码、透明化和 PNG 编码下沉复用 `platform-image::generated_asset_sheets`。角色形象生成、图标 spritesheet 生成、UI 设计图素材提取和角色动作抽帧后的序列帧都属于标准绿幕资产，不再依赖 BiRefNet；后端在执行绿幕透明化前必须先把带绿幕源图写入 OSS。BiRefNet 服务地址为 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL/remove-background`，默认 `http://58.87.105.82/remove-background`；可选访问令牌只来自服务端环境变量 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN`，前端不持有令牌。api-server 对上游结果做响应字节和图片尺寸上限保护，并先落 OSS / asset object，再返回 `imageSrc/objectKey/assetObjectId/taskId`；手动去背景作为画布本地任务展示，记录运行 / 完成 / 失败、耗时和 provider，不写入 SpacetimeDB 外部生成队列。
+- 快速编辑面板对齐其它生成类面板：首行支持额外参考图，最多 8 张；原图 / 原素材作为 `/api/editor/images/edits` 的 `sourceImageSrc` 直接提交，不作为 `referenceImageSrcs` 的最后一张隐式参考，也不在参考图条里固定展示 `图x`。打开快速编辑时画布必须自动平移缩放，让原素材完整落在可视区上半部分，底部面板固定出现在素材下方且不遮挡内容，竖屏 UI 素材也必须完整展示。快速编辑右侧显示矩形、椭圆、画笔框选工具，但进入时不默认启用；点击工具后显示选中态，再点同一工具取消启用。尺寸和模型默认从原素材配置 / 分辨率推断，底部参数胶囊可点击修改；图片快速编辑左下角统一显示 `x:y·xK`，右下角模型胶囊紧贴生成按钮。提交时保留用户提示词里对 `原图`、`当前图片`、`当前图` 或 `图1` 的原始表述，不再改写为 `图N`。点击快速编辑生成后立即创建独立 `Quick Edit Generator` 画布占位播放生成中动画，不再在原图图层上播放生成中遮罩；生成成功后直接用结果覆盖原图图层，该生成中占位可通过键盘 `Delete` / `Backspace` 删除。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
+- 画布右上角提供自动隐藏任务侧栏。列表为空且侧栏关闭时只保留图标开关；生成或去背景任务进入时默认打开；用户可手动切换开关状态。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标或原图右侧固定偏移。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频`、`生成UI设计图`、`生成角色动作` 和快速编辑提交后创建的 `Quick Edit Generator`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变；快速编辑提交时同样必须把避让后的 placeholder 写入独立生成占位，生成结果落在该占位位置。
 
 ## 交互规则
@@ -35,7 +37,7 @@
 - 吸附阈值以屏幕像素为准，换算到世界坐标后参与拖拽计算；边缘 / 中心线和等距吸附共用同一阈值。拖拽结束后只保存最终图层或生成占位布局，不保存临时参考线。
 - 项目页封面和画布图片图层必须先渲染项目卡、图层外框、标题、尺寸和操作 chrome；图片换签或解码未完成时，只在图片区域显示轻量加载态，不阻塞外框和文字等低成本信息先出现。
 - 素材量增大时，拖拽吸附热路径不得对所有素材做全量两两配对。边缘 / 中心线吸附保持线性扫描；等距吸附只在跨轴相交且轴向邻近的候选图层之间计算，避免大量远处素材拖慢 pointermove。
-- 画布自动保存使用防抖 + 串行队列：图层拖拽、缩放、资源新增和修改结果创建后延迟保存工程快照；如果上一次 `PATCH /api/editor/projects/{projectId}` 尚未完成，只保留最新待保存快照，待当前请求结束后再发送下一次保存，避免慢保存请求并发堆积触发发布入口连接限流。`PATCH /api/editor/projects/{projectId}` 只返回 `{ projectId, canvasId, updatedAt }` 轻量 ack，不再返回完整 project，前端必须以后续显式读取或生成完成返回的后端快照作为项目真相。
+- 画布自动保存使用防抖 + 串行队列：图层拖拽、缩放、资源新增和修改结果创建后延迟保存工程快照；如果上一次 `PATCH /api/editor/projects/{projectId}` 尚未完成，只保留最新待保存快照，待当前请求结束后再发送下一次保存，避免慢保存请求并发堆积触发发布入口连接限流。手型平移和小地图拖动属于临时 viewport 交互，拖动中只更新画布显示，不触发 `serializeCanvasLayout`、sessionStorage 项目缓存写入或封面快照上传，`pointerup` / `pointercancel` 后再保存最终 viewport。`PATCH /api/editor/projects/{projectId}` 只返回 `{ projectId, canvasId, updatedAt }` 轻量 ack，不再返回完整 project，前端必须以后续显式读取或生成完成返回的后端快照作为项目真相。
 - 移动端保留同一套状态模型，底部工具栏可横向滚动，侧边栏默认可收起。
 - 项目页卡片默认点击打开工程；hover 项目卡片右下角显示 `...` 菜单，菜单承载重命名和删除。选择模式下项目卡片只切换选中态，不进入画布；底部批量工具栏提供全选 / 取消全选、已选数量、批量删除和退出选择模式。
 
@@ -44,13 +46,13 @@
 - 新增 `editor_project` 表保存图片画布工程：`projectId`、`ownerUserId`、标题、创建时间和更新时间；历史 layout 字段暂保留为兼容列，不再作为权威画布数据。
 - 新增 `editor_canvas` 表保存工程下的画布：`canvasId`、`projectId`、`ownerUserId`、标题、viewport、图层布局 JSON、创建时间和更新时间。当前编辑器使用项目默认画布，后续可扩展为一个 project 下多个 canvas。
 - 新增 `editor_asset_folder` 表保存账号级素材文件夹：`folderId`、`ownerUserId`、名称、排序、折叠状态、系统默认标记、创建时间和更新时间。素材文件夹不归属于 project，同一个账号进入任一项目都能看到。
-- 新增 `editor_asset` 表保存账号级素材：`assetId`、`ownerUserId`、`folderId`、名称、图片读取地址、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、`assetKind`、`generationInputs`、创建时间和更新时间。素材只跟账号走，不跟 project 走；角色、图标、UI 设计图、视频和音频等生成结果的用户可见输入快照随素材保存。
+- 新增 `editor_asset` 表保存账号级素材：`assetId`、`ownerUserId`、`folderId`、名称、图片读取地址、可选封面 `thumbnailSrc`、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、`assetKind`、`generationInputs`、创建时间和更新时间。素材只跟账号走，不跟 project 走；角色、图标、UI 设计图、视频和音频等生成结果的用户可见输入快照随素材保存。
 - `editor_project_resource` 表保存工程画布引用过的资源快照：`resourceId`、`projectId`、`ownerUserId`、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、sourceResourceId、`assetKind`、`generationInputs`、创建时间和更新时间。上传素材被拖入画布时会复制为 project resource，图层只引用 resourceId；图片、图标和 UI 素材生成 BFF 在请求携带 `projectId` 时由后端直接创建新 resource，并把 `resourceId` 随生成响应返回给前端。图片生成请求如果同时携带 `canvasCompletion`（生成器 `dialogId`、标题和占位框，或无 dialog 的右侧完成占位），BFF / worker 在生成成功后必须直接读取当前项目布局，优先使用最新 `generation-dialog` 占位框位置；只有当前布局仍存在对应 `generation-dialog` 时才插入轻量结果图层、把生成器标记为 `idle` 并写入 `generatedLayerId`，沿用后端当前 viewport 保存布局，再返回或刷新最新项目快照；前端只应用该快照刷新显示，不把生成完成态作为本地业务真相，也不在项目加载时根据资源行推断完成态。有项目上下文但后端没有返回项目快照时，前端不得本地补结果图层，只保留当前生成器交互状态等待下一次项目刷新。
 - 项目封面图是画布当前视口栅格化后的静态快照资源，不在项目列表页临时重放 `layers + viewport`。前端在项目加载后和防抖保存 layout 时生成 320x240 PNG，走私有 OSS / asset object 上传，再创建 `editor_project_resource`，其中 `assetKind="project-cover-snapshot"`、`sourceType="uploaded"`。`/project` 与 `/creation` 最近项目卡只读取最新封面快照资源渲染；没有封面快照时显示普通项目占位，不回退为实时画布组合。
 - 图片、音频、视频和角色动画帧文件本体继续走 OSS / asset object；浏览器读取私有 generated 对象统一经 `/api/assets/read-url` 换签，签名 URL 可在 session 内复用，但不得作为持久化真相。`/api/assets/read-url` 属于页面展示层高频后台请求，前端统一在 `assetReadUrlService` 内做同 key pending 去重、session 缓存和跨组件节流；UI 设计切片、角色动画帧或大量素材恢复时不得绕过该服务并发换签，否则单页可在同一秒内打满发布入口 `genarrative_api_rps` burst。
 - 登录态上传和生成结果必须先落 OSS / asset object，再向 `editor_project_resource` / `editor_asset` 写入轻量 `imageSrc: "/<objectKey>"`、`objectKey` 和 `assetObjectId`；未登录演示态可以在内存里使用 Data URL 预览，但项目、素材库、项目资源和 `editor_canvas.layers_json` 不得写入 `data:image/*`、`data:video/*`、`data:audio/*` 或 `blob:`。旧数据读取时如果已有 `objectKey`，`imageSrc` 归一成 `/<objectKey>`；没有 `objectKey` 的旧 Data URL 需要走修复上传并回写轻量引用。上传到生成面板参考图槽位的图片必须先创建 `editor_project_resource` 行；没有当前工程 ID 时才创建账号级 `editor_asset` 行，随后把对应 `resourceId` 或 `assetId` 写入参考图临时状态，生成请求仍使用临时状态中的图片源或 `objectKey`。
 - 资源表保存资源和素材级元数据；图层位置、层级、分组选中所需 ID 和 groupId 保存在 `editor_canvas` 的布局 JSON。布局 JSON 是混合数组：普通图层按 `layerId/resourceId` 保存，生成器占位和生成器对话框按 `itemType: "generation-dialog"` 保存，不新增单独表。普通图层的新保存不再把 `assetKind/generationInputs` 写入布局 JSON；刷新时优先从 `editor_project_resource` 恢复，旧布局中的同名字段只作为兼容兜底。生成器快照必须包含生成器 ID、模式、提示词、参数、参考图、状态、占位框位置和可选 `generatedLayerId`；宣发素材生成器还必须保存并恢复 `publicationWorkflowId`、`publicationGameInfo` 和 `publicationReferences`，避免刷新后生成卡片字段或参考图丢失。生成器快照中的参考图同样只保存 `resourceId/sourceAssetId` 行引用和展示所需 label，不保存图片 Data URL、signed URL 或 `objectKey`；刷新时用 `editor_project_resource` / `editor_asset` 行恢复临时生成请求所需图片源。生成成功后仍保存该快照，只是渲染时由 `generatedLayerId` 锚定到成品图层而不重复显示灰色占位框。`generationInputs.references` 是用户可见输入快照中的行级索引，只允许保存 `{ title, label, refType, refId }`；生成接口所需的图片 Data URL、signed URL 或 `objectKey` 只存在于提交前的临时参考图状态和请求体字段，不进入资源 / 素材元数据。图层展示尺寸不再作为独立 `Size` 真相保存，刷新与新建图层均按 `Resolution`（`originalWidth/originalHeight`）原分辨率显示。图层组第一版是画布内布局语义，不单独建表。
-- 图片类生成结果除作为 `editor_project_resource` 和画布图层保存外，还要写入账号级 `editor_asset` 素材库；该写入由生成 BFF 在请求携带 `assetFolderId` 时完成。`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 下，画布图片、改图、图标素材、UI 素材提取、角色动作、视频、音效和背景音乐生成都先返回 `queueState`，前端轮询 `/api/runtime/external-generation/jobs/{jobId}` 到完成后重新读取项目快照；`inline` 或无项目上下文时才使用响应中的 resource / asset 快照做本地落画布兜底，不再把同一生成结果二次调用素材创建接口。生成请求失败、inline 完成或 queue 任务终态完成 / 失败后，右上角泥点 chip 必须通过 `/profile/dashboard` 回读余额，不做本地乐观扣减。视频结果当前只保存为画布视频资源，不进入图片素材库。
+- 图片类和生成视频结果除作为 `editor_project_resource` 和画布图层保存外，还要写入账号级 `editor_asset` 素材库；该写入由生成 BFF 在请求携带 `assetFolderId` 时完成。`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 下，画布图片、改图、图标素材、UI 素材提取、角色动作、视频、音效和背景音乐生成都先返回 `queueState`，前端轮询 `/api/runtime/external-generation/jobs/{jobId}` 到完成后重新读取项目快照；`inline` 或无项目上下文时才使用响应中的 resource / asset 快照做本地落画布兜底，不再把同一生成结果二次调用素材创建接口。生成请求失败、inline 完成或 queue 任务终态完成 / 失败后，右上角泥点 chip 必须通过 `/profile/dashboard` 回读余额，不做本地乐观扣减。生成视频会单独抽取首帧封面并写入 `thumbnailSrc`，素材栏和拖回画布时沿用该封面作为 poster。
 - 前端不直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。
 - 工程刷新恢复可先应用 session 级轻量项目快照缓存，让画布和素材 chrome 尽快显示；缓存快照必须排除 `data:*` / `blob:` 内联媒体，且在后端项目快照返回前不得触发自动保存。后端快照回来后覆盖本地缓存显示并恢复正常保存队列。
 - 未登录用户可以使用本地演示态，但不触发工程自动保存；真实图片生成 / 修改需要登录。编辑器 API 请求允许使用 refresh cookie 静默补 access token，但 401 / 403 只在编辑器局部提示登录，不清空整站登录态，也不把后端 requestId 直接作为生图弹窗主文案。
@@ -72,11 +74,12 @@
 - `POST /api/editor/assets`：批量或单个创建账号级素材，登录态上传必须写入 OSS / asset object 引用和 `/<objectKey>` 轻量路径，不允许把 Data URL / signed URL 写入素材库。
 - `PATCH /api/editor/assets/{assetId}`：重命名素材或移动素材到文件夹。
 - `DELETE /api/editor/assets/{assetId}`：删除素材。已放入画布的 project resource 不被级联删除，避免旧画布丢图。
-- `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`，宣发素材携带 `kind: "publication-material"` 时固定归一为 `gpt-image-2`，不支持 `nanobanana2`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。携带参考图的快速编辑也走该接口，前端必须把参考图源预读成图片 Data URL 后放入 `referenceImageSrcs`；请求可携带 `projectId`、`assetFolderId`、`assetKind`、`generationInputs` 和 `sourceResourceId`，后端生成成功后创建 project resource / 账号素材并在响应中返回 resource / asset 快照。
-- `POST /api/editor/icon-spritesheets/generations`：按图标规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`、`priceMudPoints`、`projectId`、`assetFolderId` 和 `generationInputs`；`priceMudPoints` 必须来自编辑器生成计费配置中对应生图模型的尺寸档位（如 `nanobanana2` 的 `0.5K / 1K / 2K` 或 `gpt-image-2` 的 `1K / 2K`），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`。后端把 spritesheet 和拆分后的 icon 都保存为 project resource / 账号素材，并随响应返回对应快照。
-- `POST /api/editor/ui-designs/assets/extractions`：以前端已绘入红色框选轮廓的 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet` 生成素材 spritesheet，再按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。请求必须携带 `aspectRatio: "1:1"`、`imageSize: "1K" | "2K"` 和 `priceMudPoints`；框选数量不超过 6 个时前端按 `1:1·1K` 与 gpt-image-2 1K 价格提交，超过 6 个时按 `1:1·2K` 与 2K 价格提交。后端必须在调用上游前校验比例、尺寸和泥点价格，只允许 `1:1 / 1K / 2K`。请求可携带 `projectId`、`assetFolderId`、`generationInputs` 和 `spritesheetLabel`，后端保存 spritesheet / 拆分素材并返回对应 resource / asset 快照；前端必须把 spritesheet 原图与拆分素材都加入画布。
-- `POST /api/editor/images/edits`：按提示词和当前图片 Data URL 调用 VectorEngine edits，返回新的生成图片元数据；请求携带 project / asset 上下文时由后端创建新 resource / asset，前端只消费响应快照。
-- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音、默认联网搜索标记和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端允许 6 类比例、4 到 15 秒整数、`480p / 720p / 1080p`，并拒绝 `seedance2.0-fast + 1080p`；`sound=on/off` 映射 Ark `generate_audio=true/false`。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS，返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
+- `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`，生成成功后 api-server 先保存带绿幕源图，再走 `editor_green_screen` 绿幕透明化后处理。宣发素材携带 `kind: "publication-material"` 时固定归一为 `gpt-image-2`，不支持 `nanobanana2`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。普通重绘继续走该接口并把当前图层图片作为参考图；图片快速编辑不走该接口。请求可携带 `projectId`、`assetFolderId`、`assetKind`、`generationInputs` 和 `sourceResourceId`，后端生成成功后创建 project resource / 账号素材并在响应中返回 resource / asset 快照。
+- `POST /api/editor/images/background-removals`：接收当前图片源，校验登录态后由 api-server 解析为图片文件并转发到 BiRefNet 去背景服务；响应返回 `imageSrc`、`objectKey`、`assetObjectId`、`width`、`height`、`taskId`、`elapsedMs` 和 `provider`。服务地址由 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL` 配置，令牌只在服务端通过 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN` 注入。
+- `POST /api/editor/icon-spritesheets/generations`：按图标规范图和素材描述数组生成 spritesheet，生成成功后 api-server 先保存带绿幕 spritesheet 源图，再走 `editor_green_screen` 绿幕透明化后处理，并由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`、`priceMudPoints`、`projectId`、`assetFolderId` 和 `generationInputs`；`priceMudPoints` 必须来自编辑器生成计费配置中对应生图模型的尺寸档位（如 `nanobanana2` 的 `0.5K / 1K / 2K` 或 `gpt-image-2` 的 `1K / 2K`），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`。后端把 spritesheet 和拆分后的 icon 都保存为 project resource / 账号素材，并随响应返回对应快照。
+- `POST /api/editor/ui-designs/assets/extractions`：以前端已绘入红色框选轮廓的 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和 `editor_green_screen` 组装的标准绿幕素材提取提示词生成素材 spritesheet，生成成功后 api-server 先保存带绿幕 spritesheet 源图，再走 `editor_green_screen` 绿幕透明化后处理，并按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。请求必须携带 `aspectRatio: "1:1"`、`imageSize: "1K" | "2K"` 和 `priceMudPoints`；框选数量不超过 6 个时前端按 `1:1·1K` 与 gpt-image-2 1K 价格提交，超过 6 个时按 `1:1·2K` 与 2K 价格提交。后端必须在调用上游前校验比例、尺寸和泥点价格，只允许 `1:1 / 1K / 2K`。请求可携带 `projectId`、`assetFolderId`、`generationInputs` 和 `spritesheetLabel`，后端保存 spritesheet / 拆分素材并返回对应 resource / asset 快照；前端必须把 spritesheet 原图与拆分素材都加入画布。
+- `POST /api/editor/images/edits`：按提示词、当前图片 Data URL 和最多 8 张额外参考图调用 VectorEngine edits，返回新的生成图片元数据；请求携带 project / asset 上下文时由后端创建新 resource / asset，前端只消费响应快照。
+- `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音、默认联网搜索标记和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端允许 6 类比例、4 到 15 秒整数、`480p / 720p / 1080p`，并拒绝 `seedance2.0-fast + 1080p`；`sound=on/off` 映射 Ark `generate_audio=true/false`。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS；请求携带 `projectId` / `assetFolderId` 时同步创建 project resource / 账号素材并返回 `project` / `asset` 快照，基础响应返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
 所有写接口都必须校验 Bearer 登录态和 owner；接口只返回当前用户有权读取的工程与资源。
 
@@ -102,21 +105,21 @@
 - 画布多选语义必须同时覆盖普通图层和仍显示占位框的生成器对象：Shift 点选或框选可把生成器加入当前选择；拖动任一已选图层或生成器时，所有已选普通图层和生成器占位框同步移动；删除 / Backspace / Delete 作用于完整选择集合，移除所有已选图层和生成器对象。生成器对象在选择集合中使用稳定 `generation-dialog:<id>` 目标 ID，不把生成器伪装成普通图层，也不新增后端表。
 - 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。所有生成面板参考图槽位统一为方形图标组件；角色规范槽位只显示规范 logo 和 `角色规范` 四字，绑定来源标题只保留给可访问名称、悬浮 title 和图片信息。已有参考图槽位只有在 hover / focus 时显示右上角 `×`，点击后只解绑对应参考图。角色形象生成面板每次成功绑定角色规范后，在当前编辑器生命周期内缓存为上一张角色规范；再次新建角色形象时自动带入该缓存。图标素材和 UI 设计图面板每次成功绑定图标规范后，同样缓存为上一张图标规范；再次新建需要图标规范的素材时自动带入该缓存。生成规范菜单里的图标规范对象自身只把首行参考图作为可选参考，不要求必须先绑定图标规范。
 - 生成规范类图片面板底部必须以禁用态参数按钮显示 `16:9·2K` 和 `gpt-image-2`，视觉对齐可编辑面板参数控件，提交到 `/api/editor/images/generations` 时也固定携带这些参数。
-- 快速编辑面板底部必须显示当前选择的比例 / 尺寸和模型，参数按钮可展开修改且视觉对齐其它可编辑面板；打开时视口聚焦必须预留底部面板空间，面板位于素材下方，不得遮挡原素材，且素材在当前屏幕内完整可见。参考图请求顺序为额外参考图在前、原图作为隐式最后一张提交，信息面板输入快照只展示用户额外选择的参考图。
+- 快速编辑面板底部必须显示当前选择的比例 / 尺寸和模型，参数按钮可展开修改且视觉对齐其它可编辑面板；打开时视口聚焦必须预留底部面板空间，面板位于素材下方，不得遮挡原素材，且素材在当前屏幕内完整可见。快速编辑请求只把原图作为 `sourceImageSrc` 直接提交，信息面板输入快照只展示用户额外选择的参考图。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图行引用，不包含后端拼接 Prompt，不再展示独立 Size 字段，也不渲染参考图 Data URL 缩略图。
-- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照；前端轻量去背必须复用共享 `chromaKey` 的绿幕 / 近白背景模型，不再只按四角颜色扩散，避免纯白角色主体或主体内部浅色区域被扣碎。UI设计图的提取素材必须先进入红框素材框选状态，默认启用矩形框选，右侧框选工具与快速编辑统一且可再次点击取消启用态，当前启用工具按钮必须保持高亮。素材提取面板必须在素材下方，使用与生成新素材一致的面板宽度和底部模型 / 按钮样式，提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选区域截图预览、固定模型 `gpt-image-2`、左下角计划规格 `1:1·1K/2K` 和 `提取 · N泥点` 按钮，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。至少框选一个区域后才可提交，前端把红色轮廓绘入原图后固定走 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
+- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景调用同源 BFF `POST /api/editor/images/background-removals`，由 api-server 代理远端 BiRefNet 服务并持久化结果，完成后用新的 project resource 引用替换当前图层，并在右上角本地任务侧栏展示耗时和状态。画布任务侧栏按“排队/生成中”和“已完成”分页，生成中排在排队前，生成中耗时从任务开始时间戳实时计算；完成态生成任务副标题显示用户提示词并单行截断；点击任务只聚焦对应画布内容，不激活生成面板或改变任务顺序，聚焦时必须预留图片上方工具栏、底部工具栏和可见生成对话框空间。UI设计图的提取素材必须先进入红框素材框选状态，默认启用矩形框选，右侧框选工具与快速编辑统一且可再次点击取消启用态，当前启用工具按钮必须保持高亮。素材提取面板必须在素材下方，使用与生成新素材一致的面板宽度和底部模型 / 按钮样式，提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选区域截图预览、固定模型 `gpt-image-2`、左下角计划规格 `1:1·1K/2K` 和 `提取 · N泥点` 按钮，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。至少框选一个区域后才可提交，前端把红色轮廓绘入原图后固定走 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
 - 重绘生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图，且重绘面板保持打开。
 - 快速编辑 / 重绘站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
-- 快速编辑的额外参考图同样必须在前端读取成图片 Data URL 后提交；后端 `referenceImageSrcs` 上限为 9 张，承载 8 张额外参考图加 1 张原图。
+- 快速编辑的额外参考图既进入输入快照，也作为 `/api/editor/images/edits` 的 `referenceImageSrcs` 提交给后端；原图仍只作为 `sourceImageSrc`，不占用额外参考图额度。
 - 素材文件夹可以新建、折叠、重命名和删除；删除普通文件夹后，其素材移动到“项目素材”。普通上传默认落入“上传素材”文件夹；素材库缺少该文件夹时，前端在首次普通上传前创建一次并复用，拖到指定文件夹或点击指定文件夹上传时仍进入目标文件夹。
-- 上传按钮和拖拽上传都支持多文件；底部工具栏的上传入口选择文件后直接进入“上传素材”并在当前画布视口中心创建画布图层，素材栏文件夹内的上传入口只写入对应素材文件夹、不自动入画布；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入“上传素材”并在投放点创建画布图层。上传图片必须在创建占位素材、画布图层和账号级素材记录前先读取原图 Resolution，图层宽高、`originalWidth/originalHeight` 和素材库 `width/height` 都使用图片本身尺寸；仅在无法解析尺寸时才使用上传兜底尺寸。
+- 上传按钮和拖拽上传都支持多文件；底部工具栏的上传入口选择文件后直接进入“上传素材”并在当前画布视口中心创建画布图层，素材栏文件夹内的上传入口只写入对应素材文件夹、不自动入画布；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入“上传素材”并在投放点创建画布图层。上传图片必须在创建占位素材、画布图层和账号级素材记录前先读取原图 Resolution，图层宽高、`originalWidth/originalHeight` 和素材库 `width/height` 都使用图片本身尺寸；上传视频同样在创建素材和图层前读取视频 metadata 宽高，保证单层下载或 ZIP 导出的真实视频文件重新导入后仍按文件自身尺寸入画布；仅在无法解析尺寸时才使用对应媒体兜底尺寸。
 - 音频 / 视频素材卡和画布媒体图层必须提供稳定的非文字视觉预览：优先使用 `thumbnailSrc` / 视频 `poster`，没有真实首帧或音频封面时使用由媒体类型、素材名和地址派生的确定性视觉底图。视频图层使用原生 `<video controls preload="metadata" playsInline>` 播放，外层图层仍承接选择和拖拽语义；音频图层播放前继续通过 `/api/assets/read-url` 换签。画布素材导出按 `mediaType` 保留真实媒体格式：图片进入 `images/`，音频 / 视频进入 `media/`，文件扩展名从响应 MIME、`objectKey` 或源 URL 推断，不得把音频 / 视频导出成 PNG。
 - 画布素材 ZIP 的 `metadata.json` 只保存前端信息弹窗和导出文件列表可见的展示快照：项目标题、导出时间、图层标题、文件路径、类型、生成输入、模型显示名、Task 短 ID、Object 显示值、Resolution / 时长和导出错误。导出的生成输入只保留用户实际填写或选择的内容；系统默认兜底提示词、固定工作流提示词、内置图标描述、UI 提取素材固定提示词等内置提示词即使存在于历史 `generationInputs`，也不得写入导出元数据。不得把 `projectId`、`layerId`、`resourceId`、`sourceAssetId`、`sourceResourceId`、原始 `prompt` / `actualPrompt` / `provider` 或画布坐标、锁定、隐藏等布局状态写入导出元数据；Object 字段仅沿用信息弹窗当前可见值。
-- `生成角色动作` 的完成结果同样按视频素材处理：图层主 `src` 使用后端返回的 `previewVideoPath`，`mediaType` 固定为 `video`，`assetKind` 固定为 `character-animation`，首个透明帧只写入 `thumbnailSrc` 供 poster 和后续动作源使用。下载和 ZIP 导出必须因此得到 mp4/webm/mov 等真实视频文件，不能回退为首帧 PNG；后端抽帧、绿幕去背和帧素材落盘流程仍完整保留。
+- `生成角色动作` 的完成结果按序列帧素材处理：图层主 `src` 使用 `frames[0].imageSrc`，`mediaType` 固定为 `image-sequence`，`assetKind` 固定为 `character-animation`，完整帧列表写入 `imageSequenceFrames`；`previewVideoPath` 只保留为上游预览视频来源，不作为画布主媒体。下载和 ZIP 导出必须因此得到序列帧 ZIP / frames 目录，不能回退为预览视频或首帧 PNG；后端抽帧后先保存带绿幕帧源图，再走绿幕透明化后处理并落盘透明帧素材。
 - 素材面板支持按素材名、文件夹名、生成信息、模型、任务和媒体类型搜索，并支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。
 - 图层面板支持按图层名、生成信息、模型、任务和媒体类型搜索；支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
-- 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动。
+- 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
 - 鼠标滚轮默认垂直滚动画布视口；按住 Ctrl / Cmd 滚轮才缩放画布，并阻止浏览器页面缩放。缩放比例显示保持现有换算口径，最低可缩小到 `5%`。
 - 工程刷新后能从后端恢复资源、图层布局和 viewport。
 - “我的”页项目入口能进入 `/project`；项目页能列出工程、重命名 / 删除单个工程、批量选择和批量删除；点击工程后进入 `/editor/canvas?projectid=<projectId>` 并按 query 加载该工程。
diff --git a/docs/technical/【前端测试】React组件测试准则-2026-06-26.md b/docs/technical/【前端测试】React组件测试准则-2026-06-26.md
new file mode 100644
index 000000000..a2a7667a8
--- /dev/null
+++ b/docs/technical/【前端测试】React组件测试准则-2026-06-26.md
@@ -0,0 +1,54 @@
+# React 组件测试准则
+
+更新时间：`2026-06-26`
+
+## 背景
+
+当前前端测试已经覆盖大量 React 组件、hook 和页面流程，但部分用例把组件内部状态、DOM 探针、按钮顺序、图标 class 或完整文案当成契约。这样的测试能快速发现改动，却也会让 UI 结构、交互文案和实现拆分变得很难迭代。
+
+后续新增或重写 React 测试时，默认按本准则选择断言层级。已有测试不要求一次性批量迁移；当某个测试因正常重构频繁破碎，或本次任务正好修改该区域，就顺手收紧到稳定契约。
+
+## 分层口径
+
+1. 用户流程测试验证用户可感知结果。
+
+   优先使用 Testing Library 的 `userEvent`、role、label、可见弹窗、URL、提交结果、错误提示和外部 callback。测试名应描述业务行为，不描述组件内部状态机步骤。
+
+2. 稳定契约测试验证对外边界。
+
+   对请求 DTO、callback payload、路由变化、持久化边界和后端回包映射，使用关键字段断言或 `expect.objectContaining(...)`。对象仍在演化时，不要断言完整对象、完整数组顺序或所有默认字段。
+
+3. 模型和 hook 测试验证纯逻辑。
+
+   复杂状态机优先沉到 model 或 hook 的公开返回契约中测试。hook 测试使用 `renderHook` 直接调用公开方法和读取公开状态，不额外制造 `data-testid` 仪表盘组件来拼接内部字段。
+
+## 避免的写法
+
+- 不为了读取内部状态新建测试专用 DOM，例如 `<span data-testid="active-id">`、`textContent` 拼接内部数组或状态名。
+- 不把图标实现、第三方库 class、DOM 层级、完整按钮顺序当成稳定契约，除非产品明确要求该顺序或可访问语义本身就是行为。
+- 不用精确长文案锁死可变提示词、分享文案、错误文案或 UI 标签；需要断言时只断言稳定语义片段，或改断言 payload / 状态码 / 目标 callback。
+- 不在页面级测试里 mock 出一套与真实页面差异很大的“假壳”，再把假壳内部状态当作用户验收结果。页面壳测试可以保留，但应尽量断言 URL、标题、公开 callback 和真实可见行为。
+
+## 推荐写法
+
+- 交互优先用 `userEvent`，只有测试低层 pointer / wheel / drag 等浏览器事件细节时再用 `fireEvent`。
+- 查询优先用 role / label / alt / text 的用户语义；只有无可访问语义的画布参考线、不可见测量节点或渲染边界，才使用 `data-testid`。
+- `data-testid` 名称必须描述用户或稳定渲染边界，例如 `image-canvas-editor-snap-guide-vertical`；不要描述 React 私有 state 名称。
+- 测试用 fixture 只包含本行为需要的字段。演化中的 payload 使用 `expect.objectContaining(...)` 或 helper 生成默认对象，避免一处契约加字段导致大量无关用例碎裂。
+- 当测试是为防止历史回归，应在测试名或邻近注释中说明防的是什么行为，而不是记录实现步骤。
+
+## 试点调整
+
+`src/components/image-editor/useCanvasGenerationDialogs.test.tsx` 已从测试专用 DOM 仪表盘改为 `renderHook`，直接验证 hook 公开契约：打开、归档、激活、更新、删除、恢复和 ID 递增。
+
+`src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx` 已去掉图标 class 和完整按钮顺序快照式断言，保留用户可操作按钮、工具切换 callback、可访问 pressed 状态和 hover / focus 打开选项的契约。
+
+## 验证
+
+修改 React 测试后，优先运行触达文件的定向测试，例如：
+
+```bash
+npm run test -- src/components/image-editor/useCanvasGenerationDialogs.test.tsx src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx --reporter=dot
+```
+
+涉及共享组件、路由壳或跨页面交互时，再追加对应页面测试、`npm run typecheck`、`npm run check:encoding` 和 `git diff --check`。
diff --git a/docs/technical/【后台管理】Dashboard运营看板方案-2026-06-23.md b/docs/technical/【后台管理】Dashboard运营看板方案-2026-06-23.md
index d9a618bc5..3217bfbf5 100644
--- a/docs/technical/【后台管理】Dashboard运营看板方案-2026-06-23.md
+++ b/docs/technical/【后台管理】Dashboard运营看板方案-2026-06-23.md
@@ -13,7 +13,8 @@
 - `granularity` 默认为 `day`。
 - `anchor` 使用北京时间日历日期，保留给 `day` / `week` / `month` 兼容旧查询口径。`week` 和 `month` 选择包含该日期的自然周 / 自然月。
 - `period` 使用 `startDate` / `endDate` 作为闭区间自定义时段，最多 366 天。
-- 前端统一展示起始日期和终止日期两个日期选择器；点击“本日 / 本周 / 本月”会按当前终止日期自动填充对应自然日 / 自然周 / 自然月范围，手动修改起止日期或点击“本时段”后按当前日期范围查询。
+- 前端统一展示起始日期和终止日期两个日期选择器；点击“本日 / 本周 / 本月”按当天真实日期自动填充对应自然日 / 自然周 / 自然月范围并刷新，手动修改起止日期后按当前日期范围查询。
+- 前端默认日期和“本日 / 本周 / 本月”快捷入口都按 `Asia/Shanghai` 计算，不使用浏览器本地时区。
 - 前端每 5 分钟自动刷新一次，同时保留手动刷新按钮。
 
 ## 指标口径
@@ -21,7 +22,7 @@
 - 生产素材数：`editor_project_resource` 中 `source_type = 'generated'` 的资源，按 `created_at` 映射到北京时间业务日。
 - 消耗泥点数：`profile_wallet_ledger` 中 `source_type = asset_operation_consume` 且 `amount_delta < 0` 的流水绝对值，按 `created_at` 映射到北京时间业务日。
 - 总注册用户：`profile_dashboard_state` 行数。
-- 新增用户数：`profile_dashboard_state` 中 `created_at` 落在当前筛选时间窗内的账号数，按北京时间业务日归属，支持本日 / 本周 / 本月 / 本时段切换。
+- 新增用户数：`profile_dashboard_state` 中 `created_at` 落在当前筛选时间窗内的账号数，按北京时间业务日归属，支持本日 / 本周 / 本月快捷日期范围。
 - 访问次数：`tracking_daily_stat` 中 `scope_kind = site` 的日聚合次数。它表示站点级成功路由 / 站点级事件，不把用户级钱包、任务、生成等业务操作混入访问次数。
 - 访问人数：当前数据只具备登录用户维度，按 `tracking_daily_stat` 中 `scope_kind = user` 的 `scope_id` 去重；匿名访问人数需要未来补充稳定 visitor id 后才能统计。
 - 当前使用人数：最近 5 分钟内 `tracking_event` 中有 `user_id` 的登录用户去重；不跟随页面选择的历史日 / 周 / 月。
@@ -35,6 +36,13 @@
 - 前端页面：`apps/admin-web/src/pages/AdminDashboardPage.tsx`
 - 后台路由：`apps/admin-web/src/app/adminRoutes.ts`
 
+## 埋点后台查询
+
+- `GET /admin/api/tracking/events` 读取 `tracking_event` 原始事实，支持 `eventKey`、`userId`、`scopeKind`、`scopeId`、`startDate`、`endDate` 和 `limit` 筛选。日期使用北京时间日历日期 `YYYY-MM-DD`，后端转换为 `day_key` 闭区间。
+- 日常列表查询仍限制最多 1000 条；后台“导出全部”传 `exportAll=true`，上限放宽到 100000 条，仍复用当前筛选条件和日期范围。
+- `GET /admin/api/tracking/event-keys` 从已落库的 `tracking_event` 中扫描真实 `event_key` 和出现过的 `scope_kind`，由 api-server 去重后返回，前端只用静态清单补中文标题和备注。
+- 任务配置页的 Event Key 候选使用同一个真实 key 列表，并只默认展示出现过 `user` scope 的 key；自定义 key 入口保留给提前配置未写入的新埋点。
+
 ## 验证
 
 - `cargo test -p api-server --manifest-path server-rs/Cargo.toml admin`
diff --git a/docs/technical/【后端架构】外部生成Worker化方案-2026-06-03.md b/docs/technical/【后端架构】外部生成Worker化方案-2026-06-03.md
index 6093f3207..db360fac8 100644
--- a/docs/technical/【后端架构】外部生成Worker化方案-2026-06-03.md
+++ b/docs/technical/【后端架构】外部生成Worker化方案-2026-06-03.md
@@ -38,7 +38,7 @@
 队列状态对前端只通过 `api-server` BFF 暴露，不允许前端直接查询 SpacetimeDB private table：
 
 - `GET /api/runtime/external-generation/queue-overview`：当前账号队列概览，用于兼容旧展示和轻量状态读取。返回 pending、running、未确认终态数量和更新时间。
-- `GET /api/runtime/external-generation/jobs?limit=20&includeAcknowledgedTerminal=false`：当前账号正式生成任务列表，用于 `我的` 页签任务列表和完成 / 失败提示。返回每个任务的 job id、kind、source、可展示 label、状态、进度、错误、`priceMudPoints`、`refundLedgerId`、`notificationAcknowledgedAt` 和时间戳。默认不返回已确认的终态任务。
+- `GET /api/runtime/external-generation/jobs?limit=20&includeAcknowledgedTerminal=false`：当前账号正式生成任务列表，用于 `我的` 页签任务列表和完成 / 失败提示。返回每个任务的 job id、kind、source、可展示 label、状态、进度、错误、`priceMudPoints`、`refundLedgerId`、`notificationAcknowledgedAt` 和时间戳。默认不返回已确认的终态任务；需要拆分活跃和完成列表时可追加 `statuses=running,queued` 或 `statuses=completed,failed`，BFF 仍只返回当前账号任务。
 - `POST /api/runtime/external-generation/jobs/acknowledge`：生成完成 / 失败提示展示后由前端后台调用，BFF 只传当前账号 job ids，后端只确认属于当前账号且已终态的任务。
 - `GET /api/runtime/external-generation/jobs/{jobId}`：单 job 状态，用于生成页轮询某次动作。返回 `jobId`、`jobKind`、`sourceModule`、`sourceEntityId`、`status`、`attempt`、`maxAttempts`、`createdAt`、`startedAt`、`completedAt`、`updatedAt`、可展示的 `requestLabel`、可展示的 `lastErrorMessage`、以及业务侧下一次轮询所需的 source 标识。
 
diff --git a/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md b/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
index 14c0f8c64..06662c9be 100644
--- a/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
+++ b/docs/【后端架构】server-rs与SpacetimeDB数据契约-2026-05-15.md
@@ -60,7 +60,7 @@ npm run check:server-rs-ddd
 - 平台基础能力：`/api/llm/*`、`/api/speech/volcengine/*`，只保留通用 LLM 和语音代理。
 - 资产基础能力：`/api/assets/direct-upload-tickets`、`/api/assets/sts-upload-credentials`、`/api/assets/objects/*`、`/api/assets/read-*`，负责直传、确认、绑定和读取。
 - 外部 OpenAPI：`/api/external/v1/openapi.json`、`/api/external/v1/assets/direct-upload-tickets`、`/api/external/v1/assets/objects/confirm`、`/api/external/v1/assets/read-url`、`/api/external/v1/editor/*`，使用 Bearer API Key 鉴权；API Key 管理仍在登录态 `/api/profile/api-keys`，不进入外部 OpenAPI JSON。
-- 创作 / 游玩支撑能力：`/api/creation-entry/config`、`/api/ai/tasks*`、`/api/runtime/chat/*`、`/api/runtime/settings`、`/api/runtime/save/snapshot`、`/api/profile/browse-history`、`/api/profile/save-archives*`、`/api/profile/play-stats`、`/api/assets/history`、`/api/assets/character-visual/*`、`/api/assets/character-animation/*`、`/api/assets/character-workflow-cache*`、`/api/assets/hyper3d/*`、`/api/runtime/custom-world/asset-studio/*`、`/api/editor/projects*`。
+- 创作 / 游玩支撑能力：`/api/creation-entry/config`、`/api/ai/tasks*`、`/api/runtime/chat/*`、`/api/runtime/settings`、`/api/runtime/save/snapshot`、`/api/profile/browse-history`、`/api/profile/save-archives*`、`/api/profile/play-stats`、`/api/assets/history`、`/api/assets/character-visual/*`、`/api/assets/character-animation/*`、`/api/assets/character-workflow-cache*`、`/api/assets/hyper3d/*`、`/api/runtime/custom-world/asset-studio/*`、`/api/editor/projects*`。`/api/runtime/custom-world/asset-studio/*` 解析默认角色形象 / 动作提示词时可以在 OSS 缓存不可用或未配置时按无缓存返回默认提示；保存 workflow 缓存和真实素材读写仍必须要求 OSS 正常可用。
 - 后台入口配置：`/admin/api/creation-entry/config`、`/admin/api/creation-entry/config/banners` 和 `/admin/api/creation-entry/config/interactions`。
 - 自定义世界 / RPG：`/api/runtime/custom-world*`、`/api/story/*`、`/api/runtime/chat/*`。
 - 拼图：`/api/runtime/puzzle/*`。
@@ -202,6 +202,7 @@ npm run check:server-rs-ddd
 2. 编辑器画板所有会调用外部生成 provider 的入口都不从前端请求接收 `priceMudPoints`；实际扣费真相以后端运行时模型定价配置为准，前端按钮泥点只作为展示。
 3. 编辑器图片生成 / 图片修改 / 图标 spritesheet / UI 设计图提取素材 / 视频 / 角色动作 / 音效 / 背景音乐必须在后端计算模型价格后使用 `execute_billable_asset_operation_with_cost` 预扣泥点；预扣失败必须 fail-closed，不得继续提交 VectorEngine、Ark、Suno 或 Vidu 上游任务。
 4. 音频生成的编辑器链路虽然任务提交和结果发布分离，仍必须把提交时后端计算出的模型价格写入 `AudioAssetBindingTarget.billing_points_cost`，最终发布落资产时按该价格扣费；创作音频目标未提供该字段时才使用旧的创作音频固定成本。
+5. 编辑器图片生成、图片修改、图标 spritesheet 和 UI 设计图提取素材的参考图可以提交 Data URL 或已登记的 generated objectKey；objectKey 必须归属于当前账号的 `editor_project_resource`、`editor_asset` 或 `asset_object`，后端通过归属校验后才签名读取 OSS。快速编辑、图标素材和 UI 素材提取的额外参考图必须真正传入 provider，不得只写入 `generationInputs` 展示快照；UI 素材提取额外参考图上限为 5 张，普通图片生成上限 5 张，快速编辑 / 图标素材上限 8 张额外参考图。
 
 ## 外部服务与资产
 
@@ -245,7 +246,7 @@ npm run check:server-rs-ddd
 
 - Rust 结构体：`ExternalGenerationJob`
 - 源码：`server-rs/crates/spacetime-module/src/external_generation.rs`
-- 用途：外部生成 worker 的持久任务队列和用户可见生成任务列表；`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 时，`api-server` HTTP 角色只入队，`external-generation-worker` 角色通过 claim lease 领取、续租、执行，并用 `lease_token` 栅栏回写完成 / 失败。队列行同时保存 `price_mud_points`、`refund_ledger_id` 和 `notification_acknowledged_at`，BFF 通过 `GET /api/runtime/external-generation/jobs` 返回当前账号的正式生成任务列表、价格、状态和未确认终态数量；前端只能展示该后端事实，完成 / 失败提示展示后后台调用 `POST /api/runtime/external-generation/jobs/acknowledge` 由后端写确认时间，关闭按钮只收起本地弹窗，未确认终态任务会在下次登录后再次集中弹出。拼图 `compile_puzzle_draft` 的前置 `compile_puzzle_agent_draft`、`generate_puzzle_images` 与 `generate_puzzle_ui_background` 的业务写回也在对应 SpacetimeDB transaction 内校验 `job_id + worker_id + lease_token`、job kind、owner 和 source entity，避免过期 worker 写 session / work profile；图片画布编辑器的 `editor_image_generation`、`editor_image_edit`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation` 复用同一队列表，worker 成功后经 `api-server` facade 写入 `editor_project_resource` / `editor_asset` / `editor_canvas.layers_json`，前端只通过 BFF job 状态轮询和项目快照读取恢复完成态。`GENARRATIVE_EXTERNAL_GENERATION_MODE=inline` 时不创建该队列行，三个 external generation guard 字段必须同时为空才允许 api-server 受控同步写回，半空 guard 仍会拒绝。worker 成功写回业务事实后才能 complete job；业务失败态写回成功后才能 fail job，失败态未写回时保留租约等待后续重领。
+- 用途：外部生成 worker 的持久任务队列和用户可见生成任务列表；`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 时，`api-server` HTTP 角色只入队，`external-generation-worker` 角色通过 claim lease 领取、续租、执行，并用 `lease_token` 栅栏回写完成 / 失败。队列行同时保存 `price_mud_points`、`refund_ledger_id` 和 `notification_acknowledged_at`，BFF 通过 `GET /api/runtime/external-generation/jobs` 返回当前账号的正式生成任务列表、价格、状态和未确认终态数量；前端只能展示该后端事实，完成 / 失败提示展示后后台调用 `POST /api/runtime/external-generation/jobs/acknowledge` 由后端写确认时间，关闭按钮只收起本地弹窗，未确认终态任务会在下次登录后再次集中弹出。拼图 `compile_puzzle_draft` 的前置 `compile_puzzle_agent_draft`、`generate_puzzle_images` 与 `generate_puzzle_ui_background` 的业务写回也在对应 SpacetimeDB transaction 内校验 `job_id + worker_id + lease_token`、job kind、owner 和 source entity，避免过期 worker 写 session / work profile；图片画布编辑器的 `editor_image_generation`、`editor_image_edit`、`editor_background_removal`、`editor_icon_spritesheet_generation`、`editor_ui_design_asset_extraction`、`editor_character_animation_generation`、`editor_video_generation`、`editor_sound_effect_generation` 和 `editor_background_music_generation` 复用同一队列表，worker 成功后经 `api-server` facade 写入 `editor_project_resource` / `editor_asset` / `editor_canvas.layers_json`，前端只通过 BFF job 状态轮询和项目快照读取恢复完成态。`GENARRATIVE_EXTERNAL_GENERATION_MODE=inline` 时不创建该队列行，三个 external generation guard 字段必须同时为空才允许 api-server 受控同步写回，半空 guard 仍会拒绝。worker 成功写回业务事实后才能 complete job；业务失败态写回成功后才能 fail job，失败态未写回时保留租约等待后续重领。
 
 ### `external_generation_job_event`
 
@@ -468,7 +469,7 @@ npm run check:server-rs-ddd
 
 - Rust 结构体：`EditorProjectResource`
 - 源码：`server-rs/crates/spacetime-module/src/editor_project_storage.rs`
-- 说明：图片画布工程资源元数据表，保存已经放入某个 project 画布的上传 / 生成图片资源快照、OSS 引用、尺寸、来源类型、prompt、provider、task、源资源关系、`asset_kind`、`generation_inputs_json` 和 `public_showcase_enabled`。`asset_kind` 标记角色、图标、UI 设计图、视频、音频等素材类别；`generation_inputs_json` 保存用户可见生成输入快照，供图片信息页刷新后恢复；`public_showcase_enabled` 控制该生成资源是否进入 `/creation` 的 `陶泥儿精选`，新增和旧行默认 `true`，但通过 `source_resource_id` 指向同一 owner 源资源且媒体引用相同的画布副本默认不公开。图片 / 图标 / UI 提取等生成 BFF 在请求携带 `project_id` 时负责创建该表记录并把 resource 快照返回前端；前端只保存布局引用，不能把同一生成结果再次作为正式业务真相写入。项目封面快照也落在该表，使用 `asset_kind = project-cover-snapshot`、`source_type = uploaded` 和私有 OSS / asset object 引用，代表画布当前视口栅格化后的静态封面；项目列表和创作主页最近项目只读取最新封面快照资源，不在列表页根据 `editor_canvas.layers_json` 临时拼画布。从账号级素材库把同一生成素材拖回同一项目画布时，后端优先复用同项目内同源同媒体资源，避免每个图层实例都插入新的资源行。公开精选读取走 `GET /api/editor/showcase/resources`，只返回 `source_type = generated`、图片源非空且 `public_showcase_enabled = true` 的全站资源，并跳过同源同媒体副本，按 `created_at` 倒序取前 36 条；公开响应必须透传 `ownerUserId`，供精选卡片在缺少作者昵称时显示作者 id。公开开关修改走登录鉴权 `PATCH /api/editor/project-resources/{resource_id}/showcase`，只允许资源 owner 更新。账号级素材删除不级联删除该表，避免历史画布丢图。`editor_canvas.layers_json` 只保存图层几何、层级、分组、资源引用和生成器对象；新写入不再把素材生成输入快照作为图层布局真相保存，旧布局字段只作为兼容兜底读取。
+- 说明：图片画布工程资源元数据表，保存已经放入某个 project 画布的上传 / 生成图片资源快照、OSS 引用、尺寸、来源类型、prompt、provider、task、源资源关系、`asset_kind`、`generation_inputs_json` 和 `public_showcase_enabled`。`asset_kind` 标记角色、图标、UI 设计图、视频、音频等素材类别；`generation_inputs_json` 保存用户可见生成输入快照，供图片信息页刷新后恢复；`public_showcase_enabled` 控制该生成资源是否进入 `/creation` 的 `陶泥儿精选`，新增和旧行默认 `true`，但通过 `source_resource_id` 指向同一 owner 源资源且媒体引用相同的画布副本默认不公开。图片 / 图标 / UI 提取等生成 BFF 在请求携带 `project_id` 时负责创建该表记录并把 resource 快照返回前端；前端只保存布局引用，不能把同一生成结果再次作为正式业务真相写入。项目封面快照也落在该表，使用 `asset_kind = project-cover-snapshot`、`source_type = uploaded` 和私有 OSS / asset object 引用，代表画布当前视口栅格化后的静态封面；项目列表和创作主页最近项目只读取最新封面快照资源，不在列表页根据 `editor_canvas.layers_json` 临时拼画布。从账号级素材库把同一生成素材拖回同一项目画布时，后端优先复用同项目内同源同媒体资源，避免每个图层实例都插入新的资源行。公开精选读取走 `GET /api/editor/showcase/resources`，只返回 `source_type = generated`、图片源非空且 `public_showcase_enabled = true` 的全站资源，并跳过同源同媒体副本，按 `created_at` 倒序取前 36 条；公开响应的作者展示字段优先提供 `authorDisplayName` / `display_name`，没有展示名时提供 `authorPublicUserCode` / 陶泥号作为展示兜底，前端公开展示绝不能兜底到内部 `ownerUserId` / `user_id`。公开开关修改走登录鉴权 `PATCH /api/editor/project-resources/{resource_id}/showcase`，只允许资源 owner 更新。账号级素材删除不级联删除该表，避免历史画布丢图。`editor_canvas.layers_json` 只保存图层几何、层级、分组、资源引用和生成器对象；新写入不再把素材生成输入快照作为图层布局真相保存，旧布局字段只作为兼容兜底读取。
 - 索引：`by_editor_project_resource_project_id`、`by_editor_project_resource_owner_user_id`。
 
 ### `editor_asset_folder`
@@ -482,7 +483,7 @@ npm run check:server-rs-ddd
 
 - Rust 结构体：`EditorAsset`
 - 源码：`server-rs/crates/spacetime-module/src/editor_project_storage.rs`
-- 说明：图片画布账号级素材表，保存用户上传 / 生成素材的名称、文件夹、图片读取地址、OSS 引用、尺寸、来源类型、prompt、provider、task、`asset_kind`、`generation_inputs_json` 和可选 `source_resource_id`。素材在同一账号的所有项目中可见；图片 / 图标 / UI 提取等生成 BFF 在请求携带 `asset_folder_id` 时负责创建账号级生成素材并返回 asset 快照，若同次生成也创建了 `editor_project_resource`，则把该 `resource_id` 写入 `source_resource_id`。素材库快照通过 `source_resource_id` 回查对应 project resource 的 `public_showcase_enabled`，供左侧素材菜单展示和切换公开状态；公开开关本身仍只落在 `editor_project_resource`，不在账号素材表复制真相。素材放入画布时复制为 `editor_project_resource` 并由图层引用 resourceId，画布从 resource / asset 级元数据恢复素材类别和用户可见生成输入快照。
+- 说明：图片画布账号级素材表，保存用户上传 / 生成素材的名称、文件夹、图片读取地址、可选封面 `thumbnail_src`、OSS 引用、尺寸、来源类型、prompt、provider、task、`asset_kind`、`generation_inputs_json` 和可选 `source_resource_id`。素材在同一账号的所有项目中可见；图片 / 图标 / UI 提取等生成 BFF 在请求携带 `asset_folder_id` 时负责创建账号级生成素材并返回 asset 快照，若同次生成也创建了 `editor_project_resource`，则把该 `resource_id` 写入 `source_resource_id`。生成视频会抽取首帧封面写入 `thumbnail_src`，素材库和再次放入画布时用它作为 video poster。素材库快照通过 `source_resource_id` 回查对应 project resource 的 `public_showcase_enabled`，供左侧素材菜单展示和切换公开状态；公开开关本身仍只落在 `editor_project_resource`，不在账号素材表复制真相。素材放入画布时复制为 `editor_project_resource` 并由图层引用 resourceId，画布从 resource / asset 级元数据恢复素材类别和用户可见生成输入快照。
 - 索引：`by_editor_asset_owner_user_id`、`by_editor_asset_folder_id`。
 
 ### `inventory_slot`
diff --git a/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md b/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
index 69c800592..335823fe3 100644
--- a/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
+++ b/docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
@@ -53,9 +53,9 @@ Windows 本地 `npm run dev` / `npm run dev:api-server` 会用空的 `RUSTC_WRAP
 
 Windows 本地如果已在 `%LOCALAPPDATA%\Genarrative\ffmpeg\bin` 安装 FFmpeg，`npm run dev` / `npm run dev:api-server` 会自动把该目录加入本次 `api-server` 子进程 `Path`，并注入 `CHARACTER_ANIMATION_FFMPEG_PATH` / `CHARACTER_ANIMATION_FFPROBE_PATH` 的绝对路径。这样即使外层终端或长期运行的 dev 进程是在安装 FFmpeg 之前启动，角色动画抽帧也不会继续因为 `ffmpeg: program not found` 失败；若手动配置了上述环境变量或 `GENARRATIVE_CHARACTER_ANIMATION_*` 前缀变量，显式配置优先。
 
-开发态 `npm run dev` 与 `npm run dev:api-server` 会默认注入 `GENARRATIVE_DEV_PASSWORD_ENTRY_AUTO_REGISTER_ENABLED=true` 和 `GENARRATIVE_PROCESS_ROLE=all`，因此密码登录在本地开发环境可直接注册未知手机号账号，且本地 `api-server` 会同时监听 HTTP 并消费外部生成队列；显式设置 `GENARRATIVE_PROCESS_ROLE` 时保留显式值。生产环境仍按 `api-server` 配置默认关闭密码自动注册，并由独立 worker 进程消费队列。
+开发态 `npm run dev` 与 `npm run dev:api-server` 会默认注入 `GENARRATIVE_DEV_PASSWORD_ENTRY_AUTO_REGISTER_ENABLED=true` 和 `GENARRATIVE_PROCESS_ROLE=all`，因此密码登录在本地开发环境可直接注册未知手机号账号，且本地 `api-server` 会同时监听 HTTP 并消费外部生成队列；显式设置 `GENARRATIVE_PROCESS_ROLE` 时保留显式值。Linux 本地默认 `all` 角色启动前，dev 脚本会停止当前仓库、同一个 SpacetimeDB server / database 下遗留的 `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程，避免旧 worker 二进制继续抢同一条队列并在业务写回时制造 procedure 超时；显式拆分 `api` / `external-generation-worker` 做生产式验证时不会触发这项清理。生产环境仍按 `api-server` 配置默认关闭密码自动注册，并由独立 worker 进程消费队列。
 
-本地排查外部内容生成 worker 队列时，默认同一 Rust 进程同时监听 HTTP 并消费 `external_generation_job` 队列；更接近生产的验证应分别启动 `api`、`external-generation-worker` 和 `external-generation-controller`。生产默认 `GENARRATIVE_PROCESS_ROLE=api`，外部生成任务由独立 `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程消费；生产与容器扩缩容验证保持 `queue`。当前进入持久队列的外部生成动作包括：拼图 `compile_puzzle_draft` / `generate_puzzle_images` / `generate_puzzle_ui_background`，跳一跳 `compile-draft` / `regenerate-tiles`，拼消消 `compile-draft` / `regenerate-atlas`，敲木鱼 `compile-draft` / `regenerate-hit-object`，以及图片画布 `editor_image_generation` / `editor_image_edit` / `editor_icon_spritesheet_generation` / `editor_ui_design_asset_extraction` / `editor_character_animation_generation` / `editor_video_generation` / `editor_sound_effect_generation` / `editor_background_music_generation`。非外部 provider 生成动作继续 inline，不进入队列。显式把本地进程角色设为 `api` 且没有 worker 时，HTTP 只返回 queued/running，不会兜底执行外部 provider。
+本地排查外部内容生成 worker 队列时，默认同一 Rust 进程同时监听 HTTP 并消费 `external_generation_job` 队列；更接近生产的验证应分别启动 `api`、`external-generation-worker` 和 `external-generation-controller`。生产默认 `GENARRATIVE_PROCESS_ROLE=api`，外部生成任务由独立 `GENARRATIVE_PROCESS_ROLE=external-generation-worker` 进程消费；生产与容器扩缩容验证保持 `queue`。当前进入持久队列的外部生成动作包括：拼图 `compile_puzzle_draft` / `generate_puzzle_images` / `generate_puzzle_ui_background`，跳一跳 `compile-draft` / `regenerate-tiles`，拼消消 `compile-draft` / `regenerate-atlas`，敲木鱼 `compile-draft` / `regenerate-hit-object`，以及图片画布 `editor_image_generation` / `editor_image_edit` / `editor_background_removal` / `editor_icon_spritesheet_generation` / `editor_ui_design_asset_extraction` / `editor_character_animation_generation` / `editor_video_generation` / `editor_sound_effect_generation` / `editor_background_music_generation`。非外部 provider 生成动作继续 inline，不进入队列。显式把本地进程角色设为 `api` 且没有 worker 时，HTTP 只返回 queued/running，不会兜底执行外部 provider。
 
 `我的` 页签或排障面板展示队列等待时，只读取 BFF 队列接口：`GET /api/runtime/external-generation/queue-overview` 查看当前用户可见队列概览，`GET /api/runtime/external-generation/jobs/{jobId}` 查看单 job 状态。生成页 / 进度页不承接队列概览，只展示当前玩法业务进度；队列接口只提供等待 / 运行 / 失败 / 完成状态补充，最终草稿、作品和结果页仍要轮询对应玩法 session/detail 接口收敛到 ready 或 failed；不要直接查询 `external_generation_job` private table，也不要把 worker 内部 payload 暴露到前端。
 
@@ -385,7 +385,7 @@ Pingora current release 自审脚本 `scripts/ops/pingora-current-release-audit.
 
 生产环境变量模板：`deploy/env/api-server.env.example`。真实密钥只放服务器，不提交 Git，不写入文档示例。
 
-`api-server` 进程角色由 `GENARRATIVE_PROCESS_ROLE` 控制：`api` 只监听 HTTP，`external-generation-worker` 只消费外部生成队列，`external-generation-controller` 只管理 worker systemd 实例，`all` 仅用于本地或临时 smoke，不隐式启动 controller。外部生成策略由 `GENARRATIVE_EXTERNAL_GENERATION_MODE` 控制；生产和容器压测默认保持 `queue`，本地 `npm run dev` / `npm run dev:api-server` 默认由 dev 脚本注入 `GENARRATIVE_PROCESS_ROLE=all`，如果外部生成策略为 `queue` 会由同一进程消费队列。`inline` 只用于本地或低并发同步排查，HTTP handler 会直接复用 worker executor，完成后返回 `completed`，但不会落 `external_generation_job`，也不能通过增加 worker 进程扩吞吐。外部生成 worker 使用同一发布包和同一套 SpacetimeDB 配置，按实例数和 `GENARRATIVE_EXTERNAL_GENERATION_WORKER_CONCURRENCY` 动态扩缩；生产默认由 `genarrative-external-generation-controller.service` 读取 `get_external_generation_queue_stats_and_return`，按 `claimable_pending + running_active + expired_running` 计算目标 worker 数，并对 `genarrative-external-generation-worker@N.service` 精确执行 `systemctl start/stop`。controller 参数模板是 `deploy/env/external-generation-controller.env.example`：默认保底 `MIN_WORKERS=1`、上限 `MAX_WORKERS=8`、每 worker 目标 `TARGET_JOBS_PER_WORKER=2`、`POLL_INTERVAL_MS=10000`、连续 `SCALE_DOWN_IDLE_ROUNDS=6` 轮完全空闲才缩容；缩容每轮只停止最高编号的一个实例，且不主动停止 `@1`。worker 收到 SIGINT/SIGTERM 后会停止 claim 新任务并等待当前任务完成；若进程被硬杀、机器断电或超过 systemd `TimeoutStopSec`，未完成任务才会在 lease 过期后由其它 worker 重领。每个 worker 实例应设置唯一 `GENARRATIVE_EXTERNAL_GENERATION_WORKER_ID`，默认会用主机名和 pid 兜底；systemd 生产模板 `deploy/systemd/genarrative-external-generation-worker@.service` 会用 `%H-%i` 生成实例 ID，并把 tracking outbox 隔离到 `/var/lib/genarrative/tracking-outbox/%H-%i`。`Genarrative-Server-Provision` 会安装 worker 模板、controller unit 和两份专属 env 模板，默认 enable 首个 `genarrative-external-generation-worker@1.service` 与 `genarrative-external-generation-controller.service`；首次 API deploy 会在默认 worker pattern 下自动 `enable --now genarrative-external-generation-worker@1.service` 并等待 worker active，同时重启并验活 controller。手动兜底扩容仍可用 `systemctl start genarrative-external-generation-worker@2.service` / `@3.service`，缩容用 `systemctl stop genarrative-external-generation-worker@N.service`；controller 下轮会按队列压力修正到目标实例数。worker 专属参数模板是 `deploy/env/external-generation-worker.env.example`，密钥与 SpacetimeDB 连接仍复用 `/etc/genarrative/api-server.env`。API 发布脚本默认会重启并验活 `genarrative-external-generation-worker@*.service` 和 `genarrative-external-generation-controller.service`；若本次只发 HTTP 且不希望滚动 worker，可传 `--no-worker-services`，若不希望重启 controller 可传 `--no-worker-controller`。`GENARRATIVE_EXTERNAL_GENERATION_WORKER_POLL_INTERVAL_MS` 控制空队列轮询间隔，`GENARRATIVE_EXTERNAL_GENERATION_WORKER_LEASE_SECONDS` 控制单次 lease，worker 会约每三分之一 lease、最长 30 秒续租；该值应覆盖一次心跳网络抖动窗口，不需要大于完整外部生成链路耗时。SpacetimeDB 使用自身事务时间计算 claim/renew/complete/fail，完成和失败回写还会校验 `lease_token` 与未过期 lease，避免同一 job 被过期 worker 覆盖。首版 worker 粒度是单动作单 job，不拆阶段 job；当前外部生成动作覆盖拼图、跳一跳、拼消消、敲木鱼和图片画布编辑器生成入口，纯元信息保存、发布、试玩启动、运行态动作和公开读取继续 inline。图片画布 worker 成功后由后端保存 `editor_project_resource` / `editor_asset` / `editor_canvas.layers_json`，前端只轮询 job 并重新读取项目快照。当前生成业务失败只做用户重新触发，不做自动业务重试，避免 worker 退款和重试成功之间产生钱包账本漂移。
+`api-server` 进程角色由 `GENARRATIVE_PROCESS_ROLE` 控制：`api` 只监听 HTTP，`external-generation-worker` 只消费外部生成队列，`external-generation-controller` 只管理 worker systemd 实例，`all` 仅用于本地或临时 smoke，不隐式启动 controller。外部生成策略由 `GENARRATIVE_EXTERNAL_GENERATION_MODE` 控制；生产和容器压测默认保持 `queue`，本地 `npm run dev` / `npm run dev:api-server` 默认由 dev 脚本注入 `GENARRATIVE_PROCESS_ROLE=all`，如果外部生成策略为 `queue` 会由同一进程消费队列。`inline` 只用于本地或低并发同步排查，HTTP handler 会直接复用 worker executor，完成后返回 `completed`，但不会落 `external_generation_job`，也不能通过增加 worker 进程扩吞吐。外部生成 worker 使用同一发布包和同一套 SpacetimeDB 配置，按实例数和 `GENARRATIVE_EXTERNAL_GENERATION_WORKER_CONCURRENCY` 动态扩缩；生产默认由 `genarrative-external-generation-controller.service` 读取 `get_external_generation_queue_stats_and_return`，按 `claimable_pending + running_active + expired_running` 计算目标 worker 数，并对 `genarrative-external-generation-worker@N.service` 精确执行 `systemctl start/stop`。controller 参数模板是 `deploy/env/external-generation-controller.env.example`：默认保底 `MIN_WORKERS=1`、上限 `MAX_WORKERS=8`、每 worker 目标 `TARGET_JOBS_PER_WORKER=2`、`POLL_INTERVAL_MS=10000`、连续 `SCALE_DOWN_IDLE_ROUNDS=6` 轮完全空闲才缩容；缩容每轮只停止最高编号的一个实例，且不主动停止 `@1`。worker 收到 SIGINT/SIGTERM 后会停止 claim 新任务并等待当前任务完成；若进程被硬杀、机器断电或超过 systemd `TimeoutStopSec`，未完成任务才会在 lease 过期后由其它 worker 重领。每个 worker 实例应设置唯一 `GENARRATIVE_EXTERNAL_GENERATION_WORKER_ID`，默认会用主机名和 pid 兜底；systemd 生产模板 `deploy/systemd/genarrative-external-generation-worker@.service` 会用 `%H-%i` 生成实例 ID，并把 tracking outbox 隔离到 `/var/lib/genarrative/tracking-outbox/%H-%i`。`Genarrative-Server-Provision` 会安装 worker 模板、controller unit 和两份专属 env 模板，默认 enable 首个 `genarrative-external-generation-worker@1.service` 与 `genarrative-external-generation-controller.service`；首次 API deploy 会在默认 worker pattern 下自动 `enable --now genarrative-external-generation-worker@1.service` 并等待 worker active，同时重启并验活 controller。手动兜底扩容仍可用 `systemctl start genarrative-external-generation-worker@2.service` / `@3.service`，缩容用 `systemctl stop genarrative-external-generation-worker@N.service`；controller 下轮会按队列压力修正到目标实例数。worker 专属参数模板是 `deploy/env/external-generation-worker.env.example`，密钥与 SpacetimeDB 连接仍复用 `/etc/genarrative/api-server.env`。API 发布脚本默认会重启并验活 `genarrative-external-generation-worker@*.service` 和 `genarrative-external-generation-controller.service`；若本次只发 HTTP 且不希望滚动 worker，可传 `--no-worker-services`，若不希望重启 controller 可传 `--no-worker-controller`。`GENARRATIVE_EXTERNAL_GENERATION_WORKER_POLL_INTERVAL_MS` 控制空队列轮询间隔，`GENARRATIVE_EXTERNAL_GENERATION_WORKER_LEASE_SECONDS` 控制单次 lease，worker 会约每三分之一 lease、最长 30 秒续租；该值应覆盖一次心跳网络抖动窗口，不需要大于完整外部生成链路耗时。SpacetimeDB 使用自身事务时间计算 claim/renew/complete/fail，完成和失败回写还会校验 `lease_token` 与未过期 lease，避免同一 job 被过期 worker 覆盖。首版 worker 粒度是单动作单 job，不拆阶段 job；当前外部生成动作覆盖拼图、跳一跳、拼消消、敲木鱼和图片画布编辑器生成 / 抠图入口，纯元信息保存、发布、试玩启动、运行态动作和公开读取继续 inline。图片画布 worker 成功后由后端保存 `editor_project_resource` / `editor_asset` / `editor_canvas.layers_json`，前端只轮询 job 并重新读取项目快照。当前生成业务失败只做用户重新触发，不做自动业务重试，避免 worker 退款和重试成功之间产生钱包账本漂移。
 
 `Genarrative-Server-Provision` 会安装 systemd 模板和 Nginx 站点模板，不再安装 clang / lld / pkg-config / OpenSSL headers / sccache 等通用构建链依赖。因 VectorEngine 图片上游 POST 已改用 `libcurl`，当前 Linux release 构建出的 `api-server` 运行时需要 `OPENSSL_3.2.0` 符号；Ubuntu 24.04 apt 默认只提供 OpenSSL 3.0.x，不能直接满足该符号版本。Provision 会把 OpenSSL `3.2.0` 独立安装到 `/opt/genarrative/openssl-3.2.0`，校验官方 tarball SHA256，并只通过 `genarrative-api.service` 的 `LD_LIBRARY_PATH=/opt/genarrative/openssl-3.2.0/lib64:/opt/genarrative/openssl-3.2.0/lib` 让 api-server 使用，避免替换系统 OpenSSL 或影响 ssh / nginx / apt。Ubuntu / apt 目标机为完成这一步会安装 `build-essential`、`ca-certificates`、`curl`、`perl`、`tar` 等 OpenSSL 运行时自举工具；这只服务于独立 OpenSSL 运行时安装，不代表 provision 重新承担 api-server 构建职责。Ubuntu / apt 目标机会额外安装 `libnginx-mod-http-brotli-filter` 与 `libnginx-mod-http-brotli-static`，随后由 `scripts/jenkins-server-provision.sh` 通过临时 `nginx -t` 配置探测 Brotli 指令是否可用；该临时配置必须先 `include /etc/nginx/modules-enabled/*.conf`，因为 apt 安装的 Brotli 是动态模块，不会出现在普通 `nginx -V` 编译参数里。探测成功才在渲染后的 `deploy/nginx/genarrative.conf` / `genarrative-dev-http.conf` 中启用 Brotli，避免未安装模块的机器直接写入无效配置。Provision 写入 Genarrative Nginx 站点时会把 `/etc/nginx/sites-enabled/default*` 移到 `/etc/nginx/sites-disabled/`，避免 Debian / Certbot 默认站点继续占用 `genarrative.world` / `www.genarrative.world` 并在 `nginx -T` 中出现 `conflicting server name ... ignored`。如果 `nginx -t` 失败，脚本会恢复写入前的 Genarrative 配置和被移动的默认站点。
 
diff --git a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
index 347aca58c..b89de6f1a 100644
--- a/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
+++ b/docs/【玩法创作】创作主页与项目入口改版计划-2026-06-18.md
@@ -63,7 +63,7 @@
 
 `陶泥儿精选` 是页面底部的全站公开画布生成素材瀑布流，不承载玩法入口列表。瀑布流卡片按真实素材宽高设置预览比例，同一行允许出现不同高度卡片，不使用固定等高网格。创作入口配置仍继续来自 `/api/creation-entry/config`，供旧创作入口和具体 `/creation/<play>` 工作台使用，但不作为本页精选区内容。
 
-精选内容只使用 `editor_project_resource` 中 `sourceType="generated"` 且 `public_showcase_enabled = true` 的项目资源，代表用户通过图片画布生成、已经落入某个项目并允许公开展示的素材。账号级 `editor_asset` 只表示跨项目素材库，不单独作为精选来源；上传素材、公开作品图片和 `mock_generated` 资源都不进入精选。从项目素材把同一个生成素材再次拖入画布时，只是新增图层实例或复用同源同媒体项目资源，不应额外生成新的精选候选；历史上已经产生的同源同媒体副本也需要在精选读取时跳过。公开 BFF 必须返回资源 `ownerUserId`，前端在没有作者昵称字段时用该 id 作为作者兜底。若现有数据缺少提示词、作者标识或成本字段，v1 显示保守占位，不伪造内容。
+精选内容只使用 `editor_project_resource` 中 `sourceType="generated"` 且 `public_showcase_enabled = true` 的项目资源，代表用户通过图片画布生成、已经落入某个项目并允许公开展示的素材。账号级 `editor_asset` 只表示跨项目素材库，不单独作为精选来源；上传素材、公开作品图片和 `mock_generated` 资源都不进入精选。从项目素材把同一个生成素材再次拖入画布时，只是新增图层实例或复用同源同媒体项目资源，不应额外生成新的精选候选；历史上已经产生的同源同媒体副本也需要在精选读取时跳过。公开 BFF 必须返回资源作者公开展示字段：优先 `authorDisplayName` / `display_name`，没有展示名时兜底 `authorPublicUserCode` / 陶泥号；前端展示绝不能兜底到内部 `ownerUserId` / `user_id`。若现有数据缺少提示词、作者公开标识或成本字段，v1 显示保守占位，不伪造内容。
 
 Tab：
 
@@ -100,7 +100,7 @@ Tab：
 
 数据来源：
 
-- 读取公开 BFF `GET /api/editor/showcase/resources` 返回的全站公开 `editor_project_resource` 快照，快照包含 `ownerUserId` 作为作者展示兜底；前端只保留 `sourceType="generated"` 且 `publicShowcaseEnabled !== false` 的画布生成资源；若某条资源通过 `sourceResourceId` 指回同一 owner 的源资源且媒体引用相同，则视为拖拽画布副本，不进入精选。
+- 读取公开 BFF `GET /api/editor/showcase/resources` 返回的全站公开 `editor_project_resource` 快照，快照包含 `authorDisplayName` / `display_name` 和 `authorPublicUserCode` / 陶泥号用于作者展示；前端只保留 `sourceType="generated"` 且 `publicShowcaseEnabled !== false` 的画布生成资源；若某条资源通过 `sourceResourceId` 指回同一 owner 的源资源且媒体引用相同，则视为拖拽画布副本，不进入精选。作者展示优先展示名，没有展示名时展示陶泥号，绝不能展示内部 `ownerUserId` / `user_id`。
 - 素材包、角色、UI、音乐、音效、视频和美宣都必须来自已存在项目资源；素材库里尚未放入任何项目的账号级素材不展示。
 - 未登录用户也可读取公开精选；当没有公开画布生成资源时，不再用公开作品图片补充，只显示简洁空态。
 - 上传素材、公开作品图片、mock 资源和假组合都不进入精选。
diff --git a/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md b/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
index ed47b3835..9badb0239 100644
--- a/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
+++ b/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
@@ -180,29 +180,31 @@ RPG / 拼图等运行态存档仍以 `/api/profile/save-archives` 的后端列
 2. v1 不再单独生成角色图片，运行态固定使用抠除白底后的陶泥儿 logo 透明 PNG 作为玩家角色；
 3. 地板贴图只调用一次 image2，输出一张 `1024x1536` 竖版、`3列*6行`、单一纯洋红 `#FF00FF` key 安全缝 / 外圈背景的立方体主题物体 UV 展开图集；image2 要生成 18 个完整 `1x1x1` 立方体主题物体包装，每个大单元格内部固定为 `4列*3行` UV 网：第 1 行第 2 列为 `top`，第 2 行依次为 `left / front / right / back`，第 3 行第 2 列为 `bottom`，其它 UV 空位保持纯洋红。每个大单元格的六个面必须属于同一个方块化主题物体，top/front/right/back/left/bottom 之间的果皮、切面、籽点、条纹、果柄、叶片等身份特征要连续一致，不能把同一张纹理重复六次，也不能六面各画互不相关的小图标。水果主题应生成 18 种可一眼辨认的方块水果 UV，例如方块苹果、方块香蕉、方块橙子、方块西瓜、方块草莓、方块葡萄、方块奇异果、方块菠萝、方块柠檬、方块桃子、方块梨、方块蓝莓、方块芒果、方块椰子、方块火龙果、方块樱桃、方块哈密瓜、方块石榴；苹果需要果柄叶片跨 top/front，香蕉需要剥皮条带跨 front/right，橙子需要放射切面跨 top/front，西瓜需要红瓤黑籽和绿皮条纹在各面连续。禁止文字、UI、底座、托盘、圆台、地板垫层、落地投影、接触阴影、方形阴影、洋红描边、紫色底边、粉色脏边、彩色光晕、发光边、透明背景、留白、自然圆形水果、自然长条香蕉、孤立水果照片、小型贴纸、纯果皮材质、纯果肉纹理、纯叶脉纹理和无法分辨具体物体的抽象纹理；真实透视、极小倒角、侧壁厚度和阴影统一由运行态 Three.js 标准 `1x1x1` 等比立方体生成。后端只把洋红 key 作为图集安全边界处理，先按 3x6 大单元格切出 18 个方块，再按每格 4x3 UV 网切出 108 张 `256x256` 不透明面贴图，不再运行透明化抠图、最大 alpha 连通主体保留或透明安全边补白；若裁切后仍残留极少洋红 key 色，会转成不透明材质底色。前端和后端默认 `tilePrompt` 都必须使用“立方体主题物体 UV 展开包装图集 / cube object UV unwrap atlas”的口径，不再提交“正面30度主题物体 / 平台素材 / 跳台 / 地块成品 / 地砖 / 材质贴片 / 平铺纹理”等会把模型拉回 2D 地块、平台或单纯材质的词，后端生成前也会清洗旧草稿遗留的这些词；当主题或地块提示词命中宝可梦 / 神奇宝贝 / 口袋妖怪 / Pokemon / Pikachu / 精灵球等宝可梦相关词时，仅生图请求侧改写为“原创幻想萌宠冒险道具 / 彩色冒险能量球 / 黄色闪电萌宠符号”，用户草稿标题和主题展示不改；
 4. 背景底图同样由 image2 生成，复用现有 `coverComposite` / `coverImageSrc` 作为运行态背景读写字段，OSS 槽位固定为 `background/image.png`；提示词必须严格以用户主题关键词为背景主题，结构以左右两侧氛围为主，中央纵轴 1/2 区域保持少元素、简洁、可读且有纵深感，两侧允许更强立体层次和行进感；背景只作为底图，禁止生成跳板、地块、落脚物、角色、UI、返回按钮、文字、路径箭头或海报排版；左上角返回按钮不允许画进背景，而是单独生成 `backButtonAsset` 透明 PNG，OSS 槽位固定为 `back-button/image.png`，提示词要求标准圆形、主题色材质包装、居中左箭头、纯绿色 key 背景，后端去绿后写入作品 profile；
-5. 后端按从上到下、从左到右均匀切分为 `tile-01` 到 `tile-18`，每个方块再持久化 `tile-XX-top/front/right/back/left/bottom` 六个独立 slot/path，不能按重复的 `tileType` 复用槽位；`tileAssets[].faceAssets` 保存六面贴图，历史兼容字段 `imageSrc/imageObjectKey/assetObjectId` 写 top 面作为旧单贴图 fallback，运行态对旧作品没有 `faceAssets` 时仍可把单张贴图应用到立方体所有面；
-6. 结果页只展示陶泥儿 logo 透明角色预览、地块池预览和首屏 3 地块预览；不再提供旧角色图生成槽；移动端结果页必须由结果页根容器承接纵向滚动并保留底部安全区，确保素材预览较长时仍能下滑到返回编辑、试玩和发布按钮；
+5. 后端按从上到下、从左到右均匀切分为 `tile-01` 到 `tile-18`，每个方块再持久化 `tile-XX-top/front/right/back/left/bottom` 六个独立 slot/path，不能按重复的 `tileType` 复用槽位；`tileAssets[].faceAssets` 保存六面贴图，历史兼容字段 `imageSrc/imageObjectKey/assetObjectId` 写 top 面作为旧单贴图 fallback；运行态只有在六面 `faceAssets` 完整时才启用 Three.js 立方体贴面，旧作品没有完整 `faceAssets` 时只走 DOM 图片 / 原型兜底层，不再把单张旧贴图强行贴到立方体所有面；
+6. 结果页只展示陶泥儿 logo 透明角色预览、地块池预览和首屏 2 地块预览；不再提供旧角色图生成槽；移动端结果页必须由结果页根容器承接纵向滚动并保留底部安全区，确保素材预览较长时仍能下滑到返回编辑、试玩和发布按钮；
 7. 前端跳一跳创作 client 的创建会话与执行生成动作请求都必须使用 20 分钟等待窗口，避免背景底图、返回按钮去绿、地板贴图图集切片和 OSS 写入仍在后端执行时被共创会话默认 15 秒超时中断。
 
 待解决问题（风险程度：高）：跳一跳创作链路目前仍是一次 HTTP 请求内串行生成背景底图、返回按钮、地板贴图图集、切片和 OSS 写入；VectorEngine image2 单步 timeout/connect 失败会在后端最多重试 5 次，而前端只有 20 分钟总等待窗口。若某次背景底图生成接近或超过 18 分钟，前端会先报“请求超时，请稍后重试”，但后端可能继续跑完并在数分钟后写入草稿；同时因为背景、返回按钮和图集等中间资产未按阶段落库，同一 session 超时后重试会重新从背景图开始生成，存在重复生图、重复计费、用户误以为失败、作品架状态短时间不一致的风险。后续应将跳一跳生成改为后端任务化 / 可轮询真实阶段进度，并在每个素材阶段成功后写入可恢复状态；同时收口后端全局生成 deadline、前端等待策略和失败态回写，确保超时、重试和最终成功不会互相打架。
 
 生成页“当前跳一跳信息”只展示实际参与创作提示词的主题、地块提示词等用户可理解信息；`stylePreset` 等未参与当前 image2 提示词组装的内部风格枚举不得作为兜底内容展示，避免把 `minimal-blocks`、`paper-toy` 等工程值暴露给创作者。
 
+运行态地块刷新规则固定由后端路径快照决定：后续地块只会出现在当前地块正负 45 度方向，当前版本已有的最远相邻地块间距作为各难度 `max_gap`，每次新地块距离按 seed 在 `max_gap * 55%` 到 `max_gap` 之间随机，距离不允许为 0。前端可见窗口不得再把目标块强制放到固定屏幕坐标，而必须按服务端真实相邻距离缩放投影；最大距离沿用当前固定视觉间距，较近距离沿同一 45 度方向靠近当前块。
+
 运行态规则真相必须沉到 `module-jump-hop`，前端只做长按蓄力、角色位移、投影和落地反馈。失败、成功跳跃次数、游戏时长冻结、运行态快照和发布作品状态以后端为准。v1 不保留公开 combo / perfect / 通关语义，旧 `score` 兼容映射为成功跳跃次数。公开列表应走 `jump_hop_gallery_card_view` 订阅缓存，不要每次 HTTP 请求调用 procedure 组装全量列表。
 
-每屏只展示 3 个地块：当前地块、目标地块和下一预览地块。平台流按同一 seed 无限生成，前端不得自行生成正式路径。运行态 HUD 顶部只保留返回按钮和成功跳跃次数，不展示计时器或右上角重开按钮；生成背景和游戏舞台必须覆盖整个运行态视口，HUD 直接绝对定位压在背景上，不再用外层白底、居中窄栏、卡片边框或游戏区域圆角裁切背景。返回按钮固定在左上角安全区，交互热区固定为移动端 `56px`、桌面约 `62px`，不显示“返回”文字，并通过顶部锚点微调与得分标题牌保持协调；运行态优先使用独立 `backButtonAsset` 透明 PNG 作为真实可点击按钮图，旧作品缺失该字段时才使用同尺寸 CSS 主题色圆形按钮兜底。上方成功跳跃次数 UI 复用拼图模板顶部 HUD 结构：`puzzle-runtime-header-card` 内包含陶泥儿 IP logo、居中的“得分”标题牌，以及下挂 `puzzle-runtime-timer-card / puzzle-runtime-timer` 居中数字卡；数字卡展示成功跳跃次数而不是倒计时。游玩中不显示左下角“进行中”状态，也不在屏幕底部常驻排行榜。排行榜按作品维度展示玩家 ID、成功跳跃次数和游戏时长；每位玩家只保留 1 条最佳记录，排序固定为 `成功跳跃次数 desc -> 游戏时长 asc -> 更新时间 asc`，并只在失败结算弹窗内展示，弹窗保留重开和返回动作。
+每屏只展示 2 个地块：当前地块和目标地块，不再展示下一预览地块。平台流按同一 seed 无限生成，服务端每次补齐路径时只能把下一块生成在当前脚下块的正 45 度或负 45 度方向上，世界坐标满足 `abs(next.x - current.x) == next.y - current.y`；前端不得自行生成正式路径，只能按服务端路径方向把当前两块可见窗口投影成左上 / 右上 45 度布局，并把当前脚下地块偏向目标反侧，给目标地块留出更大视野空间。运行态 HUD 顶部只保留返回按钮和成功跳跃次数，不展示计时器或右上角重开按钮；生成背景和游戏舞台必须覆盖整个运行态视口，HUD 直接绝对定位压在背景上，不再用外层白底、居中窄栏、卡片边框或游戏区域圆角裁切背景。返回按钮固定在左上角安全区，交互热区固定为移动端 `56px`、桌面约 `62px`，不显示“返回”文字，并通过顶部锚点微调与得分标题牌保持协调；运行态优先使用独立 `backButtonAsset` 透明 PNG 作为真实可点击按钮图，旧作品缺失该字段时才使用同尺寸 CSS 主题色圆形按钮兜底。上方成功跳跃次数 UI 复用拼图模板顶部 HUD 结构：`puzzle-runtime-header-card` 内包含陶泥儿 IP logo、居中的“得分”标题牌，以及下挂 `puzzle-runtime-timer-card / puzzle-runtime-timer` 居中数字卡；数字卡展示成功跳跃次数而不是倒计时。游玩中不显示左下角“进行中”状态，也不在屏幕底部常驻排行榜。排行榜按作品维度展示玩家 ID、成功跳跃次数和游戏时长；每位玩家只保留 1 条最佳记录，排序固定为 `成功跳跃次数 desc -> 游戏时长 asc -> 更新时间 asc`，并只在失败结算弹窗内展示，弹窗保留重开和返回动作。
 
-运行态渲染分层固定为：舞台底层 `.jump-hop-runtime__scene-backdrop` 优先使用 `coverComposite` / `coverImageSrc` 中的 image2 背景底图，图片读取继续走平台资产换签，没有背景时才回退到内置渐变；Three.js 平台层复用同一份标准 `1x1x1` 等比极小倒角立方体几何体，只按单一 side 等比缩放当前 / 目标 / 预览地块，并把 `tileAssets[]` 的生成切片作为主题身份方块包装贴图加载到立方体表面；单块地板保持正轴向摆放，不做 Y 轴偏航或 Z 轴歪斜旋转；`tileAssets[].faceAssets` 存在时，Three.js 材质刷新签名必须纳入 top/front/right/back/left/bottom 六面 texture URL，任一面异步换签或 blob URL 变化都要重建平台材质，不能只监听旧单图 `imageSrc` 或基础 render key；运行态采用约 `1.3x` 近距相机、45° 下压视角和更紧凑的可见地板间距，当前脚下地块基准位于屏幕中线略下方，目标和预览地块向上展开，侧壁、倒角、透视和软椭圆阴影均由 Three.js 统一表现；Three.js 相机和 DOM 角色层必须保持屏幕 X 轴同向，不得通过反向 `camera.up` 或镜像 wrapper 把平台层左右翻转，否则会出现地块显示在右侧但蓄力与飞行动画朝左侧的反向错觉；DOM 地块图片层只作为资产换签、预加载、WebGL 不可用和测试环境 fallback，Three.js 平台层 ready 后必须隐藏 DOM 地块图片和 DOM 阴影，避免露出旧原型方块或双层闪现；推进期存在旧地块退出保留时，Three 平台层必须继续承接 3D 地块渲染，旧地块只跟随后续相机推进逐步离屏，不播放独立飞走动画，超过屏幕后自然销毁；图片读取继续走平台资产换签，并以 `assetObjectId` 作为刷新键避免重生成后沿用旧签名或旧图片缓存。DOM 角色层固定使用 `public/branding/jump-hop-taonier-character.png` 陶泥儿 logo 透明 PNG 并保持在 Three.js 平台层之上。长按蓄力、计时刷新和角色位置变化只能更新 refs 或 DOM 状态，不得销毁重建透明画布、背景、平台贴图预加载层或 DOM 角色层，否则会造成背景、地块和角色层频闪。
+运行态渲染分层固定为：舞台底层 `.jump-hop-runtime__scene-backdrop` 优先使用 `coverComposite` / `coverImageSrc` 中的 image2 背景底图，图片读取继续走平台资产换签，没有背景时才回退到内置渐变；Three.js 场景层复用同一份标准 `1x1x1` 等比极小倒角立方体几何体，按地块自身真实规格计算当前 / 目标地块尺寸，并且只有在 `tileAssets[].faceAssets` 六面贴图完整时才把生成切片作为主题身份方块包装贴图加载到立方体表面；六面贴图通过换签或 blob 异步解析时，Three.js 平台 mesh 的刷新签名必须纳入 top/front/right/back/left/bottom 六面 texture URL，任一面 URL 变化都要重建平台材质，不能只监听旧单图 `imageSrc` 或基础 render key；玩法坐标把 Z 轴作为立方体竖直高度，运行态必须把逻辑 `top` 映射到 Three.js `+Z` 顶面，材质数组按 Three group 顺序写入 `right / left / back / front / top / bottom` 并按每面 UV 朝向做翻转校正；单块地板统一绕玩法竖直 Z 轴自转 45°，让玩家稳定看到顶面和两个侧面，不做 Y 轴偏航，也不得把 x/y/z 缩放成扁盒子；Three.js 方块模型边长在当前基础上视觉放大 1 倍，但只改变模型显示尺寸，不改变平台中心点、上一轮 `max_gap * 55%` 到 `max_gap` 的随机相对间距和蓄力换算；后端命中 footprint 必须严格等于当前视觉完整顶面，不论何时都不得额外收缩或放宽；地块材质使用 `alphaTest` 裁边但不得放进透明材质队列，避免透明排序把地块画到角色之上；运行态采用约 `1.69x` 近距相机、45° 下压视角和更紧凑的可见地板间距，当前脚下地块根据目标方向偏向场地反侧，目标地块向上展开，侧壁、倒角、透视和软椭圆阴影均由 Three.js 统一表现；地块从出现开始保持真实规格，不再按当前 / 目标 / 远近或预览状态叠加倍率缩放，视觉远近只由相机和 Three.js 投影决定；Three.js 平台、Three.js Sprite 角色和 DOM fallback 层必须保持屏幕 X 轴同向，不得通过反向 `camera.up` 或镜像 wrapper 把平台层左右翻转，否则会出现地块显示在右侧但蓄力与飞行动画朝左侧的反向错觉；DOM 地块图片层只作为资产换签、预加载、WebGL 不可用和测试环境 fallback，Three.js 平台层 ready 后必须隐藏 DOM 地块图片和 DOM 阴影，避免露出旧原型方块或双层闪现；旧作品没有完整 `faceAssets` 时不启用 Three 平台层，继续显示 DOM 图片 / 原型兜底层；推进期存在旧地块退出保留时，Three 平台层必须继续承接 3D 地块渲染，旧地块只跟随后续相机推进逐步离屏，不播放独立飞走动画，超过屏幕后自然销毁；图片读取继续走平台资产换签，并以 `assetObjectId` 作为刷新键避免重生成后沿用旧签名或旧图片缓存。角色主路径使用 Three.js Sprite 承载 `public/branding/jump-hop-taonier-character.png` 陶泥儿 logo 透明 PNG，开局脚点必须位于初始地块顶面中心，Sprite 脚点必须按当前方块半高抬到顶面中心高度且绘制顺序高于地块；DOM 角色层仅在 WebGL 或角色贴图加载失败时兜底，并使用同一个顶面中心屏幕锚点，不得额外锚到地块侧面或阴影中心。长按蓄力、计时刷新和角色位置变化只能更新 refs 或 DOM 状态，不得销毁重建透明画布、背景、平台贴图预加载层或角色层，否则会造成背景、地块和角色层频闪。
 
-跳一跳当前长按蓄力手感统一采用 `chargeToDistanceRatio=0.004`，用于把长按时长换算成世界跳跃距离；如果历史路径仍保存其它系数，`start_run` 会在开局归一化到新系数。用户按住画面开始蓄力，松手立即起跳；前端必须提交 `dragDistance` 以及换算到后端世界坐标的 `dragVectorX/dragVectorY`，后端正式裁决用该方向向量计算真实落点，只有旧客户端缺失方向、方向非有限数或向量长度过小时，才 fallback 到当前地块中心指向下一块地块中心。成功判定使用下一块地块可见顶面 footprint：后端以该地块 `width/height` 的收缩矩形模拟 45° 视角下的可见顶面，当前命中区约为宽度 72% 和高度 52%，落点进入该视觉顶面则成功，未进入则失败；旧 `landingRadius/perfectRadius` 只保留兼容读写，不再作为当前命中真相。蓄力中角色只做垂直压缩，不沿目标方向拉伸；蓄力反馈可显示朝向当前目标方向的轻量引导，但不显示落点辅助点、投影圈或其它命中提示。松手后运行态必须立即生成 `visualJump`，用当前角色位置作为起点、前端预测真实落点作为终点，播放约 `560ms` 的角色飞行动画：视觉预测必须使用当前显示窗口的 current/next 地块作为方向来源，即使后端最新 run 已提前返回，也不能拿新 run 目标配旧窗口角色导致下一跳反向；角色沿本次提交方向弹向预测真实落点，成功也不得强制吸附回目标地块中心。若后端新 run 晚于飞行动画返回，角色必须停在预测真实落点等待；新 run 到达后应优先用 `lastJump.landedX/landedY` 映射出的真实落点显示角色，再把显示态切到后端最新 run，并用约 `1440ms` 的相机层推进过渡承接新窗口，避免先飞过很远再瞬间拉回地块造成闪现。推进时地块 DOM 层和 DOM 角色层统一包在同一个 camera layer 下移动，旧当前地块只随相机推进保留在屏幕后方，不单独执行向上 / 向下飞走动画；玩家继续向前跳时，旧地块继续被新的相机推进带离视口，超过离屏阈值后自然销毁，新预览地块从上方露出，禁止用 p1/p2 各自 `top/left` 过渡造成角色和地块不同步。相机层推进必须同时使用 X/Y 偏移，从旧真实落点位置斜向滑到新当前地块聚焦位置，不得先横向瞬切到居中再纵向滑动。地块允许保留当前 / 目标 / 预览的深度尺寸差异，但该差异必须通过固定基准宽高上的 `transform: scale(...)` 缓动呈现，并与相机推进使用同一 `1440ms` 节奏；不要直接修改宽高造成瞬切，也不要再给当前态额外叠 CSS scale。相机推进期间角色自身必须禁用 `left/top` transition，只允许父级 camera layer 负责位移，否则角色局部坐标切换和相机推进会叠加，表现为落地后又从屏幕外闪回。
+跳一跳当前长按蓄力手感统一采用 `chargeToDistanceRatio=0.004`，用于把长按时长换算成世界跳跃距离；如果历史路径仍保存其它系数，`start_run` 会在开局归一化到新系数。用户按住画面开始蓄力，松手立即起跳；跳跃朝向永远由角色当前脚点指向下一块地块顶面中心，前端不再提交拖拽方向，后端即使收到旧客户端的 `dragVectorX/dragVectorY` 也必须忽略。实际落点只由蓄力时长换算出的跳跃距离决定，成功判定只使用下一块地块完整可见顶面 footprint：后端以该地块 `width/height` 按 45° 顶面投影得到的完整菱形区域作为命中区，必须严格和视觉方块顶面效果对齐，禁止隐藏收缩命中区。落点进入该视觉顶面则成功，未进入则失败；地块侧面、底面、投影阴影和旧 `landingRadius/perfectRadius` 半径范围都不算正确落点，旧半径字段只保留兼容读写，不再作为当前命中真相。蓄力中角色只做垂直压缩，不沿目标方向拉伸；蓄力反馈可显示朝向下一块顶面中心的轻量引导。当前调参验证阶段，按住蓄力时允许显示一枚实时预测落点指示器，位置必须复用同一套前端预测结果：先按真实脚点到下一块顶面中心计算 `landedX/landedY`，再把该世界坐标投影到当前窗口和 Three.js 顶面脚点屏幕位置，不得用当前地块中心或屏幕线性插值替代；松手或取消时隐藏，不参与后端裁决、不写入作品配置。松手后运行态必须立即生成 `visualJump`，用当前角色真实脚点作为起点、前端预测真实落点作为终点，播放约 `560ms` 的角色飞行动画：视觉预测必须使用当前显示窗口的 current/next 地块作为方向来源，即使后端最新 run 已提前返回，也不能拿新 run 目标配旧窗口角色导致下一跳反向；角色沿当前脚点到下一块顶面中心方向弹向预测真实落点，成功也不得强制吸附回目标地块中心。若后端新 run 晚于飞行动画返回，角色必须停在预测真实落点等待；新 run 到达后应优先用 `lastJump.landedX/landedY` 映射出的真实落点显示角色，成功跳跃在飞行动画结束后保留约 `300ms` 落地停顿，再把显示态切到后端最新 run，并用约 `1440ms` 的相机层推进过渡承接新窗口，避免先飞过很远再瞬间拉回地块或刚落地就立刻拉镜头。推进时地块层和角色层统一包在同一个 camera layer 下移动，旧当前地块只随相机推进保留在屏幕后方，不单独执行向上 / 向下飞走动画；玩家继续向前跳时，旧地块继续被新的相机推进带离视口，超过离屏阈值后自然销毁，新目标地块从上方露出，禁止用 p1/p2 各自 `top/left` 过渡造成角色和地块不同步。相机层推进必须同时使用 X/Y 偏移，从旧真实落点位置斜向滑到新当前地块聚焦位置，不得先横向瞬切到居中再纵向滑动。地块从出现开始保持自身真实尺寸，不得通过当前 / 目标 / 远近 / 预览状态附加 CSS `scale(...)` 或深度倍率；推进期只做统一相机层位移，远近变化交给相机和 Three.js 真实投影。相机推进期间 DOM 兜底角色自身必须禁用 `left/top` transition，只允许父级 camera layer 负责位移，否则角色局部坐标切换和相机推进会叠加，表现为落地后又从屏幕外闪回。
 
-平台首页推荐、精选、最新、公开详情、搜索、已玩作品和公开试玩统一按 `sourceType='jump-hop'` 与 `JH-*` 公开作品号识别跳一跳作品；从公开详情或推荐流启动运行态时，若卡片摘要不足以携带地板贴图图集和路径配置，必须先补读完整 work profile 再传入运行态。`/runtime/jump-hop?work=JH-*` 这类正式深链必须先通过公开作品号回读 gallery detail，再以 profileId 启动 published run；直接打开没有 `work` 参数的 `/runtime/jump-hop` 时不能停留在空运行态或“正在加载内容”，应回到平台首页。平台壳层必须同步注册 `jump-hop-workspace`、`jump-hop-generating`、`jump-hop-result`、`jump-hop-runtime`、`jump-hop-gallery-detail` 阶段，并在 `appPageRoutes.ts` 映射 `/creation/jump-hop`、`/creation/jump-hop/generating`、`/creation/jump-hop/result`、`/gallery/jump-hop/detail`、`/runtime/jump-hop`，同时持有 session、work、run、gallery、busy/error 与生成进度状态，避免只合入渲染分支但遗漏状态源或分享路径导致 typecheck 失败、刷新回首页。
+平台首页推荐、精选、最新、公开详情、搜索、已玩作品和公开试玩统一按 `sourceType='jump-hop'` 与 `JH-*` 公开作品号识别跳一跳作品；从公开详情或推荐流启动运行态时，若卡片摘要不足以携带地板贴图图集和路径配置，必须先补读完整 work profile 再传入运行态。结果页草稿试玩调用启动 run 时必须把 `runtimeMode=draft` 写进请求 body，不能只放在请求选项里；正式作品深链和推荐流使用 published 默认模式。`/runtime/jump-hop?work=JH-*` 这类正式深链必须先通过公开作品号回读 gallery detail，再以 profileId 启动 published run；直接打开没有 `work` 参数的 `/runtime/jump-hop` 时不能停留在空运行态或“正在加载内容”，应回到平台首页。平台壳层必须同步注册 `jump-hop-workspace`、`jump-hop-generating`、`jump-hop-result`、`jump-hop-runtime`、`jump-hop-gallery-detail` 阶段，并在 `appPageRoutes.ts` 映射 `/creation/jump-hop`、`/creation/jump-hop/generating`、`/creation/jump-hop/result`、`/gallery/jump-hop/detail`、`/runtime/jump-hop`，同时持有 session、work、run、gallery、busy/error 与生成进度状态，避免只合入渲染分支但遗漏状态源或分享路径导致 typecheck 失败、刷新回首页。
 
 跳一跳作品架走创作中心的统一作品列表：前端通过 `/api/creation/jump-hop/works` 拉取作品摘要，草稿态会与 pending notice 合并后显示在作品架里，已发布作品点击后会先按 profileId 读取完整详情再进入详情或运行态。生成中作品仍以后端摘要里的 `generationStatus` 为准，刷新后应能恢复等待遮罩，不能只依赖内存 notice。
 
 跳一跳作品架删除入口必须走 `/api/creation/jump-hop/works/{profile_id}`，并通过 SpacetimeDB 同步删除 work profile、源 session、运行态 run 与事件，再刷新作品架和公开广场；不得只做前端本地隐藏。
 
-推荐页匿名游玩不再限定为跳一跳。移动端一级 `推荐` Tab 是内嵌运行态刷卡流，会自动选择推荐作品并启动对应玩法；移动端首次进入或刷新 `/` 平台首页时弹出一次欢迎提示，说明移动端仅支持作品展示、体验创作工具需使用电脑端访问，用户点击 `好` 后关闭；本次页面生命周期内切换下方页签再回到首页不再弹出。桌面端首页不启动这套移动推荐运行态，而是渲染桌面发现壳，展示 `今日游戏`、`推荐`、`作品分类` 等桌面内容。推荐页候选顺序由前端轻量推荐算法 `platformRecommendation.ts` 统一生成：先按公开作品 key 去重，再使用公开读模型已有的精选来源、近 7 日游玩、点赞、改造、总游玩、发布时间新鲜度、封面和标签完整度做确定性评分，最后优先交错不同玩法类型；只要还有其它玩法候选，就不要连续推荐同一玩法，只有候选池已没有其它玩法时才允许同玩法相邻。该算法不得新增前端业务真相或绕过公开作品 read model。断点事实统一走 `platformEntryResponsive.ts` 的 `usePlatformDesktopLayout()`，平台壳和首页视图必须共用同一个判断，避免桌面发现页与移动推荐页同时挂载、重复触发请求或启动运行态。移动端推荐页拿到推荐作品列表后必须预加载每个作品的卡片封面、主封面和玩法兜底封面；启动或切换作品时先展示当前带玩法标签和标题的作品卡面遮罩，嵌入 runtime 在卡面下层加载，不得再从卡面闪切到另一层单独纯封面图。作品切换提交后，当前 runtime 遮罩接手已在屏幕上的卡面时必须瞬时贴合，不允许再执行“卡面到同一卡面”的淡入或重绘过渡；推荐页 runtime 必须通过统一 `ready` 门控等待对应运行态 run / profile、lazy runtime 组件和 runtime DOM 内图片资源都准备好，且必须持续观察后续新增图片、内联 `background-image` 和换签中的资源标记，不能只在首次挂载时扫描主图或封面；`ready` 返回 `true` 后才由外层放开游戏画面并只让卡面遮罩渐隐。遮罩层级必须高于并隔离下层 runtime，防止运行态 HUD、canvas 或高 `z-index` 子层穿透到封面上；ready 前不展示“加载中”文案，但封面内必须保留无文案加载动效或进度条，避免用户误以为卡片损坏，也不得把未准备好的运行态直接暴露给用户。切换推荐作品时，如果上一条作品的启动请求、退出收口或目标玩法 busy 状态尚未结束，应继续显示当前作品卡面遮罩并等待下一轮自动启动；只有目标作品启动明确失败时，才显示“作品暂时无法进入，请稍后再试。”这类失败态。推荐页内拼图通关后的同 run 相似作品推进不视为推荐作品切换，不能重新显示启动封面；如果需要跨公开作品进入下一关，则必须走推荐页统一切卡入口，不能复用拼图 runtime 的跨作品 handoff，也不能直接把当前 run 改写到另一个作品，`activeRecommendEntryKey` 只能由推荐页统一选择下一作品后更新。推荐页嵌入运行态启动时按真实身份分流：已登录用户或本地已有 access token 时继续使用账号 Bearer，但请求选项必须是 local auth impact，避免单卡 401 清空整站登录态；只有确认为匿名访客时才申请短期 Runtime Guest Token，并只把它作为局部请求头传给运行态客户端，不写入全局登录态、不触发 refresh，也不把匿名流量伪装成普通用户。当前覆盖矩阵为：跳一跳、视觉小说、抓大鹅 Match3D、方洞挑战、拼图、敲木鱼、大鱼吃小鱼、汪汪声浪。每个模板的启动请求、推荐页内后续运行态动作以及需要上报的 play/finish/leaderboard/next-level 类请求，都必须继续按该身份分流；公开读取入口仍可匿名读取，创作、个人作品、删除、发布、Remix 等账号/所有权动作仍保持普通用户鉴权。推荐 runtime 的 `none` / `background` / `runtime-guest` 请求计划和拼图 `default` / `isolated` runtime auth mode 由 `platformRecommendRuntimeAuthModel.ts` 统一判定，平台壳只负责读取 token、申请 Runtime Guest Token 和传递 request options。推荐 runtime 自动启动只由 `platformPublicGalleryFlow.ts` 输出 `noop` / `clear` / `start(entry)` 决策，平台壳只执行清空 state 或启动指定作品。
+推荐页匿名游玩不再限定为跳一跳。移动端一级 `推荐` Tab 是内嵌运行态刷卡流，会自动选择推荐作品并启动对应玩法；移动端首次进入或刷新站点时弹出一次欢迎提示，说明移动端仅支持作品展示、体验创作工具需使用电脑端访问，用户点击 `好` 后关闭；本次页面生命周期内站内导航或切换下方页签不再弹出。桌面端首页不启动这套移动推荐运行态，而是渲染桌面发现壳，展示 `今日游戏`、`推荐`、`作品分类` 等桌面内容。推荐页候选顺序由前端轻量推荐算法 `platformRecommendation.ts` 统一生成：先按公开作品 key 去重，再使用公开读模型已有的精选来源、近 7 日游玩、点赞、改造、总游玩、发布时间新鲜度、封面和标签完整度做确定性评分，最后优先交错不同玩法类型；只要还有其它玩法候选，就不要连续推荐同一玩法，只有候选池已没有其它玩法时才允许同玩法相邻。该算法不得新增前端业务真相或绕过公开作品 read model。断点事实统一走 `platformEntryResponsive.ts` 的 `usePlatformDesktopLayout()`，平台壳和首页视图必须共用同一个判断，避免桌面发现页与移动推荐页同时挂载、重复触发请求或启动运行态。移动端推荐页拿到推荐作品列表后必须预加载每个作品的卡片封面、主封面和玩法兜底封面；启动或切换作品时先展示当前带玩法标签和标题的作品卡面遮罩，嵌入 runtime 在卡面下层加载，不得再从卡面闪切到另一层单独纯封面图。作品切换提交后，当前 runtime 遮罩接手已在屏幕上的卡面时必须瞬时贴合，不允许再执行“卡面到同一卡面”的淡入或重绘过渡；推荐页 runtime 必须通过统一 `ready` 门控等待对应运行态 run / profile、lazy runtime 组件和 runtime DOM 内图片资源都准备好，且必须持续观察后续新增图片、内联 `background-image` 和换签中的资源标记，不能只在首次挂载时扫描主图或封面；`ready` 返回 `true` 后才由外层放开游戏画面并只让卡面遮罩渐隐。遮罩层级必须高于并隔离下层 runtime，防止运行态 HUD、canvas 或高 `z-index` 子层穿透到封面上；ready 前不展示“加载中”文案，但封面内必须保留无文案加载动效或进度条，避免用户误以为卡片损坏，也不得把未准备好的运行态直接暴露给用户。切换推荐作品时，如果上一条作品的启动请求、退出收口或目标玩法 busy 状态尚未结束，应继续显示当前作品卡面遮罩并等待下一轮自动启动；只有目标作品启动明确失败时，才显示“作品暂时无法进入，请稍后再试。”这类失败态。推荐页内拼图通关后的同 run 相似作品推进不视为推荐作品切换，不能重新显示启动封面；如果需要跨公开作品进入下一关，则必须走推荐页统一切卡入口，不能复用拼图 runtime 的跨作品 handoff，也不能直接把当前 run 改写到另一个作品，`activeRecommendEntryKey` 只能由推荐页统一选择下一作品后更新。推荐页嵌入运行态启动时按真实身份分流：已登录用户或本地已有 access token 时继续使用账号 Bearer，但请求选项必须是 local auth impact，避免单卡 401 清空整站登录态；只有确认为匿名访客时才申请短期 Runtime Guest Token，并只把它作为局部请求头传给运行态客户端，不写入全局登录态、不触发 refresh，也不把匿名流量伪装成普通用户。当前覆盖矩阵为：跳一跳、视觉小说、抓大鹅 Match3D、方洞挑战、拼图、敲木鱼、大鱼吃小鱼、汪汪声浪。每个模板的启动请求、推荐页内后续运行态动作以及需要上报的 play/finish/leaderboard/next-level 类请求，都必须继续按该身份分流；公开读取入口仍可匿名读取，创作、个人作品、删除、发布、Remix 等账号/所有权动作仍保持普通用户鉴权。推荐 runtime 的 `none` / `background` / `runtime-guest` 请求计划和拼图 `default` / `isolated` runtime auth mode 由 `platformRecommendRuntimeAuthModel.ts` 统一判定，平台壳只负责读取 token、申请 Runtime Guest Token 和传递 request options。推荐 runtime 自动启动只由 `platformPublicGalleryFlow.ts` 输出 `noop` / `clear` / `start(entry)` 决策，平台壳只执行清空 state 或启动指定作品。
 
 ## 敲木鱼
 
diff --git a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
index d658c012c..d2df5b9d2 100644
--- a/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
+++ b/docs/【编辑器】生成类面板Lovart统一改造方案-2026-06-17.md
@@ -40,7 +40,7 @@
    - 生成视频：`你希望生成什么视频？`
 8. 多输入框面板必须保留每个字段标题和输入框边界，例如生成规范。图标素材生成不再使用多描述列表，改为复用角色形象生成面板同款单文本输入框。
 9. 生成规范下的角色规范、图标规范和自定义规范都使用同一生成类 shell：首行参考图区域、中央字段区、底部生成按钮区，不再出现缺首行参考区或单独 footer 样式。
-10. 快速编辑最多允许额外绑定 8 张参考图；原图始终自动作为最后一张隐式参考图提交，不占用额外参考图额度，也不在参考图条里固定展示 `图x`。
+10. 快速编辑最多允许额外绑定 8 张参考图；原图始终作为 `/api/editor/images/edits` 的 `sourceImageSrc` 直接提交，不占用额外参考图额度，也不在参考图条里固定展示 `图x`。
 11. 快速编辑打开后，画布视口应调整到原图完整展示，且面板位于原图下方并不遮挡原图；原图右侧显示竖向框选工具，支持矩形、椭圆和画笔自由框选。快速编辑进入时不默认启用框选工具，点击工具后出现选中态并保持高亮，再点同一工具取消启用；红色圈选框使用细描边。每完成一次框选，红色圈选框按完成顺序标注 `1 / 2 / 3...`，并在快速编辑提示词中追加一行 `对N号红色圈选框里的内容做以下修改：`。
 
 ## 参数交互
@@ -99,6 +99,7 @@
 - 视频待生成占位必须与面板当前比例和清晰度同步：默认 `16:9 · 480p` 为 `854 x 480`，切换比例、`720p` 或 `1080p` 后按比例和清晰度重算偶数宽度；调整参数时保持占位中心点不变。
 - 面板中用户修改比例、尺寸或清晰度后，已有空白待生成占位立即同步更新 `width / height / originalWidth / originalHeight`，且保持中心点不跳动。
 - 快速编辑点击生成后不在原图上播放生成中遮罩，而是立即创建独立 `Quick Edit Generator` 画布生成占位并播放生成中动画；该占位必须复用新建图片的 placement 避让逻辑，和已有素材 / 生成占位至少保留 32px 画布间距，不允许固定放到原图右侧后压住其它素材；生成成功后结果落在该占位框位置，失败时占位标记失败并恢复快速编辑面板。
+- 任何会打开画布内 composer / 面板的入口，必须在面板渲染后通过统一 overlay 可见性校正检查真实 DOM 矩形；如果面板超出画布视口，或底部工具栏 / 左下 dock 会遮住面板，就只平移当前 viewport 让面板完整进入安全区域。新增生成类入口不要在按钮 handler 里手写单独的避让偏移。
 
 ## 画布悬浮信息
 
@@ -174,16 +175,16 @@
 - `生成音乐` 选项面板出现在音乐按钮上方，不再固定在底栏中间。
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
 - 生成规范类图片底部展示禁用态参数按钮 `16:9·2K` 和 `gpt-image-2`，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮；提交参数也固定为这三项，不出现可展开选项。
-- 快速编辑底部展示当前选择的比例 / 尺寸和模型，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮，并允许展开修改；额外参考图最多 8 张，原图作为隐式最后参考图参与提交但不在参考图条里固定显示 `图x`。
+- 快速编辑底部展示当前选择的比例 / 尺寸和模型，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮，并允许展开修改；额外参考图最多 8 张，原图作为 `sourceImageSrc` 直接编辑，不在参考图条里固定显示 `图x`。
 - 快速编辑打开后画布自动缩放平移到原图完整展示，并让面板位于原图下方且不遮挡原图；原图右侧出现竖向矩形 / 椭圆 / 画笔自由框选按钮。进入快速编辑不默认启用框选，点击工具启用并保持高亮，再点同一工具取消；完成框选后画布红色细框显示连续序号，输入框同步追加 `对N号红色圈选框里的内容做以下修改：`。
-- 快速编辑提交前必须把提示词里对原图的 `原图`、`当前图片`、`当前图` 或 `图1` 引用改写成最后一张原图编号，例如额外 1 张参考图时改为 `图2`。
-- 快速编辑提交给后端的参考图顺序必须是额外参考图在前、原图在最后；若用户已完成红色圈选，最后一张隐式原图必须替换为绘制了红框和序号的标注图。
+- 快速编辑提交前保留提示词里对原图的 `原图`、`当前图片`、`当前图` 或 `图1` 引用，不再改写成 `图N`。
+- 快速编辑提交给后端时只把原图或已绘制红框和序号的标注图作为 `sourceImageSrc`；额外参考图进入输入快照，并作为图片编辑请求的 `referenceImageSrcs` 一起提交。
 - 生成中的占位图聚焦后可用 `Delete` / `Backspace` 删除；删除后异步结果不再落回画布，也不显示额外删除 UI。
 - 快速编辑生成中的占位图同样只支持键盘 `Delete` / `Backspace` 删除，不新增 UI 删除按钮；删除后异步结果不得再落回画布。
 - 生成视频 / 角色形象 / 角色动作 / 音效 / 背景音乐新建后，画布占位空白样式和右上角标签均与对应生成类型一致，不再统一使用图片占位 icon。
 - 新建空白待生成占位的尺寸必须和面板参数一致；图片类修改比例 / 尺寸、视频修改清晰度后，画布空白占位同步变更且保持中心点。
 - 点击角色图只选中图层并显示工具栏，不自动弹出重绘、快速编辑或角色动画面板；点击工具栏或右键菜单中的 `生成动画` 才创建角色动作占位和面板。
-- 点击 UI 设计图只选中图层并显示工具栏；工具栏在 `去除背景按钮` 后显示 `提取素材`，点击后画布自动缩放平移到素材完整展示，并在素材下方显示 UI 素材提取面板。UI 素材提取默认启用矩形框选，右侧工具栏与快速编辑统一，当前启用工具按钮保持高亮，点击同一工具可取消启用态；面板提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选截图预览、固定模型 `gpt-image-2`、计划规格和提取按钮泥点，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。用户至少框选一个区域后才能点击 `提取`，前端把红色轮廓绘入原图作为参考图，再固定用提示词 `仅提取被红色框框选的素材并整理成spritesheet` 生成 spritesheet。框选数量不超过阈值时提交 `1:1·1K` 参数，超过阈值时提交 `1:1·2K` 参数；后端按 gpt-image-2 对应尺寸计算扣费，后续复用图标素材拆分流程，把 spritesheet 图集和拆分素材都放到画布。
+- 点击 UI 设计图只选中图层并显示工具栏；工具栏在 `去除背景按钮` 后显示 `提取素材`，点击后画布自动缩放平移到素材完整展示，并在素材下方显示 UI 素材提取面板。UI 素材提取默认启用矩形框选，右侧工具栏与快速编辑统一，当前启用工具按钮保持高亮，点击同一工具可取消启用态；面板提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选截图预览、固定模型 `gpt-image-2`、计划规格和提取按钮泥点，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。用户至少框选一个区域后才能点击 `提取`，前端把红色轮廓绘入原图作为参考图，再固定用提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。` 生成 spritesheet。框选数量不超过阈值时提交 `1:1·1K` 参数，超过阈值时提交 `1:1·2K` 参数；后端按 gpt-image-2 对应尺寸计算扣费，后续复用图标素材拆分流程，把 spritesheet 图集和拆分素材都放到画布。
 - 生成游戏音效面板底部不显示字段标题，左下角只有一个时长参数按钮，选项为 Vidu duration `2-10` 秒；右下角固定模型胶囊显示 `Vidu` 并紧贴生成按钮。
 - 生成游戏背景音乐面板右下角固定模型胶囊显示 `Suno` 并紧贴生成按钮；`make_instrumental` 不在 UI 中展示。
 - 生成视频结果以视频图层加入画布，画布媒体元素标记为 `画布视频：生成视频 N`。
diff --git a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
index e73ec443c..a3d776835 100644
--- a/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
+++ b/docs/【编辑器】画板UI设计图生成入口设计-2026-06-17.md
@@ -21,6 +21,7 @@
 - `从画布中选择` 只接受 `assetKind: "icon-spec"` 的图层；普通图片、其他类别图层和不携带标签的图片不绑定。
 - `新建图标规范` 复用现有图标规范生成表单。
 - `上传图片` 仅绑定到当前 UI 设计面板的图标规范参考，不自动添加为画布图层。
+- 图标规范之外可继续上传普通参考图，用于约束 UI 设计图的布局风格、配色或材质；普通参考图不替代图标规范。
 
 ## 生成参数
 
@@ -44,20 +45,22 @@
 ```
 
 生成请求固定使用 `gpt-image-2`。有参考图时走图片编辑请求；无参考图时走图片生成请求。
+前端提交时会把图标规范作为第一张参考图，并把用户上传的普通参考图按顺序追加到同一个 `referenceImageSrcs` 数组；上传参考图优先提交 `objectKey`。
 
 ## 提取素材
 
 - 点击浮动工具栏 `提取素材` 后，进入 UI 设计图素材框选编辑状态，不立即提交提取接口。
 - 框选状态参考微信截图工具栏布局，默认矩形框选，并支持矩形框选、椭圆框选和画笔自由框选三种工具。
 - 用户可在同一张 UI 设计图上多次框选；未至少框选一个区域时，工具栏 `提取` 按钮不可点击。
+- 可上传普通参考图辅助 UI 素材提取，用于约束被框选素材的风格、配色或材质；普通参考图会以 `objectKey` 随合成后的红框 UI 设计图一起提交。
 - 点击 `提取` 后，前端把所有框选的红色轮廓绘入原 UI 设计图，生成合成图片 Data URL，再提交到 `POST /api/editor/ui-designs/assets/extractions`。
 - 后端固定使用 `gpt-image-2` 图片编辑链路，并固定提示词：
 
 ```text
-仅提取被红色框框选的素材并整理成spritesheet
+仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。
 ```
 
-- 后端收到 spritesheet 后复用图标素材的连通域拆分能力；未知素材数量时按从上到下、从左到右自动命名为 `素材 1`、`素材 2`。
+- 后端收到 spritesheet 后先把带绿幕源图写入 OSS，再走 `server-rs/crates/api-server/src/editor_green_screen.rs` 的统一绿幕透明化方法，并复用图标素材的连通域拆分能力；未知素材数量时按从上到下、从左到右自动命名为 `素材 1`、`素材 2`。
 - 前端先把 spritesheet 原图作为 `assetKind: "icon-spritesheet"` 图集图层放在 UI 设计图右侧，再把拆分出的独立素材作为 `assetKind: "icon"` 图标图层继续放到画布。
 
 ## 验收点
@@ -66,5 +69,6 @@
 - 面板第一模块为图标规范，来源菜单包含三个动作。
 - 从画布选择时只能绑定图标规范图片。
 - 请求参数包含 `kind: "ui-design"`、`model: "gpt-image-2"`、比例、大小与可选参考图。
-- 生成图层信息面板展示 `用户输入` 与 `图标规范`。
+- 上传普通参考图后，请求参考图数组同时包含图标规范和普通参考图，生成图层信息面板展示 `用户输入`、`图标规范` 与普通参考图。
 - 选中 UI 设计图时浮动工具栏显示 `提取素材`；点击后进入红框素材框选状态，至少框选一个区域后才能调用固定 `gpt-image-2` 提取接口，画布同时出现 spritesheet 图集和拆分后的独立素材。
+- UI 素材提取面板上传普通参考图后，提取请求参考图数组同时包含红框 UI 设计图和普通参考图，生成图层信息面板展示 `UI设计图` 与普通参考图。
diff --git a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
index a134012c5..cd32420d3 100644
--- a/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板图标素材生成入口设计-2026-06-15.md
@@ -4,7 +4,7 @@
 
 ## 背景
 
-图片画布编辑器已有普通图片生成、生成规范、生成角色形象和角色动画入口。本次新增 `生成图标素材`，用于一次输入多条图标素材描述，先生成一张绿幕 spritesheet，再自动去背、按连通域拆分为独立图标素材并铺到画布。
+图片画布编辑器已有普通图片生成、生成规范、生成角色形象和角色动画入口。本次新增 `生成图标素材`，用于一次输入多条图标素材描述，生成一张绿幕 spritesheet，并在后端扣除绿色背景后作为单个图集铺到画布。
 
 ## 入口与画布表现
 
@@ -12,8 +12,8 @@
 - 点击后立即在画布中心创建图标素材占位图，不复用普通“单张空白图片”图标；占位图表现为一叠空白素材图标卡片。
 - 图标素材占位图使用 `360x360` 的画布展示尺寸和 `512x512` 的原始图集尺寸；面板中的模型、比例和尺寸仍按生成契约独立提交，不用通用图片生成的 `1K` 画布外框。
 - 图标素材面板锚定在占位图下方，和现有生成输入框同一层级展示。
-- 生成完成后删除占位态，先把后端返回的 spritesheet 原图作为 `assetKind: "icon-spritesheet"` 的图集图层放到画布，再把拆分出的每个独立图标素材作为画布图片图层铺开，图集与图标之间、图标彼此之间不重叠，并保留少量间距。
-- 图标素材图层写入 `assetKind: "icon"`；图标规范图写入 `assetKind: "icon-spec"`，用于刷新后保留标签和限制点选来源。
+- 生成完成后删除占位态，只把后端返回的已扣绿 spritesheet 作为 `assetKind: "icon-spritesheet"` 的图集图层放到画布，不额外拆出 `assetKind: "icon"` 图层。
+- 图标规范图写入 `assetKind: "icon-spec"`，用于刷新后保留标签和限制点选来源。
 
 ## 面板结构
 
@@ -50,24 +50,21 @@
 - Prompt 固定为：
 
 ```text
-参考图1的图标规范，单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕背景方便扣除背景，禁止出现文字，保证每个图标素材的所有内容区域是完全连通的。按照以下的素材的顺序从上到下从左到右依次生成并整理成一张spritesheet：
+参考图1的图标规范，背景必须是单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，且平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光；禁止出现文字，保证每个图标素材的所有内容区域是完全连通的。按照以下的素材的顺序从上到下从左到右依次生成并整理成一张spritesheet：
 
 <素材描述按中文顿号拼接>
 ```
 
-## 去背与拆分
+## 去背与保存
 
-- 后端收到 spritesheet 后先复用 `platform-image::generated_asset_sheets` 的绿幕去背能力。
-- 去背后基于 alpha 可见像素执行 8 邻域连通域检测。
-- 连通域按从上到下、从左到右排序；排序结果依次绑定面板中的素材描述名称。
-- 每个连通域裁剪时保留少量透明边距，并输出独立透明 PNG Data URL。
-- 若模型返回的连通域数量少于素材描述数量，接口返回失败，不在画布上铺半成品，避免名称和图标错位。
+- 后端收到 spritesheet 后先把带绿幕源图写入 OSS，再走 `server-rs/crates/api-server/src/editor_green_screen.rs` 的统一绿幕透明化方法，底层复用 `platform-image::generated_asset_sheets`。
+- 去背后的整张 spritesheet 统一编码为透明 PNG，并作为唯一图标素材产物持久化。
+- 响应保留 `iconImageSrcs` 字段用于兼容旧客户端，但图标素材生成固定返回空数组；UI 设计图提取素材仍可复用该响应结构返回切片素材。
 
 ## 前端铺放规则
 
-- spritesheet 图集放在原占位图左上附近。
-- 第一张拆分图标放在 spritesheet 图集右侧，后续图标按行铺开，图标之间保留约 `24px` 世界坐标间距。
-- 每个图标图层标题使用对应素材描述文本。
+- spritesheet 图集放在原占位图位置附近。
+- 不再把图集右侧铺开独立图标，用户需要继续编辑时直接操作图集图层。
 - 生成成功后关闭图标素材面板，选中 spritesheet 图集，并打开图层面板。
 
 ## 验收
@@ -77,5 +74,6 @@
 - 默认 6 个素材描述会进入 prompt；用户在单个文本框中继续输入时最多解析 100 个素材描述。
 - 默认打开图标素材面板时选中 `nanobanana2 / 1:1 / 1K`；模型切换后，角色和图标素材面板之间沿用上次选择的模型。
 - 图标素材生成请求必须带 `model`、`aspectRatio` 和 `imageSize`；`nanobanana2` 请求体必须包含 `generationConfig.imageConfig.aspectRatio/imageSize`，`gpt-image-2` 请求必须包含文档映射后的 `size`。
-- 生成成功后画布出现 spritesheet 图集和按描述命名的多个透明图标素材图层，图层之间不重叠。
+- 图标素材生成可以上传普通参考图；提交时图标规范图仍走 `referenceImageSrc`，普通参考图走 `referenceImageSrcs`，上传参考图优先提交 `objectKey`，并写入 `generationInputs.references`。
+- 生成成功后画布只出现一个已扣绿的透明 spritesheet 图集，不出现额外独立图标图层。
 - 生成图标素材提交体包含按模型和尺寸计算的 `priceMudPoints`；`nanobanana2 1K` 应为 `12`，`gpt-image-2 1K` 应为 `3`，`gpt-image-2 2K` 应为 `5`。若前端传入与后端计费配置不一致的值，后端返回 `priceMudPoints` 校验错误，不继续调用上游生成。
diff --git a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
index a0041276a..08134d4bf 100644
--- a/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
+++ b/docs/【编辑器】画板角色形象生成入口设计-2026-06-15.md
@@ -60,11 +60,11 @@
 - `kind = "character"` 时，后端不直接把前端文本当完整生图提示词，而是把文本作为 `角色设定` 填入固定提示词骨架：
 
 ```text
-基于图1的角色美术视觉规范指导生成游戏角色形象图。画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，只作为抠像底色，禁止生成美术视觉规范、出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。
+基于图1的角色美术视觉规范指导生成游戏角色形象图。画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，只作为抠像底色；绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具；角色主体不得带绿色描边、绿色投影或绿色反光；禁止生成美术视觉规范、出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。
 角色设定：<用户输入的角色设定>
 ```
 
-- 角色图生成完成后，编辑器后端必须走通用抠图方法：复用 `platform-image::generated_asset_sheets` 的绿幕 / 近白背景去背能力，并开启内部绿幕 / 近白镂空检测。角色图 prompt 固定要求标准 `#00FF00 / RGB(0,255,0)` 绿幕；后端路径仍兼容生成模型把标准绿幕压成暗绿 / 灰绿背景的情况，但这类宽松识别只用于从画布边缘连通扩散出的背景，不作为全图断开绿色区域删除依据。该流程不再调用 RPG / 资产工坊的角色主图专用 `character_visual_assets` 后处理；输出仍统一为透明背景 PNG，随后写入 OSS 私有对象并确认 `asset_object`。接口回包仍返回透明 PNG Data URL 供画板立即显示，同时返回 `objectKey` / `assetObjectId`，前端创建图层和画板资源记录时必须保存这两个字段。
+- 角色图生成完成后，编辑器后端必须先把带绿幕源图写入 OSS，再走 `server-rs/crates/api-server/src/editor_green_screen.rs` 的统一绿幕透明化方法：复用 `platform-image::generated_asset_sheets` 的绿幕 / 近白背景去背能力，并开启内部绿幕 / 近白镂空检测。角色图 prompt 固定要求标准 `#00FF00 / RGB(0,255,0)` 绿幕；后端路径仍兼容生成模型把标准绿幕压成暗绿 / 灰绿背景的情况，但这类宽松识别只用于从画布边缘连通扩散出的背景，不作为全图断开绿色区域删除依据。该流程不再调用 RPG / 资产工坊的角色主图专用 `character_visual_assets` 后处理，也不调用远端 BiRefNet；输出仍统一为透明背景 PNG，随后写入 OSS 私有对象并确认 `asset_object`。接口回包仍返回透明 PNG Data URL 供画板立即显示，同时返回 `objectKey` / `assetObjectId`，前端创建图层和画板资源记录时必须保存这两个字段。
 - 对 `assetKind: "character"` 的角色图层执行 `重绘` 时，前端仍使用原图作为参考图，但请求 `kind` 必须传 `character`，让后端继续套用上述角色提示词限定、角色图后处理和角色资产持久化；普通图片图层重绘仍保持 `kind: "quick-edit"`。
 
 ## 生成规范参考图
@@ -152,7 +152,7 @@
 - 后端 prompt 使用以下固定骨架，并把面板输入追加到 `动作描述：` 后：
 
 ```text
-生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，只作为抠像底色，禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。
+生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，只作为抠像底色；绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具；角色主体不得带绿色描边、绿色投影或绿色反光；禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。
 动作描述：
 <用户输入的动画描述>
 ```
@@ -161,7 +161,7 @@
 
 - 视频生成完成后，后端按面板选择抽取对应帧数：`32`、`40` 或 `48`。
 - 抽帧采样必须按目标帧数预留视频尾部安全步长，例如 `32帧·4秒` 最后一帧采 `3.875s`，避免 FFmpeg 在尾点附近返回成功但输出 `0` 帧。
-- 每帧必须执行绿幕去背，输出透明背景 PNG。
+- 每帧必须先把带绿幕源图写入 OSS，再执行 `editor_green_screen` 统一绿幕去背，输出透明背景 PNG。
 - 抽帧结果写入 OSS，并返回帧路径、帧尺寸、帧数、fps、预览视频路径、模型、价格和实际 prompt。
 - 画板前端回填角色动作结果时，必须以 `frames[0].imageSrc` 创建 `mediaType: "image-sequence"`、`assetKind: "character-animation"` 图层，并把完整 `frames` 保存为图层 `imageSequenceFrames`；`previewVideoPath` 只保留为上游预览视频来源，不作为画布主媒体。
 - 角色动作图层在画布中使用序列帧播放器循环展示透明 PNG 帧；刷新恢复时必须继续读取 `imageSequenceFrames`，不能回退到 `<video>` 预览。
diff --git a/packages/shared/src/contracts/externalGeneration.ts b/packages/shared/src/contracts/externalGeneration.ts
index c2ab99ef3..24919afec 100644
--- a/packages/shared/src/contracts/externalGeneration.ts
+++ b/packages/shared/src/contracts/externalGeneration.ts
@@ -35,6 +35,7 @@ export interface ExternalGenerationTaskRecord {
   sourceModule: string;
   sourceEntityId: string;
   requestLabel: string;
+  requestPrompt?: string | null;
   status: ExternalGenerationJobStatus;
   phaseLabel: string;
   phaseDetail: string;
diff --git a/scripts/dev.mjs b/scripts/dev.mjs
index 4fcd73b11..169ec23f6 100644
--- a/scripts/dev.mjs
+++ b/scripts/dev.mjs
@@ -5,6 +5,7 @@ import {
   existsSync,
   readdirSync,
   readFileSync,
+  readlinkSync,
   realpathSync,
   statSync,
   watch,
@@ -817,6 +818,182 @@ async function stopProcess(child, label) {
   });
 }
 
+function parseProcessEnvBlock(rawEnv) {
+  return String(rawEnv ?? '')
+    .split('\0')
+    .filter(Boolean)
+    .reduce((env, entry) => {
+      const separatorIndex = entry.indexOf('=');
+      if (separatorIndex <= 0) {
+        return env;
+      }
+      env[entry.slice(0, separatorIndex)] = entry.slice(separatorIndex + 1);
+      return env;
+    }, {});
+}
+
+function normalizeProcessLinkTarget(path) {
+  return String(path ?? '').replace(/ \(deleted\)$/u, '');
+}
+
+function isSamePathForDevProcess(left, right) {
+  const normalizedLeft = normalizePath(normalizeProcessLinkTarget(left));
+  const normalizedRight = normalizePath(normalizeProcessLinkTarget(right));
+  return normalizedLeft === normalizedRight;
+}
+
+function isStaleExternalGenerationWorkerProcess({
+  cwd,
+  env,
+  exe,
+  expectedDatabase,
+  expectedExePath,
+  expectedRepoRoot,
+  expectedSpacetimeServer,
+  pid,
+}) {
+  if (!Number.isInteger(pid) || pid === process.pid) {
+    return false;
+  }
+  if (env.GENARRATIVE_PROCESS_ROLE !== 'external-generation-worker') {
+    return false;
+  }
+  if (String(env.GENARRATIVE_SPACETIME_SERVER_URL ?? '') !== expectedSpacetimeServer) {
+    return false;
+  }
+  if (String(env.GENARRATIVE_SPACETIME_DATABASE ?? '') !== expectedDatabase) {
+    return false;
+  }
+  if (!isSamePathForDevProcess(cwd, expectedRepoRoot)) {
+    return false;
+  }
+  return isSamePathForDevProcess(exe, expectedExePath);
+}
+
+function readLinuxApiServerProcessSnapshot(pid) {
+  try {
+    return {
+      cwd: readlinkSync(`/proc/${pid}/cwd`),
+      env: parseProcessEnvBlock(readFileSync(`/proc/${pid}/environ`, 'utf8')),
+      exe: readlinkSync(`/proc/${pid}/exe`),
+      pid,
+    };
+  } catch (error) {
+    if (
+      error?.code === 'ENOENT' ||
+      error?.code === 'EACCES' ||
+      error?.code === 'EPERM'
+    ) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+function listLinuxProcessIds(procDir = '/proc') {
+  try {
+    return readdirSync(procDir)
+      .map((name) => Number.parseInt(name, 10))
+      .filter(Number.isInteger);
+  } catch {
+    return [];
+  }
+}
+
+function isLinuxProcessAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function waitForLinuxProcessExit(pid, timeoutMs) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    if (!isLinuxProcessAlive(pid)) {
+      return true;
+    }
+    await sleep(100);
+  }
+  return !isLinuxProcessAlive(pid);
+}
+
+async function stopLinuxProcessId(pid, label) {
+  try {
+    process.kill(pid, 'SIGTERM');
+  } catch (error) {
+    if (error?.code === 'ESRCH') {
+      return true;
+    }
+    console.warn(`[dev:${label}] 停止旧进程失败 pid=${pid}: ${error.message}`);
+    return false;
+  }
+
+  if (await waitForLinuxProcessExit(pid, 5000)) {
+    return true;
+  }
+
+  try {
+    process.kill(pid, 'SIGKILL');
+  } catch (error) {
+    if (error?.code === 'ESRCH') {
+      return true;
+    }
+    console.warn(`[dev:${label}] 强制停止旧进程失败 pid=${pid}: ${error.message}`);
+    return false;
+  }
+  return waitForLinuxProcessExit(pid, 1000);
+}
+
+async function stopStaleLocalExternalGenerationWorkers({
+  database,
+  logStream = null,
+  repoRootPath = repoRoot,
+  processRole,
+  spacetimeServer,
+}) {
+  if (process.platform !== 'linux') {
+    return [];
+  }
+  if (processRole !== 'all') {
+    return [];
+  }
+
+  const expectedExePath = resolve(repoRootPath, 'server-rs/target/debug/api-server');
+  const stopped = [];
+  for (const pid of listLinuxProcessIds()) {
+    const snapshot = readLinuxApiServerProcessSnapshot(pid);
+    if (
+      !snapshot ||
+      !isStaleExternalGenerationWorkerProcess({
+        ...snapshot,
+        expectedDatabase: database,
+        expectedExePath,
+        expectedRepoRoot: repoRootPath,
+        expectedSpacetimeServer: spacetimeServer,
+      })
+    ) {
+      continue;
+    }
+
+    const label = snapshot.env.GENARRATIVE_EXTERNAL_GENERATION_WORKER_ID
+      ? `${pid}(${snapshot.env.GENARRATIVE_EXTERNAL_GENERATION_WORKER_ID})`
+      : String(pid);
+    if (await stopLinuxProcessId(pid, 'api-server')) {
+      stopped.push(label);
+    }
+  }
+
+  if (stopped.length > 0) {
+    const line = `[dev:api-server] 已停止同库旧 external-generation-worker 进程: ${stopped.join(', ')}\n`;
+    process.stdout.write(line);
+    logStream?.write(line);
+  }
+  return stopped;
+}
+
 function stopWindowsProcessTree(pid) {
   if (!pid) {
     return;
@@ -1436,6 +1613,12 @@ class DevRunner {
     mergedEnv.GENARRATIVE_API_SERVER_LOG_FILE = logFile;
 
     stopExistingWindowsApiServer(logStream);
+    await stopStaleLocalExternalGenerationWorkers({
+      database: this.options.database,
+      logStream,
+      processRole: mergedEnv.GENARRATIVE_PROCESS_ROLE,
+      spacetimeServer: this.state.spacetimeServer,
+    });
 
     console.log(`[dev:api-server] log: ${logFile}`);
     console.log(
@@ -2278,7 +2461,9 @@ export {
   DevRunner,
   isDirectModuleExecution,
   isSpacetimePublishPermissionError,
+  isStaleExternalGenerationWorkerProcess,
   normalizeCargoVersionRequirement,
+  parseProcessEnvBlock,
   parseArgs,
   parseSpacetimeToolVersion,
   resolveDevStackStatePath,
diff --git a/scripts/dev.test.ts b/scripts/dev.test.ts
index a95ff9981..18d810a85 100644
--- a/scripts/dev.test.ts
+++ b/scripts/dev.test.ts
@@ -16,7 +16,9 @@ import {
   DevRunner,
   isDirectModuleExecution,
   isSpacetimePublishPermissionError,
+  isStaleExternalGenerationWorkerProcess,
   normalizeCargoVersionRequirement,
+  parseProcessEnvBlock,
   parseArgs,
   parseSpacetimeToolVersion,
   resolveDevStackStatePath,
@@ -282,6 +284,67 @@ describe('dev scheduler api-server env', () => {
   });
 });
 
+describe('dev scheduler local worker cleanup', () => {
+  const expected = {
+    expectedDatabase: 'xushi-p4wfr',
+    expectedExePath: '/repo/Genarrative/server-rs/target/debug/api-server',
+    expectedRepoRoot: '/repo/Genarrative',
+    expectedSpacetimeServer: 'http://127.0.0.1:10002',
+  };
+
+  test('解析 /proc environ 的 NUL 分隔格式', () => {
+    expect(parseProcessEnvBlock('A=1\0B=two=parts\0\0')).toEqual({
+      A: '1',
+      B: 'two=parts',
+    });
+  });
+
+  test('识别同仓库同库的旧 external-generation-worker', () => {
+    expect(
+      isStaleExternalGenerationWorkerProcess({
+        ...expected,
+        cwd: '/repo/Genarrative',
+        env: {
+          GENARRATIVE_PROCESS_ROLE: 'external-generation-worker',
+          GENARRATIVE_SPACETIME_DATABASE: 'xushi-p4wfr',
+          GENARRATIVE_SPACETIME_SERVER_URL: 'http://127.0.0.1:10002',
+        },
+        exe: '/repo/Genarrative/server-rs/target/debug/api-server (deleted)',
+        pid: 12345,
+      }),
+    ).toBe(true);
+  });
+
+  test('不同数据库或仓库的 worker 不会被当成本地旧进程', () => {
+    expect(
+      isStaleExternalGenerationWorkerProcess({
+        ...expected,
+        cwd: '/repo/Genarrative',
+        env: {
+          GENARRATIVE_PROCESS_ROLE: 'external-generation-worker',
+          GENARRATIVE_SPACETIME_DATABASE: 'other-db',
+          GENARRATIVE_SPACETIME_SERVER_URL: 'http://127.0.0.1:10002',
+        },
+        exe: '/repo/Genarrative/server-rs/target/debug/api-server',
+        pid: 12345,
+      }),
+    ).toBe(false);
+    expect(
+      isStaleExternalGenerationWorkerProcess({
+        ...expected,
+        cwd: '/repo/Other',
+        env: {
+          GENARRATIVE_PROCESS_ROLE: 'external-generation-worker',
+          GENARRATIVE_SPACETIME_DATABASE: 'xushi-p4wfr',
+          GENARRATIVE_SPACETIME_SERVER_URL: 'http://127.0.0.1:10002',
+        },
+        exe: '/repo/Other/server-rs/target/debug/api-server',
+        pid: 12345,
+      }),
+    ).toBe(false);
+  });
+});
+
 describe('dev scheduler Rust build env', () => {
   test('local dev Rust env bypasses project sccache wrapper', () => {
     const env = buildLocalRustProcessEnv(
diff --git a/server-rs/crates/api-server/src/admin.rs b/server-rs/crates/api-server/src/admin.rs
index bc0f39f7c..37c1e5a4f 100644
--- a/server-rs/crates/api-server/src/admin.rs
+++ b/server-rs/crates/api-server/src/admin.rs
@@ -27,7 +27,8 @@ use shared_contracts::admin::{
     AdminDatabaseTableStatPayload, AdminDebugHeaderInput, AdminDebugHttpRequest,
     AdminDebugHttpResponse, AdminLoginRequest, AdminLoginResponse, AdminMeResponse,
     AdminOverviewResponse, AdminServiceOverviewPayload, AdminSessionPayload,
-    AdminTrackingEventEntryPayload, AdminTrackingEventListQuery, AdminTrackingEventListResponse,
+    AdminTrackingEventEntryPayload, AdminTrackingEventKeyListResponse,
+    AdminTrackingEventKeyPayload, AdminTrackingEventListQuery, AdminTrackingEventListResponse,
     AdminUpdateWorkVisibilityRequest, AdminUpdateWorkVisibilityResponse,
     AdminUpsertCreationEntryEventBannersRequest, AdminUpsertCreationEntryTypeConfigRequest,
     AdminUpsertPublicWorkInteractionConfigRequest, AdminWorkVisibilityListResponse,
@@ -59,6 +60,8 @@ const BLOCKED_DEBUG_HEADERS: &[&str] = &[
 const SPACETIME_SCHEMA_VERSION_QUERY: &str = "version=9";
 const ADMIN_TRACKING_EVENT_DEFAULT_LIMIT: u32 = 200;
 const ADMIN_TRACKING_EVENT_MAX_LIMIT: u32 = 1000;
+const ADMIN_TRACKING_EVENT_EXPORT_LIMIT: u32 = 100_000;
+const ADMIN_TRACKING_EVENT_KEY_SCAN_LIMIT: u32 = 50_000;
 const ADMIN_DATABASE_TABLE_DEFAULT_LIMIT: u32 = 100;
 const ADMIN_DATABASE_TABLE_MAX_LIMIT: u32 = 500;
 const ADMIN_DASHBOARD_ROW_LIMIT: u32 = 50_000;
@@ -198,6 +201,18 @@ pub async fn admin_list_tracking_events(
     ))
 }
 
+pub async fn admin_list_tracking_event_keys(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(_admin): Extension<AuthenticatedAdmin>,
+) -> Result<Json<Value>, AppError> {
+    let event_keys = fetch_admin_tracking_event_keys(&state).await?;
+    Ok(json_success_body(
+        Some(&request_context),
+        AdminTrackingEventKeyListResponse { event_keys },
+    ))
+}
+
 pub async fn admin_list_database_tables(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -1936,8 +1951,49 @@ async fn fetch_admin_tracking_events(
     })
 }
 
+async fn fetch_admin_tracking_event_keys(
+    state: &AppState,
+) -> Result<Vec<AdminTrackingEventKeyPayload>, AppError> {
+    let client = Client::new();
+    let server_root = state.config.spacetime_server_url.trim_end_matches('/');
+    let database = state.config.spacetime_database.trim();
+    let token = state
+        .config
+        .spacetime_token
+        .as_deref()
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(str::to_string)
+        .or_else(load_local_spacetime_cli_token);
+    let sql = build_admin_tracking_event_keys_sql();
+
+    let payload = fetch_spacetime_sql_json(&client, server_root, database, token.as_deref(), &sql)
+        .await
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY)
+                .with_message(format!("埋点 key 读取失败：{error}"))
+        })?;
+    parse_admin_tracking_event_keys_sql_response(payload).map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY)
+            .with_message(format!("埋点 key 解析失败：{error}"))
+    })
+}
+
 fn build_admin_tracking_events_sql(query: &AdminTrackingEventListQuery) -> Result<String, String> {
     let mut conditions = Vec::new();
+    let start_date_key = normalized_non_empty(query.start_date.as_deref())
+        .map(|value| parse_admin_tracking_date_key(value, "startDate"))
+        .transpose()?;
+    let end_date_key = normalized_non_empty(query.end_date.as_deref())
+        .map(|value| parse_admin_tracking_date_key(value, "endDate"))
+        .transpose()?;
+    if matches!(
+        (start_date_key, end_date_key),
+        (Some(start_date_key), Some(end_date_key)) if start_date_key > end_date_key
+    ) {
+        return Err("startDate 不能晚于 endDate".to_string());
+    }
+
     if let Some(value) = normalized_non_empty(query.event_key.as_deref()) {
         conditions.push(format!("event_key = {}", quote_sql_string(value)));
     }
@@ -1951,18 +2007,36 @@ fn build_admin_tracking_events_sql(query: &AdminTrackingEventListQuery) -> Resul
     if let Some(value) = normalized_non_empty(query.scope_id.as_deref()) {
         conditions.push(format!("scope_id = {}", quote_sql_string(value)));
     }
+    if let Some(value) = start_date_key {
+        conditions.push(format!("day_key >= {value}"));
+    }
+    if let Some(value) = end_date_key {
+        conditions.push(format!("day_key <= {value}"));
+    }
 
     let where_clause = if conditions.is_empty() {
         String::new()
     } else {
         format!(" WHERE {}", conditions.join(" AND "))
     };
-    let limit = clamp_admin_tracking_event_limit(query.limit);
+    let limit = clamp_admin_tracking_event_limit(query.limit, query.export_all.unwrap_or(false));
     Ok(format!(
         "SELECT event_id, event_key, scope_kind, scope_id, day_key, user_id, owner_user_id, profile_id, module_key, metadata_json, occurred_at FROM tracking_event{where_clause} LIMIT {limit}"
     ))
 }
 
+fn build_admin_tracking_event_keys_sql() -> String {
+    format!(
+        "SELECT event_key, scope_kind FROM tracking_event LIMIT {}",
+        ADMIN_TRACKING_EVENT_KEY_SCAN_LIMIT
+    )
+}
+
+fn parse_admin_tracking_date_key(value: &str, field_name: &str) -> Result<i64, String> {
+    module_runtime::parse_analytics_calendar_date_key(value)
+        .map_err(|_| format!("{field_name} 必须是 YYYY-MM-DD"))
+}
+
 fn normalized_non_empty(value: Option<&str>) -> Option<&str> {
     value.map(str::trim).filter(|value| !value.is_empty())
 }
@@ -1992,10 +2066,15 @@ fn normalize_admin_tracking_scope_kind(value: &str) -> Result<&'static str, Stri
     }
 }
 
-fn clamp_admin_tracking_event_limit(limit: Option<u32>) -> u32 {
+fn clamp_admin_tracking_event_limit(limit: Option<u32>, export_all: bool) -> u32 {
+    let max_limit = if export_all {
+        ADMIN_TRACKING_EVENT_EXPORT_LIMIT
+    } else {
+        ADMIN_TRACKING_EVENT_MAX_LIMIT
+    };
     limit
         .unwrap_or(ADMIN_TRACKING_EVENT_DEFAULT_LIMIT)
-        .clamp(1, ADMIN_TRACKING_EVENT_MAX_LIMIT)
+        .clamp(1, max_limit)
 }
 
 async fn fetch_spacetime_sql_json(
@@ -2043,6 +2122,38 @@ fn parse_admin_tracking_events_sql_response(
         })
 }
 
+fn parse_admin_tracking_event_keys_sql_response(
+    payload: Value,
+) -> Result<Vec<AdminTrackingEventKeyPayload>, String> {
+    let rows = extract_first_sql_rows(payload)?;
+    let mut by_event_key: BTreeMap<String, BTreeSet<String>> = BTreeMap::new();
+    for row in rows {
+        let columns = row
+            .as_array()
+            .ok_or_else(|| "埋点 key 行格式非法".to_string())?;
+        let event_key = required_string_column(columns, 0, "event_key")?;
+        let scope_kind = tracking_scope_kind_to_string(
+            columns
+                .get(1)
+                .ok_or_else(|| "埋点 key 行缺少 scope_kind".to_string())?,
+        )
+        .ok_or_else(|| "埋点 key 行 scope_kind 类型非法".to_string())?;
+        by_event_key
+            .entry(event_key)
+            .or_default()
+            .insert(scope_kind);
+    }
+
+    Ok(by_event_key
+        .into_iter()
+        .map(|(event_key, scope_kinds)| AdminTrackingEventKeyPayload {
+            event_title: admin_tracking_event_title(&event_key).to_string(),
+            event_key,
+            scope_kinds: scope_kinds.into_iter().collect(),
+        })
+        .collect())
+}
+
 fn extract_first_sql_rows(payload: Value) -> Result<Vec<Value>, String> {
     let statement = match payload {
         Value::Array(statements) => statements
@@ -2286,7 +2397,72 @@ fn timestamp_to_display_string(value: &Value) -> Option<String> {
 
 fn admin_tracking_event_title(event_key: &str) -> &str {
     match event_key {
+        "auth_login_options_view" => "登录方式查看",
+        "auth_phone_code_send" => "发送手机验证码",
         "daily_login" => "每日登录",
+        "auth_phone_login_success" => "手机号登录成功",
+        "auth_me_view" => "当前账号查看",
+        "auth_sessions_view" => "登录会话查看",
+        "auth_revoke_session" => "撤销登录会话",
+        "auth_refresh_success" => "登录续期成功",
+        "auth_logout" => "退出登录",
+        "auth_logout_all" => "退出全部会话",
+        "auth_wechat_bind_phone_success" => "微信绑定手机成功",
+        "profile_identity_update" => "资料更新",
+        "profile_dashboard_view" => "个人看板查看",
+        "wallet_ledger_view" => "钱包流水查看",
+        "recharge_center_view" => "充值中心查看",
+        "recharge_order_create" => "充值订单创建",
+        "feedback_submit" => "反馈提交",
+        "invite_center_view" => "邀请中心查看",
+        "referral_invite_code_redeem" => "邀请码绑定",
+        "redeem_code_submit" => "兑换码提交",
+        "task_center_view" => "任务中心查看",
+        "task_reward_claim" => "任务奖励领取",
+        "save_archive_list_view" => "存档列表查看",
+        "save_archive_detail_view" => "存档详情查看",
+        "browse_history_view" => "浏览历史查看",
+        "browse_history_record" => "浏览历史写入",
+        "browse_history_clear" => "浏览历史清空",
+        "play_stats_view" => "游玩统计查看",
+        "profile_analytics_metric_view" => "个人指标查看",
+        "ai_task_create" => "AI 任务创建",
+        "ai_task_start" => "AI 任务启动",
+        "ai_task_stage_start" => "AI 阶段启动",
+        "ai_task_chunk_append" => "AI 分片追加",
+        "ai_task_stage_complete" => "AI 阶段完成",
+        "ai_task_reference_attach" => "AI 结果引用绑定",
+        "ai_task_complete" => "AI 任务完成",
+        "ai_task_fail" => "AI 任务失败标记",
+        "ai_task_cancel" => "AI 任务取消",
+        "asset_upload_ticket_create" => "资产上传票据创建",
+        "asset_sts_credentials_create" => "资产 STS 凭证创建",
+        "asset_upload_confirm" => "资产上传确认",
+        "asset_bind" => "资产绑定",
+        "asset_character_visual_generate" => "角色形象生成",
+        "asset_character_visual_publish" => "角色形象发布",
+        "asset_character_animation_generate" => "角色动画生成",
+        "asset_character_animation_publish" => "角色动画发布",
+        "asset_character_animation_import" => "角色动画视频导入",
+        "asset_character_workflow_cache_save" => "角色工作流缓存保存",
+        "asset_history_view" => "资产历史查看",
+        "llm_request" => "LLM 请求",
+        "speech_config_view" => "语音配置查看",
+        "asr_stream_start" => "ASR 流启动",
+        "tts_bidirection_start" => "TTS 双向流启动",
+        "tts_sse_start" => "TTS SSE 启动",
+        "runtime_settings_view" => "运行设置查看",
+        "runtime_settings_update" => "运行设置更新",
+        "runtime_snapshot_view" => "运行快照查看",
+        "runtime_snapshot_save" => "运行快照保存",
+        "runtime_snapshot_delete" => "运行快照删除",
+        "puzzle_route_success" => "拼图路由成功",
+        "match3d_route_success" => "抓大鹅路由成功",
+        "square_hole_route_success" => "方洞路由成功",
+        "custom_world_route_success" => "自定义世界路由成功",
+        "creative_agent_route_success" => "创意 Agent 路由成功",
+        "work_play_start" => "作品开始游玩",
+        "external_generation_run" => "外部生成执行",
         _ => event_key,
     }
 }
@@ -2453,13 +2629,14 @@ mod tests {
     use super::{
         AdminDashboardGranularity, AdminDashboardRegistrationStats, AdminDashboardSeries,
         apply_admin_dashboard_registration_rows, apply_admin_database_table_filters,
-        build_admin_database_table_row, build_admin_tracking_events_sql, build_body_preview,
-        build_debug_base_url, build_spacetime_schema_url, clamp_admin_database_table_limit,
+        build_admin_database_table_row, build_admin_tracking_event_keys_sql,
+        build_admin_tracking_events_sql, build_body_preview, build_debug_base_url,
+        build_spacetime_schema_url, clamp_admin_database_table_limit,
         clamp_admin_tracking_event_limit, is_safe_spacetime_table_name, normalize_debug_path,
         normalize_table_count_error, parse_admin_database_table_rows_sql_response,
-        parse_admin_tracking_events_sql_response, parse_spacetime_sql_count_response,
-        resolve_admin_dashboard_range, timestamp_value_to_micros, trim_preview,
-        wallet_ledger_source_type_to_string,
+        parse_admin_tracking_event_keys_sql_response, parse_admin_tracking_events_sql_response,
+        parse_spacetime_sql_count_response, resolve_admin_dashboard_range,
+        timestamp_value_to_micros, trim_preview, wallet_ledger_source_type_to_string,
     };
     use axum::{http::StatusCode, response::IntoResponse};
     use serde_json::json;
@@ -2894,7 +3071,10 @@ mod tests {
             user_id: Some("user-1".to_string()),
             scope_kind: Some("USER".to_string()),
             scope_id: Some("scope-1".to_string()),
+            start_date: Some("2026-06-01".to_string()),
+            end_date: Some("2026-06-30".to_string()),
             limit: Some(2000),
+            export_all: None,
         })
         .expect("tracking sql should build");
 
@@ -2902,15 +3082,72 @@ mod tests {
         assert!(sql.contains("user_id = 'user-1'"));
         assert!(sql.contains("scope_kind = 'user'"));
         assert!(sql.contains("scope_id = 'scope-1'"));
+        assert!(sql.contains(&format!(
+            "day_key >= {}",
+            module_runtime::parse_analytics_calendar_date_key("2026-06-01").unwrap()
+        )));
+        assert!(sql.contains(&format!(
+            "day_key <= {}",
+            module_runtime::parse_analytics_calendar_date_key("2026-06-30").unwrap()
+        )));
         assert!(!sql.contains("ORDER BY"));
         assert!(sql.ends_with("LIMIT 1000"));
     }
 
+    #[test]
+    fn build_admin_tracking_events_sql_uses_export_limit_when_requested() {
+        let sql = build_admin_tracking_events_sql(&AdminTrackingEventListQuery {
+            limit: Some(1_000_000),
+            export_all: Some(true),
+            ..Default::default()
+        })
+        .expect("tracking export sql should build");
+
+        assert!(sql.ends_with("LIMIT 100000"));
+    }
+
     #[test]
     fn clamp_admin_tracking_event_limit_uses_default_and_bounds() {
-        assert_eq!(clamp_admin_tracking_event_limit(None), 200);
-        assert_eq!(clamp_admin_tracking_event_limit(Some(0)), 1);
-        assert_eq!(clamp_admin_tracking_event_limit(Some(1001)), 1000);
+        assert_eq!(clamp_admin_tracking_event_limit(None, false), 200);
+        assert_eq!(clamp_admin_tracking_event_limit(Some(0), false), 1);
+        assert_eq!(clamp_admin_tracking_event_limit(Some(1001), false), 1000);
+        assert_eq!(
+            clamp_admin_tracking_event_limit(Some(1_000_000), true),
+            100_000
+        );
+    }
+
+    #[test]
+    fn build_admin_tracking_event_keys_sql_scans_tracking_event_keys() {
+        let sql = build_admin_tracking_event_keys_sql();
+
+        assert_eq!(
+            sql,
+            "SELECT event_key, scope_kind FROM tracking_event LIMIT 50000"
+        );
+    }
+
+    #[test]
+    fn parse_admin_tracking_event_keys_sql_response_dedupes_scope_kinds() {
+        let payload = json!([
+            {
+                "rows": [
+                    ["daily_login", "user"],
+                    ["daily_login", [3, []]],
+                    ["work_play_start", "work"]
+                ]
+            }
+        ]);
+
+        let event_keys = parse_admin_tracking_event_keys_sql_response(payload)
+            .expect("tracking event keys should parse");
+
+        assert_eq!(event_keys.len(), 2);
+        assert_eq!(event_keys[0].event_key, "daily_login");
+        assert_eq!(event_keys[0].event_title, "每日登录");
+        assert_eq!(event_keys[0].scope_kinds, vec!["user"]);
+        assert_eq!(event_keys[1].event_key, "work_play_start");
+        assert_eq!(event_keys[1].scope_kinds, vec!["work"]);
     }
 
     #[test]
diff --git a/server-rs/crates/api-server/src/app.rs b/server-rs/crates/api-server/src/app.rs
index e86aabf9a..f549e281c 100644
--- a/server-rs/crates/api-server/src/app.rs
+++ b/server-rs/crates/api-server/src/app.rs
@@ -690,6 +690,45 @@ mod tests {
         assert_eq!(body["error"]["details"]["creationTypeId"], "rpg");
     }
 
+    #[tokio::test]
+    async fn role_asset_workflow_returns_default_prompts_without_oss_cache() {
+        let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
+
+        let response = app
+            .oneshot(
+                Request::builder()
+                    .method("POST")
+                    .uri("/api/runtime/custom-world/asset-studio/role/hero-01/workflow")
+                    .header("content-type", "application/json")
+                    .body(Body::from(
+                        serde_json::json!({
+                            "role": {
+                                "id": "hero-01",
+                                "name": "沈砺",
+                                "title": "灰炬向导",
+                                "role": "边路同行者",
+                                "actionDescription": "持灯快步穿过灰烬街巷"
+                            }
+                        })
+                        .to_string(),
+                    ))
+                    .expect("workflow request should build"),
+            )
+            .await
+            .expect("workflow request should succeed");
+
+        assert_eq!(response.status(), StatusCode::OK);
+        let body = read_json_response(response).await;
+        assert_eq!(body["ok"], Value::Bool(true));
+        assert_eq!(body["cache"], Value::Null);
+        assert!(
+            body["workflow"]["animationPromptText"]
+                .as_str()
+                .unwrap_or_default()
+                .contains("持灯快步穿过灰烬街巷")
+        );
+    }
+
     #[tokio::test]
     async fn healthz_returns_standard_envelope_when_requested() {
         let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
@@ -1656,6 +1695,54 @@ mod tests {
         assert!(!body_text.contains("length limit exceeded"));
     }
 
+    #[tokio::test]
+    async fn editor_image_edit_accepts_reference_body_above_default_limit() {
+        let state = AppState::new(AppConfig {
+            external_generation_mode: ExternalGenerationMode::Inline,
+            ..AppConfig::default()
+        })
+        .expect("state should build");
+        let seed_user = seed_phone_user_with_password(&state, "13800138029", TEST_PASSWORD).await;
+        let token = sign_test_user_token(&state, &seed_user, "sess_editor_image_edit_body");
+        let app = build_router(state);
+        let source_image_src = format!("data:image/png;base64,{}", "A".repeat(3 * 1024 * 1024));
+        let request_body = serde_json::json!({
+            "prompt": "快速编辑图片",
+            "sourceImageSrc": source_image_src,
+            "size": "1024x1024",
+            "model": "gpt-image-2"
+        })
+        .to_string();
+        assert!(request_body.len() > 2 * 1024 * 1024);
+
+        let response = app
+            .oneshot(
+                Request::builder()
+                    .method("POST")
+                    .uri("/api/editor/images/edits")
+                    .header("authorization", format!("Bearer {token}"))
+                    .header("content-type", "application/json")
+                    .body(Body::from(request_body))
+                    .expect("request should build"),
+            )
+            .await
+            .expect("request should succeed");
+
+        assert_eq!(response.status(), StatusCode::SERVICE_UNAVAILABLE);
+        let body = response
+            .into_body()
+            .collect()
+            .await
+            .expect("response body should collect")
+            .to_bytes();
+        let body_text = String::from_utf8_lossy(&body);
+        assert!(
+            body_text.contains("VECTOR_ENGINE_BASE_URL"),
+            "handler should parse the oversized editor edit image before checking VectorEngine config: {body_text}"
+        );
+        assert!(!body_text.contains("length limit exceeded"));
+    }
+
     #[tokio::test]
     async fn password_entry_rejects_unknown_phone_without_registration() {
         let app = build_router(AppState::new(AppConfig::default()).expect("state should build"));
diff --git a/server-rs/crates/api-server/src/asset_billing.rs b/server-rs/crates/api-server/src/asset_billing.rs
index c16ded945..990bd3cd7 100644
--- a/server-rs/crates/api-server/src/asset_billing.rs
+++ b/server-rs/crates/api-server/src/asset_billing.rs
@@ -254,24 +254,34 @@ pub(crate) fn map_asset_operation_wallet_error(error: SpacetimeClientError) -> A
         error = %message,
         "资产操作泥点预扣失败"
     );
-    let status = match &error {
-        SpacetimeClientError::Procedure(message) if message.contains("泥点余额不足") => {
-            StatusCode::CONFLICT
-        }
-        _ => StatusCode::BAD_GATEWAY,
+    let is_insufficient_balance = matches!(
+        &error,
+        SpacetimeClientError::Procedure(message) if message.contains("泥点余额不足")
+    );
+    let status = if is_insufficient_balance {
+        StatusCode::CONFLICT
+    } else {
+        StatusCode::BAD_GATEWAY
     };
+    let public_message = is_insufficient_balance.then(|| message.clone());
 
-    AppError::from_status(status).with_details(json!({
+    let app_error = AppError::from_status(status).with_details(json!({
         "provider": "profile-wallet",
         "message": message,
-    }))
+    }));
+
+    if let Some(public_message) = public_message {
+        app_error.with_message(public_message)
+    } else {
+        app_error
+    }
 }
 
 pub(crate) fn should_skip_asset_operation_billing_for_connectivity(
     error: &SpacetimeClientError,
 ) -> bool {
     match error {
-        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout => true,
+        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout(_) => true,
         SpacetimeClientError::Build(message)
         | SpacetimeClientError::Procedure(message)
         | SpacetimeClientError::Runtime(message) => {
@@ -315,6 +325,24 @@ mod tests {
         ));
     }
 
+    #[test]
+    fn asset_operation_wallet_insufficient_balance_is_public_message() {
+        let error = map_asset_operation_wallet_error(SpacetimeClientError::Procedure(
+            "泥点余额不足".to_string(),
+        ));
+
+        assert_eq!(error.status_code(), StatusCode::CONFLICT);
+        assert_eq!(error.code(), "CONFLICT");
+        assert_eq!(error.message(), "泥点余额不足");
+        assert_eq!(
+            error
+                .details()
+                .and_then(|details| details.get("message"))
+                .and_then(serde_json::Value::as_str),
+            Some("泥点余额不足"),
+        );
+    }
+
     #[test]
     fn asset_operation_billing_does_not_refund_stale_worker_lease_errors() {
         let stale_error = AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
diff --git a/server-rs/crates/api-server/src/big_fish.rs b/server-rs/crates/api-server/src/big_fish.rs
index e89691173..bbd974c84 100644
--- a/server-rs/crates/api-server/src/big_fish.rs
+++ b/server-rs/crates/api-server/src/big_fish.rs
@@ -935,12 +935,17 @@ fn map_big_fish_client_error(error: SpacetimeClientError) -> AppError {
             StatusCode::BAD_REQUEST
         }
         SpacetimeClientError::Runtime(_) => StatusCode::BAD_REQUEST,
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         _ => StatusCode::BAD_GATEWAY,
     };
 
     let message = match &error {
-        SpacetimeClientError::Timeout => "SpacetimeDB 会话读取超时，请稍后重试。".to_string(),
+        SpacetimeClientError::Timeout(stage) => {
+            format!(
+                "SpacetimeDB 会话读取超时（{}），请稍后重试。",
+                stage.as_str()
+            )
+        }
         SpacetimeClientError::ConnectDropped => {
             "SpacetimeDB 会话连接已断开，请稍后重试。".to_string()
         }
@@ -983,6 +988,8 @@ fn current_timestamp_micros_to_string(value: i64) -> String {
 
 #[cfg(test)]
 mod tests {
+    use spacetime_client::SpacetimeClientStage;
+
     use super::*;
 
     #[test]
@@ -1001,7 +1008,7 @@ mod tests {
     #[test]
     fn big_fish_gallery_keeps_timeout_errors_visible() {
         assert!(!should_soft_fallback_big_fish_gallery(
-            &SpacetimeClientError::Timeout
+            &SpacetimeClientError::Timeout(SpacetimeClientStage::ProcedureResult)
         ));
     }
 }
diff --git a/server-rs/crates/api-server/src/big_fish/mappers.rs b/server-rs/crates/api-server/src/big_fish/mappers.rs
index ec8bcb029..406d7ceb7 100644
--- a/server-rs/crates/api-server/src/big_fish/mappers.rs
+++ b/server-rs/crates/api-server/src/big_fish/mappers.rs
@@ -1,4 +1,5 @@
 use super::*;
+use spacetime_client::SpacetimeClientStage;
 
 pub(super) fn map_big_fish_session_response(
     session: BigFishSessionRecord,
@@ -237,7 +238,7 @@ pub(super) async fn load_big_fish_session_with_retry(
             .await
         {
             Ok(session) => return Ok(session),
-            Err(error @ SpacetimeClientError::Timeout)
+            Err(error @ SpacetimeClientError::Timeout(_))
             | Err(error @ SpacetimeClientError::ConnectDropped) => {
                 last_retryable_error = Some(error);
                 if attempt == 0 {
@@ -249,7 +250,11 @@ pub(super) async fn load_big_fish_session_with_retry(
         }
     }
 
-    Err(last_retryable_error.unwrap_or(SpacetimeClientError::Timeout))
+    Err(
+        last_retryable_error.unwrap_or(SpacetimeClientError::Timeout(
+            SpacetimeClientStage::ProcedureResult,
+        )),
+    )
 }
 
 pub(super) fn map_record_anchor_pack_to_domain(
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index f13006a39..fb2430fb8 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -60,11 +60,17 @@ use crate::{
         EditorGenerationQueuedResponse, editor_generation_queue_state,
         editor_generation_source_entity_id, enqueue_editor_generation_job,
     },
+    editor_green_screen::{
+        editor_green_screen_character_prompt_clause,
+        remove_editor_generated_green_screen_background,
+    },
     editor_project::{
-        EditorCanvasGeneratedLayerInput, build_editor_canvas_generated_layer_item,
-        complete_editor_canvas_generation_with_items,
+        EditorCanvasGeneratedLayerInput, PersistEditorGeneratedAssetRequest,
+        build_editor_canvas_generated_layer_item, complete_editor_canvas_generation_with_items,
+        persist_editor_generated_media_asset,
     },
     http_error::AppError,
+    openai_image_generation::DownloadedOpenAiImage,
     platform_errors::map_oss_error,
     prompt::role_asset_studio::{
         build_role_asset_workflow, normalize_animation_prompt_text_by_key,
@@ -100,10 +106,12 @@ const FIXED_ARK_CHARACTER_VIDEO_DURATION_SECONDS: u32 = 4;
 const ARK_VIDEO_TASK_POLL_INTERVAL_MS: u64 = 5_000;
 const EDITOR_CHARACTER_ANIMATION_MODEL: &str = "seedance2.0-fast";
 const EDITOR_CHARACTER_ANIMATION_ASSET_KIND: &str = "editor_character_animation";
-const EDITOR_CHARACTER_ANIMATION_PROMPT_PREFIX: &str = "生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，只作为抠像底色，禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。\n动作描述：";
+const EDITOR_GREEN_SCREEN_SOURCE_ASSET_KIND: &str = "editor_green_screen_source";
+const EDITOR_GREEN_SCREEN_SOURCE_SLOT: &str = "green_screen_source";
 const EDITOR_VIDEO_ASSET_KIND: &str = "editor_video";
 const EDITOR_VIDEO_ENTITY_KIND: &str = "editor_canvas";
 const EDITOR_VIDEO_SLOT: &str = "video_preview";
+const EDITOR_VIDEO_COVER_SLOT: &str = "video_cover";
 const EDITOR_VIDEO_MODEL_SEEDANCE_2: &str = "seedance2.0";
 const EDITOR_VIDEO_MODEL_SEEDANCE_2_FAST: &str = "seedance2.0-fast";
 const EDITOR_VIDEO_MODEL_KLING_3: &str = "kling3.0";
@@ -151,6 +159,7 @@ struct PersistedEditorVideo {
     legacy_public_path: String,
     object_key: String,
     asset_object_id: String,
+    thumbnail_src: String,
 }
 
 pub async fn list_character_animation_templates(
@@ -827,7 +836,12 @@ pub(crate) async fn generate_editor_video_for_owner(
     let canvas_completion = payload.canvas_completion.clone();
     let generation_inputs = payload.generation_inputs.clone();
     let source_resource_id = payload.source_resource_id.clone();
-    let asset_kind = payload.asset_kind.clone();
+    let asset_kind = payload
+        .asset_kind
+        .clone()
+        .unwrap_or_else(|| "video".to_string());
+    let asset_folder_id = payload.asset_folder_id.clone();
+    let asset_label = payload.asset_label.clone();
 
     let pricing = state.editor_generation_pricing().map_err(|error| {
         editor_video_error_response(
@@ -863,17 +877,52 @@ pub(crate) async fn generate_editor_video_for_owner(
     )
     .await
     .map_err(|error| editor_video_error_response(&request_context, error))?;
+    let image_src = generated.preview_video_path.clone();
+    let (resource, asset) = persist_editor_generated_media_asset(
+        &state,
+        PersistEditorGeneratedAssetRequest {
+            project_id: project_id.clone(),
+            owner_user_id: owner_user_id.clone(),
+            folder_id: asset_folder_id,
+            label: asset_label
+                .and_then(|value| {
+                    let trimmed = value.trim().to_string();
+                    (!trimmed.is_empty()).then_some(trimmed)
+                })
+                .unwrap_or_else(|| "生成视频".to_string()),
+            image_src: image_src.clone(),
+            object_key: generated.object_key.clone(),
+            asset_object_id: generated.asset_object_id.clone(),
+            width: normalized.width,
+            height: normalized.height,
+            prompt: normalized.prompt.clone(),
+            actual_prompt: Some(generated.submitted_prompt.clone()),
+            model: normalized.model.clone(),
+            provider: "VectorEngine".to_string(),
+            task_id: task_id.clone(),
+            source_resource_id: source_resource_id.clone(),
+            asset_kind: Some(asset_kind.clone()),
+            generation_inputs: generation_inputs.clone(),
+            thumbnail_src: generated.thumbnail_src.clone(),
+        },
+    )
+    .await
+    .map_err(|error| editor_video_error_response(&request_context, error))?;
     let completed_project = if let Some(completion) = canvas_completion.as_ref() {
         let layer_id = format!("layer-editor-video-{task_id}");
+        let resource_id = resource
+            .as_ref()
+            .map(|resource| resource.resource_id.clone())
+            .unwrap_or_else(|| format!("local-resource-editor-video-{task_id}"));
         let item = build_editor_canvas_generated_layer_item(
             completion,
             EditorCanvasGeneratedLayerInput {
                 layer_id: layer_id.clone(),
-                resource_id: format!("local-resource-editor-video-{task_id}"),
+                resource_id,
                 title: completion.title.trim().to_string(),
-                src: generated.preview_video_path.clone(),
+                src: image_src.clone(),
                 media_type: Some("video".to_string()),
-                thumbnail_src: None,
+                thumbnail_src: generated.thumbnail_src.clone(),
                 original_width: normalized.width,
                 original_height: normalized.height,
                 display_width: completion.placeholder.width,
@@ -888,7 +937,7 @@ pub(crate) async fn generate_editor_video_for_owner(
                 asset_object_id: generated.asset_object_id.clone(),
                 duration_seconds: Some(normalized.duration_seconds),
                 source_resource_id,
-                asset_kind: Some(asset_kind.unwrap_or_else(|| "video".to_string())),
+                asset_kind: Some(asset_kind.clone()),
                 generation_inputs,
                 image_sequence_frames: None,
                 preview_video_path: None,
@@ -909,12 +958,15 @@ pub(crate) async fn generate_editor_video_for_owner(
     };
     let completed_project =
         completed_project.and_then(|project| serde_json::to_value(project).ok());
+    let resource = resource.and_then(|resource| serde_json::to_value(resource).ok());
+    let asset = asset.and_then(|asset| serde_json::to_value(asset).ok());
 
     Ok(json_success_body(
         Some(&request_context),
         EditorVideoGenerateResponse {
             ok: true,
             video_src: generated.preview_video_path,
+            thumbnail_src: generated.thumbnail_src,
             object_key: generated.object_key,
             asset_object_id: generated.asset_object_id,
             width: normalized.width,
@@ -929,6 +981,8 @@ pub(crate) async fn generate_editor_video_for_owner(
             resolution: normalized.resolution,
             price_mud_points: normalized.price_mud_points,
             project: completed_project,
+            resource,
+            asset,
             queue_state: None,
         },
     ))
@@ -1124,9 +1178,12 @@ pub async fn resolve_role_asset_workflow(
     })?;
 
     let cache_scope_id = trim_optional_text(payload.cache_scope_id.as_deref());
-    let cache = load_workflow_cache(&state, character_id.as_str(), cache_scope_id.as_deref())
-        .await
-        .map_err(|error| character_animation_error_response(&request_context, error))?;
+    let cache =
+        match load_workflow_cache(&state, character_id.as_str(), cache_scope_id.as_deref()).await {
+            Ok(cache) => cache,
+            Err(error) if is_missing_oss_config_error(&error) => None,
+            Err(error) => return Err(character_animation_error_response(&request_context, error)),
+        };
     let workflow = build_role_asset_workflow(payload.role, cache.as_ref());
 
     Ok(json_success_body(
@@ -1437,6 +1494,7 @@ async fn request_image_to_video_preview(
         preview_video_path,
         object_key: None,
         asset_object_id: None,
+        thumbnail_src: None,
         upstream_task_id,
         submitted_prompt,
         moderation_fallback_applied,
@@ -1731,6 +1789,7 @@ async fn request_editor_character_animation_preview(
         preview_video_path,
         object_key: None,
         asset_object_id: None,
+        thumbnail_src: None,
         upstream_task_id,
         submitted_prompt: prompt.to_string(),
         moderation_fallback_applied: false,
@@ -1759,6 +1818,7 @@ async fn request_editor_video_preview(
         preview_video_path: persisted.legacy_public_path,
         object_key: Some(persisted.object_key),
         asset_object_id: Some(persisted.asset_object_id),
+        thumbnail_src: Some(persisted.thumbnail_src),
         upstream_task_id,
         submitted_prompt: request.prompt.clone(),
         moderation_fallback_applied: false,
@@ -1816,6 +1876,9 @@ async fn put_generated_editor_video(
     preview_payload: MediaPayload,
 ) -> Result<PersistedEditorVideo, AppError> {
     let content_type = preview_payload.mime_type.clone();
+    let thumbnail_src =
+        put_generated_editor_video_cover(state, owner_user_id, task_id, request, &preview_payload)
+            .await?;
     let put_result = put_character_animation_object(
         state,
         LegacyAssetPrefix::CharacterDrafts,
@@ -1849,9 +1912,65 @@ async fn put_generated_editor_video(
         legacy_public_path: put_result.legacy_public_path,
         object_key: put_result.object_key,
         asset_object_id: confirmed.record.asset_object_id,
+        thumbnail_src,
     })
 }
 
+async fn put_generated_editor_video_cover(
+    state: &AppState,
+    owner_user_id: &str,
+    task_id: &str,
+    request: &NormalizedEditorVideoRequest,
+    preview_payload: &MediaPayload,
+) -> Result<String, AppError> {
+    let temp_dir = create_animation_temp_dir()?;
+    let input_path = temp_dir.join(format!("preview.{}", preview_payload.extension));
+    let output_path = temp_dir.join("cover.png");
+    fs::write(&input_path, &preview_payload.bytes).map_err(|error| {
+        AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+            "provider": "editor-video",
+            "message": format!("写入画板视频封面临时视频失败：{error}"),
+        }))
+    })?;
+
+    let extraction_result = (|| {
+        let settings = resolve_backend_frame_extraction_settings(state);
+        extract_video_frame_to_png(&input_path, &output_path, 0.0, &settings)?;
+        let cover_bytes = fs::read(&output_path).map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "editor-video",
+                "message": format!("读取画板视频首帧封面失败：{error}"),
+            }))
+        })?;
+        Ok::<_, AppError>(cover_bytes)
+    })();
+    let _ = fs::remove_dir_all(&temp_dir);
+    let cover_bytes = extraction_result?;
+
+    let put_result = put_character_animation_object(
+        state,
+        LegacyAssetPrefix::CharacterDrafts,
+        vec![
+            "editor-videos".to_string(),
+            sanitize_storage_segment(request.model.as_str(), "model"),
+            task_id.to_string(),
+        ],
+        "cover.png".to_string(),
+        "image/png".to_string(),
+        cover_bytes,
+        build_asset_metadata(
+            EDITOR_VIDEO_ASSET_KIND,
+            owner_user_id,
+            EDITOR_VIDEO_ENTITY_KIND,
+            task_id,
+            EDITOR_VIDEO_COVER_SLOT,
+            request.model.as_str(),
+        ),
+    )
+    .await?;
+    Ok(put_result.legacy_public_path)
+}
+
 async fn create_editor_ark_image_to_video_task(
     http_client: &reqwest::Client,
     settings: &EditorCharacterAnimationSettings,
@@ -1931,7 +2050,7 @@ async fn extract_and_persist_editor_character_animation_frames(
 ) -> Result<Vec<EditorCharacterAnimationFramePayload>, AppError> {
     let plan = AnimationFrameExtractionPlan {
         frame_count: request.frame_count,
-        apply_chroma_key: true,
+        apply_chroma_key: false,
         sample_start_ratio: 0.0,
         sample_end_ratio: 1.0,
     };
@@ -1945,6 +2064,19 @@ async fn extract_and_persist_editor_character_animation_frames(
         Some(request.duration_seconds as f64),
     )
     .await?;
+    persist_editor_character_animation_green_screen_source_frames(
+        state,
+        owner_user_id,
+        source_layer_id,
+        task_id,
+        &finalized_frames,
+    )
+    .await?;
+    let finalized_frames = remove_editor_character_animation_frame_backgrounds(
+        finalized_frames,
+        request.frame_width,
+        request.frame_height,
+    )?;
 
     let mut frame_payloads = Vec::with_capacity(finalized_frames.len());
     for (index, frame) in finalized_frames.into_iter().enumerate() {
@@ -1980,6 +2112,62 @@ async fn extract_and_persist_editor_character_animation_frames(
     Ok(frame_payloads)
 }
 
+async fn persist_editor_character_animation_green_screen_source_frames(
+    state: &AppState,
+    owner_user_id: &str,
+    source_layer_id: &str,
+    task_id: &str,
+    frames: &[FinalizedAnimationFrame],
+) -> Result<(), AppError> {
+    for (index, frame) in frames.iter().enumerate() {
+        put_character_animation_object(
+            state,
+            LegacyAssetPrefix::Animations,
+            vec![
+                "editor".to_string(),
+                sanitize_storage_segment(source_layer_id, "layer"),
+                task_id.to_string(),
+            ],
+            format!("green-screen-frame{:02}.{}", index + 1, frame.extension),
+            frame.mime_type.clone(),
+            frame.bytes.clone(),
+            build_asset_metadata(
+                EDITOR_GREEN_SCREEN_SOURCE_ASSET_KIND,
+                owner_user_id,
+                "editor_layer",
+                source_layer_id,
+                EDITOR_GREEN_SCREEN_SOURCE_SLOT,
+                "editor-character-animation",
+            ),
+        )
+        .await?;
+    }
+    Ok(())
+}
+
+fn remove_editor_character_animation_frame_backgrounds(
+    frames: Vec<FinalizedAnimationFrame>,
+    frame_width: u32,
+    frame_height: u32,
+) -> Result<Vec<FinalizedAnimationFrame>, AppError> {
+    let mut removed_frames = Vec::with_capacity(frames.len());
+    for frame in frames {
+        let removed = remove_editor_generated_green_screen_background(&DownloadedOpenAiImage {
+            bytes: frame.bytes,
+            mime_type: frame.mime_type,
+            extension: frame.extension,
+        })?;
+        removed_frames.push(finalize_animation_frame_payload(
+            removed.bytes.as_slice(),
+            removed.mime_type.as_str(),
+            frame_width,
+            frame_height,
+            false,
+        )?);
+    }
+    Ok(removed_frames)
+}
+
 async fn publish_animation_set(
     state: &AppState,
     owner_user_id: &str,
@@ -3194,8 +3382,8 @@ fn editor_video_bad_request(message: impl Into<String>) -> AppError {
 
 fn build_editor_character_animation_prompt(prompt_text: &str) -> String {
     format!(
-        "{}\n{}",
-        EDITOR_CHARACTER_ANIMATION_PROMPT_PREFIX,
+        "生成游戏角色动画，参考图作为首帧和尾帧，画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。{}；禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。\n动作描述：\n{}",
+        editor_green_screen_character_prompt_clause(),
         prompt_text.trim()
     )
 }
@@ -4133,6 +4321,14 @@ fn require_oss_client(state: &AppState) -> Result<&platform_oss::OssClient, AppE
     })
 }
 
+fn is_missing_oss_config_error(error: &AppError) -> bool {
+    error.status_code() == StatusCode::SERVICE_UNAVAILABLE
+        && error.details().is_some_and(|details| {
+            details.get("provider").and_then(Value::as_str) == Some("aliyun-oss")
+                && details.get("reason").and_then(Value::as_str) == Some("OSS 未完成环境变量配置")
+        })
+}
+
 fn normalize_required_text(value: &str, fallback: &str) -> String {
     let normalized = value
         .trim()
@@ -4913,6 +5109,7 @@ struct GeneratedAnimationPreview {
     preview_video_path: String,
     object_key: Option<String>,
     asset_object_id: Option<String>,
+    thumbnail_src: Option<String>,
     upstream_task_id: String,
     submitted_prompt: String,
     moderation_fallback_applied: bool,
@@ -5204,6 +5401,8 @@ mod tests {
         assert!(prompt.contains("生成游戏角色动画"));
         assert!(prompt.contains("参考图作为首帧和尾帧"));
         assert!(prompt.contains("背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕"));
+        assert!(prompt.contains("绿幕背景必须平整无纹理、无渐变、无阴影"));
+        assert!(prompt.contains("角色主体不得带绿色描边、绿色投影或绿色反光"));
         assert!(prompt.contains("动作描述：\n行走两步后回到站姿。"));
     }
 
@@ -5252,6 +5451,50 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_character_animation_frames_use_local_green_screen_postprocess() {
+        let source = include_str!("character_animation_assets.rs");
+        assert_function_contains(
+            source,
+            "async fn extract_and_persist_editor_character_animation_frames",
+            "async fn publish_animation_set",
+            &[
+                "apply_chroma_key: false",
+                "persist_editor_character_animation_green_screen_source_frames",
+                "remove_editor_character_animation_frame_backgrounds",
+            ],
+        );
+        assert_function_contains_in_order(
+            source,
+            "async fn extract_and_persist_editor_character_animation_frames",
+            "async fn publish_animation_set",
+            &[
+                "persist_editor_character_animation_green_screen_source_frames",
+                "remove_editor_character_animation_frame_backgrounds",
+            ],
+        );
+        assert_function_contains(
+            source,
+            "async fn persist_editor_character_animation_green_screen_source_frames",
+            "fn remove_editor_character_animation_frame_backgrounds",
+            &[
+                "EDITOR_GREEN_SCREEN_SOURCE_ASSET_KIND",
+                "EDITOR_GREEN_SCREEN_SOURCE_SLOT",
+                "green-screen-frame",
+                "put_character_animation_object",
+            ],
+        );
+        assert_function_contains(
+            source,
+            "fn remove_editor_character_animation_frame_backgrounds",
+            "async fn publish_animation_set",
+            &[
+                "remove_editor_generated_green_screen_background",
+                "finalize_animation_frame_payload",
+            ],
+        );
+    }
+
     #[test]
     fn editor_character_animation_samples_last_frame_before_decode_tail() {
         let last_frame_seconds = compute_sample_time_seconds(4.0, 31, 32, 0.0, 1.0, false);
@@ -5351,6 +5594,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("editor video request should normalize");
 
@@ -5381,6 +5626,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("seedance fast request should normalize");
 
@@ -5408,6 +5655,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("seedance standard request should normalize");
 
@@ -5435,6 +5684,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("seedance standard 1080p request should normalize");
 
@@ -5463,6 +5714,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect_err("seedance fast should reject 1080p");
 
@@ -5490,6 +5743,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("seedance multimodal request should normalize");
 
@@ -5526,6 +5781,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect_err("Seedance reference videos must not accept Base64 data URLs");
 
@@ -5552,6 +5809,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("seedance multimodal request should normalize");
 
@@ -5598,6 +5857,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("seedance objectKey request should normalize");
 
@@ -5638,6 +5899,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect_err("audio-only references should fail");
 
@@ -5695,4 +5958,22 @@ mod tests {
             );
         }
     }
+
+    fn assert_function_contains_in_order(source: &str, start: &str, end: &str, snippets: &[&str]) {
+        let start_index = source
+            .find(start)
+            .unwrap_or_else(|| panic!("missing function start marker: {start}"));
+        let tail = &source[start_index..];
+        let end_index = tail
+            .find(end)
+            .unwrap_or_else(|| panic!("missing function end marker: {end}"));
+        let body = &tail[..end_index];
+        let mut cursor = 0;
+        for snippet in snippets {
+            let next = body[cursor..]
+                .find(snippet)
+                .unwrap_or_else(|| panic!("function body starting with {start} should contain {snippet} after offset {cursor}"));
+            cursor += next + snippet.len();
+        }
+    }
 }
diff --git a/server-rs/crates/api-server/src/config.rs b/server-rs/crates/api-server/src/config.rs
index b9baf69d5..f50289e2e 100644
--- a/server-rs/crates/api-server/src/config.rs
+++ b/server-rs/crates/api-server/src/config.rs
@@ -14,6 +14,8 @@ const DEFAULT_INTERNAL_API_SECRET: &str = "genarrative-dev-internal-bridge";
 const SPACETIME_LOCAL_CONFIG_FILE: &str = "spacetime.local.json";
 const DEFAULT_SPACETIME_HEALTH_CHECK_TIMEOUT_SECONDS: u64 = 2;
 pub(crate) const DEFAULT_VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS: u64 = 1_000_000;
+const DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL: &str = "http://58.87.105.82";
+const DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS: u64 = 120_000;
 
 // 集中管理 api-server 的启动配置，避免入口层直接散落环境变量解析逻辑。
 #[derive(Clone, Debug)]
@@ -51,6 +53,9 @@ pub struct AppConfig {
     pub wallet_refund_outbox_flush_interval: Duration,
     pub wallet_refund_outbox_max_bytes: u64,
     pub editor_generation_pricing_override_path: PathBuf,
+    pub editor_background_removal_base_url: String,
+    pub editor_background_removal_token: Option<String>,
+    pub editor_background_removal_request_timeout_ms: u64,
     pub log_filter: String,
     pub otel_enabled: bool,
     pub admin_username: Option<String>,
@@ -273,6 +278,11 @@ impl Default for AppConfig {
             wallet_refund_outbox_max_bytes: 64 * 1024 * 1024,
             editor_generation_pricing_override_path:
                 crate::editor_generation_config::default_editor_generation_pricing_override_path(),
+            editor_background_removal_base_url: DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL
+                .to_string(),
+            editor_background_removal_token: None,
+            editor_background_removal_request_timeout_ms:
+                DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS,
             log_filter: "info,tower_http=info".to_string(),
             otel_enabled: false,
             admin_username: None,
@@ -451,6 +461,18 @@ impl AppConfig {
         {
             config.editor_generation_pricing_override_path = PathBuf::from(pricing_override_path);
         }
+        if let Some(base_url) =
+            read_first_non_empty_env(&["GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL"])
+        {
+            config.editor_background_removal_base_url = base_url;
+        }
+        config.editor_background_removal_token =
+            read_first_non_empty_env(&["GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN"]);
+        if let Some(timeout_ms) = read_first_positive_u64_env(&[
+            "GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS",
+        ]) {
+            config.editor_background_removal_request_timeout_ms = timeout_ms;
+        }
         if let Some(listen_backlog) =
             read_first_positive_i32_env(&["GENARRATIVE_API_LISTEN_BACKLOG"])
         {
@@ -1438,8 +1460,10 @@ fn parse_positive_u16(raw: &str) -> Option<u16> {
 #[cfg(test)]
 mod tests {
     use super::{
-        AppConfig, DEFAULT_VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS, ExternalGenerationMode,
-        LlmProvider, ProcessRole, parse_bool, parse_external_generation_mode, parse_process_role,
+        AppConfig, DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL,
+        DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS,
+        DEFAULT_VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS, ExternalGenerationMode, LlmProvider,
+        ProcessRole, parse_bool, parse_external_generation_mode, parse_process_role,
     };
     use std::sync::{Mutex, OnceLock};
 
@@ -1453,6 +1477,15 @@ mod tests {
         assert!(config.llm_base_url.is_empty());
         // assert!(config.apimart_base_url.is_empty());
         assert!(config.vector_engine_base_url.is_empty());
+        assert_eq!(
+            config.editor_background_removal_base_url,
+            DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL
+        );
+        assert_eq!(
+            config.editor_background_removal_request_timeout_ms,
+            DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS
+        );
+        assert!(config.editor_background_removal_token.is_none());
         assert!(config.ark_character_video_base_url.is_empty());
         assert_eq!(config.hyper3d_base_url, "https://api.hyper3d.com/api/v2");
         assert!(config.ark_character_video_model.is_empty());
@@ -2079,6 +2112,46 @@ mod tests {
         }
     }
 
+    #[test]
+    fn from_env_reads_editor_background_removal_settings() {
+        let _guard = ENV_LOCK
+            .get_or_init(|| Mutex::new(()))
+            .lock()
+            .expect("env lock should not poison");
+
+        unsafe {
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS");
+            std::env::set_var(
+                "GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL",
+                "http://10.0.0.12:8090",
+            );
+            std::env::set_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN", "token-1");
+            std::env::set_var(
+                "GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS",
+                "90000",
+            );
+        }
+
+        let config = AppConfig::from_env();
+        assert_eq!(
+            config.editor_background_removal_base_url,
+            "http://10.0.0.12:8090"
+        );
+        assert_eq!(
+            config.editor_background_removal_token.as_deref(),
+            Some("token-1")
+        );
+        assert_eq!(config.editor_background_removal_request_timeout_ms, 90_000);
+
+        unsafe {
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS");
+        }
+    }
+
     #[test]
     fn from_env_reads_prefixed_character_animation_ffmpeg_paths() {
         let _guard = ENV_LOCK
diff --git a/server-rs/crates/api-server/src/editor_generation_queue.rs b/server-rs/crates/api-server/src/editor_generation_queue.rs
index 047b6ad75..ac72bb7aa 100644
--- a/server-rs/crates/api-server/src/editor_generation_queue.rs
+++ b/server-rs/crates/api-server/src/editor_generation_queue.rs
@@ -11,6 +11,7 @@ use crate::{http_error::AppError, request_context::RequestContext, state::AppSta
 
 pub(crate) const EDITOR_IMAGE_GENERATION_JOB_KIND: &str = "editor_image_generation";
 pub(crate) const EDITOR_IMAGE_EDIT_JOB_KIND: &str = "editor_image_edit";
+pub(crate) const EDITOR_BACKGROUND_REMOVAL_JOB_KIND: &str = "editor_background_removal";
 pub(crate) const EDITOR_ICON_SPRITESHEET_GENERATION_JOB_KIND: &str =
     "editor_icon_spritesheet_generation";
 pub(crate) const EDITOR_UI_DESIGN_ASSET_EXTRACTION_JOB_KIND: &str =
diff --git a/server-rs/crates/api-server/src/editor_green_screen.rs b/server-rs/crates/api-server/src/editor_green_screen.rs
new file mode 100644
index 000000000..433477202
--- /dev/null
+++ b/server-rs/crates/api-server/src/editor_green_screen.rs
@@ -0,0 +1,109 @@
+use axum::http::StatusCode;
+use platform_image::generated_asset_sheets::{
+    GeneratedAssetSheetAlphaOptions, GeneratedAssetSheetError,
+    remove_generated_asset_sheet_green_screen_background_bytes,
+};
+use serde_json::json;
+
+use crate::{http_error::AppError, openai_image_generation::DownloadedOpenAiImage};
+
+pub(crate) const EDITOR_GREEN_SCREEN_COLOR_PROMPT: &str = "单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕";
+pub(crate) const EDITOR_GREEN_SCREEN_BACKGROUND_GUARDRAILS: &str =
+    "绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具";
+pub(crate) const EDITOR_GREEN_SCREEN_ASSET_GUARDRAILS: &str =
+    "素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光";
+pub(crate) const EDITOR_GREEN_SCREEN_CHARACTER_GUARDRAILS: &str =
+    "角色主体不得带绿色描边、绿色投影或绿色反光";
+
+pub(crate) fn editor_green_screen_asset_prompt_clause() -> String {
+    format!(
+        "背景必须是{}，且{}，方便扣除背景；{}",
+        EDITOR_GREEN_SCREEN_COLOR_PROMPT,
+        EDITOR_GREEN_SCREEN_BACKGROUND_GUARDRAILS,
+        EDITOR_GREEN_SCREEN_ASSET_GUARDRAILS
+    )
+}
+
+pub(crate) fn editor_green_screen_character_prompt_clause() -> String {
+    format!(
+        "背景固定为{}，只作为抠像底色；{}；{}",
+        EDITOR_GREEN_SCREEN_COLOR_PROMPT,
+        EDITOR_GREEN_SCREEN_BACKGROUND_GUARDRAILS,
+        EDITOR_GREEN_SCREEN_CHARACTER_GUARDRAILS
+    )
+}
+
+pub(crate) fn editor_ui_design_asset_extraction_prompt() -> String {
+    format!(
+        "仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用{}。{}，方便后续扣除背景；{}。",
+        EDITOR_GREEN_SCREEN_COLOR_PROMPT,
+        EDITOR_GREEN_SCREEN_BACKGROUND_GUARDRAILS,
+        EDITOR_GREEN_SCREEN_ASSET_GUARDRAILS
+    )
+}
+
+pub(crate) fn remove_editor_generated_green_screen_background(
+    image: &DownloadedOpenAiImage,
+) -> Result<DownloadedOpenAiImage, AppError> {
+    let bytes = remove_generated_asset_sheet_green_screen_background_bytes(
+        image.bytes.as_slice(),
+        GeneratedAssetSheetAlphaOptions {
+            remove_muted_green_screen_background: true,
+            detect_internal_holes: true,
+            internal_hole_min_pixels: 16,
+            ..GeneratedAssetSheetAlphaOptions::green_screen()
+        },
+    )
+    .map_err(map_editor_green_screen_error)?;
+
+    Ok(DownloadedOpenAiImage {
+        bytes,
+        mime_type: "image/png".to_string(),
+        extension: "png".to_string(),
+    })
+}
+
+fn map_editor_green_screen_error(error: GeneratedAssetSheetError) -> AppError {
+    let status = match error {
+        GeneratedAssetSheetError::DecodeImage { .. } => StatusCode::BAD_GATEWAY,
+        GeneratedAssetSheetError::InvalidRequest { .. } => StatusCode::BAD_REQUEST,
+        GeneratedAssetSheetError::EncodeImage { .. }
+        | GeneratedAssetSheetError::BuildHttpClient { .. }
+        | GeneratedAssetSheetError::Oss(_) => StatusCode::INTERNAL_SERVER_ERROR,
+    };
+    AppError::from_status(status).with_details(json!({
+        "provider": "editor-green-screen",
+        "message": error.message(),
+    }))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::io::Cursor;
+
+    use image::{DynamicImage, ImageFormat, Rgba, RgbaImage};
+
+    #[test]
+    fn editor_green_screen_postprocess_turns_background_transparent() {
+        let mut source = RgbaImage::from_pixel(3, 3, Rgba([0, 255, 0, 255]));
+        source.put_pixel(1, 1, Rgba([240, 40, 40, 255]));
+        let mut bytes = Vec::new();
+        DynamicImage::ImageRgba8(source)
+            .write_to(&mut Cursor::new(&mut bytes), ImageFormat::Png)
+            .expect("test PNG should encode");
+
+        let output = remove_editor_generated_green_screen_background(&DownloadedOpenAiImage {
+            bytes,
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        })
+        .expect("green screen should be removed");
+        let image = image::load_from_memory(output.bytes.as_slice())
+            .expect("output PNG should decode")
+            .to_rgba8();
+
+        assert_eq!(image.get_pixel(0, 0).0[3], 0);
+        assert_eq!(image.get_pixel(1, 1).0[3], 255);
+    }
+}
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index f12dddd89..b21864893 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -1,4 +1,4 @@
-use std::{borrow::Cow, collections::BTreeMap};
+use std::{borrow::Cow, collections::BTreeMap, io::Cursor, time::Instant};
 
 use axum::{
     Json,
@@ -12,13 +12,11 @@ use module_assets::{
 };
 use platform_image::{
     DownloadedImage,
-    generated_asset_sheets::{
-        GeneratedAssetSheetAlphaOptions, apply_generated_asset_sheet_alpha_with_options,
-        slice_generated_icon_spritesheet_all_by_connected_components,
-        slice_generated_icon_spritesheet_by_connected_components,
-    },
+    generated_asset_sheets::slice_generated_icon_spritesheet_all_by_connected_components,
+};
+use platform_oss::{
+    LegacyAssetPrefix, OssHeadObjectRequest, OssObjectAccess, OssSignedGetObjectUrlRequest,
 };
-use platform_oss::{LegacyAssetPrefix, OssHeadObjectRequest, OssObjectAccess};
 use serde::{Deserialize, Serialize};
 use serde_json::{Value, json};
 use shared_contracts::assets::{
@@ -44,10 +42,15 @@ use crate::{
     asset_billing::execute_billable_asset_operation_with_cost,
     auth::AuthenticatedAccessToken,
     editor_generation_queue::{
-        EDITOR_ICON_SPRITESHEET_GENERATION_JOB_KIND, EDITOR_IMAGE_EDIT_JOB_KIND,
-        EDITOR_IMAGE_GENERATION_JOB_KIND, EDITOR_UI_DESIGN_ASSET_EXTRACTION_JOB_KIND,
-        EditorGenerationQueuedResponse, editor_generation_queue_state,
-        editor_generation_source_entity_id, enqueue_editor_generation_job,
+        EDITOR_BACKGROUND_REMOVAL_JOB_KIND, EDITOR_ICON_SPRITESHEET_GENERATION_JOB_KIND,
+        EDITOR_IMAGE_EDIT_JOB_KIND, EDITOR_IMAGE_GENERATION_JOB_KIND,
+        EDITOR_UI_DESIGN_ASSET_EXTRACTION_JOB_KIND, EditorGenerationQueuedResponse,
+        editor_generation_queue_state, editor_generation_source_entity_id,
+        enqueue_editor_generation_job,
+    },
+    editor_green_screen::{
+        editor_green_screen_asset_prompt_clause, editor_green_screen_character_prompt_clause,
+        editor_ui_design_asset_extraction_prompt, remove_editor_generated_green_screen_background,
     },
     generated_image_assets::{
         GeneratedImageAssetAdapter, GeneratedImageAssetDataUrl,
@@ -57,14 +60,14 @@ use crate::{
     http_error::AppError,
     openai_image_generation::{
         DownloadedOpenAiImage, GPT_IMAGE_2_MODEL, OpenAiReferenceImage,
-        build_openai_image_http_client, create_openai_image_edit_with_references,
-        create_openai_image_edit_with_references_and_model,
+        build_openai_image_http_client, create_openai_image_edit_with_references_and_model,
         create_openai_image_generation_with_model, create_openai_nanobanana_generate_content,
         require_openai_image_settings,
     },
     platform_errors::map_oss_error,
     request_context::RequestContext,
     state::AppState,
+    work_author::{ORPHAN_WORK_AUTHOR_PUBLIC_USER_CODE, ORPHAN_WORK_OWNER_USER_ID},
 };
 
 pub(crate) const EDITOR_PROJECT_ID_PREFIX: &str = "editor-project-";
@@ -80,8 +83,7 @@ const EDITOR_IMAGE_MODEL_NANOBANANA2: &str = "gemini-3.1-flash-image-preview";
 const EDITOR_IMAGE_MODEL_NANOBANANA2_DISPLAY_ALIAS: &str = "nanobanana2";
 const EDITOR_IMAGE_MODEL_NANOBANANA_LEGACY_ALIAS: &str = "nano-banana";
 const EDITOR_ICON_DESCRIPTION_LIMIT: usize = 100;
-const EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT: &str =
-    "仅提取被红色框框选的素材并整理成spritesheet";
+const EDITOR_UI_DESIGN_ASSET_EXTRACTION_REFERENCE_LIMIT: usize = 5;
 const EDITOR_CHARACTER_IMAGE_ASSET_KIND: &str = "editor_character_image";
 const EDITOR_CHARACTER_IMAGE_ENTITY_KIND: &str = "editor_project";
 const EDITOR_CHARACTER_IMAGE_SLOT: &str = "character";
@@ -91,9 +93,10 @@ const EDITOR_QUICK_EDIT_IMAGE_ASSET_KIND: &str = "editor_quick_edit_image";
 const EDITOR_UI_DESIGN_IMAGE_ASSET_KIND: &str = "editor_ui_design_image";
 const EDITOR_IMAGE_EDIT_ASSET_KIND: &str = "editor_image_edit";
 const EDITOR_ICON_SPRITESHEET_ASSET_KIND: &str = "editor_icon_spritesheet";
-const EDITOR_ICON_IMAGE_ASSET_KIND: &str = "editor_icon_image";
 const EDITOR_UI_DESIGN_SPRITESHEET_ASSET_KIND: &str = "editor_ui_design_spritesheet";
 const EDITOR_UI_DESIGN_ASSET_IMAGE_KIND: &str = "editor_ui_design_asset";
+const EDITOR_GREEN_SCREEN_SOURCE_ASSET_KIND: &str = "editor_green_screen_source";
+const EDITOR_GREEN_SCREEN_SOURCE_SLOT: &str = "green_screen_source";
 const EDITOR_PUBLICATION_MATERIAL_ASSET_KIND: &str = "editor_publication_material";
 const EDITOR_LEGACY_INLINE_IMAGE_ASSET_KIND: &str = "editor_legacy_inline_image";
 
@@ -214,6 +217,9 @@ pub struct EditorImageGenerationRequest {
 pub struct EditorImageEditRequest {
     pub(crate) prompt: String,
     pub(crate) source_image_src: String,
+    pub(crate) size: Option<String>,
+    pub(crate) model: Option<String>,
+    pub(crate) reference_image_srcs: Option<Vec<String>>,
     pub(crate) project_id: Option<String>,
     pub(crate) asset_kind: Option<String>,
     pub(crate) generation_inputs: Option<Value>,
@@ -223,10 +229,25 @@ pub struct EditorImageEditRequest {
     pub(crate) canvas_completion: Option<EditorCanvasGenerationCompletionRequest>,
 }
 
+#[derive(Clone, Debug, Deserialize, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorBackgroundRemovalRequest {
+    pub(crate) source_image_src: String,
+    pub(crate) project_id: Option<String>,
+    pub(crate) target_layer_id: Option<String>,
+    pub(crate) asset_kind: Option<String>,
+    pub(crate) generation_inputs: Option<Value>,
+    pub(crate) asset_folder_id: Option<String>,
+    pub(crate) asset_label: Option<String>,
+    pub(crate) source_resource_id: Option<String>,
+    pub(crate) task_id: Option<String>,
+}
+
 #[derive(Clone, Debug, Deserialize, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorIconSpritesheetGenerationRequest {
     pub(crate) reference_image_src: String,
+    pub(crate) reference_image_srcs: Option<Vec<String>>,
     pub(crate) icon_descriptions: Vec<String>,
     pub(crate) model: Option<String>,
     pub(crate) aspect_ratio: Option<String>,
@@ -241,6 +262,8 @@ pub struct EditorIconSpritesheetGenerationRequest {
 #[serde(rename_all = "camelCase")]
 pub struct EditorUiDesignAssetExtractionRequest {
     pub(crate) source_image_src: String,
+    pub(crate) model: Option<String>,
+    pub(crate) reference_image_srcs: Option<Vec<String>>,
     pub(crate) aspect_ratio: String,
     pub(crate) image_size: String,
     pub(crate) project_id: Option<String>,
@@ -336,9 +359,9 @@ pub struct EditorAssetResponse {
 }
 
 #[derive(Debug)]
-struct EditorGeneratedAssetRecord {
-    resource: Option<EditorProjectResourcePayload>,
-    asset: Option<EditorAssetPayload>,
+pub(crate) struct EditorGeneratedAssetRecord {
+    pub(crate) resource: Option<EditorProjectResourcePayload>,
+    pub(crate) asset: Option<EditorAssetPayload>,
 }
 
 struct EditorCanvasGenerationCompletionResult {
@@ -347,24 +370,46 @@ struct EditorCanvasGenerationCompletionResult {
 }
 
 #[derive(Debug)]
-struct PersistEditorGeneratedAssetInput {
-    project_id: Option<String>,
-    owner_user_id: String,
-    folder_id: Option<String>,
-    label: String,
-    image_src: String,
-    object_key: Option<String>,
-    asset_object_id: Option<String>,
-    width: u32,
-    height: u32,
-    prompt: String,
-    actual_prompt: Option<String>,
-    model: String,
-    provider: String,
-    task_id: String,
-    source_resource_id: Option<String>,
-    asset_kind: Option<String>,
-    generation_inputs: Option<Value>,
+pub(crate) struct PersistEditorGeneratedAssetInput {
+    pub(crate) project_id: Option<String>,
+    pub(crate) owner_user_id: String,
+    pub(crate) folder_id: Option<String>,
+    pub(crate) label: String,
+    pub(crate) image_src: String,
+    pub(crate) object_key: Option<String>,
+    pub(crate) asset_object_id: Option<String>,
+    pub(crate) width: u32,
+    pub(crate) height: u32,
+    pub(crate) prompt: String,
+    pub(crate) actual_prompt: Option<String>,
+    pub(crate) model: String,
+    pub(crate) provider: String,
+    pub(crate) task_id: String,
+    pub(crate) source_resource_id: Option<String>,
+    pub(crate) asset_kind: Option<String>,
+    pub(crate) generation_inputs: Option<Value>,
+    pub(crate) thumbnail_src: Option<String>,
+}
+
+pub(crate) struct PersistEditorGeneratedAssetRequest {
+    pub(crate) project_id: Option<String>,
+    pub(crate) owner_user_id: String,
+    pub(crate) folder_id: Option<String>,
+    pub(crate) label: String,
+    pub(crate) image_src: String,
+    pub(crate) object_key: Option<String>,
+    pub(crate) asset_object_id: Option<String>,
+    pub(crate) width: u32,
+    pub(crate) height: u32,
+    pub(crate) prompt: String,
+    pub(crate) actual_prompt: Option<String>,
+    pub(crate) model: String,
+    pub(crate) provider: String,
+    pub(crate) task_id: String,
+    pub(crate) source_resource_id: Option<String>,
+    pub(crate) asset_kind: Option<String>,
+    pub(crate) generation_inputs: Option<Value>,
+    pub(crate) thumbnail_src: Option<String>,
 }
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
@@ -420,6 +465,23 @@ pub struct EditorImageGenerationResponse {
     project: Option<EditorProjectPayload>,
 }
 
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorBackgroundRemovalResponse {
+    image_src: String,
+    object_key: String,
+    asset_object_id: String,
+    width: u32,
+    height: u32,
+    source_type: &'static str,
+    task_id: String,
+    elapsed_ms: u64,
+    provider: &'static str,
+    resource: Option<EditorProjectResourcePayload>,
+    asset: Option<EditorAssetPayload>,
+    project: Option<EditorProjectPayload>,
+}
+
 #[derive(Debug, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorIconSpritesheetIconResponse {
@@ -476,9 +538,13 @@ pub struct EditorCanvasPayload {
 #[derive(Debug, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorProjectResourcePayload {
-    resource_id: String,
+    pub(crate) resource_id: String,
     project_id: String,
     owner_user_id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    author_display_name: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    author_public_user_code: Option<String>,
     image_src: String,
     object_key: Option<String>,
     asset_object_id: Option<String>,
@@ -538,6 +604,7 @@ pub struct EditorAssetPayload {
     generation_inputs: Option<Value>,
     source_resource_id: Option<String>,
     public_showcase_enabled: Option<bool>,
+    thumbnail_src: Option<String>,
     created_at: String,
     updated_at: String,
 }
@@ -617,7 +684,7 @@ pub async fn list_public_editor_project_resources(
         .map_err(map_editor_project_error)?;
     let resources = resources
         .into_iter()
-        .map(editor_project_resource_payload_from_record)
+        .map(|record| editor_project_resource_public_payload_from_record(&state, record))
         .collect();
 
     Ok(json_success_body(
@@ -959,6 +1026,7 @@ pub async fn create_editor_asset(
             generation_inputs_json,
             source_resource_id: None,
             now_micros: current_utc_micros(),
+            thumbnail_src: None,
         })
         .await
         .map_err(map_editor_project_error)?;
@@ -1168,10 +1236,14 @@ pub(crate) async fn generate_editor_image_for_owner(
     let reference_images = if reference_sources.is_empty() {
         Vec::new()
     } else {
-        reference_sources
-            .iter()
-            .map(|source| parse_editor_reference_image(source.as_str()))
-            .collect::<Result<Vec<_>, _>>()?
+        let mut parsed_reference_images = Vec::with_capacity(reference_sources.len());
+        for source in &reference_sources {
+            parsed_reference_images.push(
+                parse_editor_reference_image(state, caller.owner_user_id.as_str(), source.as_str())
+                    .await?,
+            );
+        }
+        parsed_reference_images
     };
     let image_size = if is_ui_design_generation {
         Cow::Owned(generation_options.size.clone())
@@ -1249,7 +1321,18 @@ pub(crate) async fn generate_editor_image_for_owner(
         }))
     })?;
     if is_character_generation {
-        image = prepare_editor_character_image_for_response(image);
+        persist_editor_green_screen_source_image(
+            state,
+            caller.owner_user_id.as_str(),
+            generated.task_id.as_str(),
+            &image,
+            submitted_prompt.as_str(),
+            generated.actual_prompt.as_deref(),
+            "character-images",
+            "character-image",
+        )
+        .await?;
+        image = remove_editor_generated_green_screen_background(&image)?;
     }
 
     let (width, height) = image::load_from_memory(image.bytes.as_slice())
@@ -1267,6 +1350,7 @@ pub(crate) async fn generate_editor_image_for_owner(
         storage_profile.path_kind,
         "image",
         storage_profile.slot,
+        "vector-engine",
     );
     let persisted = persisted.await?;
     let image_src = editor_media_src_from_object_key(persisted.object_key.as_str());
@@ -1291,6 +1375,7 @@ pub(crate) async fn generate_editor_image_for_owner(
             source_resource_id: payload.source_resource_id,
             asset_kind: payload.asset_kind,
             generation_inputs: payload.generation_inputs,
+            thumbnail_src: None,
         },
     )
     .await?;
@@ -1372,7 +1457,11 @@ fn editor_generated_image_storage_profile(
     }
 }
 
-fn resolve_editor_image_edit_price(state: &AppState) -> Result<u32, AppError> {
+fn resolve_editor_image_edit_price(
+    state: &AppState,
+    model: &str,
+    size: &str,
+) -> Result<u32, AppError> {
     let expected_price_mud_points = state
         .editor_generation_pricing()
         .map_err(|error| {
@@ -1381,10 +1470,27 @@ fn resolve_editor_image_edit_price(state: &AppState) -> Result<u32, AppError> {
                 "message": error.to_string(),
             }))
         })?
-        .image_generation_mud_points(Some("quick-edit"), Some(GPT_IMAGE_2_MODEL), Some("1K"));
+        .image_generation_mud_points(
+            Some("quick-edit"),
+            Some(model),
+            Some(editor_image_price_size_from_pixels(size)),
+        );
     Ok(expected_price_mud_points)
 }
 
+fn editor_image_price_size_from_pixels(size: &str) -> &'static str {
+    let Some((width, height)) = size.split_once('x') else {
+        return "1K";
+    };
+    let Ok(width) = width.parse::<u32>() else {
+        return "1K";
+    };
+    let Ok(height) = height.parse::<u32>() else {
+        return "1K";
+    };
+    if width.max(height) > 1536 { "2K" } else { "1K" }
+}
+
 fn normalize_editor_image_generation_size(size: Option<&str>) -> Cow<'static, str> {
     match size.map(str::trim).filter(|value| !value.is_empty()) {
         Some("1024x1024") | Some("1024*1024") | Some("1:1") => Cow::Borrowed("1024x1024"),
@@ -1534,7 +1640,14 @@ pub async fn edit_editor_image(
 ) -> Result<Json<Value>, AppError> {
     let caller = EditorGenerationCaller::from_authenticated(&authenticated);
     if !state.config.external_generation_mode.is_inline() {
-        let price_mud_points = u64::from(resolve_editor_image_edit_price(&state)?);
+        let generation_options =
+            normalize_editor_generation_options(payload.model.as_deref(), None, None);
+        let image_size = normalize_editor_image_generation_size(payload.size.as_deref());
+        let price_mud_points = u64::from(resolve_editor_image_edit_price(
+            &state,
+            generation_options.model,
+            image_size.as_ref(),
+        )?);
         let source_entity_id =
             editor_generation_source_entity_id(payload.project_id.as_deref(), "editor-image-edit");
         let queue_job = enqueue_editor_generation_job(
@@ -1573,8 +1686,28 @@ pub(crate) async fn edit_editor_image_for_owner(
             })),
         );
     }
-    let reference_image = parse_editor_reference_image(payload.source_image_src.as_str())?;
-    let expected_price_mud_points = resolve_editor_image_edit_price(state)?;
+    let generation_options =
+        normalize_editor_generation_options(payload.model.as_deref(), None, None);
+    let image_size = normalize_editor_image_generation_size(payload.size.as_deref());
+    let mut reference_images =
+        Vec::with_capacity(1 + payload.reference_image_srcs.as_ref().map_or(0, Vec::len));
+    reference_images.push(
+        parse_editor_reference_image(
+            state,
+            caller.owner_user_id.as_str(),
+            payload.source_image_src.as_str(),
+        )
+        .await?,
+    );
+    for source in
+        normalize_editor_reference_image_sources(payload.reference_image_srcs.as_deref(), 8)
+    {
+        reference_images.push(
+            parse_editor_reference_image(state, caller.owner_user_id.as_str(), source).await?,
+        );
+    }
+    let expected_price_mud_points =
+        resolve_editor_image_edit_price(state, generation_options.model, image_size.as_ref())?;
 
     let settings = require_openai_image_settings(state)?.with_external_api_audit_context(
         request_context,
@@ -1591,14 +1724,15 @@ pub(crate) async fn edit_editor_image_for_owner(
         "editor_image_edit",
         request_context.request_id(),
         u64::from(expected_price_mud_points),
-        create_openai_image_edit_with_references(
+        create_openai_image_edit_with_references_and_model(
             &http_client,
             &settings,
+            generation_options.model,
             prompt.as_str(),
             Some("文字、水印、边框、按钮、UI 控件、低清晰度、变形主体"),
-            EDITOR_IMAGE_GENERATION_SIZE,
+            image_size.as_ref(),
             1,
-            &[reference_image],
+            reference_images.as_slice(),
             "图片画布修改图片",
         ),
     )
@@ -1624,6 +1758,7 @@ pub(crate) async fn edit_editor_image_for_owner(
         "edit-images",
         "image",
         "edit",
+        "vector-engine",
     )
     .await?;
     let image_src = editor_media_src_from_object_key(persisted.object_key.as_str());
@@ -1642,12 +1777,13 @@ pub(crate) async fn edit_editor_image_for_owner(
             height,
             prompt: prompt.clone(),
             actual_prompt: generated.actual_prompt.clone(),
-            model: GPT_IMAGE_2_MODEL.to_string(),
+            model: generation_options.model.to_string(),
             provider: "VectorEngine".to_string(),
             task_id: generated.task_id.clone(),
             source_resource_id: payload.source_resource_id,
             asset_kind: payload.asset_kind,
             generation_inputs: payload.generation_inputs,
+            thumbnail_src: None,
         },
     )
     .await?;
@@ -1671,7 +1807,7 @@ pub(crate) async fn edit_editor_image_for_owner(
             source_type: "generated",
             prompt,
             actual_prompt: generated.actual_prompt,
-            model: GPT_IMAGE_2_MODEL.to_string(),
+            model: generation_options.model.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
             resource: generated_asset.resource,
@@ -1681,6 +1817,344 @@ pub(crate) async fn edit_editor_image_for_owner(
     ))
 }
 
+pub async fn remove_editor_image_background(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    Json(payload): Json<EditorBackgroundRemovalRequest>,
+) -> Result<Json<Value>, AppError> {
+    let caller = EditorGenerationCaller::from_authenticated(&authenticated);
+    let source_entity_id = editor_generation_source_entity_id(
+        payload.project_id.as_deref(),
+        "editor-background-removal",
+    );
+    let queue_job = enqueue_editor_generation_job(
+        &state,
+        &request_context,
+        caller.owner_user_id.as_str(),
+        EDITOR_BACKGROUND_REMOVAL_JOB_KIND,
+        source_entity_id,
+        "图片画布去除背景",
+        0,
+        &payload,
+    )
+    .await?;
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorGenerationQueuedResponse {
+            queue_state: editor_generation_queue_state(queue_job),
+        },
+    ))
+}
+
+pub(crate) async fn remove_editor_image_background_for_owner(
+    state: &AppState,
+    request_context: &RequestContext,
+    caller: EditorGenerationCaller,
+    payload: EditorBackgroundRemovalRequest,
+) -> Result<Json<Value>, AppError> {
+    let started_at = Instant::now();
+    let source_image = parse_editor_reference_image(
+        state,
+        caller.owner_user_id.as_str(),
+        payload.source_image_src.as_str(),
+    )
+    .await?;
+    let removed = request_editor_background_removal_image(state, source_image).await?;
+    let task_id = normalize_optional_string(payload.task_id.clone())
+        .unwrap_or_else(|| format!("background-removal-{}", current_utc_micros()));
+    let persisted = persist_editor_generated_image(
+        state,
+        caller.owner_user_id.as_str(),
+        task_id.as_str(),
+        &removed.image,
+        "remove background",
+        None,
+        "background-removal",
+        "background-removal",
+        "removed-background",
+        "result",
+        "birefnet",
+    )
+    .await?;
+    let image_src = editor_media_src_from_object_key(persisted.object_key.as_str());
+    let generated_asset = persist_editor_generated_asset(
+        state,
+        PersistEditorGeneratedAssetInput {
+            project_id: payload.project_id.clone(),
+            owner_user_id: caller.owner_user_id.clone(),
+            folder_id: payload.asset_folder_id,
+            label: normalize_optional_string(payload.asset_label)
+                .unwrap_or_else(|| "去背景结果".to_string()),
+            image_src: image_src.clone(),
+            object_key: Some(persisted.object_key.clone()),
+            asset_object_id: Some(persisted.asset_object_id.clone()),
+            width: removed.width,
+            height: removed.height,
+            prompt: "remove background".to_string(),
+            actual_prompt: None,
+            model: "BiRefNet".to_string(),
+            provider: "BiRefNet".to_string(),
+            task_id: task_id.clone(),
+            source_resource_id: payload.source_resource_id,
+            asset_kind: payload.asset_kind,
+            generation_inputs: payload.generation_inputs,
+            thumbnail_src: None,
+        },
+    )
+    .await?;
+    let completed_project = complete_editor_canvas_background_removal(
+        state,
+        caller.owner_user_id.as_str(),
+        payload.project_id.as_deref(),
+        payload.target_layer_id.as_deref(),
+        generated_asset.resource.as_ref(),
+    )
+    .await?;
+
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorBackgroundRemovalResponse {
+            image_src,
+            object_key: persisted.object_key,
+            asset_object_id: persisted.asset_object_id,
+            width: removed.width,
+            height: removed.height,
+            source_type: "generated",
+            task_id,
+            elapsed_ms: u64::try_from(started_at.elapsed().as_millis()).unwrap_or(u64::MAX),
+            provider: "BiRefNet",
+            resource: generated_asset.resource,
+            asset: generated_asset.asset,
+            project: completed_project,
+        },
+    ))
+}
+
+struct EditorBackgroundRemovalImage {
+    image: DownloadedOpenAiImage,
+    width: u32,
+    height: u32,
+}
+
+async fn request_editor_background_removal_image(
+    state: &AppState,
+    source_image: OpenAiReferenceImage,
+) -> Result<EditorBackgroundRemovalImage, AppError> {
+    let url = editor_background_removal_endpoint(state)?;
+    let call_id = format!("background-removal-call-{}", current_utc_micros());
+    let request_started_at = Instant::now();
+    let timeout_ms = state
+        .config
+        .editor_background_removal_request_timeout_ms
+        .max(1);
+    let input_bytes = source_image.bytes.len();
+    let source_file_name = source_image.file_name.clone();
+    let source_mime_type = source_image.mime_type.clone();
+    tracing::info!(
+        %call_id,
+        upstream_url = %url,
+        file_name = %source_file_name,
+        mime_type = %source_mime_type,
+        input_bytes,
+        timeout_ms,
+        "editor_background_removal_request_start"
+    );
+    let http_client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_millis(timeout_ms))
+        .build()
+        .map_err(|error| {
+            AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+                "provider": "birefnet",
+                "message": format!("创建抠图 HTTP 客户端失败：{error}"),
+            }))
+        })?;
+    let file_part = reqwest::multipart::Part::bytes(source_image.bytes)
+        .file_name(source_image.file_name)
+        .mime_str(source_image.mime_type.as_str())
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "birefnet",
+                "message": format!("图片 MIME 类型无效：{error}"),
+            }))
+        })?;
+    let mut request = http_client
+        .post(url.as_str())
+        .multipart(reqwest::multipart::Form::new().part("file", file_part));
+    if let Some(token) = state
+        .config
+        .editor_background_removal_token
+        .as_deref()
+        .map(str::trim)
+        .filter(|token| !token.is_empty())
+    {
+        request = request.header("X-Genarrative-Image-Token", token);
+    }
+    let response = request.send().await.map_err(|error| {
+        tracing::warn!(
+            %call_id,
+            elapsed_ms = request_started_at.elapsed().as_millis() as u64,
+            timeout = error.is_timeout(),
+            error = %error,
+            "editor_background_removal_request_failed"
+        );
+        map_editor_background_removal_error(error)
+    })?;
+    let status = response.status();
+    if !status.is_success() {
+        let message = response
+            .text()
+            .await
+            .unwrap_or_else(|error| format!("读取上游错误失败：{error}"));
+        tracing::warn!(
+            %call_id,
+            upstream_status = status.as_u16(),
+            elapsed_ms = request_started_at.elapsed().as_millis() as u64,
+            upstream_message = %message.chars().take(160).collect::<String>(),
+            "editor_background_removal_upstream_rejected"
+        );
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务返回非成功状态",
+                "upstreamStatus": status.as_u16(),
+                "upstreamMessage": message.chars().take(500).collect::<String>(),
+            })),
+        );
+    }
+    let mime_type = response
+        .headers()
+        .get(reqwest::header::CONTENT_TYPE)
+        .and_then(|value| value.to_str().ok())
+        .and_then(normalize_editor_reference_image_mime_type)
+        .unwrap_or("image/png")
+        .to_string();
+    let upstream_elapsed_ms = response
+        .headers()
+        .get("x-birefnet-elapsed-ms")
+        .and_then(|value| value.to_str().ok())
+        .and_then(|value| value.parse::<u64>().ok());
+    let bytes = read_editor_background_removal_bytes(response).await?;
+    if bytes.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务未返回图片",
+            })),
+        );
+    }
+    let decoded = decode_editor_background_removal_image(bytes.as_slice())?;
+    let image = DownloadedOpenAiImage {
+        bytes,
+        extension: editor_reference_image_extension(mime_type.as_str()).to_string(),
+        mime_type,
+    };
+    tracing::info!(
+        %call_id,
+        status = status.as_u16(),
+        width = decoded.width(),
+        height = decoded.height(),
+        input_bytes,
+        output_bytes = image.bytes.len(),
+        elapsed_ms = request_started_at.elapsed().as_millis() as u64,
+        upstream_elapsed_ms,
+        "editor_background_removal_request_done"
+    );
+
+    Ok(EditorBackgroundRemovalImage {
+        image,
+        width: decoded.width(),
+        height: decoded.height(),
+    })
+}
+
+fn editor_background_removal_endpoint(state: &AppState) -> Result<String, AppError> {
+    let base_url = state.config.editor_background_removal_base_url.trim();
+    if base_url.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务地址未配置",
+            })),
+        );
+    }
+    Ok(format!(
+        "{}/remove-background",
+        base_url.trim_end_matches('/')
+    ))
+}
+
+fn map_editor_background_removal_error(error: reqwest::Error) -> AppError {
+    let status = if error.is_timeout() {
+        StatusCode::GATEWAY_TIMEOUT
+    } else {
+        StatusCode::BAD_GATEWAY
+    };
+    AppError::from_status(status).with_details(json!({
+        "provider": "birefnet",
+        "message": format!("请求抠图服务失败：{error}"),
+        "timeout": error.is_timeout(),
+    }))
+}
+
+async fn read_editor_background_removal_bytes(
+    mut response: reqwest::Response,
+) -> Result<Vec<u8>, AppError> {
+    if response.content_length().is_some_and(|content_length| {
+        content_length > EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES as u64
+    }) {
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务返回图片过大",
+                "maxBytes": EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES,
+            })),
+        );
+    }
+    let mut bytes = Vec::new();
+    while let Some(chunk) = response.chunk().await.map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "birefnet",
+            "message": format!("读取抠图结果失败：{error}"),
+        }))
+    })? {
+        if bytes.len().saturating_add(chunk.len()) > EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES {
+            return Err(
+                AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                    "provider": "birefnet",
+                    "message": "抠图服务返回图片过大",
+                    "maxBytes": EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES,
+                })),
+            );
+        }
+        bytes.extend_from_slice(chunk.as_ref());
+    }
+    Ok(bytes)
+}
+
+fn decode_editor_background_removal_image(bytes: &[u8]) -> Result<image::DynamicImage, AppError> {
+    let mut reader = image::ImageReader::new(Cursor::new(bytes))
+        .with_guessed_format()
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": format!("识别抠图结果格式失败：{error}"),
+            }))
+        })?;
+    let mut limits = image::Limits::default();
+    limits.max_image_width = Some(EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION);
+    limits.max_image_height = Some(EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION);
+    limits.max_alloc = Some(EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES as u64 * 4);
+    reader.limits(limits);
+    reader.decode().map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "birefnet",
+            "message": format!("抠图结果不是有效图片：{error}"),
+            "maxDimension": EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION,
+        }))
+    })
+}
+
 pub async fn generate_editor_icon_spritesheet(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -1731,14 +2205,38 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
     payload: EditorIconSpritesheetGenerationRequest,
 ) -> Result<Json<Value>, AppError> {
     let icon_descriptions = normalize_icon_descriptions(payload.icon_descriptions)?;
-    let reference_image = parse_editor_reference_image(payload.reference_image_src.as_str())
+    let mut reference_images =
+        Vec::with_capacity(1 + payload.reference_image_srcs.as_ref().map_or(0, Vec::len));
+    reference_images.push(
+        parse_editor_reference_image(
+            state,
+            caller.owner_user_id.as_str(),
+            payload.reference_image_src.as_str(),
+        )
+        .await
         .map_err(|error| {
             error.with_details(json!({
                 "provider": "editor-icon-spritesheet",
                 "field": "referenceImageSrc",
-                "message": "图标素材规范必须是图片 Data URL。",
+                "message": "图标素材规范必须是图片 Data URL、objectKey、资源或素材引用。",
             }))
-        })?;
+        })?,
+    );
+    for source in
+        normalize_editor_reference_image_sources(payload.reference_image_srcs.as_deref(), 8)
+    {
+        reference_images.push(
+            parse_editor_reference_image(state, caller.owner_user_id.as_str(), source)
+                .await
+                .map_err(|error| {
+                    error.with_details(json!({
+                        "provider": "editor-icon-spritesheet",
+                        "field": "referenceImageSrcs",
+                        "message": "图标素材参考图必须是图片 Data URL、objectKey、资源或素材引用。",
+                    }))
+                })?,
+        );
+    }
     let generation_options = normalize_editor_generation_options(
         payload.model.as_deref(),
         payload.aspect_ratio.as_deref(),
@@ -1777,7 +2275,7 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
                     None,
                     generation_options.aspect_ratio,
                     generation_options.provider_image_size,
-                    &[reference_image],
+                    reference_images.as_slice(),
                     "图片画布生成图标素材 spritesheet",
                 )
                 .await
@@ -1790,7 +2288,7 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
                     None,
                     size,
                     1,
-                    &[reference_image],
+                    reference_images.as_slice(),
                     "图片画布生成图标素材 spritesheet",
                 )
                 .await
@@ -1804,24 +2302,21 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
             "message": "VectorEngine 未返回图标 spritesheet",
         }))
     })?;
+    persist_editor_green_screen_source_image(
+        state,
+        caller.owner_user_id.as_str(),
+        generated.task_id.as_str(),
+        &image,
+        prompt.as_str(),
+        generated.actual_prompt.as_deref(),
+        "icon-spritesheets",
+        "spritesheet",
+    )
+    .await?;
+    let image = remove_editor_generated_green_screen_background(&image)?;
     let (spritesheet_width, spritesheet_height) = image::load_from_memory(image.bytes.as_slice())
         .map(|image| (image.width(), image.height()))
         .unwrap_or((512, 512));
-    let source = DownloadedImage {
-        bytes: image.bytes.clone(),
-        mime_type: image.mime_type.clone(),
-        extension: image.extension.clone(),
-    };
-    let icon_slices = slice_generated_icon_spritesheet_by_connected_components(
-        &source,
-        icon_descriptions.as_slice(),
-    )
-    .map_err(|error| {
-        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
-            "provider": "editor-icon-spritesheet",
-            "message": error.to_string(),
-        }))
-    })?;
     let generation_inputs = payload.generation_inputs.clone();
     let owner_user_id = caller.owner_user_id;
     let spritesheet_persisted = persist_editor_generated_image(
@@ -1835,6 +2330,7 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
         "icon-spritesheets",
         "spritesheet",
         "spritesheet",
+        "vector-engine",
     )
     .await?;
     let spritesheet_image_src =
@@ -1859,67 +2355,11 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
             source_resource_id: None,
             asset_kind: Some("icon-spritesheet".to_string()),
             generation_inputs: generation_inputs.clone(),
+            thumbnail_src: None,
         },
     )
     .await?;
-    let mut icon_image_srcs = Vec::new();
-    for icon in icon_slices {
-        let icon_index = icon_image_srcs.len() + 1;
-        let icon_name = icon.name.clone();
-        let icon_width = icon.width;
-        let icon_height = icon.height;
-        let icon_image = DownloadedOpenAiImage {
-            bytes: icon.bytes,
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        };
-        let icon_file_stem = format!("icon-{icon_index:03}");
-        let icon_persisted = persist_editor_generated_image(
-            state,
-            owner_user_id.as_str(),
-            generated.task_id.as_str(),
-            &icon_image,
-            prompt.as_str(),
-            generated.actual_prompt.as_deref(),
-            EDITOR_ICON_IMAGE_ASSET_KIND,
-            "icons",
-            icon_file_stem.as_str(),
-            "icon",
-        )
-        .await?;
-        let icon_image_src = editor_media_src_from_object_key(icon_persisted.object_key.as_str());
-        let icon_record = persist_editor_generated_asset(
-            state,
-            PersistEditorGeneratedAssetInput {
-                project_id: payload.project_id.clone(),
-                owner_user_id: owner_user_id.clone(),
-                folder_id: payload.asset_folder_id.clone(),
-                label: icon_name.clone(),
-                image_src: icon_image_src.clone(),
-                object_key: Some(icon_persisted.object_key.clone()),
-                asset_object_id: Some(icon_persisted.asset_object_id.clone()),
-                width: icon_width,
-                height: icon_height,
-                prompt: prompt.clone(),
-                actual_prompt: generated.actual_prompt.clone(),
-                model: generation_options.model.to_string(),
-                provider: "VectorEngine".to_string(),
-                task_id: generated.task_id.clone(),
-                source_resource_id: None,
-                asset_kind: Some("icon".to_string()),
-                generation_inputs: generation_inputs.clone(),
-            },
-        )
-        .await?;
-        icon_image_srcs.push(EditorIconSpritesheetIconResponse {
-            name: icon_name,
-            image_src: icon_image_src,
-            width: icon_width,
-            height: icon_height,
-            resource: icon_record.resource,
-            asset: icon_record.asset,
-        });
-    }
+    let icon_image_srcs = Vec::new();
     let (canvas_items, primary_layer_id) =
         if let Some(completion) = payload.canvas_completion.as_ref() {
             build_icon_spritesheet_canvas_layer_items(
@@ -1969,11 +2409,13 @@ pub async fn extract_editor_ui_design_assets(
     let caller = EditorGenerationCaller::from_authenticated(&authenticated);
     if !state.config.external_generation_mode.is_inline() {
         let generation_options = normalize_editor_ui_design_asset_extraction_options(
+            payload.model.as_deref(),
             payload.aspect_ratio.as_str(),
             payload.image_size.as_str(),
         )?;
         let price_mud_points = u64::from(resolve_editor_ui_design_asset_extraction_price(
             &state,
+            Some(generation_options.model),
             Some(generation_options.image_size),
         )?);
         let source_entity_id = editor_generation_source_entity_id(
@@ -2007,20 +2449,44 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
     caller: EditorGenerationCaller,
     payload: EditorUiDesignAssetExtractionRequest,
 ) -> Result<Json<Value>, AppError> {
-    let reference_image =
-        parse_editor_reference_image(payload.source_image_src.as_str()).map_err(|error| {
-            error.with_details(json!({
-                "provider": "editor-ui-design-asset-extraction",
-                "field": "sourceImageSrc",
-                "message": "UI设计图必须是图片 Data URL。",
-            }))
-        })?;
+    let reference_image = parse_editor_reference_image(
+        state,
+        caller.owner_user_id.as_str(),
+        payload.source_image_src.as_str(),
+    )
+    .await
+    .map_err(|error| {
+        error.with_details(json!({
+            "provider": "editor-ui-design-asset-extraction",
+            "field": "sourceImageSrc",
+            "message": "UI设计图必须是图片 Data URL、objectKey、资源或素材引用。",
+        }))
+    })?;
+    let mut reference_images = vec![reference_image];
+    for source in normalize_editor_reference_image_sources(
+        payload.reference_image_srcs.as_deref(),
+        EDITOR_UI_DESIGN_ASSET_EXTRACTION_REFERENCE_LIMIT,
+    ) {
+        reference_images.push(
+            parse_editor_reference_image(state, caller.owner_user_id.as_str(), source)
+                .await
+                .map_err(|error| {
+                    error.with_details(json!({
+                        "provider": "editor-ui-design-asset-extraction",
+                        "field": "referenceImageSrcs",
+                        "message": "UI素材参考图必须是图片 Data URL、objectKey、资源或素材引用。",
+                    }))
+                })?,
+        );
+    }
     let generation_options = normalize_editor_ui_design_asset_extraction_options(
+        payload.model.as_deref(),
         payload.aspect_ratio.as_str(),
         payload.image_size.as_str(),
     )?;
     let expected_price_mud_points = resolve_editor_ui_design_asset_extraction_price(
         state,
+        Some(generation_options.model),
         Some(generation_options.image_size),
     )?;
     let settings = require_openai_image_settings(state)?.with_external_api_audit_context(
@@ -2032,23 +2498,42 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
             .or_else(|| payload.project_id.clone()),
     );
     let http_client = build_openai_image_http_client(&settings)?;
+    let prompt = editor_ui_design_asset_extraction_prompt();
     let generated = execute_billable_asset_operation_with_cost(
         state,
         caller.owner_user_id.as_str(),
         "editor_ui_design_asset_extraction",
         request_context.request_id(),
         u64::from(expected_price_mud_points),
-        create_openai_image_edit_with_references_and_model(
-            &http_client,
-            &settings,
-            GPT_IMAGE_2_MODEL,
-            EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT,
-            None,
-            generation_options.size.as_str(),
-            1,
-            &[reference_image],
-            "图片画布提取UI设计图素材 spritesheet",
-        ),
+        async {
+            if generation_options.model == EDITOR_IMAGE_MODEL_NANOBANANA2 {
+                create_openai_nanobanana_generate_content(
+                    &http_client,
+                    &settings,
+                    generation_options.model,
+                    prompt.as_str(),
+                    None,
+                    generation_options.aspect_ratio,
+                    generation_options.provider_image_size,
+                    reference_images.as_slice(),
+                    "图片画布提取UI设计图素材 spritesheet",
+                )
+                .await
+            } else {
+                create_openai_image_edit_with_references_and_model(
+                    &http_client,
+                    &settings,
+                    generation_options.model,
+                    prompt.as_str(),
+                    None,
+                    generation_options.size.as_str(),
+                    1,
+                    reference_images.as_slice(),
+                    "图片画布提取UI设计图素材 spritesheet",
+                )
+                .await
+            }
+        },
     )
     .await?;
     let image = generated.images.into_iter().next().ok_or_else(|| {
@@ -2057,6 +2542,18 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
             "message": "VectorEngine 未返回 UI 设计图素材 spritesheet",
         }))
     })?;
+    persist_editor_green_screen_source_image(
+        state,
+        caller.owner_user_id.as_str(),
+        generated.task_id.as_str(),
+        &image,
+        prompt.as_str(),
+        generated.actual_prompt.as_deref(),
+        "ui-design-spritesheets",
+        "spritesheet",
+    )
+    .await?;
+    let image = remove_editor_generated_green_screen_background(&image)?;
     let (spritesheet_width, spritesheet_height) = image::load_from_memory(image.bytes.as_slice())
         .map(|image| (image.width(), image.height()))
         .unwrap_or((512, 512));
@@ -2072,7 +2569,6 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
                 "message": error.to_string(),
             }))
         })?;
-    let prompt = EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT.to_string();
     let generation_inputs = payload.generation_inputs.clone();
     let owner_user_id = caller.owner_user_id;
     let spritesheet_persisted = persist_editor_generated_image(
@@ -2086,6 +2582,7 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
         "ui-design-spritesheets",
         "spritesheet",
         "spritesheet",
+        "vector-engine",
     )
     .await?;
     let spritesheet_image_src =
@@ -2105,12 +2602,13 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
             height: spritesheet_height,
             prompt: prompt.clone(),
             actual_prompt: generated.actual_prompt.clone(),
-            model: GPT_IMAGE_2_MODEL.to_string(),
+            model: generation_options.model.to_string(),
             provider: "VectorEngine".to_string(),
             task_id: generated.task_id.clone(),
             source_resource_id: None,
             asset_kind: Some("icon-spritesheet".to_string()),
             generation_inputs: generation_inputs.clone(),
+            thumbnail_src: None,
         },
     )
     .await?;
@@ -2137,6 +2635,7 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
             "ui-design-assets",
             icon_file_stem.as_str(),
             "asset",
+            "vector-engine",
         )
         .await?;
         let icon_image_src = editor_media_src_from_object_key(icon_persisted.object_key.as_str());
@@ -2154,12 +2653,13 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
                 height: icon_height,
                 prompt: prompt.clone(),
                 actual_prompt: generated.actual_prompt.clone(),
-                model: GPT_IMAGE_2_MODEL.to_string(),
+                model: generation_options.model.to_string(),
                 provider: "VectorEngine".to_string(),
                 task_id: generated.task_id.clone(),
                 source_resource_id: None,
                 asset_kind: Some("icon".to_string()),
                 generation_inputs: generation_inputs.clone(),
+                thumbnail_src: None,
             },
         )
         .await?;
@@ -2201,7 +2701,7 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
             icon_image_srcs,
             prompt,
             actual_prompt: generated.actual_prompt,
-            model: GPT_IMAGE_2_MODEL.to_string(),
+            model: generation_options.model.to_string(),
             provider: "VectorEngine",
             task_id: generated.task_id,
             price_mud_points: expected_price_mud_points,
@@ -2410,6 +2910,7 @@ async fn persist_editor_legacy_inline_image(
         path_kind,
         file_stem,
         "legacy-repair",
+        "vector-engine",
     )
     .await
 }
@@ -2482,6 +2983,8 @@ pub(crate) fn editor_project_resource_payload_from_record(
         resource_id: record.resource_id,
         project_id: record.project_id,
         owner_user_id: record.owner_user_id,
+        author_display_name: None,
+        author_public_user_code: None,
         image_src,
         object_key: record.object_key,
         asset_object_id: record.asset_object_id,
@@ -2504,6 +3007,38 @@ pub(crate) fn editor_project_resource_payload_from_record(
     }
 }
 
+fn editor_project_resource_public_payload_from_record(
+    state: &AppState,
+    record: EditorProjectResourceRecord,
+) -> EditorProjectResourcePayload {
+    let mut payload = editor_project_resource_payload_from_record(record);
+    let (display_name, public_user_code) =
+        resolve_editor_project_resource_public_author(state, payload.owner_user_id.as_str());
+    payload.author_display_name = display_name;
+    payload.author_public_user_code = public_user_code;
+    payload
+}
+
+fn resolve_editor_project_resource_public_author(
+    state: &AppState,
+    owner_user_id: &str,
+) -> (Option<String>, Option<String>) {
+    let Some(owner_user_id) = normalize_optional_string(Some(owner_user_id.to_string())) else {
+        return (None, Some(ORPHAN_WORK_AUTHOR_PUBLIC_USER_CODE.to_string()));
+    };
+    if owner_user_id == ORPHAN_WORK_OWNER_USER_ID {
+        return (None, Some(ORPHAN_WORK_AUTHOR_PUBLIC_USER_CODE.to_string()));
+    }
+
+    match state.auth_user_service().get_user_by_id(&owner_user_id) {
+        Ok(Some(user)) => (
+            normalize_optional_string(Some(user.display_name)),
+            normalize_optional_string(Some(user.public_user_code)),
+        ),
+        Ok(None) | Err(_) => (None, Some(ORPHAN_WORK_AUTHOR_PUBLIC_USER_CODE.to_string())),
+    }
+}
+
 pub(crate) fn editor_asset_library_payload_from_record(
     record: EditorAssetLibraryRecord,
 ) -> EditorAssetLibraryPayload {
@@ -2559,6 +3094,7 @@ pub(crate) fn editor_asset_payload_from_record(record: EditorAssetRecord) -> Edi
             .map(sanitize_editor_payload_inline_media),
         source_resource_id: record.source_resource_id,
         public_showcase_enabled: record.public_showcase_enabled,
+        thumbnail_src: normalize_optional_string(record.thumbnail_src),
         created_at: record.created_at,
         updated_at: record.updated_at,
     }
@@ -2681,7 +3217,7 @@ fn fill_missing_media_identity_field(
     }
 }
 
-async fn persist_editor_generated_asset(
+pub(crate) async fn persist_editor_generated_asset(
     state: &AppState,
     input: PersistEditorGeneratedAssetInput,
 ) -> Result<EditorGeneratedAssetRecord, AppError> {
@@ -2749,6 +3285,7 @@ async fn persist_editor_generated_asset(
                 generation_inputs_json,
                 source_resource_id: created_resource_id,
                 now_micros,
+                thumbnail_src: normalize_optional_string(input.thumbnail_src),
             })
             .await
             .map_err(map_editor_project_error)?;
@@ -2760,6 +3297,43 @@ async fn persist_editor_generated_asset(
     Ok(EditorGeneratedAssetRecord { resource, asset })
 }
 
+pub(crate) async fn persist_editor_generated_media_asset(
+    state: &AppState,
+    input: PersistEditorGeneratedAssetRequest,
+) -> Result<
+    (
+        Option<EditorProjectResourcePayload>,
+        Option<EditorAssetPayload>,
+    ),
+    AppError,
+> {
+    let persisted = persist_editor_generated_asset(
+        state,
+        PersistEditorGeneratedAssetInput {
+            project_id: input.project_id,
+            owner_user_id: input.owner_user_id,
+            folder_id: input.folder_id,
+            label: input.label,
+            image_src: input.image_src,
+            object_key: input.object_key,
+            asset_object_id: input.asset_object_id,
+            width: input.width,
+            height: input.height,
+            prompt: input.prompt,
+            actual_prompt: input.actual_prompt,
+            model: input.model,
+            provider: input.provider,
+            task_id: input.task_id,
+            source_resource_id: input.source_resource_id,
+            asset_kind: input.asset_kind,
+            generation_inputs: input.generation_inputs,
+            thumbnail_src: input.thumbnail_src,
+        },
+    )
+    .await?;
+    Ok((persisted.resource, persisted.asset))
+}
+
 pub(crate) async fn complete_editor_canvas_generation(
     state: &AppState,
     owner_user_id: &str,
@@ -2879,6 +3453,157 @@ pub(crate) async fn complete_editor_canvas_generation_with_items(
     Ok(Some(editor_project_payload_from_record(saved)))
 }
 
+pub(crate) async fn complete_editor_canvas_background_removal(
+    state: &AppState,
+    owner_user_id: &str,
+    project_id: Option<&str>,
+    target_layer_id: Option<&str>,
+    resource: Option<&EditorProjectResourcePayload>,
+) -> Result<Option<EditorProjectPayload>, AppError> {
+    let (Some(project_id), Some(target_layer_id), Some(resource)) =
+        (project_id, target_layer_id, resource)
+    else {
+        return Ok(None);
+    };
+    let project_id = project_id.trim();
+    let target_layer_id = target_layer_id.trim();
+    if project_id.is_empty() || target_layer_id.is_empty() {
+        return Ok(None);
+    }
+
+    let project = state
+        .spacetime_client()
+        .get_editor_project(EditorProjectGetRecordInput {
+            project_id: project_id.to_string(),
+            owner_user_id: owner_user_id.to_string(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+    let project = repair_editor_project_record_inline_media(state, project).await;
+    let viewport = project.viewport.clone();
+    let project_payload = editor_project_payload_from_record(project);
+    let Some(layers) = replace_editor_canvas_layer_with_resource(
+        project_payload.layers,
+        target_layer_id,
+        resource,
+    ) else {
+        return Ok(None);
+    };
+
+    let saved = state
+        .spacetime_client()
+        .save_editor_project_layout(EditorProjectLayoutSaveRecordInput {
+            project_id: project_id.to_string(),
+            owner_user_id: owner_user_id.to_string(),
+            viewport,
+            layers_json: serialize_editor_layers(layers)?,
+            updated_at_micros: current_utc_micros(),
+        })
+        .await
+        .map_err(map_editor_project_error)?;
+
+    Ok(Some(editor_project_payload_from_record(saved)))
+}
+
+fn replace_editor_canvas_layer_with_resource(
+    layers: Value,
+    target_layer_id: &str,
+    resource: &EditorProjectResourcePayload,
+) -> Option<Value> {
+    let mut items = match layers {
+        Value::Array(items) => items,
+        _ => return None,
+    };
+    let mut changed = false;
+    for item in &mut items {
+        let Some(object) = item.as_object_mut() else {
+            continue;
+        };
+        let is_target = object
+            .get("layerId")
+            .and_then(Value::as_str)
+            .is_some_and(|layer_id| layer_id == target_layer_id);
+        if !is_target {
+            continue;
+        }
+
+        object.insert(
+            "resourceId".to_string(),
+            Value::String(resource.resource_id.clone()),
+        );
+        object.insert("src".to_string(), Value::String(resource.image_src.clone()));
+        object.insert("width".to_string(), json!(resource.width.max(1)));
+        object.insert("height".to_string(), json!(resource.height.max(1)));
+        object.insert("originalWidth".to_string(), json!(resource.width.max(1)));
+        object.insert("originalHeight".to_string(), json!(resource.height.max(1)));
+        object.insert(
+            "sourceType".to_string(),
+            Value::String(resource.source_type.clone()),
+        );
+        object.insert("mediaType".to_string(), Value::String("image".to_string()));
+        set_optional_json_string_field(object, "prompt", resource.prompt.as_ref());
+        set_optional_json_string_field(object, "actualPrompt", resource.actual_prompt.as_ref());
+        set_optional_json_string_field(object, "model", resource.model.as_ref());
+        set_optional_json_string_field(object, "provider", resource.provider.as_ref());
+        set_optional_json_string_field(object, "taskId", resource.task_id.as_ref());
+        set_optional_json_string_field(object, "objectKey", resource.object_key.as_ref());
+        set_optional_json_string_field(object, "assetObjectId", resource.asset_object_id.as_ref());
+        set_optional_json_string_field(
+            object,
+            "sourceResourceId",
+            resource.source_resource_id.as_ref(),
+        );
+        set_optional_json_string_field(object, "assetKind", resource.asset_kind.as_ref());
+        set_optional_json_value_field(
+            object,
+            "generationInputs",
+            resource.generation_inputs.clone(),
+        );
+        object.remove("sourceAssetId");
+        object.remove("thumbnailSrc");
+        object.remove("imageSequenceFrames");
+        object.remove("previewVideoPath");
+        object.remove("durationSeconds");
+        changed = true;
+        break;
+    }
+    changed.then_some(Value::Array(items))
+}
+
+fn set_optional_json_string_field(
+    object: &mut serde_json::Map<String, Value>,
+    field: &str,
+    value: Option<&String>,
+) {
+    match value
+        .map(String::as_str)
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+    {
+        Some(value) => {
+            object.insert(field.to_string(), Value::String(value.to_string()));
+        }
+        None => {
+            object.remove(field);
+        }
+    }
+}
+
+fn set_optional_json_value_field(
+    object: &mut serde_json::Map<String, Value>,
+    field: &str,
+    value: Option<Value>,
+) {
+    match value {
+        Some(value) if !value.is_null() => {
+            object.insert(field.to_string(), value);
+        }
+        _ => {
+            object.remove(field);
+        }
+    }
+}
+
 fn translate_editor_canvas_generation_items(
     mut items: Vec<Value>,
     submitted_placeholder: &EditorCanvasGenerationPlaceholderPayload,
@@ -3472,6 +4197,7 @@ fn editor_ui_design_asset_extraction_bad_request(message: impl Into<String>) ->
 }
 
 fn normalize_editor_ui_design_asset_extraction_options(
+    model: Option<&str>,
     aspect_ratio: &str,
     image_size: &str,
 ) -> Result<EditorGenerationOptions, AppError> {
@@ -3489,8 +4215,12 @@ fn normalize_editor_ui_design_asset_extraction_options(
             ));
         }
     };
+    let model = model
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .unwrap_or(EDITOR_IMAGE_MODEL_NANOBANANA2);
     Ok(normalize_editor_generation_options(
-        Some(GPT_IMAGE_2_MODEL),
+        Some(model),
         Some("1:1"),
         Some(normalized_image_size),
     ))
@@ -3498,6 +4228,7 @@ fn normalize_editor_ui_design_asset_extraction_options(
 
 fn resolve_editor_ui_design_asset_extraction_price(
     state: &AppState,
+    model: Option<&str>,
     image_size: Option<&str>,
 ) -> Result<u32, AppError> {
     let expected_price_mud_points = state
@@ -3508,13 +4239,14 @@ fn resolve_editor_ui_design_asset_extraction_price(
                 "message": error.to_string(),
             }))
         })?
-        .image_generation_mud_points(Some("icon"), Some(GPT_IMAGE_2_MODEL), image_size);
+        .image_generation_mud_points(Some("icon"), model, image_size);
     Ok(expected_price_mud_points)
 }
 
 fn build_editor_icon_spritesheet_prompt(icon_descriptions: &[String]) -> String {
     format!(
-        "参考图1的图标素材规范，单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕背景方便扣除背景，禁止出现文字，保证每个图标素材的所有内容区域是完全连通的。按照以下的素材的顺序从上到下从左到右依次生成并整理成一张spritesheet：\n\n{}",
+        "参考图1的图标素材规范，{}；禁止出现文字，保证每个图标素材的所有内容区域是完全连通的。按照以下的素材的顺序从上到下从左到右依次生成并整理成一张spritesheet：\n\n{}",
+        editor_green_screen_asset_prompt_clause(),
         icon_descriptions.join("、")
     )
 }
@@ -3532,47 +4264,12 @@ fn build_editor_ui_design_prompt(user_input: &str, has_icon_spec_reference: bool
 
 fn build_editor_character_image_prompt(role_setting: &str) -> String {
     vec![
-        "按照角色描述生成游戏角色立绘。严格基于图1的角色美术视觉规范的美术风格、角色头身比、角色朝向等特征。画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，只作为抠像底色，禁止生成美术视觉规范，禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。".to_string(),
+        format!("按照角色描述生成游戏角色立绘。严格基于图1的角色美术视觉规范的美术风格、角色头身比、角色朝向等特征。画面中心构图，角色主体完整置于画面中央，禁止镜头透视，禁止特写。{}；禁止生成美术视觉规范，禁止出现建筑、室内布景、风景、地面道具、漂浮物、烟雾叙事元素、文字或其他角色以外的场景内容。", editor_green_screen_character_prompt_clause()),
         format!("角色设定：{}", role_setting.trim()),
     ]
     .join("\n")
 }
 
-fn prepare_editor_character_image_for_response(
-    image: DownloadedOpenAiImage,
-) -> DownloadedOpenAiImage {
-    let Ok(decoded) = image::load_from_memory(image.bytes.as_slice()) else {
-        return image;
-    };
-
-    let processed = apply_generated_asset_sheet_alpha_with_options(
-        decoded,
-        editor_general_cutout_alpha_options(),
-    );
-    let mut encoded = std::io::Cursor::new(Vec::new());
-    if processed
-        .write_to(&mut encoded, image::ImageFormat::Png)
-        .is_err()
-    {
-        return image;
-    }
-
-    DownloadedOpenAiImage {
-        bytes: encoded.into_inner(),
-        mime_type: "image/png".to_string(),
-        extension: "png".to_string(),
-    }
-}
-
-fn editor_general_cutout_alpha_options() -> GeneratedAssetSheetAlphaOptions {
-    GeneratedAssetSheetAlphaOptions {
-        remove_muted_green_screen_background: true,
-        detect_internal_holes: true,
-        internal_hole_min_pixels: 16,
-        ..GeneratedAssetSheetAlphaOptions::green_screen()
-    }
-}
-
 #[derive(Debug, Clone, PartialEq, Eq)]
 struct EditorGenerationOptions {
     model: &'static str,
@@ -3598,6 +4295,7 @@ pub(crate) async fn persist_editor_generated_image(
     path_kind: &str,
     file_stem: &str,
     slot: &str,
+    provider: &str,
 ) -> Result<PersistedEditorGeneratedImage, AppError> {
     let oss_client = state.oss_client().ok_or_else(|| {
         AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
@@ -3625,7 +4323,7 @@ pub(crate) async fn persist_editor_generated_image(
                 entity_kind: Some(EDITOR_CHARACTER_IMAGE_ENTITY_KIND.to_string()),
                 entity_id: Some(task_id.to_string()),
                 slot: Some(slot.to_string()),
-                provider: Some("vector-engine".to_string()),
+                provider: Some(provider.to_string()),
                 task_id: Some(task_id.to_string()),
             },
             extra_metadata: BTreeMap::from([(
@@ -3689,7 +4387,249 @@ pub(crate) async fn persist_editor_generated_image(
     })
 }
 
-pub(crate) fn parse_editor_reference_image(source: &str) -> Result<OpenAiReferenceImage, AppError> {
+async fn persist_editor_green_screen_source_image(
+    state: &AppState,
+    owner_user_id: &str,
+    task_id: &str,
+    image: &DownloadedOpenAiImage,
+    prompt: &str,
+    actual_prompt: Option<&str>,
+    path_kind: &str,
+    file_stem: &str,
+) -> Result<PersistedEditorGeneratedImage, AppError> {
+    persist_editor_generated_image(
+        state,
+        owner_user_id,
+        task_id,
+        image,
+        prompt,
+        actual_prompt,
+        EDITOR_GREEN_SCREEN_SOURCE_ASSET_KIND,
+        path_kind,
+        &format!("{file_stem}-green-screen-source"),
+        EDITOR_GREEN_SCREEN_SOURCE_SLOT,
+        "vector-engine",
+    )
+    .await
+}
+
+const EDITOR_REFERENCE_IMAGE_READ_EXPIRE_SECONDS: u64 = 300;
+const EDITOR_REFERENCE_IMAGE_MAX_SIZE_BYTES: u64 = 32 * 1024 * 1024;
+const EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES: usize = 32 * 1024 * 1024;
+const EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION: u32 = 8192;
+
+pub(crate) async fn parse_editor_reference_image(
+    state: &AppState,
+    owner_user_id: &str,
+    source: &str,
+) -> Result<OpenAiReferenceImage, AppError> {
+    let trimmed = source.trim();
+    if trimmed.starts_with("data:") {
+        return parse_editor_reference_image_data_url(trimmed);
+    }
+    let object_key = resolve_editor_reference_object_key(state, owner_user_id, trimmed).await?;
+    ensure_editor_reference_object_key_owned(state, owner_user_id, object_key.as_str()).await?;
+    read_editor_reference_image_object(state, object_key.as_str()).await
+}
+
+fn normalize_editor_reference_image_sources(sources: Option<&[String]>, limit: usize) -> Vec<&str> {
+    sources
+        .unwrap_or(&[])
+        .iter()
+        .map(String::as_str)
+        .map(str::trim)
+        .filter(|source| !source.is_empty())
+        .take(limit)
+        .collect()
+}
+
+fn normalize_editor_reference_object_key(source: &str) -> Result<String, AppError> {
+    let object_key = source.trim().trim_start_matches('/').to_string();
+    if object_key.is_empty() || LegacyAssetPrefix::from_object_key(object_key.as_str()).is_none() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-reference-image",
+                "field": "sourceImageSrc",
+                "message": "图片参考图必须是图片 Data URL、已登记的 generated objectKey、项目资源或素材引用。",
+            })),
+        );
+    }
+    Ok(object_key)
+}
+
+async fn resolve_editor_reference_object_key(
+    state: &AppState,
+    owner_user_id: &str,
+    source: &str,
+) -> Result<String, AppError> {
+    match normalize_editor_reference_object_key(source) {
+        Ok(object_key) => Ok(object_key),
+        Err(error) => {
+            find_editor_reference_object_key_by_registered_id(state, owner_user_id, source.trim())
+                .await?
+                .ok_or(error)
+        }
+    }
+}
+
+async fn find_editor_reference_object_key_by_registered_id(
+    state: &AppState,
+    owner_user_id: &str,
+    source: &str,
+) -> Result<Option<String>, AppError> {
+    if source.is_empty() {
+        return Ok(None);
+    }
+    let projects = state
+        .spacetime_client()
+        .list_editor_projects(owner_user_id.to_string())
+        .await
+        .map_err(map_editor_project_error)?;
+    if let Some(object_key) = projects
+        .iter()
+        .flat_map(|project| project.resources.iter())
+        .find_map(|resource| editor_reference_resource_object_key(resource, source))
+    {
+        return Ok(Some(object_key));
+    }
+    let library = state
+        .spacetime_client()
+        .get_editor_asset_library(owner_user_id.to_string(), current_utc_micros())
+        .await
+        .map_err(map_editor_project_error)?;
+    Ok(library
+        .assets
+        .iter()
+        .find_map(|asset| editor_reference_asset_object_key(asset, source)))
+}
+
+fn editor_reference_resource_object_key(
+    resource: &EditorProjectResourceRecord,
+    source: &str,
+) -> Option<String> {
+    (resource.resource_id.trim() == source)
+        .then(|| {
+            normalize_editor_record_object_key(
+                resource.object_key.as_deref(),
+                resource.image_src.as_str(),
+            )
+        })
+        .flatten()
+}
+
+fn editor_reference_asset_object_key(asset: &EditorAssetRecord, source: &str) -> Option<String> {
+    (asset.asset_id.trim() == source)
+        .then(|| {
+            normalize_editor_record_object_key(
+                asset.object_key.as_deref(),
+                asset.image_src.as_str(),
+            )
+        })
+        .flatten()
+}
+
+fn normalize_editor_record_object_key(object_key: Option<&str>, image_src: &str) -> Option<String> {
+    object_key
+        .map(str::trim)
+        .map(|value| value.trim_start_matches('/'))
+        .filter(|value| !value.is_empty())
+        .map(ToOwned::to_owned)
+        .or_else(|| normalize_editor_reference_object_key(image_src).ok())
+}
+
+async fn ensure_editor_reference_object_key_owned(
+    state: &AppState,
+    owner_user_id: &str,
+    object_key: &str,
+) -> Result<(), AppError> {
+    let owner_user_id = owner_user_id.trim();
+    if owner_user_id.is_empty() {
+        return Err(editor_reference_image_forbidden(object_key));
+    }
+    let projects = state
+        .spacetime_client()
+        .list_editor_projects(owner_user_id.to_string())
+        .await
+        .map_err(map_editor_project_error)?;
+    if projects.iter().any(|project| {
+        project.resources.iter().any(|resource| {
+            editor_record_object_key_matches(
+                resource.object_key.as_deref(),
+                resource.image_src.as_str(),
+                object_key,
+            )
+        })
+    }) {
+        return Ok(());
+    }
+    let library = state
+        .spacetime_client()
+        .get_editor_asset_library(owner_user_id.to_string(), current_utc_micros())
+        .await
+        .map_err(map_editor_project_error)?;
+    if library.assets.iter().any(|asset| {
+        editor_record_object_key_matches(
+            asset.object_key.as_deref(),
+            asset.image_src.as_str(),
+            object_key,
+        )
+    }) {
+        return Ok(());
+    }
+    if let Some(asset_object) = state
+        .spacetime_client()
+        .get_asset_object_by_object_key(object_key.to_string())
+        .await
+        .map_err(map_editor_project_error)?
+    {
+        validate_editor_reference_asset_object(&asset_object, owner_user_id, state, object_key)?;
+        return Ok(());
+    }
+    Err(editor_reference_image_forbidden(object_key))
+}
+
+fn validate_editor_reference_asset_object(
+    asset_object: &module_assets::AssetObjectRecord,
+    owner_user_id: &str,
+    state: &AppState,
+    object_key: &str,
+) -> Result<(), AppError> {
+    let Some(oss_client) = state.oss_client() else {
+        return Err(editor_reference_image_forbidden(object_key));
+    };
+    let owned = asset_object
+        .owner_user_id
+        .as_deref()
+        .map(str::trim)
+        .is_some_and(|value| value == owner_user_id);
+    let bucket_matches = asset_object.bucket.trim() == oss_client.config_bucket().trim();
+    let key_matches = asset_object.object_key.trim().trim_start_matches('/') == object_key;
+    if owned && bucket_matches && key_matches {
+        Ok(())
+    } else {
+        Err(editor_reference_image_forbidden(object_key))
+    }
+}
+
+fn editor_record_object_key_matches(
+    record_object_key: Option<&str>,
+    image_src: &str,
+    object_key: &str,
+) -> bool {
+    normalize_editor_record_object_key(record_object_key, image_src)
+        .is_some_and(|value| value == object_key)
+}
+
+fn editor_reference_image_forbidden(object_key: &str) -> AppError {
+    AppError::from_status(StatusCode::FORBIDDEN).with_details(json!({
+        "provider": "editor-reference-image",
+        "field": "sourceImageSrc",
+        "message": "图片参考图不属于当前账号。",
+        "objectKey": object_key,
+    }))
+}
+
+fn parse_editor_reference_image_data_url(source: &str) -> Result<OpenAiReferenceImage, AppError> {
     let Some((header, data)) = source.trim().split_once(',') else {
         return Err(
             AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
@@ -3741,6 +4681,134 @@ pub(crate) fn parse_editor_reference_image(source: &str) -> Result<OpenAiReferen
     })
 }
 
+async fn read_editor_reference_image_object(
+    state: &AppState,
+    source: &str,
+) -> Result<OpenAiReferenceImage, AppError> {
+    if source.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-reference-image",
+                "field": "sourceImageSrc",
+                "message": "图片参考图不能为空。",
+            })),
+        );
+    }
+    let oss_client = state.oss_client().ok_or_else(|| {
+        AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+            "provider": "aliyun-oss",
+            "reason": "OSS 未完成环境变量配置",
+        }))
+    })?;
+    let signed = oss_client
+        .sign_get_object_url(OssSignedGetObjectUrlRequest {
+            object_key: source.to_string(),
+            expire_seconds: Some(EDITOR_REFERENCE_IMAGE_READ_EXPIRE_SECONDS),
+        })
+        .map_err(|error| map_oss_error(error, "aliyun-oss"))?;
+    let response = reqwest::Client::new()
+        .get(signed.signed_url.as_str())
+        .send()
+        .await
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "aliyun-oss",
+                "message": format!("读取图片参考图失败：{error}"),
+            }))
+        })?;
+    let status = response.status();
+    if !status.is_success() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "aliyun-oss",
+                "message": format!("读取图片参考图返回非成功状态：{}", status.as_u16()),
+                "objectKey": signed.object_key,
+            })),
+        );
+    }
+    if response
+        .content_length()
+        .is_some_and(|size| size > EDITOR_REFERENCE_IMAGE_MAX_SIZE_BYTES)
+    {
+        return Err(editor_reference_image_too_large());
+    }
+    let content_type_mime = response
+        .headers()
+        .get(reqwest::header::CONTENT_TYPE)
+        .and_then(|value| value.to_str().ok())
+        .and_then(normalize_editor_reference_image_mime_type)
+        .map(ToOwned::to_owned);
+    let bytes = response.bytes().await.map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "aliyun-oss",
+            "message": format!("读取图片参考图内容失败：{error}"),
+        }))
+    })?;
+    if bytes.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-reference-image",
+                "field": "sourceImageSrc",
+                "message": "图片参考图为空。",
+            })),
+        );
+    }
+    if bytes.len() as u64 > EDITOR_REFERENCE_IMAGE_MAX_SIZE_BYTES {
+        return Err(editor_reference_image_too_large());
+    }
+    let mime_type = content_type_mime
+        .or_else(|| infer_editor_reference_image_mime_type(bytes.as_ref()).map(ToOwned::to_owned))
+        .ok_or_else(|| {
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "editor-reference-image",
+                "field": "sourceImageSrc",
+                "message": "图片参考图 objectKey 指向的资源不是图片。",
+                "objectKey": signed.object_key,
+            }))
+        })?
+        .to_string();
+    let extension = editor_reference_image_extension(mime_type.as_str());
+    Ok(OpenAiReferenceImage {
+        bytes: bytes.to_vec(),
+        mime_type,
+        file_name: format!("editor-reference.{extension}"),
+    })
+}
+
+fn normalize_editor_reference_image_mime_type(content_type: &str) -> Option<&str> {
+    let mime_type = content_type.split(';').next()?.trim();
+    mime_type.starts_with("image/").then_some(mime_type)
+}
+
+fn infer_editor_reference_image_mime_type(bytes: &[u8]) -> Option<&'static str> {
+    if bytes.starts_with(b"\x89PNG\r\n\x1a\n") {
+        return Some("image/png");
+    }
+    if bytes.starts_with(&[0xff, 0xd8, 0xff]) {
+        return Some("image/jpeg");
+    }
+    if bytes.len() >= 12 && bytes.starts_with(b"RIFF") && &bytes[8..12] == b"WEBP" {
+        return Some("image/webp");
+    }
+    None
+}
+
+fn editor_reference_image_extension(mime_type: &str) -> &'static str {
+    match mime_type {
+        "image/jpeg" => "jpg",
+        "image/png" => "png",
+        "image/webp" => "webp",
+        _ => "png",
+    }
+}
+
+fn editor_reference_image_too_large() -> AppError {
+    AppError::from_status(StatusCode::PAYLOAD_TOO_LARGE).with_details(json!({
+        "provider": "editor-reference-image",
+        "message": "图片参考图不能超过 32MB。",
+    }))
+}
+
 pub(crate) fn map_editor_project_error(error: SpacetimeClientError) -> AppError {
     match error {
         SpacetimeClientError::Procedure(message) if message.contains("无权") => {
@@ -3884,12 +4952,91 @@ mod tests {
         assert_eq!(value["ownerUserId"], json!("user-author-1"));
     }
 
+    #[test]
+    fn editor_project_resource_public_payload_uses_display_author_fields() {
+        let state = AppState::new(AppConfig::default()).expect("state should build");
+        state
+            .auth_user_service()
+            .ensure_orphan_work_owner_user("user-author-1", "author-1", "作者昵称", "SY-00000042")
+            .expect("author should be inserted");
+
+        let payload = editor_project_resource_public_payload_from_record(
+            &state,
+            EditorProjectResourceRecord {
+                resource_id: "resource-1".to_string(),
+                project_id: "project-1".to_string(),
+                owner_user_id: "user-author-1".to_string(),
+                asset_object_id: None,
+                image_src: "/generated-character-drafts/editor/spec.png".to_string(),
+                object_key: None,
+                width: 512,
+                height: 512,
+                source_type: "generated".to_string(),
+                prompt: None,
+                actual_prompt: None,
+                model: None,
+                provider: None,
+                task_id: None,
+                source_resource_id: None,
+                asset_kind: None,
+                generation_inputs: None,
+                public_showcase_enabled: true,
+                created_at: "2026-06-23T00:00:00.000Z".to_string(),
+                updated_at: "2026-06-23T00:00:00.000Z".to_string(),
+            },
+        );
+
+        let value = serde_json::to_value(payload).expect("payload should serialize");
+
+        assert_eq!(value["ownerUserId"], json!("user-author-1"));
+        assert_eq!(value["authorDisplayName"], json!("作者昵称"));
+        assert_eq!(value["authorPublicUserCode"], json!("SY-00000042"));
+    }
+
+    #[test]
+    fn editor_project_resource_public_payload_falls_back_to_public_user_code() {
+        let state = AppState::new(AppConfig::default()).expect("state should build");
+        let payload = editor_project_resource_public_payload_from_record(
+            &state,
+            EditorProjectResourceRecord {
+                resource_id: "resource-1".to_string(),
+                project_id: "project-1".to_string(),
+                owner_user_id: "missing-user".to_string(),
+                asset_object_id: None,
+                image_src: "/generated-character-drafts/editor/spec.png".to_string(),
+                object_key: None,
+                width: 512,
+                height: 512,
+                source_type: "generated".to_string(),
+                prompt: None,
+                actual_prompt: None,
+                model: None,
+                provider: None,
+                task_id: None,
+                source_resource_id: None,
+                asset_kind: None,
+                generation_inputs: None,
+                public_showcase_enabled: true,
+                created_at: "2026-06-23T00:00:00.000Z".to_string(),
+                updated_at: "2026-06-23T00:00:00.000Z".to_string(),
+            },
+        );
+
+        let value = serde_json::to_value(payload).expect("payload should serialize");
+
+        assert_eq!(value["ownerUserId"], json!("missing-user"));
+        assert!(value.get("authorDisplayName").is_none());
+        assert_eq!(value["authorPublicUserCode"], json!("SY-00000000"));
+    }
+
     #[test]
     fn editor_payload_media_sanitizer_replaces_inline_layer_src_from_resource() {
         let resources = vec![EditorProjectResourcePayload {
             resource_id: "resource-1".to_string(),
             project_id: "project-1".to_string(),
             owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
             image_src: "/generated-character-drafts/editor/spec.png".to_string(),
             object_key: Some("generated-character-drafts/editor/spec.png".to_string()),
             asset_object_id: Some("asset-object-1".to_string()),
@@ -3962,6 +5109,8 @@ mod tests {
             resource_id: "resource-spec".to_string(),
             project_id: "project-1".to_string(),
             owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
             image_src: "/generated-character-drafts/editor/spec.png".to_string(),
             object_key: Some("generated-character-drafts/editor/spec.png".to_string()),
             asset_object_id: Some("asset-object-spec".to_string()),
@@ -4030,6 +5179,8 @@ mod tests {
             resource_id: "editor-resource-character".to_string(),
             project_id: "editor-project-1".to_string(),
             owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
             image_src: "/generated-character-drafts/editor/character.png".to_string(),
             object_key: Some("generated-character-drafts/editor/character.png".to_string()),
             asset_object_id: Some("asset-object-character".to_string()),
@@ -4174,6 +5325,25 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_image_edit_price_uses_selected_model_and_size() {
+        let state = AppState::new(AppConfig::default()).expect("state should build");
+
+        assert_eq!(
+            resolve_editor_image_edit_price(&state, GPT_IMAGE_2_MODEL, "1024x1024").unwrap(),
+            3
+        );
+        assert_eq!(
+            resolve_editor_image_edit_price(&state, GPT_IMAGE_2_MODEL, "2048x1152").unwrap(),
+            5
+        );
+        assert_eq!(
+            resolve_editor_image_edit_price(&state, EDITOR_IMAGE_MODEL_NANOBANANA2, "2048x2048")
+                .unwrap(),
+            24
+        );
+    }
+
     #[test]
     fn editor_generation_dimensions_follow_model_options() {
         let default_generation = normalize_editor_generation_options(None, Some("1:1"), Some("1K"));
@@ -4302,146 +5472,15 @@ mod tests {
     fn editor_character_image_prompt_appends_user_role_setting() {
         let prompt = build_editor_character_image_prompt("菜市场卖菜大妈");
 
-        assert!(prompt.contains("基于图1的角色美术视觉规范指导"));
-        assert!(prompt.contains("生成游戏角色形象图"));
+        assert!(prompt.contains("严格基于图1的角色美术视觉规范"));
+        assert!(prompt.contains("生成游戏角色立绘"));
         assert!(prompt.contains("背景固定为单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕"));
+        assert!(prompt.contains("绿幕背景必须平整无纹理、无渐变、无阴影"));
+        assert!(prompt.contains("角色主体不得带绿色描边、绿色投影或绿色反光"));
         assert!(prompt.contains("禁止镜头透视"));
         assert!(prompt.contains("角色设定：菜市场卖菜大妈"));
     }
 
-    #[test]
-    fn editor_character_image_uses_general_cutout_for_green_screen_background() {
-        let width = 12;
-        let height = 12;
-        let mut image = image::RgbaImage::from_pixel(width, height, image::Rgba([0, 255, 0, 255]));
-        for y in 4..8 {
-            for x in 4..8 {
-                image.put_pixel(x, y, image::Rgba([188, 82, 45, 255]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgba8(image)
-            .write_to(&mut encoded, image::ImageFormat::Png)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(processed.mime_type, "image/png");
-        assert_eq!(processed.extension, "png");
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(5, 5).0[3], 255);
-    }
-
-    #[test]
-    fn editor_character_image_general_cutout_removes_muted_green_background() {
-        let width = 20;
-        let height = 20;
-        let mut image =
-            image::RgbaImage::from_pixel(width, height, image::Rgba([59, 131, 67, 255]));
-        for x in 0..width {
-            image.put_pixel(x, 0, image::Rgba([59, 81, 67, 255]));
-            image.put_pixel(x, height - 1, image::Rgba([63, 84, 70, 255]));
-        }
-        for y in 0..height {
-            image.put_pixel(0, y, image::Rgba([59, 81, 67, 255]));
-            image.put_pixel(width - 1, y, image::Rgba([63, 84, 70, 255]));
-        }
-        for y in 7..13 {
-            for x in 7..13 {
-                image.put_pixel(x, y, image::Rgba([188, 82, 45, 255]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgba8(image)
-            .write_to(&mut encoded, image::ImageFormat::Png)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(4, 4).0[3], 0);
-        assert_eq!(decoded.get_pixel(10, 10).0[3], 255);
-    }
-
-    #[test]
-    fn editor_character_image_general_cutout_converts_non_png_to_transparent_png() {
-        let width = 12;
-        let height = 12;
-        let mut image =
-            image::RgbImage::from_pixel(width, height, image::Rgb([0_u8, 255_u8, 0_u8]));
-        for y in 4..8 {
-            for x in 4..8 {
-                image.put_pixel(x, y, image::Rgb([188, 82, 45]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgb8(image)
-            .write_to(&mut encoded, image::ImageFormat::Jpeg)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/jpeg".to_string(),
-            extension: "jpg".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(processed.mime_type, "image/png");
-        assert_eq!(processed.extension, "png");
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(5, 5).0[3], 255);
-    }
-
-    #[test]
-    fn editor_character_image_general_cutout_removes_internal_green_holes() {
-        let width = 16;
-        let height = 16;
-        let mut image = image::RgbaImage::from_pixel(width, height, image::Rgba([0, 255, 0, 255]));
-        for y in 3..13 {
-            for x in 3..13 {
-                image.put_pixel(x, y, image::Rgba([188, 82, 45, 255]));
-            }
-        }
-        for y in 6..10 {
-            for x in 6..10 {
-                image.put_pixel(x, y, image::Rgba([0, 255, 0, 255]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgba8(image)
-            .write_to(&mut encoded, image::ImageFormat::Png)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(7, 7).0[3], 0);
-        assert_eq!(decoded.get_pixel(4, 4).0[3], 255);
-    }
-
     #[test]
     fn editor_canvas_generation_completion_inserts_result_layer_and_marks_dialog_idle() {
         let layers = json!([
@@ -4488,6 +5527,8 @@ mod tests {
             resource_id: "editor-resource-character".to_string(),
             project_id: "editor-project-1".to_string(),
             owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
             image_src: "data:image/png;base64,character".to_string(),
             object_key: Some("generated-character-drafts/editor/character.png".to_string()),
             asset_object_id: Some("asset-object-1".to_string()),
@@ -4552,6 +5593,87 @@ mod tests {
         assert!(dialog.get("errorMessage").is_none());
     }
 
+    #[test]
+    fn editor_canvas_background_removal_replaces_target_layer_resource() {
+        let layers = json!([
+            {
+                "layerId": "layer-source",
+                "resourceId": "resource-source",
+                "title": "源图",
+                "x": 120,
+                "y": 140,
+                "width": 320,
+                "height": 240,
+                "originalWidth": 1024,
+                "originalHeight": 768,
+                "zIndex": 6,
+                "locked": true,
+                "sourceAssetId": "asset-old",
+                "thumbnailSrc": "/old-thumb.png"
+            },
+            {
+                "layerId": "layer-other",
+                "resourceId": "resource-other"
+            }
+        ]);
+        let resource = EditorProjectResourcePayload {
+            resource_id: "editor-resource-cutout".to_string(),
+            project_id: "editor-project-1".to_string(),
+            owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
+            image_src: "/generated-character-drafts/editor/background-removal/result.png"
+                .to_string(),
+            object_key: Some(
+                "generated-character-drafts/editor/background-removal/result.png".to_string(),
+            ),
+            asset_object_id: Some("asset-object-cutout".to_string()),
+            width: 512,
+            height: 768,
+            source_type: "generated".to_string(),
+            prompt: Some("remove background".to_string()),
+            actual_prompt: None,
+            model: Some("BiRefNet".to_string()),
+            provider: Some("BiRefNet".to_string()),
+            task_id: Some("extgen-cutout".to_string()),
+            source_resource_id: Some("resource-source".to_string()),
+            asset_kind: Some("character".to_string()),
+            generation_inputs: Some(json!({
+                "fields": [{"title": "prompt", "value": "角色"}],
+                "references": []
+            })),
+            public_showcase_enabled: true,
+            created_at: "2026-06-29T00:00:00.000Z".to_string(),
+            updated_at: "2026-06-29T00:00:00.000Z".to_string(),
+        };
+
+        let replaced = replace_editor_canvas_layer_with_resource(layers, "layer-source", &resource)
+            .expect("target layer should be replaced");
+        let items = replaced.as_array().expect("layers should stay array");
+        let layer = items
+            .iter()
+            .find(|item| item["layerId"] == "layer-source")
+            .expect("source layer should remain");
+
+        assert_eq!(items.len(), 2);
+        assert_eq!(layer["resourceId"], json!("editor-resource-cutout"));
+        assert_eq!(
+            layer["src"],
+            json!("/generated-character-drafts/editor/background-removal/result.png")
+        );
+        assert_eq!(layer["width"], json!(512));
+        assert_eq!(layer["height"], json!(768));
+        assert_eq!(layer["x"], json!(120));
+        assert_eq!(layer["y"], json!(140));
+        assert_eq!(layer["zIndex"], json!(6));
+        assert_eq!(layer["locked"], json!(true));
+        assert_eq!(layer["taskId"], json!("extgen-cutout"));
+        assert_eq!(layer["sourceResourceId"], json!("resource-source"));
+        assert_eq!(layer["assetKind"], json!("character"));
+        assert!(layer.get("sourceAssetId").is_none());
+        assert!(layer.get("thumbnailSrc").is_none());
+    }
+
     #[test]
     fn editor_canvas_generation_completion_is_idempotent_for_existing_resource_layer() {
         let layers = json!([
@@ -4589,6 +5711,8 @@ mod tests {
             resource_id: "editor-resource-character".to_string(),
             project_id: "editor-project-1".to_string(),
             owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
             image_src: "data:image/png;base64,character".to_string(),
             object_key: None,
             asset_object_id: None,
@@ -4671,6 +5795,8 @@ mod tests {
             resource_id: "editor-resource-character".to_string(),
             project_id: "editor-project-1".to_string(),
             owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
             image_src: "data:image/png;base64,character".to_string(),
             object_key: None,
             asset_object_id: None,
@@ -4794,6 +5920,8 @@ mod tests {
             resource_id: "editor-resource-character".to_string(),
             project_id: "editor-project-1".to_string(),
             owner_user_id: "user-1".to_string(),
+            author_display_name: None,
+            author_public_user_code: None,
             image_src: "data:image/png;base64,character".to_string(),
             object_key: None,
             asset_object_id: None,
@@ -4839,15 +5967,17 @@ mod tests {
         let prompt = build_editor_icon_spritesheet_prompt(&descriptions);
 
         assert!(prompt.contains("参考图1的图标素材规范"));
-        assert!(prompt.contains("单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕背景方便扣除背景"));
+        assert!(prompt.contains("背景必须是单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕"));
+        assert!(prompt.contains("平整无纹理、无渐变、无阴影"));
+        assert!(prompt.contains("素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光"));
         assert!(prompt.contains("返回按钮、设置按钮、下一关按钮"));
     }
 
     #[test]
     fn editor_ui_design_asset_extraction_prompt_is_fixed() {
         assert_eq!(
-            EDITOR_UI_DESIGN_ASSET_EXTRACTION_PROMPT,
-            "仅提取被红色框框选的素材并整理成spritesheet"
+            editor_ui_design_asset_extraction_prompt(),
+            "仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。"
         );
     }
 
@@ -4867,6 +5997,191 @@ mod tests {
         assert!(normalize_icon_descriptions(too_many).is_err());
     }
 
+    #[test]
+    fn editor_reference_image_data_url_stays_compatible() {
+        let parsed = parse_editor_reference_image_data_url("data:image/png;base64,AAAA")
+            .expect("legacy data URL reference should still parse");
+
+        assert_eq!(parsed.mime_type, "image/png");
+        assert_eq!(parsed.file_name, "editor-reference.png");
+        assert_eq!(parsed.bytes, vec![0, 0, 0]);
+    }
+
+    #[test]
+    fn editor_reference_resource_id_resolves_registered_object_key() {
+        let resource = EditorProjectResourceRecord {
+            resource_id: "editor-resource-icon-spec".to_string(),
+            project_id: "project-1".to_string(),
+            owner_user_id: "user-1".to_string(),
+            asset_object_id: Some("asset-object-1".to_string()),
+            image_src: "/generated-character-drafts/editor/spec.png".to_string(),
+            object_key: None,
+            width: 512,
+            height: 512,
+            source_type: "generated".to_string(),
+            prompt: None,
+            actual_prompt: None,
+            model: None,
+            provider: None,
+            task_id: None,
+            source_resource_id: None,
+            asset_kind: Some("icon-spec".to_string()),
+            generation_inputs: None,
+            public_showcase_enabled: true,
+            created_at: "2026-06-23T00:00:00.000Z".to_string(),
+            updated_at: "2026-06-23T00:00:00.000Z".to_string(),
+        };
+
+        assert_eq!(
+            editor_reference_resource_object_key(&resource, "editor-resource-icon-spec"),
+            Some("generated-character-drafts/editor/spec.png".to_string())
+        );
+        assert_eq!(
+            editor_reference_resource_object_key(&resource, "missing"),
+            None
+        );
+    }
+
+    #[test]
+    fn editor_reference_asset_id_resolves_registered_object_key() {
+        let asset = EditorAssetRecord {
+            asset_id: "editor-asset-icon-spec".to_string(),
+            folder_id: "project".to_string(),
+            label: "图标规范".to_string(),
+            asset_object_id: Some("asset-object-1".to_string()),
+            image_src: "/generated-character-drafts/editor/spec.png".to_string(),
+            thumbnail_src: None,
+            object_key: None,
+            width: 512,
+            height: 512,
+            source_type: "generated".to_string(),
+            prompt: None,
+            actual_prompt: None,
+            model: None,
+            provider: None,
+            task_id: None,
+            asset_kind: Some("icon-spec".to_string()),
+            generation_inputs: None,
+            source_resource_id: None,
+            public_showcase_enabled: Some(true),
+            created_at: "2026-06-23T00:00:00.000Z".to_string(),
+            updated_at: "2026-06-23T00:00:00.000Z".to_string(),
+        };
+
+        assert_eq!(
+            editor_reference_asset_object_key(&asset, "editor-asset-icon-spec"),
+            Some("generated-character-drafts/editor/spec.png".to_string())
+        );
+        assert_eq!(editor_reference_asset_object_key(&asset, "missing"), None);
+    }
+
+    #[test]
+    fn editor_reference_image_sources_are_trimmed_and_limited() {
+        let sources = vec![
+            " generated-character-drafts/editor/a.png ".to_string(),
+            "".to_string(),
+            "generated-character-drafts/editor/b.png".to_string(),
+            "generated-character-drafts/editor/c.png".to_string(),
+        ];
+
+        assert_eq!(
+            normalize_editor_reference_image_sources(Some(sources.as_slice()), 2),
+            vec![
+                "generated-character-drafts/editor/a.png",
+                "generated-character-drafts/editor/b.png"
+            ]
+        );
+    }
+
+    #[test]
+    fn editor_reference_object_key_requires_generated_prefix() {
+        assert_eq!(
+            normalize_editor_reference_object_key("/generated-character-drafts/editor/ref.png")
+                .unwrap(),
+            "generated-character-drafts/editor/ref.png"
+        );
+        assert!(normalize_editor_reference_object_key("/private/editor/ref.png").is_err());
+    }
+
+    #[test]
+    fn editor_reference_object_key_matches_registered_media() {
+        assert!(editor_record_object_key_matches(
+            Some("/generated-character-drafts/editor/ref.png"),
+            "",
+            "generated-character-drafts/editor/ref.png",
+        ));
+        assert!(!editor_record_object_key_matches(
+            Some("generated-character-drafts/editor/other.png"),
+            "",
+            "generated-character-drafts/editor/ref.png",
+        ));
+    }
+
+    #[test]
+    fn editor_reference_asset_object_requires_matching_owner_bucket_and_key() {
+        let state = AppState::new(AppConfig {
+            oss_bucket: Some("genarrative-assets".to_string()),
+            oss_endpoint: Some("oss-cn-beijing.aliyuncs.com".to_string()),
+            oss_access_key_id: Some("test-ak".to_string()),
+            oss_access_key_secret: Some("test-sk".to_string()),
+            ..AppConfig::default()
+        })
+        .expect("state should build");
+        let asset_object = module_assets::AssetObjectRecord {
+            asset_object_id: "assetobj_reference_1".to_string(),
+            bucket: "genarrative-assets".to_string(),
+            object_key: "generated-character-drafts/editor/ref.png".to_string(),
+            access_policy: module_assets::AssetObjectAccessPolicy::Private,
+            content_type: Some("image/png".to_string()),
+            content_length: 1024,
+            content_hash: None,
+            version: 1,
+            source_job_id: None,
+            owner_user_id: Some("user-1".to_string()),
+            profile_id: None,
+            entity_id: None,
+            asset_kind: "editor_generated_image".to_string(),
+            created_at: "2026-06-27T00:00:00Z".to_string(),
+            updated_at: "2026-06-27T00:00:00Z".to_string(),
+        };
+
+        assert!(
+            validate_editor_reference_asset_object(
+                &asset_object,
+                "user-1",
+                &state,
+                "generated-character-drafts/editor/ref.png",
+            )
+            .is_ok()
+        );
+        assert!(
+            validate_editor_reference_asset_object(
+                &asset_object,
+                "user-2",
+                &state,
+                "generated-character-drafts/editor/ref.png",
+            )
+            .is_err()
+        );
+    }
+
+    #[test]
+    fn editor_reference_image_mime_type_falls_back_to_magic_bytes() {
+        assert_eq!(
+            infer_editor_reference_image_mime_type(b"\x89PNG\r\n\x1a\nrest"),
+            Some("image/png")
+        );
+        assert_eq!(
+            infer_editor_reference_image_mime_type(&[0xff, 0xd8, 0xff, 0xe0]),
+            Some("image/jpeg")
+        );
+        assert_eq!(
+            infer_editor_reference_image_mime_type(b"RIFFxxxxWEBPrest"),
+            Some("image/webp")
+        );
+        assert_eq!(infer_editor_reference_image_mime_type(b"not image"), None);
+    }
+
     #[test]
     fn editor_icon_spritesheet_price_is_resolved_from_generation_config() {
         let state = AppState::new(AppConfig::default()).expect("state should build");
@@ -4887,14 +6202,7 @@ mod tests {
             spritesheet_image_src: "data:image/png;base64,sheet".to_string(),
             spritesheet_width: 512,
             spritesheet_height: 512,
-            icon_image_srcs: vec![EditorIconSpritesheetIconResponse {
-                name: "返回按钮".to_string(),
-                image_src: "data:image/png;base64,back".to_string(),
-                width: 128,
-                height: 128,
-                resource: None,
-                asset: None,
-            }],
+            icon_image_srcs: Vec::new(),
             prompt: "图标 prompt".to_string(),
             actual_prompt: Some("图标 prompt".to_string()),
             model: "gemini-3.1-flash-image-preview".to_string(),
@@ -4912,18 +6220,21 @@ mod tests {
         let payload = serde_json::to_value(response).expect("response should serialize");
 
         assert_eq!(payload["priceMudPoints"], json!(12));
+        assert_eq!(payload["iconImageSrcs"], json!([]));
     }
 
     #[test]
-    fn editor_ui_design_asset_extraction_price_uses_selected_gpt_image_size() {
+    fn editor_ui_design_asset_extraction_price_uses_selected_model_and_size() {
         let state = AppState::new(AppConfig::default()).expect("state should build");
         let request: EditorUiDesignAssetExtractionRequest = serde_json::from_value(json!({
             "sourceImageSrc": "data:image/png;base64,AAAA",
+            "model": "gpt-image-2",
             "aspectRatio": "1:1",
             "imageSize": "2K"
         }))
         .expect("UI extraction request should deserialize dimensions");
         let generation_options = normalize_editor_ui_design_asset_extraction_options(
+            request.model.as_deref(),
             request.aspect_ratio.as_str(),
             request.image_size.as_str(),
         )
@@ -4934,20 +6245,40 @@ mod tests {
         assert_eq!(
             resolve_editor_ui_design_asset_extraction_price(
                 &state,
+                Some(generation_options.model),
                 Some(generation_options.image_size)
             )
             .unwrap(),
             5
         );
-        let ratio_error = match normalize_editor_ui_design_asset_extraction_options("16:9", "2K") {
-            Ok(_) => panic!("UI extraction ratio should stay square"),
-            Err(error) => error,
-        };
+        let default_generation =
+            normalize_editor_ui_design_asset_extraction_options(None, "1:1", "1K")
+                .expect("default UI extraction options should pass");
+        assert_eq!(default_generation.model, EDITOR_IMAGE_MODEL_NANOBANANA2);
+        let blank_model_generation =
+            normalize_editor_ui_design_asset_extraction_options(Some("  "), "1:1", "1K")
+                .expect("blank UI extraction model should use default");
+        assert_eq!(blank_model_generation.model, EDITOR_IMAGE_MODEL_NANOBANANA2);
+        assert_eq!(
+            resolve_editor_ui_design_asset_extraction_price(
+                &state,
+                Some(default_generation.model),
+                Some(default_generation.image_size),
+            )
+            .unwrap(),
+            12
+        );
+        let ratio_error =
+            match normalize_editor_ui_design_asset_extraction_options(None, "16:9", "2K") {
+                Ok(_) => panic!("UI extraction ratio should stay square"),
+                Err(error) => error,
+            };
         assert!(ratio_error.body_text().contains("aspectRatio"));
-        let size_error = match normalize_editor_ui_design_asset_extraction_options("1:1", "0.5K") {
-            Ok(_) => panic!("UI extraction size should be 1K or 2K"),
-            Err(error) => error,
-        };
+        let size_error =
+            match normalize_editor_ui_design_asset_extraction_options(None, "1:1", "0.5K") {
+                Ok(_) => panic!("UI extraction size should be 1K or 2K"),
+                Err(error) => error,
+            };
         assert!(size_error.body_text().contains("imageSize"));
     }
 
@@ -4968,11 +6299,35 @@ mod tests {
     fn editor_image_edit_request_omits_price_mud_points() {
         let request: EditorImageEditRequest = serde_json::from_value(json!({
             "prompt": "修改图片",
-            "sourceImageSrc": "data:image/png;base64,AAAA"
+            "sourceImageSrc": "data:image/png;base64,AAAA",
+            "size": "2048x1152",
+            "model": "gpt-image-2",
+            "referenceImageSrcs": ["data:image/png;base64,BBBB"]
         }))
         .expect("image edit request should deserialize without price");
 
         assert_eq!(request.prompt, "修改图片");
+        assert_eq!(request.size.as_deref(), Some("2048x1152"));
+        assert_eq!(request.model.as_deref(), Some("gpt-image-2"));
+        assert_eq!(
+            request.reference_image_srcs,
+            Some(vec!["data:image/png;base64,BBBB".to_string()])
+        );
+    }
+
+    #[test]
+    fn editor_icon_spritesheet_request_accepts_extra_references() {
+        let request: EditorIconSpritesheetGenerationRequest = serde_json::from_value(json!({
+            "referenceImageSrc": "data:image/png;base64,spec",
+            "referenceImageSrcs": ["data:image/png;base64,style"],
+            "iconDescriptions": ["返回按钮"]
+        }))
+        .expect("icon spritesheet request should deserialize references");
+
+        assert_eq!(
+            request.reference_image_srcs,
+            Some(vec!["data:image/png;base64,style".to_string()])
+        );
     }
 
     #[test]
@@ -5016,6 +6371,109 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_canvas_green_screen_generation_uses_local_postprocess() {
+        let source = include_str!("editor_project.rs");
+        assert_function_contains(
+            source,
+            "pub(crate) async fn generate_editor_image_for_owner",
+            "fn normalize_editor_image_generation_size",
+            &[
+                "persist_editor_green_screen_source_image",
+                "remove_editor_generated_green_screen_background",
+                "if is_character_generation",
+            ],
+        );
+        assert_function_contains_in_order(
+            source,
+            "pub(crate) async fn generate_editor_image_for_owner",
+            "fn normalize_editor_image_generation_size",
+            &[
+                "persist_editor_green_screen_source_image",
+                "remove_editor_generated_green_screen_background",
+            ],
+        );
+        assert_function_contains(
+            source,
+            "pub(crate) async fn generate_editor_icon_spritesheet_for_owner",
+            "pub async fn extract_editor_ui_design_assets",
+            &[
+                "persist_editor_green_screen_source_image",
+                "remove_editor_generated_green_screen_background",
+            ],
+        );
+        assert_function_contains_in_order(
+            source,
+            "pub(crate) async fn generate_editor_icon_spritesheet_for_owner",
+            "pub async fn extract_editor_ui_design_assets",
+            &[
+                "persist_editor_green_screen_source_image",
+                "remove_editor_generated_green_screen_background",
+            ],
+        );
+        assert_function_contains(
+            source,
+            "pub(crate) async fn extract_editor_ui_design_assets_for_owner",
+            "pub(crate) fn editor_project_payload_from_record",
+            &[
+                "persist_editor_green_screen_source_image",
+                "remove_editor_generated_green_screen_background",
+                "slice_generated_icon_spritesheet_all_by_connected_components",
+            ],
+        );
+        assert_function_contains_in_order(
+            source,
+            "pub(crate) async fn extract_editor_ui_design_assets_for_owner",
+            "pub(crate) fn editor_project_payload_from_record",
+            &[
+                "persist_editor_green_screen_source_image",
+                "remove_editor_generated_green_screen_background",
+            ],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn generate_editor_image_for_owner",
+            "fn normalize_editor_image_generation_size",
+            &["try_remove_editor_downloaded_image_background"],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn generate_editor_icon_spritesheet_for_owner",
+            "pub async fn extract_editor_ui_design_assets",
+            &["try_remove_editor_downloaded_image_background"],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn extract_editor_ui_design_assets_for_owner",
+            "pub(crate) fn editor_project_payload_from_record",
+            &["try_remove_editor_downloaded_image_background"],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn generate_editor_image_for_owner",
+            "fn normalize_editor_image_generation_size",
+            &[
+                concat!("prepare_editor_", "character_image_for_response"),
+                "Err(_)",
+            ],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn generate_editor_icon_spritesheet_for_owner",
+            "pub async fn extract_editor_ui_design_assets",
+            &[
+                concat!("prepare_editor_", "icon_spritesheet_image_for_persist"),
+                "Err(_)",
+            ],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn extract_editor_ui_design_assets_for_owner",
+            "pub(crate) fn editor_project_payload_from_record",
+            &["Err(_) => image"],
+        );
+    }
+
     #[test]
     fn generated_asset_folder_id_normalizes_project_and_legacy_local_folder() {
         assert_eq!(
@@ -5056,4 +6514,41 @@ mod tests {
             );
         }
     }
+
+    fn assert_function_contains_in_order(source: &str, start: &str, end: &str, snippets: &[&str]) {
+        let start_index = source
+            .find(start)
+            .unwrap_or_else(|| panic!("missing function start marker: {start}"));
+        let tail = &source[start_index..];
+        let end_index = tail
+            .find(end)
+            .unwrap_or_else(|| panic!("missing function end marker: {end}"));
+        let body = &tail[..end_index];
+        let mut cursor = 0;
+        for snippet in snippets {
+            let next = body[cursor..].find(snippet).unwrap_or_else(|| {
+                panic!(
+                    "function body starting with {start} should contain {snippet} after offset {cursor}"
+                )
+            });
+            cursor += next + snippet.len();
+        }
+    }
+
+    fn assert_function_not_contains(source: &str, start: &str, end: &str, snippets: &[&str]) {
+        let start_index = source
+            .find(start)
+            .unwrap_or_else(|| panic!("missing function start marker: {start}"));
+        let tail = &source[start_index..];
+        let end_index = tail
+            .find(end)
+            .unwrap_or_else(|| panic!("missing function end marker: {end}"));
+        let body = &tail[..end_index];
+        for snippet in snippets {
+            assert!(
+                !body.contains(snippet),
+                "function body starting with {start} should not contain {snippet}"
+            );
+        }
+    }
 }
diff --git a/server-rs/crates/api-server/src/external_editor_api.rs b/server-rs/crates/api-server/src/external_editor_api.rs
index 84c8f97f2..4994dffea 100644
--- a/server-rs/crates/api-server/src/external_editor_api.rs
+++ b/server-rs/crates/api-server/src/external_editor_api.rs
@@ -492,6 +492,7 @@ pub async fn create_external_editor_asset(
             generation_inputs_json,
             source_resource_id: None,
             now_micros: current_utc_micros(),
+            thumbnail_src: None,
         })
         .await
         .map_err(map_editor_project_error)?;
@@ -883,6 +884,10 @@ mod tests {
             ui_extraction_schema["properties"]["imageSize"]["enum"],
             json!(["1K", "2K"])
         );
+        assert_eq!(
+            ui_extraction_schema["properties"]["model"]["default"],
+            "gemini-3.1-flash-image-preview"
+        );
         assert!(
             ui_extraction_schema["properties"]
                 .get("priceMudPoints")
diff --git a/server-rs/crates/api-server/src/external_generation.rs b/server-rs/crates/api-server/src/external_generation.rs
index 2ae45190d..0757cbc5a 100644
--- a/server-rs/crates/api-server/src/external_generation.rs
+++ b/server-rs/crates/api-server/src/external_generation.rs
@@ -5,7 +5,7 @@ use axum::{
     response::Response,
 };
 use serde::Deserialize;
-use serde_json::json;
+use serde_json::{Value, json};
 use shared_contracts::external_generation::{
     ExternalGenerationJobStatus, ExternalGenerationJobStatusRecord,
     ExternalGenerationJobStatusResponse, ExternalGenerationQueueOverview,
@@ -31,6 +31,7 @@ const EXTERNAL_GENERATION_PROVIDER: &str = "external_generation";
 pub struct ExternalGenerationTaskListQuery {
     limit: Option<u32>,
     include_acknowledged_terminal: Option<bool>,
+    statuses: Option<String>,
 }
 
 pub async fn get_external_generation_queue_overview(
@@ -45,6 +46,7 @@ pub async fn get_external_generation_queue_overview(
             owner_user_id,
             limit: 1,
             include_acknowledged_terminal: false,
+            statuses: Vec::new(),
         })
         .await
         .map_err(|error| external_generation_error_response(&request_context, error))?;
@@ -64,26 +66,33 @@ pub async fn list_external_generation_tasks(
     Query(query): Query<ExternalGenerationTaskListQuery>,
 ) -> Result<Json<serde_json::Value>, Response> {
     let owner_user_id = authenticated.claims().user_id().to_string();
+    let requested_limit = query.limit.unwrap_or(50).clamp(1, 100);
+    let status_filter = parse_external_generation_status_filter(query.statuses.as_deref());
+    let statuses = external_generation_status_filter_input(&status_filter);
     let list = state
         .spacetime_client()
         .list_external_generation_jobs(ExternalGenerationJobListRecordInput {
             owner_user_id,
-            limit: query.limit.unwrap_or(50).clamp(1, 100),
+            limit: requested_limit,
             include_acknowledged_terminal: query.include_acknowledged_terminal.unwrap_or(false),
+            statuses,
         })
         .await
         .map_err(|error| external_generation_error_response(&request_context, error))?;
+    let overview = map_external_generation_queue_overview(&list);
+    let mut tasks: Vec<_> = list
+        .jobs
+        .into_iter()
+        .map(map_external_generation_task_record)
+        .filter(|task| {
+            status_filter.is_empty() || status_filter.iter().any(|status| status == &task.status)
+        })
+        .collect();
+    tasks.truncate(requested_limit as usize);
 
     Ok(json_success_body(
         Some(&request_context),
-        ExternalGenerationTaskListResponse {
-            overview: map_external_generation_queue_overview(&list),
-            tasks: list
-                .jobs
-                .into_iter()
-                .map(map_external_generation_task_record)
-                .collect(),
-        },
+        ExternalGenerationTaskListResponse { overview, tasks },
     ))
 }
 
@@ -176,12 +185,14 @@ fn map_external_generation_task_record(
     job: ExternalGenerationJobRecord,
 ) -> ExternalGenerationTaskRecord {
     let status_record = map_external_generation_job_status(job.clone());
+    let request_prompt = extract_external_generation_request_prompt(&job.request_payload_json);
     ExternalGenerationTaskRecord {
         job_id: job.job_id,
         job_kind: job.job_kind,
         source_module: job.source_module,
         source_entity_id: job.source_entity_id,
         request_label: job.request_label,
+        request_prompt,
         status: status_record.status,
         phase_label: status_record.phase_label,
         phase_detail: status_record.phase_detail,
@@ -198,6 +209,90 @@ fn map_external_generation_task_record(
     }
 }
 
+fn extract_external_generation_request_prompt(request_payload_json: &str) -> Option<String> {
+    let payload: Value = serde_json::from_str(request_payload_json).ok()?;
+    for key in ["prompt", "promptText", "spritesheetLabel"] {
+        if let Some(prompt) = payload
+            .get(key)
+            .and_then(Value::as_str)
+            .and_then(normalize_external_generation_prompt_text)
+        {
+            return Some(prompt);
+        }
+    }
+    if let Some(prompt) = payload
+        .get("iconDescriptions")
+        .and_then(Value::as_array)
+        .map(|items| {
+            items
+                .iter()
+                .filter_map(Value::as_str)
+                .filter_map(normalize_external_generation_prompt_text)
+                .collect::<Vec<_>>()
+                .join("、")
+        })
+        .and_then(|value| normalize_external_generation_prompt_text(&value))
+    {
+        return Some(prompt);
+    }
+    payload
+        .get("generationInputs")
+        .and_then(|value| value.get("fields"))
+        .and_then(Value::as_array)
+        .and_then(|fields| {
+            fields.iter().find_map(|field| {
+                let title = field.get("title").and_then(Value::as_str)?.trim();
+                if !matches!(title, "prompt" | "gpt_description_prompt") {
+                    return None;
+                }
+                field
+                    .get("value")
+                    .and_then(Value::as_str)
+                    .and_then(normalize_external_generation_prompt_text)
+            })
+        })
+}
+
+fn normalize_external_generation_prompt_text(value: &str) -> Option<String> {
+    let trimmed = value.trim();
+    if trimmed.is_empty() {
+        None
+    } else {
+        Some(trimmed.to_string())
+    }
+}
+
+fn parse_external_generation_status_filter(
+    statuses: Option<&str>,
+) -> Vec<ExternalGenerationJobStatus> {
+    statuses
+        .unwrap_or_default()
+        .split(',')
+        .filter_map(|status| match status.trim() {
+            "queued" => Some(ExternalGenerationJobStatus::Queued),
+            "running" => Some(ExternalGenerationJobStatus::Running),
+            "completed" => Some(ExternalGenerationJobStatus::Completed),
+            "failed" => Some(ExternalGenerationJobStatus::Failed),
+            _ => None,
+        })
+        .collect()
+}
+
+fn external_generation_status_filter_input(
+    statuses: &[ExternalGenerationJobStatus],
+) -> Vec<String> {
+    statuses
+        .iter()
+        .map(|status| match status {
+            ExternalGenerationJobStatus::Queued => "queued",
+            ExternalGenerationJobStatus::Running => "running",
+            ExternalGenerationJobStatus::Completed => "completed",
+            ExternalGenerationJobStatus::Failed => "failed",
+        })
+        .map(str::to_string)
+        .collect()
+}
+
 fn current_utc_micros() -> i64 {
     shared_kernel::offset_datetime_to_unix_micros(time::OffsetDateTime::now_utc())
 }
@@ -213,3 +308,37 @@ fn external_generation_error_response(
         }))
         .into_response_with_context(Some(request_context))
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn parses_external_generation_status_filter() {
+        assert_eq!(
+            parse_external_generation_status_filter(Some("running,queued,unknown")),
+            vec![
+                ExternalGenerationJobStatus::Running,
+                ExternalGenerationJobStatus::Queued
+            ]
+        );
+    }
+
+    #[test]
+    fn extracts_external_generation_request_prompt_from_payload() {
+        assert_eq!(
+            extract_external_generation_request_prompt(
+                r#"{"prompt":"  发光主视觉  ","sourceImageSrc":"data:image/png;base64,secret"}"#,
+            )
+            .as_deref(),
+            Some("发光主视觉"),
+        );
+        assert_eq!(
+            extract_external_generation_request_prompt(
+                r#"{"iconDescriptions":["返回按钮"," 设置按钮 "],"referenceImageSrc":"data:image/png;base64,secret"}"#,
+            )
+            .as_deref(),
+            Some("返回按钮、设置按钮"),
+        );
+    }
+}
diff --git a/server-rs/crates/api-server/src/external_generation_worker.rs b/server-rs/crates/api-server/src/external_generation_worker.rs
index a84440158..e775e637d 100644
--- a/server-rs/crates/api-server/src/external_generation_worker.rs
+++ b/server-rs/crates/api-server/src/external_generation_worker.rs
@@ -20,17 +20,19 @@ use crate::{
         generate_editor_character_animation_for_owner, generate_editor_video_for_owner,
     },
     editor_generation_queue::{
-        EDITOR_BACKGROUND_MUSIC_GENERATION_JOB_KIND,
+        EDITOR_BACKGROUND_MUSIC_GENERATION_JOB_KIND, EDITOR_BACKGROUND_REMOVAL_JOB_KIND,
         EDITOR_CHARACTER_ANIMATION_GENERATION_JOB_KIND,
         EDITOR_ICON_SPRITESHEET_GENERATION_JOB_KIND, EDITOR_IMAGE_EDIT_JOB_KIND,
         EDITOR_IMAGE_GENERATION_JOB_KIND, EDITOR_SOUND_EFFECT_GENERATION_JOB_KIND,
         EDITOR_UI_DESIGN_ASSET_EXTRACTION_JOB_KIND, EDITOR_VIDEO_GENERATION_JOB_KIND,
     },
     editor_project::{
-        EditorGenerationCaller, EditorIconSpritesheetGenerationRequest, EditorImageEditRequest,
+        EditorBackgroundRemovalRequest, EditorGenerationCaller,
+        EditorIconSpritesheetGenerationRequest, EditorImageEditRequest,
         EditorImageGenerationRequest, EditorUiDesignAssetExtractionRequest,
         edit_editor_image_for_owner, extract_editor_ui_design_assets_for_owner,
         generate_editor_icon_spritesheet_for_owner, generate_editor_image_for_owner,
+        remove_editor_image_background_for_owner,
     },
     jump_hop::{
         JUMP_HOP_COMPILE_DRAFT_JOB_KIND, JumpHopCompileDraftWorkerPayload,
@@ -615,6 +617,35 @@ async fn process_external_generation_job_once(
                 }
             }
         }
+        EDITOR_BACKGROUND_REMOVAL_JOB_KIND => {
+            let mut payload = match serde_json::from_str::<EditorBackgroundRemovalRequest>(
+                job.request_payload_json.as_str(),
+            ) {
+                Ok(payload) => payload,
+                Err(error) => {
+                    let message = format!("图片画布去除背景任务参数解析失败：{error}");
+                    fail_job(&state, &worker_id, &job, message.clone()).await?;
+                    return Err(message);
+                }
+            };
+            payload.task_id.get_or_insert_with(|| job.job_id.clone());
+            let request_context = worker_request_context(&job);
+            match remove_editor_image_background_for_owner(
+                &state,
+                &request_context,
+                editor_generation_worker_caller(&job),
+                payload,
+            )
+            .await
+            {
+                Ok(_) => complete_editor_generation_job(&state, &worker_id, &job).await,
+                Err(error) => {
+                    let message = error.body_text();
+                    fail_job(&state, &worker_id, &job, message.clone()).await?;
+                    Err(message)
+                }
+            }
+        }
         EDITOR_ICON_SPRITESHEET_GENERATION_JOB_KIND => {
             let payload = match serde_json::from_str::<EditorIconSpritesheetGenerationRequest>(
                 job.request_payload_json.as_str(),
@@ -818,18 +849,32 @@ async fn response_error_message(response: axum::response::Response) -> String {
         return format!("外部生成任务失败：{status}");
     }
     if let Ok(body_json) = serde_json::from_str::<serde_json::Value>(&body_text)
-        && let Some(message) = body_json
-            .get("error")
-            .and_then(|error| error.get("message"))
-            .and_then(serde_json::Value::as_str)
-            .map(str::trim)
-            .filter(|message| !message.is_empty())
+        && let Some(message) = extract_api_error_display_message(&body_json)
     {
-        return message.to_string();
+        return message;
     }
     body_text
 }
 
+fn extract_api_error_display_message(body_json: &serde_json::Value) -> Option<String> {
+    let error = body_json.get("error")?;
+    error
+        .get("details")
+        .and_then(|details| {
+            read_trimmed_json_string(details.get("reason"))
+                .or_else(|| read_trimmed_json_string(details.get("message")))
+        })
+        .or_else(|| read_trimmed_json_string(error.get("message")))
+}
+
+fn read_trimmed_json_string(value: Option<&serde_json::Value>) -> Option<String> {
+    value
+        .and_then(serde_json::Value::as_str)
+        .map(str::trim)
+        .filter(|message| !message.is_empty())
+        .map(ToOwned::to_owned)
+}
+
 async fn fail_queue_job_after_worker_error(
     state: &AppState,
     worker_id: &str,
@@ -1009,6 +1054,34 @@ mod tests {
         assert!(error.contains("缺少 lease token"));
     }
 
+    #[tokio::test]
+    async fn worker_response_error_message_prefers_api_error_details() {
+        let response = axum::http::Response::builder()
+            .status(axum::http::StatusCode::BAD_GATEWAY)
+            .body(axum::body::Body::from(
+                json!({
+                    "ok": false,
+                    "data": null,
+                    "error": {
+                        "code": "UPSTREAM_ERROR",
+                        "message": "上游服务请求失败",
+                        "details": {
+                            "provider": "vector-engine",
+                            "reason": "VECTOR_ENGINE_API_KEY 未配置",
+                            "message": "提交编辑器音效任务失败：missing field sound"
+                        }
+                    },
+                    "meta": {}
+                })
+                .to_string(),
+            ))
+            .expect("response should build");
+
+        let message = response_error_message(response).await;
+
+        assert_eq!(message, "VECTOR_ENGINE_API_KEY 未配置");
+    }
+
     fn external_generation_job_record_fixture(
         lease_token: Option<&str>,
     ) -> ExternalGenerationJobRecord {
diff --git a/server-rs/crates/api-server/src/jump_hop.rs b/server-rs/crates/api-server/src/jump_hop.rs
index 411ceae29..7a2ed06f2 100644
--- a/server-rs/crates/api-server/src/jump_hop.rs
+++ b/server-rs/crates/api-server/src/jump_hop.rs
@@ -58,20 +58,21 @@ const JUMP_HOP_TILE_ITEM_COUNT: usize = 18;
 pub(crate) const JUMP_HOP_COMPILE_DRAFT_JOB_KIND: &str = "jump_hop_compile_draft";
 
 const JUMP_HOP_PROVIDER: &str = "jump-hop";
-const JUMP_HOP_CREATION_PROVIDER: &str = "jump-hop-creation";
+pub(crate) const JUMP_HOP_CREATION_PROVIDER: &str = "jump-hop-creation";
 const JUMP_HOP_RUNTIME_PROVIDER: &str = "jump-hop-runtime";
 const JUMP_HOP_TEMPLATE_ID: &str = "jump-hop";
 const JUMP_HOP_TEMPLATE_NAME: &str = "跳一跳";
 const JUMP_HOP_RUNTIME_RUNS_ROUTE: &str = "/api/runtime/jump-hop/runs";
-const JUMP_HOP_TILE_ATLAS_ROWS: u32 = 6;
-const JUMP_HOP_TILE_ATLAS_COLS: u32 = 3;
-const JUMP_HOP_TILE_UV_FACE_ROWS: u32 = 3;
-const JUMP_HOP_TILE_UV_FACE_COLS: u32 = 4;
-const JUMP_HOP_TILE_ATLAS_KEY_HEX: &str = "#FF00FF";
-const JUMP_HOP_TILE_ATLAS_IMAGE_SIZE: &str = "1024*1536";
-const JUMP_HOP_TILE_ATLAS_IMAGE_WIDTH: u32 = 1024;
-const JUMP_HOP_TILE_ATLAS_IMAGE_HEIGHT: u32 = 1536;
-const JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE: u32 = 256;
+#[allow(dead_code)]
+pub(crate) const JUMP_HOP_TILE_ATLAS_ROWS: u32 = 6;
+pub(crate) const JUMP_HOP_TILE_ATLAS_COLS: u32 = 3;
+pub(crate) const JUMP_HOP_TILE_UV_FACE_ROWS: u32 = 3;
+pub(crate) const JUMP_HOP_TILE_UV_FACE_COLS: u32 = 4;
+pub(crate) const JUMP_HOP_TILE_ATLAS_KEY_HEX: &str = "#FF00FF";
+pub(crate) const JUMP_HOP_TILE_ATLAS_IMAGE_SIZE: &str = "1024*1536";
+pub(crate) const JUMP_HOP_TILE_ATLAS_IMAGE_WIDTH: u32 = 1024;
+pub(crate) const JUMP_HOP_TILE_ATLAS_IMAGE_HEIGHT: u32 = 1536;
+pub(crate) const JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE: u32 = 256;
 const JUMP_HOP_BACKGROUND_IMAGE_SIZE: &str = "1024*1536";
 const JUMP_HOP_BACKGROUND_IMAGE_WIDTH: u32 = 1024;
 const JUMP_HOP_BACKGROUND_IMAGE_HEIGHT: u32 = 1536;
@@ -88,27 +89,27 @@ pub(crate) struct JumpHopCompileDraftWorkerPayload {
 }
 
 #[derive(Clone, Debug, PartialEq, Eq)]
-struct JumpHopTileAtlasSlice {
-    tile_type: JumpHopTileType,
-    source_atlas_cell: String,
-    faces: JumpHopTileFaceSlices,
+pub(crate) struct JumpHopTileAtlasSlice {
+    pub(crate) tile_type: JumpHopTileType,
+    pub(crate) source_atlas_cell: String,
+    pub(crate) faces: JumpHopTileFaceSlices,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq)]
-struct JumpHopTileFaceSlice {
-    face: JumpHopTileFaceKey,
-    source_atlas_cell: String,
-    bytes: Vec<u8>,
+pub(crate) struct JumpHopTileFaceSlice {
+    pub(crate) face: JumpHopTileFaceKey,
+    pub(crate) source_atlas_cell: String,
+    pub(crate) bytes: Vec<u8>,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq)]
-struct JumpHopTileFaceSlices {
-    top: JumpHopTileFaceSlice,
-    front: JumpHopTileFaceSlice,
-    right: JumpHopTileFaceSlice,
-    back: JumpHopTileFaceSlice,
-    left: JumpHopTileFaceSlice,
-    bottom: JumpHopTileFaceSlice,
+pub(crate) struct JumpHopTileFaceSlices {
+    pub(crate) top: JumpHopTileFaceSlice,
+    pub(crate) front: JumpHopTileFaceSlice,
+    pub(crate) right: JumpHopTileFaceSlice,
+    pub(crate) back: JumpHopTileFaceSlice,
+    pub(crate) left: JumpHopTileFaceSlice,
+    pub(crate) bottom: JumpHopTileFaceSlice,
 }
 
 pub async fn create_jump_hop_session(
@@ -900,7 +901,21 @@ async fn maybe_generate_jump_hop_assets(
                 })),
             )
         })?;
-        let tile_slices = slice_jump_hop_tile_atlas(&tile_image).map_err(|error| {
+        // 去除 AI 生图中可能混入主体区域或边缘的洋红(#FF00FF)背景，避免污染后续切片与贴图。
+        let tile_image = prepare_jump_hop_magenta_screen_image_for_slicing(
+            tile_image,
+            "跳一跳地板贴图图集洋红去背失败",
+        )
+        .map_err(|error| {
+            jump_hop_error_response(request_context, JUMP_HOP_CREATION_PROVIDER, error)
+        })?;
+        let tile_slices = crate::jump_hop_atlas_slicing::slice_tile_atlas_adaptive(
+            &tile_image,
+            crate::jump_hop_atlas_slicing::DEFAULT_TILE_ROWS,
+            crate::jump_hop_atlas_slicing::DEFAULT_TILE_COLS,
+            crate::jump_hop_atlas_slicing::AtlasSliceAlgorithm::default(),
+        )
+        .map_err(|error| {
             jump_hop_error_response(request_context, JUMP_HOP_CREATION_PROVIDER, error)
         })?;
         let tile_atlas_asset = persist_jump_hop_generated_image_asset(
@@ -982,6 +997,40 @@ fn prepare_jump_hop_green_screen_image_for_persist(
     })
 }
 
+/// 在图集切片之前，用 BFS 漫水 + 软 matte 扩展 + 去彩边算法去除洋红(#FF00FF)背景。
+/// 算法与绿幕去背共享同一套 `remove_generated_asset_sheet_green_screen_background` 核心，
+/// 通过 `jump_hop_magenta_screen()` 预设切换 key 色为洋红，并启用内部镂空洞检测。
+fn prepare_jump_hop_magenta_screen_image_for_slicing(
+    image: crate::openai_image_generation::DownloadedOpenAiImage,
+    failure_label: &str,
+) -> Result<crate::openai_image_generation::DownloadedOpenAiImage, AppError> {
+    let source = image::load_from_memory(image.bytes.as_slice()).map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": JUMP_HOP_CREATION_PROVIDER,
+            "message": format!("{failure_label}解码失败：{error}"),
+        }))
+    })?;
+    let processed = crate::generated_asset_sheets::apply_generated_asset_sheet_alpha_with_options(
+        source,
+        crate::generated_asset_sheets::GeneratedAssetSheetAlphaOptions::jump_hop_magenta_screen(),
+    );
+    let mut encoded = std::io::Cursor::new(Vec::new());
+    processed
+        .write_to(&mut encoded, image::ImageFormat::Png)
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": JUMP_HOP_CREATION_PROVIDER,
+                "message": format!("{failure_label}洋红去背编码失败：{error}"),
+            }))
+        })?;
+
+    Ok(crate::openai_image_generation::DownloadedOpenAiImage {
+        bytes: encoded.into_inner(),
+        mime_type: "image/png".to_string(),
+        extension: "png".to_string(),
+    })
+}
+
 fn normalize_jump_hop_generation_theme_text(theme_text: &str) -> String {
     let theme_text = theme_text.trim();
     if theme_text.is_empty() {
@@ -1056,13 +1105,48 @@ fn build_jump_hop_tile_atlas_prompt(theme_text: &str, tile_prompt: &str) -> Stri
         sanitized_tile_prompt.as_str()
     };
 
+    // 旧版 prompt（保留供参考）
+    // format!(
+    //     "生成一张1024x1536竖版图片，主题为"{theme_text}"。\n画面只包含18个用于跳一跳地板的立方体主题物体 UV 展开包装图，按三列六行均匀排布；每个大单元格代表一个完整的 1x1x1 立方体方块物体，运行态会把该单元内的六张面贴图精确贴到 Three.js 标准极小倒角立方体的六个面上。\n画面内容是{subject_text}。这是一张 cube object UV unwrap atlas / 立方体主题物体六面展开图集，不是单纯平铺材质、不是抽象纹理、不是只把主题颜色铺满，也不是已经渲染好的 3D 方块成品、游戏界面或图标集页面。\n每个大单元格内部必须使用固定 4列x3行 UV 展开结构，只有以下六个位置有贴图，其它位置保持纯洋红安全色：第1行第2列是 top；第2行第1列是 left；第2行第2列是 front；第2行第3列是 right；第2行第4列是 back；第3行第2列是 bottom。不要改变顺序，不要旋转面，不要把六个面画成一张连续透视图。\n每个方块都必须表现为"一个完整主题物体被塑造成 1x1x1 立方体后的六面包装"，六个面要属于同一个物体并能组合成完整方块造型；top/front/right/back/left/bottom 之间的颜色、边缘纹理、切面、果皮、籽点、条纹、果柄和叶片必须连续一致，不能六面各画互不相关的图案，也不能把同一张纹理重复六次。\n水果主题要生成18种可一眼辨认的方块水果 UV：方块苹果、方块香蕉、方块橙子、方块西瓜、方块草莓、方块葡萄、方块奇异果、方块菠萝、方块柠檬、方块桃子、方块梨、方块蓝莓、方块芒果、方块椰子、方块火龙果、方块樱桃、方块哈密瓜、方块石榴等；苹果需要果柄叶片跨 top/front，香蕉需要剥皮条带跨 front/right，橙子需要放射切面跨 top/front，西瓜需要红瓤黑籽和绿皮条纹在各面连续。不要只画重复果皮纹理、随机斑点、叶脉纹理或抽象材质。\n每个面都是满版不透明正方形贴图 / full-bleed opaque square face texture：四角、边缘和中心都要有可识别内容，不留透明、不留空白、不留实底背景；允许大面积水果切面、果柄叶片、剥皮条带、籽点、条纹和轮廓图案作为包装身份锚点，但不要把一个小水果、小叶片、小石头或小物体放在面中央，也不要画小贴纸、小图标、徽章或孤立主体。\n这不是透视渲染图：不要画摄像机视角、透视块、已烘焙侧壁、已烘焙厚度、自身投影、接触阴影或高光光斑；真实透视、倒角、侧壁和阴影会由运行态 Three.js 统一生成。每个面贴图在运行态会以约45度下压视角和较小尺寸显示，所以必须使用大色块、高对比、粗线条和简单图形，保证在64x64缩略图里仍能分辨主题物体身份。\n排布必须安全：18个大单元格之间应留有纯洋红 {JUMP_HOP_TILE_ATLAS_KEY_HEX} 填充的区域作为自然间距，相邻单元格的面贴图不得互相紧贴或交叠；大单元之间、UV 空位、六面之间和画布最外圈只能使用单一纯洋红 {JUMP_HOP_TILE_ATLAS_KEY_HEX} 大面积填充，作为切图安全色。洋红区域以块状面视觉呈现，不要画网格线、描边、边框、单元格编号、face label 或裁切标记。\n贴图内部可以使用绿色、白色、雪地、云朵、草地、花朵、果肉粉色和浅黄色等主题颜色，但不得使用接近 {JUMP_HOP_TILE_ATLAS_KEY_HEX} 的纯洋红色；贴图边缘不得有洋红描边、紫色底边、粉色脏边、彩色光晕或发光边。\n禁止文字、Logo、水印、UI按钮、标题、角标、装饰边框、face label、top/front/right/back/left/bottom文字、背包、装备栏、菜单、角色、完整场景、自然圆形水果、自然长条香蕉、非方块化完整水果、孤立水果照片、小型果切贴纸、小型橙片贴纸、小贴纸图标、小物体居中、纯果皮材质、纯果肉纹理、纯叶脉纹理、纯颜色块、透明背景、留白、3D平台、圆台、底座、托盘、物体摆在平台上、透视地块、正面30度物体图、鸟瞰地图块、落地投影、接触阴影、方形阴影、白底、灰底、黑底。\nEnglish guardrail: one vertical 1024x1536 image, exactly 18 cube object UV unwraps in a 3 columns by 6 rows atlas; each large cell is one complete cube object skin with a fixed 4x3 UV net: row1 col2 top, row2 col1 left, row2 co... (line truncated to 2000 chars)
+    // )
+
+    // 新版 prompt：先说明布局与元素，最后说明背景填充
     format!(
-        "生成一张1024x1536竖版图片，主题为“{theme_text}”。\n画面只包含18个用于跳一跳地板的立方体主题物体 UV 展开包装图，按三列六行均匀排布；每个大单元格代表一个完整的 1x1x1 立方体方块物体，运行态会把该单元内的六张面贴图精确贴到 Three.js 标准极小倒角立方体的六个面上。\n画面内容是{subject_text}。这是一张 cube object UV unwrap atlas / 立方体主题物体六面展开图集，不是单纯平铺材质、不是抽象纹理、不是只把主题颜色铺满，也不是已经渲染好的 3D 方块成品、游戏界面或图标集页面。\n每个大单元格内部必须使用固定 4列x3行 UV 展开结构，只有以下六个位置有贴图，其它位置保持纯洋红安全色：第1行第2列是 top；第2行第1列是 left；第2行第2列是 front；第2行第3列是 right；第2行第4列是 back；第3行第2列是 bottom。不要改变顺序，不要旋转面，不要把六个面画成一张连续透视图。\n每个方块都必须表现为“一个完整主题物体被塑造成 1x1x1 立方体后的六面包装”，六个面要属于同一个物体并能组合成完整方块造型；top/front/right/back/left/bottom 之间的颜色、边缘纹理、切面、果皮、籽点、条纹、果柄和叶片必须连续一致，不能六面各画互不相关的图案，也不能把同一张纹理重复六次。\n水果主题要生成18种可一眼辨认的方块水果 UV：方块苹果、方块香蕉、方块橙子、方块西瓜、方块草莓、方块葡萄、方块奇异果、方块菠萝、方块柠檬、方块桃子、方块梨、方块蓝莓、方块芒果、方块椰子、方块火龙果、方块樱桃、方块哈密瓜、方块石榴等；苹果需要果柄叶片跨 top/front，香蕉需要剥皮条带跨 front/right，橙子需要放射切面跨 top/front，西瓜需要红瓤黑籽和绿皮条纹在各面连续。不要只画重复果皮纹理、随机斑点、叶脉纹理或抽象材质。\n每个面都是满版不透明正方形贴图 / full-bleed opaque square face texture：四角、边缘和中心都要有可识别内容，不留透明、不留空白、不留实底背景；允许大面积水果切面、果柄叶片、剥皮条带、籽点、条纹和轮廓图案作为包装身份锚点，但不要把一个小水果、小叶片、小石头或小物体放在面中央，也不要画小贴纸、小图标、徽章或孤立主体。\n这不是透视渲染图：不要画摄像机视角、透视块、已烘焙侧壁、已烘焙厚度、自身投影、接触阴影或高光光斑；真实透视、倒角、侧壁和阴影会由运行态 Three.js 统一生成。每个面贴图在运行态会以约45度下压视角和较小尺寸显示，所以必须使用大色块、高对比、粗线条和简单图形，保证在64x64缩略图里仍能分辨主题物体身份。\n排布必须安全：18个大单元格必须完整落在自己的三列六行网格内，不能跨格、贴边串色或进入相邻方块；大单元之间、UV 空位、六面之间和画布最外圈只能使用单一纯洋红 {JUMP_HOP_TILE_ATLAS_KEY_HEX} 作为切图安全色，允许极细纯洋红安全缝，但不要画可见网格线、边框、编号、face label 或裁切标记。\n贴图内部可以使用绿色、白色、雪地、云朵、草地、花朵、果肉粉色和浅黄色等主题颜色，但不得使用接近 {JUMP_HOP_TILE_ATLAS_KEY_HEX} 的纯洋红色；贴图边缘不得有洋红描边、紫色底边、粉色脏边、彩色光晕或发光边。\n禁止文字、Logo、水印、UI按钮、标题、角标、装饰边框、face label、top/front/right/back/left/bottom文字、背包、装备栏、菜单、角色、完整场景、自然圆形水果、自然长条香蕉、非方块化完整水果、孤立水果照片、小型果切贴纸、小型橙片贴纸、小贴纸图标、小物体居中、纯果皮材质、纯果肉纹理、纯叶脉纹理、纯颜色块、透明背景、留白、3D平台、圆台、底座、托盘、物体摆在平台上、透视地块、正面30度物体图、鸟瞰地图块、落地投影、接触阴影、方形阴影、白底、灰底、黑底。\nEnglish guardrail: one vertical 1024x1536 image, exactly 18 cube object UV unwraps in a 3 columns by 6 rows atlas; each large cell is one complete cube object skin with a fixed 4x3 UV net: row1 col2 top, row2 col1 left, row2 col2 front, row2 col3 right, row2 col4 back, row3 col2 bottom; empty UV cells and gutters are solid magenta {JUMP_HOP_TILE_ATLAS_KEY_HEX}; generate six different face textures that stitch into one recognizable cubified theme object, not one repeated texture and not unrelated icons; fruit theme must create 18 distinct cubified fruits with continuous identity marks across faces; no text labels, no perspective cube render, no baked lighting, no baked shadows, no pedestal, no floor slab, no small centered stickers, no generic flat material; every face is full-bleed opaque square texture and remains recognizable at 64x64 in a 45-degree game camera."
+        "生成一张1024x1536竖版图片。以下按顺序说明画面中需要包含的内容：\n\
+        \n\
+        【整体布局】\n\
+         画面中排列 18 个大单元格，以 3 列 6 行的网格形式均匀分布。大单元格之间彼此绝不接触——行与行之间由至少 40 像素宽的纯洋红水平间距隔开，列与列之间由至少 30 像素宽的纯洋红垂直间距隔开。画面四周同样保留至少 30 像素宽的纯洋红边距。\n\
+        \n\
+        【每个大单元格的内部结构】\n\
+        每个大单元格内部是一个 4列x3行 的子网格。在这 12 个格子中，只有以下 6 个位置包含贴图内容：\n\
+        - 第1行第2列：top（顶面）\n\
+        - 第2行第1列：left（左侧面）\n\
+        - 第2行第2列：front（正面）\n\
+        - 第2行第3列：right（右侧面）\n\
+        - 第2行第4列：back（背面）\n\
+        - 第3行第2列：bottom（底面）\n\
+        其余 6 个格子和子网格之间的区域留空。每个面的贴图必须是大小完全相同的正方形，填满所在格子，不留边距。\n\
+        \n\
+        【方块化理解】\n\
+         每个大单元格的生成必须遵循\"物体 -> 立方体 -> 展开\"的思维链条：\n\
+         1. 物件立方化：先将主题物体想象成一个 1×1×1 的立方体——赋予它锐利的直边棱线、平坦的正交面和清晰的几何分界，消除自然形态的圆润弧面、渐变过渡和有机曲率；\n\
+          2. 六面展开：将立方体的 6 个面——每个面都是大小完全相同的正方形——按 top/front/right/back/left/bottom 顺序展开平铺到 4×3 子网格的对应位置。\n\
+        \n\
+        【贴图内容要求】\n\
+        18 个大单元格各自是一个独立主题物体经过方块化后的六面展开——不是自然形态物体，而是该物体被重塑为立方体后的平面投影。主题为\"{theme_text}\"，具体内容为{subject_text}。\n\
+        每个方块物体的 6 个面必须属于同一个物体，各面的纹理、颜色、图案要能连续接合，组合成一个完整的立方体造型。不要 6 个面彼此无关，也不要 6 个面重复同一张纹理。\n\
+        水果主题需生成 18 种可辨认的不同方块水果，例如果柄叶片跨越 top/front，剥皮条带跨越 front/right，放射切面跨越 top/front 等。\n\
+        每个面都是大小完全相同的正方形满版不透明贴图——六面不仅内容不同，外轮廓尺寸也必须严格一致；使用大色块、高对比、粗线条和简单图形，保证缩小到 64x64 时仍可辨认。不做透视渲染，不画投影、高光、倒角、侧壁厚度。\n\
+        \n\
+        【背景填充】\n\
+        大单元格之间的间距、每个大单元格内 6 个贴图之外的子网格区域、子网格之间的空隙、以及画面四周边距，全部使用单一纯洋红 {JUMP_HOP_TILE_ATLAS_KEY_HEX} 填充。洋红区域内不画任何文字、编号、标记或装饰。\n\
+        \n\
+        禁止：文字、数字、Logo、图标、编号、标记线、箭头、UI 元素、透视渲染、投影、高光、底座、托盘、透明背景、留白。"
     )
 }
 
 fn build_jump_hop_tile_atlas_negative_prompt() -> &'static str {
-    "文字、Logo、水印、UI按钮、UI 字、游戏界面、棋盘、背包、装备栏、图标集页面、外层面板、菜单、工具栏、低清晰度、畸形肢体、多余角色、裁切主体、写实摄影、油亮高光、塑料质感、暗黑幻想风、厚重CG渲染、海报、UI图标卡、标题、说明文字、装饰边框、单纯平铺材质、抽象纹理、随机斑点、只铺主题颜色、纯果皮材质、纯果肉纹理、纯叶脉纹理、无法分辨具体物体、自然圆形水果、自然长条香蕉、非方块化完整水果、孤立水果照片、果切小贴纸、橙片小贴纸、小水果居中、苹果小贴纸、香蕉小贴纸、小贴纸图标、小物体居中、透明背景、留白、3D平台、跳板成品、地块成品、物体剪影、正面30度物体图、纯俯视地图块、鸟瞰地图块、透视地块、已经画好的侧壁、已经画好的厚度、烘焙高光、烘焙阴影、落地投影、接触阴影、方形阴影、洋红阴影、紫色底边、粉色脏边、洋红色描边、彩色光晕、发光底边、方形底板、额外底座、承托底座、台座、石台、土墩、木板底座、圆台、底盘、托盘、岛屿底座、花盆底座、地面块、脚下地板、物体摆在平台上、物体下方垫地板、白底、灰底、黑底、暗色背景、背景色块、贴边、跨格、越界、可见网格线、编号、裁切标记"
+    "单元格紧贴、单元格粘连、无间距、无缝排列、贴边、跨格、越界、边界溢出、侵占洋红间距、吞没洋红间隔、贴图伸入间距区域、文字、Logo、水印、UI按钮、UI 字、游戏界面、棋盘、背包、装备栏、图标集页面、外层面板、菜单、工具栏、低清晰度、畸形肢体、多余角色、裁切主体、写实摄影、油亮高光、塑料质感、暗黑幻想风、厚重CG渲染、海报、UI图标卡、标题、说明文字、装饰边框、单纯平铺材质、抽象纹理、随机斑点、只铺主题颜色、纯果皮材质、纯果肉纹理、纯叶脉纹理、无法分辨具体物体、自然圆形水果、自然长条香蕉、非方块化完整水果、孤立水果照片、果切小贴纸、橙片小贴纸、小水果居中、苹果小贴纸、香蕉小贴纸、小贴纸图标、小物体居中、透明背景、留白、3D平台、跳板成品、地块成品、物体剪影、正面30度物体图、纯俯视地图块、鸟瞰地图块、透视地块、已经画好的侧壁、已经画好的厚度、烘焙高光、烘焙阴影、落地投影、接触阴影、方形阴影、洋红阴影、紫色底边、粉色脏边、洋红色描边、彩色光晕、发光底边、方形底板、额外底座、承托底座、台座、石台、土墩、木板底座、圆台、底盘、托盘、岛屿底座、花盆底座、地面块、脚下地板、物体摆在平台上、物体下方垫地板、白底、灰底、黑底、暗色背景、背景色块、可见网格线、编号、裁切标记、缺少背面、背面被省略、缺失back、面数不足6、只有5个面、省略某一面、省略六面中的一面、面大小不一致、面尺寸不同、面非正方形、长宽不相等、正方形大小不一、各面尺寸不统一、面与格子大小不符"
 }
 
 fn sanitize_jump_hop_tile_prompt(tile_prompt: &str) -> String {
@@ -1112,7 +1196,8 @@ fn sanitize_jump_hop_tile_prompt(tile_prompt: &str) -> String {
     value
 }
 
-fn slice_jump_hop_tile_atlas(
+#[allow(dead_code)]
+pub(crate) fn slice_jump_hop_tile_atlas(
     image: &crate::openai_image_generation::DownloadedOpenAiImage,
 ) -> Result<Vec<JumpHopTileAtlasSlice>, AppError> {
     let source = image::load_from_memory(image.bytes.as_slice())
@@ -1158,7 +1243,8 @@ fn slice_jump_hop_tile_atlas(
     Ok(slices)
 }
 
-fn slice_jump_hop_tile_uv_faces(
+#[allow(dead_code)]
+pub(crate) fn slice_jump_hop_tile_uv_faces(
     source: &image::RgbaImage,
     tile_x: u32,
     tile_y: u32,
@@ -1246,7 +1332,8 @@ fn slice_jump_hop_tile_uv_faces(
 }
 
 #[allow(clippy::too_many_arguments)]
-fn slice_jump_hop_tile_uv_face(
+#[allow(dead_code)]
+pub(crate) fn slice_jump_hop_tile_uv_face(
     source: &image::RgbaImage,
     uv_x: u32,
     uv_y: u32,
@@ -1282,7 +1369,7 @@ fn slice_jump_hop_tile_uv_face(
     })
 }
 
-fn crop_jump_hop_tile_texture_cell(
+pub(crate) fn crop_jump_hop_tile_texture_cell(
     source: &image::RgbaImage,
     x0: u32,
     y0: u32,
@@ -1290,7 +1377,8 @@ fn crop_jump_hop_tile_texture_cell(
     height: u32,
 ) -> image::DynamicImage {
     let min_side = width.min(height).max(1);
-    let safe_inset = (min_side / 32).clamp(2, 12);
+    // 洋红去背已在切片前完成；这里仅避开 UV 安全缝和极边缘残留，不按颜色透明化主体。
+    let safe_inset = (min_side / 18).clamp(4, 18);
     let inset_x = safe_inset.min(width.saturating_sub(1) / 2);
     let inset_y = safe_inset.min(height.saturating_sub(1) / 2);
     let crop_width = width.saturating_sub(inset_x.saturating_mul(2)).max(1);
@@ -1303,26 +1391,16 @@ fn crop_jump_hop_tile_texture_cell(
         crop_height,
     )
     .to_image();
-    let mut resized = image::imageops::resize(
+    let resized = image::imageops::resize(
         &cropped,
         JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE,
         JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE,
         image::imageops::FilterType::Lanczos3,
     );
-    normalize_jump_hop_tile_texture_pixels(&mut resized);
     image::DynamicImage::ImageRgba8(resized)
 }
 
-fn normalize_jump_hop_tile_texture_pixels(image: &mut image::RgbaImage) {
-    let fallback = average_jump_hop_tile_texture_color(image);
-    for pixel in image.pixels_mut() {
-        if is_jump_hop_tile_texture_key_pixel(*pixel) {
-            *pixel = fallback;
-        }
-        pixel.0[3] = 255;
-    }
-}
-
+#[allow(dead_code)]
 fn average_jump_hop_tile_texture_color(image: &image::RgbaImage) -> image::Rgba<u8> {
     let mut total_r = 0u64;
     let mut total_g = 0u64;
@@ -1351,6 +1429,7 @@ fn average_jump_hop_tile_texture_color(image: &image::RgbaImage) -> image::Rgba<
     ])
 }
 
+#[allow(dead_code)]
 fn is_jump_hop_tile_texture_key_pixel(pixel: image::Rgba<u8>) -> bool {
     let [red, green, blue, _] = pixel.0;
     let red_delta = red.abs_diff(255) as u32;
@@ -1363,7 +1442,7 @@ fn is_jump_hop_tile_texture_key_pixel(pixel: image::Rgba<u8>) -> bool {
         <= 24u32.saturating_mul(24)
 }
 
-fn jump_hop_tile_type_by_index(index: usize) -> JumpHopTileType {
+pub(crate) fn jump_hop_tile_type_by_index(index: usize) -> JumpHopTileType {
     match index {
         0 => JumpHopTileType::Start,
         value if value % 11 == 0 => JumpHopTileType::Bonus,
@@ -1377,7 +1456,7 @@ fn jump_hop_tile_asset_slot_name(tile_index: usize) -> String {
     format!("tile-{:02}", tile_index + 1)
 }
 
-fn jump_hop_tile_face_key_label(face: &JumpHopTileFaceKey) -> &'static str {
+pub(crate) fn jump_hop_tile_face_key_label(face: &JumpHopTileFaceKey) -> &'static str {
     match face {
         JumpHopTileFaceKey::Top => "top",
         JumpHopTileFaceKey::Front => "front",
@@ -2000,84 +2079,61 @@ mod tests {
     fn jump_hop_tile_atlas_prompt_uses_dedicated_uv_unwrap_floor_layout() {
         let prompt = build_jump_hop_tile_atlas_prompt("森林冒险", "森林主题清爽游戏化立体感平台");
 
+        // 基础信息
         assert!(prompt.contains("生成一张1024x1536竖版图片"));
-        assert!(prompt.contains("18个用于跳一跳地板的立方体主题物体 UV 展开包装图"));
-        assert!(prompt.contains("按三列六行均匀排布"));
-        assert!(prompt.contains("每个大单元格代表一个完整的 1x1x1 立方体方块物体"));
-        assert!(
-            prompt.contains("该单元内的六张面贴图精确贴到 Three.js 标准极小倒角立方体的六个面上")
-        );
-        assert!(prompt.contains("cube object UV unwrap atlas / 立方体主题物体六面展开图集"));
-        assert!(prompt.contains("不是单纯平铺材质、不是抽象纹理、不是只把主题颜色铺满"));
-        assert!(prompt.contains("游戏界面或图标集页面"));
-        assert!(prompt.contains("固定 4列x3行 UV 展开结构"));
-        assert!(prompt.contains("第1行第2列是 top"));
-        assert!(prompt.contains("第2行第1列是 left"));
-        assert!(prompt.contains("第2行第2列是 front"));
-        assert!(prompt.contains("第2行第3列是 right"));
-        assert!(prompt.contains("第2行第4列是 back"));
-        assert!(prompt.contains("第3行第2列是 bottom"));
-        assert!(prompt.contains("不要改变顺序，不要旋转面"));
-        assert!(prompt.contains("六个面要属于同一个物体并能组合成完整方块造型"));
-        assert!(prompt.contains("不能六面各画互不相关的图案，也不能把同一张纹理重复六次"));
-        assert!(prompt.contains("水果主题要生成18种可一眼辨认的方块水果 UV"));
-        assert!(prompt.contains("方块苹果、方块香蕉、方块橙子、方块西瓜"));
-        assert!(prompt.contains("苹果需要果柄叶片跨 top/front"));
-        assert!(prompt.contains("香蕉需要剥皮条带跨 front/right"));
-        assert!(prompt.contains("西瓜需要红瓤黑籽和绿皮条纹在各面连续"));
-        assert!(prompt.contains("不要只画重复果皮纹理、随机斑点、叶脉纹理或抽象材质"));
-        assert!(prompt.contains("full-bleed opaque square face texture"));
-        assert!(prompt.contains("四角、边缘和中心都要有可识别内容"));
-        assert!(prompt.contains("不留透明、不留空白、不留实底背景"));
-        assert!(prompt.contains(
-            "允许大面积水果切面、果柄叶片、剥皮条带、籽点、条纹和轮廓图案作为包装身份锚点"
-        ));
-        assert!(prompt.contains("不要把一个小水果、小叶片、小石头或小物体放在面中央"));
-        assert!(prompt.contains("这不是透视渲染图"));
-        assert!(prompt.contains("不要画摄像机视角、透视块、已烘焙侧壁"));
-        assert!(prompt.contains("真实透视、倒角、侧壁和阴影会由运行态 Three.js 统一生成"));
-        assert!(prompt.contains("64x64缩略图里仍能分辨主题物体身份"));
-        assert!(prompt.contains("18个大单元格必须完整落在自己的三列六行网格内"));
-        assert!(prompt.contains("大单元之间、UV 空位、六面之间和画布最外圈只能使用单一纯洋红"));
+        // 布局
+        assert!(prompt.contains("18 个大单元格"));
+        assert!(prompt.contains("3 列 6 行"));
+        assert!(prompt.contains("大单元格之间彼此绝不接触"));
+        // 内部 UV 结构
+        assert!(prompt.contains("4列x3行"));
+        assert!(prompt.contains("第1行第2列：top"));
+        assert!(prompt.contains("第2行第1列：left"));
+        assert!(prompt.contains("第2行第2列：front"));
+        assert!(prompt.contains("第2行第3列：right"));
+        assert!(prompt.contains("第2行第4列：back"));
+        assert!(prompt.contains("第3行第2列：bottom"));
+        assert!(prompt.contains("其余 6 个格子"));
+        // 贴图内容
+        assert!(prompt.contains("物体 -> 立方体 -> 展开"));
+        assert!(prompt.contains("1×1×1 的立方体"));
+        assert!(prompt.contains("经过方块化后的六面展开"));
+        assert!(prompt.contains("主题为\"森林冒险\""));
+        assert!(prompt.contains("6 个面必须属于同一个物体"));
+        assert!(prompt.contains("组合成一个完整的立方体造型"));
+        assert!(prompt.contains("不要 6 个面彼此无关"));
+        assert!(prompt.contains("不要 6 个面重复同一张纹理"));
+        // 水果主题
+        assert!(prompt.contains("水果主题需生成 18 种可辨认的不同方块水果"));
+        assert!(prompt.contains("果柄叶片跨越 top/front"));
+        assert!(prompt.contains("剥皮条带跨越 front/right"));
+        assert!(prompt.contains("放射切面跨越 top/front"));
+        // 面贴图要求
+        assert!(prompt.contains("满版不透明贴图"));
+        assert!(prompt.contains("缩小到 64x64 时仍可辨认"));
+        assert!(prompt.contains("不做透视渲染"));
+        assert!(prompt.contains("不画投影、高光、倒角、侧壁厚度"));
+        assert!(prompt.contains("大色块、高对比、粗线条和简单图形"));
+        assert!(prompt.contains("大小完全相同的正方形"));
+        // 背景填充（最后一段）
+        assert!(prompt.contains("【背景填充】"));
+        assert!(prompt.contains("大单元格之间的间距"));
+        assert!(prompt.contains("全部使用单一纯洋红"));
         assert!(prompt.contains(JUMP_HOP_TILE_ATLAS_KEY_HEX));
-        assert!(
-            prompt.contains("贴图内部可以使用绿色、白色、雪地、云朵、草地、花朵、果肉粉色和浅黄色")
-        );
-        assert!(prompt.contains("不得使用接近"));
-        assert!(prompt.contains("贴图边缘不得有洋红描边、紫色底边、粉色脏边"));
-        assert!(prompt.contains("自然圆形水果、自然长条香蕉、非方块化完整水果"));
-        assert!(prompt.contains("小贴纸图标、小物体居中、纯果皮材质、纯果肉纹理"));
-        assert!(prompt.contains("English guardrail"));
-        assert!(prompt.contains("one vertical 1024x1536 image"));
-        assert!(
-            prompt.contains("exactly 18 cube object UV unwraps in a 3 columns by 6 rows atlas")
-        );
-        assert!(prompt.contains("row1 col2 top"));
-        assert!(prompt.contains("row2 col1 left"));
-        assert!(prompt.contains("row2 col2 front"));
-        assert!(prompt.contains("row2 col3 right"));
-        assert!(prompt.contains("row2 col4 back"));
-        assert!(prompt.contains("row3 col2 bottom"));
-        assert!(prompt.contains(
-            "six different face textures that stitch into one recognizable cubified theme object"
-        ));
-        assert!(prompt.contains("no generic flat material"));
-        assert!(prompt.contains("no small centered stickers"));
-        assert!(prompt.contains("every face is full-bleed opaque square texture"));
-        assert!(prompt.contains("no perspective cube render"));
-        assert!(prompt.contains("no baked shadows"));
-        assert!(prompt.contains("no pedestal"));
-        assert!(prompt.contains("no floor slab"));
-        assert!(prompt.contains("empty UV cells and gutters are solid magenta"));
+        assert!(prompt.contains("不画任何文字、编号、标记或装饰"));
+        // 禁止项
+        assert!(prompt.contains("透视渲染"));
+        assert!(prompt.contains("底座"));
+        assert!(prompt.contains("托盘"));
+        assert!(prompt.contains("透明背景"));
+        assert!(prompt.contains("留白"));
+        // 负向检查：旧 prompt 残余
         assert!(!prompt.contains("可落脚平台素材"));
         assert!(!prompt.contains("平台裸素材"));
-        assert!(!prompt.contains("每格一个完整平台"));
-        assert!(!prompt.contains("25个平台"));
-        assert!(!prompt.contains("跳跃落点主题物体"));
         assert!(!prompt.contains("正面30度视角"));
         assert!(!prompt.contains("五行五列"));
-        assert!(!prompt.contains("25张用于跳一跳地板"));
-        assert!(!prompt.contains("25 full-bleed"));
+        assert!(!prompt.contains("25个"));
+        assert!(!prompt.contains("允许极细"));
         assert!(!prompt.contains("one square 5x5"));
         assert!(!prompt.contains("基础轮廓优先做不规则主题剪影"));
         assert!(!prompt.contains("25格造型要混排"));
@@ -2186,8 +2242,6 @@ mod tests {
             "宝可梦",
             "宝可梦主题的正面30度视角主题物体图集，包含皮卡丘和精灵球装饰",
         );
-        assert!(tile_prompt.contains("主题为“原创幻想萌宠冒险道具”"));
-        assert!(tile_prompt.contains("画面内容是原创幻想萌宠冒险道具主题"));
         assert!(tile_prompt.contains("黄色闪电萌宠符号"));
         assert!(tile_prompt.contains("彩色冒险能量球"));
         assert!(!tile_prompt.contains("宝可梦"));
@@ -2196,8 +2250,7 @@ mod tests {
 
         let normal_prompt =
             build_jump_hop_tile_atlas_prompt("水果", "水果主题的正面30度视角主题物体图集");
-        assert!(normal_prompt.contains("主题为“水果”"));
-        assert!(normal_prompt.contains("画面内容是水果主题的3D立方体主题身份方块包装图集"));
+        assert!(normal_prompt.contains("3D立方体主题身份方块包装图集"));
     }
 
     #[test]
@@ -2208,18 +2261,18 @@ mod tests {
         );
 
         assert!(
-            prompt.contains("画面内容是科幻芯片主题的正交平面清爽游戏化立方体主题身份方块包装贴图")
+            prompt.contains("具体内容为科幻芯片主题的正交平面清爽游戏化立方体主题身份方块包装贴图")
         );
-        assert!(!prompt.contains("画面内容是科幻芯片主题的俯视角清爽游戏化立体感平台素材"));
-        assert!(!prompt.contains("画面内容是科幻芯片主题的俯视角"));
+        assert!(!prompt.contains("俯视角清爽游戏化立体感平台素材"));
+        assert!(!prompt.contains("俯视角"));
 
         let top_down_prompt =
             build_jump_hop_tile_atlas_prompt("水果", "水果主题鸟瞰视角平铺俯拍圆形平台");
 
-        assert!(top_down_prompt.contains("画面内容是水果主题正交平面"));
+        assert!(top_down_prompt.contains("正交平面"));
         assert!(top_down_prompt.contains("圆形立方体地板"));
-        assert!(!top_down_prompt.contains("画面内容是水果主题鸟瞰视角"));
-        assert!(!top_down_prompt.contains("画面内容是水果主题平铺俯拍"));
+        assert!(!top_down_prompt.contains("鸟瞰视角"));
+        assert!(!top_down_prompt.contains("平铺俯拍"));
 
         let legacy_prompt = build_jump_hop_tile_atlas_prompt(
             "雪花",
@@ -2525,6 +2578,61 @@ mod tests {
         );
     }
 
+    #[test]
+    fn jump_hop_tile_atlas_slicing_avoids_uv_gutter_edges() {
+        let width = 384;
+        let height = 576;
+        let mut atlas =
+            image::RgbaImage::from_pixel(width, height, image::Rgba([255, 0, 255, 255]));
+        paint_test_uv_face(&mut atlas, 0, 0, 1, 0, image::Rgba([255, 0, 255, 255]));
+
+        let cell_width = width / JUMP_HOP_TILE_ATLAS_COLS;
+        let cell_height = height / JUMP_HOP_TILE_ATLAS_ROWS;
+        let face_side = (cell_width / JUMP_HOP_TILE_UV_FACE_COLS)
+            .min(cell_height / JUMP_HOP_TILE_UV_FACE_ROWS)
+            .max(1);
+        let tile_x = 0;
+        let tile_y = 0;
+        let uv_x = tile_x + (cell_width - face_side * JUMP_HOP_TILE_UV_FACE_COLS) / 2;
+        let uv_y = tile_y + (cell_height - face_side * JUMP_HOP_TILE_UV_FACE_ROWS) / 2;
+        let face_x = uv_x + face_side;
+        let face_y = uv_y;
+        let inset = 4;
+        for y in face_y + inset..face_y + face_side - inset {
+            for x in face_x + inset..face_x + face_side - inset {
+                atlas.put_pixel(x, y, image::Rgba([68, 186, 96, 255]));
+            }
+        }
+
+        let image = load_test_png(encode_test_atlas(atlas));
+        let slices = slice_jump_hop_tile_atlas(&image).expect("atlas should slice");
+        let top_tile = image::load_from_memory(slices[0].faces.top.bytes.as_slice())
+            .expect("top tile should decode")
+            .to_rgba8();
+
+        for (x, y) in [
+            (0, 0),
+            (JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE - 1, 0),
+            (0, JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE - 1),
+            (
+                JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE - 1,
+                JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE - 1,
+            ),
+        ] {
+            assert_eq!(
+                top_tile.get_pixel(x, y).0,
+                [68, 186, 96, 255],
+                "UV 安全边不能被采样到输出面贴图角落"
+            );
+        }
+        assert!(
+            top_tile
+                .pixels()
+                .all(|pixel| !is_jump_hop_tile_texture_key_pixel(*pixel)),
+            "输出面贴图不应残留接近洋红安全色的像素"
+        );
+    }
+
     #[test]
     fn jump_hop_tile_asset_slots_are_unique_for_eighteen_slices() {
         let slots = (0..JUMP_HOP_TILE_ITEM_COUNT)
@@ -2565,4 +2673,781 @@ mod tests {
             "18 个地板 UV 大单元的 108 张面贴图必须写入独立 slot/path"
         );
     }
+
+    /// 跳一跳图集切片全流程测试：生成合成图集 → 切片 → 关键色清除 → 缩放到256×256
+    /// 保留所有中间结果到 target/test-output/jump-hop-tile-atlas/
+    #[test]
+    fn jump_hop_tile_atlas_full_pipeline_with_intermediate_output() {
+        let output_root = std::path::PathBuf::from("target")
+            .join("test-output")
+            .join("jump-hop-tile-atlas");
+        let _ = std::fs::remove_dir_all(&output_root);
+        std::fs::create_dir_all(&output_root).expect("应该能创建输出目录");
+
+        let width = JUMP_HOP_TILE_ATLAS_IMAGE_WIDTH;
+        let height = JUMP_HOP_TILE_ATLAS_IMAGE_HEIGHT;
+        let cell_width = width / JUMP_HOP_TILE_ATLAS_COLS;
+        let cell_height = height / JUMP_HOP_TILE_ATLAS_ROWS;
+        let face_side = (cell_width / JUMP_HOP_TILE_UV_FACE_COLS)
+            .min(cell_height / JUMP_HOP_TILE_UV_FACE_ROWS)
+            .max(1);
+
+        // 生成合成图集：洋红安全色背景 + 18 个大单元格，每格 6 个不同颜色的 UV 面
+        let mut atlas =
+            image::RgbaImage::from_pixel(width, height, image::Rgba([255, 0, 255, 255]));
+        for row in 0..JUMP_HOP_TILE_ATLAS_ROWS {
+            for col in 0..JUMP_HOP_TILE_ATLAS_COLS {
+                let index = (row * JUMP_HOP_TILE_ATLAS_COLS + col) as u8;
+                paint_test_uv_face(
+                    &mut atlas,
+                    col,
+                    row,
+                    1,
+                    0,
+                    image::Rgba([40 + index * 3, 24 + index * 2, 100, 255]),
+                );
+                paint_test_uv_face(
+                    &mut atlas,
+                    col,
+                    row,
+                    1,
+                    1,
+                    image::Rgba([50 + index * 3, 34 + index * 2, 110, 255]),
+                );
+                paint_test_uv_face(
+                    &mut atlas,
+                    col,
+                    row,
+                    2,
+                    1,
+                    image::Rgba([60 + index * 3, 44 + index * 2, 120, 255]),
+                );
+                paint_test_uv_face(
+                    &mut atlas,
+                    col,
+                    row,
+                    3,
+                    1,
+                    image::Rgba([70 + index * 3, 54 + index * 2, 130, 255]),
+                );
+                paint_test_uv_face(
+                    &mut atlas,
+                    col,
+                    row,
+                    0,
+                    1,
+                    image::Rgba([80 + index * 3, 64 + index * 2, 140, 255]),
+                );
+                paint_test_uv_face(
+                    &mut atlas,
+                    col,
+                    row,
+                    1,
+                    2,
+                    image::Rgba([90 + index * 3, 74 + index * 2, 150, 255]),
+                );
+            }
+        }
+
+        // 在边缘区域故意填充一些洋红色像素，验证后续内缩裁切和关键色清除
+        let atlas_bytes = encode_test_atlas(atlas);
+        std::fs::write(output_root.join("00-raw-atlas.png"), &atlas_bytes).expect("保存原始图集");
+
+        let atlas_image = load_test_png(atlas_bytes);
+
+        // === 阶段1: 图集切片（18 个 tile cell） ===
+        let slices = slice_jump_hop_tile_atlas(&atlas_image).expect("图集切片应该成功");
+        assert_eq!(
+            slices.len(),
+            JUMP_HOP_TILE_ITEM_COUNT,
+            "应该切出 18 个 tile"
+        );
+
+        let mut total_faces = 0usize;
+        let mut no_key_color_residue = true;
+        let expected_output_size = JUMP_HOP_TILE_TEXTURE_OUTPUT_SIZE as u32;
+
+        for (index, slice) in slices.iter().enumerate() {
+            let row = index as u32 / JUMP_HOP_TILE_ATLAS_COLS;
+            let col = index as u32 % JUMP_HOP_TILE_ATLAS_COLS;
+            let tile_type = format!("{:?}", slice.tile_type);
+
+            let tile_dir = output_root.join(format!(
+                "tile-{:02}-{}-row{}-col{}",
+                index + 1,
+                tile_type,
+                row + 1,
+                col + 1
+            ));
+            std::fs::create_dir_all(&tile_dir).expect("应该能创建 tile 输出目录");
+
+            // 验证 tile type 分配
+            assert_eq!(
+                slice.tile_type,
+                jump_hop_tile_type_by_index(index),
+                "tile {index} 的类型分配应该一致"
+            );
+            assert_eq!(
+                slice.source_atlas_cell,
+                format!("row-{}-col-{}", row + 1, col + 1),
+                "tile {index} 的 source_atlas_cell 应该正确"
+            );
+
+            let faces: [(&str, &JumpHopTileFaceSlice); 6] = [
+                ("top", &slice.faces.top),
+                ("front", &slice.faces.front),
+                ("right", &slice.faces.right),
+                ("back", &slice.faces.back),
+                ("left", &slice.faces.left),
+                ("bottom", &slice.faces.bottom),
+            ];
+
+            for (face_name, face) in &faces {
+                total_faces += 1;
+
+                let face_filename = format!(
+                    "{}-{}.png",
+                    face_name,
+                    face.source_atlas_cell.replace('/', "-")
+                );
+                let face_path = tile_dir.join(&face_filename);
+                std::fs::write(&face_path, &face.bytes).expect("保存面贴图");
+
+                // 解码并验证
+                let decoded = image::load_from_memory(&face.bytes)
+                    .expect("面贴图应该能解码")
+                    .to_rgba8();
+
+                // 验证输出尺寸为 256×256
+                assert_eq!(
+                    decoded.dimensions(),
+                    (expected_output_size, expected_output_size),
+                    "tile {index} face {face_name} 应该输出 {}×{}",
+                    expected_output_size,
+                    expected_output_size
+                );
+
+                // 验证没有残余洋红关键色
+                for pixel in decoded.pixels() {
+                    if is_jump_hop_tile_texture_key_pixel(*pixel) {
+                        no_key_color_residue = false;
+                    }
+                }
+
+                // 验证面贴图不是纯洋红色（洋红背景已由去背步骤移除）
+                assert!(
+                    decoded.pixels().any(|p| p.0 != [255, 0, 255, 255]),
+                    "tile {index} face {face_name} 不应是纯洋红"
+                );
+            }
+        }
+
+        assert_eq!(total_faces, JUMP_HOP_TILE_ITEM_COUNT * 6);
+        assert!(no_key_color_residue, "所有输出面贴图不应残留洋红关键色像素");
+
+        // === 阶段2: 关键色检测算法验证 ===
+        // 纯洋红应被检测为关键色
+        assert!(is_jump_hop_tile_texture_key_pixel(image::Rgba([
+            255, 0, 255, 255
+        ])));
+        assert!(is_jump_hop_tile_texture_key_pixel(image::Rgba([
+            255, 0, 255, 128
+        ])));
+        // 接近洋红（距离 ≤ 24）应被检测为关键色
+        assert!(is_jump_hop_tile_texture_key_pixel(image::Rgba([
+            245, 10, 245, 255
+        ])));
+        // 远离洋红的不应被检测为关键色
+        assert!(!is_jump_hop_tile_texture_key_pixel(image::Rgba([
+            62, 188, 74, 255
+        ])));
+        assert!(!is_jump_hop_tile_texture_key_pixel(image::Rgba([
+            246, 246, 238, 255
+        ])));
+        assert!(!is_jump_hop_tile_texture_key_pixel(image::Rgba([
+            0, 0, 0, 255
+        ])));
+
+        // === 阶段3: 平均色计算验证 ===
+        let mut test_image = image::RgbaImage::new(4, 4);
+        for pixel in test_image.pixels_mut() {
+            *pixel = image::Rgba([100, 150, 200, 255]);
+        }
+        test_image.put_pixel(0, 0, image::Rgba([255, 0, 255, 255])); // 关键色（会被跳过）
+        let avg = average_jump_hop_tile_texture_color(&test_image);
+        // 15 个非关键色像素，均值应为 (100, 150, 200)
+        assert_eq!(avg.0[0], 100);
+        assert_eq!(avg.0[1], 150);
+        assert_eq!(avg.0[2], 200);
+        assert_eq!(avg.0[3], 255);
+
+        // 全部是关键色时回退到 fallback 颜色
+        let mut all_key = image::RgbaImage::new(4, 4);
+        for pixel in all_key.pixels_mut() {
+            *pixel = image::Rgba([255, 0, 255, 255]);
+        }
+        let fallback_avg = average_jump_hop_tile_texture_color(&all_key);
+        assert_eq!(fallback_avg.0[0], 148);
+        assert_eq!(fallback_avg.0[1], 163);
+        assert_eq!(fallback_avg.0[2], 184);
+
+        // === 阶段4: prompt 构建验证 ===
+        let prompt = build_jump_hop_tile_atlas_prompt("水果", "水果方块 UV 展开图集");
+        assert!(prompt.contains("1024x1536"));
+        assert!(prompt.contains("18 个大单元格"));
+        assert!(prompt.contains("3 列 6 行"));
+        assert!(prompt.contains("4列x3行"));
+        assert!(prompt.contains("【背景填充】"));
+
+        let negative_prompt = build_jump_hop_tile_atlas_negative_prompt();
+        assert!(negative_prompt.contains("文字"));
+        assert!(negative_prompt.contains("Logo"));
+        assert!(negative_prompt.contains("塑料质感"));
+        assert!(!negative_prompt.contains("规则圆盘"));
+
+        // === 阶段5: prompt 清洗验证 ===
+        let sanitized = sanitize_jump_hop_tile_prompt("宝可梦主题方块，皮卡丘风格可落脚平台素材");
+        assert!(!sanitized.contains("宝可梦"));
+        assert!(!sanitized.contains("皮卡丘"));
+        assert!(sanitized.contains("原创幻想萌宠冒险道具"));
+        assert!(sanitized.contains("黄色闪电萌宠符号"));
+        assert!(sanitized.contains("立方体主题身份方块包装"));
+
+        let sanitized2 = sanitize_jump_hop_tile_prompt("水果主题，跳台和地板");
+        assert!(sanitized2.contains("立方体地板"));
+        assert!(!sanitized2.contains("跳台"));
+
+        // 打印摘要
+        println!("\n====== 跳一跳图集切片测试完成 ======");
+        println!("原始图集尺寸: {}×{}", width, height);
+        println!(
+            "大单元格数: {} ({}行×{}列)",
+            JUMP_HOP_TILE_ITEM_COUNT, JUMP_HOP_TILE_ATLAS_ROWS, JUMP_HOP_TILE_ATLAS_COLS
+        );
+        println!(
+            "每格 UV 面网格: {}×{}",
+            JUMP_HOP_TILE_UV_FACE_COLS, JUMP_HOP_TILE_UV_FACE_ROWS
+        );
+        println!("每格 face_side: {}px", face_side);
+        println!("输出面贴图数量: {}", total_faces);
+        println!(
+            "输出面贴图尺寸: {}×{}",
+            expected_output_size, expected_output_size
+        );
+        println!("无关键色残留: {}", no_key_color_residue);
+        for (index, slice) in slices.iter().enumerate() {
+            println!(
+                "  tile-{:02} [{:?}] row-{}-col-{}",
+                index + 1,
+                slice.tile_type,
+                index as u32 / JUMP_HOP_TILE_ATLAS_COLS + 1,
+                index as u32 % JUMP_HOP_TILE_ATLAS_COLS + 1
+            );
+        }
+        println!("中间结果保存在: {}", output_root.display());
+        println!("=====================================\n");
+    }
+
+    /// 跳一跳图集全流程测试（AI 生图模式）—— 对比种子点精修 vs 谷检测。
+    /// 使用 VectorEngine 真实生成图集 → 洋红去背 → 两种算法分别切片 → 保存所有中间结果。
+    /// 需要配置 VECTOR_ENGINE_BASE_URL 和 VECTOR_ENGINE_API_KEY 环境变量。
+    /// 运行：cargo test -p api-server jump_hop_tile_atlas_ai_generation_pipeline -- --nocapture --ignored
+    #[test]
+    #[ignore]
+    fn jump_hop_tile_atlas_ai_generation_pipeline() {
+        use crate::jump_hop_atlas_slicing::{
+            AtlasSliceAlgorithm, DEFAULT_TILE_COLS, DEFAULT_TILE_ROWS, compute_col_density,
+            compute_row_density, refine_boundaries_seed,
+        };
+
+        let base_url = std::env::var("VECTOR_ENGINE_BASE_URL")
+            .unwrap_or_default()
+            .trim()
+            .trim_end_matches('/')
+            .to_string();
+        let api_key = std::env::var("VECTOR_ENGINE_API_KEY")
+            .unwrap_or_default()
+            .trim()
+            .to_string();
+
+        if base_url.is_empty() || api_key.is_empty() {
+            println!("\n跳过：未配置 VECTOR_ENGINE_BASE_URL / VECTOR_ENGINE_API_KEY\n");
+            return;
+        }
+
+        let output_root = std::path::PathBuf::from("target")
+            .join("test-output")
+            .join("jump-hop-tile-atlas-ai");
+        let _ = std::fs::remove_dir_all(&output_root);
+        std::fs::create_dir_all(&output_root).expect("应该能创建输出目录");
+
+        let theme_text = "水果";
+        let tile_prompt = "水果方块 UV 展开图集";
+        let atlas_prompt = build_jump_hop_tile_atlas_prompt(theme_text, tile_prompt);
+        let negative_prompt = build_jump_hop_tile_atlas_negative_prompt();
+
+        println!("\n====== 跳一跳 AI 图集生成与自适应切片对比测试 ======");
+        println!("主题: {theme_text}");
+        println!("网格: {}×{}", DEFAULT_TILE_ROWS, DEFAULT_TILE_COLS);
+        println!("输出目录: {}", output_root.display());
+
+        std::fs::write(
+            output_root.join("00-generation-prompt.txt"),
+            format!(
+                "=== POSITIVE PROMPT ===\n{atlas_prompt}\n\n=== NEGATIVE PROMPT ===\n{negative_prompt}\n"
+            ),
+        ).expect("保存 prompt");
+
+        // ── AI 生图 + 洋红去背（一次性，两种算法共享输入） ──
+        println!("\n--- 阶段1: 调用 VectorEngine 生成图集 ---");
+        let rt = tokio::runtime::Runtime::new().expect("创建 tokio runtime");
+        let settings = platform_image::VectorEngineImageSettings {
+            base_url: base_url.clone(),
+            api_key: api_key.clone(),
+            request_timeout_ms: 180_000,
+        };
+        let http_client = platform_image::build_vector_engine_image_http_client(&settings)
+            .expect("构建 HTTP 客户端");
+
+        let generation_result = rt.block_on(platform_image::create_vector_engine_image_generation(
+            &http_client,
+            &settings,
+            &atlas_prompt,
+            Some(negative_prompt),
+            JUMP_HOP_TILE_ATLAS_IMAGE_SIZE,
+            1,
+            &[],
+            "跳一跳图集测试",
+        ));
+
+        let generated = match generation_result {
+            Ok(images) => {
+                println!("生成成功，task_id: {}", images.task_id);
+                images
+            }
+            Err(error) => panic!("VectorEngine 生图失败：{error}"),
+        };
+
+        let tile_image = generated
+            .images
+            .into_iter()
+            .next()
+            .expect("应该有生成的图片");
+        std::fs::write(
+            output_root.join("01-ai-generated-atlas.png"),
+            &tile_image.bytes,
+        )
+        .expect("保存 AI 生成图集");
+
+        let download_image = crate::openai_image_generation::DownloadedOpenAiImage {
+            bytes: tile_image.bytes,
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        };
+
+        println!("\n--- 洋红去背 ---");
+        let cleaned = prepare_jump_hop_magenta_screen_image_for_slicing(
+            download_image,
+            "跳一跳图集洋红去背测试失败",
+        )
+        .expect("洋红去背应该成功");
+        std::fs::write(
+            output_root.join("01b-after-magenta-cleanup.png"),
+            &cleaned.bytes,
+        )
+        .expect("保存去背后图集");
+
+        // 解码并计算 density，打印供对比
+        let source = image::load_from_memory(&cleaned.bytes)
+            .expect("去背后图集应可解码")
+            .to_rgba8();
+        let width = source.width();
+        let height = source.height();
+        let pixels = source.as_raw();
+        println!("去背后图集尺寸: {}×{}", width, height);
+
+        let row_density = compute_row_density(pixels, width, height);
+        let col_density = compute_col_density(pixels, width, height);
+
+        // ── 算法对比 ──
+        let algorithms = [
+            ("seed", AtlasSliceAlgorithm::SeedRefinement),
+            ("valley", AtlasSliceAlgorithm::ValleyDetection),
+        ];
+
+        for &(algo_name, algo) in &algorithms {
+            println!("\n========================================");
+            println!("  算法: {algo_name}");
+            println!("========================================");
+
+            let algo_dir = output_root.join(format!("02-slices-{algo_name}"));
+            let _ = std::fs::remove_dir_all(&algo_dir);
+            std::fs::create_dir_all(&algo_dir).expect("创建算法输出目录");
+
+            let slices = crate::jump_hop_atlas_slicing::slice_tile_atlas_adaptive(
+                &cleaned,
+                DEFAULT_TILE_ROWS,
+                DEFAULT_TILE_COLS,
+                algo,
+            )
+            .expect(&format!("{algo_name} 切片应该成功"));
+
+            assert_eq!(
+                slices.len(),
+                (DEFAULT_TILE_ROWS * DEFAULT_TILE_COLS) as usize,
+                "{algo_name} 应该切出正确数量的 tile"
+            );
+
+            // 保存 density 数据供离线分析
+            std::fs::write(
+                algo_dir.join("row_density.csv"),
+                row_density
+                    .iter()
+                    .enumerate()
+                    .map(|(i, v)| format!("{i},{v:.6}"))
+                    .collect::<Vec<_>>()
+                    .join("\n"),
+            )
+            .expect("保存行 density");
+
+            std::fs::write(
+                algo_dir.join("col_density.csv"),
+                col_density
+                    .iter()
+                    .enumerate()
+                    .map(|(i, v)| format!("{i},{v:.6}"))
+                    .collect::<Vec<_>>()
+                    .join("\n"),
+            )
+            .expect("保存列 density");
+
+            // 保存行投影可视化（ASCII 柱状图）
+            let mut row_viz = String::from("row_density:\n");
+            let max_d = row_density
+                .iter()
+                .cloned()
+                .fold(0.0f32, f32::max)
+                .max(0.001);
+            for (y, &d) in row_density.iter().enumerate() {
+                let bar = (d / max_d * 60.0) as usize;
+                row_viz.push_str(&format!("{:4} |{}\n", y, "#".repeat(bar)));
+            }
+            std::fs::write(algo_dir.join("row_density_viz.txt"), &row_viz).ok();
+
+            let mut col_viz = String::from("col_density:\n");
+            let max_c = col_density
+                .iter()
+                .cloned()
+                .fold(0.0f32, f32::max)
+                .max(0.001);
+            for (x, &d) in col_density.iter().enumerate() {
+                let bar = (d / max_c * 60.0) as usize;
+                col_viz.push_str(&format!("{:4} |{}\n", x, "#".repeat(bar)));
+            }
+            std::fs::write(algo_dir.join("col_density_viz.txt"), &col_viz).ok();
+
+            // 打印 cell 边界
+            println!("\n固定网格种子位置:");
+            let cell_h = (height / DEFAULT_TILE_ROWS).max(1);
+            let cell_w = (width / DEFAULT_TILE_COLS).max(1);
+            let row_seeds: Vec<_> = (1..DEFAULT_TILE_ROWS)
+                .map(|i| i * height / DEFAULT_TILE_ROWS)
+                .collect();
+            let col_seeds: Vec<_> = (1..DEFAULT_TILE_COLS)
+                .map(|i| i * width / DEFAULT_TILE_COLS)
+                .collect();
+            println!("  行种子: {:?}", row_seeds);
+            println!("  列种子: {:?}", col_seeds);
+
+            // 精修后的位置（用种子点精修展示偏移量）
+            let refined_rows =
+                refine_boundaries_seed(&row_density, &row_seeds, (cell_h / 3).max(1));
+            let refined_cols =
+                refine_boundaries_seed(&col_density, &col_seeds, (cell_w / 3).max(1));
+            println!("\n种子点精修偏移:");
+            for (i, (&seed, &refined)) in row_seeds.iter().zip(refined_rows.iter()).enumerate() {
+                println!(
+                    "  行边界 {}: seed={seed} → refined={refined} (偏移 {})",
+                    i + 1,
+                    refined as i32 - seed as i32
+                );
+            }
+            for (i, (&seed, &refined)) in col_seeds.iter().zip(refined_cols.iter()).enumerate() {
+                println!(
+                    "  列边界 {}: seed={seed} → refined={refined} (偏移 {})",
+                    i + 1,
+                    refined as i32 - seed as i32
+                );
+            }
+
+            // 保存面贴图
+            let mut total_faces = 0usize;
+            for (index, slice) in slices.iter().enumerate() {
+                let r = index as u32 / DEFAULT_TILE_COLS;
+                let c = index as u32 % DEFAULT_TILE_COLS;
+                let tile_dir = algo_dir.join(format!(
+                    "tile-{:02}-{:?}-row{}-col{}",
+                    index + 1,
+                    slice.tile_type,
+                    r + 1,
+                    c + 1
+                ));
+                std::fs::create_dir_all(&tile_dir).expect("创建 tile 目录");
+
+                let faces: [(&str, &JumpHopTileFaceSlice); 6] = [
+                    ("top", &slice.faces.top),
+                    ("front", &slice.faces.front),
+                    ("right", &slice.faces.right),
+                    ("back", &slice.faces.back),
+                    ("left", &slice.faces.left),
+                    ("bottom", &slice.faces.bottom),
+                ];
+                for (face_name, face) in &faces {
+                    total_faces += 1;
+                    let filename = format!(
+                        "{}-{}.png",
+                        face_name,
+                        face.source_atlas_cell.replace('/', "-")
+                    );
+                    std::fs::write(tile_dir.join(&filename), &face.bytes).expect("保存面贴图");
+                }
+            }
+            println!("{algo_name}: 输出 {total_faces} 张面贴图");
+
+            // 保存 3×6 cell 网格中间切图
+            let cells_dir = algo_dir.join("cells");
+            std::fs::create_dir_all(&cells_dir).expect("创建 cells 目录");
+            let grid = match algo {
+                AtlasSliceAlgorithm::SeedRefinement => {
+                    crate::jump_hop_atlas_slicing::detect_cell_grid_seed(
+                        pixels,
+                        width,
+                        height,
+                        DEFAULT_TILE_ROWS,
+                        DEFAULT_TILE_COLS,
+                    )
+                }
+                AtlasSliceAlgorithm::ValleyDetection => {
+                    crate::jump_hop_atlas_slicing::detect_cell_grid_valley(
+                        pixels,
+                        width,
+                        height,
+                        DEFAULT_TILE_ROWS,
+                        DEFAULT_TILE_COLS,
+                    )
+                    .unwrap_or_else(|_| {
+                        crate::jump_hop_atlas_slicing::detect_cell_grid_seed(
+                            pixels,
+                            width,
+                            height,
+                            DEFAULT_TILE_ROWS,
+                            DEFAULT_TILE_COLS,
+                        )
+                    })
+                }
+            };
+            for row in 0..DEFAULT_TILE_ROWS {
+                for col in 0..DEFAULT_TILE_COLS {
+                    let x0 = grid.col_boundaries[col as usize];
+                    let x1 = grid.col_boundaries[col as usize + 1];
+                    let y0 = grid.row_boundaries[row as usize];
+                    let y1 = grid.row_boundaries[row as usize + 1];
+                    let cell_img = image::imageops::crop_imm(&source, x0, y0, x1 - x0, y1 - y0);
+                    cell_img
+                        .to_image()
+                        .save(cells_dir.join(format!("cell-row{}-col{}.png", row + 1, col + 1)))
+                        .expect("保存 cell 切图");
+                }
+            }
+            println!("{algo_name}: 保存 {DEFAULT_TILE_ROWS}×{DEFAULT_TILE_COLS} cell 网格切图");
+        }
+
+        println!("\n====== 对比测试完成 ======");
+        println!("输出目录: {}", output_root.display());
+        println!("  seed 算法结果: {}/02-slices-seed/", output_root.display());
+        println!(
+            "  valley 算法结果: {}/02-slices-valley/",
+            output_root.display()
+        );
+        println!("  density 数据: 各算法目录下的 row_density.csv / col_density.csv");
+        println!("==============================\n");
+    }
+
+    /// 修改前固定网格管线测试（AI 生图模式）
+    /// 使用 VectorEngine 真实生成图集 → 洋红去背 → 旧固定网格切片 → 保存中间结果。
+    /// 需要配置 VECTOR_ENGINE_BASE_URL 和 VECTOR_ENGINE_API_KEY 环境变量。
+    /// 运行：cargo test -p api-server jump_hop_tile_atlas_ai_fixed_grid -- --nocapture --ignored
+    #[test]
+    #[ignore]
+    fn jump_hop_tile_atlas_ai_fixed_grid() {
+        let base_url = std::env::var("VECTOR_ENGINE_BASE_URL")
+            .unwrap_or_default()
+            .trim()
+            .trim_end_matches('/')
+            .to_string();
+        let api_key = std::env::var("VECTOR_ENGINE_API_KEY")
+            .unwrap_or_default()
+            .trim()
+            .to_string();
+
+        if base_url.is_empty() || api_key.is_empty() {
+            println!("\n跳过：未配置 VECTOR_ENGINE_BASE_URL / VECTOR_ENGINE_API_KEY\n");
+            return;
+        }
+
+        let output_root = std::path::PathBuf::from("target")
+            .join("test-output")
+            .join("jump-hop-tile-atlas-ai-fixed");
+        let _ = std::fs::remove_dir_all(&output_root);
+        std::fs::create_dir_all(&output_root).expect("应该能创建输出目录");
+
+        let theme_text = "水果";
+        let tile_prompt = "水果方块 UV 展开图集";
+        let atlas_prompt = build_jump_hop_tile_atlas_prompt(theme_text, tile_prompt);
+        let negative_prompt = build_jump_hop_tile_atlas_negative_prompt();
+
+        println!("\n====== 跳一跳固定网格 AI 生图测试 ======");
+        println!("主题: {theme_text}");
+        println!("输出目录: {}", output_root.display());
+
+        std::fs::write(
+            output_root.join("00-generation-prompt.txt"),
+            format!(
+                "=== POSITIVE PROMPT ===\n{atlas_prompt}\n\n=== NEGATIVE PROMPT ===\n{negative_prompt}\n"
+            ),
+        ).expect("保存 prompt");
+
+        // AI 生图
+        println!("\n--- 阶段1: VectorEngine 生图 ---");
+        let rt = tokio::runtime::Runtime::new().expect("创建 tokio runtime");
+        let settings = platform_image::VectorEngineImageSettings {
+            base_url: base_url.clone(),
+            api_key: api_key.clone(),
+            request_timeout_ms: 180_000,
+        };
+        let http_client = platform_image::build_vector_engine_image_http_client(&settings)
+            .expect("构建 HTTP 客户端");
+
+        let generation_result = rt.block_on(platform_image::create_vector_engine_image_generation(
+            &http_client,
+            &settings,
+            &atlas_prompt,
+            Some(negative_prompt),
+            JUMP_HOP_TILE_ATLAS_IMAGE_SIZE,
+            1,
+            &[],
+            "跳一跳图集测试（固定网格）",
+        ));
+
+        let generated = match generation_result {
+            Ok(images) => {
+                println!("生成成功，task_id: {}", images.task_id);
+                images
+            }
+            Err(error) => panic!("VectorEngine 生图失败：{error}"),
+        };
+
+        let tile_image = generated
+            .images
+            .into_iter()
+            .next()
+            .expect("应该有生成的图片");
+        std::fs::write(
+            output_root.join("01-ai-generated-atlas.png"),
+            &tile_image.bytes,
+        )
+        .expect("保存 AI 生成图集");
+
+        let download_image = crate::openai_image_generation::DownloadedOpenAiImage {
+            bytes: tile_image.bytes,
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        };
+
+        println!("\n--- 阶段2: 洋红去背 ---");
+        let cleaned = prepare_jump_hop_magenta_screen_image_for_slicing(
+            download_image,
+            "跳一跳图集洋红去背测试失败",
+        )
+        .expect("洋红去背应该成功");
+        std::fs::write(
+            output_root.join("02-after-magenta-cleanup.png"),
+            &cleaned.bytes,
+        )
+        .expect("保存去背后图集");
+
+        let source = image::load_from_memory(&cleaned.bytes)
+            .expect("解码")
+            .to_rgba8();
+        println!("去背后尺寸: {}×{}", source.width(), source.height());
+
+        // 旧固定网格切片
+        println!("\n--- 阶段3: 固定网格切片 ---");
+        let cell_w = source.width() / JUMP_HOP_TILE_ATLAS_COLS;
+        let cell_h = source.height() / JUMP_HOP_TILE_ATLAS_ROWS;
+        println!("固定 cell: {}×{} px", cell_w, cell_h);
+
+        let slices = slice_jump_hop_tile_atlas(&cleaned).expect("固定网格切片应该成功");
+        assert_eq!(slices.len(), JUMP_HOP_TILE_ITEM_COUNT);
+
+        let mut total_faces = 0usize;
+        for (index, slice) in slices.iter().enumerate() {
+            let r = index as u32 / JUMP_HOP_TILE_ATLAS_COLS;
+            let c = index as u32 % JUMP_HOP_TILE_ATLAS_COLS;
+            let tile_dir = output_root.join(format!(
+                "tile-{:02}-{:?}-row{}-col{}",
+                index + 1,
+                slice.tile_type,
+                r + 1,
+                c + 1
+            ));
+            std::fs::create_dir_all(&tile_dir).expect("创建 tile 目录");
+
+            let faces: [(&str, &JumpHopTileFaceSlice); 6] = [
+                ("top", &slice.faces.top),
+                ("front", &slice.faces.front),
+                ("right", &slice.faces.right),
+                ("back", &slice.faces.back),
+                ("left", &slice.faces.left),
+                ("bottom", &slice.faces.bottom),
+            ];
+            for (face_name, face) in &faces {
+                total_faces += 1;
+                let filename = format!(
+                    "{}-{}.png",
+                    face_name,
+                    face.source_atlas_cell.replace('/', "-")
+                );
+                std::fs::write(tile_dir.join(&filename), &face.bytes).expect("保存面贴图");
+            }
+        }
+
+        assert_eq!(total_faces, JUMP_HOP_TILE_ITEM_COUNT * 6);
+        println!("输出: {} 张面贴图", total_faces);
+
+        // 保存 3×6 cell 网格中间切图
+        let cells_dir = output_root.join("cells");
+        std::fs::create_dir_all(&cells_dir).expect("创建 cells 目录");
+        for row in 0..JUMP_HOP_TILE_ATLAS_ROWS {
+            for col in 0..JUMP_HOP_TILE_ATLAS_COLS {
+                let x0 = col * source.width() / JUMP_HOP_TILE_ATLAS_COLS;
+                let x1 = (col + 1) * source.width() / JUMP_HOP_TILE_ATLAS_COLS;
+                let y0 = row * source.height() / JUMP_HOP_TILE_ATLAS_ROWS;
+                let y1 = (row + 1) * source.height() / JUMP_HOP_TILE_ATLAS_ROWS;
+                let cell_img = image::imageops::crop_imm(&source, x0, y0, x1 - x0, y1 - y0);
+                cell_img
+                    .to_image()
+                    .save(cells_dir.join(format!("cell-row{}-col{}.png", row + 1, col + 1)))
+                    .expect("保存 cell 切图");
+            }
+        }
+        println!(
+            "保存 {}×{} cell 网格切图",
+            JUMP_HOP_TILE_ATLAS_ROWS, JUMP_HOP_TILE_ATLAS_COLS
+        );
+
+        println!("\n====== 固定网格测试完成 ======");
+        println!("输出目录: {}", output_root.display());
+        println!("==============================\n");
+    }
 }
diff --git a/server-rs/crates/api-server/src/jump_hop_atlas_slicing.rs b/server-rs/crates/api-server/src/jump_hop_atlas_slicing.rs
new file mode 100644
index 000000000..94cf2b68f
--- /dev/null
+++ b/server-rs/crates/api-server/src/jump_hop_atlas_slicing.rs
@@ -0,0 +1,951 @@
+// 跳一跳图集自适应切片算法模块。
+// 提供两种基于图像内容的自适应 cell 边界检测算法：
+//   - SeedRefinement: 种子点精修（默认），在固定网格分界线附近搜索 density 最低点。
+//   - ValleyDetection: 全谷检测，高斯平滑 + 自适应阈值 + 合并 + 滑窗选最优。
+// 两种算法均参数化，支持任意 rows × cols 网格配置，默认 6×3。
+
+use axum::http::StatusCode;
+use image;
+use serde_json::json;
+
+use crate::{
+    http_error::AppError,
+    jump_hop::{
+        JumpHopTileAtlasSlice, JumpHopTileFaceSlice, JumpHopTileFaceSlices,
+        JUMP_HOP_CREATION_PROVIDER, JUMP_HOP_TILE_UV_FACE_COLS, JUMP_HOP_TILE_UV_FACE_ROWS,
+        crop_jump_hop_tile_texture_cell, jump_hop_tile_face_key_label,
+        jump_hop_tile_type_by_index,
+    },
+    openai_image_generation::DownloadedOpenAiImage,
+};
+use shared_contracts::jump_hop::JumpHopTileFaceKey;
+
+/// 默认 tile 行数
+pub(crate) const DEFAULT_TILE_ROWS: u32 = 6;
+/// 默认 tile 列数
+pub(crate) const DEFAULT_TILE_COLS: u32 = 3;
+
+/// 自适应切片算法类型（控制 atlas 级 6×3 cell 网格检测）
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum AtlasSliceAlgorithm {
+    /// 种子点精修：在固定网格分界线附近搜索 density 最低点（默认）
+    SeedRefinement,
+    /// 全谷检测：高斯平滑 + 自适应阈值 + 合并 + 滑窗选最优
+    ValleyDetection,
+}
+
+impl Default for AtlasSliceAlgorithm {
+    fn default() -> Self {
+        Self::SeedRefinement
+    }
+}
+
+/// 自适应 cell 网格检测结果
+#[derive(Clone, Debug)]
+pub(crate) struct AdaptiveCellGrid {
+    /// 行边界位置 [height]，长度 = rows + 1
+    pub row_boundaries: Vec<u32>,
+    /// 列边界位置 [width]，长度 = cols + 1
+    pub col_boundaries: Vec<u32>,
+    /// 使用的算法
+    #[allow(dead_code)]
+    pub algorithm: AtlasSliceAlgorithm,
+}
+
+// ============================================================================
+// Density 计算
+// ============================================================================
+
+/// 从 RGBA 像素计算行投影 density（每行非透明像素占比）
+pub(crate) fn compute_row_density(pixels: &[u8], width: u32, height: u32) -> Vec<f32> {
+    let w = width as usize;
+    let h = height as usize;
+    let stride = w * 4;
+    let mut density = vec![0.0f32; h];
+    let total = w as f32;
+    for y in 0..h {
+        let row_start = y * stride;
+        let mut content = 0u32;
+        for x in 0..w {
+            if pixels[row_start + x * 4 + 3] > 0 {
+                content += 1;
+            }
+        }
+        density[y] = content as f32 / total;
+    }
+    density
+}
+
+/// 从 RGBA 像素计算列投影 density（每列非透明像素占比）
+pub(crate) fn compute_col_density(pixels: &[u8], width: u32, height: u32) -> Vec<f32> {
+    let w = width as usize;
+    let h = height as usize;
+    let stride = w * 4;
+    let mut density = vec![0.0f32; w];
+    let total = h as f32;
+    for x in 0..w {
+        let mut content = 0u32;
+        for y in 0..h {
+            if pixels[y * stride + x * 4 + 3] > 0 {
+                content += 1;
+            }
+        }
+        density[x] = content as f32 / total;
+    }
+    density
+}
+
+// ============================================================================
+// 共享工具
+// ============================================================================
+
+/// 在 [seed-radius, seed+radius] 范围内找 density 最小值的 index
+fn find_min_density_position(density: &[f32], seed: u32, radius: u32) -> u32 {
+    let lo = seed.saturating_sub(radius) as usize;
+    let hi = (seed + radius).min(density.len().saturating_sub(1) as u32) as usize;
+    if lo >= density.len() || lo > hi {
+        return seed;
+    }
+    let mut best = seed as usize;
+    let mut best_val = density[best.min(density.len() - 1)];
+    for i in lo..=hi {
+        if density[i] < best_val {
+            best_val = density[i];
+            best = i;
+        }
+    }
+    best as u32
+}
+
+/// 保证边界单调递增（禁止交叉）
+fn enforce_monotonic(boundaries: &mut [u32]) {
+    for i in 1..boundaries.len() {
+        if boundaries[i] <= boundaries[i - 1] {
+            boundaries[i] = boundaries[i - 1] + 1;
+        }
+    }
+}
+
+// ============================================================================
+// 算法 A: 种子点精修 (Seed Refinement)
+// ============================================================================
+
+/// 种子点精修：对每条固定网格分界线，在 ±radius 搜索窗口内找 density 最低点。
+///
+/// * `density` - 一维投影 density 序列
+/// * `seeds` - 固定网格分界线位置（不含 0 和 max）
+/// * `radius` - 搜索半径
+///
+/// 返回精修后的分界线位置（不含 0 和 max）。
+pub(crate) fn refine_boundaries_seed(
+    density: &[f32],
+    seeds: &[u32],
+    radius: u32,
+) -> Vec<u32> {
+    let mut refined = Vec::with_capacity(seeds.len());
+    for &seed in seeds {
+        let pos = find_min_density_position(density, seed, radius);
+        refined.push(pos);
+    }
+    enforce_monotonic(&mut refined);
+    refined
+}
+
+/// 种子点精修完整流程：计算 density → 生成种子 → 精修 → 组装边界
+pub(crate) fn detect_cell_grid_seed(
+    pixels: &[u8],
+    width: u32,
+    height: u32,
+    rows: u32,
+    cols: u32,
+) -> AdaptiveCellGrid {
+    let row_density = compute_row_density(pixels, width, height);
+    let col_density = compute_col_density(pixels, width, height);
+
+    let cell_height = (height / rows).max(1);
+    let cell_width = (width / cols).max(1);
+    let radius_row = (cell_height / 3).max(1);
+    let radius_col = (cell_width / 3).max(1);
+
+    let row_seeds: Vec<u32> = (1..rows).map(|i| i * height / rows).collect();
+    let col_seeds: Vec<u32> = (1..cols).map(|i| i * width / cols).collect();
+
+    let row_splits = refine_boundaries_seed(&row_density, &row_seeds, radius_row);
+    let col_splits = refine_boundaries_seed(&col_density, &col_seeds, radius_col);
+
+    let mut row_boundaries = vec![0u32];
+    row_boundaries.extend(row_splits);
+    row_boundaries.push(height);
+
+    let mut col_boundaries = vec![0u32];
+    col_boundaries.extend(col_splits);
+    col_boundaries.push(width);
+
+    AdaptiveCellGrid {
+        row_boundaries,
+        col_boundaries,
+        algorithm: AtlasSliceAlgorithm::SeedRefinement,
+    }
+}
+
+// ============================================================================
+// 算法 B: 谷检测 (Valley Detection)
+// ============================================================================
+
+/// 一维高斯平滑核
+fn gaussian_smooth_1d(signal: &[f32], sigma: f32) -> Vec<f32> {
+    let n = signal.len();
+    if n == 0 {
+        return vec![];
+    }
+    let radius = (sigma * 3.0).ceil() as isize;
+    let mut kernel = Vec::new();
+    let mut kernel_sum = 0.0f32;
+    for i in -radius..=radius {
+        let w = (-(i as f32).powi(2) / (2.0 * sigma * sigma)).exp();
+        kernel.push(w);
+        kernel_sum += w;
+    }
+    for w in &mut kernel {
+        *w /= kernel_sum;
+    }
+
+    let mut result = vec![0.0f32; n];
+    for i in 0..n {
+        let mut acc = 0.0f32;
+        let mut w_sum = 0.0f32;
+        for (k, &w) in kernel.iter().enumerate() {
+            let idx = i as isize + k as isize - radius;
+            if idx >= 0 && idx < n as isize {
+                acc += signal[idx as usize] * w;
+                w_sum += w;
+            }
+        }
+        if w_sum > 0.0 {
+            result[i] = acc / w_sum;
+        }
+    }
+    result
+}
+
+/// 低于阈值的连续区间 → 候选谷列表
+fn extract_valleys_below_threshold(
+    signal: &[f32],
+    threshold: f32,
+) -> Vec<(usize, usize)> {
+    let n = signal.len();
+    let mut valleys = Vec::new();
+    let mut in_valley = false;
+    let mut start = 0usize;
+
+    for i in 0..n {
+        if signal[i] <= threshold {
+            if !in_valley {
+                start = i;
+                in_valley = true;
+            }
+        } else if in_valley {
+            valleys.push((start, i - 1));
+            in_valley = false;
+        }
+    }
+    if in_valley {
+        valleys.push((start, n - 1));
+    }
+    valleys
+}
+
+/// 合并间距 < min_gap 的相邻谷
+fn merge_close_valleys(
+    valleys: &[(usize, usize)],
+    min_gap: usize,
+) -> Vec<(usize, usize)> {
+    if valleys.is_empty() {
+        return vec![];
+    }
+    let mut merged = Vec::new();
+    let mut cur_start = valleys[0].0;
+    let mut cur_end = valleys[0].1;
+
+    for &(s, e) in &valleys[1..] {
+        if s - cur_end <= min_gap {
+            cur_end = e;
+        } else {
+            merged.push((cur_start, cur_end));
+            cur_start = s;
+            cur_end = e;
+        }
+    }
+    merged.push((cur_start, cur_end));
+    merged
+}
+
+/// 谷的几何中心
+fn valley_centers(valleys: &[(usize, usize)]) -> Vec<u32> {
+    valleys.iter().map(|&(s, e)| ((s + e) / 2) as u32).collect()
+}
+
+/// 滑窗选最优 target_count 个谷：枚举连续组合，选间距最均匀的一组
+fn select_spaced_valleys(
+    centers: &[u32],
+    expected_spacing: f32,
+    target_count: usize,
+) -> Vec<u32> {
+    if centers.len() <= target_count {
+        return centers.to_vec();
+    }
+    let mut best_score = f32::MAX;
+    let mut best_centers = vec![];
+
+    for start in 0..=centers.len() - target_count {
+        let window = &centers[start..start + target_count];
+        let mut score = 0.0f32;
+        for i in 1..window.len() {
+            let ratio = (window[i] - window[i - 1]) as f32 / expected_spacing;
+            score += (ratio - 1.0).powi(2);
+        }
+        if score < best_score {
+            best_score = score;
+            best_centers = window.to_vec();
+        }
+    }
+    best_centers
+}
+
+/// 谷检测完整流程
+pub(crate) fn refine_boundaries_valley(
+    density: &[f32],
+    expected_cell_count: u32,
+    expected_cell_size: f32,
+    total_length: u32,
+) -> Result<Vec<u32>, &'static str> {
+    if expected_cell_count <= 1 {
+        return Ok(vec![]);
+    }
+    let expected_valleys = (expected_cell_count - 1) as usize;
+
+    // 步骤1: 高斯平滑
+    let sigma = expected_cell_size / 4.0;
+    let smoothed = gaussian_smooth_1d(density, sigma);
+
+    // 步骤2: 自适应阈值
+    let peak = smoothed.iter().cloned().fold(0.0f32, f32::max);
+    let threshold = f32::max(peak * 0.15, 0.02);
+
+    // 步骤3: 提取候选谷
+    let raw_valleys = extract_valleys_below_threshold(&smoothed, threshold);
+    if raw_valleys.is_empty() {
+        return Err("未检测到候选谷");
+    }
+
+    // 步骤4: 合并相邻谷
+    let min_gap = (expected_cell_size * 0.5) as usize;
+    let merged = merge_close_valleys(&raw_valleys, min_gap);
+
+    // 步骤5: 过滤窄噪声谷（宽度 < 3px）
+    let filtered: Vec<_> = merged
+        .into_iter()
+        .filter(|&(s, e)| e >= s && e - s >= 3)
+        .collect();
+    if filtered.is_empty() {
+        return Err("过滤后无有效谷");
+    }
+
+    let centers = valley_centers(&filtered);
+
+    // 步骤6: 候选太多时按谷深排序取 top
+    let candidates = if centers.len() > expected_valleys + 2 {
+        let mut scored: Vec<_> = filtered
+            .iter()
+            .map(|&(s, e)| {
+                let avg = smoothed[s..=e].iter().sum::<f32>() / (e - s + 1) as f32;
+                let depth = peak - avg;
+                (depth, (s + e) / 2)
+            })
+            .collect();
+        scored.sort_by(|a, b| b.0.partial_cmp(&a.0).unwrap_or(std::cmp::Ordering::Equal));
+        scored.truncate(expected_valleys + 2);
+        let mut c: Vec<u32> = scored.into_iter().map(|(_, center)| center as u32).collect();
+        c.sort();
+        c
+    } else {
+        centers
+    };
+
+    // 步骤7: 滑窗选最优 expected_valleys 个
+    let selected = select_spaced_valleys(&candidates, expected_cell_size, expected_valleys);
+
+    // 步骤8: 校验间距合理性
+    let min_spacing = (expected_cell_size * 0.5) as u32;
+    let max_spacing = (expected_cell_size * 1.8) as u32;
+    for i in 1..selected.len() {
+        let gap = selected[i] - selected[i - 1];
+        if gap < min_spacing || gap > max_spacing {
+            return Err("谷间距异常");
+        }
+    }
+    // 首尾不能太靠边
+    let min_edge = (expected_cell_size / 3.0) as u32;
+    if selected[0] < min_edge || total_length - selected[selected.len() - 1] < min_edge {
+        return Err("谷太靠近边界");
+    }
+
+    Ok(selected)
+}
+
+/// 谷检测完整流程：计算 density → 谷检测 → 组装边界
+pub(crate) fn detect_cell_grid_valley(
+    pixels: &[u8],
+    width: u32,
+    height: u32,
+    rows: u32,
+    cols: u32,
+) -> Result<AdaptiveCellGrid, &'static str> {
+    let row_density = compute_row_density(pixels, width, height);
+    let col_density = compute_col_density(pixels, width, height);
+
+    let cell_height = (height / rows).max(1) as f32;
+    let cell_width = (width / cols).max(1) as f32;
+
+    let row_splits = refine_boundaries_valley(&row_density, rows, cell_height, height)?;
+    let col_splits = refine_boundaries_valley(&col_density, cols, cell_width, width)?;
+
+    let mut row_boundaries = vec![0u32];
+    row_boundaries.extend(row_splits);
+    row_boundaries.push(height);
+
+    let mut col_boundaries = vec![0u32];
+    col_boundaries.extend(col_splits);
+    col_boundaries.push(width);
+
+    Ok(AdaptiveCellGrid {
+        row_boundaries,
+        col_boundaries,
+        algorithm: AtlasSliceAlgorithm::ValleyDetection,
+    })
+}
+
+// ============================================================================
+// 主入口：自适应切片
+// ============================================================================
+
+/// 使用自适应算法对洋红去背后的图集进行切片。
+///
+/// * `image` - 洋红去背后的图集图片
+/// * `rows` - cell 行数（默认 6）
+/// * `cols` - cell 列数（默认 3）
+/// * `algorithm` - 自适应算法
+pub(crate) fn slice_tile_atlas_adaptive(
+    image: &DownloadedOpenAiImage,
+    rows: u32,
+    cols: u32,
+    algorithm: AtlasSliceAlgorithm,
+) -> Result<Vec<JumpHopTileAtlasSlice>, AppError> {
+    let source = image::load_from_memory(image.bytes.as_slice())
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": JUMP_HOP_CREATION_PROVIDER,
+                "message": format!("跳一跳地板贴图图集解码失败：{error}"),
+            }))
+        })?
+        .to_rgba8();
+    let width = source.width();
+    let height = source.height();
+    let pixels = source.as_raw();
+
+    // 自适应检测 cell 网格
+    let grid = match algorithm {
+        AtlasSliceAlgorithm::SeedRefinement => {
+            detect_cell_grid_seed(pixels, width, height, rows, cols)
+        }
+        AtlasSliceAlgorithm::ValleyDetection => {
+            detect_cell_grid_valley(pixels, width, height, rows, cols)
+                .unwrap_or_else(|_| {
+                    // 谷检测失败时回退到种子点精修
+                    detect_cell_grid_seed(pixels, width, height, rows, cols)
+                })
+        }
+    };
+
+    if grid.row_boundaries.len() != (rows + 1) as usize
+        || grid.col_boundaries.len() != (cols + 1) as usize
+    {
+        return Err(AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": JUMP_HOP_CREATION_PROVIDER,
+            "message": format!(
+                "自适应网格检测结果异常：期望 {}×{}，实际 {}×{}",
+                rows + 1,
+                cols + 1,
+                grid.row_boundaries.len(),
+                grid.col_boundaries.len(),
+            ),
+        })));
+    }
+
+    let tile_count = (rows * cols) as usize;
+    let mut slices = Vec::with_capacity(tile_count);
+    let mut index = 0usize;
+
+    for row in 0..rows {
+        for col in 0..cols {
+            let x0 = grid.col_boundaries[col as usize];
+            let x1 = grid.col_boundaries[col as usize + 1];
+            let y0 = grid.row_boundaries[row as usize];
+            let y1 = grid.row_boundaries[row as usize + 1];
+            let tile_width = x1.saturating_sub(x0).max(1);
+            let tile_height = y1.saturating_sub(y0).max(1);
+
+            let faces = slice_jump_hop_tile_uv_faces_blob(
+                &source,
+                x0,
+                y0,
+                tile_width,
+                tile_height,
+                row,
+                col,
+            )?;
+
+            slices.push(JumpHopTileAtlasSlice {
+                tile_type: jump_hop_tile_type_by_index(index),
+                source_atlas_cell: format!("row-{}-col-{}", row + 1, col + 1),
+                faces,
+            });
+            index += 1;
+        }
+    }
+
+    Ok(slices)
+}
+
+// ============================================================================
+// Cell 内 UV 面提取（与固定网格逻辑相同，接收 cell 边界参数）
+// ============================================================================
+
+fn slice_jump_hop_tile_uv_faces_adaptive(
+    source: &image::RgbaImage,
+    tile_x: u32,
+    tile_y: u32,
+    tile_width: u32,
+    tile_height: u32,
+    atlas_row: u32,
+    atlas_col: u32,
+) -> Result<JumpHopTileFaceSlices, AppError> {
+    let face_side = (tile_width / JUMP_HOP_TILE_UV_FACE_COLS)
+        .min(tile_height / JUMP_HOP_TILE_UV_FACE_ROWS)
+        .max(1);
+    let uv_width = face_side.saturating_mul(JUMP_HOP_TILE_UV_FACE_COLS);
+    let uv_height = face_side.saturating_mul(JUMP_HOP_TILE_UV_FACE_ROWS);
+    let uv_x = tile_x.saturating_add(tile_width.saturating_sub(uv_width) / 2);
+    let uv_y = tile_y.saturating_add(tile_height.saturating_sub(uv_height) / 2);
+
+    Ok(JumpHopTileFaceSlices {
+        top: slice_jump_hop_tile_uv_face_adaptive(
+            source, uv_x, uv_y, face_side, atlas_row, atlas_col, JumpHopTileFaceKey::Top, 1, 0,
+        )?,
+        front: slice_jump_hop_tile_uv_face_adaptive(
+            source, uv_x, uv_y, face_side, atlas_row, atlas_col, JumpHopTileFaceKey::Front, 1, 1,
+        )?,
+        right: slice_jump_hop_tile_uv_face_adaptive(
+            source, uv_x, uv_y, face_side, atlas_row, atlas_col, JumpHopTileFaceKey::Right, 2, 1,
+        )?,
+        back: slice_jump_hop_tile_uv_face_adaptive(
+            source, uv_x, uv_y, face_side, atlas_row, atlas_col, JumpHopTileFaceKey::Back, 3, 1,
+        )?,
+        left: slice_jump_hop_tile_uv_face_adaptive(
+            source, uv_x, uv_y, face_side, atlas_row, atlas_col, JumpHopTileFaceKey::Left, 0, 1,
+        )?,
+        bottom: slice_jump_hop_tile_uv_face_adaptive(
+            source, uv_x, uv_y, face_side, atlas_row, atlas_col, JumpHopTileFaceKey::Bottom, 1, 2,
+        )?,
+    })
+}
+
+#[allow(clippy::too_many_arguments)]
+fn slice_jump_hop_tile_uv_face_adaptive(
+    source: &image::RgbaImage,
+    uv_x: u32,
+    uv_y: u32,
+    face_side: u32,
+    atlas_row: u32,
+    atlas_col: u32,
+    face: JumpHopTileFaceKey,
+    face_col: u32,
+    face_row: u32,
+) -> Result<JumpHopTileFaceSlice, AppError> {
+    let cleaned = crop_jump_hop_tile_texture_cell(
+        source,
+        uv_x.saturating_add(face_col.saturating_mul(face_side)),
+        uv_y.saturating_add(face_row.saturating_mul(face_side)),
+        face_side,
+        face_side,
+    );
+    let mut cursor = std::io::Cursor::new(Vec::new());
+    cleaned
+        .write_to(&mut cursor, image::ImageFormat::Png)
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": JUMP_HOP_CREATION_PROVIDER,
+                "message": format!("跳一跳地板 UV 面贴图切割失败：{error}"),
+            }))
+        })?;
+    let face_label = jump_hop_tile_face_key_label(&face);
+
+    Ok(JumpHopTileFaceSlice {
+        face,
+        source_atlas_cell: format!(
+            "row-{}-col-{}/{}",
+            atlas_row + 1,
+            atlas_col + 1,
+            face_label
+        ),
+        bytes: cursor.into_inner(),
+    })
+}
+
+// ============================================================================
+// Blob + Gradient 驱动 UV 面切分
+//
+// 1. BFS 找主 blob，构造仅含 blob 的 cleaned 图像
+// 2. 行/列 density → 平滑 → gradient → 8 边界
+// 3. 3×3 block → 5 有效块 → Block(1,2) 拆分 → 6 块
+// 4. 每块 max opaque rectangle → 缩放
+// ============================================================================
+
+const BLOB_ALPHA: u8 = 48;
+const MIN_BLOB_AREA: usize = 64;
+const GRAD_SMOOTH: usize = 3;
+
+// ---- 1. BFS 主 blob + 构造 cleaned 图像 ----
+
+fn build_cleaned_tile(
+    source: &image::RgbaImage,
+    tile_x: u32, tile_y: u32, tile_w: u32, tile_h: u32,
+) -> Option<image::RgbaImage> {
+    let pixels = source.as_raw();
+    let sw = source.width() as usize;
+    let stride = sw * 4;
+    let total = (tile_w * tile_h) as usize;
+    let mut visited = vec![false; total];
+    let mut queue = Vec::<usize>::new();
+    let mut best_comp = Vec::<usize>::new();
+
+    let idx = |lx: u32, ly: u32| (ly * tile_w + lx) as usize;
+
+    for sy in 0..tile_h {
+        for sx in 0..tile_w {
+            let si = idx(sx, sy);
+            if visited[si] { continue; }
+            let go = (tile_y as usize + sy as usize) * stride + (tile_x as usize + sx as usize) * 4;
+            if pixels[go + 3] < BLOB_ALPHA { continue; }
+
+            queue.clear();
+            queue.push(si);
+            visited[si] = true;
+            let mut qi = 0;
+            while qi < queue.len() {
+                let cur = queue[qi]; qi += 1;
+                let cx = cur as u32 % tile_w;
+                let cy = cur as u32 / tile_w;
+                for (dx, dy) in [(1i32,0i32),(-1,0),(0,1),(0,-1)] {
+                    let nx = cx as i32 + dx;
+                    let ny = cy as i32 + dy;
+                    if nx < 0 || nx >= tile_w as i32 || ny < 0 || ny >= tile_h as i32 { continue; }
+                    let ni = idx(nx as u32, ny as u32);
+                    if visited[ni] { continue; }
+                    let ngo = (tile_y as usize + ny as usize) * stride + (tile_x as usize + nx as usize) * 4;
+                    if pixels[ngo + 3] >= BLOB_ALPHA {
+                        visited[ni] = true;
+                        queue.push(ni);
+                    }
+                }
+            }
+            let area = queue.len();
+            if area < MIN_BLOB_AREA { continue; }
+            if area > best_comp.len() {
+                best_comp = queue.clone();
+            }
+        }
+    }
+
+    if best_comp.is_empty() { return None; }
+
+    // 构造 cleaned 图像：仅含主 blob
+    let mut cleaned = image::RgbaImage::new(tile_w, tile_h);
+    for &pi in &best_comp {
+        let lx = pi as u32 % tile_w;
+        let ly = pi as u32 / tile_w;
+        let gx = tile_x + lx;
+        let gy = tile_y + ly;
+        let go = (gy as usize * sw + gx as usize) * 4;
+        cleaned.put_pixel(lx, ly, image::Rgba([pixels[go], pixels[go+1], pixels[go+2], pixels[go+3]]));
+    }
+    Some(cleaned)
+}
+
+// ---- 2. density + gradient → 边界 ----
+
+fn smooth_1d(signal: &[f32], window: usize) -> Vec<f32> {
+    if signal.len() <= window { return signal.to_vec(); }
+    let hw = window / 2;
+    (0..signal.len()).map(|i| {
+        let lo = i.saturating_sub(hw);
+        let hi = (i + hw).min(signal.len() - 1);
+        let sum: f32 = signal[lo..=hi].iter().sum();
+        sum / (hi - lo + 1) as f32
+    }).collect()
+}
+
+fn gradient(signal: &[f32]) -> Vec<f32> {
+    if signal.len() < 2 { return vec![]; }
+    (0..signal.len()-1).map(|i| signal[i+1] - signal[i]).collect()
+}
+
+/// 在 gradient 中找最强上升沿 (positive) 和最强下降沿 (negative) 的位置。
+/// 返回 (peak_idx_pos, peak_idx_neg) 中最显著的 4 个位置，按值大小排序。
+struct GradPeak { idx: usize, val: f32 }
+fn find_gradient_peaks(grad: &[f32], count: usize, min_sep: usize) -> Vec<GradPeak> {
+    if grad.len() < 2 { return vec![]; }
+    // 取绝对值后找局部极大
+    let abs_grad: Vec<f32> = grad.iter().map(|&g| g.abs()).collect();
+    let mut peaks: Vec<GradPeak> = (1..abs_grad.len()-1)
+        .filter(|&i| abs_grad[i] > abs_grad[i-1] && abs_grad[i] >= abs_grad[i+1] && abs_grad[i] > 0.0)
+        .map(|i| GradPeak { idx: i, val: grad[i] }) // 保留符号
+        .collect();
+    peaks.sort_by(|a, b| b.val.abs().partial_cmp(&a.val.abs()).unwrap_or(std::cmp::Ordering::Equal));
+    // 去重：间距小于 min_sep 的只保留最大者
+    let mut chosen = Vec::new();
+    for p in peaks {
+        if chosen.iter().all(|c: &GradPeak| (c.idx as isize - p.idx as isize).unsigned_abs() >= min_sep) {
+            chosen.push(p);
+            if chosen.len() >= count { break; }
+        }
+    }
+    chosen
+}
+
+/// 行 density → gradient → y₀,y₁,y₂,y₃
+fn detect_row_boundaries(cleaned: &image::RgbaImage, tile_w: u32, tile_h: u32) -> Option<(u32,u32,u32,u32)> {
+    // 行 density
+    let mut row_density = Vec::with_capacity(tile_h as usize);
+    for y in 0..tile_h {
+        let mut cnt = 0u32;
+        for x in 0..tile_w {
+            if cleaned.get_pixel(x, y).0[3] >= BLOB_ALPHA { cnt += 1; }
+        }
+        row_density.push(cnt as f32 / tile_w as f32);
+    }
+    let smooth = smooth_1d(&row_density, GRAD_SMOOTH);
+    let grad = gradient(&smooth);
+    let peaks = find_gradient_peaks(&grad, 4, 4);
+    if peaks.len() < 2 { return None; }
+
+    // 分离正负
+    let pos: Vec<_> = peaks.iter().filter(|p| p.val > 0.0).collect();
+    let neg: Vec<_> = peaks.iter().filter(|p| p.val < 0.0).collect();
+    if pos.len() < 1 || neg.len() < 1 { return None; }
+
+    // y₁: 最强正峰（窄→宽）; y₂: 最强负峰（宽→窄）
+    let y1 = pos[0].idx as u32;
+    let y2 = neg[0].idx as u32;
+    let y0 = row_density.iter().position(|&d| d > 0.0).unwrap_or(0) as u32;
+    let y3 = (row_density.len() as u32).saturating_sub(
+        1 + row_density.iter().rev().position(|&d| d > 0.0).unwrap_or(0) as u32
+    ) + 1;
+
+    if y1 < y0 + 2 || y2 <= y1 + 6 || y2 > y3.saturating_sub(2) { return None; }
+    Some((y0, y1, y2, y3))
+}
+
+/// 列高度 profile（每列 blob 的首次/末次行）→ gradient → x₀,x₁,x₂,x₃
+fn detect_col_boundaries(cleaned: &image::RgbaImage, tile_w: u32, _tile_h: u32, y0: u32, y3: u32) -> Option<(u32,u32,u32,u32)> {
+    // 每列的 blob 高度
+    let mut col_height = Vec::with_capacity(tile_w as usize);
+    for x in 0..tile_w {
+        let first = (y0..y3).find(|&y| cleaned.get_pixel(x, y).0[3] >= BLOB_ALPHA);
+        let last  = (y0..y3).rev().find(|&y| cleaned.get_pixel(x, y).0[3] >= BLOB_ALPHA);
+        col_height.push(
+            first.map_or(0.0, |f| {
+                let l = last.unwrap_or(f);
+                (l - f + 1) as f32 / (y3 - y0).max(1) as f32
+            })
+        );
+    }
+    let smooth = smooth_1d(&col_height, GRAD_SMOOTH);
+    let grad = gradient(&smooth);
+    let peaks = find_gradient_peaks(&grad, 4, 4);
+    if peaks.len() < 2 { return None; }
+
+    let pos: Vec<_> = peaks.iter().filter(|p| p.val > 0.0).collect();
+    let neg: Vec<_> = peaks.iter().filter(|p| p.val < 0.0).collect();
+    if pos.len() < 1 || neg.len() < 1 { return None; }
+
+    let x1 = pos[0].idx as u32;
+    let x2 = neg[0].idx as u32;
+    let x0 = col_height.iter().position(|&d| d > 0.0).unwrap_or(0) as u32;
+    let x3 = (tile_w as usize).saturating_sub(
+        1 + col_height.iter().rev().position(|&d| d > 0.0).unwrap_or(0)
+    ) as u32 + 1;
+
+    if x1 < x0 + 2 || x2 <= x1 + 6 || x2 > x3.saturating_sub(2) { return None; }
+    Some((x0, x1, x2, x3))
+}
+
+// ---- 3. max opaque rectangle per block ----
+
+/// 在 block 范围内基于 histogram 找最大全不透明矩形。
+fn max_opaque_rect(
+    cleaned: &image::RgbaImage,
+    bx0: u32, by0: u32, bw: u32, bh: u32,
+) -> Option<(u32, u32, u32, u32)> {
+    let mut heights = vec![0u32; bw as usize];
+    let mut best_area = 0u32;
+    let mut best = (0u32, 0u32, 1u32, 1u32);
+
+    for ly in 0..bh {
+        for lx in 0..bw {
+            if cleaned.get_pixel(bx0 + lx, by0 + ly).0[3] >= BLOB_ALPHA {
+                heights[lx as usize] += 1;
+            } else {
+                heights[lx as usize] = 0;
+            }
+        }
+        // histogram max rect
+        let mut stack: Vec<(u32, u32)> = Vec::new(); // (start_x, height)
+        for (x, &h) in heights.iter().enumerate() {
+            let x = x as u32;
+            let mut start = x;
+            while stack.last().map_or(false, |&(_, sh)| sh > h) {
+                let (sx, sh) = stack.pop().unwrap();
+                let area = sh * (x - sx);
+                if area > best_area {
+                    best_area = area;
+                    let top = by0 + ly.saturating_add(1).saturating_sub(sh);
+                    best = (bx0 + sx, top, x - sx, sh);
+                }
+                start = sx;
+            }
+            if h > 0 && stack.last().map_or(true, |&(_, sh)| h > sh) {
+                stack.push((start, h));
+            }
+        }
+        let x = bw;
+        while let Some((sx, sh)) = stack.pop() {
+            let area = sh * (x - sx);
+            if area > best_area {
+                best_area = area;
+                let top = by0 + ly.saturating_add(1).saturating_sub(sh);
+                best = (bx0 + sx, top, x - sx, sh);
+            }
+        }
+    }
+    if best_area == 0 { None } else { Some(best) }
+}
+
+#[cfg(test)]
+mod tests {
+    use image::{Rgba, RgbaImage};
+
+    use super::max_opaque_rect;
+
+    #[test]
+    fn max_opaque_rect_handles_content_touching_top_edge() {
+        let mut image = RgbaImage::from_pixel(4, 3, Rgba([0, 0, 0, 0]));
+        for y in 0..2 {
+            for x in 0..3 {
+                image.put_pixel(x, y, Rgba([255, 255, 255, 255]));
+            }
+        }
+
+        let rect = max_opaque_rect(&image, 0, 0, 4, 3).expect("应该能识别贴顶矩形");
+
+        assert_eq!(rect, (0, 0, 3, 2));
+    }
+}
+
+// ---- 4. 主编排 ----
+
+fn slice_jump_hop_tile_uv_faces_blob(
+    source: &image::RgbaImage,
+    tile_x: u32, tile_y: u32, tile_w: u32, tile_h: u32,
+    atlas_row: u32, atlas_col: u32,
+) -> Result<JumpHopTileFaceSlices, AppError> {
+    let fallback = || {
+        slice_jump_hop_tile_uv_faces_adaptive(source, tile_x, tile_y, tile_w, tile_h, atlas_row, atlas_col)
+    };
+
+    // Step 1: BFS 主 blob → cleaned 图像
+    let cleaned = match build_cleaned_tile(source, tile_x, tile_y, tile_w, tile_h) {
+        Some(c) => c,
+        None => return fallback(),
+    };
+
+    // Step 2: gradient 边界检测
+    let (y0, y1, y2, y3) = match detect_row_boundaries(&cleaned, tile_w, tile_h) {
+        Some(v) => v,
+        None => return fallback(),
+    };
+    let (x0, x1, x2, x3) = match detect_col_boundaries(&cleaned, tile_w, tile_h, y0, y3) {
+        Some(v) => v,
+        None => return fallback(),
+    };
+
+    // Step 3: 3×3 block → 5 有效块 + Block(1,2) 拆分 → 6 块
+    // blocks: (row, col): 0=Top, 1,0=Left, 1,1=Front, 1,2=Right+Back, 2=Bottom
+    let blocks: [(u32,u32,u32,u32); 5] = [
+        (x1, y0, x2 - x1, y1 - y0),              // Top
+        (x0, y1, x1 - x0, y2 - y1),              // Left
+        (x1, y1, x2 - x1, y2 - y1),              // Front
+        (x2, y1, x3 - x2, y2 - y1),              // Right+Back
+        (x1, y2, x2 - x1, y3 - y2),              // Bottom
+    ];
+
+    // Step 4: max opaque rectangle per block
+    let rect = |b: (u32,u32,u32,u32), name: &str| -> Result<(u32,u32,u32,u32), AppError> {
+        max_opaque_rect(&cleaned, b.0, b.1, b.2, b.3).ok_or_else(|| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": JUMP_HOP_CREATION_PROVIDER,
+                "message": format!("blob gradient: {name} 面无有效内容"),
+            }))
+        })
+    };
+
+    let top    = rect(blocks[0], "Top")?;
+    let left   = rect(blocks[1], "Left")?;
+    let front  = rect(blocks[2], "Front")?;
+    // Right+Back → 从中点拆分
+    let (rb_x0, rb_y0, rb_w, rb_h) = blocks[3];
+    let mid = rb_x0 + rb_w / 2;
+    let right_rect = rect((rb_x0, rb_y0, mid - rb_x0, rb_h), "Right")?;
+    let back_rect  = rect((mid, rb_y0, rb_x0 + rb_w - mid, rb_h), "Back")?;
+    let bottom = rect(blocks[4], "Bottom")?;
+
+    // Step 5: crop (tile_local → global)
+    let global = |r: (u32,u32,u32,u32)| (tile_x + r.0, tile_y + r.1, r.2, r.3);
+
+    let mk = |r: (u32,u32,u32,u32), face: JumpHopTileFaceKey| -> Result<JumpHopTileFaceSlice, AppError> {
+        let (gx, gy, gw, gh) = global(r);
+        let cleaned_dyn = crop_jump_hop_tile_texture_cell(source, gx, gy, gw, gh);
+        let mut cursor = std::io::Cursor::new(Vec::new());
+        cleaned_dyn.write_to(&mut cursor, image::ImageFormat::Png).map_err(|e| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": JUMP_HOP_CREATION_PROVIDER,
+                "message": format!("跳一跳地板 UV 面贴图切割失败：{e}"),
+            }))
+        })?;
+        let label = jump_hop_tile_face_key_label(&face);
+        Ok(JumpHopTileFaceSlice {
+            face,
+            source_atlas_cell: format!("row-{}-col-{}/{}", atlas_row + 1, atlas_col + 1, label),
+            bytes: cursor.into_inner(),
+        })
+    };
+
+    Ok(JumpHopTileFaceSlices {
+        top:    mk(top,    JumpHopTileFaceKey::Top)?,
+        left:   mk(left,   JumpHopTileFaceKey::Left)?,
+        front:  mk(front,  JumpHopTileFaceKey::Front)?,
+        right:  mk(right_rect, JumpHopTileFaceKey::Right)?,
+        back:   mk(back_rect,  JumpHopTileFaceKey::Back)?,
+        bottom: mk(bottom, JumpHopTileFaceKey::Bottom)?,
+    })
+}
diff --git a/server-rs/crates/api-server/src/main.rs b/server-rs/crates/api-server/src/main.rs
index 529060bb9..307e7b761 100644
--- a/server-rs/crates/api-server/src/main.rs
+++ b/server-rs/crates/api-server/src/main.rs
@@ -38,6 +38,7 @@ mod custom_world_result_prompts;
 mod custom_world_rpg_draft_prompts;
 mod editor_generation_config;
 mod editor_generation_queue;
+mod editor_green_screen;
 mod editor_project;
 mod edutainment_baby_drawing;
 mod edutainment_baby_object;
@@ -56,6 +57,7 @@ mod health;
 mod http_error;
 mod hyper3d_generation;
 mod jump_hop;
+mod jump_hop_atlas_slicing;
 mod llm;
 mod llm_model_routing;
 mod login_options;
diff --git a/server-rs/crates/api-server/src/modules/admin.rs b/server-rs/crates/api-server/src/modules/admin.rs
index 0c8ee2748..5f4c5558e 100644
--- a/server-rs/crates/api-server/src/modules/admin.rs
+++ b/server-rs/crates/api-server/src/modules/admin.rs
@@ -7,11 +7,11 @@ use crate::{
     admin::{
         admin_dashboard, admin_debug_http, admin_get_creation_entry_config,
         admin_get_editor_generation_pricing, admin_list_database_table_rows,
-        admin_list_database_tables, admin_list_tracking_events, admin_list_work_visibility,
-        admin_login, admin_me, admin_overview, admin_update_work_visibility,
-        admin_upsert_creation_entry_config, admin_upsert_creation_entry_event_banners_config,
-        admin_upsert_editor_generation_pricing, admin_upsert_public_work_interaction_config,
-        require_admin_auth,
+        admin_list_database_tables, admin_list_tracking_event_keys, admin_list_tracking_events,
+        admin_list_work_visibility, admin_login, admin_me, admin_overview,
+        admin_update_work_visibility, admin_upsert_creation_entry_config,
+        admin_upsert_creation_entry_event_banners_config, admin_upsert_editor_generation_pricing,
+        admin_upsert_public_work_interaction_config, require_admin_auth,
     },
     runtime_profile::{
         admin_disable_profile_redeem_code, admin_disable_profile_task_config,
@@ -62,6 +62,13 @@ pub fn router(state: AppState) -> Router<AppState> {
                 require_admin_auth,
             )),
         )
+        .route(
+            "/admin/api/tracking/event-keys",
+            get(admin_list_tracking_event_keys).route_layer(middleware::from_fn_with_state(
+                state.clone(),
+                require_admin_auth,
+            )),
+        )
         .route(
             "/admin/api/database/tables",
             get(admin_list_database_tables).route_layer(middleware::from_fn_with_state(
diff --git a/server-rs/crates/api-server/src/modules/editor_project.rs b/server-rs/crates/api-server/src/modules/editor_project.rs
index 2969c40b3..977c27b4b 100644
--- a/server-rs/crates/api-server/src/modules/editor_project.rs
+++ b/server-rs/crates/api-server/src/modules/editor_project.rs
@@ -13,9 +13,9 @@ use crate::{
         delete_editor_project, edit_editor_image, extract_editor_ui_design_assets,
         generate_editor_icon_spritesheet, generate_editor_image, get_editor_asset_library,
         get_editor_generation_pricing, get_editor_project, list_editor_projects,
-        list_public_editor_project_resources, load_recent_editor_project, rename_editor_project,
-        save_editor_project_layout, update_editor_asset, update_editor_asset_folder,
-        update_editor_project_resource_showcase,
+        list_public_editor_project_resources, load_recent_editor_project,
+        remove_editor_image_background, rename_editor_project, save_editor_project_layout,
+        update_editor_asset, update_editor_asset_folder, update_editor_project_resource_showcase,
     },
     state::AppState,
 };
@@ -131,10 +131,25 @@ pub fn router(state: AppState) -> Router<AppState> {
         )
         .route(
             "/api/editor/images/edits",
-            post(edit_editor_image).route_layer(middleware::from_fn_with_state(
-                state.clone(),
-                require_bearer_auth,
-            )),
+            post(edit_editor_image)
+                .layer(DefaultBodyLimit::max(
+                    EDITOR_IMAGE_REFERENCE_BODY_LIMIT_BYTES,
+                ))
+                .route_layer(middleware::from_fn_with_state(
+                    state.clone(),
+                    require_bearer_auth,
+                )),
+        )
+        .route(
+            "/api/editor/images/background-removals",
+            post(remove_editor_image_background)
+                .layer(DefaultBodyLimit::max(
+                    EDITOR_IMAGE_REFERENCE_BODY_LIMIT_BYTES,
+                ))
+                .route_layer(middleware::from_fn_with_state(
+                    state.clone(),
+                    require_bearer_auth,
+                )),
         )
         .route(
             "/api/editor/icon-spritesheets/generations",
diff --git a/server-rs/crates/api-server/src/public_work.rs b/server-rs/crates/api-server/src/public_work.rs
index d46059feb..4c8a8650e 100644
--- a/server-rs/crates/api-server/src/public_work.rs
+++ b/server-rs/crates/api-server/src/public_work.rs
@@ -133,7 +133,7 @@ fn map_public_work_client_error(error: SpacetimeClientError) -> AppError {
         {
             StatusCode::NOT_FOUND
         }
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
         _ => StatusCode::BAD_GATEWAY,
     };
diff --git a/server-rs/crates/api-server/src/puzzle/tags.rs b/server-rs/crates/api-server/src/puzzle/tags.rs
index c6ce0693b..78509b157 100644
--- a/server-rs/crates/api-server/src/puzzle/tags.rs
+++ b/server-rs/crates/api-server/src/puzzle/tags.rs
@@ -382,7 +382,7 @@ pub(super) fn puzzle_bad_request(
 pub(super) fn map_puzzle_client_error(error: SpacetimeClientError) -> AppError {
     let status = match &error {
         SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         error if should_skip_asset_operation_billing_for_connectivity(error) => {
             StatusCode::SERVICE_UNAVAILABLE
         }
@@ -450,7 +450,7 @@ pub(super) fn map_puzzle_compile_error(error: SpacetimeClientError) -> AppError
         StatusCode::SERVICE_UNAVAILABLE
     } else if matches!(
         error,
-        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout
+        SpacetimeClientError::ConnectDropped | SpacetimeClientError::Timeout(_)
     ) || should_skip_asset_operation_billing_for_connectivity(&error)
     {
         StatusCode::SERVICE_UNAVAILABLE
@@ -485,7 +485,7 @@ pub(super) fn map_puzzle_compile_error(error: SpacetimeClientError) -> AppError
                 StatusCode::BAD_GATEWAY
             }
             SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
-            SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+            SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
             SpacetimeClientError::Runtime(_) => StatusCode::BAD_REQUEST,
             _ => StatusCode::BAD_GATEWAY,
         }
diff --git a/server-rs/crates/api-server/src/state.rs b/server-rs/crates/api-server/src/state.rs
index 8798c8916..1752ceceb 100644
--- a/server-rs/crates/api-server/src/state.rs
+++ b/server-rs/crates/api-server/src/state.rs
@@ -1604,6 +1604,7 @@ fn is_missing_creation_entry_config_procedure(error: &SpacetimeClientError) -> b
 #[cfg(test)]
 mod tests {
     use module_ai::{AiTaskKind, generate_ai_task_id};
+    use spacetime_client::SpacetimeClientStage;
 
     use super::*;
 
@@ -1618,7 +1619,7 @@ mod tests {
             &SpacetimeClientError::Procedure("No such procedure".to_string()),
         ));
         assert!(!is_missing_creation_entry_config_procedure(
-            &SpacetimeClientError::Timeout,
+            &SpacetimeClientError::Timeout(SpacetimeClientStage::ProcedureResult),
         ));
     }
 
diff --git a/server-rs/crates/api-server/src/visual_novel.rs b/server-rs/crates/api-server/src/visual_novel.rs
index d97ffea09..7f7469c99 100644
--- a/server-rs/crates/api-server/src/visual_novel.rs
+++ b/server-rs/crates/api-server/src/visual_novel.rs
@@ -1455,7 +1455,7 @@ fn map_spacetime_error(error: SpacetimeClientError) -> AppError {
         {
             StatusCode::FORBIDDEN
         }
-        SpacetimeClientError::Timeout => StatusCode::GATEWAY_TIMEOUT,
+        SpacetimeClientError::Timeout(_) => StatusCode::GATEWAY_TIMEOUT,
         SpacetimeClientError::ConnectDropped => StatusCode::SERVICE_UNAVAILABLE,
         _ => StatusCode::BAD_GATEWAY,
     };
diff --git a/server-rs/crates/module-jump-hop/src/application.rs b/server-rs/crates/module-jump-hop/src/application.rs
index bce39499a..6f9b7243a 100644
--- a/server-rs/crates/module-jump-hop/src/application.rs
+++ b/server-rs/crates/module-jump-hop/src/application.rs
@@ -7,8 +7,9 @@ use crate::{
 
 const JUMP_HOP_PLATFORM_SIZE_MULTIPLIER: f32 = 2.0;
 const JUMP_HOP_CHARGE_TO_DISTANCE_RATIO: f32 = 0.004;
-const JUMP_HOP_TOP_FACE_HITBOX_WIDTH_RATIO: f32 = 0.72;
-const JUMP_HOP_TOP_FACE_HITBOX_HEIGHT_RATIO: f32 = 0.52;
+// 中文注释：命中区必须与视觉顶面一致，禁止再做隐藏收缩。
+const JUMP_HOP_TOP_FACE_HITBOX_WIDTH_RATIO: f32 = 1.0;
+const JUMP_HOP_TOP_FACE_HITBOX_HEIGHT_RATIO: f32 = 1.0;
 
 pub fn generate_jump_hop_path(seed: &str, difficulty: JumpHopDifficulty) -> JumpHopPath {
     let config = difficulty_config(difficulty);
@@ -64,8 +65,8 @@ pub fn start_run(
 pub fn apply_jump(
     run: &JumpHopRunSnapshot,
     drag_distance: f32,
-    drag_vector_x: Option<f32>,
-    drag_vector_y: Option<f32>,
+    _drag_vector_x: Option<f32>,
+    _drag_vector_y: Option<f32>,
     jumped_at_ms: u64,
 ) -> Result<JumpHopRunSnapshot, JumpHopError> {
     if run.status != JumpHopRunStatus::Playing {
@@ -85,17 +86,15 @@ pub fn apply_jump(
         .ok_or(JumpHopError::NoNextPlatform)?;
     let capped_drag_distance = drag_distance.clamp(0.0, run.path.scoring.max_charge_ms as f32);
     let jump_distance = capped_drag_distance * run.path.scoring.charge_to_distance_ratio;
-    let vector_x = target.x - current.x;
-    let vector_y = target.y - current.y;
+    let (origin_x, origin_y) = current_jump_origin(run, current);
+    let vector_x = target.x - origin_x;
+    let vector_y = target.y - origin_y;
     let target_distance = vector_x.hypot(vector_y).max(0.0001);
-    let (unit_x, unit_y) = normalize_jump_direction(
-        drag_vector_x,
-        drag_vector_y,
-        vector_x / target_distance,
-        vector_y / target_distance,
-    );
-    let landed_x = current.x + unit_x * jump_distance;
-    let landed_y = current.y + unit_y * jump_distance;
+    // 中文注释：规则真相只认角色当前脚点到下一块顶面中心，拖拽方向不参与裁决。
+    let unit_x = vector_x / target_distance;
+    let unit_y = vector_y / target_distance;
+    let landed_x = origin_x + unit_x * jump_distance;
+    let landed_y = origin_y + unit_y * jump_distance;
     let landed_on_target = is_landing_inside_platform_footprint(target, landed_x, landed_y);
 
     let mut next = run.clone();
@@ -129,6 +128,22 @@ pub fn apply_jump(
     Ok(next)
 }
 
+fn current_jump_origin(run: &JumpHopRunSnapshot, current: &JumpHopPlatform) -> (f32, f32) {
+    if let Some(last_jump) = &run.last_jump {
+        let landed_on_current = last_jump.target_platform_index == run.current_platform_index;
+        let is_successful = last_jump.result != JumpHopJumpResultKind::Miss;
+        if landed_on_current
+            && is_successful
+            && last_jump.landed_x.is_finite()
+            && last_jump.landed_y.is_finite()
+        {
+            return (last_jump.landed_x, last_jump.landed_y);
+        }
+    }
+
+    (current.x, current.y)
+}
+
 fn is_landing_inside_platform_footprint(
     platform: &JumpHopPlatform,
     landed_x: f32,
@@ -136,33 +151,13 @@ fn is_landing_inside_platform_footprint(
 ) -> bool {
     let half_width = (platform.width * 0.5 * JUMP_HOP_TOP_FACE_HITBOX_WIDTH_RATIO).max(0.0);
     let half_height = (platform.height * 0.5 * JUMP_HOP_TOP_FACE_HITBOX_HEIGHT_RATIO).max(0.0);
+    if half_width <= f32::EPSILON || half_height <= f32::EPSILON {
+        return false;
+    }
     let error_x = landed_x - platform.x;
     let error_y = landed_y - platform.y;
 
-    error_x.abs() <= half_width && error_y.abs() <= half_height
-}
-
-fn normalize_jump_direction(
-    drag_vector_x: Option<f32>,
-    drag_vector_y: Option<f32>,
-    fallback_x: f32,
-    fallback_y: f32,
-) -> (f32, f32) {
-    let Some(drag_x) = drag_vector_x.filter(|value| value.is_finite()) else {
-        return (fallback_x, fallback_y);
-    };
-    let Some(drag_y) = drag_vector_y.filter(|value| value.is_finite()) else {
-        return (fallback_x, fallback_y);
-    };
-    // 前端提交屏幕拖拽向量：x 轴同向，y 轴向下为正；真实起跳反向弹出，世界 y 向上为正。
-    let jump_x = -drag_x;
-    let jump_y = drag_y;
-    let length = jump_x.hypot(jump_y);
-    if length < 0.0001 {
-        (fallback_x, fallback_y)
-    } else {
-        (jump_x / length, jump_y / length)
-    }
+    error_x.abs() / half_width + error_y.abs() / half_height <= 1.0 + f32::EPSILON
 }
 
 pub fn restart_run(
@@ -214,6 +209,8 @@ struct DifficultyConfig {
     max_charge_ms: u32,
 }
 
+const JUMP_HOP_MIN_GAP_RATIO_OF_MAX: f32 = 0.55;
+
 fn build_platforms_until(
     seed: &str,
     difficulty: JumpHopDifficulty,
@@ -229,9 +226,8 @@ fn build_platforms_until(
         if index + 1 < required_count {
             let mut rng = DeterministicRng::new(seed, &format!("{}:{index}", difficulty.as_str()));
             let distance = rng.range_f32(config.min_gap, config.max_gap);
-            let lane = rng.range_f32(0.42, 0.86);
             let direction = if rng.next_u32() % 2 == 0 { 1.0 } else { -1.0 };
-            x += distance * lane * direction;
+            x += distance * direction;
             y += distance;
         }
     }
@@ -290,7 +286,7 @@ fn extend_jump_hop_path(mut path: JumpHopPath, required_count: usize) -> JumpHop
 fn difficulty_config(difficulty: JumpHopDifficulty) -> DifficultyConfig {
     match difficulty {
         JumpHopDifficulty::Easy => DifficultyConfig {
-            min_gap: 1.0,
+            min_gap: 1.45 * JUMP_HOP_MIN_GAP_RATIO_OF_MAX,
             max_gap: 1.45,
             min_width: 0.9,
             max_width: 1.08,
@@ -300,7 +296,7 @@ fn difficulty_config(difficulty: JumpHopDifficulty) -> DifficultyConfig {
             max_charge_ms: 700,
         },
         JumpHopDifficulty::Standard => DifficultyConfig {
-            min_gap: 1.22,
+            min_gap: 1.78 * JUMP_HOP_MIN_GAP_RATIO_OF_MAX,
             max_gap: 1.78,
             min_width: 0.82,
             max_width: 1.0,
@@ -310,7 +306,7 @@ fn difficulty_config(difficulty: JumpHopDifficulty) -> DifficultyConfig {
             max_charge_ms: 780,
         },
         JumpHopDifficulty::Advanced => DifficultyConfig {
-            min_gap: 1.45,
+            min_gap: 2.05 * JUMP_HOP_MIN_GAP_RATIO_OF_MAX,
             max_gap: 2.05,
             min_width: 0.72,
             max_width: 0.94,
@@ -320,7 +316,7 @@ fn difficulty_config(difficulty: JumpHopDifficulty) -> DifficultyConfig {
             max_charge_ms: 860,
         },
         JumpHopDifficulty::Challenge => DifficultyConfig {
-            min_gap: 1.7,
+            min_gap: 2.35 * JUMP_HOP_MIN_GAP_RATIO_OF_MAX,
             max_gap: 2.35,
             min_width: 0.66,
             max_width: 0.88,
@@ -383,6 +379,89 @@ mod tests {
         assert_eq!(first.finish_index, u32::MAX);
     }
 
+    #[test]
+    fn generated_platforms_are_locked_to_positive_or_negative_45_degree_lanes() {
+        for difficulty in [
+            JumpHopDifficulty::Easy,
+            JumpHopDifficulty::Standard,
+            JumpHopDifficulty::Advanced,
+            JumpHopDifficulty::Challenge,
+        ] {
+            let path = generate_jump_hop_path("seed-45-degree", difficulty);
+
+            for pair in path.platforms.windows(2) {
+                let current = &pair[0];
+                let next = &pair[1];
+                let dx = next.x - current.x;
+                let dy = next.y - current.y;
+
+                assert!(
+                    dy > 0.0,
+                    "next platform should always move forward for {difficulty:?}",
+                );
+                assert!(
+                    (dx.abs() - dy).abs() < 0.0001,
+                    "next platform should stay on a 45 degree lane for {difficulty:?}: dx={dx}, dy={dy}",
+                );
+            }
+        }
+    }
+
+    #[test]
+    fn generated_platform_gaps_use_current_spacing_as_max_and_nonzero_min() {
+        for difficulty in [
+            JumpHopDifficulty::Easy,
+            JumpHopDifficulty::Standard,
+            JumpHopDifficulty::Advanced,
+            JumpHopDifficulty::Challenge,
+        ] {
+            let config = super::difficulty_config(difficulty);
+            let path = generate_jump_hop_path("seed-random-gap-range", difficulty);
+
+            for pair in path.platforms.windows(2) {
+                let current = &pair[0];
+                let next = &pair[1];
+                let gap = next.y - current.y;
+
+                assert!(
+                    gap >= config.max_gap * super::JUMP_HOP_MIN_GAP_RATIO_OF_MAX - 0.0001,
+                    "gap should keep a non-zero minimum for {difficulty:?}: gap={gap}, max={}",
+                    config.max_gap,
+                );
+                assert!(
+                    gap <= config.max_gap + 0.0001,
+                    "gap should not exceed the current max spacing for {difficulty:?}: gap={gap}, max={}",
+                    config.max_gap,
+                );
+            }
+        }
+    }
+
+    #[test]
+    fn generated_platform_centers_are_reachable_within_charge_window() {
+        for difficulty in [
+            JumpHopDifficulty::Easy,
+            JumpHopDifficulty::Standard,
+            JumpHopDifficulty::Advanced,
+            JumpHopDifficulty::Challenge,
+        ] {
+            let path = generate_jump_hop_path("seed-reachable-centers", difficulty);
+
+            for pair in path.platforms.windows(2) {
+                let current = &pair[0];
+                let next = &pair[1];
+                let distance = (next.x - current.x).hypot(next.y - current.y);
+                let required_charge = distance / path.scoring.charge_to_distance_ratio;
+
+                assert!(
+                    required_charge <= path.scoring.max_charge_ms as f32,
+                    "next platform center must be reachable for {difficulty:?}: required={required_charge}, max={}",
+                    path.scoring.max_charge_ms,
+                );
+            }
+        }
+    }
+
     #[test]
     fn difficulty_charge_to_distance_ratio_is_reduced_for_long_press() {
         let easy = generate_jump_hop_path("seed-ratio-easy", JumpHopDifficulty::Easy);
@@ -477,7 +556,7 @@ mod tests {
     }
 
     #[test]
-    fn jump_resolution_uses_client_drag_direction_for_landing() {
+    fn jump_resolution_ignores_client_drag_direction_and_targets_next_center() {
         let path = generate_jump_hop_path("seed-screen-axis", JumpHopDifficulty::Easy);
         let run = start_run(
             "run-screen-axis".to_string(),
@@ -495,11 +574,12 @@ mod tests {
         let result = apply_jump(&run, charge as f32, Some(999.0), Some(-999.0), 200)
             .expect("jump should resolve");
 
-        assert_eq!(result.status, JumpHopRunStatus::Failed);
+        assert_eq!(result.status, JumpHopRunStatus::Playing);
         assert_eq!(
             result.last_jump.as_ref().unwrap().result,
-            JumpHopJumpResultKind::Miss
+            JumpHopJumpResultKind::Hit
         );
+        assert_eq!(result.current_platform_index, 1);
     }
 
     #[test]
@@ -528,11 +608,52 @@ mod tests {
         assert!((last_jump.landed_y - target.y).abs() < target.landing_radius);
     }
 
+    #[test]
+    fn jump_resolution_uses_previous_landing_point_as_next_origin() {
+        let mut path = generate_jump_hop_path("seed-foot-origin", JumpHopDifficulty::Easy);
+        path.platforms[0] = test_platform("p0", 0.0, 0.0, 2.0, 2.0);
+        path.platforms[1] = test_platform("p1", 1.0, 0.0, 2.0, 2.0);
+        path.platforms[2] = test_platform("p2", 2.0, 1.0, 2.0, 2.0);
+        let run = start_run(
+            "run-foot-origin".to_string(),
+            "user-foot-origin".to_string(),
+            "profile-foot-origin".to_string(),
+            path,
+            100,
+        )
+        .expect("run should start");
+
+        let first_charge = 0.9 / run.path.scoring.charge_to_distance_ratio;
+        let first =
+            apply_jump(&run, first_charge, None, None, 200).expect("first jump should resolve");
+        let first_jump = first.last_jump.as_ref().expect("first jump should exist");
+        assert_eq!(first.status, JumpHopRunStatus::Playing);
+        assert_eq!(first.current_platform_index, 1);
+        assert_eq!(first_jump.result, JumpHopJumpResultKind::Hit);
+        assert!((first_jump.landed_x - 0.9).abs() < 0.0001);
+
+        let target = &first.path.platforms[2];
+        let second_origin = first.last_jump.as_ref().expect("origin should exist");
+        let second_distance =
+            (target.x - second_origin.landed_x).hypot(target.y - second_origin.landed_y);
+        let second_charge = second_distance / first.path.scoring.charge_to_distance_ratio;
+        let second =
+            apply_jump(&first, second_charge, None, None, 300).expect("second jump should resolve");
+        let second_jump = second.last_jump.as_ref().expect("second jump should exist");
+
+        assert_eq!(second.status, JumpHopRunStatus::Playing);
+        assert_eq!(second.current_platform_index, 2);
+        assert_eq!(second_jump.result, JumpHopJumpResultKind::Hit);
+        assert!((second_jump.landed_x - target.x).abs() < 0.0001);
+        assert!((second_jump.landed_y - target.y).abs() < 0.0001);
+    }
+
     #[test]
     fn jump_resolution_uses_visual_top_face_footprint_instead_of_landing_radius() {
         let mut path = generate_jump_hop_path("seed-footprint", JumpHopDifficulty::Easy);
         path.platforms[0] = test_platform("p0", 0.0, 0.0, 1.2, 1.0);
         path.platforms[1] = test_platform("p1", 1.0, 0.0, 2.0, 0.6);
+        path.platforms[1].landing_radius = 10.0;
         path.scoring.max_charge_ms = 600;
         let run = start_run(
             "run-footprint".to_string(),
@@ -543,16 +664,16 @@ mod tests {
         )
         .expect("run should start");
 
-        let edge_hit_charge = 1.6 / run.path.scoring.charge_to_distance_ratio;
+        let edge_hit_charge = 1.99 / run.path.scoring.charge_to_distance_ratio;
         let edge_hit =
             apply_jump(&run, edge_hit_charge, None, None, 200).expect("jump should resolve");
         let last_hit = edge_hit.last_jump.as_ref().expect("last jump should exist");
         assert_eq!(edge_hit.status, JumpHopRunStatus::Playing);
         assert_eq!(last_hit.result, JumpHopJumpResultKind::Hit);
-        assert!(last_hit.landed_x > 1.5);
-        assert!(last_hit.landed_x <= 1.72);
+        assert!(last_hit.landed_x > 1.98);
+        assert!(last_hit.landed_x <= 2.0);
 
-        let outside_charge = 1.8 / run.path.scoring.charge_to_distance_ratio;
+        let outside_charge = 2.01 / run.path.scoring.charge_to_distance_ratio;
         let outside =
             apply_jump(&run, outside_charge, None, None, 200).expect("jump should resolve");
         assert_eq!(outside.status, JumpHopRunStatus::Failed);
@@ -562,6 +683,33 @@ mod tests {
         );
     }
 
+    #[test]
+    fn top_face_footprint_rejects_rectangle_corners_outside_visible_top() {
+        let platform = test_platform("p-corner", 0.0, 0.0, 2.0, 2.0);
+
+        assert!(super::is_landing_inside_platform_footprint(
+            &platform, 0.5, 0.5,
+        ));
+        assert!(!super::is_landing_inside_platform_footprint(
+            &platform, 0.7, 0.5,
+        ));
+        assert!(super::is_landing_inside_platform_footprint(
+            &test_platform("p-diagonal", 0.8, 1.2, 2.0, 2.0),
+            1.3,
+            1.6,
+        ));
+        assert!(!super::is_landing_inside_platform_footprint(
+            &test_platform("p-diagonal-outside", 0.8, 1.2, 2.0, 2.0),
+            1.4,
+            1.8,
+        ));
+        assert!(super::is_landing_inside_platform_footprint(
+            &test_platform("p-side", 0.8, 1.2, 2.0, 2.0),
+            -0.19,
+            1.2,
+        ));
+    }
+
     #[test]
     fn restart_returns_to_first_platform_and_playing_state() {
         let path = generate_jump_hop_path("seed-c", JumpHopDifficulty::Easy);
diff --git a/server-rs/crates/platform-audio/src/download.rs b/server-rs/crates/platform-audio/src/download.rs
index 4aceda4a7..0c252f756 100644
--- a/server-rs/crates/platform-audio/src/download.rs
+++ b/server-rs/crates/platform-audio/src/download.rs
@@ -1,9 +1,12 @@
-use std::error::Error;
+use std::{error::Error, time::Duration};
 
 use reqwest::header;
 
 use crate::{AudioError, DownloadedAudio, MAX_GENERATED_AUDIO_BYTES};
 
+const GENERATED_AUDIO_DOWNLOAD_MAX_ATTEMPTS: u32 = 2;
+const GENERATED_AUDIO_DOWNLOAD_RETRY_DELAY_MS: u64 = 300;
+
 pub fn normalize_audio_mime_type(content_type: &str, audio_url: &str) -> String {
     let mime_type = content_type
         .split(';')
@@ -38,21 +41,70 @@ pub fn audio_mime_to_extension(mime_type: &str) -> &'static str {
 pub async fn download_generated_audio(
     http_client: &reqwest::Client,
     audio_url: &str,
-    _provider: &str,
+    provider: &str,
 ) -> Result<DownloadedAudio, AudioError> {
-    let response = http_client.get(audio_url).send().await.map_err(|error| {
-        AudioError::request(
-            format!("下载生成音频失败：{error}"),
-            Some(audio_url.to_string()),
-            error.is_timeout(),
-            error.is_connect(),
-            error.is_request(),
-            error.is_body(),
-            error.status().map(|status| status.as_u16()),
-            Error::source(&error).map(ToString::to_string),
-        )
-    })?;
+    let mut latest_error = None;
+    for attempt in 1..=GENERATED_AUDIO_DOWNLOAD_MAX_ATTEMPTS {
+        match download_generated_audio_once(http_client, audio_url).await {
+            Ok(audio) => return Ok(audio),
+            Err(error) if should_retry_generated_audio_download(&error, attempt) => {
+                tracing::warn!(
+                    provider,
+                    endpoint = audio_url,
+                    attempt,
+                    max_attempts = GENERATED_AUDIO_DOWNLOAD_MAX_ATTEMPTS,
+                    error = %error,
+                    "读取生成音频内容失败，准备重试"
+                );
+                latest_error = Some(error);
+                tokio::time::sleep(Duration::from_millis(
+                    GENERATED_AUDIO_DOWNLOAD_RETRY_DELAY_MS,
+                ))
+                .await;
+            }
+            Err(error) => return Err(error),
+        }
+    }
+
+    Err(latest_error.unwrap_or_else(|| AudioError::missing_audio("生成音频下载失败")))
+}
+
+async fn download_generated_audio_once(
+    http_client: &reqwest::Client,
+    audio_url: &str,
+) -> Result<DownloadedAudio, AudioError> {
+    let response = http_client
+        .get(audio_url)
+        .header(header::ACCEPT, "audio/*,*/*")
+        .header(header::ACCEPT_ENCODING, "identity")
+        .send()
+        .await
+        .map_err(|error| {
+            AudioError::request(
+                format!("下载生成音频失败：{error}"),
+                Some(audio_url.to_string()),
+                error.is_timeout(),
+                error.is_connect(),
+                error.is_request(),
+                error.is_body(),
+                error.status().map(|status| status.as_u16()),
+                Error::source(&error).map(ToString::to_string),
+            )
+        })?;
     let status = response.status();
+    if !status.is_success() {
+        let raw_excerpt = response
+            .text()
+            .await
+            .map(|body| truncate_raw(body.as_str()))
+            .unwrap_or_default();
+        return Err(AudioError::upstream(
+            format!("下载生成音频失败：HTTP {}", status.as_u16()),
+            status.as_u16(),
+            raw_excerpt,
+        ));
+    }
+
     let content_type = response
         .headers()
         .get(header::CONTENT_TYPE)
@@ -67,17 +119,10 @@ pub async fn download_generated_audio(
             false,
             false,
             true,
-            None,
-            None,
+            Some(status.as_u16()),
+            Error::source(&error).map(ToString::to_string),
         )
     })?;
-    if !status.is_success() {
-        return Err(AudioError::upstream(
-            format!("下载生成音频失败：HTTP {}", status.as_u16()),
-            status.as_u16(),
-            truncate_raw(""),
-        ));
-    }
     if body.is_empty() || body.len() > MAX_GENERATED_AUDIO_BYTES {
         return Err(AudioError::missing_audio("生成音频内容为空或超过大小上限"));
     }
@@ -90,6 +135,11 @@ pub async fn download_generated_audio(
     })
 }
 
+fn should_retry_generated_audio_download(error: &AudioError, attempt: u32) -> bool {
+    attempt < GENERATED_AUDIO_DOWNLOAD_MAX_ATTEMPTS
+        && matches!(error, AudioError::Request { body: true, .. })
+}
+
 fn mime_type_from_audio_url(audio_url: &str) -> String {
     let path = audio_url
         .split('?')
@@ -116,3 +166,71 @@ fn mime_type_from_audio_url(audio_url: &str) -> String {
 fn truncate_raw(raw_text: &str) -> String {
     raw_text.chars().take(800).collect()
 }
+
+#[cfg(test)]
+mod tests {
+    use std::{
+        io::{Read, Write},
+        net::TcpListener,
+        sync::{
+            Arc,
+            atomic::{AtomicUsize, Ordering},
+        },
+        thread,
+    };
+
+    use super::*;
+
+    #[test]
+    fn download_generated_audio_retries_body_decode_failure_once() {
+        let listener = TcpListener::bind("127.0.0.1:0").expect("mock server should bind");
+        let address = listener
+            .local_addr()
+            .expect("mock server address should be readable");
+        let request_count = Arc::new(AtomicUsize::new(0));
+        let request_count_for_server = Arc::clone(&request_count);
+        let server = thread::spawn(move || {
+            for _ in 0..2 {
+                let (mut stream, _) = listener.accept().expect("request should connect");
+                let mut request = [0_u8; 1024];
+                let _ = stream.read(&mut request);
+                let index = request_count_for_server.fetch_add(1, Ordering::SeqCst);
+                if index == 0 {
+                    let _ = stream.write_all(
+                        b"HTTP/1.1 200 OK\r\nContent-Type: audio/mpeg\r\nTransfer-Encoding: chunked\r\n\r\n10\r\nabc\r\n",
+                    );
+                    continue;
+                }
+
+                let body = b"RIFF";
+                let response = format!(
+                    "HTTP/1.1 200 OK\r\nContent-Type: audio/wav\r\nContent-Length: {}\r\n\r\n",
+                    body.len()
+                );
+                let _ = stream.write_all(response.as_bytes());
+                let _ = stream.write_all(body);
+            }
+        });
+        let runtime = tokio::runtime::Builder::new_current_thread()
+            .enable_all()
+            .build()
+            .expect("tokio runtime should build");
+        let http_client = reqwest::Client::builder()
+            .timeout(Duration::from_secs(2))
+            .build()
+            .expect("http client should build");
+
+        let audio = runtime
+            .block_on(download_generated_audio(
+                &http_client,
+                format!("http://{address}/audio.wav").as_str(),
+                "test-provider",
+            ))
+            .expect("second attempt should download audio");
+
+        assert_eq!(audio.bytes, b"RIFF");
+        assert_eq!(audio.mime_type, "audio/wav");
+        assert_eq!(request_count.load(Ordering::SeqCst), 2);
+        server.join().expect("mock server should finish");
+    }
+}
diff --git a/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs b/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs
index 55b4b589f..cc6329d66 100644
--- a/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs
+++ b/server-rs/crates/platform-image/src/generated_asset_sheets/alpha.rs
@@ -1,3 +1,5 @@
+use std::io::Cursor;
+
 use super::color::{
     GENERATED_ASSET_SHEET_GREEN_SCREEN_MIN_SCORE, GENERATED_ASSET_SHEET_GREEN_SCREEN_SOFT_SCORE,
     GENERATED_ASSET_SHEET_HARD_GREEN_SCREEN_SCORE, clamp_generated_asset_sheet_unit,
@@ -8,6 +10,8 @@ use super::color::{
     is_generated_asset_sheet_soft_green_matte_pixel, lerp_generated_asset_sheet_channel,
     touches_generated_asset_sheet_background_mask,
 };
+use super::error::GeneratedAssetSheetError;
+use image::ImageFormat;
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
 pub struct GeneratedAssetSheetKeyColor {
@@ -100,6 +104,24 @@ pub fn apply_generated_asset_sheet_alpha_with_options(
     image::DynamicImage::ImageRgba8(image)
 }
 
+pub fn remove_generated_asset_sheet_green_screen_background_bytes(
+    source: &[u8],
+    options: GeneratedAssetSheetAlphaOptions,
+) -> Result<Vec<u8>, GeneratedAssetSheetError> {
+    let source = image::load_from_memory(source).map_err(|error| {
+        GeneratedAssetSheetError::decode_image(format!("绿幕图片解码失败：{error}"))
+    })?;
+    let transparent = apply_generated_asset_sheet_alpha_with_options(source, options);
+
+    let mut cursor = Cursor::new(Vec::new());
+    transparent
+        .write_to(&mut cursor, ImageFormat::Png)
+        .map_err(|error| {
+            GeneratedAssetSheetError::encode_image(format!("透明绿幕 PNG 编码失败：{error}"))
+        })?;
+    Ok(cursor.into_inner())
+}
+
 fn remove_generated_asset_sheet_green_screen_background(
     pixels: &mut [u8],
     width: usize,
@@ -144,25 +166,27 @@ fn remove_generated_asset_sheet_green_screen_background(
             background_key_score.max(white_score).max(transparency_hint);
     }
 
-    let seed_background_pixel = |pixel_index: usize,
-                                 background_mask: &mut [u8],
-                                 queue: &mut Vec<usize>| {
-        if background_mask[pixel_index] != 0 {
-            return;
-        }
-        let alpha = pixels[pixel_index * 4 + 3];
-        let strong_candidate = alpha < 40
-            || background_key_scores[pixel_index] >= GENERATED_ASSET_SHEET_HARD_GREEN_SCREEN_SCORE
-            || (alpha < 224
-                && background_key_scores[pixel_index]
-                    > GENERATED_ASSET_SHEET_GREEN_SCREEN_MIN_SCORE)
-            || (options.remove_near_white_background && white_scores[pixel_index] > 0.32);
-        if !strong_candidate {
-            return;
-        }
-        background_mask[pixel_index] = 1;
-        queue.push(pixel_index);
-    };
+    let seed_background_pixel =
+        |pixel_index: usize, background_mask: &mut [u8], queue: &mut Vec<usize>| {
+            if background_mask[pixel_index] != 0 {
+                return;
+            }
+            let alpha = pixels[pixel_index * 4 + 3];
+            // 中文注释：绿幕模式下 alpha 携带背景/前景信息；洋红/青色等非绿幕模式下
+            // 图像通常无 alpha 通道（全部为 255），因此仅依赖 key_score 判断，不关 alpha。
+            let ignore_alpha = !options.key_color.is_green_screen();
+            let key_score = background_key_scores[pixel_index];
+            let strong_candidate = alpha < 40
+                || key_score >= GENERATED_ASSET_SHEET_HARD_GREEN_SCREEN_SCORE
+                || ((ignore_alpha || alpha < 224)
+                    && key_score > GENERATED_ASSET_SHEET_GREEN_SCREEN_MIN_SCORE)
+                || (options.remove_near_white_background && white_scores[pixel_index] > 0.32);
+            if !strong_candidate {
+                return;
+            }
+            background_mask[pixel_index] = 1;
+            queue.push(pixel_index);
+        };
 
     for x in 0..width {
         seed_background_pixel(x, &mut background_mask, &mut queue);
@@ -207,13 +231,16 @@ fn remove_generated_asset_sheet_green_screen_background(
             let key_score = background_key_scores[next_pixel_index];
             let white_score = white_scores[next_pixel_index];
             let hint = background_hints[next_pixel_index];
+            // 中文注释：非绿幕模式（洋红/青色等）下图像无 alpha 通道，不依赖 alpha 判断边界。
+            let ignore_alpha = !options.key_color.is_green_screen();
             let reachable_soft_edge = hint > 0.08
-                && alpha < 224
+                && (ignore_alpha || alpha < 224)
                 && (key_score > 0.04
                     || (options.remove_near_white_background && white_score > 0.08)
                     || alpha < 180);
             let key_background = key_score >= GENERATED_ASSET_SHEET_HARD_GREEN_SCREEN_SCORE
-                || (alpha < 224 && key_score > GENERATED_ASSET_SHEET_GREEN_SCREEN_MIN_SCORE);
+                || ((ignore_alpha || alpha < 224)
+                    && key_score > GENERATED_ASSET_SHEET_GREEN_SCREEN_MIN_SCORE);
             if alpha < 40
                 || key_background
                 || (options.remove_near_white_background && white_score > 0.32)
diff --git a/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs b/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs
index 8c65326cd..15d9f424b 100644
--- a/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs
+++ b/server-rs/crates/platform-image/src/generated_asset_sheets/mod.rs
@@ -8,6 +8,7 @@ pub mod sheet;
 pub use alpha::{
     GeneratedAssetSheetAlphaOptions, GeneratedAssetSheetKeyColor,
     apply_generated_asset_sheet_alpha_with_options, apply_generated_asset_sheet_green_screen_alpha,
+    remove_generated_asset_sheet_green_screen_background_bytes,
 };
 pub use error::GeneratedAssetSheetError;
 pub use persist::{
diff --git a/server-rs/crates/platform-image/tests/generated_asset_sheets.rs b/server-rs/crates/platform-image/tests/generated_asset_sheets.rs
index ff0da6413..83f5edc31 100644
--- a/server-rs/crates/platform-image/tests/generated_asset_sheets.rs
+++ b/server-rs/crates/platform-image/tests/generated_asset_sheets.rs
@@ -7,7 +7,8 @@ use platform_image::generated_asset_sheets::{
     apply_generated_asset_sheet_alpha_with_options, apply_generated_asset_sheet_green_screen_alpha,
     build_generated_asset_sheet_prompt, crop_generated_asset_sheet_view_edge_matte,
     crop_generated_asset_sheet_view_edge_matte_with_options,
-    prepare_generated_asset_sheet_put_request, slice_generated_asset_sheet,
+    prepare_generated_asset_sheet_put_request,
+    remove_generated_asset_sheet_green_screen_background_bytes, slice_generated_asset_sheet,
     slice_generated_asset_sheet_two_items_per_row,
 };
 use platform_oss::LegacyAssetPrefix;
@@ -144,6 +145,29 @@ fn generated_asset_sheet_green_screen_alpha_removes_green_background() {
     assert_eq!(cleaned.get_pixel(10, 10).0[3], 255);
 }
 
+#[test]
+fn generated_asset_sheet_green_screen_background_bytes_returns_png() {
+    let mut sheet = RgbaImage::from_pixel(3, 3, Rgba([0, 255, 0, 255]));
+    sheet.put_pixel(1, 1, Rgba([240, 40, 40, 255]));
+
+    let output = remove_generated_asset_sheet_green_screen_background_bytes(
+        encode_image(sheet).as_slice(),
+        GeneratedAssetSheetAlphaOptions {
+            remove_muted_green_screen_background: true,
+            detect_internal_holes: true,
+            internal_hole_min_pixels: 16,
+            ..GeneratedAssetSheetAlphaOptions::green_screen()
+        },
+    )
+    .expect("green screen bytes should process");
+    let image = image::load_from_memory(output.as_slice())
+        .expect("output PNG should decode")
+        .to_rgba8();
+
+    assert_eq!(image.get_pixel(0, 0).0[3], 0);
+    assert_eq!(image.get_pixel(1, 1).0[3], 255);
+}
+
 #[test]
 fn generated_asset_sheet_muted_green_alpha_requires_explicit_option() {
     let mut sheet = RgbaImage::from_pixel(20, 20, Rgba([59, 131, 67, 255]));
diff --git a/server-rs/crates/platform-oss/src/lib.rs b/server-rs/crates/platform-oss/src/lib.rs
index fe91fe457..d4aee7772 100644
--- a/server-rs/crates/platform-oss/src/lib.rs
+++ b/server-rs/crates/platform-oss/src/lib.rs
@@ -1182,9 +1182,11 @@ fn sanitize_file_name(raw: &str) -> Result<String, OssError> {
         .collect::<String>();
     let stem = collapse_dashes(&stem);
 
-    if stem.is_empty() {
-        return Err(OssError::InvalidRequest("fileName 主体不合法".to_string()));
-    }
+    let stem = if stem.is_empty() {
+        "file".to_string()
+    } else {
+        stem
+    };
 
     let extension = raw_extension
         .map(|extension| {
@@ -1767,6 +1769,14 @@ mod tests {
         );
     }
 
+    #[test]
+    fn sanitize_file_name_falls_back_when_stem_has_no_ascii_body() {
+        assert_eq!(
+            sanitize_file_name("剪贴板素材.png").expect("file name should sanitize"),
+            "file.png"
+        );
+    }
+
     #[test]
     fn sign_get_object_url_returns_signed_private_read_url() {
         let client = build_client();
diff --git a/server-rs/crates/shared-contracts/src/admin.rs b/server-rs/crates/shared-contracts/src/admin.rs
index 346ee1607..db2325df9 100644
--- a/server-rs/crates/shared-contracts/src/admin.rs
+++ b/server-rs/crates/shared-contracts/src/admin.rs
@@ -362,7 +362,13 @@ pub struct AdminTrackingEventListQuery {
     pub user_id: Option<String>,
     pub scope_kind: Option<String>,
     pub scope_id: Option<String>,
+    /// 北京时间日历日期 YYYY-MM-DD，按 tracking_event.day_key 闭区间过滤。
+    pub start_date: Option<String>,
+    /// 北京时间日历日期 YYYY-MM-DD，按 tracking_event.day_key 闭区间过滤。
+    pub end_date: Option<String>,
     pub limit: Option<u32>,
+    /// 后台导出专用开关；列表查询仍使用较小上限，避免日常误刷拖慢数据库。
+    pub export_all: Option<bool>,
 }
 
 // 单条埋点原始事件明细，字段与 tracking_event 表一一对应并补充事件名称。
@@ -389,3 +395,19 @@ pub struct AdminTrackingEventEntryPayload {
 pub struct AdminTrackingEventListResponse {
     pub entries: Vec<AdminTrackingEventEntryPayload>,
 }
+
+// 后台埋点 key 候选来自真实库中已经落库的 tracking_event，静态标题仅用于展示补充。
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct AdminTrackingEventKeyPayload {
+    pub event_key: String,
+    pub event_title: String,
+    pub scope_kinds: Vec<String>,
+}
+
+// 后台埋点 key 列表响应，任务配置页和埋点明细页共用。
+#[derive(Clone, Debug, Serialize, Deserialize, PartialEq, Eq)]
+#[serde(rename_all = "camelCase")]
+pub struct AdminTrackingEventKeyListResponse {
+    pub event_keys: Vec<AdminTrackingEventKeyPayload>,
+}
diff --git a/server-rs/crates/shared-contracts/src/assets.rs b/server-rs/crates/shared-contracts/src/assets.rs
index 42fe67d42..2ab13de63 100644
--- a/server-rs/crates/shared-contracts/src/assets.rs
+++ b/server-rs/crates/shared-contracts/src/assets.rs
@@ -387,6 +387,10 @@ pub struct EditorVideoGenerateRequest {
     pub source_resource_id: Option<String>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub asset_kind: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_folder_id: Option<String>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset_label: Option<String>,
 }
 
 fn default_editor_video_web_search_enabled() -> bool {
@@ -399,6 +403,8 @@ pub struct EditorVideoGenerateResponse {
     pub ok: bool,
     pub video_src: String,
     #[serde(skip_serializing_if = "Option::is_none")]
+    pub thumbnail_src: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
     pub object_key: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub asset_object_id: Option<String>,
@@ -417,6 +423,10 @@ pub struct EditorVideoGenerateResponse {
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub project: Option<Value>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub resource: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub asset: Option<Value>,
+    #[serde(default, skip_serializing_if = "Option::is_none")]
     pub queue_state: Option<ExternalGenerationJobStatusRecord>,
 }
 
@@ -444,6 +454,8 @@ pub struct EditorCanvasGenerationCompletionPayload {
 #[serde(rename_all = "camelCase")]
 pub struct EditorIconSpritesheetGenerateRequest {
     pub reference_image_src: String,
+    #[serde(default)]
+    pub reference_image_srcs: Vec<String>,
     pub icon_descriptions: Vec<String>,
     #[serde(default, skip_serializing_if = "Option::is_none")]
     pub model: Option<String>,
@@ -1141,6 +1153,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("request should serialize");
 
@@ -1172,6 +1186,8 @@ mod tests {
             generation_inputs: None,
             source_resource_id: None,
             asset_kind: None,
+            asset_folder_id: None,
+            asset_label: None,
         })
         .expect("request should serialize");
 
@@ -1194,6 +1210,7 @@ mod tests {
         let payload = serde_json::to_value(EditorVideoGenerateResponse {
             ok: true,
             video_src: "/generated-editor-videos/task-1/preview.mp4".to_string(),
+            thumbnail_src: Some("/generated-editor-videos/task-1/cover.png".to_string()),
             object_key: Some(
                 "generated-character-drafts/editor-videos/task-1/preview.mp4".to_string(),
             ),
@@ -1210,6 +1227,8 @@ mod tests {
             resolution: "480p".to_string(),
             price_mud_points: 100,
             project: None,
+            resource: None,
+            asset: None,
             queue_state: None,
         })
         .expect("response should serialize");
@@ -1218,6 +1237,10 @@ mod tests {
             payload["videoSrc"],
             json!("/generated-editor-videos/task-1/preview.mp4")
         );
+        assert_eq!(
+            payload["thumbnailSrc"],
+            json!("/generated-editor-videos/task-1/cover.png")
+        );
         assert_eq!(
             payload["objectKey"],
             json!("generated-character-drafts/editor-videos/task-1/preview.mp4")
@@ -1231,6 +1254,7 @@ mod tests {
     fn editor_icon_spritesheet_request_omits_price_and_response_includes_price() {
         let request_payload = serde_json::to_value(EditorIconSpritesheetGenerateRequest {
             reference_image_src: "data:image/png;base64,spec".to_string(),
+            reference_image_srcs: vec!["data:image/png;base64,style".to_string()],
             icon_descriptions: vec!["返回按钮".to_string(), "设置按钮".to_string()],
             model: Some("gemini-3.1-flash-image-preview".to_string()),
             aspect_ratio: Some("1:1".to_string()),
@@ -1242,18 +1266,17 @@ mod tests {
             request_payload["referenceImageSrc"],
             json!("data:image/png;base64,spec")
         );
+        assert_eq!(
+            request_payload["referenceImageSrcs"],
+            json!(["data:image/png;base64,style"])
+        );
         assert!(request_payload.get("priceMudPoints").is_none());
 
         let response_payload = serde_json::to_value(EditorIconSpritesheetGenerateResponse {
             spritesheet_image_src: "data:image/png;base64,sheet".to_string(),
             spritesheet_width: 512,
             spritesheet_height: 512,
-            icon_image_srcs: vec![EditorIconSpritesheetIconPayload {
-                name: "返回按钮".to_string(),
-                image_src: "data:image/png;base64,back".to_string(),
-                width: 128,
-                height: 128,
-            }],
+            icon_image_srcs: Vec::new(),
             prompt: "图标 prompt".to_string(),
             actual_prompt: Some("图标 prompt".to_string()),
             model: "gemini-3.1-flash-image-preview".to_string(),
@@ -1264,10 +1287,7 @@ mod tests {
         .expect("response should serialize");
 
         assert_eq!(response_payload["priceMudPoints"], json!(12));
-        assert_eq!(
-            response_payload["iconImageSrcs"][0]["name"],
-            json!("返回按钮")
-        );
+        assert_eq!(response_payload["iconImageSrcs"], json!([]));
     }
 
     #[test]
diff --git a/server-rs/crates/shared-contracts/src/external_generation.rs b/server-rs/crates/shared-contracts/src/external_generation.rs
index 87318593b..004574c81 100644
--- a/server-rs/crates/shared-contracts/src/external_generation.rs
+++ b/server-rs/crates/shared-contracts/src/external_generation.rs
@@ -50,6 +50,7 @@ pub struct ExternalGenerationTaskRecord {
     pub source_module: String,
     pub source_entity_id: String,
     pub request_label: String,
+    pub request_prompt: Option<String>,
     pub status: ExternalGenerationJobStatus,
     pub phase_label: String,
     pub phase_detail: String,
diff --git a/server-rs/crates/spacetime-client/src/assets.rs b/server-rs/crates/spacetime-client/src/assets.rs
index f8814228a..004197d93 100644
--- a/server-rs/crates/spacetime-client/src/assets.rs
+++ b/server-rs/crates/spacetime-client/src/assets.rs
@@ -61,6 +61,21 @@ impl SpacetimeClient {
         .await
     }
 
+    pub async fn get_asset_object_by_object_key(
+        &self,
+        object_key: String,
+    ) -> Result<Option<AssetObjectRecord>, SpacetimeClientError> {
+        self.read_after_connect("get_asset_object_by_object_key", move |connection| {
+            Ok(connection
+                .db()
+                .asset_object()
+                .iter()
+                .find(|row| row.object_key == object_key)
+                .map(map_asset_object_row))
+        })
+        .await
+    }
+
     pub async fn bind_asset_object_to_entity(
         &self,
         input: module_assets::AssetEntityBindingInput,
diff --git a/server-rs/crates/spacetime-client/src/lib.rs b/server-rs/crates/spacetime-client/src/lib.rs
index 34110353d..01215ad45 100644
--- a/server-rs/crates/spacetime-client/src/lib.rs
+++ b/server-rs/crates/spacetime-client/src/lib.rs
@@ -360,7 +360,7 @@ pub enum SpacetimeClientError {
     ConnectDropped,
     Procedure(String),
     Runtime(String),
-    Timeout,
+    Timeout(SpacetimeClientStage),
 }
 
 const DEFAULT_PROCEDURE_TIMEOUT: Duration = Duration::from_secs(30);
@@ -711,7 +711,7 @@ impl SpacetimeClient {
             .map_err(|_| {
                 SpacetimeStageError::new(
                     SpacetimeClientStage::PoolAcquire,
-                    SpacetimeClientError::Timeout,
+                    SpacetimeClientError::Timeout(SpacetimeClientStage::PoolAcquire),
                 )
             })?
             .map_err(|error| {
@@ -804,7 +804,7 @@ impl SpacetimeClient {
         .map_err(|_| {
             SpacetimeStageError::new(
                 SpacetimeClientStage::ConnectBuild,
-                SpacetimeClientError::Timeout,
+                SpacetimeClientError::Timeout(SpacetimeClientStage::ConnectBuild),
             )
         })?
         .map_err(|error| {
@@ -821,7 +821,7 @@ impl SpacetimeClient {
             .map_err(|_| {
                 SpacetimeStageError::new(
                     SpacetimeClientStage::ConnectHandshake,
-                    SpacetimeClientError::Timeout,
+                    SpacetimeClientError::Timeout(SpacetimeClientStage::ConnectHandshake),
                 )
             })?
             .map_err(|_| {
@@ -945,7 +945,7 @@ impl SpacetimeClient {
             .map_err(|_| {
                 SpacetimeStageError::new(
                     SpacetimeClientStage::ReadModelSubscribe,
-                    SpacetimeClientError::Timeout,
+                    SpacetimeClientError::Timeout(SpacetimeClientStage::ReadModelSubscribe),
                 )
             })?
             .map_err(|_| {
@@ -970,7 +970,7 @@ impl SpacetimeClient {
     // 超时后必须统一归还租约；若连接已先一步断开则回传断线，否则标记坏连接并回传超时。
     fn resolve_timeout_error(
         connection: Option<&PooledConnection>,
-        _stage: SpacetimeClientStage,
+        stage: SpacetimeClientStage,
     ) -> SpacetimeClientError {
         if let Some(connection) = connection {
             if connection.is_broken() {
@@ -979,7 +979,7 @@ impl SpacetimeClient {
             connection.mark_broken();
         }
 
-        SpacetimeClientError::Timeout
+        SpacetimeClientError::Timeout(stage)
     }
 }
 
@@ -1127,7 +1127,9 @@ impl fmt::Display for SpacetimeClientError {
                 f.write_str(message)
             }
             Self::ConnectDropped => f.write_str("SpacetimeDB 连接在返回结果前已断开"),
-            Self::Timeout => f.write_str("SpacetimeDB procedure 调用超时"),
+            Self::Timeout(stage) => {
+                f.write_str(&format!("SpacetimeDB {} 调用超时", stage.as_str()))
+            }
         }
     }
 }
@@ -1241,6 +1243,6 @@ mod tests {
             Err(error) => error,
         };
         assert_eq!(error.stage, SpacetimeClientStage::PoolAcquire);
-        assert!(matches!(error.error, SpacetimeClientError::Timeout));
+        assert!(matches!(error.error, SpacetimeClientError::Timeout(_)));
     }
 }
diff --git a/server-rs/crates/spacetime-client/src/mapper/editor_project.rs b/server-rs/crates/spacetime-client/src/mapper/editor_project.rs
index c2893f781..f959b62f3 100644
--- a/server-rs/crates/spacetime-client/src/mapper/editor_project.rs
+++ b/server-rs/crates/spacetime-client/src/mapper/editor_project.rs
@@ -94,6 +94,7 @@ pub struct EditorAssetRecord {
     pub generation_inputs: Option<serde_json::Value>,
     pub source_resource_id: Option<String>,
     pub public_showcase_enabled: Option<bool>,
+    pub thumbnail_src: Option<String>,
     pub created_at: String,
     pub updated_at: String,
 }
@@ -232,6 +233,7 @@ pub struct EditorAssetCreateRecordInput {
     pub generation_inputs_json: Option<String>,
     pub source_resource_id: Option<String>,
     pub now_micros: i64,
+    pub thumbnail_src: Option<String>,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq)]
@@ -442,6 +444,7 @@ impl From<EditorAssetCreateRecordInput> for crate::module_bindings::EditorAssetC
             generation_inputs_json: input.generation_inputs_json,
             source_resource_id: input.source_resource_id,
             now_micros: input.now_micros,
+            thumbnail_src: input.thumbnail_src,
         }
     }
 }
@@ -756,6 +759,7 @@ fn map_editor_asset_snapshot(
         generation_inputs,
         source_resource_id: snapshot.source_resource_id,
         public_showcase_enabled: snapshot.public_showcase_enabled,
+        thumbnail_src: snapshot.thumbnail_src,
         created_at: format_timestamp_micros(snapshot.created_at_micros),
         updated_at: format_timestamp_micros(snapshot.updated_at_micros),
     })
diff --git a/server-rs/crates/spacetime-client/src/mapper/external_generation.rs b/server-rs/crates/spacetime-client/src/mapper/external_generation.rs
index 54cd7e046..bbb775796 100644
--- a/server-rs/crates/spacetime-client/src/mapper/external_generation.rs
+++ b/server-rs/crates/spacetime-client/src/mapper/external_generation.rs
@@ -83,6 +83,7 @@ impl From<ExternalGenerationJobListRecordInput> for ExternalGenerationJobListInp
             owner_user_id: input.owner_user_id,
             limit: input.limit,
             include_acknowledged_terminal: input.include_acknowledged_terminal,
+            statuses: input.statuses,
         }
     }
 }
@@ -270,6 +271,7 @@ pub struct ExternalGenerationJobListRecordInput {
     pub owner_user_id: String,
     pub limit: u32,
     pub include_acknowledged_terminal: bool,
+    pub statuses: Vec<String>,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq)]
diff --git a/server-rs/crates/spacetime-client/src/module_bindings.rs b/server-rs/crates/spacetime-client/src/module_bindings.rs
index 4a647bd63..c0691341c 100644
--- a/server-rs/crates/spacetime-client/src/module_bindings.rs
+++ b/server-rs/crates/spacetime-client/src/module_bindings.rs
@@ -1,7 +1,7 @@
 // THIS FILE IS AUTOMATICALLY GENERATED BY SPACETIMEDB. EDITS TO THIS FILE
 // WILL NOT BE SAVED. MODIFY TABLES IN YOUR MODULE SOURCE CODE INSTEAD.
 
-// This was generated using spacetimedb cli version 2.5.0 (commit 19cbf2b219ac9fd7fdca6c5e2c61a3a2f0319515).
+// This was generated using spacetimedb cli version 2.5.0 (commit ca16958ef0a5f8c816700d2255a0b20ecacff901).
 
 #![allow(unused, clippy::all)]
 use spacetimedb_sdk::__codegen::{self as __sdk, __lib, __sats, __ws};
diff --git a/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_create_input_type.rs b/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_create_input_type.rs
index 5d39f1fcc..74aa13bfd 100644
--- a/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_create_input_type.rs
+++ b/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_create_input_type.rs
@@ -26,6 +26,7 @@ pub struct EditorAssetCreateInput {
     pub generation_inputs_json: Option<String>,
     pub source_resource_id: Option<String>,
     pub now_micros: i64,
+    pub thumbnail_src: Option<String>,
 }
 
 impl __sdk::InModule for EditorAssetCreateInput {
diff --git a/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_snapshot_type.rs b/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_snapshot_type.rs
index 419250158..c1111852c 100644
--- a/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_snapshot_type.rs
+++ b/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_snapshot_type.rs
@@ -27,6 +27,7 @@ pub struct EditorAssetSnapshot {
     pub public_showcase_enabled: Option<bool>,
     pub created_at_micros: i64,
     pub updated_at_micros: i64,
+    pub thumbnail_src: Option<String>,
 }
 
 impl __sdk::InModule for EditorAssetSnapshot {
diff --git a/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_type.rs b/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_type.rs
index ad126e534..dccacd1f3 100644
--- a/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_type.rs
+++ b/server-rs/crates/spacetime-client/src/module_bindings/editor_asset_type.rs
@@ -27,6 +27,7 @@ pub struct EditorAsset {
     pub asset_kind: Option<String>,
     pub generation_inputs_json: Option<String>,
     pub source_resource_id: Option<String>,
+    pub thumbnail_src: Option<String>,
 }
 
 impl __sdk::InModule for EditorAsset {
@@ -57,6 +58,7 @@ pub struct EditorAssetCols {
     pub asset_kind: __sdk::__query_builder::Col<EditorAsset, Option<String>>,
     pub generation_inputs_json: __sdk::__query_builder::Col<EditorAsset, Option<String>>,
     pub source_resource_id: __sdk::__query_builder::Col<EditorAsset, Option<String>>,
+    pub thumbnail_src: __sdk::__query_builder::Col<EditorAsset, Option<String>>,
 }
 
 impl __sdk::__query_builder::HasCols for EditorAsset {
@@ -86,6 +88,7 @@ impl __sdk::__query_builder::HasCols for EditorAsset {
                 "generation_inputs_json",
             ),
             source_resource_id: __sdk::__query_builder::Col::new(table_name, "source_resource_id"),
+            thumbnail_src: __sdk::__query_builder::Col::new(table_name, "thumbnail_src"),
         }
     }
 }
diff --git a/server-rs/crates/spacetime-client/src/module_bindings/external_generation_job_list_input_type.rs b/server-rs/crates/spacetime-client/src/module_bindings/external_generation_job_list_input_type.rs
index 03ca6384b..1df01420a 100644
--- a/server-rs/crates/spacetime-client/src/module_bindings/external_generation_job_list_input_type.rs
+++ b/server-rs/crates/spacetime-client/src/module_bindings/external_generation_job_list_input_type.rs
@@ -10,6 +10,7 @@ pub struct ExternalGenerationJobListInput {
     pub owner_user_id: String,
     pub limit: u32,
     pub include_acknowledged_terminal: bool,
+    pub statuses: Vec<String>,
 }
 
 impl __sdk::InModule for ExternalGenerationJobListInput {
diff --git a/server-rs/crates/spacetime-module/src/editor_project_storage.rs b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
index 03b550d26..e88e2f61e 100644
--- a/server-rs/crates/spacetime-module/src/editor_project_storage.rs
+++ b/server-rs/crates/spacetime-module/src/editor_project_storage.rs
@@ -124,6 +124,8 @@ pub struct EditorAsset {
     generation_inputs_json: Option<String>,
     #[default(None::<String>)]
     source_resource_id: Option<String>,
+    #[default(None::<String>)]
+    thumbnail_src: Option<String>,
 }
 
 #[derive(Clone, Debug, PartialEq, SpacetimeType)]
@@ -282,6 +284,7 @@ pub struct EditorAssetSnapshot {
     pub public_showcase_enabled: Option<bool>,
     pub created_at_micros: i64,
     pub updated_at_micros: i64,
+    pub thumbnail_src: Option<String>,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq, SpacetimeType)]
@@ -342,6 +345,7 @@ pub struct EditorAssetCreateInput {
     pub generation_inputs_json: Option<String>,
     pub source_resource_id: Option<String>,
     pub now_micros: i64,
+    pub thumbnail_src: Option<String>,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq, SpacetimeType)]
@@ -1267,6 +1271,7 @@ fn create_editor_asset(
         asset_kind: normalize_optional(input.asset_kind),
         generation_inputs_json: normalize_optional(input.generation_inputs_json),
         source_resource_id: normalize_optional(input.source_resource_id),
+        thumbnail_src: normalize_optional(input.thumbnail_src),
     });
     ctx.db
         .editor_asset()
@@ -1315,6 +1320,7 @@ fn update_editor_asset(
         asset_kind: asset.asset_kind,
         generation_inputs_json: asset.generation_inputs_json,
         source_resource_id: asset.source_resource_id,
+        thumbnail_src: asset.thumbnail_src,
     });
     ctx.db
         .editor_asset()
@@ -1359,6 +1365,7 @@ fn repair_editor_asset_media(
         asset_kind: asset.asset_kind,
         generation_inputs_json: asset.generation_inputs_json,
         source_resource_id: asset.source_resource_id,
+        thumbnail_src: asset.thumbnail_src,
     });
 
     ctx.db
@@ -1726,6 +1733,7 @@ fn asset_snapshot_from_row(ctx: &ReducerContext, row: EditorAsset) -> EditorAsse
         public_showcase_enabled,
         created_at_micros: row.created_at.to_micros_since_unix_epoch(),
         updated_at_micros: row.updated_at.to_micros_since_unix_epoch(),
+        thumbnail_src: row.thumbnail_src,
     }
 }
 
@@ -1847,12 +1855,7 @@ fn project_resource_input_copies_source_media(
         .find(&source_resource_id.to_string())
         .filter(|source_resource| source_resource.owner_user_id == owner_user_id)
         .is_some_and(|source_resource| {
-            project_resource_matches_media(
-                &source_resource,
-                asset_object_id,
-                object_key,
-                image_src,
-            )
+            project_resource_matches_media(&source_resource, asset_object_id, object_key, image_src)
         })
 }
 
@@ -1883,12 +1886,7 @@ fn find_reusable_project_resource_for_input(
                         .as_deref()
                         .map(str::trim)
                         .is_some_and(|value| value == source_resource_id))
-                && project_resource_matches_media(
-                    resource,
-                    asset_object_id,
-                    object_key,
-                    image_src,
-                )
+                && project_resource_matches_media(resource, asset_object_id, object_key, image_src)
         })
         .collect::<Vec<_>>();
     matches.sort_by(|left, right| {
@@ -1934,12 +1932,7 @@ fn matching_media_ref(left: &str, right: &str) -> bool {
 }
 
 fn normalize_media_ref(value: &str) -> String {
-    let trimmed_value = value
-        .trim()
-        .split('?')
-        .next()
-        .unwrap_or("")
-        .trim();
+    let trimmed_value = value.trim().split('?').next().unwrap_or("").trim();
     let path_value = if let Some(protocol_index) = trimmed_value.find("://") {
         let after_protocol = &trimmed_value[protocol_index + 3..];
         after_protocol
diff --git a/server-rs/crates/spacetime-module/src/external_generation.rs b/server-rs/crates/spacetime-module/src/external_generation.rs
index d37a69a0a..bee53cb08 100644
--- a/server-rs/crates/spacetime-module/src/external_generation.rs
+++ b/server-rs/crates/spacetime-module/src/external_generation.rs
@@ -153,6 +153,7 @@ pub struct ExternalGenerationJobListInput {
     pub owner_user_id: String,
     pub limit: u32,
     pub include_acknowledged_terminal: bool,
+    pub statuses: Vec<String>,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq, SpacetimeType)]
@@ -568,6 +569,7 @@ fn list_external_generation_jobs_tx(
     let now_micros = ctx.timestamp.to_micros_since_unix_epoch();
     let (pending_count, running_count, unacknowledged_terminal_count) =
         count_external_generation_jobs_for_owner(ctx, &owner_user_id);
+    let status_filter = normalize_external_generation_job_status_filter(&input.statuses);
     let mut rows = Vec::new();
 
     for row in ctx
@@ -579,7 +581,9 @@ fn list_external_generation_jobs_tx(
         let should_include = input.include_acknowledged_terminal
             || !is_external_generation_job_terminal(&row)
             || row.notification_acknowledged_at.is_none();
-        if should_include {
+        let should_include_status =
+            status_filter.is_empty() || status_filter.iter().any(|status| row.status == *status);
+        if should_include && should_include_status {
             rows.push(row);
         }
     }
@@ -966,6 +970,22 @@ fn external_generation_job_sort_bucket(row: &ExternalGenerationJob) -> u8 {
     }
 }
 
+fn normalize_external_generation_job_status_filter(statuses: &[String]) -> Vec<&'static str> {
+    statuses
+        .iter()
+        .filter_map(|status| match status.trim() {
+            "queued" | EXTERNAL_GENERATION_STATUS_PENDING => {
+                Some(EXTERNAL_GENERATION_STATUS_PENDING)
+            }
+            EXTERNAL_GENERATION_STATUS_RUNNING => Some(EXTERNAL_GENERATION_STATUS_RUNNING),
+            EXTERNAL_GENERATION_STATUS_COMPLETED => Some(EXTERNAL_GENERATION_STATUS_COMPLETED),
+            EXTERNAL_GENERATION_STATUS_FAILED => Some(EXTERNAL_GENERATION_STATUS_FAILED),
+            EXTERNAL_GENERATION_STATUS_CANCELLED => Some(EXTERNAL_GENERATION_STATUS_CANCELLED),
+            _ => None,
+        })
+        .collect()
+}
+
 fn record_external_generation_claimable_age(
     stats: &mut ExternalGenerationQueueStatsSnapshot,
     row: &ExternalGenerationJob,
@@ -1232,6 +1252,21 @@ mod tests {
         );
     }
 
+    #[test]
+    fn task_list_status_filter_accepts_public_queued_alias() {
+        assert_eq!(
+            normalize_external_generation_job_status_filter(&[
+                "queued".to_string(),
+                "running".to_string(),
+                "unknown".to_string(),
+            ]),
+            vec![
+                EXTERNAL_GENERATION_STATUS_PENDING,
+                EXTERNAL_GENERATION_STATUS_RUNNING,
+            ],
+        );
+    }
+
     #[test]
     fn worker_ownership_requires_matching_trimmed_worker_id() {
         let mut row = external_generation_job_fixture(EXTERNAL_GENERATION_STATUS_RUNNING);
diff --git a/server-rs/crates/spacetime-module/src/migration.rs b/server-rs/crates/spacetime-module/src/migration.rs
index b76f1ab31..ef6bffff4 100644
--- a/server-rs/crates/spacetime-module/src/migration.rs
+++ b/server-rs/crates/spacetime-module/src/migration.rs
@@ -1408,6 +1408,9 @@ fn normalize_migration_row(table_name: &str, value: &serde_json::Value) -> serde
             object
                 .entry("source_resource_id".to_string())
                 .or_insert(serde_json::Value::Null);
+            object
+                .entry("thumbnail_src".to_string())
+                .or_insert(serde_json::Value::Null);
         }
     }
     next_value
diff --git a/src/App.test.tsx b/src/App.test.tsx
index eb0c1cc91..65056755e 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -294,6 +294,61 @@ describe('App navigation history', () => {
     );
   });
 
+  test('缺少 projectid 的项目画布直达会替换回创作页', () => {
+    window.history.replaceState(null, '', '/editor/canvas');
+    const replaceStateSpy = vi.spyOn(window.history, 'replaceState');
+
+    renderApp();
+
+    expect(screen.getByTestId('selection-stage').textContent).toBe(
+      'creation-home',
+    );
+    expect(window.location.pathname).toBe('/creation');
+    expect(window.location.search).toBe('');
+    expect(replaceStateSpy).toHaveBeenCalledWith(
+      { [APP_HISTORY_STATE_KEY]: true },
+      '',
+      '/creation',
+    );
+
+    replaceStateSpy.mockRestore();
+  });
+
+  test('带 projectid 的项目画布直达保持编辑器阶段', () => {
+    mockMatchMedia(false);
+    window.history.replaceState(
+      null,
+      '',
+      '/editor/canvas?projectid=project-from-url',
+    );
+
+    renderApp();
+
+    expect(screen.getByTestId('selection-stage').textContent).toBe(
+      'image-editor',
+    );
+    expect(window.location.pathname).toBe('/editor/canvas');
+    expect(window.location.search).toBe('?projectid=project-from-url');
+  });
+
+  test('历史回到缺少 projectid 的项目画布时会替换回创作页', async () => {
+    mockMatchMedia(false);
+    window.history.replaceState(null, '', '/creation');
+
+    renderApp();
+
+    window.history.pushState(null, '', '/editor/canvas');
+    await act(async () => {
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+
+    expect(screen.getByTestId('selection-stage').textContent).toBe(
+      'creation-home',
+    );
+    expect(window.location.pathname).toBe('/creation');
+    expect(window.location.search).toBe('');
+  });
+
   test('项目画布导航只写入一次带 projectid 的历史记录', async () => {
     mockMatchMedia(true);
     window.history.replaceState(null, '', '/creation');
diff --git a/src/App.tsx b/src/App.tsx
index 1bff59a58..9a11611d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import {
   readPublicWorkCodeFromLocationSearch,
   resolveInitialSelectionStageFromPath,
   resolvePathForSelectionStage,
+  shouldRedirectEditorCanvasWithoutProject,
 } from './routing/appPageRoutes';
 import type { RpgRuntimeAppIntent } from './RpgRuntimeApp';
 import {
@@ -62,6 +63,23 @@ function isRpgRuntimeRoute(pathname: string) {
   );
 }
 
+function resolveInitialAppSelectionStage() {
+  if (
+    shouldRedirectEditorCanvasWithoutProject(
+      window.location.pathname,
+      window.location.search,
+    )
+  ) {
+    replaceAppHistoryPath('/creation');
+    return 'creation-home';
+  }
+
+  return resolveInitialSelectionStageFromPath(
+    window.location.pathname,
+    getInitialPlatformDesktopLayout(),
+  );
+}
+
 export default function App() {
   const authUi = useAuthUi();
   const runtimeIntentTokenRef = useRef(0);
@@ -75,11 +93,8 @@ export default function App() {
   const [isRuntimeActive, setIsRuntimeActive] = useState(() =>
     isRpgRuntimeRoute(window.location.pathname),
   );
-  const [selectionStage, setRawSelectionStage] = useState<SelectionStage>(() =>
-    resolveInitialSelectionStageFromPath(
-      window.location.pathname,
-      getInitialPlatformDesktopLayout(),
-    ),
+  const [selectionStage, setRawSelectionStage] = useState<SelectionStage>(
+    resolveInitialAppSelectionStage,
   );
   const [runtimeReturnStage, setRuntimeReturnStage] =
     useState<SelectionStage>('platform');
@@ -111,6 +126,18 @@ export default function App() {
         window.history.state,
       );
 
+      if (
+        shouldRedirectEditorCanvasWithoutProject(
+          window.location.pathname,
+          window.location.search,
+        )
+      ) {
+        replaceAppHistoryPath('/creation');
+        setIsRuntimeActive(false);
+        setRawSelectionStage('creation-home');
+        return;
+      }
+
       if (isRpgRuntimeRoute(window.location.pathname)) {
         setIsRuntimeActive(true);
         return;
diff --git a/src/components/auth/BindPhoneScreen.test.tsx b/src/components/auth/BindPhoneScreen.test.tsx
index 773b0cd92..c5989c9d9 100644
--- a/src/components/auth/BindPhoneScreen.test.tsx
+++ b/src/components/auth/BindPhoneScreen.test.tsx
@@ -18,7 +18,7 @@ const baseUser: AuthUser = {
   wechatBound: true,
 };
 
-test('绑定手机号表单复用平台输入和字段标题', async () => {
+test('绑定手机号表单展示当前身份并提交手机号验证码', async () => {
   const user = userEvent.setup();
   const onSubmit = vi.fn().mockResolvedValue(undefined);
 
@@ -42,23 +42,14 @@ test('绑定手机号表单复用平台输入和字段标题', async () => {
   const phoneInput = screen.getByLabelText('手机号') as HTMLInputElement;
   const codeInput = screen.getByLabelText('验证码') as HTMLInputElement;
 
-  expect(phoneInput.className).toContain('platform-text-field');
-  expect(codeInput.className).toContain('platform-text-field');
-  expect(screen.getByText('手机号').className).toContain(
-    'text-[var(--platform-text-strong)]',
-  );
-  expect(screen.getByText('当前登录身份：微信旅人').className).toContain(
-    'platform-subpanel',
-  );
-  expect(
-    document
-      .querySelector('.selection-hero-brand__image')
-      ?.getAttribute('src'),
-  ).toBe('/branding/taonier-product-ip.png');
+  expect(screen.getByText('手机号')).toBeTruthy();
+  expect(screen.getByText('当前登录身份：微信旅人')).toBeTruthy();
 
   await user.type(phoneInput, '13800000000');
   await user.type(codeInput, '123456');
-  await user.click(screen.getByRole('button', { name: '绑定手机号并进入游戏' }));
+  await user.click(
+    screen.getByRole('button', { name: '绑定手机号并进入游戏' }),
+  );
 
   expect(onSubmit).toHaveBeenCalledWith('13800000000', '123456');
 });
diff --git a/src/components/creation-home/CreationLandingView.test.tsx b/src/components/creation-home/CreationLandingView.test.tsx
index 40eda8514..edf5968e1 100644
--- a/src/components/creation-home/CreationLandingView.test.tsx
+++ b/src/components/creation-home/CreationLandingView.test.tsx
@@ -118,6 +118,9 @@ describe('CreationLandingView', () => {
     expect(screen.getByText('游戏视觉规范')).toBeTruthy();
     expect(screen.getByRole('heading', { name: '陶泥儿精选' })).toBeTruthy();
     expect(screen.getByRole('tab', { name: '素材包' })).toBeTruthy();
+    expect(screen.queryByRole('tab', { name: '特效' })).toBeNull();
+    expect(screen.queryByRole('tab', { name: '场景' })).toBeNull();
+    expect(screen.queryByRole('tab', { name: '游戏' })).toBeNull();
     expect(screen.queryByText('精选入口')).toBeNull();
     expect(screen.queryByText(/Meowa|Discord/u)).toBeNull();
     expect(await screen.findByText('暂无素材')).toBeTruthy();
@@ -235,7 +238,9 @@ describe('CreationLandingView', () => {
         provider: 'provider',
         taskId: 'task-1',
         assetKind: 'character',
-        authorName: '创作者A',
+        ownerUserId: 'user-internal-author',
+        authorDisplayName: '创作者A',
+        authorPublicUserCode: 'SY-00000042',
         priceMudPoints: 20,
       },
     ]);
@@ -249,6 +254,7 @@ describe('CreationLandingView', () => {
     expect(card).toBeTruthy();
     expect(within(card as HTMLElement).getByText('character hero prompt')).toBeTruthy();
     expect(within(card as HTMLElement).getByText('创作者A')).toBeTruthy();
+    expect(within(card as HTMLElement).queryByText('user-internal-author')).toBeNull();
     expect(within(card as HTMLElement).getByText('20泥点')).toBeTruthy();
   });
 
@@ -270,7 +276,8 @@ describe('CreationLandingView', () => {
         provider: 'provider',
         taskId: 'task-1',
         assetKind: 'character',
-        authorName: '创作者A',
+        authorDisplayName: '创作者A',
+        authorPublicUserCode: 'SY-00000042',
         priceMudPoints: 20,
       },
       {
diff --git a/src/components/creation-home/creationShowcaseModel.test.ts b/src/components/creation-home/creationShowcaseModel.test.ts
index c4aee3a37..9d4586eba 100644
--- a/src/components/creation-home/creationShowcaseModel.test.ts
+++ b/src/components/creation-home/creationShowcaseModel.test.ts
@@ -76,21 +76,41 @@ describe('creationShowcaseModel', () => {
     expect(items[0]?.label).toBe('公开素材');
   });
 
-  it('uses the public project resource owner user id as showcase author fallback', () => {
+  it('uses public author fields without falling back to internal owner user id', () => {
     const items = buildCreationShowcaseItems({
       activeTab: 'characters',
       projectResources: [
         createResource({
-          resourceId: 'owner-resource',
-          label: '作者兜底素材',
+          resourceId: 'display-author-resource',
+          label: '展示名作者素材',
           assetKind: 'character',
           ownerUserId: 'user-author-1',
+          authorDisplayName: '作者昵称',
+          authorPublicUserCode: 'SY-00000001',
+        }),
+        createResource({
+          resourceId: 'code-author-resource',
+          label: '陶泥号作者素材',
+          assetKind: 'character',
+          ownerUserId: 'user-author-2',
+          authorPublicUserCode: 'SY-00000002',
+        }),
+        createResource({
+          resourceId: 'owner-only-resource',
+          label: '内部id素材',
+          assetKind: 'character',
+          ownerUserId: 'user-author-3',
+          authorName: 'user-author-3',
+          ownerName: 'user-author-3',
         }),
       ],
     });
 
-    expect(items).toHaveLength(1);
-    expect(items[0]?.author).toBe('user-author-1');
+    expect(items.map((item) => item.author)).toEqual([
+      '作者昵称',
+      'SY-00000002',
+      '-',
+    ]);
   });
 
   it('deduplicates canvas copies that point back to the same generated resource', () => {
@@ -137,7 +157,7 @@ describe('creationShowcaseModel', () => {
           assetKind: 'spec',
           prompt: '规范提示词',
           priceMudPoints: 5,
-          authorName: '创作者A',
+          authorDisplayName: '创作者A',
         }),
         createResource({
           resourceId: 'character-1',
diff --git a/src/components/creation-home/creationShowcaseModel.ts b/src/components/creation-home/creationShowcaseModel.ts
index e7ace3a37..e042a47d5 100644
--- a/src/components/creation-home/creationShowcaseModel.ts
+++ b/src/components/creation-home/creationShowcaseModel.ts
@@ -21,10 +21,7 @@ export type ShowcaseTabId =
   | 'characters'
   | 'ui'
   | 'music'
-  | 'effects'
-  | 'scenes'
-  | 'marketing'
-  | 'games';
+  | 'marketing';
 
 export type ShowcaseAssetMediaType = 'image' | 'video' | 'audio';
 
@@ -62,24 +59,14 @@ const SHOWCASE_COST_KEYS = [
   'mudPointCost',
 ] as const;
 
-const SHOWCASE_AUTHOR_KEYS = [
-  'authorName',
-  'creatorName',
-  'ownerLabel',
-  'ownerName',
-  'authorDisplayName',
-  'ownerUserId',
-] as const;
+const SHOWCASE_AUTHOR_KEYS = ['authorDisplayName', 'authorPublicUserCode'] as const;
 
 export const SHOWCASE_TABS: Array<{ id: ShowcaseTabId; label: string }> = [
   { id: 'packs', label: '素材包' },
   { id: 'characters', label: '角色' },
   { id: 'ui', label: 'UI' },
   { id: 'music', label: '音乐' },
-  { id: 'effects', label: '特效' },
-  { id: 'scenes', label: '场景' },
   { id: 'marketing', label: '美宣' },
-  { id: 'games', label: '游戏' },
 ];
 
 function assetRecord(asset: EditorAssetSnapshot) {
@@ -362,18 +349,6 @@ function isMarketingAsset(asset: EditorAssetSnapshot) {
   );
 }
 
-function isSceneAsset(asset: EditorAssetSnapshot) {
-  return /场景|scene|background/u.test(getAssetHaystack(asset));
-}
-
-function isEffectAsset(asset: EditorAssetSnapshot) {
-  return /特效|effect|vfx/u.test(getAssetHaystack(asset));
-}
-
-function isGameAsset(asset: EditorAssetSnapshot) {
-  return /游戏工程|game asset|game package|导出工程/u.test(getAssetHaystack(asset));
-}
-
 function addAssetToGroup(
   groups: Map<string, ShowcaseAssetGroup>,
   groupId: string,
@@ -575,13 +550,7 @@ function getGroupsForTab(assets: EditorAssetSnapshot[], tab: ShowcaseTabId) {
   if (tab === 'marketing') {
     return groupSingleAssets(assets, isMarketingAsset);
   }
-  if (tab === 'effects') {
-    return groupSingleAssets(assets, isEffectAsset);
-  }
-  if (tab === 'scenes') {
-    return groupSingleAssets(assets, isSceneAsset);
-  }
-  return groupSingleAssets(assets, isGameAsset);
+  return [];
 }
 
 function resolveAssetPrompt(asset: EditorAssetSnapshot) {
diff --git a/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx b/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx
index 9773e2429..a9f162eeb 100644
--- a/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx
+++ b/src/components/creative-agent/CreativeAgentTemplateConfirmPanel.test.tsx
@@ -46,17 +46,9 @@ test('shows cost range and opens an independent adjustment dialog', () => {
   fireEvent.click(within(confirmDialog).getByRole('button', { name: /调整/u }));
   const adjustDialog = screen.getByRole('dialog', { name: '调整拼图模板' });
   expect(adjustDialog.parentElement).not.toBe(confirmDialog);
-  expect(within(adjustDialog).getByText('关卡数').className).toContain(
-    'inline-flex',
-  );
+  expect(within(adjustDialog).getByText('关卡数')).toBeTruthy();
 
   fireEvent.click(within(adjustDialog).getByRole('button', { name: '多关卡' }));
-  const levelCountInput = within(adjustDialog).getByLabelText('计划关卡数');
-  expect(levelCountInput.className).toContain('bg-white/90');
-  expect(levelCountInput.className).toContain(
-    'focus:ring-[var(--platform-warm-border)]',
-  );
-  expect(levelCountInput.className).toContain('font-bold');
   fireEvent.change(within(adjustDialog).getByLabelText('计划关卡数'), {
     target: { value: '4' },
   });
@@ -86,14 +78,7 @@ test('template preview uses platform media frame with image and fallback states'
   );
 
   const previewImage = screen.getByRole('img', { name: '创意拼图' });
-  const previewFrame = previewImage.closest('div.relative');
-
-  expect(previewFrame?.className).toContain('aspect-[16/9]');
-  expect(previewFrame?.className).toContain(
-    'border-[var(--platform-subpanel-border)]',
-  );
-  expect(previewFrame?.className).toContain('bg-white/68');
-  expect(previewFrame?.className).toContain('rounded-[1.25rem]');
+  expect(previewImage.getAttribute('src')).toBe('/template-preview.webp');
 
   const selectionWithoutPreview = {
     ...createSelection(),
@@ -108,16 +93,6 @@ test('template preview uses platform media frame with image and fallback states'
     />,
   );
 
-  const fallbackFrame = screen
-    .getByRole('dialog', {
-      name: '确认拼图模板',
-    })
-    .querySelector('div.relative.aspect-\\[16\\/9\\]');
-  const fallbackIcon = fallbackFrame?.querySelector('svg');
-
-  expect(fallbackFrame?.className).toContain('aspect-[16/9]');
-  expect(fallbackFrame?.className).toContain(
-    'border-[var(--platform-subpanel-border)]',
-  );
-  expect(fallbackIcon?.closest('span')?.className).toContain('bg-white/84');
+  expect(screen.queryByRole('img', { name: '创意拼图' })).toBeNull();
+  expect(screen.getByRole('dialog', { name: '确认拼图模板' })).toBeTruthy();
 });
diff --git a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
index fe371467c..5d575ae4f 100644
--- a/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetFolderSectionView.tsx
@@ -66,6 +66,7 @@ type ImageCanvasAssetFolderSectionViewProps = {
   ) => void;
   toggleAssetSelected: (assetId: string) => void;
   addAssetLayer: (asset: EditorAsset) => void;
+  onDownloadAsset: (asset: EditorAsset) => void;
 };
 
 export function ImageCanvasAssetFolderSectionView({
@@ -97,6 +98,7 @@ export function ImageCanvasAssetFolderSectionView({
   setAssetPublicShowcaseEnabled,
   toggleAssetSelected,
   addAssetLayer,
+  onDownloadAsset,
 }: ImageCanvasAssetFolderSectionViewProps) {
   return (
     <section
@@ -256,6 +258,7 @@ export function ImageCanvasAssetFolderSectionView({
             setAssetPublicShowcaseEnabled={setAssetPublicShowcaseEnabled}
             toggleAssetSelected={toggleAssetSelected}
             addAssetLayer={addAssetLayer}
+            onDownloadAsset={onDownloadAsset}
           />
         ))}
       </div>
diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index ac4320a0c..ffdfaa990 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -96,6 +96,7 @@ export type ImageCanvasAssetLibraryPanelViewProps = {
   ) => void;
   toggleAssetSelected: (assetId: string) => void;
   addAssetLayer: (asset: EditorAsset) => void;
+  onDownloadAsset: (asset: EditorAsset) => void;
   toggleAllAssetsSelected: () => void;
   deleteSelectedAssets: () => void;
   closeAssetSelectionMode: () => void;
@@ -143,6 +144,7 @@ export function ImageCanvasAssetLibraryPanelView({
   setAssetPublicShowcaseEnabled,
   toggleAssetSelected,
   addAssetLayer,
+  onDownloadAsset,
   toggleAllAssetsSelected,
   deleteSelectedAssets,
   closeAssetSelectionMode,
@@ -234,6 +236,7 @@ export function ImageCanvasAssetLibraryPanelView({
           setAssetPublicShowcaseEnabled={setAssetPublicShowcaseEnabled}
           toggleAssetSelected={toggleAssetSelected}
           addAssetLayer={addAssetLayer}
+          onDownloadAsset={onDownloadAsset}
         />
       ))}
       {isAssetSelectionMode ? (
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
index 976c88abb..beaad4df0 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.test.tsx
@@ -2,11 +2,17 @@
 
 import { fireEvent, render, screen } from '@testing-library/react';
 import type { ReactNode } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { EditorAsset } from './ImageCanvasEditorTypes';
 import { ImageCanvasAssetRowView } from './ImageCanvasAssetRowView';
 
+const useResolvedAssetReadUrlMock = vi.hoisted(() => vi.fn());
+
+vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
+  useResolvedAssetReadUrl: useResolvedAssetReadUrlMock,
+}));
+
 vi.mock('../common/PlatformMediaFrame', () => ({
   PlatformMediaFrame: ({
     src,
@@ -32,6 +38,18 @@ vi.mock('../common/PlatformMediaFrame', () => ({
   ),
 }));
 
+beforeEach(() => {
+  useResolvedAssetReadUrlMock.mockImplementation(
+    (source: string | null | undefined, options?: { objectKey?: string | null }) => ({
+      resolvedUrl: options?.objectKey
+        ? `https://signed.example.com/${options.objectKey}`
+        : (source ?? ''),
+      isResolving: false,
+      shouldResolve: Boolean(options?.objectKey),
+    }),
+  );
+});
+
 function createAsset(overrides: Partial<EditorAsset> = {}): EditorAsset {
   return {
     id: 'asset-1',
@@ -58,6 +76,7 @@ function renderAssetRow({
   commitAssetRename = vi.fn(),
   deleteUploadedAsset = vi.fn(),
   setAssetPublicShowcaseEnabled = vi.fn(),
+  onDownloadAsset = vi.fn(),
 }: {
   asset?: EditorAsset;
   isAssetSelectionMode?: boolean;
@@ -72,6 +91,7 @@ function renderAssetRow({
     asset: EditorAsset,
     publicShowcaseEnabled: boolean,
   ) => void;
+  onDownloadAsset?: (asset: EditorAsset) => void;
 } = {}) {
   const props = {
     asset,
@@ -93,6 +113,7 @@ function renderAssetRow({
     setAssetPublicShowcaseEnabled,
     toggleAssetSelected,
     addAssetLayer,
+    onDownloadAsset,
   };
 
   render(<ImageCanvasAssetRowView {...props} />);
@@ -110,6 +131,46 @@ describe('ImageCanvasAssetRowView', () => {
     expect(addAssetLayer).toHaveBeenCalledWith(asset);
   });
 
+  it('downloads the asset from the row actions', () => {
+    const asset = createAsset();
+    const onDownloadAsset = vi.fn();
+    renderAssetRow({ asset, onDownloadAsset });
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '下载素材账号素材A' }),
+    );
+
+    expect(onDownloadAsset).toHaveBeenCalledWith(asset);
+  });
+
+  it('closes the right click menu when row actions run on the same asset', () => {
+    const asset = createAsset({
+      sourceResourceId: 'resource-asset-1',
+      publicShowcaseEnabled: true,
+    });
+    const addAssetLayer = vi.fn();
+    const onDownloadAsset = vi.fn();
+    renderAssetRow({ asset, addAssetLayer, onDownloadAsset });
+
+    fireEvent.contextMenu(screen.getByRole('button', { name: '添加账号素材A' }), {
+      clientX: 120,
+      clientY: 80,
+    });
+    expect(screen.getByRole('menu')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '下载素材账号素材A' }));
+    expect(onDownloadAsset).toHaveBeenCalledWith(asset);
+    expect(screen.queryByRole('menu')).toBeNull();
+
+    fireEvent.contextMenu(screen.getByRole('button', { name: '添加账号素材A' }), {
+      clientX: 120,
+      clientY: 80,
+    });
+    fireEvent.click(screen.getByRole('button', { name: '添加账号素材A' }));
+    expect(addAssetLayer).toHaveBeenCalledWith(asset);
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
   it('selects the asset instead of adding it in selection mode', () => {
     const addAssetLayer = vi.fn();
     const toggleAssetSelected = vi.fn();
@@ -187,16 +248,19 @@ describe('ImageCanvasAssetRowView', () => {
       asset: createAsset({
         label: '生成视频.mp4',
         src: '/generated-character-drafts/editor/asset-library/video/demo.mp4',
+        objectKey: 'generated-character-drafts/editor/asset-library/video/demo.mp4',
         mediaType: 'video',
       }),
     });
 
     expect(screen.getByText('视频')).toBeTruthy();
     expect(screen.queryByRole('img', { name: '素材：生成视频.mp4' })).toBeNull();
-    expect(
-      document.querySelector('.image-canvas-editor__media-preview--video')
-        ?.className,
-    ).toContain('image-canvas-editor__media-preview--variant-');
+    const video = screen.getByLabelText(
+      '视频素材预览：生成视频.mp4',
+    ) as HTMLVideoElement;
+    expect(video.getAttribute('src')).toBe(
+      'https://signed.example.com/generated-character-drafts/editor/asset-library/video/demo.mp4',
+    );
   });
 
   it('passes objectKey to image thumbnails in the asset library', () => {
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index d15e272a4..6782e3496 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -1,8 +1,10 @@
-import { Check, Music2, Pencil, Video, X } from 'lucide-react';
+import { Check, Download, Music2, Pencil, Video, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 
+import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
 import { PlatformTextField } from '../common/PlatformTextField';
+import type { UploadFilesOptions } from './ImageCanvasAssetLibraryPanelView';
 import {
   EditorIconButton,
   SidebarMediaItem,
@@ -21,7 +23,6 @@ import {
   getCanvasMediaPreviewClassName,
   getCanvasMediaPreviewMarker,
 } from './ImageCanvasMediaModel';
-import type { UploadFilesOptions } from './ImageCanvasAssetLibraryPanelView';
 
 export type ImageCanvasAssetRowViewProps = {
   asset: EditorAsset;
@@ -48,6 +49,7 @@ export type ImageCanvasAssetRowViewProps = {
   ) => void;
   toggleAssetSelected: (assetId: string) => void;
   addAssetLayer: (asset: EditorAsset) => void;
+  onDownloadAsset: (asset: EditorAsset) => void;
 };
 
 export function ImageCanvasAssetRowView({
@@ -70,6 +72,7 @@ export function ImageCanvasAssetRowView({
   setAssetPublicShowcaseEnabled,
   toggleAssetSelected,
   addAssetLayer,
+  onDownloadAsset,
 }: ImageCanvasAssetRowViewProps) {
   const rowRef = useRef<HTMLDivElement | null>(null);
   const [menuPosition, setMenuPosition] = useState<{
@@ -116,6 +119,25 @@ export function ImageCanvasAssetRowView({
   const mediaPreviewMarker = getCanvasMediaPreviewMarker(asset);
   const mediaPreviewClassName =
     getCanvasMediaPreviewClassName(mediaPreviewMarker);
+  const { resolvedUrl: resolvedVideoPreviewUrl } = useResolvedAssetReadUrl(
+    asset.mediaType === 'video' ? asset.src : '',
+    {
+      enabled: asset.mediaType === 'video' && !asset.thumbnailSrc?.trim(),
+      objectKey: asset.mediaType === 'video' ? asset.objectKey : undefined,
+      refreshKey: asset.id,
+    },
+  );
+  const videoPreview =
+    asset.mediaType === 'video' && !asset.thumbnailSrc?.trim() ? (
+      <video
+        className="image-canvas-editor__asset-video-preview"
+        src={resolvedVideoPreviewUrl || undefined}
+        muted
+        playsInline
+        preload="metadata"
+        aria-label={`视频素材预览：${asset.label}`}
+      />
+    ) : undefined;
   const mediaDetail =
     asset.mediaType === 'audio'
       ? '音频'
@@ -184,11 +206,23 @@ export function ImageCanvasAssetRowView({
     </div>
   ) : (
     <div className="image-canvas-editor__asset-actions">
+      <EditorIconButton
+        label={`下载素材${asset.label}`}
+        title="下载"
+        icon={Download}
+        onClick={() => {
+          closeMenu();
+          onDownloadAsset(asset);
+        }}
+      />
       <EditorIconButton
         label={`重命名素材${asset.label}`}
         title="重命名"
         icon={Pencil}
-        onClick={() => startRenamingAsset(asset)}
+        onClick={() => {
+          closeMenu();
+          startRenamingAsset(asset);
+        }}
       />
     </div>
   );
@@ -223,6 +257,7 @@ export function ImageCanvasAssetRowView({
           if (isUploadingAsset || isFailedUpload) {
             return;
           }
+          closeMenu();
           if (suppressAssetClickRef.current) {
             return;
           }
@@ -251,6 +286,7 @@ export function ImageCanvasAssetRowView({
             : (asset.thumbnailSrc ?? '')
         }
         objectKey={asset.mediaType === 'image' ? asset.objectKey : undefined}
+        previewNode={videoPreview}
         titleNode={
           isUploadingAsset || isFailedUpload ? <span>{asset.label}</span> : titleNode
         }
diff --git a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
index 2036eeb09..23b9254fa 100644
--- a/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx
@@ -16,14 +16,27 @@ import { PlatformTextField } from '../common/PlatformTextField';
 import type {
   CharacterReferenceImage,
   GenerateDialogState,
+  UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
 import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
-import {
-  calculateEditorImageGenerationPrice,
-} from './ImageCanvasGenerationModel';
+import { calculateEditorImageGenerationPrice } from './ImageCanvasGenerationModel';
 import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
+type ReferenceLabelFormatter = (
+  reference: CharacterReferenceImage,
+  index: number,
+) => string;
+
+type ReferenceTone =
+  | 'default'
+  | 'spec'
+  | 'icon'
+  | 'ui'
+  | 'quick-edit'
+  | 'video'
+  | 'audio';
+
 type ImageCanvasBasicGenerationComposerViewProps = {
   dialog: GenerateDialogState;
   style: CSSProperties;
@@ -37,11 +50,41 @@ type ImageCanvasBasicGenerationComposerViewProps = {
     anchor: HTMLElement | null,
     placement: 'above' | 'below',
   ) => CSSProperties;
-  onRequestUpload: (target: 'generation-reference') => void;
+  onRequestUpload: (target: UploadTarget) => void;
+  onPickReferenceFromCanvas?: () => void;
   onToggleReferenceMenu?: () => void;
   onRememberImageModel?: (model: string) => void;
   onSubmit: (dialog: GenerateDialogState) => void;
+  dialogLabel?: string;
+  includeDimensions?: boolean;
+  includeModel?: boolean;
+  includeReferences?: boolean;
+  promptLabel?: string;
+  promptPlaceholder?: string;
+  optionLabelPrefix?: string;
+  dimensionRatioAriaLabelPrefix?: string;
+  dimensionSizeAriaLabelPrefix?: string;
+  referenceUploadTarget?: UploadTarget;
+  referenceButtonIcon?: ReactNode;
+  referenceButtonLabel?: string;
+  referenceButtonAriaLabel?: string;
+  referenceMenuLabel?: string;
+  referenceSlotTone?: ReferenceTone;
+  referenceSlotDisabled?: boolean;
+  referenceLabelFormatter?: ReferenceLabelFormatter;
+  referenceAriaLabelFormatter?: ReferenceLabelFormatter;
+  referenceRemoveLabelFormatter?: ReferenceLabelFormatter;
+  showReferenceAddButton?: boolean;
+  formClassName?: string;
+  footerClassName?: string;
+  promptClassName?: string;
+  referenceSlotClassName?: string;
+  submitButtonClassName?: string;
+  submitLabel?: string;
+  submitAriaLabel?: string;
+  submittingStatusLabel?: string;
 };
+
 function resetFailedDialogStatus(dialog: GenerateDialogState) {
   return {
     ...dialog,
@@ -50,31 +93,6 @@ function resetFailedDialogStatus(dialog: GenerateDialogState) {
   };
 }
 
-function ReferenceChip({
-  reference,
-  index,
-  onRemove,
-}: {
-  reference: CharacterReferenceImage;
-  index: number;
-  onRemove: () => void;
-}) {
-  const label = reference.label || `参考图${index + 1}`;
-  return (
-    <ImageCanvasReferenceSlot
-      tone="default"
-      icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-      imageSrc={reference.src}
-      objectKey={reference.objectKey}
-      label={label}
-      ariaLabel={label}
-      title={reference.label}
-      onRemove={onRemove}
-      removeLabel={`删除${label}`}
-    />
-  );
-}
-
 export function ImageCanvasBasicGenerationComposerView({
   dialog,
   style,
@@ -86,12 +104,60 @@ export function ImageCanvasBasicGenerationComposerView({
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
   onRequestUpload,
+  onPickReferenceFromCanvas,
   onToggleReferenceMenu,
   onRememberImageModel = () => {},
   onSubmit,
+  dialogLabel,
+  includeDimensions = true,
+  includeModel = true,
+  includeReferences = true,
+  promptLabel,
+  promptPlaceholder,
+  optionLabelPrefix,
+  dimensionRatioAriaLabelPrefix,
+  dimensionSizeAriaLabelPrefix,
+  referenceUploadTarget = 'generation-reference',
+  referenceButtonIcon = <ImageIcon className="h-4 w-4" aria-hidden="true" />,
+  referenceButtonLabel = '参考图',
+  referenceButtonAriaLabel = '添加参考图',
+  referenceMenuLabel = '参考图来源',
+  referenceSlotTone = 'default',
+  referenceSlotDisabled = false,
+  referenceLabelFormatter,
+  referenceAriaLabelFormatter,
+  referenceRemoveLabelFormatter,
+  showReferenceAddButton = true,
+  formClassName,
+  footerClassName,
+  promptClassName = 'image-canvas-editor__generation-prompt',
+  referenceSlotClassName,
+  submitButtonClassName = 'image-canvas-editor__generation-submit',
+  submitLabel = '生成',
+  submitAriaLabel = '生成',
+  submittingStatusLabel = '生成中',
 }: ImageCanvasBasicGenerationComposerViewProps) {
   const references = dialog.generationReferences ?? [];
   const isQuickEdit = dialog.mode === 'quick-edit';
+  const resolvedDialogLabel =
+    dialogLabel ?? optionLabelPrefix ?? (isQuickEdit ? '快速编辑图片' : '生成图片');
+  const resolvedPromptLabel =
+    promptLabel ?? (isQuickEdit ? '快速编辑提示词' : '生成提示词');
+  const resolvedPromptPlaceholder =
+    promptPlaceholder ??
+    (isQuickEdit ? '想怎么编辑这张图？' : '今天想生成什么画面？');
+  const resolvedOptionLabelPrefix =
+    optionLabelPrefix ?? (isQuickEdit ? '快速编辑图片' : '生成图片');
+  const resolvedReferenceButtonLabel = referenceButtonLabel;
+  const resolvedReferenceButtonAriaLabel =
+    referenceButtonAriaLabel ?? `添加${resolvedReferenceButtonLabel}`;
+  const hasReferenceMenu = includeReferences && onRequestUpload;
+  const finalFormClassName =
+    formClassName ??
+    'image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image';
+  const finalFooterClassName =
+    footerClassName ?? 'image-canvas-editor__generation-composer-footer';
+
   useImageCanvasFloatingOptionDismiss({
     isOpen: isGenerationReferenceMenuOpen,
     boundaryRefs: [generationReferenceButtonRef],
@@ -101,10 +167,10 @@ export function ImageCanvasBasicGenerationComposerView({
   return (
     <>
       <form
-        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image"
+        className={finalFormClassName}
         style={style}
         role="dialog"
-        aria-label={isQuickEdit ? '改造图片' : '生成图片'}
+        aria-label={resolvedDialogLabel}
         onPointerDown={(event) => event.stopPropagation()}
         onSubmit={(event) => {
           event.preventDefault();
@@ -113,102 +179,133 @@ export function ImageCanvasBasicGenerationComposerView({
           }
         }}
       >
-      <div className="image-canvas-editor__reference-strip">
-        {references.map((reference, index) => (
-          <ReferenceChip
-            key={reference.id}
-            reference={reference}
-            index={index}
-            onRemove={() =>
-              setGenerateDialog((currentDialog) =>
-                currentDialog
-                  ? {
-                      ...resetFailedDialogStatus(currentDialog),
-                      generationReferences: (
-                        currentDialog.generationReferences ?? []
-                      ).filter((item) => item.id !== reference.id),
-                    }
-                  : currentDialog,
-              )
-            }
-          />
-        ))}
-        <ImageCanvasReferenceSlot
-          buttonRef={generationReferenceButtonRef}
-          tone="default"
-          icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-          label="参考图"
-          ariaLabel="添加参考图"
-          disabled={dialog.status === 'generating'}
-          isAdd
-          onClick={() => onToggleReferenceMenu?.()}
-        />
-      </div>
-      <PlatformTextField
-        variant="textarea"
-        aria-label={isQuickEdit ? '改造提示词' : '生成提示词'}
-        value={dialog.prompt}
-        disabled={dialog.status === 'generating'}
-        placeholder={isQuickEdit ? '想怎么改造这张图？' : '今天想生成什么画面？'}
-        size="sm"
-        density="compact"
-        className="image-canvas-editor__generation-prompt"
-        onChange={(event) =>
-          setGenerateDialog((currentDialog) =>
-            currentDialog
-              ? {
-                  ...resetFailedDialogStatus(currentDialog),
-                  prompt: event.target.value,
+        {includeReferences ? (
+          <div className="image-canvas-editor__reference-strip">
+            {references.map((reference, index) => {
+              const label =
+                (referenceLabelFormatter?.(reference, index) ??
+                  reference.label) ||
+                `参考图${index + 1}`;
+              const ariaLabel =
+                referenceAriaLabelFormatter?.(reference, index) ?? label;
+              const removeLabel =
+                referenceRemoveLabelFormatter?.(reference, index) ??
+                `删除${ariaLabel}`;
+
+              return (
+                <ImageCanvasReferenceSlot
+                  key={reference.id}
+                  tone={referenceSlotTone}
+                  icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+                  imageSrc={reference.src}
+                  objectKey={reference.objectKey}
+                  label={label}
+                  ariaLabel={ariaLabel}
+                  title={reference.label}
+                  onRemove={() =>
+                    setGenerateDialog((currentDialog) =>
+                      currentDialog
+                        ? {
+                            ...resetFailedDialogStatus(currentDialog),
+                            generationReferences: (
+                              currentDialog.generationReferences ?? []
+                            ).filter((item) => item.id !== reference.id),
+                          }
+                        : currentDialog,
+                    )
+                  }
+                  removeLabel={removeLabel}
+                  className={referenceSlotClassName}
+                />
+              );
+            })}
+            {showReferenceAddButton ? (
+              <ImageCanvasReferenceSlot
+                buttonRef={generationReferenceButtonRef}
+                tone={referenceSlotTone}
+                icon={referenceButtonIcon}
+                label={resolvedReferenceButtonLabel}
+                ariaLabel={resolvedReferenceButtonAriaLabel}
+                disabled={
+                  dialog.status === 'generating' || referenceSlotDisabled
                 }
-              : currentDialog,
-          )
-        }
-      />
-      <div className="image-canvas-editor__generation-composer-footer">
-        <ImageCanvasGenerationImageOptionsView
-          dialog={dialog}
-          setGenerateDialog={setGenerateDialog}
-          includeDimensions
-          onRememberImageModel={onRememberImageModel}
-          optionLabelPrefix={isQuickEdit ? '改造图片' : '生成图片'}
-          cost={calculateEditorImageGenerationPrice({
-            model: dialog.imageModel,
-            imageSize: dialog.imageSize,
-          })}
-          submitLabel="生成"
-          submitAriaLabel="生成"
-          renderEditorPortal={renderEditorPortal}
-          buildPortalMenuStyle={buildPortalMenuStyle}
+                isAdd
+                onClick={() => onToggleReferenceMenu?.()}
+              />
+            ) : null}
+          </div>
+        ) : null}
+        <PlatformTextField
+          variant="textarea"
+          aria-label={resolvedPromptLabel}
+          value={dialog.prompt}
+          disabled={dialog.status === 'generating'}
+          placeholder={resolvedPromptPlaceholder}
+          size="sm"
+          density="compact"
+          className={promptClassName}
+          onChange={(event) =>
+            setGenerateDialog((currentDialog) =>
+              currentDialog
+                ? {
+                    ...resetFailedDialogStatus(currentDialog),
+                    prompt: event.target.value,
+                  }
+                : currentDialog,
+            )
+          }
         />
-      </div>
-      {dialog.status === 'generating' ? (
-        <PlatformStatusMessage
-          tone="info"
-          surface="platform"
-          size="xs"
-          className="image-canvas-editor__generate-status"
-          role="status"
-        >
-          生成中
-        </PlatformStatusMessage>
-      ) : null}
-      {dialog.status === 'failed' ? (
-        <PlatformStatusMessage
-          tone="error"
-          surface="platform"
-          size="xs"
-          className="image-canvas-editor__generate-status"
-          role="alert"
-        >
-          {dialog.errorMessage}
-        </PlatformStatusMessage>
-      ) : null}
+        <div className={finalFooterClassName}>
+          <ImageCanvasGenerationImageOptionsView
+            dialog={dialog}
+            setGenerateDialog={setGenerateDialog}
+            includeDimensions={includeDimensions}
+            includeModel={includeModel}
+            onRememberImageModel={onRememberImageModel}
+            dimensionRatioAriaLabelPrefix={dimensionRatioAriaLabelPrefix}
+            dimensionSizeAriaLabelPrefix={dimensionSizeAriaLabelPrefix}
+            optionLabelPrefix={resolvedOptionLabelPrefix}
+            cost={calculateEditorImageGenerationPrice({
+              model: dialog.imageModel,
+              imageSize: dialog.imageSize,
+            })}
+            submitLabel={submitLabel}
+            submitAriaLabel={submitAriaLabel}
+            submitButtonClassName={submitButtonClassName}
+            renderEditorPortal={renderEditorPortal}
+            buildPortalMenuStyle={buildPortalMenuStyle}
+          />
+        </div>
+        {dialog.status === 'generating' ? (
+          <PlatformStatusMessage
+            tone="info"
+            surface="platform"
+            size="xs"
+            className="image-canvas-editor__generate-status"
+            role="status"
+          >
+            {submittingStatusLabel}
+          </PlatformStatusMessage>
+        ) : null}
+        {dialog.status === 'failed' ? (
+          <PlatformStatusMessage
+            tone="error"
+            surface="platform"
+            size="xs"
+            className="image-canvas-editor__generate-status"
+            role="alert"
+          >
+            {dialog.errorMessage}
+          </PlatformStatusMessage>
+        ) : null}
       </form>
-      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
+      {hasReferenceMenu &&
+      isGenerationReferenceMenuOpen &&
+      generationReferenceButtonRef
         ? renderEditorPortal(
             <PlatformFloatingMenu
               className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-              label="参考图来源"
+              label={referenceMenuLabel}
               placement="top-start"
               style={buildPortalMenuStyle(
                 generationReferenceButtonRef.current,
@@ -218,7 +315,11 @@ export function ImageCanvasBasicGenerationComposerView({
               <PlatformFloatingMenuItem
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen?.(false);
-                  setIsPickingGenerationReferenceFromCanvas?.(true);
+                  if (onPickReferenceFromCanvas) {
+                    onPickReferenceFromCanvas();
+                  } else {
+                    setIsPickingGenerationReferenceFromCanvas?.(true);
+                  }
                 }}
               >
                 从画布中选择
@@ -227,7 +328,7 @@ export function ImageCanvasBasicGenerationComposerView({
                 onClick={() => {
                   setIsGenerationReferenceMenuOpen?.(false);
                   setIsPickingGenerationReferenceFromCanvas?.(false);
-                  onRequestUpload('generation-reference');
+                  onRequestUpload(referenceUploadTarget);
                 }}
               >
                 上传图片
diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
index 3e714d965..aab1ed80f 100644
--- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx
@@ -1,18 +1,21 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen, within } from '@testing-library/react';
-import { createRef } from 'react';
+import { createRef, type RefObject } from 'react';
 import { describe, expect, it, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { ImageCanvasBottomToolbarView } from './ImageCanvasBottomToolbarView';
 
 describe('ImageCanvasBottomToolbarView', () => {
-  it('renders the canvas tools and forwards tool changes', () => {
+  function renderToolbar(
+    overrides: Partial<Parameters<typeof ImageCanvasBottomToolbarView>[0]> = {},
+  ) {
     const switchTool = vi.fn();
     const specToolWrapRef = createRef<HTMLSpanElement>();
     const musicToolWrapRef = createRef<HTMLSpanElement>();
     const publicationToolWrapRef = createRef<HTMLSpanElement>();
-    render(
+    const view = render(
       <ImageCanvasBottomToolbarView
         specToolWrapRef={specToolWrapRef}
         musicToolWrapRef={musicToolWrapRef}
@@ -21,71 +24,88 @@ describe('ImageCanvasBottomToolbarView', () => {
         onSwitchTool={switchTool}
         onOpenToolOptions={vi.fn()}
         onCloseToolOptions={vi.fn()}
+        {...overrides}
       />,
     );
 
-    const toolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
+    return {
+      ...view,
+      toolbar: screen.getByRole('toolbar', { name: 'AI画布工具栏' }),
+      switchTool,
+      refs: {
+        specToolWrapRef,
+        musicToolWrapRef,
+        publicationToolWrapRef,
+      },
+    };
+  }
 
-    expect(
-      within(toolbar)
-        .getByRole('button', { name: '生成图片' })
-        .getAttribute('aria-pressed'),
-    ).toBe('false');
-    expect(
-      within(toolbar)
-        .getByRole('button', { name: '选择工具' })
-        .getAttribute('aria-pressed'),
-    ).toBe('false');
-
-    fireEvent.click(within(toolbar).getByRole('button', { name: '抓手工具' }));
-    fireEvent.click(within(toolbar).getByRole('button', { name: '生成视频' }));
-    fireEvent.click(within(toolbar).getByRole('button', { name: '生成规范' }));
-    fireEvent.click(
-      within(toolbar).getByRole('button', { name: '生成UI设计图' }),
-    );
-    fireEvent.click(within(toolbar).getByRole('button', { name: '生成音乐' }));
-    fireEvent.click(
-      within(toolbar).getByRole('button', { name: '生成图标素材' }),
-    );
-    fireEvent.click(within(toolbar).getByRole('button', { name: '宣发素材' }));
-
-    expect(switchTool).toHaveBeenNthCalledWith(1, 'hand');
-    expect(switchTool).toHaveBeenNthCalledWith(2, 'video');
-    expect(switchTool).toHaveBeenNthCalledWith(3, 'spec');
-    expect(switchTool).toHaveBeenNthCalledWith(4, 'ui-design');
-    expect(switchTool).toHaveBeenNthCalledWith(5, 'music');
-    expect(switchTool).toHaveBeenNthCalledWith(6, 'icon');
-    expect(switchTool).toHaveBeenNthCalledWith(7, 'publication');
-  });
-
-  it('only keeps the select and hand tools visibly pressed', () => {
-    const specToolWrapRef = createRef<HTMLSpanElement>();
-    const musicToolWrapRef = createRef<HTMLSpanElement>();
-    const publicationToolWrapRef = createRef<HTMLSpanElement>();
-    const renderToolbar = (effectiveTool: Parameters<
+  function renderToolbarView(
+    effectiveTool: Parameters<
       typeof ImageCanvasBottomToolbarView
-    >[0]['effectiveTool']) => (
+    >[0]['effectiveTool'],
+    refs: {
+      specToolWrapRef: RefObject<HTMLSpanElement | null>;
+      musicToolWrapRef: RefObject<HTMLSpanElement | null>;
+      publicationToolWrapRef: RefObject<HTMLSpanElement | null>;
+    },
+  ) {
+    return (
       <ImageCanvasBottomToolbarView
-        specToolWrapRef={specToolWrapRef}
-        musicToolWrapRef={musicToolWrapRef}
-        publicationToolWrapRef={publicationToolWrapRef}
+        specToolWrapRef={refs.specToolWrapRef}
+        musicToolWrapRef={refs.musicToolWrapRef}
+        publicationToolWrapRef={refs.publicationToolWrapRef}
         effectiveTool={effectiveTool}
         onSwitchTool={vi.fn()}
         onOpenToolOptions={vi.fn()}
         onCloseToolOptions={vi.fn()}
       />
     );
+  }
 
-    const { rerender } = render(renderToolbar('select'));
-    const toolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
+  it('renders the expected canvas tools and forwards user selections', async () => {
+    const user = userEvent.setup();
+    const { toolbar, switchTool } = renderToolbar();
+
+    const toolExpectations = [
+      ['选择工具', 'select'],
+      ['抓手工具', 'hand'],
+      ['上传工具', 'upload'],
+      ['生成图片', 'generate'],
+      ['生成视频', 'video'],
+      ['生成音乐', 'music'],
+      ['生成规范', 'spec'],
+      ['生成角色形象', 'character'],
+      ['生成图标素材', 'icon'],
+      ['生成UI设计图', 'ui-design'],
+      ['宣发素材', 'publication'],
+    ] as const;
+
+    for (const [label, tool] of toolExpectations) {
+      await user.click(within(toolbar).getByRole('button', { name: label }));
+      expect(switchTool).toHaveBeenLastCalledWith(tool);
+    }
+
+    expect(switchTool).toHaveBeenCalledTimes(toolExpectations.length);
+  });
+
+  it('only exposes persistent pressed state for navigation tools', () => {
+    const { toolbar, rerender, refs } = renderToolbar({
+      effectiveTool: 'select',
+    });
 
     expect(
       within(toolbar)
         .getByRole('button', { name: '选择工具' })
         .getAttribute('aria-pressed'),
     ).toBe('true');
+    expect(
+      within(toolbar)
+        .getByRole('button', { name: '生成图片' })
+        .getAttribute('aria-pressed'),
+    ).toBe('false');
 
-    rerender(renderToolbar('hand'));
+    rerender(renderToolbarView('hand', refs));
 
     expect(
       within(toolbar)
@@ -93,119 +113,44 @@ describe('ImageCanvasBottomToolbarView', () => {
         .getAttribute('aria-pressed'),
     ).toBe('true');
 
-    for (const tool of [
-      ['upload', '上传工具'],
-      ['generate', '生成图片'],
-      ['video', '生成视频'],
-      ['music', '生成音乐'],
-      ['spec', '生成规范'],
-      ['character', '生成角色形象'],
-      ['icon', '生成图标素材'],
-      ['ui-design', '生成UI设计图'],
-      ['publication', '宣发素材'],
-    ] as const) {
-      rerender(renderToolbar(tool[0]));
-
-      expect(
-        within(toolbar)
-          .getByRole('button', { name: tool[1] })
-          .getAttribute('aria-pressed'),
-      ).toBe('false');
-    }
-  });
-
-  it('把宣发素材入口放在生成UI设计图右侧', () => {
-    const specToolWrapRef = createRef<HTMLSpanElement>();
-    const musicToolWrapRef = createRef<HTMLSpanElement>();
-    const publicationToolWrapRef = createRef<HTMLSpanElement>();
-    render(
-      <ImageCanvasBottomToolbarView
-        specToolWrapRef={specToolWrapRef}
-        musicToolWrapRef={musicToolWrapRef}
-        publicationToolWrapRef={publicationToolWrapRef}
-        effectiveTool="select"
-        onSwitchTool={vi.fn()}
-        onOpenToolOptions={vi.fn()}
-        onCloseToolOptions={vi.fn()}
-      />,
-    );
-
-    const toolNames = within(
-      screen.getByRole('toolbar', { name: 'AI画布工具栏' }),
-    )
-      .getAllByRole('button')
-      .map((button) => button.getAttribute('aria-label'));
-
-    expect(toolNames).toEqual([
-      '选择工具',
-      '抓手工具',
-      '上传工具',
-      '生成图片',
-      '生成视频',
-      '生成音乐',
-      '生成规范',
-      '生成角色形象',
-      '生成图标素材',
-      '生成UI设计图',
-      '宣发素材',
-    ]);
-  });
-
-  it('uses an upload-specific icon for the upload tool', () => {
-    const specToolWrapRef = createRef<HTMLSpanElement>();
-    const musicToolWrapRef = createRef<HTMLSpanElement>();
-    const publicationToolWrapRef = createRef<HTMLSpanElement>();
-    render(
-      <ImageCanvasBottomToolbarView
-        specToolWrapRef={specToolWrapRef}
-        musicToolWrapRef={musicToolWrapRef}
-        publicationToolWrapRef={publicationToolWrapRef}
-        effectiveTool="select"
-        onSwitchTool={vi.fn()}
-        onOpenToolOptions={vi.fn()}
-        onCloseToolOptions={vi.fn()}
-      />,
-    );
+    rerender(renderToolbarView('music', refs));
 
     expect(
-      within(
-        screen.getByRole('toolbar', { name: 'AI画布工具栏' }),
-      )
-        .getByRole('button', { name: '上传工具' })
-        .querySelector('.lucide-upload'),
-    ).toBeTruthy();
+      within(toolbar)
+        .getByRole('button', { name: '生成音乐' })
+        .getAttribute('aria-pressed'),
+    ).toBe('false');
   });
 
-  it('opens and closes bottom option tools on hover', () => {
+  it('opens and closes bottom option tools on pointer and keyboard focus', async () => {
+    const user = userEvent.setup();
     const openToolOptions = vi.fn();
     const closeToolOptions = vi.fn();
-    const specToolWrapRef = createRef<HTMLSpanElement>();
-    const musicToolWrapRef = createRef<HTMLSpanElement>();
-    const publicationToolWrapRef = createRef<HTMLSpanElement>();
-    render(
-      <ImageCanvasBottomToolbarView
-        specToolWrapRef={specToolWrapRef}
-        musicToolWrapRef={musicToolWrapRef}
-        publicationToolWrapRef={publicationToolWrapRef}
-        effectiveTool="select"
-        onSwitchTool={vi.fn()}
-        onOpenToolOptions={openToolOptions}
-        onCloseToolOptions={closeToolOptions}
-      />,
+    const { toolbar, refs } = renderToolbar({
+      onOpenToolOptions: openToolOptions,
+      onCloseToolOptions: closeToolOptions,
+    });
+
+    await user.hover(within(toolbar).getByRole('button', { name: '生成规范' }));
+    await user.unhover(
+      within(toolbar).getByRole('button', { name: '生成规范' }),
+    );
+    await user.hover(within(toolbar).getByRole('button', { name: '生成音乐' }));
+    await user.unhover(
+      within(toolbar).getByRole('button', { name: '生成音乐' }),
     );
 
-    fireEvent.pointerEnter(specToolWrapRef.current!);
-    fireEvent.pointerLeave(specToolWrapRef.current!);
-    fireEvent.pointerEnter(musicToolWrapRef.current!);
-    fireEvent.pointerLeave(musicToolWrapRef.current!);
-    fireEvent.pointerEnter(publicationToolWrapRef.current!);
-    fireEvent.pointerLeave(publicationToolWrapRef.current!);
+    const publicationTool = within(toolbar).getByRole('button', {
+      name: '宣发素材',
+    });
+    publicationTool.focus();
+    publicationTool.blur();
 
-    expect(openToolOptions).toHaveBeenNthCalledWith(1, 'spec');
-    expect(closeToolOptions).toHaveBeenNthCalledWith(1, 'spec');
-    expect(openToolOptions).toHaveBeenNthCalledWith(2, 'music');
-    expect(closeToolOptions).toHaveBeenNthCalledWith(2, 'music');
-    expect(openToolOptions).toHaveBeenNthCalledWith(3, 'publication');
-    expect(closeToolOptions).toHaveBeenNthCalledWith(3, 'publication');
+    expect(openToolOptions).toHaveBeenCalledWith('spec');
+    expect(closeToolOptions).toHaveBeenCalledWith('spec');
+    expect(openToolOptions).toHaveBeenCalledWith('music');
+    expect(closeToolOptions).toHaveBeenCalledWith('music');
+    expect(openToolOptions).toHaveBeenCalledWith('publication');
+    expect(closeToolOptions).toHaveBeenCalledWith('publication');
   });
 });
diff --git a/src/components/image-editor/ImageCanvasContextMenusView.test.tsx b/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
index 92bba1006..2b1eda018 100644
--- a/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
+++ b/src/components/image-editor/ImageCanvasContextMenusView.test.tsx
@@ -3,8 +3,8 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import { ImageCanvasContextMenusView } from './ImageCanvasContextMenusView';
+import type { CanvasLayer } from './ImageCanvasEditorTypes';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
@@ -33,6 +33,7 @@ function renderContextMenus(
     canvasClipboard: null,
     imageContextMenu: null,
     imageContextMenuLayer: null,
+    contextMenuLayer: null,
     contextShouldShowLayer: false,
     contextShouldUnlockLayer: false,
     onPasteCanvasClipboard: vi.fn(),
@@ -81,8 +82,27 @@ describe('ImageCanvasContextMenusView', () => {
     expect(props.onCloseContextMenu).toHaveBeenCalledTimes(2);
   });
 
+  it('closes canvas context menus when another operation starts outside', () => {
+    const props = renderContextMenus({
+      contextMenu: {
+        kind: 'blank',
+        x: 10,
+        y: 12,
+        canvasPoint: { x: 18, y: 24 },
+      },
+    });
+
+    fireEvent.pointerDown(document.body);
+
+    expect(props.onCloseContextMenu).toHaveBeenCalledTimes(1);
+    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(1);
+  });
+
   it('renders layer context commands and forwards layer operations', () => {
-    const layer = createLayer({ assetKind: 'character' });
+    const layer = createLayer({
+      assetKind: 'character',
+      mediaType: 'image-sequence',
+    });
     const props = renderContextMenus({
       contextMenu: {
         kind: 'layer',
@@ -93,6 +113,7 @@ describe('ImageCanvasContextMenusView', () => {
       },
       canvasClipboard: { layers: [layer], mode: 'copy' },
       imageContextMenuLayer: layer,
+      contextMenuLayer: layer,
       contextShouldShowLayer: true,
       contextShouldUnlockLayer: true,
     });
@@ -104,6 +125,18 @@ describe('ImageCanvasContextMenusView', () => {
     fireEvent.click(screen.getByRole('menuitem', { name: '显示' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '解锁' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '水平翻转' }));
+    expect(
+      screen
+        .getByRole('menuitem', { name: '导出为' })
+        .getAttribute('aria-haspopup'),
+    ).toBe('menu');
+    fireEvent.click(
+      screen.getByRole('menuitem', { name: '序列帧导出（zip）' }),
+    );
+    fireEvent.click(
+      screen.getByRole('menuitem', { name: 'Spine 导出（zip）' }),
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '快速编辑' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '生成动画' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '删除' }));
 
@@ -114,9 +147,18 @@ describe('ImageCanvasContextMenusView', () => {
     expect(props.onToggleContextLayerVisibility).toHaveBeenCalledTimes(1);
     expect(props.onToggleContextLayerLock).toHaveBeenCalledTimes(1);
     expect(props.onFlipContextLayers).toHaveBeenCalledWith('x');
+    expect(props.onExportContextLayer).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({ mode: 'sequence-with-preview' }),
+    );
+    expect(props.onExportContextLayer).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({ mode: 'spine-json' }),
+    );
+    expect(props.onOpenQuickEditPanel).toHaveBeenCalledWith(layer);
     expect(props.onOpenCharacterAnimationPanel).toHaveBeenCalledWith(layer);
-    expect(props.onCloseContextMenu).toHaveBeenCalledTimes(1);
-    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(1);
+    expect(props.onCloseContextMenu).toHaveBeenCalledTimes(2);
+    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(2);
     expect(props.onDeleteContextLayers).toHaveBeenCalledTimes(1);
   });
 
@@ -146,7 +188,7 @@ describe('ImageCanvasContextMenusView', () => {
 
     expect(props.onOpenQuickEditPanel).toHaveBeenCalledWith(layer);
     expect(props.onOpenLayerMetadata).toHaveBeenCalledWith(layer);
-    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(1);
+    expect(props.onCloseImageContextMenu).toHaveBeenCalledTimes(2);
     expect(props.onDeleteLayerById).toHaveBeenCalledWith(layer.id);
   });
 });
diff --git a/src/components/image-editor/ImageCanvasContextMenusView.tsx b/src/components/image-editor/ImageCanvasContextMenusView.tsx
index 46cd1ad49..293a74738 100644
--- a/src/components/image-editor/ImageCanvasContextMenusView.tsx
+++ b/src/components/image-editor/ImageCanvasContextMenusView.tsx
@@ -1,4 +1,9 @@
-import { PlatformFloatingMenu, PlatformFloatingMenuItem } from '../common/PlatformFloatingMenu';
+import { useCallback, useEffect, useRef } from 'react';
+
+import {
+  PlatformFloatingMenu,
+  PlatformFloatingMenuItem,
+} from '../common/PlatformFloatingMenu';
 import type {
   CanvasClipboard,
   CanvasContextMenuState,
@@ -13,6 +18,7 @@ type ImageCanvasContextMenusViewProps = {
   canvasClipboard: CanvasClipboard | null;
   imageContextMenu: ImageContextMenuState | null;
   imageContextMenuLayer: CanvasLayer | null;
+  contextMenuLayer: CanvasLayer | null;
   contextShouldShowLayer: boolean;
   contextShouldUnlockLayer: boolean;
   onPasteCanvasClipboard: (canvasPoint?: { x: number; y: number }) => void;
@@ -24,7 +30,9 @@ type ImageCanvasContextMenusViewProps = {
   onToggleContextLayerVisibility: () => void;
   onToggleContextLayerLock: () => void;
   onFlipContextLayers: (axis: 'x' | 'y') => void;
-  onExportContextLayer: () => void;
+  onExportContextLayer: (options?: {
+    mode?: 'spine-json' | 'sequence-with-preview';
+  }) => void;
   onDeleteContextLayers: () => void;
   onDeleteLayerById: (layerId: string | null) => void;
   onCloseContextMenu: () => void;
@@ -42,6 +50,7 @@ export function ImageCanvasContextMenusView({
   canvasClipboard,
   imageContextMenu,
   imageContextMenuLayer,
+  contextMenuLayer,
   contextShouldShowLayer,
   contextShouldUnlockLayer,
   onPasteCanvasClipboard,
@@ -64,10 +73,45 @@ export function ImageCanvasContextMenusView({
   onOpenLayerMetadata,
   onOpenCharacterAnimationPanel,
 }: ImageCanvasContextMenusViewProps) {
+  const isImageSequenceLayer = contextMenuLayer?.mediaType === 'image-sequence';
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const closeMenus = useCallback(() => {
+    onCloseContextMenu();
+    onCloseImageContextMenu();
+  }, [onCloseContextMenu, onCloseImageContextMenu]);
+
+  useEffect(() => {
+    if (!contextMenu && !imageContextMenu) {
+      return undefined;
+    }
+    const handlePointerDown = (event: PointerEvent) => {
+      if (menuRef.current?.contains(event.target as Node)) {
+        return;
+      }
+      closeMenus();
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeMenus();
+      }
+    };
+    window.addEventListener('pointerdown', handlePointerDown);
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('scroll', closeMenus, true);
+    window.addEventListener('resize', closeMenus);
+    return () => {
+      window.removeEventListener('pointerdown', handlePointerDown);
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('scroll', closeMenus, true);
+      window.removeEventListener('resize', closeMenus);
+    };
+  }, [closeMenus, contextMenu, imageContextMenu]);
+
   return (
     <>
       {contextMenu ? (
         <div
+          ref={menuRef}
           className="image-canvas-editor__context-menu"
           role="menu"
           aria-label={
@@ -85,7 +129,6 @@ export function ImageCanvasContextMenusView({
               <button
                 type="button"
                 role="menuitem"
-                disabled={!canvasClipboard?.layers.length}
                 onClick={() => onPasteCanvasClipboard(contextMenu.canvasPoint)}
               >
                 粘贴
@@ -140,7 +183,6 @@ export function ImageCanvasContextMenusView({
               <button
                 type="button"
                 role="menuitem"
-                disabled={!canvasClipboard?.layers.length}
                 onClick={() => onPasteCanvasClipboard(contextMenu.canvasPoint)}
               >
                 粘贴
@@ -182,7 +224,11 @@ export function ImageCanvasContextMenusView({
                 移动至底层
               </button>
               <hr />
-              <button type="button" role="menuitem" onClick={onGroupContextLayers}>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={onGroupContextLayers}
+              >
                 创建组
               </button>
               <button
@@ -221,16 +267,63 @@ export function ImageCanvasContextMenusView({
               >
                 垂直翻转
               </button>
-              <button type="button" role="menuitem" onClick={onExportContextLayer}>
-                导出为
-              </button>
+              {isImageSequenceLayer ? (
+                <div className="image-canvas-editor__context-submenu">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    aria-haspopup="menu"
+                    className="image-canvas-editor__context-submenu-trigger"
+                  >
+                    <span>导出为</span>
+                    <span aria-hidden="true">›</span>
+                  </button>
+                  <PlatformFloatingMenu
+                    className="image-canvas-editor__context-submenu-panel"
+                    label="动作导出选项"
+                    placement="bottom-start"
+                    style={{ margin: 0 }}
+                  >
+                    <PlatformFloatingMenuItem
+                      className="image-canvas-editor__context-menu-item"
+                      onClick={() =>
+                        onExportContextLayer({
+                          mode: 'sequence-with-preview',
+                        })
+                      }
+                    >
+                      序列帧导出（zip）
+                    </PlatformFloatingMenuItem>
+                    <PlatformFloatingMenuItem
+                      className="image-canvas-editor__context-menu-item"
+                      onClick={() =>
+                        onExportContextLayer({ mode: 'spine-json' })
+                      }
+                    >
+                      Spine 导出（zip）
+                    </PlatformFloatingMenuItem>
+                  </PlatformFloatingMenu>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => onExportContextLayer()}
+                >
+                  导出为
+                </button>
+              )}
               <hr />
               {imageContextMenuLayer ? (
                 <>
                   <button
                     type="button"
                     role="menuitem"
-                    onClick={() => onOpenQuickEditPanel(imageContextMenuLayer)}
+                    onClick={() => {
+                      onOpenQuickEditPanel(imageContextMenuLayer);
+                      onCloseContextMenu();
+                      onCloseImageContextMenu();
+                    }}
                   >
                     快速编辑
                   </button>
@@ -276,6 +369,7 @@ export function ImageCanvasContextMenusView({
 
       {imageContextMenu && imageContextMenuLayer && !contextMenu ? (
         <div
+          ref={menuRef}
           className="image-canvas-editor__context-menu"
           style={{
             left: imageContextMenu.x,
@@ -286,7 +380,10 @@ export function ImageCanvasContextMenusView({
           <PlatformFloatingMenu label="图片功能面板" placement="bottom-start">
             <PlatformFloatingMenuItem
               className="image-canvas-editor__context-menu-item"
-              onClick={() => onOpenQuickEditPanel(imageContextMenuLayer)}
+              onClick={() => {
+                onOpenQuickEditPanel(imageContextMenuLayer);
+                onCloseImageContextMenu();
+              }}
             >
               快速编辑
             </PlatformFloatingMenuItem>
diff --git a/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx b/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx
index c4ca42259..db0763e54 100644
--- a/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditGenerationModalView.test.tsx
@@ -15,6 +15,8 @@ function createDialog(
     prompt: '旧修改提示',
     status: 'idle',
     sourceLayerId: 'layer-a',
+    imageModel: 'gpt-image-2',
+    imageSize: '1K',
     ...patch,
   };
 }
diff --git a/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx b/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
index 78b2ce32b..edc042dff 100644
--- a/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
+++ b/src/components/image-editor/ImageCanvasEditGenerationModalView.tsx
@@ -1,13 +1,10 @@
 import { type Dispatch, type SetStateAction } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
 import {
   calculateEditorImageGenerationPrice,
-  IMAGE_MODEL_GPT_IMAGE_2,
 } from './ImageCanvasGenerationModel';
+import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import type { GenerateDialogState } from './ImageCanvasEditorTypes';
 
 type ImageCanvasEditGenerationModalViewProps = {
@@ -22,10 +19,12 @@ export function ImageCanvasEditGenerationModalView({
   onSubmit,
 }: ImageCanvasEditGenerationModalViewProps) {
   const isOpen = dialog?.mode === 'edit' && dialog.status !== 'generating';
+  const dialogImageModel = dialog?.imageModel ?? 'gpt-image-2';
+  const dialogImageSize = dialog?.imageSize ?? '1K';
   const editPrice = calculateEditorImageGenerationPrice({
     kind: 'quick-edit',
-    model: IMAGE_MODEL_GPT_IMAGE_2,
-    imageSize: '1K',
+    model: dialogImageModel,
+    imageSize: dialogImageSize,
   });
 
   return (
@@ -40,70 +39,32 @@ export function ImageCanvasEditGenerationModalView({
       bodyClassName="image-canvas-editor__generate-dialog-body"
     >
       {dialog?.mode === 'edit' ? (
-        <form
-          className="image-canvas-editor__generate-form"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (dialog.status !== 'generating') {
-              onSubmit(dialog);
-            }
+        <ImageCanvasBasicGenerationComposerView
+          dialog={{
+            ...dialog,
+            mode: 'edit',
+            imageModel: dialogImageModel,
+            aspectRatio: dialog.aspectRatio ?? '1:1',
+            imageSize: dialogImageSize,
+            generationReferences: [],
           }}
-        >
-          <div className="image-canvas-editor__generate-body">
-            <PlatformTextField
-              variant="textarea"
-              aria-label="生成提示词"
-              value={dialog.prompt}
-              disabled={dialog.status === 'generating'}
-              size="sm"
-              density="roomy"
-              className="image-canvas-editor__generate-prompt"
-              placeholder="描述你想如何修改这张图片"
-              onChange={(event) =>
-                setGenerateDialog((currentDialog) =>
-                  currentDialog
-                    ? {
-                        ...currentDialog,
-                        prompt: event.target.value,
-                      }
-                    : currentDialog,
-                )
-              }
-            />
-            {dialog.status === 'generating' ? (
-              <PlatformStatusMessage
-                tone="info"
-                surface="platform"
-                size="xs"
-                className="image-canvas-editor__generate-status"
-                role="status"
-              >
-                修改中
-              </PlatformStatusMessage>
-            ) : null}
-            {dialog.status === 'failed' ? (
-              <PlatformStatusMessage
-                tone="error"
-                surface="platform"
-                size="xs"
-                className="image-canvas-editor__generate-status"
-                role="alert"
-              >
-                {dialog.errorMessage}
-              </PlatformStatusMessage>
-            ) : null}
-            <PlatformActionButton
-              type="submit"
-              size="sm"
-              className="image-canvas-editor__generate-submit"
-              disabled={dialog.status === 'generating'}
-            >
-              {dialog.status === 'generating'
-                ? '修改中'
-                : `修改${editPrice}泥点`}
-            </PlatformActionButton>
-          </div>
-        </form>
+          style={{}}
+          setGenerateDialog={setGenerateDialog}
+          onRequestUpload={() => {}}
+          onSubmit={onSubmit}
+          dialogLabel="修改图片"
+          includeDimensions={false}
+          includeModel={false}
+          includeReferences={false}
+          promptPlaceholder="描述你想如何修改这张图片"
+          submitLabel="修改"
+          submitAriaLabel={`修改${editPrice}泥点`}
+          submittingStatusLabel="修改中"
+          formClassName="image-canvas-editor__generate-form"
+          footerClassName="image-canvas-editor__generate-body"
+          promptClassName="image-canvas-editor__generate-prompt"
+          submitButtonClassName="image-canvas-editor__generate-submit"
+        />
       ) : null}
     </UnifiedModal>
   );
diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
index 8aae3250f..3d953d585 100644
--- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
@@ -296,6 +296,47 @@ describe('ImageCanvasEditorView asset library integration', () => {
     expect(screen.getByAltText('画布图片：主视觉素材')).toBeTruthy();
   });
 
+  it('downloads an asset directly from the asset library', async () => {
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = vi.fn(async (url: string) => {
+      if (url === '/creation-type-references/puzzle.webp') {
+        return new Response(new Blob(['asset'], { type: 'image/webp' }));
+      }
+      return new Response(null, { status: 404 });
+    }) as typeof fetch;
+    let downloadName = '';
+    let downloadHref = '';
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn(() => 'blob:asset-library-download'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(
+      function click(this: HTMLAnchorElement) {
+        downloadName = this.download;
+        downloadHref = this.href;
+      },
+    );
+
+    try {
+      render(<ImageCanvasEditorView />);
+
+      fireEvent.click(
+        await screen.findByRole('button', { name: '下载素材拼图素材' }),
+      );
+
+      await waitFor(() => {
+        expect(downloadName).toBe('拼图素材.webp');
+      });
+      expect(downloadHref).toBe('blob:asset-library-download');
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+
   it('collapses folders, creates upload folders, and deletes uploaded materials', async () => {
     const user = userEvent.setup();
     const createObjectUrlSpy = vi.fn(() => 'blob:folder-uploaded-image');
@@ -1095,6 +1136,141 @@ describe('ImageCanvasEditorView asset library integration', () => {
     ).toBe(true);
   });
 
+  it('pastes a clipboard image onto the canvas through the upload workflow', async () => {
+    render(<ImageCanvasEditorView />);
+    await waitFor(() => {
+      expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
+    });
+
+    const imageFile = new File(['image'], '剪贴板素材.png', {
+      type: 'image/png',
+    });
+    const pasteEvent = new Event('paste', {
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(pasteEvent, 'clipboardData', {
+      value: {
+        files: [imageFile],
+        items: [],
+      },
+    });
+
+    window.dispatchEvent(pasteEvent);
+
+    await waitFor(() => {
+      expect(screen.getByAltText('画布图片：剪贴板素材.png')).toBeTruthy();
+    });
+    expect(pasteEvent.defaultPrevented).toBe(true);
+    expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledWith(
+      imageFile,
+      'image',
+    );
+    expect(createEditorAssetMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        label: '剪贴板素材.png',
+        imageSrc:
+          '/generated-character-drafts/editor/asset-library/image/剪贴板素材.png',
+        objectKey:
+          'generated-character-drafts/editor/asset-library/image/剪贴板素材.png',
+        assetObjectId: 'assetobj-editor-image',
+      }),
+    );
+    expect(
+      screen
+        .getByRole('button', { name: '选择剪贴板素材.png' })
+        .className.includes('image-canvas-editor__layer--selected'),
+    ).toBe(true);
+  });
+
+  it('pastes a system clipboard image from the canvas context menu', async () => {
+    const originalClipboard = navigator.clipboard;
+    const clipboardBlob = new Blob(['image'], { type: 'image/png' });
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {
+        read: vi.fn(async () => [
+          {
+            types: ['image/png'],
+            getType: vi.fn(async () => clipboardBlob),
+          },
+        ]),
+      },
+    });
+    try {
+      render(<ImageCanvasEditorView />);
+      await waitFor(() => {
+        expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
+      });
+
+      fireEvent.contextMenu(screen.getByLabelText('画布工作区'), {
+        clientX: 360,
+        clientY: 240,
+      });
+      fireEvent.click(screen.getByRole('menuitem', { name: '粘贴' }));
+
+      await waitFor(() => {
+        expect(screen.getByAltText('画布图片：剪贴板图片.png')).toBeTruthy();
+      });
+      expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: '剪贴板图片.png',
+          type: 'image/png',
+        }),
+        'image',
+      );
+    } finally {
+      Object.defineProperty(navigator, 'clipboard', {
+        configurable: true,
+        value: originalClipboard,
+      });
+    }
+  });
+
+  it('keeps canvas clipboard paste ahead of system clipboard images', async () => {
+    render(<ImageCanvasEditorView />);
+    await waitFor(() => {
+      expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
+    });
+
+    fireEvent.contextMenu(
+      screen.getByAltText('画布图片：拼图素材').closest('button')!,
+      {
+        clientX: 510,
+        clientY: 330,
+      },
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: '复制' }));
+
+    const systemImageFile = new File(['image'], '系统剪贴板素材.png', {
+      type: 'image/png',
+    });
+    const pasteEvent = new Event('paste', {
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(pasteEvent, 'clipboardData', {
+      value: {
+        files: [systemImageFile],
+        items: [],
+      },
+    });
+
+    act(() => {
+      window.dispatchEvent(pasteEvent);
+    });
+
+    expect(pasteEvent.defaultPrevented).toBe(true);
+    await waitFor(() => {
+      expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(2);
+    });
+    expect(screen.queryByAltText('画布图片：系统剪贴板素材.png')).toBeNull();
+    expect(uploadEditorMediaAssetFileMock).not.toHaveBeenCalledWith(
+      systemImageFile,
+      'image',
+    );
+  });
+
   it('drops files into the asset panel only once without creating canvas layers', async () => {
     render(<ImageCanvasEditorView />);
 
diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
index 833aea8e0..bdd69b426 100644
--- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx
@@ -70,6 +70,16 @@ vi.mock('./ImageCanvasUiAssetExtractionRasterModel', () => ({
     renderUiDesignAssetExtractionMarkedImageMock,
 }));
 
+vi.mock('./ImageCanvasProjectCoverSnapshotModel', async () => {
+  const actual = await vi.importActual<
+    typeof import('./ImageCanvasProjectCoverSnapshotModel')
+  >('./ImageCanvasProjectCoverSnapshotModel');
+  return {
+    ...actual,
+    createProjectCoverSnapshotBlob: vi.fn(async () => null),
+  };
+});
+
 describe('ImageCanvasEditorView generation integration', () => {
   setupImageCanvasEditorViewTestLifecycle({
     generateEditorImageMock,
@@ -464,6 +474,158 @@ describe('ImageCanvasEditorView generation integration', () => {
     ).toBe('刷新后恢复生成器');
   });
 
+  it('restores generated image composer from layer metadata when the dialog snapshot is missing', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-generated-layer-only',
+      title: '已生成画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-generated-metadata',
+          resourceId: 'resource-generated-metadata',
+          title: '生成图片 1',
+          x: 236,
+          y: 66,
+          width: 512,
+          height: 512,
+          originalWidth: 512,
+          originalHeight: 512,
+          zIndex: 11,
+          sourceType: 'generated',
+        },
+      ],
+      resources: [
+        {
+          resourceId: 'resource-generated-metadata',
+          projectId: 'editor-project-generated-layer-only',
+          imageSrc: 'data:image/png;base64,bWV0YWRhdGE=',
+          width: 512,
+          height: 512,
+          sourceType: 'generated',
+          prompt: '图层提示词',
+          model: 'gpt-image-2',
+          generationInputs: {
+            fields: [{ title: '生成提示词', value: '元数据恢复生成器' }],
+            references: [],
+          },
+        },
+      ],
+      updatedAt: '2026-06-17T00:00:00.000Z',
+    });
+
+    render(<ImageCanvasEditorView />);
+
+    const generatedImage = await screen.findByAltText('画布图片：生成图片 1');
+    expect(screen.queryByRole('dialog', { name: '生成图片' })).toBeNull();
+
+    fireEvent.click(generatedImage.closest('button')!);
+
+    expect(await screen.findByRole('dialog', { name: '生成图片' })).toBeTruthy();
+    expect(
+      (screen.getByLabelText('生成提示词') as HTMLTextAreaElement).value,
+    ).toBe('元数据恢复生成器');
+  });
+
+  it('does not open a generator on direct click for tagged uploaded images', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-uploaded-tagged-layer',
+      title: '标签素材画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-uploaded-character',
+          resourceId: 'resource-uploaded-character',
+          title: '上传角色',
+          src: 'data:image/png;base64,dXBsb2FkZWQ=',
+          x: 236,
+          y: 66,
+          width: 512,
+          height: 512,
+          originalWidth: 512,
+          originalHeight: 512,
+          zIndex: 11,
+          sourceType: 'uploaded',
+          assetKind: 'character',
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '黑衣剑士' }],
+            references: [],
+          },
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-17T00:00:00.000Z',
+    });
+
+    render(<ImageCanvasEditorView />);
+
+    const uploadedImage = await screen.findByAltText('画布图片：上传角色');
+    fireEvent.click(uploadedImage.closest('button')!);
+
+    expect(screen.queryByRole('dialog', { name: '生成角色形象' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
+
+    expect(
+      await screen.findByRole('dialog', { name: '生成角色形象' }),
+    ).toBeTruthy();
+    expect(
+      (screen.getByLabelText('角色设定') as HTMLTextAreaElement).value,
+    ).toBe('黑衣剑士');
+  });
+
+  it('opens the matching generator from image context quick edit for tagged uploaded images', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-context-tagged-layer',
+      title: '右键标签素材画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-context-character',
+          resourceId: 'resource-context-character',
+          title: '右键上传角色',
+          src: 'data:image/png;base64,Y29udGV4dA==',
+          x: 236,
+          y: 66,
+          width: 512,
+          height: 512,
+          originalWidth: 512,
+          originalHeight: 512,
+          zIndex: 11,
+          sourceType: 'uploaded',
+          assetKind: 'character',
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '红披风骑士' }],
+            references: [],
+          },
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-17T00:00:00.000Z',
+    });
+
+    render(<ImageCanvasEditorView />);
+
+    const uploadedImage = await screen.findByAltText('画布图片：右键上传角色');
+    fireEvent.contextMenu(uploadedImage.closest('button')!, {
+      clientX: 260,
+      clientY: 220,
+    });
+    fireEvent.click(
+      within(screen.getByRole('menu', { name: '图片功能面板' })).getByRole(
+        'menuitem',
+        { name: '快速编辑' },
+      ),
+    );
+
+    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
+    expect(
+      await screen.findByRole('dialog', { name: '生成角色形象' }),
+    ).toBeTruthy();
+    expect(
+      (screen.getByLabelText('角色设定') as HTMLTextAreaElement).value,
+    ).toBe('红披风骑士');
+  });
+
   it('restores publication material composer fields and references from saved generator snapshots', async () => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
       projectId: 'editor-project-publication-dialog',
@@ -940,64 +1102,6 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByLabelText('图像生成占位图')).toBeTruthy();
   });
 
-  it('hides quick edit and redraw panels when clicking the canvas outside generation controls', () => {
-    render(<ImageCanvasEditorView />);
-    const viewport = screen.getByLabelText('画布工作区');
-    const sourceLayer = screen
-      .getByAltText('画布图片：拼图素材')
-      .closest('button')!;
-
-    fireEvent.pointerDown(sourceLayer, {
-      button: 0,
-      pointerId: 631,
-      clientX: 120,
-      clientY: 120,
-    });
-    fireEvent.pointerUp(viewport, {
-      pointerId: 631,
-      clientX: 120,
-      clientY: 120,
-    });
-    fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
-    expect(screen.getByRole('dialog', { name: '快速编辑图片' })).toBeTruthy();
-    expect(
-      screen.queryByRole('button', { name: '关闭快速编辑图片' }),
-    ).toBeNull();
-
-    fireEvent.pointerDown(viewport, {
-      button: 0,
-      pointerId: 632,
-      clientX: 260,
-      clientY: 180,
-    });
-
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
-
-    fireEvent.pointerDown(sourceLayer, {
-      button: 0,
-      pointerId: 633,
-      clientX: 120,
-      clientY: 120,
-    });
-    fireEvent.pointerUp(viewport, {
-      pointerId: 633,
-      clientX: 120,
-      clientY: 120,
-    });
-    fireEvent.click(screen.getByRole('button', { name: '改造' }));
-    expect(screen.getByRole('dialog', { name: '改造图片' })).toBeTruthy();
-    expect(screen.getByLabelText('快速编辑生成占位图')).toBeTruthy();
-
-    fireEvent.pointerDown(viewport, {
-      button: 0,
-      pointerId: 634,
-      clientX: 280,
-      clientY: 190,
-    });
-
-    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
-  });
-
   it('does not render a standalone close button on the generation composer', () => {
     render(<ImageCanvasEditorView />);
 
@@ -1488,14 +1592,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       spritesheetImageSrc: 'data:image/png;base64,sheet-gpt-model',
       spritesheetWidth: 1024,
       spritesheetHeight: 1024,
-      iconImageSrcs: [
-        {
-          name: '返回按钮',
-          imageSrc: 'data:image/png;base64,back',
-          width: 128,
-          height: 128,
-        },
-      ],
+      iconImageSrcs: [],
       prompt: '图标 prompt',
       actualPrompt: '图标 prompt',
       model: 'gpt-image-2',
@@ -2241,7 +2338,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
   });
 
-  it('opens icon asset generation panel, only picks icon specs, and lays generated icons on canvas', async () => {
+  it('opens icon asset generation panel, only picks icon specs, and lays only the generated spritesheet on canvas', async () => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
       projectId: 'editor-project-icons',
       title: '图标素材画布',
@@ -2284,20 +2381,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       spritesheetImageSrc: 'data:image/png;base64,sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      iconImageSrcs: [
-        {
-          name: '返回按钮',
-          imageSrc: 'data:image/png;base64,back-icon',
-          width: 96,
-          height: 96,
-        },
-        {
-          name: '设置按钮',
-          imageSrc: 'data:image/png;base64,setting-icon',
-          width: 96,
-          height: 96,
-        },
-      ],
+      iconImageSrcs: [],
       prompt: '图标 prompt',
       actualPrompt: '图标 prompt',
       model: 'gemini-3.1-flash-image-preview',
@@ -2324,7 +2408,7 @@ describe('ImageCanvasEditorView generation integration', () => {
           name: '素材描述',
         }) as HTMLTextAreaElement
       ).value,
-    ).toBe('返回按钮\n设置按钮\n下一关按钮\n提示按钮\n原图按钮\n冻结按钮');
+    ).toBe('');
 
     fireEvent.click(
       within(iconPanel).getByRole('button', { name: '图标规范' }),
@@ -2371,34 +2455,37 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     fireEvent.click(within(iconPanel).getByRole('button', { name: '生成' }));
 
-    expect(generateEditorIconSpritesheetMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        referenceImageSrc: 'data:image/png;base64,icon-spec',
-        iconDescriptions: ['返回按钮', '设置按钮'],
-        model: 'gemini-3.1-flash-image-preview',
-        aspectRatio: '1:1',
-        imageSize: '1K',
-        projectId: 'editor-project-icons',
-        assetFolderId: 'project',
-        generationInputs: expect.objectContaining({
-          fields: expect.arrayContaining([
-            expect.objectContaining({
-              title: '素材描述',
-              value: '返回按钮\n设置按钮',
-            }),
-          ]),
+    await waitFor(() => {
+      expect(generateEditorIconSpritesheetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          referenceImageSrc: 'data:image/png;base64,icon-spec',
+          iconDescriptions: ['返回按钮', '设置按钮'],
+          model: 'gemini-3.1-flash-image-preview',
+          aspectRatio: '1:1',
+          imageSize: '1K',
+          projectId: 'editor-project-icons',
+          assetFolderId: 'project',
+          generationInputs: expect.objectContaining({
+            fields: expect.arrayContaining([
+              expect.objectContaining({
+                title: '素材描述',
+                value: '返回按钮\n设置按钮',
+              }),
+            ]),
+          }),
         }),
-      }),
-    );
+      );
+    });
 
     await waitFor(() => {
-      expect(screen.getByAltText('画布图片：返回按钮')).toBeTruthy();
-      expect(screen.getByAltText('画布图片：设置按钮')).toBeTruthy();
+      expect(screen.getByAltText(/图层缩略图：图标素材图集/u)).toBeTruthy();
     });
+    expect(screen.queryByAltText('画布图片：返回按钮')).toBeNull();
+    expect(screen.queryByAltText('画布图片：设置按钮')).toBeNull();
     expect(screen.queryByLabelText('图标素材生成占位图')).toBeNull();
-    expect(screen.getAllByText('图标')).toHaveLength(2);
+    expect(screen.getByText('图集')).toBeTruthy();
     fireEvent.click(
-      screen.getAllByRole('button', { name: '查看返回按钮图片信息' })[0]!,
+      screen.getByRole('button', { name: /查看图标素材图集.*图片信息/u }),
     );
     const iconInfoPanel = screen.getByRole('dialog', { name: '图片信息' });
     expect(within(iconInfoPanel).queryByText('Prompt')).toBeNull();
@@ -2573,14 +2660,7 @@ describe('ImageCanvasEditorView generation integration', () => {
       spritesheetImageSrc: 'data:image/png;base64,cmVuYW1lZC1zaGVldA==',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      iconImageSrcs: [
-        {
-          name: '背包按钮',
-          imageSrc: 'data:image/png;base64,YmFncGFjay1pY29u',
-          width: 96,
-          height: 96,
-        },
-      ],
+      iconImageSrcs: [],
       prompt: '图标 prompt',
       actualPrompt: '图标 prompt',
       model: 'gemini-3.1-flash-image-preview',
@@ -2651,20 +2731,23 @@ describe('ImageCanvasEditorView generation integration', () => {
     );
     fireEvent.click(within(iconPanel).getByRole('button', { name: '生成' }));
 
-    expect(generateEditorIconSpritesheetMock).toHaveBeenCalledWith(
-      expect.objectContaining({
-        referenceImageSrc: 'data:image/png;base64,cmVuYW1lZC1pY29uLXNwZWM=',
-        iconDescriptions: ['背包按钮'],
-        model: 'gemini-3.1-flash-image-preview',
-        aspectRatio: '1:1',
-        imageSize: '1K',
-        projectId: 'editor-project-default',
-        assetFolderId: 'project',
-      }),
-    );
     await waitFor(() => {
-      expect(screen.getByAltText('画布图片：背包按钮')).toBeTruthy();
+      expect(generateEditorIconSpritesheetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          referenceImageSrc: 'data:image/png;base64,cmVuYW1lZC1pY29uLXNwZWM=',
+          iconDescriptions: ['背包按钮'],
+          model: 'gemini-3.1-flash-image-preview',
+          aspectRatio: '1:1',
+          imageSize: '1K',
+          projectId: 'editor-project-default',
+          assetFolderId: 'project',
+        }),
+      );
     });
+    await waitFor(() => {
+      expect(screen.getByAltText(/图层缩略图：图标素材图集/u)).toBeTruthy();
+    });
+    expect(screen.queryByAltText('画布图片：背包按钮')).toBeNull();
   });
 
   it('exits character generation canvas picking with Escape', () => {
@@ -2785,7 +2868,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByText('角色')).toBeTruthy();
     expect(screen.getByRole('button', { name: '生成动画' })).toBeTruthy();
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
+    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
     expect(
       screen.queryByRole('dialog', { name: '角色动画生成面板' }),
     ).toBeNull();
@@ -2796,7 +2879,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(screen.getByRole('menuitem', { name: '生成动画' })).toBeTruthy();
 
     expect(screen.queryByRole('dialog', { name: '重绘图片' })).toBeNull();
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
+    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
 
     fireEvent.click(screen.getByRole('button', { name: '生成动画' }));
     expect(
@@ -2945,8 +3028,10 @@ describe('ImageCanvasEditorView generation integration', () => {
           height: 96,
         },
       ],
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'ui-extract-task-1',
@@ -3048,7 +3133,8 @@ describe('ImageCanvasEditorView generation integration', () => {
             fields: expect.arrayContaining([
               expect.objectContaining({
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
               }),
             ]),
             references: expect.arrayContaining([
@@ -3076,7 +3162,8 @@ describe('ImageCanvasEditorView generation integration', () => {
             fields: expect.arrayContaining([
               expect.objectContaining({
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
               }),
             ]),
           }),
@@ -3165,367 +3252,7 @@ describe('ImageCanvasEditorView generation integration', () => {
     });
   });
 
-  it('opens quick edit from the floating toolbar, hides the implicit source reference, and generates from a new frame', async () => {
-    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
-      projectId: 'editor-project-quick-edit',
-      title: '快速编辑画布',
-      viewport: { x: 0, y: 0, scale: 1 },
-      layers: [
-        {
-          layerId: 'layer-quick-source',
-          resourceId: 'resource-quick-source',
-          title: '魔法森林',
-          src: 'data:image/png;base64,c291cmNl',
-          x: 120,
-          y: 140,
-          width: 320,
-          height: 240,
-          originalWidth: 1536,
-          originalHeight: 1024,
-          zIndex: 2,
-          sourceType: 'generated',
-          prompt: '魔法森林原始提示词',
-          actualPrompt: '魔法森林原始提示词',
-          model: 'gpt-image-2',
-          provider: 'VectorEngine',
-          taskId: 'source-task-1',
-          assetKind: 'spec',
-        },
-        {
-          layerId: 'layer-quick-extra-ref',
-          resourceId: 'resource-quick-extra-ref',
-          title: '星空参考',
-          src: 'data:image/png;base64,ZXh0cmEtcmVm',
-          x: -420,
-          y: 100,
-          width: 260,
-          height: 260,
-          originalWidth: 512,
-          originalHeight: 512,
-          zIndex: 1,
-          sourceType: 'uploaded',
-        },
-      ],
-      resources: [],
-      updatedAt: '2026-06-15T00:00:00.000Z',
-    });
-    generateEditorImageMock.mockImplementationOnce(async (input) =>
-      createGeneratedImageResponse(input, {
-        imageSrc: 'data:image/png;base64,cXVpY2stZWRpdA==',
-        width: 1536,
-        height: 1024,
-        sourceType: 'generated',
-        prompt: '增加萤火虫',
-        actualPrompt: '增加萤火虫',
-        model: 'gpt-image-2',
-        provider: 'VectorEngine',
-        taskId: 'quick-edit-task-1',
-      }),
-    );
-    render(<ImageCanvasEditorView />);
-
-    const sourceImage = await screen.findByAltText('画布图片：魔法森林');
-    fireEvent.pointerDown(sourceImage.closest('button')!, {
-      button: 0,
-      pointerId: 151,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
-      pointerId: 151,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
-
-    const quickPanel = screen.getByRole('dialog', { name: '快速编辑图片' });
-    expect(quickPanel.className).toContain(
-      'image-canvas-editor__quick-edit-panel',
-    );
-    expect(within(quickPanel).queryByText('魔法森林')).toBeNull();
-    expect(
-      (
-        within(quickPanel).getByRole('button', {
-          name: '快速编辑尺寸 3:2·1K',
-        }) as HTMLButtonElement
-      ).disabled,
-    ).toBe(false);
-    expect(
-      (
-        within(quickPanel).getByRole('button', {
-          name: '快速编辑模型 gpt-image-2',
-        }) as HTMLButtonElement
-      ).disabled,
-    ).toBe(false);
-    expect(within(quickPanel).queryByLabelText('原图 图1')).toBeNull();
-
-    fireEvent.click(
-      within(quickPanel).getByRole('button', {
-        name: '添加快速编辑参考图',
-      }),
-    );
-    fireEvent.click(
-      within(
-        screen.getByRole('menu', { name: '快速编辑参考图来源' }),
-      ).getByRole('menuitem', { name: '从画布中选择' }),
-    );
-    fireEvent.pointerDown(
-      screen.getByAltText('画布图片：星空参考').closest('button')!,
-      {
-        button: 0,
-        pointerId: 152,
-        clientX: 140,
-        clientY: 120,
-      },
-    );
-
-    const updatedQuickPanel = screen.getByRole('dialog', {
-      name: '快速编辑图片',
-    });
-    expect(within(updatedQuickPanel).getByText('星空参考')).toBeTruthy();
-    expect(within(updatedQuickPanel).queryByLabelText('原图 图2')).toBeNull();
-
-    fireEvent.change(
-      within(updatedQuickPanel).getByLabelText('快速编辑提示词'),
-      {
-        target: { value: '参考原图增加萤火虫' },
-      },
-    );
-    fireEvent.click(
-      within(updatedQuickPanel).getByRole('button', { name: '生成' }),
-    );
-
-    await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          prompt: '参考图2增加萤火虫',
-          size: '1024x683',
-          aspectRatio: '3:2',
-          imageSize: '1K',
-          kind: 'quick-edit',
-          model: 'gpt-image-2',
-          referenceImageSrcs: [
-            'data:image/png;base64,ZXh0cmEtcmVm',
-            'data:image/png;base64,c291cmNl',
-          ],
-          projectId: 'editor-project-quick-edit',
-          assetKind: 'spec',
-          assetFolderId: 'project',
-          assetLabel: '魔法森林 快速编辑',
-          sourceResourceId: 'resource-quick-source',
-          generationInputs: expect.objectContaining({
-            fields: expect.arrayContaining([
-              expect.objectContaining({
-                title: '快速编辑提示词',
-                value: '参考图2增加萤火虫',
-              }),
-            ]),
-          }),
-        }),
-      );
-    });
-    await waitFor(() => {
-      expect(screen.getByAltText('画布图片：魔法森林 快速编辑')).toBeTruthy();
-    });
-    const generatedLayer = screen
-      .getByAltText('画布图片：魔法森林 快速编辑')
-      .closest('button') as HTMLElement;
-    expect(Number.parseFloat(generatedLayer.style.left)).toBe(376);
-    expect(Number.parseFloat(generatedLayer.style.top)).toBe(1196);
-    expect(Number.parseFloat(generatedLayer.style.width)).toBe(1024);
-    expect(Number.parseFloat(generatedLayer.style.height)).toBe(683);
-    await waitFor(() => {
-      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
-        'editor-project-quick-edit',
-        expect.objectContaining({
-          layers: expect.arrayContaining([
-            expect.objectContaining({
-              title: '魔法森林 快速编辑',
-              resourceId: 'resource-editor-project-quick-edit-1024',
-              width: 1024,
-              height: 683,
-              originalWidth: 1024,
-              originalHeight: 683,
-              x: 376,
-              y: 1196,
-            }),
-          ]),
-        }),
-      );
-    });
-  });
-
-  it('opens quick edit from the image context menu', async () => {
-    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
-      projectId: 'editor-project-context-quick-edit',
-      title: '右键快速编辑画布',
-      viewport: { x: 0, y: 0, scale: 1 },
-      layers: [
-        {
-          layerId: 'layer-context-source',
-          resourceId: 'resource-context-source',
-          title: '右键图片',
-          src: 'data:image/png;base64,Y29udGV4dA==',
-          x: 80,
-          y: 90,
-          width: 260,
-          height: 260,
-          originalWidth: 1024,
-          originalHeight: 1024,
-          zIndex: 1,
-          sourceType: 'uploaded',
-          model: 'gpt-image-2',
-        },
-      ],
-      resources: [],
-      updatedAt: '2026-06-15T00:00:00.000Z',
-    });
-    generateEditorImageMock.mockImplementationOnce(async (input) =>
-      createGeneratedImageResponse(input, {
-        imageSrc: 'data:image/png;base64,Y29udGV4dC1xdWljaw==',
-        width: 1024,
-        height: 1024,
-        sourceType: 'generated',
-        prompt: '换成夜晚',
-        actualPrompt: '换成夜晚',
-        model: 'gpt-image-2',
-        provider: 'VectorEngine',
-        taskId: 'context-quick-task-1',
-      }),
-    );
-    render(<ImageCanvasEditorView />);
-
-    const contextImage = await screen.findByAltText('画布图片：右键图片');
-    fireEvent.contextMenu(contextImage.closest('button')!, {
-      clientX: 260,
-      clientY: 220,
-    });
-
-    const menu = screen.getByRole('menu', { name: '图片功能面板' });
-    expect(
-      within(menu).getByRole('menuitem', { name: '快速编辑' }),
-    ).toBeTruthy();
-    fireEvent.click(within(menu).getByRole('menuitem', { name: '快速编辑' }));
-
-    const panel = screen.getByRole('dialog', { name: '快速编辑图片' });
-    expect(within(panel).queryByText('右键图片')).toBeNull();
-    fireEvent.change(within(panel).getByLabelText('快速编辑提示词'), {
-      target: { value: '换成夜晚' },
-    });
-    fireEvent.click(within(panel).getByRole('button', { name: '生成' }));
-
-    await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          prompt: '换成夜晚',
-          referenceImageSrcs: ['data:image/png;base64,Y29udGV4dA=='],
-          size: '1024x1024',
-          aspectRatio: '1:1',
-          imageSize: '1K',
-          model: 'gpt-image-2',
-          kind: 'quick-edit',
-          projectId: 'editor-project-context-quick-edit',
-          assetFolderId: 'project',
-          assetLabel: '右键图片 快速编辑',
-          sourceResourceId: 'resource-context-source',
-        }),
-      );
-    });
-    await waitFor(() => {
-      expect(screen.getByAltText('画布图片：右键图片 快速编辑')).toBeTruthy();
-    });
-  });
-
-  it('converts non-data-url quick edit source images before submitting references', async () => {
-    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
-      projectId: 'editor-project-public-quick-edit',
-      title: '公开素材快速编辑画布',
-      viewport: { x: 0, y: 0, scale: 1 },
-      layers: [
-        {
-          layerId: 'layer-public-source',
-          resourceId: 'resource-public-source',
-          title: '公开拼图素材',
-          src: '/creation-type-references/puzzle.webp',
-          x: 120,
-          y: 140,
-          width: 320,
-          height: 240,
-          originalWidth: 640,
-          originalHeight: 640,
-          zIndex: 2,
-          sourceType: 'uploaded',
-        },
-      ],
-      resources: [],
-      updatedAt: '2026-06-16T00:00:00.000Z',
-    });
-    vi.spyOn(globalThis, 'fetch').mockImplementation(
-      async () =>
-        new Response(new Uint8Array([104, 101, 108, 108, 111]), {
-          status: 200,
-          headers: {
-            'Content-Type': 'image/webp',
-          },
-        }),
-    );
-    generateEditorImageMock.mockImplementationOnce(async (input) =>
-      createGeneratedImageResponse(input, {
-        imageSrc: 'data:image/png;base64,cHVibGljLXF1aWNr',
-        width: 640,
-        height: 640,
-        sourceType: 'generated',
-        prompt: '改成陶泥风格',
-        actualPrompt: '改成陶泥风格',
-        model: 'gpt-image-2',
-        provider: 'VectorEngine',
-        taskId: 'public-quick-edit-task-1',
-      }),
-    );
-    render(<ImageCanvasEditorView />);
-
-    const sourceImage = await screen.findByAltText('画布图片：公开拼图素材');
-    fireEvent.pointerDown(sourceImage.closest('button')!, {
-      button: 0,
-      pointerId: 161,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
-      pointerId: 161,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
-
-    const quickPanel = screen.getByRole('dialog', { name: '快速编辑图片' });
-    fireEvent.change(within(quickPanel).getByLabelText('快速编辑提示词'), {
-      target: { value: '改成陶泥风格' },
-    });
-    fireEvent.click(within(quickPanel).getByRole('button', { name: '生成' }));
-
-    await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          prompt: '改成陶泥风格',
-          kind: 'quick-edit',
-          referenceImageSrcs: ['data:image/webp;base64,aGVsbG8='],
-          projectId: 'editor-project-public-quick-edit',
-          assetFolderId: 'project',
-          assetLabel: '公开拼图素材 快速编辑',
-          sourceResourceId: 'resource-public-source',
-        }),
-      );
-    });
-    expect(globalThis.fetch).toHaveBeenCalledWith(
-      '/creation-type-references/puzzle.webp',
-      expect.objectContaining({
-        signal: undefined,
-      }),
-    );
-  });
-
-  it('opens generated image info from the corner button and creates a real right-side edit result', async () => {
+  it('opens generated image info from the corner button', async () => {
     generateEditorImageMock.mockImplementationOnce(async (input) =>
       createGeneratedImageResponse(input, {
         imageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
@@ -3539,19 +3266,6 @@ describe('ImageCanvasEditorView generation integration', () => {
         taskId: 'editor-real-task-2',
       }),
     );
-    generateEditorImageMock.mockImplementationOnce(async (input) =>
-      createGeneratedImageResponse(input, {
-        imageSrc: 'data:image/png;base64,ZWRhd24tcmVkcmF3',
-        width: 1024,
-        height: 1024,
-        sourceType: 'generated',
-        prompt: '把画面改成黄昏光线',
-        actualPrompt: '把画面改成黄昏光线',
-        model: 'gpt-image-2',
-        provider: 'VectorEngine',
-        taskId: 'editor-real-redraw-1',
-      }),
-    );
     render(<ImageCanvasEditorView />);
 
     fireEvent.click(screen.getByRole('button', { name: '生成图片' }));
@@ -3598,189 +3312,8 @@ describe('ImageCanvasEditorView generation integration', () => {
     expect(within(metadataDialog).getByText('Resolution')).toBeTruthy();
     expect(within(metadataDialog).getByText('1024 x 1024 px')).toBeTruthy();
 
-    fireEvent.click(screen.getByRole('button', { name: '改造' }));
-    const editDialog = screen.getByRole('dialog', { name: '改造图片' });
-    expect(editDialog).toBeTruthy();
-    const editPrompt = within(editDialog).getByLabelText('改造提示词');
-    expect(editPrompt.className).toContain('platform-text-field');
-    expect(editPrompt.className).toContain(
-      'image-canvas-editor__generation-prompt',
-    );
-    fireEvent.change(editPrompt, {
-      target: { value: '把画面改成黄昏光线' },
-    });
-    fireEvent.click(within(editDialog).getByRole('button', { name: '生成' }));
-
-    await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          prompt: '把画面改成黄昏光线',
-          size: '1024x1024',
-          aspectRatio: '1:1',
-          imageSize: '1K',
-          kind: 'quick-edit',
-          model: 'gpt-image-2',
-          referenceImageSrcs: ['data:image/png;base64,ZmFrZS1pbWFnZQ=='],
-        }),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
-    });
-    expect(screen.getByAltText(/画布图片：生成图片 .* 快速编辑/)).toBeTruthy();
-    fireEvent.click(
-      screen.getAllByRole('button', {
-        name: /查看生成图片 .* 快速编辑图片信息/u,
-      })[0]!,
-    );
-    const editedMetadataDialog = screen.getByRole('dialog', {
-      name: '图片信息',
-    });
-    expect(within(editedMetadataDialog).queryByText('Prompt')).toBeNull();
-    expect(within(editedMetadataDialog).getByText('快速编辑提示词')).toBeTruthy();
-    expect(
-      within(editedMetadataDialog).getByText('把画面改成黄昏光线'),
-    ).toBeTruthy();
     expect(
       screen.getByRole('button', { name: /当前缩放比例 \d+%/u }),
     ).toBeTruthy();
   });
-
-  it('shows the quick edit generator after redraw starts while keeping the source preview visible', async () => {
-    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
-      projectId: 'editor-project-edit-generating',
-      title: '重绘生成中画布',
-      viewport: { x: 0, y: 0, scale: 1 },
-      layers: [
-        {
-          layerId: 'layer-edit-generating-source',
-          resourceId: 'resource-edit-generating-source',
-          title: '待重绘',
-          src: 'data:image/png;base64,ZWRpdC1nZW5lcmF0aW5n',
-          x: 120,
-          y: 140,
-          width: 320,
-          height: 240,
-          originalWidth: 1024,
-          originalHeight: 768,
-          zIndex: 2,
-          sourceType: 'generated',
-          prompt: '原始提示词',
-          actualPrompt: '原始提示词',
-          model: 'gpt-image-2',
-          provider: 'VectorEngine',
-          taskId: 'edit-generating-source-task',
-        },
-      ],
-      resources: [],
-      updatedAt: '2026-06-16T00:00:00.000Z',
-    });
-    generateEditorImageMock.mockReturnValueOnce(new Promise(() => undefined));
-    render(<ImageCanvasEditorView />);
-
-    const sourceImage = await screen.findByAltText('画布图片：待重绘');
-    const sourceLayer = sourceImage.closest('button')!;
-    fireEvent.pointerDown(sourceLayer, {
-      button: 0,
-      pointerId: 171,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
-      pointerId: 171,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.click(screen.getByRole('button', { name: '改造' }));
-    const editDialog = screen.getByRole('dialog', { name: '改造图片' });
-    fireEvent.change(within(editDialog).getByLabelText('改造提示词'), {
-      target: { value: '改成雨夜灯光' },
-    });
-    fireEvent.click(within(editDialog).getByRole('button', { name: '生成' }));
-
-    expect(screen.queryByRole('dialog', { name: '改造图片' })).toBeNull();
-    expect(screen.getByLabelText('快速编辑生成占位图')).toBeTruthy();
-    expect(screen.getByAltText('画布图片：待重绘')).toBeTruthy();
-    expect(sourceLayer.className).not.toContain(
-      'image-canvas-editor__layer--generating',
-    );
-  });
-
-  it('hides the quick edit panel after generation starts while keeping the source preview visible', async () => {
-    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
-      projectId: 'editor-project-quick-edit-generating',
-      title: '快速编辑生成中画布',
-      viewport: { x: 0, y: 0, scale: 1 },
-      layers: [
-        {
-          layerId: 'layer-quick-edit-generating-source',
-          resourceId: 'resource-quick-edit-generating-source',
-          title: '快速编辑源图',
-          src: 'data:image/png;base64,cXVpY2stZWRpdC1nZW5lcmF0aW5n',
-          x: 120,
-          y: 140,
-          width: 320,
-          height: 240,
-          originalWidth: 1024,
-          originalHeight: 768,
-          zIndex: 2,
-          sourceType: 'uploaded',
-          model: 'gpt-image-2',
-        },
-      ],
-      resources: [],
-      updatedAt: '2026-06-16T00:00:00.000Z',
-    });
-    generateEditorImageMock.mockReturnValueOnce(new Promise(() => undefined));
-    render(<ImageCanvasEditorView />);
-
-    const sourceImage = await screen.findByAltText('画布图片：快速编辑源图');
-    const sourceLayer = sourceImage.closest('button')!;
-    fireEvent.pointerDown(sourceLayer, {
-      button: 0,
-      pointerId: 172,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
-      pointerId: 172,
-      clientX: 180,
-      clientY: 180,
-    });
-    fireEvent.click(screen.getByRole('button', { name: '快速编辑' }));
-    const quickPanel = screen.getByRole('dialog', { name: '快速编辑图片' });
-    fireEvent.change(within(quickPanel).getByLabelText('快速编辑提示词'), {
-      target: { value: '加一层暖光' },
-    });
-    fireEvent.click(within(quickPanel).getByRole('button', { name: '生成' }));
-
-    expect(screen.queryByRole('dialog', { name: '快速编辑图片' })).toBeNull();
-    expect(screen.getByAltText('画布图片：快速编辑源图')).toBeTruthy();
-    expect(sourceLayer.className).not.toContain(
-      'image-canvas-editor__layer--generating',
-    );
-    const quickEditFrame = screen.getByLabelText('快速编辑生成占位图');
-    expect(quickEditFrame).toBeTruthy();
-    expect(quickEditFrame.className).toContain(
-      'image-canvas-editor__generation-frame--generating',
-    );
-    expect(within(quickEditFrame).getByRole('status').textContent).toContain(
-      '生成中',
-    );
-
-    await act(async () => {
-      fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' });
-    });
-
-    const confirmDialog = screen.getByRole('dialog', {
-      name: '删除生成中的占位图',
-    });
-    expect(screen.getByLabelText('快速编辑生成占位图')).toBeTruthy();
-    fireEvent.click(
-      within(confirmDialog).getByRole('button', { name: '确认删除' }),
-    );
-
-    expect(screen.queryByLabelText('快速编辑生成占位图')).toBeNull();
-  });
 });
diff --git a/src/components/image-editor/ImageCanvasEditorModel.test.ts b/src/components/image-editor/ImageCanvasEditorModel.test.ts
index 31922ec29..ec8ad5ca5 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.test.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.test.ts
@@ -102,6 +102,8 @@ describe('ImageCanvasEditorModel', () => {
           folderId: 'project',
           label: '开场动画.mp4',
           imageSrc: '/generated-character-drafts/editor/asset-library/video/开场动画.mp4',
+          thumbnailSrc:
+            '/generated-character-drafts/editor/asset-library/video/开场动画-cover.png',
           width: 560,
           height: 315,
           sourceType: 'uploaded',
@@ -112,7 +114,11 @@ describe('ImageCanvasEditorModel', () => {
     });
 
     expect(library.assets[0]).toMatchObject({ mediaType: 'audio' });
-    expect(library.assets[1]).toMatchObject({ mediaType: 'video' });
+    expect(library.assets[1]).toMatchObject({
+      mediaType: 'video',
+      thumbnailSrc:
+        '/generated-character-drafts/editor/asset-library/video/开场动画-cover.png',
+    });
     expect(
       createLayerFromAsset(
         library.assets[0]!,
@@ -139,6 +145,7 @@ describe('ImageCanvasEditorModel', () => {
       persisted: true,
       objectKey: 'oss/asset-1.png',
       assetObjectId: 'object-1',
+      thumbnailSrc: '/generated-character-drafts/editor/asset-1-cover.png',
       sourceResourceId: 'resource-source-1',
     };
 
@@ -158,6 +165,7 @@ describe('ImageCanvasEditorModel', () => {
       originalHeight: 480,
       objectKey: 'oss/asset-1.png',
       assetObjectId: 'object-1',
+      thumbnailSrc: '/generated-character-drafts/editor/asset-1-cover.png',
       sourceAssetId: 'asset-1',
       sourceResourceId: 'resource-source-1',
     });
@@ -561,6 +569,8 @@ describe('ImageCanvasEditorModel', () => {
       composerOpen: false,
       generatedLayerId: 'layer-generated',
       imageModel: 'gpt-image-2',
+      generationStartedAt: 1_771_400_000_000,
+      generationFinishedAt: 1_771_400_004_000,
       placeholder: {
         x: 100,
         y: 120,
@@ -616,6 +626,8 @@ describe('ImageCanvasEditorModel', () => {
       status: 'generating',
       generatedLayerId: 'layer-generated',
       imageModel: 'gpt-image-2',
+      generationStartedAt: 1_771_400_000_000,
+      generationFinishedAt: 1_771_400_004_000,
       placeholder: {
         x: 100,
         y: 120,
diff --git a/src/components/image-editor/ImageCanvasEditorModel.ts b/src/components/image-editor/ImageCanvasEditorModel.ts
index 3f34f6f21..435a3c146 100644
--- a/src/components/image-editor/ImageCanvasEditorModel.ts
+++ b/src/components/image-editor/ImageCanvasEditorModel.ts
@@ -172,6 +172,7 @@ export function createLayerFromAsset(
     originalHeight: asset.height,
     zIndex: index + 10,
     sourceType: asset.sourceType,
+    thumbnailSrc: asset.thumbnailSrc,
     prompt: asset.prompt,
     actualPrompt: asset.actualPrompt,
     model: asset.model,
@@ -591,6 +592,8 @@ export function hydrateCanvasGenerationDialog(
     aspectRatio: stringOrUndefined(snapshot.aspectRatio),
     imageSize: stringOrUndefined(snapshot.imageSize),
     errorMessage: stringOrUndefined(snapshot.errorMessage),
+    generationStartedAt: numberOrUndefined(snapshot.generationStartedAt),
+    generationFinishedAt: numberOrUndefined(snapshot.generationFinishedAt),
     placeholder: hydrateGenerationPlaceholder(snapshot.placeholder),
   };
 }
@@ -644,11 +647,12 @@ export function hydrateLayer(
       ? imageSequenceFrames
       : undefined,
     previewVideoPath: stringOrNull(snapshot.previewVideoPath),
-    prompt: stringOrNull(snapshot.prompt),
-    actualPrompt: stringOrNull(snapshot.actualPrompt),
-    model: stringOrNull(snapshot.model),
-    provider: stringOrNull(snapshot.provider),
-    taskId: stringOrNull(snapshot.taskId),
+    prompt: stringOrNull(snapshot.prompt) ?? stringOrNull(resource?.prompt),
+    actualPrompt:
+      stringOrNull(snapshot.actualPrompt) ?? stringOrNull(resource?.actualPrompt),
+    model: stringOrNull(snapshot.model) ?? stringOrNull(resource?.model),
+    provider: stringOrNull(snapshot.provider) ?? stringOrNull(resource?.provider),
+    taskId: stringOrNull(snapshot.taskId) ?? stringOrNull(resource?.taskId),
     objectKey: stringOrNull(snapshot.objectKey) ?? stringOrNull(resource?.objectKey),
     assetObjectId:
       stringOrNull(snapshot.assetObjectId) ?? stringOrNull(resource?.assetObjectId),
@@ -691,6 +695,7 @@ export function mapAssetLibrarySnapshot(
       const mediaType = inferEditorAssetMediaType(
         asset.imageSrc,
         asset.objectKey ?? undefined,
+        asset.assetKind,
       );
       return {
         id: asset.assetId,
@@ -710,7 +715,8 @@ export function mapAssetLibrarySnapshot(
         taskId: asset.taskId ?? undefined,
         objectKey: asset.objectKey ?? undefined,
         assetObjectId: asset.assetObjectId ?? undefined,
-        sourceResourceId: asset.sourceResourceId ?? undefined,
+        thumbnailSrc: asset.thumbnailSrc ?? undefined,
+        sourceResourceId: asset.sourceResourceId ?? null,
         publicShowcaseEnabled: asset.publicShowcaseEnabled ?? null,
         assetKind: canvasAssetKindOrNull(asset.assetKind),
         generationInputs: generationInputsOrNull(asset.generationInputs),
@@ -723,7 +729,14 @@ export function mapAssetLibrarySnapshot(
 export function inferEditorAssetMediaType(
   imageSrc: string,
   objectKey?: string | null,
+  assetKind?: string | null,
 ): CanvasMediaType {
+  if (assetKind === 'video') {
+    return 'video';
+  }
+  if (assetKind === 'sound-effect' || assetKind === 'background-music') {
+    return 'audio';
+  }
   const source = `${objectKey ?? ''} ${imageSrc}`.toLowerCase();
   const sourceWithoutQuery = source.split(/[?#]/u)[0] ?? source;
   if (sourceWithoutQuery.includes('.mp4')) {
@@ -812,6 +825,12 @@ export function numberFromSnapshot(value: unknown, fallback: number) {
   return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
 }
 
+function numberOrUndefined(value: unknown) {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
 function audioDurationOrNull(value: unknown) {
   if (value && typeof value === 'object' && 'durationSeconds' in value) {
     return audioDurationOrNull(
diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
index bb8726f7d..c5d8f7c00 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
@@ -70,6 +70,7 @@ export type SidebarMediaItemProps = {
   primaryClassName?: string;
   actions?: ReactNode;
   titleNode?: ReactNode;
+  previewNode?: ReactNode;
   previewOverlay?: ReactNode;
   footerNode?: ReactNode;
   draggable?: boolean;
@@ -97,6 +98,7 @@ export function SidebarMediaItem({
   primaryClassName,
   actions,
   titleNode,
+  previewNode,
   previewOverlay,
   footerNode,
   draggable,
@@ -129,16 +131,18 @@ export function SidebarMediaItem({
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
-        <PlatformMediaFrame
-          src={imageSrc}
-          objectKey={objectKey}
-          alt={imageAlt}
-          fallbackLabel={title}
-          aspect="square"
-          surface="none"
-          className={thumbnailClassName}
-          previewOverlay={previewOverlay}
-        />
+        {previewNode ?? (
+          <PlatformMediaFrame
+            src={imageSrc}
+            objectKey={objectKey}
+            alt={imageAlt}
+            fallbackLabel={title}
+            aspect="square"
+            surface="none"
+            className={thumbnailClassName}
+            previewOverlay={previewOverlay}
+          />
+        )}
       </button>
       <div className={metaClassName}>
         {titleNode ?? <span>{title}</span>}
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index 96e038a0b..5bf62d53d 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -80,6 +80,7 @@ function createSidebarProps(): ImageCanvasSidebarViewProps {
     setAssetPublicShowcaseEnabled: vi.fn(),
     toggleAssetSelected: vi.fn(),
     addAssetLayer: vi.fn(),
+    onDownloadAsset: vi.fn(),
     toggleAllAssetsSelected: vi.fn(),
     deleteSelectedAssets: vi.fn(),
     closeAssetSelectionMode: vi.fn(),
@@ -101,6 +102,7 @@ function createTopbarProps(): ImageCanvasTopbarViewProps {
     layers: [],
     walletBalanceLabel: '0泥点',
     isWalletBalanceLoading: false,
+    currentUser: null,
     assetExportStatus: null,
     isExportingAssets: false,
     setProjectRenameValue: vi.fn(),
@@ -111,11 +113,13 @@ function createTopbarProps(): ImageCanvasTopbarViewProps {
     exportCanvasAssets: vi.fn(),
     onOpenShortcuts: vi.fn(),
     onOpenWallet: vi.fn(),
+    onOpenAccount: vi.fn(),
   };
 }
 
 function createStageProps(): ImageCanvasStageViewProps {
   return {
+    projectId: 'project-1',
     canvasViewportRef: createRef<HTMLDivElement>(),
     specToolWrapRef: createRef<HTMLSpanElement>(),
     musicToolWrapRef: createRef<HTMLSpanElement>(),
@@ -132,6 +136,8 @@ function createStageProps(): ImageCanvasStageViewProps {
     hoveredLayerId: null,
     canvasMarquee: null,
     canvasGenerationDialogs: [],
+    taskListRefreshKey: 0,
+    isTaskSidebarOpen: false,
     generateDialog: null,
     cropExpandPanel: null,
     cropExpandSourceLayer: null,
@@ -146,6 +152,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     canvasClipboard: null,
     imageContextMenu: null,
     imageContextMenuLayer: null,
+    contextMenuLayer: null,
     contextShouldShowLayer: false,
     contextShouldUnlockLayer: false,
     canUndo: false,
@@ -172,6 +179,8 @@ function createStageProps(): ImageCanvasStageViewProps {
     onUpdateLayerAssetKind: vi.fn(),
     onGenerationFramePointerDown: vi.fn(),
     onActivateGenerationDialog: vi.fn(),
+    onFocusExternalTask: vi.fn(),
+    onToggleTaskSidebar: vi.fn(),
     onCropExpandHandlePointerDown: vi.fn(),
     onOpenQuickEditPanel: vi.fn(),
     onOpenRedrawPanel: vi.fn(),
@@ -179,9 +188,12 @@ function createStageProps(): ImageCanvasStageViewProps {
     onRemoveBackground: vi.fn(),
     onExtractUiDesignAssets: vi.fn(),
     onUiAssetExtractionToolChange: vi.fn(),
+    onUiAssetExtractionModelChange: vi.fn(),
     onUiAssetExtractionPointerStart: vi.fn(),
     onUiAssetExtractionPointerMove: vi.fn(),
     onUiAssetExtractionPointerEnd: vi.fn(),
+    onRequestUiAssetExtractionReferenceUpload: vi.fn(),
+    onRemoveUiAssetExtractionReference: vi.fn(),
     onSubmitUiAssetExtraction: vi.fn(),
     onQuickEditSelectionToolChange: vi.fn(),
     onQuickEditSelectionPointerStart: vi.fn(),
@@ -283,6 +295,37 @@ describe('ImageCanvasEditorShellView', () => {
     expect((preview as HTMLElement).style.top).toBe('48px');
   });
 
+  it('keeps the native context menu available inside metadata text', () => {
+    render(
+      <ImageCanvasEditorShellView
+        editorRootRef={createRef<HTMLElement>()}
+        uploadInputRef={createRef<HTMLInputElement>()}
+        onUploadInputChange={vi.fn()}
+        assetDragPreview={null}
+        sidebarProps={createSidebarProps()}
+        topbarProps={createTopbarProps()}
+        stageProps={createStageProps()}
+        metadataProps={createMetadataProps(createLayer())}
+      />,
+    );
+
+    const editor = screen.getByRole('region', { name: '图片画布编辑器' });
+    const metadataText = screen.getByText('上传图片');
+    const metadataContextMenuEvent = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+    });
+    metadataText.dispatchEvent(metadataContextMenuEvent);
+    expect(metadataContextMenuEvent.defaultPrevented).toBe(false);
+
+    const editorContextMenuEvent = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+    });
+    editor.dispatchEvent(editorContextMenuEvent);
+    expect(editorContextMenuEvent.defaultPrevented).toBe(true);
+  });
+
   it('renders quick edit selection tools through the stage props', () => {
     const layer = createLayer();
     const handleQuickEditToolChange = vi.fn();
@@ -293,7 +336,9 @@ describe('ImageCanvasEditorShellView', () => {
       quickEditSelectionState: {
         sourceLayerId: layer.id,
         tool: 'rect' as const,
+        model: 'gemini-3.1-flash-image-preview',
         marks: [],
+        references: [],
         draftMark: null,
         status: 'idle' as const,
       },
@@ -316,9 +361,7 @@ describe('ImageCanvasEditorShellView', () => {
     const toolbar = screen.getByRole('toolbar', {
       name: '快速编辑框选工具',
     });
-    fireEvent.click(
-      within(toolbar).getByRole('button', { name: '椭圆框选' }),
-    );
+    fireEvent.click(within(toolbar).getByRole('button', { name: '椭圆框选' }));
 
     expect(handleQuickEditToolChange).toHaveBeenCalledWith('ellipse');
   });
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.tsx b/src/components/image-editor/ImageCanvasEditorShellView.tsx
index 1701d3f47..00c1ceb57 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.tsx
@@ -48,7 +48,15 @@ export function ImageCanvasEditorShellView({
       ref={editorRootRef}
       className="image-canvas-editor"
       aria-label="图片画布编辑器"
-      onContextMenu={(event) => event.preventDefault()}
+      onContextMenu={(event) => {
+        if (
+          event.target instanceof Element &&
+          event.target.closest('.image-canvas-editor__metadata-dialog')
+        ) {
+          return;
+        }
+        event.preventDefault();
+      }}
     >
       <input
         ref={uploadInputRef}
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 303719a0a..cf782247d 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -228,6 +228,8 @@ export type GenerateDialogState = {
   aspectRatio?: string;
   imageSize?: string;
   errorMessage?: string;
+  generationStartedAt?: number;
+  generationFinishedAt?: number;
   placeholder?: {
     x: number;
     y: number;
@@ -248,6 +250,8 @@ export type CanvasGenerationDialogState = GenerateDialogState & {
   mode: CanvasGenerationDialogMode;
 };
 
+export type CanvasTaskStatus = 'pending' | 'running' | 'done' | 'failed';
+
 export type ImageContextMenuState = {
   layerId: string;
   x: number;
@@ -342,6 +346,7 @@ export type CharacterAnimationPanelState = {
 export type UploadTarget =
   | 'asset'
   | 'generation-reference'
+  | 'ui-asset-extraction-reference'
   | 'quick-edit-reference'
   | 'video-reference-image'
   | 'video-reference-video'
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index cdf7b3bba..50b60b0b3 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -205,6 +205,42 @@ describe('ImageCanvasEditorView', () => {
     });
   });
 
+  it('opens the account modal from the canvas topbar avatar entry', async () => {
+    const openAccountModal = vi.fn();
+    render(
+      <AuthUiContext.Provider
+        value={createAuthValue({
+          user: {
+            id: 'user-1',
+            publicUserCode: 'U001',
+            displayName: '测试用户',
+            avatarUrl: 'data:image/png;base64,AVATAR',
+            phoneNumberMasked: '138****0000',
+            loginMethod: 'password',
+            bindingStatus: 'active',
+            wechatBound: false,
+          },
+          canAccessProtectedData: true,
+          openAccountModal,
+        })}
+      >
+        <ImageCanvasEditorView />
+      </AuthUiContext.Provider>,
+    );
+
+    const accountButton = await screen.findByRole('button', {
+      name: '账号 测试用户',
+    });
+
+    expect(accountButton.querySelector('img')?.getAttribute('src')).toBe(
+      'data:image/png;base64,AVATAR',
+    );
+
+    fireEvent.click(accountButton);
+
+    expect(openAccountModal).toHaveBeenCalledTimes(1);
+  });
+
   it('opens the same account wallet entry from the canvas topbar mud point button', async () => {
     render(
       <AuthUiContext.Provider
@@ -842,7 +878,7 @@ describe('ImageCanvasEditorView', () => {
     expect(contextMenuEvent.defaultPrevented).toBe(true);
   });
 
-  it('shows the blank canvas context menu with paste disabled, zoom, and fit all', () => {
+  it('shows the blank canvas context menu with paste, zoom, and fit all', () => {
     render(<ImageCanvasEditorView />);
 
     const viewport = screen.getByLabelText('画布工作区');
@@ -858,7 +894,7 @@ describe('ImageCanvasEditorView', () => {
           name: '粘贴',
         }) as HTMLButtonElement
       ).disabled,
-    ).toBe(true);
+    ).toBe(false);
     expect(within(menu).getByRole('menuitem', { name: '放大' })).toBeTruthy();
     expect(
       within(menu).getByRole('menuitem', { name: '显示画布所有元素' }),
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index c2150ec9e..8deefaeaa 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -16,6 +16,7 @@ import {
   type EditorProjectSnapshot,
   loadEditorGenerationPricing,
 } from '../../services/image-editor/editorProjectClient';
+import type { ExternalGenerationTaskRecord } from '../../../packages/shared/src/contracts/externalGeneration';
 import { shouldShowRechargeEntry } from '../../services/payment/paymentPlatform';
 import { getPlatformProfileDashboard } from '../../services/platform-entry/platformProfileClient';
 import { useAuthUi } from '../auth/AuthUiContext';
@@ -35,7 +36,6 @@ import {
   resolveContextMenuPosition,
 } from './ImageCanvasEditorModel';
 import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView';
-import { ImageCanvasShortcutDialogView } from './ImageCanvasShortcutDialogView';
 import type {
   AssetPointerDragState,
   CanvasAssetKind,
@@ -44,17 +44,25 @@ import type {
   CanvasLayer,
   CanvasTool,
   CanvasViewport,
+  CharacterReferenceImage,
+  EditorAsset,
   ImageContextMenuState,
   QuickEditPanelState,
 } from './ImageCanvasEditorTypes';
-import { getEditorUploadAccept } from './ImageCanvasFileModel';
+import { getEditorUploadAccept, isImageFile } from './ImageCanvasFileModel';
+import { createLayerGenerationDialogDraft } from './ImageCanvasGenerationDialogModel';
 import { applyEditorGenerationPricingConfig } from './ImageCanvasGenerationModel';
-import { isCanvasGenerationComposerVisible } from './ImageCanvasOverlayModel';
+import {
+  isCanvasGenerationComposerVisible,
+  resolveQuickEditFocusViewport,
+} from './ImageCanvasOverlayModel';
+import { fitViewportToBounds } from './ImageCanvasInteractionModel';
 import {
   getCanvasGenerationSelectionId,
   getSelectedGenerationDialogIds,
   getSelectedLayerIds,
 } from './ImageCanvasSelectionModel';
+import { ImageCanvasShortcutDialogView } from './ImageCanvasShortcutDialogView';
 import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
 import { useCanvasHistory } from './useCanvasHistory';
 import {
@@ -76,6 +84,12 @@ import {
   useImageCanvasViewportControls,
 } from './useImageCanvasViewportControls';
 
+const TASK_FOCUS_HORIZONTAL_INSET = 28;
+const TASK_FOCUS_TOP_INSET = 82;
+const TASK_FOCUS_BOTTOM_INSET = 90;
+const TASK_FOCUS_DIALOG_BOTTOM_INSET = 280;
+const TASK_FOCUS_PADDING = 18;
+
 function resolveLayerProjectResourceImageSrc(layer: CanvasLayer) {
   const objectKey = layer.objectKey?.trim();
   if (objectKey) {
@@ -87,6 +101,105 @@ function resolveLayerProjectResourceImageSrc(layer: CanvasLayer) {
   return layer.src;
 }
 
+function findSourceAnimationLayer(
+  layers: CanvasLayer[],
+  sourceLayer: CanvasLayer,
+) {
+  if (sourceLayer.assetKind !== 'character-animation') {
+    return null;
+  }
+  const sourceResourceId = sourceLayer.sourceResourceId?.trim();
+  if (!sourceResourceId) {
+    return null;
+  }
+  return (
+    layers.find(
+      (layer) =>
+        layer.resourceId === sourceResourceId || layer.id === sourceResourceId,
+    ) ?? null
+  );
+}
+
+function isEditablePasteTarget(target: EventTarget | null) {
+  const element = target instanceof HTMLElement ? target : null;
+  if (!element) {
+    return false;
+  }
+  return (
+    element.tagName === 'INPUT' ||
+    element.tagName === 'TEXTAREA' ||
+    element.isContentEditable
+  );
+}
+
+function getClipboardImageFiles(clipboardData: DataTransfer | null) {
+  if (!clipboardData) {
+    return [];
+  }
+  const files = Array.from(clipboardData.files ?? []).filter(isImageFile);
+  if (files.length) {
+    return files;
+  }
+  return Array.from(clipboardData.items ?? [])
+    .filter((item) => item.kind === 'file' && item.type.startsWith('image/'))
+    .map((item) => item.getAsFile())
+    .filter((file): file is File => file !== null && isImageFile(file));
+}
+
+async function readSystemClipboardImageFiles() {
+  const read = globalThis.navigator?.clipboard?.read;
+  if (!read) {
+    return [];
+  }
+  const items = await read();
+  const imageFiles: File[] = [];
+  for (const item of items) {
+    const imageType = item.types.find((type) => type.startsWith('image/'));
+    if (!imageType) {
+      continue;
+    }
+    const blob = await item.getType(imageType);
+    imageFiles.push(
+      new File([blob], `剪贴板图片.${imageType.split('/')[1] ?? 'png'}`, {
+        type: imageType,
+      }),
+    );
+  }
+  return imageFiles;
+}
+
+function createAssetActionLayer(asset: EditorAsset): CanvasLayer {
+  return {
+    id: `asset-download-${asset.id}`,
+    resourceId:
+      asset.sourceResourceId?.trim() || asset.assetObjectId?.trim() || asset.id,
+    title: asset.label,
+    src: asset.src,
+    mediaType: asset.mediaType,
+    thumbnailSrc: asset.thumbnailSrc,
+    x: 0,
+    y: 0,
+    width: asset.width,
+    height: asset.height,
+    originalWidth: asset.width,
+    originalHeight: asset.height,
+    zIndex: 0,
+    sourceType: asset.sourceType,
+    prompt: asset.prompt ?? null,
+    actualPrompt: asset.actualPrompt ?? null,
+    model: asset.model ?? null,
+    provider: asset.provider ?? null,
+    taskId: asset.taskId ?? null,
+    objectKey: asset.objectKey ?? null,
+    assetObjectId: asset.assetObjectId ?? null,
+    sourceResourceId: asset.sourceResourceId ?? null,
+    sourceAssetId: asset.id,
+    assetKind: asset.assetKind ?? null,
+    generationInputs: asset.generationInputs ?? null,
+    durationSeconds: asset.durationSeconds,
+  };
+}
+
 export function ImageCanvasEditorView() {
   const authUi = useAuthUi();
   const [, setGenerationPricingVersion] = useState(0);
@@ -138,6 +251,9 @@ export function ImageCanvasEditorView() {
   const setQuickEditPanelRef = useRef<
     Dispatch<SetStateAction<QuickEditPanelState | null>>
   >(() => {});
+  const appendUiAssetExtractionReferencesRef = useRef<
+    (references: CharacterReferenceImage[]) => void
+  >(() => {});
   const deleteLayerByIdRef = useRef<(targetLayerId: string | null) => void>(
     () => {},
   );
@@ -154,6 +270,7 @@ export function ImageCanvasEditorView() {
   const [contextMenu, setContextMenu] = useState<CanvasContextMenuState | null>(
     null,
   );
+  const [isViewportInteracting, setIsViewportInteracting] = useState(false);
   const [uploadDropTarget, setUploadDropTarget] = useState<
     'canvas' | 'assets' | null
   >(null);
@@ -173,11 +290,18 @@ export function ImageCanvasEditorView() {
     getCanvasPointFromClient,
     moveViewportFromMinimapPointer,
     updateViewportFromMinimapDrag,
+    flushMinimapViewportDrag,
   } = useImageCanvasViewportControls({
     canvasViewportRef,
     layers,
     captureCanvasHistory: captureViewportHistory,
   });
+  const beginViewportInteraction = useCallback(() => {
+    setIsViewportInteracting(true);
+  }, []);
+  const endViewportInteraction = useCallback(() => {
+    setIsViewportInteracting(false);
+  }, []);
 
   selectedLayerIdRef.current = selectedLayerId;
   selectedLayerIdsRef.current = selectedLayerIds;
@@ -278,7 +402,9 @@ export function ImageCanvasEditorView() {
           if (!isMounted || currentRequestId !== requestId) {
             return;
           }
-          setWalletBalanceLabel(`${formatDashboardCount(dashboard.walletBalance)}泥点`);
+          setWalletBalanceLabel(
+            `${formatDashboardCount(dashboard.walletBalance)}泥点`,
+          );
         })
         .catch(() => {
           if (!isMounted || currentRequestId !== requestId) {
@@ -496,6 +622,117 @@ export function ImageCanvasEditorView() {
     },
     [setGenerateDialog],
   );
+  const focusCanvasBounds = useCallback(
+    (
+      bounds: { x: number; y: number; width: number; height: number },
+      options: { reserveDialogSpace?: boolean } = {},
+    ) => {
+      const nextViewport = fitViewportToBounds({
+        bounds,
+        canvasSize,
+        insets: {
+          left: TASK_FOCUS_HORIZONTAL_INSET,
+          right: TASK_FOCUS_HORIZONTAL_INSET,
+          top: TASK_FOCUS_TOP_INSET,
+          bottom:
+            TASK_FOCUS_BOTTOM_INSET +
+            (options.reserveDialogSpace ? TASK_FOCUS_DIALOG_BOTTOM_INSET : 0),
+        },
+        padding: TASK_FOCUS_PADDING,
+      });
+      setViewport(nextViewport);
+    },
+    [canvasSize, setViewport],
+  );
+  const focusCanvasLayerById = useCallback(
+    (layerId: string) => {
+      const targetLayer = layersRef.current.find(
+        (layer) => layer.id === layerId,
+      );
+      if (!targetLayer) {
+        return;
+      }
+      selectSingleLayer(targetLayer.id);
+      setActiveTool('select');
+      setActiveSidebarPanel('layers');
+      focusCanvasBounds(targetLayer);
+    },
+    [
+      focusCanvasBounds,
+      selectSingleLayer,
+      setActiveSidebarPanel,
+      setActiveTool,
+    ],
+  );
+  const focusCanvasGenerationDialog = useCallback(
+    (dialog: CanvasGenerationDialogState) => {
+      if (
+        dialog.mode === 'quick-edit' &&
+        dialog.sourceLayerId &&
+        !dialog.generatedLayerId
+      ) {
+        const sourceLayer = layersRef.current.find(
+          (layer) => layer.id === dialog.sourceLayerId,
+        );
+        if (sourceLayer) {
+          setSelectedLayerId(sourceLayer.id);
+          setSelectedLayerIds([sourceLayer.id]);
+          setActiveTool('generate');
+          setActiveSidebarPanel('layers');
+          setViewport(
+            resolveQuickEditFocusViewport({ sourceLayer, canvasSize }),
+          );
+          return;
+        }
+      }
+      if (dialog.generatedLayerId) {
+        focusCanvasLayerById(dialog.generatedLayerId);
+        return;
+      }
+      if (!dialog.placeholder) {
+        return;
+      }
+      setSelectedLayerId(null);
+      setSelectedLayerIds([getCanvasGenerationSelectionId(dialog.id)]);
+      setActiveTool('select');
+      focusCanvasBounds(dialog.placeholder, {
+        reserveDialogSpace: isCanvasGenerationComposerVisible(dialog),
+      });
+    },
+    [
+      canvasSize,
+      focusCanvasBounds,
+      focusCanvasLayerById,
+      setActiveSidebarPanel,
+      setActiveTool,
+      setViewport,
+    ],
+  );
+  const focusExternalGenerationTask = useCallback(
+    (task: ExternalGenerationTaskRecord) => {
+      const targetLayer = layersRef.current.find(
+        (layer) =>
+          layer.taskId === task.jobId ||
+          layer.id === task.sourceEntityId ||
+          layer.resourceId === task.sourceEntityId ||
+          layer.sourceResourceId === task.sourceEntityId,
+      );
+      if (targetLayer) {
+        focusCanvasLayerById(targetLayer.id);
+        return;
+      }
+      const targetDialog = canvasGenerationDialogsRef.current.find(
+        (dialog) =>
+          dialog.id === task.sourceEntityId ||
+          dialog.sourceLayerId === task.sourceEntityId ||
+          dialog.generatedLayerId === task.sourceEntityId,
+      );
+      if (targetDialog) {
+        focusCanvasGenerationDialog(targetDialog);
+      }
+    },
+    [focusCanvasGenerationDialog, focusCanvasLayerById],
+  );
   const persistGeneratedAsset = useCallback(
     (layer: CanvasLayer) => {
       if (authUiRef.current && !authUiRef.current.canAccessProtectedData) {
@@ -607,6 +844,7 @@ export function ImageCanvasEditorView() {
           taskId: asset.taskId ?? undefined,
           objectKey: asset.objectKey ?? undefined,
           assetObjectId: asset.assetObjectId ?? undefined,
+          thumbnailSrc: asset.thumbnailSrc ?? undefined,
           durationSeconds: asset.durationSeconds ?? undefined,
           assetKind: canvasAssetKindOrNull(asset.assetKind),
           generationInputs: generationInputsOrNull(asset.generationInputs),
@@ -669,6 +907,7 @@ export function ImageCanvasEditorView() {
       layers,
       canvasGenerationDialogs,
       viewport,
+      isViewportInteracting,
       canAccessProtectedData: authUi ? authUi.canAccessProtectedData : true,
       openEditorLoginModal,
     });
@@ -731,6 +970,12 @@ export function ImageCanvasEditorView() {
     projectId,
     projectTitle,
   });
+  const downloadAsset = useCallback(
+    (asset: EditorAsset) => {
+      exportLayerImage(createAssetActionLayer(asset));
+    },
+    [exportLayerImage],
+  );
   const {
     uploadInputRef,
     uploadTarget,
@@ -755,6 +1000,8 @@ export function ImageCanvasEditorView() {
     setLayers,
     setGenerateDialog,
     setQuickEditPanel: (updater) => setQuickEditPanelRef.current(updater),
+    appendUiAssetExtractionReferences: (references) =>
+      appendUiAssetExtractionReferencesRef.current(references),
     appendCanvasLayersWithResources,
     selectSingleLayer,
   });
@@ -763,6 +1010,7 @@ export function ImageCanvasEditorView() {
     canvasSize,
     viewport,
     setViewport,
+    canvasViewportRef,
     setLayers,
     layerCounterRef,
     specToolWrapRef,
@@ -825,7 +1073,6 @@ export function ImageCanvasEditorView() {
     isPickingUiDesignSpecFromCanvas,
     setIsPickingUiDesignSpecFromCanvas,
     openCharacterAnimationPanel,
-    openQuickEditPanel,
     openRedrawPanel,
     openCropExpandPanel,
     removeSelectedLayerBackground,
@@ -844,6 +1091,7 @@ export function ImageCanvasEditorView() {
     quickEditSelectionState,
     quickEditSelectionSourceLayer,
     changeUiAssetExtractionTool,
+    changeUiAssetExtractionModel,
     changeQuickEditSelectionTool,
     startUiAssetExtractionPointer,
     startQuickEditSelectionPointer,
@@ -852,12 +1100,16 @@ export function ImageCanvasEditorView() {
     endUiAssetExtractionPointer,
     endQuickEditSelectionPointer,
     cancelUiAssetExtraction,
+    appendUiAssetExtractionReferences,
+    removeUiAssetExtractionReference,
     submitUiAssetExtraction,
     generationComposerStyle,
     generationComposerNode,
     switchGenerationTool,
   } = generationSurface;
   setQuickEditPanelRef.current = setQuickEditPanel;
+  appendUiAssetExtractionReferencesRef.current =
+    appendUiAssetExtractionReferences;
   const clearGenerationPanelsAfterBlur = useCallback(() => {
     setQuickEditPanel(null);
     setCropExpandPanel(null);
@@ -888,6 +1140,55 @@ export function ImageCanvasEditorView() {
     clearGenerationPanelsAfterBlur,
     getCanvasPointFromClient,
   });
+  const openLayerGenerationDialog = useCallback(
+    (layer: CanvasLayer) => {
+      const existingDialog = [...canvasGenerationDialogsRef.current]
+        .reverse()
+        .find((dialog) => dialog.generatedLayerId === layer.id);
+      if (existingDialog) {
+        activateCanvasGenerationDialog(existingDialog);
+        setSelectedLayerId(layer.id);
+        setSelectedLayerIds([layer.id]);
+        return true;
+      }
+      const restoredDraft = createLayerGenerationDialogDraft({
+        sourceLayer: layer,
+        canvasSize,
+        viewport: viewportRef.current,
+        sourceAnimationLayer: findSourceAnimationLayer(
+          layersRef.current,
+          layer,
+        ),
+      });
+      if (!restoredDraft) {
+        return false;
+      }
+      openCanvasGenerationDialog(restoredDraft);
+      setSelectedLayerId(layer.id);
+      setSelectedLayerIds([layer.id]);
+      return true;
+    },
+    [
+      activateCanvasGenerationDialog,
+      canvasSize,
+      openCanvasGenerationDialog,
+      setSelectedLayerId,
+      setSelectedLayerIds,
+    ],
+  );
+  const openGeneratedLayerGenerationDialog = useCallback(
+    (layer: CanvasLayer) => {
+      if (layer.sourceType !== 'generated') {
+        return false;
+      }
+      return openLayerGenerationDialog(layer);
+    },
+    [openLayerGenerationDialog],
+  );
+  const contextMenuLayer =
+    contextMenu?.kind === 'layer'
+      ? (layers.find((layer) => layer.id === contextMenu.layerId) ?? null)
+      : null;
   const {
     canvasClipboard,
     pasteCanvasClipboard,
@@ -970,11 +1271,15 @@ export function ImageCanvasEditorView() {
     pickCharacterReferenceFromLayer,
     pickIconSpecFromLayer,
     pickUiDesignSpecFromLayer,
+    openLayerGenerationDialog: openGeneratedLayerGenerationDialog,
     activateCanvasGenerationDialog,
     updateCanvasGenerationDialogById,
     moveViewportFromMinimapPointer,
     updateViewportFromMinimapDrag,
+    flushMinimapViewportDrag,
     minimapScale: minimapModel?.scale ?? 1,
+    onViewportInteractionStart: beginViewportInteraction,
+    onViewportInteractionEnd: endViewportInteraction,
     onCloseImageContextMenu: () => setImageContextMenu(null),
   });
   resetCanvasInteractionStateRef.current = clearActiveInteraction;
@@ -1034,7 +1339,9 @@ export function ImageCanvasEditorView() {
   }, [pendingGenerationDeleteDialog, removeCanvasGenerationDialog]);
   const updateLayerAssetKind = useCallback(
     (layerId: string, assetKind: CanvasAssetKind | null) => {
-      const targetLayer = layersRef.current.find((layer) => layer.id === layerId);
+      const targetLayer = layersRef.current.find(
+        (layer) => layer.id === layerId,
+      );
       if (!targetLayer || targetLayer.assetKind === assetKind) {
         return;
       }
@@ -1220,6 +1527,48 @@ export function ImageCanvasEditorView() {
     setShiftPressed,
   });
 
+  const pasteCanvasOrSystemClipboard = useCallback(
+    (canvasPoint?: { x: number; y: number }) => {
+      if (pasteCanvasClipboard(canvasPoint)) {
+        return;
+      }
+      void readSystemClipboardImageFiles()
+        .then((imageFiles) => {
+          if (imageFiles.length) {
+            addUploadedFiles(imageFiles, { addToCanvas: true, canvasPoint });
+          }
+        })
+        .catch(() => {
+          // 系统剪贴板读取受浏览器权限限制，失败时保留原生粘贴路径。
+        });
+    },
+    [addUploadedFiles, pasteCanvasClipboard],
+  );
+
+  useEffect(() => {
+    const handleClipboardPaste = (event: ClipboardEvent) => {
+      if (isEditablePasteTarget(event.target)) {
+        return;
+      }
+      const didPasteCanvasClipboard = pasteCanvasClipboard();
+      if (didPasteCanvasClipboard) {
+        event.preventDefault();
+        return;
+      }
+      const imageFiles = getClipboardImageFiles(event.clipboardData);
+      if (imageFiles.length) {
+        event.preventDefault();
+        addUploadedFiles(imageFiles, { addToCanvas: true });
+        return;
+      }
+    };
+
+    window.addEventListener('paste', handleClipboardPaste);
+    return () => {
+      window.removeEventListener('paste', handleClipboardPaste);
+    };
+  }, [addUploadedFiles, pasteCanvasClipboard]);
+
   useEffect(() => {
     const blockBrowserZoom = (event: WheelEvent) => {
       const editorElement = editorRootRef.current;
@@ -1330,6 +1679,7 @@ export function ImageCanvasEditorView() {
     setAssetPublicShowcaseEnabled,
     toggleAssetSelected,
     addAssetLayer,
+    onDownloadAsset: downloadAsset,
     toggleAllAssetsSelected,
     deleteSelectedAssets,
     closeAssetSelectionMode,
@@ -1348,6 +1698,7 @@ export function ImageCanvasEditorView() {
     layers,
     walletBalanceLabel,
     isWalletBalanceLoading,
+    currentUser: authUi?.user,
     assetExportStatus,
     isExportingAssets,
     setProjectRenameValue,
@@ -1358,8 +1709,16 @@ export function ImageCanvasEditorView() {
     exportCanvasAssets,
     onOpenShortcuts: () => setIsShortcutDialogOpen(true),
     onOpenWallet: openRechargeOrRewardCodeModal,
+    onOpenAccount: () => {
+      if (authUi?.user) {
+        authUi.openAccountModal();
+        return;
+      }
+      authUi?.openLoginModal();
+    },
   };
   const stageProps = {
+    projectId,
     canvasViewportRef,
     specToolWrapRef,
     musicToolWrapRef,
@@ -1376,6 +1735,8 @@ export function ImageCanvasEditorView() {
     hoveredLayerId,
     canvasMarquee,
     canvasGenerationDialogs,
+    taskListRefreshKey: generationSurface.taskListRefreshKey,
+    isTaskSidebarOpen: generationSurface.isTaskSidebarOpen,
     generateDialog,
     cropExpandPanel: generationSurface.cropExpandPanel,
     cropExpandSourceLayer: generationSurface.cropExpandSourceLayer,
@@ -1422,25 +1783,31 @@ export function ImageCanvasEditorView() {
     onUpdateLayerAssetKind: updateLayerAssetKind,
     onGenerationFramePointerDown: handleGenerationFramePointerDown,
     onActivateGenerationDialog: activateCanvasGenerationDialog,
-    onCropExpandHandlePointerDown:
-      generationSurface.startCropExpandFrameResize,
-    onOpenQuickEditPanel: openQuickEditPanel,
+    onFocusExternalTask: focusExternalGenerationTask,
+    onToggleTaskSidebar: generationSurface.toggleTaskSidebar,
+    onCropExpandHandlePointerDown: generationSurface.startCropExpandFrameResize,
+    onOpenQuickEditPanel: openLayerGenerationDialog,
     onOpenRedrawPanel: openRedrawPanel,
     onOpenCropExpandPanel: openCropExpandPanel,
     onRemoveBackground: removeSelectedLayerBackground,
     onExtractUiDesignAssets: extractUiDesignAssets,
     onUiAssetExtractionToolChange: changeUiAssetExtractionTool,
+    onUiAssetExtractionModelChange: changeUiAssetExtractionModel,
     onUiAssetExtractionPointerStart: startUiAssetExtractionPointer,
     onUiAssetExtractionPointerMove: moveUiAssetExtractionPointer,
     onUiAssetExtractionPointerEnd: endUiAssetExtractionPointer,
+    onRequestUiAssetExtractionReferenceUpload: () =>
+      requestUpload('ui-asset-extraction-reference'),
+    onRemoveUiAssetExtractionReference: removeUiAssetExtractionReference,
     onSubmitUiAssetExtraction: () => void submitUiAssetExtraction(),
+    contextMenuLayer,
     onQuickEditSelectionToolChange: changeQuickEditSelectionTool,
     onQuickEditSelectionPointerStart: startQuickEditSelectionPointer,
     onQuickEditSelectionPointerMove: moveQuickEditSelectionPointer,
     onQuickEditSelectionPointerEnd: endQuickEditSelectionPointer,
     onOpenCharacterAnimationPanel: openCharacterAnimationPanel,
     onDownloadLayer: exportLayerImage,
-    onPasteCanvasClipboard: pasteCanvasClipboard,
+    onPasteCanvasClipboard: pasteCanvasOrSystemClipboard,
     onCopyContextLayers: copyContextLayers,
     onDuplicateContextLayers: duplicateContextLayers,
     onMoveContextLayers: moveContextLayers,
diff --git a/src/components/image-editor/ImageCanvasExportModel.test.ts b/src/components/image-editor/ImageCanvasExportModel.test.ts
index ba822dc14..6a3eeeb06 100644
--- a/src/components/image-editor/ImageCanvasExportModel.test.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import {
+  buildAnimatedGifPreviewBytes,
   buildLayerExportMetadata,
   buildSpineImageSequenceJson,
   buildSpineImageSequenceReadme,
@@ -20,6 +21,48 @@ import {
 } from './ImageCanvasGenerationModel';
 
 describe('ImageCanvasExportModel', () => {
+  it('builds a real animated GIF preview from sequence frames', () => {
+    const gifBytes = buildAnimatedGifPreviewBytes({
+      width: 2,
+      height: 1,
+      frameDelayCentiseconds: 12,
+      frames: [
+        {
+          width: 2,
+          height: 1,
+          rgba: Uint8Array.from([255, 0, 0, 255, 0, 0, 0, 0]),
+        },
+        {
+          width: 2,
+          height: 1,
+          rgba: Uint8Array.from([0, 255, 0, 255, 0, 0, 255, 255]),
+        },
+      ],
+    });
+
+    expect(readAscii(gifBytes, 0, 6)).toBe('GIF89a');
+    expect(readAscii(gifBytes, 0, gifBytes.length)).toContain('NETSCAPE2.0');
+    expect(countGifImageDescriptors(gifBytes)).toBe(2);
+    expect(gifBytes.at(-1)).toBe(0x3b);
+  });
+
+  it('rejects GIF preview frames with mismatched dimensions', () => {
+    expect(() =>
+      buildAnimatedGifPreviewBytes({
+        width: 2,
+        height: 2,
+        frameDelayCentiseconds: 12,
+        frames: [
+          {
+            width: 1,
+            height: 2,
+            rgba: Uint8Array.from([255, 0, 0, 255, 0, 0, 255, 255]),
+          },
+        ],
+      }),
+    ).toThrow('GIF 预览帧尺寸不一致');
+  });
+
   it('normalizes export file names and dates', () => {
     expect(sanitizeExportFilePart('  角色/草图:*?  ', 'fallback')).toBe(
       '角色 草图',
@@ -72,11 +115,7 @@ describe('ImageCanvasExportModel', () => {
     expect(getImageExtensionFromTypeOrSrc('', '/image.webp?x=1')).toBe('webp');
     expect(getImageExtensionFromTypeOrSrc('', '/image.unknown')).toBe('png');
     expect(
-      getLayerAssetExtensionFromTypeOrSrc(
-        'video',
-        'video/mp4',
-        '/video.png',
-      ),
+      getLayerAssetExtensionFromTypeOrSrc('video', 'video/mp4', '/video.png'),
     ).toBe('mp4');
     expect(
       getLayerAssetExtensionFromTypeOrSrc(
@@ -106,7 +145,9 @@ describe('ImageCanvasExportModel', () => {
     expect(blob.type).toBe('text/plain');
     expect(await blob.text()).toBe('Hello');
 
-    expect(buildLayerExportMetadata(buildLayer(), 'images/001-layer.png')).toEqual({
+    expect(
+      buildLayerExportMetadata(buildLayer(), 'images/001-layer.png'),
+    ).toEqual({
       title: '导出图层',
       file: 'images/001-layer.png',
       visible: {
@@ -209,9 +250,7 @@ describe('ImageCanvasExportModel', () => {
       width: 192,
       height: 256,
     });
-    expect(
-      spineJson.animations.animation.slots.character.attachment,
-    ).toEqual([
+    expect(spineJson.animations.animation.slots.character.attachment).toEqual([
       { time: 0, name: 'animation_0001' },
       { time: 0.125, name: 'animation_0002' },
       { time: 0.25, name: 'animation_0003' },
@@ -242,7 +281,9 @@ describe('ImageCanvasExportModel', () => {
 
       expect(blob.type).toBe('video/mp4');
       expect(fetchMock).toHaveBeenCalledWith(
-        expect.stringContaining('/api/assets/read-bytes?objectKey=generated%2Fvideo.mp4'),
+        expect.stringContaining(
+          '/api/assets/read-bytes?objectKey=generated%2Fvideo.mp4',
+        ),
         expect.any(Object),
       );
       expect(fetchMock).not.toHaveBeenCalledWith(
@@ -300,6 +341,62 @@ describe('ImageCanvasExportModel', () => {
   });
 });
 
+function readAscii(bytes: Uint8Array, start: number, end: number) {
+  return Array.from(bytes.slice(start, end), (byte) =>
+    String.fromCharCode(byte),
+  ).join('');
+}
+
+function skipGifDataSubBlocks(bytes: Uint8Array, offset: number) {
+  let cursor = offset;
+  while (cursor < bytes.length) {
+    const blockLength = bytes[cursor] ?? 0;
+    cursor += 1;
+    if (blockLength === 0) {
+      return cursor;
+    }
+    cursor += blockLength;
+  }
+  return cursor;
+}
+
+function countGifImageDescriptors(bytes: Uint8Array) {
+  let cursor = 13 + 256 * 3;
+  let count = 0;
+  while (cursor < bytes.length) {
+    const blockType = bytes[cursor];
+    if (blockType === 0x3b) {
+      return count;
+    }
+    if (blockType === 0x21) {
+      const label = bytes[cursor + 1];
+      if (label === 0xf9) {
+        const blockLength = bytes[cursor + 2] ?? 0;
+        cursor += 3 + blockLength + 1;
+        continue;
+      }
+      cursor = skipGifDataSubBlocks(
+        bytes,
+        cursor + 3 + (bytes[cursor + 2] ?? 0),
+      );
+      continue;
+    }
+    if (blockType === 0x2c) {
+      count += 1;
+      const packed = bytes[cursor + 9] ?? 0;
+      cursor += 10;
+      if (packed & 0x80) {
+        cursor += 3 * 2 ** ((packed & 0x07) + 1);
+      }
+      cursor += 1;
+      cursor = skipGifDataSubBlocks(bytes, cursor);
+      continue;
+    }
+    throw new Error(`Unknown GIF block: ${blockType}`);
+  }
+  return count;
+}
+
 function buildLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   return {
     id: 'layer-1',
diff --git a/src/components/image-editor/ImageCanvasExportModel.ts b/src/components/image-editor/ImageCanvasExportModel.ts
index d1619260d..3c064986d 100644
--- a/src/components/image-editor/ImageCanvasExportModel.ts
+++ b/src/components/image-editor/ImageCanvasExportModel.ts
@@ -217,6 +217,181 @@ export type ExportedImageSequenceFrame = {
   height: number;
 };
 
+export type AnimatedGifPreviewFrame = {
+  width: number;
+  height: number;
+  rgba: Uint8Array | Uint8ClampedArray;
+};
+
+const GIF_PREVIEW_COLOR_TABLE_SIZE = 256;
+const GIF_PREVIEW_TRANSPARENT_INDEX = 0;
+const GIF_PREVIEW_COLOR_COUNT = 252;
+const GIF_PREVIEW_LZW_MIN_CODE_SIZE = 8;
+
+function pushAscii(bytes: number[], value: string) {
+  for (let index = 0; index < value.length; index += 1) {
+    bytes.push(value.charCodeAt(index) & 0xff);
+  }
+}
+
+function pushUint16Le(bytes: number[], value: number) {
+  bytes.push(value & 0xff, (value >> 8) & 0xff);
+}
+
+function pushByteArray(bytes: number[], value: Uint8Array) {
+  for (const byte of value) {
+    bytes.push(byte);
+  }
+}
+
+function buildGifPreviewPalette() {
+  const palette = new Uint8Array(GIF_PREVIEW_COLOR_TABLE_SIZE * 3);
+  let index = 1;
+  for (let red = 0; red < 6; red += 1) {
+    for (let green = 0; green < 7; green += 1) {
+      for (let blue = 0; blue < 6; blue += 1) {
+        palette[index * 3] = Math.round((red * 255) / 5);
+        palette[index * 3 + 1] = Math.round((green * 255) / 6);
+        palette[index * 3 + 2] = Math.round((blue * 255) / 5);
+        index += 1;
+      }
+    }
+  }
+  return palette;
+}
+
+function quantizeGifPreviewColor(red: number, green: number, blue: number) {
+  const redIndex = Math.round((red * 5) / 255);
+  const greenIndex = Math.round((green * 6) / 255);
+  const blueIndex = Math.round((blue * 5) / 255);
+  return Math.min(
+    GIF_PREVIEW_COLOR_COUNT,
+    1 + (redIndex * 7 + greenIndex) * 6 + blueIndex,
+  );
+}
+
+function mapRgbaToGifPreviewIndices(frame: AnimatedGifPreviewFrame) {
+  const pixelCount = frame.width * frame.height;
+  if (frame.rgba.length < pixelCount * 4) {
+    throw new Error('GIF 预览帧像素数据不足');
+  }
+  const indices = new Uint8Array(pixelCount);
+  for (let pixelIndex = 0; pixelIndex < pixelCount; pixelIndex += 1) {
+    const rgbaIndex = pixelIndex * 4;
+    const alpha = frame.rgba[rgbaIndex + 3] ?? 255;
+    indices[pixelIndex] =
+      alpha < 128
+        ? GIF_PREVIEW_TRANSPARENT_INDEX
+        : quantizeGifPreviewColor(
+            frame.rgba[rgbaIndex] ?? 0,
+            frame.rgba[rgbaIndex + 1] ?? 0,
+            frame.rgba[rgbaIndex + 2] ?? 0,
+          );
+  }
+  return indices;
+}
+
+function encodeGifLzwData(indices: Uint8Array) {
+  const clearCode = 1 << GIF_PREVIEW_LZW_MIN_CODE_SIZE;
+  const endCode = clearCode + 1;
+  const codeSize = GIF_PREVIEW_LZW_MIN_CODE_SIZE + 1;
+  const bytes: number[] = [];
+  let bitBuffer = 0;
+  let bitLength = 0;
+
+  function writeCode(code: number) {
+    bitBuffer |= code << bitLength;
+    bitLength += codeSize;
+    while (bitLength >= 8) {
+      bytes.push(bitBuffer & 0xff);
+      bitBuffer >>= 8;
+      bitLength -= 8;
+    }
+  }
+
+  writeCode(clearCode);
+  let codesSinceClear = 0;
+  for (const index of indices) {
+    if (codesSinceClear >= 250) {
+      writeCode(clearCode);
+      codesSinceClear = 0;
+    }
+    writeCode(index);
+    codesSinceClear += 1;
+  }
+  writeCode(endCode);
+  if (bitLength > 0) {
+    bytes.push(bitBuffer & 0xff);
+  }
+
+  return Uint8Array.from(bytes);
+}
+
+function pushGifDataSubBlocks(bytes: number[], data: Uint8Array) {
+  bytes.push(GIF_PREVIEW_LZW_MIN_CODE_SIZE);
+  for (let offset = 0; offset < data.length; offset += 255) {
+    const chunk = data.slice(offset, offset + 255);
+    bytes.push(chunk.length);
+    pushByteArray(bytes, chunk);
+  }
+  bytes.push(0);
+}
+
+export function buildAnimatedGifPreviewBytes({
+  width,
+  height,
+  frames,
+  frameDelayCentiseconds,
+}: {
+  width: number;
+  height: number;
+  frames: AnimatedGifPreviewFrame[];
+  frameDelayCentiseconds: number;
+}) {
+  const gifWidth = Math.max(1, Math.round(width));
+  const gifHeight = Math.max(1, Math.round(height));
+  if (!frames.length) {
+    throw new Error('GIF 预览帧为空');
+  }
+  const delay = Math.max(
+    1,
+    Math.min(65_535, Math.round(frameDelayCentiseconds)),
+  );
+  const bytes: number[] = [];
+
+  pushAscii(bytes, 'GIF89a');
+  pushUint16Le(bytes, gifWidth);
+  pushUint16Le(bytes, gifHeight);
+  bytes.push(0xf7, 0, 0);
+  pushByteArray(bytes, buildGifPreviewPalette());
+
+  bytes.push(0x21, 0xff, 0x0b);
+  pushAscii(bytes, 'NETSCAPE2.0');
+  bytes.push(0x03, 0x01, 0x00, 0x00, 0x00);
+
+  for (const frame of frames) {
+    if (frame.width !== gifWidth || frame.height !== gifHeight) {
+      throw new Error('GIF 预览帧尺寸不一致');
+    }
+    bytes.push(0x21, 0xf9, 0x04, 0x09);
+    pushUint16Le(bytes, delay);
+    bytes.push(GIF_PREVIEW_TRANSPARENT_INDEX, 0);
+    bytes.push(0x2c);
+    pushUint16Le(bytes, 0);
+    pushUint16Le(bytes, 0);
+    pushUint16Le(bytes, gifWidth);
+    pushUint16Le(bytes, gifHeight);
+    bytes.push(0);
+    pushGifDataSubBlocks(
+      bytes,
+      encodeGifLzwData(mapRgbaToGifPreviewIndices(frame)),
+    );
+  }
+
+  bytes.push(0x3b);
+  return Uint8Array.from(bytes);
+}
+
 const DEFAULT_SPINE_VERSION = '4.2.00';
 const SPINE_SEQUENCE_BONE_NAME = 'root';
 const SPINE_SEQUENCE_SLOT_NAME = 'character';
diff --git a/src/components/image-editor/ImageCanvasFileModel.ts b/src/components/image-editor/ImageCanvasFileModel.ts
index d3264466a..335802380 100644
--- a/src/components/image-editor/ImageCanvasFileModel.ts
+++ b/src/components/image-editor/ImageCanvasFileModel.ts
@@ -426,9 +426,25 @@ export function probeMediaDurationSeconds(
   file: File,
   mediaType: 'video' | 'audio',
 ) {
-  return new Promise<number>((resolve, reject) => {
-    if (typeof document === 'undefined' || typeof URL === 'undefined') {
-      resolve(Number.NaN);
+  return probeMediaFileMetadata(file, mediaType).then(
+    (metadata) => metadata.durationSeconds,
+  );
+}
+
+export function probeMediaFileMetadata(
+  file: File,
+  mediaType: 'video' | 'audio',
+) {
+  return new Promise<{
+    durationSeconds: number;
+    dimensions: ImageFileDimensions | null;
+  }>((resolve, reject) => {
+    if (
+      typeof document === 'undefined' ||
+      typeof URL === 'undefined' ||
+      typeof URL.createObjectURL !== 'function'
+    ) {
+      resolve({ durationSeconds: Number.NaN, dimensions: null });
       return;
     }
     const element =
@@ -443,13 +459,20 @@ export function probeMediaDurationSeconds(
     };
     element.preload = 'metadata';
     element.onloadedmetadata = () => {
-      const duration = element.duration;
+      const dimensions =
+        mediaType === 'video'
+          ? normalizeImageFileDimensions({
+              width: (element as HTMLVideoElement).videoWidth,
+              height: (element as HTMLVideoElement).videoHeight,
+            })
+          : null;
+      const durationSeconds = element.duration;
       cleanup();
-      resolve(duration);
+      resolve({ durationSeconds, dimensions });
     };
     element.onerror = () => {
       cleanup();
-      reject(new Error('读取媒体时长失败'));
+      reject(new Error('读取媒体元数据失败'));
     };
     element.src = objectUrl;
   });
diff --git a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
index 5b3112d99..31dc8dafd 100644
--- a/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx
@@ -117,6 +117,36 @@ function renderComposer(
 }
 
 describe('ImageCanvasGenerationComposerView', () => {
+  it('让快速编辑复用普通图片生成面板结构', () => {
+    renderComposer({
+      mode: 'quick-edit',
+      prompt: '',
+      status: 'idle',
+      composerOpen: true,
+      sourceLayerId: 'layer-source',
+      generationReferences: [],
+      imageModel: 'gpt-image-2',
+      aspectRatio: '1:1',
+      imageSize: '1K',
+    });
+
+    const panel = screen.getByRole('dialog', { name: '快速编辑图片' });
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer',
+    );
+    expect(panel.className).toContain(
+      'image-canvas-editor__generation-composer--image',
+    );
+    expect(panel.className).not.toContain(
+      'image-canvas-editor__quick-edit-panel',
+    );
+    expect(within(panel).getByRole('textbox', { name: '快速编辑提示词' }))
+      .toBeTruthy();
+    expect(
+      panel.querySelector('.image-canvas-editor__generation-composer-footer'),
+    ).toBeTruthy();
+  });
+
   it('让生成UI设计图面板复用普通图片生成面板的纵向结构', () => {
     const setGenerateDialog = vi.fn();
     renderComposer({
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
index 6eb956973..b8253840e 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.test.ts
@@ -20,9 +20,11 @@ import {
   createEditDialogDraft,
   createGenerateDialogDraft,
   createIconGenerationDialogDraft,
+  createLayerGenerationDialogDraft,
   createPublicationGenerationDialogDraft,
   createQuickEditPanelDraft,
   createRedrawPanelDraft,
+  createSameSourceGenerationDialogDraft,
   createSoundEffectGenerationDialogDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
@@ -381,6 +383,9 @@ describe('ImageCanvasGenerationDialogModel', () => {
       status: 'idle',
       composerOpen: true,
       sourceLayerId: 'layer-source',
+      imageModel: 'gpt-image-2',
+      aspectRatio: '4:3',
+      imageSize: '1K',
     });
     expect(createQuickEditPanelDraft(sourceLayer)).toEqual({
       mode: 'quick-edit',
@@ -475,7 +480,8 @@ describe('ImageCanvasGenerationDialogModel', () => {
             fields: [
               {
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
               },
               { title: 'model', value: 'gpt-image-2' },
             ],
@@ -486,6 +492,163 @@ describe('ImageCanvasGenerationDialogModel', () => {
     ).toBe('');
   });
 
+  it('creates same-source generator drafts for generated image layers', () => {
+    const canvasSize = { width: 960, height: 720 };
+    const viewport = { x: 0, y: 0, scale: 1 };
+    const characterDraft = createSameSourceGenerationDialogDraft({
+      sourceLayer: createLayer({
+        assetKind: 'character',
+        generationInputs: {
+          fields: [{ title: '角色设定', value: '红发骑士' }],
+          references: [],
+        },
+      }),
+      canvasSize,
+      viewport,
+      mode: 'redraw',
+    });
+
+    expect(characterDraft).toMatchObject({
+      mode: 'character',
+      prompt: '红发骑士',
+      sourceLayerId: 'layer-source',
+      placeholder: {
+        x: 472,
+        y: 140,
+      },
+    });
+
+    const publicationDraft = createSameSourceGenerationDialogDraft({
+      sourceLayer: createLayer({
+        assetKind: 'publication-material',
+        originalWidth: 720,
+        originalHeight: 1280,
+        generationInputs: {
+          fields: [
+            { title: '游戏名', value: '星海远征' },
+            { title: '游戏分类', value: '冒险' },
+            { title: '一句话描述游戏', value: '驾驶飞船探索星云' },
+          ],
+          references: [],
+        },
+      }),
+      canvasSize,
+      viewport,
+      mode: 'redraw',
+    });
+
+    expect(publicationDraft).toMatchObject({
+      mode: 'publication',
+      publicationWorkflowId: 'publication-detail-gallery',
+      publicationGameInfo: {
+        gameName: '星海远征',
+        gameCategories: '冒险',
+        gameDescription: '驾驶飞船探索星云',
+      },
+    });
+
+    expect(
+      createSameSourceGenerationDialogDraft({
+        sourceLayer: createLayer(),
+        canvasSize,
+        viewport,
+        mode: 'redraw',
+      }),
+    ).toBeNull();
+  });
+
+  it('restores the plain image generator when a source generation dialog exists', () => {
+    const canvasSize = { width: 960, height: 720 };
+    const viewport = { x: 0, y: 0, scale: 1 };
+
+    expect(
+      createSameSourceGenerationDialogDraft({
+        sourceLayer: createLayer({
+          prompt: '【系统内置】普通提示词',
+          generationInputs: {
+            fields: [{ title: '生成提示词', value: '普通图' }],
+            references: [],
+          },
+        }),
+        canvasSize,
+        viewport,
+        sourceDialog: {
+          id: 'generation-dialog-1',
+          mode: 'generate',
+          prompt: '普通图',
+          status: 'idle',
+          generatedLayerId: 'layer-source',
+          imageModel: 'gpt-image-2',
+          aspectRatio: '2:3',
+          imageSize: '2K',
+        },
+        mode: 'redraw',
+      }),
+    ).toMatchObject({
+      mode: 'generate',
+      prompt: '普通图',
+      sourceLayerId: 'layer-source',
+      imageModel: 'gpt-image-2',
+      aspectRatio: '2:3',
+      imageSize: '2K',
+    });
+  });
+
+  it('restores a plain generated layer from its own metadata', () => {
+    const canvasSize = { width: 960, height: 720 };
+    const viewport = { x: 0, y: 0, scale: 1 };
+
+    expect(
+      createLayerGenerationDialogDraft({
+        sourceLayer: createLayer({
+          sourceType: 'generated',
+          prompt: '图层提示词',
+          model: 'gpt-image-2',
+          generationInputs: {
+            fields: [{ title: '生成提示词', value: '元数据提示词' }],
+            references: [],
+          },
+        }),
+        canvasSize,
+        viewport,
+      }),
+    ).toMatchObject({
+      mode: 'generate',
+      prompt: '元数据提示词',
+      generatedLayerId: 'layer-source',
+      imageModel: 'gpt-image-2',
+      placeholder: {
+        x: 120,
+        y: 140,
+        width: 320,
+        height: 240,
+        originalWidth: 1024,
+        originalHeight: 768,
+      },
+    });
+  });
+
+  it('restores a tagged uploaded layer from its current asset kind', () => {
+    expect(
+      createLayerGenerationDialogDraft({
+        sourceLayer: createLayer({
+          sourceType: 'uploaded',
+          assetKind: 'character',
+          generationInputs: {
+            fields: [{ title: '角色设定', value: '黑衣剑士' }],
+            references: [],
+          },
+        }),
+        canvasSize: { width: 960, height: 720 },
+        viewport: { x: 0, y: 0, scale: 1 },
+      }),
+    ).toMatchObject({
+      mode: 'character',
+      prompt: '黑衣剑士',
+      generatedLayerId: 'layer-source',
+    });
+  });
+
   it('normalizes legacy nanobanana model aliases in quick edit drafts', () => {
     expect(
       createQuickEditPanelDraft(
diff --git a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
index e08aad069..bae1bcb01 100644
--- a/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationDialogModel.ts
@@ -18,7 +18,6 @@ import {
   CHARACTER_ANIMATION_FRAME_DISPLAY_SIZE,
   CHARACTER_ANIMATION_FRAME_ORIGINAL_SIZE,
   createCanvasLayerReference,
-  DEFAULT_ICON_DESCRIPTIONS,
   DEFAULT_IMAGE_MODEL,
   DEFAULT_PUBLICATION_GAME_INFO,
   DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
@@ -45,6 +44,14 @@ import {
 import { getPublicationMaterialsWorkflow } from './ImageCanvasPublicationMaterialsModel';
 
 type CanvasSize = { width: number; height: number };
+type SourceGenerationDialogDraftContext = {
+  sourceLayer: CanvasLayer;
+  canvasSize: CanvasSize;
+  viewport: CanvasViewport;
+  sourceDialog?: CanvasGenerationDialogState | null;
+  mode: 'quick-edit' | 'redraw';
+  sourceAnimationLayer?: CanvasLayer | null;
+};
 const VIDEO_REFERENCE_LIMITS = {
   image: 9,
   video: 3,
@@ -94,7 +101,9 @@ export function formatIconDescriptionsText(descriptions: string[]): string {
 
 function isSeedanceVideoModel(model: string | undefined) {
   const resolvedModel = model ?? DEFAULT_VIDEO_MODEL;
-  return resolvedModel === 'seedance2.0' || resolvedModel === 'seedance2.0-fast';
+  return (
+    resolvedModel === 'seedance2.0' || resolvedModel === 'seedance2.0-fast'
+  );
 }
 
 function getReferenceMediaType(layer: CanvasLayer) {
@@ -156,6 +165,18 @@ function resolveImageDimensionDefaults(imageModel: string) {
   };
 }
 
+function getGenerationInputFieldValues(layer: CanvasLayer) {
+  const values = new Map<string, string>();
+  for (const field of layer.generationInputs?.fields ?? []) {
+    const title = field.title.trim().toLowerCase();
+    const value = field.value.trim();
+    if (title && value && !values.has(title)) {
+      values.set(title, value);
+    }
+  }
+  return values;
+}
+
 export function createGenerateDialogDraft({
   canvasSize,
   viewport,
@@ -282,6 +303,7 @@ export function createIconGenerationDialogDraft({
     status: 'idle',
     composerOpen: true,
     iconSpecReference: null,
+    generationReferences: [],
     iconDescriptions: [],
     imageModel: normalizedImageModel,
     aspectRatio: dimensionDefaults.aspectRatio,
@@ -420,7 +442,7 @@ export function createBackgroundMusicGenerationDialogDraft({
 
 function findGenerationInputFieldValue(
   layer: CanvasLayer,
-  titles: string[],
+  titles: readonly string[],
 ) {
   const normalizedTitles = new Set(titles.map((title) => title.toLowerCase()));
   return (
@@ -482,9 +504,7 @@ function resolveUserGenerationPromptSnapshot(sourceLayer: CanvasLayer) {
   return structuredLines.join('\n');
 }
 
-function resolveAudioRedrawPrompt(
-  sourceLayer: CanvasLayer,
-) {
+function resolveAudioRedrawPrompt(sourceLayer: CanvasLayer) {
   return resolveUserGenerationPromptSnapshot(sourceLayer);
 }
 
@@ -506,8 +526,9 @@ function resolveAudioRedrawMode(sourceLayer: CanvasLayer) {
 function resolveAudioRedrawSoundModel(
   sourceLayer: CanvasLayer,
 ): NonNullable<GenerateDialogState['soundModel']> {
-  const fieldValue = findGenerationInputFieldValue(sourceLayer, ['model'])
-    ?.trim();
+  const fieldValue = findGenerationInputFieldValue(sourceLayer, [
+    'model',
+  ])?.trim();
   // 中文注释：编辑器音效改造入口当前只暴露 Vidu audio1.0，历史快照里的其他模型统一回落到默认模型。
   return fieldValue === DEFAULT_SOUND_EFFECT_MODEL ? 'audio1.0' : 'audio1.0';
 }
@@ -559,6 +580,521 @@ export function createAudioRedrawGenerationDialogDraft(
   };
 }
 
+export function createVideoRedrawGenerationDialogDraft(
+  sourceLayer: CanvasLayer,
+): Omit<CanvasGenerationDialogState, 'id'> | null {
+  if (sourceLayer.mediaType !== 'video') {
+    return null;
+  }
+  const placeholderSize = resolveEditorVideoGenerationPixelSize({
+    aspectRatio: DEFAULT_VIDEO_ASPECT_RATIO,
+    resolution: '480p',
+  });
+  return {
+    mode: 'video',
+    sourceLayerId: sourceLayer.id,
+    prompt: resolveUserGenerationPromptSnapshot(sourceLayer),
+    status: 'idle',
+    composerOpen: true,
+    generationReferences: [createCanvasLayerReference(sourceLayer)],
+    videoModel: DEFAULT_VIDEO_MODEL,
+    videoAspectRatio: DEFAULT_VIDEO_ASPECT_RATIO,
+    videoResolution: '480p',
+    videoDurationSeconds: DEFAULT_VIDEO_DURATION_SECONDS,
+    videoMode: 'std',
+    videoSound: DEFAULT_VIDEO_SOUND,
+    videoWebSearchEnabled: DEFAULT_VIDEO_WEB_SEARCH_ENABLED,
+    placeholder: {
+      x: sourceLayer.x + sourceLayer.width + 32,
+      y: sourceLayer.y,
+      width: placeholderSize.width,
+      height: placeholderSize.height,
+      originalWidth: placeholderSize.width,
+      originalHeight: placeholderSize.height,
+    },
+  };
+}
+
+function resolveGeneratedSourceDialogMode({
+  sourceLayer,
+  sourceDialog,
+}: {
+  sourceLayer: CanvasLayer;
+  sourceDialog?: CanvasGenerationDialogState | null;
+}): CanvasGenerationDialogState['mode'] | null {
+  if (sourceDialog) {
+    return sourceDialog.mode;
+  }
+  if (sourceLayer.assetKind === 'character') {
+    return 'character';
+  }
+  if (sourceLayer.assetKind === 'ui-design') {
+    return 'ui-design';
+  }
+  if (sourceLayer.assetKind === 'publication-material') {
+    return 'publication';
+  }
+  if (
+    sourceLayer.assetKind === 'icon' ||
+    sourceLayer.assetKind === 'icon-spritesheet'
+  ) {
+    return 'icon';
+  }
+  if (
+    sourceLayer.assetKind === 'spec' ||
+    sourceLayer.assetKind === 'icon-spec'
+  ) {
+    return 'spec';
+  }
+  if (sourceLayer.assetKind === 'character-animation') {
+    return 'character-animation';
+  }
+  if (sourceLayer.sourceType === 'generated') {
+    return 'generate';
+  }
+  return null;
+}
+
+function buildLayerGenerationPlaceholder(sourceLayer: CanvasLayer) {
+  return {
+    x: sourceLayer.x,
+    y: sourceLayer.y,
+    width: sourceLayer.width,
+    height: sourceLayer.height,
+    originalWidth: sourceLayer.originalWidth,
+    originalHeight: sourceLayer.originalHeight,
+  };
+}
+
+export function createLayerGenerationDialogDraft({
+  sourceLayer,
+  canvasSize,
+  viewport,
+  sourceDialog,
+  sourceAnimationLayer,
+}: Omit<SourceGenerationDialogDraftContext, 'mode'>): Omit<
+  CanvasGenerationDialogState,
+  'id'
+> | null {
+  const draft = createSameSourceGenerationDialogDraft({
+    sourceLayer,
+    canvasSize,
+    viewport,
+    sourceDialog,
+    sourceAnimationLayer,
+    mode: 'redraw',
+  });
+  if (!draft) {
+    return null;
+  }
+  return {
+    ...draft,
+    prompt: draft.prompt || sourceLayer.prompt?.trim() || '',
+    imageModel: sourceDialog?.imageModel ?? sourceLayer.model ?? draft.imageModel,
+    status: 'idle',
+    composerOpen: true,
+    generatedLayerId: sourceLayer.id,
+    placeholder: buildLayerGenerationPlaceholder(sourceLayer),
+  };
+}
+
+function getSourceDraftPrompt({
+  sourceLayer,
+  mode,
+}: {
+  sourceLayer: CanvasLayer;
+  mode: SourceGenerationDialogDraftContext['mode'];
+}) {
+  if (mode === 'quick-edit') {
+    return '';
+  }
+  return resolveUserGenerationPromptSnapshot(sourceLayer);
+}
+
+function buildSourceSidePlaceholder(sourceLayer: CanvasLayer) {
+  return {
+    x: sourceLayer.x + sourceLayer.width + 32,
+    y: sourceLayer.y,
+  };
+}
+
+function placeDraftBesideSourceLayer<
+  T extends Omit<CanvasGenerationDialogState, 'id'>,
+>(draft: T, sourceLayer: CanvasLayer): T {
+  if (!draft.placeholder) {
+    return draft;
+  }
+  return {
+    ...draft,
+    placeholder: {
+      ...draft.placeholder,
+      ...buildSourceSidePlaceholder(sourceLayer),
+    },
+  };
+}
+
+function restoreSharedImageOptions(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  return {
+    ...draft,
+    imageModel: sourceDialog?.imageModel ?? draft.imageModel,
+    aspectRatio:
+      sourceDialog?.aspectRatio ??
+      draft.aspectRatio ??
+      inferEditorImageAspectRatio(
+        sourceLayer.originalWidth,
+        sourceLayer.originalHeight,
+      ),
+    imageSize:
+      sourceDialog?.imageSize ??
+      draft.imageSize ??
+      inferEditorImageSizeLabel(
+        sourceLayer.originalWidth,
+        sourceLayer.originalHeight,
+      ),
+  };
+}
+
+function resolveSpecTypeFromSourceLayer(
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): SpecGenerationType {
+  if (sourceDialog?.mode === 'spec' && sourceDialog.specType) {
+    return sourceDialog.specType;
+  }
+  if (
+    sourceLayer.assetKind === 'icon-spec' ||
+    isIconSpecReferenceLayer(sourceLayer)
+  ) {
+    return 'icon';
+  }
+  const fields = getGenerationInputFieldValues(sourceLayer);
+  if (fields.has('自定义规范提示词')) {
+    return 'custom';
+  }
+  if (fields.has('头身比') || fields.has('角色视角')) {
+    return 'character';
+  }
+  return 'ui';
+}
+
+function restoreSpecValuesFromLayer(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  specType: SpecGenerationType,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  const fields = getGenerationInputFieldValues(sourceLayer);
+  const defaultValues = DEFAULT_SPEC_FORM_VALUES[specType];
+  return {
+    ...draft,
+    specValues: {
+      ...defaultValues,
+      ...sourceDialog?.specValues,
+      playSetting:
+        fields.get('玩法设定') ??
+        sourceDialog?.specValues?.playSetting ??
+        defaultValues.playSetting,
+      artStyle:
+        fields.get('美术风格') ??
+        sourceDialog?.specValues?.artStyle ??
+        defaultValues.artStyle,
+      bodyRatio:
+        fields.get('头身比') ??
+        sourceDialog?.specValues?.bodyRatio ??
+        defaultValues.bodyRatio,
+      characterView:
+        fields.get('角色视角') ??
+        sourceDialog?.specValues?.characterView ??
+        defaultValues.characterView,
+      customPrompt:
+        fields.get('自定义规范提示词') ??
+        sourceDialog?.specValues?.customPrompt ??
+        defaultValues.customPrompt,
+    },
+  };
+}
+
+function resolvePublicationWorkflowIdFromLayer(
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): PublicationMaterialsWorkflowId {
+  if (
+    sourceDialog?.mode === 'publication' &&
+    sourceDialog.publicationWorkflowId
+  ) {
+    return sourceDialog.publicationWorkflowId;
+  }
+  const ratio = inferEditorImageAspectRatio(
+    sourceLayer.originalWidth,
+    sourceLayer.originalHeight,
+  );
+  if (ratio === '9:16') {
+    return 'publication-detail-gallery';
+  }
+  if (ratio === '16:9') {
+    return 'publication-promo-poster';
+  }
+  return 'publication-cover-image';
+}
+
+function restorePublicationGameInfoFromLayer(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  const fields = getGenerationInputFieldValues(sourceLayer);
+  return {
+    ...draft,
+    publicationGameInfo: {
+      ...DEFAULT_PUBLICATION_GAME_INFO,
+      ...sourceDialog?.publicationGameInfo,
+      gameName:
+        fields.get('游戏名') ??
+        sourceDialog?.publicationGameInfo?.gameName ??
+        DEFAULT_PUBLICATION_GAME_INFO.gameName,
+      gameCategories:
+        fields.get('游戏分类') ??
+        sourceDialog?.publicationGameInfo?.gameCategories ??
+        DEFAULT_PUBLICATION_GAME_INFO.gameCategories,
+      gameDescription:
+        fields.get('一句话描述游戏') ??
+        sourceDialog?.publicationGameInfo?.gameDescription ??
+        DEFAULT_PUBLICATION_GAME_INFO.gameDescription,
+    },
+    publicationReferences: sourceDialog?.publicationReferences ?? [],
+  };
+}
+
+function restoreIconDescriptionsFromLayer(
+  draft: Omit<CanvasGenerationDialogState, 'id'>,
+  sourceLayer: CanvasLayer,
+  sourceDialog?: CanvasGenerationDialogState | null,
+): Omit<CanvasGenerationDialogState, 'id'> {
+  const descriptions = parseIconDescriptionsText(
+    findGenerationInputFieldValue(sourceLayer, ['素材描述']) ??
+      sourceDialog?.prompt ??
+      '',
+  );
+  return {
+    ...draft,
+    prompt: descriptions.join('\n'),
+    iconDescriptions: descriptions.length
+      ? descriptions
+      : (sourceDialog?.iconDescriptions ?? draft.iconDescriptions),
+    iconSpecReference:
+      sourceDialog?.iconSpecReference ?? draft.iconSpecReference,
+    generationReferences: sourceDialog?.generationReferences ?? [],
+  };
+}
+
+function createSameSourceCharacterAnimationDraft({
+  sourceLayer,
+  canvasSize,
+  viewport,
+  sourceAnimationLayer,
+  mode,
+}: SourceGenerationDialogDraftContext): Omit<
+  CanvasGenerationDialogState,
+  'id'
+> | null {
+  const animationSourceLayer = sourceAnimationLayer ?? sourceLayer;
+  const draft = createCharacterAnimationGenerationDialogDraft({
+    canvasSize,
+    viewport,
+    layer: animationSourceLayer,
+  });
+  if (!draft) {
+    return null;
+  }
+  return placeDraftBesideSourceLayer(
+    {
+      ...draft,
+      prompt: getSourceDraftPrompt({ sourceLayer, mode }),
+      sourceLayerId: animationSourceLayer.id,
+      composerOpen: true,
+    },
+    sourceLayer,
+  );
+}
+
+export function createSameSourceGenerationDialogDraft({
+  sourceLayer,
+  canvasSize,
+  viewport,
+  sourceDialog,
+  mode,
+  sourceAnimationLayer,
+}: SourceGenerationDialogDraftContext): Omit<
+  CanvasGenerationDialogState,
+  'id'
+> | null {
+  const sourceMode = resolveGeneratedSourceDialogMode({
+    sourceLayer,
+    sourceDialog,
+  });
+  const prompt = getSourceDraftPrompt({ sourceLayer, mode });
+
+  if (sourceMode === 'quick-edit') {
+    return null;
+  }
+
+  if (sourceMode === 'generate') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        {
+          ...createGenerateDialogDraft({ canvasSize, viewport }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          generationReferences:
+            sourceDialog?.mode === 'generate'
+              ? (sourceDialog.generationReferences ?? [])
+              : [],
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'character-animation') {
+    return createSameSourceCharacterAnimationDraft({
+      sourceLayer,
+      canvasSize,
+      viewport,
+      sourceDialog,
+      mode,
+      sourceAnimationLayer,
+    });
+  }
+
+  if (sourceMode === 'character') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        {
+          ...createCharacterGenerationDialogDraft({
+            canvasSize,
+            viewport,
+            imageModel:
+              sourceDialog?.imageModel ??
+              sourceLayer.model ??
+              DEFAULT_IMAGE_MODEL,
+          }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          characterSpecReference:
+            sourceDialog?.mode === 'character'
+              ? sourceDialog.characterSpecReference
+              : null,
+          characterReferences:
+            sourceDialog?.mode === 'character'
+              ? (sourceDialog.characterReferences ?? [])
+              : [],
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'ui-design') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        {
+          ...createUiDesignGenerationDialogDraft({
+            canvasSize,
+            viewport,
+            imageModel: sourceDialog?.imageModel ?? IMAGE_MODEL_GPT_IMAGE_2,
+          }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          uiDesignSpecReference:
+            sourceDialog?.mode === 'ui-design'
+              ? sourceDialog.uiDesignSpecReference
+              : null,
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'publication') {
+    const workflowId = resolvePublicationWorkflowIdFromLayer(
+      sourceLayer,
+      sourceDialog,
+    );
+    return placeDraftBesideSourceLayer(
+      restorePublicationGameInfoFromLayer(
+        {
+          ...createPublicationGenerationDialogDraft({
+            canvasSize,
+            viewport,
+            workflowId,
+          }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+        },
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'icon') {
+    return placeDraftBesideSourceLayer(
+      restoreSharedImageOptions(
+        restoreIconDescriptionsFromLayer(
+          {
+            ...createIconGenerationDialogDraft({
+              canvasSize,
+              viewport,
+              imageModel:
+                sourceDialog?.imageModel ??
+                sourceLayer.model ??
+                DEFAULT_IMAGE_MODEL,
+            }),
+            sourceLayerId: sourceLayer.id,
+          },
+          sourceLayer,
+          sourceDialog,
+        ),
+        sourceLayer,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  if (sourceMode === 'spec') {
+    const specType = resolveSpecTypeFromSourceLayer(sourceLayer, sourceDialog);
+    return placeDraftBesideSourceLayer(
+      restoreSpecValuesFromLayer(
+        {
+          ...createSpecDialogDraft({ canvasSize, viewport, specType }),
+          prompt,
+          sourceLayerId: sourceLayer.id,
+          specReference:
+            sourceDialog?.mode === 'spec' ? sourceDialog.specReference : null,
+        },
+        sourceLayer,
+        specType,
+        sourceDialog,
+      ),
+      sourceLayer,
+    );
+  }
+
+  return null;
+}
+
 export function createUiDesignGenerationDialogDraft({
   canvasSize,
   viewport,
@@ -598,26 +1134,61 @@ export function createUiDesignGenerationDialogDraft({
 
 export function createEditDialogDraft(
   sourceLayer: CanvasLayer,
+  options: {
+    imageModel?: string;
+    aspectRatio?: string;
+    imageSize?: string;
+  } = {},
 ): GenerateDialogState {
+  const imageModel = normalizeEditorImageModel(
+    options.imageModel ?? sourceLayer.model,
+  );
+  const aspectRatio =
+    options.aspectRatio ??
+    inferEditorImageAspectRatio(
+      sourceLayer.originalWidth,
+      sourceLayer.originalHeight,
+    );
+  const imageSize =
+    options.imageSize ??
+    inferEditorImageSizeLabel(
+      sourceLayer.originalWidth,
+      sourceLayer.originalHeight,
+    );
   return {
     mode: 'edit',
     prompt: resolveUserGenerationPromptSnapshot(sourceLayer),
     status: 'idle',
     composerOpen: true,
     sourceLayerId: sourceLayer.id,
+    imageModel,
+    aspectRatio,
+    imageSize,
   };
 }
 
 export function createQuickEditPanelDraft(
   sourceLayer: CanvasLayer,
+  options: {
+    imageModel?: string;
+    aspectRatio?: string;
+    imageSize?: string;
+  } = {},
 ): QuickEditPanelState {
-  const aspectRatio = inferEditorImageAspectRatio(
-    sourceLayer.originalWidth,
-    sourceLayer.originalHeight,
-  );
-  const imageSize = inferEditorImageSizeLabel(
-    sourceLayer.originalWidth,
-    sourceLayer.originalHeight,
+  const aspectRatio =
+    options.aspectRatio ??
+    inferEditorImageAspectRatio(
+      sourceLayer.originalWidth,
+      sourceLayer.originalHeight,
+    );
+  const imageSize =
+    options.imageSize ??
+    inferEditorImageSizeLabel(
+      sourceLayer.originalWidth,
+      sourceLayer.originalHeight,
+    );
+  const model = normalizeEditorImageModel(
+    options.imageModel ?? sourceLayer.model,
   );
   return {
     mode: 'quick-edit',
@@ -629,7 +1200,7 @@ export function createQuickEditPanelDraft(
     ),
     aspectRatio,
     imageSize,
-    model: normalizeEditorImageModel(sourceLayer.model),
+    model,
     quickEditReferences: [],
     status: 'idle',
   };
@@ -679,9 +1250,14 @@ export function createQuickEditGenerationDialogDraft({
 
 export function createRedrawPanelDraft(
   sourceLayer: CanvasLayer,
+  options: {
+    imageModel?: string;
+    aspectRatio?: string;
+    imageSize?: string;
+  } = {},
 ): QuickEditPanelState {
   return {
-    ...createQuickEditPanelDraft(sourceLayer),
+    ...createQuickEditPanelDraft(sourceLayer, options),
     mode: 'redraw',
     prompt: resolveUserGenerationPromptSnapshot(sourceLayer),
   };
@@ -755,7 +1331,8 @@ export function appendCharacterReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
 ): GenerateDialogState | null {
-  return dialog?.mode === 'character' && getReferenceMediaType(layer) === 'image'
+  return dialog?.mode === 'character' &&
+    getReferenceMediaType(layer) === 'image'
     ? {
         ...resetFailedGenerationDialog(dialog),
         characterReferences: [
@@ -784,7 +1361,12 @@ export function appendGenerationReference(
   if (dialog?.mode === 'video' && !isSeedanceVideoModel(dialog.videoModel)) {
     return dialog;
   }
-  if (dialog?.mode === 'generate') {
+  if (
+    dialog?.mode === 'generate' ||
+    dialog?.mode === 'quick-edit' ||
+    dialog?.mode === 'icon' ||
+    dialog?.mode === 'ui-design'
+  ) {
     if (getReferenceMediaType(layer) !== 'image') {
       return dialog;
     }
@@ -813,7 +1395,8 @@ export function appendPublicationReference(
   dialog: GenerateDialogState | null,
   layer: CanvasLayer,
 ): GenerateDialogState | null {
-  return dialog?.mode === 'publication' && getReferenceMediaType(layer) === 'image'
+  return dialog?.mode === 'publication' &&
+    getReferenceMediaType(layer) === 'image'
     ? {
         ...resetFailedGenerationDialog(dialog),
         publicationReferences: [
@@ -893,7 +1476,11 @@ export function appendQuickEditReference(
   panel: QuickEditPanelState | null,
   layer: CanvasLayer,
 ): QuickEditPanelState | null {
-  if (!panel || panel.mode === 'redraw' || getReferenceMediaType(layer) !== 'image') {
+  if (
+    !panel ||
+    panel.mode === 'redraw' ||
+    getReferenceMediaType(layer) !== 'image'
+  ) {
     return panel;
   }
   return {
diff --git a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
index cfddaad89..4d2613b4f 100644
--- a/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
+++ b/src/components/image-editor/ImageCanvasGenerationImageOptionsView.tsx
@@ -28,11 +28,15 @@ type ImageCanvasGenerationImageOptionsViewProps = {
   dialog: GenerateDialogState;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   includeDimensions: boolean;
+  includeModel?: boolean;
   onRememberImageModel: (model: string) => void;
   optionLabelPrefix?: string;
+  dimensionRatioAriaLabelPrefix?: string;
+  dimensionSizeAriaLabelPrefix?: string;
   cost?: number;
   submitLabel?: string;
   submitAriaLabel?: string;
+  submitButtonClassName?: string;
   lockedModel?: string;
   renderEditorPortal?: (node: ReactNode) => ReactNode;
   buildPortalMenuStyle?: (
@@ -87,11 +91,13 @@ function OptionChoice({
   children,
   selected,
   className,
+  ariaLabel,
   onClick,
 }: {
   children: ReactNode;
   selected: boolean;
   className?: string;
+  ariaLabel?: string;
   onClick: () => void;
 }) {
   return (
@@ -100,6 +106,7 @@ function OptionChoice({
       className={['image-canvas-editor__option-popover-choice', className]
         .filter(Boolean)
         .join(' ')}
+      aria-label={ariaLabel}
       aria-pressed={selected}
       onClick={onClick}
     >
@@ -112,11 +119,15 @@ export function ImageCanvasGenerationImageOptionsView({
   dialog,
   setGenerateDialog,
   includeDimensions,
+  includeModel = true,
   onRememberImageModel,
   optionLabelPrefix,
+  dimensionRatioAriaLabelPrefix,
+  dimensionSizeAriaLabelPrefix,
   cost,
   submitLabel = '生成',
   submitAriaLabel = '生成',
+  submitButtonClassName = 'image-canvas-editor__generation-submit',
   lockedModel,
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
@@ -138,10 +149,15 @@ export function ImageCanvasGenerationImageOptionsView({
     imageSize: selection.imageSize,
   });
   const isGenerating = dialog.status === 'generating';
-  const isModelLocked = Boolean(normalizedLockedModel);
+  const isModelLocked = Boolean(normalizedLockedModel) && includeModel;
   const labelPrefix = optionLabelPrefix ?? '生成图片';
+  const ratioAriaLabelPrefix = dimensionRatioAriaLabelPrefix?.trim() ?? '';
+  const sizeAriaLabelPrefix = dimensionSizeAriaLabelPrefix?.trim() ?? '';
   const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
 
+  const formatDimensionOptionLabel = (prefix: string, value: string) =>
+    prefix ? `${prefix} ${value}` : value;
+
   useImageCanvasFloatingOptionDismiss({
     isOpen: openPanel !== null,
     boundaryRefs: [dimensionsButtonRef, modelButtonRef],
@@ -236,6 +252,10 @@ export function ImageCanvasGenerationImageOptionsView({
                             key={aspectRatio}
                             selected={selection.aspectRatio === aspectRatio}
                             className="image-canvas-editor__option-popover-choice--ratio"
+                            ariaLabel={formatDimensionOptionLabel(
+                              ratioAriaLabelPrefix,
+                              aspectRatio,
+                            )}
                             onClick={() => updateDialog({ aspectRatio })}
                           >
                             <span
@@ -257,6 +277,10 @@ export function ImageCanvasGenerationImageOptionsView({
                           <OptionChoice
                             key={imageSize}
                             selected={selection.imageSize === imageSize}
+                            ariaLabel={formatDimensionOptionLabel(
+                              sizeAriaLabelPrefix,
+                              imageSize,
+                            )}
                             onClick={() => updateDialog({ imageSize })}
                           >
                             {imageSize}
@@ -270,87 +294,89 @@ export function ImageCanvasGenerationImageOptionsView({
             : null}
         </div>
       ) : null}
-      <div
-        className={[
-          'image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model',
-          isModelLocked
-            ? 'image-canvas-editor__readonly-generation-option'
-            : '',
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <PlatformInlineOptionButton
-          ref={modelButtonRef}
-          className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-          aria-label={`${labelPrefix}模型 ${selectedModelLabel}`}
-          aria-expanded={isModelLocked ? undefined : openPanel === 'model'}
-          disabled={isGenerating || isModelLocked}
-          trailingIcon={
-            isModelLocked ? undefined : <ChevronDown className="h-3 w-3" />
-          }
-          onClick={() => {
-            if (!isModelLocked) {
-              togglePanel('model');
-            }
-          }}
+      {includeModel ? (
+        <div
+          className={[
+            'image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model',
+            isModelLocked
+              ? 'image-canvas-editor__readonly-generation-option'
+              : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
         >
-          <span className="image-canvas-editor__model-trigger-label">
-            <span
-              className="image-canvas-editor__model-icon"
-              aria-hidden="true"
-            >
-              <Cpu />
-            </span>
-            <span>{selectedModelLabel}</span>
-          </span>
-        </PlatformInlineOptionButton>
-        {!isModelLocked && openPanel === 'model'
-          ? renderEditorPortal(
-              <PlatformFloatingMenu
-                className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
-                label={`${labelPrefix}模型选项`}
-                placement="top-start"
-                style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
-                onPointerDown={(event) => event.stopPropagation()}
+          <PlatformInlineOptionButton
+            ref={modelButtonRef}
+            className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
+            aria-label={`${labelPrefix}模型 ${selectedModelLabel}`}
+            aria-expanded={isModelLocked ? undefined : openPanel === 'model'}
+            disabled={isGenerating || isModelLocked}
+            trailingIcon={
+              isModelLocked ? undefined : <ChevronDown className="h-3 w-3" />
+            }
+            onClick={() => {
+              if (!isModelLocked) {
+                togglePanel('model');
+              }
+            }}
+          >
+            <span className="image-canvas-editor__model-trigger-label">
+              <span
+                className="image-canvas-editor__model-icon"
+                aria-hidden="true"
               >
-                <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
-                  {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
-                    const selected = selection.model === option.value;
-                    return (
-                      <OptionChoice
-                        key={option.value}
-                        selected={selected}
-                        className="image-canvas-editor__option-popover-choice--model"
-                        onClick={() => updateImageModel(option.value)}
-                      >
-                        <span
-                          className="image-canvas-editor__model-icon"
-                          aria-hidden="true"
+                <Cpu />
+              </span>
+              <span>{selectedModelLabel}</span>
+            </span>
+          </PlatformInlineOptionButton>
+          {!isModelLocked && openPanel === 'model'
+            ? renderEditorPortal(
+                <PlatformFloatingMenu
+                  className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
+                  label={`${labelPrefix}模型选项`}
+                  placement="top-start"
+                  style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
+                  onPointerDown={(event) => event.stopPropagation()}
+                >
+                  <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
+                    {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
+                      const selected = selection.model === option.value;
+                      return (
+                        <OptionChoice
+                          key={option.value}
+                          selected={selected}
+                          className="image-canvas-editor__option-popover-choice--model"
+                          onClick={() => updateImageModel(option.value)}
                         >
-                          <Cpu />
-                        </span>
-                        <span>{option.label}</span>
-                        <Check
-                          className="image-canvas-editor__option-selected-check"
-                          data-visible={selected}
-                          aria-hidden="true"
-                        />
-                      </OptionChoice>
-                    );
-                  })}
-                </div>
-              </PlatformFloatingMenu>,
-            )
-          : null}
-      </div>
+                          <span
+                            className="image-canvas-editor__model-icon"
+                            aria-hidden="true"
+                          >
+                            <Cpu />
+                          </span>
+                          <span>{option.label}</span>
+                          <Check
+                            className="image-canvas-editor__option-selected-check"
+                            data-visible={selected}
+                            aria-hidden="true"
+                          />
+                        </OptionChoice>
+                      );
+                    })}
+                  </div>
+                </PlatformFloatingMenu>,
+              )
+            : null}
+        </div>
+      ) : null}
       {typeof cost === 'number' ? (
         <PlatformActionButton
           type="submit"
           tone="secondary"
           size="xs"
           shape="pill"
-          className="image-canvas-editor__generation-submit"
+          className={submitButtonClassName}
           disabled={isGenerating}
           aria-label={submitAriaLabel}
         >
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
index b931ddc58..611a0cb2d 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.test.ts
@@ -5,6 +5,7 @@ import type {
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
 import {
+  applyImageEditResultToSourceLayer,
   createAudioResultLayer,
   createCharacterAnimationResultLayer,
   createGeneratedResultLayer,
@@ -282,6 +283,46 @@ describe('ImageCanvasGenerationLayerModel', () => {
     });
   });
 
+  it('applies quick edits to the source layer in place', () => {
+    const sourceLayer = createSourceLayer({
+      width: 320,
+      height: 240,
+      originalWidth: 1024,
+      originalHeight: 768,
+    });
+    const layer = applyImageEditResultToSourceLayer({
+      generated: createGenerated({
+        imageSrc: 'data:image/png;base64,edited',
+        width: 1536,
+        height: 1024,
+        resource: {
+          resourceId: 'resource-edited',
+          objectKey: 'generated/edited.png',
+          assetObjectId: 'asset-object-edited',
+          width: 1536,
+          height: 1024,
+          sourceType: 'generated',
+          generationInputs: createGenerationInputs(),
+        },
+      }),
+      sourceLayer,
+      generationInputs: createGenerationInputs(),
+    });
+
+    expect(layer).toMatchObject({
+      id: 'layer-source',
+      title: '源图',
+      src: 'data:image/png;base64,edited',
+      width: 1536,
+      height: 1024,
+      originalWidth: 1536,
+      originalHeight: 1024,
+      resourceId: 'resource-edited',
+      sourceResourceId: 'resource-source',
+      objectKey: 'generated/edited.png',
+    });
+  });
+
   it('creates wrapped icon layers with icon metadata', () => {
     const layers = createIconSpritesheetResultLayers({
       generated: {
@@ -478,6 +519,21 @@ describe('ImageCanvasGenerationLayerModel', () => {
         provider: 'VectorEngine',
         taskId: 'video-task-1',
         priceMudPoints: 40,
+        durationSeconds: 5,
+        thumbnailSrc: '/generated-character-drafts/editor-videos/cover.png',
+        asset: {
+          assetId: 'asset-video-bff',
+          folderId: 'user-1:asset-folder:project',
+          label: '生成视频 15',
+          imageSrc: '/generated-character-drafts/editor-videos/video.mp4',
+          thumbnailSrc: '/generated-character-drafts/editor-videos/cover.png',
+          objectKey: 'generated-character-drafts/editor-videos/video.mp4',
+          assetObjectId: 'assetobj-video-1',
+          width: 1280,
+          height: 720,
+          sourceType: 'generated',
+          assetKind: 'video',
+        },
       },
       generatedIndex: 15,
       title: '生成视频 15',
@@ -493,7 +549,10 @@ describe('ImageCanvasGenerationLayerModel', () => {
       assetKind: 'video',
       objectKey: 'generated-character-drafts/editor-videos/video.mp4',
       assetObjectId: 'assetobj-video-1',
+      thumbnailSrc: '/generated-character-drafts/editor-videos/cover.png',
+      durationSeconds: 5,
     });
+    expect(layer.generatedAssetSnapshot?.assetId).toBe('asset-video-bff');
   });
 
   it('creates character animation result layers as playable image sequences', () => {
diff --git a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
index 65fa1aaef..225090dbf 100644
--- a/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationLayerModel.ts
@@ -238,6 +238,43 @@ export function createQuickEditResultLayer({
   );
 }
 
+export function applyImageEditResultToSourceLayer({
+  generated,
+  sourceLayer,
+  generationInputs,
+}: {
+  generated: EditorImageGenerationResult;
+  sourceLayer: CanvasLayer;
+  generationInputs: CanvasGenerationInputs;
+}): CanvasLayer {
+  const originalWidth =
+    generated.width || sourceLayer.originalWidth || sourceLayer.width;
+  const originalHeight =
+    generated.height || sourceLayer.originalHeight || sourceLayer.height;
+  const { width, height } = resolveLayerResolutionSize(
+    originalWidth,
+    originalHeight,
+    {
+      width: sourceLayer.width,
+      height: sourceLayer.height,
+    },
+  );
+  return applyGeneratedMetadata(
+    {
+      ...sourceLayer,
+      src: generated.imageSrc,
+      width,
+      height,
+      originalWidth,
+      originalHeight,
+      sourceType: generated.sourceType,
+      sourceResourceId: sourceLayer.resourceId,
+    },
+    generated,
+    generationInputs,
+  );
+}
+
 export function createIconSpritesheetResultLayers({
   generated,
   iconResults,
@@ -378,14 +415,16 @@ export function createVideoResultLayer({
     frame && frame.height > 0
       ? frame.y + frame.height / 2 - height / 2
       : undefined;
+  const resource = generated.resource;
+  const asset = generated.asset;
 
   return {
     id: `layer-video-${generatedIndex}`,
-    resourceId: `local-resource-video-${generatedIndex}`,
+    resourceId: resource?.resourceId ?? `local-resource-video-${generatedIndex}`,
     title,
     src: generated.videoSrc,
     mediaType: 'video',
-    assetKind,
+    assetKind: (resource?.assetKind as CanvasLayer['assetKind'] | undefined) ?? assetKind,
     x: frameX ?? worldCenter.x - width / 2,
     y: frameY ?? worldCenter.y - height / 2,
     width,
@@ -399,11 +438,15 @@ export function createVideoResultLayer({
     model: generated.model,
     provider: generated.provider,
     taskId: generated.taskId,
-    objectKey: generated.objectKey,
-    assetObjectId: generated.assetObjectId,
+    objectKey: resource?.objectKey ?? generated.objectKey,
+    assetObjectId: resource?.assetObjectId ?? generated.assetObjectId,
+    thumbnailSrc: generated.thumbnailSrc ?? generated.asset?.thumbnailSrc ?? undefined,
     sourceResourceId: sourceLayer?.resourceId,
+    sourceAssetId: asset?.assetId,
     groupId: sourceLayer?.groupId,
-    generationInputs,
+    generationInputs: resource?.generationInputs ?? generationInputs,
+    durationSeconds: generated.durationSeconds,
+    generatedAssetSnapshot: asset ?? generated.asset ?? undefined,
   };
 }
 
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.test.ts b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
index 5709d35c6..de846f902 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.test.ts
@@ -17,6 +17,7 @@ import {
   buildSoundEffectGenerationInputs,
   buildSpecGenerationInputs,
   buildSpecPrompt,
+  buildUiDesignAssetExtractionGenerationInputs,
   calculateCharacterAnimationPrice,
   calculateEditorBackgroundMusicPrice,
   calculateEditorIconSpritesheetPrice,
@@ -41,7 +42,6 @@ import {
   getGenerationFrameAriaLabel,
   getGenerationFrameLabel,
   IMAGE_MODEL_GPT_IMAGE_2,
-  normalizeQuickEditPromptSourceReference,
   resolveCharacterAnimationSourceImageSrc,
   resolveImageGenerationErrorMessage,
   VIDEO_MODEL_KLING_3,
@@ -74,17 +74,27 @@ describe('ImageCanvasGenerationModel', () => {
         (model) => !(model in EDITOR_MODEL_MUD_POINT_CONFIG),
       ),
     ).toEqual([]);
-    expect(EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[IMAGE_MODEL_GPT_IMAGE_2]['1K']).toBe(3);
-    expect(EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[IMAGE_MODEL_GPT_IMAGE_2]['2K']).toBe(5);
-    expect(EDITOR_MODEL_MUD_POINT_CONFIG[CHARACTER_ANIMATION_MODEL]).toBeTruthy();
+    expect(
+      EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[IMAGE_MODEL_GPT_IMAGE_2]['1K'],
+    ).toBe(3);
+    expect(
+      EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[IMAGE_MODEL_GPT_IMAGE_2]['2K'],
+    ).toBe(5);
+    expect(
+      EDITOR_MODEL_MUD_POINT_CONFIG[CHARACTER_ANIMATION_MODEL],
+    ).toBeTruthy();
     expect(
       EDITOR_SOUND_EFFECT_MODEL_MUD_POINT_CONFIG[DEFAULT_SOUND_EFFECT_MODEL],
     ).toBe(5);
     expect(
-      EDITOR_BACKGROUND_MUSIC_MODEL_MUD_POINT_CONFIG[BACKGROUND_MUSIC_MODEL_SUNO],
+      EDITOR_BACKGROUND_MUSIC_MODEL_MUD_POINT_CONFIG[
+        BACKGROUND_MUSIC_MODEL_SUNO
+      ],
     ).toBe(12);
     // 中文注释：Veo 已从前端入口移除，但客户端类型和后端兼容层仍保留，定价表也必须覆盖，避免旧布局回放或测试请求价格漂移。
-    expect(EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[VIDEO_MODEL_VEO_3_1]).toBeTruthy();
+    expect(
+      EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[VIDEO_MODEL_VEO_3_1],
+    ).toBeTruthy();
     expect(
       EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[VIDEO_MODEL_VEO_3_1_FAST],
     ).toBeTruthy();
@@ -94,8 +104,12 @@ describe('ImageCanvasGenerationModel', () => {
     expect(calculateEditorImageModelPrice(DEFAULT_IMAGE_MODEL)).toBe(
       EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[DEFAULT_IMAGE_MODEL]['1K'],
     );
-    expect(calculateEditorImageModelPrice(IMAGE_MODEL_GPT_IMAGE_2, '1K')).toBe(3);
-    expect(calculateEditorImageModelPrice(IMAGE_MODEL_GPT_IMAGE_2, '2K')).toBe(5);
+    expect(calculateEditorImageModelPrice(IMAGE_MODEL_GPT_IMAGE_2, '1K')).toBe(
+      3,
+    );
+    expect(calculateEditorImageModelPrice(IMAGE_MODEL_GPT_IMAGE_2, '2K')).toBe(
+      5,
+    );
     expect(
       calculateEditorImageGenerationPrice({
         kind: 'character',
@@ -121,21 +135,25 @@ describe('ImageCanvasGenerationModel', () => {
     expect(calculateEditorVideoPrice(VIDEO_MODEL_KLING_3, '480p', 4)).toBe(
       EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[VIDEO_MODEL_KLING_3]['480p'] * 4,
     );
-    expect(calculateEditorVideoPrice(VIDEO_MODEL_KLING_3, '720p', 5)).toBe(
-      150,
-    );
+    expect(calculateEditorVideoPrice(VIDEO_MODEL_KLING_3, '720p', 5)).toBe(150);
     expect(calculateEditorVideoPrice(VIDEO_MODEL_KLING_3_OMNI, '720p', 5)).toBe(
       200,
     );
-    expect(calculateCharacterAnimationPrice(CHARACTER_ANIMATION_MODEL, '720p', 6))
-      .toBe(
-        EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[CHARACTER_ANIMATION_MODEL]['720p'] * 6,
-      );
+    expect(
+      calculateCharacterAnimationPrice(CHARACTER_ANIMATION_MODEL, '720p', 6),
+    ).toBe(
+      EDITOR_VIDEO_MODEL_MUD_POINT_CONFIG[CHARACTER_ANIMATION_MODEL]['720p'] *
+        6,
+    );
     expect(calculateEditorSoundEffectPrice(DEFAULT_SOUND_EFFECT_MODEL)).toBe(
       EDITOR_SOUND_EFFECT_MODEL_MUD_POINT_CONFIG[DEFAULT_SOUND_EFFECT_MODEL],
     );
-    expect(calculateEditorBackgroundMusicPrice(BACKGROUND_MUSIC_MODEL_SUNO)).toBe(
-      EDITOR_BACKGROUND_MUSIC_MODEL_MUD_POINT_CONFIG[BACKGROUND_MUSIC_MODEL_SUNO],
+    expect(
+      calculateEditorBackgroundMusicPrice(BACKGROUND_MUSIC_MODEL_SUNO),
+    ).toBe(
+      EDITOR_BACKGROUND_MUSIC_MODEL_MUD_POINT_CONFIG[
+        BACKGROUND_MUSIC_MODEL_SUNO
+      ],
     );
   });
 
@@ -168,15 +186,21 @@ describe('ImageCanvasGenerationModel', () => {
       },
     });
 
-    expect(calculateEditorImageModelPrice(IMAGE_MODEL_GPT_IMAGE_2, '1K')).toBe(29);
-    expect(calculateEditorSpecGenerationPrice(IMAGE_MODEL_GPT_IMAGE_2)).toBe(58);
+    expect(calculateEditorImageModelPrice(IMAGE_MODEL_GPT_IMAGE_2, '1K')).toBe(
+      29,
+    );
+    expect(calculateEditorSpecGenerationPrice(IMAGE_MODEL_GPT_IMAGE_2)).toBe(
+      58,
+    );
     expect(calculateEditorVideoPrice(VIDEO_MODEL_SEEDANCE_2, '720p', 5)).toBe(
       130,
     );
-    expect(calculateEditorSoundEffectPrice(DEFAULT_SOUND_EFFECT_MODEL)).toBe(15);
-    expect(calculateEditorBackgroundMusicPrice(BACKGROUND_MUSIC_MODEL_SUNO)).toBe(
-      9,
+    expect(calculateEditorSoundEffectPrice(DEFAULT_SOUND_EFFECT_MODEL)).toBe(
+      15,
     );
+    expect(
+      calculateEditorBackgroundMusicPrice(BACKGROUND_MUSIC_MODEL_SUNO),
+    ).toBe(9);
   });
 
   it('builds user-facing generation input snapshots instead of backend prompts', () => {
@@ -251,9 +275,7 @@ describe('ImageCanvasGenerationModel', () => {
         resourceId: 'resource-icon-spec',
       }),
     ).toEqual({
-      fields: [
-        { title: '素材描述', value: '返回按钮\n设置按钮' },
-      ],
+      fields: [{ title: '素材描述', value: '返回按钮\n设置按钮' }],
       references: [
         {
           title: '图标规范',
@@ -278,14 +300,51 @@ describe('ImageCanvasGenerationModel', () => {
       ],
     });
     expect(
-      buildQuickEditGenerationInputs('快速编辑提示词', '让图2下雨', sourceLayer, [
+      buildUiDesignAssetExtractionGenerationInputs(sourceLayer, [
         {
-          id: 'ref-1',
-          label: '天空',
-          src: '/sky.png',
-          resourceId: 'resource-sky',
+          id: 'ref-ui',
+          label: 'UI风格参考',
+          src: '/ui-style.png',
+          resourceId: 'resource-ui-style',
         },
       ]),
+    ).toEqual({
+      fields: [
+        {
+          title: '提取提示词',
+          value:
+            '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+        },
+      ],
+      references: [
+        {
+          title: 'UI设计图',
+          label: '原图',
+          refType: 'project-resource',
+          refId: 'resource-source',
+        },
+        {
+          title: '参考图 1',
+          label: 'UI风格参考',
+          refType: 'project-resource',
+          refId: 'resource-ui-style',
+        },
+      ],
+    });
+    expect(
+      buildQuickEditGenerationInputs(
+        '快速编辑提示词',
+        '让图2下雨',
+        sourceLayer,
+        [
+          {
+            id: 'ref-1',
+            label: '天空',
+            src: '/sky.png',
+            resourceId: 'resource-sky',
+          },
+        ],
+      ),
     ).toEqual({
       fields: [{ title: '快速编辑提示词', value: '让图2下雨' }],
       references: [
@@ -299,24 +358,6 @@ describe('ImageCanvasGenerationModel', () => {
     });
   });
 
-  it('rewrites quick edit source image references to the final image index', () => {
-    expect(normalizeQuickEditPromptSourceReference('把图1改成夜晚', 3)).toBe(
-      '把图3改成夜晚',
-    );
-    expect(normalizeQuickEditPromptSourceReference('参考原图增加暖光', 2)).toBe(
-      '参考图2增加暖光',
-    );
-    expect(normalizeQuickEditPromptSourceReference('保留图1构图', 1)).toBe(
-      '保留图1构图',
-    );
-    expect(
-      normalizeQuickEditPromptSourceReference('保持当前图片构图', 1),
-    ).toBe('保持图1构图');
-    expect(
-      normalizeQuickEditPromptSourceReference('不要影响图10内容', 2),
-    ).toBe('不要影响图10内容');
-  });
-
   it('keeps generated prompts and quick edit options stable', () => {
     const prompt = buildSpecPrompt('ui', {
       playSetting: '消除玩法',
@@ -328,8 +369,9 @@ describe('ImageCanvasGenerationModel', () => {
 
     expect(prompt).toContain('生成一张完整游戏UI规范汇总设定展板');
     expect(prompt).toContain('玩法设定：消除玩法');
-    expect(buildSpecPrompt('custom', { ...blankSpecValues, customPrompt: '自定义' }))
-      .toBe('自定义');
+    expect(
+      buildSpecPrompt('custom', { ...blankSpecValues, customPrompt: '自定义' }),
+    ).toBe('自定义');
     expect(buildQuickEditModelOptions('nano-banana')).toEqual([
       { label: 'nanobanana2', value: DEFAULT_IMAGE_MODEL },
       { label: 'gpt-image-2', value: 'gpt-image-2' },
diff --git a/src/components/image-editor/ImageCanvasGenerationModel.ts b/src/components/image-editor/ImageCanvasGenerationModel.ts
index 501c3ec17..d5645553a 100644
--- a/src/components/image-editor/ImageCanvasGenerationModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationModel.ts
@@ -80,7 +80,9 @@ export const EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG = {
   },
 } as const;
 export const SPEC_GENERATION_COST =
-  EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[SPEC_GENERATION_MODEL][SPEC_GENERATION_IMAGE_SIZE];
+  EDITOR_IMAGE_MODEL_MUD_POINT_CONFIG[SPEC_GENERATION_MODEL][
+    SPEC_GENERATION_IMAGE_SIZE
+  ];
 export const ICON_DESCRIPTION_LIMIT = 100;
 export const DEFAULT_PUBLICATION_GAME_INFO: PublicationMaterialsGameInfo = {
   gameName: '',
@@ -96,7 +98,7 @@ export const DEFAULT_ICON_DESCRIPTIONS = [
   '冻结按钮',
 ];
 export const UI_DESIGN_ASSET_EXTRACTION_PROMPT =
-  '仅提取被红色框框选的素材并整理成spritesheet';
+  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。';
 export const QUICK_EDIT_SIZE_PRESETS = [
   '1024x1024',
   '1536x1024',
@@ -194,15 +196,18 @@ export function inferEditorImageAspectRatio(width: number, height: number) {
   const safeWidth = Number.isFinite(width) && width > 0 ? Math.round(width) : 1;
   const safeHeight =
     Number.isFinite(height) && height > 0 ? Math.round(height) : 1;
-  const commonRatios = EDITOR_IMAGE_DIMENSION_OPTIONS[
-    IMAGE_MODEL_NANOBANANA2
-  ].aspectRatios as readonly string[];
+  const commonRatios = EDITOR_IMAGE_DIMENSION_OPTIONS[IMAGE_MODEL_NANOBANANA2]
+    .aspectRatios as readonly string[];
   const sourceRatio = safeWidth / safeHeight;
   return commonRatios.reduce((bestRatio, ratio) => {
     const bestNumbers = resolveAspectRatioNumbers(bestRatio);
     const ratioNumbers = resolveAspectRatioNumbers(ratio);
-    const bestDiff = Math.abs(bestNumbers.width / bestNumbers.height - sourceRatio);
-    const ratioDiff = Math.abs(ratioNumbers.width / ratioNumbers.height - sourceRatio);
+    const bestDiff = Math.abs(
+      bestNumbers.width / bestNumbers.height - sourceRatio,
+    );
+    const ratioDiff = Math.abs(
+      ratioNumbers.width / ratioNumbers.height - sourceRatio,
+    );
     return ratioDiff < bestDiff ? ratio : bestRatio;
   }, commonRatios[0] ?? '1:1');
 }
@@ -245,9 +250,15 @@ export function resizeGenerationPlaceholderToImageSelection(
   };
 }
 
-function resolveEvenVideoWidth(height: number, aspectRatio: string | null | undefined) {
+function resolveEvenVideoWidth(
+  height: number,
+  aspectRatio: string | null | undefined,
+) {
   const ratio = resolveAspectRatioNumbers(aspectRatio ?? '16:9');
-  const rawWidth = Math.max(1, Math.round((height * ratio.width) / ratio.height));
+  const rawWidth = Math.max(
+    1,
+    Math.round((height * ratio.width) / ratio.height),
+  );
   return rawWidth % 2 === 0 ? rawWidth : rawWidth + 1;
 }
 
@@ -382,9 +393,10 @@ export const EDITOR_MODEL_MUD_POINT_CONFIG = {
   },
   [BACKGROUND_MUSIC_MODEL_SUNO]: {
     unit: 'perGeneration',
-    price: EDITOR_BACKGROUND_MUSIC_MODEL_MUD_POINT_CONFIG[
-      BACKGROUND_MUSIC_MODEL_SUNO
-    ],
+    price:
+      EDITOR_BACKGROUND_MUSIC_MODEL_MUD_POINT_CONFIG[
+        BACKGROUND_MUSIC_MODEL_SUNO
+      ],
   },
 } satisfies EditorGenerationPricingConfig['models'];
 let runtimeEditorGenerationPricingConfig: EditorGenerationPricingConfig = {
@@ -446,7 +458,11 @@ export const EDITOR_VIDEO_ASPECT_RATIO_OPTIONS = [
   '3:4',
   '21:9',
 ] as const;
-export const EDITOR_VIDEO_RESOLUTION_OPTIONS = ['480p', '720p', '1080p'] as const;
+export const EDITOR_VIDEO_RESOLUTION_OPTIONS = [
+  '480p',
+  '720p',
+  '1080p',
+] as const;
 export const DEFAULT_VIDEO_ASPECT_RATIO = '16:9';
 export const DEFAULT_VIDEO_DURATION_SECONDS = 4;
 export const DEFAULT_VIDEO_SOUND = 'on';
@@ -509,9 +525,7 @@ export function buildQuickEditSizeOptions(currentSize: string) {
   return Array.from(new Set([currentSize, ...QUICK_EDIT_SIZE_PRESETS]));
 }
 
-export function normalizeEditorImageModel(
-  model: string | null | undefined,
-) {
+export function normalizeEditorImageModel(model: string | null | undefined) {
   const normalizedModel = model?.trim();
   if (!normalizedModel) {
     return DEFAULT_IMAGE_MODEL;
@@ -527,8 +541,9 @@ export function getEditorImageModelDisplayName(
 ) {
   const normalizedModel = normalizeEditorImageModel(model);
   return (
-    EDITOR_IMAGE_MODEL_OPTIONS.find((option) => option.value === normalizedModel)
-      ?.label ?? normalizedModel
+    EDITOR_IMAGE_MODEL_OPTIONS.find(
+      (option) => option.value === normalizedModel,
+    )?.label ?? normalizedModel
   );
 }
 
@@ -537,7 +552,10 @@ export function buildQuickEditModelOptions(currentModel: string) {
   const options = [...QUICK_EDIT_MODEL_OPTIONS];
   return options.some((option) => option.value === normalizedCurrentModel)
     ? options
-    : [{ label: normalizedCurrentModel, value: normalizedCurrentModel }, ...options];
+    : [
+        { label: normalizedCurrentModel, value: normalizedCurrentModel },
+        ...options,
+      ];
 }
 
 export function buildCharacterSpecPrompt(values: SpecFormValues) {
@@ -734,9 +752,7 @@ function readModelTierPrice({
 
 function readModelFlatPrice(model: string, fallbackModel: string) {
   return (
-    getModelPrices(model)?.price ??
-    getModelPrices(fallbackModel)?.price ??
-    0
+    getModelPrices(model)?.price ?? getModelPrices(fallbackModel)?.price ?? 0
   );
 }
 
@@ -789,7 +805,10 @@ export function calculateEditorImageModelPrice(
 export function calculateEditorSpecGenerationPrice(
   model: string | null | undefined = SPEC_GENERATION_MODEL,
 ) {
-  return calculateEditorImageModelPrice(model ?? SPEC_GENERATION_MODEL, SPEC_GENERATION_IMAGE_SIZE);
+  return calculateEditorImageModelPrice(
+    model ?? SPEC_GENERATION_MODEL,
+    SPEC_GENERATION_IMAGE_SIZE,
+  );
 }
 
 export function calculateEditorImageGenerationPrice({
@@ -870,9 +889,10 @@ export function resolveCharacterAnimationSourceImageSrc(layer: CanvasLayer) {
 export function createCanvasLayerReference(
   layer: CanvasLayer,
 ): CharacterReferenceImage {
-  const mediaType = layer.mediaType === 'video' || layer.mediaType === 'audio'
-    ? layer.mediaType
-    : undefined;
+  const mediaType =
+    layer.mediaType === 'video' || layer.mediaType === 'audio'
+      ? layer.mediaType
+      : undefined;
   return {
     id: `canvas-${layer.id}`,
     label: layer.title,
@@ -938,21 +958,10 @@ export function appendLimitedQuickEditReferences(
   const imageReferences = nextReferences.filter(
     (reference) => (reference.mediaType ?? 'image') === 'image',
   );
-  return [
-    ...(references ?? []),
-    ...imageReferences,
-  ].slice(0, QUICK_EDIT_REFERENCE_LIMIT);
-}
-
-export function normalizeQuickEditPromptSourceReference(
-  prompt: string,
-  sourceReferenceIndex: number,
-) {
-  const normalizedIndex = Math.max(1, sourceReferenceIndex);
-  const sourceReferenceLabel = `图${normalizedIndex}`;
-  return prompt
-    .replace(/原图|当前图片|当前图/gu, sourceReferenceLabel)
-    .replace(/图\s*1(?!\d)/gu, sourceReferenceLabel);
+  return [...(references ?? []), ...imageReferences].slice(
+    0,
+    QUICK_EDIT_REFERENCE_LIMIT,
+  );
 }
 
 export function createGenerationInputField(
@@ -1040,7 +1049,10 @@ export function buildSpecGenerationInputs(
     : [];
   if (specType === 'custom') {
     return {
-      fields: createGenerationInputField('自定义规范提示词', values.customPrompt),
+      fields: createGenerationInputField(
+        '自定义规范提示词',
+        values.customPrompt,
+      ),
       references,
     };
   }
@@ -1082,12 +1094,18 @@ export function buildCharacterGenerationInputs(
 export function buildUiDesignGenerationInputs(
   prompt: string,
   specReference: CharacterReferenceImage | null | undefined,
+  references?: CharacterReferenceImage[],
 ): CanvasGenerationInputs {
   return {
     fields: createGenerationInputField('用户输入', prompt),
-    references: specReference
-      ? createGenerationInputReference('图标规范', specReference)
-      : [],
+    references: [
+      ...(specReference
+        ? createGenerationInputReference('图标规范', specReference)
+        : []),
+      ...(references ?? []).flatMap((reference, index) =>
+        createGenerationInputReference(`参考图 ${index + 1}`, reference),
+      ),
+    ],
   };
 }
 
@@ -1107,7 +1125,10 @@ export function buildPublicationMaterialsPrompt(
   const normalizedGameInfo = normalizePublicationGameInfo(gameInfo);
   return [
     ...createGenerationInputField('游戏名', normalizedGameInfo.gameName),
-    ...createGenerationInputField('游戏分类', normalizedGameInfo.gameCategories),
+    ...createGenerationInputField(
+      '游戏分类',
+      normalizedGameInfo.gameCategories,
+    ),
     ...createGenerationInputField(
       '一句话描述游戏',
       normalizedGameInfo.gameDescription,
@@ -1127,7 +1148,9 @@ export function buildPublicationMaterialsGenerationPrompt({
   const inputPrompt = buildPublicationMaterialsPrompt(gameInfo);
   return [
     `【宣发素材类型】${workflow.promptLabel ?? workflow.label}`,
-    inputPrompt ? `【游戏输入】\n${inputPrompt}` : '【游戏输入】\n请根据参考图生成宣发素材。',
+    inputPrompt
+      ? `【游戏输入】\n${inputPrompt}`
+      : '【游戏输入】\n请根据参考图生成宣发素材。',
     `【生图约束】\n${workflow.promptConstraints.join('\n')}`,
     `【参考图约束】\n${workflow.referenceConstraints.join('\n')}`,
     `【输出检查】\n${workflow.postProcessConstraints.join('\n')}`,
@@ -1142,7 +1165,10 @@ export function buildPublicationMaterialsGenerationInputs(
   return {
     fields: [
       ...createGenerationInputField('游戏名', normalizedGameInfo.gameName),
-      ...createGenerationInputField('游戏分类', normalizedGameInfo.gameCategories),
+      ...createGenerationInputField(
+        '游戏分类',
+        normalizedGameInfo.gameCategories,
+      ),
       ...createGenerationInputField(
         '一句话描述游戏',
         normalizedGameInfo.gameDescription,
@@ -1157,6 +1183,7 @@ export function buildPublicationMaterialsGenerationInputs(
 export function buildIconGenerationInputs(
   iconDescriptions: string[],
   specReference: CharacterReferenceImage,
+  references?: CharacterReferenceImage[],
 ): CanvasGenerationInputs {
   return {
     fields: [
@@ -1165,19 +1192,30 @@ export function buildIconGenerationInputs(
         value: iconDescriptions.join('\n'),
       },
     ],
-    references: createGenerationInputReference('图标规范', specReference),
+    references: [
+      ...createGenerationInputReference('图标规范', specReference),
+      ...(references ?? []).flatMap((reference, index) =>
+        createGenerationInputReference(`参考图 ${index + 1}`, reference),
+      ),
+    ],
   };
 }
 
 export function buildUiDesignAssetExtractionGenerationInputs(
   sourceLayer: CanvasLayer,
+  references?: CharacterReferenceImage[],
 ): CanvasGenerationInputs {
   return {
     fields: createGenerationInputField(
       '提取提示词',
       UI_DESIGN_ASSET_EXTRACTION_PROMPT,
     ),
-    references: createLayerGenerationInputReference('UI设计图', sourceLayer),
+    references: [
+      ...createLayerGenerationInputReference('UI设计图', sourceLayer),
+      ...(references ?? []).flatMap((reference, index) =>
+        createGenerationInputReference(`参考图 ${index + 1}`, reference),
+      ),
+    ],
   };
 }
 
@@ -1205,7 +1243,6 @@ export function buildQuickEditGenerationInputs(
   return {
     fields: createGenerationInputField(title, prompt),
     references: [
-      // 中文注释：原图作为隐式最后参考图参与生成，但信息面板只展示用户额外选择的参考图。
       ...limitedReferences.flatMap((reference, index) =>
         createGenerationInputReference(`参考图 ${index + 1}`, reference),
       ),
@@ -1279,9 +1316,11 @@ export function getGenerationFrameLabel(dialog: CanvasGenerationDialogState) {
     return 'Icon Generator';
   }
   if (dialog.mode === 'publication') {
-    return `${getPublicationMaterialsWorkflow(
-      dialog.publicationWorkflowId ?? 'publication-cover-image',
-    ).englishName} Generator`;
+    return `${
+      getPublicationMaterialsWorkflow(
+        dialog.publicationWorkflowId ?? 'publication-cover-image',
+      ).englishName
+    } Generator`;
   }
   if (dialog.mode === 'ui-design') {
     return 'UI Design Generator';
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
index 3ba2a483b..69fa013ef 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.test.ts
@@ -118,7 +118,7 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
     });
   });
 
-  it('builds quick-edit canvas generator plans with the source layer as the final reference', () => {
+  it('builds quick-edit canvas generator plans as direct source edits', () => {
     const sourceLayer = createLayer({
       objectKey: 'generated-character-drafts/editor/source.png',
       assetKind: 'character',
@@ -147,25 +147,17 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
 
     expect(plan).toMatchObject({
       kind: 'quick-edit',
-      normalizedPrompt: '把图2改成雨天',
+      normalizedPrompt: '把当前图改成雨天',
       sourceLayer,
-      input: {
-        prompt: '把图2改成雨天',
+      editInput: {
         size: '1024x768',
-        kind: 'character',
         model: IMAGE_MODEL_GPT_IMAGE_2,
-        aspectRatio: '4:3',
-        imageSize: '1K',
-        referenceImageSrcs: [
-          'data:image/png;base64,style',
-          'generated-character-drafts/editor/source.png',
-        ],
       },
       result: {
         title: '源图 快速编辑',
         assetKind: 'character',
         generationInputs: {
-          fields: [{ title: '快速编辑提示词', value: '把图2改成雨天' }],
+          fields: [{ title: '快速编辑提示词', value: '把当前图改成雨天' }],
           references: [],
         },
       },
@@ -351,6 +343,14 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
           src: 'data:image/png;base64,ui-spec',
           resourceId: 'resource-ui-spec',
         },
+        generationReferences: [
+          {
+            id: 'ui-ref',
+            label: '界面风格参考',
+            src: 'data:image/png;base64,ui-ref',
+            resourceId: 'resource-ui-ref',
+          },
+        ],
       },
       layers: [],
       nextGeneratedIndex: 6,
@@ -364,11 +364,31 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         model: IMAGE_MODEL_GPT_IMAGE_2,
         aspectRatio: '16:9',
         imageSize: '1K',
-        referenceImageSrcs: ['data:image/png;base64,ui-spec'],
+        referenceImageSrcs: [
+          'data:image/png;base64,ui-spec',
+          'data:image/png;base64,ui-ref',
+        ],
       },
       result: {
         assetKind: 'ui-design',
         title: 'UI设计图 6',
+        generationInputs: {
+          fields: [{ title: '用户输入', value: '设计移动端商城首页' }],
+          references: [
+            {
+              title: '图标规范',
+              label: 'UI图标规范',
+              refType: 'project-resource',
+              refId: 'resource-ui-spec',
+            },
+            {
+              title: '参考图 1',
+              label: '界面风格参考',
+              refType: 'project-resource',
+              refId: 'resource-ui-ref',
+            },
+          ],
+        },
       },
       rememberImageModel: IMAGE_MODEL_GPT_IMAGE_2,
     });
@@ -619,6 +639,14 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
         src: 'data:image/png;base64,spec',
         resourceId: 'resource-icon-spec',
       },
+      generationReferences: [
+        {
+          id: 'icon-ref',
+          label: '按钮风格参考',
+          src: 'data:image/png;base64,ref',
+          resourceId: 'resource-icon-ref',
+        },
+      ],
       iconDescriptions: ['旧返回', '旧设置'],
     });
 
@@ -627,6 +655,7 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
       iconDescriptions: ['返回按钮', '设置按钮'],
       input: {
         referenceImageSrc: 'data:image/png;base64,spec',
+        referenceImageSrcs: ['data:image/png;base64,ref'],
         iconDescriptions: ['返回按钮', '设置按钮'],
         model: 'gpt-image-2',
         aspectRatio: '3:2',
@@ -641,6 +670,12 @@ describe('ImageCanvasGenerationSubmissionModel', () => {
             refType: 'project-resource',
             refId: 'resource-icon-spec',
           },
+          {
+            title: '参考图 1',
+            label: '按钮风格参考',
+            refType: 'project-resource',
+            refId: 'resource-icon-ref',
+          },
         ],
       },
       rememberImageModel: 'gpt-image-2',
diff --git a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
index b9dcc7df0..bceef44e1 100644
--- a/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
+++ b/src/components/image-editor/ImageCanvasGenerationSubmissionModel.ts
@@ -2,6 +2,7 @@ import type {
   EditorBackgroundMusicGenerationInput,
   EditorCharacterAnimationGenerationInput,
   EditorIconSpritesheetGenerationInput,
+  EditorImageEditInput,
   EditorImageGenerationInput,
   EditorSoundEffectGenerationInput,
   EditorVideoGenerationInput,
@@ -42,7 +43,6 @@ import {
   inferEditorImageAspectRatio,
   inferEditorImageSizeLabel,
   normalizeEditorImageModel,
-  normalizeQuickEditPromptSourceReference,
   resolveCharacterAnimationSourceImageSrc,
   resolveEditorImageGenerationPixelSize,
   SEEDANCE_VIDEO_REFERENCE_LIMITS,
@@ -72,7 +72,7 @@ function normalizeGptImageSize(imageSize: string | null | undefined) {
   return imageSize?.trim().toUpperCase() === '2K' ? '2K' : '1K';
 }
 
-function resolveImageReferenceSubmissionSource(reference: {
+export function resolveImageReferenceSubmissionSource(reference: {
   src: string;
   objectKey?: string | null;
 }) {
@@ -166,7 +166,7 @@ export type ImageGenerationSubmissionPlan =
       kind: 'quick-edit';
       normalizedPrompt: string;
       sourceLayer: CanvasLayer;
-      input: EditorImageGenerationInput;
+      editInput: Pick<EditorImageEditInput, 'size' | 'model'>;
       result: {
         title: string;
         assetKind?: CanvasLayer['assetKind'];
@@ -257,12 +257,8 @@ export function buildImageGenerationSubmissionPlan({
       throw new Error('未找到要改造的图片');
     }
     const quickEditReferences = dialog.generationReferences ?? [];
-    const sourceReferenceIndex = quickEditReferences.length + 1;
     const basePrompt = dialog.prompt.trim() || '快速编辑图片';
-    const normalizedQuickEditPrompt = normalizeQuickEditPromptSourceReference(
-      basePrompt,
-      sourceReferenceIndex,
-    );
+    const normalizedQuickEditPrompt = basePrompt;
     const imageModel = normalizeEditorImageModel(dialog.imageModel);
     const aspectRatio =
       dialog.aspectRatio ??
@@ -285,19 +281,9 @@ export function buildImageGenerationSubmissionPlan({
       kind: 'quick-edit',
       normalizedPrompt: normalizedQuickEditPrompt,
       sourceLayer,
-      input: {
-        prompt: normalizedQuickEditPrompt,
+      editInput: {
         size: `${outputSize.width}x${outputSize.height}`,
-        kind: sourceLayer.assetKind === 'character' ? 'character' : 'quick-edit',
         model: imageModel,
-        aspectRatio,
-        imageSize,
-        referenceImageSrcs: [
-          ...quickEditReferences.map((reference) =>
-            resolveImageReferenceSubmissionSource(reference),
-          ),
-          sourceLayer.objectKey?.trim() || sourceLayer.src,
-        ],
       },
       result: {
         title: `${sourceLayer.title} 快速编辑`,
@@ -392,6 +378,9 @@ export function buildImageGenerationSubmissionPlan({
       dialog.uiDesignSpecReference
         ? resolveImageReferenceSubmissionSource(dialog.uiDesignSpecReference)
         : null,
+      ...(dialog.generationReferences ?? []).map((reference) =>
+        resolveImageReferenceSubmissionSource(reference),
+      ),
     ].filter((src): src is string => Boolean(src));
     return {
       kind: 'image',
@@ -410,6 +399,7 @@ export function buildImageGenerationSubmissionPlan({
         generationInputs: buildUiDesignGenerationInputs(
           normalizedPrompt,
           dialog.uiDesignSpecReference,
+          dialog.generationReferences,
         ),
       },
       rememberImageModel: imageModel,
@@ -560,8 +550,8 @@ export function buildImageGenerationSubmissionPlan({
       imageSize: dialog.imageSize ?? '1K',
       ...(dialog.generationReferences?.length
         ? {
-            referenceImageSrcs: dialog.generationReferences.map(
-              (reference) => resolveImageReferenceSubmissionSource(reference),
+            referenceImageSrcs: dialog.generationReferences.map((reference) =>
+              resolveImageReferenceSubmissionSource(reference),
             ),
           }
         : {}),
@@ -611,6 +601,13 @@ export function buildIconSpritesheetGenerationSubmissionPlan(
       referenceImageSrc: resolveImageReferenceSubmissionSource(
         dialog.iconSpecReference,
       ),
+      ...(dialog.generationReferences?.length
+        ? {
+            referenceImageSrcs: dialog.generationReferences.map((reference) =>
+              resolveImageReferenceSubmissionSource(reference),
+            ),
+          }
+        : {}),
       iconDescriptions,
       model: rememberImageModel,
       aspectRatio: dialog.aspectRatio ?? '1:1',
@@ -619,6 +616,7 @@ export function buildIconSpritesheetGenerationSubmissionPlan(
     generationInputs: buildIconGenerationInputs(
       iconDescriptions,
       dialog.iconSpecReference,
+      dialog.generationReferences,
     ),
     rememberImageModel,
   };
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
index 2bafdbee3..864b7bf2e 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx
@@ -119,7 +119,9 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
     render(<IconComposerHarness initialDialog={createIconDialog()} />);
 
     const panel = screen.getByRole('dialog', { name: '生成图标素材' });
-    const firstRow = panel.querySelector('.image-canvas-editor__reference-strip');
+    const firstRow = panel.querySelector(
+      '.image-canvas-editor__reference-strip',
+    );
 
     expect(firstRow).toBeTruthy();
     expect(
@@ -154,6 +156,31 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
     expect(screen.queryByRole('button', { name: '图标规范A' })).toBeNull();
   });
 
+  it('uploads and removes icon generation references', () => {
+    const requestUpload = vi.fn();
+    render(
+      <IconComposerHarness
+        initialDialog={createIconDialog({
+          generationReferences: [
+            {
+              id: 'ref-a',
+              label: '按钮风格参考',
+              src: 'data:image/png;base64,ref',
+            },
+          ],
+        })}
+        onRequestUpload={requestUpload}
+      />,
+    );
+
+    expect(screen.getByLabelText('按钮风格参考')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '上传图标素材参考图' }));
+    expect(requestUpload).toHaveBeenCalledWith('generation-reference');
+
+    fireEvent.click(screen.getByRole('button', { name: '删除按钮风格参考' }));
+    expect(screen.queryByLabelText('按钮风格参考')).toBeNull();
+  });
+
   it('updates multi-line descriptions and submits', () => {
     const updateIconDescriptionText = vi.fn();
     const submitIconGeneration = vi.fn();
@@ -214,9 +241,9 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '生成' }));
 
-    expect((screen.getByLabelText('素材描述') as HTMLInputElement).disabled).toBe(
-      true,
-    );
+    expect(
+      (screen.getByLabelText('素材描述') as HTMLInputElement).disabled,
+    ).toBe(true);
     expect(submitIconGeneration).not.toHaveBeenCalled();
 
     rerender(
diff --git a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
index 360ca7732..8c3809cd4 100644
--- a/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
+++ b/src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx
@@ -1,4 +1,4 @@
-import { ImageIcon } from 'lucide-react';
+import { ImageIcon, ImagePlus } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -84,6 +84,7 @@ export function ImageCanvasIconSpritesheetComposerView({
     setIsIconSpecMenuOpen(false);
     onRequestUpload('icon-spec');
   };
+  const references = dialog.generationReferences ?? [];
 
   return (
     <form
@@ -142,10 +143,7 @@ export function ImageCanvasIconSpritesheetComposerView({
                 className="image-canvas-editor__character-spec-menu image-canvas-editor__portal-menu"
                 label="图标规范来源"
                 placement="top-start"
-                style={buildPortalMenuStyle(
-                  iconSpecButtonRef.current,
-                  'above',
-                )}
+                style={buildPortalMenuStyle(iconSpecButtonRef.current, 'above')}
               >
                 <PlatformFloatingMenuItem
                   className="image-canvas-editor__context-menu-item"
@@ -168,6 +166,49 @@ export function ImageCanvasIconSpritesheetComposerView({
               </PlatformFloatingMenu>,
             )
           : null}
+        {references.map((reference, index) => (
+          <ImageCanvasReferenceSlot
+            key={reference.id}
+            tone="default"
+            icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+            imageSrc={reference.src}
+            objectKey={reference.objectKey}
+            label={`参考图${index + 1}`}
+            ariaLabel={reference.label || `参考图${index + 1}`}
+            title={reference.label}
+            disabled={dialog.status === 'generating'}
+            onRemove={() =>
+              setGenerateDialog((currentDialog) =>
+                currentDialog?.mode === 'icon'
+                  ? {
+                      ...currentDialog,
+                      status:
+                        currentDialog.status === 'failed'
+                          ? 'idle'
+                          : currentDialog.status,
+                      errorMessage:
+                        currentDialog.status === 'failed'
+                          ? undefined
+                          : currentDialog.errorMessage,
+                      generationReferences: (
+                        currentDialog.generationReferences ?? []
+                      ).filter((item) => item.id !== reference.id),
+                    }
+                  : currentDialog,
+              )
+            }
+            removeLabel={`删除${reference.label || `参考图${index + 1}`}`}
+          />
+        ))}
+        <ImageCanvasReferenceSlot
+          tone="default"
+          icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
+          label="参考图"
+          ariaLabel="上传图标素材参考图"
+          disabled={dialog.status === 'generating'}
+          isAdd
+          onClick={() => onRequestUpload('generation-reference')}
+        />
       </div>
       <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
         <PlatformTextField
diff --git a/src/components/image-editor/ImageCanvasInteractionModel.test.ts b/src/components/image-editor/ImageCanvasInteractionModel.test.ts
index 7356be03f..0e677d3ee 100644
--- a/src/components/image-editor/ImageCanvasInteractionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasInteractionModel.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import {
   createMinimapModel,
+  fitViewportToBounds,
   fitViewportToLayers,
   getCanvasDropPoint,
   getCanvasPointFromClient,
@@ -90,6 +91,21 @@ describe('ImageCanvasInteractionModel', () => {
     ).toBe(0.025);
   });
 
+  it('fits bounds inside reserved viewport insets', () => {
+    const viewport = fitViewportToBounds({
+      bounds: { x: 100, y: 100, width: 400, height: 300 },
+      canvasSize: { width: 900, height: 640 },
+      insets: { top: 80 },
+      padding: 20,
+    });
+
+    expect(viewport).toEqual({
+      x: 150,
+      y: 110,
+      scale: 1,
+    });
+  });
+
   it('maps client points to canvas and world coordinates with safe fallbacks', () => {
     const rect = { left: 100, top: 50, right: 700, bottom: 450 };
 
diff --git a/src/components/image-editor/ImageCanvasInteractionModel.ts b/src/components/image-editor/ImageCanvasInteractionModel.ts
index 692210672..664c9ca91 100644
--- a/src/components/image-editor/ImageCanvasInteractionModel.ts
+++ b/src/components/image-editor/ImageCanvasInteractionModel.ts
@@ -141,10 +141,39 @@ export function fitViewportToLayers({
   if (!bounds) {
     return null;
   }
-  const boundsWidth = Math.max(1, bounds.maxX - bounds.minX);
-  const boundsHeight = Math.max(1, bounds.maxY - bounds.minY);
-  const availableWidth = Math.max(1, canvasSize.width - FIT_VIEW_PADDING * 2);
-  const availableHeight = Math.max(1, canvasSize.height - FIT_VIEW_PADDING * 2);
+  return fitViewportToBounds({
+    bounds: {
+      x: bounds.minX,
+      y: bounds.minY,
+      width: bounds.maxX - bounds.minX,
+      height: bounds.maxY - bounds.minY,
+    },
+    canvasSize,
+  });
+}
+
+export function fitViewportToBounds({
+  bounds,
+  canvasSize,
+  insets = {},
+  padding = FIT_VIEW_PADDING,
+}: {
+  bounds: { x: number; y: number; width: number; height: number };
+  canvasSize: CanvasSize;
+  insets?: { top?: number; right?: number; bottom?: number; left?: number };
+  padding?: number;
+}): CanvasViewport {
+  const boundsWidth = Math.max(1, bounds.width);
+  const boundsHeight = Math.max(1, bounds.height);
+  const leftInset = Math.max(0, insets.left ?? 0) + padding;
+  const rightInset = Math.max(0, insets.right ?? 0) + padding;
+  const topInset = Math.max(0, insets.top ?? 0) + padding;
+  const bottomInset = Math.max(0, insets.bottom ?? 0) + padding;
+  const availableWidth = Math.max(1, canvasSize.width - leftInset - rightInset);
+  const availableHeight = Math.max(
+    1,
+    canvasSize.height - topInset - bottomInset,
+  );
   const scale = clamp(
     Math.min(1, availableWidth / boundsWidth, availableHeight / boundsHeight),
     MIN_SCALE,
@@ -152,8 +181,8 @@ export function fitViewportToLayers({
   );
 
   return {
-    x: canvasSize.width / 2 - (bounds.minX + boundsWidth / 2) * scale,
-    y: canvasSize.height / 2 - (bounds.minY + boundsHeight / 2) * scale,
+    x: leftInset + availableWidth / 2 - (bounds.x + boundsWidth / 2) * scale,
+    y: topInset + availableHeight / 2 - (bounds.y + boundsHeight / 2) * scale,
     scale,
   };
 }
diff --git a/src/components/image-editor/ImageCanvasMetadataModalView.tsx b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
index 4cda682d0..13e1552b5 100644
--- a/src/components/image-editor/ImageCanvasMetadataModalView.tsx
+++ b/src/components/image-editor/ImageCanvasMetadataModalView.tsx
@@ -16,6 +16,13 @@ function formatReferenceType(refType: 'project-resource' | 'asset') {
   return refType === 'project-resource' ? '项目资源' : '素材';
 }
 
+function formatLayerDurationForDisplay(layer: CanvasLayer) {
+  return formatCanvasDurationMetric(layer.durationSeconds).replace(
+    /^时长\s*/u,
+    '',
+  );
+}
+
 export function ImageCanvasMetadataModalView({
   layer,
   onClose,
@@ -28,6 +35,7 @@ export function ImageCanvasMetadataModalView({
         : layer?.mediaType === 'image-sequence'
           ? '序列帧'
         : '图片';
+
   return (
     <UnifiedModal
       open={Boolean(layer)}
@@ -90,10 +98,7 @@ export function ImageCanvasMetadataModalView({
             <>
               <dt>时长</dt>
               <dd>
-                {formatCanvasDurationMetric(layer.durationSeconds).replace(
-                  /^时长\s*/u,
-                  '',
-                )}
+                {formatLayerDurationForDisplay(layer)}
               </dd>
             </>
           ) : (
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.test.ts b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
index 097dfbabb..ed0e2fd48 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.test.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.test.ts
@@ -15,6 +15,7 @@ import {
   resolveQuickEditFocusViewport,
   resolveQuickEditPanelStyle,
   resolveSelectedToolbarStyle,
+  resolveViewportForOverlayVisibility,
 } from './ImageCanvasOverlayModel';
 
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
@@ -182,6 +183,66 @@ describe('ImageCanvasOverlayModel', () => {
     ).toEqual({ left: 536, top: 120 });
   });
 
+  it('pans the viewport until an opened composer is inside the visible safe area', () => {
+    expect(
+      resolveViewportForOverlayVisibility({
+        viewport: { x: 10, y: 20, scale: 1 },
+        overlayBounds: {
+          left: 210,
+          top: 430,
+          right: 690,
+          bottom: 650,
+        },
+        safeBounds: {
+          left: 12,
+          top: 12,
+          right: 888,
+          bottom: 560,
+        },
+      }),
+    ).toEqual({ x: 10, y: -70, scale: 1 });
+  });
+
+  it('pans sideways when a centered composer would leave the viewport', () => {
+    expect(
+      resolveViewportForOverlayVisibility({
+        viewport: { x: 0, y: 0, scale: 1 },
+        overlayBounds: {
+          left: -80,
+          top: 120,
+          right: 420,
+          bottom: 320,
+        },
+        safeBounds: {
+          left: 12,
+          top: 12,
+          right: 888,
+          bottom: 560,
+        },
+      }),
+    ).toEqual({ x: 92, y: 0, scale: 1 });
+  });
+
+  it('centers an oversized composer within the available safe area', () => {
+    expect(
+      resolveViewportForOverlayVisibility({
+        viewport: { x: 0, y: 0, scale: 1 },
+        overlayBounds: {
+          left: 20,
+          top: 20,
+          right: 700,
+          bottom: 620,
+        },
+        safeBounds: {
+          left: 12,
+          top: 12,
+          right: 612,
+          bottom: 512,
+        },
+      }),
+    ).toEqual({ x: -48, y: -58, scale: 1 });
+  });
+
   it('recognizes canvas generation composer dialog modes', () => {
     expect(isCanvasGenerationComposerVisible(createDialog({ mode: 'generate' }))).toBe(
       true,
diff --git a/src/components/image-editor/ImageCanvasOverlayModel.ts b/src/components/image-editor/ImageCanvasOverlayModel.ts
index be6bb684d..2d6fa63fb 100644
--- a/src/components/image-editor/ImageCanvasOverlayModel.ts
+++ b/src/components/image-editor/ImageCanvasOverlayModel.ts
@@ -25,6 +25,7 @@ const QUICK_EDIT_FOCUS_SOURCE_TOP = 56;
 const QUICK_EDIT_PANEL_GAP = 12;
 const QUICK_EDIT_PANEL_ESTIMATED_HEIGHT = 260;
 const QUICK_EDIT_PANEL_BOTTOM_MARGIN = 4;
+const OVERLAY_VISIBILITY_EPSILON = 0.5;
 
 export type CanvasOverlayStyle = {
   left: number;
@@ -35,6 +36,72 @@ export type CanvasComposerOverlayStyle = CanvasOverlayStyle & {
   width?: string;
 };
 
+export type CanvasOverlayBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+function resolveOverlayAxisShift({
+  start,
+  end,
+  safeStart,
+  safeEnd,
+}: {
+  start: number;
+  end: number;
+  safeStart: number;
+  safeEnd: number;
+}) {
+  const size = end - start;
+  const safeSize = safeEnd - safeStart;
+  if (size > safeSize) {
+    return safeStart + (safeSize - size) / 2 - start;
+  }
+  if (start < safeStart) {
+    return safeStart - start;
+  }
+  if (end > safeEnd) {
+    return safeEnd - end;
+  }
+  return 0;
+}
+
+export function resolveViewportForOverlayVisibility({
+  viewport,
+  overlayBounds,
+  safeBounds,
+}: {
+  viewport: CanvasViewport;
+  overlayBounds: CanvasOverlayBounds;
+  safeBounds: CanvasOverlayBounds;
+}): CanvasViewport {
+  const shiftX = resolveOverlayAxisShift({
+    start: overlayBounds.left,
+    end: overlayBounds.right,
+    safeStart: safeBounds.left,
+    safeEnd: safeBounds.right,
+  });
+  const shiftY = resolveOverlayAxisShift({
+    start: overlayBounds.top,
+    end: overlayBounds.bottom,
+    safeStart: safeBounds.top,
+    safeEnd: safeBounds.bottom,
+  });
+  if (
+    Math.abs(shiftX) <= OVERLAY_VISIBILITY_EPSILON &&
+    Math.abs(shiftY) <= OVERLAY_VISIBILITY_EPSILON
+  ) {
+    return viewport;
+  }
+  return {
+    ...viewport,
+    x: viewport.x + shiftX,
+    y: viewport.y + shiftY,
+  };
+}
+
 export function resolveGenerationAnchor({
   dialog,
   generatedLayer,
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
index 8172d6f71..fa4ab2191 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.test.tsx
@@ -8,6 +8,7 @@ import type {
   CanvasLayer,
   CharacterReferenceImage,
   QuickEditPanelState,
+  UploadTarget,
 } from './ImageCanvasEditorTypes';
 import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
 
@@ -36,7 +37,7 @@ function QuickEditPanelHarness({
 }: {
   initialPanel: QuickEditPanelState;
   onSubmit?: () => void;
-  onRequestUpload?: (target: 'quick-edit-reference') => void;
+  onRequestUpload?: (target: UploadTarget) => void;
   onRememberImageModel?: (model: string) => void;
 }) {
   const [panel, setPanel] = useState<QuickEditPanelState | null>(initialPanel);
@@ -109,13 +110,17 @@ describe('ImageCanvasQuickEditPanelView', () => {
     );
     expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
     expect(screen.getByLabelText('当前错误').textContent).toBe('-');
-    fireEvent.click(screen.getByRole('button', { name: '快速编辑尺寸 1:1·1K' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '快速编辑尺寸 1:1·1K' }),
+    );
     fireEvent.click(screen.getByRole('button', { name: '比例 16:9' }));
     fireEvent.click(screen.getByRole('button', { name: '尺寸 2K' }));
     expect(screen.getByLabelText('当前比例').textContent).toBe('16:9');
     expect(screen.getByLabelText('当前图片规格').textContent).toBe('2K');
 
-    fireEvent.click(screen.getByRole('button', { name: '快速编辑模型 nanobanana2' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '快速编辑模型 nanobanana2' }),
+    );
     fireEvent.click(screen.getByRole('button', { name: 'gpt-image-2' }));
     expect(screen.getByLabelText('当前模型').textContent).toBe('gpt-image-2');
     expect(rememberImageModel).toHaveBeenCalledWith('gpt-image-2');
@@ -246,9 +251,11 @@ describe('ImageCanvasQuickEditPanelView', () => {
     );
 
     expect(
-      (screen.getByRole('button', {
-        name: '添加快速编辑参考图',
-      }) as HTMLButtonElement).disabled,
+      (
+        screen.getByRole('button', {
+          name: '添加快速编辑参考图',
+        }) as HTMLButtonElement
+      ).disabled,
     ).toBe(true);
     expect(screen.queryByLabelText('原图 图9')).toBeNull();
   });
diff --git a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
index b21e18524..06241b6eb 100644
--- a/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasQuickEditPanelView.tsx
@@ -1,42 +1,22 @@
-import { Check, ChevronDown, Cpu, ImageIcon, ImagePlus } from 'lucide-react';
+import { ImageIcon } from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
-  type ReactNode,
   type RefObject,
   type SetStateAction,
-  useCallback,
-  useRef,
-  useState,
+  type ReactNode,
 } from 'react';
 
-import { PlatformActionButton } from '../common/PlatformActionButton';
-import {
-  PlatformFloatingMenu,
-  PlatformFloatingMenuItem,
-} from '../common/PlatformFloatingMenu';
-import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
-import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
+import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
+import { QUICK_EDIT_REFERENCE_LIMIT } from './ImageCanvasGenerationModel';
 import type {
   CanvasLayer,
-  CharacterReferenceImage,
+  GenerateDialogState,
   QuickEditPanelState,
+  UploadTarget,
 } from './ImageCanvasEditorTypes';
-import {
-  calculateEditorImageModelPrice,
-  EDITOR_IMAGE_DIMENSION_OPTIONS,
-  EDITOR_IMAGE_MODEL_OPTIONS,
-  getEditorImageModelDisplayName,
-  IMAGE_MODEL_NANOBANANA2,
-  normalizeEditorImageModel,
-  QUICK_EDIT_REFERENCE_LIMIT,
-  resolveEditorImageSizeLabel,
-} from './ImageCanvasGenerationModel';
-import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
-import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';
 
-type ImageCanvasQuickEditPanelViewProps = {
+export type ImageCanvasQuickEditPanelViewProps = {
   panel: QuickEditPanelState;
   sourceLayer: CanvasLayer;
   style: CSSProperties;
@@ -50,16 +30,14 @@ type ImageCanvasQuickEditPanelViewProps = {
     anchor: HTMLElement | null,
     placement: 'above' | 'below',
   ) => CSSProperties;
-  onRequestUpload?: (target: 'quick-edit-reference') => void;
+  onRequestUpload?: (target: UploadTarget) => void;
   onRememberImageModel?: (model: string) => void;
   onSubmit: () => void;
 };
 
-type OpenPanel = 'dimensions' | 'model' | null;
-
-function resetFailedPanelStatus<T extends { status: string; errorMessage?: string }>(
-  panel: T,
-) {
+function resetFailedPanelStatus<
+  T extends { status: string; errorMessage?: string },
+>(panel: T) {
   return {
     ...panel,
     status: panel.status === 'failed' ? 'idle' : panel.status,
@@ -67,88 +45,44 @@ function resetFailedPanelStatus<T extends { status: string; errorMessage?: strin
   };
 }
 
-function QuickEditReferenceChip({
-  reference,
-  index,
-  onRemove,
-}: {
-  reference: CharacterReferenceImage;
-  index: number;
-  onRemove: () => void;
-}) {
-  const label = `图${index + 1}`;
-  return (
-    <ImageCanvasReferenceSlot
-      tone="quick-edit"
-      icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
-      imageSrc={reference.src}
-      objectKey={reference.objectKey}
-      label={label}
-      ariaLabel={label}
-      title={reference.label}
-      onRemove={onRemove}
-      removeLabel={`删除${label}`}
-    />
-  );
+function createQuickEditDialog(
+  panel: QuickEditPanelState,
+): GenerateDialogState {
+  return {
+    mode: panel.mode === 'redraw' ? 'generate' : 'quick-edit',
+    prompt: panel.prompt,
+    status: panel.status,
+    sourceLayerId: panel.sourceLayerId,
+    generationReferences: panel.quickEditReferences,
+    imageModel: panel.model,
+    aspectRatio: panel.aspectRatio,
+    imageSize: panel.imageSize,
+  };
 }
 
-function getImageDimensionOptions(model: string | null | undefined) {
-  return (
-    EDITOR_IMAGE_DIMENSION_OPTIONS[
-      (normalizeEditorImageModel(model) ??
-        IMAGE_MODEL_NANOBANANA2) as keyof typeof EDITOR_IMAGE_DIMENSION_OPTIONS
-    ] ?? EDITOR_IMAGE_DIMENSION_OPTIONS[IMAGE_MODEL_NANOBANANA2]
-  );
-}
-
-function getPanelAspectRatio(panel: QuickEditPanelState) {
-  const options = getImageDimensionOptions(panel.model);
-  const aspectRatios = options.aspectRatios as readonly string[];
-  return panel.aspectRatio && aspectRatios.includes(panel.aspectRatio)
-    ? panel.aspectRatio
-    : (options.aspectRatios[0] ?? '1:1');
-}
-
-function getPanelImageSize(panel: QuickEditPanelState) {
-  const options = getImageDimensionOptions(panel.model);
-  const imageSizes = options.imageSizes as readonly string[];
-  return panel.imageSize && imageSizes.includes(panel.imageSize)
-    ? panel.imageSize
-    : (options.imageSizes.find((size) => size === '1K') ??
-        options.imageSizes[0] ??
-        '1K');
-}
-
-function QuickEditOptionChoice({
-  children,
-  selected,
-  className,
-  ariaLabel,
-  onClick,
-}: {
-  children: ReactNode;
-  selected: boolean;
-  className?: string;
-  ariaLabel?: string;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      className={['image-canvas-editor__option-popover-choice', className]
-        .filter(Boolean)
-        .join(' ')}
-      aria-pressed={selected}
-      aria-label={ariaLabel}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
+function syncPanelFromDialogUpdate(
+  panel: QuickEditPanelState,
+  dialog: GenerateDialogState,
+) {
+  const normalizedPanel = resetFailedPanelStatus(panel);
+  const normalizedDialog = resetFailedPanelStatus(dialog);
+  return {
+    ...normalizedPanel,
+    size: panel.size,
+    prompt: dialog.prompt,
+    aspectRatio:
+      normalizedDialog.aspectRatio ?? normalizedPanel.aspectRatio ?? '1:1',
+    imageSize: normalizedDialog.imageSize ?? normalizedPanel.imageSize ?? '1K',
+    model: normalizedDialog.imageModel ?? normalizedPanel.model,
+    quickEditReferences: normalizedDialog.generationReferences,
+    status: normalizedDialog.status,
+    errorMessage: normalizedDialog.errorMessage,
+  };
 }
 
 export function ImageCanvasQuickEditPanelView({
   panel,
+  sourceLayer,
   style,
   referenceButtonRef,
   isReferenceMenuOpen = false,
@@ -157,333 +91,82 @@ export function ImageCanvasQuickEditPanelView({
   setQuickEditPanel,
   renderEditorPortal = (node) => node,
   buildPortalMenuStyle = () => ({}),
-  onRequestUpload = () => {},
+  onRequestUpload,
   onRememberImageModel = () => {},
   onSubmit,
 }: ImageCanvasQuickEditPanelViewProps) {
-  const [openPanel, setOpenPanel] = useState<OpenPanel>(null);
-  const dimensionsButtonRef = useRef<HTMLButtonElement | null>(null);
-  const modelButtonRef = useRef<HTMLButtonElement | null>(null);
+  void sourceLayer;
+
   const isRedraw = panel.mode === 'redraw';
-  const isGenerating = panel.status === 'generating';
-  const panelLabel = isRedraw ? '重绘图片' : '快速编辑图片';
-  const promptLabel = isRedraw ? '重绘提示词' : '快速编辑提示词';
-  const references = panel.quickEditReferences ?? [];
-  const selectedModel = normalizeEditorImageModel(panel.model);
-  const selectedModelLabel = getEditorImageModelDisplayName(selectedModel);
-  const dimensionOptions = getImageDimensionOptions(selectedModel);
-  const selectedAspectRatio = getPanelAspectRatio(panel);
-  const selectedImageSize = getPanelImageSize(panel);
-  const dimensionLabel = resolveEditorImageSizeLabel({
-    aspectRatio: selectedAspectRatio,
-    imageSize: selectedImageSize,
-  });
+  const referenceCount = panel.quickEditReferences?.length ?? 0;
   const canAddReferences =
-    !isRedraw && !isGenerating && references.length < QUICK_EDIT_REFERENCE_LIMIT;
-  const dismissOpenPanel = useCallback(() => setOpenPanel(null), []);
-
-  useImageCanvasFloatingOptionDismiss({
-    isOpen: openPanel !== null,
-    boundaryRefs: [dimensionsButtonRef, modelButtonRef],
-    onDismiss: dismissOpenPanel,
-  });
-
-  const updatePanel = (patch: Partial<QuickEditPanelState>) => {
-    setQuickEditPanel((currentPanel) =>
-      currentPanel
-        ? {
-            ...resetFailedPanelStatus(currentPanel),
-            ...patch,
-          }
-        : currentPanel,
-    );
-  };
-
-  const updateModel = (model: string) => {
-    const nextOptions = getImageDimensionOptions(model);
-    const nextAspectRatios = nextOptions.aspectRatios as readonly string[];
-    const nextImageSizes = nextOptions.imageSizes as readonly string[];
-    onRememberImageModel(model);
-    setQuickEditPanel((currentPanel) => {
-      if (!currentPanel) {
-        return currentPanel;
-      }
-      return {
-        ...resetFailedPanelStatus(currentPanel),
-        model,
-        aspectRatio:
-          currentPanel.aspectRatio &&
-          nextAspectRatios.includes(currentPanel.aspectRatio)
-            ? currentPanel.aspectRatio
-            : (nextOptions.aspectRatios[0] ?? '1:1'),
-        imageSize:
-          currentPanel.imageSize && nextImageSizes.includes(currentPanel.imageSize)
-            ? currentPanel.imageSize
-            : (nextOptions.imageSizes.find((size) => size === '1K') ??
-              nextOptions.imageSizes[0]),
-      };
-    });
-  };
-
-  const togglePanel = (nextPanel: Exclude<OpenPanel, null>) => {
-    setOpenPanel((currentPanel) =>
-      currentPanel === nextPanel ? null : nextPanel,
-    );
-  };
+    !isRedraw && referenceCount < QUICK_EDIT_REFERENCE_LIMIT;
+  const quickEditDialog = createQuickEditDialog(panel);
 
   return (
-    <>
-      <form
-        className="image-canvas-editor__quick-edit-panel image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--quick-edit"
-        style={style}
-        role="dialog"
-        aria-label={panelLabel}
-        onPointerDown={(event) => event.stopPropagation()}
-        onSubmit={(event) => {
-          event.preventDefault();
-          onSubmit();
-        }}
-      >
-        <div className="image-canvas-editor__reference-strip">
-          {!isRedraw
-            ? references.map((reference, index) => (
-                <QuickEditReferenceChip
-                  key={reference.id}
-                  reference={reference}
-                  index={index}
-                  onRemove={() =>
-                    setQuickEditPanel((currentPanel) =>
-                      currentPanel
-                        ? {
-                            ...resetFailedPanelStatus(currentPanel),
-                            quickEditReferences: (
-                              currentPanel.quickEditReferences ?? []
-                            ).filter((item) => item.id !== reference.id),
-                          }
-                        : currentPanel,
-                    )
-                  }
-                />
-              ))
-            : null}
-          {!isRedraw ? (
-            <ImageCanvasReferenceSlot
-              buttonRef={referenceButtonRef}
-              tone="quick-edit"
-              icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
-              label="参考图"
-              ariaLabel="添加快速编辑参考图"
-              disabled={!canAddReferences}
-              isAdd
-              onClick={() => setIsReferenceMenuOpen?.((open) => !open)}
-            />
-          ) : null}
-        </div>
-        <PlatformTextField
-          variant="textarea"
-          aria-label={promptLabel}
-          value={panel.prompt}
-          disabled={isGenerating}
-          size="sm"
-          density="compact"
-          className="image-canvas-editor__generation-prompt image-canvas-editor__quick-edit-prompt"
-          onChange={(event) =>
-            updatePanel({
-              prompt: event.target.value,
-            })
+    <ImageCanvasBasicGenerationComposerView
+      dialog={quickEditDialog}
+      style={style}
+      setGenerateDialog={(valueOrUpdater) => {
+        setQuickEditPanel((currentPanel) => {
+          if (!currentPanel) {
+            return currentPanel;
           }
-        />
-        {panel.status === 'failed' ? (
-          <PlatformStatusMessage
-            tone="error"
-            surface="platform"
-            size="xs"
-            className="image-canvas-editor__generate-status"
-            role="alert"
-          >
-            {panel.errorMessage}
-          </PlatformStatusMessage>
-        ) : null}
-        <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__quick-edit-footer">
-          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
-            <PlatformInlineOptionButton
-              ref={dimensionsButtonRef}
-              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}尺寸 ${dimensionLabel}`}
-              aria-expanded={openPanel === 'dimensions'}
-              disabled={isGenerating}
-              trailingIcon={<ChevronDown className="h-3 w-3" />}
-              onClick={() => togglePanel('dimensions')}
-            >
-              {dimensionLabel}
-            </PlatformInlineOptionButton>
-            {openPanel === 'dimensions'
-              ? renderEditorPortal(
-                  <PlatformFloatingMenu
-                    className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
-                    label={`${isRedraw ? '重绘' : '快速编辑'}尺寸选项`}
-                    placement="top-start"
-                    style={buildPortalMenuStyle(
-                      dimensionsButtonRef.current,
-                      'above',
-                    )}
-                    onPointerDown={(event) => event.stopPropagation()}
-                  >
-                    <div className="image-canvas-editor__option-popover-sections">
-                      <div className="image-canvas-editor__option-popover-section">
-                        <span className="image-canvas-editor__option-popover-title">
-                          比例
-                        </span>
-                        <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
-                          {dimensionOptions.aspectRatios.map((aspectRatio) => (
-                            <QuickEditOptionChoice
-                              key={aspectRatio}
-                              selected={selectedAspectRatio === aspectRatio}
-                              className="image-canvas-editor__option-popover-choice--ratio"
-                              ariaLabel={`比例 ${aspectRatio}`}
-                              onClick={() => updatePanel({ aspectRatio })}
-                            >
-                              <span
-                                className="image-canvas-editor__ratio-wireframe"
-                                data-ratio={aspectRatio}
-                                aria-hidden="true"
-                              />
-                              <span>{aspectRatio}</span>
-                            </QuickEditOptionChoice>
-                          ))}
-                        </div>
-                      </div>
-                      <div className="image-canvas-editor__option-popover-section">
-                        <span className="image-canvas-editor__option-popover-title">
-                          尺寸
-                        </span>
-                        <div className="image-canvas-editor__option-popover-items">
-                          {dimensionOptions.imageSizes.map((imageSize) => (
-                            <QuickEditOptionChoice
-                              key={imageSize}
-                              selected={selectedImageSize === imageSize}
-                              ariaLabel={`尺寸 ${imageSize}`}
-                              onClick={() => updatePanel({ imageSize })}
-                            >
-                              {imageSize}
-                            </QuickEditOptionChoice>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </PlatformFloatingMenu>,
-                )
-              : null}
-          </div>
-          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model">
-            <PlatformInlineOptionButton
-              ref={modelButtonRef}
-              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
-              aria-label={`${isRedraw ? '重绘' : '快速编辑'}模型 ${selectedModelLabel}`}
-              aria-expanded={openPanel === 'model'}
-              disabled={isGenerating}
-              trailingIcon={<ChevronDown className="h-3 w-3" />}
-              onClick={() => togglePanel('model')}
-            >
-              <span className="image-canvas-editor__model-trigger-label">
-                <span
-                  className="image-canvas-editor__model-icon"
-                  aria-hidden="true"
-                >
-                  <Cpu />
-                </span>
-                <span>{selectedModelLabel}</span>
-              </span>
-            </PlatformInlineOptionButton>
-            {openPanel === 'model'
-              ? renderEditorPortal(
-                  <PlatformFloatingMenu
-                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
-                    label={`${isRedraw ? '重绘' : '快速编辑'}模型选项`}
-                    placement="top-start"
-                    style={buildPortalMenuStyle(modelButtonRef.current, 'above')}
-                    onPointerDown={(event) => event.stopPropagation()}
-                  >
-                    <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
-                      {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
-                        const selected = selectedModel === option.value;
-                        return (
-                          <QuickEditOptionChoice
-                            key={option.value}
-                            selected={selected}
-                            className="image-canvas-editor__option-popover-choice--model"
-                            onClick={() => updateModel(option.value)}
-                          >
-                            <span
-                              className="image-canvas-editor__model-icon"
-                              aria-hidden="true"
-                            >
-                              <Cpu />
-                            </span>
-                            <span>{option.label}</span>
-                            <Check
-                              className="image-canvas-editor__option-selected-check"
-                              data-visible={selected}
-                              aria-hidden="true"
-                            />
-                          </QuickEditOptionChoice>
-                        );
-                      })}
-                    </div>
-                  </PlatformFloatingMenu>,
-                )
-              : null}
-          </div>
-          <PlatformActionButton
-            type="submit"
-            tone="secondary"
-            size="xs"
-            shape="pill"
-            className="image-canvas-editor__generation-submit image-canvas-editor__quick-edit-submit"
-            disabled={isGenerating}
-            aria-label={isGenerating ? '生成中' : '生成'}
-          >
-            {isGenerating ? (
-              '生成中'
-            ) : (
-              <>
-                <span>生成</span>
-                <span className="image-canvas-editor__mud-point-inline">
-                  {calculateEditorImageModelPrice(panel.model, selectedImageSize)}泥点
-                </span>
-              </>
-            )}
-          </PlatformActionButton>
-        </div>
-      </form>
-      {!isRedraw && isReferenceMenuOpen && referenceButtonRef
-        ? renderEditorPortal(
-            <PlatformFloatingMenu
-              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
-              label="快速编辑参考图来源"
-              placement="top-start"
-              style={buildPortalMenuStyle(referenceButtonRef.current, 'above')}
-            >
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsReferenceMenuOpen?.(false);
-                  setIsPickingQuickEditReferenceFromCanvas?.(true);
-                }}
-              >
-                从画布中选择
-              </PlatformFloatingMenuItem>
-              <PlatformFloatingMenuItem
-                onClick={() => {
-                  setIsReferenceMenuOpen?.(false);
-                  setIsPickingQuickEditReferenceFromCanvas?.(false);
-                  onRequestUpload('quick-edit-reference');
-                }}
-              >
-                上传图片
-              </PlatformFloatingMenuItem>
-            </PlatformFloatingMenu>,
-          )
-        : null}
-    </>
+          const currentDialog = createQuickEditDialog(currentPanel);
+          const nextDialog =
+            typeof valueOrUpdater === 'function'
+              ? valueOrUpdater(currentDialog)
+              : valueOrUpdater;
+          if (!nextDialog) {
+            return currentPanel;
+          }
+          return syncPanelFromDialogUpdate(currentPanel, nextDialog);
+        });
+      }}
+      generationReferenceButtonRef={referenceButtonRef}
+      isGenerationReferenceMenuOpen={isReferenceMenuOpen}
+      setIsGenerationReferenceMenuOpen={setIsReferenceMenuOpen}
+      setIsPickingGenerationReferenceFromCanvas={
+        setIsPickingQuickEditReferenceFromCanvas
+      }
+      onRequestUpload={onRequestUpload ?? (() => {})}
+      onPickReferenceFromCanvas={() =>
+        setIsPickingQuickEditReferenceFromCanvas?.(true)
+      }
+      onToggleReferenceMenu={() => setIsReferenceMenuOpen?.((open) => !open)}
+      onRememberImageModel={onRememberImageModel}
+      onSubmit={onSubmit}
+      dialogLabel={isRedraw ? '重绘图片' : '快速编辑图片'}
+      includeDimensions={true}
+      includeModel={true}
+      includeReferences={!isRedraw}
+      promptLabel={isRedraw ? '重绘提示词' : '快速编辑提示词'}
+      promptPlaceholder={
+        isRedraw ? '把画面重绘成什么样？' : '想怎么编辑这张图？'
+      }
+      optionLabelPrefix={isRedraw ? '重绘' : '快速编辑'}
+      dimensionRatioAriaLabelPrefix="比例"
+      dimensionSizeAriaLabelPrefix="尺寸"
+      referenceUploadTarget="quick-edit-reference"
+      referenceButtonLabel={isRedraw ? '' : '添加快速编辑参考图'}
+      referenceButtonAriaLabel={isRedraw ? undefined : '添加快速编辑参考图'}
+      referenceMenuLabel={isRedraw ? '' : '快速编辑参考图来源'}
+      referenceSlotTone="quick-edit"
+      referenceSlotDisabled={!canAddReferences}
+      showReferenceAddButton={!isRedraw}
+      referenceLabelFormatter={(_, index) => `图${index + 1}`}
+      referenceAriaLabelFormatter={(_, index) => `图${index + 1}`}
+      referenceRemoveLabelFormatter={(_, index) => `删除图${index + 1}`}
+      formClassName="image-canvas-editor__quick-edit-panel image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--quick-edit"
+      footerClassName="image-canvas-editor__generation-composer-footer image-canvas-editor__quick-edit-footer"
+      promptClassName="image-canvas-editor__generation-prompt image-canvas-editor__quick-edit-prompt"
+      referenceSlotClassName="image-canvas-editor__quick-edit-reference"
+      submitButtonClassName="image-canvas-editor__generation-submit image-canvas-editor__quick-edit-submit"
+      submitLabel="生成"
+      submitAriaLabel="生成"
+      submittingStatusLabel="生成中"
+      renderEditorPortal={renderEditorPortal}
+      buildPortalMenuStyle={buildPortalMenuStyle}
+    />
   );
 }
diff --git a/src/components/image-editor/ImageCanvasRasterEditModel.ts b/src/components/image-editor/ImageCanvasRasterEditModel.ts
index 3b5f328c0..4db465040 100644
--- a/src/components/image-editor/ImageCanvasRasterEditModel.ts
+++ b/src/components/image-editor/ImageCanvasRasterEditModel.ts
@@ -1,4 +1,8 @@
-import { removeBackgroundFromRgba } from '../../../packages/shared/src/assets/chromaKey';
+import {
+  removeEditorImageBackground,
+  type EditorBackgroundRemovalInput,
+  type EditorBackgroundRemovalResult,
+} from '../../services/image-editor/editorProjectClient';
 
 export type CropExpandInsets = {
   left: number;
@@ -27,8 +31,13 @@ export type CropExpandFrame = {
 
 export type RasterEditResult = {
   imageSrc: string;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
   width: number;
   height: number;
+  taskId?: string | null;
+  elapsedMs?: number;
+  provider?: string;
 };
 
 function assertCanvasSupport() {
@@ -207,19 +216,9 @@ export async function renderCropExpandImage({
 }
 
 export async function removeImageBackground(
-  source: string,
-): Promise<RasterEditResult> {
-  const image = await loadImageElement(source);
-  const { width, height } = resolveImageSize(image);
-  const { canvas, context } = createRasterCanvas(width, height);
-  context.drawImage(image, 0, 0, width, height);
-  const imageData = context.getImageData(0, 0, width, height);
-  removeBackgroundFromRgba(imageData.data, width, height);
-
-  context.putImageData(imageData, 0, 0);
-  return {
-    imageSrc: canvas.toDataURL('image/png'),
-    width,
-    height,
-  };
+  input: string | EditorBackgroundRemovalInput,
+): Promise<EditorBackgroundRemovalResult> {
+  return removeEditorImageBackground(
+    typeof input === 'string' ? { sourceImageSrc: input } : input,
+  );
 }
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
index d2f843139..530e239e0 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.test.tsx
@@ -155,6 +155,53 @@ describe('ImageCanvasSelectedLayerToolbarView', () => {
     expect(props.onDownloadLayer).toHaveBeenCalledWith(layer);
   });
 
+  it('removes raster edit actions for video and character animation layers', () => {
+    renderSelectedToolbar({
+      selectedLayer: createLayer({
+        title: '生成视频',
+        src: '/generated/video.mp4',
+        mediaType: 'video',
+        assetKind: 'video',
+      }),
+    });
+    const videoToolbar = screen.getByRole('toolbar', { name: '图片工具栏' });
+
+    expect(
+      within(videoToolbar).queryByRole('button', { name: '裁扩按钮' }),
+    ).toBeNull();
+    expect(
+      within(videoToolbar).queryByRole('button', { name: '去除背景按钮' }),
+    ).toBeNull();
+    expect(
+      within(videoToolbar).getAllByRole('button').map((button) =>
+        button.getAttribute('aria-label'),
+      ),
+    ).toEqual(['快速编辑', '改造', '下载按钮']);
+
+    cleanup();
+    renderSelectedToolbar({
+      selectedLayer: createLayer({
+        title: '角色动作',
+        src: '/generated/action/frame-01.png',
+        mediaType: 'image-sequence',
+        assetKind: 'character-animation',
+      }),
+    });
+    const actionToolbar = screen.getByRole('toolbar', { name: '图片工具栏' });
+
+    expect(
+      within(actionToolbar).queryByRole('button', { name: '裁扩按钮' }),
+    ).toBeNull();
+    expect(
+      within(actionToolbar).queryByRole('button', { name: '去除背景按钮' }),
+    ).toBeNull();
+    expect(
+      within(actionToolbar).getAllByRole('button').map((button) =>
+        button.getAttribute('aria-label'),
+      ),
+    ).toEqual(['快速编辑', '改造', '下载按钮']);
+  });
+
   it('renders character animation only for character layers', () => {
     const layer = createLayer({
       sourceType: 'generated',
diff --git a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
index c7f22d13a..e8d5d67c9 100644
--- a/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
+++ b/src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx
@@ -68,6 +68,11 @@ export function ImageCanvasSelectedLayerToolbarView({
     );
   }
 
+  const canRasterEdit =
+    selectedLayer.mediaType !== 'video' &&
+    selectedLayer.mediaType !== 'image-sequence' &&
+    selectedLayer.assetKind !== 'character-animation';
+
   return (
     <div
       className="image-canvas-editor__floating-toolbar"
@@ -89,18 +94,22 @@ export function ImageCanvasSelectedLayerToolbarView({
         aria-hidden="true"
         className="image-canvas-editor__floating-toolbar-divider"
       />
-      <EditorIconButton
-        label="裁扩按钮"
-        title="裁扩按钮"
-        icon={Crop}
-        onClick={() => onOpenCropExpandPanel(selectedLayer)}
-      />
-      <EditorIconButton
-        label="去除背景按钮"
-        title="去除背景按钮"
-        icon={ImageOff}
-        onClick={() => onRemoveBackground(selectedLayer)}
-      />
+      {canRasterEdit ? (
+        <>
+          <EditorIconButton
+            label="裁扩按钮"
+            title="裁扩按钮"
+            icon={Crop}
+            onClick={() => onOpenCropExpandPanel(selectedLayer)}
+          />
+          <EditorIconButton
+            label="去除背景按钮"
+            title="去除背景按钮"
+            icon={ImageOff}
+            onClick={() => onRemoveBackground(selectedLayer)}
+          />
+        </>
+      ) : null}
       {selectedLayer.assetKind === 'ui-design' ? (
         <PlatformIconButton
           className="image-canvas-editor__floating-toolbar-text-button"
diff --git a/src/components/image-editor/ImageCanvasSelectionModel.ts b/src/components/image-editor/ImageCanvasSelectionModel.ts
index df1151e7a..359ca804b 100644
--- a/src/components/image-editor/ImageCanvasSelectionModel.ts
+++ b/src/components/image-editor/ImageCanvasSelectionModel.ts
@@ -72,6 +72,9 @@ export function resolvePointerSelection({
   isMultiSelectGesture: boolean;
 }) {
   if (!isMultiSelectGesture) {
+    if (selectedIds.includes(targetId)) {
+      return selectedIds;
+    }
     return [targetId];
   }
   if (!selectedIds.includes(targetId)) {
diff --git a/src/components/image-editor/ImageCanvasSidebarView.test.tsx b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
index 0c348da35..88deb5d3c 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.test.tsx
@@ -118,6 +118,7 @@ function createSidebarProps(
     setAssetPublicShowcaseEnabled: vi.fn(),
     toggleAssetSelected: vi.fn(),
     addAssetLayer: vi.fn(),
+    onDownloadAsset: vi.fn(),
     toggleAllAssetsSelected: vi.fn(),
     deleteSelectedAssets: vi.fn(),
     closeAssetSelectionMode: vi.fn(),
@@ -189,6 +190,9 @@ describe('ImageCanvasSidebarView', () => {
     expect(
       within(folder).getByRole('button', { name: '上传到项目素材' }),
     ).toBeTruthy();
+    expect(
+      within(folder).getByRole('button', { name: '下载素材账号素材A' }),
+    ).toBeTruthy();
   });
 
   it('renders asset editing inputs with sidebar text-field chrome', () => {
diff --git a/src/components/image-editor/ImageCanvasSidebarView.tsx b/src/components/image-editor/ImageCanvasSidebarView.tsx
index 89054f40a..d984120af 100644
--- a/src/components/image-editor/ImageCanvasSidebarView.tsx
+++ b/src/components/image-editor/ImageCanvasSidebarView.tsx
@@ -102,6 +102,7 @@ export type ImageCanvasSidebarViewProps = {
   ) => void;
   toggleAssetSelected: (assetId: string) => void;
   addAssetLayer: (asset: EditorAsset) => void;
+  onDownloadAsset: (asset: EditorAsset) => void;
   toggleAllAssetsSelected: () => void;
   deleteSelectedAssets: () => void;
   closeAssetSelectionMode: () => void;
@@ -167,6 +168,7 @@ export function ImageCanvasSidebarView({
   setAssetPublicShowcaseEnabled,
   toggleAssetSelected,
   addAssetLayer,
+  onDownloadAsset,
   toggleAllAssetsSelected,
   deleteSelectedAssets,
   closeAssetSelectionMode,
@@ -321,6 +323,7 @@ export function ImageCanvasSidebarView({
           setAssetPublicShowcaseEnabled={setAssetPublicShowcaseEnabled}
           toggleAssetSelected={toggleAssetSelected}
           addAssetLayer={addAssetLayer}
+          onDownloadAsset={onDownloadAsset}
           toggleAllAssetsSelected={toggleAllAssetsSelected}
           deleteSelectedAssets={deleteSelectedAssets}
           closeAssetSelectionMode={closeAssetSelectionMode}
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
index 0df94fd83..42a1cbbbc 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
@@ -54,8 +54,10 @@ function renderPanel({
 
 function UiDesignHarness({
   initialDialog,
+  onRequestUpload = vi.fn(),
 }: {
   initialDialog: GenerateDialogState;
+  onRequestUpload?: (target: UploadTarget) => void;
 }) {
   const [dialog, setDialog] = useState<GenerateDialogState | null>(
     initialDialog,
@@ -71,7 +73,7 @@ function UiDesignHarness({
       renderEditorPortal={(node) => node}
       buildPortalMenuStyle={() => ({ position: 'fixed', left: 0, top: 0 })}
       onUpdateSpecFormValue={vi.fn()}
-      onRequestUpload={vi.fn()}
+      onRequestUpload={onRequestUpload}
       onSubmit={vi.fn()}
     />
   ) : null;
@@ -154,6 +156,39 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     expect(screen.queryByText('nanobanana2')).toBeNull();
   });
 
+  it('uploads and removes UI design generation references', () => {
+    const requestUpload = vi.fn();
+    render(
+      <UiDesignHarness
+        onRequestUpload={requestUpload}
+        initialDialog={{
+          mode: 'ui-design',
+          prompt: '',
+          status: 'idle',
+          composerOpen: true,
+          uiDesignSpecReference: null,
+          generationReferences: [
+            {
+              id: 'ref-a',
+              label: '界面风格参考',
+              src: 'data:image/png;base64,ref',
+            },
+          ],
+          imageModel: 'gpt-image-2',
+          aspectRatio: '16:9',
+          imageSize: '1K',
+        }}
+      />,
+    );
+
+    expect(screen.getByLabelText('界面风格参考')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '上传UI设计参考图' }));
+    expect(requestUpload).toHaveBeenCalledWith('generation-reference');
+
+    fireEvent.click(screen.getByRole('button', { name: '删除界面风格参考' }));
+    expect(screen.queryByLabelText('界面风格参考')).toBeNull();
+  });
+
   it('renders character spec fields and forwards updates', () => {
     const updateSpecFormValue = vi.fn();
     renderPanel({
diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index fcb12a296..237bac044 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -192,6 +192,59 @@ export function ImageCanvasSpecGenerationPanelView({
               removeLabel={`删除${referenceLabel}`}
             />
           ) : null}
+          {isUiDesignDialog
+            ? (dialog.generationReferences ?? []).map((item, index) => (
+                <ImageCanvasReferenceSlot
+                  key={item.id}
+                  tone="default"
+                  icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
+                  imageSrc={item.src}
+                  objectKey={item.objectKey}
+                  label={`参考图${index + 1}`}
+                  ariaLabel={item.label || `参考图${index + 1}`}
+                  title={item.label}
+                  disabled={isGenerating}
+                  onRemove={
+                    setGenerateDialog
+                      ? () =>
+                          setGenerateDialog((currentDialog) =>
+                            currentDialog?.mode === 'ui-design'
+                              ? {
+                                  ...currentDialog,
+                                  status:
+                                    currentDialog.status === 'failed'
+                                      ? 'idle'
+                                      : currentDialog.status,
+                                  errorMessage:
+                                    currentDialog.status === 'failed'
+                                      ? undefined
+                                      : currentDialog.errorMessage,
+                                  generationReferences: (
+                                    currentDialog.generationReferences ?? []
+                                  ).filter(
+                                    (referenceItem) =>
+                                      referenceItem.id !== item.id,
+                                  ),
+                                }
+                              : currentDialog,
+                          )
+                      : undefined
+                  }
+                  removeLabel={`删除${item.label || `参考图${index + 1}`}`}
+                />
+              ))
+            : null}
+          {isUiDesignDialog ? (
+            <ImageCanvasReferenceSlot
+              tone="default"
+              icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
+              label="参考图"
+              ariaLabel="上传UI设计参考图"
+              disabled={isGenerating}
+              isAdd
+              onClick={() => onRequestUpload('generation-reference')}
+            />
+          ) : null}
         </div>
         <div className="image-canvas-editor__spec-fields">
           {isUiDesignDialog ? (
diff --git a/src/components/image-editor/ImageCanvasStageInteractionModel.test.ts b/src/components/image-editor/ImageCanvasStageInteractionModel.test.ts
index 191c5f1c6..9d7098514 100644
--- a/src/components/image-editor/ImageCanvasStageInteractionModel.test.ts
+++ b/src/components/image-editor/ImageCanvasStageInteractionModel.test.ts
@@ -181,6 +181,58 @@ describe('ImageCanvasStageInteractionModel', () => {
     });
   });
 
+  it('keeps the existing mixed selection when dragging an already selected layer', () => {
+    const selectedGenerationId = getCanvasGenerationSelectionId('dialog-1');
+    const layers = [
+      createLayer({ id: 'a', x: 40, y: 50 }),
+      createLayer({ id: 'b', x: 120, y: 150 }),
+    ];
+    const generationDialogs: CanvasGenerationDialogState[] = [
+      {
+        id: 'dialog-1',
+        mode: 'generate',
+        prompt: '',
+        status: 'idle',
+        placeholder: {
+          x: 400,
+          y: 180,
+          width: 320,
+          height: 320,
+          originalWidth: 1024,
+          originalHeight: 1024,
+        },
+      },
+    ];
+
+    expect(
+      createLayerDragStart({
+        layer: layers[1]!,
+        layers,
+        generationDialogs,
+        selectedLayerIds: ['a', 'b', selectedGenerationId],
+        isMultiSelectGesture: false,
+        pointerId: 4,
+        pointer: { x: 300, y: 260 },
+        viewportScale: 1.25,
+      }),
+    ).toEqual(
+      expect.objectContaining({
+        selectedLayerIds: ['a', 'b', selectedGenerationId],
+        selectedLayerId: 'b',
+        dragState: expect.objectContaining({
+          layerId: 'b',
+          layerIds: ['a', 'b'],
+          generationDialogIds: ['dialog-1'],
+          startLayers: [
+            { id: 'a', x: 40, y: 50 },
+            { id: 'b', x: 120, y: 150 },
+          ],
+          startGenerationFrames: [{ id: 'dialog-1', x: 400, y: 180 }],
+        }),
+      }),
+    );
+  });
+
   it('closes canvas generation composers when clicking existing layers', () => {
     const generatedDialog: GenerateDialogState = {
       id: 'dialog-1',
@@ -365,4 +417,66 @@ describe('ImageCanvasStageInteractionModel', () => {
       },
     });
   });
+
+  it('keeps the existing mixed selection when dragging an already selected generation frame', () => {
+    const dialog: CanvasGenerationDialogState = {
+      id: 'dialog-1',
+      mode: 'generate',
+      prompt: '',
+      status: 'idle',
+      placeholder: {
+        x: 200,
+        y: 160,
+        width: 420,
+        height: 420,
+        originalWidth: 2048,
+        originalHeight: 2048,
+      },
+    };
+    const anotherDialog: CanvasGenerationDialogState = {
+      ...dialog,
+      id: 'dialog-2',
+      placeholder: {
+        ...dialog.placeholder!,
+        x: 680,
+        y: 160,
+      },
+    };
+    const layers = [createLayer({ id: 'layer-a', x: 40, y: 50 })];
+
+    expect(
+      createGenerationFrameSelectionStart({
+        dialog: anotherDialog,
+        layers,
+        generationDialogs: [dialog, anotherDialog],
+        selectedLayerIds: [
+          'layer-a',
+          getCanvasGenerationSelectionId('dialog-1'),
+          getCanvasGenerationSelectionId('dialog-2'),
+        ],
+        isMultiSelectGesture: false,
+        pointerId: 12,
+        pointer: { x: 360, y: 260 },
+        viewportScale: 1,
+      }),
+    ).toEqual(
+      expect.objectContaining({
+        selectedLayerIds: [
+          'layer-a',
+          getCanvasGenerationSelectionId('dialog-1'),
+          getCanvasGenerationSelectionId('dialog-2'),
+        ],
+        dragState: expect.objectContaining({
+          dialogId: 'dialog-2',
+          dialogIds: ['dialog-1', 'dialog-2'],
+          layerIds: ['layer-a'],
+          startFrames: [
+            { id: 'dialog-1', x: 200, y: 160 },
+            { id: 'dialog-2', x: 680, y: 160 },
+          ],
+          startLayers: [{ id: 'layer-a', x: 40, y: 50 }],
+        }),
+      }),
+    );
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 73d88f1aa..1953bc1aa 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -9,6 +9,7 @@ import type {
 
 import { ImageCanvasBottomToolbarView } from './ImageCanvasBottomToolbarView';
 import { ImageCanvasContextMenusView } from './ImageCanvasContextMenusView';
+import type { ExternalGenerationTaskRecord } from '../../../packages/shared/src/contracts/externalGeneration';
 import type {
   CanvasAssetKind,
   CanvasClipboard,
@@ -28,6 +29,7 @@ import type {
 import type { StageMinimapModel } from './ImageCanvasInteractionModel';
 import { ImageCanvasPanelDockView } from './ImageCanvasPanelDockView';
 import { ImageCanvasSelectedLayerToolbarView } from './ImageCanvasSelectedLayerToolbarView';
+import { ImageCanvasTaskSidebarView } from './ImageCanvasTaskSidebarView';
 import type {
   UiAssetExtractionState,
   UiAssetExtractionTool,
@@ -36,6 +38,7 @@ import { ImageCanvasUiAssetExtractionOverlayView } from './ImageCanvasUiAssetExt
 import { ImageCanvasWorldView } from './ImageCanvasWorldView';
 
 export type ImageCanvasStageViewProps = {
+  projectId?: string | null;
   canvasViewportRef: RefObject<HTMLDivElement | null>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
   musicToolWrapRef: RefObject<HTMLSpanElement | null>;
@@ -52,6 +55,8 @@ export type ImageCanvasStageViewProps = {
   hoveredLayerId: string | null;
   canvasMarquee: CanvasMarqueeState | null;
   canvasGenerationDialogs: CanvasGenerationDialogState[];
+  taskListRefreshKey: number;
+  isTaskSidebarOpen: boolean;
   generateDialog: GenerateDialogState | null;
   cropExpandPanel: CropExpandPanelState | null;
   cropExpandSourceLayer: CanvasLayer | null;
@@ -66,6 +71,7 @@ export type ImageCanvasStageViewProps = {
   canvasClipboard: CanvasClipboard | null;
   imageContextMenu: ImageContextMenuState | null;
   imageContextMenuLayer: CanvasLayer | null;
+  contextMenuLayer: CanvasLayer | null;
   contextShouldShowLayer: boolean;
   contextShouldUnlockLayer: boolean;
   canUndo: boolean;
@@ -108,6 +114,8 @@ export type ImageCanvasStageViewProps = {
     dialog: CanvasGenerationDialogState,
   ) => void;
   onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
+  onFocusExternalTask: (task: ExternalGenerationTaskRecord) => void;
+  onToggleTaskSidebar: () => void;
   onCropExpandHandlePointerDown: (
     event: ReactPointerEvent<HTMLButtonElement>,
     handle: CropExpandResizeHandle,
@@ -118,9 +126,12 @@ export type ImageCanvasStageViewProps = {
   onRemoveBackground: (layer: CanvasLayer) => void;
   onExtractUiDesignAssets: (layer: CanvasLayer) => void;
   onUiAssetExtractionToolChange: (tool: UiAssetExtractionTool | null) => void;
+  onUiAssetExtractionModelChange: (model: string) => void;
   onUiAssetExtractionPointerStart: (point: { x: number; y: number }) => void;
   onUiAssetExtractionPointerMove: (point: { x: number; y: number }) => void;
   onUiAssetExtractionPointerEnd: () => void;
+  onRequestUiAssetExtractionReferenceUpload: () => void;
+  onRemoveUiAssetExtractionReference: (referenceId: string) => void;
   onSubmitUiAssetExtraction: () => void;
   onQuickEditSelectionToolChange: (tool: UiAssetExtractionTool | null) => void;
   onQuickEditSelectionPointerStart: (point: { x: number; y: number }) => void;
@@ -137,7 +148,9 @@ export type ImageCanvasStageViewProps = {
   onToggleContextLayerVisibility: () => void;
   onToggleContextLayerLock: () => void;
   onFlipContextLayers: (axis: 'x' | 'y') => void;
-  onExportContextLayer: () => void;
+  onExportContextLayer: (options?: {
+    mode?: 'spine-json' | 'sequence-with-preview';
+  }) => void;
   onDeleteContextLayers: () => void;
   onDeleteLayerById: (layerId: string | null) => void;
   onCloseContextMenu: () => void;
@@ -164,6 +177,7 @@ export type ImageCanvasStageViewProps = {
 };
 
 export function ImageCanvasStageView({
+  projectId,
   canvasViewportRef,
   specToolWrapRef,
   musicToolWrapRef,
@@ -180,6 +194,8 @@ export function ImageCanvasStageView({
   hoveredLayerId,
   canvasMarquee,
   canvasGenerationDialogs,
+  taskListRefreshKey,
+  isTaskSidebarOpen,
   generateDialog,
   cropExpandPanel,
   cropExpandSourceLayer,
@@ -194,6 +210,7 @@ export function ImageCanvasStageView({
   canvasClipboard,
   imageContextMenu,
   imageContextMenuLayer,
+  contextMenuLayer,
   contextShouldShowLayer,
   contextShouldUnlockLayer,
   canUndo,
@@ -221,6 +238,8 @@ export function ImageCanvasStageView({
   onUpdateLayerAssetKind,
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
+  onFocusExternalTask,
+  onToggleTaskSidebar,
   onCropExpandHandlePointerDown,
   onOpenQuickEditPanel,
   onOpenRedrawPanel,
@@ -228,9 +247,12 @@ export function ImageCanvasStageView({
   onRemoveBackground,
   onExtractUiDesignAssets,
   onUiAssetExtractionToolChange,
+  onUiAssetExtractionModelChange,
   onUiAssetExtractionPointerStart,
   onUiAssetExtractionPointerMove,
   onUiAssetExtractionPointerEnd,
+  onRequestUiAssetExtractionReferenceUpload,
+  onRemoveUiAssetExtractionReference,
   onSubmitUiAssetExtraction,
   onQuickEditSelectionToolChange,
   onQuickEditSelectionPointerStart,
@@ -341,6 +363,9 @@ export function ImageCanvasStageView({
         onPointerStart={onUiAssetExtractionPointerStart}
         onPointerMove={onUiAssetExtractionPointerMove}
         onPointerEnd={onUiAssetExtractionPointerEnd}
+        onModelChange={onUiAssetExtractionModelChange}
+        onRequestUpload={onRequestUiAssetExtractionReferenceUpload}
+        onRemoveReference={onRemoveUiAssetExtractionReference}
         onSubmit={onSubmitUiAssetExtraction}
       />
 
@@ -362,6 +387,7 @@ export function ImageCanvasStageView({
         canvasClipboard={canvasClipboard}
         imageContextMenu={imageContextMenu}
         imageContextMenuLayer={imageContextMenuLayer}
+        contextMenuLayer={contextMenuLayer}
         contextShouldShowLayer={contextShouldShowLayer}
         contextShouldUnlockLayer={contextShouldUnlockLayer}
         onPasteCanvasClipboard={onPasteCanvasClipboard}
@@ -410,6 +436,14 @@ export function ImageCanvasStageView({
         onMinimapPointerDown={onMinimapPointerDown}
       />
 
+      <ImageCanvasTaskSidebarView
+        projectId={projectId}
+        refreshKey={taskListRefreshKey}
+        open={isTaskSidebarOpen}
+        onToggleOpen={onToggleTaskSidebar}
+        onFocusExternalTask={onFocusExternalTask}
+      />
+
       <ImageCanvasBottomToolbarView
         specToolWrapRef={specToolWrapRef}
         musicToolWrapRef={musicToolWrapRef}
diff --git a/src/components/image-editor/ImageCanvasTaskSidebarView.test.tsx b/src/components/image-editor/ImageCanvasTaskSidebarView.test.tsx
new file mode 100644
index 000000000..f9912744b
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasTaskSidebarView.test.tsx
@@ -0,0 +1,423 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { ExternalGenerationTaskRecord } from '../../../packages/shared/src/contracts/externalGeneration';
+import { listExternalGenerationTasks } from '../../services/external-generation';
+import { ImageCanvasTaskSidebarView } from './ImageCanvasTaskSidebarView';
+
+vi.mock('../../services/external-generation', () => ({
+  listExternalGenerationTasks: vi.fn().mockResolvedValue({
+    overview: {
+      pendingCount: 0,
+      runningCount: 0,
+      unacknowledgedTerminalCount: 0,
+      updatedAtMicros: 1,
+    },
+    tasks: [],
+  }),
+}));
+
+const listExternalGenerationTasksMock = vi.mocked(listExternalGenerationTasks);
+
+beforeEach(() => {
+  listExternalGenerationTasksMock.mockClear();
+  listExternalGenerationTasksMock.mockResolvedValue({
+    overview: {
+      pendingCount: 0,
+      runningCount: 0,
+      unacknowledgedTerminalCount: 0,
+      updatedAtMicros: 1,
+    },
+    tasks: [],
+  });
+});
+
+function createExternalTask(
+  overrides: Partial<ExternalGenerationTaskRecord> = {},
+): ExternalGenerationTaskRecord {
+  const now = new Date().toISOString();
+  return {
+    jobId: overrides.jobId ?? 'extgen-1',
+    jobKind: overrides.jobKind ?? 'editor_image_generation',
+    sourceModule: overrides.sourceModule ?? 'editor-canvas',
+    sourceEntityId: overrides.sourceEntityId ?? 'project-1',
+    requestLabel: overrides.requestLabel ?? '图片画布生成图片',
+    requestPrompt: overrides.requestPrompt ?? '发光猫咪主视觉',
+    status: overrides.status ?? 'running',
+    phaseLabel: overrides.phaseLabel ?? '生成图片',
+    phaseDetail: overrides.phaseDetail ?? '正在生成第 2/4 段。',
+    progress: overrides.progress ?? 35,
+    error: overrides.error ?? null,
+    priceMudPoints: overrides.priceMudPoints ?? 1,
+    refundLedgerId: overrides.refundLedgerId ?? null,
+    notificationAcknowledgedAt: overrides.notificationAcknowledgedAt ?? null,
+    createdAt: overrides.createdAt ?? now,
+    startedAt: overrides.startedAt ?? now,
+    completedAt: overrides.completedAt ?? null,
+    updatedAt: overrides.updatedAt ?? now,
+    updatedAtMicros: overrides.updatedAtMicros ?? 1,
+  };
+}
+
+describe('ImageCanvasTaskSidebarView', () => {
+  it('groups tasks by tabs and keeps running tasks before queued tasks', async () => {
+    const focusExternalTask = vi.fn();
+    const parentWheel = vi.fn();
+    const completedAt = new Date(Date.now() - 1000).toISOString();
+    listExternalGenerationTasksMock.mockImplementation(
+      (options: Parameters<typeof listExternalGenerationTasks>[0] = {}) =>
+        Promise.resolve({
+          overview: {
+            pendingCount: 1,
+            runningCount: 1,
+            unacknowledgedTerminalCount: 1,
+            updatedAtMicros: 1,
+          },
+          tasks: options.statuses?.includes('running')
+            ? [
+                createExternalTask({
+                  jobId: 'queued-task',
+                  requestLabel: '图标素材',
+                  status: 'queued',
+                }),
+                createExternalTask({
+                  jobId: 'running-task',
+                  requestLabel: '角色图片',
+                  status: 'running',
+                  startedAt: new Date(Date.now() - 3000).toISOString(),
+                }),
+              ]
+            : [
+                createExternalTask({
+                  jobId: 'done-task',
+                  requestLabel: '视频生成',
+                  requestPrompt: '生成一段开场动画',
+                  status: 'completed',
+                  startedAt: new Date(Date.now() - 4000).toISOString(),
+                  completedAt,
+                  updatedAt: completedAt,
+                }),
+              ],
+        }),
+    );
+
+    render(
+      <div onWheel={parentWheel}>
+        <ImageCanvasTaskSidebarView
+          projectId="project-1"
+          open
+          onToggleOpen={vi.fn()}
+          onFocusExternalTask={focusExternalTask}
+        />
+      </div>,
+    );
+
+    await waitFor(() => {
+      expect(listExternalGenerationTasksMock).toHaveBeenCalledTimes(2);
+    });
+    expect(listExternalGenerationTasksMock).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        includeAcknowledgedTerminal: false,
+        limit: 100,
+        statuses: ['running', 'queued'],
+      }),
+    );
+    expect(listExternalGenerationTasksMock).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        includeAcknowledgedTerminal: true,
+        limit: 20,
+        statuses: ['completed', 'failed'],
+      }),
+    );
+
+    const activeTitles = screen
+      .getAllByRole('button')
+      .map((button) => button.textContent ?? '')
+      .filter((text) => text.includes('角色图片') || text.includes('图标素材'));
+    expect(activeTitles[0]).toContain('角色图片');
+    expect(activeTitles[1]).toContain('图标素材');
+    await waitFor(() =>
+      expect(
+        screen
+          .getByRole('tab', { name: /排队\/生成中/u })
+          .getAttribute('aria-selected'),
+      ).toBe('true'),
+    );
+
+    const completedTab = screen.getByRole('tab', { name: /已完成/u });
+    fireEvent.click(completedTab);
+    expect(await screen.findByText('视频生成')).toBeTruthy();
+    expect(screen.getByText(/生成一段开场动画/u)).toBeTruthy();
+    expect(screen.queryByText(/完成于/u)).not.toBeNull();
+    expect(screen.queryByText(/生成完成/u)).toBeNull();
+
+    fireEvent.wheel(screen.getByLabelText('画布任务列表'), { deltaY: 120 });
+    expect(parentWheel).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByText('视频生成'));
+    expect(focusExternalTask).toHaveBeenCalledWith(
+      expect.objectContaining({ jobId: 'done-task' }),
+    );
+    expect(completedTab.getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('shows only current project external tasks with backend timing and phase detail', async () => {
+    const startedAt = new Date(Date.now() - 65_000).toISOString();
+    const completedAt = new Date(Date.now() - 20_000).toISOString();
+    listExternalGenerationTasksMock.mockImplementation(
+      (options: Parameters<typeof listExternalGenerationTasks>[0] = {}) =>
+        Promise.resolve({
+          overview: {
+            pendingCount: 0,
+            runningCount: 1,
+            unacknowledgedTerminalCount: 1,
+            updatedAtMicros: 1,
+          },
+          tasks: options.statuses?.includes('running')
+            ? [
+                createExternalTask({
+                  jobId: 'active-current',
+                  startedAt,
+                }),
+                createExternalTask({
+                  jobId: 'active-other-project',
+                  sourceEntityId: 'project-other',
+                  requestPrompt: '不该显示的外部项目任务',
+                }),
+              ]
+            : [
+                createExternalTask({
+                  jobId: 'done-current',
+                  status: 'completed',
+                  requestPrompt: '已完成提示词',
+                  startedAt: new Date(Date.now() - 90_000).toISOString(),
+                  completedAt,
+                  updatedAt: completedAt,
+                  progress: 100,
+                  phaseDetail: '生成已完成。',
+                }),
+                createExternalTask({
+                  jobId: 'done-other-project',
+                  sourceEntityId: 'project-other',
+                  status: 'completed',
+                  requestPrompt: '另一个项目的已完成任务',
+                  completedAt,
+                }),
+              ],
+        }),
+    );
+
+    render(
+      <ImageCanvasTaskSidebarView
+        projectId="project-1"
+        open
+        onToggleOpen={vi.fn()}
+        onFocusExternalTask={vi.fn()}
+      />,
+    );
+
+    expect(await screen.findByText('生成图片')).toBeTruthy();
+    expect(screen.getByText(/总进度 35% · 正在生成第 2\/4 段。/u)).toBeTruthy();
+    expect(screen.getByText(/已用时 1分/u)).toBeTruthy();
+    expect(screen.queryByText(/不该显示的外部项目任务/u)).toBeNull();
+    await waitFor(() =>
+      expect(
+        screen
+          .getByRole('tab', { name: /排队\/生成中/u })
+          .getAttribute('aria-selected'),
+      ).toBe('true'),
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: /已完成/u }));
+    expect(await screen.findByText(/已完成提示词/u)).toBeTruthy();
+    expect(screen.getByText(/完成于/u)).toBeTruthy();
+    expect(screen.queryByText(/另一个项目的已完成任务/u)).toBeNull();
+  });
+
+  it('keeps the empty active tab selected after manual tab click', async () => {
+    const completedAt = new Date(Date.now() - 20_000).toISOString();
+    listExternalGenerationTasksMock.mockImplementation(
+      (options: Parameters<typeof listExternalGenerationTasks>[0] = {}) =>
+        Promise.resolve({
+          overview: {
+            pendingCount: 0,
+            runningCount: 0,
+            unacknowledgedTerminalCount: 1,
+            updatedAtMicros: 1,
+          },
+          tasks: options.statuses?.includes('running')
+            ? []
+            : [
+                createExternalTask({
+                  jobId: 'done-current',
+                  status: 'completed',
+                  requestPrompt: '已完成提示词',
+                  completedAt,
+                  updatedAt: completedAt,
+                }),
+              ],
+        }),
+    );
+
+    render(
+      <ImageCanvasTaskSidebarView
+        projectId="project-1"
+        open
+        onToggleOpen={vi.fn()}
+        onFocusExternalTask={vi.fn()}
+      />,
+    );
+
+    await screen.findByText('暂无任务');
+    const activeTab = screen.getByRole('tab', { name: /排队\/生成中/u });
+    const completedTab = screen.getByRole('tab', { name: /已完成/u });
+
+    fireEvent.click(completedTab);
+    expect(await screen.findByText(/已完成提示词/u)).toBeTruthy();
+
+    fireEvent.click(activeTab);
+
+    expect(activeTab.getAttribute('aria-selected')).toBe('true');
+    expect(screen.getByText('暂无任务')).toBeTruthy();
+    expect(screen.queryByText(/已完成提示词/u)).toBeNull();
+  });
+
+  it('refreshes external tasks when queued generation bumps the refresh key', async () => {
+    let activeTasks: ExternalGenerationTaskRecord[] = [];
+    listExternalGenerationTasksMock.mockImplementation(
+      (options: Parameters<typeof listExternalGenerationTasks>[0] = {}) =>
+        Promise.resolve({
+          overview: {
+            pendingCount: activeTasks.length,
+            runningCount: 0,
+            unacknowledgedTerminalCount: 0,
+            updatedAtMicros: 1,
+          },
+          tasks: options.statuses?.includes('running') ? activeTasks : [],
+        }),
+    );
+
+    const { rerender } = render(
+      <ImageCanvasTaskSidebarView
+        projectId="project-1"
+        refreshKey={0}
+        open
+        onToggleOpen={vi.fn()}
+        onFocusExternalTask={vi.fn()}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(listExternalGenerationTasksMock).toHaveBeenCalledTimes(2);
+    });
+    expect(screen.getByText('暂无任务')).toBeTruthy();
+
+    activeTasks = [
+      createExternalTask({
+        jobId: 'queued-after-submit',
+        requestLabel: '角色生成',
+        status: 'queued',
+      }),
+    ];
+    rerender(
+      <ImageCanvasTaskSidebarView
+        projectId="project-1"
+        refreshKey={1}
+        open
+        onToggleOpen={vi.fn()}
+        onFocusExternalTask={vi.fn()}
+      />,
+    );
+
+    expect(await screen.findByText('角色生成')).toBeTruthy();
+    expect(listExternalGenerationTasksMock).toHaveBeenCalledTimes(4);
+  });
+
+  it('loads more completed tasks while scrolling and keeps the request capped', async () => {
+    const completedTasks = Array.from({ length: 120 }, (_, index) => {
+      const completedAt = new Date(Date.now() - index * 1000).toISOString();
+      return createExternalTask({
+        jobId: `done-${index + 1}`,
+        requestLabel: `已完成任务 ${index + 1}`,
+        status: 'completed',
+        requestPrompt: `提示词 ${index + 1}`,
+        completedAt,
+        updatedAt: completedAt,
+      });
+    });
+    listExternalGenerationTasksMock.mockImplementation(
+      (options: Parameters<typeof listExternalGenerationTasks>[0] = {}) =>
+        Promise.resolve({
+          overview: {
+            pendingCount: 0,
+            runningCount: 0,
+            unacknowledgedTerminalCount: completedTasks.length,
+            updatedAtMicros: 1,
+          },
+          tasks: options.statuses?.includes('running')
+            ? []
+            : completedTasks.slice(0, options.limit ?? 20),
+        }),
+    );
+
+    render(
+      <ImageCanvasTaskSidebarView
+        projectId="project-1"
+        open
+        onToggleOpen={vi.fn()}
+        onFocusExternalTask={vi.fn()}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(listExternalGenerationTasksMock).toHaveBeenCalledTimes(2);
+    });
+    expect(listExternalGenerationTasksMock).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        includeAcknowledgedTerminal: true,
+        limit: 20,
+        statuses: ['completed', 'failed'],
+      }),
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: /已完成/u }));
+    expect(await screen.findByText('已完成任务 20')).toBeTruthy();
+    expect(screen.queryByText('已完成任务 21')).toBeNull();
+
+    const list = document.querySelector(
+      '.image-canvas-editor__task-sidebar-list',
+    );
+    expect(list).not.toBeNull();
+    Object.defineProperty(list, 'scrollHeight', {
+      configurable: true,
+      value: 1000,
+    });
+    Object.defineProperty(list, 'clientHeight', {
+      configurable: true,
+      value: 200,
+    });
+    Object.defineProperty(list, 'scrollTop', {
+      configurable: true,
+      value: 800,
+    });
+    fireEvent.scroll(list!);
+
+    await waitFor(() => {
+      expect(listExternalGenerationTasksMock).toHaveBeenCalledTimes(4);
+    });
+    expect(listExternalGenerationTasksMock).toHaveBeenNthCalledWith(
+      4,
+      expect.objectContaining({
+        includeAcknowledgedTerminal: true,
+        limit: 40,
+        statuses: ['completed', 'failed'],
+      }),
+    );
+    expect(await screen.findByText('已完成任务 40')).toBeTruthy();
+  });
+});
diff --git a/src/components/image-editor/ImageCanvasTaskSidebarView.tsx b/src/components/image-editor/ImageCanvasTaskSidebarView.tsx
new file mode 100644
index 000000000..f9057fc96
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasTaskSidebarView.tsx
@@ -0,0 +1,691 @@
+import {
+  CheckCircle2,
+  Clock3,
+  ListChecks,
+  Loader2,
+  XCircle,
+} from 'lucide-react';
+import {
+  type WheelEvent as ReactWheelEvent,
+  type UIEvent as ReactUIEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import type { ExternalGenerationTaskRecord } from '../../../packages/shared/src/contracts/externalGeneration';
+import { listExternalGenerationTasks } from '../../services/external-generation';
+import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import type { CanvasTaskStatus } from './ImageCanvasEditorTypes';
+
+const COMPLETED_TASK_LIST_LIMIT = 20;
+const COMPLETED_TASK_LIST_MAX_LIMIT = 100;
+const ACTIVE_TASK_LIST_LIMIT = 100;
+const ACTIVE_TASK_POLL_INTERVAL_MS = 4000;
+
+type TaskSidebarTab = 'active' | 'completed';
+
+type TaskSidebarItem = {
+  id: string;
+  title: string;
+  detail: string;
+  progressDetail?: string;
+  status: CanvasTaskStatus;
+  startedAt?: number;
+  finishedAt?: number;
+  elapsedMs?: number;
+  errorMessage?: string;
+  onClick?: () => void;
+  sortTime: number;
+};
+
+type ImageCanvasTaskSidebarViewProps = {
+  projectId?: string | null;
+  refreshKey?: number;
+  open: boolean;
+  onToggleOpen: () => void;
+  onFocusExternalTask: (task: ExternalGenerationTaskRecord) => void;
+};
+
+function parseTaskTimeMs(value?: string | null) {
+  if (!value) {
+    return undefined;
+  }
+  const timestamp = Date.parse(value);
+  return Number.isFinite(timestamp) ? timestamp : undefined;
+}
+
+function formatElapsedMs(elapsedMs?: number) {
+  if (typeof elapsedMs !== 'number' || !Number.isFinite(elapsedMs)) {
+    return null;
+  }
+  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
+  if (totalSeconds >= 60) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return seconds > 0 ? `${minutes}分${seconds}秒` : `${minutes}分`;
+  }
+  return `${Math.max(1, totalSeconds)}秒`;
+}
+
+function formatTaskTimeMs(timestampMs?: number) {
+  if (typeof timestampMs !== 'number' || !Number.isFinite(timestampMs)) {
+    return null;
+  }
+  const date = new Date(timestampMs);
+  const pad = (value: number) => String(value).padStart(2, '0');
+  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(
+    date.getHours(),
+  )}:${pad(date.getMinutes())}`;
+}
+
+function normalizeTaskPrompt(value?: string | null) {
+  const prompt = value?.trim();
+  return prompt || null;
+}
+
+function externalTaskDetail(
+  task: ExternalGenerationTaskRecord,
+  status: CanvasTaskStatus,
+) {
+  if (status === 'failed') {
+    return task.error?.trim() || task.phaseDetail || task.updatedAt;
+  }
+  if (status === 'done') {
+    return (
+      normalizeTaskPrompt(task.requestPrompt) ||
+      task.requestLabel.trim() ||
+      task.jobKind
+    );
+  }
+  const phaseLabel = task.phaseLabel.trim();
+  const phaseDetail = task.phaseDetail.trim();
+  return phaseLabel || phaseDetail || task.requestLabel.trim() || task.jobKind;
+}
+
+function externalTaskProgressDetail(
+  task: ExternalGenerationTaskRecord,
+  status: CanvasTaskStatus,
+) {
+  if (!isActiveTaskStatus(status)) {
+    return null;
+  }
+  const values = [
+    Number.isFinite(task.progress) && task.progress > 0
+      ? `总进度 ${Math.min(100, Math.max(0, Math.round(task.progress)))}%`
+      : null,
+    task.phaseDetail.trim(),
+  ].filter((value): value is string => Boolean(value));
+  return values.length > 0 ? values.join(' · ') : null;
+}
+
+function stopTaskSidebarWheel(event: ReactWheelEvent<HTMLElement>) {
+  event.stopPropagation();
+}
+
+function canvasTaskStatusFromExternalTask(
+  status: ExternalGenerationTaskRecord['status'],
+): CanvasTaskStatus {
+  if (status === 'running') {
+    return 'running';
+  }
+  if (status === 'queued') {
+    return 'pending';
+  }
+  if (status === 'failed') {
+    return 'failed';
+  }
+  return 'done';
+}
+
+function statusLabel(status: CanvasTaskStatus) {
+  if (status === 'pending') {
+    return '排队中';
+  }
+  if (status === 'running') {
+    return '进行中';
+  }
+  if (status === 'failed') {
+    return '失败';
+  }
+  return '完成';
+}
+
+function statusIcon(status: CanvasTaskStatus) {
+  if (status === 'pending') {
+    return <Clock3 className="h-3.5 w-3.5" aria-hidden="true" />;
+  }
+  if (status === 'running') {
+    return <Loader2 className="h-3.5 w-3.5" aria-hidden="true" />;
+  }
+  if (status === 'failed') {
+    return <XCircle className="h-3.5 w-3.5" aria-hidden="true" />;
+  }
+  return <CheckCircle2 className="h-3.5 w-3.5" aria-hidden="true" />;
+}
+
+function isActiveTaskStatus(status: CanvasTaskStatus) {
+  return status === 'running' || status === 'pending';
+}
+
+function activeTaskSortPriority(status: CanvasTaskStatus) {
+  if (status === 'running') {
+    return 0;
+  }
+  if (status === 'pending') {
+    return 1;
+  }
+  return 2;
+}
+
+function mergeExternalTasks(
+  currentTasks: ExternalGenerationTaskRecord[],
+  nextTasks: ExternalGenerationTaskRecord[],
+) {
+  const taskById = new Map(currentTasks.map((task) => [task.jobId, task]));
+  for (const task of nextTasks) {
+    taskById.set(task.jobId, task);
+  }
+  return Array.from(taskById.values());
+}
+
+function isActiveExternalTask(task: ExternalGenerationTaskRecord) {
+  return task.status === 'queued' || task.status === 'running';
+}
+
+function isTerminalExternalTask(task: ExternalGenerationTaskRecord) {
+  return task.status === 'completed' || task.status === 'failed';
+}
+
+function isEditorCanvasTaskForProject(
+  task: ExternalGenerationTaskRecord,
+  projectId?: string | null,
+) {
+  const normalizedProjectId = projectId?.trim();
+  return (
+    task.sourceModule === 'editor-canvas' &&
+    Boolean(normalizedProjectId) &&
+    task.sourceEntityId.trim() === normalizedProjectId
+  );
+}
+
+function mergeExternalTaskRefresh(
+  currentTasks: ExternalGenerationTaskRecord[],
+  refreshedTasks: ExternalGenerationTaskRecord[],
+) {
+  const refreshedIds = new Set(refreshedTasks.map((task) => task.jobId));
+  return mergeExternalTasks(
+    currentTasks.filter(
+      (task) => !isActiveExternalTask(task) && !refreshedIds.has(task.jobId),
+    ),
+    refreshedTasks,
+  );
+}
+
+function trimStoredExternalTasks(
+  tasks: ExternalGenerationTaskRecord[],
+  completedLimit: number,
+) {
+  return mergeExternalTasks(
+    tasks.filter(isActiveExternalTask),
+    tasks
+      .filter(isTerminalExternalTask)
+      .sort(
+        (left, right) =>
+          (parseTaskTimeMs(right.completedAt) ??
+            parseTaskTimeMs(right.updatedAt) ??
+            0) -
+          (parseTaskTimeMs(left.completedAt) ??
+            parseTaskTimeMs(left.updatedAt) ??
+            0),
+      )
+      .slice(0, completedLimit),
+  );
+}
+
+export function ImageCanvasTaskSidebarView({
+  projectId,
+  refreshKey = 0,
+  open,
+  onToggleOpen,
+  onFocusExternalTask,
+}: ImageCanvasTaskSidebarViewProps) {
+  const normalizedProjectId = projectId?.trim() ?? '';
+  const [activeTab, setActiveTab] = useState<TaskSidebarTab>('active');
+  const [now, setNow] = useState(() => Date.now());
+  const [externalTasks, setExternalTasks] = useState<
+    ExternalGenerationTaskRecord[]
+  >([]);
+  const [completedListState, setCompletedListState] = useState(() => ({
+    limit: COMPLETED_TASK_LIST_LIMIT,
+    projectId: normalizedProjectId,
+  }));
+  const completedListLimit =
+    completedListState.projectId === normalizedProjectId
+      ? completedListState.limit
+      : COMPLETED_TASK_LIST_LIMIT;
+  const previousActiveItemCountRef = useRef(0);
+  const filterVisibleExternalTasks = useCallback(
+    (tasks: ExternalGenerationTaskRecord[]) =>
+      tasks.filter((task) =>
+        isEditorCanvasTaskForProject(task, normalizedProjectId),
+      ),
+    [normalizedProjectId],
+  );
+
+  useEffect(() => {
+    setCompletedListState((state) =>
+      state.projectId === normalizedProjectId
+        ? state
+        : { limit: COMPLETED_TASK_LIST_LIMIT, projectId: normalizedProjectId },
+    );
+  }, [normalizedProjectId]);
+
+  useEffect(() => {
+    let disposed = false;
+    const controller = new AbortController();
+    Promise.all([
+      listExternalGenerationTasks({
+        limit: ACTIVE_TASK_LIST_LIMIT,
+        includeAcknowledgedTerminal: false,
+        statuses: ['running', 'queued'],
+        signal: controller.signal,
+      }),
+      listExternalGenerationTasks({
+        limit: completedListLimit,
+        includeAcknowledgedTerminal: true,
+        statuses: ['completed', 'failed'],
+        signal: controller.signal,
+      }),
+    ])
+      .then(([activeResponse, completedResponse]) => {
+        if (disposed) {
+          return;
+        }
+        setExternalTasks(
+          trimStoredExternalTasks(
+            mergeExternalTasks(
+              filterVisibleExternalTasks(activeResponse.tasks),
+              filterVisibleExternalTasks(completedResponse.tasks),
+            ),
+            completedListLimit,
+          ),
+        );
+      })
+      .catch(() => {
+        if (!disposed) {
+          setExternalTasks([]);
+        }
+      });
+    return () => {
+      disposed = true;
+      controller.abort();
+    };
+  }, [completedListLimit, filterVisibleExternalTasks, refreshKey]);
+
+  const activeExternalTaskIds = useMemo(
+    () =>
+      externalTasks
+        .filter((task) => task.status === 'queued' || task.status === 'running')
+        .map((task) => task.jobId),
+    [externalTasks],
+  );
+  const activeExternalTaskKey = activeExternalTaskIds.join('|');
+
+  useEffect(() => {
+    if (!activeExternalTaskIds.length) {
+      return undefined;
+    }
+    let disposed = false;
+    let timerId: number | null = null;
+
+    const refreshActiveTasks = () => {
+      const controller = new AbortController();
+      Promise.all([
+        listExternalGenerationTasks({
+          limit: ACTIVE_TASK_LIST_LIMIT,
+          includeAcknowledgedTerminal: false,
+          statuses: ['running', 'queued'],
+          signal: controller.signal,
+        }),
+        listExternalGenerationTasks({
+          limit: completedListLimit,
+          includeAcknowledgedTerminal: true,
+          statuses: ['completed', 'failed'],
+          signal: controller.signal,
+        }),
+      ])
+        .then(([activeResponse, completedResponse]) => {
+          if (disposed) {
+            return;
+          }
+          const refreshedTasks = mergeExternalTasks(
+            filterVisibleExternalTasks(activeResponse.tasks),
+            filterVisibleExternalTasks(completedResponse.tasks),
+          );
+          setExternalTasks((currentTasks) =>
+            trimStoredExternalTasks(
+              mergeExternalTaskRefresh(currentTasks, refreshedTasks),
+              completedListLimit,
+            ),
+          );
+        })
+        .catch(() => {
+          // 下轮继续刷新；单次列表读取失败不应该冻结正在生成的任务状态。
+        })
+        .finally(() => {
+          if (disposed) {
+            return;
+          }
+          timerId = window.setTimeout(
+            refreshActiveTasks,
+            ACTIVE_TASK_POLL_INTERVAL_MS,
+          );
+        });
+    };
+
+    timerId = window.setTimeout(
+      refreshActiveTasks,
+      ACTIVE_TASK_POLL_INTERVAL_MS,
+    );
+    return () => {
+      disposed = true;
+      if (timerId !== null) {
+        window.clearTimeout(timerId);
+      }
+    };
+  }, [
+    activeExternalTaskIds,
+    activeExternalTaskKey,
+    completedListLimit,
+    filterVisibleExternalTasks,
+  ]);
+
+  const handleTaskListScroll = useCallback(
+    (event: ReactUIEvent<HTMLDivElement>) => {
+      if (activeTab !== 'completed') {
+        return;
+      }
+      const element = event.currentTarget;
+      const remaining =
+        element.scrollHeight - element.scrollTop - element.clientHeight;
+      if (remaining > 24) {
+        return;
+      }
+      setCompletedListState((state) => {
+        const limit =
+          state.projectId === normalizedProjectId
+            ? state.limit
+            : COMPLETED_TASK_LIST_LIMIT;
+        return {
+          limit: Math.min(
+            COMPLETED_TASK_LIST_MAX_LIMIT,
+            limit + COMPLETED_TASK_LIST_LIMIT,
+          ),
+          projectId: normalizedProjectId,
+        };
+      });
+    },
+    [activeTab, normalizedProjectId],
+  );
+
+  useEffect(() => {
+    const hasRunningTask = externalTasks.some(
+      (task) => task.status === 'running',
+    );
+    if (!hasRunningTask) {
+      return undefined;
+    }
+    const timerId = window.setInterval(() => {
+      setNow(Date.now());
+    }, 1000);
+    return () => window.clearInterval(timerId);
+  }, [externalTasks]);
+
+  const items = useMemo<TaskSidebarItem[]>(() => {
+    const externalVisibleTasks = mergeExternalTasks(
+      externalTasks.filter(
+        (task) => task.status === 'queued' || task.status === 'running',
+      ),
+      externalTasks
+        .filter(isTerminalExternalTask)
+        .sort(
+          (left, right) =>
+            (parseTaskTimeMs(right.completedAt) ??
+              parseTaskTimeMs(right.updatedAt) ??
+              0) -
+            (parseTaskTimeMs(left.completedAt) ??
+              parseTaskTimeMs(left.updatedAt) ??
+              0),
+        )
+        .slice(0, completedListLimit),
+    );
+    const externalItems = externalVisibleTasks.map<TaskSidebarItem>((task) => {
+      const status = canvasTaskStatusFromExternalTask(task.status);
+      const startedAt =
+        parseTaskTimeMs(task.startedAt) ?? parseTaskTimeMs(task.createdAt);
+      const finishedAt =
+        parseTaskTimeMs(task.completedAt) ?? parseTaskTimeMs(task.updatedAt);
+      return {
+        id: `external-${task.jobId}`,
+        title: task.requestLabel.trim() || task.jobKind,
+        detail: externalTaskDetail(task, status),
+        progressDetail: externalTaskProgressDetail(task, status) ?? undefined,
+        status,
+        startedAt,
+        finishedAt,
+        elapsedMs:
+          status === 'running' && startedAt
+            ? now - startedAt
+            : startedAt && finishedAt
+              ? finishedAt - startedAt
+              : undefined,
+        errorMessage: task.error ?? undefined,
+        onClick: () => onFocusExternalTask(task),
+        sortTime:
+          finishedAt ??
+          startedAt ??
+          parseTaskTimeMs(task.createdAt) ??
+          parseTaskTimeMs(task.updatedAt) ??
+          0,
+      };
+    });
+    return externalItems;
+  }, [completedListLimit, externalTasks, now, onFocusExternalTask]);
+
+  const activeItems = useMemo(
+    () =>
+      items
+        .filter((item) => isActiveTaskStatus(item.status))
+        .sort(
+          (left, right) =>
+            activeTaskSortPriority(left.status) -
+              activeTaskSortPriority(right.status) ||
+            right.sortTime - left.sortTime ||
+            left.id.localeCompare(right.id),
+        ),
+    [items],
+  );
+  const completedItems = useMemo(
+    () =>
+      items
+        .filter((item) => !isActiveTaskStatus(item.status))
+        .sort(
+          (left, right) =>
+            right.sortTime - left.sortTime || left.id.localeCompare(right.id),
+        )
+        .slice(0, COMPLETED_TASK_LIST_MAX_LIMIT),
+    [items],
+  );
+
+  useEffect(() => {
+    const previousActiveItemCount = previousActiveItemCountRef.current;
+    if (activeItems.length > previousActiveItemCount) {
+      setActiveTab('active');
+    }
+    previousActiveItemCountRef.current = activeItems.length;
+  }, [activeItems.length]);
+
+  const visibleItems = activeTab === 'active' ? activeItems : completedItems;
+
+  if (!open && items.length === 0) {
+    return (
+      <div className="image-canvas-editor__task-sidebar image-canvas-editor__task-sidebar--closed">
+        <EditorIconButton
+          className="image-canvas-editor__task-sidebar-toggle"
+          label="任务列表"
+          title="任务列表"
+          icon={ListChecks}
+          expanded={false}
+          onClick={onToggleOpen}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <aside
+      className={`image-canvas-editor__task-sidebar ${open ? 'image-canvas-editor__task-sidebar--open' : 'image-canvas-editor__task-sidebar--closed'}`}
+      aria-label="画布任务列表"
+      onWheel={stopTaskSidebarWheel}
+      onWheelCapture={stopTaskSidebarWheel}
+    >
+      <EditorIconButton
+        className="image-canvas-editor__task-sidebar-toggle"
+        label="任务列表"
+        title="任务列表"
+        icon={ListChecks}
+        expanded={open}
+        onClick={onToggleOpen}
+      />
+      {open ? (
+        <div className="image-canvas-editor__task-sidebar-panel">
+          <div className="image-canvas-editor__task-sidebar-header">
+            <strong>任务列表</strong>
+            <span>{items.length}</span>
+          </div>
+          <div
+            className="image-canvas-editor__task-sidebar-tabs"
+            role="tablist"
+          >
+            <button
+              type="button"
+              role="tab"
+              aria-selected={activeTab === 'active'}
+              className={
+                activeTab === 'active'
+                  ? 'image-canvas-editor__task-sidebar-tab image-canvas-editor__task-sidebar-tab--active'
+                  : 'image-canvas-editor__task-sidebar-tab'
+              }
+              onClick={() => setActiveTab('active')}
+            >
+              排队/生成中
+              <span>{activeItems.length}</span>
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={activeTab === 'completed'}
+              className={
+                activeTab === 'completed'
+                  ? 'image-canvas-editor__task-sidebar-tab image-canvas-editor__task-sidebar-tab--active'
+                  : 'image-canvas-editor__task-sidebar-tab'
+              }
+              onClick={() => setActiveTab('completed')}
+            >
+              已完成
+              <span>{completedItems.length}</span>
+            </button>
+          </div>
+          {visibleItems.length > 0 ? (
+            <div
+              className="image-canvas-editor__task-sidebar-list"
+              onScroll={handleTaskListScroll}
+            >
+              {visibleItems.map((item) => {
+                const elapsedLabel = formatElapsedMs(item.elapsedMs);
+                const finishedLabel =
+                  item.status === 'done' || item.status === 'failed'
+                    ? formatTaskTimeMs(item.finishedAt)
+                    : null;
+                const detailText = [
+                  item.detail,
+                  item.errorMessage && item.detail !== item.errorMessage
+                    ? item.errorMessage
+                    : null,
+                ]
+                  .filter((value): value is string => Boolean(value))
+                  .join(' · ');
+                const timeText = [
+                  elapsedLabel
+                    ? item.status === 'running'
+                      ? `已用时 ${elapsedLabel}`
+                      : `耗时 ${elapsedLabel}`
+                    : null,
+                  finishedLabel
+                    ? item.status === 'failed'
+                      ? `失败于 ${finishedLabel}`
+                      : `完成于 ${finishedLabel}`
+                    : null,
+                ]
+                  .filter((value): value is string => Boolean(value))
+                  .join(' · ');
+                const titleText = [detailText, item.progressDetail, timeText]
+                  .filter((value): value is string => Boolean(value))
+                  .join(' · ');
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className={`image-canvas-editor__task-sidebar-item image-canvas-editor__task-sidebar-item--${item.status}`}
+                    onClick={item.onClick}
+                    disabled={!item.onClick}
+                  >
+                    <span className="image-canvas-editor__task-sidebar-item-icon">
+                      {statusIcon(item.status)}
+                    </span>
+                    <span className="image-canvas-editor__task-sidebar-item-main">
+                      <span className="image-canvas-editor__task-sidebar-item-title-row">
+                        <span className="image-canvas-editor__task-sidebar-item-title">
+                          {item.title}
+                        </span>
+                        <span className="image-canvas-editor__task-sidebar-item-status">
+                          {statusLabel(item.status)}
+                        </span>
+                      </span>
+                      <span
+                        className="image-canvas-editor__task-sidebar-item-detail"
+                        title={titleText}
+                      >
+                        {detailText}
+                      </span>
+                      {item.progressDetail ? (
+                        <span
+                          className="image-canvas-editor__task-sidebar-item-progress"
+                          title={item.progressDetail}
+                        >
+                          {item.progressDetail}
+                        </span>
+                      ) : null}
+                      {timeText ? (
+                        <span className="image-canvas-editor__task-sidebar-item-time">
+                          {timeText}
+                        </span>
+                      ) : null}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="image-canvas-editor__task-sidebar-empty">
+              暂无任务
+            </div>
+          )}
+        </div>
+      ) : null}
+    </aside>
+  );
+}
diff --git a/src/components/image-editor/ImageCanvasTopbarView.test.tsx b/src/components/image-editor/ImageCanvasTopbarView.test.tsx
index 93f8ca7ca..b9f2c584b 100644
--- a/src/components/image-editor/ImageCanvasTopbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasTopbarView.test.tsx
@@ -40,6 +40,7 @@ function renderTopbar(
     layers: [],
     walletBalanceLabel: '1,234泥点',
     isWalletBalanceLoading: false,
+    currentUser: null,
     assetExportStatus: null,
     isExportingAssets: false,
     setProjectRenameValue: vi.fn(),
@@ -50,6 +51,7 @@ function renderTopbar(
     exportCanvasAssets: vi.fn(),
     onOpenShortcuts: vi.fn(),
     onOpenWallet: vi.fn(),
+    onOpenAccount: vi.fn(),
     ...overrides,
   };
 
@@ -95,6 +97,28 @@ describe('ImageCanvasTopbarView', () => {
     expect(props.onOpenWallet).toHaveBeenCalledTimes(1);
   });
 
+  it('shows the current user avatar beside the mud point balance', () => {
+    const props = renderTopbar({
+      currentUser: {
+        id: 'user-1',
+        publicUserCode: 'SY-00000003',
+        displayName: '厉冰都',
+        avatarUrl: 'data:image/png;base64,AVATAR',
+      },
+    });
+    const accountButton = screen.getByRole('button', { name: '账号 厉冰都' });
+
+    expect(accountButton.textContent).toContain('厉冰都');
+    expect(accountButton.textContent).toContain('SY-00000003');
+    expect(accountButton.querySelector('img')?.getAttribute('src')).toBe(
+      'data:image/png;base64,AVATAR',
+    );
+
+    fireEvent.click(accountButton);
+
+    expect(props.onOpenAccount).toHaveBeenCalledTimes(1);
+  });
+
   it('submits, resets, and cancels project rename edits', () => {
     const props = renderTopbar({
       isRenamingProject: true,
@@ -129,6 +153,7 @@ describe('ImageCanvasTopbarView', () => {
         layers={[]}
         walletBalanceLabel="0泥点"
         isWalletBalanceLoading={false}
+        currentUser={null}
         assetExportStatus={null}
         isExportingAssets={false}
         setProjectRenameValue={vi.fn()}
@@ -139,6 +164,7 @@ describe('ImageCanvasTopbarView', () => {
         exportCanvasAssets={exportCanvasAssets}
         onOpenShortcuts={vi.fn()}
         onOpenWallet={vi.fn()}
+        onOpenAccount={vi.fn()}
       />,
     );
 
@@ -158,6 +184,7 @@ describe('ImageCanvasTopbarView', () => {
         layers={[createLayer()]}
         walletBalanceLabel="0泥点"
         isWalletBalanceLoading={false}
+        currentUser={null}
         assetExportStatus={{
           tone: 'success',
           message: '画布素材已导出',
@@ -171,6 +198,7 @@ describe('ImageCanvasTopbarView', () => {
         exportCanvasAssets={exportCanvasAssets}
         onOpenShortcuts={vi.fn()}
         onOpenWallet={vi.fn()}
+        onOpenAccount={vi.fn()}
       />,
     );
 
diff --git a/src/components/image-editor/ImageCanvasTopbarView.tsx b/src/components/image-editor/ImageCanvasTopbarView.tsx
index e4a6ff24d..f1b10df33 100644
--- a/src/components/image-editor/ImageCanvasTopbarView.tsx
+++ b/src/components/image-editor/ImageCanvasTopbarView.tsx
@@ -23,6 +23,15 @@ export type ImageCanvasTopbarViewProps = {
   layers: CanvasLayer[];
   walletBalanceLabel: string | null;
   isWalletBalanceLoading: boolean;
+  currentUser:
+    | {
+        id: string;
+        publicUserCode: string;
+        displayName: string;
+        avatarUrl: string | null;
+      }
+    | null
+    | undefined;
   assetExportStatus: AssetExportStatus | null;
   isExportingAssets: boolean;
   setProjectRenameValue: (value: string) => void;
@@ -33,8 +42,20 @@ export type ImageCanvasTopbarViewProps = {
   exportCanvasAssets: () => void | Promise<void>;
   onOpenShortcuts: () => void;
   onOpenWallet: () => void;
+  onOpenAccount: () => void;
 };
 
+function buildCanvasUserCode(
+  user: ImageCanvasTopbarViewProps['currentUser'],
+) {
+  if (user?.publicUserCode?.trim()) {
+    return user.publicUserCode.trim();
+  }
+  const raw =
+    user?.id.replace(/[^a-zA-Z0-9]/gu, '').toUpperCase() || '00000000';
+  return `SY-${raw.slice(-8).padStart(8, '0')}`;
+}
+
 export function ImageCanvasTopbarView({
   projectId,
   projectTitle,
@@ -45,6 +66,7 @@ export function ImageCanvasTopbarView({
   layers,
   walletBalanceLabel,
   isWalletBalanceLoading,
+  currentUser,
   assetExportStatus,
   isExportingAssets,
   setProjectRenameValue,
@@ -55,6 +77,7 @@ export function ImageCanvasTopbarView({
   exportCanvasAssets,
   onOpenShortcuts,
   onOpenWallet,
+  onOpenAccount,
 }: ImageCanvasTopbarViewProps) {
   const hasExportableLayer = layers.some(
     (layer) => layer.src.trim().length > 0,
@@ -63,6 +86,12 @@ export function ImageCanvasTopbarView({
   const walletAriaLabel = walletBalanceLabel
     ? `泥点余额 ${walletBalanceLabel}`
     : '泥点余额读取中';
+  const userDisplayName = currentUser?.displayName?.trim() || '登录';
+  const userAvatarUrl = currentUser?.avatarUrl?.trim() || null;
+  const userAvatarLabel = userDisplayName.slice(0, 1).toUpperCase();
+  const userCodeLabel = currentUser
+    ? buildCanvasUserCode(currentUser)
+    : '账号入口';
 
   return (
     <div className="image-canvas-editor__topbar">
@@ -185,6 +214,27 @@ export function ImageCanvasTopbarView({
           />
           <span>{walletDisplayLabel}</span>
         </button>
+        <button
+          type="button"
+          className="image-canvas-editor__account-chip"
+          onClick={onOpenAccount}
+          aria-label={`账号 ${userDisplayName}`}
+        >
+          <span
+            className="image-canvas-editor__account-avatar"
+            aria-hidden="true"
+          >
+            {userAvatarUrl ? (
+              <img src={userAvatarUrl} alt="" draggable={false} />
+            ) : (
+              userAvatarLabel
+            )}
+          </span>
+          <span className="image-canvas-editor__account-meta">
+            <span>{userDisplayName}</span>
+            <span>{userCodeLabel}</span>
+          </span>
+        </button>
       </div>
     </div>
   );
diff --git a/src/components/image-editor/ImageCanvasUiAssetExtractionModel.ts b/src/components/image-editor/ImageCanvasUiAssetExtractionModel.ts
index 0662ae4d4..aaae606d8 100644
--- a/src/components/image-editor/ImageCanvasUiAssetExtractionModel.ts
+++ b/src/components/image-editor/ImageCanvasUiAssetExtractionModel.ts
@@ -1,3 +1,5 @@
+import type { CharacterReferenceImage } from './ImageCanvasEditorTypes';
+
 export type UiAssetExtractionTool = 'rect' | 'ellipse' | 'brush';
 
 export type UiAssetExtractionPoint = {
@@ -27,7 +29,9 @@ export type UiAssetExtractionMark =
 export type UiAssetExtractionState = {
   sourceLayerId: string;
   tool: UiAssetExtractionTool | null;
+  model: string;
   marks: UiAssetExtractionMark[];
+  references: CharacterReferenceImage[];
   draftMark: UiAssetExtractionMark | null;
   status: 'idle' | 'extracting' | 'failed';
   errorMessage?: string;
@@ -44,12 +48,14 @@ export type UiAssetExtractionImageSize =
 
 export function createUiAssetExtractionState(
   sourceLayerId: string,
-  options: { initialTool?: UiAssetExtractionTool | null } = {},
+  options: { initialTool?: UiAssetExtractionTool | null; model: string },
 ): UiAssetExtractionState {
   return {
     sourceLayerId,
     tool: options.initialTool === undefined ? 'rect' : options.initialTool,
+    model: options.model,
     marks: [],
+    references: [],
     draftMark: null,
     status: 'idle',
   };
diff --git a/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.test.tsx b/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.test.tsx
index a1629d9fb..41e1a513d 100644
--- a/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.test.tsx
+++ b/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.test.tsx
@@ -5,6 +5,10 @@ import type { ImgHTMLAttributes } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
+import {
+  IMAGE_MODEL_GPT_IMAGE_2,
+  IMAGE_MODEL_NANOBANANA2,
+} from './ImageCanvasGenerationModel';
 import type { UiAssetExtractionState } from './ImageCanvasUiAssetExtractionModel';
 import { ImageCanvasUiAssetExtractionOverlayView } from './ImageCanvasUiAssetExtractionOverlayView';
 
@@ -60,7 +64,9 @@ function createState(
   return {
     sourceLayerId: 'layer-source',
     tool: 'rect',
+    model: IMAGE_MODEL_NANOBANANA2,
     marks: [],
+    references: [],
     draftMark: null,
     status: 'idle',
     ...overrides,
@@ -93,9 +99,7 @@ describe('ImageCanvasUiAssetExtractionOverlayView', () => {
     );
     expect(within(toolbar).queryByText('框选素材')).toBeNull();
     expect(within(toolbar).queryByText('0')).toBeNull();
-    expect(
-      within(toolbar).queryByRole('button', { name: '提取' }),
-    ).toBeNull();
+    expect(within(toolbar).queryByRole('button', { name: '提取' })).toBeNull();
     expect(
       within(toolbar).getByRole('button', { name: '矩形框选' }),
     ).toBeTruthy();
@@ -107,9 +111,7 @@ describe('ImageCanvasUiAssetExtractionOverlayView', () => {
         .getByRole('button', { name: '矩形框选' })
         .getAttribute('aria-pressed'),
     ).toBe('true');
-    fireEvent.click(
-      within(toolbar).getByRole('button', { name: '矩形框选' }),
-    );
+    fireEvent.click(within(toolbar).getByRole('button', { name: '矩形框选' }));
     fireEvent.click(
       within(toolbar).getByRole('button', { name: '画笔自由框选' }),
     );
@@ -118,7 +120,7 @@ describe('ImageCanvasUiAssetExtractionOverlayView', () => {
     expect(handleToolChange).toHaveBeenNthCalledWith(2, 'brush');
   });
 
-  it('renders UI extraction tools on the right and a bottom composer with previews and gpt-image-2 pricing', () => {
+  it('renders UI extraction tools on the right and a bottom composer with previews and selected model pricing', () => {
     const marks = Array.from({ length: 7 }, (_, index) => ({
       id: `mark-${index + 1}`,
       tool: 'rect' as const,
@@ -128,15 +130,29 @@ describe('ImageCanvasUiAssetExtractionOverlayView', () => {
       height: 36,
     }));
 
+    const onRequestUpload = vi.fn();
+    const onRemoveReference = vi.fn();
+
     render(
       <ImageCanvasUiAssetExtractionOverlayView
         sourceLayer={createLayer({ src: 'data:image/png;base64,ui' })}
         viewport={{ x: 10, y: 20, scale: 1 }}
-        state={createState({ marks })}
+        state={createState({
+          marks,
+          references: [
+            {
+              id: 'ui-ref-1',
+              label: '参考UI.png',
+              src: 'data:image/png;base64,ui-ref',
+            },
+          ],
+        })}
         onToolChange={vi.fn()}
         onPointerStart={vi.fn()}
         onPointerMove={vi.fn()}
         onPointerEnd={vi.fn()}
+        onRequestUpload={onRequestUpload}
+        onRemoveReference={onRemoveReference}
         onSubmit={vi.fn()}
       />,
     );
@@ -153,11 +169,65 @@ describe('ImageCanvasUiAssetExtractionOverlayView', () => {
     ).toBeTruthy();
     expect(within(panel).getAllByLabelText(/框选区域预览/u)).toHaveLength(7);
     expect(within(panel).getByLabelText('计划规格').textContent).toBe('1:1·2K');
-    expect(within(panel).getByLabelText('固定模型').textContent).toContain('gpt-image-2');
+    expect(
+      within(panel).getByRole('button', { name: '提取素材模型 nanobanana2' }),
+    ).toBeTruthy();
+    expect(within(panel).getByLabelText('参考UI.png')).toBeTruthy();
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '上传UI素材参考图' }),
+    );
+    fireEvent.click(
+      within(panel).getByRole('button', { name: '删除参考UI.png' }),
+    );
+    expect(onRequestUpload).toHaveBeenCalledTimes(1);
+    expect(onRemoveReference).toHaveBeenCalledWith('ui-ref-1');
     expect(
       within(panel).queryByRole('button', { name: '取消框选' }),
     ).toBeNull();
-    expect(within(panel).getByRole('button', { name: '提取' }).textContent).toContain('5泥点');
+    expect(
+      within(panel).getByRole('button', { name: '提取' }).textContent,
+    ).toContain('24泥点');
+  });
+
+  it('changes the UI extraction model from the model menu', () => {
+    const onModelChange = vi.fn();
+
+    render(
+      <ImageCanvasUiAssetExtractionOverlayView
+        sourceLayer={createLayer({ src: 'data:image/png;base64,ui' })}
+        viewport={{ x: 10, y: 20, scale: 1 }}
+        state={createState({
+          marks: [
+            {
+              id: 'mark-1',
+              tool: 'rect',
+              x: 10,
+              y: 20,
+              width: 80,
+              height: 60,
+            },
+          ],
+        })}
+        onToolChange={vi.fn()}
+        onPointerStart={vi.fn()}
+        onPointerMove={vi.fn()}
+        onPointerEnd={vi.fn()}
+        onModelChange={onModelChange}
+        onSubmit={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '提取素材模型 nanobanana2' }),
+    );
+    fireEvent.click(
+      within(screen.getByRole('menu', { name: '提取素材模型选项' })).getByRole(
+        'button',
+        { name: 'gpt-image-2' },
+      ),
+    );
+
+    expect(onModelChange).toHaveBeenCalledWith(IMAGE_MODEL_GPT_IMAGE_2);
   });
 
   it('crops mark previews from the same source coordinates as the red selection', () => {
@@ -235,9 +305,7 @@ describe('ImageCanvasUiAssetExtractionOverlayView', () => {
     expect(previewImage.getAttribute('data-object-key')).toBe(
       'generated-editor-assets/project-1/source.png',
     );
-    expect(previewImage.getAttribute('data-refresh-key')).toBe(
-      'task-private',
-    );
+    expect(previewImage.getAttribute('data-refresh-key')).toBe('task-private');
     expect(previewImage.getAttribute('data-fallback-src')).toBe('');
   });
 
diff --git a/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.tsx b/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.tsx
index 59e02ca15..892305baa 100644
--- a/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.tsx
+++ b/src/components/image-editor/ImageCanvasUiAssetExtractionOverlayView.tsx
@@ -1,15 +1,29 @@
-import { Circle, Paintbrush, Square } from 'lucide-react';
+import {
+  Check,
+  ChevronDown,
+  Circle,
+  Cpu,
+  ImageIcon,
+  ImagePlus,
+  Paintbrush,
+  Square,
+} from 'lucide-react';
 import type { ComponentType, SVGProps } from 'react';
 import type { PointerEvent as ReactPointerEvent } from 'react';
+import { useState } from 'react';
 
 import { PlatformActionButton } from '../common/PlatformActionButton';
+import { PlatformFloatingMenu } from '../common/PlatformFloatingMenu';
 import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import type { CanvasLayer, CanvasViewport } from './ImageCanvasEditorTypes';
 import {
   calculateEditorIconSpritesheetPrice,
-  IMAGE_MODEL_GPT_IMAGE_2,
+  EDITOR_IMAGE_MODEL_OPTIONS,
+  getEditorImageModelDisplayName,
 } from './ImageCanvasGenerationModel';
+import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
 import type {
   UiAssetExtractionMark,
   UiAssetExtractionState,
@@ -30,6 +44,9 @@ type ImageCanvasUiAssetExtractionOverlayViewProps = {
   onPointerStart: (point: { x: number; y: number }) => void;
   onPointerMove: (point: { x: number; y: number }) => void;
   onPointerEnd: () => void;
+  onModelChange?: (model: string) => void;
+  onRequestUpload?: () => void;
+  onRemoveReference?: (referenceId: string) => void;
   onSubmit?: () => void;
 };
 
@@ -91,10 +108,7 @@ function resolveMarkPreviewBounds(
   }) => {
     const left = Math.min(Math.max(bounds.x, 0), originalWidth);
     const top = Math.min(Math.max(bounds.y, 0), originalHeight);
-    const right = Math.min(
-      Math.max(bounds.x + bounds.width, 0),
-      originalWidth,
-    );
+    const right = Math.min(Math.max(bounds.x + bounds.width, 0), originalWidth);
     const bottom = Math.min(
       Math.max(bounds.y + bounds.height, 0),
       originalHeight,
@@ -257,8 +271,12 @@ export function ImageCanvasUiAssetExtractionOverlayView({
   onPointerStart,
   onPointerMove,
   onPointerEnd,
+  onModelChange = () => {},
+  onRequestUpload,
+  onRemoveReference,
   onSubmit,
 }: ImageCanvasUiAssetExtractionOverlayViewProps) {
+  const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
   if (!sourceLayer || !state) {
     return null;
   }
@@ -269,9 +287,10 @@ export function ImageCanvasUiAssetExtractionOverlayView({
     state.marks.length,
   );
   const extractionPrice = calculateEditorIconSpritesheetPrice(
-    IMAGE_MODEL_GPT_IMAGE_2,
+    state.model,
     extractionPlan.imageSize,
   );
+  const selectedModelLabel = getEditorImageModelDisplayName(state.model);
   const screenFrame = {
     left: viewport.x + sourceLayer.x * viewport.scale,
     top: viewport.y + sourceLayer.y * viewport.scale,
@@ -358,7 +377,11 @@ export function ImageCanvasUiAssetExtractionOverlayView({
           className="image-canvas-editor__ui-extraction-hit-area"
         />
         {marks.map((mark, index) =>
-          renderMark(mark, index, showIndexLabels && index < state.marks.length),
+          renderMark(
+            mark,
+            index,
+            showIndexLabels && index < state.marks.length,
+          ),
         )}
       </svg>
       {!isQuickEdit ? (
@@ -375,19 +398,51 @@ export function ImageCanvasUiAssetExtractionOverlayView({
           <div className="image-canvas-editor__ui-extraction-panel-head">
             使用框选工具框选你希望从画面中提取的素材
           </div>
+          <div className="image-canvas-editor__reference-strip">
+            {state.references.map((reference, index) => (
+              <ImageCanvasReferenceSlot
+                key={reference.id}
+                tone="default"
+                icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
+                imageSrc={reference.src}
+                objectKey={reference.objectKey}
+                label={`参考图${index + 1}`}
+                ariaLabel={reference.label || `参考图${index + 1}`}
+                title={reference.label}
+                disabled={state.status === 'extracting'}
+                onRemove={
+                  onRemoveReference
+                    ? () => onRemoveReference(reference.id)
+                    : undefined
+                }
+                removeLabel={`删除${reference.label || `参考图${index + 1}`}`}
+              />
+            ))}
+            {onRequestUpload ? (
+              <ImageCanvasReferenceSlot
+                tone="default"
+                icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
+                label="参考图"
+                ariaLabel="上传UI素材参考图"
+                disabled={state.status === 'extracting'}
+                isAdd
+                onClick={onRequestUpload}
+              />
+            ) : null}
+          </div>
           <div
             className="image-canvas-editor__ui-extraction-preview-list"
             aria-label="预览列表"
           >
-            {state.marks.length
-              ? state.marks.map((mark, index) =>
-                  renderMarkPreview(mark, index, sourceLayer),
-                )
-              : (
-                <span className="image-canvas-editor__ui-extraction-preview-empty">
-                  框选后显示预览
-                </span>
-              )}
+            {state.marks.length ? (
+              state.marks.map((mark, index) =>
+                renderMarkPreview(mark, index, sourceLayer),
+              )
+            ) : (
+              <span className="image-canvas-editor__ui-extraction-preview-empty">
+                框选后显示预览
+              </span>
+            )}
           </div>
           <div className="image-canvas-editor__generation-composer-footer image-canvas-editor__ui-extraction-panel-footer">
             <span
@@ -396,12 +451,65 @@ export function ImageCanvasUiAssetExtractionOverlayView({
             >
               {`${extractionPlan.aspectRatio}·${extractionPlan.imageSize}`}
             </span>
-            <span
-              className="image-canvas-editor__readonly-generation-option image-canvas-editor__ui-extraction-model"
-              aria-label="固定模型"
-            >
-              {IMAGE_MODEL_GPT_IMAGE_2}
-            </span>
+            <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model image-canvas-editor__ui-extraction-model">
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
+                aria-label={`提取素材模型 ${selectedModelLabel}`}
+                aria-expanded={isModelMenuOpen}
+                disabled={state.status === 'extracting'}
+                trailingIcon={<ChevronDown className="h-3 w-3" />}
+                onClick={() => setIsModelMenuOpen((open) => !open)}
+              >
+                <span className="image-canvas-editor__model-trigger-label">
+                  <span
+                    className="image-canvas-editor__model-icon"
+                    aria-hidden="true"
+                  >
+                    <Cpu />
+                  </span>
+                  <span>{selectedModelLabel}</span>
+                </span>
+              </PlatformInlineOptionButton>
+              {isModelMenuOpen ? (
+                <PlatformFloatingMenu
+                  className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model"
+                  label="提取素材模型选项"
+                  placement="top-start"
+                  onPointerDown={(event) => event.stopPropagation()}
+                >
+                  <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
+                    {EDITOR_IMAGE_MODEL_OPTIONS.map((option) => {
+                      const selected = state.model === option.value;
+                      return (
+                        <button
+                          key={option.value}
+                          type="button"
+                          className="image-canvas-editor__option-popover-choice image-canvas-editor__option-popover-choice--model"
+                          aria-pressed={selected}
+                          onClick={() => {
+                            onModelChange(option.value);
+                            setIsModelMenuOpen(false);
+                          }}
+                        >
+                          <span
+                            className="image-canvas-editor__model-icon"
+                            aria-hidden="true"
+                          >
+                            <Cpu />
+                          </span>
+                          <span>{option.label}</span>
+                          <Check
+                            className="image-canvas-editor__option-selected-check"
+                            data-visible={selected}
+                            aria-hidden="true"
+                          />
+                        </button>
+                      );
+                    })}
+                  </div>
+                </PlatformFloatingMenu>
+              ) : null}
+            </div>
             <PlatformActionButton
               type="button"
               aria-label="提取"
diff --git a/src/components/image-editor/ImageCanvasUploadModel.test.ts b/src/components/image-editor/ImageCanvasUploadModel.test.ts
index 01120ead4..327fbf57f 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.test.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.test.ts
@@ -109,7 +109,11 @@ describe('ImageCanvasUploadModel', () => {
       resolveUploadFolderId({
         assetFolders: [
           ...folders,
-          createFolder({ id: 'uploaded', label: '上传素材', systemDefault: false }),
+          createFolder({
+            id: 'uploaded',
+            label: '上传素材',
+            systemDefault: false,
+          }),
         ],
         activeUploadFolderId: 'characters',
         preferUploadFolder: true,
@@ -150,6 +154,19 @@ describe('ImageCanvasUploadModel', () => {
       width: 1536,
       height: 1024,
     });
+    expect(
+      createUploadingAssetPlaceholder({
+        uploadIndex: 9,
+        fileName: 'intro.mp4',
+        folderId: 'characters',
+        mediaType: 'video',
+        imageDimensions: { width: 1280, height: 720 },
+      }),
+    ).toMatchObject({
+      id: 'upload-9',
+      width: 1280,
+      height: 720,
+    });
   });
 
   it('opens the target upload folder without changing other folders', () => {
@@ -157,7 +174,11 @@ describe('ImageCanvasUploadModel', () => {
       expandUploadFolder({
         folders: [
           createFolder({ id: 'project', collapsed: true }),
-          createFolder({ id: 'characters', label: '角色素材', collapsed: true }),
+          createFolder({
+            id: 'characters',
+            label: '角色素材',
+            collapsed: true,
+          }),
         ],
         folderId: 'characters',
       }),
@@ -429,6 +450,37 @@ describe('ImageCanvasUploadModel', () => {
     ).toBe(iconDialog);
   });
 
+  it('appends generation reference uploads to icon and UI design dialogs', () => {
+    const reference = {
+      id: 'ref-new',
+      label: '参考图',
+      src: 'data:image/png;base64,ref',
+    };
+
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({ mode: 'icon' }),
+        target: 'generation-reference',
+        references: [reference],
+      }),
+    ).toMatchObject({
+      mode: 'icon',
+      status: 'idle',
+      generationReferences: [reference],
+    });
+    expect(
+      applyGenerationReferenceUpload({
+        dialog: createDialog({ mode: 'ui-design' }),
+        target: 'generation-reference',
+        references: [reference],
+      }),
+    ).toMatchObject({
+      mode: 'ui-design',
+      status: 'idle',
+      generationReferences: [reference],
+    });
+  });
+
   it('creates upload canvas layers centered on the target canvas point', () => {
     const layer = createUploadCanvasLayer({
       uploadIndex: 1,
@@ -459,7 +511,8 @@ describe('ImageCanvasUploadModel', () => {
       uploadIndex: 1,
       fileName: '画布素材.png',
       imageSrc: 'data:image/png;base64,canvas',
-      objectKey: 'generated-character-drafts/editor/asset-library/image/画布素材.png',
+      objectKey:
+        'generated-character-drafts/editor/asset-library/image/画布素材.png',
       assetObjectId: 'assetobj-image',
       imageDimensions: { width: 1536, height: 1024 },
       canvasPoint: { x: 110, y: 120 },
@@ -480,6 +533,31 @@ describe('ImageCanvasUploadModel', () => {
     });
   });
 
+  it('creates upload video layers with measured video dimensions', () => {
+    const layer = createUploadCanvasLayer({
+      uploadIndex: 1,
+      fileName: '画布视频.mp4',
+      imageSrc: '/generated/video.mp4',
+      mediaType: 'video',
+      imageDimensions: { width: 1280, height: 720 },
+      canvasPoint: { x: 110, y: 120 },
+      canvasSize: { width: 900, height: 640 },
+      viewport: { x: 10, y: 20, scale: 2 },
+    });
+
+    expect(layer).toMatchObject({
+      title: '画布视频.mp4',
+      mediaType: 'video',
+      assetKind: 'video',
+      x: -590,
+      y: -310,
+      width: 1280,
+      height: 720,
+      originalWidth: 1280,
+      originalHeight: 720,
+    });
+  });
+
   it('uses viewport center fallback for invalid upload points', () => {
     const layer = createUploadCanvasLayer({
       uploadIndex: 2,
diff --git a/src/components/image-editor/ImageCanvasUploadModel.ts b/src/components/image-editor/ImageCanvasUploadModel.ts
index 140e78f9b..f81aeb71f 100644
--- a/src/components/image-editor/ImageCanvasUploadModel.ts
+++ b/src/components/image-editor/ImageCanvasUploadModel.ts
@@ -207,7 +207,9 @@ export function applyGenerationReferenceUpload({
   if (target === 'generation-reference') {
     return dialog?.mode === 'generate' ||
       dialog?.mode === 'video' ||
-      dialog?.mode === 'spec'
+      dialog?.mode === 'spec' ||
+      dialog?.mode === 'icon' ||
+      dialog?.mode === 'ui-design'
       ? {
           ...setFailedGenerationIdle(dialog),
           generationReferences: [
@@ -308,7 +310,7 @@ export function createUploadingAssetPlaceholder({
 }): EditorAsset {
   const fallbackSize = resolveUploadFallbackSize(mediaType);
   const size =
-    mediaType === 'image' && imageDimensions
+    mediaType !== 'audio' && imageDimensions
       ? resolveLayerResolutionSize(
           imageDimensions.width,
           imageDimensions.height,
@@ -317,7 +319,13 @@ export function createUploadingAssetPlaceholder({
       : fallbackSize;
   return {
     id: `upload-${uploadIndex}`,
-    label: fileName || (mediaType === 'audio' ? '上传音频' : mediaType === 'video' ? '上传视频' : '上传图片'),
+    label:
+      fileName ||
+      (mediaType === 'audio'
+        ? '上传音频'
+        : mediaType === 'video'
+          ? '上传视频'
+          : '上传图片'),
     src: '',
     mediaType,
     width: size.width,
@@ -430,7 +438,8 @@ export function applyPersistedUploadAsset({
           height: persistedAsset.height,
           objectKey: persistedAsset.objectKey ?? undefined,
           assetObjectId: persistedAsset.assetObjectId ?? undefined,
-          durationSeconds: persistedAsset.durationSeconds ?? asset.durationSeconds,
+          durationSeconds:
+            persistedAsset.durationSeconds ?? asset.durationSeconds,
           persisted: true,
           uploadStatus: undefined,
           uploadProgress: undefined,
@@ -553,7 +562,7 @@ export function createUploadCanvasLayer({
 }): CanvasLayer {
   const fallbackSize = resolveUploadFallbackSize(mediaType);
   const layerSize =
-    mediaType === 'image' && imageDimensions
+    mediaType !== 'audio' && imageDimensions
       ? resolveLayerResolutionSize(
           imageDimensions.width,
           imageDimensions.height,
@@ -567,7 +576,13 @@ export function createUploadCanvasLayer({
   return {
     id: `layer-upload-${uploadIndex}`,
     resourceId: `local-resource-upload-${uploadIndex}`,
-    title: fileName || (mediaType === 'audio' ? '上传音频' : mediaType === 'video' ? '上传视频' : '上传图片'),
+    title:
+      fileName ||
+      (mediaType === 'audio'
+        ? '上传音频'
+        : mediaType === 'video'
+          ? '上传视频'
+          : '上传图片'),
     src: imageSrc,
     mediaType,
     assetKind:
@@ -606,8 +621,7 @@ export function resizeUploadCanvasLayerToImage({
   canvasSize: CanvasSize;
   viewport: CanvasViewport;
 }): CanvasLayer {
-  const safeOriginalWidth =
-    originalWidth || UPLOAD_LAYER_FALLBACK_SIZE.width;
+  const safeOriginalWidth = originalWidth || UPLOAD_LAYER_FALLBACK_SIZE.width;
   const safeOriginalHeight =
     originalHeight || UPLOAD_LAYER_FALLBACK_SIZE.height;
   const { width, height } = resolveLayerResolutionSize(
diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx
index 74c681bfd..815f6e2c1 100644
--- a/src/components/image-editor/ImageCanvasWorldView.test.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx
@@ -757,6 +757,29 @@ describe('ImageCanvasWorldView', () => {
     ).toBe('');
   });
 
+  it('uses the shared generating icon scale for icon placeholders', () => {
+    const dialog = createGenerationDialog({
+      id: 'dialog-icon-generating-scale',
+      mode: 'icon',
+      status: 'generating',
+    });
+
+    renderWorldView({
+      viewport: { x: 0, y: 0, scale: 0.25 },
+      canvasGenerationDialogs: [dialog],
+      generateDialog: dialog,
+    });
+
+    const frame = screen.getByRole('button', { name: '图标素材生成占位图' });
+    const iconTile = frame.querySelector(
+      '.image-canvas-editor__generation-frame-icon',
+    ) as HTMLElement;
+
+    expect(
+      iconTile.style.getPropertyValue('--image-canvas-editor-inverse-scale'),
+    ).toBe('4');
+  });
+
   it('uses a plain information icon for metadata corner actions', () => {
     const layer = createLayer();
     const { props } = renderWorldView({ layers: [layer] });
@@ -1087,6 +1110,14 @@ describe('ImageCanvasWorldView', () => {
     expect(frame.getAttribute('src')).toBe(
       'https://oss.example.com/frame01.png?signature=1',
     );
+    expect(frame.className).toBe(
+      'image-canvas-editor__layer-image-sequence-frame',
+    );
+    expect(frame.style.opacity).toBe('0');
+    expect(frame.style.transition).toBe('none');
+    fireEvent.load(frame);
+    expect(frame.style.opacity).toBe('1');
+    expect(frame.style.transition).toBe('none');
     expect(within(layerButton).getByText('1/2')).toBeTruthy();
     expect(within(layerButton).getByText('动作')).toBeTruthy();
 
diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx
index c21917eb4..240d0c69f 100644
--- a/src/components/image-editor/ImageCanvasWorldView.tsx
+++ b/src/components/image-editor/ImageCanvasWorldView.tsx
@@ -755,16 +755,14 @@ function ImageCanvasImageSequenceFrame({
       alt={isVisible ? `画布序列帧：${layer.title}` : ''}
       aria-hidden={isVisible ? undefined : true}
       decoding="async"
-      className={`image-canvas-editor__layer-image-sequence-frame ${
-        isVisible && isLoaded
-          ? 'image-canvas-editor__layer-image--loaded'
-          : 'image-canvas-editor__layer-image--loading'
-      }`}
+      className="image-canvas-editor__layer-image-sequence-frame"
       style={{
         inset: 0,
         opacity: isVisible && isLoaded ? 1 : 0,
         position: 'absolute',
+        transition: 'none',
         transform: mediaTransform,
+        zIndex: 1,
       }}
       onLoad={() => onFrameReady(frameKey)}
       onError={() => onFrameReady(frameKey)}
@@ -1292,7 +1290,11 @@ export function ImageCanvasWorldView({
                   ) : null}
                   <span
                     className="image-canvas-editor__generation-frame-icon"
-                    style={dialog.mode === 'icon' ? undefined : inverseScaleStyle}
+                    style={
+                      dialog.mode === 'icon' && dialog.status !== 'generating'
+                        ? undefined
+                        : inverseScaleStyle
+                    }
                   >
                     {placeholderMeta.icon}
                   </span>
diff --git a/src/components/image-editor/useCanvasGenerationDialogs.test.tsx b/src/components/image-editor/useCanvasGenerationDialogs.test.tsx
index b933c82cc..1a504564a 100644
--- a/src/components/image-editor/useCanvasGenerationDialogs.test.tsx
+++ b/src/components/image-editor/useCanvasGenerationDialogs.test.tsx
@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { act, render, screen } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { CanvasGenerationDialogState } from './ImageCanvasEditorTypes';
@@ -26,235 +26,204 @@ function createDialog(
   };
 }
 
-function GenerationDialogsHarness({ onActivate }: { onActivate: () => void }) {
-  const dialogs = useCanvasGenerationDialogs({ onActivate });
-  const activeId = dialogs.activeCanvasGenerationDialog?.id ?? '-';
-  const activePrompt = dialogs.activeCanvasGenerationDialog?.prompt ?? '-';
-  const inactiveIds = dialogs.inactiveGenerateDialogs
-    .map((dialog) => `${dialog.id}:${dialog.prompt}:${dialog.composerOpen}`)
-    .join('|');
-  const allPrompts = dialogs.canvasGenerationDialogs
-    .map((dialog) => dialog.prompt)
-    .join(',');
-
-  return (
-    <div>
-      <span data-testid="active-id">{activeId}</span>
-      <span data-testid="active-prompt">{activePrompt}</span>
-      <span data-testid="inactive">{inactiveIds}</span>
-      <span data-testid="all-prompts">{allPrompts}</span>
-      <span data-testid="placeholder-x">
-        {String(
-          dialogs.getGeneratingDialogPlaceholder(
-            dialogs.activeCanvasGenerationDialog ?? {
-              mode: 'generate',
-              prompt: 'fallback',
-              status: 'idle',
-            },
-          )?.x ?? '-',
-        )}
-      </span>
-      <button
-        type="button"
-        onClick={() => dialogs.openCanvasGenerationDialog(createDialog('generate', 'first'))}
-      >
-        open first
-      </button>
-      <button
-        type="button"
-        onClick={() => dialogs.openCanvasGenerationDialog(createDialog('character', 'second'))}
-      >
-        open second
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          const target = dialogs.inactiveGenerateDialogs[0];
-          if (target) {
-            dialogs.activateCanvasGenerationDialog(target);
-          }
-        }}
-      >
-        activate inactive
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          const target = dialogs.activeCanvasGenerationDialog;
-          if (target) {
-            dialogs.updateCanvasGenerationDialogById(target.id, (dialog) => ({
-              ...dialog,
-              status: 'generating',
-              placeholder: dialog.placeholder
-                ? {
-                    ...dialog.placeholder,
-                    x: 99,
-                  }
-                : dialog.placeholder,
-            }));
-          }
-        }}
-      >
-        update active
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          const target = dialogs.activeCanvasGenerationDialog;
-          if (target) {
-            dialogs.removeCanvasGenerationDialogById(target.id);
-          }
-        }}
-      >
-        remove active
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          const target = dialogs.activeCanvasGenerationDialog;
-          if (target) {
-            dialogs.updateCanvasGenerationDialogById(target.id, (dialog) => ({
-              ...dialog,
-              sourceLayerId: 'layer-a',
-            }));
-          }
-        }}
-      >
-        bind layer
-      </button>
-      <button
-        type="button"
-        onClick={() => dialogs.removeCanvasGenerationDialogsByLayerId('layer-a')}
-      >
-        remove layer dialogs
-      </button>
-      <button
-        type="button"
-        onClick={() =>
-          dialogs.restoreCanvasGenerationDialogs([
-            {
-              id: 'generation-dialog-12',
-              mode: 'generate',
-              prompt: 'restored',
-              status: 'idle',
-              composerOpen: true,
-              placeholder: {
-                x: 12,
-                y: 24,
-                width: 320,
-                height: 240,
-                originalWidth: 320,
-                originalHeight: 240,
-              },
-            },
-          ])
-        }
-      >
-        restore saved
-      </button>
-      <button
-        type="button"
-        onClick={() =>
-          dialogs.restoreCanvasGenerationDialogs([
-            {
-              id: 'generation-dialog-2',
-              mode: 'generate',
-              prompt: 'inactive saved',
-              status: 'idle',
-              composerOpen: false,
-            },
-            {
-              id: 'generation-dialog-3',
-              mode: 'character',
-              prompt: 'active saved',
-              status: 'idle',
-              composerOpen: true,
-            },
-          ])
-        }
-      >
-        restore active
-      </button>
-    </div>
-  );
-}
-
 describe('useCanvasGenerationDialogs', () => {
   it('archives, activates, updates, and removes canvas generation dialogs', () => {
     const onActivate = vi.fn();
-    render(<GenerationDialogsHarness onActivate={onActivate} />);
-
-    act(() => screen.getByRole('button', { name: 'open first' }).click());
-    expect(screen.getByTestId('active-prompt').textContent).toBe('first');
-    expect(screen.getByTestId('all-prompts').textContent).toBe('first');
-
-    act(() => screen.getByRole('button', { name: 'open second' }).click());
-    expect(screen.getByTestId('active-prompt').textContent).toBe('second');
-    expect(screen.getByTestId('inactive').textContent).toContain(
-      'generation-dialog-1:first:false',
-    );
-    expect(screen.getByTestId('all-prompts').textContent).toBe(
-      'first,second',
+    const { result } = renderHook(() =>
+      useCanvasGenerationDialogs({ onActivate }),
     );
 
-    act(() =>
-      screen.getByRole('button', { name: 'activate inactive' }).click(),
+    act(() => {
+      result.current.openCanvasGenerationDialog(
+        createDialog('generate', 'first'),
+      );
+    });
+    expect(result.current.activeCanvasGenerationDialog).toEqual(
+      expect.objectContaining({
+        prompt: 'first',
+        composerOpen: true,
+      }),
     );
+
+    act(() => {
+      result.current.openCanvasGenerationDialog(
+        createDialog('character', 'second'),
+      );
+    });
+    expect(result.current.activeCanvasGenerationDialog).toEqual(
+      expect.objectContaining({
+        prompt: 'second',
+        composerOpen: true,
+      }),
+    );
+    expect(result.current.inactiveGenerateDialogs).toEqual([
+      expect.objectContaining({
+        prompt: 'first',
+        composerOpen: false,
+      }),
+    ]);
+    expect(
+      result.current.canvasGenerationDialogs.map((dialog) => dialog.prompt),
+    ).toEqual(['first', 'second']);
+
+    const archivedFirstDialog = result.current.inactiveGenerateDialogs[0];
+    expect(archivedFirstDialog).toBeDefined();
+
+    act(() => {
+      result.current.activateCanvasGenerationDialog(archivedFirstDialog!);
+    });
     expect(onActivate).toHaveBeenCalledTimes(1);
-    expect(screen.getByTestId('active-prompt').textContent).toBe('first');
-    expect(screen.getByTestId('inactive').textContent).toContain(
-      'generation-dialog-2:second:false',
+    expect(result.current.activeCanvasGenerationDialog).toEqual(
+      expect.objectContaining({
+        prompt: 'first',
+        composerOpen: true,
+      }),
     );
+    expect(result.current.inactiveGenerateDialogs).toEqual([
+      expect.objectContaining({
+        prompt: 'second',
+        composerOpen: false,
+      }),
+    ]);
 
-    act(() => screen.getByRole('button', { name: 'update active' }).click());
-    expect(screen.getByTestId('placeholder-x').textContent).toBe('99');
+    const activeDialog = result.current.activeCanvasGenerationDialog;
+    expect(activeDialog).toBeTruthy();
+    act(() => {
+      result.current.updateCanvasGenerationDialogById(
+        activeDialog!.id,
+        (dialog) => ({
+          ...dialog,
+          status: 'generating',
+          placeholder: dialog.placeholder
+            ? {
+                ...dialog.placeholder,
+                x: 99,
+              }
+            : dialog.placeholder,
+        }),
+      );
+    });
+    expect(
+      result.current.getGeneratingDialogPlaceholder(activeDialog!)?.x,
+    ).toBe(99);
 
-    act(() => screen.getByRole('button', { name: 'bind layer' }).click());
-    act(() =>
-      screen.getByRole('button', { name: 'remove layer dialogs' }).click(),
-    );
-    expect(screen.getByTestId('active-prompt').textContent).toBe('-');
-    expect(screen.getByTestId('inactive').textContent).toContain('second');
+    act(() => {
+      result.current.updateCanvasGenerationDialogById(
+        activeDialog!.id,
+        (dialog) => ({
+          ...dialog,
+          sourceLayerId: 'layer-a',
+        }),
+      );
+    });
+    act(() => {
+      result.current.removeCanvasGenerationDialogsByLayerId('layer-a');
+    });
+    expect(result.current.activeCanvasGenerationDialog).toBeNull();
+    expect(result.current.inactiveGenerateDialogs).toEqual([
+      expect.objectContaining({
+        prompt: 'second',
+      }),
+    ]);
 
-    act(() => screen.getByRole('button', { name: 'activate inactive' }).click());
-    act(() => screen.getByRole('button', { name: 'remove active' }).click());
-    expect(screen.getByTestId('active-prompt').textContent).toBe('-');
-    expect(screen.getByTestId('inactive').textContent).toBe('');
+    const archivedSecondDialog = result.current.inactiveGenerateDialogs[0];
+    expect(archivedSecondDialog).toBeDefined();
+    act(() => {
+      result.current.activateCanvasGenerationDialog(archivedSecondDialog!);
+    });
+    act(() => {
+      result.current.removeCanvasGenerationDialogById(archivedSecondDialog!.id);
+    });
+    expect(result.current.activeCanvasGenerationDialog).toBeNull();
+    expect(result.current.inactiveGenerateDialogs).toEqual([]);
   });
 
   it('restores saved dialogs and continues ids after the saved maximum', () => {
-    const onActivate = vi.fn();
-    render(<GenerationDialogsHarness onActivate={onActivate} />);
+    const { result } = renderHook(() => useCanvasGenerationDialogs());
 
-    act(() => screen.getByRole('button', { name: 'restore saved' }).click());
-    expect(screen.getByTestId('active-id').textContent).toBe(
-      'generation-dialog-12',
+    act(() => {
+      result.current.restoreCanvasGenerationDialogs([
+        {
+          id: 'generation-dialog-12',
+          mode: 'generate',
+          prompt: 'restored',
+          status: 'idle',
+          composerOpen: true,
+          placeholder: {
+            x: 12,
+            y: 24,
+            width: 320,
+            height: 240,
+            originalWidth: 320,
+            originalHeight: 240,
+          },
+        },
+      ]);
+    });
+    expect(result.current.activeCanvasGenerationDialog).toEqual(
+      expect.objectContaining({
+        id: 'generation-dialog-12',
+        prompt: 'restored',
+      }),
     );
-    expect(screen.getByTestId('active-prompt').textContent).toBe('restored');
 
-    act(() => screen.getByRole('button', { name: 'open second' }).click());
-    expect(screen.getByTestId('active-id').textContent).toBe(
-      'generation-dialog-13',
-    );
-    expect(screen.getByTestId('inactive').textContent).toContain(
-      'generation-dialog-12:restored:false',
+    let nextDialogId = '';
+    act(() => {
+      nextDialogId = result.current.openCanvasGenerationDialog(
+        createDialog('character', 'second'),
+      );
+    });
+    expect(nextDialogId).toBe('generation-dialog-13');
+    expect(result.current.inactiveGenerateDialogs).toEqual([
+      expect.objectContaining({
+        id: 'generation-dialog-12',
+        prompt: 'restored',
+        composerOpen: false,
+      }),
+    ]);
+    expect(result.current.activeCanvasGenerationDialog).toEqual(
+      expect.objectContaining({
+        id: 'generation-dialog-13',
+        prompt: 'second',
+      }),
     );
   });
 
   it('keeps the saved open dialog active when restoring multiple dialogs', () => {
-    const onActivate = vi.fn();
-    render(<GenerationDialogsHarness onActivate={onActivate} />);
+    const { result } = renderHook(() => useCanvasGenerationDialogs());
 
-    act(() => screen.getByRole('button', { name: 'restore active' }).click());
+    act(() => {
+      result.current.restoreCanvasGenerationDialogs([
+        {
+          id: 'generation-dialog-2',
+          mode: 'generate',
+          prompt: 'inactive saved',
+          status: 'idle',
+          composerOpen: false,
+        },
+        {
+          id: 'generation-dialog-3',
+          mode: 'character',
+          prompt: 'active saved',
+          status: 'idle',
+          composerOpen: true,
+        },
+      ]);
+    });
 
-    expect(screen.getByTestId('active-id').textContent).toBe(
-      'generation-dialog-3',
-    );
-    expect(screen.getByTestId('active-prompt').textContent).toBe(
-      'active saved',
-    );
-    expect(screen.getByTestId('inactive').textContent).toContain(
-      'generation-dialog-2:inactive saved:false',
+    expect(result.current.activeCanvasGenerationDialog).toEqual(
+      expect.objectContaining({
+        id: 'generation-dialog-3',
+        prompt: 'active saved',
+        composerOpen: true,
+      }),
     );
+    expect(result.current.inactiveGenerateDialogs).toEqual([
+      expect.objectContaining({
+        id: 'generation-dialog-2',
+        prompt: 'inactive saved',
+        composerOpen: false,
+      }),
+    ]);
   });
 });
diff --git a/src/components/image-editor/useCanvasGenerationDialogs.ts b/src/components/image-editor/useCanvasGenerationDialogs.ts
index 7f8ce3889..28e51f060 100644
--- a/src/components/image-editor/useCanvasGenerationDialogs.ts
+++ b/src/components/image-editor/useCanvasGenerationDialogs.ts
@@ -1,4 +1,11 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  type Dispatch,
+  type SetStateAction,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { isCanvasGenerationDialog } from './ImageCanvasGenerationModel';
 import type {
@@ -10,6 +17,35 @@ type CanvasGenerationDialogUpdater = (
   dialog: CanvasGenerationDialogState,
 ) => CanvasGenerationDialogState | null;
 
+function withGenerationTimestamps<T extends GenerateDialogState | null>(
+  nextDialog: T,
+  previousDialog?: GenerateDialogState | null,
+): T {
+  if (!nextDialog) {
+    return nextDialog;
+  }
+  if (nextDialog.status !== 'generating') {
+    const shouldMarkFinished =
+      nextDialog.status === 'failed' || Boolean(nextDialog.generatedLayerId);
+    return {
+      ...nextDialog,
+      generationFinishedAt: shouldMarkFinished
+        ? (nextDialog.generationFinishedAt ??
+          previousDialog?.generationFinishedAt ??
+          Date.now())
+        : nextDialog.generationFinishedAt,
+    };
+  }
+  return {
+    ...nextDialog,
+    generationStartedAt:
+      nextDialog.generationStartedAt ??
+      previousDialog?.generationStartedAt ??
+      Date.now(),
+    generationFinishedAt: undefined,
+  };
+}
+
 export function useCanvasGenerationDialogs({
   onActivate,
 }: {
@@ -18,7 +54,7 @@ export function useCanvasGenerationDialogs({
   const generationDialogCounterRef = useRef(0);
   const generateDialogRef = useRef<GenerateDialogState | null>(null);
   const inactiveGenerateDialogsRef = useRef<CanvasGenerationDialogState[]>([]);
-  const [generateDialog, setGenerateDialog] =
+  const [generateDialog, setGenerateDialogState] =
     useState<GenerateDialogState | null>(null);
   const [inactiveGenerateDialogs, setInactiveGenerateDialogs] = useState<
     CanvasGenerationDialogState[]
@@ -30,6 +66,18 @@ export function useCanvasGenerationDialogs({
   const activeCanvasGenerationDialog = isCanvasGenerationDialog(generateDialog)
     ? generateDialog
     : null;
+
+  const setGenerateDialog = useCallback<
+    Dispatch<SetStateAction<GenerateDialogState | null>>
+  >((nextDialogOrUpdater) => {
+    setGenerateDialogState((currentDialog) => {
+      const nextDialog =
+        typeof nextDialogOrUpdater === 'function'
+          ? nextDialogOrUpdater(currentDialog)
+          : nextDialogOrUpdater;
+      return withGenerationTimestamps(nextDialog, currentDialog);
+    });
+  }, []);
   const canvasGenerationDialogs = useMemo(
     () =>
       activeCanvasGenerationDialog
@@ -80,12 +128,12 @@ export function useCanvasGenerationDialogs({
       }
       archiveActiveCanvasGenerationDialog();
       const id = createGenerationDialogId();
-      const nextDialog = {
+      const nextDialog = withGenerationTimestamps({
         ...dialog,
         id,
-      };
+      });
       generateDialogRef.current = nextDialog;
-      setGenerateDialog(nextDialog);
+      setGenerateDialogState(nextDialog);
       return id;
     },
     [archiveActiveCanvasGenerationDialog, createGenerationDialogId],
@@ -98,28 +146,34 @@ export function useCanvasGenerationDialogs({
         isCanvasGenerationDialog(currentDialogRef) &&
         currentDialogRef.id === dialogId
       ) {
-        generateDialogRef.current = updater(currentDialogRef);
+        generateDialogRef.current = withGenerationTimestamps(
+          updater(currentDialogRef),
+          currentDialogRef,
+        );
       }
       inactiveGenerateDialogsRef.current =
         inactiveGenerateDialogsRef.current.flatMap((dialog) => {
           if (dialog.id !== dialogId) {
             return [dialog];
           }
-          const nextDialog = updater(dialog);
+          const nextDialog = withGenerationTimestamps(updater(dialog), dialog);
           return nextDialog ? [nextDialog] : [];
         });
-      setGenerateDialog((currentDialog) =>
-        isCanvasGenerationDialog(currentDialog) &&
-        currentDialog.id === dialogId
-          ? updater(currentDialog)
-          : currentDialog,
-      );
+      setGenerateDialogState((currentDialog) => {
+        if (
+          !isCanvasGenerationDialog(currentDialog) ||
+          currentDialog.id !== dialogId
+        ) {
+          return currentDialog;
+        }
+        return withGenerationTimestamps(updater(currentDialog), currentDialog);
+      });
       setInactiveGenerateDialogs((currentDialogs) =>
         currentDialogs.flatMap((dialog) => {
           if (dialog.id !== dialogId) {
             return [dialog];
           }
-          const nextDialog = updater(dialog);
+          const nextDialog = withGenerationTimestamps(updater(dialog), dialog);
           return nextDialog ? [nextDialog] : [];
         }),
       );
@@ -160,7 +214,7 @@ export function useCanvasGenerationDialogs({
         }
         return nextDialogs;
       });
-      setGenerateDialog({
+      setGenerateDialogState({
         ...targetDialog,
         composerOpen: true,
       });
@@ -184,7 +238,7 @@ export function useCanvasGenerationDialogs({
         [...dialogs].reverse().find((dialog) => dialog.composerOpen !== false) ??
         dialogs[dialogs.length - 1] ??
         null;
-      setGenerateDialog(
+      setGenerateDialogState(
         activeDialog
           ? {
               ...activeDialog,
@@ -209,7 +263,7 @@ export function useCanvasGenerationDialogs({
       const keepDialog = (dialog: CanvasGenerationDialogState) =>
         dialog.sourceLayerId !== targetLayerId &&
         dialog.generatedLayerId !== targetLayerId;
-      setGenerateDialog((currentDialog) =>
+      setGenerateDialogState((currentDialog) =>
         isCanvasGenerationDialog(currentDialog) && !keepDialog(currentDialog)
           ? null
           : currentDialog,
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index 081f85abc..3fa2ee919 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -36,6 +36,12 @@ async function readZipText(zip: JSZip, path: string) {
   return file.async('text');
 }
 
+function readAscii(bytes: Uint8Array, start: number, end: number) {
+  return Array.from(bytes.slice(start, end), (byte) =>
+    String.fromCharCode(byte),
+  ).join('');
+}
+
 function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
   const workflow = useImageCanvasAssetExportWorkflow({
     layers,
@@ -65,6 +71,24 @@ function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
       >
         导出单图
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.exportLayerImage(layers[0] ?? null, {
+            mode: 'sequence-with-preview',
+          })
+        }
+      >
+        导出序列帧zip
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.exportLayerImage(layers[0] ?? null, { mode: 'spine-json' })
+        }
+      >
+        导出Spine zip
+      </button>
     </div>
   );
 }
@@ -515,4 +539,100 @@ describe('useImageCanvasAssetExportWorkflow', () => {
       delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
     }
   });
+
+  it('downloads character animation layers as sequence zip with gif preview', async () => {
+    Object.defineProperty(globalThis, 'createImageBitmap', {
+      configurable: true,
+      value: vi.fn(async () => ({ width: 1024, height: 1024 })),
+    });
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+      clearRect: vi.fn(),
+      drawImage: vi.fn(),
+      getImageData: vi.fn(
+        (_x: number, _y: number, width: number, height: number) => {
+          const data = new Uint8ClampedArray(width * height * 4);
+          for (let index = 0; index < data.length; index += 4) {
+            data[index] = 255;
+            data[index + 3] = 255;
+          }
+          return { data };
+        },
+      ),
+    } as unknown as CanvasRenderingContext2D);
+
+    let exportedBlob: Blob | null = null;
+    let downloadName = '';
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn((blob: Blob) => {
+        exportedBlob = blob;
+        return 'blob:sequence-export';
+      }),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(
+      function click(this: HTMLAnchorElement) {
+        downloadName = this.download;
+      },
+    );
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[
+            createLayer('sequence-export', {
+              title: '角色动作/跑步',
+              src: 'data:image/png;base64,c2VxMQ==',
+              mediaType: 'image-sequence',
+              assetKind: 'character-animation',
+              imageSequenceFrames: [
+                {
+                  frameIndex: 1,
+                  imageSrc: 'data:image/png;base64,c2VxMQ==',
+                  width: 1024,
+                  height: 1024,
+                },
+                {
+                  frameIndex: 2,
+                  imageSrc: 'data:image/png;base64,c2VxMg==',
+                  width: 1024,
+                  height: 1024,
+                },
+              ],
+              durationSeconds: 4,
+            }),
+          ]}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: '导出序列帧zip' }));
+
+      await waitFor(() => {
+        expect(exportedBlob).toBeTruthy();
+      });
+      expect(downloadName).toBe('角色动作 跑步-Sequence.zip');
+      const zip = await JSZip.loadAsync(exportedBlob!);
+      expect(zip.file('frames/frame-01.png')).toBeTruthy();
+      expect(zip.file('frames/frame-02.png')).toBeTruthy();
+      const previewGif = await zip.file('preview.gif')!.async('uint8array');
+      expect(readAscii(previewGif, 0, 6)).toBe('GIF89a');
+      expect(readAscii(previewGif, 0, previewGif.length)).toContain(
+        'NETSCAPE2.0',
+      );
+      expect(await readZipText(zip, 'manifest.txt')).toContain('类型：序列帧');
+      expect(await readZipText(zip, 'metadata.json')).toContain(
+        '"frameCount": 2',
+      );
+      expect(zip.file('skeleton.json')).toBeNull();
+      expect(zip.file('README.md')).toBeNull();
+    } finally {
+      delete (globalThis as unknown as { createImageBitmap?: unknown })
+        .createImageBitmap;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index dcf9ba463..0e6245e4b 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -7,6 +7,7 @@ import type {
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
 import {
+  buildAnimatedGifPreviewBytes,
   blobToUint8Array,
   buildLayerExportMetadata,
   buildLayerVisibleExportMetadata,
@@ -28,12 +29,16 @@ export type AssetExportStatus = {
   message: string;
 };
 
+export type ImageSequenceExportMode = 'spine-json' | 'sequence-with-preview';
+
 type UseImageCanvasAssetExportWorkflowOptions = {
   layers: CanvasLayer[];
   projectId: string | null;
   projectTitle: string;
 };
 
+const GIF_PREVIEW_MAX_EDGE = 320;
+
 function triggerBrowserDownload(blob: Blob, downloadName: string) {
   if (
     typeof URL.createObjectURL !== 'function' ||
@@ -52,7 +57,97 @@ function triggerBrowserDownload(blob: Blob, downloadName: string) {
   return true;
 }
 
-async function buildImageSequenceZip(layer: CanvasLayer) {
+function createFallbackPreviewBlob(frameBlob: Blob) {
+  return frameBlob.size
+    ? new Blob([frameBlob], { type: 'image/gif' })
+    : new Blob([], { type: 'image/gif' });
+}
+
+function resolveGifPreviewSize(width: number, height: number) {
+  const safeWidth = Math.max(1, Math.round(width));
+  const safeHeight = Math.max(1, Math.round(height));
+  const scale = Math.min(
+    1,
+    GIF_PREVIEW_MAX_EDGE / Math.max(safeWidth, safeHeight),
+  );
+  return {
+    width: Math.max(1, Math.round(safeWidth * scale)),
+    height: Math.max(1, Math.round(safeHeight * scale)),
+  };
+}
+
+async function buildAnimatedSequencePreview(
+  frameBlobs: Blob[],
+  size: { width: number; height: number },
+  durationSeconds: number | null | undefined,
+) {
+  const firstFrameBlob = frameBlobs[0];
+  if (!firstFrameBlob?.size) {
+    return createFallbackPreviewBlob(firstFrameBlob ?? new Blob());
+  }
+
+  try {
+    if (typeof createImageBitmap === 'undefined') {
+      return createFallbackPreviewBlob(firstFrameBlob);
+    }
+    const firstFrameImage = await createImageBitmap(firstFrameBlob);
+    const canvas = document.createElement('canvas');
+    canvas.width = size.width || firstFrameImage.width;
+    canvas.height = size.height || firstFrameImage.height;
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return createFallbackPreviewBlob(firstFrameBlob);
+    }
+
+    const { width, height } = resolveGifPreviewSize(
+      size.width || firstFrameImage.width,
+      size.height || firstFrameImage.height,
+    );
+    canvas.width = width;
+    canvas.height = height;
+
+    const previewFrames = [];
+    for (const frameBlob of frameBlobs) {
+      const frameImage =
+        frameBlob === firstFrameBlob
+          ? firstFrameImage
+          : await createImageBitmap(frameBlob);
+      context.clearRect(0, 0, width, height);
+      context.drawImage(frameImage, 0, 0, width, height);
+      previewFrames.push({
+        width,
+        height,
+        rgba: context.getImageData(0, 0, width, height).data,
+      });
+    }
+
+    const duration =
+      typeof durationSeconds === 'number' && durationSeconds > 0
+        ? durationSeconds
+        : frameBlobs.length;
+    const delayCentiseconds = (duration / Math.max(1, frameBlobs.length)) * 100;
+    return new Blob(
+      [
+        buildAnimatedGifPreviewBytes({
+          width,
+          height,
+          frames: previewFrames,
+          frameDelayCentiseconds: delayCentiseconds,
+        }),
+      ],
+      {
+        type: 'image/gif',
+      },
+    );
+  } catch {
+    return createFallbackPreviewBlob(firstFrameBlob);
+  }
+}
+
+async function buildImageSequenceZip(
+  layer: CanvasLayer,
+  mode: ImageSequenceExportMode,
+) {
   const frames = getLayerImageSequenceFrames(layer);
   if (!frames.length) {
     throw new Error('序列帧为空');
@@ -65,10 +160,12 @@ async function buildImageSequenceZip(layer: CanvasLayer) {
   }> = [];
   const exportedFrames: ExportedImageSequenceFrame[] = [];
   let successCount = 0;
+  const frameBlobs: Blob[] = [];
 
   for (const [index, frame] of frames.entries()) {
     try {
       const blob = await readLayerImageSequenceFrameBlob(layer, frame);
+      frameBlobs.push(blob);
       const fileName = getImageSequenceFrameFileName(frame, index, blob.type);
       framesFolder.file(fileName, await blobToUint8Array(blob));
       exportedFrames.push({
@@ -90,6 +187,45 @@ async function buildImageSequenceZip(layer: CanvasLayer) {
     throw new Error('序列帧读取失败');
   }
 
+  const sequenceManifestLines = [
+    `素材：${layer.title}`,
+    `类型：${mode === 'spine-json' ? 'Spine JSON' : '序列帧'}`,
+    `帧数：${successCount}/${frames.length}`,
+    `时长：${layer.durationSeconds ? `${layer.durationSeconds}s` : '0s'}`,
+    failedFrames.length ? `失败帧数：${failedFrames.length}` : null,
+  ].filter(Boolean);
+
+  if (mode === 'sequence-with-preview') {
+    if (frameBlobs.length) {
+      const previewBlob = await buildAnimatedSequencePreview(
+        frameBlobs,
+        {
+          width: layer.width,
+          height: layer.height,
+        },
+        layer.durationSeconds,
+      );
+      zip.file('preview.gif', await blobToUint8Array(previewBlob));
+    }
+
+    zip.file(
+      'metadata.json',
+      JSON.stringify(
+        {
+          title: layer.title,
+          visible: buildLayerVisibleExportMetadata(layer),
+          frameCount: frames.length,
+          exportedFrameCount: successCount,
+          failedFrames,
+        },
+        null,
+        2,
+      ),
+    );
+    zip.file('manifest.txt', sequenceManifestLines.join('\n'));
+    return zip.generateAsync({ type: 'blob' });
+  }
+
   zip.file(
     'metadata.json',
     JSON.stringify(
@@ -138,16 +274,50 @@ export function useImageCanvasAssetExportWorkflow({
     useState<AssetExportStatus | null>(null);
   const [isExportingAssets, setIsExportingAssets] = useState(false);
 
-  const exportLayerImage = useCallback((layer: CanvasLayer | null) => {
-    if (!layer) {
-      return;
-    }
-    if (layer.mediaType === 'image-sequence') {
-      void buildImageSequenceZip(layer)
-        .then((zipBlob) => {
+  const exportLayerImage = useCallback(
+    (
+      layer: CanvasLayer | null,
+      options: { mode?: ImageSequenceExportMode } = {},
+    ) => {
+      const exportMode = options.mode ?? 'spine-json';
+      if (!layer) {
+        return;
+      }
+      if (layer.mediaType === 'image-sequence') {
+        void buildImageSequenceZip(layer, exportMode)
+          .then((zipBlob) => {
+            const modeName =
+              exportMode === 'spine-json' ? 'SpineJSON' : 'Sequence';
+            const downloaded = triggerBrowserDownload(
+              zipBlob,
+              `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}.zip`,
+            );
+            if (!downloaded) {
+              setAssetExportStatus({
+                tone: 'error',
+                message: '当前浏览器不支持素材下载',
+              });
+            }
+          })
+          .catch(() => {
+            setAssetExportStatus({
+              tone: 'error',
+              message: '序列帧导出失败',
+            });
+          });
+        return;
+      }
+
+      void readLayerAssetBlob(layer)
+        .then((blob) => {
+          const extension = getLayerAssetExtensionFromTypeOrSrc(
+            layer.mediaType ?? 'image',
+            blob.type,
+            layer.objectKey ?? layer.src,
+          );
           const downloaded = triggerBrowserDownload(
-            zipBlob,
-            `${sanitizeExportFilePart(layer.title, '角色动作')}-SpineJSON.zip`,
+            blob,
+            `${sanitizeExportFilePart(layer.title, 'canvas-layer')}.${extension}`,
           );
           if (!downloaded) {
             setAssetExportStatus({
@@ -159,36 +329,12 @@ export function useImageCanvasAssetExportWorkflow({
         .catch(() => {
           setAssetExportStatus({
             tone: 'error',
-            message: '序列帧导出失败',
+            message: '素材导出失败',
           });
         });
-      return;
-    }
-    void readLayerAssetBlob(layer)
-      .then((blob) => {
-        const extension = getLayerAssetExtensionFromTypeOrSrc(
-          layer.mediaType ?? 'image',
-          blob.type,
-          layer.objectKey ?? layer.src,
-        );
-        const downloaded = triggerBrowserDownload(
-          blob,
-          `${sanitizeExportFilePart(layer.title, 'canvas-layer')}.${extension}`,
-        );
-        if (!downloaded) {
-          setAssetExportStatus({
-            tone: 'error',
-            message: '当前浏览器不支持素材下载',
-          });
-        }
-      })
-      .catch(() => {
-        setAssetExportStatus({
-          tone: 'error',
-          message: '素材导出失败',
-        });
-      });
-  }, []);
+    },
+    [],
+  );
 
   const exportCanvasAssets = useCallback(async () => {
     if (isExportingAssets) {
diff --git a/src/components/image-editor/useImageCanvasEditorChrome.test.tsx b/src/components/image-editor/useImageCanvasEditorChrome.test.tsx
index 03f8da9fb..e237641f2 100644
--- a/src/components/image-editor/useImageCanvasEditorChrome.test.tsx
+++ b/src/components/image-editor/useImageCanvasEditorChrome.test.tsx
@@ -1,6 +1,6 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ApiClientError } from '../../services/apiClient';
@@ -18,107 +18,12 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
   };
 });
 
-function ChromeHarness({
+function renderChrome({
   openEditorLoginModal = vi.fn(),
 }: {
   openEditorLoginModal?: (postLoginAction?: (() => void) | null) => void;
-}) {
-  const chrome = useImageCanvasEditorChrome({ openEditorLoginModal });
-
-  return (
-    <div>
-      <span data-testid="title">{chrome.projectTitle}</span>
-      <span data-testid="rename-value">{chrome.projectRenameValue}</span>
-      <span data-testid="renaming">{String(chrome.isRenamingProject)}</span>
-      <span data-testid="saving">{String(chrome.isProjectRenameSaving)}</span>
-      <span data-testid="rename-error">{chrome.projectRenameError ?? '-'}</span>
-      <span data-testid="sidebar">{chrome.activeSidebarPanel ?? '-'}</span>
-      <span data-testid="tool">{chrome.activeTool}</span>
-      <span data-testid="zoom">{String(chrome.isZoomMenuOpen)}</span>
-      <span data-testid="background-open">
-        {String(chrome.isBackgroundSettingsOpen)}
-      </span>
-      <span data-testid="minimap">{String(chrome.isMinimapOpen)}</span>
-      <span data-testid="background-color">
-        {chrome.canvasBackgroundColor}
-      </span>
-      <span data-testid="background-hex">
-        {chrome.canvasBackgroundHexValue}
-      </span>
-      <button type="button" onClick={chrome.startProjectRename}>
-        start rename
-      </button>
-      <button type="button" onClick={chrome.cancelProjectRename}>
-        cancel rename
-      </button>
-      <button
-        type="button"
-        onClick={() => chrome.submitProjectRename('project-1')}
-      >
-        submit rename
-      </button>
-      <button
-        type="button"
-        onClick={() => chrome.submitProjectRename(null)}
-      >
-        submit without project
-      </button>
-      <button
-        type="button"
-        onClick={() => chrome.setProjectRenameValue('  新项目  ')}
-      >
-        set rename
-      </button>
-      <button
-        type="button"
-        onClick={() => chrome.setProjectRenameValue('   ')}
-      >
-        blank rename
-      </button>
-      <button type="button" onClick={() => chrome.setProjectTitle('已有项目')}>
-        set title
-      </button>
-      <button type="button" onClick={() => chrome.setActiveTool('hand')}>
-        set hand
-      </button>
-      <button type="button" onClick={() => chrome.toggleSidebarPanel('assets')}>
-        toggle assets
-      </button>
-      <button type="button" onClick={() => chrome.toggleSidebarPanel('layers')}>
-        toggle layers
-      </button>
-      <button type="button" onClick={chrome.toggleZoomMenu}>
-        toggle zoom
-      </button>
-      <button type="button" onClick={chrome.toggleBackgroundSettings}>
-        toggle background
-      </button>
-      <button type="button" onClick={chrome.toggleMinimap}>
-        toggle minimap
-      </button>
-      <button type="button" onClick={chrome.closeEditorChromePanels}>
-        close panels
-      </button>
-      <button
-        type="button"
-        onClick={() => chrome.applyCanvasBackgroundColor('#abc')}
-      >
-        apply short hex
-      </button>
-      <button
-        type="button"
-        onClick={() => chrome.handleCanvasBackgroundHexChange('#not-a-color')}
-      >
-        invalid hex
-      </button>
-      <button
-        type="button"
-        onClick={() => chrome.handleCanvasBackgroundHexChange('#ffffff')}
-      >
-        valid hex
-      </button>
-    </div>
-  );
+} = {}) {
+  return renderHook(() => useImageCanvasEditorChrome({ openEditorLoginModal }));
 }
 
 describe('useImageCanvasEditorChrome', () => {
@@ -135,15 +40,23 @@ describe('useImageCanvasEditorChrome', () => {
       resources: [],
       updatedAt: '2026-06-17T00:00:00.000Z',
     });
-    render(<ChromeHarness />);
+    const { result } = renderChrome();
 
-    fireEvent.click(screen.getByRole('button', { name: 'set title' }));
-    fireEvent.click(screen.getByRole('button', { name: 'start rename' }));
-    expect(screen.getByTestId('rename-value').textContent).toBe('已有项目');
+    act(() => {
+      result.current.setProjectTitle('已有项目');
+    });
+    act(() => {
+      result.current.startProjectRename();
+    });
+    expect(result.current.projectRenameValue).toBe('已有项目');
 
-    fireEvent.click(screen.getByRole('button', { name: 'set rename' }));
-    fireEvent.click(screen.getByRole('button', { name: 'submit rename' }));
-    expect(screen.getByTestId('saving').textContent).toBe('true');
+    act(() => {
+      result.current.setProjectRenameValue('  新项目  ');
+    });
+    act(() => {
+      result.current.submitProjectRename('project-1');
+    });
+    expect(result.current.isProjectRenameSaving).toBe(true);
 
     await waitFor(() => {
       expect(renameEditorProjectMock).toHaveBeenCalledWith(
@@ -151,10 +64,12 @@ describe('useImageCanvasEditorChrome', () => {
         '新项目',
       );
     });
-    expect(screen.getByTestId('title').textContent).toBe('后端项目名');
-    expect(screen.getByTestId('rename-value').textContent).toBe('后端项目名');
-    expect(screen.getByTestId('renaming').textContent).toBe('false');
-    expect(screen.getByTestId('saving').textContent).toBe('false');
+    await waitFor(() => {
+      expect(result.current.isProjectRenameSaving).toBe(false);
+    });
+    expect(result.current.projectTitle).toBe('后端项目名');
+    expect(result.current.projectRenameValue).toBe('后端项目名');
+    expect(result.current.isRenamingProject).toBe(false);
   });
 
   it('validates rename input and opens login on rename auth errors', async () => {
@@ -166,59 +81,70 @@ describe('useImageCanvasEditorChrome', () => {
         code: 'UNAUTHORIZED',
       }),
     );
-    render(<ChromeHarness openEditorLoginModal={openEditorLoginModal} />);
+    const { result } = renderChrome({ openEditorLoginModal });
 
-    fireEvent.click(screen.getByRole('button', { name: 'blank rename' }));
-    fireEvent.click(screen.getByRole('button', { name: 'submit rename' }));
-    expect(screen.getByTestId('rename-error').textContent).toBe(
-      '项目名称不能为空',
-    );
+    act(() => {
+      result.current.setProjectRenameValue('   ');
+    });
+    act(() => {
+      result.current.submitProjectRename('project-1');
+    });
+    expect(result.current.projectRenameError).toBe('项目名称不能为空');
     expect(renameEditorProjectMock).not.toHaveBeenCalled();
 
-    fireEvent.click(screen.getByRole('button', { name: 'set rename' }));
-    fireEvent.click(screen.getByRole('button', { name: 'submit rename' }));
+    act(() => {
+      result.current.setProjectRenameValue('新项目');
+    });
+    act(() => {
+      result.current.submitProjectRename('project-1');
+    });
 
     await waitFor(() => {
       expect(openEditorLoginModal).toHaveBeenCalledTimes(1);
     });
-    expect(screen.getByTestId('rename-error').textContent).toBe('未授权访问');
+    expect(result.current.projectRenameError).toBe('未授权访问');
   });
 
   it('manages background colors and chrome panel toggles', () => {
-    render(<ChromeHarness />);
-
-    fireEvent.click(screen.getByRole('button', { name: 'apply short hex' }));
-    expect(screen.getByTestId('background-color').textContent).toBe('#aabbcc');
-    expect(screen.getByTestId('background-hex').textContent).toBe('#aabbcc');
-
-    fireEvent.click(screen.getByRole('button', { name: 'invalid hex' }));
-    expect(screen.getByTestId('background-color').textContent).toBe('#aabbcc');
-    expect(screen.getByTestId('background-hex').textContent).toBe(
-      '#not-a-color',
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: 'valid hex' }));
-    expect(screen.getByTestId('background-color').textContent).toBe('#ffffff');
-    expect(screen.getByTestId('background-hex').textContent).toBe('#ffffff');
-
-    fireEvent.click(screen.getByRole('button', { name: 'toggle assets' }));
-    expect(screen.getByTestId('sidebar').textContent).toBe('-');
-    fireEvent.click(screen.getByRole('button', { name: 'toggle layers' }));
-    expect(screen.getByTestId('sidebar').textContent).toBe('layers');
-    fireEvent.click(screen.getByRole('button', { name: 'toggle zoom' }));
-    fireEvent.click(screen.getByRole('button', { name: 'toggle background' }));
-    fireEvent.click(screen.getByRole('button', { name: 'toggle minimap' }));
-    fireEvent.click(screen.getByRole('button', { name: 'set hand' }));
-    expect(screen.getByTestId('zoom').textContent).toBe('true');
-    expect(screen.getByTestId('background-open').textContent).toBe('true');
-    expect(screen.getByTestId('minimap').textContent).toBe('false');
-    expect(screen.getByTestId('tool').textContent).toBe('hand');
+    const { result } = renderChrome();
 
     act(() => {
-      screen.getByRole('button', { name: 'close panels' }).click();
+      result.current.applyCanvasBackgroundColor('#abc');
     });
-    expect(screen.getByTestId('sidebar').textContent).toBe('-');
-    expect(screen.getByTestId('zoom').textContent).toBe('false');
-    expect(screen.getByTestId('background-open').textContent).toBe('false');
+    expect(result.current.canvasBackgroundColor).toBe('#aabbcc');
+    expect(result.current.canvasBackgroundHexValue).toBe('#aabbcc');
+
+    act(() => {
+      result.current.handleCanvasBackgroundHexChange('#not-a-color');
+    });
+    expect(result.current.canvasBackgroundColor).toBe('#aabbcc');
+    expect(result.current.canvasBackgroundHexValue).toBe('#not-a-color');
+
+    act(() => {
+      result.current.handleCanvasBackgroundHexChange('#ffffff');
+    });
+    expect(result.current.canvasBackgroundColor).toBe('#ffffff');
+    expect(result.current.canvasBackgroundHexValue).toBe('#ffffff');
+
+    act(() => {
+      result.current.toggleSidebarPanel('assets');
+      result.current.toggleSidebarPanel('layers');
+      result.current.toggleZoomMenu();
+      result.current.toggleBackgroundSettings();
+      result.current.toggleMinimap();
+      result.current.setActiveTool('hand');
+    });
+    expect(result.current.activeSidebarPanel).toBe('layers');
+    expect(result.current.isZoomMenuOpen).toBe(true);
+    expect(result.current.isBackgroundSettingsOpen).toBe(true);
+    expect(result.current.isMinimapOpen).toBe(false);
+    expect(result.current.activeTool).toBe('hand');
+
+    act(() => {
+      result.current.closeEditorChromePanels();
+    });
+    expect(result.current.activeSidebarPanel).toBeNull();
+    expect(result.current.isZoomMenuOpen).toBe(false);
+    expect(result.current.isBackgroundSettingsOpen).toBe(false);
   });
 });
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
index 4e268ff0a..5149fc0d1 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.test.tsx
@@ -154,35 +154,6 @@ function createQueueState(
   };
 }
 
-function parseLayerRect(text: string, layerId: string) {
-  const entry = text
-    .split('|')
-    .find((currentEntry) => currentEntry.startsWith(`${layerId}:`));
-  if (!entry) {
-    throw new Error(`missing layer rect for ${layerId}`);
-  }
-  const [, x, y, width, height] = entry.split(':');
-  return {
-    x: Number(x),
-    y: Number(y),
-    width: Number(width),
-    height: Number(height),
-  };
-}
-
-function rectOverlapsExpanded(
-  rect: { x: number; y: number; width: number; height: number },
-  blocker: { x: number; y: number; width: number; height: number },
-  gap: number,
-) {
-  return (
-    rect.x < blocker.x + blocker.width + gap &&
-    rect.x + rect.width > blocker.x - gap &&
-    rect.y < blocker.y + blocker.height + gap &&
-    rect.y + rect.height > blocker.y - gap
-  );
-}
-
 function SubmissionWorkflowHarness({
   initialDialog = null,
   initialQuickEditPanel = null,
@@ -190,7 +161,9 @@ function SubmissionWorkflowHarness({
   initialCharacterAnimationPanel = null,
   initialLayers = [createLayer()],
   projectId = undefined,
+  upsertGeneratedAsset = undefined,
   applyProjectSnapshot = undefined,
+  onQueuedGenerationTask = undefined,
   onWalletBalanceMayHaveChanged = undefined,
 }: {
   initialDialog?: GenerateDialogState | null;
@@ -199,9 +172,15 @@ function SubmissionWorkflowHarness({
   initialCharacterAnimationPanel?: CharacterAnimationPanelState | null;
   initialLayers?: CanvasLayer[];
   projectId?: string | null;
+  upsertGeneratedAsset?: Parameters<
+    typeof useImageCanvasGenerationSubmissionWorkflow
+  >[0]['upsertGeneratedAsset'];
   applyProjectSnapshot?: Parameters<
     typeof useImageCanvasGenerationSubmissionWorkflow
   >[0]['applyProjectSnapshot'];
+  onQueuedGenerationTask?: Parameters<
+    typeof useImageCanvasGenerationSubmissionWorkflow
+  >[0]['onQueuedGenerationTask'];
   onWalletBalanceMayHaveChanged?: Parameters<
     typeof useImageCanvasGenerationSubmissionWorkflow
   >[0]['onWalletBalanceMayHaveChanged'];
@@ -259,6 +238,12 @@ function SubmissionWorkflowHarness({
     getGeneratingDialogPlaceholder: dialogs.getGeneratingDialogPlaceholder,
     appendCanvasLayersWithResources: (nextLayers) =>
       setLayers((currentLayers) => [...currentLayers, ...nextLayers]),
+    updateSourceLayer: (sourceLayerId, updater) =>
+      setLayers((currentLayers) =>
+        currentLayers.map((layer) =>
+          layer.id === sourceLayerId ? updater(layer) : layer,
+        ),
+      ),
     selectSingleLayer: setSelectedLayerId,
     fitLayers: fitLayersMockRef.current,
     setActiveTool,
@@ -268,7 +253,9 @@ function SubmissionWorkflowHarness({
     },
     projectId,
     assetFolderId: projectId ? 'project' : undefined,
+    upsertGeneratedAsset,
     applyProjectSnapshot,
+    onQueuedGenerationTask,
     onWalletBalanceMayHaveChanged,
   });
 
@@ -396,6 +383,36 @@ function SubmissionWorkflowHarness({
       >
         提取已框选UI素材
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          if (sourceLayer) {
+            void workflow.extractUiDesignAssets(sourceLayer, {
+              marks: [
+                {
+                  id: 'mark-ref',
+                  tool: 'rect',
+                  x: 10,
+                  y: 20,
+                  width: 80,
+                  height: 60,
+                },
+              ],
+              references: [
+                {
+                  id: 'ref-a',
+                  label: '风格参考',
+                  src: '/generated/ref-fallback.png',
+                  objectKey: 'generated/ref-style.png',
+                  resourceId: 'resource-style-ref',
+                },
+              ],
+            });
+          }
+        }}
+      >
+        提取带参考图UI素材
+      </button>
       <button
         type="button"
         onClick={() => void workflow.submitCharacterAnimation()}
@@ -450,8 +467,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     );
   });
 
-  it('submits quick edits, clears the panel, and fits the source plus result', async () => {
-    generateEditorImageMock.mockResolvedValueOnce(
+  it('submits quick edits and updates the source layer directly', async () => {
+    editEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '快速修图' }),
     );
     render(<SubmissionWorkflowHarness />);
@@ -465,35 +482,31 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       'quick-edit:generating:closed:-:placeholder:-',
     );
     await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledWith(
+      expect(editEditorImageMock).toHaveBeenCalledWith(
         expect.objectContaining({
           prompt: '快速修图',
+          sourceImageSrc: 'data:image/png;base64,source.png',
           size: '1024x768',
-          aspectRatio: '4:3',
-          imageSize: '1K',
-          kind: 'quick-edit',
           model: 'gemini-3.1-flash-image-preview',
-          referenceImageSrcs: ['data:image/png;base64,source.png'],
         }),
       );
     });
+    expect(generateEditorImageMock).not.toHaveBeenCalled();
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-quick-edit-1:源图 快速编辑:resource-source:-',
+        'layer-source:源图:resource-source:-:-:data:image/png;base64,generated',
       );
     });
     expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     expect(screen.getByTestId('tool').textContent).toBe('select');
     expect(screen.getByTestId('sidebar').textContent).toBe('layers');
-    expect(screen.getByTestId('selected').textContent).toBe(
-      'layer-quick-edit-1',
-    );
-    expect(screen.getByTestId('fit-count').textContent).toBe('1');
+    expect(screen.getByTestId('selected').textContent).toBe('-');
+    expect(screen.getByTestId('fit-count').textContent).toBe('0');
   });
 
   it('submits quick-edit canvas generators with the source image reference', async () => {
-    generateEditorImageMock.mockResolvedValueOnce(
-      createGenerated({ prompt: '把图1改成雨天' }),
+    editEditorImageMock.mockResolvedValueOnce(
+      createGenerated({ prompt: '把当前图改成雨天' }),
     );
     render(
       <SubmissionWorkflowHarness
@@ -523,22 +536,21 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '提交当前生成' }));
 
     await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledWith(
+      expect(editEditorImageMock).toHaveBeenCalledWith(
         expect.objectContaining({
-          prompt: '把图1改成雨天',
-          kind: 'quick-edit',
+          prompt: '把当前图改成雨天',
+          sourceImageSrc: 'data:image/png;base64,source.png',
+          size: '1024x768',
           model: 'gpt-image-2',
-          aspectRatio: '4:3',
-          imageSize: '1K',
-          referenceImageSrcs: ['https://assets.example.test/source.png'],
           sourceResourceId: 'resource-source',
           assetLabel: '源图 快速编辑',
         }),
       );
     });
+    expect(generateEditorImageMock).not.toHaveBeenCalled();
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-quick-edit-1:源图 快速编辑:resource-source',
+        'layer-source:源图:resource-source',
       );
     });
     expect(screen.getByTestId('quick-edit').textContent).toBe('-');
@@ -546,7 +558,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
 
   it('refreshes the wallet balance after inline image generation succeeds', async () => {
     const refreshWalletBalance = vi.fn();
-    generateEditorImageMock.mockResolvedValueOnce(
+    editEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '快速修图' }),
     );
     render(
@@ -560,14 +572,14 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '提交快速编辑' }));
 
     await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledTimes(1);
+      expect(editEditorImageMock).toHaveBeenCalledTimes(1);
     });
     await waitFor(() => {
       expect(refreshWalletBalance).toHaveBeenCalledTimes(1);
     });
   });
 
-  it('places quick edit result with the new image placement logic away from existing assets', async () => {
+  it('keeps quick edit results on the source layer when nearby assets exist', async () => {
     const blockingLayer = createLayer({
       id: 'layer-blocker',
       resourceId: 'resource-blocker',
@@ -580,7 +592,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       originalHeight: 768,
       zIndex: 3,
     });
-    generateEditorImageMock.mockResolvedValueOnce(
+    editEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '快速修图', width: 1024, height: 768 }),
     );
     render(
@@ -595,17 +607,16 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-quick-edit-1:源图 快速编辑:resource-source:-',
+        'layer-source:源图:resource-source:-:-:data:image/png;base64,generated',
       );
     });
-    const layerRects = screen.getByTestId('layer-rects').textContent ?? '';
-    const resultRect = parseLayerRect(layerRects, 'layer-quick-edit-1');
-
-    expect(rectOverlapsExpanded(resultRect, blockingLayer, 32)).toBe(false);
+    expect(screen.getByTestId('layers').textContent).not.toContain(
+      'layer-quick-edit-1',
+    );
   });
 
   it('submits quick edits with the numbered red selection image as the final source reference', async () => {
-    generateEditorImageMock.mockResolvedValueOnce(
+    editEditorImageMock.mockResolvedValueOnce(
       createGenerated({
         prompt: '对1号红色圈选框里的内容做以下修改：改成蓝色',
       }),
@@ -630,6 +641,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         initialQuickEditSelectionState={{
           sourceLayerId: 'layer-source',
           tool: 'rect',
+          model: 'gemini-3.1-flash-image-preview',
           marks: [
             {
               id: 'quick-edit-selection-mark-1',
@@ -640,6 +652,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
               height: 120,
             },
           ],
+          references: [],
           draftMark: null,
           status: 'idle',
         }}
@@ -670,20 +683,19 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       );
     });
     await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledWith(
+      expect(editEditorImageMock).toHaveBeenCalledWith(
         expect.objectContaining({
-          referenceImageSrcs: [
-            'data:image/png;base64,style.png',
-            'data:image/png;base64,marked-source',
-          ],
+          sourceImageSrc: 'data:image/png;base64,marked-source',
+          referenceImageSrcs: ['data:image/png;base64,style.png'],
         }),
       );
     });
+    expect(generateEditorImageMock).not.toHaveBeenCalled();
   });
 
   it('keeps failed quick edit panels visible with the normalized prompt', async () => {
     const refreshWalletBalance = vi.fn();
-    generateEditorImageMock.mockRejectedValueOnce(new Error('修图失败'));
+    editEditorImageMock.mockRejectedValueOnce(new Error('修图失败'));
     render(
       <SubmissionWorkflowHarness
         onWalletBalanceMayHaveChanged={refreshWalletBalance}
@@ -756,12 +768,40 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     );
   });
 
-  it('submits video quick edits through the video API with the source video as the hidden last reference', async () => {
+  it('submits video quick edits through the video API with the source video', async () => {
+    const applyProjectSnapshot = vi.fn();
+    const upsertGeneratedAsset = vi.fn();
     generateEditorVideoMock.mockResolvedValueOnce(
-      createVideoGenerated({ prompt: '把图2改成雨天' }),
+      createVideoGenerated({
+        prompt: '把当前图改成雨天',
+        project: {
+          projectId: 'editor-project-1',
+          title: '项目',
+          coverImageSrc: null,
+          viewport: { x: 0, y: 0, scale: 1 },
+          layers: [],
+          resources: [],
+          createdAt: '2026-06-27T00:00:00.000Z',
+          updatedAt: '2026-06-27T00:00:00.000Z',
+        },
+        asset: {
+          assetId: 'asset-video-quick-edit',
+          folderId: 'user-1:asset-folder:project',
+          label: '源视频 快速编辑',
+          imageSrc: 'https://assets.example.test/generated-video.mp4',
+          thumbnailSrc: 'https://assets.example.test/generated-video-cover.png',
+          width: 854,
+          height: 480,
+          sourceType: 'generated',
+          assetKind: 'video',
+        },
+      }),
     );
     render(
       <SubmissionWorkflowHarness
+        projectId="editor-project-1"
+        applyProjectSnapshot={applyProjectSnapshot}
+        upsertGeneratedAsset={upsertGeneratedAsset}
         initialLayers={[
           createLayer({
             title: '源视频',
@@ -799,7 +839,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     await waitFor(() => {
       expect(generateEditorVideoMock).toHaveBeenCalledWith(
         expect.objectContaining({
-          prompt: '把图2改成雨天',
+          prompt: '把当前图改成雨天',
           model: 'seedance2.0-fast',
           aspectRatio: '16:9',
           durationSeconds: 4,
@@ -810,14 +850,22 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
           referenceVideoSrcs: [
             'generated-character-drafts/editor/videos/source.mp4',
           ],
+          assetFolderId: 'project',
+          assetLabel: '源视频 快速编辑',
         }),
       );
     });
     expect(generateEditorImageMock).not.toHaveBeenCalled();
     expect(generateEditorCharacterAnimationMock).not.toHaveBeenCalled();
     await waitFor(() => {
-      expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-video-1:源视频 快速编辑:resource-source:video:video:https://assets.example.test/generated-video.mp4',
+      expect(applyProjectSnapshot).toHaveBeenCalledWith(
+        expect.objectContaining({ projectId: 'editor-project-1' }),
+      );
+      expect(upsertGeneratedAsset).toHaveBeenCalledWith(
+        expect.objectContaining({
+          assetId: 'asset-video-quick-edit',
+          thumbnailSrc: 'https://assets.example.test/generated-video-cover.png',
+        }),
       );
     });
   });
@@ -883,7 +931,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         expect.objectContaining({
           sourceLayerId: 'layer-source',
           sourceImageSrc: 'generated-character-drafts/editor/actions/frame.png',
-          promptText: '让图1跳得更高',
+          promptText: '让当前图跳得更高',
           resolution: '480p',
           ratio: 'same',
           frameCount: 32,
@@ -1117,6 +1165,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
 
   it('refreshes the wallet balance after a queued generation reaches a terminal state', async () => {
     const applyProjectSnapshot = vi.fn();
+    const refreshTaskList = vi.fn();
     const refreshWalletBalance = vi.fn();
     const backendProject = {
       projectId: 'editor-project-1',
@@ -1140,6 +1189,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       <SubmissionWorkflowHarness
         projectId="editor-project-1"
         applyProjectSnapshot={applyProjectSnapshot}
+        onQueuedGenerationTask={refreshTaskList}
         onWalletBalanceMayHaveChanged={refreshWalletBalance}
         initialDialog={{
           id: 'dialog-generate',
@@ -1163,6 +1213,9 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '设置初始对话' }));
     fireEvent.click(screen.getByRole('button', { name: '提交当前生成' }));
 
+    await waitFor(() => {
+      expect(refreshTaskList).toHaveBeenCalledTimes(1);
+    });
     await waitFor(() => {
       expect(loadEditorProjectMock).toHaveBeenCalledWith('editor-project-1');
     });
@@ -1178,6 +1231,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     vi.useFakeTimers();
     try {
       const refreshWalletBalance = vi.fn();
+      const refreshTaskList = vi.fn();
       const runningState = createQueueState({
         status: 'running',
         phaseLabel: '生成中',
@@ -1199,6 +1253,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       render(
         <SubmissionWorkflowHarness
           projectId="editor-project-1"
+          onQueuedGenerationTask={refreshTaskList}
           onWalletBalanceMayHaveChanged={refreshWalletBalance}
           initialDialog={{
             id: 'dialog-generate',
@@ -1226,6 +1281,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         await Promise.resolve();
         await Promise.resolve();
       });
+      expect(refreshTaskList).toHaveBeenCalledTimes(1);
       await act(async () => {
         await vi.advanceTimersByTimeAsync(20 * 60 * 1000 + 1600);
       });
@@ -1536,10 +1592,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-icons',
-      iconImageSrcs: [
-        createIconResult('返回按钮', 'data:image/png;base64,back'),
-        createIconResult('设置按钮', 'data:image/png;base64,setting'),
-      ],
+      iconImageSrcs: [],
     });
     render(
       <SubmissionWorkflowHarness
@@ -1585,11 +1638,8 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
         'layer-icon-spritesheet-1:图标素材图集 1:-:icon-spritesheet',
       );
     });
-    expect(screen.getByTestId('layers').textContent).toContain(
-      'layer-icon-2:返回按钮:-:icon',
-    );
-    expect(screen.getByTestId('layers').textContent).toContain(
-      'layer-icon-3:设置按钮:-:icon',
+    expect(screen.getByTestId('layers').textContent).not.toContain(
+      'layer-icon-2',
     );
     expect(screen.getByTestId('selected').textContent).toBe(
       'layer-icon-spritesheet-1',
@@ -1602,10 +1652,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     );
   });
 
-  it('resolves uploaded objectKey icon spec before submitting spritesheets', async () => {
-    resolveEditorImageReferenceDataUrlForGenerationMock.mockResolvedValueOnce(
-      'data:image/jpeg;base64,normalized-icon-spec',
-    );
+  it('submits uploaded objectKey icon references before submitting spritesheets', async () => {
     generateEditorIconSpritesheetMock.mockResolvedValueOnce({
       spritesheetImageSrc: 'data:image/png;base64,sheet',
       spritesheetWidth: 512,
@@ -1615,9 +1662,7 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-icons',
-      iconImageSrcs: [
-        createIconResult('返回按钮', 'data:image/png;base64,back'),
-      ],
+      iconImageSrcs: [],
     });
     render(
       <SubmissionWorkflowHarness
@@ -1635,6 +1680,15 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
             objectKey: 'generated-character-drafts/editor/specs/icon-spec.png',
             assetObjectId: 'assetobj-icon-spec',
           },
+          generationReferences: [
+            {
+              id: 'ref-style',
+              label: '风格参考',
+              src: 'https://signed.example.test/icon-style.png?expires=1',
+              objectKey: 'generated-character-drafts/editor/refs/icon-style.png',
+              assetObjectId: 'assetobj-icon-style',
+            },
+          ],
         }}
       />,
     );
@@ -1643,14 +1697,14 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '提交图标' }));
 
     await waitFor(() => {
-      expect(
-        resolveEditorImageReferenceDataUrlForGenerationMock,
-      ).toHaveBeenCalledWith(
-        'generated-character-drafts/editor/specs/icon-spec.png',
-      );
+      expect(resolveEditorImageReferenceDataUrlForGenerationMock).not.toHaveBeenCalled();
       expect(generateEditorIconSpritesheetMock).toHaveBeenCalledWith(
         expect.objectContaining({
-          referenceImageSrc: 'data:image/jpeg;base64,normalized-icon-spec',
+          referenceImageSrc:
+            'generated-character-drafts/editor/specs/icon-spec.png',
+          referenceImageSrcs: [
+            'generated-character-drafts/editor/refs/icon-style.png',
+          ],
           iconDescriptions: ['返回按钮'],
         }),
       );
@@ -1662,8 +1716,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-ui-assets',
@@ -1684,18 +1740,17 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '提取UI素材' }));
 
-    await waitFor(() => {
-      expect(resolveEditorImageReferenceDataUrlMock).toHaveBeenCalledWith(
-        'generated/ui-design.png',
-      );
-    });
     await waitFor(() => {
       expect(extractEditorUiDesignAssetsMock).toHaveBeenCalledWith(
         expect.objectContaining({
-          sourceImageSrc: 'data:image/png;base64,ui-design.png',
+          sourceImageSrc: 'generated/ui-design.png',
+          model: 'gemini-3.1-flash-image-preview',
         }),
       );
     });
+    expect(resolveEditorImageReferenceDataUrlMock).not.toHaveBeenCalledWith(
+      'generated/ui-design.png',
+    );
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toContain(
         'layer-icon-spritesheet-1:源图 素材图集:-:icon-spritesheet',
@@ -1715,8 +1770,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-ui-assets',
@@ -1753,8 +1810,10 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'task-ui-assets',
@@ -1799,13 +1858,62 @@ describe('useImageCanvasGenerationSubmissionWorkflow', () => {
       expect(extractEditorUiDesignAssetsMock).toHaveBeenCalledWith(
         expect.objectContaining({
           sourceImageSrc: 'data:image/png;base64,marked-ui-design',
+          model: 'gemini-3.1-flash-image-preview',
           aspectRatio: '1:1',
           imageSize: '2K',
           generationInputs: expect.objectContaining({
             fields: expect.arrayContaining([
               expect.objectContaining({
                 title: '提取提示词',
-                value: '仅提取被红色框框选的素材并整理成spritesheet',
+                value:
+                  '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+              }),
+            ]),
+          }),
+        }),
+      );
+    });
+  });
+
+  it('submits UI asset extraction with uploaded references', async () => {
+    extractEditorUiDesignAssetsMock.mockResolvedValueOnce({
+      spritesheetImageSrc: 'data:image/png;base64,ui-sheet',
+      spritesheetWidth: 512,
+      spritesheetHeight: 512,
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕。绿幕背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板、绿色投影或绿色反光。',
+      model: 'gpt-image-2',
+      provider: 'VectorEngine',
+      taskId: 'task-ui-assets',
+    });
+    render(
+      <SubmissionWorkflowHarness
+        initialLayers={[
+          createLayer({
+            assetKind: 'ui-design',
+            objectKey: 'generated/ui-design.png',
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '提取带参考图UI素材' }));
+
+    await waitFor(() => {
+      expect(resolveEditorImageReferenceDataUrlForGenerationMock).not.toHaveBeenCalled();
+    });
+    await waitFor(() => {
+      expect(extractEditorUiDesignAssetsMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          referenceImageSrcs: ['generated/ref-style.png'],
+          generationInputs: expect.objectContaining({
+            references: expect.arrayContaining([
+              expect.objectContaining({
+                title: '参考图 1',
+                label: '风格参考',
+                refType: 'project-resource',
               }),
             ]),
           }),
diff --git a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
index c9d5e97ba..b07c543aa 100644
--- a/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationSubmissionWorkflow.ts
@@ -34,6 +34,7 @@ import type {
   CanvasLayer,
   CanvasTool,
   CanvasViewport,
+  CharacterReferenceImage,
   CharacterAnimationPanelState,
   GenerateDialogState,
   QuickEditPanelState,
@@ -41,6 +42,7 @@ import type {
 } from './ImageCanvasEditorTypes';
 import { createQuickEditGenerationDialogDraft } from './ImageCanvasGenerationDialogModel';
 import {
+  applyImageEditResultToSourceLayer,
   createAudioResultLayer,
   createCharacterAnimationResultLayer,
   createGeneratedResultLayer,
@@ -56,6 +58,7 @@ import {
   buildUiDesignAssetExtractionGenerationInputs,
   buildVideoGenerationInputs,
   CHARACTER_ANIMATION_MODEL,
+  DEFAULT_IMAGE_MODEL,
   DEFAULT_VIDEO_MODEL,
   ICON_FRAME_DISPLAY_SIZE,
   ICON_FRAME_ORIGINAL_SIZE,
@@ -63,7 +66,6 @@ import {
   inferEditorImageSizeLabel,
   isCanvasGenerationDialog,
   normalizeEditorImageModel,
-  normalizeQuickEditPromptSourceReference,
   resolveCharacterAnimationSourceImageSrc,
   resolveEditorImageGenerationPixelSize,
   resolveImageGenerationErrorMessage,
@@ -72,6 +74,7 @@ import {
   buildCharacterAnimationSubmissionPlan,
   buildIconSpritesheetGenerationSubmissionPlan,
   buildImageGenerationSubmissionPlan,
+  resolveImageReferenceSubmissionSource,
 } from './ImageCanvasGenerationSubmissionModel';
 import type {
   UiAssetExtractionMark,
@@ -88,6 +91,8 @@ type CanvasGenerationDialogUpdater = (
 
 type UiDesignAssetExtractionOptions = {
   marks?: UiAssetExtractionMark[];
+  model?: string;
+  references?: CharacterReferenceImage[];
   suppressAlert?: boolean;
 };
 
@@ -123,6 +128,11 @@ type GenerationSubmissionWorkflowOptions = {
     dialog: GenerateDialogState,
   ) => GenerateDialogState['placeholder'];
   appendCanvasLayersWithResources: (nextLayers: CanvasLayer[]) => void;
+  updateSourceLayer: (
+    sourceLayerId: string,
+    updater: (layer: CanvasLayer) => CanvasLayer,
+    options?: { fit?: boolean; persist?: boolean },
+  ) => void;
   selectSingleLayer: (layerId: string | null) => void;
   fitLayers: (targetLayers?: CanvasLayer[]) => void;
   setActiveTool: Dispatch<SetStateAction<CanvasTool>>;
@@ -132,6 +142,7 @@ type GenerationSubmissionWorkflowOptions = {
   assetFolderId?: string | null;
   upsertGeneratedAsset?: (asset: EditorAssetSnapshot) => void;
   applyProjectSnapshot?: (project: EditorProjectSnapshot) => void;
+  onQueuedGenerationTask?: () => void;
   onWalletBalanceMayHaveChanged?: () => void;
 };
 
@@ -152,17 +163,6 @@ async function normalizeImageGenerationReferenceImages(
   };
 }
 
-async function normalizeIconSpritesheetReferenceImage(
-  input: Parameters<typeof generateEditorIconSpritesheet>[0],
-) {
-  return {
-    ...input,
-    referenceImageSrc: await resolveEditorImageReferenceDataUrlForGeneration(
-      input.referenceImageSrc,
-    ),
-  };
-}
-
 function delay(ms: number) {
   return new Promise((resolve) => window.setTimeout(resolve, ms));
 }
@@ -207,9 +207,7 @@ async function waitForEditorGenerationQueue(
       return null;
     }
     await delay(EDITOR_GENERATION_QUEUE_POLL_INTERVAL_MS);
-    current = (
-      await getExternalGenerationJobStatus(current.operationId)
-    ).job;
+    current = (await getExternalGenerationJobStatus(current.operationId)).job;
   }
   if (current.status === 'failed') {
     throw new Error(current.error?.trim() || '生成任务失败');
@@ -217,16 +215,18 @@ async function waitForEditorGenerationQueue(
   return current;
 }
 
-async function applyQueuedEditorGenerationProject(
+export async function applyQueuedEditorGenerationProject(
   response: { queueState?: ExternalGenerationJobStatusRecord | null },
   projectId: string | null | undefined,
   applyProjectSnapshot: ((project: EditorProjectSnapshot) => void) | undefined,
+  onQueuedGenerationTask?: () => void,
   onWalletBalanceMayHaveChanged?: () => void,
 ) {
   const queueState = queuedStateFromResponse(response);
   if (!queueState) {
     return false;
   }
+  onQueuedGenerationTask?.();
   let terminalState: ExternalGenerationJobStatusRecord | null = null;
   try {
     terminalState = await waitForEditorGenerationQueue(queueState);
@@ -243,7 +243,8 @@ async function applyQueuedEditorGenerationProject(
 }
 
 function positiveCanvasSize(value: number | null | undefined, fallback = 1) {
-  const resolved = Number.isFinite(value) && (value ?? 0) > 0 ? value : fallback;
+  const resolved =
+    Number.isFinite(value) && (value ?? 0) > 0 ? value : fallback;
   return Math.max(1, Math.round(resolved ?? 1));
 }
 
@@ -304,6 +305,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   hasCanvasGenerationDialogById,
   getGeneratingDialogPlaceholder,
   appendCanvasLayersWithResources,
+  updateSourceLayer,
   selectSingleLayer,
   fitLayers,
   setActiveTool,
@@ -313,6 +315,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
   assetFolderId,
   upsertGeneratedAsset,
   applyProjectSnapshot,
+  onQueuedGenerationTask,
   onWalletBalanceMayHaveChanged,
 }: GenerationSubmissionWorkflowOptions) {
   const addGeneratedLayersToCanvas = useCallback(
@@ -467,6 +470,41 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     ],
   );
 
+  const applyQuickEditResultToSourceLayer = useCallback(
+    (
+      generated: Parameters<
+        typeof applyImageEditResultToSourceLayer
+      >[0]['generated'],
+      sourceLayer: CanvasLayer,
+      generationInputs: CanvasGenerationInputs,
+      dialogId?: string,
+    ) => {
+      updateSourceLayer(
+        sourceLayer.id,
+        (layer) =>
+          applyImageEditResultToSourceLayer({
+            generated,
+            sourceLayer: layer,
+            generationInputs,
+          }),
+        { fit: false, persist: false },
+      );
+      setQuickEditPanel(null);
+      setActiveTool('select');
+      setActiveSidebarPanel('layers');
+      if (dialogId) {
+        updateCanvasGenerationDialogById(dialogId, () => null);
+      }
+    },
+    [
+      setActiveSidebarPanel,
+      setActiveTool,
+      setQuickEditPanel,
+      updateCanvasGenerationDialogById,
+      updateSourceLayer,
+    ],
+  );
+
   const addIconSpritesheetResultLayers = useCallback(
     (
       generated: Parameters<
@@ -705,17 +743,22 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       }
 
       try {
-        let sourceImageSrc = await resolveEditorImageReferenceDataUrl(
-          sourceLayer.objectKey?.trim() || sourceLayer.src,
-        );
+        let sourceImageSrc = sourceLayer.objectKey?.trim() || sourceLayer.src;
         if (options.marks?.length) {
+          sourceImageSrc =
+            await resolveEditorImageReferenceDataUrl(sourceImageSrc);
           sourceImageSrc = await renderUiDesignAssetExtractionMarkedImage({
             source: sourceImageSrc,
             marks: options.marks,
           });
         }
-        const generationInputs =
-          buildUiDesignAssetExtractionGenerationInputs(sourceLayer);
+        const generationInputs = buildUiDesignAssetExtractionGenerationInputs(
+          sourceLayer,
+          options.references,
+        );
+        const referenceImageSrcs = (options.references ?? [])
+          .map((reference) => resolveImageReferenceSubmissionSource(reference))
+          .filter((source) => source.trim().length > 0);
         const extractionPlan = resolveUiAssetExtractionGenerationPlan(
           options.marks?.length ?? 0,
         );
@@ -730,6 +773,10 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         const generated = await runEditorGenerationWithWalletRefresh(
           extractEditorUiDesignAssets({
             sourceImageSrc,
+            model: normalizeEditorImageModel(
+              options.model ?? DEFAULT_IMAGE_MODEL,
+            ),
+            ...(referenceImageSrcs.length ? { referenceImageSrcs } : {}),
             projectId,
             generationInputs,
             assetFolderId,
@@ -752,6 +799,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             generated,
             projectId,
             applyProjectSnapshot,
+            onQueuedGenerationTask,
             onWalletBalanceMayHaveChanged,
           )
         ) {
@@ -833,13 +881,11 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       });
 
       try {
-        const iconGenerationInput =
-          await normalizeIconSpritesheetReferenceImage(submissionPlan.input);
         const canvasCompletionPlaceholder =
           getGeneratingDialogPlaceholder(dialog);
         const generated = await runEditorGenerationWithWalletRefresh(
           generateEditorIconSpritesheet({
-            ...iconGenerationInput,
+            ...submissionPlan.input,
             projectId,
             generationInputs: submissionPlan.generationInputs,
             assetFolderId,
@@ -861,6 +907,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             generated,
             projectId,
             applyProjectSnapshot,
+            onQueuedGenerationTask,
             onWalletBalanceMayHaveChanged,
           )
         ) {
@@ -907,7 +954,6 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     const panelMode = quickEditPanel.mode ?? 'quick-edit';
     const quickEditReferences =
       panelMode === 'redraw' ? [] : (quickEditPanel.quickEditReferences ?? []);
-    const sourceReferenceIndex = quickEditReferences.length + 1;
     const quickEditAspectRatio =
       quickEditPanel.aspectRatio ??
       inferEditorImageAspectRatio(
@@ -929,13 +975,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     const basePrompt =
       quickEditPanel.prompt.trim() ||
       (panelMode === 'redraw' ? '重绘图片' : '快速编辑图片');
-    const normalizedPrompt =
-      panelMode === 'redraw'
-        ? basePrompt
-        : normalizeQuickEditPromptSourceReference(
-            basePrompt,
-            sourceReferenceIndex,
-          );
+    const normalizedPrompt = panelMode === 'redraw' ? basePrompt : basePrompt;
     let quickEditDialogId: string | undefined;
     if (panelMode === 'quick-edit') {
       const quickEditDraft = createQuickEditGenerationDialogDraft({
@@ -980,13 +1020,19 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     }
 
     try {
-      const extraReferenceImageSrcs = await Promise.all(
-        quickEditReferences.map((reference) =>
-          resolveEditorImageReferenceDataUrl(
-            reference.objectKey?.trim() || reference.src,
-          ),
-        ),
-      );
+      const needsExtraReferenceImageSrcs =
+        panelMode === 'quick-edit' ||
+        panelMode === 'redraw' ||
+        isVideoQuickEditSource(quickEditSourceLayer);
+      const extraReferenceImageSrcs = needsExtraReferenceImageSrcs
+        ? await Promise.all(
+            quickEditReferences.map((reference) =>
+              resolveEditorImageReferenceDataUrl(
+                reference.objectKey?.trim() || reference.src,
+              ),
+            ),
+          )
+        : [];
       const quickEditFrame = quickEditDialogId
         ? getGeneratingDialogPlaceholder({
             id: quickEditDialogId,
@@ -1047,6 +1093,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             generated,
             projectId,
             applyProjectSnapshot,
+            onQueuedGenerationTask,
             onWalletBalanceMayHaveChanged,
           )
         ) {
@@ -1098,6 +1145,8 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             generationInputs,
             sourceResourceId: quickEditSourceLayer.resourceId,
             assetKind: quickEditSourceLayer.assetKind,
+            assetFolderId,
+            assetLabel: `${quickEditSourceLayer.title} 快速编辑`,
             ...(projectId && quickEditCanvasCompletionPlaceholder
               ? {
                   canvasCompletion: {
@@ -1115,6 +1164,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             generated,
             projectId,
             applyProjectSnapshot,
+            onQueuedGenerationTask,
             onWalletBalanceMayHaveChanged,
           )
         ) {
@@ -1122,6 +1172,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         }
         if (generated.project && applyProjectSnapshot) {
           applyProjectSnapshot(generated.project);
+          if (generated.asset) {
+            upsertGeneratedAsset?.(generated.asset);
+          }
           return;
         }
         addVideoResultLayer(
@@ -1169,45 +1222,62 @@ export function useImageCanvasGenerationSubmissionWorkflow({
       const isCharacterRedraw =
         panelMode === 'redraw' &&
         quickEditSourceLayer.assetKind === 'character';
-      const generated = await runEditorGenerationWithWalletRefresh(
-        generateEditorImage({
-          prompt: normalizedPrompt,
-          size: quickEditSize,
-          aspectRatio: quickEditAspectRatio,
-          imageSize: quickEditImageSize,
-          kind: isCharacterRedraw ? 'character' : 'quick-edit',
-          model: normalizeEditorImageModel(quickEditPanel.model),
-          referenceImageSrcs: [
-            ...extraReferenceImageSrcs,
-            sourceReferenceImageSrc,
-          ],
-          projectId,
-          assetKind: quickEditSourceLayer.assetKind,
-          generationInputs,
-          assetFolderId,
-          assetLabel: `${quickEditSourceLayer.title} ${
-            panelMode === 'redraw' ? '重绘' : '快速编辑'
-          }`,
-          sourceResourceId: quickEditSourceLayer.resourceId,
-          ...(projectId && quickEditCanvasCompletionPlaceholder
-            ? {
-                canvasCompletion: {
-                  dialogId: quickEditDialogId,
-                  title: `${quickEditSourceLayer.title} ${
-                    panelMode === 'redraw' ? '重绘' : '快速编辑'
-                  }`,
-                  placeholder: quickEditCanvasCompletionPlaceholder,
-                },
-              }
-            : {}),
-        }),
-        onWalletBalanceMayHaveChanged,
-      );
+      const generated =
+        panelMode === 'quick-edit'
+          ? await runEditorGenerationWithWalletRefresh(
+              editEditorImage({
+                prompt: normalizedPrompt,
+                sourceImageSrc: sourceReferenceImageSrc,
+                size: quickEditSize,
+                model: normalizeEditorImageModel(quickEditPanel.model),
+                ...(extraReferenceImageSrcs.length
+                  ? { referenceImageSrcs: extraReferenceImageSrcs }
+                  : {}),
+                projectId,
+                assetKind: quickEditSourceLayer.assetKind,
+                generationInputs,
+                assetFolderId,
+                assetLabel: `${quickEditSourceLayer.title} 快速编辑`,
+                sourceResourceId: quickEditSourceLayer.resourceId,
+              }),
+              onWalletBalanceMayHaveChanged,
+            )
+          : await runEditorGenerationWithWalletRefresh(
+              generateEditorImage({
+                prompt: normalizedPrompt,
+                size: quickEditSize,
+                aspectRatio: quickEditAspectRatio,
+                imageSize: quickEditImageSize,
+                kind: isCharacterRedraw ? 'character' : 'quick-edit',
+                model: normalizeEditorImageModel(quickEditPanel.model),
+                referenceImageSrcs: [
+                  ...extraReferenceImageSrcs,
+                  sourceReferenceImageSrc,
+                ],
+                projectId,
+                assetKind: quickEditSourceLayer.assetKind,
+                generationInputs,
+                assetFolderId,
+                assetLabel: `${quickEditSourceLayer.title} 重绘`,
+                sourceResourceId: quickEditSourceLayer.resourceId,
+                ...(projectId && quickEditCanvasCompletionPlaceholder
+                  ? {
+                      canvasCompletion: {
+                        dialogId: quickEditDialogId,
+                        title: `${quickEditSourceLayer.title} 重绘`,
+                        placeholder: quickEditCanvasCompletionPlaceholder,
+                      },
+                    }
+                  : {}),
+              }),
+              onWalletBalanceMayHaveChanged,
+            );
       if (
         await applyQueuedEditorGenerationProject(
           generated,
           projectId,
           applyProjectSnapshot,
+          onQueuedGenerationTask,
           onWalletBalanceMayHaveChanged,
         )
       ) {
@@ -1217,18 +1287,27 @@ export function useImageCanvasGenerationSubmissionWorkflow({
         applyProjectSnapshot(generated.project);
         return;
       }
-      addQuickEditResultLayer(
-        generated,
-        quickEditSourceLayer,
-        generationInputs,
-        panelMode,
-        quickEditDialogId
-          ? {
-              frame: quickEditFrame,
-              dialogId: quickEditDialogId,
-            }
-          : {},
-      );
+      if (panelMode === 'quick-edit') {
+        applyQuickEditResultToSourceLayer(
+          generated,
+          quickEditSourceLayer,
+          generationInputs,
+          quickEditDialogId,
+        );
+      } else {
+        addQuickEditResultLayer(
+          generated,
+          quickEditSourceLayer,
+          generationInputs,
+          panelMode,
+          quickEditDialogId
+            ? {
+                frame: quickEditFrame,
+                dialogId: quickEditDialogId,
+              }
+            : {},
+        );
+      }
     } catch (error) {
       if (quickEditDialogId) {
         updateCanvasGenerationDialogById(
@@ -1264,6 +1343,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
     openCanvasGenerationDialog,
     projectId,
     assetFolderId,
+    upsertGeneratedAsset,
     quickEditPanel,
     quickEditSourceLayer,
     quickEditSelectionState,
@@ -1353,6 +1433,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
               generated,
               projectId,
               applyProjectSnapshot,
+              onQueuedGenerationTask,
               onWalletBalanceMayHaveChanged,
             )
           ) {
@@ -1367,28 +1448,21 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             generationInputs: submissionPlan.generationInputs,
           });
         } else if (submissionPlan.kind === 'quick-edit') {
-          const imageGenerationInput =
-            await normalizeImageGenerationReferenceImages(submissionPlan.input);
-          const canvasCompletionPlaceholder =
-            getGeneratingDialogPlaceholder(dialog);
+          const referenceImageSrc = await resolveEditorImageReferenceDataUrl(
+            submissionPlan.sourceLayer.objectKey?.trim() ||
+              submissionPlan.sourceLayer.src,
+          );
           const generated = await runEditorGenerationWithWalletRefresh(
-            generateEditorImage({
-              ...imageGenerationInput,
+            editEditorImage({
+              prompt: submissionPlan.normalizedPrompt,
+              sourceImageSrc: referenceImageSrc,
+              ...submissionPlan.editInput,
               projectId,
               assetKind: submissionPlan.result.assetKind,
               generationInputs: submissionPlan.result.generationInputs,
               assetFolderId,
               assetLabel: submissionPlan.result.title,
               sourceResourceId: submissionPlan.sourceLayer.resourceId,
-              ...(projectId && canvasCompletionPlaceholder
-                ? {
-                    canvasCompletion: {
-                      dialogId: canvasDialog?.id,
-                      title: submissionPlan.result.title,
-                      placeholder: canvasCompletionPlaceholder,
-                    },
-                  }
-                : {}),
             }),
             onWalletBalanceMayHaveChanged,
           );
@@ -1397,14 +1471,12 @@ export function useImageCanvasGenerationSubmissionWorkflow({
               generated,
               projectId,
               applyProjectSnapshot,
+              onQueuedGenerationTask,
               onWalletBalanceMayHaveChanged,
             )
           ) {
             return;
           }
-          if (submissionPlan.rememberImageModel) {
-            rememberImageModel(submissionPlan.rememberImageModel);
-          }
           if (generated.project && applyProjectSnapshot) {
             applyProjectSnapshot(generated.project);
             if (generated.asset) {
@@ -1412,15 +1484,11 @@ export function useImageCanvasGenerationSubmissionWorkflow({
             }
             return;
           }
-          addQuickEditResultLayer(
+          applyQuickEditResultToSourceLayer(
             generated,
             submissionPlan.sourceLayer,
             submissionPlan.result.generationInputs,
-            'quick-edit',
-            {
-              frame: canvasCompletionPlaceholder,
-              dialogId: canvasDialog?.id,
-            },
+            canvasDialog?.id,
           );
         } else if (submissionPlan.kind === 'video') {
           const canvasCompletionPlaceholder =
@@ -1430,6 +1498,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
               ...submissionPlan.input,
               projectId,
               generationInputs: submissionPlan.result.generationInputs,
+              assetFolderId,
+              assetLabel: submissionPlan.result.title,
+              assetKind: 'video',
               ...(projectId && canvasCompletionPlaceholder
                 ? {
                     canvasCompletion: {
@@ -1447,6 +1518,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
               generated,
               projectId,
               applyProjectSnapshot,
+              onQueuedGenerationTask,
               onWalletBalanceMayHaveChanged,
             )
           ) {
@@ -1454,6 +1526,9 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           }
           if (generated.project && applyProjectSnapshot) {
             applyProjectSnapshot(generated.project);
+            if (generated.asset) {
+              upsertGeneratedAsset?.(generated.asset);
+            }
             return;
           }
           addVideoResultLayer(
@@ -1503,6 +1578,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
               generated,
               projectId,
               applyProjectSnapshot,
+              onQueuedGenerationTask,
               onWalletBalanceMayHaveChanged,
             )
           ) {
@@ -1552,6 +1628,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
               generated,
               projectId,
               applyProjectSnapshot,
+              onQueuedGenerationTask,
               onWalletBalanceMayHaveChanged,
             )
           ) {
@@ -1701,6 +1778,7 @@ export function useImageCanvasGenerationSubmissionWorkflow({
           result,
           projectId,
           applyProjectSnapshot,
+          onQueuedGenerationTask,
           onWalletBalanceMayHaveChanged,
         )
       ) {
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
index be112d68c..f81996560 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.test.tsx
@@ -2,7 +2,7 @@
 
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { useRef, useState } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type {
   CanvasGenerationDialogState,
@@ -31,6 +31,52 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
   };
 });
 
+let mockedComposerRect: DOMRect | null = null;
+let originalGetBoundingClientRect: typeof Element.prototype.getBoundingClientRect;
+
+beforeEach(() => {
+  originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function getBoundingClientRect() {
+    if (
+      mockedComposerRect &&
+      this instanceof HTMLElement &&
+      this.classList.contains('image-canvas-editor__generation-composer')
+    ) {
+      return mockedComposerRect;
+    }
+    return originalGetBoundingClientRect.call(this);
+  };
+});
+
+afterEach(() => {
+  mockedComposerRect = null;
+  Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+});
+
+function createDomRect({
+  left,
+  top,
+  right,
+  bottom,
+}: {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}) {
+  return {
+    x: left,
+    y: top,
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+    toJSON: () => ({}),
+  } as DOMRect;
+}
+
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
   const id = overrides.id ?? 'layer-a';
   return {
@@ -66,6 +112,7 @@ function GenerationSurfaceHarness() {
   const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
   const generationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
   const publicationReferenceButtonRef = useRef<HTMLButtonElement | null>(null);
+  const canvasViewportRef = useRef<HTMLDivElement | null>(null);
   const [viewport, setViewport] = useState({ x: 10, y: 20, scale: 2 });
   const dialogs = useCanvasGenerationDialogs();
   const activeDialog = dialogs.generateDialog;
@@ -78,6 +125,7 @@ function GenerationSurfaceHarness() {
     canvasSize: { width: 900, height: 640 },
     viewport,
     setViewport,
+    canvasViewportRef,
     setLayers,
     layerCounterRef,
     specToolWrapRef,
@@ -136,6 +184,8 @@ function GenerationSurfaceHarness() {
       <span data-testid="composer-top">
         {surface.generationComposerStyle?.top ?? '-'}
       </span>
+      <span data-testid="viewport-x">{viewport.x}</span>
+      <span data-testid="viewport-y">{viewport.y}</span>
       <button
         type="button"
         onClick={() => surface.switchGenerationTool('generate')}
@@ -204,7 +254,10 @@ function GenerationSurfaceHarness() {
       >
         切换选择
       </button>
-      {surface.generationComposerNode}
+      <div ref={canvasViewportRef} data-testid="viewport">
+        <div className="image-canvas-editor__bottom-toolbar">底部工具栏</div>
+        {surface.generationComposerNode}
+      </div>
     </div>
   );
 }
@@ -357,4 +410,54 @@ describe('useImageCanvasGenerationSurface', () => {
       screen.getByRole('dialog', { name: '生成游戏背景音乐' }),
     ).toBeTruthy();
   });
+
+  it('pans the canvas when an opened composer would be covered by the bottom toolbar', async () => {
+    render(<GenerationSurfaceHarness />);
+    const viewportElement = screen.getByTestId('viewport');
+    const toolbarElement = viewportElement.querySelector(
+      '.image-canvas-editor__bottom-toolbar',
+    ) as HTMLElement;
+
+    Object.defineProperty(viewportElement, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({
+        x: 0,
+        y: 0,
+        left: 0,
+        top: 0,
+        right: 900,
+        bottom: 640,
+        width: 900,
+        height: 640,
+        toJSON: () => ({}),
+      }),
+    });
+    Object.defineProperty(toolbarElement, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({
+        x: 250,
+        y: 570,
+        left: 250,
+        top: 570,
+        right: 650,
+        bottom: 620,
+        width: 400,
+        height: 50,
+        toJSON: () => ({}),
+      }),
+    });
+    mockedComposerRect = createDomRect({
+      left: 114,
+      top: 520,
+      right: 786,
+      bottom: 700,
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: '切换生成' }));
+    await screen.findByRole('dialog', { name: '生成图片' });
+
+    await act(async () => {});
+
+    expect(Number(screen.getByTestId('viewport-y').textContent)).toBe(1086);
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasGenerationSurface.tsx b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
index d55924e65..d8d578d0e 100644
--- a/src/components/image-editor/useImageCanvasGenerationSurface.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationSurface.tsx
@@ -7,6 +7,7 @@ import {
   type SetStateAction,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useRef,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -40,6 +41,7 @@ import {
   resolveGenerationComposerStyle,
   resolveIconComposerStyle,
   resolveQuickEditPanelStyle,
+  resolveViewportForOverlayVisibility,
 } from './ImageCanvasOverlayModel';
 import { useImageCanvasGenerationWorkflow } from './useImageCanvasGenerationWorkflow';
 
@@ -54,6 +56,7 @@ type ImageCanvasGenerationSurfaceOptions = {
   canvasSize: { width: number; height: number };
   viewport: CanvasViewport;
   setViewport: Dispatch<SetStateAction<CanvasViewport>>;
+  canvasViewportRef: RefObject<HTMLDivElement | null>;
   setLayers: Dispatch<SetStateAction<CanvasLayer[]>>;
   layerCounterRef: MutableRefObject<number>;
   specToolWrapRef: RefObject<HTMLSpanElement | null>;
@@ -133,12 +136,73 @@ function buildToolbarPortalMenuStyle(
 }
 
 const TOOLBAR_OPTION_CLOSE_DELAY_MS = 160;
+const COMPOSER_SAFE_MARGIN = 12;
+const COMPOSER_MIN_SAFE_HEIGHT = 120;
+
+function getViewportLocalBounds(
+  element: Element | null,
+  viewportRect: DOMRect,
+) {
+  const rect = element?.getBoundingClientRect();
+  if (!rect) {
+    return null;
+  }
+  return {
+    left: rect.left - viewportRect.left,
+    top: rect.top - viewportRect.top,
+    right: rect.right - viewportRect.left,
+    bottom: rect.bottom - viewportRect.top,
+  };
+}
+
+function getComposerSafeBounds(viewportElement: HTMLElement) {
+  const viewportRect = viewportElement.getBoundingClientRect();
+  const bottomToolbarBounds = getViewportLocalBounds(
+    viewportElement.querySelector('.image-canvas-editor__bottom-toolbar'),
+    viewportRect,
+  );
+  const panelDockBounds = getViewportLocalBounds(
+    viewportElement.querySelector('.image-canvas-editor__panel-dock'),
+    viewportRect,
+  );
+  const coveredBottom = Math.min(
+    viewportRect.height,
+    ...[bottomToolbarBounds, panelDockBounds]
+      .map((bounds) => bounds?.top)
+      .filter((top): top is number => typeof top === 'number'),
+  );
+  const safeBottom = Math.max(
+    COMPOSER_SAFE_MARGIN + COMPOSER_MIN_SAFE_HEIGHT,
+    coveredBottom - COMPOSER_SAFE_MARGIN,
+  );
+  return {
+    left: COMPOSER_SAFE_MARGIN,
+    top: COMPOSER_SAFE_MARGIN,
+    right: Math.max(
+      COMPOSER_SAFE_MARGIN,
+      viewportRect.width - COMPOSER_SAFE_MARGIN,
+    ),
+    bottom: safeBottom,
+  };
+}
+
+function getActiveComposerElement(viewportElement: HTMLElement) {
+  return viewportElement.querySelector<HTMLElement>(
+    [
+      '.image-canvas-editor__generation-composer[role="dialog"]',
+      '.image-canvas-editor__quick-edit-panel[role="dialog"]',
+      '.image-canvas-editor__crop-expand-panel[role="dialog"]',
+      '.image-canvas-editor__character-animation-panel[role="dialog"]',
+    ].join(', '),
+  );
+}
 
 export function useImageCanvasGenerationSurface({
   layers,
   canvasSize,
   viewport,
   setViewport,
+  canvasViewportRef,
   setLayers,
   layerCounterRef,
   specToolWrapRef,
@@ -179,6 +243,7 @@ export function useImageCanvasGenerationSurface({
   const toolbarOptionCloseTimerRef = useRef<ReturnType<
     typeof setTimeout
   > | null>(null);
+  const adjustedComposerVisibilityKeyRef = useRef<string | null>(null);
   const generationWorkflow = useImageCanvasGenerationWorkflow({
     layers,
     canvasSize,
@@ -251,6 +316,72 @@ export function useImageCanvasGenerationSurface({
           viewport,
           canvasSize,
         });
+  const activeComposerVisibilityKey =
+    activeCanvasGenerationDialog &&
+    activeCanvasGenerationDialog.status !== 'generating' &&
+    activeCanvasGenerationDialog.composerOpen !== false &&
+    generationComposerStyle
+      ? `${activeCanvasGenerationDialog.id}:${activeCanvasGenerationDialog.mode}:${activeCanvasGenerationDialog.placeholder?.x ?? '-'}:${activeCanvasGenerationDialog.placeholder?.y ?? '-'}:${activeCanvasGenerationDialog.placeholder?.width ?? '-'}:${activeCanvasGenerationDialog.placeholder?.height ?? '-'}`
+      : generationWorkflow.quickEditPanel &&
+          generationWorkflow.quickEditSourceLayer &&
+          quickEditPanelStyle
+        ? `quick-edit-panel:${generationWorkflow.quickEditPanel.sourceLayerId}:${generationWorkflow.quickEditPanel.mode ?? 'quick-edit'}`
+        : generationWorkflow.cropExpandPanel &&
+            generationWorkflow.cropExpandSourceLayer &&
+            cropExpandPanelStyle
+          ? `crop-expand-panel:${generationWorkflow.cropExpandPanel.sourceLayerId}`
+          : generationWorkflow.characterAnimationPanel &&
+              generationWorkflow.characterAnimationSourceLayer &&
+              characterAnimationPanelStyle
+            ? `character-animation-panel:${generationWorkflow.characterAnimationPanel.sourceLayerId}`
+            : null;
+
+  useLayoutEffect(() => {
+    if (!activeComposerVisibilityKey) {
+      adjustedComposerVisibilityKeyRef.current = null;
+      return;
+    }
+    if (
+      adjustedComposerVisibilityKeyRef.current === activeComposerVisibilityKey
+    ) {
+      return;
+    }
+    const viewportElement = canvasViewportRef.current;
+    if (!viewportElement) {
+      return;
+    }
+    const composerElement = getActiveComposerElement(viewportElement);
+    if (!composerElement) {
+      return;
+    }
+    const viewportRect = viewportElement.getBoundingClientRect();
+    if (viewportRect.width <= 0 || viewportRect.height <= 0) {
+      return;
+    }
+    const composerRect = composerElement.getBoundingClientRect();
+    if (composerRect.width <= 0 || composerRect.height <= 0) {
+      return;
+    }
+    const nextViewport = resolveViewportForOverlayVisibility({
+      viewport,
+      overlayBounds: {
+        left: composerRect.left - viewportRect.left,
+        top: composerRect.top - viewportRect.top,
+        right: composerRect.right - viewportRect.left,
+        bottom: composerRect.bottom - viewportRect.top,
+      },
+      safeBounds: getComposerSafeBounds(viewportElement),
+    });
+    if (nextViewport !== viewport) {
+      adjustedComposerVisibilityKeyRef.current = activeComposerVisibilityKey;
+      setViewport(nextViewport);
+    }
+  }, [
+    activeComposerVisibilityKey,
+    canvasViewportRef,
+    setViewport,
+    viewport,
+  ]);
 
   const clearToolbarOptionCloseTimer = useCallback(() => {
     if (!toolbarOptionCloseTimerRef.current) {
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 74d69df72..6754110ab 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -14,6 +14,7 @@ import type {
 } from './ImageCanvasEditorTypes';
 import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
 import { useImageCanvasGenerationWorkflow } from './useImageCanvasGenerationWorkflow';
+import { IMAGE_MODEL_GPT_IMAGE_2 } from './ImageCanvasGenerationModel';
 
 const generateEditorImageMock = vi.hoisted(() => vi.fn());
 const generateEditorCharacterAnimationMock = vi.hoisted(() => vi.fn());
@@ -22,6 +23,8 @@ const generateEditorSoundEffectMock = vi.hoisted(() => vi.fn());
 const generateEditorBackgroundMusicMock = vi.hoisted(() => vi.fn());
 const editEditorImageMock = vi.hoisted(() => vi.fn());
 const renderCropExpandImageMock = vi.hoisted(() => vi.fn());
+const removeImageBackgroundMock = vi.hoisted(() => vi.fn());
+const resolveEditorImageReferenceDataUrlMock = vi.hoisted(() => vi.fn());
 
 vi.mock('../../services/image-editor/editorImageReference', async () => {
   const actual = await vi.importActual<
@@ -29,7 +32,7 @@ vi.mock('../../services/image-editor/editorImageReference', async () => {
   >('../../services/image-editor/editorImageReference');
   return {
     ...actual,
-    resolveEditorImageReferenceDataUrl: vi.fn(async (src: string) => src),
+    resolveEditorImageReferenceDataUrl: resolveEditorImageReferenceDataUrlMock,
     resolveEditorImageReferenceDataUrlForGeneration: vi.fn(
       async (src: string) => src,
     ),
@@ -57,6 +60,7 @@ vi.mock('./ImageCanvasRasterEditModel', async () => {
   >('./ImageCanvasRasterEditModel');
   return {
     ...actual,
+    removeImageBackground: removeImageBackgroundMock,
     renderCropExpandImage: renderCropExpandImageMock,
   };
 });
@@ -171,7 +175,7 @@ function GenerationWorkflowHarness({
         {layers
           .map(
             (layer) =>
-              `${layer.id}:${layer.title}:${layer.sourceResourceId ?? '-'}:${layer.assetKind ?? '-'}`,
+              `${layer.id}:${layer.title}:${layer.sourceResourceId ?? '-'}:${layer.assetKind ?? '-'}:${layer.src}:${layer.taskId ?? '-'}`,
           )
           .join('|')}
       </span>
@@ -223,7 +227,7 @@ function GenerationWorkflowHarness({
       </span>
       <span data-testid="ui-extraction">
         {workflow.uiAssetExtractionState
-          ? `${workflow.uiAssetExtractionState.sourceLayerId}:${workflow.uiAssetExtractionState.tool ?? 'none'}:${workflow.uiAssetExtractionState.marks.length}:${workflow.uiAssetExtractionState.status}`
+          ? `${workflow.uiAssetExtractionState.sourceLayerId}:${workflow.uiAssetExtractionState.tool ?? 'none'}:${workflow.uiAssetExtractionState.marks.length}:${workflow.uiAssetExtractionState.status}:${workflow.uiAssetExtractionState.model}`
           : '-'}
       </span>
       <span data-testid="ui-extraction-source">
@@ -245,9 +249,27 @@ function GenerationWorkflowHarness({
       <span data-testid="fit-count">
         {fitLayersMockRef.current.mock.calls.length}
       </span>
+      <span data-testid="task-refresh-key">{workflow.taskListRefreshKey}</span>
       <button type="button" onClick={workflow.openGenerateDialog}>
         打开生成
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.openCanvasGenerationDialog({
+            mode: 'generate',
+            prompt: '',
+            status: 'idle',
+            composerOpen: true,
+            sourceLayerId: 'layer-source',
+            imageModel: 'gpt-image-2',
+            aspectRatio: '2:3',
+            imageSize: '2K',
+          })
+        }
+      >
+        写入源图生成参数快照
+      </button>
       <button type="button" onClick={workflow.openCharacterGenerationDialog}>
         打开角色生成
       </button>
@@ -334,6 +356,75 @@ function GenerationWorkflowHarness({
       >
         打开用户快照改造
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.openQuickEditPanel(
+            createLayer({
+              id: 'layer-character-generated',
+              title: '角色形象',
+              assetKind: 'character',
+              prompt: '【系统内置】角色提示词',
+              generationInputs: {
+                fields: [{ title: '角色设定', value: '红发骑士' }],
+                references: [],
+              },
+            }),
+          )
+        }
+      >
+        快速编辑角色图
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.openRedrawPanel(
+            createLayer({
+              id: 'layer-publication-generated',
+              title: '宣发素材',
+              assetKind: 'publication-material',
+              originalWidth: 720,
+              originalHeight: 1280,
+              width: 180,
+              height: 320,
+              prompt: '【系统内置】宣发提示词',
+              generationInputs: {
+                fields: [
+                  { title: '游戏名', value: '星海远征' },
+                  { title: '游戏分类', value: '冒险' },
+                  { title: '一句话描述游戏', value: '驾驶飞船探索星云' },
+                ],
+                references: [],
+              },
+            }),
+          )
+        }
+      >
+        改造宣发图
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.openCanvasGenerationDialog({
+            mode: 'generate',
+            prompt: '普通图',
+            status: 'idle',
+            composerOpen: true,
+            generatedLayerId: 'layer-source',
+            imageModel: 'gpt-image-2',
+            aspectRatio: '2:3',
+            imageSize: '2K',
+          })
+        }
+      >
+        写入普通图来源生成器
+      </button>
+      <button
+        type="button"
+        onClick={() => workflow.openQuickEditPanel(layers[0]!)}
+      >
+        快速编辑来源普通图
+      </button>
       <button
         type="button"
         onClick={() => workflow.openCropExpandPanel(layers[0]!)}
@@ -373,6 +464,12 @@ function GenerationWorkflowHarness({
       <button type="button" onClick={() => void workflow.submitCropExpand()}>
         完成裁扩
       </button>
+      <button
+        type="button"
+        onClick={() => void workflow.removeSelectedLayerBackground(layers[0]!)}
+      >
+        去除背景
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -405,6 +502,21 @@ function GenerationWorkflowHarness({
       >
         填写生成提示词
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          dialogs.setGenerateDialog((currentDialog) =>
+            currentDialog
+              ? {
+                  ...currentDialog,
+                  prompt: '快速修图',
+                }
+              : currentDialog,
+          )
+        }
+      >
+        填写快速编辑提示词
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -648,6 +760,14 @@ function GenerationWorkflowHarness({
       >
         选择椭圆框选
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.changeUiAssetExtractionModel(IMAGE_MODEL_GPT_IMAGE_2)
+        }
+      >
+        选择GPT提取模型
+      </button>
       <button
         type="button"
         onClick={() => {
@@ -684,6 +804,9 @@ function GenerationWorkflowHarness({
 describe('useImageCanvasGenerationWorkflow', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    resolveEditorImageReferenceDataUrlMock.mockImplementation(
+      async (src: string) => src,
+    );
     window.localStorage.clear();
   });
 
@@ -699,6 +822,69 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('opens the source generator for generated character quick edit', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '快速编辑角色图' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('character');
+    expect(screen.getByTestId('selected').textContent).toBe('-');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'character:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-prompt').textContent).toBe('-');
+    expect(screen.getByTestId('quick-edit-selection').textContent).toBe('-');
+  });
+
+  it('opens the source generator for generated publication redraw', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '改造宣发图' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('publication');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'publication:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-prompt').textContent).toBe(
+      '游戏名：星海远征\n游戏分类：冒险\n一句话描述游戏：驾驶飞船探索星云',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'publication:gpt-image-2:9:16:1K',
+    );
+  });
+
+  it('opens the source generator for plain generated images with a source dialog', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '写入普通图来源生成器' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '快速编辑来源普通图' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('generate');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'generate:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'generate:gpt-image-2:2:3:2K',
+    );
+    expect(screen.getByTestId('quick-edit-selection').textContent).toBe('-');
+  });
+
+  it('keeps plain images without a source generator on quick edit generator', () => {
+    render(<GenerationWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
+
+    expect(screen.getByTestId('tool').textContent).toBe('generate');
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'quick-edit:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
+      'layer-source:none:0',
+    );
+  });
+
   it('calculates character animation button price from the model pricing config', () => {
     render(<GenerationWorkflowHarness />);
 
@@ -797,12 +983,12 @@ describe('useImageCanvasGenerationWorkflow', () => {
     fireEvent.click(screen.getByRole('button', { name: '打开生成' }));
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
 
-    expect(screen.getByTestId('dialog').textContent).toBe('-');
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:-',
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'quick-edit:idle:open:-:placeholder',
     );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     expect(screen.getByTestId('generation-dialogs').textContent).toBe(
-      'generation-dialog-1:generate:closed',
+      'generation-dialog-1:generate:closed|generation-dialog-2:quick-edit:open',
     );
   });
 
@@ -822,6 +1008,58 @@ describe('useImageCanvasGenerationWorkflow', () => {
     );
   });
 
+  it('keeps source image model and dimensions when opening quick edit', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          {
+            ...createLayer(),
+            originalWidth: 1537,
+            originalHeight: 1024,
+          },
+        ]}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '写入源图生成参数快照' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
+
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'generate:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'generate:gpt-image-2:2:3:2K',
+    );
+  });
+
+  it('keeps target generator options when opening redraw', () => {
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          {
+            ...createLayer(),
+            originalWidth: 1537,
+            originalHeight: 1024,
+          },
+        ]}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '写入源图生成参数快照' }),
+    );
+    fireEvent.click(screen.getByRole('button', { name: '打开图片改造' }));
+
+    expect(screen.getByTestId('dialog').textContent).toBe(
+      'generate:idle:open:-:placeholder',
+    );
+    expect(screen.getByTestId('dialog-image-options').textContent).toBe(
+      'generate:gpt-image-2:2:3:2K',
+    );
+  });
+
   it('submits audio remodel with restored sound parameters and appends the new audio layer', async () => {
     generateEditorSoundEffectMock.mockResolvedValueOnce({
       audioSrc: 'data:audio/mpeg;base64,generated',
@@ -1207,9 +1445,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
 
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:-',
-    );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:none:0',
     );
@@ -1244,15 +1480,15 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:none:0',
     );
-    fireEvent.click(screen.getByRole('button', { name: '选择快速编辑矩形框选' }));
+    fireEvent.click(
+      screen.getByRole('button', { name: '选择快速编辑矩形框选' }),
+    );
     fireEvent.click(screen.getByRole('button', { name: '快速编辑框选' }));
 
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:rect:1',
     );
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:对1号红色圈选框里的内容做以下修改：',
-    );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
 
     fireEvent.click(
       screen.getByRole('button', { name: '选择快速编辑椭圆框选' }),
@@ -1262,60 +1498,43 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('quick-edit-selection').textContent).toBe(
       'layer-source:ellipse:2',
     );
-    expect(screen.getByTestId('quick-edit').textContent).toBe(
-      'layer-source:idle:对1号红色圈选框里的内容做以下修改：\n对2号红色圈选框里的内容做以下修改：',
-    );
+    expect(screen.getByTestId('quick-edit').textContent).toBe('-');
   });
 
-  it('submits quick edits beside the source and fits source plus result', async () => {
-    generateEditorImageMock.mockResolvedValueOnce(
+  it('submits quick edits and updates the source layer directly', async () => {
+    editEditorImageMock.mockResolvedValueOnce(
       createGenerated({ prompt: '快速修图' }),
     );
     render(<GenerationWorkflowHarness />);
 
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
-    await waitFor(() => {
-      expect(screen.getByTestId('quick-edit').textContent).toBe(
-        'layer-source:idle:-',
-      );
-    });
-    fireEvent.click(screen.getByRole('button', { name: '填写快速编辑' }));
-    await waitFor(() => {
-      expect(screen.getByTestId('quick-edit').textContent).toBe(
-        'layer-source:idle:快速修图',
-      );
-    });
-    fireEvent.click(screen.getByRole('button', { name: '提交快速编辑' }));
+    fireEvent.click(screen.getByRole('button', { name: '填写快速编辑提示词' }));
+    fireEvent.click(screen.getByRole('button', { name: '提交生成' }));
 
     await waitFor(() => {
-      expect(generateEditorImageMock).toHaveBeenCalledWith({
-        prompt: '快速修图',
-        size: '1024x768',
-        aspectRatio: '4:3',
-        imageSize: '1K',
-        kind: 'quick-edit',
-        model: 'gemini-3.1-flash-image-preview',
-        referenceImageSrcs: ['data:image/png;base64,source'],
-        projectId: undefined,
-        assetFolderId: undefined,
-        assetKind: undefined,
-        assetLabel: '源图 快速编辑',
-        sourceResourceId: 'resource-source',
-        generationInputs: {
-          fields: [{ title: '快速编辑提示词', value: '快速修图' }],
-          references: [],
-        },
-      });
+      expect(editEditorImageMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          prompt: '快速修图',
+          sourceImageSrc: 'data:image/png;base64,source',
+          assetLabel: '源图 快速编辑',
+          sourceResourceId: 'resource-source',
+          generationInputs: {
+            fields: [{ title: '快速编辑提示词', value: '快速修图' }],
+            references: [],
+          },
+        }),
+      );
     });
+    expect(generateEditorImageMock).not.toHaveBeenCalled();
 
     await waitFor(() => {
       expect(screen.getByTestId('layers').textContent).toContain(
-        'layer-quick-edit-1:源图 快速编辑:resource-source',
+        'layer-source:源图:resource-source:-:data:image/png;base64,generated:task-generated',
       );
     });
     expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     expect(screen.getByTestId('tool').textContent).toBe('select');
-    expect(screen.getByTestId('fit-count').textContent).toBe('1');
+    expect(screen.getByTestId('fit-count').textContent).toBe('0');
   });
 
   it('opens crop-expand in free ratio and completes as a new beside layer', async () => {
@@ -1357,13 +1576,63 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('fit-count').textContent).toBe('1');
   });
 
+  it('resolves private character image before removing background', async () => {
+    resolveEditorImageReferenceDataUrlMock.mockResolvedValueOnce(
+      'data:image/png;base64,resolved-character',
+    );
+    removeImageBackgroundMock.mockResolvedValueOnce({
+      imageSrc:
+        '/generated-character-drafts/editor/background-removal/result.png',
+      objectKey:
+        'generated-character-drafts/editor/background-removal/result.png',
+      assetObjectId: 'asset-object-background-removal',
+      width: 512,
+      height: 768,
+      taskId: 'background-removal-task',
+      elapsedMs: 1234,
+      provider: 'BiRefNet',
+    });
+    render(
+      <GenerationWorkflowHarness
+        initialLayers={[
+          createLayer({
+            assetKind: 'character',
+            objectKey: 'generated-character-drafts/editor/private.png',
+            src: '/api/assets/read-url?objectKey=generated-character-drafts/editor/private.png',
+          }),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '去除背景' }));
+
+    await waitFor(() => expect(removeImageBackgroundMock).toHaveBeenCalled());
+    expect(resolveEditorImageReferenceDataUrlMock).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(removeImageBackgroundMock).toHaveBeenCalledWith({
+        sourceImageSrc: '/generated-character-drafts/editor/private.png',
+        projectId: undefined,
+        targetLayerId: 'layer-source',
+        assetKind: 'character',
+        generationInputs: undefined,
+        assetFolderId: undefined,
+        assetLabel: '源图 去背景',
+        sourceResourceId: 'resource-source',
+      });
+    });
+    expect(screen.getByTestId('layers').textContent).toContain(
+      'layer-source:源图:resource-source:character:/generated-character-drafts/editor/background-removal/result.png:background-removal-task',
+    );
+    expect(screen.getByTestId('task-refresh-key').textContent).toBe('0');
+  });
+
   it('opens UI design extraction as a mark selection state before submitting', () => {
     render(<GenerationWorkflowHarness />);
 
     fireEvent.click(screen.getByRole('button', { name: '打开UI素材框选' }));
 
     expect(screen.getByTestId('ui-extraction').textContent).toBe(
-      'layer-source:rect:0:idle',
+      'layer-source:rect:0:idle:gemini-3.1-flash-image-preview',
     );
     expect(screen.getByTestId('ui-extraction-source').textContent).toBe(
       'layer-source',
@@ -1372,10 +1641,11 @@ describe('useImageCanvasGenerationWorkflow', () => {
     expect(screen.getByTestId('tool').textContent).toBe('select');
 
     fireEvent.click(screen.getByRole('button', { name: '选择椭圆框选' }));
+    fireEvent.click(screen.getByRole('button', { name: '选择GPT提取模型' }));
     fireEvent.click(screen.getByRole('button', { name: '框选UI素材' }));
 
     expect(screen.getByTestId('ui-extraction').textContent).toBe(
-      'layer-source:ellipse:1:idle',
+      'layer-source:ellipse:1:idle:gpt-image-2',
     );
   });
 
@@ -1384,9 +1654,7 @@ describe('useImageCanvasGenerationWorkflow', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '打开快速编辑' }));
     await waitFor(() => {
-      expect(screen.getByTestId('quick-edit').textContent).toBe(
-        'layer-source:idle:-',
-      );
+      expect(screen.getByTestId('quick-edit').textContent).toBe('-');
     });
     fireEvent.click(screen.getByRole('button', { name: '打开修改状态' }));
     fireEvent.click(screen.getByRole('button', { name: '打开UI素材框选' }));
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 5836af849..d310a3b75 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -10,6 +10,7 @@ import {
   useState,
 } from 'react';
 
+import { resolveEditorImageReferenceDataUrl } from '../../services/image-editor/editorImageReference';
 import type {
   EditorAssetSnapshot,
   EditorProjectSnapshot,
@@ -36,7 +37,6 @@ import {
   appendCharacterReference,
   appendGenerationReference,
   appendPublicationReference,
-  appendQuickEditReference,
   assignCharacterSpecReference,
   assignIconSpecReference,
   assignUiDesignSpecReference,
@@ -52,10 +52,12 @@ import {
   createQuickEditGenerationDialogDraft,
   createQuickEditPanelDraft,
   createRedrawPanelDraft,
+  createSameSourceGenerationDialogDraft,
   createSoundEffectGenerationDialogDraft,
   createSpecDialogDraft,
   createUiDesignGenerationDialogDraft,
   createVideoGenerationDialogDraft,
+  createVideoRedrawGenerationDialogDraft,
   hideGeneratedLayerComposerAfterBlur,
   isCharacterSpecReferenceLayer,
   isIconSpecReferenceLayer,
@@ -95,7 +97,10 @@ import {
   type UiAssetExtractionTool,
   updateUiAssetExtractionDraftMark,
 } from './ImageCanvasUiAssetExtractionModel';
-import { useImageCanvasGenerationSubmissionWorkflow } from './useImageCanvasGenerationSubmissionWorkflow';
+import {
+  applyQueuedEditorGenerationProject,
+  useImageCanvasGenerationSubmissionWorkflow,
+} from './useImageCanvasGenerationSubmissionWorkflow';
 
 type CanvasSize = { width: number; height: number };
 
@@ -120,6 +125,66 @@ type RememberedImageGenerationOptions = {
   imageSize: string;
 };
 
+function findSourceGenerationDialog(
+  dialogs: CanvasGenerationDialogState[],
+  sourceLayer: CanvasLayer,
+) {
+  return [...dialogs]
+    .reverse()
+    .find(
+      (dialog) =>
+        dialog.generatedLayerId === sourceLayer.id ||
+        (!dialog.generatedLayerId && dialog.sourceLayerId === sourceLayer.id),
+    );
+}
+
+function findSourceAnimationLayer(
+  layers: CanvasLayer[],
+  sourceLayer: CanvasLayer,
+) {
+  if (sourceLayer.assetKind !== 'character-animation') {
+    return null;
+  }
+  const sourceResourceId = sourceLayer.sourceResourceId?.trim();
+  if (!sourceResourceId) {
+    return null;
+  }
+  return (
+    layers.find(
+      (layer) =>
+        layer.resourceId === sourceResourceId &&
+        layer.assetKind === 'character',
+    ) ?? null
+  );
+}
+
+function getCanvasToolForGenerationMode(
+  mode: CanvasGenerationDialogState['mode'],
+): CanvasTool {
+  if (mode === 'video') {
+    return 'video';
+  }
+  if (mode === 'audio-sound-effect' || mode === 'audio-background-music') {
+    return 'music';
+  }
+  if (mode === 'character' || mode === 'character-animation') {
+    return 'character';
+  }
+  if (mode === 'icon') {
+    return 'icon';
+  }
+  if (mode === 'publication') {
+    return 'publication';
+  }
+  if (mode === 'ui-design') {
+    return 'ui-design';
+  }
+  if (mode === 'spec') {
+    return 'spec';
+  }
+  return 'generate';
+}
+
 const LAST_CHARACTER_SPEC_REFERENCE_CACHE_KEY =
   'genarrative.imageCanvas.lastCharacterSpecReference';
 const LAST_ICON_SPEC_REFERENCE_CACHE_KEY =
@@ -421,6 +486,13 @@ export function useImageCanvasGenerationWorkflow({
   applyProjectSnapshot,
   onWalletBalanceMayHaveChanged,
 }: GenerationWorkflowOptions) {
+  const [isTaskSidebarOpen, setIsTaskSidebarOpen] = useState(false);
+  const [taskListRefreshKey, setTaskListRefreshKey] = useState(0);
+  const refreshTaskListForQueuedGeneration = useCallback(() => {
+    setIsTaskSidebarOpen(true);
+    setTaskListRefreshKey((key) => key + 1);
+  }, []);
+  const previousTaskCountRef = useRef(canvasGenerationDialogs.length);
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
   const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
     useState(false);
@@ -468,13 +540,21 @@ export function useImageCanvasGenerationWorkflow({
     useState<UiAssetExtractionState | null>(null);
   const [quickEditSelectionState, setQuickEditSelectionState] =
     useState<UiAssetExtractionState | null>(null);
-  const quickEditSelectionStateRef =
-    useRef<UiAssetExtractionState | null>(null);
+  const quickEditSelectionStateRef = useRef<UiAssetExtractionState | null>(
+    null,
+  );
   const cropExpandPanelRef = useRef<CropExpandPanelState | null>(null);
   const cropExpandResizeDragRef = useRef<CropExpandResizeDragState | null>(
     null,
   );
   const uiAssetExtractionMarkCounterRef = useRef(0);
+
+  useEffect(() => {
+    if (canvasGenerationDialogs.length > previousTaskCountRef.current) {
+      setIsTaskSidebarOpen(true);
+    }
+    previousTaskCountRef.current = canvasGenerationDialogs.length;
+  }, [canvasGenerationDialogs.length]);
   const quickEditSelectionMarkCounterRef = useRef(0);
   const [characterAnimationPanel, setCharacterAnimationPanel] =
     useState<CharacterAnimationPanelState | null>(null);
@@ -895,18 +975,73 @@ export function useImageCanvasGenerationWorkflow({
     ],
   );
 
+  const createQuickEditModeDraft = useCallback(
+    (sourceLayer: CanvasLayer) => {
+      const sourceDialog = findSourceGenerationDialog(
+        canvasGenerationDialogs,
+        sourceLayer,
+      );
+      return createQuickEditPanelDraft(sourceLayer, {
+        imageModel: sourceDialog?.imageModel,
+        aspectRatio: sourceDialog?.aspectRatio,
+        imageSize: sourceDialog?.imageSize,
+      });
+    },
+    [canvasGenerationDialogs],
+  );
+
   const openQuickEditPanel = useCallback(
     (sourceLayer: CanvasLayer) => {
       setImageContextMenu(null);
       setMetadataLayer(null);
       setUiAssetExtractionState(null);
-      archiveActiveCanvasGenerationDialog();
-      setGenerateDialog(null);
       setCropExpandPanel(null);
       setCharacterAnimationPanel(null);
-      setQuickEditPanel(createQuickEditPanelDraft(sourceLayer));
+      const sourceDialog = findSourceGenerationDialog(
+        canvasGenerationDialogs,
+        sourceLayer,
+      );
+      const sameSourceDraft = createSameSourceGenerationDialogDraft({
+        sourceLayer,
+        canvasSize,
+        viewport,
+        sourceDialog,
+        mode: 'quick-edit',
+        sourceAnimationLayer: findSourceAnimationLayer(layers, sourceLayer),
+      });
+      if (sameSourceDraft) {
+        openPlacedCanvasGenerationDialog(sameSourceDraft);
+        setQuickEditPanel(null);
+        setQuickEditSelectionState(null);
+        selectSingleLayer(null);
+        setActiveTool(getCanvasToolForGenerationMode(sameSourceDraft.mode));
+        return;
+      }
+      const quickEditDraft = createQuickEditModeDraft(sourceLayer);
+      const quickEditSize = resolveEditorImageGenerationPixelSize({
+        model: quickEditDraft.model,
+        aspectRatio: quickEditDraft.aspectRatio,
+        imageSize: quickEditDraft.imageSize,
+      });
+      openPlacedCanvasGenerationDialog({
+        ...createQuickEditGenerationDialogDraft({
+          sourceLayer,
+          prompt: quickEditDraft.prompt,
+          references: quickEditDraft.quickEditReferences ?? [],
+          model: quickEditDraft.model,
+          aspectRatio: quickEditDraft.aspectRatio,
+          imageSize: quickEditDraft.imageSize,
+          frame: {
+            width: quickEditSize.width,
+            height: quickEditSize.height,
+          },
+        }),
+        composerOpen: true,
+      });
+      setQuickEditPanel(null);
       const nextSelectionState = createUiAssetExtractionState(sourceLayer.id, {
         initialTool: null,
+        model: DEFAULT_IMAGE_MODEL,
       });
       quickEditSelectionStateRef.current = nextSelectionState;
       setQuickEditSelectionState(nextSelectionState);
@@ -917,18 +1052,25 @@ export function useImageCanvasGenerationWorkflow({
     },
     [
       canvasSize,
+      createQuickEditModeDraft,
+      canvasGenerationDialogs,
+      layers,
+      openPlacedCanvasGenerationDialog,
       selectSingleLayer,
-      archiveActiveCanvasGenerationDialog,
       setActiveTool,
-      setGenerateDialog,
       setImageContextMenu,
       setMetadataLayer,
       setViewport,
+      viewport,
     ],
   );
 
   const updateSourceLayer = useCallback(
-    (sourceLayerId: string, updater: (layer: CanvasLayer) => CanvasLayer) => {
+    (
+      sourceLayerId: string,
+      updater: (layer: CanvasLayer) => CanvasLayer,
+      options: { fit?: boolean; persist?: boolean } = {},
+    ) => {
       const sourceLayer = layers.find((layer) => layer.id === sourceLayerId);
       if (!sourceLayer) {
         return;
@@ -940,9 +1082,13 @@ export function useImageCanvasGenerationWorkflow({
           layer.id === sourceLayerId ? updatedLayer : layer,
         ),
       );
-      persistUpdatedLayerResource?.(updatedLayer);
+      if (options.persist !== false) {
+        persistUpdatedLayerResource?.(updatedLayer);
+      }
       selectSingleLayer(sourceLayerId);
-      fitLayers([updatedLayer]);
+      if (options.fit !== false) {
+        fitLayers([updatedLayer]);
+      }
     },
     [
       captureCanvasHistory,
@@ -973,11 +1119,45 @@ export function useImageCanvasGenerationWorkflow({
         setActiveTool('music');
         return;
       }
+      if (sourceLayer.mediaType === 'video') {
+        const videoDraft = createVideoRedrawGenerationDialogDraft(sourceLayer);
+        if (!videoDraft) {
+          return;
+        }
+        setQuickEditPanel(null);
+        selectSingleLayer(sourceLayer.id);
+        openCanvasGenerationDialog(videoDraft);
+        setActiveTool('video');
+        return;
+      }
       if (
         sourceLayer.mediaType === undefined ||
         sourceLayer.mediaType === 'image'
       ) {
-        const redrawPanel = createRedrawPanelDraft(sourceLayer);
+        const sourceDialog = findSourceGenerationDialog(
+          canvasGenerationDialogs,
+          sourceLayer,
+        );
+        const sameSourceDraft = createSameSourceGenerationDialogDraft({
+          sourceLayer,
+          canvasSize,
+          viewport,
+          sourceDialog,
+          mode: 'redraw',
+          sourceAnimationLayer: findSourceAnimationLayer(layers, sourceLayer),
+        });
+        if (sameSourceDraft) {
+          openPlacedCanvasGenerationDialog(sameSourceDraft);
+          setQuickEditPanel(null);
+          selectSingleLayer(null);
+          setActiveTool(getCanvasToolForGenerationMode(sameSourceDraft.mode));
+          return;
+        }
+        const redrawPanel = createRedrawPanelDraft(sourceLayer, {
+          imageModel: sourceDialog?.imageModel,
+          aspectRatio: sourceDialog?.aspectRatio,
+          imageSize: sourceDialog?.imageSize,
+        });
         const redrawSize = resolveEditorImageGenerationPixelSize({
           model: redrawPanel.model,
           aspectRatio: redrawPanel.aspectRatio,
@@ -1002,19 +1182,18 @@ export function useImageCanvasGenerationWorkflow({
         setActiveTool('generate');
         return;
       }
-      setGenerateDialog(null);
-      setQuickEditPanel(createRedrawPanelDraft(sourceLayer));
-      selectSingleLayer(sourceLayer.id);
-      setActiveTool('generate');
     },
     [
       openCanvasGenerationDialog,
       openPlacedCanvasGenerationDialog,
       selectSingleLayer,
       setActiveTool,
-      setGenerateDialog,
       setImageContextMenu,
       setMetadataLayer,
+      canvasGenerationDialogs,
+      canvasSize,
+      layers,
+      viewport,
     ],
   );
 
@@ -1146,8 +1325,11 @@ export function useImageCanvasGenerationWorkflow({
         status: 'processing',
         errorMessage: undefined,
       });
+      const sourceImageSrc = await resolveEditorImageReferenceDataUrl(
+        cropExpandSourceLayer.objectKey?.trim() || cropExpandSourceLayer.src,
+      );
       const result = await renderCropExpandImage({
-        source: cropExpandSourceLayer.src,
+        source: sourceImageSrc,
         insets,
       });
       layerCounterRef.current += 1;
@@ -1207,28 +1389,74 @@ export function useImageCanvasGenerationWorkflow({
       setCropExpandPanel(null);
       setQuickEditPanel(null);
       try {
-        const result = await removeImageBackground(sourceLayer.src);
+        const sourceObjectKey = sourceLayer.objectKey?.trim();
+        const sourceImageSrc = sourceObjectKey
+          ? `/${sourceObjectKey.replace(/^\/+/u, '')}`
+          : await resolveEditorImageReferenceDataUrl(sourceLayer.src);
+        const result = await removeImageBackground({
+          sourceImageSrc,
+          projectId,
+          targetLayerId: sourceLayer.id,
+          assetKind: sourceLayer.assetKind,
+          generationInputs: sourceLayer.generationInputs,
+          assetFolderId,
+          assetLabel: `${sourceLayer.title} 去背景`,
+          sourceResourceId: sourceLayer.resourceId,
+        });
+        if (
+          await applyQueuedEditorGenerationProject(
+            result,
+            projectId,
+            applyProjectSnapshot,
+            refreshTaskListForQueuedGeneration,
+            onWalletBalanceMayHaveChanged,
+          )
+        ) {
+          return;
+        }
+        if (result.project && applyProjectSnapshot) {
+          applyProjectSnapshot(result.project);
+          return;
+        }
         updateSourceLayer(sourceLayer.id, (layer) => ({
           ...layer,
+          resourceId: result.resource?.resourceId ?? layer.resourceId,
           src: result.imageSrc,
           width: result.width,
           height: result.height,
           originalWidth: result.width,
           originalHeight: result.height,
-          objectKey: null,
-          assetObjectId: null,
+          sourceType: result.sourceType ?? 'generated',
+          provider: result.provider ?? 'BiRefNet',
+          taskId: result.taskId ?? null,
+          objectKey: result.resource?.objectKey ?? result.objectKey ?? null,
+          assetObjectId:
+            result.resource?.assetObjectId ?? result.assetObjectId ?? null,
+          sourceResourceId:
+            result.resource?.sourceResourceId ?? sourceLayer.resourceId,
           sourceAssetId: null,
+          prompt: result.resource?.prompt ?? layer.prompt,
+          actualPrompt: result.resource?.actualPrompt ?? layer.actualPrompt,
+          model: result.resource?.model ?? layer.model,
+          assetKind:
+            (result.resource?.assetKind as CanvasLayer['assetKind']) ??
+            layer.assetKind,
+          generationInputs:
+            result.resource?.generationInputs ?? layer.generationInputs,
+          generatedAssetSnapshot: result.asset ?? layer.generatedAssetSnapshot,
         }));
         setActiveSidebarPanel('layers');
       } catch (error) {
-        window.alert(
-          error instanceof Error && error.message.trim()
-            ? error.message
-            : '去除背景失败',
-        );
+        throw error;
       }
     },
     [
+      applyProjectSnapshot,
+      assetFolderId,
+      onWalletBalanceMayHaveChanged,
+      projectId,
+      refreshTaskListForQueuedGeneration,
+      resolveEditorImageReferenceDataUrl,
       setActiveSidebarPanel,
       setImageContextMenu,
       setMetadataLayer,
@@ -1275,13 +1503,14 @@ export function useImageCanvasGenerationWorkflow({
 
   const pickQuickEditReferenceFromLayer = useCallback(
     (layer: CanvasLayer) => {
-      setQuickEditPanel((currentPanel) =>
-        appendQuickEditReference(currentPanel, layer),
+      setGenerateDialog((currentDialog) =>
+        appendGenerationReference(currentDialog, layer),
       );
       setIsPickingQuickEditReferenceFromCanvas(false);
+      setIsGenerationReferenceMenuOpen(false);
       setImageContextMenu(null);
     },
-    [setImageContextMenu],
+    [setGenerateDialog, setImageContextMenu],
   );
 
   const pickCharacterReferenceFromLayer = useCallback(
@@ -1371,7 +1600,6 @@ export function useImageCanvasGenerationWorkflow({
       }),
     );
   }, []);
-
   const generationSubmissionWorkflow =
     useImageCanvasGenerationSubmissionWorkflow({
       layers,
@@ -1393,6 +1621,7 @@ export function useImageCanvasGenerationWorkflow({
       hasCanvasGenerationDialogById,
       getGeneratingDialogPlaceholder,
       appendCanvasLayersWithResources,
+      updateSourceLayer,
       selectSingleLayer,
       fitLayers,
       setActiveTool,
@@ -1402,6 +1631,7 @@ export function useImageCanvasGenerationWorkflow({
       assetFolderId,
       upsertGeneratedAsset,
       applyProjectSnapshot,
+      onQueuedGenerationTask: refreshTaskListForQueuedGeneration,
       onWalletBalanceMayHaveChanged,
     });
 
@@ -1452,7 +1682,10 @@ export function useImageCanvasGenerationWorkflow({
       selectSingleLayer(sourceLayer.id);
       setActiveTool('select');
       setUiAssetExtractionState(
-        createUiAssetExtractionState(sourceLayer.id, { initialTool: 'rect' }),
+        createUiAssetExtractionState(sourceLayer.id, {
+          initialTool: 'rect',
+          model: DEFAULT_IMAGE_MODEL,
+        }),
       );
       setViewport(resolveQuickEditFocusViewport({ sourceLayer, canvasSize }));
     },
@@ -1476,7 +1709,75 @@ export function useImageCanvasGenerationWorkflow({
               ...currentState,
               tool: currentState.tool === tool ? null : tool,
               draftMark: null,
-              status: currentState.status === 'failed' ? 'idle' : currentState.status,
+              status:
+                currentState.status === 'failed' ? 'idle' : currentState.status,
+              errorMessage:
+                currentState.status === 'failed'
+                  ? undefined
+                  : currentState.errorMessage,
+            }
+          : currentState,
+      );
+    },
+    [],
+  );
+
+  const changeUiAssetExtractionModel = useCallback(
+    (model: string) => {
+      const normalizedModel = normalizeEditorImageModel(model);
+      rememberImageModel(normalizedModel);
+      setUiAssetExtractionState((currentState) =>
+        currentState
+          ? {
+              ...currentState,
+              model: normalizedModel,
+              status:
+                currentState.status === 'failed' ? 'idle' : currentState.status,
+              errorMessage:
+                currentState.status === 'failed'
+                  ? undefined
+                  : currentState.errorMessage,
+            }
+          : currentState,
+      );
+    },
+    [rememberImageModel],
+  );
+
+  const appendUiAssetExtractionReferences = useCallback(
+    (references: CharacterReferenceImage[]) => {
+      if (!references.length) {
+        return;
+      }
+      setUiAssetExtractionState((currentState) =>
+        currentState
+          ? {
+              ...currentState,
+              references: [...currentState.references, ...references],
+              status:
+                currentState.status === 'failed' ? 'idle' : currentState.status,
+              errorMessage:
+                currentState.status === 'failed'
+                  ? undefined
+                  : currentState.errorMessage,
+            }
+          : currentState,
+      );
+    },
+    [],
+  );
+
+  const removeUiAssetExtractionReference = useCallback(
+    (referenceId: string) => {
+      setUiAssetExtractionState((currentState) =>
+        currentState
+          ? {
+              ...currentState,
+              references: currentState.references.filter(
+                (reference) => reference.id !== referenceId,
+              ),
+              status:
+                currentState.status === 'failed' ? 'idle' : currentState.status,
               errorMessage:
                 currentState.status === 'failed'
                   ? undefined
@@ -1626,31 +1927,39 @@ export function useImageCanvasGenerationWorkflow({
       draftMark: null,
       marks: [...currentSelectionState.marks, normalizedMark],
     }));
-    setQuickEditPanel((currentPanel) =>
-      currentPanel
+    setGenerateDialog((currentDialog) =>
+      currentDialog?.mode === 'quick-edit' &&
+      currentDialog.sourceLayerId === currentSelectionState.sourceLayerId
         ? {
-            ...currentPanel,
+            ...currentDialog,
             status:
-              currentPanel.status === 'failed' ? 'idle' : currentPanel.status,
+              currentDialog.status === 'failed' ? 'idle' : currentDialog.status,
             errorMessage:
-              currentPanel.status === 'failed'
+              currentDialog.status === 'failed'
                 ? undefined
-                : currentPanel.errorMessage,
+                : currentDialog.errorMessage,
             prompt: appendQuickEditSelectionPrompt(
-              currentPanel.prompt,
+              currentDialog.prompt,
               nextMarkNumber,
             ),
+            composerOpen: true,
           }
-        : currentPanel,
+        : currentDialog,
     );
-  }, [updateQuickEditSelectionState]);
+  }, [setGenerateDialog, updateQuickEditSelectionState]);
 
   useEffect(() => {
-    if (!quickEditPanel && quickEditSelectionState) {
+    if (!quickEditSelectionState) {
+      return;
+    }
+    const hasActiveQuickEditDialog =
+      generateDialog?.mode === 'quick-edit' &&
+      generateDialog.sourceLayerId === quickEditSelectionState.sourceLayerId;
+    if (!hasActiveQuickEditDialog && !quickEditPanel) {
       quickEditSelectionStateRef.current = null;
       setQuickEditSelectionState(null);
     }
-  }, [quickEditPanel, quickEditSelectionState]);
+  }, [generateDialog, quickEditPanel, quickEditSelectionState]);
 
   const cancelUiAssetExtraction = useCallback(() => {
     setUiAssetExtractionState(null);
@@ -1670,6 +1979,8 @@ export function useImageCanvasGenerationWorkflow({
     try {
       await submitUiDesignAssetExtraction(sourceLayer, {
         marks: currentState.marks,
+        model: currentState.model,
+        references: currentState.references,
         suppressAlert: true,
       });
       setUiAssetExtractionState(null);
@@ -1797,6 +2108,9 @@ export function useImageCanvasGenerationWorkflow({
       quickEditSelectionState,
       quickEditSelectionSourceLayer,
       changeUiAssetExtractionTool,
+      changeUiAssetExtractionModel,
+      appendUiAssetExtractionReferences,
+      removeUiAssetExtractionReference,
       changeQuickEditSelectionTool,
       startUiAssetExtractionPointer,
       startQuickEditSelectionPointer,
@@ -1861,6 +2175,9 @@ export function useImageCanvasGenerationWorkflow({
       openCropExpandPanel,
       startCropExpandFrameResize,
       removeSelectedLayerBackground,
+      taskListRefreshKey,
+      isTaskSidebarOpen,
+      toggleTaskSidebar: () => setIsTaskSidebarOpen((open) => !open),
       extractUiDesignAssets,
       pickCharacterSpecFromLayer,
       pickGenerationReferenceFromLayer,
@@ -1895,6 +2212,9 @@ export function useImageCanvasGenerationWorkflow({
       quickEditSelectionState,
       quickEditSelectionSourceLayer,
       changeUiAssetExtractionTool,
+      changeUiAssetExtractionModel,
+      appendUiAssetExtractionReferences,
+      removeUiAssetExtractionReference,
       changeQuickEditSelectionTool,
       startUiAssetExtractionPointer,
       startQuickEditSelectionPointer,
@@ -1919,6 +2239,8 @@ export function useImageCanvasGenerationWorkflow({
       isPickingUiDesignSpecFromCanvas,
       isUiDesignSpecMenuOpen,
       isMusicMenuOpen,
+      isTaskSidebarOpen,
+      taskListRefreshKey,
       isPublicationMenuOpen,
       isPublicationReferenceMenuOpen,
       isSpecMenuOpen,
@@ -1959,6 +2281,7 @@ export function useImageCanvasGenerationWorkflow({
       updateIconDescriptionsText,
       updateSpecFormValue,
       rememberImageModel,
+      refreshTaskListForQueuedGeneration,
     ],
   );
 }
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
index 4a846c9ec..5ef9250a2 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx
@@ -92,7 +92,7 @@ function KeyboardShortcutsHarness({
   selectAllCanvasObjects?: () => void;
   clearCanvasSelection?: () => void;
   copySelectedCanvasLayers?: (options?: { cut?: boolean }) => void;
-  pasteCanvasClipboard?: () => void;
+  pasteCanvasClipboard?: () => boolean;
   duplicateSelectedCanvasLayers?: () => void;
   moveSelectedCanvasLayers?: (mode: 'up' | 'down' | 'top' | 'bottom') => void;
   nudgeSelectedCanvasObjects?: (delta: { x: number; y: number }) => void;
@@ -290,10 +290,10 @@ describe('useImageCanvasKeyboardShortcuts', () => {
     expect(undoCanvasChange).toHaveBeenCalledTimes(1);
   });
 
-  it('routes Windows edit shortcuts to selected layer commands', () => {
+  it('routes Windows edit shortcuts to selected layer commands and canvas paste', () => {
     const selectAllCanvasObjects = vi.fn();
     const copySelectedCanvasLayers = vi.fn();
-    const pasteCanvasClipboard = vi.fn();
+    const pasteCanvasClipboard = vi.fn(() => true);
     const duplicateSelectedCanvasLayers = vi.fn();
     const exportCanvasAssets = vi.fn();
     render(
@@ -328,6 +328,52 @@ describe('useImageCanvasKeyboardShortcuts', () => {
     expect(exportCanvasAssets).toHaveBeenCalledTimes(1);
   });
 
+  it('leaves system paste available when the canvas clipboard is empty', () => {
+    const pasteCanvasClipboard = vi.fn(() => false);
+    render(
+      <KeyboardShortcutsHarness pasteCanvasClipboard={pasteCanvasClipboard} />,
+    );
+
+    const pasteEvent = new KeyboardEvent('keydown', {
+      key: 'v',
+      code: 'KeyV',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(pasteEvent);
+
+    expect(pasteCanvasClipboard).toHaveBeenCalledTimes(1);
+    expect(pasteEvent.defaultPrevented).toBe(false);
+  });
+
+  it('leaves native copy available when text is selected', () => {
+    const copySelectedCanvasLayers = vi.fn();
+    const removeAllRanges = vi.fn();
+    const selectedText = vi.fn(() => '清爽游戏按钮');
+    vi.spyOn(window, 'getSelection').mockReturnValue({
+      toString: selectedText,
+      removeAllRanges,
+    } as unknown as Selection);
+    render(
+      <KeyboardShortcutsHarness
+        copySelectedCanvasLayers={copySelectedCanvasLayers}
+      />,
+    );
+
+    const copyEvent = new KeyboardEvent('keydown', {
+      key: 'c',
+      code: 'KeyC',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(copyEvent);
+
+    expect(copySelectedCanvasLayers).not.toHaveBeenCalled();
+    expect(copyEvent.defaultPrevented).toBe(false);
+  });
+
   it('routes Windows view and layer ordering shortcuts', () => {
     const fitLayers = vi.fn();
     const updateScaleFromCenter = vi.fn();
diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
index 6d5abf70f..1066833c7 100644
--- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
+++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts
@@ -19,7 +19,7 @@ type UseImageCanvasKeyboardShortcutsOptions = {
   selectAllCanvasObjects?: () => void;
   clearCanvasSelection?: () => void;
   copySelectedCanvasLayers?: (options?: { cut?: boolean }) => void;
-  pasteCanvasClipboard?: () => void;
+  pasteCanvasClipboard?: () => boolean;
   duplicateSelectedCanvasLayers?: () => void;
   moveSelectedCanvasLayers?: (mode: 'up' | 'down' | 'top' | 'bottom') => void;
   nudgeSelectedCanvasObjects?: (delta: { x: number; y: number }) => void;
@@ -112,6 +112,11 @@ function isCtrlShortcut(event: KeyboardEvent) {
   return event.ctrlKey && !event.altKey && !event.metaKey;
 }
 
+function hasSelectedText() {
+  const selection = window.getSelection();
+  return Boolean(selection?.toString().trim());
+}
+
 function isKey(event: KeyboardEvent, key: string, code?: string) {
   return event.key.toLowerCase() === key || event.code === code;
 }
@@ -268,20 +273,24 @@ export function useImageCanvasKeyboardShortcuts({
           return;
         }
         if (event.code === 'KeyC') {
+          if (hasSelectedText()) {
+            return;
+          }
           event.preventDefault();
           copySelectedCanvasLayers?.();
           return;
         }
-        if (event.code === 'KeyV') {
-          event.preventDefault();
-          pasteCanvasClipboard?.();
-          return;
-        }
         if (event.code === 'KeyX') {
           event.preventDefault();
           copySelectedCanvasLayers?.({ cut: true });
           return;
         }
+        if (event.code === 'KeyV') {
+          if (pasteCanvasClipboard?.()) {
+            event.preventDefault();
+          }
+          return;
+        }
         if (event.code === 'KeyD') {
           event.preventDefault();
           duplicateSelectedCanvasLayers?.();
@@ -472,6 +481,7 @@ export function useImageCanvasKeyboardShortcuts({
     closeEditorChromePanels,
     clearCanvasSelection,
     copySelectedCanvasLayers,
+    pasteCanvasClipboard,
     duplicateSelectedCanvasLayers,
     deleteSelectedCanvasObjects,
     deleteLayerById,
@@ -480,7 +490,6 @@ export function useImageCanvasKeyboardShortcuts({
     generateDialogRef,
     moveSelectedCanvasLayers,
     nudgeSelectedCanvasObjects,
-    pasteCanvasClipboard,
     requestRemoveCanvasGenerationDialog,
     redoCanvasChange,
     selectAllCanvasObjects,
diff --git a/src/components/image-editor/useImageCanvasLayerCommands.test.tsx b/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
index 131610bdc..717210232 100644
--- a/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
+++ b/src/components/image-editor/useImageCanvasLayerCommands.test.tsx
@@ -1,22 +1,34 @@
 /* @vitest-environment jsdom */
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { useState } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import type {
   CanvasContextMenuState,
   CanvasGenerationDialogState,
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
+import { readLayerImageBlob } from './ImageCanvasExportModel';
 import { useImageCanvasLayerCommands } from './useImageCanvasLayerCommands';
 
+vi.mock('./ImageCanvasExportModel', () => ({
+  readLayerImageBlob: vi.fn(async (layer: CanvasLayer) => {
+    const blob = new Blob([layer.id], { type: 'image/png' });
+    Object.defineProperty(blob, 'layerId', {
+      configurable: true,
+      value: layer.id,
+    });
+    return blob;
+  }),
+}));
+
 function createLayer(id: string, x: number, zIndex: number): CanvasLayer {
   return {
     id,
     resourceId: `resource-${id}`,
     title: id,
-    src: `data:image/png;base64,${id}`,
+    src: `data:image/png,${encodeURIComponent(id)}`,
     x,
     y: 20,
     width: 100,
@@ -28,20 +40,53 @@ function createLayer(id: string, x: number, zIndex: number): CanvasLayer {
   };
 }
 
+const originalClipboard = navigator.clipboard;
+const originalClipboardItem = globalThis.ClipboardItem;
+const originalCreateImageBitmap = globalThis.createImageBitmap;
+
+function installImageClipboardMock() {
+  class ClipboardItemMock {
+    readonly items: Record<string, Blob>;
+
+    constructor(items: Record<string, Blob>) {
+      this.items = items;
+    }
+  }
+  const write = vi.fn(
+    async (_items: Array<{ items: Record<string, Blob> }>) => undefined,
+  );
+  Object.defineProperty(globalThis, 'ClipboardItem', {
+    configurable: true,
+    value: ClipboardItemMock,
+  });
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { write },
+  });
+  return write;
+}
+
 function LayerCommandsHarness({
   exportLayerImage = vi.fn(),
   onDeleteLayerSideEffects = vi.fn(),
   onDeleteGenerationDialogSideEffects = vi.fn(),
+  initialLayers,
 }: {
-  exportLayerImage?: (layer: CanvasLayer | null) => void;
+  exportLayerImage?: (
+    layer: CanvasLayer | null,
+    options?: { mode?: 'spine-json' | 'sequence-with-preview' },
+  ) => void;
   onDeleteLayerSideEffects?: (layerId: string) => void;
   onDeleteGenerationDialogSideEffects?: (dialogId: string) => void;
+  initialLayers?: CanvasLayer[];
 }) {
-  const [layers, setLayers] = useState<CanvasLayer[]>([
-    createLayer('first', 10, 1),
-    createLayer('second', 160, 2),
-    createLayer('third', 310, 3),
-  ]);
+  const [layers, setLayers] = useState<CanvasLayer[]>(
+    initialLayers ?? [
+      createLayer('first', 10, 1),
+      createLayer('second', 160, 2),
+      createLayer('third', 310, 3),
+    ],
+  );
   const [selectedLayerId, setSelectedLayerId] = useState<string | null>(
     'first',
   );
@@ -241,13 +286,126 @@ function LayerCommandsHarness({
   );
 }
 
+afterEach(() => {
+  vi.restoreAllMocks();
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: originalClipboard,
+  });
+  Object.defineProperty(globalThis, 'ClipboardItem', {
+    configurable: true,
+    value: originalClipboardItem,
+  });
+  Object.defineProperty(globalThis, 'createImageBitmap', {
+    configurable: true,
+    value: originalCreateImageBitmap,
+  });
+});
+
 describe('useImageCanvasLayerCommands', () => {
-  it('copies, cuts, and pastes context layers with history and selection updates', () => {
+  it('writes the last copied image layer to the system clipboard', async () => {
+    const write = installImageClipboardMock();
+    render(<LayerCommandsHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '复制选中' }));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    const clipboardItems = write.mock.calls[0]?.[0] as
+      | Array<{ items: Record<string, Blob> }>
+      | undefined;
+    expect(clipboardItems?.[0]?.items['image/png']).toBeInstanceOf(Blob);
+    expect(readLayerImageBlob).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'second' }),
+    );
+    expect(screen.getByTestId('clipboard').textContent).toBe('copy:2');
+  });
+
+  it('normalizes copied images to png for the system clipboard', async () => {
+    const write = installImageClipboardMock();
+    const drawImage = vi.fn();
+    const toBlob = vi.fn((resolve: (blob: Blob) => void) =>
+      resolve(new Blob(['png'], { type: 'image/png' })),
+    );
+    vi.mocked(readLayerImageBlob).mockResolvedValueOnce(
+      new Blob(['webp'], { type: 'image/webp' }),
+    );
+    Object.defineProperty(globalThis, 'createImageBitmap', {
+      configurable: true,
+      value: vi.fn(async () => ({ width: 16, height: 12 })),
+    });
+    const originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
+      if (tagName === 'canvas') {
+        return {
+          width: 0,
+          height: 0,
+          getContext: () => ({ drawImage }),
+          toBlob,
+        } as unknown as HTMLCanvasElement;
+      }
+      return originalCreateElement(tagName);
+    });
+    render(<LayerCommandsHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '复制选中' }));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    const clipboardItems = write.mock.calls[0]?.[0] as
+      | Array<{ items: Record<string, Blob> }>
+      | undefined;
+    expect(clipboardItems?.[0]?.items['image/png']?.type).toBe('image/png');
+    expect(drawImage).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps canvas copy when system image clipboard is unavailable', () => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {},
+    });
+    Object.defineProperty(globalThis, 'ClipboardItem', {
+      configurable: true,
+      value: undefined,
+    });
+    render(<LayerCommandsHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '复制选中' }));
+
+    expect(screen.getByTestId('clipboard').textContent).toBe('copy:2');
+  });
+
+  it('skips non-image layers when choosing the system clipboard image', async () => {
+    const write = installImageClipboardMock();
+    render(
+      <LayerCommandsHarness
+        initialLayers={[
+          { ...createLayer('first', 10, 1), mediaType: 'video' },
+          createLayer('second', 160, 2),
+          createLayer('third', 310, 3),
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '复制选中' }));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(readLayerImageBlob).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'second' }),
+    );
+    expect(screen.getByTestId('clipboard').textContent).toBe('copy:2');
+  });
+
+  it('copies, cuts, and pastes context layers with history and selection updates', async () => {
+    const write = installImageClipboardMock();
     render(<LayerCommandsHarness />);
 
     fireEvent.click(screen.getByRole('button', { name: '复制' }));
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(readLayerImageBlob).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'second' }),
+    );
     expect(screen.getByTestId('clipboard').textContent).toBe('copy:2');
     expect(screen.getByTestId('context').textContent).toBe('closed');
+    expect(screen.getByTestId('image-context-closed').textContent).toBe('1');
 
     fireEvent.click(screen.getByRole('button', { name: '粘贴' }));
     expect(screen.getByTestId('layers').textContent).toContain(
@@ -260,6 +418,7 @@ describe('useImageCanvasLayerCommands', () => {
       'layer-copy-',
     );
     expect(screen.getByTestId('tool').textContent).toBe('select');
+    expect(screen.getByTestId('image-context-closed').textContent).toBe('2');
 
     fireEvent.click(screen.getByRole('button', { name: '右键第三层' }));
     fireEvent.click(screen.getByRole('button', { name: '只选第三层' }));
@@ -268,6 +427,7 @@ describe('useImageCanvasLayerCommands', () => {
     expect(screen.getByTestId('clipboard').textContent).toBe('cut:1');
     expect(screen.getByTestId('layers').textContent).not.toContain('third');
     expect(screen.getByTestId('selection').textContent).toBe('-:');
+    expect(screen.getByTestId('image-context-closed').textContent).toBe('3');
     expect(Number(screen.getByTestId('history').textContent)).toBeGreaterThan(
       1,
     );
@@ -330,9 +490,12 @@ describe('useImageCanvasLayerCommands', () => {
     fireEvent.click(screen.getByRole('button', { name: '导出' }));
     expect(exportLayerImage).toHaveBeenCalledWith(
       expect.objectContaining({ id: 'third' }),
+      expect.any(Object),
     );
     expect(screen.getByTestId('context').textContent).toBe('closed');
-    expect(screen.getByTestId('image-context-closed').textContent).toBe('1');
+    expect(Number(screen.getByTestId('image-context-closed').textContent)).toBe(
+      5,
+    );
   });
 
   it('deletes selected and direct layers while running delete side effects', () => {
diff --git a/src/components/image-editor/useImageCanvasLayerCommands.ts b/src/components/image-editor/useImageCanvasLayerCommands.ts
index d16c1e741..bc0b4d414 100644
--- a/src/components/image-editor/useImageCanvasLayerCommands.ts
+++ b/src/components/image-editor/useImageCanvasLayerCommands.ts
@@ -1,8 +1,9 @@
 import {
-  useCallback,
-  useState,
   type Dispatch,
   type SetStateAction,
+  useCallback,
+  useRef,
+  useState,
 } from 'react';
 
 import type {
@@ -12,6 +13,8 @@ import type {
   CanvasLayer,
 } from './ImageCanvasEditorTypes';
 import {
+  type CanvasLayerFlipAxis,
+  type CanvasLayerMoveMode,
   createCanvasLayerClipboard,
   duplicateCanvasLayers,
   flipCanvasLayers,
@@ -24,13 +27,13 @@ import {
   toggleCanvasLayersVisibility,
   ungroupCanvasLayers,
   updateCanvasLayersByIds,
-  type CanvasLayerFlipAxis,
-  type CanvasLayerMoveMode,
 } from './ImageCanvasLayerCommandModel';
+import { readLayerImageBlob } from './ImageCanvasExportModel';
 import {
   getCanvasGenerationDialogIdFromSelectionId,
   getSelectedLayerIds,
 } from './ImageCanvasSelectionModel';
+import type { ImageSequenceExportMode } from './useImageCanvasAssetExportWorkflow';
 
 type LayerCommandsOptions = {
   layers: CanvasLayer[];
@@ -50,13 +53,68 @@ type LayerCommandsOptions = {
   selectSingleLayer: (layerId: string | null) => void;
   onDeleteLayerSideEffects: (targetLayerId: string) => void;
   onDeleteGenerationDialogSideEffects?: (targetDialogId: string) => void;
-  exportLayerImage: (layer: CanvasLayer | null) => void;
+  exportLayerImage: (
+    layer: CanvasLayer | null,
+    options?: { mode?: ImageSequenceExportMode },
+  ) => void;
 };
 
 function createGroupId() {
   return `layer-group-${Date.now()}`;
 }
 
+function isClipboardImageLayer(layer: CanvasLayer) {
+  return (
+    Boolean(layer.src.trim()) &&
+    layer.mediaType !== 'video' &&
+    layer.mediaType !== 'audio' &&
+    layer.mediaType !== 'image-sequence'
+  );
+}
+
+async function normalizeClipboardImageBlob(blob: Blob) {
+  if (blob.type === 'image/png') {
+    return blob;
+  }
+  if (typeof createImageBitmap === 'function') {
+    try {
+      const image = await createImageBitmap(blob);
+      const canvas = document.createElement('canvas');
+      canvas.width = image.width;
+      canvas.height = image.height;
+      canvas.getContext('2d')?.drawImage(image, 0, 0);
+      const pngBlob = await new Promise<Blob | null>((resolve) =>
+        canvas.toBlob(resolve, 'image/png'),
+      );
+      if (pngBlob) {
+        return pngBlob;
+      }
+    } catch {
+      // 浏览器不支持当前图片解码时，回退到原始字节。
+    }
+  }
+  if (!blob.type || blob.type === 'application/octet-stream') {
+    return blob.slice(0, blob.size, 'image/png');
+  }
+  return blob;
+}
+
+function copyLayerImageToSystemClipboard(layers: CanvasLayer[]) {
+  void (async () => {
+    const layer = layers.slice().reverse().find(isClipboardImageLayer);
+    const clipboard = globalThis.navigator?.clipboard;
+    if (!layer || !clipboard?.write || typeof ClipboardItem !== 'function') {
+      return;
+    }
+    const blob = await normalizeClipboardImageBlob(
+      await readLayerImageBlob(layer),
+    );
+    await clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+  })().catch(() => {
+    // 系统剪贴板只是画布内复制的附加能力，失败不阻断内部粘贴。
+  });
+}
+
 export function useImageCanvasLayerCommands({
   layers,
   contextMenu,
@@ -79,6 +137,11 @@ export function useImageCanvasLayerCommands({
 }: LayerCommandsOptions) {
   const [canvasClipboard, setCanvasClipboard] =
     useState<CanvasClipboard | null>(null);
+  const canvasClipboardRef = useRef<CanvasClipboard | null>(null);
+  const closeContextMenus = useCallback(() => {
+    setContextMenu(null);
+    setImageContextMenu(null);
+  }, [setContextMenu, setImageContextMenu]);
 
   const getContextTargetLayerIds = useCallback(
     (menu: CanvasContextMenuState | null = contextMenu) =>
@@ -111,32 +174,29 @@ export function useImageCanvasLayerCommands({
 
   const pasteCanvasClipboard = useCallback(
     (canvasPoint?: { x: number; y: number }) => {
-      if (!canvasClipboard?.layers.length) {
-        return;
+      const clipboard = canvasClipboardRef.current;
+      if (!clipboard?.layers.length) {
+        return false;
       }
-      const nextLayers = duplicateLayersToPoint(
-        canvasClipboard.layers,
-        canvasPoint,
-        {
-          renameCopies: canvasClipboard.mode !== 'cut',
-        },
-      );
+      const nextLayers = duplicateLayersToPoint(clipboard.layers, canvasPoint, {
+        renameCopies: clipboard.mode !== 'cut',
+      });
       if (!nextLayers.length) {
-        return;
+        return false;
       }
       captureCanvasHistory();
       setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
       setSelectedLayerIds(nextLayers.map((layer) => layer.id));
       setSelectedLayerId(nextLayers[0]?.id ?? null);
       setActiveTool('select');
-      setContextMenu(null);
+      closeContextMenus();
+      return true;
     },
     [
-      canvasClipboard,
       captureCanvasHistory,
+      closeContextMenus,
       duplicateLayersToPoint,
       setActiveTool,
-      setContextMenu,
       setLayers,
       setSelectedLayerId,
       setSelectedLayerIds,
@@ -154,7 +214,11 @@ export function useImageCanvasLayerCommands({
       if (!clipboard) {
         return;
       }
+      canvasClipboardRef.current = clipboard;
       setCanvasClipboard(clipboard);
+      if (!options.cut) {
+        copyLayerImageToSystemClipboard(clipboard.layers);
+      }
       if (options.cut) {
         captureCanvasHistory();
         setLayers((currentLayers) =>
@@ -167,14 +231,14 @@ export function useImageCanvasLayerCommands({
             : currentLayer,
         );
       }
-      setContextMenu(null);
+      closeContextMenus();
     },
     [
       captureCanvasHistory,
+      closeContextMenus,
       getContextTargetLayerIds,
       layers,
       selectSingleLayer,
-      setContextMenu,
       setLayers,
       setMetadataLayer,
     ],
@@ -191,7 +255,11 @@ export function useImageCanvasLayerCommands({
       if (!clipboard) {
         return;
       }
+      canvasClipboardRef.current = clipboard;
       setCanvasClipboard(clipboard);
+      if (!options.cut) {
+        copyLayerImageToSystemClipboard(clipboard.layers);
+      }
       if (options.cut) {
         captureCanvasHistory();
         setLayers((currentLayers) =>
@@ -232,13 +300,13 @@ export function useImageCanvasLayerCommands({
     setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
     setSelectedLayerIds(nextLayers.map((layer) => layer.id));
     setSelectedLayerId(nextLayers[0]?.id ?? null);
-    setContextMenu(null);
+    closeContextMenus();
   }, [
     captureCanvasHistory,
+    closeContextMenus,
     duplicateLayersToPoint,
     getContextTargetLayerIds,
     layers,
-    setContextMenu,
     setLayers,
     setSelectedLayerId,
     setSelectedLayerIds,
@@ -279,9 +347,14 @@ export function useImageCanvasLayerCommands({
       setLayers((currentLayers) =>
         updateCanvasLayersByIds(currentLayers, targetIds, updater),
       );
-      setContextMenu(null);
+      closeContextMenus();
     },
-    [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers],
+    [
+      captureCanvasHistory,
+      closeContextMenus,
+      getContextTargetLayerIds,
+      setLayers,
+    ],
   );
 
   const moveContextLayers = useCallback(
@@ -294,9 +367,14 @@ export function useImageCanvasLayerCommands({
       setLayers((currentLayers) =>
         moveCanvasLayers(currentLayers, targetIds, mode),
       );
-      setContextMenu(null);
+      closeContextMenus();
     },
-    [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers],
+    [
+      captureCanvasHistory,
+      closeContextMenus,
+      getContextTargetLayerIds,
+      setLayers,
+    ],
   );
 
   const moveSelectedLayers = useCallback(
@@ -330,8 +408,13 @@ export function useImageCanvasLayerCommands({
     setLayers((currentLayers) =>
       groupCanvasLayers(currentLayers, targetIds, createGroupId()),
     );
-    setContextMenu(null);
-  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+    closeContextMenus();
+  }, [
+    captureCanvasHistory,
+    closeContextMenus,
+    getContextTargetLayerIds,
+    setLayers,
+  ]);
 
   const ungroupContextLayers = useCallback(() => {
     const targetIds = getContextTargetLayerIds();
@@ -340,8 +423,13 @@ export function useImageCanvasLayerCommands({
     }
     captureCanvasHistory();
     setLayers((currentLayers) => ungroupCanvasLayers(currentLayers, targetIds));
-    setContextMenu(null);
-  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+    closeContextMenus();
+  }, [
+    captureCanvasHistory,
+    closeContextMenus,
+    getContextTargetLayerIds,
+    setLayers,
+  ]);
 
   const toggleContextLayerVisibility = useCallback(() => {
     const targetIds = getContextTargetLayerIds();
@@ -352,8 +440,13 @@ export function useImageCanvasLayerCommands({
     setLayers((currentLayers) =>
       toggleCanvasLayersVisibility(currentLayers, targetIds),
     );
-    setContextMenu(null);
-  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+    closeContextMenus();
+  }, [
+    captureCanvasHistory,
+    closeContextMenus,
+    getContextTargetLayerIds,
+    setLayers,
+  ]);
 
   const toggleContextLayerLock = useCallback(() => {
     const targetIds = getContextTargetLayerIds();
@@ -364,8 +457,13 @@ export function useImageCanvasLayerCommands({
     setLayers((currentLayers) =>
       toggleCanvasLayersLock(currentLayers, targetIds),
     );
-    setContextMenu(null);
-  }, [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers]);
+    closeContextMenus();
+  }, [
+    captureCanvasHistory,
+    closeContextMenus,
+    getContextTargetLayerIds,
+    setLayers,
+  ]);
 
   const flipContextLayers = useCallback(
     (axis: CanvasLayerFlipAxis) => {
@@ -377,9 +475,14 @@ export function useImageCanvasLayerCommands({
       setLayers((currentLayers) =>
         flipCanvasLayers(currentLayers, targetIds, axis),
       );
-      setContextMenu(null);
+      closeContextMenus();
     },
-    [captureCanvasHistory, getContextTargetLayerIds, setContextMenu, setLayers],
+    [
+      captureCanvasHistory,
+      closeContextMenus,
+      getContextTargetLayerIds,
+      setLayers,
+    ],
   );
 
   const deleteContextLayers = useCallback(() => {
@@ -394,30 +497,33 @@ export function useImageCanvasLayerCommands({
     setMetadataLayer((currentLayer) =>
       currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
     );
-    setContextMenu(null);
+    closeContextMenus();
   }, [
     captureCanvasHistory,
+    closeContextMenus,
     getContextTargetLayerIds,
     selectSingleLayer,
-    setContextMenu,
     setHoveredLayerId,
     setLayers,
     setMetadataLayer,
   ]);
 
-  const exportContextLayer = useCallback(() => {
-    const targetIds = getContextTargetLayerIds();
-    const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
-    exportLayerImage(targetLayer ?? null);
-    setContextMenu(null);
-    setImageContextMenu(null);
-  }, [
-    exportLayerImage,
-    getContextTargetLayerIds,
-    layers,
-    setContextMenu,
-    setImageContextMenu,
-  ]);
+  const exportContextLayer = useCallback(
+    (options: { mode?: ImageSequenceExportMode } = {}) => {
+      const targetIds = getContextTargetLayerIds();
+      const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
+      exportLayerImage(targetLayer ?? null, options);
+      setContextMenu(null);
+      setImageContextMenu(null);
+    },
+    [
+      exportLayerImage,
+      getContextTargetLayerIds,
+      layers,
+      setContextMenu,
+      setImageContextMenu,
+    ],
+  );
 
   const deleteLayerById = useCallback(
     (targetLayerId: string | null) => {
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
index cbcc16b40..ea78798fd 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.test.tsx
@@ -4,6 +4,7 @@ import { act, render, screen, waitFor } from '@testing-library/react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { ApiClientError } from '../../services/apiClient';
 import type { EditorProjectSnapshot } from '../../services/image-editor/editorProjectClient';
 import type {
   CanvasGenerationDialogState,
@@ -16,6 +17,7 @@ const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
 const createProjectCoverSnapshotBlobMock = vi.hoisted(() => vi.fn());
 const loadEditorProjectMock = vi.hoisted(() => vi.fn());
 const loadOrCreateRecentEditorProjectMock = vi.hoisted(() => vi.fn());
+const putEditorProjectCoverCacheMock = vi.hoisted(() => vi.fn());
 const saveEditorProjectLayoutMock = vi.hoisted(() => vi.fn());
 const uploadEditorMediaAssetFileMock = vi.hoisted(() => vi.fn());
 const EDITOR_PROJECT_RECENT_SESSION_CACHE_KEY =
@@ -48,6 +50,10 @@ vi.mock('../../services/image-editor/editorMediaAssetUploadClient', () => ({
   uploadEditorMediaAssetFile: uploadEditorMediaAssetFileMock,
 }));
 
+vi.mock('../../services/image-editor/editorProjectCoverCache', () => ({
+  putEditorProjectCoverCache: putEditorProjectCoverCacheMock,
+}));
+
 function createLayer(
   id: string,
   overrides: Partial<CanvasLayer> = {},
@@ -96,6 +102,7 @@ function ProjectPersistenceHarness({
     y: 0,
     scale: 1,
   });
+  const [isViewportInteracting, setIsViewportInteracting] = useState(false);
   const [projectTitle, setProjectTitle] = useState('');
   const [projectRenameValue, setProjectRenameValue] = useState('');
   const layersRef = useRef(layers);
@@ -141,6 +148,7 @@ function ProjectPersistenceHarness({
     layers,
     canvasGenerationDialogs: generationDialogs,
     viewport,
+    isViewportInteracting,
     canAccessProtectedData,
     openEditorLoginModal: openEditorLoginModalRef.current,
   });
@@ -165,11 +173,45 @@ function ProjectPersistenceHarness({
       <span data-testid="viewport">
         {viewport.x},{viewport.y},{viewport.scale}
       </span>
+      <span data-testid="viewport-interacting">
+        {String(isViewportInteracting)}
+      </span>
       <span data-testid="generation-dialogs">
         {generationDialogs
-          .map((dialog) => `${dialog.id}:${dialog.prompt}:${dialog.placeholder?.x}`)
+          .map(
+            (dialog) =>
+              `${dialog.id}:${dialog.prompt}:${dialog.placeholder?.x}`,
+          )
           .join(',')}
       </span>
+      <button
+        type="button"
+        onClick={() => {
+          setViewport((currentViewport) => ({
+            ...currentViewport,
+            x: currentViewport.x + 10,
+            y: currentViewport.y + 5,
+          }));
+        }}
+      >
+        move viewport
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setIsViewportInteracting(true);
+        }}
+      >
+        begin viewport interaction
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setIsViewportInteracting(false);
+        }}
+      >
+        end viewport interaction
+      </button>
       <button
         type="button"
         onClick={() => {
@@ -390,6 +432,7 @@ describe('useImageCanvasProjectPersistence', () => {
       updatedAt: '2026-06-12T00:00:00.000Z',
     });
     createProjectCoverSnapshotBlobMock.mockResolvedValue(null);
+    putEditorProjectCoverCacheMock.mockResolvedValue(undefined);
     uploadEditorMediaAssetFileMock.mockResolvedValue({
       src: 'https://signed.example.test/project-cover.png',
       objectKey:
@@ -405,9 +448,7 @@ describe('useImageCanvasProjectPersistence', () => {
 
     expect(await screen.findByText('editor-project-default')).toBeTruthy();
     expect(screen.getByTestId('project-title').textContent).toBe('空画布项目');
-    expect(screen.getByTestId('project-rename').textContent).toBe(
-      '空画布项目',
-    );
+    expect(screen.getByTestId('project-rename').textContent).toBe('空画布项目');
 
     act(() => {
       screen.getByRole('button', { name: 'append' }).click();
@@ -521,6 +562,12 @@ describe('useImageCanvasProjectPersistence', () => {
 
     expect(await screen.findByText('editor-project-default')).toBeTruthy();
     await waitFor(() => {
+      expect(putEditorProjectCoverCacheMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          projectId: 'editor-project-default',
+          blob: expect.any(Blob),
+        }),
+      );
       expect(uploadEditorMediaAssetFileMock).toHaveBeenCalledWith(
         expect.any(File),
         'image',
@@ -557,6 +604,66 @@ describe('useImageCanvasProjectPersistence', () => {
     });
   });
 
+  it('keeps the local project cover cache when snapshot upload fails', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-default',
+      title: '本地封面画布',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-cover',
+          resourceId: 'resource-cover-source',
+          title: '封面源图',
+          x: 10,
+          y: 20,
+          width: 320,
+          height: 240,
+          originalWidth: 320,
+          originalHeight: 240,
+          zIndex: 1,
+          sourceType: 'uploaded',
+        },
+      ],
+      resources: [
+        {
+          resourceId: 'resource-cover-source',
+          projectId: 'editor-project-default',
+          imageSrc: '/generated/source.png',
+          objectKey: 'generated/source.png',
+          assetObjectId: 'asset-object-source',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+      ],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    const coverBlob = new Blob(['cover'], { type: 'image/png' });
+    createProjectCoverSnapshotBlobMock.mockResolvedValueOnce(coverBlob);
+    uploadEditorMediaAssetFileMock.mockRejectedValueOnce(
+      new TypeError('Failed to fetch'),
+    );
+
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    await waitFor(() => {
+      expect(putEditorProjectCoverCacheMock).toHaveBeenCalledWith({
+        projectId: 'editor-project-default',
+        blob: coverBlob,
+      });
+    });
+    await waitFor(() => {
+      expect(uploadEditorMediaAssetFileMock).toHaveBeenCalled();
+    });
+    expect(createEditorProjectResourceMock).not.toHaveBeenCalledWith(
+      'editor-project-default',
+      expect.objectContaining({
+        assetKind: 'project-cover-snapshot',
+      }),
+    );
+  });
+
   it('loads and saves viewport scale with display zoom semantics', async () => {
     render(<ProjectPersistenceHarness />);
 
@@ -577,6 +684,54 @@ describe('useImageCanvasProjectPersistence', () => {
     });
   });
 
+  it('does not serialize or write session cache while viewport interactions are active', async () => {
+    const sessionSetItemSpy = vi.spyOn(
+      Storage.prototype,
+      'setItem',
+    );
+    render(<ProjectPersistenceHarness />);
+
+    expect(await screen.findByText('editor-project-default')).toBeTruthy();
+    sessionSetItemSpy.mockClear();
+    saveEditorProjectLayoutMock.mockClear();
+    vi.useFakeTimers();
+
+    act(() => {
+      screen.getByRole('button', { name: 'begin viewport interaction' }).click();
+    });
+    expect(screen.getByTestId('viewport-interacting').textContent).toBe('true');
+    act(() => {
+      screen.getByRole('button', { name: 'move viewport' }).click();
+      screen.getByRole('button', { name: 'move viewport' }).click();
+    });
+    act(() => {
+      vi.advanceTimersByTime(451);
+    });
+
+    expect(saveEditorProjectLayoutMock).not.toHaveBeenCalled();
+    expect(sessionSetItemSpy).not.toHaveBeenCalled();
+
+    act(() => {
+      screen.getByRole('button', { name: 'end viewport interaction' }).click();
+    });
+    expect(screen.getByTestId('viewport-interacting').textContent).toBe(
+      'false',
+    );
+    act(() => {
+      vi.advanceTimersByTime(451);
+    });
+
+    expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+      'editor-project-default',
+      expect.objectContaining({
+        viewport: { x: 20, y: 10, scale: 1 },
+      }),
+    );
+    expect(sessionSetItemSpy).toHaveBeenCalled();
+    vi.useRealTimers();
+    sessionSetItemSpy.mockRestore();
+  });
+
   it('does not create a project resource again for backend-persisted generated layers', async () => {
     render(<ProjectPersistenceHarness />);
 
@@ -1170,4 +1325,34 @@ describe('useImageCanvasProjectPersistence', () => {
     expect(loadEditorProjectMock).not.toHaveBeenCalled();
     expect(screen.getByTestId('project-id').textContent).toBe('-');
   });
+
+  it.each([
+    [404, '项目不存在'],
+    [403, '无权访问项目'],
+  ])(
+    'returns to the project page when an explicit project fails with %i',
+    async (status, message) => {
+      window.history.replaceState(
+        null,
+        '',
+        '/editor/canvas?projectid=missing-project',
+      );
+      loadEditorProjectMock.mockRejectedValueOnce(
+        new ApiClientError({
+          message,
+          status,
+          code: status === 404 ? 'not_found' : 'forbidden',
+        }),
+      );
+
+      render(<ProjectPersistenceHarness />);
+
+      await waitFor(() => {
+        expect(window.location.pathname).toBe('/project');
+      });
+      expect(window.location.search).toBe('');
+      expect(loadEditorProjectMock).toHaveBeenCalledWith('missing-project');
+      expect(loadOrCreateRecentEditorProjectMock).not.toHaveBeenCalled();
+    },
+  );
 });
diff --git a/src/components/image-editor/useImageCanvasProjectPersistence.ts b/src/components/image-editor/useImageCanvasProjectPersistence.ts
index 86a967509..bcc2b75ab 100644
--- a/src/components/image-editor/useImageCanvasProjectPersistence.ts
+++ b/src/components/image-editor/useImageCanvasProjectPersistence.ts
@@ -1,7 +1,15 @@
-import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { ApiClientError } from '../../services/apiClient';
+import { replaceAppHistoryPath } from '../../routing/appPageRoutes';
 import { uploadEditorMediaAssetFile } from '../../services/image-editor/editorMediaAssetUploadClient';
+import { putEditorProjectCoverCache } from '../../services/image-editor/editorProjectCoverCache';
 import {
   createEditorProjectResource,
   type EditorProjectResourceSnapshot,
@@ -73,7 +81,14 @@ type ImageCanvasProjectPersistenceSetters = {
 function isEditorAuthError(error: unknown) {
   return (
     error instanceof ApiClientError &&
-    (error.status === 401 || error.status === 403)
+    error.status === 401
+  );
+}
+
+function isEditorProjectAccessError(error: unknown) {
+  return (
+    error instanceof ApiClientError &&
+    (error.status === 403 || error.status === 404)
   );
 }
 
@@ -159,6 +174,18 @@ function readEditorProjectSessionCache(projectId: string | null) {
   }
 }
 
+function removeEditorProjectSessionCache(projectId: string) {
+  const storage = getEditorProjectSessionStorage();
+  if (!storage) {
+    return;
+  }
+  try {
+    storage.removeItem(editorProjectSessionCacheKey(projectId));
+  } catch {
+    // ignore storage cleanup errors
+  }
+}
+
 function writeEditorProjectSessionCache(project: EditorProjectSnapshot) {
   if (projectSnapshotContainsInlineMedia(project)) {
     return;
@@ -173,7 +200,10 @@ function writeEditorProjectSessionCache(project: EditorProjectSnapshot) {
   };
   try {
     const serialized = JSON.stringify(cached);
-    storage.setItem(editorProjectSessionCacheKey(project.projectId), serialized);
+    storage.setItem(
+      editorProjectSessionCacheKey(project.projectId),
+      serialized,
+    );
     storage.setItem(EDITOR_PROJECT_RECENT_SESSION_CACHE_KEY, serialized);
   } catch {
     // ignore quota or privacy mode failures
@@ -250,6 +280,7 @@ export function useImageCanvasProjectPersistence({
   layers,
   canvasGenerationDialogs,
   viewport,
+  isViewportInteracting,
   canAccessProtectedData,
   openEditorLoginModal,
 }: {
@@ -258,6 +289,7 @@ export function useImageCanvasProjectPersistence({
   layers: CanvasLayer[];
   canvasGenerationDialogs: CanvasGenerationDialogState[];
   viewport: CanvasViewport;
+  isViewportInteracting: boolean;
   canAccessProtectedData: boolean;
   openEditorLoginModal: (postLoginAction?: (() => void) | null) => void;
 }) {
@@ -265,8 +297,9 @@ export function useImageCanvasProjectPersistence({
   const pendingProjectResourceLayersRef = useRef<PendingProjectResourceLayer[]>(
     [],
   );
-  const pendingProjectLayoutSaveRef =
-    useRef<PendingProjectLayoutSave | null>(null);
+  const pendingProjectLayoutSaveRef = useRef<PendingProjectLayoutSave | null>(
+    null,
+  );
   const isProjectLayoutSaveRunningRef = useRef(false);
   const skipNextProjectLayoutSaveRef = useRef(false);
   const saveTimerRef = useRef<number | null>(null);
@@ -360,6 +393,10 @@ export function useImageCanvasProjectPersistence({
           if (coverSnapshotUploadRequestRef.current !== requestId) {
             return;
           }
+          void putEditorProjectCoverCache({
+            projectId: nextProjectId,
+            blob,
+          });
           const coverFile = new File([blob], `${nextProjectId}-cover.png`, {
             type: 'image/png',
           });
@@ -510,7 +547,9 @@ export function useImageCanvasProjectPersistence({
           setLayers(nextLayers);
           if (nextLayers.length) {
             queueProjectLayoutSave(readyProjectId, {
-              viewport: viewportToCanvasDisplayViewport(refs.viewportRef.current),
+              viewport: viewportToCanvasDisplayViewport(
+                refs.viewportRef.current,
+              ),
               layers: serializeCanvasLayout({
                 layers: nextLayers,
                 canvasGenerationDialogs:
@@ -656,6 +695,11 @@ export function useImageCanvasProjectPersistence({
           openEditorLoginModal(() => {
             window.location.reload();
           });
+          return;
+        }
+        if (projectIdFromQuery && isEditorProjectAccessError(error)) {
+          removeEditorProjectSessionCache(projectIdFromQuery);
+          replaceAppHistoryPath('/project');
         }
       });
 
@@ -669,17 +713,31 @@ export function useImageCanvasProjectPersistence({
     openEditorLoginModal,
   ]);
 
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) {
+        window.clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (!projectId || !isProjectReady) {
       return undefined;
     }
     if (skipNextProjectLayoutSaveRef.current) {
       skipNextProjectLayoutSaveRef.current = false;
-      persistProjectCoverSnapshot(
-        projectId,
-        viewportToCanvasDisplayViewport(viewport),
-        layers,
-      );
+      if (!isViewportInteracting) {
+        persistProjectCoverSnapshot(
+          projectId,
+          viewportToCanvasDisplayViewport(viewport),
+          layers,
+        );
+      }
+      return undefined;
+    }
+    if (isViewportInteracting) {
       return undefined;
     }
     queueProjectLayoutSave(
@@ -693,16 +751,11 @@ export function useImageCanvasProjectPersistence({
       },
       { delayMs: 450 },
     );
-
-    return () => {
-      if (saveTimerRef.current) {
-        window.clearTimeout(saveTimerRef.current);
-        saveTimerRef.current = null;
-      }
-    };
+    return undefined;
   }, [
     isProjectReady,
     canvasGenerationDialogs,
+    isViewportInteracting,
     layers,
     persistProjectCoverSnapshot,
     projectId,
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
index 8fe34a582..84389c114 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
+++ b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
@@ -115,6 +115,9 @@ function StageInteractionsHarness({
   activateCanvasGenerationDialog = vi.fn(),
   moveViewportFromMinimapPointer = vi.fn(),
   updateViewportFromMinimapDrag = vi.fn(),
+  flushMinimapViewportDrag = vi.fn(),
+  onViewportInteractionStart = vi.fn(),
+  onViewportInteractionEnd = vi.fn(),
 }: {
   pickCharacterSpecFromLayer?: (layer: CanvasLayer) => void;
   pickGenerationReferenceFromLayer?: (layer: CanvasLayer) => void;
@@ -133,6 +136,9 @@ function StageInteractionsHarness({
     clientX: number,
     clientY: number,
   ) => void;
+  flushMinimapViewportDrag?: () => void;
+  onViewportInteractionStart?: () => void;
+  onViewportInteractionEnd?: () => void;
 }) {
   const canvasViewportRef = useRef<HTMLDivElement | null>(null);
   const worldRef = useRef<HTMLDivElement | null>(null);
@@ -227,7 +233,10 @@ function StageInteractionsHarness({
         clientX,
         clientY,
       ),
+    flushMinimapViewportDrag,
     minimapScale: 0.5,
+    onViewportInteractionStart,
+    onViewportInteractionEnd,
     onCloseImageContextMenu: () =>
       setImageMenuCloseCount((currentCount) => currentCount + 1),
   });
@@ -614,6 +623,20 @@ function StageInteractionsHarness({
       >
         直接拖小地图
       </button>
+      <button
+        type="button"
+        onClick={(event) => {
+          interaction.finishDrag(
+            createPointerEvent(getViewportElement(), {
+              pointerId: 7,
+              clientX: 130,
+              clientY: 95,
+            }),
+          );
+        }}
+      >
+        直接结束小地图拖拽
+      </button>
     </div>
   );
 }
@@ -685,9 +708,12 @@ describe('useImageCanvasStageInteractions', () => {
       screen.getByRole('button', { name: '直接移动平移' }).click();
     });
     expect(screen.getByTestId('viewport-state').textContent).toBe('30.0,25.0,1');
-
     act(() => {
       screen.getByRole('button', { name: '清理交互' }).click();
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('false');
+
+    act(() => {
       screen.getByRole('button', { name: '松开空格' }).click();
     });
     act(() => {
@@ -763,4 +789,40 @@ describe('useImageCanvasStageInteractions', () => {
       95,
     );
   });
+
+  it('marks viewport interactions for pan and minimap drags', () => {
+    const onViewportInteractionStart = vi.fn();
+    const onViewportInteractionEnd = vi.fn();
+    const flushMinimapViewportDrag = vi.fn();
+    render(
+      <StageInteractionsHarness
+        flushMinimapViewportDrag={flushMinimapViewportDrag}
+        onViewportInteractionStart={onViewportInteractionStart}
+        onViewportInteractionEnd={onViewportInteractionEnd}
+      />,
+    );
+
+    act(() => {
+      screen.getByRole('button', { name: '切抓手' }).click();
+    });
+    act(() => {
+      screen.getByRole('button', { name: '直接开始平移' }).click();
+    });
+    expect(onViewportInteractionStart).toHaveBeenCalledTimes(1);
+    act(() => {
+      screen.getByRole('button', { name: '清理交互' }).click();
+    });
+    expect(onViewportInteractionEnd).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      screen.getByRole('button', { name: '直接拖小地图' }).click();
+    });
+    expect(onViewportInteractionStart).toHaveBeenCalledTimes(2);
+    act(() => {
+      screen.getByRole('button', { name: '直接结束小地图拖拽' }).click();
+    });
+
+    expect(flushMinimapViewportDrag).toHaveBeenCalledTimes(1);
+    expect(onViewportInteractionEnd).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.ts b/src/components/image-editor/useImageCanvasStageInteractions.ts
index 2d9ead0c1..7421d4368 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.ts
+++ b/src/components/image-editor/useImageCanvasStageInteractions.ts
@@ -70,6 +70,7 @@ type UseImageCanvasStageInteractionsOptions = {
   pickIconSpecFromLayer: (layer: CanvasLayer) => void;
   pickUiDesignSpecFromLayer: (layer: CanvasLayer) => void;
   pickPublicationReferenceFromLayer: (layer: CanvasLayer) => void;
+  openLayerGenerationDialog?: (layer: CanvasLayer) => boolean;
   activateCanvasGenerationDialog: (
     dialog: CanvasGenerationDialogState,
   ) => void;
@@ -85,7 +86,10 @@ type UseImageCanvasStageInteractionsOptions = {
     clientX: number,
     clientY: number,
   ) => void;
+  flushMinimapViewportDrag: () => void;
   minimapScale: number;
+  onViewportInteractionStart?: () => void;
+  onViewportInteractionEnd?: () => void;
   onCloseImageContextMenu: () => void;
 };
 
@@ -117,16 +121,21 @@ export function useImageCanvasStageInteractions({
   pickIconSpecFromLayer,
   pickUiDesignSpecFromLayer,
   pickPublicationReferenceFromLayer,
+  openLayerGenerationDialog,
   activateCanvasGenerationDialog,
   updateCanvasGenerationDialogById,
   moveViewportFromMinimapPointer,
   updateViewportFromMinimapDrag,
+  flushMinimapViewportDrag,
   minimapScale,
+  onViewportInteractionStart,
+  onViewportInteractionEnd,
   onCloseImageContextMenu,
 }: UseImageCanvasStageInteractionsOptions) {
   const dragStateRef = useRef<DragState | null>(null);
   const isShiftPressedRef = useRef(false);
   const suppressNextLayerClickRef = useRef(false);
+  const isViewportInteractionActiveRef = useRef(false);
   const [canvasMarquee, setCanvasMarquee] = useState<CanvasMarqueeState | null>(
     null,
   );
@@ -135,12 +144,35 @@ export function useImageCanvasStageInteractions({
   const [snapGuide, setSnapGuide] = useState<SnapGuide | null>(null);
   const effectiveTool: CanvasTool = isSpacePanning ? 'hand' : activeTool;
 
+  const finishViewportInteraction = useCallback(() => {
+    if (!isViewportInteractionActiveRef.current) {
+      return;
+    }
+    isViewportInteractionActiveRef.current = false;
+    onViewportInteractionEnd?.();
+  }, [onViewportInteractionEnd]);
+
+  const startViewportInteraction = useCallback(() => {
+    if (isViewportInteractionActiveRef.current) {
+      return;
+    }
+    isViewportInteractionActiveRef.current = true;
+    onViewportInteractionStart?.();
+  }, [onViewportInteractionStart]);
+
   const clearActiveInteraction = useCallback(() => {
+    const dragState = dragStateRef.current;
+    if (dragState?.kind === 'minimap') {
+      flushMinimapViewportDrag();
+    }
     dragStateRef.current = null;
     setCanvasMarquee(null);
     setIsPanning(false);
     setSnapGuide(null);
-  }, []);
+    if (dragState?.kind === 'pan' || dragState?.kind === 'minimap') {
+      finishViewportInteraction();
+    }
+  }, [finishViewportInteraction, flushMinimapViewportDrag]);
 
   const setShiftPressed = useCallback((pressed: boolean) => {
     isShiftPressedRef.current = pressed;
@@ -152,13 +184,14 @@ export function useImageCanvasStageInteractions({
       const pointer = getPointerClient(event);
       canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
       setIsPanning(true);
+      startViewportInteraction();
       dragStateRef.current = createPanDragState({
         pointerId: getPointerId(event),
         pointer,
         viewport,
       });
     },
-    [canvasViewportRef, viewport],
+    [canvasViewportRef, startViewportInteraction, viewport],
   );
 
   const handleCanvasPointerDown = useCallback(
@@ -358,9 +391,11 @@ export function useImageCanvasStageInteractions({
       }
       setSelectedLayerId(layer.id);
       setSelectedLayerIds([layer.id]);
-      setGenerateDialog((currentDialog) =>
-        updateGenerateDialogForLayerClick(currentDialog),
-      );
+      if (!openLayerGenerationDialog?.(layer)) {
+        setGenerateDialog((currentDialog) =>
+          updateGenerateDialogForLayerClick(currentDialog),
+        );
+      }
       onCloseImageContextMenu();
     },
     [
@@ -371,6 +406,7 @@ export function useImageCanvasStageInteractions({
       isPickingIconSpecFromCanvas,
       isPickingPublicationReferenceFromCanvas,
       onCloseImageContextMenu,
+      openLayerGenerationDialog,
       setGenerateDialog,
       setSelectedLayerId,
       setSelectedLayerIds,
@@ -437,6 +473,7 @@ export function useImageCanvasStageInteractions({
       event.stopPropagation();
       const pointer = getPointerClient(event);
       canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
+      startViewportInteraction();
       dragStateRef.current = createMinimapDragState({
         pointerId: getPointerId(event),
         pointer,
@@ -444,7 +481,7 @@ export function useImageCanvasStageInteractions({
         minimapScale,
       });
     },
-    [canvasViewportRef, minimapScale, viewport],
+    [canvasViewportRef, minimapScale, startViewportInteraction, viewport],
   );
 
   const handlePointerMove = useCallback(
@@ -600,15 +637,27 @@ export function useImageCanvasStageInteractions({
           const pointer = getPointerClient(event);
           moveViewportFromMinimapPointer(pointer.x, pointer.y);
         }
+        if (dragState.kind === 'minimap') {
+          flushMinimapViewportDrag();
+        }
         dragStateRef.current = null;
         setIsPanning(false);
         setSnapGuide(null);
+        if (dragState.kind === 'pan' || dragState.kind === 'minimap') {
+          finishViewportInteraction();
+        }
         if (canvasViewportRef.current?.hasPointerCapture?.(event.pointerId)) {
           canvasViewportRef.current.releasePointerCapture?.(event.pointerId);
         }
       }
     },
-    [canvasMarquee, canvasViewportRef, moveViewportFromMinimapPointer],
+    [
+      canvasMarquee,
+      canvasViewportRef,
+      finishViewportInteraction,
+      flushMinimapViewportDrag,
+      moveViewportFromMinimapPointer,
+    ],
   );
 
   return useMemo(
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
index edf53dbcc..efa115b08 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx
@@ -102,6 +102,21 @@ function createSizedPngFile(name: string, width: number, height: number) {
   return new File([bytes], name, { type: 'image/png' });
 }
 
+function setVideoElementSize(
+  element: HTMLMediaElement | undefined,
+  width: number,
+  height: number,
+) {
+  Object.defineProperty(element, 'videoWidth', {
+    configurable: true,
+    value: width,
+  });
+  Object.defineProperty(element, 'videoHeight', {
+    configurable: true,
+    value: height,
+  });
+}
+
 function createDeferred<T>() {
   let resolve!: (value: T) => void;
   let reject!: (reason?: unknown) => void;
@@ -128,6 +143,8 @@ function UploadWorkflowHarness({
   ]);
   const [assets, setAssets] = useState<EditorAsset[]>([]);
   const [layers, setLayers] = useState<CanvasLayer[]>([]);
+  const [uiAssetExtractionReferences, setUiAssetExtractionReferences] =
+    useState<NonNullable<GenerateDialogState['generationReferences']>>([]);
   const [generateDialog, setGenerateDialog] =
     useState<GenerateDialogState | null>(null);
   const [, setQuickEditPanel] = useState<QuickEditPanelState | null>(null);
@@ -153,6 +170,11 @@ function UploadWorkflowHarness({
     setLayers,
     setGenerateDialog,
     setQuickEditPanel,
+    appendUiAssetExtractionReferences: (references) =>
+      setUiAssetExtractionReferences((currentReferences) => [
+        ...currentReferences,
+        ...references,
+      ]),
     appendCanvasLayersWithResources: (nextLayers) => {
       setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
     },
@@ -199,6 +221,14 @@ function UploadWorkflowHarness({
           ? `${generateDialog.mode}:${generateDialog.status}:${generateDialog.characterSpecReference?.label ?? '-'}:${generateDialog.characterReferences?.length ?? 0}:${generateDialog.iconSpecReference?.label ?? '-'}:${generateDialog.specReference?.label ?? '-'}:${generateDialog.generationReferences?.length ?? 0}:${generateDialog.generationReferences?.[0]?.label ?? '-'}:${generateDialog.generationReferences?.map((reference) => `${reference.mediaType ?? 'image'}:${reference.src}:${reference.objectKey ?? '-'}:${reference.resourceId ?? '-'}:${reference.sourceAssetId ?? '-'}`).join(',') || '-'}`
           : '-'}
       </span>
+      <span data-testid="ui-asset-extraction-references">
+        {uiAssetExtractionReferences
+          .map(
+            (reference) =>
+              `${reference.label}:${reference.src}:${reference.objectKey ?? '-'}:${reference.resourceId ?? '-'}`,
+          )
+          .join('|') || '-'}
+      </span>
       <button
         type="button"
         onClick={() => workflow.addUploadedFiles([createTestFile()])}
@@ -233,6 +263,20 @@ function UploadWorkflowHarness({
       >
         上传原始尺寸到画布
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.addUploadedFiles(
+            [new File(['video'], '画布视频.mp4', { type: 'video/mp4' })],
+            {
+              addToCanvas: true,
+              canvasPoint: { x: 110, y: 120 },
+            },
+          )
+        }
+      >
+        上传视频到画布
+      </button>
       <button
         type="button"
         onClick={() =>
@@ -292,6 +336,14 @@ function UploadWorkflowHarness({
       >
         选择生成参考图
       </button>
+      <button
+        type="button"
+        onClick={() =>
+          workflow.setUploadTarget('ui-asset-extraction-reference')
+        }
+      >
+        选择UI素材提取参考图
+      </button>
       <button
         type="button"
         onClick={() => workflow.setUploadTarget('spec-reference')}
@@ -380,13 +432,15 @@ describe('useImageCanvasUploadWorkflow', () => {
     });
     createdMediaElements = [];
     const originalCreateElement = document.createElement.bind(document);
-    vi.spyOn(document, 'createElement').mockImplementation((tagName, options) => {
-      const element = originalCreateElement(tagName, options);
-      if (tagName === 'video' || tagName === 'audio') {
-        createdMediaElements.push(element as HTMLMediaElement);
-      }
-      return element;
-    });
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName, options) => {
+        const element = originalCreateElement(tagName, options);
+        if (tagName === 'video' || tagName === 'audio') {
+          createdMediaElements.push(element as HTMLMediaElement);
+        }
+        return element;
+      },
+    );
     Object.defineProperty(URL, 'createObjectURL', {
       configurable: true,
       value: vi.fn(() => 'blob:media'),
@@ -395,7 +449,9 @@ describe('useImageCanvasUploadWorkflow', () => {
       configurable: true,
       value: vi.fn(),
     });
-    vi.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(() => undefined);
+    vi.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(
+      () => undefined,
+    );
   });
 
   it('opens login before creating placeholders and resumes the same upload after login', async () => {
@@ -541,9 +597,7 @@ describe('useImageCanvasUploadWorkflow', () => {
   it('uses the uploaded image resolution before creating the canvas layer and persisted asset', async () => {
     render(<UploadWorkflowHarness />);
 
-    fireEvent.click(
-      screen.getByRole('button', { name: '上传原始尺寸到画布' }),
-    );
+    fireEvent.click(screen.getByRole('button', { name: '上传原始尺寸到画布' }));
 
     await waitFor(() => {
       expect(createEditorAssetMock).toHaveBeenCalledWith(
@@ -562,6 +616,44 @@ describe('useImageCanvasUploadWorkflow', () => {
     );
   });
 
+  it('uses the uploaded video resolution before creating the canvas layer and persisted asset', async () => {
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(screen.getByRole('button', { name: '上传视频到画布' }));
+    await waitFor(() => {
+      expect(
+        createdMediaElements.some(
+          (element) => element.tagName.toLowerCase() === 'video',
+        ),
+      ).toBe(true);
+    });
+    createdMediaElements
+      .filter((element) => element.tagName.toLowerCase() === 'video')
+      .forEach((element) => setVideoElementSize(element, 1280, 720));
+    act(() => {
+      createdMediaElements.forEach((element) =>
+        element.onloadedmetadata?.(new Event('loadedmetadata')),
+      );
+    });
+
+    await waitFor(() => {
+      expect(createEditorAssetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          label: '画布视频.mp4',
+          width: 1280,
+          height: 720,
+          durationSeconds: 4,
+        }),
+      );
+    });
+    expect(screen.getByTestId('assets').textContent).toContain(
+      'persisted-画布视频.mp4:画布视频.mp4:folder-uploaded:ready:-:1280x720',
+    );
+    expect(screen.getByTestId('layers').textContent).toContain(
+      'layer-upload-1:画布视频.mp4:persisted-画布视频.mp4:-590:-310:1280x720',
+    );
+  });
+
   it('marks upload cards as failed and reopens login on auth errors returned by asset creation', async () => {
     const openEditorLoginModal = vi.fn();
     createEditorAssetMock.mockRejectedValueOnce(
@@ -655,6 +747,41 @@ describe('useImageCanvasUploadWorkflow', () => {
     expect(createEditorAssetMock).not.toHaveBeenCalled();
   });
 
+  it('dispatches file input uploads to UI asset extraction references', async () => {
+    render(<UploadWorkflowHarness />);
+
+    fireEvent.click(
+      screen.getByRole('button', { name: '选择UI素材提取参考图' }),
+    );
+    fireEvent.change(screen.getByLabelText('上传图片文件'), {
+      target: {
+        files: [createTestFile('UI素材参考.png')],
+      },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('ui-asset-extraction-references').textContent,
+      ).toContain(
+        'UI素材参考.png:/generated-character-drafts/editor/asset-library/image/UI素材参考.png:generated-character-drafts/editor/asset-library/image/UI素材参考.png',
+      );
+    });
+    expect(createEditorProjectResourceMock).toHaveBeenCalledWith(
+      'project-1',
+      expect.objectContaining({
+        imageSrc:
+          '/generated-character-drafts/editor/asset-library/image/UI素材参考.png',
+        objectKey:
+          'generated-character-drafts/editor/asset-library/image/UI素材参考.png',
+        assetObjectId: 'assetobj-editor-image',
+        width: 420,
+        height: 315,
+        sourceType: 'uploaded',
+      }),
+    );
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
   it('dispatches file input uploads to spec reference images', async () => {
     render(<UploadWorkflowHarness />);
 
@@ -725,7 +852,9 @@ describe('useImageCanvasUploadWorkflow', () => {
       }),
     );
     expect(createEditorAssetMock).not.toHaveBeenCalled();
-    expect(screen.getByTestId('dialog').textContent).not.toContain('data:video');
+    expect(screen.getByTestId('dialog').textContent).not.toContain(
+      'data:video',
+    );
   });
 
   it('uploads Seedance reference audios through OSS and stores object keys instead of data URLs', async () => {
@@ -765,6 +894,8 @@ describe('useImageCanvasUploadWorkflow', () => {
       }),
     );
     expect(createEditorAssetMock).not.toHaveBeenCalled();
-    expect(screen.getByTestId('dialog').textContent).not.toContain('data:audio');
+    expect(screen.getByTestId('dialog').textContent).not.toContain(
+      'data:audio',
+    );
   });
 });
diff --git a/src/components/image-editor/useImageCanvasUploadWorkflow.ts b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
index 310516a34..fc718e6af 100644
--- a/src/components/image-editor/useImageCanvasUploadWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasUploadWorkflow.ts
@@ -40,6 +40,7 @@ import {
   isSeedanceReferenceImageFile,
   isSeedanceReferenceVideoFile,
   probeImageFileDimensions,
+  probeMediaFileMetadata,
   probeMediaDurationSeconds,
   readFileAsDataUrl,
   readImageFileAsDataUrl,
@@ -92,6 +93,9 @@ type UseImageCanvasUploadWorkflowOptions = {
   setLayers: Dispatch<SetStateAction<CanvasLayer[]>>;
   setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
   setQuickEditPanel: Dispatch<SetStateAction<QuickEditPanelState | null>>;
+  appendUiAssetExtractionReferences: (
+    references: CharacterReferenceImage[],
+  ) => void;
   appendCanvasLayersWithResources: (nextLayers: CanvasLayer[]) => void;
   selectSingleLayer: (layerId: string | null) => void;
 };
@@ -128,6 +132,7 @@ export function useImageCanvasUploadWorkflow({
   setLayers,
   setGenerateDialog,
   setQuickEditPanel,
+  appendUiAssetExtractionReferences,
   appendCanvasLayersWithResources,
   selectSingleLayer,
 }: UseImageCanvasUploadWorkflowOptions) {
@@ -135,7 +140,9 @@ export function useImageCanvasUploadWorkflow({
   const canAccessProtectedDataRef = useRef(canAccessProtectedData);
   const uploadTargetRef = useRef<UploadTarget>('asset');
   const uploadRequestOptionsRef = useRef<UploadRequestOptions>({});
-  const uploadAssetFolderCreatePromiseRef = useRef<Promise<string> | null>(null);
+  const uploadAssetFolderCreatePromiseRef = useRef<Promise<string> | null>(
+    null,
+  );
   const [uploadTarget, setUploadTargetState] = useState<UploadTarget>('asset');
 
   canAccessProtectedDataRef.current = canAccessProtectedData;
@@ -464,6 +471,38 @@ export function useImageCanvasUploadWorkflow({
     [persistReferenceUploads, setQuickEditPanel],
   );
 
+  const addUiAssetExtractionReferenceFiles = useCallback(
+    async (files: FileList | File[]) => {
+      const imageFiles = Array.from(files).filter(isImageFile);
+      if (!imageFiles.length) {
+        window.alert('请选择图片文件');
+        return;
+      }
+
+      const references = await Promise.all(
+        imageFiles.map(async (file, index) => ({
+          file,
+          index,
+          imageSrc: await readImageFileAsDataUrl(file),
+        })),
+      );
+      const persistedReferences = await persistReferenceUploads(
+        references.map(({ file, imageSrc, index }) => ({
+          idPrefix: 'upload-ui-asset-extraction-reference',
+          index,
+          file,
+          fallbackLabel: `UI素材参考图${index + 1}`,
+          imageSrc,
+        })),
+      );
+      if (!persistedReferences) {
+        return;
+      }
+      appendUiAssetExtractionReferences(persistedReferences);
+    },
+    [appendUiAssetExtractionReferences, persistReferenceUploads],
+  );
+
   const addPublicationReferenceFiles = useCallback(
     async (files: FileList | File[]) => {
       const imageFiles = Array.from(files).filter(isImageFile);
@@ -567,7 +606,10 @@ export function useImageCanvasUploadWorkflow({
       }
       const references = await Promise.all(
         videoFiles.map(async (file, index) => {
-          const durationSeconds = await probeMediaDurationSeconds(file, 'video');
+          const durationSeconds = await probeMediaDurationSeconds(
+            file,
+            'video',
+          );
           return {
             file,
             index,
@@ -579,7 +621,8 @@ export function useImageCanvasUploadWorkflow({
         references.some(
           ({ durationSeconds }) =>
             Number.isFinite(durationSeconds) &&
-            (durationSeconds < SEEDANCE_REFERENCE_FILE_LIMITS.mediaMinDurationSeconds ||
+            (durationSeconds <
+              SEEDANCE_REFERENCE_FILE_LIMITS.mediaMinDurationSeconds ||
               durationSeconds >
                 SEEDANCE_REFERENCE_FILE_LIMITS.mediaMaxDurationSeconds),
         )
@@ -595,8 +638,7 @@ export function useImageCanvasUploadWorkflow({
         0,
       );
       if (
-        totalDuration >
-        SEEDANCE_REFERENCE_FILE_LIMITS.mediaTotalDurationSeconds
+        totalDuration > SEEDANCE_REFERENCE_FILE_LIMITS.mediaTotalDurationSeconds
       ) {
         window.alert('参考视频总时长不能超过 15 秒');
         return;
@@ -612,7 +654,10 @@ export function useImageCanvasUploadWorkflow({
       try {
         uploadedReferences = await Promise.all(
           references.map(async ({ file, index, durationSeconds }) => {
-            const uploaded = await uploadEditorSeedanceReferenceFile(file, 'video');
+            const uploaded = await uploadEditorSeedanceReferenceFile(
+              file,
+              'video',
+            );
             return {
               file,
               index,
@@ -629,7 +674,14 @@ export function useImageCanvasUploadWorkflow({
       }
       const persistedReferences = await persistReferenceUploads(
         uploadedReferences.map(
-          ({ file, src, index, durationSeconds, objectKey, assetObjectId }) => ({
+          ({
+            file,
+            src,
+            index,
+            durationSeconds,
+            objectKey,
+            assetObjectId,
+          }) => ({
             idPrefix: 'upload-video-reference-video',
             index,
             file,
@@ -675,7 +727,10 @@ export function useImageCanvasUploadWorkflow({
       }
       const references = await Promise.all(
         audioFiles.map(async (file, index) => {
-          const durationSeconds = await probeMediaDurationSeconds(file, 'audio');
+          const durationSeconds = await probeMediaDurationSeconds(
+            file,
+            'audio',
+          );
           return {
             file,
             index,
@@ -687,7 +742,8 @@ export function useImageCanvasUploadWorkflow({
         references.some(
           ({ durationSeconds }) =>
             Number.isFinite(durationSeconds) &&
-            (durationSeconds < SEEDANCE_REFERENCE_FILE_LIMITS.mediaMinDurationSeconds ||
+            (durationSeconds <
+              SEEDANCE_REFERENCE_FILE_LIMITS.mediaMinDurationSeconds ||
               durationSeconds >
                 SEEDANCE_REFERENCE_FILE_LIMITS.mediaMaxDurationSeconds),
         )
@@ -703,8 +759,7 @@ export function useImageCanvasUploadWorkflow({
         0,
       );
       if (
-        totalDuration >
-        SEEDANCE_REFERENCE_FILE_LIMITS.mediaTotalDurationSeconds
+        totalDuration > SEEDANCE_REFERENCE_FILE_LIMITS.mediaTotalDurationSeconds
       ) {
         window.alert('参考音频总时长不能超过 15 秒');
         return;
@@ -720,7 +775,10 @@ export function useImageCanvasUploadWorkflow({
       try {
         uploadedReferences = await Promise.all(
           references.map(async ({ file, index, durationSeconds }) => {
-            const uploaded = await uploadEditorSeedanceReferenceFile(file, 'audio');
+            const uploaded = await uploadEditorSeedanceReferenceFile(
+              file,
+              'audio',
+            );
             return {
               file,
               index,
@@ -737,7 +795,14 @@ export function useImageCanvasUploadWorkflow({
       }
       const persistedReferences = await persistReferenceUploads(
         uploadedReferences.map(
-          ({ file, src, index, durationSeconds, objectKey, assetObjectId }) => ({
+          ({
+            file,
+            src,
+            index,
+            durationSeconds,
+            objectKey,
+            assetObjectId,
+          }) => ({
             idPrefix: 'upload-video-reference-audio',
             index,
             file,
@@ -880,8 +945,18 @@ export function useImageCanvasUploadWorkflow({
       }
       const uploadIndex = options.uploadIndex;
       let imageDimensions: { width: number; height: number } | null = null;
+      let mediaMetadata: Awaited<
+        ReturnType<typeof probeMediaFileMetadata>
+      > | null = null;
       if (mediaType === 'image') {
-        imageDimensions = await probeImageFileDimensions(file).catch(() => null);
+        imageDimensions = await probeImageFileDimensions(file).catch(
+          () => null,
+        );
+      } else if (mediaType === 'video') {
+        mediaMetadata = await probeMediaFileMetadata(file, 'video').catch(
+          () => null,
+        );
+        imageDimensions = mediaMetadata?.dimensions ?? null;
       }
       const uploadedAsset = createUploadingAssetPlaceholder({
         uploadIndex,
@@ -904,10 +979,11 @@ export function useImageCanvasUploadWorkflow({
       let durationSeconds: number | undefined;
       try {
         if (mediaType !== 'image') {
-          durationSeconds = await probeMediaDurationSeconds(
-            file,
-            mediaType,
-          ).catch(() => undefined);
+          durationSeconds =
+            mediaMetadata?.durationSeconds ??
+            (await probeMediaDurationSeconds(file, mediaType).catch(
+              () => undefined,
+            ));
         }
         const uploadedMedia = await uploadEditorMediaAssetFile(file, mediaType);
         imageSrc = uploadedMedia.legacyPublicPath;
@@ -1074,11 +1150,7 @@ export function useImageCanvasUploadWorkflow({
         });
       });
     },
-    [
-      allocateUploadIndex,
-      openEditorLoginModal,
-      uploadAssetFile,
-    ],
+    [allocateUploadIndex, openEditorLoginModal, uploadAssetFile],
   );
 
   const openUploadPicker = useCallback(
@@ -1110,6 +1182,8 @@ export function useImageCanvasUploadWorkflow({
           void addSpecReferenceFiles(files);
         } else if (currentUploadTarget === 'generation-reference') {
           void addGenerationReferenceFiles(files);
+        } else if (currentUploadTarget === 'ui-asset-extraction-reference') {
+          void addUiAssetExtractionReferenceFiles(files);
         } else if (currentUploadTarget === 'quick-edit-reference') {
           void addQuickEditReferenceFiles(files);
         } else if (currentUploadTarget === 'publication-reference') {
@@ -1132,8 +1206,7 @@ export function useImageCanvasUploadWorkflow({
           const requestOptions = uploadRequestOptionsRef.current;
           addUploadedFiles(files, {
             folderId: requestOptions.folderId,
-            addToCanvas:
-              requestOptions.addToCanvas ?? activeTool === 'upload',
+            addToCanvas: requestOptions.addToCanvas ?? activeTool === 'upload',
           });
         }
       }
@@ -1146,6 +1219,7 @@ export function useImageCanvasUploadWorkflow({
       addCharacterReferenceFiles,
       addCharacterSpecReferenceFiles,
       addGenerationReferenceFiles,
+      addUiAssetExtractionReferenceFiles,
       addQuickEditReferenceFiles,
       addPublicationReferenceFiles,
       addVideoReferenceImageFiles,
@@ -1170,6 +1244,7 @@ export function useImageCanvasUploadWorkflow({
     addCharacterSpecReferenceFiles,
     addCharacterReferenceFiles,
     addGenerationReferenceFiles,
+    addUiAssetExtractionReferenceFiles,
     addQuickEditReferenceFiles,
     addPublicationReferenceFiles,
     addVideoReferenceImageFiles,
diff --git a/src/components/image-editor/useImageCanvasViewportControls.test.tsx b/src/components/image-editor/useImageCanvasViewportControls.test.tsx
index a4fcc240d..c9f3baf14 100644
--- a/src/components/image-editor/useImageCanvasViewportControls.test.tsx
+++ b/src/components/image-editor/useImageCanvasViewportControls.test.tsx
@@ -1,10 +1,9 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { useRef } from 'react';
-import { describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import type { CanvasLayer } from './ImageCanvasEditorTypes';
+import type { CanvasLayer, CanvasViewport } from './ImageCanvasEditorTypes';
 import { useImageCanvasViewportControls } from './useImageCanvasViewportControls';
 
 function createLayer(overrides: Partial<CanvasLayer>): CanvasLayer {
@@ -52,144 +51,136 @@ function setElementBox(
     }) as DOMRect;
 }
 
-function ViewportHarness({
-  captureCanvasHistory = vi.fn(),
-}: {
-  captureCanvasHistory?: () => void;
-}) {
-  const viewportRef = useRef<HTMLDivElement | null>(null);
-  const layers = [
+function createViewportLayers() {
+  return [
     createLayer({ id: 'one', x: 0, y: 0, width: 400, height: 300 }),
     createLayer({ id: 'two', x: 600, y: 100, width: 200, height: 200 }),
   ];
-  const controls = useImageCanvasViewportControls({
-    canvasViewportRef: viewportRef,
-    layers,
-    captureCanvasHistory,
-  });
+}
 
-  return (
-    <div>
-      <div
-        ref={(element) => {
-          viewportRef.current = element;
-          if (element) {
-            setElementBox(element, { width: 900, height: 640 });
-          }
-        }}
-        data-testid="viewport-element"
-      />
-      <div
-        className="image-canvas-editor__minimap"
-        data-testid="minimap"
-        ref={(element) => {
-          if (element) {
-            setElementBox(element, {
-              left: 20,
-              top: 30,
-              width: 160,
-              height: 120,
-            });
-          }
-        }}
-      />
-      <span data-testid="viewport">
-        {controls.viewport.x.toFixed(2)},{controls.viewport.y.toFixed(2)},
-        {controls.viewport.scale.toFixed(2)}
-      </span>
-      <span data-testid="canvas-size">
-        {controls.canvasSize.width}x{controls.canvasSize.height}
-      </span>
-      <span data-testid="drop-point">
-        {JSON.stringify(controls.getCanvasDropPoint(260, 190))}
-      </span>
-      <span data-testid="world-point">
-        {JSON.stringify(controls.getCanvasPointFromClient(260, 190))}
-      </span>
-      <span data-testid="minimap-count">
-        {controls.minimapModel?.layers.length ?? 0}
-      </span>
-      <button type="button" onClick={() => controls.fitLayers()}>
-        fit
-      </button>
-      <button type="button" onClick={() => controls.updateScaleFromCenter(2)}>
-        zoom center
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          controls.updateViewportFromMinimapDrag(
-            {
-              kind: 'minimap',
-              pointerId: 1,
-              startClientX: 100,
-              startClientY: 100,
-              startViewport: { x: -100, y: -50, scale: 1 },
-              minimapScale: controls.minimapModel?.scale ?? 1,
-              moved: true,
-            },
-            104,
-            103,
-          );
-        }}
-      >
-        minimap drag
-      </button>
-      <button
-        type="button"
-        onClick={() => controls.moveViewportFromMinimapPointer(100, 90)}
-      >
-        minimap click
-      </button>
-    </div>
+function renderViewportControls({
+  captureCanvasHistory = vi.fn(),
+  layers = createViewportLayers(),
+}: {
+  captureCanvasHistory?: () => void;
+  layers?: CanvasLayer[];
+} = {}) {
+  const viewportElement = document.createElement('div');
+  setElementBox(viewportElement, { width: 900, height: 640 });
+  document.body.append(viewportElement);
+
+  const minimapElement = document.createElement('div');
+  minimapElement.className = 'image-canvas-editor__minimap';
+  setElementBox(minimapElement, {
+    left: 20,
+    top: 30,
+    width: 160,
+    height: 120,
+  });
+  document.body.append(minimapElement);
+
+  const canvasViewportRef = { current: viewportElement };
+  const hook = renderHook(() =>
+    useImageCanvasViewportControls({
+      canvasViewportRef,
+      layers,
+      captureCanvasHistory,
+    }),
   );
+
+  return {
+    ...hook,
+    viewportElement,
+    captureCanvasHistory,
+  };
+}
+
+function createMinimapDragState(minimapScale: number) {
+  return {
+    kind: 'minimap' as const,
+    pointerId: 1,
+    startClientX: 100,
+    startClientY: 100,
+    startViewport: { x: -100, y: -50, scale: 1 },
+    minimapScale,
+    moved: true,
+  };
+}
+
+function expectViewport(viewport: CanvasViewport, expected: CanvasViewport) {
+  expect(viewport.x).toBeCloseTo(expected.x);
+  expect(viewport.y).toBeCloseTo(expected.y);
+  expect(viewport.scale).toBeCloseTo(expected.scale);
 }
 
 describe('useImageCanvasViewportControls', () => {
-  it('owns canvas size, fit view, center zoom and canvas point helpers', () => {
-    const captureCanvasHistory = vi.fn();
-    render(
-      <ViewportHarness captureCanvasHistory={captureCanvasHistory} />,
-    );
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.replaceChildren();
+  });
 
-    expect(screen.getByTestId('canvas-size').textContent).toBe('900x640');
-    expect(screen.getByTestId('minimap-count').textContent).toBe('2');
-    expect(screen.getByTestId('drop-point').textContent).toBe(
-      '{"x":260,"y":190}',
-    );
-    const worldPoint = JSON.parse(
-      screen.getByTestId('world-point').textContent ?? '{}',
-    ) as { x: number; y: number };
+  it('owns canvas size, minimap model and canvas point helpers', () => {
+    const { result } = renderViewportControls();
+
+    expect(result.current.canvasSize).toEqual({ width: 900, height: 640 });
+    expect(result.current.minimapModel?.layers).toHaveLength(2);
+    expect(result.current.getCanvasDropPoint(260, 190)).toEqual({
+      x: 260,
+      y: 190,
+    });
+    const worldPoint = result.current.getCanvasPointFromClient(260, 190);
     expect(worldPoint.x).toBeCloseTo(1040);
     expect(worldPoint.y).toBeCloseTo(240);
+  });
+
+  it('fits layers and zooms from the viewport center', () => {
+    const captureCanvasHistory = vi.fn();
+    const { result } = renderViewportControls({ captureCanvasHistory });
 
     act(() => {
-      screen.getByRole('button', { name: 'fit' }).click();
+      result.current.fitLayers();
+    });
+    expectViewport(result.current.viewport, {
+      x: 50,
+      y: 170,
+      scale: 1,
     });
-    expect(screen.getByTestId('viewport').textContent).toBe(
-      '50.00,170.00,1.00',
-    );
     expect(captureCanvasHistory).toHaveBeenCalledTimes(1);
 
     act(() => {
-      screen.getByRole('button', { name: 'zoom center' }).click();
+      result.current.updateScaleFromCenter(2);
+    });
+    expectViewport(result.current.viewport, {
+      x: -350,
+      y: 20,
+      scale: 2,
     });
-    expect(screen.getByTestId('viewport').textContent).toBe(
-      '-350.00,20.00,2.00',
-    );
     expect(captureCanvasHistory).toHaveBeenCalledTimes(2);
   });
 
   it('handles vertical wheel scroll, ctrl wheel zoom and minimap movement', () => {
-    render(<ViewportHarness />);
-    const viewportElement = screen.getByTestId('viewport-element');
+    const rafCallbacks: FrameRequestCallback[] = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(
+      (callback: FrameRequestCallback) => {
+        rafCallbacks.push(callback);
+        return rafCallbacks.length;
+      },
+    );
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+    const { result, viewportElement } = renderViewportControls();
 
     act(() => {
-      fireEvent.wheel(viewportElement, { deltaY: 120, clientX: 260, clientY: 190 });
+      fireEvent.wheel(viewportElement, {
+        deltaY: 120,
+        clientX: 260,
+        clientY: 190,
+      });
+    });
+    expectViewport(result.current.viewport, {
+      x: -260,
+      y: -50,
+      scale: 0.5,
     });
-    expect(screen.getByTestId('viewport').textContent).toBe(
-      '-260.00,-50.00,0.50',
-    );
 
     act(() => {
       fireEvent.wheel(viewportElement, {
@@ -199,19 +190,102 @@ describe('useImageCanvasViewportControls', () => {
         clientY: 190,
       });
     });
-    expect(screen.getByTestId('viewport').textContent).toBe(
-      '-312.00,-74.00,0.55',
+    expectViewport(result.current.viewport, {
+      x: -312,
+      y: -74,
+      scale: 0.55,
+    });
+
+    const beforeDrag = result.current.viewport;
+    act(() => {
+      result.current.updateViewportFromMinimapDrag(
+        createMinimapDragState(result.current.minimapModel?.scale ?? 1),
+        104,
+        103,
+      );
+    });
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
+    expect(result.current.viewport).not.toEqual(beforeDrag);
+
+    const beforeClick = result.current.viewport;
+    act(() => {
+      result.current.moveViewportFromMinimapPointer(100, 90);
+    });
+    expect(result.current.viewport).not.toEqual(beforeClick);
+  });
+
+  it('coalesces minimap drag viewport updates into one animation frame', () => {
+    const rafCallbacks: FrameRequestCallback[] = [];
+    const requestAnimationFrameSpy = vi
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((callback: FrameRequestCallback) => {
+        rafCallbacks.push(callback);
+        return rafCallbacks.length;
+      });
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+    const { result } = renderViewportControls();
+
+    const initialViewport = result.current.viewport;
+    const dragState = createMinimapDragState(
+      result.current.minimapModel?.scale ?? 1,
+    );
+    act(() => {
+      result.current.updateViewportFromMinimapDrag(dragState, 104, 103);
+      result.current.updateViewportFromMinimapDrag(dragState, 112, 109);
+    });
+
+    expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(1);
+    expect(result.current.viewport).toEqual(initialViewport);
+
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
+    const coalescedViewport = result.current.viewport;
+    expect(coalescedViewport).not.toEqual(initialViewport);
+
+    act(() => {
+      result.current.updateViewportFromMinimapDrag(dragState, 104, 103);
+    });
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
+    expect(result.current.viewport).not.toEqual(coalescedViewport);
+  });
+
+  it('flushes a pending minimap drag before the next animation frame', () => {
+    const rafCallbacks: FrameRequestCallback[] = [];
+    const cancelAnimationFrameSpy = vi
+      .spyOn(window, 'cancelAnimationFrame')
+      .mockImplementation(() => {});
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(
+      (callback: FrameRequestCallback) => {
+        rafCallbacks.push(callback);
+        return rafCallbacks.length;
+      },
+    );
+    const { result } = renderViewportControls();
+    const initialViewport = result.current.viewport;
+    const dragState = createMinimapDragState(
+      result.current.minimapModel?.scale ?? 1,
     );
 
     act(() => {
-      screen.getByRole('button', { name: 'minimap drag' }).click();
+      result.current.updateViewportFromMinimapDrag(dragState, 104, 103);
+      result.current.updateViewportFromMinimapDrag(dragState, 112, 109);
     });
-    expect(screen.getByTestId('viewport').textContent).toContain('-');
-
-    const beforeClick = screen.getByTestId('viewport').textContent;
     act(() => {
-      screen.getByRole('button', { name: 'minimap click' }).click();
+      result.current.flushMinimapViewportDrag();
     });
-    expect(screen.getByTestId('viewport').textContent).not.toBe(beforeClick);
+
+    expect(cancelAnimationFrameSpy).toHaveBeenCalledTimes(1);
+    const flushedViewport = result.current.viewport;
+    expect(flushedViewport).not.toEqual(initialViewport);
+
+    act(() => {
+      rafCallbacks.shift()?.(performance.now());
+    });
+    expect(result.current.viewport).toEqual(flushedViewport);
   });
 });
diff --git a/src/components/image-editor/useImageCanvasViewportControls.ts b/src/components/image-editor/useImageCanvasViewportControls.ts
index c8c9ffff5..9cbf6b30c 100644
--- a/src/components/image-editor/useImageCanvasViewportControls.ts
+++ b/src/components/image-editor/useImageCanvasViewportControls.ts
@@ -3,6 +3,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 
@@ -48,6 +49,12 @@ export function useImageCanvasViewportControls({
     DEFAULT_IMAGE_CANVAS_VIEWPORT,
   );
   const [canvasSize, setCanvasSize] = useState(DEFAULT_CANVAS_SIZE);
+  const pendingMinimapDragRef = useRef<{
+    dragState: Extract<DragState, { kind: 'minimap' }>;
+    clientX: number;
+    clientY: number;
+  } | null>(null);
+  const minimapDragFrameRef = useRef<number | null>(null);
 
   const minimapModel = useMemo(
     () => createMinimapModel({ layers, viewport, canvasSize }),
@@ -182,18 +189,59 @@ export function useImageCanvasViewportControls({
     [canvasSize, minimapModel],
   );
 
+  const flushMinimapViewportDrag = useCallback(() => {
+    if (minimapDragFrameRef.current !== null) {
+      window.cancelAnimationFrame(minimapDragFrameRef.current);
+      minimapDragFrameRef.current = null;
+    }
+    const pendingDrag = pendingMinimapDragRef.current;
+    pendingMinimapDragRef.current = null;
+    if (!pendingDrag) {
+      return;
+    }
+    setViewport(
+      resolveViewportFromMinimapDrag(pendingDrag.dragState, {
+        x: pendingDrag.clientX,
+        y: pendingDrag.clientY,
+      }),
+    );
+  }, []);
+
   const updateViewportFromMinimapDrag = useCallback(
     (
       dragState: Extract<DragState, { kind: 'minimap' }>,
       clientX: number,
       clientY: number,
     ) => {
-      setViewport(
-        resolveViewportFromMinimapDrag(dragState, {
-          x: clientX,
-          y: clientY,
-        }),
-      );
+      pendingMinimapDragRef.current = { dragState, clientX, clientY };
+      if (minimapDragFrameRef.current !== null) {
+        return;
+      }
+      minimapDragFrameRef.current = window.requestAnimationFrame(() => {
+        minimapDragFrameRef.current = null;
+        const pendingDrag = pendingMinimapDragRef.current;
+        pendingMinimapDragRef.current = null;
+        if (!pendingDrag) {
+          return;
+        }
+        setViewport(
+          resolveViewportFromMinimapDrag(pendingDrag.dragState, {
+            x: pendingDrag.clientX,
+            y: pendingDrag.clientY,
+          }),
+        );
+      });
+    },
+    [],
+  );
+
+  useEffect(
+    () => () => {
+      if (minimapDragFrameRef.current !== null) {
+        window.cancelAnimationFrame(minimapDragFrameRef.current);
+        minimapDragFrameRef.current = null;
+      }
+      pendingMinimapDragRef.current = null;
     },
     [],
   );
@@ -254,5 +302,6 @@ export function useImageCanvasViewportControls({
     getCanvasPointFromClient,
     moveViewportFromMinimapPointer,
     updateViewportFromMinimapDrag,
+    flushMinimapViewportDrag,
   };
 }
diff --git a/src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx b/src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx
index a58759350..23281f943 100644
--- a/src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx
+++ b/src/components/jump-hop-runtime/JumpHopRuntimeShell.test.tsx
@@ -10,10 +10,23 @@ import type {
 import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
 import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
 import {
-  getJumpHopThreeProjectedY,
-  getJumpHopTileTextureSignature,
   JUMP_HOP_THREE_CAMERA_UP_Y,
+  JUMP_HOP_THREE_CHARACTER_RENDER_ORDER,
+  JUMP_HOP_THREE_CHARACTER_TOP_FACE_Z_OFFSET,
+  JUMP_HOP_THREE_MATERIAL_FACE_ORDER,
+  JUMP_HOP_THREE_PLATFORM_MATERIAL_TRANSPARENT,
+  JUMP_HOP_THREE_PLATFORM_MESH_RENDER_ORDER_BASE,
+  JUMP_HOP_THREE_PLATFORM_YAW_RAD,
+  JUMP_HOP_THREE_PLATFORM_CUBE_SIZE_MULTIPLIER,
+  JUMP_HOP_THREE_TEXTURE_TRANSFORMS,
   JumpHopRuntimeShell,
+  getJumpHopThreeCharacterFootZ,
+  getJumpHopThreeCubeSide,
+  getJumpHopThreeProjectedY,
+  getJumpHopThreeWorldYForScreenY,
+  getJumpHopTileTextureSignature,
+  hasCompleteJumpHopTileFaceAssets,
+  resolveJumpHopThreeCharacterFrame,
 } from './JumpHopRuntimeShell';
 
 vi.mock('../../hooks/useResolvedAssetReadUrl', () => ({
@@ -91,16 +104,14 @@ test('跳一跳运行态松手时提交长按蓄力值和后端方向向量', as
 
   expect(onJump).toHaveBeenCalledTimes(1);
   const jumpPayload = onJump.mock.calls[0]?.[0];
-  expect(typeof jumpPayload?.dragVectorX).toBe('number');
-  expect(typeof jumpPayload?.dragVectorY).toBe('number');
-  expect(Number.isFinite(jumpPayload?.dragVectorX)).toBe(true);
-  expect(Number.isFinite(jumpPayload?.dragVectorY)).toBe(true);
+  expect(jumpPayload).not.toHaveProperty('dragVectorX');
+  expect(jumpPayload).not.toHaveProperty('dragVectorY');
   expect(jumpPayload?.dragDistance).toBeGreaterThanOrEqual(360);
   expect(jumpPayload?.dragDistance).toBeLessThanOrEqual(380);
   vi.useRealTimers();
 });
 
-test('跳一跳运行态手指移动不改变蓄力时长但仍提交方向向量', async () => {
+test('跳一跳运行态手指移动不改变蓄力时长且不提交方向向量', async () => {
   vi.useFakeTimers();
   const onJump = vi.fn().mockResolvedValue(undefined);
   const run = buildRun();
@@ -141,10 +152,8 @@ test('跳一跳运行态手指移动不改变蓄力时长但仍提交方向向
   });
 
   const jumpPayload = onJump.mock.calls[0]?.[0];
-  expect(typeof jumpPayload?.dragVectorX).toBe('number');
-  expect(typeof jumpPayload?.dragVectorY).toBe('number');
-  expect(Number.isFinite(jumpPayload?.dragVectorX)).toBe(true);
-  expect(Number.isFinite(jumpPayload?.dragVectorY)).toBe(true);
+  expect(jumpPayload).not.toHaveProperty('dragVectorX');
+  expect(jumpPayload).not.toHaveProperty('dragVectorY');
   expect(jumpPayload?.dragDistance).toBeGreaterThanOrEqual(240);
   expect(jumpPayload?.dragDistance).toBeLessThanOrEqual(260);
   vi.useRealTimers();
@@ -502,49 +511,133 @@ test('跳一跳 Three.js 平台层和 DOM 角色层保持同向屏幕坐标', ()
   expect(getJumpHopThreeProjectedY(200, 568)).toBeGreaterThan(284);
 });
 
-test('跳一跳蓄力时隐藏落点辅助标识但保留蓄力引导', async () => {
-  const onJump = vi.fn().mockResolvedValue(undefined);
+test('跳一跳 Three.js 顶面脚点投影会扣除立方体高度偏移', () => {
+  const projectedTopY = getJumpHopThreeProjectedY(360, 568);
+  const cubeTopWorldY = getJumpHopThreeWorldYForScreenY(360, 568, 48);
 
-  render(
-    <JumpHopRuntimeShell
-      profile={buildProfile({ tileAssets: buildTileAssets() })}
-      run={buildRun()}
-      onJump={onJump}
-      onRestart={() => {}}
-    />,
+  expect(cubeTopWorldY).toBeLessThan(projectedTopY);
+  expect(getJumpHopThreeWorldYForScreenY(360, 568, 0)).toBe(projectedTopY);
+});
+
+test('跳一跳 Three.js 方块只放大模型尺寸不改变屏幕间距规则', () => {
+  const run = buildRun();
+  const platform = run.path.platforms[0]!;
+
+  expect(JUMP_HOP_THREE_PLATFORM_CUBE_SIZE_MULTIPLIER).toBe(2);
+  expect(getJumpHopThreeCubeSide(platform, 1)).toBeCloseTo(165.12, 2);
+  expect(run.path.platforms[1]!.x - run.path.platforms[0]!.x).toBeCloseTo(
+    1.78,
   );
+  expect(run.path.platforms[1]!.y - run.path.platforms[0]!.y).toBeCloseTo(
+    1.78,
+  );
+});
 
-  const stage = screen.getByTestId('jump-hop-stage');
-  await act(async () => {
-    dispatchPointerEvent(stage, 'pointerdown', {
-      pointerId: 1,
-      clientX: 180,
-      clientY: 420,
-    });
+test('跳一跳 Three.js 角色帧沿真实预测落点插值并保留飞行弧线', () => {
+  const from = {
+    screenX: 50,
+    screenY: 64,
+    sceneX: 0,
+    sceneY: 0.84,
+    sceneZ: 0,
+    isMiss: false,
+  };
+  const to = {
+    screenX: 64,
+    screenY: 47,
+    sceneX: 1.1,
+    sceneY: 0.84,
+    sceneZ: 3.4,
+    isMiss: true,
+  };
+
+  const midFrame = resolveJumpHopThreeCharacterFrame({
+    characterPosition: null,
+    visualJump: { from, to },
+    jumpAnimationProgress: 0.5,
+    isJumpAnimating: true,
   });
 
-  await act(async () => {
-    dispatchPointerEvent(stage, 'pointermove', {
-      pointerId: 1,
-      clientX: 148,
-      clientY: 454,
-    });
+  expect(midFrame?.progress).toBe(0.5);
+  expect(midFrame?.position.screenX).toBeGreaterThan(from.screenX);
+  expect(midFrame?.position.screenX).toBeLessThan(to.screenX);
+  expect(midFrame?.position.screenY).toBeLessThan(to.screenY);
+  expect(midFrame?.position.sceneZ).toBeGreaterThan(from.sceneZ);
+  expect(midFrame?.position.sceneZ).toBeLessThan(to.sceneZ);
+  expect(midFrame?.position.isMiss).toBe(true);
+
+  const landedFrame = resolveJumpHopThreeCharacterFrame({
+    characterPosition: from,
+    visualJump: { from, to },
+    jumpAnimationProgress: 2,
+    isJumpAnimating: true,
   });
+  expect(landedFrame?.progress).toBe(1);
+  expect(landedFrame?.position).toMatchObject(to);
 
-  expect(screen.queryByTestId('jump-hop-landing-assist')).toBeNull();
-  expect(stage.querySelector('.jump-hop-runtime__charge-guide')).toBeTruthy();
-
-  await act(async () => {
-    dispatchPointerEvent(stage, 'pointermove', {
-      pointerId: 1,
-      clientX: 112,
-      clientY: 492,
-    });
+  expect(
+    resolveJumpHopThreeCharacterFrame({
+      characterPosition: from,
+      visualJump: { from, to },
+      jumpAnimationProgress: 0.5,
+      isJumpAnimating: false,
+    }),
+  ).toEqual({
+    position: from,
+    progress: 1,
   });
+});
 
-  expect(screen.queryByTestId('jump-hop-landing-assist')).toBeNull();
-  expect(stage.querySelector('.jump-hop-runtime__charge-guide')).toBeTruthy();
-  expect(stage.querySelector('.jump-hop-runtime__slingshot-guide')).toBeNull();
+test('跳一跳蓄力时实时显示松手后的预测落点', async () => {
+  vi.useFakeTimers();
+  try {
+    const onJump = vi.fn().mockResolvedValue(undefined);
+
+    render(
+      <JumpHopRuntimeShell
+        profile={buildProfile({ tileAssets: buildTileAssets() })}
+        run={buildRun()}
+        onJump={onJump}
+        onRestart={() => {}}
+      />,
+    );
+
+    const stage = screen.getByTestId('jump-hop-stage');
+    await act(async () => {
+      dispatchPointerEvent(stage, 'pointerdown', {
+        pointerId: 1,
+        clientX: 180,
+        clientY: 420,
+      });
+    });
+
+    await act(async () => {
+      vi.advanceTimersByTime(240);
+    });
+
+    const firstAssist = screen.getByTestId('jump-hop-landing-assist');
+    expect(firstAssist).toBeTruthy();
+    expect(firstAssist.getAttribute('data-on-target')).toMatch(/^(true|false)$/);
+    expect(stage.querySelector('.jump-hop-runtime__charge-guide')).toBeTruthy();
+    const firstLeft = firstAssist.style.getPropertyValue('--jump-hop-landing-x');
+    const firstTop = firstAssist.style.getPropertyValue('--jump-hop-landing-y');
+
+    await act(async () => {
+      vi.advanceTimersByTime(260);
+    });
+
+    const secondAssist = screen.getByTestId('jump-hop-landing-assist');
+    expect(secondAssist.style.getPropertyValue('--jump-hop-landing-x')).not.toBe(
+      firstLeft,
+    );
+    expect(secondAssist.style.getPropertyValue('--jump-hop-landing-y')).not.toBe(
+      firstTop,
+    );
+    expect(stage.querySelector('.jump-hop-runtime__charge-guide')).toBeTruthy();
+    expect(stage.querySelector('.jump-hop-runtime__slingshot-guide')).toBeNull();
+  } finally {
+    vi.useRealTimers();
+  }
 });
 
 test('跳一跳运行态直接渲染生成的地板贴图切片图片', () => {
@@ -558,14 +651,14 @@ test('跳一跳运行态直接渲染生成的地板贴图切片图片', () => {
   );
 
   const tileImages = screen.getAllByTestId('jump-hop-tile-image');
-  expect(tileImages).toHaveLength(3);
+  expect(tileImages).toHaveLength(2);
   expect(document.querySelector('.jump-hop-runtime__fallback-tile')).toBeNull();
   const generatedReadUrlCalls = vi
     .mocked(useResolvedAssetReadUrl)
     .mock.calls.filter(([source]) =>
       source?.includes('/generated-jump-hop-assets/'),
     );
-  expect(generatedReadUrlCalls.length).toBeGreaterThanOrEqual(3);
+  expect(generatedReadUrlCalls.length).toBeGreaterThanOrEqual(2);
   for (const [, options] of generatedReadUrlCalls) {
     expect(options).toEqual(
       expect.objectContaining({
@@ -593,7 +686,7 @@ test('跳一跳运行态提前预加载下一屏地块且不在真实图片加
     />,
   );
 
-  expect(screen.getAllByTestId('jump-hop-tile-image')).toHaveLength(3);
+  expect(screen.getAllByTestId('jump-hop-tile-image')).toHaveLength(2);
   expect(document.querySelector('.jump-hop-runtime__fallback-tile')).toBeNull();
   const preloadImages = screen.getAllByTestId('jump-hop-tile-preload-image');
   expect(preloadImages.length).toBeGreaterThan(0);
@@ -667,7 +760,63 @@ test('跳一跳 Three.js 地板贴图签名包含六面贴图 URL', () => {
   expect(signature).toContain('bottom-url');
 });
 
-test('跳一跳运行态首块地块落在中下方并且后续两块向中央和上方展开', () => {
+test('跳一跳 Three 立方体按玩法 Z 轴顶面映射 UV 六面贴图', () => {
+  expect(JUMP_HOP_THREE_PLATFORM_YAW_RAD).toBeCloseTo(Math.PI / 4);
+  expect(JUMP_HOP_THREE_MATERIAL_FACE_ORDER).toEqual([
+    'right',
+    'left',
+    'back',
+    'front',
+    'top',
+    'bottom',
+  ]);
+  expect(JUMP_HOP_THREE_TEXTURE_TRANSFORMS).toMatchObject({
+    top: { flipX: true, flipY: false },
+    front: { flipX: true, flipY: true },
+    right: { flipX: false, flipY: true },
+    back: { flipX: false, flipY: true },
+    left: { flipX: true, flipY: true },
+    bottom: { flipX: true, flipY: true },
+  });
+});
+
+test('跳一跳 Three 角色绘制层级高于地块并且脚点落在顶面中心高度', () => {
+  expect(JUMP_HOP_THREE_PLATFORM_MATERIAL_TRANSPARENT).toBe(false);
+  expect(JUMP_HOP_THREE_CHARACTER_RENDER_ORDER).toBeGreaterThan(
+    JUMP_HOP_THREE_PLATFORM_MESH_RENDER_ORDER_BASE + 18,
+  );
+  expect(JUMP_HOP_THREE_CHARACTER_TOP_FACE_Z_OFFSET).toBe(0);
+  expect(getJumpHopThreeCharacterFootZ(96, false)).toBe(48);
+  expect(getJumpHopThreeCharacterFootZ(96, true)).toBeLessThan(
+    getJumpHopThreeCharacterFootZ(96, false),
+  );
+  expect(getJumpHopThreeCharacterFootZ(40, false)).toBe(20);
+});
+
+test('跳一跳旧单图地块资源不启用 Three UV 贴面层', () => {
+  const oldAssets = buildTileAssets();
+  const uvAssets = buildTileAssets({ withFaceAssets: true });
+  expect(hasCompleteJumpHopTileFaceAssets(oldAssets[0])).toBe(false);
+  expect(hasCompleteJumpHopTileFaceAssets(uvAssets[0])).toBe(true);
+
+  render(
+    <JumpHopRuntimeShell
+      profile={buildProfile({ tileAssets: oldAssets })}
+      run={buildRun()}
+      onJump={vi.fn().mockResolvedValue(undefined)}
+      onRestart={() => {}}
+    />,
+  );
+
+  expect(
+    screen
+      .getByTestId('jump-hop-camera-layer')
+      .getAttribute('data-three-platform-ready'),
+  ).toBe('false');
+  expect(screen.getAllByTestId('jump-hop-tile-image')).toHaveLength(2);
+});
+
+test('跳一跳运行态只展示当前块和下一块并给下一块留出视野空间', () => {
   render(
     <JumpHopRuntimeShell
       profile={buildProfile({ tileAssets: buildTileAssets() })}
@@ -678,16 +827,16 @@ test('跳一跳运行态首块地块落在中下方并且后续两块向中央
   );
 
   const tileImages = screen.getAllByTestId('jump-hop-tile-image');
-  expect(tileImages).toHaveLength(3);
+  expect(tileImages).toHaveLength(2);
   const first = tileImages[0]?.parentElement?.parentElement as HTMLElement | undefined;
   const second = tileImages[1]?.parentElement?.parentElement as HTMLElement | undefined;
-  const third = tileImages[2]?.parentElement?.parentElement as HTMLElement | undefined;
   expect(first?.style.top).toBe('64%');
   expect(second?.style.top).toBe('47%');
-  expect(third?.style.top).toBe('30%');
+  expect(Number.parseFloat(first?.style.left ?? '0')).toBeLessThan(50);
+  expect(Number.parseFloat(second?.style.left ?? '0')).toBeGreaterThan(50);
 });
 
-test('跳一跳运行态用固定基准宽高和深度 scale 表达地块尺寸', () => {
+test('跳一跳运行态地块从出现开始保持真实尺寸', () => {
   render(
     <JumpHopRuntimeShell
       profile={buildProfile({ tileAssets: buildTileAssets() })}
@@ -703,7 +852,7 @@ test('跳一跳运行态用固定基准宽高和深度 scale 表达地块尺寸'
   expect(firstTile?.style.width).toBe('116px');
   expect(firstTile?.style.height).toBe('96px');
   expect(firstTile?.style.getPropertyValue('--jump-hop-platform-scale')).toBe(
-    '1.08',
+    '',
   );
 });
 
@@ -776,8 +925,8 @@ test('跳一跳后端回包较慢时角色停在目标点等待推进', async ()
       chargeMs: 420,
       jumpDistance: 1.68,
       targetPlatformIndex: 1,
-      landedX: 0.93,
-      landedY: 1.4,
+      landedX: 1.7,
+      landedY: 1.74,
       result: 'hit',
     },
   };
@@ -841,6 +990,17 @@ test('跳一跳后端回包较慢时角色停在目标点等待推进', async ()
     />,
   );
 
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-jump-animating')).toBe(
+    'true',
+  );
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'false',
+  );
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(300);
+  });
+
   expect(screen.getByTestId('jump-hop-stage').getAttribute('data-jump-animating')).toBe(
     'false',
   );
@@ -862,8 +1022,8 @@ test('跳一跳成功落点偏移后下一跳视觉仍朝下一块地块方向',
       chargeMs: 300,
       jumpDistance: 1.0,
       targetPlatformIndex: 1,
-      landedX: 0,
-      landedY: 1.2,
+      landedX: 1.7,
+      landedY: 1.74,
       result: 'hit',
     },
   };
@@ -920,8 +1080,8 @@ test('跳一跳松手后先播放飞行动画再切换到下一块地块', async
       chargeMs: 420,
       jumpDistance: 1.68,
       targetPlatformIndex: 1,
-      landedX: 0.93,
-      landedY: 1.4,
+      landedX: 1.7,
+      landedY: 1.74,
       result: 'hit',
     },
   };
@@ -934,8 +1094,8 @@ test('跳一跳松手后先播放飞行动画再切换到下一块地块', async
       chargeMs: 360,
       jumpDistance: 1.44,
       targetPlatformIndex: 2,
-      landedX: -0.2,
-      landedY: 2.4,
+      landedX: 0,
+      landedY: 3.56,
       result: 'hit',
     },
   };
@@ -1012,6 +1172,17 @@ test('跳一跳松手后先播放飞行动画再切换到下一块地块', async
     await vi.advanceTimersByTimeAsync(580);
   });
 
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-jump-animating')).toBe(
+    'true',
+  );
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'false',
+  );
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(300);
+  });
+
   expect(screen.getByTestId('jump-hop-stage').getAttribute('data-jump-animating')).toBe(
     'false',
   );
@@ -1032,16 +1203,19 @@ test('跳一跳松手后先播放飞行动画再切换到下一块地块', async
   const cameraLayer = screen.getByTestId('jump-hop-camera-layer');
   expect(cameraLayer.getAttribute('data-platform-advancing')).toBe('true');
   expect(cameraLayer.style.getPropertyValue('--jump-hop-camera-zoom')).toBe(
-    '1.3',
+    '1.69',
   );
   expect(cameraLayer.style.getPropertyValue('--jump-hop-camera-shift-y')).toBe(
     '-17%',
   );
+  // 下一块在反向时，当前块会切换到场地反侧锚点，横向镜头推进应被侧边视野校正抵消。
   expect(
-    Number.parseFloat(
-      cameraLayer.style.getPropertyValue('--jump-hop-camera-shift-x'),
+    Math.abs(
+      Number.parseFloat(
+        cameraLayer.style.getPropertyValue('--jump-hop-camera-shift-x'),
+      ),
     ),
-  ).toBeCloseTo(8.96, 2);
+  ).toBeLessThan(1);
   const styleText = Array.from(document.querySelectorAll('style'))
     .map((style) => style.textContent ?? '')
     .join('\n');
@@ -1082,7 +1256,7 @@ test('跳一跳松手后先播放飞行动画再切换到下一块地块', async
     '64%',
   );
   expect(screen.getAllByTestId('jump-hop-tile-image')[1]?.parentElement?.parentElement?.style.getPropertyValue('--jump-hop-platform-scale')).toBe(
-    '1.08',
+    '',
   );
   expect(screen.getAllByTestId('jump-hop-tile-image')[2]?.parentElement?.parentElement?.getAttribute('data-platform-id')).toBe(
     'p2',
@@ -1181,6 +1355,14 @@ test('跳一跳松手后先播放飞行动画再切换到下一块地块', async
     await vi.advanceTimersByTimeAsync(580);
   });
 
+  expect(screen.getByTestId('jump-hop-stage').getAttribute('data-platform-advancing')).toBe(
+    'false',
+  );
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(300);
+  });
+
   const movedOldPlatform = screen
     .getByTestId('jump-hop-stage')
     .querySelector("[data-platform-id='p0']") as HTMLElement | null;
@@ -1235,8 +1417,8 @@ function buildRun(): JumpHopRuntimeRunSnapshotResponse {
         {
           platformId: 'p1',
           tileType: 'normal',
-          x: 0.8,
-          y: 1.2,
+          x: 1.78,
+          y: 1.78,
           width: 1,
           height: 1,
           landingRadius: 0.5,
@@ -1246,8 +1428,8 @@ function buildRun(): JumpHopRuntimeRunSnapshotResponse {
         {
           platformId: 'p2',
           tileType: 'target',
-          x: -0.2,
-          y: 2.4,
+          x: 0,
+          y: 3.56,
           width: 1,
           height: 1,
           landingRadius: 0.5,
@@ -1293,8 +1475,8 @@ function buildRunWithExtraPreviewPlatform(): JumpHopRuntimeRunSnapshotResponse {
         {
           platformId: 'p3',
           tileType: 'normal',
-          x: 0.5,
-          y: 3.6,
+          x: 1.78,
+          y: 5.34,
           width: 1,
           height: 1,
           landingRadius: 0.5,
diff --git a/src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx b/src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx
index 8e54af0b8..ff0483c5c 100644
--- a/src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx
+++ b/src/components/jump-hop-runtime/JumpHopRuntimeShell.tsx
@@ -28,7 +28,7 @@ import type { JumpHopRuntimeRequestOptions } from '../../services/jump-hop/jumpH
 import {
   buildJumpHopVisiblePlatforms,
   formatJumpHopDurationLabel,
-  getJumpHopBackendDragVector,
+  getJumpHopCharacterTopFaceVisualPosition,
   getJumpHopCharacterVisualPosition,
   getJumpHopJumpFeedbackLabel,
   getJumpHopLandingAssistVisualPosition,
@@ -48,8 +48,6 @@ import { RuntimeResourcePendingMarker } from '../common/RuntimeResourcePendingMa
 
 type JumpHopRuntimeJumpPayload = {
   dragDistance: number;
-  dragVectorX: number;
-  dragVectorY: number;
 };
 
 type JumpHopVisualJump = {
@@ -57,6 +55,11 @@ type JumpHopVisualJump = {
   to: JumpHopCharacterVisualPosition;
 };
 
+type JumpHopThreeCharacterFrame = {
+  position: JumpHopCharacterVisualPosition;
+  progress: number;
+};
+
 type JumpHopPlatformRenderItem = JumpHopVisiblePlatform & {
   renderKey: string;
   advanceState: 'exiting' | 'camera' | 'idle';
@@ -104,12 +107,20 @@ type JumpHopRuntimeSettlementDialogProps = {
 const MAX_CHARGE_RATIO = 1;
 const DEFAULT_MAX_DRAG_DISTANCE_PX = 180;
 const JUMP_HOP_ANIMATION_DURATION_MS = 560;
+const JUMP_HOP_POST_LANDING_CAMERA_DELAY_MS = 300;
 const JUMP_HOP_LANDING_RECOIL_DURATION_MS = 560;
 const JUMP_HOP_PLATFORM_ADVANCE_DURATION_MS = 1440;
 const JUMP_HOP_PLATFORM_RETAIN_OFFSCREEN_SCREEN_Y = 122;
-const JUMP_HOP_CAMERA_ZOOM = 1.3;
+const JUMP_HOP_CAMERA_ZOOM = 1.69;
 const JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC =
   '/branding/jump-hop-taonier-character.png';
+const JUMP_HOP_THREE_CHARACTER_WIDTH = 72;
+const JUMP_HOP_THREE_CHARACTER_HEIGHT = 84;
+export const JUMP_HOP_THREE_PLATFORM_MATERIAL_TRANSPARENT = false;
+export const JUMP_HOP_THREE_PLATFORM_MESH_RENDER_ORDER_BASE = 30;
+export const JUMP_HOP_THREE_PLATFORM_YAW_RAD = Math.PI / 4;
+export const JUMP_HOP_THREE_CHARACTER_RENDER_ORDER = 240;
+export const JUMP_HOP_THREE_CHARACTER_TOP_FACE_Z_OFFSET = 0;
 const JUMP_HOP_TILE_PRELOAD_LOOKAHEAD_COUNT = 3;
 const JUMP_HOP_TILE_FACE_KEYS: JumpHopTileFaceKey[] = [
   'top',
@@ -119,12 +130,32 @@ const JUMP_HOP_TILE_FACE_KEYS: JumpHopTileFaceKey[] = [
   'left',
   'bottom',
 ];
+export const JUMP_HOP_THREE_MATERIAL_FACE_ORDER = [
+  'right',
+  'left',
+  'back',
+  'front',
+  'top',
+  'bottom',
+] as const satisfies JumpHopTileFaceKey[];
+export const JUMP_HOP_THREE_TEXTURE_TRANSFORMS = {
+  top: { flipX: true, flipY: false, rotation: 0 },
+  front: { flipX: true, flipY: true, rotation: 0 },
+  right: { flipX: false, flipY: true, rotation: 0 },
+  back: { flipX: false, flipY: true, rotation: 0 },
+  left: { flipX: true, flipY: true, rotation: 0 },
+  bottom: { flipX: true, flipY: true, rotation: 0 },
+} as const satisfies Record<
+  JumpHopTileFaceKey,
+  { flipX: boolean; flipY: boolean; rotation: number }
+>;
 const JUMP_HOP_THREE_CAMERA_PITCH_RAD = Math.PI / 4;
 const JUMP_HOP_THREE_CAMERA_PITCH_COS = Math.cos(
   JUMP_HOP_THREE_CAMERA_PITCH_RAD,
 );
 export const JUMP_HOP_THREE_CAMERA_UP_Y = 1;
 const JUMP_HOP_THREE_CAMERA_DISTANCE_MULTIPLIER = 1.34;
+export const JUMP_HOP_THREE_PLATFORM_CUBE_SIZE_MULTIPLIER = 2;
 
 function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value));
@@ -173,31 +204,6 @@ function shouldAnimateJumpHopPlatformAdvance(
   );
 }
 
-function buildJumpHopCharacterVisualPositionFromPlatform(
-  platform: JumpHopVisiblePlatform,
-  isMiss = false,
-): JumpHopCharacterVisualPosition {
-  if (isMiss) {
-    return {
-      screenX: platform.screenX + 8,
-      screenY: platform.screenY - 2,
-      sceneX: platform.sceneX + 0.7,
-      sceneY: platform.sceneY + 0.48,
-      sceneZ: platform.sceneZ - 0.4,
-      isMiss: true,
-    };
-  }
-
-  return {
-    screenX: platform.screenX,
-    screenY: platform.screenY - 3,
-    sceneX: platform.sceneX,
-    sceneY: platform.sceneY + 0.84,
-    sceneZ: platform.sceneZ,
-    isMiss: false,
-  };
-}
-
 function getJumpHopRunLandingVisualPosition({
   run,
   platforms,
@@ -215,12 +221,57 @@ function getJumpHopRunLandingVisualPosition({
   return getJumpHopCharacterVisualPosition(run, platforms, stageSize);
 }
 
-function getJumpHopThreeCubeSide(
+export function getJumpHopThreeCubeSide(
   platform: JumpHopVisiblePlatform['platform'],
   scale: number,
 ) {
   const platformSize = getJumpHopPlatformVisualSize(platform, scale);
-  return Math.max(56, Math.min(platformSize.width, platformSize.height) * 0.86);
+  return (
+    Math.max(56, Math.min(platformSize.width, platformSize.height) * 0.86) *
+    JUMP_HOP_THREE_PLATFORM_CUBE_SIZE_MULTIPLIER
+  );
+}
+
+export function getJumpHopThreeCharacterFootZ(
+  cubeSide: number | null | undefined,
+  isMiss = false,
+) {
+  const safeCubeSide = Number.isFinite(cubeSide ?? NaN) ? Math.max(0, cubeSide ?? 0) : 0;
+  const topFaceZ = safeCubeSide / 2;
+  if (isMiss) {
+    return Math.max(0, topFaceZ * 0.72);
+  }
+  return topFaceZ + JUMP_HOP_THREE_CHARACTER_TOP_FACE_Z_OFFSET;
+}
+
+function resolveJumpHopThreeCharacterFootZ(
+  characterPosition: JumpHopCharacterVisualPosition,
+  platforms: JumpHopPlatformRenderItem[],
+) {
+  const closestPlatform = platforms.reduce<JumpHopPlatformRenderItem | null>(
+    (closest, item) => {
+      if (item.advanceState === 'exiting') {
+        return closest;
+      }
+      if (!closest) {
+        return item;
+      }
+      const itemDistance = Math.hypot(
+        item.sceneX - characterPosition.sceneX,
+        item.sceneZ - characterPosition.sceneZ,
+      );
+      const closestDistance = Math.hypot(
+        closest.sceneX - characterPosition.sceneX,
+        closest.sceneZ - characterPosition.sceneZ,
+      );
+      return itemDistance < closestDistance ? item : closest;
+    },
+    null,
+  );
+  const cubeSide = closestPlatform
+    ? getJumpHopThreeCubeSide(closestPlatform.platform, closestPlatform.scale)
+    : null;
+  return getJumpHopThreeCharacterFootZ(cubeSide, characterPosition.isMiss);
 }
 
 export function getJumpHopThreeProjectedY(
@@ -233,6 +284,77 @@ export function getJumpHopThreeProjectedY(
   );
 }
 
+// 中文注释：screenY 表示顶面脚点投影；Three 世界坐标需要扣掉高度投影，避免角色和指示器落到方块几何中心。
+export function getJumpHopThreeWorldYForScreenY(
+  screenY: number,
+  viewportHeight: number,
+  worldZ = 0,
+) {
+  return (
+    getJumpHopThreeProjectedY(screenY, viewportHeight) -
+    worldZ * Math.tan(JUMP_HOP_THREE_CAMERA_PITCH_RAD)
+  );
+}
+
+function clampJumpHopAnimationProgress(progress: number) {
+  return clamp(progress, 0, 1);
+}
+
+function easeJumpHopFlightProgress(progress: number) {
+  const clamped = clampJumpHopAnimationProgress(progress);
+  return 1 - Math.pow(1 - clamped, 3);
+}
+
+function interpolateJumpHopCharacterPosition(
+  from: JumpHopCharacterVisualPosition,
+  to: JumpHopCharacterVisualPosition,
+  progress: number,
+): JumpHopCharacterVisualPosition {
+  const clamped = clampJumpHopAnimationProgress(progress);
+  const eased = easeJumpHopFlightProgress(clamped);
+  const arcLift = Math.sin(Math.PI * clamped) * 9;
+
+  return {
+    screenX: from.screenX + (to.screenX - from.screenX) * eased,
+    screenY: from.screenY + (to.screenY - from.screenY) * eased - arcLift,
+    sceneX: from.sceneX + (to.sceneX - from.sceneX) * eased,
+    sceneY: from.sceneY + (to.sceneY - from.sceneY) * eased,
+    sceneZ: from.sceneZ + (to.sceneZ - from.sceneZ) * eased,
+    isMiss: to.isMiss,
+  };
+}
+
+export function resolveJumpHopThreeCharacterFrame({
+  characterPosition,
+  visualJump,
+  jumpAnimationProgress,
+  isJumpAnimating,
+}: {
+  characterPosition: JumpHopCharacterVisualPosition | null;
+  visualJump: JumpHopVisualJump | null;
+  jumpAnimationProgress: number;
+  isJumpAnimating: boolean;
+}): JumpHopThreeCharacterFrame | null {
+  if (isJumpAnimating && visualJump) {
+    const progress = clampJumpHopAnimationProgress(jumpAnimationProgress);
+    return {
+      position: interpolateJumpHopCharacterPosition(
+        visualJump.from,
+        visualJump.to,
+        progress,
+      ),
+      progress,
+    };
+  }
+  if (!characterPosition) {
+    return null;
+  }
+  return {
+    position: characterPosition,
+    progress: 1,
+  };
+}
+
 function IsometricFallbackTile({
   platform,
 }: {
@@ -335,6 +457,17 @@ function hasJumpHopTileTexturesReady(
   );
 }
 
+export function hasCompleteJumpHopTileFaceAssets(
+  asset: JumpHopTileAsset | null | undefined,
+) {
+  return Boolean(
+    asset?.faceAssets &&
+      JUMP_HOP_TILE_FACE_KEYS.every((face) =>
+        Boolean(asset.faceAssets?.[face]?.imageSrc?.trim()),
+      ),
+  );
+}
+
 function getJumpHopActiveTextureKeys(
   renderKey: string,
   asset: JumpHopTileAsset | null | undefined,
@@ -672,41 +805,51 @@ function disposeJumpHopThreeObject(object: import('three').Object3D) {
 }
 
 function JumpHopThreeScene({
-  characterPosition,
+  characterFrame,
   chargeRatio,
+  isLandingRecoilAnimating,
   isJumpAnimating,
   platforms,
   platformCount,
   renderCharacter,
+  renderPlatforms,
   textureUrlsByRenderKey,
   onCharacterLayerReadyChange,
   onPlatformLayerReadyChange,
 }: {
-  characterPosition: JumpHopCharacterVisualPosition | null;
+  characterFrame: JumpHopThreeCharacterFrame | null;
   chargeRatio: number;
+  isLandingRecoilAnimating: boolean;
   isJumpAnimating: boolean;
   platforms: JumpHopPlatformRenderItem[];
   platformCount: number;
   renderCharacter: boolean;
+  renderPlatforms: boolean;
   textureUrlsByRenderKey: Record<string, string>;
   onCharacterLayerReadyChange: Dispatch<SetStateAction<boolean>>;
   onPlatformLayerReadyChange: Dispatch<SetStateAction<boolean>>;
 }) {
   const hostRef = useRef<HTMLDivElement | null>(null);
-  const characterPositionRef = useRef(characterPosition);
+  const characterFrameRef = useRef(characterFrame);
   const chargeRatioRef = useRef(chargeRatio);
+  const isLandingRecoilAnimatingRef = useRef(isLandingRecoilAnimating);
   const isJumpAnimatingRef = useRef(isJumpAnimating);
   const platformsRef = useRef(platforms);
+  const renderPlatformsRef = useRef(renderPlatforms);
   const textureUrlsByRenderKeyRef = useRef(textureUrlsByRenderKey);
 
   useEffect(() => {
-    characterPositionRef.current = characterPosition;
-  }, [characterPosition]);
+    characterFrameRef.current = characterFrame;
+  }, [characterFrame]);
 
   useEffect(() => {
     chargeRatioRef.current = chargeRatio;
   }, [chargeRatio]);
 
+  useEffect(() => {
+    isLandingRecoilAnimatingRef.current = isLandingRecoilAnimating;
+  }, [isLandingRecoilAnimating]);
+
   useEffect(() => {
     isJumpAnimatingRef.current = isJumpAnimating;
   }, [isJumpAnimating]);
@@ -715,6 +858,10 @@ function JumpHopThreeScene({
     platformsRef.current = platforms;
   }, [platforms]);
 
+  useEffect(() => {
+    renderPlatformsRef.current = renderPlatforms;
+  }, [renderPlatforms]);
+
   useEffect(() => {
     textureUrlsByRenderKeyRef.current = textureUrlsByRenderKey;
   }, [textureUrlsByRenderKey]);
@@ -788,36 +935,6 @@ function JumpHopThreeScene({
       rimLight.position.set(120, 44, 120);
       scene.add(rimLight);
 
-      const character = renderCharacter ? new three.Group() : null;
-      if (character) {
-        const body = new three.Mesh(
-          new three.CapsuleGeometry(10, 22, 8, 18),
-          new three.MeshStandardMaterial({
-            color: 0xdf7f40,
-            roughness: 0.74,
-          }),
-        );
-        body.position.y = -28;
-        const head = new three.Mesh(
-          new three.SphereGeometry(11, 28, 20),
-          new three.MeshStandardMaterial({
-            color: 0xf59e0b,
-            roughness: 0.7,
-          }),
-        );
-        head.position.y = -62;
-        const accent = new three.Mesh(
-          new three.BoxGeometry(15, 7, 7),
-          new three.MeshStandardMaterial({
-            color: 0x2563eb,
-            roughness: 0.64,
-          }),
-        );
-        accent.position.set(0, -36, 10);
-        character.add(body, head, accent);
-        scene.add(character);
-      }
-
       const platformGroup = new three.Group();
       platformGroup.renderOrder = 20;
       scene.add(platformGroup);
@@ -846,9 +963,68 @@ function JumpHopThreeScene({
       >();
       const fallbackMaterialCache = new Map<string, import('three').Material>();
       let platformSignature = '';
+      let isCharacterTextureLoaded = false;
+      let character: import('three').Sprite | null = null;
+      const publishCharacterLayerReady = () => {
+        if (!disposed) {
+          onCharacterLayerReadyChange(Boolean(character && isCharacterTextureLoaded));
+        }
+      };
 
-      const getTexture = (url: string) => {
-        const cached = textureCache.get(url);
+      const characterTexture = textureLoader.load(
+        JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC,
+        () => {
+          if (disposed) {
+            return;
+          }
+          isCharacterTextureLoaded = true;
+          renderer.render(scene, camera);
+          publishCharacterLayerReady();
+        },
+        undefined,
+        () => {
+          if (disposed) {
+            return;
+          }
+          isCharacterTextureLoaded = false;
+          publishCharacterLayerReady();
+        },
+      );
+      characterTexture.colorSpace = three.SRGBColorSpace;
+      const characterMaterial = new three.SpriteMaterial({
+        alphaTest: 0.02,
+        color: 0xffffff,
+        depthTest: false,
+        depthWrite: false,
+        map: characterTexture,
+        transparent: true,
+      });
+      character = renderCharacter ? new three.Sprite(characterMaterial) : null;
+      if (character) {
+        character.renderOrder = JUMP_HOP_THREE_CHARACTER_RENDER_ORDER;
+        character.center.set(0.5, 0.08);
+        character.scale.set(
+          JUMP_HOP_THREE_CHARACTER_WIDTH,
+          JUMP_HOP_THREE_CHARACTER_HEIGHT,
+          1,
+        );
+        character.visible = false;
+        scene.add(character);
+      }
+
+      const getTexture = (url: string, face?: JumpHopTileFaceKey) => {
+        const textureTransform = face
+          ? JUMP_HOP_THREE_TEXTURE_TRANSFORMS[face]
+          : null;
+        const cacheKey = textureTransform
+          ? [
+              url,
+              textureTransform.flipX ? 'flip-x' : 'keep-x',
+              textureTransform.flipY ? 'flip-y' : 'keep-y',
+              textureTransform.rotation,
+            ].join('|')
+          : url;
+        const cached = textureCache.get(cacheKey);
         if (cached) {
           return cached;
         }
@@ -860,7 +1036,19 @@ function JumpHopThreeScene({
         texture.wrapS = three.ClampToEdgeWrapping;
         texture.wrapT = three.ClampToEdgeWrapping;
         texture.anisotropy = Math.min(renderer.capabilities.getMaxAnisotropy(), 6);
-        textureCache.set(url, texture);
+        if (textureTransform) {
+          texture.center.set(0.5, 0.5);
+          texture.rotation = textureTransform.rotation;
+          texture.repeat.set(
+            textureTransform.flipX ? -1 : 1,
+            textureTransform.flipY ? -1 : 1,
+          );
+          texture.offset.set(
+            textureTransform.flipX ? 1 : 0,
+            textureTransform.flipY ? 1 : 0,
+          );
+        }
+        textureCache.set(cacheKey, texture);
         return texture;
       };
 
@@ -873,7 +1061,7 @@ function JumpHopThreeScene({
           item.renderKey,
           'top',
         );
-        if (item.asset?.faceAssets && textureUrl) {
+        if (hasCompleteJumpHopTileFaceAssets(item.asset) && textureUrl) {
           const cacheKey = JUMP_HOP_TILE_FACE_KEYS.map((face) =>
             getJumpHopTileTextureUrl(textureUrls, item.renderKey, face),
           ).join('|');
@@ -882,27 +1070,20 @@ function JumpHopThreeScene({
             return cached;
           }
 
-          // 中文注释：Three.js Box/RoundedBox 材质顺序为 right, left, top, bottom, front, back。
-          const materials = [
-            'right',
-            'left',
-            'top',
-            'bottom',
-            'front',
-            'back',
-          ].map((face) => {
+          // 中文注释：玩法把 Z 轴作为立方体竖直高度，所以这里把逻辑 top 映射到 Three 的 +Z 面。
+          const materials = JUMP_HOP_THREE_MATERIAL_FACE_ORDER.map((face) => {
             const faceUrl =
               getJumpHopTileTextureUrl(
                 textureUrls,
                 item.renderKey,
-                face as JumpHopTileFaceKey,
+                face,
               ) || textureUrl;
             return new three.MeshStandardMaterial({
               alphaTest: 0.04,
-              map: getTexture(faceUrl),
+              map: getTexture(faceUrl, face),
               metalness: 0,
               roughness: 0.76,
-              transparent: true,
+              transparent: JUMP_HOP_THREE_PLATFORM_MATERIAL_TRANSPARENT,
             });
           });
           materialCache.set(cacheKey, materials);
@@ -920,7 +1101,7 @@ function JumpHopThreeScene({
             map: getTexture(textureUrl),
             metalness: 0,
             roughness: 0.76,
-            transparent: true,
+            transparent: JUMP_HOP_THREE_PLATFORM_MATERIAL_TRANSPARENT,
           });
           materialCache.set(textureUrl, material);
           return material;
@@ -968,6 +1149,7 @@ function JumpHopThreeScene({
       };
 
       const syncPlatformMeshes = () => {
+        platformGroup.visible = renderPlatformsRef.current;
         const nextPlatforms = platformsRef.current;
         const textureUrls = textureUrlsByRenderKeyRef.current;
         const nextSignature = nextPlatforms
@@ -1004,9 +1186,10 @@ function JumpHopThreeScene({
           const cubeSide = getJumpHopThreeCubeSide(item.platform, item.scale);
           const root = new three.Group();
           const rootBaseX = (item.screenX / 100) * viewportSize.width;
-          const rootBaseY = getJumpHopThreeProjectedY(
+          const rootBaseY = getJumpHopThreeWorldYForScreenY(
             (item.screenY / 100) * viewportSize.height,
             viewportSize.height,
+            cubeSide / 2,
           );
           root.position.set(rootBaseX, rootBaseY, 0);
           root.renderOrder = 20 + item.index;
@@ -1030,9 +1213,10 @@ function JumpHopThreeScene({
             getPlatformMaterial(item, textureUrls),
           );
           mesh.position.set(0, 0, 0);
-          mesh.rotation.set(0, 0, 0);
+          mesh.rotation.set(0, 0, JUMP_HOP_THREE_PLATFORM_YAW_RAD);
           mesh.scale.setScalar(cubeSide);
-          mesh.renderOrder = 30 + item.index;
+          mesh.renderOrder =
+            JUMP_HOP_THREE_PLATFORM_MESH_RENDER_ORDER_BASE + item.index;
 
           root.add(shadow, mesh);
           platformGroup.add(root);
@@ -1057,35 +1241,50 @@ function JumpHopThreeScene({
         : null;
       resizeObserver?.observe(host);
       resize();
-      onCharacterLayerReadyChange(Boolean(character));
+      publishCharacterLayerReady();
       onPlatformLayerReadyChange(true);
 
       const animate = () => {
+        platformGroup.visible = renderPlatformsRef.current;
         syncPlatformMeshes();
-        const nextCharacterPosition = characterPositionRef.current;
-        if (character && nextCharacterPosition) {
+        const nextCharacterFrame = characterFrameRef.current;
+        if (character && nextCharacterFrame) {
+          const nextCharacterPosition = nextCharacterFrame.position;
           const nextChargeRatio = chargeRatioRef.current;
           const canvasPosition = resolveJumpHopCharacterCanvasPosition(
             nextCharacterPosition,
             viewportSize,
           );
+          const characterFootZ = resolveJumpHopThreeCharacterFootZ(
+            nextCharacterPosition,
+            platformsRef.current,
+          );
           character.visible = true;
-          character.position.set(canvasPosition?.x ?? 0, canvasPosition?.y ?? 0, 0);
+          character.position.set(
+            canvasPosition?.x ?? 0,
+            getJumpHopThreeWorldYForScreenY(
+              canvasPosition?.y ?? 0,
+              viewportSize.height,
+              characterFootZ,
+            ),
+            characterFootZ,
+          );
           if (isJumpAnimatingRef.current) {
             const now = window.performance.now();
-            character.rotation.z = Math.sin(now / 42) * 1.22;
-            character.rotation.x = Math.sin(now / 28) * 0.28;
-            character.rotation.y = Math.sin(now / 34) * 0.2;
-            character.position.y += Math.sin(now / 26) * 8 - 14;
+            characterMaterial.rotation =
+              Math.sin(now / 42) * 0.16 + nextCharacterFrame.progress * Math.PI * 1.65;
+          } else if (isLandingRecoilAnimatingRef.current) {
+            const now = window.performance.now();
+            characterMaterial.rotation = Math.sin(now / 52) * 0.05;
           } else {
-            character.rotation.z = nextCharacterPosition.isMiss ? -0.32 : 0;
-            character.rotation.x = 0;
-            character.rotation.y = 0;
+            characterMaterial.rotation = nextCharacterPosition.isMiss ? -0.24 : 0;
           }
           character.scale.set(
-            1 + nextChargeRatio * 0.08,
-            1 - nextChargeRatio * 0.12,
-            1 + nextChargeRatio * 0.08,
+            JUMP_HOP_THREE_CHARACTER_WIDTH * (1 + nextChargeRatio * 0.1),
+            JUMP_HOP_THREE_CHARACTER_HEIGHT *
+              (1 - nextChargeRatio * 0.28) *
+              (isLandingRecoilAnimatingRef.current ? 1.04 : 1),
+            1,
           );
         } else if (character) {
           character.visible = false;
@@ -1110,6 +1309,8 @@ function JumpHopThreeScene({
           }
         });
         fallbackMaterialCache.forEach((material) => material.dispose());
+        characterTexture.dispose();
+        characterMaterial.dispose();
         shadowMaterial.dispose();
         platformGeometry.dispose();
         shadowGeometry.dispose();
@@ -1325,6 +1526,7 @@ export function JumpHopRuntimeShell({
   const landingRecoilEndTimerRef = useRef<number | null>(null);
   const animationStartAtRef = useRef(0);
   const hasJumpAnimationReachedTargetRef = useRef(false);
+  const postLandingCameraDelayTimerRef = useRef<number | null>(null);
   const platformAdvanceEndTimerRef = useRef<number | null>(null);
   const activeRunRef = useRef(activeRun);
   const displayRunRef = useRef(displayRun);
@@ -1416,11 +1618,12 @@ export function JumpHopRuntimeShell({
     () =>
       isThreePlatformLayerReady &&
       platformRenderItems.every((item) =>
-        hasJumpHopTileTexturesReady(
-          platformTextureUrlsByRenderKey,
-          item.renderKey,
-          item.asset,
-        ),
+        hasCompleteJumpHopTileFaceAssets(item.asset) &&
+          hasJumpHopTileTexturesReady(
+            platformTextureUrlsByRenderKey,
+            item.renderKey,
+            item.asset,
+          ),
       ),
     [
       isThreePlatformLayerReady,
@@ -1481,17 +1684,6 @@ export function JumpHopRuntimeShell({
     visiblePlatforms,
     landingAssistStageSize,
   );
-  const currentPlatformOriginPosition = useMemo(() => {
-    if (!stageRun) {
-      return null;
-    }
-    const currentPlatform = visiblePlatforms.find(
-      (item) => item.index === stageRun.currentPlatformIndex,
-    );
-    return currentPlatform
-      ? buildJumpHopCharacterVisualPositionFromPlatform(currentPlatform)
-      : null;
-  }, [stageRun, visiblePlatforms]);
   const jumpTargetPlatform = useMemo(() => {
     if (!stageRun) {
       return null;
@@ -1503,12 +1695,12 @@ export function JumpHopRuntimeShell({
     );
   }, [stageRun, visiblePlatforms]);
   const targetDirection = useMemo(() => {
-    const directionOrigin = currentPlatformOriginPosition ?? characterPosition;
+    const directionOrigin = characterPosition;
     if (!directionOrigin || !jumpTargetPlatform) {
       return null;
     }
     const targetCharacterPosition =
-      buildJumpHopCharacterVisualPositionFromPlatform(jumpTargetPlatform);
+      getJumpHopCharacterTopFaceVisualPosition(jumpTargetPlatform);
     const directionX = targetCharacterPosition.screenX - directionOrigin.screenX;
     const directionY = targetCharacterPosition.screenY - directionOrigin.screenY;
     const distance = Math.hypot(directionX, directionY);
@@ -1522,7 +1714,27 @@ export function JumpHopRuntimeShell({
       unitScreenX: directionX / distance,
       unitScreenY: directionY / distance,
     };
-  }, [characterPosition, currentPlatformOriginPosition, jumpTargetPlatform]);
+  }, [characterPosition, jumpTargetPlatform]);
+  const landingAssistPosition = useMemo(() => {
+    if (!isCharging || !stageRun || !characterPosition) {
+      return null;
+    }
+
+    return getJumpHopLandingAssistVisualPosition(
+      stageRun,
+      visiblePlatforms,
+      characterPosition,
+      landingAssistStageSize,
+      dragDistance,
+    );
+  }, [
+    characterPosition,
+    dragDistance,
+    isCharging,
+    landingAssistStageSize,
+    stageRun,
+    visiblePlatforms,
+  ]);
   const visualCharacterPosition = useMemo(() => {
     if (!characterPosition) {
       return null;
@@ -1536,6 +1748,21 @@ export function JumpHopRuntimeShell({
     isJumpAnimating,
     visualJump,
   ]);
+  const threeCharacterFrame = useMemo(
+    () =>
+      resolveJumpHopThreeCharacterFrame({
+        characterPosition,
+        visualJump,
+        jumpAnimationProgress,
+        isJumpAnimating,
+      }),
+    [
+      characterPosition,
+      isJumpAnimating,
+      jumpAnimationProgress,
+      visualJump,
+    ],
+  );
   const characterMotionStyle = useMemo(() => {
     const idleTransform = 'matrix(1, 0, 0, 1, 0, 0)';
     const recoilDistance = Math.hypot(dragVector.x, dragVector.y);
@@ -1701,6 +1928,13 @@ export function JumpHopRuntimeShell({
     setIsLandingRecoilAnimating(false);
   }, []);
 
+  const clearPostLandingCameraDelay = useCallback(() => {
+    if (postLandingCameraDelayTimerRef.current != null) {
+      window.clearTimeout(postLandingCameraDelayTimerRef.current);
+      postLandingCameraDelayTimerRef.current = null;
+    }
+  }, []);
+
   const stopChargeFrame = useCallback(() => {
     if (chargeFrameRef.current != null) {
       window.cancelAnimationFrame(chargeFrameRef.current);
@@ -1738,7 +1972,7 @@ export function JumpHopRuntimeShell({
             (item) => item.index === toRun.currentPlatformIndex,
           );
           return fromLandingPlatform
-            ? buildJumpHopCharacterVisualPositionFromPlatform(
+            ? getJumpHopCharacterTopFaceVisualPosition(
                 fromLandingPlatform,
               )
             : null;
@@ -1754,7 +1988,7 @@ export function JumpHopRuntimeShell({
             (item) => item.index === toRun.currentPlatformIndex,
           );
           return toCurrentPlatform
-            ? buildJumpHopCharacterVisualPositionFromPlatform(
+            ? getJumpHopCharacterTopFaceVisualPosition(
                 toCurrentPlatform,
               )
             : null;
@@ -1850,6 +2084,32 @@ export function JumpHopRuntimeShell({
     [beginPlatformAdvance, clearLandingRecoilState],
   );
 
+  const resolveJumpHopFlightAnimation = useCallback(
+    (
+      fromRun: JumpHopRuntimeRunSnapshotResponse,
+      toRun: JumpHopRuntimeRunSnapshotResponse,
+    ) => {
+      if (!shouldAnimateJumpHopPlatformAdvance(fromRun, toRun)) {
+        clearPostLandingCameraDelay();
+        finishJumpHopFlightAnimation(fromRun, toRun);
+        return;
+      }
+
+      if (postLandingCameraDelayTimerRef.current != null) {
+        return;
+      }
+
+      postLandingCameraDelayTimerRef.current = window.setTimeout(() => {
+        postLandingCameraDelayTimerRef.current = null;
+        finishJumpHopFlightAnimation(fromRun, toRun);
+      }, JUMP_HOP_POST_LANDING_CAMERA_DELAY_MS);
+    },
+    [
+      clearPostLandingCameraDelay,
+      finishJumpHopFlightAnimation,
+    ],
+  );
+
   useEffect(() => {
     if (stageRun?.status !== 'playing') {
       return undefined;
@@ -1897,6 +2157,7 @@ export function JumpHopRuntimeShell({
         window.clearTimeout(animationEndTimerRef.current);
         animationEndTimerRef.current = null;
       }
+      clearPostLandingCameraDelay();
       clearPlatformAdvanceState();
       clearLandingRecoilState();
       hasJumpAnimationReachedTargetRef.current = false;
@@ -1922,6 +2183,7 @@ export function JumpHopRuntimeShell({
         window.clearTimeout(animationEndTimerRef.current);
         animationEndTimerRef.current = null;
       }
+      clearPostLandingCameraDelay();
       clearPlatformAdvanceState();
       clearLandingRecoilState();
       hasJumpAnimationReachedTargetRef.current = false;
@@ -1946,7 +2208,7 @@ export function JumpHopRuntimeShell({
         displayRun.runId === activeRun.runId &&
         hasJumpHopRunDisplayChange(displayRun, activeRun)
       ) {
-        finishJumpHopFlightAnimation(displayRun, activeRun);
+        resolveJumpHopFlightAnimation(displayRun, activeRun);
       }
       return;
     }
@@ -1960,10 +2222,11 @@ export function JumpHopRuntimeShell({
     activeRun,
     clearLandingRecoilState,
     clearPlatformAdvanceState,
+    clearPostLandingCameraDelay,
     displayRun,
-    finishJumpHopFlightAnimation,
     isJumpAnimating,
     jumpAnimationProgress,
+    resolveJumpHopFlightAnimation,
     stopChargeFrame,
   ]);
 
@@ -1981,6 +2244,9 @@ export function JumpHopRuntimeShell({
       if (landingRecoilEndTimerRef.current != null) {
         window.clearTimeout(landingRecoilEndTimerRef.current);
       }
+      if (postLandingCameraDelayTimerRef.current != null) {
+        window.clearTimeout(postLandingCameraDelayTimerRef.current);
+      }
       if (chargeFrameRef.current != null) {
         window.cancelAnimationFrame(chargeFrameRef.current);
       }
@@ -2016,7 +2282,7 @@ export function JumpHopRuntimeShell({
         latestDisplayRun.runId === latestActiveRun.runId &&
         hasJumpHopRunDisplayChange(latestDisplayRun, latestActiveRun)
       ) {
-        finishJumpHopFlightAnimation(latestDisplayRun, latestActiveRun);
+        resolveJumpHopFlightAnimation(latestDisplayRun, latestActiveRun);
       }
     }, JUMP_HOP_ANIMATION_DURATION_MS);
     const tick = (now: number) => {
@@ -2050,7 +2316,7 @@ export function JumpHopRuntimeShell({
         animationEndTimerRef.current = null;
       }
     };
-  }, [finishJumpHopFlightAnimation, isJumpAnimating]);
+  }, [isJumpAnimating, resolveJumpHopFlightAnimation]);
 
   const beginCharge = (event: PointerEvent<HTMLElement>) => {
     if (!canJump) {
@@ -2116,21 +2382,16 @@ export function JumpHopRuntimeShell({
           )
         : null;
     if (characterPosition) {
-      const predictionOrigin =
-        currentPlatformOriginPosition ?? characterPosition;
-      const visualDeltaX = predictedLandingPosition
-        ? predictedLandingPosition.screenX - predictionOrigin.screenX
-        : 0;
-      const visualDeltaY = predictedLandingPosition
-        ? predictedLandingPosition.screenY - predictionOrigin.screenY
-        : 0;
       setVisualJump({
         from: characterPosition,
         to: predictedLandingPosition
           ? {
               ...characterPosition,
-              screenX: clamp(characterPosition.screenX + visualDeltaX, 6, 94),
-              screenY: clamp(characterPosition.screenY + visualDeltaY, 10, 92),
+              screenX: predictedLandingPosition.screenX,
+              screenY: predictedLandingPosition.screenY,
+              sceneX: predictedLandingPosition.sceneX,
+              sceneY: predictedLandingPosition.sceneY,
+              sceneZ: predictedLandingPosition.sceneZ,
               isMiss: !predictedLandingPosition.isOnTargetPlatform,
             }
           : characterPosition,
@@ -2150,17 +2411,8 @@ export function JumpHopRuntimeShell({
       x: targetDirection ? -targetDirection.unitScreenX : 0,
       y: targetDirection ? -targetDirection.unitScreenY : 0,
     });
-    const backendDragVector = getJumpHopBackendDragVector(
-      predictionRun ?? activeRun,
-      visiblePlatforms,
-      landingAssistStageSize,
-      targetDirection ? -targetDirection.unitScreenX : 0,
-      targetDirection ? -targetDirection.unitScreenY : 0,
-    );
     await onJump({
       dragDistance: nextDragDistance,
-      dragVectorX: backendDragVector.dragVectorX,
-      dragVectorY: backendDragVector.dragVectorY,
     });
   };
 
@@ -2227,12 +2479,14 @@ export function JumpHopRuntimeShell({
           }
         >
           <JumpHopThreeScene
-            characterPosition={visualCharacterPosition}
+            characterFrame={threeCharacterFrame}
             chargeRatio={chargeRatio}
+            isLandingRecoilAnimating={isLandingRecoilAnimating}
             isJumpAnimating={isJumpAnimating}
             platforms={platformRenderItems}
             platformCount={platformRenderItems.length}
-            renderCharacter={false}
+            renderCharacter={true}
+            renderPlatforms={shouldUseThreePlatformLayer}
             textureUrlsByRenderKey={platformTextureUrlsByRenderKey}
             onCharacterLayerReadyChange={setIsThreeCharacterLayerReady}
             onPlatformLayerReadyChange={setIsThreePlatformLayerReady}
@@ -2248,7 +2502,6 @@ export function JumpHopRuntimeShell({
               top: `${item.screenY}%`,
               width,
               height,
-              '--jump-hop-platform-scale': item.scale,
               zIndex:
                 item.advanceState === 'exiting' ? 12 + item.index : 20 + item.index,
             } as CSSProperties;
@@ -2325,6 +2578,27 @@ export function JumpHopRuntimeShell({
               />
             </div>
           ) : null}
+
+          {landingAssistPosition ? (
+            <div
+              aria-hidden="true"
+              className="jump-hop-runtime__landing-assist"
+              data-testid="jump-hop-landing-assist"
+              data-on-target={
+                landingAssistPosition.isOnTargetPlatform ? 'true' : 'false'
+              }
+              style={
+                {
+                  '--jump-hop-landing-x': `${landingAssistPosition.screenX}%`,
+                  '--jump-hop-landing-y': `${landingAssistPosition.screenY}%`,
+                  '--jump-hop-charge': chargeRatio,
+                } as CSSProperties
+              }
+            >
+              <div className="jump-hop-runtime__landing-assist-ring" />
+              <div className="jump-hop-runtime__landing-assist-core" />
+            </div>
+          ) : null}
         </div>
 
         {isCharging && characterPosition ? (
@@ -2575,14 +2849,10 @@ export function JumpHopRuntimeShell({
           transition: opacity 120ms ease;
         }
 
-        .jump-hop-runtime__camera-layer[data-three-platform-ready='false'] .jump-hop-runtime__three-scene {
-          opacity: 0;
-        }
-
         .jump-hop-runtime__platform {
           position: absolute;
           z-index: 8;
-          transform: translate(-50%, -50%) scale(var(--jump-hop-platform-scale, 1));
+          transform: translate(-50%, -50%);
           transform-origin: 50% 50%;
           display: grid;
           place-items: center;
@@ -2815,6 +3085,53 @@ export function JumpHopRuntimeShell({
           pointer-events: none;
         }
 
+        .jump-hop-runtime__landing-assist {
+          position: absolute;
+          left: var(--jump-hop-landing-x);
+          top: var(--jump-hop-landing-y);
+          z-index: 86;
+          width: 2.15rem;
+          height: 2.15rem;
+          pointer-events: none;
+          transform: translate(-50%, -50%) scale(calc(0.82 + var(--jump-hop-charge) * 0.18));
+          transform-origin: center;
+        }
+
+        .jump-hop-runtime__landing-assist-ring,
+        .jump-hop-runtime__landing-assist-core {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          border-radius: 999px;
+          transform: translate(-50%, -50%);
+        }
+
+        .jump-hop-runtime__landing-assist-ring {
+          width: 100%;
+          height: 100%;
+          border: 2px solid rgba(250, 204, 21, 0.94);
+          background: rgba(250, 204, 21, 0.16);
+          box-shadow:
+            0 0 0 4px rgba(255, 255, 255, 0.58),
+            0 10px 20px rgba(15, 23, 42, 0.2);
+        }
+
+        .jump-hop-runtime__landing-assist-core {
+          width: 0.58rem;
+          height: 0.58rem;
+          background: #facc15;
+          box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86);
+        }
+
+        .jump-hop-runtime__landing-assist[data-on-target='false'] .jump-hop-runtime__landing-assist-ring {
+          border-color: rgba(248, 113, 113, 0.96);
+          background: rgba(248, 113, 113, 0.18);
+        }
+
+        .jump-hop-runtime__landing-assist[data-on-target='false'] .jump-hop-runtime__landing-assist-core {
+          background: #ef4444;
+        }
+
         .jump-hop-runtime__charge-ring {
           position: absolute;
           left: var(--jump-hop-anchor-x);
diff --git a/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts b/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts
index d59d0d094..1f6943ef1 100644
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts
@@ -4,6 +4,7 @@ import { createMiniGameDraftGenerationState } from '../../services/miniGameDraft
 import {
   buildExternalGenerationQueuePresentation,
   buildExternalGenerationQueueStatus,
+  shouldUseFastExternalGenerationTaskPolling,
 } from './platformExternalGenerationQueueStatusModel';
 import {
   resolveFinishedMiniGameDraftGenerationState,
@@ -129,4 +130,50 @@ describe('buildExternalGenerationQueueStatus', () => {
       }).shouldShow,
     ).toBe(false);
   });
+
+  test('只在队列活跃或存在未确认终态任务时使用快速轮询', () => {
+    expect(
+      shouldUseFastExternalGenerationTaskPolling({
+        pendingCount: 0,
+        runningCount: 0,
+        unacknowledgedTerminalCount: 0,
+        tasks: [],
+      }),
+    ).toBe(false);
+
+    expect(
+      shouldUseFastExternalGenerationTaskPolling({
+        currentStatus: 'queued',
+        pendingCount: 0,
+        runningCount: 0,
+        unacknowledgedTerminalCount: 0,
+        tasks: [],
+      }),
+    ).toBe(true);
+
+    expect(
+      shouldUseFastExternalGenerationTaskPolling({
+        pendingCount: 0,
+        runningCount: 0,
+        unacknowledgedTerminalCount: 0,
+        tasks: [
+          {
+            jobId: 'extgen-completed',
+            jobKind: 'editor_image_generation',
+            sourceModule: 'editor',
+            sourceEntityId: 'project-1',
+            requestLabel: '图片生成',
+            status: 'completed',
+            phaseLabel: '已完成',
+            phaseDetail: '已完成',
+            progress: 100,
+            priceMudPoints: 1,
+            createdAt: '2026-06-25T00:00:00.000Z',
+            updatedAt: '2026-06-25T00:00:00.000Z',
+            updatedAtMicros: 1_782_348_800_000_000,
+          },
+        ],
+      }),
+    ).toBe(true);
+  });
 });
diff --git a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
index 491a087c9..d20c1c6c0 100644
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
@@ -544,7 +544,10 @@ import type {
 } from './platformEntryTypes';
 import { PlatformEntryWorldDetailView } from './PlatformEntryWorldDetailView';
 import { PlatformErrorDialog } from './PlatformErrorDialog';
-import { buildExternalGenerationQueueStatus } from './platformExternalGenerationQueueStatusModel';
+import {
+  buildExternalGenerationQueueStatus,
+  shouldUseFastExternalGenerationTaskPolling,
+} from './platformExternalGenerationQueueStatusModel';
 import { resolvePlatformGenerationProgressTickDecision } from './platformGenerationProgressTickModel';
 import {
   sendPlatformHostDraftNotificationToHost,
@@ -707,6 +710,7 @@ type PuzzleBackgroundCompileTask = {
   generationState: MiniGameDraftGenerationState;
   error: string | null;
 };
+const EXTERNAL_GENERATION_TASK_FAST_POLL_INTERVAL_MS = 4_000;
 
 function isUnacknowledgedExternalGenerationTerminalTask(
   task: ExternalGenerationTaskRecord,
@@ -4969,6 +4973,15 @@ export function PlatformEntryFlowShellImpl({
     woodenFishGenerationState,
   );
   const isHostNetworkOnline = useHostNetworkOnline();
+  const shouldFastPollKnownExternalGenerationTask =
+    puzzleOperation?.queueState?.status === 'queued' ||
+    puzzleOperation?.queueState?.status === 'running' ||
+    jumpHopQueueState?.status === 'queued' ||
+    jumpHopQueueState?.status === 'running' ||
+    puzzleClearQueueState?.status === 'queued' ||
+    puzzleClearQueueState?.status === 'running' ||
+    woodenFishQueueState?.status === 'queued' ||
+    woodenFishQueueState?.status === 'running';
   const shouldPollExternalGenerationTasks =
     platformBootstrap.canReadProtectedData && Boolean(authUi?.user?.id);
   const externalGenerationQueueOwnerKey =
@@ -4993,6 +5006,21 @@ export function PlatformEntryFlowShellImpl({
 
     let disposed = false;
     let controller: AbortController | null = null;
+    let timerId: number | null = null;
+
+    const scheduleNextRefresh = (delayMs: number) => {
+      if (disposed) {
+        return;
+      }
+      if (timerId != null) {
+        window.clearTimeout(timerId);
+        timerId = null;
+      }
+      if (delayMs <= 0) {
+        return;
+      }
+      timerId = window.setTimeout(refreshTaskList, delayMs);
+    };
 
     const refreshTaskList = () => {
       controller?.abort();
@@ -5012,6 +5040,18 @@ export function PlatformEntryFlowShellImpl({
               ),
             );
             setExternalGenerationTaskOverview(response.overview);
+            scheduleNextRefresh(
+              shouldFastPollKnownExternalGenerationTask ||
+                shouldUseFastExternalGenerationTaskPolling(
+                  buildExternalGenerationQueueStatus(
+                    response.overview,
+                    null,
+                    response.tasks,
+                  ),
+                )
+                ? EXTERNAL_GENERATION_TASK_FAST_POLL_INTERVAL_MS
+                : 0,
+            );
           }
         })
         .catch(() => {
@@ -5023,16 +5063,28 @@ export function PlatformEntryFlowShellImpl({
     };
 
     refreshTaskList();
-    const intervalId = window.setInterval(refreshTaskList, 4000);
+    const handleResume = () => {
+      if (document.visibilityState === 'hidden') {
+        return;
+      }
+      refreshTaskList();
+    };
+    window.addEventListener('focus', handleResume);
+    document.addEventListener('visibilitychange', handleResume);
 
     return () => {
       disposed = true;
       controller?.abort();
-      window.clearInterval(intervalId);
+      if (timerId != null) {
+        window.clearTimeout(timerId);
+      }
+      window.removeEventListener('focus', handleResume);
+      document.removeEventListener('visibilitychange', handleResume);
     };
   }, [
     externalGenerationQueueOwnerKey,
     isHostNetworkOnline,
+    shouldFastPollKnownExternalGenerationTask,
     shouldPollExternalGenerationTasks,
   ]);
   const activeExternalGenerationJobState = useMemo(() => {
diff --git a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx
index 0092e09d3..325954933 100644
--- a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx
+++ b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.test.tsx
@@ -9,7 +9,7 @@ import {
   shouldShowMobileHomeWelcomeDialog,
 } from './PlatformMobileHomeWelcomeDialog';
 
-test('shows mobile home welcome only for the mobile platform home route', () => {
+test('shows mobile home welcome when entering the mobile site shell', () => {
   expect(
     shouldShowMobileHomeWelcomeDialog({
       isDesktopLayout: false,
@@ -33,7 +33,7 @@ test('shows mobile home welcome only for the mobile platform home route', () =>
       platformTab: 'category',
       pathname: '/',
     }),
-  ).toBe(false);
+  ).toBe(true);
   expect(
     shouldShowMobileHomeWelcomeDialog({
       isDesktopLayout: false,
@@ -41,10 +41,10 @@ test('shows mobile home welcome only for the mobile platform home route', () =>
       platformTab: 'home',
       pathname: '/creation',
     }),
-  ).toBe(false);
+  ).toBe(true);
 });
 
-test('keeps mobile home welcome dismissed across bottom tab switches until refresh', () => {
+test('keeps mobile home welcome dismissed across site navigation until refresh', () => {
   expect(
     shouldOpenMobileHomeWelcomeDialog({
       isDesktopLayout: false,
diff --git a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx
index 97e3afe27..3948e92b6 100644
--- a/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx
+++ b/src/components/platform-entry/PlatformMobileHomeWelcomeDialog.tsx
@@ -1,4 +1,3 @@
-import { normalizeAppPath } from '../../routing/appPageRoutes';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { UnifiedModal } from '../common/UnifiedModal';
 import type { SelectionStage } from './platformEntryTypes';
@@ -22,16 +21,8 @@ type PlatformMobileHomeWelcomeDialogProps = {
 
 export function shouldShowMobileHomeWelcomeDialog({
   isDesktopLayout,
-  selectionStage,
-  platformTab,
-  pathname,
 }: MobileHomeWelcomeDecisionInput) {
-  return (
-    !isDesktopLayout &&
-    selectionStage === 'platform' &&
-    platformTab === 'home' &&
-    normalizeAppPath(pathname) === '/'
-  );
+  return !isDesktopLayout;
 }
 
 export function shouldOpenMobileHomeWelcomeDialog({
diff --git a/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts b/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts
index 3cbcc8e58..fede09ff4 100644
--- a/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts
+++ b/src/components/platform-entry/platformExternalGenerationQueueStatusModel.ts
@@ -55,6 +55,48 @@ export function buildExternalGenerationQueueStatus(
   };
 }
 
+function isActiveExternalGenerationStatus(
+  status: ExternalGenerationQueueStatus['currentStatus'],
+) {
+  return status === 'queued' || status === 'running';
+}
+
+function isUnacknowledgedExternalGenerationTerminalTask(
+  task: ExternalGenerationTaskRecord,
+) {
+  return (
+    (task.status === 'completed' || task.status === 'failed') &&
+    !task.notificationAcknowledgedAt
+  );
+}
+
+export function shouldUseFastExternalGenerationTaskPolling(
+  status: ExternalGenerationQueueStatus | null | undefined,
+) {
+  const pendingCount = normalizeExternalGenerationQueueCount(
+    status?.pendingCount,
+  );
+  const runningCount = normalizeExternalGenerationQueueCount(
+    status?.runningCount,
+  );
+  const unacknowledgedTerminalCount = normalizeExternalGenerationQueueCount(
+    status?.unacknowledgedTerminalCount,
+  );
+
+  return Boolean(
+    isActiveExternalGenerationStatus(status?.currentStatus ?? null) ||
+      pendingCount > 0 ||
+      runningCount > 0 ||
+      unacknowledgedTerminalCount > 0 ||
+      (status?.tasks ?? []).some(
+        (task) =>
+          task.status === 'queued' ||
+          task.status === 'running' ||
+          isUnacknowledgedExternalGenerationTerminalTask(task),
+      ),
+  );
+}
+
 export function resolveExternalGenerationQueueStatusLabel(
   status: ExternalGenerationQueueStatus['currentStatus'],
 ) {
diff --git a/src/components/project/ProjectCanvasCover.test.ts b/src/components/project/ProjectCanvasCover.test.ts
index d12d2221f..3b208078c 100644
--- a/src/components/project/ProjectCanvasCover.test.ts
+++ b/src/components/project/ProjectCanvasCover.test.ts
@@ -1,16 +1,21 @@
 import { describe, expect, it } from 'vitest';
 
 import type { EditorProjectSnapshot } from '../../services/image-editor/editorProjectClient';
-import { resolveProjectCoverSnapshotResource } from './ProjectCanvasCover';
+import {
+  LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+  resolveProjectCoverResource,
+  resolveProjectCoverSnapshotResource,
+} from './ProjectCanvasCover';
 
 function project(
   resources: EditorProjectSnapshot['resources'],
+  layers: EditorProjectSnapshot['layers'] = [],
 ): EditorProjectSnapshot {
   return {
     projectId: 'editor-project-cover',
     title: '封面项目',
     viewport: { x: 0, y: 0, scale: 1 },
-    layers: [],
+    layers,
     resources,
     updatedAt: '2026-06-12T00:00:00.000Z',
   };
@@ -78,4 +83,230 @@ describe('resolveProjectCoverSnapshotResource', () => {
 
     expect(cover).toBeNull();
   });
+
+  it('supports legacy editor object asset kind identifier', () => {
+    const cover = resolveProjectCoverSnapshotResource(
+      project([
+        {
+          resourceId: 'resource-legacy-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: '',
+          objectKey:
+            'generated-character-drafts/editor/project-covers/editor-project-cover/1771400000200/cover.png',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: 'editor_project_cover_snapshot',
+        },
+      ]),
+    );
+
+    expect(cover?.resourceId).toBe('resource-legacy-cover');
+  });
+
+  it('supports legacy snake-case project cover resource payload', () => {
+    const cover = resolveProjectCoverSnapshotResource(
+      project([
+        {
+          resourceId: 'resource-snake-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: '',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          asset_kind: 'project-cover-snapshot',
+          src: '/generated-character-drafts/editor/project-covers/editor-project-cover/1771400000300/cover.png',
+        } as EditorProjectSnapshot['resources'][number],
+      ]),
+    );
+
+    expect(cover?.resourceId).toBe('resource-snake-cover');
+  });
+});
+
+describe('resolveProjectCoverResource', () => {
+  it('prefers the saved cover snapshot over canvas layer resources', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-layer',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/layer.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-cover',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/cover.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+            assetKind: 'project-cover-snapshot',
+          },
+        ],
+        [{ layerId: 'layer-top', resourceId: 'resource-layer', zIndex: 9 }],
+      ),
+    );
+
+    expect(cover?.resourceId).toBe('resource-cover');
+  });
+
+  it('uses local cached covers only when no saved cover snapshot exists', () => {
+    const cover = resolveProjectCoverResource(
+      project([
+        {
+          resourceId: 'resource-local-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: 'blob:local-cover',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+          updatedAt: '2026-06-12T09:10:00.000Z',
+        },
+        {
+          resourceId: 'resource-saved-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: '/generated/cover.png',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: 'project-cover-snapshot',
+          updatedAt: '2026-06-12T09:00:00.000Z',
+        },
+      ]),
+    );
+
+    expect(cover?.resourceId).toBe('resource-saved-cover');
+
+    const localCover = resolveProjectCoverResource(
+      project([
+        {
+          resourceId: 'resource-local-cover',
+          projectId: 'editor-project-cover',
+          imageSrc: 'blob:local-cover',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+          assetKind: LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+        },
+      ]),
+    );
+
+    expect(localCover?.resourceId).toBe('resource-local-cover');
+  });
+
+  it('falls back to the top visible canvas layer resource', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-back',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/back.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-front',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/front.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+        ],
+        [
+          { layerId: 'layer-back', resourceId: 'resource-back', zIndex: 1 },
+          { layerId: 'layer-front', resourceId: 'resource-front', zIndex: 3 },
+        ],
+      ),
+    );
+
+    expect(cover?.resourceId).toBe('resource-front');
+  });
+
+  it('ignores hidden and audio layers when falling back', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-hidden',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/hidden.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-audio',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/audio.mp3',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-visible',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/visible.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+        ],
+        [
+          {
+            layerId: 'layer-hidden',
+            resourceId: 'resource-hidden',
+            hidden: true,
+            zIndex: 9,
+          },
+          {
+            layerId: 'layer-audio',
+            resourceId: 'resource-audio',
+            mediaType: 'audio',
+            zIndex: 8,
+          },
+          {
+            layerId: 'layer-visible',
+            resourceId: 'resource-visible',
+            zIndex: 1,
+          },
+        ],
+      ),
+    );
+
+    expect(cover?.resourceId).toBe('resource-visible');
+  });
+
+  it('returns null when the project has no visible layer image resource', () => {
+    const cover = resolveProjectCoverResource(
+      project(
+        [
+          {
+            resourceId: 'resource-hidden',
+            projectId: 'editor-project-cover',
+            imageSrc: '/generated/hidden.png',
+            width: 320,
+            height: 240,
+            sourceType: 'uploaded',
+          },
+        ],
+        [
+          {
+            layerId: 'layer-hidden',
+            resourceId: 'resource-hidden',
+            hidden: true,
+          },
+        ],
+      ),
+    );
+
+    expect(cover).toBeNull();
+  });
 });
diff --git a/src/components/project/ProjectCanvasCover.tsx b/src/components/project/ProjectCanvasCover.tsx
index f6b656eb2..9f3c84eef 100644
--- a/src/components/project/ProjectCanvasCover.tsx
+++ b/src/components/project/ProjectCanvasCover.tsx
@@ -1,17 +1,89 @@
 import type {
+  EditorProjectLayerSnapshot,
   EditorProjectResourceSnapshot,
   EditorProjectSnapshot,
 } from '../../services/image-editor/editorProjectClient';
 import { PROJECT_COVER_SNAPSHOT_ASSET_KIND } from '../image-editor/ImageCanvasProjectCoverSnapshotModel';
 
-function hasProjectCoverSnapshotSource(resource: EditorProjectResourceSnapshot) {
-  return Boolean(resource.objectKey?.trim() || resource.imageSrc.trim());
+const PROJECT_COVER_SNAPSHOT_ASSET_KIND_LEGACY =
+  'editor_project_cover_snapshot';
+export const LOCAL_PROJECT_COVER_CACHE_ASSET_KIND = 'local-project-cover-cache';
+
+type ProjectResourceSnakeKind = {
+  asset_kind?: string | null;
+  src?: string | null;
+};
+
+type ProjectCoverResourceCandidate = EditorProjectResourceSnapshot & {
+  imageSrc: string;
+};
+
+function stringFromUnknown(value: unknown) {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+function numberFromUnknown(value: unknown, fallback: number) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+
+function readProjectCoverSnapshotKind(resource: EditorProjectResourceSnapshot) {
+  const legacyResource = resource as ProjectResourceSnakeKind;
+  return (
+    resource.assetKind?.trim() ||
+    legacyResource.asset_kind?.trim() ||
+    ''
+  ).trim();
+}
+
+function readProjectCoverSnapshotImageSrc(
+  resource: EditorProjectResourceSnapshot,
+) {
+  const legacyResource = resource as ProjectResourceSnakeKind;
+  return (
+    (typeof resource.imageSrc === 'string' ? resource.imageSrc.trim() : '') ||
+    (typeof legacyResource.src === 'string' ? legacyResource.src.trim() : '')
+  );
+}
+
+function hasProjectCoverSnapshotSource(
+  resource: EditorProjectResourceSnapshot,
+) {
+  const resourceObjectKey = resource.objectKey?.trim() || '';
+  const resourceImageSrc = readProjectCoverSnapshotImageSrc(resource);
+  return Boolean(resourceObjectKey || resourceImageSrc);
+}
+
+function hasProjectCoverSource(
+  resource: EditorProjectResourceSnapshot,
+): resource is ProjectCoverResourceCandidate {
+  return hasProjectCoverSnapshotSource(resource);
+}
+
+function isDedicatedProjectCoverSnapshot(
+  resource: EditorProjectResourceSnapshot,
+) {
+  return [
+    PROJECT_COVER_SNAPSHOT_ASSET_KIND,
+    PROJECT_COVER_SNAPSHOT_ASSET_KIND_LEGACY,
+    LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+  ].includes(readProjectCoverSnapshotKind(resource));
+}
+
+function isLocalProjectCoverCacheResource(
+  resource: EditorProjectResourceSnapshot,
+) {
+  return (
+    readProjectCoverSnapshotKind(resource) ===
+    LOCAL_PROJECT_COVER_CACHE_ASSET_KIND
+  );
 }
 
 function projectCoverSnapshotObjectTimestamp(
   resource: EditorProjectResourceSnapshot,
 ) {
-  const snapshotPath = resource.objectKey?.trim() || resource.imageSrc.trim();
+  const objectKey = resource.objectKey?.trim() || '';
+  const imageSrc = readProjectCoverSnapshotImageSrc(resource);
+  const snapshotPath = objectKey || imageSrc;
   const timestampSegment = snapshotPath.match(
     /\/project-covers\/[^/]+\/(\d{10,})\//u,
   )?.[1];
@@ -19,7 +91,9 @@ function projectCoverSnapshotObjectTimestamp(
   return Number.isFinite(timestampMs) ? timestampMs : 0;
 }
 
-function projectCoverSnapshotSortScore(resource: EditorProjectResourceSnapshot) {
+function projectCoverSnapshotSortScore(
+  resource: EditorProjectResourceSnapshot,
+) {
   const objectTimestamp = projectCoverSnapshotObjectTimestamp(resource);
   if (objectTimestamp > 0) {
     return objectTimestamp;
@@ -32,16 +106,69 @@ function projectCoverSnapshotSortScore(resource: EditorProjectResourceSnapshot)
 export function resolveProjectCoverSnapshotResource(
   project: EditorProjectSnapshot,
 ) {
-  return [...project.resources]
-    .filter(
-      (resource) =>
-        resource.assetKind === PROJECT_COVER_SNAPSHOT_ASSET_KIND &&
-        hasProjectCoverSnapshotSource(resource),
-    )
-    .sort((left, right) => {
-      const byUpdatedAt =
-        projectCoverSnapshotSortScore(right) -
-        projectCoverSnapshotSortScore(left);
-      return byUpdatedAt || right.resourceId.localeCompare(left.resourceId);
-    })[0] ?? null;
+  return (
+    [...project.resources]
+      .filter(
+        (resource) =>
+          isDedicatedProjectCoverSnapshot(resource) &&
+          hasProjectCoverSource(resource),
+      )
+      .sort((left, right) => {
+        if (
+          isLocalProjectCoverCacheResource(left) !==
+          isLocalProjectCoverCacheResource(right)
+        ) {
+          return isLocalProjectCoverCacheResource(left) ? 1 : -1;
+        }
+        const byUpdatedAt =
+          projectCoverSnapshotSortScore(right) -
+          projectCoverSnapshotSortScore(left);
+        return byUpdatedAt || right.resourceId.localeCompare(left.resourceId);
+      })[0] ?? null
+  );
+}
+
+function readLayerResourceId(layer: EditorProjectLayerSnapshot) {
+  return stringFromUnknown(layer.resourceId);
+}
+
+function isLayerVisible(layer: EditorProjectLayerSnapshot) {
+  return layer.hidden !== true && layer.mediaType !== 'audio';
+}
+
+function layerCoverSortScore(layer: EditorProjectLayerSnapshot, index: number) {
+  return {
+    zIndex: numberFromUnknown(layer.zIndex, 0),
+    index,
+  };
+}
+
+export function resolveProjectCoverResource(project: EditorProjectSnapshot) {
+  const snapshot = resolveProjectCoverSnapshotResource(project);
+  if (snapshot) {
+    return snapshot;
+  }
+
+  const resourcesById = new Map(
+    project.resources
+      .filter((resource) => !isDedicatedProjectCoverSnapshot(resource))
+      .filter(hasProjectCoverSource)
+      .map((resource) => [resource.resourceId, resource]),
+  );
+
+  return (
+    project.layers
+      .map((layer, index) => ({ layer, index }))
+      .filter(({ layer }) => isLayerVisible(layer))
+      .flatMap(({ layer, index }) => {
+        const resource = resourcesById.get(readLayerResourceId(layer));
+        return resource
+          ? [{ resource, score: layerCoverSortScore(layer, index) }]
+          : [];
+      })
+      .sort((left, right) => {
+        const byZIndex = right.score.zIndex - left.score.zIndex;
+        return byZIndex || right.score.index - left.score.index;
+      })[0]?.resource ?? null
+  );
 }
diff --git a/src/components/project/ProjectGalleryView.test.tsx b/src/components/project/ProjectGalleryView.test.tsx
index 4d16c791b..139114adf 100644
--- a/src/components/project/ProjectGalleryView.test.tsx
+++ b/src/components/project/ProjectGalleryView.test.tsx
@@ -3,7 +3,7 @@
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps, ContextType } from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ApiClientError } from '../../services/apiClient';
 import { AuthUiContext } from '../auth/AuthUiContext';
@@ -13,6 +13,7 @@ const listEditorProjectsMock = vi.hoisted(() => vi.fn());
 const createEditorProjectMock = vi.hoisted(() => vi.fn());
 const renameEditorProjectMock = vi.hoisted(() => vi.fn());
 const deleteEditorProjectMock = vi.hoisted(() => vi.fn());
+const readEditorProjectCoverCacheMock = vi.hoisted(() => vi.fn());
 
 type AuthValue = NonNullable<ContextType<typeof AuthUiContext>>;
 
@@ -44,6 +45,10 @@ vi.mock('../../services/image-editor/editorProjectClient', () => ({
   deleteEditorProject: deleteEditorProjectMock,
 }));
 
+vi.mock('../../services/image-editor/editorProjectCoverCache', () => ({
+  readEditorProjectCoverCache: readEditorProjectCoverCacheMock,
+}));
+
 const projectItems = [
   {
     projectId: 'editor-project-1',
@@ -75,20 +80,22 @@ const projectItems = [
 function renderProjectGalleryView(
   props: Partial<ComponentProps<typeof ProjectGalleryView>> = {},
 ) {
-  return render(
-    <ProjectGalleryView
-      onOpenProject={vi.fn()}
-      {...props}
-    />,
-  );
+  return render(<ProjectGalleryView onOpenProject={vi.fn()} {...props} />);
 }
 
 describe('ProjectGalleryView', () => {
+  beforeEach(() => {
+    readEditorProjectCoverCacheMock.mockResolvedValue(new Map());
+    URL.createObjectURL = vi.fn(() => 'blob:project-cover-cache');
+    URL.revokeObjectURL = vi.fn();
+  });
+
   afterEach(() => {
     listEditorProjectsMock.mockReset();
     createEditorProjectMock.mockReset();
     renameEditorProjectMock.mockReset();
     deleteEditorProjectMock.mockReset();
+    readEditorProjectCoverCacheMock.mockReset();
   });
 
   it('opens a project from the gallery card', async () => {
@@ -99,7 +106,9 @@ describe('ProjectGalleryView', () => {
     renderProjectGalleryView({ onOpenProject });
 
     await screen.findByText('角色设定板');
-    await user.click(screen.getByRole('button', { name: '打开项目角色设定板' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目角色设定板' }),
+    );
 
     expect(onOpenProject).toHaveBeenCalledWith('editor-project-1');
   });
@@ -168,9 +177,7 @@ describe('ProjectGalleryView', () => {
 
     await screen.findByText('封面项目');
 
-    expect(
-      document.querySelector('.project-gallery__canvas-cover'),
-    ).toBeNull();
+    expect(document.querySelector('.project-gallery__canvas-cover')).toBeNull();
     expect(
       document
         .querySelector('.project-gallery__preview img')
@@ -178,6 +185,115 @@ describe('ProjectGalleryView', () => {
     ).toBe('data:image/png;base64,cover');
   });
 
+  it('falls back to a visible canvas layer image when no cover snapshot exists', async () => {
+    listEditorProjectsMock.mockResolvedValueOnce([
+      {
+        projectId: 'editor-project-layer-cover',
+        title: '图层封面项目',
+        viewport: { x: 0, y: 0, scale: 1 },
+        layers: [
+          {
+            layerId: 'layer-back',
+            resourceId: 'resource-back',
+            title: '背景图',
+            zIndex: 1,
+          },
+          {
+            layerId: 'layer-front',
+            resourceId: 'resource-front',
+            title: '前景图',
+            zIndex: 2,
+          },
+        ],
+        resources: [
+          {
+            resourceId: 'resource-front',
+            projectId: 'editor-project-layer-cover',
+            imageSrc: 'data:image/png;base64,front',
+            width: 160,
+            height: 120,
+            sourceType: 'uploaded',
+          },
+          {
+            resourceId: 'resource-back',
+            projectId: 'editor-project-layer-cover',
+            imageSrc: 'data:image/png;base64,back',
+            width: 300,
+            height: 180,
+            sourceType: 'uploaded',
+          },
+        ],
+        updatedAt: '2026-06-12T08:00:00.000Z',
+      },
+    ]);
+
+    renderProjectGalleryView();
+
+    await screen.findByText('图层封面项目');
+
+    expect(
+      document
+        .querySelector('.project-gallery__preview img')
+        ?.getAttribute('src'),
+    ).toBe('data:image/png;base64,front');
+  });
+
+  it('uses locally cached cover snapshots before falling back to canvas layers', async () => {
+    readEditorProjectCoverCacheMock.mockResolvedValueOnce(
+      new Map([
+        [
+          'editor-project-local-cover',
+          {
+            projectId: 'editor-project-local-cover',
+            blob: new Blob(['cover'], { type: 'image/png' }),
+            updatedAt: '2026-06-12T09:30:00.000Z',
+            cachedAt: Date.now(),
+          },
+        ],
+      ]),
+    );
+    listEditorProjectsMock.mockResolvedValueOnce([
+      {
+        projectId: 'editor-project-local-cover',
+        title: '本地封面项目',
+        viewport: { x: 0, y: 0, scale: 1 },
+        layers: [
+          {
+            layerId: 'layer-front',
+            resourceId: 'resource-front',
+            title: '前景图',
+            zIndex: 2,
+          },
+        ],
+        resources: [
+          {
+            resourceId: 'resource-front',
+            projectId: 'editor-project-local-cover',
+            imageSrc: 'data:image/png;base64,front',
+            width: 160,
+            height: 120,
+            sourceType: 'uploaded',
+          },
+        ],
+        updatedAt: '2026-06-12T08:00:00.000Z',
+      },
+    ]);
+
+    renderProjectGalleryView();
+
+    await screen.findByText('本地封面项目');
+    await waitFor(() => {
+      expect(
+        document
+          .querySelector('.project-gallery__preview img')
+          ?.getAttribute('src'),
+      ).toBe('blob:project-cover-cache');
+    });
+    expect(readEditorProjectCoverCacheMock).toHaveBeenCalledWith([
+      'editor-project-local-cover',
+    ]);
+  });
+
   it('opens the login modal when project list loading is unauthorized', async () => {
     const openLoginModal = vi.fn();
     listEditorProjectsMock.mockRejectedValueOnce(
@@ -190,9 +306,7 @@ describe('ProjectGalleryView', () => {
 
     render(
       <AuthUiContext.Provider value={createAuthValue({ openLoginModal })}>
-        <ProjectGalleryView
-          onOpenProject={vi.fn()}
-        />
+        <ProjectGalleryView onOpenProject={vi.fn()} />
       </AuthUiContext.Provider>,
     );
 
@@ -211,14 +325,14 @@ describe('ProjectGalleryView', () => {
 
     render(
       <AuthUiContext.Provider value={createAuthValue({ requireAuth })}>
-        <ProjectGalleryView
-          onOpenProject={onOpenProject}
-        />
+        <ProjectGalleryView onOpenProject={onOpenProject} />
       </AuthUiContext.Provider>,
     );
 
     await screen.findByText('角色设定板');
-    await user.click(screen.getByRole('button', { name: '打开项目角色设定板' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目角色设定板' }),
+    );
 
     expect(requireAuth).toHaveBeenCalledWith(expect.any(Function));
     expect(onOpenProject).not.toHaveBeenCalled();
@@ -248,7 +362,9 @@ describe('ProjectGalleryView', () => {
     renderProjectGalleryView();
 
     await screen.findByText('角色设定板');
-    await user.click(screen.getByRole('button', { name: '打开项目角色设定板菜单' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目角色设定板菜单' }),
+    );
     await user.click(screen.getByRole('menuitem', { name: /重命名/u }));
     await user.clear(screen.getByLabelText('项目名称'));
     await user.type(screen.getByLabelText('项目名称'), '新角色设定板');
@@ -260,7 +376,9 @@ describe('ProjectGalleryView', () => {
     );
     await screen.findByText('新角色设定板');
 
-    await user.click(screen.getByRole('button', { name: '打开项目场景草图菜单' }));
+    await user.click(
+      screen.getByRole('button', { name: '打开项目场景草图菜单' }),
+    );
     await user.click(screen.getByRole('menuitem', { name: /删除/u }));
 
     expect(deleteEditorProjectMock).toHaveBeenCalledWith('editor-project-2');
diff --git a/src/components/project/ProjectGalleryView.tsx b/src/components/project/ProjectGalleryView.tsx
index a90b750f6..03e2b92a4 100644
--- a/src/components/project/ProjectGalleryView.tsx
+++ b/src/components/project/ProjectGalleryView.tsx
@@ -7,7 +7,7 @@ import {
   Square,
   Trash2,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ApiClientError } from '../../services/apiClient';
 import {
@@ -17,6 +17,7 @@ import {
   listEditorProjects,
   renameEditorProject,
 } from '../../services/image-editor/editorProjectClient';
+import { readEditorProjectCoverCache } from '../../services/image-editor/editorProjectCoverCache';
 import { useAuthUi } from '../auth/AuthUiContext';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
@@ -30,7 +31,10 @@ import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
-import { resolveProjectCoverSnapshotResource } from './ProjectCanvasCover';
+import {
+  LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+  resolveProjectCoverResource,
+} from './ProjectCanvasCover';
 
 type ProjectGalleryViewProps = {
   onOpenProject: (projectId: string) => void;
@@ -41,6 +45,12 @@ type RenameDraft = {
   title: string;
 };
 
+type ProjectCoverObjectUrl = {
+  projectId: string;
+  url: string;
+  updatedAt: string;
+};
+
 function isUnauthorizedError(error: unknown) {
   return error instanceof ApiClientError && error.status === 401;
 }
@@ -58,9 +68,7 @@ function formatProjectUpdatedAt(value: string) {
   }).format(date);
 }
 
-export function ProjectGalleryView({
-  onOpenProject,
-}: ProjectGalleryViewProps) {
+export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
   const authUi = useAuthUi();
   const [projects, setProjects] = useState<EditorProjectSnapshot[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -72,19 +80,60 @@ export function ProjectGalleryView({
   const [selectedProjectIds, setSelectedProjectIds] = useState<Set<string>>(
     () => new Set(),
   );
+  const [localCoverObjectUrls, setLocalCoverObjectUrls] = useState<
+    ProjectCoverObjectUrl[]
+  >([]);
+  const localCoverObjectUrlsRef = useRef<ProjectCoverObjectUrl[]>([]);
   const [isSelectionMode, setIsSelectionMode] = useState(false);
   const selectedCount = selectedProjectIds.size;
   const allSelected =
     projects.length > 0 && selectedProjectIds.size === projects.length;
 
+  const localCoverUrlByProjectId = useMemo(
+    () =>
+      new Map(
+        localCoverObjectUrls.map((cover) => [cover.projectId, cover] as const),
+      ),
+    [localCoverObjectUrls],
+  );
+
+  const replaceLocalCoverObjectUrls = useCallback(
+    (nextCoverObjectUrls: ProjectCoverObjectUrl[]) => {
+      localCoverObjectUrlsRef.current.forEach((cover) =>
+        URL.revokeObjectURL(cover.url),
+      );
+      localCoverObjectUrlsRef.current = nextCoverObjectUrls;
+      setLocalCoverObjectUrls(nextCoverObjectUrls);
+    },
+    [],
+  );
+
   const refreshProjects = useCallback(() => {
     setIsLoading(true);
     setErrorMessage(null);
     listEditorProjects()
       .then((items) => {
         setProjects(items);
+        void readEditorProjectCoverCache(
+          items.map((project) => project.projectId),
+        )
+          .then((cachedCovers) => {
+            const nextCoverObjectUrls = [...cachedCovers.values()].map(
+              (cover) => ({
+                projectId: cover.projectId,
+                url: URL.createObjectURL(cover.blob),
+                updatedAt: cover.updatedAt,
+              }),
+            );
+            replaceLocalCoverObjectUrls(nextCoverObjectUrls);
+          })
+          .catch(() => {
+            replaceLocalCoverObjectUrls([]);
+          });
         setSelectedProjectIds((currentIds) => {
-          const availableIds = new Set(items.map((project) => project.projectId));
+          const availableIds = new Set(
+            items.map((project) => project.projectId),
+          );
           return new Set(
             [...currentIds].filter((projectId) => availableIds.has(projectId)),
           );
@@ -100,7 +149,16 @@ export function ProjectGalleryView({
         );
       })
       .finally(() => setIsLoading(false));
-  }, [authUi]);
+  }, [authUi, replaceLocalCoverObjectUrls]);
+
+  useEffect(() => {
+    return () => {
+      localCoverObjectUrlsRef.current.forEach((cover) =>
+        URL.revokeObjectURL(cover.url),
+      );
+      localCoverObjectUrlsRef.current = [];
+    };
+  }, []);
 
   useEffect(() => {
     refreshProjects();
@@ -138,34 +196,33 @@ export function ProjectGalleryView({
     });
   }, []);
 
-  const deleteProjects = useCallback(
-    (projectIds: string[]) => {
-      if (projectIds.length === 0) {
-        return;
-      }
-      setErrorMessage(null);
-      void Promise.all(projectIds.map((projectId) => deleteEditorProject(projectId)))
-        .then(() => {
-          setProjects((currentProjects) =>
-            currentProjects.filter(
-              (project) => !projectIds.includes(project.projectId),
-            ),
-          );
-          setSelectedProjectIds((currentIds) => {
-            const nextIds = new Set(currentIds);
-            projectIds.forEach((projectId) => nextIds.delete(projectId));
-            return nextIds;
-          });
-          setActiveMenuProjectId(null);
-        })
-        .catch((error: unknown) => {
-          setErrorMessage(
-            error instanceof Error ? error.message : '删除项目失败',
-          );
+  const deleteProjects = useCallback((projectIds: string[]) => {
+    if (projectIds.length === 0) {
+      return;
+    }
+    setErrorMessage(null);
+    void Promise.all(
+      projectIds.map((projectId) => deleteEditorProject(projectId)),
+    )
+      .then(() => {
+        setProjects((currentProjects) =>
+          currentProjects.filter(
+            (project) => !projectIds.includes(project.projectId),
+          ),
+        );
+        setSelectedProjectIds((currentIds) => {
+          const nextIds = new Set(currentIds);
+          projectIds.forEach((projectId) => nextIds.delete(projectId));
+          return nextIds;
         });
-    },
-    [],
-  );
+        setActiveMenuProjectId(null);
+      })
+      .catch((error: unknown) => {
+        setErrorMessage(
+          error instanceof Error ? error.message : '删除项目失败',
+        );
+      });
+  }, []);
 
   const submitRename = useCallback(() => {
     if (!renameDraft) {
@@ -197,7 +254,28 @@ export function ProjectGalleryView({
     () =>
       projects.map((project) => {
         const selected = selectedProjectIds.has(project.projectId);
-        const coverSnapshot = resolveProjectCoverSnapshotResource(project);
+        const localCover = localCoverUrlByProjectId.get(project.projectId);
+        const projectWithLocalCover = localCover
+          ? {
+              ...project,
+              resources: [
+                ...project.resources,
+                {
+                  resourceId: `local-cover-cache:${project.projectId}`,
+                  projectId: project.projectId,
+                  imageSrc: localCover.url,
+                  width: 320,
+                  height: 240,
+                  sourceType: 'uploaded' as const,
+                  assetKind: LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
+                  updatedAt: localCover.updatedAt,
+                },
+              ],
+            }
+          : project;
+        const coverResource = resolveProjectCoverResource(
+          projectWithLocalCover,
+        );
         return (
           <article
             key={project.projectId}
@@ -225,16 +303,16 @@ export function ProjectGalleryView({
               aria-label={`打开项目${project.title}`}
             >
               <PlatformMediaFrame
-                src={coverSnapshot?.imageSrc ?? null}
-                objectKey={coverSnapshot?.objectKey ?? null}
+                src={coverResource?.imageSrc ?? null}
+                objectKey={coverResource?.objectKey ?? null}
                 alt=""
                 fallbackLabel="项目"
                 aspect="standard"
                 surface="bright"
                 refreshKey={
-                  coverSnapshot?.updatedAt ??
-                  coverSnapshot?.createdAt ??
-                  coverSnapshot?.resourceId ??
+                  coverResource?.updatedAt ??
+                  coverResource?.createdAt ??
+                  coverResource?.resourceId ??
                   null
                 }
                 className="project-gallery__preview"
@@ -297,6 +375,7 @@ export function ProjectGalleryView({
       authUi,
       deleteProjects,
       isSelectionMode,
+      localCoverUrlByProjectId,
       onOpenProject,
       projects,
       selectedProjectIds,
@@ -372,7 +451,10 @@ export function ProjectGalleryView({
             >
               取消
             </PlatformActionButton>
-            <PlatformActionButton type="submit" form="project-gallery-rename-form">
+            <PlatformActionButton
+              type="submit"
+              form="project-gallery-rename-form"
+            >
               保存
             </PlatformActionButton>
           </>
@@ -433,7 +515,11 @@ export function ProjectGalleryView({
             <Trash2 className="h-4 w-4" />
             删除
           </PlatformActionButton>
-          <PlatformActionButton tone="secondary" size="sm" onClick={closeSelectionMode}>
+          <PlatformActionButton
+            tone="secondary"
+            size="sm"
+            onClick={closeSelectionMode}
+          >
             取消
           </PlatformActionButton>
         </PlatformBatchActionToolbar>
diff --git a/src/components/square-hole-result/SquareHoleResultView.tsx b/src/components/square-hole-result/SquareHoleResultView.tsx
index b91e3eb20..0178b4999 100644
--- a/src/components/square-hole-result/SquareHoleResultView.tsx
+++ b/src/components/square-hole-result/SquareHoleResultView.tsx
@@ -9,13 +9,7 @@ import {
   Send,
   Trash2,
 } from 'lucide-react';
-import {
-  type ChangeEvent,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { type ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { SquareHoleResultDraft } from '../../../packages/shared/src/contracts/squareHoleAgent';
 import type {
@@ -24,6 +18,11 @@ import type {
   SquareHoleShapeOption,
   SquareHoleWorkProfile,
 } from '../../../packages/shared/src/contracts/squareHoleWorks';
+import {
+  canUseNativeHostCapability,
+  type HostFileImportImageResult,
+  importHostImageFile,
+} from '../../services/host-bridge/hostBridge';
 import {
   publishSquareHoleWork,
   regenerateSquareHoleWorkImage,
@@ -32,14 +31,9 @@ import {
   type SquareHoleImageAssetKind,
   updateSquareHoleWork,
 } from '../../services/square-hole-works';
-import {
-  canUseNativeHostCapability,
-  type HostFileImportImageResult,
-  importHostImageFile,
-} from '../../services/host-bridge/hostBridge';
 import { PlatformActionButton } from '../common/PlatformActionButton';
-import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
 import { PlatformAssetPickerGrid } from '../common/PlatformAssetPickerCard';
+import { PlatformBackActionButton } from '../common/PlatformBackActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import { PlatformIconButton } from '../common/PlatformIconButton';
 import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
@@ -47,11 +41,11 @@ import { PlatformPillBadge } from '../common/PlatformPillBadge';
 import { PlatformStatGrid } from '../common/PlatformStatGrid';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformSubpanel } from '../common/PlatformSubpanel';
-import { PlatformToolModalShell } from '../common/PlatformToolModalShell';
 import {
   PlatformSelectField,
   PlatformTextField,
 } from '../common/PlatformTextField';
+import { PlatformToolModalShell } from '../common/PlatformToolModalShell';
 
 type SquareHoleResultViewProps = {
   profile: SquareHoleWorkProfile;
@@ -792,6 +786,9 @@ export function SquareHoleResultView({
       setEditState((current) => applyImageSlotSrc(current, slot, dataUrl));
       setLocalError(null);
     } catch (caughtError) {
+      if (slot.kind === 'background') {
+        return;
+      }
       setLocalError(
         caughtError instanceof Error ? caughtError.message : '图片读取失败。',
       );
@@ -823,6 +820,9 @@ export function SquareHoleResultView({
       );
       setLocalError(null);
     } catch (caughtError) {
+      if (slot.kind === 'background') {
+        return;
+      }
       setLocalError(
         caughtError instanceof Error ? caughtError.message : '图片读取失败。',
       );
diff --git a/src/games/bark-battle/ui/__tests__/BarkBattleHud.test.tsx b/src/games/bark-battle/ui/__tests__/BarkBattleHud.test.tsx
index bd51e5fe6..0d1f35cd0 100644
--- a/src/games/bark-battle/ui/__tests__/BarkBattleHud.test.tsx
+++ b/src/games/bark-battle/ui/__tests__/BarkBattleHud.test.tsx
@@ -17,7 +17,9 @@ vi.mock('../../../../components/ResolvedAssetImage', () => ({
   }) => <img src={src ?? ''} alt={alt ?? ''} {...props} />,
 }));
 
-function buildSnapshot(overrides: Partial<BarkBattleSnapshot> = {}): BarkBattleSnapshot {
+function buildSnapshot(
+  overrides: Partial<BarkBattleSnapshot> = {},
+): BarkBattleSnapshot {
   return {
     phase: 'playing',
     uiState: 'playing',
@@ -38,32 +40,62 @@ function buildSnapshot(overrides: Partial<BarkBattleSnapshot> = {}): BarkBattleS
 
 describe('BarkBattleHud', () => {
   it('playing 阶段展示竖屏核心元素、倒计时和双方狗狗朝向', () => {
-    render(<BarkBattleHud snapshot={buildSnapshot()} onMockBark={() => {}} onMockQuiet={() => {}} />);
+    render(
+      <BarkBattleHud
+        snapshot={buildSnapshot()}
+        onMockBark={() => {}}
+        onMockQuiet={() => {}}
+      />,
+    );
 
     expect(screen.getByText('12.0s')).toBeTruthy();
-    expect(screen.getByLabelText('玩家狗狗背对屏幕')).toBeTruthy();
-    expect(screen.getByLabelText('对手狗狗面向屏幕')).toBeTruthy();
-    expect(screen.getByLabelText('声浪能量条').getAttribute('aria-valuenow')).toBe('40');
+    expect(screen.getByLabelText(/玩家.*背对屏幕/u)).toBeTruthy();
+    expect(screen.getByLabelText(/对手.*面向屏幕/u)).toBeTruthy();
+    expect(
+      screen
+        .getByRole('meter', { name: '声浪能量条' })
+        .getAttribute('aria-valuenow'),
+    ).toBe('40');
     const arenaText = screen.getByLabelText('竖屏声浪竞技场').textContent ?? '';
-    expect(arenaText.indexOf('对手 · 1')).toBeLessThan(arenaText.indexOf('你 · 3'));
+    expect(arenaText.indexOf('对手 · 1')).toBeLessThan(
+      arenaText.indexOf('你 · 3'),
+    );
   });
 
   it('energy 正负值会改变玩家侧和对手侧占比', () => {
-    const { rerender } = render(<BarkBattleHud snapshot={buildSnapshot({ energy: 60 })} />);
-    expect(screen.getByTestId('player-energy-fill').getAttribute('style')).toContain('width: 80%');
+    const { rerender } = render(
+      <BarkBattleHud snapshot={buildSnapshot({ energy: 60 })} />,
+    );
+    expect(
+      screen.getByTestId('player-energy-fill').getAttribute('style'),
+    ).toContain('width: 80%');
 
     rerender(<BarkBattleHud snapshot={buildSnapshot({ energy: -60 })} />);
-    expect(screen.getByTestId('opponent-energy-fill').getAttribute('style')).toContain('width: 80%');
+    expect(
+      screen.getByTestId('opponent-energy-fill').getAttribute('style'),
+    ).toContain('width: 80%');
   });
 
   it('unsupported 不展示开始声控按钮，permission-denied 展示重试授权入口', () => {
     const { rerender } = render(
-      <BarkBattleHud snapshot={buildSnapshot({ phase: 'unavailable', errorReason: 'unsupported' })} onStartMicrophone={() => {}} />,
+      <BarkBattleHud
+        snapshot={buildSnapshot({
+          phase: 'unavailable',
+          errorReason: 'unsupported',
+        })}
+        onStartMicrophone={() => {}}
+      />,
     );
     expect(screen.queryByRole('button', { name: '开始声控' })).toBeNull();
 
     rerender(
-      <BarkBattleHud snapshot={buildSnapshot({ phase: 'unavailable', errorReason: 'permission-denied' })} onStartMicrophone={() => {}} />,
+      <BarkBattleHud
+        snapshot={buildSnapshot({
+          phase: 'unavailable',
+          errorReason: 'permission-denied',
+        })}
+        onStartMicrophone={() => {}}
+      />,
     );
     expect(screen.getByRole('button', { name: '重新授权' })).toBeTruthy();
   });
@@ -78,8 +110,11 @@ describe('BarkBattleHud', () => {
       />,
     );
 
-    expect(document.querySelector('img[src="/generated-bark-battle/player.png"]')).toBeTruthy();
-    expect(document.querySelector('img[src="https://example.test/opponent.png"]')).toBeTruthy();
-    expect(document.querySelector('img[src="/generated-bark-battle/ui.png"]')).toBeTruthy();
+    const player = screen.getByLabelText(/玩家.*背对屏幕/u);
+    const opponent = screen.getByLabelText(/对手.*面向屏幕/u);
+    expect(player.textContent).toContain('你 · 3');
+    expect(player.textContent).not.toContain('🐕');
+    expect(opponent.textContent).toContain('对手 · 1');
+    expect(opponent.textContent).not.toContain('🐶');
   });
 });
diff --git a/src/index.css b/src/index.css
index 7cef72c05..07d04c42c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3771,6 +3771,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .creation-landing__asset-waterfall {
+  width: 100%;
+  min-width: 0;
   column-count: 3;
   column-gap: 0.92rem;
 }
@@ -4743,6 +4745,15 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   color: #f8fafc;
 }
 
+.image-canvas-editor__asset-video-preview {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 0.35rem;
+  background: #0f172a;
+  object-fit: cover;
+}
+
 .image-canvas-editor__media-preview {
   position: relative;
   isolation: isolate;
@@ -5196,6 +5207,81 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   mix-blend-mode: multiply;
 }
 
+.image-canvas-editor__account-chip {
+  display: inline-flex;
+  min-width: 0;
+  height: 2.04rem;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 0.42rem;
+  border: 1px solid rgba(214, 184, 159, 0.72);
+  border-radius: 999px;
+  background: rgba(255, 250, 244, 0.82);
+  padding: 0 0.68rem 0 0.24rem;
+  color: #4f2f23;
+  line-height: 1;
+  transition:
+    transform 160ms ease,
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.image-canvas-editor__account-chip:hover,
+.image-canvas-editor__account-chip:focus-visible {
+  transform: translateY(-1px);
+  border-color: rgba(214, 184, 159, 0.92);
+  background: rgba(255, 250, 244, 0.96);
+  box-shadow: 0 0.28rem 0.78rem rgba(112, 62, 32, 0.12);
+}
+
+.image-canvas-editor__account-avatar {
+  display: inline-grid;
+  width: 1.66rem;
+  height: 1.66rem;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--platform-profile-avatar-fill);
+  color: #ffffff;
+  font-size: 0.76rem;
+  font-weight: 900;
+  box-shadow: var(--platform-profile-avatar-shadow);
+}
+
+.image-canvas-editor__account-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-canvas-editor__account-meta {
+  display: grid;
+  min-width: 0;
+  max-width: 8.4rem;
+  gap: 0.12rem;
+  text-align: left;
+}
+
+.image-canvas-editor__account-meta span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__account-meta span:first-child {
+  color: #4f2f23;
+  font-size: 0.76rem;
+  font-weight: 880;
+}
+
+.image-canvas-editor__account-meta span:last-child {
+  color: #8a6d5c;
+  font-size: 0.66rem;
+  font-weight: 760;
+}
+
 .image-canvas-editor__zoom-menu-wrap {
   margin-left: auto;
   position: relative;
@@ -5801,7 +5887,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   }
 }
 
-.image-canvas-editor__generation-frame--icon {
+.image-canvas-editor__generation-frame--icon:not(
+    .image-canvas-editor__generation-frame--generating
+  ) {
   background: linear-gradient(
       135deg,
       rgba(255, 255, 255, 0.72),
@@ -5814,8 +5902,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   border-color: #10b981;
 }
 
-.image-canvas-editor__generation-frame--icon::before,
-.image-canvas-editor__generation-frame--icon::after {
+.image-canvas-editor__generation-frame--icon:not(
+    .image-canvas-editor__generation-frame--generating
+  )::before,
+.image-canvas-editor__generation-frame--icon:not(
+    .image-canvas-editor__generation-frame--generating
+  )::after {
   content: '';
   position: absolute;
   width: 42%;
@@ -5826,15 +5918,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
 }
 
-.image-canvas-editor__generation-frame--icon::before {
+.image-canvas-editor__generation-frame--icon:not(
+    .image-canvas-editor__generation-frame--generating
+  )::before {
   transform: translate(-20%, -8%) rotate(-8deg);
 }
 
-.image-canvas-editor__generation-frame--icon::after {
+.image-canvas-editor__generation-frame--icon:not(
+    .image-canvas-editor__generation-frame--generating
+  )::after {
   transform: translate(18%, 10%) rotate(7deg);
 }
 
-.image-canvas-editor__generation-frame--icon
+.image-canvas-editor__generation-frame--icon:not(
+    .image-canvas-editor__generation-frame--generating
+  )
   .image-canvas-editor__generation-frame-icon {
   position: relative;
   z-index: 1;
@@ -6149,6 +6247,251 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: rgba(255, 255, 255, 0.2);
 }
 
+.image-canvas-editor__task-sidebar {
+  position: absolute;
+  top: 0.85rem;
+  right: 0.85rem;
+  z-index: 20;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.45rem;
+  pointer-events: auto;
+}
+
+.image-canvas-editor__task-sidebar--closed {
+  width: auto;
+}
+
+.image-canvas-editor__task-sidebar-toggle {
+  flex: 0 0 auto;
+  border-color: var(--image-canvas-brand-border-soft);
+  background: #ffffff;
+  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
+}
+
+.image-canvas-editor__task-sidebar-panel {
+  width: min(20rem, calc(100vw - 5.6rem));
+  max-height: min(24rem, calc(100vh - 9rem));
+  overflow: hidden;
+  overscroll-behavior: contain;
+  border: 1px solid var(--image-canvas-brand-border-soft);
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
+  backdrop-filter: blur(10px);
+}
+
+.image-canvas-editor__task-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0.68rem 0.78rem;
+  color: #0f172a;
+}
+
+.image-canvas-editor__task-sidebar-header strong {
+  font-size: 0.8rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__task-sidebar-header span {
+  display: inline-flex;
+  min-width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__task-sidebar-tabs {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.28rem;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0.38rem;
+}
+
+.image-canvas-editor__task-sidebar-tab {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  border: 0;
+  border-radius: 0.38rem;
+  background: transparent;
+  padding: 0.42rem 0.5rem;
+  color: #64748b;
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__task-sidebar-tab:hover {
+  background: #f8fafc;
+  color: #0f172a;
+}
+
+.image-canvas-editor__task-sidebar-tab--active {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.image-canvas-editor__task-sidebar-tab span {
+  display: inline-flex;
+  min-width: 1.05rem;
+  height: 1.05rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.75);
+  font-size: 0.62rem;
+}
+
+.image-canvas-editor__task-sidebar-list {
+  display: grid;
+  max-height: calc(min(24rem, calc(100vh - 9rem)) - 5.55rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0.35rem;
+}
+
+.image-canvas-editor__task-sidebar-empty {
+  padding: 1.15rem 0.75rem;
+  color: #94a3b8;
+  font-size: 0.74rem;
+  font-weight: 750;
+  text-align: center;
+}
+
+.image-canvas-editor__task-sidebar-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 0.55rem;
+  width: 100%;
+  border: 0;
+  border-radius: 0.42rem;
+  background: transparent;
+  padding: 0.55rem;
+  color: #334155;
+  text-align: left;
+}
+
+.image-canvas-editor__task-sidebar-item:disabled {
+  color: #334155;
+  cursor: default;
+  opacity: 1;
+}
+
+.image-canvas-editor__task-sidebar-item:not(:disabled):hover {
+  background: #f8fafc;
+}
+
+.image-canvas-editor__task-sidebar-item-icon {
+  display: inline-flex;
+  width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.image-canvas-editor__task-sidebar-item--running
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #ecfeff;
+  color: #0891b2;
+}
+
+.image-canvas-editor__task-sidebar-item--running
+  .image-canvas-editor__task-sidebar-item-icon
+  svg {
+  animation: image-canvas-task-sidebar-spin 0.9s linear infinite;
+  transform-origin: center;
+}
+
+@keyframes image-canvas-task-sidebar-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.image-canvas-editor__task-sidebar-item--failed
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.image-canvas-editor__task-sidebar-item--done
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.image-canvas-editor__task-sidebar-item-main {
+  display: grid;
+  min-width: 0;
+  gap: 0.16rem;
+}
+
+.image-canvas-editor__task-sidebar-item-title-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-width: 0;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.image-canvas-editor__task-sidebar-item-title {
+  overflow: hidden;
+  color: #0f172a;
+  font-size: 0.78rem;
+  font-weight: 850;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-detail {
+  overflow: hidden;
+  color: #64748b;
+  font-size: 0.7rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-progress {
+  overflow: hidden;
+  color: #334155;
+  font-size: 0.68rem;
+  font-weight: 750;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-time {
+  color: #64748b;
+  font-size: 0.68rem;
+  font-weight: 750;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-status {
+  color: #64748b;
+  font-size: 0.68rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
 .image-canvas-editor__panel-dock {
   position: absolute;
   left: 0.85rem;
@@ -7743,6 +8086,51 @@ button.image-canvas-editor__reference-chip:disabled {
   color: #a3acba;
 }
 
+.image-canvas-editor__context-submenu {
+  position: relative;
+}
+
+.image-canvas-editor__context-submenu-trigger {
+  justify-content: space-between !important;
+  gap: 0.85rem;
+}
+
+.image-canvas-editor__context-submenu-panel {
+  top: -0.32rem;
+  left: calc(100% + 0.42rem);
+  width: max-content;
+  min-width: 9.5rem;
+  overflow: visible;
+  padding: 0.32rem;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-0.12rem);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease,
+    visibility 120ms linear;
+  visibility: hidden;
+}
+
+.image-canvas-editor__context-submenu:hover
+  .image-canvas-editor__context-submenu-panel,
+.image-canvas-editor__context-submenu:focus-within
+  .image-canvas-editor__context-submenu-panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  visibility: visible;
+}
+
+.image-canvas-editor__context-submenu-panel::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -0.55rem;
+  width: 0.55rem;
+  content: '';
+}
+
 .image-canvas-editor__asset-context-menu {
   z-index: 42;
 }
@@ -8004,6 +8392,11 @@ button.image-canvas-editor__reference-chip:disabled {
 .image-canvas-editor__ui-extraction-model {
   grid-column: 2;
   justify-self: end;
+  width: min(15.5rem, 42vw);
+}
+
+.image-canvas-editor__ui-extraction-model .image-canvas-editor__option-cluster {
+  width: 100%;
 }
 
 .image-canvas-editor__ui-extraction-hit-area {
@@ -8373,6 +8766,9 @@ button.image-canvas-editor__reference-chip:disabled {
 
 .image-canvas-editor__metadata-body {
   padding: 0;
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 .image-canvas-editor__generate-dialog-body {
@@ -8693,6 +9089,23 @@ button.image-canvas-editor__reference-chip:disabled {
     height: 1.02rem;
   }
 
+  .image-canvas-editor__account-chip {
+    width: 1.94rem;
+    height: 1.94rem;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .image-canvas-editor__account-avatar {
+    width: 1.38rem;
+    height: 1.38rem;
+    font-size: 0.68rem;
+  }
+
+  .image-canvas-editor__account-meta {
+    display: none;
+  }
+
   .image-canvas-editor__floating-toolbar button,
   .image-canvas-editor__bottom-toolbar button,
   .image-canvas-editor__reset-button {
diff --git a/src/index.test.ts b/src/index.test.ts
index 742eb0b39..7dfab151b 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -31,6 +31,34 @@ function getCssBlock(source: string, selector: string) {
 }
 
 describe('index stylesheet unread dots', () => {
+  it('keeps icon generator decoration from overriding the shared generating animation', () => {
+    const css = readIndexCss();
+    const generatingBlock = getCssBlock(
+      css,
+      '.image-canvas-editor__generation-frame--generating',
+    );
+    const generatingScanBlock = getCssBlock(
+      css,
+      '.image-canvas-editor__generation-frame--generating::before',
+    );
+    const iconBlock = getCssBlock(
+      css,
+      '.image-canvas-editor__generation-frame--icon:not(\n    .image-canvas-editor__generation-frame--generating\n  )',
+    );
+    const iconDecorationBlock = getCssBlock(
+      css,
+      '.image-canvas-editor__generation-frame--icon:not(\n    .image-canvas-editor__generation-frame--generating\n  )::before,\n.image-canvas-editor__generation-frame--icon:not(\n    .image-canvas-editor__generation-frame--generating\n  )::after',
+    );
+
+    expect(generatingBlock).toContain('cursor: progress;');
+    expect(generatingScanBlock).toContain('animation: image-canvas-generation-scan');
+    expect(iconBlock).toContain('background: linear-gradient(');
+    expect(iconDecorationBlock).toContain('width: 42%;');
+    expect(css).not.toContain(
+      '.image-canvas-editor__generation-frame--icon::before,\n.image-canvas-editor__generation-frame--icon::after',
+    );
+  });
+
   it('keeps image canvas loading shimmer clipped inside media frames', () => {
     const css = readIndexCss();
     const loadingBlock = getCssBlock(
diff --git a/src/main.tsx b/src/main.tsx
index c730f9992..4a16f2c5a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,9 +6,13 @@ import {StrictMode, Suspense} from 'react';
 import {createRoot} from 'react-dom/client';
 
 import {FloatingFeedbackEntry} from './components/common/FloatingFeedbackEntry';
+import {getInitialPlatformDesktopLayout} from './components/platform-entry/platformEntryResponsive';
 import {stabilizeMobileViewportKeyboardFocus} from './mobileViewportKeyboardFocus';
 import {lockMobileViewportZoom} from './mobileViewportZoomLock';
-import {resolveAppRoute} from './routing/appRoutes';
+import {
+  resolveAppRoute,
+  shouldUseRecommendationRouteLoading,
+} from './routing/appRoutes';
 import {RouteImageReadyGate} from './routing/RouteImageReadyGate';
 import {RouteLoadingScreen} from './routing/RouteLoadingScreen';
 import {
@@ -39,6 +43,11 @@ function markWechatMiniProgramRuntime() {
 
 const root = window.__tavernRealmsRoot__ ??= createRoot(rootElement);
 const RouteComponent = route.Component;
+const routeElement = <RouteComponent {...(route.componentProps ?? {})} />;
+const shouldGateRouteImages = shouldUseRecommendationRouteLoading(
+  window.location.pathname,
+  getInitialPlatformDesktopLayout(),
+);
 
 lockMobileViewportZoom();
 stabilizeMobileViewportKeyboardFocus();
@@ -47,13 +56,26 @@ void refreshNativeAppHostRuntime();
 
 root.render(
   <StrictMode>
-    <Suspense fallback={<RouteLoadingScreen eyebrow={route.loadingEyebrow} text={route.loadingText} />}>
-      <RouteImageReadyGate
-        eyebrow={route.loadingEyebrow}
-        text={route.loadingText}
-      >
-        <RouteComponent {...(route.componentProps ?? {})} />
-      </RouteImageReadyGate>
+    <Suspense
+      fallback={
+        shouldGateRouteImages ? (
+          <RouteLoadingScreen
+            eyebrow={route.loadingEyebrow}
+            text={route.loadingText}
+          />
+        ) : null
+      }
+    >
+      {shouldGateRouteImages ? (
+        <RouteImageReadyGate
+          eyebrow={route.loadingEyebrow}
+          text={route.loadingText}
+        >
+          {routeElement}
+        </RouteImageReadyGate>
+      ) : (
+        routeElement
+      )}
     </Suspense>
     <FloatingFeedbackEntry />
   </StrictMode>,
diff --git a/src/routing/appPageRoutes.test.ts b/src/routing/appPageRoutes.test.ts
index c77578138..d08b2c784 100644
--- a/src/routing/appPageRoutes.test.ts
+++ b/src/routing/appPageRoutes.test.ts
@@ -5,9 +5,11 @@ import { describe, expect, it } from 'vitest';
 import {
   isAppHistoryState,
   pushAppHistoryPath,
+  readEditorCanvasProjectIdFromLocationSearch,
   replaceAppHistoryPath,
   resolvePathForSelectionStage,
   resolveSelectionStageFromPath,
+  shouldRedirectEditorCanvasWithoutProject,
 } from './appPageRoutes';
 
 describe('appPageRoutes', () => {
@@ -39,6 +41,27 @@ describe('appPageRoutes', () => {
     expect(window.location.search).toBe('?projectid=project-from-route-test');
   });
 
+  it('detects editor canvas routes that are missing project id', () => {
+    expect(readEditorCanvasProjectIdFromLocationSearch('?projectid=abc')).toBe(
+      'abc',
+    );
+    expect(shouldRedirectEditorCanvasWithoutProject('/editor/canvas', '')).toBe(
+      true,
+    );
+    expect(
+      shouldRedirectEditorCanvasWithoutProject('/EDITOR/CANVAS/', '?foo=bar'),
+    ).toBe(true);
+    expect(
+      shouldRedirectEditorCanvasWithoutProject(
+        '/editor/canvas',
+        '?projectid=project-from-route-test',
+      ),
+    ).toBe(false);
+    expect(shouldRedirectEditorCanvasWithoutProject('/creation', '')).toBe(
+      false,
+    );
+  });
+
   it('resolves the project route', () => {
     expect(resolveSelectionStageFromPath('/project')).toBe('project');
     expect(resolveSelectionStageFromPath('/PROJECT/')).toBe('project');
diff --git a/src/routing/appPageRoutes.ts b/src/routing/appPageRoutes.ts
index f1bfbe7a9..7b5186859 100644
--- a/src/routing/appPageRoutes.ts
+++ b/src/routing/appPageRoutes.ts
@@ -9,6 +9,7 @@ import {
 export type RuntimePageRoute = 'rpg-character-select' | 'rpg-adventure';
 
 export const PUBLIC_WORK_QUERY_PARAM = 'work';
+export const EDITOR_CANVAS_PROJECT_ID_QUERY_PARAM = 'projectid';
 
 const STAGE_ROUTE_ENTRIES = [
   ['platform', '/'],
@@ -122,6 +123,21 @@ export function readPublicWorkCodeFromLocationSearch(search: string) {
   return params.get(PUBLIC_WORK_QUERY_PARAM)?.trim() || null;
 }
 
+export function readEditorCanvasProjectIdFromLocationSearch(search: string) {
+  const params = new URLSearchParams(search);
+  return params.get(EDITOR_CANVAS_PROJECT_ID_QUERY_PARAM)?.trim() || null;
+}
+
+export function shouldRedirectEditorCanvasWithoutProject(
+  pathname: string,
+  search: string,
+) {
+  return (
+    normalizeAppPath(pathname) === APP_STAGE_ROUTES['image-editor'] &&
+    !readEditorCanvasProjectIdFromLocationSearch(search)
+  );
+}
+
 export function buildPublicWorkDetailPath(publicWorkCode: string) {
   return buildPublicWorkStagePath('work-detail', publicWorkCode);
 }
diff --git a/src/routing/appRoutes.test.ts b/src/routing/appRoutes.test.ts
index 05f3dd53f..8980eabed 100644
--- a/src/routing/appRoutes.test.ts
+++ b/src/routing/appRoutes.test.ts
@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { matchAppRoute } from './appRoutes';
+import { matchAppRoute, shouldUseRecommendationRouteLoading } from './appRoutes';
 
 afterEach(() => {
   vi.unstubAllEnvs();
@@ -89,3 +89,15 @@ describe('matchAppRoute', () => {
     });
   });
 });
+
+describe('shouldUseRecommendationRouteLoading', () => {
+  it('only enables the dark recommendation loading screen for mobile root route', () => {
+    expect(shouldUseRecommendationRouteLoading('/', false)).toBe(true);
+    expect(shouldUseRecommendationRouteLoading('/', true)).toBe(false);
+    expect(shouldUseRecommendationRouteLoading('/creation', false)).toBe(false);
+    expect(shouldUseRecommendationRouteLoading('/project', false)).toBe(false);
+    expect(shouldUseRecommendationRouteLoading('/editor/canvas', false)).toBe(
+      false,
+    );
+  });
+});
diff --git a/src/routing/appRoutes.tsx b/src/routing/appRoutes.tsx
index 27ffa541e..a253667db 100644
--- a/src/routing/appRoutes.tsx
+++ b/src/routing/appRoutes.tsx
@@ -54,6 +54,13 @@ function normalizeRoutePath(pathname: string) {
   return normalizeAppPath(pathname);
 }
 
+export function shouldUseRecommendationRouteLoading(
+  pathname: string,
+  isDesktopLayout: boolean,
+) {
+  return normalizeRoutePath(pathname) === '/' && !isDesktopLayout;
+}
+
 export function matchAppRoute(pathname: string): AppRouteMatch {
   const normalizedPath = normalizeRoutePath(pathname);
 
diff --git a/src/services/assetReadUrlService.test.ts b/src/services/assetReadUrlService.test.ts
index 8e557e15d..48a794928 100644
--- a/src/services/assetReadUrlService.test.ts
+++ b/src/services/assetReadUrlService.test.ts
@@ -496,15 +496,44 @@ describe('assetReadUrlService', () => {
     expect(window.dispatchEvent).not.toHaveBeenCalled();
   });
 
-  test('readAssetBytes reads generated resources through same-origin bytes endpoint', async () => {
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([104, 101, 108, 108, 111]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      }),
-    );
+  test('readAssetBytes reads generated resources through signed OSS url first', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey:
+                  'generated-match3d-assets/session/profile/items/match3d-item-1-item/image.png',
+                signedUrl: 'https://signed.example.com/match3d-item.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([104, 101, 108, 108, 111]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
 
     const response = await readAssetBytes(
       '/generated-match3d-assets/session/profile/items/match3d-item-1-item/image.png',
@@ -515,22 +544,53 @@ describe('assetReadUrlService', () => {
     expect(Array.from(bytes)).toEqual([104, 101, 108, 108, 111]);
     expect(response.headers.get('content-type')).toBe('image/png');
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
-      '/api/assets/read-bytes?',
+      '/api/assets/read-url?',
     );
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
       'legacyPublicPath=%2Fgenerated-match3d-assets%2Fsession%2Fprofile%2Fitems%2Fmatch3d-item-1-item%2Fimage.png',
     );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/match3d-item.png',
+    );
   });
 
-  test('readAssetBytes reads object-key resources through same-origin bytes endpoint', async () => {
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([1, 2, 3]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      }),
-    );
+  test('readAssetBytes reads object-key resources through signed OSS url first', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey: 'generated-editor-images/project/image.png',
+                signedUrl: 'https://signed.example.com/editor-image.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([1, 2, 3]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
 
     const response = await readAssetBytes('/generated-editor-images/image.png', {
       objectKey: 'generated-editor-images/project/image.png',
@@ -540,7 +600,7 @@ describe('assetReadUrlService', () => {
 
     expect(Array.from(bytes)).toEqual([1, 2, 3]);
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
-      '/api/assets/read-bytes?',
+      '/api/assets/read-url?',
     );
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
       'objectKey=generated-editor-images%2Fproject%2Fimage.png',
@@ -548,17 +608,49 @@ describe('assetReadUrlService', () => {
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).not.toContain(
       'legacyPublicPath=',
     );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/editor-image.png',
+    );
   });
 
-  test('readAssetBytes normalizes full OSS generated urls through bytes endpoint', async () => {
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([1, 2, 3]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'image/png',
-        },
-      }),
-    );
+  test('readAssetBytes normalizes full OSS generated urls through signed read url', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey:
+                  'generated-puzzle-assets/session/profile/covers/main.png',
+                signedUrl: 'https://signed.example.com/main.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([1, 2, 3]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
 
     const response = await readAssetBytes(
       'https://genarrative.oss-cn-shanghai.aliyuncs.com/generated-puzzle-assets/session/profile/covers/main.png?x-oss-signature=abc',
@@ -567,10 +659,70 @@ describe('assetReadUrlService', () => {
 
     expect(response.headers.get('content-type')).toBe('image/png');
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
-      '/api/assets/read-bytes?',
+      '/api/assets/read-url?',
     );
     expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
       'legacyPublicPath=%2Fgenerated-puzzle-assets%2Fsession%2Fprofile%2Fcovers%2Fmain.png',
     );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/main.png',
+    );
+  });
+
+  test('readAssetBytes falls back to same-origin bytes endpoint when OSS read fails', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            ok: true,
+            data: {
+              read: {
+                objectKey: 'generated-editor-images/project/image.png',
+                signedUrl: 'https://signed.example.com/editor-image.png',
+                expiresAt: '2099-01-01T00:10:00Z',
+              },
+            },
+            error: null,
+            meta: {
+              apiVersion: '2026-06-16',
+              routeVersion: '2026-06-16',
+              latencyMs: 1,
+              timestamp: '2099-01-01T00:00:00Z',
+            },
+          }),
+          {
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(new Response('', { status: 403 }))
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([9, 8, 7]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'image/png',
+          },
+        }),
+      );
+
+    const response = await readAssetBytes('/generated-editor-images/image.png', {
+      objectKey: 'generated-editor-images/project/image.png',
+      expireSeconds: 300,
+    });
+    const bytes = new Uint8Array(await response.arrayBuffer());
+
+    expect(Array.from(bytes)).toEqual([9, 8, 7]);
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
+      '/api/assets/read-url?',
+    );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://signed.example.com/editor-image.png',
+    );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[2]?.[0])).toContain(
+      '/api/assets/read-bytes?',
+    );
   });
 });
diff --git a/src/services/assetReadUrlService.ts b/src/services/assetReadUrlService.ts
index 839baafb1..85feb9380 100644
--- a/src/services/assetReadUrlService.ts
+++ b/src/services/assetReadUrlService.ts
@@ -548,17 +548,41 @@ export async function readAssetBytes(
     return response;
   }
 
-  // 中文注释：这里要拿图片字节转 Data URL，不能直接 fetch OSS 签名 URL，否则浏览器会受 bucket CORS 限制。
-  const searchParams = buildAssetReadSearchParams({
+  const readRequest = {
     objectKey,
     legacyPublicPath: objectKey ? undefined : legacyPath,
     expireSeconds: options.expireSeconds,
+  };
+  try {
+    const signedUrl = await getSignedAssetReadUrl(readRequest, options.signal);
+    const response = await fetch(signedUrl, { signal: options.signal });
+    if (response.ok) {
+      return response;
+    }
+  } catch {
+    if (options.signal?.aborted) {
+      throw createSignedReadUrlAbortError();
+    }
+    // 中文注释：浏览器直读 OSS 失败时再走同源字节代理兜底。
+  }
+
+  return readAssetBytesViaFallbackApi(readRequest, options.signal);
+}
+
+async function readAssetBytesViaFallbackApi(
+  request: AssetReadUrlRequest,
+  signal?: AbortSignal,
+) {
+  const searchParams = buildAssetReadSearchParams({
+    objectKey: request.objectKey,
+    legacyPublicPath: request.legacyPublicPath,
+    expireSeconds: request.expireSeconds,
   });
   const response = await fetchWithApiAuth(
     `${ASSET_READ_BYTES_API_PATH}?${searchParams.toString()}`,
     {
       method: 'GET',
-      signal: options.signal,
+      signal,
     },
     {
       ...ASSET_READ_URL_BACKGROUND_OPTIONS,
diff --git a/src/services/external-generation/externalGenerationClient.ts b/src/services/external-generation/externalGenerationClient.ts
index 8a52cff6a..e9cacbcec 100644
--- a/src/services/external-generation/externalGenerationClient.ts
+++ b/src/services/external-generation/externalGenerationClient.ts
@@ -1,4 +1,5 @@
 import type {
+  ExternalGenerationJobStatus,
   ExternalGenerationJobStatusResponse,
   ExternalGenerationQueueOverviewResponse,
   ExternalGenerationTaskAcknowledgeRequest,
@@ -50,6 +51,7 @@ export async function listExternalGenerationTasks(
   options: {
     limit?: number;
     includeAcknowledgedTerminal?: boolean;
+    statuses?: ExternalGenerationJobStatus[];
     signal?: AbortSignal;
   } = {},
 ) {
@@ -63,6 +65,9 @@ export async function listExternalGenerationTasks(
       options.includeAcknowledgedTerminal ? 'true' : 'false',
     );
   }
+  if (options.statuses?.length) {
+    params.set('statuses', options.statuses.join(','));
+  }
   const query = params.toString();
   return requestJson<ExternalGenerationTaskListResponse>(
     `${EXTERNAL_GENERATION_API_BASE}/jobs${query ? `?${query}` : ''}`,
diff --git a/src/services/image-editor/editorProjectClient.test.ts b/src/services/image-editor/editorProjectClient.test.ts
index 75e00ed44..66d357af0 100644
--- a/src/services/image-editor/editorProjectClient.test.ts
+++ b/src/services/image-editor/editorProjectClient.test.ts
@@ -221,6 +221,8 @@ describe('editorProjectClient', () => {
           resourceId: 'resource-public-1',
           projectId: 'editor-project-1',
           ownerUserId: 'user-public-author',
+          authorDisplayName: '公开作者',
+          authorPublicUserCode: 'SY-00000042',
           label: '公开角色素材',
           imageSrc: '/generated-editor-assets/public.png',
           width: 512,
@@ -236,6 +238,8 @@ describe('editorProjectClient', () => {
     expect(resources).toHaveLength(1);
     expect(resources[0]?.resourceId).toBe('resource-public-1');
     expect(resources[0]?.ownerUserId).toBe('user-public-author');
+    expect(resources[0]?.authorDisplayName).toBe('公开作者');
+    expect(resources[0]?.authorPublicUserCode).toBe('SY-00000042');
     expect(requestJsonMock).toHaveBeenCalledWith(
       '/api/editor/showcase/resources',
       { method: 'GET' },
@@ -780,14 +784,7 @@ describe('editorProjectClient', () => {
       spritesheetImageSrc: 'data:image/png;base64,sheet',
       spritesheetWidth: 512,
       spritesheetHeight: 512,
-      iconImageSrcs: [
-        {
-          name: '返回按钮',
-          imageSrc: 'data:image/png;base64,back',
-          width: 96,
-          height: 96,
-        },
-      ],
+      iconImageSrcs: [],
       prompt: '图标素材 prompt',
       actualPrompt: '图标素材 prompt',
       model: 'gemini-3.1-flash-image-preview',
@@ -797,6 +794,7 @@ describe('editorProjectClient', () => {
 
     const result = await generateEditorIconSpritesheet({
       referenceImageSrc: 'data:image/png;base64,spec',
+      referenceImageSrcs: ['data:image/png;base64,icon-ref'],
       iconDescriptions: ['返回按钮', '设置按钮'],
     });
 
@@ -808,6 +806,7 @@ describe('editorProjectClient', () => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           referenceImageSrc: 'data:image/png;base64,spec',
+          referenceImageSrcs: ['data:image/png;base64,icon-ref'],
           iconDescriptions: ['返回按钮', '设置按钮'],
           model: 'gemini-3.1-flash-image-preview',
         }),
@@ -887,8 +886,10 @@ describe('editorProjectClient', () => {
           height: 128,
         },
       ],
-      prompt: '仅提取被红色框框选的素材并整理成spritesheet',
-      actualPrompt: '仅提取被红色框框选的素材并整理成spritesheet',
+      prompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
+      actualPrompt:
+        '仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。',
       model: 'gpt-image-2',
       provider: 'VectorEngine',
       taskId: 'ui-asset-extraction-1',
@@ -896,6 +897,8 @@ describe('editorProjectClient', () => {
 
     const result = await extractEditorUiDesignAssets({
       sourceImageSrc: 'data:image/png;base64,ui-design',
+      model: 'gpt-image-2',
+      referenceImageSrcs: ['data:image/png;base64,ui-ref'],
       projectId: 'editor-project-1',
       assetFolderId: 'project',
       spritesheetLabel: '战斗UI设计图 素材图集',
@@ -915,6 +918,8 @@ describe('editorProjectClient', () => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           sourceImageSrc: 'data:image/png;base64,ui-design',
+          model: 'gpt-image-2',
+          referenceImageSrcs: ['data:image/png;base64,ui-ref'],
           projectId: 'editor-project-1',
           generationInputs: {
             fields: [{ title: '来源', value: '战斗UI设计图' }],
@@ -1092,6 +1097,18 @@ describe('editorProjectClient', () => {
       taskId: 'video-task-1',
       durationSeconds: 5,
       resolution: '480p',
+      thumbnailSrc: '/generated-editor-videos/video-task-1/cover.png',
+      asset: {
+        assetId: 'asset-video-1',
+        folderId: 'user-1:asset-folder:project',
+        label: '生成视频 1',
+        imageSrc: '/generated-editor-videos/video-task-1/preview.mp4',
+        thumbnailSrc: '/generated-editor-videos/video-task-1/cover.png',
+        width: 1280,
+        height: 720,
+        sourceType: 'generated',
+        assetKind: 'video',
+      },
     });
 
     const result = await generateEditorVideo({
@@ -1102,9 +1119,18 @@ describe('editorProjectClient', () => {
       resolution: '480p',
       mode: 'std',
       sound: 'off',
+      assetFolderId: 'project',
+      assetLabel: '生成视频 1',
     });
 
     expect(result.taskId).toBe('video-task-1');
+    expect(result.thumbnailSrc).toBe(
+      '/generated-editor-videos/video-task-1/cover.png',
+    );
+    expect(result.asset?.assetId).toBe('asset-video-1');
+    expect(result.asset?.thumbnailSrc).toBe(
+      '/generated-editor-videos/video-task-1/cover.png',
+    );
     expect(requestJsonMock).toHaveBeenCalledWith(
       '/api/editor/videos/generations',
       expect.objectContaining({
@@ -1119,6 +1145,8 @@ describe('editorProjectClient', () => {
           mode: 'std',
           sound: 'off',
           webSearchEnabled: true,
+          assetFolderId: 'project',
+          assetLabel: '生成视频 1',
         }),
       }),
       '生成视频失败',
@@ -1319,6 +1347,7 @@ describe('editorProjectClient', () => {
       sourceImageSrc: 'data:image/png;base64,source',
       size: '1024x1024',
       model: 'gpt-image-2',
+      referenceImageSrcs: ['data:image/png;base64,style'],
       projectId: 'editor-project-1',
       assetKind: 'character',
       assetFolderId: 'project',
@@ -1341,6 +1370,7 @@ describe('editorProjectClient', () => {
           sourceImageSrc: 'data:image/png;base64,source',
           size: '1024x1024',
           model: 'gpt-image-2',
+          referenceImageSrcs: ['data:image/png;base64,style'],
           projectId: 'editor-project-1',
           assetKind: 'character',
           generationInputs: {
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index d3aa441b4..935bec677 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -8,6 +8,7 @@ const EDITOR_SHOWCASE_RESOURCE_API = '/api/editor/showcase/resources';
 const EDITOR_PROJECT_RESOURCE_API_BASE = '/api/editor/project-resources';
 const EDITOR_IMAGE_GENERATION_API = '/api/editor/images/generations';
 const EDITOR_IMAGE_EDIT_API = '/api/editor/images/edits';
+const EDITOR_BACKGROUND_REMOVAL_API = '/api/editor/images/background-removals';
 const EDITOR_ICON_SPRITESHEET_GENERATION_API =
   '/api/editor/icon-spritesheets/generations';
 const EDITOR_UI_DESIGN_ASSET_EXTRACTION_API =
@@ -60,6 +61,8 @@ export type EditorProjectResourceSnapshot = {
   resourceId: string;
   projectId: string;
   ownerUserId?: string | null;
+  authorDisplayName?: string | null;
+  authorPublicUserCode?: string | null;
   imageSrc: string;
   objectKey?: string | null;
   assetObjectId?: string | null;
@@ -95,6 +98,7 @@ export type EditorAssetSnapshot = {
   folderId: string;
   label: string;
   imageSrc: string;
+  thumbnailSrc?: string | null;
   objectKey?: string | null;
   assetObjectId?: string | null;
   width: number;
@@ -156,6 +160,7 @@ export type EditorCanvasGenerationCompletionInput = {
 
 export type EditorIconSpritesheetGenerationInput = {
   referenceImageSrc: string;
+  referenceImageSrcs?: string[];
   iconDescriptions: string[];
   model?: string;
   aspectRatio?: string;
@@ -168,6 +173,8 @@ export type EditorIconSpritesheetGenerationInput = {
 
 export type EditorUiDesignAssetExtractionInput = {
   sourceImageSrc: string;
+  model?: string;
+  referenceImageSrcs?: string[];
   aspectRatio?: string;
   imageSize?: string;
   projectId?: string | null;
@@ -182,6 +189,7 @@ export type EditorImageEditInput = {
   sourceImageSrc: string;
   size?: string;
   model?: string;
+  referenceImageSrcs?: string[];
   projectId?: string | null;
   assetKind?: string | null;
   generationInputs?: EditorAssetGenerationInputs | null;
@@ -191,6 +199,18 @@ export type EditorImageEditInput = {
   canvasCompletion?: EditorCanvasGenerationCompletionInput | null;
 };
 
+export type EditorBackgroundRemovalInput = {
+  sourceImageSrc: string;
+  projectId?: string | null;
+  targetLayerId?: string | null;
+  assetKind?: string | null;
+  generationInputs?: EditorAssetGenerationInputs | null;
+  assetFolderId?: string | null;
+  assetLabel?: string | null;
+  sourceResourceId?: string | null;
+  taskId?: string | null;
+};
+
 export type EditorImageGenerationResult = {
   imageSrc: string;
   objectKey?: string | null;
@@ -209,6 +229,22 @@ export type EditorImageGenerationResult = {
   queueState?: ExternalGenerationJobStatusRecord | null;
 };
 
+export type EditorBackgroundRemovalResult = {
+  imageSrc: string;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
+  width: number;
+  height: number;
+  sourceType?: 'generated';
+  taskId?: string | null;
+  elapsedMs?: number;
+  provider?: string;
+  resource?: EditorProjectResourceSnapshot | null;
+  asset?: EditorAssetSnapshot | null;
+  project?: EditorProjectSnapshot | null;
+  queueState?: ExternalGenerationJobStatusRecord | null;
+};
+
 export type EditorIconSpritesheetIconResult = {
   name: string;
   imageSrc: string;
@@ -324,10 +360,13 @@ export type EditorVideoGenerationInput = {
   generationInputs?: EditorAssetGenerationInputs | null;
   sourceResourceId?: string | null;
   assetKind?: string | null;
+  assetFolderId?: string | null;
+  assetLabel?: string | null;
 };
 
 export type EditorVideoGenerationResult = {
   videoSrc: string;
+  thumbnailSrc?: string | null;
   objectKey?: string | null;
   assetObjectId?: string | null;
   width: number;
@@ -338,7 +377,10 @@ export type EditorVideoGenerationResult = {
   model: string;
   provider: string;
   taskId: string;
+  durationSeconds: number;
   priceMudPoints?: number;
+  resource?: EditorProjectResourceSnapshot | null;
+  asset?: EditorAssetSnapshot | null;
   project?: EditorProjectSnapshot | null;
   queueState?: ExternalGenerationJobStatusRecord | null;
 };
@@ -503,6 +545,7 @@ type EditorAssetResponse = {
 };
 
 type EditorImageGenerationResponse = EditorImageGenerationResult;
+type EditorBackgroundRemovalResponse = EditorBackgroundRemovalResult;
 type EditorIconSpritesheetGenerationResponse =
   EditorIconSpritesheetGenerationResult;
 type EditorVideoGenerationResponse = EditorVideoGenerationResult;
@@ -762,6 +805,9 @@ export async function generateEditorIconSpritesheet(
     EDITOR_ICON_SPRITESHEET_GENERATION_API,
     jsonRequest('POST', {
       referenceImageSrc: input.referenceImageSrc,
+      ...(input.referenceImageSrcs?.length
+        ? { referenceImageSrcs: input.referenceImageSrcs }
+        : {}),
       iconDescriptions: input.iconDescriptions,
       model: input.model?.trim() || EDITOR_IMAGE_MODEL_NANOBANANA2,
       ...(input.aspectRatio ? { aspectRatio: input.aspectRatio } : {}),
@@ -790,6 +836,10 @@ export async function extractEditorUiDesignAssets(
     EDITOR_UI_DESIGN_ASSET_EXTRACTION_API,
     jsonRequest('POST', {
       sourceImageSrc: input.sourceImageSrc,
+      ...(input.model ? { model: input.model } : {}),
+      ...(input.referenceImageSrcs?.length
+        ? { referenceImageSrcs: input.referenceImageSrcs }
+        : {}),
       ...(input.projectId ? { projectId: input.projectId } : {}),
       ...(input.generationInputs
         ? { generationInputs: input.generationInputs }
@@ -820,6 +870,9 @@ export async function editEditorImage(input: EditorImageEditInput) {
       sourceImageSrc: input.sourceImageSrc,
       ...(input.size ? { size: input.size } : {}),
       ...(input.model ? { model: input.model } : {}),
+      ...(input.referenceImageSrcs?.length
+        ? { referenceImageSrcs: input.referenceImageSrcs }
+        : {}),
       ...(input.projectId ? { projectId: input.projectId } : {}),
       ...(input.assetKind ? { assetKind: input.assetKind } : {}),
       ...(input.generationInputs
@@ -842,6 +895,34 @@ export async function editEditorImage(input: EditorImageEditInput) {
   );
 }
 
+export async function removeEditorImageBackground(
+  input: EditorBackgroundRemovalInput,
+) {
+  return requestJson<EditorBackgroundRemovalResponse>(
+    EDITOR_BACKGROUND_REMOVAL_API,
+    jsonRequest('POST', {
+      sourceImageSrc: input.sourceImageSrc,
+      ...(input.projectId ? { projectId: input.projectId } : {}),
+      ...(input.targetLayerId ? { targetLayerId: input.targetLayerId } : {}),
+      ...(input.assetKind ? { assetKind: input.assetKind } : {}),
+      ...(input.generationInputs
+        ? { generationInputs: input.generationInputs }
+        : {}),
+      ...(input.assetFolderId ? { assetFolderId: input.assetFolderId } : {}),
+      ...(input.assetLabel ? { assetLabel: input.assetLabel } : {}),
+      ...(input.sourceResourceId
+        ? { sourceResourceId: input.sourceResourceId }
+        : {}),
+      ...(input.taskId ? { taskId: input.taskId } : {}),
+    }),
+    '去除背景失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: EDITOR_REQUEST_RETRY_OPTIONS,
+    },
+  );
+}
+
 export async function generateEditorCharacterAnimation(
   input: EditorCharacterAnimationGenerationInput,
 ) {
@@ -900,6 +981,8 @@ export async function generateEditorVideo(input: EditorVideoGenerationInput) {
         ? { sourceResourceId: input.sourceResourceId }
         : {}),
       ...(input.assetKind ? { assetKind: input.assetKind } : {}),
+      ...(input.assetFolderId ? { assetFolderId: input.assetFolderId } : {}),
+      ...(input.assetLabel ? { assetLabel: input.assetLabel } : {}),
     }),
     '生成视频失败',
     {
diff --git a/src/services/image-editor/editorProjectCoverCache.ts b/src/services/image-editor/editorProjectCoverCache.ts
new file mode 100644
index 000000000..d1bdaf1e1
--- /dev/null
+++ b/src/services/image-editor/editorProjectCoverCache.ts
@@ -0,0 +1,152 @@
+const PROJECT_COVER_CACHE_DB_NAME = 'genarrative-editor-project-covers';
+const PROJECT_COVER_CACHE_DB_VERSION = 1;
+const PROJECT_COVER_CACHE_STORE_NAME = 'covers';
+const PROJECT_COVER_CACHE_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
+
+export type CachedEditorProjectCover = {
+  projectId: string;
+  blob: Blob;
+  updatedAt: string;
+  cachedAt: number;
+};
+
+function canUseIndexedDb() {
+  return typeof indexedDB !== 'undefined';
+}
+
+function idbRequestToPromise<T>(request: IDBRequest<T>) {
+  return new Promise<T>((resolve, reject) => {
+    request.addEventListener('success', () => resolve(request.result));
+    request.addEventListener('error', () => {
+      reject(request.error ?? new Error('IndexedDB request failed'));
+    });
+  });
+}
+
+function openProjectCoverCacheDb() {
+  return new Promise<IDBDatabase>((resolve, reject) => {
+    if (!canUseIndexedDb()) {
+      reject(new Error('IndexedDB unavailable'));
+      return;
+    }
+
+    const request = indexedDB.open(
+      PROJECT_COVER_CACHE_DB_NAME,
+      PROJECT_COVER_CACHE_DB_VERSION,
+    );
+    request.addEventListener('upgradeneeded', () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(PROJECT_COVER_CACHE_STORE_NAME)) {
+        db.createObjectStore(PROJECT_COVER_CACHE_STORE_NAME, {
+          keyPath: 'projectId',
+        });
+      }
+    });
+    request.addEventListener('success', () => resolve(request.result));
+    request.addEventListener('error', () => {
+      reject(request.error ?? new Error('IndexedDB open failed'));
+    });
+  });
+}
+
+async function withProjectCoverCacheStore<T>(
+  mode: IDBTransactionMode,
+  run: (store: IDBObjectStore) => IDBRequest<T>,
+) {
+  const db = await openProjectCoverCacheDb();
+  try {
+    const transaction = db.transaction(PROJECT_COVER_CACHE_STORE_NAME, mode);
+    const result = await idbRequestToPromise(
+      run(transaction.objectStore(PROJECT_COVER_CACHE_STORE_NAME)),
+    );
+    await new Promise<void>((resolve, reject) => {
+      transaction.addEventListener('complete', () => resolve());
+      transaction.addEventListener('abort', () => {
+        reject(transaction.error ?? new Error('IndexedDB transaction aborted'));
+      });
+      transaction.addEventListener('error', () => {
+        reject(transaction.error ?? new Error('IndexedDB transaction failed'));
+      });
+    });
+    return result;
+  } finally {
+    db.close();
+  }
+}
+
+function isFreshCachedCover(
+  cover: CachedEditorProjectCover | undefined,
+): cover is CachedEditorProjectCover {
+  return Boolean(
+    cover?.projectId &&
+      cover.blob instanceof Blob &&
+      cover.cachedAt > Date.now() - PROJECT_COVER_CACHE_MAX_AGE_MS,
+  );
+}
+
+export async function putEditorProjectCoverCache({
+  projectId,
+  blob,
+  updatedAt = new Date().toISOString(),
+}: {
+  projectId: string;
+  blob: Blob;
+  updatedAt?: string;
+}) {
+  const normalizedProjectId = projectId.trim();
+  if (!normalizedProjectId || !canUseIndexedDb()) {
+    return;
+  }
+
+  try {
+    await withProjectCoverCacheStore('readwrite', (store) =>
+      store.put({
+        projectId: normalizedProjectId,
+        blob,
+        updatedAt,
+        cachedAt: Date.now(),
+      } satisfies CachedEditorProjectCover),
+    );
+  } catch {
+    // IndexedDB is best-effort local fallback only.
+  }
+}
+
+export async function readEditorProjectCoverCache(
+  projectIds: readonly string[],
+) {
+  const normalizedProjectIds = [
+    ...new Set(projectIds.map((id) => id.trim())),
+  ].filter(Boolean);
+  if (!normalizedProjectIds.length || !canUseIndexedDb()) {
+    return new Map<string, CachedEditorProjectCover>();
+  }
+
+  let db: IDBDatabase | null = null;
+  try {
+    db = await openProjectCoverCacheDb();
+    const transaction = db.transaction(
+      PROJECT_COVER_CACHE_STORE_NAME,
+      'readonly',
+    );
+    const store = transaction.objectStore(PROJECT_COVER_CACHE_STORE_NAME);
+    const covers = await Promise.all(
+      normalizedProjectIds.map((projectId) =>
+        idbRequestToPromise(
+          store.get(projectId) as IDBRequest<
+            CachedEditorProjectCover | undefined
+          >,
+        ),
+      ),
+    );
+    return new Map(
+      covers
+        .filter(isFreshCachedCover)
+        .map((cover) => [cover.projectId, cover]),
+    );
+  } catch {
+    return new Map<string, CachedEditorProjectCover>();
+  } finally {
+    db?.close();
+  }
+}
diff --git a/src/services/jump-hop/jumpHopClient.runtime.test.ts b/src/services/jump-hop/jumpHopClient.runtime.test.ts
index a14db1e89..b4d73efda 100644
--- a/src/services/jump-hop/jumpHopClient.runtime.test.ts
+++ b/src/services/jump-hop/jumpHopClient.runtime.test.ts
@@ -53,6 +53,25 @@ describe('jumpHopClient runtime requests', () => {
     );
   });
 
+  it('passes draft runtime mode in the start run request body', async () => {
+    await startJumpHopRuntimeRun('profile/1', {
+      runtimeMode: 'draft',
+    });
+
+    expect(apiClientMocks.requestJson).toHaveBeenCalledWith(
+      '/api/runtime/jump-hop/runs',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({
+          profileId: 'profile/1',
+          runtimeMode: 'draft',
+        }),
+      }),
+      '启动跳一跳运行态失败',
+      expect.anything(),
+    );
+  });
+
   it('submits jump input with a generated client event id', async () => {
     await submitJumpHopJump(
       'run/1',
diff --git a/src/services/jump-hop/jumpHopClient.ts b/src/services/jump-hop/jumpHopClient.ts
index 1fc34824c..ca559edd4 100644
--- a/src/services/jump-hop/jumpHopClient.ts
+++ b/src/services/jump-hop/jumpHopClient.ts
@@ -8,6 +8,7 @@ import type {
   JumpHopJumpRequest,
   JumpHopLeaderboardResponse,
   JumpHopRunResponse,
+  JumpHopStartRunRequest,
   JumpHopRuntimeRunSnapshotResponse,
   JumpHopSessionResponse,
   JumpHopSessionSnapshotResponse,
@@ -48,7 +49,7 @@ type JumpHopStartRunOptions = JumpHopRuntimeRequestOptions & {
 };
 type JumpHopJumpPayload = Pick<
   JumpHopJumpRequest,
-  'dragDistance' | 'dragVectorX' | 'dragVectorY'
+  'dragDistance'
 >;
 
 export type {
@@ -273,10 +274,14 @@ export async function startJumpHopRuntimeRun(
   profileId: string,
   options: JumpHopStartRunOptions = {},
 ) {
+  const requestBody: JumpHopStartRunRequest = {
+    profileId,
+    ...(options.runtimeMode ? { runtimeMode: options.runtimeMode } : {}),
+  };
   return requestRuntimeJson<JumpHopRunResponse>({
     url: buildRuntimeApiPath(JUMP_HOP_RUNTIME_API_BASE, 'runs'),
     method: 'POST',
-    jsonBody: { profileId },
+    jsonBody: requestBody,
     fallbackMessage: '启动跳一跳运行态失败',
     requestOptions: options,
   });
@@ -289,8 +294,6 @@ export async function submitJumpHopJump(
 ) {
   const requestPayload = {
     dragDistance: payload.dragDistance,
-    dragVectorX: payload.dragVectorX,
-    dragVectorY: payload.dragVectorY,
     clientEventId: `jump-${runId}-${Date.now()}`,
   };
 
diff --git a/src/services/jump-hop/jumpHopRuntimeModel.test.ts b/src/services/jump-hop/jumpHopRuntimeModel.test.ts
index 66400f6b4..e648e4ba7 100644
--- a/src/services/jump-hop/jumpHopRuntimeModel.test.ts
+++ b/src/services/jump-hop/jumpHopRuntimeModel.test.ts
@@ -6,6 +6,7 @@ import type {
 } from '../../../packages/shared/src/contracts/jumpHop';
 import {
   buildJumpHopVisiblePlatforms,
+  getJumpHopCharacterTopFaceVisualPosition,
   getJumpHopCharacterVisualPosition,
   getJumpHopJumpFeedbackLabel,
   getJumpHopLandingAssistVisualPosition,
@@ -40,7 +41,7 @@ test('跳一跳地块池按平台编号从 18 个素材中抽取而不是按类
   expect(second?.imageSrc).toMatch(/^asset-/);
 });
 
-test('跳一跳可见平台窗口固定为 3 个并携带选中的地块素材', () => {
+test('跳一跳可见平台窗口固定为当前块和下一个块并携带选中的地块素材', () => {
   const path: JumpHopPath = {
     seed: 'forest-tea',
     difficulty: 'standard',
@@ -76,13 +77,12 @@ test('跳一跳可见平台窗口固定为 3 个并携带选中的地块素材',
 
   const visible = buildJumpHopVisiblePlatforms(path, 1, tileAssets);
 
-  expect(visible).toHaveLength(3);
+  expect(visible).toHaveLength(2);
   expect(visible[0]?.asset?.imageSrc).toMatch(/^asset-/);
   expect(visible[1]?.asset?.imageSrc).toMatch(/^asset-/);
-  expect(visible[2]?.asset?.imageSrc).toMatch(/^asset-/);
 });
 
-test('跳一跳三块可见地块按下方中部上方展开且角色落在当前地块上', () => {
+test('跳一跳当前块按目标方向偏向场地侧边且角色落在当前地块上', () => {
   const path: JumpHopPath = {
     seed: 'forest-tea',
     difficulty: 'standard',
@@ -125,15 +125,103 @@ test('跳一跳三块可见地块按下方中部上方展开且角色落在当
   expect(visible[0]?.screenY).toBeLessThanOrEqual(66);
   expect(visible[1]?.screenY).toBeGreaterThanOrEqual(40);
   expect(visible[1]?.screenY).toBeLessThan(visible[0]?.screenY ?? 0);
-  expect(visible[2]?.screenY).toBeLessThan(visible[1]?.screenY ?? 0);
-  expect(visible[2]?.screenY).toBeLessThanOrEqual(32);
+  expect(visible).toHaveLength(2);
+  expect(visible[0]?.screenX).toBeLessThan(50);
+  expect(visible[1]?.screenX).toBeGreaterThan(50);
   expect(Math.abs((visible[1]?.screenX ?? 0) - (visible[0]?.screenX ?? 0))).toBeGreaterThan(5);
-  expect(Math.abs((visible[2]?.screenX ?? 0) - (visible[1]?.screenX ?? 0))).toBeGreaterThan(5);
   expect(character?.screenX).toBeCloseTo(visible[0]?.screenX ?? 0, 1);
-  expect(character?.screenY).toBeCloseTo((visible[0]?.screenY ?? 0) - 3, 1);
+  expect(character?.screenY).toBeCloseTo(visible[0]?.screenY ?? 0, 1);
 });
 
-test('跳一跳可见地块按深度保留不同视觉尺寸', () => {
+test('跳一跳目标地块始终显示在当前脚下块的正负 45 度方向', () => {
+  const path: JumpHopPath = {
+    seed: 'forest-tea',
+    difficulty: 'standard',
+    finishIndex: 999,
+    cameraPreset: 'portrait-isometric-9x16',
+    scoring: {
+      chargeToDistanceRatio: 0.004,
+      maxChargeMs: 900,
+      hitBonus: 20,
+      perfectBonus: 60,
+    },
+    platforms: [
+      platform(0, 0, 'start'),
+      platform(1.78, 1.78, 'normal'),
+      platform(0, 3.56, 'target'),
+    ],
+  };
+  const stageSize = { width: 320, height: (320 * 16) / 9 };
+
+  const firstVisible = buildJumpHopVisiblePlatforms(path, 0, []);
+  const firstDx = Math.abs(
+    ((firstVisible[1]!.screenX - firstVisible[0]!.screenX) / 100) *
+      stageSize.width,
+  );
+  const firstDy = Math.abs(
+    ((firstVisible[1]!.screenY - firstVisible[0]!.screenY) / 100) *
+      stageSize.height,
+  );
+
+  expect(firstVisible[1]!.screenX).toBeGreaterThan(firstVisible[0]!.screenX);
+  expect(firstVisible[0]!.screenX).toBeLessThan(50);
+  expect(firstVisible[1]!.screenX).toBeGreaterThan(50);
+  expect(firstDx).toBeCloseTo(firstDy, 5);
+
+  const secondVisible = buildJumpHopVisiblePlatforms(path, 1, []);
+  const secondDx = Math.abs(
+    ((secondVisible[1]!.screenX - secondVisible[0]!.screenX) / 100) *
+      stageSize.width,
+  );
+  const secondDy = Math.abs(
+    ((secondVisible[1]!.screenY - secondVisible[0]!.screenY) / 100) *
+      stageSize.height,
+  );
+
+  expect(secondVisible[1]!.screenX).toBeLessThan(secondVisible[0]!.screenX);
+  expect(secondVisible[0]!.screenX).toBeGreaterThan(50);
+  expect(secondVisible[1]!.screenX).toBeLessThan(50);
+  expect(secondDx).toBeCloseTo(secondDy, 5);
+});
+
+test('跳一跳目标地块按真实距离在最小和当前最大间距之间投影', () => {
+  const path: JumpHopPath = {
+    seed: 'forest-tea',
+    difficulty: 'standard',
+    finishIndex: 999,
+    cameraPreset: 'portrait-isometric-9x16',
+    scoring: {
+      chargeToDistanceRatio: 0.004,
+      maxChargeMs: 900,
+      hitBonus: 20,
+      perfectBonus: 60,
+    },
+    platforms: [
+      platform(0, 0, 'start'),
+      platform(0.979, 0.979, 'normal'),
+    ],
+  };
+  const stageSize = { width: 320, height: (320 * 16) / 9 };
+
+  const visible = buildJumpHopVisiblePlatforms(path, 0, []);
+  const dx = Math.abs(
+    ((visible[1]!.screenX - visible[0]!.screenX) / 100) *
+      stageSize.width,
+  );
+  const dy = Math.abs(
+    ((visible[1]!.screenY - visible[0]!.screenY) / 100) *
+      stageSize.height,
+  );
+
+  expect(visible[1]!.screenY).toBeGreaterThan(47);
+  expect(visible[1]!.screenY).toBeLessThan(64);
+  expect(Math.abs(visible[1]!.screenX - visible[0]!.screenX)).toBeLessThan(
+    30.3,
+  );
+  expect(dx).toBeCloseTo(dy, 5);
+});
+
+test('跳一跳可见地块不再按深度做倍率缩放', () => {
   const path: JumpHopPath = {
     seed: 'forest-tea',
     difficulty: 'standard',
@@ -161,18 +249,14 @@ test('跳一跳可见地块按深度保留不同视觉尺寸', () => {
     visible[1]!.platform,
     visible[1]!.scale,
   );
-  const previewSize = getJumpHopPlatformVisualSize(
-    visible[2]!.platform,
-    visible[2]!.scale,
-  );
 
-  expect(currentSize.width).toBeGreaterThan(targetSize.width);
-  expect(targetSize.width).toBeGreaterThan(previewSize.width);
-  expect(currentSize.height).toBeGreaterThan(targetSize.height);
-  expect(targetSize.height).toBeGreaterThan(previewSize.height);
+  expect(visible[0]?.scale).toBe(1);
+  expect(visible[1]?.scale).toBe(1);
+  expect(currentSize.width).toBe(targetSize.width);
+  expect(currentSize.height).toBe(targetSize.height);
 });
 
-test('跳一跳三维角色画布坐标与屏幕坐标同向映射到下方起始地块', () => {
+test('跳一跳三维角色画布坐标按下一块方向偏向场地侧边', () => {
   const path: JumpHopPath = {
     seed: 'forest-tea',
     difficulty: 'standard',
@@ -216,17 +300,17 @@ test('跳一跳三维角色画布坐标与屏幕坐标同向映射到下方起
     height: 568,
   });
 
-  expect(canvasPosition?.x).toBeGreaterThan(140);
-  expect(canvasPosition?.x).toBeLessThan(180);
+  expect(canvasPosition?.x).toBeGreaterThan(100);
+  expect(canvasPosition?.x).toBeLessThan(125);
   expect(canvasPosition?.y).toBeGreaterThan(330);
   expect(canvasPosition?.y).toBeLessThan(370);
 });
 
-test('跳一跳运行态当前地块视觉尺寸按原调参结果放大一倍', () => {
-  const size = getJumpHopPlatformVisualSize(platform(0, 0, 'start'), 1.08);
+test('跳一跳运行态当前地块视觉尺寸使用真实规格', () => {
+  const size = getJumpHopPlatformVisualSize(platform(0, 0, 'start'), 1);
 
-  expect(size.width).toBeCloseTo(125.28, 2);
-  expect(size.height).toBeCloseTo(103.68, 2);
+  expect(size.width).toBeCloseTo(116, 2);
+  expect(size.height).toBeCloseTo(96, 2);
 });
 
 test('跳一跳落点预测按蓄力值沿下一地块中心方向投影', () => {
@@ -290,13 +374,13 @@ test('跳一跳落点预测按蓄力值沿下一地块中心方向投影', () =>
   );
 
   expect(fullAssist?.screenX).toBeCloseTo(target.screenX, 1);
-  expect(fullAssist?.screenY).toBeCloseTo(target.screenY - 3, 1);
+  expect(fullAssist?.screenY).toBeCloseTo(target.screenY, 1);
   expect(halfAssist?.screenX).toBeCloseTo(
     current.screenX + (target.screenX - current.screenX) / 2,
     1,
   );
   expect(halfAssist?.screenY).toBeCloseTo(
-    current.screenY + (target.screenY - current.screenY) / 2 - 3,
+    current.screenY + (target.screenY - current.screenY) / 2,
     1,
   );
 });
@@ -352,26 +436,144 @@ test('跳一跳落点预测忽略旧客户端拖拽方向', () => {
     character,
     stageSize,
     fullDragDistance,
-    -999,
-    -999,
   );
 
   expect(assist?.screenX).toBeCloseTo(target.screenX, 1);
-  expect(assist?.screenY).toBeCloseTo(target.screenY - 3, 1);
+  expect(assist?.screenY).toBeCloseTo(target.screenY, 1);
   expect(assist?.isOnTargetPlatform).toBe(true);
 });
 
-test('跳一跳落点预测用收缩后的视觉顶面 footprint 判断命中', () => {
+test('跳一跳落点预测从角色真实脚点指向下一地块顶面中心', () => {
+  const path: JumpHopPath = {
+    seed: 'forest-tea',
+    difficulty: 'standard',
+    finishIndex: 999,
+    cameraPreset: 'portrait-isometric-9x16',
+    scoring: {
+      chargeToDistanceRatio: 0.004,
+      maxChargeMs: 900,
+      hitBonus: 20,
+      perfectBonus: 60,
+    },
+    platforms: [
+      platform(0, 0, 'start'),
+      platform(0.8, 1.2, 'normal'),
+      platform(-0.2, 2.4, 'target'),
+    ],
+  };
+  const run = {
+    runId: 'run-1',
+    profileId: 'profile-1',
+    ownerUserId: 'user-1',
+    status: 'playing',
+    currentPlatformIndex: 1,
+    successfulJumpCount: 1,
+    durationMs: 0,
+    score: 1,
+    combo: 0,
+    path,
+    lastJump: {
+      chargeMs: 300,
+      jumpDistance: 1.0,
+      targetPlatformIndex: 1,
+      landedX: 0.72,
+      landedY: 1.16,
+      result: 'hit',
+    },
+    startedAtMs: 1000,
+    finishedAtMs: null,
+  } as const;
+  const visible = buildJumpHopVisiblePlatforms(path, 1, []);
+  const character = getJumpHopCharacterVisualPosition(run, visible);
+  const current = visible[0]!;
+  const target = visible[1]!;
+  const targetPosition = getJumpHopCharacterTopFaceVisualPosition(target);
+  const stageSize = { width: 320, height: 568 };
+  const targetWorldDistance = Math.hypot(
+    target.platform.x - run.lastJump.landedX,
+    target.platform.y - run.lastJump.landedY,
+  );
+  const fullDragDistance =
+    targetWorldDistance / path.scoring.chargeToDistanceRatio;
+
+  const fullAssist = getJumpHopLandingAssistVisualPosition(
+    run,
+    visible,
+    character,
+    stageSize,
+    fullDragDistance,
+  );
+  const halfAssist = getJumpHopLandingAssistVisualPosition(
+    run,
+    visible,
+    character,
+    stageSize,
+    fullDragDistance / 2,
+  );
+
+  expect(character?.screenX).not.toBeCloseTo(current.screenX, 1);
+  expect(fullAssist?.landedWorldX).toBeCloseTo(target.platform.x, 5);
+  expect(fullAssist?.landedWorldY).toBeCloseTo(target.platform.y, 5);
+  expect(fullAssist?.screenX).toBeCloseTo(targetPosition.screenX, 1);
+  expect(fullAssist?.screenY).toBeCloseTo(targetPosition.screenY, 1);
+  expect(fullAssist?.isOnTargetPlatform).toBe(true);
+  expect(halfAssist?.landedWorldX).toBeCloseTo(
+    (run.lastJump.landedX + target.platform.x) / 2,
+    5,
+  );
+  expect(halfAssist?.landedWorldY).toBeCloseTo(
+    (run.lastJump.landedY + target.platform.y) / 2,
+    5,
+  );
+  expect(halfAssist?.screenX).toBeCloseTo(
+    (character!.screenX + targetPosition.screenX) / 2,
+    1,
+  );
+  expect(halfAssist?.screenY).toBeCloseTo(
+    (character!.screenY + targetPosition.screenY) / 2,
+    1,
+  );
+  expect(halfAssist?.screenX).not.toBeCloseTo(
+    current.screenX + (target.screenX - current.screenX) / 2,
+    1,
+  );
+});
+
+test('跳一跳落点预测用完整视觉顶面 footprint 判断命中', () => {
   const target = {
     ...platform(1, 0, 'normal'),
     width: 2,
     height: 0.6,
-    landingRadius: 0.2,
+    landingRadius: 10,
   };
 
-  expect(isJumpHopLandingInsidePlatformFootprint(target, 1.6, 0)).toBe(true);
-  expect(isJumpHopLandingInsidePlatformFootprint(target, 1.8, 0)).toBe(false);
-  expect(isJumpHopLandingInsidePlatformFootprint(target, 1, 0.18)).toBe(false);
+  expect(isJumpHopLandingInsidePlatformFootprint(target, 1.99, 0)).toBe(true);
+  expect(isJumpHopLandingInsidePlatformFootprint(target, 2.01, 0)).toBe(false);
+  expect(isJumpHopLandingInsidePlatformFootprint(target, 1, 0.29)).toBe(true);
+  expect(isJumpHopLandingInsidePlatformFootprint(target, 1, 0.31)).toBe(false);
+  expect(isJumpHopLandingInsidePlatformFootprint(target, 1.6, 0.12)).toBe(true);
+  expect(isJumpHopLandingInsidePlatformFootprint(target, 1.7, 0.12)).toBe(false);
+  expect(
+    isJumpHopLandingInsidePlatformFootprint(
+      { ...platform(0.8, 1.2, 'normal'), width: 2, height: 2 },
+      1.3,
+      1.6,
+    ),
+  ).toBe(true);
+  expect(
+    isJumpHopLandingInsidePlatformFootprint(
+      { ...platform(0.8, 1.2, 'normal'), width: 2, height: 2 },
+      1.4,
+      1.8,
+    ),
+  ).toBe(false);
+  expect(
+    isJumpHopLandingInsidePlatformFootprint(
+      { ...platform(0.8, 1.2, 'normal'), width: 2, height: 2 },
+      -0.19,
+      1.2,
+    ),
+  ).toBe(true);
 });
 
 test('跳一跳成功落地后保留真实落点偏移而不是吸附到地块中心', () => {
@@ -407,8 +609,8 @@ test('跳一跳成功落地后保留真实落点偏移而不是吸附到地块
       chargeMs: 300,
       jumpDistance: 1.0,
       targetPlatformIndex: 1,
-      landedX: 0.52,
-      landedY: 0.78,
+      landedX: 0.72,
+      landedY: 1.16,
       result: 'hit',
     },
     startedAtMs: 1000,
@@ -422,9 +624,9 @@ test('跳一跳成功落地后保留真实落点偏移而不是吸附到地块
   const currentCenter = visible[0]!;
 
   expect(character?.screenX).not.toBeCloseTo(currentCenter.screenX, 1);
-  expect(character?.screenY).not.toBeCloseTo(currentCenter.screenY - 3, 1);
+  expect(character?.screenY).not.toBeCloseTo(currentCenter.screenY, 1);
   expect(character?.screenX).toBeLessThan(currentCenter.screenX);
-  expect(character?.screenY).toBeGreaterThan(currentCenter.screenY - 3);
+  expect(character?.screenY).toBeGreaterThan(currentCenter.screenY);
 });
 
 test('跳一跳运行态公开反馈不再展示旧 perfect 和通关语义', () => {
diff --git a/src/services/jump-hop/jumpHopRuntimeModel.ts b/src/services/jump-hop/jumpHopRuntimeModel.ts
index b34e4655b..7b01113ef 100644
--- a/src/services/jump-hop/jumpHopRuntimeModel.ts
+++ b/src/services/jump-hop/jumpHopRuntimeModel.ts
@@ -1,4 +1,5 @@
 import type {
+  JumpHopDifficulty,
   JumpHopPath,
   JumpHopPlatform,
   JumpHopRunStatus,
@@ -41,28 +42,47 @@ export type JumpHopPlatformVisualSize = {
 export type JumpHopLandingAssistVisualPosition = {
   screenX: number;
   screenY: number;
+  sceneX: number;
+  sceneY: number;
+  sceneZ: number;
+  landedWorldX: number;
+  landedWorldY: number;
   targetPlatformIndex: number;
   isOnTargetPlatform: boolean;
 };
 
-export type JumpHopBackendDragVector = {
-  dragVectorX: number;
-  dragVectorY: number;
-};
-
 const JUMP_HOP_DEFAULT_CHARGE_TO_DISTANCE_RATIO = 0.004;
 const JUMP_HOP_DEFAULT_STAGE_SIZE: JumpHopCanvasSize = {
   width: 320,
   height: 568,
 };
-const VISIBLE_PLATFORM_COUNT = 3;
+const VISIBLE_PLATFORM_COUNT = 2;
 const JUMP_HOP_STAGE_WORLD_SCALE = 4.2;
 const JUMP_HOP_STAGE_FORWARD_SCALE = 3;
 const JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y = [64, 47, 30] as const;
+const JUMP_HOP_CURRENT_PLATFORM_SIDE_OFFSET_PERCENT = 15;
+const JUMP_HOP_STAGE_ASPECT_HEIGHT_OVER_WIDTH = 16 / 9;
+const JUMP_HOP_MIN_PLATFORM_VISUAL_GAP_RATIO = 0.55;
+const JUMP_HOP_MAX_PLATFORM_WORLD_GAP_BY_DIFFICULTY: Record<
+  JumpHopDifficulty,
+  number
+> = {
+  advanced: 2.05,
+  challenge: 2.35,
+  easy: 1.45,
+  standard: 1.78,
+};
+// 9:16 舞台里，当前与目标地块的 17% 纵向间距对应约 30% 横向间距，屏幕像素上形成 45 度。
+const JUMP_HOP_SCREEN_X_45_DEGREE_STEP_PERCENT =
+  (JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[0] -
+    JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[1]) *
+  JUMP_HOP_STAGE_ASPECT_HEIGHT_OVER_WIDTH;
 const JUMP_HOP_PLATFORM_VISUAL_SIZE_MULTIPLIER = 2;
 const JUMP_HOP_SCREEN_X_WORLD_PERCENT = 11.2;
-const JUMP_HOP_TOP_FACE_HITBOX_WIDTH_RATIO = 0.72;
-const JUMP_HOP_TOP_FACE_HITBOX_HEIGHT_RATIO = 0.52;
+// 中文注释：命中区必须与视觉顶面一致，禁止再做隐藏收缩。
+const JUMP_HOP_TOP_FACE_HITBOX_WIDTH_RATIO = 1;
+const JUMP_HOP_TOP_FACE_HITBOX_HEIGHT_RATIO = 1;
+const JUMP_HOP_CHARACTER_TOP_FACE_SCENE_Y_OFFSET = 0.84;
 
 const tileToneByType: Record<JumpHopTileType, string> = {
   accent: '#e0f2fe',
@@ -77,6 +97,59 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value));
 }
 
+function getJumpHopPlatformStepDirection(
+  from: JumpHopPlatform | null | undefined,
+  to: JumpHopPlatform | null | undefined,
+) {
+  const dx = (to?.x ?? 0) - (from?.x ?? 0);
+  return dx >= 0 ? 1 : -1;
+}
+
+function getJumpHopMaxPlatformWorldGap(difficulty: JumpHopDifficulty | null | undefined) {
+  if (!difficulty) {
+    return JUMP_HOP_MAX_PLATFORM_WORLD_GAP_BY_DIFFICULTY.standard;
+  }
+  return (
+    JUMP_HOP_MAX_PLATFORM_WORLD_GAP_BY_DIFFICULTY[difficulty] ??
+    JUMP_HOP_MAX_PLATFORM_WORLD_GAP_BY_DIFFICULTY.standard
+  );
+}
+
+function getJumpHopPlatformVisualGapRatio(
+  difficulty: JumpHopDifficulty | null | undefined,
+  from: JumpHopPlatform | null | undefined,
+  to: JumpHopPlatform | null | undefined,
+) {
+  if (!from || !to) {
+    return 1;
+  }
+
+  const worldStep = Math.max(Math.abs(to.x - from.x), Math.abs(to.y - from.y));
+  const maxWorldStep = getJumpHopMaxPlatformWorldGap(difficulty);
+  if (worldStep <= 0 || maxWorldStep <= 0) {
+    return JUMP_HOP_MIN_PLATFORM_VISUAL_GAP_RATIO;
+  }
+  return clamp(
+    worldStep / maxWorldStep,
+    JUMP_HOP_MIN_PLATFORM_VISUAL_GAP_RATIO,
+    1,
+  );
+}
+
+function getJumpHopCurrentPlatformScreenX(
+  current: JumpHopPlatform,
+  next: JumpHopPlatform | null | undefined,
+) {
+  if (!next) {
+    return 50;
+  }
+  return (
+    50 -
+    getJumpHopPlatformStepDirection(current, next) *
+      JUMP_HOP_CURRENT_PLATFORM_SIDE_OFFSET_PERCENT
+  );
+}
+
 function hashJumpHopString(value: string) {
   let hash = 0x811c9dc5;
   for (const character of value) {
@@ -115,9 +188,17 @@ export function buildJumpHopVisiblePlatforms(
   }
 
   const start = Math.max(0, currentPlatformIndex);
-  const end = Math.min(platforms.length, currentPlatformIndex + VISIBLE_PLATFORM_COUNT);
+  const end = Math.min(
+    platforms.length,
+    currentPlatformIndex + VISIBLE_PLATFORM_COUNT,
+  );
   const visible = platforms.slice(start, end);
-  const worldScale = 0.96;
+  const currentScreenX = getJumpHopCurrentPlatformScreenX(
+    current,
+    platforms[currentPlatformIndex + 1],
+  );
+  let visualOffsetX = 0;
+  let visualOffsetY = 0;
 
   return visible.map((platform, offset): JumpHopVisiblePlatform => {
     const index = start + offset;
@@ -130,13 +211,30 @@ export function buildJumpHopVisiblePlatforms(
       index,
       platform.platformId,
     );
+    if (offset > 0) {
+      const gapRatio = getJumpHopPlatformVisualGapRatio(
+        path?.difficulty ?? null,
+        visible[offset - 1],
+        platform,
+      );
+      visualOffsetX +=
+        getJumpHopPlatformStepDirection(visible[offset - 1], platform) *
+        JUMP_HOP_SCREEN_X_45_DEGREE_STEP_PERCENT *
+          gapRatio;
+      visualOffsetY +=
+        (JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[0] -
+          JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[1]) *
+        gapRatio;
+    }
+    const screenX = clamp(currentScreenX + visualOffsetX, 14, 86);
     const screenY =
       depth <= 0
         ? JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[0]
-        : depth === 1
-          ? JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[1]
-          : JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[2];
-    const screenX = clamp(50 + dx * JUMP_HOP_SCREEN_X_WORLD_PERCENT, 14, 86);
+        : clamp(
+            JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[0] - visualOffsetY,
+            JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[2],
+            JUMP_HOP_VISIBLE_PLATFORM_SCREEN_Y[0],
+          );
 
     return {
       platform,
@@ -146,7 +244,7 @@ export function buildJumpHopVisiblePlatforms(
       sceneX: dx * JUMP_HOP_STAGE_WORLD_SCALE,
       sceneY: 0,
       sceneZ: dy * JUMP_HOP_STAGE_FORWARD_SCALE,
-      scale: clamp(1.08 - Math.max(0, depth) * 0.12, 0.8, 1.1),
+      scale: 1,
       asset,
     };
   });
@@ -196,6 +294,30 @@ function getJumpHopCurrentTargetPlatforms(
   };
 }
 
+function getJumpHopCurrentFootWorldPosition(
+  run: JumpHopRuntimeRunSnapshotResponse,
+  currentPlatform: JumpHopVisiblePlatform,
+) {
+  const lastJump = run.lastJump;
+  if (
+    lastJump &&
+    lastJump.result !== 'miss' &&
+    lastJump.targetPlatformIndex === run.currentPlatformIndex &&
+    Number.isFinite(lastJump.landedX) &&
+    Number.isFinite(lastJump.landedY)
+  ) {
+    return {
+      x: lastJump.landedX,
+      y: lastJump.landedY,
+    };
+  }
+
+  return {
+    x: currentPlatform.platform.x,
+    y: currentPlatform.platform.y,
+  };
+}
+
 function getJumpHopCanvasPosition(
   platform: JumpHopVisiblePlatform,
   stageSize: JumpHopCanvasSize,
@@ -206,7 +328,7 @@ function getJumpHopCanvasPosition(
   };
 }
 
-function getJumpHopCharacterVisualPositionFromPlatform(
+export function getJumpHopCharacterTopFaceVisualPosition(
   platform: JumpHopVisiblePlatform,
   isMiss = false,
 ): JumpHopCharacterVisualPosition {
@@ -223,9 +345,9 @@ function getJumpHopCharacterVisualPositionFromPlatform(
 
   return {
     screenX: platform.screenX,
-    screenY: platform.screenY - 3,
+    screenY: platform.screenY,
     sceneX: platform.sceneX,
-    sceneY: platform.sceneY + 0.84,
+    sceneY: platform.sceneY + JUMP_HOP_CHARACTER_TOP_FACE_SCENE_Y_OFFSET,
     sceneZ: platform.sceneZ,
     isMiss: false,
   };
@@ -290,6 +412,51 @@ function getJumpHopScreenWorldScales(
   };
 }
 
+function getJumpHopWorldPointVisualPosition(
+  currentPlatform: JumpHopVisiblePlatform,
+  targetPlatform: JumpHopVisiblePlatform,
+  stageSize: JumpHopCanvasSize,
+  worldX: number,
+  worldY: number,
+  isMiss = false,
+): JumpHopCharacterVisualPosition | null {
+  if (
+    stageSize.width <= 0 ||
+    stageSize.height <= 0 ||
+    !Number.isFinite(worldX) ||
+    !Number.isFinite(worldY)
+  ) {
+    return null;
+  }
+
+  const scales = getJumpHopScreenWorldScales(
+    currentPlatform,
+    targetPlatform,
+    stageSize,
+  );
+  const worldDeltaX = worldX - currentPlatform.platform.x;
+  const worldDeltaY = worldY - currentPlatform.platform.y;
+  const landedPixelX =
+    scales.currentCanvasPosition.x +
+    worldDeltaX * scales.signedXScreenPerWorld;
+  const landedPixelY =
+    scales.currentCanvasPosition.y +
+    worldDeltaY * scales.signedYScreenPerWorld;
+  const sceneDeltaX = worldDeltaX * JUMP_HOP_STAGE_WORLD_SCALE;
+  const sceneDeltaZ = worldDeltaY * JUMP_HOP_STAGE_FORWARD_SCALE;
+
+  return {
+    screenX: clamp((landedPixelX / stageSize.width) * 100, 6, 94),
+    screenY: clamp((landedPixelY / stageSize.height) * 100, 10, 92),
+    sceneX: currentPlatform.sceneX + sceneDeltaX,
+    sceneY:
+      currentPlatform.sceneY +
+      (isMiss ? 0.48 : JUMP_HOP_CHARACTER_TOP_FACE_SCENE_Y_OFFSET),
+    sceneZ: currentPlatform.sceneZ + sceneDeltaZ,
+    isMiss,
+  };
+}
+
 export function getJumpHopWorldLandingVisualPosition(
   originPlatform: JumpHopVisiblePlatform | null | undefined,
   scalePlatform: JumpHopVisiblePlatform | null | undefined,
@@ -309,32 +476,14 @@ export function getJumpHopWorldLandingVisualPosition(
     return null;
   }
 
-  const scales = getJumpHopScreenWorldScales(
+  return getJumpHopWorldPointVisualPosition(
     originPlatform,
     scalePlatform,
     stageSize,
-  );
-  const worldDeltaX = landedX - originPlatform.platform.x;
-  const worldDeltaY = landedY - originPlatform.platform.y;
-  const landedPixelX =
-    scales.currentCanvasPosition.x +
-    worldDeltaX * scales.signedXScreenPerWorld;
-  const landedPixelY =
-    scales.currentCanvasPosition.y +
-    worldDeltaY * scales.signedYScreenPerWorld;
-  const sceneDeltaX =
-    (landedX - originPlatform.platform.x) * JUMP_HOP_STAGE_WORLD_SCALE;
-  const sceneDeltaZ =
-    (landedY - originPlatform.platform.y) * JUMP_HOP_STAGE_FORWARD_SCALE;
-
-  return {
-    screenX: clamp((landedPixelX / stageSize.width) * 100, 6, 94),
-    screenY: clamp((landedPixelY / stageSize.height) * 100 - 3, 10, 92),
-    sceneX: originPlatform.sceneX + sceneDeltaX,
-    sceneY: originPlatform.sceneY + (isMiss ? 0.48 : 0.84),
-    sceneZ: originPlatform.sceneZ + sceneDeltaZ,
+    landedX,
+    landedY,
     isMiss,
-  };
+  );
 }
 
 export function isJumpHopLandingInsidePlatformFootprint(
@@ -358,10 +507,13 @@ export function isJumpHopLandingInsidePlatformFootprint(
     0,
     platform.height * 0.5 * JUMP_HOP_TOP_FACE_HITBOX_HEIGHT_RATIO,
   );
-  return (
-    Math.abs(landedX - platform.x) <= halfWidth &&
-    Math.abs(landedY - platform.y) <= halfHeight
-  );
+  if (halfWidth <= Number.EPSILON || halfHeight <= Number.EPSILON) {
+    return false;
+  }
+
+  const normalizedX = Math.abs(landedX - platform.x) / halfWidth;
+  const normalizedY = Math.abs(landedY - platform.y) / halfHeight;
+  return normalizedX + normalizedY <= 1 + Number.EPSILON;
 }
 
 function getJumpHopSuccessfulLandingVisualPosition(
@@ -381,89 +533,35 @@ function getJumpHopSuccessfulLandingVisualPosition(
   if (!landedPlatform) {
     return null;
   }
-
   const previousPlatformIndex = Math.max(0, lastJump.targetPlatformIndex - 1);
-  const previousWindowPlatforms = buildJumpHopVisiblePlatforms(
-    run.path,
-    previousPlatformIndex,
-    [],
-  );
   const previousPlatform =
-    previousWindowPlatforms.find(
-      (item) => item.index === previousPlatformIndex,
-    ) ?? null;
-  const targetPlatformInPreviousWindow =
-    previousWindowPlatforms.find(
-      (item) => item.index === lastJump.targetPlatformIndex,
-    ) ?? null;
-  const landingInPreviousWindow = getJumpHopWorldLandingVisualPosition(
-    previousPlatform,
-    targetPlatformInPreviousWindow,
+    platforms.find((item) => item.index === previousPlatformIndex) ?? null;
+  if (
+    previousPlatform &&
+    previousPlatform.index !== landedPlatform.index
+  ) {
+    return getJumpHopWorldLandingVisualPosition(
+      previousPlatform,
+      landedPlatform,
+      stageSize,
+      lastJump.landedX,
+      lastJump.landedY,
+      false,
+    );
+  }
+
+  const scalePlatform =
+    platforms.find((item) => item.index === run.currentPlatformIndex + 1) ??
+    landedPlatform;
+
+  return getJumpHopWorldLandingVisualPosition(
+    landedPlatform,
+    scalePlatform,
     stageSize,
     lastJump.landedX,
     lastJump.landedY,
     false,
   );
-  if (!landingInPreviousWindow || !targetPlatformInPreviousWindow) {
-    return null;
-  }
-
-  const targetCenterInPreviousWindow =
-    getJumpHopCharacterVisualPositionFromPlatform(
-      targetPlatformInPreviousWindow,
-    );
-  const landedPlatformCenter =
-    getJumpHopCharacterVisualPositionFromPlatform(landedPlatform);
-  const worldDeltaX = lastJump.landedX - landedPlatform.platform.x;
-  const worldDeltaY = lastJump.landedY - landedPlatform.platform.y;
-
-  return {
-    screenX: clamp(
-      landedPlatformCenter.screenX +
-        landingInPreviousWindow.screenX -
-        targetCenterInPreviousWindow.screenX,
-      6,
-      94,
-    ),
-    screenY: clamp(
-      landedPlatformCenter.screenY +
-        landingInPreviousWindow.screenY -
-        targetCenterInPreviousWindow.screenY,
-      10,
-      92,
-    ),
-    sceneX: landedPlatform.sceneX + worldDeltaX * JUMP_HOP_STAGE_WORLD_SCALE,
-    sceneY: landedPlatform.sceneY + 0.84,
-    sceneZ: landedPlatform.sceneZ + worldDeltaY * JUMP_HOP_STAGE_FORWARD_SCALE,
-    isMiss: false,
-  };
-}
-
-export function getJumpHopBackendDragVector(
-  run: JumpHopRuntimeRunSnapshotResponse | null,
-  platforms: JumpHopVisiblePlatform[],
-  stageSize: JumpHopCanvasSize,
-  dragVectorX: number,
-  dragVectorY: number,
-): JumpHopBackendDragVector {
-  const pair = getJumpHopCurrentTargetPlatforms(run, platforms);
-  if (!pair || stageSize.width <= 0 || stageSize.height <= 0) {
-    return {
-      dragVectorX,
-      dragVectorY,
-    };
-  }
-
-  const scales = getJumpHopScreenWorldScales(
-    pair.currentPlatform,
-    pair.targetPlatform,
-    stageSize,
-  );
-
-  return {
-    dragVectorX: dragVectorX / scales.xPixelsPerWorldUnit,
-    dragVectorY: dragVectorY / scales.yPixelsPerWorldUnit,
-  };
 }
 
 export function getJumpHopLandingAssistVisualPosition(
@@ -472,8 +570,6 @@ export function getJumpHopLandingAssistVisualPosition(
   characterPosition: JumpHopCharacterVisualPosition | null,
   stageSize: JumpHopCanvasSize,
   dragDistance: number,
-  _dragVectorX?: number | null,
-  _dragVectorY?: number | null,
 ) {
   if (
     !run ||
@@ -492,13 +588,9 @@ export function getJumpHopLandingAssistVisualPosition(
   }
   const { currentPlatform, targetPlatform } = pair;
 
-  const scales = getJumpHopScreenWorldScales(
-    currentPlatform,
-    targetPlatform,
-    stageSize,
-  );
-  const jumpWorldX = targetPlatform.platform.x - currentPlatform.platform.x;
-  const jumpWorldY = targetPlatform.platform.y - currentPlatform.platform.y;
+  const originWorld = getJumpHopCurrentFootWorldPosition(run, currentPlatform);
+  const jumpWorldX = targetPlatform.platform.x - originWorld.x;
+  const jumpWorldY = targetPlatform.platform.y - originWorld.y;
   const jumpWorldLength = Math.hypot(jumpWorldX, jumpWorldY);
   if (jumpWorldLength < 0.0001) {
     return null;
@@ -516,18 +608,24 @@ export function getJumpHopLandingAssistVisualPosition(
     (jumpWorldX / jumpWorldLength) * projectedWorldDistance;
   const landedWorldDeltaY =
     (jumpWorldY / jumpWorldLength) * projectedWorldDistance;
-  const landedWorldX = currentPlatform.platform.x + landedWorldDeltaX;
-  const landedWorldY = currentPlatform.platform.y + landedWorldDeltaY;
-  const landedPixelX =
-    scales.currentCanvasPosition.x +
-    landedWorldDeltaX * scales.signedXScreenPerWorld;
-  const landedPixelY =
-    scales.currentCanvasPosition.y +
-    landedWorldDeltaY * scales.signedYScreenPerWorld;
+  const landedWorldX = originWorld.x + landedWorldDeltaX;
+  const landedWorldY = originWorld.y + landedWorldDeltaY;
+  const landedPosition = getJumpHopWorldPointVisualPosition(
+    currentPlatform,
+    targetPlatform,
+    stageSize,
+    landedWorldX,
+    landedWorldY,
+    false,
+  );
+  if (!landedPosition) {
+    return null;
+  }
 
   return {
-    screenX: clamp((landedPixelX / stageSize.width) * 100, 6, 94),
-    screenY: clamp((landedPixelY / stageSize.height) * 100 - 3, 10, 92),
+    ...landedPosition,
+    landedWorldX,
+    landedWorldY,
     targetPlatformIndex: targetPlatform.index,
     isOnTargetPlatform: isJumpHopLandingInsidePlatformFootprint(
       targetPlatform.platform,
@@ -603,7 +701,7 @@ export function getJumpHopCharacterVisualPosition(
     (item) => item.index === run.currentPlatformIndex,
   );
   if (landedPlatform) {
-    return getJumpHopCharacterVisualPositionFromPlatform(landedPlatform);
+    return getJumpHopCharacterTopFaceVisualPosition(landedPlatform);
   }
 
   if (lastJump && run.status === 'failed') {
@@ -611,7 +709,7 @@ export function getJumpHopCharacterVisualPosition(
       (item) => item.index === lastJump.targetPlatformIndex,
     );
     if (targetPlatform) {
-      return getJumpHopCharacterVisualPositionFromPlatform(targetPlatform, true);
+      return getJumpHopCharacterTopFaceVisualPosition(targetPlatform, true);
     }
   }
 
diff --git a/src/services/match3dGeneratedModelCache.test.ts b/src/services/match3dGeneratedModelCache.test.ts
index b20ca8aa8..598d03a6a 100644
--- a/src/services/match3dGeneratedModelCache.test.ts
+++ b/src/services/match3dGeneratedModelCache.test.ts
@@ -27,14 +27,29 @@ describe('match3dGeneratedModelCache', () => {
 
   test('预加载生成模型字节并复用本地缓存', async () => {
     setStoredAccessToken('test-access-token', { emit: false });
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response(new Uint8Array([103, 108, 84, 70]), {
-        status: 200,
-        headers: {
-          'Content-Type': 'model/gltf-binary',
-        },
-      }),
-    );
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            read: {
+              signedUrl: 'https://oss.example.com/model.glb',
+              expiresAt: new Date(Date.now() + 60_000).toISOString(),
+            },
+          }),
+          {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+          },
+        ),
+      )
+      .mockResolvedValueOnce(
+        new Response(new Uint8Array([103, 108, 84, 70]), {
+          status: 200,
+          headers: {
+            'Content-Type': 'model/gltf-binary',
+          },
+        }),
+      );
 
     await preloadMatch3DGeneratedModelAssets(
       [
@@ -61,7 +76,13 @@ describe('match3dGeneratedModelCache', () => {
     );
 
     expect(Array.from(new Uint8Array(bytes))).toEqual([103, 108, 84, 70]);
-    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    expect(globalThis.fetch).toHaveBeenCalledTimes(2);
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[0]?.[0])).toContain(
+      '/api/assets/read-url',
+    );
+    expect(String(vi.mocked(globalThis.fetch).mock.calls[1]?.[0])).toBe(
+      'https://oss.example.com/model.glb',
+    );
   });
 
   test('模型源列表会去重并兼容 modelObjectKey', () => {