From eed21ce6a5081cc9980d90f67c7d45330373e772 Mon Sep 17 00:00:00 2001
From: yumoqing <yumoqing@gmail.com>
Date: Fri, 29 May 2026 00:13:08 +0800
Subject: [PATCH] fix: responsive UI with VScrollPanel, cfontsize, css:card

---
 wwwroot/index.ui | 270 +++++++++++++++++++++++++++--------------------
 1 file changed, 155 insertions(+), 115 deletions(-)

diff --git a/wwwroot/index.ui b/wwwroot/index.ui
index a5afa71..93cb53d 100644
--- a/wwwroot/index.ui
+++ b/wwwroot/index.ui
@@ -11,15 +11,13 @@
             "options": {
                 "width": "100%",
                 "alignItems": "center",
-                "padding": "16px 24px",
-                "marginBottom": "0"
+                "marginBottom": "24px"
             },
             "subwidgets": [
                 {
                     "widgettype": "Title2",
                     "options": {
-                        "text": "LLM 模型管理",
-                        "fontWeight": "700"
+                        "text": "LLM 模型管理"
                     }
                 },
                 {
@@ -28,139 +26,181 @@
                 {
                     "widgettype": "Text",
                     "options": {
-                        "text": "模型配置、目录分类与调用监控",
-                        "fontSize": "14px"
+                        "text": "模型类型、模型配置与记账失败记录",
+                        "cfontsize": 1.2
                     }
                 }
             ]
         },
         {
-            "widgettype": "ResponsableBox",
+            "widgettype": "VScrollPanel",
             "options": {
-                "gap": "12px",
-                "minWidth": "200px",
-                "padding": "0 24px 16px 24px"
+                "css": "filler"
             },
             "subwidgets": [
                 {
                     "widgettype": "VBox",
                     "options": {
-                        "css": "card",
-                        "padding": "16px 24px",
-                        "cursor": "pointer"
+                        "spacing": 24
                     },
-                    "binds": [
-                        {
-                            "wid": "self",
-                            "event": "click",
-                            "actiontype": "urlwidget",
-                            "target": "app.llmage_content",
-                            "options": {
-                                "url": "{{entire_url('/llmage/llmcatelog_list.ui')}}"
-                            },
-                            "mode": "replace"
-                        }
-                    ],
                     "subwidgets": [
                         {
-                            "widgettype": "Title5",
+                            "widgettype": "ResponsableBox",
                             "options": {
-                                "text": "模型类型管理",
-                                "fontWeight": "600"
-                            }
-                        },
-                        {
-                            "widgettype": "Text",
-                            "options": {
-                                "text": "管理模型的分类目录和类型定义",
-                                "fontSize": "12px"
-                            }
+                                "gap": "16px",
+                                "minWidth": "250px"
+                            },
+                            "subwidgets": [
+                                {
+                                    "widgettype": "VBox",
+                                    "options": {
+                                        "css": "card",
+                                        "cheight": 12,
+                                        "cwidth": 23,
+                                        "padding": "24px",
+                                        "cursor": "pointer",
+                                        "borderRadius": "8px"
+                                    },
+                                    "binds": [
+                                        {
+                                            "wid": "self",
+                                            "event": "click",
+                                            "actiontype": "urlwidget",
+                                            "target": "app.llmage_content",
+                                            "options": {
+                                                "url": "{{entire_url('/llmage/llmcatelog_list.ui')}}"
+                                            },
+                                            "mode": "replace"
+                                        }
+                                    ],
+                                    "subwidgets": [
+                                        {
+                                            "widgettype": "Svg",
+                                            "options": {
+                                                "svg": "<svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3B82F6\" stroke-width=\"2\"><path d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"/></svg>",
+                                                "width": "40px",
+                                                "height": "40px"
+                                            }
+                                        },
+                                        {
+                                            "widgettype": "Title4",
+                                            "options": {
+                                                "text": "模型类型管理",
+                                                "marginTop": "12px"
+                                            }
+                                        },
+                                        {
+                                            "widgettype": "Text",
+                                            "options": {
+                                                "text": "管理模型的分类和类型",
+                                                "cfontsize": 1.2
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "widgettype": "VBox",
+                                    "options": {
+                                        "css": "card",
+                                        "cheight": 12,
+                                        "cwidth": 23,
+                                        "padding": "24px",
+                                        "cursor": "pointer",
+                                        "borderRadius": "8px"
+                                    },
+                                    "binds": [
+                                        {
+                                            "wid": "self",
+                                            "event": "click",
+                                            "actiontype": "urlwidget",
+                                            "target": "app.llmage_content",
+                                            "options": {
+                                                "url": "{{entire_url('/llmage/llm')}}"
+                                            },
+                                            "mode": "replace"
+                                        }
+                                    ],
+                                    "subwidgets": [
+                                        {
+                                            "widgettype": "Svg",
+                                            "options": {
+                                                "svg": "<svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#22C55E\" stroke-width=\"2\"><path d=\"M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15.75c-2.062 0-4.024-.614-5.67-1.757l-1.57-.393m15.04 0L12 21 5.25 13.893\"/></svg>",
+                                                "width": "40px",
+                                                "height": "40px"
+                                            }
+                                        },
+                                        {
+                                            "widgettype": "Title4",
+                                            "options": {
+                                                "text": "模型管理",
+                                                "marginTop": "12px"
+                                            }
+                                        },
+                                        {
+                                            "widgettype": "Text",
+                                            "options": {
+                                                "text": "管理 LLM 模型配置",
+                                                "cfontsize": 1.2
+                                            }
+                                        }
+                                    ]
+                                },
+                                {
+                                    "widgettype": "VBox",
+                                    "options": {
+                                        "css": "card",
+                                        "cheight": 12,
+                                        "cwidth": 23,
+                                        "padding": "24px",
+                                        "cursor": "pointer",
+                                        "borderRadius": "8px"
+                                    },
+                                    "binds": [
+                                        {
+                                            "wid": "self",
+                                            "event": "click",
+                                            "actiontype": "urlwidget",
+                                            "target": "app.llmage_content",
+                                            "options": {
+                                                "url": "{{entire_url('/llmage/failed_accounting.ui')}}"
+                                            },
+                                            "mode": "replace"
+                                        }
+                                    ],
+                                    "subwidgets": [
+                                        {
+                                            "widgettype": "Svg",
+                                            "options": {
+                                                "svg": "<svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#EF4444\" stroke-width=\"2\"><path d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"/></svg>",
+                                                "width": "40px",
+                                                "height": "40px"
+                                            }
+                                        },
+                                        {
+                                            "widgettype": "Title4",
+                                            "options": {
+                                                "text": "记账失败记录",
+                                                "marginTop": "12px"
+                                            }
+                                        },
+                                        {
+                                            "widgettype": "Text",
+                                            "options": {
+                                                "text": "查看和检索记账失败的记录",
+                                                "cfontsize": 1.2
+                                            }
+                                        }
+                                    ]
+                                }
+                            ]
                         }
                     ]
                 },
                 {
                     "widgettype": "VBox",
-                    "options": {
-                        "css": "card",
-                        "padding": "16px 24px",
-                        "cursor": "pointer"
-                    },
-                    "binds": [
-                        {
-                            "wid": "self",
-                            "event": "click",
-                            "actiontype": "urlwidget",
-                            "target": "app.llmage_content",
-                            "options": {
-                                "url": "{{entire_url('/llmage/llm')}}"
-                            },
-                            "mode": "replace"
-                        }
-                    ],
-                    "subwidgets": [
-                        {
-                            "widgettype": "Title5",
-                            "options": {
-                                "text": "模型配置",
-                                "fontWeight": "600"
-                            }
-                        },
-                        {
-                            "widgettype": "Text",
-                            "options": {
-                                "text": "管理 LLM 模型的API配置与供应商映射",
-                                "fontSize": "12px"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "widgettype": "VBox",
-                    "options": {
-                        "css": "card",
-                        "padding": "16px 24px",
-                        "cursor": "pointer"
-                    },
-                    "binds": [
-                        {
-                            "wid": "self",
-                            "event": "click",
-                            "actiontype": "urlwidget",
-                            "target": "app.llmage_content",
-                            "options": {
-                                "url": "{{entire_url('/llmage/failed_accounting.ui')}}"
-                            },
-                            "mode": "replace"
-                        }
-                    ],
-                    "subwidgets": [
-                        {
-                            "widgettype": "Title5",
-                            "options": {
-                                "text": "记账失败记录",
-                                "fontWeight": "600"
-                            }
-                        },
-                        {
-                            "widgettype": "Text",
-                            "options": {
-                                "text": "查看和检索调用计费失败记录",
-                                "fontSize": "12px"
-                            }
-                        }
-                    ]
+                    "id": "llmage_content"
                 }
             ]
-        },
-        {
-            "widgettype": "VBox",
-            "id": "llmage_content",
-            "css": "filler",
-            "options": {
-                "width": "100%",
-                "padding": "0 24px",
-                "overflowY": "auto"
-            }
         }
     ]
 }