pipeline-sdlc/wwwroot/index_cockpit.ui
ymq 78c3a926d1 frontend: replace AgentIO with TextArea+Button+XHR streaming
Simple controlled approach: TextArea input, Button click handler does
XHR POST with url-encoded body, onprogress splits 0x0a, JSON.parse
each line, appends Text widget to chat. No AgentIO interference.
2026-08-08 22:17:07 +08:00

227 lines
11 KiB
XML

{
"widgettype": "VBox",
"options": {
"width": "100%",
"height": "100%",
"padding": "0"
},
"subwidgets": [
{
"widgettype": "HBox",
"options": {
"width": "100%",
"alignItems": "center",
"padding": "16px 24px 8px 24px",
"cheight": 6,
"gap": "12px"
},
"subwidgets": [
{
"widgettype": "Title2",
"options": {
"text": "开发产线驾驶舱"
}
},
{
"widgettype": "Text",
"options": {
"text": "AI驱动的对话式开发",
"cfontsize": 0.9,
"color": "#94a3b8"
}
},
{
"widgettype": "Filler"
}
]
},
{
"widgettype": "HBox",
"options": {
"width": "100%",
"padding": "8px 24px 8px 24px",
"cheight": 4,
"gap": "16px"
},
"subwidgets": [
{
"widgettype": "urlwidget",
"id": "stats_row",
"options": {
"url": "{{entire_url('/pipeline-sdlc/api/cockpit_stats.dspy')}}",
"method": "GET"
}
}
]
},
{
"widgettype": "HBox",
"id": "context_bar",
"options": {
"width": "100%",
"padding": "4px 24px 4px 24px",
"cheight": 2.5,
"gap": "12px",
"alignItems": "center",
"bgcolor": "#e8f0fe"
},
"subwidgets": [
{
"widgettype": "Html",
"options": {
"html": "<script>setTimeout(function(){console.log('DIAG: page loaded, checking bricks');var ai=bricks.getWidgetById('chat_input',bricks.app);console.log('DIAG: chat_input widget:',ai?'found':'NOT FOUND','type:',ai?ai.constructor.name:'N/A','url:',ai?ai.opts.url:'N/A');if(ai&&ai.inputw){console.log('DIAG: inputw found, bind check');ai.inputw.unbind('inputed');ai.inputw.bind('inputed',function(e){console.log('DIAG: inputed RAW event:',JSON.stringify(e.params));});}fetch('/pipeline-sdlc/api/cockpit_context.dspy').then(function(r){return r.json()}).then(function(d){if(d.project_id){var sel=bricks.getWidgetById('project_selector',bricks.app);if(sel)sel.setValue(d.project_id);}})},200);</script>",
"height": "0",
"width": "0"
}
},
{
"widgettype": "Form",
"id": "project_form",
"options": {
"name": "project_form",
"cols": 1,
"fields": [
{
"name": "project_id",
"uitype": "code",
"label": "",
"placeholder": "选择项目",
"cwidth": 20,
"dataurl": "/pipeline-sdlc/api/cockpit_project_picker.dspy",
"valueField": "value",
"textField": "text",
"nullable": true
}
]
},
"binds": [
{
"wid": "self",
"event": "changed",
"actiontype": "script",
"target": "self",
"script": "var v=this.getValue();var pid=(v||{}).project_id||'';if(!pid)return;fetch('/pipeline-sdlc/api/cockpit_context_update.dspy',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'project_id='+encodeURIComponent(pid)}).then(function(r){return r.json()}).then(function(r){if(r.success){var pl=bricks.getWidgetById('task_btn',bricks.app);if(pl&&pl.text_w)pl.text_w.set_text('任务');}})"
}
]
},
{
"widgettype": "Button",
"id": "task_btn",
"options": {
"label": "任务",
"css": "small"
}
}
],
"binds": []
},
{
"widgettype": "VBox",
"options": {
"css": "filler",
"width": "100%",
"height": "100%",
"padding": "0 24px 0 24px",
"gap": "0"
},
"subwidgets": [
{
"widgettype": "VScrollPanel",
"id": "chat_scroll",
"options": {
"css": "filler",
"width": "100%",
"height": "100%",
"bgcolor": "#f8fafc",
"border": "1px solid #e2e8f0",
"borderBottom": "none",
"borderRadius": "8px 8px 0 0",
"padding": "16px"
},
"subwidgets": [
{
"widgettype": "VBox",
"options": {
"alignItems": "center",
"padding": "40px 0",
"gap": "12px"
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "选择一个迭代后,在下方输入你的需求。",
"cfontsize": 1,
"color": "#64748b"
}
},
{
"widgettype": "Text",
"options": {
"text": "Agent 将自动分析需求、生成设计、驱动产线执行。",
"cfontsize": 0.85,
"color": "#94a3b8"
}
}
]
}
]
},
{
"widgettype": "VBox",
"options": {
"bgcolor": "#fff",
"border": "1px solid #e2e8f0",
"borderTop": "none",
"borderRadius": "0 0 8px 8px",
"padding": "8px 12px",
"gap": "4px"
},
"subwidgets": [
{
"widgettype": "HBox",
"options": {
"gap": "8px",
"alignItems": "center"
},
"subwidgets": [
{
"widgettype": "Filler",
"options": {
"css": "filler"
}
},
{
"widgettype": "TextArea",
"id": "msg_input",
"options": {
"placeholder": "输入你的需求...",
"cheight": 3,
"css": "filler"
}
},
{
"widgettype": "Button",
"id": "send_btn",
"options": {
"label": "发送",
"css": "primary"
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "script",
"target": "self",
"script": "var ta=bricks.getWidgetById('msg_input',bricks.app);var p=(ta?ta.getValue():'')||'';if(!p.trim())return;var ctx=bricks.getWidgetById('context_data',bricks.app);var cd=ctx?ctx.getValue():{};var iid=cd.iteration_id||'';var pid=cd.project_id||'';var chat=bricks.getWidgetById('chat_scroll',bricks.app);if(!chat)return;var ub=new bricks.HBox({width:'100%'});var um=new bricks.VBox({width:'85%',alignSelf:'flex-end',bgcolor:'#dbeafe',borderRadius:'12px',padding:'12px 16px',marginBottom:'10px',gap:'4px'});um.add_widget(new bricks.Text({text:'你',cfontsize:0.75,color:'#2563eb',fontWeight:'bold'}));um.add_widget(new bricks.Text({text:p,cfontsize:0.95,color:'#1e293b',whiteSpace:'pre-wrap'}));ub.add_widget(new bricks.VBox({css:'filler'}));ub.add_widget(um);ub.add_widget(new bricks.Svg({rate:2,url:bricks_resource('imgs/chat-user.svg')}));chat.add_widget(ub);ta.setValue('');var ab=new bricks.HBox({width:'100%'});var am=new bricks.VBox({width:'85%',alignSelf:'flex-start',bgcolor:'#e8f0fe',borderRadius:'12px',padding:'12px 16px',marginBottom:'10px',gap:'4px'});am.add_widget(new bricks.Text({text:'Agent',cfontsize:0.75,color:'#3b82f6',fontWeight:'bold'}));ab.add_widget(new bricks.Svg({rate:2,url:bricks_resource('imgs/llm.svg')}));ab.add_widget(am);ab.add_widget(new bricks.VBox({css:'filler'}));chat.add_widget(ab);var xhr=new XMLHttpRequest();xhr.open('POST','/pipeline-sdlc/api/cockpit_chat.dspy');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');var lastLen=0;xhr.onprogress=function(){var t=xhr.responseText;var d=t.substring(lastLen);lastLen=t.length;d.split('\\n').forEach(function(line){line=line.trim();if(!line)return;try{var obj=JSON.parse(line);if(obj.content){var tw=new bricks.Text({text:obj.content,cfontsize:0.85,color:'#334155',whiteSpace:'pre-wrap'});am.add_widget(tw);chat.scrollToBottom()}}catch(e){console.log('parse err:',line.substring(0,50))}})};xhr.onload=function(){var s=bricks.getWidgetById('stats_row',bricks.app);if(s)s.render({})};xhr.send('action=send_message&message_text='+encodeURIComponent(p)+'&model_id=&iteration_id='+encodeURIComponent(iid)+'&project_id='+encodeURIComponent(pid))"
}
]
}
]
}
]
}
]
}
]
}