541 lines
33 KiB
React
541 lines
33 KiB
React
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import { createRoot } from "react-dom/client";
|
||
import "./styles.css";
|
||
|
||
const NAV_ITEMS = [
|
||
{ id: "messages", label: "消息", description: "查找会话、阅读并回复", icon: "message" },
|
||
{ id: "broadcast", label: "群发", description: "创建受控群发任务", icon: "send" },
|
||
{ id: "contacts", label: "通讯录", description: "查找联系人和群聊", icon: "contacts" },
|
||
{ id: "tasks", label: "任务", description: "查看执行结果", icon: "tasks" },
|
||
];
|
||
|
||
const STATUS_LABELS = {
|
||
Online: "在线",
|
||
Degraded: "需要注意",
|
||
Offline: "已离线",
|
||
Registered: "已注册",
|
||
SessionLocked: "桌面已锁定",
|
||
WechatNotRunning: "微信未运行",
|
||
WechatNotLoggedIn: "微信未登录",
|
||
Pending: "待处理",
|
||
WaitingForClient: "等待 Client",
|
||
Accepted: "已接收",
|
||
Running: "执行中",
|
||
Succeeded: "已完成",
|
||
Failed: "失败",
|
||
Cancelled: "已取消",
|
||
Expired: "已过期",
|
||
ResultUnconfirmed: "待核对",
|
||
};
|
||
|
||
const TERMINAL_TASKS = new Set([
|
||
"Succeeded",
|
||
"Failed",
|
||
"Cancelled",
|
||
"Expired",
|
||
"ResultUnconfirmed",
|
||
]);
|
||
|
||
class ApiError extends Error {
|
||
constructor(message, status, code = "RequestFailed") {
|
||
super(message);
|
||
this.status = status;
|
||
this.code = code;
|
||
}
|
||
}
|
||
|
||
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,
|
||
payload.error?.code,
|
||
);
|
||
}
|
||
return payload;
|
||
}
|
||
|
||
const wait = (duration) => new Promise((resolve) => window.setTimeout(resolve, duration));
|
||
|
||
async function waitForTask(token, taskId) {
|
||
const deadline = Date.now() + 30000;
|
||
let delay = 250;
|
||
while (Date.now() < deadline) {
|
||
const task = await api(`/v1/tasks/${encodeURIComponent(taskId)}`, { token });
|
||
if (task.status === "Succeeded") return task.result?.content || {};
|
||
if (task.status === "WaitingForClient") {
|
||
throw new ApiError("当前 Client 暂不可用，请切换 Client 后重试。", 409, "ClientNotReady");
|
||
}
|
||
if (TERMINAL_TASKS.has(task.status)) {
|
||
throw new ApiError(
|
||
task.result?.message || `读取任务${STATUS_LABELS[task.status] || "未完成"}。`,
|
||
409,
|
||
task.result?.error_code || task.status,
|
||
);
|
||
}
|
||
await wait(delay);
|
||
delay = Math.min(1000, delay + 150);
|
||
}
|
||
throw new ApiError("读取超时，请稍后重试。", 408, "ReadTimeout");
|
||
}
|
||
|
||
async function readWithTask(path, body, token) {
|
||
const created = await api(path, {
|
||
token,
|
||
method: "POST",
|
||
body: {
|
||
...body,
|
||
idempotency_key: `${path}-${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
||
},
|
||
});
|
||
if (created.status === "WaitingForClient") {
|
||
throw new ApiError("当前 Client 暂不可用，请切换 Client 后重试。", 409, "ClientNotReady");
|
||
}
|
||
return waitForTask(token, created.task_id);
|
||
}
|
||
|
||
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 = 16) {
|
||
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", "WaitingForClient", "Degraded"].includes(status)) return "warning";
|
||
if (
|
||
[
|
||
"Failed",
|
||
"Cancelled",
|
||
"Expired",
|
||
"ResultUnconfirmed",
|
||
"Offline",
|
||
"SessionLocked",
|
||
"WechatNotRunning",
|
||
"WechatNotLoggedIn",
|
||
].includes(status)
|
||
)
|
||
return "negative";
|
||
return "neutral";
|
||
}
|
||
|
||
function statusLabel(status) {
|
||
return STATUS_LABELS[status] || status || "未知";
|
||
}
|
||
|
||
function isClientAvailable(node) {
|
||
return Boolean(node && ["Online", "Degraded", "Registered"].includes(node.status));
|
||
}
|
||
|
||
function activeAccount(node) {
|
||
if (!node) return "";
|
||
if (node.active_account_id) return node.active_account_id;
|
||
return node.accounts?.find((account) => account.active && account.verified)?.account_id || "";
|
||
}
|
||
|
||
function extractItems(content, keys) {
|
||
if (Array.isArray(content)) return content;
|
||
for (const key of keys) {
|
||
if (Array.isArray(content?.[key])) return content[key];
|
||
}
|
||
return [];
|
||
}
|
||
|
||
function normalizeSessions(content) {
|
||
return extractItems(content, ["items", "sessions", "chats"]).map((item, index) => ({
|
||
id: String(item.chat_id ?? item.chatId ?? item.session_id ?? item.id ?? index),
|
||
title: String(item.name ?? item.display_name ?? item.displayName ?? item.nickname ?? item.chat_id ?? item.id ?? "未命名会话"),
|
||
preview: String(item.last_message ?? item.lastMessage ?? item.preview ?? "暂无最近消息"),
|
||
unread: Number(item.unread_count ?? item.unreadCount ?? 0),
|
||
type: item.chat_type ?? item.chatType ?? "Private",
|
||
}));
|
||
}
|
||
|
||
function normalizeMessages(content) {
|
||
return extractItems(content, ["items", "messages"]).map((item, index) => ({
|
||
id: String(item.message_id ?? item.messageId ?? item.id ?? index),
|
||
sender: String(item.sender ?? item.sender_name ?? item.senderName ?? "对方"),
|
||
text: typeof item === "string" ? item : String(item.content ?? item.text ?? item.message ?? ""),
|
||
at: item.occurred_at ?? item.occurredAt ?? item.created_at ?? item.createdAt,
|
||
}));
|
||
}
|
||
|
||
function normalizeContacts(content) {
|
||
return extractItems(content, ["items", "contacts", "sessions"]).map((item, index) => ({
|
||
id: String(item.contact_id ?? item.contactId ?? item.chat_id ?? item.chatId ?? item.id ?? index),
|
||
title: String(item.name ?? item.display_name ?? item.displayName ?? item.nickname ?? item.contact_id ?? item.id ?? "未命名联系人"),
|
||
type: item.chat_type ?? item.chatType ?? (item.is_group ? "Group" : "Private"),
|
||
detail: String(item.remark ?? item.alias ?? item.account_id ?? item.accountId ?? ""),
|
||
}));
|
||
}
|
||
|
||
function Icon({ name, size = 18 }) {
|
||
const paths = {
|
||
message: <><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4.5 3v-3h0A2.5 2.5 0 0 1 4 12.5z" /><path d="M8 8h8M8 11h5" /></>,
|
||
send: <><path d="m3 4 18 8-18 8 3.5-8z" /><path d="M6.5 12H21" /></>,
|
||
contacts: <><circle cx="9" cy="8" r="3" /><path d="M3.5 19a5.5 5.5 0 0 1 11 0M17 7v6M14 10h6" /></>,
|
||
tasks: <><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 8h8M8 12h8M8 16h5" /></>,
|
||
settings: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" /><circle cx="12" cy="12" r="4" /></>,
|
||
refresh: <><path d="M20 11a8 8 0 0 0-14.5-4.5L4 8" /><path d="M4 4v4h4M4 13a8 8 0 0 0 14.5 4.5L20 16" /><path d="M20 20v-4h-4" /></>,
|
||
chevron: <path d="m9 6 6 6-6 6" />,
|
||
search: <><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5" /></>,
|
||
shield: <><path d="M12 3 19 6v5c0 4.2-2.8 7.8-7 9-4.2-1.2-7-4.8-7-9V6z" /><path d="m9 12 2 2 4-4" /></>,
|
||
alert: <><path d="M12 4 21 20H3z" /><path d="M12 10v4M12 17v.2" /></>,
|
||
close: <><path d="m6 6 12 12M18 6 6 18" /></>,
|
||
logout: <><path d="M10 4H5v16h5M14 8l4 4-4 4M8 12h10" /></>,
|
||
arrow: <><path d="M4 12h15M13 6l6 6-6 6" /></>,
|
||
check: <path d="m5 12 4 4L19 6" />,
|
||
};
|
||
return (
|
||
<svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||
{paths[name] || paths.settings}
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function StatusBadge({ value }) {
|
||
return (
|
||
<span className={`status-badge ${statusTone(value)}`}>
|
||
<i />
|
||
{statusLabel(value)}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
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">
|
||
<section className="login-panel" aria-labelledby="login-title">
|
||
<div className="brand-mark">W</div>
|
||
<p className="eyebrow">WXAGENT WORKSPACE</p>
|
||
<h1 id="login-title">进入工作台</h1>
|
||
<p className="login-intro">连接已授权的 Client，处理消息、通讯录和任务结果。</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" role="alert">{error}</div>}
|
||
<button className="primary-button full" disabled={busy || !username || !password}>{busy ? "登录中…" : "登录工作台"}</button>
|
||
</form>
|
||
<p className="login-footnote"><span className="secure-dot" /> 会话只保存在当前浏览器标签页</p>
|
||
</section>
|
||
</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>用户工作台</span></div>
|
||
</div>
|
||
<p className="nav-caption">工作区</p>
|
||
<nav aria-label="主导航">
|
||
{NAV_ITEMS.map((item) => (
|
||
<button key={item.id} className={view === item.id ? "nav-item active" : "nav-item"} onClick={() => setView(item.id)}>
|
||
<Icon name={item.icon} size={18} />
|
||
<span>{item.label}</span>
|
||
</button>
|
||
))}
|
||
</nav>
|
||
<div className="sidebar-spacer" />
|
||
<button className={view === "settings" ? "nav-item active" : "nav-item"} onClick={() => setView("settings")}>
|
||
<Icon name="settings" size={18} />
|
||
<span>设置与诊断</span>
|
||
</button>
|
||
<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="退出登录" aria-label="退出登录" onClick={onLogout}><Icon name="logout" size={17} /></button>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
function Topbar({ title, subtitle, nodes, selectedClientId, onClientChange, onRefresh, loading }) {
|
||
const selected = nodes.find((node) => node.node_id === selectedClientId);
|
||
return (
|
||
<header className="topbar">
|
||
<div className="topbar-copy"><h1>{title}</h1><p>{subtitle}</p></div>
|
||
<div className="topbar-actions">
|
||
<label className="client-switcher">
|
||
<span>当前 Client</span>
|
||
<select value={selectedClientId} onChange={(event) => onClientChange(event.target.value)} disabled={!nodes.length}>
|
||
{!nodes.length && <option value="">暂无 Client</option>}
|
||
{nodes.map((node) => <option key={node.node_id} value={node.node_id}>{node.node_id} · {statusLabel(node.status)}</option>)}
|
||
</select>
|
||
</label>
|
||
{selected && <StatusBadge value={selected.status} />}
|
||
<button className="refresh-button" onClick={onRefresh} disabled={loading} aria-label="刷新数据"><span className={loading ? "spin" : ""}><Icon name="refresh" size={16} /></span>{loading ? "同步中" : "刷新"}</button>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
function ConnectionBanner({ nodes, selectedNode, onSettings }) {
|
||
if (!nodes.length) {
|
||
return <div className="connection-banner negative"><Icon name="alert" size={18} /><div><strong>还没有可用 Client</strong><span>请启动已配置的 Desktop Agent；浏览器不会模拟连接状态。</span></div><button className="text-button" onClick={onSettings}>查看连接说明</button></div>;
|
||
}
|
||
if (!isClientAvailable(selectedNode)) {
|
||
const other = nodes.some(isClientAvailable);
|
||
return <div className="connection-banner warning"><Icon name="alert" size={18} /><div><strong>当前 Client 不可用</strong><span>{other ? "其它 Client 不受影响，请从顶部切换。" : "所有 Client 当前都不可用，请先恢复连接。"}</span></div><button className="text-button" onClick={onSettings}>设置与诊断</button></div>;
|
||
}
|
||
if (!activeAccount(selectedNode)) {
|
||
return <div className="connection-banner warning"><Icon name="alert" size={18} /><div><strong>当前 Client 尚未确认微信账号</strong><span>只读数据需要已验证的活动账号，先完成账号绑定后再操作。</span></div><button className="text-button" onClick={onSettings}>查看账号</button></div>;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function ContextEmpty({ title = "没有选中的 Client", text = "请先连接并选择一个可用 Client。", onSettings }) {
|
||
return <div className="context-empty"><div className="empty-icon"><Icon name="shield" size={28} /></div><h3>{title}</h3><p>{text}</p>{onSettings && <button className="secondary-button" onClick={onSettings}>打开设置与诊断</button>}</div>;
|
||
}
|
||
|
||
function LoadingState({ text = "正在读取…" }) {
|
||
return <div className="loading-state"><span className="loader" />{text}</div>;
|
||
}
|
||
|
||
function Empty({ text, action }) {
|
||
return <div className="empty-state"><div className="empty-icon"><Icon name="search" size={26} /></div><p>{text}</p>{action}</div>;
|
||
}
|
||
|
||
function ReadError({ error, onRetry }) {
|
||
return <div className="inline-error" role="alert"><Icon name="alert" size={17} /><span>{error}</span>{onRetry && <button className="text-button" onClick={onRetry}>重试</button>}</div>;
|
||
}
|
||
|
||
function MessagesView({ token, client, onSettings }) {
|
||
const clientId = client?.node_id || "";
|
||
const accountId = activeAccount(client);
|
||
const [sessions, setSessions] = useState([]);
|
||
const [sessionsState, setSessionsState] = useState({ loading: false, error: "" });
|
||
const [query, setQuery] = useState("");
|
||
const [selectedChat, setSelectedChat] = useState(null);
|
||
const [messages, setMessages] = useState([]);
|
||
const [messagesState, setMessagesState] = useState({ loading: false, error: "" });
|
||
const requestRef = useRef(0);
|
||
|
||
const loadSessions = useCallback(async () => {
|
||
if (!clientId || !accountId) return;
|
||
const requestId = ++requestRef.current;
|
||
setSessionsState({ loading: true, error: "" });
|
||
try {
|
||
const content = await readWithTask("/v1/reads/sessions", { node_id: clientId, account_id: accountId, limit: 100 }, token);
|
||
if (requestId !== requestRef.current) return;
|
||
setSessions(normalizeSessions(content));
|
||
} catch (reason) {
|
||
if (requestId === requestRef.current) setSessionsState({ loading: false, error: reason.message });
|
||
return;
|
||
}
|
||
setSessionsState({ loading: false, error: "" });
|
||
}, [accountId, clientId, token]);
|
||
|
||
useEffect(() => {
|
||
setSelectedChat(null);
|
||
setSessions([]);
|
||
setMessages([]);
|
||
if (!clientId || !accountId) return;
|
||
loadSessions();
|
||
}, [clientId, accountId, loadSessions]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedChat || selectedChat.clientId !== clientId || !clientId || !accountId) return;
|
||
const requestId = ++requestRef.current;
|
||
setMessagesState({ loading: true, error: "" });
|
||
readWithTask("/v1/reads/messages", { node_id: clientId, account_id: accountId, chat_id: selectedChat.id, limit: 100, include_content: true }, token)
|
||
.then((content) => {
|
||
if (requestId !== requestRef.current) return;
|
||
setMessages(normalizeMessages(content));
|
||
setMessagesState({ loading: false, error: "" });
|
||
})
|
||
.catch((reason) => {
|
||
if (requestId === requestRef.current) setMessagesState({ loading: false, error: reason.message });
|
||
});
|
||
}, [accountId, clientId, selectedChat, token]);
|
||
|
||
if (!client) return <ContextEmpty onSettings={onSettings} />;
|
||
const visibleSessions = sessions.filter((session) => !query || `${session.title} ${session.id}`.toLowerCase().includes(query.toLowerCase()));
|
||
return (
|
||
<div className="message-workspace">
|
||
<section className="session-panel">
|
||
<div className="section-heading compact"><div><h2>会话</h2><p>{sessions.length ? `${sessions.length} 个会话` : "当前 Client 的会话"}</p></div><button className="icon-button" onClick={loadSessions} disabled={sessionsState.loading} aria-label="刷新会话"><Icon name="refresh" size={16} /></button></div>
|
||
<label className="search-box"><Icon name="search" size={16} /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="搜索会话" /></label>
|
||
{sessionsState.loading ? <LoadingState text="正在读取会话…" /> : sessionsState.error ? <ReadError error={sessionsState.error} onRetry={loadSessions} /> : visibleSessions.length === 0 ? <Empty text="暂无会话，或当前账号还没有可见数据。" /> : <div className="session-list">{visibleSessions.map((session) => <button key={session.id} className={selectedChat?.id === session.id ? "session-row selected" : "session-row"} onClick={() => setSelectedChat({ ...session, clientId })}><span className="session-avatar">{session.title.slice(0, 1).toUpperCase()}</span><span className="session-copy"><strong>{session.title}</strong><small>{session.preview}</small></span>{session.unread > 0 && <b>{session.unread}</b>}</button>)}</div>}
|
||
</section>
|
||
<section className="conversation-panel">
|
||
{!selectedChat ? <ContextEmpty title="选择一个会话" text="从左侧选择会话后，读取该 Client 的消息。" /> : <><div className="conversation-head"><div><p className="eyebrow">当前 Client · {clientId}</p><h2>{selectedChat.title}</h2><span>{selectedChat.type === "Group" ? "群聊" : "私聊"} · {shortId(selectedChat.id, 28)}</span></div><StatusBadge value={client.status} /></div>{messagesState.loading ? <LoadingState text="正在读取消息…" /> : messagesState.error ? <ReadError error={messagesState.error} onRetry={() => setSelectedChat({ ...selectedChat })} /> : messages.length === 0 ? <Empty text="这个会话暂时没有可显示的消息。" /> : <div className="message-list">{messages.map((message) => <article className="message-row" key={message.id}><div className="message-avatar">{message.sender.slice(0, 1).toUpperCase()}</div><div><div className="message-meta"><strong>{message.sender}</strong><span>{formatTime(message.at)}</span></div><p>{message.text || "（无正文）"}</p></div></article>)}</div>}<div className="composer"><textarea disabled rows={2} placeholder="发送消息暂未开放，需完成 Windows 真机验收" /><button className="primary-button" disabled title="写操作尚未通过真机验收">发送</button></div></>}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function BroadcastView({ client, onSettings }) {
|
||
return <section className="workspace-panel gated-panel"><div className="gated-mark"><Icon name="shield" size={24} /></div><div><p className="eyebrow">CONTROLLED ACTION</p><h2>受控群发验证</h2><p>单 Client 的 Client 端已提供 broadcast-text：冻结获准对象名单，逐项串行发送，返回每个对象的结果，并支持停止和幂等重放。</p><div className="step-list"><span><b>1</b>冻结对象</span><span><b>2</b>预览确认</span><span><b>3</b>逐项发送</span><span><b>4</b>查看结果</span></div><button className="primary-button" disabled>{client ? "Web 提交仍需单独验收" : "请先连接 Client"}</button><button className="text-button" onClick={onSettings}>查看 Client 验证状态 <Icon name="arrow" size={14} /></button></div></section>;
|
||
}
|
||
|
||
function ContactsView({ token, client, onSettings }) {
|
||
const clientId = client?.node_id || "";
|
||
const accountId = activeAccount(client);
|
||
const [groupsOnly, setGroupsOnly] = useState(false);
|
||
const [query, setQuery] = useState("");
|
||
const [contacts, setContacts] = useState([]);
|
||
const [state, setState] = useState({ loading: false, error: "" });
|
||
const requestRef = useRef(0);
|
||
const load = useCallback(async () => {
|
||
if (!clientId || !accountId) return;
|
||
const requestId = ++requestRef.current;
|
||
setState({ loading: true, error: "" });
|
||
try {
|
||
const content = await readWithTask("/v1/reads/contacts", { node_id: clientId, account_id: accountId, limit: 200, groups_only: groupsOnly, contains: query }, token);
|
||
if (requestId !== requestRef.current) return;
|
||
setContacts(normalizeContacts(content));
|
||
setState({ loading: false, error: "" });
|
||
} catch (reason) {
|
||
if (requestId === requestRef.current) setState({ loading: false, error: reason.message });
|
||
}
|
||
}, [accountId, clientId, groupsOnly, query, token]);
|
||
useEffect(() => { setContacts([]); if (clientId && accountId) load(); }, [clientId, accountId, groupsOnly]);
|
||
if (!client) return <ContextEmpty onSettings={onSettings} />;
|
||
const visible = contacts.filter((contact) => !query || `${contact.title} ${contact.id} ${contact.detail}`.toLowerCase().includes(query.toLowerCase()));
|
||
return <section className="workspace-panel"><div className="section-heading"><div><h2>通讯录</h2><p>只读查看当前 Client 已授权的联系人和群聊。</p></div><div className="heading-actions"><label className="check-filter"><input type="checkbox" checked={groupsOnly} onChange={(event) => setGroupsOnly(event.target.checked)} />只看群聊</label><button className="secondary-button" disabled title="添加好友尚未通过真机验收">添加好友</button></div></div><div className="toolbar"><label className="search-box wide"><Icon name="search" size={16} /><input value={query} onChange={(event) => setQuery(event.target.value)} onKeyDown={(event) => event.key === "Enter" && load()} placeholder="搜索联系人或群聊" /></label><button className="secondary-button" onClick={load} disabled={state.loading}>{state.loading ? "读取中…" : "刷新"}</button></div>{state.loading ? <LoadingState text="正在读取通讯录…" /> : state.error ? <ReadError error={state.error} onRetry={load} /> : visible.length === 0 ? <Empty text="暂无可见联系人或群聊。" /> : <div className="contact-list">{visible.map((contact) => <div className="contact-row" key={contact.id}><span className="contact-avatar">{contact.title.slice(0, 1).toUpperCase()}</span><div><strong>{contact.title}</strong><small>{contact.type === "Group" ? "群聊" : "联系人"} · {shortId(contact.id, 28)}{contact.detail ? ` · ${contact.detail}` : ""}</small></div><button className="text-button" disabled title="写操作尚未通过真机验收">添加好友</button></div>)}</div>}</section>;
|
||
}
|
||
|
||
function TasksView({ tasks, selectedClientId }) {
|
||
const [filter, setFilter] = useState("all");
|
||
const visible = tasks.filter((task) => task.node_id === selectedClientId && (filter === "all" || task.status === filter));
|
||
return <section className="workspace-panel"><div className="section-heading"><div><h2>任务结果</h2><p>当前 Client 的任务状态和安全边界。</p></div><div className="heading-actions"><span className="read-only-note"><Icon name="shield" size={14} />只读视图</span><select value={filter} onChange={(event) => setFilter(event.target.value)}><option value="all">全部状态</option><option value="Pending">待处理</option><option value="WaitingForClient">等待 Client</option><option value="Running">执行中</option><option value="Succeeded">已完成</option><option value="Failed">失败</option><option value="ResultUnconfirmed">待核对</option></select></div></div>{visible.length === 0 ? <Empty text="当前 Client 暂无任务记录。" /> : <div className="task-list">{visible.map((task) => <article className="task-row" key={task.task_id}><div className="task-main"><div className="task-title"><strong>{task.kind}</strong><StatusBadge value={task.status} /></div><p>{task.account_id} · {shortId(task.task_id, 22)}</p><small>{task.status === "WaitingForClient" ? "Client 离线后等待显式恢复；不会自动重放写操作。" : task.result?.message || task.result?.error_code || `更新于 ${formatTime(task.updated_at)}`}</small></div><div className="task-meta"><span>第 {task.lease_generation || 0} 代租约</span><time>{formatTime(task.updated_at)}</time></div></article>)}</div>}</section>;
|
||
}
|
||
|
||
function NodesTable({ nodes }) {
|
||
return <div className="diagnostic-list">{nodes.length === 0 ? <Empty text="暂无注册 Client。" /> : nodes.map((node) => <article className="diagnostic-row" key={node.node_id}><div className="diagnostic-title"><span className="node-avatar">{node.node_id.slice(0, 1).toUpperCase()}</span><div><strong>{node.node_id}</strong><small>{node.active_account_id || "尚未确认活动账号"} · 最近心跳 {formatTime(node.last_heartbeat_at)}</small></div></div><StatusBadge value={node.status} /></article>)}</div>;
|
||
}
|
||
|
||
function EventsTable({ events, selectedClientId }) {
|
||
const visible = events.filter((event) => !selectedClientId || event.node_id === selectedClientId);
|
||
return <div className="diagnostic-list">{visible.length === 0 ? <Empty text="当前 Client 暂无事件。" /> : visible.slice(0, 30).map((event) => <article className="diagnostic-row" key={event.event_id}><div><strong>{shortId(event.chat_id, 24)}</strong><small>{event.node_id} · {event.chat_type === "Group" ? "群聊" : "私聊"} · {formatTime(event.received_at)}</small></div><span className="event-preview">{event.content || "无正文"}</span></article>)}</div>;
|
||
}
|
||
|
||
function AuditTable({ audit }) {
|
||
return <div className="diagnostic-list">{audit.length === 0 ? <Empty text="暂无审计记录。" /> : audit.slice(0, 30).map((item) => <article className="diagnostic-row" key={item.id}><div><strong>{item.action}</strong><small>{item.principal} · {item.resource}</small></div><span>{formatTime(item.at)}</span></article>)}</div>;
|
||
}
|
||
|
||
function SettingsView({ nodes, events, audit, selectedClientId, onSelectClient }) {
|
||
const [tab, setTab] = useState("connection");
|
||
return <section className="settings-layout"><aside className="settings-nav"><button className={tab === "connection" ? "settings-tab active" : "settings-tab"} onClick={() => setTab("connection")}><strong>连接与账号</strong><span>选择 Client、确认状态</span></button><button className={tab === "diagnostics" ? "settings-tab active" : "settings-tab"} onClick={() => setTab("diagnostics")}><strong>高级诊断</strong><span>节点、事件、AI、审计</span></button></aside><div className="settings-content">{tab === "connection" ? <><div className="workspace-panel"><div className="section-heading"><div><h2>连接与账号</h2><p>每个 Client 独立连接，单个 Client 离线不会阻断其它 Client。</p></div><StatusBadge value={nodes.some(isClientAvailable) ? "Online" : "Offline"} /></div><NodesTable nodes={nodes} /></div><div className="workspace-panel"><div className="section-heading"><div><h2>安全边界</h2><p>当前版本只开放真实后端已支持且可验证的只读能力。</p></div></div><ul className="boundary-list"><li><Icon name="check" size={15} />消息、通讯录、任务结果按选定 Client 隔离读取</li><li><Icon name="check" size={15} />Client 掉线只影响当前上下文，任务不会自动改投</li><li><Icon name="alert" size={15} />发送、群发、添加好友等待 Windows 真机验收</li></ul></div></> : <><div className="workspace-panel"><div className="section-heading"><div><h2>Client 诊断</h2><p>技术状态只在这里展示，不干扰普通操作。</p></div></div><div className="client-pills">{nodes.map((node) => <button key={node.node_id} className={node.node_id === selectedClientId ? "client-pill active" : "client-pill"} onClick={() => onSelectClient(node.node_id)}><span>{node.node_id}</span><StatusBadge value={node.status} /></button>)}</div></div><div className="workspace-panel"><div className="section-heading"><div><h2>AI 能力</h2><p>AI 入口保留在高级诊断中；当前不自动调用，也不影响消息、通讯录和任务操作。</p></div><span className="read-only-note"><Icon name="shield" size={14} />按能力矩阵开放</span></div></div><div className="workspace-panel"><div className="section-heading"><div><h2>白名单事件</h2><p>当前选中 Client 的已授权事件。</p></div></div><EventsTable events={events} selectedClientId={selectedClientId} /></div><div className="workspace-panel"><div className="section-heading"><div><h2>操作审计</h2><p>用于定位连接、任务和权限问题。</p></div></div><AuditTable audit={audit} /></div></>}</div></section>;
|
||
}
|
||
|
||
function App() {
|
||
const [token, setToken] = useState(() => sessionStorage.getItem("wxagent-token") || "");
|
||
const [username, setUsername] = useState(() => sessionStorage.getItem("wxagent-user") || "");
|
||
const [view, setView] = useState("messages");
|
||
const [nodes, setNodes] = useState([]);
|
||
const [selectedClientId, setSelectedClientId] = useState(() => sessionStorage.getItem("wxagent-client") || "");
|
||
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");
|
||
sessionStorage.removeItem("wxagent-client");
|
||
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);
|
||
}
|
||
}, [logout, token]);
|
||
|
||
useEffect(() => {
|
||
refresh();
|
||
if (!token) return undefined;
|
||
const id = window.setInterval(refresh, 15000);
|
||
return () => window.clearInterval(id);
|
||
}, [refresh, token]);
|
||
|
||
useEffect(() => {
|
||
if (!nodes.length) {
|
||
setSelectedClientId("");
|
||
return;
|
||
}
|
||
if (!nodes.some((node) => node.node_id === selectedClientId)) {
|
||
const next = nodes.find(isClientAvailable) || nodes[0];
|
||
setSelectedClientId(next.node_id);
|
||
sessionStorage.setItem("wxagent-client", next.node_id);
|
||
}
|
||
}, [nodes, selectedClientId]);
|
||
|
||
const handleClientChange = (clientId) => {
|
||
setSelectedClientId(clientId);
|
||
sessionStorage.setItem("wxagent-client", clientId);
|
||
};
|
||
const handleLogin = (nextToken, nextUser) => {
|
||
sessionStorage.setItem("wxagent-token", nextToken);
|
||
sessionStorage.setItem("wxagent-user", nextUser);
|
||
setToken(nextToken);
|
||
setUsername(nextUser);
|
||
};
|
||
const selectedNode = useMemo(() => nodes.find((node) => node.node_id === selectedClientId), [nodes, selectedClientId]);
|
||
const nav = NAV_ITEMS.find((item) => item.id === view);
|
||
const title = nav?.label || "设置与诊断";
|
||
const subtitle = nav?.description || "连接、账号和高级诊断信息";
|
||
|
||
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} nodes={nodes} selectedClientId={selectedClientId} onClientChange={handleClientChange} onRefresh={refresh} loading={loading} />{error && <div className="global-error" role="alert"><Icon name="alert" size={16} /><span>{error}</span><button onClick={() => setError("")} aria-label="关闭错误"><Icon name="close" size={16} /></button></div>}<ConnectionBanner nodes={nodes} selectedNode={selectedNode} onSettings={() => setView("settings")} /><div className="page-content">{view === "messages" && <MessagesView token={token} client={selectedNode} onSettings={() => setView("settings")} />}{view === "broadcast" && <BroadcastView client={selectedNode} onSettings={() => setView("settings")} />}{view === "contacts" && <ContactsView token={token} client={selectedNode} onSettings={() => setView("settings")} />}{view === "tasks" && <TasksView tasks={tasks} selectedClientId={selectedClientId} />}{view === "settings" && <SettingsView nodes={nodes} events={events} audit={audit} selectedClientId={selectedClientId} onSelectClient={handleClientChange} />}</div><footer className="footer"><span>WxAgent 工作台 · Client 独立隔离</span><span>写操作需通过真实能力与真机验收</span></footer></main></div>;
|
||
}
|
||
|
||
createRoot(document.getElementById("root")).render(<App />);
|