kdletters
a8012109ae
抽出生成页共用返回按钮壳并复用共享图标按钮能力 将自定义世界生成页接入共享返回按钮壳 将汪汪声浪生成页接入共享返回按钮壳并保留禁用态 补充两个生成页返回按钮的样式与交互回归测试
335 lines
13 KiB
TypeScript
335 lines
13 KiB
TypeScript
import { ArrowLeft, Clock3, Hourglass } from 'lucide-react';
|
||
import { useEffect, useId, useRef } from 'react';
|
||
|
||
import generationHeroVideo from '../../media/create_bg_video.mp4';
|
||
import { PlatformIconButton } from './common/PlatformIconButton';
|
||
import { PlatformProgressBar } from './common/PlatformProgressBar';
|
||
|
||
const GENERATION_PROGRESS_RING_GAP_DEGREES = 90;
|
||
const GENERATION_PROGRESS_RING_BOTTOM_DEGREES = 90;
|
||
// 中文注释：SVG 圆从 3 点钟方向起笔；起点放在 135deg，可让 90deg 开口居中落在正下方。
|
||
const GENERATION_PROGRESS_RING_START_DEGREES =
|
||
GENERATION_PROGRESS_RING_BOTTOM_DEGREES +
|
||
GENERATION_PROGRESS_RING_GAP_DEGREES / 2;
|
||
const GENERATION_PROGRESS_RING_FILL_START_DEGREES =
|
||
GENERATION_PROGRESS_RING_START_DEGREES;
|
||
const GENERATION_PROGRESS_RING_SWEEP_DEGREES =
|
||
360 - GENERATION_PROGRESS_RING_GAP_DEGREES;
|
||
const GENERATION_PROGRESS_RING_VIEWBOX = 400;
|
||
const GENERATION_PROGRESS_RING_CENTER = GENERATION_PROGRESS_RING_VIEWBOX / 2;
|
||
const GENERATION_PROGRESS_RING_RADIUS = 166;
|
||
const GENERATION_PROGRESS_RING_STROKE_WIDTH = 18;
|
||
const GENERATION_PROGRESS_RING_SWEEP_RATIO =
|
||
GENERATION_PROGRESS_RING_SWEEP_DEGREES / 360;
|
||
|
||
type GenerationProgressHeroProps = {
|
||
title: string;
|
||
phaseLabel: string;
|
||
progressValue: number;
|
||
estimatedWaitText: string;
|
||
elapsedText: string;
|
||
};
|
||
|
||
type GenerationCurrentStepCardProps = {
|
||
label: string;
|
||
statusLabel: string;
|
||
progressValue: number;
|
||
};
|
||
|
||
type GenerationHeaderBackButtonProps = {
|
||
label: string;
|
||
onClick: () => void;
|
||
disabled?: boolean;
|
||
disabledOpacity?: number;
|
||
className?: string;
|
||
};
|
||
|
||
function clampGenerationProgress(value: number) {
|
||
return Math.max(0, Math.min(100, Math.round(value)));
|
||
}
|
||
|
||
function buildGenerationRingMetrics(progressValue: number) {
|
||
const circumference = 2 * Math.PI * GENERATION_PROGRESS_RING_RADIUS;
|
||
const sweepLength = circumference * GENERATION_PROGRESS_RING_SWEEP_RATIO;
|
||
const progressLength = sweepLength * (progressValue / 100);
|
||
|
||
return {
|
||
circumference,
|
||
progressLength,
|
||
sweepLength,
|
||
};
|
||
}
|
||
|
||
export function GenerationHeaderBackButton({
|
||
label,
|
||
onClick,
|
||
disabled = false,
|
||
disabledOpacity,
|
||
className,
|
||
}: GenerationHeaderBackButtonProps) {
|
||
return (
|
||
<PlatformIconButton
|
||
label={label}
|
||
title={label}
|
||
variant="darkMini"
|
||
onClick={onClick}
|
||
disabled={disabled}
|
||
className={[
|
||
'gap-2 rounded-full !border-transparent !bg-transparent px-0 py-2 text-xs font-black !text-[#171411] shadow-none hover:!bg-transparent hover:!text-[#171411] sm:text-sm',
|
||
className,
|
||
]
|
||
.filter(Boolean)
|
||
.join(' ')}
|
||
style={disabled && disabledOpacity != null ? { opacity: disabledOpacity } : undefined}
|
||
icon={<ArrowLeft className="h-5 w-5 shrink-0" strokeWidth={2.6} />}
|
||
>
|
||
<span className="break-keep">{label}</span>
|
||
</PlatformIconButton>
|
||
);
|
||
}
|
||
|
||
export function GenerationPageBackdrop() {
|
||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||
|
||
useEffect(() => {
|
||
const video = videoRef.current;
|
||
if (!video) {
|
||
return undefined;
|
||
}
|
||
|
||
video.defaultMuted = true;
|
||
video.muted = true;
|
||
video.volume = 0;
|
||
|
||
const isJsdom = window.navigator.userAgent.toLowerCase().includes('jsdom');
|
||
const tryPlay = () => {
|
||
if (isJsdom) {
|
||
return;
|
||
}
|
||
try {
|
||
const playPromise = video.play();
|
||
if (playPromise && typeof playPromise.then === 'function') {
|
||
void playPromise.catch(() => {});
|
||
}
|
||
} catch {
|
||
// 中文注释：测试环境和某些内核可能同步拒绝 play；失败时保留静音背景层，不阻断页面渲染。
|
||
}
|
||
};
|
||
|
||
tryPlay();
|
||
video.addEventListener('loadeddata', tryPlay);
|
||
video.addEventListener('canplay', tryPlay);
|
||
video.addEventListener('playing', tryPlay);
|
||
window.addEventListener('focus', tryPlay);
|
||
document.addEventListener('visibilitychange', tryPlay);
|
||
|
||
return () => {
|
||
video.removeEventListener('loadeddata', tryPlay);
|
||
video.removeEventListener('canplay', tryPlay);
|
||
video.removeEventListener('playing', tryPlay);
|
||
window.removeEventListener('focus', tryPlay);
|
||
document.removeEventListener('visibilitychange', tryPlay);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div className="pointer-events-none fixed inset-0 z-0 h-[100dvh] w-screen overflow-hidden bg-transparent">
|
||
<video
|
||
ref={videoRef}
|
||
data-testid="generation-page-background-video"
|
||
className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 object-cover opacity-100"
|
||
autoPlay
|
||
loop
|
||
muted
|
||
playsInline
|
||
preload="auto"
|
||
aria-hidden="true"
|
||
>
|
||
<source src={generationHeroVideo} type="video/mp4" />
|
||
</video>
|
||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,250,244,0.08)_0%,rgba(255,247,238,0.16)_52%,rgba(255,250,246,0.32)_100%)]" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function GenerationProgressHero({
|
||
title,
|
||
phaseLabel,
|
||
progressValue,
|
||
estimatedWaitText,
|
||
elapsedText,
|
||
}: GenerationProgressHeroProps) {
|
||
const safeProgress = clampGenerationProgress(progressValue);
|
||
const ringGradientId = useId().replace(/:/g, '');
|
||
const ringMetrics = buildGenerationRingMetrics(safeProgress);
|
||
const ringDegrees = Math.round(
|
||
(safeProgress / 100) * GENERATION_PROGRESS_RING_SWEEP_DEGREES,
|
||
);
|
||
const ringTrackDasharray = `${ringMetrics.sweepLength.toFixed(2)} ${ringMetrics.circumference.toFixed(2)}`;
|
||
const ringFillDasharray = `${ringMetrics.progressLength.toFixed(2)} ${ringMetrics.circumference.toFixed(2)}`;
|
||
|
||
return (
|
||
<div className="relative mx-auto flex w-full min-w-0 max-w-[60rem] flex-col items-center px-0 pb-1 pt-1 sm:pt-4">
|
||
<div className="sr-only">
|
||
{title}
|
||
{phaseLabel ? ` ${phaseLabel}` : ''}
|
||
</div>
|
||
<div className="relative w-full min-w-0 max-w-[56rem] sm:max-w-[60rem]">
|
||
<div
|
||
className="relative mx-auto aspect-square w-[min(400px,calc(100%_-_0.75rem))] max-w-full shrink-0 overflow-visible rounded-full"
|
||
role="progressbar"
|
||
aria-label={title}
|
||
aria-valuemin={0}
|
||
aria-valuemax={100}
|
||
aria-valuenow={safeProgress}
|
||
data-ring-start-degrees={GENERATION_PROGRESS_RING_START_DEGREES}
|
||
data-ring-fill-start-degrees={
|
||
GENERATION_PROGRESS_RING_FILL_START_DEGREES
|
||
}
|
||
data-ring-sweep-degrees={GENERATION_PROGRESS_RING_SWEEP_DEGREES}
|
||
data-ring-fill-degrees={ringDegrees}
|
||
data-ring-gap-degrees={GENERATION_PROGRESS_RING_GAP_DEGREES}
|
||
>
|
||
<svg
|
||
data-testid="generation-hero-progress-ring"
|
||
className="pointer-events-none absolute inset-0 z-0 h-full w-full"
|
||
viewBox={`0 0 ${GENERATION_PROGRESS_RING_VIEWBOX} ${GENERATION_PROGRESS_RING_VIEWBOX}`}
|
||
aria-hidden="true"
|
||
preserveAspectRatio="xMidYMid meet"
|
||
>
|
||
<defs>
|
||
<linearGradient
|
||
id={`${ringGradientId}-progress`}
|
||
x1="32%"
|
||
y1="18%"
|
||
x2="82%"
|
||
y2="86%"
|
||
>
|
||
<stop offset="0%" stopColor="#f1a34f" />
|
||
<stop offset="100%" stopColor="#e55d16" />
|
||
</linearGradient>
|
||
</defs>
|
||
<circle
|
||
data-testid="generation-hero-progress-ring-track"
|
||
cx={GENERATION_PROGRESS_RING_CENTER}
|
||
cy={GENERATION_PROGRESS_RING_CENTER}
|
||
r={GENERATION_PROGRESS_RING_RADIUS}
|
||
fill="none"
|
||
stroke="#f3e5da"
|
||
strokeLinecap="round"
|
||
strokeWidth={GENERATION_PROGRESS_RING_STROKE_WIDTH}
|
||
strokeDasharray={ringTrackDasharray}
|
||
transform={`rotate(${GENERATION_PROGRESS_RING_START_DEGREES} ${GENERATION_PROGRESS_RING_CENTER} ${GENERATION_PROGRESS_RING_CENTER})`}
|
||
vectorEffect="non-scaling-stroke"
|
||
shapeRendering="geometricPrecision"
|
||
/>
|
||
<circle
|
||
data-testid="generation-hero-progress-ring-fill"
|
||
cx={GENERATION_PROGRESS_RING_CENTER}
|
||
cy={GENERATION_PROGRESS_RING_CENTER}
|
||
r={GENERATION_PROGRESS_RING_RADIUS}
|
||
fill="none"
|
||
stroke={`url(#${ringGradientId}-progress)`}
|
||
strokeLinecap="round"
|
||
strokeWidth={GENERATION_PROGRESS_RING_STROKE_WIDTH}
|
||
strokeDasharray={ringFillDasharray}
|
||
transform={`rotate(${GENERATION_PROGRESS_RING_FILL_START_DEGREES} ${GENERATION_PROGRESS_RING_CENTER} ${GENERATION_PROGRESS_RING_CENTER})`}
|
||
vectorEffect="non-scaling-stroke"
|
||
shapeRendering="geometricPrecision"
|
||
/>
|
||
</svg>
|
||
<div
|
||
className="relative z-30 flex h-full w-full flex-col items-center justify-start pt-[2%] text-center sm:pt-[1.5%]"
|
||
data-testid="generation-hero-progress-content"
|
||
>
|
||
<div className="relative z-30 text-[9px] font-black tracking-[0.16em] text-[#7f441f] sm:text-[10px]">
|
||
总进度
|
||
</div>
|
||
<div className="relative z-30 mt-1 text-[1.15rem] font-black leading-none text-[#e45e14] sm:mt-1.5 sm:text-[1.9rem]">
|
||
{safeProgress}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative z-20 mt-3 grid w-full grid-cols-2 gap-2 px-0 sm:absolute sm:inset-0 sm:mt-0 sm:block sm:px-0">
|
||
<div
|
||
className="w-full rounded-[1.1rem] border border-white/58 bg-white/58 px-2.5 py-2 text-center shadow-[0_14px_30px_rgba(112,57,30,0.10)] backdrop-blur-md sm:absolute sm:left-0 sm:top-1/2 sm:w-[8rem] sm:-translate-y-1/2 sm:px-3 sm:py-2.5"
|
||
data-testid="generation-hero-wait-card"
|
||
>
|
||
<div className="flex items-center justify-center gap-1.5 text-[#2a1c14]">
|
||
<Hourglass className="h-3.5 w-3.5 shrink-0" strokeWidth={2.2} />
|
||
<div className="text-[9px] font-black tracking-[0.1em] text-[#7e421f] sm:text-[10px]">
|
||
预计等待
|
||
</div>
|
||
</div>
|
||
<div className="mt-1.5 break-keep text-[12px] font-black leading-tight text-[#161211] sm:text-[13px]">
|
||
{estimatedWaitText}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className="w-full rounded-[1.1rem] border border-white/58 bg-white/58 px-2.5 py-2 text-center shadow-[0_14px_30px_rgba(112,57,30,0.10)] backdrop-blur-md sm:absolute sm:right-0 sm:top-1/2 sm:w-[8rem] sm:-translate-y-1/2 sm:px-3 sm:py-2.5"
|
||
data-testid="generation-hero-elapsed-card"
|
||
>
|
||
<div className="flex items-center justify-center gap-1.5 text-[#2a1c14]">
|
||
<div className="text-[9px] font-black tracking-[0.1em] text-[#7e421f] sm:text-[10px]">
|
||
已耗时
|
||
</div>
|
||
<Clock3 className="h-3.5 w-3.5 shrink-0" strokeWidth={2.2} />
|
||
</div>
|
||
<div className="mt-1.5 break-keep text-[12px] font-black leading-tight text-[#161211] sm:text-[13px]">
|
||
{elapsedText}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function GenerationCurrentStepCard({
|
||
label,
|
||
statusLabel,
|
||
progressValue,
|
||
}: GenerationCurrentStepCardProps) {
|
||
const safeProgress = clampGenerationProgress(progressValue);
|
||
const isActive = statusLabel === '进行中';
|
||
|
||
return (
|
||
<div
|
||
className="rounded-[1.75rem] border border-white/58 bg-white/58 px-4 py-4 shadow-[0_22px_56px_rgba(112,57,30,0.10)] backdrop-blur-md sm:px-5 sm:py-5"
|
||
data-testid="generation-current-step-card"
|
||
>
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="min-w-0 flex-1">
|
||
<div className="text-[10px] font-black tracking-[0.16em] text-[#d94d1f] sm:text-[11px]">
|
||
当前步骤
|
||
</div>
|
||
<div className="mt-2 break-words text-[14px] font-black leading-tight text-[#111111] sm:text-[15px]">
|
||
{label}
|
||
</div>
|
||
</div>
|
||
<div className="flex shrink-0 flex-col items-end gap-2 pt-1 text-right">
|
||
<div className="inline-flex items-center gap-2 text-[11px] font-black leading-none tracking-[0.04em] text-[#df6118] sm:text-[12px]">
|
||
{statusLabel} {safeProgress}%
|
||
</div>
|
||
{isActive ? (
|
||
<span
|
||
className="ml-auto inline-block h-5 w-5 animate-spin rounded-full border-2 border-[#f3c8ae] border-t-[#df6118]"
|
||
aria-hidden="true"
|
||
/>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<PlatformProgressBar
|
||
value={safeProgress}
|
||
size="sm"
|
||
ariaLabel={`${label} 进度`}
|
||
className="mt-4 bg-[#f5eee8]"
|
||
fillClassName="bg-[linear-gradient(90deg,#ef7a1f_0%,#e25f18_64%,#f0b07e_100%)]"
|
||
fillStyle={{ transitionDuration: '450ms' }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|