@bolloon/bolloon-agent 0.1.2 → 0.1.4

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

@@ -1,14 +1,19 @@
+"use strict";
+/**
+ * P2P Modal - 纯 TypeScript 版本
+ */
 class P2PModalUI {
-  modal = null;
-  overlay = null;
-  connectedPeers = /* @__PURE__ */ new Map();
-  constructor() {
-    this.createModal();
-  }
-  createModal() {
-    this.overlay = document.createElement("div");
-    this.overlay.className = "p2p-modal-overlay";
-    this.overlay.style.cssText = `
+    modal = null;
+    overlay = null;
+    connectedPeers = new Map();
+    constructor() {
+        this.createModal();
+    }
+    createModal() {
+        // 创建遮罩层
+        this.overlay = document.createElement('div');
+        this.overlay.className = 'p2p-modal-overlay';
+        this.overlay.style.cssText = `
       display: none;
       position: fixed;
       inset: 0;
@@ -17,9 +22,10 @@ class P2PModalUI {
       align-items: center;
       justify-content: center;
     `;
-    this.modal = document.createElement("div");
-    this.modal.className = "p2p-modal";
-    this.modal.style.cssText = `
+        // 创建弹窗
+        this.modal = document.createElement('div');
+        this.modal.className = 'p2p-modal';
+        this.modal.style.cssText = `
       width: 90%;
       max-width: 650px;
       max-height: 90vh;
@@ -30,72 +36,81 @@ class P2PModalUI {
       display: flex;
       flex-direction: column;
     `;
-    this.overlay.appendChild(this.modal);
-    document.body.appendChild(this.overlay);
-    this.overlay.addEventListener("click", (e) => {
-      if (e.target === this.overlay) this.hide();
-    });
-    this.render();
-  }
-  async render() {
-    if (!this.modal) return;
-    await this.loadConnectionHistory();
-    let identityHtml = '<div class="p2p-loading">\u52A0\u8F7D\u4E2D...</div>';
-    let identityData = { name: "\u672A\u77E5", did: "\u672A\u77E5", cid: "\u672A\u77E5" };
-    try {
-      const irohResp = await fetch("/api/iroh/init", { method: "POST" });
-      const irohData = await irohResp.json();
-      if (irohData.cid) {
-        identityData = {
-          name: irohData.name || irohData.name?.split("-").slice(-1)[0] || "Bolloon",
-          did: irohData.did || "\u672A\u77E5",
-          cid: irohData.cid || "\u672A\u77E5",
-          nodeId: irohData.irohNodeId ? irohData.irohNodeId.substring(0, 20) + "..." : "\u672A\u77E5"
-        };
-      } else {
-        const resp = await fetch("/api/identity");
-        identityData = await resp.json();
-        identityData.cid = identityData.cid || "\u672A\u521D\u59CB\u5316";
-        identityData.nodeId = identityData.nodeId || "\u672A\u77E5";
-      }
-      identityHtml = `
+        this.overlay.appendChild(this.modal);
+        document.body.appendChild(this.overlay);
+        // 点击遮罩关闭
+        this.overlay.addEventListener('click', (e) => {
+            if (e.target === this.overlay)
+                this.hide();
+        });
+        this.render();
+    }
+    async render() {
+        if (!this.modal)
+            return;
+        // 加载连接历史
+        await this.loadConnectionHistory();
+        // 获取身份信息
+        let identityHtml = '<div class="p2p-loading">加载中...</div>';
+        let identityData = { name: '未知', did: '未知', cid: '未知' };
+        try {
+            // 尝试获取 iroh 身份（包含 CID）
+            const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+            const irohData = await irohResp.json();
+            if (irohData.cid) {
+                identityData = {
+                    name: irohData.name || irohData.name?.split('-').slice(-1)[0] || 'Bolloon',
+                    did: irohData.did || '未知',
+                    cid: irohData.cid || '未知',
+                    nodeId: irohData.irohNodeId ? irohData.irohNodeId.substring(0, 20) + '...' : '未知'
+                };
+            }
+            else {
+                // 回退到 /api/identity
+                const resp = await fetch('/api/identity');
+                identityData = await resp.json();
+                identityData.cid = identityData.cid || '未初始化';
+                identityData.nodeId = identityData.nodeId || '未知';
+            }
+            identityHtml = `
         <div class="p2p-section">
-          <h3>\u8EAB\u4EFD\u4FE1\u606F</h3>
+          <h3>身份信息</h3>
           <div class="p2p-info-row">
-            <span class="label">\u540D\u79F0:</span>
-            <span class="value">${this.escapeHtml(identityData.name || "\u672A\u77E5")}</span>
+            <span class="label">名称:</span>
+            <span class="value">${this.escapeHtml(identityData.name || '未知')}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">CID:</span>
-            <span class="value mono">${this.escapeHtml(identityData.cid || "\u672A\u77E5")}</span>
+            <span class="value mono">${this.escapeHtml(identityData.cid || '未知')}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">DID:</span>
-            <span class="value mono">${this.escapeHtml(identityData.did || "\u672A\u77E5")}</span>
+            <span class="value mono">${this.escapeHtml(identityData.did || '未知')}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">Node ID:</span>
-            <span class="value mono">${this.escapeHtml(identityData.nodeId || "\u672A\u77E5")}</span>
+            <span class="value mono">${this.escapeHtml(identityData.nodeId || '未知')}</span>
           </div>
           <div class="p2p-actions">
-            <button class="p2p-btn-secondary" id="p2p-copy-cid-btn">\u590D\u5236 CID</button>
-            <button class="p2p-btn-secondary" id="p2p-copy-did-btn">\u590D\u5236 DID</button>
-            <button class="p2p-btn-secondary" id="p2p-copy-nodeid-btn">\u590D\u5236 Node ID</button>
+            <button class="p2p-btn-secondary" id="p2p-copy-cid-btn">复制 CID</button>
+            <button class="p2p-btn-secondary" id="p2p-copy-did-btn">复制 DID</button>
+            <button class="p2p-btn-secondary" id="p2p-copy-nodeid-btn">复制 Node ID</button>
           </div>
         </div>
       `;
-    } catch {
-      identityHtml = '<div class="p2p-error">\u65E0\u6CD5\u52A0\u8F7D\u8EAB\u4EFD\u4FE1\u606F</div>';
-    }
-    this.modal.innerHTML = `
+        }
+        catch {
+            identityHtml = '<div class="p2p-error">无法加载身份信息</div>';
+        }
+        this.modal.innerHTML = `
       <div class="p2p-header">
-        <h2>P2P \u7F51\u7EDC</h2>
-        <button class="p2p-close" id="p2p-close-btn">\xD7</button>
+        <h2>P2P 网络</h2>
+        <button class="p2p-close" id="p2p-close-btn">×</button>
       </div>
       <div class="p2p-tabs">
-        <button class="p2p-tab active" data-tab="identity">\u8EAB\u4EFD</button>
-        <button class="p2p-tab" data-tab="connect">\u8FDE\u63A5</button>
-        <button class="p2p-tab" data-tab="messages">\u6D88\u606F</button>
+        <button class="p2p-tab active" data-tab="identity">身份</button>
+        <button class="p2p-tab" data-tab="connect">连接</button>
+        <button class="p2p-tab" data-tab="messages">消息</button>
       </div>
       <div class="p2p-content">
         <div class="p2p-tab-content active" data-tab="identity">
@@ -103,187 +118,207 @@ class P2PModalUI {
         </div>
         <div class="p2p-tab-content" data-tab="connect">
           <div class="p2p-section">
-            <h3>\u8FDE\u63A5\u5230\u8282\u70B9</h3>
+            <h3>连接到节点</h3>
             <div class="p2p-connect-form">
-              <input type="text" id="p2p-connect-input" placeholder="\u8F93\u5165\u8282\u70B9 ID \u6216 CID">
-              <button class="p2p-btn-primary" id="p2p-connect-btn">\u8FDE\u63A5</button>
+              <input type="text" id="p2p-connect-input" placeholder="输入节点 ID 或 CID">
+              <button class="p2p-btn-primary" id="p2p-connect-btn">连接</button>
             </div>
             <div id="p2p-connect-result" class="p2p-result"></div>
           </div>
           <div class="p2p-section">
-            <h3>\u5DF2\u8FDE\u63A5\u7684\u8282\u70B9</h3>
+            <h3>已连接的节点</h3>
             <div id="p2p-connected-peers" class="p2p-connected-peers">
-              \u6682\u65E0\u8FDE\u63A5
+              暂无连接
             </div>
           </div>
         </div>
         <div class="p2p-tab-content" data-tab="messages">
           <div class="p2p-section">
-            <h3>\u6536\u5230\u7684\u6D88\u606F</h3>
+            <h3>收到的消息</h3>
             <div id="p2p-messages-list" class="p2p-messages">
-              \u6682\u65E0\u6D88\u606F
+              暂无消息
             </div>
           </div>
         </div>
       </div>
     `;
-    this.bindEvents();
-  }
-  bindEvents() {
-    if (!this.modal) return;
-    const closeBtn = this.modal.querySelector("#p2p-close-btn");
-    closeBtn?.addEventListener("click", () => this.hide());
-    this.modal.querySelectorAll(".p2p-tab").forEach((tab) => {
-      tab.addEventListener("click", (e) => {
-        const target = e.target;
-        const tabName = target.dataset.tab;
-        if (tabName) this.switchTab(tabName);
-      });
-    });
-    const copyCidBtn = this.modal.querySelector("#p2p-copy-cid-btn");
-    copyCidBtn?.addEventListener("click", async () => {
-      try {
-        const irohResp = await fetch("/api/iroh/init", { method: "POST" });
-        const data = await irohResp.json();
-        if (data.cid) {
-          await navigator.clipboard.writeText(data.cid);
-          this.showToast("CID \u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F");
-        }
-      } catch (e) {
-        console.error("\u590D\u5236\u5931\u8D25:", e);
-      }
-    });
-    const copyDidBtn = this.modal.querySelector("#p2p-copy-did-btn");
-    copyDidBtn?.addEventListener("click", async () => {
-      try {
-        const irohResp = await fetch("/api/iroh/init", { method: "POST" });
-        const data = await irohResp.json();
-        if (data.did) {
-          await navigator.clipboard.writeText(data.did);
-          this.showToast("DID \u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F");
+        // 绑定事件
+        this.bindEvents();
+    }
+    bindEvents() {
+        if (!this.modal)
+            return;
+        // 关闭按钮
+        const closeBtn = this.modal.querySelector('#p2p-close-btn');
+        closeBtn?.addEventListener('click', () => this.hide());
+        // 标签切换
+        this.modal.querySelectorAll('.p2p-tab').forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                const target = e.target;
+                const tabName = target.dataset.tab;
+                if (tabName)
+                    this.switchTab(tabName);
+            });
+        });
+        // 复制 CID
+        const copyCidBtn = this.modal.querySelector('#p2p-copy-cid-btn');
+        copyCidBtn?.addEventListener('click', async () => {
+            try {
+                const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+                const data = await irohResp.json();
+                if (data.cid) {
+                    await navigator.clipboard.writeText(data.cid);
+                    this.showToast('CID 已复制到剪贴板');
+                }
+            }
+            catch (e) {
+                console.error('复制失败:', e);
+            }
+        });
+        // 复制 DID
+        const copyDidBtn = this.modal.querySelector('#p2p-copy-did-btn');
+        copyDidBtn?.addEventListener('click', async () => {
+            try {
+                const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+                const data = await irohResp.json();
+                if (data.did) {
+                    await navigator.clipboard.writeText(data.did);
+                    this.showToast('DID 已复制到剪贴板');
+                }
+            }
+            catch (e) {
+                console.error('复制失败:', e);
+            }
+        });
+        // 复制 Node ID
+        const copyNodeIdBtn = this.modal.querySelector('#p2p-copy-nodeid-btn');
+        copyNodeIdBtn?.addEventListener('click', async () => {
+            try {
+                const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+                const data = await irohResp.json();
+                if (data.irohNodeId) {
+                    await navigator.clipboard.writeText(data.irohNodeId);
+                    this.showToast('Node ID 已复制到剪贴板');
+                }
+            }
+            catch (e) {
+                console.error('复制失败:', e);
+            }
+        });
+        // 连接按钮
+        const connectBtn = this.modal.querySelector('#p2p-connect-btn');
+        connectBtn?.addEventListener('click', () => this.handleConnect());
+    }
+    switchTab(tabName) {
+        if (!this.modal)
+            return;
+        this.modal.querySelectorAll('.p2p-tab').forEach(tab => {
+            tab.classList.toggle('active', tab.getAttribute('data-tab') === tabName);
+        });
+        this.modal.querySelectorAll('.p2p-tab-content').forEach(content => {
+            content.classList.toggle('active', content.getAttribute('data-tab') === tabName);
+        });
+    }
+    async handleConnect() {
+        const input = document.getElementById('p2p-connect-input');
+        const result = document.getElementById('p2p-connect-result');
+        if (!input || !result)
+            return;
+        const cid = input.value.trim();
+        if (!cid)
+            return;
+        result.innerHTML = '<div class="p2p-loading">连接中...</div>';
+        result.className = 'p2p-result';
+        try {
+            const resp = await fetch('/api/iroh/connect', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ cid })
+            });
+            const data = await resp.json();
+            if (data.ok) {
+                result.innerHTML = `<div class="p2p-success">连接成功！节点: ${this.escapeHtml(data.nodeName || cid.substring(0, 16))}...</div>`;
+                result.className = 'p2p-result success';
+                // 清空输入框
+                input.value = '';
+                // 保存已连接节点到后端
+                try {
+                    await fetch('/api/p2p/history', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            cid: cid, // 输入的 CID 或 Node ID
+                            irohNodeId: data.targetNodeId,
+                            did: data.targetNodeId, // 用 Node ID 作为 DID
+                            name: data.nodeName || cid.substring(0, 16)
+                        })
+                    });
+                }
+                catch (e) {
+                    console.error('保存连接失败:', e);
+                }
+            }
+            else {
+                result.innerHTML = `<div class="p2p-error">${this.escapeHtml(data.error || '连接失败')}</div>`;
+                result.className = 'p2p-result error';
+            }
         }
-      } catch (e) {
-        console.error("\u590D\u5236\u5931\u8D25:", e);
-      }
-    });
-    const copyNodeIdBtn = this.modal.querySelector("#p2p-copy-nodeid-btn");
-    copyNodeIdBtn?.addEventListener("click", async () => {
-      try {
-        const irohResp = await fetch("/api/iroh/init", { method: "POST" });
-        const data = await irohResp.json();
-        if (data.irohNodeId) {
-          await navigator.clipboard.writeText(data.irohNodeId);
-          this.showToast("Node ID \u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F");
+        catch (e) {
+            const msg = e instanceof Error ? e.message : '连接失败';
+            result.innerHTML = `<div class="p2p-error">${this.escapeHtml(msg)}</div>`;
+            result.className = 'p2p-result error';
         }
-      } catch (e) {
-        console.error("\u590D\u5236\u5931\u8D25:", e);
-      }
-    });
-    const connectBtn = this.modal.querySelector("#p2p-connect-btn");
-    connectBtn?.addEventListener("click", () => this.handleConnect());
-  }
-  switchTab(tabName) {
-    if (!this.modal) return;
-    this.modal.querySelectorAll(".p2p-tab").forEach((tab) => {
-      tab.classList.toggle("active", tab.getAttribute("data-tab") === tabName);
-    });
-    this.modal.querySelectorAll(".p2p-tab-content").forEach((content) => {
-      content.classList.toggle("active", content.getAttribute("data-tab") === tabName);
-    });
-  }
-  async handleConnect() {
-    const input = document.getElementById("p2p-connect-input");
-    const result = document.getElementById("p2p-connect-result");
-    if (!input || !result) return;
-    const cid = input.value.trim();
-    if (!cid) return;
-    result.innerHTML = '<div class="p2p-loading">\u8FDE\u63A5\u4E2D...</div>';
-    result.className = "p2p-result";
-    try {
-      const resp = await fetch("/api/iroh/connect", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ cid })
-      });
-      const data = await resp.json();
-      if (data.ok) {
-        result.innerHTML = `<div class="p2p-success">\u8FDE\u63A5\u6210\u529F\uFF01\u8282\u70B9: ${this.escapeHtml(data.nodeName || cid.substring(0, 16))}...</div>`;
-        result.className = "p2p-result success";
-        input.value = "";
+    }
+    async loadConnectionHistory() {
         try {
-          await fetch("/api/p2p/history", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              cid,
-              // 输入的 CID 或 Node ID
-              irohNodeId: data.targetNodeId,
-              did: data.targetNodeId,
-              // 用 Node ID 作为 DID
-              name: data.nodeName || cid.substring(0, 16)
-            })
-          });
-        } catch (e) {
-          console.error("\u4FDD\u5B58\u8FDE\u63A5\u5931\u8D25:", e);
+            const resp = await fetch('/api/p2p/history');
+            const history = await resp.json();
+            this.connectedPeers.clear();
+            for (const entry of history) {
+                this.connectedPeers.set(entry.irohNodeId || entry.did, {
+                    nodeId: entry.irohNodeId || entry.did,
+                    name: entry.name || 'Unknown',
+                    time: entry.lastConnectedAt || Date.now()
+                });
+            }
+            this.updateConnectedPeersDisplay();
+        }
+        catch (e) {
+            console.error('加载连接历史失败:', e);
         }
-      } else {
-        result.innerHTML = `<div class="p2p-error">${this.escapeHtml(data.error || "\u8FDE\u63A5\u5931\u8D25")}</div>`;
-        result.className = "p2p-result error";
-      }
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : "\u8FDE\u63A5\u5931\u8D25";
-      result.innerHTML = `<div class="p2p-error">${this.escapeHtml(msg)}</div>`;
-      result.className = "p2p-result error";
-    }
-  }
-  async loadConnectionHistory() {
-    try {
-      const resp = await fetch("/api/p2p/history");
-      const history = await resp.json();
-      this.connectedPeers.clear();
-      for (const entry of history) {
-        this.connectedPeers.set(entry.irohNodeId || entry.did, {
-          nodeId: entry.irohNodeId || entry.did,
-          name: entry.name || "Unknown",
-          time: entry.lastConnectedAt || Date.now()
-        });
-      }
-      this.updateConnectedPeersDisplay();
-    } catch (e) {
-      console.error("\u52A0\u8F7D\u8FDE\u63A5\u5386\u53F2\u5931\u8D25:", e);
-    }
-  }
-  updateConnectedPeersDisplay() {
-    const container = document.getElementById("p2p-connected-peers");
-    if (!container) return;
-    if (this.connectedPeers.size === 0) {
-      container.innerHTML = '<div class="p2p-empty">\u6682\u65E0\u8FDE\u63A5</div>';
-      return;
     }
-    let html = "";
-    for (const [nodeId, info] of this.connectedPeers) {
-      const shortId = nodeId.substring(0, 16) + "...";
-      const time = new Date(info.time).toLocaleTimeString();
-      html += `
+    updateConnectedPeersDisplay() {
+        const container = document.getElementById('p2p-connected-peers');
+        if (!container)
+            return;
+        if (this.connectedPeers.size === 0) {
+            container.innerHTML = '<div class="p2p-empty">暂无连接</div>';
+            return;
+        }
+        let html = '';
+        for (const [nodeId, info] of this.connectedPeers) {
+            const shortId = nodeId.substring(0, 16) + '...';
+            const time = new Date(info.time).toLocaleTimeString();
+            html += `
         <div class="p2p-peer-item">
           <span class="p2p-peer-name">${this.escapeHtml(info.name || shortId)}</span>
           <span class="p2p-peer-id">${shortId}</span>
           <span class="p2p-peer-time">${time}</span>
         </div>
       `;
+        }
+        container.innerHTML = html;
     }
-    container.innerHTML = html;
-  }
-  escapeHtml(str) {
-    const div = document.createElement("div");
-    div.textContent = str;
-    return div.innerHTML;
-  }
-  showToast(message) {
-    const toast = document.createElement("div");
-    toast.className = "p2p-toast";
-    toast.textContent = message;
-    toast.style.cssText = `
+    escapeHtml(str) {
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+    showToast(message) {
+        const toast = document.createElement('div');
+        toast.className = 'p2p-toast';
+        toast.textContent = message;
+        toast.style.cssText = `
       position: fixed;
       bottom: 24px;
       left: 50%;
@@ -296,22 +331,23 @@ class P2PModalUI {
       font-size: 14px;
       z-index: 2000;
     `;
-    document.body.appendChild(toast);
-    setTimeout(() => toast.remove(), 2e3);
-  }
-  show() {
-    if (this.overlay) {
-      this.overlay.style.display = "flex";
-      this.render();
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 2000);
     }
-  }
-  hide() {
-    if (this.overlay) {
-      this.overlay.style.display = "none";
+    show() {
+        if (this.overlay) {
+            this.overlay.style.display = 'flex';
+            this.render();
+        }
+    }
+    hide() {
+        if (this.overlay) {
+            this.overlay.style.display = 'none';
+        }
     }
-  }
 }
-const style = document.createElement("style");
+// 样式
+const style = document.createElement('style');
 style.textContent = `
   .p2p-modal-overlay { display: none; }
   .p2p-header {
@@ -500,8 +536,10 @@ style.textContent = `
   }
 `;
 document.head.appendChild(style);
+// 全局实例
 const p2pModal = new P2PModalUI();
+// 导出到 window
 window.p2pModal = p2pModal;
 window.showP2PModal = () => p2pModal.show();
 window.hideP2PModal = () => p2pModal.hide();
-console.log("[P2P Modal] \u5DF2\u521D\u59CB\u5316");
+console.log('[P2P Modal] 已初始化');