feat: add remote control plane and whitelist reads
Build web service image / build (push) Successful in 1m53s
Build web service image / build (push) Successful in 1m53s
This commit is contained in:
@@ -0,0 +1,914 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./styles.css";
|
||||
|
||||
const navItems = [
|
||||
{ id: "overview", label: "总览", icon: "⌂" },
|
||||
{ id: "nodes", label: "节点", icon: "◈" },
|
||||
{ id: "tasks", label: "任务", icon: "↗" },
|
||||
{ id: "events", label: "白名单事件", icon: "◉" },
|
||||
{ id: "audit", label: "操作审计", icon: "≡" },
|
||||
];
|
||||
|
||||
class ApiError extends Error {
|
||||
constructor(message, status) {
|
||||
super(message);
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
|
||||
async function api(path, { token, method = "GET", body } = {}) {
|
||||
const headers = {};
|
||||
if (token) headers.Authorization = `Bearer ${token}`;
|
||||
if (body !== undefined) headers["Content-Type"] = "application/json";
|
||||
const response = await fetch(path, {
|
||||
method,
|
||||
headers,
|
||||
body: body === undefined ? undefined : JSON.stringify(body),
|
||||
});
|
||||
const payload = await response.json().catch(() => ({}));
|
||||
if (!response.ok)
|
||||
throw new ApiError(
|
||||
payload.error?.message || `请求失败 (${response.status})`,
|
||||
response.status,
|
||||
);
|
||||
return payload;
|
||||
}
|
||||
|
||||
function formatTime(value) {
|
||||
if (!value) return "—";
|
||||
const date = new Date(value);
|
||||
return Number.isNaN(date.getTime())
|
||||
? "—"
|
||||
: date.toLocaleString("zh-CN", { hour12: false });
|
||||
}
|
||||
|
||||
function shortId(value, length = 12) {
|
||||
if (!value) return "—";
|
||||
return value.length > length ? `${value.slice(0, length)}…` : value;
|
||||
}
|
||||
|
||||
function statusTone(status) {
|
||||
if (["Online", "Succeeded", "Accepted"].includes(status)) return "positive";
|
||||
if (["Running", "Pending", "Degraded"].includes(status)) return "warning";
|
||||
if (
|
||||
[
|
||||
"Failed",
|
||||
"Cancelled",
|
||||
"Expired",
|
||||
"ResultUnconfirmed",
|
||||
"Offline",
|
||||
"SessionLocked",
|
||||
"WechatNotRunning",
|
||||
"WechatNotLoggedIn",
|
||||
].includes(status)
|
||||
)
|
||||
return "negative";
|
||||
return "neutral";
|
||||
}
|
||||
|
||||
function StatusBadge({ value }) {
|
||||
return (
|
||||
<span className={`status-badge ${statusTone(value)}`}>
|
||||
<i />
|
||||
{value || "Unknown"}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Metric({ label, value, detail, tone = "blue" }) {
|
||||
return (
|
||||
<div className={`metric-card ${tone}`}>
|
||||
<div className="metric-label">{label}</div>
|
||||
<div className="metric-value">{value}</div>
|
||||
<div className="metric-detail">{detail}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Login({ onLogin }) {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const submit = async (event) => {
|
||||
event.preventDefault();
|
||||
setError("");
|
||||
setBusy(true);
|
||||
try {
|
||||
const result = await api("/v1/auth/login", {
|
||||
method: "POST",
|
||||
body: { username, password },
|
||||
});
|
||||
onLogin(result.access_token, username);
|
||||
} catch (reason) {
|
||||
setError(reason.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<main className="login-page">
|
||||
<div className="login-panel">
|
||||
<div className="brand-mark">W</div>
|
||||
<div className="eyebrow">WXAGENT CONTROL PLANE</div>
|
||||
<h1>欢迎回来</h1>
|
||||
<p className="muted">
|
||||
登录远程节点控制中心，查看连接状态并管理已授权任务。
|
||||
</p>
|
||||
<form onSubmit={submit} className="login-form">
|
||||
<label>
|
||||
用户名
|
||||
<input
|
||||
autoFocus
|
||||
value={username}
|
||||
onChange={(event) => setUsername(event.target.value)}
|
||||
autoComplete="username"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
密码
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</label>
|
||||
{error && <div className="form-error">{error}</div>}
|
||||
<button
|
||||
className="primary-button full"
|
||||
disabled={busy || !username || !password}
|
||||
>
|
||||
{busy ? "登录中…" : "登录控制面"}
|
||||
</button>
|
||||
</form>
|
||||
<div className="login-footnote">
|
||||
<span className="secure-dot" /> 会话仅保存在当前浏览器标签页
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function Sidebar({ view, setView, onLogout, username }) {
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-brand">
|
||||
<div className="brand-mark small">W</div>
|
||||
<div>
|
||||
<strong>WxAgent</strong>
|
||||
<span>Control Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="nav-caption">工作台</div>
|
||||
<nav>
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
className={view === item.id ? "nav-item active" : "nav-item"}
|
||||
onClick={() => setView(item.id)}
|
||||
>
|
||||
<span className="nav-icon">{item.icon}</span>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
<div className="sidebar-spacer" />
|
||||
<div className="connection-hint">
|
||||
<span className="secure-dot" />
|
||||
<div>
|
||||
<strong>安全连接</strong>
|
||||
<small>控制面 API 已认证</small>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-menu">
|
||||
<div className="avatar">
|
||||
{(username || "A").slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
<div className="user-name">
|
||||
<strong>{username || "管理员"}</strong>
|
||||
<small>管理员</small>
|
||||
</div>
|
||||
<button title="退出登录" onClick={onLogout}>
|
||||
↪
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function Topbar({ title, subtitle, onRefresh, loading }) {
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div>
|
||||
<div className="eyebrow">CONTROL PLANE / {title.toUpperCase()}</div>
|
||||
<h2>{title}</h2>
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
<button className="refresh-button" onClick={onRefresh} disabled={loading}>
|
||||
<span className={loading ? "spin" : ""}>↻</span>
|
||||
{loading ? "同步中" : "刷新数据"}
|
||||
</button>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function Overview({ nodes, tasks, events, onView }) {
|
||||
const online = nodes.filter((node) => node.status === "Online").length;
|
||||
const activeTasks = tasks.filter((task) =>
|
||||
["Pending", "Accepted", "Running"].includes(task.status),
|
||||
).length;
|
||||
const uncertain = tasks.filter(
|
||||
(task) => task.status === "ResultUnconfirmed",
|
||||
).length;
|
||||
const latestEvents = events.slice(0, 5);
|
||||
return (
|
||||
<>
|
||||
<div className="metric-grid">
|
||||
<Metric
|
||||
label="在线节点"
|
||||
value={`${online}/${nodes.length}`}
|
||||
detail={online ? "节点连接正常" : "等待节点连接"}
|
||||
tone="blue"
|
||||
/>
|
||||
<Metric
|
||||
label="执行中任务"
|
||||
value={activeTasks}
|
||||
detail={activeTasks ? "需要持续关注" : "当前无执行中任务"}
|
||||
tone="purple"
|
||||
/>
|
||||
<Metric
|
||||
label="已接收事件"
|
||||
value={events.length}
|
||||
detail="仅包含白名单会话数据"
|
||||
tone="green"
|
||||
/>
|
||||
<Metric
|
||||
label="待人工核对"
|
||||
value={uncertain}
|
||||
detail={uncertain ? "禁止自动重放" : "暂无不确定结果"}
|
||||
tone={uncertain ? "orange" : "slate"}
|
||||
/>
|
||||
</div>
|
||||
<div className="content-grid two-col">
|
||||
<section className="panel">
|
||||
<div className="panel-heading">
|
||||
<div>
|
||||
<h3>节点健康</h3>
|
||||
<p>最近心跳与微信会话状态</p>
|
||||
</div>
|
||||
<button className="text-button" onClick={() => onView("nodes")}>
|
||||
查看全部 →
|
||||
</button>
|
||||
</div>
|
||||
{nodes.length === 0 ? (
|
||||
<Empty text="暂无已注册节点" />
|
||||
) : (
|
||||
<div className="compact-list">
|
||||
{nodes.slice(0, 5).map((node) => (
|
||||
<div className="compact-row" key={node.node_id}>
|
||||
<div className="node-avatar">
|
||||
{node.node_id.slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
<div className="row-main">
|
||||
<strong>{node.node_id}</strong>
|
||||
<span>
|
||||
{node.wechat_logged_in ? "微信已登录" : "微信未登录"} ·{" "}
|
||||
{formatTime(node.last_heartbeat_at)}
|
||||
</span>
|
||||
</div>
|
||||
<StatusBadge value={node.status} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
<section className="panel">
|
||||
<div className="panel-heading">
|
||||
<div>
|
||||
<h3>最近白名单事件</h3>
|
||||
<p>中心已持久化的数据</p>
|
||||
</div>
|
||||
<button className="text-button" onClick={() => onView("events")}>
|
||||
查看全部 →
|
||||
</button>
|
||||
</div>
|
||||
{latestEvents.length === 0 ? (
|
||||
<Empty text="暂无白名单事件" />
|
||||
) : (
|
||||
<div className="compact-list">
|
||||
{latestEvents.map((event) => (
|
||||
<div className="compact-row" key={event.event_id}>
|
||||
<div className="event-icon">◉</div>
|
||||
<div className="row-main">
|
||||
<strong>{shortId(event.chat_id)}</strong>
|
||||
<span>
|
||||
{event.chat_type} · {formatTime(event.received_at)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="event-preview">
|
||||
{event.content || "无正文"}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function NodesView({ nodes }) {
|
||||
return (
|
||||
<section className="panel full-panel">
|
||||
<div className="panel-heading">
|
||||
<div>
|
||||
<h3>节点管理</h3>
|
||||
<p>节点主动出站连接，状态来自最近一次心跳。</p>
|
||||
</div>
|
||||
<span className="table-count">{nodes.length} 个节点</span>
|
||||
</div>
|
||||
{nodes.length === 0 ? (
|
||||
<Empty text="暂无节点，请先启动已配置认证信息的 Desktop Agent。" />
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>节点</th>
|
||||
<th>状态</th>
|
||||
<th>微信状态</th>
|
||||
<th>活动账号</th>
|
||||
<th>能力</th>
|
||||
<th>最近心跳</th>
|
||||
<th>上报配置</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{nodes.map((node) => (
|
||||
<tr key={node.node_id}>
|
||||
<td>
|
||||
<div className="cell-primary">
|
||||
<div className="node-avatar">
|
||||
{node.node_id.slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<strong>{node.node_id}</strong>
|
||||
<small>
|
||||
{node.agent_version || "—"} ·{" "}
|
||||
{node.protocol_version || "—"}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<StatusBadge value={node.status} />
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={
|
||||
node.wechat_logged_in
|
||||
? "inline-positive"
|
||||
: "inline-muted"
|
||||
}
|
||||
>
|
||||
{node.wechat_running
|
||||
? node.wechat_logged_in
|
||||
? "已登录"
|
||||
: "未登录"
|
||||
: "未运行"}
|
||||
</span>
|
||||
{node.session_locked && (
|
||||
<small className="cell-note">桌面已锁定</small>
|
||||
)}
|
||||
</td>
|
||||
<td>{node.active_account_id || "—"}</td>
|
||||
<td>
|
||||
<span className="capability-count">
|
||||
{node.capabilities?.length || 0}
|
||||
</span>{" "}
|
||||
项
|
||||
</td>
|
||||
<td>{formatTime(node.last_heartbeat_at)}</td>
|
||||
<td>v{node.reporting_config_version ?? 0}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function TasksView({ nodes, tasks, token, onChanged }) {
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [busyId, setBusyId] = useState("");
|
||||
const [filter, setFilter] = useState("all");
|
||||
const visible = tasks.filter(
|
||||
(task) => filter === "all" || task.status === filter,
|
||||
);
|
||||
const cancel = async (task) => {
|
||||
setBusyId(task.task_id);
|
||||
try {
|
||||
await api(`/v1/tasks/${encodeURIComponent(task.task_id)}/cancel`, {
|
||||
token,
|
||||
method: "POST",
|
||||
});
|
||||
onChanged();
|
||||
} catch (error) {
|
||||
window.alert(error.message);
|
||||
} finally {
|
||||
setBusyId("");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<section className="panel full-panel">
|
||||
<div className="panel-heading">
|
||||
<div>
|
||||
<h3>任务队列</h3>
|
||||
<p>任务按节点与账号路由，取消请求需等待节点确认。</p>
|
||||
</div>
|
||||
<div className="heading-actions">
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(event) => setFilter(event.target.value)}
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
<option value="Pending">待处理</option>
|
||||
<option value="Accepted">已接收</option>
|
||||
<option value="Running">执行中</option>
|
||||
<option value="Succeeded">成功</option>
|
||||
<option value="Failed">失败</option>
|
||||
<option value="Cancelled">已取消</option>
|
||||
<option value="ResultUnconfirmed">待核对</option>
|
||||
</select>
|
||||
<button
|
||||
className="primary-button"
|
||||
onClick={() => setShowCreate(true)}
|
||||
>
|
||||
＋ 创建任务
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{visible.length === 0 ? (
|
||||
<Empty text="暂无符合条件的任务" />
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务</th>
|
||||
<th>路由</th>
|
||||
<th>状态</th>
|
||||
<th>租约</th>
|
||||
<th>更新时间</th>
|
||||
<th>结果</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visible.map((task) => (
|
||||
<tr key={task.task_id}>
|
||||
<td>
|
||||
<div className="cell-primary task-id">
|
||||
<span className="task-symbol">↗</span>
|
||||
<div>
|
||||
<strong>{shortId(task.task_id, 16)}</strong>
|
||||
<small>
|
||||
{task.kind} · {shortId(task.idempotency_key, 16)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{task.node_id}</strong>
|
||||
<small className="cell-note">
|
||||
账号 {task.account_id}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<StatusBadge value={task.status} />
|
||||
{task.cancel_requested_at &&
|
||||
![
|
||||
"Succeeded",
|
||||
"Failed",
|
||||
"Cancelled",
|
||||
"Expired",
|
||||
"ResultUnconfirmed",
|
||||
].includes(task.status) && (
|
||||
<small className="cell-note cancel-note">
|
||||
取消待确认
|
||||
</small>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{task.lease_generation
|
||||
? `第 ${task.lease_generation} 代`
|
||||
: "未分配"}
|
||||
</td>
|
||||
<td>{formatTime(task.updated_at)}</td>
|
||||
<td>
|
||||
{task.result?.error_code ? (
|
||||
<span className="error-code">
|
||||
{task.result.error_code}
|
||||
</span>
|
||||
) : (
|
||||
task.result?.message || "—"
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{![
|
||||
"Succeeded",
|
||||
"Failed",
|
||||
"Cancelled",
|
||||
"Expired",
|
||||
"ResultUnconfirmed",
|
||||
].includes(task.status) && (
|
||||
<button
|
||||
className="danger-button"
|
||||
disabled={busyId === task.task_id}
|
||||
onClick={() => cancel(task)}
|
||||
>
|
||||
{busyId === task.task_id ? "…" : "取消"}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
{showCreate && (
|
||||
<TaskModal
|
||||
nodes={nodes}
|
||||
token={token}
|
||||
onClose={() => setShowCreate(false)}
|
||||
onCreated={() => {
|
||||
setShowCreate(false);
|
||||
onChanged();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskModal({ nodes, token, onClose, onCreated }) {
|
||||
const [nodeId, setNodeId] = useState(nodes[0]?.node_id || "");
|
||||
const [accountId, setAccountId] = useState(nodes[0]?.active_account_id || "");
|
||||
const [targetId, setTargetId] = useState("");
|
||||
const [text, setText] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const submit = async (event) => {
|
||||
event.preventDefault();
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
await api("/v1/tasks", {
|
||||
token,
|
||||
method: "POST",
|
||||
body: {
|
||||
node_id: nodeId,
|
||||
account_id: accountId,
|
||||
kind: "send-text",
|
||||
idempotency_key: crypto.randomUUID(),
|
||||
payload: { target_id: targetId, text, confirmed: true },
|
||||
},
|
||||
});
|
||||
onCreated();
|
||||
} catch (reason) {
|
||||
setError(reason.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className="modal-backdrop"
|
||||
onMouseDown={(event) => event.target === event.currentTarget && onClose()}
|
||||
>
|
||||
<div className="modal">
|
||||
<div className="modal-heading">
|
||||
<div>
|
||||
<div className="eyebrow">NEW REMOTE TASK</div>
|
||||
<h3>发送文本消息</h3>
|
||||
<p>仅允许经过节点命令白名单校验的 send-text 操作。</p>
|
||||
</div>
|
||||
<button className="close-button" onClick={onClose}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={submit} className="task-form">
|
||||
<label>
|
||||
目标节点
|
||||
<select
|
||||
value={nodeId}
|
||||
onChange={(event) => {
|
||||
setNodeId(event.target.value);
|
||||
const selected = nodes.find(
|
||||
(node) => node.node_id === event.target.value,
|
||||
);
|
||||
if (selected?.active_account_id)
|
||||
setAccountId(selected.active_account_id);
|
||||
}}
|
||||
>
|
||||
{nodes.map((node) => (
|
||||
<option key={node.node_id} value={node.node_id}>
|
||||
{node.node_id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
账号 ID
|
||||
<input
|
||||
value={accountId}
|
||||
onChange={(event) => setAccountId(event.target.value)}
|
||||
placeholder="与节点当前活动账号一致"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
目标会话 ID
|
||||
<input
|
||||
value={targetId}
|
||||
onChange={(event) => setTargetId(event.target.value)}
|
||||
placeholder="已确认的稳定会话 ID"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
消息内容
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(event) => setText(event.target.value)}
|
||||
maxLength={4000}
|
||||
rows={5}
|
||||
placeholder="输入要发送的文本"
|
||||
/>
|
||||
</label>
|
||||
{error && <div className="form-error">{error}</div>}
|
||||
<div className="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="secondary-button"
|
||||
onClick={onClose}
|
||||
>
|
||||
返回
|
||||
</button>
|
||||
<button
|
||||
className="primary-button"
|
||||
disabled={busy || !nodeId || !accountId || !targetId || !text}
|
||||
>
|
||||
{busy ? "提交中…" : "提交任务"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EventsView({ events }) {
|
||||
const [query, setQuery] = useState("");
|
||||
const visible = events.filter(
|
||||
(event) =>
|
||||
!query ||
|
||||
[event.node_id, event.account_id, event.chat_id, event.content].some(
|
||||
(value) =>
|
||||
String(value || "")
|
||||
.toLowerCase()
|
||||
.includes(query.toLowerCase()),
|
||||
),
|
||||
);
|
||||
return (
|
||||
<section className="panel full-panel">
|
||||
<div className="panel-heading">
|
||||
<div>
|
||||
<h3>白名单事件</h3>
|
||||
<p>只展示中心已接收且通过节点本地授权的事件。</p>
|
||||
</div>
|
||||
<input
|
||||
className="search-input"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="搜索节点、账号或会话 ID"
|
||||
/>
|
||||
</div>
|
||||
{visible.length === 0 ? (
|
||||
<Empty text="暂无已授权事件" />
|
||||
) : (
|
||||
<div className="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>接收时间</th>
|
||||
<th>节点 / 账号</th>
|
||||
<th>会话</th>
|
||||
<th>类型</th>
|
||||
<th>序号</th>
|
||||
<th>内容</th>
|
||||
<th>授权版本</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visible.map((event) => (
|
||||
<tr key={event.event_id}>
|
||||
<td>{formatTime(event.received_at)}</td>
|
||||
<td>
|
||||
<strong>{event.node_id}</strong>
|
||||
<small className="cell-note">{event.account_id}</small>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{shortId(event.chat_id, 20)}</strong>
|
||||
<small className="cell-note">{event.chat_type}</small>
|
||||
</td>
|
||||
<td>{event.event_type}</td>
|
||||
<td>
|
||||
<span className="seq-pill">#{event.event_seq}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className="event-content">
|
||||
{event.content || "无正文"}
|
||||
</span>
|
||||
</td>
|
||||
<td>v{event.authorization_version}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function AuditView({ audit }) {
|
||||
return (
|
||||
<section className="panel full-panel">
|
||||
<div className="panel-heading">
|
||||
<div>
|
||||
<h3>操作审计</h3>
|
||||
<p>节点连接、任务操作与事件持久化的审计轨迹。</p>
|
||||
</div>
|
||||
<span className="table-count">最近 {audit.length} 条</span>
|
||||
</div>
|
||||
{audit.length === 0 ? (
|
||||
<Empty text="暂无审计记录" />
|
||||
) : (
|
||||
<div className="timeline">
|
||||
{audit.map((item) => (
|
||||
<div className="timeline-row" key={item.id}>
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-main">
|
||||
<strong>{item.action}</strong>
|
||||
<span>
|
||||
{item.principal} · {item.resource}
|
||||
</span>
|
||||
</div>
|
||||
<div className="timeline-meta">
|
||||
<StatusBadge
|
||||
value={
|
||||
item.outcome === "success" ? "Succeeded" : item.outcome
|
||||
}
|
||||
/>
|
||||
<span>{formatTime(item.at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Empty({ text }) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon">◌</div>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [token, setToken] = useState(
|
||||
() => sessionStorage.getItem("wxagent-token") || "",
|
||||
);
|
||||
const [username, setUsername] = useState(
|
||||
() => sessionStorage.getItem("wxagent-user") || "",
|
||||
);
|
||||
const [view, setView] = useState("overview");
|
||||
const [nodes, setNodes] = useState([]);
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [events, setEvents] = useState([]);
|
||||
const [audit, setAudit] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const logout = useCallback(() => {
|
||||
sessionStorage.removeItem("wxagent-token");
|
||||
sessionStorage.removeItem("wxagent-user");
|
||||
setToken("");
|
||||
setUsername("");
|
||||
}, []);
|
||||
const refresh = useCallback(async () => {
|
||||
if (!token) return;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const [nodeData, taskData, eventData, auditData] = await Promise.all([
|
||||
api("/v1/nodes", { token }),
|
||||
api("/v1/tasks?limit=200", { token }),
|
||||
api("/v1/events?limit=200", { token }),
|
||||
api("/v1/audit?limit=200", { token }),
|
||||
]);
|
||||
setNodes(nodeData.nodes || []);
|
||||
setTasks(taskData.tasks || []);
|
||||
setEvents(eventData.events || []);
|
||||
setAudit(auditData.audit || []);
|
||||
} catch (reason) {
|
||||
if (reason.status === 401) logout();
|
||||
else setError(reason.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [token, logout]);
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
if (!token) return undefined;
|
||||
const id = window.setInterval(refresh, 15000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [refresh, token]);
|
||||
const handleLogin = (nextToken, nextUser) => {
|
||||
sessionStorage.setItem("wxagent-token", nextToken);
|
||||
sessionStorage.setItem("wxagent-user", nextUser);
|
||||
setToken(nextToken);
|
||||
setUsername(nextUser);
|
||||
};
|
||||
const title = navItems.find((item) => item.id === view)?.label || "总览";
|
||||
const subtitle = {
|
||||
overview: "跨节点连接、任务与已授权数据的安全视图",
|
||||
nodes: "查看节点心跳、微信登录状态与能力摘要",
|
||||
tasks: "管理远程任务，所有执行均由节点本地能力边界约束",
|
||||
events: "按账号与会话作用域查看已授权上报内容",
|
||||
audit: "追踪控制面与节点之间的关键操作",
|
||||
}[view];
|
||||
if (!token) return <Login onLogin={handleLogin} />;
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<Sidebar
|
||||
view={view}
|
||||
setView={setView}
|
||||
onLogout={logout}
|
||||
username={username}
|
||||
/>
|
||||
<main className="main-area">
|
||||
<Topbar
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
onRefresh={refresh}
|
||||
loading={loading}
|
||||
/>
|
||||
{error && (
|
||||
<div className="global-error">
|
||||
<span>!</span>
|
||||
{error}
|
||||
<button onClick={() => setError("")}>×</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="page-content">
|
||||
{view === "overview" && (
|
||||
<Overview
|
||||
nodes={nodes}
|
||||
tasks={tasks}
|
||||
events={events}
|
||||
onView={setView}
|
||||
/>
|
||||
)}
|
||||
{view === "nodes" && <NodesView nodes={nodes} />}
|
||||
{view === "tasks" && (
|
||||
<TasksView
|
||||
nodes={nodes}
|
||||
tasks={tasks}
|
||||
token={token}
|
||||
onChanged={refresh}
|
||||
/>
|
||||
)}
|
||||
{view === "events" && <EventsView events={events} />}
|
||||
{view === "audit" && <AuditView audit={audit} />}
|
||||
</div>
|
||||
<footer className="footer">
|
||||
<span>WxAgent Control Plane · Protocol v1</span>
|
||||
<span>数据上报遵循节点本地白名单</span>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")).render(<App />);
|
||||
@@ -0,0 +1,970 @@
|
||||
:root {
|
||||
font-family:
|
||||
"Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", sans-serif;
|
||||
color: #182334;
|
||||
background: #f3f6fa;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
--navy: #0e1a2d;
|
||||
--ink: #182334;
|
||||
--muted: #7c899b;
|
||||
--line: #e7ecf2;
|
||||
--panel: #ffffff;
|
||||
--blue: #2e6df6;
|
||||
--green: #20a477;
|
||||
--orange: #e09235;
|
||||
--red: #d85c65;
|
||||
--purple: #8967e8;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background: #f3f6fa;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(circle at 20% 10%, #dce8ff 0, transparent 34%),
|
||||
linear-gradient(135deg, #f3f6fa 0%, #eef2f7 100%);
|
||||
}
|
||||
.login-panel {
|
||||
width: min(440px, 100%);
|
||||
padding: 42px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: 0 26px 80px rgba(25, 44, 78, 0.14);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 13px;
|
||||
color: #fff;
|
||||
background: linear-gradient(140deg, #3c7cff, #6041d8);
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 9px 18px rgba(61, 103, 236, 0.28);
|
||||
}
|
||||
.brand-mark.small {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
font-size: 17px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.eyebrow {
|
||||
color: #8a96a7;
|
||||
font:
|
||||
500 10px / 1.4 "DM Mono",
|
||||
monospace;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.login-panel h1 {
|
||||
margin: 19px 0 9px;
|
||||
font-size: 32px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.login-form {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
color: #647287;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
border: 1px solid #dce3eb;
|
||||
border-radius: 9px;
|
||||
outline: none;
|
||||
color: var(--ink);
|
||||
background: #fff;
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
height: 42px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
textarea {
|
||||
padding: 11px 12px;
|
||||
resize: vertical;
|
||||
}
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #7da2ff;
|
||||
box-shadow: 0 0 0 3px rgba(46, 109, 246, 0.1);
|
||||
}
|
||||
.form-error,
|
||||
.global-error {
|
||||
color: #a73b49;
|
||||
border: 1px solid #f1cbd0;
|
||||
border-radius: 8px;
|
||||
background: #fff4f5;
|
||||
}
|
||||
.form-error {
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.login-footnote {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
color: #9aa5b4;
|
||||
font-size: 11px;
|
||||
}
|
||||
.secure-dot {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #31b887;
|
||||
box-shadow: 0 0 0 4px rgba(49, 184, 135, 0.12);
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 240px;
|
||||
padding: 24px 16px 16px;
|
||||
color: #c2ccda;
|
||||
background: var(--navy);
|
||||
}
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 0 10px 38px;
|
||||
color: #fff;
|
||||
}
|
||||
.sidebar-brand strong {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.sidebar-brand span {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: #71819b;
|
||||
font:
|
||||
10px "DM Mono",
|
||||
monospace;
|
||||
}
|
||||
.nav-caption {
|
||||
padding: 0 12px 10px;
|
||||
color: #667690;
|
||||
font:
|
||||
500 10px "DM Mono",
|
||||
monospace;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
nav {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
color: #8e9bb0;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav-item:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #fff;
|
||||
background: #273b60;
|
||||
box-shadow: inset 3px 0 #608cff;
|
||||
}
|
||||
.nav-icon {
|
||||
width: 17px;
|
||||
color: #6885b9;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-item.active .nav-icon {
|
||||
color: #94b1ff;
|
||||
}
|
||||
.sidebar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.connection-hint {
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
align-items: center;
|
||||
margin: 12px 4px 16px;
|
||||
padding: 13px 11px;
|
||||
border: 1px solid rgba(125, 154, 204, 0.16);
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
.connection-hint strong,
|
||||
.connection-hint small,
|
||||
.user-name strong,
|
||||
.user-name small {
|
||||
display: block;
|
||||
}
|
||||
.connection-hint strong {
|
||||
color: #d2dbeb;
|
||||
font-size: 11px;
|
||||
}
|
||||
.connection-hint small {
|
||||
margin-top: 4px;
|
||||
color: #70809a;
|
||||
font-size: 10px;
|
||||
}
|
||||
.user-menu {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
padding: 14px 7px 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.avatar,
|
||||
.node-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 9px;
|
||||
color: #315ac3;
|
||||
background: #dfe9ff;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.user-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.user-name strong {
|
||||
overflow: hidden;
|
||||
color: #e0e7f3;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-name small {
|
||||
margin-top: 3px;
|
||||
color: #70809a;
|
||||
font-size: 10px;
|
||||
}
|
||||
.user-menu button {
|
||||
border: 0;
|
||||
color: #71809a;
|
||||
background: transparent;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
width: calc(100% - 240px);
|
||||
min-width: 0;
|
||||
margin-left: 240px;
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding: 43px 52px 32px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.topbar h2 {
|
||||
margin: 8px 0 5px;
|
||||
color: var(--ink);
|
||||
font-size: 26px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.topbar p {
|
||||
margin: 0;
|
||||
color: #8a96a7;
|
||||
font-size: 12px;
|
||||
}
|
||||
.refresh-button {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
height: 37px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 8px;
|
||||
color: #506078;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.refresh-button:hover {
|
||||
border-color: #a9bfe9;
|
||||
color: #2e6df6;
|
||||
background: #f8faff;
|
||||
}
|
||||
.refresh-button span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.page-content {
|
||||
max-width: 1500px;
|
||||
padding: 33px 52px 24px;
|
||||
}
|
||||
.global-error {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
margin: 18px 52px 0;
|
||||
padding: 11px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.global-error span {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: #cf5b66;
|
||||
font-weight: 800;
|
||||
}
|
||||
.global-error button {
|
||||
margin-left: auto;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
font-size: 18px;
|
||||
}
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
.metric-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 135px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: var(--panel);
|
||||
}
|
||||
.metric-card::after {
|
||||
position: absolute;
|
||||
right: -25px;
|
||||
bottom: -38px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
opacity: 0.1;
|
||||
}
|
||||
.metric-card.blue::after {
|
||||
background: #2e6df6;
|
||||
}
|
||||
.metric-card.purple::after {
|
||||
background: #8967e8;
|
||||
}
|
||||
.metric-card.green::after {
|
||||
background: #20a477;
|
||||
}
|
||||
.metric-card.orange::after {
|
||||
background: #e09235;
|
||||
}
|
||||
.metric-card.slate::after {
|
||||
background: #7c899b;
|
||||
}
|
||||
.metric-label {
|
||||
color: #8b97a7;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.metric-value {
|
||||
margin-top: 16px;
|
||||
color: var(--ink);
|
||||
font-size: 29px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.metric-detail {
|
||||
margin-top: 9px;
|
||||
color: #9aa5b4;
|
||||
font-size: 11px;
|
||||
}
|
||||
.content-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.two-col {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.panel {
|
||||
min-width: 0;
|
||||
padding: 22px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: var(--panel);
|
||||
}
|
||||
.full-panel {
|
||||
padding: 24px;
|
||||
}
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.panel-heading h3 {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.panel-heading p {
|
||||
margin: 6px 0 0;
|
||||
color: #9aa5b4;
|
||||
font-size: 11px;
|
||||
}
|
||||
.heading-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.heading-actions select {
|
||||
width: auto;
|
||||
height: 36px;
|
||||
color: #667489;
|
||||
font-size: 11px;
|
||||
}
|
||||
.table-count {
|
||||
color: #8f9aac;
|
||||
font-size: 11px;
|
||||
}
|
||||
.text-button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #4b76e7;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.text-button:hover {
|
||||
color: #1e4bc5;
|
||||
}
|
||||
.compact-list {
|
||||
display: grid;
|
||||
}
|
||||
.compact-row {
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid #eff2f5;
|
||||
}
|
||||
.compact-row:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.row-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.row-main strong,
|
||||
.row-main span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row-main strong {
|
||||
color: #334156;
|
||||
font-size: 12px;
|
||||
}
|
||||
.row-main span {
|
||||
margin-top: 4px;
|
||||
color: #9aa5b4;
|
||||
font-size: 10px;
|
||||
}
|
||||
.event-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 9px;
|
||||
color: #269b79;
|
||||
background: #e5f7f0;
|
||||
}
|
||||
.event-preview {
|
||||
max-width: 34%;
|
||||
overflow: hidden;
|
||||
color: #788598;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding: 5px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-badge i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
.status-badge.positive {
|
||||
color: #168a68;
|
||||
background: #e7f8f2;
|
||||
}
|
||||
.status-badge.warning {
|
||||
color: #b26e1c;
|
||||
background: #fff4e3;
|
||||
}
|
||||
.status-badge.negative {
|
||||
color: #c24d5d;
|
||||
background: #fff0f1;
|
||||
}
|
||||
.status-badge.neutral {
|
||||
color: #6f7d90;
|
||||
background: #edf1f5;
|
||||
}
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 760px;
|
||||
}
|
||||
.table-wrap th {
|
||||
padding: 0 11px 12px;
|
||||
color: #99a4b2;
|
||||
font:
|
||||
500 10px "DM Mono",
|
||||
monospace;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-wrap td {
|
||||
padding: 14px 11px;
|
||||
border-top: 1px solid #eef1f4;
|
||||
color: #617086;
|
||||
font-size: 11px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.table-wrap tr:hover td {
|
||||
background: #fafcff;
|
||||
}
|
||||
.cell-primary {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
min-width: 150px;
|
||||
}
|
||||
.cell-primary strong,
|
||||
.cell-primary small,
|
||||
.cell-note {
|
||||
display: block;
|
||||
}
|
||||
.cell-primary strong {
|
||||
color: #344156;
|
||||
font-size: 11px;
|
||||
}
|
||||
.cell-primary small {
|
||||
margin-top: 4px;
|
||||
color: #a1aab7;
|
||||
font-size: 10px;
|
||||
}
|
||||
.cell-note {
|
||||
margin-top: 5px;
|
||||
color: #a1aab7;
|
||||
font-size: 10px;
|
||||
}
|
||||
.inline-positive {
|
||||
color: #218e70;
|
||||
font-weight: 700;
|
||||
}
|
||||
.inline-muted {
|
||||
color: #929ead;
|
||||
}
|
||||
.capability-count {
|
||||
color: #4b76e7;
|
||||
font-weight: 800;
|
||||
}
|
||||
.task-symbol {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
border-radius: 8px;
|
||||
color: #7454d6;
|
||||
background: #eeeaff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.danger-button {
|
||||
padding: 5px 9px;
|
||||
border: 1px solid #f2c8ce;
|
||||
border-radius: 6px;
|
||||
color: #c24d5d;
|
||||
background: #fff8f8;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.danger-button:hover {
|
||||
color: #fff;
|
||||
background: #d85c65;
|
||||
}
|
||||
.error-code {
|
||||
color: #be5360;
|
||||
font-family: "DM Mono", monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
.cancel-note {
|
||||
color: #b87723;
|
||||
}
|
||||
.seq-pill {
|
||||
padding: 4px 7px;
|
||||
border-radius: 5px;
|
||||
color: #5574b6;
|
||||
background: #edf2ff;
|
||||
font:
|
||||
10px "DM Mono",
|
||||
monospace;
|
||||
}
|
||||
.event-content {
|
||||
display: block;
|
||||
max-width: 270px;
|
||||
overflow: hidden;
|
||||
color: #425168;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search-input {
|
||||
width: 240px;
|
||||
height: 35px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.task-id {
|
||||
min-width: 175px;
|
||||
}
|
||||
.primary-button,
|
||||
.secondary-button {
|
||||
height: 37px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.primary-button {
|
||||
border: 1px solid #2e6df6;
|
||||
color: #fff;
|
||||
background: #2e6df6;
|
||||
box-shadow: 0 5px 12px rgba(46, 109, 246, 0.18);
|
||||
}
|
||||
.primary-button:hover {
|
||||
background: #205bdc;
|
||||
}
|
||||
.secondary-button {
|
||||
border: 1px solid #dce3eb;
|
||||
color: #647287;
|
||||
background: #fff;
|
||||
}
|
||||
.full {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.empty-state {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 47px 15px;
|
||||
color: #a0aab8;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-icon {
|
||||
color: #c2ccd9;
|
||||
font-size: 30px;
|
||||
}
|
||||
.empty-state p {
|
||||
margin: 12px 0 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.timeline {
|
||||
display: grid;
|
||||
}
|
||||
.timeline-row {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
align-items: center;
|
||||
min-height: 64px;
|
||||
border-bottom: 1px solid #eef1f4;
|
||||
}
|
||||
.timeline-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #7294ef;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
.timeline-main {
|
||||
flex: 1;
|
||||
}
|
||||
.timeline-main strong,
|
||||
.timeline-main span {
|
||||
display: block;
|
||||
}
|
||||
.timeline-main strong {
|
||||
color: #44526a;
|
||||
font-size: 11px;
|
||||
}
|
||||
.timeline-main span {
|
||||
margin-top: 5px;
|
||||
color: #a0a9b6;
|
||||
font-size: 10px;
|
||||
}
|
||||
.timeline-meta {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
align-items: center;
|
||||
color: #9aa5b4;
|
||||
font-size: 10px;
|
||||
}
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 5;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 20px;
|
||||
background: rgba(14, 26, 45, 0.48);
|
||||
}
|
||||
.modal {
|
||||
width: min(540px, 100%);
|
||||
padding: 25px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
box-shadow: 0 25px 70px rgba(6, 18, 40, 0.28);
|
||||
}
|
||||
.modal-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
.modal-heading h3 {
|
||||
margin: 8px 0 5px;
|
||||
font-size: 19px;
|
||||
}
|
||||
.modal-heading p {
|
||||
margin: 0;
|
||||
color: #96a0af;
|
||||
font-size: 11px;
|
||||
}
|
||||
.close-button {
|
||||
align-self: flex-start;
|
||||
border: 0;
|
||||
color: #99a3b0;
|
||||
background: transparent;
|
||||
font-size: 24px;
|
||||
}
|
||||
.task-form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 0 52px 30px;
|
||||
color: #a7b0bc;
|
||||
font:
|
||||
10px "DM Mono",
|
||||
monospace;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.two-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.topbar,
|
||||
.page-content {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.global-error {
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.footer {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.sidebar {
|
||||
position: static;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
.sidebar-brand {
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
.sidebar-spacer,
|
||||
.connection-hint {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
.nav-item {
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
padding: 0 4px;
|
||||
font-size: 0;
|
||||
}
|
||||
.nav-icon {
|
||||
font-size: 17px;
|
||||
}
|
||||
.user-menu {
|
||||
margin-top: 13px;
|
||||
}
|
||||
.app-shell {
|
||||
display: block;
|
||||
}
|
||||
.main-area {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.topbar {
|
||||
padding: 24px 18px;
|
||||
}
|
||||
.topbar h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.page-content {
|
||||
padding: 20px 18px;
|
||||
}
|
||||
.global-error {
|
||||
margin: 15px 18px 0;
|
||||
}
|
||||
.metric-grid {
|
||||
gap: 9px;
|
||||
}
|
||||
.metric-card {
|
||||
min-height: 116px;
|
||||
padding: 14px;
|
||||
}
|
||||
.metric-value {
|
||||
margin-top: 12px;
|
||||
font-size: 23px;
|
||||
}
|
||||
.panel,
|
||||
.full-panel {
|
||||
padding: 16px;
|
||||
}
|
||||
.panel-heading {
|
||||
display: block;
|
||||
}
|
||||
.heading-actions {
|
||||
margin-top: 13px;
|
||||
}
|
||||
.heading-actions select {
|
||||
flex: 1;
|
||||
}
|
||||
.search-input {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.footer {
|
||||
display: block;
|
||||
padding: 0 18px 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.footer span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user