完善快速编辑参考图与生成占位

- 快速编辑支持最多8张额外参考图，并将原图自动作为最后一张参考图提交

- 快速编辑尺寸和模型沿用原图配置，按禁用态参数胶囊展示

- 快速编辑提交前同步改写原图引用为实际图序号

- 快速编辑生成改为创建独立画布生成占位，并支持键盘删除生成中对象

- 对齐生成类面板参考图图标、规范类固定参数和相关文档测试

src/index.css

@@ -3673,7 +3673,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background-size: 1rem 1rem;
 }
 
-.image-canvas-editor__layer img {
+.image-canvas-editor__layer img,
+.image-canvas-editor__layer video {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -4027,10 +4028,14 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   cursor: move;
 }
 
-.image-canvas-editor__layer img {
+.image-canvas-editor__layer img,
+.image-canvas-editor__layer video {
   display: block;
   border-radius: 0.1rem;
   box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
+}
+
+.image-canvas-editor__layer img {
   pointer-events: none;
 }
 
@@ -4163,6 +4168,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   color: #9333ea;
 }
 
+.image-canvas-editor__generation-frame--character-animation {
+  background:
+    radial-gradient(circle at 50% 36%, rgba(255, 247, 237, 0.96), transparent 32%),
+    linear-gradient(135deg, rgba(255, 247, 237, 0.92), rgba(254, 215, 170, 0.74));
+}
+
+.image-canvas-editor__generation-frame--character-animation.image-canvas-editor__generation-frame--focused {
+  border-color: rgba(249, 115, 22, 0.74);
+}
+
+.image-canvas-editor__generation-frame--character-animation
+  .image-canvas-editor__generation-frame-icon {
+  color: #f97316;
+}
+
 .image-canvas-editor__generation-frame--video {
   background:
     linear-gradient(90deg, rgba(15, 23, 42, 0.12) 10%, transparent 10% 90%, rgba(15, 23, 42, 0.12) 90%),
@@ -4373,6 +4393,24 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   color: #d97706;
 }
 
+.image-canvas-editor__generation-frame--quick-edit {
+  border-color: rgba(99, 102, 241, 0.28);
+  background:
+    linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.08)),
+    rgba(255, 255, 255, 0.72);
+}
+
+.image-canvas-editor__generation-frame--quick-edit.image-canvas-editor__generation-frame--focused {
+  box-shadow:
+    0 0 0 1px rgba(99, 102, 241, 0.26),
+    0 22px 54px rgba(99, 102, 241, 0.18);
+}
+
+.image-canvas-editor__generation-frame--quick-edit
+  .image-canvas-editor__generation-frame-icon {
+  color: rgba(79, 70, 229, 0.62);
+}
+
 .image-canvas-editor__metadata-corner {
   position: absolute;
   right: var(--image-canvas-editor-corner-offset, 0.35rem);
@@ -4451,6 +4489,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 8px 18px rgba(147, 51, 234, 0.24);
 }
 
+.image-canvas-editor__kind-badge--character-animation {
+  background: rgba(249, 115, 22, 0.94);
+  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.24);
+}
+
 .image-canvas-editor__kind-badge--icon {
   background: rgba(16, 185, 129, 0.92);
   box-shadow: 0 8px 18px rgba(16, 185, 129, 0.24);
@@ -4925,6 +4968,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   gap: 0.18rem 0.72rem;
 }
 
+.image-canvas-editor__generation-composer--character-animation {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto auto auto auto auto;
+  width: min(42rem, calc(100% - 1.5rem));
+}
+
 .image-canvas-editor__generation-ref {
   display: flex;
   width: auto;
@@ -5196,6 +5245,16 @@ button.image-canvas-editor__reference-chip:disabled {
   color: #0f172a;
 }
 
+.image-canvas-editor__reference-chip--quick-edit {
+  background: #f3f4f6;
+  color: #9ca3af;
+}
+
+.image-canvas-editor__reference-chip--quick-edit
+  .image-canvas-editor__reference-chip-icon {
+  color: #9ca3af;
+}
+
 .image-canvas-editor__reference-chip--video
   .image-canvas-editor__reference-chip-icon {
   color: #2563eb;
@@ -5945,6 +6004,7 @@ button.image-canvas-editor__reference-chip:disabled {
   cursor: default;
   opacity: 1;
   color: #475569;
+  pointer-events: none;
 }
 
 .image-canvas-editor__readonly-generation-option
@@ -6035,8 +6095,93 @@ button.image-canvas-editor__reference-chip:disabled {
   transform: translateX(-50%);
 }
 
+.image-canvas-editor__quick-edit-panel.image-canvas-editor__generation-composer {
+  width: min(42rem, calc(100vw - 1.5rem));
+  gap: 0.18rem 0.72rem;
+}
+
+.image-canvas-editor__generation-composer--quick-edit {
+  min-height: 11.8rem;
+}
+
+.image-canvas-editor__quick-edit-footer {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
 .image-canvas-editor__crop-expand-panel {
-  width: min(19rem, calc(100vw - 1.5rem));
+  width: min(18.5rem, calc(100vw - 1.5rem));
+  transform: none;
+}
+
+.image-canvas-editor__crop-expand-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #0f172a;
+  font-size: 0.92rem;
+}
+
+.image-canvas-editor__crop-expand-ratios {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.44rem;
+}
+
+.image-canvas-editor__crop-expand-ratio {
+  display: flex;
+  min-height: 2.35rem;
+  align-items: center;
+  gap: 0.46rem;
+  border: 1px solid rgba(148, 163, 184, 0.34);
+  border-radius: 0.72rem;
+  background: rgba(248, 250, 252, 0.92);
+  padding: 0 0.56rem;
+  color: #334155;
+  font-size: 0.78rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__crop-expand-ratio:hover {
+  border-color: rgba(59, 130, 246, 0.46);
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.image-canvas-editor__crop-expand-ratio--selected {
+  border-color: rgba(37, 99, 235, 0.76);
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.image-canvas-editor__crop-expand-ratio-shape {
+  width: 1.08rem;
+  height: 0.82rem;
+  flex: 0 0 auto;
+  border: 2px solid currentColor;
+  border-radius: 0.2rem;
+  opacity: 0.84;
+}
+
+.image-canvas-editor__crop-expand-ratio-shape--square {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.image-canvas-editor__crop-expand-ratio-shape--landscape {
+  width: 1.22rem;
+  height: 0.76rem;
+}
+
+.image-canvas-editor__crop-expand-ratio-shape--portrait {
+  width: 0.76rem;
+  height: 1.22rem;
+}
+
+.image-canvas-editor__crop-expand-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.58rem;
 }
 
 .image-canvas-editor__quick-edit-head {
@@ -6086,20 +6231,6 @@ button.image-canvas-editor__reference-chip:disabled {
   min-width: 6.8rem;
 }
 
-.image-canvas-editor__crop-expand-fields {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.45rem;
-}
-
-.image-canvas-editor__crop-expand-field {
-  display: grid;
-  gap: 0.26rem;
-  color: #475569;
-  font-size: 0.72rem;
-  font-weight: 850;
-}
-
 .image-canvas-editor__crop-expand-error {
   margin: 0;
   border-radius: 0.72rem;
@@ -6110,11 +6241,107 @@ button.image-canvas-editor__reference-chip:disabled {
   font-weight: 800;
 }
 
+.image-canvas-editor__crop-expand-frame {
+  position: absolute;
+  z-index: 999;
+  box-sizing: border-box;
+  border: 2px solid #38bdf8;
+  background:
+    linear-gradient(90deg, rgba(14, 165, 233, 0.2) 1px, transparent 1px),
+    linear-gradient(rgba(14, 165, 233, 0.2) 1px, transparent 1px);
+  background-size: 33.333% 33.333%;
+  box-shadow:
+    0 0 0 99999px rgba(15, 23, 42, 0.18),
+    0 0 0 1px rgba(255, 255, 255, 0.72) inset;
+  pointer-events: none;
+}
+
+.image-canvas-editor__crop-expand-source-mask {
+  position: absolute;
+  border: 1px dashed rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.08);
+  pointer-events: none;
+}
+
+.image-canvas-editor__crop-expand-handle {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  background: #0ea5e9;
+  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28);
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.image-canvas-editor__crop-expand-handle::before {
+  position: absolute;
+  inset: -0.7rem;
+  content: '';
+}
+
+.image-canvas-editor__crop-expand-handle--top-left {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+  transform: translate(-50%, -50%);
+}
+
+.image-canvas-editor__crop-expand-handle--top {
+  top: 0;
+  left: 50%;
+  cursor: ns-resize;
+  transform: translate(-50%, -50%);
+}
+
+.image-canvas-editor__crop-expand-handle--top-right {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+  transform: translate(50%, -50%);
+}
+
+.image-canvas-editor__crop-expand-handle--right {
+  top: 50%;
+  right: 0;
+  cursor: ew-resize;
+  transform: translate(50%, -50%);
+}
+
+.image-canvas-editor__crop-expand-handle--bottom-right {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+  transform: translate(50%, 50%);
+}
+
+.image-canvas-editor__crop-expand-handle--bottom {
+  bottom: 0;
+  left: 50%;
+  cursor: ns-resize;
+  transform: translate(-50%, 50%);
+}
+
+.image-canvas-editor__crop-expand-handle--bottom-left {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+  transform: translate(-50%, 50%);
+}
+
+.image-canvas-editor__crop-expand-handle--left {
+  top: 50%;
+  left: 0;
+  cursor: ew-resize;
+  transform: translate(-50%, -50%);
+}
+
 .image-canvas-editor__character-animation-panel {
   position: absolute;
   z-index: 14;
   display: grid;
-  width: min(22rem, calc(100vw - 1.5rem));
+  width: min(42rem, calc(100vw - 1.5rem));
   max-height: min(34rem, calc(100% - 1.5rem));
   gap: 0.58rem;
   overflow: auto;
@@ -6136,11 +6363,13 @@ button.image-canvas-editor__reference-chip:disabled {
 }
 
 .image-canvas-editor__character-animation-textarea {
+  grid-column: 1 / -1;
   min-height: 8rem;
 }
 
 .image-canvas-editor__character-animation-presets {
   display: flex;
+  grid-column: 1 / -1;
   flex-wrap: wrap;
   gap: 0.38rem;
 }
@@ -6156,6 +6385,7 @@ button.image-canvas-editor__reference-chip:disabled {
 
 .image-canvas-editor__character-animation-footer {
   display: grid;
+  grid-column: 1 / -1;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.46rem;
@@ -6370,6 +6600,11 @@ button.image-canvas-editor__reference-chip:disabled {
     transform: none;
   }
 
+  .image-canvas-editor__quick-edit-panel.image-canvas-editor__generation-composer {
+    width: auto;
+    bottom: 3.85rem;
+  }
+
   .image-canvas-editor__generation-composer {
     position: fixed;
     left: 0.75rem !important;