351 lines
19 KiB
React
351 lines
19 KiB
React
import { useEffect, useState } from 'react'
|
||
import { useDataProvider, useGetList } from 'ra-core'
|
||
import {
|
||
Alert,
|
||
Box,
|
||
Button,
|
||
Checkbox,
|
||
CircularProgress,
|
||
Collapse,
|
||
Dialog,
|
||
DialogActions,
|
||
DialogContent,
|
||
DialogTitle,
|
||
FormControlLabel,
|
||
IconButton,
|
||
InputAdornment,
|
||
MenuItem,
|
||
Paper,
|
||
Stack,
|
||
Switch,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableContainer,
|
||
TableHead,
|
||
TableRow,
|
||
TextField,
|
||
Typography,
|
||
} from '@mui/material'
|
||
import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined'
|
||
import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
|
||
import ExpandMoreOutlined from '@mui/icons-material/ExpandMoreOutlined'
|
||
import PlayArrowOutlined from '@mui/icons-material/PlayArrowOutlined'
|
||
import SecurityOutlined from '@mui/icons-material/SecurityOutlined'
|
||
import StopOutlined from '@mui/icons-material/StopOutlined'
|
||
import UpgradeOutlined from '@mui/icons-material/UpgradeOutlined'
|
||
|
||
const aliasPattern = /^[a-z0-9][a-z0-9-]{0,31}$/
|
||
const platformOptions = ['windows', 'linux', 'macos']
|
||
const brandOptions = ['Chrome', 'Edge', 'Opera', 'Vivaldi']
|
||
const spoofingOptions = ['font', 'audio', 'canvas', 'clientrects', 'gpu']
|
||
|
||
const statusLabels = {
|
||
created: '已创建',
|
||
running: '运行中',
|
||
exited: '已停止',
|
||
restarting: '重启中',
|
||
paused: '已暂停',
|
||
missing: '未部署',
|
||
}
|
||
|
||
const emptyForm = {
|
||
name: '',
|
||
alias: '',
|
||
gateway: '',
|
||
image_version: '',
|
||
seed: '1000',
|
||
platform: '',
|
||
platform_version: '',
|
||
brand: '',
|
||
brand_version: '',
|
||
hardware_concurrency: '',
|
||
lang: '',
|
||
accept_lang: '',
|
||
timezone: '',
|
||
proxy_server: '',
|
||
disable_non_proxied_udp: false,
|
||
disable_spoofing: [],
|
||
}
|
||
|
||
function buildFingerprint(form) {
|
||
const fingerprint = { seed: Number(form.seed) }
|
||
const optionalText = {
|
||
platform: form.platform,
|
||
platform_version: form.platform_version,
|
||
brand: form.brand,
|
||
brand_version: form.brand_version,
|
||
lang: form.lang,
|
||
accept_lang: form.accept_lang,
|
||
timezone: form.timezone,
|
||
proxy_server: form.proxy_server,
|
||
}
|
||
for (const [key, value] of Object.entries(optionalText)) {
|
||
if (value !== '') fingerprint[key] = value
|
||
}
|
||
if (form.hardware_concurrency !== '') fingerprint.hardware_concurrency = Number(form.hardware_concurrency)
|
||
if (form.disable_non_proxied_udp) fingerprint.disable_non_proxied_udp = true
|
||
if (form.disable_spoofing.length > 0) fingerprint.disable_spoofing = form.disable_spoofing.join(',')
|
||
return fingerprint
|
||
}
|
||
|
||
function Status({ state }) {
|
||
const label = Object.hasOwn(statusLabels, state) ? statusLabels[state] : undefined
|
||
const color = state === 'running' ? 'success.main' : state === 'exited' ? 'warning.main' : 'text.secondary'
|
||
return <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, color, fontWeight: 650 }}><Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'currentColor' }} /><Box><Typography component="span" fontWeight="inherit">{label || '未知状态'}</Typography>{label ? null : <Typography component="span" variant="caption" color="text.secondary" sx={{ display: 'block' }}>{state}</Typography>}</Box></Box>
|
||
}
|
||
|
||
function RuntimeActions({ runtime, busy, onAction }) {
|
||
const running = runtime.state === 'running'
|
||
return (
|
||
<Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: 'wrap' }}>
|
||
<Button aria-label={`启动 ${runtime.name}`} variant="outlined" size="small" disabled={busy || running} startIcon={<PlayArrowOutlined />} onClick={() => onAction(runtime, 'start')}>启动</Button>
|
||
<Button aria-label={`停止 ${runtime.name}`} variant="outlined" color="warning" size="small" disabled={busy || !running} startIcon={<StopOutlined />} onClick={() => onAction(runtime, 'stop')}>停止</Button>
|
||
<Button aria-label={`升级 ${runtime.name}`} variant="outlined" size="small" disabled={busy} startIcon={<UpgradeOutlined />} onClick={() => onAction(runtime, 'upgrade')}>升级</Button>
|
||
<Button aria-label={`回收 ${runtime.name}`} variant="outlined" color="error" size="small" disabled={busy} startIcon={<DeleteOutlined />} onClick={() => onAction(runtime, 'recycle')}>回收</Button>
|
||
</Stack>
|
||
)
|
||
}
|
||
|
||
function Copyable({ value }) {
|
||
const copy = () => navigator.clipboard?.writeText(value)
|
||
return (
|
||
<Typography component="code" variant="body2" sx={{ overflowWrap: 'anywhere', display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
|
||
{value}
|
||
<IconButton aria-label={`复制 ${value}`} size="small" onClick={copy}><ContentCopyOutlined sx={{ fontSize: 15 }} /></IconButton>
|
||
</Typography>
|
||
)
|
||
}
|
||
|
||
function CreateForm({ gateways, images, onSubmit, busy }) {
|
||
const [form, setForm] = useState(emptyForm)
|
||
const [advanced, setAdvanced] = useState(false)
|
||
const enabledImages = images.filter(image => image.enabled)
|
||
const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
|
||
const toggleSpoofing = option => setForm(current => ({
|
||
...current,
|
||
disable_spoofing: current.disable_spoofing.includes(option)
|
||
? current.disable_spoofing.filter(item => item !== option)
|
||
: [...current.disable_spoofing, option],
|
||
}))
|
||
|
||
useEffect(() => {
|
||
if (form.gateway === '' && gateways.length > 0) update('gateway', gateways[0].name)
|
||
}, [gateways, form.gateway])
|
||
useEffect(() => {
|
||
if (form.image_version === '' && enabledImages.length > 0) update('image_version', enabledImages[0].version)
|
||
}, [enabledImages, form.image_version])
|
||
|
||
const seedNumber = Number(form.seed)
|
||
const valid = form.name.trim() !== '' && aliasPattern.test(form.alias) && form.gateway !== '' &&
|
||
form.image_version !== '' && Number.isInteger(seedNumber) && seedNumber >= 1 && seedNumber <= 2147483647
|
||
|
||
const submit = event => {
|
||
event.preventDefault()
|
||
if (!valid) return
|
||
onSubmit({
|
||
alias: form.alias,
|
||
name: form.name.trim(),
|
||
gateway: form.gateway,
|
||
image_version: form.image_version,
|
||
fingerprint: buildFingerprint(form),
|
||
})
|
||
setForm(current => ({ ...emptyForm, gateway: current.gateway, image_version: current.image_version }))
|
||
}
|
||
|
||
const label = (htmlFor, text, required = false) => (
|
||
<Typography component="label" htmlFor={htmlFor} variant="body2" fontWeight={650}>
|
||
{text} {required ? <Box component="span" aria-hidden="true" color="error.main">*</Box> : null}
|
||
</Typography>
|
||
)
|
||
|
||
return (
|
||
<Paper component="form" onSubmit={submit} variant="outlined" sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'repeat(2, minmax(0, 1fr))', lg: 'repeat(3, minmax(0, 1fr))' }, gap: 3, alignItems: 'end', p: { xs: 2.5, md: 3 }, mb: 3.5 }}>
|
||
<Stack spacing={1}>
|
||
{label('env-name', '环境名称', true)}
|
||
<TextField id="env-name" required slotProps={{ htmlInput: { 'aria-label': '环境名称', maxLength: 64 } }} value={form.name} onChange={event => update('name', event.target.value)} placeholder="支持中文，如：店铺一号" />
|
||
</Stack>
|
||
<Stack spacing={1}>
|
||
{label('env-alias', '别名（容器标识）', true)}
|
||
<TextField id="env-alias" required slotProps={{ htmlInput: { 'aria-label': '别名', pattern: '[a-z0-9][a-z0-9-]{0,31}' } }} value={form.alias} onChange={event => update('alias', event.target.value)} placeholder="如：shop-01" helperText="用于容器名、数据卷与 API 路径" />
|
||
</Stack>
|
||
<Stack spacing={1}>
|
||
{label('env-gateway', '网关', true)}
|
||
<TextField id="env-gateway" select required slotProps={{ htmlInput: { 'aria-label': '网关' } }} value={form.gateway} onChange={event => update('gateway', event.target.value)} disabled={gateways.length === 0} helperText={gateways.length === 0 ? '请先在「网关管理」注册网关' : ' '}>
|
||
{gateways.map(gateway => <MenuItem key={gateway.name} value={gateway.name}>{gateway.name}</MenuItem>)}
|
||
</TextField>
|
||
</Stack>
|
||
<Stack spacing={1}>
|
||
{label('env-version', '镜像版本', true)}
|
||
<TextField id="env-version" select required slotProps={{ htmlInput: { 'aria-label': '镜像版本' } }} value={form.image_version} onChange={event => update('image_version', event.target.value)} disabled={enabledImages.length === 0} helperText={enabledImages.length === 0 ? '请先在「镜像版本」添加并启用' : ' '}>
|
||
{enabledImages.map(image => <MenuItem key={image.version} value={image.version}>{image.version}</MenuItem>)}
|
||
</TextField>
|
||
</Stack>
|
||
<Stack spacing={1}>
|
||
{label('env-seed', 'Fingerprint Seed', true)}
|
||
<TextField id="env-seed" required type="number" slotProps={{ htmlInput: { 'aria-label': 'Fingerprint Seed', min: 1, max: 2147483647 } }} value={form.seed} onChange={event => update('seed', event.target.value)} />
|
||
</Stack>
|
||
|
||
<Stack spacing={1} sx={{ gridColumn: { md: '1 / -1' } }}>
|
||
<Button type="button" variant="text" onClick={() => setAdvanced(value => !value)} endIcon={<ExpandMoreOutlined sx={{ transform: advanced ? 'rotate(180deg)' : 'none', transition: theme => theme.transitions.create('transform') }} />} sx={{ justifySelf: 'start' }}>
|
||
高级指纹参数{advanced ? '（收起）' : '（展开）'}
|
||
</Button>
|
||
<Collapse in={advanced} sx={{ width: 1 }}>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: 'minmax(0, 1fr)', md: 'repeat(3, minmax(0, 1fr))' }, gap: 3, pt: 1 }}>
|
||
<TextField label="操作系统 platform" select value={form.platform} onChange={event => update('platform', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '操作系统 platform' } }}>
|
||
<MenuItem value="">默认</MenuItem>
|
||
{platformOptions.map(option => <MenuItem key={option} value={option}>{option}</MenuItem>)}
|
||
</TextField>
|
||
<TextField label="系统版本 platform-version" value={form.platform_version} onChange={event => update('platform_version', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '系统版本 platform-version' } }} placeholder="如 11.0.0" />
|
||
<TextField label="浏览器品牌 brand" select value={form.brand} onChange={event => update('brand', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '浏览器品牌 brand' } }}>
|
||
<MenuItem value="">默认 Chromium</MenuItem>
|
||
{brandOptions.map(option => <MenuItem key={option} value={option}>{option}</MenuItem>)}
|
||
</TextField>
|
||
<TextField label="品牌版本 brand-version" value={form.brand_version} onChange={event => update('brand_version', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '品牌版本 brand-version' } }} placeholder="如 132.0.6834.159" />
|
||
<TextField label="CPU 核心数 hardware-concurrency" type="number" value={form.hardware_concurrency} onChange={event => update('hardware_concurrency', event.target.value)} slotProps={{ htmlInput: { 'aria-label': 'CPU 核心数 hardware-concurrency', min: 1, max: 128 } }} placeholder="留空由种子生成" />
|
||
<TextField label="语言 lang" value={form.lang} onChange={event => update('lang', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '语言 lang' } }} placeholder="如 zh-CN" />
|
||
<TextField label="接受语言 accept-lang" value={form.accept_lang} onChange={event => update('accept_lang', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '接受语言 accept-lang' } }} placeholder="如 zh-CN,en-US" />
|
||
<TextField label="时区 timezone" value={form.timezone} onChange={event => update('timezone', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '时区 timezone' } }} placeholder="如 Asia/Shanghai" />
|
||
<TextField label="代理 proxy-server" value={form.proxy_server} onChange={event => update('proxy_server', event.target.value)} slotProps={{ htmlInput: { 'aria-label': '代理 proxy-server' } }} placeholder="如 socks5://127.0.0.1:1080" />
|
||
<FormControlLabel control={<Switch checked={form.disable_non_proxied_udp} onChange={event => update('disable_non_proxied_udp', event.target.checked)} slotProps={{ input: { 'aria-label': '禁用非代理 UDP' } }} />} label="禁用非代理 UDP（WebRTC）" sx={{ gridColumn: { md: 'span 2' } }} />
|
||
<Stack spacing={0.5}>
|
||
<Typography variant="body2" fontWeight={650}>禁用指纹伪装 disable-spoofing</Typography>
|
||
<Stack direction="row" spacing={0.5} useFlexGap sx={{ flexWrap: 'wrap' }}>
|
||
{spoofingOptions.map(option => (
|
||
<FormControlLabel key={option} control={<Checkbox size="small" checked={form.disable_spoofing.includes(option)} onChange={() => toggleSpoofing(option)} slotProps={{ input: { 'aria-label': `禁用伪装 ${option}` } }} />} label={option} />
|
||
))}
|
||
</Stack>
|
||
</Stack>
|
||
</Box>
|
||
</Collapse>
|
||
</Stack>
|
||
|
||
<Button type="submit" variant="contained" size="large" disabled={!valid || busy} sx={{ minHeight: 56, gridColumn: { md: '1 / -1', lg: 'auto' } }}>{busy ? '创建中…' : '创建环境'}</Button>
|
||
</Paper>
|
||
)
|
||
}
|
||
|
||
function UpgradeDialog({ target, images, busy, onClose, onConfirm }) {
|
||
const [version, setVersion] = useState('')
|
||
const enabledImages = images.filter(image => image.enabled)
|
||
useEffect(() => {
|
||
setVersion('')
|
||
}, [target])
|
||
return (
|
||
<Dialog open={target !== null} onClose={busy ? undefined : onClose} aria-label="升级镜像版本">
|
||
<DialogTitle>升级 {target ? `${target.name}（${target.alias}）` : ''}</DialogTitle>
|
||
<DialogContent sx={{ minWidth: { xs: 300, sm: 420 } }}>
|
||
<Stack spacing={2} sx={{ pt: 1 }}>
|
||
<Typography variant="body2" color="text.secondary">容器将按新镜像重建，Profile 数据卷与指纹参数保持不变。</Typography>
|
||
<TextField select fullWidth label="目标镜像版本" value={version} onChange={event => setVersion(event.target.value)} slotProps={{ htmlInput: { 'aria-label': '目标镜像版本' } }}>
|
||
{enabledImages.map(image => <MenuItem key={image.version} value={image.version}>{image.version}{image.version === target?.image_version ? '（当前）' : ''}</MenuItem>)}
|
||
</TextField>
|
||
</Stack>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button onClick={onClose} disabled={busy}>取消</Button>
|
||
<Button variant="contained" onClick={() => onConfirm(version)} disabled={busy || version === '' || version === target?.image_version}>{busy ? '升级中…' : '确认升级'}</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
)
|
||
}
|
||
|
||
function RuntimeTable({ runtimes, busy, onAction }) {
|
||
return (
|
||
<TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 1, display: { xs: 'none', md: 'block' } }}>
|
||
<Table sx={{ tableLayout: 'fixed', '& th, & td': { py: 2.25 } }}>
|
||
<TableHead><TableRow><TableCell width="18%">环境</TableCell><TableCell width="11%">状态</TableCell><TableCell width="13%">镜像版本</TableCell><TableCell width="22%">CDP</TableCell><TableCell width="36%">操作</TableCell></TableRow></TableHead>
|
||
<TableBody>
|
||
{runtimes.map(runtime => (
|
||
<TableRow key={runtime.alias} sx={{ '&:last-child td': { borderBottom: 0 } }}>
|
||
<TableCell><Typography fontWeight={650}>{runtime.name}</Typography><Typography variant="caption" color="text.secondary">{runtime.alias} · seed {runtime.fingerprint?.seed}</Typography></TableCell>
|
||
<TableCell><Status state={runtime.state} /></TableCell>
|
||
<TableCell><Typography variant="body2">{runtime.image_version}</Typography></TableCell>
|
||
<TableCell>{runtime.endpoint ? <Copyable value={runtime.endpoint} /> : <Typography variant="body2" color="text.secondary">—</Typography>}</TableCell>
|
||
<TableCell><RuntimeActions runtime={runtime} busy={busy === runtime.alias} onAction={onAction} /></TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
)
|
||
}
|
||
|
||
function RuntimeCards({ runtimes, busy, onAction }) {
|
||
return <Stack spacing={2} sx={{ display: { xs: 'flex', md: 'none' } }}>{runtimes.map(runtime => <Paper key={runtime.alias} variant="outlined" sx={{ p: 2.5 }}><Stack spacing={1.5}><Box><Typography fontWeight={700}>{runtime.name}</Typography><Typography variant="caption" color="text.secondary">{runtime.alias} · {runtime.image_version} · seed {runtime.fingerprint?.seed}</Typography></Box><Status state={runtime.state} />{runtime.endpoint ? <Copyable value={runtime.endpoint} /> : null}<RuntimeActions runtime={runtime} busy={busy === runtime.alias} onAction={onAction} /></Stack></Paper>)}</Stack>
|
||
}
|
||
|
||
export function BrowserList() {
|
||
const dataProvider = useDataProvider()
|
||
const [busy, setBusy] = useState('')
|
||
const [localError, setLocalError] = useState('')
|
||
const [upgradeTarget, setUpgradeTarget] = useState(null)
|
||
const { data: runtimes = [], error, isPending, refetch } = useGetList('browsers', {}, { refetchInterval: 3000 })
|
||
const { data: gateways = [] } = useGetList('gateways')
|
||
const { data: images = [] } = useGetList('browser-images')
|
||
|
||
useEffect(() => {
|
||
document.title = 'CreatorHub · 运行环境'
|
||
}, [])
|
||
|
||
async function createRuntime(data) {
|
||
setBusy('create')
|
||
setLocalError('')
|
||
try {
|
||
await dataProvider.create('browsers', { data })
|
||
await refetch()
|
||
} catch (reason) {
|
||
setLocalError(reason.message)
|
||
} finally {
|
||
setBusy('')
|
||
}
|
||
}
|
||
|
||
async function act(runtime, action) {
|
||
if (action === 'recycle' && !window.confirm(`回收 ${runtime.name}（${runtime.alias}）？容器将被删除，Profile 数据卷保留。`)) return
|
||
if (action === 'upgrade') {
|
||
setUpgradeTarget(runtime)
|
||
return
|
||
}
|
||
await runAction(runtime, action)
|
||
}
|
||
|
||
async function runAction(runtime, action, extra) {
|
||
setBusy(runtime.alias)
|
||
setLocalError('')
|
||
try {
|
||
await dataProvider.browserAction(runtime.alias, action, extra)
|
||
await refetch()
|
||
} catch (reason) {
|
||
setLocalError(reason.message)
|
||
return reason
|
||
} finally {
|
||
setBusy('')
|
||
}
|
||
}
|
||
|
||
async function confirmUpgrade(version) {
|
||
const target = upgradeTarget
|
||
const failure = await runAction(target, 'upgrade', { version })
|
||
if (!failure) setUpgradeTarget(null)
|
||
}
|
||
|
||
const message = localError || error?.message
|
||
return (
|
||
<>
|
||
<Box component="header" sx={{ mb: 4 }}><Typography variant="h1">运行环境</Typography><Typography color="text.secondary" sx={{ mt: 1, fontSize: '1.05rem' }}>启动、停止、升级并回收隔离的指纹浏览器</Typography></Box>
|
||
|
||
<CreateForm gateways={gateways} images={images} onSubmit={createRuntime} busy={busy === 'create'} />
|
||
|
||
{message ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => { setLocalError(''); refetch() }}>重试</Button>} sx={{ mb: 2.5 }}>{message}</Alert> : null}
|
||
{isPending ? <Box sx={{ display: 'grid', placeItems: 'center', minHeight: 220 }}><CircularProgress aria-label="正在加载运行环境" /></Box> : null}
|
||
{!isPending && runtimes.length === 0 ? <Paper variant="outlined" sx={{ py: 7, textAlign: 'center', color: 'text.secondary' }}>暂无运行环境，创建第一个隔离 Profile。</Paper> : null}
|
||
{!isPending && runtimes.length > 0 ? <><RuntimeTable runtimes={runtimes} busy={busy} onAction={act} /><RuntimeCards runtimes={runtimes} busy={busy} onAction={act} /></> : null}
|
||
|
||
<UpgradeDialog target={upgradeTarget} images={images} busy={busy === upgradeTarget?.alias} onClose={() => setUpgradeTarget(null)} onConfirm={confirmUpgrade} />
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mt: 4, color: '#475467' }}><SecurityOutlined color="primary" /><Typography>Docker socket 仅由受限网关访问，镜像与参数由平台下发</Typography></Box>
|
||
</>
|
||
)
|
||
}
|