@bolloon/bolloon-agent 0.2.9 → 0.2.10

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

@@ -1,19 +1,15 @@
-/**
- * P2P Modal - 纯 TypeScript 版本
- */
-import { safeName as safeAnyName } from '../../util/safe-name.js';
+import { safeName as safeAnyName } from "../../util/safe-name.js";
 class P2PModalUI {
-    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 = `
+  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 = `
       display: none;
       position: fixed;
       inset: 0;
@@ -22,10 +18,9 @@ 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;
@@ -36,87 +31,74 @@ 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">加载中...</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) {
-                // 2026-07-06: 防御 irohData.name 是 'undefined'/'null'/空白 的情况,
-                //   否则 UI 会渲染字面量 "undefined". (multi-confirmed fix: 避免再现 v0.2.7 的 bug)
-                const rawName = (typeof irohData.name === 'string' && irohData.name.trim()
-                    && irohData.name.trim() !== 'undefined'
-                    && irohData.name.trim() !== 'null') ? irohData.name.trim() : '';
-                const tailName = rawName.split('-').slice(-1)[0] || '';
-                identityData = {
-                    name: rawName || tailName || '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 = `
+    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) {
+        const rawName = typeof irohData.name === "string" && irohData.name.trim() && irohData.name.trim() !== "undefined" && irohData.name.trim() !== "null" ? irohData.name.trim() : "";
+        const tailName = rawName.split("-").slice(-1)[0] || "";
+        identityData = {
+          name: rawName || tailName || "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 = `
         <div class="p2p-section">
-          <h3>身份信息</h3>
+          <h3>\u8EAB\u4EFD\u4FE1\u606F</h3>
           <div class="p2p-info-row">
-            <span class="label">名称:</span>
-            <span class="value">${this.escapeHtml(this.safeName(identityData.name, '未知'))}</span>
+            <span class="label">\u540D\u79F0:</span>
+            <span class="value">${this.escapeHtml(this.safeName(identityData.name, "\u672A\u77E5"))}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">CID:</span>
-            <span class="value mono">${this.escapeHtml(identityData.cid || '未知')}</span>
+            <span class="value mono">${this.escapeHtml(identityData.cid || "\u672A\u77E5")}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">DID:</span>
-            <span class="value mono">${this.escapeHtml(identityData.did || '未知')}</span>
+            <span class="value mono">${this.escapeHtml(identityData.did || "\u672A\u77E5")}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">Node ID:</span>
-            <span class="value mono">${this.escapeHtml(identityData.nodeId || '未知')}</span>
+            <span class="value mono">${this.escapeHtml(identityData.nodeId || "\u672A\u77E5")}</span>
           </div>
           <div class="p2p-actions">
-            <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>
+            <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>
           </div>
         </div>
       `;
-        }
-        catch {
-            identityHtml = '<div class="p2p-error">无法加载身份信息</div>';
-        }
-        this.modal.innerHTML = `
+    } catch {
+      identityHtml = '<div class="p2p-error">\u65E0\u6CD5\u52A0\u8F7D\u8EAB\u4EFD\u4FE1\u606F</div>';
+    }
+    this.modal.innerHTML = `
       <div class="p2p-header">
-        <h2>P2P 网络</h2>
-        <button class="p2p-close" id="p2p-close-btn">×</button>
+        <h2>P2P \u7F51\u7EDC</h2>
+        <button class="p2p-close" id="p2p-close-btn">\xD7</button>
       </div>
       <div class="p2p-tabs">
-        <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>
+        <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>
       </div>
       <div class="p2p-content">
         <div class="p2p-tab-content active" data-tab="identity">
@@ -124,213 +106,192 @@ class P2PModalUI {
         </div>
         <div class="p2p-tab-content" data-tab="connect">
           <div class="p2p-section">
-            <h3>连接到节点</h3>
+            <h3>\u8FDE\u63A5\u5230\u8282\u70B9</h3>
             <div class="p2p-connect-form">
-              <input type="text" id="p2p-connect-input" placeholder="输入节点 ID 或 CID">
-              <button class="p2p-btn-primary" id="p2p-connect-btn">连接</button>
+              <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>
             </div>
             <div id="p2p-connect-result" class="p2p-result"></div>
           </div>
           <div class="p2p-section">
-            <h3>已连接的节点</h3>
+            <h3>\u5DF2\u8FDE\u63A5\u7684\u8282\u70B9</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>收到的消息</h3>
+            <h3>\u6536\u5230\u7684\u6D88\u606F</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);
-            });
-        });
-        // 复制 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(this.safeName(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';
-            }
+    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) {
-            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 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");
         }
-    }
-    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("\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) {
-            console.error('加载连接历史失败:', e);
+      } 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(this.safeName(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 或 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);
         }
+      } 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";
     }
-    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 += `
+  }
+  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 += `
         <div class="p2p-peer-item">
           <span class="p2p-peer-name">${this.escapeHtml(this.safeName(info.name, shortId))}</span>
           <span class="p2p-peer-id">${shortId}</span>
           <span class="p2p-peer-time">${time}</span>
         </div>
       `;
-        }
-        container.innerHTML = html;
-    }
-    escapeHtml(str) {
-        const div = document.createElement('div');
-        div.textContent = str;
-        return div.innerHTML;
     }
-    // 2026-07-06: 通用 name 兜底 — 防止 name=undefined/null/'undefined' 字串
-    //   时 UI 渲染字面量 "undefined".
-    safeName(input, fallback) {
-        // 2026-07-06: 委托共享 safe-name.ts (有单测覆盖); 保持方法签名兼容旧调用.
-        return safeAnyName(input, fallback || '未知');
-    }
-    showToast(message) {
-        const toast = document.createElement('div');
-        toast.className = 'p2p-toast';
-        toast.textContent = message;
-        toast.style.cssText = `
+    container.innerHTML = html;
+  }
+  escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  }
+  // 2026-07-06: 通用 name 兜底 — 防止 name=undefined/null/'undefined' 字串
+  //   时 UI 渲染字面量 "undefined".
+  safeName(input, fallback) {
+    return safeAnyName(input, fallback || "\u672A\u77E5");
+  }
+  showToast(message) {
+    const toast = document.createElement("div");
+    toast.className = "p2p-toast";
+    toast.textContent = message;
+    toast.style.cssText = `
       position: fixed;
       bottom: 24px;
       left: 50%;
@@ -343,23 +304,22 @@ class P2PModalUI {
       font-size: 14px;
       z-index: 2000;
     `;
-        document.body.appendChild(toast);
-        setTimeout(() => toast.remove(), 2000);
-    }
-    show() {
-        if (this.overlay) {
-            this.overlay.style.display = 'flex';
-            this.render();
-        }
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 2e3);
+  }
+  show() {
+    if (this.overlay) {
+      this.overlay.style.display = "flex";
+      this.render();
     }
-    hide() {
-        if (this.overlay) {
-            this.overlay.style.display = 'none';
-        }
+  }
+  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 {
@@ -548,10 +508,8 @@ 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] 已初始化');
+console.log("[P2P Modal] \u5DF2\u521D\u59CB\u5316");