+ navigationStore.back()} />
+ navigationStore.forward()} />
+
+ {
+ if (!event.currentTarget.contains(event.relatedTarget as Node | null))
+ event.currentTarget.removeAttribute('open')
+ }}
+ onKeyDown={(event) => {
+ if (event.key === 'Escape')
+ event.currentTarget.removeAttribute('open')
+ }}
+ >
+
+
+
+
+
+
+
+
+ navigationStore.open(home)}
+ />
+ search(searchStore.query)}
+ />
+
+
+
+
+ navigationStore.open('listen')}
+ onQueue={() => togglePanel('queue')}
+ onChat={() => togglePanel('chat')}
+ queueOpen={joined && (page === 'queue' || panel === 'queue')}
+ chatOpen={joined && (page === 'chat' || panel === 'chat')}
+ canOpenPanels={joined}
+ />
+
+
+
+
+
+
+
+
+
+
+ {page === 'lobby' &&
+
+
+
+ {view => view === 'chat'
+ ? switchPanel(null)} />
+
+ {view === 'queue' ?
+
+
+ )}
+
+
+
+
+
+ switchPanel(null)} />
+
+
+ 重试}>
+ 再试一次，或者先看看别的内容。播放不受影响。
+
+
+ )
+ }
+ if (fallback === null)
+ return announce ? : null
+ return typeof fallback === 'function' ? fallback(this.retry, this.retryButton) : fallback
+ }
+}
+
+export function RegionFailed({ message, retry, retryButton }: { message: string, retry: () => void, retryButton: RefObject{message}
+ + + ) +} diff --git a/web/src/app/main.tsx b/web/src/app/main.tsx new file mode 100644 index 0000000..14b56b7 --- /dev/null +++ b/web/src/app/main.tsx @@ -0,0 +1,48 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import { brandStore } from '@/core/brand' +import { chatStore } from '@/features/chat' +import { historyStore } from '@/features/history' +import { lyricsStore } from '@/features/lyrics' +import { playerStore, reminderStore, volumeStore } from '@/features/playback' +import { roomEntryStore } from '@/features/rooms' +import { searchStore } from '@/features/search' +import { appearanceStore, performanceStore, profileStore } from '@/features/settings' +import { setViewportHeight } from '@/shared/lib/viewport' +import { App } from './app' +import { watchConnection } from './connection-notices' +import { navigationStore } from './navigation' +import { pwaStore } from './pwa' +import './style.css' + +const root = document.getElementById('root') +if (!root) + throw new Error('index.html 缺少 #root 节点') + +// 在首次渲染和进入房间之前启动：外观、性能等级、音量和品牌名要在第一帧生效，订阅房间的 Store 不能错过进入房间。 +// 聊天面板按需加载，歌词页也不常驻，但聊天、搜索和歌词的 Store 要从进入房间起跟随房间变化，不能等到页面挂载。 +appearanceStore.start() +performanceStore.start() +volumeStore.start() +brandStore.start() +profileStore.start() +playerStore.start() +reminderStore.start() +historyStore.start() +roomEntryStore.start() +chatStore.start() +searchStore.start() +lyricsStore.start() +// 启动时获取成员身份，并借此发现已失效的成员 token。失败不影响浏览大厅，之后的请求会再次尝试。 +void profileStore.load().catch(() => {}) +watchConnection() +pwaStore.start() +navigationStore.start() +setViewportHeight() +window.addEventListener('resize', setViewportHeight, { passive: true }) + +createRoot(root).render( +更新后会重新加载应用，并重新连上房间。
+
+
+
+
+
+
+ )
+}
diff --git a/web/src/features/admin/admin-store.ts b/web/src/features/admin/admin-store.ts
new file mode 100644
index 0000000..6a51047
--- /dev/null
+++ b/web/src/features/admin/admin-store.ts
@@ -0,0 +1,44 @@
+import type { ErrorTexts } from '@/core/errors'
+import { ApiError, deleteAdminToken, loadAdminToken, saveAdminToken } from '@/core/api'
+import { errorMessage } from '@/core/errors'
+import { Store } from '@/shared/lib/store'
+import { notificationStore } from '@/shared/ui'
+
+class AdminStore extends Store<{ signedIn: boolean }> {
+ constructor() {
+ super({ signedIn: false })
+ }
+
+ start(): void {
+ this.setState({ signedIn: loadAdminToken() !== null })
+ }
+
+ signIn(token: string): void {
+ saveAdminToken(token)
+ this.setState({ signedIn: true })
+ }
+
+ signOut(): void {
+ deleteAdminToken()
+ this.setState({ signedIn: false })
+ }
+
+ // 失败时显示错误并返回 null；管理 token 无效、后台没有启用或网址不被服务器接受时退出登录。
+ // 204 的接口成功时得到 undefined，调用方要与 null 比较，不能只看真假。
+ async call
+
+ {signedIn
+ ? (
+ <>
+
+ {brandName}
+
+ {signedIn && (
+
+ )}
+ 后台
+管理品牌名、常驻房间、音源账号和已存储的媒体。
+{children}
+
+
+
+
+
+
+ {failed
+ ? (
+ 常驻房间
+ +
+
+ )
+ : !rooms
+ ? 暂时无法获取常驻房间。
+ +还没有常驻房间。
+ : ( +-
+ {rooms.map(room => (
+
-
+ + {room.name} + + {room.slug ? `/r/${room.slug}` : '没有别名'} + {room.hasPassword && ( + <> + + + 有密码 + + )} + + {`${room.onlineCount} 人在线`} + ++++
{ + const ref = room.slug ?? room.id + const entry = roomEntryStore.state + if (entry.phase !== 'joined' || entry.room?.id !== room.id) + void roomEntryStore.enter(ref, room) + onEntered(ref) + }} + /> + void copyInviteLink(room)} /> + setKeyOf(room)} /> + setEditing(room)} /> + setDeleting(room)} /> +
+ ))}
+
+ {targets.length > 1 && (
+ 
}
+
+
+ {targets.map((option, index) => (
+
+ ))}
+
+ )}
+ {qr === 'loading' && 正在获取二维码…
} + {qr === 'unavailable' &&暂时无法获取二维码。
} + {typeof qr === 'object' && login && ( + <> + {scanning &&+ {login.status === 'failed' && login.message ? `${statusText.failed}：${login.message}` : statusText[login.status]} +
+ {scanning && {`剩余 ${remainingSeconds(login, nowMs)} 秒`}} + + )} + {(qr === 'unavailable' || login?.status === 'expired' || login?.status === 'failed') && ( + + )} +
+
+ 关闭后不能再查看，请现在复制。
+ event.currentTarget.select()} /> +
+
+
+
+ )
+ : (
+ <>
+ {status === undefined && 正在获取…
} + {status === null && ( +
+
+ )}
+ {status?.set === false && (
+ <>
+ 暂时无法获取 API Key 的状态。
+ +还没有 API Key。
+
+
+
+
+ )}
+ {status?.set && (
+ <>
+ {`生成于 ${formatDateTime(status.createdAtMs)}。Key 只在生成时显示一次，丢失后只能重置。`}
+
+
+
+
+ )}
+
+ )}
+