update

example/qml/component/CodeExpander.qml

@@ -134,7 +134,9 @@ FluExpander{
                     "FluHttp",
                     "FluWatermark",
                     "FluTour",
-                    "FluQRCode"
+                    "FluQRCode",
+                    "FluTimeline",
+                    "FluChart"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/component/CustomWindow.qml

@@ -41,7 +41,7 @@ FluWindow {
             setWindowFixedSize(fixSize)
             title_bar.maximizeButton.visible = !fixSize
             if (blurBehindWindowEnabled)
-                window.backgroundVisible = false
+                window.background = undefined
             window.show()
         }
     }

example/qml/global/ItemsOriginal.qml

@@ -343,6 +343,18 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Tour.qml")
             }
         }
+        FluPaneItem{
+            title:"Timeline"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Chart"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
+            }
+        }
         FluPaneItem{
             title:"Http"
             onTap:{

example/qml/page/T_Chart.qml

@@ -0,0 +1,331 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Chart"
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluArea{
+        height: 370
+        width: 500
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'scatter'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'My First dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-1',
+                            borderColor: '#ff5555',
+                            backgroundColor: 'rgba(255,192,192,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }, {
+                            label: 'My Second dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-2',
+                            borderColor: '#5555ff',
+                            backgroundColor: 'rgba(192,192,255,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Scatter Chart - Multi Axis'
+                    },
+                    scales: {
+                        xAxes: [{
+                                position: 'bottom',
+                                gridLines: {
+                                    zeroLineColor: 'rgba(0,0,0,1)'
+                                }
+                            }],
+                        yAxes: [{
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'left',
+                                id: 'y-axis-1',
+                            }, {
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'right',
+                                reverse: true,
+                                id: 'y-axis-2',
+
+                                // grid line settings
+                                gridLines: {
+                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
+                                },
+                            }],
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'Dataset 1',
+                            backgroundColor: '#ff9999',
+                            stack: 'Stack 0',
+                            data: [
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor()
+                            ]
+                        }, {
+                            label: 'Dataset 2',
+                            backgroundColor: '#9999ff',
+                            stack: 'Stack 0',
+                            data: [
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor()
+                            ]
+                        }, {
+                            label: 'Dataset 3',
+                            backgroundColor: '#99ff99',
+                            stack: 'Stack 1',
+                            data: [
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor()
+                            ]
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'pie'
+            chartData: {return {
+                    datasets: [{
+                            data: [
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                            ],
+                            backgroundColor: [
+                                '#ffbbbb',
+                                '#ffddaa',
+                                '#ffffbb',
+                                '#bbffbb',
+                                '#bbbbff'
+                            ],
+                            label: 'Dataset 1'
+                        }],
+                    labels: [
+                        'Red',
+                        'Orange',
+                        'Yellow',
+                        'Green',
+                        'Blue'
+                    ]
+                }}
+            chartOptions: {return {maintainAspectRatio: false, responsive: true}}
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'Filled',
+                            fill: true,
+                            backgroundColor: 'rgba(192,222,255,0.3)',
+                            borderColor: 'rgba(128,192,255,255)',
+                            data: [
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor()
+                            ],
+                        }, {
+                            label: 'Dashed',
+                            fill: false,
+                            backgroundColor: 'rgba(0,0,0,0)',
+                            borderColor: '#009900',
+                            borderDash: [5, 5],
+                            data: [
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor()
+                            ],
+                        }, {
+                            label: 'Filled',
+                            backgroundColor: 'rgba(0,0,0,0)',
+                            borderColor: '#990000',
+                            data: [
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor(),
+                                randomScalingFactor()
+                            ],
+                            fill: false,
+                        }]
+                }
+            }
+
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Line Chart'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                    hover: {
+                        mode: 'nearest',
+                        intersect: true
+                    },
+                    scales: {
+                        xAxes: [{
+                                display: true,
+                                scaleLabel: {
+                                    display: true,
+                                    labelString: 'Month'
+                                }
+                            }],
+                        yAxes: [{
+                                display: true,
+                                scaleLabel: {
+                                    display: true,
+                                    labelString: 'Value'
+                                }
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/page/T_Home.qml

@@ -77,6 +77,7 @@ FluScrollablePage{
                         anchors.fill: parent
                         tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                         target: bg
+                        blurRadius : 40
                         targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
                     }
                     Rectangle{
@@ -85,14 +86,14 @@ FluScrollablePage{
                         color:{
                             if(FluTheme.dark){
                                 if(item_mouse.containsMouse){
-                                    return Qt.rgba(1,1,1,0.03)
+                                    return Qt.rgba(1,1,1,0.06)
                                 }
-                                return Qt.rgba(0,0,0,0)
+                                return Qt.rgba(0,0,0,0.03)
                             }else{
                                 if(item_mouse.containsMouse){
-                                    return Qt.rgba(0,0,0,0.03)
+                                    return Qt.rgba(0,0,0,0.09)
                                 }
-                                return Qt.rgba(0,0,0,0)
+                                return Qt.rgba(0,0,0,0.06)
                             }
                         }
                     }

example/qml/page/T_Timeline.qml

@@ -0,0 +1,157 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Timeline"
+
+    Component{
+        id:com_dot
+        Rectangle{
+            width: 16
+            height: 16
+            radius: 8
+            border.width: 4
+            border.color: FluColors.Red.dark
+        }
+    }
+
+    Component{
+        id:com_lable
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.lable
+            color: FluTheme.primaryColor.dark
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    showSuccess(modelData.lable)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_text
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.text
+            font.bold: true
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    showSuccess(modelData.text)
+                }
+            }
+        }
+    }
+
+    ListModel{
+        id:list_model
+        ListElement{
+            lable:"2013-09-01"
+            lableDelegate:()=>com_lable
+            textDelegate:()=>com_text
+            text:"考上家里蹲大学"
+        }
+        ListElement{
+            lable:"2017-07-01"
+            text:"大学毕业，在寝室打了4年LOL，没想到毕业还要找工作，瞬间蒙蔽~害"
+        }
+        ListElement{
+            lable:"2017-09-01"
+            text:"开始找工作，毕业即失业！回农村老家躺平，继承三亩良田！！"
+            dot:()=>com_dot
+        }
+        ListElement{
+            lable:"2018-02-01"
+            text:"玩了一年没钱，惨，出去找工作上班"
+        }
+        ListElement{
+            lable:"2018-03-01"
+            text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
+        }
+        ListElement{
+            lable:"2020-06-01"
+            text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
+        }
+        ListElement{
+            lable:"2022-08-01"
+            text:"额，被老板卖到甲方公司，走时老板还问我想不想去，我说：'哪里工资高就去哪里？'，老板：'无语'"
+        }
+        ListElement{
+            lable:"2023-02-28"
+            text:"开发FluentUI组件库"
+        }
+    }
+
+    RowLayout{
+        spacing: 20
+        Layout.topMargin: 20
+        FluTextBox{
+            id:text_box
+            text:"Technical testing 2015-09-01"
+        }
+        FluFilledButton{
+            text:"Append"
+            onClicked: {
+                list_model.append({text:text_box.text})
+            }
+        }
+        FluFilledButton{
+            text:"clear"
+            onClicked: {
+                list_model.clear()
+            }
+        }
+    }
+
+    RowLayout{
+        Layout.topMargin: 10
+        FluText{
+            text:"mode:"
+        }
+        FluDropDownButton{
+            id:btn_mode
+            Layout.preferredWidth: 100
+            text:"Alternate"
+            FluMenuItem{
+                text:"Left"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Left
+                }
+            }
+            FluMenuItem{
+                text:"Right"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Right
+                }
+            }
+            FluMenuItem{
+                text:"Alternate"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Alternate
+                }
+            }
+        }
+    }
+
+    FluTimeline{
+        id:time_line
+        Layout.fillWidth: true
+        mode: FluTimelineType.Alternate
+        model:list_model
+    }
+
+}

example/src/main.cpp

@@ -21,13 +21,13 @@ FRAMELESSHELPER_USE_NAMESPACE
     QGuiApplication::setOrganizationDomain("https://zhuzichu520.github.io");
     QGuiApplication::setApplicationName("FluentUI");
     QGuiApplication app(argc, argv);
-#ifdef Q_OS_WIN // 此设置仅在Windows下生效
-    FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder);
-#endif
     FramelessConfig::instance()->set(Global::Option::DisableLazyInitializationForMicaMaterial);
     FramelessConfig::instance()->set(Global::Option::CenterWindowBeforeShow);
     FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur);
     FramelessConfig::instance()->set(Global::Option::EnableBlurBehindWindow);
+#ifdef Q_OS_WIN // 此设置仅在Windows下生效
+    FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder);
+#endif
 #ifdef Q_OS_MACOS
     FramelessConfig::instance()->set(Global::Option::ForceNonNativeBackgroundBlur,false);
 #endif

src/CMakeLists.txt

@@ -36,7 +36,7 @@ foreach(filepath ${QML_PATHS})
 endforeach(filepath)
 
 #遍历所有资源文件
-file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp qmldir)
+file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.js qmldir)
 foreach(filepath ${RES_PATHS})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND resource_files ${filename})

src/Def.h

@@ -15,6 +15,17 @@ Q_ENUM_NS(DarkMode)
 QML_NAMED_ELEMENT(FluThemeType)
 }
 
+namespace FluTimelineType {
+Q_NAMESPACE
+enum Mode {
+    Left = 0x0000,
+    Right = 0x0001,
+    Alternate  = 0x0002,
+};
+Q_ENUM_NS(Mode)
+QML_NAMED_ELEMENT(FluTimelineType)
+}
+
 namespace FluPageType {
 Q_NAMESPACE
 enum LaunchMode {

src/FluApp.cpp

@@ -49,14 +49,14 @@ void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegist
         return;
     }
     QVariantMap properties;
-    properties.insert("route",route);
+    properties.insert("_route",route);
     if(fluRegister){
-        properties.insert("pageRegister",QVariant::fromValue(fluRegister));
+        properties.insert("_pageRegister",QVariant::fromValue(fluRegister));
     }
     properties.insert("argument",argument);
     QQuickWindow *view=nullptr;
     for (auto& pair : wnds) {
-        QString r =  pair->property("route").toString();
+        QString r =  pair->property("_route").toString();
         if(r == route){
             view = pair;
             break;

src/imports/FluentUI/Controls/FluChart.qml

@@ -0,0 +1,122 @@
+import QtQuick 2.13
+import "./../JS/Chart.js" as Chart
+
+Canvas {
+    id: control
+
+    property var jsChart: undefined
+    property string chartType
+    property var chartData
+    property var chartOptions
+    property double chartAnimationProgress: 0.1
+    property int animationEasingType: Easing.InOutExpo
+    property double animationDuration: 500
+    property var memorizedContext
+    property var memorizedData
+    property var memorizedOptions
+    property alias animationRunning: chartAnimator.running
+    signal animationFinished()
+    function animateToNewData()
+    {
+        chartAnimationProgress = 0.1;
+        jsChart.update();
+        chartAnimator.restart();
+    }
+    MouseArea {
+        id: event
+        anchors.fill: control
+        hoverEnabled: true
+        enabled: true
+        property var handler: undefined
+        property QtObject mouseEvent: QtObject {
+            property int left: 0
+            property int top: 0
+            property int x: 0
+            property int y: 0
+            property int clientX: 0
+            property int clientY: 0
+            property string type: ""
+            property var target
+        }
+        function submitEvent(mouse, type) {
+            mouseEvent.type = type
+            mouseEvent.clientX = mouse ? mouse.x : 0;
+            mouseEvent.clientY = mouse ? mouse.y : 0;
+            mouseEvent.x = mouse ? mouse.x : 0;
+            mouseEvent.y = mouse ? mouse.y : 0;
+            mouseEvent.left = 0;
+            mouseEvent.top = 0;
+            mouseEvent.target = control;
+
+            if(handler) {
+                handler(mouseEvent);
+            }
+
+            control.requestPaint();
+        }
+        onClicked:(mouse)=> {
+            submitEvent(mouse, "click");
+        }
+        onPositionChanged:(mouse)=> {
+            submitEvent(mouse, "mousemove");
+        }
+        onExited: {
+            submitEvent(undefined, "mouseout");
+        }
+        onEntered: {
+            submitEvent(undefined, "mouseenter");
+        }
+        onPressed:(mouse)=> {
+            submitEvent(mouse, "mousedown");
+        }
+        onReleased:(mouse)=> {
+            submitEvent(mouse, "mouseup");
+        }
+    }
+    PropertyAnimation {
+        id: chartAnimator
+        target: control
+        property: "chartAnimationProgress"
+        alwaysRunToEnd: true
+        to: 1
+        duration: control.animationDuration
+        easing.type: control.animationEasingType
+        onFinished: {
+            control.animationFinished();
+        }
+    }
+    onChartAnimationProgressChanged: {
+        control.requestPaint();
+    }
+    onPaint: {
+        if(control.getContext('2d') !== null && memorizedContext !== control.getContext('2d') || memorizedData !== control.chartData || memorizedOptions !== control.chartOptions) {
+            var ctx = control.getContext('2d');
+
+            jsChart =  Chart.build(ctx, {
+                type: control.chartType,
+                data: control.chartData,
+                options: control.chartOptions
+                });
+
+            memorizedData = control.chartData ;
+            memorizedContext = control.getContext('2d');
+            memorizedOptions = control.chartOptions;
+
+            control.jsChart.bindEvents(function(newHandler) {event.handler = newHandler;});
+
+            chartAnimator.start();
+        }
+
+        jsChart.draw(chartAnimationProgress);
+    }
+    onWidthChanged: {
+        if(jsChart) {
+            jsChart.resize();
+        }
+    }
+    onHeightChanged: {
+        if(jsChart) {
+            jsChart.resize();
+        }
+    }
+}

src/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -70,7 +70,6 @@ Button {
     contentItem: FluText {
         id:title
         text: control.text
-        horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         color: control.textColor
     }

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -67,8 +67,8 @@ Item {
             return data
         }
         function refreshWindow(){
-            Window.window.width = Window.window.width-1
-            Window.window.width = Window.window.width+1
+            Window.window.height = Window.window.height-1
+            Window.window.height = Window.window.height+1
         }
     }
     Component.onCompleted: {

src/imports/FluentUI/Controls/FluTimeline.qml

@@ -0,0 +1,298 @@
+import QtQuick
+import QtQuick.Controls
+import FluentUI
+
+Item{
+    property int mode: FluTimelineType.Left
+    property alias model: repeater.model
+    property color lineColor: Qt.rgba(240/255,240/255,240/255,1)
+    id:control
+    implicitWidth: 380
+    implicitHeight: layout_column.height
+    QtObject{
+        id:d
+        property bool isLeft: control.mode === FluTimelineType.Left
+        property bool isRight: control.mode === FluTimelineType.Right
+        property bool isAlternate: control.mode === FluTimelineType.Alternate
+        property bool hasLable: {
+            for(var i=0;i<model.count;i++){
+                var lable = model.get(i).lable
+                if(lable !== undefined && undefined !== ""){
+                    return true
+                }
+            }
+            return false
+        }
+        property string stateName : {
+            if(hasLable){
+                return "Center"
+            }
+            if(isRight){
+                return "Right"
+            }
+            if(isAlternate){
+                return "Center"
+            }
+            return "Left"
+        }
+    }
+    Rectangle{
+        id:rect_line
+        color: control.lineColor
+        height: parent.height
+        width: 2
+        state: d.stateName
+        states: [
+            State {
+                name: "Left"
+                AnchorChanges {
+                    target: rect_line
+                    anchors.left: control.left
+                }
+                PropertyChanges {
+                    target: rect_line
+                    anchors.leftMargin: 7
+                }
+            },
+            State {
+                name: "Right"
+                AnchorChanges {
+                    target: rect_line
+                    anchors.right: control.right
+                }
+                PropertyChanges {
+                    target: rect_line
+                    anchors.rightMargin: 7
+                }
+            },
+            State {
+                name: "Center"
+                AnchorChanges {
+                    target: rect_line
+                    anchors.horizontalCenter: control.horizontalCenter
+                }
+            }
+        ]
+    }
+    Component{
+        id:com_dot
+        Rectangle{
+            width: 16
+            height: 16
+            radius: 8
+            border.width: 4
+            color:FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+            border.color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+        }
+    }
+
+    Component{
+        id:com_lable
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.lable
+            color: FluTheme.primaryColor.dark
+        }
+    }
+
+    Component{
+        id:com_text
+
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: textAlignment
+            text: modelData.text
+        }
+
+    }
+
+    Column{
+        id:layout_column
+        spacing: 30
+        width: control.width
+        Repeater{
+            id:repeater
+            Item{
+                id:item_layout
+                width: layout_column.width
+                height: loader_text.height
+                Loader{
+                    id:item_loader
+                    state: d.stateName
+                    states: [
+                        State {
+                            name: "Left"
+                            AnchorChanges {
+                                target: item_loader
+                                anchors.left: item_layout.left
+                            }
+                        },
+                        State {
+                            name: "Right"
+                            AnchorChanges {
+                                target: item_loader
+                                anchors.right: item_layout.right
+                            }
+                        },
+                        State {
+                            name: "Center"
+                            AnchorChanges {
+                                target: item_loader
+                                anchors.horizontalCenter: item_layout.horizontalCenter
+                            }
+                        }
+                    ]
+                    sourceComponent: {
+                        if(model.dot)
+                            return model.dot()
+                        return com_dot
+                    }
+                }
+
+                Loader{
+                    property var modelData: control.model.get(index)
+                    property int textAlignment: state === "Right" ? Qt.AlignRight : Qt.AlignLeft
+                    id:loader_lable
+                    sourceComponent: {
+                        if(!modelData){
+                            return undefined
+                        }
+                        var lableDelegate = model.lableDelegate
+                        if(lableDelegate instanceof Function && lableDelegate() instanceof Component){
+                            return lableDelegate()
+                        }
+                        return com_lable
+                    }
+                    state: {
+                        if(d.isRight){
+                            return "Left"
+                        }
+                        if(d.isAlternate){
+                            if(index%2===0){
+                                return "Right"
+                            }else{
+                                return "Left"
+                            }
+                        }
+                        return "Right"
+                    }
+                    states: [
+                        State {
+                            name: "Left"
+                            AnchorChanges {
+                                target: loader_lable
+                                anchors.left: item_loader.right
+                                anchors.right: item_layout.right
+                            }
+                            PropertyChanges {
+                                target: loader_lable
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Right"
+                            AnchorChanges {
+                                target: loader_lable
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_lable
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Center"
+                            AnchorChanges {
+                                target: loader_lable
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_lable
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        }
+                    ]
+                }
+
+                Loader{
+                    id:loader_text
+                    property var modelData: control.model.get(index)
+                    property int textAlignment: state === "Right" ? Qt.AlignRight : Qt.AlignLeft
+                    state: {
+                        if(d.isRight){
+                            return "Right"
+                        }
+                        if(d.isAlternate){
+                            if(index%2===0){
+                                return "Left"
+                            }else{
+                                return "Right"
+                            }
+                        }
+                        return "Left"
+                    }
+                    sourceComponent: {
+                        if(!modelData){
+                            return undefined
+                        }
+                        var textDelegate = model.textDelegate
+                        if(textDelegate instanceof Function && textDelegate() instanceof Component){
+                            return textDelegate()
+                        }
+                        return com_text
+                    }
+                    states: [
+                        State {
+                            name: "Left"
+                            AnchorChanges {
+                                target: loader_text
+                                anchors.left: item_loader.right
+                                anchors.right: item_layout.right
+                            }
+                            PropertyChanges {
+                                target: loader_text
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Right"
+                            AnchorChanges {
+                                target: loader_text
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_text
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        },
+                        State {
+                            name: "Center"
+                            AnchorChanges {
+                                target: loader_text
+                                anchors.right: item_loader.left
+                                anchors.left: item_layout.left
+                            }
+                            PropertyChanges {
+                                target: loader_text
+                                anchors.leftMargin: 14
+                                anchors.rightMargin: 14
+                            }
+                        }
+                    ]
+
+                }
+
+
+            }
+        }
+    }
+}

src/imports/FluentUI/Controls/FluWindow.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
@@ -8,10 +7,11 @@ Window {
     default property alias content: container.data
     property bool closeDestory: true
     property int launchMode: FluWindowType.Standard
-    property string route
     property var argument:({})
-    property var pageRegister
+    property var background : com_background
     property Component loadingItem: com_loading
+    property var _pageRegister
+    property string _route
     property var closeFunc: function(event){
         if(closeDestory){
             deleteWindow()
@@ -20,26 +20,31 @@ Window {
             event.accepted = false
         }
     }
-    property color backgroundColor: {
-        if(active){
-            return FluTheme.dark ? Qt.rgba(26/255,34/255,40/255,1) : Qt.rgba(238/255,244/255,249/255,1)
-        }
-        return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-    }
-    property alias backgroundOpacity: bg.opacity
-    property alias backgroundVisible: bg.visible
     signal initArgument(var argument)
     id:window
     color:"transparent"
-    onClosing:(event)=>closeFunc(event)
     Component.onCompleted: {
         helper.initWindow(window)
         initArgument(argument)
     }
-    Rectangle{
-        id: bg
+    Connections{
+        target: window
+        function onClosing(event){closeFunc(event)}
+    }
+    Component{
+        id:com_background
+        Rectangle{
+            color: {
+                if(active){
+                    return FluTheme.dark ? Qt.rgba(26/255,34/255,40/255,1) : Qt.rgba(238/255,244/255,249/255,1)
+                }
+                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+            }
+        }
+    }
+    Loader{
         anchors.fill: parent
-        color: backgroundColor
+        sourceComponent: background
     }
     Item{
         id:container
@@ -124,8 +129,8 @@ Window {
         FluApp.deleteWindow(window)
     }
     function onResult(data){
-        if(pageRegister){
-            pageRegister.onResult(data)
+        if(_pageRegister){
+            _pageRegister.onResult(data)
         }
     }
 }

src/imports/FluentUI/qmldir

@@ -81,4 +81,6 @@ FluTooltip 1.0 Controls/FluTooltip.qml
 FluTour 1.0 Controls/FluTour.qml
 FluTreeView 1.0 Controls/FluTreeView.qml
 FluWindow 1.0 Controls/FluWindow.qml
+FluTimeline 1.0 Controls/FluTimeline.qml
+FluChart 1.0 Controls/FluChart.qml
 plugin fluentuiplugin