@aiscene/aiserver 1.2.5 → 1.2.7

package/dist/web/debug-page.js

@@ -38,7 +38,7 @@ html,body{overflow:hidden;margin:0;padding:0}
 .debug-terminal-body .log-error{color:#dc2626}
 .debug-terminal-body .log-success{color:#16a34a}
 /* 实时报告面板 - 右侧独立列（白色主题） */
-.debug-report-panel{width:480px;min-width:400px;max-width:600px;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;background:#fff}
+.debug-report-panel{width:640px;min-width:520px;max-width:800px;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;background:#fff}
 .debug-report-panel.hidden{display:none}
 .debug-report-header{padding:8px 16px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
 .debug-report-header .title{font-size:11px;color:#1e293b;display:flex;align-items:center;gap:6px;font-weight:600}
@@ -88,10 +88,11 @@ html,body{overflow:hidden;margin:0;padding:0}
 .rrd-progress-fill{height:100%;background:#2563eb;border-radius:2px;transition:width .3s}
 .rrd-empty{text-align:center;color:#94a3b8;padding:40px 20px;font-size:13px}
 /* 截图展示 */
-.rrd-screenshot{margin-top:8px;border-radius:6px;overflow:hidden;border:1px solid #e2e8f0;background:#fff}
+.rrd-screenshot{margin-top:8px;border-radius:6px;overflow:hidden;border:1px solid #e2e8f0;background:#fff;position:relative}
 .rrd-screenshot img{width:100%;display:block;cursor:pointer;transition:opacity .2s}
 .rrd-screenshot img:hover{opacity:0.9}
 .rrd-screenshot-label{font-size:10px;color:#64748b;padding:4px 8px;text-align:center}
+.rrd-screenshot-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
 .debug-statusbar{height:28px;background:#fff;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
 .debug-statusbar .left{display:flex;align-items:center;gap:12px;font-size:11px;color:#64748b}
 .debug-statusbar .right{display:flex;align-items:center;gap:8px}
@@ -163,27 +164,20 @@ html,body{overflow:hidden;margin:0;padding:0}
 .btn-blue:hover{background:#1d4ed8}
 
 /* AI生成脚本对话框样式 */
-.ai-generator-panel{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;z-index:100;transition:transform .3s;transform:translateY(calc(100% - 44px))}
-.ai-generator-panel.expanded{transform:translateY(0)}
-.ai-generator-header{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#f8fafc}
+.ai-generator-panel{border-top:1px solid #e2e8f0;background:#fff;display:flex;flex-direction:column}
+.ai-generator-header{padding:8px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#f8fafc;border-bottom:1px solid #e2e8f0}
 .ai-generator-header:hover{background:#f1f5f9}
 .ai-generator-header .title{font-size:13px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:8px}
 .ai-generator-header .toggle-icon{font-size:12px;color:#64748b;transition:transform .2s}
-.ai-generator-panel.expanded .toggle-icon{transform:rotate(180deg)}
-.ai-generator-body{padding:16px;border-top:1px solid #e2e8f0;max-height:300px;overflow-y:auto}
-.ai-generator-input-row{display:flex;gap:12px;margin-bottom:12px}
-.ai-generator-input-row input{flex:1;padding:10px 14px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;color:#1e293b;outline:none}
+.ai-generator-panel.collapsed .ai-generator-body{display:none}
+.ai-generator-panel.collapsed .toggle-icon{transform:rotate(180deg)}
+.ai-generator-body{padding:12px 16px;overflow-y:auto;flex:1;min-height:0}
+.ai-generator-input-row{display:flex;gap:8px;margin-bottom:8px}
+.ai-generator-input-row input{flex:1;padding:8px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:13px;color:#1e293b;outline:none}
 .ai-generator-input-row input:focus{border-color:#38bdf8}
-.ai-generator-input-row button{padding:10px 20px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap}
+.ai-generator-input-row button{padding:8px 16px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap}
 .ai-generator-input-row button:hover{background:#1d4ed8}
 .ai-generator-input-row button:disabled{background:#94a3b8;cursor:not-allowed}
-.ai-generator-hint{font-size:11px;color:#94a3b8;margin-bottom:12px}
-.ai-generator-result{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
-.ai-generator-result-header{padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:12px;font-weight:600;color:#64748b;display:flex;align-items:center;justify-content:space-between}
-.ai-generator-result-body{padding:12px;font-size:12px;line-height:1.6;color:#1e293b;white-space:pre-wrap;font-family:'SF Mono',Monaco,Consolas,monospace;max-height:200px;overflow-y:auto;background:#fff}
-.ai-generator-result-actions{display:flex;gap:8px;padding:8px 12px;background:#f8fafc;border-top:1px solid #e2e8f0}
-.ai-generator-loading{display:flex;align-items:center;gap:8px;padding:12px;color:#64748b;font-size:12px}
-.ai-generator-loading .spinner{width:16px;height:16px;border:2px solid #e2e8f0;border-top-color:#38bdf8;border-radius:50%;animation:spin 1s linear infinite}
 </style>
 
 <div class="debug-page" id="debug-page-content">
@@ -240,11 +234,6 @@ html,body{overflow:hidden;margin:0;padding:0}
         </div>
       </div>
 
-      <div class="checkbox-group">
-        <input type="checkbox" id="debug-skipAppium" checked>
-        <label for="debug-skipAppium">跳过 Appium 服务</label>
-      </div>
-
       <div class="form-group">
         <label>登录用户名（选填）</label>
         <input id="debug-loginUser" placeholder="输入用户名">
@@ -270,7 +259,6 @@ html,body{overflow:hidden;margin:0;padding:0}
       <div class="actions">
         <button class="btn-icon btn-ghost" onclick="openCaseSelector()">&#128193; 选择用例</button>
         <button class="btn-icon btn-ghost" onclick="openSaveCaseDialog()">&#128190; 保存用例</button>
-        <button class="btn-icon btn-ghost" onclick="handleGenerateScript()">&#9889; 生成脚本</button>
         <button class="btn-icon btn-ghost" onclick="handleClearEditor()">&#128465; 清空</button>
       </div>
     </div>
@@ -280,6 +268,24 @@ html,body{overflow:hidden;margin:0;padding:0}
       <textarea id="debug-script" placeholder="// 在此编写调试脚本\n\n" spellcheck="false"></textarea>
     </div>
 
+    <!-- AI脚本生成器 - 内嵌在脚本编辑器下方 -->
+    <div class="ai-generator-panel" id="ai-generator-panel">
+      <div class="ai-generator-header" onclick="toggleAiGenerator()">
+        <div class="title">
+          <span style="font-size:14px">&#9889;</span>
+          <span>AI 脚本生成器</span>
+          <span style="font-size:11px;color:#94a3b8;font-weight:400">- 输入自然语言描述，生成脚本直接写入编辑器</span>
+        </div>
+        <div class="toggle-icon">&#9650;</div>
+      </div>
+      <div class="ai-generator-body">
+        <div class="ai-generator-input-row">
+          <input type="text" id="ai-generator-input" placeholder="输入自然语言描述，例如：点击搜索按钮，输入'京东'，然后点击搜索" onkeypress="if(event.key==='Enter')handleAiGenerate()">
+          <button id="ai-generator-btn" onclick="handleAiGenerate()">&#9889; 生成</button>
+        </div>
+      </div>
+    </div>
+
     <!-- 终端面板 -->
     <div class="debug-terminal" id="debug-terminal">
       <div class="debug-terminal-header">
@@ -310,28 +316,6 @@ html,body{overflow:hidden;margin:0;padding:0}
     </div>
   </div>
 
-  <!-- AI生成脚本对话框 -->
-  <div class="ai-generator-panel" id="ai-generator-panel">
-    <div class="ai-generator-header" onclick="toggleAiGenerator()">
-      <div class="title">
-        <span style="font-size:16px">&#9889;</span>
-        <span>AI 脚本生成器</span>
-        <span style="font-size:11px;color:#94a3b8;font-weight:400">- 输入自然语言描述生成自动化脚本</span>
-      </div>
-      <div class="toggle-icon">&#9650;</div>
-    </div>
-    <div class="ai-generator-body">
-      <div class="ai-generator-input-row">
-        <input type="text" id="ai-generator-input" placeholder="输入自然语言描述，例如：点击搜索按钮，输入"京东"，然后点击搜索" onkeypress="if(event.key==='Enter')handleAiGenerate()">
-        <button id="ai-generator-btn" onclick="handleAiGenerate()">&#9889; 生成脚本</button>
-      </div>
-      <div class="ai-generator-hint">
-        &#128161; 提示：描述越详细，生成的脚本越准确。支持描述页面操作、数据验证、流程步骤等
-      </div>
-      <div id="ai-generator-result"></div>
-    </div>
-  </div>
-
   <!-- 实时报告面板 - 右侧独立列 -->
   <div class="debug-report-panel hidden" id="debug-report-panel">
     <div class="debug-report-header">
@@ -420,7 +404,7 @@ html,body{overflow:hidden;margin:0;padding:0}
     </div>
     <div class="modal-footer">
       <button class="btn btn-cancel" onclick="closeSaveCaseDialog()">取消</button>
-      <button class="btn btn-primary" onclick="handleSaveCase()">保存</button>
+      <button class="btn btn-primary" id="save-case-submit-btn" onclick="handleSaveCase()">保存</button>
     </div>
   </div>
 </div>
@@ -953,14 +937,24 @@ function renderStepDetail() {
     if(task.usage) {
       html += '<div style="margin-top:4px;font-size:10px;color:#64748b">模型: ' + escHtml(task.usage.model_name || task.usage.model_description || '-') + ' | Token: ' + (task.usage.prompt_tokens || 0) + '+' + (task.usage.completion_tokens || 0) + '=' + (task.usage.total_tokens || 0) + '</div>';
     }
-    // 截图展示 - 图片可点击在新窗口打开
+    // 截图展示 - 图片可点击在新窗口打开，并在图片上绘制定位矩形
     if(task.uiContext && task.uiContext.screenshot) {
       const ss = task.uiContext.screenshot;
+      // 提取 element 定位信息（从 task.output.element 或 task.log 中）
+      let elementInfo = null;
+      if(task.output && task.output.element) {
+        elementInfo = task.output.element;
+      } else if(task.log && task.log.data && task.log.data.element) {
+        elementInfo = task.log.data.element;
+      }
+      const elementJson = elementInfo ? escHtml(JSON.stringify(elementInfo)) : '';
       if(ss.base64) {
         const sizeLabel = ss.width ? ss.width + "x" + (ss.height || "") : "";
-        html += '<div class="rrd-screenshot"><img src="' + escHtml(ss.base64) + '" title="点击查看大图" /><div class="rrd-screenshot-label">UI截图 ' + sizeLabel + '</div></div>';
+        const canvasId = 'ss-canvas-' + index + '-' + (exec.tasks || []).indexOf(task);
+        html += '<div class="rrd-screenshot"><img src="' + escHtml(ss.base64) + '" title="点击查看大图" data-canvas-id="' + canvasId + '" data-element="' + elementJson + '" onload="drawElementRect(this)" /><canvas id="' + canvasId + '" class="rrd-screenshot-canvas"></canvas><div class="rrd-screenshot-label">UI截图 ' + sizeLabel + '</div></div>';
       } else if(ss.url) {
-        html += '<div class="rrd-screenshot"><img src="' + escHtml(ss.url) + '" title="点击查看大图" /><div class="rrd-screenshot-label">UI截图</div></div>';
+        const canvasId = 'ss-canvas-' + index + '-' + (exec.tasks || []).indexOf(task);
+        html += '<div class="rrd-screenshot"><img src="' + escHtml(ss.url) + '" title="点击查看大图" data-canvas-id="' + canvasId + '" data-element="' + elementJson + '" onload="drawElementRect(this)" /><canvas id="' + canvasId + '" class="rrd-screenshot-canvas"></canvas><div class="rrd-screenshot-label">UI截图</div></div>';
       }
     }
     html += '</div></div>';
@@ -976,6 +970,112 @@ function openReport() {
   }
 }
 
+// 在截图上绘制元素定位矩形
+function drawElementRect(imgEl) {
+  const canvasId = imgEl.dataset.canvasId;
+  const elementJsonStr = imgEl.dataset.element;
+  if(!elementJsonStr) return;
+  let element;
+  try { element = JSON.parse(elementJsonStr); } catch(e) { return; }
+  if(!element.rect && !element.center) return;
+
+  const canvas = document.getElementById(canvasId);
+  if(!canvas) return;
+
+  // 等待图片加载完成后获取显示尺寸
+  const draw = () => {
+    const displayW = imgEl.clientWidth;
+    const displayH = imgEl.clientHeight;
+    if(!displayW || !displayH) return;
+
+    // 获取原始截图尺寸（dpr相关）
+    const dpr = element.dpr || 1;
+    const origW = imgEl.naturalWidth / dpr;
+    const origH = imgEl.naturalHeight / dpr;
+
+    // 设置 canvas 尺寸与图片显示区域一致
+    canvas.width = displayW;
+    canvas.height = displayH;
+    canvas.style.width = displayW + 'px';
+    canvas.style.height = displayH + 'px';
+
+    const ctx = canvas.getContext('2d');
+    if(!ctx) return;
+
+    // 缩放比例：从原始坐标到显示坐标
+    const scaleX = displayW / origW;
+    const scaleY = displayH / origH;
+
+    if(element.rect) {
+      const r = element.rect;
+      const x = r.left * scaleX;
+      const y = r.top * scaleY;
+      const w = r.width * scaleX;
+      const h = r.height * scaleY;
+
+      // 半透明填充
+      ctx.fillStyle = 'rgba(37, 99, 235, 0.12)';
+      ctx.fillRect(x, y, w, h);
+
+      // 边框
+      ctx.strokeStyle = '#2563eb';
+      ctx.lineWidth = 2.5;
+      ctx.strokeRect(x, y, w, h);
+
+      // 角标（左上角小方块）
+      const cornerSize = 6;
+      ctx.fillStyle = '#2563eb';
+      ctx.fillRect(x - 1, y - 1, cornerSize, cornerSize);
+      ctx.fillRect(x + w - cornerSize + 1, y - 1, cornerSize, cornerSize);
+      ctx.fillRect(x - 1, y + h - cornerSize + 1, cornerSize, cornerSize);
+      ctx.fillRect(x + w - cornerSize + 1, y + h - cornerSize + 1, cornerSize, cornerSize);
+    }
+
+    if(element.center) {
+      const cx = element.center[0] * scaleX;
+      const cy = element.center[1] * scaleY;
+
+      // 十字标记
+      ctx.strokeStyle = '#dc2626';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(cx - 10, cy);
+      ctx.lineTo(cx + 10, cy);
+      ctx.moveTo(cx, cy - 10);
+      ctx.lineTo(cx, cy + 10);
+      ctx.stroke();
+
+      // 中心圆点
+      ctx.fillStyle = '#dc2626';
+      ctx.beginPath();
+      ctx.arc(cx, cy, 4, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // 标签描述
+    if(element.description) {
+      const labelX = element.rect ? element.rect.left * scaleX : (element.center ? element.center[0] * scaleX - 30 : 4);
+      const labelY = element.rect ? element.rect.top * scaleY - 6 : (element.center ? element.center[1] * scaleY - 16 : 4);
+      ctx.font = '600 11px -apple-system, sans-serif';
+      const textW = ctx.measureText(element.description).width + 10;
+      // 标签背景
+      ctx.fillStyle = '#2563eb';
+      const labelDrawY = labelY > 18 ? labelY - 14 : labelY + (element.rect ? element.rect.height * scaleY + 14 : 0);
+      ctx.fillRect(labelX, labelDrawY, textW, 16);
+      // 标签文字
+      ctx.fillStyle = '#fff';
+      ctx.fillText(element.description, labelX + 5, labelDrawY + 12);
+    }
+  };
+
+  // 确保 img 已加载
+  if(imgEl.complete && imgEl.naturalWidth > 0) {
+    draw();
+  } else {
+    imgEl.addEventListener('load', draw);
+  }
+}
+
 // ===== 历史记录 =====
 function saveToHistory(status) {
   const item = {
@@ -1077,17 +1177,26 @@ async function loadFolderTree() {
 
 function renderFolderTree() {
   const list = document.getElementById('case-folder-list');
+  list.innerHTML = '';
   if(caseSelectorState.folders.length === 0) {
     list.innerHTML = '<div style="text-align:center;color:#64748b;padding:20px">暂无文件夹</div>';
     return;
   }
-  list.innerHTML = '<div class="folder-item" onclick="loadAllCases()" style="color:#22c55e">&#128196; 全部用例</div>';
-  caseSelectorState.folders.forEach((folder, idx) => {
-    list.innerHTML += renderFolderNode(folder, 0, 'root-' + idx);
+  // 全部用例
+  const allItem = document.createElement('div');
+  allItem.className = 'folder-item';
+  allItem.style.color = '#22c55e';
+  allItem.innerHTML = '&#128196; 全部用例';
+  allItem.onclick = function() { loadAllCases(); };
+  list.appendChild(allItem);
+
+  caseSelectorState.folders.forEach(function(folder, idx) {
+    const node = buildFolderNode(folder, 0, 'root-' + idx);
+    list.appendChild(node);
   });
 }
 
-function renderFolderNode(node, level, key) {
+function buildFolderNode(node, level, key) {
   const info = node.folder || {};
   const folderId = info.folderId || info.id;
   const name = (!info.folderName || info.folderName === '未命名文件夹') ? '未分类' : info.folderName;
@@ -1096,29 +1205,56 @@ function renderFolderNode(node, level, key) {
   const isActive = caseSelectorState.selectedFolderId === folderId;
   const indent = level * 16 + 8;
 
-  let html = '<div class="folder-item' + (isActive ? ' active' : '') + '" style="padding-left:' + indent + 'px" onclick="selectFolder(&apos;' + folderId + '&apos;, this)">';
-  if(hasChildren) html += '<span class="arrow" onclick="event.stopPropagation();toggleFolder(this)">&#9654;</span>';
-  else html += '<span style="width:10px;display:inline-block"></span>';
-  html += '&#128193; ' + escHtml(name);
-  if(count > 0) html += ' <span style="color:#64748b;font-size:11px">(' + count + ')</span>';
-  html += '</div>';
+  const item = document.createElement('div');
+  item.className = 'folder-item' + (isActive ? ' active' : '');
+  item.style.paddingLeft = indent + 'px';
 
   if(hasChildren) {
-    html += '<div class="folder-children" style="display:none">';
-    node.children.forEach((child, idx) => {
-      html += renderFolderNode(child, level + 1, key + '-' + idx);
-    });
-    html += '</div>';
+    const arrow = document.createElement('span');
+    arrow.className = 'arrow';
+    arrow.innerHTML = '&#9654;';
+    arrow.onclick = function(e) {
+      e.stopPropagation();
+      arrow.classList.toggle('expanded');
+      const childrenDiv = item.nextElementSibling;
+      if(childrenDiv && childrenDiv.classList.contains('folder-children')) {
+        childrenDiv.style.display = childrenDiv.style.display === 'none' ? '' : 'none';
+      }
+    };
+    item.appendChild(arrow);
+  } else {
+    const spacer = document.createElement('span');
+    spacer.style.cssText = 'width:10px;display:inline-block';
+    item.appendChild(spacer);
   }
-  return html;
-}
 
-function toggleFolder(arrow) {
-  arrow.classList.toggle('expanded');
-  const children = arrow.closest('.folder-item').nextElementSibling;
-  if(children && children.classList.contains('folder-children')) {
-    children.style.display = children.style.display === 'none' ? '' : 'none';
+  const text = document.createTextNode('\u{1F4C1} ' + name);
+  item.appendChild(text);
+
+  if(count > 0) {
+    const countSpan = document.createElement('span');
+    countSpan.style.cssText = 'color:#64748b;font-size:11px';
+    countSpan.textContent = ' (' + count + ')';
+    item.appendChild(countSpan);
+  }
+
+  item.onclick = function() { selectFolder(String(folderId)); };
+
+  // 容器：先放item，再放children
+  const wrapper = document.createDocumentFragment();
+  wrapper.appendChild(item);
+
+  if(hasChildren) {
+    const childrenDiv = document.createElement('div');
+    childrenDiv.className = 'folder-children';
+    childrenDiv.style.display = 'none';
+    node.children.forEach(function(child, idx) {
+      childrenDiv.appendChild(buildFolderNode(child, level + 1, key + '-' + idx));
+    });
+    wrapper.appendChild(childrenDiv);
   }
+
+  return wrapper;
 }
 
 async function selectFolder(folderId) {
@@ -1245,15 +1381,22 @@ function confirmCaseSelection() {
 }
 
 // ===== 保存用例 =====
-function openSaveCaseDialog() {
+async function openSaveCaseDialog() {
+  const saveBtn = document.getElementById('save-case-submit-btn');
   if(debugState.currentTestCase) {
     document.getElementById('save-case-title').textContent = '修改测试用例';
     document.getElementById('save-case-name').value = debugState.currentTestCase.configName || '';
+    saveBtn.textContent = '更新';
   } else {
     document.getElementById('save-case-title').textContent = '保存测试用例';
     document.getElementById('save-case-name').value = '';
+    saveBtn.textContent = '保存';
   }
   document.getElementById('save-case-modal').style.display = '';
+  // 确保文件夹树已加载
+  if(!debugState.folderTree || debugState.folderTree.length === 0) {
+    await loadFolderTree();
+  }
   loadSaveFolderOptions();
 }
 
@@ -1284,6 +1427,10 @@ function loadSaveFolderOptions() {
     });
   }
   addFolders(debugState.folderTree, '');
+  // 如果有当前用例，自动选中其所在文件夹
+  if(debugState.currentTestCase && debugState.currentTestCase.folderId) {
+    sel.value = debugState.currentTestCase.folderId;
+  }
 }
 
 async function handleSaveCase() {
@@ -1423,159 +1570,141 @@ function handleClearEditor() {
 // ===== AI脚本生成器 =====
 function toggleAiGenerator() {
   const panel = document.getElementById('ai-generator-panel');
-  panel.classList.toggle('expanded');
+  panel.classList.toggle('collapsed');
+}
+
+// 清理Markdown代码块标记
+function cleanCodeBlock(str) {
+  var bt = String.fromCharCode(96);
+  var pattern1 = bt+bt+bt+'javascript';
+  var pattern2 = bt+bt+bt;
+  return str.split(pattern1).join('').split(pattern2).join('').trim();
 }
 
 async function handleAiGenerate() {
   const input = document.getElementById('ai-generator-input');
   const btn = document.getElementById('ai-generator-btn');
-  const resultDiv = document.getElementById('ai-generator-result');
-  const naturalLanguage = input.value.trim();
+  const keyword = input.value.trim();
 
-  if(!naturalLanguage) {
-    alert('请输入自然语言描述');
+  if (!keyword) {
+    addDebugLog('请输入代码描述', 'warn');
     return;
   }
 
   // 显示加载状态
   btn.disabled = true;
-  btn.innerHTML = '<span class="spinner"></span> 生成中...';
-  resultDiv.innerHTML = '<div class="ai-generator-loading"><span class="spinner"></span> 正在生成脚本，请稍候...</div>';
+  btn.innerHTML = '<span class="spinner" style="width:14px;height:14px;border:2px solid #fef3c7;border-top-color:#d97706;border-radius:50%;display:inline-block;vertical-align:middle;animation:spin 1s linear infinite"></span> 生成中...';
+  addDebugLog('正在生成脚本...', 'info');
 
   try {
     // 获取当前配置信息
-    const runMode = document.getElementById('debug-runMode').value;
     const platform = document.getElementById('debug-platform').value;
-    const url = document.getElementById('debug-url').value || '';
-    const deviceId = runMode === 'device' ? document.getElementById('debug-device').value : '';
-    const packageName = runMode === 'device' ? getPackageName() : '';
+    const packageName = getPackageName();
+    const testUrl = document.getElementById('debug-url').value || '';
+    const erp = 'system';
+
+    // 构建请求参数
+    const body = {
+      traceId: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+      reqId: Date.now().toString(),
+      erp: erp,
+      keyword: keyword,
+      platform: platform,
+      packageName: packageName,
+      testUrl: testUrl
+    };
 
-    // 调用API生成脚本
-    const response = await fetch('/api/ai/generate-script', {
+    const headers = {
+      'Content-Type': 'application/json',
+      'Accept': 'text/event-stream',
+      'autobots-agent-id': '30323',
+      'autobots-token': '60e7b3f68f654e9992ae0d403d2d90e5'
+    };
+
+    // 直接发送fetch请求处理SSE
+    const response = await fetch('http://autobots-bk.jd.local/autobots/api/v1/searchAiSse', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        naturalLanguage,
-        runMode,
-        platform,
-        url,
-        deviceId,
-        packageName
-      })
+      headers: headers,
+      body: JSON.stringify(body),
     });
 
-    const data = await response.json();
+    if (!response.ok) {
+      throw new Error('HTTP ' + response.status);
+    }
 
-    if(data.success && data.script) {
-      // 显示生成的脚本
-      resultDiv.innerHTML = '<div class="ai-generator-result" id="ai-result-container" data-script="' + btoa(encodeURIComponent(data.script)) + '">' +
-        '<div class="ai-generator-result-header">' +
-          '<span>&#9989; 脚本已生成</span>' +
-          '<span style="font-size:10px;color:#94a3b8;font-weight:400">点击"添加到脚本框"将脚本加入编辑器</span>' +
-        '</div>' +
-        '<div class="ai-generator-result-body">' + escHtml(data.script) + '</div>' +
-        '<div class="ai-generator-result-actions">' +
-          '<button class="btn-icon btn-blue" style="padding:6px 12px;font-size:12px" onclick="handleAppendScript()">&#8594; 添加到脚本框</button>' +
-          '<button class="btn-icon btn-ghost" style="padding:6px 12px;font-size:12px" onclick="handleCopyScript()">&#128203; 复制</button>' +
-          '<button class="btn-icon btn-ghost" style="padding:6px 12px;font-size:12px" onclick="clearAiResult()">&#10005; 清空</button>' +
-        '</div>' +
-      '</div>';
-      addDebugLog('AI脚本生成成功', 'success');
-    } else {
-      // API不支持或失败，使用本地生成
-      const localScript = generateScriptFromNaturalLanguage(naturalLanguage);
-      resultDiv.innerHTML = '<div class="ai-generator-result" id="ai-result-container" data-script="' + btoa(encodeURIComponent(localScript)) + '">' +
-        '<div class="ai-generator-result-header">' +
-          '<span>&#9989; 脚本已生成（本地模式）</span>' +
-          '<span style="font-size:10px;color:#94a3b8;font-weight:400">提示：配置AI服务可获得更精准的脚本生成</span>' +
-        '</div>' +
-        '<div class="ai-generator-result-body">' + escHtml(localScript) + '</div>' +
-        '<div class="ai-generator-result-actions">' +
-          '<button class="btn-icon btn-blue" style="padding:6px 12px;font-size:12px" onclick="handleAppendScript()">&#8594; 添加到脚本框</button>' +
-          '<button class="btn-icon btn-ghost" style="padding:6px 12px;font-size:12px" onclick="handleCopyScript()">&#128203; 复制</button>' +
-          '<button class="btn-icon btn-ghost" style="padding:6px 12px;font-size:12px" onclick="clearAiResult()">&#10005; 清空</button>' +
-        '</div>' +
-      '</div>';
-      addDebugLog('使用本地模式生成脚本', 'info');
+    if (!response.body) {
+      throw new Error('No response body');
     }
-  } catch(error) {
-    // 发生错误，使用本地生成
-    console.error('AI脚本生成失败:', error);
-    const localScript = generateScriptFromNaturalLanguage(naturalLanguage);
-    resultDiv.innerHTML = '<div class="ai-generator-result" id="ai-result-container" data-script="' + btoa(encodeURIComponent(localScript)) + '">' +
-      '<div class="ai-generator-result-header">' +
-        '<span>&#9888; 使用本地模式生成</span>' +
-        '<span style="font-size:10px;color:#f59e0b;font-weight:400">AI服务不可用</span>' +
-      '</div>' +
-      '<div class="ai-generator-result-body">' + escHtml(localScript) + '</div>' +
-      '<div class="ai-generator-result-actions">' +
-        '<button class="btn-icon btn-blue" style="padding:6px 12px;font-size:12px" onclick="handleAppendScript()">&#8594; 添加到脚本框</button>' +
-        '<button class="btn-icon btn-ghost" style="padding:6px 12px;font-size:12px" onclick="handleCopyScript()">&#128203; 复制</button>' +
-        '<button class="btn-icon btn-ghost" style="padding:6px 12px;font-size:12px" onclick="clearAiResult()">&#10005; 清空</button>' +
-      '</div>' +
-    '</div>';
-    addDebugLog('AI服务不可用，使用本地模式生成脚本', 'warn');
-  }
 
-  // 恢复按钮状态
-  btn.disabled = false;
-  btn.innerHTML = '&#9889; 生成脚本';
-}
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let finalContent = '';
 
-function getCurrentGeneratedScript() {
-  const container = document.getElementById('ai-result-container');
-  if (!container) return '';
-  try {
-    const encoded = container.getAttribute('data-script');
-    return decodeURIComponent(atob(encoded));
-  } catch(e) {
-    return '';
-  }
-}
+    // 脚本编辑器 - 记住原有内容
+    const editor = document.getElementById('debug-script');
+    const existingContent = editor.value.trim();
 
-function handleAppendScript() {
-  const script = getCurrentGeneratedScript();
-  if (script) {
-    appendToScriptEditor(script);
-  }
-}
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        addDebugLog('脚本生成完成', 'success');
+        break;
+      }
 
-function handleCopyScript() {
-  const script = getCurrentGeneratedScript();
-  if (script) {
-    copyScriptToClipboard(script);
-  }
-}
+      buffer += decoder.decode(value, { stream: true });
+
+      // 按行分割处理
+      const lines = buffer.split('\\n');
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        if (line.startsWith('data:')) {
+          try {
+            const jsonStr = line.slice(5).trim();
+            const parsedData = JSON.parse(jsonStr);
+            const responseContent = parsedData.data?.response || parsedData.response || '';
+            const responseAll = parsedData.data?.responseAll || parsedData.responseAll || '';
+
+            if (responseContent) {
+              const cleanContent = cleanCodeBlock(responseContent);
+              finalContent = cleanContent;
+            }
+
+            if (parsedData.data?.status === 'finished' || parsedData.status === 'finished') {
+              if (responseAll) {
+                const cleanContent = cleanCodeBlock(responseAll);
+                finalContent = cleanContent;
+              }
+            }
+
+            // 流式过程中实时预览生成内容
+            if (finalContent) {
+              editor.value = finalContent;
+              editor.scrollTop = editor.scrollHeight;
+            }
+          } catch (error) {
+            // 忽略解析错误
+          }
+        }
+      }
+    }
 
-function appendToScriptEditor(script) {
-  const editor = document.getElementById('debug-script');
-  const currentContent = editor.value.trim();
-  const separator = currentContent ? '\\n\\n// ===== 新增脚本 =====\\n\\n' : '';
+    // 生成完成，将最终内容追加到编辑器原有内容后面
+    if (finalContent) {
+      editor.value = existingContent ? existingContent + '\\n\\n' + finalContent : finalContent;
+    }
+    input.value = '';
+    addDebugLog('脚本已追加到编辑器', 'success');
 
-  if(currentContent) {
-    editor.value = currentContent + separator + script;
-  } else {
-    editor.value = script;
+  } catch(error) {
+    console.error('AI脚本生成失败:', error);
+    addDebugLog('脚本生成失败: ' + error.message, 'error');
   }
 
-  // 清空输入框和结果
-  document.getElementById('ai-generator-input').value = '';
-  clearAiResult();
-
-  addDebugLog('脚本已添加到编辑器', 'success');
-}
-
-function copyScriptToClipboard(text) {
-  navigator.clipboard.writeText(text).then(() => {
-    addDebugLog('脚本已复制到剪贴板', 'success');
-  }).catch(err => {
-    console.error('复制失败:', err);
-    addDebugLog('复制失败，请手动复制', 'error');
-  });
-}
-
-function clearAiResult() {
-  document.getElementById('ai-generator-result').innerHTML = '';
+  // 恢复按钮状态
+  btn.disabled = false;
+  btn.innerHTML = '&#9889; 生成';
 }
 
 // ===== 工具函数 =====