diff --git a/src/stage/remote/RemoteShell.css b/src/stage/remote/RemoteShell.css
new file mode 100644
index 0000000..d486c45
--- /dev/null
+++ b/src/stage/remote/RemoteShell.css
@@ -0,0 +1,269 @@
+.remote-shell {
+ min-height: 100vh;
+ min-height: 100dvh;
+ padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
+ background:
+ radial-gradient(circle at 12% 8%, rgba(166, 28, 32, 0.22) 0%, transparent 42%),
+ linear-gradient(180deg, #141117 0%, #0c0a0e 100%);
+ color: #f3ece4;
+ box-sizing: border-box;
+}
+
+html.remote-mode,
+body.remote-mode {
+ background: #0c0a0e;
+ color: #f3ece4;
+}
+
+.remote-head {
+ display: flex;
+ align-items: center;
+ gap: 0.85rem;
+ margin-bottom: 1.25rem;
+}
+
+.remote-logo {
+ width: 2.4rem;
+ height: 2.4rem;
+ object-fit: contain;
+}
+
+.remote-kicker {
+ margin: 0 0 0.15rem;
+ font-size: 0.75rem;
+ letter-spacing: 0.16em;
+ color: var(--gold, #c4a35a);
+}
+
+.remote-head h1 {
+ margin: 0;
+ font-size: 1.35rem;
+ letter-spacing: 0.08em;
+}
+
+.remote-status {
+ margin: 0 0 1rem;
+ font-size: 0.88rem;
+ color: rgba(243, 236, 228, 0.62);
+}
+
+.remote-status.is-connected {
+ color: #e8d08d;
+}
+
+.remote-status.is-error {
+ color: #e8a0a2;
+}
+
+.remote-now {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ margin-bottom: 1.1rem;
+ padding: 1rem 1.1rem;
+ border: 1px solid rgba(196, 163, 90, 0.28);
+ background: rgba(28, 25, 31, 0.7);
+}
+
+.remote-now span {
+ font-size: 0.8rem;
+ letter-spacing: 0.12em;
+ color: var(--gold, #c4a35a);
+}
+
+.remote-now strong {
+ font-size: 1.35rem;
+}
+
+.remote-now-interval {
+ margin: 0.35rem 0 0;
+ font-size: 0.88rem;
+ color: rgba(243, 236, 228, 0.72);
+}
+
+.remote-stepper {
+ display: grid;
+ grid-template-columns: 2.8rem 1fr 2.8rem;
+ align-items: center;
+ gap: 0.5rem;
+ margin-top: 0.75rem;
+}
+
+.remote-stepper span {
+ text-align: center;
+ font-size: 1.15rem;
+ letter-spacing: 0.08em;
+ color: var(--gold, #c4a35a);
+}
+
+.remote-stepper button,
+.remote-presets button,
+.remote-module-time button {
+ min-height: 2.6rem;
+ border: 1px solid rgba(196, 163, 90, 0.35);
+ background: rgba(18, 16, 20, 0.85);
+ color: #f3ece4;
+ font-size: 1.1rem;
+}
+
+.remote-presets {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ gap: 0.4rem;
+ margin-top: 0.65rem;
+}
+
+.remote-presets button {
+ min-height: 2.3rem;
+ font-size: 0.82rem;
+}
+
+.remote-presets button.is-active {
+ background: linear-gradient(135deg, #e8d08d 0%, #c4a35a 100%);
+ color: #121014;
+ border-color: transparent;
+}
+
+.remote-nav {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 0.75rem;
+ margin-bottom: 0.75rem;
+}
+
+.remote-nav button,
+.remote-autoplay,
+.remote-join button,
+.remote-module-goto {
+ min-height: 3.1rem;
+ border: 1px solid rgba(196, 163, 90, 0.35);
+ background: rgba(28, 25, 31, 0.85);
+ color: #f3ece4;
+ font-size: 1rem;
+}
+
+.remote-nav button:disabled,
+.remote-autoplay:disabled,
+.remote-module-goto:disabled,
+.remote-stepper button:disabled,
+.remote-presets button:disabled,
+.remote-module-time button:disabled {
+ opacity: 0.4;
+}
+
+.remote-autoplay {
+ width: 100%;
+ margin-bottom: 1.1rem;
+}
+
+.remote-autoplay.is-on {
+ color: var(--gold, #c4a35a);
+ border-color: rgba(196, 163, 90, 0.7);
+}
+
+.remote-modules-hint {
+ margin: 0 0 0.55rem;
+ font-size: 0.78rem;
+ line-height: 1.5;
+ color: rgba(243, 236, 228, 0.5);
+}
+
+.remote-modules {
+ display: grid;
+ gap: 0.45rem;
+}
+
+.remote-module-row {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: stretch;
+ gap: 0.4rem;
+ border: 1px solid rgba(196, 163, 90, 0.28);
+ background: rgba(28, 25, 31, 0.7);
+}
+
+.remote-module-goto {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ min-height: 2.7rem;
+ padding: 0 0.9rem;
+ text-align: left;
+ border: none;
+ background: transparent;
+}
+
+.remote-module-goto span {
+ color: var(--gold, #c4a35a);
+ letter-spacing: 0.08em;
+}
+
+.remote-module-row.is-active {
+ background: linear-gradient(135deg, #e8d08d 0%, #c4a35a 100%);
+ border-color: transparent;
+ color: #121014;
+}
+
+.remote-module-row.is-active .remote-module-goto,
+.remote-module-row.is-active .remote-module-goto span {
+ color: #121014;
+}
+
+.remote-module-row.is-active .remote-module-goto span {
+ color: #7d1216;
+}
+
+.remote-module-time {
+ display: flex;
+ align-items: center;
+ gap: 0.2rem;
+ padding-right: 0.35rem;
+}
+
+.remote-module-time em {
+ min-width: 2.2rem;
+ font-style: normal;
+ text-align: center;
+ font-size: 0.82rem;
+}
+
+.remote-module-time button {
+ width: 2.1rem;
+ min-height: 2.1rem;
+ padding: 0;
+}
+
+.remote-module-row.is-active .remote-module-time button {
+ border-color: rgba(125, 18, 22, 0.28);
+ background: rgba(18, 16, 20, 0.12);
+ color: #121014;
+}
+
+.remote-module-row.is-active .remote-module-time em {
+ color: #7d1216;
+}
+
+.remote-join {
+ display: grid;
+ gap: 0.65rem;
+}
+
+.remote-join label {
+ font-size: 0.88rem;
+ color: rgba(243, 236, 228, 0.72);
+}
+
+.remote-join input {
+ min-height: 3rem;
+ padding: 0 0.9rem;
+ border: 1px solid rgba(196, 163, 90, 0.4);
+ background: rgba(28, 25, 31, 0.8);
+ color: #f3ece4;
+ font-size: 1rem;
+ letter-spacing: 0.08em;
+}
+
+.remote-join button {
+ background: var(--brand, #a61c20);
+ border-color: var(--brand, #a61c20);
+}
diff --git a/src/stage/remote/RemoteShell.tsx b/src/stage/remote/RemoteShell.tsx
new file mode 100644
index 0000000..0a42530
--- /dev/null
+++ b/src/stage/remote/RemoteShell.tsx
@@ -0,0 +1,193 @@
+import { useMemo, useState, type FormEvent } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { stageNavItems } from '../../content/nav'
+import { images } from '../../content/site'
+import {
+ DEFAULT_INTERVAL_SECONDS,
+ MAX_INTERVAL_SECONDS,
+ MIN_INTERVAL_SECONDS,
+ clampIntervalSeconds,
+ defaultIntervals,
+ normalizeRoomId,
+} from './protocol'
+import { useStageClient } from './useStageClient'
+import './RemoteShell.css'
+
+const PRESET_SECONDS = [3, 6, 10, 15, 30] as const
+
+export function RemoteShell() {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const peerFromUrl = useMemo(
+ () => new URLSearchParams(location.search).get('peer'),
+ [location.search],
+ )
+ const hostId = peerFromUrl ? normalizeRoomId(peerFromUrl) : null
+ const [draft, setDraft] = useState('')
+ const { status, state, send } = useStageClient(hostId)
+
+ const index = state?.index ?? 0
+ const total = state?.total ?? stageNavItems.length
+ const label = state?.label ?? stageNavItems[index]?.label ?? '等待大屏'
+ const autoplay = state?.autoplay ?? false
+ const intervals = state?.intervals ?? defaultIntervals(stageNavItems.length)
+ const allSame = intervals.length > 0 && intervals.every((item) => item === intervals[0])
+ const globalSeconds = allSame
+ ? (intervals[0] ?? DEFAULT_INTERVAL_SECONDS)
+ : (intervals[index] ?? DEFAULT_INTERVAL_SECONDS)
+ const connected = status === 'connected'
+
+ const setOneSeconds = (idx: number, seconds: number) => {
+ send({ type: 'setInterval', index: idx, seconds: clampIntervalSeconds(seconds) })
+ }
+
+ const setAllSeconds = (seconds: number) => {
+ send({ type: 'setAllIntervals', seconds: clampIntervalSeconds(seconds) })
+ }
+
+ const join = (e: FormEvent) => {
+ e.preventDefault()
+ const id = normalizeRoomId(draft)
+ if (!id) return
+ navigate(`/?mode=remote&peer=${encodeURIComponent(id)}`)
+ }
+
+ return (
+
+
+ 
+
+
+
+ {!hostId ? (
+
+ ) : (
+ <>
+
+ {status === 'connected'
+ ? `已连接 ${hostId}`
+ : status === 'connecting'
+ ? `正在连接 ${hostId}…`
+ : status === 'error'
+ ? '连接失败，请确认大屏仍在展控模式'
+ : '未连接'}
+
+
+
+
+ {String(index + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
+
+ {label}
+
+ {allSame ? `统一时长 ${globalSeconds} 秒（全部模块）` : `统一设置（当前各模块时长不同）`}
+
+
+
+ {allSame ? `${globalSeconds}s` : `${globalSeconds}s*`}
+
+
+
+ {PRESET_SECONDS.map((sec) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
下方右侧加减只改该模块；顶部时长会统一改全部 11 页
+
+
+ )}
+
+ )
+}
diff --git a/src/stage/remote/StageRemotePanel.css b/src/stage/remote/StageRemotePanel.css
new file mode 100644
index 0000000..190cbeb
--- /dev/null
+++ b/src/stage/remote/StageRemotePanel.css
@@ -0,0 +1,122 @@
+.stage-remote-overlay {
+ position: absolute;
+ inset: 0;
+ z-index: 80;
+ background: rgba(8, 6, 10, 0.55);
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: calc(5.2rem + env(safe-area-inset-top, 0px)) 2.5rem calc(3rem + env(safe-area-inset-bottom, 0px));
+}
+
+.stage-remote-panel {
+ width: min(22rem, 92vw);
+ padding: 1.35rem 1.4rem 1.5rem;
+ background: linear-gradient(180deg, #1c191f 0%, #121014 100%);
+ border: 1px solid rgba(196, 163, 90, 0.35);
+ box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
+ color: #f3ece4;
+}
+
+.stage-remote-head {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-bottom: 1.1rem;
+}
+
+.stage-remote-kicker {
+ margin: 0 0 0.2rem;
+ font-size: 0.72rem;
+ letter-spacing: 0.18em;
+ color: var(--gold, #c4a35a);
+}
+
+.stage-remote-head h2 {
+ margin: 0;
+ font-size: 1.25rem;
+ letter-spacing: 0.08em;
+}
+
+.stage-remote-close {
+ width: 2rem;
+ height: 2rem;
+ color: rgba(243, 236, 228, 0.8);
+ border: 1px solid rgba(196, 163, 90, 0.3);
+ background: transparent;
+}
+
+.stage-remote-qr {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 12.5rem;
+ padding: 0.75rem;
+ background: #f7f2ea;
+}
+
+.stage-remote-qr.is-pending {
+ background: rgba(247, 242, 234, 0.08);
+ color: rgba(243, 236, 228, 0.55);
+}
+
+.stage-remote-code {
+ margin: 1rem 0 0.35rem;
+ text-align: center;
+ font-family: 'Noto Serif SC', serif;
+ font-size: 1.15rem;
+ letter-spacing: 0.16em;
+ color: var(--gold, #c4a35a);
+}
+
+.stage-remote-status {
+ margin: 0;
+ text-align: center;
+ font-size: 0.85rem;
+ color: rgba(243, 236, 228, 0.65);
+}
+
+.stage-remote-status.is-live {
+ color: #e8d08d;
+}
+
+.stage-remote-status.error {
+ color: #e8a0a2;
+}
+
+.stage-remote-hint {
+ margin: 0.85rem 0 0;
+ text-align: center;
+ font-size: 0.78rem;
+ line-height: 1.6;
+ color: rgba(243, 236, 228, 0.5);
+}
+
+@media (max-width: 48rem) {
+ .stage-remote-overlay {
+ justify-content: center;
+ padding: calc(4.2rem + env(safe-area-inset-top, 0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
+ }
+}
+
+.stage-remote-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.35rem 0.75rem;
+ border-radius: 1.5rem;
+ font-size: 0.78rem;
+ color: rgba(243, 236, 228, 0.85);
+ background: rgba(28, 25, 31, 0.8);
+ border: 1px solid rgba(196, 163, 90, 0.3);
+ cursor: pointer;
+ white-space: nowrap;
+ flex-shrink: 0;
+}
+
+.stage-remote-toggle.is-live {
+ color: var(--gold, #c4a35a);
+ border-color: rgba(196, 163, 90, 0.6);
+ background: rgba(196, 163, 90, 0.15);
+}
diff --git a/src/stage/remote/StageRemotePanel.tsx b/src/stage/remote/StageRemotePanel.tsx
new file mode 100644
index 0000000..68d33b9
--- /dev/null
+++ b/src/stage/remote/StageRemotePanel.tsx
@@ -0,0 +1,69 @@
+import { QRCodeSVG } from 'qrcode.react'
+import type { HostStatus } from './useStageHost'
+import './StageRemotePanel.css'
+
+type StageRemotePanelProps = {
+ open: boolean
+ roomId: string
+ qrUrl: string
+ status: HostStatus
+ clientCount: number
+ onClose: () => void
+}
+
+export function StageRemotePanel({
+ open,
+ roomId,
+ qrUrl,
+ status,
+ clientCount,
+ onClose,
+}: StageRemotePanelProps) {
+ if (!open) return null
+
+ const statusLabel =
+ status === 'ready'
+ ? clientCount > 0
+ ? `已连接 ${clientCount} 台手机`
+ : '等待手机扫码'
+ : status === 'error'
+ ? '信令连接失败'
+ : '正在创建房间…'
+
+ return (
+
+
+
+ )
+}
diff --git a/src/stage/remote/protocol.ts b/src/stage/remote/protocol.ts
new file mode 100644
index 0000000..6ab7bab
--- /dev/null
+++ b/src/stage/remote/protocol.ts
@@ -0,0 +1,105 @@
+export const ROOM_ID_PREFIX = 'dkhk-'
+export const ROOM_ID_STORAGE_KEY = 'dkhk-stage-peer-id'
+
+export const DEFAULT_INTERVAL_SECONDS = 6
+export const MIN_INTERVAL_SECONDS = 3
+export const MAX_INTERVAL_SECONDS = 60
+
+export type RemoteToHost =
+ | { type: 'hello' }
+ | { type: 'next' }
+ | { type: 'prev' }
+ | { type: 'goto'; index: number }
+ | { type: 'autoplay'; on: boolean }
+ | { type: 'setInterval'; index: number; seconds: number }
+ | { type: 'setAllIntervals'; seconds: number }
+
+export type HostToRemote = {
+ type: 'state'
+ index: number
+ total: number
+ autoplay: boolean
+ label: string
+ intervals: number[]
+}
+
+const ROOM_CHARS = 'abcdefghjkmnpqrstuvwxyz23456789'
+
+export function createRoomId() {
+ let id = ''
+ for (let i = 0; i < 6; i += 1) {
+ id += ROOM_CHARS[Math.floor(Math.random() * ROOM_CHARS.length)]
+ }
+ return `${ROOM_ID_PREFIX}${id}`
+}
+
+export function normalizeRoomId(raw: string) {
+ const trimmed = raw.trim().toLowerCase()
+ if (!trimmed) return ''
+ if (trimmed.startsWith(ROOM_ID_PREFIX)) return trimmed
+ return `${ROOM_ID_PREFIX}${trimmed}`
+}
+
+export function clampIntervalSeconds(seconds: number) {
+ if (!Number.isFinite(seconds)) return DEFAULT_INTERVAL_SECONDS
+ return Math.min(MAX_INTERVAL_SECONDS, Math.max(MIN_INTERVAL_SECONDS, Math.round(seconds)))
+}
+
+export function defaultIntervals(count: number) {
+ return Array.from({ length: count }, () => DEFAULT_INTERVAL_SECONDS)
+}
+
+export function isRemoteToHost(value: unknown): value is RemoteToHost {
+ if (!value || typeof value !== 'object' || !('type' in value)) return false
+ const type = (value as { type: unknown }).type
+ if (type === 'hello' || type === 'next' || type === 'prev') return true
+ if (type === 'goto') {
+ return typeof (value as { index?: unknown }).index === 'number'
+ }
+ if (type === 'autoplay') {
+ return typeof (value as { on?: unknown }).on === 'boolean'
+ }
+ if (type === 'setInterval') {
+ const msg = value as { index?: unknown; seconds?: unknown }
+ return typeof msg.index === 'number' && typeof msg.seconds === 'number'
+ }
+ if (type === 'setAllIntervals') {
+ return typeof (value as { seconds?: unknown }).seconds === 'number'
+ }
+ return false
+}
+
+export function isHostToRemote(value: unknown): value is HostToRemote {
+ if (!value || typeof value !== 'object' || !('type' in value)) return false
+ const msg = value as Record
+ return (
+ msg.type === 'state' &&
+ typeof msg.index === 'number' &&
+ typeof msg.total === 'number' &&
+ typeof msg.autoplay === 'boolean' &&
+ typeof msg.label === 'string' &&
+ Array.isArray(msg.intervals) &&
+ msg.intervals.every((item) => typeof item === 'number')
+ )
+}
+
+export function decodePayload(data: unknown): unknown {
+ if (typeof data === 'string') {
+ try {
+ return JSON.parse(data) as unknown
+ } catch {
+ return null
+ }
+ }
+ return data
+}
+
+export function parseRemoteToHost(data: unknown): RemoteToHost | null {
+ const payload = decodePayload(data)
+ return isRemoteToHost(payload) ? payload : null
+}
+
+export function parseHostToRemote(data: unknown): HostToRemote | null {
+ const payload = decodePayload(data)
+ return isHostToRemote(payload) ? payload : null
+}
diff --git a/src/stage/remote/useStageClient.ts b/src/stage/remote/useStageClient.ts
new file mode 100644
index 0000000..19b902d
--- /dev/null
+++ b/src/stage/remote/useStageClient.ts
@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Peer, type DataConnection } from 'peerjs'
+import { parseHostToRemote, type HostToRemote, type RemoteToHost } from './protocol'
+
+export type ClientStatus = 'idle' | 'connecting' | 'connected' | 'error'
+
+export function useStageClient(hostId: string | null) {
+ const [status, setStatus] = useState('idle')
+ const [state, setState] = useState(null)
+ const connRef = useRef(null)
+
+ const send = useCallback((msg: RemoteToHost) => {
+ if (connRef.current?.open) {
+ connRef.current.send(JSON.stringify(msg))
+ }
+ }, [])
+
+ useEffect(() => {
+ if (!hostId) {
+ setStatus('idle')
+ setState(null)
+ return
+ }
+
+ let cancelled = false
+ const peer = new Peer({ debug: 0 })
+ setStatus('connecting')
+ setState(null)
+
+ peer.on('open', () => {
+ if (cancelled) return
+ const conn = peer.connect(hostId, { reliable: true })
+ connRef.current = conn
+
+ conn.on('open', () => {
+ if (cancelled) return
+ setStatus('connected')
+ conn.send(JSON.stringify({ type: 'hello' }))
+ })
+
+ conn.on('data', (data) => {
+ const msg = parseHostToRemote(data)
+ if (msg) setState(msg)
+ })
+
+ conn.on('close', () => {
+ if (!cancelled) setStatus('error')
+ })
+
+ conn.on('error', () => {
+ if (!cancelled) setStatus('error')
+ })
+ })
+
+ peer.on('error', () => {
+ if (!cancelled) setStatus('error')
+ })
+
+ return () => {
+ cancelled = true
+ connRef.current?.close()
+ connRef.current = null
+ peer.destroy()
+ }
+ }, [hostId])
+
+ return { status, state, send }
+}
diff --git a/src/stage/remote/useStageHost.ts b/src/stage/remote/useStageHost.ts
new file mode 100644
index 0000000..9652768
--- /dev/null
+++ b/src/stage/remote/useStageHost.ts
@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Peer, type DataConnection } from 'peerjs'
+import {
+ ROOM_ID_STORAGE_KEY,
+ createRoomId,
+ parseRemoteToHost,
+ type HostToRemote,
+ type RemoteToHost,
+} from './protocol'
+
+export type HostStatus = 'connecting' | 'ready' | 'error'
+
+function readStoredRoomId() {
+ try {
+ return sessionStorage.getItem(ROOM_ID_STORAGE_KEY) ?? ''
+ } catch {
+ return ''
+ }
+}
+
+function writeStoredRoomId(id: string) {
+ try {
+ sessionStorage.setItem(ROOM_ID_STORAGE_KEY, id)
+ } catch {
+ /* ignore quota / private mode */
+ }
+}
+
+export function useStageHost(onCommand: (msg: RemoteToHost) => void) {
+ const [roomId, setRoomId] = useState('')
+ const [status, setStatus] = useState('connecting')
+ const [clientCount, setClientCount] = useState(0)
+ const connectionsRef = useRef([])
+ const onCommandRef = useRef(onCommand)
+ onCommandRef.current = onCommand
+
+ const refreshClientCount = useCallback(() => {
+ setClientCount(connectionsRef.current.filter((conn) => conn.open).length)
+ }, [])
+
+ const broadcastState = useCallback((state: HostToRemote) => {
+ const payload = JSON.stringify(state)
+ connectionsRef.current.forEach((conn) => {
+ if (conn.open) conn.send(payload)
+ })
+ }, [])
+
+ useEffect(() => {
+ let cancelled = false
+ let peer: Peer | null = null
+ let retrying = false
+
+ const attachConnection = (conn: DataConnection) => {
+ connectionsRef.current.push(conn)
+
+ conn.on('open', () => {
+ if (cancelled) return
+ refreshClientCount()
+ onCommandRef.current({ type: 'hello' })
+ })
+
+ conn.on('data', (data) => {
+ const msg = parseRemoteToHost(data)
+ if (msg) onCommandRef.current(msg)
+ })
+
+ const drop = () => {
+ connectionsRef.current = connectionsRef.current.filter((item) => item !== conn)
+ refreshClientCount()
+ }
+
+ conn.on('close', drop)
+ conn.on('error', drop)
+ }
+
+ const start = (id: string) => {
+ retrying = false
+ peer = new Peer(id, { debug: 0 })
+
+ peer.on('open', (openId) => {
+ if (cancelled) return
+ writeStoredRoomId(openId)
+ setRoomId(openId)
+ setStatus('ready')
+ })
+
+ peer.on('connection', (conn) => {
+ if (cancelled) return
+ attachConnection(conn)
+ })
+
+ peer.on('error', (err) => {
+ if (cancelled) return
+ if (err.type === 'unavailable-id' && !retrying) {
+ retrying = true
+ peer?.destroy()
+ const nextId = createRoomId()
+ writeStoredRoomId(nextId)
+ start(nextId)
+ return
+ }
+ setStatus('error')
+ })
+ }
+
+ const initialId = readStoredRoomId() || createRoomId()
+ writeStoredRoomId(initialId)
+ start(initialId)
+
+ return () => {
+ cancelled = true
+ connectionsRef.current.forEach((conn) => conn.close())
+ connectionsRef.current = []
+ peer?.destroy()
+ }
+ }, [refreshClientCount])
+
+ return { roomId, status, clientCount, broadcastState }
+}
diff --git a/src/stage/stageAssets.ts b/src/stage/stageAssets.ts
new file mode 100644
index 0000000..8f5bd2c
--- /dev/null
+++ b/src/stage/stageAssets.ts
@@ -0,0 +1,50 @@
+export type StageImagePair = { thumb: string; full: string }
+
+export const stageImages = {
+ logo: {
+ thumb: '/assets/stage/thumb/logo.webp',
+ full: '/assets/stage/full/logo.webp',
+ },
+ t30: {
+ thumb: '/assets/stage/thumb/t30-bottle.webp',
+ full: '/assets/stage/full/t30-bottle.webp',
+ },
+ brand: {
+ manor: {
+ thumb: '/assets/stage/thumb/emb_p6_5.webp',
+ full: '/assets/stage/full/emb_p6_5.webp',
+ },
+ relic: {
+ thumb: '/assets/stage/thumb/emb_p33_1.webp',
+ full: '/assets/stage/full/emb_p33_1.webp',
+ },
+ },
+ qr: {
+ thumb: '/assets/stage/thumb/qr-contact.webp',
+ full: '/assets/stage/full/qr-contact.webp',
+ },
+} as const
+
+/** Flat list of all stage image pairs for preload helpers */
+export const allStageImagePairs: StageImagePair[] = [
+ stageImages.logo,
+ stageImages.t30,
+ stageImages.brand.manor,
+ stageImages.brand.relic,
+ stageImages.qr,
+]
+
+/** Images used per slide index (aligned with stageNavItems) */
+export const stageSlideImages: StageImagePair[][] = [
+ [stageImages.t30], // 首页
+ [stageImages.brand.manor, stageImages.brand.relic], // 品牌传承
+ [], // 诗酒文化
+ [stageImages.t30], // 清香
+ [], // 好客模式
+ [], // 三端协同
+ [], // 科技驱动
+ [], // 酒厂实力
+ [], // 城市合伙人
+ [], // 科技板块
+ [stageImages.qr], // 联系我们
+]
diff --git a/src/stage/useStageImagePreload.ts b/src/stage/useStageImagePreload.ts
new file mode 100644
index 0000000..8f720d3
--- /dev/null
+++ b/src/stage/useStageImagePreload.ts
@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { stageNavItems } from '../content/nav'
+import {
+ allStageImagePairs,
+ stageImages,
+ stageSlideImages,
+ type StageImagePair,
+} from './stageAssets'
+
+const loaded = new Set()
+
+function preloadUrl(url: string) {
+ if (loaded.has(url)) return
+ loaded.add(url)
+ const img = new Image()
+ img.src = url
+}
+
+function preloadPair(pair: StageImagePair, mode: 'thumb' | 'full' | 'both') {
+ if (mode === 'thumb' || mode === 'both') preloadUrl(pair.thumb)
+ if (mode === 'full' || mode === 'both') preloadUrl(pair.full)
+}
+
+function preloadSlideIndex(index: number, mode: 'thumb' | 'full' | 'both') {
+ const pairs = stageSlideImages[index] ?? []
+ for (const pair of pairs) preloadPair(pair, mode)
+}
+
+/** Preload all thumbs on mount; preload current + adjacent slide full images on index change. */
+export function useStageImagePreload(activeIdx: number) {
+ useEffect(() => {
+ for (const pair of allStageImagePairs) preloadPair(pair, 'thumb')
+ preloadPair(stageImages.logo, 'full')
+ }, [])
+
+ useEffect(() => {
+ preloadSlideIndex(activeIdx, 'full')
+
+ const prev = (activeIdx - 1 + stageNavItems.length) % stageNavItems.length
+ const next = (activeIdx + 1) % stageNavItems.length
+ preloadSlideIndex(prev, 'full')
+ preloadSlideIndex(next, 'full')
+ }, [activeIdx])
+}