@bolloon/bolloon-agent 0.2.9 → 0.2.11

package/dist/web/components/p2p/P2PModal.js

@@ -1,188 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { p2pManager } from './p2p-manager.js';
-export function P2PModal({ visible, onClose }) {
-    const [activeTab, setActiveTab] = useState('identity');
-    const [initialized, setInitialized] = useState(false);
-    const [status, setStatus] = useState('idle');
-    const [statusText, setStatusText] = useState('未初始化');
-    const [identity, setIdentity] = useState(null);
-    const [connectInput, setConnectInput] = useState('');
-    const [progress, setProgress] = useState(null);
-    const [progressVisible, setProgressVisible] = useState(false);
-    const [connectResult, setConnectResult] = useState(null);
-    const [history, setHistory] = useState([]);
-    const [messages, setMessages] = useState([]);
-    const [unreadCount, setUnreadCount] = useState(0);
-    const [peers, setPeers] = useState([]);
-    const [persistentConnections, setPersistentConnections] = useState([]);
-    const [toast, setToast] = useState(null);
-    useEffect(() => {
-        if (visible && !initialized) {
-            console.log('[P2P Modal] visible=true, initialized=false, calling initP2P');
-            initP2P();
-        }
-        else if (visible && initialized && !identity) {
-            // 已初始化但没有identity，可能是首次未触发
-            console.log('[P2P Modal] visible=true, initialized=true, but no identity, calling initP2P again');
-            initP2P();
-        }
-    }, [visible, initialized]);
-    useEffect(() => {
-        if (visible) {
-            loadActiveTab();
-        }
-    }, [activeTab, visible]);
-    async function initP2P() {
-        setStatus('connecting');
-        setStatusText('初始化中...');
-        try {
-            const identity = await p2pManager.init();
-            setIdentity(identity);
-            setStatus('online');
-            setStatusText('已连接');
-            setInitialized(true);
-        }
-        catch (e) {
-            setStatus('error');
-            setStatusText('初始化失败');
-        }
-    }
-    async function loadActiveTab() {
-        switch (activeTab) {
-            case 'history':
-                await loadHistory();
-                break;
-            case 'messages':
-                await loadMessages();
-                break;
-            case 'connect':
-                loadPeers();
-                loadPersistentConnections();
-                break;
-        }
-    }
-    async function loadHistory() {
-        try {
-            const hist = await p2pManager.getHistory();
-            setHistory(hist);
-        }
-        catch (e) {
-            console.error('[P2P Modal] 加载历史失败:', e);
-        }
-    }
-    async function loadMessages() {
-        try {
-            const msgs = await p2pManager.getMessages();
-            setMessages(msgs);
-            const unread = p2pManager.getUnreadCount();
-            setUnreadCount(unread);
-        }
-        catch (e) {
-            console.error('[P2P Modal] 加载消息失败:', e);
-        }
-    }
-    function loadPeers() {
-        const connectedPeers = p2pManager.getConnectedPeers();
-        setPeers(connectedPeers);
-    }
-    async function loadPersistentConnections() {
-        try {
-            const connections = await p2pManager.getPersistentConnections();
-            setPersistentConnections(connections);
-        }
-        catch (e) {
-            console.error('[P2P Modal] 加载持久连接失败:', e);
-        }
-    }
-    async function handleToggleConnection(connection) {
-        const newStatus = connection.status === 'connected' ? 'disconnected' : 'connected';
-        const enable = newStatus === 'connected';
-        try {
-            const success = await p2pManager.toggleConnection(connection, enable);
-            if (success) {
-                await loadPersistentConnections();
-                loadPeers();
-                showToast(enable ? '正在连接...' : '已断开');
-            }
-            else {
-                showToast('操作失败');
-            }
-        }
-        catch (e) {
-            showToast('操作失败');
-        }
-    }
-    async function handleOpenChannel(channelId) {
-        showToast(`打开通道: ${channelId}`);
-        onClose();
-    }
-    async function handleConnect() {
-        if (!connectInput.trim())
-            return;
-        setProgressVisible(true);
-        setProgress({ stage: 'init', percent: 0, message: '验证输入格式...' });
-        setConnectResult(null);
-        try {
-            const result = await p2pManager.connectAndCreateChannel(connectInput, (p) => setProgress(p));
-            if (result.success) {
-                setConnectResult({ type: 'success', text: `已连接到 ${result.name || '节点'}` });
-                setConnectInput('');
-                await loadHistory();
-                loadPeers();
-                loadPersistentConnections();
-            }
-            else {
-                setConnectResult({ type: 'error', text: result.error || '连接失败' });
-            }
-        }
-        catch (e) {
-            setConnectResult({ type: 'error', text: e.message });
-        }
-        finally {
-            setTimeout(() => {
-                setProgressVisible(false);
-                setProgress(null);
-            }, 2000);
-        }
-    }
-    async function handleHistoryAction(action, item) {
-        if (action === 'connect') {
-            setConnectInput(item.cid);
-            setActiveTab('connect');
-        }
-        else if (action === 'pin') {
-            await p2pManager.updateHistory(item.id, { isPinned: !item.isPinned });
-            await loadHistory();
-        }
-        else if (action === 'delete') {
-            await p2pManager.deleteHistory(item.id);
-            await loadHistory();
-        }
-    }
-    async function handleMarkAllRead() {
-        await p2pManager.messages.markAllRead();
-        await loadMessages();
-    }
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text);
-        showToast('已复制');
-    }
-    function showToast(msg) {
-        setToast(msg);
-        setTimeout(() => setToast(null), 2000);
-    }
-    function handleCopyLink() {
-        if (identity) {
-            const link = `bolloon://connect?did=${encodeURIComponent(identity.did)}&cid=${encodeURIComponent(identity.cid)}`;
-            navigator.clipboard.writeText(link);
-            showToast('链接已复制');
-        }
-    }
-    function handleExportFile() {
-        p2pManager.identity.exportIdentityFile();
-    }
-    if (!visible)
-        return null;
-    return (_jsxs("div", { className: "p2p-modal-overlay", onClick: (e) => e.target === e.currentTarget && onClose(), children: [_jsxs("div", { className: "p2p-modal", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h2", { children: "P2P \u7F51\u7EDC" }), _jsx("button", { className: "modal-close", onClick: onClose, children: "\u00D7" })] }), _jsxs("div", { className: "tabs", children: [_jsx("button", { className: `tab ${activeTab === 'identity' ? 'active' : ''}`, onClick: () => setActiveTab('identity'), children: "\u6211\u7684\u8EAB\u4EFD" }), _jsx("button", { className: `tab ${activeTab === 'connect' ? 'active' : ''}`, onClick: () => setActiveTab('connect'), children: "\u8FDE\u63A5" }), _jsx("button", { className: `tab ${activeTab === 'history' ? 'active' : ''}`, onClick: () => setActiveTab('history'), children: "\u5386\u53F2\u8BB0\u5F55" }), _jsxs("button", { className: `tab ${activeTab === 'messages' ? 'active' : ''}`, onClick: () => setActiveTab('messages'), children: ["\u6D88\u606F ", unreadCount > 0 && _jsx("span", { className: "unread-badge", children: unreadCount })] })] }), activeTab === 'identity' && (_jsxs("div", { className: "tab-content active", children: [_jsxs("div", { className: "identity-card", children: [_jsxs("div", { className: "status-row", children: [_jsx("span", { className: `status-indicator ${status}` }), _jsx("span", { children: statusText })] }), _jsxs("div", { className: "info-row", children: [_jsx("span", { className: "info-label", children: "DID:" }), _jsx("code", { className: "info-value", children: identity?.did || '-' }), identity?.did && _jsx("button", { className: "copy-btn", onClick: () => copyToClipboard(identity.did), children: "\uD83D\uDCCB" })] }), _jsxs("div", { className: "info-row", children: [_jsx("span", { className: "info-label", children: "CID:" }), _jsx("code", { className: "info-value", children: identity?.cid || '-' }), identity?.cid && _jsx("button", { className: "copy-btn", onClick: () => copyToClipboard(identity.cid), children: "\uD83D\uDCCB" })] }), _jsxs("div", { className: "info-row", children: [_jsx("span", { className: "info-label", children: "Node ID:" }), _jsx("code", { className: "info-value", children: identity?.irohNodeId || '-' }), identity?.irohNodeId && _jsx("button", { className: "copy-btn", onClick: () => copyToClipboard(identity.irohNodeId), children: "\uD83D\uDCCB" })] })] }), !initialized && _jsx("button", { className: "btn-primary", onClick: initP2P, children: "\u521D\u59CB\u5316 P2P" }), identity && (_jsxs("div", { className: "share-panel", children: [_jsx("h4", { children: "\u5206\u4EAB\u7ED9\u597D\u53CB" }), _jsxs("div", { className: "share-actions", children: [_jsx("button", { className: "btn-secondary", onClick: handleCopyLink, children: "\uD83D\uDCCB \u590D\u5236\u94FE\u63A5" }), _jsx("button", { className: "btn-secondary", onClick: handleExportFile, children: "\uD83D\uDCC1 \u5BFC\u51FA\u6587\u4EF6" })] })] }))] })), activeTab === 'connect' && (_jsxs("div", { className: "tab-content active", children: [_jsxs("div", { className: "connect-form", children: [_jsx("input", { type: "text", placeholder: "\u7C98\u8D34 CID \u6216\u94FE\u63A5...", value: connectInput, onChange: (e) => setConnectInput(e.target.value), onKeyPress: (e) => e.key === 'Enter' && handleConnect() }), _jsx("button", { className: "btn-secondary", onClick: handleConnect, children: "\u8FDE\u63A5 \u25B6" })] }), progressVisible && progress && (_jsxs("div", { className: "progress show", children: [_jsx("div", { className: "progress-bar", children: _jsx("div", { className: "progress-fill", style: { width: `${progress.percent}%` } }) }), _jsx("span", { className: "progress-text", children: progress.message })] })), connectResult && (_jsx("div", { className: `connect-result ${connectResult.type} show`, children: connectResult.text })), _jsxs("div", { className: "persistent-peers-section", children: [_jsxs("h4", { children: ["\u6301\u4E45\u8FDE\u63A5 (", persistentConnections.length, ")"] }), persistentConnections.length === 0 ? (_jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u6301\u4E45\u8FDE\u63A5" })) : (persistentConnections.map((conn) => (_jsxs("div", { className: `persistent-peer-item ${conn.status}`, children: [_jsx("div", { className: "peer-status-indicator", children: _jsx("span", { className: `dot ${conn.status === 'connected' ? 'online' : 'offline'}` }) }), _jsxs("div", { className: "peer-info", children: [_jsxs("div", { className: "peer-name", children: [conn.peerName || 'Unknown', conn.isAutoConnect && _jsx("span", { className: "auto-badge", children: "\u81EA\u52A8" })] }), _jsxs("div", { className: "peer-meta", children: [_jsxs("span", { children: ["DID: ", conn.peerDid?.substring(0, 16), "..."] }), _jsxs("span", { children: ["\u72B6\u6001: ", conn.status === 'connected' ? '已连接' : '未连接'] })] })] }), _jsxs("div", { className: "peer-actions", children: [_jsx("button", { className: `btn-sm ${conn.status === 'connected' ? 'btn-danger' : 'btn-primary'}`, onClick: () => handleToggleConnection(conn), children: conn.status === 'connected' ? '断开' : '连接' }), conn.channelId && (_jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleOpenChannel(conn.channelId), children: "\u5BF9\u8BDD" }))] })] }, conn.id))))] }), _jsxs("div", { className: "peers-section", children: [_jsxs("h4", { children: ["\u5F53\u524D\u8FDE\u63A5 (", peers.length, ")"] }), _jsxs("div", { id: "p2p-peers-list", children: [peers.length === 0 && _jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u8FDE\u63A5" }), peers.map((peer, i) => (_jsxs("div", { className: "peer-item", children: [_jsx("div", { className: "peer-status", children: _jsx("span", { className: "dot online" }) }), _jsxs("div", { className: "peer-info", children: [_jsx("div", { className: "peer-name", children: peer.info?.name || 'Unknown' }), _jsxs("div", { className: "peer-meta", children: [(peer.nodeId || '').substring(0, 16), "..."] })] })] }, i)))] })] })] })), activeTab === 'history' && (_jsxs("div", { className: "tab-content active", children: [_jsx("div", { className: "toolbar", children: _jsx("button", { className: "btn-secondary btn-sm", onClick: loadHistory, children: "\uD83D\uDD04 \u5237\u65B0" }) }), _jsxs("div", { id: "p2p-history-list", children: [history.length === 0 && _jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u8FDE\u63A5\u5386\u53F2" }), history.map((item) => (_jsxs("div", { className: `history-item ${item.isPinned ? 'pinned' : ''}`, children: [_jsx("div", { className: "history-item-icon", children: "\uD83D\uDCAC" }), _jsxs("div", { className: "history-item-info", children: [_jsxs("div", { className: "history-item-name", children: [item.name || 'Unknown', item.isPinned && _jsx("span", { className: "pin-icon", children: "\uD83D\uDCCC" })] }), _jsxs("div", { className: "history-item-meta", children: [_jsxs("span", { children: ["\u4E0A\u6B21: ", new Date(item.lastConnectedAt).toLocaleString()] }), _jsxs("span", { children: ["\u6D88\u606F: ", item.totalMessages || 0] })] })] }), _jsxs("div", { className: "history-item-actions", children: [_jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleHistoryAction('connect', item), children: "\u8FDE\u63A5" }), _jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleHistoryAction('pin', item), children: item.isPinned ? '取消置顶' : '置顶' }), _jsx("button", { className: "btn-sm btn-secondary", onClick: () => handleHistoryAction('delete', item), children: "\u5220\u9664" })] })] }, item.id)))] })] })), activeTab === 'messages' && (_jsxs("div", { className: "tab-content active", children: [_jsx("div", { className: "toolbar", children: _jsx("button", { className: "btn-secondary btn-sm", onClick: handleMarkAllRead, children: "\u5168\u90E8\u5DF2\u8BFB" }) }), _jsxs("div", { id: "p2p-messages-list", children: [messages.length === 0 && _jsx("div", { className: "empty-hint", children: "\u6682\u65E0\u6D88\u606F" }), messages.slice(-20).map((msg) => (_jsxs("div", { className: `message-item ${!msg.isRead ? 'unread' : ''}`, children: [_jsxs("div", { className: "message-header", children: [_jsx("span", { className: "message-sender", children: msg.fromName || msg.fromDid }), _jsx("span", { className: "message-time", children: new Date(msg.timestamp).toLocaleString() })] }), _jsx("div", { className: "message-content", children: msg.content.substring(0, 200) })] }, msg.id)))] })] }))] }), toast && _jsx("div", { className: "toast", children: toast })] }));
-}