330 lines
15 KiB
TypeScript
330 lines
15 KiB
TypeScript
// Manus-style 沙箱管理 UI(两张页面:Dashboard + Per-user view)
|
|
// 全部内嵌,靠 Alpine.js + Tailwind CDN,零构建。
|
|
|
|
export const DASHBOARD_HTML = String.raw`<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lobe Sandbox · 管理台</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
body { background: #0a0e1a; color: #e5e7eb; font-family: ui-sans-serif, system-ui, sans-serif; }
|
|
.card { background: linear-gradient(180deg, #141b2d 0%, #0f1522 100%); border: 1px solid #1f2937; }
|
|
.state-RUNNING { background: #10b981; }
|
|
.state-STOPPED { background: #6b7280; }
|
|
.state-MISSING { background: #ef4444; }
|
|
</style>
|
|
</head>
|
|
<body x-data="dashboard()" x-init="load()">
|
|
|
|
<div class="max-w-6xl mx-auto px-6 py-8">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-white">🏜 Lobe Sandbox 管理台</h1>
|
|
<p class="text-sm text-gray-400 mt-1" x-text="'共 ' + users.length + ' 个用户沙箱 · 运行中 ' + runningCount + ' 个'"></p>
|
|
</div>
|
|
<button @click="load()" class="text-xs text-gray-400 hover:text-white">⟳ 刷新</button>
|
|
</div>
|
|
|
|
<!-- 列表 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<template x-for="u in users" :key="u.name">
|
|
<a :href="'user/' + u.userId + location.search"
|
|
class="card rounded-lg p-4 hover:border-emerald-500 hover:-translate-y-0.5 transition-all block">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="font-mono text-xs text-gray-400" x-text="u.userId.slice(0, 24) + (u.userId.length > 24 ? '…' : '')"></span>
|
|
<span class="inline-flex items-center gap-1.5 text-xs text-white px-2 py-0.5 rounded-full"
|
|
:class="'state-' + u.state"
|
|
x-text="u.state"></span>
|
|
</div>
|
|
<div class="text-[11px] text-gray-500 grid grid-cols-3 gap-2 mt-3 pt-3 border-t border-gray-800">
|
|
<div><div class="text-gray-400" x-text="fmtBytes(u.memory)"></div><div>内存</div></div>
|
|
<div><div class="text-gray-400" x-text="fmtBytes(u.disk)"></div><div>磁盘</div></div>
|
|
<div><div class="text-gray-400" x-text="u.ipv4 || '—'"></div><div>IP</div></div>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
<div x-show="users.length === 0" class="col-span-full text-center py-20 text-gray-500">
|
|
还没有沙箱容器
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function dashboard() {
|
|
return {
|
|
users: [],
|
|
get runningCount() { return this.users.filter(u => u.state === 'RUNNING').length; },
|
|
get token() { return new URLSearchParams(location.search).get('token') ?? ''; },
|
|
async load() {
|
|
const r = await fetch('api/users?token=' + encodeURIComponent(this.token));
|
|
if (!r.ok) { document.body.innerHTML = '<div class="p-10 text-red-400">Unauthorized — add ?token=... to URL</div>'; return; }
|
|
const { users } = await r.json();
|
|
this.users = users;
|
|
},
|
|
fmtBytes(n) {
|
|
if (!n) return '—';
|
|
if (n > 1e9) return (n / 1e9).toFixed(1) + 'G';
|
|
if (n > 1e6) return (n / 1e6).toFixed(1) + 'M';
|
|
if (n > 1e3) return (n / 1e3).toFixed(1) + 'K';
|
|
return n + 'B';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>`;
|
|
|
|
export const USER_VIEW_HTML = String.raw`<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lobe Sandbox · 计算机视图</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
body { background: #0a0e1a; color: #e5e7eb; font-family: ui-sans-serif, system-ui, sans-serif; margin: 0; }
|
|
.card { background: linear-gradient(180deg, #141b2d 0%, #0f1522 100%); border: 1px solid #1f2937; }
|
|
.tool-executeCode { background: #2563eb; }
|
|
.tool-runCommand { background: #7c3aed; }
|
|
.tool-writeLocalFile, .tool-editLocalFile { background: #059669; }
|
|
.tool-readLocalFile, .tool-listLocalFiles { background: #0891b2; }
|
|
.tool-moveLocalFiles, .tool-renameLocalFile { background: #d97706; }
|
|
.tool-searchLocalFiles, .tool-grepContent, .tool-globLocalFiles { background: #6366f1; }
|
|
.tool-fail { background: #dc2626 !important; }
|
|
.scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
.scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
|
|
.scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
pre { font-family: 'SF Mono', Menlo, Consolas, monospace; }
|
|
</style>
|
|
</head>
|
|
<body x-data="userView()" x-init="init()" class="h-screen flex flex-col overflow-hidden">
|
|
|
|
<!-- 顶栏 -->
|
|
<header class="flex items-center justify-between px-6 py-3 border-b border-gray-800 bg-[#0f1522]">
|
|
<div class="flex items-center gap-3">
|
|
<a :href="'../?token=' + encodeURIComponent(token)" class="text-gray-400 hover:text-white text-sm">← 全局</a>
|
|
<span class="text-gray-600">/</span>
|
|
<span class="font-mono text-xs text-gray-300" x-text="userId"></span>
|
|
<span class="inline-flex items-center gap-1.5 text-[11px] text-white px-2 py-0.5 rounded-full"
|
|
:class="{'bg-emerald-600': state==='RUNNING','bg-gray-600': state==='STOPPED','bg-red-600':state==='MISSING'}"
|
|
x-text="state"></span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button x-show="state==='STOPPED'" @click="action('start')" class="text-xs px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded">▶ 启动</button>
|
|
<button x-show="state==='RUNNING'" @click="action('stop')" class="text-xs px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded">⏹ 停止</button>
|
|
<button @click="refreshAll()" class="text-xs text-gray-400 hover:text-white">⟳</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex-1 grid grid-cols-[320px_1fr_1fr] overflow-hidden">
|
|
|
|
<!-- 文件树 -->
|
|
<aside class="card border-y-0 border-l-0 overflow-y-auto scrollbar">
|
|
<div class="px-4 py-2 border-b border-gray-800 sticky top-0 bg-[#0f1522] text-xs font-semibold text-gray-400">
|
|
📁 /workspace (<span x-text="files.length"></span>)
|
|
</div>
|
|
<div class="p-2 text-sm">
|
|
<template x-for="f in sortedFiles" :key="f.path">
|
|
<div @click="openFile(f)"
|
|
class="px-2 py-1.5 rounded hover:bg-gray-800 cursor-pointer truncate flex items-center justify-between group"
|
|
:class="{'bg-gray-800': selectedPath === f.path}">
|
|
<span class="truncate" x-text="iconFor(f.path) + ' ' + shortPath(f.path)"></span>
|
|
<span class="text-[10px] text-gray-600 group-hover:text-gray-400 tabular-nums" x-text="fmtBytes(f.size)"></span>
|
|
</div>
|
|
</template>
|
|
<div x-show="files.length === 0 && !loadingFiles" class="text-xs text-gray-600 p-3">
|
|
<span x-show="state !== 'RUNNING'">容器停机中,启动后可见文件</span>
|
|
<span x-show="state === 'RUNNING'">空工作区</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 中间:文件预览 -->
|
|
<section class="card border-y-0 overflow-hidden flex flex-col">
|
|
<div class="px-4 py-2 border-b border-gray-800 text-xs font-semibold text-gray-400 flex justify-between items-center">
|
|
<span x-text="selectedPath ? '📄 ' + selectedPath : '📄 选文件查看'"></span>
|
|
<span x-show="selectedPath" class="text-gray-600" x-text="fmtBytes(selectedSize)"></span>
|
|
</div>
|
|
<div class="flex-1 overflow-auto scrollbar bg-[#0a0e1a]">
|
|
<template x-if="!selectedPath">
|
|
<div class="p-10 text-center text-gray-600 text-sm">← 点左边的文件</div>
|
|
</template>
|
|
<template x-if="selectedType === 'image'">
|
|
<div class="p-4"><img :src="selectedUrl" class="max-w-full rounded shadow-lg"/></div>
|
|
</template>
|
|
<template x-if="selectedType === 'html'">
|
|
<div class="h-full flex flex-col">
|
|
<div class="px-3 py-1.5 bg-[#0f1522] border-b border-gray-800 text-xs flex justify-between items-center">
|
|
<span class="text-gray-500">🎮 HTML 实时预览(沙盒 iframe,JS 可跑)</span>
|
|
<div class="flex gap-2">
|
|
<button @click="htmlMode='preview'" :class="htmlMode==='preview'?'text-emerald-400':'text-gray-500'" class="hover:text-white">▶ 玩</button>
|
|
<button @click="htmlMode='source'" :class="htmlMode==='source'?'text-emerald-400':'text-gray-500'" class="hover:text-white"><> 源码</button>
|
|
<a :href="'data:text/html;charset=utf-8,' + encodeURIComponent(selectedContent)" target="_blank" class="text-gray-500 hover:text-white">↗ 新窗口</a>
|
|
</div>
|
|
</div>
|
|
<iframe x-show="htmlMode==='preview'" :srcdoc="selectedContent" sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-popups allow-modals" class="flex-1 bg-white" style="border:0"></iframe>
|
|
<pre x-show="htmlMode==='source'" class="text-xs text-gray-300 p-4 whitespace-pre-wrap break-all flex-1 overflow-auto scrollbar" x-text="selectedContent"></pre>
|
|
</div>
|
|
</template>
|
|
<template x-if="selectedType === 'text'">
|
|
<pre class="text-xs text-gray-300 p-4 whitespace-pre-wrap break-all" x-text="selectedContent"></pre>
|
|
</template>
|
|
<template x-if="selectedType === 'error'">
|
|
<div class="p-4 text-red-400 text-sm" x-text="selectedContent"></div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 右侧:活动时间线 -->
|
|
<section class="card border-y-0 border-r-0 overflow-hidden flex flex-col">
|
|
<div class="px-4 py-2 border-b border-gray-800 text-xs font-semibold text-gray-400 flex justify-between">
|
|
<span>▶ 活动时间线 (<span x-text="events.length"></span>)</span>
|
|
<span x-show="sseConnected" class="text-emerald-500">● live</span>
|
|
<span x-show="!sseConnected" class="text-gray-600">○ 离线</span>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto scrollbar p-3 space-y-2" id="timeline">
|
|
<template x-for="e in events.slice().reverse()" :key="e.id">
|
|
<div class="rounded-md overflow-hidden bg-[#0a0e1a] border border-gray-800">
|
|
<div class="flex items-center gap-2 px-3 py-2 text-[11px]">
|
|
<span class="inline-block w-2 h-2 rounded-full" :class="'tool-' + e.toolName + (!e.success ? ' tool-fail' : '')"></span>
|
|
<span class="font-mono text-gray-400" x-text="fmtTime(e.ts)"></span>
|
|
<span class="font-semibold text-white" x-text="e.toolName"></span>
|
|
<span class="text-gray-600 ml-auto" x-text="e.durationMs + 'ms'"></span>
|
|
</div>
|
|
<div class="px-3 pb-2 text-xs text-gray-400 truncate font-mono" x-text="e.summary || ''"></div>
|
|
</div>
|
|
</template>
|
|
<div x-show="events.length === 0" class="text-xs text-gray-600 text-center py-10">
|
|
等待活动 — 让 AI 写个文件试试
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function userView() {
|
|
const path = location.pathname;
|
|
const m = path.match(/\/admin\/user\/([^\/]+)/);
|
|
const userId = m ? decodeURIComponent(m[1]) : '';
|
|
return {
|
|
userId,
|
|
token: new URLSearchParams(location.search).get('token') ?? '',
|
|
state: 'LOADING',
|
|
files: [],
|
|
loadingFiles: false,
|
|
events: [],
|
|
sseConnected: false,
|
|
selectedPath: '',
|
|
selectedSize: 0,
|
|
selectedType: '',
|
|
selectedContent: '',
|
|
selectedUrl: '',
|
|
htmlMode: 'preview',
|
|
get sortedFiles() {
|
|
return [...this.files].sort((a, b) => b.mtime - a.mtime);
|
|
},
|
|
async init() {
|
|
await this.loadInfo();
|
|
await this.loadFiles();
|
|
this.connectSSE();
|
|
},
|
|
async loadInfo() {
|
|
const r = await fetch('../api/user/' + encodeURIComponent(this.userId) + '?token=' + encodeURIComponent(this.token));
|
|
if (!r.ok) { this.state = 'ERROR'; return; }
|
|
const d = await r.json();
|
|
this.state = d.state;
|
|
},
|
|
async loadFiles() {
|
|
this.loadingFiles = true;
|
|
try {
|
|
const r = await fetch('../api/files?userId=' + encodeURIComponent(this.userId) + '&token=' + encodeURIComponent(this.token));
|
|
const d = await r.json();
|
|
this.files = d.files || [];
|
|
} finally {
|
|
this.loadingFiles = false;
|
|
}
|
|
},
|
|
refreshAll() {
|
|
this.loadInfo();
|
|
this.loadFiles();
|
|
},
|
|
async action(verb) {
|
|
await fetch('../api/user/' + encodeURIComponent(this.userId) + '/' + verb + '?token=' + encodeURIComponent(this.token), { method: 'POST' });
|
|
setTimeout(() => this.refreshAll(), 1000);
|
|
},
|
|
connectSSE() {
|
|
const url = '../api/events?userId=' + encodeURIComponent(this.userId) + '&token=' + encodeURIComponent(this.token);
|
|
const es = new EventSource(url);
|
|
es.addEventListener('event', (ev) => {
|
|
const e = JSON.parse(ev.data);
|
|
if (!this.events.find((x) => x.id === e.id)) {
|
|
this.events.push(e);
|
|
// 文件列表可能已变,防抖刷新
|
|
clearTimeout(this._reloadTimer);
|
|
this._reloadTimer = setTimeout(() => this.loadFiles(), 800);
|
|
}
|
|
});
|
|
es.addEventListener('open', () => this.sseConnected = true);
|
|
es.addEventListener('error', () => this.sseConnected = false);
|
|
},
|
|
async openFile(f) {
|
|
this.selectedPath = f.path;
|
|
this.selectedSize = f.size;
|
|
const ext = f.path.slice(f.path.lastIndexOf('.')).toLowerCase();
|
|
const isImage = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'].includes(ext);
|
|
const isHtml = ['.html', '.htm'].includes(ext);
|
|
const url = '../api/file?userId=' + encodeURIComponent(this.userId) + '&path=' + encodeURIComponent(f.path) + '&token=' + encodeURIComponent(this.token);
|
|
if (isImage) {
|
|
this.selectedType = 'image';
|
|
this.selectedUrl = url;
|
|
return;
|
|
}
|
|
const r = await fetch(url);
|
|
if (!r.ok) {
|
|
this.selectedType = 'error';
|
|
this.selectedContent = '加载失败: ' + await r.text();
|
|
return;
|
|
}
|
|
const content = await r.text();
|
|
this.selectedContent = content;
|
|
if (isHtml) {
|
|
this.selectedType = 'html';
|
|
this.htmlMode = 'preview';
|
|
} else {
|
|
this.selectedType = 'text';
|
|
}
|
|
},
|
|
iconFor(path) {
|
|
const ext = path.slice(path.lastIndexOf('.')).toLowerCase();
|
|
return ({
|
|
'.py': '🐍', '.js': '📜', '.ts': '📜',
|
|
'.json': '{}', '.md': '📝', '.txt': '📄',
|
|
'.csv': '📊', '.tsv': '📊', '.xlsx': '📊',
|
|
'.png': '🖼', '.jpg': '🖼', '.jpeg': '🖼', '.gif': '🖼', '.webp': '🖼',
|
|
'.html': '🎮', '.htm': '🎮', '.css': '🎨',
|
|
'.pdf': '📕', '.zip': '📦',
|
|
})[ext] ?? '📄';
|
|
},
|
|
shortPath(p) {
|
|
return p.replace(/^\/workspace\//, '');
|
|
},
|
|
fmtBytes(n) {
|
|
if (!n) return '0B';
|
|
if (n > 1e9) return (n / 1e9).toFixed(1) + 'G';
|
|
if (n > 1e6) return (n / 1e6).toFixed(1) + 'M';
|
|
if (n > 1e3) return (n / 1e3).toFixed(1) + 'K';
|
|
return n + 'B';
|
|
},
|
|
fmtTime(ts) {
|
|
const d = new Date(ts);
|
|
return d.toTimeString().slice(0, 8);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>`;
|