// 步骤编辑器:STEP_LIB/拖拽/参数表单/条件判断/元素抓取/测试此步骤
// ================== 步骤编辑器 ==================
var STEP_LIB=[
// cat:interact=交互操作 / screen=屏幕与App / flow=流程控制(操作库按此分组展示)
{type:'click',label:'点击元素',icon:'✦',cat:'interact',params:{selector_type:'xpath',selector_value:'',wait_timeout:2}},
{type:'click_xy',label:'点击坐标',icon:'🎯',cat:'interact',params:{x:50,y:50}},
{type:'long_click',label:'长按元素',icon:'👆',cat:'interact',params:{selector_type:'xpath',selector_value:'',duration:1.0,wait_timeout:2}},
{type:'swipe',label:'滑动',icon:'↕',cat:'interact',params:{direction:'up',duration_min:0.25,duration_max:0.50,distance_ratio:0.6,jitter:0.15,humanize:true}},
{type:'swipe_until',label:'滑动直到元素',icon:'🔍',cat:'interact',params:{selector_type:'xpath',selector_value:'',direction:'up',max_swipes:8,click_when_found:true,duration_min:0.25,duration_max:0.50,distance_ratio:0.6,jitter:0.15,humanize:true}},
{type:'input_text',label:'输入文字',icon:'⌨',cat:'interact',params:{mode:'random',texts:'你好\n有趣\n支持',fixed_text:'',clear_first:true}},
{type:'clipboard',label:'剪贴板注入',icon:'📋',cat:'interact',params:{text:'',paste:true}},
{type:'key_event',label:'按键',icon:'⌨️',cat:'interact',params:{key:'back'}},
{type:'open_app',label:'打开App',icon:'▶',cat:'screen',params:{package:'',wait_home:false,home_feature:''}},
{type:'stop_app',label:'结束App',icon:'⏹',cat:'screen',params:{package:''}},
{type:'screen_on',label:'亮屏',icon:'💡',cat:'screen',params:{}},
{type:'screen_off',label:'息屏',icon:'🌙',cat:'screen',params:{}},
{type:'keep_screen',label:'保持亮屏',icon:'🔆',cat:'screen',params:{mode:'on'}},
{type:'wait',label:'等待',icon:'⏱',cat:'flow',params:{min:1.0,max:3.0}},
{type:'wait_el',label:'等待元素',icon:'⏳',cat:'flow',params:{selector_type:'xpath',selector_value:'',timeout:10}},
{type:'loop',label:'循环块',icon:'↻',cat:'flow',params:{loop_mode:'rounds',max_iterations:10,loop_duration:600,children:[]}},
{type:'group',label:'动作组',icon:'📦',cat:'flow',params:{children:[]}},
{type:'if_el',label:'条件判断',icon:'❓',cat:'flow',params:{selector_type:'xpath',selector_value:'',timeout:3,ocr_click:false,cmp_op:'',cmp_value:'',cmp_source:'',cmp_group:'',ident_type:'text',ident_value:'',then:[],else:[]}},
{type:'mark_done',label:'记为已做',icon:'✅',cat:'flow',params:{selector_type:'text',selector_value:''}},
{type:'notify',label:'发通知',icon:'🔔',cat:'flow',params:{title:'',message:'',level:'info'}},
{type:'stop_self',label:'停止本设备',icon:'⛔',cat:'flow',params:{reason:''}},
{type:'gesture',label:'录制手势',icon:'⏺',cat:'interact',params:{points:[],speed:1.0}}
];
// 步骤默认值(「任务 → 动作配置」页配置,见 core/step_defaults.py);新建步骤时预填
let _stepDefaults = null;
// 去重有效期选了「按小时」才显示小时数输入框
function _toggleDedupHours(){
var sel=document.getElementById('f-dedup_reset');
var wrap=document.getElementById('f-dedup_hours_wrap');
if(sel&&wrap)wrap.style.display=(sel.value==='hours')?'inline-flex':'none';
}
var STEP_LIB_CATS=[['interact','交互操作'],['screen','屏幕与App'],['flow','流程控制']];
var _customActions=[]; // 后端加载的自定义动作
var _stepIdCounter=0;
function _newStepId(){_stepIdCounter++;return 'step_'+Date.now().toString(36)+'_'+_stepIdCounter;}
// 步骤的所有子步骤数组(loop/group 的 children、if_el 的 then/else 分支)
function _childArrs(s){
var arrs=[];
if(s&&s.params){
if(Array.isArray(s.params.children))arrs.push(s.params.children);
if(Array.isArray(s.params.then))arrs.push(s.params.then);
if(Array.isArray(s.params.else))arrs.push(s.params.else);
}
return arrs;
}
// 递归去掉步骤 id(保存到自定义动作库/拖入画布时重新生成,避免重复拖入后 id 冲突导致多选错乱)
function _stripIds(steps){
steps.forEach(function(s){
delete s.id;
_childArrs(s).forEach(_stripIds);
});
}
function _findLib(type){return STEP_LIB.find(function(s){return s.type===type;});}
// 选择器组件(类型下拉 + 值输入 + 抓取元素 + 测试按钮),click/long_click/swipe_until/wait_el/if_el 复用
// withOcr=true 时额外提供 OCR识别 选项(图片/画布里的文字,仅条件判断支持)
// withDedup=true 时额外提供「去重」条件类型(身份做过了吗,见 core/dedup.py)
// keys 可换字段名(默认 selector_type/selector_value)——「去重」的身份元素用
// ident_type/ident_value,好让同一个条件里既能有主选择器又能有身份元素
function _selRowHtml(p, extra, withOcr, withDedup, keys){
keys=keys||{};
var kType=keys.type||'selector_type', kVal=keys.value||'selector_value';
var typeList=['xpath','description','text','resourceId','descriptionContains','className'];
// withOcr(条件判断用)额外提供"屏幕状态 / 前台App / 去重"三类非元素条件
var types=withOcr?typeList.concat(['ocr','screen','foreground']):typeList.slice();
if(withDedup)types.push('dedup');
var labels={xpath:'xpath',description:'description',text:'text',resourceId:'resourceId',
descriptionContains:'descriptionContains',className:'className',ocr:'OCR识别',
screen:'屏幕状态',foreground:'前台App是',dedup:'去重(这个身份做过了吗)'};
var opts=types.map(function(d){
return ''+labels[d]+' ';}).join('');
var toggle=withOcr?' onchange="_stepEditor._condTypeChanged(this)"':'';
var pick=_can('devices')?'抓取元素 ':'';
var test=_can('devices')?'测试 ':'';
var isScreen=p[kType]==='screen', isFg=p[kType]==='foreground';
var valLabel=isScreen?'屏幕状态':(isFg?'前台包名':'选择器值');
var valHtml;
if(isScreen){
valHtml=''+
'熄屏时就命中 '+
'亮屏时就命中 ';
}else{
valHtml=' '+(isFg?'':pick+test);
}
var head='
'+
'选择器类型 '+opts+'
';
// hideValue:「去重」条件不需要 selector_value(身份元素在 ident_value 里),
// 与其显示一个没人用的输入框,不如只留类型下拉
if(keys.hideValue)return ''+head+'
'+(extra||'');
return ''+(extra||'');
}
// 加载自定义动作库
function _loadCustomActions(){
fetch('/api/custom_actions').then(function(r){return r.json();}).then(function(res){
if(res.ok)_customActions=res.actions||[];
if(typeof _stepEditor!=='undefined')_stepEditor._renderLib();
}).catch(function(){});
}
// 「拟人」开关 + 抖动幅度(滑动类步骤共用;见 core/humanize.py)
function _humanizeChkHtml(p){
return '';
}
function _humanizeRowHtml(p,extra){
return extra+_humanizeChkHtml(p)
+'拟人:滑动走弧线,起止点/幅度/时长每次都抖一点,并按本设备的手速与幅度偏好执行'
+'(每台设备风格稳定不同,批量跑时不像同步机器人)。关掉=还原成正中直线;'
+'抖动填 0=位置/幅度不抖(时长仍在你填的范围内随机)
';
}
var _stepEditor={
_steps:[],
_selected:[],
_dragSuppressClick:false,
init:function(steps,maxDuration,draftKey,canvasId,libId,taskExtra){
this._draftKey=draftKey||'new';
this._selected=[];
this._updatePackBtns();
this._dragSuppressClick=false;
// 可指定编辑容器(任务编辑器 vs 动作编辑器),默认任务编辑器
this._canvas=document.getElementById(canvasId||'se-canvas');
this._lib=document.getElementById(libId||'se-lib');
// 嵌套结构数组注册表:arr 唯一 id → 数组引用(修复多层级循环内移动错位)
this._arrCounter=0;
this._arrById={};
this._arrIdMap=new WeakMap();
// 恢复上次未保存的草稿(实时保存);没有则用传入的步骤
var draft=this._loadDraft();
if(draft&&Array.isArray(draft)){
this._steps=draft;
}else{
this._steps=steps.length?JSON.parse(JSON.stringify(steps)):[];
}
this._ensureIds(this._steps);
this._renderLib();
this._renderCanvas();
_loadCustomActions();
// 实时同步:画布内任何输入(含下拉/勾选)都同步回 _steps 并自动保存
var canvas=this._canvas;
if(canvas&&!canvas.dataset.seBound){
canvas.dataset.seBound='1';
var self=this;
canvas.addEventListener('input',function(){self._syncFromDom();});
}
if(draft&&Array.isArray(draft)){
showToast('已恢复上次未保存的步骤编辑','success');
}
// max_duration 输入框(只在任务编辑器注入,动作编辑不需要)
var head=document.querySelector('#step-editor .se-head');
if(head&&!document.getElementById('f-max_duration')){
var md=document.createElement('span');
md.style.cssText='font-size:11px;display:flex;align-items:center;gap:4px';
md.innerHTML='运行时长上限(秒,0=不限) ';
head.appendChild(md);
}
// 去重有效期(任务级):**只在这一处配**——「条件判断→去重」和「记为已做」两处
// 各填一份的话,填不一致就会算出两个不同的 key、去重静默失效,所以强制共用。
var drHost=document.querySelector('#step-editor .se-head');
if(drHost&&!document.getElementById('f-dedup_reset')){
var ex=taskExtra||{};
var dr=document.createElement('span');
dr.style.cssText='font-size:11px;display:flex;align-items:center;gap:4px';
var selStyle='padding:2px 6px;border:1px solid var(--border);border-radius:4px;font-size:12px';
dr.innerHTML='去重有效期 '+
'每天一次 '+
'只做一次 '+
'按小时 '+
'每 '+
' 小时 ';
drHost.appendChild(dr);
document.getElementById('f-dedup_reset').value=ex.dedup_reset||'day';
_toggleDedupHours();
document.getElementById('f-dedup_reset').addEventListener('change',_toggleDedupHours);
}
},
_ensureIds:function(steps){
var self=this;
steps.forEach(function(s){
if(!s.id)s.id=_newStepId();
_childArrs(s).forEach(function(a){self._ensureIds(a);});
});
},
_renderLib:function(){
var lib=this._lib;
if(!lib)return; // 未初始化编辑器(如仅加载动作列表时)跳过
// 按分类分组展示(STEP_LIB_CATS 定义分类顺序)
var items=STEP_LIB_CATS.map(function(c){
var list=STEP_LIB.filter(function(s){return s.cat===c[0];}).map(function(s){
return ''+
''+s.icon+' '+s.label+'
';
}).join('');
return '';
}).join('');
// 自定义动作区
var customHtml='';
if(_customActions.length){
customHtml='自定义动作
';
customHtml+=_customActions.map(function(a){
return '
'+
''+(a.icon||'📦')+' '+esc(a.name)+' '+
'✕
';
}).join('');
customHtml+='
';
}
lib.innerHTML=items+customHtml;
var self=this;
// 绑定拖拽 + 点击(系统步骤)—— 用 _dragSuppressClick 防止拖拽后重复触发 click
lib.querySelectorAll('.lib-item[data-type]').forEach(function(item){
var type=item.dataset.type;
item.addEventListener('dragstart',function(e){
self._dragSuppressClick=true;
e.dataTransfer.setData('text/plain','type:'+type);
e.dataTransfer.effectAllowed='copy';
});
item.addEventListener('click',function(e){
if(self._dragSuppressClick){self._dragSuppressClick=false;return;}
self.addStep(type);
});
});
// 绑定拖拽 + 点击(自定义动作)
lib.querySelectorAll('.lib-item[data-action-id]').forEach(function(item){
var actionId=item.dataset.actionId;
item.addEventListener('dragstart',function(e){
self._dragSuppressClick=true;
e.dataTransfer.setData('text/plain','action:'+actionId);
e.dataTransfer.effectAllowed='copy';
});
item.addEventListener('click',function(e){
if(e.target.classList.contains('del-btn'))return;
if(self._dragSuppressClick){self._dragSuppressClick=false;return;}
self.addCustomAction(actionId);
});
});
},
_renderCanvas:function(){
if(!this._canvas)return;
this._renderStepList(this._canvas,this._steps);
},
_renderStepList:function(container,steps){
var self=this;
if(!steps.length){
container.innerHTML='';
this._bindDropZone(container,steps); // 空时也要能接收拖入
return;
}
container.innerHTML='';
steps.forEach(function(step,idx){
container.appendChild(self._renderCard(step,idx,steps));
});
this._bindDropZone(container,steps);
},
_renderCard:function(step,idx,parentArr){
var self=this;
var lib=_findLib(step.type)||{icon:'?',label:step.type};
var card=document.createElement('div');
card.className='step-card'+(step.type==='loop'?' loop-block':'')+(step.type==='group'?' group-block':'')+(step.type==='if_el'?' if-block':'');
card.draggable=true;
card.dataset.idx=idx;
card.dataset.stepId=step.id||'';
card.dataset.stepType=step.type;
if(this._selected&&this._selected.indexOf(step.id)>=0)card.classList.add('selected');
// head
var head=document.createElement('div');
head.className='sc-head';
head.innerHTML=''+lib.icon+' '+
''+esc(step.label||lib.label)+' '+
''+step.type+' '+
''+
'☑ '+
'⚙ '+
'↑ '+
'↓ '+
'⧉ '+
'✕ '+
' ';
head.addEventListener('click',function(e){
if(e.target.tagName==='BUTTON')return;
self.toggleExpand(head.querySelector('button'));
});
card.appendChild(head);
// body(参数表单)
var body=document.createElement('div');
body.className='sc-body';
body.innerHTML=this._renderParams(step);
card.appendChild(body);
// 拖拽排序
card.addEventListener('dragstart',function(e){
e.dataTransfer.setData('text/plain','move:'+idx+':'+self._arrId(parentArr));
e.dataTransfer.effectAllowed='move';
card.classList.add('dragging');
});
card.addEventListener('dragend',function(){card.classList.remove('dragging');});
card.addEventListener('dragover',function(e){
e.preventDefault();
card.classList.add('drag-over');
});
card.addEventListener('dragleave',function(){card.classList.remove('drag-over');});
card.addEventListener('drop',function(e){
e.preventDefault();
e.stopPropagation(); // 关键:阻止冒泡到外层卡片/容器,避免重复添加
card.classList.remove('drag-over');
self._handleDrop(e,parentArr,idx);
});
// loop/group 子步骤
if(step.type==='loop'||step.type==='group'){
if(step.params&&step.params.children){
var childWrap=document.createElement('div');
childWrap.className='step-children';
this._renderStepList(childWrap,step.params.children);
card.appendChild(childWrap);
}
}
// if_el 双分支:找到时(then) / 未找到时(else),各自独立容器接收拖入
if(step.type==='if_el'&&step.params){
[['then','✅ 找到时执行','if-then'],['else','❌ 未找到时执行','if-else']].forEach(function(b){
var branch=document.createElement('div');
branch.className='if-branch';
var title=document.createElement('div');
title.className='branch-title '+b[0];
title.textContent=b[1];
var wrap=document.createElement('div');
wrap.className='step-children '+b[2];
self._renderStepList(wrap,step.params[b[0]]||[]);
branch.appendChild(title);
branch.appendChild(wrap);
card.appendChild(branch);
});
}
return card;
},
_path:function(arr){
// 用数组长度作为标识(顶层是 _steps,子层是某 loop 的 children)
// 这里简化:顶层 path='root',子层 path='loop:'
return arr===this._steps?'root':'child';
},
_renderParams:function(step){
var p=step.params||{};
var h='';
if(step.type==='open_app'){
h+='包名
';
h+='';
}else if(step.type==='stop_app'){
h+='包名
';
h+='强制结束该 App(am force-stop),清除后台进程,下次打开为冷启动。常配合"打开App"使用:结束→重新打开
';
}else if(step.type==='screen_on'){
h+='亮屏(息屏时唤醒并滑动解锁)。任务执行前用——息屏状态下 u2 无法点击操作
';
}else if(step.type==='screen_off'){
h+='息屏。任务结束后用,避免长时间亮屏导致烧屏/发热
';
}else if(step.type==='keep_screen'){
h+='模式 '+
'保持亮屏(把系统息屏超时顶到最大,不充电也不会黑屏) '+
'恢复自动息屏
';
h+='长任务(如养号看视频几小时)放"保持亮屏"防屏幕超时熄灭;任务结束前放"恢复自动息屏"
';
}else if(step.type==='swipe'){
h+='';
h+=_humanizeRowHtml(p,'幅度(屏占比)
');
h+='想要"照我划的那一下原样重放",请用操作库里的《录制手势》步骤——那个是纯轨迹回放,不套这里的参数
';
}else if(step.type==='click'){
h+=_selRowHtml(p,'等待超时(秒)
');
}else if(step.type==='long_click'){
h+=_selRowHtml(p,'');
}else if(step.type==='swipe_until'){
h+=_selRowHtml(p,''+
'找到后点击
'+
_humanizeChkHtml(p)+
'上滑/下滑直到目标元素出现(每次滑动后检查一次),找不到则跳过继续。滑动同样走拟人轨迹
');
}else if(step.type==='wait_el'){
h+=_selRowHtml(p,'最长等待(秒)
'+
'等待目标元素出现(替代固定秒数等待),超时则继续
');
}else if(step.type==='click_xy'){
h+=''+
'屏幕百分比坐标,50/50=屏幕中心。无选择器时的兜底点击
';
}else if(step.type==='key_event'){
h+='按键 '+
[['back','返回键'],['home','Home键'],['enter','回车键'],['menu','菜单键'],['recent','最近任务'],['delete','删除键']].map(function(k){
return ''+k[1]+' ';
}).join('')+'
';
h+='返回键用于退出评论/返回上一页,比结束App轻量
';
}else if(step.type==='notify'){
h+='标题
';
h+='内容
';
h+='';
h+='推送到哪条群取决于 webhook 自己的事件订阅 (勾了「任务自定义通知」的才收)。'
+'正文可用占位符:{device} 设备名、{serial} 地址、{job} 任务名、{time} 时间、'
+'{app} 当前前台包名、{screen} 亮屏/熄屏(后两个要查设备,不用就别写)
';
}else if(step.type==='stop_self'){
h+='停止原因(可留空)
';
h+='只停本设备 的任务,其它设备照常;后续步骤不再执行,任务记为「被停止」而不是失败'
+'(不会触发失败重试)。常配合「条件判断」用:命中条件 → 先「发通知」再「停止本设备」
';
}else if(step.type==='gesture'){
var pts=(p.points||[]);
var dur=pts.length?pts[pts.length-1][2]:0;
h+='';
h+='这是纯录制回放 :路径与时长照录制原样重放,不做弧线/抖动/手速那套加工(和「滑动」步骤是两回事)。'
+'手机上录 =用手指在真机上划(最真实);网页上录 =在弹窗画面里按住鼠标拖。'
+'轨迹按屏幕绝对像素存,换分辨率不同的设备可能偏,同型号/同分辨率最稳
';
}else if(step.type==='wait'){
h+='';
h+='按设备节奏微调(0.8~1.35 倍)
';
h+='勾上后每台设备按自己的节奏缩放这个等待:批量跑时设备之间会逐渐错开,不再整齐划一。代价是实际时长不再严格等于上面填的值
';
}else if(step.type==='clipboard'){
h+='注入内容
';
h+='注入后立即粘贴(需输入框已聚焦)
';
h+='批量发链接场景:先"点击元素"聚焦评论区输入框,再执行本步骤注入+粘贴;循环里依次更换注入内容即可逐个发
';
}else if(step.type==='input_text'){
const im=p.mode==='fixed'?'fixed':'random';
h+='输入模式 '+
'随机候选 '+
'指定文字
';
h+='候选文字(每行一个,随机选一条)
';
h+='指定文字
';
h+='输入前先清空
';
h+='需先用"点击元素"步骤定位到输入框,本步骤只负责输入文字
';
}else if(step.type==='loop'){
const lm=p.loop_mode==='time'?'time':(p.loop_mode==='forever'?'forever':'rounds');
h+='';
h+='将下方子步骤循环执行指定轮次/时长;一直循环 无限跑直到任务被外部停止——配合调度"定时启动+停止"(如 9:00 启动 / 18:00 停止)实现全天候养号,或配合任务"运行时长上限"自动停止
';
}else if(step.type==='group'){
h+='动作组:按顺序执行下方子步骤一次。把多个步骤打包成一个可复用的整体。
';
h+='存为自定义动作 把本组步骤保存到左侧自定义动作库,方便复用
';
}else if(step.type==='if_el'){
// 屏幕状态 / 前台App / 去重 是"直接读设备当前状态或账本",没有等待超时、也没有选择器可抓
var isDedup=(p.selector_type==='dedup');
var dyn=(p.selector_type==='screen'||p.selector_type==='foreground'||isDedup);
// 文本比对:屏幕状态没有文本可比(亮/熄)、去重也不比文本,只有元素/OCR/前台 App 才给这块
// 候选值来源:默认"手填"(行为与以前完全一致);也可以直接吃「账号」页的台账
var cmpSrc=p.cmp_source||'';
var fromLedger=(cmpSrc==='device'||cmpSrc==='all'||cmpSrc==='group');
var cmpRow=dyn?'':'';
// 「去重」条件:身份元素用 ident_type/ident_value(主选择器那行只剩类型下拉)
var identRow=isDedup?_selRowHtml(p,
'身份元素 :填"账号"那个元素(点「抓取元素」选,如抖音号那个 TextView)。'
+'留空 = 用本设备当身份 (一号一机时这样就行)。'
+' 身份读不到时不会去重 (当"没做过"照常执行)——宁可重复一次,也不会误判成"做过"而漏做。'
+' 有效期在上方任务级的「去重有效期」 里设,检查和记账共用一套(不用在步骤里各填一遍)。
',
false, false, {type:'ident_type', value:'ident_value'}):'';
h+=_selRowHtml(p,
(dyn?'':'查找超时(秒)
'+
''+
'OCR 命中后自动点击该文字
'+
cmpRow)+
''+(isDedup
? '命中 → 执行下方"✅ 找到时"分支;未命中 → 执行"❌ 未找到时"分支。'
+'去重 读的是平台的「去重账本」(所有设备共享一份,见「任务 → 去重记录」):'
+'任何一台设备做过了,其余设备的这一步都会命中 ——'
+'所以多个手机跑同一个任务、反复重跑,也不会把同一个号做两次。'
+' 建议这样摆:命中分支 放「停止本设备」或「发通知」;'
+'未命中分支 里放要做的动作(评论…),动作后面跟一个「记为已做」。'
+' ⚠ 记账要放在动作成功之后 (用「记为已做」步骤),失败就不记账、下次还会重试。'
: (dyn
? '命中 → 执行下方"✅ 找到时"分支;未命中 → 执行"❌ 未找到时"分支。屏幕状态 读系统 mWakefulness(亮/熄),'
+'前台App是 判断当前前台是不是某个包名——都只看当前状态,不等待。'
: '超时内找到元素 → 执行下方"✅ 找到时"分支;未找到 → 执行"❌ 未找到时"分支。两分支可放任意步骤,也可再嵌套条件判断/循环;'
+'OCR识别 可匹配图片/画布里的文字(截屏识别,跨平台)'
+'文本比对 (可选):填了就把找到的那个元素的文本 和"比对的值"比,'
+'比中了才算命中。例:元素文本是 抖音号:35377983067,'
+'想判断"这台登录的是不是这个号",选包含 、值填 35377983067 即可(要整段一模一样才用"等于")。'
+'多个值一行一个,任一命中即可 ——"这几个号都算我的"。'
+' ⚠ 元素没找到 时一律算未命中(走"未找到时"分支)——"没读到"不会被当成"和我设的不一样"。'))+'
',
true, true, isDedup?{hideValue:true}:null)+identRow;
}else if(step.type==='mark_done'){
h+=_selRowHtml(p,
'把身份值记进平台「去重账本」(所有设备共享一份)。'
+'放在动作成功之后 ——动作失败就不会记账,下次重跑还会重试这台设备。'
+' ✅ 留空 = 自动跟随上面「去重」检查的身份 (推荐):'
+'检查与记账必须用同一个身份字符串 ,key 才算得到一起;'
+'两处各配一遍的话,一边填了另一边忘了去重就会失效。'
+' 没有前置去重检查、又留空时,退回用本设备 当身份(一号一机场景)。'
+' 有效期在上方任务级的「去重有效期」 里设。
');
}
// 共享:触发概率(所有步骤通用,0~100)
h+='';
// 可编辑 label
h+='步骤名称(可选)
';
return h;
},
_bindDropZone:function(container,arr){
// 常驻容器(#se-canvas)多次重渲染会累积 drop 监听 → 拖一次添加多个。
// 用 dataset 标记只绑定一次;数组引用用 WeakMap 每次更新。
if(!this._dropArrs)this._dropArrs=new WeakMap();
this._dropArrs.set(container,arr);
if(container.dataset.dropBound)return;
container.dataset.dropBound='1';
var self=this;
// 画布空白处也能接收 drop,拖入时高亮提示
container.addEventListener('dragover',function(e){
e.preventDefault();
container.classList.add('drag-over');
});
container.addEventListener('dragleave',function(e){
if(!container.contains(e.relatedTarget))container.classList.remove('drag-over');
});
container.addEventListener('drop',function(e){
e.preventDefault();
e.stopPropagation(); // 阻止冒泡到外层卡片/容器,避免重复添加
container.classList.remove('drag-over');
// 子卡片都会 stopPropagation,能冒泡到这里的 drop 一定落在空白区
// (含 .se-empty 的提示文字),直接追加到数组末尾
self._handleDrop(e,self._dropArrs.get(container),-1);
});
},
_handleDrop:function(e,arr,idx){
var self=this;
var data=e.dataTransfer.getData('text/plain');
if(!data)return;
// drop 处理中同步重建 DOM 会打断拖拽事件,可能被浏览器重发 drop 导致重复添加。
// 延迟到下一帧渲染,保证一次拖入只加一次。
function rerender(){ setTimeout(function(){self._renderCanvas();},0); }
if(data.startsWith('move:')){
// 拖拽排序:同层级排序 / 跨层级移入(把步骤拖进循环块、循环套循环)
var parts=data.split(':');
var fromIdx=parseInt(parts[1]);
var fromPath=parts[2];
var srcArr=this._resolveArr(fromPath);
if(srcArr){
if(srcArr===arr){
// 同层级排序
if(fromIdx===idx)return;
this._syncFromDom();
var moved=arr.splice(fromIdx,1)[0];
if(idx<0)arr.push(moved);
else if(fromIdx=arr.length)arr.push(moved2);
else arr.splice(idx,0,moved2);
rerender();
}
}
}
}else if(data.startsWith('action:')){
// 从自定义动作库拖入 → 展开为 group 步骤
var actionId=data.substring(7);
var action=_customActions.find(function(a){return a.id===actionId;});
if(action&&action.steps&&action.steps.length){
var ns=this._makeStep({type:'group',label:action.name,icon:action.icon||'📦',params:{children:[]}});
ns.label=action.name;
ns.params.children=JSON.parse(JSON.stringify(action.steps));
_stripIds(ns.params.children); // 重新生成 id,避免同一动作拖入多次后 id 冲突
this._ensureIds(ns.params.children);
if(idx<0||idx>=arr.length)arr.push(ns);
else arr.splice(idx,0,ns);
rerender();
}
}else if(data.startsWith('type:')){
// 从系统操作库拖入
var type=data.substring(5);
var lib=_findLib(type);
if(lib){
var ns2=this._makeStep(lib);
if(idx<0||idx>=arr.length)arr.push(ns2);
else arr.splice(idx,0,ns2);
rerender();
}
}
},
_makeStep:function(lib){
// 参数 = STEP_LIB 出厂值 ← 用户在「动作配置」里配的默认值(有才覆盖)
var params=JSON.parse(JSON.stringify(lib.params));
var d=_stepDefaults&&_stepDefaults[lib.type];
if(d)Object.keys(d).forEach(function(k){ if(d[k]!==undefined)params[k]=d[k]; });
return {id:_newStepId(),type:lib.type,label:lib.label,params:params};
},
// 递归找步骤对象(按 id)——写入录音必须改 _steps,不能只改 DOM
_findStep:function(id,arr){
var self=this, found=null;
(arr||this._steps).forEach(function(st){
if(found)return;
if(st.id===id){found=st;return;}
_childArrs(st).forEach(function(a){ if(!found)found=self._findStep(id,a); });
});
return found;
},
// 给某个「录制手势」步骤录制轨迹(src: 'phone' 手机上录 / 'web' 网页上录)
recordInto:function(btn,src){
var card=btn.closest('.step-card');
var step=card?this._findStep(card.dataset.stepId):null;
if(!step){showToast('找不到这个步骤','error');return;}
if(typeof openRecorder!=='function'){showToast('录制器未加载','error');return;}
var self=this;
openRecorder({mode:'gesture', autoStartPhone: src==='phone', onDone:function(p,from){
step.params={points:p.points,speed:p.speed||1.0};
var dur=p.points.length?p.points[p.points.length-1][2]:0;
step.label='录制手势 '+(from==='phone'?'手机':'网页')+' '+p.points.length+'点';
self._renderCanvas();
showToast('已录到 '+(p.points.length)+' 个点 / '+(dur/1000).toFixed(2)+' 秒','success');
}});
},
clearGesture:function(btn){
var card=btn.closest('.step-card');
var step=card?this._findStep(card.dataset.stepId):null;
if(!step){return;}
step.params={points:[],speed:1.0};
this._renderCanvas();
showToast('已清空录制的轨迹','success');
},
// 测试此步骤:在选中设备上试执行当前步骤,验证选择器
_testStep:function(btn){
var card=btn.closest('.step-card');
if(!card)return;
var type=card.dataset.stepType||'';
var params={};
card.querySelectorAll('[data-key]').forEach(function(inp){
if(inp.type==='checkbox')params[inp.dataset.key]=inp.checked;
else if(inp.type==='number')params[inp.dataset.key]=parseFloat(inp.value)||0;
else params[inp.dataset.key]=inp.value;
});
this._pendingTest={type:type,label:'测试',params:params};
this._showTestDevicePicker();
},
_showTestDevicePicker:function(){
document.getElementById('test-modal-title').textContent='测试步骤 - 选择设备';
document.getElementById('test-modal-body').innerHTML=
'';
document.getElementById('test-overlay').classList.add('show');
var self=this;
apiGet('/api/uiauto/devices').then(function(r){
var list=document.getElementById('test-device-list');
if(!list)return;
if(!r||!r.ok){list.innerHTML=''+esc((r&&r.error)||'获取设备失败')+'
';return;}
list.innerHTML=(r.devices||[]).map(function(d){
return self._devCard(d, "_stepEditor._runTestStep('"+esc(d.serial)+"')");
}).join('')||'无可用设备
';
});
},
_runTestStep:async function(serial){
var step=this._pendingTest;
var body=document.getElementById('test-modal-body');
if(!step||!body)return;
body.innerHTML='正在 '+esc(serial)+' 上执行(adb + u2 连接约需几秒)...
请稍候,期间不要操作该设备
';
var r=await apiPost('/api/steps/test',{serial:serial,step:step});
if(!r)return;
var icon=r.result==='命中'?'✅':(r.result==='未找到'?'❌':'▶');
body.innerHTML=''+icon+'
'+esc(r.result||'已执行')+' '+
'
'+esc(r.msg||'')+'
'+
'
完成 ';
},
addStep:function(type){
var lib=_findLib(type);
if(!lib)return;
this._syncFromDom();
this._steps.push(this._makeStep(lib));
this._renderCanvas();
},
addCustomAction:function(actionId){
var action=_customActions.find(function(a){return a.id===actionId;});
if(!action||!action.steps||!action.steps.length)return;
this._syncFromDom();
var ns=this._makeStep({type:'group',label:action.name,icon:action.icon||'📦',params:{children:[]}});
ns.label=action.name;
ns.params.children=JSON.parse(JSON.stringify(action.steps));
_stripIds(ns.params.children); // 重新生成 id,避免同一动作拖入多次后 id 冲突
this._ensureIds(ns.params.children);
this._steps.push(ns);
this._renderCanvas();
},
delCustomAction:function(actionId){
if(!confirm('确定删除这个自定义动作?'))return;
apiDelete('/api/custom_actions/'+actionId).then(function(res){
if(!res)return;
if(res.ok){_loadCustomActions();showToast('已删除','success');}
else showToast(res.error||'删除失败','error');
});
},
toggleSelect:function(stepId){
this._syncFromDom();
if(!this._selected)this._selected=[];
var i=this._selected.indexOf(stepId);
if(i>=0)this._selected.splice(i,1);
else this._selected.push(stepId);
this._renderCanvas();
this._updatePackBtns();
},
// 同步所有"打包选中步骤"按钮的可用状态(任务编辑器 + 动作编辑器)
_updatePackBtns:function(){
var n=this._selected&&this._selected.length;
['se-pack-btn','se-pack-btn2'].forEach(function(id){
var bar=document.getElementById(id);
if(bar)bar.disabled=n<1;
});
},
saveAsCustomAction:function(stepId){
// 从 group 步骤的"存为自定义动作"按钮调用时传入该 group 的 id:
// 优先收集该 group 的子步骤;否则收集 ☑ 选中的步骤
var stepsToSave=[];
if(stepId){
var group=this._findStepById(this._steps,stepId);
if(group&&group.params&&group.params.children&&group.params.children.length){
stepsToSave=JSON.parse(JSON.stringify(group.params.children));
_stripIds(stepsToSave);
}
}
if(!stepsToSave.length&&this._selected&&this._selected.length){
// 从选中步骤收集
stepsToSave=this._collectByIds(this._steps,this._selected);
}
if(!stepsToSave.length){
showToast('请先用 ☑ 选中要打包的步骤','error');
return;
}
var name=prompt('输入动作名称:','我的动作');
if(!name)return;
var self=this;
apiPost('/api/custom_actions',{name:name,steps:stepsToSave})
.then(function(res){
if(!res)return;
if(res.ok){
showToast('已保存到自定义动作库','success');
self._selected=[];
_loadCustomActions();
self._renderCanvas();
self._updatePackBtns();
}else showToast(res.error||'保存失败','error');
});
},
// 在嵌套结构中按 id 查找步骤(group/loop 的子步骤、if_el 的分支步骤也找得到)
_findStepById:function(steps,id){
var self=this;
for(var i=0;i=0){
var copy=JSON.parse(JSON.stringify(s));
_stripIds([copy]);
result.push(copy); // 容器选中时子步骤已包含在拷贝里,不再单独收集
}else{
_childArrs(s).forEach(function(a){
result=result.concat(self._collectByIds(a,ids));
});
}
});
return result;
},
toggleExpand:function(btn){
var card=btn.closest('.step-card');
card.classList.toggle('expanded');
},
_toggleInputMode:function(sel){
var body=sel.closest('.sc-body');
var mode=sel.value;
body.querySelectorAll('[data-mode]').forEach(function(g){
g.style.display=g.dataset.mode===mode?'block':'none';
});
},
_toggleLoopMode:function(sel){
var body=sel.closest('.sc-body');
var mode=sel.value;
body.querySelectorAll('[data-lmode]').forEach(function(g){
g.style.display=g.dataset.lmode===mode?'block':'none';
});
},
// 条件判断:候选值来源切到台账时,把"比对的值"藏起来(按分组还要显示分组名输入框)
_cmpSourceChanged:function(sel){
// 同 _condTypeChanged:先把 DOM 的值同步回 _steps,否则重渲染会吞掉刚改的东西
this._syncFromDom();
var self=this;
setTimeout(function(){self._renderCanvas();},0);
},
// 条件判断:选择器类型切到 OCR 时显示"命中后点击"开关
_condTypeChanged:function(sel){
// 条件类型一变,"值"控件也要跟着换(元素值输入框 / 屏幕亮熄下拉 / 包名输入),
// 整卡重渲染最省心。先把 DOM 的值同步回 _steps,否则重渲染会丢掉刚改的东西。
this._syncFromDom();
var self=this;
setTimeout(function(){self._renderCanvas();},0);
},
// 给数组分配唯一 id,用于 move/duplicate/remove/拖拽定位到正确的父数组
_arrId:function(arr){
if(arr===this._steps)return 'root';
if(!this._arrIdMap)this._arrIdMap=new WeakMap();
if(!this._arrById)this._arrById={};
if(!this._arrIdMap.has(arr)){
var id='arr_'+(++this._arrCounter);
this._arrIdMap.set(arr,id);
this._arrById[id]=arr;
}
return this._arrIdMap.get(arr);
},
_resolveArr:function(path){
if(path==='root')return this._steps;
return this._arrById&&this._arrById[path];
},
// 判断 step 的子孙数组中是否包含 arr(防循环块套进自己导致渲染无限递归)
_containsArr:function(step,arr){
var arrs=_childArrs(step);
if(!arrs.length)return false;
if(arrs.indexOf(arr)>=0)return true;
for(var i=0;i=arr.length)return;
var tmp=arr[ni];arr[ni]=arr[idx];arr[idx]=tmp;
this._renderCanvas();
},
duplicate:function(idx,path){
this._syncFromDom();
var arr=this._resolveArr(path);
if(!arr)return;
var copy=JSON.parse(JSON.stringify(arr[idx]));
copy.id=_newStepId();
this._ensureIds([copy]);
arr.splice(idx+1,0,copy);
this._renderCanvas();
},
remove:function(idx,path){
this._syncFromDom();
var arr=this._resolveArr(path);
if(!arr)return;
arr.splice(idx,1);
this._renderCanvas();
},
collect:function(){
// 先把当前 DOM 上的参数值同步回 _steps
var self=this;
this._syncParams(this._canvas,this._steps);
return JSON.parse(JSON.stringify(this._steps));
},
validate:function(steps){
// 校验步骤配置,返回警告列表
var warnings=[];
// 去重:收集「条件判断→去重」与「记为已做」各自用的身份元素,最后比对是否一致
var dedupIdents=[], hasDedupCheck=false, hasMarkDone=false;
function check(arr,prefix){
arr.forEach(function(s,i){
var name=prefix?(prefix+'.'+(i+1)):('步骤'+(i+1));
var label=s.label||s.type;
if(s.type==='click'){
if(!s.params.selector_value){
warnings.push(name+' "'+label+'": 选择器值为空,点击步骤会跳过。请用"抓取元素"按钮选择目标。');
}
}else if(s.type==='long_click'||s.type==='swipe_until'||s.type==='wait_el'){
if(!s.params.selector_value){
warnings.push(name+' "'+label+'": 选择器值为空,该步骤会跳过。请用"抓取元素"或"测试"按钮选择目标。');
}
}else if(s.type==='click_xy'){
const x=parseFloat(s.params.x), y=parseFloat(s.params.y);
if(isNaN(x)||isNaN(y)||x<0||x>100||y<0||y>100){
warnings.push(name+' "'+label+'": 坐标需在 0-100 之间(屏幕百分比)。');
}
}else if(s.type==='open_app'||s.type==='stop_app'){
if(!s.params.package){
warnings.push(name+' "'+label+'": 包名为空,无法'+(s.type==='open_app'?'启动':'结束')+'App');
}
}else if(s.type==='input_text'){
if(s.params.mode==='fixed'&&!s.params.fixed_text){
warnings.push(name+' "'+label+'": 指定文字为空');
}else if(s.params.mode==='random'&&!s.params.texts){
warnings.push(name+' "'+label+'": 候选文字为空');
}
}else if(s.type==='clipboard'){
if(!s.params.text){
warnings.push(name+' "'+label+'": 注入内容为空,步骤会跳过。');
}
}else if(s.type==='gesture'){
if(!(s.params.points||[]).length){
warnings.push(name+' "'+label+'": 录制手势还没有轨迹,执行时会被跳过。');
}
}else if(s.type==='if_el'){
// 「去重」「屏幕状态」这两类条件**不用文本比对**(面板里那块是隐藏的)。
// 所以:① 留着旧 cmp_op/cmp_value 不该报警告(用户看不到、也清不掉,
// 只会每次保存都被打扰);② 也别报"会被忽略"——那是设计如此。
var cmpUsed=(s.params.selector_type!=='screen'&&s.params.selector_type!=='dedup');
if(s.params.selector_type!=='dedup'&&!s.params.selector_value){
warnings.push(name+' "'+label+'": 条件判断的选择器为空,会直接走"未找到"分支。');
}
var cmpSrcV=(s.params.cmp_source||'');
var fromLedger=(cmpSrcV==='device'||cmpSrcV==='all'||cmpSrcV==='group');
if(cmpUsed&&s.params.cmp_op&&!String(s.params.cmp_value||'').trim()&&!fromLedger){
// 候选值来自台账时允许手填留空(台账取号就够)→ 不报这条
warnings.push(name+' "'+label+'": 选了"文本比对('+s.params.cmp_op+')"但没填比对的值,'
+'执行时永远不命中(相当于每次都走"未找到时"分支)。');
}
if(cmpUsed&&fromLedger&&s.params.cmp_op){
warnings.push(name+' "'+label+'": 候选值来自台账 —— 台账里没有这台设备'
+'(或设备池里的设备名与台账「设备号」对不上)时会取不到号,'
+'这一步将永远走"未找到"分支。请到「账号」页核对设备号。');
}
if(s.params.selector_type==='dedup'){
hasDedupCheck=true;
// 空值也收进来:一边填了、另一边没填 = 两处身份不一致(去重会对不上),
// 必须报出来 —— 只收非空的话,这种最常见的不一致反而检测不到
dedupIdents.push({where:name,type:s.params.ident_type||'text',
value:(s.params.ident_value||'').trim()});
}
}else if(s.type==='mark_done'){
hasMarkDone=true;
// 留空 = 自动跟随去重检查的身份(执行器就是这么做的),所以**空值不参与比对**;
// 只有"填了、且和检查侧不一样"才是真问题
var mv=(s.params.selector_value||'').trim();
if(mv)dedupIdents.push({where:name,type:s.params.selector_type||'text',value:mv});
}
_childArrs(s).forEach(function(a){
if(a.length)check(a,name+' 子步骤');
});
});
}
check(steps,'');
// 去重的两个坑,保存时直接点出来(配错的话去重会「静默失效」,最难查)
if(hasDedupCheck&&!hasMarkDone){
warnings.push('任务里有「条件判断→去重」但没有「记为已做」:做完动作不会记账,'
+'下次重跑还会再做一遍(去重起不到作用)。请在动作后面加一个「记为已做」。');
}
if(hasMarkDone&&!hasDedupCheck){
warnings.push('任务里有「记为已做」但没有「条件判断→去重」:只会记账、不会拦重复。'
+'请在动作前面加一个条件判断、类型选「去重」。');
}
if(dedupIdents.length>1){
var first=dedupIdents[0];
var showId=function(x){ return x.value?('「'+x.value+'」'):'(留空 → 用设备当身份)'; };
dedupIdents.slice(1).forEach(function(d){
if(d.value!==first.value||d.type!==first.type){
warnings.push('去重两处的身份不一致:'+first.where+' 是 '+showId(first)
+',而 '+d.where+' 是 '+showId(d)
+' —— 身份不一致会算出两个不同的 key,去重会失效'
+'(检查查不到记账 / 或者反过来,结果就是重复或漏做)。'
+'建议把「记为已做」的身份元素留空(自动跟随检查),或两处填成同一个元素。');
}
});
}
return warnings;
},
_syncParams:function(container,steps){
var self=this;
var cards=container.querySelectorAll(':scope > .step-card');
cards.forEach(function(card,i){
if(!steps[i])return;
// 只读本卡片直接子级的 .sc-body,避免把嵌套子步骤的输入误写进本步骤 params
var inputs=card.querySelectorAll(':scope > .sc-body [data-key]');
inputs.forEach(function(inp){
var key=inp.dataset.key;
if(inp.type==='checkbox'){
steps[i].params[key]=inp.checked;
}else if(inp.type==='number'){
steps[i].params[key]=parseFloat(inp.value)||0;
}else{
if(key==='_label'){
steps[i].label=inp.value||steps[i].label;
}else{
steps[i].params[key]=inp.value;
}
}
});
// 递归子步骤:loop/group 的 children
var childWrap=card.querySelector(':scope > .step-children');
if(childWrap&&steps[i].params&&steps[i].params.children){
self._syncParams(childWrap,steps[i].params.children);
}
// if_el 双分支(then/else 在 .if-branch 内,不会与上面的直接子级选择器冲突)
//
// ⚠ `.if-branch` 与 `.step-children` 之间**必须是 `>`(直接子级)**:
// 写成后代(空格)时,条件判断里再嵌套一个条件判断的话,本卡片会**匹配到内层
// 那个 if_el 的分支容器**(文档顺序上更靠前),于是把内层分支的子步骤当成自己的
// 去同步 —— 症状:自己的步骤"填了值保存就没了"、步骤名被内层的容器步骤覆盖。
var thenWrap=card.querySelector(':scope > .if-branch > .step-children.if-then');
if(thenWrap&&steps[i].params&&Array.isArray(steps[i].params.then)){
self._syncParams(thenWrap,steps[i].params.then);
}
var elseWrap=card.querySelector(':scope > .if-branch > .step-children.if-else');
if(elseWrap&&steps[i].params&&Array.isArray(steps[i].params.else)){
self._syncParams(elseWrap,steps[i].params.else);
}
});
},
// 把画布 DOM 上的参数同步回 _steps,并自动保存草稿(操作前调用防丢失)
_syncFromDom:function(){
this._syncParams(this._canvas,this._steps);
this._autosave();
},
_autosave:function(){
try{localStorage.setItem('se_draft_'+this._draftKey,JSON.stringify(this._steps));}catch(e){}
},
_loadDraft:function(){
try{
var d=localStorage.getItem('se_draft_'+this._draftKey);
if(d)return JSON.parse(d);
}catch(e){}
return null;
},
clearDraft:function(){
try{localStorage.removeItem('se_draft_'+this._draftKey);}catch(e){}
},
// ================== 元素抓取 ==================
openPicker:function(btn){
var input=btn.previousElementSibling;
this._elTargetInput=input;
// 直接弹设备选择页(独立模态框,不影响任务编辑窗口)
this._showDevicePicker();
},
// 设备选择卡片(「抓取元素」与「测试此步骤」两处共用):
// **设备名优先**,型号与地址降为副标题——同型号好几台时只有平台起的名字
// (A08)能认出"是哪一台",光看 IP 选错设备是常事。
_devCard:function(d,onclick){
var sub=[d.model||d.product||'', d.serial||''].filter(Boolean).join(' · ');
return ''+
'
📱
'+
'
'+esc(d.name||d.serial)+'
'+
'
'+esc(sub)+'
'+
(d.status?'
'+esc(d.status)+' ':'')+'
';
},
// 步骤1:设备选择页
_showDevicePicker:function(){
var self=this;
document.getElementById('el-picker-title').textContent='抓取元素 - 选择设备';
document.getElementById('el-picker-body').innerHTML='';
document.getElementById('el-picker-footer').innerHTML='取消 ';
document.getElementById('el-picker-overlay').classList.add('show');
fetch('/api/uiauto/devices').then(function(r){return r.json();}).then(function(res){
var list=document.getElementById('el-device-list');
if(!res.ok){list.innerHTML=''+esc(res.error||'获取设备失败')+'重试
';return;}
var devices=res.devices||[];
if(!devices.length){list.innerHTML='uiauto2 未发现已连接设备
';return;}
list.innerHTML=devices.map(function(d){
return self._devCard(d, "_stepEditor._showElPicker('"+esc(d.serial)+"')");
}).join('');
}).catch(function(e){
document.getElementById('el-device-list').innerHTML='请求失败: '+esc(e)+'重试
';
});
},
// 步骤2:选中设备后,显示截图 + 元素树
_showElPicker:function(serial){
var self=this;
self._elSerial=serial;
document.getElementById('el-picker-title').textContent='抓取元素 - '+serial;
document.getElementById('el-picker-body').innerHTML=
''+
'
'+
'
'+
'重新抓取 '+
'加载中... '+
'
'+
'
'+
'
'+
'
'+
'
'+
'层级 '+
'属性 '+
'颜色 '+
'
'+
'
'+
'
'+
'
'+
'
把鼠标移到左侧图上取色;点元素可看该元素的主色
'+
'
'+
'
'+
'
'+
'
';
document.getElementById('el-picker-footer').innerHTML=
'← 返回选设备 '+
'取消 '+
''
+'提示:先「▶ 点一下」在设备上验证位置,再点元素回填选择器;'
+'「✓ 测选择器」会用将填入的选择器真跑一次点击 ';
// 一次取齐截图 + 元素树(见 _loadSnapshot 的说明)
self._loadSnapshot();
},
// 右侧页签切换
_tab:function(btn){
var pane=btn.dataset.pane;
document.querySelectorAll('#el-picker-body .el-tab').forEach(function(b){
b.classList.toggle('active', b===btn);
});
['tree','attr','color'].forEach(function(p){
var el=document.getElementById('el-pane-'+p);
if(el)el.classList.toggle('active', p===pane);
});
},
// 属性页:选中元素的全部属性
_renderAttrs:function(i){
var el=(this._elData||[])[i];
var box=document.getElementById('el-pane-attr');
if(!box)return;
if(!el){box.innerHTML='点左侧图上的元素,或点「层级」里的条目看属性
';return;}
var sg=el.suggested||{};
// 稳定性说明:把"这个选择器靠什么定位"写清楚,用户才知道它会不会因为界面变化而失效
var stab=sg.semantic?'✓ 语义型 —— 靠 @'+(sg.via||'')+' 限定,不依赖同类元素个数,换设备/换版本仍命中'
:sg.indexed?'⚠ 序号型 —— 依赖「同类元素共 '+sg.total+' 个、取第 '+sg.occ+' 个」,界面一变就失配'
:sg.broad?'⚠ 宽泛 —— 无唯一属性,可能误匹配其他元素'
:(sg.value?'✓ 唯一属性,直接定位':'—');
var rows=[['建议选择器', sg.value||'(无可靠选择器)'],['选择器稳定性', stab],
['class', el.class||''], ['resource-id', el.resource_id||''],
['text', el.text||''], ['content-desc', el.description||''],
['package', el.package||''], ['clickable', el.clickable||''],
['bounds', el.bounds||''], ['层级深度', String(el.depth||0)]];
box.innerHTML=rows.map(function(r){
return ''+esc(r[0])+' '+esc(r[1]||'-')+'
';
}).join('');
},
// 颜色页:鼠标位置的像素色 + 选中元素的主色
_pixelAt:function(x,y){
try{
var c=this._colorCanvas, img=document.getElementById('el-shot-container').querySelector('img');
if(!c||!img)return null;
if(c.width!==img.naturalWidth){c.width=img.naturalWidth;c.height=img.naturalHeight;}
var ctx=c.getContext('2d');
ctx.drawImage(img,0,0);
var d=ctx.getImageData(Math.max(0,Math.min(c.width-1,x)),Math.max(0,Math.min(c.height-1,y)),1,1).data;
return '#'+[d[0],d[1],d[2]].map(function(v){return ('0'+v.toString(16)).slice(-2);}).join('');
}catch(e){return null;}
},
_updatePixel:function(x,y){
var box=document.getElementById('el-color-list');
if(!box)return;
var col=this._pixelAt(Math.round(x),Math.round(y));
if(!col)return;
box.innerHTML=' '+
'光标处 '+esc(col)+'
'+
(box.dataset.dom||'');
},
_renderColors:function(i){
var box=document.getElementById('el-color-list');
if(!box)return;
var el=(this._elData||[])[i];
var dom='';
if(el&&el.bounds){
var m=el.bounds.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
if(m){
var x=Math.round((+m[1]+ +m[3])/2), y=Math.round((+m[2]+ +m[4])/2);
var c=this._pixelAt(x,y);
if(c) dom=' '+
'选中元素中心 '+esc(c)+'
';
}
}
box.dataset.dom=dom;
box.innerHTML=dom||'把鼠标移到左侧图上取色
';
},
// 一次取齐:截图 + 元素树(后端用原生 u2 背靠背取)
// 为什么不再分两个接口:截图与元素树分两次拿,中间隔着 dump 本身的 1.3~1.8 秒,
// 界面只要在动(信息流/视频/加载),框就会落在旧位置上("抓取错位")。
_loadSnapshot:function(){
var serial=this._elSerial;
if(!serial)return;
var container=document.getElementById('el-shot-container');
var info=document.getElementById('el-shot-info');
var old=document.querySelector('.el-shot-warn');
if(old)old.remove();
if(container)container.innerHTML='正在抓取(截图 + 元素树一次取齐)…
';
if(info)info.textContent='抓取中…';
var self=this;
fetch('/api/uiauto/snapshot?serial='+encodeURIComponent(serial)+'&_='+Date.now())
.then(function(r){return r.json();})
.then(function(d){
if(!d.ok){
if(container)container.innerHTML=''+esc(d.error||'抓取失败')+'
';
if(info)info.textContent='失败';
return;
}
self._elData=d.elements||[];
if(d.unstable){
var w=document.createElement('div');
w.className='el-shot-warn';
w.innerHTML='⚠ 抓取期间界面有变化,框可能对不上 —— 建议把设备停在静止界面 后点「重新抓取」';
container.parentNode.insertBefore(w, container);
}
var img=new Image();
img.onload=function(){
container.innerHTML='';
container.appendChild(img);
if(info){
info.textContent=d.width+'x'+d.height+' · '+self._elData.length+' 个元素 · '
+(d.cost_ms||0)+'ms'+(d.unstable?' · ⚠ 界面在变化':'');
}
// 图片显示尺寸一变(窗口缩放、面板宽度变化、滚动条出现…)就重算所有框 ——
// 这是"完全不错位"的保证:框永远跟着图片走,不留旧坐标
if(window.ResizeObserver){
if(self._ro)self._ro.disconnect();
self._ro=new ResizeObserver(function(){ self._renderOverlays(); });
self._ro.observe(img);
}
self._colorCanvas=document.createElement('canvas');
self._renderOverlays();
self._renderAttrs(null);
self._renderColors(null);
};
img.src=d.image;
self._renderEl(self._elData);
var search=document.getElementById('el-search');
if(search&&search.value)self._filterEl(search.value);
})
.catch(function(e){
if(container)container.innerHTML='请求失败: '+esc(e)+'
';
});
},
// 兼容旧调用名(工具栏「重新抓取」按钮)
_refreshShot:function(){ this._loadSnapshot(); },
// 在截图上渲染元素边界框(可点击)
_renderOverlays:function(){
var container=document.getElementById('el-shot-container');
var img=container.querySelector('img');
if(!img||!this._elData)return;
var self=this;
function draw(){
// 清除旧 overlay 和旧点击处理
container.querySelectorAll('.el-shot-overlay').forEach(function(o){o.remove();});
container.onclick=null;
var scaleX=img.clientWidth/img.naturalWidth;
var scaleY=img.clientHeight/img.naturalHeight;
// 图片在 container 里的偏移
var imgOffsetX=img.offsetLeft;
var imgOffsetY=img.offsetTop;
var imgW=img.naturalWidth, imgH=img.naturalHeight;
self._elData.forEach(function(el,i){
if(!el.bounds)return;
// bounds 格式 "[x1,y1][x2,y2]"
var m=el.bounds.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
if(!m)return;
var x1=parseInt(m[1]),y1=parseInt(m[2]),x2=parseInt(m[3]),y2=parseInt(m[4]);
var w=(x2-x1)*scaleX;
var h=(y2-y1)*scaleY;
if(w<4||h<4)return; // 太小不画
// 跳过占满屏幕的容器:面积>90%屏幕,没有选择价值,还会盖住小元素
if((x2-x1)*(y2-y1) > imgW*imgH*0.9)return;
var ov=document.createElement('div');
ov.className='el-shot-overlay';
ov.setAttribute('data-idx',i);
ov.style.left=(imgOffsetX+x1*scaleX)+'px';
ov.style.top=(imgOffsetY+y1*scaleY)+'px';
ov.style.width=w+'px';
ov.style.height=h+'px';
ov.title=el.name||el.class||'';
container.appendChild(ov);
});
// 点击截图:按 bounds 命中测试,选中最小的(最深的)元素,
// 而不是被 DOM 层叠中的大容器/大兄弟挡住
container.onmousemove=function(e){
var im=container.querySelector('img');
if(!im||!self._elData)return;
var r=im.getBoundingClientRect();
var px=(e.clientX-r.left)/scaleX, py=(e.clientY-r.top)/scaleY;
var best=-1,bestArea=Infinity;
self._elData.forEach(function(el,i){
var mb=el.bounds&&el.bounds.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
if(!mb)return;
var a=+mb[1],b=+mb[2],c=+mb[3],dd=+mb[4];
if(px>=a&&px<=c&&py>=b&&py<=dd){var ar=(c-a)*(dd-b); if(ar=a&&px<=c&&py>=b&&py<=dd){
var area=(c-a)*(dd-b);
if(area=0)self._highlightEl(best);
};
}
if(img.complete&&img.naturalWidth>0)draw();
else img.onload=draw;
},
// 高亮元素(截图框 + 列表项联动)
_highlightEl:function(i){
this._renderAttrs(i);
this._renderColors(i);
// 清除旧高亮(只在 el-picker-overlay 范围内查找)
var picker=document.getElementById('el-picker-overlay');
picker.querySelectorAll('.el-shot-overlay.active').forEach(function(o){o.classList.remove('active');});
picker.querySelectorAll('.el-picker-item.active').forEach(function(o){o.classList.remove('active');});
// 高亮当前(overlay 用 data-idx 查找,渲染时跳过了全屏容器,索引不再一一对应)
var overlay=picker.querySelector('.el-shot-overlay[data-idx="'+i+'"]');
if(overlay)overlay.classList.add('active');
// 列表项用 data-idx 查找(过滤后顺序可能不同)
var item=picker.querySelector('.el-picker-item[data-idx="'+i+'"]');
if(item){
item.classList.add('active');
item.scrollIntoView({block:'nearest',behavior:'smooth'});
}
// 信息栏显示将填入的选择器,确认是否精确命中目标
var infoEl=document.getElementById('el-shot-info');
if(infoEl&&this._elData&&this._elData[i]){
var sg=this._elData[i].suggested||{};
infoEl.textContent='已选中: '+(sg.type||'')+' '+(sg.value||'');
}
},
_renderEl:function(list){
var self=this;
var html=list.map(function(el){
var idx=self._elData.indexOf(el);
// 属性顺序有讲究:**文字/描述排最前并加粗**——它们是最稳的定位依据,
// 也是"一眼认出这是哪个元素"的凭据(id 只是补充)。见 doc/TASK_DEV.md §5.4。
var attrs=[];
if(el.text)attrs.push('text:'+esc(el.text)+' ');
if(el.description)attrs.push('desc:'+esc(el.description)+' ');
if(el.resource_id)attrs.push('id:'+esc(el.resource_id)+' ');
var indent=' '.repeat(Math.min(el.depth||0,6));
var sg=el.suggested||{};
if(sg.invalid)attrs.push('⚠ '+esc(sg.reason||'无可用属性')+' ');
var acts=''
+'▶ 点一下 '
+(!sg.invalid&&sg.value
? '✓ 测选择器 '
: '')
+'✓ 填入 '
+'
';
return ''+
'
'+(el.depth||0)+' '+
'
'+indent+esc(el.name||el.class||'')+'
'+
'
'+attrs.join('')+'
'+
'
'+esc(sg.type)+' '+
(sg.semantic?'
✓ 语义 ':'')+
(sg.indexed?'
⚠ 序号 '+sg.occ+'/'+sg.total+' ':'')+
(sg.broad?'
⚠宽泛 ':'')+
acts+
'
';
}).join('');
document.getElementById('el-list').innerHTML=html||'无元素
';
},
// 抓取时"直接点一下":按元素 bounds 中心在设备上点击(服务端 snap 吸附)
_testTap:function(idx){
var el=this._elData&&this._elData[idx]; var serial=this._elSerial;
if(!el||!serial)return;
var m=(el.bounds||'').match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
if(!m){ showToast('该元素没有 bounds,无法坐标点击','error'); return; }
var x=Math.round((+m[1]+ +m[3])/2), y=Math.round((+m[2]+ +m[4])/2);
var self=this;
apiPost('/api/screen/tap', {serial:serial, x:x, y:y, snap:1}).then(function(r){
if(!r||!r.ok){ showToast((r&&r.error)||'点击失败','error'); return; }
showToast('已点击'+(r.label?('「'+r.label+'」'):'')+' ('+r.x+','+r.y+')'+(r.snapped?' [已吸附]':''),'success');
setTimeout(function(){ if(self._elSerial===serial)self._refreshShot(); }, 800);
});
},
// 抓取时验证"将填入的选择器":走 /api/steps/test 真跑一次 click
_testSelector:function(idx){
var el=this._elData&&this._elData[idx]; var serial=this._elSerial;
if(!el||!serial)return;
var sg=el.suggested||{};
if(!sg.value){ showToast('该元素没有可用选择器','error'); return; }
var self=this;
var step={type:'click', label:'测试点击',
params:{selector_type:sg.type||'xpath', selector_value:sg.value, wait_timeout:2}};
apiPost('/api/steps/test', {serial:serial, step:step}).then(function(r){
if(!r||!r.ok){ showToast((r&&r.error)||'测试失败','error'); return; }
var ok=(r.result==='命中');
showToast('选择器测试: '+(r.result||'')+(r.msg?(' — '+r.msg):''), ok?'success':'error');
setTimeout(function(){ if(self._elSerial===serial)self._refreshShot(); }, 800);
});
},
_filterEl:function(kw){
if(!kw){this._renderEl(this._elData);this._renderOverlays();return;}
kw=kw.toLowerCase();
var f=this._elData.filter(function(el){
return (el.resource_id&&el.resource_id.toLowerCase().includes(kw))||
(el.text&&el.text.toLowerCase().includes(kw))||
(el.description&&el.description.toLowerCase().includes(kw));
});
this._renderEl(f);
},
// 点层级条目 = **选中**(看属性/颜色/高亮),不关窗不回填
_pickEl:function(i){
this._highlightEl(i);
},
// 「✓ 填入」才回填选择器并关窗
_fillEl:function(i){
var el=this._elData[i];
if(!el||!this._elTargetInput)return;
if(el.suggested&&el.suggested.invalid){
showToast(el.suggested.reason||'该元素无法生成选择器','error');
return;
}
// 填入推荐选择器值,并切换选择器类型
this._elTargetInput.value=el.suggested.value;
var sel=this._elTargetInput.closest('.sc-body').querySelector('[data-key="selector_type"]');
if(sel)sel.value=el.suggested.type;
// 程序赋值不会触发 input 事件,手动同步回 _steps 防丢失
this._syncFromDom();
// 只关闭抓取元素弹窗,不影响任务编辑窗口
closeElPicker();
showToast('已填入: '+el.suggested.type+'='+el.suggested.value,'success');
}
};
async function saveTask(jobId){
const name=document.getElementById('f-name').value.trim();
if(!name){showToast('任务名不能为空','error');return;}
let params={};
const tt=document.getElementById('f-task_type').value;
if(tt==='generic_steps'){
// 通用步骤任务:从步骤编辑器收集
const steps=_stepEditor.collect();
if(!steps.length){showToast('请至少添加一个步骤','error');return;}
// 校验:click 步骤的 selector_value 不能为空
var warnings=_stepEditor.validate(steps);
if(warnings.length){
if(!confirm('步骤配置有问题:\n\n'+warnings.join('\n')+'\n\n确定要保存吗?'))return;
}
const mdEl=document.getElementById('f-max_duration');
params={max_duration:mdEl?parseInt(mdEl.value)||0:0,steps:steps};
// 去重有效期(任务级;「条件判断→去重」与「记为已做」共用这一套)
const drEl=document.getElementById('f-dedup_reset');
params.dedup_reset=drEl?drEl.value:'day';
if(drEl&&drEl.value==='hours'){
const dhEl=document.getElementById('f-dedup_hours');
params.dedup_hours=Math.max(1,parseInt(dhEl&&dhEl.value)||6);
}
// 公共巡检(任务级,独立于步骤画布;实现在 tasks.js + core/patrol.py)
if(typeof patrolCollect==='function'){
const ws=patrolCollect();
if(ws.length)params.watchers=ws;
}
}else{
try{params=JSON.parse(document.getElementById('f-params').value||'{}');}
catch(e){showToast('参数 JSON 格式错误','error');return;}
}
// 离线自动跳过(serial/group 模式):任务触发时跳过设备池中不在线的设备
const skipEl=document.getElementById('f-skip_offline');
params.skip_offline = skipEl?skipEl.checked:true;
// 抢占设备:触发时停止目标设备上的其他任务,接管执行
const preemptEl=document.getElementById('f-preempt');
params.preempt = preemptEl?preemptEl.checked:false;
const targetMode=document.getElementById('f-target_mode').value;
const target={mode:targetMode};
if(targetMode==='group')target.group_name=document.getElementById('f-target_group').value;
if(targetMode==='serial')target.serial=document.getElementById('f-target_serial').value;
const schedMode=document.getElementById('f-schedule_mode').value;
let schedule={mode:'once'};
if(schedMode==='cron'){
schedule={mode:'cron',cron:buildCronFromFreq()};
}else if(schedMode==='cron_stop'){
const st=(document.getElementById('f-schedule_stop_time').value||'18:00').split(':');
schedule={mode:'cron_stop',
cron:buildCronFromFreq(),
stop_cron:(parseInt(st[1])||0)+' '+(parseInt(st[0])||0)+' * * *'};
}
// 运行窗口:只约束定时触发(窗口外定时不启动),手动执行不受限制
if(document.getElementById('f-window_enable').checked){
schedule.window={
start:document.getElementById('f-window_start').value||'09:00',
end:document.getElementById('f-window_end').value||'18:00',
};
}
const data={
name:name,
task_type:document.getElementById('f-task_type').value,
enabled:document.getElementById('f-enabled').checked,
target:target,
params:params,
schedule:schedule,
retry:{max_attempts:Math.max(1,parseInt(document.getElementById('f-retry_attempts').value)||1),
delay:Math.max(10,parseInt(document.getElementById('f-retry_delay').value)||60)}
};
if(jobId){
const r=await apiPut('/api/jobs/'+jobId,data);
handleResult(r,()=>{_stepEditor.clearDraft();closeModal();loadTasks();});
}else{
const r=await apiPost('/api/jobs',data);
handleResult(r,()=>{_stepEditor.clearDraft();closeModal();loadTasks();});
}
}
async function deleteTask(jobId){
if(!confirm('确认删除此任务吗?'))return;
const r=await apiDelete('/api/jobs/'+jobId);
handleResult(r,()=>loadTasks());
}