继续沉淀结果页返回按钮

新增共享 PlatformBackActionButton 承接结果页轻量返回入口
将拼图方洞拼消消视觉小说等结果页返回按钮收口到共享组件
将拼消消跳一跳敲木鱼宝贝识物结果页返回按钮收口到共享组件
补充对应测试并更新 PlatformUiKit 收口计划与共享决策记录
This commit is contained in:
2026-06-11 04:52:48 +08:00
parent 1b89611c9a
commit 0d9259b762
20 changed files with 313 additions and 75 deletions

View File

@@ -0,0 +1,35 @@
/* @vitest-environment jsdom */
import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
import { PlatformBackActionButton } from './PlatformBackActionButton';
test('renders compact back action button by default', () => {
render(<PlatformBackActionButton />);
const button = screen.getByRole('button', { name: '返回' });
expect(button.className).toContain('platform-button--ghost');
expect(button.className).toContain('min-h-0');
expect(button.className).toContain('text-[11px]');
expect(button.className).toContain('gap-1.5');
expect(button.querySelector('svg')?.className.baseVal).toContain('h-3.5');
});
test('supports regular variant and editor dark surface', () => {
render(
<PlatformBackActionButton
label="返回编辑"
variant="regular"
surface="editorDark"
/>,
);
const button = screen.getByRole('button', { name: '返回编辑' });
expect(button.className).toContain('platform-action-button--editor-dark');
expect(button.className).toContain('text-sm');
expect(button.className).toContain('gap-2');
expect(button.querySelector('svg')?.className.baseVal).toContain('h-4');
});

View File

@@ -0,0 +1,58 @@
import type { ButtonHTMLAttributes } from 'react';
import { ArrowLeft } from 'lucide-react';
import { PlatformActionButton } from './PlatformActionButton';
import type { PlatformActionButtonSurface } from './platformActionButtonModel';
type PlatformBackActionButtonVariant = 'compact' | 'regular';
type PlatformBackActionButtonProps = Omit<
ButtonHTMLAttributes<HTMLButtonElement>,
'children'
> & {
label?: string;
variant?: PlatformBackActionButtonVariant;
surface?: PlatformActionButtonSurface;
};
const VARIANT_CLASS: Record<PlatformBackActionButtonVariant, string> = {
compact: 'gap-1.5 py-1.5 text-[11px]',
regular: 'gap-2 py-2 text-sm',
};
const ICON_CLASS: Record<PlatformBackActionButtonVariant, string> = {
compact: 'h-3.5 w-3.5',
regular: 'h-4 w-4',
};
/**
* 平台轻量返回动作按钮。
* 统一结果页、工作台等白底场景里的“左箭头 + 返回文案”按钮骨架。
*/
export function PlatformBackActionButton({
label = '返回',
variant = 'compact',
surface = 'platform',
className,
...buttonProps
}: PlatformBackActionButtonProps) {
return (
<PlatformActionButton
{...buttonProps}
surface={surface}
tone="ghost"
size="xs"
className={[
'min-h-0 self-start',
VARIANT_CLASS[variant],
className,
]
.filter(Boolean)
.join(' ')}
>
<ArrowLeft className={ICON_CLASS[variant]} />
{label}
</PlatformActionButton>
);
}