fix: 修改样式

Gallery/CMakeLists.txt

@@ -164,6 +164,7 @@ set(RESOURCES_FILES
     res/image/icons/u.png
     res/image/icons/gc.png
     res/image/icons/mime.png
+    res/image/antlogo.png
     Gallery_zh_CN.qm
     Gallery_en_US.qm
 )
@@ -248,6 +249,10 @@ qt_add_qml_module(${PROJECT_NAME}
     QML_FILES res/qml/window/SimTransportWindow.qml
     QML_FILES res/qml/screen/SimTransportScreen.qml
     QML_FILES res/qml/component/LeftResource.qml
+    QML_FILES res/qml/component/MyTabView.qml
+    QML_FILES res/qml/component/MyTabButton.qml
+    QML_FILES res/qml/component/MyTabBar.qml
+    QML_FILES res/qml/component/base/IconDropdownButton.qml
 )
 
 if (NOT CMAKE_SYSTEM_NAME STREQUAL "Emscripten")

Gallery/Gallery_en_US.ts

@@ -138,7 +138,7 @@
 <context>
     <name>LeftProjectMenu</name>
     <message>
-        <location filename="res/qml/component/LeftProjectMenu.qml" line="132"/>
+        <location filename="res/qml/component/LeftProjectMenu.qml" line="176"/>
         <source>Key</source>
         <translation type="unfinished"></translation>
     </message>
@@ -738,22 +738,22 @@
 <context>
     <name>MyAppBar</name>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="106"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="213"/>
         <source>Minimized</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="123"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="230"/>
         <source>Restore</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="123"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="230"/>
         <source>Maximized</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="153"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="260"/>
         <source>Close</source>
         <translation type="unfinished"></translation>
     </message>
@@ -1961,6 +1961,64 @@
         <translation type="unfinished"></translation>
     </message>
 </context>
+<context>
+    <name>ToolBar</name>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="20"/>
+        <source>File</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="21"/>
+        <source>New...</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="22"/>
+        <source>Open...</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="23"/>
+        <source>Save</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="26"/>
+        <source>Quit</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="29"/>
+        <source>Search</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="35"/>
+        <source>Disable</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="39"/>
+        <source>Check</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="42"/>
+        <source>Save As...</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="43"/>
+        <source>Doc</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="44"/>
+        <source>PDF</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>TreeDataGridController</name>
     <message>

Gallery/Gallery_zh_CN.ts

@@ -243,7 +243,7 @@
 <context>
     <name>LeftProjectMenu</name>
     <message>
-        <location filename="res/qml/component/LeftProjectMenu.qml" line="132"/>
+        <location filename="res/qml/component/LeftProjectMenu.qml" line="176"/>
         <source>Key</source>
         <translation type="unfinished">唯一值</translation>
     </message>
@@ -1069,22 +1069,22 @@
 <context>
     <name>MyAppBar</name>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="106"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="213"/>
         <source>Minimized</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="123"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="230"/>
         <source>Restore</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="123"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="230"/>
         <source>Maximized</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="res/qml/component/MyAppBar.qml" line="153"/>
+        <location filename="res/qml/component/MyAppBar.qml" line="260"/>
         <source>Close</source>
         <translation type="unfinished"></translation>
     </message>
@@ -2694,6 +2694,64 @@
         <translation type="vanished">一位热衷于烹饪实验的厨师。</translation>
     </message>
 </context>
+<context>
+    <name>ToolBar</name>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="20"/>
+        <source>File</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="21"/>
+        <source>New...</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="22"/>
+        <source>Open...</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="23"/>
+        <source>Save</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="26"/>
+        <source>Quit</source>
+        <translation type="unfinished">退出</translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="29"/>
+        <source>Search</source>
+        <translation type="unfinished">搜索</translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="35"/>
+        <source>Disable</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="39"/>
+        <source>Check</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="42"/>
+        <source>Save As...</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="43"/>
+        <source>Doc</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="res/qml/component/ToolBar.qml" line="44"/>
+        <source>PDF</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>TreeDataGridController</name>
     <message>

Gallery/res/qml/App.qml

@@ -23,7 +23,7 @@ Starter {
     Component.onCompleted: {
         R.windowIcon = R.resolvedUrl("res/image/logo.png")
         Global.starter = starter
-        Theme.darkMode = SettingsHelper.getDarkMode()
+        Theme.darkMode = 1 //SettingsHelper.getDarkMode()
         WindowRouter.routes = {
             "/": R.resolvedUrl("res/qml/window/MainPageWindow.qml"),
             "/icons": R.resolvedUrl("res/qml/window/PointIconListWindow.qml"),

Gallery/res/qml/component/ComAnalysisInfo.qml

@@ -5,6 +5,9 @@ import FluentUI.Controls
 import FluentUI.impl
 
 Item {
+    id: control
+    signal closeSim();
+
     anchors.fill: parent
     ListModel{
         id: tab_model
@@ -33,6 +36,15 @@ Item {
         }
     }
 
+    WindowResultLauncher{
+        id: iconResultLauncher
+        path: "/sim"
+        onResult:
+            (data)=>{
+                control.closeSim()
+            }
+    }
+
     StackLayout {
         currentIndex: bar.currentIndex
         anchors{

Gallery/res/qml/component/LeftMainMenuTab.qml

@@ -11,44 +11,38 @@ Item {
 
     signal clickResource(var data)
 
-    property var colors : [Colors.yellow,Colors.orange,Colors.red,Colors.magenta,Colors.purple,Colors.blue,Colors.teal,Colors.green]
+    signal lockItem(var data)
-
+    signal showItem(var data)
-    property var randomAccentColor: function(){
-        return colors[Math.floor(Math.random() * 8)]
-    }
 
     ListModel{
         id: tab_model
         ListElement{
             title: "元素"
-            accentColor: function(){
-                return colors[Math.floor(Math.random() * 8)]
-            }
         }
         ListElement{
             title: "资源"
-            accentColor: function(){
-                return colors[Math.floor(Math.random() * 8)]
-            }
         }
         ListElement{
             title: "蓝图"
-            accentColor: function(){
-                return colors[Math.floor(Math.random() * 8)]
-            }
         }
     }
 
-    TabBar {
+    MyTabBar {
         id: bar
         width: parent.width
         clip: true
+        palette.window: "green"
+        spacing: 20
         Repeater {
             model: tab_model
-            TabButton {
+            MyTabButton {
                 id: btn_tab
                 text: model.title
-                font.pointSize: 10
+                font.pointSize: 12
+                implicitHeight: 50
+                implicitWidth: 40
+                // topPadding: 30
+                palette.windowText: "#1B806A"
             }
         }
     }
@@ -79,6 +73,12 @@ Item {
             onClickItem: function(data) {
                 control.clickMenuItem(data)
             }
+            onLockItem: function(data) {
+                control.lockItem(data)
+            }
+            onShowItem: function(data) {
+                control.showItem(data)
+            }
         }
 
         // 资源面板
@@ -104,4 +104,8 @@ Item {
     function setMenuData(data) {
         com_menu.setMenuData(data)
     }
+
+    function deleteMenuData(data) {
+        com_menu.delMenuData(data)
+    }
 }

Gallery/res/qml/component/LeftProjectMenu.qml

@@ -12,6 +12,8 @@ Item {
     property var initData: []
 
     signal clickItem(var data)
+    signal lockItem(var data)
+    signal showItem(var data)
 
     FileTreeDataController{
         id: controller
@@ -86,8 +88,10 @@ Item {
                     }
                 }
                 onClicked: {
-                    control.current = __display
+                    if (!rowModel["lock"]) {
-                    control.clickItem(rowModel.cdata)
+                        control.current = __display
+                        control.clickItem(rowModel.cdata)
+                    }
                 }
                 Rectangle{
                     height: 18
@@ -100,6 +104,46 @@ Item {
                         left: parent.left
                     }
                 }
+
+                IconButton{
+                    id: btn_lock
+                   icon.name: rowModel["lock"] ? FluentIcons.graph_Lock : FluentIcons.graph_Unlock //graph_Lock
+                   icon.width: 15
+                   icon.height: 15
+                   anchors{
+                       verticalCenter: parent.verticalCenter
+                       right: parent.right
+                   }
+                   onClicked: {
+                       rowModel["lock"] = !rowModel["lock"]
+                       control.initData.forEach((v) => {
+                            if (v.id == rowModel["id"]) {
+                                v.lock = rowModel["lock"]
+                            }
+                       })
+                       control.lockItem(rowModel)
+                   }
+                }
+
+                IconButton{
+                    icon.name: rowModel["show"] ? FluentIcons.graph_RevealPasswordMedium : FluentIcons.graph_HWPJoin // FluentIcons.
+                    icon.width: 15
+                    icon.height: 15
+                    anchors{
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                        rightMargin: 35
+                    }
+                    onClicked: {
+                        rowModel["show"] = !rowModel["show"]
+                        control.initData.forEach((v) => {
+                             if (v.id == rowModel["id"]) {
+                                 v.show = rowModel["show"]
+                             }
+                        })
+                        control.showItem(rowModel)
+                    }
+                }
             }
 
             clip: true
@@ -158,13 +202,20 @@ Item {
     function setMenuData(data) {
         var tmp = initData.find((v) => v.id == data.id)
         if (!tmp) {
-            tmp = { id: data.id, key: data.title ? data.title : "未命名", height: 35, icon: "", cdata: data }
+            tmp = { id: data.id, key: data.title ? data.title : "未命名", height: 35, icon: "", cdata: data, lock: false, show: true }
             initData.push(tmp)
         } else {
             tmp.key = data.title
             tmp.cdata = data
         }
 
+        console.log(JSON.stringify(initData))
+
+        dataModel.sourceData = initData
+    }
+
+    function delMenuData(data) {
+        initData = initData.filter((v) => v.id != data.id)
         dataModel.sourceData = initData
     }
 }

Gallery/res/qml/component/LeftResource.qml

@@ -10,8 +10,6 @@ ColumnLayout {
 
     signal clickResource(var name)
 
-    anchors.fill: parent
-
     ColumnLayout{
         Layout.fillHeight: true
         Layout.fillWidth: true

Gallery/res/qml/component/MapContainer.qml

@@ -30,10 +30,10 @@ Item {
 
     ColumnLayout{
         spacing: 10
-        anchors.topMargin: 10
+        anchors.topMargin: 0
         anchors.bottomMargin: 10
         anchors.rightMargin: 10
-        anchors.leftMargin: 10
+        anchors.leftMargin: 0
         anchors.fill: parent
         implicitHeight: parent.height
 
@@ -53,7 +53,7 @@ Item {
             Layout.preferredWidth: 500
             Layout.preferredHeight: 60230
             id: webQues
-            url: "http://123.6.102.119:85/maptool/" // http://123.6.102.119:86/
+            url: "http://123.6.102.119:85/maptool/" // http://123.6.102.119:85/
             settings.localContentCanAccessRemoteUrls: true
             settings.localContentCanAccessFileUrls: false
             settings.pluginsEnabled: false

Gallery/res/qml/component/MyAppBar.qml

@@ -4,6 +4,8 @@ import QtQuick.Layouts
 import FluentUI.Controls
 import FluentUI.impl
 
+import Qt5Compat.GraphicalEffects
+
 Rectangle {
     id: control
     FluentUI.theme: Theme.of(control)
@@ -22,14 +24,14 @@ Rectangle {
         }
         return 0
     }
-    implicitHeight: 30
+    implicitHeight: 40
-    color: 'green'//Colors.transparent
+    color: "#202124" //Colors.transparent
     Component{
         id: comp_window_icon
         Image{
-            width: 18
+            width: 16
-            height: 18
+            height: 20
-            source: R.windowIcon
+            source: "qrc:/qt/qml/Gallery/res/image/antlogo.png" // R.windowIcon
         }
     }
     Item{
@@ -37,23 +39,24 @@ Rectangle {
         property int buttonWidth : 46
         property bool isRestore: Window.Maximized === Window.visibility || Window.FullScreen === Window.visibility
         function setHitTestVisible(id){
-            if(Window.window && Window.window instanceof FramelessWindow){
+            if(Window.window && Window.window instanceof MyFramelessWindow){
                 Window.window.setHitTestVisible(id)
             }
         }
     }
     Item{
         width: parent.width
-        height: 30
+        height: 40
         Row{
             id: layout_title
             anchors{
                 left: parent.left
-                right: layout_win_controls.left
+                // right: layout_win_controls.left
                 horizontalCenter: undefined
                 top: parent.top
                 bottom: parent.bottom
                 leftMargin: 10
+                topMargin: 2
             }
             spacing: 6
             state: Qt.platform.os
@@ -76,12 +79,116 @@ Rectangle {
                 anchors.verticalCenter: parent.verticalCenter
             }
             Label{
+                id: logoText
                 text: control.windowTitle
                 elide: Qt.ElideRight
                 font: Typography.bodyStrong
                 anchors.verticalCenter: parent.verticalCenter
+                visible: false
+            }
+            LinearGradient {
+                anchors.left: logoText.left
+                anchors.leftMargin: 22
+                anchors.top: logoText.top
+                height: logoText.height
+                width: logoText.width
+                source: logoText
+                start: Qt.point(0, 0)
+                end: Qt.point(0, logoText.height)
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: "#5BE49B" }
+                    GradientStop { position: 1.0; color: "#00A76F" }
+                }
             }
         }
+
+        RowLayout{
+            anchors.left: layout_title.left
+            anchors.leftMargin: logoText.width + 20
+            height: parent.height
+            width: parent.width - 160 - 150
+            AutoLoader{
+                Layout.fillHeight: true
+                sourceComponent: control.action
+            }
+            Rectangle{
+                color: "#292929"
+                Layout.preferredHeight: 34
+                Layout.preferredWidth: 34
+                radius: 5
+                Layout.leftMargin: 10
+                Layout.topMargin: 2
+                Image{
+                    source: "qrc:/qt/qml/Gallery/res/image/ico_home.png"
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onEntered: parent.color = "#000000"
+                    onExited: parent.color = "#292929"
+                    onClicked: {
+                        // control.clickNav("home", "")
+                    }
+                }
+            }
+
+            Rectangle{
+                Layout.preferredWidth: parent.width
+                Layout.preferredHeight: 40
+                color: 'transparent'
+                MyTabView{
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.top: parent.top
+                    anchors.topMargin: 5
+                    id: tab_view
+                    closeButtonVisibility: TabViewType.OnHover
+                    tabWidthBehavior: TabViewType.Equal
+                    addButtonVisibility: false
+                    Component.onCompleted: {
+                        newTab()
+                        newTab()
+                        newTab()
+                        newTab()
+                        newTab()
+                    }
+                    Component{
+                        id:com_page
+                        Rectangle{
+                            anchors.fill: parent
+                            color: "transparent"
+                        }
+                    }
+                    onClickNav: function(data) {
+                        //control.clickNav("other", data.argument.path)
+                    }
+                    onCloseTabed: function(index) {
+                        console.log("tab count=" + tab_view.count())
+                        //control.mapTabs[index.argument.path] = undefined
+                    }
+                    onCloseTabOk: {
+                        if (tab_view.count() > 0) {
+                            tab_view.choose(tab_view.count() - 1)
+                            var curt = tab_view.get_cur_tab()
+                            var uuid = curt.argument.path
+                            // control.clickNav("other", uuid)
+                        } else {
+                            // control.clickNav("home", "")
+                        }
+                    }
+                    function newTab(){
+                        tab_view.appendTab("qrc:/qt/qml/Gallery/res/image/ico_tab.png","耳字壕充换电站规划",com_page,"green")
+                    }
+                }
+            }
+
+            Component.onCompleted: {
+                d.setHitTestVisible(this)
+            }
+        }
+
         RowLayout{
             id: layout_win_controls
             spacing: 0

Gallery/res/qml/component/MyTabBar.qml

@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI.Controls
+import FluentUI.impl
+import QtQuick.Templates as T
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 0
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 20
+        preferredHighlightEnd: width - 40
+    }
+
+    // background: Rectangle {
+    //     height: 3
+    //     width: 30
+    //     anchors.bottom: parent.bottom
+
+    //     color: '#1B806A'
+    // }
+}

Gallery/res/qml/component/MyTabButton.qml

@@ -0,0 +1,44 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI.Controls
+import FluentUI.impl
+import QtQuick.Templates as T
+
+T.TabButton {
+    id: control
+
+    implicitWidth: implicitBackgroundWidth
+                        // Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                        //     implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: 6
+    spacing: 3
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: checked ? control.palette.windowText : control.palette.brightText
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
+        text: control.text
+        font: control.font
+        color: control.checked ? "#1B806A" : "#ffffff"
+    }
+
+    background: Rectangle {
+        anchors.bottom: parent.bottom
+        implicitHeight: 2
+        color: control.checked ? "#1B806A" : "transparent"
+    }
+}
+

Gallery/res/qml/component/MyTabView.qml

@@ -0,0 +1,276 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI.Controls
+import FluentUI.impl
+
+Item {
+    FluentUI.theme: Theme.of(control)
+    property int tabWidthBehavior : TabViewType.Equal
+    property int closeButtonVisibility : TabViewType.Always
+    property int itemWidth: 146
+    property bool addButtonVisibility: true
+    signal newPressed
+    signal closeTabed(var item)
+    signal closeTabOk()
+    signal clickNav(var item)
+    id:control
+    implicitHeight: height
+    implicitWidth: width
+    anchors.fill: {
+        if(parent)
+            return parent
+        return undefined
+    }
+    QtObject {
+        id: d
+        property int dragIndex: -1
+        property bool dragBehavior: false
+        property bool itemPress: false
+        property int maxEqualWidth: 240
+    }
+    MouseArea{
+        anchors.fill: parent
+        preventStealing: true
+    }
+    ListModel{
+        id:tab_model
+    }
+    IconButton{
+        id:btn_new
+        visible: addButtonVisibility
+        width: 34
+        height: 34
+        x:Math.min(tab_nav.contentWidth,tab_nav.width)
+        anchors.top: parent.top
+        icon.name:  FluentIcons.graph_Add
+        icon.width: 14
+        icon.height: 14
+        onClicked: {
+            newPressed()
+        }
+    }
+    ListView{
+        id:tab_nav
+        height: 34
+        orientation: ListView.Horizontal
+        anchors{
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            rightMargin: 34
+        }
+        interactive: false
+        model: tab_model
+        move: Transition {
+            NumberAnimation { properties: "x"; duration: 100; easing.type: Easing.OutCubic }
+            NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.OutCubic }
+        }
+        moveDisplaced: Transition {
+            NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.OutCubic}
+            NumberAnimation { properties: "y"; duration: 100;  easing.type: Easing.OutCubic }
+        }
+        clip: true
+        ScrollBar.horizontal: ScrollBar{
+            id: scroll_nav
+            policy: ScrollBar.AlwaysOff
+        }
+        delegate:  Item{
+            width: item_container.width
+            height: item_container.height
+
+            DropArea{
+                anchors.fill: parent
+                onEntered:
+                    (drag)=>{
+                        tab_model.move(drag.source.visualIndex, item_container.visualIndex,1)
+                    }
+            }
+            Control{
+                id:item_container
+                property int visualIndex: model.index
+                readonly property bool isCurrent: model.index === tab_nav.currentIndex
+                readonly property bool isNext: model.index-1 === tab_nav.currentIndex
+                readonly property bool isPrevious: model.index+1 === tab_nav.currentIndex
+                height: tab_nav.height
+                Drag.active: mouse_tab_item.drag.active
+                Drag.source: item_container
+                Drag.hotSpot.x: width/2
+                width: {
+                    if(tabWidthBehavior === TabViewType.Equal){
+                        return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
+                    }
+                    if(tabWidthBehavior === TabViewType.SizeToContent){
+                        return itemWidth
+                    }
+                    if(tabWidthBehavior === TabViewType.Compact){
+                        return hover_handler.hovered || item_btn_close.hovered || tab_nav.currentIndex === index  ? itemWidth : 41 + item_btn_close.width
+                    }
+                    return Math.max(Math.min(d.maxEqualWidth,tab_nav.width/tab_nav.count),41 + item_btn_close.width)
+                }
+                states: [
+                    State {
+                        when: mouse_tab_item.drag.active
+                        ParentChange {
+                            target: item_container
+                            parent: tab_nav
+                        }
+                        AnchorChanges {
+                            target: item_container
+                            anchors {
+                                horizontalCenter: undefined
+                                verticalCenter: undefined
+                            }
+                        }
+                    }
+                ]
+                MouseArea {
+                    id: mouse_tab_item
+                    anchors.fill: parent
+                    drag.target: item_container
+                    drag.axis: Drag.XAxis
+                    onClicked: {
+                        tab_nav.currentIndex = model.index
+                        clickNav(model)
+                    }
+                }
+                Rectangle{
+                    width: parent.width - 5
+                    height: parent.height
+                    radius: 6
+                    color: Theme.uncheckedInputColor(item_container,true,true,control.FluentUI.dark)
+                }
+                // TabBackgroundImpl{
+                //     width: item_container.width + 6*2
+                //     height: item_container.height
+                //     x: -6
+                //     visible: item_container.isCurrent
+                //     radius: 6
+                //     color: control.FluentUI.theme.res.solidBackgroundFillColorQuarternary
+                //     strokeColor: control.FluentUI.theme.res.dividerStrokeColorDefault
+                // }
+                Rectangle{
+                    radius: 6
+                    width: item_container.width - 5
+                    height: item_container.height
+                    visible: item_container.isCurrent
+                    color: control.FluentUI.theme.res.solidBackgroundFillColorQuarternary
+                }
+
+                RowLayout{
+                    spacing: 0
+                    height: parent.height
+                    Image{
+                        source: model.icon
+                        Layout.leftMargin: 10
+                        Layout.preferredWidth: 15
+                        Layout.preferredHeight: 15
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    Label{
+                        id:item_text
+                        text: model.text
+                        Layout.leftMargin: 10
+                        visible: {
+                            if(tabWidthBehavior === TabViewType.Equal){
+                                return true
+                            }
+                            if(tabWidthBehavior === TabViewType.SizeToContent){
+                                return true
+                            }
+                            if(tabWidthBehavior === TabViewType.Compact){
+                                return hover_handler.hovered || item_btn_close.hovered || tab_nav.currentIndex === index
+                            }
+                            return false
+                        }
+                        Layout.preferredWidth: visible?item_container.width - 41 - item_btn_close.width:0
+                        elide: Text.ElideRight
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                }
+                IconButton{
+                    id:item_btn_close
+                    icon.name: FluentIcons.graph_ChromeClose
+                    icon.width: 10
+                    icon.height: 10
+                    width: visible ? 24 : 0
+                    height: 24
+                    visible: {
+                        if(closeButtonVisibility === TabViewType.Never)
+                            return false
+                        if(closeButtonVisibility === TabViewType.OnHover)
+                            return hover_handler.hovered || item_btn_close.hovered
+                        return true
+                    }
+                    anchors{
+                        right: parent.right
+                        rightMargin: 10
+                        verticalCenter: parent.verticalCenter
+                    }
+                    onClicked: {
+                        closeTabed(model)
+                        tab_model.remove(index)
+                        closeTabOk()
+                    }
+                }
+                // Rectangle{
+                //     width: 1
+                //     height: 16
+                //     anchors{
+                //         verticalCenter: parent.verticalCenter
+                //         right: parent.right
+                //     }
+                //     visible: !item_container.isCurrent && !item_container.isPrevious
+                //     color: control.FluentUI.theme.res.dividerStrokeColorDefault
+                // }
+                HoverHandler{
+                    id: hover_handler
+                }
+            }
+        }
+        WheelHandler{
+            onWheel:
+                (wheel)=>{
+                    if (wheel.angleDelta.y > 0) scroll_nav.decrease()
+                    else scroll_nav.increase()
+                }
+        }
+    }
+    Item{
+        id:container
+        anchors{
+            top: tab_nav.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        Repeater{
+            model:tab_model
+            AutoLoader{
+                property var argument: model.argument
+                anchors.fill: parent
+                sourceComponent: model.page
+                visible: tab_nav.currentIndex === index
+            }
+        }
+    }
+    function createTab(icon,text,page,argument={}){
+        return {icon:icon,text:text,page:page,argument:argument}
+    }
+    function appendTab(icon,text,page,argument){
+        tab_model.append(createTab(icon,text,page,argument))
+    }
+    function setTabList(list){
+        tab_model.clear()
+        tab_model.append(list)
+    }
+    function count(){
+        return tab_nav.count
+    }
+    function choose(index) {
+        tab_nav.currentIndex = index
+    }
+    function get_cur_tab() {
+        return tab_model.get(tab_nav.currentIndex)
+    }
+}

Gallery/res/qml/component/RightComponentInfo.qml

@@ -15,6 +15,8 @@ Item {
     signal lineInfoChanged(var info)
     signal polyInfoChanged(var info)
 
+    signal closeSim()
+
     property var colors : [Colors.yellow,Colors.orange,Colors.red,Colors.magenta,Colors.purple,Colors.blue,Colors.teal,Colors.green]
 
     property var randomAccentColor: function(){
@@ -150,6 +152,9 @@ Item {
             ComAnalysisInfo{
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                onCloseSim: function() {
+
+                }
             }
         }
 

Gallery/res/qml/component/ToolBar.qml

@@ -8,124 +8,174 @@ import FluentUI.impl
 Item {
     id: control
     signal clickButton(var item)
-    width: parent.width
+    anchors.topMargin: 0
-    anchors.topMargin: 26
     anchors.leftMargin: 10
-    RowLayout {
+    Rectangle{
-        width: parent.width
+        anchors.fill: parent
-        height: 50
+        color: '#272727'
-        spacing: 5
 
-        // IconButton{
+        Menu {
-        //     Layout.leftMargin: 5
+            id:menu
-        //     onClicked: {
+            width: 140
-        //         console.log("click")
+            title: qsTr("File")
-        //     }
+            Action { text: qsTr("New...")}
-        // }
+            Action { text: qsTr("Open...") }
-
+            Action { text: qsTr("Save") }
-        Rectangle{
+            MenuSeparator { }
-            Layout.minimumWidth: parent.width / 3
+            MenuItem{
-            Layout.preferredHeight: 20
+                text: qsTr("Quit")
-            Layout.leftMargin: 10
+            }
-            color: "transparent"
+            MenuItem{
-
+                text: qsTr("Search")
-            Breadcrumb {
+                icon.name: FluentIcons.graph_Zoom
-                id: breadCrumb
+                icon.width: 14
-                items: [{title: "充换电"}, {title: "耳字壕充换电站规划"}]
+                icon.height: 14
-                width: parent.width
+            }
-                anchors.verticalCenter: parent.verticalCenter
+            Action {
-                onClickItem: (model)=>{
+                text: qsTr("Disable")
-                    showSuccess(model.title)
+                enabled:false
-                }
+            }
+            MenuSeparator { }
+            Action { text: qsTr("Check");checkable: true;checked: true}
+            Menu{
+                width: 140
+                title: qsTr("Save As...")
+                Action { text: qsTr("Doc") }
+                Action { text: qsTr("PDF") }
             }
         }
 
-        Rectangle{
+        RowLayout {
-            Layout.fillWidth: true
+            width: parent.width
-            Layout.preferredHeight: 30
+            height: parent.height
-            color: "transparent"
+            spacing: 5
 
-            RowLayout{
+            IconButton{
-                spacing: 10
+                icon.name: FluentIcons.graph_GlobalNavButton
+                icon.width: 16
+                icon.height: 16
+                topPadding: 10 //bottomPadding
+                Layout.leftMargin: 5
+                Layout.preferredHeight: 30
+                Layout.preferredWidth: 30
+                onClicked: {
+                    console.log("click")
+                    menu.popup()
+                }
+            }
 
-                ToggleButton{
+            Rectangle{
-                    Layout.fillWidth: false
+                Layout.minimumWidth: parent.width / 3
-                    text: "点"
+                Layout.preferredHeight: parent.height
-                    onClicked: {
+                Layout.leftMargin: 10
-                        control.clickButton("StartAddPoint")
+                color: "transparent"
+
+                Breadcrumb {
+                    id: breadCrumb
+                    items: [{title: "充换电"}, {title: "耳字壕充换电站规划"}]
+                    width: parent.width
+                    anchors.verticalCenter: parent.verticalCenter
+                    onClickItem: (model)=>{
+                        showSuccess(model.title)
                     }
                 }
-                // ToggleButton{
+            }
-                //     Layout.fillWidth: false
+
-                //     text: "线"
+            Rectangle{
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                color: "transparent"
+
+                RowLayout{
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+
+                    spacing: 10
+
+                    ToggleButton{
+                        // FluentIcons.graph_GripperResize    FluentIcons.graph_Stop
+                    }
+
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "点"
+                        onClicked: {
+                            control.clickButton("StartAddPoint")
+                        }
+                    }
+                    // ToggleButton{
+                    //     Layout.fillWidth: false
+                    //     text: "线"
+                    //     onClicked: {
+                    //         control.clickButton("StartAddPoint")
+                    //     }
+                    // }
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "曲线"
+                        onClicked: {
+                            control.clickButton("StartCurve")
+                        }
+                    }
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "面"
+                        onClicked: {
+                            control.clickButton("StartAddPoly")
+                        }
+                    }
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "三角"
+                        onClicked: {
+                            control.clickButton("StartTriangle")
+                        }
+                    }
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "圆"
+                        onClicked: {
+                            control.clickButton("StartCircle")
+                        }
+                    }
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "椭圆"
+                        onClicked: {
+                            control.clickButton("StartEllipse")
+                        }
+                    }
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "自由线"
+                        onClicked: {
+                            control.clickButton("StartFreeLine")
+                        }
+                    }
+                    ToggleButton{
+                        Layout.fillWidth: false
+                        text: "自由面"
+                        onClicked: {
+                            control.clickButton("StartFreeSurface")
+                        }
+                    }
+                }
+            }
+
+            Rectangle{
+                Layout.preferredWidth: 100
+                Layout.preferredHeight: 30
+                color: "transparent"
+                // Button{
+                //     text: "运输仿真"
+                //     highlighted: true
                 //     onClicked: {
-                //         control.clickButton("StartAddPoint")
+                //         WindowRouter.go("/sim",{type:"WindowType.Standard"})
                 //     }
                 // }
-                ToggleButton{
-                    Layout.fillWidth: false
-                    text: "曲线"
-                    onClicked: {
-                        control.clickButton("StartCurve")
-                    }
-                }
-                ToggleButton{
-                    Layout.fillWidth: false
-                    text: "面"
-                    onClicked: {
-                        control.clickButton("StartAddPoly")
-                    }
-                }
-                ToggleButton{
-                    Layout.fillWidth: false
-                    text: "三角"
-                    onClicked: {
-                        control.clickButton("StartTriangle")
-                    }
-                }
-                ToggleButton{
-                    Layout.fillWidth: false
-                    text: "圆"
-                    onClicked: {
-                        control.clickButton("StartCircle")
-                    }
-                }
-                ToggleButton{
-                    Layout.fillWidth: false
-                    text: "椭圆"
-                    onClicked: {
-                        control.clickButton("StartEllipse")
-                    }
-                }
-                ToggleButton{
-                    Layout.fillWidth: false
-                    text: "自由线"
-                    onClicked: {
-                        control.clickButton("StartFreeLine")
-                    }
-                }
-                ToggleButton{
-                    Layout.fillWidth: false
-                    text: "自由面"
-                    onClicked: {
-                        control.clickButton("StartFreeSurface")
-                    }
-                }
             }
         }
 
-        Rectangle{
-            Layout.preferredWidth: 100
-            Layout.preferredHeight: 30
-            color: "transparent"
-            // Button{
-            //     text: "运输仿真"
-            //     highlighted: true
-            //     onClicked: {
-            //         WindowRouter.go("/sim",{type:"WindowType.Standard"})
-            //     }
-            // }
-        }
     }
 }
 

Gallery/res/qml/component/base/IconDropdownButton.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.15
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI.Controls
+import FluentUI.impl
+
+Rectangle {
+    id: control
+    anchors.fill: parent
+    color: "transparent"
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: parent.color = "#000000"
+        onExited: parent.color = "transparent"
+        onClicked: {
+           console.log("123123")
+        }
+    }
+}

Gallery/res/qml/screen/MainPageScreen.qml

@@ -15,25 +15,28 @@ Item {
     property var right_type: "point"
 
     ColumnLayout {
-        spacing: 20
+        spacing: 3
         width: parent.width
         height: parent.height
 
-        TitleBar{
+        // TitleBar{
-            id: title_bar
+        //     id: title_bar
-            Layout.preferredWidth: parent.width
+        //     Layout.preferredWidth: parent.width
-            onClickNav: (type, params) => {
+        //     onClickNav: (type, params) => {
-                if (type == "home") {
+        //         if (type == "home") {
-                    control.is_home = true
+        //             control.is_home = true
-                } else if (type == "other") {
+        //         } else if (type == "other") {
-                    control.is_home = false
+        //             control.is_home = false
-                    map_container.run_js("QT_Refresh", params)
+        //             map_container.run_js("QT_Refresh", params)
-                }
+        //         }
-                // nav_main.visitUrl("/")
+        //         // nav_main.visitUrl("/")
-            }
+        //     }
-        }
+        // }
 
         ToolBar{
+            Layout.fillWidth: true
+            Layout.preferredHeight: 40
+            Layout.topMargin: 3
             visible: !control.is_home
             Layout.preferredWidth: parent.width
             onClickButton: (fun) => {
@@ -45,14 +48,14 @@ Item {
         }
 
         RowLayout{
-            Layout.topMargin: 30
+            Layout.topMargin: 1
             Layout.fillWidth: true
             Layout.fillHeight: true
             Rectangle{
                 visible: control.is_home
                 Layout.fillHeight: true
                 Layout.preferredWidth: 250
-                color: "transparent"
+                color: "green"
 
                 // 主页的菜单。
                 LeftMainMenu{
@@ -99,7 +102,7 @@ Item {
             LeftMainMenuTab{
                 id: left_tab
                 visible: !control.is_home
-                Layout.preferredWidth: 200
+                Layout.preferredWidth: 230
                 Layout.preferredHeight: parent.height
                 Layout.leftMargin: 10
 
@@ -117,7 +120,17 @@ Item {
                 onClickResource: function(data) {
                     map_container.run_js("QT_LoadResource", [data.type, data.title])
                     // 需要更新元素tab数据
+                }
 
+                onLockItem: function(data) {
+                    map_container.run_js("QT_LockItem", [data.id, data.lock])
+                }
+
+                onShowItem: function(data) {
+                    map_container.run_js("QT_SetShowItem", [data.id, data.show])
+
+                    com_info.reset_info()
+                    control.show_right = false
                 }
             }
 
@@ -159,6 +172,10 @@ Item {
                         } else if (data.type == "resource") {
                             // 资源类的没有右侧面板
                             left_tab.setMenuData(data.data)
+                        } else if (data.type == "delete") {
+                            // 删除左侧菜单，关闭右侧面板
+                            left_tab.deleteMenuData(data.data)
+                            control.show_right = false
                         }
                     }
                 }

Gallery/res/qml/window/MainPageWindow.qml

@@ -6,9 +6,9 @@ import FluentUI.impl
 import Gallery
 import "../component"
 
-FramelessWindow {
+MyFramelessWindow {
     id: window
-    title: "Antsev Studio"
+    title: "AntsEV Studio"
     width: 1200
     height: 700
     visible: true

Gallery/src/main.cpp

@@ -15,9 +15,12 @@ Q_IMPORT_QML_PLUGIN(FluentUIPlugin)
 #endif
 
 int main(int argc, char *argv[]) {
-    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
+    // QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
     QtWebEngineQuick::initialize();
-    // QQuickWindow::setGraphicsApi(QSGRendererInterface::GraphicsApi::OpenGL);
+    QQuickWindow::setGraphicsApi(QSGRendererInterface::GraphicsApi::OpenGL);
+    // qputenv("QTWEBENGINE_CHROMIUM_FLAGS", "--ignore-gpu-blacklist --enable-gpu --vsync-interval=7 --max-gum-fps='144'");
+    // qputenv("QTWEBENGINE_CHROMIUM_FLAGS", "--disable-frame-rate-limit");
+
     qputenv("QT_QUICK_CONTROLS_CONF", ":/qt/qml/Gallery/qtquickcontrols2.conf");
     QGuiApplication::setOrganizationName(PROJECT_COMPANY);
     QGuiApplication::setOrganizationDomain(PROJECT_DOMAIN);