收口模板确认面板行内字段标签
新增 PlatformFieldLabel inlineForm 变体承接行内表单标题 模板确认弹层“关卡数”标题改为复用 PlatformFieldLabel 补充组件测试、收口计划文档和 Hermes 决策记录
This commit is contained in:
@@ -37,6 +37,22 @@ test('renders form label and keeps local classes', () => {
|
||||
expect(label.className).toContain('mt-1');
|
||||
});
|
||||
|
||||
test('renders inline form label without block spacing', () => {
|
||||
render(
|
||||
<PlatformFieldLabel variant="inlineForm" className="shrink-0">
|
||||
关卡数
|
||||
</PlatformFieldLabel>,
|
||||
);
|
||||
|
||||
const label = screen.getByText('关卡数');
|
||||
|
||||
expect(label.className).toContain('inline-flex');
|
||||
expect(label.className).toContain('text-sm');
|
||||
expect(label.className).toContain('font-bold');
|
||||
expect(label.className).toContain('shrink-0');
|
||||
expect(label.className).not.toContain('mb-2');
|
||||
});
|
||||
|
||||
test('renders pill and accent pill labels', () => {
|
||||
render(
|
||||
<>
|
||||
|
||||
@@ -4,6 +4,7 @@ type PlatformFieldLabelVariant =
|
||||
| 'field'
|
||||
| 'section'
|
||||
| 'form'
|
||||
| 'inlineForm'
|
||||
| 'pill'
|
||||
| 'accentPill';
|
||||
|
||||
@@ -18,6 +19,8 @@ const PLATFORM_FIELD_LABEL_CLASS: Record<PlatformFieldLabelVariant, string> = {
|
||||
section:
|
||||
'text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]',
|
||||
form: 'mb-2 block text-sm font-black text-[var(--platform-text-strong)]',
|
||||
inlineForm:
|
||||
'inline-flex items-center text-sm font-bold text-[var(--platform-text-base)]',
|
||||
pill: 'mb-2 inline-flex rounded-full px-2 py-0.5 text-sm font-black text-[var(--platform-text-strong)]',
|
||||
accentPill:
|
||||
'mb-2 inline-flex rounded-full border border-rose-200/70 bg-rose-50/88 px-2.5 py-1 text-sm font-black text-rose-700 shadow-sm',
|
||||
|
||||
@@ -46,6 +46,9 @@ test('shows cost range and opens an independent adjustment dialog', () => {
|
||||
fireEvent.click(within(confirmDialog).getByRole('button', { name: /调整/u }));
|
||||
const adjustDialog = screen.getByRole('dialog', { name: '调整拼图模板' });
|
||||
expect(adjustDialog.parentElement).not.toBe(confirmDialog);
|
||||
expect(within(adjustDialog).getByText('关卡数').className).toContain(
|
||||
'inline-flex',
|
||||
);
|
||||
|
||||
fireEvent.click(within(adjustDialog).getByRole('button', { name: '多关卡' }));
|
||||
const levelCountInput = within(adjustDialog).getByLabelText('计划关卡数');
|
||||
|
||||
@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
|
||||
import type { PuzzleCreativeTemplateSelection } from '../../../packages/shared/src/contracts/puzzleCreativeTemplate';
|
||||
import { useAuthUi } from '../auth/AuthUiContext';
|
||||
import { PlatformActionButton } from '../common/PlatformActionButton';
|
||||
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
|
||||
import { PlatformIconBadge } from '../common/PlatformIconBadge';
|
||||
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
|
||||
import { PlatformModalCloseButton } from '../common/PlatformModalCloseButton';
|
||||
@@ -238,9 +239,9 @@ export function CreativeAgentTemplateConfirmPanel({
|
||||
/>
|
||||
|
||||
<label className="flex min-h-11 items-center gap-3">
|
||||
<span className="shrink-0 text-sm font-bold text-[var(--platform-text-base)]">
|
||||
<PlatformFieldLabel variant="inlineForm" className="shrink-0">
|
||||
关卡数
|
||||
</span>
|
||||
</PlatformFieldLabel>
|
||||
<PlatformTextField
|
||||
type="number"
|
||||
min={levelCountBounds.min}
|
||||
|
||||
Reference in New Issue
Block a user