2025-04-21 10:21:10 +08:00
613 changed files with 13311 additions and 149282 deletions
--- 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,69 +2,57 @@ 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-12]
+        qt_ver: [6.4.3]
        qt_arch: [clang_64]
    env:
      targetName: example
    steps:
-      - name: Check out repository
-        uses: actions/checkout@v3
+      - name: '⚙️ Cache Qt'
+        id: cache-qt
+        uses: actions/cache@v3
        with:
-          submodules: recursive
-          
+          path: ${{ runner.workspace }}/Qt
+          key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
      - name: Install Qt
        uses: jurplel/install-qt-action@v3
        with:
          version: ${{ matrix.qt_ver }}
          cache: ${{steps.cache-qt.outputs.cache-hit}}
          arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
-          
-      - name: Set up Ninja
-        uses: seanmiddleditch/gha-setup-ninja@v3
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+      - 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
@ -73,4 +61,4 @@ jobs:
          file: bin/release/${{ env.targetName }}.dmg
          asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.dmg
          tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true
--- a/.github/workflows/ubuntu.yml
+++ b/.github/workflows/ubuntu.yml
@ -1,92 +1,71 @@
 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-20.04]
+        qt_ver: [6.4.3]
        qt_arch: [gcc_64]
    env:
      targetName: example
    steps:
-      - name: Check out repository
-        uses: actions/checkout@v3
+      - name: '⚙️ Cache Qt'
+        id: cache-qt
+        uses: actions/cache@v3
        with:
-          submodules: recursive
-          
+          path: ${{ runner.workspace }}/Qt
+          key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
      - name: Install Qt
        uses: jurplel/install-qt-action@v3
        with:
          version: ${{ matrix.qt_ver }}
          cache: ${{steps.cache-qt.outputs.cache-hit}}
          arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
-      
-      - name: Set up Ninja
-        uses: seanmiddleditch/gha-setup-ninja@v3
-        with:
-          version: 1.10.2
-          
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
      - 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
@ -95,4 +74,4 @@ jobs:
          file: ${{ env.targetName }}.AppImage
          asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.AppImage
          tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true
--- a/.github/workflows/windows-mingw.yml
+++ b/.github/workflows/windows-mingw.yml
@ -2,76 +2,56 @@ 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-2022
    strategy:
      matrix:
-        os: [windows-latest]
        include:
          - qt_arch: win64_mingw
-            qt_ver: 6.6.2
+            qt_ver: 6.4.3
            qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
            qt_tools_mingw_install: mingw900_64
    env:
      targetName: example.exe
      fileName: example
    steps:
-      - name: Check out repository
-        uses: actions/checkout@v3
-        with:
-          submodules: recursive
-          
-      - name: Setup ninja
-        uses: seanmiddleditch/gha-setup-ninja@master
-        with:
-          version: 1.10.2
-      
      - name: Install Qt
        uses: jurplel/install-qt-action@v3
        with:
          version: ${{ matrix.qt_ver }}
          arch: ${{ matrix.qt_arch }}
          cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
-      
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 1
      - name: Qt6 environment configuration
        if: ${{ startsWith( matrix.qt_ver, 6 ) }}
        shell: pwsh
        run: |
          Write-Output "${{ env.Qt6_DIR }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
          Write-Output "${{ env.Qt6_DIR }}/../../Tools/${{ matrix.qt_tools_mingw_install }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
-      
-      - name: where is 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:
@ -81,24 +61,16 @@ jobs:
          & 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: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.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,69 +1,68 @@
 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
+    # 运行平台， windows-latest目前是windows server 2019 
+    # 参考文档 https://github.com/actions/virtual-environments/blob/main/images/win/Windows2019-Readme.md
    runs-on: ${{ matrix.os }}
    strategy:
+      # 矩阵配置
      matrix:
-        os: [windows-latest]
+        os: [windows-2019]
        include:
-          - qt_ver: 6.6.2        
+          - qt_ver: 6.4.3          
            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
+      - name: '⚙️ Cache Qt'
+        id: cache-qt
+        uses: actions/cache@v3
        with:
-          submodules: recursive
-          
-      - name: Setup ninja
-        uses: seanmiddleditch/gha-setup-ninja@master
-        with:
-          version: 1.10.2
-          
+          path: ${{ runner.workspace }}\Qt
+          key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
+      # 安装Qt
      - name: Install Qt
+        # 使用外部action。这个action专门用来安装Qt
        uses: jurplel/install-qt-action@v3
        with:
          version: ${{ matrix.qt_ver }}
          arch: ${{ matrix.qt_arch }}
          cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech qt3d'
-          
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+      # 拉取代码
+      - 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:
@ -74,25 +73,20 @@ jobs:
          & 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: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
          tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true 
--- a/.gitignore
+++ b/.gitignore
@ -31,13 +31,6 @@ target_wrapper.*
 # QtCreator CMake
 CMakeLists.txt.user*

+src/build-preset/plugins.qmltypes
 bin
-.DS_Store
-build
-cmake-build-*
-.idea
-package
-example/Version.h
-dist
-
-*.qm
+.DS_Store
--- 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/msvc/x86/libcrypto-1_1.dll
+++ b/3rdparty/msvc/x86/libcrypto-1_1.dll
--- a/3rdparty/msvc/x86/libssl-1_1.dll
+++ b/3rdparty/msvc/x86/libssl-1_1.dll
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@ -1,36 +1,5 @@
-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)
+cmake_minimum_required(VERSION 3.16)
+project(FluentUI VERSION 0.1 LANGUAGES CXX)

 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}")
+add_subdirectory(example)
--- a/FluentUI.pro
+++ b/FluentUI.pro
@ -0,0 +1,6 @@
+TEMPLATE = subdirs
+
+SUBDIRS += \
+    src/FluentUI.pro \
+    example
+    example.depends = src/FluentUI.pro
--- a/README.md
+++ b/README.md
@ -1,120 +1,97 @@
-# 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.
+## 首页

-## ⚽ Get started
+![](doc/preview/home.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
+![](doc/preview/multiwindow.png)

-(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)
+### ⚡ Visitor count
+![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
--- 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,28 @@
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtMultimedia
+import FluentUI
+
+Window {
+    id:app
+    color: "#00000000"
+    //初始化一个MediaPlayer，解决macos切换到T_MediaPalyer页面崩溃问题
+    MediaPlayer{}
+    Component.onCompleted: {
+        FluApp.init(app,properties)
+        FluTheme.frameless = ("windows" === Qt.platform.os)
+        FluTheme.dark = false
+        FluApp.routes = {
+            "/":"qrc:/page/MainPage.qml",
+            "/about":"qrc:/page/AboutPage.qml",
+            "/login":"qrc:/page/LoginPage.qml",
+            "/chat":"qrc:/page/ChatPage.qml",
+            "/media":"qrc:/page/MediaPage.qml",
+        }
+        FluApp.initialRoute = "/"
+        FluApp.run()
+    }
+
+}
--- a/example/CMakeLists.txt
+++ b/example/CMakeLists.txt
@ -1,172 +1,86 @@
-cmake_minimum_required(VERSION 3.20)
+cmake_minimum_required(VERSION 3.16)
+project(example)

-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)
+set(CMAKE_AUTOUIC ON)

-#判断FluentUI库类型
-if (FLUENTUI_BUILD_STATIC_LIB)
-    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
-endif ()
+set(CMAKE_CXX_STANDARD 17)

-#设置可执行文件输出目录
-set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
+if(CMAKE_SIZEOF_VOID_P EQUAL 8)
+  set(platform 64)
+else()
+  set(platform 32)
+endif()

-if (APPLE)
-    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
-else ()
-    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
-endif ()
+if(CMAKE_BUILD_TYPE STREQUAL "Debug")
+  set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../bin/debug)
+else()
+  set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../bin/release)
+endif()

-#导入Qt相关依赖包
-find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network Widgets)
-find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network Widgets)
+find_package(Qt6 COMPONENTS Core Quick QuickControls2 Concurrent Network Multimedia REQUIRED)

-#添加国际化脚本
-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(SOURCES
+    ChatController.cpp
+    main.cpp
 )

-##生成版本信息头文件
-set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
-configure_file(
-        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
-        ${HEADER_FILE_VERSION_PATH}
+set(HEADERS
+    ChatController.h
 )

-#遍历所有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
+set(RESOURCES
+    qml.qrc
 )

-#如果是静态库则需要手动注册插件，导入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
+set(RC_ICONS
+    favicon.ico
 )

-#Release也支持日志打印代码位置
-target_compile_definitions(${PROJECT_NAME}
-        PRIVATE
-        QT_MESSAGELOGCONTEXT
+qt_add_resources(QT_RESOURCES ${RESOURCES})
+
+add_executable(${PROJECT_NAME} ${SOURCES} ${HEADERS} ${QT_RESOURCES} ${RC_ICONS})
+
+if(WIN32)
+    if(CMAKE_C_COMPILER_ID STREQUAL "MSVC")
+        file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/msvc/*.dll)
+        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
+            COMMAND ${CMAKE_COMMAND} -E copy
+            ${DLL_FILES}
+            ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
+        )
+    else()
+        file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/mingw/*.dll)
+        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
+            COMMAND ${CMAKE_COMMAND} -E copy
+            ${DLL_FILES}
+            ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
+        )
+    endif()
+endif()
+
+target_compile_definitions(${PROJECT_NAME} PRIVATE
+    QT_DEPRECATED_WARNINGS
+    QT_NO_WARNING_OUTPUT
 )

-#目标文件链接库
 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
+    Qt6::Core
+    Qt6::Quick
+    Qt6::QuickControls2
+    Qt6::Concurrent
+    Qt6::Network
+    Qt6::Multimedia
 )

-#添加部署脚本
-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 ()
+if(WIN32)
+    target_compile_definitions(${PROJECT_NAME} PRIVATE UNICODE WIN32 _WINDOWS)
+    target_link_libraries(${PROJECT_NAME} PRIVATE dwmapi user32)
+endif()
+
+if(APPLE)
+    set_target_properties(${PROJECT_NAME} PROPERTIES
+        MACOSX_BUNDLE_INFO_PLIST Info.plist
+    )
+endif()
--- 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/Info.plist
+++ b/example/Info.plist
@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
+	<key>CFBundleExecutable</key>
+	<string>example</string>
+	<key>CFBundleIconFile</key>
+	<string></string>
+	<key>CFBundleIdentifier</key>
+	<string>com.zhuzichu.example</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>LSMinimumSystemVersion</key>
+	<string>10.13</string>
+	<key>NOTE</key>
+	<string>This file was generated by Qt/QMake.</string>
+	<key>NSPrincipalClass</key>
+	<string>NSApplication</string>
+	<key>NSSupportsAutomaticGraphicsSwitching</key>
+	<true/>
+</dict>
+</plist>
--- 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,74 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+
+FluContentPage {
+
+    title:"Awesome"
+
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+
+    FluTextBox{
+        id:text_box
+        placeholderText: "请输入关键字"
+        anchors{
+            topMargin: 20
+            top:parent.top
+        }
+    }
+
+    FluFilledButton{
+        text:"搜索"
+        anchors{
+            left: text_box.right
+            verticalCenter: text_box.verticalCenter
+            leftMargin: 14
+        }
+        onClicked: {
+            grid_view.model = FluApp.awesomelist(text_box.text)
+        }
+    }
+    GridView{
+        id:grid_view
+        cellWidth: 80
+        cellHeight: 80
+        clip: true
+        model:FluApp.awesomelist()
+        ScrollBar.vertical: FluScrollBar {}
+        anchors{
+            topMargin: 10
+            top:text_box.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        delegate: Item {
+            width: 68
+            height: 80
+            FluIconButton{
+                id:item_icon
+                iconSource:modelData.icon
+                anchors.horizontalCenter: parent.horizontalCenter
+                onClicked: {
+                    var text  ="FluentIcons."+modelData.name;
+                    FluApp.clipText(text)
+                    showSuccess("您复制了 "+text)
+                }
+            }
+            FluText {
+                id:item_name
+                font.pixelSize: 10
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: item_icon.bottom
+                width:parent.width
+                wrapMode: Text.WrapAnywhere
+                text: modelData.name
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+    }
+}
--- a/example/qml/page/T_Badge.qml
+++ b/example/qml/page/T_Badge.qml
@ -1,31 +1,35 @@
-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"
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"

 FluScrollablePage{

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

-    FluFrame{
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
        Layout.fillWidth: true
-        height: 120
-        padding: 10
+        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 +38,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:0
                    }
                }
@ -46,8 +48,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:5
                    }
                }
@ -57,8 +57,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:50
                    }
                }
@ -68,8 +66,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        count:100
                    }
                }
@ -79,8 +75,6 @@ FluScrollablePage{
                    radius:  8
                    color: Qt.rgba(191/255,191/255,191/255,1)
                    FluBadge{
-                        topRight: true
-                        showZero: true
                        isDot:true
                    }
                }
@ -90,8 +84,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 +94,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)
                    }
@ -113,7 +103,6 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
        code:'Rectangle{
    width: 40
    height: 40
--- a/example/T_Buttons.qml
+++ b/example/T_Buttons.qml
@ -0,0 +1,372 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+    title:"Buttons"
+
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluText{
+        Layout.topMargin: 20
+        text:"支持Tab键切换焦点，空格键执行点击事件"
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluTextButton{
+            disabled:text_button_switch.selected
+            text:"Text Button"
+            onClicked: {
+                showInfo("点击Text Button")
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:text_button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTextButton{
+    text:"Text Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluButton{
+            disabled:button_switch.selected
+            text:"Standard Button"
+            onClicked: {
+                showInfo("点击StandardButton")
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluButton{
+    text:"Standard Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluFilledButton{
+            disabled:filled_button_switch.selected
+            text:"Filled Button"
+            onClicked: {
+                showWarning("点击FilledButton")
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:filled_button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluFilledButton{
+    text:"Filled Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluToggleButton{
+            disabled:toggle_button_switch.selected
+            text:"Toggle Button"
+            onClicked: {
+               selected = !selected
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:toggle_button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluToggleButton{
+    text:"Toggle Button"
+    onClicked: {
+        selected = !selected
+    }
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        FluIconButton{
+            iconSource:FluentIcons.ChromeCloseContrast
+            disabled:icon_button_switch.selected
+            iconSize: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked:{
+                showSuccess("点击IconButton")
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:icon_button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluIconButton{
+    iconSource:FluentIcons.ChromeCloseContrast
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        FluDropDownButton{
+            disabled:drop_down_button_switch.selected
+            text:"DropDownButton"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            items:[
+                FluMenuItem{
+                    text:"Menu_1"
+                },
+                FluMenuItem{
+                    text:"Menu_2"
+                },
+                FluMenuItem{
+                    text:"Menu_3"
+                },
+                FluMenuItem{
+                    text:"Menu_4"
+                }
+            ]
+        }
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:drop_down_button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluDropDownButton{
+    text:"DropDownButton"
+    items:[
+        FluMenuItem{
+            text:"Menu_1"
+        },
+        FluMenuItem{
+            text:"Menu_2"
+        },
+        FluMenuItem{
+            text:"Menu_3"
+        },
+        FluMenuItem{
+            text:"Menu_4"
+        }
+    ]
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            spacing: 8
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            Repeater{
+                id:repeater
+                property int selecIndex : 0
+                model: 3
+                delegate:  FluRadioButton{
+                    selected : repeater.selecIndex===index
+                    disabled:radio_button_switch.selected
+                    text:"Radio Button_"+index
+                    onClicked:{
+                        repeater.selecIndex = index
+                    }
+                }
+            }
+        }
+
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:radio_button_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluRadioButton{
+    selected:true
+    text:"Text Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        FluCheckBox{
+            disabled:check_box_switch.selected
+            text:"Check Box"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:check_box_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCheckBox{
+    text:"Check Box"
+}'
+    }
+}
--- a/example/T_CalendarPicker.qml
+++ b/example/T_CalendarPicker.qml
@ -0,0 +1,52 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"CalendarPicker"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 350
+        paddings: 10
+        FluCalendarView{
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCalendarView{
+
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+        ColumnLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluCalendarPicker{
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCalendarPicker{
+
+}'
+    }
+
+}
--- a/example/T_Carousel.qml
+++ b/example/T_Carousel.qml
@ -0,0 +1,50 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"Carousel"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluText{
+                text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
+            }
+            FluCarousel{
+                id:carousel
+                Layout.topMargin: 20
+                Layout.leftMargin: 5
+                Component.onCompleted: {
+                    carousel.setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCarousel{
+    width: 400
+    height: 300
+    Component.onCompleted: {
+        setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
+    }
+}'
+    }
+}
--- a/example/T_CheckBox.qml
+++ b/example/T_CheckBox.qml
@ -0,0 +1,38 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"CheckBox"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        Row{
+            spacing: 30
+            anchors.verticalCenter: parent.verticalCenter
+            FluCheckBox{
+            }
+            FluCheckBox{
+                text:"Text"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluCheckBox{
+    text:"Text"
+}'
+    }
+
+}
--- a/example/T_ColorPicker.qml
+++ b/example/T_ColorPicker.qml
@ -0,0 +1,73 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"ColorPicker"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 280
+        Layout.topMargin: 20
+        paddings: 10
+        ColumnLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluText{
+                text:"此颜色组件是Github上的开源项目"
+            }
+            FluTextButton{
+                leftPadding: 0
+                rightPadding: 0
+                text:"https://github.com/rshest/qml-colorpicker"
+                onClicked: {
+                    Qt.openUrlExternally(text)
+                }
+            }
+            FluColorView{
+
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluColorView{
+
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+
+        RowLayout{
+            FluText{
+                text:"点击选择颜色->"
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluColorPicker{
+
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluColorPicker{
+
+}'
+    }
+
+}
+
--- a/example/qml/page/T_DatePicker.qml
+++ b/example/qml/page/T_DatePicker.qml
@ -1,66 +1,64 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
-import "../component"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"

 FluScrollablePage{

-    title: qsTr("DatePicker")
+    title:"TimePicker"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0

-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 80
-        padding: 10
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
        ColumnLayout{
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluText{
-                text: qsTr("showYear=true")
+                text:"showYear=true"
            }
            FluDatePicker{
-                current: new Date()
-                onAccepted: {
-                    showSuccess(current.toLocaleDateString())
-                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
        code:'FluDatePicker{

 }'
    }

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

 FluScrollablePage{

-    title: qsTr("FlipView")
+    title:"FlipView"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0

-    FluFrame{
-        Layout.fillWidth: true
-        Layout.preferredHeight: 340
-        padding: 10
-        ColumnLayout{
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text: qsTr("Horizontal FlipView")
-            }
-            FluFlipView{
-                Image{
-                    source: "qrc:/example/res/image/banner_1.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_2.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_3.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -6
-        code:'FluFlipView{
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-}
-'
-    }
-
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        height: 340
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        ColumnLayout{
            anchors.verticalCenter: parent.verticalCenter
            FluText{
-                text: qsTr("Vertical FlipView")
+                text:"水平方向的FlipView"
            }
            FluFlipView{
-                vertical:true
                Image{
-                    source: "qrc:/example/res/image/banner_1.jpg"
+                    source: "qrc:/res/image/banner_1.jpg"
                    asynchronous: true
                    fillMode:Image.PreserveAspectCrop
                }
                Image{
-                    source: "qrc:/example/res/image/banner_2.jpg"
+                    source: "qrc:/res/image/banner_2.jpg"
                    asynchronous: true
                    fillMode:Image.PreserveAspectCrop
                }
                Image{
-                    source: "qrc:/example/res/image/banner_3.jpg"
+                    source: "qrc:/res/image/banner_3.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluFlipView{
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+    Image{
+        source: "qrc:/res/image/banner_1.jpg"
+        asynchronous: true
+        fillMode:Image.PreserveAspectCrop
+    }
+}
+'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 340
+        paddings: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text:"垂直方向的FlipView"
+            }
+            FluFlipView{
+                vertical:true
+                Image{
+                    source: "qrc:/res/image/banner_1.jpg"
+                    asynchronous: true
+                    sourceSize: Qt.size(400,300)
+                    fillMode:Image.PreserveAspectCrop
+                }
+                Image{
+                    source: "qrc:/res/image/banner_2.jpg"
+                    asynchronous: true
+                    fillMode:Image.PreserveAspectCrop
+                }
+                Image{
+                    source: "qrc:/res/image/banner_3.jpg"
                    asynchronous: true
                    fillMode:Image.PreserveAspectCrop
                }
@ -92,21 +97,20 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
        code:'FluFlipView{
    vertical:true
    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
+        source: "qrc:/res/image/banner_1.jpg"
        asynchronous: true
        fillMode:Image.PreserveAspectCrop
    }
    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
+        source: "qrc:/res/image/banner_1.jpg"
        asynchronous: true
        fillMode:Image.PreserveAspectCrop
    }
    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
+        source: "qrc:/res/image/banner_1.jpg"
        asynchronous: true
        fillMode:Image.PreserveAspectCrop
    }
--- a/example/qml/page/T_Home.qml
+++ b/example/qml/page/T_Home.qml
@ -1,57 +1,36 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
-import "../window"
-import "../global"
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "qrc:///global/"
+import FluentUI

 FluScrollablePage{

-    launchMode: FluPageType.SingleTask
-    animationEnabled: false
-    header: Item{}
+
+    leftPadding:10
+    rightPadding:0
+    bottomPadding:20

    ListModel{
-        id: model_header
+        id:model_header
        ListElement{
-            icon: "qrc:/example/res/image/logo_pro.png"
-            title: qsTr("FluentUI Pro")
-            desc: qsTr("The latest FluentUI Pro controls and styles for your applications.")
-            url: "https://github.com/zhuzichu520/FluentUI-Pro-Installer"
-            clicked: function(model){
-                Qt.openUrlExternally(model.url)
-            }
-        }
-        ListElement{
-            icon: "qrc:/example/res/image/ic_home_github.png"
-            title: qsTr("FluentUI GitHub")
-            desc: qsTr("The latest FluentUI controls and styles for your applications.")
-            url: "https://github.com/zhuzichu520/FluentUI"
-            clicked: function(model){
-                Qt.openUrlExternally(model.url)
-            }
-        }
-        ListElement{
-            icon: "qrc:/example/res/image/favicon.ico"
-            title: qsTr("FluentUI Initializr")
-            desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
-            url: "https://github.com/zhuzichu520/FluentUI"
-            clicked: function(model){
-                fluent_Initializr.showDialog()
-            }
+            icon:"qrc:/res/image/ic_home_github.png"
+            title:"FluentUI GitHub"
+            desc:"The latest FluentUI controls and styles for your applications."
+            url:"https://github.com/zhuzichu520/FluentUI"
        }
+
    }
+
    Item{
        Layout.fillWidth: true
-        Layout.preferredHeight: 320
+        height: 320
        Image {
-            id: bg
            fillMode:Image.PreserveAspectCrop
            anchors.fill: parent
            verticalAlignment: Qt.AlignTop
-            sourceSize: Qt.size(960,640)
-            source: "qrc:/example/res/image/bg_home_header.png"
+            source: "qrc:/res/image/bg_home_header.png"
        }
        Rectangle{
            anchors.fill: parent
@ -62,7 +41,7 @@ FluScrollablePage{
        }
        FluText{
            text:"FluentUI Gallery"
-            font: FluTextStyle.TitleLarge
+            fontStyle: FluText.TitleLarge
            anchors{
                top: parent.top
                left: parent.left
@ -70,42 +49,48 @@ FluScrollablePage{
                leftMargin: 20
            }
        }
-        Component{
-            id:com_grallery
-            Item{
-                id: control
+
+        ListView{
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            orientation: ListView.Horizontal
+            height: 240
+            model: model_header
+            header: Item{height: 10;width: 10}
+            footer: Item{height: 10;width: 10}
+            ScrollBar.horizontal: FluScrollBar{
+                id: scrollbar_header
+            }
+            clip: false
+            delegate:Item{
                width: 220
                height: 240
-                FluShadow{
-                    radius:5
-                    anchors.fill: item_content
-                }
-                FluClip{
-                    id:item_content
-                    radius: [5,5,5,5]
+                FluArea{
+                    radius: 8
                    width: 200
                    height: 220
                    anchors.centerIn: parent
-                    FluAcrylic{
-                        anchors.fill: parent
-                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                        target: bg
-                        tintOpacity: FluTheme.dark ? 0.8 : 0.9
-                        blurRadius : 40
-                        targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
-                    }
                    Rectangle{
                        anchors.fill: parent
-                        radius: 5
-                        color:FluTheme.itemHoverColor
-                        visible: item_mouse.containsMouse
-                    }
-                    Rectangle{
-                        anchors.fill: parent
-                        radius: 5
-                        color:Qt.rgba(0,0,0,0.0)
-                        visible: !item_mouse.containsMouse
+                        radius: 8
+                        color:{
+                            if(FluTheme.dark){
+                                if(item_mouse.containsMouse){
+                                    return Qt.rgba(1,1,1,0.03)
+                                }
+                                return Qt.rgba(0,0,0,0)
+                            }else{
+                                if(item_mouse.containsMouse){
+                                    return Qt.rgba(0,0,0,0.03)
+                                }
+                                return Qt.rgba(0,0,0,0)
+                            }
+                        }
                    }
+
                    ColumnLayout{
                        Image {
                            Layout.topMargin: 20
@ -116,7 +101,7 @@ FluScrollablePage{
                        }
                        FluText{
                            text: model.title
-                            font: FluTextStyle.Body
+                            fontStyle: FluText.Body
                            Layout.topMargin: 20
                            Layout.leftMargin: 20
                        }
@ -127,7 +112,6 @@ FluScrollablePage{
                            Layout.leftMargin: 20
                            color: FluColors.Grey120
                            font.pixelSize: 12
-                            font.family: FluTextStyle.family
                            wrapMode: Text.WrapAnywhere
                        }
                    }
@ -145,46 +129,25 @@ FluScrollablePage{
                        id:item_mouse
                        anchors.fill: parent
                        hoverEnabled: true
-                        onWheel:
-                            (wheel)=>{
-                                if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
-                                else scrollbar_header.increase()
-                            }
+                        onWheel: (wheel)=>{
+                            if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
+                            else scrollbar_header.increase()
+                        }
                        onClicked: {
-                            model.clicked(model)
+                            Qt.openUrlExternally(model.url)
                        }
                    }
                }
            }
        }
-
-        ListView{
-            id: list
-            anchors{
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            orientation: ListView.Horizontal
-            height: 240
-            model: model_header
-            header: Item{height: 10;width: 10}
-            footer: Item{height: 10;width: 10}
-            ScrollBar.horizontal: FluScrollBar{
-                id: scrollbar_header
-            }
-            clip: false
-            delegate: com_grallery
-        }
    }

    Component{
        id:com_item
        Item{
-            property string desc: modelData.extra.desc
            width: 320
            height: 120
-            FluFrame{
+            FluArea{
                radius: 8
                width: 300
                height: 100
@ -193,40 +156,49 @@ FluScrollablePage{
                    anchors.fill: parent
                    radius: 8
                    color:{
-                        if(item_mouse.containsMouse){
-                            return FluTheme.itemHoverColor
+                        if(FluTheme.dark){
+                            if(item_mouse.containsMouse){
+                                return Qt.rgba(1,1,1,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
+                        }else{
+                            if(item_mouse.containsMouse){
+                                return Qt.rgba(0,0,0,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
                        }
-                        return FluTheme.itemNormalColor
                    }
                }
                Image{
                    id:item_icon
                    height: 40
                    width: 40
-                    source: modelData.extra.image
+                    source: modelData.image
                    anchors{
                        left: parent.left
                        leftMargin: 20
                        verticalCenter: parent.verticalCenter
                    }
                }
+
                FluText{
                    id:item_title
                    text:modelData.title
-                    font: FluTextStyle.BodyStrong
+                    fontStyle: FluText.BodyStrong
                    anchors{
                        left: item_icon.right
                        leftMargin: 20
                        top: item_icon.top
                    }
                }
+
                FluText{
                    id:item_desc
-                    text:desc
+                    text:modelData.desc
                    color:FluColors.Grey120
                    wrapMode: Text.WrapAnywhere
                    elide: Text.ElideRight
-                    font: FluTextStyle.Caption
+                    fontStyle: FluText.Caption
                    maximumLineCount: 2
                    anchors{
                        left: item_title.left
@ -241,7 +213,7 @@ FluScrollablePage{
                    height: 12
                    width: 12
                    radius:  6
-                    color: FluTheme.primaryColor
+                    color: FluTheme.primaryColor.dark
                    anchors{
                        right: parent.right
                        top: parent.top
@ -264,14 +236,14 @@ FluScrollablePage{

    FluText{
        text: "Recently added samples"
-        font: FluTextStyle.Title
+        fontStyle: FluText.Title
        Layout.topMargin: 20
        Layout.leftMargin: 20
    }

    GridView{
        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
+        implicitHeight: contentHeight
        cellHeight: 120
        cellWidth: 320
        model:ItemsOriginal.getRecentlyAddedData()
@ -281,14 +253,14 @@ FluScrollablePage{

    FluText{
        text: "Recently updated samples"
-        font: FluTextStyle.Title
+        fontStyle: FluText.Title
        Layout.topMargin: 20
        Layout.leftMargin: 20
    }

    GridView{
        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
+        implicitHeight: contentHeight
        cellHeight: 120
        cellWidth: 320
        interactive: false
@ -297,4 +269,3 @@ FluScrollablePage{
    }

 }
-
--- a/example/T_InfoBar.qml
+++ b/example/T_InfoBar.qml
@ -0,0 +1,63 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"InfoBar"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 200
+        paddings: 10
+        ColumnLayout{
+            spacing: 14
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluButton{
+                text:"Info"
+                onClicked: {
+                    showInfo("这是一个Info样式的InfoBar")
+                }
+            }
+            FluButton{
+                text:"Warning"
+                onClicked: {
+                    showWarning("这是一个Warning样式的InfoBar")
+                }
+            }
+            FluButton{
+                text:"Error"
+                onClicked: {
+                    showError("这是一个Error样式的InfoBar")
+                }
+            }
+            FluButton{
+                text:"Success"
+                onClicked: {
+                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'  showInfo("这是一个Info样式的InfoBar")
+
+    showWarning("这是一个Warning样式的InfoBar")
+
+    showError("这是一个Error样式的InfoBar")
+
+    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
+    }
+}
--- a/example/T_MediaPlayer.qml
+++ b/example/T_MediaPlayer.qml
@ -0,0 +1,65 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"MediaPlayer"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    onVisibleChanged: {
+        if(visible){
+            player.play()
+        }else{
+            player.pause()
+        }
+    }
+    FluArea{
+        Layout.fillWidth: true
+        height: 320
+        Layout.topMargin: 20
+        paddings: 10
+        ColumnLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            FluMediaPlayer{
+                id:player
+                source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluMediaPlayer{
+    id:player
+    source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+}
+'
+    }
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+        FluButton{
+            text:"跳转到视频播放器窗口"
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked:{
+                FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
+            }
+        }
+    }
+
+
+
+
+}
+
--- a/example/T_Menu.qml
+++ b/example/T_Menu.qml
@ -0,0 +1,91 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"Menu"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            id:layout_column
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+
+            FluButton{
+                text:"左击菜单"
+                Layout.topMargin: 20
+                onClicked:{
+                    menu.popup()
+                }
+            }
+
+            FluButton{
+                text:"右击菜单"
+                Layout.topMargin: 20
+                onClicked: {
+                    showSuccess("请按鼠标右击")
+                }
+                MouseArea{
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton
+                    onClicked: {
+                        menu.popup()
+                    }
+                }
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluMenu{
+    id:menu
+    FluMenuItem:{
+        text:"删除"
+        onClicked: {
+            showError("删除")
+        }
+    }
+    FluMenuItem:{
+        text:"修改"
+        onClicked: {
+            showInfo"修改")
+        }
+    }
+}
+menu.popup()
+'
+    }
+
+    FluMenu{
+        id:menu
+        FluMenuItem{
+            text:"删除"
+            onClicked: {
+                showError("删除")
+            }
+        }
+        FluMenuItem{
+            text:"修改"
+            onClicked: {
+                showInfo("修改")
+            }
+        }
+    }
+
+}
--- a/example/T_MultiWindow.qml
+++ b/example/T_MultiWindow.qml
@ -0,0 +1,107 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    property string password: ""
+    property var loginPageRegister: registerForPageResult("/login")
+
+    title:"MultiWindow"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    Connections{
+        target: loginPageRegister
+        function onResult(data)
+        {
+            password = data.password
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text:"页面跳转，不携带任何参数"
+            }
+            FluButton{
+                text:"点击跳转"
+                onClicked: {
+                    FluApp.navigate("/about")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluButton{
+    text:"点击跳转"
+    onClicked: {
+        FluApp.navigate("/about")
+    }
+}
+'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 130
+        paddings: 10
+        Layout.topMargin: 20
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text:"页面跳转，并携带参数用户名：zhuzichu"
+            }
+            FluButton{
+                text:"点击跳转到登录"
+                onClicked: {
+                    loginPageRegister.launch({username:"zhuzichu"})
+                }
+            }
+            FluText{
+                text:"登录窗口返回过来的密码->"+password
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'property var loginPageRegister: registerForPageResult("/login")
+
+Connections{
+    target: loginPageRegister
+    function onResult(data)
+    {
+        password = data.password
+    }
+}
+
+FluButton{
+    text:"点击跳转"
+    onClicked: {
+        loginPageRegister.launch({username:"zhuzichu"})
+    }
+}
+'
+    }
+
+}
--- a/example/T_Pivot.qml
+++ b/example/T_Pivot.qml
@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"Pivot"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 400
+        paddings: 10
+
+        FluPivot{
+            anchors.fill: parent
+            FluPivotItem{
+                title:"All"
+                contentItem:FluText{
+                    text:"All emails go here."
+                }
+            }
+            FluPivotItem{
+                title:"Unread"
+                contentItem:FluText{
+                    text:"Unread emails go here."
+                }
+            }
+            FluPivotItem{
+                title:"Flagged"
+                contentItem:FluText{
+                    text:"Flagged emails go here."
+                }
+            }
+            FluPivotItem{
+                title:"Urgent"
+                contentItem:FluText{
+                    text:"Urgent emails go here."
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluPivot{
+    anchors.fill: parent
+    FluPivotItem:{
+        text:"All"
+        contentItem: FluText{
+            text:"All emails go here."
+        }
+    }
+    FluPivotItem:{
+        text:"Unread"
+        contentItem: FluText{
+            text:"Unread emails go here."
+        }
+    }
+    FluPivotItem:{
+        text:"Flagged"
+        contentItem: FluText{
+            text:"Flagged emails go here."
+        }
+    }
+    FluPivotItem:{
+        text:"Urgent"
+        contentItem: FluText{
+            text:"Urgent emails go here."
+        }
+    }
+}
+'
+    }
+
+}
--- a/example/T_Progress.qml
+++ b/example/T_Progress.qml
@ -0,0 +1,69 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"Progress"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 260
+        paddings: 10
+        ColumnLayout{
+            spacing: 20
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluProgressBar{
+            }
+            FluProgressRing{
+            }
+            FluProgressBar{
+                id:progress_bar
+                indeterminate: false
+            }
+            FluProgressRing{
+                id:progress_ring
+                indeterminate: false
+            }
+            FluSlider{
+                value:50
+                onValueChanged:{
+                    progress_bar.progress = value/100
+                    progress_ring.progress = value/100
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluProgressBar{
+
+}
+
+FluProgressRing{
+
+}
+
+FluProgressBar{
+    indeterminate: false
+}
+
+FluProgressRing{
+    indeterminate: false
+}'
+    }
+
+
+
+}
--- a/example/T_Rectangle.qml
+++ b/example/T_Rectangle.qml
@ -0,0 +1,151 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"Rectangle"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 480
+        paddings: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            RowLayout{
+                Layout.topMargin: 20
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#0078d4"
+                    radius:[0,0,0,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#744da9"
+                    radius:[15,15,15,15]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#ffeb3b"
+                    radius:[15,0,0,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#f7630c"
+                    radius:[0,15,0,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#e71123"
+                    radius:[0,0,15,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#b4009e"
+                    radius:[0,0,0,15]
+                }
+            }
+            FluText{
+                text:"配合图片使用"
+                fontStyle: FluText.SubTitle
+                Layout.topMargin: 20
+            }
+            RowLayout{
+                spacing: 14
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    radius:[25,0,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        source: "qrc:/res/svg/avatar_1.svg"
+                        sourceSize: Qt.size(width,height)
+                    }
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    radius:[10,10,10,10]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/res/svg/avatar_2.svg"
+                    }
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    radius:[25,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/res/svg/avatar_3.svg"
+                    }
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    radius:[0,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/res/svg/avatar_4.svg"
+                    }
+                }
+            }
+            FluRectangle{
+                width: 1080/5
+                height: 1439/5
+                radius:[25,25,25,25]
+                Image {
+                    asynchronous: true
+                    source: "qrc:/res/image/image_huoyin.webp"
+                    anchors.fill: parent
+                    sourceSize: Qt.size(width,height)
+                }
+                Layout.topMargin: 10
+            }
+
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluRectangle{
+    radius: [25,25,25,25]
+    width: 50
+    height: 50
+    Image{
+        asynchronous: true
+        anchors.fill: parent
+        source: "qrc:/res/svg/avatar_4.svg"
+        sourceSize: Qt.size(width,height)
+    }
+}'
+    }
+
+
+}
--- a/example/T_Slider.qml
+++ b/example/T_Slider.qml
@ -0,0 +1,56 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "./component"
+import FluentUI
+
+FluScrollablePage{
+
+    title:"Slider"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        FluSlider{
+            value: 50
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluSlider{
+    value:50
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 200
+        paddings: 10
+        Layout.topMargin: 20
+        FluSlider{
+            value: 50
+            vertical:true
+            anchors.left: parent.left
+            anchors.leftMargin: 20
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluSlider{
+    vertical:true
+    value:50
+}'
+    }
+
+
+}
--- a/example/T_TabView.qml
+++ b/example/T_TabView.qml
@ -0,0 +1,137 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"TabView"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
+    Component{
+        id:com_page
+        Rectangle{
+            anchors.fill: parent
+            color: argument
+        }
+    }
+
+    function newTab(){
+        tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
+    }
+
+    Component.onCompleted: {
+        newTab()
+        newTab()
+        newTab()
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        RowLayout{
+            spacing: 14
+            FluDropDownButton{
+                id:btn_tab_width_behavior
+                Layout.preferredWidth: 140
+                text:"Equal"
+                items:[
+                    FluMenuItem{
+                        text:"Equal"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Equal
+                        }
+                    },
+                    FluMenuItem{
+                        text:"SizeToContent"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Compact"
+                        onClicked: {
+                            btn_tab_width_behavior.text = text
+                            tab_view.tabWidthBehavior = FluTabView.Compact
+                        }
+                    }
+                ]
+            }
+            FluDropDownButton{
+                id:btn_close_button_visibility
+                text:"Always"
+                Layout.preferredWidth: 120
+                items:[
+                    FluMenuItem{
+                        text:"Nerver"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Nerver
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Always"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.Always
+                        }
+                    },
+                    FluMenuItem{
+                        text:"OnHover"
+                        onClicked: {
+                            btn_close_button_visibility.text = text
+                            tab_view.closeButtonVisibility = FluTabView.OnHover
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 15
+        height: 400
+        paddings: 10
+        FluTabView{
+            id:tab_view
+            onNewPressed:{
+                newTab()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTabView{
+    anchors.fill: parent
+    Component.onCompleted: {
+        newTab()
+        newTab()
+        newTab()
+    }
+    Component{
+        id:com_page
+        Rectangle{
+            anchors.fill: parent
+            color: argument
+        }
+    }
+    function newTab(){
+        tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument)
+    }
+}
+'
+    }
+
+}
--- a/example/T_TableView.qml
+++ b/example/T_TableView.qml
@ -0,0 +1,110 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"TableView"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    Component.onCompleted: {
+        const columns = [
+                          {
+                              title: '姓名',
+                              dataIndex: 'name',
+                              width:100
+                          },
+                          {
+                              title: '年龄',
+                              dataIndex: 'age',
+                              width:100
+                          },
+                          {
+                              title: '住址',
+                              dataIndex: 'address',
+                              width:200
+                          },
+                          {
+                              title: '别名',
+                              dataIndex: 'nickname',
+                              width:100
+                          },
+                          {
+                              title: '操作',
+                              dataIndex: 'action',
+                              width:100
+                          },
+                      ];
+        table_view.columns = columns
+        loadData(1,10)
+    }
+
+
+    FluTableView{
+        id:table_view
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        width:parent.width
+        pageCurrent:1
+        pageCount:10
+        itemCount: 1000
+        onRequestPage:
+            (page,count)=> {
+                loadData(page,count)
+            }
+    }
+
+    Component{
+        id:com_action
+        Item{
+            Row{
+                anchors.centerIn: parent
+                spacing: 10
+                FluFilledButton{
+                    text:"编辑"
+                    topPadding:3
+                    bottomPadding:3
+                    leftPadding:3
+                    rightPadding:3
+                    onClicked:{
+                        console.debug(dataModel.index)
+                        showSuccess(JSON.stringify(dataObject))
+                    }
+                }
+                FluFilledButton{
+                    text:"删除"
+                    topPadding:3
+                    bottomPadding:3
+                    leftPadding:3
+                    rightPadding:3
+                    onClicked:{
+                        showError(JSON.stringify(dataObject))
+                    }
+                }
+            }
+        }
+    }
+
+    function loadData(page,count){
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                name: "孙悟空%1".arg(((page-1)*count+i)),
+                                age: 500,
+                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
+                                nickname: "齐天大圣",
+                                action:com_action
+                            })
+        }
+
+        table_view.dataSource = dataSource
+    }
+
+
+}
--- a/example/T_TextBox.qml
+++ b/example/T_TextBox.qml
@ -0,0 +1,151 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"TextBox"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluTextBox{
+            Layout.topMargin: 20
+            placeholderText: "单行输入框"
+            Layout.preferredWidth: 300
+            disabled:text_box_switch.selected
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:text_box_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTextBox{
+    placeholderText:"单行输入框"
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluMultilineTextBox{
+            Layout.topMargin: 20
+            placeholderText: "多行输入框"
+            Layout.preferredWidth: 300
+            disabled:text_box_multi_switch.selected
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:text_box_multi_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluMultilineTextBox{
+    placeholderText:"多行输入框"
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluAutoSuggestBox{
+            Layout.topMargin: 20
+            placeholderText: "AutoSuggestBox"
+            Layout.preferredWidth: 300
+            items:generateRandomNames(100)
+            disabled:text_box_suggest_switch.selected
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        Row{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            FluToggleSwitch{
+                id:text_box_suggest_switch
+                Layout.alignment: Qt.AlignRight
+                text:"Disabled"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluAutoSuggestBox{
+    placeholderText:"AutoSuggestBox"
+}'
+    }
+
+
+    function generateRandomNames(numNames) {
+        const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        const names = [];
+        function generateRandomName() {
+            const nameLength = Math.floor(Math.random() * 5) + 4;
+            let name = '';
+            for (let i = 0; i < nameLength; i++) {
+                const letterIndex = Math.floor(Math.random() * 26);
+                name += alphabet.charAt(letterIndex);
+            }
+            return name;
+        }
+        for (let i = 0; i < numNames; i++) {
+            const name = generateRandomName();
+            names.push({title:name});
+        }
+        return names;
+    }
+
+
+}
--- a/example/T_Theme.qml
+++ b/example/T_Theme.qml
@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"Theme"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 210
+        paddings: 10
+        ColumnLayout{
+            spacing:0
+            anchors{
+                left: parent.left
+            }
+            RowLayout{
+                Layout.topMargin: 10
+                Repeater{
+                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+                    delegate:  FluRectangle{
+                        width: 42
+                        height: 42
+                        radius: [4,4,4,4]
+                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
+                        FluIcon {
+                            anchors.centerIn: parent
+                            iconSource: FluentIcons.AcceptMedium
+                            iconSize: 15
+                            visible: modelData === FluTheme.primaryColor
+                            color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                        }
+                        MouseArea{
+                            id:mouse_item
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            onClicked: {
+                                FluTheme.primaryColor = modelData
+                            }
+                        }
+                    }
+                }
+            }
+            FluText{
+                text:"夜间模式"
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                selected: FluTheme.dark
+                clickFunc:function(){
+                    FluTheme.dark = !FluTheme.dark
+                }
+            }
+            FluText{
+                text:"native文本渲染"
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                selected: FluTheme.nativeText
+                clickFunc:function(){
+                    FluTheme.nativeText = !FluTheme.nativeText
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTheme.primaryColor = FluColors.Orange
+
+FluTheme.dark = true
+
+FluTheme.nativeText = true
+'
+    }
+
+
+}
--- a/example/T_TimePicker.qml
+++ b/example/T_TimePicker.qml
@ -0,0 +1,75 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"TimePicker"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.H"
+            }
+
+            FluTimePicker{
+            }
+
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTimePicker{
+
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.H"
+            }
+
+            FluTimePicker{
+                 hourFormat:FluTimePicker.HH
+            }
+
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTimePicker{
+    hourFormat:FluTimePicker.HH
+}'
+    }
+
+}
--- a/example/T_ToggleSwitch.qml
+++ b/example/T_ToggleSwitch.qml
@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage{
+
+    title:"ToggleSwitch"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        Row{
+            spacing: 30
+            anchors.verticalCenter: parent.verticalCenter
+            FluToggleSwitch{
+            }
+            FluToggleSwitch{
+                text:"Text"
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluToggleSwitch{
+    text:"Text"
+}'
+    }
+
+
+}
--- a/example/qml/page/T_Tooltip.qml
+++ b/example/qml/page/T_Tooltip.qml
@ -1,23 +1,28 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
-import "../component"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "./component"

 FluScrollablePage{

-    title: qsTr("Tooltip")
+    title:"Tooltip"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0

    FluText{
-        text: qsTr("Hover over Tultip and it pops up")
+        Layout.topMargin: 20
+        text:"鼠标悬停不动，弹出Tooltip"
    }

-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        Layout.preferredHeight: 68
-        padding: 10
+        height: 68
+        paddings: 10

        Column{
            spacing: 5
@ -26,37 +31,36 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("Text properties of FluIconButton support the Tooltip pop-up window by default")
+                text:"FluIconButton的text属性自带Tooltip效果"
            }
            FluIconButton{
                iconSource:FluentIcons.ChromeCloseContrast
                iconSize: 15
-                text: qsTr("Delete")
+                text:"删除"
                onClicked:{
-                    showSuccess(qsTr("Click IconButton"))
+                    showSuccess("点击IconButton")
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
        code:'FluIconButton{
    iconSource:FluentIcons.ChromeCloseContrast
    iconSize: 15
-    text: qsTr("Delete")
+    text:"删除"
    onClicked:{
-        showSuccess(qsTr("Click IconButton"))
+        showSuccess("点击IconButton")
    }
 }
 '
    }

-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        Layout.preferredHeight: 68
-        padding: 10
+        height: 68
+        paddings: 10

        Column{
            spacing: 5
@ -65,13 +69,13 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("Add a Tooltip pop-up to a Button")
+                text:"给一个Button添加Tooltip效果"
            }
            FluButton{
                id:button_1
-                text: qsTr("Delete")
+                text:"删除"
                onClicked:{
-                    showSuccess(qsTr("Click Button"))
+                    showSuccess("点击一个Button")
                }
                FluTooltip{
                    visible: button_1.hovered
@ -83,19 +87,19 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
        code:'FluButton{
-    id: button_1
-    text: qsTr("Delete")
+    id:button_1
+    text:"删除"
    FluTooltip{
        visible: button_1.hovered
        text:button_1.text
        delay: 1000
    }
    onClicked:{
-        showSuccess(qsTr("Click Button"))
+        showSuccess("点击一个Button")
    }
-}'
+}
+'
    }


--- a/example/T_TreeView.qml
+++ b/example/T_TreeView.qml
@ -0,0 +1,161 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "./component"
+
+FluScrollablePage {
+
+    title:"TreeView"
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+    spacing: 0
+
+    function randomName() {
+        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
+        return names[Math.floor(Math.random() * names.length)]
+    }
+
+    function randomCompany() {
+        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
+        return companies[Math.floor(Math.random() * companies.length)]
+    }
+
+    function randomDepartment() {
+        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
+        return departments[Math.floor(Math.random() * departments.length)]
+    }
+
+    function createEmployee() {
+        var name = randomName()
+        return tree_view.createItem(name, false)
+    }
+
+    function createSubtree(numEmployees) {
+        var employees = []
+        for (var i = 0; i < numEmployees; i++) {
+            employees.push(createEmployee())
+        }
+        return tree_view.createItem(randomDepartment(), true, employees)
+    }
+
+    function createOrg(numLevels, numSubtrees, numEmployees) {
+        if (numLevels === 0) {
+            return []
+        }
+        var subtrees = []
+        for (var i = 0; i < numSubtrees; i++) {
+            subtrees.push(createSubtree(numEmployees))
+        }
+        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
+    }
+
+    FluArea{
+        id:layout_actions
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        RowLayout{
+            spacing: 14
+            FluDropDownButton{
+                id:btn_selection_model
+                Layout.preferredWidth: 140
+                text:"None"
+                items:[
+                    FluMenuItem{
+                        text:"None"
+                        onClicked: {
+                            btn_selection_model.text = text
+                            tree_view.selectionMode = FluTabView.Equal
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Single"
+                        onClicked: {
+                            btn_selection_model.text = text
+                            tree_view.selectionMode = FluTabView.SizeToContent
+                        }
+                    },
+                    FluMenuItem{
+                        text:"Muiltple"
+                        onClicked: {
+                            btn_selection_model.text = text
+                            tree_view.selectionMode = FluTabView.Compact
+                        }
+                    }
+                ]
+            }
+            FluFilledButton{
+                text:"获取选中的数据"
+                onClicked: {
+                    if(tree_view.selectionMode === FluTreeView.None){
+                        showError("当前非选择模式,没有选中的数据")
+                    }
+                    if(tree_view.selectionMode === FluTreeView.Single){
+                        if(!tree_view.signleData()){
+                            showError("没有选中数据")
+                            return
+                        }
+                        showSuccess(tree_view.signleData().text)
+                    }
+                    if(tree_view.selectionMode === FluTreeView.Multiple){
+                        if(tree_view.multipData().length===0){
+                            showError("没有选中数据")
+                            return
+                        }
+                        var info = []
+                        tree_view.multipData().map((value)=>info.push(value.text))
+                        showSuccess(info.join(","))
+                    }
+                }
+            }
+        }
+    }
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 10
+        paddings: 10
+        height: 400
+        FluTreeView{
+            id:tree_view
+            width:240
+            anchors{
+                top:parent.top
+                left:parent.left
+                bottom:parent.bottom
+            }
+            onItemClicked:
+                (model)=>{
+                    showSuccess(model.text)
+                }
+
+            Component.onCompleted: {
+                var org = createOrg(3, 3, 3)
+                createItem()
+                updateData(org)
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        code:'FluTreeView{
+    id:tree_view
+    width:240
+    height:600
+    Component.onCompleted: {
+        var datas = []
+        datas.push(createItem("Node1",false))
+        datas.push(createItem("Node2",false))
+        datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
+        updateData(datas)
+    }
+}
+'
+    }
+
+
+}
--- a/example/T_Typography.qml
+++ b/example/T_Typography.qml
@ -0,0 +1,94 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+
+FluContentPage {
+
+    title: "Typography"
+    property int textSize: FluTheme.textSize
+    leftPadding:10
+    rightPadding:10
+    bottomPadding:20
+
+    Component.onCompleted: {
+        slider.seek(0)
+    }
+
+    FluArea{
+        anchors{
+            top:parent.top
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+            topMargin: 20
+        }
+        paddings: 10
+        ColumnLayout{
+            spacing: 0
+            FluText{
+                text:"Display"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.Display
+            }
+            FluText{
+                text:"Title Large"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.TitleLarge
+            }
+            FluText{
+                text:"Title"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.Title
+            }
+            FluText{
+                text:"Subtitle"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.SubTitle
+            }
+            FluText{
+                text:"Body Strong"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.BodyStrong
+            }
+            FluText{
+                text:"Body"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.Body
+            }
+            FluText{
+                text:"Caption"
+                padding: 0
+                pixelSize: textSize
+                fontStyle: FluText.Caption
+            }
+        }
+
+        FluSlider{
+            id:slider
+            vertical:true
+            anchors{
+                right: parent.right
+                rightMargin: 45
+                top: parent.top
+                topMargin: 30
+            }
+            onValueChanged:{
+                textSize = value/100*6+FluTheme.textSize
+            }
+        }
+
+    }
+
+
+
+
+
+
+}
--- a/example/component/CodeExpander.qml
+++ b/example/component/CodeExpander.qml
@ -0,0 +1,125 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+
+FluExpander{
+
+    property string code: ""
+
+    headerText: "Source"
+    contentHeight:content.height
+
+    FluMultilineTextBox{
+        id:content
+        width:parent.width
+        readOnly:true
+        text:highlightQmlCode(code)
+        focus:false
+        textFormat: FluMultilineTextBox.RichText
+        KeyNavigation.priority: KeyNavigation.BeforeItem
+        background:Rectangle{
+            radius: 4
+            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+            border.width: 1
+        }
+    }
+
+    FluIconButton{
+        iconSource:FluentIcons.Copy
+        anchors{
+            right: parent.right
+            top: parent.top
+            rightMargin: 5
+            topMargin: 5
+        }
+        onClicked:{
+            FluApp.clipText(content.text)
+            showSuccess("复制成功")
+        }
+    }
+
+    function htmlEncode(e){
+      var i,s;
+      for(i in s={
+        "&":/&/g,//""//":/"/g,"'":/'/g,
+        "<":/</g,">":/>/g,"<br/>":/\n/g,
+        " ":/ /g,"  ":/\t/g
+      })e=e.replace(s[i],i);
+      return e;
+    }
+
+    function highlightQmlCode(code) {
+      // 定义 QML 关键字列表
+      var qmlKeywords = [
+        "FluTextButton",
+        "FluAppBar",
+          "FluAutoSuggestBox",
+          "FluBadge",
+          "FluButton",
+          "FluCalendarPicker",
+          "FluCalendarView",
+          "FluCarousel",
+          "FluCheckBox",
+          "FluColorPicker",
+          "FluColorView",
+          "FluComboBox",
+          "FluContentDialog",
+          "FluContentPage",
+          "FluControl",
+          "FluDatePicker",
+          "FluDivider",
+          "FluDropDownButton",
+          "FluExpander",
+          "FluFilledButton",
+          "FluFlipView",
+          "FluFocusRectangle",
+          "FluIcon",
+          "FluIconButton",
+          "FluInfoBar",
+          "FluItem",
+          "FluMediaPlayer",
+          "FluMenu",
+          "FluMenuItem",
+          "FluMultilineTextBox",
+          "FluNavigationView",
+          "FluObject",
+          "FluPaneItem",
+          "FluPaneItemExpander",
+          "FluPaneItemHeader",
+          "FluPaneItemSeparator",
+          "FluPivot",
+          "FluPivotItem",
+          "FluProgressBar",
+          "FluProgressRing",
+          "FluRadioButton",
+          "FluRectangle",
+          "FluScrollablePage",
+          "FluScrollBar",
+          "FluShadow",
+          "FluSlider",
+          "FluTabView",
+          "FluText",
+          "FluTextArea",
+          "FluTextBox",
+          "FluTextBoxBackground",
+          "FluTextBoxMenu",
+          "FluTextButton",
+          "FluTextFiled",
+          "FluTimePicker",
+          "FluToggleSwitch",
+          "FluTooltip",
+          "FluTreeView",
+          "FluWindow",
+          "FluWindowResize"
+      ];
+      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/example/example.pro
+++ b/example/example.pro
@ -0,0 +1,43 @@
+QT += quick quickcontrols2 concurrent network multimedia
+CONFIG += c++17
+DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
+
+HEADERS += \
+    ChatController.h
+
+SOURCES += \
+        ChatController.cpp \
+        main.cpp
+
+RESOURCES += qml.qrc
+
+RC_ICONS = favicon.ico
+
+QML_IMPORT_PATH =
+QML_DESIGNER_IMPORT_PATH =
+
+CONFIG(debug,debug|release) {
+    DESTDIR = $$absolute_path($${_PRO_FILE_PWD_}/../bin/debug)
+} else {
+    DESTDIR = $$absolute_path($${_PRO_FILE_PWD_}/../bin/release)
+}
+
+win32 {
+
+contains(QMAKE_CC, cl) {
+    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/msvc/*.dll) $$DESTDIR
+    QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
+} else {
+    COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/mingw/*.dll) $$DESTDIR
+    QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
+}
+
+}
+
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target
+
+mac: {
+    QMAKE_INFO_PLIST = Info.plist
+}
--- 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/global/ItemsFooter.qml
+++ b/example/global/ItemsFooter.qml
@ -0,0 +1,21 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+FluObject{
+    id:footer_items
+    FluPaneItemSeparator{}
+    FluPaneItem{
+        title:"意见反馈"
+        onTap:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/issues/new")
+        }
+    }
+    FluPaneItem{
+        title:"关于"
+        onTap:{
+            FluApp.navigate("/about")
+        }
+    }
+}
--- a/example/global/ItemsOriginal.qml
+++ b/example/global/ItemsOriginal.qml
@ -0,0 +1,315 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+FluObject{
+
+    property var navigationView
+
+    FluPaneItem{
+        title:"Home"
+        icon:FluentIcons.Home
+        onTap:{
+            navigationView.push("qrc:/T_Home.qml")
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Basic input"
+        icon:FluentIcons.CheckboxComposite
+        FluPaneItem{
+            title:"Buttons"
+            image:"qrc:/res/image/control/Button.png"
+            recentlyUpdated:true
+            desc:"A control that responds to user input and raisesa Click event."
+            onTap:{
+                navigationView.push("qrc:/T_Buttons.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Slider"
+            image:"qrc:/res/image/control/Slider.png"
+            recentlyUpdated:true
+            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
+            onTap:{
+                navigationView.push("qrc:/T_Slider.qml")
+            }
+        }
+        FluPaneItem{
+            title:"CheckBox"
+            image:"qrc:/res/image/control/Checkbox.png"
+            recentlyUpdated:true
+            desc:"A control that a user can select or clear."
+            onTap:{
+                navigationView.push("qrc:/T_CheckBox.qml")
+            }
+        }
+        FluPaneItem{
+            title:"ToggleSwitch"
+            onTap:{
+                navigationView.push("qrc:/T_ToggleSwitch.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Form"
+        icon:FluentIcons.GridView
+        FluPaneItem{
+            title:"TextBox"
+            onTap:{
+                navigationView.push("qrc:/T_TextBox.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                navigationView.push("qrc:/T_TimePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"DatePicker"
+            onTap:{
+                navigationView.push("qrc:/T_DatePicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"CalendarPicker"
+            onTap:{
+                navigationView.push("qrc:/T_CalendarPicker.qml")
+            }
+        }
+        FluPaneItem{
+            title:"ColorPicker"
+            onTap:{
+                navigationView.push("qrc:/T_ColorPicker.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Surface"
+        icon:FluentIcons.SurfaceHub
+        FluPaneItem{
+            title:"InfoBar"
+            image:"qrc:/res/image/control/InfoBar.png"
+            recentlyUpdated:true
+            desc:"An inline message to display app-wide statuschange information."
+            onTap:{
+                navigationView.push("qrc:/T_InfoBar.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Progress"
+            onTap:{
+                navigationView.push("qrc:/T_Progress.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Badge"
+            onTap:{
+                navigationView.push("qrc:/T_Badge.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Rectangle"
+            onTap:{
+                navigationView.push("qrc:/T_Rectangle.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Carousel"
+            onTap:{
+                navigationView.push("qrc:/T_Carousel.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Expander"
+            onTap:{
+                navigationView.push("qrc:/T_Expander.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Popus"
+        icon:FluentIcons.ButtonMenu
+        FluPaneItem{
+            title:"Dialog"
+            onTap:{
+                navigationView.push("qrc:/T_Dialog.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Tooltip"
+            onTap:{
+                navigationView.push("qrc:/T_Tooltip.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Menu"
+            onTap:{
+                navigationView.push("qrc:/T_Menu.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Navigation"
+        icon:FluentIcons.AllApps
+        FluPaneItem{
+            title:"Pivot"
+            image:"qrc:/res/image/control/Pivot.png"
+            recentlyAdded:true
+            order:3
+            desc:"Presents information from different sources in atabbed view."
+            onTap:{
+                navigationView.push("qrc:/T_Pivot.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TabView"
+            image:"qrc:/res/image/control/TabView.png"
+            recentlyAdded:true
+            order:1
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
+            onTap:{
+                navigationView.push("qrc:/T_TabView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TreeView"
+            onTap:{
+                navigationView.push("qrc:/T_TreeView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"TableView"
+            image:"qrc:/res/image/control/DataGrid.png"
+            recentlyAdded:true
+            order:4
+            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
+            onTap:{
+                navigationView.push("qrc:/T_TableView.qml")
+            }
+        }
+        FluPaneItem{
+            title:"MultiWindow"
+            onTap:{
+                navigationView.push("qrc:/T_MultiWindow.qml")
+            }
+        }
+        FluPaneItem{
+            title:"FlipView"
+            image:"qrc:/res/image/control/FlipView.png"
+            recentlyAdded:true
+            order:2
+            desc:"Presents a collection of items that the user canflip through, one item at a time."
+            onTap:{
+                navigationView.push("qrc:/T_FlipView.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Theming"
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title:"Theme"
+            onTap:{
+                navigationView.push("qrc:/T_Theme.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Typography"
+            onTap:{
+                navigationView.push("qrc:/T_Typography.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Awesome"
+            onTap:{
+                navigationView.push("qrc:/T_Awesome.qml")
+            }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:"Media"
+        icon:FluentIcons.Media
+        FluPaneItem{
+            title:"MediaPlayer"
+            image:"qrc:/res/image/control/MediaPlayerElement.png"
+            recentlyAdded:true
+            order:0
+            desc:"A control to display video and image content."
+            onTap:{
+                navigationView.push("qrc:/T_MediaPlayer.qml")
+            }
+        }
+    }
+
+    function getRecentlyAddedData(){
+        var arr = []
+        for(var i=0;i<children.length;i++){
+            var item = children[i]
+            if(item instanceof FluPaneItem && item.recentlyAdded){
+                arr.push(item)
+            }
+            if(item instanceof FluPaneItemExpander){
+                for(var j=0;j<item.children.length;j++){
+                    var itemChild = item.children[j]
+                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
+                        arr.push(itemChild)
+                    }
+                }
+            }
+        }
+        arr.sort(function(o1,o2){ return o2.order-o1.order })
+        return arr
+    }
+
+    function getRecentlyUpdatedData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.recentlyUpdated){
+                arr.push(item)
+            }
+        }
+        return arr
+    }
+
+    function getSearchData(){
+        var arr = []
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem){
+                arr.push({title:item.title,key:item.key})
+            }
+        }
+        return arr
+    }
+
+    function startPageByItem(data){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item =  items[i]
+            if(item.key === data.key){
+                if(navigationView.getCurrentIndex() === i){
+                    return
+                }
+                item.tap()
+                navigationView.setCurrentIndex(i)
+                if(item.parent){
+                    item.parent.isExpand = true
+                }
+                return
+            }
+        }
+    }
+
+}
--- a/example/global/qmldir
+++ b/example/global/qmldir
@ -0,0 +1,2 @@
+singleton ItemsOriginal 1.0 ItemsOriginal.qml
+singleton ItemsFooter 1.0 ItemsFooter.qml
--- a/example/main.cpp
+++ b/example/main.cpp
@ -0,0 +1,43 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QQmlContext>
+#include <QDir>
+#include <QQuickWindow>
+#include <QQuickStyle>
+#include <QProcess>
+#include "ChatController.h"
+
+QMap<QString, QVariant> properties(){
+    QMap<QString, QVariant> map;
+    //    map["installHelper"] = QVariant::fromValue(QVariant::fromValue(InstallHelper::getInstance()));
+    return map;
+}
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setOrganizationName("ZhuZiChu");
+    QCoreApplication::setOrganizationDomain("https://zhuzichu520.github.io");
+    QCoreApplication::setApplicationName("FluentUI");
+    QQuickStyle::setStyle("Basic");
+    QGuiApplication app(argc, argv);
+    QQmlApplicationEngine engine;
+
+    qmlRegisterType<ChatController>("Controller",1,0,"ChatController");
+
+    QMapIterator<QString, QVariant> iterator(properties());
+    while (iterator.hasNext()) {
+        iterator.next();
+        QString key = iterator.key();
+        QVariant value = iterator.value();
+        engine.rootContext()->setContextProperty(key,value);
+    }
+    engine.rootContext()->setContextProperty("properties",properties());
+    const QUrl url(QStringLiteral("qrc:/App.qml"));
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
+                     &app, [url](QObject *obj, const QUrl &objUrl) {
+        if (!obj && url == objUrl)
+            QCoreApplication::exit(-1);
+    }, Qt::QueuedConnection);
+    engine.load(url);
+    return app.exec();
+}
--- a/example/page/AboutPage.qml
+++ b/example/page/AboutPage.qml
@ -0,0 +1,95 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+FluWindow {
+
+    width: 500
+    height: 600
+    minimumWidth: 500
+    minimumHeight: 600
+    maximumWidth: 500
+    maximumHeight: 600
+
+    title:"关于"
+
+    FluAppBar{
+        id:appbar
+        title:"关于"
+        width:parent.width
+    }
+
+    ColumnLayout{
+        anchors{
+            top: appbar.bottom
+            left: parent.left
+            right: parent.right
+        }
+
+        RowLayout{
+            Layout.topMargin: 20
+            Layout.leftMargin: 15
+            spacing: 14
+            FluText{
+                text:"FluentUI"
+                fontStyle: FluText.Title
+            }
+            FluText{
+                text:"v1.2.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,262 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+import Controller
+import QtQuick.Dialogs
+
+FluWindow {
+
+    width: 680
+    height: 600
+    minimumWidth: 500
+    minimumHeight: 600
+
+    title:"ChatGPT"
+
+    onInitArgument:
+        (argument)=>{
+            scrollview.focus = true
+        }
+
+    ChatController{
+        id:controller
+
+        onResponseDataChanged: {
+            appendMessage(false,responseData)
+        }
+
+    }
+
+    ListModel{
+        id:model_message
+        ListElement{
+            isMy:false
+            text:"欢迎使用ChatGPT"
+        }
+        ListElement{
+            isMy:true
+            text:"好的，3Q"
+        }
+    }
+
+    FluAppBar{
+        id:appbar
+        title:"ChatGPT"
+        width:parent.width
+    }
+
+    Component{
+        id:com_text
+        TextEdit {
+            id:item_text
+            text: message
+            wrapMode: Text.WrapAnywhere
+            readOnly: true
+            selectByMouse: true
+            selectByKeyboard: true
+            selectedTextColor: Qt.rgba(51,153,255,1)
+            color:FluColors.Black
+            selectionColor: {
+                if(FluTheme.dark){
+                    return FluTheme.primaryColor.lighter
+                }else{
+                    return FluTheme.primaryColor.dark
+                }
+            }
+            width: Math.min(list_message.width-200,600,implicitWidth)
+            TapHandler{
+                acceptedButtons: Qt.RightButton
+                onTapped: {
+                    menu_item.showMenu(item_text.selectedText)
+                }
+            }
+        }
+    }
+
+    FluArea{
+        id:layout_content
+        anchors{
+            top: appbar.bottom
+            left: parent.left
+            right: parent.right
+            bottom: layout_bottom.top
+            margins: 10
+        }
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1)
+        ListView{
+            id:list_message
+            anchors.fill: parent
+            model:model_message
+            clip: true
+            ScrollBar.vertical: FluScrollBar {}
+            preferredHighlightBegin: 0
+            preferredHighlightEnd: 0
+            highlightMoveDuration: 0
+            header:Item{
+                width: list_message.width
+                height:20
+            }
+            footer:Item{
+                width: list_message.width
+                height:20
+            }
+            delegate: Item{
+                width: ListView.view.width
+                height: childrenRect.height
+
+                FluRectangle{
+                    id:item_avatar
+                    width: 30
+                    height: 30
+                    radius:[15,15,15,15]
+                    anchors{
+                        right: isMy ? parent.right : undefined
+                        rightMargin: isMy ? 20 : undefined
+                        left: isMy ? undefined : parent.left
+                        leftMargin: isMy ? undefined : 20
+                        top:parent.top
+                    }
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(100,100)
+                        source: isMy ? "qrc:/res/svg/avatar_2.svg" : "qrc:/res/image/logo_openai.png"
+                    }
+                }
+
+                Rectangle{
+                    id:item_layout_content
+                    color: isMy ? "#FF95EC69" : "#FFFFFF"
+                    width: item_msg_loader.width+10
+                    height: item_msg_loader.height+10
+                    radius: 3
+                    anchors{
+                        top: item_avatar.top
+                        right: isMy ? item_avatar.left : undefined
+                        rightMargin: isMy ? 10 : undefined
+                        left: isMy ? undefined : item_avatar.right
+                        leftMargin: isMy ? undefined : 10
+
+                    }
+
+                    Loader{
+                        id:item_msg_loader
+                        property var message: model.text
+                        anchors.centerIn: parent
+                        sourceComponent: com_text
+                    }
+                }
+
+
+                Item{
+                    id:item_layout_bottom
+                    width: parent.width
+                    anchors.top: item_layout_content.bottom
+                    height: 20
+                }
+            }
+        }
+    }
+
+    FluArea{
+        id:layout_bottom
+        height: 90
+        anchors{
+            bottom: parent.bottom
+            bottomMargin: 10
+            left: parent.left
+            right: parent.right
+            leftMargin: 10
+            rightMargin: 10
+        }
+
+
+        ScrollView{
+            id:scrollview
+            anchors{
+                bottom: parent.bottom
+                left: parent.left
+                right: button_send.left
+                bottomMargin: 10
+                leftMargin: 10
+                rightMargin: 10
+            }
+            height: Math.min(textbox.implicitHeight,64)
+            FluMultilineTextBox{
+                id:textbox
+                focus:true
+                placeholderText: "请输入消息"
+            }
+        }
+
+        FluFilledButton{
+            id:button_send
+            text:controller.isLoading ? timer_loading.loadingText :"发送"
+            anchors{
+                bottom: parent.bottom
+                right: parent.right
+                bottomMargin: 10
+                rightMargin: 10
+            }
+            width: 60
+            disabled: controller.isLoading
+            onClicked:{
+                var text = textbox.text
+                appendMessage(true,text)
+                controller.sendMessage(text)
+                textbox.clear()
+            }
+
+            Timer{
+                id:timer_loading
+                property int count : 0
+                property string loadingText : ""
+                interval: 500
+                running: controller.isLoading
+                repeat: true
+                onTriggered: {
+                    switch(count%3){
+                    case 0:
+                        loadingText = "."
+                        break
+                    case 1:
+                        loadingText = ".."
+                        break
+                    case 2:
+                        loadingText = "..."
+                        break
+                    default:
+                        loadingText = ""
+                        break
+                    }
+                    count++
+                }
+            }
+
+        }
+    }
+
+    FluMenu{
+        id:menu_item
+        focus: false
+        property string selectedText: ""
+        FluMenuItem{
+            text:"复制"
+            onClicked: {
+                controller.clipText(menu_item.selectedText)
+                showSuccess("复制成功")
+            }
+        }
+        function showMenu(text){
+            menu_item.selectedText = text
+            menu_item.popup()
+        }
+    }
+
+    function appendMessage(isMy,text){
+        model_message.append({isMy:isMy,text:text})
+        list_message.positionViewAtEnd()
+    }
+
+}
--- a/example/qml/window/LoginWindow.qml
+++ b/example/qml/window/LoginWindow.qml
@ -1,23 +1,33 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
-import "../component"
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI

 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_password.focus =  true
        }

+    FluAppBar{
+        id:appbar
+        title:"登录"
+        width:parent.width
+    }
+
    ColumnLayout{
        anchors{
            left: parent.left
@ -26,34 +36,38 @@ FluWindow {
        }

        FluAutoSuggestBox{
-            id: textbox_uesrname
+            id:textbox_uesrname
            items:[{title:"Admin"},{title:"User"}]
-            placeholderText: qsTr("Please enter the account")
+            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,49 @@
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import "qrc:///global/"
+import FluentUI
+
+FluWindow {
+    id:rootwindow
+    width: 1000
+    height: 640
+    title: "FluentUI"
+    minimumWidth: 520
+    minimumHeight: 460
+
+    FluAppBar{
+        id:appbar
+        z:10
+        showDark: true
+        width:parent.width
+    }
+
+    FluNavigationView{
+        id:nav_view
+        anchors.fill: parent
+        items: ItemsOriginal
+        footerItems:ItemsFooter
+        logo: "qrc:/res/image/favicon.ico"
+        z: 11
+        title:"FluentUI"
+        autoSuggestBox:FluAutoSuggestBox{
+            width: 280
+            anchors.centerIn: parent
+            iconSource: FluentIcons.Zoom
+            items: ItemsOriginal.getSearchData()
+            placeholderText: "查找"
+            onItemClicked:
+                (data)=>{
+                    ItemsOriginal.startPageByItem(data)
+                }
+        }
+        Component.onCompleted: {
+            ItemsOriginal.navigationView = nav_view
+            nav_view.setCurrentIndex(0)
+            nav_view.push("qrc:/T_Home.qml")
+        }
+    }
+
+}
--- a/example/page/MediaPage.qml
+++ b/example/page/MediaPage.qml
@ -0,0 +1,37 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+FluWindow {
+
+    width: 640
+    height: 480
+    minimumWidth: 640
+    minimumHeight: 480
+
+    title:"视频播放器"
+
+    onInitArgument:
+        (argument)=>{
+            player.source = argument.source
+        }
+
+    FluAppBar{
+        id:appbar
+        title:"视频播放器"
+        width:parent.width
+    }
+
+
+    FluMediaPlayer{
+        id:player
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: appbar.bottom
+            bottom: parent.bottom
+        }
+    }
+
+}
--- a/example/example.qrc
+++ b/example/example.qrc
@ -1,5 +1,7 @@
 <RCC>
-    <qresource prefix="/example">
+    <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>
@ -12,11 +14,40 @@
        <file>res/svg/avatar_10.svg</file>
        <file>res/svg/avatar_11.svg</file>
        <file>res/svg/avatar_12.svg</file>
+        <file>page/AboutPage.qml</file>
+        <file>page/MainPage.qml</file>
+        <file>page/LoginPage.qml</file>
+        <file>T_ToggleSwitch.qml</file>
+        <file>T_Typography.qml</file>
+        <file>T_Awesome.qml</file>
+        <file>T_Buttons.qml</file>
+        <file>T_Rectangle.qml</file>
+        <file>T_InfoBar.qml</file>
+        <file>T_Progress.qml</file>
+        <file>T_Slider.qml</file>
+        <file>T_TextBox.qml</file>
+        <file>T_Theme.qml</file>
+        <file>T_Dialog.qml</file>
+        <file>T_TreeView.qml</file>
+        <file>T_Expander.qml</file>
+        <file>T_TimePicker.qml</file>
+        <file>T_DatePicker.qml</file>
+        <file>T_MultiWindow.qml</file>
+        <file>T_Menu.qml</file>
        <file>res/image/banner_1.jpg</file>
        <file>res/image/banner_2.jpg</file>
        <file>res/image/banner_3.jpg</file>
        <file>res/image/logo_openai.png</file>
+        <file>page/ChatPage.qml</file>
+        <file>T_Tooltip.qml</file>
+        <file>T_Badge.qml</file>
+        <file>T_CalendarPicker.qml</file>
+        <file>T_ColorPicker.qml</file>
+        <file>T_Carousel.qml</file>
+        <file>T_MediaPlayer.qml</file>
+        <file>T_TabView.qml</file>
        <file>res/image/favicon.ico</file>
+        <file>T_Home.qml</file>
        <file>res/image/bg_home_header.png</file>
        <file>res/image/ic_home_github.png</file>
        <file>res/image/control/Acrylic.png</file>
@ -117,102 +148,14 @@
        <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>
+        <file>T_CheckBox.qml</file>
+        <file>global/ItemsOriginal.qml</file>
+        <file>global/qmldir</file>
+        <file>global/ItemsFooter.qml</file>
+        <file>page/MediaPage.qml</file>
+        <file>T_FlipView.qml</file>
+        <file>T_Pivot.qml</file>
+        <file>component/CodeExpander.qml</file>
+        <file>T_TableView.qml</file>
    </qresource>
-    <qresource prefix="/"/>
 </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/Show More
+++ b/Show More