From ae61193454cf0af24f712b1c95dba0f23ea8a424 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Mon, 25 May 2026 18:27:32 +0800 Subject: [PATCH] feat: modernize llmage index.ui with standardized card navigation - Replace #1e3a5f hardcoded colors with modern #1E293B card style - Add 12px borderRadius to match design system - Add subtle #334155 borders for depth - Standardize SVG icons to 36px with 1.5 stroke width - Update colors: F1F5F9 text, 94A3B8 secondary descriptions - Fix entire_url paths to use /llmage/ module prefix - Add page header with Title2 + description text --- wwwroot/index.ui | 113 ++++++++++++++++++++++++++++++----------------- 1 file changed, 72 insertions(+), 41 deletions(-) diff --git a/wwwroot/index.ui b/wwwroot/index.ui index a2d8b90..86137d7 100644 --- a/wwwroot/index.ui +++ b/wwwroot/index.ui @@ -3,31 +3,54 @@ "options": { "width": "100%", "height": "100%", - "padding": "20px", - "spacing": 16 + "padding": "0" }, "subwidgets": [ { - "widgettype": "Title2", + "widgettype": "HBox", "options": { - "text": "LLM 模型管理", - "halign": "left" - } + "width": "100%", + "alignItems": "center", + "marginBottom": "24px" + }, + "subwidgets": [ + { + "widgettype": "Title2", + "options": { + "text": "LLM 模型管理", + "color": "#F1F5F9", + "fontWeight": "700" + } + }, + { + "widgettype": "Filler" + }, + { + "widgettype": "Text", + "options": { + "text": "模型配置、目录分类与调用监控", + "fontSize": "14px", + "color": "#64748B" + } + } + ] }, { "widgettype": "ResponsableBox", "options": { "gap": "16px", - "minWidth": "250px" + "minWidth": "250px", + "marginBottom": "24px" }, "subwidgets": [ { "widgettype": "VBox", "options": { - "bgcolor": "#1e3a5f", + "bgcolor": "#1E293B", "padding": "24px", - "cursor": "pointer", - "borderRadius": "8px" + "borderRadius": "12px", + "border": "1px solid #334155", + "cursor": "pointer" }, "binds": [ { @@ -45,25 +68,27 @@ { "widgettype": "Svg", "options": { - "svg": "", - "width": "40px", - "height": "40px" + "svg": "", + "width": "36px", + "height": "36px", + "marginBottom": "16px" } }, { "widgettype": "Title4", "options": { "text": "模型类型管理", - "color": "#ffffff", - "marginTop": "12px" + "color": "#F1F5F9", + "fontWeight": "600", + "marginBottom": "8px" } }, { "widgettype": "Text", "options": { - "text": "管理模型的分类和类型", - "color": "#90caf9", - "fontSize": "14px" + "text": "管理模型的分类目录和类型定义", + "fontSize": "14px", + "color": "#94A3B8" } } ] @@ -71,10 +96,11 @@ { "widgettype": "VBox", "options": { - "bgcolor": "#1e3a5f", + "bgcolor": "#1E293B", "padding": "24px", - "cursor": "pointer", - "borderRadius": "8px" + "borderRadius": "12px", + "border": "1px solid #334155", + "cursor": "pointer" }, "binds": [ { @@ -92,25 +118,27 @@ { "widgettype": "Svg", "options": { - "svg": "", - "width": "40px", - "height": "40px" + "svg": "", + "width": "36px", + "height": "36px", + "marginBottom": "16px" } }, { "widgettype": "Title4", "options": { - "text": "模型管理", - "color": "#ffffff", - "marginTop": "12px" + "text": "模型配置", + "color": "#F1F5F9", + "fontWeight": "600", + "marginBottom": "8px" } }, { "widgettype": "Text", "options": { - "text": "管理 LLM 模型配置", - "color": "#4caf50", - "fontSize": "14px" + "text": "管理 LLM 模型的API配置与供应商映射", + "fontSize": "14px", + "color": "#94A3B8" } } ] @@ -118,10 +146,11 @@ { "widgettype": "VBox", "options": { - "bgcolor": "#1e3a5f", + "bgcolor": "#1E293B", "padding": "24px", - "cursor": "pointer", - "borderRadius": "8px" + "borderRadius": "12px", + "border": "1px solid #334155", + "cursor": "pointer" }, "binds": [ { @@ -139,25 +168,27 @@ { "widgettype": "Svg", "options": { - "svg": "", - "width": "40px", - "height": "40px" + "svg": "", + "width": "36px", + "height": "36px", + "marginBottom": "16px" } }, { "widgettype": "Title4", "options": { "text": "记账失败记录", - "color": "#ffffff", - "marginTop": "12px" + "color": "#F1F5F9", + "fontWeight": "600", + "marginBottom": "8px" } }, { "widgettype": "Text", "options": { - "text": "查看和检索记账失败的记录", - "color": "#ef5350", - "fontSize": "14px" + "text": "查看和检索调用计费失败记录", + "fontSize": "14px", + "color": "#94A3B8" } } ]