refactor(cockpit): single-page chat layout, compact stats cards (cheight:4), file attachment UI

This commit is contained in:
yumoqing 2026-07-31 11:49:30 +08:00
parent bd0890a394
commit 6831697edc
2 changed files with 126 additions and 227 deletions

View File

@ -1,123 +1,53 @@
# cockpit_stats.dspy - Returns dashboard stat cards as Bricks widget JSON
# cockpit_stats.dspy - compact stat cards for cockpit (cheight:4)
dbname = get_module_dbname('pipeline-sdlc')
async with DBPools().sqlorContext(dbname) as sor:
# Active projects
proj = await sor.sqlExe(
"SELECT COUNT(*) as active FROM sd_projects WHERE status='active'", {})
proj = await sor.sqlExe("SELECT COUNT(*) as active FROM sd_projects WHERE status='active'", {})
active_projects = proj[0].active if proj else 0
# Active iterations
iters = await sor.sqlExe(
"SELECT COUNT(*) as cnt FROM sd_iterations WHERE status='in_progress'", {})
iters = await sor.sqlExe("SELECT COUNT(*) as cnt FROM sd_iterations WHERE status='in_progress'", {})
active_iters = iters[0].cnt if iters else 0
# Open bugs
bugs = await sor.sqlExe(
"SELECT COUNT(*) as cnt FROM sd_bugs WHERE status NOT IN ('closed','resolved')", {})
bugs = await sor.sqlExe("SELECT COUNT(*) as cnt FROM sd_bugs WHERE status NOT IN ('closed','resolved')", {})
open_bugs = bugs[0].cnt if bugs else 0
# Pending reviews (human tasks)
reviews = await sor.sqlExe(
"SELECT COUNT(*) as cnt FROM pipeline_human_tasks WHERE status='pending'", {})
reviews = await sor.sqlExe("SELECT COUNT(*) as cnt FROM pipeline_human_tasks WHERE status='pending'", {})
pending_reviews = reviews[0].cnt if reviews else 0
def card(n, label, color, url):
return {
"widgettype": "HBox",
"options": {
"css": "card", "cwidth": 23, "cheight": 4,
"padding": "8px 14px", "bgcolor": "#fff",
"borderRadius": "8px", "border": "1px solid #e2e8f0",
"alignItems": "center", "gap": "10px", "cursor": "pointer"
},
"binds": [{
"wid": "self", "event": "click",
"actiontype": "urlwidget",
"target": "app.main_content",
"options": {"url": entire_url(url)},
"mode": "replace"
}],
"subwidgets": [
{"widgettype": "Text", "options": {
"text": str(n), "cfontsize": 1.5,
"color": color, "fontWeight": "bold"
}},
{"widgettype": "Text", "options": {
"text": label, "cfontsize": 0.85, "color": "#64748b"
}}
]
}
return {
"widgettype": "ResponsableBox",
"options": {"gap": "16px", "minWidth": "180px", "width": "100%"},
"options": {"gap": "12px", "minWidth": "160px", "width": "100%"},
"subwidgets": [
{
"widgettype": "VBox",
"options": {
"css": "card", "cwidth": 23, "cheight": 12,
"padding": "20px", "bgcolor": "#fff",
"borderRadius": "8px", "border": "1px solid #e2e8f0",
"alignItems": "center", "gap": "6px", "cursor": "pointer"
},
"binds": [{
"wid": "self", "event": "click",
"actiontype": "urlwidget",
"target": "app.main_content",
"options": {"url": entire_url("/pipeline-sdlc/sd_projects/")},
"mode": "replace"
}],
"subwidgets": [
{"widgettype": "Text", "options": {
"text": f"{active_projects}", "cfontsize": 2.2,
"color": "#3b82f6", "fontWeight": "bold"
}},
{"widgettype": "Text", "options": {
"text": "活跃项目", "cfontsize": 0.9, "color": "#64748b"
}}
]
},
{
"widgettype": "VBox",
"options": {
"css": "card", "cwidth": 23, "cheight": 12,
"padding": "20px", "bgcolor": "#fff",
"borderRadius": "8px", "border": "1px solid #e2e8f0",
"alignItems": "center", "gap": "6px", "cursor": "pointer"
},
"binds": [{
"wid": "self", "event": "click",
"actiontype": "urlwidget",
"target": "app.main_content",
"options": {"url": entire_url("/pipeline-sdlc/sd_iterations/")},
"mode": "replace"
}],
"subwidgets": [
{"widgettype": "Text", "options": {
"text": f"{active_iters}", "cfontsize": 2.2,
"color": "#22c55e", "fontWeight": "bold"
}},
{"widgettype": "Text", "options": {
"text": "进行中迭代", "cfontsize": 0.9, "color": "#64748b"
}}
]
},
{
"widgettype": "VBox",
"options": {
"css": "card", "cwidth": 23, "cheight": 12,
"padding": "20px", "bgcolor": "#fff",
"borderRadius": "8px", "border": "1px solid #e2e8f0",
"alignItems": "center", "gap": "6px", "cursor": "pointer"
},
"binds": [{
"wid": "self", "event": "click",
"actiontype": "urlwidget",
"target": "app.main_content",
"options": {"url": entire_url("/pipeline-sdlc/sd_bugs/")},
"mode": "replace"
}],
"subwidgets": [
{"widgettype": "Text", "options": {
"text": f"{open_bugs}", "cfontsize": 2.2,
"color": "#f59e0b", "fontWeight": "bold"
}},
{"widgettype": "Text", "options": {
"text": "待处理Bug", "cfontsize": 0.9, "color": "#64748b"
}}
]
},
{
"widgettype": "VBox",
"options": {
"css": "card", "cwidth": 23, "cheight": 12,
"padding": "20px", "bgcolor": "#fff",
"borderRadius": "8px", "border": "1px solid #e2e8f0",
"alignItems": "center", "gap": "6px", "cursor": "pointer"
},
"subwidgets": [
{"widgettype": "Text", "options": {
"text": f"{pending_reviews}", "cfontsize": 2.2,
"color": "#8b5cf6", "fontWeight": "bold"
}},
{"widgettype": "Text", "options": {
"text": "待审批", "cfontsize": 0.9, "color": "#64748b"
}}
]
}
card(active_projects, "活跃项目", "#3b82f6", "/pipeline-sdlc/sd_projects/"),
card(active_iters, "进行中迭代", "#22c55e", "/pipeline-sdlc/sd_iterations/"),
card(open_bugs, "待处理Bug", "#f59e0b", "/pipeline-sdlc/sd_bugs/"),
card(pending_reviews, "待审批", "#8b5cf6", ""),
]
}

View File

@ -11,21 +11,19 @@
"options": {
"width": "100%",
"alignItems": "center",
"padding": "20px 24px 12px 24px",
"padding": "16px 24px 8px 24px",
"cheight": 6,
"gap": "12px"
},
"subwidgets": [
{
"widgettype": "Title2",
"options": {
"text": "开发产线驾驶舱"
}
"options": { "text": "开发产线驾驶舱" }
},
{
"widgettype": "Text",
"options": {
"text": "Cockpit",
"text": "AI驱动的对话式开发",
"cfontsize": 0.9,
"color": "#94a3b8"
}
@ -46,7 +44,7 @@
"event": "click",
"actiontype": "script",
"target": "self",
"script": "var p=bricks.getWidgetById('cockpit_timeline');if(p)p.render({});var c=bricks.getWidgetById('cockpit_chat');if(c)c.render({});var d=bricks.getWidgetById('cockpit_dashboard');if(d)d.render({});"
"script": "var c=bricks.getWidgetById('cockpit_chat');if(c)c.render({});var s=bricks.getWidgetById('cockpit_stats_row');if(s)s.render({});"
}
]
}
@ -56,14 +54,14 @@
"widgettype": "HBox",
"options": {
"width": "100%",
"padding": "12px 24px 12px 24px",
"cheight": 18,
"padding": "8px 24px 8px 24px",
"cheight": 4,
"gap": "16px"
},
"subwidgets": [
{
"widgettype": "urlwidget",
"id": "cockpit_dashboard",
"id": "cockpit_stats_row",
"options": {
"url": "{{entire_url('/pipeline-sdlc/api/cockpit_stats.dspy')}}",
"method": "GET"
@ -72,67 +70,55 @@
]
},
{
"widgettype": "HBox",
"widgettype": "VBox",
"options": {
"css": "filler",
"width": "100%",
"height": "100%",
"padding": "12px 24px 24px 24px",
"gap": "16px"
"padding": "0 24px 0 24px",
"gap": "0"
},
"subwidgets": [
{
"widgettype": "VBox",
"widgettype": "VScrollPanel",
"id": "cockpit_chat",
"options": {
"cwidth": 35,
"css": "filler",
"width": "100%",
"height": "100%",
"gap": "8px"
"bgcolor": "#f8fafc",
"border": "1px solid #e2e8f0",
"borderBottom": "none",
"borderRadius": "8px 8px 0 0",
"padding": "16px"
},
"subwidgets": [
{
"widgettype": "HBox",
"options": {
"alignItems": "center",
"padding": "0 0 8px 0",
"gap": "8px"
},
"widgettype": "VBox",
"options": { "alignItems": "center", "padding": "40px 0", "gap": "12px" },
"subwidgets": [
{
"widgettype": "Title3",
"widgettype": "Text",
"options": {
"text": "产线时间线"
"text": "🤖",
"cfontsize": 2.5,
"color": "#94a3b8"
}
},
{
"widgettype": "Text",
"options": {
"text": "选择一个迭代查看",
"cfontsize": 0.8,
"color": "#94a3b8"
"text": "选择一个迭代后,在下方输入你的需求。",
"cfontsize": 1,
"color": "#64748b"
}
}
]
},
{
"widgettype": "VScrollPanel",
"id": "cockpit_timeline",
"options": {
"css": "filler",
"width": "100%",
"height": "100%",
"bgcolor": "#f8fafc",
"border": "1px solid #e2e8f0",
"borderRadius": "8px",
"padding": "12px"
},
"subwidgets": [
},
{
"widgettype": "Text",
"options": {
"text": "请先在项目管理中创建迭代,或从工具栏选择一个迭代来查看产线进度。",
"cfontsize": 0.9,
"color": "#64748b",
"padding": "20px"
"text": "Agent 将自动分析需求、生成设计方案、驱动开发产线。",
"cfontsize": 0.85,
"color": "#94a3b8"
}
}
]
@ -142,61 +128,25 @@
{
"widgettype": "VBox",
"options": {
"cwidth": 65,
"height": "100%",
"width": "100%",
"bgcolor": "#fff",
"border": "1px solid #e2e8f0",
"borderTop": "none",
"borderRadius": "0 0 8px 8px",
"padding": "12px 16px 12px 16px",
"gap": "8px"
},
"subwidgets": [
{
"widgettype": "HBox",
"id": "file_list_area",
"options": {
"alignItems": "center",
"padding": "0 0 8px 0",
"gap": "8px"
},
"subwidgets": [
{
"widgettype": "Title3",
"options": {
"text": "对话"
}
},
{
"widgettype": "Filler"
},
{
"widgettype": "Text",
"options": {
"text": "像和大模型对话一样驱动开发",
"cfontsize": 0.8,
"color": "#94a3b8"
}
}
]
},
{
"widgettype": "VScrollPanel",
"id": "cockpit_chat",
"options": {
"css": "filler",
"width": "100%",
"height": "100%",
"bgcolor": "#f8fafc",
"border": "1px solid #e2e8f0",
"borderRadius": "8px",
"padding": "12px"
"wrap": "wrap",
"gap": "6px",
"minHeight": "0"
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "选择一个迭代后,这里将显示对话记录。\n在下方输入框中描述你的需求Agent 将自动分析并驱动产线执行。",
"cfontsize": 0.9,
"color": "#64748b",
"padding": "20px"
}
}
]
"subwidgets": []
},
{
"widgettype": "Form",
@ -205,47 +155,66 @@
"name": "chat_form",
"submit_url": "{{entire_url('/pipeline-sdlc/api/cockpit_chat.dspy')}}",
"fields": [
{"name": "iteration_id", "uitype": "hide", "value": ""},
{"name": "task_id", "uitype": "hide", "value": ""},
{"name": "message_text", "uitype": "textarea", "placeholder": "描述你的需求或回复Agent...", "rows": 3, "cwidth": 60},
{"name": "action", "uitype": "hide", "value": "send_message"}
{ "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": "[]" }
]
},
"subwidgets": [
{
"widgettype": "HBox",
"options": {
"padding": "8px 0 0 0",
"gap": "8px",
"justifyContent": "flex-end"
},
"subwidgets": [
{
"widgettype": "Button",
"options": {
"name": "send_btn",
"label": "发送",
"type": "submit",
"css": "primary"
}
}
]
}
],
"binds": [
{
"wid": "self",
"event": "beforesubmit",
"actiontype": "script",
"target": "self",
"script": "var iter_id=bricks.getWidgetById('current_iteration_id');if(!iter_id||!iter_id.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;}return true;"
"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 c=bricks.getWidgetById('cockpit_chat');if(c)c.render({});var t=bricks.getWidgetById('cockpit_timeline');if(t)t.render({});"
"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({});"
}
]
},
{
"widgettype": "HBox",
"options": {
"width": "100%",
"alignItems": "center",
"gap": "8px",
"padding": "4px 0 0 0"
},
"subwidgets": [
{
"widgettype": "Button",
"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();"
}
]
},
{
"widgettype": "Filler"
},
{
"widgettype": "Button",
"options": {
"name": "send_btn",
"label": "发送",
"type": "submit",
"css": "primary"
}
}
]
}