1162 lines
37 KiB
TypeScript
1162 lines
37 KiB
TypeScript
/**
|
||
* Authenticated component studio.
|
||
*
|
||
* This module composes tenant-scoped component settings, CookieCloud source
|
||
* configuration, isolated test events, OBS token rotation and system-admin
|
||
* invitations. One-time secrets remain local to the panel that created them;
|
||
* update blockers prevent the PWA from refreshing until they are saved.
|
||
*/
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||
import type { FormEvent, ReactNode } from 'react'
|
||
import {
|
||
ApiError,
|
||
api,
|
||
copyToClipboard,
|
||
errorMessage,
|
||
json,
|
||
normalizeComponents,
|
||
normalizeInvitations,
|
||
normalizeSettings,
|
||
normalizeSource,
|
||
} from './api'
|
||
import { Overlay } from './overlay'
|
||
import { PwaControls, usePwaUpdateBlocker } from './pwa'
|
||
import { defaultOverlaySettings } from './types'
|
||
import type {
|
||
AuthUser,
|
||
ComponentSummary,
|
||
CookieCloudSource,
|
||
Invitation,
|
||
OverlaySettings,
|
||
} from './types'
|
||
|
||
const previewPresets = [
|
||
{ label: '窄侧栏', width: 360, height: 600 },
|
||
{ label: '竖屏', width: 440, height: 760 },
|
||
{ label: '高清竖栏', width: 600, height: 1080 },
|
||
{ label: '横向条', width: 720, height: 320 },
|
||
]
|
||
|
||
function isDanmakuKind(kind: string): boolean {
|
||
return kind === 'danmaku_overlay' || kind === 'danmaku'
|
||
}
|
||
|
||
type Flash = { kind: 'success' | 'error'; text: string } | undefined
|
||
|
||
function Panel({
|
||
title,
|
||
description,
|
||
aside,
|
||
children,
|
||
className = '',
|
||
}: {
|
||
title: string
|
||
description?: string
|
||
aside?: ReactNode
|
||
children: ReactNode
|
||
className?: string
|
||
}) {
|
||
return (
|
||
<section className={`dashboard-panel jade-panel ${className}`}>
|
||
<header className="panel-header">
|
||
<div>
|
||
<h2>{title}</h2>
|
||
{description && <p>{description}</p>}
|
||
</div>
|
||
{aside}
|
||
</header>
|
||
{children}
|
||
</section>
|
||
)
|
||
}
|
||
|
||
function FlashMessage({ flash }: { flash: Flash }) {
|
||
if (!flash) return null
|
||
return (
|
||
<div className={`notice ${flash.kind}`} role={flash.kind === 'error' ? 'alert' : 'status'}>
|
||
{flash.text}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function ControlLayout({
|
||
user,
|
||
active,
|
||
onLogout,
|
||
children,
|
||
}: {
|
||
user: AuthUser
|
||
active: 'components' | 'invitations'
|
||
onLogout: () => Promise<void>
|
||
children: ReactNode
|
||
}) {
|
||
const isAdmin = user.role === 'system_admin'
|
||
return (
|
||
<main className="dashboard-shell">
|
||
<header className="dashboard-topbar">
|
||
<a className="brand" href="/control/" aria-label="返回组件控制台">
|
||
<span aria-hidden="true">星</span>
|
||
<div>
|
||
<b>洛星瓷直播云台</b>
|
||
<small>OBS COMPONENT STUDIO</small>
|
||
</div>
|
||
</a>
|
||
<nav aria-label="控制台导航">
|
||
<a className={active === 'components' ? 'active' : ''} href="/control/">
|
||
我的组件
|
||
</a>
|
||
{isAdmin && (
|
||
<a className={active === 'invitations' ? 'active' : ''} href="/control/invitations">
|
||
邀请码
|
||
</a>
|
||
)}
|
||
</nav>
|
||
<div className="account-menu">
|
||
<PwaControls />
|
||
<div>
|
||
<b>{user.displayName || user.username}</b>
|
||
<small>{isAdmin ? '系统管理员' : '用户'}</small>
|
||
</div>
|
||
<button type="button" className="ghost-button" onClick={() => void onLogout()}>
|
||
退出
|
||
</button>
|
||
</div>
|
||
</header>
|
||
{children}
|
||
</main>
|
||
)
|
||
}
|
||
|
||
function SettingsEditor({
|
||
settings,
|
||
onChange,
|
||
onSave,
|
||
saving,
|
||
}: {
|
||
settings: OverlaySettings
|
||
onChange: (settings: OverlaySettings) => void
|
||
onSave: () => Promise<void>
|
||
saving: boolean
|
||
}) {
|
||
const edit = <K extends keyof OverlaySettings>(key: K, value: OverlaySettings[K]) => {
|
||
onChange({ ...settings, [key]: value })
|
||
}
|
||
const eventToggles: Array<[keyof OverlaySettings, string]> = [
|
||
['showDanmaku', '弹幕'],
|
||
['showEnter', '进房'],
|
||
['showGift', '礼物'],
|
||
['showSuperchat', '醒目留言'],
|
||
['showGuard', '舰长'],
|
||
['showLike', '点赞'],
|
||
['showShare', '分享'],
|
||
]
|
||
|
||
return (
|
||
<div className="settings-editor">
|
||
<div className="slider-grid">
|
||
<label>
|
||
<span>
|
||
字号 <output>{settings.fontScale}%</output>
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min="50"
|
||
max="300"
|
||
step="5"
|
||
value={settings.fontScale}
|
||
onChange={event => edit('fontScale', +event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>
|
||
最大可见条数 <output>{settings.maxVisible}</output>
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min="1"
|
||
max="12"
|
||
value={settings.maxVisible}
|
||
onChange={event => edit('maxVisible', +event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>
|
||
自动收缩 <output>{settings.collapseAfterSeconds}s</output>
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min="2"
|
||
max="120"
|
||
value={settings.collapseAfterSeconds}
|
||
onChange={event => edit('collapseAfterSeconds', +event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>
|
||
卷轴展开时长 <output>{(settings.unfoldDurationMs / 1000).toFixed(1)}s</output>
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min="200"
|
||
max="5000"
|
||
step="100"
|
||
value={settings.unfoldDurationMs}
|
||
onChange={event => edit('unfoldDurationMs', +event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>
|
||
动效强度 <output>{settings.motionIntensity}%</output>
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max="100"
|
||
value={settings.motionIntensity}
|
||
onChange={event => edit('motionIntensity', +event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>
|
||
每卡粒子数量 <output>{settings.particleCount}</output>
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max="12"
|
||
value={settings.particleCount}
|
||
onChange={event => edit('particleCount', +event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>
|
||
粒子动画速度 <output>{settings.particleSpeed}%</output>
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min="25"
|
||
max="300"
|
||
step="25"
|
||
value={settings.particleSpeed}
|
||
onChange={event => edit('particleSpeed', +event.target.value)}
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<fieldset className="toggle-grid">
|
||
<legend>显示事件</legend>
|
||
{eventToggles.map(([key, label]) => (
|
||
<label key={key}>
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(settings[key])}
|
||
onChange={event => edit(key, event.target.checked as never)}
|
||
/>
|
||
<span>{label}</span>
|
||
</label>
|
||
))}
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.lowPerformanceMode}
|
||
onChange={event => edit('lowPerformanceMode', event.target.checked)}
|
||
/>
|
||
<span>低性能模式</span>
|
||
</label>
|
||
</fieldset>
|
||
|
||
<div className="field-grid two-columns">
|
||
<label>
|
||
高价值礼物阈值（厘）
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
value={settings.highValueThreshold}
|
||
onChange={event => edit('highValueThreshold', +event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
特别高价值阈值（厘）
|
||
<input
|
||
type="number"
|
||
min="0"
|
||
value={settings.featuredValueThreshold}
|
||
onChange={event => edit('featuredValueThreshold', +event.target.value)}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="form-actions align-end">
|
||
<button type="button" disabled={saving} onClick={() => void onSave()}>
|
||
{saving ? '正在保存…' : '保存并实时同步'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function OverlayPreview({ settings }: { settings: OverlaySettings }) {
|
||
const [preset, setPreset] = useState(previewPresets[1])
|
||
return (
|
||
<Panel
|
||
title="自适应预览"
|
||
description="预设只改变预览尺寸；OBS 浏览器源仍可使用任意宽高。"
|
||
className="preview-panel"
|
||
>
|
||
<div className="preset-buttons">
|
||
{previewPresets.map(size => (
|
||
<button
|
||
type="button"
|
||
className={size.label === preset.label ? 'active' : 'secondary'}
|
||
onClick={() => setPreset(size)}
|
||
key={size.label}
|
||
>
|
||
{size.label}
|
||
<small>
|
||
{size.width}×{size.height}
|
||
</small>
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="preview-viewport">
|
||
<div className="preview-frame" style={{ width: preset.width, height: preset.height }}>
|
||
<Overlay preview previewSettings={settings} />
|
||
</div>
|
||
</div>
|
||
</Panel>
|
||
)
|
||
}
|
||
|
||
function SourceEditor({
|
||
source,
|
||
onSaved,
|
||
}: {
|
||
source: CookieCloudSource
|
||
onSaved: (source: CookieCloudSource) => void
|
||
}) {
|
||
const [roomId, setRoomId] = useState(source.roomId)
|
||
const [host, setHost] = useState(source.cookieCloud.host)
|
||
const [key, setKey] = useState(source.cookieCloud.key)
|
||
const [password, setPassword] = useState('')
|
||
const [busy, setBusy] = useState(false)
|
||
const [flash, setFlash] = useState<Flash>()
|
||
const sourceDirty =
|
||
roomId !== source.roomId ||
|
||
host.trim() !== source.cookieCloud.host ||
|
||
key !== source.cookieCloud.key ||
|
||
Boolean(password)
|
||
usePwaUpdateBlocker('live-source', '保存或还原直播源与 CookieCloud 设置', busy || sourceDirty)
|
||
|
||
useEffect(() => {
|
||
setRoomId(source.roomId)
|
||
setHost(source.cookieCloud.host)
|
||
setKey(source.cookieCloud.key)
|
||
setPassword('')
|
||
}, [source])
|
||
|
||
const submit = async (event: FormEvent) => {
|
||
event.preventDefault()
|
||
setBusy(true)
|
||
setFlash(undefined)
|
||
try {
|
||
const payload = await api<unknown>(
|
||
'/api/v1/source',
|
||
json('PUT', {
|
||
roomId: roomId.trim(),
|
||
cookieCloud: {
|
||
host: host.trim(),
|
||
key: key.trim(),
|
||
...(password ? { password } : {}),
|
||
},
|
||
}),
|
||
)
|
||
const next = normalizeSource(payload)
|
||
onSaved(next)
|
||
setPassword('')
|
||
setFlash({ kind: 'success', text: '直播源已保存，连接会使用新的隔离配置。' })
|
||
} catch (reason) {
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '直播源保存失败') })
|
||
} finally {
|
||
setBusy(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Panel
|
||
title="Bilibili 直播源"
|
||
description="该 CookieCloud 凭据仅属于当前账户，不会与其他用户共享。"
|
||
aside={
|
||
source.connected === undefined ? undefined : (
|
||
<span className={`status-chip ${source.connected ? 'online' : 'offline'}`}>
|
||
{source.connected ? '已连接' : '未连接'}
|
||
</span>
|
||
)
|
||
}
|
||
>
|
||
{source.detail && <p className="source-detail">{source.detail}</p>}
|
||
<form className="field-grid two-columns" onSubmit={submit}>
|
||
<label>
|
||
邀请码绑定的直播间 ID
|
||
<input
|
||
required
|
||
readOnly
|
||
inputMode="numeric"
|
||
value={roomId}
|
||
onChange={event => setRoomId(event.target.value)}
|
||
/>
|
||
<small>直播间由系统管理员签发邀请码时固定，用户不能自行切换。</small>
|
||
</label>
|
||
<label>
|
||
CookieCloud 地址
|
||
<input
|
||
required
|
||
type="url"
|
||
placeholder="https://cookie.example.com"
|
||
value={host}
|
||
onChange={event => setHost(event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
CookieCloud UUID / Key
|
||
<input
|
||
required={!source.cookieCloud.keyConfigured}
|
||
autoComplete="off"
|
||
placeholder={
|
||
source.cookieCloud.keyConfigured ? '已设置；留空保持不变' : '请输入同步 UUID / Key'
|
||
}
|
||
value={key}
|
||
onChange={event => setKey(event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
CookieCloud 密码
|
||
<input
|
||
type="password"
|
||
autoComplete="new-password"
|
||
placeholder={
|
||
source.cookieCloud.passwordConfigured ? '已设置；留空保持不变' : '请输入同步密码'
|
||
}
|
||
required={!source.cookieCloud.passwordConfigured}
|
||
value={password}
|
||
onChange={event => setPassword(event.target.value)}
|
||
/>
|
||
</label>
|
||
<FlashMessage flash={flash} />
|
||
<div className="form-actions align-end span-all">
|
||
<button disabled={busy}>{busy ? '正在验证并保存…' : '保存直播源'}</button>
|
||
</div>
|
||
</form>
|
||
</Panel>
|
||
)
|
||
}
|
||
|
||
type TokenState = {
|
||
publicId: string
|
||
configured: boolean
|
||
updatedAt?: string
|
||
address?: string
|
||
}
|
||
|
||
function tokenState(value: unknown, fallbackPublicId: string): TokenState {
|
||
const root = value && typeof value === 'object' ? (value as Record<string, unknown>) : {}
|
||
const token = typeof root.token === 'string' ? root.token : undefined
|
||
const publicId = String(root.publicId ?? fallbackPublicId)
|
||
let address =
|
||
typeof root.url === 'string' ? root.url : typeof root.path === 'string' ? root.path : undefined
|
||
if (address) address = new URL(address, location.origin).toString()
|
||
if (!address && token) {
|
||
const url = new URL(`/obs/${encodeURIComponent(publicId)}`, location.origin)
|
||
url.hash = new URLSearchParams({ token }).toString()
|
||
address = url.toString()
|
||
}
|
||
return {
|
||
publicId,
|
||
configured:
|
||
root.configured === true ||
|
||
root.hasToken === true ||
|
||
root.tokenConfigured === true ||
|
||
Boolean(token || address),
|
||
updatedAt: typeof root.updatedAt === 'string' ? root.updatedAt : undefined,
|
||
address,
|
||
}
|
||
}
|
||
|
||
function ObsAccessPanel({ component }: { component: ComponentSummary }) {
|
||
const [state, setState] = useState<TokenState>({
|
||
publicId: component.publicId,
|
||
configured: false,
|
||
})
|
||
const [busy, setBusy] = useState(false)
|
||
const [flash, setFlash] = useState<Flash>()
|
||
usePwaUpdateBlocker(
|
||
`obs-token:${component.id}`,
|
||
'复制并妥善保存本次生成的 OBS 地址',
|
||
busy || Boolean(state.address),
|
||
)
|
||
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
setState({ publicId: component.publicId, configured: false })
|
||
setFlash(undefined)
|
||
api<unknown>(`/api/v1/components/${encodeURIComponent(component.id)}/token`)
|
||
.then(payload => {
|
||
if (!cancelled) setState(tokenState(payload, component.publicId))
|
||
})
|
||
.catch(reason => {
|
||
if (cancelled) return
|
||
setState({ publicId: component.publicId, configured: false })
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '无法读取当前组件的 OBS 令牌状态') })
|
||
})
|
||
return () => {
|
||
cancelled = true
|
||
}
|
||
}, [component.id, component.publicId])
|
||
|
||
const rotate = async () => {
|
||
if (
|
||
state.configured &&
|
||
!window.confirm('轮换后，所有使用旧地址的 OBS 浏览器源会立即失效。确定继续吗？')
|
||
)
|
||
return
|
||
setBusy(true)
|
||
setFlash(undefined)
|
||
try {
|
||
const payload = await api<unknown>(
|
||
`/api/v1/components/${encodeURIComponent(component.id)}/token`,
|
||
json('POST'),
|
||
)
|
||
const next = tokenState(payload, component.publicId)
|
||
setState(next)
|
||
setFlash({
|
||
kind: 'success',
|
||
text: '新 OBS 令牌已生成。请立即复制，离开本页后不会再次显示明文令牌。',
|
||
})
|
||
} catch (reason) {
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '无法轮换 OBS 令牌') })
|
||
} finally {
|
||
setBusy(false)
|
||
}
|
||
}
|
||
|
||
const copy = async () => {
|
||
if (!state.address) return
|
||
const copied = await copyToClipboard(state.address)
|
||
setFlash(
|
||
copied
|
||
? { kind: 'success', text: 'OBS 浏览器源地址已复制。' }
|
||
: { kind: 'error', text: '浏览器阻止了复制，请手工选择下方地址。' },
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Panel
|
||
title="OBS 只读访问"
|
||
description="令牌仅能订阅这一组件；轮换不会影响账户登录或其他组件。"
|
||
>
|
||
<div className="token-summary">
|
||
<div>
|
||
<small>访问状态</small>
|
||
<b>{state.configured ? '已生成令牌' : '尚未生成'}</b>
|
||
</div>
|
||
<div>
|
||
<small>组件公开标识</small>
|
||
<code>{state.publicId}</code>
|
||
</div>
|
||
{state.updatedAt && (
|
||
<div>
|
||
<small>最近轮换</small>
|
||
<b>{formatDate(state.updatedAt)}</b>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<FlashMessage flash={flash} />
|
||
{state.address && (
|
||
<label className="secret-address">
|
||
本次生成的 OBS 地址
|
||
<input readOnly value={state.address} onFocus={event => event.currentTarget.select()} />
|
||
</label>
|
||
)}
|
||
<div className="form-actions">
|
||
<button
|
||
type="button"
|
||
className={state.configured ? 'danger' : ''}
|
||
disabled={busy}
|
||
onClick={() => void rotate()}
|
||
>
|
||
{busy ? '正在生成…' : state.configured ? '轮换令牌' : '生成 OBS 地址'}
|
||
</button>
|
||
{state.address && (
|
||
<button type="button" className="secondary" onClick={() => void copy()}>
|
||
复制地址
|
||
</button>
|
||
)}
|
||
</div>
|
||
</Panel>
|
||
)
|
||
}
|
||
|
||
function TestEvents({ componentId }: { componentId: string }) {
|
||
const [kind, setKind] = useState<'danmaku' | 'enter' | 'gift'>('danmaku')
|
||
const [uid, setUid] = useState('test-viewer')
|
||
const [name, setName] = useState('测试观众')
|
||
const [text, setText] = useState('今天也要闪闪发光！')
|
||
const [giftName, setGiftName] = useState('小花花')
|
||
const [quantity, setQuantity] = useState(1)
|
||
const [battery, setBattery] = useState(100)
|
||
const [flash, setFlash] = useState<Flash>()
|
||
const [busy, setBusy] = useState(false)
|
||
|
||
const submit = async (event: FormEvent) => {
|
||
event.preventDefault()
|
||
setBusy(true)
|
||
setFlash(undefined)
|
||
try {
|
||
await api(
|
||
`/api/v1/components/${encodeURIComponent(componentId)}/test-events`,
|
||
json('POST', {
|
||
kind,
|
||
uid,
|
||
name,
|
||
...(kind === 'danmaku' ? { text } : {}),
|
||
...(kind === 'gift' ? { giftName, quantity, battery } : {}),
|
||
}),
|
||
)
|
||
setFlash({ kind: 'success', text: '测试事件已发送到当前组件。' })
|
||
} catch (reason) {
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '测试事件发送失败') })
|
||
} finally {
|
||
setBusy(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Panel
|
||
title="事件测试"
|
||
description="模拟事件只进入当前用户、当前组件，不会向 Bilibili 发送消息。"
|
||
>
|
||
<form className="field-grid two-columns" onSubmit={submit}>
|
||
<label>
|
||
事件类型
|
||
<select value={kind} onChange={event => setKind(event.target.value as typeof kind)}>
|
||
<option value="danmaku">弹幕</option>
|
||
<option value="enter">进入直播间</option>
|
||
<option value="gift">礼物</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
测试 UID
|
||
<input required value={uid} onChange={event => setUid(event.target.value)} />
|
||
</label>
|
||
<label>
|
||
测试昵称
|
||
<input required value={name} onChange={event => setName(event.target.value)} />
|
||
</label>
|
||
{kind === 'danmaku' && (
|
||
<label>
|
||
弹幕内容
|
||
<input required value={text} onChange={event => setText(event.target.value)} />
|
||
</label>
|
||
)}
|
||
{kind === 'gift' && (
|
||
<>
|
||
<label>
|
||
礼物名称
|
||
<input
|
||
required
|
||
value={giftName}
|
||
onChange={event => setGiftName(event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
数量
|
||
<input
|
||
required
|
||
type="number"
|
||
min="1"
|
||
value={quantity}
|
||
onChange={event => setQuantity(+event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
电池数
|
||
<input
|
||
required
|
||
type="number"
|
||
min="0"
|
||
value={battery}
|
||
onChange={event => setBattery(+event.target.value)}
|
||
/>
|
||
</label>
|
||
</>
|
||
)}
|
||
<FlashMessage flash={flash} />
|
||
<div className="form-actions align-end span-all">
|
||
<button disabled={busy}>{busy ? '正在发送…' : '触发测试事件'}</button>
|
||
</div>
|
||
</form>
|
||
</Panel>
|
||
)
|
||
}
|
||
|
||
function ComponentList({
|
||
components,
|
||
selectedId,
|
||
onSelect,
|
||
}: {
|
||
components: ComponentSummary[]
|
||
selectedId?: string
|
||
onSelect: (component: ComponentSummary) => void
|
||
}) {
|
||
return (
|
||
<aside className="component-sidebar jade-panel">
|
||
<div className="component-sidebar-heading">
|
||
<p className="eyebrow">COMPONENTS</p>
|
||
<h2>我的组件</h2>
|
||
</div>
|
||
{components.length === 0 ? (
|
||
<div className="empty-state">
|
||
<b>还没有组件</b>
|
||
<p>账户初始化完成后，服务会为你创建默认弹幕姬。</p>
|
||
</div>
|
||
) : (
|
||
<div className="component-list">
|
||
{components.map(component => (
|
||
<button
|
||
type="button"
|
||
className={component.id === selectedId ? 'selected' : ''}
|
||
onClick={() => onSelect(component)}
|
||
key={component.id}
|
||
>
|
||
<span className="component-icon" aria-hidden="true">
|
||
{isDanmakuKind(component.kind) ? '弹' : '件'}
|
||
</span>
|
||
<span>
|
||
<b>{component.name}</b>
|
||
<small>{isDanmakuKind(component.kind) ? '直播弹幕姬' : component.kind}</small>
|
||
</span>
|
||
<i className={component.enabled === false ? 'disabled' : 'enabled'} />
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
<div className="future-components">
|
||
<span>即将支持</span>
|
||
<small>礼物展示 · 点歌姬</small>
|
||
</div>
|
||
</aside>
|
||
)
|
||
}
|
||
|
||
export function ComponentsPage({
|
||
user,
|
||
onLogout,
|
||
}: {
|
||
user: AuthUser
|
||
onLogout: () => Promise<void>
|
||
}) {
|
||
const [components, setComponents] = useState<ComponentSummary[]>([])
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
const [settings, setSettings] = useState<OverlaySettings>()
|
||
const [source, setSource] = useState<CookieCloudSource>()
|
||
const [loading, setLoading] = useState(true)
|
||
const [saving, setSaving] = useState(false)
|
||
const [flash, setFlash] = useState<Flash>()
|
||
const selectedIdRef = useRef<string | undefined>(undefined)
|
||
const settingsRequestRef = useRef(0)
|
||
const savedSettingsRef = useRef<string | undefined>(undefined)
|
||
|
||
const selected = useMemo(
|
||
() => components.find(component => component.id === selectedId),
|
||
[components, selectedId],
|
||
)
|
||
const settingsDirty = Boolean(settings) && JSON.stringify(settings) !== savedSettingsRef.current
|
||
usePwaUpdateBlocker('component-settings', '保存或还原当前组件设置', saving || settingsDirty)
|
||
|
||
const loadComponentSettings = useCallback(async (component: ComponentSummary) => {
|
||
const requestId = ++settingsRequestRef.current
|
||
setSaving(false)
|
||
setSettings(undefined)
|
||
savedSettingsRef.current = undefined
|
||
setFlash(undefined)
|
||
try {
|
||
const payload = await api<unknown>(
|
||
`/api/v1/components/${encodeURIComponent(component.id)}/settings`,
|
||
)
|
||
if (requestId !== settingsRequestRef.current || selectedIdRef.current !== component.id) return
|
||
const next = { ...defaultOverlaySettings, ...normalizeSettings(payload) }
|
||
savedSettingsRef.current = JSON.stringify(next)
|
||
setSettings(next)
|
||
} catch (reason) {
|
||
if (requestId !== settingsRequestRef.current || selectedIdRef.current !== component.id) return
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '无法读取组件设置') })
|
||
}
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
const load = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const [componentPayload, sourcePayload] = await Promise.all([
|
||
api<unknown>('/api/v1/components'),
|
||
api<unknown>('/api/v1/source'),
|
||
])
|
||
if (cancelled) return
|
||
const nextComponents = normalizeComponents(componentPayload)
|
||
setComponents(nextComponents)
|
||
setSource(normalizeSource(sourcePayload))
|
||
const requested = new URLSearchParams(location.search).get('component')
|
||
const first =
|
||
nextComponents.find(component => component.id === requested) ??
|
||
nextComponents.find(component => isDanmakuKind(component.kind)) ??
|
||
nextComponents[0]
|
||
if (first) {
|
||
selectedIdRef.current = first.id
|
||
setSelectedId(first.id)
|
||
await loadComponentSettings(first)
|
||
}
|
||
} catch (reason) {
|
||
if (!cancelled)
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '控制台数据加载失败') })
|
||
} finally {
|
||
if (!cancelled) setLoading(false)
|
||
}
|
||
}
|
||
void load()
|
||
return () => {
|
||
cancelled = true
|
||
settingsRequestRef.current += 1
|
||
}
|
||
}, [loadComponentSettings])
|
||
|
||
const choose = (component: ComponentSummary) => {
|
||
selectedIdRef.current = component.id
|
||
setSelectedId(component.id)
|
||
const url = new URL(location.href)
|
||
url.searchParams.set('component', component.id)
|
||
history.replaceState(null, '', url)
|
||
void loadComponentSettings(component)
|
||
}
|
||
|
||
const saveSettings = async () => {
|
||
if (!selected || !settings) return
|
||
const componentId = selected.id
|
||
const requestId = settingsRequestRef.current
|
||
setSaving(true)
|
||
setFlash(undefined)
|
||
try {
|
||
const payload = await api<unknown>(
|
||
`/api/v1/components/${encodeURIComponent(componentId)}/settings`,
|
||
json('PUT', settings),
|
||
)
|
||
if (requestId !== settingsRequestRef.current || selectedIdRef.current !== componentId) return
|
||
const next = { ...defaultOverlaySettings, ...normalizeSettings(payload) }
|
||
savedSettingsRef.current = JSON.stringify(next)
|
||
setSettings(next)
|
||
setFlash({ kind: 'success', text: '组件设置已保存，并实时同步到已连接的 OBS。' })
|
||
} catch (reason) {
|
||
if (requestId !== settingsRequestRef.current || selectedIdRef.current !== componentId) return
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '组件设置保存失败') })
|
||
} finally {
|
||
if (requestId === settingsRequestRef.current && selectedIdRef.current === componentId)
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<ControlLayout user={user} active="components" onLogout={onLogout}>
|
||
<div className="dashboard-grid">
|
||
<ComponentList components={components} selectedId={selectedId} onSelect={choose} />
|
||
<div className="dashboard-content">
|
||
{loading && <div className="loading-panel jade-panel">正在展开云台…</div>}
|
||
<FlashMessage flash={flash} />
|
||
{!loading && selected && (
|
||
<>
|
||
<div className="page-heading">
|
||
<div>
|
||
<p className="eyebrow">{selected.kind.toUpperCase()}</p>
|
||
<h1>{selected.name}</h1>
|
||
</div>
|
||
<span
|
||
className={`status-chip ${selected.enabled === false ? 'offline' : 'online'}`}
|
||
>
|
||
{selected.enabled === false ? '已停用' : '运行中'}
|
||
</span>
|
||
</div>
|
||
{isDanmakuKind(selected.kind) && settings ? (
|
||
<>
|
||
<Panel title="弹幕姬设置" description="每一项都独立保存在当前用户的组件下。">
|
||
<SettingsEditor
|
||
settings={settings}
|
||
onChange={setSettings}
|
||
onSave={saveSettings}
|
||
saving={saving}
|
||
/>
|
||
</Panel>
|
||
<OverlayPreview settings={settings} />
|
||
</>
|
||
) : (
|
||
<Panel title="组件设置">
|
||
<div className="empty-state">该组件类型的设置编辑器尚未安装。</div>
|
||
</Panel>
|
||
)}
|
||
<ObsAccessPanel component={selected} key={selected.id} />
|
||
<TestEvents componentId={selected.id} />
|
||
</>
|
||
)}
|
||
{!loading && !selected && (
|
||
<Panel title="欢迎来到直播云台">
|
||
<div className="empty-state">当前账户还没有可配置的组件。</div>
|
||
</Panel>
|
||
)}
|
||
{source && <SourceEditor source={source} onSaved={setSource} />}
|
||
</div>
|
||
</div>
|
||
</ControlLayout>
|
||
)
|
||
}
|
||
|
||
function formatDate(value?: string): string {
|
||
if (!value) return '永久'
|
||
const date = new Date(value)
|
||
if (Number.isNaN(date.getTime())) return value
|
||
return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
|
||
}
|
||
|
||
function invitationStatus(invitation: Invitation): { label: string; className: string } {
|
||
if (invitation.revokedAt) return { label: '已撤销', className: 'offline' }
|
||
if (invitation.expiresAt && new Date(invitation.expiresAt).getTime() <= Date.now())
|
||
return { label: '已过期', className: 'offline' }
|
||
if (invitation.consumedAt) return { label: '已使用', className: 'offline' }
|
||
return { label: '可使用', className: 'online' }
|
||
}
|
||
|
||
export function InvitationsPage({
|
||
user,
|
||
onLogout,
|
||
}: {
|
||
user: AuthUser
|
||
onLogout: () => Promise<void>
|
||
}) {
|
||
const [invitations, setInvitations] = useState<Invitation[]>([])
|
||
const [roomId, setRoomId] = useState('')
|
||
const [expiresInHours, setExpiresInHours] = useState(24)
|
||
const [newCode, setNewCode] = useState('')
|
||
const [busy, setBusy] = useState(false)
|
||
const [flash, setFlash] = useState<Flash>()
|
||
usePwaUpdateBlocker(
|
||
'invitation-code',
|
||
'复制并妥善保存本次生成的一次性邀请码',
|
||
busy || Boolean(newCode),
|
||
)
|
||
|
||
const load = useCallback(async () => {
|
||
const payload = await api<unknown>('/api/v1/invitations')
|
||
setInvitations(normalizeInvitations(payload))
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
void load().catch(reason =>
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '邀请码读取失败') }),
|
||
)
|
||
}, [load])
|
||
|
||
const create = async (event: FormEvent) => {
|
||
event.preventDefault()
|
||
setBusy(true)
|
||
setFlash(undefined)
|
||
setNewCode('')
|
||
try {
|
||
const payload = await api<unknown>(
|
||
'/api/v1/invitations',
|
||
json('POST', { roomId: roomId.trim(), expiresInHours }),
|
||
)
|
||
const root =
|
||
payload && typeof payload === 'object' ? (payload as Record<string, unknown>) : {}
|
||
const invitation =
|
||
root.invitation && typeof root.invitation === 'object'
|
||
? (root.invitation as Record<string, unknown>)
|
||
: root
|
||
const code = String(invitation.code ?? root.code ?? '')
|
||
setNewCode(code)
|
||
setFlash({ kind: 'success', text: '邀请码已创建。明文只显示这一次。' })
|
||
await load()
|
||
} catch (reason) {
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '邀请码创建失败') })
|
||
} finally {
|
||
setBusy(false)
|
||
}
|
||
}
|
||
|
||
const revoke = async (invitation: Invitation) => {
|
||
if (!window.confirm('确定撤销这个邀请码吗？尚未完成的注册会立即失效。')) return
|
||
setFlash(undefined)
|
||
try {
|
||
await api(`/api/v1/invitations/${encodeURIComponent(invitation.id)}`, json('DELETE'))
|
||
setFlash({ kind: 'success', text: '邀请码已撤销。' })
|
||
await load()
|
||
} catch (reason) {
|
||
setFlash({ kind: 'error', text: errorMessage(reason, '邀请码撤销失败') })
|
||
}
|
||
}
|
||
|
||
const registerAddress = useMemo(() => {
|
||
if (!newCode) return ''
|
||
const url = new URL('/control/register', location.origin)
|
||
url.hash = new URLSearchParams({ invite: newCode }).toString()
|
||
return url.toString()
|
||
}, [newCode])
|
||
|
||
return (
|
||
<ControlLayout user={user} active="invitations" onLogout={onLogout}>
|
||
<div className="admin-content">
|
||
<div className="page-heading">
|
||
<div>
|
||
<p className="eyebrow">SYSTEM ADMIN</p>
|
||
<h1>邀请码管理</h1>
|
||
</div>
|
||
<span className="status-chip online">仅系统管理员</span>
|
||
</div>
|
||
<FlashMessage flash={flash} />
|
||
<Panel
|
||
title="创建邀请码"
|
||
description="默认单次使用、24 小时有效；邀请码只用于注册，不能用于日常登录。"
|
||
>
|
||
<form className="field-grid two-columns" onSubmit={create}>
|
||
<label>
|
||
绑定的 Bilibili 直播间 ID
|
||
<input
|
||
required
|
||
inputMode="numeric"
|
||
value={roomId}
|
||
onChange={event => setRoomId(event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
有效小时数
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="720"
|
||
value={expiresInHours}
|
||
onChange={event => setExpiresInHours(+event.target.value)}
|
||
/>
|
||
</label>
|
||
<div className="form-actions align-end span-all">
|
||
<button disabled={busy}>{busy ? '正在创建…' : '创建邀请码'}</button>
|
||
</div>
|
||
</form>
|
||
{newCode && (
|
||
<div className="one-time-secret">
|
||
<b>仅显示一次</b>
|
||
<code>{newCode}</code>
|
||
<input
|
||
readOnly
|
||
value={registerAddress}
|
||
onFocus={event => event.currentTarget.select()}
|
||
/>
|
||
<div className="form-actions">
|
||
<button
|
||
type="button"
|
||
className="secondary"
|
||
onClick={() => void copyToClipboard(newCode)}
|
||
>
|
||
复制邀请码
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="secondary"
|
||
onClick={() => void copyToClipboard(registerAddress)}
|
||
>
|
||
复制注册链接
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Panel>
|
||
<Panel
|
||
title="历史邀请码"
|
||
description="列表不包含邀请码明文，只显示可审计的状态和使用次数。"
|
||
>
|
||
<div className="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>直播间</th>
|
||
<th>邀请码前缀</th>
|
||
<th>创建时间</th>
|
||
<th>有效期</th>
|
||
<th>状态</th>
|
||
<th />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{invitations.map(invitation => {
|
||
const status = invitationStatus(invitation)
|
||
return (
|
||
<tr key={invitation.id}>
|
||
<td>
|
||
<code>{invitation.roomId}</code>
|
||
</td>
|
||
<td>
|
||
<code>{invitation.codePrefix || '—'}</code>
|
||
</td>
|
||
<td>{formatDate(invitation.createdAt)}</td>
|
||
<td>{formatDate(invitation.expiresAt)}</td>
|
||
<td>
|
||
<span className={`status-chip ${status.className}`}>{status.label}</span>
|
||
</td>
|
||
<td>
|
||
{status.className === 'online' && (
|
||
<button
|
||
type="button"
|
||
className="danger small"
|
||
onClick={() => void revoke(invitation)}
|
||
>
|
||
撤销
|
||
</button>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
{invitations.length === 0 && (
|
||
<tr>
|
||
<td colSpan={6}>
|
||
<div className="empty-state">尚未创建邀请码。</div>
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</Panel>
|
||
</div>
|
||
</ControlLayout>
|
||
)
|
||
}
|
||
|
||
export function ForbiddenPage({
|
||
user,
|
||
onLogout,
|
||
}: {
|
||
user: AuthUser
|
||
onLogout: () => Promise<void>
|
||
}) {
|
||
return (
|
||
<ControlLayout user={user} active="components" onLogout={onLogout}>
|
||
<div className="admin-content">
|
||
<Panel title="没有访问权限">
|
||
<p>邀请码管理仅对系统管理员开放。</p>
|
||
<a className="button-link" href="/control/">
|
||
返回我的组件
|
||
</a>
|
||
</Panel>
|
||
</div>
|
||
</ControlLayout>
|
||
)
|
||
}
|
||
|
||
export function isUnauthorized(error: unknown): boolean {
|
||
return error instanceof ApiError && error.status === 401
|
||
}
|