refactor(cockpit): replace Form with UiText widget, file chip UI
This commit is contained in:
parent
6831697edc
commit
eb6674f884
@ -16,37 +16,16 @@
|
||||
"gap": "12px"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Title2",
|
||||
"options": { "text": "开发产线驾驶舱" }
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "AI驱动的对话式开发",
|
||||
"cfontsize": 0.9,
|
||||
"color": "#94a3b8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Filler"
|
||||
},
|
||||
{ "widgettype": "Title2", "options": { "text": "开发产线驾驶舱" } },
|
||||
{ "widgettype": "Text", "options": { "text": "AI驱动的对话式开发", "cfontsize": 0.9, "color": "#94a3b8" } },
|
||||
{ "widgettype": "Filler" },
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"options": {
|
||||
"name": "refresh_btn",
|
||||
"label": "刷新",
|
||||
"css": "small"
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "script",
|
||||
"target": "self",
|
||||
"script": "var c=bricks.getWidgetById('cockpit_chat');if(c)c.render({});var s=bricks.getWidgetById('cockpit_stats_row');if(s)s.render({});"
|
||||
}
|
||||
]
|
||||
"options": { "name": "refresh", "label": "刷新", "css": "small" },
|
||||
"binds": [{
|
||||
"wid": "self", "event": "click", "actiontype": "script", "target": "self",
|
||||
"script": "var c=bricks.getWidgetById('chat_scroll');if(c)c.render({});var s=bricks.getWidgetById('stats_row');if(s)s.render({});"
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -61,7 +40,7 @@
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "urlwidget",
|
||||
"id": "cockpit_stats_row",
|
||||
"id": "stats_row",
|
||||
"options": {
|
||||
"url": "{{entire_url('/pipeline-sdlc/api/cockpit_stats.dspy')}}",
|
||||
"method": "GET"
|
||||
@ -81,7 +60,7 @@
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "VScrollPanel",
|
||||
"id": "cockpit_chat",
|
||||
"id": "chat_scroll",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
@ -97,30 +76,8 @@
|
||||
"widgettype": "VBox",
|
||||
"options": { "alignItems": "center", "padding": "40px 0", "gap": "12px" },
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "🤖",
|
||||
"cfontsize": 2.5,
|
||||
"color": "#94a3b8"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "选择一个迭代后，在下方输入你的需求。",
|
||||
"cfontsize": 1,
|
||||
"color": "#64748b"
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "Text",
|
||||
"options": {
|
||||
"text": "Agent 将自动分析需求、生成设计方案、驱动开发产线。",
|
||||
"cfontsize": 0.85,
|
||||
"color": "#94a3b8"
|
||||
}
|
||||
}
|
||||
{ "widgettype": "Text", "options": { "text": "选择一个迭代后，在下方输入你的需求。", "cfontsize": 1, "color": "#64748b" } },
|
||||
{ "widgettype": "Text", "options": { "text": "Agent 将自动分析需求、生成设计、驱动产线执行。", "cfontsize": 0.85, "color": "#94a3b8" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -133,49 +90,34 @@
|
||||
"border": "1px solid #e2e8f0",
|
||||
"borderTop": "none",
|
||||
"borderRadius": "0 0 8px 8px",
|
||||
"padding": "12px 16px 12px 16px",
|
||||
"gap": "8px"
|
||||
"padding": "10px 14px 10px 14px",
|
||||
"gap": "6px"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "HBox",
|
||||
"id": "file_list_area",
|
||||
"id": "file_list",
|
||||
"options": {
|
||||
"width": "100%",
|
||||
"wrap": "wrap",
|
||||
"gap": "6px",
|
||||
"gap": "4px",
|
||||
"minHeight": "0"
|
||||
},
|
||||
"subwidgets": []
|
||||
},
|
||||
{
|
||||
"widgettype": "Form",
|
||||
"id": "chat_form",
|
||||
"widgettype": "VBox",
|
||||
"id": "uitext_wrapper",
|
||||
"options": {
|
||||
"name": "chat_form",
|
||||
"submit_url": "{{entire_url('/pipeline-sdlc/api/cockpit_chat.dspy')}}",
|
||||
"fields": [
|
||||
{ "name": "message_text", "uitype": "textarea", "placeholder": "输入需求或回复 Agent...", "rows": 3 },
|
||||
{ "name": "iteration_id", "uitype": "hide", "value": "" },
|
||||
{ "name": "task_id", "uitype": "hide", "value": "" },
|
||||
{ "name": "action", "uitype": "hide", "value": "send_message" },
|
||||
{ "name": "file_paths", "uitype": "hide", "value": "[]" }
|
||||
]
|
||||
"width": "100%"
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "beforesubmit",
|
||||
"event": "render",
|
||||
"actiontype": "script",
|
||||
"target": "self",
|
||||
"script": "var iter=bricks.getWidgetById('current_iteration_id');if(!iter||!iter.options.value){bricks.show_error({title:'提示',message:'请先选择迭代'});return false;}var msg=this.getValue('message_text');if(!msg||!msg.trim()){bricks.show_error({title:'提示',message:'请输入内容'});return false;}var files=[];var fa=document.getElementById('cockpit_file_list');if(fa){var kids=fa.children;for(var i=0;i<kids.length;i++){var name=kids[i].getAttribute('data-filename');if(name)files.push(name);}}this.setValue('file_paths',JSON.stringify(files));return true;"
|
||||
},
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "submited",
|
||||
"actiontype": "script",
|
||||
"target": "self",
|
||||
"script": "this.setValue('message_text','');var fa=document.getElementById('cockpit_file_list');if(fa)fa.innerHTML='';var fb=bricks.getWidgetById('file_list_area');if(fb)fb.render({});var c=bricks.getWidgetById('cockpit_chat');if(c)c.render({});"
|
||||
"script": "if(!this._built){this._built=true;var c=this.dom_element;var ut=new bricks.UiText({name:'cockpit_input',placeholder:'输入需求或回复 Agent...'});ut.dom_element.style.cssText='width:100%;min-height:44px;max-height:160px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:inherit;resize:none;outline:none;box-sizing:border-box;line-height:1.5';c.appendChild(ut.dom_element);ut.handleInput();this._uitext=ut;}"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -190,31 +132,24 @@
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"options": {
|
||||
"name": "attach_btn",
|
||||
"label": "添加文件"
|
||||
},
|
||||
"options": { "name": "attach_btn", "label": "添加文件" },
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "script",
|
||||
"target": "self",
|
||||
"script": "var inp=document.createElement('input');inp.type='file';inp.multiple=true;inp.onchange=function(){var fa=document.getElementById('cockpit_file_list');if(!fa){fa=document.createElement('div');fa.id='cockpit_file_list';fa.style.cssText='display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px';var area=document.querySelector('[id$=file_list_area]');if(area)area.appendChild(fa);}for(var i=0;i<this.files.length;i++){var n=this.files[i].name;if(fa.querySelector('[data-filename=\"'+n+'\"]'))continue;var chip=document.createElement('span');chip.setAttribute('data-filename',n);chip.style.cssText='display:inline-flex;align-items:center;gap:4px;background:#e8f0fe;color:#1e40af;padding:2px 8px;border-radius:12px;font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';chip.innerHTML='<span style=\"overflow:hidden;text-overflow:ellipsis\">'+n+'</span><span style=\"cursor:pointer;font-weight:bold;color:#ef4444;margin-left:2px\" onclick=\"this.parentElement.remove()\">×</span>';fa.appendChild(chip);}};inp.click();"
|
||||
"wid": "self", "event": "click", "actiontype": "script", "target": "self",
|
||||
"script": "var inp=document.createElement('input');inp.type='file';inp.multiple=true;inp.onchange=function(){var list=document.getElementById('cockpit_file_bag');if(!list){list=document.createElement('div');list.id='cockpit_file_bag';list.style.cssText='display:flex;flex-wrap:wrap;gap:4px';var fl=bricks.getWidgetById('file_list');if(fl)fl.dom_element.appendChild(list);}for(var i=0;i<this.files.length;i++){var n=this.files[i].name;if(list.querySelector('[data-fn=\"'+n.replace(/\"/g,'')+'\"]'))continue;var chip=document.createElement('span');chip.setAttribute('data-fn',n);chip.style.cssText='display:inline-flex;align-items:center;gap:3px;background:#e8f0fe;color:#1e40af;padding:2px 8px;border-radius:12px;font-size:12px;max-width:200px';chip.innerHTML='<span style=\"overflow:hidden;text-overflow:ellipsis;white-space:nowrap\">'+n+'</span><span style=\"cursor:pointer;font-weight:bold;color:#ef4444;margin-left:2px\" onclick=\"this.parentElement.remove()\">×</span>';list.appendChild(chip);}};inp.click();"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "Filler"
|
||||
},
|
||||
{ "widgettype": "Filler" },
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"options": {
|
||||
"name": "send_btn",
|
||||
"label": "发送",
|
||||
"type": "submit",
|
||||
"css": "primary"
|
||||
}
|
||||
"options": { "name": "send_btn", "label": "发送", "css": "primary" },
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self", "event": "click", "actiontype": "script", "target": "self",
|
||||
"script": "var ut=document.getElementsByName('cockpit_input')[0];var msg=ut?ut.value.trim():'';if(!msg){bricks.show_error({title:'提示',message:'请输入内容'});return;}var iter=bricks.getWidgetById('current_iteration_id');var iid=iter?iter.options.value:'';if(!iid){bricks.show_error({title:'提示',message:'请先选择迭代'});return;}var files=[];var bag=document.getElementById('cockpit_file_bag');if(bag){var chips=bag.querySelectorAll('[data-fn]');for(var j=0;j<chips.length;j++)files.push(chips[j].getAttribute('data-fn'));}var body='message_text='+encodeURIComponent(msg)+'&iteration_id='+encodeURIComponent(iid)+'&action=send_message&file_paths='+encodeURIComponent(JSON.stringify(files));fetch('{{entire_url(\"/pipeline-sdlc/api/cockpit_chat.dspy\")}}',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:body}).then(function(r){return r.json()}).then(function(r){if(r.success||r.error){ut.value='';ut.dispatchEvent(new Event('input',{bubbles:true}));if(bag)bag.innerHTML='';var c=bricks.getWidgetById('chat_scroll');if(c)c.render({});}});"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user