收口运行态状态提示组件

新增 PlatformRuntimeStatusToast 统一运行态短错误、成功和反馈 toast
迁移跳一跳、拼图、敲木鱼、方洞和宝贝爱画运行态状态 chip
补充公共组件与运行态回归测试,并更新 PlatformUiKit 文档和 Hermes 决策记录
This commit is contained in:
2026-06-10 11:24:40 +08:00
parent 43c66d31a2
commit b601b3b57e
16 changed files with 291 additions and 48 deletions

View File

@@ -103,6 +103,25 @@ test('点击洞口会提交该洞口选择', async () => {
});
});
test('错误提示使用公共运行态 toast', () => {
const run = buildRun();
render(
<SquareHoleRuntimeShell
run={run}
error="投放失败"
onBack={vi.fn()}
onRestart={vi.fn()}
onDropShape={vi.fn()}
/>,
);
const toast = screen.getByRole('alert');
expect(toast.textContent).toBe('投放失败');
expect(toast.className).toContain('platform-runtime-status-toast');
});
test('引导高亮不会默认指向当前正确洞口', () => {
renderRuntime();

View File

@@ -23,6 +23,7 @@ import type {
SquareHoleDropResponse,
SquareHoleRunSnapshot,
} from '../../../packages/shared/src/contracts/squareHoleRuntime';
import { PlatformRuntimeStatusToast } from '../common/PlatformRuntimeStatusToast';
import { ResolvedAssetImage } from '../ResolvedAssetImage';
type SquareHoleRuntimeShellProps = {
@@ -531,19 +532,23 @@ export function SquareHoleRuntimeShell({
<section className="mt-auto min-h-[3.5rem] pt-3">
{feedback ? (
<div
className={`rounded-[1.2rem] border px-3 py-2 text-center text-sm font-black ${
feedback.accepted
? 'border-emerald-200/35 bg-emerald-400/18 text-emerald-50'
: 'border-rose-200/35 bg-rose-400/18 text-rose-50'
}`}
<PlatformRuntimeStatusToast
tone={feedback.accepted ? 'success' : 'error'}
surface="dark"
shape="rounded"
className="w-full"
>
{feedback.message}
</div>
</PlatformRuntimeStatusToast>
) : dropError || error ? (
<div className="rounded-[1.2rem] border border-rose-200/35 bg-rose-400/18 px-3 py-2 text-center text-sm font-black text-rose-50">
<PlatformRuntimeStatusToast
tone="error"
surface="dark"
shape="rounded"
className="w-full"
>
{dropError ?? error}
</div>
</PlatformRuntimeStatusToast>
) : null}
</section>
</div>