From abf66e3435d9a8ec35e1e71a37cf21eb80a68e1c Mon Sep 17 00:00:00 2001 From: yumoqing Date: Tue, 11 Aug 2026 14:53:04 +0800 Subject: [PATCH] feat: add header bar with user/lang/theme controls + sidebar menu endpoint --- wwwroot/api/sidebar_menu.ui | 53 +++++++++ wwwroot/index.ui | 210 ++++++++++++++++++++++-------------- 2 files changed, 181 insertions(+), 82 deletions(-) create mode 100644 wwwroot/api/sidebar_menu.ui diff --git a/wwwroot/api/sidebar_menu.ui b/wwwroot/api/sidebar_menu.ui new file mode 100644 index 0000000..4b8eaaf --- /dev/null +++ b/wwwroot/api/sidebar_menu.ui @@ -0,0 +1,53 @@ +{ + "widgettype": "VBox", + "options": {"gap": "2px"}, + "subwidgets": [ + {"widgettype": "Text", "options": { + "otext": "主导航", + "cfontsize": 0.7, + "color": "#475569", + "padding": "4px 4px 8px 4px", + "fontWeight": "bold" + }}, + {"widgettype": "Tree", "id": "pccs_menu_tree", "options": { + "bgcolor": "transparent", + "color": "#94a3b8", + "color_selected": "#e2e8f0", + "bgcolor_selected": "#1e293b", + "fontSize": "0.9rem", + "indent": 16, + "data": [ + {"id": "dashboard", "label": "📊 概览", "icon": "dashboard", + "url": "{{entire_url('/pccs/index.ui')}}"}, + {"id": "pool", "label": "📦 算力池管理", "children": [ + {"id": "pool_list", "label": "算力池列表", + "url": "{{entire_url('/pcpool/compute_pool_list/index.ui')}}"}, + {"id": "node_list", "label": "算力节点列表", + "url": "{{entire_url('/pcpool/compute_node_list/index.ui')}}"} + ]}, + {"id": "cluster", "label": "🖥 集群管理", "children": [ + {"id": "cluster_list", "label": "集群列表", + "url": "{{entire_url('/pcc/cluster_list/index.ui')}}"}, + {"id": "cn_list", "label": "节点分配", + "url": "{{entire_url('/pcc/cluster_node_list/index.ui')}}"} + ]}, + {"id": "storage", "label": "💾 存储管理", "children": [ + {"id": "storage_server", "label": "存储服务器", + "url": "{{entire_url('/storage_mgr/storage_server_list/index.ui')}}"}, + {"id": "storage_export", "label": "存储导出", + "url": "{{entire_url('/storage_mgr/storage_export_list/index.ui')}}"}, + {"id": "storage_mount", "label": "存储挂载", + "url": "{{entire_url('/storage_mgr/storage_mount_list/index.ui')}}"} + ]}, + {"id": "image", "label": "🏗 镜像管理", "children": [ + {"id": "mirror_source", "label": "镜像源配置", + "url": "{{entire_url('/image_mgr/mirror_source_list/index.ui')}}"}, + {"id": "image_registry", "label": "镜像仓库", + "url": "{{entire_url('/image_mgr/image_registry_list/index.ui')}}"}, + {"id": "container_image", "label": "容器镜像", + "url": "{{entire_url('/image_mgr/container_image_list/index.ui')}}"} + ]} + ] + }} + ] +} diff --git a/wwwroot/index.ui b/wwwroot/index.ui index da14957..abdfb04 100644 --- a/wwwroot/index.ui +++ b/wwwroot/index.ui @@ -1,132 +1,178 @@ { - "widgettype": "HBox", + "widgettype": "VBox", "id": "pccs_root", - "options": {"width": "100%", "height": "100%"}, + "options": {"width": "100%", "height": "100%", "css": "filler"}, "subwidgets": [ { - "widgettype": "VBox", - "id": "pccs_sidebar", + "widgettype": "HBox", + "id": "pccs_header", "options": { - "width": "220px", - "height": "100%", - "bgcolor": "#0f172a", - "padding": "0", + "width": "100%", + "bgcolor": "#ffffff", + "borderBottom": "1px solid #e2e8f0", + "padding": "0 16px", + "height": "48px", + "alignItems": "center", "flexShrink": "0" }, "subwidgets": [ { - "widgettype": "VBox", - "options": { - "padding": "20px 16px", - "borderBottom": "1px solid #1e293b" - }, + "widgettype": "HBox", + "options": {"gap": "10px", "alignItems": "center"}, "subwidgets": [ {"widgettype": "Text", "options": { "otext": "PCCS", - "cfontsize": 1.3, + "cfontsize": 1.2, "fontWeight": "bold", - "color": "#e2e8f0" + "color": "#1e293b" }}, {"widgettype": "Text", "options": { "otext": "算力中心集群系统", - "cfontsize": 0.75, - "color": "#64748b" + "cfontsize": 0.8, + "color": "#94a3b8" }} ] }, + {"widgettype": "Filler"}, { - "widgettype": "VBox", - "id": "pccs_menu", - "options": {"padding": "8px", "gap": "2px"}, + "widgettype": "HBox", + "id": "header_controls", + "options": {"gap": "8px", "alignItems": "center"}, "subwidgets": [ - {"widgettype": "Text", "options": { - "otext": "主导航", - "cfontsize": 0.7, - "color": "#475569", - "padding": "8px 8px 4px 8px", - "fontWeight": "bold" - }} + { + "widgettype": "Button", + "id": "btn_theme", + "options": {"label": "🌓", "css": "small", "title": "切换主题"} + }, + { + "widgettype": "Button", + "id": "btn_lang", + "options": {"label": "🌐 中文", "css": "small", "title": "切换语言"} + }, + { + "widgettype": "urlwidget", + "id": "header_user", + "options": { + "url": "{{entire_url('/rbac/usermenu.ui')}}", + "method": "GET" + } + } ] } ] }, { - "widgettype": "VBox", - "id": "pccs_main", - "options": { - "css": "filler", - "bgcolor": "#f8fafc", - "overflow": "auto" - }, + "widgettype": "HBox", + "id": "pccs_body", + "options": {"css": "filler"}, "subwidgets": [ { "widgettype": "VBox", - "id": "dashboard_header", + "id": "pccs_sidebar", "options": { - "bgcolor": "#ffffff", - "borderBottom": "1px solid #e2e8f0", - "padding": "16px 24px" + "width": "220px", + "height": "100%", + "bgcolor": "#0f172a", + "padding": "0", + "flexShrink": "0", + "overflow": "auto" }, - "subwidgets": [ - {"widgettype": "Text", "options": { - "otext": "概览", - "cfontsize": 1.3, - "fontWeight": "bold", - "color": "#1e293b" - }}, - {"widgettype": "Text", "options": { - "otext": "算力中心资源总览", - "cfontsize": 0.85, - "color": "#64748b" - }} - ] - }, - { - "widgettype": "VBox", - "id": "dashboard_content", - "options": {"css": "filler", "padding": "24px", "gap": "20px", "overflow": "auto"}, "subwidgets": [ { - "widgettype": "HBox", - "options": {"gap": "16px"}, + "widgettype": "VBox", + "options": {"padding": "16px", "gap": "2px"}, "subwidgets": [ { "widgettype": "urlwidget", - "id": "card_pool", + "id": "sidebar_dashboard", "options": { - "url": "{{entire_url('/pcpool/api/pool_stats.dspy')}}", - "method": "GET" - } - }, - { - "widgettype": "urlwidget", - "id": "card_cluster", - "options": { - "url": "{{entire_url('/pcc/api/cluster_status_all.dspy')}}", + "url": "{{entire_url('/pccs/api/sidebar_menu.ui')}}", "method": "GET" } } ] + } + ] + }, + { + "widgettype": "VBox", + "id": "pccs_main", + "options": { + "css": "filler", + "bgcolor": "#f8fafc", + "overflow": "auto" + }, + "subwidgets": [ + { + "widgettype": "VBox", + "id": "dashboard_header", + "options": { + "bgcolor": "#ffffff", + "borderBottom": "1px solid #e2e8f0", + "padding": "16px 24px" + }, + "subwidgets": [ + {"widgettype": "Text", "options": { + "otext": "概览", + "cfontsize": 1.3, + "fontWeight": "bold", + "color": "#1e293b" + }}, + {"widgettype": "Text", "options": { + "otext": "算力中心资源总览", + "cfontsize": 0.85, + "color": "#64748b" + }} + ] }, { - "widgettype": "HBox", - "options": {"gap": "16px"}, + "widgettype": "VBox", + "id": "dashboard_content", + "options": {"css": "filler", "padding": "24px", "gap": "20px", "overflow": "auto"}, "subwidgets": [ { - "widgettype": "urlwidget", - "id": "card_storage", - "options": { - "url": "{{entire_url('/storage_mgr/api/storage_stats.dspy')}}", - "method": "GET" - } + "widgettype": "HBox", + "options": {"gap": "16px"}, + "subwidgets": [ + { + "widgettype": "urlwidget", + "id": "card_pool", + "options": { + "url": "{{entire_url('/pcpool/api/pool_stats.dspy')}}", + "method": "GET" + } + }, + { + "widgettype": "urlwidget", + "id": "card_cluster", + "options": { + "url": "{{entire_url('/pcc/api/cluster_status_all.dspy')}}", + "method": "GET" + } + } + ] }, { - "widgettype": "urlwidget", - "id": "card_image", - "options": { - "url": "{{entire_url('/image_mgr/api/image_stats.dspy')}}", - "method": "GET" - } + "widgettype": "HBox", + "options": {"gap": "16px"}, + "subwidgets": [ + { + "widgettype": "urlwidget", + "id": "card_storage", + "options": { + "url": "{{entire_url('/storage_mgr/api/storage_stats.dspy')}}", + "method": "GET" + } + }, + { + "widgettype": "urlwidget", + "id": "card_image", + "options": { + "url": "{{entire_url('/image_mgr/api/image_stats.dspy')}}", + "method": "GET" + } + } + ] } ] }