2025-04-21 10:21:10 +08:00
519 changed files with 10746 additions and 143155 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
@ -21,8 +21,8 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [macos-latest]
+        os: [macos-12]
-        qt_ver: [6.6.2]
+        qt_ver: [6.5.0]
        qt_arch: [clang_64]
    env:
      targetName: example
@ -38,7 +38,7 @@ jobs:
          version: ${{ matrix.qt_ver }}
          cache: ${{steps.cache-qt.outputs.cache-hit}}
          arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
      - name: Set up Ninja
        uses: seanmiddleditch/gha-setup-ninja@v3
@ -50,19 +50,17 @@ jobs:
          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 -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.5.0/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
      - name: package
        run: |
          # 先删除所有dSYM文件，减少包的体积
          sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
          # 拷贝依赖
-          sudo macdeployqt bin/Release/${targetName}.app -qmldir=. -dmg     
+          macdeployqt bin/release/${targetName}.app -qmldir=. -verbose=1 -dmg     
-      - uses: actions/upload-artifact@v4
+      - 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
      - name: uploadRelease
@ -73,4 +71,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
@ -22,8 +22,8 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [ubuntu-latest]
+        os: [ubuntu-20.04]
-        qt_ver: [6.6.2]
+        qt_ver: [6.5.0]
        qt_arch: [gcc_64]
    env:
      targetName: example
@ -39,7 +39,7 @@ jobs:
          version: ${{ matrix.qt_ver }}
          cache: ${{steps.cache-qt.outputs.cache-hit}}
          arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
      - name: Set up Ninja
        uses: seanmiddleditch/gha-setup-ninja@v3
@ -49,16 +49,13 @@ jobs:
      - name: ubuntu install GL library
        run: sudo apt-get install -y libxcb-cursor0 libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
      - name: ubuntu install libfuse2
        run: sudo apt install libfuse2
      - name: build ubuntu
        run: |
          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 -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.5.0/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
      - name: install QT linux deploy
@ -69,20 +66,15 @@ jobs:
      - 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=./
          # 拷贝依赖
-          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
+      - uses: actions/upload-artifact@v2
        with:
          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
          path: ${{ env.targetName }}.AppImage
@ -95,4 +87,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
@ -18,13 +18,12 @@ on:
 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.5.0
            qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
            qt_tools_mingw_install: mingw900_64
    env:
@ -35,11 +34,6 @@ jobs:
        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
@ -47,7 +41,7 @@ jobs:
          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'
      - name: Qt6 environment configuration
        if: ${{ startsWith( matrix.qt_ver, 6 ) }}
@ -68,8 +62,7 @@ jobs:
        run: |
          mkdir build
          cd build
-          ninja --version
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
      - name: package
@ -82,23 +75,17 @@ jobs:
           $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
+          path: ${{ steps.package.outputs.packageName }}
      - 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
+          file: ${{ steps.package.outputs.packageName }}.zip
-          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
+          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
@ -21,12 +21,12 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [windows-latest]
+        os: [windows-2019]
        include:
-          - qt_ver: 6.6.2        
+          - qt_ver: 6.5.0        
            qt_arch: win64_msvc2019_64
            msvc_arch: x64
-            qt_arch_install: msvc2019_64  
+            qt_arch_install: msvc2019_64          
    env:
      targetName: example.exe
      fileName: example
@ -35,29 +35,23 @@ jobs:
        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 qtspeech qt3d'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech'
      - 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 }}
+          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\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 -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
          cmake --build . --target all --config Release --parallel
          echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
          echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
@ -76,23 +70,17 @@ jobs:
           $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
+          path: ${{ steps.package.outputs.packageName }}
      - 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
+          file: ${{ steps.package.outputs.packageName }}.zip
-          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
+          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,9 @@ target_wrapper.*
 # QtCreator CMake
 CMakeLists.txt.user*
 src/build-preset/plugins.qmltypes
 bin
 .DS_Store
 build
 cmake-build-*
-.idea
+.idea
 package
 example/Version.h
 dist
 *.qm
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,3 @@
 [submodule "framelesshelper"]
 	path = framelesshelper
 	url = https://github.com/zhuzichu520/framelesshelper.git
--- 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/x64/libcrypto-1_1-x64.dll
+++ b/3rdparty/msvc/x64/libcrypto-1_1-x64.dll
--- a/3rdparty/msvc/x64/libssl-1_1-x64.dll
+++ b/3rdparty/msvc/x64/libssl-1_1-x64.dll
--- a/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,35 @@
 cmake_minimum_required(VERSION 3.20)
-project(FluentUI VERSION 1.0)
+project(FluentUI VERSION 0.1 LANGUAGES CXX)
 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_FRAMELESSHEPLER "Build FramelessHelper." ON)
 option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
-find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
+#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
-find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
+set(FLUENTUI_QML_PLUGIN_DIRECTORY "" CACHE PATH "Path to FluentUI plugin")
 if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
    set(FLUENTUI_QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 endif()
 add_subdirectory(src)
 #Release也支持日志打印代码位置
 target_compile_definitions(fluentuiplugin
        PRIVATE
        QT_MESSAGELOGCONTEXT
 )
 if (FLUENTUI_BUILD_EXAMPLES)
    add_subdirectory(example)
 endif ()
 if (FLUENTUI_BUILD_FRAMELESSHEPLER)
    set(FRAMELESSHELPER_BUILD_STATIC ON)
    set(FRAMELESSHELPER_NO_SUMMARY OFF)
    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT OFF)
    set(FRAMELESSHELPER_BUILD_WIDGETS OFF)
    add_definitions(-DFRAMELESSHELPER_CORE_NO_DEBUG_OUTPUT)
    add_definitions(-DFRAMELESSHELPER_QUICK_NO_DEBUG_OUTPUT)
    add_subdirectory(framelesshelper)
 endif ()
 message("------------------------ FluentUI ------------------------")
 message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
 message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")
 message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
 message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")
--- a/README.md
+++ b/README.md
@ -1,24 +1,24 @@
 # 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">
+  <img width=64 src="doc/preview/fluent_design.svg">
 # QML FluentUI
 A Fluent Design component library for Qt QML, You need PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML).
 </div>
 <h1 align="center">
  QML FluentUI 
 </h1>
 <p align="center">
  A fluent design component library for Qt QML。 <a href="https://zhuzichu520.github.io">official wasm app.</a>
 </p>
 ![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
 <p align="center">
 English | <a href="README_zh_CN.md">简体中文</a>
 </p>
 <div align=center>
-
+  <img src="doc/preview/demo_large.png">
 English | [简体中文](README_zh_CN.md)
 <img src="doc/preview/demo_large.png">
 </div>
 [win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
 [win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg  "Windows"
 [ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
@ -31,6 +31,7 @@ English | [简体中文](README_zh_CN.md)
 [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>
@ -45,21 +46,21 @@ Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to
 ## ⚽ Get started
-+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please specify your platform and compilers.)
+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)
 + run `example` program.
-or
+or 
 + Clone the repository.
-```bash
+```SHELL
 git clone --recursive https://github.com/zhuzichu520/FluentUI.git
 ```
 + Build
-```bash
+```
 git clone --recursive https://github.com/zhuzichu520/FluentUI.git
 cd FluentUI
 mkdir build
@ -78,35 +79,38 @@ cmake --build . --config Release --target all --parallel
 + Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.
 ## 📑 Documentations
 (Work in progress...🚀)
 ## Supported components
-|       Catalog       |              Detail              |                    Notes / Demos                    |
+|Catalog|Detail|Notes / Demos|
-| :-----------------: | :------------------------------: | :-------------------------------------------------: |
+|:----:|:----:|:----:|
-|       FluApp        | The initial entry of the program |                Router supported(SPA)                |
+|FluApp|The initial entry of the program|Router supported(SPA)|
-|      FluWindow      |         Frameless Window         |             *This only works on windows             |
+|FluWindow|Frameless Window|*This only works on windows|
-|      FluAppBar      |  Title bar on top of the window  |  Drag, minimize, maximize and close are supported.  |
+|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|
-|       FluText       |           Common text            |                                                     |
+|FluText|Common text||
-|      FluButton      |          Common button           |      ![btn](doc/preview/demo_standardbtn.png)       |
+|FluButton|Common button|![btn](doc/preview/demo_standardbtn.png) |
-|   FluFilledButton   |          Filled button           |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|FluFilledButton|Filled button|![filledbtn](doc/preview/demo_filledbtn.png)|
-|    FluTextButton    |           Text button            |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|FluTextButton|Text button|![textbtn](doc/preview/demo_textbtn.png)|
-|   FluToggleButton   |          Toggle buttons          |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|FluToggleButton|Toggle buttons|![togglebtn](doc/preview/demo_toggle_btn.png)|
-|       FluIcon       |           Common icon            |         ![icons](doc/preview/demo_icon.png)         |
+|FluIcon|Common icon|![icons](doc/preview/demo_icon.png)|
-|   FluRadioButton    |           radio button           |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|FluRadioButton|radio button|![radiobtn](doc/preview/demo_radiobtn.png)|
-|     FluTextBox      |      Single-line input box       |      ![textbox](doc/preview/demo_textbox.png)       |
+|FluTextBox|Single-line input box|![textbox](doc/preview/demo_textbox.png)|
-| FluMultiLineTextBox |      Multi-lines input area      | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|FluMultiLineTextBox|Multi-lines input area|![textarea](doc/preview/demo_multiline_textbox.png)|
-|   FluToggleSwitch   |          toggle switch           | ![toggleswitch](doc/preview/demo_toggle_switch.png) |
+|FluToggleSwitch|toggle switch|![toggleswitch](doc/preview/demo_toggle_switch.png)|
 View more [`here`](doc/md/all_components.md)!
 ## Reference
 ## 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)
@ -116,5 +120,4 @@ This FluentUI library currently licensed under [MIT License](./License)
 [![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
 ## ⚡ 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 +1,99 @@
-<div align=center>
+# FluentUI
 <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)。
+这是一个漂亮的Fluent组件库，使用QML插件开发的。main分支是Qt6.4.3，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8" target="_blank">如何使用？</a>。如果需要qt5的请切换至qt5分支，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%EF%BC%881.2.7%E4%BB%A5%E5%8F%8A%E4%B9%8B%E5%89%8D%E7%89%88%E6%9C%AC%EF%BC%89" target="_blank">如何使用？</a>
-</div>
+## 编译状态
-
+| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
-![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
+|---------------|---------------|-----------------|
-
+| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
 <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]|[下载][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>
 这是一个基于 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）                   |
+|FluApp|初始化入口|支持路由跳转|
-|      FluWindow      |     无框窗口     |                  *仅适用于 Windows                  |
+|FluWindow|无边框窗口|解决windows拖动闪烁问题|
-|      FluAppBar      | 窗口顶部的标题栏 |          支持拖动、最小化、最大化和关闭。           |
+|FluAppBar|窗口顶部标题栏|支持拖动窗口，最小化、最大化、关闭窗口|
-|       FluText       |     通用文本     |                                                     |
+|FluText|Text文本||
-|      FluButton      |     通用按钮     |      ![btn](doc/preview/demo_standardbtn.png)       |
+|FluButton|按钮||
-|   FluFilledButton   |   Filled 按钮    |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|FluFilledButton|实心按钮||
-|    FluTextButton    |     文本按钮     |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|FluIconButton|图标按钮||
-|   FluToggleButton   |     切换按钮     |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|FluTextButton|文本按钮||
-|       FluIcon       |     通用图标     |         ![icons](doc/preview/demo_icon.png)         |
+|FluIcon|图标||
-|   FluRadioButton    |      单选框      |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|FluRadioButton|单选按钮||
-|     FluTextBox      |    单行输入框    |      ![textbox](doc/preview/demo_textbox.png)       |
+|FluTextBox|单行输入框||
-| FluMultiLineTextBox |    多行输入框    | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|FluMultiLineTextBox|多行输入框||
-|   FluToggleSwitch   |       开关       | ![toggleswitch](doc/preview/demo_toggle_switch.png) |
+|FluToggleSwitch|开关按钮||
 |FluSlider|拖动条||
 |FluInfoBar|提示Toast||
 |FluContentDialog|对话框||
 |FluProgressBar|条形进度条||
 |FluProgressRing|圆形进度条||
 |FluRectangle|矩形|支持部分圆角、clip|
 |FluMenu|菜单框||
 |FluTooltip|tooltip提示框||
 |FluTreeView|树控件||
 |FluTheme|主题设置|支持主题颜色切换，夜间模式|
 |FluCarousel|轮播图组件|支持无限轮播|
 |FluTimePicker|时间选择器||
 |FluDatePicker|日期选择器||
 |FluMenu|菜单Popup||
 |FluNavigationView|响应式导航布局||
 |FluScrollbar|滚动条||
 |FluToggleButton|开关按钮||
 |FluPagination|分页组件||
 |FluTableView|表格组件||
 |FluMediaPlayer|播放器||
 |FluFlipView|FlipView||
-在 [`这里`](doc/md/all_components.md) 查看更多！
+# 部分效果预览
-## 参考
+## 首页
-+ [**Windows 设计**：Microsoft 的设计指南和工具包。](https://learn.microsoft.com/zh-CN/windows/apps/design/)
+![](doc/preview/home.png)
 + [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)
-## 许可
+## 各种Button按钮
-本 FluentUI 库目前采用 [MIT License](./License) 许可。
+![](doc/preview/buttons.png)
-## 星标历史
+## 主题颜色切换、夜间模式
-[![星标历史图表](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
+![](doc/preview/theme.png)
-## ⚡ 游客数量
+## TableView表格组件
-![游客数量](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
+![](doc/preview/tableview.png)
 ## FluTreeView树组件
 ![](doc/preview/treeview.png)
 ## 轮播图组件
 ![](doc/preview/carousel.png)
 ### ⚡ Visitor count
 ![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
--- a/THIRD_PARTY_COPYRIGHT.txt
+++ b/THIRD_PARTY_COPYRIGHT.txt
--- a/example/CMakeLists.txt
+++ b/example/CMakeLists.txt
@ -1,172 +1,140 @@
 cmake_minimum_required(VERSION 3.20)
-project(example VERSION 1.0)
+project(example VERSION 0.1 LANGUAGES CXX)
 #配置通用编译
 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)
 if(APPLE)
    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 #导入exmaple的QML位置，不然import example有时候会爆红
 set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
 #判断FluentUI库类型
-if (FLUENTUI_BUILD_STATIC_LIB)
+if(FLUENTUI_BUILD_STATIC_LIB)
    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
-endif ()
+endif()
 #设置可执行文件输出目录
-set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
+if(CMAKE_BUILD_TYPE STREQUAL "Debug")
    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
 else()
    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/release)
 endif()
-if (APPLE)
+#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
-    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
+file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 else ()
    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
 endif ()
-#导入Qt相关依赖包
+#设置版本号
-find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network Widgets)
+add_definitions(-DVERSION=1,4,0,0)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network Widgets)
-#添加国际化脚本
+find_package(Qt6 REQUIRED COMPONENTS Quick Svg Network)
 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}
 )
-##生成版本信息头文件
+if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
-set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
+    qt_standard_project_setup()
-configure_file(
+else()
-        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
+    set(CMAKE_AUTOMOC ON)
-        ${HEADER_FILE_VERSION_PATH}
+    set(CMAKE_AUTORCC ON)
-)
+    set(CMAKE_AUTOUIC ON)
 endif()
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
-foreach (filepath ${CPP_FILES})
+foreach(filepath ${CPP_FILES})
    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
    list(APPEND sources_files ${filename})
-endforeach (filepath)
+endforeach(filepath)
-if (WIN32)
+#遍历所有qml文件
-    list(APPEND sources_files "src/app_dmp.h")
+file(GLOB_RECURSE QML_PATHS *.qml)
-endif ()
+foreach(filepath ${QML_PATHS})
    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
    list(APPEND qml_files ${filename})
 endforeach(filepath)
-#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
+#遍历所有资源文件
-set(EXAMPLE_VERSION_RC_PATH "")
+file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp qmldir)
-if (WIN32)
+foreach(filepath ${RES_PATHS})
-    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-    configure_file(
+    list(APPEND resource_files ${filename})
-            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
+endforeach(filepath)
            ${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)
+if (CMAKE_SYSTEM_NAME STREQUAL "Windows")
-    list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
+    qt_add_executable(example
-endif ()
+        ${sources_files}
-if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+        example.rc
    qt_add_executable(${PROJECT_NAME}
            MANUAL_FINALIZATION
            ${sources_files}
    )
 else ()
-    add_executable(${PROJECT_NAME}
+    qt_add_executable(example
-            ${sources_files}
+        ${sources_files}
    )
 endif ()
 add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
-#复制程序运行所需要的动态库
+#复制动态库到可执行文件同级目录下
-if (WIN32)
+if(WIN32)
-    if (MSVC)
+    if(CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
-        if (CMAKE_SIZEOF_VOID_P EQUAL 4)
+        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/msvc/*.dll)
-            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+    else()
-        elseif (CMAKE_SIZEOF_VOID_P EQUAL 8)
+        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
-            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+    endif()
-        endif ()
+    string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
-    elseif (MINGW)
+    file(GLOB DLL_FILES ${DLLPATH})
-        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
-    endif ()
+        COMMAND ${CMAKE_COMMAND} -E copy
-    file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+        ${DLL_FILES}
-endif ()
+        ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
    )
 endif()
-#复制FluentUI源码到运行目录下，用于脚手架生成
+#添加qml模块
-file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
+qt_add_qml_module(example
-file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
+    URI "example"
    VERSION 1.0
    QML_FILES ${qml_files}
    RESOURCES ${resource_files}
 )
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
-target_include_directories(${PROJECT_NAME} PRIVATE
+target_include_directories(example PRIVATE
-        ${CMAKE_CURRENT_SOURCE_DIR}/src/component
+    ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )
 #如果是静态库则需要手动注册插件，导入FluentUI.h头文件
 if (FLUENTUI_BUILD_STATIC_LIB)
    target_include_directories(${PROJECT_NAME} PRIVATE
            ${CMAKE_SOURCE_DIR}/src
    )
 endif ()
 #设置属性
-set_target_properties(${PROJECT_NAME} PROPERTIES
+set_target_properties(example PROPERTIES
-        MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
-        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
-        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
-        MACOSX_BUNDLE TRUE
+    MACOSX_BUNDLE TRUE
-        WIN32_EXECUTABLE TRUE
+    WIN32_EXECUTABLE TRUE
 )
-#Release也支持日志打印代码位置
+#链接库
-target_compile_definitions(${PROJECT_NAME}
+if (FLUENTUI_BUILD_STATIC_LIB)
-        PRIVATE
+    target_link_libraries(example PRIVATE
-        QT_MESSAGELOGCONTEXT
+        Qt6::Quick
-)
+        Qt6::Svg
-
+        Qt6::Network
-#目标文件链接库
+        fluentui
 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
-)
+        FramelessHelper::Core
        FramelessHelper::Quick
    )
 else()
    target_link_libraries(example PRIVATE
        Qt6::Quick
        Qt6::Svg
        Qt6::Network
        fluentuiplugin
        FramelessHelper::Core
        FramelessHelper::Quick
    )
 endif()
-#添加部署脚本
+#安装
-if (CMAKE_BUILD_TYPE MATCHES "Release")
+install(TARGETS example
-    if (APPLE)
+    BUNDLE DESTINATION .
-        find_program(QT_DEPLOY_QT NAMES macdeployqt)
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
-        add_custom_target(Script-DeployRelease
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
-                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+)
                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
                COMMENT "MacOs Deploying Qt Dependencies After Build........."
                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
        )
    endif ()
    if (WIN32)
        find_program(QT_DEPLOY_QT NAMES windeployqt)
        add_custom_target(Script-DeployRelease
                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
                COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
                COMMENT "Windows Deploying Qt Dependencies After Build........."
                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
        )
    endif ()
 endif ()
--- a/example/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/example.qrc
+++ b/example/example.qrc
@ -1,218 +0,0 @@
 <RCC>
    <qresource prefix="/example">
        <file>res/svg/avatar_1.svg</file>
        <file>res/svg/avatar_2.svg</file>
        <file>res/svg/avatar_3.svg</file>
        <file>res/svg/avatar_4.svg</file>
        <file>res/svg/avatar_5.svg</file>
        <file>res/svg/avatar_6.svg</file>
        <file>res/svg/avatar_7.svg</file>
        <file>res/svg/avatar_8.svg</file>
        <file>res/svg/avatar_9.svg</file>
        <file>res/svg/avatar_10.svg</file>
        <file>res/svg/avatar_11.svg</file>
        <file>res/svg/avatar_12.svg</file>
        <file>res/image/banner_1.jpg</file>
        <file>res/image/banner_2.jpg</file>
        <file>res/image/banner_3.jpg</file>
        <file>res/image/logo_openai.png</file>
        <file>res/image/favicon.ico</file>
        <file>res/image/bg_home_header.png</file>
        <file>res/image/ic_home_github.png</file>
        <file>res/image/control/Acrylic.png</file>
        <file>res/image/control/AnimatedIcon.png</file>
        <file>res/image/control/AnimatedVisualPlayer.png</file>
        <file>res/image/control/AnimationInterop.png</file>
        <file>res/image/control/AppBarButton.png</file>
        <file>res/image/control/AppBarSeparator.png</file>
        <file>res/image/control/AppBarToggleButton.png</file>
        <file>res/image/control/AutomationProperties.png</file>
        <file>res/image/control/AutoSuggestBox.png</file>
        <file>res/image/control/Border.png</file>
        <file>res/image/control/BreadcrumbBar.png</file>
        <file>res/image/control/Button.png</file>
        <file>res/image/control/CalendarDatePicker.png</file>
        <file>res/image/control/CalendarView.png</file>
        <file>res/image/control/Canvas.png</file>
        <file>res/image/control/Checkbox.png</file>
        <file>res/image/control/Clipboard.png</file>
        <file>res/image/control/ColorPaletteResources.png</file>
        <file>res/image/control/ColorPicker.png</file>
        <file>res/image/control/ComboBox.png</file>
        <file>res/image/control/CommandBar.png</file>
        <file>res/image/control/CommandBarFlyout.png</file>
        <file>res/image/control/CompactSizing.png</file>
        <file>res/image/control/ConnectedAnimation.png</file>
        <file>res/image/control/ContentDialog.png</file>
        <file>res/image/control/CreateMultipleWindows.png</file>
        <file>res/image/control/DataGrid.png</file>
        <file>res/image/control/DatePicker.png</file>
        <file>res/image/control/DropDownButton.png</file>
        <file>res/image/control/EasingFunction.png</file>
        <file>res/image/control/Expander.png</file>
        <file>res/image/control/FilePicker.png</file>
        <file>res/image/control/FlipView.png</file>
        <file>res/image/control/Flyout.png</file>
        <file>res/image/control/Grid.png</file>
        <file>res/image/control/GridView.png</file>
        <file>res/image/control/HyperlinkButton.png</file>
        <file>res/image/control/IconElement.png</file>
        <file>res/image/control/Image.png</file>
        <file>res/image/control/ImplicitTransition.png</file>
        <file>res/image/control/InfoBadge.png</file>
        <file>res/image/control/InfoBar.png</file>
        <file>res/image/control/InkCanvas.png</file>
        <file>res/image/control/InkToolbar.png</file>
        <file>res/image/control/InputValidation.png</file>
        <file>res/image/control/ItemsRepeater.png</file>
        <file>res/image/control/Line.png</file>
        <file>res/image/control/ListBox.png</file>
        <file>res/image/control/ListView.png</file>
        <file>res/image/control/MediaPlayerElement.png</file>
        <file>res/image/control/MenuBar.png</file>
        <file>res/image/control/MenuFlyout.png</file>
        <file>res/image/control/NavigationView.png</file>
        <file>res/image/control/NumberBox.png</file>
        <file>res/image/control/PageTransition.png</file>
        <file>res/image/control/ParallaxView.png</file>
        <file>res/image/control/PasswordBox.png</file>
        <file>res/image/control/PersonPicture.png</file>
        <file>res/image/control/PipsPager.png</file>
        <file>res/image/control/Pivot.png</file>
        <file>res/image/control/ProgressBar.png</file>
        <file>res/image/control/ProgressRing.png</file>
        <file>res/image/control/PullToRefresh.png</file>
        <file>res/image/control/RadialGradientBrush.png</file>
        <file>res/image/control/RadioButton.png</file>
        <file>res/image/control/RadioButtons.png</file>
        <file>res/image/control/RatingControl.png</file>
        <file>res/image/control/RelativePanel.png</file>
        <file>res/image/control/RepeatButton.png</file>
        <file>res/image/control/RevealFocus.png</file>
        <file>res/image/control/RichEditBox.png</file>
        <file>res/image/control/RichTextBlock.png</file>
        <file>res/image/control/ScrollViewer.png</file>
        <file>res/image/control/SemanticZoom.png</file>
        <file>res/image/control/Shape.png</file>
        <file>res/image/control/Slider.png</file>
        <file>res/image/control/Sound.png</file>
        <file>res/image/control/SplitButton.png</file>
        <file>res/image/control/SplitView.png</file>
        <file>res/image/control/StackPanel.png</file>
        <file>res/image/control/StandardUICommand.png</file>
        <file>res/image/control/SwipeControl.png</file>
        <file>res/image/control/TabView.png</file>
        <file>res/image/control/TeachingTip.png</file>
        <file>res/image/control/TextBlock.png</file>
        <file>res/image/control/TextBox.png</file>
        <file>res/image/control/ThemeTransition.png</file>
        <file>res/image/control/TimePicker.png</file>
        <file>res/image/control/TitleBar.png</file>
        <file>res/image/control/ToggleButton.png</file>
        <file>res/image/control/ToggleSplitButton.png</file>
        <file>res/image/control/ToggleSwitch.png</file>
        <file>res/image/control/ToolTip.png</file>
        <file>res/image/control/TreeView.png</file>
        <file>res/image/control/VariableSizedWrapGrid.png</file>
        <file>res/image/control/Viewbox.png</file>
        <file>res/image/control/WebView.png</file>
        <file>res/image/control/XamlUICommand.png</file>
        <file>res/svg/home.svg</file>
        <file>res/svg/home_dark.svg</file>
        <file>res/image/qrcode_wx.jpg</file>
        <file>res/image/qrcode_zfb.jpg</file>
        <file>qml/App.qml</file>
        <file>qml/component/CodeExpander.qml</file>
        <file>qml/global/ItemsFooter.qml</file>
        <file>qml/global/ItemsOriginal.qml</file>
        <file>qml/global/qmldir</file>
        <file>qml/page/T_Acrylic.qml</file>
        <file>qml/page/T_Badge.qml</file>
        <file>qml/page/T_BreadcrumbBar.qml</file>
        <file>qml/page/T_Buttons.qml</file>
        <file>qml/page/T_CalendarPicker.qml</file>
        <file>qml/page/T_Captcha.qml</file>
        <file>qml/page/T_Carousel.qml</file>
        <file>qml/page/T_CheckBox.qml</file>
        <file>qml/page/T_ColorPicker.qml</file>
        <file>qml/page/T_ComboBox.qml</file>
        <file>qml/page/T_DatePicker.qml</file>
        <file>qml/page/T_Dialog.qml</file>
        <file>qml/page/T_Expander.qml</file>
        <file>qml/page/T_FlipView.qml</file>
        <file>qml/page/T_Home.qml</file>
        <file>qml/page/T_Image.qml</file>
        <file>qml/page/T_InfoBar.qml</file>
        <file>qml/page/T_Menu.qml</file>
        <file>qml/page/T_MultiWindow.qml</file>
        <file>qml/page/T_Pagination.qml</file>
        <file>qml/page/T_Pivot.qml</file>
        <file>qml/page/T_Progress.qml</file>
        <file>qml/page/T_QRCode.qml</file>
        <file>qml/page/T_RadioButton.qml</file>
        <file>qml/page/T_RatingControl.qml</file>
        <file>qml/page/T_Rectangle.qml</file>
        <file>qml/page/T_RemoteLoader.qml</file>
        <file>qml/page/T_Settings.qml</file>
        <file>qml/page/T_Slider.qml</file>
        <file>qml/page/T_StatusLayout.qml</file>
        <file>qml/page/T_TableView.qml</file>
        <file>qml/page/T_TabView.qml</file>
        <file>qml/page/T_Text.qml</file>
        <file>qml/page/T_TextBox.qml</file>
        <file>qml/page/T_Theme.qml</file>
        <file>qml/page/T_Timeline.qml</file>
        <file>qml/page/T_TimePicker.qml</file>
        <file>qml/page/T_ToggleSwitch.qml</file>
        <file>qml/page/T_Tooltip.qml</file>
        <file>qml/page/T_Tour.qml</file>
        <file>qml/page/T_TreeView.qml</file>
        <file>qml/page/T_Typography.qml</file>
        <file>qml/page/T_Watermark.qml</file>
        <file>qml/window/AboutWindow.qml</file>
        <file>qml/window/HotloadWindow.qml</file>
        <file>qml/window/LoginWindow.qml</file>
        <file>qml/window/MainWindow.qml</file>
        <file>qml/window/SingleInstanceWindow.qml</file>
        <file>qml/window/SingleTaskWindow.qml</file>
        <file>qml/window/StandardWindow.qml</file>
        <file>res/image/image_1.jpg</file>
        <file>qml/window/PageWindow.qml</file>
        <file>qml/page/T_StaggeredLayout.qml</file>
        <file>qml/page/T_Clip.qml</file>
        <file>qml/page/T_Network.qml</file>
        <file>qml/page/T_ShortcutPicker.qml</file>
        <file>qml/chart/T_BarChart.qml</file>
        <file>qml/chart/T_LineChart.qml</file>
        <file>qml/chart/T_PieChart.qml</file>
        <file>qml/chart/T_RadarChart.qml</file>
        <file>qml/chart/T_ScatterChart.qml</file>
        <file>qml/chart/T_BubbleChart.qml</file>
        <file>qml/chart/T_PolarAreaChart.qml</file>
        <file>res/image/ic_crash.png</file>
        <file>qml/window/CrashWindow.qml</file>
        <file>qml/page/T_SplitLayout.qml</file>
        <file>res/template/CMakeLists.txt.in</file>
        <file>res/template/src/App.qml.in</file>
        <file>res/template/src/CMakeLists.txt.in</file>
        <file>res/template/src/en_US.ts.in</file>
        <file>res/template/src/logo.ico.in</file>
        <file>res/template/src/main.cpp.in</file>
        <file>res/template/src/main.qml.in</file>
        <file>res/template/src/qml.qrc.in</file>
        <file>res/template/src/zh_CN.ts.in</file>
        <file>res/template/src/README.md.in</file>
        <file>qml/global/GlobalModel.qml</file>
        <file>qml/page/T_Sheet.qml</file>
        <file>qml/page/T_GroupBox.qml</file>
        <file>res/image/bg_scenic.jpg</file>
        <file>qml/window/FluentInitializrWindow.qml</file>
        <file>qml/page/T_OpenGL.qml</file>
        <file>qml/page/T_Icons.qml</file>
        <file>qml/window/HotkeyWindow.qml</file>
        <file>qml/page/T_CustomPlot.qml</file>
        <file>res/image/logo_pro.png</file>
        <file>qml/page/T_FluentPro.qml</file>
    </qresource>
    <qresource prefix="/"/>
 </RCC>
--- a/example/example.rc
+++ b/example/example.rc
@ -0,0 +1,42 @@
 #include <windows.h>
 IDI_ICON1 ICON "favicon.ico"
 #define STR(x) #x
 #define VER_JOIN(a,b,c,d) STR(a.b.c.d)
 #define VER_JOIN_(x) VER_JOIN x
 #define VER_STR VER_JOIN_((VERSION))
 VS_VERSION_INFO VERSIONINFO
 FILEVERSION     VERSION
 PRODUCTVERSION  VERSION
 FILEFLAGSMASK   0x3fL
 #ifdef _DEBUG
 FILEFLAGS       VS_FF_DEBUG
 #else
 FILEFLAGS       0x0L
 #endif
 FILEOS          VOS_NT_WINDOWS32
 FILETYPE        VFT_APP
 FILESUBTYPE     VFT2_UNKNOWN
 BEGIN
    BLOCK "StringFileInfo"
    BEGIN
        BLOCK "040904b0"
        BEGIN
            VALUE "Comments",         "Built by the FluentUI."
            VALUE "CompanyName",      "zhuzichu"
            VALUE "FileDescription",  "example"
            VALUE "FileVersion",      VER_STR
            VALUE "InternalName",     ""
            VALUE "LegalCopyright",   "Copyright (C) 2023"
            VALUE "OriginalFilename", ""
            VALUE "ProductName",      "example"
            VALUE "ProductVersion",   VER_STR
        END
    END
    BLOCK "VarFileInfo"
    BEGIN
        VALUE "Translation", 0x409, 1200
    END
 END
--- 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/qml/App.qml
+++ b/example/qml/App.qml
@ -1,125 +1,44 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
-FluLauncher {
+Window {
    id: app
-    Connections{
+    flags: Qt.SplashScreen
-        target: FluTheme
+
-        function onDarkModeChanged(){
+    FluHttpInterceptor{
-            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        id:interceptor
-        }
+        function onIntercept(request){
-    }
+            if(request.method === "get"){
-    Connections{
+                request.params["method"] = "get"
-        target: FluApp
+            }
-        function onUseSystemAppBarChanged(){
+            if(request.method === "post"){
-            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
+                request.params["method"] = "post"
-        }
+            }
-    }
+            request.headers["token"] ="yyds"
-    Connections{
+            request.headers["os"] ="pc"
-        target: TranslateHelper
+            console.debug(JSON.stringify(request))
-        function onCurrentChanged(){
+            return request
            SettingsHelper.saveLanguage(TranslateHelper.current)
        }
    }
    Component.onCompleted: {
-        Network.openLog = false
+        FluApp.init(app)
-        Network.setInterceptor(function(param){
+        FluTheme.darkMode = FluThemeType.System
-            param.addHeader("Token","000000000000000000000")
+        FluTheme.enableAnimation = true
-        })
+        FluApp.routes = {
        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",
+            "/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("/")
        }
        FluApp.initialRoute = "/"
        FluApp.httpInterceptor = interceptor
        FluApp.run()
    }
    property alias hotkeys: object_hotkey
    FluObject{
        id: object_hotkey
        FluHotkey{
            name: qsTr("Quit")
            sequence: "Ctrl+Alt+Q"
            onActivated: {
                FluRouter.exit()
            }
        }
        FluHotkey{
            name: qsTr("Test1")
            sequence: "Alt+A"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
        FluHotkey{
            name: qsTr("Test2")
            sequence: "Alt+B"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
        FluHotkey{
            name: qsTr("Test3")
            sequence: "Alt+C"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
        FluHotkey{
            name: qsTr("Test4")
            sequence: "Alt+D"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
        FluHotkey{
            name: qsTr("Test5")
            sequence: "Alt+E"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
        FluHotkey{
            name: qsTr("Test6")
            sequence: "Alt+F"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
        FluHotkey{
            name: qsTr("Test7")
            sequence: "Alt+G"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
        FluHotkey{
            name: qsTr("Test8")
            sequence: "Alt+H"
            onActivated: {
                FluRouter.navigate("/hotkey",{sequence:sequence})
            }
        }
    }
 }
--- a/example/qml/chart/T_BarChart.qml
+++ b/example/qml/chart/T_BarChart.qml
@ -1,132 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Bar Chart")
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: 'bar'
            chartData: { return {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [{
                            label: 'My First Dataset',
                            data: [65, 59, 80, 81, 56, 55, 40],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 205, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(201, 203, 207, 0.2)'
                            ],
                            borderColor: [
                                'rgb(255, 99, 132)',
                                'rgb(255, 159, 64)',
                                'rgb(255, 205, 86)',
                                'rgb(75, 192, 192)',
                                'rgb(54, 162, 235)',
                                'rgb(153, 102, 255)',
                                'rgb(201, 203, 207)'
                            ],
                            borderWidth: 1
                        }]
                }
            }
            chartOptions: { return {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                                stacked: true,
                            }],
                        yAxes: [{
                                stacked: true
                            }]
                    }
                }
            }
        }
    }
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: 'horizontalBar'
            chartData: { return {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [{
                            label: 'My First Dataset',
                            data: [65, 59, 80, 81, 56, 55, 40],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(255, 159, 64, 0.2)',
                                'rgba(255, 205, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(201, 203, 207, 0.2)'
                            ],
                            borderColor: [
                                'rgb(255, 99, 132)',
                                'rgb(255, 159, 64)',
                                'rgb(255, 205, 86)',
                                'rgb(75, 192, 192)',
                                'rgb(54, 162, 235)',
                                'rgb(153, 102, 255)',
                                'rgb(201, 203, 207)'
                            ],
                            borderWidth: 1
                        }]
                }
            }
            chartOptions: { return {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: 'Chart.js HorizontalBar Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                                stacked: true,
                            }],
                        yAxes: [{
                                stacked: true
                            }]
                    }
                }
            }
        }
    }
 }
--- a/example/qml/chart/T_BubbleChart.qml
+++ b/example/qml/chart/T_BubbleChart.qml
@ -1,74 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Bubble Chart")
    function randomScalingFactor() {
        return Math.random().toFixed(1);
    }
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: 'bubble'
            chartData: {
                return {
                    datasets: [{
                            label: 'First Dataset',
                            data: [{
                                    x: 20,
                                    y: 30,
                                    r: 15
                                }, {
                                    x: 12,
                                    y: 70,
                                    r: 20
                                }, {
                                    x: 11,
                                    y: 28,
                                    r: 8
                                }, {
                                    x: 9,
                                    y: 28,
                                    r: 10
                                }, {
                                    x: 43,
                                    y: 7,
                                    r: 14
                                }, {
                                    x: 22,
                                    y: 22,
                                    r: 12
                                }, {
                                    x: 40,
                                    y: 10,
                                    r: 10
                                }],
                            backgroundColor: 'rgb(255, 99, 132)'
                        }]
                }}
            chartOptions: {return {
                    maintainAspectRatio: false,
                    responsive: true,
                    hoverMode: 'nearest',
                    intersect: true,
                    title: {
                        display: true,
                        text: 'Chart.js Bubble Chart - Multi Axis'
                    }
                }
            }
        }
    }
 }
--- a/example/qml/chart/T_LineChart.qml
+++ b/example/qml/chart/T_LineChart.qml
@ -1,63 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    id: root
    title: qsTr("Line Chart")
    property var data : []
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            id: chart
            anchors.fill: parent
            chartType: 'line'
            chartData: { return {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [{
                            label: 'My First Dataset',
                            data: root.data,
                            fill: false,
                            borderColor: 'rgb(75, 192, 192)',
                            tension: 0.1
                        }]
                }
            }
            chartOptions: { return {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: 'Chart.js Line Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    }
                }
            }
        }
        Timer{
            id: timer
            interval: 300
            repeat: true
            onTriggered: {
                root.data.push(Math.random()*100)
                if(root.data.length>7){
                    root.data.shift()
                }
                chart.animateToNewData()
            }
        }
        Component.onCompleted: {
            timer.restart()
        }
    }
 }
--- a/example/qml/chart/T_PieChart.qml
+++ b/example/qml/chart/T_PieChart.qml
@ -1,93 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Pie Chart")
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: "doughnut"
            chartData: { return {
                    labels: [
                        'Red',
                        'Blue',
                        'Yellow'
                    ],
                    datasets: [{
                            label: 'My First Dataset',
                            data: [300, 50, 100],
                            backgroundColor: [
                                'rgb(255, 99, 132)',
                                'rgb(54, 162, 235)',
                                'rgb(255, 205, 86)'
                            ],
                            hoverOffset: 4
                        }]
                }
            }
            chartOptions: { return {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: 'Chart.js Doughnut Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    }
                }
            }
        }
    }
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: "pie"
            chartData: { return {
                    labels: [
                        'Red',
                        'Blue',
                        'Yellow'
                    ],
                    datasets: [{
                            label: 'My First Dataset',
                            data: [300, 50, 100],
                            backgroundColor: [
                                'rgb(255, 99, 132)',
                                'rgb(54, 162, 235)',
                                'rgb(255, 205, 86)'
                            ],
                            hoverOffset: 4
                        }]
                }
            }
            chartOptions: { return {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: 'Chart.js Pie Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    }
                }
            }
        }
    }
 }
--- a/example/qml/chart/T_PolarAreaChart.qml
+++ b/example/qml/chart/T_PolarAreaChart.qml
@ -1,57 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Polar Area Chart")
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: 'polarArea'
            chartData: { return {
                    labels: [
                        'Red',
                        'Green',
                        'Yellow',
                        'Grey',
                        'Blue'
                    ],
                    datasets: [{
                            label: 'My First Dataset',
                            data: [11, 16, 7, 3, 14],
                            backgroundColor: [
                                'rgb(255, 99, 132)',
                                'rgb(75, 192, 192)',
                                'rgb(255, 205, 86)',
                                'rgb(201, 203, 207)',
                                'rgb(54, 162, 235)'
                            ]
                        }]
                }
            }
            chartOptions: { return {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: 'Chart.js PolarArea Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    }
                }
            }
        }
    }
 }
--- a/example/qml/chart/T_RadarChart.qml
+++ b/example/qml/chart/T_RadarChart.qml
@ -1,74 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Radar Chart")
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: 'radar'
            chartData: { return {
                    labels: [
                        'Eating',
                        'Drinking',
                        'Sleeping',
                        'Designing',
                        'Coding',
                        'Cycling',
                        'Running'
                    ],
                    datasets:
                        [{
                            label: 'My First Dataset',
                            data: [65, 59, 90, 81, 56, 55, 40],
                            fill: true,
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderColor: 'rgb(255, 99, 132)',
                            pointBackgroundColor: 'rgb(255, 99, 132)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgb(255, 99, 132)'
                        }, {
                            label: 'My Second Dataset',
                            data: [28, 48, 40, 19, 96, 27, 100],
                            fill: true,
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderColor: 'rgb(54, 162, 235)',
                            pointBackgroundColor: 'rgb(54, 162, 235)',
                            pointBorderColor: '#fff',
                            pointHoverBackgroundColor: '#fff',
                            pointHoverBorderColor: 'rgb(54, 162, 235)'
                        }]
                }
            }
            chartOptions: { return {
                    maintainAspectRatio: false,
                    title: {
                        display: true,
                        text: 'Chart.js Radar Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    elements: {
                        line: {
                            borderWidth: 3
                        }
                    }
                }
            }
        }
    }
 }
--- a/example/qml/chart/T_ScatterChart.qml
+++ b/example/qml/chart/T_ScatterChart.qml
@ -1,122 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Scatter Chart")
    function randomScalingFactor() {
        return Math.random().toFixed(1);
    }
    FluFrame{
        Layout.preferredWidth: 500
        Layout.preferredHeight: 370
        padding: 10
        Layout.topMargin: 20
        FluChart{
            anchors.fill: parent
            chartType: 'scatter'
            chartData: {
                return {
                    datasets: [{
                            label: 'My First dataset',
                            xAxisID: 'x-axis-1',
                            yAxisID: 'y-axis-1',
                            borderColor: '#ff5555',
                            backgroundColor: 'rgba(255,192,192,0.3)',
                            data: [{
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }]
                        }, {
                            label: 'My Second dataset',
                            xAxisID: 'x-axis-1',
                            yAxisID: 'y-axis-2',
                            borderColor: '#5555ff',
                            backgroundColor: 'rgba(192,192,255,0.3)',
                            data: [{
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }, {
                                    x: randomScalingFactor(),
                                    y: randomScalingFactor(),
                                }]
                        }]
                }}
            chartOptions: {return {
                    maintainAspectRatio: false,
                    responsive: true,
                    hoverMode: 'nearest',
                    intersect: true,
                    title: {
                        display: true,
                        text: 'Chart.js Scatter Chart - Multi Axis'
                    },
                    scales: {
                        xAxes: [{
                                position: 'bottom',
                                gridLines: {
                                    zeroLineColor: 'rgba(0,0,0,1)'
                                }
                            }],
                        yAxes: [{
                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                display: true,
                                position: 'left',
                                id: 'y-axis-1',
                            }, {
                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                display: true,
                                position: 'right',
                                reverse: true,
                                id: 'y-axis-2',
                                // grid line settings
                                gridLines: {
                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
                                },
                            }],
                    }
                }
            }
        }
    }
 }
--- a/example/qml/component/CodeExpander.qml
+++ b/example/qml/component/CodeExpander.qml
@ -1,27 +1,32 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 FluExpander{
    id:control
    property string code: ""
-    headerText: qsTr("Source")
+    headerText: "Source"
    contentHeight:content.height
    focus: false
-    FluCopyableText{
+    FluMultilineTextBox{
        id:content
        width:parent.width
        activeFocusOnTab: false
        activeFocusOnPress: false
        readOnly: true
        text:highlightQmlCode(code)
-        textFormat: FluCopyableText.RichText
+        textFormat: FluMultilineTextBox.RichText
-        padding: 10
+        KeyNavigation.priority: KeyNavigation.BeforeItem
-        topPadding: 10
+        background:Rectangle{
-        leftPadding: 10
+            radius: 4
-        rightPadding: 10
+            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-        bottomPadding: 10
+            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{
@ -33,8 +38,8 @@ FluExpander{
            topMargin: 5
        }
        onClicked:{
-            FluTools.clipText(FluTools.html2PlantText(content.text))
+            FluTools.clipText(content.text)
-            showSuccess(qsTr("The Copy is Successful"))
+            showSuccess("复制成功")
        }
    }
@ -49,6 +54,7 @@ FluExpander{
    }
    function highlightQmlCode(code) {
        // 定义 QML 关键字列表
        var qmlKeywords = [
                    "FluTextButton",
                    "FluAppBar",
@ -74,6 +80,7 @@ FluExpander{
                    "FluIcon",
                    "FluIconButton",
                    "FluInfoBar",
                    "FluItem",
                    "FluMediaPlayer",
                    "FluMenu",
                    "FluMenuItem",
@ -112,7 +119,7 @@ FluExpander{
                    "FluTableView",
                    "FluColors",
                    "FluTheme",
-                    "FluStatusLayout",
+                    "FluStatusView",
                    "FluRatingControl",
                    "FluPasswordBox",
                    "FluBreadcrumbBar",
@ -124,22 +131,8 @@ FluExpander{
                    "FluRadioButtons",
                    "FluImage",
                    "FluSpinBox",
-                    "FluWatermark",
+                    "FluHttp",
-                    "FluTour",
+                    "FluWatermark"
                    "FluQRCode",
                    "FluTimeline",
                    "FluChart",
                    "FluRangeSlider",
                    "FluStaggeredLayout",
                    "FluProgressButton",
                    "FluLoadingButton",
                    "FluClip",
                    "FluNetwork",
                    "FluShortcutPicker",
                    "FluWindowResultLauncher",
                    "FluRouter",
                    "FluGroupBox",
                    "FluSheet",
                ];
        code = code.replace(/\n/g, "<br>");
        code = code.replace(/ /g, "&nbsp;");
--- a/example/qml/component/CustomWindow.qml
+++ b/example/qml/component/CustomWindow.qml
@ -0,0 +1,63 @@
 import QtQuick
 import QtQuick.Layouts
 import FluentUI
 import org.wangwenx190.FramelessHelper
 FluWindow {
    id:window
    property bool fixSize
    property alias titleVisible: title_bar.titleVisible
    property bool appBarVisible: true
    default property alias content: container.data
    FluAppBar {
        id: title_bar
        title: window.title
        visible: window.appBarVisible
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        darkText: lang.dark_mode
    }
    Item{
        id:container
        anchors{
            top: title_bar.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        clip: true
    }
    FramelessHelper{
        id:framless_helper
        onReady: {
            setTitleBarItem(title_bar)
            moveWindowToDesktopCenter()
            setHitTestVisible(title_bar.minimizeButton())
            setHitTestVisible(title_bar.maximizeButton())
            setHitTestVisible(title_bar.closeButton())
            setWindowFixedSize(fixSize)
            title_bar.maximizeButton.visible = !fixSize
            if (blurBehindWindowEnabled)
                window.backgroundVisible = false
            window.show()
        }
    }
    Connections{
        target: FluTheme
        function onDarkChanged(){
            if (FluTheme.dark)
                FramelessUtils.systemTheme = FramelessHelperConstants.Dark
            else
                FramelessUtils.systemTheme = FramelessHelperConstants.Light
        }
    }
    function setHitTestVisible(com){
        framless_helper.setHitTestVisible(com)
    }
    function setTitleBarItem(com){
        framless_helper.setTitleBarItem(com)
    }
 }
--- a/example/qml/global/GlobalModel.qml
+++ b/example/qml/global/GlobalModel.qml
@ -1,10 +0,0 @@
 pragma Singleton
 import QtQuick 2.15
 import FluentUI 1.0
 QtObject{
    property int displayMode: FluNavigationViewType.Auto
 }
--- a/example/qml/global/ItemsFooter.qml
+++ b/example/qml/global/ItemsFooter.qml
@ -1,42 +1,30 @@
 pragma Singleton
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 FluObject{
    property var navigationView
    property var paneItemMenu
    id:footer_items
    FluPaneItemSeparator{}
    FluPaneItem{
-        title:qsTr("About")
+        title:lang.about
        icon:FluentIcons.Contact
-        onTapListener:function(){
+        tapFunc:function(){
-            FluRouter.navigate("/about")
+            FluApp.navigate("/about")
        }
    }
    FluPaneItem{
-        title:qsTr("Settings")
+        title:lang.settings
        menuDelegate: paneItemMenu
        icon:FluentIcons.Settings
        url:"qrc:/example/qml/page/T_Settings.qml"
        onTap:{
-            navigationView.push(url)
+            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
        }
    }
    FluPaneItem{
        title:qsTr("FluentUI Pro")
        menuDelegate: paneItemMenu
        icon: FluentIcons.Airplane
        url:"qrc:/example/qml/page/T_FluentPro.qml"
        onTap:{
            navigationView.push(url)
        }
    }
 }
--- a/example/qml/global/ItemsOriginal.qml
+++ b/example/qml/global/ItemsOriginal.qml
@ -1,515 +1,375 @@
 pragma Singleton
-import QtQuick 2.15
+import QtQuick
-import FluentUI 1.0
+import FluentUI
 FluObject{
    property var navigationView
    property var paneItemMenu
    function rename(item, newName){
        if(newName && newName.trim().length>0){
            item.title = newName;
        }
    }
    FluPaneItem{
        id:item_home
        count: 9
-        title: qsTr("Home")
+        title:lang.home
-        menuDelegate: paneItemMenu
+        infoBadge:FluBadge{
        infoBadge: FluBadge{
            count: item_home.count
        }
-        icon: FluentIcons.Home
+        icon:FluentIcons.Home
-        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap:{
        onTap: {
            if(navigationView.getCurrentUrl()){
                item_home.count = 0
            }
-            navigationView.push(url)
+            navigationView.push("qrc:/example/qml/page/T_Home.qml")
        }
    }
    FluPaneItemExpander{
-        title: qsTr("PaneItemExpander Disabled")
+        title:lang.basic_input
-        iconVisible: false
+        icon:FluentIcons.CheckboxComposite
        disabled: true
    }
    FluPaneItemExpander{
        id: item_expander_basic_input
        title: qsTr("Basic Input")
        icon: FluentIcons.CheckboxComposite
        FluPaneItem{
-            id: item_buttons
+            id:item_buttons
            count: 99
-            infoBadge: FluBadge{
+            infoBadge:FluBadge{
                count: item_buttons.count
            }
-            title: qsTr("Buttons")
+            title:"Buttons"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/Button.png"
-            extra: ({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:qsTr("A control that responds to user input and raisesa Click event.")})
+            recentlyUpdated:true
-            url: "qrc:/example/qml/page/T_Buttons.qml"
+            desc:"A control that responds to user input and raisesa Click event."
-            onTap: {
+            onTap:{
                item_buttons.count = 0
-                navigationView.push(url)
+                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
            }
        }
        FluPaneItem{
-            id: item_text
+            id:item_text
-            title: qsTr("Text")
+            title:"Text"
            menuDelegate: paneItemMenu
            count: 5
-            infoBadge: FluBadge{
+            infoBadge:FluBadge{
                count: item_text.count
                color: Qt.rgba(82/255,196/255,26/255,1)
            }
-            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap:{
            onTap: {
                item_text.count = 0
-                navigationView.push(url)
+                navigationView.push("qrc:/example/qml/page/T_Text.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("Image")
+            title:"Image"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Image.qml"
+                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Slider")
+            title:"Slider"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/Slider.png"
-            extra: ({image:"qrc:/example/res/image/control/Slider.png",recentlyUpdated:true,desc:qsTr("A control that lets the user select from a rangeof values by moving a Thumb control along atrack.")})
+            recentlyUpdated:true
-            url: "qrc:/example/qml/page/T_Slider.qml"
+            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap: { navigationView.push(url) }
+            onTap:{
                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("CheckBox")
+            title:"CheckBox"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/Checkbox.png"
-            extra: ({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:qsTr("A control that a user can select or clear.")})
+            recentlyUpdated:true
-            url: "qrc:/example/qml/page/T_CheckBox.qml"
+            desc:"A control that a user can select or clear."
-            onTap: { navigationView.push(url) }
+            onTap:{
                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("RadioButton")
+            title:"RadioButton"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_RadioButton.qml"
+                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("ToggleSwitch")
+            title:"ToggleSwitch"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
+                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
            title: qsTr("GroupBox")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_GroupBox.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("PaneItem Disabled")
            disabled: true
            icon: FluentIcons.Error
        }
    }
    FluPaneItemExpander{
-        title: qsTr("Form")
+        title:lang.form
-        icon: FluentIcons.GridView
+        icon:FluentIcons.GridView
-        FluPaneItem {
+        FluPaneItem{
-            title: qsTr("TextBox")
+            title:"TextBox"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_TextBox.qml"
+                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("TimePicker")
+            title:"TimePicker"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_TimePicker.qml"
+                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("DatePicker")
+            title:"DatePicker"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_DatePicker.qml"
+                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("CalendarPicker")
+            title:"CalendarPicker"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("ColorPicker")
+            title:"ColorPicker"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_ColorPicker.qml"
+                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
            title: qsTr("ShortcutPicker")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_ShortcutPicker.qml"
            onTap: { navigationView.push(url) }
        }
    }
    FluPaneItemExpander{
-        title: qsTr("Surface")
+        title:lang.surface
-        icon: FluentIcons.SurfaceHub
+        icon:FluentIcons.SurfaceHub
        FluPaneItem{
-            title: qsTr("InfoBar")
+            title:"InfoBar"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/InfoBar.png"
-            extra: ({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:qsTr("An inline message to display app-wide statuschange information.")})
+            recentlyUpdated:true
-            url: "qrc:/example/qml/page/T_InfoBar.qml"
+            desc:"An inline message to display app-wide statuschange information."
-            onTap: { navigationView.push(url) }
+            onTap:{
                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("Progress")
+            title:"Progress"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Progress.qml"
+                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("RatingControl")
+            title:"RatingControl"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_RatingControl.qml"
+                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Badge")
+            title:"Badge"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Badge.qml"
+                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Rectangle")
+            title:"Rectangle"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Rectangle.qml"
+                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Clip")
+            title:"StatusView"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Clip.qml"
+                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Carousel")
+            title:"Carousel"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Carousel.qml"
+                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Expander")
+            title:"Expander"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Expander.qml"
+                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Watermark")
+            title:"Watermark"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Watermark.qml"
+                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
    }
    FluPaneItemExpander{
-        title: qsTr("Layout")
+        title:lang.popus
-        icon: FluentIcons.DockLeft
+        icon:FluentIcons.ButtonMenu
-        FluPaneItem {
+        FluPaneItem{
-            title: qsTr("StaggeredLayout")
+            title:"Dialog"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_StaggeredLayout.qml"
+                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("SplitLayout")
+            id:item_combobox
-            menuDelegate: paneItemMenu
+            title:"ComboBox"
            url: "qrc:/example/qml/page/T_SplitLayout.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("StatusLayout")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_StatusLayout.qml"
            onTap: { navigationView.push(url) }
        }
    }
    FluPaneItemExpander{
        title: qsTr("Popus")
        icon: FluentIcons.ButtonMenu
        FluPaneItem{
            title: qsTr("Dialog")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_Dialog.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            id: item_combobox
            title: qsTr("ComboBox")
            menuDelegate: paneItemMenu
            count: 9
            infoBadge:FluBadge{
                count: item_combobox.count
                color: Qt.rgba(250/255,173/255,20/255,1)
            }
-            url: "qrc:/example/qml/page/T_ComboBox.qml"
+            onTap:{
            onTap: {
                item_combobox.count = 0
                navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("Tooltip")
+            title:"Tooltip"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Tooltip.qml"
+                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Menu")
+            title:"Menu"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Menu.qml"
+                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
            title: qsTr("Sheet")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_Sheet.qml"
            onTap: { navigationView.push(url) }
        }
    }
    FluPaneItemExpander{
-        title: qsTr("Navigation")
+        title:lang.navigation
-        icon: FluentIcons.AllApps
+        icon:FluentIcons.AllApps
        FluPaneItem{
-            title: qsTr("Pivot")
+            title:"Pivot"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/Pivot.png"
-            extra: ({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:qsTr("Presents information from different sources in a tabbed view.")})
+            recentlyAdded:true
-            url: "qrc:/example/qml/page/T_Pivot.qml"
+            order:3
-            onTap: { navigationView.push(url) }
+            desc:"Presents information from different sources in atabbed view."
            onTap:{
                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("BreadcrumbBar")
+            title:"BreadcrumbBar"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
+                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("TabView")
+            title:"TabView"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/TabView.png"
-            extra: ({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:qsTr("A control that displays a collection of tabs thatcan be used to display several documents.")})
+            recentlyAdded:true
-            url: "qrc:/example/qml/page/T_TabView.qml"
+            order:1
-            onTap: { navigationView.push(url) }
+            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
            onTap:{
                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("TreeView")
+            title:"TreeView"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_TreeView.qml"
+                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("TableView")
+            title:"TableView"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/DataGrid.png"
-            extra: ({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:qsTr("The TableView control provides a flexible way to display a collection of data in rows and columns")})
+            recentlyAdded:true
-            url: "qrc:/example/qml/page/T_TableView.qml"
+            order:4
-            onTap: { navigationView.push(url) }
+            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
            onTap:{
                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("Pagination")
+            title:"Pagination"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Pagination.qml"
+                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("MultiWindow")
+            title:"MultiWindow"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_MultiWindow.qml"
+                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("FlipView")
+            title:"FlipView"
-            menuDelegate: paneItemMenu
+            image:"qrc:/example/res/image/control/FlipView.png"
-            extra: ({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:qsTr("Presents a collection of items that the user canflip through, one item at a time.")})
+            recentlyAdded:true
-            url: "qrc:/example/qml/page/T_FlipView.qml"
+            order:2
-            onTap: { navigationView.push(url) }
+            desc:"Presents a collection of items that the user canflip through, one item at a time."
            onTap:{
                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
            }
        }
    }
    FluPaneItemExpander{
-        title: qsTr("Theming")
+        title:lang.theming
        icon:FluentIcons.Brightness
        FluPaneItem{
-            title: qsTr("Acrylic")
+            title:"Acrylic"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Acrylic.qml"
+                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Theme")
+            title:"Theme"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Theme.qml"
+                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Typography")
+            title:"Typography"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Typography.qml"
+                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Icons")
+            title:"Awesome"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/page/T_Icons.qml"
+                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
    }
    FluPaneItemExpander{
-        title: qsTr("Chart")
+        title:lang.other
-        icon: FluentIcons.AreaChart
+        icon:FluentIcons.Shop
        FluPaneItem{
-            title: qsTr("Bar Chart")
+            title:"Http"
-            menuDelegate: paneItemMenu
+            onTap:{
-            url: "qrc:/example/qml/chart/T_BarChart.qml"
+                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            onTap: { navigationView.push(url) }
+            }
        }
        FluPaneItem{
-            title: qsTr("Line Chart")
+            id:item_other
-            menuDelegate: paneItemMenu
+            title:"RemoteLoader"
            url: "qrc:/example/qml/chart/T_LineChart.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Pie Chart")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/chart/T_PieChart.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Polar Area Chart")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/chart/T_PolarAreaChart.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Bubble Chart")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/chart/T_BubbleChart.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Scatter Chart")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/chart/T_ScatterChart.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Radar Chart")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/chart/T_RadarChart.qml"
            onTap: { navigationView.push(url) }
        }
    }
    FluPaneItemSeparator{
        spacing:10
        size:1
    }
    FluPaneItemExpander{
        title: qsTr("Other")
        icon: FluentIcons.Shop
        FluPaneItem{
            title: qsTr("OpenGL")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_OpenGL.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("QCustomPlot")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_CustomPlot.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("QRCode")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_QRCode.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Tour")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_Tour.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Timeline")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_Timeline.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Captcha")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_Captcha.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            title: qsTr("Network")
            menuDelegate: paneItemMenu
            url: "qrc:/example/qml/page/T_Network.qml"
            onTap: { navigationView.push(url) }
        }
        FluPaneItem{
            id: item_other
            title: qsTr("Remote Loader")
            menuDelegate: paneItemMenu
            count: 99
            infoBadge:FluBadge{
                count: item_other.count
                color: Qt.rgba(82/255,196/255,26/255,1)
            }
-            url: "qrc:/example/qml/page/T_RemoteLoader.qml"
+            onTap:{
            onTap: {
                item_other.count = 0
                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
            }
        }
        FluPaneItem{
-            title: qsTr("Hot Loader")
+            title:"HotLoader"
-            onTapListener: function(){
+            tapFunc:function(){
-                FluRouter.navigate("/hotload")
+                 FluApp.navigate("/hotload")
            }
        }
        FluPaneItem{
            title: qsTr("Test Crash")
            onTapListener: function(){
                AppInfo.testCrash()
            }
            Component.onCompleted: {
                visible = FluTools.isWin()
            }
        }
    }
    function getRecentlyAddedData(){
        var arr = []
-        var items = navigationView.getItems();
+        for(var i=0;i<children.length;i++){
-        for(var i=0;i<items.length;i++){
+            var item = children[i]
-            var item = items[i]
+            if(item instanceof FluPaneItem && item.recentlyAdded){
            if(item instanceof FluPaneItem && item.extra && item.extra.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.extra.order-o1.extra.order })
+        arr.sort(function(o1,o2){ return o2.order-o1.order })
        return arr
    }
@ -518,7 +378,7 @@ FluObject{
        var items = navigationView.getItems();
        for(var i=0;i<items.length;i++){
            var item = items[i]
-            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyUpdated){
+            if(item instanceof FluPaneItem && item.recentlyUpdated){
                arr.push(item)
            }
        }
@ -526,9 +386,6 @@ FluObject{
    }
    function getSearchData(){
        if(!navigationView){
            return
        }
        var arr = []
        var items = navigationView.getItems();
        for(var i=0;i<items.length;i++){
--- a/example/qml/global/MainEvent.qml
+++ b/example/qml/global/MainEvent.qml
@ -0,0 +1,9 @@
 pragma Singleton
 import QtQuick
 import QtQuick.Controls
 import FluentUI
 QtObject {
    property int displayMode : FluNavigationViewType.Auto
 }
--- a/example/qml/global/qmldir
+++ b/example/qml/global/qmldir
@ -1,3 +1,3 @@
-singleton ItemsOriginal 1.0 ItemsOriginal.qml
+singleton ItemsOriginal 1.0 ItemsOriginal.qml
 singleton ItemsFooter 1.0 ItemsFooter.qml
-singleton GlobalModel 1.0 GlobalModel.qml
+singleton MainEvent 1.0 MainEvent.qml
--- a/example/qml/page/T_Acrylic.qml
+++ b/example/qml/page/T_Acrylic.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Acrylic")
+    title:"Acrylic"
    RowLayout{
        spacing: 10
        Layout.topMargin: 20
        FluText{
-            text: qsTr("tintColor:")
+            text:"tintColor:"
            Layout.alignment: Qt.AlignVCenter
        }
        FluColorPicker{
@ -22,7 +23,7 @@ FluScrollablePage{
    RowLayout{
        spacing: 10
        FluText{
-            text: qsTr("tintOpacity:")
+            text:"tintOpacity:"
            Layout.alignment: Qt.AlignVCenter
        }
        FluSlider{
@ -33,7 +34,7 @@ FluScrollablePage{
    RowLayout{
        spacing: 10
        FluText{
-            text: qsTr("blurRadius:")
+            text:"blurRadius:"
            Layout.alignment: Qt.AlignVCenter
        }
        FluSlider{
@ -41,19 +42,19 @@ FluScrollablePage{
            value: 32
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 1200/4+20
+        height: 1200/4+20
-        padding: 10
+        paddings: 10
        Layout.topMargin: 10
-        FluClip{
+        FluRectangle{
            width: 1920/4
            height: 1200/4
-            radius:[8,8,8,8]
+            radius:[15,15,15,15]
            Image {
                id:image
                asynchronous: true
-                source: "qrc:/example/res/image/bg_scenic.jpg"
+                source: "qrc:/example/res/image/bg_scenic.png"
                anchors.fill: parent
                sourceSize: Qt.size(2*width,2*height)
            }
@ -63,20 +64,19 @@ FluScrollablePage{
                width: 200
                height: 200
                tintOpacity: slider_tint_opacity.value/100
-                tintColor: color_picker.current
+                tintColor: color_picker.colorValue
                blurRadius: slider_blur_radius.value
                x:(image.width-width)/2
                y:(image.height-height)/2
                FluText {
                    anchors.centerIn: parent
-                    text: qsTr("Acrylic")
+                    text: "Acrylic"
                    color: "#FFFFFF"
-                    font: FluTextStyle.Subtitle
+                    font.bold: true
                }
                MouseArea {
                    property point clickPos: Qt.point(0,0)
                    id:drag_area
                    preventStealing: true
                    anchors.fill: parent
                    onPressed: (mouse)=>{
                                   clickPos = Qt.point(mouse.x, mouse.y)
@ -94,7 +94,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'Image{
    id:image
    width: 800
--- a/example/qml/page/T_Awesome.qml
+++ b/example/qml/page/T_Awesome.qml
@ -0,0 +1,71 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
 FluContentPage {
    title:"Awesome"
    FluTextBox{
        id:text_box
        placeholderText: "请输入关键字"
        anchors{
            topMargin: 20
            top:parent.top
        }
    }
    FluFilledButton{
        text:"搜索"
        anchors{
            left: text_box.right
            verticalCenter: text_box.verticalCenter
            leftMargin: 14
        }
        onClicked: {
            grid_view.model = FluApp.awesomelist(text_box.text)
        }
    }
    GridView{
        id:grid_view
        cellWidth: 80
        cellHeight: 80
        clip: true
        boundsBehavior: GridView.StopAtBounds
        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;
                    FluTools.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,30 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Badge")
+    title:"Badge"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        height: 120
+        Layout.topMargin: 20
-        padding: 10
+        height: 106
        paddings: 10
        Column{
            spacing: 15
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
                right: parent.right
            }
            FluText{
-                wrapMode: Text.WrapAnywhere
+                text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
                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")
            }
            Row{
                spacing: 20
                Rectangle{
@ -113,7 +112,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'Rectangle{
    width: 40
    height: 40
--- a/example/qml/page/T_BreadcrumbBar.qml
+++ b/example/qml/page/T_BreadcrumbBar.qml
@ -1,27 +1,28 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("BreadcurmbBar")
+    title:"BreadcurmbBar"
    Component.onCompleted: {
        var items = []
        for(var i=0;i<10;i++){
-            items.push({title: qsTr("Item_%1").arg(i+1)})
+            items.push({title:"Item_"+(i+1)})
        }
        breadcrumb_1.items = items
        breadcrumb_2.items = items
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluBreadcrumbBar{
            id:breadcrumb_1
@ -35,10 +36,10 @@ FluScrollablePage{
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 100
+        height: 100
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        ColumnLayout{
@ -47,11 +48,11 @@ FluScrollablePage{
            spacing: 10
            FluFilledButton{
-                text: qsTr("Reset sample")
+                text:"Reset sample"
                onClicked:{
                    var items = []
                    for(var i=0;i<10;i++){
-                        items.push({title: qsTr("Item_")+(i+1)})
+                        items.push({title:"Item_"+(i+1)})
                    }
                     breadcrumb_2.items = items
                }
@ -65,6 +66,7 @@ FluScrollablePage{
                Layout.fillWidth: true
                onClickItem:
                    (model)=>{
                        //不是点击最后一个item元素
                        if(model.index+1!==count()){
                            breadcrumb_2.remove(model.index+1,count()-model.index-1)
                        }
@ -76,7 +78,7 @@ FluScrollablePage{
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluBreadcrumbBar{
    width:parent.width
    separator:">"
--- a/example/qml/page/T_Buttons.qml
+++ b/example/qml/page/T_Buttons.qml
@ -1,27 +1,30 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import QtQuick.Controls.Basic
-import "../component"
+import FluentUI
 import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Buttons")
+    title:"Buttons"
    FluText{
-        text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
+        Layout.topMargin: 20
        text:"支持Tab键切换焦点，空格键执行点击事件"
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        Layout.topMargin: 10
+        paddings: 10
-        padding: 10
+        Layout.topMargin: 20
        FluTextButton{
-            disabled: text_button_switch.checked
+            disabled:text_button_switch.checked
-            text: qsTr("Text Button")
+            text:"Text Button"
            contentDescription: "文本按钮"
            onClicked: {
                showInfo("点击Text Button")
            }
@ -31,17 +34,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id: text_button_switch
+            id:text_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluTextButton{
    text:"Text Button"
    onClicked: {
@ -50,17 +53,17 @@ FluScrollablePage{
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluButton{
-            disabled: button_switch.checked
+            disabled:button_switch.checked
-            text: qsTr("Standard Button")
+            text:"Standard Button"
            onClicked: {
-                showInfo(qsTr("Click StandardButton"))
+                showInfo("点击StandardButton")
            }
            anchors{
                verticalCenter: parent.verticalCenter
@ -68,17 +71,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id: button_switch
+            id:button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluButton{
    text:"Standard Button"
    onClicked: {
@ -87,17 +90,17 @@ FluScrollablePage{
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
        Layout.topMargin: 20
-        padding: 10
+        paddings: 10
        FluFilledButton{
-            disabled: filled_button_switch.checked
+            disabled:filled_button_switch.checked
-            text: qsTr("Filled Button")
+            text:"Filled Button"
            onClicked: {
-                showWarning(qsTr("Click FilledButton"))
+                showWarning("点击FilledButton"+height)
            }
            anchors{
                verticalCenter: parent.verticalCenter
@ -105,17 +108,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id: filled_button_switch
+            id:filled_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluFilledButton{
    text:"Filled Button"
    onClicked: {
@ -124,32 +127,32 @@ FluScrollablePage{
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
        Layout.topMargin: 20
-        padding: 10
+        paddings: 10
        FluToggleButton{
            disabled:toggle_button_switch.checked
-            text: qsTr("Toggle Button")
+            text:"Toggle Button"
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
        }
        FluToggleSwitch{
-            id: toggle_button_switch
+            id:toggle_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluToggleButton{
    text:"Toggle Button"
    onClicked: {
@ -158,171 +161,36 @@ FluScrollablePage{
 }'
    }
    Timer{
        id: timer_progress
        interval: 200
        onTriggered: {
            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
            if(btn_progress.progress==1){
                timer_progress.stop()
            }else{
                timer_progress.start()
            }
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
        paddings: 10
        Layout.topMargin: 20
-        padding: 10
+        FluIconButton{
-
+            iconSource:FluentIcons.ChromeCloseContrast
-        FluProgressButton{
+            disabled:icon_button_switch.checked
-            id: btn_progress
+            iconSize: 15
            disabled: progress_button_switch.checked
            text: qsTr("Progress Button")
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
-            onClicked: {
+            onClicked:{
-                btn_progress.progress = 0
+                showSuccess("点击IconButton")
                timer_progress.restart()
            }
        }
        FluToggleSwitch{
-            id: progress_button_switch
+            id:icon_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluProgressButton{
    text:"Progress Button"
    onClicked: {
    }
 }'
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 68
        Layout.topMargin: 20
        padding: 10
        FluLoadingButton{
            id: btn_loading
            loading: loading_button_switch.checked
            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Loading Button")
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            onClicked: {
            }
        }
        FluToggleSwitch{
            id: loading_button_switch
            checked: true
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Normal")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluLoadingButton{
    text:"Loading Button"
    onClicked: {
    }
 }'
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: layout_icon_button.height + 30
        padding: 10
        Layout.topMargin: 20
        Flow{
            id: layout_icon_button
            spacing: 10
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
                right: icon_button_switch.left
            }
            FluIconButton{
                disabled: icon_button_switch.checked
                iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
                onClicked:{
                    showSuccess(qsTr("Click IconButton"))
                }
            }
            FluIconButton{
                iconSource: FluentIcons.ChromeCloseContrast
                disabled: icon_button_switch.checked
                iconSize: 15
                text: qsTr("IconOnly")
                display: Button.IconOnly
                onClicked:{
                    showSuccess(qsTr("Button.IconOnly"))
                }
            }
            FluIconButton{
                iconSource: FluentIcons.ChromeCloseContrast
                disabled: icon_button_switch.checked
                iconSize: 15
                text: qsTr("TextOnly")
                display: Button.TextOnly
                onClicked:{
                    showSuccess(qsTr("Button.TextOnly"))
                }
            }
            FluIconButton{
                iconSource: FluentIcons.ChromeCloseContrast
                disabled: icon_button_switch.checked
                iconSize: 15
                text: qsTr("TextBesideIcon")
                display: Button.TextBesideIcon
                onClicked:{
                    showSuccess(qsTr("Button.TextBesideIcon"))
                }
            }
            FluIconButton{
                iconSource: FluentIcons.ChromeCloseContrast
                disabled: icon_button_switch.checked
                iconSize: 15
                text: qsTr("TextUnderIcon")
                display: Button.TextUnderIcon
                onClicked:{
                    showSuccess(qsTr("Button.TextUnderIcon"))
                }
            }
        }
        FluToggleSwitch{
            id: icon_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluIconButton{
    iconSource:FluentIcons.ChromeCloseContrast
    onClicked: {
@ -331,46 +199,46 @@ FluScrollablePage{
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluDropDownButton{
-            disabled: drop_down_button_switch.checked
+            disabled:drop_down_button_switch.checked
-            text: qsTr("DropDownButton")
+            text:"DropDownButton"
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluMenuItem{
-                text: qsTr("Menu_1")
+                text:"Menu_1"
            }
            FluMenuItem{
-                text: qsTr("Menu_2")
+                text:"Menu_2"
            }
            FluMenuItem{
-                text: qsTr("Menu_3")
+                text:"Menu_3"
            }
            FluMenuItem{
-                text: qsTr("Menu_4")
+                text:"Menu_4"
                onClicked: {
                }
            }
        }
        FluToggleSwitch{
-            id: drop_down_button_switch
+            id:drop_down_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluDropDownButton{
    text:"DropDownButton"
    FluMenuItem{
@ -388,10 +256,10 @@ FluScrollablePage{
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 100
+        height: 100
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluRadioButtons{
            spacing: 8
@ -399,29 +267,31 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            disabled: radio_button_switch.checked
            FluRadioButton{
-                text: qsTr("Radio Button_1")
+                disabled:radio_button_switch.checked
                text:"Radio Button_1"
            }
            FluRadioButton{
-                text: qsTr("Radio Button_2")
+                disabled:radio_button_switch.checked
                text:"Radio Button_2"
            }
            FluRadioButton{
-                text: qsTr("Radio Button_3")
+                disabled:radio_button_switch.checked
                text:"Radio Button_3"
            }
        }
        FluToggleSwitch{
-            id: radio_button_switch
+            id:radio_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluRadioButton{
    checked:true
    text:"Text Button"
--- a/example/qml/page/T_CalendarPicker.qml
+++ b/example/qml/page/T_CalendarPicker.qml
@ -1,33 +1,47 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("CalendarPicker")
+    title:"CalendarPicker"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 80
+        Layout.topMargin: 20
-        padding: 10
+        height: 350
        paddings: 10
        FluCalendarView{
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -1
        code:'FluCalendarView{
 }'
    }
    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
        height: 80
        paddings: 10
        ColumnLayout{
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluCalendarPicker{
                onAccepted:{
                    showSuccess(current.toLocaleString())
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluCalendarPicker{
 }'
--- a/example/qml/page/T_Captcha.qml
+++ b/example/qml/page/T_Captcha.qml
@ -1,59 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Captcha")
    FluCaptcha{
        id: captcha
        ignoreCase:switch_case.checked
        MouseArea{
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: {
                captcha.refresh()
            }
        }
    }
    FluButton{
        text: qsTr("Refresh")
        Layout.topMargin: 20
        onClicked: {
            captcha.refresh()
        }
    }
    FluToggleSwitch{
        id: switch_case
        text: qsTr("Ignore Case")
        checked: true
        Layout.topMargin: 10
    }
    RowLayout{
        spacing: 10
        Layout.topMargin: 10
        FluTextBox{
            id:text_box
            placeholderText: qsTr("Please enter a verification code")
            Layout.preferredWidth: 240
        }
        FluButton{
            text: qsTr("verify")
            onClicked: {
                var success =  captcha.verify(text_box.text)
                if(success){
                    showSuccess(qsTr("The verification code is correct"))
                }else{
                    showError(qsTr("Error validation, please re-enter"))
                }
            }
        }
    }
 }
--- a/example/qml/page/T_Carousel.qml
+++ b/example/qml/page/T_Carousel.qml
@ -1,31 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Carousel")
+    title:"Carousel"
-    ListModel{
+    FluArea{
        id:data_model
        ListElement{
            url:"qrc:/example/res/image/banner_1.jpg"
        }
        ListElement{
            url:"qrc:/example/res/image/banner_2.jpg"
        }
        ListElement{
            url:"qrc:/example/res/image/banner_3.jpg"
        }
    }
    FluFrame{
        Layout.fillWidth: true
        height: 370
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
            spacing: 15
            anchors{
@ -33,195 +21,26 @@ FluScrollablePage{
                left:parent.left
            }
            FluText{
-                text: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
+                text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
            }
-            Item{
+            FluCarousel{
-                width: 400
+                id:carousel
-                height: 300
+                Layout.topMargin: 20
-                FluShadow{
+                Layout.leftMargin: 5
-                    radius: 8
+                Component.onCompleted: {
                    carousel.setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
                }
                FluCarousel{
                    anchors.fill: parent
                    delegate: Component{
                        Image {
                            anchors.fill: parent
                            source: model.url
                            asynchronous: true
                            fillMode:Image.PreserveAspectCrop
                        }
                    }
                    Layout.topMargin: 20
                    Layout.leftMargin: 5
                    Component.onCompleted: {
                        model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
                    }
                }
            }
        }
    }
    FluFrame{
        Layout.fillWidth: true
        height: 340
        padding: 10
        Layout.topMargin: 10
        Column{
            spacing: 15
            anchors{
                verticalCenter: parent.verticalCenter
                left:parent.left
            }
            Item{
                width: 400
                height: 300
                FluShadow{
                    radius: 8
                }
                FluCarousel{
                    anchors.fill: parent
                    loopTime:1500
                    indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
                    indicatorMarginTop:15
                    delegate: Component{
                        Item{
                            anchors.fill: parent
                            Image {
                                anchors.fill: parent
                                source: model.url
                                asynchronous: true
                                fillMode:Image.PreserveAspectCrop
                            }
                            Rectangle{
                                height: 40
                                width: parent.width
                                anchors.bottom: parent.bottom
                                color: "#33000000"
                                FluText{
                                    anchors.fill: parent
                                    verticalAlignment: Qt.AlignVCenter
                                    horizontalAlignment: Qt.AlignHCenter
                                    text:model.title
                                    color: FluColors.Grey10
                                }
                            }
                        }
                    }
                    Layout.topMargin: 20
                    Layout.leftMargin: 5
                    Component.onCompleted: {
                        var arr = []
                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
                        model = arr
                    }
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluCarousel{
    id:carousel
    width: 400
    height: 300
    delegate: Component{
        Image {
            anchors.fill: parent
            source: model.url
            asynchronous: true
            fillMode:Image.PreserveAspectCrop
        }
    }
    Component.onCompleted: {
        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
    }
 }'
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 300 + topPadding + bottomPadding
        padding: 10
        Layout.topMargin: 10
        RowLayout{
            anchors.fill: parent
            Item{
                Layout.preferredWidth: 400
                Layout.fillHeight: true
                FluShadow{
                    radius: 8
                }
                FluCarousel{
                    anchors.fill: parent
                    orientation: Qt.Vertical
                    autoPlay: auto_play_switch.checked
                    loopTime:1500
                    indicatorGravity: Qt.AlignVCenter | Qt.AlignRight
                    indicatorMarginTop:15
                    delegate: Component{
                        Item{
                            anchors.fill: parent
                            Image {
                                anchors.fill: parent
                                source: model.url
                                asynchronous: true
                                fillMode:Image.PreserveAspectCrop
                            }
                            Rectangle{
                                height: 40
                                width: parent.width
                                anchors.bottom: parent.bottom
                                color: "#33000000"
                                FluText{
                                    anchors.fill: parent
                                    verticalAlignment: Qt.AlignVCenter
                                    horizontalAlignment: Qt.AlignHCenter
                                    text:model.title
                                    color: FluColors.Grey10
                                }
                            }
                        }
                    }
                    Layout.topMargin: 20
                    Layout.leftMargin: 5
                    Component.onCompleted: {
                        var arr = []
                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
                        model = arr
                    }
                }
            }
            FluToggleSwitch{
                id: auto_play_switch
                Layout.alignment: Qt.AlignRight
                text: qsTr("Auto play")
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluCarousel{
    id:carousel
    width: 400
    height: 300
    orientation: Qt.Vertical
    delegate: Component{
        Image {
            anchors.fill: parent
            source: model.url
            asynchronous: true
            fillMode:Image.PreserveAspectCrop
        }
    }
    Component.onCompleted: {
-        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+        setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
    }
 }'
    }
--- a/example/qml/page/T_CheckBox.qml
+++ b/example/qml/page/T_CheckBox.qml
@ -1,113 +1,50 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("CheckBox")
+    title:"CheckBox"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 72
+        height: 68
-        padding: 10
+        paddings: 10
-
+        Layout.topMargin: 20
        FluText{
            text: qsTr("A 2-state CheckBox")
        }
        Row{
            spacing: 30
-            anchors{
+            anchors.verticalCenter: parent.verticalCenter
-                top: parent.top
+            FluCheckBox{
-                topMargin: 30
+                disabled: check_box_switch.checked
            }
            FluCheckBox{
-                disabled: check_box_switch_two.checked
+                disabled: check_box_switch.checked
                text:"Right"
            }
            FluCheckBox{
-                disabled: check_box_switch_two.checked
+                disabled: check_box_switch.checked
-                text: qsTr("Right")
+                text:"Left"
            }
            FluCheckBox{
                disabled: check_box_switch_two.checked
                text: qsTr("Left")
                textRight: false
            }
        }
        FluToggleSwitch{
-            id:check_box_switch_two
+            id:check_box_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluCheckBox{
    text:"Text"
 }'
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 72
        padding: 10
        Layout.topMargin: 20
        FluText{
            text: qsTr("A 3-state CheckBox")
        }
        Row{
            spacing: 30
            anchors{
                top: parent.top
                topMargin: 30
            }
            FluCheckBox{
                property int count: 1
                text: qsTr("Three State")
                disabled: check_box_switch_three.checked
                clickListener: function(){
                    var flag = count%3
                    if(flag === 0){
                        checked = false
                        indeterminate = false
                    }
                    if(flag === 1){
                        checked = true
                        indeterminate = false
                    }
                    if(flag === 2){
                        checked = true
                        indeterminate = true
                    }
                    count++
                }
            }
        }
        FluToggleSwitch{
            id:  check_box_switch_three
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluCheckBox{
    text:"Text"
    indeterminate:true
 }'
    }
 }
--- a/example/qml/page/T_Clip.qml
+++ b/example/qml/page/T_Clip.qml
@ -1,105 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Clip")
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 380
        padding: 10
        Column{
            spacing: 15
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluText{
                text: qsTr("Use with images (this component will have no effect under software rendering)")
                Layout.topMargin: 20
            }
            RowLayout{
                spacing: 14
                FluClip{
                    width: 50
                    height: 50
                    radius: [25,0,25,25]
                    Image {
                        asynchronous: true
                        anchors.fill: parent
                        source: "qrc:/example/res/svg/avatar_1.svg"
                        sourceSize: Qt.size(width,height)
                    }
                }
                FluClip{
                    width: 50
                    height: 50
                    radius: [10,10,10,10]
                    Image {
                        asynchronous: true
                        anchors.fill: parent
                        sourceSize: Qt.size(width,height)
                        source: "qrc:/example/res/svg/avatar_2.svg"
                    }
                }
                FluClip{
                    width: 50
                    height: 50
                    radius: [25,25,25,25]
                    Image {
                        asynchronous: true
                        anchors.fill: parent
                        sourceSize: Qt.size(width,height)
                        source: "qrc:/example/res/svg/avatar_3.svg"
                    }
                }
                FluClip{
                    width: 50
                    height: 50
                    radius: [0,25,25,25]
                    Image {
                        asynchronous: true
                        anchors.fill: parent
                        sourceSize: Qt.size(width,height)
                        source: "qrc:/example/res/svg/avatar_4.svg"
                    }
                }
            }
            FluClip{
                width: 1920/5
                height: 1200/5
                radius: [8,8,8,8]
                Image {
                    asynchronous: true
                    source: "qrc:/example/res/image/banner_1.jpg"
                    anchors.fill: parent
                    sourceSize: Qt.size(2*width,2*height)
                }
                Layout.topMargin: 20
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluClip{
    radius: [25,25,25,25]
    width: 50
    height: 50
    Image{
        asynchronous: true
        anchors.fill: parent
        source: "qrc:/example/res/svg/avatar_4.svg"
        sourceSize: Qt.size(width,height)
    }
 }'
    }
 }
--- a/example/qml/page/T_ColorPicker.qml
+++ b/example/qml/page/T_ColorPicker.qml
@ -1,32 +1,69 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("ColorPicker")
+    title:"ColorPicker"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 60
+        height: 280
-        padding: 10
+        Layout.topMargin: 20
-        RowLayout{
+        paddings: 10
-            FluText{
+        ColumnLayout{
-                text: qsTr("Click to Select a Color - >")
+            anchors{
-                Layout.alignment: Qt.AlignVCenter
+                verticalCenter: parent.verticalCenter
                left:parent.left
            }
            FluText{
                text:"此颜色组件是Github上的开源项目"
            }
            FluTextButton{
                text:"https://github.com/rshest/qml-colorpicker"
                onClicked: {
                    Qt.openUrlExternally(text)
                }
            }
            FluColorView{
            }
            FluColorPicker{}
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        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
        Layout.topMargin: -1
        code:'FluColorPicker{
 }'
    }
 }
--- a/example/qml/page/T_ComboBox.qml
+++ b/example/qml/page/T_ComboBox.qml
@ -1,105 +1,81 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("ComboBox")
+    title:"ComboBox"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 80
+        height: 80
-        padding: 5
+        paddings: 5
        Layout.topMargin: 20
        Column{
            spacing: 5
            anchors.verticalCenter: parent.verticalCenter
            FluText{
-                text: qsTr("editable=false")
+                text: "editable=false"
                x:10
            }
            FluComboBox {
                model: ListModel {
                    id: model_1
-                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: "Banana" }
-                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: "Apple" }
-                    ListElement { text: qsTr("Coconut") }
+                    ListElement { text: "Coconut" }
                }
            }
        }
    }
-    FluFrame {
+    FluArea{
        Layout.fillWidth: true
        Layout.preferredHeight: 80
        padding: 5
        Layout.topMargin: 20
        Column{
            spacing: 5
            anchors.verticalCenter: parent.verticalCenter
            FluText{
                text: qsTr("disabled=true")
                x:10
            }
            FluComboBox {
                disabled: true
                model: ListModel {
                    id: model_2
                    ListElement { text: qsTr("Banana") }
                    ListElement { text: qsTr("Apple") }
                    ListElement { text: qsTr("Coconut") }
                }
            }
        }
    }
    FluFrame{
        Layout.fillWidth: true
        height: 80
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
            spacing: 5
            anchors.verticalCenter: parent.verticalCenter
            FluText{
-                text: qsTr("editable=true")
+                text: "editable=true"
                x:5
            }
            FluComboBox {
                editable: true
                font:FluTextStyle.BodyStrong
                model: ListModel {
-                    id: model_3
+                    id: model_2
-                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: "Banana" }
-                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: "Apple" }
-                    ListElement { text: qsTr("Coconut") }
+                    ListElement { text: "Coconut" }
                }
                onAccepted: {
                    if (find(editText) === -1)
-                        model_3.append({text: editText})
+                        model_2.append({text: editText})
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
-        code:qsTr('FluComboBox{
+        code:'FluComboBox{
    editable: true
    model: ListModel {
        id: model
-        ListElement { text: "%1" }
+        ListElement { text: "Banana" }
-        ListElement { text: "%2" }
+        ListElement { text: "Apple" }
-        ListElement { text: "%3" }
+        ListElement { text: "Coconut" }
    }
    onAccepted: {
        if (find(editText) === -1)
            model.append({text: editText})
    }
-}').arg(qsTr("Banana"))
+}'
   .arg(qsTr("Apple"))
   .arg(qsTr("Coconut"))
    }
 }
--- a/example/qml/page/T_CustomPlot.qml
+++ b/example/qml/page/T_CustomPlot.qml
@ -1,49 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluPage{
    title: qsTr("QCustomPlot")
    TimePlot {
        id: timePlot
        anchors.fill: parent
        plotTimeRangeInMilliseconds: 10
        xAxis.visible: true
        yAxis.visible: true
        x1Axis.visible: false
        y1Axis.visible: false
        yAxis.ticker.tickCount: 6
        yAxis.ticker.ticks: false
        yAxis.ticker.subTicks: false
        yAxis.ticker.baseColor: "transparent"
        yAxis.grid.lineColor: "mediumaquamarine"
        xAxis.ticker.baseColor: "midnightblue"
        xAxis.ticker.baseWidth: 2
        xAxis.grid.lineColor: "transparent"
        backgroundColor: "mistyrose"
        Component.onCompleted: {
            yAxis.setRange(0, 100)
            addGraph("1")
            graphs["1"].graphColor = "slategrey"
        }
    }
    Timer {
        running: true
        repeat: true
        interval: 20
        property int data: 60
        onTriggered: {
            data = data - 1
            if(data == 20) {
                data = 60
            }
            timePlot.addCurrentTimeValue("1", data)
        }
    }
 }
--- a/example/qml/page/T_DatePicker.qml
+++ b/example/qml/page/T_DatePicker.qml
@ -1,29 +1,29 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("DatePicker")
+    title:"TimePicker"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 80
+        Layout.topMargin: 20
-        padding: 10
+        height: 80
        paddings: 10
        ColumnLayout{
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluText{
-                text: qsTr("showYear=true")
+                text:"showYear=true"
            }
            FluDatePicker{
-                current: new Date()
+                onCurrentChanged: {
                onAccepted: {
                    showSuccess(current.toLocaleDateString())
                }
            }
@ -31,28 +31,29 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluDatePicker{
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        Layout.preferredHeight: 80
+        height: 80
-        padding: 10
+        paddings: 10
        ColumnLayout{
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            FluText{
-                text: qsTr("showYear=false")
+                text:"showYear=false"
            }
            FluDatePicker{
-                showYear: false
+                showYear:false
-                onAccepted: {
+                onCurrentChanged: {
                    showSuccess(current.toLocaleDateString())
                }
            }
@ -60,7 +61,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluDatePicker{
    showYear:false
 }'
--- a/example/qml/page/T_Dialog.qml
+++ b/example/qml/page/T_Dialog.qml
@ -1,21 +1,23 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Dialog")
+    title:"Dialog"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluButton{
            anchors.verticalCenter: parent.verticalCenter
-            text: qsTr("Show Double Button Dialog")
+            Layout.topMargin: 20
            text:"Show Double Button Dialog"
            onClicked: {
                double_btn_dialog.open()
            }
@ -23,47 +25,48 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluContentDialog{
    id:dialog
-    title: qsTr("Friendly Reminder")
+    title:"友情提示"
-    message: qsTr("Are you sure you want to opt out?")
+    message:"确定要退出程序么？"
-    negativeText: qsTr("Cancel")
+    negativeText:"取消"
    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
    onNegativeClicked:{
-        showSuccess(qsTr("Click the Cancel Button"))
+        showSuccess("点击取消按钮")
    }
-    positiveText: qsTr("OK")
+    positiveText:"确定"
    onPositiveClicked:{
-        showSuccess(qsTr("Click the OK Button"))
+        showSuccess("点击确定按钮")
-        }
+    }
    }
    dialog.open()'
    }
    FluContentDialog{
        id:double_btn_dialog
-        title: qsTr("Friendly Reminder")
+        title:"友情提示"
-        message: qsTr("Are you sure you want to opt out?")
+        message:"确定要退出程序么？"
        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: qsTr("Cancel")
+        negativeText:"取消"
-        onNegativeClicked: {
+        onNegativeClicked:{
-            showSuccess(qsTr("Click the Cancel Button"))
+            showSuccess("点击取消按钮")
        }
-        positiveText: qsTr("OK")
+        positiveText:"确定"
        onPositiveClicked:{
-            showSuccess(qsTr("Click the OK Button"))
+            showSuccess("点击确定按钮")
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluButton{
            anchors.verticalCenter: parent.verticalCenter
-            text: qsTr("Show Triple Button Dialog")
+            Layout.topMargin: 20
            text:"Show Triple Button Dialog"
            onClicked: {
                triple_btn_dialog.open()
            }
@ -71,161 +74,45 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluContentDialog{
-    id: dialog
+    id:dialog
-    title: qsTr("Friendly Reminder")
+    title:"友情提示"
-    message: qsTr("Are you sure you want to opt out?")
+    message:"确定要退出程序么？"
-    negativeText: qsTr("Cancel")
+    negativeText:"取消"
    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    negativeText: qsTr("Cancel")
+    negativeText:"取消"
-    onNegativeClicked: {
+    onNegativeClicked:{
-        showSuccess(qsTr("Click the Cancel Button"))
+        showSuccess("点击取消按钮")
    }
-    positiveText: qsTr("OK")
+    positiveText:"确定"
-    onPositiveClicked: {
+    onPositiveClicked:{
-        showSuccess(qsTr("Click the OK Button"))
+        showSuccess("点击确定按钮")
    }
-    neutralText: qsTr("Minimize")
+    neutralText:"最小化"
-    onNeutralClicked: {
+    onNeutralClicked:{
-        showSuccess(qsTr("Click Minimize"))
+        showSuccess("点击最小化按钮")
        }
    }
    dialog.open()'
    }
    FluContentDialog{
-        id: triple_btn_dialog
+        id:triple_btn_dialog
-        title: qsTr("Friendly Reminder")
+        title:"友情提示"
-        message: qsTr("Are you sure you want to opt out?")
+        message:"确定要退出程序么？"
        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: qsTr("Cancel")
+        negativeText:"取消"
-        onNegativeClicked: {
+        onNegativeClicked:{
-            showSuccess(qsTr("Click the Cancel Button"))
+            showSuccess("点击取消按钮")
        }
-        positiveText: qsTr("OK")
+        positiveText:"确定"
-        onPositiveClicked: {
+        onPositiveClicked:{
-            showSuccess(qsTr("Click the OK Button"))
+            showSuccess("点击确定按钮")
        }
-        neutralText: qsTr("Minimize")
+        neutralText:"最小化"
-        onNeutralClicked: {
+        onNeutralClicked:{
-            showSuccess(qsTr("Click Minimize"))
+            showSuccess("点击最小化按钮")
        }
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 100
        padding: 10
        Layout.topMargin: 20
        FluButton{
            anchors.top: parent.top
            anchors.topMargin: 5
            text: qsTr("Custom Content Dialog")
            onClicked: {
                custom_btn_dialog.open()
            }
        }
        FluButton{
            anchors.top: parent.top
            anchors.topMargin: 48
            text: qsTr("Custom Content Dialog2")
            onClicked: {
                custom_btn_dialog2.open()
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluContentDialog{
    id: dialog
    title: qsTr("Friendly Reminder")
    message: qsTr("Data is loading, please wait...")
    negativeText: qsTr("Unload")
    contentDelegate: Component{
        Item{
            width: parent.width
            height: 80
            FluProgressRing{
                anchors.centerIn: parent
            }
        }
    }
    onNegativeClicked: {
        showSuccess(qsTr("Click the Cancel Button"))
    }
    positiveText :qsTr("OK")
    onPositiveClicked: {
        showSuccess(qsTr("Click the OK Button"))
        }
    }
    dialog.open()'
    }
    FluContentDialog{
        id: custom_btn_dialog
        title: qsTr("Friendly Reminder")
        message: qsTr("Data is loading, please wait...")
        negativeText: qsTr("Unload")
        contentDelegate: Component{
            Item{
                implicitWidth: parent.width
                implicitHeight: 80
                FluProgressRing{
                    anchors.centerIn: parent
                }
            }
        }
        onNegativeClicked: {
            showSuccess(qsTr("Click the Cancel Button"))
        }
        positiveText: qsTr("OK")
        onPositiveClickListener: function(){
            showError(qsTr("Test the InfoBar level on top of the Popup"))
        }
    }
    FluContentDialog{
        id:custom_btn_dialog2
        title: qsTr("Line Chart")
        contentDelegate: Component{
            Item{
                implicitWidth: parent.width
                implicitHeight: 300
                FluChart{
                    anchors.fill: parent
                    chartType: 'line'
                    chartData: { return {
                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                            datasets: [{
                                    label: 'My First Dataset',
                                    data: [65, 59, 80, 81, 56, 55, 40],
                                    fill: false,
                                    borderColor: 'rgb(75, 192, 192)',
                                    tension: 0.1
                                }]
                        }
                    }
                    chartOptions: { return {
                            maintainAspectRatio: false,
                            title: {
                                display: true,
                                text: 'Chart.js Line Chart - Stacked'
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false
                            }
                        }
                    }
                }
            }
        }
        buttonFlags: FluContentDialogType.PositiveButton
        positiveText: qsTr("OK")
        onPositiveClicked: {
            showSuccess(qsTr("Click the OK Button"))
        }
    }
 }
--- a/example/qml/page/T_Expander.qml
+++ b/example/qml/page/T_Expander.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Expander")
+    title:"Expander"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        height: layout_column.height+20
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
            id:layout_column
            spacing: 15
@ -22,7 +23,7 @@ FluScrollablePage{
            }
            FluExpander{
-                headerText: qsTr("Open a radio box")
+                headerText:"打开一个单选框"
                Layout.topMargin: 20
                Item{
                    anchors.fill: parent
@ -49,7 +50,7 @@ FluScrollablePage{
            FluExpander{
                Layout.topMargin: 20
-                headerText: qsTr("Open a sliding text box")
+                headerText:"打开一个滑动文本框"
                Item{
                    anchors.fill: parent
                    Flickable{
@ -57,7 +58,6 @@ FluScrollablePage{
                        width: parent.width
                        height: parent.height
                        contentWidth: width
                        boundsBehavior: Flickable.StopAtBounds
                        contentHeight: text_info.height
                        ScrollBar.vertical: FluScrollBar {}
                        FluText{
@ -65,14 +65,7 @@ FluScrollablePage{
                            width: scrollview.width
                            wrapMode: Text.WrapAnywhere
                            padding: 14
-                            text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work, the restoration of Han. Today, the empire is still divided in three, and our very survival is threatened. Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you. This is the moment to extend your divine influence, to honour the memory of the late Emperor and strengthen the morale of your officers. It is not time to listen to bad advice, or close your ears to the suggestions of loyal men.
+                            text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
 The court and the administration are as one. Both must be judged by one standard. Those who are loyal and good must get what they deserve, but so must the evil-doers who break the law. This will demonstrate the justice of your rule. There cannot be one law for the court and another for the administration.
 Counselors and attendants like Guo Youzhi, Fei Yi, and Dong Yun are all reliable men, loyal of purpose and pure in motive. The late Emperor selected them for office so that they would serve you after his death.These are the men who should be consulted on all palace affairs. Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
 Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
 The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin. Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling. Advisors like Guo Youzhi, Fei Yi, Chen Zhen, Zhang Yi, and Jiang Wan – these are all men of great integrity and devotion. I encourage you to trust them, your majesty, if the house of Han is to rise again.
 I begin as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble. The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service. Now twenty-one years has passed, the late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
 Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond. Now the south has been subdued, and our forces are fully armed.I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.This the way I mean to honor my debt to the late Emperor and fulfill my duty to you. Guo Youzhi, Fei Yi, and Dong Yun are the ones who should be making policy decisions and recommendations.
 My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor. If those three advisors should fail in their duties, then they should be punished for their negligence.Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.")
                        }
                    }
                }
@ -82,9 +75,9 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluExpander{
-    headerText: qsTr("Open a radio box")
+    headerText:"打开一个单选框"
    Item{
        anchors.fill: parent
        Flickable{
@ -98,154 +91,12 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
                width: scrollview.width
                wrapMode: Text.WrapAnywhere
                padding: 14
-                text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
+                text:"先帝创业未半而中道崩殂，今天下三分......""
            }
        }
    }
 }'
    }
    FluFrame {
        Layout.fillWidth: true
        padding: 10
        Layout.topMargin: 20
        Column {
            spacing: 15
            FluExpander {
                headerHeight: 60
                contentHeight: content_layout.implicitHeight
                headerDelegate: Component {
                    Item {
                        RowLayout {
                            anchors {
                                verticalCenter: parent.verticalCenter
                                left: parent.left
                                leftMargin: 15
                            }
                            spacing: 15
                            FluImage {
                                width: 20
                                height: 20
                                sourceSize.width: 20
                                sourceSize.height: 20
                                source: "qrc:/example/res/image/favicon.ico"
                            }
                            ColumnLayout {
                                spacing: 0
                                FluText {
                                    text: "FluentUI"
                                }
                                FluText {
                                    text: "%1".arg(AppInfo.version)
                                    textColor: FluTheme.fontSecondaryColor
                                    font.pixelSize: 12
                                }
                            }
                        }
                        FluLoadingButton {
                            id: btn_checkupdate
                            anchors {
                                verticalCenter: parent.verticalCenter
                                right: parent.right
                                rightMargin: 15
                            }
                            text: qsTr("Check for Updates")
                            onClicked: {
                                loading = true;
                                FluEventBus.post("checkUpdate");
                            }
                        }
                        FluEvent {
                            name: "checkUpdateFinish"
                            onTriggered: {
                                btn_checkupdate.loading = false;
                            }
                        }
                    }
                }
                content: ColumnLayout {
                    id: content_layout
                    spacing: 0
                    RowLayout {
                        Layout.topMargin: 15
                        Layout.leftMargin: 15
                        spacing: 0
                        FluText {
                            text: "GitHub: "
                        }
                        FluTextButton {
                            text: "https://github.com/zhuzichu520/FluentUI"
                            onClicked: {
                                Qt.openUrlExternally(text);
                            }
                        }
                    }
                    RowLayout {
                        Layout.bottomMargin: 15
                        Layout.leftMargin: 15
                        spacing: 0
                        FluText {
                            text: "bilibili: "
                        }
                        FluTextButton {
                            text: "https://www.bilibili.com/video/BV1mg4y1M71w"
                            onClicked: {
                                Qt.openUrlExternally(text);
                            }
                        }
                    }
                }
            }
            FluExpander {
                contentHeight: 100
                headerHeight: 45
                headerDelegate: Component {
                    Item {
                        FluToggleButton {
                            anchors.centerIn: parent
                            text: qsTr("This is a ToggleButton in the header")
                        }
                    }
                }
                content: Item {
                    anchors.fill: parent
                    FluButton {
                        anchors.centerIn: parent
                        text: qsTr("This is a StandardButton in the content")
                        onClicked: {
                            showInfo(qsTr("Click StandardButton"))
                        }
                    }
                }
            }
        }
    }
    CodeExpander {
        Layout.fillWidth: true
        Layout.topMargin: -6
        code: 'FluExpander {
    contentHeight: 100
    headerHeight: 45
    headerDelegate: Component {
        Item {
            FluToggleButton {
                anchors.centerIn: parent
                text: qsTr("This is a ToggleButton in the header")
            }
        }
    }
    content: Item {
        anchors.fill: parent
        FluButton {
            anchors.centerIn: parent
            text: qsTr("This is a StandardButton in the content")
            onClicked: {
                showInfo(qsTr("Click StandardButton"))
            }
        }
    }
 }'
    }
 }
--- a/example/qml/page/T_FlipView.qml
+++ b/example/qml/page/T_FlipView.qml
@ -1,22 +1,23 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("FlipView")
+    title:"FlipView"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 340
+        height: 340
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        ColumnLayout{
            anchors.verticalCenter: parent.verticalCenter
            FluText{
-                text: qsTr("Horizontal FlipView")
+                text:"水平方向的FlipView"
            }
            FluFlipView{
                Image{
@ -39,7 +40,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluFlipView{
    Image{
        source: "qrc:/example/res/image/banner_1.jpg"
@ -60,15 +61,15 @@ FluScrollablePage{
 '
    }
-    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
@ -92,7 +93,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluFlipView{
    vertical:true
    Image{
--- a/example/qml/page/T_FluentPro.qml
+++ b/example/qml/page/T_FluentPro.qml
@ -1,65 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "../component"
 FluContentPage{
    title: "FluentUI Pro"
    Image{
        id: iamge_logo
        width: 80
        height: 80
        source: "qrc:/example/res/image/logo_pro.png"
    }
    Flickable{
        anchors{
            top: iamge_logo.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        ScrollBar.vertical: FluScrollBar {}
        ScrollBar.horizontal: FluScrollBar {}
        contentWidth: text.width
        contentHeight: text.height
        clip: true
        FluText{
            id: text
            textFormat: Text.MarkdownText
            onLinkActivated:
                (link)=> {
                    Qt.openUrlExternally(link)
                }
            onLinkHovered:
                (link)=> {
                    if(link === ""){
                        FluTools.restoreOverrideCursor()
                    }else{
                        FluTools.setOverrideCursor(Qt.PointingHandCursor)
                    }
                }
            text:'
 基于[FluentUI](https://github.com/zhuzichu520/FluentUI)开源版本重新打造的项目,代码更加漂亮,API更加好用,界面更加细腻
 ## 与开源版本有啥不同?
 1. 开源版本支持Qt6与Qt5.15.2,Pro版本仅支持Qt6
 2. 开源版本所有组件都有Flu前缀,Pro版本去掉Flu前缀,只需添加一行```qputenv("QT_QUICK_CONTROLS_STYLE", "FluentUI");```代码,就能将原有Button换成FluentUI样式
 3. 项目整体架构不同,开源版本代码都写在一个模块下,Pro版本分为FluentUI,FluentUI.Controls,FluentUI.impl三个模块
 4. 开源版本不支持热加载，Pro版本支持热加载，运行之后修改代码可实时关注QML界面变化，支持一键关闭开启
 5. 开源版不支持wasm编译，Pro版本支持wasm编译
 6. 开源版本过于臃肿，Pro版本做了减法，去其糟粕，取其精华，重新打造
 7. 开源版默认动态库依赖，Pro版本默认静态库依赖
 8. 开源版MIT协议免费，Pro版本付费，如有需要请联系作者wx购买：FluentUI
 ## 下载Pro版本
 [下载地址](https://github.com/zhuzichu520/FluentUI-Pro-Installer/releases)'
        }
    }
 }
--- a/example/qml/page/T_GroupBox.qml
+++ b/example/qml/page/T_GroupBox.qml
@ -1,80 +0,0 @@
 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"
 FluScrollablePage{
    title: qsTr("GroupBox")
    FluGroupBox {
        title: qsTr("CheckBox Group")
        ColumnLayout {
            spacing: 10
            anchors.fill: parent
            FluCheckBox { text: qsTr("E-mail") }
            FluCheckBox { text: qsTr("Calendar") }
            FluCheckBox { text: qsTr("Contacts") }
        }
    }
    FluGroupBox {
        title: qsTr("RadioButton Group")
        Layout.fillWidth: true
        Layout.preferredHeight: 150
        Layout.topMargin: 20
        FluRadioButtons {
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            spacing: 10
            disabled: radio_button_switch.checked
            FluRadioButton { text: qsTr("E-mail") }
            FluRadioButton { text: qsTr("Calendar") }
            FluRadioButton { text: qsTr("Contacts") }
        }
        FluToggleSwitch{
            id: radio_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: 4
        code:`
 FluGroupBox {
    title: qsTr("CheckBox Group")
    ColumnLayout {
        spacing: 10
        anchors.fill: parent
        FluCheckBox { text: qsTr("E-mail") }
        FluCheckBox { text: qsTr("Calendar") }
        FluCheckBox { text: qsTr("Contacts") }
    }
 }
 FluGroupBox {
    title: qsTr("RadioButton Group")
    FluRadioButtons {
        spacing: 10
        disabled: true // 禁用所有FluRadioButton子组件
        manuallyDisabled: true // 是否指定每个FluRadioButton上的disabled选项
        FluRadioButton { text: qsTr("E-mail") }
        FluRadioButton { text: qsTr("Calendar") }
        FluRadioButton { text: qsTr("Contacts") }
    }
 }
 `
    }
 }
--- a/example/qml/page/T_Home.qml
+++ b/example/qml/page/T_Home.qml
@ -1,56 +1,33 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import "qrc:///example/qml/global"
-import "../window"
+import FluentUI
 import "../global"
 FluScrollablePage{
    launchMode: FluPageType.SingleTask
-    animationEnabled: false
+    animDisabled: true
    header: Item{}
    ListModel{
-        id: model_header
+        id:model_header
        ListElement{
-            icon: "qrc:/example/res/image/logo_pro.png"
+            icon:"qrc:/example/res/image/ic_home_github.png"
-            title: qsTr("FluentUI Pro")
+            title:"FluentUI GitHub"
-            desc: qsTr("The latest FluentUI Pro controls and styles for your applications.")
+            desc:"The latest FluentUI controls and styles for your applications."
-            url: "https://github.com/zhuzichu520/FluentUI-Pro-Installer"
+            url:"https://github.com/zhuzichu520/FluentUI"
            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()
            }
        }
    }
    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"
        }
        Rectangle{
@ -70,19 +47,29 @@ FluScrollablePage{
                leftMargin: 20
            }
        }
-        Component{
+
-            id:com_grallery
+        ListView{
-            Item{
+            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:Item{
                id: control
                width: 220
                height: 240
-                FluShadow{
+                FluItem{
-                    radius:5
+                    radius: [8,8,8,8]
                    anchors.fill: item_content
                }
                FluClip{
                    id:item_content
                    radius: [5,5,5,5]
                    width: 200
                    height: 220
                    anchors.centerIn: parent
@ -90,21 +77,24 @@ FluScrollablePage{
                        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
+                        radius: 8
-                        color:FluTheme.itemHoverColor
+                        color:{
-                        visible: item_mouse.containsMouse
+                            if(FluTheme.dark){
-                    }
+                                if(item_mouse.containsMouse){
-                    Rectangle{
+                                    return Qt.rgba(1,1,1,0.03)
-                        anchors.fill: parent
+                                }
-                        radius: 5
+                                return Qt.rgba(0,0,0,0)
-                        color:Qt.rgba(0,0,0,0.0)
+                            }else{
-                        visible: !item_mouse.containsMouse
+                                if(item_mouse.containsMouse){
                                    return Qt.rgba(0,0,0,0.03)
                                }
                                return Qt.rgba(0,0,0,0)
                            }
                        }
                    }
                    ColumnLayout{
                        Image {
@ -127,7 +117,6 @@ FluScrollablePage{
                            Layout.leftMargin: 20
                            color: FluColors.Grey120
                            font.pixelSize: 12
                            font.family: FluTextStyle.family
                            wrapMode: Text.WrapAnywhere
                        }
                    }
@ -145,46 +134,25 @@ FluScrollablePage{
                        id:item_mouse
                        anchors.fill: parent
                        hoverEnabled: true
-                        onWheel:
+                        onWheel: (wheel)=>{
-                            (wheel)=>{
+                            if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
-                                if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
+                            else scrollbar_header.increase()
-                                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,23 +161,31 @@ FluScrollablePage{
                    anchors.fill: parent
                    radius: 8
                    color:{
-                        if(item_mouse.containsMouse){
+                        if(FluTheme.dark){
-                            return FluTheme.itemHoverColor
+                            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
@ -220,9 +196,10 @@ FluScrollablePage{
                        top: item_icon.top
                    }
                }
                FluText{
                    id:item_desc
-                    text:desc
+                    text:modelData.desc
                    color:FluColors.Grey120
                    wrapMode: Text.WrapAnywhere
                    elide: Text.ElideRight
@ -241,7 +218,7 @@ FluScrollablePage{
                    height: 12
                    width: 12
                    radius:  6
-                    color: FluTheme.primaryColor
+                    color: FluTheme.primaryColor.dark
                    anchors{
                        right: parent.right
                        top: parent.top
@ -271,7 +248,7 @@ FluScrollablePage{
    GridView{
        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
+        implicitHeight: contentHeight
        cellHeight: 120
        cellWidth: 320
        model:ItemsOriginal.getRecentlyAddedData()
@ -288,7 +265,7 @@ FluScrollablePage{
    GridView{
        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
+        implicitHeight: contentHeight
        cellHeight: 120
        cellWidth: 320
        interactive: false
@ -297,4 +274,3 @@ FluScrollablePage{
    }
 }
--- a/example/qml/page/T_Http.qml
+++ b/example/qml/page/T_Http.qml
@ -0,0 +1,214 @@
 import QtQuick
 import Qt.labs.platform
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Dialogs
 import FluentUI
 import "qrc:///example/qml/component"
 FluContentPage{
    title:"Http"
    FluHttp{
        id:http
    }
    Flickable{
        id:layout_flick
        width: 160
        clip: true
        anchors{
            top: parent.top
            topMargin: 20
            bottom: parent.bottom
            left: parent.left
        }
        ScrollBar.vertical: FluScrollBar {}
        contentHeight:layout_column.height
        Column{
            spacing: 2
            id:layout_column
            width: parent.width
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Get请求"
                onClicked: {
                    var callable = {}
                    callable.onStart = function(){
                        showLoading()
                    }
                    callable.onFinish = function(){
                        hideLoading()
                    }
                    callable.onSuccess = function(result){
                        text_info.text = result
                        console.debug(result)
                    }
                    callable.onError = function(status,errorString){
                        console.debug(status+";"+errorString)
                    }
                    http.get("https://httpbingo.org/get",callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Post表单请求"
                onClicked: {
                    var callable = {}
                    callable.onStart = function(){
                        showLoading()
                    }
                    callable.onFinish = function(){
                        hideLoading()
                    }
                    callable.onSuccess = function(result){
                        text_info.text = result
                        console.debug(result)
                    }
                    callable.onError = function(status,errorString){
                        console.debug(status+";"+errorString)
                    }
                    var param = {}
                    param.custname = "朱子楚"
                    param.custtel = "1234567890"
                    param.custemail = "zhuzichu520@gmail.com"
                    http.post("https://httpbingo.org/post",callable,param)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Post Json请求"
                onClicked: {
                    var callable = {}
                    callable.onStart = function(){
                        showLoading()
                    }
                    callable.onFinish = function(){
                        hideLoading()
                    }
                    callable.onSuccess = function(result){
                        text_info.text = result
                        console.debug(result)
                    }
                    callable.onError = function(status,errorString){
                        console.debug(status+";"+errorString)
                    }
                    var param = {}
                    param.custname = "朱子楚"
                    param.custtel = "1234567890"
                    param.custemail = "zhuzichu520@gmail.com"
                    http.postJson("https://httpbingo.org/post",callable,param)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Post String请求"
                onClicked: {
                    var callable = {}
                    callable.onStart = function(){
                        showLoading()
                    }
                    callable.onFinish = function(){
                        hideLoading()
                    }
                    callable.onSuccess = function(result){
                        text_info.text = result
                        console.debug(result)
                    }
                    callable.onError = function(status,errorString){
                        console.debug(status+";"+errorString)
                    }
                    var param = "我命由我不由天"
                    http.postString("https://httpbingo.org/post",callable,param)
                }
            }
            FluButton{
                id:btn_download
                implicitWidth: parent.width
                implicitHeight: 36
                text: "下载文件"
                onClicked: {
                    file_dialog.open()
                }
            }
        }
    }
    FolderDialog {
        id: file_dialog
        currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
        onAccepted: {
            var callable = {}
            callable.onStart = function(){
                btn_download.disabled = true
            }
            callable.onFinish = function(){
                btn_download.disabled = false
                btn_download.text = "下载文件"
                layout_file_size.visible = false
                text_file_size.text = ""
            }
            callable.onSuccess = function(result){
                showSuccess(result)
            }
            callable.onError = function(status,errorString){
                showError(errorString)
            }
            callable.onDownloadProgress = function(recv,total){
                var locale = Qt.locale()
                var precent = (recv/total * 100).toFixed(0) + "%"
                btn_download.text = "下载中..."+precent
                text_file_size.text =  "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
                layout_file_size.visible = true
            }
            var path = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
            http.download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",callable,path)
        }
    }
    FluArea{
        anchors{
            top: layout_flick.top
            bottom: layout_flick.bottom
            left: layout_flick.right
            right: parent.right
            leftMargin: 8
        }
        Flickable{
            clip: true
            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
            }
        }
    }
    FluRectangle{
        id:layout_file_size
        radius: [4,4,4,4]
        height: 36
        width: 160
        visible: false
        x:layout_flick.width
        y: 173 - layout_flick.contentY
        FluText{
            id:text_file_size
            anchors.centerIn: parent
        }
    }
 }
--- a/example/qml/page/T_Icons.qml
+++ b/example/qml/page/T_Icons.qml
@ -1,75 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 FluContentPage {
    title: qsTr("Icons")
    FluTextBox{
        id: text_box
        placeholderText: qsTr("Please enter a keyword")
        anchors{
            top: parent.top
        }
        onTextChanged: {
            grid_view.model = FluApp.iconData(text_box.text)
        }
    }
    FluToggleSwitch{
        id: toggle_switch
        anchors{
            left: text_box.right
            verticalCenter: text_box.verticalCenter
            leftMargin: 10
        }
        text: qsTr("Disabled")
    }
    GridView{
        id: grid_view
        cellWidth: 110
        cellHeight: 110
        clip: true
        boundsBehavior: GridView.StopAtBounds
        model: FluApp.iconData()
        ScrollBar.vertical: FluScrollBar {}
        anchors{
            topMargin: 10
            top: text_box.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        delegate: Item {
            width: 100
            height: 100
            FluIconButton{
                id:item_icon
                iconSource: modelData.icon
                iconSize: 30
                padding: 0
                verticalPadding: 0
                horizontalPadding: 0
                bottomPadding: 30
                anchors.fill: parent
                disabled: toggle_switch.checked
                onClicked: {
                    var text  ="FluentIcons."+modelData.name;
                    FluTools.clipText(text)
                    showSuccess(qsTr("You Copied ")+text)
                }
                FluText{
                    width: parent.width
                    horizontalAlignment: Qt.AlignHCenter
                    wrapMode: Text.WrapAnywhere
                    text: modelData.name
                    anchors.top: parent.top
                    anchors.topMargin: 60
                    enabled: !toggle_switch.checked
                }
            }
        }
    }
 }
--- a/example/qml/page/T_Image.qml
+++ b/example/qml/page/T_Image.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Image")
+    title:"Image"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 260
+        height: 260
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
            spacing: 15
            anchors{
@ -25,7 +26,7 @@ FluScrollablePage{
                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
                onStatusChanged:{
                    if(status === Image.Error){
-                        showError(qsTr("The image failed to load, please reload"))
+                        showError("图片加载失败，请重新加载")
                    }
                }
                clickErrorListener: function(){
@ -36,7 +37,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluImage{
    width: 400
    height: 300
--- a/example/qml/page/T_InfoBar.qml
+++ b/example/qml/page/T_InfoBar.qml
@ -1,22 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("InfoBar")
+    title:"InfoBar"
-    property var info1
+    FluArea{
    property var info2
    property var info3
    FluFrame{
        Layout.fillWidth: true
-        Layout.preferredHeight: 350
+        Layout.topMargin: 20
-        padding: 10
+        height: 240
        paddings: 10
        ColumnLayout{
            spacing: 14
            anchors{
@ -24,83 +21,31 @@ FluScrollablePage{
                left: parent.left
            }
            FluButton{
-                text: qsTr("Info")
+                text:"Info"
                onClicked: {
-                    showInfo(qsTr("This is an InfoBar in the Info Style"))
+                    showInfo("这是一个Info样式的InfoBar")
                }
            }
            FluButton{
-                text: qsTr("Warning")
+                text:"Warning"
                onClicked: {
-                    showWarning(qsTr("This is an InfoBar in the Warning Style"))
+                    showWarning("这是一个Warning样式的InfoBar")
                }
            }
            FluButton{
-                text: qsTr("Error")
+                text:"Error"
                onClicked: {
-                    showError(qsTr("This is an InfoBar in the Error Style"))
+                    showError("这是一个Error样式的InfoBar")
                }
            }
            FluButton{
-                text: qsTr("Success")
+                text:"Success"
                onClicked: {
-                    showSuccess(qsTr("This is an InfoBar in the Success Style"))
+                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
                }
            }
            FluButton{
-                text: qsTr("InfoBar that needs to be turned off manually")
+                text:"Loading"
                onClicked: {
                    showInfo(qsTr("This is an InfoBar in the Info Style"),0,qsTr("Manual shutdown is supported"))
                }
            }
            FluText{
                wrapMode: Text.WrapAnywhere
                width: parent.width
                text: qsTr("Manually close the info message box")
            }
            Row{
                spacing: 5
                FluButton{
                    text: (info1 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info1"))
                    onClicked: {
                        if(info1) {
                            info1.close()
                            return
                        }
                        info1 = showInfo(qsTr("This is an '%1'").arg(qsTr("info1")), 0)
                        info1.close()
                    }
                }
                FluButton{
                    text: (info2 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info2"))
                    onClicked: {
                        if(info2) {
                            info2.close()
                            return
                        }
                        info2 = showInfo(qsTr("This is an '%1'").arg(qsTr("info2")), 0)
                    }
                }
                FluButton{
                    text: (info3 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info3"))
                    onClicked: {
                        if(info3) {
                            info3.close()
                            return
                        }
                        info3 = showInfo(qsTr("This is an '%1'").arg(qsTr("info3")), 0)
                    }
                }
                FluButton{
                    text: qsTr("clear all info")
                    onClicked: {
                        clearAllInfo()
                    }
                }
            }
            FluButton{
                text: qsTr("Loading")
                onClicked: {
                    showLoading()
                }
@ -109,18 +54,13 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
-        code:`
+        code:'showInfo("这是一个Info样式的InfoBar")
 showInfo(qsTr("This is an InfoBar in the Info Style"))
-showWarning(qsTr("This is an InfoBar in the Warning Style"))
+showWarning("这是一个Warning样式的InfoBar")
-showError(qsTr("This is an InfoBar in the Error Style"))
+showError("这是一个Error样式的InfoBar")
-showSuccess(qsTr("This is an InfoBar in the Success Style"))
+showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
 var info1 = showInfo(qsTr("This is an 'Info1'"), 0)
 info1.close()
 `
    }
 }
--- a/example/qml/page/T_Menu.qml
+++ b/example/qml/page/T_Menu.qml
@ -1,13 +1,13 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Menu")
+    title:"Menu"
    FluMenu {
        id:menu
@ -16,43 +16,36 @@ FluScrollablePage{
        Action { text: qsTr("Open...") }
        Action { text: qsTr("Save") }
        FluMenuSeparator { }
-        FluMenuItem{
+        Action {
            text: qsTr("Quit")
            onTriggered: {
                showError("Quit")
            }
        }
        FluMenuItem{
            text: qsTr("Search")
            iconSource: FluentIcons.Zoom
            iconSpacing: 3
            onTriggered: {
                showError(qsTr("Search"))
            }
        }
        Action {
            text: qsTr("Disable")
            enabled:false
            onTriggered: {
-                showError(qsTr("Disable"))
+                showError("Disable")
            }
        }
        FluMenuSeparator { }
        Action { text: qsTr("Check");checkable: true;checked: true}
        FluMenu{
-            title: qsTr("Save As...")
+            title: "Save As..."
            Action { text: qsTr("Doc") }
            Action { text: qsTr("PDF") }
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 100
+        height: 100
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
-            id: layout_column
+            id:layout_column
            spacing: 15
            anchors{
                verticalCenter: parent.verticalCenter
@ -60,11 +53,11 @@ FluScrollablePage{
            }
            FluText{
-                text: qsTr("Menu")
+                text:"Menu"
            }
            FluButton{
-                text: qsTr("Show Menu Popup")
+                text:"Show Menu Popup"
                Layout.topMargin: 20
                onClicked:{
                    menu.popup()
@ -77,7 +70,7 @@ FluScrollablePage{
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluMenu{
    id:menu
    FluMenuItem:{
@ -98,10 +91,10 @@ menu.popup()
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 100
+        height: 100
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
            spacing: 15
@ -111,7 +104,7 @@ menu.popup()
            }
            FluText{
-                text: qsTr("MenuBar")
+                text:"MenuBar"
            }
            FluMenuBar {
@ -128,7 +121,7 @@ menu.popup()
                        enabled:false
                    }
                    FluMenu{
-                        title: qsTr("Save As...")
+                        title: "Save As..."
                        Action { text: qsTr("Doc") }
                        Action { text: qsTr("PDF") }
                    }
@ -150,7 +143,7 @@ menu.popup()
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluMenuBar{
    id:menu
    FluMenu:{
@ -167,4 +160,8 @@ menu.popup()
 menu.popup()
 '
    }
 }
--- a/example/qml/page/T_MultiWindow.qml
+++ b/example/qml/page/T_MultiWindow.qml
@ -1,30 +1,30 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
    property string password: ""
    property var loginPageRegister: registerForWindowResult("/login")
-    title: qsTr("MultiWindow")
+    title:"MultiWindow"
    FluWindowResultLauncher{
        id:loginResultLauncher
        path: "/login"
        onResult:
            (data)=>{
                password = data.password
            }
    Connections{
        target: loginPageRegister
        function onResult(data)
        {
            password = data.password
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 86
+        height: 86
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
            spacing: 15
            anchors{
@ -32,21 +32,21 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("<font color='red'>Standard</font> mode window，a new window is created every time")
+                text:"<font color='red'>Standard</font>模式窗口，每次都会创建新窗口"
            }
            FluButton{
-                text: qsTr("Create Window")
+                text:"点击创建窗口"
                onClicked: {
-                    FluRouter.navigate("/standardWindow")
+                    FluApp.navigate("/standardWindow")
                }
            }
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 86
+        height: 86
-        padding: 10
+        paddings: 10
        Layout.topMargin: 10
        Column{
            spacing: 15
@ -55,22 +55,22 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("<font color='red'>SingleTask</font> mode window，If a window exists, this activates the window")
+                text:"<font color='red'>SingleTask</font>模式窗口，如果窗口存在，这激活该窗口"
                textFormat: Text.RichText
            }
            FluButton{
-                text: qsTr("Create Window")
+                text:"点击创建窗口"
                onClicked: {
-                    FluRouter.navigate("/singleTaskWindow")
+                    FluApp.navigate("/singleTaskWindow")
                }
            }
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 86
+        height: 86
-        padding: 10
+        paddings: 10
        Layout.topMargin: 10
        Column{
            spacing: 15
@ -79,19 +79,19 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("<font color='red'>SingleInstance</font> mode window，If the window exists, destroy the window and create a new window")
+                text:"<font color='red'>SingleInstance</font>模式窗口，如果窗口存在，则销毁窗口，然后新建窗口"
            }
            FluButton{
-                text: qsTr("Create Window")
+                text:"点击创建窗口"
                onClicked: {
-                    FluRouter.navigate("/singleInstanceWindow")
+                    FluApp.navigate("/singleInstanceWindow")
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluWindow{
  //launchMode: FluWindowType.Standard
  //launchMode: FluWindowType.SingleTask
@ -101,10 +101,10 @@ FluScrollablePage{
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 100
+        height: 100
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
            spacing: 15
@ -113,32 +113,32 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("Create the window without carrying any parameters")
+                text:"页面跳转，不携带任何参数"
            }
            FluButton{
-                text: qsTr("Create Window")
+                text:"点击跳转"
                onClicked: {
-                    FluRouter.navigate("/about")
+                    FluApp.navigate("/about")
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluButton{
-    text: qsTr("Create Window")
+    text:"点击跳转"
    onClicked: {
-        FluRouter.navigate("/about")
+        FluApp.navigate("/about")
    }
 }
 '
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 130
+        height: 130
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column{
@ -148,35 +148,36 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("Create a window with the parameter username: zhuzichu")
+                text:"页面跳转，并携带参数用户名：zhuzichu"
            }
            FluButton{
-                text: qsTr("Create Window")
+                text:"点击跳转到登录"
                onClicked: {
-                    loginResultLauncher.launch({username:"zhuzichu"})
+                    loginPageRegister.launch({username:"zhuzichu"})
                }
            }
            FluText{
-                text:qsTr("Login Window Returned Password - >")+password
+                text:"登录窗口返回过来的密码->"+password
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
-        code:'FluWindowResultLauncher{
+        code:'property var loginPageRegister: registerForWindowResult("/login")
-    id:loginResultLauncher
+
-    path: "/login"
+Connections{
-    onResult:
+    target: loginPageRegister
-        (data)=>{
+    function onResult(data)
-            password = data.password
+    {
-     }
+        password = data.password
    }
 }
 FluButton{
-    text: qsTr("Create Window")
+    text:"点击跳转"
    onClicked: {
-        loginResultLauncher.launch({username:"zhuzichu"})
+        loginPageRegister.launch({username:"zhuzichu"})
    }
 }
 '
--- a/example/qml/page/T_Network.qml
+++ b/example/qml/page/T_Network.qml
@ -1,560 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import Qt.labs.platform 1.0
 import example 1.0
 import "../component"
 FluContentPage{
    id:root
    title: qsTr("Network")
    NetworkCallable{
        id:callable
        onStart: {
            showLoading()
        }
        onFinish: {
            hideLoading()
        }
        onError:
            (status,errorString,result)=>{
                console.debug(status+";"+errorString+";"+result)
            }
        onCache:
            (result)=>{
                text_info.text = result
            }
        onSuccess:
            (result)=>{
                text_info.text = result
            }
    }
    Flickable{
        id:layout_flick
        width: 200
        clip: true
        anchors{
            top: parent.top
            bottom: parent.bottom
            left: parent.left
        }
        boundsBehavior: Flickable.StopAtBounds
        ScrollBar.vertical: FluScrollBar {}
        contentHeight:layout_column.height
        Column{
            spacing: 2
            id:layout_column
            width: parent.width
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Get"
                onClicked: {
                    text_info.text = ""
                    Network.get("https://httpbingo.org/get")
                    .addQuery("name","孙悟空")
                    .addQuery("age",500)
                    .addQuery("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Head"
                onClicked: {
                    text_info.text = ""
                    Network.head("https://httpbingo.org/head")
                    .addQuery("name","孙悟空")
                    .addQuery("age",500)
                    .addQuery("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Post Body"
                onClicked: {
                    text_info.text = ""
                    Network.postBody("https://httpbingo.org/post")
                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Post Form"
                onClicked: {
                    text_info.text = ""
                    Network.postForm("https://httpbingo.org/post")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Post JSON"
                onClicked: {
                    text_info.text = ""
                    Network.postJson("https://httpbingo.org/post")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Post JSON Array"
                onClicked: {
                    text_info.text = ""
                    Network.postJsonArray("https://httpbingo.org/post")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Put Body"
                onClicked: {
                    text_info.text = ""
                    Network.putBody("https://httpbingo.org/put")
                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Put Form"
                onClicked: {
                    text_info.text = ""
                    Network.putForm("https://httpbingo.org/put")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Put JSON"
                onClicked: {
                    text_info.text = ""
                    Network.putJson("https://httpbingo.org/put")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Put JSON Array"
                onClicked: {
                    text_info.text = ""
                    Network.putJsonArray("https://httpbingo.org/put")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Patch Body"
                onClicked: {
                    text_info.text = ""
                    Network.patchBody("https://httpbingo.org/patch")
                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Patch Form"
                onClicked: {
                    text_info.text = ""
                    Network.patchForm("https://httpbingo.org/patch")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Patch JSON"
                onClicked: {
                    text_info.text = ""
                    Network.patchJson("https://httpbingo.org/patch")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Patch JSON Array"
                onClicked: {
                    text_info.text = ""
                    Network.patchJsonArray("https://httpbingo.org/patch")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Delete Body"
                onClicked: {
                    text_info.text = ""
                    Network.deleteBody("https://httpbingo.org/delete")
                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Delete Form"
                onClicked: {
                    text_info.text = ""
                    Network.deleteForm("https://httpbingo.org/delete")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Delete JSON"
                onClicked: {
                    text_info.text = ""
                    Network.deleteJson("https://httpbingo.org/delete")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Delete JSON Array"
                onClicked: {
                    text_info.text = ""
                    Network.deleteJsonArray("https://httpbingo.org/delete")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Open Log"
                onClicked: {
                    text_info.text = ""
                    Network.postJson("https://httpbingo.org/post")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .openLog(true)
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Custom Header"
                onClicked: {
                    text_info.text = ""
                    Network.postJson("https://httpbingo.org/post")
                    .addHeader("os","PC")
                    .addHeader("version","1.0.0")
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "RequestFailedReadCache"
                onClicked: {
                    text_info.text = ""
                    Network.postJson("https://httpbingo.org/post")
                    .setCacheMode(NetworkType.RequestFailedReadCache)
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .add("cacheMode","RequestFailedReadCache")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "IfNoneCacheRequest"
                onClicked: {
                    text_info.text = ""
                    Network.postJson("https://httpbingo.org/post")
                    .setCacheMode(NetworkType.IfNoneCacheRequest)
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .add("cacheMode","IfNoneCacheRequest")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "FirstCacheThenRequest"
                onClicked: {
                    text_info.text = ""
                    Network.postJson("https://httpbingo.org/post")
                    .setCacheMode(NetworkType.FirstCacheThenRequest)
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .add("cacheMode","FirstCacheThenRequest")
                    .bind(root)
                    .go(callable)
                }
            }
            FluButton{
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Timeout And Retry"
                onClicked: {
                    text_info.text = ""
                    Network.postJson("https://httpbingo.org/post")
                    .setTimeout(5000)
                    .setRetry(3)
                    .add("name","孙悟空")
                    .add("age",500)
                    .add("address","花果山水帘洞")
                    .add("timeout","5000")
                    .add("retry","3")
                    .bind(root)
                    .go(callable)
                }
            }
            FluProgressButton{
                id:btn_upload
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Upload File"
                onClicked: {
                    file_dialog.open()
                }
            }
            FluProgressButton{
                id:btn_download
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Download File"
                onClicked: {
                    folder_dialog.showDialog(function(path){
                        Network.get("http://vjs.zencdn.net/v/oceans.mp4")
                        .toDownload(path)
                        .bind(root)
                        .go(callable_download_file)
                    })
                }
            }
            FluProgressButton{
                id:btn_download_breakpoint
                implicitWidth: parent.width
                implicitHeight: 36
                text: "Breakpoint Download File"
                onClicked: {
                    folder_dialog.showDialog(function(path){
                        Network.get("http://vjs.zencdn.net/v/oceans.mp4")
                        .toDownload(path,true)
                        .bind(root)
                        .go(callable_breakpoint_download_file)
                    })
                }
            }
        }
    }
    NetworkCallable{
        id:callable_upload_file
        onStart: {
            btn_upload.disabled = true
        }
        onFinish: {
            btn_upload.disabled = false
        }
        onError:
            (status,errorString,result)=>{
                btn_upload.progress = 0
                text_info.text = result
                console.debug(status+";"+errorString+";"+result)
            }
        onSuccess:
            (result)=>{
                text_info.text = result
            }
        onUploadProgress:
            (sent,total)=>{
                btn_upload.progress = sent/total
            }
    }
    NetworkCallable{
        id:callable_download_file
        onStart: {
            btn_download.progress = 0
            btn_download.disabled = true
        }
        onFinish: {
            btn_download.disabled = false
        }
        onError:
            (status,errorString,result)=>{
                btn_download.progress = 0
                showError(errorString)
                console.debug(status+";"+errorString+";"+result)
            }
        onSuccess:
            (result)=>{
                showSuccess(result)
            }
        onDownloadProgress:
            (recv,total)=>{
                btn_download.progress = recv/total
            }
    }
    NetworkCallable{
        id:callable_breakpoint_download_file
        onStart: {
            btn_download_breakpoint.progress = 0
            btn_download_breakpoint.disabled = true
        }
        onFinish: {
            btn_download_breakpoint.disabled = false
        }
        onError:
            (status,errorString,result)=>{
                btn_download_breakpoint.progress = 0
                showError(errorString)
                console.debug(status+";"+errorString+";"+result)
            }
        onSuccess:
            (result)=>{
                showSuccess(result)
            }
        onDownloadProgress:
            (recv,total)=>{
                btn_download_breakpoint.progress = recv/total
            }
    }
    FileDialog {
        id: file_dialog
        onAccepted: {
            Network.postForm("https://httpbingo.org/post")
            .setRetry(1)//只请求一次
            .add("accessToken","12345678")
            .addFile("file",FluTools.toLocalPath(file_dialog.currentFile))
            .bind(root)
            .go(callable_upload_file)
        }
    }
    FileDialog {
        property var onSelectListener
        id: folder_dialog
        folder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
        currentFile: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]+"/oceans.mp4"
        fileMode: FileDialog.SaveFile
        onAccepted: {
            folder_dialog.onSelectListener(FluTools.toLocalPath(folder_dialog.currentFile))
        }
        function showDialog(listener){
            folder_dialog.onSelectListener = listener
            folder_dialog.open()
        }
    }
    FluFrame{
        anchors{
            top: layout_flick.top
            bottom: layout_flick.bottom
            left: layout_flick.right
            right: parent.right
            leftMargin: 8
        }
        Flickable{
            clip: true
            id:scrollview
            boundsBehavior:Flickable.StopAtBounds
            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
            }
        }
    }
 }
--- a/example/qml/page/T_OpenGL.qml
+++ b/example/qml/page/T_OpenGL.qml
@ -1,26 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import example 1.0
 import "../component"
 FluContentPage{
    title: qsTr("OpenGL")
    FluFrame{
        anchors.fill: parent
        OpenGLItem{
            anchors.fill: parent
            SequentialAnimation on t {
                NumberAnimation { to: 1; duration: 2500; easing.type: Easing.InQuad }
                NumberAnimation { to: 0; duration: 2500; easing.type: Easing.OutQuad }
                loops: Animation.Infinite
                running: true
            }
        }
    }
 }
--- a/example/qml/page/T_Pagination.qml
+++ b/example/qml/page/T_Pagination.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import "../component"
+import "qrc:///example/qml/component"
-import FluentUI 1.0
+import FluentUI
 FluScrollablePage{
-    title: qsTr("Pagination")
+    title:"Pagination"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 200
+        height: 200
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        ColumnLayout{
            spacing: 20
            anchors.verticalCenter: parent.verticalCenter
@ -36,7 +37,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluPagination{
    pageCurrent: 1
    itemCount: 1000
--- a/example/qml/page/T_Pivot.qml
+++ b/example/qml/page/T_Pivot.qml
@ -1,76 +1,76 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Pivot")
+    title:"Pivot"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 400
+        Layout.topMargin: 20
-        padding: 10
+        height: 400
        paddings: 10
        FluPivot{
            anchors.fill: parent
            currentIndex: 2
            FluPivotItem{
-                title: qsTr("All")
+                title:"All"
                contentItem:FluText{
-                    text: qsTr("All emails go here.")
+                    text:"All emails go here."
                }
            }
            FluPivotItem{
-                title: qsTr("Unread")
+                title:"Unread"
-                contentItem: FluText{
+                contentItem:FluText{
-                    text: qsTr("Unread emails go here.")
+                    text:"Unread emails go here."
                }
            }
            FluPivotItem{
-                title: qsTr("Flagged")
+                title:"Flagged"
-                contentItem: FluText{
+                contentItem:FluText{
-                    text: qsTr("Flagged emails go here.")
+                    text:"Flagged emails go here."
                }
            }
            FluPivotItem{
-                title: qsTr("Urgent")
+                title:"Urgent"
-                contentItem: FluText{
+                contentItem:FluText{
-                    text: qsTr("Urgent emails go here.")
+                    text:"Urgent emails go here."
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluPivot{
    anchors.fill: parent
-    FluPivotItem {
+    FluPivotItem:{
-        title: qsTr("All")
+        text:"All"
        contentItem: FluText{
-            text: qsTr("All emails go here.")
+            text:"All emails go here."
        }
    }
-    FluPivotItem {
+    FluPivotItem:{
-        title: qsTr("Unread")
+        text:"Unread"
        contentItem: FluText{
-            text: qsTr("Unread emails go here.")
+            text:"Unread emails go here."
        }
    }
-    FluPivotItem {
+    FluPivotItem:{
-        title: qsTr("Flagged")
+        text:"Flagged"
        contentItem: FluText{
-            text: qsTr("Flagged emails go here.")
+            text:"Flagged emails go here."
        }
    }
-    FluPivotItem {
+    FluPivotItem:{
-        title: qsTr("Urgent")
+        text:"Urgent"
        contentItem: FluText{
-            text: qsTr("Urgent emails go here.")
+            text:"Urgent emails go here."
        }
    }
 }
--- a/example/qml/page/T_Progress.qml
+++ b/example/qml/page/T_Progress.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Progress")
+    title:"Progress"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 130
+        Layout.topMargin: 20
-        padding: 10
+        height: 130
        paddings: 10
        ColumnLayout{
            spacing: 10
@ -31,7 +32,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluProgressBar{
 }
@ -41,11 +42,11 @@ FluProgressRing{
 '
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        Layout.preferredHeight: 286
+        height: 286
-        padding: 10
+        paddings: 10
        ColumnLayout{
            spacing: 10
@ -87,7 +88,7 @@ FluProgressRing{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluProgressBar{
    indeterminate: false
 }
--- a/example/qml/page/T_QRCode.qml
+++ b/example/qml/page/T_QRCode.qml
@ -1,101 +0,0 @@
 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"
 FluScrollablePage{
    title: qsTr("QRCode")
    FluQRCode{
        id:qrcode
        size:slider_size.value
        text:text_box.text
        color:color_picker.current
        bgColor: bgcolor_picker.current
        margins:slider_margins.value
        Layout.preferredWidth: size
        Layout.preferredHeight: size
    }
    RowLayout{
        spacing: 10
        Layout.topMargin: 20
        FluText{
            text: qsTr("text:")
            Layout.alignment: Qt.AlignVCenter
        }
        FluTextBox{
            id:text_box
            text:"会磨刀的小猪"
            Layout.preferredWidth: 240
        }
    }
    RowLayout{
        spacing: 10
        Layout.topMargin: 10
        FluText{
            text: qsTr("color:")
            Layout.alignment: Qt.AlignVCenter
        }
        FluColorPicker{
            id:color_picker
            current: Qt.rgba(0,0,0,1)
        }
    }
    RowLayout{
        spacing: 10
        Layout.topMargin: 10
        FluText{
            text: qsTr("bgColor:")
            Layout.alignment: Qt.AlignVCenter
        }
        FluColorPicker{
            id:bgcolor_picker
            current: Qt.rgba(1,1,1,1)
        }
    }
    RowLayout{
        spacing: 10
        FluText{
            text: qsTr("margins:")
            Layout.alignment: Qt.AlignVCenter
        }
        FluSlider{
            id:slider_margins
            from:0
            to:80
            value: 0
        }
    }
    RowLayout{
        spacing: 10
        FluText{
            text: qsTr("size:")
            Layout.alignment: Qt.AlignVCenter
        }
        FluSlider{
            id:slider_size
            from:120
            to:260
            value: 120
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: 20
        code:'FluQRCode{
    color:"red"
    text:"会磨刀的小猪"
    size:100
 }'
    }
 }
--- a/example/qml/page/T_RadioButton.qml
+++ b/example/qml/page/T_RadioButton.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("RadioButton")
+    title:"RadioButton"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Row{
            spacing: 30
            anchors.verticalCenter: parent.verticalCenter
@ -21,67 +22,68 @@ FluScrollablePage{
            }
            FluRadioButton{
                disabled: radio_button_switch.checked
-                text: qsTr("Right")
+                text:"Right"
            }
            FluRadioButton{
                disabled: radio_button_switch.checked
-                text: qsTr("Left")
+                text:"Left"
                textRight: false
            }
        }
        FluToggleSwitch{
-            id: radio_button_switch
+            id:radio_button_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluRadioButton{
    text:"Text"
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 100
+        height: 100
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluRadioButtons{
            spacing: 8
            disabled: radio_button_switch2.checked
            anchors.verticalCenter: parent.verticalCenter
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            currentIndex: 1
            FluRadioButton{
-                text: qsTr("Radio Button_1")
+                disabled: radio_button_switch2.checked
                text:"Radio Button_1"
            }
            FluRadioButton{
-                text: qsTr("Radio Button_2")
+                disabled: radio_button_switch2.checked
                text:"Radio Button_2"
            }
            FluRadioButton{
-                text: qsTr("Radio Button_3")
+                disabled: radio_button_switch2.checked
                text:"Radio Button_3"
            }
        }
        FluToggleSwitch{
-            id: radio_button_switch2
+            id:radio_button_switch2
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluRadioButtons{
    spacing: 8
    FluRadioButton{
@ -96,106 +98,4 @@ FluScrollablePage{
 }'
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 60
        padding: 10
        Layout.topMargin: 20
        FluRadioButtons{
            spacing: 8
            anchors.verticalCenter: parent.verticalCenter
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            disabled: radio_button_switch3.checked
            orientation: Qt.Horizontal
            currentIndex: 1
            FluRadioButton{
                text: qsTr("Radio Button_1")
            }
            FluRadioButton{
                text: qsTr("Radio Button_2")
            }
            FluRadioButton{
                text: qsTr("Radio Button_3")
            }
        }
        FluToggleSwitch{
            id: radio_button_switch3
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluRadioButtons{
    spacing: 8
    orientation: Qt.Horizontal
    FluRadioButton{
        text:"Radio Button_1"
    }
    FluRadioButton{
        text:"Radio Button_2"
    }
    FluRadioButton{
        text:"Radio Button_3"
    }
 }'
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 100
        padding: 10
        Layout.topMargin: 20
        FluRadioButtons{
            spacing: 8
            anchors.verticalCenter: parent.verticalCenter
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            disabled: radio_button_switch4.checked
            currentIndex: -1
            FluCheckBox{
                text: qsTr("Radio Button_1")
            }
            FluCheckBox{
                text: qsTr("Radio Button_2")
            }
            FluCheckBox{
                text: qsTr("Radio Button_3")
            }
        }
        FluToggleSwitch{
            id: radio_button_switch4
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluRadioButtons{
    spacing: 8
    FluCheckBox{
        text:"Radio Button_1"
    }
    FluCheckBox{
        text:"Radio Button_2"
    }
    FluCheckBox{
        text:"Radio Button_3"
    }
 }'
    }
 }
--- a/example/qml/page/T_RatingControl.qml
+++ b/example/qml/page/T_RatingControl.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage {
-    title: qsTr("RatingControl")
+    title: "RatingControl"
-    FluFrame {
+    FluArea {
        Layout.fillWidth: true
-        Layout.preferredHeight: 100
+        height: 100
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Column {
            spacing: 10
@ -26,7 +27,7 @@ FluScrollablePage {
    CodeExpander {
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code: 'FluRatingControl{
 }'
--- a/example/qml/page/T_Rectangle.qml
+++ b/example/qml/page/T_Rectangle.qml
@ -1,25 +1,27 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Rectangle")
+    title:"Rectangle"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 80
+        Layout.topMargin: 20
-        padding: 10
+        height: 460
        paddings: 10
        Column{
            spacing: 15
            anchors{
                left: parent.left
                verticalCenter: parent.verticalCenter
                left: parent.left
            }
            RowLayout{
                Layout.topMargin: 20
                FluRectangle{
@ -59,15 +61,87 @@ FluScrollablePage{
                    radius:[0,0,0,15]
                }
            }
            FluText{
                text:"配合图片使用"
                font: FluTextStyle.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:/example/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:/example/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:/example/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:/example/res/svg/avatar_4.svg"
                    }
                }
            }
            FluRectangle{
                width: 1920/5
                height: 1200/5
                radius:[15,15,15,15]
                Image {
                    asynchronous: true
                    source: "qrc:/example/res/image/banner_1.jpg"
                    anchors.fill: parent
                    sourceSize: Qt.size(2*width,2*height)
                }
                Layout.topMargin: 20
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluRectangle{
    radius: [25,25,25,25]
    width: 50
    height: 50
    Image{
        asynchronous: true
        anchors.fill: parent
        source: "qrc:/example/res/svg/avatar_4.svg"
        sourceSize: Qt.size(width,height)
    }
 }'
    }
 }
--- a/example/qml/page/T_RemoteLoader.qml
+++ b/example/qml/page/T_RemoteLoader.qml
@ -1,14 +1,14 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluPage{
    launchMode: FluPageType.SingleTop
    FluRemoteLoader{
        anchors.fill: parent
-        source: "https://zhu-zichu.gitee.io/Qt_174_RemoteLoader.qml"
+        source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
    }
 }
--- a/example/qml/page/T_Settings.qml
+++ b/example/qml/page/T_Settings.qml
@ -1,95 +1,20 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/global"
-import "../global"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Settings")
+    title:"Settings"
-    FluEvent{
+    FluArea{
        name: "checkUpdateFinish"
        onTriggered: {
            btn_checkupdate.loading = false
        }
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 20
        Layout.preferredHeight: 60
        padding: 10
        Row{
            spacing: 20
            anchors.verticalCenter: parent.verticalCenter
            FluText{
                text: "%1 v%2".arg(qsTr("Current Version")).arg(AppInfo.version)
                font: FluTextStyle.Body
                anchors.verticalCenter: parent.verticalCenter
            }
            FluLoadingButton{
                id: btn_checkupdate
                text: qsTr("Check for Updates")
                anchors.verticalCenter: parent.verticalCenter
                onClicked: {
                    loading = true
                    FluEventBus.post("checkUpdate")
                }
            }
        }
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 20
        height: 50
        padding: 10
        FluCheckBox{
            text: qsTr("Use System AppBar")
            checked: FluApp.useSystemAppBar
            anchors.verticalCenter: parent.verticalCenter
            onClicked: {
                FluApp.useSystemAppBar = !FluApp.useSystemAppBar
                dialog_restart.open()
            }
        }
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 20
        height: 50
        padding: 10
        FluCheckBox{
            text:qsTr("Fits AppBar Windows")
            checked: window.fitsAppBarWindows
            anchors.verticalCenter: parent.verticalCenter
            onClicked: {
                window.fitsAppBarWindows = !window.fitsAppBarWindows
            }
        }
    }
    FluContentDialog{
        id: dialog_restart
        title: qsTr("Friendly Reminder")
        message: qsTr("This action requires a restart of the program to take effect, is it restarted?")
        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
        negativeText: qsTr("Cancel")
        positiveText: qsTr("OK")
        onPositiveClicked: {
            FluRouter.exit(931)
        }
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 20
        height: 128
-        padding: 10
+        paddings: 10
        ColumnLayout{
            spacing: 5
@ -98,13 +23,13 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text: qsTr("Dark Mode")
+                text:lang.dark_mode
                font: FluTextStyle.BodyStrong
                Layout.bottomMargin: 4
            }
            Repeater{
-                model: [{title:qsTr("System"),mode:FluThemeType.System},{title:qsTr("Light"),mode:FluThemeType.Light},{title:qsTr("Dark"),mode:FluThemeType.Dark}]
+                model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
-                delegate: FluRadioButton{
+                delegate:  FluRadioButton{
                    checked : FluTheme.darkMode === modelData.mode
                    text:modelData.title
                    clickListener:function(){
@ -115,11 +40,11 @@ FluScrollablePage{
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
        height: 160
-        padding: 10
+        paddings: 10
        ColumnLayout{
            spacing: 5
@ -128,38 +53,28 @@ FluScrollablePage{
                left: parent.left
            }
            FluText{
-                text:qsTr("Navigation View Display Mode")
+                text:lang.navigation_view_display_mode
                font: FluTextStyle.BodyStrong
                Layout.bottomMargin: 4
            }
            Repeater{
-                model: [{title:qsTr("Open"),mode:FluNavigationViewType.Open},{title:qsTr("Compact"),mode:FluNavigationViewType.Compact},{title:qsTr("Minimal"),mode:FluNavigationViewType.Minimal},{title:qsTr("Auto"),mode:FluNavigationViewType.Auto}]
+                model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
                delegate: FluRadioButton{
-                    text: modelData.title
+                    checked : MainEvent.displayMode===modelData.mode
-                    checked: GlobalModel.displayMode === modelData.mode
+                    text:modelData.title
                    clickListener:function(){
-                        GlobalModel.displayMode = modelData.mode
+                        MainEvent.displayMode = modelData.mode
                    }
                }
            }
        }
    }
-    ListModel{
+    FluArea{
        id:model_language
        ListElement{
            name:"en"
        }
        ListElement{
            name:"zh"
        }
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.topMargin: 20
        height: 80
-        padding: 10
+        paddings: 10
        ColumnLayout{
            spacing: 10
@ -167,25 +82,27 @@ FluScrollablePage{
                top: parent.top
                left: parent.left
            }
            FluText{
-                text:qsTr("Language")
+                text:lang.locale
                font: FluTextStyle.BodyStrong
                Layout.bottomMargin: 4
            }
            Flow{
                spacing: 5
                Repeater{
-                    model: TranslateHelper.languages
+                    model: ["Zh","En"]
                    delegate: FluRadioButton{
-                        checked: TranslateHelper.current === modelData
+                        checked: appInfo.lang.objectName === modelData
                        text:modelData
                        clickListener:function(){
-                            TranslateHelper.current = modelData
+                            appInfo.changeLang(modelData)
                            dialog_restart.open()
                        }
                    }
                }
            }
        }
    }
 }
--- a/example/qml/page/T_Sheet.qml
+++ b/example/qml/page/T_Sheet.qml
@ -1,90 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Sheet")
    FluSheet{
        id:sheet
        title: qsTr("Title")
        FluText{
            text: qsTr("Some contents...\nSome contents...\nSome contents...")
            anchors{
                left: parent.left
                leftMargin: 10
            }
        }
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 280
        padding: 10
        Column{
            anchors.centerIn: parent
            spacing: 10
            Row{
                spacing: 10
                FluButton{
                    width: 80
                    height: 30
                    text: qsTr("top")
                    onClicked: {
                        sheet.open(FluSheetType.Top)
                    }
                }
                FluButton{
                    width: 80
                    height: 30
                    text: qsTr("right")
                    onClicked: {
                        sheet.open(FluSheetType.Right)
                    }
                }
            }
            Row{
                spacing: 10
                FluButton{
                    width: 80
                    height: 30
                    text: qsTr("bottom")
                    onClicked: {
                        sheet.open(FluSheetType.Bottom)
                    }
                }
                FluButton{
                    width: 80
                    height: 30
                    text: qsTr("left")
                    onClicked: {
                        sheet.open(FluSheetType.Left)
                    }
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluSheet{
    id:sheet
    title: qsTr("Title")
    FluText{
        text: qsTr("Some contents...")
        anchors{
            left: parent.left
            leftMargin: 10
        }
    }
 }
 sheet.open(FluSheetType.Bottom)
 '
    }
 }
--- a/example/qml/page/T_ShortcutPicker.qml
+++ b/example/qml/page/T_ShortcutPicker.qml
@ -1,42 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("ShortcutPicker")
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: childrenRect.height
        ColumnLayout{
            anchors.verticalCenter: parent.verticalCenter
            Item{
                Layout.preferredHeight: 15
            }
            Repeater{
                model: FluApp.launcher.hotkeys.children
                delegate: FluShortcutPicker{
                    text: model.name
                    syncHotkey: FluApp.launcher.hotkeys.children[index]
                    Layout.leftMargin: 15
                }
            }
            Item{
                Layout.preferredHeight: 15
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluShortcutPicker{
 }'
    }
 }
--- a/example/qml/page/T_Slider.qml
+++ b/example/qml/page/T_Slider.qml
@ -1,59 +1,50 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import "qrc:///example/qml/component"
-import "../component"
+import FluentUI
 FluScrollablePage{
-    title: qsTr("Slider")
+    title:"Slider"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 200
+        height: 100
-        padding: 10
+        paddings: 10
-
+        Layout.topMargin: 20
-        Row{
+        FluSlider{
-            spacing: 30
+            anchors.verticalCenter: parent.verticalCenter
            FluSlider{
            }
            FluSlider{
                orientation: Qt.Vertical
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluSlider{
    value:50
 }'
    }
-
+    FluArea{
    FluFrame{
        Layout.fillWidth: true
-        Layout.preferredHeight: 200
+        height: 200
        paddings: 10
        Layout.topMargin: 20
-        padding: 10
+        FluSlider{
-        Row{
+            orientation: Qt.Vertical
-            spacing: 30
+            anchors.left: parent.left
-            FluRangeSlider{
+            anchors.verticalCenter: parent.verticalCenter
            }
            FluRangeSlider{
                orientation: Qt.Vertical
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
-        code:'FluRangeSlider{
+        code:'FluSlider{
    orientation: Qt.Vertical
    value:50
 }'
    }
 }
 }
--- a/example/qml/page/T_SplitLayout.qml
+++ b/example/qml/page/T_SplitLayout.qml
@ -1,83 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluContentPage{
    title: qsTr("SplitLayout")
    RowLayout{
        id:layout_dropdown
        anchors{
            top: parent.top
        }
        FluText{
            text: qsTr("orientation:")
        }
        FluDropDownButton{
            id:btn_orientation
            Layout.preferredWidth: 120
            text: qsTr("Horizontal")
            FluMenuItem{
                text: qsTr("Horizontal")
                onClicked: {
                    btn_orientation.text = text
                    split_layout.orientation = Qt.Horizontal
                }
            }
            FluMenuItem{
                text: qsTr("Vertical")
                onClicked: {
                    btn_orientation.text = text
                    split_layout.orientation = Qt.Vertical
                }
            }
        }
    }
    FluSplitLayout {
        id:split_layout
        anchors{
            top: layout_dropdown.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            topMargin: 8
        }
        orientation: Qt.Horizontal
        Item {
            clip: true
            implicitWidth: 200
            implicitHeight: 200
            SplitView.maximumWidth: 400
            SplitView.maximumHeight: 400
            FluText {
                text: qsTr("Page 1")
                anchors.centerIn: parent
            }
        }
        Item {
            clip: true
            id: centerItem
            SplitView.minimumWidth: 50
            SplitView.minimumHeight: 50
            SplitView.fillWidth: true
            SplitView.fillHeight: true
            FluText {
                text: qsTr("Page 2")
                anchors.centerIn: parent
            }
        }
        Item {
            clip: true
            implicitWidth: 200
            implicitHeight: 200
            FluText {
                text: qsTr("Page 3")
                anchors.centerIn: parent
            }
        }
    }
 }
--- a/example/qml/page/T_StaggeredLayout.qml
+++ b/example/qml/page/T_StaggeredLayout.qml
@ -1,56 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluContentPage{
    title: qsTr("StaggeredLayout")
    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
    ListModel{
        id:list_model
        Component.onCompleted: {
            for(var i=0;i<=100;i++){
                var item = {}
                item.color = colors[rand(0,7)]
                item.height = rand(100,300)
                append(item)
            }
        }
    }
    Flickable{
        id: scroll
        anchors.fill: parent
        boundsBehavior:Flickable.StopAtBounds
        contentHeight: staggered_view.implicitHeight
        clip: true
        ScrollBar.vertical: FluScrollBar {}
        FluStaggeredLayout{
            id:staggered_view
            width: parent.width
            itemWidth: 160
            model:list_model
            delegate: Rectangle{
                height: model.height
                color:model.color.normal
                FluText{
                    color:"#FFFFFF"
                    text:model.index
                    font: FluTextStyle.Title
                    anchors.centerIn: parent
                }
            }
        }
    }
    function rand(minNum, maxNum){
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
    }
 }
--- a/example/qml/page/T_StatusLayout.qml
+++ b/example/qml/page/T_StatusLayout.qml
@ -1,83 +1,84 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("StatusLayout")
+    title:"StatusView"
-    FluFrame{
+    FluArea{
        id:layout_actions
        Layout.fillWidth: true
-        Layout.preferredHeight: 50
+        Layout.topMargin: 20
-        padding: 10
+        height: 50
        paddings: 10
        RowLayout{
            spacing: 14
            FluDropDownButton{
                id:btn_status_mode
                Layout.preferredWidth: 140
-                text: qsTr("Loading")
+                text:"Loading"
                FluMenuItem{
-                    text: qsTr("Loading")
+                    text:"Loading"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Loading
+                        status_view.statusMode = FluStatusViewType.Loading
                    }
                }
                FluMenuItem{
-                    text: qsTr("Empty")
+                    text:"Empty"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Empty
+                        status_view.statusMode = FluStatusViewType.Empty
                    }
                }
                FluMenuItem{
-                    text: qsTr("Error")
+                    text:"Error"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Error
+                        status_view.statusMode = FluStatusViewType.Error
                    }
                }
                FluMenuItem{
-                    text: qsTr("Success")
+                    text:"Success"
                    onClicked: {
                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Success
+                        status_view.statusMode = FluStatusViewType.Success
                    }
                }
            }
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 10
-        Layout.preferredHeight: 380
+        height: 380
-        padding: 10
+        paddings: 10
-        FluStatusLayout{
+        FluStatusView{
            id:status_view
            anchors.fill: parent
            onErrorClicked:{
-                status_view.statusMode = FluStatusLayoutType.Loading
+                showError("点击重新加载")
            }
            Rectangle {
                anchors.fill: parent
-                color:FluTheme.primaryColor
+                color:FluTheme.primaryColor.dark
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
-        code:'FluStatusLayout{
+        code:'FluStatusView{
    anchors.fill: parent
-    statusMode: FluStatusLayoutType.Loading
+    statusMode: FluStatusViewType.Loading
    Rectangle{
        anchors.fill: parent
-        color:FluTheme.primaryColor
+        color:FluTheme.primaryColor.dark
    }
 }'
    }
--- a/example/qml/page/T_TabView.qml
+++ b/example/qml/page/T_TabView.qml
@ -1,26 +1,26 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-    title: qsTr("TabView")
+    title:"TabView"
    Component{
        id:com_page
        Rectangle{
            anchors.fill: parent
-            color: argument.normal
+            color: argument
        }
    }
    function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico",qsTr("Document ")+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
+        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
    }
    Component.onCompleted: {
@ -29,64 +29,59 @@ FluScrollablePage{
        newTab()
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 50
+        Layout.topMargin: 20
-        padding: 10
+        height: 50
        paddings: 10
        RowLayout{
            spacing: 14
            FluCopyableText{
                text: qsTr("Tab Width Behavior:")
            }
            FluDropDownButton{
                id:btn_tab_width_behavior
                Layout.preferredWidth: 140
-                text:  qsTr("Equal")
+                text:"Equal"
                FluMenuItem{
-                    text: qsTr("Equal")
+                    text:"Equal"
                    onClicked: {
                        btn_tab_width_behavior.text = text
                        tab_view.tabWidthBehavior = FluTabViewType.Equal
                    }
                }
                FluMenuItem{
-                    text: qsTr("SizeToContent")
+                    text:"SizeToContent"
                    onClicked: {
                        btn_tab_width_behavior.text = text
                        tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
                    }
                }
                FluMenuItem{
-                    text: qsTr("Compact")
+                    text:"Compact"
                    onClicked: {
                        btn_tab_width_behavior.text = text
                        tab_view.tabWidthBehavior = FluTabViewType.Compact
                    }
                }
            }
            FluCopyableText{
                text: qsTr("Tab Close Button Visibility:")
            }
            FluDropDownButton{
                id:btn_close_button_visibility
-                text: qsTr("Always")
+                text:"Always"
                Layout.preferredWidth: 120
                FluMenuItem{
-                    text: qsTr("Never")
+                    text:"Nerver"
                    onClicked: {
                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Never
+                        tab_view.closeButtonVisibility = FluTabViewType.Nerver
                    }
                }
                FluMenuItem{
-                    text: qsTr("Always")
+                    text:"Always"
                    onClicked: {
                        btn_close_button_visibility.text = text
                        tab_view.closeButtonVisibility = FluTabViewType.Always
                    }
                }
                FluMenuItem{
-                    text: qsTr("OnHover")
+                    text:"OnHover"
                    onClicked: {
                        btn_close_button_visibility.text = text
                        tab_view.closeButtonVisibility = FluTabViewType.OnHover
@ -96,11 +91,11 @@ FluScrollablePage{
        }
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 15
-        Layout.preferredHeight: 400
+        height: 400
-        padding: 10
+        paddings: 10
        FluTabView{
            id:tab_view
            onNewPressed:{
@ -110,7 +105,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluTabView{
    anchors.fill: parent
    Component.onCompleted: {
@ -131,4 +126,5 @@ FluScrollablePage{
 }
 '
    }
 }
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@ -1,580 +1,45 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluContentPage{
-    id:root
+    title:"TableView"
    title: qsTr("TableView")
    signal checkBoxChanged
    property int sortType: 0
    property bool selectedAll: true
    property string nameKeyword: ""
    onNameKeywordChanged: {
        table_view.filter(function(item){
            if(item.name.includes(nameKeyword)){
                return true
            }
            return false
        })
    }
    Component.onCompleted: {
        loadData(1,1000)
    }
    onCheckBoxChanged: {
        for(var i =0;i< table_view.rows ;i++){
            if(false === table_view.getRow(i).checkbox.options.checked){
                root.selectedAll = false
                return
            }
        }
        root.selectedAll = true
    }
    onSortTypeChanged: {
        table_view.closeEditor()
        if(sortType === 0){
            table_view.sort()
        }else if(sortType === 1){
            table_view.sort(
                        (l, r) =>{
                            var lage = Number(l.age)
                            var rage = Number(r.age)
                            if(lage === rage){
                                return l._key>r._key
                            }
                            return lage>rage
                        });
        }else if(sortType === 2){
            table_view.sort(
                        (l, r) => {
                            var lage = Number(l.age)
                            var rage = Number(r.age)
                            if(lage === rage){
                                return l._key>r._key
                            }
                            return lage<rage
                        });
        }
    }
    FluContentDialog{
        id:custom_update_dialog
        property var text
        property var onAccpetListener
        title: qsTr("Modify the column name")
        negativeText: qsTr("Cancel")
        contentDelegate: Component{
            Item{
                implicitWidth: parent.width
                implicitHeight: 60
                FluTextBox{
                    id:textbox_text
                    anchors.centerIn: parent
                    onTextChanged: {
                        custom_update_dialog.text = textbox_text.text
                    }
                }
                Component.onCompleted: {
                    textbox_text.text = custom_update_dialog.text
                    textbox_text.forceActiveFocus()
                }
            }
        }
        positiveText: qsTr("OK")
        onPositiveClicked:{
            if(custom_update_dialog.onAccpetListener){
                custom_update_dialog.onAccpetListener(custom_update_dialog.text)
            }
        }
        function showDialog(text,listener){
            custom_update_dialog.text = text
            custom_update_dialog.onAccpetListener = listener
            custom_update_dialog.open()
        }
    }
    FluMenu{
        id:pop_filter
        width: 200
        height: 89
        contentItem: Item{
            onVisibleChanged: {
                if(visible){
                    name_filter_text.text = root.nameKeyword
                    name_filter_text.cursorPosition = name_filter_text.text.length
                    name_filter_text.forceActiveFocus()
                }
            }
            FluTextBox{
                id:name_filter_text
                anchors{
                    left: parent.left
                    right: parent.right
                    top: parent.top
                    leftMargin: 10
                    rightMargin: 10
                    topMargin: 10
                }
                iconSource: FluentIcons.Search
            }
            FluButton{
                text: qsTr("Search")
                anchors{
                    bottom: parent.bottom
                    right: parent.right
                    bottomMargin: 10
                    rightMargin: 10
                }
                onClicked: {
                    root.nameKeyword = name_filter_text.text
                    pop_filter.close()
                }
            }
        }
        function showPopup(){
            table_view.closeEditor()
            pop_filter.popup()
        }
    }
    Component{
        id:com_checbox
        Item{
            FluCheckBox{
                anchors.centerIn: parent
                checked: true === options.checked
                animationEnabled: false
                clickListener: function(){
                    var obj = table_view.getRow(row)
                    obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
                    table_view.setRow(row,obj)
                    checkBoxChanged()
                }
            }
        }
    }
    Component{
        id:com_column_filter_name
        Item{
            FluText{
                text: qsTr("Name")
                anchors.centerIn: parent
            }
            FluIconButton{
                width: 20
                height: 20
                iconSize: 12
                verticalPadding:0
                horizontalPadding:0
                iconSource: FluentIcons.Filter
                iconColor: {
                    if("" !== root.nameKeyword){
                        return FluTheme.primaryColor
                    }
                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                }
                anchors{
                    right: parent.right
                    rightMargin: 3
                    verticalCenter: parent.verticalCenter
                }
                onClicked: {
                    pop_filter.showPopup()
                }
            }
        }
    }
    Component{
        id:com_action
        Item{
            RowLayout{
                anchors.centerIn: parent
                FluButton{
-                    text: qsTr("Delete")
+                    text:"删除"
                    onClicked: {
                        table_view.closeEditor()
-                        table_view.removeRow(row)
+                        tableModel.removeRow(row)
                    }
                }
                FluFilledButton{
-                    text: qsTr("Edit")
+                    text:"编辑"
                    onClicked: {
-                        var obj = table_view.getRow(row)
+                        showSuccess(JSON.stringify(tableModel.getRow(row)))
                        obj.name = "12345"
                        table_view.setRow(row,obj)
                        showSuccess(JSON.stringify(obj))
                    }
                }
            }
        }
    }
-
+    function loadData(page,count){
-    Component{
+        var numbers = [100, 300, 500, 1000];
        id:com_column_checbox
        Item{
            RowLayout{
                anchors.centerIn: parent
                FluText{
                    text: qsTr("Select All")
                    Layout.alignment: Qt.AlignVCenter
                }
                FluCheckBox{
                    checked: true === root.selectedAll
                    animationEnabled: false
                    Layout.alignment: Qt.AlignVCenter
                    clickListener: function(){
                        root.selectedAll = !root.selectedAll
                        var checked = root.selectedAll
                        var columnModel = model.display
                        columnModel.title = table_view.customItem(com_column_checbox,{"checked":checked})
                        model.display = columnModel
                        for(var i =0;i< table_view.rows ;i++){
                            var rowData = table_view.getRow(i)
                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
                            table_view.setRow(i,rowData)
                        }
                    }
                }
            }
        }
    }
    Component{
        id:com_combobox
        FluComboBox {
            anchors.fill: parent
            focus: true
            editText: display
            editable: true
            model: ListModel {
                ListElement { text: "100" }
                ListElement { text: "300" }
                ListElement { text: "500" }
                ListElement { text: "1000" }
            }
            Component.onCompleted: {
                currentIndex=["100","300","500","1000"].findIndex((element) => element === display)
                textBox.forceActiveFocus()
                textBox.selectAll()
            }
            onCommit: {
                editTextChaged(editText)
                tableView.closeEditor()
            }
        }
    }
    Component{
        id:com_auto_suggestbox
        FluAutoSuggestBox {
            id: textbox
            anchors.fill: parent
            focus: true
            Component.onCompleted: {
                var data = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
                var result = data.map(function(item) {
                    return {title: item};
                });
                items = result
                textbox.text= String(display)
                forceActiveFocus()
                selectAll()
            }
            onCommit: {
                editTextChaged(textbox.text)
                tableView.closeEditor()
            }
        }
    }
    Component{
        id:com_avatar
        Item{
            FluClip{
                anchors.centerIn: parent
                width: 40
                height: 40
                radius: [20,20,20,20]
                Image{
                    anchors.fill: parent
                    source: options && options.avatar ? options.avatar : ""
                    sourceSize: Qt.size(80,80)
                }
            }
        }
    }
    Component{
        id:com_column_update_title
        Item{
            FluText{
                id:text_title
                text: {
                    if(options.title){
                        return options.title
                    }
                    return ""
                }
                anchors.fill: parent
                verticalAlignment: Qt.AlignVCenter
                horizontalAlignment: Qt.AlignHCenter
                elide: Text.ElideRight
            }
            MouseArea{
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    custom_update_dialog.showDialog(options.title,function(text){
                        var columnModel = model.display
                        columnModel.title = table_view.customItem(com_column_update_title,{"title":text})
                        model.display = columnModel
                    })
                }
            }
        }
    }
    Component{
        id:com_column_sort_age
        Item{
            FluText{
                text: qsTr("Age")
                anchors.centerIn: parent
            }
            ColumnLayout{
                spacing: 0
                anchors{
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                    rightMargin: 4
                }
                FluIconButton{
                    Layout.preferredWidth: 20
                    Layout.preferredHeight: 15
                    iconSize: 12
                    verticalPadding:0
                    horizontalPadding:0
                    iconSource: FluentIcons.ChevronUp
                    iconColor: {
                        if(1 === root.sortType){
                            return FluTheme.primaryColor
                        }
                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                    }
                    onClicked: {
                        if(root.sortType === 1){
                            root.sortType = 0
                            return
                        }
                        root.sortType = 1
                    }
                }
                FluIconButton{
                    Layout.preferredWidth: 20
                    Layout.preferredHeight: 15
                    iconSize: 12
                    verticalPadding:0
                    horizontalPadding:0
                    iconSource: FluentIcons.ChevronDown
                    iconColor: {
                        if(2 === root.sortType){
                            return FluTheme.primaryColor
                        }
                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                    }
                    onClicked: {
                        if(root.sortType === 2){
                            root.sortType = 0
                            return
                        }
                        root.sortType = 2
                    }
                }
            }
        }
    }
    FluFrame{
        id:layout_controls
        anchors{
            left: parent.left
            right: parent.right
            top: parent.top
            topMargin: 20
        }
        height: 60
        Row{
            spacing: 5
            anchors{
                left: parent.left
                leftMargin: 10
                verticalCenter: parent.verticalCenter
            }
            FluButton{
                text: qsTr("Clear All")
                onClicked: {
                    table_view.dataSource = []
                }
            }
            FluButton{
                text: qsTr("Delete Selection")
                onClicked: {
                    var data = []
                    var rows = []
                    for (var i = 0; i < table_view.rows; i++) {
                        var item = table_view.getRow(i)
                        rows.push(item)
                        if (!item.checkbox.options.checked) {
                            data.push(item);
                        }
                    }
                    var sourceModel = table_view.sourceModel
                    for (i = 0; i < sourceModel.rowCount; i++) {
                        var sourceItem = sourceModel.getRow(i)
                        const foundItem = rows.find(item=> item._key === sourceItem._key)
                        if (!foundItem) {
                            data.push(sourceItem);
                        }
                    }
                    table_view.dataSource = data
                }
            }
            FluButton{
                text: qsTr("Add a row of Data")
                onClicked: {
                    table_view.appendRow(genTestObject())
                }
            }
            FluButton{
                text: qsTr("Insert a Row")
                onClicked: {
                    var index = table_view.currentIndex()
                    if(index !== -1){
                        var testObj = genTestObject()
                        table_view.insertRow(index,testObj)
                    }else{
                        showWarning(qsTr("Focus not acquired: Please click any item in the form as the target for insertion!"))
                    }
                }
            }
        }
    }
    FluTableView{
        id:table_view
        anchors{
            left: parent.left
            right: parent.right
            top: layout_controls.bottom
            bottom: gagination.top
        }
        anchors.topMargin: 5
        onRowsChanged: {
            root.checkBoxChanged()
        }
        columnSource:[
            {
                title: table_view.customItem(com_column_checbox,{checked:true}),
                dataIndex: 'checkbox',
                frozen: true
            },
            {
                title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
                dataIndex: 'name',
                readOnly:true
            },
            {
                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
                dataIndex: 'avatar',
                width:100,
                frozen:true
            },
            {
                title: table_view.customItem(com_column_sort_age,{sort:0}),
                dataIndex: 'age',
                editDelegate:com_combobox,
                width:100,
                minimumWidth:100,
                maximumWidth:100
            },
            {
                title: qsTr("Address"),
                dataIndex: 'address',
                editDelegate: com_auto_suggestbox,
                width:200,
                minimumWidth:100,
                maximumWidth:250
            },
            {
                title: qsTr("Nickname"),
                dataIndex: 'nickname',
                width:100,
                minimumWidth:80,
                maximumWidth:200
            },
            {
                title: qsTr("Long String"),
                dataIndex: 'longstring',
                width:200,
                minimumWidth:100,
                maximumWidth:300,
                editMultiline: true
            },
            {
                title: qsTr("Options"),
                dataIndex: 'action',
                width:160,
                frozen:true
            }
        ]
    }
    FluPagination{
        id:gagination
        anchors{
            bottom: parent.bottom
            left: parent.left
        }
        pageCurrent: 1
        itemCount: 100000
        pageButtonCount: 7
        __itemPerPage: 1000
        previousText: qsTr("<Previous")
        nextText: qsTr("Next>")
        onRequestPage:
            (page,count)=> {
                table_view.closeEditor()
                loadData(page,count)
                table_view.resetPosition()
            }
    }
    function genTestObject(){
        var ages = ["100", "300", "500", "1000"];
        function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * ages.length);
+            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return ages[randomIndex];
+            return numbers[randomIndex];
        }
        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
        function getRandomName(){
@ -591,30 +56,122 @@ FluContentPage{
            var randomIndex = Math.floor(Math.random() * addresses.length);
            return addresses[randomIndex];
        }
        var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
        function getAvatar(){
            var randomIndex = Math.floor(Math.random() * avatars.length);
            return avatars[randomIndex];
        }
        return {
            checkbox: table_view.customItem(com_checbox,{checked:root.selectedAll}),
            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
            name: getRandomName(),
            age:getRandomAge(),
            address: getRandomAddresses(),
            nickname: getRandomNickname(),
            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
            action: table_view.customItem(com_action),
            _minimumHeight:50,
            _key:FluTools.uuid()
        }
    }
    function loadData(page,count){
        root.selectedAll = true
        const dataSource = []
        for(var i=0;i<count;i++){
-            dataSource.push(genTestObject())
+            dataSource.push({
                                name: getRandomName(),
                                age:getRandomAge(),
                                address: getRandomAddresses(),
                                nickname: getRandomNickname(),
                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
                                height:42,
                                minimumHeight:42,
                                maximumHeight:300,
                                action:com_action
                            })
        }
        table_view.dataSource = dataSource
    }
    Component{
        id:com_combobox
        FluComboBox {
            anchors.fill: parent
            focus: true
            currentIndex: display
            editable: true
            model: ListModel {
                ListElement { text: 100 }
                ListElement { text: 300 }
                ListElement { text: 500 }
                ListElement { text: 1000 }
            }
            Component.onCompleted: {
                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
                selectAll()
            }
            onCommit: {
                display = editText
                tableView.closeEditor()
            }
        }
    }
    FluTableView{
        id:table_view
        anchors{
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: gagination.top
        }
        anchors.topMargin: 20
        columnSource:[
            {
                title: '姓名',
                dataIndex: 'name',
                width:100,
                minimumWidth:80,
                maximumWidth:200,
                readOnly:true
            },
            {
                title: '年龄',
                dataIndex: 'age',
                editDelegate:com_combobox,
                width:100,
                minimumWidth:100,
                maximumWidth:100
            },
            {
                title: '住址',
                dataIndex: 'address',
                width:200,
                minimumWidth:100,
                maximumWidth:250
            },
            {
                title: '别名',
                dataIndex: 'nickname',
                width:100,
                minimumWidth:80,
                maximumWidth:200
            },
            {
                title: '长字符串',
                dataIndex: 'longstring',
                width:200,
                minimumWidth:100,
                maximumWidth:300
            },
            {
                title: '操作',
                dataIndex: 'action',
                width:160,
                minimumWidth:160,
                maximumWidth:160
            }
        ]
    }
    FluPagination{
        id:gagination
        anchors{
            bottom: parent.bottom
            left: parent.left
        }
        pageCurrent: 1
        itemCount: 100000
        pageButtonCount: 7
        __itemPerPage: 1000
        onRequestPage:
            (page,count)=> {
                table_view.closeEditor()
                loadData(page,count)
                table_view.resetPosition()
            }
    }
 }
--- a/example/qml/page/T_Text.qml
+++ b/example/qml/page/T_Text.qml
@ -1,39 +1,31 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Text")
+    title:"Text"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 60
+        Layout.topMargin: 20
-        padding: 10
+        height: 60
        paddings: 10
        FluCopyableText{
-            enabled: !toggle_switch.checked
+            text: "这是一个可以支持复制的Text"
            text: qsTr("This is a text that can be copied")
            anchors.verticalCenter: parent.verticalCenter
        }
        FluToggleSwitch{
            id: toggle_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: qsTr("Disabled")
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluCopyableText{
-    text: qsTr("This is a text that can be copied")
+    text:"这是一个可以支持复制的Text"
 }'
    }
--- a/example/qml/page/T_TextBox.qml
+++ b/example/qml/page/T_TextBox.qml
@ -1,22 +1,24 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("TextBox")
+    launchMode: FluPageType.SingleInstance
-    FluFrame{
+    title:"TextBox"
    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluTextBox{
-            placeholderText: qsTr("Single-line Input Box")
+            placeholderText: "单行输入框"
-            disabled: text_box_switch.checked
+            disabled:text_box_switch.checked
            cleanEnabled: true
            anchors{
                verticalCenter: parent.verticalCenter
@ -25,30 +27,30 @@ FluScrollablePage{
        }
        FluToggleSwitch{
-            id: text_box_switch
+            id:text_box_switch
            anchors{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluTextBox{
-    placeholderText: qsTr("Single-line Input Box")
+    placeholderText:"单行输入框"
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluPasswordBox{
-            placeholderText: qsTr("Please enter your password")
+            placeholderText: "请输入密码"
            disabled:password_box_switch.checked
            anchors{
                verticalCenter: parent.verticalCenter
@ -61,27 +63,28 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluPasswordBox{
-    placeholderText: qsTr("Please enter your password")
+    placeholderText:"请输入密码"
 }'
    }
-    FluFrame{
+
    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 36+multiine_textbox.height
+        height: 36+multiine_textbox.height
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluMultilineTextBox{
-            id: multiine_textbox
+            id:multiine_textbox
-            placeholderText: qsTr("Multi-line Input Box")
+            placeholderText: "多行输入框"
-            disabled: text_box_multi_switch.checked
+            disabled:text_box_multi_switch.checked
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
@ -94,26 +97,26 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluMultilineTextBox{
-    placeholderText: qsTr("Multi-line Input Box")
+    placeholderText:"多行输入框"
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluAutoSuggestBox{
-            placeholderText: qsTr("AutoSuggestBox")
+            placeholderText: "AutoSuggestBox"
-            items: generateRandomNames(100)
+            items:generateRandomNames(100)
-            disabled: text_box_suggest_switch.checked
+            disabled:text_box_suggest_switch.checked
            anchors{
                verticalCenter: parent.verticalCenter
                left: parent.left
@ -125,21 +128,21 @@ FluScrollablePage{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluAutoSuggestBox{
-    placeholderText: qsTr("AutoSuggestBox")
+    placeholderText:"AutoSuggestBox"
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        FluSpinBox{
            disabled: spin_box_switch.checked
@ -149,17 +152,17 @@ FluScrollablePage{
            }
        }
        FluToggleSwitch{
-            id: spin_box_switch
+            id:spin_box_switch
            anchors{
                verticalCenter: parent.verticalCenter
                right: parent.right
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluSpinBox{
 }'
--- a/example/qml/page/T_Theme.qml
+++ b/example/qml/page/T_Theme.qml
@ -1,45 +1,38 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+    title:"Theme"
    id: root
    title: qsTr("Theme")
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.fillHeight: true
+        Layout.topMargin: 20
-        padding: 10
+        height: 270
-
+        paddings: 10
        ColumnLayout{
            spacing:0
            anchors{
                left: parent.left
            }
            FluText{
                text: qsTr("Theme colors")
                Layout.topMargin: 10
            }
            RowLayout{
-                Layout.topMargin: 5
+                Layout.topMargin: 10
                Repeater{
-                    model: root.colorData
+                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  Rectangle{
+                    delegate:  FluRectangle{
                        width: 42
                        height: 42
-                        radius: 4
+                        radius: [4,4,4,4]
                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
                        border.color: modelData.darker
                        FluIcon {
                            anchors.centerIn: parent
                            iconSource: FluentIcons.AcceptMedium
                            iconSize: 15
-                            visible: modelData === FluTheme.accentColor
+                            visible: modelData === FluTheme.primaryColor
                            color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                        }
                        MouseArea{
@ -47,43 +40,14 @@ FluScrollablePage{
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked: {
-                                FluTheme.accentColor = modelData
+                                FluTheme.primaryColor = modelData
                            }
                        }
                    }
                }
            }
            Row{
                Layout.topMargin: 10
                spacing: 10
                FluText{
                    text: qsTr("Customize the Theme Color")
                    anchors.verticalCenter: parent.verticalCenter
                }
                FluColorPicker{
                    id:color_picker
                    current: FluTheme.accentColor.normal
                    onAccepted: {
                       FluTheme.accentColor = FluColors.createAccentColor(current)
                    }
                    FluIcon {
                        anchors.centerIn: parent
                        iconSource: FluentIcons.AcceptMedium
                        iconSize: 15
                        visible: {
                            for(var i =0 ;i< root.colorData.length; i++){
                                if(root.colorData[i] === FluTheme.accentColor){
                                    return false
                                }
                            }
                            return true
                        }
                        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                    }
                }
            }
            FluText{
-                text: qsTr("Dark Mode")
+                text:"夜间模式"
                Layout.topMargin: 20
            }
            FluToggleSwitch{
@ -98,7 +62,7 @@ FluScrollablePage{
                }
            }
            FluText{
-                text: qsTr("Native Text")
+                text:"native文本渲染"
                Layout.topMargin: 20
            }
            FluToggleSwitch{
@ -109,90 +73,22 @@ FluScrollablePage{
                }
            }
            FluText{
-                text: qsTr("Open Animation")
+                text:"开启动画效果"
                Layout.topMargin: 20
            }
            FluToggleSwitch{
                Layout.topMargin: 5
-                checked: FluTheme.animationEnabled
+                checked: FluTheme.enableAnimation
                onClicked: {
-                    FluTheme.animationEnabled = !FluTheme.animationEnabled
+                    FluTheme.enableAnimation = !FluTheme.enableAnimation
                }
            }
            FluText{
                text: qsTr("Open Blur Window")
                Layout.topMargin: 20
            }
            FluToggleSwitch{
                id: toggle_blur
                Layout.topMargin: 5
                checked: FluTheme.blurBehindWindowEnabled
                onClicked: {
                    FluTheme.blurBehindWindowEnabled = !FluTheme.blurBehindWindowEnabled
                }
            }
            FluText{
                text: qsTr("window effect")
                Layout.topMargin: 20
            }
            Row{
                spacing: 10
                Repeater{
                    model: window.availableEffects
                    delegate: FluRadioButton{
                        checked: window.effect === modelData
                        text: qsTr(`${modelData}`)
                        clickListener:function(){
                            window.effect = modelData
                            if(window.effective){
                                FluTheme.blurBehindWindowEnabled = false
                                toggle_blur.checked = Qt.binding( function() {return FluTheme.blurBehindWindowEnabled})
                            }
                        }
                    }
                }
            }
            FluText{
                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
                text: qsTr("window tintOpacity")
                Layout.topMargin: 20
            }
            FluSlider{
                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
                Layout.topMargin: 5
                to:1
                stepSize:0.1
                onValueChanged: {
                    window.tintOpacity = value
                }
                Component.onCompleted: {
                    value = window.tintOpacity
                }
            }
            FluText{
                visible: FluTheme.blurBehindWindowEnabled
                text: qsTr("window blurRadius")
                Layout.topMargin: 20
            }
            FluSlider{
                visible: FluTheme.blurBehindWindowEnabled
                Layout.topMargin: 5
                to:100
                stepSize:1
                onValueChanged: {
                    window.blurRadius = value
                }
                Component.onCompleted: {
                    value = window.blurRadius
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
-        code:'FluTheme.accentColor = FluColors.Orange
+        code:'FluTheme.primaryColor = FluColors.Orange
 FluTheme.dark = true
--- a/example/qml/page/T_TimePicker.qml
+++ b/example/qml/page/T_TimePicker.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("TimePicker")
+    title:"TimePicker"
    launchMode: FluPageType.SingleInstance
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 80
+        Layout.topMargin: 20
-        padding: 10
+        height: 80
        paddings: 10
        ColumnLayout{
@ -22,18 +23,11 @@ FluScrollablePage{
            }
            FluText{
-                text: qsTr("hourFormat=FluTimePickerType.H")
+                text:"hourFormat=FluTimePickerType.H"
            }
            FluTimePicker{
-                current: new Date()
+                onCurrentChanged: {
                amText: qsTr("AM")
                pmText: qsTr("PM")
                hourText: qsTr("Hour")
                minuteText: qsTr("Minute")
                cancelText: qsTr("Cancel")
                okText: qsTr("OK")
                onAccepted: {
                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
                }
            }
@ -42,17 +36,17 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluTimePicker{
 }'
    }
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
        Layout.topMargin: 20
-        Layout.preferredHeight: 80
+        height: 80
-        padding: 10
+        paddings: 10
        ColumnLayout{
@ -62,18 +56,12 @@ FluScrollablePage{
            }
            FluText{
-                text: qsTr("hourFormat=FluTimePickerType.HH")
+                text:"hourFormat=FluTimePickerType.HH"
            }
            FluTimePicker{
                hourFormat:FluTimePickerType.HH
-                amText: qsTr("AM")
+                onCurrentChanged: {
                pmText: qsTr("PM")
                hourText: qsTr("Hour")
                minuteText: qsTr("Minute")
                cancelText: qsTr("Cancel")
                okText: qsTr("OK")
                onAccepted: {
                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
                }
            }
@ -82,7 +70,7 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluTimePicker{
    hourFormat:FluTimePickerType.HH
 }'
--- a/example/qml/page/T_Timeline.qml
+++ b/example/qml/page/T_Timeline.qml
@ -1,169 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Timeline")
    Component{
        id:com_dot
        Rectangle{
            width: 16
            height: 16
            radius: 8
            border.width: 4
            border.color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
        }
    }
    Component{
        id:com_lable
        FluText{
            wrapMode: Text.WrapAnywhere
            font.bold: true
            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
            text: modelData.lable
            color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
            MouseArea{
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    showSuccess(modelData.lable)
                }
            }
        }
    }
    Component{
        id:com_text
        FluText{
            wrapMode: Text.WrapAnywhere
            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
            text: modelData.text
            linkColor: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
            onLinkActivated:
                (link)=> {
                    Qt.openUrlExternally(link)
                }
            onLinkHovered:
                (link)=> {
                    if(link === ""){
                        FluTools.restoreOverrideCursor()
                    }else{
                        FluTools.setOverrideCursor(Qt.PointingHandCursor)
                    }
                }
        }
    }
    ListModel{
        id:list_model
        ListElement{
            lable:"2013-09-01"
            text:'&nbsp;<img src="qrc:/example/res/image/image_1.jpg" align="top" width="144" height="102.4">&nbsp;考上中国皮城大学，杰斯武器工坊专业'
        }
        ListElement{
            lable:"2017-07-01"
            text:"大学毕业，在寝室打了4年LOL，没想到毕业还要找工作，瞬间蒙蔽，害"
        }
        ListElement{
            lable:"2017-09-01"
            text:"开始找工作，毕业即失业！回农村老家躺平，继承三亩良田"
        }
        ListElement{
            lable:"2018-02-01"
            text:"玩了一年没钱，惨，出去找工作上班"
        }
        ListElement{
            lable:"2018-03-01"
            text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
        }
        ListElement{
            lable:"2021-06-01"
            text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
        }
        ListElement{
            lable:"2022-08-01"
            text:"额，被老板卖到甲方公司，走时老板还问我想不想去，我说：'哪里工资高就去哪里'，老板：'无语'"
        }
        ListElement{
            lable:"2023-02-28"
            text:"开发FluentUI组件库"
        }
        ListElement{
            lable:"2023-03-28"
            text:'将FluentUI源码开源到<a href="https://github.com/zhuzichu520/FluentUI">github</a>，并发布视频到<a href="https://www.bilibili.com/video/BV1mg4y1M71w">B站</a>'
            lableDelegate:()=>com_lable
            textDelegate:()=>com_text
            dot:()=>com_dot
        }
    }
    RowLayout{
        spacing: 20
        FluTextBox{
            id: text_box
            text: "Technical testing 2015-09-01"
            Layout.preferredWidth: 240
        }
        FluFilledButton{
            text: qsTr("Append")
            onClicked: {
                list_model.append({text:text_box.text})
            }
        }
        FluFilledButton{
            text: qsTr("clear")
            onClicked: {
                list_model.clear()
            }
        }
    }
    RowLayout{
        Layout.topMargin: 10
        FluText{
            text: qsTr("mode:")
        }
        FluDropDownButton{
            id: btn_mode
            Layout.preferredWidth: 100
            text:  qsTr("Alternate")
            FluMenuItem{
                text: qsTr("Left")
                onClicked: {
                    btn_mode.text = text
                    time_line.mode = FluTimelineType.Left
                }
            }
            FluMenuItem{
                text: qsTr("Right")
                onClicked: {
                    btn_mode.text = text
                    time_line.mode = FluTimelineType.Right
                }
            }
            FluMenuItem{
                text: qsTr("Alternate")
                onClicked: {
                    btn_mode.text = text
                    time_line.mode = FluTimelineType.Alternate
                }
            }
        }
    }
    FluTimeline{
        id: time_line
        Layout.fillWidth: true
        Layout.topMargin: 20
        Layout.bottomMargin: 20
        mode: FluTimelineType.Alternate
        model: list_model
    }
 }
--- a/example/qml/page/T_ToggleSwitch.qml
+++ b/example/qml/page/T_ToggleSwitch.qml
@ -1,18 +1,19 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("ToggleSwitch")
+    title:"ToggleSwitch"
-    FluFrame{
+    FluArea{
        Layout.fillWidth: true
-        Layout.preferredHeight: 68
+        height: 68
-        padding: 10
+        paddings: 10
        Layout.topMargin: 20
        Row{
            spacing: 30
            anchors.verticalCenter: parent.verticalCenter
@ -21,26 +22,26 @@ FluScrollablePage{
            }
            FluToggleSwitch{
                disabled: toggle_switch.checked
-                text: qsTr("Right")
+                text:"Right"
            }
            FluToggleSwitch{
                disabled: toggle_switch.checked
-                text: qsTr("Left")
+                text:"Left"
                textRight: false
            }
        }
        FluToggleSwitch{
-            id: toggle_switch
+            id:toggle_switch
            anchors{
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
-            text: qsTr("Disabled")
+            text:"Disabled"
        }
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluToggleSwitch{
    text:"Text"
 }'
--- a/example/qml/page/T_Tooltip.qml
+++ b/example/qml/page/T_Tooltip.qml
@ -1,23 +1,24 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluScrollablePage{
-    title: qsTr("Tooltip")
+    title:"Tooltip"
    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
+        height: 68
-        padding: 10
+        paddings: 10
        Column{
            spacing: 5
@ -26,37 +27,37 @@ 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
+        Layout.topMargin: -1
        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
+        height: 68
-        padding: 10
+        paddings: 10
        Column{
            spacing: 5
@ -65,13 +66,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,17 +84,17 @@ FluScrollablePage{
    }
    CodeExpander{
        Layout.fillWidth: true
-        Layout.topMargin: -6
+        Layout.topMargin: -1
        code:'FluButton{
-    id: button_1
+    id:button_1
-    text: qsTr("Delete")
+    text:"删除"
    FluTooltip{
        visible: button_1.hovered
        text:button_1.text
        delay: 1000
    }
    onClicked:{
-        showSuccess(qsTr("Click Button"))
+        showSuccess("点击一个Button")
    }
 }'
    }
--- a/example/qml/page/T_Tour.qml
+++ b/example/qml/page/T_Tour.qml
@ -1,79 +0,0 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
 FluScrollablePage{
    title: qsTr("Tour")
    FluTour{
        id:tour
        steps:[
            {title:qsTr("Upload File"),description: qsTr("Put your files here."),target:()=>btn_upload},
            {title:qsTr("Save"),description: qsTr("Save your changes."),target:()=>btn_save},
            {title:qsTr("Other Actions"),description: qsTr("Click to see other actions."),target:()=>btn_more}
        ]
    }
    FluFrame{
        Layout.fillWidth: true
        Layout.preferredHeight: 130
        padding: 10
        FluFilledButton{
            anchors{
                top: parent.top
                topMargin: 14
            }
            text: qsTr("Begin Tour")
            onClicked: {
                tour.open()
            }
        }
        Row{
            spacing: 20
            anchors{
                top: parent.top
                topMargin: 60
            }
            FluButton{
                id: btn_upload
                text: qsTr("Upload")
                onClicked: {
                    showInfo(qsTr("Upload"))
                }
            }
            FluFilledButton{
                id: btn_save
                text: qsTr("Save")
                onClicked: {
                    showInfo(qsTr("Save"))
                }
            }
            FluIconButton{
                id: btn_more
                iconSource: FluentIcons.More
                onClicked: {
                    showInfo(qsTr("More"))
                }
            }
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -6
        code:'FluTour{
    id:tour
    steps:[
        {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
        {title:"Save",description: "Save your changes.",target:()=>btn_save},
        {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
    ]
 }'
    }
 }
--- a/example/qml/page/T_TreeView.qml
+++ b/example/qml/page/T_TreeView.qml
@ -1,204 +1,156 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
-FluContentPage {
+FluScrollablePage {
-    title: qsTr("TreeView")
+    title:"TreeView"
-    function treeData(){
+    function randomName() {
-        const names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]
+        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
-        function getRandomName(){
+        return names[Math.floor(Math.random() * names.length)]
            var randomIndex = Math.floor(Math.random() * names.length)
            return names[randomIndex]
        }
        const addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
        function getRandomAddresses(){
            var randomIndex = Math.floor(Math.random() * addresses.length)
            return addresses[randomIndex]
        }
        const avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"]
        function getRandomAvatar(){
            var randomIndex = Math.floor(Math.random() * avatars.length);
            return avatars[randomIndex];
        }
        const dig = (path = '0', level = 5) => {
            const list = [];
            for (let i = 0; i < 4; i += 1) {
                const key = `${path}-${i}`;
                const treeNode = {
                    title: key,
                    _key: key,
                    name: getRandomName(),
                    avatar:tree_view.customItem(com_avatar,{avatar:getRandomAvatar()}),
                    address: getRandomAddresses()
                };
                if (level > 0) {
                    treeNode.children = dig(key, level - 1);
                }
                list.push(treeNode);
            }
            return list;
        };
        return dig();
    }
-    Component{
+    function randomCompany() {
-        id:com_avatar
+        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
-        Item{
+        return companies[Math.floor(Math.random() * companies.length)]
            FluClip{
                anchors.centerIn: parent
                width: height
                height: parent.height/3*2
                radius: [height/2,height/2,height/2,height/2]
                Image{
                    anchors.fill: parent
                    source: {
                        if(options && options.avatar){
                            return options.avatar
                        }
                        return ""
                    }
                    sourceSize: Qt.size(80,80)
                }
            }
        }
    }
-    FluFrame{
+
-        id:layout_controls
+    function randomDepartment() {
-        anchors{
+        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
-            left: parent.left
+        return departments[Math.floor(Math.random() * departments.length)]
-            right: parent.right
+    }
-            top: parent.top
+
-            topMargin: 10
+    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())
        }
-        height: 80
+        return tree_view.createItem(randomDepartment(), true, employees)
-        clip: true
+    }
-        Row{
+
-            spacing: 12
+    function createOrg(numLevels, numSubtrees, numEmployees) {
-            anchors{
+        if (numLevels === 0) {
-                left: parent.left
+            return []
-                leftMargin: 10
+        }
-                verticalCenter: parent.verticalCenter
+        var subtrees = []
-            }
+        for (var i = 0; i < numSubtrees; i++) {
-            Column{
+            subtrees.push(createSubtree(numEmployees))
-                anchors.verticalCenter: parent.verticalCenter
+        }
-                RowLayout{
+        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
-                    spacing: 10
+    }
-                    FluText{
+
-                        text: qsTr("cellHeight:")
+    FluArea{
-                        Layout.alignment: Qt.AlignVCenter
+        id:layout_actions
-                    }
+        Layout.fillWidth: true
-                    FluSlider{
+        Layout.topMargin: 20
-                        id: slider_cell_height
+        height: 50
-                        value: 38
+        paddings: 10
-                        from: 38
+        RowLayout{
-                        to:100
+            spacing: 14
-                    }
+            FluDropDownButton{
-                }
+                id:btn_selection_model
-                RowLayout{
+                Layout.preferredWidth: 140
-                    spacing: 10
+                text:"None"
-                    FluText{
+                FluMenuItem{
-                        text: qsTr("depthPadding:")
+                    text:"None"
                        Layout.alignment: Qt.AlignVCenter
                    }
                    FluSlider{
                        id: slider_depth_padding
                        value: 15
                        from: 15
                        to:100
                    }
                }
            }
            Column{
                spacing: 8
                anchors.verticalCenter: parent.verticalCenter
                FluToggleSwitch{
                    id: switch_showline
                    text: qsTr("showLine")
                    checked: false
                }
                FluToggleSwitch{
                    id: switch_checkable
                    text: qsTr("checkable")
                    checked: false
                }
            }
            Column{
                spacing: 8
                anchors.verticalCenter: parent.verticalCenter
                FluButton{
                    text: qsTr("all expand")
                    onClicked: {
-                        tree_view.allExpand()
+                        btn_selection_model.text = text
                        tree_view.selectionMode = FluTabViewType.Equal
                    }
                }
-                FluButton{
+                FluMenuItem{
-                    text: qsTr("all collapse")
+                    text:"Single"
                    onClicked: {
-                        tree_view.allCollapse()
+                        btn_selection_model.text = text
                        tree_view.selectionMode = FluTabViewType.SizeToContent
                    }
                }
                FluMenuItem{
                    text:"Muiltple"
                    onClicked: {
                        btn_selection_model.text = text
                        tree_view.selectionMode = FluTabViewType.Compact
                    }
                }
            }
-            FluButton{
+            FluFilledButton{
-                text: qsTr("print selection model")
+                text:"获取选中的数据"
                onClicked: {
-                    var printData = []
+                    if(tree_view.selectionMode === FluTreeViewType.None){
-                    var data = tree_view.selectionModel();
+                        showError("当前非选择模式,没有选中的数据")
-                    console.debug(data.length)
+                    }
-                    for(var i = 0; i <= data.length-1 ; i++){
+                    if(tree_view.selectionMode === FluTreeViewType.Single){
-                        const newObj = Object.assign({}, data[i].data);
+                        if(!tree_view.signleData()){
-                        delete newObj["__parent"];
+                            showError("没有选中数据")
-                        delete newObj["children"];
+                            return
-                        printData.push(newObj)
+                        }
                        showSuccess(tree_view.signleData().text)
                    }
                    if(tree_view.selectionMode === FluTreeViewType.Multiple){
                        if(tree_view.multipData().length===0){
                            showError("没有选中数据")
                            return
                        }
                        var info = []
                        tree_view.multipData().map((value)=>info.push(value.text))
                        showSuccess(info.join(","))
                    }
                    console.debug(JSON.stringify(printData))
                }
            }
        }
    }
    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)
                }
-    FluTreeView{
+            Component.onCompleted: {
-        id:tree_view
+                var org = createOrg(3, 3, 3)
-        anchors{
+                createItem()
-            left: parent.left
+                updateData(org)
-            top: layout_controls.bottom
+            }
            topMargin: 10
            bottom: parent.bottom
            right: parent.right
        }
        cellHeight: slider_cell_height.value
        showLine: switch_showline.checked
        checkable:switch_checkable.checked
        depthPadding: slider_depth_padding.value
        onCurrentChanged: {
            showInfo(current.data.title)
        }
        columnSource:[
            {
                title: qsTr("Title"),
                dataIndex: 'title',
                width: 300
            },{
                title: qsTr("Name"),
                dataIndex: 'name',
                width: 100
            },{
                title: qsTr("Avatar"),
                dataIndex: 'avatar',
                width: 100
            },{
                title: qsTr("Address"),
                dataIndex: 'address',
                width: 200
            },
        ]
        Component.onCompleted: {
            var data = treeData()
            dataSource = data
        }
    }
    CodeExpander{
        Layout.fillWidth: true
        Layout.topMargin: -1
        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/qml/page/T_Typography.qml
+++ b/example/qml/page/T_Typography.qml
@ -1,66 +1,67 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import FluentUI 1.0
+import FluentUI
 FluContentPage {
    property real textScale: 1
-    title: qsTr("Typography")
+    title: "Typography"
    rightPadding: 10
-    FluFrame{
+    FluArea{
        anchors{
            top:parent.top
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            topMargin: 20
        }
-        padding: 10
+        paddings: 10
        ColumnLayout{
            spacing: 0
            scale: textScale
            transformOrigin: Item.TopLeft
            FluText{
                id:text_Display
-                text: qsTr("Display")
+                text:"Display"
                padding: 0
                font: FluTextStyle.Display
            }
            FluText{
                id:text_TitleLarge
-                text: qsTr("Title Large")
+                text:"Title Large"
                padding: 0
                font: FluTextStyle.TitleLarge
            }
            FluText{
                id:text_Title
-                text: qsTr("Title")
+                text:"Title"
                padding: 0
                font: FluTextStyle.Title
            }
            FluText{
                id:text_Subtitle
-                text:  qsTr("Subtitle")
+                text:"Subtitle"
                padding: 0
                font: FluTextStyle.Subtitle
            }
            FluText{
                id:text_BodyStrong
-                text: qsTr("Body Strong")
+                text:"Body Strong"
                padding: 0
                font: FluTextStyle.BodyStrong
            }
            FluText{
                id:text_Body
-                text: qsTr("Body")
+                text:"Body"
                padding: 0
                font: FluTextStyle.Body
            }
            FluText{
                id:text_Caption
-                text: qsTr("Caption")
+                text:"Caption"
                padding: 0
                font: FluTextStyle.Caption
            }
--- a/example/qml/page/T_Watermark.qml
+++ b/example/qml/page/T_Watermark.qml
@ -1,16 +1,17 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Window 2.15
+import QtQuick.Window
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 FluContentPage{
-    title: qsTr("Watermark")
+    title:"Watermark"
-    FluFrame{
+    FluArea{
        anchors.fill: parent
        anchors.topMargin: 20
        ColumnLayout{
            anchors{
@ -22,24 +23,23 @@ FluContentPage{
                spacing: 10
                Layout.topMargin: 14
                FluText{
-                    text: qsTr("text:")
+                    text:"text:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluTextBox{
-                    id: text_box
+                    id:text_box
-                    text: "会磨刀的小猪"
+                    text:"会磨刀的小猪"
                    Layout.preferredWidth: 240
                }
            }
            RowLayout{
                spacing: 10
                FluText{
-                    text: qsTr("textSize:")
+                    text:"textSize:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
-                    id: slider_text_size
+                    id:slider_text_size
                    value: 20
                    from: 13
                    to:50
@ -48,7 +48,7 @@ FluContentPage{
            RowLayout{
                spacing: 10
                FluText{
-                    text: qsTr("gapX:")
+                    text:"gapX:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
@ -59,18 +59,18 @@ FluContentPage{
            RowLayout{
                spacing: 10
                FluText{
-                    text: qsTr("gapY:")
+                    text:"gapY:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
-                    id: slider_gap_y
+                    id:slider_gap_y
                    value: 100
                }
            }
            RowLayout{
                spacing: 10
                FluText{
-                    text: qsTr("offsetX:")
+                    text:"offsetX:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
@ -81,22 +81,22 @@ FluContentPage{
            RowLayout{
                spacing: 10
                FluText{
-                    text: qsTr("offsetY:")
+                    text:"offsetY:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
-                    id: slider_offset_y
+                    id:slider_offset_y
                    value: 50
                }
            }
            RowLayout{
                spacing: 10
                FluText{
-                    text: qsTr("rotate:")
+                    text:"rotate:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
-                    id: slider_rotate
+                    id:slider_rotate
                    value: 22
                    from: 0
                    to:360
@ -105,21 +105,23 @@ FluContentPage{
            RowLayout{
                spacing: 10
                FluText{
-                    text: qsTr("textColor:")
+                    text:"textColor:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluColorPicker{
-                    id: color_picker
+                    id:color_picker
-                    current: Qt.rgba(0,0,0,0.1)
+                    Component.onCompleted: {
                        setColor(Qt.rgba(0,0,0,0.1))
                    }
                }
            }
        }
        FluWatermark{
-            id: water_mark
+            id:water_mark
            anchors.fill: parent
            text:text_box.text
-            textColor: color_picker.current
+            textColor: color_picker.colorValue
            textSize: slider_text_size.value
            rotate: slider_rotate.value
            gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
--- a/example/qml/window/AboutWindow.qml
+++ b/example/qml/window/AboutWindow.qml
@ -1,15 +1,15 @@
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Controls 2.15
+import QtQuick.Controls
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import FluentUI 1.0
+import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
-FluWindow {
+CustomWindow {
    id:window
    title:"关于"
    width: 600
-    height: 580
+    height: 600
    fixSize: true
    launchMode: FluWindowType.SingleTask
@ -19,10 +19,9 @@ FluWindow {
            left: parent.left
            right: parent.right
        }
        spacing: 5
        RowLayout{
-            Layout.topMargin: 10
+            Layout.topMargin: 20
            Layout.leftMargin: 15
            spacing: 14
            FluText{
@ -31,12 +30,12 @@ FluWindow {
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
-                        FluRouter.navigate("/")
+                        FluApp.navigate("/")
                    }
                }
            }
            FluText{
-                text:"v%1".arg(AppInfo.version)
+                text:"v%1".arg(appInfo.version)
                font: FluTextStyle.Body
                Layout.alignment: Qt.AlignBottom
            }
@ -44,6 +43,7 @@ FluWindow {
        RowLayout{
            spacing: 14
            Layout.topMargin: 20
            Layout.leftMargin: 15
            FluText{
                text:"作者："
@ -54,21 +54,6 @@ FluWindow {
            }
        }
        RowLayout{
            spacing: 14
            Layout.leftMargin: 15
            FluText{
                text:"微信号："
            }
            FluText{
                text:"FluentUI"
                Layout.alignment: Qt.AlignBottom
            }
            FluText{
                text:"(有啥问题可能不会马上回，但发了红包必须立马回......)"
            }
        }
        RowLayout{
            spacing: 14
            Layout.leftMargin: 15
--- a/Show More
+++ b/Show More