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

1

Browse Source
This commit is contained in:
高物
2026-05-08 21:46:11 +08:00
parent 94975e4735
commit e410f7974e
13 changed files with 757 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.hermes/shared-memory/pitfalls.md
View File

@@ -120,6 +120,14 @@
- 验证：`npm run api-server` 后 `/healthz` 返回 200，相关路由冒烟通过。
- 关联：`server-rs/crates/api-server/src/main.rs`、`server-rs/crates/api-server/src/app.rs`。
## Windows api-server.exe 锁文件与强杀退出码容易混淆
- 现象：`cargo run -p api-server` 或 `npm run api-server` 报 `failed to remove file ... target\debug\api-server.exe`；清理旧进程后，旧终端可能继续打印 `process didn't exit successfully: server-rs\target\debug\api-server.exe (exit code: 0xffffffff)`。
- 原因：Windows 不能覆盖仍在运行的 exe；通常是上一条 `npm run api-server` 链路仍在运行，进程树为 `npm run api-server -> node scripts/api-server-dev.mjs -> cargo run -> api-server.exe`。`0xffffffff` 常见于排障时用 `Stop-Process -Force` 强制结束旧 `api-server.exe` 后由 Cargo 回显，不一定代表新启动失败。
- 处理：先按目标路径确认并停止本仓库的旧 `api-server.exe` 及其父级 `cargo/node/cmd` 启动链路，再重新启动；不要同时开多个 `npm run api-server`。
- 验证：确认没有匹配 `C:\Genarrative\server-rs\target\debug\api-server.exe` 的进程后，`Remove-Item` 能删除旧 exe；随后 `npm run api-server` 启动并访问 `/healthz` 返回 200。
- 关联：`scripts/api-server-dev.mjs`、`server-rs/crates/api-server/src/main.rs`。
## Windows debug 长 SSE Future 触发 api-server 断连
- 现象：前端 Vite 代理请求 `/api/runtime/creative-agent/sessions/{sessionId}/messages/stream` 报 `read ECONNRESET`，随后 `api-server.exe` 以 `0xffffffff` 退出，`dev:rust` 回收 SpacetimeDB、Vite 和后台 Vite。

15
docs/design/PLATFORM_MOBILE_RECOMMEND_DISCOVER_DRAFT_TAB_REDESIGN_2026-05-05.md
View File

@@ -31,10 +31,13 @@
- 数据来源沿用 `featuredEntries + latestEntries` 去重后的公开作品列表。
- 首个可运行作品自动进入推荐页内嵌运行态，主视口不再展示作品封面卡。
- 主视口占据顶部栏与底部作品区之间的主要空间，保持黑色运行容器、圆角边界和短加载态，直接承载作品启动后的玩法画面。
- 主视口占据顶部栏与作品信息区之间的主要空间，使用平台主题 token 控制运行容器背景、边框、阴影、加载态文字和错误态按钮；亮色主题不得残留纯黑底白字加载块。
- 主视口下方展示当前作品的游玩、点赞、评论/改造等紧凑指标、作者头像、作者名与作品名，不写规则说明类文案。
- 底部作品区使用横向滑动切换器，条目只展示作品名、类型和核心指标；点击或滑动到其他作品时切换上方运行内容。
- 点击作品元信息仍可进入既有详情页，点赞、改造、复制作品号等完整操作继续收敛在详情页。
- 作品信息区不再提供详情箭头或点击详情入口；点击该区域无效，上滑切换下一个推荐作品，下滑切换上一个推荐作品。
- 用户停留在推荐页时，底部当前 Tab 从“推荐”切换为“下一个”，图标使用向下的倒三角 / 双下箭头语义，点击后切换下一个推荐作品。
- 推荐页不再展示额外的底部作品切换块；当前作品的完整操作继续收敛在详情页和作品自身运行态中。
- 推荐页嵌入运行只调整平台外壳容器、主题注入和玩法壳层配色，不改写作品数据、关卡设定、道具设定或图片资产。
- 点赞、改造、复制作品号等完整操作继续收敛在详情页，详情入口由作品自身运行态或其它广场列表承接，推荐页作品信息区只负责展示和上下滑切换。
- 无数据、加载中、启动失败和暂不支持内嵌运行的作品沿用短状态文案。
桌面端仍保持现有首页布局，只把一级导航文案从“首页”改为“推荐”。
@@ -74,14 +77,16 @@
## 7. 验收
1. 移动端底部导航显示“推荐 / 发现 / 创作 / 草稿 / 我的”，未登录时显示“推荐 / 创作 / 发现”。
1. 移动端底部导航非推荐页显示“推荐 / 发现 / 创作 / 草稿 / 我的”，未登录时显示“推荐 / 创作 / 发现”；停留在推荐页时当前 Tab 显示“下一个”。
2. 点击“推荐”直接看到公开作品启动后的内容，不再先看到搜索框、频道 Tab 或封面卡流。
3. 点击“发现”可看到搜索、推荐、今日、分类、排行子 Tab。
4. 点击“草稿”看到原创作页作品列表。
5. 点击“创作”只看到新建创作入口。
6. “我的”里的“玩过”弹层包含原存档列表入口，点击存档能继续恢复。
7. 移动端底部导航为悬浮胶囊样式，保留当前明暗主题色变量，不新增第三套主题。
8. 推荐页底部作品区可横向滑动并切换作品，切换后上方运行视口同步进入对应作品内容。
8. 推荐页不出现额外底部作品卡或横滑切换块，运行视口、加载态和错误态跟随当前明暗主题。
9. 拼图玩法背景、HUD、按钮、弹窗、排行榜和相似作品卡跟随平台主题色；暗色主题仍保留深色游戏感，亮色主题不得出现大面积固定黑底。
10. 推荐页作品信息区点击无效，上滑切下一个、下滑切上一个；点击底部“下一个”也切下一个作品。
## 8. 2026-05-07 未登录三栏补充

24
docs/design/PUZZLE_RUNTIME_HEADER_AND_CLEAR_EFFECT_DESIGN_2026-04-27.md
View File

@@ -17,9 +17,8 @@
1. 左侧保留返回按钮。
2. 中间居中展示关卡主信息：
- 第一行：拼图关卡名
- 第二行：作者昵称
- 第三行：`第 N 关`
- 第一行：`第 N 关` 与拼图关卡名，二者保持同一行。
- 第二行：紧凑倒计时。
3. 右侧新增设置按钮。
同时移除以下冗余标识：
@@ -31,12 +30,27 @@
### 1.1 2026-04-30 顶栏与底部工具补充
1. 顶栏作者信息不再只显示一行作者名，必须展示为作者头像与昵称组合；当前运行态只提供昵称时，用昵称首字生成圆形占位头像。
2. 倒计时组件提升为顶栏中的强信息，字号、内边距和图标尺寸都需要明显大于作者昵称与关卡序号。
1. 历史口径曾要求顶栏展示作者头像与昵称；该要求已被 2026-05-08 精简口径替代，当前拼图棋盘 HUD 不再展示作者信息。
2. 倒计时组件保持为顶栏中的强信息，但需要采用紧凑尺寸，不得遮挡棋盘内容。
3. 底部只保留 `提示 / 原图 / 冻结` 三个功能按钮，并整体居中展示；三个按钮触控面积和图标字号都需要放大。
4. 底部不再展示“等待下一关候选”这类状态占位。通关后在三个道具按钮上方固定展示“下一关”按钮，展示条件只依赖当前关卡已通关，不依赖 `recommendedNextProfileId` 是否已有值。
5. 点击底部“下一关”按钮继续调用运行时壳层已有 `onAdvanceNextLevel` 事件；正式 run 由后端 `next-level` 选择候选，本地 run 由 `local-next-level` 生成或接续下一关，前端不在按钮层自行决定下一关来源。
### 1.2 2026-05-08 推荐页嵌入态 HUD 精简
1. 拼图运行时顶栏不再展示作者头像、作者昵称或作者首字占位，作者信息只在推荐页作品信息、详情页和排行榜等非棋盘 HUD 区域展示。
2. 顶部主信息压缩为两行：第一行 `第 N 关 + 关卡名`，第二行小号倒计时；倒计时不能使用此前的大号胶囊尺寸。
3. 返回按钮和设置按钮上移并缩小移动端基础尺寸，减少对棋盘顶部空间的占用。
4. 棋盘容器必须保留固定顶部安全区，确保关卡名和倒计时不会遮挡拼图内容。
5. 推荐页嵌入时只调整外壳间距和 HUD 布局，不改写作品关卡、作者、道具、时间限制或图片资产等作品设定。
### 1.3 2026-05-08 主题色联动
1. 拼图运行态根容器、背景、棋盘底色、顶部 HUD、底部工具栏、加载态、失败弹窗、通关弹窗、道具确认弹窗、设置弹窗和相似作品卡必须通过 `src/index.css` 中的 `--puzzle-runtime-*` 主题变量控制。
2. `platform-theme--light` 下拼图玩法背景应使用浅色平台底色与粉橙主色点缀，文字使用平台正文 token；不得继续使用固定 `bg-slate-950 text-white` 作为大面积底色。
3. `platform-theme--dark` 下可保留深色棋盘氛围，但按钮、选中态、倒计时、弹窗边框和推荐页加载态仍要从主题 token 取色，避免局部色板漂移。
4. 推荐页内嵌拼图时，父级必须保持 `platform-theme` 类可传递到 `PuzzleRuntimeShell`，不能让 runtime 脱离平台主题变量。
### 2. 拼图块显示规则
运行时单块右下角编号全部移除。

1
server-rs/Cargo.lock generated
View File

@@ -119,7 +119,6 @@ dependencies = [
"time",
"tokio",
"tokio-stream",
"tokio-tungstenite 0.27.0",
"tower",
"tower-http",
"tracing",

1
server-rs/crates/api-server/Cargo.toml
View File

@@ -42,7 +42,6 @@ shared-logging = { workspace = true }
spacetime-client = { workspace = true }
tokio = { workspace = true, features = ["macros", "rt-multi-thread", "net", "time"] }
tokio-stream = { workspace = true }
tokio-tungstenite = { workspace = true }
futures-util = { workspace = true }
time = { workspace = true, features = ["formatting"] }
tower-http = { workspace = true, features = ["trace"] }

21
server-rs/crates/api-server/src/volcengine_speech.rs
View File

@@ -6,18 +6,17 @@ use axum::{
ws::{Message as ClientWsMessage, WebSocket, WebSocketUpgrade},
},
http::{HeaderValue, StatusCode, header},
response::{IntoResponse, Response},
response::Response,
};
use futures_util::{SinkExt, StreamExt, TryStreamExt};
use platform_speech::{
AsrAudioConfig, AsrFrameKind, PublicSpeechConfig, PublicSpeechEndpoints, SpeechError,
TtsAudioParams, TtsBidirectionClientEvent, TtsSseRequest, VolcengineSpeechClient,
VolcengineSpeechConfig, build_asr_frame, build_asr_full_client_request,
TtsAudioParams, TtsBidirectionClientEvent, TtsSseRequest, UpstreamWsError, UpstreamWsMessage,
VolcengineSpeechClient, VolcengineSpeechConfig, build_asr_frame, build_asr_full_client_request,
build_tts_bidirection_frame_from_client_event, default_asr_request_payload,
parse_asr_response_frame, parse_tts_response_frame, tts_response_to_client_value,
};
use serde_json::{Value, json};
use tokio_tungstenite::tungstenite::Message as UpstreamWsMessage;
use tracing::{info, warn};
use crate::{
@@ -249,12 +248,12 @@ async fn proxy_asr_websocket(socket: WebSocket, client: VolcengineSpeechClient,
}
Ok(UpstreamWsMessage::Text(text)) => {
browser_sender
.send(ClientWsMessage::Text(text))
.send(ClientWsMessage::Text(text.to_string().into()))
.await
.map_err(map_client_ws_send_error)?;
}
Ok(UpstreamWsMessage::Close(close)) => {
let _ = browser_sender.send(ClientWsMessage::Close(close)).await;
Ok(UpstreamWsMessage::Close(_)) => {
let _ = browser_sender.send(ClientWsMessage::Close(None)).await;
break;
}
Ok(UpstreamWsMessage::Ping(bytes)) => {
@@ -363,12 +362,12 @@ async fn proxy_tts_bidirection_websocket(socket: WebSocket, client: VolcengineSp
}
Ok(UpstreamWsMessage::Text(text)) => {
browser_sender
.send(ClientWsMessage::Text(text))
.send(ClientWsMessage::Text(text.to_string().into()))
.await
.map_err(map_client_ws_send_error)?;
}
Ok(UpstreamWsMessage::Close(close)) => {
let _ = browser_sender.send(ClientWsMessage::Close(close)).await;
Ok(UpstreamWsMessage::Close(_)) => {
let _ = browser_sender.send(ClientWsMessage::Close(None)).await;
break;
}
Ok(UpstreamWsMessage::Ping(bytes)) => {
@@ -451,7 +450,7 @@ fn map_speech_error(error: SpeechError) -> AppError {
}
}
fn map_ws_send_error(error: tokio_tungstenite::tungstenite::Error) -> SpeechError {
fn map_ws_send_error(error: UpstreamWsError) -> SpeechError {
SpeechError::Upstream(format!("发送火山语音 WebSocket 帧失败：{error}"))
}

2
server-rs/crates/platform-speech/src/lib.rs
View File

@@ -17,6 +17,8 @@ use tokio_tungstenite::{
};
use uuid::Uuid;
pub use tokio_tungstenite::tungstenite::{Error as UpstreamWsError, Message as UpstreamWsMessage};
pub const DEFAULT_ASR_WS_URL: &str = "wss://openspeech.bytedance.com/api/v3/sauc/bigmodel_async";
pub const DEFAULT_TTS_BIDIRECTION_WS_URL: &str =
"wss://openspeech.bytedance.com/api/v3/tts/bidirection";

76
src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
View File

@@ -4699,6 +4699,31 @@ export function PlatformEntryFlowShellImpl({
],
);
const saveAndExitRecommendPuzzleRuntime = useCallback(async () => {
if (activeRecommendRuntimeKind !== 'puzzle') {
return;
}
const currentRun = puzzleRunRef.current;
if (!currentRun) {
setActiveRecommendRuntimeKind(null);
return;
}
// 中文注释：推荐页嵌入拼图的“保存并退出”沿用现有运行态语义；
// 正式 run 的每次交换/拖动/通关已写回后端，退出时只收口暂停和本地快照。
const closedRun = currentRun.currentLevel
? setLocalPuzzlePaused(currentRun, false)
: currentRun;
puzzleRunRef.current = null;
setPuzzleRun(null);
setActiveRecommendRuntimeKind(null);
if (closedRun.currentLevel) {
setPuzzleError(null);
}
}, [activeRecommendRuntimeKind, setPuzzleError]);
const leaveAgentWorkspace = useCallback(() => {
enterCreateTab();
sessionController.resetSessionViewState();
@@ -5952,6 +5977,9 @@ export function PlatformEntryFlowShellImpl({
async (entry: PlatformPublicGalleryCard) => {
const entryKey = getPlatformPublicGalleryEntryKey(entry);
const runtimeKind = getPlatformRecommendRuntimeKind(entry);
if (entryKey !== activeRecommendEntryKey) {
await saveAndExitRecommendPuzzleRuntime();
}
setActiveRecommendEntryKey(entryKey);
setActiveRecommendRuntimeKind(runtimeKind);
setActiveRecommendRuntimeError(null);
@@ -6025,6 +6053,8 @@ export function PlatformEntryFlowShellImpl({
}
},
[
activeRecommendEntryKey,
saveAndExitRecommendPuzzleRuntime,
selectedPuzzleDetail,
setBigFishError,
setMatch3DError,
@@ -6037,6 +6067,38 @@ export function PlatformEntryFlowShellImpl({
startVisualNovelRunFromProfile,
],
);
const selectAdjacentRecommendRuntimeEntry = useCallback(
(direction: 1 | -1) => {
if (recommendRuntimeEntries.length === 0) {
return;
}
const activeIndex = recommendRuntimeEntries.findIndex(
(entry) =>
getPlatformPublicGalleryEntryKey(entry) === activeRecommendEntryKey,
);
const baseIndex = activeIndex >= 0 ? activeIndex : 0;
const nextIndex =
(baseIndex + direction + recommendRuntimeEntries.length) %
recommendRuntimeEntries.length;
const nextEntry = recommendRuntimeEntries[nextIndex];
if (!nextEntry) {
return;
}
if (
getPlatformPublicGalleryEntryKey(nextEntry) === activeRecommendEntryKey
) {
return;
}
void selectRecommendRuntimeEntry(nextEntry);
},
[
activeRecommendEntryKey,
recommendRuntimeEntries,
selectRecommendRuntimeEntry,
],
);
const recommendRuntimeContent = useMemo(() => {
if (
@@ -6153,6 +6215,8 @@ export function PlatformEntryFlowShellImpl({
}
error={puzzleError}
embedded
hideBackButton
hideExitControls
onBack={() => {
setActiveRecommendRuntimeKind(null);
}}
@@ -6270,7 +6334,7 @@ export function PlatformEntryFlowShellImpl({
}
return (
<div className="flex h-full min-h-0 items-center justify-center bg-black px-5 text-center text-sm font-semibold leading-6 text-white">
<div className={`platform-theme ${platformThemeClass} flex h-full min-h-0 items-center justify-center bg-[var(--platform-recommend-runtime-state-fill)] px-5 text-center text-sm font-semibold leading-6 text-[var(--platform-recommend-runtime-state-text)]`}>
正在读取世界
</div>
);
@@ -6291,6 +6355,7 @@ export function PlatformEntryFlowShellImpl({
match3dError,
match3dFlow,
match3dRun,
platformThemeClass,
puzzleError,
puzzleRun,
recommendRuntimeEntries,
@@ -7357,9 +7422,12 @@ export function PlatformEntryFlowShellImpl({
isVisualNovelBusy
}
recommendRuntimeError={activeRecommendRuntimeError}
onSelectRecommendEntry={(entry) => {
void selectRecommendRuntimeEntry(entry);
}}
onSelectNextRecommendEntry={() =>
selectAdjacentRecommendRuntimeEntry(1)
}
onSelectPreviousRecommendEntry={() =>
selectAdjacentRecommendRuntimeEntry(-1)
}
onOpenLibraryDetail={(entry) => {
runProtectedAction(() => {
void detailNavigation.openLibraryDetail(entry);

32
src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
View File

@@ -240,7 +240,7 @@ test('首次退出引导的作品改造按钮进入改造流程', () => {
expect(screen.queryByRole('dialog')).toBeNull();
});
test('顶部作者显示头像昵称，底部功能居中放大且不显示等待候选', () => {
test('顶部不显示作者，关卡标题和倒计时更紧凑', () => {
const runWithoutNext: PuzzleRunSnapshot = {
...clearedRun,
recommendedNextProfileId: null,
@@ -256,15 +256,17 @@ test('顶部作者显示头像昵称，底部功能居中放大且不显示等
/>,
);
const avatar = screen.getByText('测');
const timer = screen.getByText('4:48');
const hintButton = screen.getByRole('button', { name: '提示' });
const referenceButton = screen.getByRole('button', { name: '原图' });
const freezeButton = screen.getByRole('button', { name: '冻结' });
expect(avatar.className).toContain('rounded-full');
expect(screen.getByText('测试作者')).toBeTruthy();
expect(timer.className).toContain('text-2xl');
expect(screen.queryByText('测试作者')).toBeNull();
expect(screen.getByText('第 1 关')).toBeTruthy();
expect(screen.getByText('潮雾拼图')).toBeTruthy();
expect(timer.className).toContain('puzzle-runtime-timer');
expect(timer.className).toContain('text-lg');
expect(timer.className).not.toContain('text-2xl');
expect(hintButton.className).toContain('h-16');
expect(referenceButton.className).toContain('h-16');
expect(freezeButton.className).toContain('h-16');
@@ -467,14 +469,32 @@ test('拼图棋盘使用贴近移动端边缘的正方形舞台承载切块', ()
);
const board = screen.getByTestId('puzzle-board');
expect(board.className).toContain('puzzle-runtime-board');
expect(board.className).toContain('aspect-square');
expect(board.className).toContain('max-w-[min(99vw,calc(100vh_-_16.5rem))]');
expect(board.className).toContain('max-w-[min(99vw,calc(100vh_-_14rem))]');
expect(board.className).not.toContain('aspect-video');
expect(board.className).not.toContain('aspect-[9/16]');
expect(board.getAttribute('style')).toContain('grid-template-rows');
expect(container.querySelector('.min-h-\\[4\\.5rem\\]')).toBeNull();
});
test('拼图运行态主体使用主题语义类承接明暗主题', () => {
const { container } = renderPuzzleRuntime(
<PuzzleRuntimeShell
run={null}
onBack={vi.fn()}
onSwapPieces={vi.fn()}
onDragPiece={vi.fn()}
onAdvanceNextLevel={vi.fn()}
/>,
);
expect(container.firstElementChild?.className).toContain(
'puzzle-runtime-shell',
);
expect(container.querySelector('.puzzle-runtime-pill')).toBeTruthy();
});
test('合并块按实际拼块外轮廓描边', () => {
const mergedRun: PuzzleRunSnapshot = {
...clearedRun,

299
src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
View File

@@ -41,6 +41,7 @@ type PuzzleRuntimeShellProps = {
isBusy?: boolean;
error?: string | null;
hideBackButton?: boolean;
hideExitControls?: boolean;
embedded?: boolean;
onBack: () => void;
onRemodelWork?: (profileId: string) => void | Promise<void>;
@@ -157,10 +158,6 @@ function formatTimerMs(value: number | null | undefined) {
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
function resolveAuthorAvatarLabel(authorDisplayName: string) {
return authorDisplayName.trim().slice(0, 1) || '玩';
}
function resolveActiveFreezeElapsedMs(
level: PuzzleRuntimeLevelSnapshot,
nowMs: number,
@@ -309,6 +306,7 @@ export function PuzzleRuntimeShell({
isBusy = false,
error = null,
hideBackButton = false,
hideExitControls = false,
embedded = false,
onBack,
onRemodelWork,
@@ -790,9 +788,9 @@ export function PuzzleRuntimeShell({
if (!run || !currentLevel || !board) {
return (
<div
className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center bg-slate-950 text-white`}
className={`puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center`}
>
<div className="flex items-center gap-2 rounded-full bg-white/10 px-5 py-3 text-sm">
<div className="puzzle-runtime-pill flex items-center gap-2 rounded-full px-5 py-3 text-sm">
<Loader2 className="h-4 w-4 animate-spin" />
正在进入拼图关卡
</div>
@@ -963,9 +961,6 @@ export function PuzzleRuntimeShell({
const canShowNextAction =
canAdvanceDefaultNextLevel || hasSimilarWorkChoices;
const levelLabel = `第 ${currentLevel.levelIndex} 关`;
const authorAvatarLabel = resolveAuthorAvatarLabel(
currentLevel.authorDisplayName,
);
const exitPromptProfileId = currentLevel.profileId.trim();
const leaderboardEntries =
(currentLevel.leaderboardEntries ?? []).length > 0
@@ -979,6 +974,10 @@ export function PuzzleRuntimeShell({
isBusy || runtimeStatus !== 'playing' || Boolean(propDialog);
const handleBackRequest = () => {
if (hideExitControls) {
return;
}
if (
onRemodelWork &&
exitPromptProfileId &&
@@ -1069,7 +1068,10 @@ export function PuzzleRuntimeShell({
if (propKind === 'freezeTime') {
// 中文注释：正式 run 可能在冻结确认期间已被服务端结算为失败态；
// 这种边界同步只关闭确认窗，不再播放冻结成功反馈。
const resultLevel = (useResult ?? null)?.currentLevel ?? currentLevelRef.current;
const resultLevel =
useResult && typeof useResult === 'object'
? useResult.currentLevel
: currentLevelRef.current;
if (resultLevel?.status === 'playing') {
setIsFreezeEffectVisible(true);
window.setTimeout(() => {
@@ -1084,9 +1086,9 @@ export function PuzzleRuntimeShell({
return (
<div
className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center bg-slate-950 text-white`}
className={`puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center`}
>
<div className="relative h-full w-full overflow-hidden bg-[radial-gradient(circle_at_50%_20%,rgba(251,191,36,0.18),transparent_28%),radial-gradient(circle_at_20%_80%,rgba(249,115,22,0.16),transparent_26%),linear-gradient(180deg,#2d160e,#020617)]">
<div className="puzzle-runtime-stage relative h-full w-full overflow-hidden">
{currentLevel.coverImageSrc ? (
<ResolvedAssetImage
src={currentLevel.coverImageSrc}
@@ -1095,49 +1097,40 @@ export function PuzzleRuntimeShell({
className="absolute inset-0 h-full w-full object-cover opacity-[0.16] blur-2xl"
/>
) : null}
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:34px_34px] opacity-20" />
<div className="puzzle-runtime-stage__grid" />
<div className="absolute left-0 top-0 z-20 w-full px-4 py-4">
<div className="grid grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] items-start gap-2 sm:gap-3">
<div className="absolute left-0 top-0 z-20 w-full px-3 py-3 sm:px-4">
<div className="grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-start gap-2 sm:grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] sm:gap-3">
<button
type="button"
onClick={handleBackRequest}
aria-label="返回上一页"
disabled={hideBackButton}
className={`h-11 w-11 items-center justify-center rounded-full bg-black/30 backdrop-blur ${
className={`puzzle-runtime-icon-button h-10 w-10 items-center justify-center rounded-full sm:h-11 sm:w-11 ${
hideBackButton ? 'invisible pointer-events-none' : 'inline-flex'
}`}
>
<ArrowLeft className="h-4 w-4" />
</button>
<div className="flex min-w-0 flex-col items-center gap-2 rounded-[1.35rem] bg-black/30 px-3 py-3 text-center backdrop-blur sm:px-5">
<div className="line-clamp-1 max-w-full text-sm font-black text-white sm:text-base">
{currentLevel.levelName}
</div>
<div
className={`inline-flex items-center gap-2 rounded-full px-4 py-2 font-mono text-2xl font-black leading-none shadow-[0_10px_28px_rgba(0,0,0,0.24)] sm:text-3xl ${
displayRemainingMs <= 20_000 && runtimeStatus === 'playing'
? 'bg-red-500/24 text-red-100'
: 'bg-white/12 text-white'
}`}
>
<Clock className="h-5 w-5 sm:h-6 sm:w-6" />
{formatTimerMs(displayRemainingMs)}
</div>
<div className="flex min-w-0 max-w-full items-center justify-center gap-2 text-white/82">
<span
className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/16 bg-amber-200 text-xs font-black text-slate-950 shadow-[0_8px_20px_rgba(0,0,0,0.2)]"
aria-hidden="true"
>
{authorAvatarLabel}
</span>
<span className="min-w-0 truncate text-xs font-semibold sm:text-sm">
{currentLevel.authorDisplayName}
</span>
<span className="shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold tracking-[0.12em] text-amber-100/90 sm:text-[11px]">
<div className="puzzle-runtime-header-card mx-auto flex max-w-[min(15rem,calc(100vw_-_6.5rem))] min-w-0 flex-col items-center gap-1.5 rounded-[1.1rem] px-3 py-2 text-center sm:max-w-[18rem] sm:px-4">
<div className="flex max-w-full items-center justify-center gap-1.5">
<span className="puzzle-runtime-level-badge shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold sm:text-[11px]">
{levelLabel}
</span>
<span className="min-w-0 truncate text-sm font-black sm:text-base">
{currentLevel.levelName}
</span>
</div>
<div
className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-mono text-lg font-black leading-none shadow-[0_10px_28px_rgba(0,0,0,0.2)] sm:text-xl ${
displayRemainingMs <= 20_000 && runtimeStatus === 'playing'
? 'puzzle-runtime-timer--urgent'
: 'puzzle-runtime-timer'
}`}
>
<Clock className="h-4 w-4 sm:h-5 sm:w-5" />
{formatTimerMs(displayRemainingMs)}
</div>
</div>
@@ -1146,21 +1139,21 @@ export function PuzzleRuntimeShell({
onClick={() => setIsSettingsPanelOpen(true)}
aria-label="打开拼图设置"
title="打开拼图设置"
className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-black/30 backdrop-blur transition duration-150 hover:-translate-y-px hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-200/60"
className="puzzle-runtime-icon-button inline-flex h-10 w-10 items-center justify-center rounded-full transition duration-150 hover:-translate-y-px hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-button-primary-border)] sm:h-11 sm:w-11"
>
<PixelIcon
src={CHROME_ICONS.settings}
className="h-[1.4rem] w-[1.4rem] drop-shadow-[0_4px_10px_rgba(0,0,0,0.45)]"
className="h-5 w-5 drop-shadow-[0_4px_10px_rgba(0,0,0,0.45)] sm:h-[1.4rem] sm:w-[1.4rem]"
/>
</button>
</div>
</div>
<div className="absolute inset-0 flex items-center justify-center px-1 py-3 pt-28 pb-32 sm:p-4">
<div className="absolute inset-0 flex items-center justify-center px-1 py-3 pt-24 pb-32 sm:px-4 sm:py-4 sm:pt-24 sm:pb-28">
<div
ref={boardRef}
data-testid="puzzle-board"
className="relative grid aspect-square w-full max-w-[min(99vw,calc(100vh_-_16.5rem))] touch-none select-none overflow-hidden rounded-[1.2rem] border border-white/16 bg-white/8 shadow-[0_30px_80px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:max-w-[min(92vw,calc(100vh_-_17rem))] sm:rounded-[1.45rem]"
className="puzzle-runtime-board relative grid aspect-square w-full max-w-[min(99vw,calc(100vh_-_14rem))] touch-none select-none overflow-hidden rounded-[1.2rem] border backdrop-blur-sm sm:max-w-[min(92vw,calc(100vh_-_13rem))] sm:rounded-[1.45rem]"
style={{
gridTemplateColumns: `repeat(${board.cols}, minmax(0, 1fr))`,
gridTemplateRows: `repeat(${board.rows}, minmax(0, 1fr))`,
@@ -1216,14 +1209,14 @@ export function PuzzleRuntimeShell({
pieceElementRefMap.current.delete(piece.pieceId);
}}
data-piece-id={piece?.pieceId ?? undefined}
className={`relative flex h-full items-center justify-center overflow-hidden rounded-[0.85rem] border-2 border-white/22 text-sm font-black transition ${
className={`puzzle-runtime-piece relative flex h-full items-center justify-center overflow-hidden rounded-[0.85rem] border-2 text-sm font-black transition ${
occupied
? isSelected
? 'border-amber-200 bg-amber-400/84 text-slate-950 shadow-[0_12px_30px_rgba(251,191,36,0.22)]'
? 'puzzle-runtime-piece--selected'
: isMerged
? 'border-transparent bg-transparent text-white'
: 'bg-white/12 text-white'
: 'border-white/8 bg-black/18 text-white/20'
? 'puzzle-runtime-piece--merged'
: 'puzzle-runtime-piece--filled'
: 'puzzle-runtime-piece--empty'
} ${
isMerged
? 'transition-colors'
@@ -1282,7 +1275,7 @@ export function PuzzleRuntimeShell({
) : (
<div className="absolute inset-0 bg-[linear-gradient(145deg,rgba(251,191,36,0.4),rgba(76,29,19,0.72))]" />
)}
<div className="absolute inset-0 bg-black/10" />
<div className="puzzle-runtime-piece-overlay absolute inset-0" />
</div>
) : (
''
@@ -1467,12 +1460,12 @@ export function PuzzleRuntimeShell({
<div className="absolute bottom-0 left-0 z-20 flex w-full flex-col items-center gap-2 px-3 py-3 sm:px-4 sm:py-4">
{error ? (
<div className="rounded-full bg-red-500/20 px-3 py-1 text-xs text-red-100">
<div className="puzzle-runtime-error-chip rounded-full px-3 py-1 text-xs">
{error}
</div>
) : null}
{selectedPieceId && runtimeStatus === 'playing' ? (
<div className="rounded-full bg-black/28 px-3 py-1 text-xs text-white/72 backdrop-blur">
<div className="puzzle-runtime-status-chip rounded-full px-3 py-1 text-xs">
已选择
</div>
) : null}
@@ -1491,21 +1484,21 @@ export function PuzzleRuntimeShell({
levelId: run.nextLevelId ?? null,
});
}}
className="inline-flex min-h-11 items-center gap-2 rounded-full bg-amber-200 px-5 py-2.5 text-sm font-bold text-slate-950 shadow-[0_14px_36px_rgba(251,191,36,0.26)] transition hover:bg-amber-100 disabled:opacity-45"
className="puzzle-runtime-primary-button inline-flex min-h-11 items-center gap-2 rounded-full px-5 py-2.5 text-sm font-bold transition hover:brightness-105 disabled:opacity-45"
>
{hasSimilarWorkChoices ? '换个作品' : '下一关'}
<ArrowRight className="h-4 w-4" />
</button>
) : null}
<div className="flex items-center justify-center gap-2 rounded-full bg-black/36 p-2 backdrop-blur sm:gap-3">
<div className="puzzle-runtime-toolbar flex items-center justify-center gap-2 rounded-full p-2 sm:gap-3">
<button
type="button"
disabled={isInteractionLocked}
onClick={() => openPropDialog('hint', '使用提示')}
className="inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black text-white/88 transition hover:bg-white/10 disabled:opacity-45"
className="puzzle-runtime-tool-button inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition disabled:opacity-45"
>
<Lightbulb className="h-6 w-6 text-amber-100" />
<Lightbulb className="puzzle-runtime-tool-button__warm h-6 w-6" />
提示
</button>
<button
@@ -1519,10 +1512,10 @@ export function PuzzleRuntimeShell({
}
openPropDialog('reference', '查看原图');
}}
className={`inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition hover:bg-white/10 disabled:opacity-45 ${
className={`inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition disabled:opacity-45 ${
isOriginalOverlayVisible
? 'bg-sky-200 text-slate-950'
: 'text-white/86'
? 'puzzle-runtime-tool-button--active'
: 'puzzle-runtime-tool-button'
}`}
>
<Eye className="h-6 w-6" />
@@ -1532,9 +1525,9 @@ export function PuzzleRuntimeShell({
type="button"
disabled={isInteractionLocked}
onClick={() => openPropDialog('freezeTime', '冻结时间')}
className="inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black text-white/88 transition hover:bg-white/10 disabled:opacity-45"
className="puzzle-runtime-tool-button inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition disabled:opacity-45"
>
<Snowflake className="h-6 w-6 text-cyan-100" />
<Snowflake className="puzzle-runtime-tool-button__cool h-6 w-6" />
冻结
</button>
</div>
@@ -1565,7 +1558,7 @@ export function PuzzleRuntimeShell({
{propDialog ? (
<div
className="absolute inset-0 z-50 flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm"
className="puzzle-runtime-modal-overlay absolute inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
onClick={() => {
if (!isPropConfirming) {
setPropDialog(null);
@@ -1576,35 +1569,35 @@ export function PuzzleRuntimeShell({
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-prop-confirm-title"
className="pixel-nine-slice pixel-modal-shell w-full max-w-[22rem] overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
className="puzzle-runtime-dialog pixel-nine-slice pixel-modal-shell w-full max-w-[22rem] overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
style={getNineSliceStyle(UI_CHROME.modalPanel)}
onClick={(event) => event.stopPropagation()}
>
<header className="flex items-center gap-3 border-b border-white/10 px-5 py-4">
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200 text-slate-950">
<header className="puzzle-runtime-dialog__line flex items-center gap-3 border-b px-5 py-4">
<span className="puzzle-runtime-primary-button inline-flex h-9 w-9 items-center justify-center rounded-full">
<Sparkles className="h-4 w-4" />
</span>
<h2
id="puzzle-prop-confirm-title"
className="text-sm font-black text-white"
className="text-sm font-black"
>
{propDialog.title}
</h2>
</header>
<div className="px-5 py-4 text-sm text-white/72">
<div className="puzzle-runtime-dialog__body px-5 py-4 text-sm">
消耗 1 光点
{propConfirmError ? (
<div className="mt-3 rounded-[0.9rem] border border-red-300/20 bg-red-500/12 px-3 py-2 text-xs leading-5 text-red-100">
<div className="puzzle-runtime-error-chip mt-3 rounded-[0.9rem] border px-3 py-2 text-xs leading-5">
{propConfirmError}
</div>
) : null}
</div>
<footer className="flex items-center justify-end gap-3 border-t border-white/10 px-5 py-4">
<footer className="puzzle-runtime-dialog__line flex items-center justify-end gap-3 border-t px-5 py-4">
<button
type="button"
onClick={() => setPropDialog(null)}
disabled={isPropConfirming}
className="rounded-full border border-white/12 bg-black/20 px-4 py-2 text-xs font-bold text-zinc-200 transition hover:text-white"
className="puzzle-runtime-secondary-button rounded-full px-4 py-2 text-xs font-bold transition hover:brightness-105"
>
取消
</button>
@@ -1614,7 +1607,7 @@ export function PuzzleRuntimeShell({
onClick={() => {
void handleConfirmProp();
}}
className="inline-flex items-center gap-2 rounded-full bg-amber-200 px-5 py-2 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:opacity-60"
className="puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2 text-sm font-black transition hover:brightness-105 disabled:opacity-60"
>
{isPropConfirming ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -1628,51 +1621,53 @@ export function PuzzleRuntimeShell({
{isSettingsPanelOpen ? (
<div
className="absolute inset-0 z-50 flex items-center justify-center bg-black/72 p-3 backdrop-blur-sm sm:p-4"
className="puzzle-runtime-modal-overlay absolute inset-0 z-50 flex items-center justify-center p-3 backdrop-blur-sm sm:p-4"
onClick={() => setIsSettingsPanelOpen(false)}
>
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-settings-title"
className="pixel-nine-slice pixel-modal-shell flex max-h-[min(88vh,36rem)] w-full max-w-md flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
className="puzzle-runtime-dialog pixel-nine-slice pixel-modal-shell flex max-h-[min(88vh,36rem)] w-full max-w-md flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
style={getNineSliceStyle(UI_CHROME.modalPanel)}
onClick={(event) => event.stopPropagation()}
>
<header className="relative border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
<header className="puzzle-runtime-dialog__line relative border-b px-4 py-3 sm:px-5 sm:py-4">
<div className="min-w-0 pr-10">
<h2
id="puzzle-settings-title"
className="text-sm font-semibold text-white"
className="text-sm font-semibold"
>
拼图设置
</h2>
<div className="mt-1 text-[11px] text-zinc-500">
调整音乐音量，查看本局进度，或返回上一页。
<div className="puzzle-runtime-dialog__soft mt-1 text-[11px]">
{hideExitControls
? '调整音乐音量，查看本局进度。'
: '调整音乐音量，查看本局进度，或返回上一页。'}
</div>
</div>
<button
type="button"
aria-label="关闭拼图设置"
onClick={() => setIsSettingsPanelOpen(false)}
className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
className="puzzle-runtime-dialog__soft absolute right-4 top-3 p-1 transition-colors hover:brightness-75 sm:right-5 sm:top-4"
>
<PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
</button>
</header>
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
<div className="rounded-2xl border border-white/10 bg-[radial-gradient(circle_at_top,rgba(56,189,248,0.14),transparent_65%),rgba(0,0,0,0.24)] p-4">
<div className="puzzle-runtime-settings-card rounded-2xl p-4">
<div className="flex items-start justify-between gap-3">
<div>
<div className="text-[10px] tracking-[0.24em] text-sky-200/80">
<div className="puzzle-runtime-tool-button__cool text-[10px] tracking-[0.24em]">
音频
</div>
<div className="mt-2 text-sm font-semibold text-white">
<div className="mt-2 text-sm font-semibold">
音乐音量
</div>
</div>
<div className="rounded-full border border-white/10 bg-black/28 px-2 py-1 text-xs text-white/80">
<div className="puzzle-runtime-pill rounded-full px-2 py-1 text-xs">
{Math.round(musicVolume * 100)}%
</div>
</div>
@@ -1690,37 +1685,37 @@ export function PuzzleRuntimeShell({
Number(event.currentTarget.value) / 100,
)
}
className="h-2 w-full cursor-pointer accent-sky-400"
className="h-2 w-full cursor-pointer accent-[var(--puzzle-runtime-accent-text)]"
/>
</div>
</div>
<div className="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
<div className="text-[10px] uppercase tracking-[0.18em] text-zinc-500">
<div className="puzzle-runtime-settings-card rounded-2xl px-4 py-3">
<div className="puzzle-runtime-dialog__soft text-[10px] uppercase tracking-[0.18em]">
本局进度
</div>
<div className="mt-3 space-y-2 text-sm text-white/82">
<div className="puzzle-runtime-dialog__body mt-3 space-y-2 text-sm">
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">关卡</span>
<span className="font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">关卡</span>
<span className="font-semibold">
{levelLabel}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">已完成关卡</span>
<span className="font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">已完成关卡</span>
<span className="font-semibold">
{run.clearedLevelCount}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">当前状态</span>
<span className="font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">当前状态</span>
<span className="font-semibold">
{statusLabel}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">当前用时</span>
<span className="font-mono font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">当前用时</span>
<span className="font-mono font-semibold">
{formatElapsedMs(currentLevel.elapsedMs)}
</span>
</div>
@@ -1728,50 +1723,52 @@ export function PuzzleRuntimeShell({
</div>
</div>
<footer className="flex items-center justify-end gap-3 border-t border-white/10 px-4 py-3 sm:px-5">
<footer className="puzzle-runtime-dialog__line flex items-center justify-end gap-3 border-t px-4 py-3 sm:px-5">
<button
type="button"
onClick={() => setIsSettingsPanelOpen(false)}
className="rounded-full border border-white/12 bg-black/20 px-3 py-1.5 text-[11px] text-zinc-200 transition hover:text-white"
className="puzzle-runtime-secondary-button rounded-full px-3 py-1.5 text-[11px] transition hover:brightness-105"
>
继续拼图
</button>
<button
type="button"
onClick={() => {
setIsSettingsPanelOpen(false);
onBack();
}}
className={`rounded-full bg-amber-200 px-4 py-2 text-sm font-bold text-slate-950 transition hover:bg-amber-100 ${
hideBackButton ? 'hidden' : ''
}`}
>
返回上一页
</button>
{!hideExitControls ? (
<button
type="button"
onClick={() => {
setIsSettingsPanelOpen(false);
onBack();
}}
className={`puzzle-runtime-primary-button rounded-full px-4 py-2 text-sm font-bold transition hover:brightness-105 ${
hideBackButton ? 'hidden' : ''
}`}
>
返回上一页
</button>
) : null}
</footer>
</section>
</div>
) : null}
{isExitRemodelPromptOpen ? (
{isExitRemodelPromptOpen && !hideExitControls ? (
<div
className="absolute inset-0 z-50 flex items-center justify-center bg-slate-950/76 px-4 py-6 backdrop-blur-md"
className="puzzle-runtime-modal-overlay absolute inset-0 z-50 flex items-center justify-center px-4 py-6 backdrop-blur-md"
>
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-exit-remodel-title"
className="relative flex w-full max-w-[21rem] flex-col overflow-hidden rounded-[1.35rem] border border-amber-200/24 bg-[linear-gradient(180deg,rgba(30,41,59,0.98),rgba(2,6,23,0.98))] shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
className="puzzle-runtime-dialog relative flex w-full max-w-[21rem] flex-col overflow-hidden rounded-[1.35rem] shadow-[0_28px_90px_rgba(0,0,0,0.28)]"
onClick={(event) => event.stopPropagation()}
>
<div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-amber-200/70 to-transparent" />
<div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-[var(--puzzle-runtime-accent-text)] to-transparent" />
<header className="flex flex-col items-center px-6 pt-7 text-center">
<div className="mb-4 grid h-14 w-14 place-items-center rounded-2xl border border-amber-200/28 bg-amber-200/12 shadow-[0_16px_42px_rgba(251,191,36,0.18)]">
<Sparkles className="h-7 w-7 text-amber-200" />
<div className="puzzle-runtime-stat-card mb-4 grid h-14 w-14 place-items-center rounded-2xl">
<Sparkles className="puzzle-runtime-tool-button__warm h-7 w-7" />
</div>
<h2
id="puzzle-exit-remodel-title"
className="text-[1.75rem] font-black leading-[1.08] text-white"
className="text-[1.75rem] font-black leading-[1.08]"
>
体验不佳？
<br />
@@ -1786,7 +1783,7 @@ export function PuzzleRuntimeShell({
setIsExitRemodelPromptOpen(false);
void onRemodelWork?.(exitPromptProfileId);
}}
className="min-h-[3.25rem] rounded-2xl bg-amber-200 px-5 text-sm font-black text-slate-950 shadow-[0_14px_34px_rgba(251,191,36,0.24)] transition hover:bg-amber-100 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50"
className="puzzle-runtime-primary-button min-h-[3.25rem] rounded-2xl px-5 text-sm font-black transition hover:brightness-105 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50"
>
作品改造
</button>
@@ -1796,7 +1793,7 @@ export function PuzzleRuntimeShell({
setIsExitRemodelPromptOpen(false);
onBack();
}}
className="min-h-[3rem] rounded-2xl border border-white/14 bg-white/8 px-5 text-sm font-bold text-white/92 transition hover:bg-white/12 active:translate-y-px"
className="puzzle-runtime-secondary-button min-h-[3rem] rounded-2xl px-5 text-sm font-bold transition hover:brightness-105 active:translate-y-px"
>
保存并退出
</button>
@@ -1806,32 +1803,32 @@ export function PuzzleRuntimeShell({
) : null}
{runtimeStatus === 'failed' ? (
<div className="absolute inset-0 z-40 flex items-center justify-center bg-slate-950/68 px-4 py-6 backdrop-blur-sm">
<div className="puzzle-runtime-modal-overlay absolute inset-0 z-40 flex items-center justify-center px-4 py-6 backdrop-blur-sm">
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-failed-title"
className="flex w-full max-w-[24rem] flex-col overflow-hidden rounded-[1.5rem] border border-white/14 bg-slate-950/94 shadow-[0_28px_90px_rgba(0,0,0,0.5)]"
className="puzzle-runtime-dialog flex w-full max-w-[24rem] flex-col overflow-hidden rounded-[1.5rem] shadow-[0_28px_90px_rgba(0,0,0,0.28)]"
>
<header className="border-b border-white/10 px-5 py-4">
<header className="puzzle-runtime-dialog__line border-b px-5 py-4">
<h2
id="puzzle-failed-title"
className="text-lg font-black text-white"
className="text-lg font-black"
>
关卡失败
</h2>
<div className="mt-1 text-xs text-white/62">
<div className="puzzle-runtime-dialog__soft mt-1 text-xs">
{currentLevel.levelName}
</div>
</header>
<footer className="grid grid-cols-2 gap-3 border-t border-white/10 px-5 py-4">
<footer className="puzzle-runtime-dialog__line grid grid-cols-2 gap-3 border-t px-5 py-4">
<button
type="button"
disabled={isBusy}
onClick={() => {
void onRestartLevel?.();
}}
className="rounded-full border border-white/14 bg-black/24 px-4 py-2.5 text-sm font-black text-white transition hover:bg-white/10 disabled:opacity-50"
className="puzzle-runtime-secondary-button rounded-full px-4 py-2.5 text-sm font-black transition hover:brightness-105 disabled:opacity-50"
>
重新开始
</button>
@@ -1839,7 +1836,7 @@ export function PuzzleRuntimeShell({
type="button"
disabled={isBusy}
onClick={() => openPropDialog('extendTime', '继续1分钟')}
className="rounded-full bg-amber-200 px-4 py-2.5 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:opacity-50"
className="puzzle-runtime-primary-button rounded-full px-4 py-2.5 text-sm font-black transition hover:brightness-105 disabled:opacity-50"
>
继续1分钟
</button>
@@ -1849,32 +1846,32 @@ export function PuzzleRuntimeShell({
) : null}
{isClearResultOpen ? (
<div className="absolute inset-0 z-40 flex items-center justify-center bg-slate-950/68 px-4 py-6 backdrop-blur-sm">
<div className="puzzle-runtime-modal-overlay absolute inset-0 z-40 flex items-center justify-center px-4 py-6 backdrop-blur-sm">
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-clear-result-title"
className="flex max-h-[min(92vh,42rem)] w-full max-w-[28rem] flex-col overflow-hidden rounded-[1.5rem] border border-white/14 bg-slate-950/94 shadow-[0_28px_90px_rgba(0,0,0,0.5)]"
className="puzzle-runtime-dialog flex max-h-[min(92vh,42rem)] w-full max-w-[28rem] flex-col overflow-hidden rounded-[1.5rem] shadow-[0_28px_90px_rgba(0,0,0,0.28)]"
>
<header className="flex items-start justify-between gap-3 border-b border-white/10 px-5 py-4">
<header className="puzzle-runtime-dialog__line flex items-start justify-between gap-3 border-b px-5 py-4">
<div className="min-w-0">
<div className="mb-2 inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200 text-slate-950">
<div className="puzzle-runtime-primary-button mb-2 inline-flex h-9 w-9 items-center justify-center rounded-full">
<Trophy className="h-4 w-4" />
</div>
<h2
id="puzzle-clear-result-title"
className="truncate text-lg font-black text-white"
className="truncate text-lg font-black"
>
通关完成
</h2>
<div className="mt-1 line-clamp-1 text-xs text-white/62">
<div className="puzzle-runtime-dialog__soft mt-1 line-clamp-1 text-xs">
{currentLevel.levelName}
</div>
</div>
<button
type="button"
aria-label="关闭通关弹窗"
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/8 text-white/72 transition hover:bg-white/14 hover:text-white"
className="puzzle-runtime-secondary-button inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition hover:brightness-105"
onClick={() => {
setDismissedClearKey(clearResultKey);
}}
@@ -1884,26 +1881,26 @@ export function PuzzleRuntimeShell({
</header>
<div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
<div className="flex items-center justify-between gap-4 rounded-[1rem] border border-amber-200/24 bg-amber-200/10 px-4 py-3">
<div className="puzzle-runtime-stat-card flex items-center justify-between gap-4 rounded-[1rem] px-4 py-3">
<div className="flex items-center gap-3">
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/24 text-amber-100">
<span className="puzzle-runtime-pill inline-flex h-9 w-9 items-center justify-center rounded-full">
<Clock className="h-4 w-4" />
</span>
<span className="text-sm font-semibold text-white/72">
<span className="puzzle-runtime-dialog__soft text-sm font-semibold">
通关时间
</span>
</div>
<span className="font-mono text-xl font-black text-amber-100">
<span className="puzzle-runtime-tool-button__warm font-mono text-xl font-black">
{formatElapsedMs(currentLevel.elapsedMs)}
</span>
</div>
<div className="mt-4">
<div className="mb-2 text-sm font-bold text-white">
<div className="mb-2 text-sm font-bold">
排行榜
</div>
<div className="overflow-hidden rounded-[1rem] border border-white/10">
<div className="grid grid-cols-[3.5rem_minmax(0,1fr)_6rem] bg-white/6 px-3 py-2 text-[11px] font-bold text-white/48">
<div className="puzzle-runtime-dialog__line overflow-hidden rounded-[1rem] border">
<div className="puzzle-runtime-leaderboard-head grid grid-cols-[3.5rem_minmax(0,1fr)_6rem] px-3 py-2 text-[11px] font-bold">
<span>名次</span>
<span>昵称</span>
<span className="text-right">通关时间</span>
@@ -1915,8 +1912,8 @@ export function PuzzleRuntimeShell({
key={`${entry.rank}:${entry.nickname}:${entry.elapsedMs}`}
className={`grid grid-cols-[3.5rem_minmax(0,1fr)_6rem] items-center px-3 py-2.5 text-sm ${
entry.isCurrentPlayer
? 'bg-amber-200/14 text-amber-50'
: 'border-t border-white/8 text-white/78'
? 'puzzle-runtime-leaderboard-row--active'
: 'puzzle-runtime-leaderboard-row border-t'
}`}
>
<span className="font-mono font-black">
@@ -1931,7 +1928,7 @@ export function PuzzleRuntimeShell({
</div>
))
) : (
<div className="flex min-h-24 items-center justify-center px-4 py-5 text-sm text-white/56">
<div className="puzzle-runtime-dialog__soft flex min-h-24 items-center justify-center px-4 py-5 text-sm">
{isBusy
? '正在同步真实排行榜…'
: '暂无真实排行榜成绩'}
@@ -1960,7 +1957,7 @@ export function PuzzleRuntimeShell({
</div>
{canAdvanceDefaultNextLevel ? (
<footer className="flex items-center justify-end border-t border-white/10 px-5 py-4">
<footer className="puzzle-runtime-dialog__line flex items-center justify-end border-t px-5 py-4">
<button
type="button"
disabled={isBusy}
@@ -1970,7 +1967,7 @@ export function PuzzleRuntimeShell({
levelId: run.nextLevelId ?? null,
});
}}
className="inline-flex items-center gap-2 rounded-full bg-amber-200 px-5 py-2.5 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-45"
className="puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-black transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-45"
>
{isBusy ? (
<Loader2 className="h-4 w-4 animate-spin" />
@@ -2003,9 +2000,9 @@ function PuzzleNextWorkCard({
type="button"
disabled={disabled}
onClick={onClick}
className="group grid min-h-[5.75rem] grid-cols-[4.5rem_minmax(0,1fr)] overflow-hidden rounded-[1rem] border border-white/10 bg-white/6 text-left transition hover:border-amber-200/40 hover:bg-amber-200/10 disabled:cursor-not-allowed disabled:opacity-45 sm:grid-cols-1"
className="puzzle-runtime-next-card group grid min-h-[5.75rem] grid-cols-[4.5rem_minmax(0,1fr)] overflow-hidden rounded-[1rem] text-left transition disabled:cursor-not-allowed disabled:opacity-45 sm:grid-cols-1"
>
<div className="relative min-h-full bg-white/8 sm:aspect-[1.35]">
<div className="puzzle-runtime-next-card__media relative min-h-full sm:aspect-[1.35]">
{item.coverImageSrc ? (
<ResolvedAssetImage
src={item.coverImageSrc}
@@ -2015,20 +2012,20 @@ function PuzzleNextWorkCard({
) : (
<div className="h-full w-full bg-[linear-gradient(145deg,rgba(20,184,166,0.34),rgba(15,23,42,0.88))]" />
)}
<div className="absolute inset-0 bg-black/10 transition group-hover:bg-black/0" />
<div className="puzzle-runtime-piece-overlay absolute inset-0 transition group-hover:opacity-0" />
</div>
<div className="min-w-0 px-3 py-2.5">
<div className="truncate text-sm font-black text-white">
<div className="truncate text-sm font-black">
{item.levelName}
</div>
<div className="mt-1 truncate text-xs font-semibold text-white/58">
<div className="puzzle-runtime-dialog__soft mt-1 truncate text-xs font-semibold">
{item.authorDisplayName}
</div>
<div className="mt-2 flex flex-wrap gap-1">
{item.themeTags.slice(0, 2).map((tag) => (
<span
key={tag}
className="max-w-full truncate rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/64"
className="puzzle-runtime-next-card__tag max-w-full truncate rounded-full px-2 py-0.5 text-[10px] font-bold"
>
{tag}
</span>

115
src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
View File

@@ -1,6 +1,13 @@
/* @vitest-environment jsdom */
import { act, render, screen, waitFor, within } from '@testing-library/react';
import {
act,
fireEvent,
render,
screen,
waitFor,
within,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';
import { afterEach, expect, test, vi } from 'vitest';
@@ -302,6 +309,17 @@ vi.mock('../ResolvedAssetImage', () => ({
const originalMatchMedia = window.matchMedia;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const originalCancelAnimationFrame = window.cancelAnimationFrame;
function dispatchClientYPointerEvent(
target: HTMLElement,
type: string,
clientY: number,
) {
const event = new Event(type, { bubbles: true, cancelable: true });
Object.assign(event, { clientY });
target.dispatchEvent(event);
}
const puzzlePublicEntry = {
sourceType: 'puzzle',
workId: 'puzzle-work-public-1',
@@ -512,7 +530,8 @@ function renderLoggedOutHomeView(
| 'activeRecommendEntryKey'
| 'isStartingRecommendEntry'
| 'recommendRuntimeError'
| 'onSelectRecommendEntry'
| 'onSelectNextRecommendEntry'
| 'onSelectPreviousRecommendEntry'
>
> = {},
) {
@@ -566,7 +585,8 @@ function renderLoggedOutHomeView(
activeRecommendEntryKey={overrides.activeRecommendEntryKey}
isStartingRecommendEntry={overrides.isStartingRecommendEntry}
recommendRuntimeError={overrides.recommendRuntimeError}
onSelectRecommendEntry={overrides.onSelectRecommendEntry}
onSelectNextRecommendEntry={overrides.onSelectNextRecommendEntry}
onSelectPreviousRecommendEntry={overrides.onSelectPreviousRecommendEntry}
onOpenLibraryDetail={vi.fn()}
onSearchPublicCode={overrides.onSearchPublicCode ?? vi.fn()}
/>
@@ -960,7 +980,7 @@ test('shows a reachable login entry in logged out mobile shell', async () => {
expect(openLoginModal).toHaveBeenCalledTimes(1);
});
test('logged out bottom nav keeps creation centered with recommend icon', () => {
test('logged out bottom nav turns active recommend tab into next action', () => {
const { container } = renderLoggedOutHomeView(vi.fn());
const nav = container.querySelector('.platform-bottom-nav');
@@ -968,11 +988,11 @@ test('logged out bottom nav keeps creation centered with recommend icon', () =>
const buttons = within(nav as HTMLElement).getAllByRole('button');
expect(buttons.map((button) => button.textContent)).toEqual([
'推荐',
'下一个',
'创作',
'发现',
]);
expect(buttons[0]?.querySelector('.lucide-gamepad-2')).toBeTruthy();
expect(buttons[0]?.querySelector('.lucide-chevron-down')).toBeTruthy();
expect(buttons[1]?.querySelector('.lucide-sparkles')).toBeTruthy();
expect(buttons[2]?.querySelector('.lucide-compass')).toBeTruthy();
});
@@ -1091,16 +1111,18 @@ test('public gallery cards hide work code until detail is opened', async () => {
expect(onOpenGalleryDetail).toHaveBeenCalledWith(puzzlePublicEntry);
});
test('mobile recommend page renders runtime viewport and bottom switcher', () => {
const onSelectRecommendEntry = vi.fn();
test('mobile recommend page renders runtime viewport without bottom work cards', () => {
const onOpenGalleryDetail = vi.fn();
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectRecommendEntry,
onOpenGalleryDetail,
});
expect(screen.getByTestId('recommend-runtime')).toBeTruthy();
const runtimePanel = document.querySelector('.platform-recommend-runtime-panel');
expect(runtimePanel).toBeTruthy();
expect(runtimePanel?.className).not.toContain('bg-black');
expect(screen.queryByText('一张用于公开分享的拼图作品。')).toBeNull();
expect(
document.querySelector('.platform-public-work-card__cover'),
@@ -1109,33 +1131,66 @@ test('mobile recommend page renders runtime viewport and bottom switcher', () =>
expect(screen.getAllByText('奇幻拼图').length).toBeGreaterThan(0);
expect(screen.getAllByText('20').length).toBeGreaterThan(0);
expect(screen.getAllByText('12').length).toBeGreaterThan(0);
const switchButton = screen.getByRole('button', {
name: '切换到 奇幻拼图',
});
expect(switchButton.getAttribute('aria-pressed')).toBe('true');
expect(screen.queryByRole('button', { name: '切换到 奇幻拼图' })).toBeNull();
expect(
screen.queryByRole('button', { name: '查看 奇幻拼图 详情' }),
).toBeNull();
expect(
screen.queryByRole('button', { name: '打开 奇幻拼图 详情' }),
).toBeNull();
expect(document.querySelector('.platform-recommend-switcher')).toBeNull();
fireEvent.click(screen.getByLabelText('奇幻拼图 作品信息'));
expect(onOpenGalleryDetail).not.toHaveBeenCalled();
});
test('mobile recommend switcher selects a different public work', async () => {
const user = userEvent.setup();
const onSelectRecommendEntry = vi.fn();
const secondEntry = {
...puzzlePublicEntry,
workId: 'puzzle-work-second',
profileId: 'puzzle-profile-second',
publicWorkCode: 'PZ-SECOND',
worldName: '第二拼图',
} satisfies PlatformPublicGalleryCard;
test('mobile recommend loading state is themed instead of hardcoded black', () => {
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry, secondEntry],
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectRecommendEntry,
isStartingRecommendEntry: true,
recommendRuntimeContent: null,
});
await user.click(screen.getByRole('button', { name: '切换到 第二拼图' }));
const loadingState = screen.getByText('加载中...');
expect(loadingState.className).toContain('platform-recommend-runtime-state');
expect(loadingState.className).not.toContain('bg-black');
});
expect(onSelectRecommendEntry).toHaveBeenCalledWith(secondEntry);
test('mobile recommend meta swipes between public works', () => {
const onSelectNextRecommendEntry = vi.fn();
const onSelectPreviousRecommendEntry = vi.fn();
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectNextRecommendEntry,
onSelectPreviousRecommendEntry,
});
const meta = screen.getByLabelText('奇幻拼图 作品信息');
dispatchClientYPointerEvent(meta, 'pointerdown', 240);
dispatchClientYPointerEvent(meta, 'pointerup', 180);
expect(onSelectNextRecommendEntry).toHaveBeenCalledTimes(1);
expect(onSelectPreviousRecommendEntry).not.toHaveBeenCalled();
dispatchClientYPointerEvent(meta, 'pointerdown', 180);
dispatchClientYPointerEvent(meta, 'pointerup', 240);
expect(onSelectPreviousRecommendEntry).toHaveBeenCalledTimes(1);
});
test('active recommend bottom tab selects next work instead of navigating', async () => {
const user = userEvent.setup();
const onSelectNextRecommendEntry = vi.fn();
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectNextRecommendEntry,
});
await user.click(screen.getByRole('button', { name: '下一个' }));
expect(onSelectNextRecommendEntry).toHaveBeenCalledTimes(1);
});
test('mobile recommend meta loads real author avatar from public user summary', async () => {

165
src/components/rpg-entry/RpgEntryHomeView.tsx
View File

@@ -122,7 +122,8 @@ export interface RpgEntryHomeViewProps {
activeRecommendEntryKey?: string | null;
isStartingRecommendEntry?: boolean;
recommendRuntimeError?: string | null;
onSelectRecommendEntry?: (entry: PlatformPublicGalleryCard) => void;
onSelectNextRecommendEntry?: () => void;
onSelectPreviousRecommendEntry?: () => void;
onOpenLibraryDetail: (
entry: CustomWorldLibraryEntry<CustomWorldProfile>,
) => void;
@@ -149,6 +150,8 @@ const HERO_SURFACE_CLASS =
'platform-surface platform-surface--hero platform-interactive-card min-w-0';
const MOBILE_PAGE_STAGE_CLASS =
'platform-page-stage platform-remap-surface min-w-0 space-y-4 overflow-hidden pb-2';
const MOBILE_RECOMMEND_PAGE_STAGE_CLASS =
'platform-page-stage min-w-0 space-y-4 overflow-hidden pb-2';
const DESKTOP_PAGE_STAGE_CLASS =
'platform-page-stage platform-remap-surface min-w-0 space-y-5 pb-4';
const DESKTOP_LAYOUT_QUERY = '(min-width: 1024px)';
@@ -165,6 +168,7 @@ const AVATAR_ALLOWED_TYPES = new Set(['image/jpeg', 'image/png', 'image/webp']);
const PLATFORM_WORK_COVER_CAROUSEL_INTERVAL_MS = 4200;
const PROFILE_INVITE_REDEEM_ENTRY_VISIBLE_MS = 24 * 60 * 60 * 1000;
const PROFILE_INVITE_QUERY_KEYS = ['inviteCode', 'invite_code'] as const;
const RECOMMEND_ENTRY_SWIPE_THRESHOLD_PX = 36;
type ProfilePopupPanel = 'invite' | 'redeem' | 'community';
type DiscoverChannel = 'recommend' | 'today' | 'category' | 'ranking';
@@ -664,12 +668,15 @@ function CreationLibraryCard({
function RecommendRuntimeMeta({
entry,
authorAvatarUrl,
onOpenDetail,
onSelectNext,
onSelectPrevious,
}: {
entry: PlatformPublicGalleryCard;
authorAvatarUrl?: string | null;
onOpenDetail: () => void;
onSelectNext?: () => void;
onSelectPrevious?: () => void;
}) {
const swipeStartYRef = useRef<number | null>(null);
const playCount = getPlatformWorldPlayCount(entry);
const remixCount = getPlatformWorldRemixCount(entry);
const likeCount = getPlatformWorldLikeCount(entry);
@@ -682,11 +689,37 @@ function RecommendRuntimeMeta({
{ label: '点赞', value: likeCount, icon: Heart },
{ label: '改造', value: remixCount, icon: MessageCircle },
];
const handlePointerEnd = (clientY: number) => {
const startY = swipeStartYRef.current;
swipeStartYRef.current = null;
if (startY === null) {
return;
}
const deltaY = clientY - startY;
if (Math.abs(deltaY) < RECOMMEND_ENTRY_SWIPE_THRESHOLD_PX) {
return;
}
if (deltaY < 0) {
onSelectNext?.();
return;
}
onSelectPrevious?.();
};
return (
<section
className="platform-recommend-work-meta"
aria-label={`${entry.worldName} 作品信息`}
onPointerDown={(event) => {
swipeStartYRef.current = event.clientY;
}}
onPointerUp={(event) => handlePointerEnd(event.clientY)}
onPointerCancel={() => {
swipeStartYRef.current = null;
}}
>
<div className="platform-recommend-work-meta__stats">
{statItems.map(({ label, value, icon: Icon }) => (
@@ -702,11 +735,8 @@ function RecommendRuntimeMeta({
</div>
<div className="platform-recommend-work-meta__row">
<button
type="button"
onClick={onOpenDetail}
<div
className="platform-recommend-work-meta__identity"
aria-label={`打开 ${entry.worldName} 详情`}
>
<span
className="platform-recommend-work-meta__avatar"
@@ -730,62 +760,12 @@ function RecommendRuntimeMeta({
{displayName}
</span>
</span>
</button>
<button
type="button"
onClick={onOpenDetail}
className="platform-recommend-work-meta__detail-button"
aria-label={`查看 ${entry.worldName} 详情`}
title="详情"
>
<ArrowRight className="h-4 w-4" />
</button>
</div>
</div>
</section>
);
}
function RecommendWorkSwitchItem({
entry,
active,
onSelect,
}: {
entry: PlatformPublicGalleryCard;
active: boolean;
onSelect: () => void;
}) {
const displayName = formatPlatformWorkDisplayName(entry.worldName);
const typeLabel = describePublicGalleryCardKind(entry);
const playCount = getPlatformWorldPlayCount(entry);
const likeCount = getPlatformWorldLikeCount(entry);
return (
<button
type="button"
onClick={onSelect}
aria-label={`切换到 ${entry.worldName}`}
aria-pressed={active}
className={`platform-recommend-switch-card ${active ? 'platform-recommend-switch-card--active' : ''}`}
>
<span className="platform-recommend-switch-card__kind">{typeLabel}</span>
<span className="platform-recommend-switch-card__title">
{displayName}
</span>
<span className="platform-recommend-switch-card__stats">
<span>
<Gamepad2 className="h-3 w-3" aria-hidden="true" />
{formatCompactCount(playCount)}
</span>
<span>
<Heart className="h-3 w-3" aria-hidden="true" />
{formatCompactCount(likeCount)}
</span>
</span>
</button>
);
}
function SaveArchiveCard({
entry,
onClick,
@@ -2861,7 +2841,8 @@ export function RpgEntryHomeView({
activeRecommendEntryKey = null,
isStartingRecommendEntry = false,
recommendRuntimeError = null,
onSelectRecommendEntry,
onSelectNextRecommendEntry,
onSelectPreviousRecommendEntry,
onOpenLibraryDetail,
onDeleteLibraryEntry,
deletingLibraryEntryId = null,
@@ -3722,6 +3703,12 @@ export function RpgEntryHomeView({
) ??
recommendedFeedEntries[0] ??
null;
const selectNextRecommendEntry = useCallback(() => {
onSelectNextRecommendEntry?.();
}, [onSelectNextRecommendEntry]);
const selectPreviousRecommendEntry = useCallback(() => {
onSelectPreviousRecommendEntry?.();
}, [onSelectPreviousRecommendEntry]);
const leadPublicEntry = featuredShelf[0] ?? latestEntries[0] ?? null;
const openLeadPublicEntry = () => {
if (leadPublicEntry) {
@@ -3785,7 +3772,7 @@ export function RpgEntryHomeView({
const mobileRecommendContent: ReactNode = (
<div
className={`${MOBILE_PAGE_STAGE_CLASS} platform-mobile-home-stage platform-mobile-recommend-stage`}
className={`${MOBILE_RECOMMEND_PAGE_STAGE_CLASS} platform-mobile-home-stage platform-mobile-recommend-stage`}
>
{platformError ? (
<div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
@@ -3823,42 +3810,9 @@ export function RpgEntryHomeView({
<RecommendRuntimeMeta
entry={activeRecommendEntry}
authorAvatarUrl={getPublicEntryAuthorAvatarUrl(activeRecommendEntry)}
onOpenDetail={() => onOpenGalleryDetail(activeRecommendEntry)}
onSelectNext={selectNextRecommendEntry}
onSelectPrevious={selectPreviousRecommendEntry}
/>
) : null}
{recommendedFeedEntries.length > 0 ? (
<section
className="platform-recommend-switcher"
aria-label="推荐作品"
>
{recommendedFeedEntries.map((entry) => {
const cardKey = buildPublicGalleryCardKey(entry);
const active =
activeRecommendEntryKey === cardKey ||
Boolean(
!activeRecommendEntryKey &&
activeRecommendEntry &&
buildPublicGalleryCardKey(activeRecommendEntry) === cardKey,
);
return (
<RecommendWorkSwitchItem
key={`${cardKey}:recommend-switch`}
entry={entry}
active={active}
onSelect={() => {
if (onSelectRecommendEntry) {
onSelectRecommendEntry(entry);
return;
}
onOpenGalleryDetail(entry);
}}
/>
);
})}
</section>
) : !isLoadingPlatform ? (
<EmptyShelf text="公开广场暂时还没有可展示的作品。" />
) : null}
@@ -4706,10 +4660,25 @@ export function RpgEntryHomeView({
<PlatformTabButton
key={tab}
active={activeTab === tab}
label={tabLabels[tab]}
icon={tabIcons[tab]}
label={
activeTab === 'home' && tab === 'home'
? '下一个'
: tabLabels[tab]
}
icon={
activeTab === 'home' && tab === 'home'
? ChevronDown
: tabIcons[tab]
}
emphasized={tab === 'create'}
onClick={() => onTabChange(tab)}
onClick={() => {
if (activeTab === 'home' && tab === 'home') {
selectNextRecommendEntry();
return;
}
onTabChange(tab);
}}
/>
))}
</div>

424
src/index.css
View File

@@ -505,6 +505,59 @@ body {
),
radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 241, 246, 0.9));
--platform-recommend-runtime-fill: var(--platform-panel-fill);
--platform-recommend-runtime-border: rgba(232, 191, 205, 0.42);
--platform-recommend-runtime-shadow: 0 18px 44px rgba(215, 87, 134, 0.13),
inset 0 0 0 1px rgba(255, 255, 255, 0.58);
--platform-recommend-runtime-state-fill: radial-gradient(
circle at 50% 18%,
rgba(255, 91, 132, 0.12),
transparent 34%
),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 249, 0.94));
--platform-recommend-runtime-state-text: var(--platform-text-strong);
--puzzle-runtime-shell-fill: var(--platform-body-fill);
--puzzle-runtime-stage-fill: radial-gradient(
circle at 50% 18%,
rgba(255, 91, 132, 0.13),
transparent 30%
),
radial-gradient(circle at 18% 82%, rgba(255, 138, 115, 0.13), transparent 28%),
linear-gradient(180deg, #fffefe 0%, #fff7fa 58%, #fff1f5 100%);
--puzzle-runtime-grid-line: rgba(130, 75, 95, 0.06);
--puzzle-runtime-text-strong: var(--platform-text-strong);
--puzzle-runtime-text-base: var(--platform-text-base);
--puzzle-runtime-text-soft: var(--platform-text-soft);
--puzzle-runtime-surface-fill: rgba(255, 255, 255, 0.76);
--puzzle-runtime-surface-fill-strong: rgba(255, 255, 255, 0.9);
--puzzle-runtime-surface-border: rgba(232, 191, 205, 0.48);
--puzzle-runtime-board-fill: rgba(255, 255, 255, 0.68);
--puzzle-runtime-board-border: rgba(255, 126, 154, 0.28);
--puzzle-runtime-board-shadow: 0 30px 80px rgba(215, 87, 134, 0.14);
--puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.74);
--puzzle-runtime-piece-border: rgba(232, 191, 205, 0.54);
--puzzle-runtime-piece-empty-fill: rgba(255, 228, 236, 0.34);
--puzzle-runtime-piece-empty-text: rgba(92, 70, 80, 0.38);
--puzzle-runtime-piece-selected-fill: linear-gradient(135deg, #ff4f8b, #ff8a73);
--puzzle-runtime-piece-selected-text: #fff7fb;
--puzzle-runtime-piece-selected-border: rgba(255, 79, 139, 0.68);
--puzzle-runtime-piece-overlay: rgba(61, 24, 38, 0.06);
--puzzle-runtime-control-fill: rgba(255, 255, 255, 0.72);
--puzzle-runtime-control-hover-fill: rgba(255, 91, 132, 0.1);
--puzzle-runtime-primary-fill: var(--platform-button-primary-fill);
--puzzle-runtime-primary-text: var(--platform-button-primary-text);
--puzzle-runtime-primary-shadow: var(--platform-profile-action-shadow);
--puzzle-runtime-accent-text: var(--platform-cool-text);
--puzzle-runtime-cool-text: #0f8fa9;
--puzzle-runtime-danger-fill: rgba(255, 228, 233, 0.9);
--puzzle-runtime-danger-text: #c2415d;
--puzzle-runtime-backdrop-fill: rgba(43, 20, 32, 0.34);
--puzzle-runtime-dialog-fill: var(--platform-modal-fill);
--puzzle-runtime-dialog-border: var(--platform-modal-border);
--puzzle-runtime-table-fill: rgba(255, 255, 255, 0.62);
--puzzle-runtime-table-row-fill: rgba(255, 91, 132, 0.12);
--puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.66);
--puzzle-runtime-next-card-hover-fill: rgba(255, 91, 132, 0.1);
}
.platform-theme--dark {
@@ -684,6 +737,54 @@ body {
),
radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
linear-gradient(180deg, rgba(8, 10, 14, 0.22), rgba(8, 10, 14, 0.9));
--platform-recommend-runtime-fill: #030303;
--platform-recommend-runtime-border: rgba(255, 255, 255, 0.08);
--platform-recommend-runtime-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025),
0 18px 44px rgba(0, 0, 0, 0.18);
--platform-recommend-runtime-state-fill: #030303;
--platform-recommend-runtime-state-text: rgba(255, 255, 255, 0.92);
--puzzle-runtime-shell-fill: #020617;
--puzzle-runtime-stage-fill: radial-gradient(
circle at 50% 20%,
rgba(251, 191, 36, 0.18),
transparent 28%
),
radial-gradient(circle at 20% 80%, rgba(249, 115, 22, 0.16), transparent 26%),
linear-gradient(180deg, #2d160e, #020617);
--puzzle-runtime-grid-line: rgba(255, 255, 255, 0.04);
--puzzle-runtime-text-strong: #ffffff;
--puzzle-runtime-text-base: rgba(255, 255, 255, 0.82);
--puzzle-runtime-text-soft: rgba(255, 255, 255, 0.58);
--puzzle-runtime-surface-fill: rgba(0, 0, 0, 0.34);
--puzzle-runtime-surface-fill-strong: rgba(0, 0, 0, 0.5);
--puzzle-runtime-surface-border: rgba(255, 255, 255, 0.12);
--puzzle-runtime-board-fill: rgba(255, 255, 255, 0.08);
--puzzle-runtime-board-border: rgba(255, 255, 255, 0.16);
--puzzle-runtime-board-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
--puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.12);
--puzzle-runtime-piece-border: rgba(255, 255, 255, 0.22);
--puzzle-runtime-piece-empty-fill: rgba(0, 0, 0, 0.18);
--puzzle-runtime-piece-empty-text: rgba(255, 255, 255, 0.2);
--puzzle-runtime-piece-selected-fill: rgba(251, 191, 36, 0.84);
--puzzle-runtime-piece-selected-text: #020617;
--puzzle-runtime-piece-selected-border: rgba(253, 230, 138, 1);
--puzzle-runtime-piece-overlay: rgba(0, 0, 0, 0.1);
--puzzle-runtime-control-fill: rgba(0, 0, 0, 0.36);
--puzzle-runtime-control-hover-fill: rgba(255, 255, 255, 0.1);
--puzzle-runtime-primary-fill: #fde68a;
--puzzle-runtime-primary-text: #020617;
--puzzle-runtime-primary-shadow: 0 14px 36px rgba(251, 191, 36, 0.26);
--puzzle-runtime-accent-text: #fde68a;
--puzzle-runtime-cool-text: #cffafe;
--puzzle-runtime-danger-fill: rgba(239, 68, 68, 0.2);
--puzzle-runtime-danger-text: #fee2e2;
--puzzle-runtime-backdrop-fill: rgba(2, 6, 23, 0.68);
--puzzle-runtime-dialog-fill: rgba(2, 6, 23, 0.94);
--puzzle-runtime-dialog-border: rgba(255, 255, 255, 0.14);
--puzzle-runtime-table-fill: rgba(255, 255, 255, 0.06);
--puzzle-runtime-table-row-fill: rgba(251, 191, 36, 0.14);
--puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.06);
--puzzle-runtime-next-card-hover-fill: rgba(251, 191, 36, 0.1);
}
.platform-brand-logo {
@@ -1907,6 +2008,205 @@ body {
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.puzzle-runtime-shell {
background: var(--puzzle-runtime-shell-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stage {
background: var(--puzzle-runtime-stage-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stage__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--puzzle-runtime-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--puzzle-runtime-grid-line) 1px, transparent 1px);
background-size: 34px 34px;
opacity: 0.8;
}
.puzzle-runtime-pill,
.puzzle-runtime-icon-button,
.puzzle-runtime-header-card,
.puzzle-runtime-toolbar {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-surface-fill);
color: var(--puzzle-runtime-text-strong);
backdrop-filter: blur(14px);
}
.puzzle-runtime-icon-button {
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-header-card {
background: var(--puzzle-runtime-surface-fill-strong);
}
.puzzle-runtime-level-badge {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-accent-text);
}
.puzzle-runtime-timer {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-timer--urgent {
background: var(--puzzle-runtime-danger-fill);
color: var(--puzzle-runtime-danger-text);
}
.puzzle-runtime-board {
border-color: var(--puzzle-runtime-board-border);
background: var(--puzzle-runtime-board-fill);
box-shadow: var(--puzzle-runtime-board-shadow);
}
.puzzle-runtime-piece {
border-color: var(--puzzle-runtime-piece-border);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-piece--selected {
border-color: var(--puzzle-runtime-piece-selected-border);
background: var(--puzzle-runtime-piece-selected-fill);
color: var(--puzzle-runtime-piece-selected-text);
box-shadow: var(--puzzle-runtime-primary-shadow);
}
.puzzle-runtime-piece--merged {
border-color: transparent;
background: transparent;
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-piece--filled {
background: var(--puzzle-runtime-piece-fill);
}
.puzzle-runtime-piece--empty {
border-color: var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-piece-empty-fill);
color: var(--puzzle-runtime-piece-empty-text);
}
.puzzle-runtime-piece-overlay {
background: var(--puzzle-runtime-piece-overlay);
}
.puzzle-runtime-primary-button {
border: 1px solid var(--platform-button-primary-border);
background: var(--puzzle-runtime-primary-fill);
color: var(--puzzle-runtime-primary-text);
box-shadow: var(--puzzle-runtime-primary-shadow);
}
.puzzle-runtime-tool-button {
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-tool-button:hover {
background: var(--puzzle-runtime-control-hover-fill);
}
.puzzle-runtime-tool-button--active {
background: var(--platform-button-primary-fill);
color: var(--platform-button-primary-text);
}
.puzzle-runtime-tool-button__warm {
color: var(--puzzle-runtime-accent-text);
}
.puzzle-runtime-tool-button__cool {
color: var(--puzzle-runtime-cool-text);
}
.puzzle-runtime-status-chip {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-soft);
backdrop-filter: blur(12px);
}
.puzzle-runtime-error-chip {
background: var(--puzzle-runtime-danger-fill);
color: var(--puzzle-runtime-danger-text);
}
.puzzle-runtime-modal-overlay {
background: var(--puzzle-runtime-backdrop-fill);
}
.puzzle-runtime-dialog {
border: 1px solid var(--puzzle-runtime-dialog-border);
background: var(--puzzle-runtime-dialog-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-dialog__line {
border-color: var(--puzzle-runtime-surface-border);
}
.puzzle-runtime-dialog__soft {
color: var(--puzzle-runtime-text-soft);
}
.puzzle-runtime-dialog__body {
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-secondary-button {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stat-card,
.puzzle-runtime-settings-card {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-table-fill);
}
.puzzle-runtime-leaderboard-head {
background: var(--puzzle-runtime-table-fill);
color: var(--puzzle-runtime-text-soft);
}
.puzzle-runtime-leaderboard-row {
border-color: var(--puzzle-runtime-surface-border);
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-leaderboard-row--active {
background: var(--puzzle-runtime-table-row-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-next-card {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-next-card-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-next-card:hover {
border-color: var(--platform-button-primary-border);
background: var(--puzzle-runtime-next-card-hover-fill);
}
.puzzle-runtime-next-card__media {
background: var(--puzzle-runtime-control-fill);
}
.puzzle-runtime-next-card__tag {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-soft);
}
@media (max-width: 639px) {
:root {
--platform-bottom-nav-height: 3.85rem;
@@ -2095,7 +2395,7 @@ body {
height: 100%;
min-height: 0;
flex-direction: column;
gap: 0.55rem;
gap: 0.28rem;
border: 0;
border-radius: 0;
background: transparent;
@@ -2109,12 +2409,10 @@ body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--platform-recommend-runtime-border);
border-radius: 1.65rem;
background: #030303;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.025),
0 18px 44px rgba(0, 0, 0, 0.18);
background: var(--platform-recommend-runtime-fill);
box-shadow: var(--platform-recommend-runtime-shadow);
}
.platform-recommend-runtime-viewport {
@@ -2122,7 +2420,7 @@ body {
inset: 0;
min-width: 0;
overflow: hidden;
background: #030303;
background: var(--platform-recommend-runtime-fill);
}
.platform-recommend-runtime-state {
@@ -2132,8 +2430,8 @@ body {
width: 100%;
border: 0;
place-items: center;
background: #030303;
color: rgba(255, 255, 255, 0.92);
background: var(--platform-recommend-runtime-state-fill);
color: var(--platform-recommend-runtime-state-text);
font-size: clamp(1.8rem, 10vw, 2.45rem);
font-weight: 950;
letter-spacing: 0;
@@ -2148,6 +2446,8 @@ body {
flex: 0 0 auto;
min-width: 0;
color: var(--platform-text-strong);
touch-action: pan-y;
user-select: none;
}
.platform-recommend-work-meta__stats {
@@ -2170,7 +2470,7 @@ body {
}
.platform-recommend-work-meta__row {
margin-top: 0.55rem;
margin-top: 0.36rem;
display: flex;
min-width: 0;
align-items: center;
@@ -2184,9 +2484,6 @@ body {
flex: 1 1 auto;
align-items: center;
gap: 0.55rem;
border: 0;
background: transparent;
padding: 0;
color: inherit;
text-align: left;
}
@@ -2231,107 +2528,6 @@ body {
color: var(--platform-text-soft);
}
.platform-recommend-work-meta__detail-button {
display: inline-flex;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 1px solid var(--platform-surface-border);
border-radius: 9999px;
background: var(--platform-button-secondary-fill);
color: var(--platform-text-strong);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.platform-recommend-switcher {
display: flex;
flex: 0 0 auto;
min-width: 0;
gap: 0.55rem;
margin-right: -0.25rem;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 0.05rem 0.25rem 0.2rem 0;
scroll-snap-type: x mandatory;
scrollbar-width: none;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
}
.platform-recommend-switcher::-webkit-scrollbar {
display: none;
}
.platform-recommend-switch-card {
display: grid;
width: min(9.1rem, 42vw);
min-height: 4.25rem;
flex: 0 0 auto;
scroll-snap-align: start;
gap: 0.18rem;
border: 1px solid color-mix(in srgb, var(--platform-surface-border) 72%, transparent);
border-radius: 1.05rem;
background: color-mix(in srgb, var(--platform-panel-fill) 90%, #050505);
padding: 0.58rem 0.65rem;
color: var(--platform-text-strong);
text-align: left;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.platform-recommend-switch-card--active {
border-color: color-mix(
in srgb,
var(--platform-warm-text) 72%,
var(--platform-surface-border)
);
background: color-mix(
in srgb,
var(--platform-button-secondary-fill) 84%,
#151515
);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.16),
inset 0 0 0 1px color-mix(in srgb, var(--platform-warm-text) 42%, transparent);
}
.platform-recommend-switch-card__kind {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.64rem;
font-weight: 850;
color: var(--platform-text-soft);
}
.platform-recommend-switch-card__title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.88rem;
font-weight: 950;
line-height: 1.15;
}
.platform-recommend-switch-card__stats {
display: flex;
min-width: 0;
gap: 0.55rem;
font-size: 0.68rem;
font-weight: 850;
color: var(--platform-text-base);
}
.platform-recommend-switch-card__stats span {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 0.18rem;
}
.platform-mobile-home-stage .platform-desktop-search {
border-radius: 9999px;
padding: 0.64rem 0.9rem;