style: modernize card UI — colored icon boxes, fixed height, white bg, Title3

- pipeline_core: 3 cards with colored icon containers (blue/green/amber)
- pipeline_ops: 3 cards with icons (red/sky/purple), consistent height
- pipeline_dist: 2 cards with icons (green/orange), added distributor management card
This commit is contained in:
yumoqing 2026-07-08 19:10:44 +08:00
parent c7b51476d3
commit 66966dbc88

View File

@ -2,38 +2,44 @@
"widgettype": "VBox",
"options": {"width": "100%", "height": "100%", "padding": "24px", "spacing": "20px"},
"subwidgets": [
{
"widgettype": "Title2",
"options": {"text": "产线运营"}
},
{"widgettype": "Title2", "options": {"text": "产线运营"}},
{
"widgettype": "ResponsableBox",
"options": {"gap": "16px", "minWidth": "220px"},
"options": {"gap": "24px", "minWidth": "260px"},
"subwidgets": [
{
"widgettype": "VBox",
"options": {"css": "card", "cwidth": 22, "padding": "16px", "cursor": "pointer"},
"options": {"css": "card", "cwidth": 23, "cheight": 11, "padding": "24px", "cursor": "pointer", "bgcolor": "#fff"},
"binds": [{"wid": "self", "event": "click", "actiontype": "urlwidget", "target": "app.main_content", "options": {"url": "{{entire_url('pipeline_pricing/')}}"}, "mode": "replace"}],
"subwidgets": [
{"widgettype": "Title4", "options": {"text": "定价管理"}},
{"widgettype": "VBox", "options": {"width": "44px", "height": "44px", "bgcolor": "#FEF2F2", "borderRadius": "12px", "alignItems": "center", "justifyContent": "center", "marginBottom": "12px"}, "subwidgets": [
{"widgettype": "Svg", "options": {"svg": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#EF4444\" stroke-width=\"2\"><path d=\"M12 2a10 10 0 100 20 10 10 0 000-20z\"/><path d=\"M12 6v6l4 2\"/></svg>", "width": "24px", "height": "24px"}}
]},
{"widgettype": "Title3", "options": {"text": "定价管理", "marginBottom": "4px"}},
{"widgettype": "Text", "options": {"text": "管理产线计费方式和价格", "cfontsize": 0.9}}
]
},
{
"widgettype": "VBox",
"options": {"css": "card", "cwidth": 22, "padding": "16px", "cursor": "pointer"},
"options": {"css": "card", "cwidth": 23, "cheight": 11, "padding": "24px", "cursor": "pointer", "bgcolor": "#fff"},
"binds": [{"wid": "self", "event": "click", "actiontype": "urlwidget", "target": "app.main_content", "options": {"url": "{{entire_url('pipeline_capacity/')}}"}, "mode": "replace"}],
"subwidgets": [
{"widgettype": "Title4", "options": {"text": "供应量管理"}},
{"widgettype": "VBox", "options": {"width": "44px", "height": "44px", "bgcolor": "#F0F9FF", "borderRadius": "12px", "alignItems": "center", "justifyContent": "center", "marginBottom": "12px"}, "subwidgets": [
{"widgettype": "Svg", "options": {"svg": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0EA5E9\" stroke-width=\"2\"><path d=\"M13 10V3L4 14h7v7l9-11h-7z\"/></svg>", "width": "24px", "height": "24px"}}
]},
{"widgettype": "Title3", "options": {"text": "供应量管理", "marginBottom": "4px"}},
{"widgettype": "Text", "options": {"text": "配置产线并发和调用限额", "cfontsize": 0.9}}
]
},
{
"widgettype": "VBox",
"options": {"css": "card", "cwidth": 22, "padding": "16px", "cursor": "pointer"},
"options": {"css": "card", "cwidth": 23, "cheight": 11, "padding": "24px", "cursor": "pointer", "bgcolor": "#fff"},
"binds": [{"wid": "self", "event": "click", "actiontype": "urlwidget", "target": "app.main_content", "options": {"url": "{{entire_url('pipeline_usage_log/')}}"}, "mode": "replace"}],
"subwidgets": [
{"widgettype": "Title4", "options": {"text": "使用记录"}},
{"widgettype": "VBox", "options": {"width": "44px", "height": "44px", "bgcolor": "#F5F3FF", "borderRadius": "12px", "alignItems": "center", "justifyContent": "center", "marginBottom": "12px"}, "subwidgets": [
{"widgettype": "Svg", "options": {"svg": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8B5CF6\" stroke-width=\"2\"><path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/><polyline points=\"14 2 14 8 20 8\"/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/></svg>", "width": "24px", "height": "24px"}}
]},
{"widgettype": "Title3", "options": {"text": "使用记录", "marginBottom": "4px"}},
{"widgettype": "Text", "options": {"text": "查看产线调用和消费记录", "cfontsize": 0.9}}
]
}