npm - @lark-apaas/devtool-kits - Versions diffs - 0.1.0-alpha.0 → 0.1.0-alpha.10 - Mend

@lark-apaas/devtool-kits 0.1.0-alpha.0 → 0.1.0-alpha.10

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 (9) hide show

package/dist/error.html ADDED Viewed

@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>错误页面</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    .container {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #F3F4F6; /* bg-gray-100 */
+      padding: 20px;
+    }
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      max-width: 800px;
+      width: 100%;
+    }
+    .error-image {
+      margin-bottom: 16px; /* mb-4 */
+      width: 120px; /* w-[120px] */
+      height: auto;
+    }
+    .title {
+      font-size: 18px; /* text-l (推测为 text-lg) */
+      line-height: 22px;
+      color: #1F2329;
+      font-weight: 500; /* font-medium */
+      margin-bottom: 8px; /* mb-2 */
+    }
+    .description {
+      font-size: 14px; /* text-sm */
+      line-height: 22px;
+      color: #646A73;
+      font-weight: 400; /* font-normal */
+      margin-bottom: 16px; /* mb-4 */
+    }
+    .error-message {
+      font-size: 14px;
+      line-height: 20px;
+      color: #DC2626; /* red-600 */
+      margin-bottom: 16px;
+      padding: 8px 12px;
+      background-color: #FEF2F2; /* red-50 */
+      border-radius: 6px;
+      word-break: break-word;
+    }
+    .logs-container {
+      width: 100%;
+      max-width: 700px;
+      margin-bottom: 16px;
+      text-align: left;
+    }
+    .logs-box {
+      background-color: #1F2937; /* gray-800 */
+      color: #F9FAFB; /* gray-50 */
+      padding: 12px;
+      border-radius: 6px;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 12px;
+      line-height: 18px;
+      overflow-x: auto;
+      max-height: 300px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+    .button-group {
+      display: flex;
+      gap: 16px; /* space-x-4 */
+    }
+    .button {
+      height: 32px; /* h-[32px] */
+      padding: 0 16px;
+      border-radius: 6px; /* rounded-[6px] */
+      font-size: 14px; /* text-sm */
+      font-weight: 400; /* font-[400] */
+      cursor: pointer;
+      transition: all 0.2s;
+      outline: none; /* focus:outline-hidden */
+      border: 1px solid;
+    }
+    .button-copy {
+      background-color: white; /* bg-white */
+      color: #4B5563; /* text-gray-600 */
+      border-color: #D0D3D6; /* border-[#D0D3D6] */
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
+    }
+    .button-copy:hover {
+      background-color: #F3F4F6; /* hover:bg-gray-100 */
+    }
+    .button-copy:active {
+      background-color: #E5E7EB; /* active:bg-gray-200 */
+    }
+    .button-repair {
+      background-color: #2563EB; /* bg-blue-600 */
+      color: white; /* text-white */
+      border-color: transparent; /* border-transparent */
+      font-weight: 500; /* font-medium */
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-xs */
+    }
+    .button-repair:hover {
+      background-color: #2563EB; /* hover:bg-blue-600 (保持不变) */
+    }
+    .button-repair:active {
+      background-color: #1E40AF; /* active:bg-blue-700 */
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="content">
+      <img
+        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/render_error.svg"
+        alt="render error"
+        class="error-image"
+      />
+      <p class="title">哎呀，写错代码了</p>
+      <p class="description">代理服务出现异常，请查看下方错误日志</p>
+      <div class="error-message" id="errorMessage"></div>
+      <div class="logs-container">
+        <div class="logs-box" id="logsBox">
+          正在加载日志...
+        </div>
+      </div>
+      <div class="button-group">
+        <button class="button button-copy" id="copyBtn">
+          复制错误信息
+        </button>
+        <button class="button button-repair" id="repairBtn">
+          告诉妙搭修复
+        </button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 全局错误对象
+    let errorData = {
+      message: "{{.errorData.message}}",
+    };
+    let locationData = null;
+    // 初始化页面
+    function init() {
+      // 显示错误信息
+      const errorMessageEl = document.getElementById('errorMessage');
+      const logsBoxEl = document.getElementById('logsBox');
+      if (errorData.message) {
+        errorMessageEl.textContent = errorData.message;
+      }
+      if (errorData.logs) {
+        logsBoxEl.textContent = errorData.logs;
+      } else {
+        logsBoxEl.textContent = '未找到相关错误日志';
+      }
+      // 绑定事件
+      document.getElementById('copyBtn').addEventListener('click', handleCopy);
+      document.getElementById('repairBtn').addEventListener('click', handleRepair);
+      // 获取当前位置信息
+      locationData = {
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+      };
+      // 如果有错误对象，发送 postMessage
+      if (errorData) {
+        sendPostMessage({
+          type: 'RenderError',
+          data: errorData,
+          location: locationData,
+        });
+      }
+    }
+    // 复制错误信息到剪贴板
+    async function handleCopy() {
+      if (!errorData) {
+        console.error('没有错误信息可复制');
+        return;
+      }
+      const { message, logs } = errorData;
+      let result = '';
+      if (message) {
+        result += message + '\n\n';
+      }
+      if (logs) {
+        result += '错误日志:\n' + logs;
+      }
+      if (!result) {
+        result = '未找到错误信息';
+      }
+      const success = await copyToClipboard(result);
+      if (success) {
+        console.log('错误信息已复制到剪贴板');
+        // 可选：显示复制成功提示
+        const btn = document.getElementById('copyBtn');
+        const originalText = btn.textContent;
+        btn.textContent = '已复制!';
+        setTimeout(() => {
+          btn.textContent = originalText;
+        }, 2000);
+      } else {
+        console.error('复制失败');
+      }
+    }
+    // 告诉妙搭修复
+    function handleRepair() {
+      sendPostMessage({
+        type: 'RenderErrorRepair',
+        data: errorData,
+      });
+    }
+    // 发送 postMessage
+    function sendPostMessage(message, targetOrigin) {
+      console.log('发送 postMessage:', message);
+      const origin = targetOrigin || getPreviewParentOrigin();
+      window.parent.postMessage(message, origin);
+    }
+    // 获取父窗口 origin
+    function getPreviewParentOrigin() {
+      // 优先使用 document.referrer
+      if (document.referrer) {
+        try {
+          const url = new URL(document.referrer);
+          return url.origin;
+        } catch (e) {
+          console.error('解析 referrer 失败:', e);
+        }
+      }
+      // 降级方案：使用通配符（不安全，仅用于开发环境）
+      return '*';
+    }
+    // 复制到剪贴板
+    async function copyToClipboard(text) {
+      try {
+        // 优先使用现代的 Clipboard API
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(text);
+          return true;
+        }
+        // 降级方案：使用传统的 execCommand 方法
+        return fallbackCopyToClipboard(text);
+      } catch (error) {
+        console.error('复制到剪切板失败:', error);
+        return false;
+      }
+    }
+    // 降级复制方案（兼容旧浏览器）
+    function fallbackCopyToClipboard(text) {
+      try {
+        // 创建临时的 textarea 元素
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        // 设置样式，使其不可见
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        textArea.setAttribute('readonly', '');
+        // 添加到 DOM
+        document.body.appendChild(textArea);
+        // 选中文本
+        textArea.focus();
+        textArea.select();
+        // 执行复制命令
+        const successful = document.execCommand('copy');
+        // 清理：移除临时元素
+        document.body.removeChild(textArea);
+        return successful;
+      } catch (error) {
+        console.error('降级复制方案失败:', error);
+        return false;
+      }
+    }
+    // 页面加载完成后初始化
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  </script>
+</body>
+</html>