npm - mm_ai - Versions diffs - 1.0.0 - Mend

mm_ai 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2678) hide show

package/common/tool/develop/frontend_debug/frontend_debug.html ADDED Viewed

@@ -0,0 +1,802 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>前端调试工具 - Frontend Debug Tool</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: #f5f5f5;
+      color: #333;
+      padding: 20px;
+      padding-bottom: 80px;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    h1 {
+      font-size: 24px;
+      margin-bottom: 20px;
+      color: #1a1a1a;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    h1 .badge {
+      font-size: 12px;
+      background: #4CAF50;
+      color: #fff;
+      padding: 2px 10px;
+      border-radius: 12px;
+      font-weight: normal;
+    }
+    .card {
+      background: #fff;
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 16px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    }
+    .card h2 {
+      font-size: 16px;
+      margin-bottom: 12px;
+      color: #555;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 8px;
+    }
+    .info-grid {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 8px 16px;
+      font-size: 14px;
+    }
+    .info-grid .label {
+      color: #888;
+      font-weight: 500;
+    }
+    .info-grid .value {
+      color: #333;
+      word-break: break-all;
+    }
+    .status-dot {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 6px;
+    }
+    .status-dot.active { background: #4CAF50; }
+    .status-dot.inactive { background: #999; }
+    .error-list {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    .error-item {
+      padding: 10px 12px;
+      border-left: 3px solid #f44336;
+      background: #fff5f5;
+      border-radius: 4px;
+      margin-bottom: 8px;
+      font-size: 13px;
+    }
+    .error-item .error-type {
+      font-weight: bold;
+      color: #d32f2f;
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+    .error-item .error-msg {
+      margin-top: 4px;
+      word-break: break-all;
+    }
+    .error-item .error-time {
+      color: #999;
+      font-size: 11px;
+      margin-top: 4px;
+    }
+    .error-item .error-stack {
+      margin-top: 6px;
+      padding: 8px;
+      background: #fff;
+      border-radius: 4px;
+      font-family: 'Courier New', monospace;
+      font-size: 11px;
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: 120px;
+      overflow-y: auto;
+      color: #666;
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      border: none;
+      border-radius: 8px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .btn-primary {
+      background: #1976D2;
+      color: #fff;
+    }
+    .btn-primary:hover { background: #1565C0; }
+    .btn-danger {
+      background: #f44336;
+      color: #fff;
+    }
+    .btn-danger:hover { background: #d32f2f; }
+    .btn-success {
+      background: #4CAF50;
+      color: #fff;
+    }
+    .btn-success:hover { background: #388E3C; }
+    .btn-outline {
+      background: transparent;
+      border: 1px solid #ddd;
+      color: #666;
+    }
+    .btn-outline:hover { background: #f5f5f5; }
+    .btn-sm { padding: 4px 10px; font-size: 12px; }
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 12px;
+    }
+    .count-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 6px;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: bold;
+      color: #fff;
+    }
+    .count-badge.red { background: #f44336; }
+    .count-badge.green { background: #4CAF50; }
+    .count-badge.blue { background: #1976D2; }
+    .empty-state {
+      text-align: center;
+      padding: 30px 20px;
+      color: #999;
+    }
+    .empty-state .icon { font-size: 40px; margin-bottom: 10px; }
+    .toast {
+      position: fixed;
+      bottom: 100px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0,0,0,0.8);
+      color: #fff;
+      padding: 10px 20px;
+      border-radius: 8px;
+      font-size: 14px;
+      z-index: 99999;
+      animation: toastIn 0.3s ease;
+    }
+    @keyframes toastIn {
+      from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+      to { opacity: 1; transform: translateX(-50%) translateY(0); }
+    }
+    .footer {
+      text-align: center;
+      padding: 20px;
+      color: #999;
+      font-size: 12px;
+    }
+    .test-buttons {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    /* vConsole 隐藏时显示 */
+    #vconsole-toggle {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 99998;
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      background: #1976D2;
+      color: #fff;
+      border: none;
+      font-size: 20px;
+      cursor: pointer;
+      box-shadow: 0 4px 12px rgba(25,118,210,0.4);
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    #vconsole-toggle:hover {
+      transform: scale(1.1);
+      box-shadow: 0 6px 16px rgba(25,118,210,0.5);
+    }
+    #vconsole-toggle.hidden { display: none; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>
+      🔧 前端调试工具
+      <span class="badge">vConsole + 错误监控</span>
+    </h1>
+    <!-- 基本信息卡片 -->
+    <div class="card">
+      <h2>📋 基本信息</h2>
+      <div class="info-grid">
+        <span class="label">页面URL</span>
+        <span class="value" id="page-url">-</span>
+        <span class="label">Agent名称</span>
+        <span class="value" id="agent-name">-</span>
+        <span class="label">用户名称</span>
+        <span class="value" id="user-name">-</span>
+        <span class="label">页面状态</span>
+        <span class="value"><span class="status-dot active" id="status-dot"></span><span id="page-status">运行中</span></span>
+        <span class="label">已捕获错误</span>
+        <span class="value"><span class="count-badge red" id="error-count">0</span></span>
+      </div>
+    </div>
+    <!-- 操作工具栏 -->
+    <div class="card">
+      <h2>🎮 操作面板</h2>
+      <div class="toolbar">
+        <button class="btn btn-danger btn-sm" onclick="clearErrors()">🗑️ 清空错误</button>
+        <button class="btn btn-success btn-sm" onclick="reportErrors()">📤 上报错误</button>
+        <button class="btn btn-primary btn-sm" onclick="toggleVConsole()">📱 切换 vConsole</button>
+      </div>
+      <div class="test-buttons">
+        <button class="btn btn-outline btn-sm" onclick="testConsoleError()">测试 console.error</button>
+        <button class="btn btn-outline btn-sm" onclick="testThrowError()">测试 throw Error</button>
+        <button class="btn btn-outline btn-sm" onclick="testPromiseRejection()">测试 Promise 异常</button>
+        <button class="btn btn-outline btn-sm" onclick="testReferenceError()">测试引用错误</button>
+      </div>
+    </div>
+    <!-- 错误列表卡片 -->
+    <div class="card">
+      <h2>⚠️ 错误日志 <span class="count-badge red" id="error-count-badge">0</span></h2>
+      <div id="error-list" class="error-list">
+        <div class="empty-state">
+          <div class="icon">✅</div>
+          <p>暂无错误，页面运行正常</p>
+        </div>
+      </div>
+    </div>
+    <!-- 控制台日志卡片 -->
+    <div class="card">
+      <h2>📝 控制台日志</h2>
+      <div id="console-log" class="error-list">
+        <div class="empty-state">
+          <div class="icon">📄</div>
+          <p>暂无日志</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      Frontend Debug Tool v1.0 | 基于 vConsole v3.3.4
+    </div>
+  </div>
+  <!-- vConsole 切换按钮 -->
+  <button id="vconsole-toggle" onclick="toggleVConsole()" title="切换 vConsole">📱</button>
+  <!-- 加载 vConsole -->
+  <script src="./vconsole.min.js"></script>
+  <script>
+    // ============================================================
+    // 1. 初始化 vConsole
+    // ============================================================
+    var vConsole = null;
+    var vConsoleVisible = false;
+    function initVConsole() {
+      try {
+        if (typeof VConsole !== 'undefined') {
+          vConsole = new VConsole();
+          vConsoleVisible = true;
+          console.log('[DebugTool] vConsole 已初始化');
+          // 默认隐藏 vConsole，用户点击按钮打开
+          if (vConsole && vConsole.hide) {
+            vConsole.hide();
+            vConsoleVisible = false;
+          }
+          document.getElementById('vconsole-toggle').classList.remove('hidden');
+        } else {
+          console.warn('[DebugTool] vConsole 加载失败');
+        }
+      } catch (e) {
+        console.warn('[DebugTool] vConsole 初始化失败:', e);
+      }
+    }
+    function toggleVConsole() {
+      if (!vConsole) return;
+      try {
+        if (vConsoleVisible) {
+          vConsole.hide && vConsole.hide();
+          vConsoleVisible = false;
+        } else {
+          vConsole.show && vConsole.show();
+          vConsoleVisible = true;
+        }
+      } catch (e) {
+        console.warn('[DebugTool] 切换 vConsole 失败:', e);
+      }
+    }
+    // ============================================================
+    // 2. 参数解析
+    // ============================================================
+    function getQueryParams() {
+      var params = {};
+      var search = window.location.search.substring(1);
+      if (search) {
+        var parts = search.split('&');
+        for (var i = 0; i < parts.length; i++) {
+          var pair = parts[i].split('=');
+          var key = decodeURIComponent(pair[0]);
+          var value = pair.length > 1 ? decodeURIComponent(pair[1]) : '';
+          params[key] = value;
+        }
+      }
+      return params;
+    }
+    var queryParams = getQueryParams();
+    var AGENT_NAME = queryParams.agent_name || 'unknown';
+    var USER_NAME = queryParams.user_name || 'unknown';
+    var CURRENT_URL = window.location.href;
+    // ============================================================
+    // 3. 错误存储
+    // ============================================================
+    var capturedErrors = [];
+    var MAX_ERRORS = 200; // 最多存储200条错误
+    // ============================================================
+    // 4. 错误捕获函数
+    // ============================================================
+    /**
+     * 添加错误到列表
+     */
+    function addError(errorInfo) {
+      // 限制数量
+      if (capturedErrors.length >= MAX_ERRORS) {
+        capturedErrors.shift();
+      }
+      capturedErrors.push(errorInfo);
+      updateErrorUI();
+      // 自动上报
+      autoReportErrors();
+    }
+    /**
+     * 格式化错误信息
+     */
+    function formatError(type, message, stack, line, col, url) {
+      return {
+        type: type,
+        message: message || '未知错误',
+        stack: stack || '',
+        time: new Date().toISOString(),
+        url: url || CURRENT_URL,
+        line: line || 0,
+        col: col || 0
+      };
+    }
+    // ----- 4.1 捕获 window.onerror（运行时错误、语法错误） -----
+    window.onerror = function(msg, source, line, col, error) {
+      var stack = error && error.stack ? error.stack : '';
+      var errorInfo = formatError(
+        'error',
+        String(msg),
+        stack,
+        line,
+        col,
+        source
+      );
+      addError(errorInfo);
+      console.log('[DebugTool] 捕获 window.onerror:', msg);
+      return true; // 阻止默认处理
+    };
+    // ----- 4.2 捕获 unhandledrejection（Promise 异常） -----
+    window.addEventListener('unhandledrejection', function(event) {
+      var reason = event.reason;
+      var message = '';
+      var stack = '';
+      if (reason instanceof Error) {
+        message = reason.message;
+        stack = reason.stack || '';
+      } else if (typeof reason === 'string') {
+        message = reason;
+      } else if (reason && typeof reason === 'object') {
+        message = String(reason.message || reason);
+        stack = reason.stack || '';
+      } else {
+        message = String(reason);
+      }
+      var errorInfo = formatError(
+        'unhandledrejection',
+        message,
+        stack,
+        0,
+        0,
+        CURRENT_URL
+      );
+      addError(errorInfo);
+      console.log('[DebugTool] 捕获 unhandledrejection:', message);
+    });
+    // ----- 4.3 重写 console.error -----
+    var originalConsoleError = console.error;
+    console.error = function() {
+      var args = Array.prototype.slice.call(arguments);
+      var message = args.map(function(arg) {
+        try {
+          if (arg instanceof Error) return arg.message + '\n' + (arg.stack || '');
+          if (typeof arg === 'object') return JSON.stringify(arg, null, 2);
+          return String(arg);
+        } catch (e) {
+          return String(arg);
+        }
+      }).join(' ');
+      var stack = new Error().stack || '';
+      var errorInfo = formatError(
+        'console.error',
+        message,
+        stack,
+        0,
+        0,
+        CURRENT_URL
+      );
+      addError(errorInfo);
+      // 调用原始 console.error
+      originalConsoleError.apply(console, args);
+    };
+    // ----- 4.4 捕获资源加载错误 -----
+    window.addEventListener('error', function(event) {
+      // 排除 JavaScript 运行时错误（已由 window.onerror 处理）
+      if (event.target !== window) {
+        var target = event.target;
+        var tagName = target.tagName || 'UNKNOWN';
+        var src = target.src || target.href || '';
+        var message = '资源加载失败: <' + tagName.toLowerCase() + '> ' + (src || '未知资源');
+        var errorInfo = formatError(
+          'resource_error',
+          message,
+          '',
+          0,
+          0,
+          src || CURRENT_URL
+        );
+        addError(errorInfo);
+        console.log('[DebugTool] 捕获资源加载错误:', message);
+      }
+    }, true); // 使用捕获阶段
+    // ----- 4.5 监听 DOMContentLoaded 和 load 事件 -----
+    document.addEventListener('DOMContentLoaded', function() {
+      console.log('[DebugTool] DOM 内容已加载');
+      updatePageInfo();
+    });
+    window.addEventListener('load', function() {
+      console.log('[DebugTool] 页面已完全加载');
+      updatePageInfo();
+    });
+    // ============================================================
+    // 5. 错误上报
+    // ============================================================
+    var autoReportTimer = null;
+    var pendingReport = false;
+    /**
+     * 自动上报（防抖，延迟2秒）
+     */
+    function autoReportErrors() {
+      if (pendingReport) return;
+      pendingReport = true;
+      clearTimeout(autoReportTimer);
+      autoReportTimer = setTimeout(function() {
+        pendingReport = false;
+        // 只在有错误时上报
+        if (capturedErrors.length > 0) {
+          sendErrorReport();
+        }
+      }, 2000);
+    }
+    /**
+     * 手动上报
+     */
+    function reportErrors() {
+      if (capturedErrors.length === 0) {
+        showToast('✅ 没有错误需要上报');
+        return;
+      }
+      sendErrorReport();
+    }
+    /**
+     * 发送错误报告
+     */
+    function sendErrorReport() {
+      if (capturedErrors.length === 0) return;
+      var errorsCopy = capturedErrors.slice();
+      var payload = {
+        errors: errorsCopy,
+        page_url: CURRENT_URL
+      };
+      var apiUrl = '/api/front_end_debug?agent_name=' + encodeURIComponent(AGENT_NAME) +
+                    '&user_name=' + encodeURIComponent(USER_NAME);
+      console.log('[DebugTool] 上报错误:', errorsCopy.length, '条');
+      fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+      })
+      .then(function(response) {
+        if (response.ok) {
+          showToast('📤 成功上报 ' + errorsCopy.length + ' 条错误');
+          console.log('[DebugTool] 上报成功');
+        } else {
+          showToast('❌ 上报失败: HTTP ' + response.status);
+          console.warn('[DebugTool] 上报失败:', response.status);
+        }
+      })
+      .catch(function(err) {
+        showToast('⚠️ 上报请求失败: ' + err.message);
+        console.warn('[DebugTool] 上报请求失败:', err);
+      });
+    }
+    /**
+     * 清空错误
+     */
+    function clearErrors() {
+      capturedErrors = [];
+      updateErrorUI();
+      showToast('🗑️ 已清空所有错误');
+    }
+    // ============================================================
+    // 6. UI 更新
+    // ============================================================
+    function updatePageInfo() {
+      document.getElementById('page-url').textContent = CURRENT_URL;
+      document.getElementById('agent-name').textContent = AGENT_NAME;
+      document.getElementById('user-name').textContent = USER_NAME;
+    }
+    function updateErrorUI() {
+      var count = capturedErrors.length;
+      document.getElementById('error-count').textContent = count;
+      document.getElementById('error-count-badge').textContent = count;
+      var container = document.getElementById('error-list');
+      if (count === 0) {
+        container.innerHTML = '<div class="empty-state"><div class="icon">✅</div><p>暂无错误，页面运行正常</p></div>';
+        return;
+      }
+      // 显示最近的错误（最新的在前面）
+      var html = '';
+      var displayErrors = capturedErrors.slice().reverse();
+      for (var i = 0; i < displayErrors.length; i++) {
+        var err = displayErrors[i];
+        var typeClass = '';
+        var typeLabel = err.type;
+        switch (err.type) {
+          case 'error':
+            typeClass = 'color: #d32f2f;';
+            typeLabel = '运行时错误';
+            break;
+          case 'unhandledrejection':
+            typeClass = 'color: #f57c00;';
+            typeLabel = 'Promise异常';
+            break;
+          case 'console.error':
+            typeClass = 'color: #7B1FA2;';
+            typeLabel = 'console.error';
+            break;
+          case 'resource_error':
+            typeClass = 'color: #00897B;';
+            typeLabel = '资源加载错误';
+            break;
+        }
+        html += '<div class="error-item">' +
+          '<div class="error-type" style="' + typeClass + '">' + escapeHtml(typeLabel) + '</div>' +
+          '<div class="error-msg">' + escapeHtml(err.message) + '</div>' +
+          '<div class="error-time">🕐 ' + formatTime(err.time) + ' | 📍 ' + escapeHtml(err.url) +
+          (err.line ? ' | 第 ' + err.line + ' 行' : '') +
+          (err.col ? '，第 ' + err.col + ' 列' : '') +
+          '</div>';
+        if (err.stack) {
+          html += '<div class="error-stack">' + escapeHtml(err.stack) + '</div>';
+        }
+        html += '</div>';
+      }
+      container.innerHTML = html;
+      // 滚动到顶部
+      container.scrollTop = 0;
+    }
+    function escapeHtml(text) {
+      if (!text) return '';
+      var div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    function formatTime(isoStr) {
+      try {
+        var d = new Date(isoStr);
+        return d.toLocaleTimeString('zh-CN', { hour12: false }) + '.' + String(d.getMilliseconds()).padStart(3, '0');
+      } catch (e) {
+        return isoStr;
+      }
+    }
+    // ============================================================
+    // 7. Toast 提示
+    // ============================================================
+    function showToast(msg) {
+      var existing = document.querySelector('.toast');
+      if (existing) existing.remove();
+      var toast = document.createElement('div');
+      toast.className = 'toast';
+      toast.textContent = msg;
+      document.body.appendChild(toast);
+      setTimeout(function() {
+        toast.remove();
+      }, 2500);
+    }
+    // ============================================================
+    // 8. 测试函数
+    // ============================================================
+    function testConsoleError() {
+      console.error('这是一条测试错误消息来自 console.error');
+    }
+    function testThrowError() {
+      try {
+        throw new Error('这是一条测试的 throw Error');
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    function testPromiseRejection() {
+      Promise.reject(new Error('这是一条测试的 Promise 异常'));
+    }
+    function testReferenceError() {
+      try {
+        // 故意制造引用错误
+        var obj = {};
+        obj.someMethod();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    // ============================================================
+    // 9. 监听控制台日志（记录到页面上）
+    // ============================================================
+    (function() {
+      var logContainer = document.getElementById('console-log');
+      var logCount = 0;
+      function addLog(level, args) {
+        logCount++;
+        var message = Array.prototype.slice.call(args).map(function(arg) {
+          try {
+            if (typeof arg === 'object') return JSON.stringify(arg, null, 2);
+            return String(arg);
+          } catch (e) {
+            return String(arg);
+          }
+        }).join(' ');
+        var colors = {
+          log: '#333',
+          info: '#1976D2',
+          warn: '#f57c00',
+          error: '#d32f2f'
+        };
+        var emptyState = logContainer.querySelector('.empty-state');
+        if (emptyState) emptyState.remove();
+        var entry = document.createElement('div');
+        entry.style.cssText = 'padding: 4px 8px; font-size: 12px; border-bottom: 1px solid #f0f0f0; word-break: break-all;';
+        entry.innerHTML = '<span style="color:' + (colors[level] || '#333') + ';font-weight:bold;">[' + level.toUpperCase() + ']</span> ' +
+                          '<span style="color:#999;font-size:11px;">' + formatTime(new Date().toISOString()) + '</span> ' +
+                          escapeHtml(message);
+        logContainer.appendChild(entry);
+        logContainer.scrollTop = logContainer.scrollHeight;
+        // 限制日志数量
+        if (logCount > 200) {
+          var first = logContainer.firstChild;
+          if (first) first.remove();
+          logCount--;
+        }
+      }
+      // 重写 console.log/info/warn
+      var levels = ['log', 'info', 'warn'];
+      for (var i = 0; i < levels.length; i++) {
+        (function(level) {
+          var original = console[level];
+          console[level] = function() {
+            addLog(level, arguments);
+            original.apply(console, arguments);
+          };
+        })(levels[i]);
+      }
+    })();
+    // ============================================================
+    // 10. 初始化
+    // ============================================================
+    // 页面加载完成后初始化
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', function() {
+        initVConsole();
+        updatePageInfo();
+        console.log('[DebugTool] 前端调试工具已启动');
+        console.log('[DebugTool] Agent:', AGENT_NAME, '| User:', USER_NAME);
+      });
+    } else {
+      initVConsole();
+      updatePageInfo();
+      console.log('[DebugTool] 前端调试工具已启动');
+      console.log('[DebugTool] Agent:', AGENT_NAME, '| User:', USER_NAME);
+    }
+  </script>
+</body>
+</html>