feat✨: 增加HomePage的页面内容

CMakeLists.txt

@@ -30,6 +30,9 @@ qt_add_qml_module(appESP32_upper
         QML_FILES QML/pages/CmdPage.qml
         QML_FILES QML/pages/PlotPage.qml
         QML_FILES QML/pages/OTAPage.qml
+        QML_FILES QML/components/IconInfoLabel.qml
+        QML_FILES QML/components/HomePageConnectStateInfo.qml
+        QML_FILES
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

Main.qml

@@ -10,6 +10,9 @@ Window {
     minimumHeight: 600
     minimumWidth: 800
     // color: "green"
+    GlobalProperties {
+        id: id_gp
+    }
 
     MainPage {
         id: id_home_page

QML/components/HomePageConnectStateInfo.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.15
+import QtQuick.Layouts
+import QtQuick.Controls
+import ESP32_upper
+
+Item {
+    anchors.fill: parent
+    Rectangle{
+        id: id_home_page_csi_root
+        height: parent.height
+        width: parent.width
+        RowLayout {
+            spacing : 2
+            height: parent.height
+            width: parent.width
+            Text {
+                Layout.preferredWidth: 100
+                text: "连接状态："
+                font.pixelSize: id_gp.font_info_pixel_size
+            }
+
+
+            Text {
+                Layout.preferredWidth: 100
+                id: id_text_home_page_connet_state
+                text: "未连接"
+                font.pixelSize: id_gp.font_info_pixel_size
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+                opacity: 0
+            }
+
+            Button {
+                Layout.preferredWidth: 100
+                text: "重新连接"
+                hoverEnabled: false
+                font.pixelSize: id_gp.font_info_pixel_size
+                background: Rectangle { // 自定义背景
+                    color: control.pressed ? "lightblue" : "blue"
+                    border.color: "black"
+                    radius: 10
+                }
+                onClicked: {
+                    console.log("press butn")
+                }
+            }
+
+            Rectangle {
+                Layout.preferredWidth: 10
+                opacity: 0
+            }
+
+        }
+    }
+}

QML/components/IconInfoLabel.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.15
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import ESP32_upper
+
+Item {
+    anchors.fill: parent
+    Rectangle {
+        color: "#F00000"
+        radius: 5
+        height: parent.height
+        RowLayout {
+            spacing: 20
+            height: parent.height
+            Image {
+                Layout.preferredWidth: parent.height
+                Layout.preferredHeight: parent.height
+                id:id_svg_icon_info_lb
+                source: "qrc:/assets/img/terminal-box-fill.svg"
+                smooth: true // 使图片平滑缩放
+                asynchronous: true // 异步加载图片
+            }
+
+            // 使用 ColorOverlay 修改 SVG 颜色
+            ColorOverlay {
+                anchors.fill: id_svg_icon_info_lb
+                source: id_svg_icon_info_lb
+                color: id_gp.left_menu_non_lighlight_color // 修改后的 SVG 图片颜色
+            }
+
+            Text {
+                text: "芯片类型:"
+                font.pixelSize: id_gp.font_info_pixel_size
+            }
+
+            Text {
+                id: id_comp_ico_info_lb
+                text: "未确认"
+                font.pixelSize: id_gp.font_info_pixel_size
+            }
+        }
+    }
+}

QML/components/LeftMenu.qml

@@ -5,9 +5,6 @@ import Qt5Compat.GraphicalEffects
 import ESP32_upper 1.0
 
 Item {
-    GlobalProperties {
-        id: global_properties
-    }
 
     Component {
         id: contactDelegate
@@ -17,31 +14,31 @@ Item {
             anchors.left: parent.left // 靠父组件左边
             anchors.leftMargin: 10 // 左边距20像素
             radius: 5
-            color: global_properties.left_menu_non_lighlight_color
+            color: id_gp.left_menu_non_lighlight_color
             MouseArea {
                 id: mouseArea
                 anchors.fill: parent
                 hoverEnabled: true
                 onClicked: {
                     // id_view.view.currentIndex = index
-                    global_properties.left_menu_index_last = global_properties.left_menu_index_now
+                    id_gp.left_menu_index_last = id_gp.left_menu_index_now
-                    global_properties.left_menu_index_now = index
+                    id_gp.left_menu_index_now = index
                     id_view.currentIndex = index
                     id_layout_right_panel.currentIndex = index
-                    // console.log("left_menu_index", global_properties.left_menu_index_now)
+                    // console.log("left_menu_index", id_gp.left_menu_index_now)
                 }
 
                 onEntered: {
-                    if (index != global_properties.left_menu_index_now) {
+                    if (index != id_gp.left_menu_index_now) {
-                        id_view.itemAtIndex(index).color = global_properties.left_menu_focus_color
+                        id_view.itemAtIndex(index).color = id_gp.left_menu_focus_color
                     }
                     id_lm_tooltip_text.text = name;
                     id_lm_tooltip.visible = true;
                 }
 
                 onExited: {
-                    if (index != global_properties.left_menu_index_now) {
+                    if (index != id_gp.left_menu_index_now) {
-                        id_view.itemAtIndex(index).color = global_properties.left_menu_non_lighlight_color
+                        id_view.itemAtIndex(index).color = id_gp.left_menu_non_lighlight_color
                     }
                     id_lm_tooltip.visible = false;
                 }
@@ -63,7 +60,7 @@ Item {
                     ColorOverlay {
                         anchors.fill: svgIMG
                         source: svgIMG
-                        color: global_properties.left_menu_icon_color // 修改后的 SVG 图片颜色
+                        color: id_gp.left_menu_icon_color // 修改后的 SVG 图片颜色
                     }
                 }
 
@@ -110,17 +107,17 @@ Item {
             clip : true
             snapMode: ListView.SnapToItem
             onCurrentIndexChanged: {
-                // console.log("2 left_menu_index", global_properties.left_menu_index_now)
+                // console.log("2 left_menu_index", id_gp.left_menu_index_now)
-                itemAtIndex(global_properties.left_menu_index_now).color = global_properties.left_menu_lighlight_color
+                itemAtIndex(id_gp.left_menu_index_now).color = id_gp.left_menu_lighlight_color
-                itemAtIndex(global_properties.left_menu_index_last).color = global_properties.left_menu_non_lighlight_color
+                itemAtIndex(id_gp.left_menu_index_last).color = id_gp.left_menu_non_lighlight_color
             }
 
             Component.onCompleted: {
                 id_view.currentIndex = id_view.count
-                global_properties.left_menu_index_last = id_view.count
+                id_gp.left_menu_index_last = id_view.count
-                global_properties.left_menu_index_now = 0
+                id_gp.left_menu_index_now = 0
                 id_view.currentIndex = 0
-                console.log("complete at ", global_properties.left_menu_index_now)
+                console.log("complete at ", id_gp.left_menu_index_now)
             }
         }
 

QML/models/GlobalProperties.qml

@@ -5,8 +5,9 @@ Item {
     property int left_menu_index_now: 0
     property int left_menu_index_last: 0
     property string left_menu_lighlight_color: "#FF00FF"
-    property string left_menu_non_lighlight_color: "#FFFFFF"
+    property string left_menu_non_lighlight_color: "#00FF00"
     property string left_menu_focus_color: "#FAFA00"
     property string left_menu_icon_color: "#0d4e8b"
+    property int font_info_pixel_size: 20
 
 }

QML/pages/HomePage.qml

@@ -1,12 +1,86 @@
 import QtQuick 2.15
+import QtQuick.Layouts
+import ESP32_upper 1.0
 
 Item {
+    anchors.fill: parent
+    ColumnLayout {
+        width: parent.width
+        height: parent.height
+        spacing: 2
+        Rectangle {
+            // chip type
+            Layout.preferredWidth: id_right_panel.width
+            Layout.preferredHeight: 60
+            color: "red"
+            // 主要的窗口内容容器
+            IconInfoLabel{        }
+        }
+        Rectangle {
+            // version info
+            Layout.preferredWidth: id_right_panel.width
+            Layout.preferredHeight: 60
+            color: "yellow"
+            RowLayout {
+                height: parent.height
+                spacing: 10
                 Text {
-        anchors.centerIn: parent
+                    text: "版本号： 软件版本->"
-        id: id_lm_tooltip_text
+                    font.pixelSize: id_gp.font_info_pixel_size
-        text: "Home Page"
+                }
-        font.pixelSize: 20
+                Text {
-        color: "#0e0606"
+                    id: id_text_soft_ver
+                    text: "未获取"
+                    font.pixelSize: id_gp.font_info_pixel_size
+                }
+                Text {
+                    text: " 硬件版本->"
+                    font.pixelSize: id_gp.font_info_pixel_size
+                }
+                Text {
+                    id: id_text_hard_ver
+                    text: "未获取"
+                    font.pixelSize: id_gp.font_info_pixel_size
+                }
+            }
+        }
+
+        Rectangle {
+            // software build time
+            Layout.preferredWidth: id_right_panel.width
+            Layout.preferredHeight: 60
+            color: "green"
+            RowLayout {
+                height: parent.height
+                spacing: 10
+                Text {
+                    text: "固件编译时间："
+                    font.pixelSize: id_gp.font_info_pixel_size
+                }
+                Text {
+                    id: id_text_firm_build_time
+                    text: "未获取"
+                    font.pixelSize: id_gp.font_info_pixel_size
+                }
+            }
+        }
+
+        Rectangle {
+            Layout.preferredWidth: id_right_panel.width
+            Layout.preferredHeight: 60
+            Layout.fillHeight: true
+            opacity: 0
+        }
+
+        Rectangle {
+            // connect state
+            Layout.preferredWidth: id_right_panel.width
+            Layout.preferredHeight: 60
+            color: "brown"
+            // 主要的窗口内容容器
+            HomePageConnectStateInfo{        }
+        }
+
     }
 
 }

QML/pages/MainPage.qml

@@ -21,6 +21,7 @@ Item {
         }
 
         Rectangle {
+            id: id_right_panel
             width: Window.width - id_left_panel.width
             height: Window.height
             color: "#0000FF"