Merge remote-tracking branch 'web/master' into feat/pixel_art2

docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md

@@ -91,7 +91,7 @@
 - 登录态上传和生成结果必须先落 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 需要走修复上传并回写轻量引用。裁扩在项目上下文中虽然由前端 canvas 本地渲染 PNG，也必须先上传 OSS / asset object 并创建 `editor_project_resource`，再把带正式 `resourceId/objectKey/assetObjectId` 的裁扩图层加入画布；不能先把 `local-resource-*` + Data URL 图层交给项目保存或后续去背景。上传到生成面板参考图槽位的图片必须先创建 `editor_project_resource` 行；没有当前工程 ID 时才创建账号级 `editor_asset` 行，随后把对应 `resourceId` 或 `assetId` 写入参考图临时状态；生成请求提交前必须把临时状态解析成 `objectKey`、项目资源 ID 或素材 ID，未登记的本地图片和普通图片路径先上传 OSS，不能直接提交 Data URL、Blob URL 或临时图片源。
 - 资源表保存资源和素材级元数据；图层位置、层级、分组选中所需 ID 和 groupId 保存在 `editor_canvas` 的布局 JSON。布局 JSON 是混合数组：普通图层按 `layerId/resourceId` 保存，生成器占位和生成器对话框按 `itemType: "generation-dialog"` 保存，不新增单独表。普通图层的新保存不再把 `assetKind/generationInputs` 写入布局 JSON；刷新时优先从 `editor_project_resource` 恢复，旧布局中的同名字段只作为兼容兜底。生成器快照必须包含生成器 ID、模式、提示词、参数、参考图、状态、占位框位置和可选 `generatedLayerId`；角色、图标等纯色抠图生成器的前端用户路径不保存或恢复 `screenColor` / `segModel`，同源重绘也不再从 `generationInputs.fields` 恢复 `抠图背景色` 或 `抠图模型`；宣发素材生成器还必须保存并恢复 `publicationWorkflowId`、`publicationGameInfo` 和 `publicationReferences`，避免刷新后生成卡片字段或参考图丢失。生成器快照中的参考图同样只保存 `resourceId/sourceAssetId` 行引用和展示所需 label，不保存图片 Data URL、signed URL 或 `objectKey`；刷新时用 `editor_project_resource` / `editor_asset` 行恢复临时生成请求所需图片源。生成成功后仍保存该快照，只是渲染时由 `generatedLayerId` 锚定到成品图层而不重复显示灰色占位框。`generationInputs.references` 是用户可见输入快照中的行级索引，只允许保存 `{ title, label, refType, refId }`；生成接口只接收提交前临时状态解析出的 `objectKey` 或资源 ID；Data URL、Blob URL 和 signed URL 不进入请求体，不进入资源 / 素材元数据。图层展示尺寸不再作为独立 `Size` 真相保存，刷新与新建图层均按 `Resolution`（`originalWidth/originalHeight`）原分辨率显示。图层组第一版是画布内布局语义，不单独建表。
 - 图片类、生成视频和音频结果除作为 `editor_project_resource` 和画布图层保存外，还要写入账号级 `editor_asset` 素材库；该写入由生成 BFF 在请求携带 `assetFolderId` 时完成。角色、图标图集、UI 提取和角色动作等多产物任务把实际产生的 provider 原始输出及后处理结果分别入库：所有条目沿用 `character`、`icon-spritesheet`、`character-animation` 等真实类型，provider 原始输出承载任务模型成本，后处理派生产物阶段成本为 0。后台素材查询以最终产物为父行、每个中间产物为可展开的独立子行，分页只计算父任务；手动重拆图集保留独立 `taskId` 用于存储隔离和日志排障，通过私有 provenance 从服务端生成账号素材的 source resource、asset object 或 Object Key 取得可信来源任务，并把它写入 `groupTaskId`，不信任客户端可提交的 resource `taskId/assetKind`；跨项目复用后仍可通过稳定媒体引用找回来源。没有可信来源的新拆分显式归到自身任务，不走历史资源链回溯。每个手动切片同时写入 `groupTaskExpectedAssetCount`，全部切片落库后写独立 cohort 完成事实；后台 read model 只让同一根任务的一个已完成拆分批次并入原图集父项，用户后来删除单片不会让批次脱组，部分失败批次和后续重复拆分批次按各自真实任务分页，避免残缺批次抢占根任务、单组无限增长或素材丢失。历史行在项目资源仍存在时兼容回溯，删除项目资源前只固化直接受影响行的真实来源字段，有界展示 ID 不反写数据库。`GENARRATIVE_EXTERNAL_GENERATION_MODE=queue` 下，画布图片、改图、图标素材、UI 素材提取、角色动作、视频、音效和背景音乐生成都先返回 `queueState`，前端轮询 `/api/runtime/external-generation/jobs/{jobId}` 到完成后重新读取项目快照；`inline` 或无项目上下文时才使用响应中的 resource / asset 快照做本地落画布兜底，不再把同一生成结果二次调用素材创建接口。生成请求失败、inline 完成或 queue 任务终态完成 / 失败后，右上角泥点 chip 必须通过 `/profile/dashboard` 回读余额，不做本地乐观扣减。生成视频会单独抽取首帧封面写入 `thumbnailSrc`，素材栏和拖回画布时沿用该封面作为 poster。
-- 生成面板不展示资源名称输入，默认使用原有自动编号；提示词输入保持统一可见边框。内部命名契约仍使用可选 `assetLabel`，最大 80 字符并在提交时 trim；历史状态或内部调用携带非空名称时，同一个名称必须贯穿 `assetLabel`、`canvasCompletion.title`、项目资源、账号素材和本地兜底图层，刷新后不得退回模板名。图标图集与角色动作请求同样兼容该字段，中间原图使用主名称加固定后缀；图标拆分素材按全连通域视觉顺序自动命名为 `素材 N`。
+- 生成面板不展示资源名称输入，默认使用原有自动编号；提示词输入保持统一可见边框。图片生成、快速编辑、重绘、修改图片、视频、音频、角色、图标、UI / 自定义规范、角色动画和宣发素材描述统一直接使用公共 `AutoGrowTextArea`，不经 `PlatformTextField` 的 textarea 分支；`AutoGrowTextArea` 负责尺寸、溢出及统一的 disabled 光标 / 透明度反馈，画布内生成面板统一由 `image-canvas-editor__generation-prompt` 承载边框、背景、padding、圆角和 focus chrome，独立修改图片弹窗继续使用 `image-canvas-editor__generate-prompt`，用途专属类只追加最小高度等差异，不得新建第三套 textarea chrome。Enter 继续输入换行而不提交表单。内部命名契约仍使用可选 `assetLabel`，最大 80 字符并在提交时 trim；历史状态或内部调用携带非空名称时，同一个名称必须贯穿 `assetLabel`、`canvasCompletion.title`、项目资源、账号素材和本地兜底图层，刷新后不得退回模板名。图标图集与角色动作请求同样兼容该字段，中间原图使用主名称加固定后缀；图标拆分素材按全连通域视觉顺序自动命名为 `素材 N`。
 - 画布 Agent 会话按“SpacetimeDB 元数据 + OSS 消息正文”存储：`editor_agent_conversation` 只保存 `conversationId/projectId/ownerUserId/title/messagesObjectKey/deleted/createdAt/updatedAt` 等会话元数据；消息正文整体保存为私有 OSS JSON 文档 `editor-agent/{conversationId}.json`。消息文档单对象上限为 2 MiB，同一会话的消息追加和工具结果回填由 api-server 按 `conversationId` 串行化，避免“读 OSS → 改消息 → 写 OSS”并发覆盖。前端只通过 api-server BFF 读取和发送会话，不直接读写 SpacetimeDB，也不直接读写 OSS。
 - Agent 消息附件只允许引用当前工程画布资源或账号素材库图片，来源类型为 `canvas_resource` / `library_asset`，最多 9 张。附件请求可携带展示用 `imageSrc/thumbnailSrc/objectKey/width/height/label`，但持久化真相仍以后端校验后的 resource / asset 行和 OSS 对象为准；不得把 Data URL、signed URL 或 blob URL 当作会话长期事实。
 - 前端不直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。

docs/【编辑器】画布Agent对话面板-2026-07-03.md

@@ -61,7 +61,7 @@
 - 对话框与左侧素材 / 图层侧栏**不互斥**，允许同时展开，便于在对话中选取和核对画布素材；左侧栏切换不改变 Agent 面板开关状态。
 - 桌面端对话框固定宽约 360–400px；移动端抽屉式全宽覆盖；收起态为胶囊/圆形入口按钮。
 - 底部消息输入框随输入内容从单行高度自动增长，最大高度为
-  128px；输入框及其 Enter 提交、原生自适应和兼容降级统一封装在独立 `EditorAgentDraftTextarea` 组件中。支持 `field-sizing: content` 的浏览器使用原生内容尺寸自适应，不支持该属性的旧 Safari / iOS WebView 使用前端测量降级，并在宽度变化时重新计算换行高度。内容超过最大高度后停止增长并启用内部纵向滚动，内容缩短或清空后同步收缩。内部滚动条使用浅灰窄滑块和透明轨道，上下留白不得溢出输入框圆角边界；输入框在窄屏下允许收缩且不产生横向滚动。
+  128px；原生自适应和兼容降级统一由公共 `AutoGrowTextArea` 组件承载，`EditorAgentDraftTextarea` 只保留 Agent 专属视觉、粘贴和 Enter 提交语义。支持 `field-sizing: content` 的浏览器使用原生内容尺寸自适应；不支持该属性的旧 Safari / iOS WebView 使用前端测量降级，受控 `value` 更新、非受控输入事件和宽度变化都必须重新计算换行高度，同时继续转发调用方的 `onInput`。降级测量必须按元素实际 `box-sizing` 区分 border-box 与 content-box，不能重复计入 padding 或 border。内容超过最大高度后停止增长并启用内部纵向滚动，内容缩短或清空后同步收缩。内部滚动条使用浅灰窄滑块和透明轨道，上下留白不得溢出输入框圆角边界；输入框在窄屏下允许收缩且不产生横向滚动。
 - Enter 发送必须同时排除 `isComposing` 和旧 Safari / WebKit 候选词确认事件的 `keyCode === 229`，避免输入法选词时误发送。
 - 用户消息必须包含去除首尾空白后的非空文本；附件只能随文本消息发送，前端发送门禁与后端 `module-editor-agent` 领域校验必须同时拒绝纯附件消息。
 - 会话管理入口在对话框头部：当前会话标题 + 历史会话下拉（按更新时间倒序）+ 新建对话按钮，全部包在对话框内。

src/components/common/AutoGrowTextArea.test.tsx

@@ -0,0 +1,288 @@
+/* @vitest-environment jsdom */
+
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { AutoGrowTextArea } from './AutoGrowTextArea';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('AutoGrowTextArea', () => {
+  it('uses native field sizing when the browser supports it', () => {
+    const supports = vi.fn().mockReturnValue(true);
+    const resizeObserver = vi.fn();
+    const onChange = vi.fn();
+    vi.stubGlobal('CSS', { supports });
+    vi.stubGlobal('ResizeObserver', resizeObserver);
+
+    render(
+      <AutoGrowTextArea
+        aria-label="自动增长输入框"
+        value=""
+        onChange={onChange}
+      />,
+    );
+
+    const input = screen.getByLabelText(
+      '自动增长输入框',
+    ) as HTMLTextAreaElement;
+    expect(supports).toHaveBeenCalledWith('field-sizing', 'content');
+    expect(resizeObserver).not.toHaveBeenCalled();
+    expect(input.getAttribute('rows')).toBe('1');
+    expect(input.className).toContain('auto-grow-text-area');
+    expect(input.className).toContain('[field-sizing:content]');
+    expect(input.className).toContain('min-h-10');
+    expect(input.className).toContain('max-h-32');
+    expect(input.className).toContain('overflow-y-auto');
+    expect(input.className).toContain('disabled:cursor-not-allowed');
+    expect(input.className).toContain('disabled:opacity-60');
+    expect(input.style.height).toBe('');
+
+    fireEvent.change(input, { target: { value: '新内容' } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('falls back to measured sizing, preserves css limits and remeasures width changes', () => {
+    let resizeObserverCallback!: ResizeObserverCallback;
+    const observe = vi.fn();
+    const disconnect = vi.fn();
+    vi.stubGlobal('CSS', { supports: vi.fn().mockReturnValue(false) });
+    vi.stubGlobal(
+      'ResizeObserver',
+      vi.fn().mockImplementation((callback: ResizeObserverCallback) => {
+        resizeObserverCallback = callback;
+        return {
+          observe,
+          unobserve: vi.fn(),
+          disconnect,
+        };
+      }),
+    );
+
+    const { rerender, unmount } = render(
+      <AutoGrowTextArea
+        aria-label="自动增长输入框"
+        value=""
+        style={{
+          boxSizing: 'border-box',
+          minHeight: '80px',
+          maxHeight: '128px',
+        }}
+        onChange={vi.fn()}
+      />,
+    );
+    const input = screen.getByLabelText(
+      '自动增长输入框',
+    ) as HTMLTextAreaElement;
+    expect(observe).toHaveBeenCalledWith(input);
+    let contentHeight = 92;
+    Object.defineProperty(input, 'offsetHeight', {
+      configurable: true,
+      get: () => {
+        const styleHeight = Number.parseFloat(input.style.height);
+        return Number.isNaN(styleHeight) ? 82 : styleHeight;
+      },
+    });
+    Object.defineProperty(input, 'clientHeight', {
+      configurable: true,
+      get: () => input.offsetHeight - 2,
+    });
+    Object.defineProperty(input, 'scrollHeight', {
+      configurable: true,
+      get: () => contentHeight,
+    });
+
+    rerender(
+      <AutoGrowTextArea
+        aria-label="自动增长输入框"
+        value="第一行\n第二行\n第三行\n第四行\n第五行"
+        style={{
+          boxSizing: 'border-box',
+          minHeight: '80px',
+          maxHeight: '128px',
+        }}
+        onChange={vi.fn()}
+      />,
+    );
+    expect(input.style.height).toBe('94px');
+    expect(input.style.overflowY).toBe('hidden');
+
+    contentHeight = 180;
+    act(() => {
+      resizeObserverCallback(
+        [
+          {
+            target: input,
+            contentRect: { width: 180 },
+          } as unknown as ResizeObserverEntry,
+        ],
+        {} as ResizeObserver,
+      );
+    });
+    expect(input.style.height).toBe('128px');
+    expect(input.style.overflowY).toBe('auto');
+
+    contentHeight = 30;
+    rerender(
+      <AutoGrowTextArea
+        aria-label="自动增长输入框"
+        value="短内容"
+        style={{
+          boxSizing: 'border-box',
+          minHeight: '80px',
+          maxHeight: '128px',
+        }}
+        onChange={vi.fn()}
+      />,
+    );
+    expect(input.style.height).toBe('80px');
+    expect(input.style.overflowY).toBe('hidden');
+
+    unmount();
+    expect(disconnect).toHaveBeenCalledTimes(1);
+  });
+
+  it('remeasures uncontrolled input changes and forwards the consumer input handler', () => {
+    const onInput = vi.fn();
+    vi.stubGlobal('CSS', { supports: vi.fn().mockReturnValue(false) });
+    vi.stubGlobal(
+      'ResizeObserver',
+      vi.fn().mockImplementation(() => ({
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      })),
+    );
+
+    render(
+      <AutoGrowTextArea
+        aria-label="非受控自动增长输入框"
+        defaultValue="初始内容"
+        style={{
+          boxSizing: 'border-box',
+          minHeight: '40px',
+          maxHeight: '128px',
+        }}
+        onInput={onInput}
+      />,
+    );
+    const input = screen.getByLabelText(
+      '非受控自动增长输入框',
+    ) as HTMLTextAreaElement;
+    let contentHeight = 90;
+    Object.defineProperty(input, 'offsetHeight', {
+      configurable: true,
+      get: () => {
+        const styleHeight = Number.parseFloat(input.style.height);
+        return Number.isNaN(styleHeight) ? 42 : styleHeight;
+      },
+    });
+    Object.defineProperty(input, 'clientHeight', {
+      configurable: true,
+      get: () => input.offsetHeight - 2,
+    });
+    Object.defineProperty(input, 'scrollHeight', {
+      configurable: true,
+      get: () => contentHeight,
+    });
+
+    fireEvent.input(input, {
+      target: { value: '第一行\n第二行\n第三行\n第四行' },
+    });
+    expect(input.style.height).toBe('92px');
+    expect(input.style.overflowY).toBe('hidden');
+
+    contentHeight = 180;
+    fireEvent.input(input, {
+      target: { value: '很多行内容'.repeat(30) },
+    });
+    expect(input.style.height).toBe('128px');
+    expect(input.style.overflowY).toBe('auto');
+
+    contentHeight = 20;
+    fireEvent.input(input, { target: { value: '短内容' } });
+    expect(input.style.height).toBe('40px');
+    expect(input.style.overflowY).toBe('hidden');
+    expect(onInput).toHaveBeenCalledTimes(3);
+  });
+
+  it('measures content-box height without double-counting padding or borders', () => {
+    vi.stubGlobal('CSS', { supports: vi.fn().mockReturnValue(false) });
+    vi.stubGlobal(
+      'ResizeObserver',
+      vi.fn().mockImplementation(() => ({
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      })),
+    );
+
+    const { rerender } = render(
+      <AutoGrowTextArea
+        aria-label="内容盒输入框"
+        value=""
+        style={{
+          boxSizing: 'content-box',
+          minHeight: '40px',
+          maxHeight: '128px',
+          paddingTop: '10px',
+          paddingBottom: '6px',
+        }}
+        onChange={vi.fn()}
+      />,
+    );
+    const input = screen.getByLabelText(
+      '内容盒输入框',
+    ) as HTMLTextAreaElement;
+    let contentHeight = 120;
+    Object.defineProperty(input, 'offsetHeight', {
+      configurable: true,
+      get: () => 122,
+    });
+    Object.defineProperty(input, 'clientHeight', {
+      configurable: true,
+      get: () => 120,
+    });
+    Object.defineProperty(input, 'scrollHeight', {
+      configurable: true,
+      get: () => contentHeight,
+    });
+
+    rerender(
+      <AutoGrowTextArea
+        aria-label="内容盒输入框"
+        value="多行内容"
+        style={{
+          boxSizing: 'content-box',
+          minHeight: '40px',
+          maxHeight: '128px',
+          paddingTop: '10px',
+          paddingBottom: '6px',
+        }}
+        onChange={vi.fn()}
+      />,
+    );
+    expect(input.style.height).toBe('104px');
+    expect(input.style.overflowY).toBe('hidden');
+
+    contentHeight = 160;
+    rerender(
+      <AutoGrowTextArea
+        aria-label="内容盒输入框"
+        value="更多多行内容"
+        style={{
+          boxSizing: 'content-box',
+          minHeight: '40px',
+          maxHeight: '128px',
+          paddingTop: '10px',
+          paddingBottom: '6px',
+        }}
+        onChange={vi.fn()}
+      />,
+    );
+    expect(input.style.height).toBe('128px');
+    expect(input.style.overflowY).toBe('auto');
+  });
+});

src/components/common/AutoGrowTextArea.tsx

@@ -0,0 +1,130 @@
+import {
+  type InputEventHandler,
+  type TextareaHTMLAttributes,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+const DEFAULT_MIN_HEIGHT_PX = 40;
+const DEFAULT_MAX_HEIGHT_PX = 128;
+
+function supportsNativeFieldSizing() {
+  return (
+    typeof CSS !== 'undefined' &&
+    typeof CSS.supports === 'function' &&
+    CSS.supports('field-sizing', 'content')
+  );
+}
+
+function parseComputedPixelValue(value: string, fallback: number) {
+  const parsedValue = Number.parseFloat(value);
+  return Number.isFinite(parsedValue) ? parsedValue : fallback;
+}
+
+function resizeFallbackTextArea(textarea: HTMLTextAreaElement) {
+  textarea.style.height = 'auto';
+
+  const computedStyle = window.getComputedStyle(textarea);
+  const minHeight = parseComputedPixelValue(
+    computedStyle.minHeight,
+    DEFAULT_MIN_HEIGHT_PX,
+  );
+  const maxHeight = Math.max(
+    minHeight,
+    parseComputedPixelValue(computedStyle.maxHeight, DEFAULT_MAX_HEIGHT_PX),
+  );
+  const contentHeight = textarea.scrollHeight;
+  const borderHeight = Math.max(
+    0,
+    textarea.offsetHeight - textarea.clientHeight,
+  );
+  const isBorderBox = computedStyle.boxSizing === 'border-box';
+  const paddingHeight =
+    parseComputedPixelValue(computedStyle.paddingTop, 0) +
+    parseComputedPixelValue(computedStyle.paddingBottom, 0);
+  const measuredHeight = isBorderBox
+    ? contentHeight + borderHeight
+    : Math.max(0, contentHeight - paddingHeight);
+  const nextHeight = Math.min(
+    Math.max(measuredHeight, minHeight),
+    maxHeight,
+  );
+
+  textarea.style.height = `${nextHeight}px`;
+  textarea.style.overflowY = measuredHeight > maxHeight ? 'auto' : 'hidden';
+}
+
+export function AutoGrowTextArea({
+  className,
+  onInput,
+  rows = 1,
+  value,
+  ...textareaProps
+}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || supportsNativeFieldSizing()) {
+      return;
+    }
+    resizeFallbackTextArea(textarea);
+  }, [value]);
+
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || supportsNativeFieldSizing()) {
+      return undefined;
+    }
+
+    let previousWidth = textarea.getBoundingClientRect().width;
+    const resizeWhenWidthChanges = (nextWidth: number) => {
+      if (Math.abs(nextWidth - previousWidth) < 0.5) {
+        return;
+      }
+      previousWidth = nextWidth;
+      resizeFallbackTextArea(textarea);
+    };
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          resizeWhenWidthChanges(entry.contentRect.width);
+        }
+      });
+      observer.observe(textarea);
+      return () => observer.disconnect();
+    }
+
+    const handleWindowResize = () => {
+      resizeWhenWidthChanges(textarea.getBoundingClientRect().width);
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
+  }, []);
+
+  const resolvedClassName = [
+    'auto-grow-text-area max-h-32 min-h-10 resize-none overflow-x-hidden overflow-y-auto overscroll-contain [field-sizing:content] disabled:cursor-not-allowed disabled:opacity-60',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+  const handleInput: InputEventHandler<HTMLTextAreaElement> = (event) => {
+    if (!supportsNativeFieldSizing()) {
+      resizeFallbackTextArea(event.currentTarget);
+    }
+    onInput?.(event);
+  };
+
+  return (
+    <textarea
+      {...textareaProps}
+      ref={textareaRef}
+      className={resolvedClassName}
+      onInput={handleInput}
+      rows={rows}
+      value={value}
+    />
+  );
+}

src/components/image-editor/EditorAgentConversation/EditorAgentDraftTextarea.test.tsx

@@ -1,108 +1,36 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import type { FormEvent } from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { EditorAgentDraftTextarea } from './EditorAgentDraftTextarea.tsx';
 
-afterEach(() => {
-  vi.unstubAllGlobals();
-});
-
 describe('EditorAgentDraftTextarea', () => {
-  it('uses native field sizing when the browser supports it', () => {
-    const supports = vi.fn().mockReturnValue(true);
-    const resizeObserver = vi.fn();
+  it('forwards draft changes and paste events through the Agent wrapper', () => {
     const onChange = vi.fn();
-    vi.stubGlobal('CSS', { supports });
-    vi.stubGlobal('ResizeObserver', resizeObserver);
+    const onPaste = vi.fn();
 
-    render(<EditorAgentDraftTextarea value="" onChange={onChange} />);
+    render(
+      <EditorAgentDraftTextarea
+        value=""
+        onChange={onChange}
+        onPaste={onPaste}
+      />,
+    );
 
     const input = screen.getByLabelText(
       '发送给画布 Agent',
     ) as HTMLTextAreaElement;
-    expect(supports).toHaveBeenCalledWith('field-sizing', 'content');
-    expect(resizeObserver).not.toHaveBeenCalled();
-    expect(input.className).toContain('[field-sizing:content]');
-    expect(input.className).toContain('min-h-10');
-    expect(input.className).toContain('max-h-32');
-    expect(input.className).toContain('overflow-y-auto');
-    expect(input.style.height).toBe('');
+    expect(input.className).toContain('auto-grow-text-area');
+    expect(input.className).toContain(
+      'editor-agent-conversation__draft-input',
+    );
 
     fireEvent.change(input, { target: { value: '新草稿' } });
     expect(onChange).toHaveBeenCalledWith('新草稿');
-  });
-
-  it('falls back to measured sizing and remeasures when width changes', () => {
-    let resizeObserverCallback!: ResizeObserverCallback;
-    const observe = vi.fn();
-    const disconnect = vi.fn();
-    vi.stubGlobal('CSS', { supports: vi.fn().mockReturnValue(false) });
-    vi.stubGlobal(
-      'ResizeObserver',
-      vi.fn().mockImplementation((callback: ResizeObserverCallback) => {
-        resizeObserverCallback = callback;
-        return {
-          observe,
-          unobserve: vi.fn(),
-          disconnect,
-        };
-      }),
-    );
-
-    const { rerender, unmount } = render(
-      <EditorAgentDraftTextarea value="" onChange={vi.fn()} />,
-    );
-    const input = screen.getByLabelText(
-      '发送给画布 Agent',
-    ) as HTMLTextAreaElement;
-    expect(observe).toHaveBeenCalledWith(input);
-    let contentHeight = 92;
-    Object.defineProperty(input, 'offsetHeight', {
-      configurable: true,
-      get: () => {
-        const styleHeight = Number.parseFloat(input.style.height);
-        return Number.isNaN(styleHeight) ? 42 : styleHeight;
-      },
-    });
-    Object.defineProperty(input, 'clientHeight', {
-      configurable: true,
-      get: () => input.offsetHeight - 2,
-    });
-    Object.defineProperty(input, 'scrollHeight', {
-      configurable: true,
-      get: () => contentHeight,
-    });
-
-    rerender(
-      <EditorAgentDraftTextarea
-        value="第一行\n第二行\n第三行\n第四行\n第五行"
-        onChange={vi.fn()}
-      />,
-    );
-    expect(input.style.height).toBe('94px');
-    expect(input.style.overflowY).toBe('hidden');
-    expect(input.scrollHeight).toBeLessThanOrEqual(input.clientHeight);
-
-    contentHeight = 180;
-    act(() => {
-      resizeObserverCallback(
-        [
-          {
-            target: input,
-            contentRect: { width: 180 },
-          } as unknown as ResizeObserverEntry,
-        ],
-        {} as ResizeObserver,
-      );
-    });
-    expect(input.style.height).toBe('128px');
-    expect(input.style.overflowY).toBe('auto');
-
-    unmount();
-    expect(disconnect).toHaveBeenCalledTimes(1);
+    fireEvent.paste(input);
+    expect(onPaste).toHaveBeenCalledTimes(1);
   });
 
   it('submits on Enter and keeps line breaks or IME confirmation from submitting', () => {

src/components/image-editor/EditorAgentConversation/EditorAgentDraftTextarea.tsx

@@ -1,38 +1,9 @@
 import {
   type ClipboardEventHandler,
   type KeyboardEvent,
-  useLayoutEffect,
-  useRef,
 } from 'react';
 
-const DRAFT_MIN_HEIGHT_PX = 40;
-const DRAFT_MAX_HEIGHT_PX = 128;
-
-// for fallback on some browser
-function supportsNativeFieldSizing() {
-  return (
-    typeof CSS !== 'undefined' &&
-    typeof CSS.supports === 'function' &&
-    CSS.supports('field-sizing', 'content')
-  );
-}
-
-function resizeFallbackTextarea(textarea: HTMLTextAreaElement) {
-  textarea.style.height = 'auto';
-  const contentHeight = textarea.scrollHeight;
-  const borderHeight = Math.max(
-    0,
-    textarea.offsetHeight - textarea.clientHeight,
-  );
-  const borderBoxContentHeight = contentHeight + borderHeight;
-  const nextHeight = Math.min(
-    Math.max(borderBoxContentHeight, DRAFT_MIN_HEIGHT_PX),
-    DRAFT_MAX_HEIGHT_PX,
-  );
-  textarea.style.height = `${nextHeight}px`;
-  textarea.style.overflowY =
-    borderBoxContentHeight > DRAFT_MAX_HEIGHT_PX ? 'auto' : 'hidden';
-}
+import { AutoGrowTextArea } from '@/src/components/common/AutoGrowTextArea';
 
 export function EditorAgentDraftTextarea({
   value,
@@ -43,49 +14,6 @@ export function EditorAgentDraftTextarea({
   onChange: (value: string) => void;
   onPaste?: ClipboardEventHandler<HTMLTextAreaElement>;
 }) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useLayoutEffect(() => {
-    const textarea = textareaRef.current;
-    if (!textarea || supportsNativeFieldSizing()) {
-      return;
-    }
-    resizeFallbackTextarea(textarea);
-  }, [value]);
-
-  useLayoutEffect(() => {
-    const textarea = textareaRef.current;
-    if (!textarea || supportsNativeFieldSizing()) {
-      return undefined;
-    }
-
-    let previousWidth = textarea.getBoundingClientRect().width;
-    const resizeWhenWidthChanges = (nextWidth: number) => {
-      if (Math.abs(nextWidth - previousWidth) < 0.5) {
-        return;
-      }
-      previousWidth = nextWidth;
-      resizeFallbackTextarea(textarea);
-    };
-
-    if (typeof ResizeObserver !== 'undefined') {
-      const observer = new ResizeObserver((entries) => {
-        const entry = entries[0];
-        if (entry) {
-          resizeWhenWidthChanges(entry.contentRect.width);
-        }
-      });
-      observer.observe(textarea);
-      return () => observer.disconnect();
-    }
-
-    const handleWindowResize = () => {
-      resizeWhenWidthChanges(textarea.getBoundingClientRect().width);
-    };
-    window.addEventListener('resize', handleWindowResize);
-    return () => window.removeEventListener('resize', handleWindowResize);
-  }, []);
-
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (
       event.key === 'Enter' &&
@@ -99,12 +27,10 @@ export function EditorAgentDraftTextarea({
   };
 
   return (
-    <textarea
-      ref={textareaRef}
-      className="editor-agent-conversation__draft-input max-h-32 min-h-10 min-w-0 flex-1 resize-none overflow-x-hidden overflow-y-auto overscroll-contain rounded-3xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800 outline-none [field-sizing:content] focus:border-slate-400"
+    <AutoGrowTextArea
+      className="editor-agent-conversation__draft-input min-w-0 flex-1 rounded-3xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-800 outline-none focus:border-slate-400"
       aria-label="发送给画布 Agent"
       value={value}
-      rows={1}
       onChange={(event) => onChange(event.currentTarget.value)}
       onPaste={onPaste}
       onKeyDown={handleKeyDown}

src/components/image-editor/ImageCanvasBasicGenerationComposerView.test.tsx

@@ -190,6 +190,7 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
   });
 
   it('keeps quick edit to one prompt box with image parameters', () => {
+    const submitQuickEdit = vi.fn();
     render(
       <BasicGenerationHarness
         initialDialog={createDialog({
@@ -206,14 +207,19 @@ describe('ImageCanvasBasicGenerationComposerView', () => {
           aspectRatio: '1:1',
           imageSize: '1K',
         })}
+        onSubmit={submitQuickEdit}
       />,
     );
 
     const panel = screen.getByRole('dialog', { name: '快速编辑图片' });
+    const prompt = within(panel).getByRole('textbox', {
+      name: '快速编辑提示词',
+    });
 
-    expect(
-      within(panel).getByRole('textbox', { name: '快速编辑提示词' }),
-    ).toBeTruthy();
+    expect(prompt.className).toContain('auto-grow-text-area');
+    expect(prompt.className).not.toContain('platform-text-field');
+    fireEvent.keyDown(prompt, { key: 'Enter' });
+    expect(submitQuickEdit).not.toHaveBeenCalled();
     expect(
       within(panel).queryByRole('button', { name: '添加参考图' }),
     ).toBeNull();

src/components/image-editor/ImageCanvasBasicGenerationComposerView.tsx

@@ -7,12 +7,12 @@ import {
   type SetStateAction,
 } from 'react';
 
+import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
 import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import type {
   CharacterReferenceImage,
   GenerateDialogState,
@@ -247,14 +247,11 @@ export function ImageCanvasBasicGenerationComposerView({
             ) : null}
           </div>
         ) : null}
-        <PlatformTextField
-          variant="textarea"
+        <AutoGrowTextArea
           aria-label={resolvedPromptLabel}
           value={dialog.prompt}
           disabled={dialog.status === 'generating'}
           placeholder={resolvedPromptPlaceholder}
-          size="sm"
-          density="compact"
           className={promptClassName}
           onChange={(event) =>
             setGenerateDialog((currentDialog) =>

src/components/image-editor/ImageCanvasCharacterAnimationPanelView.test.tsx

@@ -113,7 +113,11 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
       />,
     );
 
-    fireEvent.change(screen.getByLabelText('动画描述'), {
+    const description = screen.getByLabelText('动画描述');
+    expect(description.className).toContain('auto-grow-text-area');
+    expect(description.className).not.toContain('platform-text-field');
+
+    fireEvent.change(description, {
       target: { value: `${'a'.repeat(4001)}` },
     });
     fireEvent.click(
@@ -207,9 +211,12 @@ describe('ImageCanvasCharacterAnimationPanelView', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '生成中' }));
 
-    expect((screen.getByLabelText('动画描述') as HTMLTextAreaElement).disabled).toBe(
-      true,
-    );
+    const description = screen.getByLabelText(
+      '动画描述',
+    ) as HTMLTextAreaElement;
+    expect(description.disabled).toBe(true);
+    expect(description.className).toContain('disabled:cursor-not-allowed');
+    expect(description.className).toContain('disabled:opacity-60');
     expect((screen.getByRole('button', { name: '待机' }) as HTMLButtonElement).disabled).toBe(
       true,
     );

src/components/image-editor/ImageCanvasCharacterAnimationPanelView.tsx

@@ -13,11 +13,11 @@ import type {
   EditorCharacterAnimationRatio,
   EditorCharacterAnimationResolution,
 } from '../../services/image-editor/editorProjectClient';
+import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFloatingMenu } from '../common/PlatformFloatingMenu';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasEditorPortal } from './ImageCanvasEditorPortal';
 import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import type {
@@ -194,16 +194,13 @@ export function ImageCanvasCharacterAnimationPanelView({
           disabled={isGenerating}
           onClick={closePanel}
         />
-        <PlatformTextField
-          variant="textarea"
+        <AutoGrowTextArea
           aria-label="动画描述"
           value={panel.promptText}
           maxLength={4000}
           disabled={isGenerating}
           placeholder="你希望角色做什么动作？"
-          size="sm"
-          density="compact"
-          className="image-canvas-editor__generation-prompt image-canvas-editor__character-animation-textarea"
+          className="max-h-64 image-canvas-editor__generation-prompt image-canvas-editor__character-animation-textarea"
           onChange={(event) =>
             updatePanel({ promptText: event.target.value.slice(0, 4000) })
           }

src/components/image-editor/ImageCanvasCharacterGenerationComposerView.test.tsx

@@ -105,6 +105,8 @@ describe('ImageCanvasCharacterGenerationComposerView', () => {
         .join(''),
     ).not.toContain('角色设定');
     expect(prompt.getAttribute('placeholder')).toBe('你希望角色如何设计？');
+    expect(prompt.className).toContain('auto-grow-text-area');
+    expect(prompt.className).not.toContain('platform-text-field');
     expect(prompt.className).toContain('image-canvas-editor__generation-prompt');
     expect(prompt.className).not.toContain(
       'image-canvas-editor__generation-prompt--borderless',

src/components/image-editor/ImageCanvasCharacterGenerationComposerView.tsx

@@ -7,12 +7,12 @@ import {
   type SetStateAction,
 } from 'react';
 
+import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
 import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import type {
   CharacterReferenceImage,
   GenerateDialogState,
@@ -254,14 +254,11 @@ export function ImageCanvasCharacterGenerationComposerView({
           : null}
       </div>
       <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
-        <PlatformTextField
-          variant="textarea"
+        <AutoGrowTextArea
           aria-label="角色设定"
           value={dialog.prompt}
           disabled={dialog.status === 'generating'}
           placeholder="你希望角色如何设计？"
-          size="sm"
-          density="compact"
           className="image-canvas-editor__generation-prompt"
           onChange={(event) =>
             setGenerateDialog((currentDialog) =>

src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx

@@ -838,7 +838,8 @@ describe('ImageCanvasEditorView generation integration', () => {
         .className,
     ).toContain('image-canvas-editor__reference-chip');
     const generatePrompt = screen.getByLabelText('生成提示词');
-    expect(generatePrompt.className).toContain('platform-text-field');
+    expect(generatePrompt.className).toContain('auto-grow-text-area');
+    expect(generatePrompt.className).not.toContain('platform-text-field');
     expect(generatePrompt.className).toContain(
       'image-canvas-editor__generation-prompt',
     );

src/components/image-editor/ImageCanvasGenerationComposerView.test.tsx

@@ -637,6 +637,9 @@ describe('ImageCanvasGenerationComposerView', () => {
     render(<VideoHarness />);
 
     const panel = screen.getByRole('dialog', { name: '生成视频' });
+    const prompt = within(panel).getByRole('textbox', { name: '视频描述' });
+    expect(prompt.className).toContain('auto-grow-text-area');
+    expect(prompt.className).not.toContain('platform-text-field');
     expect(
       within(panel).getByRole('button', {
         name: '视频参数 16:9 · 4秒 · 480p',
@@ -761,7 +764,9 @@ describe('ImageCanvasGenerationComposerView', () => {
     expect(footer?.children[2]?.className).toContain(
       'image-canvas-editor__generation-submit',
     );
-    expect(within(panel).getByRole('textbox', { name: 'prompt' })).toBeTruthy();
+    const prompt = within(panel).getByRole('textbox', { name: 'prompt' });
+    expect(prompt.className).toContain('auto-grow-text-area');
+    expect(prompt.className).not.toContain('platform-text-field');
     expect(screen.getByLabelText('当前音效模型').textContent).toBe('audio1.0');
     const soundModelButton = within(panel).getByRole('button', {
       name: '音效模型 Vidu',

src/components/image-editor/ImageCanvasGenerationComposerView.tsx

@@ -10,6 +10,7 @@ import {
   useState,
 } from 'react';
 
+import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import {
   PlatformFloatingMenu,
@@ -17,7 +18,6 @@ import {
 } from '../common/PlatformFloatingMenu';
 import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
 import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
 import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharacterGenerationComposerView';
@@ -441,14 +441,11 @@ function ImageCanvasVideoGenerationComposerView({
             />
           </div>
         ) : null}
-        <PlatformTextField
-          variant="textarea"
+        <AutoGrowTextArea
           aria-label="视频描述"
           value={dialog.prompt}
           disabled={isGenerating}
           placeholder="你希望生成什么视频？"
-          size="sm"
-          density="compact"
           className="image-canvas-editor__generation-prompt"
           onChange={(event) =>
             updateVideoDialog({ prompt: event.target.value })
@@ -825,8 +822,7 @@ function ImageCanvasAudioGenerationComposerView({
         }
       }}
     >
-      <PlatformTextField
-        variant="textarea"
+      <AutoGrowTextArea
         aria-label={isSoundEffect ? 'prompt' : 'gpt_description_prompt'}
         value={dialog.prompt}
         disabled={isGenerating}
@@ -835,8 +831,6 @@ function ImageCanvasAudioGenerationComposerView({
             ? '你希望生成什么音效？'
             : '你希望生成什么音乐？'
         }
-        size="sm"
-        density="compact"
         className="image-canvas-editor__generation-prompt"
         onChange={(event) => updateAudioDialog({ prompt: event.target.value })}
       />

src/components/image-editor/ImageCanvasIconSpritesheetComposerView.test.tsx

@@ -193,7 +193,11 @@ describe('ImageCanvasIconSpritesheetComposerView', () => {
       />,
     );
 
-    fireEvent.change(screen.getByLabelText('素材描述'), {
+    const description = screen.getByLabelText('素材描述');
+    expect(description.className).toContain('auto-grow-text-area');
+    expect(description.className).not.toContain('platform-text-field');
+
+    fireEvent.change(description, {
       target: { value: '魔法剑\n圆盾' },
     });
     fireEvent.click(screen.getByRole('button', { name: '生成' }));

src/components/image-editor/ImageCanvasIconSpritesheetComposerView.tsx

@@ -7,12 +7,12 @@ import {
   type SetStateAction,
 } from 'react';
 
+import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
 import {
   PlatformFloatingMenu,
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import type {
   GenerateDialogState,
   SpecGenerationType,
@@ -210,14 +210,11 @@ export function ImageCanvasIconSpritesheetComposerView({
         />
       </div>
       <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
-        <PlatformTextField
-          variant="textarea"
+        <AutoGrowTextArea
           aria-label="素材描述"
           value={descriptionText}
           disabled={dialog.status === 'generating'}
           placeholder="你需要哪些图标？"
-          size="sm"
-          density="compact"
           className="image-canvas-editor__generation-prompt"
           onChange={(event) => onUpdateIconDescriptionText(event.target.value)}
         />

src/components/image-editor/ImageCanvasPublicationMaterialsDemoPanelView.test.tsx

@@ -58,7 +58,15 @@ describe('ImageCanvasPublicationMaterialsDemoPanelView', () => {
     const modelButton = screen.getByRole('button', {
       name: '宣发素材模型 gpt-image-2',
     }) as HTMLButtonElement;
+    const description = screen.getByRole('textbox', {
+      name: '游戏首图一句话描述游戏',
+    });
 
+    expect(description.className).toContain('auto-grow-text-area');
+    expect(description.className).not.toContain('platform-text-field');
+    expect(description.className).toContain(
+      'image-canvas-editor__generation-prompt',
+    );
     expect(modelButton.disabled).toBe(true);
     expect(modelButton.textContent).not.toContain('nanobanana2');
     fireEvent.click(modelButton);

src/components/image-editor/ImageCanvasPublicationMaterialsDemoPanelView.tsx

@@ -7,6 +7,7 @@ import {
   type SetStateAction,
 } from 'react';
 
+import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import {
   PlatformFloatingMenu,
@@ -264,15 +265,12 @@ export function ImageCanvasPublicationMaterialsDemoPanelView({
           >
             一句话描述游戏
           </PlatformFieldLabel>
-          <PlatformTextField
-            variant="textarea"
+          <AutoGrowTextArea
             aria-label={`${workflow.label}一句话描述游戏`}
             value={publicationGameInfo.gameDescription}
             disabled={dialog.status === 'generating'}
             placeholder="神奇数字马戏团里，帕姆尼失控了，找到钥匙，开门逃离马戏团，千万别被抓住了"
-            size="sm"
-            density="compact"
-            className="image-canvas-editor__publication-description"
+            className="image-canvas-editor__generation-prompt image-canvas-editor__publication-description"
             onChange={(event) =>
               setGenerateDialog((currentDialog) =>
                 updatePublicationGameInfoField(

src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx

@@ -138,6 +138,8 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     ).toBe(true);
     expect(panel.textContent).not.toContain('UI设计要求');
     expect(prompt.getAttribute('placeholder')).toBe('你希望这个 UI 长什么样？');
+    expect(prompt.className).toContain('auto-grow-text-area');
+    expect(prompt.className).not.toContain('platform-text-field');
     expect(prompt.className).toContain('image-canvas-editor__generation-prompt');
     expect(prompt.className).not.toContain(
       'image-canvas-editor__generation-prompt--borderless',
@@ -276,6 +278,11 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
     expect(customPrompt.placeholder).toBe(
       '写下你想要的任何内容，陶泥儿帮你形成新的约束',
     );
+    expect(customPrompt.className).toContain('auto-grow-text-area');
+    expect(customPrompt.className).not.toContain('platform-text-field');
+    expect(customPrompt.className).toContain(
+      'image-canvas-editor__generation-prompt',
+    );
 
     fireEvent.change(screen.getByLabelText('自定义规范提示词'), {
       target: { value: '新的规范提示' },

src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx

@@ -7,6 +7,7 @@ import {
   type SetStateAction,
 } from 'react';
 
+import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
 import { PlatformActionButton } from '../common/PlatformActionButton';
 import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
 import {
@@ -249,14 +250,11 @@ export function ImageCanvasSpecGenerationPanelView({
         <div className="image-canvas-editor__spec-fields">
           {isUiDesignDialog ? (
             <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
-              <PlatformTextField
-                variant="textarea"
+              <AutoGrowTextArea
                 aria-label="UI设计要求"
                 value={dialog.prompt}
                 disabled={isGenerating}
                 placeholder="你希望这个 UI 长什么样？"
-                size="sm"
-                density="compact"
                 className="image-canvas-editor__generation-prompt"
                 onChange={(event) => {
                   const nextPrompt = event.target.value;
@@ -291,15 +289,12 @@ export function ImageCanvasSpecGenerationPanelView({
               >
                 自定义规范提示词
               </PlatformFieldLabel>
-              <PlatformTextField
-                variant="textarea"
+              <AutoGrowTextArea
                 aria-label="自定义规范提示词"
                 value={dialog.specValues?.customPrompt ?? ''}
                 placeholder="写下你想要的任何内容，陶泥儿帮你形成新的约束"
                 disabled={isGenerating}
-                size="sm"
-                density="compact"
-                className="image-canvas-editor__spec-textarea"
+                className="image-canvas-editor__generation-prompt image-canvas-editor__spec-textarea"
                 onChange={(event) =>
                   onUpdateSpecFormValue('customPrompt', event.target.value)
                 }

src/components/image-editor/ImageCanvasTextAreaStyles.test.ts

@@ -0,0 +1,55 @@
+import { readFileSync } from 'node:fs';
+
+import { describe, expect, it } from 'vitest';
+
+const stylesheet = readFileSync(
+  new URL('../../index.css', import.meta.url),
+  'utf8',
+);
+
+function readCssRule(selector: string) {
+  const ruleStart = stylesheet.indexOf(selector);
+  expect(ruleStart).toBeGreaterThanOrEqual(0);
+  const bodyStart = stylesheet.indexOf('{', ruleStart) + 1;
+  const bodyEnd = stylesheet.indexOf('}', bodyStart);
+  expect(bodyEnd).toBeGreaterThan(bodyStart);
+  return stylesheet.slice(bodyStart, bodyEnd);
+}
+
+describe('image canvas textarea chrome', () => {
+  it('keeps complete chrome in the canonical generation prompt styles', () => {
+    const generationRule = readCssRule(
+      '.image-canvas-editor__generation-prompt',
+    );
+    expect(generationRule).toContain('border: 1px solid');
+    expect(generationRule).toContain('border-radius: 1.05rem;');
+    expect(generationRule).toContain('background: #f8fafc;');
+    expect(generationRule).toContain('padding: 0.52rem 0.82rem;');
+
+    const generationFocusRule = readCssRule(
+      '.image-canvas-editor__generation-prompt:focus,',
+    );
+    expect(generationFocusRule).toContain(
+      'border-color: var(--image-canvas-brand-border-strong);',
+    );
+    expect(generationFocusRule).toContain(
+      'box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring);',
+    );
+
+    const modalRule = readCssRule('.image-canvas-editor__generate-prompt');
+    expect(modalRule).toContain('border: 1px solid #d9dee8;');
+    expect(modalRule).toContain('border-radius: 0.45rem;');
+    expect(modalRule).toContain('background: #f8fafc;');
+    expect(modalRule).toContain('padding: 0.7rem;');
+
+    const modalFocusRule = readCssRule(
+      '.image-canvas-editor__generate-prompt:focus',
+    );
+    expect(modalFocusRule).toContain(
+      'border-color: var(--image-canvas-brand-border-strong);',
+    );
+    expect(modalFocusRule).toContain(
+      'box-shadow: 0 0 0 3px var(--image-canvas-brand-focus-ring);',
+    );
+  });
+});

src/index.css

@@ -8737,7 +8737,7 @@ button.image-canvas-editor__reference-chip:disabled {
 
 .image-canvas-editor__generate-prompt {
   min-height: 7rem;
-  resize: vertical;
+  resize: none;
   border: 1px solid #d9dee8;
   border-radius: 0.45rem;
   background: #f8fafc;
@@ -16740,28 +16740,28 @@ button {
   background: #3f3f46;
 }
 
-.editor-agent-conversation__draft-input {
+.auto-grow-text-area {
   scrollbar-color: #cbd5e1 transparent;
   scrollbar-width: thin;
 }
 
-.editor-agent-conversation__draft-input::-webkit-scrollbar {
+.auto-grow-text-area::-webkit-scrollbar {
   width: 6px;
 }
 
-.editor-agent-conversation__draft-input::-webkit-scrollbar-track {
+.auto-grow-text-area::-webkit-scrollbar-track {
   margin-block: 10px;
   background-color: transparent;
 }
 
-.editor-agent-conversation__draft-input::-webkit-scrollbar-thumb {
+.auto-grow-text-area::-webkit-scrollbar-thumb {
   border: 1px solid transparent;
   border-radius: 999px;
   background-color: #cbd5e1;
   background-clip: padding-box;
 }
 
-.editor-agent-conversation__draft-input::-webkit-scrollbar-thumb:hover {
+.auto-grow-text-area::-webkit-scrollbar-thumb:hover {
   background-color: #94a3b8;
 }
 

vitest.config.ts

@@ -50,6 +50,7 @@ export default defineConfig({
       'src/components/auth/**/*.test.tsx',
       'src/components/creation-home/**/*.test.ts',
       'src/components/creation-home/**/*.test.tsx',
+      'src/components/common/AutoGrowTextArea.test.tsx',
       'src/components/common/CreativeImageInputPanel.test.tsx',
       'src/components/common/PlatformDangerConfirmDialog.test.tsx',
       'src/components/common/PlatformImagePreviewModal.test.tsx',