@lark-apaas/devtool-kits 1.1.1-alpha.0 → 1.2.0-alpha.0

package/dist/error.html

@@ -12,22 +12,22 @@
     }
 
     body {
-      font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      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;
     }
 
-    .overlay-container {
+    .container {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: #fff;
+      background-color: #F3F4F6; /* bg-gray-100 */
     }
 
-    .overlay-content {
+    .content {
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -35,37 +35,104 @@
       text-align: center;
     }
 
-    .overlay-error-image {
-      margin-bottom: 12px; /* mb-3 */
-      width: 100px; /* w-[100px] */
+    .error-image {
+      margin-bottom: 16px; /* mb-4 */
+      width: 120px; /* w-[120px] */
       height: auto;
     }
 
-    .overlay-title {
+    .title {
+      font-size: 18px; /* text-l (推测为 text-lg) */
+      line-height: 22px;
       color: #1F2329;
-      text-align: center;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 22px; 
+      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: 8px; /* mb-2 */
+    }
+
+    .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>
 
   <script>
     // 全局错误对象
     let clientBasePath = '{{.clientBasePath}}';
+    let errorData = {
+      message: `{{.errorData.message}}`,
+    };
+
     // 探针配置
     const PROBE_INTERVAL = 2000; // 探测间隔 2 秒
-    const PROBE_TIMEOUT = 3000;  // 单次请求超时 5 秒
+    const PROBE_TIMEOUT = 5000;  // 单次请求超时 5 秒
     let probeTimer = null;
 
     // 初始化页面
     function init() {
       // 通知前端，渲染错误页面已准备就绪
       sendPostMessage({
-        type: 'ServiceStartupFail'
+        type: 'PreviewReady'
       });
 
+      // 如果有错误对象，发送 postMessage
+      if (errorData) {
+        sendPostMessage({
+          type: 'RenderError',
+          data: errorData,
+        });
+      }
+
       // 启动服务恢复探针
       startServiceProbe();
     }
@@ -161,6 +228,52 @@
       }
     }
 
+    // 复制错误信息到剪贴板
+    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() {
+      console.log('[Render Error Repair] 告诉妙搭修复错误:', errorData);
+      sendPostMessage({
+        type: 'RenderErrorRepair',
+        data: errorData,
+      });
+    }
+
     // 发送 postMessage
     function sendPostMessage(message, targetOrigin) {
       const origin = targetOrigin || getPreviewParentOrigin();
@@ -183,6 +296,57 @@
       return 'https://miaoda.feishu-boe.cn';
     }
 
+    // 复制到剪贴板
+    async function copyToClipboard(text) {
+      // 优先使用现代的 Clipboard API
+      if (navigator.clipboard && window.isSecureContext) {
+        try {
+          await navigator.clipboard.writeText(text);
+          return true;
+        } catch (error) {
+          // 权限被拒绝或其他错误，降级到 execCommand
+          console.warn('Clipboard API 失败，降级到 execCommand:', error);
+          return fallbackCopyToClipboard(text);
+        }
+      }
+
+      // 降级方案：使用传统的 execCommand 方法
+      return fallbackCopyToClipboard(text);
+    }
+
+    // 降级复制方案（兼容旧浏览器）
+    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);
@@ -192,16 +356,23 @@
   </script>
 </head>
 <body>
-  <div class="overlay-container">
-    <div class="overlay-content">
+  <div class="container">
+    <div class="content">
       <img
-        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_negative_error.svg"
-        alt="Error"
-        class="overlay-error-image"
-        width="100"
-        height="100"
+        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="overlay-title">服务不可用</p>
+      <p class="title">哎呀，写错代码了</p>
+      <p class="description">可复制错误信息，或告诉妙搭进行修复。</p>
+      <div class="button-group">
+        <button class="button button-copy" id="copyBtn" onclick="handleCopy()">
+          复制错误信息
+        </button>
+        <button class="button button-repair" id="repairBtn" onclick="handleRepair()">
+          告诉妙搭修复
+        </button>
+      </div>
     </div>
   </div>
 </body>