Unify canvas generation placement and UI changes

Add unified placement and UI updates for canvas generation: docs require ImageCanvasGenerationPlacementModel to compute placeholder positions (avoid overlaps, center viewport on placement) and limit frontend video model entries. Refactor UI components and tests: expose div props on PlatformFloatingMenu, make PlatformInlineOptionButton forwardRef, replace inline placeholder actions with ImageCanvasGenerationImageOptionsView in basic generation composer, enhance character animation panel with parameter menu portal and option choices, add reference chip UI, and update many tests to match new interactions and labels. These changes align generation workflows, accessibility labels, and positioning behavior across editor panels.
2026-06-18 11:40:19 +08:00
parent 17768119ea
commit 8956ed6fe6
29 changed files with 2292 additions and 1010 deletions
@@ -4821,17 +4821,17 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {

 .image-canvas-editor__generation-prompt {
  grid-column: 1 / -1;
-  min-height: 4.1rem;
+  min-height: 3.35rem;
  resize: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.05rem;
  background: #f8fafc;
-  padding: 0.64rem 0.9rem;
+  padding: 0.52rem 0.82rem;
  color: #0f172a;
  font: inherit;
-  font-size: 0.88rem;
+  font-size: 0.82rem;
  font-weight: 680;
-  line-height: 1.55;
+  line-height: 1.48;
  outline: none;
 }

@@ -4839,6 +4839,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  color: #94a3b8;
 }

+.image-canvas-editor__generation-prompt--borderless {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.image-canvas-editor__generation-prompt--borderless:focus {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
 .image-canvas-editor__video-prompt {
  grid-column: 1 / -1;
  min-height: 4.1rem;
@@ -4854,6 +4866,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.46rem;
+  position: relative;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 0.44rem;
 }
@@ -4892,11 +4905,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {

 .image-canvas-editor__reference-strip {
  display: flex;
+  grid-column: 1 / -1;
  min-width: 0;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
-  padding: 0.02rem 2.2rem 0.08rem 0;
+  padding: 0 2.2rem 0.02rem 0;
  scrollbar-width: thin;
 }

@@ -4966,6 +4980,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  color: #0f172a;
 }

+.image-canvas-editor__reference-chip--video
+  .image-canvas-editor__reference-chip-icon {
+  background: rgba(59, 130, 246, 0.12);
+  color: #2563eb;
+}
+
 .image-canvas-editor__option-picker {
  width: 100%;
  min-height: 2rem;
@@ -4981,6 +5001,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__option-cluster {
  min-height: 2.25rem;
  height: 2.25rem;
+  width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
@@ -5006,6 +5027,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }

 .image-canvas-editor__option-cluster--dimensions {
+  grid-column: auto;
  justify-self: start;
  gap: 0.42rem;
 }
@@ -5015,7 +5037,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }

 .image-canvas-editor__option-cluster--model {
-  grid-column: 3;
  max-width: min(15.5rem, 32vw);
  justify-self: end;
  overflow: hidden;
@@ -5023,6 +5044,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  white-space: nowrap;
 }

+.image-canvas-editor__option-popover-anchor {
+  position: relative;
+  min-width: 0;
+}
+
+.image-canvas-editor__option-popover-anchor--dimensions {
+  grid-column: 1;
+  justify-self: start;
+}
+
+.image-canvas-editor__option-popover-anchor--model {
+  grid-column: 3;
+  justify-self: end;
+}
+
 .image-canvas-editor__model-trigger-label {
  display: inline-flex;
  min-width: 0;
@@ -5056,11 +5092,48 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }

 .image-canvas-editor__option-popover {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 0.45rem);
+  z-index: 3;
  min-width: 16rem;
  max-width: min(23rem, calc(100vw - 1.5rem));
+  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1.05rem;
-  padding: 0.95rem;
+  background: rgba(255, 255, 255, 0.98);
+  padding: 1.78rem 0.95rem 0.95rem;
+  color: #111827;
  font-size: 0.82rem;
+  box-shadow:
+    0 22px 56px rgba(15, 23, 42, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(16px);
+}
+
+.image-canvas-editor__option-popover-anchor--model
+  .image-canvas-editor__option-popover {
+  right: 0;
+  left: auto;
+}
+
+.image-canvas-editor__option-popover-close {
+  position: absolute;
+  right: 0.54rem;
+  top: 0.5rem;
+  display: inline-flex;
+  width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #64748b;
+}
+
+.image-canvas-editor__option-popover-close:hover {
+  background: #f1f5f9;
+  color: #0f172a;
 }

 .image-canvas-editor__option-popover-sections {
@@ -5165,6 +5238,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  stroke-width: 3;
 }

+.image-canvas-editor__option-selected-check[data-visible='false'] {
+  opacity: 0;
+}
+
 .image-canvas-editor__option-popover-choice--ratio {
  flex-direction: column;
  gap: 0.42rem;
@@ -5210,6 +5287,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  line-height: 1;
 }

+.image-canvas-editor__mud-point-inline svg {
+  width: 0.88rem;
+  height: 0.88rem;
+}
+
 .image-canvas-editor__generation-composer .image-canvas-editor__option-field {
  min-width: 0;
 }
@@ -5784,19 +5866,23 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__spec-fields {
  grid-column: 1 / -1;
  display: grid;
-  gap: 0.38rem;
+  gap: 0.28rem;
 }

 .image-canvas-editor__spec-input {
-  min-height: 2.16rem;
+  min-height: 1.96rem;
 }

 .image-canvas-editor__spec-textarea {
-  min-height: 4.55rem;
+  min-height: 3.8rem;
 }

 .image-canvas-editor__spec-textarea--view {
-  min-height: 3.55rem;
+  min-height: 3.1rem;
+}
+
+.image-canvas-editor__spec-composer .image-canvas-editor__field-block {
+  gap: 0.24rem;
 }

 .image-canvas-editor__context-menu {