2025-04-21 10:21:10 +08:00
690 changed files with 9026 additions and 150326 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.clang-format
+++ b/.clang-format
@ -1,130 +0,0 @@
-# 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 ]
--- a/.cmake/GetGitRevisionDescription.cmake
+++ b/.cmake/GetGitRevisionDescription.cmake
@ -1,317 +0,0 @@
-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}")
--- a/.cmake/GetGitRevisionDescription.cmake.in
+++ b/.cmake/GetGitRevisionDescription.cmake.in
@ -1,21 +0,0 @@
-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()
--- a/.cmake/InstallerScript.iss.in
+++ b/.cmake/InstallerScript.iss.in
@ -1,52 +0,0 @@
-; 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
-
--- a/.cmake/Version.h.in
+++ b/.cmake/Version.h.in
@ -1,11 +0,0 @@
-#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
--- a/.cmake/version_exe.rc.in
+++ b/.cmake/version_exe.rc.in
@ -1,34 +0,0 @@
-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"
--- a/.github/workflows/macos.yml
+++ b/.github/workflows/macos.yml
@ -2,75 +2,62 @@ name: MacOS
 on: 
  push:
    paths:
-      - '*.txt'
-      - 'example/**'
+      - '*.pro'
      - 'src/**'
-      - 'scripts/**'
      - '.github/workflows/macos.yml'
  pull_request:
    paths:
-      - '*.txt'
-      - 'example/**'
+      - '*.pro'
      - 'src/**'
-      - 'scripts/**'
      - '.github/workflows/macos.yml' 
-      
 jobs:
  build:
    name: Build
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [macos-latest]
-        qt_ver: [6.6.2]
+        os: [macos-10.15,macos-11.0]
+        qt_ver: [5.15.2]
        qt_arch: [clang_64]
    env:
      targetName: example
    steps:
-      - name: Check out repository
-        uses: actions/checkout@v3
-        with:
-          submodules: recursive
-          
+      # macos 11.0 默认环境变了,要指定
+      - name: prepare env
+        if: ${{ matrix.os == 'macos-11.0' }}
+        run: |
+          softwareupdate --all --install --force
+          sudo xcode-select --print-path
+          sudo xcode-select --switch /Library/Developer/CommandLineTools       
      - name: Install Qt
-        uses: jurplel/install-qt-action@v3
+        uses: jurplel/install-qt-action@v2
        with:
          version: ${{ matrix.qt_ver }}
-          cache: ${{steps.cache-qt.outputs.cache-hit}}
-          arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
-          
-      - name: Set up Ninja
-        uses: seanmiddleditch/gha-setup-ninja@v3
+          cached: 'false'
+      - uses: actions/checkout@v2
        with:
-          version: 1.10.2
-          
+          fetch-depth: 1
      - name: build macos
        run: |
-          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
-          
+          qmake
+          make
+      # 打包
      - name: package
        run: |
-          # 先删除所有dSYM文件，减少包的体积
-          sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
          # 拷贝依赖
-          sudo macdeployqt bin/Release/${targetName}.app -qmldir=. -dmg     
-          
-      - uses: actions/upload-artifact@v4
+          macdeployqt bin/release/${targetName}.app -qmldir=. -verbose=1 -dmg
+      # 上传artifacts          
+      - uses: actions/upload-artifact@v2
        with:
-          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
+          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}.zip
          path: bin/release/${{ env.targetName }}.app
-          
+      # tag 上传Release
      - name: uploadRelease
        if: startsWith(github.event.ref, 'refs/tags/')
        uses: svenstaro/upload-release-action@v2
        with:
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          file: bin/release/${{ env.targetName }}.dmg
-          asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.dmg
+          asset_name: ${{ env.targetName }}_${{ matrix.os }}_${{ matrix.qt_ver }}.dmg
          tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true
--- a/.github/workflows/ubuntu.yml
+++ b/.github/workflows/ubuntu.yml
@ -1,98 +1,67 @@
 name: Ubuntu
+# Qt官方没有linux平台的x86包
 on: 
  workflow_dispatch:
  push:
    paths:
-      - '*.txt'
+      - '*.pro'
      - 'src/**'
-      - 'example/**'
-      - 'scripts/**'
      - '.github/workflows/ubuntu.yml'
  pull_request:
    paths:
-      - '*.txt'
+      - '*.pro'
      - 'src/**'
-      - 'example/**'
-      - 'scripts/**'
-      - '.github/workflows/ubuntu.yml'
-      
+      - '.github/workflows/ubuntu.yml' 
 jobs:
  build:
    name: Build
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [ubuntu-latest]
-        qt_ver: [6.6.2]
+        os: [ubuntu-18.04,ubuntu-20.04]
+        qt_ver: [5.15.2]
        qt_arch: [gcc_64]
    env:
      targetName: example
    steps:
-      - name: Check out repository
-        uses: actions/checkout@v3
-        with:
-          submodules: recursive
-          
      - name: Install Qt
-        uses: jurplel/install-qt-action@v3
+        uses: jurplel/install-qt-action@v2
        with:
          version: ${{ matrix.qt_ver }}
-          cache: ${{steps.cache-qt.outputs.cache-hit}}
-          arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
-      
-      - name: Set up Ninja
-        uses: seanmiddleditch/gha-setup-ninja@v3
-        with:
-          version: 1.10.2
-          
+          cached: 'false'
      - 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
-        
+        run: sudo apt-get install -y libglew-dev libglfw3-dev qml-module-qtquick-controls qml-module-qtquick-controls2
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
      - name: build ubuntu
        run: |
-          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
-          
+          qmake
+          make
      - 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=./
+          export QML_SOURCES_PATHS=src
          # 拷贝依赖
-          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
-        
-      - uses: actions/upload-artifact@v4
+      # 上传artifacts          
+      - uses: actions/upload-artifact@v2
        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
        with:
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          file: ${{ env.targetName }}.AppImage
-          asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.AppImage
+          asset_name: ${{ env.targetName }}_${{ matrix.os }}_${{ matrix.qt_ver }}.AppImage
          tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true
--- a/.github/workflows/windows-mingw.yml
+++ b/.github/workflows/windows-mingw.yml
@ -2,103 +2,86 @@ name: Windows MinGW
 on: 
  push:
    paths:
-      - '*.txt'
+      - '*.pro'
      - 'src/**'
-      - 'example/**'
-      - 'scripts/**'
      - '.github/workflows/windows-mingw.yml'
  pull_request:
    paths:
-      - '*.txt'
-      - 'example/**'
+      - '*.pro'
      - 'src/**'
-      - 'scripts/**'
-      - '.github/workflows/windows-mingw.yml'
-      
+      - '.github/workflows/windows-mingw.yml' 
 jobs:
  build:
    name: Build
-    runs-on: ${{ matrix.os }}
+    runs-on: windows-2019
    strategy:
      matrix:
-        os: [windows-latest]
        include:
-          - qt_arch: win64_mingw
-            qt_ver: 6.6.2
-            qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
-            qt_tools_mingw_install: mingw900_64
+          - qt_arch: win32_mingw81
+            qt_ver: 5.15.2
+            qt_tools: "tools_mingw,8.1.0-1-202004170606,qt.tools.win32_mingw810"
+            qt_tools_mingw_install: mingw810_32
+          - qt_arch: win64_mingw81
+            qt_ver: 5.15.2
+            qt_tools: "tools_mingw,8.1.0-1-202004170606,qt.tools.win64_mingw810"
+            qt_tools_mingw_install: mingw810_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
+        uses: jurplel/install-qt-action@v2
        with:
          version: ${{ matrix.qt_ver }}
+          aqtversion: '==2.0.5'
          arch: ${{ matrix.qt_arch }}
-          cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
-      
-      - name: Qt6 environment configuration
+          tools: ${{ matrix.qt_tools }}
+          cached: 'false'
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+      - name: Qt 5 environment configuration
+        if: ${{ startsWith( matrix.qt_ver, 5 ) }}
+        shell: pwsh
+        run: |
+          Write-Output "${{ env.Qt5_DIR }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
+          Write-Output "${{ env.Qt5_DIR }}/../../Tools/${{ matrix.qt_tools_mingw_install }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
+      - name: Qt 6 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 cmake & where is mingw32-make
+      - name: where is qmake & where is mingw32-make
        shell: pwsh
        run: |
-          Get-Command -Name 'cmake' | Format-List
+          Get-Command -Name 'qmake' | Format-List
          Get-Command -Name 'mingw32-make' | Format-List
-      
      - name: mingw-build
        id: build
        shell: cmd
        run: |
-          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
-      
+          qmake
+          mingw32-make
      - name: package
        id: package      
        env:
-          archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
+          archiveName: ${{ env.fileName }}-${{ matrix.qt_ver }}-${{ matrix.qt_arch }}
        shell: pwsh
        run: |
          & scripts\windows-mingw-publish.ps1 ${env:archiveName} ${env:targetName}
           $name = ${env:archiveName}
           echo "::set-output name=packageName::$name"       
-      
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v2
        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
-          
+          path: ${{ steps.package.outputs.packageName }}
      - 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
+          file: ${{ steps.package.outputs.packageName }}.zip
+          asset_name: ${{ steps.package.outputs.packageName }}.zip
          tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true 
--- a/.github/workflows/windows-qt5.yml
+++ b/.github/workflows/windows-qt5.yml
@ -1,91 +0,0 @@
-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
--- a/.github/workflows/windows.yml
+++ b/.github/workflows/windows.yml
@ -1,98 +1,93 @@
 name: Windows
 on: 
+  # push代码时触发workflow
  push:
    paths:
-      - '*.txt'
+      - '*.pro'
      - 'src/**'
-      - 'example/**'
-      - 'scripts/**'
      - '.github/workflows/windows.yml'
  pull_request:
    paths:
-      - '*.txt'
-      - 'example/**'
+      - '*.pro'
      - 'src/**'
-      - 'scripts/**'
-      - '.github/workflows/windows.yml'
-      
+      - '.github/workflows/windows.yml' 
 jobs:
  build:
    name: Build
-    runs-on: ${{ matrix.os }}
+    # 运行平台， windows-latest目前是windows server 2019 
+    # 参考文档 https://github.com/actions/virtual-environments/blob/main/images/win/Windows2019-Readme.md
+    runs-on: windows-2019
    strategy:
+      # 矩阵配置
      matrix:
-        os: [windows-latest]
        include:
-          - qt_ver: 6.6.2        
+          # 5.15.2 参考 https://mirrors.cloud.tencent.com/qt/online/qtsdkrepository/windows_x86/desktop/qt5_5152/
+          - qt_ver: 5.15.2
+            qt_arch: win32_msvc2019
+            msvc_arch: x86
+            qt_arch_install: msvc2019
+          - qt_ver: 5.15.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: Check out repository
-        uses: actions/checkout@v3
-        with:
-          submodules: recursive
-          
-      - name: Setup ninja
-        uses: seanmiddleditch/gha-setup-ninja@master
-        with:
-          version: 1.10.2
-          
+      # 安装Qt
      - name: Install Qt
-        uses: jurplel/install-qt-action@v3
+        # 使用外部action。这个action专门用来安装Qt
+        uses: jurplel/install-qt-action@v2
        with:
+          # Version of Qt to install
          version: ${{ matrix.qt_ver }}
+          # Target platform for build
+          # target: ${{ matrix.qt_target }}
          arch: ${{ matrix.qt_arch }}
-          cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech qt3d'
-          
+          cached: 'false'
+          aqtversion: '==2.0.5'          
+      # 拉取代码
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
+      # msvc编译
      - name: msvc-build
        id: build
        shell: cmd
        run: |
-          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
+          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          qmake
+          nmake
          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 }}
+          archiveName: ${{ env.fileName }}-${{ matrix.qt_ver }}-${{ matrix.qt_arch }}
          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
+           echo "::set-output name=packageName::$name"       
+      # tag 查询github-Release
+      # 上传artifacts          
+      - uses: actions/upload-artifact@v2
        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
-          
+          path: ${{ steps.package.outputs.packageName }}
+      # tag 上传Release
      - 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
+          file: ${{ steps.package.outputs.packageName }}.zip
+          asset_name: ${{ steps.package.outputs.packageName }}.zip
          tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true 
--- a/.gitignore
+++ b/.gitignore
@ -31,13 +31,5 @@ target_wrapper.*
 # QtCreator CMake
 CMakeLists.txt.user*

-bin
-.DS_Store
-build
-cmake-build-*
-.idea
-package
-example/Version.h
-dist
-
-*.qm
+src/build-preset/plugins.qmltypes
+bin
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,20 +0,0 @@
-{
-    "MicroPython.executeButton": [
-        {
-            "text": "▶",
-            "tooltip": "运行",
-            "alignment": "left",
-            "command": "extension.executeFile",
-            "priority": 3.5
-        }
-    ],
-    "MicroPython.syncButton": [
-        {
-            "text": "$(sync)",
-            "tooltip": "同步",
-            "alignment": "left",
-            "command": "extension.execute",
-            "priority": 4
-        }
-    ]
-}
--- a/3rdparty/mingw/libgcc_s_seh-1.dll
+++ b/3rdparty/mingw/libgcc_s_seh-1.dll
--- a/3rdparty/mingw/libstdc++-6.dll
+++ b/3rdparty/mingw/libstdc++-6.dll
--- a/3rdparty/mingw/libwinpthread-1.dll
+++ b/3rdparty/mingw/libwinpthread-1.dll
--- a/3rdparty/msvc/x64/libcrypto-1_1-x64.dll
+++ b/3rdparty/msvc/x64/libcrypto-1_1-x64.dll
--- a/3rdparty/msvc/x64/libssl-1_1-x64.dll
+++ b/3rdparty/msvc/x64/libssl-1_1-x64.dll
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@ -1,36 +0,0 @@
-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)
-
-#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}")
--- a/FluentUI.pro
+++ b/FluentUI.pro
@ -0,0 +1,6 @@
+TEMPLATE = subdirs
+
+SUBDIRS += \
+    src/FluentUI.pro \
+    example
+    example.depends = src/FluentUI.pro
--- a/21
+++ b/21
@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 zhuzichu
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,120 +1,94 @@
-# 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">
+# FluentUI

-# QML FluentUI
+## 简介

-A Fluent Design component library for Qt QML, You need PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML).
+这是一个漂亮的Fluent组件库，使用QML插件开发的

-</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>
+## 编译状态
+| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
+|---------------|---------------|-----------------|
+| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |

 [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>
+## 支持的组件

-## Requirements
+|目录|说明|备注|
+|----|----|----|
+|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|响应式导航布局||

-+ 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.
+## 一个聊天Demo，调用了ChatGPT的接口

-## ⚽ Get started
+![](doc/preview/chatgpt.png)

-+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please specify your platform and compilers.)
+## 各种Button按钮

-+ run `example` program.
+![](doc/preview/buttons.png)

-or
+## 主题颜色切换、夜间模式

-+ Clone the repository.
+![](doc/preview/theme.png)

-```bash
-git clone --recursive https://github.com/zhuzichu520/FluentUI.git
-```
+## FluTreeView树组件

-+ Build
+![](doc/preview/treeview.png)

-```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
-```
+## 轮播图组件

-+ Use your IDE (`Qt Creator` or `CLion`) to open the project. (only **CMake** supported).
+![](doc/preview/carousel.png)

-<div align=center>
-  <img src="doc/preview/qt_creator_project.png">
-</div>
+## InfoBar提示框组件

-+ Compile the project. Then try to execute the `example` demo program.
+![](doc/preview/infobar.png)

-+ 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)
+![](doc/preview/multiwindow.png)
--- a/README_zh_CN.md
+++ b/README_zh_CN.md
@ -1,118 +0,0 @@
-<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)
--- a/THIRD_PARTY_COPYRIGHT.txt
+++ b/THIRD_PARTY_COPYRIGHT.txt
--- a/doc/md/all_components.md
+++ b/doc/md/all_components.md
@ -1,37 +0,0 @@
-# 支持的组件
-
-|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||
--- a/doc/preview/buttons.png
+++ b/doc/preview/buttons.png
--- a/doc/preview/carousel.png
+++ b/doc/preview/carousel.png
--- a/doc/preview/chatgpt.png
+++ b/doc/preview/chatgpt.png
--- a/doc/preview/demo_content_dialog.png
+++ b/doc/preview/demo_content_dialog.png
--- a/doc/preview/demo_filledbtn.png
+++ b/doc/preview/demo_filledbtn.png
--- a/doc/preview/demo_icon.png
+++ b/doc/preview/demo_icon.png
--- a/doc/preview/demo_infobar.png
+++ b/doc/preview/demo_infobar.png
--- a/doc/preview/demo_large.png
+++ b/doc/preview/demo_large.png
--- a/doc/preview/demo_multiline_textbox.png
+++ b/doc/preview/demo_multiline_textbox.png
--- a/doc/preview/demo_progress_bar_ring.png
+++ b/doc/preview/demo_progress_bar_ring.png
--- a/doc/preview/demo_radiobtn.png
+++ b/doc/preview/demo_radiobtn.png
--- a/doc/preview/demo_rectangle.png
+++ b/doc/preview/demo_rectangle.png
--- a/doc/preview/demo_slider.png
+++ b/doc/preview/demo_slider.png
--- a/doc/preview/demo_standardbtn.png
+++ b/doc/preview/demo_standardbtn.png
--- a/doc/preview/demo_textbox.png
+++ b/doc/preview/demo_textbox.png
--- a/doc/preview/demo_textbtn.png
+++ b/doc/preview/demo_textbtn.png
--- a/doc/preview/demo_toggle_btn.png
+++ b/doc/preview/demo_toggle_btn.png
--- a/doc/preview/demo_toggle_switch.png
+++ b/doc/preview/demo_toggle_switch.png
--- a/doc/preview/demo_tooltip.png
+++ b/doc/preview/demo_tooltip.png
--- a/doc/preview/demo_tree_view.png
+++ b/doc/preview/demo_tree_view.png
--- a/doc/preview/fluent_design.svg
+++ b/doc/preview/fluent_design.svg
@ -1,7 +0,0 @@
-<!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>
--- a/doc/preview/home.png
+++ b/doc/preview/home.png
--- a/doc/preview/infobar.png
+++ b/doc/preview/infobar.png
--- a/doc/preview/multiwindow.png
+++ b/doc/preview/multiwindow.png
--- a/doc/preview/qt_creator_project.png
+++ b/doc/preview/qt_creator_project.png
--- a/doc/preview/tableview.png
+++ b/doc/preview/tableview.png
--- a/doc/preview/theme.png
+++ b/doc/preview/theme.png
--- a/doc/preview/treeview.png
+++ b/doc/preview/treeview.png
--- a/example.svg
+++ b/example.svg
@ -1,7 +1 @@
-<!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>
+<?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>
--- a/example/App.qml
+++ b/example/App.qml
@ -0,0 +1,24 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+Window {
+    id:app
+    color: "#00000000"
+    Component.onCompleted: {
+        FluApp.init(app,properties)
+        FluTheme.isDark = false
+        FluApp.routes = {
+            "/":"qrc:/page/MainPage.qml",
+            "/about":"qrc:/page/AboutPage.qml",
+            "/login":"qrc:/page/LoginPage.qml",
+            "/chat":"qrc:/page/ChatPage.qml",
+        }
+        FluApp.initialRoute = "/"
+        FluApp.run()
+    }
+
+}
--- a/example/CMakeLists.txt
+++ b/example/CMakeLists.txt
@ -1,172 +0,0 @@
-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_CXX_STANDARD_REQUIRED ON)
-
-#判断FluentUI库类型
-if (FLUENTUI_BUILD_STATIC_LIB)
-    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
-endif ()
-
-#设置可执行文件输出目录
-set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
-
-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 ()
-
-#导入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_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(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
-configure_file(
-        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
-        ${HEADER_FILE_VERSION_PATH}
-)
-
-#遍历所有Cpp文件
-file(GLOB_RECURSE CPP_FILES *.cpp *.h)
-foreach (filepath ${CPP_FILES})
-    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-    list(APPEND sources_files ${filename})
-endforeach (filepath)
-
-if (WIN32)
-    list(APPEND sources_files "src/app_dmp.h")
-endif ()
-
-#如果是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}
-    )
-    configure_file(
-            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
-            ${CMAKE_SOURCE_DIR}/package/InstallerScript.iss
-    )
-endif ()
-
-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
-        Qt${QT_VERSION_MAJOR}::Quick
-        Qt${QT_VERSION_MAJOR}::Svg
-        Qt${QT_VERSION_MAJOR}::Network
-	Qt${QT_VERSION_MAJOR}::Widgets
-        fluentuiplugin
-)
-
-#添加部署脚本
-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 ()
--- a/example/ChatController.cpp
+++ b/example/ChatController.cpp
@ -0,0 +1,56 @@
+#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);
+}
--- a/example/ChatController.h
+++ b/example/ChatController.h
@ -0,0 +1,35 @@
+#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
--- a/example/README.md
+++ b/example/README.md
@ -1,18 +0,0 @@
-# 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不支持
-
-
-
--- a/example/T_Awesome.qml
+++ b/example/T_Awesome.qml
@ -0,0 +1,71 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluContentPage {
+
+    title:"Awesome"
+
+    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
+            }
+        }
+    }
+}
--- a/example/qml/page/T_Badge.qml
+++ b/example/qml/page/T_Badge.qml
@ -1,31 +1,31 @@
-import QtQuick 2.15
+import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
 import FluentUI 1.0
-import "../component"

 FluScrollablePage{

-    title: qsTr("Badge")
+    title:"Badge"

-    FluFrame{
-        Layout.fillWidth: true
-        height: 120
-        padding: 10
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 106
+        paddings: 10

        Column{
            spacing: 15
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
-                right: parent.right
            }
            FluText{
-                wrapMode: Text.WrapAnywhere
-                width: parent.width
-                text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
+                text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
            }
+
            Row{
                spacing: 20
                Rectangle{
@ -34,8 +34,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:0
                    }
                }
@ -46,8 +44,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:5
                    }
                }
@ -57,8 +53,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:50
                    }
                }
@ -68,8 +62,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:100
                    }
                }
@ -79,8 +71,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        isDot:true
                    }
                }
@ -90,8 +80,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:99
                        color: Qt.rgba(250/255,173/255,20/255,1)
                    }
@ -102,8 +90,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:99
                        color: Qt.rgba(82/255,196/255,26/255,1)
                    }
@ -111,20 +97,5 @@ FluScrollablePage{
            }
        }
    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -6
-        code:'Rectangle{
-    width: 40
-    height: 40
-    radius: 8
-    color: Qt.rgba(191/255,191/255,191/255,1)
-    FluBadge{
-        count: 100
-        isDot: false
-        color: Qt.rgba(82/255,196/255,26/255,1)
-    }
-}'
-    }

 }
--- a/example/T_Buttons.qml
+++ b/example/T_Buttons.qml
@ -0,0 +1,225 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+    title:"Buttons"
+
+    spacing: 20
+
+    FluText{
+        Layout.topMargin: 20
+        text:"支持Tab键切换焦点，空格键执行点击事件"
+    }
+
+    FluArea{
+        width: parent.width
+        height: 68
+        paddings: 10
+
+        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"
+            }
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        height: 68
+        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"
+            }
+        }
+    }
+
+
+    FluArea{
+        width: parent.width
+        height: 68
+        paddings: 10
+
+        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"
+            }
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        height: 68
+        paddings: 10
+
+        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"
+            }
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        height: 100
+        paddings: 10
+
+        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"
+            }
+        }
+    }
+
+
+    FluArea{
+        width: parent.width
+        height: 68
+        paddings: 10
+
+        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"
+            }
+        }
+    }
+
+
+}
--- a/example/T_Carousel.qml
+++ b/example/T_Carousel.qml
@ -0,0 +1,36 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"Carousel"
+
+    FluArea{
+        width: parent.width
+        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"}])
+                }
+            }
+        }
+    }
+}
--- a/example/T_DatePicker.qml
+++ b/example/T_DatePicker.qml
@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"TimePicker"
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"showYear=true"
+            }
+
+            FluDatePicker{
+            }
+
+        }
+    }
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"showYear=false"
+            }
+
+            FluDatePicker{
+                showYear:false
+
+            }
+
+        }
+    }
+
+}
--- a/example/T_Dialog.qml
+++ b/example/T_Dialog.qml
@ -0,0 +1,32 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+    title:"Dialog"
+
+    FluContentDialog{
+        id:dialog
+        title:"友情提示"
+        message:"确定要退出程序么？"
+        negativeText:"取消"
+        onNegativeClicked:{
+            showSuccess("点击取消按钮")
+        }
+        positiveText:"确定"
+        onPositiveClicked:{
+            showSuccess("点击确定按钮")
+        }
+    }
+
+    FluButton{
+        Layout.topMargin: 20
+        text:"Show Dialog"
+        onClicked: {
+            dialog.open()
+        }
+    }
+}
--- a/example/T_Expander.qml
+++ b/example/T_Expander.qml
@ -0,0 +1,60 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+    title:"Expander"
+
+    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
+            ScrollView{
+                id:scrollview
+                width: parent.width
+                height: parent.height
+                contentWidth: parent.width
+                FluText{
+                    id:test
+                    width: scrollview.width
+                    wrapMode: Text.WrapAnywhere
+                    padding: 14
+                    text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
+                }
+            }
+        }
+    }
+}
--- a/example/T_InfoBar.qml
+++ b/example/T_InfoBar.qml
@ -0,0 +1,39 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+    title:"InfoBar"
+
+    FluButton{
+        text:"Info"
+        Layout.topMargin: 20
+        onClicked: {
+            showInfo("这是一个Info样式的InfoBar")
+        }
+    }
+    FluButton{
+        text:"Warning"
+        Layout.topMargin: 20
+        onClicked: {
+            showWarning("这是一个Warning样式的InfoBar")
+        }
+    }
+    FluButton{
+        text:"Error"
+        Layout.topMargin: 20
+        onClicked: {
+            showError("这是一个Error样式的InfoBar")
+        }
+    }
+    FluButton{
+        text:"Success"
+        Layout.topMargin: 20
+        onClicked: {
+            showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
+        }
+    }
+}
--- a/example/T_Menu.qml
+++ b/example/T_Menu.qml
@ -0,0 +1,54 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"Menu"
+
+    FluButton{
+        text:"左击菜单"
+        Layout.topMargin: 20
+        Layout.leftMargin: 15
+        onClicked:{
+            menu.popup()
+        }
+    }
+
+
+    FluButton{
+        text:"右击菜单"
+        Layout.topMargin: 20
+        Layout.leftMargin: 15
+        onClicked: {
+            showSuccess("请按鼠标右击")
+        }
+        MouseArea{
+            anchors.fill: parent
+            acceptedButtons: Qt.RightButton
+            onClicked: {
+                menu.popup()
+            }
+        }
+    }
+
+    FluMenu{
+        id:menu
+        FluMenuItem{
+            text:"删除"
+            onClicked: {
+                showError("删除")
+            }
+        }
+        FluMenuItem{
+            text:"修改"
+            onClicked: {
+                showError("修改")
+            }
+        }
+    }
+
+}
--- a/example/T_MultiWindow.qml
+++ b/example/T_MultiWindow.qml
@ -0,0 +1,77 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"MultiWindow"
+
+    property string password: ""
+
+    property var loginPageRegister: registerForPageResult("/login")
+
+    Connections{
+        target: loginPageRegister
+        function onResult(data)
+        {
+            password = data.password
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        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")
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        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
+            }
+        }
+    }
+
+
+
+}
--- a/example/T_Progress.qml
+++ b/example/T_Progress.qml
@ -0,0 +1,36 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+    title:"Progress"
+
+    FluProgressBar{
+        Layout.topMargin: 20
+    }
+    FluProgressRing{
+        Layout.topMargin: 10
+    }
+    FluProgressBar{
+        id:progress_bar
+        Layout.topMargin: 20
+        indeterminate: false
+    }
+    FluProgressRing{
+        id:progress_ring
+        Layout.topMargin: 10
+        indeterminate: false
+    }
+    FluSlider{
+        Layout.topMargin: 30
+        value:50
+        onValueChanged:{
+            progress_bar.progress = value/100
+            progress_ring.progress = value/100
+        }
+        Layout.bottomMargin: 30
+    }
+}
--- a/example/T_Rectangle.qml
+++ b/example/T_Rectangle.qml
@ -0,0 +1,114 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+    title:"Rectangle"
+
+    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
+    }
+}
--- a/example/T_Slider.qml
+++ b/example/T_Slider.qml
@ -0,0 +1,23 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"Slider"
+
+    FluSlider{
+        Layout.topMargin: 20
+        Layout.leftMargin: 15
+        value: 50
+    }
+    FluSlider{
+        orientation:FluSlider.Vertical
+        Layout.topMargin: 20
+        Layout.leftMargin: 15
+        value: 50
+    }
+}
--- a/example/T_TextBox.qml
+++ b/example/T_TextBox.qml
@ -0,0 +1,58 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"TextBox"
+
+    FluTextBox{
+        Layout.topMargin: 20
+        placeholderText: "单行输入框"
+        Layout.preferredWidth: 300
+        disabled:toggle_switch.selected
+    }
+    FluMultiLineTextBox{
+        Layout.topMargin: 20
+        Layout.preferredWidth: 300
+        placeholderText: "多行输入框"
+        disabled:toggle_switch.selected
+    }
+    FluAutoSuggestBox{
+        Layout.topMargin: 20
+        values:generateRandomNames(100)
+        placeholderText: "AutoSuggestBox"
+        Layout.preferredWidth: 300
+        disabled:toggle_switch.selected
+    }
+
+    FluToggleSwitch{
+        id:toggle_switch
+        text:"Disabled"
+        Layout.topMargin: 20
+    }
+
+    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(name);
+        }
+        return names;
+    }
+
+
+}
--- a/example/T_Theme.qml
+++ b/example/T_Theme.qml
@ -0,0 +1,69 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"Theme"
+
+    RowLayout{
+        Layout.topMargin: 20
+        Repeater{
+            model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+            delegate:  Rectangle{
+                width: 42
+                height: 42
+                radius: 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.isDark ? 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{
+        selected: FluTheme.isDark
+        clickFunc:function(){
+            FluTheme.isDark = !FluTheme.isDark
+        }
+    }
+    FluText{
+        text:"无边框"
+        Layout.topMargin: 20
+    }
+    FluToggleSwitch{
+        selected: FluTheme.isFrameless
+        clickFunc:function(){
+            FluTheme.isFrameless = !FluTheme.isFrameless
+        }
+    }
+    FluText{
+        text:"native文本渲染"
+        Layout.topMargin: 20
+    }
+    FluToggleSwitch{
+        selected: FluTheme.isNativeText
+        clickFunc:function(){
+            FluTheme.isNativeText = !FluTheme.isNativeText
+        }
+    }
+}
--- a/example/T_TimePicker.qml
+++ b/example/T_TimePicker.qml
@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"TimePicker"
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.H"
+            }
+
+            FluTimePicker{
+            }
+
+        }
+    }
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.HH"
+            }
+
+            FluTimePicker{
+                hourFormat:FluTimePicker.HH
+            }
+
+        }
+    }
+
+
+}
--- a/example/T_ToggleSwitch.qml
+++ b/example/T_ToggleSwitch.qml
@ -0,0 +1,19 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"ToggleSwitch"
+
+    FluToggleSwitch{
+        Layout.topMargin: 20
+    }
+    FluToggleSwitch{
+        Layout.topMargin: 20
+        text:"Disabled"
+    }
+}
--- a/example/T_Tooltip.qml
+++ b/example/T_Tooltip.qml
@ -0,0 +1,75 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"Tooltip"
+
+    FluText{
+        Layout.topMargin: 20
+        text:"鼠标悬停不动，弹出Tooltip"
+    }
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 68
+        paddings: 10
+
+        Column{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text:"FluIconButton的text属性自带Tooltip效果"
+            }
+            FluIconButton{
+                iconSource:FluentIcons.ChromeCloseContrast
+                iconSize: 15
+                text:"删除"
+                onClicked:{
+                    showSuccess("点击IconButton")
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 68
+        paddings: 10
+
+        Column{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text:"给一个Button添加Tooltip效果"
+            }
+            FluButton{
+                id:button_1
+                text:"删除"
+                onClicked:{
+                    showSuccess("点击一个Button")
+                }
+                FluTooltip{
+                    visible: button_1.hovered
+                    text:button_1.text
+                    delay: 1000
+                }
+            }
+        }
+    }
+
+
+}
--- a/example/T_TreeView.qml
+++ b/example/T_TreeView.qml
@ -0,0 +1,141 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluContentPage {
+
+    title:"TreeView"
+
+    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))
+    }
+
+
+    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)
+            updateData(org)
+
+        }
+
+    }
+
+
+    ColumnLayout{
+        anchors{
+            left: tree_view.right
+            right: parent.right
+            top: parent.top
+        }
+
+        FluText{
+            text:{
+                if(tree_view.selectionMode === FluTreeView.None){
+                    return "selectionMode->FluTreeView.None"
+                }
+                if(tree_view.selectionMode === FluTreeView.Single){
+                    return "selectionMode->FluTreeView.Single"
+                }
+                if(tree_view.selectionMode === FluTreeView.Multiple){
+                    return "selectionMode->FluTreeView.Multiple"
+                }
+            }
+        }
+
+        FluButton{
+            text:"None"
+            onClicked: {
+                tree_view.selectionMode = FluTreeView.None
+            }
+        }
+
+        FluButton{
+            text:"Single"
+            onClicked: {
+                tree_view.selectionMode = FluTreeView.Single
+            }
+        }
+
+        FluButton{
+            text:"Multiple"
+            onClicked: {
+                tree_view.selectionMode = FluTreeView.Multiple
+            }
+        }
+
+        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(","))
+                }
+            }
+        }
+
+    }
+}
--- a/example/T_Typography.qml
+++ b/example/T_Typography.qml
@ -0,0 +1,84 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluContentPage {
+
+    title: "Typography"
+    property int textSize: 13
+
+    ScrollView{
+        clip: true
+        width: parent.width
+        contentWidth: parent.width
+        ColumnLayout{
+            spacing: 0
+            FluText{
+                text:"Display"
+                Layout.topMargin: 20
+                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 Large"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.BodyLarge
+            }
+            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{
+        orientation:FluSlider.Vertical
+        anchors{
+            right: parent.right
+            rightMargin: 30
+            top: parent.top
+            topMargin: 30
+        }
+        onValueChanged:{
+            textSize = value/100*16+8
+        }
+        value: 31
+    }
+
+}
--- a/example/example.pro
+++ b/example/example.pro
@ -0,0 +1,51 @@
+QT += quick concurrent network
+CONFIG += c++11
+
+DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
+
+SOURCES += \
+        ChatController.cpp \
+        main.cpp
+
+RESOURCES += qml.qrc
+
+RC_ICONS = favicon.ico
+
+#qnx: target.path = /tmp/$${TARGET}/bin
+#else: unix:!android: target.path = /opt/$${TARGET}/bin
+#!isEmpty(target.path): INSTALLS += target
+
+# Additional import path used to resolve QML modules in Qt Creator's code model
+QML_IMPORT_PATH =
+
+# Additional import path used to resolve QML modules just for Qt Quick Designer
+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(QT_ARCH, i386) {
+    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/Win_x86/*.dll) $$DESTDIR
+    contains(QMAKE_CC, cl) {
+        QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, \\)
+    } else {
+        QMAKE_PRE_LINK += $$QMAKE_COPY $$COPYDLL
+    }
+} else {
+    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/Win_x64/*.dll) $$DESTDIR
+    contains(QMAKE_CC, cl) {
+        QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, \\)
+    } else {
+        QMAKE_PRE_LINK += $$QMAKE_COPY $$COPYDLL
+    }
+}
+
+}
+
+
+HEADERS += \
+    ChatController.h
--- a/example/example.qrc
+++ b/example/example.qrc
@ -1,218 +0,0 @@
-<RCC>
-    <qresource prefix="/example">
-        <file>res/svg/avatar_1.svg</file>
-        <file>res/svg/avatar_2.svg</file>
-        <file>res/svg/avatar_3.svg</file>
-        <file>res/svg/avatar_4.svg</file>
-        <file>res/svg/avatar_5.svg</file>
-        <file>res/svg/avatar_6.svg</file>
-        <file>res/svg/avatar_7.svg</file>
-        <file>res/svg/avatar_8.svg</file>
-        <file>res/svg/avatar_9.svg</file>
-        <file>res/svg/avatar_10.svg</file>
-        <file>res/svg/avatar_11.svg</file>
-        <file>res/svg/avatar_12.svg</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>res/image/favicon.ico</file>
-        <file>res/image/bg_home_header.png</file>
-        <file>res/image/ic_home_github.png</file>
-        <file>res/image/control/Acrylic.png</file>
-        <file>res/image/control/AnimatedIcon.png</file>
-        <file>res/image/control/AnimatedVisualPlayer.png</file>
-        <file>res/image/control/AnimationInterop.png</file>
-        <file>res/image/control/AppBarButton.png</file>
-        <file>res/image/control/AppBarSeparator.png</file>
-        <file>res/image/control/AppBarToggleButton.png</file>
-        <file>res/image/control/AutomationProperties.png</file>
-        <file>res/image/control/AutoSuggestBox.png</file>
-        <file>res/image/control/Border.png</file>
-        <file>res/image/control/BreadcrumbBar.png</file>
-        <file>res/image/control/Button.png</file>
-        <file>res/image/control/CalendarDatePicker.png</file>
-        <file>res/image/control/CalendarView.png</file>
-        <file>res/image/control/Canvas.png</file>
-        <file>res/image/control/Checkbox.png</file>
-        <file>res/image/control/Clipboard.png</file>
-        <file>res/image/control/ColorPaletteResources.png</file>
-        <file>res/image/control/ColorPicker.png</file>
-        <file>res/image/control/ComboBox.png</file>
-        <file>res/image/control/CommandBar.png</file>
-        <file>res/image/control/CommandBarFlyout.png</file>
-        <file>res/image/control/CompactSizing.png</file>
-        <file>res/image/control/ConnectedAnimation.png</file>
-        <file>res/image/control/ContentDialog.png</file>
-        <file>res/image/control/CreateMultipleWindows.png</file>
-        <file>res/image/control/DataGrid.png</file>
-        <file>res/image/control/DatePicker.png</file>
-        <file>res/image/control/DropDownButton.png</file>
-        <file>res/image/control/EasingFunction.png</file>
-        <file>res/image/control/Expander.png</file>
-        <file>res/image/control/FilePicker.png</file>
-        <file>res/image/control/FlipView.png</file>
-        <file>res/image/control/Flyout.png</file>
-        <file>res/image/control/Grid.png</file>
-        <file>res/image/control/GridView.png</file>
-        <file>res/image/control/HyperlinkButton.png</file>
-        <file>res/image/control/IconElement.png</file>
-        <file>res/image/control/Image.png</file>
-        <file>res/image/control/ImplicitTransition.png</file>
-        <file>res/image/control/InfoBadge.png</file>
-        <file>res/image/control/InfoBar.png</file>
-        <file>res/image/control/InkCanvas.png</file>
-        <file>res/image/control/InkToolbar.png</file>
-        <file>res/image/control/InputValidation.png</file>
-        <file>res/image/control/ItemsRepeater.png</file>
-        <file>res/image/control/Line.png</file>
-        <file>res/image/control/ListBox.png</file>
-        <file>res/image/control/ListView.png</file>
-        <file>res/image/control/MediaPlayerElement.png</file>
-        <file>res/image/control/MenuBar.png</file>
-        <file>res/image/control/MenuFlyout.png</file>
-        <file>res/image/control/NavigationView.png</file>
-        <file>res/image/control/NumberBox.png</file>
-        <file>res/image/control/PageTransition.png</file>
-        <file>res/image/control/ParallaxView.png</file>
-        <file>res/image/control/PasswordBox.png</file>
-        <file>res/image/control/PersonPicture.png</file>
-        <file>res/image/control/PipsPager.png</file>
-        <file>res/image/control/Pivot.png</file>
-        <file>res/image/control/ProgressBar.png</file>
-        <file>res/image/control/ProgressRing.png</file>
-        <file>res/image/control/PullToRefresh.png</file>
-        <file>res/image/control/RadialGradientBrush.png</file>
-        <file>res/image/control/RadioButton.png</file>
-        <file>res/image/control/RadioButtons.png</file>
-        <file>res/image/control/RatingControl.png</file>
-        <file>res/image/control/RelativePanel.png</file>
-        <file>res/image/control/RepeatButton.png</file>
-        <file>res/image/control/RevealFocus.png</file>
-        <file>res/image/control/RichEditBox.png</file>
-        <file>res/image/control/RichTextBlock.png</file>
-        <file>res/image/control/ScrollViewer.png</file>
-        <file>res/image/control/SemanticZoom.png</file>
-        <file>res/image/control/Shape.png</file>
-        <file>res/image/control/Slider.png</file>
-        <file>res/image/control/Sound.png</file>
-        <file>res/image/control/SplitButton.png</file>
-        <file>res/image/control/SplitView.png</file>
-        <file>res/image/control/StackPanel.png</file>
-        <file>res/image/control/StandardUICommand.png</file>
-        <file>res/image/control/SwipeControl.png</file>
-        <file>res/image/control/TabView.png</file>
-        <file>res/image/control/TeachingTip.png</file>
-        <file>res/image/control/TextBlock.png</file>
-        <file>res/image/control/TextBox.png</file>
-        <file>res/image/control/ThemeTransition.png</file>
-        <file>res/image/control/TimePicker.png</file>
-        <file>res/image/control/TitleBar.png</file>
-        <file>res/image/control/ToggleButton.png</file>
-        <file>res/image/control/ToggleSplitButton.png</file>
-        <file>res/image/control/ToggleSwitch.png</file>
-        <file>res/image/control/ToolTip.png</file>
-        <file>res/image/control/TreeView.png</file>
-        <file>res/image/control/VariableSizedWrapGrid.png</file>
-        <file>res/image/control/Viewbox.png</file>
-        <file>res/image/control/WebView.png</file>
-        <file>res/image/control/XamlUICommand.png</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>
--- a/example/example_en_US.ts
+++ b/example/example_en_US.ts
--- a/example/example_zh_CN.ts
+++ b/example/example_zh_CN.ts
--- a/example/favicon.ico
+++ b/example/favicon.ico
--- a/example/main.cpp
+++ b/example/main.cpp
@ -0,0 +1,43 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QQmlContext>
+#include <QDir>
+#include <QQuickWindow>
+#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");
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+//    QQuickWindow::setSceneGraphBackend(QSGRendererInterface::Software);
+    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();
+}
--- a/example/page/AboutPage.qml
+++ b/example/page/AboutPage.qml
@ -0,0 +1,99 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+
+FluWindow {
+
+    width: 500
+    height: 600
+    minimumWidth: 500
+    minimumHeight: 600
+    maximumWidth: 500
+    maximumHeight: 600
+
+    title:"关于"
+
+    FluAppBar{
+        id:appbar
+        title:"关于"
+    }
+
+    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.1.1"
+                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
+                    }
+            }
+        }
+
+
+    }
+
+
+
+}
--- a/example/page/ChatPage.qml
+++ b/example/page/ChatPage.qml
@ -0,0 +1,261 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import Controller 1.0
+import QtQuick.Dialogs 1.3
+
+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"
+    }
+
+    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.isDark){
+                    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.isDark ? 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()
+    }
+
+}
--- a/example/qml/window/LoginWindow.qml
+++ b/example/qml/window/LoginWindow.qml
@ -1,23 +1,31 @@
-import QtQuick 2.15
+import QtQuick 2.15
 import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "../component"

 FluWindow {

-    id: window
-    title: qsTr("Login")
+    id:window
    width: 400
    height: 400
-    fixSize: true
-    modality: Qt.ApplicationModal
+    minimumWidth: 400
+    minimumHeight: 400
+    maximumWidth: 400
+    maximumHeight: 400
+    modality:2
+
+    title:"登录"
+
    onInitArgument:
        (argument)=>{
-            textbox_uesrname.updateText(argument.username)
+            textbox_uesrname.text = argument.username
            textbox_password.focus =  true
        }

+    FluAppBar{
+        id:appbar
+        title:"登录"
+    }
+
    ColumnLayout{
        anchors{
            left: parent.left
@ -25,35 +33,40 @@ FluWindow {
            verticalCenter: parent.verticalCenter
        }

+
        FluAutoSuggestBox{
-            id: textbox_uesrname
-            items:[{title:"Admin"},{title:"User"}]
-            placeholderText: qsTr("Please enter the account")
+            id:textbox_uesrname
+            values:["Admin","User"]
+            placeholderText: "请输入账号"
            Layout.preferredWidth: 260
            Layout.alignment: Qt.AlignHCenter
        }

        FluTextBox{
-            id: textbox_password
+            id:textbox_password
            Layout.topMargin: 20
            Layout.preferredWidth: 260
-            placeholderText: qsTr("Please enter your password")
+            placeholderText: "请输入密码"
            echoMode:TextInput.Password
            Layout.alignment: Qt.AlignHCenter
        }

        FluFilledButton{
-            text: qsTr("Login")
+            text:"登录"
            Layout.alignment: Qt.AlignHCenter
            Layout.topMargin: 20
            onClicked:{
                if(textbox_password.text === ""){
-                    showError(qsTr("Please feel free to enter a password"))
+                    showError("请随便输入一个密码")
                    return
                }
-                setResult({password:textbox_password.text})
+                onResult({password:textbox_password.text})
                window.close()
            }
        }
+
    }
+
+
+
 }
--- a/example/page/MainPage.qml
+++ b/example/page/MainPage.qml
@ -0,0 +1,258 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+import FluentUI 1.0
+
+FluWindow {
+    id:rootwindow
+    width: 860
+    height: 600
+    title: "FluentUI"
+    minimumWidth: 500
+    minimumHeight: 400
+
+    FluAppBar{
+        id:appbar
+        title: "FluentUI"
+    }
+
+    FluObject{
+        id:original_items
+
+        FluPaneItemHeader{
+            title:"Inputs"
+        }
+
+        FluPaneItem{
+            title:"Buttons"
+            onTap:{
+                nav_view.push("qrc:/T_Buttons.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Slider"
+            onTap:{
+                nav_view.push("qrc:/T_Slider.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"ToggleSwitch"
+            onTap:{
+                nav_view.push("qrc:/T_ToggleSwitch.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Form"
+        }
+
+        FluPaneItem{
+            title:"TextBox"
+            onTap:{
+                nav_view.push("qrc:/T_TextBox.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                nav_view.push("qrc:/T_TimePicker.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"DatePicker"
+            onTap:{
+                nav_view.push("qrc:/T_DatePicker.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Surface"
+        }
+
+        FluPaneItem{
+            title:"InfoBar"
+            onTap:{
+                nav_view.push("qrc:/T_InfoBar.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Progress"
+            onTap:{
+                nav_view.push("qrc:/T_Progress.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Badge"
+            onTap:{
+                nav_view.push("qrc:/T_Badge.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Rectangle"
+            onTap:{
+                nav_view.push("qrc:/T_Rectangle.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Carousel"
+            onTap:{
+                nav_view.push("qrc:/T_Carousel.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Expander"
+            onTap:{
+                nav_view.push("qrc:/T_Expander.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Popus"
+        }
+
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                nav_view.push("qrc:/T_Dialog.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Tooltip"
+            onTap:{
+                nav_view.push("qrc:/T_Tooltip.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Menu"
+            onTap:{
+                nav_view.push("qrc:/T_Menu.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Navigation"
+        }
+
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                nav_view.push("qrc:/T_TreeView.qml")
+            }
+        }
+
+
+        FluPaneItem{
+            title:"MultiWindow"
+            onTap:{
+                nav_view.push("qrc:/T_MultiWindow.qml")
+            }
+        }
+
+        FluPaneItemHeader{
+            title:"Theming"
+        }
+
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                nav_view.push("qrc:/T_Theme.qml")
+            }
+        }
+
+        FluPaneItem{
+            title:"Awesome"
+            onTap:{
+                nav_view.push("qrc:/T_Awesome.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Typography"
+            onTap:{
+                nav_view.push("qrc:/T_Typography.qml")
+            }
+        }
+
+    }
+
+    FluObject{
+        id:footer_items
+        FluPaneItemSeparator{}
+        FluPaneItem{
+            title:"意见反馈"
+            onTap:{
+                Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
+            }
+        }
+        FluPaneItem{
+            title:"关于"
+            onTap:{
+                FluApp.navigate("/about")
+            }
+        }
+    }
+
+
+    FluNavigationView{
+        id:nav_view
+        anchors{
+            top: appbar.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        items:original_items
+        footerItems:footer_items
+
+        actions:[
+            Image {
+                width: 30
+                height: 30
+                Layout.preferredWidth: 30
+                Layout.preferredHeight: 30
+                sourceSize: Qt.size(60,60)
+                source: "qrc:/res/image/logo_openai.png"
+                Layout.rightMargin: 5
+                MouseArea{
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        FluApp.navigate("/chat")
+                    }
+                }
+            },
+            FluText{
+                text:"夜间模式"
+                fontStyle: FluText.Body
+            },
+            FluToggleSwitch{
+                selected: FluTheme.isDark
+                clickFunc:function(){
+                    FluTheme.isDark = !FluTheme.isDark
+                }
+            }
+        ]
+
+        Component.onCompleted: {
+            nav_view.setCurrentIndex(1)
+            nav_view.push("qrc:/T_Buttons.qml")
+        }
+
+
+    }
+
+
+}
--- a/example/qml.qrc
+++ b/example/qml.qrc
@ -0,0 +1,46 @@
+<RCC>
+    <qresource prefix="/">
+        <file>App.qml</file>
+        <file>res/image/image_huoyin.webp</file>
+        <file>res/svg/avatar_1.svg</file>
+        <file>res/svg/avatar_2.svg</file>
+        <file>res/svg/avatar_3.svg</file>
+        <file>res/svg/avatar_4.svg</file>
+        <file>res/svg/avatar_5.svg</file>
+        <file>res/svg/avatar_6.svg</file>
+        <file>res/svg/avatar_7.svg</file>
+        <file>res/svg/avatar_8.svg</file>
+        <file>res/svg/avatar_9.svg</file>
+        <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>T_Carousel.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>
+    </qresource>
+</RCC>
--- a/example/qml/App.qml
+++ b/example/qml/App.qml
@ -1,125 +0,0 @@
-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})
-            }
-        }
-    }
-
-}
--- a/example/qml/chart/T_BarChart.qml
+++ b/example/qml/chart/T_BarChart.qml
@ -1,132 +0,0 @@
-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
-                            }]
-                    }
-                }
-            }
-        }
-    }
-
-}
--- a/example/qml/chart/T_BubbleChart.qml
+++ b/example/qml/chart/T_BubbleChart.qml
@ -1,74 +0,0 @@
-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'
-                    }
-                }
-            }
-        }
-    }
-
-}
--- a/example/qml/chart/T_LineChart.qml
+++ b/example/qml/chart/T_LineChart.qml
@ -1,63 +0,0 @@
-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()
-        }
-    }
-}
--- a/example/qml/chart/T_PieChart.qml
+++ b/example/qml/chart/T_PieChart.qml
@ -1,93 +0,0 @@
-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
-                    }
-                }
-            }
-        }
-    }
-}
--- a/example/qml/chart/T_PolarAreaChart.qml
+++ b/example/qml/chart/T_PolarAreaChart.qml
@ -1,57 +0,0 @@
-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
-                    }
-                }
-            }
-        }
-    }
-
-}
--- a/example/qml/chart/T_RadarChart.qml
+++ b/example/qml/chart/T_RadarChart.qml
@ -1,74 +0,0 @@
-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
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-}
--- a/example/qml/chart/T_ScatterChart.qml
+++ b/example/qml/chart/T_ScatterChart.qml
@ -1,122 +0,0 @@
-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("Scatter 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: 'scatter'
-            chartData: {
-                return {
-                    datasets: [{
-                            label: 'My First dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-1',
-                            borderColor: '#ff5555',
-                            backgroundColor: 'rgba(255,192,192,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }, {
-                            label: 'My Second dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-2',
-                            borderColor: '#5555ff',
-                            backgroundColor: 'rgba(192,192,255,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }]
-                }}
-            chartOptions: {return {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                    hoverMode: 'nearest',
-                    intersect: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Scatter Chart - Multi Axis'
-                    },
-                    scales: {
-                        xAxes: [{
-                                position: 'bottom',
-                                gridLines: {
-                                    zeroLineColor: 'rgba(0,0,0,1)'
-                                }
-                            }],
-                        yAxes: [{
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'left',
-                                id: 'y-axis-1',
-                            }, {
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'right',
-                                reverse: true,
-                                id: 'y-axis-2',
-
-                                // grid line settings
-                                gridLines: {
-                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
-                                },
-                            }],
-                    }
-                }
-            }
-        }
-    }
-}
--- a/example/qml/component/CodeExpander.qml
+++ b/example/qml/component/CodeExpander.qml
@ -1,148 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
-
-FluExpander{
-
-    id:control
-    property string code: ""
-    headerText: qsTr("Source")
-    contentHeight:content.height
-    focus: false
-
-    FluCopyableText{
-        id:content
-        width:parent.width
-        text:highlightQmlCode(code)
-        textFormat: FluCopyableText.RichText
-        padding: 10
-        topPadding: 10
-        leftPadding: 10
-        rightPadding: 10
-        bottomPadding: 10
-    }
-
-    FluIconButton{
-        iconSource:FluentIcons.Copy
-        anchors{
-            right: parent.right
-            top: parent.top
-            rightMargin: 5
-            topMargin: 5
-        }
-        onClicked:{
-            FluTools.clipText(FluTools.html2PlantText(content.text))
-            showSuccess(qsTr("The Copy is Successful"))
-        }
-    }
-
-    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) {
-        var qmlKeywords = [
-                    "FluTextButton",
-                    "FluAppBar",
-                    "FluAutoSuggestBox",
-                    "FluBadge",
-                    "FluButton",
-                    "FluCalendarPicker",
-                    "FluCalendarView",
-                    "FluCarousel",
-                    "FluCheckBox",
-                    "FluColorPicker",
-                    "FluColorView",
-                    "FluComboBox",
-                    "FluContentDialog",
-                    "FluContentPage",
-                    "FluDatePicker",
-                    "FluDivider",
-                    "FluDropDownButton",
-                    "FluExpander",
-                    "FluFilledButton",
-                    "FluFlipView",
-                    "FluFocusRectangle",
-                    "FluIcon",
-                    "FluIconButton",
-                    "FluInfoBar",
-                    "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",
-                    "FluStatusLayout",
-                    "FluRatingControl",
-                    "FluPasswordBox",
-                    "FluBreadcrumbBar",
-                    "FluCopyableText",
-                    "FluAcrylic",
-                    "FluRemoteLoader",
-                    "FluMenuBar",
-                    "FluPagination",
-                    "FluRadioButtons",
-                    "FluImage",
-                    "FluSpinBox",
-                    "FluWatermark",
-                    "FluTour",
-                    "FluQRCode",
-                    "FluTimeline",
-                    "FluChart",
-                    "FluRangeSlider",
-                    "FluStaggeredLayout",
-                    "FluProgressButton",
-                    "FluLoadingButton",
-                    "FluClip",
-                    "FluNetwork",
-                    "FluShortcutPicker",
-                    "FluWindowResultLauncher",
-                    "FluRouter",
-                    "FluGroupBox",
-                    "FluSheet",
-                ];
-        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>");
-    }
-}
--- a/Show More
+++ b/Show More