feat: 方案对比结果区域改为可折叠显示

- 将方案对比结果卡片改为可折叠的expansion组件
- 添加analytics图标,提升界面美观度
- 默认展开状态,方便用户查看
- 优化卡片样式,移除内边距并添加overflow-hidden
This commit is contained in:
dmy
2026-01-06 11:16:53 +08:00
parent db6114ef57
commit 60a9a57cee

80
gui.py
View File

@@ -926,46 +926,46 @@ def index():
"text-gray-500 italic" "text-gray-500 italic"
) )
with ui.card().classes("w-full p-4 shadow-md"): with ui.card().classes("w-full p-0 shadow-md overflow-hidden"):
ui.label("方案对比结果 (点击行查看拓扑详情)").classes( with ui.expansion(
"text-xl font-semibold mb-2" "方案对比结果 (点击行查看拓扑详情)", icon="analytics", value=True
) ).classes("w-full").props("header-class=\"text-xl font-semibold\""):
columns = [ columns = [
{ {
"name": "name", "name": "name",
"label": "方案名称", "label": "方案名称",
"field": "name", "field": "name",
"required": True, "required": True,
"align": "left", "align": "left",
}, },
{ {
"name": "cost_wan", "name": "cost_wan",
"label": "总投资 (万元)", "label": "总投资 (万元)",
"field": "cost_wan", "field": "cost_wan",
"sortable": True, "sortable": True,
}, },
{ {
"name": "loss_kw", "name": "loss_kw",
"label": "线损 (kW)", "label": "线损 (kW)",
"field": "loss_kw", "field": "loss_kw",
"sortable": True, "sortable": True,
}, },
{ {
"name": "note", "name": "note",
"label": "备注", "label": "备注",
"field": "note", "field": "note",
"align": "left", "align": "left",
}, },
] ]
# 使用内置的 selection='single' 结合行点击事件实现背景高亮 # 使用内置的 selection='single' 结合行点击事件实现背景高亮
# 这样可以完全由 Python 事件逻辑控制,不依赖 CSS 伪类 # 这样可以完全由 Python 事件逻辑控制,不依赖 CSS 伪类
refs["results_table"] = ui.table( refs["results_table"] = ui.table(
columns=columns, columns=columns,
rows=[], rows=[],
selection="single", selection="single",
row_key="original_name", row_key="original_name",
).classes("w-full hide-selection-column") ).classes("w-full hide-selection-column")
refs["results_table"].on("row-click", handle_row_click) refs["results_table"].on("row-click", handle_row_click)
with ui.card().classes("w-full p-4 shadow-md"): with ui.card().classes("w-full p-4 shadow-md"):
ui.label("拓扑可视化").classes("text-xl font-semibold mb-2") ui.label("拓扑可视化").classes("text-xl font-semibold mb-2")
refs["plot_container"] = ui.column().classes("w-full items-center") refs["plot_container"] = ui.column().classes("w-full items-center")