对齐规范固定参数禁用态样式

生成规范固定参数复用可编辑面板参数胶囊按钮样式。固定比例尺寸和模型按钮保持禁用不可点击且不弹出选项。补充面板测试覆盖禁用态和不可展开行为。更新编辑器 Lovart 面板与图片画布技术文档。
2026-06-18 18:51:53 +08:00
parent 9c7b3ad16d
commit eb855644d5
5 changed files with 59 additions and 44 deletions
@@ -18,7 +18,7 @@
 - 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词、重绘提示词，以及角色形象规范 / 常规参考图 / 图标素材规范 / 编辑参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行重绘时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图；重绘面板不因提交成功自动关闭，便于连续改提示词。
- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范、快速编辑和重绘保留既有 `gpt-image-2` 路径；其中生成规范类图片固定 `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`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后作为 `quick-edit` 参考图走同一图片生成 BFF，并在原图右侧生成一张新图。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和重绘在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范、快速编辑和重绘保留既有 `gpt-image-2` 路径；其中生成规范类图片固定 `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`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后作为 `quick-edit` 参考图走同一图片生成 BFF，并在原图右侧生成一张新图。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；首期固定文字转视频、`16:9`、标准模式、静音，生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和重绘在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频` 和 `生成UI设计图`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变。

@@ -90,7 +90,7 @@
 - 生成中的占位图聚焦后支持键盘 `Delete` / `Backspace` 删除，不新增可见删除按钮；删除后对应异步回写必须按生成器 ID 判空并丢弃，不能把已删除素材重新落回画布。
 - 生成器快照刷新后必须恢复；待生成、生成中、失败和已生成后跟随成品图层的生成器都不能因为刷新丢失输入、参数、参考图或占位框位置。
 - 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源、角色常规参考图来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。角色形象规范和常规参考图来源菜单必须向上弹出；常规参考图点击后先选择“从画布中选择”或“上传图片”，从画布取图时只绑定参考图，不触发普通画布图层选中、聚焦、面板隐藏或拖拽逻辑，绑定后退出画布选择状态。所有生成面板参考图槽位统一为方形图标组件；角色形象规范槽位只显示规范 logo 和 `角色规范` 四字，绑定来源标题只保留给可访问名称、悬浮 title 和图片信息。已有参考图槽位只有在 hover / focus 时显示右上角 `×`，点击后只解绑对应参考图。
- 生成规范类图片面板底部必须显示只读 `16:9`、`2K`、`gpt-image-2`，提交到 `/api/editor/images/generations` 时也固定携带这些参数。
+- 生成规范类图片面板底部必须以禁用态参数按钮显示 `16:9 · 2K` 和 `gpt-image-2`，视觉对齐可编辑面板参数控件，提交到 `/api/editor/images/generations` 时也固定携带这些参数。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
 - 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、角色图专属生成动画、分割线、重绘、下载按钮。裁扩支持输入四边像素，负数裁剪、正数扩大，扩大区域保持透明；去除背景使用前端轻量去背并回写为新的工程资源快照。
@@ -59,7 +59,7 @@
 - 底边栏中会在上方弹出二级选项的入口不再依赖点击展开。鼠标悬停到入口即可打开二级面板，鼠标离开入口和二级面板后自动收起；当前范围包括 `生成规范` 和 `生成音乐`。
 - 底边栏二级选项面板必须锚定到对应入口按钮本身，不使用屏幕居中或固定底部偏移；移动端窄屏下也应保持跟随入口位置。
 - 生成图片和生成视频文本输入框紧贴参考图下方，取消旧网格预留导致的空白高度。
- 生成规范类图片固定使用 `16:9 · 2K · gpt-image-2`。这三个参数在面板底部以只读短胶囊展示，不提供比例、尺寸或模型修改入口。
+- 生成规范类图片固定使用 `16:9 · 2K · gpt-image-2`。这三个参数在面板底部沿用可编辑参数按钮的胶囊样式展示，但控件保持禁用不可点击，不提供比例、尺寸或模型修改入口。
 - 不再在底部常驻展开全部可选项。

 ## 泥点显示
@@ -148,7 +148,7 @@
 - 底边栏 `生成规范` / `生成音乐` 悬停即可看到上方选项面板；鼠标从按钮移动到选项面板时不闪退，离开按钮和选项面板后收起。
 - `生成音乐` 选项面板出现在音乐按钮上方，不再固定在底栏中间。
 - 规范面板比图片生成面板更紧凑，字段间距和输入高度更小，但外层 shell、首行参考图和底部按钮区必须继续对齐生成图片 / 生成角色 / 生成视频。
- 生成规范类图片底部展示只读 `16:9`、`2K`、`gpt-image-2`，提交参数也固定为这三项，不出现可编辑的比例 / 尺寸 / 模型选项。
+- 生成规范类图片底部展示禁用态参数按钮 `16:9 · 2K` 和 `gpt-image-2`，视觉对齐可编辑面板的比例 / 尺寸 / 模型按钮；提交参数也固定为这三项，不出现可展开选项。
 - 生成中的占位图聚焦后可用 `Delete` / `Backspace` 删除；删除后异步结果不再落回画布，也不显示额外删除 UI。
 - 生成视频 / 角色形象 / 音效 / 背景音乐新建后，画布占位空白样式和右上角标签均与对应生成类型一致，不再统一使用图片占位 icon。
 - 生成游戏音效面板底部不显示 `type` / `tempo` 字段标题，只有一个音效参数按钮；type 只支持 `one-shot` / `loop`，BPM 为 `1-300` 的数字或 `null`，选择后按钮显示 `单次·120BPM` 这类组合值。
@@ -89,15 +89,25 @@ describe('ImageCanvasSpecGenerationPanelView', () => {
    ).toBe(true);
    const submitButton = screen.getByRole('button', { name: '提交生成规范' });
    expect(submitButton.textContent).toBe('生成5泥点');
-    expect(screen.getByLabelText('生成规范固定参数').textContent).toBe(
-      '16:92Kgpt-image-2',
+    const dimensionsButton = screen.getByRole('button', {
+      name: '生成图片尺寸 16:9 · 2K',
+    }) as HTMLButtonElement;
+    const modelButton = screen.getByRole('button', {
+      name: '生成图片模型 gpt-image-2',
+    }) as HTMLButtonElement;
+
+    expect(dimensionsButton.disabled).toBe(true);
+    expect(modelButton.disabled).toBe(true);
+    expect(dimensionsButton.className).toContain(
+      'image-canvas-editor__option-cluster--dimensions',
    );
-    expect(
-      screen.queryByRole('button', { name: /生成图片尺寸/u }),
-    ).toBeNull();
-    expect(
-      screen.queryByRole('button', { name: /生成图片模型/u }),
-    ).toBeNull();
+    expect(modelButton.className).toContain(
+      'image-canvas-editor__option-cluster--model',
+    );
+    fireEvent.click(dimensionsButton);
+    fireEvent.click(modelButton);
+    expect(screen.queryByRole('menu', { name: '生成图片尺寸选项' })).toBeNull();
+    expect(screen.queryByRole('menu', { name: '生成图片模型选项' })).toBeNull();
  });

  it('renders UI design as a single borderless prompt below the first reference row', () => {
@@ -1,4 +1,4 @@
-import { ClipboardList, ImagePlus } from 'lucide-react';
+import { ClipboardList, Cpu, ImagePlus } from 'lucide-react';
 import {
  type CSSProperties,
  type Dispatch,
@@ -13,6 +13,7 @@ import {
  PlatformFloatingMenu,
  PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
+import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import {
  PlatformSelectField,
@@ -357,13 +358,31 @@ export function ImageCanvasSpecGenerationPanelView({
          />
        ) : (
          <>
-            <div
-              className="image-canvas-editor__readonly-generation-options"
-              aria-label="生成规范固定参数"
-            >
-              <span>{SPEC_GENERATION_ASPECT_RATIO}</span>
-              <span>{SPEC_GENERATION_IMAGE_SIZE}</span>
-              <span>{SPEC_GENERATION_MODEL}</span>
+            <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions image-canvas-editor__readonly-generation-option">
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
+                aria-label={`生成图片尺寸 ${SPEC_GENERATION_ASPECT_RATIO} · ${SPEC_GENERATION_IMAGE_SIZE}`}
+                disabled
+              >
+                {SPEC_GENERATION_ASPECT_RATIO} · {SPEC_GENERATION_IMAGE_SIZE}
+              </PlatformInlineOptionButton>
+            </div>
+            <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model image-canvas-editor__readonly-generation-option">
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
+                aria-label={`生成图片模型 ${SPEC_GENERATION_MODEL}`}
+                disabled
+              >
+                <span className="image-canvas-editor__model-trigger-label">
+                  <span
+                    className="image-canvas-editor__model-icon"
+                    aria-hidden="true"
+                  >
+                    <Cpu />
+                  </span>
+                  <span>{SPEC_GENERATION_MODEL}</span>
+                </span>
+              </PlatformInlineOptionButton>
            </div>
            <PlatformActionButton
              type="submit"
@@ -5940,28 +5940,18 @@ button.image-canvas-editor__reference-chip:disabled {
  gap: 0.24rem;
 }

-.image-canvas-editor__readonly-generation-options {
-  display: inline-flex;
-  min-width: 0;
-  min-height: 2.25rem;
-  align-items: center;
-  gap: 0.28rem;
-  justify-self: start;
+.image-canvas-editor__readonly-generation-option
+  .image-canvas-editor__option-cluster:disabled {
+  cursor: default;
+  opacity: 1;
  color: #475569;
-  font-size: 0.78rem;
-  font-weight: 820;
 }

-.image-canvas-editor__readonly-generation-options span {
-  display: inline-flex;
-  min-height: 1.72rem;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  border-radius: 999px;
-  background: #f8fafc;
-  padding: 0 0.58rem;
-  white-space: nowrap;
+.image-canvas-editor__readonly-generation-option
+  .image-canvas-editor__option-cluster:disabled:hover {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
 }

 .image-canvas-editor__context-menu {
@@ -6401,7 +6391,7 @@ button.image-canvas-editor__reference-chip:disabled {

  .image-canvas-editor__option-cluster--dimensions,
  .image-canvas-editor__option-cluster--model,
-  .image-canvas-editor__readonly-generation-options,
+  .image-canvas-editor__readonly-generation-option,
  .image-canvas-editor__generation-submit,
  .image-canvas-editor__character-animation-submit {
    grid-column: auto;
@@ -6414,10 +6404,6 @@ button.image-canvas-editor__reference-chip:disabled {
    width: 100%;
  }

-  .image-canvas-editor__readonly-generation-options {
-    flex-wrap: wrap;
-  }
-
  .image-canvas-editor__character-composer {
    position: fixed;
    left: 0.75rem !important;