feat(ui): redesign image generator floating composer and settings panel

Compact the floating composer with an auto-resizing prompt editor and a scrollable settings popover, add a titled settings panel, and show the resolved image size in the settings summary. Add the imageCountLabel string for the count section. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-09 01:46:24 +08:00
parent cbf4e21e2b
commit 94718553c6
6 changed files with 235 additions and 43 deletions
@@ -242,6 +242,7 @@
  "referenceImage": "Reference",
  "imageSettings": "Image settings",
  "imageCountUnit": "{count} img",
+  "imageCountLabel": "Image",
  "quality": "Quality",
  "qualityAuto": "Auto",
  "qualityHigh": "High",
@@ -242,6 +242,7 @@
  "referenceImage": "参考图",
  "imageSettings": "图片参数",
  "imageCountUnit": "{count} 张",
+  "imageCountLabel": "生成数量",
  "quality": "质量",
  "qualityAuto": "自动",
  "qualityHigh": "高",
@@ -413,6 +413,14 @@
  gap: 20px;
 }

+.composer-settings-panel h3 {
+  margin: 0;
+  color: #242a34;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
 .composer-settings-panel section {
  display: grid;
  gap: 12px;
@@ -107,7 +107,8 @@ export function composerImageSize(settings: ComposerImageSettings) {

 export function composerSettingsSummary(settings: ComposerImageSettings) {
  const ratioLabel = composerRatioOptions.find((option) => option.id === settings.ratio)?.label ?? settings.ratio;
-  return `${qualityLabel(settings.quality)} · ${ratioLabel} · ${settings.count} img`;
+  const sizeLabel = settings.ratio === "auto" ? composerImageSize(settings).replace("x", "×") : ratioLabel;
+  return `${qualityLabel(settings.quality)} · ${sizeLabel} · ${settings.count} img`;
 }

 function qualityLabel(quality: ComposerImageQuality) {
@@ -348,16 +349,19 @@ export const CanvasAgentComposer = forwardRef<PromptComposerHandle, CanvasAgentC
 export function ComposerSettingsPanel({
  settings,
  onPatch,
-  onSelectRatio
+  onSelectRatio,
+  title
 }: {
  settings: ComposerImageSettings;
  onPatch: (patch: Partial<ComposerImageSettings>) => void;
  onSelectRatio: (ratio: ComposerImageRatio) => void;
+  title?: string;
 }) {
  const { t } = useI18n();

  return (
    <div className="composer-settings-panel">
+      {title && <h3>{title}</h3>}
      <section>
        <h4>{t("quality")}</h4>
        <div className="composer-quality-control">
@@ -391,7 +395,7 @@ export function ComposerSettingsPanel({
        </div>
      </section>
      <section>
-        <h4>Image</h4>
+        <h4>{t("imageCountLabel")}</h4>
        <div className="composer-count-grid">
          {Array.from({ length: 10 }, (_, index) => index + 1).map((count) => (
            <button key={count} type="button" className={settings.count === count ? "selected" : ""} onClick={() => onPatch({ count })}>
@@ -1,36 +1,47 @@
 .image-generator-floating-composer {
  position: absolute;
  z-index: 36;
-  min-height: 188px;
-  border: 1px solid #cbd2dc;
-  border-radius: 28px;
+  min-height: 150px;
+  overflow: hidden;
+  border: 0.5px solid #d7d9de;
+  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
-  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.14);
+  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.13);
+  backdrop-filter: blur(18px);
  pointer-events: auto;
 }

 .image-generator-reference-row {
  display: flex;
  align-items: flex-start;
-  gap: 10px;
-  min-height: 72px;
-  margin: 14px 16px 0;
+  padding: 6px;
+  gap: 8px;
+  min-height: 68px;
+  margin: 8px 8px 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.image-generator-reference-row::-webkit-scrollbar {
+  display: none;
 }

 .image-generator-reference-tile,
 .image-generator-reference-preview {
-  width: 72px;
-  height: 72px;
-  border-radius: 20px;
+  width: 56px;
+  height: 68px;
+  border-radius: 16px;
 }

 .image-generator-reference-tile {
  display: grid;
  place-items: center;
-  gap: 6px;
-  color: #a6abb5;
+  gap: 5px;
+  flex: 0 0 auto;
+  color: rgba(20, 20, 20, 0.46);
  background: #f4f4f4;
-  font-size: 12px;
+  font-size: 11px;
+  line-height: 1.2;
 }

 .image-generator-reference-tile span {
@@ -48,7 +59,7 @@
  display: block;
  width: 100%;
  height: 100%;
-  border-radius: 20px;
+  border-radius: 16px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
@@ -77,23 +88,26 @@
  display: block;
  box-sizing: border-box;
  width: 100%;
-  min-height: 92px;
-  margin: 10px 0 0;
-  padding: 0 32px;
+  height: auto;
+  min-height: 44px;
+  max-height: 176px;
+  margin: 2px 0 0;
+  padding: 1px 16px 0;
  border: 0;
  outline: 0;
  resize: none;
-  color: #1f2937;
+  overflow-y: hidden;
+  color: rgba(0, 0, 0, 0.9);
  background: transparent;
  caret-color: #111827;
  font-family: inherit;
-  font-size: 18px;
-  font-weight: 520;
-  line-height: 26px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 25px;
 }

 .image-generator-prompt-editor::placeholder {
-  color: #a6acb6;
+  color: rgba(0, 0, 0, 0.3);
  opacity: 1;
 }

@@ -111,8 +125,8 @@
 .image-generator-composer-toolbar {
  display: flex;
  align-items: center;
-  gap: 9px;
-  padding: 8px 14px 13px 28px;
+  gap: 4px;
+  padding: 4px 8px 8px;
 }

 .image-generator-settings-chip,
@@ -121,17 +135,21 @@
  height: 36px;
  display: inline-flex;
  align-items: center;
-  gap: 8px;
+  gap: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #222831;
  background: #fff;
-  font-size: 15px;
-  font-weight: 560;
+  font-size: 13px;
+  font-weight: 500;
 }

 .image-generator-settings-chip {
-  padding: 0 8px;
+  height: 32px;
+  max-width: 220px;
+  padding: 0 8px 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
 }

 .image-generator-settings-chip:hover,
@@ -150,11 +168,13 @@

 .image-generator-composer-spacer {
  flex: 1;
+  min-width: 6px;
 }

 .image-generator-model-button {
-  max-width: 162px;
-  padding: 0 10px;
+  height: 32px;
+  max-width: 140px;
+  padding: 0 6px 0 8px;
  overflow: hidden;
  white-space: nowrap;
 }
@@ -166,9 +186,10 @@
 }

 .image-generator-send-button {
-  min-width: 58px;
+  height: 32px;
+  min-width: 56px;
  justify-content: center;
-  padding: 0 18px;
+  padding: 0 12px;
  color: #fff;
  background: #222;
  font-weight: 760;
@@ -179,3 +200,144 @@
  background: #efefef;
  opacity: 1;
 }
+
+.composer-settings-popover.image-generator-settings-popover-panel {
+  width: min(312px, calc(100vw - 24px));
+  max-height: min(480px, calc(100vh - 40px));
+  overflow: auto;
+  padding: 0;
+  border: 0.5px solid #d9dce2;
+  border-radius: 16px;
+  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.14);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(16, 24, 40, 0.28) transparent;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar {
+  width: 10px;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar-thumb {
+  min-height: 42px;
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: rgba(16, 24, 40, 0.28);
+  background-clip: content-box;
+}
+
+.image-generator-settings-popover-panel::-webkit-scrollbar-thumb:hover {
+  background: rgba(16, 24, 40, 0.38);
+  background-clip: content-box;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel {
+  gap: 16px;
+  padding: 14px 16px 16px;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel h3 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel section {
+  gap: 8px;
+}
+
+.image-generator-settings-popover-panel .composer-settings-panel h4 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.image-generator-settings-popover-panel .composer-quality-control {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  overflow: visible;
+  border-radius: 0;
+  background: transparent;
+}
+
+.image-generator-settings-popover-panel .composer-quality-control button,
+.image-generator-settings-popover-panel .composer-count-grid button {
+  height: 32px;
+  border: 1px solid #d8dbe1;
+  border-radius: 999px;
+  background: #fff;
+  color: #262b34;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.image-generator-settings-popover-panel .composer-quality-control button.selected {
+  border-color: #2d3036;
+  background: #fff;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions {
+  gap: 8px;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions label {
+  height: 32px;
+  gap: 6px;
+  padding: 0 8px;
+  border-radius: 8px;
+  background: #f3f3f3;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions input {
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.image-generator-settings-popover-panel .composer-dimensions i {
+  width: 32px;
+  color: #7c828c;
+  text-align: center;
+}
+
+.image-generator-settings-popover-panel .composer-ratio-grid,
+.image-generator-settings-popover-panel .composer-count-grid {
+  gap: 8px;
+}
+
+.image-generator-settings-popover-panel .composer-ratio-grid button {
+  aspect-ratio: auto;
+  height: 72px;
+  gap: 6px;
+  padding: 8px;
+  border-radius: 12px;
+  color: #262b34;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.image-generator-settings-popover-panel .composer-ratio-grid button.selected,
+.image-generator-settings-popover-panel .composer-count-grid button.selected {
+  border-color: #d3d6dd;
+  background: #eeeeee;
+}
+
+.image-generator-settings-popover-panel .ratio-glyph {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+  border-color: #525862;
+  border-radius: 4px;
+}
+
+.image-generator-settings-popover-panel .ratio-glyph.wide {
+  width: 24px;
+  height: 16px;
+}
+
+.image-generator-settings-popover-panel .ratio-glyph.portrait {
+  width: 16px;
+  height: 24px;
+}
@@ -9,6 +9,7 @@ import type { AgentContent } from "@/domain/design";
 import { useI18n } from "@/i18n/i18n";
 import {
  ComposerSettingsPanel,
+  composerImageSize,
  composerRatioOptions,
  type CanvasComposerModel,
  type ComposerImageRatio,
@@ -34,12 +35,12 @@ type ImageGeneratorFloatingComposerProps = {
  onSubmit: (contents: AgentContent[], reset: () => void) => void;
 };

-const horizontalInset = 36;
-const preferredWidth = 860;
-const minimumWidth = 520;
+const horizontalInset = 24;
+const preferredWidth = 536;
+const minimumWidth = 320;
 const verticalInset = 18;
-const estimatedComposerHeight = 210;
-const composerGap = 18;
+const estimatedComposerHeight = 150;
+const composerGap = 16;

 function clamp(value: number, min: number, max: number) {
  return Math.min(Math.max(value, min), max);
@@ -85,8 +86,9 @@ function composerStyle(bounds: NodeScreenBounds, stageWidth: number, stageHeight

 function imageSettingsSummary(settings: ComposerImageSettings, t: (key: string) => string) {
  const ratioLabel = composerRatioOptions.find((option) => option.id === settings.ratio)?.label ?? settings.ratio;
+  const sizeLabel = settings.ratio === "auto" ? composerImageSize(settings).replace("x", "×") : ratioLabel;
  const countLabel = t("imageCountUnit").replace("{count}", String(settings.count));
-  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${ratioLabel} · ${countLabel}`;
+  return `${t(`quality${settings.quality[0].toUpperCase()}${settings.quality.slice(1)}`)} · ${sizeLabel} · ${countLabel}`;
 }

 export function ImageGeneratorFloatingComposer({
@@ -106,6 +108,7 @@ export function ImageGeneratorFloatingComposer({
 }: ImageGeneratorFloatingComposerProps) {
  const { t } = useI18n();
  const rootRef = useRef<HTMLDivElement | null>(null);
+  const promptEditorRef = useRef<HTMLTextAreaElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const [text, setText] = useState("");
  const [references, setReferences] = useState<UploadedReferenceImage[]>([]);
@@ -126,6 +129,18 @@ export function ImageGeneratorFloatingComposer({
    return () => observer.disconnect();
  }, []);

+  useLayoutEffect(() => {
+    const editor = promptEditorRef.current;
+    if (!editor) return;
+    const style = window.getComputedStyle(editor);
+    const minHeight = Number.parseFloat(style.minHeight) || 44;
+    const maxHeight = Number.parseFloat(style.maxHeight) || 176;
+    editor.style.height = "auto";
+    const nextHeight = Math.min(Math.max(editor.scrollHeight, minHeight), maxHeight);
+    editor.style.height = `${nextHeight}px`;
+    editor.style.overflowY = editor.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [promptValue]);
+
  const patchSettings = (patch: Partial<ComposerImageSettings>) => {
    onSettingsChange({ ...settings, ...patch });
  };
@@ -209,6 +224,7 @@ export function ImageGeneratorFloatingComposer({
        </button>
      </div>
      <textarea
+        ref={promptEditorRef}
        value={promptValue}
        placeholder={t("canvasPromptPlaceholder")}
        aria-label={t("canvasPromptPlaceholder")}
@@ -225,8 +241,8 @@ export function ImageGeneratorFloatingComposer({
              {settingsOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
            </button>
          </PopoverTrigger>
-          <PopoverContent className="composer-settings-popover" align="start" sideOffset={12}>
-            <ComposerSettingsPanel settings={settings} onPatch={patchSettings} onSelectRatio={selectRatio} />
+          <PopoverContent className="composer-settings-popover image-generator-settings-popover-panel" align="start" sideOffset={12}>
+            <ComposerSettingsPanel settings={settings} onPatch={patchSettings} onSelectRatio={selectRatio} title={t("imageSettings")} />
          </PopoverContent>
        </Popover>