update

.cmake/GetGitRevisionDescription.cmake

@@ -0,0 +1,308 @@
+if(__get_git_revision_description)
+    return()
+endif()
+set(__get_git_revision_description YES)
+
+get_filename_component(_gitdescmoddir ${CMAKE_CURRENT_LIST_FILE} PATH)
+
+function(_git_find_closest_git_dir _start_dir _git_dir_var)
+    set(cur_dir "${_start_dir}")
+    set(git_dir "${_start_dir}/.git")
+    while(NOT EXISTS "${git_dir}")
+        set(git_previous_parent "${cur_dir}")
+        get_filename_component(cur_dir ${cur_dir} DIRECTORY)
+        if(cur_dir STREQUAL git_previous_parent)
+            set(${_git_dir_var}
+                ""
+                PARENT_SCOPE)
+            return()
+        endif()
+        set(git_dir "${cur_dir}/.git")
+    endwhile()
+    set(${_git_dir_var}
+        "${git_dir}"
+        PARENT_SCOPE)
+endfunction()
+
+function(get_git_head_revision _refspecvar _hashvar)
+    _git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
+
+    if("${ARGN}" STREQUAL "ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR")
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR TRUE)
+    else()
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR FALSE)
+    endif()
+    if(NOT "${GIT_DIR}" STREQUAL "")
+        file(RELATIVE_PATH _relative_to_source_dir "${CMAKE_SOURCE_DIR}"
+             "${GIT_DIR}")
+        if("${_relative_to_source_dir}" MATCHES "[.][.]" AND NOT ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+            set(GIT_DIR "")
+        endif()
+    endif()
+    if("${GIT_DIR}" STREQUAL "")
+        set(${_refspecvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        set(${_hashvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    if(NOT IS_DIRECTORY ${GIT_DIR})
+        execute_process(
+            COMMAND "${GIT_EXECUTABLE}" rev-parse
+                    --show-superproject-working-tree
+            WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+            OUTPUT_VARIABLE out
+            ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+        if(NOT "${out}" STREQUAL "")
+            file(READ ${GIT_DIR} submodule)
+            string(REGEX REPLACE "gitdir: (.*)$" "\\1" GIT_DIR_RELATIVE
+                                 ${submodule})
+            string(STRIP ${GIT_DIR_RELATIVE} GIT_DIR_RELATIVE)
+            get_filename_component(SUBMODULE_DIR ${GIT_DIR} PATH)
+            get_filename_component(GIT_DIR ${SUBMODULE_DIR}/${GIT_DIR_RELATIVE}
+                                   ABSOLUTE)
+            set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+        else()
+            file(READ ${GIT_DIR} worktree_ref)
+            string(REGEX REPLACE "gitdir: (.*)$" "\\1" git_worktree_dir
+                                 ${worktree_ref})
+            string(STRIP ${git_worktree_dir} git_worktree_dir)
+            _git_find_closest_git_dir("${git_worktree_dir}" GIT_DIR)
+            set(HEAD_SOURCE_FILE "${git_worktree_dir}/HEAD")
+        endif()
+    else()
+        set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+    endif()
+    set(GIT_DATA "${CMAKE_CURRENT_BINARY_DIR}/CMakeFiles/git-data")
+    if(NOT EXISTS "${GIT_DATA}")
+        file(MAKE_DIRECTORY "${GIT_DATA}")
+    endif()
+
+    if(NOT EXISTS "${HEAD_SOURCE_FILE}")
+        return()
+    endif()
+    set(HEAD_FILE "${GIT_DATA}/HEAD")
+    configure_file("${HEAD_SOURCE_FILE}" "${HEAD_FILE}" COPYONLY)
+
+    configure_file("${_gitdescmoddir}/GetGitRevisionDescription.cmake.in"
+                   "${GIT_DATA}/grabRef.cmake" @ONLY)
+    include("${GIT_DATA}/grabRef.cmake")
+
+    set(${_refspecvar}
+        "${HEAD_REF}"
+        PARENT_SCOPE)
+    set(${_hashvar}
+        "${HEAD_HASH}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_latest_tag _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --abbrev=0 --tag
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_commit_counts _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" rev-list HEAD --count
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_describe _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --tags --always ${hash} ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_release_version _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" symbolic-ref --short -q HEAD
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    string(FIND ${out} "release/" found})
+    if(${out} MATCHES "^release/.+$")
+        string(REPLACE "release/" "" tmp_out ${out})
+        set(${_var} "${tmp_out}" PARENT_SCOPE)
+    else()
+        set(${_var} "" PARENT_SCOPE)
+    endif()
+endfunction()
+
+function(git_describe_working_tree _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --dirty ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_get_exact_tag _var)
+    git_describe(out --exact-match ${ARGN})
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_local_changes _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" diff-index --quiet HEAD --
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(res EQUAL 0)
+        set(${_var}
+            "CLEAN"
+            PARENT_SCOPE)
+    else()
+        set(${_var}
+            "DIRTY"
+            PARENT_SCOPE)
+    endif()
+endfunction()
+
+git_release_version(GIT_TAG)
+git_get_exact_tag(GIT_EXACT_TAG)
+if(GIT_TAG STREQUAL "")
+    git_latest_tag(GIT_TAG)
+endif()
+if(GIT_TAG STREQUAL "GIT-TAG-NOTFOUND")
+    set(GIT_TAG "1.0.0")
+endif ()
+git_describe(GIT_DESCRIBE)
+git_commit_counts(GIT_COMMIT_COUNT)
+string(REPLACE "." "," GIT_TAG_WITH_COMMA ${GIT_TAG})
+string(REGEX MATCH "[0-9]+\\.[0-9]+\\.[0-9]+" GIT_SEMVER "${GIT_TAG}")
+string(REGEX MATCH "([0-9]+)\\.([0-9]+)\\.([0-9]+)" SEMVER_SPLITED "${GIT_SEMVER}")
+set(MAJOR_VERSION ${CMAKE_MATCH_1})
+set(MINOR_VERSION ${CMAKE_MATCH_2})
+set(PATCH_VERSION ${CMAKE_MATCH_3})
+MATH(EXPR VERSION_COUNTER "${MAJOR_VERSION} * 10000 + ${MINOR_VERSION} * 100 + ${PATCH_VERSION}")
+message(STATUS "Current git tag: ${GIT_TAG}, commit count: ${GIT_COMMIT_COUNT}, describe: ${GIT_DESCRIBE}")
+message(STATUS "Current semver: major: ${MAJOR_VERSION}, minor: ${MINOR_VERSION}, patch: ${PATCH_VERSION}, counter: ${VERSION_COUNTER}")

.cmake/GetGitRevisionDescription.cmake.in

@@ -0,0 +1,43 @@
+#
+# Internal file for GetGitRevisionDescription.cmake
+#
+# Requires CMake 2.6 or newer (uses the 'function' command)
+#
+# Original Author:
+# 2009-2010 Ryan Pavlik <rpavlik@iastate.edu> <abiryan@ryand.net>
+# http://academic.cleardefinition.com
+# Iowa State University HCI Graduate Program/VRAC
+#
+# Copyright 2009-2012, Iowa State University
+# Copyright 2011-2015, Contributors
+# Distributed under the Boost Software License, Version 1.0.
+# (See accompanying file LICENSE_1_0.txt or copy at
+# http://www.boost.org/LICENSE_1_0.txt)
+# SPDX-License-Identifier: BSL-1.0
+
+set(HEAD_HASH)
+
+file(READ "@HEAD_FILE@" HEAD_CONTENTS LIMIT 1024)
+
+string(STRIP "${HEAD_CONTENTS}" HEAD_CONTENTS)
+if(HEAD_CONTENTS MATCHES "ref")
+	# named branch
+	string(REPLACE "ref: " "" HEAD_REF "${HEAD_CONTENTS}")
+	if(EXISTS "@GIT_DIR@/${HEAD_REF}")
+		configure_file("@GIT_DIR@/${HEAD_REF}" "@GIT_DATA@/head-ref" COPYONLY)
+	else()
+		configure_file("@GIT_DIR@/packed-refs" "@GIT_DATA@/packed-refs" COPYONLY)
+		file(READ "@GIT_DATA@/packed-refs" PACKED_REFS)
+		if(${PACKED_REFS} MATCHES "([0-9a-z]*) ${HEAD_REF}")
+			set(HEAD_HASH "${CMAKE_MATCH_1}")
+		endif()
+	endif()
+else()
+	# detached HEAD
+	configure_file("@GIT_DIR@/HEAD" "@GIT_DATA@/head-ref" COPYONLY)
+endif()
+
+if(NOT HEAD_HASH)
+	file(READ "@GIT_DATA@/head-ref" HEAD_HASH LIMIT 1024)
+	string(STRIP "${HEAD_HASH}" HEAD_HASH)
+endif()

.cmake/Version.h.in

@@ -0,0 +1,12 @@
+// 应用程序版本信息
+// 请勿修改此头文件，因为这个文件是自动生成的
+#ifndef VERSION_H
+#define VERSION_H
+
+#include <QtGlobal>
+
+#define APPLICATION_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+#define VERSION_COUNTER ${GIT_COMMIT_COUNT}
+#define COMMIT_HASH "${GIT_DESCRIBE}"
+
+#endif  // VERSION_H

.cmake/version_dll.rc.in

@@ -0,0 +1,32 @@
+1 VERSIONINFO
+ FILEVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ PRODUCTVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ FILEFLAGSMASK 0x3fL
+#ifdef _DEBUG
+ FILEFLAGS 0x1L
+#else
+ FILEFLAGS 0x0L
+#endif
+ FILEOS 0x40004L
+ FILETYPE 0x2L
+ FILESUBTYPE 0x0L
+BEGIN
+    BLOCK "StringFileInfo"
+    BEGIN
+        BLOCK "080404b0"
+        BEGIN
+            VALUE "CompanyName", "ZhuZiChu"
+            VALUE "FileDescription", "${PROJECT_DESCRIPTION}"
+            VALUE "FileVersion", "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+            VALUE "InternalName", "${PROJECT_NAME}.dll"
+            VALUE "LegalCopyright", "Copyright (C) 2023 ZhuZiChu. All rights reserved."
+            VALUE "OriginalFilename", "${PROJECT_NAME}.dll"
+            VALUE "ProductName", "${PROJECT_NAME}"
+            VALUE "ProductVersion", "${GIT_SEMVER}.0"
+        END
+    END
+    BLOCK "VarFileInfo"
+    BEGIN
+        VALUE "Translation", 0x804, 1200
+    END
+END

.cmake/version_exe.rc.in

@@ -0,0 +1,34 @@
+1 VERSIONINFO
+ FILEVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ PRODUCTVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ FILEFLAGSMASK 0x3fL
+#ifdef _DEBUG
+ FILEFLAGS 0x1L
+#else
+ FILEFLAGS 0x0L
+#endif
+ FILEOS 0x40004L
+ FILETYPE 0x2L
+ FILESUBTYPE 0x0L
+BEGIN
+    BLOCK "StringFileInfo"
+    BEGIN
+        BLOCK "080404b0"
+        BEGIN
+            VALUE "CompanyName", "ZhuZiChu"
+            VALUE "FileDescription", "${PROJECT_DESCRIPTION}"
+            VALUE "FileVersion", "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+            VALUE "InternalName", "${PROJECT_NAME}.exe"
+            VALUE "LegalCopyright", "Copyright (C) 2023 ZhuZiChu. All rights reserved."
+            VALUE "OriginalFilename", "${PROJECT_NAME}.exe"
+            VALUE "ProductName", "${PROJECT_NAME}"
+            VALUE "ProductVersion", "${GIT_SEMVER}.0"
+        END
+    END
+    BLOCK "VarFileInfo"
+    BEGIN
+        VALUE "Translation", 0x804, 1200
+    END
+END
+
+IDI_ICON1 ICON DISCARDABLE "${CMAKE_SOURCE_DIR}/example/favicon.ico"

.gitignore

@@ -31,9 +31,10 @@ target_wrapper.*
 # QtCreator CMake
 CMakeLists.txt.user*
 
-src/build-preset/plugins.qmltypes
 bin
 .DS_Store
 build
 cmake-build-*
-.idea
+.idea
+
+example/Version.h

CMakeLists.txt

@@ -2,6 +2,10 @@ cmake_minimum_required(VERSION 3.20)
 
 project(FluentUI VERSION 0.1 LANGUAGES CXX)
 
+list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_LIST_DIR}/.cmake/")
+
+include(GetGitRevisionDescription)
+
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
 option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
 option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)

example/CMakeLists.txt

@@ -26,9 +26,6 @@ endif()
 #获取文件路径分隔符（解决执行命令的时候有些平台会报错）
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
-#设置版本号
-add_definitions(-DVERSION=1,5,0,0)
-
 find_package(Qt6 REQUIRED COMPONENTS Quick Svg Network)
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
@@ -39,6 +36,13 @@ else()
     set(CMAKE_AUTOUIC ON)
 endif()
 
+##生成版本信息头文件
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/example/Version.h)
+configure_file(
+    ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
+    ${HEADER_FILE_VERSION_PATH}
+)
+
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
 foreach(filepath ${CPP_FILES})
@@ -60,11 +64,21 @@ foreach(filepath ${RES_PATHS})
     list(APPEND resource_files ${filename})
 endforeach(filepath)
 
+#如果是Windows平台，则生成rc文件
+set(EXAMPLE_VERSION_RC_PATH "")
+if(WIN32)
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    configure_file(
+        ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
+        ${EXAMPLE_VERSION_RC_PATH}
+    )
+endif()
+
 #添加可执行文件
-if (CMAKE_SYSTEM_NAME STREQUAL "Windows")
+if (WIN32)
     qt_add_executable(example
         ${sources_files}
-        example.rc
+        ${EXAMPLE_VERSION_RC_PATH}
     )
 else ()
     qt_add_executable(example

example/example.rc

@@ -1,42 +0,0 @@
-#include <windows.h>
-
-IDI_ICON1 ICON "favicon.ico"
-
-#define STR(x) #x
-#define VER_JOIN(a,b,c,d) STR(a.b.c.d)
-#define VER_JOIN_(x) VER_JOIN x
-#define VER_STR VER_JOIN_((VERSION))
-
-VS_VERSION_INFO VERSIONINFO
-FILEVERSION     VERSION
-PRODUCTVERSION  VERSION
-FILEFLAGSMASK   0x3fL
-#ifdef _DEBUG
-FILEFLAGS       VS_FF_DEBUG
-#else
-FILEFLAGS       0x0L
-#endif
-FILEOS          VOS_NT_WINDOWS32
-FILETYPE        VFT_APP
-FILESUBTYPE     VFT2_UNKNOWN
-BEGIN
-    BLOCK "StringFileInfo"
-    BEGIN
-        BLOCK "040904b0"
-        BEGIN
-            VALUE "Comments",         "Built by the FluentUI."
-            VALUE "CompanyName",      "zhuzichu"
-            VALUE "FileDescription",  "example"
-            VALUE "FileVersion",      VER_STR
-            VALUE "InternalName",     ""
-            VALUE "LegalCopyright",   "Copyright (C) 2023"
-            VALUE "OriginalFilename", ""
-            VALUE "ProductName",      "example"
-            VALUE "ProductVersion",   VER_STR
-        END
-    END
-    BLOCK "VarFileInfo"
-    BEGIN
-        VALUE "Translation", 0x409, 1200
-    END
-END

example/qml/component/CodeExpander.qml

@@ -38,7 +38,7 @@ FluExpander{
             topMargin: 5
         }
         onClicked:{
-            FluTools.clipText(content.text)
+            FluTools.clipText(FluTools.html2PlantText(content.text))
             showSuccess("复制成功")
         }
     }
@@ -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_Http.qml

@@ -102,7 +102,7 @@ FluContentPage{
                     param.custname = "朱子楚"
                     param.custtel = "1234567890"
                     param.custemail = "zhuzichu520@gmail.com"
-//                    http.postJson("https://httpbingo.org/post",callable,param)
+                    http.postJson("https://httpbingo.org/post",callable,param)
                 }
             }
             FluButton{
@@ -125,7 +125,7 @@ FluContentPage{
                         console.debug(status+";"+errorString)
                     }
                     var param = "我命由我不由天"
-//                    http.postString("https://httpbingo.org/post",callable,param)
+                    http.postString("https://httpbingo.org/post",callable,param)
                 }
             }
             FluButton{

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/AppInfo.cpp

@@ -4,16 +4,12 @@
 #include <QDebug>
 #include "lang/En.h"
 #include "lang/Zh.h"
-
-#define STR(x) #x
-#define VER_JOIN(a,b,c,d) STR(a.b.c.d)
-#define VER_JOIN_(x) VER_JOIN x
-#define VER_STR VER_JOIN_((VERSION))
+#include "Version.h"
 
 AppInfo::AppInfo(QObject *parent)
     : QObject{parent}
 {
-    version(VER_STR);
+    version(APPLICATION_VERSION);
     lang(new En());
 }
 

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

@@ -11,9 +11,6 @@ if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 
-#设置版本号
-add_definitions(-DVERSION=1,5,0,0)
-
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
@@ -39,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})
@@ -66,6 +63,16 @@ else()
     set(PLUGIN_TARGET_NAME ${PROJECT_NAME})
 endif()
 
+#如果是Windows平台，则生成rc文件
+set(FLUENTUI_VERSION_RC_PATH "")
+if(WIN32)
+    set(FLUENTUI_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    configure_file(
+        ${CMAKE_SOURCE_DIR}/.cmake/version_dll.rc.in
+        ${FLUENTUI_VERSION_RC_PATH}
+    )
+endif()
+
 qt_add_qml_module(${PROJECT_NAME}
     PLUGIN_TARGET ${PLUGIN_TARGET_NAME}
     OUTPUT_DIRECTORY ${FLUENTUI_QML_PLUGIN_DIRECTORY}
@@ -73,7 +80,7 @@ qt_add_qml_module(${PROJECT_NAME}
     URI "FluentUI"
     #修改qmltypes文件名称。默认fluentuiplugin.qmltypes，使用默认名称有时候import FluentUI会爆红，所以修改成plugins.qmltypes
     TYPEINFO "plugins.qmltypes"
-    SOURCES ${sources_files} fluentui.rc
+    SOURCES ${sources_files} ${FLUENTUI_VERSION_RC_PATH}
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}
 )

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/FluTools.cpp

@@ -3,6 +3,7 @@
 #include <QClipboard>
 #include <QUuid>
 #include <QCursor>
+#include <QTextDocument>
 
 FluTools* FluTools::m_instance = nullptr;
 
@@ -98,3 +99,9 @@ void FluTools::deleteItem(QObject *p){
 QString FluTools::toLocalPath(const QUrl& url){
     return url.toLocalFile();
 }
+
+QString FluTools::html2PlantText(const QString& html){
+    QTextDocument textDocument;
+    textDocument.setHtml(html);
+    return textDocument.toPlainText();
+}

src/FluTools.h

@@ -90,6 +90,12 @@ public:
      */
     Q_INVOKABLE void restoreOverrideCursor();
 
+    /**
+     * @brief html2PlantText 将html转换成纯文本
+     * @param html
+     */
+    Q_INVOKABLE QString html2PlantText(const QString& html);
+
     /**
      * @brief toLocalPath 获取文件路径，可以去掉windows系统下的file:///，macos下的file://
      * @param url

src/fluentui.rc

@@ -1,40 +0,0 @@
-#include <windows.h>
-
-#define STR(x) #x
-#define VER_JOIN(a,b,c,d) STR(a.b.c.d)
-#define VER_JOIN_(x) VER_JOIN x
-#define VER_STR VER_JOIN_((VERSION))
-
-VS_VERSION_INFO VERSIONINFO
-FILEVERSION     VERSION
-PRODUCTVERSION  VERSION
-FILEFLAGSMASK   0x3fL
-#ifdef _DEBUG
-FILEFLAGS       VS_FF_DEBUG
-#else
-FILEFLAGS       0x0L
-#endif
-FILEOS          VOS_NT_WINDOWS32
-FILETYPE        VFT_APP
-FILESUBTYPE     VFT2_UNKNOWN
-BEGIN
-    BLOCK "StringFileInfo"
-    BEGIN
-        BLOCK "040904b0"
-        BEGIN
-            VALUE "Comments",         "FluentUI for QML."
-            VALUE "CompanyName",      "zhuzichu"
-            VALUE "FileDescription",  "fluentui"
-            VALUE "FileVersion",      VER_STR
-            VALUE "InternalName",     ""
-            VALUE "LegalCopyright",   "Copyright (C) 2023"
-            VALUE "OriginalFilename", ""
-            VALUE "ProductName",      "fluentui"
-            VALUE "ProductVersion",   VER_STR
-        END
-    END
-    BLOCK "VarFileInfo"
-    BEGIN
-        VALUE "Translation", 0x409, 1200
-    END
-END

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