Update README.md

feat: FluCarousel支持纵向轮播

.clang-format

@@ -0,0 +1,130 @@
+# References:
+#   https://clang.llvm.org/docs/ClangFormatStyleOptions.html
+#   https://code.qt.io/cgit/qt/qt5.git/tree/_clang-format
+
+BasedOnStyle: LLVM
+
+Standard: c++17
+
+# 指针和引用的对齐方式。
+# 可能的值有：
+# PAS_Left (在配置中： Left) 指针左对齐。
+# PAS_Right (在配置中： Right) 指针右对齐。
+# PAS_Middle (在配置中： Middle) 指针中间对齐。
+PointerAlignment: Right
+
+# public/protected/private 等访问修饰符偏移量
+AccessModifierOffset: -4
+
+# 缩进长度
+IndentWidth: 4
+
+# 连续空行的最大数
+MaxEmptyLinesToKeep: 999
+
+# 在OC中的@property后面添加一个空格。例如：使用“@property (readonly)”而不是“@property(readonly)”
+ObjCSpaceAfterProperty: true
+
+# OC块中所拍的字符数
+ObjCBlockIndentWidth: 4
+
+# 取决于值, 语句“int f() { return 0; }”可以被放到一个单行。
+# 可能的值有：
+# SFS_None (在配置中： None) 从不合并方法或函数到单独的一行。
+# SFS_Empty (在配置中： Empty) 仅合并空的函数。
+# SFS_Inline (在配置中： Inline) 仅合并类中定义的方法或函数. 意味着 “empty”.
+# SFS_All (在配置中： All) 合并所有的方法适应单行.
+AllowShortFunctionsOnASingleLine: None
+
+# 如果为真（true）, 语句“if (a) return;” 能被放到单行。
+AllowShortIfStatementsOnASingleLine: false
+
+# 如果为真（true）, 对齐注释。
+AlignTrailingComments: true
+
+# 如果为真,对齐连续的宏定义
+AlignConsecutiveMacros: true
+
+# 如果为真（true）,将会在“[”之后和“]”之前插入空格。
+SpacesInSquareBrackets: false
+
+# 如果为真（true）, 将会在“(”之后和“)”之前插入空格。
+SpacesInParentheses : false
+
+# 如果为真（true）, 校准连续的声明。
+# 这将会校准连续多行的声明的名字。这将会导致像下面这样的格式：
+# int         aaaa = 12;
+# float       b = 23;
+# std::string ccc = 23;
+AlignConsecutiveDeclarations: false
+
+# 如果为真（true），连续调整多行
+# 这将会调整连续行中的分配操作符。这将会导致像下面这样的格式：
+# int aaaa = 12;
+# int b    = 23;
+# int ccc  = 23;
+AlignConsecutiveAssignments: false
+
+# 如果为假（false），移除分配操作符（=）前空格。
+SpaceBeforeAssignmentOperators: true
+
+# 如果为真（true）, 将会在字面量容器中插入空格(例如 OC和Javascript的数组和字典字面量)。
+SpacesInContainerLiterals: false
+
+# 缩进case标签
+IndentCaseLabels: true
+
+# 如果表达式中包含函数调用，并且函数调用因为表达式太长被放到了下一行，是否缩进
+IndentWrappedFunctionNames: true
+
+# 如果为真（true）, 保持块的起始空行。
+# true:                                  false:
+# if (foo) {                     vs.     if (foo) {
+#                                          bar();
+#   bar();                               }
+# }
+KeepEmptyLinesAtTheStartOfBlocks: true
+
+# 允许所有参数都被放在下一行
+AllowAllParametersOfDeclarationOnNextLine: false
+
+# 使用C风格强制类型转换后，是否在中间添加一个空格
+SpaceAfterCStyleCast: true
+
+# 在模板定义后换行
+AlwaysBreakTemplateDeclarations: Yes
+
+# Tab长度
+TabWidth: 4
+
+# 是否使用Tab
+UseTab: Never
+
+# 在括号后对齐参数
+# someLongFunction(argument1,
+#                  argument2);
+AlignAfterOpenBracket: Align
+
+# 名字空间内部缩进
+NamespaceIndentation: All
+
+# 一行最长列数
+ColumnLimit: 100
+
+# 按层次缩进宏定义
+IndentPPDirectives: AfterHash
+
+# 预处理语句缩进为 2
+PPIndentWidth: 2
+
+# 数组元素对齐
+AlignArrayOfStructures: Left
+
+# 不对头文件排序
+SortIncludes: Never
+
+FixNamespaceComments: false
+
+StatementMacros: ['__qas_attr__', '__qas_exclude__', '__qas_include__']
+
+ForEachMacros: [ foreach, Q_FOREACH, BOOST_FOREACH, forever, Q_FOREVER, QBENCHMARK, QBENCHMARK_ONCE ]

.cmake/GetGitRevisionDescription.cmake

@@ -0,0 +1,317 @@
+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)
+_git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
+if(NOT IS_DIRECTORY ${GIT_DIR})
+    message(STATUS "Current .git not exist")
+    set(GIT_COMMIT_COUNT "1")
+    set(GIT_DESCRIBE "1.0.0")
+    set(GIT_TAG "1.0.0")
+else()
+    message(STATUS "Current .git exist")
+endif()
+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,21 @@
+set(HEAD_HASH)
+file(READ "@HEAD_FILE@" HEAD_CONTENTS LIMIT 1024)
+string(STRIP "${HEAD_CONTENTS}" HEAD_CONTENTS)
+if(HEAD_CONTENTS MATCHES "ref")
+    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()
+    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/InstallerScript.iss.in

@@ -0,0 +1,52 @@
+; Script generated by the Inno Setup Script Wizard.
+; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!
+
+#define MyAppName "example"
+#define MyAppVersion "${GIT_SEMVER}"
+#define MyAppPublisher "ZhuZiChu"
+#define MyAppURL "https://zhuzichu520.github.io/"
+#define MyAppExeName "example.exe"
+#define MyAppFileDir "dist"
+
+[Setup]
+; NOTE: The value of AppId uniquely identifies this application. Do not use the same AppId value in installers for other applications.
+; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
+AppId={{A053D1AE-AEA9-4105-A79B-B5F5BEDC9208}
+AppName={#MyAppName}
+AppVersion={#MyAppVersion}
+;AppVerName={#MyAppName} {#MyAppVersion}
+AppPublisher={#MyAppPublisher}
+AppPublisherURL={#MyAppURL}
+AppSupportURL={#MyAppURL}
+AppUpdatesURL={#MyAppURL}
+DefaultDirName={autopf}\{#MyAppName}
+DisableProgramGroupPage=yes
+; Uncomment the following line to run in non administrative install mode (install for current user only.)
+;PrivilegesRequired=lowest
+OutputDir=.\
+OutputBaseFilename=installer
+Compression=lzma
+SolidCompression=yes
+WizardStyle=modern
+UninstallDisplayIcon={app}\{#MyAppExeName}
+SetupIconFile=.\..\favicon.ico
+MinVersion = 6.0
+
+[Languages]
+Name: "chinesesimplified"; MessagesFile: "compiler:Languages\ChineseSimplified.isl"
+
+[Tasks]
+Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkablealone
+
+[Files]
+Source: ".\..\{#MyAppFileDir}\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion
+Source: ".\..\{#MyAppFileDir}\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
+; NOTE: Don't use "Flags: ignoreversion" on any shared system files
+
+[Icons]
+Name: "{autoprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
+Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
+
+[Run]
+Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent
+

.cmake/Version.h.in

@@ -0,0 +1,11 @@
+#ifndef VERSION_H
+#define VERSION_H
+
+#include <QtGlobal>
+
+#define APPLICATION_FULL_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+#define VERSION_COUNTER ${GIT_COMMIT_COUNT}
+#define COMMIT_HASH "${GIT_DESCRIBE}"
+#define APPLICATION_VERSION "${GIT_SEMVER}"
+
+#endif  // VERSION_H

.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"

.github/workflows/macos.yml

@@ -2,57 +2,69 @@ name: MacOS
 on: 
   push:
     paths:
-      - '*.pro'
+      - '*.txt'
+      - 'example/**'
       - 'src/**'
+      - 'scripts/**'
       - '.github/workflows/macos.yml'
   pull_request:
     paths:
-      - '*.pro'
+      - '*.txt'
+      - 'example/**'
       - 'src/**'
+      - 'scripts/**'
       - '.github/workflows/macos.yml' 
+      
 jobs:
   build:
     name: Build
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-12]
-        qt_ver: [6.4.3]
+        os: [macos-latest]
+        qt_ver: [6.6.2]
         qt_arch: [clang_64]
     env:
       targetName: example
     steps:
-      - name: '⚙️ Cache Qt'
-        id: cache-qt
-        uses: actions/cache@v3
+      - name: Check out repository
+        uses: actions/checkout@v3
         with:
-          path: ${{ runner.workspace }}/Qt
-          key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
+          submodules: recursive
+          
       - name: Install Qt
         uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
-      - uses: actions/checkout@v2
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
+          
+      - name: Set up Ninja
+        uses: seanmiddleditch/gha-setup-ninja@v3
         with:
-          fetch-depth: 1
+          version: 1.10.2
+          
       - name: build macos
         run: |
-          qmake
-          make
-      # 打包
+          cmake --version
+          mkdir build
+          cd build
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
+          
       - name: package
         run: |
+          # 先删除所有dSYM文件，减少包的体积
+          sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
           # 拷贝依赖
-          macdeployqt bin/release/${targetName}.app -qmldir=. -verbose=1 -dmg
-      # 上传artifacts          
-      - uses: actions/upload-artifact@v2
+          sudo macdeployqt bin/Release/${targetName}.app -qmldir=. -dmg     
+          
+      - uses: actions/upload-artifact@v4
         with:
-          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}.zip
+          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
           path: bin/release/${{ env.targetName }}.app
-      # tag 上传Release
+          
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
@@ -61,4 +73,4 @@ jobs:
           file: bin/release/${{ env.targetName }}.dmg
           asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.dmg
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/ubuntu.yml

@@ -1,71 +1,92 @@
 name: Ubuntu
-# Qt官方没有linux平台的x86包
 on: 
   workflow_dispatch:
   push:
     paths:
-      - '*.pro'
+      - '*.txt'
       - 'src/**'
+      - 'example/**'
+      - 'scripts/**'
       - '.github/workflows/ubuntu.yml'
   pull_request:
     paths:
-      - '*.pro'
+      - '*.txt'
       - 'src/**'
-      - '.github/workflows/ubuntu.yml' 
+      - 'example/**'
+      - 'scripts/**'
+      - '.github/workflows/ubuntu.yml'
+      
 jobs:
   build:
     name: Build
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-20.04]
-        qt_ver: [6.4.3]
+        os: [ubuntu-latest]
+        qt_ver: [6.6.2]
         qt_arch: [gcc_64]
     env:
       targetName: example
     steps:
-      - name: '⚙️ Cache Qt'
-        id: cache-qt
-        uses: actions/cache@v3
+      - name: Check out repository
+        uses: actions/checkout@v3
         with:
-          path: ${{ runner.workspace }}/Qt
-          key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
+          submodules: recursive
+          
       - name: Install Qt
         uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
-      - name: ubuntu install GL library
-        run: sudo apt-get install -y libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
-      - uses: actions/checkout@v2
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
+      
+      - name: Set up Ninja
+        uses: seanmiddleditch/gha-setup-ninja@v3
         with:
-          fetch-depth: 1
+          version: 1.10.2
+          
+      - name: ubuntu install GL library
+        run: sudo apt-get install -y libxcb-cursor0 libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
+        
+      - name: ubuntu install libfuse2
+        run: sudo apt install libfuse2
+        
       - name: build ubuntu
         run: |
-          qmake
-          make
+          ninja --version
+          cmake --version
+          mkdir build
+          cd build
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
+          
       - name: install QT linux deploy
         uses: miurahr/install-linuxdeploy-action@v1
         with:
           plugins: qt appimage
+          
       - name: Check if svg file exists
         run: if [ ! -f "${targetName}.svg" ]; then echo "File not found, creating..."; touch ${targetName}.svg; fi
-      # 打包
+
+      - name: Copy translation files
+        run: |
+          mkdir -p bin/release/usr/bin/
+          cp -r bin/Release/i18n/ bin/release/usr/bin/i18n/
+
       - name: package
         run: |
           # make sure Qt plugin finds QML sources so it can deploy the imported files
-          export QML_SOURCES_PATHS=src
+          export QML_SOURCES_PATHS=./
           # 拷贝依赖
-          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/release/${targetName} --appdir bin/release/
+          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/Release/${targetName} --appdir bin/release/
           mv ${{ env.targetName }}-*.AppImage ${{ env.targetName }}.AppImage
-      # 上传artifacts          
-      - uses: actions/upload-artifact@v2
+        
+      - uses: actions/upload-artifact@v4
         with:
           name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
           path: ${{ env.targetName }}.AppImage
-      # tag 上传Release
+
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
@@ -74,4 +95,4 @@ jobs:
           file: ${{ env.targetName }}.AppImage
           asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.AppImage
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/windows-mingw.yml

@@ -2,56 +2,76 @@ name: Windows MinGW
 on: 
   push:
     paths:
-      - '*.pro'
+      - '*.txt'
       - 'src/**'
+      - 'example/**'
+      - 'scripts/**'
       - '.github/workflows/windows-mingw.yml'
   pull_request:
     paths:
-      - '*.pro'
+      - '*.txt'
+      - 'example/**'
       - 'src/**'
-      - '.github/workflows/windows-mingw.yml' 
+      - 'scripts/**'
+      - '.github/workflows/windows-mingw.yml'
+      
 jobs:
   build:
     name: Build
-    runs-on: windows-2022
+    runs-on: ${{ matrix.os }}
     strategy:
       matrix:
+        os: [windows-latest]
         include:
           - qt_arch: win64_mingw
-            qt_ver: 6.4.3
+            qt_ver: 6.6.2
             qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
             qt_tools_mingw_install: mingw900_64
     env:
       targetName: example.exe
       fileName: example
     steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+          
+      - name: Setup ninja
+        uses: seanmiddleditch/gha-setup-ninja@master
+        with:
+          version: 1.10.2
+      
       - name: Install Qt
         uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 1
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
+      
       - name: Qt6 environment configuration
         if: ${{ startsWith( matrix.qt_ver, 6 ) }}
         shell: pwsh
         run: |
           Write-Output "${{ env.Qt6_DIR }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
           Write-Output "${{ env.Qt6_DIR }}/../../Tools/${{ matrix.qt_tools_mingw_install }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
-      - name: where is qmake & where is mingw32-make
+      
+      - name: where is cmake & where is mingw32-make
         shell: pwsh
         run: |
-          Get-Command -Name 'qmake' | Format-List
+          Get-Command -Name 'cmake' | Format-List
           Get-Command -Name 'mingw32-make' | Format-List
+      
       - name: mingw-build
         id: build
         shell: cmd
         run: |
-          qmake
-          mingw32-make
+          mkdir build
+          cd build
+          ninja --version
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
+      
       - name: package
         id: package      
         env:
@@ -61,16 +81,24 @@ jobs:
           & scripts\windows-mingw-publish.ps1 ${env:archiveName} ${env:targetName}
            $name = ${env:archiveName}
            echo "::set-output name=packageName::$name"       
-      - uses: actions/upload-artifact@v2
+      
+      - uses: actions/upload-artifact@v4
         with:
           name: ${{ steps.package.outputs.packageName }}
-          path: ${{ steps.package.outputs.packageName }}
+          path: dist
+      
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./package/InstallerScript.iss
+          
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ${{ steps.package.outputs.packageName }}.zip
-          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          file: ./package/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true

.github/workflows/windows-qt5.yml

@@ -0,0 +1,91 @@
+name: Windows Qt5.15.2
+on: 
+  push:
+    paths:
+      - '*.txt'
+      - 'src/**'
+      - 'example/**'
+      - 'scripts/**'
+      - '.github/workflows/windows-qt5.yml'
+  pull_request:
+    paths:
+      - '*.txt'
+      - 'example/**'
+      - 'src/**'
+      - 'scripts/**'
+      - '.github/workflows/windows-qt5.yml'
+      
+jobs:
+  build:
+    name: Build
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [windows-2019]
+        include:
+          - qt_ver: 5.15.2        
+            qt_arch: win32_msvc2019
+            msvc_arch: x86
+            qt_arch_install: msvc2019          
+    env:
+      targetName: example.exe
+      fileName: example
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+             
+      - name: Install Qt
+        uses: jurplel/install-qt-action@v3
+        with:
+          version: ${{ matrix.qt_ver }}
+          arch: ${{ matrix.qt_arch }}
+          cache: ${{steps.cache-qt.outputs.cache-hit}}
+          
+      - name: msvc-build
+        id: build
+        shell: cmd
+        run: |
+          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          mkdir build
+          cd build
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\msvc2019 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
+          echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
+          echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
+          echo vcToolsInstallDir=%VCToolsInstallDir% >> %GITHUB_ENV%
+          echo vcToolsRedistDir=%VCToolsRedistDir% >> %GITHUB_ENV%
+          
+      - name: package
+        id: package      
+        env:
+          archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
+          msvcArch: ${{ matrix.msvc_arch }}          
+        shell: pwsh
+        run: |
+          & scripts\windows-publish.ps1 ${env:archiveName} ${env:targetName}
+          # 记录packageName给后续step
+           $name = ${env:archiveName}
+           echo "::set-output name=packageName::$name"     
+           
+      - uses: actions/upload-artifact@v4
+        with:
+          name: ${{ steps.package.outputs.packageName }}
+          path: dist
+          
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./package/InstallerScript.iss
+          
+      - name: uploadRelease
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: ./package/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
+          tag: ${{ github.ref }}
+          overwrite: true

.github/workflows/windows.yml

@@ -1,68 +1,69 @@
 name: Windows
 on: 
-  # push代码时触发workflow
   push:
     paths:
-      - '*.pro'
+      - '*.txt'
       - 'src/**'
+      - 'example/**'
+      - 'scripts/**'
       - '.github/workflows/windows.yml'
   pull_request:
     paths:
-      - '*.pro'
+      - '*.txt'
+      - 'example/**'
       - 'src/**'
-      - '.github/workflows/windows.yml' 
+      - 'scripts/**'
+      - '.github/workflows/windows.yml'
+      
 jobs:
   build:
     name: Build
-    # 运行平台， windows-latest目前是windows server 2019 
-    # 参考文档 https://github.com/actions/virtual-environments/blob/main/images/win/Windows2019-Readme.md
     runs-on: ${{ matrix.os }}
     strategy:
-      # 矩阵配置
       matrix:
-        os: [windows-2019]
+        os: [windows-latest]
         include:
-          - qt_ver: 6.4.3          
+          - qt_ver: 6.6.2        
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
-            qt_arch_install: msvc2019_64          
+            qt_arch_install: msvc2019_64  
     env:
       targetName: example.exe
       fileName: example
-    # 步骤
     steps:
-      - name: '⚙️ Cache Qt'
-        id: cache-qt
-        uses: actions/cache@v3
+      - name: Check out repository
+        uses: actions/checkout@v3
         with:
-          path: ${{ runner.workspace }}\Qt
-          key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
-      # 安装Qt
+          submodules: recursive
+          
+      - name: Setup ninja
+        uses: seanmiddleditch/gha-setup-ninja@master
+        with:
+          version: 1.10.2
+          
       - name: Install Qt
-        # 使用外部action。这个action专门用来安装Qt
         uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
-      # 拉取代码
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 1
-      # msvc编译
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech qt3d'
+          
       - name: msvc-build
         id: build
         shell: cmd
         run: |
-          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
-          qmake
-          nmake
+          call "C:\Program Files\Microsoft Visual Studio\2022\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          ninja --version
+          mkdir build
+          cd build
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
           echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
           echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
           echo vcToolsInstallDir=%VCToolsInstallDir% >> %GITHUB_ENV%
           echo vcToolsRedistDir=%VCToolsRedistDir% >> %GITHUB_ENV%
-      # 打包 
+          
       - name: package
         id: package      
         env:
@@ -73,20 +74,25 @@ jobs:
           & scripts\windows-publish.ps1 ${env:archiveName} ${env:targetName}
           # 记录packageName给后续step
            $name = ${env:archiveName}
-           echo "::set-output name=packageName::$name"       
-      # tag 查询github-Release
-      # 上传artifacts          
-      - uses: actions/upload-artifact@v2
+           echo "::set-output name=packageName::$name"     
+           
+      - uses: actions/upload-artifact@v4
         with:
           name: ${{ steps.package.outputs.packageName }}
-          path: ${{ steps.package.outputs.packageName }}
-      # tag 上传Release
+          path: dist
+          
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./package/InstallerScript.iss
+          
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ${{ steps.package.outputs.packageName }}.zip
-          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          file: ./package/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true 

.gitignore

@@ -31,6 +31,13 @@ target_wrapper.*
 # QtCreator CMake
 CMakeLists.txt.user*
 
-src/build-preset/plugins.qmltypes
 bin
-.DS_Store
+.DS_Store
+build
+cmake-build-*
+.idea
+package
+example/Version.h
+dist
+
+*.qm

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+    "MicroPython.executeButton": [
+        {
+            "text": "▶",
+            "tooltip": "运行",
+            "alignment": "left",
+            "command": "extension.executeFile",
+            "priority": 3.5
+        }
+    ],
+    "MicroPython.syncButton": [
+        {
+            "text": "$(sync)",
+            "tooltip": "同步",
+            "alignment": "left",
+            "command": "extension.execute",
+            "priority": 4
+        }
+    ]
+}

CMakeLists.txt

@@ -1,5 +1,36 @@
-cmake_minimum_required(VERSION 3.16)
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+cmake_minimum_required(VERSION 3.20)
+
+project(FluentUI VERSION 1.0)
+
+if (MSVC)
+    #让Release也生成pdb文件
+    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+endif ()
+
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_CURRENT_LIST_DIR}/.cmake/)
+
+include(GetGitRevisionDescription)
+
+option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
+option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
+
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
 
 add_subdirectory(src)
-add_subdirectory(example)
+
+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
+)
+
+if (FLUENTUI_BUILD_EXAMPLES)
+    add_subdirectory(example)
+endif ()
+
+message("------------------------ FluentUI ------------------------")
+message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
+message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
+message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")

FluentUI.pro

@@ -1,6 +0,0 @@
-TEMPLATE = subdirs
-
-SUBDIRS += \
-    src/FluentUI.pro \
-    example
-    example.depends = src/FluentUI.pro

README.md

@@ -1,99 +1,120 @@
-# FluentUI
+# ATTENTION! 
+# PLEASE USE THE BRAND NEW [FluentUI Pro](https://github.com/zhuzichu520/FluentUI2) INSTEAD!
+<div align=center>
+<img width=64 src="doc/preview/fluent_design.svg">
 
-## 简介
+# QML FluentUI
 
-这是一个漂亮的Fluent组件库，使用QML插件开发的
+A Fluent Design component library for Qt QML, You need PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML).
 
-## 编译状态
-| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
-|---------------|---------------|-----------------|
-| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
+</div>
+
+![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
+
+<div align=center>
+
+English | [简体中文](README_zh_CN.md)
+
+<img src="doc/preview/demo_large.png">
+
+</div>
 
 [win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
 [win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg  "Windows"
-
 [ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
 [ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg "Ubuntu"
-
 [macos-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS "MacOSAction"
 [macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
-
-## 发布
-
-|[已发布][release-link]|[下载][download-link]|下载次数|
-|:--:|:--:|:--:|
-|![release-badge] |![download-badge]|![download-latest]|
-
 [release-link]: https://github.com/zhuzichu520/FluentUI/releases "Release status"
 [release-badge]: https://img.shields.io/github/release/zhuzichu520/FluentUI.svg?style=flat-square "Release status"
 [download-link]: https://github.com/zhuzichu520/FluentUI/releases/latest "Download status"
 [download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg "Download status"
 [download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg "latest status"
 
-## 支持的组件
+<p align=center>
+This is a beautiful FluentUI component library based on Qt QML. Currently the main branch supports Qt 6. If you want to use it in Qt 5, checkout the Qt 5 branch.
+</p>
 
-|目录|说明|备注|
-|----|----|----|
-|FluApp|初始化入口|支持路由跳转|
-|FluWindow|无边框窗口|解决windows拖动闪烁问题|
-|FluAppBar|窗口顶部标题栏|支持拖动窗口，最小化、最大化、关闭窗口|
-|FluText|Text文本||
-|FluButton|按钮||
-|FluFilledButton|实心按钮||
-|FluIconButton|图标按钮||
-|FluTextButton|文本按钮||
-|FluIcon|图标||
-|FluRadioButton|单选按钮||
-|FluTextBox|单行输入框||
-|FluMultiLineTextBox|多行输入框||
-|FluToggleSwitch|开关按钮||
-|FluSlider|拖动条||
-|FluInfoBar|提示Toast||
-|FluContentDialog|对话框||
-|FluProgressBar|条形进度条||
-|FluProgressRing|圆形进度条||
-|FluRectangle|矩形|支持部分圆角、clip|
-|FluMenu|菜单框||
-|FluTooltip|tooltip提示框||
-|FluTreeView|树控件||
-|FluTheme|主题设置|支持主题颜色切换，夜间模式|
-|FluCarousel|轮播图组件|支持无限轮播|
-|FluTimePicker|时间选择器||
-|FluDatePicker|日期选择器||
-|FluMenu|菜单Popup||
-|FluNavigationView|响应式导航布局||
-|FluScrollbar|滚动条||
-|FluToggleButton|开关按钮||
-|FluPagination|分页组件||
-|FluTableView|表格组件||
-|FluMediaPlayer|播放器||
-|FluFlipView|FlipView||
+## Requirements
 
-# 部分效果预览
++ Qt Core, Qt Quick, Qt QML, Qt ShaderTool, Qt 5 Compatibility Module. (**Essential**)
++ Qt LinguistTool (optional,for translations)
++ Qt Svg (optional, however essential for Qt 5)
 
-## 首页
+Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to acquire the modules (**Recommended**) or compile them first before using the library.
 
-![](doc/preview/home.png)
+## ⚽ Get started
 
-## 各种Button按钮
++ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please specify your platform and compilers.)
 
-![](doc/preview/buttons.png)
++ run `example` program.
 
-## 主题颜色切换、夜间模式
+or
 
-![](doc/preview/theme.png)
++ Clone the repository.
 
-## TableView表格组件
+```bash
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+```
 
-![](doc/preview/tableview.png)
++ Build
 
-## FluTreeView树组件
+```bash
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+cd FluentUI
+mkdir build
+cd build
+cmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <PATH_TO_THE_REPOSITORY>
+cmake --build . --config Release --target all --parallel
+```
 
-![](doc/preview/treeview.png)
++ Use your IDE (`Qt Creator` or `CLion`) to open the project. (only **CMake** supported).
 
-## 轮播图组件
+<div align=center>
+  <img src="doc/preview/qt_creator_project.png">
+</div>
 
-![](doc/preview/carousel.png)
++ Compile the project. Then try to execute the `example` demo program.
 
-### ⚡ Visitor count
-![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
++ Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.
+
+## 📑 Documentations
+
+(Work in progress...🚀)
+
+## Supported components
+
+|       Catalog       |              Detail              |                    Notes / Demos                    |
+| :-----------------: | :------------------------------: | :-------------------------------------------------: |
+|       FluApp        | The initial entry of the program |                Router supported(SPA)                |
+|      FluWindow      |         Frameless Window         |             *This only works on windows             |
+|      FluAppBar      |  Title bar on top of the window  |  Drag, minimize, maximize and close are supported.  |
+|       FluText       |           Common text            |                                                     |
+|      FluButton      |          Common button           |      ![btn](doc/preview/demo_standardbtn.png)       |
+|   FluFilledButton   |          Filled button           |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|    FluTextButton    |           Text button            |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|   FluToggleButton   |          Toggle buttons          |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|       FluIcon       |           Common icon            |         ![icons](doc/preview/demo_icon.png)         |
+|   FluRadioButton    |           radio button           |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|     FluTextBox      |      Single-line input box       |      ![textbox](doc/preview/demo_textbox.png)       |
+| FluMultiLineTextBox |      Multi-lines input area      | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|   FluToggleSwitch   |          toggle switch           | ![toggleswitch](doc/preview/demo_toggle_switch.png) |
+
+View more [`here`](doc/md/all_components.md)!
+
+## Reference
+
++ [**Windows design**: Design guidelines and toolkits of Microsoft.](https://learn.microsoft.com/en-us/windows/apps/design/)
++ [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)
+
+## License
+
+This FluentUI library currently licensed under [MIT License](./License)
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
+
+## ⚡ Visitor count
+
+![Visitor count](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

README_zh_CN.md

@@ -0,0 +1,118 @@
+<div align=center>
+<img width=64 src="doc/preview/fluent_design.svg">
+
+# QML FluentUI
+
+一个 Qt QML 的 Fluent Design 组件库，需要 PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML)。
+
+</div>
+
+![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
+
+<div align=center>
+
+[English](README.md) | 简体中文
+
+<img src="doc/preview/demo_large.png">
+
+</div>
+
+[win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
+[win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg  "Windows"
+[ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
+[ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg "Ubuntu"
+[macos-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS "MacOSAction"
+[macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
+[release-link]: https://github.com/zhuzichu520/FluentUI/releases "Release status"
+[release-badge]: https://img.shields.io/github/release/zhuzichu520/FluentUI.svg?style=flat-square "Release status"
+[download-link]: https://github.com/zhuzichu520/FluentUI/releases/latest "Download status"
+[download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg "Download status"
+[download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg "latest status"
+
+<p align=center>
+这是一个基于 Qt QML 的漂亮 FluentUI 组件库。目前主分支支持 Qt 6。如果您想在 Qt 5 中使用它，请切换至 Qt 5 分支。
+</p>
+
+## 必要条件
+
++ Qt Core、Qt Quick、Qt QML、Qt ShaderTool、Qt 5 Compatibility Module.（**重要**）
++ Qt LinguistTool（可选，用于翻译）
++ Qt Svg（可选，但对于 Qt 5 来说必不可少）
+
+在使用库之前使用 [Qt 在线安装程序](https://download.qt.io/archive/online_installers/) 获取模块（**推荐**），或先编译模块。
+
+## ⚽ 快速开始
+
++ 下载 [预编译版本](https://github.com/zhuzichu520/FluentUI/releases)。（请注意您的平台和编译器）。
+
++ 运行 `example` 程序。
+
+或者
+
++ 克隆此仓库
+
+```bash
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+```
+
++ 构建
+
+```bash
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+cd FluentUI
+mkdir build
+cd build
+cmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <仓库路径>
+cmake --build . --config Release --target all --parallel
+```
+
++ 使用 IDE（`Qt Creator` 或者 `CLion`）打开项目。（仅支持 **CMake**）。
+
+<div align=center>
+  <img src="doc/preview/qt_creator_project.png">
+</div>
+
++ 编译项目。然后尝试执行 `example` 演示程序。
+
++ 太好了！现在您可以编写第一个 QML FluentUI 程序了！查看文档了解更多详情。
+
+## 📑 文档
+
+(正在进行中...🚀)
+
+## 支持的组件
+
+|        目录         |       详情       |                    备注 / Demos                     |
+| :-----------------: | :--------------: | :-------------------------------------------------: |
+|       FluApp        |   程序初始入口   |                   支持路由（SPA）                   |
+|      FluWindow      |     无框窗口     |                  *仅适用于 Windows                  |
+|      FluAppBar      | 窗口顶部的标题栏 |          支持拖动、最小化、最大化和关闭。           |
+|       FluText       |     通用文本     |                                                     |
+|      FluButton      |     通用按钮     |      ![btn](doc/preview/demo_standardbtn.png)       |
+|   FluFilledButton   |   Filled 按钮    |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|    FluTextButton    |     文本按钮     |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|   FluToggleButton   |     切换按钮     |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|       FluIcon       |     通用图标     |         ![icons](doc/preview/demo_icon.png)         |
+|   FluRadioButton    |      单选框      |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|     FluTextBox      |    单行输入框    |      ![textbox](doc/preview/demo_textbox.png)       |
+| FluMultiLineTextBox |    多行输入框    | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|   FluToggleSwitch   |       开关       | ![toggleswitch](doc/preview/demo_toggle_switch.png) |
+
+在 [`这里`](doc/md/all_components.md) 查看更多！
+
+## 参考
+
++ [**Windows 设计**：Microsoft 的设计指南和工具包。](https://learn.microsoft.com/zh-CN/windows/apps/design/)
++ [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)
+
+## 许可
+
+本 FluentUI 库目前采用 [MIT License](./License) 许可。
+
+## 星标历史
+
+[![星标历史图表](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
+
+## ⚡ 游客数量
+
+![游客数量](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

doc/md/all_components.md

@@ -0,0 +1,37 @@
+# 支持的组件
+
+|Catalog|Detail|Notes / Demos|
+|:----:|:----:|:----:|
+|FluApp|The initial entry of the program|Router supported(SPA)|
+|FluWindow|Frameless Window|*This only works on windows|
+|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|
+|FluText|Common text||
+|FluButton|Common button|![btn](../preview/demo_standardbtn.png) |
+|FluFilledButton|Filled button|![filledbtn](../preview/demo_filledbtn.png)|
+|FluTextButton|Text button|![textbtn](../preview/demo_textbtn.png)|
+|FluToggleButton|Toggle buttons|![togglebtn](../preview/demo_toggle_btn.png)|
+|FluIcon|fluent icons|![icons](../preview/demo_icon.png)|
+|FluRadioButton|radio button|![radiobtn](../preview/demo_radiobtn.png)|
+|FluTextBox|Single-line input box|![textbox](../preview/demo_textbox.png)|
+|FluMultiLineTextBox|Multi-lines input area|![textarea](../preview/demo_multiline_textbox.png)|
+|FluToggleSwitch|toggle switch|![toggleswitch](../preview/demo_toggle_switch.png)|
+|FluSlider|Slider|![slider](../preview/demo_slider.png)|
+|FluInfoBar|提示Toast|![infobar](../preview/demo_infobar.png)|
+|FluContentDialog| dialog |![dialog](../preview/demo_content_dialog.png)|
+|FluProgressBar| progress bar |![progress](../preview/demo_progress_bar_ring.png)|
+|FluProgressRing|circle progress||
+|FluRectangle|reactangle| ![rect](../preview/demo_rectangle.png)</br>*partially support `round` and `clip` feature|
+|FluMenu|menu||
+|FluTooltip|tooltip|![tooltip](../preview/demo_tooltip.png)|
+|FluTreeView|tree view component|![treeview](../preview/demo_tree_view.png)|
+|FluTheme|theme settings|theme color changes, dark mode are supported|
+|FluCarousel|-||
+|FluTimePicker| time picker ||
+|FluDatePicker|date picker||
+|FluMenu|the menu popup||
+|FluNavigationView|responsive navigation view||
+|FluScrollbar|scroll bar||
+|FluPagination|||
+|FluTableView|table component||
+|FluMediaPlayer|multimedia components||
+|FluFlipView| flip view||

doc/preview/fluent_design.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title>design-and-ux/fluent-design</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="design-and-ux/fluent-design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#0078D7" stroke-width="2"> <rect id="mask" x="-1" y="-1" width="71" height="71" rx="14"> </rect> </g> <g id="fluent" transform="translate(22.000000, 11.000000)" fill="#0078D7" fill-rule="nonzero"> <polygon id="fluent_01" points="14.7809081 0 0 8.45050462 0 42.2525249 14.7809081 50.7030295 14.7809081 33.8020194 29.561837 25.3515148 14.7809081 16.9010101 29.561837 8.45050462"> </polygon> </g> </g> </g>
+
</svg>

example.svg

@@ -1 +1,7 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678260749060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11227" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M0 0m170.663111 0l682.652445 0q170.663111 0 170.663111 170.663111l0 682.652445q0 170.663111-170.663111 170.663111l-682.652445 0q-170.663111 0-170.663111-170.663111l0-682.652445q0-170.663111 170.663111-170.663111Z" fill="#EBF2FF" p-id="11228"></path><path d="M512.351993 787.674257c182.822858 0 330.926439 98.568613 331.033103 231.312514 0 1.674632-0.031999 3.338597-0.106664 5.002563H181.43622c-0.074665-1.663965-0.106664-3.327931-0.106664-5.002563 0-132.743901 148.210246-231.312514 331.022437-231.312514z" fill="#7D99C8" p-id="11229"></path><path d="M592.264994 721.158309v79.817004h-0.810649c-5.546551 30.079373-38.847191 53.204225-79.102352 53.204225-40.244495 0-73.545134-23.114185-79.091686-53.193559h-0.81065V721.158309h159.815337z" fill="#FBDBCB" p-id="11230"></path><path d="M508.213412 765.626716c-44.105748-1.226641-85.363555-19.306264-118.568196-56.916147-22.826191-25.866128-35.199267-53.054895-37.097894-81.576968l-21.610217-1.610633a59.988084 59.988084 0 0 1-55.433511-56.585488l-0.319994-5.72788a34.932606 34.932606 0 0 1 43.124435-35.839254l0.949314-9.098477a608.008666 608.008666 0 0 1 40.031166-159.015354l10.389117-25.866127H655.026354l10.389117 25.866127a608.008666 608.008666 0 0 1 40.031166 159.015354l0.95998 9.098477a34.932606 34.932606 0 0 1 43.103102 35.839254l-0.309327 5.72788a59.988084 59.988084 0 0 1-55.433512 56.585488l-21.610217 1.610633c-1.909294 28.522072-14.271703 55.710839-37.097893 81.576968-34.239287 38.793858-77.054395 56.798817-122.717444 56.980146z" fill="#FFE7DB" p-id="11231"></path><path d="M546.911273 182.822858a10.666444 10.666444 0 0 1 1.429303 4.31991c0.533322 5.055895 0.714652 9.226474 0.533322 12.501073l-0.202662 2.346618 3.221266-0.543989c21.876878-3.733256 38.452532-9.877128 49.705631-18.452949l2.197288-1.73863a10.666444 10.666444 0 0 1 16.682319 3.98925c8.767817 20.650236 11.125102 40.681819 7.039853 60.116081l-0.373325 1.578633c4.746568 1.514635 9.589134 3.199933 14.506364 5.066562 27.882086 10.581113 57.769463 26.367451 76.883732 75.65709 20.212912 52.084248 18.826274 116.562905-4.149247 193.425304l-1.855961 6.101206H701.425387c-0.47999-51.732256-8.319827-90.526114-23.540843-116.392242-15.221016-25.866128-29.716714-46.185704-43.487094-60.969396-41.513802 10.399783-79.85967 15.914335-115.037603 16.564988l-6.997188 0.063998v0.191996c-37.065894 0-77.737047-5.546551-122.024124-16.628986-13.77038 10.954438-28.266078 31.220683-43.487094 60.7774-15.221016 29.556718-23.060853 68.414575-23.540843 116.584238h-11.114435c-24.746151-79.571676-26.740776-146.076957-6.005209-199.52651 8.746484-22.548864 19.732922-38.079207 31.764672-49.321639 18.079623-20.660903 40.180496-36.009916 66.302619-46.068374a424.716485 424.716485 0 0 1 32.319326-11.029103c25.25814-9.034478 44.991063-16.767651 59.209433-23.210183a366.221704 366.221704 0 0 0 29.151393-14.869024l7.359847-4.266578a10.666444 10.666444 0 0 1 14.623695 3.733256z" fill="#7D99C8" p-id="11232"></path></svg>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title>design-and-ux/fluent-design</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="design-and-ux/fluent-design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="container" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#0078D7" stroke-width="2"> <rect id="mask" x="-1" y="-1" width="71" height="71" rx="14"> </rect> </g> <g id="fluent" transform="translate(22.000000, 11.000000)" fill="#0078D7" fill-rule="nonzero"> <polygon id="fluent_01" points="14.7809081 0 0 8.45050462 0 42.2525249 14.7809081 50.7030295 14.7809081 33.8020194 29.561837 25.3515148 14.7809081 16.9010101 29.561837 8.45050462"> </polygon> </g> </g> </g>
+
</svg>

example/App.qml

@@ -1,28 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtMultimedia
-import FluentUI
-
-Window {
-    id:app
-    color: "#00000000"
-    //初始化一个MediaPlayer，解决macos切换到T_MediaPalyer页面崩溃问题
-    MediaPlayer{}
-    Component.onCompleted: {
-        FluApp.init(app,properties)
-        FluTheme.frameless = ("windows" === Qt.platform.os)
-        FluTheme.dark = false
-        FluApp.routes = {
-            "/":"qrc:/page/MainPage.qml",
-            "/about":"qrc:/page/AboutPage.qml",
-            "/login":"qrc:/page/LoginPage.qml",
-            "/chat":"qrc:/page/ChatPage.qml",
-            "/media":"qrc:/page/MediaPage.qml",
-        }
-        FluApp.initialRoute = "/"
-        FluApp.run()
-    }
-
-}

example/CMakeLists.txt

@@ -1,85 +1,172 @@
-cmake_minimum_required(VERSION 3.16)
-project(example)
+cmake_minimum_required(VERSION 3.20)
 
+project(example VERSION 1.0)
+
+#配置通用编译
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
 set(CMAKE_AUTOMOC ON)
 set(CMAKE_AUTORCC ON)
-set(CMAKE_AUTOUIC ON)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
-set(CMAKE_CXX_STANDARD 17)
+#判断FluentUI库类型
+if (FLUENTUI_BUILD_STATIC_LIB)
+    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
+endif ()
 
-file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
+#设置可执行文件输出目录
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
 
-if(CMAKE_SIZEOF_VOID_P EQUAL 8)
-  set(platform 64)
-else()
-  set(platform 32)
-endif()
+if (APPLE)
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
+else ()
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()
 
-if(CMAKE_BUILD_TYPE STREQUAL "Debug")
-  set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../bin/debug)
-else()
-  set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../bin/release)
-endif()
+#导入Qt相关依赖包
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network Widgets)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network Widgets)
 
-find_package(Qt6 COMPONENTS Core Quick QuickControls2 Concurrent Network Multimedia REQUIRED)
-
-set(SOURCES
-    ChatController.cpp
-    main.cpp
+#添加国际化脚本
+find_program(QT_LUPDATE NAMES lupdate lupdate-qt6)
+find_program(QT_LRELEASE NAMES lrelease lrelease-qt6)
+file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts)
+add_custom_target(Script-UpdateTranslations
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${CMAKE_COMMAND} -E make_directory ${APPLICATION_DIR_PATH}/i18n
+        COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
+        SOURCES ${TS_FILE_PATHS}
 )
 
-set(HEADERS
-    ChatController.h
+##生成版本信息头文件
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
+configure_file(
+        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
+        ${HEADER_FILE_VERSION_PATH}
 )
 
-set(RESOURCES
-    qml.qrc
-)
+#遍历所有Cpp文件
+file(GLOB_RECURSE CPP_FILES *.cpp *.h)
+foreach (filepath ${CPP_FILES})
+    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
+    list(APPEND sources_files ${filename})
+endforeach (filepath)
 
-set(RC_ICONS
-    favicon.ico
-)
+if (WIN32)
+    list(APPEND sources_files "src/app_dmp.h")
+endif ()
 
-qt_add_resources(QT_RESOURCES ${RESOURCES})
-
-add_executable(${PROJECT_NAME} ${SOURCES} ${HEADERS} ${QT_RESOURCES} ${RC_ICONS})
-
-if(WIN32)
-    if(CMAKE_C_COMPILER_ID STREQUAL "MSVC")
-        set(DLLPATH ${CMAKE_CURRENT_SOURCE_DIR}/../third/msvc/*.dll)
-    else()
-        set(DLLPATH ${CMAKE_CURRENT_SOURCE_DIR}/../third/mingw/*.dll)
-    endif()
-    string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
-    file(GLOB DLL_FILES ${DLLPATH})
-    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
-        COMMAND ${CMAKE_COMMAND} -E copy
-        ${DLL_FILES}
-        ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
+#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
+set(EXAMPLE_VERSION_RC_PATH "")
+if (WIN32)
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    configure_file(
+            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
+            ${EXAMPLE_VERSION_RC_PATH}
     )
-endif()
+    configure_file(
+            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
+            ${CMAKE_SOURCE_DIR}/package/InstallerScript.iss
+    )
+endif ()
 
-target_compile_definitions(${PROJECT_NAME} PRIVATE
-    QT_DEPRECATED_WARNINGS
-    QT_NO_WARNING_OUTPUT
+list(APPEND sources_files ${PROJECT_NAME}.qrc)
+
+#添加可执行文件
+if (WIN32)
+    list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
+endif ()
+if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+    qt_add_executable(${PROJECT_NAME}
+            MANUAL_FINALIZATION
+            ${sources_files}
+    )
+else ()
+    add_executable(${PROJECT_NAME}
+            ${sources_files}
+    )
+endif ()
+add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
+
+#复制程序运行所需要的动态库
+if (WIN32)
+    if (MSVC)
+        if (CMAKE_SIZEOF_VOID_P EQUAL 4)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+        elseif (CMAKE_SIZEOF_VOID_P EQUAL 8)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+        endif ()
+    elseif (MINGW)
+        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+    endif ()
+    file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()
+
+#复制FluentUI源码到运行目录下，用于脚手架生成
+file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
+file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
+
+#导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
+target_include_directories(${PROJECT_NAME} PRIVATE
+        ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )
 
+#如果是静态库则需要手动注册插件，导入FluentUI.h头文件
+if (FLUENTUI_BUILD_STATIC_LIB)
+    target_include_directories(${PROJECT_NAME} PRIVATE
+            ${CMAKE_SOURCE_DIR}/src
+    )
+endif ()
+
+#设置属性
+set_target_properties(${PROJECT_NAME} PROPERTIES
+        MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
+        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+        MACOSX_BUNDLE TRUE
+        WIN32_EXECUTABLE TRUE
+)
+
+#Release也支持日志打印代码位置
+target_compile_definitions(${PROJECT_NAME}
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
+)
+
+#目标文件链接库
 target_link_libraries(${PROJECT_NAME} PRIVATE
-    Qt6::Core
-    Qt6::Quick
-    Qt6::QuickControls2
-    Qt6::Concurrent
-    Qt6::Network
-    Qt6::Multimedia
+        Qt${QT_VERSION_MAJOR}::Quick
+        Qt${QT_VERSION_MAJOR}::Svg
+        Qt${QT_VERSION_MAJOR}::Network
+	Qt${QT_VERSION_MAJOR}::Widgets
+        fluentuiplugin
 )
 
-if(WIN32)
-    target_compile_definitions(${PROJECT_NAME} PRIVATE UNICODE WIN32 _WINDOWS)
-    target_link_libraries(${PROJECT_NAME} PRIVATE dwmapi user32)
-endif()
-
-if(APPLE)
-    set_target_properties(${PROJECT_NAME} PROPERTIES
-        MACOSX_BUNDLE_INFO_PLIST Info.plist
-    )
-endif()
+#添加部署脚本
+if (CMAKE_BUILD_TYPE MATCHES "Release")
+    if (APPLE)
+        find_program(QT_DEPLOY_QT NAMES macdeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
+                COMMENT "MacOs Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+    if (WIN32)
+        find_program(QT_DEPLOY_QT NAMES windeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
+                COMMENT "Windows Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+endif ()

example/ChatController.cpp

@@ -1,56 +0,0 @@
-#include "ChatController.h"
-
-ChatController::ChatController(QObject *parent)
-    : QObject{parent}
-{
-    isLoading(false);
-    networkManager = new QNetworkAccessManager(this);
-}
-
-
-void ChatController::sendMessage(const QString& text){
-    isLoading(true);
-    QUrl apiUrl("https://api.openai.com/v1/chat/completions");
-    QNetworkRequest request(apiUrl);
-    request.setHeader(QNetworkRequest::ContentTypeHeader, "application/json");
-    request.setRawHeader("Authorization", QString::fromStdString("Bearer %1").arg(QString::fromUtf8(QByteArray::fromBase64(baseKey.toUtf8()))).toUtf8());
-    QJsonObject requestData;
-    requestData.insert("model", "gpt-3.5-turbo");
-    messages.append(createMessage("user",text));
-    requestData.insert("messages", messages);
-    QJsonDocument requestDoc(requestData);
-    QByteArray requestDataBytes = requestDoc.toJson();
-    QNetworkReply* reply = networkManager->post(request, requestDataBytes);
-    connect(reply, &QNetworkReply::finished,this, [=]() {
-        if (reply->error() == QNetworkReply::NoError) {
-            QString responseString = QString::fromUtf8(reply->readAll());
-            qDebug() << responseString;
-            QJsonDocument doc = QJsonDocument::fromJson(responseString.toUtf8());
-            QJsonObject jsonObj = doc.object();
-            QString text = jsonObj.value("choices").toArray().at(0).toObject().value("message").toObject().value("content").toString();
-            if(text.isEmpty()){
-                text = "响应错误：content为空数据";
-            }else{
-                messages.append(createMessage("assistant",text));
-            }
-            responseData(text.trimmed());
-        } else {
-            responseData("网络错误："+reply->errorString());
-        }
-        isLoading(false);
-        reply->deleteLater();
-    });
-}
-
-QJsonObject ChatController::createMessage(const QString& role,const QString& content){
-    QJsonObject message;
-    message.insert("role",role);
-    message.insert("content",content);
-    return message;
-}
-
-void ChatController::clipText(const QString& text){
-    qDebug()<<text;
-    QClipboard *clipboard = QGuiApplication::clipboard();
-    clipboard->setText(text);
-}

example/ChatController.h

@@ -1,35 +0,0 @@
-#ifndef CHATCONTROLLER_H
-#define CHATCONTROLLER_H
-
-#include <QObject>
-#include <QNetworkAccessManager>
-#include <QNetworkReply>
-#include <QJsonObject>
-#include <QJsonDocument>
-#include <QJsonArray>
-#include <QGuiApplication>
-#include <QClipboard>
-#include <QByteArray>
-#include <QFile>
-#include "stdafx.h"
-
-class ChatController : public QObject
-{
-    Q_OBJECT
-    Q_PROPERTY_AUTO(bool,isLoading)
-    Q_PROPERTY_AUTO(QString,responseData);
-public:
-    explicit ChatController(QObject *parent = nullptr);
-
-    Q_INVOKABLE void sendMessage(const QString& text);
-    Q_INVOKABLE void clipText(const QString& text);
-private:
-    QJsonObject createMessage(const QString& role,const QString& content);
-
-private:
-    QNetworkAccessManager* networkManager;
-    QJsonArray messages;
-    QString baseKey = "c2stbXgxWm5MQkZ5TzhNYzNmRWl6eDZUM0JsYmtGSnNBWjNiakJjSXB6WGN3QW9KSk11";
-};
-
-#endif // CHATCONTROLLER_H

example/Info.plist

@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>NSAppTransportSecurity</key>
-	<dict>
-		<key>NSAllowsArbitraryLoads</key>
-		<true/>
-	</dict>
-	<key>CFBundleExecutable</key>
-	<string>example</string>
-	<key>CFBundleIconFile</key>
-	<string></string>
-	<key>CFBundleIdentifier</key>
-	<string>com.zhuzichu.example</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>LSMinimumSystemVersion</key>
-	<string>10.13</string>
-	<key>NOTE</key>
-	<string>This file was generated by Qt/QMake.</string>
-	<key>NSPrincipalClass</key>
-	<string>NSApplication</string>
-	<key>NSSupportsAutomaticGraphicsSwitching</key>
-	<true/>
-</dict>
-</plist>

example/README.md

@@ -0,0 +1,18 @@
+# FluentUI 脚手架开发说明
+
+## 代码说明
+
+文件编码格式请用utf-8不带bom，代码中最好不要含有中文（包括注释），中文可能会改变文件格式导致编译失败，还会出现乱码，显示中文请用国际化，c++中用tr函数，qml中用qsTr函数
+
+### 脚本说明
+
+1. **Script-UpdateTranslations**
+
+   用于更新ts与qm文件，当你的代码添加了tr或者qsTr函数后，执行这个脚本会更新ts文件，然后编写翻译后，再执行这个脚本，qm文件会更新生效
+
+2. **Script-DeployRelease**
+
+   执行Qt的windeployqt或macdeployqt命令，这个脚本只在windows与macos才有，linux不支持
+
+
+

example/T_Awesome.qml

@@ -1,74 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-
-FluContentPage {
-
-    title:"Awesome"
-
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-
-    FluTextBox{
-        id:text_box
-        placeholderText: "请输入关键字"
-        anchors{
-            topMargin: 20
-            top:parent.top
-        }
-    }
-
-    FluFilledButton{
-        text:"搜索"
-        anchors{
-            left: text_box.right
-            verticalCenter: text_box.verticalCenter
-            leftMargin: 14
-        }
-        onClicked: {
-            grid_view.model = FluApp.awesomelist(text_box.text)
-        }
-    }
-    GridView{
-        id:grid_view
-        cellWidth: 80
-        cellHeight: 80
-        clip: true
-        model:FluApp.awesomelist()
-        ScrollBar.vertical: FluScrollBar {}
-        anchors{
-            topMargin: 10
-            top:text_box.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        delegate: Item {
-            width: 68
-            height: 80
-            FluIconButton{
-                id:item_icon
-                iconSource:modelData.icon
-                anchors.horizontalCenter: parent.horizontalCenter
-                onClicked: {
-                    var text  ="FluentIcons."+modelData.name;
-                    FluApp.clipText(text)
-                    showSuccess("您复制了 "+text)
-                }
-            }
-            FluText {
-                id:item_name
-                font.pixelSize: 10
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: item_icon.bottom
-                width:parent.width
-                wrapMode: Text.WrapAnywhere
-                text: modelData.name
-                horizontalAlignment: Text.AlignHCenter
-            }
-        }
-    }
-}

example/T_Buttons.qml

@@ -1,372 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-    title:"Buttons"
-
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluText{
-        Layout.topMargin: 20
-        text:"支持Tab键切换焦点，空格键执行点击事件"
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluTextButton{
-            disabled:text_button_switch.selected
-            text:"Text Button"
-            onClicked: {
-                showInfo("点击Text Button")
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:text_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluTextButton{
-    text:"Text Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluButton{
-            disabled:button_switch.selected
-            text:"Standard Button"
-            onClicked: {
-                showInfo("点击StandardButton")
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluButton{
-    text:"Standard Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluFilledButton{
-            disabled:filled_button_switch.selected
-            text:"Filled Button"
-            onClicked: {
-                showWarning("点击FilledButton")
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:filled_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluFilledButton{
-    text:"Filled Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluToggleButton{
-            disabled:toggle_button_switch.selected
-            text:"Toggle Button"
-            onClicked: {
-               selected = !selected
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:toggle_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluToggleButton{
-    text:"Toggle Button"
-    onClicked: {
-        selected = !selected
-    }
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluIconButton{
-            iconSource:FluentIcons.ChromeCloseContrast
-            disabled:icon_button_switch.selected
-            iconSize: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            onClicked:{
-                showSuccess("点击IconButton")
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:icon_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluIconButton{
-    iconSource:FluentIcons.ChromeCloseContrast
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluDropDownButton{
-            disabled:drop_down_button_switch.selected
-            text:"DropDownButton"
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            items:[
-                FluMenuItem{
-                    text:"Menu_1"
-                },
-                FluMenuItem{
-                    text:"Menu_2"
-                },
-                FluMenuItem{
-                    text:"Menu_3"
-                },
-                FluMenuItem{
-                    text:"Menu_4"
-                }
-            ]
-        }
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:drop_down_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluDropDownButton{
-    text:"DropDownButton"
-    items:[
-        FluMenuItem{
-            text:"Menu_1"
-        },
-        FluMenuItem{
-            text:"Menu_2"
-        },
-        FluMenuItem{
-            text:"Menu_3"
-        },
-        FluMenuItem{
-            text:"Menu_4"
-        }
-    ]
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        ColumnLayout{
-            spacing: 8
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            Repeater{
-                id:repeater
-                property int selecIndex : 0
-                model: 3
-                delegate:  FluRadioButton{
-                    selected : repeater.selecIndex===index
-                    disabled:radio_button_switch.selected
-                    text:"Radio Button_"+index
-                    onClicked:{
-                        repeater.selecIndex = index
-                    }
-                }
-            }
-        }
-
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:radio_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluRadioButton{
-    selected:true
-    text:"Text Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluCheckBox{
-            disabled:check_box_switch.selected
-            text:"Check Box"
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:check_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluCheckBox{
-    text:"Check Box"
-}'
-    }
-}

example/T_CalendarPicker.qml

@@ -1,52 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"CalendarPicker"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 350
-        paddings: 10
-        FluCalendarView{
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluCalendarView{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluCalendarPicker{
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluCalendarPicker{
-
-}'
-    }
-
-}

example/T_Carousel.qml

@@ -1,50 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Carousel"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluText{
-                text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
-            }
-            FluCarousel{
-                id:carousel
-                Layout.topMargin: 20
-                Layout.leftMargin: 5
-                Component.onCompleted: {
-                    carousel.setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluCarousel{
-    width: 400
-    height: 300
-    Component.onCompleted: {
-        setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
-    }
-}'
-    }
-}

example/T_CheckBox.qml

@@ -1,38 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"CheckBox"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        Row{
-            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-            }
-            FluCheckBox{
-                text:"Text"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluCheckBox{
-    text:"Text"
-}'
-    }
-
-}

example/T_ColorPicker.qml

@@ -1,73 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"ColorPicker"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 280
-        Layout.topMargin: 20
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluText{
-                text:"此颜色组件是Github上的开源项目"
-            }
-            FluTextButton{
-                leftPadding: 0
-                rightPadding: 0
-                text:"https://github.com/rshest/qml-colorpicker"
-                onClicked: {
-                    Qt.openUrlExternally(text)
-                }
-            }
-            FluColorView{
-
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluColorView{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-
-        RowLayout{
-            FluText{
-                text:"点击选择颜色->"
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluColorPicker{
-
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluColorPicker{
-
-}'
-    }
-
-}
-

example/T_Dialog.qml

@@ -1,64 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Dialog"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-            FluButton{
-                anchors.verticalCenter: parent.verticalCenter
-                Layout.topMargin: 20
-                text:"Show Dialog"
-                onClicked: {
-                    dialog.open()
-                }
-            }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluContentDialog{
-    id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
-    onNegativeClicked:{
-        showSuccess("点击取消按钮")
-    }
-    positiveText:"确定"
-    onPositiveClicked:{
-        showSuccess("点击确定按钮")
-    }
-}
-dialog.open()
-'
-    }
-
-    FluContentDialog{
-        id:dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
-        }
-        positiveText:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
-        }
-    }
-
-
-}

example/T_Expander.qml

@@ -1,109 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Expander"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: layout_column.height+40
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            id:layout_column
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-
-            FluExpander{
-                headerText:"打开一个单选框"
-                Layout.topMargin: 20
-                Item{
-                    anchors.fill: parent
-                    ColumnLayout{
-                        spacing: 8
-                        anchors{
-                            top: parent.top
-                            left: parent.left
-                            topMargin: 15
-                            leftMargin: 15
-                        }
-                        Repeater{
-                            id:repeater
-                            property int selecIndex : 0
-                            model: 3
-                            delegate:  FluRadioButton{
-                                selected : repeater.selecIndex===index
-                                text:"Radio Button_"+index
-                                onClicked:{
-                                    repeater.selecIndex = index
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            FluExpander{
-                Layout.topMargin: 20
-                headerText:"打开一个滑动文本框"
-                Item{
-                    anchors.fill: parent
-                    Flickable{
-                        id:scrollview
-                        width: parent.width
-                        height: parent.height
-                        contentWidth: width
-                        contentHeight: text_info.height
-                        ScrollBar.vertical: FluScrollBar {}
-                        FluText{
-                            id:text_info
-                            width: scrollview.width
-                            wrapMode: Text.WrapAnywhere
-                            padding: 14
-                            text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
-                        }
-                    }
-                }
-            }
-
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluExpander{
-    headerText:"打开一个单选框"
-    Item{
-        anchors.fill: parent
-        Flickable{
-            width: parent.width
-            height: parent.height
-            contentWidth: width
-            contentHeight: text_info.height
-            ScrollBar.vertical: FluScrollBar {}
-            FluText{
-                id:text_info
-                width: scrollview.width
-                wrapMode: Text.WrapAnywhere
-                padding: 14
-                text:"先帝创业未半而中道崩殂，今天下三分......""
-            }
-        }
-    }
-}'
-    }
-
-
-}

example/T_InfoBar.qml

@@ -1,63 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"InfoBar"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 200
-        paddings: 10
-        ColumnLayout{
-            spacing: 14
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluButton{
-                text:"Info"
-                onClicked: {
-                    showInfo("这是一个Info样式的InfoBar")
-                }
-            }
-            FluButton{
-                text:"Warning"
-                onClicked: {
-                    showWarning("这是一个Warning样式的InfoBar")
-                }
-            }
-            FluButton{
-                text:"Error"
-                onClicked: {
-                    showError("这是一个Error样式的InfoBar")
-                }
-            }
-            FluButton{
-                text:"Success"
-                onClicked: {
-                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'showInfo("这是一个Info样式的InfoBar")
-
-showWarning("这是一个Warning样式的InfoBar")
-
-showError("这是一个Error样式的InfoBar")
-
-showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
-    }
-}

example/T_MediaPlayer.qml

@@ -1,65 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"MediaPlayer"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    onVisibleChanged: {
-        if(visible){
-            player.play()
-        }else{
-            player.pause()
-        }
-    }
-    FluArea{
-        Layout.fillWidth: true
-        height: 320
-        Layout.topMargin: 20
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluMediaPlayer{
-                id:player
-                source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluMediaPlayer{
-    id:player
-    source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-}
-'
-    }
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-        FluButton{
-            text:"跳转到视频播放器窗口"
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked:{
-                FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
-            }
-        }
-    }
-
-
-
-
-}
-

example/T_Menu.qml

@@ -1,91 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Menu"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            id:layout_column
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-
-            FluButton{
-                text:"左击菜单"
-                Layout.topMargin: 20
-                onClicked:{
-                    menu.popup()
-                }
-            }
-
-            FluButton{
-                text:"右击菜单"
-                Layout.topMargin: 20
-                onClicked: {
-                    showSuccess("请按鼠标右击")
-                }
-                MouseArea{
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton
-                    onClicked: {
-                        menu.popup()
-                    }
-                }
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluMenu{
-    id:menu
-    FluMenuItem:{
-        text:"删除"
-        onClicked: {
-            showError("删除")
-        }
-    }
-    FluMenuItem:{
-        text:"修改"
-        onClicked: {
-            showInfo"修改")
-        }
-    }
-}
-menu.popup()
-'
-    }
-
-    FluMenu{
-        id:menu
-        FluMenuItem{
-            text:"删除"
-            onClicked: {
-                showError("删除")
-            }
-        }
-        FluMenuItem{
-            text:"修改"
-            onClicked: {
-                showInfo("修改")
-            }
-        }
-    }
-
-}

example/T_MultiWindow.qml

@@ -1,107 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    property string password: ""
-    property var loginPageRegister: registerForPageResult("/login")
-
-    title:"MultiWindow"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    Connections{
-        target: loginPageRegister
-        function onResult(data)
-        {
-            password = data.password
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"页面跳转，不携带任何参数"
-            }
-            FluButton{
-                text:"点击跳转"
-                onClicked: {
-                    FluApp.navigate("/about")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluButton{
-    text:"点击跳转"
-    onClicked: {
-        FluApp.navigate("/about")
-    }
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 130
-        paddings: 10
-        Layout.topMargin: 20
-
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"页面跳转，并携带参数用户名：zhuzichu"
-            }
-            FluButton{
-                text:"点击跳转到登录"
-                onClicked: {
-                    loginPageRegister.launch({username:"zhuzichu"})
-                }
-            }
-            FluText{
-                text:"登录窗口返回过来的密码->"+password
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'property var loginPageRegister: registerForPageResult("/login")
-
-Connections{
-    target: loginPageRegister
-    function onResult(data)
-    {
-        password = data.password
-    }
-}
-
-FluButton{
-    text:"点击跳转"
-    onClicked: {
-        loginPageRegister.launch({username:"zhuzichu"})
-    }
-}
-'
-    }
-
-}

example/T_Pivot.qml

@@ -1,82 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Pivot"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 400
-        paddings: 10
-
-        FluPivot{
-            anchors.fill: parent
-            FluPivotItem{
-                title:"All"
-                contentItem:FluText{
-                    text:"All emails go here."
-                }
-            }
-            FluPivotItem{
-                title:"Unread"
-                contentItem:FluText{
-                    text:"Unread emails go here."
-                }
-            }
-            FluPivotItem{
-                title:"Flagged"
-                contentItem:FluText{
-                    text:"Flagged emails go here."
-                }
-            }
-            FluPivotItem{
-                title:"Urgent"
-                contentItem:FluText{
-                    text:"Urgent emails go here."
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluPivot{
-    anchors.fill: parent
-    FluPivotItem:{
-        text:"All"
-        contentItem: FluText{
-            text:"All emails go here."
-        }
-    }
-    FluPivotItem:{
-        text:"Unread"
-        contentItem: FluText{
-            text:"Unread emails go here."
-        }
-    }
-    FluPivotItem:{
-        text:"Flagged"
-        contentItem: FluText{
-            text:"Flagged emails go here."
-        }
-    }
-    FluPivotItem:{
-        text:"Urgent"
-        contentItem: FluText{
-            text:"Urgent emails go here."
-        }
-    }
-}
-'
-    }
-
-}

example/T_Progress.qml

@@ -1,69 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Progress"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 260
-        paddings: 10
-        ColumnLayout{
-            spacing: 20
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluProgressBar{
-            }
-            FluProgressRing{
-            }
-            FluProgressBar{
-                id:progress_bar
-                indeterminate: false
-            }
-            FluProgressRing{
-                id:progress_ring
-                indeterminate: false
-            }
-            FluSlider{
-                value:50
-                onValueChanged:{
-                    progress_bar.progress = value/100
-                    progress_ring.progress = value/100
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluProgressBar{
-
-}
-
-FluProgressRing{
-
-}
-
-FluProgressBar{
-    indeterminate: false
-}
-
-FluProgressRing{
-    indeterminate: false
-}'
-    }
-
-
-
-}

example/T_Rectangle.qml

@@ -1,151 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Rectangle"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 480
-        paddings: 10
-
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-
-            RowLayout{
-                Layout.topMargin: 20
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#0078d4"
-                    radius:[0,0,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#744da9"
-                    radius:[15,15,15,15]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#ffeb3b"
-                    radius:[15,0,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#f7630c"
-                    radius:[0,15,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#e71123"
-                    radius:[0,0,15,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#b4009e"
-                    radius:[0,0,0,15]
-                }
-            }
-            FluText{
-                text:"配合图片使用"
-                fontStyle: FluText.SubTitle
-                Layout.topMargin: 20
-            }
-            RowLayout{
-                spacing: 14
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[25,0,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        source: "qrc:/res/svg/avatar_1.svg"
-                        sourceSize: Qt.size(width,height)
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[10,10,10,10]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/res/svg/avatar_2.svg"
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[25,25,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/res/svg/avatar_3.svg"
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[0,25,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/res/svg/avatar_4.svg"
-                    }
-                }
-            }
-            FluRectangle{
-                width: 1080/5
-                height: 1439/5
-                radius:[25,25,25,25]
-                Image {
-                    asynchronous: true
-                    source: "qrc:/res/image/image_huoyin.webp"
-                    anchors.fill: parent
-                    sourceSize: Qt.size(width,height)
-                }
-                Layout.topMargin: 10
-            }
-
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluRectangle{
-    radius: [25,25,25,25]
-    width: 50
-    height: 50
-    Image{
-        asynchronous: true
-        anchors.fill: parent
-        source: "qrc:/res/svg/avatar_4.svg"
-        sourceSize: Qt.size(width,height)
-    }
-}'
-    }
-
-
-}

example/T_Slider.qml

@@ -1,56 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "./component"
-import FluentUI
-
-FluScrollablePage{
-
-    title:"Slider"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        FluSlider{
-            value: 50
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluSlider{
-    value:50
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 200
-        paddings: 10
-        Layout.topMargin: 20
-        FluSlider{
-            value: 50
-            vertical:true
-            anchors.left: parent.left
-            anchors.leftMargin: 20
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluSlider{
-    vertical:true
-    value:50
-}'
-    }
-
-
-}

example/T_StatusView.qml

@@ -1,91 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"StatusView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_status_mode
-                Layout.preferredWidth: 140
-                text:"Loading"
-                items:[
-                    FluMenuItem{
-                        text:"Loading"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Loading
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Empty"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Empty
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Error"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Error
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Success"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Success
-                        }
-                    }
-                ]
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        height: 380
-        paddings: 10
-        FluStatusView{
-            id:status_view
-            anchors.fill: parent
-            onErrorClicked:{
-                showError("点击重新加载")
-            }
-            Rectangle {
-                anchors.fill: parent
-                color:FluTheme.primaryColor.dark
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluStatusView{
-    anchors.fill: parent
-    statusMode: FluStatusView.Loading
-    Rectangle{
-        anchors.fill: parent
-        color:FluTheme.primaryColor.dark
-    }
-}'
-    }
-
-}

example/T_TabView.qml

@@ -1,137 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"TabView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-
-    Component{
-        id:com_page
-        Rectangle{
-            anchors.fill: parent
-            color: argument
-        }
-    }
-
-    function newTab(){
-        tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
-    }
-
-    Component.onCompleted: {
-        newTab()
-        newTab()
-        newTab()
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_tab_width_behavior
-                Layout.preferredWidth: 140
-                text:"Equal"
-                items:[
-                    FluMenuItem{
-                        text:"Equal"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.Equal
-                        }
-                    },
-                    FluMenuItem{
-                        text:"SizeToContent"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Compact"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.Compact
-                        }
-                    }
-                ]
-            }
-            FluDropDownButton{
-                id:btn_close_button_visibility
-                text:"Always"
-                Layout.preferredWidth: 120
-                items:[
-                    FluMenuItem{
-                        text:"Nerver"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.Nerver
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Always"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.Always
-                        }
-                    },
-                    FluMenuItem{
-                        text:"OnHover"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.OnHover
-                        }
-                    }
-                ]
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 15
-        height: 400
-        paddings: 10
-        FluTabView{
-            id:tab_view
-            onNewPressed:{
-                newTab()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluTabView{
-    anchors.fill: parent
-    Component.onCompleted: {
-        newTab()
-        newTab()
-        newTab()
-    }
-    Component{
-        id:com_page
-        Rectangle{
-            anchors.fill: parent
-            color: argument
-        }
-    }
-    function newTab(){
-        tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument)
-    }
-}
-'
-    }
-
-}

example/T_TableView.qml

@@ -1,160 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"TableView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    Component.onCompleted: {
-        const columns = [
-                          {
-                              title: '姓名',
-                              dataIndex: 'name',
-                              width:100
-                          },
-                          {
-                              title: '年龄',
-                              dataIndex: 'age',
-                              width:100
-                          },
-                          {
-                              title: '住址',
-                              dataIndex: 'address',
-                              width:200
-                          },
-                          {
-                              title: '别名',
-                              dataIndex: 'nickname',
-                              width:100
-                          },
-                          {
-                              title: '操作',
-                              dataIndex: 'action',
-                              width:100
-                          },
-                      ];
-        table_view.columns = columns
-        loadData(1,10)
-    }
-
-    FluTableView{
-        id:table_view
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        pageCurrent:1
-        pageCount:10
-        itemCount: 1000
-        onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
-    }
-
-    Component{
-        id:com_action
-        Item{
-            Row{
-                anchors.centerIn: parent
-                spacing: 10
-                FluFilledButton{
-                    text:"编辑"
-                    topPadding:3
-                    bottomPadding:3
-                    leftPadding:3
-                    rightPadding:3
-                    onClicked:{
-                        console.debug(dataModel.index)
-                        showSuccess(JSON.stringify(dataObject))
-                    }
-                }
-                FluFilledButton{
-                    text:"删除"
-                    topPadding:3
-                    bottomPadding:3
-                    leftPadding:3
-                    rightPadding:3
-                    onClicked:{
-                        showError(JSON.stringify(dataObject))
-                    }
-                }
-            }
-        }
-    }
-
-    function loadData(page,count){
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                name: "孙悟空%1".arg(((page-1)*count+i)),
-                                age: 500,
-                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
-                                nickname: "齐天大圣",
-                                action:com_action
-                            })
-        }
-        table_view.dataSource = dataSource
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        code:'FluTableView{
-    id:table_view
-    Layout.fillWidth: true
-    Layout.topMargin: 20
-    width:parent.width
-    pageCurrent:1
-    pageCount:10
-    itemCount: 1000
-    onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
-    Component.onCompleted: {
-        const columns = [
-                          {
-                              title: "姓名",
-                              dataIndex: "name",
-                              width:100
-                          },
-                          {
-                              title: "年龄",
-                              dataIndex: "age",
-                              width:100
-                          },
-                          {
-                              title: "住址",
-                              dataIndex: "address",
-                              width:200
-                          },
-                          {
-                              title: "别名",
-                              dataIndex: "nickname",
-                              width:100
-                          }
-                      ];
-            table_view.columns = columns
-        const dataSource = [
-                          {
-                              name: "孙悟空”,
-                              age: 500,
-                              address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
-                    nickname:"齐天大圣"
-                          }
-                      ];
-        table_view.dataSource = columns
-    }
-}'
-    }
-
-
-
-}

example/T_TextBox.qml

@@ -1,151 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"TextBox"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluTextBox{
-            Layout.topMargin: 20
-            placeholderText: "单行输入框"
-            Layout.preferredWidth: 300
-            disabled:text_box_switch.selected
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:text_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluTextBox{
-    placeholderText:"单行输入框"
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluMultilineTextBox{
-            Layout.topMargin: 20
-            placeholderText: "多行输入框"
-            Layout.preferredWidth: 300
-            disabled:text_box_multi_switch.selected
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:text_box_multi_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluMultilineTextBox{
-    placeholderText:"多行输入框"
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluAutoSuggestBox{
-            Layout.topMargin: 20
-            placeholderText: "AutoSuggestBox"
-            Layout.preferredWidth: 300
-            items:generateRandomNames(100)
-            disabled:text_box_suggest_switch.selected
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:text_box_suggest_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluAutoSuggestBox{
-    placeholderText:"AutoSuggestBox"
-}'
-    }
-
-
-    function generateRandomNames(numNames) {
-        const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-        const names = [];
-        function generateRandomName() {
-            const nameLength = Math.floor(Math.random() * 5) + 4;
-            let name = '';
-            for (let i = 0; i < nameLength; i++) {
-                const letterIndex = Math.floor(Math.random() * 26);
-                name += alphabet.charAt(letterIndex);
-            }
-            return name;
-        }
-        for (let i = 0; i < numNames; i++) {
-            const name = generateRandomName();
-            names.push({title:name});
-        }
-        return names;
-    }
-
-
-}

example/T_Theme.qml

@@ -1,88 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"Theme"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 210
-        paddings: 10
-        ColumnLayout{
-            spacing:0
-            anchors{
-                left: parent.left
-            }
-            RowLayout{
-                Layout.topMargin: 10
-                Repeater{
-                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  FluRectangle{
-                        width: 42
-                        height: 42
-                        radius: [4,4,4,4]
-                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
-                        FluIcon {
-                            anchors.centerIn: parent
-                            iconSource: FluentIcons.AcceptMedium
-                            iconSize: 15
-                            visible: modelData === FluTheme.primaryColor
-                            color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                        }
-                        MouseArea{
-                            id:mouse_item
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            onClicked: {
-                                FluTheme.primaryColor = modelData
-                            }
-                        }
-                    }
-                }
-            }
-            FluText{
-                text:"夜间模式"
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                selected: FluTheme.dark
-                clickFunc:function(){
-                    FluTheme.dark = !FluTheme.dark
-                }
-            }
-            FluText{
-                text:"native文本渲染"
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                selected: FluTheme.nativeText
-                clickFunc:function(){
-                    FluTheme.nativeText = !FluTheme.nativeText
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluTheme.primaryColor = FluColors.Orange
-
-FluTheme.dark = true
-
-FluTheme.nativeText = true
-'
-    }
-
-
-}

example/T_TimePicker.qml

@@ -1,75 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"TimePicker"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-
-            FluText{
-                text:"hourFormat=FluTimePicker.H"
-            }
-
-            FluTimePicker{
-            }
-
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluTimePicker{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-
-            FluText{
-                text:"hourFormat=FluTimePicker.H"
-            }
-
-            FluTimePicker{
-                 hourFormat:FluTimePicker.HH
-            }
-
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluTimePicker{
-    hourFormat:FluTimePicker.HH
-}'
-    }
-
-}

example/T_ToggleSwitch.qml

@@ -1,39 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage{
-
-    title:"ToggleSwitch"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        Row{
-            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluToggleSwitch{
-            }
-            FluToggleSwitch{
-                text:"Text"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluToggleSwitch{
-    text:"Text"
-}'
-    }
-
-
-}

example/T_TreeView.qml

@@ -1,161 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "./component"
-
-FluScrollablePage {
-
-    title:"TreeView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    function randomName() {
-        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
-        return names[Math.floor(Math.random() * names.length)]
-    }
-
-    function randomCompany() {
-        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
-        return companies[Math.floor(Math.random() * companies.length)]
-    }
-
-    function randomDepartment() {
-        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
-        return departments[Math.floor(Math.random() * departments.length)]
-    }
-
-    function createEmployee() {
-        var name = randomName()
-        return tree_view.createItem(name, false)
-    }
-
-    function createSubtree(numEmployees) {
-        var employees = []
-        for (var i = 0; i < numEmployees; i++) {
-            employees.push(createEmployee())
-        }
-        return tree_view.createItem(randomDepartment(), true, employees)
-    }
-
-    function createOrg(numLevels, numSubtrees, numEmployees) {
-        if (numLevels === 0) {
-            return []
-        }
-        var subtrees = []
-        for (var i = 0; i < numSubtrees; i++) {
-            subtrees.push(createSubtree(numEmployees))
-        }
-        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
-    }
-
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_selection_model
-                Layout.preferredWidth: 140
-                text:"None"
-                items:[
-                    FluMenuItem{
-                        text:"None"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.Equal
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Single"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.SizeToContent
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Muiltple"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.Compact
-                        }
-                    }
-                ]
-            }
-            FluFilledButton{
-                text:"获取选中的数据"
-                onClicked: {
-                    if(tree_view.selectionMode === FluTreeView.None){
-                        showError("当前非选择模式,没有选中的数据")
-                    }
-                    if(tree_view.selectionMode === FluTreeView.Single){
-                        if(!tree_view.signleData()){
-                            showError("没有选中数据")
-                            return
-                        }
-                        showSuccess(tree_view.signleData().text)
-                    }
-                    if(tree_view.selectionMode === FluTreeView.Multiple){
-                        if(tree_view.multipData().length===0){
-                            showError("没有选中数据")
-                            return
-                        }
-                        var info = []
-                        tree_view.multipData().map((value)=>info.push(value.text))
-                        showSuccess(info.join(","))
-                    }
-                }
-            }
-        }
-    }
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        paddings: 10
-        height: 400
-        FluTreeView{
-            id:tree_view
-            width:240
-            anchors{
-                top:parent.top
-                left:parent.left
-                bottom:parent.bottom
-            }
-            onItemClicked:
-                (model)=>{
-                    showSuccess(model.text)
-                }
-
-            Component.onCompleted: {
-                var org = createOrg(3, 3, 3)
-                createItem()
-                updateData(org)
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        code:'FluTreeView{
-    id:tree_view
-    width:240
-    height:600
-    Component.onCompleted: {
-        var datas = []
-        datas.push(createItem("Node1",false))
-        datas.push(createItem("Node2",false))
-        datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
-        updateData(datas)
-    }
-}
-'
-    }
-
-
-}

example/T_Typography.qml

@@ -1,94 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
-
-FluContentPage {
-
-    title: "Typography"
-    property int textSize: FluTheme.textSize
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-
-    Component.onCompleted: {
-        slider.seek(0)
-    }
-
-    FluArea{
-        anchors{
-            top:parent.top
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            topMargin: 20
-        }
-        paddings: 10
-        ColumnLayout{
-            spacing: 0
-            FluText{
-                text:"Display"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.Display
-            }
-            FluText{
-                text:"Title Large"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.TitleLarge
-            }
-            FluText{
-                text:"Title"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.Title
-            }
-            FluText{
-                text:"Subtitle"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.SubTitle
-            }
-            FluText{
-                text:"Body Strong"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.BodyStrong
-            }
-            FluText{
-                text:"Body"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.Body
-            }
-            FluText{
-                text:"Caption"
-                padding: 0
-                pixelSize: textSize
-                fontStyle: FluText.Caption
-            }
-        }
-
-        FluSlider{
-            id:slider
-            vertical:true
-            anchors{
-                right: parent.right
-                rightMargin: 45
-                top: parent.top
-                topMargin: 30
-            }
-            onValueChanged:{
-                textSize = value/100*6+FluTheme.textSize
-            }
-        }
-
-    }
-
-
-
-
-
-
-}

example/component/CodeExpander.qml

@@ -1,130 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-
-FluExpander{
-
-    property string code: ""
-
-    headerText: "Source"
-    contentHeight:content.height
-
-    FluMultilineTextBox{
-        id:content
-        width:parent.width
-        readOnly:true
-        text:highlightQmlCode(code)
-        focus:false
-        textFormat: FluMultilineTextBox.RichText
-        KeyNavigation.priority: KeyNavigation.BeforeItem
-        background:Rectangle{
-            radius: 4
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-            border.width: 1
-        }
-    }
-
-    FluIconButton{
-        iconSource:FluentIcons.Copy
-        anchors{
-            right: parent.right
-            top: parent.top
-            rightMargin: 5
-            topMargin: 5
-        }
-        onClicked:{
-            FluApp.clipText(content.text)
-            showSuccess("复制成功")
-        }
-    }
-
-    function htmlEncode(e){
-      var i,s;
-      for(i in s={
-        "&":/&/g,//""//":/"/g,"'":/'/g,
-        "<":/</g,">":/>/g,"<br/>":/\n/g,
-        " ":/ /g,"  ":/\t/g
-      })e=e.replace(s[i],i);
-      return e;
-    }
-
-    function highlightQmlCode(code) {
-      // 定义 QML 关键字列表
-      var qmlKeywords = [
-        "FluTextButton",
-        "FluAppBar",
-          "FluAutoSuggestBox",
-          "FluBadge",
-          "FluButton",
-          "FluCalendarPicker",
-          "FluCalendarView",
-          "FluCarousel",
-          "FluCheckBox",
-          "FluColorPicker",
-          "FluColorView",
-          "FluComboBox",
-          "FluContentDialog",
-          "FluContentPage",
-          "FluControl",
-          "FluDatePicker",
-          "FluDivider",
-          "FluDropDownButton",
-          "FluExpander",
-          "FluFilledButton",
-          "FluFlipView",
-          "FluFocusRectangle",
-          "FluIcon",
-          "FluIconButton",
-          "FluInfoBar",
-          "FluItem",
-          "FluMediaPlayer",
-          "FluMenu",
-          "FluMenuItem",
-          "FluMultilineTextBox",
-          "FluNavigationView",
-          "FluObject",
-          "FluPaneItem",
-          "FluPaneItemExpander",
-          "FluPaneItemHeader",
-          "FluPaneItemSeparator",
-          "FluPivot",
-          "FluPivotItem",
-          "FluProgressBar",
-          "FluProgressRing",
-          "FluRadioButton",
-          "FluRectangle",
-          "FluScrollablePage",
-          "FluScrollBar",
-          "FluShadow",
-          "FluSlider",
-          "FluTabView",
-          "FluText",
-          "FluTextArea",
-          "FluTextBox",
-          "FluTextBoxBackground",
-          "FluTextBoxMenu",
-          "FluTextButton",
-          "FluTextFiled",
-          "FluTimePicker",
-          "FluToggleSwitch",
-          "FluTooltip",
-          "FluTreeView",
-          "FluWindow",
-          "FluWindowResize",
-          "FluToggleButton",
-          "FluTableView",
-          "FluColors",
-          "FluTheme",
-          "FluStatusView"
-      ];
-      code = code.replace(/\n/g, "<br>");
-      code = code.replace(/ /g, "&nbsp;");
-      return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
-    }
-
-
-
-}

example/example.pro

@@ -1,43 +0,0 @@
-QT += quick quickcontrols2 concurrent network multimedia
-CONFIG += c++17
-DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
-
-HEADERS += \
-    ChatController.h
-
-SOURCES += \
-        ChatController.cpp \
-        main.cpp
-
-RESOURCES += qml.qrc
-
-RC_ICONS = favicon.ico
-
-QML_IMPORT_PATH =
-QML_DESIGNER_IMPORT_PATH =
-
-CONFIG(debug,debug|release) {
-    DESTDIR = $$absolute_path($${_PRO_FILE_PWD_}/../bin/debug)
-} else {
-    DESTDIR = $$absolute_path($${_PRO_FILE_PWD_}/../bin/release)
-}
-
-win32 {
-
-contains(QMAKE_CC, cl) {
-    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/msvc/*.dll) $$DESTDIR
-    QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
-} else {
-    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/mingw/*.dll) $$DESTDIR
-    QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
-}
-
-}
-
-qnx: target.path = /tmp/$${TARGET}/bin
-else: unix:!android: target.path = /opt/$${TARGET}/bin
-!isEmpty(target.path): INSTALLS += target
-
-mac: {
-    QMAKE_INFO_PLIST = Info.plist
-}

example/example.qrc

@@ -1,7 +1,5 @@
 <RCC>
-    <qresource prefix="/">
-        <file>App.qml</file>
-        <file>res/image/image_huoyin.webp</file>
+    <qresource prefix="/example">
         <file>res/svg/avatar_1.svg</file>
         <file>res/svg/avatar_2.svg</file>
         <file>res/svg/avatar_3.svg</file>
@@ -14,40 +12,11 @@
         <file>res/svg/avatar_10.svg</file>
         <file>res/svg/avatar_11.svg</file>
         <file>res/svg/avatar_12.svg</file>
-        <file>page/AboutPage.qml</file>
-        <file>page/MainPage.qml</file>
-        <file>page/LoginPage.qml</file>
-        <file>T_ToggleSwitch.qml</file>
-        <file>T_Typography.qml</file>
-        <file>T_Awesome.qml</file>
-        <file>T_Buttons.qml</file>
-        <file>T_Rectangle.qml</file>
-        <file>T_InfoBar.qml</file>
-        <file>T_Progress.qml</file>
-        <file>T_Slider.qml</file>
-        <file>T_TextBox.qml</file>
-        <file>T_Theme.qml</file>
-        <file>T_Dialog.qml</file>
-        <file>T_TreeView.qml</file>
-        <file>T_Expander.qml</file>
-        <file>T_TimePicker.qml</file>
-        <file>T_DatePicker.qml</file>
-        <file>T_MultiWindow.qml</file>
-        <file>T_Menu.qml</file>
         <file>res/image/banner_1.jpg</file>
         <file>res/image/banner_2.jpg</file>
         <file>res/image/banner_3.jpg</file>
         <file>res/image/logo_openai.png</file>
-        <file>page/ChatPage.qml</file>
-        <file>T_Tooltip.qml</file>
-        <file>T_Badge.qml</file>
-        <file>T_CalendarPicker.qml</file>
-        <file>T_ColorPicker.qml</file>
-        <file>T_Carousel.qml</file>
-        <file>T_MediaPlayer.qml</file>
-        <file>T_TabView.qml</file>
         <file>res/image/favicon.ico</file>
-        <file>T_Home.qml</file>
         <file>res/image/bg_home_header.png</file>
         <file>res/image/ic_home_github.png</file>
         <file>res/image/control/Acrylic.png</file>
@@ -148,15 +117,102 @@
         <file>res/image/control/Viewbox.png</file>
         <file>res/image/control/WebView.png</file>
         <file>res/image/control/XamlUICommand.png</file>
-        <file>T_CheckBox.qml</file>
-        <file>global/ItemsOriginal.qml</file>
-        <file>global/qmldir</file>
-        <file>global/ItemsFooter.qml</file>
-        <file>page/MediaPage.qml</file>
-        <file>T_FlipView.qml</file>
-        <file>T_Pivot.qml</file>
-        <file>component/CodeExpander.qml</file>
-        <file>T_TableView.qml</file>
-        <file>T_StatusView.qml</file>
+        <file>res/svg/home.svg</file>
+        <file>res/svg/home_dark.svg</file>
+        <file>res/image/qrcode_wx.jpg</file>
+        <file>res/image/qrcode_zfb.jpg</file>
+        <file>qml/App.qml</file>
+        <file>qml/component/CodeExpander.qml</file>
+        <file>qml/global/ItemsFooter.qml</file>
+        <file>qml/global/ItemsOriginal.qml</file>
+        <file>qml/global/qmldir</file>
+        <file>qml/page/T_Acrylic.qml</file>
+        <file>qml/page/T_Badge.qml</file>
+        <file>qml/page/T_BreadcrumbBar.qml</file>
+        <file>qml/page/T_Buttons.qml</file>
+        <file>qml/page/T_CalendarPicker.qml</file>
+        <file>qml/page/T_Captcha.qml</file>
+        <file>qml/page/T_Carousel.qml</file>
+        <file>qml/page/T_CheckBox.qml</file>
+        <file>qml/page/T_ColorPicker.qml</file>
+        <file>qml/page/T_ComboBox.qml</file>
+        <file>qml/page/T_DatePicker.qml</file>
+        <file>qml/page/T_Dialog.qml</file>
+        <file>qml/page/T_Expander.qml</file>
+        <file>qml/page/T_FlipView.qml</file>
+        <file>qml/page/T_Home.qml</file>
+        <file>qml/page/T_Image.qml</file>
+        <file>qml/page/T_InfoBar.qml</file>
+        <file>qml/page/T_Menu.qml</file>
+        <file>qml/page/T_MultiWindow.qml</file>
+        <file>qml/page/T_Pagination.qml</file>
+        <file>qml/page/T_Pivot.qml</file>
+        <file>qml/page/T_Progress.qml</file>
+        <file>qml/page/T_QRCode.qml</file>
+        <file>qml/page/T_RadioButton.qml</file>
+        <file>qml/page/T_RatingControl.qml</file>
+        <file>qml/page/T_Rectangle.qml</file>
+        <file>qml/page/T_RemoteLoader.qml</file>
+        <file>qml/page/T_Settings.qml</file>
+        <file>qml/page/T_Slider.qml</file>
+        <file>qml/page/T_StatusLayout.qml</file>
+        <file>qml/page/T_TableView.qml</file>
+        <file>qml/page/T_TabView.qml</file>
+        <file>qml/page/T_Text.qml</file>
+        <file>qml/page/T_TextBox.qml</file>
+        <file>qml/page/T_Theme.qml</file>
+        <file>qml/page/T_Timeline.qml</file>
+        <file>qml/page/T_TimePicker.qml</file>
+        <file>qml/page/T_ToggleSwitch.qml</file>
+        <file>qml/page/T_Tooltip.qml</file>
+        <file>qml/page/T_Tour.qml</file>
+        <file>qml/page/T_TreeView.qml</file>
+        <file>qml/page/T_Typography.qml</file>
+        <file>qml/page/T_Watermark.qml</file>
+        <file>qml/window/AboutWindow.qml</file>
+        <file>qml/window/HotloadWindow.qml</file>
+        <file>qml/window/LoginWindow.qml</file>
+        <file>qml/window/MainWindow.qml</file>
+        <file>qml/window/SingleInstanceWindow.qml</file>
+        <file>qml/window/SingleTaskWindow.qml</file>
+        <file>qml/window/StandardWindow.qml</file>
+        <file>res/image/image_1.jpg</file>
+        <file>qml/window/PageWindow.qml</file>
+        <file>qml/page/T_StaggeredLayout.qml</file>
+        <file>qml/page/T_Clip.qml</file>
+        <file>qml/page/T_Network.qml</file>
+        <file>qml/page/T_ShortcutPicker.qml</file>
+        <file>qml/chart/T_BarChart.qml</file>
+        <file>qml/chart/T_LineChart.qml</file>
+        <file>qml/chart/T_PieChart.qml</file>
+        <file>qml/chart/T_RadarChart.qml</file>
+        <file>qml/chart/T_ScatterChart.qml</file>
+        <file>qml/chart/T_BubbleChart.qml</file>
+        <file>qml/chart/T_PolarAreaChart.qml</file>
+        <file>res/image/ic_crash.png</file>
+        <file>qml/window/CrashWindow.qml</file>
+        <file>qml/page/T_SplitLayout.qml</file>
+        <file>res/template/CMakeLists.txt.in</file>
+        <file>res/template/src/App.qml.in</file>
+        <file>res/template/src/CMakeLists.txt.in</file>
+        <file>res/template/src/en_US.ts.in</file>
+        <file>res/template/src/logo.ico.in</file>
+        <file>res/template/src/main.cpp.in</file>
+        <file>res/template/src/main.qml.in</file>
+        <file>res/template/src/qml.qrc.in</file>
+        <file>res/template/src/zh_CN.ts.in</file>
+        <file>res/template/src/README.md.in</file>
+        <file>qml/global/GlobalModel.qml</file>
+        <file>qml/page/T_Sheet.qml</file>
+        <file>qml/page/T_GroupBox.qml</file>
+        <file>res/image/bg_scenic.jpg</file>
+        <file>qml/window/FluentInitializrWindow.qml</file>
+        <file>qml/page/T_OpenGL.qml</file>
+        <file>qml/page/T_Icons.qml</file>
+        <file>qml/window/HotkeyWindow.qml</file>
+        <file>qml/page/T_CustomPlot.qml</file>
+        <file>res/image/logo_pro.png</file>
+        <file>qml/page/T_FluentPro.qml</file>
     </qresource>
+    <qresource prefix="/"/>
 </RCC>

example/global/ItemsFooter.qml

@@ -1,21 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import FluentUI
-
-FluObject{
-    id:footer_items
-    FluPaneItemSeparator{}
-    FluPaneItem{
-        title:"意见反馈"
-        onTap:{
-            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
-        }
-    }
-    FluPaneItem{
-        title:"关于"
-        onTap:{
-            FluApp.navigate("/about")
-        }
-    }
-}

example/global/ItemsOriginal.qml

@@ -1,321 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import FluentUI
-
-FluObject{
-
-    property var navigationView
-
-    FluPaneItem{
-        title:"Home"
-        icon:FluentIcons.Home
-        onTap:{
-            navigationView.push("qrc:/T_Home.qml")
-        }
-    }
-
-    FluPaneItemExpander{
-        title:"Basic input"
-        icon:FluentIcons.CheckboxComposite
-        FluPaneItem{
-            title:"Buttons"
-            image:"qrc:/res/image/control/Button.png"
-            recentlyUpdated:true
-            desc:"A control that responds to user input and raisesa Click event."
-            onTap:{
-                navigationView.push("qrc:/T_Buttons.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Slider"
-            image:"qrc:/res/image/control/Slider.png"
-            recentlyUpdated:true
-            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/T_Slider.qml")
-            }
-        }
-        FluPaneItem{
-            title:"CheckBox"
-            image:"qrc:/res/image/control/Checkbox.png"
-            recentlyUpdated:true
-            desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/T_CheckBox.qml")
-            }
-        }
-        FluPaneItem{
-            title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/T_ToggleSwitch.qml")
-            }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:"Form"
-        icon:FluentIcons.GridView
-        FluPaneItem{
-            title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/T_TextBox.qml")
-            }
-        }
-        FluPaneItem{
-            title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/T_TimePicker.qml")
-            }
-        }
-        FluPaneItem{
-            title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/T_DatePicker.qml")
-            }
-        }
-        FluPaneItem{
-            title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/T_CalendarPicker.qml")
-            }
-        }
-        FluPaneItem{
-            title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/T_ColorPicker.qml")
-            }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:"Surface"
-        icon:FluentIcons.SurfaceHub
-        FluPaneItem{
-            title:"InfoBar"
-            image:"qrc:/res/image/control/InfoBar.png"
-            recentlyUpdated:true
-            desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/T_InfoBar.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/T_Progress.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/T_Badge.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/T_Rectangle.qml")
-            }
-        }
-        FluPaneItem{
-            title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/T_StatusView.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/T_Carousel.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/T_Expander.qml")
-            }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:"Popus"
-        icon:FluentIcons.ButtonMenu
-        FluPaneItem{
-            title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/T_Dialog.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/T_Tooltip.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/T_Menu.qml")
-            }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:"Navigation"
-        icon:FluentIcons.AllApps
-        FluPaneItem{
-            title:"Pivot"
-            image:"qrc:/res/image/control/Pivot.png"
-            recentlyAdded:true
-            order:3
-            desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/T_Pivot.qml")
-            }
-        }
-        FluPaneItem{
-            title:"TabView"
-            image:"qrc:/res/image/control/TabView.png"
-            recentlyAdded:true
-            order:1
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/T_TabView.qml")
-            }
-        }
-        FluPaneItem{
-            title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/T_TreeView.qml")
-            }
-        }
-        FluPaneItem{
-            title:"TableView"
-            image:"qrc:/res/image/control/DataGrid.png"
-            recentlyAdded:true
-            order:4
-            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/T_TableView.qml")
-            }
-        }
-        FluPaneItem{
-            title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/T_MultiWindow.qml")
-            }
-        }
-        FluPaneItem{
-            title:"FlipView"
-            image:"qrc:/res/image/control/FlipView.png"
-            recentlyAdded:true
-            order:2
-            desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/T_FlipView.qml")
-            }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:"Theming"
-        icon:FluentIcons.Brightness
-        FluPaneItem{
-            title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/T_Theme.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/T_Typography.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/T_Awesome.qml")
-            }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:"Media"
-        icon:FluentIcons.Media
-        FluPaneItem{
-            title:"MediaPlayer"
-            image:"qrc:/res/image/control/MediaPlayerElement.png"
-            recentlyAdded:true
-            order:0
-            desc:"A control to display video and image content."
-            onTap:{
-                navigationView.push("qrc:/T_MediaPlayer.qml")
-            }
-        }
-    }
-
-    function getRecentlyAddedData(){
-        var arr = []
-        for(var i=0;i<children.length;i++){
-            var item = children[i]
-            if(item instanceof FluPaneItem && item.recentlyAdded){
-                arr.push(item)
-            }
-            if(item instanceof FluPaneItemExpander){
-                for(var j=0;j<item.children.length;j++){
-                    var itemChild = item.children[j]
-                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
-                        arr.push(itemChild)
-                    }
-                }
-            }
-        }
-        arr.sort(function(o1,o2){ return o2.order-o1.order })
-        return arr
-    }
-
-    function getRecentlyUpdatedData(){
-        var arr = []
-        var items = navigationView.getItems();
-        for(var i=0;i<items.length;i++){
-            var item = items[i]
-            if(item instanceof FluPaneItem && item.recentlyUpdated){
-                arr.push(item)
-            }
-        }
-        return arr
-    }
-
-    function getSearchData(){
-        var arr = []
-        var items = navigationView.getItems();
-        for(var i=0;i<items.length;i++){
-            var item = items[i]
-            if(item instanceof FluPaneItem){
-                arr.push({title:item.title,key:item.key})
-            }
-        }
-        return arr
-    }
-
-    function startPageByItem(data){
-        var items = navigationView.getItems();
-        for(var i=0;i<items.length;i++){
-            var item =  items[i]
-            if(item.key === data.key){
-                if(navigationView.getCurrentIndex() === i){
-                    return
-                }
-                item.tap()
-                navigationView.setCurrentIndex(i)
-                if(item.parent){
-                    item.parent.isExpand = true
-                }
-                return
-            }
-        }
-    }
-
-}

example/global/qmldir

@@ -1,2 +0,0 @@
-singleton ItemsOriginal 1.0 ItemsOriginal.qml
-singleton ItemsFooter 1.0 ItemsFooter.qml

example/main.cpp

@@ -1,43 +0,0 @@
-#include <QGuiApplication>
-#include <QQmlApplicationEngine>
-#include <QQmlContext>
-#include <QDir>
-#include <QQuickWindow>
-#include <QQuickStyle>
-#include <QProcess>
-#include "ChatController.h"
-
-QMap<QString, QVariant> properties(){
-    QMap<QString, QVariant> map;
-    //    map["installHelper"] = QVariant::fromValue(QVariant::fromValue(InstallHelper::getInstance()));
-    return map;
-}
-
-int main(int argc, char *argv[])
-{
-    QCoreApplication::setOrganizationName("ZhuZiChu");
-    QCoreApplication::setOrganizationDomain("https://zhuzichu520.github.io");
-    QCoreApplication::setApplicationName("FluentUI");
-    QQuickStyle::setStyle("Basic");
-    QGuiApplication app(argc, argv);
-    QQmlApplicationEngine engine;
-
-    qmlRegisterType<ChatController>("Controller",1,0,"ChatController");
-
-    QMapIterator<QString, QVariant> iterator(properties());
-    while (iterator.hasNext()) {
-        iterator.next();
-        QString key = iterator.key();
-        QVariant value = iterator.value();
-        engine.rootContext()->setContextProperty(key,value);
-    }
-    engine.rootContext()->setContextProperty("properties",properties());
-    const QUrl url(QStringLiteral("qrc:/App.qml"));
-    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
-                     &app, [url](QObject *obj, const QUrl &objUrl) {
-        if (!obj && url == objUrl)
-            QCoreApplication::exit(-1);
-    }, Qt::QueuedConnection);
-    engine.load(url);
-    return app.exec();
-}

example/page/AboutPage.qml

@@ -1,95 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-
-FluWindow {
-
-    width: 500
-    height: 600
-    minimumWidth: 500
-    minimumHeight: 600
-    maximumWidth: 500
-    maximumHeight: 600
-
-    title:"关于"
-
-    FluAppBar{
-        id:appbar
-        title:"关于"
-        width:parent.width
-    }
-
-    ColumnLayout{
-        anchors{
-            top: appbar.bottom
-            left: parent.left
-            right: parent.right
-        }
-
-        RowLayout{
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            spacing: 14
-            FluText{
-                text:"FluentUI"
-                fontStyle: FluText.Title
-            }
-            FluText{
-                text:"v1.2.2"
-                fontStyle: FluText.Body
-                Layout.alignment: Qt.AlignBottom
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            FluText{
-                text:"作者："
-            }
-            FluText{
-                text:"朱子楚"
-                Layout.alignment: Qt.AlignBottom
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            FluText{
-                text:"GitHub："
-            }
-            FluTextButton{
-                id:text_hublink
-                text:"https://github.com/zhuzichu520/FluentUI"
-                Layout.alignment: Qt.AlignBottom
-                onClicked: {
-                    Qt.openUrlExternally(text_hublink.text)
-                }
-            }
-        }
-        RowLayout{
-            spacing: 14
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            FluText{
-                id:text_info
-                text:"如果该项目对你有作用，就请点击上方链接给一个免费的star吧！"
-                ColorAnimation {
-                    id: animation
-                    target: text_info
-                    property: "color"
-                    from: "red"
-                    to: "blue"
-                    duration: 1000
-                    running: true
-                    loops: Animation.Infinite
-                    easing.type: Easing.InOutQuad
-                }
-            }
-        }
-    }
-}

example/page/ChatPage.qml

@@ -1,262 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
-import Controller
-import QtQuick.Dialogs
-
-FluWindow {
-
-    width: 680
-    height: 600
-    minimumWidth: 500
-    minimumHeight: 600
-
-    title:"ChatGPT"
-
-    onInitArgument:
-        (argument)=>{
-            scrollview.focus = true
-        }
-
-    ChatController{
-        id:controller
-
-        onResponseDataChanged: {
-            appendMessage(false,responseData)
-        }
-
-    }
-
-    ListModel{
-        id:model_message
-        ListElement{
-            isMy:false
-            text:"欢迎使用ChatGPT"
-        }
-        ListElement{
-            isMy:true
-            text:"好的，3Q"
-        }
-    }
-
-    FluAppBar{
-        id:appbar
-        title:"ChatGPT"
-        width:parent.width
-    }
-
-    Component{
-        id:com_text
-        TextEdit {
-            id:item_text
-            text: message
-            wrapMode: Text.WrapAnywhere
-            readOnly: true
-            selectByMouse: true
-            selectByKeyboard: true
-            selectedTextColor: Qt.rgba(51,153,255,1)
-            color:FluColors.Black
-            selectionColor: {
-                if(FluTheme.dark){
-                    return FluTheme.primaryColor.lighter
-                }else{
-                    return FluTheme.primaryColor.dark
-                }
-            }
-            width: Math.min(list_message.width-200,600,implicitWidth)
-            TapHandler{
-                acceptedButtons: Qt.RightButton
-                onTapped: {
-                    menu_item.showMenu(item_text.selectedText)
-                }
-            }
-        }
-    }
-
-    FluArea{
-        id:layout_content
-        anchors{
-            top: appbar.bottom
-            left: parent.left
-            right: parent.right
-            bottom: layout_bottom.top
-            margins: 10
-        }
-        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1)
-        ListView{
-            id:list_message
-            anchors.fill: parent
-            model:model_message
-            clip: true
-            ScrollBar.vertical: FluScrollBar {}
-            preferredHighlightBegin: 0
-            preferredHighlightEnd: 0
-            highlightMoveDuration: 0
-            header:Item{
-                width: list_message.width
-                height:20
-            }
-            footer:Item{
-                width: list_message.width
-                height:20
-            }
-            delegate: Item{
-                width: ListView.view.width
-                height: childrenRect.height
-
-                FluRectangle{
-                    id:item_avatar
-                    width: 30
-                    height: 30
-                    radius:[15,15,15,15]
-                    anchors{
-                        right: isMy ? parent.right : undefined
-                        rightMargin: isMy ? 20 : undefined
-                        left: isMy ? undefined : parent.left
-                        leftMargin: isMy ? undefined : 20
-                        top:parent.top
-                    }
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(100,100)
-                        source: isMy ? "qrc:/res/svg/avatar_2.svg" : "qrc:/res/image/logo_openai.png"
-                    }
-                }
-
-                Rectangle{
-                    id:item_layout_content
-                    color: isMy ? "#FF95EC69" : "#FFFFFF"
-                    width: item_msg_loader.width+10
-                    height: item_msg_loader.height+10
-                    radius: 3
-                    anchors{
-                        top: item_avatar.top
-                        right: isMy ? item_avatar.left : undefined
-                        rightMargin: isMy ? 10 : undefined
-                        left: isMy ? undefined : item_avatar.right
-                        leftMargin: isMy ? undefined : 10
-
-                    }
-
-                    Loader{
-                        id:item_msg_loader
-                        property var message: model.text
-                        anchors.centerIn: parent
-                        sourceComponent: com_text
-                    }
-                }
-
-
-                Item{
-                    id:item_layout_bottom
-                    width: parent.width
-                    anchors.top: item_layout_content.bottom
-                    height: 20
-                }
-            }
-        }
-    }
-
-    FluArea{
-        id:layout_bottom
-        height: 90
-        anchors{
-            bottom: parent.bottom
-            bottomMargin: 10
-            left: parent.left
-            right: parent.right
-            leftMargin: 10
-            rightMargin: 10
-        }
-
-
-        ScrollView{
-            id:scrollview
-            anchors{
-                bottom: parent.bottom
-                left: parent.left
-                right: button_send.left
-                bottomMargin: 10
-                leftMargin: 10
-                rightMargin: 10
-            }
-            height: Math.min(textbox.implicitHeight,64)
-            FluMultilineTextBox{
-                id:textbox
-                focus:true
-                placeholderText: "请输入消息"
-            }
-        }
-
-        FluFilledButton{
-            id:button_send
-            text:controller.isLoading ? timer_loading.loadingText :"发送"
-            anchors{
-                bottom: parent.bottom
-                right: parent.right
-                bottomMargin: 10
-                rightMargin: 10
-            }
-            width: 60
-            disabled: controller.isLoading
-            onClicked:{
-                var text = textbox.text
-                appendMessage(true,text)
-                controller.sendMessage(text)
-                textbox.clear()
-            }
-
-            Timer{
-                id:timer_loading
-                property int count : 0
-                property string loadingText : ""
-                interval: 500
-                running: controller.isLoading
-                repeat: true
-                onTriggered: {
-                    switch(count%3){
-                    case 0:
-                        loadingText = "."
-                        break
-                    case 1:
-                        loadingText = ".."
-                        break
-                    case 2:
-                        loadingText = "..."
-                        break
-                    default:
-                        loadingText = ""
-                        break
-                    }
-                    count++
-                }
-            }
-
-        }
-    }
-
-    FluMenu{
-        id:menu_item
-        focus: false
-        property string selectedText: ""
-        FluMenuItem{
-            text:"复制"
-            onClicked: {
-                controller.clipText(menu_item.selectedText)
-                showSuccess("复制成功")
-            }
-        }
-        function showMenu(text){
-            menu_item.selectedText = text
-            menu_item.popup()
-        }
-    }
-
-    function appendMessage(isMy,text){
-        model_message.append({isMy:isMy,text:text})
-        list_message.positionViewAtEnd()
-    }
-
-}

example/page/MainPage.qml

@@ -1,49 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import "qrc:///global/"
-import FluentUI
-
-FluWindow {
-    id:rootwindow
-    width: 1000
-    height: 640
-    title: "FluentUI"
-    minimumWidth: 520
-    minimumHeight: 460
-
-    FluAppBar{
-        id:appbar
-        z:10
-        showDark: true
-        width:parent.width
-    }
-
-    FluNavigationView{
-        id:nav_view
-        anchors.fill: parent
-        items: ItemsOriginal
-        footerItems:ItemsFooter
-        logo: "qrc:/res/image/favicon.ico"
-        z: 11
-        title:"FluentUI"
-        autoSuggestBox:FluAutoSuggestBox{
-            width: 280
-            anchors.centerIn: parent
-            iconSource: FluentIcons.Zoom
-            items: ItemsOriginal.getSearchData()
-            placeholderText: "查找"
-            onItemClicked:
-                (data)=>{
-                    ItemsOriginal.startPageByItem(data)
-                }
-        }
-        Component.onCompleted: {
-            ItemsOriginal.navigationView = nav_view
-            nav_view.setCurrentIndex(0)
-            nav_view.push("qrc:/T_Home.qml")
-        }
-    }
-
-}

example/page/MediaPage.qml

@@ -1,37 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-
-FluWindow {
-
-    width: 640
-    height: 480
-    minimumWidth: 640
-    minimumHeight: 480
-
-    title:"视频播放器"
-
-    onInitArgument:
-        (argument)=>{
-            player.source = argument.source
-        }
-
-    FluAppBar{
-        id:appbar
-        title:"视频播放器"
-        width:parent.width
-    }
-
-
-    FluMediaPlayer{
-        id:player
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: appbar.bottom
-            bottom: parent.bottom
-        }
-    }
-
-}

example/qml/App.qml

@@ -0,0 +1,125 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+
+FluLauncher {
+    id: app
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+    Connections{
+        target: FluApp
+        function onUseSystemAppBarChanged(){
+            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
+        }
+    }
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
+        }
+    }
+    Component.onCompleted: {
+        Network.openLog = false
+        Network.setInterceptor(function(param){
+            param.addHeader("Token","000000000000000000000")
+        })
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
+        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
+        FluTheme.animationEnabled = true
+        FluRouter.routes = {
+            "/":"qrc:/example/qml/window/MainWindow.qml",
+            "/about":"qrc:/example/qml/window/AboutWindow.qml",
+            "/login":"qrc:/example/qml/window/LoginWindow.qml",
+            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
+            "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
+            "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml",
+            "/hotkey":"qrc:/example/qml/window/HotkeyWindow.qml"
+        }
+        var args = Qt.application.arguments
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
+            FluRouter.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluRouter.navigate("/")
+        }
+    }
+
+    property alias hotkeys: object_hotkey
+    FluObject{
+        id: object_hotkey
+        FluHotkey{
+            name: qsTr("Quit")
+            sequence: "Ctrl+Alt+Q"
+            onActivated: {
+                FluRouter.exit()
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test1")
+            sequence: "Alt+A"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test2")
+            sequence: "Alt+B"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test3")
+            sequence: "Alt+C"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test4")
+            sequence: "Alt+D"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test5")
+            sequence: "Alt+E"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test6")
+            sequence: "Alt+F"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test7")
+            sequence: "Alt+G"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test8")
+            sequence: "Alt+H"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+    }
+
+}

example/qml/chart/T_BarChart.qml

@@ -0,0 +1,132 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            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
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'horizontalBar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js HorizontalBar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/chart/T_BubbleChart.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bubble Chart")
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bubble'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'First Dataset',
+                            data: [{
+                                    x: 20,
+                                    y: 30,
+                                    r: 15
+                                }, {
+                                    x: 12,
+                                    y: 70,
+                                    r: 20
+                                }, {
+                                    x: 11,
+                                    y: 28,
+                                    r: 8
+                                }, {
+                                    x: 9,
+                                    y: 28,
+                                    r: 10
+                                }, {
+                                    x: 43,
+                                    y: 7,
+                                    r: 14
+                                }, {
+                                    x: 22,
+                                    y: 22,
+                                    r: 12
+                                }, {
+                                    x: 40,
+                                    y: 10,
+                                    r: 10
+                                }],
+                            backgroundColor: 'rgb(255, 99, 132)'
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bubble Chart - Multi Axis'
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/chart/T_LineChart.qml

@@ -0,0 +1,63 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    id: root
+    title: qsTr("Line Chart")
+    property var data : []
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            id: chart
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: root.data,
+                            fill: false,
+                            borderColor: 'rgb(75, 192, 192)',
+                            tension: 0.1
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Line Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+        Timer{
+            id: timer
+            interval: 300
+            repeat: true
+            onTriggered: {
+                root.data.push(Math.random()*100)
+                if(root.data.length>7){
+                    root.data.shift()
+                }
+                chart.animateToNewData()
+            }
+        }
+        Component.onCompleted: {
+            timer.restart()
+        }
+    }
+}

example/qml/chart/T_PieChart.qml

@@ -0,0 +1,93 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Pie Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "doughnut"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Doughnut Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "pie"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Pie Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

example/qml/chart/T_PolarAreaChart.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Polar Area Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'polarArea'
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Green',
+                        'Yellow',
+                        'Grey',
+                        'Blue'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [11, 16, 7, 3, 14],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(75, 192, 192)',
+                                'rgb(255, 205, 86)',
+                                'rgb(201, 203, 207)',
+                                'rgb(54, 162, 235)'
+                            ]
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js PolarArea Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml/chart/T_RadarChart.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Radar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'radar'
+            chartData: { return {
+                    labels: [
+                        'Eating',
+                        'Drinking',
+                        'Sleeping',
+                        'Designing',
+                        'Coding',
+                        'Cycling',
+                        'Running'
+                    ],
+                    datasets:
+                        [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 90, 81, 56, 55, 40],
+                            fill: true,
+                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                            borderColor: 'rgb(255, 99, 132)',
+                            pointBackgroundColor: 'rgb(255, 99, 132)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(255, 99, 132)'
+                        }, {
+                            label: 'My Second Dataset',
+                            data: [28, 48, 40, 19, 96, 27, 100],
+                            fill: true,
+                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                            borderColor: 'rgb(54, 162, 235)',
+                            pointBackgroundColor: 'rgb(54, 162, 235)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(54, 162, 235)'
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Radar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    elements: {
+                        line: {
+                            borderWidth: 3
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}