GenarrativeAI/Genarrative
10
0
Fork 0
Code Issues 21 Pull Requests 6 Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source 
生成规范固定参数复用可编辑面板参数胶囊按钮样式。

固定比例尺寸和模型按钮保持禁用不可点击且不弹出选项。

补充面板测试覆盖禁用态和不可展开行为。

更新编辑器 Lovart 面板与图片画布技术文档。
This commit is contained in:
高物
2026-06-18 18:51:53 +08:00
parent 9c7b3ad16d
commit eb855644d5
5 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-editor/ImageCanvasSpecGenerationPanelView.test.tsx
+18 -8
View File
@@ -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', () => {
src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+27 -8
View File
@@ -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"
src/index.css
+10 -24
View File
@@ -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;