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

Refine creation progress and wooden fish runtime

Browse Source
This commit is contained in:
五香丸子
2026-05-27 21:56:19 +08:00
parent 95e702d670
commit 9cc36ea99c
9 changed files with 209 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/CustomWorldGenerationView.test.tsx
View File

@@ -142,17 +142,22 @@ describe('CustomWorldGenerationView', () => {
screen
.getByRole('progressbar', { name: progressTitle })
.className,
).toContain('w-[min(35rem,94vw)]');
).toContain('w-[400px]');
expect(
screen
.getByRole('progressbar', { name: progressTitle })
.className,
).toContain('sm:w-[52rem]');
).toContain('h-[400px]');
expect(
screen
.getByRole('progressbar', { name: progressTitle })
.getAttribute('data-ring-start-degrees'),
).toBe('155');
).toBe('135');
expect(
screen
.getByRole('progressbar', { name: progressTitle })
.getAttribute('data-ring-fill-start-degrees'),
).toBe('135');
expect(
screen
.getByRole('progressbar', { name: progressTitle })
@@ -193,12 +198,12 @@ describe('CustomWorldGenerationView', () => {
screen
.getByTestId('generation-hero-progress-ring-track')
.getAttribute('transform'),
).toBe('rotate(155 200 200)');
).toBe('rotate(135 200 200)');
expect(
screen
.getByTestId('generation-hero-progress-ring-fill')
.getAttribute('transform'),
).toBe('rotate(155 200 200)');
).toBe('rotate(135 200 200)');
expect(
screen
.getByTestId('generation-hero-progress-ring-fill')

25
src/components/GenerationProgressHero.tsx
View File

@@ -4,8 +4,16 @@ import { useEffect, useId, useRef } from 'react';
import generationHeroVideo from '../../media/create_bg_video.mp4';
const GENERATION_PROGRESS_RING_START_DEGREES = 155;
const GENERATION_PROGRESS_RING_SWEEP_DEGREES = 270;
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;
@@ -118,7 +126,9 @@ export function GenerationProgressHero({
const safeProgress = clampGenerationProgress(progressValue);
const ringGradientId = useId().replace(/:/g, '');
const ringMetrics = buildGenerationRingMetrics(safeProgress);
const ringDegrees = Math.round((safeProgress / 100) * 270);
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)}`;
@@ -160,16 +170,19 @@ export function GenerationProgressHero({
</div>
<div
className="relative mx-auto aspect-square w-[min(35rem,94vw)] overflow-visible rounded-full sm:w-[52rem]"
className="relative mx-auto h-[400px] w-[400px] 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={90}
data-ring-gap-degrees={GENERATION_PROGRESS_RING_GAP_DEGREES}
>
<svg
data-testid="generation-hero-progress-ring"
@@ -214,7 +227,7 @@ export function GenerationProgressHero({
strokeLinecap="round"
strokeWidth={GENERATION_PROGRESS_RING_STROKE_WIDTH}
strokeDasharray={ringFillDasharray}
transform={`rotate(${GENERATION_PROGRESS_RING_START_DEGREES} ${GENERATION_PROGRESS_RING_CENTER} ${GENERATION_PROGRESS_RING_CENTER})`}
transform={`rotate(${GENERATION_PROGRESS_RING_FILL_START_DEGREES} ${GENERATION_PROGRESS_RING_CENTER} ${GENERATION_PROGRESS_RING_CENTER})`}
vectorEffect="non-scaling-stroke"
shapeRendering="geometricPrecision"
/>

15
src/components/bark-battle-creation/BarkBattleGeneratingView.test.tsx
View File

@@ -130,12 +130,12 @@ describe('BarkBattleGeneratingView', () => {
screen
.getByRole('progressbar', { name: '汪汪声浪素材生成进度' })
.className,
).toContain('w-[min(35rem,94vw)]');
).toContain('w-[400px]');
expect(
screen
.getByRole('progressbar', { name: '汪汪声浪素材生成进度' })
.className,
).toContain('sm:w-[52rem]');
).toContain('h-[400px]');
expect(
screen
.getByRole('progressbar', { name: '汪汪声浪素材生成进度' })
@@ -145,7 +145,12 @@ describe('BarkBattleGeneratingView', () => {
screen
.getByRole('progressbar', { name: '汪汪声浪素材生成进度' })
.getAttribute('data-ring-start-degrees'),
).toBe('155');
).toBe('135');
expect(
screen
.getByRole('progressbar', { name: '汪汪声浪素材生成进度' })
.getAttribute('data-ring-fill-start-degrees'),
).toBe('135');
expect(
screen
.getByRole('progressbar', { name: '汪汪声浪素材生成进度' })
@@ -186,12 +191,12 @@ describe('BarkBattleGeneratingView', () => {
screen
.getByTestId('generation-hero-progress-ring-track')
.getAttribute('transform'),
).toBe('rotate(155 200 200)');
).toBe('rotate(135 200 200)');
expect(
screen
.getByTestId('generation-hero-progress-ring-fill')
.getAttribute('transform'),
).toBe('rotate(155 200 200)');
).toBe('rotate(135 200 200)');
expect(
screen
.getByTestId('generation-hero-progress-ring-fill')